Download Latest Version v0.112.0 source code.zip (3.4 MB) Google Add to Preferred Sources
Home / v0.111.0
Name Modified Size InfoDownloads / Week
Parent folder
README.md 2026-08-14 44.2 kB
0
v0.111.0 source code.tar.gz 2026-08-14 1.6 MB
0
v0.111.0 source code.zip 2026-08-14 3.0 MB
1 1 weekly downloads
Totals: 3 Items   4.7 MB 1

This release ships TreeView virtualization, lazy loading, and tri-state checkboxes; DataTable CSV export, footers, and column controls; leaner prebuilt theme CSS; selectable menus; slider marks; tab and accordion lazy panels; and 4 new components (LinkDownload, TableFoot, MenuItemGroup, MenuItemRadioGroup). Also in this release: a year picker on DatePicker, clearable dropdowns, modal loading/submit affordances, and accessibility fixes across tables, list boxes, sliders, and UI Shell.

149 changes in this release:

Category Count
New components 4
Breaking changes 5
Features 66
Bug fixes 64
Performance 14

Full Changelog: https://github.com/carbon-design-system/carbon-components-svelte/compare/v0.110.2...v0.111.0

TreeView: virtualization, lazy loading, and checkboxes

TreeView can virtualize large trees, fetch children on expand via hasChildren + the childNodes slot, and render tri-state checkboxes with selectionMode="checkbox". Type-ahead search, getNode/getNodes accessors, and aria-level/posinset/setsize land in the same release.

See virtualization, lazy loading, and checkbox.

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

  let checkedIds = [3];
  const nodes = [
    {
      id: 1,
      text: "Analytics",
      nodes: [
        { id: 3, text: "Apache Spark" },
        { id: 4, text: "Hadoop" },
      ],
    },
    { id: 7, text: "Blockchain", hasChildren: true },
  ];
</script>

<TreeView
  selectionMode="checkbox"
  labelText="Cloud Products"
  {nodes}
  bind:checkedIds
  virtualize
/>

TreeView checkboxes

https://github.com/user-attachments/assets/dd1a10bd-da2a-47f3-9bc4-c4df7b37e30b

DataTable: footer, CSV export, hidden columns, and shift+click

Summary rows via the footerCell slot (and exported TableFoot). Serialize the current view with toCsv, then download with LinkDownload or downloadFile. Hide columns with columnHidden without dropping them from headers. Align numeric columns with columnAlign: "end". Hold Shift while clicking a selectable checkbox to select a range.

See footer, export, column visibility, and alignment.

:::svelte
<script>
  import { DataTable, LinkDownload, toCsv } from "carbon-components-svelte";

  const headers = [
    { key: "name", value: "Name" },
    { key: "requests", value: "Requests", columnAlign: "end" },
    { key: "rule", value: "Rule", columnHidden: true },
  ];
  const rows = [
    { id: "a", name: "Load Balancer 3", requests: 12480, rule: "Round robin" },
    { id: "b", name: "Load Balancer 1", requests: 8112, rule: "DNS delegation" },
  ];
  const totalRequests = rows.reduce((total, row) => total + row.requests, 0);
</script>

