github carbon-design-system/carbon-components-svelte v0.113.0

2 hours ago

This release adds 12 new components (Bleed, Carousel, DescriptionList, Divider, Meter, PageHeader, RelativeTime, ToggleButtonGroup, ToolbarColumnVisibility, ToolbarDensity, VirtualList, GridOverlay). DatePicker gains multiple, week, and inline calendars. Box lays out flex and grid children. MultiSelect groups its options. BigNumber shows a delta and formats its value.

CSS. all.css is 27% smaller minified (877.1 kB → 638.0 kB) and 8% smaller gzipped (80.6 kB → 74.0 kB). That comparison already includes the new components' CSS.

Selectors. Selectors with four or more classes fall from 1,229 to 849. The heaviest goes from (0, 10, 1) to (0, 9, 1): 0 IDs, 10 classes, and 1 element, down to 9 classes. A lighter selector is cheaper for the browser to match when styles are recalculated, and your own CSS can override it without restating a long class chain. The rendered result stays the same. The :not() rewrites were checked for cascade flips and had none.

Component updates. Unchanged data skips the expensive pass. Equal DataTable rows drop from hundreds of milliseconds to a few. Equal MultiSelect selections are about 15× faster. Equal TreeView nodes go from 68.6 ms to 0.64 ms per update at 220 nodes, and from 6,192 ms to 4.0 ms at about 11,000 nodes.

Breaking: the Disclosure toggle detail is { open: boolean }. @font-face rules for IBM Plex weights this library never uses (100, 200, 450, 500, and 700) are removed. Weights the components actually set (300, 400, and 600) stay.

Also in this release: SwitchPanel for content switchers, Button loading, debounced search, a resizable side nav, and color-scheme: dark on dark themes.

487 changes in this release:

Category Count
Breaking changes 2
New components 12
Features 168
Bug fixes 257
Performance 60

Full Changelog: v0.112.0...v0.113.0


Breaking changes

Two breaks. This library's type tokens and component CSS only set IBM Plex weights 300, 400, and 600. The dropped faces are the ones nothing in the package referenced.

Disclosure

The toggle event detail is { open: boolean }. AccordionItem dispatches the same shape when its header is clicked. Read e.detail.open.

<script>
  import { Disclosure } from "carbon-components-svelte";

  let open = false;
</script>

<Disclosure summary="Details" on:toggle={(e) => (open = e.detail.open)}>
  Panel content
</Disclosure>

IBM Plex weights

This library never applied IBM Plex weights 100, 200, 450, 500, or 700. Type tokens and component CSS only set 300, 400, and 600, so the @font-face rules for the unused weights are gone.

An app stylesheet that still asks for a dropped weight gets the nearest face this package ships: 100 and 200 render as 300, 450 and 500 render as 400, and 700 renders as 600. That removes 130 of 208 rules and about 54 KB from each CSS file (about 323 KB unpacked across the six theme files). The bundle and specificity cuts that contain this break are in the next section.


Smaller, lighter CSS

all.css against v0.112.0, minified the same way the package ships it. The new components in this release are already in the v0.113.0 column.

v0.112.0 v0.113.0 Change
Minified 877.1 kB 638.0 kB −239.1 kB (−27%)
Gzipped 80.6 kB 74.0 kB −6.6 kB (−8%)
Selectors 6,766 6,594 −172
Max specificity (0, 10, 1) (0, 9, 1) one class lighter
4+ class selectors 1,229 849 −380
3-class selectors 1,545 1,327 −218
2-class selectors 2,199 2,173 −26
1-class selectors 1,582 2,054 +472
Element-qualified 48 39 −9

(0, 10, 1) is 0 IDs, 10 classes, and 1 element. A lighter selector costs less to match and is easier to override, and the cascade check kept the computed styles. The one-class count rose because long :not() chains and repeated classes were replaced by a single class. Tooltip triggers are most of the heavy-selector drop: selectors at three or more classes in the tooltip partial go from 764 to 172.

The rows below are the cuts inside that net. Step sizes are not additive.

Cut What changed
Unused Plex @font-face weights Weights this library never set (100, 200, 450, 500, 700) are removed. 130 of 208 rules. About 54 KB off each theme file, about 323 KB unpacked across the six. Kept weights: 300, 400, 600
Differing theme tokens only Non-default themes stopped restating all 455 tokens. At that step, all.css 786.1 kB → 716.3 kB (−8.9%)
Static var() fallbacks 2,880 unreachable fallbacks dropped. At that step, 716.3 kB → 697.2 kB (−2.7%), gzip 73.8 kB → 71.7 kB
Shared tooltip rules Tooltip slice 110.0 kB → 66.2 kB. Direction and alignment set custom properties; one rule per trigger consumes them. At that step, all.css 830.1 kB → 786.1 kB (−5.3%)
Logical insets and doubled :not() lists lightningcss no longer expands these into RTL and :-webkit-any twins. At that step, 880.7 kB → 833.7 kB (−5.3%)
.woff sources 32 woff URLs dropped. Browsers in the Svelte 5 baseline load the woff2 source
will-change that cannot composite 200 skeletons held 202 compositor layers; they now hold 5
Dead selectors Password visibility, side-nav header, button aliases, bx--table-toolbar--sm, and other classes no component renders
Fluid :not() chains Date picker, list box, number input, and sized tabs use one class. Cascade check reported zero flips
High-contrast outline One --cds-focus-outline-style on :root replaces 95 per-component prefers-contrast blocks
Declarations that never win 255 cascade-losing declarations removed

Faster updates

These are production-mode measurements from the commits, not the CSS bundle.

Work Measured
DataTable equal rows 64,100 comparator calls → 0; 693–794 ms → 3–14 ms over 50 updates
DataTable equal headers 903 ms–7.4 s → 3–5 ms over 50 updates
MultiSelect equal selectedIds about 15× on 90 items (9.1–16.8 ms → 0.5–0.8 ms)
TreeView equal nodes, 220 nodes 68.6 ms → 0.64 ms per update (about 107×)
TreeView equal nodes, about 11,000 nodes 6,192 ms → 4.0 ms per update (about 1,544×)
Dropdown open, 99 options 100 forced layouts → 1
Header search menu item style recalc about 850 µs → 360 µs
FullPageError illustrations 120 kB → 73 kB after svgo. Renders match aside from anti-aliasing

