@marigold/components

18.1.0 (Released on Aug 27, 2026)

Minor Changes

• 1dfe461: feat(DST-1489): add non-form interactive list component

  Adds <ListView> and <ListView.Item>, a non-form list built on React Aria's GridList/GridListItem for rows the user operates in place — dismissing with a <Button>, opening a per-row <ActionMenu>, or following a link — without leaving the page. Unlike <SelectList>/<Select>/<ListBox>, <ListView> has no selection, no hidden input, and never becomes a submitted form value.

  A row is a named-area grid — 'label actions' 'description actions' — so every region names the cell it wants instead of counting columns and rows. Row content is authored with Marigold's slot-aware components (<TextValue>, <Description>, <Title>), and each of them claims its cell through slot context, so text still lands correctly when it's wrapped in a fragment, behind memo(), or inside a consumer's own component. A bare string child is wrapped as the row's text value; to emphasise part of a line, nest <Text as="span"> inside <TextValue>/<Description>. A row carries one <Description> — it takes inline markup, so several facts go on one line.

  Trailing controls claim their cell through Marigold's ButtonContext and inherit the row's ghost cascade, the same mechanism <Panel.Header> and <SelectList.Option> use. A row with more than one control must wrap them in a <ButtonGroup>: each control reads the same context and would otherwise be placed in the same cell. A dev-only warning catches that at authoring time. The trailing cell takes Button-family controls only; trailing badges, pills or timestamps have no slot yet.

  <ListView.Item> forces any nested <Title> to render as a <span> instead of a real heading, so a list of rows never emits one document heading per row.

  The list is flat (divider lines only) and draws no surface of its own, the way <Table> does — a framed list nested in a container that already draws a surface is a ring inside a ring. A standalone framed list is <Card><ListView /></Card>.

  This closes the gap between <List> (presentational, no roles), <ListBox> (selection only — forbids focusable controls inside a row), <SelectList>/<Select> (form fields), <Table> (tabular), and <Menu> (commands that close on activation). The motivating consumer is the Popover notifications panel (DST-1485), and the docs cover a second must-support scenario: a resource list with a per-row action menu.

  v1 is intentionally minimal: no selection, no bulk-action bar, no async loading, no drag-and-drop, and no leading media. Leading icons and images need slot-aware icon/image components so placement doesn't depend on authoring order, which is tracked separately along with the rest of the follow-ups (selection ships together with a bulk-action bar, building on DST-1487).

  Documentation

  New /components/collection/listview docs page: anatomy, appearance, a "which list?" decision guide, the must-support demos, accessibility notes (including the <Title>-as-span caveat), and cross-links to <List>, <ListBox>, <SelectList>, <Table>, and <Menu>.

• 1dfe461: feat(DST-1489): ListView is flat, and aligns like Table and Accordion inside a bled container.

  What changed:

  • The list ships one variant. default is the flat list (divider lines only) and there is no framed variant — the old variant="plain" is gone, since it is what default now does.
  • Row padding is sourced from --bleed-px (via --listview-item-px) on the base rather than per variant. That is the custom property a bled Panel.Content / Panel.CollapsibleContent / Drawer.Content publishes; it falls back to the standalone row padding (--spacing-stretch-regular-x) when unset.

  Why:

  A framed list was what a consumer got without asking, and it collides with anything that draws its own surface — a Card, a Panel, a docs preview — as a ring inside a ring 8px apart. Every ListView in the repo lives inside such a container, so the frame had no consumer of its own; Table answers the same shape by drawing no frame at all and leaving the surface to its container. A standalone framed list is <Card><ListView /></Card>.

  Binding the bleed to a variant had the same problem from the other side: <Table> and <Accordion> adopt --bleed-px unconditionally, so both align inside a bled Panel with no opt-in, while <ListView> needed two knobs to do the same thing.

• ce2720e: feat(Table): expandable rows for grouped records

  <Table> can now nest rows, so records that belong together (a settlement run and its individual clearings, an order and its line items) share one table instead of being faked with a button and a menu. Set treeColumn to the id of the column that carries the hierarchy and nest <Table.Row> inside <Table.Row>; use the new <Table.ExpandableRows> when the nested rows come from data, and mark a row expandable when they are fetched only once it is opened. Nested rows stay real table rows, so their values line up under the same headers and each one carries its own actions.

  The tree column renders the expand control itself, reusing the caret and morph animation from <Accordion>. The caret starts where the column's values start: its hit target is wider than the caret and hangs back into the cell's edge padding (--tree-caret-inset), so the ghost button's own whitespace is the gutter rather than something added to it. Behind it every row reserves that gutter, so a group row and a childless row at the same level start their value at the same x whether or not there is a control to show. Levels below the root indent by one gutter (--tree-indent), so a nested row's caret starts where its parent's value starts, and the column's own header label takes the same gutter, so it sits above the values it heads. Containment is carried by the children rather than the parent: nested rows share a filled band across the full row, so what belongs to a group is legible in the leading drag and selection columns too, which don't indent. Expansion is collapsed by default and can be controlled with expandedKeys / defaultExpandedKeys / onExpandedChange.

  Drop indicators are level-aware: the insertion line starts at the x of the level the row would land at, so a reorder inside an expanded group reads as landing in that group, while a root-level drop still spans the row. Moving a row from one level to another is not supported.

  The 32px control keeps that hit target without setting row height: a negative block margin cancels the surplus over the line box, so a group row is exactly as tall as a leaf row and the size variant's cell padding stays the only thing that decides — 33 / 41 / 53px for compact / default / spacious.

  New theme keys treeIndent and expandButton. The band is foreground/8, which holds ~1.17:1 whether the rows sit on surface, on background or inside a muted table, and yields to the hover wash so hovering still reads. admin and master rows keep their access colour at every level — who may see a row outranks where it sits in the tree.

  Inline editing composes with it: Table.EditableCell renders the tree column's gutter too, so a row keeps its expand control even when that cell is the editable one. When the edited value lives outside the row items, pass dependencies to Table.ExpandableRows as well as to Table.Body. Selection checkboxes, drag handles and the compact / default / spacious paddings all keep working alongside the tree column, and the tree column still takes its edge padding from a Panel's bleed contract.

  Selection works on grouped rows but does not cascade: each row selects on its own, and a group row shows no partial state while only some of its children are selected. Cascading selection is not part of this release.

  Potentially breaking for opted-in tables: setting treeColumn changes the table's accessibility role from grid to treegrid, which is what makes screen readers announce expanded state and nesting level. Tests asserting getByRole('grid') on such a table need to become getByRole('treegrid'). Tables that don't set treeColumn are unaffected.

  Collapsed child rows are deliberately not rendered, so searching or deep-linking to a nested row means expanding its ancestors first. Moving focus to a specific row is not supported yet, which is tracked in DST-1713. Sorting doesn't reorder levels for you either, so sort each level in your own data, and there is no expand all control, so set expandedKeys to every group's key when you need one.

Patch Changes

• 17f9158: fix(DST-1675): treat collapsed as axis-less when resolving inset padding

  resolveInsetAxes appended an axis suffix to every non-numeric inset token, including collapsed — the one token where an axis split is meaningless, since it means "no spacing" on both axes. So <Panel p="collapsed"> resolved to var(--spacing-collapsed-x) rather than var(--spacing-collapsed).

  That variable went undeclared until it was added to @marigold/theme-rui, so the declaration was invalid at computed-value time and padding fell back to its initial value of 0 — the right answer for the wrong reason. The cost was that every theme implementing this API had to ship three variables that all mean 0 (--spacing-collapsed, -x, -y) to make one documented prop value work, with nothing to tell it so.

  collapsed is now recognised as axis-less and passed through unsuffixed, so a theme declares --spacing-collapsed only. The same guard is applied to the deliberately-divergent copy of the axis logic in SelectList, which had the identical bug on its p prop. A new isAxislessToken predicate is exported from @marigold/system so the concept has one home instead of being inlined at both call sites.

  isScale is unchanged: collapsed stays non-numeric there, because createWidthVar, createHeightVar and createSpacingVar depend on that classification.

  Theme: --spacing-collapsed-x and --spacing-collapsed-y are removed from @marigold/theme-rui. They shipped in theme-rui 6.0.0 stable but existed only to satisfy the suffix that is no longer generated — nothing else referenced them, and the documented token has always been collapsed.

• 148ef97: fix(DST-1740): give Checkbox and Switch labels a containing block for their hidden input

  React Aria renders the real <input> inside the control's <label> wrapped in VisuallyHidden, which is position: absolute with no offsets. The label was position: static, so the input anchored to whatever positioned ancestor the consumer happened to have. In a list inside a dialog that is the dialog itself, a dozen static elements up.

  An absolutely positioned box laid out against an ancestor outside a scroll container is not part of that container's scrolled content, so the input stopped travelling with the row it belongs to. Clicking a row far down the list focused an input the browser believed was over a thousand pixels away, and it scrolled the dialog to reveal it. In the reported case the dialog also set overflow: hidden, so there was no scrollbar to get back and it ended up blank.

  Both labels are now relative. React Aria's own docs name this as a precondition of VisuallyHidden ("it must have a position: relative or position: absolute ancestor"), citing stray scrollbars — the focus jump is the sharper consequence, which is probably why it went unnoticed.

  Radio already positioned its label and is unchanged. Switch looked like it did too, but its relative sat on a wrapper around the track, a sibling of the input rather than an ancestor, so it never reached it. That wrapper is gone and the track is now a direct child of the label, which carries the relative. Checkbox.Group renders Checkbox children and needs no change of its own.

  Consumers who worked around this by setting position: relative on their own scroll containers can drop it, though leaving it in place is harmless.

• 1fd3f85: fix(DST-1729): take useLocale from react-aria-components, not @react-aria/i18n.

  Calendar's preset resolution read the locale through the @react-aria/i18n shell. RAC pins its react-aria internals exactly while the shells keep caret ranges, so a consumer's lockfile can legitimately resolve two react-aria copies — two module instances, two distinct I18nContexts. The hook then reads a context that <I18nProvider> never wrote, and presets silently fall back to the default locale. Nothing errors, and our own dedupe hides it locally, so it only ever appears in a consumer's app.

  Same failure class as DSTSUP-261 and DST-1505. A check now fails CI if packages/components takes I18nProvider, useLocale or isRTL from the shell again.

• 4a18a38: fix(Tray): don't dismiss the tray on gestures that start in its content

  A vertical swipe inside <Tray.Content> was read as drag-to-dismiss, so scrolling a list or swiping over a calendar closed the tray instead of scrolling it, including the trays that DatePicker and DateRangePicker open on mobile. The gesture now only starts on the tray's chrome (drag handle, title, actions), and motion no longer sets touch-action: pan-x on the tray, so content can pan vertically on touch. As a result, text inside the tray is selectable again — suppressing selection and touch panning is now scoped to the chrome. No opt-in required; nothing to change in consumer code.

• e41e633: style(DST-1711): give the undo toast's action button a visible weight.

  addUndoToast rendered its Undo button as variant="ghost", which has no fill and no border until it is hovered. It is now the default secondary button, so the way back out of a deletion is visible at a glance.

  Review feedback on the Destructive Actions pattern found the button easy to overlook: the toast arrives far from the control that triggered it and leaves again after five seconds, which is the worst case for an affordance that only appears on hover. It is deliberately not a destructive button — undo is the safe action, and red beside a completed deletion reads as a second delete.

• Updated dependencies [17f9158]

  • @marigold/system@18.1.0

18.0.0 (Released on Aug 11, 2026)

Major Changes

• b7122c0: feat(DST-1545): replace ActionBar.Button with a plain <Button> via a ButtonContext cascade. ActionBar now provides a ghost/default cascade to its toolbar, so authors place a standard <Button> inside the bar and it adapts to the toolbar look automatically, with the full Button API available (disabled, loading, slot, size="icon"). This mirrors the pattern already used by Panel.Header and ButtonGroup.

  Breaking: ActionBar.Button is removed. Replace <ActionBar.Button>…</ActionBar.Button> with <Button>…</Button>. For icon-only actions use <Button size="icon" aria-label="…">, which also fixes an accessibility defect where the old wrapper silently dropped aria-label, shipping unlabeled icon buttons. The duplicated actionButton theme style is gone (it hand-mirrored Button's ghost variant at the default size, minus the press and loading affordances a real <Button> now brings).

  // Before
  <ActionBar selectedItemCount={3} onClearSelection={clear}>
    <ActionBar.Button onPress={edit}>
      <Pencil /> Edit
    </ActionBar.Button>
  </ActionBar>
  
  // After
  <ActionBar selectedItemCount={3} onClearSelection={clear}>
    <Button onPress={edit}>
      <Pencil /> Edit
    </Button>
  </ActionBar>

• b7122c0: feat(AppLayout): switch to page-level scroll

  AppLayout no longer owns an interior scroll container. The document (<html>/<body>) scrolls the whole page; the sidebar sticks via position: sticky and the top header stays pinned through TopNavigation's own sticky positioning.

  Why page-level scroll

  • Mobile URL bar collapses on scroll. With interior scroll, Safari and Chrome mobile keep the URL bar expanded forever, wasting ~8% of the screen. Only document scroll lets the browser hide it.
  • Pull-to-refresh works. Interior scroll disables it.
  • Browser scroll restoration on back/forward only works reliably for the document, not interior containers. Interior scroll produces subtle "lost scroll position" bugs.
  • Cmd+F find-in-page scrolls the document, not an interior container, so matches outside the viewport scroll into view correctly.
  • Anchor links (#section), iOS status-bar tap (scroll-to-top) and native keyboard nav (PgUp/PgDn/Space/Home/End) all behave predictably.
  • IntersectionObserver with default root, scroll-snap, sticky elements, scroll-margin-top — all simpler when there is one scroll container.

  Breaking changes

  • Code reading mainRef.current.scrollTop (or similar) will no longer see user scroll. Read window.scrollY / document.documentElement.scrollTop instead.
  • Styles assuming a fixed-height main region (height: 100% on direct children of <AppLayout.Main>, for example) will no longer be bounded by the viewport. Use min-h-dvh or remove the constraint.

  Known trade-offs

  • Pure app-shell look via position: sticky can flicker on iOS Safari momentum scroll. Cosmetic, usually acceptable.
  • Sticky elements may show a brief re-paint when overlays close. Not a correctness bug.

• b7122c0: feat([DST-1407]): Drawer enforces one open at a time.

  Opening a sibling <Drawer> while one is already open dismisses the first. Applies to desktop and mobile. The dismissed Drawer's onOpenChange(false) is invoked so controlled-state consumers stay in sync.

  A <Drawer.Trigger> nested inside an already-open Drawer is treated as a sub-flow: the nested Drawer opens over its parent and the parent stays mounted. Dismissing the parent in that situation would also unmount the nested trigger and tear down the new Drawer.

  Migration: No API change. If a flow relied on multiple simultaneous sibling drawers, refactor to a single drawer with switchable content, or use <Modal> for layered interactions.

• b7122c0: chore(DST-1164): remove the unused Breakout component and the now-dead align API from Container.

  Breakout had 0% usage across all scanned production repositories, so it is removed entirely (component, stories, tests, and docs). Container's align prop, together with its internal gridColumn/gridColsAlign grid setup, only ever took effect via a [data-breakout] child, so it became dead code once Breakout was gone and is removed as well.

  Migration: remove any align prop from <Container> usages. The contentLength, alignItems, and space props are unchanged.

• b7122c0: refa([DST-1324]): Breaking change: Rename Inset's space/spaceX/spaceY props to p/px/py

  The padding props on Inset are renamed to align with Panel's existing API, so that across the design system space always means gap between children and p/px/py always mean inner padding. Previously, space carried two different meanings depending on the component, which was a source of confusion.

  Migration:

  Before	After
  <Inset space="…" />	<Inset p="…" />
  <Inset spaceX="…" spaceY="…" />	<Inset px="…" py="…" />

  The discriminated union shape is unchanged: p is mutually exclusive with px/py. Token vocabularies are unchanged (InsetSpacingTokens for p, PaddingSpacingTokens for px/py).

• b7122c0: feat(DST-1360): introduce AppShell, Page, Page.Header, and Page.Content; remove AppLayout

  Renames AppLayout to AppShell and removes its three pass-through subcomponents (AppLayout.Sidebar, AppLayout.Header, AppLayout.Main) — <Sidebar>, <TopNavigation>, and <Page> now sit directly inside <AppShell> (each owns its grid area, so child order does not matter). AppShell absorbs Sidebar.Provider via the defaultSidebarOpen prop; render your own <Sidebar.Provider> around <AppShell> for controlled state, variant, or size and it is detected and used instead of the internal one.

  Adds <Page> — the <main> landmark with page padding (p, or px/py; default square-relaxed) and vertical rhythm between sections (space; default group). The page's <main> is named by its <h1> via aria-labelledby; when there is no <Title>, pass aria-label (or your own aria-labelledby) instead. With none of these, <Page> warns in development so the landmark is never silently unnamed. Like <Panel>, <Page> forwards standard HTML attributes (id, data-*, event handlers) and a ref to its <main>.

  Adds <Page.Header> — a slot-based title/description/actions header that mirrors Panel.Header — and an optional <Page.Content> (with its own space) for when the rhythm between sections should differ from the header-to-content gap. The page heading outline now falls out of the defaults: <Title> in Page.Header is an h1, <Title> in Panel.Header an h2, <Title> in Panel.Collapsible an h3 (override per <Page> with headingLevel).

  Migration:

  -<Sidebar.Provider defaultOpen>
  -  <AppLayout>
  -    <AppLayout.Sidebar>…</AppLayout.Sidebar>
  -    <AppLayout.Header>…</AppLayout.Header>
  -    <AppLayout.Main>{content}</AppLayout.Main>
  -  </AppLayout>
  -</Sidebar.Provider>
  +<AppShell defaultSidebarOpen>
  +  <Sidebar>…</Sidebar>
  +  <TopNavigation>…</TopNavigation>
  +  <Page>
  +    <Page.Header>
  +      <Title>Billing</Title>
  +      <Description>Manage your plan and invoices.</Description>
  +      <Button variant="primary">Upgrade plan</Button>
  +    </Page.Header>
  +    {content}
  +  </Page>
  +</AppShell>

• b7122c0: refactor(DST-1548): rename Card.Body to Card.Content

  Aligns the Card body sub-component with Panel.Content and Page.Content so all three container primitives expose the main body region under one name.

  Breaking change: Card.Body (CardBody) is removed. Rename usages to Card.Content:

  - <Card.Body>...</Card.Body>
  + <Card.Content>...</Card.Content>

  The bleed prop and padding behavior are unchanged. The internal data-card-body attribute has been removed to match Panel.Content.

  The Card theme slot key is renamed from body to content in the @marigold/system Theme type and in @marigold/theme-rui. Theme authors overriding this slot must rename their key accordingly.

• b7122c0: refa([DST-1549]): Breaking change: Rename compound member Tabs.TabPanel → Tabs.Panel

  Tabs now exposes .List, .Item, and .Panel, so every compound member follows one predictable naming rule. <Tabs.TabPanel> is removed (hard rename, no deprecated alias).

  Migration:

  Before	After
  <Tabs.TabPanel id="…">	<Tabs.Panel id="…">

• b7122c0: fix(DST-1559): remove dead and mis-named props from TextField, FileTrigger, and Loader.

  • TextField: drop the min/max props. They were never forwarded to the underlying <input> (react-aria filters them out of both the input and wrapper props), so they had no effect. Numeric constraints belong on NumberField.
  • FileTrigger: remove the mis-named singular acceptedFileType prop. Its key did not match react-aria's acceptedFileTypes, so file-type filtering silently never applied. Use the inherited acceptedFileTypes instead.
  • Loader: fix the loaderType JSDoc, which documented a non-existent cycle value. The accepted values are xloader and circle (default circle).

• b7122c0: refactor([DST-1283]): Breaking Change — Remove <Multiselect> (and the react-select dependency) from @marigold/components.

  Use <TagField> instead.

• b7122c0: fix(DST-1353): remove width="fit" from Select, ComboBox, and Autocomplete

  BREAKING CHANGE: The fit value for the width prop is no longer accepted on Select, ComboBox, and Autocomplete. These components use a popover with virtualized rendering, where the react-aria Virtualizer controls item sizing and ignores CSS layout. This caused dropdown content to be clipped when width="fit" was used. Affected usages should switch to an explicit width value instead.

• b7122c0: fix(DST-1556): rename SectionMessage's controlled visibility prop from close to open

  <SectionMessage>'s controlled visibility prop was named close but its truthiness meant visible , close={true} showed the message and close={false} hid it, the opposite of what the name and docs implied. It's now open, matching the polarity used by <Dialog>, <Drawer>, <Tray>, and <Sidebar>.

  Before	After
  close={isVisible} (truthy = visible)	open={isVisible} (truthy = visible)
  close={!isDismissed}	open={!isDismissed}
  onCloseChange={setX} (receives current value)	onOpenChange={(open) => ...} (receives false on dismiss)

  A new defaultOpen prop (default true) sets the initial visibility in uncontrolled mode. The uncontrolled default behavior (visible, self-dismisses via the close button) is unchanged.

• b7122c0: feat(DST-1246): update Switch component layout and sizing to align with Checkbox and Radio

  The Switch component previously rendered its label on the left and toggle on the right, which was inconsistent with Checkbox and Radio where the control sits on the left. When used together in forms, this created a visually misaligned layout.

  Layout: Toggle now renders before the label (control on the left, label on the right), matching Checkbox and Radio. This ensures consistent visual alignment when Switch is used alongside other boolean controls in form layouts.

  Sizing: Reduced the default track size from 24x40px to 16x28px and thumb from 20px to 12px. This brings the Switch closer in visual weight to Checkbox/Radio (16px), making it fit better in the flow of forms.

  Settings variant: A new variant="settings" mirrors the default layout — label and description on the left, toggle on the far right. This is the common pattern used on settings/preferences pages. The variant is propagated to BooleanField so that grid columns and description placement adjust accordingly.

  Description support: Switch now accepts a description prop (help text rendered below the control), matching Checkbox's existing support. The description text aligns with the label text using CSS grid + subgrid, automatically adapting to any control size without hardcoded padding. Properly wired with aria-describedby for accessibility.

  Form support: The name prop passes through to the underlying input for HTML form submission.

  Shared BooleanField: Extracted a reusable BooleanField wrapper used by both Checkbox and Switch for consistent description rendering and aria-describedby wiring. Uses CSS grid with subgrid to align description text with label text across both components.

  Breaking changes

  Restoring the old Switch behavior

  The default Switch layout has changed: the toggle is now on the left and the label on the right (previously reversed). If you need the old layout (label left, toggle right), use the new variant="settings":

  - <Switch label="Wi-Fi" />
  + <Switch label="Wi-Fi" variant="settings" />

  The size="large" prop has been removed. The default size is now smaller (16x28px track). There is no built-in way to get the old large dimensions (24x40px track) — if needed, create a custom size variant in your theme's Switch.styles.ts.

  Custom theme migration

  This release introduces a new required theme component BooleanField and changes the layout model of the Checkbox and Switch container slots from flexbox to CSS grid. Custom themes must be updated or Checkbox/Switch will throw a runtime error.

  1. Add BooleanField to your theme (required)

  BooleanField is a new multi-slot theme component used internally by both Checkbox and Switch to render descriptions. If your theme does not include it, any Checkbox or Switch with a description prop will throw:

  Error: Component "BooleanField" is missing styles in the current theme.

  Add the following to your theme's component styles:

  import { cva } from '@marigold/system';
  
  export const BooleanField = {
    container: cva({
      base: 'grid gap-x-2',
      variants: {
        variant: {
          default: 'grid-cols-[auto_1fr]',
          settings: 'grid-cols-[1fr_auto]',
        },
      },
      defaultVariants: { variant: 'default' },
    }),
    description: cva({
      base: 'mt-0.5',
      variants: {
        variant: {
          default: 'col-start-2',
          settings: 'col-start-1',
        },
      },
      defaultVariants: { variant: 'default' },
    }),
  };

  • container: Defines the 2-column grid layout wrapping the control and its description. The default variant uses grid-cols-[auto_1fr] (control left, label right). The settings variant uses grid-cols-[1fr_auto] (label left, control right).
  • description: Styles the description text wrapper. Placed under the label column via col-start-2 (default) or col-start-1 (settings). mt-0.5 adds vertical spacing between the label row and description.

  Then export it from your theme's component index file:

  export { BooleanField } from './BooleanField.styles';

  2. Update Checkbox container slot (required if customized)

  The Checkbox container slot changed from flexbox to CSS grid with conditional subgrid support:

  Before:

  container: cva({ base: 'cursor-pointer read-only:cursor-default gap-2' }),

  After:

  container: cva({
    base: [
      'grid grid-cols-[auto_1fr] gap-x-2 items-center',
      'cursor-pointer read-only:cursor-default',
      'group-data-[booleanfield]/booleanfield:grid-cols-subgrid group-data-[booleanfield]/booleanfield:col-span-full',
    ],
  }),

  Key changes:

  • gap-2 changed to gap-x-2 (column gap only, since row gap is now handled by BooleanField.description)
  • grid grid-cols-[auto_1fr] items-center replaces the flex items-center that was previously hardcoded in the component
  • group-data-[booleanfield]/booleanfield:grid-cols-subgrid and group-data-[booleanfield]/booleanfield:col-span-full enable subgrid when inside a BooleanField wrapper, so the description aligns with the label

  3. Update Switch container slot (required if customized)

  The Switch container slot also changed from minimal styles to CSS grid with subgrid:

  Before:

  container: cva({
    base: 'disabled:cursor-not-allowed disabled:text-disabled-foreground',
  }),

  After:

  container: cva({
    base: [
      'grid gap-x-2 items-center',
      'disabled:cursor-not-allowed disabled:text-disabled-foreground',
      'group-data-booleanfield/booleanfield:grid-cols-subgrid group-data-booleanfield/booleanfield:col-span-full',
    ],
    variants: {
      variant: {
        default: 'grid-cols-[auto_1fr]',
        settings: 'grid-cols-[1fr_auto]',
      },
    },
    defaultVariants: { variant: 'default' },
  }),

  Key changes:

  • Added grid gap-x-2 items-center (replaces flex items-center gap-2 that was previously hardcoded in the component)
  • Grid columns moved to variant to support both default and settings layouts
  • Added subgrid support for BooleanField integration

• b7122c0: refa([DST-1162]): Breaking changes: The Card component has been refactored into a compound component pattern.

  What changed:

  • The previous prop-based API (padding, space, etc.) has been removed.
  • Content must now be composed using explicit sub-components: Card.Header, Card.Body, Card.Footer, and Card.Preview.
  • A CardContext is now required — sub-components will throw an error if used outside of a <Card>.

  Migration:

  // Before
  <Card>
    <SomeContent />
  </Card>
  
  // After
  <Card>
    <Card.Header>Title</Card.Header>
    <Card.Body><SomeContent /></Card.Body>
    <Card.Footer>Actions</Card.Footer>
  </Card>

• b7122c0: refa([DST-1281]): Breaking change: <Tooltip> no longer accepts open. Controlled visibility is only supported on <Tooltip.Trigger> (open / onOpenChange). Removes the internal React context that previously forwarded open from <Tooltip> to the trigger.

Minor Changes

• b7122c0: feat(DST-1381): add master/admin access variants to Link and MenuItem that mark actions requiring elevated access rights with an icon (lock = master, key = admin). Badge renders its master/admin variants with the same icons.

  The components render the icon as a decorative <svg> colored by the theme's access foreground tokens (which also keeps it visible in forced-colors mode). On Link and MenuItem the restriction is exposed to assistive technology through a visually hidden "Master"/"Admin" text label rendered after the visible label, so restricted links and menu items carry the access level in their accessible name. Badge renders no extra label because its visible text already is the access level, which rules out double announcements by design.

  Note that variant is a single axis: an access variant cannot be combined with another variant (e.g. destructive on MenuItem). For destructive actions that are access-restricted, the access variant takes precedence (variant="master"), with the destructive nature conveyed by the action's label and confirmation flow. See the Admin & Master Mark pattern docs.

• b7122c0: feat(DST-1460): animated open/close caret in Accordion.Header

  Accordion.Header now uses the new MorphCaret icon, which smoothly animates between the closed (down) and open (up) states by morphing its SVG d path. Respects prefers-reduced-motion. The unused ChevronDown icon has been removed.

• b7122c0: feat(DST-1551): add DateRangePicker component

  New <DateRangePicker> lets users enter or select a start–end date range through a single field, mirroring <DatePicker>'s API and behaviour. Two date inputs (start/end) sit in one field group with a calendar button that opens a <RangeCalendar> in a popover on desktop and a tray on small screens. Supports per-input paste (ISO/EU/US formats), granularity (inline time segments), visibleDuration (up to three months), and the usual Marigold field props (disabled, readOnly, required, error, errorMessage, description, minValue, maxValue, dateUnavailable, width, variant, size). Adds a matching DateRangePicker theme entry to theme-rui.

• b7122c0: feat([DST-1134]): add <RangeCalendar> component (alpha)

  Adds a new <RangeCalendar> for selecting a contiguous or non-contiguous date range, built on react-aria's <RangeCalendar> with Marigold conventions (disabled, readOnly, error, dateUnavailable, allowsNonContiguousRanges). Supports up to three side-by-side months via visibleDuration, stacking vertically below the sm breakpoint; the same responsive stacking now applies to multi-month <Calendar> for parity. description and errorMessage route through <FieldBase> so the help/error UI matches the rest of the form-component family (TriangleAlert icon + HelpText container). Ships as an alpha component with a stub docs page under the form section.

  DST-1134

• b7122c0: feat(DST-765): add <SegmentedControl> component

  Adds a new <SegmentedControl> for compact, single-select view switching and quick filters. It is built on react-aria's RadioGroup / RadioField / RadioButton with a SelectionIndicator, so it is a real form field: value / defaultValue / onChange, the name attribute (submits like a radio group), required, error + errorMessage, description, readOnly, and validation all work exactly like the other Marigold form components (label/description/error route through <FieldBase>). The selected segment is marked by an animated indicator that slides between options.

  Options are declared via the compound API SegmentedControl.Option (also exported as SegmentedControlOption), each with a value:

  <SegmentedControl label="View" defaultValue="list">
    <SegmentedControl.Option value="list">List</SegmentedControl.Option>
    <SegmentedControl.Option value="grid">Grid</SegmentedControl.Option>
  </SegmentedControl>

  Two variants — default (a bg-control track with a raised ui-surface thumb, mirroring the Switch) and ghost (track-less, with a translucent ghost-Button-style indicator for dense toolbars) — at a single default size (matching the h-control Input height). Hover and focus reuse the shared ui-* utilities (ui-state-focus, ui-state-hover-ghost); the indicator slides between options (ease-out-quint) and respects prefers-reduced-motion.

  To make segments divide the available width equally, use the standard width prop — e.g. width="full". There is no separate fullWidth prop.

  When the options exceed the available width the control scrolls horizontally instead of compressing the segments, keeping the selected option scrolled into view (reduced-motion aware). A scroll-driven edge fade signals there is more to scroll where supported, falling back to a native scrollbar otherwise.

  ToggleButtonGroup now logs a dev-only warning when used with selectionMode, steering single-select use cases towards SegmentedControl (it remains for independent on/off actions in toolbars).

  DST-765

• b7122c0: feat([DST-1429]): Card now exposes a Panel-aligned padding API.

  What changed:

  • Card accepts p / px / py props (mutually exclusive p vs px+py), resolving to CSS custom properties --card-px and --card-py on the container. Defaults to square-regular.
  • A new space prop controls the gap between slots, resolving to --card-gap. Defaults to regular.
  • Card.Body and Card.Footer accept an opt-in bleed prop to skip horizontal padding for tables, media, or full-width action bars.
  • Internally, Card switched from CSS grid with grid-template-areas to a flex column with gap-y. JSX order now determines visual order — place Card.Preview first when used.
  • Slot theme styles (header, body, footer) no longer hardcode px-4 / py-*; padding lives in the component layer and is driven by the CSS variables above.
  • Card.Preview automatically escapes the container's vertical padding when used as the first or last child via negative margins.

  Why:

  Cards previously had no consumer-controllable padding API and no default padding on the container — content rendered as direct children of <Card> was visually broken. The new API mirrors Panel's padding model so the two surfaces behave consistently.

  Migration:

  • Wrap bare children in <Card.Body>. Bare children inside <Card> are no longer rendered with horizontal padding; this matches Panel's composition contract.
  • If you used Card.Preview for media at the top, keep doing so — it stays edge-to-edge.
  • No changes needed for the canonical composition (Preview + Header + Body + Footer).

• b7122c0: feat(DST-1373): adopt the slot-configuration pattern in Card

  Card.Header is now a slot provider: drop a <Title> and an optional <Description> directly inside it and the header wires up the heading level, id, accessible name, and theme classes automatically. A bare <Title> placed directly inside <Card> (no Card.Header wrapper) is also picked up by the root, so title-only cards can skip the header and still get the right padding and aria-labelledby wiring. <Card> itself now renders an <article> landmark and is automatically labelled by its <Title> via aria-labelledby, or by an explicit aria-label. A new headingLevel prop (default 3) controls the underlying heading tag for the document outline.

  The theme Card slot map gains title and description entries — the typography previously carried on the header slot has moved to title. Variant text color now flows through a new --card-accent CSS custom property, so master and admin cards pick up the matching accent automatically. Raw <Stack> / <Headline> composition inside Card.Header still renders but does not pick up the slot wiring; prefer <Title> / <Description> going forward.

• b7122c0: feat(DST-876): add Card usage guidelines

  Renames the Card.Preview slot to Card.Media across components, theme, and docs. This is a breaking change: consumers using <Card.Preview>, the data-card-preview selector, or the preview theme slot key must migrate to Card.Media, data-card-media, and the media slot key respectively.

  Adds a "Usage" section to the Card docs covering when to use cards, media slot guidance.

• 0e2c676: fix(DST-1680): keep the mobile ComboBox/Autocomplete tray in the accessibility tree.

  On small screens both components render a Tray instead of RAC's Popover. When the listbox opened, useComboBox called ariaHideOutside([inputRef.current, popoverRef.current].filter(el => el != null)) — and because nothing claimed PopoverContext and the tray (with its input) portals in a later commit, both refs were null. ariaHideOutside hides everything outside the elements it is given, so an empty list hid the whole document, including the tray itself: screen readers could not reach the tray's dialog, search input or options at all.

  popoverRef now points at the tray — the dialog element while open, and the container the tray portals into while closed — so the hide pass keeps the tray visible. Background isolation is unchanged; it comes from the tray's own Modal, which runs ariaHideOutside(..., { shouldUseInert: true }). As a side effect useComboBox's blur handling works again, since it checks whether focus moved into popoverRef.current before closing.

  Tray now also accepts a ref to its dialog element.

• a9fdcff: feat(DST-944): add addUndoToast, gate FileField removals with onBeforeRemove, and make destructive confirmations settle reliably.

  useToast gains addUndoToast({ title, onUndo, onCommit }), which reports a destructive action as done and sends the real request only if the user does not take it back. It owns the parts that are easy to get wrong, so a caller cannot lose a deletion to a drifting timer, an unguarded commit, or a toast that never closes. The Destructive Actions pattern explains each one.

  addToast now accepts onClose, called when the toast closes for any reason: its timeout ran out, it was dismissed, it was closed through removeToast, or the queue was cleared. It also accepts closeButton: false, which a toast that never auto-dismisses (warning, error, timeout: 0) ignores, since that would leave no way out of it.

  <FileField> accepts onBeforeRemove, called with the file a remove button is about to drop. Return false, or a promise resolving to false, to keep it, which is what puts a confirmation in front of the built-in remove buttons. A handler that throws keeps the file.

  Each FileField remove button is now named after its file ("Remove agb-2026-08-01.pdf") instead of all announcing "Remove file", so the rows of a document list are distinguishable to a screen reader. FileField.Item takes removeLabel to set that name when you compose items yourself.

  Dialog.Trigger no longer blocks Escape by default. An unset keyboardDismissable was inverted into "keyboard dismiss disabled", so every dialog opened from a trigger trapped the keyboard unless the prop was passed explicitly, contradicting both the documentation and the default in Tray and Drawer. Pass keyboardDismissable={false} to opt out. This is a behaviour change for anyone who relied on the previous default.

  ConfirmationDialog and useConfirmation gain four fixes around the same flow:

  • Closing a confirmation without pressing a button (Escape) now resolves useConfirmation as cancelled. Previously the promise never settled, so an await confirm(...) silently stalled and its continuation never ran.
  • ConfirmationDialog focuses the cancel button by default when variant="destructive", so a reflexive Enter takes the safe path. Pass autoFocusButton: 'action' to focus the confirm button instead.
  • ConfirmationProvider now forwards the autoFocusButton from a confirm() config, which it accepted but dropped, and its confirm button falls back to the localized confirm message rather than a hardcoded "Confirm" next to a translated "Cancel".
  • ConfirmationDialogProps['variant'] is typed as 'destructive' | (string & {}) so the variant that drives this behaviour is discoverable, rather than an untyped string.

  The action buttons call their handler before closing the dialog so that an owner watching onOpenChange sees the decision before it sees the close. This is a behaviour change for anyone relying on the previous ordering. They are still called with no arguments.

  See the new Destructive Actions pattern for when to confirm and when to offer undo.

• b7122c0: feat(DST-1369): adopt the slot-configuration pattern in Dialog, Drawer, and Tray

  The three overlay components now follow the same slot-configuration pattern as Panel and Card. Each publishes the slot contexts at its root, so the title, description, and action primitives pick up the overlay's theme classes wherever they are dropped:

  • Dialog.Title / Drawer.Title / Tray.Title are thin wrappers over <Title slot="title">.
  • New Dialog.Description / Drawer.Description / Tray.Description wrap <Description slot="description">.
  • New Dialog.Header / Drawer.Header / Tray.Header are optional layout wrappers that group a title and description. A bare <Title slot="title"> (or <*.Title>) without a header is a first-class, accessible authoring form — aria-labelledby resolves to it automatically.

  The compound-component API is unchanged. The <header> element that previously wrapped the title is gone; the title now carries the header chrome directly, with no change to the rendered visuals.

• b7122c0: feat(DST-1635): add a bleed prop to Drawer.Content so edge-aware children can span the full Drawer width.

  What changed:

  • <Drawer.Content bleed> drops the Drawer's horizontal content padding and publishes a --bleed-px custom property, mirroring Panel.Content's bleed.
  • The horizontal padding shared by the sectioned overlay surfaces (ui-panel-header / ui-panel-content / ui-panel-actions) now comes from a single --ui-panel-px token, and a bled Drawer.Content re-publishes that exact token as --bleed-px so the two can't drift.
  • Edge-aware children stay aligned with the Drawer title while their dividers/backgrounds reach the Drawer edges: Accordion reads --bleed-px directly, and Table's edge-cell padding now falls back to --bleed-px (after the Panel-only --panel-px), so it aligns inside a bled Drawer too.

  Why:

  Placing an <Accordion> (or Table) inside <Drawer.Content> previously trapped it inside the content padding, so item dividers and hover/selection backgrounds could not reach the Drawer edges. bleed gives the same full-width alignment Panel.Content bleed already offered.

  Impact:

  • Default behavior is unchanged: without bleed, Drawer.Content keeps the padded ui-panel-content and --bleed-px stays unset (children resolve their inset to 0px). The --ui-panel-px token resolves to the same 24px the surfaces used before, so Dialog/Drawer/Tray are visually identical.

• b7122c0: feat(DST-1282): scroll the Tabs row horizontally when it overflows

  When more tabs are rendered than fit the available width, Tabs.List now scrolls horizontally instead of wrapping onto multiple lines or pushing the page wide. Tabs keep their natural width (shrink-0) and snap gently into place (proximity) as you scroll, with the adjacent tab kept peeking past the edge so the scrollability stays discoverable. A vertical mouse wheel scrolls the row horizontally (pointer users without a trackpad), without hijacking normal page scroll. Horizontal overscroll is contained so it does not trigger browser back/forward gestures, and scrolling is smooth for users who allow motion. On browsers that support scroll-driven animations the overflowing edges fade out (ui-scroll-mask-x); elsewhere it falls back to a plain scroll container. When all tabs fit, nothing changes visually.

  The sliding selection indicator stays correct while react-aria scrolls an off-screen tab into view (the scroll container is a layoutScroll motion element). No runtime API change.

  Breaking change (@marigold/system): the Tabs theme Record gains a new required tabsListScroll slot. It is deliberately required so a theme cannot ship tabsList (whose w-max triggers the overflow) without the scroll container that makes it behave. Custom themes that define a Tabs block must add a tabsListScroll entry to type-check.

• b7122c0: feat(DST-1480): forward arbitrary HTML attributes on <Panel>

  <Panel> now extends HTMLAttributes<HTMLElement> (minus className/style) and spreads the remaining props onto its root <section>, matching the <Card> API. Consumers can now pass id, data-*, event handlers, and other standard attributes directly to a Panel.

  A consumer-supplied aria-labelledby is preserved instead of being overwritten with undefined when no <Title> is present — the slot-owned titleId still wins when a <Title> renders. This mirrors the fallback adopted by Card in DST-1373.

  DST-1480

• b7122c0: feat(DST-1483): remove ActionButton in favor of a slot-aware Button (rename ActionGroup → ButtonGroup)

  The beta-only <ActionButton> is removed. <Button> is now slot-aware: it adapts automatically inside a button container, so you write <Button> everywhere instead of learning a second button component.

  • <ActionButton> is removed. Use <Button>; it adapts inside <ButtonGroup> and <Panel.Header>. Opt a button out of the cascade with slot={null}.
  • <ActionGroup> is renamed to <ButtonGroup>, mirroring the existing ToggleButtonGroup → ToggleButtonContext → ToggleButton trio.
  • A single Marigold-owned ButtonContext drives the cascade (replaces ActionButtonContext + ActionGroupContext). RAC's own ButtonContext (close/increment/decrement slots) is untouched.
  • Uniform precedence: a local prop (variant, size, disabled) always wins over the container. This drops the former ActionGroup size-group-wins outlier.
  • <ButtonGroup> cascades variant: 'secondary' when unset, the same baseline as a standalone <Button>. Slot-aware parents override it where they want lower emphasis: <Panel.Header> cascades variant: 'ghost' + size: 'small', so a labelled header action stays readable. An icon-only action (a bare-icon <Button>, an <ActionMenu> kebab) sets size="icon" to render as a square.
  • <ButtonGroup> now owns a structural flex gap-1 layout (orientation-aware), so a standalone cluster is spaced correctly — <ActionGroup> had no layout of its own. A container's positional className (e.g. Panel's [grid-area:actions]) still rides along and positions the group.
  • Overlays (Popover, Modal, Tray, Drawer) reset ButtonContext at their content root, so a header/group cascade can't leak through the portal into an overlay's slot="close" or Dialog.Actions buttons.
  • <SelectList.Option> cascades variant: 'ghost' to a nested <Button>, <LinkButton>, or <ActionMenu>, so a trailing in-row action reads as low-emphasis chrome without an explicit variant.

  Migration

  • <ActionButton> → <Button> (its default variant maps to variant="ghost").
  • <ActionGroup> → <ButtonGroup>.
  • ActionButtonContext / ActionGroupContext → ButtonContext.
  • <ActionMenu> keeps its public name. Its trigger is now a slot-aware <Button> that inherits the cascade instead of hardcoding a variant: it renders secondary on its own (the standalone <Button> baseline, matching the pre-unification look) and ghost inside <Panel.Header>, <SelectList.Option>, or a <ButtonGroup>. A variant set on the <ActionMenu> still wins.

• b7122c0: feat(DST-1492): add usePageFocus to move focus to the page <h1> on route change

  On client-side navigation focus lingers on the clicked link or falls back to <body>, so screen-reader and keyboard users get no signal that the screen changed. usePageFocus implements the standard SPA fix: given the current route key (typically the pathname), it makes the page <h1> programmatically focusable (tabIndex={-1}) and focuses it on each change.

  The first render is skipped so the initial load never steals focus, and it is a no-op on a page with no <h1> (an aria-label-only <Page>). <Page> stays router-agnostic: the route signal comes from the app router (RouterProvider). Call the hook from a component that persists across navigations (the layout / shell level), since the skip-first-render guard is per mount.

  import { Page, usePageFocus } from '@marigold/components';
  
  const PageFocus = ({ pathname }: { pathname: string }) => {
    usePageFocus(pathname);
    return null;
  };
  
  <Page>
    <PageFocus pathname={location.pathname} />
    <Page.Header>
      <Title>Billing</Title>
    </Page.Header>
    {/* … */}
  </Page>;

• b7122c0: feat(DST-1509): add collapseAt to Tag.Group

  Tag.Group now accepts a collapseAt={n} prop: the first n tags render as usual, and the rest collapse behind a "Show N more" / "Show N less" toggle, matching the behavior already available on Checkbox.Group and Radio.Group.

  Unlike those groups, Tag.Group's tags are a RAC collection (selection, removal, keyboard navigation), so collapsed tags stay mounted inside the <TagList> and are hidden via the native hidden attribute rather than being pulled out into a separate <Collapsible>. This keeps onRemove, removeAll, and emptyState working unchanged, and the collapsed count automatically shrinks as tags are removed. If a hidden tag is part of the initial selection, the group expands automatically.

  collapseAt only applies to static children; dynamic collections (items + a render function) are unaffected.

  When both collapseAt and removeAll are used together, "Show N more" bottom-aligns next to the last visible tag, while "Remove all" stays in its own trailing column so it never mixes into the tag wrap.

  DST-1509

• b7122c0: Add relative date presets to Calendar, RangeCalendar, DatePicker, and DateRangePicker via a new presets prop. On desktop the presets render as a quick-selection list beside the calendar. On small screens the grid renders first with a "Quick selection" row: inline calendars open the preset list in a bottom sheet, while the pickers switch their existing sheet to the list in place. Ships built-in localized presets (today, yesterday, tomorrow, this-week, next-7-days, next-30-days, last-7-days, last-30-days, this-month, this-quarter), supports custom presets with value resolvers, and exports useDatePresets/useDateRangePresets for userland compositions.

• b7122c0: feat(DST-1533): add Table.Footer component

  New <Table.Footer> renders a semantic <tfoot> after <Table.Body> for summary rows like totals, counts, or averages, composed from <Table.Row> and <Table.Cell> just like the body. Supports a sticky prop that pins the footer to the bottom of the viewport while scrolling, mirroring sticky table headers. Adds a matching footer theme entry to theme-rui.

• b7122c0: feat(DST-1568): add error and errorMessage support to Switch and Checkbox

  When error is set, the field is marked invalid and the errorMessage is shown in place of the description, wired to the input via aria-describedby. When both are unset, rendering is unchanged.

  Internally, Switch and Checkbox now render their HelpText inside the RAC field (SwitchField/CheckboxField), relying on RAC's native aria-describedby and FieldErrorContext wiring instead of re-plumbing it by hand. No other public API change.

• b7122c0: feat(DST-1609): two-level sidebar navigation with Sidebar.Rail and Sidebar.RailItem

  Adds a two-level navigation mode to the sidebar: a persistent rail of icon-first top-level destinations next to a panel showing the active section's sub-navigation. A Sidebar.RailItem wrapping a Sidebar.Nav is a section that shows a panel. One with only an href is a direct link, and one inside Sidebar.Footer pins to the bottom of the rail. Its active prop overrides href matching for pages the URL can't identify. Collapsing (toggle or Cmd/Ctrl+B) hides the panel while the rail narrows to an icon strip, so top-level navigation always stays available. On small screens the rail renders as the same single-column drawer as the plain sidebar: sections drill in (opened at the active section) and links close the drawer.

  • <AppShell> switches to a full-width top bar automatically when a rail is present (pure CSS via :has()), so the brand never moves when the panel collapses.
  • Sidebar.Toggle gains variant="rail" for its top-bar placement between the brand and the breadcrumbs.
  • New theme tokens: --spacing-topbar (the shell's shared vertical datum for the top bar height, sidebar brand row, and rail sticky offset), the rail column widths --spacing-rail / --spacing-rail-collapsed / --spacing-rail-panel, and --spacing-touch-target (44px minimum row height on small screens, shared by the drawer's nav rows and the existing Tray-mode ListBox/Menu options).
  • Idle single-column nav labels darken a step (new --color-secondary-bold token, charcoal-700) so they clearly out-rank the quiet group-label captions.
  • Keyboard: the rail supports arrow-key (and Home/End) movement on top of its flat tab order, and the section panel's tab stop re-syncs to the current page when the route changes, so Tab re-enters at the active item.
  • The TopNavigation bottom edge is now an always-on border. The non-reusable ui-scroll-edge and ui-sidebar-seam-header utilities are removed, so the sticky bar and the sidebar header carry a plain border instead.
  • The AppShell header row is now sized auto (was a fixed 3.5rem), so a shell without a TopNavigation no longer reserves an empty header band, so the row collapses to the height of its content.
  • The shell's viewport-height claims (AppShell grid, sidebar and rail asides) read the new --ui-viewport-height custom property with a 100dvh fallback. Set it on a wrapper to render the shell inside a bounded container (embedded previews, demos) instead of the browser viewport. Nothing changes when it is unset.

• b7122c0: fix(DST-1621): keep Accordion stickyHeader pinned when the header has actions

  Accordion.Header now accepts an actions prop for content shown next to the title, such as buttons. Previously actions were added by wrapping Accordion.Header in a layout component, which shrank the sticky header's containing block to the header row so stickyHeader could no longer pin the header while scrolling. Passing actions through actions keeps the sticky wrapper a direct child of the item, so the header stays pinned together with its actions.

• b7122c0: feat(DST-1634): standardize Input trailing-action alignment and make size="icon" a public Button API.

  The Input leading icon is clamped to 16px so it no longer overlaps the placeholder. Every trailing action (clear button, chevron, loading spinner, or a custom icon button) now sits in a control-sized centered box flush to the edge, so its icon aligns at the same inset as the leading icon across Input, SearchField, ComboBox, Autocomplete, TagField, and DatePicker. Button's size="icon" is now public and documented as the way to build an icon button, composing with any variant (for example variant="ghost" size="icon").

  Migration: variant="icon" was never a real Button variant. It silently rendered a default button, so any usage from older docs should switch to size="icon" (with a variant, for example variant="ghost" size="icon").

• b7122c0: feat(DST-1643): add a fullscreen size to Dialog

  <Dialog size="fullscreen"> fills the viewport (minus a small margin) at every breakpoint, giving content-heavy picks room for search, filters, and a long scrollable list while the title and actions stay fixed. The existing xsmall/small/medium/large sizes are unchanged.

• b7122c0: feat([DST-901]): styleProps for width, maxWidth, height, space, spaceX, spaceY, pr, pl, pt, pb now accept both numeric scale values (4) and their string equivalents ("4"). The public types are now declarative (Scale | Fraction | WidthKeyword, etc.) instead of being derived from the internal class-name maps.

  Components that previously resolved width, maxWidth, and height via class-name lookup (Form, Calendar, legacy Table column header / select-all cell, Slider, Scrollable, Switch, Grid) now resolve them through CSS custom properties (createWidthVar / createHeightVar) targeting --width, --max-width, --height. Those variables — along with --container-width and --field-width already used by FieldBase — are registered as non-inheriting (@property … inherits: false) in the RUI theme so they cannot leak into descendants.

  createWidthVar gained support for the previously missing keywords (svh, lvh, dvh, px, container), and a new createHeightVar helper was added. Both share a common factory and a base keyword set, so they remain trivially in sync.

  The runtime class-name maps width, maxWidth, height, gapSpace, paddingSpace, paddingSpaceX, paddingSpaceY, paddingRight, paddingLeft, paddingTop, paddingBottom are no longer exported from @marigold/system. These were internal utilities consumed only by @marigold/components. Use the prop types (WidthProp, HeightProp, …) and the CSS-var helpers (createWidthVar, createHeightVar, createSpacingVar) instead. The corresponding TypeScript prop types are unchanged.

• b7122c0: feat(DST-990): enrich <Menu> with selection visuals, keyboard shortcuts, and dividers

  <Menu> gains richer building blocks for advanced menus:

  • Selected-item visuals. In selectionMode="single" or "multiple", items show a leading checkmark and a highlighted row, aligned like <ListBox>. Command menus (no selectionMode) render exactly as before.
  • Keyboard-shortcut hints via a new shared <Keyboard> primitive (a sibling to <TextValue> and <Description>). It renders a <kbd> key-cap on its own and adapts to its container, so inside a Menu.Item it becomes a muted, right-aligned hint wired to react-aria's aria-describedby.
  • Dividers. Drop the shared <Divider> between <Menu.Item>s to separate groups with a role="separator" line.

  Breaking (@marigold/system): the Menu record in the Theme type now requires a keyboard key. Custom themes implementing Menu must add it to keep compiling. All @marigold/components additions are backward compatible.

• b7122c0: refa([DST-1298]): Refactor Divider component: API, styling, and docs

  We fixed the vertical orientation of the divider, which previously didn't work. Added new Divider stories and updated the Divider docs.

• b7122c0: feat(DST-1641): add ErrorState, the error sibling of EmptyState: same anatomy (title, description, action, headingLevel), plus typed DOM passthrough (role, tabIndex, ref) for error-boundary fallbacks.

• b7122c0: feat([DST-761]): export useLandmark from @marigold/components.

  Marigold now re-exports React Aria's useLandmark hook (and its AriaLandmarkRole / AriaLandmarkProps types) so consumers can register custom regions as ARIA landmarks without adding @react-aria/landmark as a direct dependency.

  import { useRef } from 'react';
  import { useLandmark } from '@marigold/components';
  
  const ref = useRef<HTMLElement>(null);
  const { landmarkProps } = useLandmark(
    { role: 'search', 'aria-label': 'Site search' },
    ref
  );

  A new accessibility guide on landmarks and a dedicated useLandmark reference page have been added to the documentation.

• b7122c0: feat(DST-1587): share wheel-to-horizontal-scroll between Tabs and SegmentedControl

  The wheel handler that lets pointer users without a trackpad reach overflowing Tabs is now a shared useWheelScrollX hook, and SegmentedControl adopts it too. Wheeling vertically over an overflowing SegmentedControl track now scrolls it horizontally, matching Tabs. No public API change on either component.

• b7122c0: fix([DST-1363]): make <TagGroup> errorMessage render and bridge it to form validation

  <TagGroup> accepted errorMessage via <FieldBase> but never rendered it because RAC's TagGroup does not populate FieldErrorContext. The internal <HelpText> short-circuits on a missing context, so the error path was a silent no-op and <Form>-level validation never reached the user.

  Bridges <TagGroup> to validation the same way <SelectList> does: useFormValidationState + useFormValidation on a hidden <select> (replacing the previous <input type="checkbox"> shim), with <FormContext> inheritance for validationBehavior. The shared hidden control lives at HiddenSelection/ and is now consumed by both <SelectList> and <TagGroup> so future fixes only happen once.

  New props on <TagGroup>: error, required, disabled, validate, validationBehavior, form. Public API normalised to Marigold's convention — isInvalid / isRequired / isDisabled are removed and onSelectionChange is renamed to onChange. selectionMode now defaults to 'multiple'. disabled now propagates to each <Tag> via context so interaction is blocked alongside the form-disabled state.

  DST-1363

• b7122c0: feat(DST-1257): add universal none spacing token

  • Introduce NoSpacingToken = 'none' shared across all spacing token families
  • Add 'none' to SpacingTokens, PaddingSpacingTokens, and InsetSpacingTokens
  • Add --spacing-none: --spacing(0) CSS custom property to the theme

  'none' now works wherever a spacing token is accepted: Stack/Inline gap (space="none"), Inset axis padding (spaceX="none" / spaceY="none"), and Inset recipes (space="none") — useful for wrappers that should render without adding any spacing (e.g. an edge-to-edge Table inside a containing component).

• b7122c0: feat(DST-1646): add OverflowRegion, a single-row layout primitive that hides trailing items instead of wrapping when horizontal space runs out, and restores them as space returns. Hidden items stay mounted (state preserved) but are removed from paint, tab order, and the accessibility tree. Like the other layout primitives it has no theme layer: space its items with the space prop (inherited from a parent Inline/Stack when unset, like Inline), label it with the forwarded region props (role, aria-label, ...), and pair it with the indicator render prop or the onOverflowChange callback so hidden items stay reachable through another surface, e.g. quick filters demoting into a filter panel.

• b7122c0: fix(DST-1573): default <Page> and <Page.Content> spacing to regular

  The space prop on <Page> and <Page.Content> — which controls the vertical rhythm between a page's children (the <Page.Header> and the <Panel>s/sections below it) — now defaults to regular (spacing(6), 24px) instead of group (spacing(12), 48px). The previous default produced too much whitespace between sections. Consumers can opt back into the larger gap with space="group".

• b7122c0: feat(DST-1326): introduce Panel.CollapsibleHeader, Panel.CollapsibleTitle, and Panel.CollapsibleDescription. The collapsible mirrors Panel.Header — a header wrapper with a title plus an optional description — and the whole visual surface is a single click target: title and description render as spans inside the trigger <button>, with the accessible name wired via aria-labelledby and the description via aria-describedby. The chevron icon uses a reusable MorphCaret that animates via SVG path morphing (honours prefers-reduced-motion).

• bb23186: feat(DST-1700): --bleed-px is the documented way to align content with a container's padding, and the overlay surface anatomy no longer borrows Panel's name.

  What changed:

  • The ui-panel-header / ui-panel-content / ui-panel-actions utilities and their --ui-panel-px token are now ui-surface-header / ui-surface-content / ui-surface-actions and --ui-surface-px. They style the shared anatomy of sectioned overlay surfaces (Dialog, Drawer, Tray, Sidebar) — never the Panel component, which has its own per-instance --panel-px. They are now named after ui-surface, the role those containers already wear.
  • Table derives its edge cell padding from --bleed-px alone: var(--bleed-px, var(--cell-x-padding)). It previously read var(--panel-px, var(--bleed-px, var(--cell-x-padding))).
  • A bled Card.Content and Card.Footer now publish --bleed-px (set to the Card's --card-px), which they never did.
  • Every non-bled content area (Panel.Content, Panel.CollapsibleContent, Card.Content, Card.Footer, Drawer.Content) clears --bleed-px with initial. Custom properties inherit through the whole subtree, so without the reset a container nested inside a bled one would read the outer container's padding and inset its edge-aware children twice.
  • --panel-px / --panel-py / --panel-gap, their --card-* and --page-* counterparts, and --bleed-px are documented as read-only public API under Reading container spacing.

  Why:

  --panel-px is set on the Panel root, so it inherits into the whole subtree whether content is bled or not. Reading it first meant the chain always resolved at step one inside a Panel and the remaining branches were unreachable: a Table in a non-bled Panel.Content was inset by the Panel's padding on top of the content area's own padding, putting its edge cells 12px from the border while the Panel title sat at 12px — offset twice. Every bleedable container already publishes --bleed-px, and because that is declared on the bled element rather than on a container root — and cleared again on every non-bled one — it is only in effect where edge alignment actually applies.

  Impact:

  • A Table in a bled Panel.Content, Panel.CollapsibleContent or Drawer.Content is unchanged.
  • A Table in a non-bled Panel.Content now uses the ordinary cell padding for its first and last cell instead of the Panel's horizontal padding. Docs steer tables to bleed, so most tables are unaffected.
  • Table and Accordion inside a bled Card.Content or Card.Footer now align with the container title, where previously they got no edge alignment at all.
  • A Table or Accordion in a non-bled container nested inside a bled one no longer picks up the outer container's padding.
  • Dialog, Drawer, Tray and Sidebar are visually unchanged. If you override --ui-panel-px or apply the ui-panel-* utilities directly, rename them; the token was undocumented, so nothing else in the public API moves. It also only ever existed in 18.0.0-rc.*, never in a stable release, so only prerelease consumers are affected.

• b7122c0: feat([DST-753]): SectionMessage exposes an announce prop and uses react-aria's LiveAnnouncer to notify assistive technology.

  What changed (DST-753):

  • <SectionMessage> accepts a new announce?: boolean prop. When set, the message text is sent to a shared, always-mounted live region maintained by @react-aria/live-announcer. Priority is polite for info / success / warning and assertive for error.
  • announce defaults to true for variant="error" and false for all other variants, preserving today's behavior for the common error case while letting consumers opt in for confirmations and informational updates.
  • The wrapper element no longer carries role="alert" for the error variant. Announcements are now delegated to the singleton live announcer instead.
  • Re-announcing the same message uses the React key pattern: pass a changing key to force a remount.

  Why:

  The previous implementation only announced the error variant, and it did so by adding role="alert" to a conditionally rendered element. Per the WAI-ARIA spec and MDN guidance, role="alert" should be on an element that already exists in the DOM before its content is injected, and it should not contain interactive elements. Marigold's SectionMessage violated both constraints (the alert was mounted together with its content, and it can contain close buttons and action links), making announcements unreliable on some screen reader / browser combinations.

  The new implementation uses @react-aria/live-announcer, which maintains persistent polite and assertive live regions at the document root. This is the same mechanism used across React Spectrum and avoids the conditional-rendering and interactive-content pitfalls of inline role="alert". It also unifies the API: opt in to announcement for any variant with a single prop.

  Additional cleanup bundled with this release (beyond DST-753):

  • Close button now matches the rest of the system. The previous theme defined a close slot for SectionMessage with bespoke overrides (size-8, [&_svg]:size-6, text-foreground, negative margins) that produced a visibly larger close button than every other close button in the design system. The component now renders the shared <CloseButton> with no overrides, so it gets the same 16px icon, focus ring, hover-opacity, and rounded-full styling as Dialog, Drawer, etc. The close slot has been removed from the SectionMessage theme type.
  • Component cleanup. Dropped a stale useButton(props, buttonRef) call that was applying div-level props to a button, the unused buttonRef, and the {...buttonProps} spread on <CloseButton>. The Button inside CloseButton already provides all keyboard/press semantics.
  • Theme variant order normalized. info (the default) is now listed first across the container, content, and icon slots in theme-rui, matching the variant table in the docs and the existing defaultVariants setting.

  Docs:

  • New anatomy SVG matching the Card / Sidebar / SelectList style; title and close button marked as optional, with content rules (no period in title, don't repeat title in body).
  • Two realistic announcement demos: a bulk-archive form (polite, with RAC validate and the key re-announce pattern) and a server-availability save error (assertive).
  • Added focus-management guidance for dynamic appearance and post-dismiss.
  • Added form-summary placement rule pairing <SectionMessage> with field-level validation.
  • Added action constraints (one primary action, verb+noun labels, descriptive link text).
  • Added two-line body rule with a link-out overflow pattern for longer content.
  • Folded the previous Position subsection into Usage; removed redundant Do/Don't tiles; renamed subsections to Dismissal / Actions / Announcements.
  • Drive-by: typo fix in the feedback-messages pattern doc.

  Migration:

  • Code relying on getByRole('alert') or [role="alert"] selectors to find rendered SectionMessage error nodes needs to be updated. The message text itself is still rendered as before; only the wrapper role is gone.
  • Consumers who previously wrapped a dynamic <SectionMessage> in their own <div role="status"> or <div aria-live="polite"> can replace that wrapper with <SectionMessage announce>.
  • Custom themes that defined a SectionMessage.close slot will now see a type error. Remove the slot. Close button styling now flows entirely from the CloseButton theme.
  • The SectionMessage's close button is visually smaller after this release (matches every other close button in Marigold). If you previously relied on the larger size, that was an inconsistency, not a feature.

• b7122c0: feat(SelectList): standardized API, item layout, and visual distinction from ListBox (DST-1076)

  <SelectList> has been refined into a first-class form field for picking one or many items from a visible list of rich two-line rows. This release contains breaking renames and a tightened type surface.

  Breaking changes

  • SelectList.Item → SelectList.Option. The option semantic matches Select.Option and the HTML <option> mental model. Update any <SelectList.Item> usage to <SelectList.Option>.
  • SelectList.Action has been removed. Drop your <ActionMenu> or <IconButton> directly inside <SelectList.Option> — the component positions, sizes, and styles the nested control automatically via ButtonContext. Limit: one action per option (multi-button groups will arrive with a future ActionGroup).
  • Leading-image slot has been removed. Compose images inside <Text slot="label"> (or anywhere in children) as you see fit.
  • selectionMode="none" is no longer accepted. SelectList is a form field; the default is now "single".
  • onChange is strictly typed per selectionMode: (key: Key | null) => void for single, (keys: Key[]) => void for multiple. The shape matches Select<T, M>. Passing setState directly may require adapting the callback.

  Other changes

  • Selection indicator — single-select rows render a visible radio circle; multi-select renders a checkbox.
  • Label & description slots — use <Text slot="label"> and <Text slot="description"> inside <SelectList.Option>. The row skeleton is selection · label + description · action (optional).
  • Dev-mode warning when textValue is missing on an option whose children aren't a plain string.
  • Own theme entry — SelectList ships a dedicated theme component. The theme exposes first-class label, description, and action entries; slot styling no longer uses descendant selectors. Consumers with custom themes must add or update a SelectList entry.

  Documentation

  The SelectList docs page is rewritten around the new API. Adds an anatomy diagram, a decision table for choosing between <SelectList> and lighter controls (<Radio.Group>, <Checkbox.Group>, <Select>, <Combobox>, <TagField>), and dedicated sections for multi-selection, per-row actions (decision-help and configuration patterns), horizontal orientation, and empty state. Replaces selected prose with Do/Don't tiles. Tightens the accessibility section to what's specific to SelectList (keyboard model, label requirement, textValue for rich rows).

  Migration

  - <SelectList selectionMode="none">
  -   <SelectList.Item id="free">
  -     <SelectList.Action>
  -       <IconButton aria-label="Info"><Info /></IconButton>
  -     </SelectList.Action>
  -     Free
  -   </SelectList.Item>
  - </SelectList>
  + <SelectList selectionMode="single">
  +   <SelectList.Option id="free">
  +     Free
  +     <IconButton aria-label="Info"><Info /></IconButton>
  +   </SelectList.Option>
  + </SelectList>

• b7122c0: feat(DST-1513): <Select>'s renderValue now receives a second details argument with the selection count, and works when options are provided as static <Select.Option> children (previously it was silently skipped unless the options came from the items prop).

  This makes it easy to summarise a multi-select trigger instead of listing every value, e.g. renderValue={(items, { count }) => `${count} selected`}. The default trigger rendering is unchanged: without renderValue, a multi-select still lists the selected values.

• b7122c0: feat(DST-1404): add renderValue prop to <Select> for custom trigger rendering. When provided, the callback receives the selected items and replaces the default trigger render. Useful when the trigger should look different from the option (e.g. avatar plus name in the trigger, avatar plus name plus role in the dropdown). The placeholder still renders when nothing is selected.

• b7122c0: feat(DST-1322): add current prop to Sidebar.Nav for automatic active item detection

  Sidebar.Nav now accepts a current prop that resolves the active leaf automatically — pass the current pathname (string) for smart segment-aware matching, or a predicate (href, key) => boolean for full control. Removes the per-item active={pathname === '/...'} boilerplate. The per-item active prop on Sidebar.Item still works as a local override.

• b7122c0: feat(DST-1370): migrate ContextualHelp, SectionMessage, and EmptyState to the slot-configuration pattern

  • SectionMessage.Title now renders a semantic heading (<h3> by default) instead of a <div>, fixing an a11y gap. The level is configurable via the new headingLevel prop on <SectionMessage>. When a title is present, the container becomes a role="group" labelled by the title via aria-labelledby.

  • New <SectionMessage.Description> sub-component for a short summary between title and content.

  • ContextualHelp.Title now uses slot="title", so the popover dialog gets a proper aria-labelledby. The title tag changes from <h3> to <h2> (same as Dialog.Title); visual appearance is unchanged.

  • New <ContextualHelp.Description> sub-component.

  • The Theme type now requires a description key on the SectionMessage and ContextualHelp style records; themes defining styles for these components must add it.

  • EmptyState's title now renders as a semantic heading (<h3> by default, configurable via the new headingLevel prop), and its description renders through the <Description> primitive (same DOM as before, now sitting 4px below the title to match the description rhythm of the other components). The flat-props API is unchanged.

  • All three roots now also publish a ButtonContext, completing the slot-configuration set. It scopes action buttons (e.g. those placed in SectionMessage.Content, the EmptyState action, or ContextualHelp content) to a clean baseline so they never inherit a surrounding container's button cascade (such as a Panel.Header's ghost/small look). No variant or positioning is imposed, so existing usage renders unchanged.

• b7122c0: feat(DST-1098): persistent idle sort indicator on sortable columns

  Table.Column with allowsSorting now shows a Lucide arrow-down-up icon when the column is sortable but not currently the active sort column. The active ascending/descending icons (SortAscending / SortDescending) are unchanged.

Patch Changes

• b7122c0: feat(DST-1461): Accordion aligns like Table inside a bled Panel.

  What changed:

  • A bled Panel.Content / Panel.CollapsibleContent now publishes a --bleed-px custom property (set to the Panel's --panel-px). Non-bled content is unchanged and does not set it.
  • The default Accordion header and content inset themselves by --bleed-px (via --accordion-x-padding, which falls back to 0px). So inside a bled Panel the item dividers span edge-to-edge while the header/content align with the Panel title.
  • In a bled Panel the full-width header (and its focus ring) is inset off the Panel border by one spacing step, matching Panel.Collapsible.

  Why:

  Dropping an <Accordion> into <Panel.Content bleed> now gives full-width item dividers and header/content aligned with the Panel title — the same behavior Table already had, with no new Accordion prop or variant.

  Impact:

  • Standalone Accordions are unchanged (--bleed-px is only set by a bled Panel container, so the inset resolves to 0px).
  • Accordions inside a non-bled Panel.Content are also unchanged — the inset stays 0px, so header/content keep aligning with the dividers as before (no double indent).
  • Only Accordions inside a bled Panel gain the inset. The card variant is unaffected; it keeps its own px-4.

• 85e9a45: Fix Autocomplete's public onSubmit type, which declared (value, key) while the implementation, JSDoc, and both docs demos all used (key, value). The type now matches the actual (key, value) signature — no runtime behavior changes.

• b7122c0: style(DST-1586): scale breadcrumb separators with the size variant and emphasize the current page

  The chevron separator now scales with the breadcrumb size (small/default/ large) instead of rendering at a fixed 16px, so it stays a quiet mark between crumbs; gaps tighten on small accordingly. The current page reads a tier above the trail — medium weight in the foreground ink — matching how the sidebar marks the active item.

  The <Breadcrumbs> chevrons drop their hardcoded size={16} prop: the theme's Breadcrumbs item slot now owns the separator size ([&_svg]:size-*, which wins over the SVG's width/height), so the number in the component was dead and misleading. Themes that don't set a separator size fall back to the icon's default size.

• b7122c0: fix(DST-1659): draw the Checkbox box from theme tokens instead of raw Tailwind literals

  The checkbox icon painted itself with bg-white and border-black. Both now come from the token layer: bg-surface for the fill and border-control-border for the affordance edge, matching how every other control draws its boundary.

  @marigold/theme-rui already overrides both slots in Checkbox.styles.ts, so the rendered markup and the visual result are unchanged there. The literals only leaked in custom themes, where a consumer could not recolor the box edge or fill without fighting a hardcoded value. This was the last raw color in the component layer.

• b7122c0: feat([DST-1395]): SelectList horizontal layouts now automatically flip to a vertical stack when the wrapping container is narrower than 40rem (~640px).

• b7122c0: feat(DST-1286): Panel renders a data-panel attribute on its root

  The root <section> rendered by <Panel> now carries a valueless data-panel attribute. External stylesheets and host pages can use it as a stable selector (e.g. :not(:has([data-panel]))) to detect whether a Panel is present without depending on Tailwind utility classes.

• b7122c0: fix([DST-1295]): replace gap between CheckboxGroup and RadioGroup items with per-item padding so the full space between items is clickable. Vertical items now meet the 24px target-size minimum; horizontal spacing keeps visual parity. Standalone Checkbox is unaffected.

  Also align the label and icon: switched the inner row layout from items-center to items-start so the icon stays on the first line when the label wraps. Radio labels now use leading-4 to match Checkbox, and Radio's icon-to-label gap moves from an inline gap-[1ch] to the theme-driven gap-x-2 for parity with Checkbox.

• b7122c0: feat([DST-1339]): FileField gains a size="small" compact layout renders as a single-row input-height control (upload button + file list) instead of the full drop-zone, suited for space-constrained forms.

• b7122c0: refactor(DST-1367): Panel adopts the slot-configuration pattern

  Panel.Header is now a single <Provider> that configures HeadingContext, TextContext, ActionButtonContext, and ActionGroupContext for everything nested inside it. Consumers drop slot-aware primitives directly into the header — <Title>, <Description>, and any of <ActionButton>, <ActionGroup>, <ActionMenu>, <LinkButton> — and the Panel injects level, ids, ref wiring, grid-area positioning, and the action cascade via context.

  The compound sub-components that paired with Panel.Header are removed because slot-aware role primitives subsume their responsibilities:

  • <Panel.Title> → use <Title>.
  • <Panel.Description> → use <Description>.
  • <Panel.HeaderActions> → drop the wrapper; the action primitives themselves (<ActionButton>, <ActionGroup>, <ActionMenu>, <LinkButton>) land in the actions grid cell via the context className that Panel.Header publishes.

  Multiple actions belong inside an <ActionGroup> — the cluster claims one cell and renders as a toolbar. A raw <Button> inside Panel.Header is intentionally not slot-aware: it stays as a footgun so the action primitives are the obvious choice for header chrome.

  Panel.CollapsibleHeader adopts the same shape: <Panel.CollapsibleTitle> / <Panel.CollapsibleDescription> are removed in favour of plain <Title> and <Description> inside the header. Panel.CollapsibleHeader publishes slot-keyed HeadingContext and TextContext inside its disclosure trigger so the primitives render as spans (matching the heading-inside-button constraint), while the structural <hN> semantics come from Panel.CollapsibleHeader itself.

  <Description> now honours elementType from its surrounding TextContext slot config. Panel.Header delivers elementType: 'p' so the description renders as a paragraph; Panel.CollapsibleHeader delivers elementType: 'span' so it nests cleanly inside the disclosure trigger button. Elsewhere, <Description> continues to render as RAC's default <span>.

  <Headline> now defaults to opting out of any surrounding HeadingContext slot config (slot defaults to the no-slot opt-out instead of undefined). This avoids "A slot prop is required" runtime crashes when a bare <Headline> is rendered inside a container that publishes a slot-keyed HeadingContext — such as a <Panel> that publishes its title slot at the root. An explicit slot prop on <Headline> still overrides the default.

• b7122c0: refactor(DST-1374): use <TextValue> and <Description> for selection-container items

  Consumer-facing JSX in component stories and documentation demos for <Select>, <SelectList>, <ListBox>, <Menu>, <ComboBox>, and <Autocomplete> now composes item content with the <TextValue> and <Description> primitives instead of hand-written <Text slot="label"> / <Text slot="description">. The primitives are drop-in replacements that render the same RAC <Text> with the same default slot values, so rendering, aria-describedby wiring, and accessibility are identical.

  <Menu.Item> gains first-class label and description theme slots, mirroring <SelectList.Option>. MenuItem merges the Marigold theme classNames into RAC's TextContext so nested <TextValue> / <Description> pick up Menu styling without losing RAC's slot wiring. Menu items adopt a two-column grid layout (icon column + content column) so descriptions render below labels; existing plain-text and icon+text menu items are unaffected.

  The Menu theme type in @marigold/system is extended with required label and description slot keys. Consumers maintaining a custom theme that overrides Menu will need to add these two slots to satisfy the type. @marigold/theme-rui is updated accordingly in this release.

  No public API change on Select.Option, SelectList.Option, ListBox.Item, Menu.Item, ComboBox.Option, or Autocomplete.Option.

• b7122c0: fix([DST-1410]): restore RangeCalendar build by using createWidthVar for the width prop. The component still imported the width runtime map from @marigold/system, which DST-901 removed when it migrated dimension props to CSS variables. This broke main for everyone — typecheck, unit tests, and Storybook tests all failed on every open PR. Apply the same migration pattern Calendar already uses: w-(--width) className plus style={createWidthVar('width', width)}.

  DST-1410

• 2b9df4c: docs(DST-1427): promote EmptyState from beta to stable

  EmptyState has been in beta since January. v18 is where its surface settled, with the title becoming a semantic heading behind a configurable headingLevel and the description moving onto the shared Description primitive, so the badge comes off now that the API being frozen is the one 18.0.0 ships. title, description, action and headingLevel are covered by the usual semver guarantees from here on. variant and size stay open ended, as they do on every themed component: theme-rui defines no values for either today, and anything it adds later widens the accepted set rather than narrowing it. No code changes.

• b7122c0: feat(DST-1439): give SectionMessage a neutral surface with a muted variant border

  SectionMessage no longer fills its background with a per-variant tint (bg-info, bg-success, bg-warning, bg-destructive). It now sits on a neutral ui-surface with neutral title and body text. The severity is carried by a muted per-variant colored border (the accent mixed halfway into the neutral border) plus the colored icon.

  This is a visible design change for every variant. Because the surface stays neutral, standard <Button> and <Link> actions placed inside read correctly instead of floating on a colored fill. On the old tint the default <Button> (variant secondary, which has its own ui-surface fill) rendered as a foreign chip on the colored container for every variant except error. The muted border sits at the container edge, away from the content, so it signals the variant without touching the actions. The border color is set through ui-surface's --ui-border-color hook, which is registered as a non-inheriting custom property, so it stays scoped to the container and does not leak into nested action borders.

  Variants stay distinguishable without relying on color alone through the colored border, the distinct icon shape and color, and the title. The bordered, in-flow treatment keeps an inline message visually distinct from the floating, shadowed <Toast>. No API changes.

• b7122c0: fix(DST-1467): make MorphCaret SSR-safe

  The shared reducedMotion constant in utils/reducedMotion.ts sampled window.matchMedia at module evaluation, so the server bundle always resolved to false while a client with prefers-reduced-motion: reduce resolved to true — producing a React 19 hydration mismatch (silently absorbed in production, logged as an error in dev). MorphCaret now reads the preference via useReducedMotion() from motion/react, matching SidebarToggleIcon and TrayModal. The obsolete utils/reducedMotion.ts has been removed.

• b7122c0: fix(DST-1480): only set aria-labelledby on Panel when a Title is present

  <Panel> previously rendered aria-labelledby={titleId} whenever no aria-label was given, even if no <Title> was present. That left the <section> landmark pointing at an id no element carried, producing a broken/empty accessible name.

  The guard now also checks hasTitle, so aria-labelledby is only applied when a <Title> actually renders. This mirrors the stricter guard adopted by Card in DST-1373.

  DST-1480

• b7122c0: fix(DST-1501): <Panel p={number}> now applies padding

  A numeric p (e.g. p={4}) silently produced no padding: the value was suffixed with -x/-y and resolved to a non-existent var(--spacing-4-x). A scale value is now applied directly (calc(var(--spacing) * 4)) on both axes, matching px/py and <Page>. Named inset tokens are unchanged.

• b7122c0: Extract resolveInsetAxes helper to centralise inset-padding axis resolution.

  The p → px/py resolution logic (branching on whether the value is a numeric scale or a named token) was copy-pasted across Page, Panel, and Card. This duplication caused the <Card p={number}> silent bug (resolving to a non-existent var(--spacing-4-x)), the same class of bug that had already been fixed independently in Panel (DST-1501) and Page (DST-1360).

  • Adds resolveInsetAxes({ p, px, py, defaultInset }) to @marigold/system alongside createSpacingVar.
  • Adopts the helper in Card, Panel, and Page, fixing the live <Card p={number}> bug as part of the refactor.
  • Fixes the same numeric-p bug in SelectList (inline, since its conditional-axis pattern differs).

• b7122c0: chore(DST-1503): Migrate Checkbox, Switch, and Radio off the deprecated react-aria-components single-element exports (Checkbox/Switch/Radio) to the *Field + *Button composition introduced in react-aria-components@1.18.0. This removes the ts(6385) deprecation warnings with no change to the public API, behavior, or visual output.

• b7122c0: chore(DST-1517): HelpText renders the shared Description component

  HelpText now renders the description through the shared Description component instead of react-aria's raw <Text slot="description">. Description is just <Text slot="description">, so the rendered output and aria-describedby wiring are unchanged. The win is a single Description building block shared by both the slot-configuration containers and the form fields, so the two cannot drift apart. No names, output, or behaviour change.

• b7122c0: refactor(DST-1534): build the Calendar year dropdown on react-aria's CalendarYearPicker

  The year dropdown now consumes react-aria's CalendarYearPicker render-prop (mirroring how the month dropdown already uses CalendarMonthPicker), replacing the hand-rolled year list and its localized aria-label workaround. This was unblocked by react-aria's June 2026 fix that makes maxValue inclusive, so the boundary year is reachable. Unbounded calendars keep the ±20-year window and bounded ranges stay fully reachable at both ends. When only one bound is set, the open side now widens to keep that bound reachable instead of staying at a fixed ±20 years.

• b7122c0: refactor(DST-1546): replace the bespoke TagGroup "Remove all" wrapper with a plain <Button> via a ButtonContext cascade

  TagGroup now provides a link/small ButtonContext around its internal RemoveAll render, so the "Remove all" action is a bare Marigold <Button> instead of the raw react-aria Button with hand-rolled link styling. This mirrors the cascade pattern already used by ActionBar and Panel.Header.

  The change is internal-only. TagGroupRemoveAll is not part of the public API (TagGroup renders it itself), the authoring API (removeAll / onRemove) is unchanged, and there is no behavioral or accessibility change.

  The redundant removeAll theme style is removed from Tag.styles.ts (the link variant at size="small" reproduces it), and the now-unused removeAll key is dropped from the Tag theme type.

• b7122c0: chore(DST-1547): move z-index classes out of theme style files into component implementations

  Per the z-index management rule (CLAUDE.md), z-* utilities belong in component implementations, never in theme *.styles.ts files. The local focus/drop/sticky stacking classes for Calendar/RangeCalendar, LegacyTable, ListBox, Table, ToggleButton and SegmentedControl have been moved from their theme-rui styles into the matching component className (via cn()), preserving the exact modifiers and important flag. No visual or stacking change.

• b7122c0: fix(DST-1553): drop the dead 'small' | 'medium' | 'large' literals from Tabs size

  The size and variant props on Tabs resolved to nothing after the RUI theme size variants were removed (2025-03-04). size now accepts a plain string (matching Label and HelpText) instead of advertising specific values that no theme backs. The props stay in place as theme hooks, so a consumer theme can define its own size/variant variants without the misleading built-in union.

• b7122c0: fix(DST-1565): stop the DatePicker and DateRangePicker popover from stretching to the trigger width

  The shared Popover forces its width to at least the trigger's via min-w-(--trigger-width). That is right for field dropdowns (Select, ComboBox) whose list should line up with the field, but wrong for a calendar, whose width is its own. A new matchTriggerWidth prop (default true, so every existing popover is unchanged) lets DatePicker and DateRangePicker opt out, so the calendar sizes to its content instead of the full field width.

• b7122c0: refactor(DST-1585): drive SegmentedControl's reduced-motion scroll from CSS

  SegmentedControl now gates its selection-reveal scroll animation with the same CSS approach as Tabs: the scroll container carries motion-safe:scroll-smooth and the component's scrollTo uses behavior: 'auto', which follows that CSS — animating when motion is allowed and jumping instantly under reduced motion. This replaces the previous JS window.matchMedia('(prefers-reduced-motion)') check. Behavior is unchanged; the initial mount reveal stays instant. No API change.

• b7122c0: style(DST-1602): drop the removed elevation shadow from SelectionIndicator

  SelectList's SelectionIndicator no longer applies shadow-elevation-border, which is removed from theme-rui in the accompanying change. The indicator keeps its border and surface fill.

• 68122ff: refactor(DST-1627): extract a shared CalendarBody for the Calendar/RangeCalendar grid layout

  The multi-month and single-month layout markup was duplicated verbatim in Calendar and RangeCalendar, so every layout tweak had to be made twice and the copies could silently drift. Both components now render that markup through one internal <CalendarBody>, which reads the theme classes, visible months, min/max value, disabled state and a new isRange flag off the existing CalendarContext, keeping the touch pointerup guard (DSTSUP-257) range-only. Pure refactor: the rendered DOM, the styling and the behavior are unchanged.

• b7122c0: fix(DST-1629): apply a SelectList item's action slot styling to a trailing Marigold Button, LinkButton, or ActionMenu so the action spans both rows and stays centered. The action slot className was only provided on RAC's ButtonContext, which Marigold's Button ignores, so the action auto-placed into the title row and stretched it, pushing the description down. The className now flows through the Marigold ButtonContext that these components read.

• b7122c0: fix(DST-1630): match the Panel collapsible header caret to the Accordion chevron. It rendered at the default 24px in the foreground color, while Accordion uses a 16px text-secondary caret, so the two collapsible patterns looked inconsistent. The Panel caret now renders at 16px and its color is driven by a new themeable collapsibleIcon slot (defaulting to text-secondary in the RUI theme).

• b7122c0: fix(DST-1632): center the section Loader together with its label and give the Table drag handle edge spacing.

  The section Loader sized its container to a fixed square, so a labelled loader overflowed the box and the section wrapper centered the box instead of the spinner-and-label group. The spinner now carries the fixed size and the container is content-sized, so the whole group centers as one. The Table drag cell had no padding, leaving the grip flush against the row edge. It now uses the shared cell edge padding and its column matches the checkbox column width, so the grip lines up with its header and the first cell.

• b7122c0: fix(DST-1645): align preset quick-selection rows with the tray nav row on small screens. The preset listbox rows reuse the shared ListBox p-1 focus-ring gutter, which insets them narrower than the full-width nav row. On small screens the list now negates that gutter (-mx-1) so rows span the tray edge-to-edge and line up with the nav row, while the gutter still keeps each row's focus outline from being clipped by the list's overflow.

• e0f9c05: fix(DST-1647): honor the router's useHref in sidebar links

  Sidebar.Item and Sidebar.RailItem rendered the raw href prop straight onto their anchor, which shadowed the value produced by RouterProvider's optional useHref. Applications served from a prefix, such as a Next.js basePath, ended up with sidebar markup pointing at an unprefixed URL, so middle click and "copy link address" resolved to the wrong page. Both components now render the transformed href and keep handing the unprefixed path to navigate, matching how React Aria's own useLink behaves. Consumers that do not pass useHref see no change, because the default leaves the href untouched.

  The RouterProvider docs now cover useHref next to navigate, and the component gained a matching Storybook story and prop description.

• b7122c0: fix(DSTSUP-256): show cursor-not-allowed on disabled TagField

  The hidden trigger button inside TagField had cursor-pointer hardcoded, so hovering a disabled TagField showed the text/caret cursor instead of not-allowed — inconsistent with Select and ComboBox. Added disabled:cursor-not-allowed to the trigger button so the cursor now matches the rest of the form components.

• b7122c0: fix(DST-1354): restore collapsing Table.EditableCell edit trigger

  The overlay/ring affordance introduced in #5250 (DST-1275) did not read as editable in user testing: sighted users did not associate the hover ring with inline editing, and there was no discoverable trigger for keyboard or touch. This change reverts that approach and restores the explicit pencil edit button.

  The trigger collapses to zero layout space at rest (w-0 overflow-hidden) and expands on row hover or keyboard focus, so static layout remains clean while the affordance is discoverable the moment the user interacts with the row. When expanded, the wrapper switches to overflow-visible so the button's focus outline is not clipped. The cell itself stays clickable as a touch target. Enabled editable cells always truncate their content to stay aligned with column headers and match the single-line editing controls; disabled cells behave like a regular Table.Cell.

• b7122c0: fix(FieldBase): forward isInvalid, isRequired, and isDisabled to RAC components passed via as

  When FieldBase renders through a React Aria Components element (e.g. as={RACComponent}), validation props are now forwarded so the underlying RAC element receives them. Plain DOM elements continue to skip these props to avoid unknown attribute warnings.

• b7122c0: fix(Radio): apply width via CSS variable instead of raw class name

  Radio built its width class name from the raw token directly (e.g. cn(width || groupWidth || 'w-full'), where width could be a literal "1/2"), which Tailwind can't statically detect at build time, so no CSS was ever generated — setting width had no visible effect.

  Radio now follows the same pattern already used by FieldBase/TextField/NumberField: a static w-(--field-width) class with the actual value injected via createWidthVar. Individual Radio items inside a sized Radio.Group now inherit the group's already-computed width instead of recomputing it, which previously caused a double-shrink (e.g. width="1/2" rendering at 1/4 instead of 1/2).

• b7122c0: fix(DST-1352): use correct outline for focus + error state in compound fields

• b7122c0: fix: stop exposing style on Label

  Label only removed className from its react-aria props, leaving style in the public interface. It now omits both, matching the className/style removal convention used across the design system (e.g. Description, TextValue). Theme the label via variant/size instead.

• b7122c0: chore(DST-1364): migrate ListBox item label/description styling off descendant selectors

  ListBox now exposes label and description as first-class theme entries, and ListBox.Item injects their classNames into react-aria's TextContext (merging rather than replacing, so RAC's aria-describedby wiring is preserved) instead of styling [slot=description] via a descendant selector on item. This also benefits Select.Option, ComboBox.Option, and Autocomplete.Option, which re-export ListBox.Item.

  The Theme type in @marigold/system now requires label and description keys on the ListBox record, so custom themes implementing ListBox must add these entries. No public API change in @marigold/components; visually identical except description now explicitly sets font-normal (parity with SelectList).

• b7122c0: fix(DST-1660): keep a loading Button's accessible name

  A <Button loading> previously had no accessible name at all. The label is kept mounted so the button doesn't change width when the spinner is overlaid, but it was hidden with invisible (visibility: hidden), which removes a subtree from the accessibility tree — not just from the screen. The spinner's own aria-label did not substitute, because that is a child widget's name rather than text content the button can take its name from.

  The effect: a screen reader announced "Delete, button" before the press and roughly "dimmed, button" the moment the action started, so the user lost the identity of the operation they were waiting on. That is a WCAG 2.1 §4.1.2 (Name, Role, Value) failure at Level A, and it was worse than a plain disabled button, which keeps its name.

  The label is now hidden with opacity-0. It reserves the exact same layout box, so nothing moves — verified by comparing getBoundingClientRect() for every button across all three surface grounds, with display: none as a control to confirm the measurement detects real shifts. Rendering is unchanged; this is purely a fix to what assistive technology reports.

• b7122c0: chore: extract shared useMergedTextSlots helper for RAC TextContext slot styling

  ListBox.Item and SelectList.Option both merged label/description theme classNames into react-aria's TextContext (spreading the parent slot first to preserve RAC's aria-describedby id). That accessibility-critical logic — and its SlottedContextValue type — now lives in a single useMergedTextSlots hook that both consume. No public API or visual change.

• b7122c0: Panel.Title may now be used as a direct child of Panel when the Panel has only a title (no description, no actions) — Panel.Header is the layout wrapper for title + description + actions, but a title-only Panel doesn't need it. Accessibility (aria-labelledby) and horizontal panel padding still resolve correctly. Panel.Description and Panel.HeaderActions continue to require a Panel.Header wrapper. No change to existing usages.

• b7122c0: test(DST-1329): add comprehensive unit and play-test coverage for Panel and its sub-components (Header, Title, Description, HeaderActions, Content, Footer, Collapsible, CollapsibleHeader, CollapsibleTitle, CollapsibleDescription, CollapsibleContent, Context). No runtime changes.

• b7122c0: fix(DST-1622): ProgressCircle and Loader respect a consumer-provided aria-label / aria-labelledby.

  What changed:

  • ProgressCircle no longer overwrites a caller's accessible name. The built-in localized "loading" message is now only a fallback, applied solely when the consumer provides neither aria-label nor aria-labelledby.
  • Loader (BaseLoader) uses the same fallback: the localized message is applied only when there is no aria-label, aria-labelledby, or visible children label — and it no longer emits a redundant aria-label next to a consumer's aria-labelledby.
  • A fullscreen Loader now stays reliably named: when the consumer supplies their own aria-labelledby, the overlay Dialog references that element directly instead of the intermediate loader node (the accessible-name spec does not follow a second aria-labelledby hop, which otherwise left the modal unnamed).

  Why:

  Previously the aria-label was set after {...props} was spread, so a caller passing aria-label (or aria-labelledby) had no effect and every progress circle announced the same generic "Loading…" string. This prevented labelling a spinner for its context (e.g. "Sending reminders" in a bulk-action flow).

  Impact:

  • Callers that pass no label (e.g. the spinners inside Button, ComboBox, SearchInput) are unchanged — they still get the localized fallback.
  • Callers that pass aria-label/aria-labelledby now get their own accessible name.

• b7122c0: fix(ProgressCircle): resolve named size tokens to a numeric SVG dimension

  A named size token (default | large | fit) was forwarded unchanged to the underlying <SVG> element, which renders width/height as `${size}px` — producing invalid attribute values like width="defaultpx" and emitting console errors. The SVG now resolves named tokens to the pixel dimension of their theme size-* class (default → 80, large → 144) for its width/height attributes and stroke-width math, so the stroke stays proportionate and the rendered output is unchanged. fit is content-sized and has no intrinsic dimension, so it falls back to the <SVG> default of 24.

  The stroke-width comparison also switched from a string compare (size <= '24') to a numeric one, which additionally fixes multi-digit sizes that were previously mis-classified (e.g. size="100" computed a strokeWidth of 2 instead of 4).

• b7122c0: docs: improve AutoTypeTable prop rendering

  Centralizes the display of design-system aliases in the component docs' prop tables. Props whose types reference aliases from @marigold/system or @marigold/types (e.g. SpacingTokens, Scale, WidthProp, NonZeroPercentage) now render with a meaningful summary in the main cell and the full list of resolvable literal values on row expand — instead of a wall of literals in the cell and a redundant alias name on expand.

  Before:

  • Cell: SpacingTokens<Tokens> (a fabricated generic, inconsistent across components)
  • Expand: SpacingTokens | Scale | undefined (same alias names, no new info)

  After:

  • Cell: SpacingTokens | Scale (accurate, derived from the real type)
  • Expand: "96" | "80" | ... | "tight" | "related" | 0 (every concrete value)

  Under the hood this replaces 27 per-prop @remarks \TypeName`JSDoc overrides with a single fumadocs-typescript transform in the docs site, so future components pick up the same behavior automatically. A@remarks` tag on a prop still wins as an escape hatch.

  Multiselect.width and ComboBox.width now use WidthProp['width'] directly instead of FieldBaseProps<'label'>['width'] — structurally identical, no runtime change.

• 0e2c676: chore(DST-1680): update React Aria to the 1.20.0 line.

  What changed:

  • react-aria-components 1.19.0 → 1.20.0, which pins react-aria 3.51.0 and react-stately 3.49.0.
  • @internationalized/date → 3.12.3 and @react-types/shared → 3.36.1. Both are required rather than cosmetic: RAC 1.20.0 declares ^3.12.3 / ^3.36.1, and pnpm will not move an in-range dependency unless the specifier changes, so leaving the old floors keeps a second (runtime-bearing) @internationalized/date copy in the tree.
  • The remaining declared floors now match the versions actually installed, which are also the latest published ones: @react-aria/form → ^3.2.1, @react-aria/live-announcer → ^3.5.1, @react-stately/form → ^3.3.1. Every other @react-aria/* and @react-stately/* entry was already current.

  Impact:

  No API change in Marigold components. Consumers pick up the upstream 1.20.0 fixes, including Table focus restoration, FocusScope restore-without-scrolling, and DatePicker focus handling in Firefox.

  One upstream behaviour change did need handling on our side: RAC 1.20.0 exposed a latent problem in the mobile ComboBox/Autocomplete tray, which lost its place in the accessibility tree. See the separate entry for that fix.

  @react-types/{button,checkbox,grid,table} deliberately stay on their type-only lines. All four latest minors pull @react-spectrum/provider — three as a direct dependency and grid 3.4.0 as a peer dependency — which drags in @adobe/react-spectrum and splits the i18n and overlay contexts. See the hold rule in .github/renovate.json.

• f331a41: chore: remove the leftover react-select dependency

  <Multiselect> was removed in v18 and it was the only thing importing react-select, but the dependency itself was never dropped. It is now gone from @marigold/components and from the root workspace, along with the external entry in tsdown.config.ts and the optimizeDeps pre-bundle entry in vitest.config.shared.ts that only existed for it. Nothing imports it anymore, so this is install-size only — no runtime change.

• b7122c0: fix(DST-1464): keep wide content inside <AppLayout.Main> from overflowing the viewport. The shell grid uses grid-cols-[auto_1fr] and the main grid item defaulted to min-width: auto, so any content wider than the available track (most visibly a <Select selectionMode="multiple"> with several long selected items) pushed the main column past the viewport and added a horizontal scrollbar. Adding min-w-0 to AppLayoutMain lets the 1fr track actually shrink, and children like truncate on the Select trigger can now clip at the right place.

• 04e22ab: fix(DST-1679): stop SelectList from advertising two props it silently ignores, and stop SelectList.Option from double-warning about a missing textValue.

  What changed:

  • layout and keyboardNavigationBehavior are no longer part of SelectListProps. Both were publicly typed but discarded at runtime: the list hardcodes layout="grid" after spreading consumer props, and RAC derives keyboardNavigationBehavior: 'tab' from that grid layout. They now sit in RemoveProps alongside selectionMode, which is the correct pairing for a prop the component owns.
  • SelectList.Option no longer warns about a missing textValue. RAC's GridList already warns on exactly that condition and its warning can't be suppressed, so one authoring mistake produced two console lines. The textValue fallback for plain-string children is unchanged.

  Why:

  layout was a prop that lied — the docs props table even published it as "stack" | "grid" defaulting to 'stack' while the component always rendered a grid. Passing it type-checked and did nothing, and it couldn't be removed later without a breaking change.

  The duplicate warning was also a false positive in one case: RAC accepts an aria-label in place of a textValue, so an option named that way is perfectly accessible, but the local warning fired on it anyway while RAC stayed silent.

  Impact:

  No runtime behavior change. layout and keyboardNavigationBehavior were already no-ops, so code passing them keeps working identically — it just no longer type-checks, which is the point. layout="grid" stays hardcoded because it is load-bearing: it gives the list arrow-key navigation on both axes, so a horizontal list moves with Left/Right and still moves with Up/Down after the container-query flip to a vertical stack. Under RAC's "stack" default a row captures Left/Right to walk its own focusable children and horizontal navigation stops working; a new test now guards that.

• b7122c0: feat([DST-1396]): mobile-optimized pagination layout

  Pagination now hides the numbered page buttons on small viewports (max-sm) and spreads the previous/next navigation buttons across the full width using justify-between. This produces a cleaner, touch-friendly pagination on mobile while preserving the full layout on larger screens.

• b7122c0: style(DST-1586): remove the overshoot from the sidebar toggle icon animation

  The sidebar toggle icon's panel/chevron animation eased with a spring-like overshoot bezier. It now settles on ease-out-quint, matching the theme's motion register — fast start, smooth stop, no bounce.

• b7122c0: fix(DST-1642): keep the Slider thumb from being clipped at the track ends

  The Slider thumb is centered on the track position, so at its min/max values it overhangs the track ends by half its width. Inside a scroll container such as Drawer.Content — whose overflow-y: auto promotes overflow-x to a clipping value — the overhang was sliced off, leaving a half-circle thumb (and it will be clipped unconditionally once Drawer.Content gains a bleed prop with no horizontal padding). The track is now inset by half the thumb width so the thumb always stays within the Slider's own box, independent of any ancestor padding.

• 6cfcea4: fix(DST-1686): make control a ground-adaptive track fill, and give the Slider rail the same token as Switch and SegmentedControl

  The Slider rail was the wrong token, painted twice. It used bg-border — the token for structural lines (dividers, grid lines, table rules) — where the Switch groove and the SegmentedControl track both use bg-control. On top of that, Slider applied its track style to two exactly-overlapping elements (the SliderTrack and an inner rail div), so the translucent bg-border composited with itself and the rail rendered at ~0.26 effective alpha instead of 0.14 — measuring #c0bfbe on white where the token specifies #dddddc. The redundant inner element is gone; the SliderTrack itself is the rail. Geometry is unchanged (both were h-2 at the same position) and touch-none, select-none and the disabled cursor stay on the interactive track element.

  control is now translucent (charcoal-950 / 16%, was the opaque charcoal-300). A track is not painted on one known background — it appears on a white Card, the gray page ground, a muted fill, and inside a hovered Table or ListBox row — and a fixed palette step drifts across those. charcoal-300 measured 1.53:1 on white but only 1.21:1 inside a hovered row, where the groove half-dissolved into the row it sits in. At 16% the four grounds land within 0.02 of each other (1.41–1.43:1), so a track weighs the same wherever it goes. Same rationale as border in DST-1672.

  The three tracks (Switch, SegmentedControl, Slider) read a touch lighter on white surfaces as a result: #d8d8d7 rather than #d4d0ce. The trade-off is that the white Switch thumb and SegmentedControl indicator now vary against the track by ground (1.43:1 on white, 1.79:1 on a hovered row) where the opaque step held a flat 1.53:1 — track-vs-ground and thumb-vs-track cannot both be constant while the thumb is opaque, and ground legibility wins because it decides whether the control reads as a control at all.

  The SegmentedControl indicator is larger. The frame around the selected thumb went from 4px to 3px (inset-y-[3px] on the indicator, p-[3px] on the list), so the thumb is 30px tall instead of 28px. Since the thumb's own 1px rim occupies the innermost pixel of that frame, 2px of bare track is what you see.

  The SegmentedControl thumb's focus ring is now the shared ui-state-focus. It previously hand-rolled only the outline, so it missed the other half of that utility — firming --ui-border-color to the opaque ring colour — and read noticeably lighter than every other focused control. A focused thumb and a focused Input now resolve identically: 3px outline-ring/50 at outline-offset-0, plus a 1px opaque oklch(0.52 0.008 54) rim. The ring stays outside the thumb, and 3px is the minimum frame that clears it: the list is a scroll container clipping at its padding box, so that padding is the only room an outset ring can grow into. Below 3px the first and last thumbs get a visibly shaved ring.

  The SegmentedControl track's corners are now concentric with the indicator's. Both used the shared rounded-surface, but two rounded rectangles nested with a gap only look like parallel arcs when the outer radius is the inner radius plus that gap. With the thumb at 8px and 3px of frame around it, the track needs 11px; at 8px its corner read visibly tighter than the arc it frames. The track is now calc(var(--radius-surface) + 3px) — derived from the token, so it stays concentric if the radius is retuned. This is a deliberate exception to using rounded-surface everywhere.

  The SegmentedControl indicator's resting rim is re-derived from the track. ui-frame draws its rim as an outset ring, so the indicator's rim lands on the track and composites over bg-control — it reads denser than the same control-border token does on a field. The old compensation subtracted a flat 0.08, hand-tuned against the previous opaque charcoal-300 track, which left the rim at an effective 0.31 against a field's 0.26. It is now derived from the track's own alpha (--control-alpha, newly exposed on the token), so a resting indicator rim and a resting Input edge render the same on every ground, and retuning the track cannot silently detune the rim.

  If you use bg-control in your own code, note that it is now translucent: two stacked elements that both carry it composite into a darker track than the token specifies, and anything that paints a translucent edge over a track has to account for the track underneath it.

• b7122c0: feat(DST-1366): introduce slot-configurable primitives

  Adds three text-bearing role primitives — Title, Description, TextValue — and three action primitives — ActionButton, ActionGroup, ActionMenu — that participate in slot-keyed context. Text/heading slots use React Aria's HeadingContext / TextContext directly; action slots use Marigold-owned contexts (ActionButtonContext, ActionGroupContext, ActionMenuContext) consumed via useContextProps.

  Title wraps RAC's <Heading> with slot="title" and level={2} as defaults, both overridable by HeadingContext. The level precedence is default ← context ← local, so a container can publish { level: 4 } and drive a stretch of nested <Title>s to <h4> without each call site setting it. Description and TextValue forward straight to RAC's <Text> with slot="description" and slot="label" defaults respectively, letting <Text> consume TextContext on its own. None of the three carry typography props. Styling cascades from the surrounding container (or selection item) via HeadingContext / TextContext. Consumers drop these into containers without any slot wiring. The container provides level, layout (e.g. a grid area), size, variant, color, and any other styling through a single Provider.

  ActionGroup is its own top-level component (own folder, own docs page, own Storybook entry) — there is no ActionButton.Group compound. It cascades size, variant, and disabled to nested <ActionButton>, <LinkButton>, and <ActionMenu> triggers via ActionGroupContext, with explicit per-prop precedence:

  • size: group wins (visual uniformity within a cluster).
  • variant: local wins (so a single destructive action can sit inside an otherwise uniform group).
  • disabled: local wins; the group provides the default. Writing disabled={false} on a child re-enables it inside an otherwise-disabled group.

  ActionMenu is rebuilt to compose its own MenuTrigger + <ActionButton> + Popover / Tray + RAC Menu rather than delegating to Marigold's Menu. The trigger uses <ActionButton> so an outer ActionButtonContext cascades to it. Marigold's Menu is untouched.

  LinkButton is now slot-aware: it picks up ActionButtonContext and ActionGroupContext so a navigating action can sit alongside <ActionButton> inside an <ActionGroup> and inherit the same cascade. A destructive-ghost variant is added to match <ActionButton>. Context is consumed read-only (via useSlottedContext) to sidestep the anchor/button ref-type mismatch that useContextProps would have created. The read-only consumption now also absorbs className from ActionButtonContext (mirroring <ActionButton>'s useContextProps-driven className merge) so positional classes published by a parent container — e.g. a grid-area class injected via ActionButtonContext — reach the rendered anchor. This lets <LinkButton> participate in container-driven layouts the same way <ActionButton> does.

  The container-driven layout pattern this enables comes with a corresponding convention: positional className flows through slot contexts and is absorbed at the first layout boundary. <ActionGroup> enforces the convention at its own boundary by scrubbing ActionButtonContext for its descendants — it republishes an empty value so nested <ActionButton>s and <LinkButton>s do not individually re-claim a positional class that was meant for the group as a whole. Cascading props (size, variant, disabled) still reach the children via ActionGroupContext, which they read independently. This convention scales to every future container that adopts the slot-configuration pattern.

  <ActionBar>'s legacy top-level ActionButton slot is internalized and re-exposed as ActionBar.Button. Existing consumers that already use <ActionBar.Button> are unaffected.

  Typography prep: Headline exports HeadlineSize, Text exports TextSize and TextVariant. The aliases aren't yet consumed by other primitives, but exposing them now lets a future typography-token PR replace runtime classes without rewriting consumer-facing prop types.

• b7122c0: fix: apply alignX from Table.Column to first column cells

  TableCellContent used a truthy check on columnIndex, causing it to skip the alignX lookup when columnIndex was 0 (first column). Replaced with a nullish check so all columns correctly inherit their alignment.

• b7122c0: Title level now accepts the string form (level="2") in addition to a number, matching Headline. The two heading primitives now share one level type. Non-breaking: existing numeric level={2} usage is unaffected.

• b7122c0: fix: make Select and Menu overlay appear above Drawer on small screens

  On small screens, Select and Menu render their options in a Tray (bottom sheet). The Tray overlay had z-40 in the theme while the Drawer overlay uses z-50, so the tray rendered behind an open drawer and was unreachable.

  Moved the z-index from the theme style file into the TrayModal component implementation (matching the project's z-index architecture rule), and raised it to z-50. Both the Drawer and Tray portal to document.body; at equal z-index, DOM order determines stacking. The Tray is always mounted after the Drawer, so it correctly appears on top.

• b7122c0: chore(deps): update react-aria-components, @react-aria/*, @react-stately/*, @react-types/*, and @internationalized/* packages to their latest versions.

• b7122c0: fix(DST-1355): widen variant and size prop types on Loader and ProgressCircle to accept arbitrary strings via | (string & {}). Matches the pattern already used by Button, Panel, and other components, and lets consumer themes register their own variant/size tokens without TypeScript errors while preserving IDE autocomplete for the built-in RUI values.

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

  • @marigold/system@18.0.0

18.0.0-rc.5

Minor Changes

• 0e2c676: fix(DST-1680): keep the mobile ComboBox/Autocomplete tray in the accessibility tree.

  On small screens both components render a Tray instead of RAC's Popover. When the listbox opened, useComboBox called ariaHideOutside([inputRef.current, popoverRef.current].filter(el => el != null)) — and because nothing claimed PopoverContext and the tray (with its input) portals in a later commit, both refs were null. ariaHideOutside hides everything outside the elements it is given, so an empty list hid the whole document, including the tray itself: screen readers could not reach the tray's dialog, search input or options at all.

  popoverRef now points at the tray — the dialog element while open, and the container the tray portals into while closed — so the hide pass keeps the tray visible. Background isolation is unchanged; it comes from the tray's own Modal, which runs ariaHideOutside(..., { shouldUseInert: true }). As a side effect useComboBox's blur handling works again, since it checks whether focus moved into popoverRef.current before closing.

  Tray now also accepts a ref to its dialog element.

• b7122c0: feat(DST-1492): add usePageFocus to move focus to the page <h1> on route change

  On client-side navigation focus lingers on the clicked link or falls back to <body>, so screen-reader and keyboard users get no signal that the screen changed. usePageFocus implements the standard SPA fix: given the current route key (typically the pathname), it makes the page <h1> programmatically focusable (tabIndex={-1}) and focuses it on each change.

  The first render is skipped so the initial load never steals focus, and it is a no-op on a page with no <h1> (an aria-label-only <Page>). <Page> stays router-agnostic: the route signal comes from the app router (RouterProvider). Call the hook from a component that persists across navigations (the layout / shell level), since the skip-first-render guard is per mount.

  import { Page, usePageFocus } from '@marigold/components';
  
  const PageFocus = ({ pathname }: { pathname: string }) => {
    usePageFocus(pathname);
    return null;
  };
  
  <Page>
    <PageFocus pathname={location.pathname} />
    <Page.Header>
      <Title>Billing</Title>
    </Page.Header>
    {/* … */}
  </Page>;

• b7122c0: feat(DST-1609): two-level sidebar navigation with Sidebar.Rail and Sidebar.RailItem

  Adds a two-level navigation mode to the sidebar: a persistent rail of icon-first top-level destinations next to a panel showing the active section's sub-navigation. A Sidebar.RailItem wrapping a Sidebar.Nav is a section that shows a panel. One with only an href is a direct link, and one inside Sidebar.Footer pins to the bottom of the rail. Its active prop overrides href matching for pages the URL can't identify. Collapsing (toggle or Cmd/Ctrl+B) hides the panel while the rail narrows to an icon strip, so top-level navigation always stays available. On small screens the rail renders as the same single-column drawer as the plain sidebar: sections drill in (opened at the active section) and links close the drawer.

  • <AppShell> switches to a full-width top bar automatically when a rail is present (pure CSS via :has()), so the brand never moves when the panel collapses.
  • Sidebar.Toggle gains variant="rail" for its top-bar placement between the brand and the breadcrumbs.
  • New theme tokens: --spacing-topbar (the shell's shared vertical datum for the top bar height, sidebar brand row, and rail sticky offset), the rail column widths --spacing-rail / --spacing-rail-collapsed / --spacing-rail-panel, and --spacing-touch-target (44px minimum row height on small screens, shared by the drawer's nav rows and the existing Tray-mode ListBox/Menu options).
  • Idle single-column nav labels darken a step (new --color-secondary-bold token, charcoal-700) so they clearly out-rank the quiet group-label captions.
  • Keyboard: the rail supports arrow-key (and Home/End) movement on top of its flat tab order, and the section panel's tab stop re-syncs to the current page when the route changes, so Tab re-enters at the active item.
  • The TopNavigation bottom edge is now an always-on border. The non-reusable ui-scroll-edge and ui-sidebar-seam-header utilities are removed, so the sticky bar and the sidebar header carry a plain border instead.
  • The AppShell header row is now sized auto (was a fixed 3.5rem), so a shell without a TopNavigation no longer reserves an empty header band, so the row collapses to the height of its content.
  • The shell's viewport-height claims (AppShell grid, sidebar and rail asides) read the new --ui-viewport-height custom property with a 100dvh fallback. Set it on a wrapper to render the shell inside a bounded container (embedded previews, demos) instead of the browser viewport. Nothing changes when it is unset.

• b7122c0: feat(DST-1641): add ErrorState, the error sibling of EmptyState: same anatomy (title, description, action, headingLevel), plus typed DOM passthrough (role, tabIndex, ref) for error-boundary fallbacks.

• b7122c0: feat(DST-1646): add OverflowRegion, a single-row layout primitive that hides trailing items instead of wrapping when horizontal space runs out, and restores them as space returns. Hidden items stay mounted (state preserved) but are removed from paint, tab order, and the accessibility tree. Like the other layout primitives it has no theme layer: space its items with the space prop (inherited from a parent Inline/Stack when unset, like Inline), label it with the forwarded region props (role, aria-label, ...), and pair it with the indicator render prop or the onOverflowChange callback so hidden items stay reachable through another surface, e.g. quick filters demoting into a filter panel.

Patch Changes

• 85e9a45: Fix Autocomplete's public onSubmit type, which declared (value, key) while the implementation, JSDoc, and both docs demos all used (key, value). The type now matches the actual (key, value) signature — no runtime behavior changes.

• b7122c0: fix(DST-1659): draw the Checkbox box from theme tokens instead of raw Tailwind literals

  The checkbox icon painted itself with bg-white and border-black. Both now come from the token layer: bg-surface for the fill and border-control-border for the affordance edge, matching how every other control draws its boundary.

  @marigold/theme-rui already overrides both slots in Checkbox.styles.ts, so the rendered markup and the visual result are unchanged there. The literals only leaked in custom themes, where a consumer could not recolor the box edge or fill without fighting a hardcoded value. This was the last raw color in the component layer.

• 68122ff: refactor(DST-1627): extract a shared CalendarBody for the Calendar/RangeCalendar grid layout

  The multi-month and single-month layout markup was duplicated verbatim in Calendar and RangeCalendar, so every layout tweak had to be made twice and the copies could silently drift. Both components now render that markup through one internal <CalendarBody>, which reads the theme classes, visible months, min/max value, disabled state and a new isRange flag off the existing CalendarContext, keeping the touch pointerup guard (DSTSUP-257) range-only. Pure refactor: the rendered DOM, the styling and the behavior are unchanged.

• e0f9c05: fix(DST-1647): honor the router's useHref in sidebar links

  Sidebar.Item and Sidebar.RailItem rendered the raw href prop straight onto their anchor, which shadowed the value produced by RouterProvider's optional useHref. Applications served from a prefix, such as a Next.js basePath, ended up with sidebar markup pointing at an unprefixed URL, so middle click and "copy link address" resolved to the wrong page. Both components now render the transformed href and keep handing the unprefixed path to navigate, matching how React Aria's own useLink behaves. Consumers that do not pass useHref see no change, because the default leaves the href untouched.

  The RouterProvider docs now cover useHref next to navigate, and the component gained a matching Storybook story and prop description.

• b7122c0: fix(Radio): apply width via CSS variable instead of raw class name

  Radio built its width class name from the raw token directly (e.g. cn(width || groupWidth || 'w-full'), where width could be a literal "1/2"), which Tailwind can't statically detect at build time, so no CSS was ever generated — setting width had no visible effect.

  Radio now follows the same pattern already used by FieldBase/TextField/NumberField: a static w-(--field-width) class with the actual value injected via createWidthVar. Individual Radio items inside a sized Radio.Group now inherit the group's already-computed width instead of recomputing it, which previously caused a double-shrink (e.g. width="1/2" rendering at 1/4 instead of 1/2).

• b7122c0: fix(DST-1660): keep a loading Button's accessible name

  A <Button loading> previously had no accessible name at all. The label is kept mounted so the button doesn't change width when the spinner is overlaid, but it was hidden with invisible (visibility: hidden), which removes a subtree from the accessibility tree — not just from the screen. The spinner's own aria-label did not substitute, because that is a child widget's name rather than text content the button can take its name from.

  The effect: a screen reader announced "Delete, button" before the press and roughly "dimmed, button" the moment the action started, so the user lost the identity of the operation they were waiting on. That is a WCAG 2.1 §4.1.2 (Name, Role, Value) failure at Level A, and it was worse than a plain disabled button, which keeps its name.

  The label is now hidden with opacity-0. It reserves the exact same layout box, so nothing moves — verified by comparing getBoundingClientRect() for every button across all three surface grounds, with display: none as a control to confirm the measurement detects real shifts. Rendering is unchanged; this is purely a fix to what assistive technology reports.

• 0e2c676: chore(DST-1680): update React Aria to the 1.20.0 line.

  What changed:

  • react-aria-components 1.19.0 → 1.20.0, which pins react-aria 3.51.0 and react-stately 3.49.0.
  • @internationalized/date → 3.12.3 and @react-types/shared → 3.36.1. Both are required rather than cosmetic: RAC 1.20.0 declares ^3.12.3 / ^3.36.1, and pnpm will not move an in-range dependency unless the specifier changes, so leaving the old floors keeps a second (runtime-bearing) @internationalized/date copy in the tree.
  • The remaining declared floors now match the versions actually installed, which are also the latest published ones: @react-aria/form → ^3.2.1, @react-aria/live-announcer → ^3.5.1, @react-stately/form → ^3.3.1. Every other @react-aria/* and @react-stately/* entry was already current.

  Impact:

  No API change in Marigold components. Consumers pick up the upstream 1.20.0 fixes, including Table focus restoration, FocusScope restore-without-scrolling, and DatePicker focus handling in Firefox.

  One upstream behaviour change did need handling on our side: RAC 1.20.0 exposed a latent problem in the mobile ComboBox/Autocomplete tray, which lost its place in the accessibility tree. See the separate entry for that fix.

  @react-types/{button,checkbox,grid,table} deliberately stay on their type-only lines. All four latest minors pull @react-spectrum/provider — three as a direct dependency and grid 3.4.0 as a peer dependency — which drags in @adobe/react-spectrum and splits the i18n and overlay contexts. See the hold rule in .github/renovate.json.

• 6cfcea4: fix(DST-1686): make control a ground-adaptive track fill, and give the Slider rail the same token as Switch and SegmentedControl

  The Slider rail was the wrong token, painted twice. It used bg-border — the token for structural lines (dividers, grid lines, table rules) — where the Switch groove and the SegmentedControl track both use bg-control. On top of that, Slider applied its track style to two exactly-overlapping elements (the SliderTrack and an inner rail div), so the translucent bg-border composited with itself and the rail rendered at ~0.26 effective alpha instead of 0.14 — measuring #c0bfbe on white where the token specifies #dddddc. The redundant inner element is gone; the SliderTrack itself is the rail. Geometry is unchanged (both were h-2 at the same position) and touch-none, select-none and the disabled cursor stay on the interactive track element.

  control is now translucent (charcoal-950 / 16%, was the opaque charcoal-300). A track is not painted on one known background — it appears on a white Card, the gray page ground, a muted fill, and inside a hovered Table or ListBox row — and a fixed palette step drifts across those. charcoal-300 measured 1.53:1 on white but only 1.21:1 inside a hovered row, where the groove half-dissolved into the row it sits in. At 16% the four grounds land within 0.02 of each other (1.41–1.43:1), so a track weighs the same wherever it goes. Same rationale as border in DST-1672.

  The three tracks (Switch, SegmentedControl, Slider) read a touch lighter on white surfaces as a result: #d8d8d7 rather than #d4d0ce. The trade-off is that the white Switch thumb and SegmentedControl indicator now vary against the track by ground (1.43:1 on white, 1.79:1 on a hovered row) where the opaque step held a flat 1.53:1 — track-vs-ground and thumb-vs-track cannot both be constant while the thumb is opaque, and ground legibility wins because it decides whether the control reads as a control at all.

  The SegmentedControl indicator is larger. The frame around the selected thumb went from 4px to 3px (inset-y-[3px] on the indicator, p-[3px] on the list), so the thumb is 30px tall instead of 28px. Since the thumb's own 1px rim occupies the innermost pixel of that frame, 2px of bare track is what you see.

  The SegmentedControl thumb's focus ring is now the shared ui-state-focus. It previously hand-rolled only the outline, so it missed the other half of that utility — firming --ui-border-color to the opaque ring colour — and read noticeably lighter than every other focused control. A focused thumb and a focused Input now resolve identically: 3px outline-ring/50 at outline-offset-0, plus a 1px opaque oklch(0.52 0.008 54) rim. The ring stays outside the thumb, and 3px is the minimum frame that clears it: the list is a scroll container clipping at its padding box, so that padding is the only room an outset ring can grow into. Below 3px the first and last thumbs get a visibly shaved ring.

  The SegmentedControl track's corners are now concentric with the indicator's. Both used the shared rounded-surface, but two rounded rectangles nested with a gap only look like parallel arcs when the outer radius is the inner radius plus that gap. With the thumb at 8px and 3px of frame around it, the track needs 11px; at 8px its corner read visibly tighter than the arc it frames. The track is now calc(var(--radius-surface) + 3px) — derived from the token, so it stays concentric if the radius is retuned. This is a deliberate exception to using rounded-surface everywhere.

  The SegmentedControl indicator's resting rim is re-derived from the track. ui-frame draws its rim as an outset ring, so the indicator's rim lands on the track and composites over bg-control — it reads denser than the same control-border token does on a field. The old compensation subtracted a flat 0.08, hand-tuned against the previous opaque charcoal-300 track, which left the rim at an effective 0.31 against a field's 0.26. It is now derived from the track's own alpha (--control-alpha, newly exposed on the token), so a resting indicator rim and a resting Input edge render the same on every ground, and retuning the track cannot silently detune the rim.

  If you use bg-control in your own code, note that it is now translucent: two stacked elements that both carry it composite into a darker track than the token specifies, and anything that paints a translucent edge over a track has to account for the track underneath it.

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

• Updated dependencies [b7122c0]

  • @marigold/system@18.0.0-rc.5

18.0.0-beta.4

Major Changes

• 9918172: feat(DST-1545): replace ActionBar.Button with a plain <Button> via a ButtonContext cascade. ActionBar now provides a ghost/default cascade to its toolbar, so authors place a standard <Button> inside the bar and it adapts to the toolbar look automatically, with the full Button API available (disabled, loading, slot, size="icon"). This mirrors the pattern already used by Panel.Header and ButtonGroup.

  Breaking: ActionBar.Button is removed. Replace <ActionBar.Button>…</ActionBar.Button> with <Button>…</Button>. For icon-only actions use <Button size="icon" aria-label="…">, which also fixes an accessibility defect where the old wrapper silently dropped aria-label, shipping unlabeled icon buttons. The duplicated actionButton theme style is gone (it hand-mirrored Button's ghost variant at the default size, minus the press and loading affordances a real <Button> now brings).

  // Before
  <ActionBar selectedItemCount={3} onClearSelection={clear}>
    <ActionBar.Button onPress={edit}>
      <Pencil /> Edit
    </ActionBar.Button>
  </ActionBar>
  
  // After
  <ActionBar selectedItemCount={3} onClearSelection={clear}>
    <Button onPress={edit}>
      <Pencil /> Edit
    </Button>
  </ActionBar>

• 0b7f87f: chore(DST-1164): remove the unused Breakout component and the now-dead align API from Container.

  Breakout had 0% usage across all scanned production repositories, so it is removed entirely (component, stories, tests, and docs). Container's align prop, together with its internal gridColumn/gridColsAlign grid setup, only ever took effect via a [data-breakout] child, so it became dead code once Breakout was gone and is removed as well.

  Migration: remove any align prop from <Container> usages. The contentLength, alignItems, and space props are unchanged.

• d72f464: feat(DST-1360): introduce AppShell, Page, Page.Header, and Page.Content; remove AppLayout

  Renames AppLayout to AppShell and removes its three pass-through subcomponents (AppLayout.Sidebar, AppLayout.Header, AppLayout.Main) — <Sidebar>, <TopNavigation>, and <Page> now sit directly inside <AppShell> (each owns its grid area, so child order does not matter). AppShell absorbs Sidebar.Provider via the defaultSidebarOpen prop; render your own <Sidebar.Provider> around <AppShell> for controlled state, variant, or size and it is detected and used instead of the internal one.

  Adds <Page> — the <main> landmark with page padding (p, or px/py; default square-relaxed) and vertical rhythm between sections (space; default group). The page's <main> is named by its <h1> via aria-labelledby; when there is no <Title>, pass aria-label (or your own aria-labelledby) instead. With none of these, <Page> warns in development so the landmark is never silently unnamed. Like <Panel>, <Page> forwards standard HTML attributes (id, data-*, event handlers) and a ref to its <main>.

  Adds <Page.Header> — a slot-based title/description/actions header that mirrors Panel.Header — and an optional <Page.Content> (with its own space) for when the rhythm between sections should differ from the header-to-content gap. The page heading outline now falls out of the defaults: <Title> in Page.Header is an h1, <Title> in Panel.Header an h2, <Title> in Panel.Collapsible an h3 (override per <Page> with headingLevel).

  Migration:

  -<Sidebar.Provider defaultOpen>
  -  <AppLayout>
  -    <AppLayout.Sidebar>…</AppLayout.Sidebar>
  -    <AppLayout.Header>…</AppLayout.Header>
  -    <AppLayout.Main>{content}</AppLayout.Main>
  -  </AppLayout>
  -</Sidebar.Provider>
  +<AppShell defaultSidebarOpen>
  +  <Sidebar>…</Sidebar>
  +  <TopNavigation>…</TopNavigation>
  +  <Page>
  +    <Page.Header>
  +      <Title>Billing</Title>
  +      <Description>Manage your plan and invoices.</Description>
  +      <Button variant="primary">Upgrade plan</Button>
  +    </Page.Header>
  +    {content}
  +  </Page>
  +</AppShell>

• 8418ee7: refactor(DST-1548): rename Card.Body to Card.Content

  Aligns the Card body sub-component with Panel.Content and Page.Content so all three container primitives expose the main body region under one name.

  Breaking change: Card.Body (CardBody) is removed. Rename usages to Card.Content:

  - <Card.Body>...</Card.Body>
  + <Card.Content>...</Card.Content>

  The bleed prop and padding behavior are unchanged. The internal data-card-body attribute has been removed to match Panel.Content.

  The Card theme slot key is renamed from body to content in the @marigold/system Theme type and in @marigold/theme-rui. Theme authors overriding this slot must rename their key accordingly.

• fc8ca13: refa([DST-1549]): Breaking change: Rename compound member Tabs.TabPanel → Tabs.Panel

  Tabs now exposes .List, .Item, and .Panel, so every compound member follows one predictable naming rule. <Tabs.TabPanel> is removed (hard rename, no deprecated alias).

  Migration:

  Before	After
  <Tabs.TabPanel id="…">	<Tabs.Panel id="…">

• 2a275bb: fix(DST-1559): remove dead and mis-named props from TextField, FileTrigger, and Loader.

  • TextField: drop the min/max props. They were never forwarded to the underlying <input> (react-aria filters them out of both the input and wrapper props), so they had no effect. Numeric constraints belong on NumberField.
  • FileTrigger: remove the mis-named singular acceptedFileType prop. Its key did not match react-aria's acceptedFileTypes, so file-type filtering silently never applied. Use the inherited acceptedFileTypes instead.
  • Loader: fix the loaderType JSDoc, which documented a non-existent cycle value. The accepted values are xloader and circle (default circle).

• d0bb11c: fix(DST-1556): rename SectionMessage's controlled visibility prop from close to open

  <SectionMessage>'s controlled visibility prop was named close but its truthiness meant visible , close={true} showed the message and close={false} hid it, the opposite of what the name and docs implied. It's now open, matching the polarity used by <Dialog>, <Drawer>, <Tray>, and <Sidebar>.

  Before	After
  close={isVisible} (truthy = visible)	open={isVisible} (truthy = visible)
  close={!isDismissed}	open={!isDismissed}
  onCloseChange={setX} (receives current value)	onOpenChange={(open) => ...} (receives false on dismiss)

  A new defaultOpen prop (default true) sets the initial visibility in uncontrolled mode. The uncontrolled default behavior (visible, self-dismisses via the close button) is unchanged.

Minor Changes

• c789dee: feat(DST-1381): add master/admin access variants to Link and MenuItem that mark actions requiring elevated access rights with an icon (lock = master, key = admin). Badge renders its master/admin variants with the same icons.

  The components render the icon as a decorative <svg> colored by the theme's access foreground tokens (which also keeps it visible in forced-colors mode). On Link and MenuItem the restriction is exposed to assistive technology through a visually hidden "Master"/"Admin" text label rendered after the visible label, so restricted links and menu items carry the access level in their accessible name. Badge renders no extra label because its visible text already is the access level, which rules out double announcements by design.

  Note that variant is a single axis: an access variant cannot be combined with another variant (e.g. destructive on MenuItem). For destructive actions that are access-restricted, the access variant takes precedence (variant="master"), with the destructive nature conveyed by the action's label and confirmation flow. See the Admin & Master Mark pattern docs.

• f1990eb: feat(DST-1551): add DateRangePicker component

  New <DateRangePicker> lets users enter or select a start–end date range through a single field, mirroring <DatePicker>'s API and behaviour. Two date inputs (start/end) sit in one field group with a calendar button that opens a <RangeCalendar> in a popover on desktop and a tray on small screens. Supports per-input paste (ISO/EU/US formats), granularity (inline time segments), visibleDuration (up to three months), and the usual Marigold field props (disabled, readOnly, required, error, errorMessage, description, minValue, maxValue, dateUnavailable, width, variant, size). Adds a matching DateRangePicker theme entry to theme-rui.

• d72b30a: feat(DST-765): add <SegmentedControl> component

  Adds a new <SegmentedControl> for compact, single-select view switching and quick filters. It is built on react-aria's RadioGroup / RadioField / RadioButton with a SelectionIndicator, so it is a real form field: value / defaultValue / onChange, the name attribute (submits like a radio group), required, error + errorMessage, description, readOnly, and validation all work exactly like the other Marigold form components (label/description/error route through <FieldBase>). The selected segment is marked by an animated indicator that slides between options.

  Options are declared via the compound API SegmentedControl.Option (also exported as SegmentedControlOption), each with a value:

  <SegmentedControl label="View" defaultValue="list">
    <SegmentedControl.Option value="list">List</SegmentedControl.Option>
    <SegmentedControl.Option value="grid">Grid</SegmentedControl.Option>
  </SegmentedControl>

  Two variants — default (a bg-control track with a raised ui-surface thumb, mirroring the Switch) and ghost (track-less, with a translucent ghost-Button-style indicator for dense toolbars) — at a single default size (matching the h-control Input height). Hover and focus reuse the shared ui-* utilities (ui-state-focus, ui-state-hover-ghost); the indicator slides between options (ease-out-quint) and respects prefers-reduced-motion.

  To make segments divide the available width equally, use the standard width prop — e.g. width="full". There is no separate fullWidth prop.

  When the options exceed the available width the control scrolls horizontally instead of compressing the segments, keeping the selected option scrolled into view (reduced-motion aware). A scroll-driven edge fade signals there is more to scroll where supported, falling back to a native scrollbar otherwise.

  ToggleButtonGroup now logs a dev-only warning when used with selectionMode, steering single-select use cases towards SegmentedControl (it remains for independent on/off actions in toolbars).

  DST-765

• 9b613e6: feat(DST-1369): adopt the slot-configuration pattern in Dialog, Drawer, and Tray

  The three overlay components now follow the same slot-configuration pattern as Panel and Card. Each publishes the slot contexts at its root, so the title, description, and action primitives pick up the overlay's theme classes wherever they are dropped:

  • Dialog.Title / Drawer.Title / Tray.Title are thin wrappers over <Title slot="title">.
  • New Dialog.Description / Drawer.Description / Tray.Description wrap <Description slot="description">.
  • New Dialog.Header / Drawer.Header / Tray.Header are optional layout wrappers that group a title and description. A bare <Title slot="title"> (or <*.Title>) without a header is a first-class, accessible authoring form — aria-labelledby resolves to it automatically.

  The compound-component API is unchanged. The <header> element that previously wrapped the title is gone; the title now carries the header chrome directly, with no change to the rendered visuals.

• e9996ef: feat(DST-1635): add a bleed prop to Drawer.Content so edge-aware children can span the full Drawer width.

  What changed:

  • <Drawer.Content bleed> drops the Drawer's horizontal content padding and publishes a --bleed-px custom property, mirroring Panel.Content's bleed.
  • The horizontal padding shared by the sectioned overlay surfaces (ui-panel-header / ui-panel-content / ui-panel-actions) now comes from a single --ui-panel-px token, and a bled Drawer.Content re-publishes that exact token as --bleed-px so the two can't drift.
  • Edge-aware children stay aligned with the Drawer title while their dividers/backgrounds reach the Drawer edges: Accordion reads --bleed-px directly, and Table's edge-cell padding now falls back to --bleed-px (after the Panel-only --panel-px), so it aligns inside a bled Drawer too.

  Why:

  Placing an <Accordion> (or Table) inside <Drawer.Content> previously trapped it inside the content padding, so item dividers and hover/selection backgrounds could not reach the Drawer edges. bleed gives the same full-width alignment Panel.Content bleed already offered.

  Impact:

  • Default behavior is unchanged: without bleed, Drawer.Content keeps the padded ui-panel-content and --bleed-px stays unset (children resolve their inset to 0px). The --ui-panel-px token resolves to the same 24px the surfaces used before, so Dialog/Drawer/Tray are visually identical.

• c20abe3: feat(DST-1282): scroll the Tabs row horizontally when it overflows

  When more tabs are rendered than fit the available width, Tabs.List now scrolls horizontally instead of wrapping onto multiple lines or pushing the page wide. Tabs keep their natural width (shrink-0) and snap gently into place (proximity) as you scroll, with the adjacent tab kept peeking past the edge so the scrollability stays discoverable. A vertical mouse wheel scrolls the row horizontally (pointer users without a trackpad), without hijacking normal page scroll. Horizontal overscroll is contained so it does not trigger browser back/forward gestures, and scrolling is smooth for users who allow motion. On browsers that support scroll-driven animations the overflowing edges fade out (ui-scroll-mask-x); elsewhere it falls back to a plain scroll container. When all tabs fit, nothing changes visually.

  The sliding selection indicator stays correct while react-aria scrolls an off-screen tab into view (the scroll container is a layoutScroll motion element). No runtime API change.

  Breaking change (@marigold/system): the Tabs theme Record gains a new required tabsListScroll slot. It is deliberately required so a theme cannot ship tabsList (whose w-max triggers the overflow) without the scroll container that makes it behave. Custom themes that define a Tabs block must add a tabsListScroll entry to type-check.

• c799448: feat(DST-1509): add collapseAt to Tag.Group

  Tag.Group now accepts a collapseAt={n} prop: the first n tags render as usual, and the rest collapse behind a "Show N more" / "Show N less" toggle, matching the behavior already available on Checkbox.Group and Radio.Group.

  Unlike those groups, Tag.Group's tags are a RAC collection (selection, removal, keyboard navigation), so collapsed tags stay mounted inside the <TagList> and are hidden via the native hidden attribute rather than being pulled out into a separate <Collapsible>. This keeps onRemove, removeAll, and emptyState working unchanged, and the collapsed count automatically shrinks as tags are removed. If a hidden tag is part of the initial selection, the group expands automatically.

  collapseAt only applies to static children; dynamic collections (items + a render function) are unaffected.

  When both collapseAt and removeAll are used together, "Show N more" bottom-aligns next to the last visible tag, while "Remove all" stays in its own trailing column so it never mixes into the tag wrap.

  DST-1509

• dd044be: Add relative date presets to Calendar, RangeCalendar, DatePicker, and DateRangePicker via a new presets prop. On desktop the presets render as a quick-selection list beside the calendar. On small screens the grid renders first with a "Quick selection" row: inline calendars open the preset list in a bottom sheet, while the pickers switch their existing sheet to the list in place. Ships built-in localized presets (today, yesterday, tomorrow, this-week, next-7-days, next-30-days, last-7-days, last-30-days, this-month, this-quarter), supports custom presets with value resolvers, and exports useDatePresets/useDateRangePresets for userland compositions.

• ecd739f: feat(DST-1533): add Table.Footer component

  New <Table.Footer> renders a semantic <tfoot> after <Table.Body> for summary rows like totals, counts, or averages, composed from <Table.Row> and <Table.Cell> just like the body. Supports a sticky prop that pins the footer to the bottom of the viewport while scrolling, mirroring sticky table headers. Adds a matching footer theme entry to theme-rui.

• c30f224: feat(DST-1568): add error and errorMessage support to Switch and Checkbox

  When error is set, the field is marked invalid and the errorMessage is shown in place of the description, wired to the input via aria-describedby. When both are unset, rendering is unchanged.

  Internally, Switch and Checkbox now render their HelpText inside the RAC field (SwitchField/CheckboxField), relying on RAC's native aria-describedby and FieldErrorContext wiring instead of re-plumbing it by hand. No other public API change.

• b6666b4: fix(DST-1621): keep Accordion stickyHeader pinned when the header has actions

  Accordion.Header now accepts an actions prop for content shown next to the title, such as buttons. Previously actions were added by wrapping Accordion.Header in a layout component, which shrank the sticky header's containing block to the header row so stickyHeader could no longer pin the header while scrolling. Passing actions through actions keeps the sticky wrapper a direct child of the item, so the header stays pinned together with its actions.

• e5701c4: feat(DST-1634): standardize Input trailing-action alignment and make size="icon" a public Button API.

  The Input leading icon is clamped to 16px so it no longer overlaps the placeholder. Every trailing action (clear button, chevron, loading spinner, or a custom icon button) now sits in a control-sized centered box flush to the edge, so its icon aligns at the same inset as the leading icon across Input, SearchField, ComboBox, Autocomplete, TagField, and DatePicker. Button's size="icon" is now public and documented as the way to build an icon button, composing with any variant (for example variant="ghost" size="icon").

  Migration: variant="icon" was never a real Button variant. It silently rendered a default button, so any usage from older docs should switch to size="icon" (with a variant, for example variant="ghost" size="icon").

• 306fe23: feat(DST-1643): add a fullscreen size to Dialog

  <Dialog size="fullscreen"> fills the viewport (minus a small margin) at every breakpoint, giving content-heavy picks room for search, filters, and a long scrollable list while the title and actions stay fixed. The existing xsmall/small/medium/large sizes are unchanged.

• 106821a: feat(DST-990): enrich <Menu> with selection visuals, keyboard shortcuts, and dividers

  <Menu> gains richer building blocks for advanced menus:

  • Selected-item visuals. In selectionMode="single" or "multiple", items show a leading checkmark and a highlighted row, aligned like <ListBox>. Command menus (no selectionMode) render exactly as before.
  • Keyboard-shortcut hints via a new shared <Keyboard> primitive (a sibling to <TextValue> and <Description>). It renders a <kbd> key-cap on its own and adapts to its container, so inside a Menu.Item it becomes a muted, right-aligned hint wired to react-aria's aria-describedby.
  • Dividers. Drop the shared <Divider> between <Menu.Item>s to separate groups with a role="separator" line.

  Breaking (@marigold/system): the Menu record in the Theme type now requires a keyboard key. Custom themes implementing Menu must add it to keep compiling. All @marigold/components additions are backward compatible.

• 3231866: feat(DST-1587): share wheel-to-horizontal-scroll between Tabs and SegmentedControl

  The wheel handler that lets pointer users without a trackpad reach overflowing Tabs is now a shared useWheelScrollX hook, and SegmentedControl adopts it too. Wheeling vertically over an overflowing SegmentedControl track now scrolls it horizontally, matching Tabs. No public API change on either component.

• 867f3cc: fix(DST-1573): default <Page> and <Page.Content> spacing to regular

  The space prop on <Page> and <Page.Content> — which controls the vertical rhythm between a page's children (the <Page.Header> and the <Panel>s/sections below it) — now defaults to regular (spacing(6), 24px) instead of group (spacing(12), 48px). The previous default produced too much whitespace between sections. Consumers can opt back into the larger gap with space="group".

• b41a3e3: feat(DST-1513): <Select>'s renderValue now receives a second details argument with the selection count, and works when options are provided as static <Select.Option> children (previously it was silently skipped unless the options came from the items prop).

  This makes it easy to summarise a multi-select trigger instead of listing every value, e.g. renderValue={(items, { count }) => `${count} selected`}. The default trigger rendering is unchanged: without renderValue, a multi-select still lists the selected values.

• 766a46b: feat(DST-1370): migrate ContextualHelp, SectionMessage, and EmptyState to the slot-configuration pattern

  • SectionMessage.Title now renders a semantic heading (<h3> by default) instead of a <div>, fixing an a11y gap. The level is configurable via the new headingLevel prop on <SectionMessage>. When a title is present, the container becomes a role="group" labelled by the title via aria-labelledby.
  • New <SectionMessage.Description> sub-component for a short summary between title and content.
  • ContextualHelp.Title now uses slot="title", so the popover dialog gets a proper aria-labelledby. The title tag changes from <h3> to <h2> (same as Dialog.Title); visual appearance is unchanged.
  • New <ContextualHelp.Description> sub-component.
  • The Theme type now requires a description key on the SectionMessage and ContextualHelp style records; themes defining styles for these components must add it.
  • EmptyState's title now renders as a semantic heading (<h3> by default, configurable via the new headingLevel prop), and its description renders through the <Description> primitive (same DOM as before, now sitting 4px below the title to match the description rhythm of the other components). The flat-props API is unchanged.
  • All three roots now also publish a ButtonContext, completing the slot-configuration set. It scopes action buttons (e.g. those placed in SectionMessage.Content, the EmptyState action, or ContextualHelp content) to a clean baseline so they never inherit a surrounding container's button cascade (such as a Panel.Header's ghost/small look). No variant or positioning is imposed, so existing usage renders unchanged.

Patch Changes

• 28c4e40: feat(DST-1461): Accordion aligns like Table inside a bled Panel.

  What changed:

  • A bled Panel.Content / Panel.CollapsibleContent now publishes a --bleed-px custom property (set to the Panel's --panel-px). Non-bled content is unchanged and does not set it.
  • The default Accordion header and content inset themselves by --bleed-px (via --accordion-x-padding, which falls back to 0px). So inside a bled Panel the item dividers span edge-to-edge while the header/content align with the Panel title.
  • In a bled Panel the full-width header (and its focus ring) is inset off the Panel border by one spacing step, matching Panel.Collapsible.

  Why:

  Dropping an <Accordion> into <Panel.Content bleed> now gives full-width item dividers and header/content aligned with the Panel title — the same behavior Table already had, with no new Accordion prop or variant.

  Impact:

  • Standalone Accordions are unchanged (--bleed-px is only set by a bled Panel container, so the inset resolves to 0px).
  • Accordions inside a non-bled Panel.Content are also unchanged — the inset stays 0px, so header/content keep aligning with the dividers as before (no double indent).
  • Only Accordions inside a bled Panel gain the inset. The card variant is unaffected; it keeps its own px-4.

• be0eeb9: style(DST-1586): scale breadcrumb separators with the size variant and emphasize the current page

  The chevron separator now scales with the breadcrumb size (small/default/ large) instead of rendering at a fixed 16px, so it stays a quiet mark between crumbs; gaps tighten on small accordingly. The current page reads a tier above the trail — medium weight in the foreground ink — matching how the sidebar marks the active item.

  The <Breadcrumbs> chevrons drop their hardcoded size={16} prop: the theme's Breadcrumbs item slot now owns the separator size ([&_svg]:size-*, which wins over the SVG's width/height), so the number in the component was dead and misleading. Themes that don't set a separator size fall back to the icon's default size.

• 13a1982: feat([DST-1339]): FileField gains a size="small" compact layout renders as a single-row input-height control (upload button + file list) instead of the full drop-zone, suited for space-constrained forms.

• 9fd4000: feat(DST-1439): give SectionMessage a neutral surface with a muted variant border

  SectionMessage no longer fills its background with a per-variant tint (bg-info, bg-success, bg-warning, bg-destructive). It now sits on a neutral ui-surface with neutral title and body text. The severity is carried by a muted per-variant colored border (the accent mixed halfway into the neutral border) plus the colored icon.

  This is a visible design change for every variant. Because the surface stays neutral, standard <Button> and <Link> actions placed inside read correctly instead of floating on a colored fill. On the old tint the default <Button> (variant secondary, which has its own ui-surface fill) rendered as a foreign chip on the colored container for every variant except error. The muted border sits at the container edge, away from the content, so it signals the variant without touching the actions. The border color is set through ui-surface's --ui-border-color hook, which is registered as a non-inheriting custom property, so it stays scoped to the container and does not leak into nested action borders.

  Variants stay distinguishable without relying on color alone through the colored border, the distinct icon shape and color, and the title. The bordered, in-flow treatment keeps an inline message visually distinct from the floating, shadowed <Toast>. No API changes.

• f715905: fix(DST-1501): <Panel p={number}> now applies padding

  A numeric p (e.g. p={4}) silently produced no padding: the value was suffixed with -x/-y and resolved to a non-existent var(--spacing-4-x). A scale value is now applied directly (calc(var(--spacing) * 4)) on both axes, matching px/py and <Page>. Named inset tokens are unchanged.

• 0637671: Extract resolveInsetAxes helper to centralise inset-padding axis resolution.

  The p → px/py resolution logic (branching on whether the value is a numeric scale or a named token) was copy-pasted across Page, Panel, and Card. This duplication caused the <Card p={number}> silent bug (resolving to a non-existent var(--spacing-4-x)), the same class of bug that had already been fixed independently in Panel (DST-1501) and Page (DST-1360).

  • Adds resolveInsetAxes({ p, px, py, defaultInset }) to @marigold/system alongside createSpacingVar.
  • Adopts the helper in Card, Panel, and Page, fixing the live <Card p={number}> bug as part of the refactor.
  • Fixes the same numeric-p bug in SelectList (inline, since its conditional-axis pattern differs).

• e686474: chore(DST-1503): Migrate Checkbox, Switch, and Radio off the deprecated react-aria-components single-element exports (Checkbox/Switch/Radio) to the *Field + *Button composition introduced in react-aria-components@1.18.0. This removes the ts(6385) deprecation warnings with no change to the public API, behavior, or visual output.

• 50d8339: chore(DST-1517): HelpText renders the shared Description component

  HelpText now renders the description through the shared Description component instead of react-aria's raw <Text slot="description">. Description is just <Text slot="description">, so the rendered output and aria-describedby wiring are unchanged. The win is a single Description building block shared by both the slot-configuration containers and the form fields, so the two cannot drift apart. No names, output, or behaviour change.

• 2fc7b96: refactor(DST-1534): build the Calendar year dropdown on react-aria's CalendarYearPicker

  The year dropdown now consumes react-aria's CalendarYearPicker render-prop (mirroring how the month dropdown already uses CalendarMonthPicker), replacing the hand-rolled year list and its localized aria-label workaround. This was unblocked by react-aria's June 2026 fix that makes maxValue inclusive, so the boundary year is reachable. Unbounded calendars keep the ±20-year window and bounded ranges stay fully reachable at both ends. When only one bound is set, the open side now widens to keep that bound reachable instead of staying at a fixed ±20 years.

• 586ffd1: refactor(DST-1546): replace the bespoke TagGroup "Remove all" wrapper with a plain <Button> via a ButtonContext cascade

  TagGroup now provides a link/small ButtonContext around its internal RemoveAll render, so the "Remove all" action is a bare Marigold <Button> instead of the raw react-aria Button with hand-rolled link styling. This mirrors the cascade pattern already used by ActionBar and Panel.Header.

  The change is internal-only. TagGroupRemoveAll is not part of the public API (TagGroup renders it itself), the authoring API (removeAll / onRemove) is unchanged, and there is no behavioral or accessibility change.

  The redundant removeAll theme style is removed from Tag.styles.ts (the link variant at size="small" reproduces it), and the now-unused removeAll key is dropped from the Tag theme type.

• af7767c: chore(DST-1547): move z-index classes out of theme style files into component implementations

  Per the z-index management rule (CLAUDE.md), z-* utilities belong in component implementations, never in theme *.styles.ts files. The local focus/drop/sticky stacking classes for Calendar/RangeCalendar, LegacyTable, ListBox, Table, ToggleButton and SegmentedControl have been moved from their theme-rui styles into the matching component className (via cn()), preserving the exact modifiers and important flag. No visual or stacking change.

• 508ec2c: fix(DST-1553): drop the dead 'small' | 'medium' | 'large' literals from Tabs size

  The size and variant props on Tabs resolved to nothing after the RUI theme size variants were removed (2025-03-04). size now accepts a plain string (matching Label and HelpText) instead of advertising specific values that no theme backs. The props stay in place as theme hooks, so a consumer theme can define its own size/variant variants without the misleading built-in union.

• 018c055: fix(DST-1565): stop the DatePicker and DateRangePicker popover from stretching to the trigger width

  The shared Popover forces its width to at least the trigger's via min-w-(--trigger-width). That is right for field dropdowns (Select, ComboBox) whose list should line up with the field, but wrong for a calendar, whose width is its own. A new matchTriggerWidth prop (default true, so every existing popover is unchanged) lets DatePicker and DateRangePicker opt out, so the calendar sizes to its content instead of the full field width.

• 0e4b915: refactor(DST-1585): drive SegmentedControl's reduced-motion scroll from CSS

  SegmentedControl now gates its selection-reveal scroll animation with the same CSS approach as Tabs: the scroll container carries motion-safe:scroll-smooth and the component's scrollTo uses behavior: 'auto', which follows that CSS — animating when motion is allowed and jumping instantly under reduced motion. This replaces the previous JS window.matchMedia('(prefers-reduced-motion)') check. Behavior is unchanged; the initial mount reveal stays instant. No API change.

• 51484fd: style(DST-1602): drop the removed elevation shadow from SelectionIndicator

  SelectList's SelectionIndicator no longer applies shadow-elevation-border, which is removed from theme-rui in the accompanying change. The indicator keeps its border and surface fill.

• 7605d46: fix(DST-1629): apply a SelectList item's action slot styling to a trailing Marigold Button, LinkButton, or ActionMenu so the action spans both rows and stays centered. The action slot className was only provided on RAC's ButtonContext, which Marigold's Button ignores, so the action auto-placed into the title row and stretched it, pushing the description down. The className now flows through the Marigold ButtonContext that these components read.

• 40b006e: fix(DST-1630): match the Panel collapsible header caret to the Accordion chevron. It rendered at the default 24px in the foreground color, while Accordion uses a 16px text-secondary caret, so the two collapsible patterns looked inconsistent. The Panel caret now renders at 16px and its color is driven by a new themeable collapsibleIcon slot (defaulting to text-secondary in the RUI theme).

• 5d0b6c0: fix(DST-1632): center the section Loader together with its label and give the Table drag handle edge spacing.

  The section Loader sized its container to a fixed square, so a labelled loader overflowed the box and the section wrapper centered the box instead of the spinner-and-label group. The spinner now carries the fixed size and the container is content-sized, so the whole group centers as one. The Table drag cell had no padding, leaving the grip flush against the row edge. It now uses the shared cell edge padding and its column matches the checkbox column width, so the grip lines up with its header and the first cell.

• 199e066: fix(DST-1645): align preset quick-selection rows with the tray nav row on small screens. The preset listbox rows reuse the shared ListBox p-1 focus-ring gutter, which insets them narrower than the full-width nav row. On small screens the list now negates that gutter (-mx-1) so rows span the tray edge-to-edge and line up with the nav row, while the gutter still keeps each row's focus outline from being clipped by the list's overflow.

• 40e6b21: fix: stop exposing style on Label

  Label only removed className from its react-aria props, leaving style in the public interface. It now omits both, matching the className/style removal convention used across the design system (e.g. Description, TextValue). Theme the label via variant/size instead.

• b954ab2: fix(DST-1622): ProgressCircle and Loader respect a consumer-provided aria-label / aria-labelledby.

  What changed:

  • ProgressCircle no longer overwrites a caller's accessible name. The built-in localized "loading" message is now only a fallback, applied solely when the consumer provides neither aria-label nor aria-labelledby.
  • Loader (BaseLoader) uses the same fallback: the localized message is applied only when there is no aria-label, aria-labelledby, or visible children label — and it no longer emits a redundant aria-label next to a consumer's aria-labelledby.
  • A fullscreen Loader now stays reliably named: when the consumer supplies their own aria-labelledby, the overlay Dialog references that element directly instead of the intermediate loader node (the accessible-name spec does not follow a second aria-labelledby hop, which otherwise left the modal unnamed).

  Why:

  Previously the aria-label was set after {...props} was spread, so a caller passing aria-label (or aria-labelledby) had no effect and every progress circle announced the same generic "Loading…" string. This prevented labelling a spinner for its context (e.g. "Sending reminders" in a bulk-action flow).

  Impact:

  • Callers that pass no label (e.g. the spinners inside Button, ComboBox, SearchInput) are unchanged — they still get the localized fallback.
  • Callers that pass aria-label/aria-labelledby now get their own accessible name.

• 2b3e286: fix(ProgressCircle): resolve named size tokens to a numeric SVG dimension

  A named size token (default | large | fit) was forwarded unchanged to the underlying <SVG> element, which renders width/height as `${size}px` — producing invalid attribute values like width="defaultpx" and emitting console errors. The SVG now resolves named tokens to the pixel dimension of their theme size-* class (default → 80, large → 144) for its width/height attributes and stroke-width math, so the stroke stays proportionate and the rendered output is unchanged. fit is content-sized and has no intrinsic dimension, so it falls back to the <SVG> default of 24.

  The stroke-width comparison also switched from a string compare (size <= '24') to a numeric one, which additionally fixes multi-digit sizes that were previously mis-classified (e.g. size="100" computed a strokeWidth of 2 instead of 4).

• be0eeb9: style(DST-1586): remove the overshoot from the sidebar toggle icon animation

  The sidebar toggle icon's panel/chevron animation eased with a spring-like overshoot bezier. It now settles on ease-out-quint, matching the theme's motion register — fast start, smooth stop, no bounce.

• ccd3bb3: fix(DST-1642): keep the Slider thumb from being clipped at the track ends

  The Slider thumb is centered on the track position, so at its min/max values it overhangs the track ends by half its width. Inside a scroll container such as Drawer.Content — whose overflow-y: auto promotes overflow-x to a clipping value — the overhang was sliced off, leaving a half-circle thumb (and it will be clipped unconditionally once Drawer.Content gains a bleed prop with no horizontal padding). The track is now inset by half the thumb width so the thumb always stays within the Slider's own box, independent of any ancestor padding.

• 0e3971a: Title level now accepts the string form (level="2") in addition to a number, matching Headline. The two heading primitives now share one level type. Non-breaking: existing numeric level={2} usage is unaffected.

• 4d44517: fix: make Select and Menu overlay appear above Drawer on small screens

  On small screens, Select and Menu render their options in a Tray (bottom sheet). The Tray overlay had z-40 in the theme while the Drawer overlay uses z-50, so the tray rendered behind an open drawer and was unreachable.

  Moved the z-index from the theme style file into the TrayModal component implementation (matching the project's z-index architecture rule), and raised it to z-50. Both the Drawer and Tray portal to document.body; at equal z-index, DOM order determines stacking. The Tray is always mounted after the Drawer, so it correctly appears on top.

• Updated dependencies [d72b30a]

• Updated dependencies [9b613e6]

• Updated dependencies [c20abe3]

• Updated dependencies [d72f464]

• Updated dependencies [0637671]

• Updated dependencies [dd044be]

• Updated dependencies [586ffd1]

• Updated dependencies [8418ee7]

• Updated dependencies [40b006e]

• Updated dependencies [106821a]

• Updated dependencies [766a46b]

  • @marigold/system@18.0.0-beta.4

18.0.0-beta.3

Minor Changes

• 5945653: feat(DST-1460): animated open/close caret in Accordion.Header

  Accordion.Header now uses the new MorphCaret icon, which smoothly animates between the closed (down) and open (up) states by morphing its SVG d path. Respects prefers-reduced-motion. The unused ChevronDown icon has been removed.

• 141a2cc: feat(DST-1373): adopt the slot-configuration pattern in Card

  Card.Header is now a slot provider: drop a <Title> and an optional <Description> directly inside it and the header wires up the heading level, id, accessible name, and theme classes automatically. A bare <Title> placed directly inside <Card> (no Card.Header wrapper) is also picked up by the root, so title-only cards can skip the header and still get the right padding and aria-labelledby wiring. <Card> itself now renders an <article> landmark and is automatically labelled by its <Title> via aria-labelledby, or by an explicit aria-label. A new headingLevel prop (default 3) controls the underlying heading tag for the document outline.

  The theme Card slot map gains title and description entries — the typography previously carried on the header slot has moved to title. Variant text color now flows through a new --card-accent CSS custom property, so master and admin cards pick up the matching accent automatically. Raw <Stack> / <Headline> composition inside Card.Header still renders but does not pick up the slot wiring; prefer <Title> / <Description> going forward.

• bd45aee: feat(DST-876): add Card usage guidelines

  Renames the Card.Preview slot to Card.Media across components, theme, and docs. This is a breaking change: consumers using <Card.Preview>, the data-card-preview selector, or the preview theme slot key must migrate to Card.Media, data-card-media, and the media slot key respectively.

  Adds a "Usage" section to the Card docs covering when to use cards, media slot guidance.

• 141a2cc: feat(DST-1480): forward arbitrary HTML attributes on <Panel>

  <Panel> now extends HTMLAttributes<HTMLElement> (minus className/style) and spreads the remaining props onto its root <section>, matching the <Card> API. Consumers can now pass id, data-*, event handlers, and other standard attributes directly to a Panel.

  A consumer-supplied aria-labelledby is preserved instead of being overwritten with undefined when no <Title> is present — the slot-owned titleId still wins when a <Title> renders. This mirrors the fallback adopted by Card in DST-1373.

  DST-1480

• 4d20fb6: feat(DST-1483): remove ActionButton in favor of a slot-aware Button (rename ActionGroup → ButtonGroup)

  The beta-only <ActionButton> is removed. <Button> is now slot-aware: it adapts automatically inside a button container, so you write <Button> everywhere instead of learning a second button component.

  • <ActionButton> is removed. Use <Button>; it adapts inside <ButtonGroup> and <Panel.Header>. Opt a button out of the cascade with slot={null}.
  • <ActionGroup> is renamed to <ButtonGroup>, mirroring the existing ToggleButtonGroup → ToggleButtonContext → ToggleButton trio.
  • A single Marigold-owned ButtonContext drives the cascade (replaces ActionButtonContext + ActionGroupContext). RAC's own ButtonContext (close/increment/decrement slots) is untouched.
  • Uniform precedence: a local prop (variant, size, disabled) always wins over the container. This drops the former ActionGroup size-group-wins outlier.
  • <ButtonGroup> cascades variant: 'secondary' when unset, the same baseline as a standalone <Button>. Slot-aware parents override it where they want lower emphasis: <Panel.Header> cascades variant: 'ghost' + size: 'small', so a labelled header action stays readable. An icon-only action (a bare-icon <Button>, an <ActionMenu> kebab) sets size="icon" to render as a square.
  • <ButtonGroup> now owns a structural flex gap-1 layout (orientation-aware), so a standalone cluster is spaced correctly — <ActionGroup> had no layout of its own. A container's positional className (e.g. Panel's [grid-area:actions]) still rides along and positions the group.
  • Overlays (Popover, Modal, Tray, Drawer) reset ButtonContext at their content root, so a header/group cascade can't leak through the portal into an overlay's slot="close" or Dialog.Actions buttons.
  • <SelectList.Option> cascades variant: 'ghost' to a nested <Button>, <LinkButton>, or <ActionMenu>, so a trailing in-row action reads as low-emphasis chrome without an explicit variant.

  Migration

  • <ActionButton> → <Button> (its default variant maps to variant="ghost").
  • <ActionGroup> → <ButtonGroup>.
  • ActionButtonContext / ActionGroupContext → ButtonContext.
  • <ActionMenu> keeps its public name. Its trigger is now a slot-aware <Button> that inherits the cascade instead of hardcoding a variant: it renders secondary on its own (the standalone <Button> baseline, matching the pre-unification look) and ghost inside <Panel.Header>, <SelectList.Option>, or a <ButtonGroup>. A variant set on the <ActionMenu> still wins.

Patch Changes

• 16bcb56: feat([DST-1395]): SelectList horizontal layouts now automatically flip to a vertical stack when the wrapping container is narrower than 40rem (~640px).

• 75cab86: feat(DST-1286): Panel renders a data-panel attribute on its root

  The root <section> rendered by <Panel> now carries a valueless data-panel attribute. External stylesheets and host pages can use it as a stable selector (e.g. :not(:has([data-panel]))) to detect whether a Panel is present without depending on Tailwind utility classes.

• 0760ecc: refactor(DST-1374): use <TextValue> and <Description> for selection-container items

  Consumer-facing JSX in component stories and documentation demos for <Select>, <SelectList>, <ListBox>, <Menu>, <ComboBox>, and <Autocomplete> now composes item content with the <TextValue> and <Description> primitives instead of hand-written <Text slot="label"> / <Text slot="description">. The primitives are drop-in replacements that render the same RAC <Text> with the same default slot values, so rendering, aria-describedby wiring, and accessibility are identical.

  <Menu.Item> gains first-class label and description theme slots, mirroring <SelectList.Option>. MenuItem merges the Marigold theme classNames into RAC's TextContext so nested <TextValue> / <Description> pick up Menu styling without losing RAC's slot wiring. Menu items adopt a two-column grid layout (icon column + content column) so descriptions render below labels; existing plain-text and icon+text menu items are unaffected.

  The Menu theme type in @marigold/system is extended with required label and description slot keys. Consumers maintaining a custom theme that overrides Menu will need to add these two slots to satisfy the type. @marigold/theme-rui is updated accordingly in this release.

  No public API change on Select.Option, SelectList.Option, ListBox.Item, Menu.Item, ComboBox.Option, or Autocomplete.Option.

• 14f1324: fix(DST-1467): make MorphCaret SSR-safe

  The shared reducedMotion constant in utils/reducedMotion.ts sampled window.matchMedia at module evaluation, so the server bundle always resolved to false while a client with prefers-reduced-motion: reduce resolved to true — producing a React 19 hydration mismatch (silently absorbed in production, logged as an error in dev). MorphCaret now reads the preference via useReducedMotion() from motion/react, matching SidebarToggleIcon and TrayModal. The obsolete utils/reducedMotion.ts has been removed.

• 431d4dd: fix(DST-1480): only set aria-labelledby on Panel when a Title is present

  <Panel> previously rendered aria-labelledby={titleId} whenever no aria-label was given, even if no <Title> was present. That left the <section> landmark pointing at an id no element carried, producing a broken/empty accessible name.

  The guard now also checks hasTitle, so aria-labelledby is only applied when a <Title> actually renders. This mirrors the stricter guard adopted by Card in DST-1373.

  DST-1480

• fc9ffb1: fix(DSTSUP-256): show cursor-not-allowed on disabled TagField

  The hidden trigger button inside TagField had cursor-pointer hardcoded, so hovering a disabled TagField showed the text/caret cursor instead of not-allowed — inconsistent with Select and ComboBox. Added disabled:cursor-not-allowed to the trigger button so the cursor now matches the rest of the form components.

• 334688e: chore(DST-1364): migrate ListBox item label/description styling off descendant selectors

  ListBox now exposes label and description as first-class theme entries, and ListBox.Item injects their classNames into react-aria's TextContext (merging rather than replacing, so RAC's aria-describedby wiring is preserved) instead of styling [slot=description] via a descendant selector on item. This also benefits Select.Option, ComboBox.Option, and Autocomplete.Option, which re-export ListBox.Item.

  The Theme type in @marigold/system now requires label and description keys on the ListBox record, so custom themes implementing ListBox must add these entries. No public API change in @marigold/components; visually identical except description now explicitly sets font-normal (parity with SelectList).

• 334688e: chore: extract shared useMergedTextSlots helper for RAC TextContext slot styling

  ListBox.Item and SelectList.Option both merged label/description theme classNames into react-aria's TextContext (spreading the parent slot first to preserve RAC's aria-describedby id). That accessibility-critical logic — and its SlottedContextValue type — now lives in a single useMergedTextSlots hook that both consume. No public API or visual change.

• 9cdb389: fix(DST-1464): keep wide content inside <AppLayout.Main> from overflowing the viewport. The shell grid uses grid-cols-[auto_1fr] and the main grid item defaulted to min-width: auto, so any content wider than the available track (most visibly a <Select selectionMode="multiple"> with several long selected items) pushed the main column past the viewport and added a horizontal scrollbar. Adding min-w-0 to AppLayoutMain lets the 1fr track actually shrink, and children like truncate on the Select trigger can now clip at the right place.

• Updated dependencies [141a2cc]

• Updated dependencies [0760ecc]

• Updated dependencies [4d20fb6]

• Updated dependencies [334688e]

  • @marigold/system@18.0.0-beta.3

18.0.0-beta.2

Major Changes

• 3a62175: feat([DST-1407]): Drawer enforces one open at a time.

  Opening a sibling <Drawer> while one is already open dismisses the first. Applies to desktop and mobile. The dismissed Drawer's onOpenChange(false) is invoked so controlled-state consumers stay in sync.

  A <Drawer.Trigger> nested inside an already-open Drawer is treated as a sub-flow: the nested Drawer opens over its parent and the parent stays mounted. Dismissing the parent in that situation would also unmount the nested trigger and tear down the new Drawer.

  Migration: No API change. If a flow relied on multiple simultaneous sibling drawers, refactor to a single drawer with switchable content, or use <Modal> for layered interactions.

Minor Changes

• d51416c: feat([DST-761]): export useLandmark from @marigold/components.

  Marigold now re-exports React Aria's useLandmark hook (and its AriaLandmarkRole / AriaLandmarkProps types) so consumers can register custom regions as ARIA landmarks without adding @react-aria/landmark as a direct dependency.

  import { useRef } from 'react';
  import { useLandmark } from '@marigold/components';
  
  const ref = useRef<HTMLElement>(null);
  const { landmarkProps } = useLandmark(
    { role: 'search', 'aria-label': 'Site search' },
    ref
  );

  A new accessibility guide on landmarks and a dedicated useLandmark reference page have been added to the documentation.

• a59d2dd: fix([DST-1363]): make <TagGroup> errorMessage render and bridge it to form validation

  <TagGroup> accepted errorMessage via <FieldBase> but never rendered it because RAC's TagGroup does not populate FieldErrorContext. The internal <HelpText> short-circuits on a missing context, so the error path was a silent no-op and <Form>-level validation never reached the user.

  Bridges <TagGroup> to validation the same way <SelectList> does: useFormValidationState + useFormValidation on a hidden <select> (replacing the previous <input type="checkbox"> shim), with <FormContext> inheritance for validationBehavior. The shared hidden control lives at HiddenSelection/ and is now consumed by both <SelectList> and <TagGroup> so future fixes only happen once.

  New props on <TagGroup>: error, required, disabled, validate, validationBehavior, form. Public API normalised to Marigold's convention — isInvalid / isRequired / isDisabled are removed and onSelectionChange is renamed to onChange. selectionMode now defaults to 'multiple'. disabled now propagates to each <Tag> via context so interaction is blocked alongside the form-disabled state.

  DST-1363

• 9a407ef: feat([DST-753]): SectionMessage exposes an announce prop and uses react-aria's LiveAnnouncer to notify assistive technology.

  What changed (DST-753):

  • <SectionMessage> accepts a new announce?: boolean prop. When set, the message text is sent to a shared, always-mounted live region maintained by @react-aria/live-announcer. Priority is polite for info / success / warning and assertive for error.
  • announce defaults to true for variant="error" and false for all other variants, preserving today's behavior for the common error case while letting consumers opt in for confirmations and informational updates.
  • The wrapper element no longer carries role="alert" for the error variant. Announcements are now delegated to the singleton live announcer instead.
  • Re-announcing the same message uses the React key pattern: pass a changing key to force a remount.

  Why:

  The previous implementation only announced the error variant, and it did so by adding role="alert" to a conditionally rendered element. Per the WAI-ARIA spec and MDN guidance, role="alert" should be on an element that already exists in the DOM before its content is injected, and it should not contain interactive elements. Marigold's SectionMessage violated both constraints (the alert was mounted together with its content, and it can contain close buttons and action links), making announcements unreliable on some screen reader / browser combinations.

  The new implementation uses @react-aria/live-announcer, which maintains persistent polite and assertive live regions at the document root. This is the same mechanism used across React Spectrum and avoids the conditional-rendering and interactive-content pitfalls of inline role="alert". It also unifies the API: opt in to announcement for any variant with a single prop.

  Additional cleanup bundled with this release (beyond DST-753):

  • Close button now matches the rest of the system. The previous theme defined a close slot for SectionMessage with bespoke overrides (size-8, [&_svg]:size-6, text-foreground, negative margins) that produced a visibly larger close button than every other close button in the design system. The component now renders the shared <CloseButton> with no overrides, so it gets the same 16px icon, focus ring, hover-opacity, and rounded-full styling as Dialog, Drawer, etc. The close slot has been removed from the SectionMessage theme type.
  • Component cleanup. Dropped a stale useButton(props, buttonRef) call that was applying div-level props to a button, the unused buttonRef, and the {...buttonProps} spread on <CloseButton>. The Button inside CloseButton already provides all keyboard/press semantics.
  • Theme variant order normalized. info (the default) is now listed first across the container, content, and icon slots in theme-rui, matching the variant table in the docs and the existing defaultVariants setting.

  Docs:

  • New anatomy SVG matching the Card / Sidebar / SelectList style; title and close button marked as optional, with content rules (no period in title, don't repeat title in body).
  • Two realistic announcement demos: a bulk-archive form (polite, with RAC validate and the key re-announce pattern) and a server-availability save error (assertive).
  • Added focus-management guidance for dynamic appearance and post-dismiss.
  • Added form-summary placement rule pairing <SectionMessage> with field-level validation.
  • Added action constraints (one primary action, verb+noun labels, descriptive link text).
  • Added two-line body rule with a link-out overflow pattern for longer content.
  • Folded the previous Position subsection into Usage; removed redundant Do/Don't tiles; renamed subsections to Dismissal / Actions / Announcements.
  • Drive-by: typo fix in the feedback-messages pattern doc.

  Migration:

  • Code relying on getByRole('alert') or [role="alert"] selectors to find rendered SectionMessage error nodes needs to be updated. The message text itself is still rendered as before; only the wrapper role is gone.
  • Consumers who previously wrapped a dynamic <SectionMessage> in their own <div role="status"> or <div aria-live="polite"> can replace that wrapper with <SectionMessage announce>.
  • Custom themes that defined a SectionMessage.close slot will now see a type error. Remove the slot. Close button styling now flows entirely from the CloseButton theme.
  • The SectionMessage's close button is visually smaller after this release (matches every other close button in Marigold). If you previously relied on the larger size, that was an inconsistency, not a feature.

Patch Changes

• 2a34a64: refactor(DST-1367): Panel adopts the slot-configuration pattern

  Panel.Header is now a single <Provider> that configures HeadingContext, TextContext, ActionButtonContext, and ActionGroupContext for everything nested inside it. Consumers drop slot-aware primitives directly into the header — <Title>, <Description>, and any of <ActionButton>, <ActionGroup>, <ActionMenu>, <LinkButton> — and the Panel injects level, ids, ref wiring, grid-area positioning, and the action cascade via context.

  The compound sub-components that paired with Panel.Header are removed because slot-aware role primitives subsume their responsibilities:

  • <Panel.Title> → use <Title>.
  • <Panel.Description> → use <Description>.
  • <Panel.HeaderActions> → drop the wrapper; the action primitives themselves (<ActionButton>, <ActionGroup>, <ActionMenu>, <LinkButton>) land in the actions grid cell via the context className that Panel.Header publishes.

  Multiple actions belong inside an <ActionGroup> — the cluster claims one cell and renders as a toolbar. A raw <Button> inside Panel.Header is intentionally not slot-aware: it stays as a footgun so the action primitives are the obvious choice for header chrome.

  Panel.CollapsibleHeader adopts the same shape: <Panel.CollapsibleTitle> / <Panel.CollapsibleDescription> are removed in favour of plain <Title> and <Description> inside the header. Panel.CollapsibleHeader publishes slot-keyed HeadingContext and TextContext inside its disclosure trigger so the primitives render as spans (matching the heading-inside-button constraint), while the structural <hN> semantics come from Panel.CollapsibleHeader itself.

  <Description> now honours elementType from its surrounding TextContext slot config. Panel.Header delivers elementType: 'p' so the description renders as a paragraph; Panel.CollapsibleHeader delivers elementType: 'span' so it nests cleanly inside the disclosure trigger button. Elsewhere, <Description> continues to render as RAC's default <span>.

  <Headline> now defaults to opting out of any surrounding HeadingContext slot config (slot defaults to the no-slot opt-out instead of undefined). This avoids "A slot prop is required" runtime crashes when a bare <Headline> is rendered inside a container that publishes a slot-keyed HeadingContext — such as a <Panel> that publishes its title slot at the root. An explicit slot prop on <Headline> still overrides the default.

• 61f917f: fix(DST-1447): restore focus to the Tray trigger on close under prefers-reduced-motion: reduce. TrayModal now skips AnimatePresence in that branch and renders a plain RAC ModalOverlay, so FocusScope.restoreFocus runs synchronously and the trigger reliably regains focus. Users without the preference still hit the same race — a full fix is tracked as follow-up.

• Updated dependencies [9a407ef]

  • @marigold/system@18.0.0-beta.2

18.0.0-beta.1

Major Changes

• 9f4dc97: refa([DST-1324]): Breaking change: Rename Inset's space/spaceX/spaceY props to p/px/py

  The padding props on Inset are renamed to align with Panel's existing API, so that across the design system space always means gap between children and p/px/py always mean inner padding. Previously, space carried two different meanings depending on the component, which was a source of confusion.

  Migration:

  Before	After
  <Inset space="…" />	<Inset p="…" />
  <Inset spaceX="…" spaceY="…" />	<Inset px="…" py="…" />

  The discriminated union shape is unchanged: p is mutually exclusive with px/py. Token vocabularies are unchanged (InsetSpacingTokens for p, PaddingSpacingTokens for px/py).

Minor Changes

• 727163c: feat([DST-1134]): add <RangeCalendar> component (alpha)

  Adds a new <RangeCalendar> for selecting a contiguous or non-contiguous date range, built on react-aria's <RangeCalendar> with Marigold conventions (disabled, readOnly, error, dateUnavailable, allowsNonContiguousRanges). Supports up to three side-by-side months via visibleDuration, stacking vertically below the sm breakpoint; the same responsive stacking now applies to multi-month <Calendar> for parity. description and errorMessage route through <FieldBase> so the help/error UI matches the rest of the form-component family (TriangleAlert icon + HelpText container). Ships as an alpha component with a stub docs page under the form section.

  DST-1134

• cc568e3: feat([DST-1429]): Card now exposes a Panel-aligned padding API.

  What changed:

  • Card accepts p / px / py props (mutually exclusive p vs px+py), resolving to CSS custom properties --card-px and --card-py on the container. Defaults to square-regular.
  • A new space prop controls the gap between slots, resolving to --card-gap. Defaults to regular.
  • Card.Body and Card.Footer accept an opt-in bleed prop to skip horizontal padding for tables, media, or full-width action bars.
  • Internally, Card switched from CSS grid with grid-template-areas to a flex column with gap-y. JSX order now determines visual order — place Card.Preview first when used.
  • Slot theme styles (header, body, footer) no longer hardcode px-4 / py-*; padding lives in the component layer and is driven by the CSS variables above.
  • Card.Preview automatically escapes the container's vertical padding when used as the first or last child via negative margins.

  Why:

  Cards previously had no consumer-controllable padding API and no default padding on the container — content rendered as direct children of <Card> was visually broken. The new API mirrors Panel's padding model so the two surfaces behave consistently.

  Migration:

  • Wrap bare children in <Card.Body>. Bare children inside <Card> are no longer rendered with horizontal padding; this matches Panel's composition contract.
  • If you used Card.Preview for media at the top, keep doing so — it stays edge-to-edge.
  • No changes needed for the canonical composition (Preview + Header + Body + Footer).

• 4742e8e: feat([DST-901]): styleProps for width, maxWidth, height, space, spaceX, spaceY, pr, pl, pt, pb now accept both numeric scale values (4) and their string equivalents ("4"). The public types are now declarative (Scale | Fraction | WidthKeyword, etc.) instead of being derived from the internal class-name maps.

  Components that previously resolved width, maxWidth, and height via class-name lookup (Form, Calendar, legacy Table column header / select-all cell, Slider, Scrollable, Switch, Grid) now resolve them through CSS custom properties (createWidthVar / createHeightVar) targeting --width, --max-width, --height. Those variables — along with --container-width and --field-width already used by FieldBase — are registered as non-inheriting (@property … inherits: false) in the RUI theme so they cannot leak into descendants.

  createWidthVar gained support for the previously missing keywords (svh, lvh, dvh, px, container), and a new createHeightVar helper was added. Both share a common factory and a base keyword set, so they remain trivially in sync.

  The runtime class-name maps width, maxWidth, height, gapSpace, paddingSpace, paddingSpaceX, paddingSpaceY, paddingRight, paddingLeft, paddingTop, paddingBottom are no longer exported from @marigold/system. These were internal utilities consumed only by @marigold/components. Use the prop types (WidthProp, HeightProp, …) and the CSS-var helpers (createWidthVar, createHeightVar, createSpacingVar) instead. The corresponding TypeScript prop types are unchanged.

• 496a9f2: feat(SelectList): standardized API, item layout, and visual distinction from ListBox (DST-1076)

  <SelectList> has been refined into a first-class form field for picking one or many items from a visible list of rich two-line rows. This release contains breaking renames and a tightened type surface.

  Breaking changes

  • SelectList.Item → SelectList.Option. The option semantic matches Select.Option and the HTML <option> mental model. Update any <SelectList.Item> usage to <SelectList.Option>.
  • SelectList.Action has been removed. Drop your <ActionMenu> or <IconButton> directly inside <SelectList.Option> — the component positions, sizes, and styles the nested control automatically via ButtonContext. Limit: one action per option (multi-button groups will arrive with a future ActionGroup).
  • Leading-image slot has been removed. Compose images inside <Text slot="label"> (or anywhere in children) as you see fit.
  • selectionMode="none" is no longer accepted. SelectList is a form field; the default is now "single".
  • onChange is strictly typed per selectionMode: (key: Key | null) => void for single, (keys: Key[]) => void for multiple. The shape matches Select<T, M>. Passing setState directly may require adapting the callback.

  Other changes

  • Selection indicator — single-select rows render a visible radio circle; multi-select renders a checkbox.
  • Label & description slots — use <Text slot="label"> and <Text slot="description"> inside <SelectList.Option>. The row skeleton is selection · label + description · action (optional).
  • Dev-mode warning when textValue is missing on an option whose children aren't a plain string.
  • Own theme entry — SelectList ships a dedicated theme component. The theme exposes first-class label, description, and action entries; slot styling no longer uses descendant selectors. Consumers with custom themes must add or update a SelectList entry.

  Documentation

  The SelectList docs page is rewritten around the new API. Adds an anatomy diagram, a decision table for choosing between <SelectList> and lighter controls (<Radio.Group>, <Checkbox.Group>, <Select>, <Combobox>, <TagField>), and dedicated sections for multi-selection, per-row actions (decision-help and configuration patterns), horizontal orientation, and empty state. Replaces selected prose with Do/Don't tiles. Tightens the accessibility section to what's specific to SelectList (keyboard model, label requirement, textValue for rich rows).

  Migration

  - <SelectList selectionMode="none">
  -   <SelectList.Item id="free">
  -     <SelectList.Action>
  -       <IconButton aria-label="Info"><Info /></IconButton>
  -     </SelectList.Action>
  -     Free
  -   </SelectList.Item>
  - </SelectList>
  + <SelectList selectionMode="single">
  +   <SelectList.Option id="free">
  +     Free
  +     <IconButton aria-label="Info"><Info /></IconButton>
  +   </SelectList.Option>
  + </SelectList>

• 8b754f0: feat(DST-1404): add renderValue prop to <Select> for custom trigger rendering. When provided, the callback receives the selected items and replaces the default trigger render. Useful when the trigger should look different from the option (e.g. avatar plus name in the trigger, avatar plus name plus role in the dropdown). The placeholder still renders when nothing is selected.

• 2ff7bda: feat(DST-1098): persistent idle sort indicator on sortable columns

  Table.Column with allowsSorting now shows a Lucide arrow-down-up icon when the column is sortable but not currently the active sort column. The active ascending/descending icons (SortAscending / SortDescending) are unchanged.

Patch Changes

• 566c468: fix([DST-1295]): replace gap between CheckboxGroup and RadioGroup items with per-item padding so the full space between items is clickable. Vertical items now meet the 24px target-size minimum; horizontal spacing keeps visual parity. Standalone Checkbox is unaffected.

  Also align the label and icon: switched the inner row layout from items-center to items-start so the icon stays on the first line when the label wraps. Radio labels now use leading-4 to match Checkbox, and Radio's icon-to-label gap moves from an inline gap-[1ch] to the theme-driven gap-x-2 for parity with Checkbox.

• 3c6a943: fix([DST-1410]): restore RangeCalendar build by using createWidthVar for the width prop. The component still imported the width runtime map from @marigold/system, which DST-901 removed when it migrated dimension props to CSS variables. This broke main for everyone — typecheck, unit tests, and Storybook tests all failed on every open PR. Apply the same migration pattern Calendar already uses: w-(--width) className plus style={createWidthVar('width', width)}.

  DST-1410

• 496a9f2: fix(FieldBase): forward isInvalid, isRequired, and isDisabled to RAC components passed via as

  When FieldBase renders through a React Aria Components element (e.g. as={RACComponent}), validation props are now forwarded so the underlying RAC element receives them. Plain DOM elements continue to skip these props to avoid unknown attribute warnings.

• 5744bbf: feat([DST-1396]): mobile-optimized pagination layout

  Pagination now hides the numbered page buttons on small viewports (max-sm) and spreads the previous/next navigation buttons across the full width using justify-between. This produces a cleaner, touch-friendly pagination on mobile while preserving the full layout on larger screens.

• 2d9d6fd: feat(DST-1366): introduce slot-configurable primitives

  Adds three text-bearing role primitives — Title, Description, TextValue — and three action primitives — ActionButton, ActionGroup, ActionMenu — that participate in slot-keyed context. Text/heading slots use React Aria's HeadingContext / TextContext directly; action slots use Marigold-owned contexts (ActionButtonContext, ActionGroupContext, ActionMenuContext) consumed via useContextProps.

  Title wraps RAC's <Heading> with slot="title" and level={2} as defaults, both overridable by HeadingContext. The level precedence is default ← context ← local, so a container can publish { level: 4 } and drive a stretch of nested <Title>s to <h4> without each call site setting it. Description and TextValue forward straight to RAC's <Text> with slot="description" and slot="label" defaults respectively, letting <Text> consume TextContext on its own. None of the three carry typography props. Styling cascades from the surrounding container (or selection item) via HeadingContext / TextContext. Consumers drop these into containers without any slot wiring. The container provides level, layout (e.g. a grid area), size, variant, color, and any other styling through a single Provider.

  ActionGroup is its own top-level component (own folder, own docs page, own Storybook entry) — there is no ActionButton.Group compound. It cascades size, variant, and disabled to nested <ActionButton>, <LinkButton>, and <ActionMenu> triggers via ActionGroupContext, with explicit per-prop precedence:

  • size: group wins (visual uniformity within a cluster).
  • variant: local wins (so a single destructive action can sit inside an otherwise uniform group).
  • disabled: local wins; the group provides the default. Writing disabled={false} on a child re-enables it inside an otherwise-disabled group.

  ActionMenu is rebuilt to compose its own MenuTrigger + <ActionButton> + Popover / Tray + RAC Menu rather than delegating to Marigold's Menu. The trigger uses <ActionButton> so an outer ActionButtonContext cascades to it. Marigold's Menu is untouched.

  LinkButton is now slot-aware: it picks up ActionButtonContext and ActionGroupContext so a navigating action can sit alongside <ActionButton> inside an <ActionGroup> and inherit the same cascade. A destructive-ghost variant is added to match <ActionButton>. Context is consumed read-only (via useSlottedContext) to sidestep the anchor/button ref-type mismatch that useContextProps would have created. The read-only consumption now also absorbs className from ActionButtonContext (mirroring <ActionButton>'s useContextProps-driven className merge) so positional classes published by a parent container — e.g. a grid-area class injected via ActionButtonContext — reach the rendered anchor. This lets <LinkButton> participate in container-driven layouts the same way <ActionButton> does.

  The container-driven layout pattern this enables comes with a corresponding convention: positional className flows through slot contexts and is absorbed at the first layout boundary. <ActionGroup> enforces the convention at its own boundary by scrubbing ActionButtonContext for its descendants — it republishes an empty value so nested <ActionButton>s and <LinkButton>s do not individually re-claim a positional class that was meant for the group as a whole. Cascading props (size, variant, disabled) still reach the children via ActionGroupContext, which they read independently. This convention scales to every future container that adopts the slot-configuration pattern.

  <ActionBar>'s legacy top-level ActionButton slot is internalized and re-exposed as ActionBar.Button. Existing consumers that already use <ActionBar.Button> are unaffected.

  Typography prep: Headline exports HeadlineSize, Text exports TextSize and TextVariant. The aliases aren't yet consumed by other primitives, but exposing them now lets a future typography-token PR replace runtime classes without rewriting consumer-facing prop types.

• Updated dependencies [727163c]

• Updated dependencies [4742e8e]

• Updated dependencies [2d9d6fd]

  • @marigold/system@18.0.0-beta.1

18.0.0-beta.0

Major Changes

• 326f707: feat(AppLayout): switch to page-level scroll

  AppLayout no longer owns an interior scroll container. The document (<html>/<body>) scrolls the whole page; the sidebar sticks via position: sticky and the top header stays pinned through TopNavigation's own sticky positioning.

  Why page-level scroll

  • Mobile URL bar collapses on scroll. With interior scroll, Safari and Chrome mobile keep the URL bar expanded forever, wasting ~8% of the screen. Only document scroll lets the browser hide it.
  • Pull-to-refresh works. Interior scroll disables it.
  • Browser scroll restoration on back/forward only works reliably for the document, not interior containers. Interior scroll produces subtle "lost scroll position" bugs.
  • Cmd+F find-in-page scrolls the document, not an interior container, so matches outside the viewport scroll into view correctly.
  • Anchor links (#section), iOS status-bar tap (scroll-to-top) and native keyboard nav (PgUp/PgDn/Space/Home/End) all behave predictably.
  • IntersectionObserver with default root, scroll-snap, sticky elements, scroll-margin-top — all simpler when there is one scroll container.

  Breaking changes

  • Code reading mainRef.current.scrollTop (or similar) will no longer see user scroll. Read window.scrollY / document.documentElement.scrollTop instead.
  • Styles assuming a fixed-height main region (height: 100% on direct children of <AppLayout.Main>, for example) will no longer be bounded by the viewport. Use min-h-dvh or remove the constraint.

  Known trade-offs

  • Pure app-shell look via position: sticky can flicker on iOS Safari momentum scroll. Cosmetic, usually acceptable.
  • Sticky elements may show a brief re-paint when overlays close. Not a correctness bug.

• f629319: refactor([DST-1283]): Breaking Change — Remove <Multiselect> (and the react-select dependency) from @marigold/components.

  Use <TagField> instead.

• cddcfd3: fix(DST-1353): remove width="fit" from Select, ComboBox, and Autocomplete

  BREAKING CHANGE: The fit value for the width prop is no longer accepted on Select, ComboBox, and Autocomplete. These components use a popover with virtualized rendering, where the react-aria Virtualizer controls item sizing and ignores CSS layout. This caused dropdown content to be clipped when width="fit" was used. Affected usages should switch to an explicit width value instead.

• 00d93c8: feat(DST-1246): update Switch component layout and sizing to align with Checkbox and Radio

  The Switch component previously rendered its label on the left and toggle on the right, which was inconsistent with Checkbox and Radio where the control sits on the left. When used together in forms, this created a visually misaligned layout.

  Layout: Toggle now renders before the label (control on the left, label on the right), matching Checkbox and Radio. This ensures consistent visual alignment when Switch is used alongside other boolean controls in form layouts.

  Sizing: Reduced the default track size from 24x40px to 16x28px and thumb from 20px to 12px. This brings the Switch closer in visual weight to Checkbox/Radio (16px), making it fit better in the flow of forms.

  Settings variant: A new variant="settings" mirrors the default layout — label and description on the left, toggle on the far right. This is the common pattern used on settings/preferences pages. The variant is propagated to BooleanField so that grid columns and description placement adjust accordingly.

  Description support: Switch now accepts a description prop (help text rendered below the control), matching Checkbox's existing support. The description text aligns with the label text using CSS grid + subgrid, automatically adapting to any control size without hardcoded padding. Properly wired with aria-describedby for accessibility.

  Form support: The name prop passes through to the underlying input for HTML form submission.

  Shared BooleanField: Extracted a reusable BooleanField wrapper used by both Checkbox and Switch for consistent description rendering and aria-describedby wiring. Uses CSS grid with subgrid to align description text with label text across both components.

  Breaking changes

  Restoring the old Switch behavior

  The default Switch layout has changed: the toggle is now on the left and the label on the right (previously reversed). If you need the old layout (label left, toggle right), use the new variant="settings":

  - <Switch label="Wi-Fi" />
  + <Switch label="Wi-Fi" variant="settings" />

  The size="large" prop has been removed. The default size is now smaller (16x28px track). There is no built-in way to get the old large dimensions (24x40px track) — if needed, create a custom size variant in your theme's Switch.styles.ts.

  Custom theme migration

  This release introduces a new required theme component BooleanField and changes the layout model of the Checkbox and Switch container slots from flexbox to CSS grid. Custom themes must be updated or Checkbox/Switch will throw a runtime error.

  1. Add BooleanField to your theme (required)

  BooleanField is a new multi-slot theme component used internally by both Checkbox and Switch to render descriptions. If your theme does not include it, any Checkbox or Switch with a description prop will throw:

  Error: Component "BooleanField" is missing styles in the current theme.

  Add the following to your theme's component styles:

  import { cva } from '@marigold/system';
  
  export const BooleanField = {
    container: cva({
      base: 'grid gap-x-2',
      variants: {
        variant: {
          default: 'grid-cols-[auto_1fr]',
          settings: 'grid-cols-[1fr_auto]',
        },
      },
      defaultVariants: { variant: 'default' },
    }),
    description: cva({
      base: 'mt-0.5',
      variants: {
        variant: {
          default: 'col-start-2',
          settings: 'col-start-1',
        },
      },
      defaultVariants: { variant: 'default' },
    }),
  };

  • container: Defines the 2-column grid layout wrapping the control and its description. The default variant uses grid-cols-[auto_1fr] (control left, label right). The settings variant uses grid-cols-[1fr_auto] (label left, control right).
  • description: Styles the description text wrapper. Placed under the label column via col-start-2 (default) or col-start-1 (settings). mt-0.5 adds vertical spacing between the label row and description.

  Then export it from your theme's component index file:

  export { BooleanField } from './BooleanField.styles';

  2. Update Checkbox container slot (required if customized)

  The Checkbox container slot changed from flexbox to CSS grid with conditional subgrid support:

  Before:

  container: cva({ base: 'cursor-pointer read-only:cursor-default gap-2' }),

  After:

  container: cva({
    base: [
      'grid grid-cols-[auto_1fr] gap-x-2 items-center',
      'cursor-pointer read-only:cursor-default',
      'group-data-[booleanfield]/booleanfield:grid-cols-subgrid group-data-[booleanfield]/booleanfield:col-span-full',
    ],
  }),

  Key changes:

  • gap-2 changed to gap-x-2 (column gap only, since row gap is now handled by BooleanField.description)
  • grid grid-cols-[auto_1fr] items-center replaces the flex items-center that was previously hardcoded in the component
  • group-data-[booleanfield]/booleanfield:grid-cols-subgrid and group-data-[booleanfield]/booleanfield:col-span-full enable subgrid when inside a BooleanField wrapper, so the description aligns with the label

  3. Update Switch container slot (required if customized)

  The Switch container slot also changed from minimal styles to CSS grid with subgrid:

  Before:

  container: cva({
    base: 'disabled:cursor-not-allowed disabled:text-disabled-foreground',
  }),

  After:

  container: cva({
    base: [
      'grid gap-x-2 items-center',
      'disabled:cursor-not-allowed disabled:text-disabled-foreground',
      'group-data-booleanfield/booleanfield:grid-cols-subgrid group-data-booleanfield/booleanfield:col-span-full',
    ],
    variants: {
      variant: {
        default: 'grid-cols-[auto_1fr]',
        settings: 'grid-cols-[1fr_auto]',
      },
    },
    defaultVariants: { variant: 'default' },
  }),

  Key changes:

  • Added grid gap-x-2 items-center (replaces flex items-center gap-2 that was previously hardcoded in the component)
  • Grid columns moved to variant to support both default and settings layouts
  • Added subgrid support for BooleanField integration

• 724f0ce: refa([DST-1162]): Breaking changes: The Card component has been refactored into a compound component pattern.

  What changed:

  • The previous prop-based API (padding, space, etc.) has been removed.
  • Content must now be composed using explicit sub-components: Card.Header, Card.Body, Card.Footer, and Card.Preview.
  • A CardContext is now required — sub-components will throw an error if used outside of a <Card>.

  Migration:

  // Before
  <Card>
    <SomeContent />
  </Card>
  
  // After
  <Card>
    <Card.Header>Title</Card.Header>
    <Card.Body><SomeContent /></Card.Body>
    <Card.Footer>Actions</Card.Footer>
  </Card>

• 62cca29: refa([DST-1281]): Breaking change: <Tooltip> no longer accepts open. Controlled visibility is only supported on <Tooltip.Trigger> (open / onOpenChange). Removes the internal React context that previously forwarded open from <Tooltip> to the trigger.

Minor Changes

• 6587493: refa([DST-1298]): Refactor Divider component: API, styling, and docs

  We fixed the vertical orientation of the divider, which previously didn't work. Added new Divider stories and updated the Divider docs.

• 93f9ef1: feat(DST-1257): add universal none spacing token

  • Introduce NoSpacingToken = 'none' shared across all spacing token families
  • Add 'none' to SpacingTokens, PaddingSpacingTokens, and InsetSpacingTokens
  • Add --spacing-none: --spacing(0) CSS custom property to the theme

  'none' now works wherever a spacing token is accepted: Stack/Inline gap (space="none"), Inset axis padding (spaceX="none" / spaceY="none"), and Inset recipes (space="none") — useful for wrappers that should render without adding any spacing (e.g. an edge-to-edge Table inside a containing component).

• 8326bf7: feat(DST-1326): introduce Panel.CollapsibleHeader, Panel.CollapsibleTitle, and Panel.CollapsibleDescription. The collapsible mirrors Panel.Header — a header wrapper with a title plus an optional description — and the whole visual surface is a single click target: title and description render as spans inside the trigger <button>, with the accessible name wired via aria-labelledby and the description via aria-describedby. The chevron icon uses a reusable MorphCaret that animates via SVG path morphing (honours prefers-reduced-motion).

• e33a1e7: feat(DST-1322): add current prop to Sidebar.Nav for automatic active item detection

  Sidebar.Nav now accepts a current prop that resolves the active leaf automatically — pass the current pathname (string) for smart segment-aware matching, or a predicate (href, key) => boolean for full control. Removes the per-item active={pathname === '/...'} boilerplate. The per-item active prop on Sidebar.Item still works as a local override.

Patch Changes

• b7c132d: fix(DST-1354): restore collapsing Table.EditableCell edit trigger

  The overlay/ring affordance introduced in #5250 (DST-1275) did not read as editable in user testing: sighted users did not associate the hover ring with inline editing, and there was no discoverable trigger for keyboard or touch. This change reverts that approach and restores the explicit pencil edit button.

  The trigger collapses to zero layout space at rest (w-0 overflow-hidden) and expands on row hover or keyboard focus, so static layout remains clean while the affordance is discoverable the moment the user interacts with the row. When expanded, the wrapper switches to overflow-visible so the button's focus outline is not clipped. The cell itself stays clickable as a touch target. Enabled editable cells always truncate their content to stay aligned with column headers and match the single-line editing controls; disabled cells behave like a regular Table.Cell.

• f16b887: fix(DST-1352): use correct outline for focus + error state in compound fields

• bfea9df: Panel.Title may now be used as a direct child of Panel when the Panel has only a title (no description, no actions) — Panel.Header is the layout wrapper for title + description + actions, but a title-only Panel doesn't need it. Accessibility (aria-labelledby) and horizontal panel padding still resolve correctly. Panel.Description and Panel.HeaderActions continue to require a Panel.Header wrapper. No change to existing usages.

• 8326bf7: test(DST-1329): add comprehensive unit and play-test coverage for Panel and its sub-components (Header, Title, Description, HeaderActions, Content, Footer, Collapsible, CollapsibleHeader, CollapsibleTitle, CollapsibleDescription, CollapsibleContent, Context). No runtime changes.

• 1cac70d: docs: improve AutoTypeTable prop rendering

  Centralizes the display of design-system aliases in the component docs' prop tables. Props whose types reference aliases from @marigold/system or @marigold/types (e.g. SpacingTokens, Scale, WidthProp, NonZeroPercentage) now render with a meaningful summary in the main cell and the full list of resolvable literal values on row expand — instead of a wall of literals in the cell and a redundant alias name on expand.

  Before:

  • Cell: SpacingTokens<Tokens> (a fabricated generic, inconsistent across components)
  • Expand: SpacingTokens | Scale | undefined (same alias names, no new info)

  After:

  • Cell: SpacingTokens | Scale (accurate, derived from the real type)
  • Expand: "96" | "80" | ... | "tight" | "related" | 0 (every concrete value)

  Under the hood this replaces 27 per-prop @remarks \TypeName`JSDoc overrides with a single fumadocs-typescript transform in the docs site, so future components pick up the same behavior automatically. A@remarks` tag on a prop still wins as an escape hatch.

  Multiselect.width and ComboBox.width now use WidthProp['width'] directly instead of FieldBaseProps<'label'>['width'] — structurally identical, no runtime change.

• c2a1c72: fix: apply alignX from Table.Column to first column cells

  TableCellContent used a truthy check on columnIndex, causing it to skip the alignX lookup when columnIndex was 0 (first column). Replaced with a nullish check so all columns correctly inherit their alignment.

• de34b15: chore(deps): update react-aria-components, @react-aria/*, @react-stately/*, @react-types/*, and @internationalized/* packages to their latest versions.

• 04111ca: fix(DST-1355): widen variant and size prop types on Loader and ProgressCircle to accept arbitrary strings via | (string & {}). Matches the pattern already used by Button, Panel, and other components, and lets consumer themes register their own variant/size tokens without TypeScript errors while preserving IDE autocomplete for the built-in RUI values.

• Updated dependencies [adb8a18]

• Updated dependencies [f629319]

• Updated dependencies [93f9ef1]

• Updated dependencies [8326bf7]

• Updated dependencies [20a42b0]

• Updated dependencies [724f0ce]

• Updated dependencies [de34b15]

  • @marigold/system@18.0.0-beta.0

17.9.1 (Released on Jul 10, 2026)

Patch Changes

• 76fca24: fix(DSTSUP-267): FileField appends files across selections when multiple is set

  Previously, when multiple was set, selecting or dropping files in a second interaction replaced the existing selection instead of adding to it — only files chosen in a single action were kept. FileField now accumulates files across separate selections and drops, de-duplicating identical files (matched by name, size, and last-modified time). Behavior with multiple unset is unchanged: the latest single file still wins.

  • @marigold/system@17.9.1

17.9.0 (Released on Jul 8, 2026)

Minor Changes

• ed2d9ae: feat(DST-1551): add DateRangePicker component

  New <DateRangePicker> lets users enter or select a start–end date range through a single field, mirroring <DatePicker>'s API and behaviour. Two date inputs (start/end) sit in one field group with a calendar button that opens a <RangeCalendar> in a popover on desktop and a tray on small screens. Supports per-input paste (ISO/EU/US formats), granularity (inline time segments), visibleDuration (up to three months), and the usual Marigold field props (disabled, readOnly, required, error, errorMessage, description, minValue, maxValue, dateUnavailable, width, variant, size). Adds a matching DateRangePicker theme entry to theme-rui.

Patch Changes

• e686474: chore(DST-1503): Migrate Checkbox, Switch, and Radio off the deprecated react-aria-components single-element exports (Checkbox/Switch/Radio) to the *Field + *Button composition introduced in react-aria-components@1.18.0. This removes the ts(6385) deprecation warnings with no change to the public API, behavior, or visual output.

• 2fc7b96: refactor(DST-1534): build the Calendar year dropdown on react-aria's CalendarYearPicker

  The year dropdown now consumes react-aria's CalendarYearPicker render-prop (mirroring how the month dropdown already uses CalendarMonthPicker), replacing the hand-rolled year list and its localized aria-label workaround. This was unblocked by react-aria's June 2026 fix that makes maxValue inclusive, so the boundary year is reachable. Unbounded calendars keep the ±20-year window and bounded ranges stay fully reachable at both ends. When only one bound is set, the open side now widens to keep that bound reachable instead of staying at a fixed ±20 years.

• 508ec2c: fix(DST-1553): drop the dead 'small' | 'medium' | 'large' literals from Tabs size

  The size and variant props on Tabs resolved to nothing after the RUI theme size variants were removed (2025-03-04). size now accepts a plain string (matching Label and HelpText) instead of advertising specific values that no theme backs. The props stay in place as theme hooks, so a consumer theme can define its own size/variant variants without the misleading built-in union.

• 4d44517: fix: make Select and Menu overlay appear above Drawer on small screens

  On small screens, Select and Menu render their options in a Tray (bottom sheet). The Tray overlay had z-40 in the theme while the Drawer overlay uses z-50, so the tray rendered behind an open drawer and was unreachable.

  Moved the z-index from the theme style file into the TrayModal component implementation (matching the project's z-index architecture rule), and raised it to z-50. Both the Drawer and Tray portal to document.body; at equal z-index, DOM order determines stacking. The Tray is always mounted after the Drawer, so it correctly appears on top.

  • @marigold/system@17.9.0

17.8.0 (Released on Jun 18, 2026)

Minor Changes

• bdda185: build(DST-1315): unbundle the build output for tree-shaking

  @marigold/components previously shipped its entire ESM build as a single concatenated barrel (index.mjs re-exporting 74+ components). Because every export lived in one module, bundlers could not statically prove which parts were unused, so importing a single leaf component (e.g. Stack) pulled in essentially the whole library. On rspack this meant ~57 kB (≈82% of the lib) for a Stack + Text + Card import.

  The build now emits one file per source module (unbundle: true, the preserveModules equivalent) while keeping the . barrel import fully backward compatible. Consumer bundlers (rspack, vite, esbuild) can now drop unused components: the same Stack + Text + Card import drops to ~0.8 kB, and a single Button import drops from ~57 kB to ~1.7 kB.

  Why a build flag alone wasn't enough (source changes explained)

  Flipping unbundle: true is necessary but not sufficient. The old single-barrel build concatenated every module into one file, which hid problems that only matter once each module stands on its own and a bundler starts deciding, per module, what it can safely drop. unbundle exposed those problems, so the following source changes were required to make tree-shaking actually work — without them the flag delivers little or no benefit:

  • Toast queue: removed a module-scope side effect. ToastProvider exported const queue = new ToastQueue(...) at module top level. That constructor runs the moment the module is imported and touches document (view-transition setup). The package declares sideEffects: false, which tells bundlers "importing any module here does nothing observable, so unused ones are safe to delete." A top-level new that touches document directly contradicts that promise: it's a real side effect on import, it can break SSR, and it makes the sideEffects: false claim dishonest (risking either dropped-needed-code or kept-unneeded-code depending on the bundler). Fix: construct the queue lazily on first use via getToastQueue(), keeping the singleton but making the module genuinely side-effect-free. (Tests, stories, and ToastProvider were updated to call getToastQueue().)
  • motion: switched off the non-shakeable motion proxy. import { motion } from 'motion/react' pulls motion's entire feature set, and the motion.* proxy is by design not tree-shakeable — referencing motion.div drags in the whole renderer (~34 kB). In the old concatenated barrel this cost was paid once and amortized across the whole library, so it was easy to miss. Under unbundle, that cost attaches to each module that imports motion (ActionBar, Tabs, Tray), so importing any one of them would re-pull motion's full bundle — defeating the point. Fix: use the lightweight m components from motion/react-m (tiny core, no features) and load the domMax feature set through a LazyMotion boundary via a dynamic import() of a local module (motionFeatures.ts), so bundlers split it into its own async chunk that only loads when an animated component actually renders. (The dynamic import targets a local file rather than motion/react directly because importing the dep dynamically made vite's optimizer re-bundle mid-run and drop named exports during tests.)
  • hooks barrel: replaced export * with explicit named re-exports. export * from './hooks' forces a bundler to pull in and consider the entire namespace of the re-exported module; explicit named re-exports let it trace precisely which symbols are reachable. Minor on its own, but export * chains are a classic way to silently anchor unused code.
  • react-select: externalized and declared as a dependency. Under unbundle, rolldown copies any non-externalized dependency into the output per-importing-module. react-select (~2 MB with @emotion) was being bundled into the dist without even being a declared dependency — invisible in the old barrel, but under unbundle it bloated every chunk that referenced it. Fix: mark it external in tsdown.config.ts and add it to dependencies so it resolves transitively at install time. It's used only by the deprecated Multiselect; drop both together in the next major.
  • Test/mock updates that follow the source changes. Tray.test.tsx's vi.mock('motion/react') had to gain LazyMotion/domMax, plus a new vi.mock('motion/react-m') providing create, because TrayModal now imports create from motion/react-m. Toast.test.tsx/Toast.stories.tsx switched from the removed module-level queue export to getToastQueue().
  • A size-limit budget gate (pnpm --filter @marigold/components size, run in CI) was added so these wins don't silently regress — e.g. someone re-introducing a motion proxy import or a module-scope side effect.

  No public API changes: all imports from @marigold/components continue to work exactly as before.

Patch Changes

• a609642: chore(DST-1512): import I18nProvider from react-aria-components in remaining stories/tests/demos

  Follow-up to DST-1505. Migrates the remaining I18nProvider imports off the @react-aria/i18n shell package to stay consistent with the RAC-first principle (import an API from react-aria-components whenever it re-exports it, so provider and consumers share one I18nContext). Component stories/tests now import from react-aria-components/I18nProvider, and docs demos use the public @marigold/components export. The packages/system formatter tests intentionally stay on @react-aria/i18n, because the formatters under test read locale from that package directly and packages/system does not depend on react-aria-components.

• 60b6e03: fix(DST-1507): make Table.EditableCell inline editing work after SSR hydration

  In a server-rendered app (for example Next.js), editable cells were inert after hydration: clicking a cell did not open its inline editor until an unrelated re-render (such as a window resize) happened to occur. React Aria builds the table collection in a separate render pass, and the editing state previously lived in that build pass, so the rendered cell content stayed bound to the server pass's closures and never reconnected to the live component after hydration. The editing state and overlay now live in an inner component rendered inside the Cell, i.e. in the collection's content pass, so interaction reconnects on its own after hydration (the same structure React Spectrum's S2 TableView uses).

  • @marigold/system@17.8.0

17.7.0

Minor Changes

• f4608c6: feat(DSTSUP-262): add large size to Dialog for wider layouts

  Dialog (and ConfirmationDialog, which inherits the prop) now accepts size="large", which sets the dialog width to 1024px — matching the Tailwind lg breakpoint. Use it for content that doesn't fit the previous medium cap of 768px, e.g. multi-month calendars or wider forms. The existing min() width formula keeps the dialog viewport-safe on smaller screens.

• e0d5c7b: feat(DST-1500): default auto-dismiss timeout for toasts

  addToast now applies a default timeout based on variant when none is given: success, info and the default variant auto-dismiss after 5000ms, while warning and error stay until dismissed. Pass an explicit timeout to override it (values are clamped up to a 5000ms minimum), or timeout: 0 to keep a toast on screen until it is manually dismissed.

  Behavior change: success, info and default toasts that previously stayed until dismissed now auto-dismiss after 5 seconds. Pass timeout: 0 to restore the old behavior.

Patch Changes

• a6a1cb3: fix(DSTSUP-260): Pagination follows the controlled page prop after mount

  Previously the page prop only seeded internal state, so external updates (e.g. resetting to page 1 on a filter change) were ignored — the page indicator and the accessible <nav> label kept showing the stale page. Pagination now uses useControlledState from react-stately: when page is set, it is the single source of truth and onChange reports requested page changes; defaultPage remains the uncontrolled initial value. As part of this, onChange no longer fires when the active page is selected again, and the reset-to-page-1 behavior on pageSize changes only triggers when pageSize actually changed.

• 4242aa1: fix(DST-1505): re-export I18nProvider from react-aria-components to prevent locale context splits

  I18nProvider was re-exported from @react-aria/i18n, which resolves react-aria via a caret range while react-aria-components pins it exactly. A consumer's lockfile can therefore install two react-aria copies, splitting the I18nContext: the locale set through Marigold's I18nProvider landed in one copy's context while the react-aria-components rendering Marigold's UI read the other — silently falling back to the default locale for aria labels, date/number formatting, and RTL detection.

  Re-exporting I18nProvider from react-aria-components makes provider and consumers share one context by construction, regardless of how the lockfile resolves react-aria. Same failure class as the mobile Select tray bug (DSTSUP-261).

• da46e58: fix(DSTSUP-261): make Tray immune to a split react-aria HiddenContext (mobile Select tray selecting nothing)

  On a touch/mobile viewport, Select (and other components that fall back to a Tray) could open an empty bottom sheet next to the real one: tapping an option selected nothing, the trigger kept showing the placeholder, and the page was left inert until reload.

  Root cause was a dependency-resolution split, not component logic. Tray guards the collection hidden pass with useIsHidden() from @react-aria/collections (which depends on react-aria via a caret range), while react-aria-components pins react-aria exactly and its Select (a createHideableComponent) sets the HiddenContext from its own copy. Both read that context from react-aria/private/collections/Hidden, so they only agree when react-aria resolves to a single version. When a consumer's lockfile resolves the two edges to different react-aria generations, the guard reads a context the collection renderer never sets: it never fires, a duplicate (empty) tray modal leaks into the DOM, and the two modals inert each other so options are no longer hit-testable.

  Tray now verifies the hidden pass through the DOM as well: react-aria renders the hidden pass into a <template> element, whose content lives in a detached DocumentFragment. A hidden probe element rendered alongside the modal is therefore never connected to the document during the hidden pass, and the tray skips mounting its modal whenever the probe is detached. This holds no matter how the consumer's lockfile resolves react-aria — including future react-aria releases that would re-arm the split (@react-aria/collections' caret range resolves to the newest react-aria, while react-aria-components stays pinned) — so no dependency pins are needed.

  The durable upstream fix is for react-aria-components' Modal to skip the collection hidden pass like its Popover already does (which is why the desktop Popover path was never affected), or for it to export useIsHidden. Once either lands, the guard in Tray can be reduced again.

  • @marigold/system@17.7.0

17.6.0

Patch Changes

• 6f24f07: fix(DST-1447): restore focus to the Tray trigger on close under prefers-reduced-motion: reduce. TrayModal now skips AnimatePresence in that branch and renders a plain RAC ModalOverlay, so FocusScope.restoreFocus runs synchronously and the trigger reliably regains focus. Users without the preference still hit the same race — a full fix is tracked as follow-up.

• 9436cbc: fix(DST-1482): make the width prop size field components again

  Setting width on a field component (<Select>, <TextField>, <NumberField>, …) had no visible effect — the field sized to its content and consumers had to wrap it in an extra element. FieldBase sets the --field-width CSS variable for its child field element to consume via w-(--field-width), but the variable was registered with @property … { inherits: false }, so it never reached the child and width fell back to auto.

  --field-width is now registered with inherits: true, restoring the intended parent→child handoff. The same-element layout variables (--width, --max-width, --height, --container-width) keep their non-inheriting leak protection.

  Also clarifies in the prop docs that numeric width values are spacing-scale tokens, not pixels: width={64} resolves to calc(var(--spacing) * 64) ≈ 16rem (256px).

• 737c0a9: fix(DSTSUP-255): honor minValue/maxValue in Calendar and RangeCalendar year picker

  The year picker used to always show 41 years (the focused year ±20) and just greyed out the ones outside the allowed range. With minValue set, it opened on a list of disabled past years that you had to scroll past first. The year list is now derived from minValue/maxValue (both bounds inclusive), so out-of-range years simply aren't shown, while the month picker still shows all twelve months with out-of-range ones disabled.

  When a picker opens, the selected option is now scrolled to the middle of the list instead of the bottom.

  The open year/month picker now exposes a localized accessible name ("year"/"month") instead of an internal identifier, so screen readers announce it correctly.

  This also fixes a follow-up problem with the RangeCalendar month/year dropdown (from DSTSUP-257): if you had started picking a range and then used the dropdown to jump to another month or year, that tap could wrongly finish the range. The dropdown now only changes the view, and picking an option still works on touch.

• c619ffd: fix(DSTSUP-257): commit RangeCalendar month/year dropdown selection on touch

  The dropdown overlay attached an unconditional pointerup stopPropagation listener to guard against react-aria's range-commit on overlay taps. On touch devices that also swallowed the event before react-aria's usePress click-completion fallback could run, so tapping a month or year never fired onPress and the selection was silently lost (the dropdown stayed open and the grid did not switch). The guard now skips role="option" targets, letting option taps bubble through while still protecting taps on empty overlay area. Desktop mouse behaviour is unchanged.

• 1c5c5fd: chore: single-source NonModal's overlay state to close a cross-copy react-aria seam

  NonModal previously created its overlay state and types from the umbrella react-stately while reading OverlayTriggerStateContext from react-aria-components. When a duplicate react-aria/react-stately is installed, those resolve to different copies and the overlay context silently splits — the same failure mode the Calendar fix addressed in this release. useOverlayTriggerState, OverlayTriggerState, and OverlayTriggerProps now come from the granular @react-stately/overlays package, matching the convention the rest of the package already follows. The umbrella react-stately direct dependency is dropped (its only remaining consumer, a Table story, now uses the local useListData re-export).

• a289d42: chore(deps): update react-aria

  Bumps the react-aria packages and tailwindcss-react-aria-components (theme-rui).

  Note: following the react-aria update, Switch now toggles with the Space key to match native checkbox behavior. It no longer toggles on Enter.

• Updated dependencies [9436cbc]

• Updated dependencies [a289d42]

  • @marigold/system@17.6.0

17.5.1

Patch Changes

• 3b29d91: fix(DSTSUP-252): make Drawer content scroll on small screens. On the mobile breakpoint the Drawer falls back to a Modal/Dialog overlay, but the Modal wrapper had no defined height. That made Dialog's h-full collapse to the content's intrinsic height, so the grid-template-rows: auto 1fr auto layout and Drawer.Content's overflow-y-auto never engaged — long content extended the drawer past the viewport and clipped both the content tail and the action bar. The mobile wrapper now uses h-(--visual-viewport-height) (the React Aria-recommended approach, which tracks mobile browser chrome), so the dialog is constrained to the visible viewport and Drawer.Content scrolls correctly while title and actions stay pinned.
• Updated dependencies [c65d2a7]
  • @marigold/system@17.5.1

17.5.0

Minor Changes

• 727163c: feat([DST-1134]): add <RangeCalendar> component (alpha)

  Adds a new <RangeCalendar> for selecting a contiguous or non-contiguous date range, built on react-aria's <RangeCalendar> with Marigold conventions (disabled, readOnly, error, dateUnavailable, allowsNonContiguousRanges). Supports up to three side-by-side months via visibleDuration, stacking vertically below the sm breakpoint; the same responsive stacking now applies to multi-month <Calendar> for parity. description and errorMessage route through <FieldBase> so the help/error UI matches the rest of the form-component family (TriangleAlert icon + HelpText container). Ships as an alpha component with a stub docs page under the form section.

  DST-1134

• 4742e8e: feat([DST-901]): styleProps for width, maxWidth, height, space, spaceX, spaceY, pr, pl, pt, pb now accept both numeric scale values (4) and their string equivalents ("4"). The public types are now declarative (Scale | Fraction | WidthKeyword, etc.) instead of being derived from the internal class-name maps.

  Components that previously resolved width, maxWidth, and height via class-name lookup (Form, Calendar, legacy Table column header / select-all cell, Slider, Scrollable, Switch, Grid) now resolve them through CSS custom properties (createWidthVar / createHeightVar) targeting --width, --max-width, --height. Those variables — along with --container-width and --field-width already used by FieldBase — are registered as non-inheriting (@property … inherits: false) in the RUI theme so they cannot leak into descendants.

  createWidthVar gained support for the previously missing keywords (svh, lvh, dvh, px, container), and a new createHeightVar helper was added. Both share a common factory and a base keyword set, so they remain trivially in sync.

  The runtime class-name maps width, maxWidth, height, gapSpace, paddingSpace, paddingSpaceX, paddingSpaceY, paddingRight, paddingLeft, paddingTop, paddingBottom are no longer exported from @marigold/system. These were internal utilities consumed only by @marigold/components. Use the prop types (WidthProp, HeightProp, …) and the CSS-var helpers (createWidthVar, createHeightVar, createSpacingVar) instead. The corresponding TypeScript prop types are unchanged.

• 6587493: refa([DST-1298]): Refactor Divider component: API, styling, and docs

  We fixed the vertical orientation of the divider, which previously didn't work. Added new Divider stories and updated the Divider docs.

• e33a1e7: feat(DST-1322): add current prop to Sidebar.Nav for automatic active item detection

  Sidebar.Nav now accepts a current prop that resolves the active leaf automatically — pass the current pathname (string) for smart segment-aware matching, or a predicate (href, key) => boolean for full control. Removes the per-item active={pathname === '/...'} boilerplate. The per-item active prop on Sidebar.Item still works as a local override.

• 2ff7bda: feat(DST-1098): persistent idle sort indicator on sortable columns

  Table.Column with allowsSorting now shows a Lucide arrow-down-up icon when the column is sortable but not currently the active sort column. The active ascending/descending icons (SortAscending / SortDescending) are unchanged.

Patch Changes

• 3c6a943: fix([DST-1410]): restore RangeCalendar build by using createWidthVar for the width prop. The component still imported the width runtime map from @marigold/system, which DST-901 removed when it migrated dimension props to CSS variables. This broke main for everyone — typecheck, unit tests, and Storybook tests all failed on every open PR. Apply the same migration pattern Calendar already uses: w-(--width) className plus style={createWidthVar('width', width)}.

  DST-1410

• b7c132d: fix(DST-1354): restore collapsing Table.EditableCell edit trigger

  The overlay/ring affordance introduced in #5250 (DST-1275) did not read as editable in user testing: sighted users did not associate the hover ring with inline editing, and there was no discoverable trigger for keyboard or touch. This change reverts that approach and restores the explicit pencil edit button.

  The trigger collapses to zero layout space at rest (w-0 overflow-hidden) and expands on row hover or keyboard focus, so static layout remains clean while the affordance is discoverable the moment the user interacts with the row. When expanded, the wrapper switches to overflow-visible so the button's focus outline is not clipped. The cell itself stays clickable as a touch target. Enabled editable cells always truncate their content to stay aligned with column headers and match the single-line editing controls; disabled cells behave like a regular Table.Cell.

• f16b887: fix(DST-1352): use correct outline for focus + error state in compound fields

• 1cac70d: docs: improve AutoTypeTable prop rendering

  Centralizes the display of design-system aliases in the component docs' prop tables. Props whose types reference aliases from @marigold/system or @marigold/types (e.g. SpacingTokens, Scale, WidthProp, NonZeroPercentage) now render with a meaningful summary in the main cell and the full list of resolvable literal values on row expand — instead of a wall of literals in the cell and a redundant alias name on expand.

  Before:

  • Cell: SpacingTokens<Tokens> (a fabricated generic, inconsistent across components)
  • Expand: SpacingTokens | Scale | undefined (same alias names, no new info)

  After:

  • Cell: SpacingTokens | Scale (accurate, derived from the real type)
  • Expand: "96" | "80" | ... | "tight" | "related" | 0 (every concrete value)

  Under the hood this replaces 27 per-prop @remarks \TypeName`JSDoc overrides with a single fumadocs-typescript transform in the docs site, so future components pick up the same behavior automatically. A@remarks` tag on a prop still wins as an escape hatch.

  Multiselect.width and ComboBox.width now use WidthProp['width'] directly instead of FieldBaseProps<'label'>['width'] — structurally identical, no runtime change.

• 5744bbf: feat([DST-1396]): mobile-optimized pagination layout

  Pagination now hides the numbered page buttons on small viewports (max-sm) and spreads the previous/next navigation buttons across the full width using justify-between. This produces a cleaner, touch-friendly pagination on mobile while preserving the full layout on larger screens.

• c2a1c72: fix: apply alignX from Table.Column to first column cells

  TableCellContent used a truthy check on columnIndex, causing it to skip the alignX lookup when columnIndex was 0 (first column). Replaced with a nullish check so all columns correctly inherit their alignment.

• de34b15: chore(deps): update react-aria-components, @react-aria/*, @react-stately/*, @react-types/*, and @internationalized/* packages to their latest versions.

• 04111ca: fix(DST-1355): widen variant and size prop types on Loader and ProgressCircle to accept arbitrary strings via | (string & {}). Matches the pattern already used by Button, Panel, and other components, and lets consumer themes register their own variant/size tokens without TypeScript errors while preserving IDE autocomplete for the built-in RUI values.

• Updated dependencies [727163c]

• Updated dependencies [4742e8e]

• Updated dependencies [de34b15]

  • @marigold/system@17.5.0

17.4.0

Minor Changes

• f4f7a05: feat(DST-1306): migrate Card padding props to semantic spacing tokens

  • Refactor Card to use createSpacingVar instead of static padding class maps
  • space prop (gap between children) continues to accept relational SpacingTokens (tight, related, regular, group, section) and numeric scale values
  • p prop (all sides) now accepts InsetSpacingTokens (square-*, squish-*, stretch-*) and numeric scale values
  • px/py/pt/pb/pl/pr now accept PaddingSpacingTokens (padding-tight, padding-snug, padding-regular, padding-relaxed, padding-loose) and numeric scale values

• f560d95: feat(DST-1239): migrate Inset component to semantic spacing tokens

  • space prop accepts inset recipe tokens (square-*, squish-*, stretch-*) and numeric scale values
  • spaceX/spaceY props accept single-value padding tokens (padding-tight, padding-snug, padding-regular, padding-relaxed, padding-loose) and numeric scale values
  • Add InsetSpacingTokens type for multi-value inset recipes
  • Add PaddingSpacingTokens type for single-value per-axis padding
  • Add --spacing-padding-* CSS custom properties to theme

• a4b467f: feat(DST-1323): always-on virtualization for <Select>, <ComboBox>, and <Autocomplete> dropdowns

  Follow-up to #5307. Large datasets (hundreds to thousands of items) no longer freeze the browser when opening or filtering these components — the internal <ListBox> is now virtualized with react-aria's Virtualizer + ListLayout (same pattern used by <TagField>).

  • <Select>, <ComboBox>, <Autocomplete>: virtualization is enabled by default on desktop, with no public API change
  • <ListBox>: the virtualized list now has a bounded height (max-h: 24rem) so the virtualizer has a viewport to clip against when used inside a <Popover>

Patch Changes

• bbf0832: refactor([DSTSUP-245]): Clean up Calendar styles

  Move hardcoded Tailwind classes from Calendar component files into theme slots, reduce cell padding from p-2 to p-1, and add new calendarHeading theme slot.

• 3f77810: Remove redundant subcomponent exports (AccordionItem, ListBoxItem, SelectListItem, ProgressCircleSvg) from the public index. These are already accessible via their parent compound components (e.g., Accordion.Item) or are internal implementation details.

• 85b2eb0: fix(DST-1275): improve EditableCell hover/focus affordance with data-editable attribute

• 50566a2: fix(DSTSUP-241): remove redundant label from mobile Menu tray

  The Menu component's label prop serves as trigger button text. On mobile, it was also rendered as <Tray.Title>, duplicating the label the user just tapped. Unlike form components (Select, ComboBox, DatePicker) where the label describes a field, the Menu label has no additional context value inside the tray. Removing it keeps the mobile tray clean and avoids showing non-text labels (e.g. icons from ActionMenu) as tray titles.

• 203baca: Replace local useRenderProps hook with the export from react-aria-components, removing redundant code.

• 969c8cc: chore([DST-1290]): Upgrade lucide-react from v0.575.0 to v1.x

  Upgraded lucide-react to the stable v1 API, which brings ~32% bundle size reduction and default aria-hidden on icons. No icon renames or removals affect the codebase since no brand icons from lucide are used.

• Updated dependencies [bbf0832]

• Updated dependencies [d341a9d]

• Updated dependencies [f560d95]

  • @marigold/system@17.4.0

17.3.1

Patch Changes

• d3374cd: fix: Replace arbitrary Tailwind variant with built-in group variant in TableEditableCell to fix CSS parsing error in Next.js (LightningCSS)
  • @marigold/system@17.3.1

17.3.0

Minor Changes

• a48059c: feat([DST-1208]): Introduce AppLayout Component
  • CSS Grid layout with Sidebar, Header, and Main slot sub-components
  • Full viewport height (100dvh) with scrollable main content area and fixed sidebar/header
  • Compound component pattern with ref support
  • Fixed header height of 3.5rem (h-14)
  • App Shell pattern documentation with full-page demo
  • Updated TopNavigation demos to use Sidebar.Toggle
  • Aligned Sidebar header height with AppLayout header

Patch Changes

• 6a29a6c: style([DST-1256]): Replace hardcoded values with semantic tokens
• 548dcb4: Wrap useToast return values (addToast, clearToasts, removeToast) in useCallback so they are referentially stable across renders and safe to use in useEffect dependency arrays
  • @marigold/system@17.3.0

17.2.1

Patch Changes

• @marigold/system@17.2.1

17.2.0

Minor Changes

• ed928a0: Update ActionBar with enter/exit animations, keyboard support, and built-in Table integration.

  • Add useActionBar hook and ActionBarContext for managing selection state between ActionBar and Table
  • Add actionBar render prop to Table for automatic selection wiring and ActionBar positioning
  • Add enter/exit animations using motion/react and react-aria useEnterAnimation/useExitAnimation
  • Add Escape key support to clear selection via FocusScope and useKeyboard
  • Add screen reader announcement when ActionBar appears
  • Add localized selectedCount/selectedAll messages (en-US, de-DE)
  • Update ActionBar theme slots: rename actions to toolbar, add selection slot
  • Update theme type definition to match new slot names

• 5d4c915: feat([DST-1240]): Add auto-collapse behavior to Breadcrumbs. The maxVisibleItems prop now defaults to 'auto', which uses a ResizeObserver to progressively show or hide breadcrumb items based on available container width.

• 61bfc60: Refactor relational spacing scale for better semantic clarity and visual rhythm.

  • Rename --spacing-peer token to --spacing-regular
  • Remove unused --spacing-joined and --spacing-context tokens
  • Adjust spacing scale values: tight (4px→6px), regular (16px→24px), group (32px→48px), section (64px→96px)
  • Move field-internal spacing from theme (Field.styles space-y-2) into component implementations using new in-field custom variant
  • Add in-field:mb-1.5 to Label and in-field:mt-1 to HelpText for consistent field layout
  • Update SpacingTokens type to reflect new scale

• 470d81c: feat(DST-979): Introduce a dedicated Sidebar component

  Add new Sidebar component for persistent app-level navigation. Features compound component API (Sidebar.Header, Sidebar.Nav, Sidebar.Item, Sidebar.Footer, Sidebar.Toggle, etc.), drill-down sub-navigation with animated transitions, collapse/expand with keyboard shortcut (Cmd+B / Ctrl+B) and localStorage persistence, mobile-responsive sheet overlay, full accessibility support, and i18n (EN/DE).

• c3bf8e4: feat([DST-1168]): Introduce TopNavigation Component

  • Three-slot grid layout (Start, Middle, End) using compound component pattern
  • Semantic HTML with <header> container and <nav> landmarks
  • Sticky by default, configurable alignment, and i18n ARIA labels
  • Theme styles for theme-rui and type definitions in @marigold/system

Patch Changes

• 91eb222: Update ActionBar styling with surface contrast and dedicated button slot.

  • Apply ui-surface-contrast utility to ActionBar container for adaptive theming
  • Add button slot to ActionBar theme for properly styled action buttons (replaces Button.ghost)
  • Add clearButton hover/focus/disabled styles using theme-aware utilities
  • Update ActionButton to use ActionBar.button classNames instead of Button.ghost
  • Replace CloseButton with IconButton for the clear selection button
  • Update stories to use lucide-react icons directly

• b3c7085: fix: Breadcrumbs auto-collapse now works correctly inside flex containers (e.g. TopNavigation). The hidden measurement wrapper uses min-w-0 w-full to prevent a feedback loop where collapsed content would shrink the container, keeping breadcrumbs permanently collapsed.

• 3019d28: Add z-50 to the non-modal (desktop) Drawer overlay so it renders above sticky table headers and other positioned content. The mobile modal path already had z-50.

• efbd292: fix: Add LayoutGroup in Tray test mock, and exclude stories when running unit tests

• 7ca2eb1: feat([DST-1227]): 💄 Implement Animated Transitions for Tabs Component, The active tab underline must slide smoothly between items

• 95c22b6: feat(DST-1214): Replace hardcoded English strings with centralized intl messages for proper i18n support. Components like Toast, Drawer, Pagination, SectionMessage, ProgressCircle, ActionBar, and TagField now use useLocalizedStringFormatter so their aria-labels are translated when the locale changes. Consolidates SearchInput's local intl messages into the shared intl/messages.ts file and converts parameterized messages to functions for clean variable interpolation.

• 4a24ad6: fix([DST-945]): Fix Tooltip controlled open prop positioning

• 600d09f: fix(DSTSUP-233): Added card shadows to master- and adminmark

• f63e57f: refactor(DST-1233): remove tailwindcss-animate, standardize overlay animations

• d963df2: chore: Update React Aria to newest version

• Updated dependencies [91eb222]

• Updated dependencies [ed928a0]

• Updated dependencies [cf56729]

• Updated dependencies [7ca2eb1]

• Updated dependencies [beebd7c]

• Updated dependencies [b115fda]

• Updated dependencies [61bfc60]

• Updated dependencies [c3bf8e4]

• Updated dependencies [d963df2]

  • @marigold/system@17.2.0

17.1.0

Minor Changes

• fd1b092: feat(DST-1219): Improve click area of <TagField>

  Improves the click area of the TagField component so that clicking anywhere on the field (not just the chevron button) opens the dropdown.

Patch Changes

• a3042ed: fix(DST-1220): Update to use ui classes instead of util classes in components
• Updated dependencies [fd1b092]
  • @marigold/system@17.1.0

17.0.1

Patch Changes

• @marigold/system@17.0.1

17.0.0

Major Changes

• 196172e: BREAKING CHANGE: Comprehensive Table component rewrite with modern features

  This release introduces a complete rewrite of the Table component built on react-aria-components, providing enhanced accessibility, modern features, and improved developer experience.

  Breaking Changes

  The old Table component has been moved to @marigold/components/legacy. The main Table export now refers to the new implementation.

  Changed API Structure

  Migration Required:

  // Before (old Table)
  import { Table } from '@marigold/components';
  
  // After - Option 1: Use legacy export (temporary)
  import { Table } from '@marigold/components/legacy';
  
  // After - Option 2: Migrate to new Table API (recommended)
  import { Table } from '@marigold/components';
  
  <Table>
    <Table.Header>
      <Table.Column>Name</Table.Column>
      <Table.Column>Email</Table.Column>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>John Doe</Table.Cell>
        <Table.Cell>john@example.com</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>

  Empty State Prop Location

  The emptyState prop has been moved from the Table component to Table.Body. This change provides better composition and follows react-aria-components patterns.

  Migration Required:

  // Before (old Table)
  <Table emptyState={<EmptyMessage />}>
    <Table.Header>
      <Table.Column>Name</Table.Column>
    </Table.Header>
    <Table.Body>
      {/* rows */}
    </Table.Body>
  </Table>
  
  // After (new Table)
  <Table>
    <Table.Header>
      <Table.Column>Name</Table.Column>
    </Table.Header>
    <Table.Body emptyState={<EmptyMessage />}>
      {/* rows */}
    </Table.Body>
  </Table>

  Form Fields in Table Cells

  Inlining form fields directly in table cells is no longer supported. This approach broke accessibility patterns and keyboard navigation as it created conflicting focus management between the table's row selection and form inputs.

  Migration Required:

  // Before (old Table) - NOT ACCESSIBLE
  <Table>
    <Table.Header>
      <Table.Column>Name</Table.Column>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <TextField />  {/* This breaks keyboard navigation */}
        </Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>
  
  // After (new Table) - Use TableEditableCell
  <Table>
    <Table.Header>
      <Table.Column>Name</Table.Column>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.EditableCell
          field={<TextField name="name" defaultValue={value} />}
          onSubmit={handleSubmit}
        >
          {value}
        </Table.EditableCell>
      </Table.Row>
    </Table.Body>
  </Table>

  Cell Alignment Props

  The align prop on Table.Column, Table.Cell, and Table.EditableCell has been renamed to alignX for consistency with other Marigold layout components.

  Vertical alignment (alignY) is only available on the Table component itself, not on individual cells. It controls the vertical alignment of all cell content.

  Migration Required:

  // Before
  <Table.Column align="right">Balance</Table.Column>
  <Table.Cell align="right">{value}</Table.Cell>
  
  // After
  <Table.Column alignX="right">Balance</Table.Column>
  <Table.Cell alignX="right">{value}</Table.Cell>
  
  // Vertical alignment (table-level only)
  <Table alignY="top">
    {/* ... */}
  </Table>

  Column Width Values

  Tailwind CSS width classes are no longer supported on Table.Column. Column widths now use pixel values or CSS grid units, which provides better content-fitting behavior and more predictable layouts.

  Migration Required:

  // Before (old Table)
  <Table.Column width="w-32">Name</Table.Column>
  <Table.Column width="w-full">Description</Table.Column>
  
  // After (new Table)
  <Table.Column width="200px">Name</Table.Column>
  <Table.Column width="1fr">Description</Table.Column>  {/* Default: 1fr */}

  By default, columns use 1fr as their width, which distributes available space evenly. You can now specify exact pixel widths for columns that need fixed sizing, or use CSS grid units like 2fr for proportional layouts.

  New Features

  The new Table component includes:

  Core Features

  • Enhanced Accessibility: Built on react-aria with full ARIA pattern compliance, keyboard navigation, and screen reader support
  • Sorting: Click column headers to sort ascending/descending with visual indicators (SortAscending, SortDescending icons)
  • Selection: Single or multiple row selection with checkboxes and keyboard support
  • Row Actions: Support for action menus and interactive elements within rows

  Advanced Features

  • Editable Cells: Inline cell editing with TableEditableCell component supporting text inputs, selects, and custom editors
  • Drag and Drop: Reorder rows with visual drag preview and drop indicators
  • Sticky Headers: Keep table headers visible while scrolling through data
  • Empty States: Built-in support for displaying empty state messages
  • Links: Clickable cells and proper link handling within table rows

  Layout & Styling

  • Text Overflow Control: Choose between truncation and wrapping for cell content
  • Text Selection: Enable/disable text selection within table cells
  • Cell Alignment: Flexible horizontal (alignX) and vertical (alignY) text alignment options
  • Responsive Design: Better handling of different viewport sizes
  • Column Width Control: Support for fixed and flexible column widths

  New Components

  This release adds several new subcomponents:

  • Table.Column - Define table columns with sorting, alignment, and width options
  • Table.EditableCell - Editable table cells with inline editing support
  • Table.SelectableCell - Checkbox cells for row selection
  • Table.renderDropIndicator - Render function for custom drop indicators
  • Table.renderDragPreview - Render function for custom drag previews

  New Icons

  • Pencil - Indicates editable cells
  • SortAscending - Ascending sort indicator
  • SortDescending - Descending sort indicator

  Theme Updates

  • New theme styles for the modern Table component in @marigold/theme-rui
  • Legacy Table styles preserved as LegacyTable.styles.ts
  • Updated documentation theme (@marigold/theme-docs) with new Table styles

  Documentation

  Comprehensive documentation updates including:

  • Complete API reference with all new props and features
  • Interactive demos for all features (sorting, selection, editing, drag-drop, etc.)
  • Anatomy diagram showing component structure
  • Migration guide from legacy Table
  • Accessibility guidelines

  Backward Compatibility

  The legacy Table component remains available at @marigold/components/legacy for backward compatibility. However, it is now considered deprecated and will receive maintenance updates only. We strongly recommend migrating to the new Table component to benefit from:

  • Better accessibility and ARIA compliance
  • Modern features (sorting, selection, editing)
  • Improved performance
  • Active development and new features
  • Better React 19 compatibility

  Examples

  Basic Table

  <Table>
    <Table.Header>
      <Table.Column>Name</Table.Column>
      <Table.Column>Email</Table.Column>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.Cell>John Doe</Table.Cell>
        <Table.Cell>john@example.com</Table.Cell>
      </Table.Row>
    </Table.Body>
  </Table>

  Sortable Table

  <Table>
    <Table.Header>
      <Table.Column allowsSorting>Name</Table.Column>
      <Table.Column allowsSorting>Email</Table.Column>
    </Table.Header>
    <Table.Body>{/* rows */}</Table.Body>
  </Table>

  Selectable Table

  <Table selectionMode="multiple">
    <Table.Header>
      <Table.Column>Name</Table.Column>
      <Table.Column>Email</Table.Column>
    </Table.Header>
    <Table.Body>{/* rows with selection */}</Table.Body>
  </Table>

  Editable Table

  <Table>
    <Table.Header>
      <Table.Column>Name</Table.Column>
      <Table.Column>Email</Table.Column>
    </Table.Header>
    <Table.Body>
      <Table.Row>
        <Table.EditableCell>
          {name => <TextField value={name} />}
        </Table.EditableCell>
        <Table.EditableCell>
          {email => <TextField value={email} />}
        </Table.EditableCell>
      </Table.Row>
    </Table.Body>
  </Table>

  Technical Details

  • Built on react-aria-components v1.5.0+
  • Fully typed with TypeScript
  • Comprehensive test coverage (unit + browser tests)
  • Follows WCAG 2.1 AA accessibility standards
  • Compatible with React 19
  • Supports both controlled and uncontrolled modes

Minor Changes

• d8ce791: feat([DST-1092]): Add TagField component and deprecate Multiselect

  • Add <TagField> component: a multi-select field that displays selected items as removable tags with a searchable dropdown, built on react-aria's Select, Autocomplete, and TagGroup
  • Support for controlled/uncontrolled selection, disabled state, error state, disabled keys, sections, and custom empty state
  • Deprecate <Multiselect> component with updated docs pointing to <TagField>

• 196172e: feat: Add ref forwarding support to Form component

• cfa9b99: feat([DST-1206]): Mobile support for <TagField>

• 6c071f0: refa(DST-1146): Migrate <Center> to semantic spacing tokens

• 44d01a6: feat(DST-1141): Update <Card> to use semantic spacing and add stretch property

  • <Card> uses semantic spacing
  • Added stretch in favor of size="full"
  • Updated test suite
  • Fixed that the <Card> always take full width

• 0c00d1d: ## 🎨 Changes

  1. Refactored Surface Styling

  What changed:

  • Completely refactored the surface styling system to use background-clip and background-origin for gradient borders
  • Improved contrast and depth across all surface-based components (inputs, cards, dialogs, etc.)
  • DateInput: Added new input part for styling

  Technical Details:

  • New ui-surface utility class that works on single elements including <input>
  • Gradient borders transition from lighter (top) to darker (bottom) for improved depth perception
  • Removed deprecated utilities: util-focus-*, util-disabled
  • Introduced new state utilities: ui-state-focus, ui-state-disabled, ui-state-error, ui-state-readonly
  • New elevation system: ui-elevation-raised, ui-elevation-overlay

  2. Semantic Spacing System (DST-1001)

  New Relational Spacing Scale: Introduced semantic tokens that describe the strength of relationships between elements:

  • joined (0.25rem) - Elements attached as a single unit
  • tight (1rem) - Packed containers for high-density scanning
  • related (2rem) - Minimal separation for related pairs (label + input)
  • peer (4rem) - Self-contained equals in the same flow
  • group (8rem) - Logical separation between content zones
  • section (16rem) - Distinct layout sections
  • context (32rem) - Complete contextual shift

  New Inset (Padding) Scale:

  • tight, snug, regular, relaxed, loose - with square, squish, and stretch variants
  • Example: --spacing-squish-regular, --spacing-stretch-relaxed

  Benefits:

  • Decouples intent from pixel values
  • Consistent rhythm across the interface
  • Improved scannability and hierarchy
  • Reduced reliance on explicit containers (cards/borders)

  3. Component Improvements

  FileField:

  • Removed hardcoded unchangeable styles
  • Better grid-based layout for file items
  • Added itemRemove part for styling
  • Proper internationalization for remove button

  DatePicker:

  • Fixed dropdown sizing - now fits content instead of input width
  • Improved calendar popover positioning

  Select & Input Components:

  • Simplified container structure
  • Better icon and action placement
  • Improved accessibility with proper ARIA attributes

  Dialog & Overlay Components:

  • Consistent elevation styling
  • Better scrollbar styling
  • Improved focus management

  📝 Documentation

  • New Spacing Guide: Comprehensive documentation explaining the semantic spacing system
  • Added visual examples for relational and inset spacing
  • Guidance on implicit vs. explicit grouping
  • Updated all example forms and patterns to use new spacing tokens

  🔧 Technical Improvements

  • Replaced deprecated data attributes with proper CSS selectors
  • Better TypeScript typing for spacing tokens
  • Improved theme component definitions
  • Cleaner CSS with reduced specificity
  • Better support for different component states (disabled, readonly, error, focus)

  📊 Statistics

  • 118 files changed
  • 1,677 insertions, 690 deletions
  • Components affected: TextArea, Input, DateField, FileField, Select, Calendar, Card, Dialog, Menu, Toast, and many more

  ⚠️ Migration Notes

  Spacing Values

  // Before
  <Stack space="fieldY">
  <Inline space="fieldX">
  
  // After
  <Stack space="peer">
  <Inline space="related">

  Surface Styling

  /* Before */
  .util-surface-raised
  
  /* After */
  .ui-surface /* uses raised elevation by default */
  .ui-surface.ui-elevation-overlay /* for overlays */

• 59ed05f: feat([DST-900]): Introduce Internal <Tray> Component for Mobile Support. <DatePicker>, <Menu>, <Autocomplete>, <Combobox> and <Select> have a new mobile experience.

• 31a4e38: feat(DST-1184): Add name prop to FileField

Patch Changes

• 34c785a: style([DST-1154]): Update Admin/Master Badge Styling

• 96e145a: fix(Container): Fix a regression which made <Container> not correctly work with <Breakout> anymore

• 00a3c81: fix(DST-1205): Fix visuals of <NumberField> stepper when disabled using min/max

• cc61968: refa(DST-1150): Remove space prop from <TabList>

• 01e6bdb: [DST-1157]: introduce new <ActionBar> alpha component

• 2244030: fix(DSTSUP-231): Scrolling when pointer hovers over <Scrollable> works as expected.

• 63f1603: style([DST-1143]): Improve ContextualHelp sizes

  Breaking Change: Sizes have been removed, the default has a new style.

• 7928a23: Refactor z-index implementation to move all z-index values from theme style files to component implementations. This ensures consistent stacking order across all themes and makes z-index behavior theme-independent.

  Changes:

  • Moved z-index classes from theme style files (*.styles.ts) to component implementations
  • Z-index values are now applied directly in component className props using Tailwind utilities
  • Updated 8 component files: ToastProvider, Popover, Tooltip, Underlay, DrawerModal, Drawer, ActionBar
  • Updated 7 theme style files to remove z-index classes
  • Added comprehensive z-index documentation to CLAUDE.md
  • ActionBar moved to floating layer (z-30) for better integration with content overlays

  Benefits:

  • Z-index stacking order is now consistent across all themes
  • Components control their own z-index, making it part of component behavior
  • Easier maintenance - developers only check component files to understand stacking
  • Future themes automatically inherit correct z-index stacking

• 5a90757: feat(DSTSUP-225): Introduce <ToggleButton> and <ToggleButtonGroup> as alpha components

• 4645c5d: style(DST-1197): Refine elevation shadows

• 8dd0455: feat([DSTSUP-222]): Introduce <EmptyState> Component as beta

• 1469268: [DST-1088]: add docs for onAction prop

• f916a20: fest(DST-1149): Allow to use semantic spacing with <Grid>

• 726239d: feat(DST-1148): Allow to use semantic spacing with <Container>.

• 1bd9f27: feat(DST-1147): Allow to use semantic spacing in <Columns>

• b7c64cc: fix(Checkbox): Correctly apply focus styling on checkboxes

• 8a70185: refa(DST-974): Refactoring width property on FieldBase and Form Elements like Input, TextArea, DateInput and Select. Labels and HelpText can now be wider as the actual input field.

• Updated dependencies [01e6bdb]

• Updated dependencies [5a90757]

• Updated dependencies [0c00d1d]

• Updated dependencies [8dd0455]

• Updated dependencies [8a70185]

  • @marigold/system@17.0.0

16.1.0

Minor Changes

• c5bd98b: feat(DST-1136): Make clear that "stretch" is the default for <Stack>

Patch Changes

• 89acee4: feat: Add a generic spacing scale that can be used with createSpacingVar
• 4ac589b: refa(DST-1130): Use CSS var instead of map for spacing in <Stack>
• d720c5e: feat(DST-1138): <Inline> uses spacing helper instead of style-props
• 0b8ca1e: feat(DST-1145): Use semantic tokens with <Aside>
• Updated dependencies [89acee4]
• Updated dependencies [4ac589b]
• Updated dependencies [c5bd98b]
  • @marigold/system@16.1.0

16.0.1

Patch Changes

• 77a64e8: fix: Use relative imports & remove default React import usage
• b90a67e: fix(FileField): Use local svg instead from @marigold/icons
  • @marigold/system@16.0.1

16.0.0

Major Changes

• b947276: style(DST-1089): Add expand/collapse animation to <Accordion>

• f10119a: refa(DST-1109): Remove required indicator from the label's text content

  BREACKING CHANGE: We removed the indicator styling from <Label>. The component is no longer a multi-part component. Rather than styling the required indicator through a dedicated part (previsouly indicator), you can now apply it anyway you want, for example by using 'group-required/field:after:content-["*"]'.

• 4eebff4: [DSTSUP-191]: Breaking chnge: <XLoader /> renamed to <Loader /> Added a new prop loaderType which is by default cycle. New option cycle shows a spinning cycle.

Minor Changes

• 98bf929: [DST-1075]: Introduce <FileField>component

Patch Changes

• 832e3fa: fix(styles): Remove extra spacing when hidden/a11y elements are causing it

• 845f26c: feat([DST-1025]): Adding possibilty to paste date values in <DatePicker> component.

• 1e98c67: [DST-1103]: Added a new section "Placement and order" onto the <Button> component page.

• 9027ce9: feat([DST-973]): Select value on focus in <NumberField>

• 2ac63f7: fix([DSTSUP-196]): Fix Listbox layout when more than one element is used.

• 29494b4: fix(DST-1110): Remove extra whitespace from <Container>

  When there is no <Breakout> inside the container we do not have to apply the 3 column layout. Otherwise this causes 2 empty columns to be there.

• 57a2bd3: style([DST-1126]): Fix Breadcrumb styling

• 62692a6: style(DST-1086): Add a new destructive button variant

• Updated dependencies [b947276]

• Updated dependencies [98bf929]

• Updated dependencies [f10119a]

• Updated dependencies [4eebff4]

  • @marigold/system@16.0.0

15.4.3

Patch Changes

• @marigold/system@15.4.3

15.4.2

Patch Changes

• @marigold/system@15.4.2

15.4.1

Patch Changes

• d710177: fix(drawer): Fix drawer styles for some enviroments
  • @marigold/system@15.4.1

15.4.0

Minor Changes

• e985fe2: feat([DST-1091]): Add multiselection mode to <Select>

Patch Changes

• f621653: feat([DSTSUP-187]): Enhance Toast component with action support

  • Introduced action property
  • Update description to support JSX

• 025d6e9: fix([DST-1095]): Don't break table header when sorting indicator is shown and use cursor when sortable

• ffbebd0: refa([DST-1099]): Adjust icons sizes in some components to bette fit their container.

• 9ec4620: fix([DSTSUP-193]): update Inline components alignY=input now also alignes with input elements regardless of description

• 77e0417: fix([DST-1078]): Fix scrolling within <ContextualHelp>

• Updated dependencies [f621653]

• Updated dependencies [e985fe2]

• Updated dependencies [77e0417]

  • @marigold/system@15.4.0
  • @marigold/types@1.4.0

15.3.0

Minor Changes

• 95b55b8: feat([DST-1074]): Introduce a useConfirmation hook to conveniently open confirmation dialogs

• bad3ef4: feat([DST-1056]): Add a helper to conveniently parse form data

• 4395d2e: feat([DST-1047]): Improve <List> styles and add small variant

• 97adc14: feat([DST-1061]): Add more alignment options to <Inline>, <Stack> and <Grid>

• 91a5e7b: feat([DST-1044]): Introduce LinkButton component

• baf550b: feat([DST-940]): Introduce <Drawer> component

  Added <Drawer> component along with usage guideline and stories. The drawer offers a consisten way to present secondary content in a non-blocking way.

• 4ccbec2: feat([DST-1077]): Add white space control to <Text>

• 5e62b84: feat([DST-1051]): Introduce ConfirmationDialog

• beeba04: feat([DST-1042]): Add "destrutive" variant to <Menu.Item>

Patch Changes

• c6fb6c2: feat: Expose TimeValue types
• ba5f502: feat([DST-1069]): Add noWrap prop to <Inline>
• 061b5e9: feat([DST-1050]): Card master and adminmark variant
• ce996ae: feat([DSTSUP-185]): added stickyHeaderand iconPositionprops to Accordion
• Updated dependencies [97adc14]
• Updated dependencies [4ccbec2]
  • @marigold/system@15.3.0

15.2.0

Patch Changes

• @marigold/system@15.2.0

15.1.0

Minor Changes

• a3ddf47: feat([DST-1037]): Add description (help text) to <Checkbox> component
• 0583b77: feat([DST-1039]): Allow <Text> to not wrap lines

Patch Changes

• 7b3caca: feat([DST-1035]): Apply data-rac attribute to our table elements.
• Updated dependencies [a3ddf47]
• Updated dependencies [0583b77]
  • @marigold/system@15.1.0

15.0.2

Patch Changes

• @marigold/system@15.0.2

15.0.1

Patch Changes

• df57868: Fix([DSTSUP-181]): Adjust Accordion.Header styles to support full width
• 00d230a: chore: allow react-aria patch version range as dependencies
• b351484: feat([DST-981]): Drawer supports controlling the origin of the <Drawer> by using placement property (e.g. left, right, top, bottom), also supports configurable sizes to adapt to different sizes.
• Updated dependencies [00d230a]
  • @marigold/system@15.0.1

15.0.0

Major Changes

• 9bac182: refa([DST-904]): Breaking Changes: Rename noOptionsMessage property to emptyState in <Multiselect> component.

• 62ac4b8: refa([DST-919]): Remove <Image> component

  Breaking Change

  The <Image> component has been removed from Marigold. Please replace it with the native <img> element.

  If you previously used the fit or position props, you can replicate the same behavior using the corresponding Tailwind CSS utility classes.

  Replacement table

  Prop type	Prop value	Tailwind class
  fit	contain	object-contain
  	cover	object-cover
  	fill	object-fill
  	none	unset
  	scaleDown	object-scale-down
  position	none	— (no class)
  	bottom	object-bottom
  	center	object-center
  	left	object-left
  	leftBottom	object-left-bottom
  	leftTop	object-left-top
  	right	object-right
  	rightBottom	object-right-bottom
  	rightTop	object-right-top
  	top	object-top

• 0585db1: refa([DST-1010]): Separate aria-label and name for slider's thumbs

  Breaking Change: The aria-label (thumbLabels) and name attributes for slider thumbs are now separate. Update implementations to set both explicitly if needed.

Minor Changes

• 6d8358c: feat([DST-1003]): Improve type safety for component variants.
• 2a64b4f: feat([DST-1008]): Introduce a "remove all" function for <Tag.Group>
• 41da911: feat([DST-1005]): Add a "link" variant to <Button>
• 13d27bf: feat([DST-1006]): Introduce a collapsible section for long checkbox groups and radios

Patch Changes

• 44ceb28: bugfix([DST-935]): Controlled <Dialog> now working correctly when dismissable is set to true

• 7e33a7f: docs: Add alpha to for top navigation (previously a recipe)

• 801e968: fix([DSTSUP-176]): Calendar - Hide, disable, limit the MonthListBox and YearListBox depening on minValue and maxValue

• 17318a8: fix([DSTSUP-172]): Fix alignment of buttons and inputs in <Inline> component.

• 6d2d2d4: refa([DST-916]): Remove <Header> component and replace with native <header>

  Breaking Change: <Header> component removed

  The <Header> component has been removed from Marigold. Please replace it with the native HTML <header> element.

  Example migration:

  Before

  <Header>
    <h1>Page title</h1>
  </Header>

  After

  <header>
    <h1>Page title</h1>
  </header>

• 5e06780: docs([DST-902]): Define asyncronous data loading patterns for components like <Combobox> and <Autocomplete>.

  Both <Combobox> and <Autocomplete> now accept a new prop called emptyState that allows you to provide custom content to display when there are no items in the list, such as a message

• 1ab48da: refa([DST-915]): Remove Footer component

  Breaking Change: <Footer> component removed

  The <Footer> component has been removed from Marigold. Please replace it with the native HTML <footer> element.

  Before

  <Footer>
    <p>© 2025 Company Name</p>
  </Footer>

  After

  <footer>
    <p>© 2025 Company Name</p>
  </footer>

• Updated dependencies [2a64b4f]

• Updated dependencies [82370d2]

• Updated dependencies [80a4427]

• Updated dependencies [62ac4b8]

  • @marigold/system@15.0.0

14.1.1

Patch Changes

• 424e2f4: feat([DST-998]): prevent page bounce when <Scrollable> is used inside a page.
• 81f1c9d: fix broken release
• Updated dependencies [81f1c9d]
  • @marigold/system@14.1.1
  • @marigold/types@1.3.2

14.1.0

Minor Changes

• cc493fc: feat([DST-737]): Add Toast component

  Added ToastProvider Component with corresponding documentation and stories. It's a small Temporary Notification on the edge of the screen, that should be used for messages that don’t need immediate interaction.

• 2163518: feat([DST-899]):Breadcrumb Component

  We added a new Breadcrumbs component to improve navigation and accessibility in the UI. It supports collapsing long breadcrumb lists, custom separators (chevron or slash), and integrates with react-aria-components for full accessibility and keyboard navigation. The component is flexible, supports links and custom content, and includes comprehensive documentation and usage examples.

Patch Changes

• 930e633: chore: Update react-aria (Release 22/07/2025)
• 8f550ec: refa([DST-976]): Remove unused class names from ContextualHelp
• 69e7b61: refa([DST-978]): Add item and section as child component of ActionMenu
• ea0f758: fix(DST-968): Fix <Tag> styles and add multiselect tag filter to filter pattern example
• 8e178b7: fix([DST-942]): Fix <Drawer> on mobile and refactor <OverlayContainerProvider>
• 37f40ba: feat([DST-977]): Style icons inside <Menu.Item>
• Updated dependencies [cc493fc]
• Updated dependencies [930e633]
• Updated dependencies [2163518]
  • @marigold/system@14.1.0

14.0.0

Major Changes

• 6d61be9: refa([DST-904]): Breaking Changes: Deprecate className prop from <Button> component.
  • Styling should now use variant or size props instead.
  • Added SelectListAction to SelectList for handing actions position.

Minor Changes

• 29e6133: feat([DST-937]): Add master and admin mark variants

Patch Changes

• a7ec9d3: fix[DSTSUP-169]: Fix width property on Calendar component
• 5e08185: docs([DST-925]): Introduce "admin- and master mark" pattern fix([DST-925]): Adjust styles of Tabs to work better with badges
  • @marigold/system@14.0.0

13.0.0

Major Changes

• 9a5791c: docs([DST-914]): Update Divider docs to match new structure of component pages

  Breaking Change: Removed className property on this component.

• c33ad07: docs([DST-921]): Revise text component page to new component page structure.

  Breaking Change: Some propertys has been removed, including className and HtMLElement props.

• d224a2f: style([DST-721]): Breaking Changes: Deprecate B2B and Core themes

  • @marigold/theme-b2b and @marigold/theme-core are now deprecated and will no longer receive updates or maintenance. Please migrate to RUI theme package.
  • The FieldGroup component has been removed and is no longer available in @marigold/components.
  • All documentation and Storybook references to the B2B and Core themes, as well as FieldGroup, have been removed.
  • If you are using either of these themes , please update your project to our lates release.

Minor Changes

• 854e00b: refa([DST-871]): Enhance Inline component to dynamically align buttons with input fields when descriptions are present.

• 430c266: feat([DSTSUP-158]): List accessibility for <Stack> component

  The <Stack> component supports a new property asList making it possible to provide accessibility when using a <Stack> which behaves as a list element. The <List> has an updated documentation.

Patch Changes

• 98bea2e: docs([DST-917]): Revise Headline documentation

• 16f6dbb: fix[DST-812]: Migrate from UNSTABLE_portalContainer to UNSAFE_PortalProvider

  Changed UNSTABLE_portalContainer to UNSAFE_PortalProvider as UNSTABLE_portalContainer is deprecated.

• Updated dependencies [d224a2f]

  • @marigold/system@13.0.0

12.0.5

Patch Changes

• a6bcd89: chore(deps): update react-aria
• Updated dependencies [a6bcd89]
  • @marigold/system@12.0.5

12.0.4

Patch Changes

• 3e19b71: feat([DST-883]): New variant for RUI table. You can now use a new variant for RUI theme.
• ed72011: feat(DSTSUP-150): add ghost version to <Menu> + normalize svg sizes in buttons and menus
• 6c230c7: feat[DST-731]: Add ContextualHelp Component with Docs We added a new ContextualHelp component to provide inline help and guidance within the UI. It displays contextual information in a popover triggered by an icon button, with configurable placement, size, and icon variant (help or info). The component is accessible, supports both controlled and uncontrolled open states, and is designed for flexible content layout.
• 17d28b5: feat([DST-885]): update default <Link> styles and add link variant
• 5127d58: feat([DST-884]): add vertical alignment property (alignY) to table
• Updated dependencies [6c230c7]
  • @marigold/system@12.0.4

12.0.3

Patch Changes

• 7451134: feat([DST-863]): Improve Accordion.Header when using additional content in the header.

• 12b00ed: feat[DST-856]: Add TimeField Component

  We added a new TimeField component to support time-based user input. It allows users to select and edit time values, with configurable granularity (hours, minutes, seconds) and optional 12/24-hour format. The component supports accessibility features like keyboard navigation.

• 73edbb0: feat([DST-866]): Support alignX and alignY properties for <Grid> component.

• Updated dependencies [12b00ed]

  • @marigold/system@12.0.3

12.0.2

Patch Changes

• 0bca5d8: Update React aria components
• ca26659: refa([DST-715]): Refactor <Calendar> component, Fix resizing when open calendar listboxes
• Updated dependencies [0bca5d8]
• Updated dependencies [ca26659]
  • @marigold/system@12.0.2
  • @marigold/types@1.3.1

12.0.1

Patch Changes

• 0e8211b: chore([DST-853]): Refa styles for <Menu> button
• af401e5: fix([DSTSUP-135]): Use correct padding on <MultiSelect> component
• 534ad77: refa([DST-738]): Adding checkmark icon as selection indicator in RUI theme for SelectList and Listbox components.
• Updated dependencies [0e8211b]
  • @marigold/system@12.0.1

12.0.0

Major Changes

• 2ed500d: feat([DST-804]): Allow Tag to be used in forms and overhaul its docs

  BREACKING CHANGE: Remove the allowsRemoving prop. This didn't had an effect for a while and to make it more clear removing is enabled, if there is a function set on the onRemove prop.

• c30993e: refa([DST-816]): Remove children prop, only label is now available

  BREAKING CHANGE: The children prop is no longer supported in the <Checkbox>, <Slider> and <Switch> component to display a label. Use the dedicated `label? prop instead.

Minor Changes

• 438b959: feat([DSTSUP-112]): Add sizes to RUI's <Dialog>
• fe4b9de: feat([DST-801]): Allow to format ranges with <NumericFormat>

Patch Changes

• d7cfabd: fix([DST-808]): Don't render empty helptext when no description or error is present.
• 20ecd9c: fix([DST-803]): Span empty state over the whole table width.
• 4e510fb: [DST-763]: Migrate to eslint flat config.
• 9d57c1f: fix([DST-802]): remove unneeded classnames from <Modal>
• Updated dependencies [438b959]
• Updated dependencies [fe4b9de]
• Updated dependencies [4e0971e]
  • @marigold/system@12.0.0

11.5.0

Minor Changes

• c9b95bc: feat([DST-799]): Add unstyled and maxWidth to <Form>

Patch Changes

• 8dab2e6: chore: update react-aria (April 2025 release)

• 70399e4: style([DST-724]): Adjust required icon for form elements in RUI style

• 337f9ee: doc[DST-727]: add copyable examples to the pagination documentation.

• d24cee3: fix([DST-232]): Align icon in <HelpText> to the start of text begin.

• 4686a0d: refa([DST-754]): Add <FocusScope> to <Pagination> to improve focus state.

• c42767f: refa([DST-762]): support label prop for <CheckBox> and <Switch>.

  Breaking Change: Deprecate children property, use label instead. With the next major version children will be removed.

• 2a87f43: feat[DST-759]: Implement <CloseButton> component to be re-used into other components internally (e.g Dialog, Tag, Drawer and SectionMessage).

• Updated dependencies [8dab2e6]

• Updated dependencies [c9b95bc]

• Updated dependencies [2a87f43]

  • @marigold/system@11.5.0

11.4.1

Patch Changes

• 81b2216: refa([DST-720]): Rename option to item in styles for <ListBox>

  Breaking Change: This change will break your styles if you use custom styles for the <ListBox> Component. option is now called item.

• 953cf3d: Making the dialog titles independant

• Updated dependencies [81b2216]

• Updated dependencies [953cf3d]

  • @marigold/system@11.4.1

11.4.0

Patch Changes

• @marigold/system@11.4.0

11.3.0

Minor Changes

• 611c2e8: feat(733): Introduce a <Drawer> component
• 7554cf9: refa([DST-755]): Cleanup NumberField styles for RUI + left align text when stepper is hidden

Patch Changes

• 888e852: [DST-769]: use useId from react-aria utils to support React 17+
• 08ba5c7: chore([DSTSUP-109]): change visibility of icon to hidden when sorting…
• 8b404d2: fix([DST-750]): Do not set styles for content in <Accordion>
• Updated dependencies [611c2e8]
  • @marigold/system@11.3.0

11.2.3

Patch Changes

• 3d1f8c6: feat(rui): Next version of RUI theme with small updates and styling fixes.
• Updated dependencies [3d1f8c6]
  • @marigold/system@11.2.3

11.2.2

Patch Changes

• 9412037: RUI theme release 0.3.0

• 91c72e8: feat[DST-606]: Implement <MultiSelect> component

  Introcude <MultiSelect> as component!

• Updated dependencies [91c72e8]

  • @marigold/system@11.2.2

11.2.1

Patch Changes

• 40db199: feat(rui): Add more styles to components

• 619b4b2: fix([DST-702]): add space for multiple selection mode in <SelectList>

  There were no space between <Checkbox> and children when using <SelectList> in multiple selection mode.

  • @marigold/system@11.2.1

11.2.0

Minor Changes

• c387b43: feat: allow React >=17.0.0

Patch Changes

• c387b43: feat: allow React >=17.0.0
• a31881d: fix(DST-696): Make it possible to only pass in the color name without a prefix
• Updated dependencies [c387b43]
• Updated dependencies [a31881d]
• Updated dependencies [c387b43]
  • @marigold/system@11.2.0
  • @marigold/types@1.3.0

11.1.1

Patch Changes

• be665e7: fix(DST-691): Fix regression, allow to use custom color values with <Text>, <Headline> and <SVG>
• Updated dependencies [be665e7]
  • @marigold/system@11.1.1

11.1.0

Minor Changes

• fd96b48: feat(DST-689): Allow to style body element and header row of a <Table>

Patch Changes

• 300bfba: fix(DST-690): Rotate chevron when Accordion.Item is expanded + align header and content
• Updated dependencies [fd96b48]
  • @marigold/system@11.1.0

11.0.2

Patch Changes

• 8e58923: fix([DSTSUP-104]): mobile behaviour for <Popover>

  <Underlay> stayed remaining open on small screens while <Popover> was correctly closing, fixed this and added styles for <Popover> back.

  • @marigold/system@11.0.2

11.0.1

Patch Changes

• @marigold/system@11.0.1

11.0.0

Major Changes

• 964e025: refa([DST-665]): Refactoring Accordion

  Added two Accordion components Accordion.Header and Accordion.Content. Accordion.Header replaces the title in Accordion.Item. Accordion.Content is now the place where the content needs to be.

  Reworked the Accordion Documentation Page.

• 82c869c: refa: improve <Container> and <Breakout> component

  BREAKING CHANGE: This PR includes breaking changes, because we removed and changed a lot ot the props API of <Container> and <Breakout>. The <Container> now only works with <Text> and <Headline> component. This allows for a smoother developer experience and prevents suprises.

  Make the <Container> and <Breakout> component more usable for real world scenarios.

  • <Container> supporst space style prop
  • simplify <Container> usage by removing unnecessary props
  • simplify <Breakout> and make it composable with other layout components
  • make <Text> and <Headline> adhere to a <Container> content length

• d96b809: refa(DST-629): Align <XLoader> modes with loading pattern naming convention

  BREAKING CHANGE: Rename mode prop to align with the "Loading state" pattern. Renamed "fullsize" to "fullscreen" and "inline" to "section".

Patch Changes

• Updated dependencies [964e025]
  • @marigold/system@11.0.0

10.2.1

Patch Changes

• bb2049f: bugfix[DSTSUP-100]: Bug in pagination component

  • display of results counter fixed
  • when page size changed the first page will now be selected

• 7f0841d: fix(DSTSUP-102): Set dimensions of checkmark

  Fixes a bug in Safari where the checkmark was not displayed.

  • @marigold/system@10.2.1

10.2.0

Minor Changes

• b89cd49: feat(DST-646): Improve a11y by translation fallback loading message

Patch Changes

• dc53196: fix(DST-644): Make <XLoader> use underlay styles from theme in docs
  • @marigold/system@10.2.0

10.1.3

Patch Changes

• Updated dependencies [8b7be8e]
  • @marigold/types@1.2.1
  • @marigold/system@10.1.3

10.1.2

Patch Changes

• @marigold/system@10.1.2

10.1.1

Patch Changes

• 17fd7b4: docs([DST-621]): Revise <Tiles> page

  Revised <Tiles> page according to our new structure of component pages.

• 93f783a: feat([DSTSUP-98]): introduce controlled dismissable <SectionMessage>

  Added possibility to control the dismissable state in <SectionMessage>, you can now use onClose and close to control the closing of a section message.

• d52e52f: docs([DST-624]): Revise <Calendar> page and change some properties

  • Revised the page according to our new template.
  • Rename isDateUnavailable to dateUnavailable.
  • Remove the props: visibleDuration and pageBehavior.
  • Added outline focus styles for keyboard navigation in both themes.

• d326823: bugfix([DST-627]): replace useState import from storybook

  Some controlled stories in Storybook were incorrect because the useState import from react was used, resulting in an error.

  The stories of the following component were affected:

  • Calendar
  • DateField
  • DatePicker
  • Dialog
  • HelpText
  • SearchField

• 85e8cba: feat(DST-608): Make <XLoader> accessible and update documentation

  • Refactored the <XLoader> component to be more accessible
  • Updated the <XLoader> documentation page
  • Adjusted styling to fit regular underlay styles when using "fullsize" mode

• 38d461d: docs([DST-628]): Revise <SearchField> page

  Revised <SearchField> documentation page according to the new structure.

• 425ce62: fix(<Text>): prevent elementType prop from being passed down into the DOM. This is a prop used interally to make <Text> polymorphic.

• Updated dependencies [85e8cba]

  • @marigold/system@10.1.1

10.1.0

Minor Changes

• 83ad341: feat(dialog): Introduce a dedicated button to close a dialog

  Make it more convenient to have a button that closes the <Dialog>. With this, there is less need to use the child function to access the close method. Instead you can now use <Button slot="close"> to render a close button.

Patch Changes

• f2bae7e: fix: Remove isOpen from <Select>

  The isOpen prop was set by default. Remove it. Only required when controlled.

• 80a9f5b: fix(Text): Only apply elementType when RAC Text component is used.

• 2d701a6: docs[DST-611]: Revise <Scrollable> documentation page

  Revised the <Scrollable> page according to our new structure of component documentation pages.

• a917acf: refa: Remove icons dependency from components package

  Make @marigold/components not depend on @marigold/icons since this might bloat the bundling.

• 22200a0: docs([DST-581]): revise <DateField> page according to new component page structure

  Revised the <DateField> documentation page to our new layout of component pages.

• 222f674: refa[DST-607]: revise <Badge> page

  The <Badge> was revised according to our new component guidelines.

• ac29d40: refa[DST-610]: Revise <Card> page

  The <Card>is now revised according to our new component page guidelines.

• ebc53cb: refa[DST-598]: Improve <Slider> component

  The <Slider> component appears in a new guise. Functionalities and documentation have been significantly revised. So make sure to check out the Marigold documentation and storybook. It's worth it.

  Some key features are:

  • multithumb or range slider
  • visual indicator for selected track
  • use slider in forms

• 3bf3a8e: docs([DST-615]): Revise <Center> documentation

  Revised the <Center> page according to our new structure of component documentation.

• 2cb5d38: feat(DST-596): add loading indicator in <Button> component

  Introduced a new loading indicator for the <Button> component's loading state, enhancing the visibility of its loading status. The <Button> now supports a loading property for this functionality.

• 313f004: docs([DST-609]): Revise <Columns> documentation page

  Revised the <Columns> page according to our new structure of component documentation pages.

• Updated dependencies [ebc53cb]

  • @marigold/system@10.1.0

10.0.0

Major Changes

• 65608b4: fix([DSTSUP-94]): Adjust date unavailable property from <DatePicker>

  Breaking Change: Adjusted isDateUnavailable prop to our code guidelines dateUnavailable

  Added disabled styles for data-unavailable in both b2b and core theme

• caefbe4: refa(listbox): Allow sections in <Combobox> and <Autocomplete>, adjust Section API in <Select>, <Combobox> and <Autocomplete>.

  • Added the possibility to use sections with <Combobox> and <Autocomplete>

  • Refactored the <Section> (from <Listbox>) to fit our API, no need for the extra <Header> anymore. Instead you can do <Select.Section header="My header">, same for the other components

  • Renamed <Item> to <Option> in <Combobox> and <Autocomplete> to align with <Select>

  • Updated the docs for <Select>, <Combobox> and <Autocomplete>

  • Updated Storybook for <Select>, <Combobox> and <Autocomplete> with section stories

  • Renamed the part of the <ListBox> accordingly (from sectionTitle to header)

    BREAKING CHANGE: We changed the API of the <Section> component that is used in <Select>, <Combobox> and <Autocomplete>. It is no longer necessary to add a Header within the <Section>.

    Use the newly added header prop instead. Additionally, to unify the APIs all choices of <Select>, <Combobox> and <Autocomplete> are now called <Option> instead of <Item>.

• 2d9917f: Breaking changes

  • Dialog.Headline has been renamed to Dialog.Title. Please update your code accordingly.
  • <Dialog.Content> and <Dialog.Actions> have been introduced for better organization and flexibility.
  • The internal layout now uses grid areas, ensuring consistent ordering and layout of the dialog elements.
  • Existing implementations of the <Dialog> component will need to be updated to use these new subcomponents.

Minor Changes

• 6f8e3a2: style(dialog): make <Dialog> sizes responsive

  Using size with a <Dialog> will allow the dialog to be at most sm/md/lg wide. Will use full width on smaller screens.

• 6687af7: refa: remove footer from <Dialog> + allow styles

  • dialogs can only have action now
  • align buttons in <Dialog.Actions> correctly

• 2babc0b: feat(components): Mark layout components as regions for accessibility.

  Added the ability to mark layout components as regions (ARIA role). This improves accessibility by allowing assistive technologies to identify significant sections of the page, making navigation easier for users with disabilities.

• 956982a: feat(components): Make <Text> and <Headline> accessible by allowing ARIA labelling props

  <Text> and <Headline> will no longer cause type errors when ARIA labelling is used (aria-label, id, ...).

• df04623: Adding size to dialog component

Patch Changes

• 7ea3838: feat(Menu): pass aria-label to menu button instead of menu

• f18c8aa: [DST-494]: add loading states pattern

  [DST-494]: added prop modeto the <XLoader /> to support inline and full-section loading

• d5386e4: fix(components): Display <Checkbox> focus ring and adjust focus ring of <Table>

  Focus ring was not showing for the <Checkbox>. It does now!

• 5c029ec: feat(components): Expose Selection type for easy usage with Table and other components

  When working with a <Table> you can now use

  import type { Selection } from '@marigold/components';

  instead of creating the type.

• 2169b6f: bugfix([DSTSUP-92]): fixed variants in table stories

  At certain stories the control variants doesn't worked properly. Now it should work at least for all table stories.

• bfd2843: chore: refa <Text> component. Based on the slot property it now takes the RAC text or not. Needed to prevent other components breaking.

• 0e77996: docs([DST-572]): Adding a general form guideline in docs explaining different concepts such as when to use lable and help text

• b8cd92a: feat: CheckboxGroup can now be used as a compound component

  • Refactored the CheckboxGroup to be a compound component and align it with other components: <CheckboxGroup> -> <Checkbox.Group>
  • Adjusted the Checkbox appearance demo a bit

• 45fb3c4: chore(deps): update react-aria to 1.4

• f6a132c: docs([DST-582]): revise <SectionMessage> page according to new component page structure feat(components): add close button on <SectionMessage>

  Revised the <SectionMessage> documentation page to our new layout of component pages. And added a close button to allow the user to dismiss the <SectionMessage> this is now aligned with our feedback message pattern.

• Updated dependencies [caefbe4]

• Updated dependencies [6687af7]

• Updated dependencies [2babc0b]

• Updated dependencies [45fb3c4]

• Updated dependencies [956982a]

  • @marigold/system@10.0.0
  • @marigold/types@1.2.0
  • @marigold/icons@1.2.58

9.0.2

Patch Changes

• #4116 de0c9e9 Thanks @aromko! - docs[DST-513]: Revise <Autocomplete> component page.

• #4102 d700af0 Thanks @sebald! - feat: add as prop to Text to render different elements

• #4071 406fd1f Thanks @sarahgm! - docs[DST-503]:Revise Select and add slots to text component

• #4125 46f06db Thanks @aromko! - docs[DST-517]: revise <Tabs> component

• #4146 66eae8f Thanks @sarahgm! - fix: adjust visibility for autocomplete clear button

• #4143 77fe4ad Thanks @aromko! - Bugfix: fix datepicker storybook Controlled example

• #4134 d35cc6d Thanks @sarahgm! - fix: fix DOM tree for empty tables

• #4110 b2b79d4 Thanks @aromko! - docs[DST-511]: Revise switch component.

• #4115 0523f69 Thanks @sarahgm! - fix: fix SelectListItem layout

• #4103 b8c991f Thanks @sarahgm! - docs[DST-507]: revise <Inline> page

• Updated dependencies []:

  • @marigold/system@9.0.2
  • @marigold/icons@1.2.57

9.0.1

Patch Changes

• #4056 5d53af4 Thanks @aromko! - [DST-504]: Sorting indicator is shown only on sorted column.

• #4042 965512c Thanks @sebald! - feat: allow to render an empty state when collection of <Table> is empty

• #4039 9598df4 Thanks @sarahgm! - chore[DST-487]: align core styles to marigold

• Updated dependencies []:

  • @marigold/system@9.0.1
  • @marigold/icons@1.2.56

9.0.0

Major Changes

• #3994 41428b3 Thanks @sebald! - fix: remove HTMLProps from components

Patch Changes

• #4032 0bf0940 Thanks @sebald! - fix([DST-501]): Pass down appearance props and use context from CheckboxGroup to apply label width

• #4026 94e9a1b Thanks @sebald! - fix: correctly apply styles to <Select> icon

• #4028 db4fa1d Thanks @sebald! - docs: Introduce an appearance demo

• #4034 6195189 Thanks @sebald! - fix([DST-500]): fix popover placement

• #4033 449de9b Thanks @sebald! - fix([DST-501]): Don't render helptext if there is no error and description.

• #4027 391dcd1 Thanks @sebald! - fix: pass down appearance props to FieldBase in Select and TextField

• Updated dependencies []:

  • @marigold/system@9.0.0
  • @marigold/icons@1.2.55

8.0.2

Patch Changes

• #3992 ed3bd89 Thanks @sebald! - refa: use FieldErrorContext in <HelpText> and fix key issue

• #4005 c64d71e Thanks @OsamaAbdellateef! - Add ref to datepicker

• #3985 864ed08 Thanks @sarahgm! - fix: adjust the triggerwidth of the autocomplete

• Updated dependencies []:

  • @marigold/system@8.0.2
  • @marigold/icons@1.2.54

8.0.1

Patch Changes

• #3979 a02f284 Thanks @sarahgm! - Fix: fix some props and add command to build step

• Updated dependencies [a02f284]:

  • @marigold/system@8.0.1
  • @marigold/icons@1.2.53

8.0.0

Major Changes

• #3939 2cde433 Thanks @sarahgm! - feat[DST-481]: rename <Message> in <SectionMessage>

• #3967 0773aa8 Thanks @sebald! - refa: Update TypeScript and adjust <NumericFormat> props

• #3940 9c5b80c Thanks @sarahgm! - [DST-461]: refactor <Message> component

Minor Changes

• #3942 5977cba Thanks @OsamaAbdellateef! - Keep our documentation props table dynamic

Patch Changes

• #3959 d053e37 Thanks @sebald! - chore: make github linter happy

• Updated dependencies [2cde433, 0773aa8, 2658e2f, 5977cba, 3f7a4ec]:

  • @marigold/system@8.0.0
  • @marigold/types@1.1.1
  • @marigold/icons@1.2.52

7.8.2

Patch Changes

• Updated dependencies []:
  • @marigold/system@7.8.2
  • @marigold/icons@1.2.51

7.8.1

Patch Changes

• #3924 290dc0e Thanks @sebald! - fix: inconsistent naming of SelectList

• Updated dependencies []:

  • @marigold/system@7.8.1
  • @marigold/icons@1.2.50

7.8.0

Minor Changes

• #3913 8c4631f Thanks @sebald! - feat: Introduce Grid component

Patch Changes

• Updated dependencies [8c4631f]:
  • @marigold/system@7.8.0
  • @marigold/icons@1.2.49

7.7.2

Patch Changes

• Updated dependencies []:
  • @marigold/system@7.7.2
  • @marigold/icons@1.2.48

7.7.1

Patch Changes

• #3893 f57caec Thanks @sarahgm! - feat: add className to MarigoldProvider

• #3898 a54d186 Thanks @sebald! - feat: Ensure datepicker shows only date by default

• Updated dependencies []:

  • @marigold/system@7.7.1
  • @marigold/icons@1.2.47

7.7.0

Minor Changes

• #3892 3f02ea1 Thanks @sebald! - feat: Allow to disable keyboard navigation on Table

Patch Changes

• #3885 72ece08 Thanks @sebald! - fix: getColor correctly works with deeply nested values

• #3880 4a59427 Thanks @sebald! - chore: cleanup peerdeeps

• Updated dependencies [72ece08, 4a59427]:

  • @marigold/system@7.7.0
  • @marigold/icons@1.2.46

7.6.0

Minor Changes

• #3841 05d2ca0 Thanks @sebald! - feat: Allow configure position of menu popover

• #3708 af1807b Thanks @aromko! - Creating new component SelectList

Patch Changes

• Updated dependencies []:
  • @marigold/system@7.6.0
  • @marigold/icons@1.2.45

7.5.4

Patch Changes

• Updated dependencies []:
  • @marigold/system@7.5.4
  • @marigold/icons@1.2.44

7.5.3

Patch Changes

• #3834 7fd7ad7 Thanks @OsamaAbdellateef! - Adding cursor hover for tag component in multiselect

• #3824 879a0e1 Thanks @OsamaAbdellateef! - Adding Multiselect guideline

• #3829 81a84e5 Thanks @sarahgm! - chore[DSTSUP-65]: fix demo and add overlayprovider to tooltip

• Updated dependencies []:

  • @marigold/system@7.5.3
  • @marigold/icons@1.2.43

7.5.2

Patch Changes

• #3828 f996764 Thanks @aromko! - BUGFIX: fix onClear on SearchInput.tsx

• #3827 95ce246 Thanks @sebald! - fix: restore default collapseAt for <Columns>

• Updated dependencies []:

  • @marigold/system@7.5.2
  • @marigold/icons@1.2.42

7.5.1

Patch Changes

• #3802 d4479c7 Thanks @sarahgm! - fix: changing the token back to z-40 from underlay

• #3777 02f1934 Thanks @sarahgm! - [DST-271]:feat: Column allow fit width of item

• #3810 dea175a Thanks @aromko! - [DSTSUP-60]: add examples using state in table with input fields [DSTSUP-60]: add useListData hook to docs

• #3812 3d1e813 Thanks @sarahgm! - [DSTSUP-59]:fix if no label no gap style

• #3803 886ff54 Thanks @sarahgm! - fix: add possibility to align Checkbox to FieldGroups

• Updated dependencies [fba5e92]:

  • @marigold/system@7.5.1
  • @marigold/icons@1.2.41

7.5.0

Minor Changes

• #3767 6de438b Thanks @sarahgm! - [DSTSUP-53]:feat: text variant muted for b2b theme

Patch Changes

• #3764 ade96cf Thanks @sarahgm! - [DSTSUP-54]: feat: update link token in core theme

• #3772 d6c44fa Thanks @OsamaAbdellateef! - Fix Select component in small screens

• Updated dependencies [5643257, 07d9277]:

  • @marigold/system@7.5.0
  • @marigold/icons@1.2.40

7.4.0

Minor Changes

• #3702 dbaadeb Thanks @sarahgm! - [DST-279]: remove overlay provider

• #3713 2b9e03e Thanks @sebald! - feat: Render empty state of <Tag>

Patch Changes

• #3750 ebea32e Thanks @sebald! - fix([DSTSUP-31]): prevent immediately selection is Select/Combobox/Autocomplete

• #3722 c61895d Thanks @sebald! - fix: core linedTable variant works again

• #3674 3d66a58 Thanks @sebald! - docs: Add docs for <Form>

• #3720 4d2f94f Thanks @sarahgm! - fix[DSTSUP-41]: Combobox styles for icon

• #3715 7969fd9 Thanks @sebald! - fix: add placeholder prop to Combobox types

• Updated dependencies [4d2f94f]:

  • @marigold/system@7.4.0
  • @marigold/icons@1.2.39

7.3.3

Patch Changes

• #3690 b37c3ee Thanks @sebald! - fix: unify clear buttons in search fields

• Updated dependencies []:

  • @marigold/system@7.3.3
  • @marigold/icons@1.2.38

7.3.2

Patch Changes

• #3683 c2c7e71 Thanks @sebald! - fix: placeholder prop was missing on TextArea

• Updated dependencies []:

  • @marigold/system@7.3.2
  • @marigold/icons@1.2.37

7.3.1

Patch Changes

• #3660 35ff260 Thanks @sarahgm! - fix: fix Switch positioning in themes

• #3668 01148ac Thanks @OsamaAbdellateef! - [DSTSUP-30]: Fix-select-width

• #3676 63d407e Thanks @sebald! - feat: use size- util (also fixes linting)

• Updated dependencies [f8ed8d1, 63d407e]:

  • @marigold/icons@1.2.36
  • @marigold/system@7.3.1

7.3.0

Minor Changes

• #3644 b4999d8 Thanks @sebald! - feat: getColor util

• #3651 8b6f34a Thanks @sebald! - feat: Expose I18nProvider

• #3621 3c72997 Thanks @sarahgm! - DST-[266]:feat: use new b2b tokens in code

Patch Changes

• #3653 34a7482 Thanks @sebald! - fix([DSTSUP-23]): Correctly prefix days/months with zeroes

• #3654 fd16ef5 Thanks @sebald! - fix([DSTSUP-19]): Allow Popovers to outgrow their trigger element

• #3645 7e3aa28 Thanks @OsamaAbdellateef! - Adding onClear prop over Autocomplete component

• #3656 c1fb6aa Thanks @sarahgm! - feat[DSTSUP-17]: add placeholder text styles for b2b theme

• #3649 299941b Thanks @sebald! - feat([DSTSUP-22]): Disable cmd+a (open all items) in <Accordion>

• Updated dependencies [b4999d8]:

  • @marigold/system@7.3.0
  • @marigold/icons@1.2.35

7.2.0

Minor Changes

• #3592 0b23a25 Thanks @sebald! - feat: Enable built-in browser validation

• #3596 9f1ae32 Thanks @OsamaAbdellateef! - Added new Helpers components NumericFormat & DateFormat

• #3589 b228e09 Thanks @sarahgm! - chore: Update react-aria-components to v1.0.0

• #3575 cba7099 Thanks @sarahgm! - feat[DST-263]: new component <Scrollable>!!!

• #3593 46e1a41 Thanks @OsamaAbdellateef! - Adding sticky header feature to tables

Patch Changes

• #3517 7a8d40a Thanks @sarahgm! - chore[DST-220]: seperate data-theme attribute and classnames on provider (so you don't need any data-theme attribute anymore)

• #3623 6697a67 Thanks @sarahgm! - chore: [DSTSUP-13]: add disabled also on the <ActionMenu>

• #3639 d76a835 Thanks @OsamaAbdellateef! - Fixing Table Selectable header alignment

• Updated dependencies [7a8d40a, 9f1ae32]:

  • @marigold/system@7.2.0
  • @marigold/icons@1.2.34

7.1.0

Minor Changes

• #3551 49a702446 Thanks @OsamaAbdellateef! - Adding Table Column alignment feature

• #3576 08e89a407 Thanks @sebald! - feat: expose form from react-aria-components

Patch Changes

• #3571 6a4d1e8d0 Thanks @sarahgm! - fix[DSTSUP-10]: add min/max props to textfield

• #3554 b6cb6edce Thanks @sarahgm! - RAC: DatePicker as react aria component

• #3563 4fa5dee85 Thanks @sarahgm! - fix: add placeholder property to autocomplete

• #3564 a984d90e2 Thanks @sebald! - refa: remov cloning children in <Columns>

• #3562 b3fd3e5e0 Thanks @sarahgm! - fix: <Menu> can contain disabled button

• #3557 47f300029 Thanks @aromko! - [DSTSUP-5]: Bugfix: Loss of input values after collapsing accordion elements is now prevented by hiding the corresponding section.

• #3577 63b093ad8 Thanks @OsamaAbdellateef! - Fixing Scrollable table story

• #3552 e2fa304a6 Thanks @aromko! - [DSTSUP-4] bugfix accordion item do not collapse and hide after first click

• Updated dependencies [47f300029, 535d1088b]:

  • @marigold/system@7.1.0
  • @marigold/icons@1.2.33

7.0.0

Major Changes

• #3542 3952ee0e8 Thanks @sarahgm! - RAC: Menu react aria components

  [!WARNING] > BREAKCING CHANGE <Menu.Item> no longer us the key prop as unique identifier, use the id prop instead. To migrate, rename all <Menu.item key="something"/> to <Menu.item id="something"/>.

• #3535 e4cfbc7d1 Thanks @OsamaAbdellateef! - Migrate Select component to RAC

  [!WARNING] > BREAKCING CHANGE <Select.Option> no longer us the key prop as unique identifier, use the id prop instead. To migrate, rename all <Select.Option key="something"/> to <Select.Option id="something"/>.

• #3546 9c61ffe09 Thanks @sebald! - refa: Migrate ComBox to RAC

  [!WARNING] > BREAKCING CHANGE <ComboBox.Item> no longer us the key prop as unique identifier, use the id prop instead. To migrate, rename all <ComboBox.item key="something"/> to <ComboBox.item id="something"/>.

• #3550 30167bb78 Thanks @sarahgm! - RAC: Autocomplete

  [!WARNING] > BREAKCING CHANGE <Autocomplete.Item> no longer us the key prop as unique identifier, use the id prop instead. To migrate, rename all <Autocomplete.item key="something"/> to <Autocomplete.item id="something"/>.

Patch Changes

• #3544 dc5c193e0 Thanks @sarahgm! - feat: new table variant borderedTable for b2b theme

• #3527 4ae97c004 Thanks @aromko! - chore[DST-258] <Checkbox> storybook improvements

• #3540 72125e114 Thanks @aromko! - RAC: migrate <Calendar>, <DatePicker>, <DateField> component

• #3529 f3a45c302 Thanks @aromko! - RAC: use new <Input> component in all affected components

• Updated dependencies [72125e114]:

  • @marigold/system@7.0.0
  • @marigold/icons@1.2.32

6.11.0

Minor Changes

• #3520 bc96dda88 Thanks @OsamaAbdellateef! - Introduce RAC popover component

• #3445 91badb0e1 Thanks @OsamaAbdellateef! - migrate ListBox component to RAC

Patch Changes

• #3522 a748252c5 Thanks @aromko! - chore[DST-255]: <Button> storybook improvements

• #3537 148034202 Thanks @sebald! - feat: Make Popover at least as wide as trigger element

• #3531 071bd792a Thanks @aromko! - chore: add placeholder to TextFieldProps

• #3530 51611dbe0 Thanks @sarahgm! - fix: remove Dialog trigger out of Popover

• #3521 f972b3a25 Thanks @sarahgm! - chore[DST-256]: <XLoader> storybook improvements

• #3525 cf59ce1e4 Thanks @aromko! - chore[DST-257]: <Card>storybook improvements

• #3536 bc09a9ce1 Thanks @sarahgm! - RAC: add "Tray" behavior inside Popover

• #3519 849f4c534 Thanks @sarahgm! - chore: remove unused stretch prop and improve storybook story

• #3513 cdc17ee83 Thanks @aromko! - RAC: migrate <TagGroup> component

• Updated dependencies [cdc17ee83]:

  • @marigold/system@6.11.0
  • @marigold/icons@1.2.31

6.10.0

Minor Changes

• #3501 14f5d5d30 Thanks @OsamaAbdellateef! - Migrate Tabs to RAC Tabs

• #3514 5a3d71cae Thanks @sebald! - feat([DST-249]): Add feedback variants to <Badge>

Patch Changes

• #3512 213d32f5b Thanks @sebald! - fix([DST-243]): Fix <Listbox> overflowing the <Popover>

• #3515 aac41db30 Thanks @sebald! - fix: SearchField is missing from export index

• #3516 71eb13b30 Thanks @aromko! - chore: remove some unnecessary exports

• Updated dependencies [14f5d5d30]:

  • @marigold/system@6.10.0
  • @marigold/icons@1.2.30

6.9.1

Patch Changes

• Updated dependencies []:
  • @marigold/system@6.9.1
  • @marigold/icons@1.2.29

6.9.0

Minor Changes

• #3505 c068869a9 Thanks @sebald! - feat: add a success <Message> variant

• #3482 a16541314 Thanks @OsamaAbdellateef! - Dialog & Modal migration

Patch Changes

• #3500 79eaec78c Thanks @aromko! - RAC: migrate <NumberField />

• #3498 7507ac7f5 Thanks @aromko! - RAC: migrate searchfield

• #3481 729158c87 Thanks @aromko! - RAC: migrate TextField component

• #3486 17ee74d46 Thanks @aromko! - RAC: migrate textarea

• #3499 f19a502d4 Thanks @sarahgm! - RAC: DateField to react-aria-components

• #3487 75bad8b84 Thanks @sarahgm! - RAC: <Tooltip> to react aria components

• Updated dependencies []:

  • @marigold/system@6.9.0
  • @marigold/icons@1.2.28

6.8.0

Minor Changes

• #3471 c76bd48a2 Thanks @OsamaAbdellateef! - Adding a fixed-height scrollable table example

Patch Changes

• #3476 30b94e542 Thanks @OsamaAbdellateef! - Fixing Scrollable table story

• #3483 3a21b538a Thanks @aromko! - chore: add data-required attribute for label

• #3480 4c76cf114 Thanks @sarahgm! - RAC: add FieldError in HelpText

• #3477 84c427dec Thanks @aromko! - RAC: migrate input

• Updated dependencies []:

  • @marigold/system@6.8.0
  • @marigold/icons@1.2.27

6.7.0

Minor Changes

• #3473 22446fa66 Thanks @sebald! - refa: Update react-aria-components to rc.0, CheckboxGroup and HelpText

Patch Changes

• Updated dependencies []:
  • @marigold/system@6.7.0
  • @marigold/icons@1.2.26

6.6.4

Patch Changes

• #3466 174f534b5 Thanks @sarahgm! - chore: adjust core switch

• #3468 cac5ef60d Thanks @OsamaAbdellateef! - Adding selected prop over Switch component

• Updated dependencies []:

  • @marigold/system@6.6.4
  • @marigold/icons@1.2.25

6.6.3

Patch Changes

• Updated dependencies []:
  • @marigold/system@6.6.3
  • @marigold/icons@1.2.24

6.6.2

Patch Changes

• Updated dependencies []:
  • @marigold/system@6.6.2
  • @marigold/icons@1.2.23

6.6.1

Patch Changes

• Updated dependencies []:
  • @marigold/system@6.6.1
  • @marigold/icons@1.2.22

6.6.0

Minor Changes

• #3452 43e792d6a Thanks @sarahgm! - feat: expose RouterProvider

• #3416 7704debbe Thanks @OsamaAbdellateef! - [DST-38]: Implement mobile optimization for DatePicker

Patch Changes

• #3448 547fca472 Thanks @sarahgm! - fix: nested lists

• #3455 4cb379e5a Thanks @sarahgm! - fix: link props type

• #3451 f2b764380 Thanks @sebald! - fix: <Checkbox> "checked" state

• Updated dependencies [7704debbe]:

  • @marigold/system@6.6.0
  • @marigold/icons@1.2.21

6.5.1

Patch Changes

• 80ac67eac Thanks @sebald! - fix: FieldBase renders empty element when no label is given

• Updated dependencies []:

  • @marigold/system@6.5.1
  • @marigold/icons@1.2.20

6.5.0

Minor Changes

• #3430 1ce0cabbf Thanks @sarahgm! - refa: refa <Radio> as react-aria-components

Patch Changes

• #3434 5e1219c84 Thanks @sebald! - fix([DST-228]): Hotfix react-aria so space works inside forms in an accordion

• Updated dependencies []:

  • @marigold/system@6.5.0
  • @marigold/icons@1.2.19

6.4.0

Minor Changes

• #3405 1eb93352a Thanks @sarahgm! - RAC: updated Button to react aria components

• #3429 3e328198c Thanks @sebald! - feat: adjust <SliderOutput> position

• #3422 e5869b2f3 Thanks @sebald! - refa: Make <FieldBase> work with RAC components

• #3406 e968e5eb5 Thanks @sarahgm! - RAC: Label as React aria Component

• #3408 78840aa04 Thanks @sarahgm! - RAC: Headline as React Aria Component

• #3396 60c7f1dc5 Thanks @sarahgm! - RAC: Switch component

• #3407 0fbb7f963 Thanks @sarahgm! - RAC: Divider as React Aria Component

• #3400 700cdf296 Thanks @OsamaAbdellateef! - Replace old Slider with the new RAC slider

• #3424 5a2a03ae0 Thanks @sebald! - feat: add styles to checkbox and radio groups

• #3392 5ed86abd0 Thanks @sarahgm! - RAC: Link as react aria component

Patch Changes

• #3432 9b0ed3862 Thanks @sebald! - fix: adjust chevrons in accordion

• #3418 dc2b1484c Thanks @sebald! - refa: <HelpText> to RAC

• #3423 470d00c6d Thanks @sebald! - fix: add gap in checkbox group

• #3425 4be30b28a Thanks @sarahgm! - fix: numberfield width

• Updated dependencies [3e328198c, e5869b2f3, 5a2a03ae0]:

  • @marigold/system@6.4.0
  • @marigold/types@1.1.0
  • @marigold/icons@1.2.18

6.3.1

Patch Changes

• #3402 d8b3cca2d Thanks @sarahgm! - fix[DST-222]: Select width by item

• Updated dependencies []:

  • @marigold/system@6.3.1
  • @marigold/icons@1.2.17

6.3.0

Minor Changes

• #3383 958477f43 Thanks @sarahgm! - feat: remove className prop from all components

Patch Changes

• #3394 ea9db88fd Thanks @sarahgm! - fix: width props for switch and slider

• Updated dependencies []:

  • @marigold/system@6.3.0
  • @marigold/icons@1.2.16

6.2.6

Patch Changes

• #3366 1d305f963 Thanks @sarahgm! - fix: allow width on datepicker

• Updated dependencies []:

  • @marigold/system@6.2.6
  • @marigold/icons@1.2.15

6.2.5

Patch Changes

• #3331 b9e1d147a Thanks @sebald! - fix: correctly apply spacing in <Inset>

• #3339 581702881 Thanks @sarahgm! - chore: add <Card> size to b2b theme

• Updated dependencies []:

  • @marigold/system@6.2.5
  • @marigold/icons@1.2.14

6.2.4

Patch Changes

• Updated dependencies []:
  • @marigold/system@6.2.4
  • @marigold/icons@1.2.13

6.2.3

Patch Changes

• #3273 f7c475053 Thanks @renovate! - chore(deps): update react-aria

• Updated dependencies []:

  • @marigold/system@6.2.3
  • @marigold/icons@1.2.12

6.2.2

Patch Changes

• 46e86e2b3 Thanks @sebald! - fix: Resolve conflicting type dependencies in react-aria

• Updated dependencies []:

  • @marigold/system@6.2.2
  • @marigold/icons@1.2.11

6.2.1

Patch Changes

• #3314 a5515f34b Thanks @sarahgm! - change jsx compiler option to react-jsx

• Updated dependencies []:

  • @marigold/system@6.2.1
  • @marigold/icons@1.2.10

6.2.0

Minor Changes

• #3293 3eba5fdd4 Thanks @OsamaAbdellateef! - fix with for checkbox in multi-select tables

Patch Changes

• #3311 6329c32ac Thanks @OsamaAbdellateef! - [DST-96]: Improve sorting table

• Updated dependencies []:

  • @marigold/system@6.2.0
  • @marigold/icons@1.2.9

6.1.0 (Released on Aug 27, 2026)

Minor Changes

• #3270 c2629d7c8 Thanks @OsamaAbdellateef! - Adding option to specify table column width

• #3250 989f094e7 Thanks @OsamaAbdellateef! - [DST-111]: enhance styling tabs

• #3268 c61999892 Thanks @sebald! - feat: checkbox adheres labelwidth when inside <FieldGroup>

Patch Changes

• Updated dependencies [566ec30e4, 989f094e7, 8a4ef1805]:
  • @marigold/system@6.1.0
  • @marigold/icons@1.2.8

6.0.1

Patch Changes

• #3232 fd10c294a Thanks @OsamaAbdellateef! - [DST-65]: Spacing of Popover can me customized based on themes

• Updated dependencies [fd10c294a]:

  • @marigold/system@6.0.1
  • @marigold/icons@1.2.7

6.0.0 (Released on Aug 11, 2026)

Major Changes

• #3117 79be927e6 Thanks @sebald! - Switch @marigold/styles to Tailwind CSS, replaces Emotion CSS & Theme-UI

Patch Changes

• #3227 54416dc6c Thanks @sarahgm! - chore: unify switch api

• #3137 1d0fd2ac5 Thanks @sebald! - fix: <Text> component doesn't enforce defaults

• #3229 7b7348f30 Thanks @sarahgm! - chore[DST-60]: change depricated API

• #3092 44dd7408a Thanks @renovate! - Update react-aria

• #3003 9082cfe4f Thanks @renovate! - chore(deps): update react-aria

• Updated dependencies [79be927e6]:

  • @marigold/system@6.0.0
  • @marigold/icons@1.2.6

5.6.0

Minor Changes

• #2947 a35f82a13 Thanks @OsamaAbdellateef! - Releasing DateField component

• #2953 992d76d1b Thanks @OsamaAbdellateef! - Introducing DateField component

• #2912 3fbeb7b17 Thanks @OsamaAbdellateef! - Introducing Tabs component

• #2951 fc5411f39 Thanks @aromko! - feat: Add tag group component <Tag/> + <Tag.Group/>

• #2932 85039a29c Thanks @OsamaAbdellateef! - Introducing Calendar component

• #2955 e285e0c94 Thanks @OsamaAbdellateef! - Adding New ComboBox Component

Patch Changes

• #2928 dc791efab Thanks @renovate! - chore(deps): update react-aria

• Updated dependencies []:

  • @marigold/system@5.6.0
  • @marigold/icons@1.2.5

5.5.0 (Released on Jul 8, 2026)

Minor Changes

• #2915 4c2cd1b45 Thanks @sarahgm! - feat: new Accordion Component

• #2921 b07dab50c Thanks @sebald! - feat: let the <Body> flex 💪

• #2920 a56d83788 Thanks @sebald! - feat: <Card> is no a flex col by default + configure gap via space prop

Patch Changes

• #2877 862963f54 Thanks @OsamaAbdellateef! - feat: added menu section

• Updated dependencies []:

  • @marigold/system@5.5.0
  • @marigold/icons@1.2.4

5.4.0 (Released on Jun 15, 2026)

Minor Changes

• #2892 aaff48559 Thanks @sarahgm! - chore: add fontStyle to <Text> component

Patch Changes

• #2894 b3d577339 Thanks @renovate! - chore(deps): update dependency @types/react to v18.0.29

• Updated dependencies [b3d577339, 8972cbaca]:

  • @marigold/types@1.0.1
  • @marigold/system@5.4.0
  • @marigold/icons@1.2.3

5.3.0

Minor Changes

• #2826 aaf6b55c6 Thanks @sarahgm! - refa: Improved <Input> with icons/actions

• #2846 3a766be9d Thanks @sebald! - feat: Styles for <Autocomplete>

Patch Changes

• #2816 cda6ac809 Thanks @renovate! - chore(deps): update react-aria

• Updated dependencies [aaf6b55c6, 80cdbe062]:

  • @marigold/system@5.3.0
  • @marigold/icons@1.2.2

5.2.0

Minor Changes

• #2807 f9175829d Thanks @sarahgm! - chore: update storybook to version 7 + fix coverage

• #2824 33329ace2 Thanks @sarahgm! - chore: refa <Input> and <Input.Field> components and support icons

• #2805 c0609c0b3 Thanks @sebald! - feat: introduce <Inset> component

Patch Changes

• Updated dependencies [f11e2d7db]:
  • @marigold/system@5.2.0
  • @marigold/icons@1.2.1

5.1.0

Patch Changes

• Updated dependencies [f5ec10d93, 6d7d6f621]:
  • @marigold/icons@1.2.0
  • @marigold/system@5.1.0

5.0.0

Major Changes

• #2764 1ff29cc0c Thanks @sebald! - refa: fix polymorph types + remove style props from <Box>

  BREAKING CHANGE:

  We deprecated the available short hands for styling on the <Box> component (also known as style props), for example <Box p="small">. This way it is more clear what to use when ->always thecss` prop.

  How to update your code: Basically move all style props to the css prop. E.g. <Box p="small" bg="primary"> becomes <Box css={{ p: "small, bg; "primary" }}>.

• #2740 7a61d39f4 Thanks @sarahgm! - chore: rename onSelect to onAction in Menu component

• #2733 9cb030c11 Thanks @sarahgm! - chore: change prop onSelectionChange to onChange for select component

Minor Changes

• #2766 6d9b36b6a Thanks @sebald! - feat: add open prop to Dialog.Controller

• #2760 fafc52cbb Thanks @sarahgm! - feat: Allow <Dialog> to be controlled via <Dialog.Controller‚>

• #2759 596b7b901 Thanks @sarahgm! - feat: update Menu.Trigger with open and onOpenChange property

Patch Changes

• #2741 f65487486 Thanks @sarahgm! - chore: add <ActionMenu> Component with dots

• #2756 f9f71ed9d Thanks @sebald! - fix: <Link> whitespace

• #2726 0f539b788 Thanks @renovate! - chore(deps): update dependency @types/react to v18.0.27

• Updated dependencies [1ff29cc0c, 0f539b788]:

  • @marigold/system@5.0.0
  • @marigold/types@1.0.0
  • @marigold/icons@1.1.17

4.2.2

Patch Changes

• #2714 55c7cd7e Thanks @benediktgrether! - fix: set max-height to ul instead of div

• #2699 c9725e77 Thanks @renovate! - chore(deps): update react-aria

• Updated dependencies []:

  • @marigold/icons@1.1.16
  • @marigold/system@4.2.2
  • @marigold/tokens@3.1.0

4.2.1

Patch Changes

• #2694 c7b919a3 Thanks @sarahgm! - fix: fix on pointer event for menu and select

• Updated dependencies []:

  • @marigold/system@4.2.1
  • @marigold/icons@1.1.15

4.2.0

Minor Changes

• #2688 1bfe10cf Thanks @sarahgm! - feat: add <Fieldbase> to <RadioGroup> and <CheckboxGroup> to support errorMessage and helptext

Patch Changes

• #2689 8675c5f2 Thanks @benediktgrether! - fix: add in FieldBase component position relative to fix position absolute bug in HiddenSelect component

• #2683 7be11c1a Thanks @sarahgm! - feat: add <Tray> for responsiveness in <Menu> and <Select>

• #2684 14463546 Thanks @sarahgm! - refa: removed icon dependency from @marigold/components

• #2686 bb0dea93 Thanks @sarahgm! - fix: required label

• #2687 7954ba24 Thanks @sarahgm! - fix: <Radio> tabs in default selected value instead of first

• Updated dependencies []:

  • @marigold/system@4.2.0
  • @marigold/icons@1.1.14

4.1.5

Patch Changes

• #2674 832da2a6 Thanks @sarahgm! - refa: refactoring Popover with usePopover

• Updated dependencies [832da2a6]:

  • @marigold/types@0.5.7
  • @marigold/icons@1.1.13
  • @marigold/system@4.1.5
  • @marigold/tokens@3.1.0

4.1.4

Patch Changes

• Updated dependencies []:
  • @marigold/system@4.1.4
  • @marigold/icons@1.1.12

4.1.3

Patch Changes

• Updated dependencies []:
  • @marigold/system@4.1.3
  • @marigold/icons@1.1.11

4.1.2

Patch Changes

• Updated dependencies [fcc320db, de5df9b6]:
  • @marigold/icons@1.1.10
  • @marigold/system@4.1.2

4.1.1

Patch Changes

• #2655 0208fb01 Thanks @sarahgm! - fix: fix fieldbase width

• Updated dependencies []:

  • @marigold/system@4.1.1
  • @marigold/icons@1.1.9

4.1.0

Minor Changes

• #2647 f764d3a0 Thanks @sebald! - feat: add fontWeight style prop to <Text> component

• #2576 7a9129c1 Thanks @sarahgm! - feat: add side property to label

Patch Changes

• #2652 40aeefd7 Thanks @sebald! - feat: Improve <Message> look

• #2651 2e98753d Thanks @sebald! - fix: <Menu> width is adjusted by its content not the trigger

• #2643 473ae72b Thanks @renovate! - chore(deps): update react-aria

• #2619 727460fc Thanks @sebald! - fix: set <Switch> width in flex so it doesn't shrink below a certain threshold

• Updated dependencies [312a23cf, 080b1fed, d250fc00]:

  • @marigold/system@4.1.0
  • @marigold/types@0.5.6
  • @marigold/icons@1.1.8

4.0.0

Major Changes

• #2610 eb35da96 Thanks @sebald! - feat: <Tiles> can now be used as a grid with fixed widths or fully respsonsive.

  BREAKING CHANGE: Renamed the whole API. Please checkout the documentation at https://marigold-ui.io/components/tiles/#props

Patch Changes

• #2607 41f60e3d Thanks @benediktgrether! - fix: add missing values for one point and set begin of first dot to 0.0s

• #2612 31e1219d Thanks @sarahgm! - chore: add hover color and flex property

• Updated dependencies [02bd8efe, be3f2060, f38ae20a, 4554b26e]:

  • @marigold/icons@1.1.7
  • @marigold/system@4.0.0
  • @marigold/types@0.5.5

3.0.6

Patch Changes

• Updated dependencies [d8fc387d]:
  • @marigold/system@3.0.6
  • @marigold/icons@1.1.6

3.0.5

Patch Changes

• #2575 0441cd20 Thanks @sarahgm! - feat: <XLoader> component for loading states

• Updated dependencies []:

  • @marigold/system@3.0.5
  • @marigold/icons@1.1.5

3.0.4

Patch Changes

• #2564 09745fca Thanks @sarahgm! - chore: add card, text style for core

• #2569 b20b0111 Thanks @sarahgm! - chore: add gridAutoRows to <Tiles>

• #2568 51a95328 Thanks @sarahgm! - feat: improve headline with align and color property

• Updated dependencies []:

  • @marigold/system@3.0.4
  • @marigold/icons@1.1.4

3.0.3

Patch Changes

• #2561 04c7f2eb Thanks @sebald! - fix: <Table> stretch works as expected

• #2562 74d47ba2 Thanks @sebald! - fix: <Select> chevron

• Updated dependencies []:

  • @marigold/system@3.0.3
  • @marigold/icons@1.1.3

3.0.2

Patch Changes

• #2560 7368d457 Thanks @sebald! - fix: allow <NumberField> with little width

• #2551 d9974f91 Thanks @sarahgm! - chore: improve core theme

• Updated dependencies [e65171c6, d9974f91]:

  • @marigold/system@3.0.2
  • @marigold/icons@1.1.2

3.0.1

Patch Changes

• #2510 690191b2 Thanks @sebald! - update: @react-aria/focus

• #2509 fb7b1b9f Thanks @benediktgrether! - refa: improve usage of fit prop

• Updated dependencies [4af6c016, eb7e453c]:

  • @marigold/types@0.5.4
  • @marigold/system@3.0.1
  • @marigold/icons@1.1.1

3.0.0

Major Changes

• #2463 fcb15230 Thanks @sebald! - refa: Improve behavior of <Stack> and remove option to render it as a list (use <List> instead)
  • <Stack> will no longer align items by default, since this will cause children to not take all the available space
  • <Stack as="ul|ol"> will no longer work, we have a <List> comopnent for that

Minor Changes

• #2490 baf5bb57 Thanks @sebald! - feat: Columns can stretch to available height via stretch prop + don't collapse by default

• #2470 7b9c90ec Thanks @sebald! - feat: introduce extendTheme helper, for more information see https://marigold-ui.io/introduction/theming/#extend-an-existing-theme

Patch Changes

• #2458 20aeba63 Thanks @sebald! - fix: style props override theme in <Text>

• #2460 4495fcb1 Thanks @sarahgm! - chore: add height prop to Breakout and refactor docs page

• #2462 885e3ca4 Thanks @sebald! - fix: use 'initial' for default Container item alignment

• #2496 d10bb310 Thanks @benediktgrether! - chore: change property names in breakout to alignX and AlignY

• Updated dependencies [87600058, a795f29a]:

  • @marigold/icons@1.1.0
  • @marigold/system@3.0.0

2.2.0

Minor Changes

• #2411 a4ccb92f Thanks @sebald! - feat: css props supports array (again) + padding props for <Card>

• #2415 d5116b5d Thanks @sebald! - refa: Improve <Container> API and make it reponsive

Patch Changes

• #2313 75128374 Thanks @renovate! - chore(deps): update dependency @types/react to v18.0.19

• #2443 fb76bbbe Thanks @sarahgm! - fix: downgrade aria-focus version

• #2440 515ea633 Thanks @sarahgm! - fix: use useLocalizedStringFormatter instead of depricated useMessage…

• #2437 23a78264 Thanks @renovate! - chore(deps): update testing (major)

• #2412 44723f1c Thanks @sarahgm! - refa: table scrollable

• #2438 535f80da Thanks @sebald! - fix: Columns work with complex and different children types

• Updated dependencies [75128374, f76f4870, 23a78264, a4ccb92f]:

  • @marigold/types@0.5.3
  • @marigold/system@2.2.0
  • @marigold/icons@1.0.5

2.1.3

Patch Changes

• #2371 7bb83042 Thanks @sarahgm! - fix: fix the links

• #2399 beea5b0b Thanks @sebald! - feat: Make text in non-interactive tables selectable

• #2378 d5fd75cb Thanks @sarahgm! - docs: fix responsive layout and responsive table

• Updated dependencies [d3143f65, f6b49c37]:

  • @marigold/icons@1.0.4
  • @marigold/system@2.1.3

2.1.2

Patch Changes

• #2361 b84e6ff5 Thanks @sarahgm! - chore: update table with compact and expanded

• Updated dependencies [630d8026, 294e31e3]:

  • @marigold/icons@1.0.3
  • @marigold/system@2.1.2

2.1.1

Patch Changes

• Updated dependencies []:
  • @marigold/system@2.1.1
  • @marigold/icons@1.0.2

2.1.0

Minor Changes

• #2328 22350f02 Thanks @sebald! - feat: add fit and potision props to <Image>

Patch Changes

• #2333 92feeafe Thanks @sebald! - fix: justify content in <Button>

• #2326 6e236e78 Thanks @sebald! - fix: correctly apply read only state to <Checkbox>

• Updated dependencies []:

  • @marigold/system@2.1.0
  • @marigold/icons@1.0.1

2.0.0 (Released on Aug 27, 2026)

Minor Changes

• #2289 13695db8 Thanks @sebald! - feat: <SVG> and Icons support refs and css prop

• #2255 e6d18a82 Thanks @sebald! - feat: export useAsyncList and useListData

• #2247 8e9ea3da Thanks @sebald! - feat: improve theme type

• #2285 6f3b6949 Thanks @sebald! - feat: <Button> correctly pass through all native props and option to take full width

Patch Changes

• #2320 6656342b Thanks @sebald! - fix: remove deprecated type from <Aside>

• #2319 7a43970e Thanks @renovate! - chore(deps): update react-aria

• #2272 fb9df312 Thanks @renovate! - chore(deps): update testing

• Updated dependencies [13695db8, 32353f56, 4c63400f, f4f308e4, 8e9ea3da, 406f186c, 88a3d4b0, 997ccfc1]:

  • @marigold/icons@1.0.0
  • @marigold/tokens@3.1.0
  • @marigold/system@2.0.0

1.3.0

Minor Changes

• #2236 a5b7e876 Thanks @sebald! - feat: improve styling options of <List>

• #2209 c346ef60 Thanks @sarahgm! - feat: support forwarding refs in <Link>

• #2233 3adfdeea Thanks @sebald! - feat: Introduce <List> component

Patch Changes

• #2211 527b222f Thanks @sarahgm! - chore: next link component

• Updated dependencies [c60f8527]:

  • @marigold/system@1.3.0
  • @marigold/icons@0.7.7

1.2.2

Patch Changes

• #2177 51132dd8 Thanks @renovate! - chore(deps): update react-aria

• Updated dependencies []:

  • @marigold/system@1.2.2
  • @marigold/icons@0.7.6

1.2.1

Patch Changes

• #2164 b43464fc Thanks @sarahgm! - refa: update to React 18

• Updated dependencies [b43464fc]:

  • @marigold/icons@0.7.5
  • @marigold/system@1.2.1
  • @marigold/types@0.5.2

1.2.0

Minor Changes

• #2147 2e688960 Thanks @sebald! - feat: forward ref for <FieldText>

• #2151 1e512a48 Thanks @sebald! - feat: forward ref for <Slider>

• #2144 82c376a9 Thanks @sebald! - feat: Improve usage of Marigold when not used as a full page app

• #2149 1a0070a4 Thanks @sebald! - feat: forward ref for <Radio>

• #2148 33c54b37 Thanks @sebald! - feat: forward ref for <TextArea>

• #2150 8f3c3e1b Thanks @sebald! - feat: forward ref for <Select>

• #2146 9e6e0671 Thanks @sebald! - feat: forward ref of <Checkbox>

Patch Changes

• #2152 8980b645 Thanks @sebald! - feat: forward ref for <Switch>

• Updated dependencies [82c376a9]:

  • @marigold/system@1.2.0
  • @marigold/icons@0.7.4

1.1.1

Patch Changes

• Updated dependencies []:
  • @marigold/system@1.1.1
  • @marigold/icons@0.7.3

1.1.0

Minor Changes

• #2106 d0b3abfe Thanks @sebald! - feat: Introduce <Split> component for <Inline> and <Stack>

• #2116 16f1459c Thanks @sebald! - feat: Add option to stretch <Table>

Patch Changes

• #2113 5a32c4b4 Thanks @sebald! - feat: Show sorting in <Table>

• Updated dependencies []:

  • @marigold/system@1.1.0
  • @marigold/icons@0.7.2

1.0.1

Patch Changes

• #2103 68921616 Thanks @sebald! - fix: Textarea allows to set rows via prop

• #2101 52fdb7d2 Thanks @sebald! - fix: add size prop to <Image>

• #2102 23c1a5ce Thanks @sebald! - feat: Remove all occurances of React.FC

• Updated dependencies [23c1a5ce, bfa0caea]:

  • @marigold/system@1.0.1
  • @marigold/types@0.5.1
  • @marigold/icons@0.7.1

1.0.0 (Released on Aug 11, 2026)

Major Changes

• #2096 a41bb8a3 Thanks @sebald! - feat: <Stack> can align on x and y axis

• #2081 93429e12 Thanks @sebald! - refa: separate selection/regular cell + use <Checkbox>

• #2053 759abe94 Thanks @sebald! - refa: <Dialog>

• #2054 3c86c3b7 Thanks @sebald! - refa: Move <Label> and <HelpText> to components root

• #2069 c35afcf2 Thanks @sebald! - refa: <Tooltip>
  • with arrow pointer yay!
  • allows to change placement
  • uses useComponentStyles

• #2092 4d6da0bb Thanks @sebald! - feat: <Inline> can align on x and y axis

• #2074 3aa2c100 Thanks @sebald! - refa: Remove "variant" prop from <Box>, use useComponentStyles instead

Minor Changes

• #2029 bbe8ad99 Thanks @sebald! - feat: Accessible <Radio> and <RadioGroup>

• #2036 819dab0b Thanks @ti10le! - refa: remove align prop from Table

• #2048 2ab80ae6 Thanks @sebald! - refa: <Select>

• #2052 bf12129c Thanks @sebald! - refa: Remove <ValidationMessage>

• #2034 f761f1ef Thanks @ti10le! - feat(comp): Slider rewrite with react-aria and new styling

• #2056 3abbc813 Thanks @sebald! - feat: Introduce <NumberFields>

• #2025 2b5a0967 Thanks @sebald! - fix: <TextField>/<TextArea> support variant/size

• #2070 a4117230 Thanks @sebald! - feat: Add width prop to fields to control width

Patch Changes

• #2043 6a369f5f Thanks @sarahgm! - refa: Message new styling

• #2079 04db9229 Thanks @sebald! - fix: Indeterminate is visual only + correctly render with checkbox only

• #2049 5f64c882 Thanks @sarahgm! - refa: switch with new styling

• Updated dependencies [a41bb8a3, 02d13e84, 6a369f5f, 2ab80ae6, f5128944, 3abbc813, 3aa2c100]:

  • @marigold/tokens@3.0.0
  • @marigold/system@1.0.0
  • @marigold/types@0.5.0
  • @marigold/icons@0.7.0

1.0.0-beta.0

Major Changes

• #2053 759abe94 Thanks @sebald! - refa: <Dialog>

• #2054 3c86c3b7 Thanks @sebald! - refa: Move <Label> and <HelpText> to components root

Minor Changes

• #2029 bbe8ad99 Thanks @sebald! - feat: Accessible <Radio> and <RadioGroup>

• #2036 819dab0b Thanks @ti10le! - refa: remove align prop from Table

• #2048 2ab80ae6 Thanks @sebald! - refa: <Select>

• #2052 bf12129c Thanks @sebald! - refa: Remove <ValidationMessage>

• #2034 f761f1ef Thanks @ti10le! - feat(comp): Slider rewrite with react-aria and new styling

• #2056 3abbc813 Thanks @sebald! - feat: Introduce <NumberFields>

• #2025 2b5a0967 Thanks @sebald! - fix: <TextField>/<TextArea> support variant/size

Patch Changes

• #2043 6a369f5f Thanks @sarahgm! - refa: Message new styling

• #2049 5f64c882 Thanks @sarahgm! - refa: switch with new styling

• Updated dependencies [02d13e84, 6a369f5f, 2ab80ae6, f5128944, 3abbc813]:

  • @marigold/system@1.0.0-beta.0
  • @marigold/types@0.5.0-beta.0
  • @marigold/icons@0.7.0-beta.0

0.9.0

Minor Changes

• #2016 d79a590a Thanks @sebald! - refa: <Checkbox> and <CheckboxGroup>

• #1987 cc149c9a Thanks @ti10le! - feat(comp): introduce Table component v1

• #1963 872c7413 Thanks @sebald! - feat: Introduce a new input for text <TextField>

• #1964 08ee4bf5 Thanks @sebald! - refa: Use <Field> in <TextArea>

• #1997 37d2fd69 Thanks @sarahgm! - feat: New component <Content>

Patch Changes

• #2000 121e2b3a Thanks @sebald! - refa: remove unsued elements from <Aspect>

• #2017 5dfe5f88 Thanks @sarahgm! - Button restructure

• #1991 37b3b0e9 Thanks @sarahgm! - refa: textarea restructure styles

• #2018 6e4f52cf Thanks @sarahgm! - Menu component restructure

• #2013 f6c3263f Thanks @sarahgm! - feat:Footer component

• #1999 413df088 Thanks @sarahgm! - refa: divider restructure

• #2008 4ff1e2b6 Thanks @sebald! - refa: <Checkbox> (uses new styling)

• #1992 59f3e6f3 Thanks @sarahgm! - refa: Link styles

• #1990 a98ddc11 Thanks @sarahgm! - refa: Input Component restyled and restructure

• #1994 3dff2282 Thanks @sarahgm! - Refa: card-styles-structur

• #1982 7fc15cb7 Thanks @sebald! - refa: Badge uses new styling solution

• #1988 7c1129dc Thanks @sarahgm! - refa: Field Component restructure

• #2001 b3246070 Thanks @sebald! - refa: Use <Headline> instead of <Text>

• #2014 cc01f7dc Thanks @sarahgm! - Text component restructure

• #2012 f0ec4333 Thanks @sarahgm! - feat: Header component

• #1998 6dd92ad6 Thanks @sarahgm! - feat(comp): headline component

• #1984 733f5488 Thanks @sarahgm! - refa: Image new styling solution

• Updated dependencies [424f1705, dbc55934, 3dff2282, 7c1129dc]:

  • @marigold/system@0.9.0
  • @marigold/types@0.4.1
  • @marigold/icons@0.6.1

0.8.0

Minor Changes

• #1928 059e9324 Thanks @ti10le! - feat(comp): improve Container component

• #1892 a91171f9 Thanks @sebald! - feat(components): Normalize link variant

• #1937 a1f4796f Thanks @sebald! - refa: Redo <Field> now called <TextField>

• #1919 5319745c Thanks @sebald! - feat: SVG supports size token from theme

• #1930 249b0c81 Thanks @ti10le! - feat(comp): Introduce Breakout component

• #1898 3cf378e9 Thanks @sebald! - feat: <Stack> supports rendering as list

• #1925 e3d62a22 Thanks @ti10le! - feat(comp): Rewrite Columns and remove Column

• #1870 e94a08d7 Thanks @ti10le! - feat(comp): Center component

Patch Changes

• #1926 5e5e0fcc Thanks @ti10le! - feat(comp): Container with grid

• Updated dependencies [382ac6cc, 2f45aa5d, 5319745c, 74c91e28]:

  • @marigold/system@0.8.0
  • @marigold/icons@0.6.0
  • @marigold/tokens@2.0.0

0.7.0

Minor Changes

• #1882 d436930f Thanks @ti10le! - feat(comp): introduce Tiles component

• #1881 d2c3eb50 Thanks @ti10le! - Component: Aspect

• #1868 ec4f8f22 Thanks @ti10le! - feat(comp): renew Container component

Patch Changes

• Updated dependencies [af566de4]:
  • @marigold/tokens@1.0.0
  • @marigold/system@0.7.0
  • @marigold/icons@0.5.1

0.6.0

Minor Changes

• #1819 d162a6a8 Thanks @ti10le! - feat(comp): add new Component Switch

• #1842 e053b7b9 Thanks @ti10le! - feat: extend svg fill prop to handle theme color

• #1822 527ba94f Thanks @ti10le! - feat(comp/docs): Alert update variant + docs

• #1807 b55e10bc Thanks @ti10le! - feat(comp): add Tooltip component v1

• #1851 9a95a6f5 Thanks @ti10le! - feat(comp): make Inline accepting fragment + standard text

• #1820 f62033b6 Thanks @ti10le! - feat(comp): Checkbox add indeterminated state + doc update

Patch Changes

• #1849 21f72b34 Thanks @sarahgm! - chore: remove Alert

• #1852 25c8675e Thanks @ti10le! - refa(comp): fill prop instead of css or __basCSS

• Updated dependencies [4cc0ad3b, 64b9089e, 539d4198, e053b7b9]:

  • @marigold/system@0.6.0
  • @marigold/icons@0.5.0

0.5.1

Patch Changes

• #1795 a178eafe Thanks @ti10le! - refa: use interface instead of type

• #1798 9939b743 Thanks @sebald! - fix(components): Use own flattenChildren helper to fix ESM build

• Updated dependencies [a178eafe]:

  • @marigold/system@0.5.1
  • @marigold/icons@0.4.2

0.5.0

Minor Changes

• #1784 99af3b37 Thanks @ti10le! - refa(comp): use interface instead of type

• #1727 026300b1 Thanks @sebald! - feat(components): <Text> add possibility to change font size via style props

Patch Changes

• #1774 93480b63 Thanks @ti10le! - feat(comp): remove label prop and add children + refa

• #1775 6da8eba2 Thanks @ti10le! - feat(comp): Checkbox remove label prop and add children + refa

• Updated dependencies [5936de75]:

  • @marigold/system@0.5.0
  • @marigold/icons@0.4.1

0.4.0 (Released on Jul 8, 2026)

Minor Changes

• f9526234 Thanks @sebald! - chore: Use tsup to build packages

• f9526234 Thanks @sebald! - Improved size in node_modules

Patch Changes

• f9526234 Thanks @sebald! - feat(comp): Rewrite Textarea with react-aria

• f9526234 Thanks @sebald! - feat(comp): rewrite Field component with react-aria

• Updated dependencies [f9526234, f9526234]:

  • @marigold/icons@0.4.0
  • @marigold/system@0.4.0
  • @marigold/types@0.4.0

0.3.2

Patch Changes

• #1701 45b05af2 Thanks @ti10le! - feat(comp): rewrite Divider and add react-aria

0.3.1

Patch Changes

• #1634 26ff3618 Thanks @ti10le! - feat(comp): Radio component rewrite

• #1676 379041bc Thanks @ti10le! - remove the last mdx stories

• Updated dependencies [379041bc]:

  • @marigold/icons@0.3.1
  • @marigold/system@0.3.1

0.3.0 (Released on Jun 18, 2026)

Patch Changes

• #1269 ebb704dd Thanks @ti10le! - feature: section to select component

• #1189 be8dc989 Thanks @sebald! - feat(components): <Stack> correctly uses whitespace and supports usage as list

• #1378 b0c967de Thanks @ti10le! - feature: Textarea - make error boolean and add errorMessage

• #1510 a9b8b083 Thanks @ti10le! - refa(comp): Stack

• #1515 8eda245f Thanks @sebald! - feat: add normalization for body and html & fix emotion leak

• #1651 4452b39c Thanks @ti10le! - feat(comp): Checkbox component rewrite

• #1316 edfec8d9 Thanks @ti10le! - aria-label for all usages of select component use SSR Provider which is exported from package components/Provider in Gatsby wrapper

• #1440 c1da52c0 Thanks @ti10le! - feature: use Element in Box + necessary fix changes

• #1658 af485505 Thanks @ti10le! - feat(comp): refa + react-aria Hidden component

• #1228 ccebc98e Thanks @ti10le! - docs: Use Select component in ThemeSelect

• #1514 5107b943 Thanks @sebald! - feat(system): Use emotion's context

• #1631 9d0e0b96 Thanks @ti10le! - feat(comp): improve Label and add color prop

• #1488 5ea6ac42 Thanks @ti10le! - fix(comp): Select coverage

• #1235 657d508b Thanks @ti10le! - feature: ActionGroup component

• #1618 bd51a81b Thanks @ti10le! - feat(comp): change Input default variant

• #1660 6f9a9d61 Thanks @ti10le! - feat(storybook): rewrite stories from mdx to tsx

• #1313 2203155c Thanks @ti10le! - Slider component - design update

• #1447 29e4dcc5 Thanks @ti10le! - feature: Card component

• #1556 470f6e8d Thanks @ti10le! - feat(comp): remove span from button and add some styles to the button element, add space prop to button

• #1521 00588fef Thanks @ti10le! - feat(comp/docs): change Inline component default align + use it in DoAndDont

• #1616 ac186e8c Thanks @ti10le! - feat(comp): remove hardcoded variants in <Dialog>

• #1639 71551547 Thanks @ti10le! - feat(comp): remove hard coded label from Select

• #1451 6f24c585 Thanks @ti10le! - bugfix: change Stack that pt has higher priority than base

• #1374 90dd906c Thanks @ti10le! - feature: Field - make error boolean and add errorMessage

• #1230 ebd6e26f Thanks @viktoria-schwarz! - feat: add GlobalStyles via theme

• #1196 d3a0698f Thanks @ti10le! - Add error and required prop to <Select>

• #1513 686c4572 Thanks @ti10le! - feat(comp): inline Component

• #1493 45d022dc Thanks @ti10le! - feat(comp): remove useStyles from Slider

• #1498 9e46b437 Thanks @ti10le! - feat: add GlobalStyles

• #1563 6e485f5a Thanks @sebald! - feat: Introduce a Theme with all available scales

• #1482 bf19214e Thanks @ti10le! - feat(comp): remove useStyles from Card

• #1448 ab879e66 Thanks @ti10le! - feature: replace useStyles in Badge, Menu, Message and ValidationMessage

• #1232 4c32db13 Thanks @ti10le! - Field component redesign

• #1579 e13e3cc1 Thanks @ti10le! - feat: remove Heading from marigold

• #1234 cf2a345d Thanks @ti10le! - fix Dialog component example + styles

• #1622 1829cf17 Thanks @ti10le! - feat(comp): change Card default variant

• #1619 57d955ee Thanks @ti10le! - feat(comp): change Textarea default variant

• #1501 1c1f8648 Thanks @ti10le! - feat(storybook): remove use styles stories

• #1366 78a8e5c8 Thanks @ti10le! - feature: renew radio component

• #1483 f725277b Thanks @ti10le! - feat(comp): remove useStyles from Checkbox + Radio

• #1365 6d1e47c1 Thanks @ti10le! - feature: redesign dialog component

• #1492 57a6d470 Thanks @ti10le! - feat(comp): remove useStyles from Columns

• #1264 c6c8f986 Thanks @ti10le! - bugfix/feature: link + menu component

• #1651 4452b39c Thanks @ti10le! - feat(comp): refa + react-aria Hidden component

• #1506 7b2a0374 Thanks @ti10le! - infra(packages): add icons package as dependency to component package

• #1367 902be38c Thanks @ti10le! - feature: renew checkbox component

• #1499 ec5baf85 Thanks @sebald! - feat: Update and simplify normalization

• #1375 dd237e6d Thanks @ti10le! - feature: Select - make error boolean and add errorMessage

• #1221 3885f64c Thanks @viktoria-schwarz! - feat(storybook): add Welcome stories and additional config

• #1485 1bb6f32e Thanks @ti10le! - feat(comp): remove useStyles from Label

• #1466 80984f41 Thanks @ti10le! - feat(docs): doAndDont + CodePreview component - e.g. button

• #1131 0ccc10de Thanks @sebald! - feat(types): Clarify and improve polymorphic types by calling it by its actual name ... polymorphic! We also added types when no ref should be passed.

• #1633 ab786e92 Thanks @ti10le! - feat(comp): remove hard coded label variant in radio

• #1617 e5aed4bf Thanks @ti10le! - feat(comp): change Slider default variant

• #1621 2f7b936f Thanks @ti10le! - feat(comp): change Badge default variant

• #1589 8cbcb91a Thanks @sebald! - feat: normalize <SVG> and move to system package

  BREAKING: <SVG> moved from @marigold/icons to @marigold/system

• #1641 c49e5049 Thanks @sebald! - chore(config): Update storyboook configuration and used CSF again

• #1636 4aeac33f Thanks @ti10le! - feat(comp): Field fix default variant + remove hardcoded variants

• #1550 846eb640 Thanks @sebald! - feat: Merge <Box> and <Element>

• #1509 12b74338 Thanks @ti10le! - feat(comp): improve Column + Columns component

• #1449 a89bd85c Thanks @ti10le! - Replace useStyles in ListBox, Textarea and Field.test

• #1182 f3f61456 Thanks @ti10le! - improve Button component with react-aria

• #1132 b6614f1f Thanks @sebald! - feat(compoents): Make <Text> and <Link> polymorphic

  <Text>

  • the as prop supports arbitrary inputs
  • supporst ref
  • supports style props (text-align, color, cursor, user-select)

  <Link>

  • the as prop supports arbitrary inputs
  • does not support ref!
  • improved accessibility (react-aria)

• #1572 4add22cc Thanks @sebald! - feat(components): Harden types in theme

• #1474 abdde032 Thanks @sebald! - refa: remove useStyles from <Alert>

• #1484 24367e63 Thanks @ti10le! - feat(comp): remove useStyles from Select

• #1632 c96d54a2 Thanks @ti10le! - feat(comp): remove hard coded label variant in checkbox

• #1229 bd00c6da Thanks @ti10le! - Label component redesign

• #1522 6a82a490 Thanks @ti10le! - feat(comp): use Inline in ActionGroup

• Updated dependencies [c030aa85, 8eda245f, 5a04de11, c1da52c0, 1448ddca, 5107b943, cd3a0d3e, ebd6e26f, 6e485f5a, 80a2abe5, e13e3cc1, 1829cf17, 1c1f8648, 51af6693, a00b7eb9, 7b2a0374, ec5baf85, 0bb8f19e, c4ae5c5c, a1ef2108, 2f7b936f, 8cbcb91a, 846eb640, 5d63cd9c, 46aede50]:

  • @marigold/system@0.3.0
  • @marigold/icons@0.3.0