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

on GitHub

Virtualization support for DataTable

DataTable now supports virtualized rows for large, in-memory datasets.

Virtualization renders only the rows visible in the viewport, improving performance for tables with thousands of rows. Set virtualize={true} to enable. The header stays visible while scrolling. The container height defaults to 10 rows (itemHeight * maxVisibleRows) and adapts based on the table size. Customize itemHeight, overscan, maxVisibleRows, and containerHeight as needed.

See the DataTable docs for more.

Portal menu for ComboBox, Dropdown, MultiSelect, DatePicker, and OverflowMenu

These components now support a portalMenu prop to render their menus in a floating portal. This prevents clipping by parent containers with overflow: hidden or z-index stacking contexts.

Inside a Modal, portalMenu defaults to true unless explicitly set to false.

<Stack style="overflow: hidden; max-height: 120px;">
  <ComboBox
    portalMenu
    labelText="Contact method"
    placeholder="Select contact method"
    items={[
      { id: "0", text: "Slack" },
      { id: "1", text: "Email" },
      { id: "2", text: "Fax" },
    ]}
  />
</Stack>

FloatingPortal component

FloatingPortal builds on Portal by rendering content into document.body and positioning it relative to an anchor element. It automatically flips direction when there is not enough space and repositions on scroll and resize. Use it for anchored, positioned content such as dropdowns, popovers, or overflow menus.

See the FloatingPortal docs for more.

<script>
  import { Button, FloatingPortal, Tile } from "carbon-components-svelte";

  let anchor = null;
  let open = false;
</script>

<div bind:this={anchor}>
  <Button on:click={() => (open = !open)}>Toggle floating content</Button>
</div>

<FloatingPortal {anchor} {open}>
  <Tile>Content</Tile>
</FloatingPortal>

CheckboxGroup component

CheckboxGroup wraps multiple Checkbox components with a shared legend, layout, and validation. It mirrors the RadioButtonGroup API but supports multiple selections.

See the Checkbox docs for more.

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

  let selected = ["email"];
</script>

<CheckboxGroup
  legendText="Notification preferences"
  name="prefs"
  bind:selected
>
  <Checkbox value="email" labelText="Email" />
  <Checkbox value="sms" labelText="SMS" />
  <Checkbox value="push" labelText="Push notifications" />
</CheckboxGroup>

Selected: {JSON.stringify(selected)}

ExpandableTile with interactive content

When an ExpandableTile contains links or buttons, set hasInteractiveContent to true. The tile renders as a <div> instead of a <button> to avoid invalid HTML nesting. Only the expand/collapse chevron controls the tile's expand/collapse state.

Read the docs.

<ExpandableTile hasInteractiveContent tileExpandedLabel="View less" tileCollapsedLabel="View more">
  <Stack slot="above" gap={4} inline>
    <a href="https://example.com">Learn more</a>
  </Stack>
  <p slot="below">Additional content...</p>
</ExpandableTile>

Stack inline display

Stack now supports an inline prop for display: inline-flex, useful for inline layouts.

<Stack inline gap={4}>
  <CheckboxGroup legendText="Preferences" bind:selected>
    <Checkbox value="a" labelText="Option A" />
    <Checkbox value="b" labelText="Option B" />
  </CheckboxGroup>
  <Button>Submit</Button>
</Stack>

Improved TypeScript generics

For TypeScript users, selected and value are now generic and inferred from the item types in:

• RadioButtonGroup, RadioButton, RadioTile
• SelectItem
• StructuredList

Breaking change: carbon: prefix for contexts

Internal Svelte contexts now use a carbon: prefix (e.g. carbon:Modal, carbon:CheckboxGroup) to avoid clashing with external contexts. Although this is an internal API, update your code to use the new context names if you use getContext with Carbon.

What's Changed

⚠ BREAKING CHANGES

• apply carbon: prefix to contexts (#2672) by @metonym

Features

• checkbox-group: add CheckboxGroup (#2665) by @metonym
• combo-box: add portalMenu prop (#2636), closes #2632 by @metonym
• data-table: support virtualized rows (#2573), closes #1192 by @metonym
• date-picker: add portalMenu prop (#2640), closes #2632 by @metonym
• dropdown: add portalMenu prop (#2636), closes #2142 by @metonym
• expandable-tile: add hasInteractiveContent prop (#2658) by @metonym
• floating-portal: add FloatingPortal (#2636) by @metonym
• list-box-menu: add portal support (#2636) by @metonym
• multi-select: add portalMenu prop (#2636) by @metonym
• overflow-menu: add portalMenu prop (#2639) by @metonym
• portal: add ref prop for element access (#2636) by @metonym
• radio-button-group: selected value is generic (#2662) by @metonym
• radio-button: selected value is generic (#2662) by @metonym
• radio-tile: value is generic (#2666) by @metonym
• select-item: value is generic (#2663) by @metonym
• stack: add inline prop for inline-flex display (#2659) by @metonym
• structured-list: selected value is generic (#2664) by @metonym

Bug Fixes

• button: prevent icon-only button tooltip from triggering wrong action (#2638), closes #937 by @metonym
• composed-modal: focus primary button if it exists (#2673) by @metonym
• composed-modal: return focus to trigger element (#2674) by @metonym
• date-picker: derive input pattern from dateFormat prop (#2654), closes #1362 by @metonym
• date-picker: sync "to" input after programmatic range update (#2646), closes #893 by @metonym
• date-picker: use correct variable in calendar.set loop (#2640) by @metonym
• expandable-tile: prevent height animation on initial load (#2657) by @metonym
• modal: focus primary button if it exists (#2673), closes #2671 by @metonym
• modal: return focus to trigger element (#2674) by @metonym
• overflow-menu: OverflowMenuItem has explicit type="button" to prevent form submission (#2656) by @metonym
• portal: transfer focus to active element (#2669) by @metonym
• ui-shell: collapse SideNavMenu items when rail is closed (#2648), closes #746 by @metonym
• ui-shell: prevent SideNav flicker on page load (#2647), closes #1383 by @metonym

Full Changelog: v0.100.0...v0.101.0