New components: layout, pages, metrics, and lists

Twelve surfaces land in this release for page chrome, measurement, overflow, and long lists. ToolbarColumnVisibility and ToolbarDensity are covered with DataTable below. GridOverlay is a dev aid.

Bleed

Pull content past a padded container with negative margin, for a full-width banner or divider inside a Box. Step N is the negative of Box padding step N. Set horizontal, vertical, or a single side.

See Bleed.

<script>
  import { Bleed, Box, Text } from "carbon-components-svelte";
</script>

<Box fill="layer-01" padding={5} border="subtle">
  <Bleed horizontal={5}>
    <Box fill="inverse" padding={5}>
      <Text type="body-short-01" color="inverse">Edge to edge</Text>
    </Box>
  </Bleed>
</Box>
bleed

Carousel

Show one slide at a time. Wrap each slide in CarouselItem. Previous and next disable on the first and last slide unless wrap is set; with wrap, set showCounter so the position stays visible. Left and Right move between slides when focus is inside the carousel.

See Carousel.

<script>
  import { Carousel, CarouselItem } from "carbon-components-svelte";
</script>

<Carousel labelText="What's new in 0.113">
  <CarouselItem>
    <h4>Page headers</h4>
    <p>Title, breadcrumb, tabs, and actions in one header.</p>
  </CarouselItem>
  <CarouselItem>
    <h4>Grouped multi-select</h4>
    <p>Options sit under a non-selectable group label.</p>
  </CarouselItem>
</Carousel>
carousel

DescriptionList

Term and detail pairs as a native dl. Set term on DescriptionListItem and slot the detail. layout="horizontal" places the term beside the detail. columns arranges items in an equal-width grid.

See DescriptionList.

<script>
  import { DescriptionList, DescriptionListItem } from "carbon-components-svelte";
</script>

<DescriptionList>
  <DescriptionListItem term="Name">postgres-prod-01</DescriptionListItem>
  <DescriptionListItem term="Engine">PostgreSQL 16.2</DescriptionListItem>
  <DescriptionListItem term="Region">us-east-1</DescriptionListItem>
</DescriptionList>
description-list

Divider

A horizontal rule between stacked sections, or a vertical rule in a row. Set decorative when the rule is visual only so assistive tech skips it.

See Divider.

<script>
  import { Divider, Stack, Text } from "carbon-components-svelte";
</script>

<Stack gap={5}>
  <Text>Section one</Text>
  <Divider />
  <Text>Section two</Text>
</Stack>
divider

Meter

Usage against a fixed capacity. This is a meter, so nothing is in progress and nothing finishes. Set thresholds to switch the bar to warning and error colors. valueText is the visible value and aria-valuetext.

See Meter.

<script>
  import { Meter } from "carbon-components-svelte";
</script>

<Meter
  labelText="Storage"
  value={820}
  max={1000}
  thresholds={{ warning: 800, error: 950 }}
  helperText="Approaching capacity"
/>
meter

PageHeader

Identify the page with a title and subtitle. Slot a Breadcrumb, tabs, and page actions. The title level follows the nearest Section and is an h1 by default. The actions slot lines controls up with the title and wraps them under it on a narrow screen.

See PageHeader.

<script>
  import { Breadcrumb, BreadcrumbItem, Button, PageHeader } from "carbon-components-svelte";
  import Add from "carbon-icons-svelte/lib/Add.svelte";
</script>

<PageHeader title="Databases" subtitle="Manage your database instances">
  <svelte:fragment slot="breadcrumb">
    <Breadcrumb noTrailingSlash>
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/" isCurrentPage>Databases</BreadcrumbItem>
    </Breadcrumb>
  </svelte:fragment>
  <svelte:fragment slot="actions">
    <Button icon={Add}>Create database</Button>
  </svelte:fragment>
</PageHeader>
page-header

RelativeTime

Format a date as a relative string, such as "5 minutes ago", with the absolute time on hover. Omit now to compare against the live clock. numeric and style follow Intl.RelativeTimeFormat.

See RelativeTime.

<script>
  import { RelativeTime } from "carbon-components-svelte";
</script>

<RelativeTime date={Date.now() - 5 * 60 * 1000} />
relative-time

ToggleButtonGroup

Pressable buttons for immediate on/off commands, such as text formatting. The default selection mode allows any number pressed. Set selectionMode="single" for at most one. Arrow keys move focus. Space or Enter presses the focused button.

See ToggleButtonGroup.

<script>
  import { ToggleButton, ToggleButtonGroup } from "carbon-components-svelte";
</script>

<ToggleButtonGroup labelText="Text formatting">
  <ToggleButton value="bold">Bold</ToggleButton>
  <ToggleButton value="italic">Italic</ToggleButton>
  <ToggleButton value="underline">Underline</ToggleButton>
</ToggleButtonGroup>
toggle-button-group

VirtualList

Render only the rows in view. Set containerHeight and itemHeight in pixels, and render each row at exactly itemHeight. let:index is the item's index in the full array. Set measured when row heights vary. scrollend fires near the bottom for load-more.

See VirtualList.

<script>
  import { Box, VirtualList } from "carbon-components-svelte";

  const items = Array.from({ length: 5000 }, (_, i) => ({
    id: i,
    name: `web-prod-${String(i + 1).padStart(4, "0")}`,
  }));
</script>

<VirtualList {items} itemHeight={40} containerHeight={240} let:item let:index>
  <Box
    display="flex"
    align="center"
    height="40px"
    paddingX={5}
    border="subtle"
    borderSide="bottom"
  >
    {index + 1}. {item.name}
  </Box>
</VirtualList>
virtual-list

GridOverlay

