@d4gger/design-system 3.0.0 → 3.0.1

package/dist/docs/components/radio-group.md

@@ -47,7 +47,7 @@ A mutually exclusive selection cluster backed by `@radix-ui/react-radio-group`.
 | Prop | Type | Default | Required | Description | Responsive |
 |---|---|---|---|---|---|
 | `value` | `string` | — | yes | Unique value for this item. | no |
-| `size` | `'sm' \| 'md'` | `'md'` | no | Item-level size override. Drives the `dsx-radio-item--{size}` class. | no |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Item-level size override. Drives the `dsx-radio-item--{size}` class. | no |
 | `label` | `ReactNode` | `undefined` | no | When set, the item wraps itself in a `<label class="dsx-radio-option">` and renders the label inside a `dsx-radio-option__label` span. | no |
 | `description` | `ReactNode` | `undefined` | no | When set, the item renders a `dsx-radio-option__description` span under the label. | no |
 | `asChild` | `boolean` | `false` | no | Renders the item host through `Slot`. | no |
@@ -79,6 +79,7 @@ Rules:
 | `RadioGroupItem` (host) | `dsx-radio-item` | `radio-group.css` |
 | `RadioGroupItem` (size sm) | `dsx-radio-item--sm` | `radio-group.css` |
 | `RadioGroupItem` (size md) | `dsx-radio-item--md` | `radio-group.css` |
+| `RadioGroupItem` (size lg) | `dsx-radio-item--lg` | `radio-group.css` |
 | Item indicator | `dsx-radio-item__indicator` | `radio-group.css` |
 | Item dot | `dsx-radio-item__dot` | `radio-group.css` |
 | Option wrapper | `dsx-radio-option` | `radio-group.css` |
@@ -106,7 +107,9 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Option label/description typography | `var(--dsx-typography-body-medium-*)` | Body ramp. |
 | Option description color | `var(--dsx-color-on-surface-variant)` | Muted description. |
 | Item size (default) | `var(--dsx-size-md)` | Default control. |
-| Item size (sm) | `var(--dsx-size-sm)` | Small control. |
+| Item size (sm) | `var(--dsx-size-sm)` | Small control (20px). |
+| Item size (lg) | `var(--dsx-size-lg)` | Large control (32px). |
+| Item hit area | `max(100% + 16px, 44px)` via `::before` | Layout-neutral 44px pointer target (WCAG 2.5.8, TMA touch). |
 | Item radius | `var(--dsx-rounded-full)` | Round. |
 | Item border | `var(--dsx-border-width-md)` solid `var(--dsx-color-outline-variant)` | Resting edge. |
 | Item background | `var(--dsx-color-surface)` | Resting fill. |

package/dist/docs/components/rating.md

@@ -79,6 +79,8 @@ Rules:
 
 - The component does not write `@media` rules.
 
+- The `sm` star remains 20px visually. A centered `::before` layer expands its pointer target to the 24px `size-md` token, filling the existing 4px gap without overlapping neighboring targets.
+
 **Reduced motion:**
 
 - Item transitions use `var(--dsx-motion-duration-fast)` and `var(--dsx-motion-easing-standard)` for color, transform, opacity, and box-shadow. No explicit `prefers-reduced-motion` gate is present in the CSS.

package/dist/docs/components/result.md

@@ -15,6 +15,8 @@ Canonical outcome and list-state surface. `state` is `success`, `failure`, `expi
 
 `Result.Root`, `Result.Icon`, `Result.Title`, `Result.Description`, `Result.Metadata`, `Result.Steps`, and `Result.Actions`. Root class is `dsx-result`; slot classes use `dsx-result__<slot>`. Root writes `data-state` and `data-tone`.
 
+The root shrinks to the available width, direct children stay within that width, and long titles, descriptions, and identifiers wrap without truncation. Actions wrap intrinsically; no viewport query selects a different layout.
+
 ## Wiring notes
 
 `EmptyState` delegates to `Result state="empty"` while preserving its legacy class and props. `DataTable` uses Result for loading, empty, no-results, and error states. Copy, retry behavior, and async work are consumer-owned.
@@ -22,3 +24,7 @@ Canonical outcome and list-state surface. `state` is `success`, `failure`, `expi
 ## Playground demo spec
 
 Show every state, an independently overridden tone, populated slots, and alert/loading semantics.
+
+The live playground example switches between all seven states with actual buttons. Each state has contextual copy, a matching illustration or spinner, and an appropriate recovery action. Success shows connection metadata; loading shows steps. Recovery returns to success and Continue opens the empty saved-server state. The compact default example provides an illustration, title, and description.
+
+The inline live example uses headline-medium for its title and one outlined Result surface, avoiding compounded Card/Result padding. Short state titles preserve whole-word readability at 320px.

package/dist/docs/components/segmented-control.md

@@ -13,7 +13,7 @@ depends_on:
 
 ## Purpose
 
-A single-select control that renders a row of mutually exclusive options, backed by `ToggleGroup` from Radix. `default` is a sunken track with a sliding softly tinted raised pill behind the active option; `outline` is the same pill inside an outer frame; `subtle` is the borderless treatment with the same selected pill. Used for switching between views, filters, or modes in forms and toolbars.
+A single-select control that renders a row of mutually exclusive options, backed by `ToggleGroup` from Radix. `default` is a sunken track with a sliding softly tinted raised pill behind the active option; `outline` is the same pill inside an outer frame; `subtle` is the borderless treatment with the same selected pill. Used for switching between views, filters, or modes in forms and toolbars. Boundary rule (F6 brief): exclusive single-select with a thumb is always a SegmentedControl; frameless toolbar button clusters without a thumb are `ToggleGroup`. Never multi-select, never dismissible.
 
 ## Anatomy & slots
 
@@ -34,7 +34,9 @@ A single-select control that renders a row of mutually exclusive options, backed
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Control height and item padding; writes `data-size` and `dsx-segmented-control--{size}` class. | no |
 | `variant` | `'default' \| 'outline' \| 'subtle'` | `'default'` | no | Container surface treatment; writes `data-variant` and `dsx-segmented-control--{variant}` class. `subtle` keeps the measured selected pill but removes the track surface and frame. | no |
 | `activationMode` | `'manual' \| 'automatic'` | `'manual'` | no | Selection timing; writes `data-activation-mode`. `manual` selects only on activation (click, `Enter`, `Space`). `automatic` selects on item focus, so arrow-key navigation selects without `Enter`. | no |
+| `orientation` | `'horizontal' \| 'vertical'` | `'horizontal'` | no | Stacking axis; writes `data-orientation`. Vertical stacks icon columns (ref: view-switcher rails); the sliding indicator measures y/height and arrow keys move up/down via Radix. | no |
 | `disabled` | `boolean` | `false` | no | Disables the entire control; writes `data-disabled`. | no |
+| `fill` | `boolean` | `false` | no | Distributes the track width equally across items; writes `data-fill` and `dsx-segmented-control--fill`; both selectors share the same fill styling. Opt-in for few-item groups that fit (method pickers); the default hug-content root with scroll containment stays for overflowing groups. The sliding indicator measures live boxes, so it tracks fill widths with no change. | no |
 | `value` | `string` | `undefined` | no | Controlled selected value. | no |
 | `defaultValue` | `string` | `undefined` | no | Uncontrolled initial selected value. | no |
 | `onValueChange` | `(value: string) => void` | `undefined` | no | Callback when the selected value changes. | no |
@@ -53,7 +55,7 @@ A single-select control that renders a row of mutually exclusive options, backed
 
 Rules:
 
-- `size` and `disabled` are wired through `extractProps` and the prop def bag on the Root. `variant` and `activationMode` are destructured with their defaults and kept out of the extract bag (their defs declare no `className`, so they would otherwise leak onto the DOM).
+- `size` and `disabled` are wired through `extractProps` and the prop def bag on the Root. `variant`, `activationMode`, and `fill` are destructured with their defaults and kept out of the extract bag (their defs declare no `className`, so they would otherwise leak onto the DOM); `fill` writes `data-fill` plus the `--fill` modifier class manually, same as `variant`.
 - `value`, `defaultValue`, and `onValueChange` are passed through to the Radix ToggleGroup root directly.
 - The Root forces `type="single"` and filters empty string values from `onValueChange` to prevent deselection.
 - Deselect guard: the Root owns the selection state. Uncontrolled usage seeds internal state from `defaultValue` and passes the resolved value back into Radix as a controlled `value`, so clicking the active item (which fires `""`) can never clear Radix internal state or render the control with no active item. Controlled usage passes `value` straight through; `""` is still swallowed.
