carbon-design-system/carbon-components-svelte v0.114.0 on GitHub

This release moves the library to Carbon v11. Token names, type style names and token values now match the v11 Figma kit. Layer replaces the light prop. DatePicker uses a built-in calendar in place of flatpickr. Every component mirrors its layout and arrow keys in right-to-left pages.

It also adds 25 new components (AILabel, Callout, Card, ChatButton, ChatDivider, ChatLog, ChatMessage, ConfirmModal, CopyText, Countdown, CssGrid, EmptyState, InlineEdit, InputGroup, Kbd, Layer, LayoutDirection, LazyMount, Prose, SidePanel, Splitter, StarRating, Stepper, TableOfContents, TagInput, ThemeZone, TooltipGroup).

Breaking. This is a breaking minor. Most apps need three steps or fewer. Read the v0.114 migration guide before you upgrade. It has a checklist by feature, rg commands that find each line to change, and the v10 to v11 token mapping table.

Browsers. Safari 14.1 is the new minimum. Safari 14.0 ignores the logical inset properties the CSS now uses.

CSS. all.css is 846.6 kB minified (was 653.3 kB) and 98.3 kB gzipped (was 75.9 kB). That includes the v11 tokens for five themes and the CSS for the 25 new components. Prose and syntax highlighting ship in their own opt-in stylesheets, so they add nothing to all.css.

Also in this release: theme="system", createTheme and a theme builder, keyboard shortcuts on buttons and menus, loadingDelay, chat timestamps in RelativeTime, Tag size="xs", Tabs navigation, Modal lazy, NumberInput scrubbable and folder upload.

1,260 changes in this release:

Category	Count
Breaking changes	32
New components	25
Features	257
Bug fixes	928
Performance	43

Full Changelog: v0.113.0...v0.114.0

Breaking changes

The migration guide lists every break with the PR that made it. These are the ones most apps hit.

Change	Who it affects	Guide
v10 token names (`--cds-ui-01`, `--cds-text-01`, …) are no longer declared. Overrides of them do nothing.	CSS that reads or overrides `--cds-*`; Theme `tokens`	1. Color tokens
Type styles use v11 names. `caption-01/02` are removed.	`Text`, `Heading`, `.bx--type-*`	2. Type styles
`light` is removed from 25 components. Wrap them in `<Layer>`.	`light`	3. Layer
flatpickr is replaced. `flatpickrProps`, plugins and hooks are removed. `bind:calendar` is a `DatePickerCalendar`.	`DatePicker`	4. DatePicker
Token values are v11's. Gray 80 follows v11's dark themes. Zebra stripes use `layer-accent`.	Visual tests	7. New colors
Modals start a Layer, stay open on an outside click when transactional, and use an `h2` heading.	`Modal`, `ComposedModal`	10. Modals
InlineNotification and ToastNotification default to `role="status"`.	Tests that query `alert`	11. Notifications
Search defaults to 40px. Tags have no outer margin.	`Search` without `size`; rows of tags	12. Sizes

Changes without a breaking marker

These commits read as plain fixes, so the generated list below doesn't flag them. Each can change what your code or tests see.