Draw the breakpoint grid over the page while checking layout. The overlay is 16 columns, pointer-events: none, and lines up with sm / md / lg / xlg / max. You own open. Match condensed, narrow, fullWidth, and gutters to the Grid underneath, and leave it unwired in production.

See GridOverlay.

<script>
  import { Button, Column, Grid, GridOverlay, Row, Tile } from "carbon-components-svelte";

  let open = true;
</script>

<Button on:click={() => (open = !open)}>
  {open ? "Hide" : "Show"} grid overlay
</Button>

<Grid padding>
  <Row>
    <Column sm={4} md={8} lg={16}><Tile>Header</Tile></Column>
  </Row>
  <Row>
    <Column sm={4} md={5} lg={11}><Tile>Content</Tile></Column>
    <Column sm={4} md={3} lg={5}><Tile>Sidebar</Tile></Column>
  </Row>
</Grid>

<GridOverlay {open} />
grid-overlay

DatePicker: multiple days, a week, and an inline calendar

datePickerType now includes "multiple" and "week", alongside single, range, month, and year.

"multiple" toggles individual days. Shift-click adds the span back to the last clicked day and skips disabled dates. value is the dates joined with ", ". "week" selects the first day of the focused week for the locale. Pair it with a displayFormat that uses the W token, such as "\\W\\e\\e\\k W, Y", to show the week number while value stays on dateFormat.

Set inline to keep the calendar open under the field. Set clearable for a clear button in place of the calendar icon while the field has a value. Bind open and selectedDates. disabledDates and enabledDates constrain which days can be picked. minRangeDays and maxRangeDays limit a range. initialMonth chooses the month shown before a selection. displayFormat shows a friendly string in the input while the submitted value stays on dateFormat.

See calendar types, clearable, and display format.

<script>
  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>

<DatePicker datePickerType="multiple">
  <DatePickerInput labelText="Maintenance days" placeholder="mm/dd/yyyy" />
</DatePicker>
date-picker

Box: flex, grid, and spacing in one container

Box is the layout primitive for fill, border, shadow, spacing, and position. display="flex" or "grid" lays out children without an extra wrapper. gap uses the same 1–13 scale as Stack. direction, align, justify, wrap, grow, and alignSelf cover flex. columns sets grid tracks. hideBelow and hideAbove show or hide the box from a breakpoint in CSS, on first paint.

See Box.

<script>
  import { Box, Text } from "carbon-components-svelte";
</script>

<Box display="flex" direction="column" gap={3} fill="layer-01" padding={5} border="subtle">
  <Text type="productive-heading-02">Backups</Text>
  <Text type="body-short-01" color="secondary">Last snapshot completed 12 minutes ago.</Text>
</Box>
box

DataTable: column visibility and row density

ToolbarColumnVisibility toggles columnHidden on a bound headers array and keeps the menu open. The last visible column stays disabled so the table never loses every column. toggleableKeys limits which columns appear in the menu.

Persist { order, hidden } from toColumnSettings, then applyColumnSettings onto the original headers. Header display and sort functions stay intact because they never go through storage.

ToolbarDensity binds size for the row height, and the toolbar height follows. Toolbar sticky pins the toolbar while the page scrolls. stickyOffset is the stuck distance from the top; next to a UI Shell header it defaults to 48px. Virtualized tables dispatch scrollend for load-more.

See column visibility and density.

<script>
  import {
    DataTable,
    Toolbar,
    ToolbarColumnVisibility,
    ToolbarContent,
    ToolbarDensity,
  } from "carbon-components-svelte";

  let size = "medium";
  let headers = [
    { key: "name", value: "Name" },
    { key: "protocol", value: "Protocol" },
    { key: "port", value: "Port" },
    { key: "rule", value: "Rule" },
  ];

  const rows = [
    { id: "a", name: "Load Balancer 3", protocol: "HTTP", port: 3000, rule: "Round robin" },
    { id: "b", name: "Load Balancer 1", protocol: "HTTP", port: 443, rule: "Round robin" },
    { id: "c", name: "Load Balancer 2", protocol: "HTTP", port: 80, rule: "DNS delegation" },
  ];
</script>

<DataTable title="Load balancers" {size} {headers} {rows}>
  <Toolbar>
    <ToolbarContent>
      <ToolbarColumnVisibility
        bind:headers
        toggleableKeys={["protocol", "port", "rule"]}
      />
      <ToolbarDensity bind:size intrinsicAlign="end" />
    </ToolbarContent>
  </Toolbar>
</DataTable>
data-table

MultiSelect: groups, ranges, and select all

Set group on an item to list it under a non-selectable header. Groups follow first-seen order. Items without a group are listed first. The selection is still a flat list of ids. Grouped menus virtualize the same way ungrouped ones do.

Shift+Enter or Shift+Space selects the range from the anchor to the highlighted option. Ctrl+A (Cmd+A on macOS) selects all. sortItem={false} keeps items order. Typing moves the highlight to the next match.

See groups.

<script>
  import { MultiSelect } from "carbon-components-svelte";
</script>

<MultiSelect
  labelText="Regions"
  label="Select regions..."
  items={[
    { id: "0", text: "Frankfurt", group: "Europe" },
    { id: "1", text: "Toronto", group: "Americas" },
    { id: "2", text: "London", group: "Europe" },
    { id: "3", text: "São Paulo", group: "Americas" },
    { id: "4", text: "Mumbai", group: "Asia Pacific" },
    { id: "5", text: "Tokyo", group: "Asia Pacific" },
  ]}
/>
multi-select

BigNumber: deltas and formatted values

delta renders a signed change under the value. Color follows trend when set. trend="flat" uses a neutral dash. formatOptions merges into the Intl.NumberFormat options. format replaces that with your own function. Large values abbreviate by default, and hovering an abbreviated value shows the full number. The default slot is a footer under the metric.

See delta and formatting.

<script>
  import { BigNumber } from "carbon-components-svelte";
</script>

<BigNumber
  labelText="Uptime"
  value={99.8}
  percentage
  trend="up"
  delta={0.2}
  deltaPercentage
  deltaLabel="vs last week"