@@ -72,6 +74,8 @@ Rules:
 | `data-size` | `sm`, `md`, `lg` | `.dsx-segmented-control--sm`, `.dsx-segmented-control--md`, `.dsx-segmented-control--lg` | `segmented-control.css` |
 | `data-variant` | `default`, `outline`, `subtle` | `.dsx-segmented-control--default`, `.dsx-segmented-control--outline`, `.dsx-segmented-control--subtle` | `segmented-control.css` |
 | `data-disabled` | (present/absent) | `.dsx-segmented-control[data-disabled]` | `segmented-control.css` |
+| `data-orientation` | `horizontal`, `vertical` | `.dsx-segmented-control[data-orientation='vertical']` (column stack; indicator measures y/height) | `segmented-control.css` |
+| `data-fill` | (present/absent) | `.dsx-segmented-control--fill` (root spans the container, items share width equally) | `segmented-control.css` |
 
 **Slot classes:**
 
@@ -230,6 +234,7 @@ Automatic mode (`activationMode="automatic"`):
 | `variant` | select | `default` |
 | `activationMode` | select | `manual` |
 | `disabled` | boolean | `false` |
+| `fill` | boolean | `false` |
 
 ## Wiring notes
 

package/dist/docs/components/select.md

@@ -176,7 +176,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Content padding | `var(--dsx-space-sm)` | Floating menu inner gutter. |
 | Content width / min-width / max-width | `max-content` / `var(--radix-select-trigger-width, 200px)` / `min(--radix-select-content-available-width, 40rem)` | Mirror-at-minimum with grow-to-fit; past 40rem (or the viewport edge) rows wrap via `data-overflow` instead of stretching the panel. The 40rem ceiling is a token candidate for the size batch. |
 | Content max-height | `var(--dsx-size-popover-max-width)` | Scroll ceiling (used by the inner ScrollArea). |
-| Content z-index | `var(--dsx-z-index-dropdown)` | Overlay stacking. |
+| Content z-index | `var(--dsx-z-index-dropdown)` standalone; `calc(var(--dsx-z-index-modal, 90) + 2)` when nested inside a modal-tier host (`dsx-menu__nested`, see the shared nested floating tier contract in `menu.md`) | Overlay stacking; nested menus clear their host popup. |
 | Item min-height | `var(--dsx-size-lg)` | Default option height. |
 | Item padding | density-aware block/inline tokens with trailing indicator reservation | Option padding; the right side reserves room for the trailing check indicator. |
 | Item border | `0` | Items are borderless. |
@@ -295,7 +295,8 @@ Rules:
 - `VisuallyHidden` (DS primitive): the hidden native `<select>` host.
 - `Icon` (lucide-react `chevron-down`): the trigger trailing icon. Lucide-react `check` is the item indicator.
 - `_internal/BaseDialog`: `PortalThemeBoundary` (wraps the root) and `PortalThemeWrapper` (wraps the content) so `data-dsx-theme`, `data-dsx-density`, `data-dsx-scaling`, `data-accent-color`, `data-gray-color`, `data-radius`, `data-panel-background`, `data-has-background`, and `colorScheme` resolve inside the content portal.
-- `_internal/baseMenu.css`: the shared menu shell, border, surface, and focus contract.
+- `_internal/baseMenu.css`: the shared menu shell, border, surface, and focus contract — including the nested floating tier rule (`dsx-menu__nested` at `modal + 2`).
+- `_internal/floatingLayer`: `useFloatingLayerHost` tells `Select.Content` whether it renders inside a modal-tier host (`Popover.Content` / `Dialog.Content`); when nested, the content adds `dsx-menu__nested` so the options list paints above its host. Standalone content never carries the class and stays at the dropdown tier, below the modal overlay.
 - `@radix-ui/react-slot`: enables `asChild` on `Select`, `Select.Trigger`, and `Select.Content`.
 
 **Used by:**

package/dist/docs/components/sidebar.md

