github carbon-design-system/carbon-components-svelte v0.96.0
on GitHub

one day ago

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

Features

Bug Fixes

Full Changelog: v0.95.1...v0.96.0

Check out latest releases or
releases around carbon-design-system/carbon-components-svelte v0.96.0

Don't miss a new carbon-components-svelte release

NewReleases is sending notifications on new releases.

Get notifications