marigold-ui/marigold @marigold/theme-rui@6.0.0 on GitHub

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(DST-1237): theme-owned breakpoints with CSS fallback
Breakpoint resolution is now theme-driven: useSmallScreen and useResponsiveValue read theme.screens from the ThemeProvider context instead of relying on hardcoded values in defaultTheme. If no theme provides screens, the hooks fall back to reading Tailwind v4's --breakpoint-* CSS custom properties.
- Added screens to @marigold/theme-rui (matches Tailwind v4 defaults)
- Removed screens from defaultTheme in @marigold/system
- Added resolveScreens utility for theme-first, CSS-fallback resolution
b7122c0: refactor([DST-1283]): Breaking Change — Remove <Multiselect> (and the react-select dependency) from @marigold/components.
Use <TagField> instead.
b7122c0: DST-878: Polish design tokens and add token documentation.
New color palette:
- Replace default gray scale with warm neutral "charcoal" palette (oklch, hue 54, 11 steps from 50-950)
Token renames and restructuring:
- Rename brand to primary, muted-foreground to secondary, focus to focus-highlight
- Rename status token structure from *-muted/*-muted-foreground/*-muted-accent to */*-foreground/*-accent
- Add disabled-surface token for disabled control backgrounds
- Add overlay-backdrop token for modal/tray backdrops
- Update page background colors
New hover utilities:
- Add ui-state-hover utility (solid hover for list items, table rows, menu items)
- Add ui-state-hover-ghost utility (translucent hover for ghost buttons, tabs, action bar)
- Migrate all components from raw hover:bg-hover/hover:bg-current/10 to the new utilities
Documentation:
- Add new Token Overview page with complete token reference
- Add annotated UI diagram, color palette demo, Do/Don't guidance, hover and selection pattern docs
- Remove outdated design-tokens.mdx and design-token-guidelines.mdx pages

b7122c0: DST-1209: Refactor elevation documentation and remove deprecated utilities.

Breaking: Remove util-surface-* utilities

Delete util-surface-sunken, util-surface-body, util-surface-raised, util-surface-overlay
Remove utils.css from theme-rui build

Migration from legacy utilities:

Old utility	New replacement
`util-surface-sunken`	Removed, use `bg-background` for the page base layer
`util-surface-body`	`bg-background` (no shadow needed)
`util-surface-raised`	`ui-surface shadow-elevation-raised`
`util-surface-overlay`	`ui-surface shadow-elevation-overlay`

Documentation:

Rewrite elevation page around the 3-tier shadow system (border, raised, overlay)
Add surfaces section explaining bg-background, bg-surface, bg-muted, and ui-surface
Add interactive demos, annotated SVG diagram, and per-tier Do/Don't guidelines
Add migration table from legacy util-surface-* to new tokens

Fixes:

Fix broken bg-bg-surface-* tokens in card-elevation demo, inset-equal demo, and Columns story
Update Card docs elevation section to match new page structure

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>
```

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-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.
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: 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: 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.
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-1633): Dialog reveals a header seam once its body scrolls.
What changed:
- The Dialog header is borderless at rest and fades in a bottom hairline once the body scrolls beneath it, matching the Sidebar's scroll-revealed seam. A short (non-scrolling) dialog stays seamless.
- The scroll-seam mechanism is promoted from a private Sidebar utility to a reusable ui-scroll-seam-* primitive. It is the companion to ui-scroll-edge for the case where the header is a grid sibling of the scrolling body rather than its ancestor. The seam color is a --seam-color custom property that defaults to --color-border.
- The Sidebar is migrated onto the shared primitive with its color pinned to --color-surface-border, so it renders exactly as before.
Why:
A long dialog gave no cue that its body scrolled under the header. The Sidebar already had this affordance, and the Dialog is the second occurrence of the same header-over-scrolling-body structure, so the mechanism becomes a shared primitive instead of a copy.
Impact:
- Dialog gains the affordance automatically with no API change, covering both <Dialog.Header> and bare <Title> dialogs.
- Sidebar is unchanged visually.
- Browsers without CSS scroll-driven animations (for example Firefox) fall back to an always-on hairline, so every engine still shows a divider.
b7122c0: feat(DST-1238): align Dialog with the shared ui-panel-* pattern
Dialog now adopts the ui-panel-content and ui-panel-actions utilities already used by Drawer, Tray, and Sidebar. Visible changes are scoped to Dialog:
- Actions gain a border-t divider as the interaction-zone marker
- Content gains consistent py-4 vertical padding (was py-1)
- Actions padding becomes symmetric py-4 (was pt-4 pb-6)
- Responsive button stacking (flex-col-reverse sm:flex-row) remains Dialog-specific identity
Dialog's header keeps its original treatment (px-6 pt-6, no border). It's a conversational opener that sits close to the message body, not a section divider above scrollable content — the ticket's "maintain unique identity where functionally necessary" guidance applies.
New ui-panel-content utility (overflow-y-auto outline-none px-6 py-4) added; adopted by Dialog and Drawer. Tray retains its compact p-2 content padding and Sidebar retains its tighter px-3 py-1 nav padding because those areas have intentionally tighter densities.
The ui-panel-* utilities are now documented with an inline docstring in ui.css clarifying they're for modal-style panels (Dialog/Drawer/Tray/Sidebar) and distinct from the Panel component.
Drawer, Tray, and Sidebar have no visual change — Drawer migrates inline padding/scroll classes to the new ui-panel-content utility (identical CSS output); Tray and Sidebar style files are untouched.
DST-1238
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-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: 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: 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: 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: style(DST-1602): quiet surfaces — one shadow tier, raised caps, tonal panels
The next iteration of the surface/elevation model: nothing in normal document
flow casts a shadow anymore.
- One shadow tier. shadow-elevation-overlay is the only remaining tier and
  means one thing — a surface floats above the page (Dialog, Drawer, Menu,
  Popover, Toast, ActionBar). shadow-elevation-border and
  shadow-elevation-raised are removed.
- Raised caps, not shadows. Secondary Button and Menu trigger move to the new
  ui-soft cap; the cap itself is the lift, no drop shadow.
- Flat controls, tonal panels. Fields become flat wells; Card, Panel, and the
  Accordion card variant separate from the gray page by fill instead of elevation.
- Softer structural lines & lighter backdrop. --color-border and the modal
  backdrop are quieted to match the flatter surfaces.
No component API changes — components using the removed shadow tokens are migrated
in this release. Consumers referencing --shadow-elevation-border or
--shadow-elevation-raised directly should move to shadow-elevation-overlay or
a flat surface.
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-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-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-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-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: style(DST-1586): quieter sidebar navigation hierarchy and a seamless app shell
The sidebar navigation now carries hierarchy with semantic tokens instead of raw
charcoal values. The current page is an inset rounded pill (selected fill,
foreground text); idle rows sit a step lighter on secondary and preview the
pill in the hover charcoal. Section labels stay on secondary so they meet
WCAG AA contrast and read as their own tier through treatment — uppercase,
smaller, heavier, tracked — with an even gap opening above every section. The
drill-in back action shares the nav-row pill geometry, so it aligns to the same
content column and reads at the same weight as a nav item.
The navigation is also denser: rows sit at a fixed 30px height with a tighter
horizontal inset, section labels keep one even rhythm, and the sidebar toggle
steps down to the small control size with a lighter icon — more rows per screen
without losing the pill affordance.
The app shell keeps exactly one structural line: the sidebar divider, now at
full surface-hairline strength (it bounds the nav column so the branch rows'
trailing chevrons anchor against it, and it stays perceivable at low vision).
Every other shell line is gone — the sidebar header/footer hairlines and the
TopNavigation bottom border — so regions separate on whitespace and the
content panels carry the structure. The sticky TopNavigation reveals a bottom
hairline only once page content scrolls underneath it (ui-scroll-edge, a
scroll-driven progressive enhancement; non-supporting browsers simply stay
borderless). The mobile sidebar drawer wears the overlay elevation,
Sidebar.Separator steps up to the full-strength surface hairline, and the
sidebar footer now sits on the same content column as the nav and quiets its
links (secondary color, normal weight, nav-row pill on hover) so escape hatches
read as a continuation of the nav rather than competing with it.
When the nav scrolls, the sidebar's own sticky header and footer reveal a seam
so mid-list rows never butt against them without a divider. Because the nav is
a grid sibling between the two (not their ancestor), the seam is driven by a
named scroll timeline the nav declares, hoisted into scope for the header via
timeline-scope — a set of ui-sidebar-seam-* utilities marked non-reusable
since they are specific to this layout. The header seam fades in as content
scrolls under it; the footer seam shows while content remains below and fades
out as the list bottoms out. Without scroll-driven animation support it falls
back to an always-on hairline.
b7122c0: feat(theme-rui): preflight fixes, file layout refactor, token and export corrections
A cohesive set of changes that (1) adds peer-dependency fixes needed
for page-level scroll, (2) splits the theme's CSS into files with
unambiguous roles, and (3) fixes a prefixer bug that stranded design
tokens inside the scoped bundle.
New: preflight.css
Two peer-dependency fixes on the real <html> / <body>:
- html { scrollbar-gutter: stable } — prevents a 1 px reflow when
  @react-aria/overlays locks the page (it sets overflow: hidden
  on <html> and compensates scrollbar width).
- body { position: relative; overflow-x: clip } — contains the
  @react-aria/live-announcer portal (mounted at top: -10000px; left: -10000px) so it cannot expand the document's scrollable
  area. clip (not hidden) keeps position: sticky on
  descendants working.
These rules ship inside both entry points; the prefixer excludes
html/body so the rules reach the document root while the rest
of the bundle stays scoped to [data-theme="rui"].
Scrollbar track
ui-scrollbar's track is now transparent so the themed scrollbar
blends into any surface.
File layout refactor
- tokens.css (new) — @plugin declaration and every design token
  in one place. Easy to find, easy to extend.
- theme.css (Tailwind-native entry) — imports preflight.css +
  tokens.css + ui.css + variants.css and paints <body>
  directly. A Marigold-first app needs zero extra markup to get the
  theme's page background, text color, and font.
- styles.css (pre-compiled entry) — imports the same base and
  paints [data-theme="rui"]. The consumer places the attribute on
  <html>, <body>, or a wrapper <div> to control where Marigold
  paints — whole-app or island.
- global.css (removed, never released) — the body paint now lives
  inline in the two entry points that actually need it, so a shared
  file with ambiguous semantics is no longer necessary.
Two clean mental models
- Use theme.css with your own Tailwind build when Marigold is the
  whole app. Body paints automatically, tokens live at :root,
  utilities tree-shake against your content.
- Use styles.css as a pre-compiled drop-in when Marigold is an
  island or you are not running Tailwind. Place data-theme="rui"
  wherever Marigold should paint.
Tokens at :root
postcss-prefix-selector previously rewrote @theme's output from
:root, :host to [data-theme="rui"], [data-theme="rui"] :host,
which meant any unscoped rule could not resolve
var(--color-background) because the variables were only declared
inside the [data-theme="rui"] scope. The prefixer now excludes
:root, :host, and [data-theme="rui"] in addition to
html/body, so design tokens are emitted globally while utility
classes remain scoped. The [data-theme="rui"] exclude uses a
quote-agnostic regex so prettier round-trips don't reintroduce
double-prefixing.
CSS exports carry a style condition
Tailwind v4's CSS resolver uses conditionNames: ["style"].
Bare-string export entries without a matching condition fail under
strict resolvers, so every .css subpath now declares both style
and default targets. The unused ./* JS catchall is removed. New
subpath exports: ./tokens.css, ./preflight.css.
Existing documented imports (theme.css, styles.css) continue to
work.

Patch Changes

b7122c0: fix(DST-1359): align ActionBar action button spacing with the regular Button. The actionButton style in theme-rui was missing gap-2 items-center justify-center, which caused icons and labels inside ActionBar buttons to render without the proper spacing/alignment used by the ghost/default Button. Adding these utilities restores visual parity across the design system.
b7122c0: Paint Checkbox and Radio controls with bg-surface so the inner area follows the theme surface token. Keeps the controls visually distinct over containers that paint a non-default background — e.g. a hovered or selected SelectList row. Radio already used bg-surface (added in DST-878 token polish); this brings Checkbox in parity.
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-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: 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-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-1406): restore focus outline on virtualized ListBox items. RAC's virtualizer wrapper sets an inline z-index: 0 per item, creating a stacking context the option's focus-visible:z-1 cannot escape — adjacent wrappers paint on top in DOM order and clip the focused outline (most visible when the next item is selected). Lift the wrapper containing the focused option above its siblings so the outline is fully visible. Affects all virtualized listboxes (Select, ComboBox, Autocomplete).
b7122c0: fix([DST-1412]): fix multi-month Calendar/RangeCalendar layout at non-default widths. With three months at width="1/2" the third month overflowed the calendar wrapper because min-w-[250px] only sized for a single month; with width="full" the date grids stayed at content size while their columns expanded, leaving header text floating over empty space. Switch the calendar minimum to min-w-fit so multi-month grows to fit its natural content, and add w-full to calendarGrid so the date table fills its column.
DST-1412
b7122c0: fix(DST-1436): drop background from hover transitions across ui-surface, ui-surface-contrast, Button, Tabs, Table (row + edit buttons), LegacyTable, Sidebar (navLink + backButton), Calendar cells, SelectList, and ActionBar.clearButton. Hover background flips now happen instantly, making high-frequency controls feel snappier and aligning Button variants (primary/secondary previously transitioned the background while ghost/destructive were already instant). Color, border, box-shadow, and transform transitions are preserved.
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: 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: fix(DST-1551): round the RangeCalendar hover and focus highlight on days outside the selected range
Days outside the selected range now round their hover and focus highlight to match the selected state, instead of showing a square highlight against the rounded endpoints. In-range cells stay square so the range fill still connects seamlessly.
b7122c0: fix(DST-1560): align IconButton and Pagination to the control sizing token
IconButton and Pagination hardcoded h-9/size-9 instead of the h-control/size-control token that every other ui-button-base button uses. The values are identical today (--spacing-control = 2.25rem = h-9), so there is no rendered change, but the literals would silently drift if the token were retuned. Also dropped IconButton's redundant disabled:text-disabled disabled:cursor-not-allowed classes, which ui-button-base already applies via disabled:ui-state-disabled.
b7122c0: fix(DST-1560): correct the @source inline padding safelist to the real spacing tokens
The padding safelist in styles.css still used the pre-rename vocabulary {compact, tight, regular, relaxed, spacious}, but the spacing tokens were long ago renamed to {tight, snug, regular, relaxed, loose}. As a result compact/spacious force-generated dead utility classes (resolving to undefined --spacing-* vars), while the real snug/loose tokens were never safelisted and so were unavailable in scanner-excluded stories and in the (unscanned) docs app. The leading family-less line was also stale — it predates the square/squish/stretch split.
Replaced the three lines with the three inset-padding families (square/squish/stretch) using the real size names, so utility classes like p-squish-relaxed resolve to a concrete value and the full inset vocabulary is available where the scanner can't see it.
b7122c0: fix(DST-1560): restore the Toast close-button hover state
The Toast close button kept its transition-[color,box-shadow] but lost its hover declaration, so it animated nothing on hover. Added hover:text-foreground so the icon darkens on hover, consistent with the system-wide convention that color (not background) animates on interactive controls.
b7122c0: fix(DST-1560): align Tray content padding and Card radius to the shared surface tokens
Tray content used p-2 while its own header and actions (and Dialog/Drawer content) follow the ui-panel-content rhythm (px-6 py-4), leaving the content visually out of step within the same component. Switched it to ui-panel-content.
Card hardcoded rounded-md while the rest of the raised surface tier (Panel, Accordion) uses rounded-surface. Moved Card to rounded-surface in its base so every variant (default, master, admin) shares the same 8px corner, making the raised tier consistent.
b7122c0: fix(DST-1560): use the defined ui-scrollbar utility on Drawer and Sidebar
Drawer and Sidebar referenced util-scrollbar, which is not defined in the theme (only ui-scrollbar exists in ui.css), so they rendered without the themed scrollbar while Dialog, Tray, and ContextualHelp got it. Corrected both to ui-scrollbar.
b7122c0: fix(DST-1565): restore the ToggleButtonGroup divider, fix segment focus, and match Pagination hover
Three polish fixes on the control surfaces:
- ToggleButtonGroup divider. Segments in a group had a transparent right border, so no line separated them. The divider is restored with the opaque border token (the structural-line token, opaque on purpose so it never doubles up), removed on the last segment.
- ToggleButtonGroup focus (DST-1597). The group was overflow-hidden, which clipped the focus outline of a full-height segment so it was hard to tell which segment was focused. The group no longer clips. The end segments round their own outer corners to match the frame, so the standard focus outline now renders unclipped around any segment.
- Pagination hover. Unselected page numbers now pick up the same translucent ghost hover as the prev/next arrows. The selected page keeps its control fill and is left untouched.
b7122c0: refa(DST-1565): unify surfaces and controls on one boundary and elevation model
theme-rui drew edges two different ways with no rule for which to use: a background-clip gradient border on surfaces, and an opaque border on controls. Both are replaced with a single model built on two independent axes.
- The boundary encodes role. Both roles compose one role-neutral primitive, ui-frame (a fill, a 1px ring, and a radius). ui-surface and ui-control are siblings of it that differ only in the boundary token, so a control is never modeled as "a kind of surface". Surfaces (Card, Panel, Dialog, Menu) wear ui-surface, a quiet translucent hairline. Controls (Input, Select, fields, the neutral Button family, SegmentedControl) wear ui-control, the same charcoal stroke about 2.5× denser, reading as something to operate. Both are translucent, so the edge composites over its ground and stays consistent on white, the page background, or a tinted panel.
- Elevation encodes depth, independently. Now that the ring owns the crisp edge, the three shadow-elevation-* tiers carry only lift, and controls sit on the lowest tier.
Mechanics:
- The surface boundary is a 1px Tailwind ring in the box-shadow chain, replacing the 1px solid transparent plus border-box gradient that hijacked background and got covered by edge-to-edge children. ui-state-error swaps --ui-border-color, and the theming contract is unchanged.
- New --color-surface-border (decorative surface rim) and --color-control-border (functional control edge). --color-border narrows to structural lines (dividers, grid lines, table rules) and stays opaque, because crossing translucent strokes double-darken at their intersections.
- ui-contrast (primary Button, ActionBar) uses the same model inverted: a crisp dark ring plus light on the face (top glow, top-down gradient, top-edge highlight), all derived from --ui-background-color. ui-contrast-destructive is that recipe retinted red.
- Elevation shadows retuned: the contact layer is cut and spread across lighter, warm-tinted, contained layers so dense fields stay calm.
- The Popover owns the overlay surface. ListBox, Calendar, Menu, and Dialog render flat inside it and keep their own surface only when standalone.
No breaking changes: visual refinement plus additive tokens.
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: fix(DST-1628): apply the disabled state to the Slider track, fill, thumb, and value, dim the description text of disabled SelectList, ListBox, and Menu items, and show the not-allowed cursor on disabled items. The Slider slots drove their disabled styles off the bare disabled: variant on plain <div>s, where it never matches, so they now key off group-disabled/field:. The item description slots hardcoded text-secondary, which overrode the inherited disabled color, so they now add group-disabled/option:text-disabled. Disabled SelectList and ListBox items still showed the pointer cursor because the interactive data-selection-mode:cursor-pointer utility outranked disabled:cursor-not-allowed on source order, so the selectable cursor is now gated behind not-disabled:. Menu gained the disabled:cursor-not-allowed it was missing.
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-1631): keep the RangeCalendar within its container on small screens. Each month carried a hard min-w-[250px] with no breakpoint guard, so below sm (where the months stack) the calendar could not shrink and overflowed a narrow Panel. The floor is now gated to sm and up (min-w-0 sm:min-w-[250px]), letting the flexible-cell grid shrink to fit while the desktop two-across layout is unchanged.
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: 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: fix(DST-1636): simplify the Accordion icon slot to pointer-events-none text-secondary, matching Panel's collapsibleIcon. Drops the redundant shrink-0 (already baked into MorphCaret) and the obsolete transition-transform duration-250 (the caret morphs its path d rather than rotating). No visual change.
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: 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(DST-1352): use correct outline for focus + error state in compound fields
7a122c7: fix(DSTSUP-269): wrap long unbreakable option labels inside the list instead of letting them widen the item
A listbox item is a grid, so a label without any break opportunity (a long word with no spaces) set the automatic minimum of the label track to its own width and pushed the item out of a narrow Select, ComboBox, Autocomplete, TagField, ListBox or the Calendar's preset list. Items now break anywhere, matching how labels with spaces already wrapped.
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: Give Menu items and the FileField drop zone a real keyboard focus indicator.
Both signalled focus with a background wash alone — 1.11:1 for a menu item, ~1.05:1 for the drop zone — well under the 3:1 WCAG 1.4.11 asks of a state indicator. In a menu the wash is doubly unreliable, since focus follows the mouse there and the same wash fires on hover.
Adds ui-state-focus-item, the missing counterpart to ui-state-focus. ui-state-focus is a two-part indicator: the border flips to full-opacity --color-ring and the outline is a soft halo around it. On an element with no border to flip it degrades to the halo alone, which measures 2.08:1. ui-state-focus-item is for those borderless rows — a full-opacity inset ring (4.97:1 over the focus wash, 3.14:1 on the contrast ground), inset so overflow-hidden overlays like Popover cannot clip it.
Only keyboard focus changes. Hover, selection and pointer interaction are untouched.
b7122c0: fix([DST-1408]): drop position: relative from body in theme-rui preflight
themes/theme-rui/src/preflight.css previously set
body { position: relative; overflow-x: clip } to contain
@react-aria/live-announcer's portal. Empirically that containment
isn't needed: the live-announcer node is a 1×1 px element with
overflow: hidden and clip-path: inset(50%), so its content cannot
expand the document's scrollable area in any state — a synthetic
test toggling body.position between relative and static with
the announcer mounted produces identical body.scrollWidth/scrollHeight.
Meanwhile, position: relative on <body> makes it the containing
block for absolute portals (Tooltip, Popover, Menu, Select dropdown).
React-aria's useOverlayPosition then takes a special-case branch
that adds the page's scroll offset on top of itself when computing
"available space above the trigger", producing a near-zero number
even when the viewport has hundreds of pixels of headroom. Every
overlay with a top placement (notably <Tooltip>) flips to
bottom, and forcing placement="top" positions the overlay far
off-screen because the same math is broken in both directions.
Removing position: relative while keeping overflow-x: clip
restores correct overlay placement without losing the defensive
horizontal-scroll guard. clip does not establish a containing
block for absolute descendants (per CSS Overflow Module Level 3), so
the bug cannot reappear from this rule alone — but the file's
comment now warns that position, transform, contain,
filter, backdrop-filter, or will-change: transform on <body>
would re-introduce it.
b7122c0: Restructure tokens.css and fix three token defects. The public token surface is unchanged — every token consumers can reference still resolves to the same computed value.
- Fix: the pre-compiled bundle force-generated the wrong palette. styles.css declared @source inline('{bg}-{stone}-…'), but the theme's palette is charcoal. Consumers writing bg-stone-500 were getting Tailwind's default stone, never a theme color, and bg-charcoal-* did not exist in the bundle at all. The line went stale when charcoal was introduced and the theme's own stone utility usages were migrated without updating it. The bundle now ships the 11 bg-charcoal-* utilities and no longer ships the 9 bg-stone-* ones — the only consumer-visible removal in this release.
- Fix: <Panel p="collapsed"> referenced an undefined variable. collapsed is a member of InsetSpacingTokens and resolveInsetAxes appends an axis suffix to every non-numeric token, so it resolved to var(--spacing-collapsed-x), which was never declared — leaving padding at 0 by accident rather than by design. Adds --spacing-collapsed-x / --spacing-collapsed-y.
- --color-border is now translucent (charcoal-950 / 14%) instead of a fixed lightness. This is the one visual change in the release. A fixed lightness made a divider's weight depend on its ground: the same token measured 1.352:1 on surface, 1.297:1 on muted and 1.222:1 on background, so a rule in the Sidebar read 11% weaker than the same rule in a Table. At 14% alpha the three land within 0.003 of each other and within 0.007 of the old value on surface, so dividers on white are unchanged to the eye and the ones on tinted grounds tighten up. Alpha picked by sweeping 0.04–0.30 and sampling rendered pixels on all three grounds. Adds a private --ui-divider-solid (no utility, not a Tailwind namespace) for the two recipes that read the divider's channels rather than its appearance — Drawer's calc(l - 0.1) and SectionMessage's status-accent color-mix — so both render exactly as before rather than inheriting an alpha that would compound.
- --color-soft and --shadow-elevation-overlay now take their hue from the palette via relative color syntax instead of hardcoding 54. Computed values are identical today; a rebrand now carries the divider color, the soft cap and the shadow's warm cast with it instead of leaving them behind. Note this covers the token definitions: on the pre-compiled path tokens.css is imported with theme(inline), so palette utilities such as bg-charcoal-500 compile to inlined literals rather than var(--color-charcoal-500) and are not retinted by overriding the token at runtime.
- --contrast-* (7 vars) are no longer theme tokens. They are single-use arguments to the ui-contrast utility and now live inside it. They were never in a Tailwind namespace, so they never generated a utility — private implementation detail sitting on the public :root surface.
- Regroups the file so the five boundary tokens sit together, splits radius out of the surface section, renames the TYPOGRAPHY section to FONT FAMILIES (it holds no type scale), and trims comments that restated their own values or had gone stale.
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-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-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: Rename universal spacing token from none to collapsed to avoid a Tailwind v4 collision. --spacing-none inside @theme static caused leading-none to resolve to 0 instead of line-height: 1. The new name collapsed is a semantic design term (cf. CSS margin collapse) that reads naturally in both gap (space="collapsed") and padding (inset="collapsed") contexts.
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: fix: register --ui-background-color, --ui-border-color, and --ui-highlight-color as non-inheriting custom properties
Previously, setting one of these variables on a themed surface (e.g. a destructive Panel overriding --ui-border-color) would cascade the value into every nested element that also reads ui-surface, tinting Inputs, Buttons, Cards, etc. with the parent's color.
These three custom properties are now registered via @property { inherits: false }, so each surface resolves its own fallback via the existing var(..., var(--color-…)) pattern and nested surfaces keep their defaults.
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 [85e9a45]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [0e2c676]
Updated dependencies [b7122c0]
Updated dependencies [a9fdcff]
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 [2b9df4c]
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 [68122ff]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [e0f9c05]
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 [bb23186]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [0e2c676]
Updated dependencies [f331a41]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [04e22ab]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [b7122c0]
Updated dependencies [6cfcea4]
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/components@18.0.0
- @marigold/system@18.0.0

marigold-ui/marigold @marigold/theme-rui@6.0.0
on GitHub

Major Changes

Breaking changes

Restoring the old Switch behavior

Custom theme migration

1. Add `BooleanField` to your theme (required)

2. Update `Checkbox` container slot (required if customized)

3. Update `Switch` container slot (required if customized)

Minor Changes

Patch Changes

marigold-ui/marigold @marigold/theme-rui@6.0.0 on GitHub

Major Changes

Breaking changes

Restoring the old Switch behavior

Custom theme migration

1. Add BooleanField to your theme (required)

2. Update Checkbox container slot (required if customized)

3. Update Switch container slot (required if customized)

Minor Changes

Patch Changes

marigold-ui/marigold @marigold/theme-rui@6.0.0
on GitHub

1. Add `BooleanField` to your theme (required)

2. Update `Checkbox` container slot (required if customized)

3. Update `Switch` container slot (required if customized)