@marigold/system

18.0.0-beta.4

Major Changes

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

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

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

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

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

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

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

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

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

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

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

  <Menu> gains richer building blocks for advanced menus:

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

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

Minor Changes

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

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

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

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

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

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

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

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

  DST-765

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

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

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

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

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

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

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

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

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

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

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

Patch Changes

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

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

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

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

  Migration:

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

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

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

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

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

18.0.0-beta.3

Minor Changes

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

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

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

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

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

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

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

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

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

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

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

  Migration

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

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

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

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

18.0.0-beta.2

Minor Changes

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

  What changed (DST-753):

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

  Why:

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

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

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

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

  Docs:

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

  Migration:

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

18.0.0-beta.1

Minor Changes

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

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

  DST-1134

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

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

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

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

Patch Changes

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

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

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

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

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

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

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

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

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

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

18.0.0-beta.0

Major Changes

• adb8a18: 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

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

  Use <TagField> instead.

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

  What changed:

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

  Migration:

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

Minor Changes

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

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

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

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

Patch Changes

• 20a42b0: 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.
• de34b15: chore(deps): update react-aria-components, @react-aria/*, @react-stately/*, @react-types/*, and @internationalized/* packages to their latest versions.

17.9.1 (Released on Jul 10, 2026)

17.9.0 (Released on Jul 8, 2026)

17.8.0 (Released on Jun 18, 2026)

17.7.0 (Released on Jun 15, 2026)

17.6.0 (Released on Jun 9, 2026)

Patch Changes

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

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

  --field-width is now registered with inherits: true, restoring the intended parent→child handoff. The same-element layout variables (--width, --max-width, --height, --container-width) keep their non-inheriting leak protection.

  Also clarifies in the prop docs that numeric width values are spacing-scale tokens, not pixels: width={64} resolves to calc(var(--spacing) * 64) ≈ 16rem (256px).

• a289d42: chore(deps): update react-aria

  Bumps the react-aria packages and tailwindcss-react-aria-components (theme-rui).

  Note: following the react-aria update, Switch now toggles with the Space key to match native checkbox behavior. It no longer toggles on Enter.

17.5.1 (Released on May 20, 2026)

Patch Changes

• c65d2a7: fix(DSTSUP-253): make cva results assignable to ComponentStyleFunction under default strict TypeScript. @marigold/system@17.5.0 shipped cva@1.0.0-beta.4, whose narrowed return type stopped satisfying ComponentStyleFunction<Variants, Sizes> once consumers enabled strictFunctionTypes (implied by strict: true). Function-parameter contravariance rejected both the dead variant?: Variants | null slot and the string vs literal-union variant mismatch, breaking every consumer theme that followed the documented cva(...) as ThemeComponent<'Foo'> pattern. ComponentStyleFunction now types variant/size as any — honestly reflecting the runtime contract (useClassNames passes string | undefined, cva falls back to base styles for unknown values) and letting narrower cva returns satisfy the wider theme contract. Variants/Sizes/Additional generics stay for backward source-compatibility. A dedicated type-level regression test (packages/system/src/types/theme.test-d.ts) uses a StrictlyAssignable<Source, Target> conditional-type helper to verify the contract under TypeScript's structural function checking, so this class of bug is caught by the regular pnpm typecheck even though the monorepo's base config keeps strictFunctionTypes: false.

17.5.0 (Released on May 13, 2026)

Minor Changes

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

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

  DST-1134

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

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

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

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

Patch Changes

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

17.4.0

Minor Changes

• f560d95: feat(DST-1239): migrate Inset component to semantic spacing tokens
  • space prop accepts inset recipe tokens (square-*, squish-*, stretch-*) and numeric scale values
  • spaceX/spaceY props accept single-value padding tokens (padding-tight, padding-snug, padding-regular, padding-relaxed, padding-loose) and numeric scale values
  • Add InsetSpacingTokens type for multi-value inset recipes
  • Add PaddingSpacingTokens type for single-value per-axis padding
  • Add --spacing-padding-* CSS custom properties to theme

Patch Changes

• bbf0832: refactor([DSTSUP-245]): Clean up Calendar styles

  Move hardcoded Tailwind classes from Calendar component files into theme slots, reduce cell padding from p-2 to p-1, and add new calendarHeading theme slot.

• d341a9d: Fix CJS export paths pointing to non-existent .js files. Since tsdown 0.16.0, output uses .cjs extensions but main, types, and exports fields were never updated to match.

17.3.1

17.3.0

17.2.1

17.2.0

Minor Changes

• ed928a0: Update ActionBar with enter/exit animations, keyboard support, and built-in Table integration.

  • Add useActionBar hook and ActionBarContext for managing selection state between ActionBar and Table
  • Add actionBar render prop to Table for automatic selection wiring and ActionBar positioning
  • Add enter/exit animations using motion/react and react-aria useEnterAnimation/useExitAnimation
  • Add Escape key support to clear selection via FocusScope and useKeyboard
  • Add screen reader announcement when ActionBar appears
  • Add localized selectedCount/selectedAll messages (en-US, de-DE)
  • Update ActionBar theme slots: rename actions to toolbar, add selection slot
  • Update theme type definition to match new slot names

• b115fda: Migrate from class-variance-authority to cva and simplify extendTheme via function composition.

  • Replace class-variance-authority dependency with cva (v1 beta), which has built-in Tailwind merge support via defineConfig
  • Refactor the custom cva wrapper to use cva's defineConfig with a twMerge hook, storing variant configs in a WeakMap (for docs introspection) instead of a .variants property
  • Simplify extendTheme to compose style functions directly (cn(existingFn(props), newFn(props))) instead of extracting and merging variant configs — this preserves defaultVariants and compoundVariants that were previously lost during merging
  • Update all theme style files in theme-rui to the new cva API (object config with base/variants/compoundVariants keys)

• 61bfc60: Refactor relational spacing scale for better semantic clarity and visual rhythm.

  • Rename --spacing-peer token to --spacing-regular
  • Remove unused --spacing-joined and --spacing-context tokens
  • Adjust spacing scale values: tight (4px→6px), regular (16px→24px), group (32px→48px), section (64px→96px)
  • Move field-internal spacing from theme (Field.styles space-y-2) into component implementations using new in-field custom variant
  • Add in-field:mb-1.5 to Label and in-field:mt-1 to HelpText for consistent field layout
  • Update SpacingTokens type to reflect new scale

• c3bf8e4: feat([DST-1168]): Introduce TopNavigation Component

  • Three-slot grid layout (Start, Middle, End) using compound component pattern
  • Semantic HTML with <header> container and <nav> landmarks
  • Sticky by default, configurable alignment, and i18n ARIA labels
  • Theme styles for theme-rui and type definitions in @marigold/system

Patch Changes

• 91eb222: Update ActionBar styling with surface contrast and dedicated button slot.

  • Apply ui-surface-contrast utility to ActionBar container for adaptive theming
  • Add button slot to ActionBar theme for properly styled action buttons (replaces Button.ghost)
  • Add clearButton hover/focus/disabled styles using theme-aware utilities
  • Update ActionButton to use ActionBar.button classNames instead of Button.ghost
  • Replace CloseButton with IconButton for the clear selection button
  • Update stories to use lucide-react icons directly

• cf56729: Add explicit types condition to package exports for reliable type resolution.

• 7ca2eb1: feat([DST-1227]): 💄 Implement Animated Transitions for Tabs Component, The active tab underline must slide smoothly between items

• beebd7c: Improve ListBox and Menu usability on mobile screens (DST-1210).

  • Align useSmallScreen hook with Tailwind's sm breakpoint by deriving the value from defaultTheme.screens.sm using CSS Media Queries Level 4 range syntax (width < 640px)
  • Add max-sm:min-h-11 (44px) to ListBox and Menu items for WCAG 2.1 touch targets on mobile
  • Replace min-[600px]: with sm: in Table editable cell styles for breakpoint consistency
  • Refactor useSmallScreen to use MediaQueryList.addEventListener('change') instead of window.resize
  • Extract shared mockMatchMedia test helper into test.utils

• d963df2: chore: Update React Aria to newest version

17.1.0

Minor Changes

• fd1b092: feat(DST-1219): Improve click area of <TagField>

  Improves the click area of the TagField component so that clicking anywhere on the field (not just the chevron button) opens the dropdown.

17.0.1

17.0.0

Minor Changes

• 0c00d1d: ## 🎨 Changes

  1. Refactored Surface Styling

  What changed:

  • Completely refactored the surface styling system to use background-clip and background-origin for gradient borders
  • Improved contrast and depth across all surface-based components (inputs, cards, dialogs, etc.)
  • DateInput: Added new input part for styling

  Technical Details:

  • New ui-surface utility class that works on single elements including <input>
  • Gradient borders transition from lighter (top) to darker (bottom) for improved depth perception
  • Removed deprecated utilities: util-focus-*, util-disabled
  • Introduced new state utilities: ui-state-focus, ui-state-disabled, ui-state-error, ui-state-readonly
  • New elevation system: ui-elevation-raised, ui-elevation-overlay

  2. Semantic Spacing System (DST-1001)

  New Relational Spacing Scale: Introduced semantic tokens that describe the strength of relationships between elements:

  • joined (0.25rem) - Elements attached as a single unit
  • tight (1rem) - Packed containers for high-density scanning
  • related (2rem) - Minimal separation for related pairs (label + input)
  • peer (4rem) - Self-contained equals in the same flow
  • group (8rem) - Logical separation between content zones
  • section (16rem) - Distinct layout sections
  • context (32rem) - Complete contextual shift

  New Inset (Padding) Scale:

  • tight, snug, regular, relaxed, loose - with square, squish, and stretch variants
  • Example: --spacing-squish-regular, --spacing-stretch-relaxed

  Benefits:

  • Decouples intent from pixel values
  • Consistent rhythm across the interface
  • Improved scannability and hierarchy
  • Reduced reliance on explicit containers (cards/borders)

  3. Component Improvements

  FileField:

  • Removed hardcoded unchangeable styles
  • Better grid-based layout for file items
  • Added itemRemove part for styling
  • Proper internationalization for remove button

  DatePicker:

  • Fixed dropdown sizing - now fits content instead of input width
  • Improved calendar popover positioning

  Select & Input Components:

  • Simplified container structure
  • Better icon and action placement
  • Improved accessibility with proper ARIA attributes

  Dialog & Overlay Components:

  • Consistent elevation styling
  • Better scrollbar styling
  • Improved focus management

  📝 Documentation

  • New Spacing Guide: Comprehensive documentation explaining the semantic spacing system
  • Added visual examples for relational and inset spacing
  • Guidance on implicit vs. explicit grouping
  • Updated all example forms and patterns to use new spacing tokens

  🔧 Technical Improvements

  • Replaced deprecated data attributes with proper CSS selectors
  • Better TypeScript typing for spacing tokens
  • Improved theme component definitions
  • Cleaner CSS with reduced specificity
  • Better support for different component states (disabled, readonly, error, focus)

  📊 Statistics

  • 118 files changed
  • 1,677 insertions, 690 deletions
  • Components affected: TextArea, Input, DateField, FileField, Select, Calendar, Card, Dialog, Menu, Toast, and many more

  ⚠️ Migration Notes

  Spacing Values

  // Before
  <Stack space="fieldY">
  <Inline space="fieldX">
  
  // After
  <Stack space="peer">
  <Inline space="related">

  Surface Styling

  /* Before */
  .util-surface-raised
  
  /* After */
  .ui-surface /* uses raised elevation by default */
  .ui-surface.ui-elevation-overlay /* for overlays */

