carbon-design-system/carbon-components-svelte v0.112.0

on GitHub

This release adds 6 new components (InterstitialScreen, FullPageError, BigNumber, ScrollGradient, ActionSet, HeaderSwitcher), sortable structured lists, per-column DataTable sort opt-in, tab sizes, wrapping list-box options, Dropdown / MultiSelect clear() and openOnClear, and leaner theme CSS from folding overrides into vendored Carbon. Also in this release: UI shell account switching and large side-nav items, FileUploaderButton size/duplicate parity, locale-aware DatePicker headers, and any-hover guards across interactive surfaces.

59 changes in this release:

Full Changelog: v0.111.1...v0.112.0

New components: interstitial, error, KPI, scroll, and actions

Six surfaces land in this release for onboarding, error pages, metrics, overflow hints, and composed footers.

InterstitialScreen

Walk users through onboarding or setup as a modal or full-screen takeover. Compose InterstitialScreenHeader, InterstitialScreenBody, InterstitialScreenFooter, and one or more InterstitialScreenView steps. Bind launcherButtonRef to restore focus when the screen closes.

See InterstitialScreen.

<script>
  import {
    Button,
    InterstitialScreen,
    InterstitialScreenBody,
    InterstitialScreenFooter,
    InterstitialScreenHeader,
    InterstitialScreenView,
  } from "carbon-components-svelte";

  let open = false;
  let launcherButtonRef = undefined;
</script>

<Button bind:ref={launcherButtonRef} on:click={() => (open = true)}>
  Get started
</Button>

<InterstitialScreen bind:open {launcherButtonRef}>
  <InterstitialScreenHeader
    title="Welcome to Notebooks"
    subTitle="A quick tour before you dive in."
  />
  <InterstitialScreenBody>
    <InterstitialScreenView>
      <p>Notebooks combine code, visualizations, and narrative text.</p>
    </InterstitialScreenView>
  </InterstitialScreenBody>
  <InterstitialScreenFooter />
</InterstitialScreen>

FullPageError

Full-page errors for unavailable routes or denied access. Set kind to "403" or "404" for the matching illustration, or leave the default for a generic failure. Slot actions below the description.

See FullPageError.

<script>
  import { FullPageError, Button } from "carbon-components-svelte";
</script>

<FullPageError
  kind="404"
  labelText="Error 404"
  title="Page not found"
  description="The page you're looking for doesn't exist or has been moved."
>
  <Button>Go home</Button>
</FullPageError>

BigNumber

Dashboard KPIs with optional totals, percentages, and trend indicators.

See BigNumber.

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

<BigNumber labelText="Tickets resolved" value={42} total={120} />
<BigNumber labelText="Uptime" value={99.8} percentage />

ScrollGradient

Fade edges on a scrollable region so overflow is obvious; each edge hides once that side is fully in view.

See ScrollGradient.

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