/>
<BigNumber
  labelText="Revenue"
  value={128000}
  delta={12000}
  formatOptions={{ style: "currency", currency: "USD" }}
/>
big-number

More in this release

  • Button loading and fullWidth. ComboButton loading covers the primary action. Modal can show a loading state on the secondary button.
  • selectTextOnFocus on text, password, number, search, date, time, slider, and toolbar search fields.
  • Search debounce and loading. SearchMenu debounce, searchLoading, and a loading row when results are already shown. scrollend for load-more.
  • SideNav resizable (minWidth 200, maxWidth 480), border, a badge slot on SideNavLink and SideNavMenu, and nested menus indented by depth. A rail side nav expands on keyboard focus.
  • ContentSwitcher SwitchPanel pairs a panel with each switch in the content slot. lazy and unmountOnHide control when the panel mounts.
  • Slider and RangeSlider orientation="vertical". Slider snapToMarks. RangeSlider minGap.
  • TextArea grow expands the field with its content.
  • Form reset writes the submitted defaults back into bound checkbox, combo box, date, number, password, PIN, radio, search, select, slider, text, time, toggle, and tile values.
  • Dark themes set color-scheme: dark on the page.

What's Changed

Features

Bug Fixes

  • fix(accordion-item): close a disabled item by @metonym in 70545b4
  • fix(accordion-item): forward focus and blur from the heading button by @metonym in 672c1d2
  • fix(accordion-item): name the open panel as a region by @metonym in f781ee5
  • fix(accordion): keep a single open panel when type is single by @metonym in b62a592
  • fix(badge-indicator): stop mixing logical and physical offsets by @metonym in 5993a2e
  • fix(big-number): announce trend and fraction to assistive tech by @metonym in 89abc57
  • fix(big-number): show denominator when value exceeds total by @metonym in a946694
  • fix(box): forward click and hover events to the rendered element by @metonym in d45530a
  • fix(box): let axis spacing override a custom all-sides value by @metonym in 6bb5ca6
  • fix(box): resolve 0 to an inline style instead of dropping it by @metonym in d999868
  • fix(button-set): let buttons shrink inside narrow containers by @metonym in 1f9248f
  • fix(checkbox-group): describe read-only state for screen readers by @metonym in 9e2b118
  • fix(checkbox): describe read-only state for screen readers by @metonym in 573dadf
  • fix(checkbox): submit "on" when no value is set by @metonym in 18a2f3a
  • fix(checkbox): sync checked after the form resets by @metonym in 977ce9d
  • fix(checkbox): take the new state from the input on change by @metonym in 33ada13
  • fix(code-snippet): don't copy "undefined" from a slot-only inline snippet by @metonym in 95039f0
  • fix(code-snippet): expose inline snippet code to assistive tech by @metonym in 115c52c
  • fix(code-snippet): fade scroll edges only where content continues by @metonym in 3325812
  • fix(code-snippet): keep a rest aria-label off the root element by @metonym in d4de629
  • fix(combo-box): filter typeahead matches by the displayed label by @metonym in 58a3aed
  • fix(combo-box): match typed text against the displayed label by @metonym in 79ef55b
  • fix(combo-box): resync selectedId and value after the form resets by @metonym in 3fffee8
  • fix(combo-box): skip selectTextOnFocus when disabled by @metonym in 2ad76a1
  • fix(combo-box): stop announcing read-only as disabled by @metonym in 350bbf5
  • fix(composed-modal): keep a rest aria-label off the presentation root by @metonym in b0b8284
  • fix(composed-modal): move focus in when the modal opens by @metonym in beef888
  • fix(composed-modal): remove dead buttonRef/declareRef wiring by @metonym in db2a6f6
  • fix(composed-modal): set tabindex=-1 on the dialog by @metonym in 6cec0ed
  • fix(contained-list): remove the native underline on link items by @metonym in e1f85b8
  • fix(content-switcher): clamp an out-of-range selectedIndex by @metonym in 6a17e5f
  • fix(content-switcher): don't dispatch change when a selected Switch mounts by @metonym in 4e59692
  • fix(content-switcher): keep a tab stop when the selected switch is disabled by @metonym in a03d66d
  • fix(content-switcher): keep selectedIndex on the selected switch after a removal by @metonym in 213f69f
  • fix(content-switcher): select a switch when its selected prop turns true by @metonym in 171486a
  • fix(context-menu): block ArrowLeft, ArrowRight, PageUp, and PageDown by @metonym in 9b15288
  • fix(context-menu): close on Tab instead of swallowing it by @metonym in fecfd3f
  • fix(context-menu): remove dead menuOffsetX tracking by @metonym in dab8aeb
  • fix(context-menu): return focus when the menu closes by @metonym in 140371e
  • fix(context-menu): skip disabled options with the arrow keys by @metonym in 71b78fb
  • fix(copy-input): default tooltip alignment to end by @metonym in 39f7026
  • fix(css): color plain links with the link token by @metonym in dcf1427
  • fix(css): guard hand-authored hover rules with any-hover by @metonym in 655f665
  • fix(css): guard selectable tag hover rules with any-hover by @metonym in 54fb649
  • fix(css): guard Tabs hover rules against touch devices by @metonym in 89b8a03
  • fix(css): make focus rings appear instantly, not fade in by @metonym in 7e358a1
  • fix(css): remove content switcher selected-fill wipe animation by @metonym in f34366d
  • fix(css): stop content switcher label shifting on select by @metonym in 76506a8
  • fix(data-table-skeleton): contain table in scrollable wrapper by @metonym in d2ff1d0
  • fix(data-table): align footer cells with their column by @metonym in 685f9eb
  • fix(data-table): derive batch expansion state from the expandable rows by @metonym in f7378a9
  • fix(data-table): do not force fixed table layout when a header sets width by @metonym in 85e4334
  • fix(data-table): inset nested content in expanded rows by @metonym in d85129a
  • fix(data-table): keep table layout for sticky headers by @metonym in 5a8faab
  • fix(data-table): keep the hidden batch actions bar from widening the page by @metonym in 710b76e
  • fix(data-table): keep the selection header cell for radio batch tables by @metonym in 0cecb2f
  • fix(data-table): scope select all to the rows matching the filter by @metonym in fdad53e
  • fix(data-table): size the virtual window from stickyHeaderMaxHeight by @metonym in 25af189
  • fix(data-table): skip hidden columns in the footer row by @metonym in ce1eca1
  • fix(data-table): skip hidden columns in toCsv by @metonym in f8aee5c
  • fix(data-table): skip hidden rows in shift-click range selection by @metonym in d410c99
  • fix(data-table): target the scrolling table, not its wrapper, for virtualized sticky headers by @metonym in 394ea5f
  • fix(date-picker): block an inline calendar while read-only or disabled by @metonym in d77decd
  • fix(date-picker): create the flatpickr instance only once by @metonym in b7cf76e
  • fix(date-picker): declare the open event by @metonym in d8314fb
  • fix(date-picker): disable calendar open/close animation by default by @metonym in 61137e2
  • fix(date-picker): dispatch change once per calendar selection by @metonym in fa68ac1
  • fix(date-picker): honor flatpickr ignoredFocusElements by @metonym in ad0bbc1
  • fix(date-picker): honor flatpickr shorthandCurrentMonth by @metonym in 17da936
  • fix(date-picker): ignore ArrowDown when there is no calendar by @metonym in 01ab552
  • fix(date-picker): ignore unsupported wrap flatpickr option by @metonym in 624ddc0
  • fix(date-picker): keep consumer allowInput and clickOpens by @metonym in 9f405e5
  • fix(date-picker): keep focus in the calendar after selecting a day with Enter by @metonym in 1a924a6
  • fix(date-picker): keep selection with a custom formatDate by @metonym in 326b87c
  • fix(date-picker): label the visible flatpickr altInput by @metonym in 5f2d0e7
  • fix(date-picker): lay out flatpickr weekNumbers column by @metonym in cacd93e
  • fix(date-picker): lay out multiple months side by side by @metonym in 6ff765b
  • fix(date-picker): let simple-variant labels overflow past the input by @metonym in 08be3b6
  • fix(date-picker): list multiple among the types that bind calendar by @metonym in 94f9120
  • fix(date-picker): mark out-of-range years as aria-disabled by @metonym in 2366a23
  • fix(date-picker): merge consumer flatpickr hooks with Carbon's by @metonym in b338dad
  • fix(date-picker): mirror input state onto flatpickr altInput by @metonym in 4d82e21
  • fix(date-picker): move focus into the calendar when today is not focusable by @metonym in c6c209a
  • fix(date-picker): omit mode and wrap from flatpickrProps type by @metonym in 7d64925
  • fix(date-picker): prevent page scroll on ArrowDown into calendar by @metonym in 9f985dd
  • fix(date-picker): rebuild the calendar when datePickerType changes by @metonym in f49e562
  • fix(date-picker): reopen calendar on ArrowDown after Escape closed it by @metonym in 9db2f11
  • fix(date-picker): report escape-key when Escape closes the calendar grid by @metonym in f58fd9b
  • fix(date-picker): respect flatpickrProps.defaultDate by @metonym in 2988dd8
  • fix(date-picker): stop calendar shadow and overlap from hiding range borders by @metonym in 42c5105
  • fix(date-picker): stop flatpickr day focus outline from animating by @metonym in 8cab44f
  • fix(date-picker): stop flatpickr day focus ring flashing on click by @metonym in 77f340b
  • fix(date-picker): style out-of-range months as disabled by @metonym in b3d5656
  • fix(date-picker): style the flatpickr inline calendar by @metonym in abd6a9d
  • fix(date-picker): sync the bound value after the form resets by @metonym in ad212ec
  • fix(date-picker): sync the hidden displayFormat field after the form resets by @metonym in 8a9be86
  • fix(date-picker): tear down an inline calendar safely by @metonym in 6456dba
  • fix(date-picker): treat a failed flatpickr init as no calendar by @metonym in 0c9fee8
  • fix(disclosure): dispatch toggle with an { open } object by @metonym in 27952fc
  • fix(dropdown): dispatch close when Tab dismisses the menu by @metonym in d355f19
  • fix(dropdown): don't dispatch select when re-clicking the selected item by @metonym in 32b88fd
  • fix(dropdown): drop aria-disabled and describe readonly for VoiceOver by @metonym in 52c1037
  • fix(dropdown): keep inline menu width when portaled by @metonym in 6824d41
  • fix(dropdown): let Home and End win over the selection when opening by @metonym in 2429d71
  • fix(dropdown): name the combobox with aria-label by @metonym in 0a81cc4
  • fix(dropdown): omit a disabled dropdown from form submission by @metonym in d6900e2
  • fix(file-uploader-button): keep the native input's files after a dismissed picker by @metonym in 3fd0262
  • fix(file-uploader-drop-container): keep the native input's files after a dismissed picker by @metonym in 49d5bbf
  • fix(file-uploader-drop-container): keep the native input's files equal to files by @metonym in 9b6f8e7
  • fix(file-uploader): keep the drop highlight while the pointer is inside by @metonym in f4be37c
  • fix(form-group): style the message and invalid state by @metonym in e39a076
  • fix(grid): mark Column's per-breakpoint offset optional by @metonym in 226f73d
  • fix(grid): remove Column's stale, contradicting second @slot doc block by @metonym in a01e2da
  • fix(grid): widen Column's aspectRatio type to the ratios the CSS ships by @metonym in 9d5719a
  • fix(header-switcher): restore the focus ring color on the trigger by @metonym in 0420411
  • fix(inline-loading): map status to live region roles by @metonym in e2e5536
  • fix(inline-loading): use 14px text to match v11 by @metonym in 44db65e
  • fix(interstitial-screen): render on the server by @metonym in fda7ce5
  • fix(list-box): drop aria-label from the role-less wrapper by @metonym in 2ad02ff
  • fix(list-box): keep portaled menu static when a style is passed by @metonym in 785839f
  • fix(menu): compile Menu for server rendering by @metonym in ae4e5f5
  • fix(menu): skip the open focus task during server rendering by @metonym in 7c5ee12
  • fix(meter): announce warning and error when the status changes by @metonym in 0388df7
  • fix(meter): clamp aria-valuenow to zero by @metonym in 4fc56d2
  • fix(meter): describe over-capacity and warning or error status by @metonym in 8c56963
  • fix(meter): describe warning and error thresholds by @metonym in 9046fa2
  • fix(meter): render an empty bar for a non-finite value by @metonym in ae40139
  • fix(modal): don't submit on Enter from a link or tab by @metonym in 1c32a8a
  • fix(modal): don't submit on the Enter that commits an IME composition by @metonym in a67e1b5
  • fix(modal): keep a rest aria-label off the presentation root by @metonym in fb12ba8
  • fix(modal): render an open modal on the server by @metonym in 2713d1d
  • fix(multi-select): describe the default filterItem accurately by @metonym in a2e3d32
  • fix(multi-select): dispatch close when Tab dismisses the menu by @metonym in aa71e2b
  • fix(multi-select): don't dispatch select for programmatic selectedIds by @metonym in 13221c3
  • fix(multi-select): ignore keys on a disabled field by @metonym in 7a48a9e
  • fix(multi-select): omit a disabled multi-select from form submission by @metonym in 3586d9c
  • fix(multi-select): open the menu on Enter by @metonym in 1986ccf
  • fix(multi-select): show external selectedIds in fixed and open menus by @metonym in 17defaf
  • fix(multi-select): submit item ids under a shared name by @metonym in 7c06bd0
  • fix(multi-select): type the clear event detail as the DOM event by @metonym in 16621a3
  • fix(notification): document the queue fields the toast already accepts by @metonym in 7bc0ba9
  • fix(notification): pause auto-dismiss while the tab is hidden by @metonym in bf29a12
  • fix(notification): pause the timeout while focus is inside by @metonym in 7396598
  • fix(number-input): don't block form submission for decimal or formatted values by @metonym in 09b3af1
  • fix(number-input): submit the numeric value in locale and decimal modes by @metonym in ba18784
  • fix(number-input): sync the value after the form resets by @metonym in 6aca7ef
  • fix(number-input): use aria-errormessage for invalid state by @metonym in 215ed74
  • fix(number-input): use sans 400 type to match v11 by @metonym in b44839b
  • fix(overflow-menu): size a custom menu slot trigger to its content by @metonym in 30b78d7
  • fix(package): stop publishing sveld's parse cache by @metonym in 92f634f
  • fix(pagination): keep the same items visible when the page size changes by @metonym in 0e0fce4
  • fix(pagination): show "0 items" when nothing is in the list by @metonym in da09c2e
  • fix(password-input): add readonly wrapper class and EditOff icon by @metonym in 2f56ddd
  • fix(password-input): prevent the hidden tooltip from causing horizontal overflow by @metonym in ae5b6c0
  • fix(password-input): sync the bound value after the form resets by @metonym in 2383e39
  • fix(pin-code-input): announce alphanumeric segments as characters by @metonym in 05faa3d
  • fix(pin-code-input): keep required on the segments when name is set by @metonym in b0bc4b5
  • fix(pin-code-input): replace a filled segment's character when typing by @metonym in d155513
  • fix(pin-code-input): skip change when Delete hits an empty segment by @metonym in 123bcae
  • fix(pin-code-input): skip the legend tab stop when hidden or disabled by @metonym in 6d9d7cf
  • fix(pin-code-input): sync the code after the form resets by @metonym in 052c65c
  • fix(pin-code-input): use aria-errormessage for invalid state by @metonym in c8ac884
  • fix(pin-code-input): use sans for fields by @metonym in 81a3eff
  • fix(popover): offset right-top through --cds-popover-offset by @metonym in a0ef003
  • fix(portal): render an open FloatingPortal on the server by @metonym in b49437a
  • fix(progress-bar): announce error and complete when the status changes by @metonym in 5f3e161
  • fix(progress-bar): avoid scaleX(NaN) when max is 0 by @metonym in 6b402f3
  • fix(progress-bar): report the real value when status is error by @metonym in d1d51e7
  • fix(progress-step): mark incomplete steps unclickable by @metonym in 407b8b6
  • fix(radio-button-group): describe read-only state for screen readers by @metonym in ffd29c7
  • fix(radio-button-group): expose orientation on the radiogroup by @metonym in da51586
  • fix(radio-button-group): follow the checked radio after the form resets by @metonym in 4f41a7e
  • fix(radio-button-group): keep the buttons' own name when the group has none by @metonym in e1157fe
  • fix(radio-button-group): set aria-readonly on the radiogroup when read-only by @metonym in a2d58bf
  • fix(radio-button-group): share a generated name when name is omitted by @metonym in 9c41492
  • fix(radio-button): apply aria-label to the input by @metonym in 60bb40b
  • fix(radio-button): sync a standalone button after the form resets by @metonym in bb9242e
  • fix(range-slider): dispatch focus and blur with handle by @metonym in 8747183
  • fix(range-slider): hide invalid and warn states when disabled or readonly by @metonym in 7c10744
  • fix(range-slider): keep a grabbed handle under the pointer by @metonym in 3c90af1
  • fix(range-slider): keep both bounds when the form resets by @metonym in 44415a2
  • fix(relative-time): resync shared tick timer on visibilitychange by @metonym in 6ef59b6
  • fix(scripts): make release-changelog idempotent on unstaged reruns (#3823) by @metonym in 1546a67
  • fix(search-menu): clear hover highlight when mouse leaves item by @metonym in 016316d
  • fix(search-menu): scroll the highlighted item within the menu by @metonym in 9f4ee2a
  • fix(search-menu): tighten group header bottom padding by @metonym in 3c92bfe
  • fix(search): collapse the expandable field on a second Escape by @metonym in 8e9c4e9
  • fix(search): open the expandable field from the keyboard by @metonym in 444224d
  • fix(search): resync value after the form resets by @metonym in 01c2b28
  • fix(select): block typeahead on a read-only select by @metonym in 4ec0ffc
  • fix(select): compile SelectItem for server rendering by @metonym in baf041f
  • fix(select): keep the selection when the form resets by @metonym in bc650c3
  • fix(slider): announce read-only state to screen readers by @metonym in fe16429
  • fix(slider): forward focus and blur events from the number input by @metonym in 947b230
  • fix(slider): keep the value when the form resets by @metonym in 298bdf9
  • fix(slider): show numeric min/max as range labels by default (#3909) by @metonym in a3308d4
  • fix(slider): use sans for range labels to match v11 by @metonym in 350e009
  • fix(stack): describe wrap for vertical stacks too by @metonym in 497cde7
  • fix(structured-list): apply selected when the parent changes it (#3978) by @metonym in a2a2f07
  • fix(structured-list): drop aria-sort when the cell is not a column header (#3979) by @metonym in 212a791
  • fix(structured-list): group single-select rows under one name by @metonym in da126ea
  • fix(structured-list): react to multiple, selection, and icon (#3986) by @metonym in 0198a85
  • fix(table-container): render the description without a title by @metonym in 8069ee0
  • fix(tabs-vertical): drop solid background from mobile nav row (#3907) by @metonym in aebd013
  • fix(tabs-vertical): fix narrow column, truncation, and hover border (#3914) by @metonym in f907cb4
  • fix(tabs-vertical): move arrow-key focus from the focused tab by @metonym in fcb5948
  • fix(tabs-vertical): reset vertical xl root height below md breakpoint (#3904) by @metonym in 05d9d3b
  • fix(tabs): keep focus in the tab list after a dismiss by @metonym in b42892e
  • fix(tabs): keep tab registration current when props change by @metonym in b736b75
  • fix(tabs): make the tab list a single Tab-key stop by @metonym in 4f8d946
  • fix(tabs): move arrow-key focus from the focused tab by @metonym in 73ae75a
  • fix(tabs): reserve bold width so selecting a tab doesn't reflow siblings (#3903) by @metonym in 14c3fe1
  • fix(tabs): stack icon + secondary label below md breakpoint by @metonym in d5da2e9
  • fix(tag): expose the full label via title when truncated by @metonym in d4b2c96
  • fix(test): avoid any in the DataTable equal-headers sort spy by @metonym in 0c7ec89
  • fix(text-area): describe the character counter in words by @metonym in 5d91925
  • fix(text-area): honor hideLabel in fluid mode by @metonym in 814061f
  • fix(text-area): keep fluid focus ring and wrapper height stable by @metonym in fd7f713
  • fix(text-area): limit maxCount by grapheme instead of maxlength by @metonym in 0f56403
  • fix(text-area): mark the counter when the value is already over maxCount by @metonym in 9489af3
  • fix(text-area): show the character counter without a label by @metonym in cd21490
  • fix(text-area): sync the bound value after the form resets by @metonym in a41e906
  • fix(text-input): sync the bound value after the form resets by @metonym in 7842858
  • fix(tile-group): follow the checked tile after the form resets by @metonym in 9341826
  • fix(tile-group): share a generated name when name is omitted by @metonym in 9f1714c
  • fix(time-picker): keep a read-only select closed on Alt+Down by @metonym in 373e113
  • fix(time-picker): keep numeric select values numeric by @metonym in 42ce171
  • fix(time-picker): let shortcuts through on a read-only select by @metonym in e136b79
  • fix(time-picker): make the selects read-only with the time picker by @metonym in a0ea973
  • fix(time-picker): scope fluid rules that leaked to every TimePicker by @metonym in bb5229f
  • fix(time-picker): select the first item when a select has no value by @metonym in 0e8cb71
  • fix(time-picker): sync the text input after the form resets by @metonym in b336eea
  • fix(time-picker): use aria-errormessage for invalid state by @metonym in 750b667
  • fix(toggle-button): don't throw on focus without a group by @metonym in aa8e9d5
  • fix(toggle): drop aria-disabled and describe readonly for VoiceOver by @metonym in e2f475b
  • fix(toggle): sync toggled after the form resets by @metonym in dd8dadc
  • fix(toggle): take the new state from the input on change by @metonym in b47104d
  • fix(toolbar-column-visibility): match menu bridge to trigger width by @metonym in f997e2b
  • fix(toolbar-density): keep the toolbar action class with a custom class by @metonym in e6e3fe6
  • fix(tooltip): theme the portalled definition tooltip shadow by @metonym in 3dec376
  • fix(tooltip): use body-short-01 for portal tooltip content by @metonym in f2ab60a
  • fix(tree-view): follow a link node's href on Enter by @metonym in 9e6fad0
  • fix(tree-view): keep a single tab stop when nodes is reassigned (#3906) by @metonym in e5fa260
  • fix(tree-view): let Ctrl+click deselect a row that is not active by @metonym in 7532739
  • fix(tree-view): omit aria-selected on virtualized link nodes by @metonym in 18a1b06
  • fix(tree-view): only select all on Ctrl+A in multiselect mode by @metonym in b513dce
  • fix(tree-view): render a multiselect tree on the server by @metonym in 00ecf4c
  • fix(tree-view): select node ids on Ctrl+Shift+Home and End by @metonym in b6a0d86
  • fix(tree-view): set node label type to match v11 by @metonym in 017bb48
  • fix(truncate): add tag prop to avoid nested paragraphs by @metonym in 25636b2
  • fix(ui-shell): expand rail SideNav on keyboard focus, not just hover by @metonym in ce615f7
  • fix(ui-shell): mark a SideNavMenu with a slotted icon as icon'd by @metonym in 231b711
  • fix(ui-shell): orient SideNav to the active item on mount by @metonym in 360b953
  • fix(ui-shell): trap focus inside the mobile SideNav overlay by @metonym in b2cb5c6
  • fix(utils): compare non-plain objects by identity in deepEqual by @metonym in d753127
  • fix(utils): listen for visibilitychange only while a timer runs (#3989) by @metonym in e63e0b5
  • fix(utils): respect wrap:false in nextEnabledIndex by @metonym in 8d71b91

Performance

  • perf(big-number): cache Intl.NumberFormat instances by @metonym in bd03971
  • perf(css): avoid logical insets and :not() lists that double rules by @metonym in 0dc5098
  • perf(css): drop :not() guards that name unrendered classes by @metonym in aae562c
  • perf(css): drop .woff sources from Plex @font-face rules by @metonym in a91a6c2
  • perf(css): drop @font-face rules for unused IBM Plex weights (#4119) by @metonym in f2ec490
  • perf(css): drop Button aliases and hooks no component renders by @metonym in 4f57184
  • perf(css): drop dead .bx--side-nav__header selector family by @metonym in 3188956
  • perf(css): drop dead password-visibility selector family by @metonym in 1cc9c02
  • perf(css): drop logical declarations that duplicate their physical twin by @metonym in 15f1488
  • perf(css): drop repeated --form-requirement class in fluid text-area by @metonym in e20e849
  • perf(css): drop repeated --neutral class on fluid list-box hover by @metonym in b8351d1
  • perf(css): drop repeated --neutral class on fluid number-input hover by @metonym in f41c185
  • perf(css): drop repeated --readonly-only class on fluid date-picker by @metonym in 35e0d65
  • perf(css): drop repeated classes on profile-menu and header-panel by @metonym in 569aa16
  • perf(css): drop static var() fallbacks from all.css by @metonym in 4eaf8b8
  • perf(css): drop the redundant .list-box__field qualifier on --clearable by @metonym in 6e65f47
  • perf(css): drop the redundant .popover qualifier on direction ::before by @metonym in 1902749
  • perf(css): emit only differing tokens for non-default themes by @metonym in ecb7f06
  • perf(css): emit shared CSS-only tooltip rules once per trigger by @metonym in 933acfc
  • perf(css): explicit transition list on header search menu item by @metonym in 33c9c16
  • perf(css): group scattered any-hover blocks per component by @metonym in 4240c90
  • perf(css): prune unrendered bx--inline-loading__checkmark rule by @metonym in 5b272cf
  • perf(css): prune unrendered bx--switcher wrapper rule by @metonym in 83fe950
  • perf(css): prune unrendered bx--table-toolbar--sm selectors by @metonym in 8cf1fdd
  • perf(css): prune unrendered bx--text-input--warn selectors by @metonym in 47d8f59
  • perf(css): prune unrendered bx--toolbar-search-container rules by @metonym in 4831d4d
  • perf(css): redesign tooltip direction/alignment CSS around custom properties by @metonym in 3ad21cc
  • perf(css): remove will-change hints that cannot composite by @metonym in 8e4fbf9
  • perf(css): remove 255 declarations that never win the cascade by @metonym in 6cac725
  • perf(css): replace fluid DatePicker neutral :not() pair with a class by @metonym in a0527cb
  • perf(css): replace fluid DatePicker readonly :not() chain with a class by @metonym in 8040a34
  • perf(css): replace fluid list-box hoverable :not() pair with a class by @metonym in c6a5a46
  • perf(css): replace fluid list-box neutral-state :not() chain with a class by @metonym in 25a85e6
  • perf(css): replace fluid NumberInput invalid/warn :not() pair with a class by @metonym in f23bd3c
  • perf(css): replace sized-Tabs :not() chains with --line/--default classes by @metonym in 3ec5bea
  • perf(css): set the high contrast focus outline style once on :root by @metonym in fdd7986
  • perf(css): stop nested-table style bleed at the source (#3839) by @metonym in 660b293
  • perf(data-table): skip re-rendering rows when rows is unchanged by @metonym in a51ea3a
  • perf(data-table): skip re-sorting when headers is unchanged by @metonym in 7eff86e
  • perf(date-picker): compare Date options by value by @metonym in 0907453
  • perf(date-picker): compare options with the shared deepEqual by @metonym in 330fe78
  • perf(date-picker): skip re-applying unchanged array options by @metonym in 0625103
  • perf(date-picker): skip redundant flatpickr updates on mount by @metonym in 4d07e7a
  • perf(date-picker): throttle and passivate top-layer reposition listeners by @metonym in f1915e3
  • perf(expandable-tile): measure padding on mount and resize, not afterUpdate by @metonym in a93a91b
  • perf(full-page-error): optimize illustration SVGs (#4114) by @metonym in 2b927c0
  • perf(multi-select): reuse unchanged options when re-sorting by @metonym in dfdea76
  • perf(multi-select): skip re-sort for new-but-equal selectedIds (~15x) (#3911) by @metonym in 296ec63
  • perf(multi-select): skip re-sorting when items is unchanged by @metonym in 059b9d5
  • perf(multi-select): sort once and partition by selection by @metonym in 5c6fbfd
  • perf(number-input): cache Intl.NumberFormat instances by @metonym in fdaff68
  • perf(overflow-menu): re-measure position only when its inputs change by @metonym in 579f0a9
  • perf(scroll-gradient): observe content size instead of subtree mutations by @metonym in 2b7a738
  • perf(tree-view): skip re-rendering when nodes is unchanged (#3905) by @metonym in 8c231c6
  • perf(tree-view): skip updating when nodes is reassigned unchanged by @metonym in 3dc2f9c
  • perf(tree-view): track roving tab stop instead of querying the tree by @metonym in a109435
  • perf(ui-shell): extract createDomNodeRegistry, batch menu-item registration by @metonym in 6df8389
  • perf(utils): batch carousel max-height measurement into write/read phases by @metonym in 0209961
  • perf(utils): defer overflowTitle measurement to a microtask by @metonym in 3a34cd5
  • perf(utils): use checkVisibility in trapFocus before computed styles by @metonym in 58251e7

Don't miss a new carbon-components-svelte release

NewReleases is sending notifications on new releases.