<DataTable selectable {headers} {rows}>
  <svelte:fragment slot="footerCell" let:header let:index>
    {#if header.key === "requests"}
      {totalRequests.toLocaleString()}
    {:else if index === 0}
      Total
    {/if}
  </svelte:fragment>
</DataTable>

<LinkDownload
  data={toCsv(headers, rows)}
  filename="load-balancers.csv"
  type="text/csv;charset=utf-8"
>
  Download CSV
</LinkDownload>

data-table-footer

data-table-csv

Leaner prebuilt theme CSS

The compiled theme sheets are smaller after vendoring Carbon SCSS in-repo, pruning unused partials, and dropping selectors this library never emits. The npm package is also lighter because it no longer ships SCSS sources. See #3636.

Sheet Before After Δ raw Δ gzip
white.css 782.9 KB (76.1 KB gzip) 721.3 KB (69.2 KB gzip) -61.6 KB (-7.9%) -6.9 KB (-9.0%)
all.css 976.6 KB (91.2 KB gzip) 909.3 KB (83.7 KB gzip) -67.3 KB (-6.9%) -7.5 KB (-8.2%)

Prefer the prebuilt themes:

:::js
import "carbon-components-svelte/css/white.css";

Menu: selectable items, shortcuts, scroll, and icon-only triggers

MenuItemGroup and MenuItemRadioGroup hold checkbox and radio state. shortcutText shows a keyboard hint. maxHeight scrolls long menus. MenuButton adds an iconOnly trigger for row actions with submenus.

See selectable, shortcuts, scrollable, and icon-only.

:::svelte
<script>
  import { MenuButton, MenuItem, MenuItemGroup } from "carbon-components-svelte";

  let selectedIds = ["name"];
</script>

<MenuButton labelText="View">
  <MenuItemGroup labelText="Columns" bind:selectedIds>
    <MenuItem id="name" labelText="Name" />
    <MenuItem id="size" labelText="Size" />
    <MenuItem id="modified" labelText="Last modified" />
  </MenuItemGroup>
</MenuButton>

<MenuButton iconOnly labelText="Row actions">
  <MenuItem on:click={() => console.log("Rename")}>Rename</MenuItem>
  <MenuItem labelText="Export as">
    <MenuItem on:click={() => console.log("PDF")}>PDF</MenuItem>
    <MenuItem on:click={() => console.log("CSV")}>CSV</MenuItem>
  </MenuItem>
</MenuButton>

menu-button

Slider and RangeSlider: marks and formatValue

Tick marks along the track (marks as an array of stops, or true for every step). formatValue formats range labels and aria-valuetext (currency, percent) while bound values stay numeric.

See formatted values and marks.

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

<Slider
  labelText="Intensity"
  hideTextInput
  min={0}
  max={3}
  step={1}
  value={1}
  marks={[
    { value: 0, label: "Off" },
    { value: 1, label: "Low" },
    { value: 2, label: "Med" },
    { value: 3, label: "High" },
  ]}
/>

<Slider labelText="Opacity" value={75} formatValue={(v) => `${v}%`} />

range-slider-marks

Tabs: selectedId, manual activation, and lazy panels

Bind selectedId so selection survives tabs being added or removed. Set activation="manual" so arrow keys only move focus. lazy and unmountOnHide on TabContent defer or tear down heavy panels.

See selected by id, manual activation, and lazy content.

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

  let selectedId = "dashboard";
</script>

<Tabs bind:selectedId activation="manual">
  <Tab id="dashboard" label="Dashboard" />
  <Tab id="monitoring" label="Monitoring" />
  <svelte:fragment slot="content">
    <TabContent lazy>Dashboard content</TabContent>
    <TabContent lazy unmountOnHide>Monitoring content</TabContent>
  </svelte:fragment>
</Tabs>

Accordion: flush, single-open, and lazy items

flush removes the gutter for full-bleed layouts. type="single" closes other items when one opens. Set lazy on AccordionItem to defer mounting panel content until first expand.

See flush, single-open, and lazy loading.

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

<Accordion type="single" flush>
  <AccordionItem lazy open title="Overview">
    <p>Panel content mounts on first expand.</p>
  </AccordionItem>
  <AccordionItem lazy title="Details">
    <p>Only one item stays open at a time.</p>
  </AccordionItem>
</Accordion>

accordion-flush

Dropdown clearable and MultiSelect selection caps

Set clearable on Dropdown to reset the selection. MultiSelect adds maxSelectedItems, Shift+click range selection, and live announcements of filter result counts in the filterable variant. ComboBox, Dropdown, and MultiSelect emit scrollend near the menu bottom for load-more patterns.

See clearable dropdown and maximum selection.

:::svelte
<script>
  import { Dropdown, MultiSelect } from "carbon-components-svelte";

  const items = [
    { id: "email", text: "Email" },
    { id: "slack", text: "Slack" },
    { id: "sms", text: "SMS" },
    { id: "push", text: "Push" },
  ];
</script>

<Dropdown clearable labelText="Contact" {items} />

<MultiSelect maxSelectedItems={3} labelText="Preferences" label="Select preferences..." {items} />

dropdown-clearable multi-select-max

Modal: hide close, loading submit, and richer secondary buttons

hideCloseButton removes the header close control for forced-choice dialogs. primaryButtonLoading shows an inline spinner during async submit. secondaryButtons now accept kind and disabled per button. Same hideCloseButton lands on ComposedModal.

See hide close button and primary button loading.

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

  let open = true;
  let loading = false;
</script>

<Modal
  bind:open
  modalHeading="Accept terms"
  primaryButtonText="Accept"
  primaryButtonLoading={loading}
  hideCloseButton
  preventCloseOnClickOutside
  secondaryButtons={[{ text: "Remind me later", kind: "ghost" }]}
>
  <p>You must accept to continue.</p>
</Modal>

modal-hide

DatePicker: year type

Pick a year without day- or month-level granularity. Set datePickerType="year" for fiscal years, reporting periods, and other year-scoped forms. The calendar shows a decade grid; pair it with dateFormat="Y".

See year picker.

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

<DatePicker datePickerType="year" dateFormat="Y">
  <DatePickerInput labelText="Fiscal year" placeholder="yyyy" />
</DatePicker>

year-calendar

Pagination simple mode

Compact previous/next with page status text. Useful in toolbars and cards.

See simple pagination.

:::svelte
<script>
  import { Pagination, Toolbar, ToolbarContent } from "carbon-components-svelte";
</script>

<Toolbar size="sm">
  <ToolbarContent>
    <Pagination simple size="sm" totalItems={102} pageText={(page) => `${page.toLocaleString()}`} />
  </ToolbarContent>
</Toolbar>

pagination-simple

Tag: links and maxWidth

Set href to render a tag as an anchor. Set maxWidth to ellipsis long labels; a tooltip with the full text appears only when truncated.

See link tags and max width.

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

<Tag href="/components/Tag" type="blue">Svelte</Tag>

<Tag filter maxWidth="8rem" on:close>
  Very long filterable label that truncates
</Tag>

tag-link tag-max-width

Checkbox invalid and warn states

Validation and warning text on Checkbox and CheckboxGroup. Group state takes precedence over individual checkboxes.

See checkbox states.

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

<Checkbox
  labelText="I agree to the terms and conditions"
  invalid
  invalidText="You must agree to the terms and conditions to continue"
/>

<CheckboxGroup
  warn
  warnText="Push notifications may be delayed"
  legendText="Notification preferences"
  name="prefs"
  selected={["email"]}
>
  <Checkbox labelText="Email" value="email" />
  <Checkbox labelText="Push" value="push" />
</CheckboxGroup>

checkbox-invalid

UserAvatar: interactive, href, and image fallback

Set interactive to render a focusable button, or href for a profile link. Failed images fall back to initials or the default icon. Pass imageAttributes for loading, srcset, and similar img attributes.

See interactive and link.

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

<UserAvatar interactive name="Richard Hendricks" backgroundColor="purple" />

<UserAvatar href="/profile" name="Richard Hendricks" backgroundColor="blue" />

<UserAvatar
  name="Monica Hall"
  image="https://example.com/monica.jpg"
  imageAttributes={{ loading: "lazy" }}
/>

user-avatar-interactive

Form: actions for SvelteKit enhance

Svelte's use: directive cannot target components. Pass actions={[enhance]} (or [action, parameter] tuples) to apply SvelteKit enhance to the underlying <form>. FormGroup also supports disabled.

See SvelteKit enhance.

:::svelte
<script>
  import { enhance } from "$app/forms";
  import { Button, Form, TextInput } from "carbon-components-svelte";
</script>

<Form method="POST" action="?/save" actions={[enhance]}>
  <TextInput name="name" labelText="Name" />
  <Button type="submit">Save</Button>
</Form>

More in this release

  • TextInput: maxCount character counter (grapheme-aware, shared with TextArea)
  • CodeSnippet: configurable collapsed row counts; copy falls back to execCommand and surfaces errors (CopyButton / CopyInput too)
  • FileUploader: per-file status; drop container size and duplicate rejection parity
  • PinCodeInput: custom pattern, form name, multi-character autofill
  • NotificationQueue: top-left / top-center / bottom-* placements; pauseOnHover on toast and inline notifications
  • ContentSwitcher / ProgressIndicator / Tabs: stable selectedId
  • ContainedListItem: href for link rows
  • Dialog: close trigger detail and focus restore
  • OverflowMenu: maxHeight for scrollable menus

Breaking changes

CSS: prebuilt themes only (individual .scss removed from the package)

The npm package no longer ships css/**/*.scss (including theme entries like white.scss) or the vendored Carbon SCSS under css/vendor/. Import the prebuilt themes instead:

:::js
import "carbon-components-svelte/css/white.css";

Those published SCSS files were never a real consumer API: they imported carbon-components, which was only a devDependency of this repo, and they also pulled in library-owned patches that only compile as a unit inside our bun build:css pipeline. The supported path has always been the prebuilt CSS.

The upside is the leaner sheets in the table above and a lighter package, without needing carbon-preprocess-svelte. Details in #3636. SCSS sources stay in the git repo for building themes.

DataTable: bind:selectable no longer flips

bind:selectable no longer becomes true when radio or batchSelection is set. Read radio / batchSelection directly if you need that signal.

MultiSelect: trigger named by field label

The non-filterable trigger is named by its field label. Review any custom accessible-name workarounds.

Tag: no forwarded on:click on non-interactive tags

Non-interactive tags no longer forward on:click. Use filter, interactive, or href when the tag should be clickable.

ContextMenuOption: icon and indent are presentational

A selectable or radio-group option no longer overwrites icon / indented on the exported props. The checkmark and indentation are computed internally.

What's Changed

Breaking Changes

Features

Bug Fixes

Performance

Source: README.md, updated 2026-08-14