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

on GitHub

SessionStorage component

SessionStorage provides a reactive wrapper around the Window.sessionStorage API. Unlike LocalStorage, data is cleared when the browser tab is closed and is isolated per tab: each tab has its own storage. Use session storage for temporary state that should not persist across sessions (e.g., form drafts, wizard progress).

See the SessionStorage docs for more.

<script>
  import { SessionStorage, Toggle } from "carbon-components-svelte";

  let toggled = false;
</script>

<SessionStorage key="my-preference" bind:value={toggled} />
<Toggle toggled bind:toggled labelText="Remember my choice" />

DataTable enhancements

Custom expand icon

DataTable now supports a custom expand icon via the expandIcon slot. Replace the default chevron with your own icon or animation. See custom expand icon.

<DataTable expandable headers={headers} rows={rows}>
  <svelte:fragment slot="expandIcon" let:expanded let:props>
    <Add {...props} />
  </svelte:fragment>
  <svelte:fragment slot="expandedRow" let:row>
    <pre>{JSON.stringify(row, null, 2)}</pre>
  </svelte:fragment>
</DataTable>

sortAlways prop

Set sortAlways to true to skip the unsorted state so the column always remains sorted. The first click goes to ascending; subsequent clicks alternate between ascending and descending (no none). Useful for audit trails or when chronological order is required. See sortable (sortAlways).

<DataTable sortable sortAlways headers={headers} rows={rows} />

Per-column control is also supported via header.sortAlways. See sortable (per-column sortAlways).

<DataTable
  sortable
  headers={[
    { key: 'date', value: 'Date', sortAlways: true },
    { key: 'description', value: 'Description' },
    { key: 'amount', value: 'Amount' },
    { key: 'status', value: 'Status', sortAlways: false }
  ]}
/>

See the DataTable docs for more.

Breaking change: expanded-row slot renamed to expandedRow

The DataTable expanded row slot has been renamed from expanded-row to expandedRow for Svelte 5 snippet support. Update your slot usage:

<!-- Before -->
<svelte:fragment slot="expanded-row" let:row>...</svelte:fragment>

<!-- After -->
<svelte:fragment slot="expandedRow" let:row>...</svelte:fragment>

Breaking change: Filterable Tag click event

For filterable tags, the click event is now forwarded to the tag body instead of the close button. If you were relying on the previous behavior (click on close button), use the close button's click handler or the on:close event instead.

What's Changed

⚠ BREAKING CHANGES

• data-table: rename expanded-row slot to expandedRow for Svelte 5 snippet support (#2710) by @metonym
• tag: filterable tag forwards click event to tag body, not close button (#2711) by @metonym

Features

• data-table: add sortAlways prop (#2712) by @metonym
• data-table: allow custom expand icon (#2709) by @metonym
• session-storage: add SessionStorage component (#2707) by @metonym

Bug Fixes

• tree-view: use correct leaf depth to restore active node style (#2713) by @metonym

Full Changelog: v0.101.4...v0.102.0