Download Latest Version v0.113.1 source code.zip (4.2 MB) Google Add to Preferred Sources
Home / v0.113.0
Name Modified Size InfoDownloads / Week
Parent folder
README.md 2026-10-02 116.5 kB
0
v0.113.0 source code.tar.gz 2026-10-02 2.3 MB
0
v0.113.0 source code.zip 2026-10-02 4.2 MB
0
Totals: 3 Items   6.6 MB 0

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: https://github.com/carbon-design-system/carbon-components-svelte/compare/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.

:::svelte
<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.

:::svelte
<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>

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.

:::svelte
<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>

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.

:::svelte
<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>

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.

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

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

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.

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

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

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.

:::svelte
<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>

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.

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

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

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.

:::svelte
<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>

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.

:::svelte
<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>

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.

:::svelte
<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} />

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.

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

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

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.

:::svelte
<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>

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.

:::svelte
<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>

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.

:::svelte
<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" },
  ]}
/>

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.

:::svelte
<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" }}
/>

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

Performance

Source: README.md, updated 2026-10-02