SearchMenu fills the field with the picked item's text, not its value. This changes bind:value and the submitted form value (#4807).
HeaderSearch: the select detail is a union. Code that reads e.detail.selectedResult directly fails svelte-check (#5129).
Types: icon props take a component or null. Modal secondaryButtons kind and TableHeader scope are stricter (#5121, #5127).
PaginationNav: the page buttons are named "Page 3", and the select is "Select page number" (#4800).
DataTable cells use one bx--table-cell class in place of .bx--data-table td. App CSS that lost before can now win (#4149).
color-scheme on :root overrides an app's html { color-scheme } (#4999, #5099).
TableBody no longer sets aria-live="polite". Rows that update in place are no longer read out. Pass aria-live="polite" to keep it. DataTable now announces a sort once, through sortStatusText (#5303).
ComboBox: an input event on an unfocused input no longer opens the menu. It selects an exact label match or clears the selection. Tests that call fireEvent.input without focus first see a change (#4411).
aria-describedby from your code now joins the built-in helper, warning and error ids in place of replacing them. aria-label, aria-labelledby and aria-describedby moved from wrappers to the focusable element in about 30 components. Markup snapshots change (#4399, #4400, #4401, #4402).
Read-only fields: read-only Slider and RangeSlider render their values as text, so the inputs fire no focus or blur and the label focuses nothing. Read-only NumberInput and TextInput type="number" render type="text", so getByRole("spinbutton") finds nothing (#4422, #4424, #4426).
Clipped menus and tooltips move to a portal for that open when an overflow box would cut them off. This covers Dropdown, ComboBox, MultiSelect, OverflowMenu, Tooltip, the DatePicker calendar and icon tooltips. App CSS that styles them inside their container stops matching. Pass portalMenu={false} or portalTooltip={false} to opt out (#4712, #4713, #5096).
OverflowMenu: the trigger is named "Options" and shows a tooltip. Tests that find it by "menu" need updating (#4926).
ToastNotification: a NotificationActionButton anywhere in a toast is a small tertiary button (#4986).
Icon tooltips close 100ms after the pointer leaves, and the pointer can move onto them. TooltipIcon leaveDelayMs was 300 (#5012).
InterstitialScreen: the title is an h1 full screen and an h2 in a modal. It was an h3 (#5027).
Tests: the Tabs navigation landmark moved to the tab list. Icon-only buttons set aria-pressed only when they are selected. The Loading spinner has no live region of its own. See 8. Tests.

Carbon v11

Components read v11 token names, and the values match the v11 kit in White, Gray 10, Gray 90 and Gray 100. Gray 80 has no v11 theme, so its new tokens come from its neighbors. carbon-components-svelte/tokens exports the v11 token data.

Layer puts content on the next surface. Fields, tiles and borders inside it read contextual tokens, so they contrast with the surface below. Each nested Layer steps up one level, up to three.

See Layer.

<script>
  import { Box, Layer, Stack, TextInput } from "carbon-components-svelte";
</script>

<Stack gap={5}>
  <TextInput labelText="Page" placeholder="field-01" />
  <Layer withBackground>
    <Box padding={5}>
      <Stack gap={5}>
        <TextInput labelText="Layer 1" placeholder="field-02" />
        <Layer withBackground>
          <Box padding={5}>
            <TextInput labelText="Layer 2" placeholder="field-03" />
          </Box>
        </Layer>
      </Stack>
    </Box>
  </Layer>
</Stack>

ThemeZone renders part of a page in another theme, such as a dark sidebar in a light app. It needs all.css.

See ThemeZone.

<script>
  import { Box, Button, Stack, TextInput, ThemeZone } from "carbon-components-svelte";
</script>

<Stack orientation="horizontal">
  <ThemeZone theme="g100">
    <Box padding={5}>
      <Stack gap={5}>
        <TextInput labelText="Search" placeholder="Gray 100" />
        <Button kind="tertiary">Filter</Button>
      </Stack>
    </Box>
  </ThemeZone>
  <Box padding={5}>
    <Stack gap={5}>
      <TextInput labelText="Search" placeholder="White" />
      <Button kind="tertiary">Filter</Button>
    </Stack>
  </Box>
</Stack>

`DatePicker`: a built-in calendar

flatpickr is gone. The calendar is a dialog with a grid of days, so screen readers announce the month and each day, and arrow keys move by day and week. Its classes are bx--date-picker__*. Pass a language tag, such as locale="de", with no locale import. Month and weekday names come from Intl.

flatpickrProps is removed. Each option it carried that still applies is now a prop. See 4. DatePicker for the full map.

See DatePicker.

<script>
  import { DatePicker, DatePickerInput } from "carbon-components-svelte";
</script>

<DatePicker datePickerType="single" locale="de">
  <DatePickerInput labelText="Liefertermin" placeholder="tt.mm.jjjj" />
</DatePicker>

Right to left

Every component mirrors its layout in a right-to-left page: padding, icons, menus, tooltips, sliders and resize handles. Arrow keys follow the reading direction. Set dir on <html> for the whole page, or wrap part of a page in LayoutDirection. The right-to-left guide shows how to adopt it.

See LayoutDirection.

<script>
  import { Button, LayoutDirection, Stack, TextInput } from "carbon-components-svelte";
</script>

<LayoutDirection dir="rtl" lang="ar" tag="form">
  <Stack gap={6}>
    <TextInput labelText="اسم الخدمة" placeholder="api-gateway" />
    <TextInput labelText="البريد الإلكتروني للمالك" placeholder="ops@example.com" />
    <Stack orientation="horizontal" gap={5}>
      <Button>نشر</Button>
      <Button kind="secondary">إلغاء</Button>
    </Stack>
  </Stack>
</LayoutDirection>

New components: chat and AI

`ChatLog`, `ChatMessage` and `ChatDivider`

ChatLog is a role="log" region that scrolls itself. It starts at the latest message and keeps new messages in view while the reader is at the bottom. ChatMessage sets from to "me" or "them". groupChatMessages groups runs from one author and adds a ChatDivider at each new day. Messages also take a delivery status, attachments, streaming text and a typing indicator.

See ChatLog.

<script>
  import {
    ChatDivider,
    ChatLog,
    ChatMessage,
    UserAvatar,
  } from "carbon-components-svelte";
</script>

<ChatLog labelText="Conversation with Sam">
  <ChatDivider>Today</ChatDivider>
  <ChatMessage from="them" author="Sam">
    <UserAvatar slot="avatar" size="sm" name="Sam Carter" />
    Hi again! Anything else I can help with?
  </ChatMessage>
  <ChatMessage from="them" author="Sam" continued>
    <UserAvatar slot="avatar" size="sm" name="Sam Carter" />
    I can change the address or the delivery day.
  </ChatMessage>
  <ChatMessage from="me" author="You" status="read">
    Can it come to my office instead?
  </ChatMessage>
  <ChatMessage typing typingText="Sam is typing">
    <UserAvatar slot="avatar" size="sm" name="Sam Carter" />
  </ChatMessage>
</ChatLog>

`ChatButton`

A Button with fully rounded ends, for actions in a chat. quickAction makes a small outlined pill, such as a suggested reply.

See ChatButton.

<script>
  import { ChatButton, Stack } from "carbon-components-svelte";
</script>

<Stack orientation="horizontal" gap={3} wrap="wrap">
  <ChatButton>Primary</ChatButton>
  <ChatButton kind="secondary">Secondary</ChatButton>
  <ChatButton kind="tertiary">Tertiary</ChatButton>
  <ChatButton quickAction>Summarize</ChatButton>
  <ChatButton quickAction>Translate</ChatButton>
</Stack>

`AILabel`

Marks content and fields made by AI. Click the label to open the explanation in the default slot. Fields, selection controls, tags, tiles, cards, data tables, modals and side panels take it in an aiLabel slot.

See AILabel.

<script>
  import { AILabel, Stack, Text } from "carbon-components-svelte";
</script>

<AILabel open>
  <Stack gap={2}>
    <Text type="label-01" color="secondary">AI explained</Text>
    <p>This forecast was generated from the last 90 days of usage across your workspace.</p>
  </Stack>
</AILabel>

New components: pages and layout

`SidePanel`

A docked panel for details, edits or a short flow. The page stays in view. It docks under the UI Shell header and closes on Escape. It can slide in over the page or push it, resize, and step through a multi-step flow.

See SidePanel.

<script>
  import { Button, Select, SelectItem, SidePanel, Stack, TextInput } from "carbon-components-svelte";

  let open = true;
</script>

<SidePanel
  bind:open
  labelText="checkout-api"
  titleText="Edit deployment"
  subtitleText="Changes apply on the next deploy."
>
  <Stack gap={6}>
    <TextInput labelText="Service name" value="checkout-api" />
    <Select labelText="Region" selected="us-east">
      <SelectItem value="us-east" text="US East" />
      <SelectItem value="eu-central" text="EU Central" />
    </Select>
  </Stack>
  <svelte:fragment slot="actions">
    <Button kind="secondary" on:click={() => (open = false)}>Cancel</Button>
    <Button on:click={() => (open = false)}>Save</Button>
  </svelte:fragment>
</SidePanel>

`CssGrid`

The CSS Grid mode of Carbon's 2x grid. CssColumn spans, starts and ends on any grid line at each breakpoint. Set v11's --cds-grid-* properties on any ancestor. It has narrow, condensed and fullWidth variants and a subgrid.

See CssGrid.

<script>
  import { CssColumn, CssGrid, Tile } from "carbon-components-svelte";
</script>

<CssGrid withRowGap>
  <CssColumn sm={4} md={8} lg={16}><Tile>lg: 16</Tile></CssColumn>
  <CssColumn sm={2} md={4} lg={8}><Tile>lg: 8</Tile></CssColumn>
  <CssColumn sm={2} md={4} lg={8}><Tile>lg: 8</Tile></CssColumn>
  <CssColumn sm={4} md={2} lg={4}><Tile>lg: 4</Tile></CssColumn>
  <CssColumn sm={4} md={6} lg={12}><Tile>lg: 12</Tile></CssColumn>
</CssGrid>

`Splitter`

Two resizable panes. Drag the separator or use the arrow keys. min, max and collapsedSize bound the start pane. It nests and runs vertical.

See Splitter.

<script>
  import { Box, Splitter } from "carbon-components-svelte";
</script>

<Box height="12rem" border="subtle">
  <Splitter size={30}>
    <Box slot="start" padding={5}>Services</Box>
    <Box slot="end" padding={5}>billing-api · us-south · 3 replicas</Box>
  </Splitter>
</Box>

`TableOfContents`

Lists the sections of a page as links and highlights the section the reader is on. Group items under headings or nest them.

See TableOfContents.

<script>
  import { TableOfContents, TableOfContentsItem } from "carbon-components-svelte";
</script>

<TableOfContents noScrollSpy selectedId="measures-of-success">
  <TableOfContentsItem href="#overview" text="Overview" />
  <TableOfContentsItem href="#measures-of-success" text="Measures of success" />
  <TableOfContentsItem href="#key-moments" text="Key moments" />
  <TableOfContentsItem href="#tutorials" text="Tutorials" />
</TableOfContents>

`Prose`

Styles plain HTML, such as rendered Markdown, with Carbon type styles, spacing and line length. Import the opt-in prose.css after the theme stylesheet.

See Prose.

<script>
  import "carbon-components-svelte/css/prose.css";
  import { Prose } from "carbon-components-svelte";
</script>

<Prose>
  <h3>Reporting API</h3>
  <p>The reporting API returns usage and billing data for every project, so finance and engineering read the same numbers.</p>
  <ul>
    <li>600 requests per minute, shared by every endpoint.</li>
    <li>13 months of history. <strong>Export</strong> anything you need to keep longer.</li>
  </ul>
  <pre><code>curl -H "Authorization: Bearer $KEY" \
  https://api.example.com/v1/usage</code></pre>
</Prose>

`LazyMount`

Renders its slot once it nears the viewport or the browser is idle. A placeholder holds its space, so the page doesn't shift. All instances share one IntersectionObserver per rootMargin.

See LazyMount.

<LazyMount estimatedHeight={400}>
  <DataTable {headers} {rows} />
</LazyMount>

New components: content and feedback

`Card`

v11's preview Card, built from CardHeader, CardBody, CardFooter and media. It can be clickable, expressive or disabled, and takes an AI label. Its API may change in a minor release.

See Card.

<script>
  import { Box, Button, Card, CardBody, CardFooter, CardHeader, CardTitle } from "carbon-components-svelte";
</script>

<Box maxWidth="20rem">
  <Card>
    <CardHeader>
      <CardTitle>Quarterly report</CardTitle>
    </CardHeader>
    <CardBody>
      Usage grew 12% over the last quarter, led by object storage.
    </CardBody>
    <CardFooter>
      <Button kind="ghost" size="sm">View report</Button>
    </CardFooter>
  </Card>
</Box>

`Callout`

Static guidance next to the content it describes. It stays on the page, has no close button, and screen readers don't announce it. Use an InlineNotification for the result of an action.

See Callout.

<script>
  import { Callout, Stack } from "carbon-components-svelte";
</script>

<Stack gap={5}>
  <Callout
    titleText="Scheduled downtime"
    subtitleText="Billing is read-only on Saturday from 02:00 to 04:00 UTC."
  />
  <Callout
    kind="warning"
    titleText="Quota almost reached"
    subtitleText="This project has used 90% of its storage."
  />
</Stack>

`EmptyState`

Fills a panel, card or table that has nothing to show yet. Give it a pictogram, a title, a line that says why, and the action that fills it. To announce "No results", render it inside a role="status" element that is always on the page.

See EmptyState.

<script>
  import { Button, EmptyState } from "carbon-components-svelte";
  import Add from "carbon-icons-svelte/lib/Add.svelte";
  import Folder from "carbon-pictograms-svelte/lib/Folder.svelte";
</script>

<EmptyState
  titleText="Create your first project"
  subtitleText="Projects hold the files, comments and people for one piece of work."
>
  <Folder slot="illustration" />
  <Button icon={Add}>Create project</Button>
  <Button kind="ghost">Import files</Button>
</EmptyState>

`CopyText`

A value in running text with a compact copy button, for ids and endpoints. The button copies the rendered text when clicked.

See CopyText.

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

<p>Connect to <CopyText>postgres-prod-01.acme.io:5432</CopyText> from inside the VPC.</p>

`Countdown`

Shows the time left on a hold or a session in a role="timer". It announces only the warning and the end. Set running to pause it, or add time while it runs.

See Countdown.

<script>
  import { Countdown, ProgressBar } from "carbon-components-svelte";
</script>

<Countdown seconds={600} let:formatted let:remaining>
  <ProgressBar
    size="sm"
    labelText="Seats held"
    value={remaining}
    max={600}
    valueText={formatted}
    helperText="Check out before the hold ends."
  />
</Countdown>

`Kbd`

Shows a key or a shortcut as key caps. mod is Command on Apple platforms and Ctrl elsewhere. Button, Search, HeaderSearch, MenuItem, OverflowMenuItem and ContextMenuOption can show and bind a shortcut.

See Kbd.

<script>
  import { Kbd, Stack } from "carbon-components-svelte";
</script>

<Stack orientation="horizontal" gap={5} align="center">
  <Kbd shortcut="mod+k" />
  <Kbd shortcut="mod+shift+p" />
  <Kbd shortcut="alt+arrowleft" />
  <Kbd shortcut="escape" />
</Stack>

`TooltipGroup`

Groups tooltip triggers. Once one tooltip is open, moving to the next opens it at once, with no delay or fade. ContentSwitcher, Tabs, ToggleButtonGroup and UserAvatarGroup already group their own tooltips.

See TooltipGroup.

<script>
  import { Button, Stack, TooltipGroup } from "carbon-components-svelte";
  import Copy from "carbon-icons-svelte/lib/Copy.svelte";
  import Edit from "carbon-icons-svelte/lib/Edit.svelte";
  import TrashCan from "carbon-icons-svelte/lib/TrashCan.svelte";
</script>

<TooltipGroup>
  <Stack orientation="horizontal" gap={1}>
    <Button kind="ghost" icon={Edit} iconDescription="Edit" />
    <Button kind="ghost" icon={Copy} iconDescription="Duplicate" />
    <Button kind="ghost" icon={TrashCan} iconDescription="Delete" />
  </Stack>
</TooltipGroup>

New components: forms and flows

`InputGroup`

Attaches a button or a second field to an input, with one shared message below. The button matches the field's height at every size.

See InputGroup.

<script>
  import { Button, InputGroup, TextInput } from "carbon-components-svelte";
</script>

<InputGroup>
  <TextInput labelText="Promo code" placeholder="WELCOME10" />
  <Button kind="tertiary">Apply</Button>
</InputGroup>

`InlineEdit`

Edit text in place. Click or focus to edit. Enter saves, and Escape reverts. Blur saves a real change. It fits in DataTable cells.

See InlineEdit.

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

<InlineEdit
  labelText="Project name"
  editLabel="Edit project name"
  saveLabel="Save"
  cancelLabel="Cancel"
  value="Q3 roadmap"
/>

`TagInput`

Turns typed or pasted text into dismissible tags. Enter or a comma adds a tag. Bind value to read the tags as strings.

See TagInput.

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

  let value = ["Svelte", "TypeScript", "Carbon"];
</script>

<TagInput bind:value labelText="Topics" placeholder="Add a topic" />

`StarRating`

Rate from one to five stars, or show an average. Each star is a radio button, so arrow keys move the rating.

See StarRating.

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

<StarRating legendText="Overall rating" value={4} />

`Stepper`

Walks through a multi-step flow with progress, one step at a time, Back and Continue, and a final submit. validate keeps the user on a step until its fields are valid.

See Stepper.

<script>
  import { Stack, Stepper, TextInput } from "carbon-components-svelte";
</script>

<Stepper steps={["Details", "Plan", "Review"]} submitText="Create account" let:currentIndex>
  {#if currentIndex === 0}
    <Stack gap={5}>
      <TextInput labelText="Name" />
      <TextInput labelText="Email" />
    </Stack>
  {:else if currentIndex === 1}
    <p>Free plan: three projects and five collaborators.</p>
  {:else}
    <p>Check your details, then create the account.</p>
  {/if}
</Stepper>

`ConfirmModal`

A Modal preset for are-you-sure decisions, in danger, warning and info kinds. confirmationPhrase asks the user to type a phrase before the confirm button works. confirm can return a promise, and the modal waits for it.

See ConfirmModal.

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

  let open = true;
</script>

<ConfirmModal bind:open title="Delete this file?" confirmText="Delete">
  <p>This action cannot be undone.</p>
</ConfirmModal>

What's Changed

Breaking changes

feat!: remove the light prop in favor of Layer by @metonym in d5d441f
feat!: use Carbon v11 type style names and drop v10 tokens by @metonym in a8f8401
feat(copy-input)!: rename selectOnFocus to selectTextOnFocus by @metonym in f7e0784
feat(date-picker)!: expose a documented calendar API on bind:calendar by @metonym in 799b8b4
feat(date-picker)!: give the calendar dialog, grid, and button semantics by @metonym in 27e0f91
feat(inline-loading)!: hold a delayed spinner for a minimum time by @metonym in 4081576
feat(loading)!: hold a delayed spinner for a minimum time by @metonym in 355b13a
feat(modal)!: start a Layer in modals, as in v11 by @metonym in 993f8de
feat(theme)!: type the tokens prop by Carbon token name by @metonym in 5bbe4d6
feat(theme)!: use Carbon v11 token values by @metonym in be16284
fix(box, scroll-gradient)!: paint layer-03 with the v11 layer-03 token by @metonym in d53f156
fix(content-switcher)!: read the v11 low contrast tokens by @metonym in 82e69b6
fix(data-table)!: draw zebra stripes with layer-accent, as in v11 by @metonym in 73a6fdb
fix(data-table)!: type a computed column, whose key isn't a row's by @metonym in 218cc29
fix(modal)!: keep transactional modals open on an outside click, as in v11 by @metonym in 5ccb5db
fix(modal)!: use an h2 heading, as in v11 by @metonym in 8e099bb
fix(notification)!: default to role="status" and name the status icon, as in v11 by @metonym in 7470ea8
fix(recursive-list)!: type nodes by the node type, children included by @metonym in 322df16
fix(search)!: default to the 40px md size, as in v11 by @metonym in 8ede5de
fix(tag)!: drop the outer margin, as in v11 by @metonym in a7de3c2
fix(theme)!: darken Gray 80 zebra rows and fields for text contrast by @metonym in 9e2dbd7
fix(theme)!: give Gray 80 dark tags by @metonym in 131efc0
fix(theme)!: make Gray 80's state overlays translucent by @metonym in 95f05a0
fix(theme)!: step Gray 80 layer states like Gray 90's by @metonym in c8d1f26
fix(theme)!: use Carbon v11 values for component tokens by @metonym in f5cb278
fix(types)!: type group contexts as the undefined they can hold by @metonym in 47ba526
fix(types)!: type the empty values Select and LinkDownload pass on by @metonym in e506bb4
perf(css): write inline offsets as logical properties (-30 kB) by @metonym in aa6df37
refactor(css)!: read Carbon v11 color tokens by @metonym in 25c1ba6
refactor(date-picker)!: remove flatpickrProps, plugins, and hooks by @metonym in 0553ab4
refactor(date-picker)!: replace flatpickr with a built-in calendar engine by @metonym in ea2518b
refactor(date-picker)!: use Carbon class names for the calendar by @metonym in 88a9f0f

Features

feat(accordion): derive item ids from an id prop by @metonym in f6bd844
feat(action-set): fill with the layer color and warn about misused actions by @metonym in cebd80e
feat(ai-label): add AILabel and a decorator slot on fields by @metonym in 4cca5ed
feat(ai-label): add decorator slots to DataTable and modals by @metonym in 9f39266
feat(ai-label): add a decorator slot to selection controls, tags, and tiles by @metonym in 54b3881
feat(big-number): add totalSeparatorText by @metonym in c8b9bc8
feat(big-number): follow Carbon v11's type scale and add an action slot by @metonym in a47de92
feat(box): add logical start and end padding and margin by @metonym in e633162
feat(box): add position "absolute" and display "inline-block" and "none" by @metonym in 0c55495
feat(button): add iconOnly to choose icon-only explicitly by @metonym in f8e08a7
feat(button): add loadingDelay by @metonym in e9a12dc
feat(button): add tooltipAlign to Button by @metonym in cc86100
feat(button): show and bind a keyboard shortcut by @metonym in 711a80b
feat(button): take the height of a sized Form by @metonym in 7b5d949
feat(callout): add Callout for static, non-dismissible notices by @metonym in 23324ca
feat(card): add Card component by @metonym in 4000c76
feat(card): add labelChildren slot to CardTitle by @metonym in 987eb8a
feat(carousel): derive the viewport id from an id prop by @metonym in 7b70371
feat(chat): add ChatLog, ChatMessage and ChatDivider by @metonym in cbf9677
feat(chat-button): add ChatButton and ChatButtonSkeleton by @metonym in d64ca99
feat(checkbox): add noMargin to omit the stack margins by @metonym in 4109106
feat(checkbox-group): add orientation to lay checkboxes out in a row by @metonym in 094537a
feat(clickable-tile): add icon prop by @metonym in 75dfdc9
feat(code-snippet): add tooltipAlign to CodeSnippet by @metonym in 5230d77
feat(code-snippet): size CodeSnippetSkeleton by its code's rows by @metonym in 77e5305
feat(code-snippet, file-uploader): add fullWidth to fill the container by @metonym in 3dd722d
feat(combo-box): add iconEnd slot by @metonym in b71bd29
feat(combo-box): group items under headers by @metonym in a575ee4
feat(combo-box): show a visible empty state when the filter matches nothing by @metonym in 6b0fdcb
feat(combo-button): add tooltipAlign to ComboButton by @metonym in d830ed3
feat(composed-modal): add lazy to build the content on first open by @metonym in a08359e
feat(composed-modal): derive header and body ids from an id prop by @metonym in 4564843
feat(confirm-modal): add ConfirmModal by @metonym in d1cb9d2
feat(contained-list): add selected for the current item of a master list by @metonym in 749c954
feat(content-switcher): add autoWidth to size switches to their labels by @metonym in b4ebc90
feat(content-switcher): add ContentSwitcherSkeleton by @metonym in f3c08c1
feat(context-menu): add shortcutChildren slot to ContextMenuOption by @metonym in 02805fb
feat(copy-button): add tooltipAlign to CopyButton by @metonym in 150e3a4
feat(copy-input): add maskedValue to show a mask and copy the value by @metonym in 7c48972
feat(copy-input): add tooltipAlign to CopyInput by @metonym in a2d7f4a
feat(copy-text): add CopyText by @metonym in bd001e5
feat(copy-text): add tooltipAlign to CopyText by @metonym in 5f1eeea
feat(countdown): add Countdown for the time left on a hold or session by @metonym in 59f1a6a
feat(css): add the Carbon v11 numbered layer and border tokens by @metonym in 67d7947
feat(css): declare the theme's tokens on :root in single-theme sheets by @metonym in 9e4a7d2
feat(css): mirror forward and back icons in RTL by @metonym in 535f9ee
feat(data-table): add cellClass for per-cell classes by @metonym in aba7949
feat(data-table): add translateWithId for the expand and select controls by @metonym in 8425199
feat(data-table): announce the sort result from a status region by @metonym in 3d94b0c
feat(data-table): derive its internal ids from an id prop by @metonym in 1756ca1
feat(data-table): give an AI column's cells the AI gradient by @metonym in e4e395d
feat(data-table): name an empty header with its value by @metonym in 52cefe7
feat(date-picker): add firstDayOfWeek and weekNumbers props by @metonym in cb9467c
feat(date-picker): add fullWidth to fill the parent's width by @metonym in 8b657b1
feat(date-picker): add a view event with the dates on show by @metonym in b1c101a
feat(date-picker): add a quarter picker by @metonym in 6e42940
feat(date-picker): add calendar keys and announce the shown month by @metonym in 879ab24
feat(date-picker): add DateCalendar, a calendar rendered by Svelte by @metonym in fe220cd
feat(date-picker): add props for every calendar option by @metonym in f27395d
feat(date-picker): take datePickerType on DatePickerSkeleton by @metonym in 01bac9d
feat(description-list): add a summary layout and a total item by @metonym in 7f30251
feat(description-list): add a term slot by @metonym in 8b07c80
feat(description-list): add divider to rule off an item by @metonym in 716dcb0
feat(disclosure): derive the content id from an id prop by @metonym in 883240d
feat(dropdown): add iconEnd slot by @metonym in 5b08df6
feat(dropdown): group items under headers by @metonym in 8433732
feat(dropdown): show an empty state when there are no items by @metonym in cb2a90e
feat(empty-state): add EmptyState for panels with nothing to show by @metonym in c9e9e9e
feat(expandable-tile): dispatch a cancelable toggle event by @metonym in bb7a8b8
feat(expandable-tile): forward keydown by @metonym in f2a6532
feat(file-uploader): add a capture prop to open the camera by @metonym in 9f608a6
feat(file-uploader): add a directory prop to select a folder by @metonym in 1703860
feat(file-uploader): add fileCountText to FileUploaderButton by @metonym in 754ed7f
feat(file-uploader): add FileDownloadItem for files to download by @metonym in 68a9c4d
feat(file-uploader): add minFileSize to reject empty files by @metonym in def2d8a
feat(file-uploader): add tooltipAlign to FileUploaderButton by @metonym in 1996a8a
feat(file-uploader): derive the file input id from an id prop by @metonym in 466ebe1
feat(file-uploader): inherit the button size from Form by @metonym in e466e01
feat(file-uploader): link the description to the add button by @metonym in cc19b66
feat(file-uploader): show the full name of a truncated file by @metonym in 7be4df8
feat(form): add size that every field inherits by @metonym in 39c8daf
feat(form-group): derive the message id from an id prop by @metonym in 7879fe7
feat(form-group): describe the fieldset with nested form parts by @metonym in ebba19b
feat(form-helper-text): add FormHelperText component by @metonym in 98321a2
feat(form-item): associate child labels with a control by @metonym in bf2364f
feat(form-item): expose label id, form size, and fluid slot props by @metonym in a15e47d
feat(form-label): add for prop by @metonym in c86a152
feat(form-requirement): add FormRequirement component by @metonym in 330ff44
feat(grid): add CssGrid and CssColumn, v11's display:grid layout by @metonym in c0f21d3
feat(grid): align a CssColumn on its own by @metonym in accb74b
feat(header-nav-menu): add textChildren slot by @metonym in c2be34d
feat(header-search): derive its child ids from an id prop by @metonym in b805ae6
feat(header-search): show and bind a keyboard shortcut by @metonym in d6e6760
feat(heading): forward rest props from Section to its element by @metonym in 6a00ac8
feat(icon-indicator): add hideLabel, and keep the icon's size by @metonym in 6c6151f
feat(icon-indicator): read the v11 status tokens by @metonym in 52d8903
feat(image-loader): add lazy to load images near the viewport by @metonym in 4b03a78
feat(inline-edit): add InlineEdit component by @metonym in f980832
feat(inline-loading): add size="sm" for a status in small text by @metonym in 77a0792
feat(inline-notification): add fullWidth to fill the parent by @metonym in f1e42b4
feat(input-group): add InputGroup to attach buttons and fields to an input by @metonym in a31ee34
feat(interstitial-screen): add stepLabelText for untitled steps by @metonym in 902e553
feat(interstitial-screen): add stepText and statusText to the header by @metonym in 9434564
feat(interstitial-screen): follow Carbon v11's header, footer and headings by @metonym in af2fe01
feat(kbd): add Kbd by @metonym in d2bc15f
feat(keyboard-shortcut): add the shortcut helpers by @metonym in 032c2cd
feat(layer): add Layer and read contextual tokens in components by @metonym in 0df3208
feat(layout-direction): set the writing direction for part of a page by @metonym in 3a65a95
feat(lazy-mount): add LazyMount to defer rendering until near the viewport by @metonym in 569b71c
feat(link): expose link color custom properties by @metonym in b9d9fc4
feat(list-box): add a loading state to the menu by @metonym in eaf7b5e
feat(list-box): dispatch an open event from Dropdown, ComboBox, and MultiSelect by @metonym in 5c14862
feat(list-box): keep options in view during fast scrolls by @metonym in 148c73a
feat(list-box): move the highlight a page with PageUp/PageDown by @metonym in a19af68
feat(list-box): show the invalid state for an empty required list box by @metonym in a758f16
feat(list-box): support required on Dropdown, ComboBox, and MultiSelect by @metonym in d471ea9
feat(menu): add shortcutChildren slot to MenuItem by @metonym in cf09de9
feat(menu): show a keyboard shortcut on menu items by @metonym in cea4b80
feat(meter): add locale for the generated number text by @metonym in c48fdbd
feat(meter): derive helper, thresholds, and status ids from id by @metonym in eedf91a
feat(modal): add lazy to build the content on first open by @metonym in f718bea
feat(modal): add labelChildren slot by @metonym in 697c7ac
feat(modal): add loadingStatus by @metonym in 5cf3214
feat(modal): show the close button tooltip by @metonym in f67d2a6
feat(multi-select): add selectionDisplay="tags" by @metonym in 28e9475
feat(multi-select): add selectionCountText by @metonym in 358640d
feat(multi-select): open collapsed tags in a popover by @metonym in 3dbfd21
feat(multi-select): show an empty state when there are no items by @metonym in 97172c3
feat(notification): add actionable mode with alertdialog focus handling by @metonym in 073b9da
feat(notification-queue): add an action to queued toasts by @metonym in 50fae4b
feat(notification-queue): pause timers while the queue has focus or hover by @metonym in 0887b26
feat(number-input): add scrubbable to change the value by dragging the label by @metonym in 569ff44
feat(number-input): repeat a held stepper button by @metonym in 725c83c
feat(overflow-menu): add iconEnd slot and prop to OverflowMenuItem by @metonym in 1ae6f1f
feat(overflow-menu): add tooltipAlign to OverflowMenu by @metonym in f172159
feat(pagination): add pageInputType input mode by @metonym in 2013cfb
feat(pagination-nav): add pageText, pageRangeText and pageSelectLabelText by @metonym in bf3edad
feat(password-input): add tooltipAlign to PasswordInput by @metonym in 6fe4c34
feat(password-input): join tooltip groups by @metonym in 48b3569
feat(popover): accept v11 align names by @metonym in e674ad3
feat(popover): add dropShadow and border, and use the v11 caret by @metonym in 9f5079d
feat(profile-menu-detail): derive the label id from an id prop by @metonym in fe328e8
feat(progress-bar): accept Carbon v11's small and big sizes by @metonym in c491f95
feat(progress-bar): derive helper and status ids from id by @metonym in be57176
feat(progress-indicator): add statusText for complete and invalid steps by @metonym in 549b6e9
feat(prose): add deferOffscreen to skip rendering offscreen code blocks by @metonym in 426bd8e
feat(prose): add Prose by @metonym in 64993ab
feat(radio-tile): add ref prop by @metonym in 8a6a51c
feat(range-slider): add markSnapDistance for soft snapping to marks by @metonym in c7b52f1
feat(range-slider): add snapToMarks for snapping to configured marks by @metonym in 414b66b
feat(range-slider): add trackDrag to move or brush the whole range by @metonym in 13ff0b1
feat(range-slider): announce mark labels in aria-valuetext by @metonym in a2980a6
feat(recursive-list): add a nested prop by @metonym in 16562cc
feat(relative-time): add timeZone for the absolute title by @metonym in 95aa0bf
feat(relative-time): add minUnit and absoluteAfter for chat-style times by @metonym in bb9e564
feat(search): add loadingDescription by @metonym in 6d6b367
feat(search): show and bind a keyboard shortcut by @metonym in c029119
feat(selectable-tag): add lg size by @metonym in 74c8d25
feat(selectable-tag): inherit size and overflow from a parent TagSet by @metonym in 0b2b160
feat(selectable-tile): forward the change event by @metonym in 0fa37ab
feat(selectable-tile): type value with a Value generic by @metonym in 2019cb6
feat(selectable-tile-group): add change event by @metonym in cd79bb1
feat(selectable-tile-group): warn when tiles share a value by @metonym in 1b7d8c8
feat(shape-indicator): read the v11 status tokens by @metonym in 7f37ff1
feat(side-panel): add SidePanel component by @metonym in 3c0bd90
feat(skeleton): add ai variant by @metonym in 7d23b16
feat(skeleton-text, file-uploader-item): add noMargin by @metonym in 5554601
feat(slider): add hideRangeLabels to hide the min and max labels by @metonym in adb6d2a
feat(slider): add markSnapDistance for soft snapping to marks by @metonym in fab20f3
feat(slider): announce mark labels in aria-valuetext by @metonym in e3b416f
feat(splitter): accept pixel lengths for min and max by @metonym in 5e480ca
feat(splitter): add a bindable collapsed prop by @metonym in eff8e82
feat(splitter): add collapsedSize to collapse below min by @metonym in 157453e
feat(splitter): add Splitter for resizable panes by @metonym in 241c94e
feat(star-rating): add StarRating to rate with stars or show a rating by @metonym in ed55633
feat(stepper): add Stepper for multi-step flows by @metonym in a605c9f
feat(stepper): add validate:error for a throwing or rejecting validate by @metonym in 27700d1
feat(structured-list): accept a name for the radio inputs by @metonym in 8880e20
feat(syntax): add Carbon syntax token stylesheets by @metonym in a558dd1
feat(syntax): add precision to the highlighter by @metonym in 30a6541
feat(syntax): add the syntax subpath highlighter by @metonym in 9f8b56b
feat(syntax): cover Svelte 4 and 5 syntax in the highlighter by @metonym in 9f7dde0
feat(table-container): derive the title and description ids from id by @metonym in 68ca991
feat(table-of-contents): add TableOfContents and TableOfContentsItem by @metonym in f78cf6f
feat(tabs): add orientation prop to TabsVertical by @metonym in 173d9f6
feat(tabs): add dismissText for dismiss button names by @metonym in 34e23e3
feat(tabs): add navigation to render tabs as page links by @metonym in cad780d
feat(tabs): add tooltipAlign to Tab by @metonym in 6bc3277
feat(tag): add value to identify tags in TagSet events by @metonym in d8c9719
feat(tag): add an xs size for 24px fields by @metonym in eb48a61
feat(tag): add OperationalTag by @metonym in ba7d638
feat(tag-input): add TagInput by @metonym in 52c3f57
feat(tag-set): add navigation="roving" for a single tab stop by @metonym in 505cecc
feat(tag-set): add overflowMode="popover" by @metonym in c3ae461
feat(tag-set): add View all and overflowType by @metonym in 7dbbbef
feat(tag-set): derive the overflow tooltip id from an id prop by @metonym in 66400fd
feat(tag-set): name the "+N" indicator with overflowLabel by @metonym in fa77c0e
feat(text-area): add counterMode to count words by @metonym in 1e6a4b1
feat(theme): add a CSS-only system theme by @metonym in cfe2ddc
feat(theme): add createTheme by @metonym in 5bce03c
feat(theme): add system option that follows prefers-color-scheme by @metonym in 19c7e4d
feat(theme): add the v11 tag-border tokens by @metonym in 0706468
feat(theme): add themeScript to apply the theme before first paint by @metonym in 99c721a
feat(theme): declare the remaining v11 component tokens by @metonym in 15c6d3a
feat(theme-zone): add ThemeZone to theme part of a page by @metonym in fd20519
feat(tile): add ref prop by @metonym in e9bf6dd
feat(tile): add rounded corners by @metonym in d6111b3
feat(tile): add size="sm" for compact tiles by @metonym in e24c5ab
feat(tile): show the v11 selection checkbox by @metonym in c2baf5f
feat(tile-group): add hideLegend prop by @metonym in 5a1b667
feat(toast-notification): add actions slot by @metonym in c1e9051
feat(toggle): add invalid, invalidText and helperText by @metonym in 73c56ec
feat(toggle-button-group): add grid for an even grid of buttons by @metonym in 5badd19
feat(toggle-button-group): add tooltipAlign to ToggleButton by @metonym in e3b84ea
feat(toggletip): add labelChildren slot by @metonym in 57eee05
feat(toggletip): derive the content id from an id prop by @metonym in 16af5af
feat(tokens): export theme, type, and spacing tokens as data by @metonym in e687834
feat(toolbar-search): add deferFilter to yield before filtering rows by @metonym in ed461d9
feat(tooltip): add triggerChildren slot by @metonym in 03909f4
feat(tooltip): join tooltip groups by @metonym in aa5288a
feat(tooltip-definition): join tooltip groups by @metonym in f2c6179
feat(tooltip-group): add TooltipGroup for instant tooltip handoff by @metonym in 4553c13
feat(tooltip-group): skip the fade-in on instant handoff and focus by @metonym in b12f22a
feat(tooltip-icon): add tooltipChildren slot by @metonym in 5b92233
feat(tooltip-icon): join tooltip groups by @metonym in a8c5ce4
feat(tree-view): add TreeViewSkeleton by @metonym in 00dce7c
feat(tree-view): derive its internal ids from an id prop by @metonym in b4df493
feat(truncate): add tooltipAlign to Truncate by @metonym in 59e1178
feat(truncate): reveal clipped text with a tooltip or expand toggle by @metonym in eb88e4e
feat(ui-shell): add icon and text slots to HeaderNavMenu trigger by @metonym in 7f9def6
feat(ui-shell): add text, icon prop and slot to HeaderPanelLink by @metonym in 2e2e223
feat(ui-shell): add arrow, Home, and End navigation to HeaderPanelLinks by @metonym in d511977
feat(ui-shell): add first-letter typeahead to HeaderNav and HeaderNavMenu by @metonym in 7d04cf9
feat(ui-shell): add HeaderPanelGroup for labelled header panel link groups by @metonym in bf2cdda
feat(ui-shell): add menubar keyboard navigation to HeaderNav by @metonym in a8c108d
feat(ui-shell): add resizeEnterDelayMs to SideNav by @metonym in d9c6582
feat(ui-shell): add vertical menubar keyboard navigation to HeaderSideNavItems by @metonym in 3bebd59
feat(ui-shell): close HeaderSwitcher when a ProfileMenuItem is activated by @metonym in 42caaa5
feat(ui-shell): close ProfileMenu when a ProfileMenuItem is activated by @metonym in 6fb54d2
feat(ui-shell): close the HeaderAction panel when a HeaderPanelLink is activated by @metonym in 230a42e
feat(ui-shell): delay the rail's hover expansion by @metonym in 9cd474c
feat(ui-shell): hide header nav at a custom expansion breakpoint by @metonym in b42c7ad
feat(ui-shell): mark collapsed SideNavMenu holding the current page by @metonym in abdbec6
feat(user-avatar): add a strong shade for every fill by @metonym in e44a701
feat(user-avatar): add status badge by @metonym in dea6f42
feat(user-avatar): derive the tooltip id from an id prop by @metonym in 3e32a75
feat(utils): add createLoadingDelay and delayedLoading by @metonym in 457ead3
feat(utils): add splitAriaNaming by @metonym in 985c804
feat(utils): export dismiss, rovingFocus, trapFocus, preserveFocusSelection, formReset, floatingPosition by @metonym in 9cb4df1
feat(virtual-list): keep rows in view during fast scrolls by @metonym in fb19bc1
feat(virtual-list): render items straight into a parent list with spacerTag by @metonym in 1955adf
feat(virtualize): keep the window ahead of fast scrolls by @metonym in 78e7292
feat: accept v11 size names as aliases by @metonym in 13f7de5
feat: add size to field skeletons by @metonym in 39bdf21
feat: add xs size to Button, FileUploader, and Slider by @metonym in c00a14f
feat: add xs size to NumberInput, DatePickerInput, TimePicker, and CopyInput by @metonym in 51879e1
feat: add loadingDelay to list boxes, Search and SearchMenu by @metonym in 8e8b778

Performance

perf(checkbox): build the validation message box only when shown by @metonym in 15af5ae
perf(clickable-tile): render a plain anchor instead of a Link by @metonym in 3d02df9
perf(code-snippet): measure multi-line snippets on the shared observer by @metonym in dc009aa
perf(combo-box): build the filtered-index map only when an option needs it by @metonym in 6aac3ee
perf(combo-box): reuse items instead of filtering for the default shouldFilterItem by @metonym in 4ecddd5
perf(combo-box): skip rebuilding the option list per keystroke with the default shouldFilterItem by @metonym in 0fde47c
perf(context-menu): listen for the page's context menu in the root only by @metonym in 1f48265
perf(css): drop the side-nav link text child combinator by @metonym in 7c44f21
perf(data-table): render body rows as plain tr and td elements by @metonym in 8a7d5db
perf(data-table): render each body cell as one td by @metonym in f30f082
perf(data-table): render row selection inputs as plain elements by @metonym in 7845a02
perf(data-table): sort without re-rendering every row by @metonym in d97e8bd
perf(date-picker): build a popup calendar on first open by @metonym in 0b0a6e5
perf(date-picker): build the calendar as the pointer reaches an input by @metonym in c3e3573
perf(date-picker): don't re-apply a range the calendar just picked by @metonym in fc0ddd7
perf(date-picker): jump to the range start only when it's out of view by @metonym in 54a72f9
perf(date-picker): redraw the calendar only for options that change it by @metonym in d619ba5
perf(date-picker): skip Intl when ordering month and year for English by @metonym in 8c4cb1d
perf(date-picker): update the days in place on a pick by @metonym in 89f9a17
perf(expandable-tile): measure on the shared observer by @metonym in 185f94f
perf(expandable-tile): measure the fallback height once on mount by @metonym in 8e791fe
perf(floating-portal): reposition on floating content resize via the shared observer by @metonym in 65a8aa0
perf(keyboard-shortcut): tree-shake formatShortcut's key labels by @metonym in 491fbea
perf(lazy-mount): mount idle content one idle period at a time by @metonym in 12eb47d
perf(multi-select): render option checkboxes as plain elements by @metonym in 9133250
perf(progress-bar): slide the indeterminate segment on the compositor by @metonym in 4ec4290
perf(recursive-list): render each node as a plain li by @metonym in bc3f24d
perf(scroll-gradient): measure scrollability on the shared observer by @metonym in 3a76fb4
perf(selectable-tile-group): notify tiles once per toggle by @metonym in e49be02
perf(skeleton): run the shimmer on the compositor by @metonym in 8b48552
perf(table-of-contents): observe the nav on the shared observer by @metonym in e204bd3
perf(tabs): measure overflow on the shared observer by @metonym in ea76114
perf(tag-set): build the overflow popover's tags on first open by @metonym in a885295
perf(tag-set): measure overflow on the shared observer by @metonym in b98eb35
perf(tag-set): register tags without re-sorting the whole list by @metonym in e0d74bf
perf(tag-set): skip the empty measure on mount by @metonym in 8a36e7b
perf(text-area): observe width changes on the shared observer by @metonym in 03a0872
perf(text-area): resize growing fields together in one frame by @metonym in f2b13e5
perf(tree-view): measure a relative container height on the shared observer by @metonym in be2924e
perf(ui-shell): share the theme blocks with the classic shell by @metonym in 8c4373e
perf(utils): build the grapheme segmenter on first use by @metonym in ff121ef
perf(utils): skip Intl.Segmenter for Latin initials by @metonym in adb9742

Bug fixes

928 bug fixes. They don't fit in a release body, so they're listed in the CHANGELOG.

carbon-design-system/carbon-components-svelte v0.114.0 on GitHub

Breaking changes

Changes without a breaking marker

Carbon v11

DatePicker: a built-in calendar

Right to left

New components: chat and AI

ChatLog, ChatMessage and ChatDivider

ChatButton

AILabel

New components: pages and layout

SidePanel

CssGrid

Splitter

TableOfContents

Prose

LazyMount

New components: content and feedback

Card

Callout

EmptyState

CopyText

Countdown

Kbd

TooltipGroup

New components: forms and flows

InputGroup

InlineEdit

TagInput

StarRating

Stepper

ConfirmModal

More in this release

What's Changed

Breaking changes

Features

Performance

Bug fixes

carbon-design-system/carbon-components-svelte v0.114.0
on GitHub

`DatePicker`: a built-in calendar

`ChatLog`, `ChatMessage` and `ChatDivider`

`ChatButton`

`AILabel`

`SidePanel`

`CssGrid`

`Splitter`

`TableOfContents`

`Prose`

`LazyMount`

`Card`

`Callout`

`EmptyState`

`CopyText`

`Countdown`

`Kbd`

`TooltipGroup`

`InputGroup`

`InlineEdit`

`TagInput`

`StarRating`

`Stepper`

`ConfirmModal`