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

on GitHub

What's Changed

⚠ BREAKING CHANGES

• progress-step: remove one-update delay for complete prop by @metonym in (#2368)

Features

• header-search: support TypeScript generics by @metonym in (5d0468a)
• notification: add NotificationQueue component by @metonym in (9560791), closes #2283
• recursive-list: support TypeScript generics by @metonym in (b200828)
• selectable-tile: add SelectableTileGroup component by @metonym in (6ba0fdf)
• select: support TypeScript generics by @metonym in (d57b375)
• theme: export themes constant by @metonym in (776e471), closes #939
• tile-group: make selectedValue and selected generic by @metonym in (#2374) (209cc02)
• tree-view: support TypeScript generics by @metonym in (9efbbda)

Bug Fixes

• inline-notification: conditionally render title/subtitle by @metonym in (751190c), closes #2379
• toast-notification: conditionally render subtitle/caption by @metonym in (f4d2091)
• modal: improve focus trap for Dropdown and other components by @metonym in (#2369) (d11e3ac), closes #1392
• tabs: avoid infinite update loop in Svelte 5 by @metonym in (#2367) (413aab5), closes #2366
• tile-group: improve context types for SelectableTileGroup and TileGroup by @metonym in (#2375) (ff144d2)

New NotificationQueue component

Control toast notifications using an imperative API. See Documentation.

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

  let queue;
</script>

<NotificationQueue bind:this={queue} />

<Button
  on:click={() => {
    queue.add({
      kind: "success",
      title: "Success",
      subtitle: "Your changes have been saved.",
      timeout: 3000,
    });
  }}
>
  Show success
</Button>
<Button
  on:click={() => {
    queue.clear();
  }}
>
  Clear all
</Button>

New SelectableTileGroup component

Similar to TileGroup for radio tiles, the new SelectableTileGroup component abstracts state management for multi-selectable tiles. See Documentation.

<script>
  import {  SelectableTileGroup, SelectableTile } from "carbon-components-svelte";
</script>

<SelectableTileGroup
  legend="Select options"
  name="options"
  selected={["option1", "option2"]}
>
  <SelectableTile value="option1">Option 1</SelectableTile>
  <SelectableTile value="option2">Option 2</SelectableTile>
  <SelectableTile value="option3">Option 3</SelectableTile>
</SelectableTileGroup>

Full Changelog: v0.93.0...v0.94.0