Patch Changes

• 01e6bdb: [DST-1157]: introduce new <ActionBar> alpha component
• 5a90757: feat(DSTSUP-225): Introduce <ToggleButton> and <ToggleButtonGroup> as alpha components
• 8dd0455: feat([DSTSUP-222]): Introduce <EmptyState> Component as beta
• 8a70185: refa(DST-974): Refactoring width property on FieldBase and Form Elements like Input, TextArea, DateInput and Select. Labels and HelpText can now be wider as the actual input field.

16.1.0

Minor Changes

• c5bd98b: feat(DST-1136): Make clear that "stretch" is the default for <Stack>

Patch Changes

• 89acee4: feat: Add a generic spacing scale that can be used with createSpacingVar
• 4ac589b: refa(DST-1130): Use CSS var instead of map for spacing in <Stack>

16.0.1

16.0.0

Major Changes

• b947276: style(DST-1089): Add expand/collapse animation to <Accordion>

• f10119a: refa(DST-1109): Remove required indicator from the label's text content

  BREACKING CHANGE: We removed the indicator styling from <Label>. The component is no longer a multi-part component. Rather than styling the required indicator through a dedicated part (previsouly indicator), you can now apply it anyway you want, for example by using 'group-required/field:after:content-["*"]'.

Minor Changes