<ScrollGradient style="height: 12rem">
  {#each Array(20) as _, i}
    <p>Item {i + 1}</p>
  {/each}
</ScrollGradient>

ActionSet

Compose modal or panel footers from Button children. Actions order by kind, cascade size, and stack at small sizes or when there are more than two buttons.

See ActionSet.

<script>
  import { ActionSet, Button } from "carbon-components-svelte";
</script>

<ActionSet>
  <Button kind="secondary">Cancel</Button>
  <Button>Save</Button>
</ActionSet>

UI shell: HeaderSwitcher, avatars, and large side nav

HeaderSwitcher replaces the header logo area for account or workspace switching. Pair it with ProfileMenuList / ProfileMenuItem, optional avatar slots, and arrow-key focus through the menu. SideNavLink and SideNavMenu gain large (48px items). Omit companyName and platformName on Header to skip the name link when the switcher is the only brand element.

See account switcher and side navigation.

<script>
  import {
    Header,
    HeaderSwitcher,
    ProfileMenuItem,
    ProfileMenuList,
    UserAvatar,
  } from "carbon-components-svelte";

  let isOpen = false;
</script>

<Header companyName="IBM" platformName="Cloud">
  <HeaderSwitcher text="Acme Corp" bind:isOpen>
    <svelte:fragment slot="avatar">
      <UserAvatar name="Acme Corp" backgroundColor="auto" size="sm" />
    </svelte:fragment>
    <ProfileMenuList>
      <ProfileMenuItem>Acme Corp</ProfileMenuItem>
      <ProfileMenuItem>Globex Industries</ProfileMenuItem>
    </ProfileMenuList>
  </HeaderSwitcher>
</Header>

DataTable: opt a column into sorting

Set sort: true on individual headers when the table itself is not sortable, instead of enabling table-level sorting and disabling every other column. Toolbar sizing, sticky header scroll sync, and any-hover row/toolbar styles also land here.

See per-column opt-in.

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

<DataTable
  headers={[
    { key: "id", value: "Incident" },
    { key: "severity", value: "Severity" },
    { key: "updated", value: "Last updated", sort: true },
  ]}
  rows={[
    { id: "INC-142", severity: "Critical", updated: "2025-03-05" },
    { id: "INC-139", severity: "High", updated: "2025-03-04" },
  ]}
/>

StructuredList: sortable columns

Set sortable on header cells and listen for sort to drive active / sortDirection. Works with condensed layouts and selection.

See sorting.

<script>
  import {
    StructuredList,
    StructuredListBody,
    StructuredListCell,
    StructuredListHead,
    StructuredListRow,
  } from "carbon-components-svelte";

  let sortKey = null;
  let sortDirection = "none";
</script>

<StructuredList>
  <StructuredListHead>
    <StructuredListRow head>
      <StructuredListCell
        head
        sortable
        active={sortKey === "name"}
        {sortDirection}
        on:sort={(e) => {
          sortKey = e.detail.direction === "none" ? null : "name";
          sortDirection = e.detail.direction;
        }}
      >
        Name
      </StructuredListCell>
    </StructuredListRow>
  </StructuredListHead>
  <StructuredListBody>
    <StructuredListRow>
      <StructuredListCell>PostgreSQL</StructuredListCell>
    </StructuredListRow>
  </StructuredListBody>
</StructuredList>

Tabs: size for line and container

size controls tab height. Line tabs support "sm", "md", and "lg"; container tabs expose the fuller range including "xl". Unset size keeps the previous unsized height.

See sizes.

<script>
  import { Tabs, Tab, TabContent } from "carbon-components-svelte";
</script>

<Tabs size="sm">
  <Tab label="Tab label 1" />
  <Tab label="Tab label 2" />
  <svelte:fragment slot="content">
    <TabContent>Content 1</TabContent>
    <TabContent>Content 2</TabContent>
  </svelte:fragment>
</Tabs>

List boxes: wrapOptions, clear(), and measured virtualization

Dropdown, ComboBox, and MultiSelect accept wrapOptions so long labels reflow instead of truncating (helps WCAG 1.4.10 Reflow at narrow viewports). Virtualized menus derive offsets from measured row heights, so wrapped or uneven options stay aligned while scrolling.

Dropdown and MultiSelect also pick up ComboBox-parity clearing: call clear() to reset the selection (focuses the field by default; pass { focus: false } to skip), and set openOnClear so the clear button or Delete/Backspace reopens the menu. Clearable dropdowns also reserve field padding so a long selected label truncates before the clear button instead of running under it.

See Dropdown wrap options, open on clear, and virtualization.

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

<Dropdown
  wrapOptions
  clearable
  openOnClear
  labelText="Cloud provider"
  label="Select a provider"
  selectedId="2"
  items={[
    { id: "0", text: "Amazon Web Services" },
    { id: "1", text: "Google Cloud Platform" },
    {
      id: "2",
      text: "Microsoft Azure Government Cloud with extended regional availability",
    },
  ]}
/>

Leaner theme CSS

Override partials fold into vendored Carbon, single-tag qualifiers flatten, and UI shell / tabs theme in place:

More in this release

• DatePicker: calendar header month/year order follows the locale (for example Japanese year-first).
• FileUploaderButton: maxFileSize and duplicate rejection parity with the drop container.
• Button / ButtonSet: bindable outer ref; buttons inherit size from an ancestor ActionSet.
• any-hover: hover styles gated for DataTable, DatePicker, FileUploader, OverflowMenu, PaginationNav, Slider, StructuredList, Tag, TextInput, TreeView, and UI shell so touch devices do not stick hover.
• AccordionItem: Escape no longer desyncs controlled open state; default title hardcoding removed (same pattern on SelectableTile / StructuredListInput).
• Search: disabled expandable search no longer expands.
• FileUploader: drop container syncs the underlying input's files on drop.
• list box: clearing no longer leaves a stranded highlight class on the previous active option.

What's Changed

Features

• feat(action-set): add ActionSet component by @metonym in 2900268
• feat(big-number): add BigNumber by @metonym in b1ec073
• feat(button-set): expose bindable ref to the outer element by @metonym in 7d22fc0
• feat(button): fall back to ancestor ActionSet size by @metonym in c7145c0
• feat(data-table): allow header.sort to opt a column into sorting by @metonym in 17ebdee
• feat(date-picker): order month/year in the calendar header per locale by @metonym in 2301b1d
• feat(dropdown): add openOnClear and a programmatic clear() method by @metonym in 326e687
• feat(file-uploader-button): parity for maxFileSize and duplicate rejection (#3737) by @b-r-i-a-n-w-e-s-t in e93e794
• feat(full-page-error): add FullPageError by @metonym in 3d8769c
• feat(interstitial-screen): add InterstitialScreen by @metonym in 0506c23
• feat(list-box): add wrapOptions to Dropdown, ComboBox, and MultiSelect by @b-r-i-a-n-w-e-s-t in 3b3565e
• feat(multi-select): add openOnClear and a programmatic clear() method by @metonym in 283b702
• feat(scroll-gradient): add ScrollGradient by @metonym in 010ae57
• feat(structured-list): support sortable columns by @metonym in 268b51d
• feat(tabs): add size prop for line and container tabs by @metonym in 0b95249
• feat(ui-shell): add HeaderSwitcher for account and workspace switching by @metonym in c3fd75c
• feat(ui-shell): add avatar slot to ProfileMenuItem and truncate overflowing labels by @metonym in 506d082
• feat(ui-shell): add large prop to SideNavLink and SideNavMenu by @metonym in f75a65b
• feat(ui-shell): move focus through ProfileMenu items with arrow keys by @metonym in cd8d2ba
• feat(ui-shell): skip the name link on Header when company and platform are unset by @metonym in 757d009
• feat(virtualize): derive offsets from measured row heights by @b-r-i-a-n-w-e-s-t in ad41ea6

Bug Fixes

• fix(accordion-item): remove Escape key handler causing controlled desync (#3755) by @metonym in 83e7b65
• fix(accordion-item): remove hardcoded default title prop value by @metonym in 9a4f5ec
• fix(data-table): grow toolbar to fit lg/xl buttons instead of clipping them by @metonym in d6c505f
• fix(data-table): guard row hover styles with any-hover (#3760) by @metonym in 129b4d7
• fix(data-table): guard toolbar hover styles with any-hover (#3776) by @metonym in cb9b8ac
• fix(data-table): keep expand column width stable with custom header widths by @metonym in 44f6f4f
• fix(data-table): resize every toolbar button kind at short/compact by @metonym in 53ec7c8
• fix(data-table): sync horizontal scroll with sticky header (#3759) by @metonym in 708b79b
• fix(date-picker): drop opacity fade from calendar open animation (#3770) by @metonym in 0e91d17
• fix(date-picker): guard hover styles with any-hover by @metonym in b0cf354
• fix(dropdown): reserve field padding for the clear button by @metonym in d7a5510
• fix(file-uploader): guard hover styles with any-hover by @metonym in 6941eea
• fix(file-uploader): set drop container input files when files are dropped (#3756) by @metonym in fd8e832
• fix(inline-checkbox): remove aria-label from InlineCheckbox label element by @metonym in 032c356
• fix(list-box): keep a measured menu still when the reader takes over by @b-r-i-a-n-w-e-s-t in e87ba96
• fix(list-box): keep measurements when the option list is rebuilt unchanged by @b-r-i-a-n-w-e-s-t in ffcf0ee
• fix(list-box): stop stale DOM read from stranding the highlight class by @metonym in f4d0048
• fix(overflow-menu): guard hover styles with any-hover by @metonym in b6b4659
• fix(pagination-nav): guard hover styles with any-hover by @metonym in 3f168b9
• fix(search): prevent disabled expandable search from expanding (#3775) by @metonym in 614c0d9
• fix(selectable-tile): remove hardcoded default title prop value by @metonym in 0afc37a
• fix(slider): guard hover styles with any-hover by @metonym in 573ee96
• fix(structured-list-input): remove hardcoded default title prop value by @metonym in 3dec412
• fix(structured-list): fill sortable button height under condensed by @metonym in 894227a
• fix(structured-list): guard hover styles with any-hover by @metonym in d686c1a
• fix(tag): guard hover styles with any-hover by @metonym in 4c31b5c
• fix(text-input): guard hover styles with any-hover by @metonym in 9f32d03
• fix(tree-view): guard hover styles with any-hover by @metonym in 40e5d80
• fix(ui-shell): add bottom padding to side-nav items list (#3742) by @metonym in 846dc2e
• fix(ui-shell): guard hover styles with any-hover by @metonym in 4db286e

Performance

• perf(css): drop the vendored data-table's tr/th/td qualifiers by @metonym in 7fd7246
• perf(css): drop the vendored UI Shell's a. qualifiers by @metonym in 3bb14a6
• perf(css): flatten the remaining single-tag qualifiers and structured-list's block restatements by @metonym in e39b821
• perf(css): flatten the vendored button's icon-only tooltip trigger compounds by @metonym in ee361d5
• perf(css): flatten the vendored link's inline and visited compounds by @metonym in 4c81023
• perf(css): fold twenty override partials into vendored Carbon by @metonym in 34b4ef8
• perf(css): rewrite vendored tabs desktop-only, fold css/_tabs.scss in by @metonym in 5cbb1a0
• perf(css): theme vendored UI Shell in place, fold css/_ui-shell.scss in by @metonym in 17ea554