@marigold/system
18.0.0-beta.3
Minor Changes
-
141a2cc: feat(DST-1373): adopt the slot-configuration pattern in
CardCard.Headeris 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>(noCard.Headerwrapper) is also picked up by the root, so title-only cards can skip the header and still get the right padding andaria-labelledbywiring.<Card>itself now renders an<article>landmark and is automatically labelled by its<Title>viaaria-labelledby, or by an explicitaria-label. A newheadingLevelprop (default3) controls the underlying heading tag for the document outline.The theme
Cardslot map gainstitleanddescriptionentries — the typography previously carried on theheaderslot has moved totitle. Variant text color now flows through a new--card-accentCSS custom property, somasterandadmincards pick up the matching accent automatically. Raw<Stack>/<Headline>composition insideCard.Headerstill 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 itemsConsumer-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-describedbywiring, and accessibility are identical.<Menu.Item>gains first-classlabelanddescriptiontheme slots, mirroring<SelectList.Option>.MenuItemmerges the Marigold theme classNames into RAC'sTextContextso 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
Menutheme type in@marigold/systemis extended with requiredlabelanddescriptionslot keys. Consumers maintaining a custom theme that overridesMenuwill need to add these two slots to satisfy the type.@marigold/theme-ruiis updated accordingly in this release.No public API change on
Select.Option,SelectList.Option,ListBox.Item,Menu.Item,ComboBox.Option, orAutocomplete.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 withslot={null}.<ActionGroup>is renamed to<ButtonGroup>, mirroring the existingToggleButtonGroup → ToggleButtonContext → ToggleButtontrio.- A single Marigold-owned
ButtonContextdrives the cascade (replacesActionButtonContext+ActionGroupContext). RAC's ownButtonContext(close/increment/decrementslots) is untouched. - Uniform precedence: a local prop (
variant,size,disabled) always wins over the container. This drops the formerActionGroupsize-group-wins outlier. <ButtonGroup>cascadesvariant: 'secondary'when unset, the same baseline as a standalone<Button>. Slot-aware parents override it where they want lower emphasis:<Panel.Header>cascadesvariant: 'ghost'+size: 'small', so a labelled header action stays readable. An icon-only action (a bare-icon<Button>, an<ActionMenu>kebab) setssize="icon"to render as a square.<ButtonGroup>now owns a structuralflex gap-1layout (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) resetButtonContextat their content root, so a header/group cascade can't leak through the portal into an overlay'sslot="close"orDialog.Actionsbuttons. <SelectList.Option>cascadesvariant: 'ghost'to a nested<Button>,<LinkButton>, or<ActionMenu>, so a trailing in-row action reads as low-emphasis chrome without an explicitvariant.
Migration
<ActionButton>→<Button>(itsdefaultvariant maps tovariant="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 renderssecondaryon its own (the standalone<Button>baseline, matching the pre-unification look) andghostinside<Panel.Header>,<SelectList.Option>, or a<ButtonGroup>. Avariantset on the<ActionMenu>still wins.
-
334688e: chore(DST-1364): migrate
ListBoxitem label/description styling off descendant selectorsListBoxnow exposeslabelanddescriptionas first-class theme entries, andListBox.Iteminjects their classNames into react-aria'sTextContext(merging rather than replacing, so RAC'saria-describedbywiring is preserved) instead of styling[slot=description]via a descendant selector onitem. This also benefitsSelect.Option,ComboBox.Option, andAutocomplete.Option, which re-exportListBox.Item.The
Themetype in@marigold/systemnow requireslabelanddescriptionkeys on theListBoxrecord, so custom themes implementingListBoxmust add these entries. No public API change in@marigold/components; visually identical exceptdescriptionnow explicitly setsfont-normal(parity withSelectList).
18.0.0-beta.2
Minor Changes
-
9a407ef: feat([DST-753]):
SectionMessageexposes anannounceprop and uses react-aria'sLiveAnnouncerto notify assistive technology.What changed (DST-753):
<SectionMessage>accepts a newannounce?: booleanprop. When set, the message text is sent to a shared, always-mounted live region maintained by@react-aria/live-announcer. Priority ispoliteforinfo/success/warningandassertiveforerror.announcedefaults totrueforvariant="error"andfalsefor 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
keypattern: pass a changingkeyto force a remount.
Why:
The previous implementation only announced the
errorvariant, and it did so by addingrole="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'sSectionMessageviolated 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 inlinerole="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
closeslot forSectionMessagewith 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. Thecloseslot has been removed from theSectionMessagetheme type. - Component cleanup. Dropped a stale
useButton(props, buttonRef)call that was applying div-level props to a button, the unusedbuttonRef, and the{...buttonProps}spread on<CloseButton>. TheButtoninsideCloseButtonalready provides all keyboard/press semantics. - Theme variant order normalized.
info(the default) is now listed first across thecontainer,content, andiconslots intheme-rui, matching the variant table in the docs and the existingdefaultVariantssetting.
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
validateand thekeyre-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-messagespattern doc.
Migration:
- Code relying on
getByRole('alert')or[role="alert"]selectors to find renderedSectionMessageerror 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.closeslot will now see a type error. Remove the slot. Close button styling now flows entirely from theCloseButtontheme. - 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 viavisibleDuration, stacking vertically below thesmbreakpoint; the same responsive stacking now applies to multi-month<Calendar>for parity.descriptionanderrorMessageroute 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. -
4742e8e: feat([DST-901]): styleProps for
width,maxWidth,height,space,spaceX,spaceY,pr,pl,pt,pbnow 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, andheightvia 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-widthand--field-widthalready used byFieldBase— are registered as non-inheriting (@property … inherits: false) in the RUI theme so they cannot leak into descendants.createWidthVargained support for the previously missing keywords (svh,lvh,dvh,px,container), and a newcreateHeightVarhelper 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,paddingBottomare 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'sHeadingContext/TextContextdirectly; action slots use Marigold-owned contexts (ActionButtonContext,ActionGroupContext,ActionMenuContext) consumed viauseContextProps.Titlewraps RAC's<Heading>withslot="title"andlevel={2}as defaults, both overridable byHeadingContext. Thelevelprecedence 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.DescriptionandTextValueforward straight to RAC's<Text>withslot="description"andslot="label"defaults respectively, letting<Text>consumeTextContexton its own. None of the three carry typography props. Styling cascades from the surrounding container (or selection item) viaHeadingContext/TextContext. Consumers drop these into containers without anyslotwiring. The container provides level, layout (e.g. a grid area), size, variant, color, and any other styling through a singleProvider.ActionGroupis its own top-level component (own folder, own docs page, own Storybook entry) — there is noActionButton.Groupcompound. It cascadessize,variant, anddisabledto nested<ActionButton>,<LinkButton>, and<ActionMenu>triggers viaActionGroupContext, 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. Writingdisabled={false}on a child re-enables it inside an otherwise-disabled group.
ActionMenuis rebuilt to compose its ownMenuTrigger+<ActionButton>+Popover/Tray+ RACMenurather than delegating to Marigold'sMenu. The trigger uses<ActionButton>so an outerActionButtonContextcascades to it. Marigold'sMenuis untouched.LinkButtonis now slot-aware: it picks upActionButtonContextandActionGroupContextso a navigating action can sit alongside<ActionButton>inside an<ActionGroup>and inherit the same cascade. Adestructive-ghostvariant is added to match<ActionButton>. Context is consumed read-only (viauseSlottedContext) to sidestep the anchor/button ref-type mismatch thatuseContextPropswould have created. The read-only consumption now also absorbsclassNamefromActionButtonContext(mirroring<ActionButton>'suseContextProps-driven className merge) so positional classes published by a parent container — e.g. a grid-area class injected viaActionButtonContext— 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
classNameflows through slot contexts and is absorbed at the first layout boundary.<ActionGroup>enforces the convention at its own boundary by scrubbingActionButtonContextfor 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 viaActionGroupContext, which they read independently. This convention scales to every future container that adopts the slot-configuration pattern.<ActionBar>'s legacy top-levelActionButtonslot is internalized and re-exposed asActionBar.Button. Existing consumers that already use<ActionBar.Button>are unaffected.Typography prep:
HeadlineexportsHeadlineSize,TextexportsTextSizeandTextVariant. 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:
useSmallScreenanduseResponsiveValuereadtheme.screensfrom the ThemeProvider context instead of relying on hardcoded values indefaultTheme. If no theme provides screens, the hooks fall back to reading Tailwind v4's--breakpoint-*CSS custom properties.- Added
screensto@marigold/theme-rui(matches Tailwind v4 defaults) - Removed
screensfromdefaultThemein@marigold/system - Added
resolveScreensutility for theme-first, CSS-fallback resolution
- Added
-
f629319: refactor([DST-1283]): Breaking Change — Remove
<Multiselect>(and thereact-selectdependency) from@marigold/components.Use
<TagField>instead. -
724f0ce: refa([DST-1162]): Breaking changes: The
Cardcomponent 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, andCard.Preview. - A
CardContextis 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> - The previous prop-based API (
Minor Changes
-
93f9ef1: feat(DST-1257): add universal
nonespacing token- Introduce
NoSpacingToken = 'none'shared across all spacing token families - Add
'none'toSpacingTokens,PaddingSpacingTokens, andInsetSpacingTokens - Add
--spacing-none: --spacing(0)CSS custom property to the theme
'none'now works wherever a spacing token is accepted:Stack/Inlinegap (space="none"),Insetaxis padding (spaceX="none"/spaceY="none"), andInsetrecipes (space="none") — useful for wrappers that should render without adding any spacing (e.g. an edge-to-edgeTableinside a containing component). - Introduce
-
8326bf7: feat(DST-1326): introduce
Panel.CollapsibleHeader,Panel.CollapsibleTitle, andPanel.CollapsibleDescription. The collapsible mirrorsPanel.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 viaaria-labelledbyand the description viaaria-describedby. The chevron icon uses a reusableMorphCaretthat animates via SVG path morphing (honoursprefers-reduced-motion).
Patch Changes
- 20a42b0: Rename universal spacing token from
nonetocollapsedto avoid a Tailwind v4 collision.--spacing-noneinside@theme staticcausedleading-noneto resolve to0instead ofline-height: 1. The new namecollapsedis 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
widthprop size field components againSetting
widthon 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.FieldBasesets the--field-widthCSS variable for its child field element to consume viaw-(--field-width), but the variable was registered with@property … { inherits: false }, so it never reached the child andwidthfell back toauto.--field-widthis now registered withinherits: 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
widthvalues are spacing-scale tokens, not pixels:width={64}resolves tocalc(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,
Switchnow 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
cvaresults assignable toComponentStyleFunctionunder default strict TypeScript.@marigold/system@17.5.0shippedcva@1.0.0-beta.4, whose narrowed return type stopped satisfyingComponentStyleFunction<Variants, Sizes>once consumers enabledstrictFunctionTypes(implied bystrict: true). Function-parameter contravariance rejected both the deadvariant?: Variants | nullslot and thestringvs literal-union variant mismatch, breaking every consumer theme that followed the documentedcva(...) as ThemeComponent<'Foo'>pattern.ComponentStyleFunctionnow typesvariant/sizeasany— honestly reflecting the runtime contract (useClassNamespassesstring | undefined,cvafalls back to base styles for unknown values) and letting narrowercvareturns satisfy the wider theme contract.Variants/Sizes/Additionalgenerics stay for backward source-compatibility. A dedicated type-level regression test (packages/system/src/types/theme.test-d.ts) uses aStrictlyAssignable<Source, Target>conditional-type helper to verify the contract under TypeScript's structural function checking, so this class of bug is caught by the regularpnpm typecheckeven though the monorepo's base config keepsstrictFunctionTypes: 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 viavisibleDuration, stacking vertically below thesmbreakpoint; the same responsive stacking now applies to multi-month<Calendar>for parity.descriptionanderrorMessageroute 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. -
4742e8e: feat([DST-901]): styleProps for
width,maxWidth,height,space,spaceX,spaceY,pr,pl,pt,pbnow 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, andheightvia 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-widthand--field-widthalready used byFieldBase— are registered as non-inheriting (@property … inherits: false) in the RUI theme so they cannot leak into descendants.createWidthVargained support for the previously missing keywords (svh,lvh,dvh,px,container), and a newcreateHeightVarhelper 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,paddingBottomare 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
spaceprop accepts inset recipe tokens (square-*,squish-*,stretch-*) and numeric scale valuesspaceX/spaceYprops accept single-value padding tokens (padding-tight,padding-snug,padding-regular,padding-relaxed,padding-loose) and numeric scale values- Add
InsetSpacingTokenstype for multi-value inset recipes - Add
PaddingSpacingTokenstype 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-2top-1, and add newcalendarHeadingtheme slot. -
d341a9d: Fix CJS export paths pointing to non-existent
.jsfiles. Since tsdown 0.16.0, output uses.cjsextensions butmain,types, andexportsfields 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
useActionBarhook andActionBarContextfor managing selection state between ActionBar and Table - Add
actionBarrender prop to Table for automatic selection wiring and ActionBar positioning - Add enter/exit animations using
motion/reactand react-ariauseEnterAnimation/useExitAnimation - Add Escape key support to clear selection via
FocusScopeanduseKeyboard - Add screen reader announcement when ActionBar appears
- Add localized
selectedCount/selectedAllmessages (en-US, de-DE) - Update ActionBar theme slots: rename
actionstotoolbar, addselectionslot - Update theme type definition to match new slot names
- Add
-
b115fda: Migrate from
class-variance-authoritytocvaand simplifyextendThemevia function composition.- Replace
class-variance-authoritydependency withcva(v1 beta), which has built-in Tailwind merge support viadefineConfig - Refactor the custom
cvawrapper to usecva'sdefineConfigwith atwMergehook, storing variant configs in a WeakMap (for docs introspection) instead of a.variantsproperty - Simplify
extendThemeto compose style functions directly (cn(existingFn(props), newFn(props))) instead of extracting and merging variant configs — this preservesdefaultVariantsandcompoundVariantsthat were previously lost during merging - Update all theme style files in
theme-ruito the newcvaAPI (object config withbase/variants/compoundVariantskeys)
- Replace
-
61bfc60: Refactor relational spacing scale for better semantic clarity and visual rhythm.
- Rename
--spacing-peertoken to--spacing-regular - Remove unused
--spacing-joinedand--spacing-contexttokens - Adjust spacing scale values: tight (4px→6px), regular (16px→24px), group (32px→48px), section (64px→96px)
- Move field-internal spacing from theme (
Field.stylesspace-y-2) into component implementations using newin-fieldcustom variant - Add
in-field:mb-1.5to Label andin-field:mt-1to HelpText for consistent field layout - Update
SpacingTokenstype to reflect new scale
- Rename
-
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-ruiand type definitions in@marigold/system
- Three-slot grid layout (
Patch Changes
-
91eb222: Update ActionBar styling with surface contrast and dedicated button slot.
- Apply
ui-surface-contrastutility to ActionBar container for adaptive theming - Add
buttonslot to ActionBar theme for properly styled action buttons (replacesButton.ghost) - Add
clearButtonhover/focus/disabled styles using theme-aware utilities - Update
ActionButtonto useActionBar.buttonclassNames instead ofButton.ghost - Replace
CloseButtonwithIconButtonfor the clear selection button - Update stories to use
lucide-reacticons directly
- Apply
-
cf56729: Add explicit
typescondition 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
useSmallScreenhook with Tailwind'ssmbreakpoint by deriving the value fromdefaultTheme.screens.smusing 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]:withsm:in Table editable cell styles for breakpoint consistency - Refactor
useSmallScreento useMediaQueryList.addEventListener('change')instead ofwindow.resize - Extract shared
mockMatchMediatest helper intotest.utils
- Align
-
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-clipandbackground-originfor gradient borders - Improved contrast and depth across all surface-based components (inputs, cards, dialogs, etc.)
- DateInput: Added new
inputpart for styling
Technical Details:
- New
ui-surfaceutility 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 unittight(1rem) - Packed containers for high-density scanningrelated(2rem) - Minimal separation for related pairs (label + input)peer(4rem) - Self-contained equals in the same flowgroup(8rem) - Logical separation between content zonessection(16rem) - Distinct layout sectionscontext(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
itemRemovepart 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 */ - Completely refactored the surface styling system to use
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
FieldBaseand Form Elements likeInput,TextArea,DateInputandSelect. 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
indicatorstyling from<Label>. The component is no longer a multi-part component. Rather than styling the required indicator through a dedicated part (previsoulyindicator), 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 proploaderTypewhich is by defaultcycle. New optioncycleshows 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
actionproperty - Update description to support JSX
- Introduced
-
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-ariapatch version range as dependencies
15.0.0
Major Changes
-
62ac4b8: refa([DST-919]): Remove
<Image>componentBreaking Change
The
<Image>component has been removed from Marigold. Please replace it with the native<img>element.If you previously used the
fitorpositionprops, you can replicate the same behavior using the corresponding Tailwind CSS utility classes.Replacement table
Prop type Prop value Tailwind class fit containobject-containcoverobject-coverfillobject-fillnoneunsetscaleDownobject-scale-downposition none— (no class) bottomobject-bottomcenterobject-centerleftobject-leftleftBottomobject-left-bottomleftTopobject-left-toprightobject-rightrightBottomobject-right-bottomrightTopobject-right-toptopobject-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
unstyledandmaxWidthto<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
optiontoitemin styles for<ListBox>Breaking Change: This change will break your styles if you use custom styles for the
<ListBox>Component.optionis now calleditem. -
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>componentIntrocude
<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.HeaderandAccordion.Content.Accordion.Headerreplaces the title inAccordion.Item.Accordion.Contentis now the place where the content needs to be.Reworked the
AccordionDocumentation 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
- Refactored the
10.1.0
Patch Changes
-
ebc53cb: refa[DST-598]: Improve
<Slider>componentThe
<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 (fromsectionTitletoheader)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 aHeaderwithin the<Section>.Use the newly added
headerprop 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
8.0.0
Major Changes
Minor Changes
- #3942
5977cbaThanks @OsamaAbdellateef! - Keep our documentation props table dynamic
Patch Changes
-
#3939
2cde433Thanks @sarahgm! - feat[DST-481]: rename<Message>in<SectionMessage> -
#3941
3f7a4ecThanks @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
7.7.2
7.7.1
7.7.0
Patch Changes
7.6.0
7.5.4
7.5.3
7.5.2
7.5.1
Patch Changes
- #3809
fba5e92Thanks @OsamaAbdellateef! - Preventing to override our theme variants in extendTheme
7.5.0
Minor Changes
- #3748
5643257Thanks @OsamaAbdellateef! - Adding the option to customize marigold components usingextendTheme function"
Patch Changes
7.4.0
Patch Changes
7.3.3
7.3.2
7.3.1
Patch Changes
7.3.0
Minor Changes
7.2.0
Minor Changes
- #3596
9f1ae32Thanks @OsamaAbdellateef! - Added new Helpers componentsNumericFormat&DateFormat
Patch Changes
- #3517
7a8d40aThanks @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
47f300029Thanks @aromko! - [DSTSUP-5]: Bugfix: Loss of input values after collapsing accordion elements is now prevented by hiding the corresponding section. -
#3548
535d1088bThanks @aromko! - [DST-254]: use new tokens in core theme
7.0.0
Patch Changes
6.11.0
Patch Changes
6.10.0
Minor Changes
- #3501
14f5d5d30Thanks @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
7704debbeThanks @OsamaAbdellateef! - [DST-38]: Implement mobile optimization forDatePicker
6.5.1
6.5.0
6.4.0
Minor Changes
-
#3429
3e328198cThanks @sebald! - feat: adjust<SliderOutput>position -
#3424
5a2a03ae0Thanks @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
989f094e7Thanks @OsamaAbdellateef! - [DST-111]: enhance styling tabs
Patch Changes
-
#3297
566ec30e4Thanks @sarahgm! - chore[DST-143]: rename token name -
#3295
8a4ef1805Thanks @sarahgm! - chore[DST-145]:update fontsize
6.0.1
Patch Changes
- #3232
fd10c294aThanks @OsamaAbdellateef! - [DST-65]: Spacing of Popover can me customized based on themes
6.0.0
Major Changes
- #3117
79be927e6Thanks @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
5.3.0 (Released on May 13, 2026)
Minor Changes
-
#2826
aaf6b55c6Thanks @sarahgm! - refa: Improved<Input>with icons/actions -
#2845
80cdbe062Thanks @sebald! - refa:<SVG>css prop can overrde size (height/width)
5.2.0
Minor Changes
5.1.0
Patch Changes
5.0.0
Major Changes
-
#2764
1ff29cc0cThanks @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
cssprop. E.g.<Box p="small" bg="primary">becomes<Box css={{ p: "small, bg; "primary" }}>.
Patch Changes
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
4.1.1
4.1.0
Patch Changes
-
#2628
312a23cfThanks @renovate! - chore(deps): update dependency @theme-ui/css to v0.15.4 -
#2627
d250fc00Thanks @renovate! - chore(deps): update babel monorepo -
Updated dependencies [
080b1fed]:- @marigold/types@0.5.6
4.0.0
Patch Changes
-
#2591
be3f2060Thanks @renovate! - chore(deps): update dependency @babel/core to v7.19.6 -
#2609
4554b26eThanks @renovate! - chore(deps): update dependency @emotion/react to v11.10.5 -
Updated dependencies [
f38ae20a]:- @marigold/types@0.5.5
3.0.6
Patch Changes
3.0.5
3.0.4
3.0.3
3.0.2
Patch Changes
3.0.1
Patch Changes
3.0.0
Patch Changes
2.2.0
Minor Changes
Patch Changes
-
#2416
f76f4870Thanks @sebald! - fix: correctly interpret design tokens in<SVG> -
#2437
23a78264Thanks @renovate! - chore(deps): update testing (major) -
Updated dependencies [
75128374]:- @marigold/types@0.5.3
2.1.3
Patch Changes
-
#2391
d3143f65Thanks @sebald! - fix: remove responsivness from SVGs by default -
#2400
f6b49c37Thanks @sarahgm! - refa: improve useResponsiveStyle and add story
2.1.2
2.1.1
2.1.0
2.0.0
Minor Changes
Patch Changes
1.3.0
Patch Changes
1.2.2
1.2.1
Patch Changes
-
Updated dependencies [
b43464fc]:- @marigold/types@0.5.2
1.2.0
Minor Changes
1.1.1
1.1.0
1.0.1
Patch Changes
-
#2102
23c1a5ceThanks @sebald! - feat: Remove all occurances ofReact.FC -
Updated dependencies [
23c1a5ce,bfa0caea]:- @marigold/types@0.5.1
1.0.0
Major Changes
- #2074
3aa2c100Thanks @sebald! - refa: Remove "variant" prop from<Box>, useuseComponentStylesinstead
Minor Changes
Patch Changes
- Updated dependencies [
02d13e84]:- @marigold/types@0.5.0
1.0.0-beta.0
Minor Changes
Patch Changes
- Updated dependencies [
02d13e84]:- @marigold/types@0.5.0-beta.0
0.9.0
Patch Changes
-
#1988
7c1129dcThanks @sarahgm! - refa: Field Component restructure -
Updated dependencies [
7c1129dc]:- @marigold/types@0.4.1
0.8.0
Minor Changes
0.7.0
0.6.0
Minor Changes
Patch Changes
- #1809
539d4198Thanks @sebald! - feat(create-theme): Introduce helper package to create themes with sensible defaults
0.5.1
Patch Changes
0.5.0
Minor Changes
- #1723
5936de75Thanks @sebald! - feat(system): add hook that allows to use values based on screen size
0.4.0 (Released on Jul 8, 2026)
Minor Changes
Patch Changes
- Updated dependencies [
f9526234]:- @marigold/types@0.4.0
0.3.1
Patch Changes
0.3.0 (Released on Jun 18, 2026)
Minor Changes
Patch Changes
- #1230
ebd6e26fThanks @viktoria-schwarz! - feat: add GlobalStyles via theme