• 98bf929: [DST-1075]: Introduce <FileField>component

Patch Changes

• 4eebff4: [DSTSUP-191]: Breaking chnge: <XLoader /> renamed to <Loader /> Added a new prop loaderType which is by default cycle. New option cycle shows a spinning cycle.

15.4.3

15.4.2

15.4.1

15.4.0

Patch Changes

• f621653: feat([DSTSUP-187]): Enhance Toast component with action support

  • Introduced action property
  • Update description to support JSX

• 77e0417: fix([DST-1078]): Fix scrolling within <ContextualHelp>

• Updated dependencies [e985fe2]

  • @marigold/types@1.4.0

15.3.0

Minor Changes

• 97adc14: feat([DST-1061]): Add more alignment options to <Inline>, <Stack> and <Grid>
• 4ccbec2: feat([DST-1077]): Add white space control to <Text>

15.2.0

15.1.0

Minor Changes

• a3ddf47: feat([DST-1037]): Add description (help text) to <Checkbox> component
• 0583b77: feat([DST-1039]): Allow <Text> to not wrap lines

15.0.2

15.0.1

Patch Changes

• 00d230a: chore: allow react-aria patch version range as dependencies

15.0.0

Major Changes

• 62ac4b8: refa([DST-919]): Remove <Image> component

  Breaking Change

  The <Image> component has been removed from Marigold. Please replace it with the native <img> element.

  If you previously used the fit or position props, you can replicate the same behavior using the corresponding Tailwind CSS utility classes.

  Replacement table

  Prop type	Prop value	Tailwind class
  fit	contain	object-contain
  	cover	object-cover
  	fill	object-fill
  	none	unset
  	scaleDown	object-scale-down
  position	none	— (no class)
  	bottom	object-bottom
  	center	object-center
  	left	object-left
  	leftBottom	object-left-bottom
  	leftTop	object-left-top
  	right	object-right
  	rightBottom	object-right-bottom
  	rightTop	object-right-top
  	top	object-top

