Download Latest Version v0.112.0 source code.zip (3.4 MB) Google Add to Preferred Sources
Home / v0.112.0
Name Modified Size InfoDownloads / Week
Parent folder
README.md 2026-09-11 23.7 kB
0
v0.112.0 source code.tar.gz 2026-09-11 1.9 MB
0
v0.112.0 source code.zip 2026-09-11 3.4 MB
0
Totals: 3 Items   5.2 MB 0

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:

Category Count
New components 6
Features 21
Bug fixes 30
Performance 8

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

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

interstitial-screen

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.

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

full-page-error

BigNumber

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

See BigNumber.

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

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

big-number

ScrollGradient

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

See ScrollGradient.

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

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

scroll-gradient

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.

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

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

action-set

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.

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

header-switcher

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.

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

data-table

StructuredList: sortable columns

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

See sorting.

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

structured-list

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.

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

tabs-small tabs-container-small

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.

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

dropdown-wrapped

Leaner theme CSS

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

Optimization Effect on all.css
Theme UI shell in place; fold css/_ui-shell.scss in −11.0 KB min (−1.3 KB gzip); drops doubled selector restatements
Rewrite tabs for desktop-only layout; fold css/_tabs.scss in −6.2 KB min (−0.7 KB gzip); deletes unused mobile dropdown rules
Flatten button icon-only tooltip trigger compounds −5.2 KB min (−0.2 KB gzip); drops duplicate trigger includes
Fold twenty override partials into vendored Carbon −2.4 KB min (−0.7 KB gzip); drops doubled selectors and the number-input clone
Drop data-table tr / th / td qualifiers −1.1 KB min; 204 → 107 element-qualified selectors
Drop UI shell a. qualifiers 48 lighter selectors on links that only ever sit on <a>
Flatten remaining single-tag qualifiers and structured-list restatements 53 → 48 element-qualified; lighter accordion, error, list, and tooltip rules
Flatten link inline and visited compounds One class lighter on inline and visited links

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

Bug Fixes

Performance

Source: README.md, updated 2026-09-11