@@ -163,6 +163,8 @@ The parent button that toggles a `Sidebar.MenuSub`. Composes the public `Collaps
 
 ### `Sidebar.MenuBadge`
 
+Dual pattern (F6 brief): inline row badges compose `Badge` (`secondary`, `sm`) directly inside the menu button; `MenuBadge` is the dedicated primitive for the absolute count / collapse-aware case and the `ring` / `accent` identities. Example row-value composition: `MenuButton` + `<Badge variant="secondary" size="sm">12</Badge>` — no `MenuBadge` needed.
+
 | Prop | Type | Default | Required | Description | Responsive |
 |---|---|---|---|---|---|
 | `variant` | `'text' \| 'ring' \| 'accent'` | `'text'` | no | `text` composes the compact secondary Badge, `ring` visualizes `value / max`, and `accent` renders quiet glowing numeric metadata without a filled chip. | no |
@@ -314,7 +316,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Menu button active background | `color-mix(accent-3 50%, transparent)` | Sidebar-owned middle wash: 40% vanishes on spark-light, 60% shouts on saturated accents (warp/ray) — structure (inset underline) carries the rest of selection, no primary fill. |
 | Menu button active color | `var(--dsx-color-accent-indicator)` | Active menu button text and icon. |
 | Ring badge label typography | `var(--dsx-typography-label-small-*)` | Complete compact UI typography, including family, line height, spacing, case, decoration, and tabular numerals. |
-| Accent badge metadata | `var(--dsx-typography-label-small-*)`, `var(--dsx-color-accent-indicator)`, `var(--dsx-color-accent-9)` | Badge-geometry pill (full radius, Badge padding, fill-matched hairline, accent-surface fill) with a visible accent halo + pulse; full MenuBadge→Badge absorption is owned by the chip-taxonomy brief. |
+| Accent badge metadata | `var(--dsx-typography-label-small-*)`, `var(--dsx-color-accent-indicator)`, `var(--dsx-color-accent-9)` | Badge-geometry pill (full radius, Badge padding, fill-matched hairline, accent-surface fill) with a visible accent halo + pulse. Dual pattern (F6 brief): inline row badges compose `Badge` directly; `MenuBadge` survives for the absolute count/collapse-aware case plus the glow + pulse identity, which has no Badge equivalent. |
 | Accent badge motion | `var(--dsx-motion-duration-shimmer)`, `var(--dsx-motion-easing-in-out)` | Continuous opacity and text-shadow pulse; removed under reduced motion. |
 | Menu sub padding | `0 0 0 calc(lg + sm)` | Indent budget: sub text lands exactly under the parent label (label x=40, was 32). |
 | Menu sub gap | `var(--dsx-space-xs)` | Gap inside submenu. |

package/dist/docs/components/sonner.md

@@ -86,7 +86,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Toast background | `var(--dsx-color-surface)` | Resting toast surface. |
 | Toast radius | `var(--dsx-rounded-md)` | Toast corner roundness. |
 | Toast border | `var(--dsx-border-width-sm) solid var(--dsx-color-outline)` | Toast edge. |
-| Toast shadow | `var(--dsx-shadow-elevation-2)` | Toast elevation. |
+| Toast shadow | `var(--dsx-shadow-elevation-5)` | Spotlight: below dialogs, above all menus (B4 Q3). |
 | Toast gap | `var(--dsx-space-md)` | Gap between icon, title, description, and buttons. |
 | Success border | `var(--dsx-color-success)` | Success variant edge. |
 | Error background | `var(--dsx-color-error-container)` | Error variant surface. |

package/dist/docs/components/sortable-list.md

@@ -25,6 +25,8 @@ raw id when the item cannot be resolved). Disabled items keep a focusable
 handle marked `aria-disabled`; the handle shows `cursor: not-allowed` and the
 row stays dimmed, and dnd-kit never lifts a disabled item.
 
+Successful reordering restores focus to that list's handle. Repeated item IDs in another SortableList do not capture focus, and a content button before the handle is not used as the focus target.
+
 Import `SortableList` from `@d4gger/design-system/sortable-list`. It is intentionally absent from the root and `components` barrels so consumers that do not use reordering are not required to install the optional `@dnd-kit/*` peers.
 
 ## Playground demo spec

package/dist/docs/components/stat-card.md

@@ -65,7 +65,7 @@ Each slot also accepts the standard HTML attributes for its host element. `StatC
 Rules:
 
 - The component does not emit `data-radius`, `data-accent-color`, or `data-high-contrast`. The contract calls for `data-variant` and `data-size` only.
-- The `Trend` icon is always rendered; consumers that want an icon-free trend should pass an empty `children` and use `asChild` to override the host.
+- The `Trend` icon is always rendered, including with `asChild`; consumer children provide the label rather than replacing the icon.
 
 ## CSS class contract
 
@@ -75,8 +75,8 @@ Rules:
 
 | Attribute | Allowed values | Class | CSS file |
 |---|---|---|---|
-| `data-variant` | `surface`, `ghost` | (no rule in `stat-card.css`; attribute is informational) | n/a |
-| `data-size` | `sm`, `md`, `lg` | (no rule in `stat-card.css`; attribute is informational) | n/a |
+| `data-variant` | `surface`, `ghost` | `.dsx-stat-card[data-variant='ghost']` removes the surface background | `stat-card.css` |
+| `data-size` | `sm`, `md`, `lg` | `.dsx-stat-card[data-size='sm'|'lg']` changes padding; Metric.Value inherits the size for typography | `stat-card.css`, `metric.css` |
 
 **Trend modifier classes** (driven by the `trend` prop def):
 
@@ -99,6 +99,7 @@ Rules:
 **Responsive behavior:**
 
 - The component does not write `@media` rules. `size`, `variant`, and `trend` are single-value only.
+- Metric's containment keeps long values within the card; Footer and Trend wrap intrinsically. Number formatting remains consumer-owned.
 
 **Reduced motion:**
 
@@ -209,7 +210,7 @@ The component is static.
   `dsx-stat-card*` class, prop, export, trend icon, and rendered host element.
 - `Card` remains the conceptual surface parent; StatCard keeps its own
   `dsx-stat-card` surface class for backward compatibility.
-- `Text`, `Badge`, `Icon`: the typical content of the value, footer, and trend slots. StatCard does not import any of these; the consumer supplies the nodes.
+- `Icon` is imported for the internal trend glyph. Consumers supply value/footer content, including optional Text or Badge nodes.
 
 **Used by:**
 

package/dist/docs/components/stepper.md

@@ -229,6 +229,7 @@ Both issues are now fixed: the vertical override sets `flex: 0` and uses `margin
 **Used by:**
 
 - App-level onboarding flows, multi-step forms, and wizard navigation. The roster explicitly calls out that `Stepper` is a composite, not a pattern, and that it must compose primitive `Indicator + Separator + Label` parts rather than a parallel visual shell.
+- Timeline (rail recipe consumer, CSS contract only — no component dependency): Timeline reuses the vertical rail geometry (dot-column centering calc, marker-bottom anchor, size-aware offsets, active-state recolor) for its left rail and centered alternate spine, while keeping its own Item/Marker/Content/Connector API, its own event states, and its own (non-progressbar) semantics. The vertical rail rules in `stepper.css` are the layout engine of record; keep them in sync with `timeline.css`.
 
 **State boundaries:**
 

package/dist/docs/components/table.md

@@ -16,6 +16,8 @@ depends_on:
 
 A read-heavy, semantically-correct HTML table with token-aligned typography, sizing, and density. Use `Table` for plain data presentation; reach for `DataTable` when sort, filter, density toggling, or pagination is required.
 
+**Relationship:** `Table` is the primitive (rows/cells, density, alignment, overflow); `DataTable` is the shell over `Table` (toolbar, selection, pagination, state). Column transforms (sorter, filter, selection, title layering) are a `DataTable`-side concern, not `Table`'s. See `data-table.md` for the shell's ownership statement.
+
 ## Anatomy & slots
 
 **Parent:** `Table` (alias of `TableRoot`). The root is a `<table>` element (or `Slot` host when `asChild` is set).
@@ -39,7 +41,7 @@ A read-heavy, semantically-correct HTML table with token-aligned typography, siz
 
 - The root renders a `<table>` with `border-collapse: separate; border-spacing: 0;` plus a single border + radius around the entire table.
 - `Table.Cell` is omitted from the last row's bottom border (`.dsx-table__body tr:last-child .dsx-table__cell { border-bottom: 0 }`).
-- Row hover is provided by `.dsx-table__body tr:hover` (background `var(--dsx-effect-hover-ghost)`).
+- Row hover is provided by `.dsx-table__body tr:hover` (background `var(--dsx-effect-hover-ghost)`, transitioned at `fast/standard`). No other hover rule paints rows.
 - `Table.Header` rows get a `var(--dsx-color-outline)` bottom border.
 - `Table.Footer` overrides the cell color to `var(--dsx-color-high-contrast)` and removes the bottom border, giving it the appearance of a summary row.
 - `Table.ColumnHeaderCell` uses `cursor: pointer` only when `sortable` is true, and renders a small `::after` arrow when `sorted` is set.
@@ -54,6 +56,7 @@ A read-heavy, semantically-correct HTML table with token-aligned typography, siz
 | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | no | Cell padding scale. Writes `data-size`. | no |
 | `variant` | `'surface' \| 'ghost'` | `'surface'` | no | Visual treatment. `surface` paints a bordered card; `ghost` removes the border and surface color for use on a pre-existing background. Writes `data-variant`. | no |
 | `layout` | `'auto' \| 'fixed'` | `'auto'` | no | Maps to `table-layout: auto \| fixed`. Writes `data-layout`. Pair with `width="full"` on cells when `layout="fixed"`. | no |
+| `separator` | `'rules' \| 'grid'` | `'rules'` | no | Separator treatment. `rules` paints the header divider plus horizontal row rules only; `grid` additionally paints vertical rules between columns, for dense-financial data, pinned columns, or column resizing. Writes `data-separator`. | no |
 | `wrapScrollArea` | `boolean` | `false` | no | When `true`, wraps the `<table>` in `ScrollArea` so wide content scrolls horizontally. The `ScrollArea` viewport gets the `dsx-table__scroll-viewport` class. | no |
 | `asChild` | `boolean` | `false` | no | Renders the root through `Slot`; consumer supplies the host element. | no |
 
@@ -68,7 +71,7 @@ A read-heavy, semantically-correct HTML table with token-aligned typography, siz
 
 | Prop | Type | Default | Required | Description | Responsive |
 |---|---|---|---|---|---|
-| `justify` | `'start' \| 'center' \| 'end'` | `undefined` | no | Horizontal `justify-content` for the cell contents. Writes `data-justify`. | no |
+| `justify` | `'start' \| 'center' \| 'end'` | `undefined` | no | Logical horizontal text alignment of the native table cell; an explicit cell value overrides row alignment. Writes `data-justify`. | no |
 | `width` | `'auto' \| 'full'` | `undefined` | no | Cell width. `'full'` sets `width: 100%`; `'auto'` clears an inherited width. Writes `data-width`. The prop type also accepts an arbitrary string at the TS level, but only `'auto'` and `'full'` get CSS rules; an arbitrary string is forwarded through `data-width` but produces no visual change. | no |
 | `padding` | `'none' \| space-scale-value` | `undefined` | no | Cell padding override. `'none'` zeroes out the cell padding. Other space-scale values are forwarded through `data-padding` and inherit from the parent's `data-size` rules. | no |
 | `asChild` | `boolean` | `false` | no | Polymorphic host. | no |
@@ -100,6 +103,7 @@ The remaining slots (`Table.Caption`, `Table.Header`, `Table.Body`, `Table.Foote
 | `data-size` | `sm`, `md`, `lg` | `.dsx-table[data-size='sm'] .dsx-table__head, .dsx-table__cell`, `.dsx-table[data-size='lg'] ...` | `table.css` |
 | `data-variant` | `surface`, `ghost` | `.dsx-table[data-variant='ghost']` (and child overrides) | `table.css` |
 | `data-layout` | `auto`, `fixed` | `.dsx-table[data-layout='fixed']` (maps to `table-layout: fixed`) | `table.css` |
+| `data-separator` | `rules`, `grid` | `.dsx-table[data-separator='grid']` (vertical rules between columns) | `table.css` |
 | `data-align` (row) | `start`, `center`, `end` | `.dsx-table__row[data-align='...'] .dsx-table__head, .dsx-table__cell` | `table.css` |
 | `data-justify` (cell) | `start`, `center`, `end` | `.dsx-table__cell[data-justify='...']` | `table.css` |
 | `data-width` (cell) | `auto`, `full` | `.dsx-table__cell[data-width='...']` | `table.css` |
@@ -128,6 +132,9 @@ The remaining slots (`Table.Caption`, `Table.Header`, `Table.Body`, `Table.Foote
 - The component does not write `@media` rules. Responsive layout comes from the layout primitives' responsive classes and from the responsive table-layout helpers in `styles/responsive/tableLayout.css` (`dsx-r-tl-auto`, `dsx-r-tl-fixed`).
 - The component's CSS file is breakpoint-agnostic.
 
+- `Cell.justify` maps to native `text-align` (start/center/end), preserving table layout.
+- Static column headers use the default cursor and allow text selection. Pointer cursor and selection suppression apply only to sortable headers.
+
 **Reduced motion:**
 
 - The component is static. No motion is applied.
@@ -163,9 +170,9 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 
 | Region | Token | Default | Reduced |
 |---|---|---|---|
-| (none) | none | none | n/a |
+| Body row hover (`background-color`) | `var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard)` | 150ms ease | (CSS declares no `prefers-reduced-motion` override; consumers who need a hard gate add a page-level rule) |
 
-The component has no motion. It is a static read surface.
+The component is otherwise a static read surface.
 
 ## Accessibility
 
@@ -189,7 +196,7 @@ The component has no motion. It is a static read surface.
 
 **Reduced motion:**
 
-- No motion is applied; no `prefers-reduced-motion` override is needed.
+- Only the body-row hover background transitions; no `prefers-reduced-motion` override is needed beyond a page-level rule.
 
 **Color and meaning:**
 
@@ -211,6 +218,7 @@ The component has no motion. It is a static read surface.
 **Variant story:**
 
 - Renders three tables: `variant="surface"`, `variant="ghost"`, and `layout="fixed"`. Asserts the matching `data-variant` and `data-layout` attributes.
+- Renders `separator="grid"`. Asserts `data-separator="grid"` and vertical rules between columns.
 
 **Size story:**
 
@@ -241,6 +249,7 @@ The component has no motion. It is a static read surface.
 | `size` | select | `md` |
 | `variant` | select | `surface` |
 | `layout` | select | `auto` |
+| `separator` | select | `rules` |
 | `wrapScrollArea` | boolean | `false` |
 
 ## Wiring notes

package/dist/docs/components/tag.md

@@ -14,8 +14,10 @@ depends_on:
 ## Purpose
 
 The single dismissible label chip. Badge is the static status/metadata token; Pills is the
-filter cluster; Status is the dot indicator; Tag is the one interactive chip with an
-optional remove action. Use for active filters, selected values, and removable labels.
+selectable filter cluster; Status is the dot indicator; Tag is the one chip that owns
+its own remove action. Use for active filters, selected values, and removable labels.
+Cardinality rule (F6 brief): one chip with a remove action is a Tag; a row of chips
+with selection state is Pills. Tag claims dismissal, never selection.
 
 ## Anatomy & slots
 

package/dist/docs/components/timeline.md

@@ -34,8 +34,9 @@ A vertical or alternating event timeline for activity feeds, audit logs, and ord
 **Internal layout:**
 
 - The root renders a flex column. Items are stacked vertically.
+- Rail/connector geometry is shared with Stepper's vertical rail engine (see `stepper.md` and `stepper.css` `.dsx-stepper--vertical .dsx-stepper__item:not(:last-child)::after`): the connector is item-local, anchored at the marker bottom (`top` = marker size) and stretched to the item bottom (`bottom: 0`), centered on the dot column via `calc(marker-size / 2 - rail-width / 2)` with size-aware overrides per `data-size`. Timeline keeps its own `Connector` DOM node (Stepper draws via `::after` and hides its `Separator`) and its own rail width (`--dsx-border-width-sm`); the geometry recipe is shared, the slot API and ARIA roles stay distinct. The two components are never merged: Stepper answers "where am I in a process" (`role="progressbar"`), Timeline answers "what happened, when" (per-event states, no progress semantics). Precedent: antd Timeline renders `<Steps type="dot">`.
 - In the `left` variant (the default), every item is a flex row with `gap: var(--dsx-space-lg)`. The marker sits on the left rail; the content fills the remaining space.
-- In the `alternate` variant, every item is a full-width flex row; the consumer is responsible for the alternating side-by-side layout (CSS does not alternate automatically).
+- In the `alternate` variant, every item is a three-column grid (`minmax(0, 1fr) auto minmax(0, 1fr)`): the `1fr` tracks exist without any spacer element, so equal `fr` shares keep the marker exactly on the dot column in both parities. Odd items place content in column 1 (`text-align: right`), even items in column 3; the marker is always column 2. Placement is explicit (`grid-column` + `grid-row: 1`), so DOM order is irrelevant. The connector runs down the item's vertical centerline (`left: calc(50% - rail-width / 2)`), which is the marker center. DOM order stays Marker-then-Content by convention; the split is pure CSS, so no prop or slot change was needed.
 - `Timeline.Marker` is a square (`var(--dsx-size-md)`) fully rounded element with a 1px outline. It accepts arbitrary children, typically an `Icon` or a number from the consumer.
 - `Timeline.Connector` is an absolutely positioned vertical bar inside the item. It begins at the bottom of the marker and extends to the bottom of the item. Width is `var(--dsx-border-width-sm)` and color is `var(--dsx-color-outline-variant)`. The active state recolors it to `var(--dsx-color-primary)`.
 - `Timeline.Content` is the consumer's content surface. The CSS file defines helper classes `dsx-timeline__content-title`, `dsx-timeline__content-description`, and `dsx-timeline__content-time` for the typical title/body/time pattern, but the consumer is free to compose any children.
@@ -95,6 +96,8 @@ These three slots accept only `asChild` plus the standard HTML attribute surface
 
 - The component does not write `@media` rules. Responsive layout comes from the layout primitives' responsive classes when the consumer wraps the timeline in a responsive shell.
 
+- Items and content can shrink to the container; long identifiers wrap. Alternate tracks have a zero minimum so content cannot displace the centered marker rail. Error connectors use the same error token as their marker.
+
 **Reduced motion:**
 
 - The component is static. No motion is applied.
@@ -174,7 +177,7 @@ The component has no motion. It is a static read surface.
 
 **Variant story:**
 
-- Renders one `Timeline` with `variant="left"` and one with `variant="alternate"`. Asserts the `dsx-timeline--left` and `dsx-timeline--alternate` classes.
+- Renders one `Timeline` with `variant="left"` (deployment feed) and one with `variant="alternate"` (centered spine, three items covering odd/even parity). Asserts the `dsx-timeline--left` and `dsx-timeline--alternate` classes.
 
 **State story:**
 
@@ -186,7 +189,7 @@ The component has no motion. It is a static read surface.
 
 **Token story:**
 
-- Renders the default timeline inside a `Theme` wrapper with `accentColor="silver"` and `accentColor="bronze"`. Asserts the `data-accent-color` attribute is forwarded, but the active marker color tracks `--dsx-color-primary` and is not affected by the accent token.
+- Renders the default timeline inside a `Theme` wrapper with `accentColor="rift"` and `accentColor="warp"`. Asserts the `data-accent-color` attribute is forwarded, but the active marker color tracks `--dsx-color-primary` and is not affected by the accent token.
 
 **A11y story:**
 
@@ -204,6 +207,7 @@ The component has no motion. It is a static read surface.
 **Composes from:**
 
 - `@radix-ui/react-slot`: enables `asChild` on the root and on every named slot.
+- Stepper's vertical rail engine (CSS recipe only, no component dependency): Timeline reuses the dot-column centering calc, the marker-bottom anchor, and the size-aware offsets. The two components share geometry, never API or ARIA roles.
 
 **Used by:**
 
@@ -223,8 +227,8 @@ The component has no motion. It is a static read surface.
 
 1. **Content block layout collapsed; title, description, time rendered run-together.** The `.dsx-timeline__content` slot had no `display`, `flex-direction`, or `gap`, causing its children (the title `<span>`, description `<span>`, and time `<span>`, typically rendered bare by consumers) to render as inline siblings on a single line ("Project createdInitial scaffold2 hours ago"). FIXED 2026-07-03: added `display: flex; flex-direction: column; gap: var(--dsx-space-2xs);` to `.dsx-timeline__content`, plus `flex: 1; padding-bottom: var(--dsx-space-lg);` to preserve the item gap semantics and support the connector's absolute positioning.
 
-2. **Alternate variant had no CSS implementation; items never alternated.** The `variant="alternate"` prop def wrote the `dsx-timeline--alternate` modifier class on the root, but the CSS file contained no rules targeting that modifier — the layout was identical to the `left` variant. FIXED 2026-07-03: added per-item zigzag rules for the `alternate` variant: even-indexed items get `flex-direction: row-reverse` (marker on the right), `text-align: right` on content, and the connector repositioned from `left` to `right` with size-aware recalculation per `data-size` (sm/md/lg). This is a per-item flip, not a shared centered spine — the connector is item-local, not a continuous centerline. A future polish iteration may introduce a centered-column connector pattern.
+2. **Alternate variant had no CSS implementation; items never alternated.** The `variant="alternate"` prop def wrote the `dsx-timeline--alternate` modifier class on the root, but the CSS file contained no rules targeting that modifier — the layout was identical to the `left` variant. FIXED 2026-07-03: added per-item zigzag rules for the `alternate` variant: even-indexed items get `flex-direction: row-reverse` (marker on the right), `text-align: right` on content, and the connector repositioned from `left` to `right` with size-aware recalculation per `data-size` (sm/md/lg). REDESIGNED 2026-09-21 (F12 brief §4): replaced the per-item flip with a centered-spine recipe shared with Stepper's vertical rail engine — each item is a three-column flex row (half | marker | half) with the `::before` pseudo as the empty half, content split on parity (odd left, even right), and the connector on the item centerline. The flip is obsolete; the spine is the contract.
 
 3. **Connector appeared missing but was symptom of layout bug, not a separate defect.** The connector (an absolutely positioned vertical bar inside each item) appeared invisible or extremely short (~18px) in rendered demos. Investigation revealed the connector itself was present with correct background color and dimensions; the visual symptom was a side effect of the spacing bug (#1 above). When `.dsx-timeline__content` had no flex layout, its children ran together in ~20px of vertical space, making the item itself tiny, and the connector's absolute `top: marker-bottom; bottom: 0` was proportionally tiny too. Fixing the spacing bug (adding the flex column layout) expanded the item's natural height, and the connector automatically became visible. No separate CSS fix was needed for the connector; it was never the root cause.
 
-4. **Playground fixture uses invalid state values.** The registry fixture at `apps/playground/lib/registry/data.tsx` (Timeline entry, "Default" story) passes `state="complete"` and `state="pending"` to `TimelineItem`, but `timeline.props.ts`'s `timelineItemPropDefs.state` enum only allows `'default' | 'active' | 'error' | 'disabled'`. Invalid enum values silently fall through to the default modifier class (no visible error). This is a fixture-honesty gap (the fixture uses API values that the type definitions reject) and is deferred to the next promotion batch.
+4. **Playground fixture uses invalid state values.** The registry fixture at `apps/playground/lib/registry/data.tsx` (Timeline entry, "Default" story) passes `state="complete"` and `state="pending"` to `TimelineItem`, but `timeline.props.ts`'s `timelineItemPropDefs.state` enum only allows `'default' | 'active' | 'error' | 'disabled'`. Invalid enum values silently fall through to the default modifier class (no visible error). FIXED 2026-09-21: fixture rewritten with valid states only — a timestamped deployment feed (left rail), a three-item alternate story covering odd/even parity, an error + disabled story, and a token story over `rift`/`warp`/`ray`.

package/dist/docs/components/toast.md

@@ -174,7 +174,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Toast background | `var(--dsx-color-surface)` | Resting toast surface. |
 | Toast radius | `var(--dsx-rounded-md)` | Toast corner roundness. |
 | Toast border | `var(--dsx-border-width-sm) solid var(--dsx-color-outline)` | Toast edge. |
-| Toast shadow | `var(--dsx-shadow-elevation-2)` | Toast elevation. |
+| Toast shadow | `var(--dsx-shadow-elevation-5)` | Spotlight: below dialogs, above all menus (B4 Q3). |
 | Destructive background | `var(--dsx-color-error-container)` | Destructive variant surface. |
 | Destructive border | `var(--dsx-color-error)` | Destructive variant edge. |
 | Destructive text | `var(--dsx-color-on-error-container)` | Destructive variant text. |

package/dist/docs/components/toggle-group.md

@@ -14,7 +14,7 @@ depends_on:
 
 ## Purpose
 
-A coordinated cluster of toggle buttons backed by `@radix-ui/react-toggle-group`. Items can run in single or multiple selection, share a single border with collapsed inner radii, and lift the focused child above its siblings. The component is the right fit for view selectors and formatting clusters; for single-select with a sliding indicator use `SegmentedControl` instead.
+A coordinated cluster of toggle buttons backed by `@radix-ui/react-toggle-group`. Items can run in single or multiple selection, share a single border with collapsed inner radii, and lift the focused child above its siblings. The component is the right fit for view selectors and formatting clusters; for single-select with a sliding indicator use `SegmentedControl` instead. Boundary rule (F6 brief): ToggleGroup is frameless toolbar buttons with no thumb and no container fill — the moment a design needs a sliding indicator, it is a SegmentedControl, not a styled ToggleGroup.
 
 ## Anatomy & slots
 
@@ -79,6 +79,7 @@ Rules:
 **Responsive behavior:**
 
 - The component does not write `@media` rules. None of its prop defs are `responsive: true`. Size and variant are single-value only.
+- Narrow containers: the root caps at `max-width: 100%` with `overflow-x: auto` — the fused frame cannot wrap, so an over-wide group scrolls instead of hard-clipping its last item (proven 2026-09-23 in a definite 272px column: group caps at 272, full content reachable by touch scroll).
 
 **Reduced motion:**
 

package/dist/fonts.css

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Science+Gothic:CTRS,slnt,wdth,wght@0..75,-10..0,50..200,100..900&display=swap&subset=cyrillic,latin');
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Science+Gothic:CTRS,wdth,wght@0..75,50..200,100..900&display=swap&subset=cyrillic,latin');

package/dist/generated/tokens.cjs

@@ -27,7 +27,7 @@ const tokens = {
   "sheet-width-sm": "320px",
   "sheet-width-lg": "480px",
   "chart-min-height": "240px",
-  "data-table-empty-height": "96px",
+  "data-table-empty-height": "192px",
   "sidebar-width": "272px",
   "sidebar-width-collapsed": "72px",
   "calendar-width": "320px",

package/dist/generated/tokens.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/generated/tokens.ts"],
-  "sourcesContent": ["// Auto-generated by Style Dictionary \u2014 do not edit manually.\nexport const tokens: Record<string, string | number> = {\n  'sheet-min-height': \"80vh\",\n  'sheet-width': \"380px\",\n  'sheet-width-sm': \"320px\",\n  'sheet-width-lg': \"480px\",\n  'chart-min-height': \"240px\",\n  'data-table-empty-height': \"96px\",\n  'sidebar-width': \"272px\",\n  'sidebar-width-collapsed': \"72px\",\n  'calendar-width': \"320px\",\n  'combobox-content-width': \"320px\",\n  'combobox-list-max-height': \"300px\",\n  'dialog-content-width': \"560px\",\n  'dialog-content-width-lg': \"720px\",\n  'drawer-min-height': \"30vh\",\n  'drawer-min-height-sm': \"24vh\",\n  'drawer-min-height-lg': \"50vh\",\n  'drawer-min-height-full': \"100vh\",\n  'rich-text-editor-min-height': \"220px\",\n  'empty-state-max-width': \"600px\",\n  'empty-state-min-height': \"400px\",\n  'input-otp-slot-width': \"36px\",\n  'input-otp-slot-height': \"44px\",\n  'input-otp-separator-width': \"12px\",\n  'kbd-font-size-sm': \"11px\",\n  'kbd-min-width': \"1.75em\",\n  'kbd-padding-block-sm': \"2px\",\n  'kbd-padding-inline-sm': \"5px\",\n  'kbd-padding-block-md': \"3px\",\n  'kbd-padding-inline-md': \"7px\",\n  'navigation-menu-indicator-size': \"10px\",\n  'notification-center-badge-font-size': \"10px\",\n  'notification-center-panel-width': \"320px\",\n  'notification-center-list-max-height': \"400px\",\n  'notification-center-item-dot-offset': \"6px\",\n  'resizable-grip-radius': \"2px\",\n  'slider-min-width': \"160px\",\n  'slider-axis-length': \"160px\",\n  'switch-width': \"44px\",\n  'switch-height': \"24px\",\n  'switch-width-sm': \"36px\",\n  'switch-height-sm': \"20px\",\n  'switch-thumb-size': \"20px\",\n  'switch-thumb-size-sm': \"16px\",\n  'switch-thumb-translate': \"20px\",\n  'switch-thumb-translate-sm': \"16px\",\n  'textarea-min-height-base': \"80px\",\n  'tag-font-size-sm': \"11px\",\n  'toast-viewport-width': \"390px\",\n  'tooltip-max-width': \"200px\",\n  'size-dialog-sm-width': \"400px\",\n  'size-menu-min-width': \"180px\",\n  'size-popover-min-width': \"200px\",\n  'size-popover-max-width': \"380px\",\n  'size-scroll-thumb-size': \"6px\",\n  'size-color-picker-width': \"320px\",\n  'size-field-label-max': \"160px\",\n  'size-field-label-min': \"80px\",\n  'size-xs': \"16px\",\n  'size-sm': \"20px\",\n  'size-md': \"24px\",\n  'size-lg': \"32px\",\n  'size-xl': \"40px\",\n  'size-2xl': \"48px\",\n  'size-3xl': \"56px\",\n  'size-4xl': \"64px\",\n  'container-max-width': \"1280px\",\n  'motion-duration-fast': \"150ms\",\n  'motion-duration-normal': \"250ms\",\n  'motion-duration-slow': \"350ms\",\n  'motion-duration-spin': \"900ms\",\n  'motion-duration-blink': \"1000ms\",\n  'motion-duration-shimmer': \"1400ms\",\n  'motion-easing-in-out': \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  'motion-easing-out': \"cubic-bezier(0, 0, 0.2, 1)\",\n  'motion-easing-in': \"cubic-bezier(0.4, 0, 1, 1)\",\n  'motion-easing-standard': \"cubic-bezier(0.2, 0, 0, 1)\",\n  'motion-easing-spring': \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n  'motion-easing-emphasized': \"cubic-bezier(0.16, 1, 0.3, 1)\",\n  'opacity-disabled': \"0.38\",\n  'opacity-hover': \"0.08\",\n  'opacity-pressed': \"0.16\",\n  'opacity-subtle': \"0.85\",\n  'opacity-muted': \"0.4\",\n  'opacity-faded': \"0.6\",\n  'opacity-subtle-hover': \"0.8\",\n  'space-0': \"0px\",\n  'space-1': \"4px\",\n  'space-2': \"8px\",\n  'space-3': \"12px\",\n  'space-4': \"16px\",\n  'space-5': \"20px\",\n  'space-6': \"24px\",\n  'space-7': \"28px\",\n  'space-8': \"32px\",\n  'space-9': \"36px\",\n  'space-unit': \"4px\",\n  'space-xs': \"4px\",\n  'space-sm': \"8px\",\n  'space-md': \"16px\",\n  'space-lg': \"24px\",\n  'space-xl': \"32px\",\n  'space-2xl': \"48px\",\n  'space-3xl': \"64px\",\n  'space-margin': \"24px\",\n  'space-gutter': \"24px\",\n  'border-width-none': \"0px\",\n  'border-width-xs': \"0.5px\",\n  'border-width-sm': \"1px\",\n  'border-width-md': \"1.5px\",\n  'border-width-lg': \"2px\",\n  'border-width-xl': \"3px\",\n  'radius-none': \"0px\",\n  'radius-sm': \"4px\",\n  'radius-md': \"8px\",\n  'radius-lg': \"12px\",\n  'radius-xl': \"16px\",\n  'radius-2xl': \"24px\",\n  'radius-full': \"9999px\",\n  'typography-display-large': \"[object Object]\",\n  'typography-display-medium': \"[object Object]\",\n  'typography-headline-large': \"[object Object]\",\n  'typography-headline-medium': \"[object Object]\",\n  'typography-body-large': \"[object Object]\",\n  'typography-body-medium': \"[object Object]\",\n  'typography-body-small': \"[object Object]\",\n  'typography-label-large': \"[object Object]\",\n  'typography-label-medium': \"[object Object]\",\n  'typography-label-small': \"[object Object]\",\n  'typography-code': \"[object Object]\",\n  'z-index-elevated': \"1\",\n  'z-index-elevated-strong': \"2\",\n  'z-index-overlay-local': \"10\",\n  'z-index-dropdown': \"50\",\n  'z-index-sticky': \"60\",\n  'z-index-fixed': \"70\",\n  'z-index-overlay': \"80\",\n  'z-index-modal': \"90\",\n  'z-index-toast': \"100\",\n}\n"],
+  "sourcesContent": ["// Auto-generated by Style Dictionary \u2014 do not edit manually.\nexport const tokens: Record<string, string | number> = {\n  'sheet-min-height': \"80vh\",\n  'sheet-width': \"380px\",\n  'sheet-width-sm': \"320px\",\n  'sheet-width-lg': \"480px\",\n  'chart-min-height': \"240px\",\n  'data-table-empty-height': \"192px\",\n  'sidebar-width': \"272px\",\n  'sidebar-width-collapsed': \"72px\",\n  'calendar-width': \"320px\",\n  'combobox-content-width': \"320px\",\n  'combobox-list-max-height': \"300px\",\n  'dialog-content-width': \"560px\",\n  'dialog-content-width-lg': \"720px\",\n  'drawer-min-height': \"30vh\",\n  'drawer-min-height-sm': \"24vh\",\n  'drawer-min-height-lg': \"50vh\",\n  'drawer-min-height-full': \"100vh\",\n  'rich-text-editor-min-height': \"220px\",\n  'empty-state-max-width': \"600px\",\n  'empty-state-min-height': \"400px\",\n  'input-otp-slot-width': \"36px\",\n  'input-otp-slot-height': \"44px\",\n  'input-otp-separator-width': \"12px\",\n  'kbd-font-size-sm': \"11px\",\n  'kbd-min-width': \"1.75em\",\n  'kbd-padding-block-sm': \"2px\",\n  'kbd-padding-inline-sm': \"5px\",\n  'kbd-padding-block-md': \"3px\",\n  'kbd-padding-inline-md': \"7px\",\n  'navigation-menu-indicator-size': \"10px\",\n  'notification-center-badge-font-size': \"10px\",\n  'notification-center-panel-width': \"320px\",\n  'notification-center-list-max-height': \"400px\",\n  'notification-center-item-dot-offset': \"6px\",\n  'resizable-grip-radius': \"2px\",\n  'slider-min-width': \"160px\",\n  'slider-axis-length': \"160px\",\n  'switch-width': \"44px\",\n  'switch-height': \"24px\",\n  'switch-width-sm': \"36px\",\n  'switch-height-sm': \"20px\",\n  'switch-thumb-size': \"20px\",\n  'switch-thumb-size-sm': \"16px\",\n  'switch-thumb-translate': \"20px\",\n  'switch-thumb-translate-sm': \"16px\",\n  'textarea-min-height-base': \"80px\",\n  'tag-font-size-sm': \"11px\",\n  'toast-viewport-width': \"390px\",\n  'tooltip-max-width': \"200px\",\n  'size-dialog-sm-width': \"400px\",\n  'size-menu-min-width': \"180px\",\n  'size-popover-min-width': \"200px\",\n  'size-popover-max-width': \"380px\",\n  'size-scroll-thumb-size': \"6px\",\n  'size-color-picker-width': \"320px\",\n  'size-field-label-max': \"160px\",\n  'size-field-label-min': \"80px\",\n  'size-xs': \"16px\",\n  'size-sm': \"20px\",\n  'size-md': \"24px\",\n  'size-lg': \"32px\",\n  'size-xl': \"40px\",\n  'size-2xl': \"48px\",\n  'size-3xl': \"56px\",\n  'size-4xl': \"64px\",\n  'container-max-width': \"1280px\",\n  'motion-duration-fast': \"150ms\",\n  'motion-duration-normal': \"250ms\",\n  'motion-duration-slow': \"350ms\",\n  'motion-duration-spin': \"900ms\",\n  'motion-duration-blink': \"1000ms\",\n  'motion-duration-shimmer': \"1400ms\",\n  'motion-easing-in-out': \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  'motion-easing-out': \"cubic-bezier(0, 0, 0.2, 1)\",\n  'motion-easing-in': \"cubic-bezier(0.4, 0, 1, 1)\",\n  'motion-easing-standard': \"cubic-bezier(0.2, 0, 0, 1)\",\n  'motion-easing-spring': \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n  'motion-easing-emphasized': \"cubic-bezier(0.16, 1, 0.3, 1)\",\n  'opacity-disabled': \"0.38\",\n  'opacity-hover': \"0.08\",\n  'opacity-pressed': \"0.16\",\n  'opacity-subtle': \"0.85\",\n  'opacity-muted': \"0.4\",\n  'opacity-faded': \"0.6\",\n  'opacity-subtle-hover': \"0.8\",\n  'space-0': \"0px\",\n  'space-1': \"4px\",\n  'space-2': \"8px\",\n  'space-3': \"12px\",\n  'space-4': \"16px\",\n  'space-5': \"20px\",\n  'space-6': \"24px\",\n  'space-7': \"28px\",\n  'space-8': \"32px\",\n  'space-9': \"36px\",\n  'space-unit': \"4px\",\n  'space-xs': \"4px\",\n  'space-sm': \"8px\",\n  'space-md': \"16px\",\n  'space-lg': \"24px\",\n  'space-xl': \"32px\",\n  'space-2xl': \"48px\",\n  'space-3xl': \"64px\",\n  'space-margin': \"24px\",\n  'space-gutter': \"24px\",\n  'border-width-none': \"0px\",\n  'border-width-xs': \"0.5px\",\n  'border-width-sm': \"1px\",\n  'border-width-md': \"1.5px\",\n  'border-width-lg': \"2px\",\n  'border-width-xl': \"3px\",\n  'radius-none': \"0px\",\n  'radius-sm': \"4px\",\n  'radius-md': \"8px\",\n  'radius-lg': \"12px\",\n  'radius-xl': \"16px\",\n  'radius-2xl': \"24px\",\n  'radius-full': \"9999px\",\n  'typography-display-large': \"[object Object]\",\n  'typography-display-medium': \"[object Object]\",\n  'typography-headline-large': \"[object Object]\",\n  'typography-headline-medium': \"[object Object]\",\n  'typography-body-large': \"[object Object]\",\n  'typography-body-medium': \"[object Object]\",\n  'typography-body-small': \"[object Object]\",\n  'typography-label-large': \"[object Object]\",\n  'typography-label-medium': \"[object Object]\",\n  'typography-label-small': \"[object Object]\",\n  'typography-code': \"[object Object]\",\n  'z-index-elevated': \"1\",\n  'z-index-elevated-strong': \"2\",\n  'z-index-overlay-local': \"10\",\n  'z-index-dropdown': \"50\",\n  'z-index-sticky': \"60\",\n  'z-index-fixed': \"70\",\n  'z-index-overlay': \"80\",\n  'z-index-modal': \"90\",\n  'z-index-toast': \"100\",\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/generated/tokens.js

@@ -4,7 +4,7 @@ const tokens = {
   "sheet-width-sm": "320px",
   "sheet-width-lg": "480px",
   "chart-min-height": "240px",
-  "data-table-empty-height": "96px",
+  "data-table-empty-height": "192px",
   "sidebar-width": "272px",
   "sidebar-width-collapsed": "72px",
   "calendar-width": "320px",

package/dist/generated/tokens.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/generated/tokens.ts"],
-  "sourcesContent": ["// Auto-generated by Style Dictionary \u2014 do not edit manually.\nexport const tokens: Record<string, string | number> = {\n  'sheet-min-height': \"80vh\",\n  'sheet-width': \"380px\",\n  'sheet-width-sm': \"320px\",\n  'sheet-width-lg': \"480px\",\n  'chart-min-height': \"240px\",\n  'data-table-empty-height': \"96px\",\n  'sidebar-width': \"272px\",\n  'sidebar-width-collapsed': \"72px\",\n  'calendar-width': \"320px\",\n  'combobox-content-width': \"320px\",\n  'combobox-list-max-height': \"300px\",\n  'dialog-content-width': \"560px\",\n  'dialog-content-width-lg': \"720px\",\n  'drawer-min-height': \"30vh\",\n  'drawer-min-height-sm': \"24vh\",\n  'drawer-min-height-lg': \"50vh\",\n  'drawer-min-height-full': \"100vh\",\n  'rich-text-editor-min-height': \"220px\",\n  'empty-state-max-width': \"600px\",\n  'empty-state-min-height': \"400px\",\n  'input-otp-slot-width': \"36px\",\n  'input-otp-slot-height': \"44px\",\n  'input-otp-separator-width': \"12px\",\n  'kbd-font-size-sm': \"11px\",\n  'kbd-min-width': \"1.75em\",\n  'kbd-padding-block-sm': \"2px\",\n  'kbd-padding-inline-sm': \"5px\",\n  'kbd-padding-block-md': \"3px\",\n  'kbd-padding-inline-md': \"7px\",\n  'navigation-menu-indicator-size': \"10px\",\n  'notification-center-badge-font-size': \"10px\",\n  'notification-center-panel-width': \"320px\",\n  'notification-center-list-max-height': \"400px\",\n  'notification-center-item-dot-offset': \"6px\",\n  'resizable-grip-radius': \"2px\",\n  'slider-min-width': \"160px\",\n  'slider-axis-length': \"160px\",\n  'switch-width': \"44px\",\n  'switch-height': \"24px\",\n  'switch-width-sm': \"36px\",\n  'switch-height-sm': \"20px\",\n  'switch-thumb-size': \"20px\",\n  'switch-thumb-size-sm': \"16px\",\n  'switch-thumb-translate': \"20px\",\n  'switch-thumb-translate-sm': \"16px\",\n  'textarea-min-height-base': \"80px\",\n  'tag-font-size-sm': \"11px\",\n  'toast-viewport-width': \"390px\",\n  'tooltip-max-width': \"200px\",\n  'size-dialog-sm-width': \"400px\",\n  'size-menu-min-width': \"180px\",\n  'size-popover-min-width': \"200px\",\n  'size-popover-max-width': \"380px\",\n  'size-scroll-thumb-size': \"6px\",\n  'size-color-picker-width': \"320px\",\n  'size-field-label-max': \"160px\",\n  'size-field-label-min': \"80px\",\n  'size-xs': \"16px\",\n  'size-sm': \"20px\",\n  'size-md': \"24px\",\n  'size-lg': \"32px\",\n  'size-xl': \"40px\",\n  'size-2xl': \"48px\",\n  'size-3xl': \"56px\",\n  'size-4xl': \"64px\",\n  'container-max-width': \"1280px\",\n  'motion-duration-fast': \"150ms\",\n  'motion-duration-normal': \"250ms\",\n  'motion-duration-slow': \"350ms\",\n  'motion-duration-spin': \"900ms\",\n  'motion-duration-blink': \"1000ms\",\n  'motion-duration-shimmer': \"1400ms\",\n  'motion-easing-in-out': \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  'motion-easing-out': \"cubic-bezier(0, 0, 0.2, 1)\",\n  'motion-easing-in': \"cubic-bezier(0.4, 0, 1, 1)\",\n  'motion-easing-standard': \"cubic-bezier(0.2, 0, 0, 1)\",\n  'motion-easing-spring': \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n  'motion-easing-emphasized': \"cubic-bezier(0.16, 1, 0.3, 1)\",\n  'opacity-disabled': \"0.38\",\n  'opacity-hover': \"0.08\",\n  'opacity-pressed': \"0.16\",\n  'opacity-subtle': \"0.85\",\n  'opacity-muted': \"0.4\",\n  'opacity-faded': \"0.6\",\n  'opacity-subtle-hover': \"0.8\",\n  'space-0': \"0px\",\n  'space-1': \"4px\",\n  'space-2': \"8px\",\n  'space-3': \"12px\",\n  'space-4': \"16px\",\n  'space-5': \"20px\",\n  'space-6': \"24px\",\n  'space-7': \"28px\",\n  'space-8': \"32px\",\n  'space-9': \"36px\",\n  'space-unit': \"4px\",\n  'space-xs': \"4px\",\n  'space-sm': \"8px\",\n  'space-md': \"16px\",\n  'space-lg': \"24px\",\n  'space-xl': \"32px\",\n  'space-2xl': \"48px\",\n  'space-3xl': \"64px\",\n  'space-margin': \"24px\",\n  'space-gutter': \"24px\",\n  'border-width-none': \"0px\",\n  'border-width-xs': \"0.5px\",\n  'border-width-sm': \"1px\",\n  'border-width-md': \"1.5px\",\n  'border-width-lg': \"2px\",\n  'border-width-xl': \"3px\",\n  'radius-none': \"0px\",\n  'radius-sm': \"4px\",\n  'radius-md': \"8px\",\n  'radius-lg': \"12px\",\n  'radius-xl': \"16px\",\n  'radius-2xl': \"24px\",\n  'radius-full': \"9999px\",\n  'typography-display-large': \"[object Object]\",\n  'typography-display-medium': \"[object Object]\",\n  'typography-headline-large': \"[object Object]\",\n  'typography-headline-medium': \"[object Object]\",\n  'typography-body-large': \"[object Object]\",\n  'typography-body-medium': \"[object Object]\",\n  'typography-body-small': \"[object Object]\",\n  'typography-label-large': \"[object Object]\",\n  'typography-label-medium': \"[object Object]\",\n  'typography-label-small': \"[object Object]\",\n  'typography-code': \"[object Object]\",\n  'z-index-elevated': \"1\",\n  'z-index-elevated-strong': \"2\",\n  'z-index-overlay-local': \"10\",\n  'z-index-dropdown': \"50\",\n  'z-index-sticky': \"60\",\n  'z-index-fixed': \"70\",\n  'z-index-overlay': \"80\",\n  'z-index-modal': \"90\",\n  'z-index-toast': \"100\",\n}\n"],
+  "sourcesContent": ["// Auto-generated by Style Dictionary \u2014 do not edit manually.\nexport const tokens: Record<string, string | number> = {\n  'sheet-min-height': \"80vh\",\n  'sheet-width': \"380px\",\n  'sheet-width-sm': \"320px\",\n  'sheet-width-lg': \"480px\",\n  'chart-min-height': \"240px\",\n  'data-table-empty-height': \"192px\",\n  'sidebar-width': \"272px\",\n  'sidebar-width-collapsed': \"72px\",\n  'calendar-width': \"320px\",\n  'combobox-content-width': \"320px\",\n  'combobox-list-max-height': \"300px\",\n  'dialog-content-width': \"560px\",\n  'dialog-content-width-lg': \"720px\",\n  'drawer-min-height': \"30vh\",\n  'drawer-min-height-sm': \"24vh\",\n  'drawer-min-height-lg': \"50vh\",\n  'drawer-min-height-full': \"100vh\",\n  'rich-text-editor-min-height': \"220px\",\n  'empty-state-max-width': \"600px\",\n  'empty-state-min-height': \"400px\",\n  'input-otp-slot-width': \"36px\",\n  'input-otp-slot-height': \"44px\",\n  'input-otp-separator-width': \"12px\",\n  'kbd-font-size-sm': \"11px\",\n  'kbd-min-width': \"1.75em\",\n  'kbd-padding-block-sm': \"2px\",\n  'kbd-padding-inline-sm': \"5px\",\n  'kbd-padding-block-md': \"3px\",\n  'kbd-padding-inline-md': \"7px\",\n  'navigation-menu-indicator-size': \"10px\",\n  'notification-center-badge-font-size': \"10px\",\n  'notification-center-panel-width': \"320px\",\n  'notification-center-list-max-height': \"400px\",\n  'notification-center-item-dot-offset': \"6px\",\n  'resizable-grip-radius': \"2px\",\n  'slider-min-width': \"160px\",\n  'slider-axis-length': \"160px\",\n  'switch-width': \"44px\",\n  'switch-height': \"24px\",\n  'switch-width-sm': \"36px\",\n  'switch-height-sm': \"20px\",\n  'switch-thumb-size': \"20px\",\n  'switch-thumb-size-sm': \"16px\",\n  'switch-thumb-translate': \"20px\",\n  'switch-thumb-translate-sm': \"16px\",\n  'textarea-min-height-base': \"80px\",\n  'tag-font-size-sm': \"11px\",\n  'toast-viewport-width': \"390px\",\n  'tooltip-max-width': \"200px\",\n  'size-dialog-sm-width': \"400px\",\n  'size-menu-min-width': \"180px\",\n  'size-popover-min-width': \"200px\",\n  'size-popover-max-width': \"380px\",\n  'size-scroll-thumb-size': \"6px\",\n  'size-color-picker-width': \"320px\",\n  'size-field-label-max': \"160px\",\n  'size-field-label-min': \"80px\",\n  'size-xs': \"16px\",\n  'size-sm': \"20px\",\n  'size-md': \"24px\",\n  'size-lg': \"32px\",\n  'size-xl': \"40px\",\n  'size-2xl': \"48px\",\n  'size-3xl': \"56px\",\n  'size-4xl': \"64px\",\n  'container-max-width': \"1280px\",\n  'motion-duration-fast': \"150ms\",\n  'motion-duration-normal': \"250ms\",\n  'motion-duration-slow': \"350ms\",\n  'motion-duration-spin': \"900ms\",\n  'motion-duration-blink': \"1000ms\",\n  'motion-duration-shimmer': \"1400ms\",\n  'motion-easing-in-out': \"cubic-bezier(0.4, 0, 0.2, 1)\",\n  'motion-easing-out': \"cubic-bezier(0, 0, 0.2, 1)\",\n  'motion-easing-in': \"cubic-bezier(0.4, 0, 1, 1)\",\n  'motion-easing-standard': \"cubic-bezier(0.2, 0, 0, 1)\",\n  'motion-easing-spring': \"cubic-bezier(0.34, 1.56, 0.64, 1)\",\n  'motion-easing-emphasized': \"cubic-bezier(0.16, 1, 0.3, 1)\",\n  'opacity-disabled': \"0.38\",\n  'opacity-hover': \"0.08\",\n  'opacity-pressed': \"0.16\",\n  'opacity-subtle': \"0.85\",\n  'opacity-muted': \"0.4\",\n  'opacity-faded': \"0.6\",\n  'opacity-subtle-hover': \"0.8\",\n  'space-0': \"0px\",\n  'space-1': \"4px\",\n  'space-2': \"8px\",\n  'space-3': \"12px\",\n  'space-4': \"16px\",\n  'space-5': \"20px\",\n  'space-6': \"24px\",\n  'space-7': \"28px\",\n  'space-8': \"32px\",\n  'space-9': \"36px\",\n  'space-unit': \"4px\",\n  'space-xs': \"4px\",\n  'space-sm': \"8px\",\n  'space-md': \"16px\",\n  'space-lg': \"24px\",\n  'space-xl': \"32px\",\n  'space-2xl': \"48px\",\n  'space-3xl': \"64px\",\n  'space-margin': \"24px\",\n  'space-gutter': \"24px\",\n  'border-width-none': \"0px\",\n  'border-width-xs': \"0.5px\",\n  'border-width-sm': \"1px\",\n  'border-width-md': \"1.5px\",\n  'border-width-lg': \"2px\",\n  'border-width-xl': \"3px\",\n  'radius-none': \"0px\",\n  'radius-sm': \"4px\",\n  'radius-md': \"8px\",\n  'radius-lg': \"12px\",\n  'radius-xl': \"16px\",\n  'radius-2xl': \"24px\",\n  'radius-full': \"9999px\",\n  'typography-display-large': \"[object Object]\",\n  'typography-display-medium': \"[object Object]\",\n  'typography-headline-large': \"[object Object]\",\n  'typography-headline-medium': \"[object Object]\",\n  'typography-body-large': \"[object Object]\",\n  'typography-body-medium': \"[object Object]\",\n  'typography-body-small': \"[object Object]\",\n  'typography-label-large': \"[object Object]\",\n  'typography-label-medium': \"[object Object]\",\n  'typography-label-small': \"[object Object]\",\n  'typography-code': \"[object Object]\",\n  'z-index-elevated': \"1\",\n  'z-index-elevated-strong': \"2\",\n  'z-index-overlay-local': \"10\",\n  'z-index-dropdown': \"50\",\n  'z-index-sticky': \"60\",\n  'z-index-fixed': \"70\",\n  'z-index-overlay': \"80\",\n  'z-index-modal': \"90\",\n  'z-index-toast': \"100\",\n}\n"],
   "mappings": "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",
   "names": []
 }

package/dist/motion.css

@@ -372,10 +372,23 @@
    day zero-size layout bug fixed on /motion's demo page — even rendered at
    its correct size, the dots themselves were too faint to read on a real
    screen, not just in the demo. */