Minor Changes

• 2a64b4f: feat([DST-1008]): Introduce a "remove all" function for <Tag.Group>
• 82370d2: feat([DST-1004]): Format ranges with DateFormat

Patch Changes

• 80a4427: fix: remove deprecated components from theme type

14.1.1

Patch Changes

• 81f1c9d: fix broken release
• Updated dependencies [81f1c9d]
  • @marigold/types@1.3.2

14.1.0

Minor Changes

• cc493fc: feat([DST-737]): Add Toast component

  Added ToastProvider Component with corresponding documentation and stories. It's a small Temporary Notification on the edge of the screen, that should be used for messages that don’t need immediate interaction.

• 2163518: feat([DST-899]):Breadcrumb Component

  We added a new Breadcrumbs component to improve navigation and accessibility in the UI. It supports collapsing long breadcrumb lists, custom separators (chevron or slash), and integrates with react-aria-components for full accessibility and keyboard navigation. The component is flexible, supports links and custom content, and includes comprehensive documentation and usage examples.

Patch Changes

• 930e633: chore: Update react-aria (Release 22/07/2025)

14.0.0

13.0.0

Major Changes

• d224a2f: style([DST-721]): Breaking Changes: Deprecate B2B and Core themes
  • @marigold/theme-b2b and @marigold/theme-core are now deprecated and will no longer receive updates or maintenance. Please migrate to RUI theme package.
  • The FieldGroup component has been removed and is no longer available in @marigold/components.
  • All documentation and Storybook references to the B2B and Core themes, as well as FieldGroup, have been removed.
  • If you are using either of these themes , please update your project to our lates release.

12.0.5

Patch Changes

• a6bcd89: chore(deps): update react-aria

12.0.4

Patch Changes

• 6c230c7: feat[DST-731]: Add ContextualHelp Component with Docs We added a new ContextualHelp component to provide inline help and guidance within the UI. It displays contextual information in a popover triggered by an icon button, with configurable placement, size, and icon variant (help or info). The component is accessible, supports both controlled and uncontrolled open states, and is designed for flexible content layout.

12.0.3

Patch Changes

• 12b00ed: feat[DST-856]: Add TimeField Component

  We added a new TimeField component to support time-based user input. It allows users to select and edit time values, with configurable granularity (hours, minutes, seconds) and optional 12/24-hour format. The component supports accessibility features like keyboard navigation.

12.0.2

Patch Changes

• 0bca5d8: Update React aria components
• ca26659: refa([DST-715]): Refactor <Calendar> component, Fix resizing when open calendar listboxes
• Updated dependencies [0bca5d8]
  • @marigold/types@1.3.1

12.0.1

Patch Changes

• 0e8211b: chore([DST-853]): Refa styles for <Menu> button

12.0.0

Minor Changes

• 438b959: feat([DSTSUP-112]): Add sizes to RUI's <Dialog>
• fe4b9de: feat([DST-801]): Allow to format ranges with <NumericFormat>

Patch Changes

• 4e0971e: Extend useClassNames to automatically pick up styles from context.

11.5.0

Minor Changes

• c9b95bc: feat([DST-799]): Add unstyled and maxWidth to <Form>

Patch Changes

• 8dab2e6: chore: update react-aria (April 2025 release)
• 2a87f43: feat[DST-759]: Implement <CloseButton> component to be re-used into other components internally (e.g Dialog, Tag, Drawer and SectionMessage).

