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

on GitHub

Tabs enhancements

Tab icon prop

Individual tabs can now show an icon via the icon prop. The icon is rendered to the right of the label. See the Tabs docs.

<script>
  import { Tabs, Tab, TabContent } from "carbon-components-svelte";
  import Calendar from "carbon-icons-svelte/lib/Calendar.svelte";
  import Information from "carbon-icons-svelte/lib/Information.svelte";
  import Settings from "carbon-icons-svelte/lib/Settings.svelte";
</script>

<Tabs>
  <Tab label="Calendar" icon={Calendar} />
  <Tab label="Information" icon={Information} />
  <Tab label="Settings" icon={Settings} disabled />
  <svelte:fragment slot="content">
    <TabContent>Calendar content</TabContent>
    <TabContent>Information content</TabContent>
    <TabContent>Settings content</TabContent>
  </svelte:fragment>
</Tabs>

Container type: icons and secondaryLabel

When using type="container", the container type now supports icons on tabs and a secondaryLabel (or secondaryChildren slot) per tab for extra context (e.g., counts or metadata).

<Tabs type="container">
  <Tab label="Calendar" icon={Calendar} secondaryLabel="(12 events)" />
  <Tab label="Information" icon={Information} secondaryLabel="(3 new)" />
  <Tab label="Settings" icon={Settings} secondaryLabel="(2 pending)" disabled />
  <svelte:fragment slot="content">
    <TabContent>Calendar content</TabContent>
    <TabContent>Information content</TabContent>
    <TabContent>Settings content</TabContent>
  </svelte:fragment>
</Tabs>

fullWidth and container behavior

• fullWidth: set fullWidth to true so the tab list spans the full width of its container.
• Container type: container tabs now use auto-width by default, have the correct background color for the panel, and disabled tabs no longer show a border on hover.

<Tabs type="container" fullWidth>
  ...
</Tabs>

See the Tabs docs for more.

Generic types across components

Many components now use generic type parameters for props like icon, value, and primaryButtonIcon, so TypeScript can infer narrower types instead of falling back to any. You get better autocomplete and type checking when you pass Carbon icons, specific value types, or custom components.

No API changes: just improved types.

<script lang="ts">
  import { LocalStorage } from "carbon-components-svelte";
  type Theme = "light" | "dark" | "auto";
  let theme: Theme = "light";
</script>

<LocalStorage key="theme" bind:value={theme} />

Affected components include:

• Button
• Checkbox
• ContainedList
• ContextMenuOption
• FileUploaderButton
• Link
• LocalStorage
• Modal
• ModalFooter
• NotificationButton
• OverflowMenu
• Search
• SessionStorage
• Tab
• Tag
• Theme
• ToolbarBatchActions
• Tooltip
• TooltipIcon
• TreeViewNode
• UIShell

Runtime stability

• DatePicker Added null safety around createCalendar and RangePlugin usage to avoid runtime errors.
• DataTable resolvePath now safely guards pathCache.delete and segment handling.
• Breakpoint breakpointObserver result and derived callbacks are guarded to prevent errors when the observer is missing.
• Truncate The truncate action guards update() options to avoid invalid calls.

What's Changed

• feat: more components are generic by @metonym in #2743
• feat(tabs): container type supports secondaryLabel by @metonym in #2741
• feat: icon is generic by @metonym in #2744
• feat(tabs): container type supports icons by @metonym in #2738
• feat(tabs): Tab supports icon prop by @metonym in #2732
• feat(tabs): support fullWidth by @metonym in #2736
• fix(tabs): container type disabled tab should not apply border on hover by @metonym in #2737
• fix(tabs): container type has background color for panel by @metonym in #2735
• fix(tabs): container type should be auto-width by default by @metonym in #2740
• fix(combo-box): use labelText as aria-label fallback by @metonym in #2716
• fix(ui-shell): allow SideNav overlay to show for custom expansion breakpoint by @metonym in #2721
• fix: address runtime correctness errors by @metonym in #2745

Full Changelog: v0.102.0...v0.103.0