+/* 2026-09-30 seam + tempo fix (direct feedback: "no smooth movings...
+   40s before the movement, feels like lagging"). Two stacked causes:
+   60px over 40s is 1.5px/s — below perception — and ease-in-out parks
+   velocity near zero at both ends of every 40s leg, so for seconds at a
+   time literally zero pixels moved. Now a true seamless loop instead of
+   an alternate: the 8-dot field is a 120px tile (background-repeat),
+   the layer is oversized one tile top+bottom so travel never exposes a
+   gap, and the keyframe translates exactly one tile period — end state
+   == start state, so linear infinite has no snap point at all. 120px
+   per 12s (10px/s) reads as alive-but-ambient; no dot sits on a tile
+   boundary (min 15% / max 90% of 120px), so repeats don't clip. */
 .dsx-motion-starfield::before {
   content: '';
   position: absolute;
-  inset: 0;
+  inset: -120px 0;
+  background-size: 100% 120px;
+  background-repeat: repeat;
   background-image: radial-gradient(2px 2px at 12% 22%, var(--dsx-color-on-surface), transparent),
     radial-gradient(2.5px 2.5px at 32% 68%, var(--dsx-color-on-surface), transparent),
     radial-gradient(1.5px 1.5px at 52% 15%, var(--dsx-color-on-surface), transparent),
@@ -385,7 +398,7 @@
     radial-gradient(1.5px 1.5px at 8% 85%, var(--dsx-color-on-surface), transparent),
     radial-gradient(2.5px 2.5px at 45% 90%, var(--dsx-color-on-surface), transparent);
   opacity: 0.4;
-  animation: dsx-motion-starfield-drift 40s linear infinite;
+  animation: dsx-motion-starfield-drift 12s linear infinite;
   pointer-events: none;
   z-index: -1;
 }
@@ -396,7 +409,7 @@
   }
 
   to {
-    transform: translateY(-60px);
+    transform: translateY(-120px);
   }
 }
 
@@ -469,6 +482,8 @@
   .dsx-motion-scan,
   .dsx-motion-glow,
   .dsx-motion-drift,
+  .dsx-motion-starfield::before,
+  .dsx-motion-aurora::after,
   .dsx-motion-twinkle {
     animation: none !important;
     opacity: 1 !important;