11.4.1

Patch Changes

• 81b2216: refa([DST-720]): Rename option to item in styles for <ListBox>

  Breaking Change: This change will break your styles if you use custom styles for the <ListBox> Component. option is now called item.

• 953cf3d: Making the dialog titles independant

11.4.0

11.3.0

Minor Changes

• 611c2e8: feat(733): Introduce a <Drawer> component

11.2.3

Patch Changes

• 3d1f8c6: feat(rui): Next version of RUI theme with small updates and styling fixes.

11.2.2

Patch Changes

• 91c72e8: feat[DST-606]: Implement <MultiSelect> component

  Introcude <MultiSelect> as component!

11.2.1

11.2.0

Minor Changes

• c387b43: feat: allow React >=17.0.0

Patch Changes

• c387b43: feat: allow React >=17.0.0
• a31881d: fix(DST-696): Make it possible to only pass in the color name without a prefix
• Updated dependencies [c387b43]
• Updated dependencies [c387b43]
  • @marigold/types@1.3.0

11.1.1

Patch Changes

• be665e7: fix(DST-691): Fix regression, allow to use custom color values with <Text>, <Headline> and <SVG>

11.1.0

Minor Changes

• fd96b48: feat(DST-689): Allow to style body element and header row of a <Table>

11.0.2

11.0.1

11.0.0

Major Changes

• 964e025: refa([DST-665]): Refactoring Accordion

  Added two Accordion components Accordion.Header and Accordion.Content. Accordion.Header replaces the title in Accordion.Item. Accordion.Content is now the place where the content needs to be.

  Reworked the Accordion Documentation Page.

10.2.1

10.2.0

10.1.3

Patch Changes

• Updated dependencies [8b7be8e]
  • @marigold/types@1.2.1

10.1.2

10.1.1

Patch Changes

• 85e8cba: feat(DST-608): Make <XLoader> accessible and update documentation
  • Refactored the <XLoader> component to be more accessible
  • Updated the <XLoader> documentation page
  • Adjusted styling to fit regular underlay styles when using "fullsize" mode

10.1.0

Patch Changes

• ebc53cb: refa[DST-598]: Improve <Slider> component

  The <Slider> component appears in a new guise. Functionalities and documentation have been significantly revised. So make sure to check out the Marigold documentation and storybook. It's worth it.

  Some key features are:

  • multithumb or range slider
  • visual indicator for selected track
  • use slider in forms

10.0.0

Major Changes

• caefbe4: refa(listbox): Allow sections in <Combobox> and <Autocomplete>, adjust Section API in <Select>, <Combobox> and <Autocomplete>.

  • Added the possibility to use sections with <Combobox> and <Autocomplete>

  • Refactored the <Section> (from <Listbox>) to fit our API, no need for the extra <Header> anymore. Instead you can do <Select.Section header="My header">, same for the other components

  • Renamed <Item> to <Option> in <Combobox> and <Autocomplete> to align with <Select>

  • Updated the docs for <Select>, <Combobox> and <Autocomplete>

  • Updated Storybook for <Select>, <Combobox> and <Autocomplete> with section stories

  • Renamed the part of the <ListBox> accordingly (from sectionTitle to header)

    BREAKING CHANGE: We changed the API of the <Section> component that is used in <Select>, <Combobox> and <Autocomplete>. It is no longer necessary to add a Header within the <Section>.

    Use the newly added header prop instead. Additionally, to unify the APIs all choices of <Select>, <Combobox> and <Autocomplete> are now called <Option> instead of <Item>.

Minor Changes

• 6687af7: refa: remove footer from <Dialog> + allow styles
  • dialogs can only have action now
  • align buttons in <Dialog.Actions> correctly

Patch Changes

• 45fb3c4: chore(deps): update react-aria to 1.4
• Updated dependencies [2babc0b]
• Updated dependencies [956982a]
  • @marigold/types@1.2.0

9.0.2

9.0.1

9.0.0

8.0.2

8.0.1

Patch Changes

• #3979 a02f284 Thanks @sarahgm! - Fix: fix some props and add command to build step

8.0.0

Major Changes

• #3967 0773aa8 Thanks @sebald! - refa: Update TypeScript and adjust <NumericFormat> props

Minor Changes

• #3942 5977cba Thanks @OsamaAbdellateef! - Keep our documentation props table dynamic

Patch Changes

• #3939 2cde433 Thanks @sarahgm! - feat[DST-481]: rename <Message> in <SectionMessage>

• #3941 3f7a4ec Thanks @sarahgm! - [DSTSUP-78]fix: fix extendTheme function

