v0.96.0

Breaking Changes: Slot Renaming for Svelte 5 Compatibility

In Svelte 5, props and slots (#snippet) must have distinct names to avoid conflicts.

This release includes breaking changes to named slots across many components to ensure compatibility with Svelte 5. The changes follow a consistent pattern: slots that previously shared names with props have been renamed to use the Children suffix (e.g., labelText → labelChildren).

Renaming slots ensures that:

• #snippet can be used in Svelte 5 without prop/slot naming conflicts
• Slot behavior still works in Svelte 3 and Svelte 4 with minimal breaking changes

Migration guide

Form Components: labelText → labelChildren

Svelte 3/4

<TextInput>
-  <span slot="labelText">Custom Label</span>
+  <span slot="labelChildren">Custom Label</span>
</TextInput>

<ComboBox>
-  <strong slot="labelText">Required: </strong>
+  <strong slot="labelChildren">Required: </strong>
</ComboBox>

<Checkbox>
-  <span slot="labelText">I agree to the <a href="/terms">terms</a></span>
+  <span slot="labelChildren">I agree to the <a href="/terms">terms</a></span>
</Checkbox>

<Select>
-  <span slot="labelText">Custom Label</span>
+  <span slot="labelChildren">Custom Label</span>
</Select>

<ProgressBar>
-  <span slot="labelText">Custom Progress Label</span>
+  <span slot="labelChildren">Custom Progress Label</span>
</ProgressBar>

Svelte 5

<TextInput>
  {#snippet labelChildren()}
    <span>Custom Label</span>
  {/snippet}
</TextInput>

<ComboBox>
  {#snippet labelChildren()}
    <strong>Required: </strong>
  {/snippet}
</ComboBox>

<Checkbox>
  {#snippet labelChildren()}
    <span>I agree to the <a href="/terms">terms</a></span>
  {/snippet}
</Checkbox>

<Select>
  {#snippet labelChildren()}
    <span>Custom Label</span>
  {/snippet}
</Select>

<ProgressBar>
  {#snippet labelChildren()}
    <span>Custom Progress Label</span>
  {/snippet}
</ProgressBar>

Notification Components: title/subtitle/caption → titleChildren/subtitleChildren/captionChildren

Svelte 3/4

<InlineNotification>
-  <strong slot="title">Error: </strong>
-  <span slot="subtitle">An internal server error occurred.</span>
+  <strong slot="titleChildren">Error: </strong>
+  <span slot="subtitleChildren">An internal server error occurred.</span>
</InlineNotification>

<ToastNotification>
-  <strong slot="title">Error: </strong>
-  <strong slot="subtitle">An internal server error occurred.</strong>
-  <strong slot="caption">{new Date().toLocaleString()}</strong>
+  <strong slot="titleChildren">Error: </strong>
+  <strong slot="subtitleChildren">An internal server error occurred.</strong>
+  <strong slot="captionChildren">{new Date().toLocaleString()}</strong>
</ToastNotification>

Svelte 5

<InlineNotification>
  {#snippet titleChildren()}
    <strong>Error: </strong>
  {/snippet}
  {#snippet subtitleChildren()}
    <span>An internal server error occurred.</span>
  {/snippet}
</InlineNotification>

<ToastNotification>
  {#snippet titleChildren()}
    <strong>Error: </strong>
  {/snippet}
  {#snippet subtitleChildren()}
    <strong>An internal server error occurred.</strong>
  {/snippet}
  {#snippet captionChildren()}
    <strong>{new Date().toLocaleString()}</strong>
  {/snippet}
</ToastNotification>

DataTable: title/description → titleChildren/descriptionChildren

Svelte 3/4

<DataTable headers={headers} rows={rows}>
-  <h2 slot="title">Data Table Title</h2>
-  <p slot="description">Table description text</p>
+  <h2 slot="titleChildren">Data Table Title</h2>
+  <p slot="descriptionChildren">Table description text</p>
</DataTable>

Svelte 5

<DataTable headers={headers} rows={rows}>
  {#snippet titleChildren()}
    <h2>Data Table Title</h2>
  {/snippet}
  {#snippet descriptionChildren()}
    <p>Table description text</p>
  {/snippet}
</DataTable>

Tile Group Components: legend prop → legendText, legendText slot → legendChildren

Svelte 3/4

-<TileGroup legend="Select a tile">
-  <span slot="legendText">Custom Legend</span>
+<TileGroup legendText="Select a tile">
+  <span slot="legendChildren">Custom Legend</span>
</TileGroup>

-<SelectableTileGroup legend="Choose one">
+<SelectableTileGroup legendText="Choose one">
  <!-- tiles -->
</SelectableTileGroup>

<RadioButtonGroup legendText="Select an option">
-  <span slot="legendText">Custom Legend</span>
+  <span slot="legendChildren">Custom Legend</span>
</RadioButtonGroup>

Svelte 5

<TileGroup legendText="Select a tile">
  {#snippet legendChildren()}
    <span>Custom Legend</span>
  {/snippet}
</TileGroup>

<SelectableTileGroup legendText="Choose one">
  <!-- tiles -->
</SelectableTileGroup>

<RadioButtonGroup legendText="Select an option">
  {#snippet legendChildren()}
    <span>Custom Legend</span>
  {/snippet}
</RadioButtonGroup>

Header Components: company prop → companyText, text slot → textChildren

Svelte 3/4

-<Header company="IBM">
+<Header companyText="IBM">
  <!-- header content -->
</Header>

<HeaderAction>
-  <span slot="text">Action</span>
+  <span slot="textChildren">Action</span>
</HeaderAction>

Svelte 5

<Header companyText="IBM">
  <!-- header content -->
</Header>

<HeaderAction>
  {#snippet textChildren()}
    <span>Action</span>
  {/snippet}
</HeaderAction>

---

⚠ BREAKING CHANGES

• radio-button-group: change legendText slot to legendChildren by @metonym (7f5fbe0, #2425), closes #2412
• tile-group: rename legend to legendText by @metonym (2ffdeab, #2424)
• selectable-tile-group: rename legend to legendText by @metonym (d101a5e, #2424)
• data-table: change title/description slots to titleChildren, descriptionChildren by @metonym (855f283, #2423), closes #2413
• inline-notification: change title/subtitle/caption slot names to titleChildren/subtitleChildren/captionChildren by @metonym (3187319, #2419)
• toast-notification: change title/subtitle/caption slot names to titleChildren/subtitleChildren/captionChildren by @metonym (4735d53, #2419), closes #2415
• header: change company prop to companyText by @metonym (873967d, #2416)
• header-action: change text slot to textChildren by @metonym (fac2a25, #2416)
• context-menu-option: change labelText slot to labelChildren by @spburtsev (ed1336b, #2408)
• file-uploader-drop-container: change labelText slot to labelChildren by @spburtsev (9edcceb, #2408)
• file-uploader-button: change labelText slot to labelChildren by @spburtsev (c39957a, #2408)
• number-input: change labelText slot to labelChildren by @spburtsev (9a4c5ee, #2408)
• text-area: change labelText slot to labelChildren by @spburtsev (1c04b86, #2408)
• text-input: change labelText slot to labelChildren by @spburtsev (39df16f, #2408)
• password-input: change labelText slot to labelChildren by @spburtsev (a1600ae, #2408)
• date-picker-input: change labelText slot to labelChildren by @spburtsev (eb0fd33, #2408)
• toggle-skeleton: change labelText slot to labelChildren by @spburtsev (099cdd2, #2408)
• toggle: change labelText slot to labelChildren by @spburtsev (...

v0.95.2

Bug Fixes

• stack: include styles for individual themes by @metonym (b17138a, #2418), closes #2417

Full Changelog: v0.95.1...v0.95.2

v0.94.3

Fix is backported from v0.95.2

Bug Fixes

• stack: include styles for individual themes by @metonym (b17138a, #2418), closes #2417

Full Changelog: v0.94.2...v0.94.3

v0.93.3

Fix is backported from v0.95.2

Bug Fixes

• stack: include styles for individual themes by @metonym (b17138a, #2418), closes #2417

Full Changelog: v0.93.2...v0.93.3

v0.95.1

Bug Fixes

• toolbar: omit inert when batch actions are not present by @metonym (80c9416, #2405), closes #2404

Full Changelog: v0.95.0...v0.95.1

v0.94.2

Fix is backported from v0.95.1

Bug Fixes

• toolbar: omit inert when batch actions are not present by @metonym (80c9416, #2405), closes #2404

Full Changelog: v0.94.1...v0.94.2

v0.93.2

Fix is backported from v0.95.1

Bug Fixes

• toolbar: omit inert when batch actions are not present by @metonym (80c9416, #2405), closes #2404

Full Changelog: v0.93.1...v0.93.2

v0.95.0

What's Changed

Features

• modal: add formId prop to enable native form submission by @metonym (2a5c274, #2383), closes #310
• portal: add Portal component by @metonym (4982e26, #2388), closes #2280

Bug Fixes

• number-input: only show invalid state when invalid and invalidText are set by @metonym (e06340c, #2384), closes #1180
• tabs: avoid infinite update loop in Svelte 5 by @metonym (65316af, #2394), closes #2366

---

New Portal component

Portal component outside of the direct parent to avoid parent overflow constraints and z-index issues. See Documentation.

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

<div>
  <div>This is rendered inside the div</div>
  <Portal>This is rendered outside of the div</Portal>
</div>

Full Changelog: v0.94.0...v0.95.0

v0.94.1

Bug Fixes

• tabs: avoid infinite update loop in Svelte 5 (#2394) (21aea31), closes #2366

Full Changelog: v0.94.0...v0.94.1

v0.93.1

Fix is backported from v0.94.1

Bug Fixes

• tabs: avoid infinite update loop in Svelte 5 (#2394) (61c1afc), closes #2366

Full Changelog: v0.93.0...v0.93.1