• Updated dependencies [0773aa8]:

  • @marigold/types@1.1.1

7.8.2

7.8.1

7.8.0

Minor Changes

• #3913 8c4631f Thanks @sebald! - feat: Introduce Grid component

7.7.2

7.7.1

7.7.0

Patch Changes

• #3885 72ece08 Thanks @sebald! - fix: getColor correctly works with deeply nested values

• #3880 4a59427 Thanks @sebald! - chore: cleanup peerdeeps

7.6.0

7.5.4

7.5.3

7.5.2

7.5.1

Patch Changes

• #3809 fba5e92 Thanks @OsamaAbdellateef! - Preventing to override our theme variants in extendTheme

7.5.0

Minor Changes

• #3748 5643257 Thanks @OsamaAbdellateef! - Adding the option to customize marigold components using extendTheme function"

Patch Changes

• #3785 07d9277 Thanks @aromko! - chore: added missing half space tokens. See tailwind.

7.4.0

Patch Changes

• #3720 4d2f94f Thanks @sarahgm! - fix[DSTSUP-41]: Combobox styles for icon

7.3.3

7.3.2

7.3.1

Patch Changes

• #3676 63d407e Thanks @sebald! - feat: use size- util (also fixes linting)

7.3.0

Minor Changes

• #3644 b4999d8 Thanks @sebald! - feat: getColor util

7.2.0

Minor Changes

• #3596 9f1ae32 Thanks @OsamaAbdellateef! - Added new Helpers components NumericFormat & DateFormat

Patch Changes

• #3517 7a8d40a Thanks @sarahgm! - chore[DST-220]: seperate data-theme attribute and classnames on provider (so you don't need any data-theme attribute anymore)

7.1.0

Patch Changes

• #3557 47f300029 Thanks @aromko! - [DSTSUP-5]: Bugfix: Loss of input values after collapsing accordion elements is now prevented by hiding the corresponding section.

• #3548 535d1088b Thanks @aromko! - [DST-254]: use new tokens in core theme

7.0.0

Patch Changes

• #3540 72125e114 Thanks @aromko! - RAC: migrate <Calendar>, <DatePicker>, <DateField> component

6.11.0

Patch Changes

• #3513 cdc17ee83 Thanks @aromko! - RAC: migrate <TagGroup> component

6.10.0

Minor Changes

• #3501 14f5d5d30 Thanks @OsamaAbdellateef! - Migrate Tabs to RAC Tabs

6.9.1

6.9.0

6.8.0

6.7.0

6.6.4

6.6.3

6.6.2

6.6.1

6.6.0

Minor Changes

• #3416 7704debbe Thanks @OsamaAbdellateef! - [DST-38]: Implement mobile optimization for DatePicker

6.5.1

6.5.0

6.4.0

Minor Changes

• #3429 3e328198c Thanks @sebald! - feat: adjust <SliderOutput> position

• #3424 5a2a03ae0 Thanks @sebald! - feat: add styles to checkbox and radio groups

Patch Changes

• Updated dependencies [e5869b2f3]:
  • @marigold/types@1.1.0

6.3.1

6.3.0

6.2.6

6.2.5

6.2.4

6.2.3

6.2.2

6.2.1

6.2.0

6.1.0

Minor Changes

• #3250 989f094e7 Thanks @OsamaAbdellateef! - [DST-111]: enhance styling tabs

Patch Changes

• #3297 566ec30e4 Thanks @sarahgm! - chore[DST-143]: rename token name

• #3295 8a4ef1805 Thanks @sarahgm! - chore[DST-145]:update fontsize

6.0.1

Patch Changes

• #3232 fd10c294a Thanks @OsamaAbdellateef! - [DST-65]: Spacing of Popover can me customized based on themes

6.0.0

Major Changes

• #3117 79be927e6 Thanks @sebald! - Switch @marigold/styles to Tailwind CSS, replaces Emotion CSS & Theme-UI

5.6.0

5.5.0 (Released on Jul 8, 2026)

5.4.0 (Released on Jun 15, 2026)

Patch Changes

• Updated dependencies [b3d577339, 8972cbaca]:
  • @marigold/types@1.0.1

5.3.0 (Released on May 13, 2026)

Minor Changes

• #2826 aaf6b55c6 Thanks @sarahgm! - refa: Improved <Input> with icons/actions

• #2845 80cdbe062 Thanks @sebald! - refa: <SVG> css prop can overrde size (height/width)

5.2.0

Minor Changes

• #2806 f11e2d7db Thanks @sebald! - feat: expose keyframes helper

5.1.0

Patch Changes

• #2773 6d7d6f621 Thanks @sebald! - fix: <Global> selector prop applies styles from body

5.0.0

Major Changes

• #2764 1ff29cc0c Thanks @sebald! - refa: fix polymorph types + remove style props from <Box>

  BREAKING CHANGE:

  We deprecated the available short hands for styling on the <Box> component (also known as style props), for example <Box p="small">. This way it is more clear what to use when ->always thecss` prop.

  How to update your code: Basically move all style props to the css prop. E.g. <Box p="small" bg="primary"> becomes <Box css={{ p: "small, bg; "primary" }}>.

Patch Changes

• Updated dependencies [1ff29cc0c, 0f539b788]:
  • @marigold/types@1.0.0

4.2.2

4.2.1

4.2.0

4.1.5

Patch Changes

• Updated dependencies [832da2a6]:
  • @marigold/types@0.5.7

4.1.4

4.1.3

4.1.2

Patch Changes

• #2659 de5df9b6 Thanks @sarahgm! - fix: icon size in button

4.1.1

4.1.0

Patch Changes

• #2628 312a23cf Thanks @renovate! - chore(deps): update dependency @theme-ui/css to v0.15.4

• #2627 d250fc00 Thanks @renovate! - chore(deps): update babel monorepo

• Updated dependencies [080b1fed]:

  • @marigold/types@0.5.6

4.0.0

Patch Changes

• #2591 be3f2060 Thanks @renovate! - chore(deps): update dependency @babel/core to v7.19.6

• #2609 4554b26e Thanks @renovate! - chore(deps): update dependency @emotion/react to v11.10.5

• Updated dependencies [f38ae20a]:

  • @marigold/types@0.5.5

3.0.6

Patch Changes

• #2593 d8fc387d Thanks @renovate! - chore(deps): update dependency csstype to v3.1.1

3.0.5

3.0.4

3.0.3

3.0.2

Patch Changes

• #2545 e65171c6 Thanks @renovate! - chore(deps): update dependency @babel/core to v7.19.3

• #2551 d9974f91 Thanks @sarahgm! - chore: improve core theme

3.0.1

Patch Changes

• Updated dependencies [4af6c016, eb7e453c]:
  • @marigold/types@0.5.4

3.0.0

Patch Changes

• #2478 a795f29a Thanks @sebald! - feat: improve &:hover selector to adhere CSS specificity

2.2.0

Minor Changes

• #2411 a4ccb92f Thanks @sebald! - feat: css props supports array (again) + padding props for <Card>

Patch Changes

• #2416 f76f4870 Thanks @sebald! - fix: correctly interpret design tokens in <SVG>

• #2437 23a78264 Thanks @renovate! - chore(deps): update testing (major)

• Updated dependencies [75128374]:

  • @marigold/types@0.5.3

2.1.3

Patch Changes

• #2391 d3143f65 Thanks @sebald! - fix: remove responsivness from SVGs by default

• #2400 f6b49c37 Thanks @sarahgm! - refa: improve useResponsiveStyle and add story

2.1.2

2.1.1

2.1.0

2.0.0

Minor Changes

• #2247 8e9ea3da Thanks @sebald! - feat: improve theme type

Patch Changes

• #2273 4c63400f Thanks @renovate! - chore(deps): update dependency @emotion/react to v11.10.0

• #2265 88a3d4b0 Thanks @renovate! - chore(deps): update dependency @babel/core to v7.18.10

1.3.0

Patch Changes

• #2221 c60f8527 Thanks @renovate! - chore(deps): update dependency @babel/core to v7.18.9

1.2.2

1.2.1

Patch Changes

• #2164 b43464fc Thanks @sarahgm! - refa: update to React 18

• Updated dependencies [b43464fc]:

  • @marigold/types@0.5.2

1.2.0

Minor Changes

• #2144 82c376a9 Thanks @sebald! - feat: Improve usage of Marigold when not used as a full page app

1.1.1

1.1.0

1.0.1

Patch Changes

• #2102 23c1a5ce Thanks @sebald! - feat: Remove all occurances of React.FC

• Updated dependencies [23c1a5ce, bfa0caea]:

  • @marigold/types@0.5.1

1.0.0

Major Changes

• #2074 3aa2c100 Thanks @sebald! - refa: Remove "variant" prop from <Box>, use useComponentStyles instead

Minor Changes

• #2041 02d13e84 Thanks @sebald! - feat: Support for :focus-visible and :selected pseudos

• #2048 2ab80ae6 Thanks @sebald! - refa: <Select>

• #2063 f5128944 Thanks @sebald! - feat: Add shorthands for group selectors

• #2056 3abbc813 Thanks @sebald! - feat: Introduce <NumberFields>

Patch Changes

• Updated dependencies [02d13e84]:
  • @marigold/types@0.5.0

1.0.0-beta.0

Minor Changes

• #2041 02d13e84 Thanks @sebald! - feat: Support for :focus-visible and :selected pseudos

• #2048 2ab80ae6 Thanks @sebald! - refa: <Select>

• #2063 f5128944 Thanks @sebald! - feat: Add shorthands for group selectors

• #2056 3abbc813 Thanks @sebald! - feat: Introduce <NumberFields>

Patch Changes

• Updated dependencies [02d13e84]:
  • @marigold/types@0.5.0-beta.0

0.9.0

Patch Changes

• #1979 424f1705 Thanks @sebald! - feat: transform state to corresponding css selector and data-attr

• #1972 dbc55934 Thanks @sebald! - feat: introduce useComponentStyles hook

• #1994 3dff2282 Thanks @sarahgm! - Refa: card-styles-structur

• #1988 7c1129dc Thanks @sarahgm! - refa: Field Component restructure

• Updated dependencies [7c1129dc]:

  • @marigold/types@0.4.1

0.8.0

Minor Changes

• #1935 382ac6cc Thanks @ti10le! - feat(comp): improve SVG to handle width and height prop

• #1915 2f45aa5d Thanks @sebald! - feat(system): theme getter

• #1919 5319745c Thanks @sebald! - feat: SVG supports size token from theme

0.7.0

0.6.0

Minor Changes

• #1817 4cc0ad3b Thanks @sebald! - feat(system): Add textSizeAdjust to globals

• #1842 e053b7b9 Thanks @ti10le! - feat: extend svg fill prop to handle theme color

Patch Changes

• #1809 539d4198 Thanks @sebald! - feat(create-theme): Introduce helper package to create themes with sensible defaults

0.5.1

Patch Changes

• #1795 a178eafe Thanks @ti10le! - refa: use interface instead of type

0.5.0

Minor Changes

• #1723 5936de75 Thanks @sebald! - feat(system): add hook that allows to use values based on screen size

0.4.0 (Released on Jul 8, 2026)

Minor Changes

• f9526234 Thanks @sebald! - chore: Use tsup to build packages

• f9526234 Thanks @sebald! - Improved size in node_modules

Patch Changes

• Updated dependencies [f9526234]:
  • @marigold/types@0.4.0

0.3.1

Patch Changes

• #1676 379041bc Thanks @ti10le! - remove the last mdx stories

0.3.0 (Released on Jun 18, 2026)

Minor Changes

• #1163 51af6693 Thanks @sebald! - feat(system): Expose helper to transpile style object

Patch Changes

• #1549 c030aa85 Thanks @sebald! - refa: use emotion's theme function in <Element>

• #1515 8eda245f Thanks @sebald! - feat: add normalization for body and html & fix emotion leak

• #1491 5a04de11 Thanks @ti10le! - remove useStyles from Element

• #1440 c1da52c0 Thanks @ti10le! - feature: use Element in Box + necessary fix changes

• #1591 1448ddca Thanks @sebald! - feat(jest): Improve snapshot readability

• #1514 5107b943 Thanks @sebald! - feat(system): Use emotion's context

• #1647 cd3a0d3e Thanks @ti10le! - feat: conditional function to allow state props in variants

• #1230 ebd6e26f Thanks @viktoria-schwarz! - feat: add GlobalStyles via theme

• #1563 6e485f5a Thanks @sebald! - feat: Introduce a Theme with all available scales

• #1620 80a2abe5 Thanks @ti10le! - feat(comp): extend Box to handle __default variants

• #1579 e13e3cc1 Thanks @ti10le! - feat: remove Heading from marigold

• #1622 1829cf17 Thanks @ti10le! - feat(comp): change Card default variant

• #1501 1c1f8648 Thanks @ti10le! - feat(storybook): remove use styles stories

• #1190 a00b7eb9 Thanks @sebald! - fix(system): List reset should not remove the enumeration

• #1499 ec5baf85 Thanks @sebald! - feat: Update and simplify normalization

• #1652 0bb8f19e Thanks @sebald! - refa(system): Groupt variant related fns in own file

• #1436 c4ae5c5c Thanks @ti10le! - create Element component + normalize file

• #1508 a1ef2108 Thanks @sebald! - feat: Add default styling to <Element>

• #1621 2f7b936f Thanks @ti10le! - feat(comp): change Badge default variant

• #1550 846eb640 Thanks @sebald! - feat: Merge <Box> and <Element>

• #1614 5d63cd9c Thanks @ti10le! - remove all purple color things