@d4gger/design-system 3.0.0 → 3.0.1

package/dist/components/table.css

@@ -25,6 +25,10 @@
   border-bottom: 0;
 }
 
+.dsx-table__body tr {
+  transition: background-color var(--dsx-motion-duration-fast) var(--dsx-motion-easing-standard);
+}
+
 .dsx-table__body tr:hover {
   background: var(--dsx-effect-hover-ghost);
 }
@@ -52,10 +56,6 @@
   font-weight: var(--dsx-typography-label-large-font-weight);
 }
 
-.dsx-table__row:hover {
-  background: var(--dsx-color-high-contrast-container);
-}
-
 .dsx-table__row:last-child .dsx-table__cell {
   border-bottom: 0;
 }
@@ -84,7 +84,14 @@
 }
 
 .dsx-table[data-variant='ghost'] .dsx-table__row:hover {
-  background: var(--dsx-color-high-contrast-container);
+  background: var(--dsx-effect-hover-ghost);
+}
+
+/* ---- separator ---- */
+
+.dsx-table[data-separator='grid'] .dsx-table__head:not(:last-child),
+.dsx-table[data-separator='grid'] .dsx-table__cell:not(:last-child) {
+  border-right: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
 /* ---- layout ---- */
@@ -112,16 +119,16 @@
 
 /* ---- cell justify ---- */
 
-.dsx-table__cell[data-justify='start'] {
-  justify-content: flex-start;
+.dsx-table .dsx-table__cell[data-justify='start'] {
+  text-align: start;
 }
 
-.dsx-table__cell[data-justify='center'] {
-  justify-content: center;
+.dsx-table .dsx-table__cell[data-justify='center'] {
+  text-align: center;
 }
 
-.dsx-table__cell[data-justify='end'] {
-  justify-content: flex-end;
+.dsx-table .dsx-table__cell[data-justify='end'] {
+  text-align: end;
 }
 
 /* ---- cell width ---- */
@@ -158,12 +165,12 @@
 /* ---- column header cell ---- */
 
 .dsx-table__column-header-cell {
-  cursor: pointer;
-  user-select: none;
+  cursor: default;
 }
 
 .dsx-table__column-header-cell[data-sortable='true'] {
   cursor: pointer;
+  user-select: none;
 }
 
 .dsx-table__column-header-cell[data-sorted='asc']::after,

package/dist/components/tabs.css

@@ -5,6 +5,13 @@
   display: inline-flex;
   align-items: center;
   width: fit-content;
+  /* Narrow-container rule: cap at the container and scroll internally —
+     same containment as the segmented-control/button/toggle-group family.
+     A 5-tab strip wider than a 320px viewport scrolls instead of bleeding
+     with unreachable tabs. No visual change at widths that fit. */
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
   border-bottom: var(--dsx-border-width-md, var(--dsx-border-width-sm)) solid var(--dsx-control-separator-color);
   gap: var(--dsx-space-xs);
 }
@@ -22,6 +29,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  /* Never compress inside the scrolled list — labels would truncate
+     otherwise. No effect in roomy containers. */
+  flex-shrink: 0;
   padding: var(--dsx-space-sm) var(--dsx-space-md);
   border: 0;
   border-radius: var(--dsx-rounded-md);

package/dist/components/timeline.css

@@ -4,6 +4,8 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-timeline--left {
@@ -17,6 +19,8 @@
 .dsx-timeline__item {
   display: flex;
   position: relative;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-timeline--left .dsx-timeline__item {
@@ -24,36 +28,49 @@
   gap: var(--dsx-space-lg);
 }
 
+/* Alternate variant: centered dot-column spine with parity-split content.
+   Shares Stepper's vertical rail engine (see 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)`. 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. Keep in sync with stepper.css. */
 .dsx-timeline--alternate .dsx-timeline__item {
-  flex-direction: row;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+  column-gap: var(--dsx-space-lg);
   width: 100%;
 }
 
-/* Zigzag: even items flip marker/content to the opposite side. This is a
-   per-item flip, not a shared centered spine — the connector position is
-   re-anchored to the marker's new (right) edge to match.
-   :nth-child()/[data-size] are wrapped in :where() so these rules tie the
-   file's pre-existing (0,3,0) ceiling on source order instead of exceeding
-   it — same technique as the V-2 card-selection fix. */
-.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) {
-  flex-direction: row-reverse;
+/* Parity split: the 1fr tracks exist without any spacer element, so equal
+   fr shares keep the marker exactly on the centerline in both parities.
+   Odd items read content-left, even items read content-right. */
+.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(odd)) .dsx-timeline__content {
+  grid-column: 1;
+  grid-row: 1;
+  text-align: right;
 }
 
-.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__content {
-  text-align: right;
+.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(odd)) .dsx-timeline__marker {
+  grid-column: 2;
+  grid-row: 1;
 }
 
-.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__connector {
-  left: auto;
-  right: calc(var(--dsx-size-md) / 2 - var(--dsx-border-width-sm) / 2);
+.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__marker {
+  grid-column: 2;
+  grid-row: 1;
 }
 
-.dsx-timeline--alternate:where([data-size='sm']) .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__connector {
-  right: calc(var(--dsx-size-sm) / 2 - var(--dsx-border-width-sm) / 2);
+.dsx-timeline--alternate .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__content {
+  grid-column: 3;
+  grid-row: 1;
+  text-align: left;
 }
 
-.dsx-timeline--alternate:where([data-size='lg']) .dsx-timeline__item:where(:nth-child(even)) .dsx-timeline__connector {
-  right: calc(var(--dsx-size-lg) / 2 - var(--dsx-border-width-sm) / 2);
+.dsx-timeline--alternate .dsx-timeline__content {
+  min-width: 0;
 }
 
 .dsx-timeline__marker {
@@ -94,6 +111,19 @@
   top: var(--dsx-size-lg);
 }
 
+/* Centered spine: the connector runs down the item's vertical centerline,
+   which is the marker center because both halves are equal flex: 1. `top`
+   still follows the marker size via the base size rules above — only the
+   horizontal anchor is overridden here. Specificity (0,3,0) ties the base
+   size rules, so this block must stay after them in source order. */
+.dsx-timeline--alternate[data-size='sm'] .dsx-timeline__connector,
+.dsx-timeline--alternate[data-size='md'] .dsx-timeline__connector,
+.dsx-timeline--alternate:not([data-size]) .dsx-timeline__connector,
+.dsx-timeline--alternate[data-size='lg'] .dsx-timeline__connector {
+  left: calc(50% - var(--dsx-border-width-sm) / 2);
+  right: auto;
+}
+
 .dsx-timeline__item--active .dsx-timeline__marker {
   border-color: var(--dsx-color-primary);
   background: var(--dsx-color-primary);
@@ -123,11 +153,17 @@
   background: var(--dsx-color-primary);
 }
 
+.dsx-timeline__item--error .dsx-timeline__connector {
+  background: var(--dsx-color-error);
+}
+
 .dsx-timeline__content {
   display: flex;
   flex-direction: column;
   gap: var(--dsx-space-2xs);
   flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
   padding-bottom: var(--dsx-space-lg);
 }
 

package/dist/components/toast.css

@@ -32,7 +32,39 @@
   background-color: var(--dsx-color-surface);
   border-radius: var(--dsx-rounded-md);
   border: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
-  box-shadow: var(--dsx-shadow-elevation-2);
+  box-shadow: var(--dsx-shadow-elevation-5); /* Spotlight (B4 Q3): below dialogs, above all menus */
+}
+
+/* Predetermined slot placement for action-bearing toasts: without it all
+   four slots land as flex siblings in one row, so title + description sit
+   side by side and squeeze the action (destructive story). Text stacks in
+   column one, action pins center-right, close top-right — no consumer
+   wrapper needed. Action-less toasts keep the flex row above untouched. */
+.dsx-toast:has(.dsx-toast__action) {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  grid-template-areas:
+    "title action close"
+    "description action close";
+  align-items: center;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__title {
+  grid-area: title;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__description {
+  grid-area: description;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__action {
+  grid-area: action;
+  align-self: center;
+}
+
+.dsx-toast:has(.dsx-toast__action) .dsx-toast__close {
+  grid-area: close;
+  align-self: start;
 }
 
 .dsx-toast[data-variant='success'] {

package/dist/components/toggle-group.css

@@ -6,6 +6,11 @@
   align-items: stretch;
   gap: 0;
   isolation: isolate;
+  /* Narrow-container rule (TMA re-audit 2026-09-23): the fused frame cannot
+     wrap, so cap at the container and scroll instead of hard-clipping the
+     last item on 320px screens. */
+  max-width: 100%;
+  overflow-x: auto;
 }
 
 .dsx-toggle-group__item {

package/dist/components.css

@@ -8,13 +8,13 @@
 @import 'components/aspect-ratio.css';
 @import 'components/avatar.css';
 @import 'components/badge.css';
+@import 'components/banner.css';
 @import 'components/button.css';
 @import 'components/card.css';
 @import 'components/carousel.css';
 @import 'components/checkbox.css';
 @import 'components/checkbox-cards.css';
 @import 'components/checkbox-group.css';
-@import 'components/control-group.css';
 @import 'components/context-menu.css';
 @import 'components/color-picker.css';
 @import 'components/color-swatch.css';
@@ -158,7 +158,6 @@
 .dsx-date-picker__trigger,
 .dsx-theme,
 .dsx-input-group,
-.dsx-control-group,
 .dsx-item,
 .dsx-kbd,
 .dsx-calendar,

package/dist/docs/README.md

@@ -70,6 +70,7 @@ They describe public intent and contracts; TypeScript declarations remain the ex
 - [Alert](./components/alert.md)
 - [AlertDialog](./components/alert-dialog.md)
 - [ArticleNodes](./components/article-nodes.md)
+- [Banner](./components/banner.md)
 - [Breadcrumb](./components/breadcrumb.md)
 - [ButtonGroup](./components/button-group.md)
 - [Calendar](./components/calendar.md)
@@ -86,7 +87,6 @@ They describe public intent and contracts; TypeScript declarations remain the ex
 - [Command](./components/command.md)
 - [CommentThread](./components/comment-thread.md)
 - [ContextMenu](./components/context-menu.md)
-- [ControlGroup](./components/control-group.md)
 - [CopyField](./components/copy-field.md)
 - [DataList](./components/data-list.md)
 - [DataTable](./components/data-table.md)

package/dist/docs/component-contract.md

@@ -47,6 +47,7 @@ from the closest RT category (see legend).
 | AspectRatio | RT AspectRatio | — | — | — | — | — | Layout utility |
 | Avatar | RT Avatar | ✓ | ✓ | ✓ | ✓ | ✓ | Full set |
 | Badge | RT Badge | ✓ | ✓ | ✓ | ✓ | ✓ | Full set |
+| Banner | Custom → none | ✓ | — | — | — | — | Hero mass; wash/fill variant |
 | Blockquote | RT Blockquote | — | — | — | — | — | Typographic; no styling props in RT |
 | Box | RT Box (layout) | — | — | — | — | — | Layout; no styling attrs |
 | Breadcrumb | Custom → none | — | ✓ | — | — | — | Size only; no RT counterpart |
@@ -71,7 +72,6 @@ from the closest RT category (see legend).
 | ConfigDrawer | Custom → none | — | — | — | — | — | Configuration UI; no data-* styling |
 | Container | RT Container | — | ✓ | — | — | — | Layout; size only in RT |
 | ContextMenu | Primitive → Dialog | — | ✓ | — | — | — | Content size by Dialog analogy |
-| ControlGroup | Custom → InputGroup/ButtonGroup | — | ✓ | — | ✓ | — | Wraps unlike controls (Select, ToggleGroup, Button); size + radius only, no variant/accent/high-contrast of its own |
 | CopyButton | Custom → Button | ✓ | ✓ | ✓ | ✓ | ✓ | Button clone; full contract |
 | CopyField | Custom → TextField | — | ✓ | — | — | — | Read-only field composition; size only on the root |
 | DataList | RT DataList | ✓ | ✓ | — | — | — | RT DataList: variant+size, no C/R/H |
@@ -86,7 +86,7 @@ from the closest RT category (see legend).
 | EmptyState | Custom → none | ✓ | ✓ | — | — | — | Size + variant (`default`/`unavailable`) |
 | Field | Custom → none | — | ✓ | — | — | — | Form field wrapper; size only |
 | FileUpload | Custom → TextField | — | ✓ | — | — | — | Input-like; size only |
-| FilterBar | Custom → none | — | ✓ | — | — | — | Toolbar composition; size only on the root |
+| FilterBar | Custom → none | — | ✓ | — | — | — | Toolbar composition; size only on the root (Rules/Rule/Builder/Search write no V/C/R/H attrs) |
 | Flex | RT Flex (layout) | — | — | — | — | — | Layout; no styling attrs |
 | FloatingPanel | Custom → Card | — | ✓ | — | — | — | Panel; size only |
 | FontProvider | Utility → none | — | — | — | — | — | No styling |
@@ -189,9 +189,9 @@ from the closest RT category (see legend).
 | V+S | Card, DataList, NativeSelect, SegmentedControl, Select, StatCard, Table, TabNav, Tabs, Toast | 10 |
 | S+C+H | Heading, Link, Text | 3 |
 | S+C | SegmentedMeter, Separator, Status | 3 |
-| S+R | ControlGroup, InputOtp, ScrollArea | 3 |
+| S+R | InputOtp, ScrollArea | 2 |
 | S only | AlertDialog, Breadcrumb, ButtonGroup, Calendar (see above), Carousel, CodeInput,<br>ColorPicker, ColorSwatch, Command, Container, ContextMenu, CopyField, DataTable,<br>DatePicker, Dialog, Drawer, DropdownMenu, EmptyState, Field, FileUpload, FilterBar,<br>FloatingPanel, HoverCard, Icon, InputGroup, Kbd, Label, Menu, Menubar, Metric,<br>NavigationMenu, Pagination, Popover, QrCode, Section, Sheet, Spinner, Stepper,<br>Timeline, TimePicker, ToggleTip, Toolbar, TreeView | 43 |
-| None | AccessibleIcon, Accordion, ArticleNodes, AspectRatio, Blockquote, Box, Chart,<br>Collapsible, CommentThread, ConfigDrawer, DirectionProvider, Em, Flex, FontProvider,<br>Form, Grid, Inset, Item, Marquee, NotificationCenter, PageContent, PageHeader, Prose, Quote,<br>Resizable, Result, RichTextEditor, Sidebar, Skeleton, Slot, Sonner, SortableList, Stack, Strong,<br>TableOfContents, Theme, ThemePanel, ThemeProvider, Tooltip, VisuallyHidden | 40 |
+| None | AccessibleIcon, Accordion, ArticleNodes, AspectRatio, Banner, Blockquote, Box, Chart,<br>Collapsible, CommentThread, ConfigDrawer, DirectionProvider, Em, Flex, FontProvider,<br>Form, Grid, Inset, Item, Marquee, NotificationCenter, PageContent, PageHeader, Prose, Quote,<br>Resizable, Result, RichTextEditor, Sidebar, Skeleton, Slot, Sonner, SortableList, Stack, Strong,<br>TableOfContents, Theme, ThemePanel, ThemeProvider, Tooltip, VisuallyHidden | 41 |
 
 **Total components covered: 131**
 

package/dist/docs/component-index.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "3.0.0",
+  "packageVersion": "3.0.1",
   "generatedFrom": "docs/design-system",
   "components": [
     {
@@ -435,6 +435,14 @@
       "status": "canonical",
       "documentation": "./components/article-nodes.md"
     },
+    {
+      "name": "Banner",
+      "slug": "banner",
+      "category": "Components",
+      "archetype": "composite",
+      "status": "canonical",
+      "documentation": "./components/banner.md"
+    },
     {
       "name": "Breadcrumb",
       "slug": "breadcrumb",
@@ -563,14 +571,6 @@
       "status": "canonical",
       "documentation": "./components/context-menu.md"
     },
-    {
-      "name": "ControlGroup",
-      "slug": "control-group",
-      "category": "Components",
-      "archetype": "composite",
-      "status": "canonical",
-      "documentation": "./components/control-group.md"
-    },
     {
       "name": "CopyField",
       "slug": "copy-field",

package/dist/docs/components/banner.md

@@ -0,0 +1,152 @@
+---
+title: Banner
+status: canonical
+category: Components
+archetype: composite
+depends_on:
+  - Text
+---
+
+# Banner
+
+Examples keep the headline value numeric and put units in Label or Footnote, preserving readable hero typography at narrow widths. Arbitrary consumer text still wraps within the surface.
+
+> Consumer note: this document describes public intent and contracts; the package TypeScript declarations are the exact API.
+
+## Purpose
+
+A hero mass: one label, one headline value, and an optional footnote over an accent wash or solid accent fill. A single mass by construction — it replaces Card-plus-StatCard nesting, which double-frames.
+
+## Anatomy & slots
+
+**Parent:** `Banner` (alias of `Banner.Root`).
+
+**Slots:**
+
+| Slot | Element | Renders | Notes |
+|---|---|---|---|
+| `Banner.Root` | `<section>` | Hero surface + class | `role="group"`, consumer `aria-label`. Writes `dsx-banner`. Supports `asChild`. |
+| `Banner.Label` | `<span>` | Uppercase muted label + class | Renders `Text` label-small. Writes `dsx-banner__label`. |
+| `Banner.Value` | `<span>` | Headline value + class | Uses a span with the display-medium token ramp. Writes `dsx-banner__value`. |
+| `Banner.Footnote` | `<span>` | Muted footnote + class | Renders `Text` body-small. Writes `dsx-banner__footnote`. Optional. |
+
+## Props contract
+
+| Prop | Type | Default | Required | Description | Responsive |
+|---|---|---|---|---|---|
+| `variant` | `'wash' \| 'fill'` | `'wash'` | no | Hero treatment; writes `data-variant`. `fill` is the solid-accent mass reusing Button primary's compliance (`accent-track` + `accent-contrast`). | no |
+| `asChild` | `boolean` | `false` | no | Renders the root through `Slot`; consumer supplies the host element. | no |
+| `className` | `string` | `undefined` | no | Extra classes appended to `dsx-banner`. | no |
+
+Rules:
+
+- Slots take no props besides `asChild` and `className`; all copy is children.
+- `variant="wash"` is the default; `variant="fill"` uses accent-track and accent-contrast. There are no size or tone variants.
+- Long values, identifiers, and footnotes wrap within the available width; content is never silently truncated.
+
+## CSS class contract
+
+**Root class:** `dsx-banner`
+
+**Slot classes:**
+
+| Slot | Class | CSS file |
+|---|---|---|
+| `Banner.Root` | `dsx-banner` | `banner.css` |
+| `Banner.Label` | `dsx-banner__label` | `banner.css` |
+| `Banner.Value` | `dsx-banner__value` | `banner.css` |
+| `Banner.Footnote` | `dsx-banner__footnote` | `banner.css` |
+
+The enum PropDef emits `dsx-banner-variant-wash` / `dsx-banner-variant-fill`; the fill alias shares the data-variant paint rules.
+
+**Responsive behavior:**
+
+- The component does not write `@media` rules.
+
+## Token mapping
+
+Every CSS value the component paints is a `var(--dsx-*)` token.
+
+| Property | Token | Role |
+|---|---|---|
+| Root background | `var(--dsx-color-accent-surface)` | Hero wash (wash variant) |
+| Fill background | `var(--dsx-color-accent-track)` | Solid accent mass (fill variant) |
+| Fill text | `var(--dsx-color-accent-contrast)` | Compliant text on fill (near-black on spark, white elsewhere) |
+| Root radius | `var(--dsx-rounded-lg)` | Hero corner roundness |
+| Root padding | `var(--dsx-space-lg)` | Hero internal spacing |
+| Root gap | `var(--dsx-space-xs)` | Stack rhythm label/value/footnote |
+| Label typography | `var(--dsx-typography-label-small-*)` | Label type scale |
+| Label color | `var(--dsx-color-on-surface-variant)` | Muted label on wash |
+| Value typography | `var(--dsx-typography-display-medium-*)` | Headline value type scale |
+| Value color | `var(--dsx-color-on-surface)` | Value ink on wash |
+| Footnote typography | `var(--dsx-typography-body-small-*)` | Footnote type scale |
+| Footnote color | `var(--dsx-color-on-surface-variant)` | Muted footnote on wash |
+
+## Motion contract
+
+None — no transitions, no animation. Pressed/`focus-visible` states do not apply (non-interactive).
+
+## Accessibility
+
+**Roles:**
+
+- `group` (from `<section>` with consumer `aria-label`).
+
+**Naming:**
+
+- The Root must have an accessible name via `aria-label` when the hero purpose is not obvious from context.
+
+**Color and meaning:**
+
+- The wash is decorative; label/value text carries all meaning with `on-surface` contrast.
+
+## Playground demo spec
+
+**Default story:**
+
+- Renders `Banner` with Label + Value. Asserts the root class is `dsx-banner` and the host element is `SECTION`.
+
+**Footnote story:**
+
+- Renders with `Banner.Footnote`. Asserts `dsx-banner__footnote` is present.
+
+**Variant story:**
+
+- Renders with `variant="fill"`. Asserts `data-variant="fill"` and the fill background token.
+
+**A11y story:**
+
+- Uses `vitest-axe` against the hero. Asserts there are no axe violations.
+
+**Props exposed in the playground controls:**
+
+`variant`: select (`wash`, `fill`), default `wash`.
+
+## Deliberate divergences (researched, 2026-10-02)
+
+Sibling-repo survey (Primer `Banner`/`PageHeader`/`Card`, Radix `Callout`/`Card`, Lobe docs-kit hero, NetBird `AnnouncementBanner`):
+
+- **No border, no leading icon.** Status banners pair their wash with a colored border + icon (Primer muted border, Radix accent ring). Banner is a hero mass, not an alert strip — the wash-vs-solid distinction alone carries the hierarchy. If an icon is ever needed, it becomes a new slot, not an ad-hoc child.
+- **Shared display-medium with StatCard.** Real heroes and stat cards share their value scale (Lobe h1 vs feature numbers differ by context, not by component); surface treatment — wash vs solid + shadow — is the differentiator, not type size.
+- **Padding kept symmetric with StatCard (`space-lg`).** Radix tightens Callout below Card; Banner keeps the roomier rhythm because hero values (45 days) run larger than list text. Revisit only with screenshot evidence.
+- **Name vs M2 Banner.** Material's Banner is a top-of-screen informational strip with acknowledgment actions — a different pattern. Ours is the marketing sense (hero banner). The spec's Purpose line is the disambiguator; do not reshape this component toward alert-strip behavior (that is `Callout`).
+
+## Wiring notes
+
+**Composes from:**
+
+- `Text`: Label (label-small) and Footnote (body-small). Value uses the display-medium token ramp directly.
+
+**Used by (planned):**
+
+- TMA user-console referral balance hero, home status hero (wash variant), subscription heroes — replacing Card-plus-StatCard nesting in each.
+
+**State boundaries:**
+
+- Owned by Banner: the wash surface, the label/value/footnote stack, the CSS classes.
+- Owned by the consumer: the copy, the `aria-label`, the surrounding page.
+
+**Boundary rules:**
+
+- App-owned data: copy, aria-label.
+- DS-owned visuals: wash, radius, padding, slot classes.

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

@@ -45,7 +45,7 @@ The root renders a `<div role="group">`. Children of the group share the first/l
 Rules:
 
 - `Omit<HTMLAttributes<HTMLDivElement>, ...>` is not applied; the type is a direct extension, so any `<div>` prop is forwarded.
-- The component does not own the buttons themselves. The consumer is responsible for sizing each `Button` to match the group's `size` token, and for keyboard semantics on every child.
+- The component does not own the buttons themselves. The group drives children min-height from its own `data-size`; the consumer remains responsible for keyboard semantics on every child.
 
 ## CSS class contract
 
@@ -55,7 +55,7 @@ Rules:
 
 | Attribute | Allowed values | Class | CSS file |
 |---|---|---|---|
-| `data-size` | `sm`, `md`, `lg` | `.dsx-button-group[data-size='sm'\|'md'\|'lg']` does not exist today; size is enforced by the children's own `data-size` hooks | `button-group.css` |
+| `data-size` | `sm`, `md`, `lg` | `.dsx-button-group[data-size='sm'\|'md'\|'lg'] > *` sets the matching density min-height token on every direct child, so the three sizes differ without consumer sizing | `button-group.css` |
 | (variant) | `default`, `outline` | `.dsx-button-group--default`, `.dsx-button-group--outline` | `button-group.css` |
 
 **Slot classes:**
@@ -69,6 +69,7 @@ Rules:
 
 - The component does not write `@media` rules. None of its prop defs are `responsive: true`. Size and variant are single-value only.
 - The component's CSS file is breakpoint-agnostic.
+- 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 action (proven 2026-09-23 in a definite 272px column: group caps at 272, `scrollWidth` 298 reachable by touch scroll).
 
 **Reduced motion:**
 
@@ -94,7 +95,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 
 Rules:
 
-- The component does not paint its own background, border, or shadow. Visual treatment is delegated to the children, which means the group's appearance is fully driven by the `Button` variant chosen for each child.
+- The component paints no background, border, or shadow of its own. In `default`, children render borderless (`border-color: transparent`) for the fused cluster; in `outline`, children keep their own joined borders, which read as the container edge. Beyond that, visual treatment is delegated to the children.
 
 ## Motion contract
 

package/dist/docs/components/button.md

@@ -61,7 +61,7 @@ Rules:
 | `data-size` | `sm`, `md`, `lg`, `icon` | `.dsx-button[data-size='sm']` etc. | `button.css` |
 | `data-radius` | `none`, `sm`, `md`, `lg`, `full` | `.dsx-button[data-radius='none']` etc. | `button.css` |
 | `data-accent-color` | `rift`, `warp`, `ray` (or any custom string) | `.dsx-button[data-accent-color='...']` (CSS hook) | `button.css` |
-| `data-halo` | `true` | `.dsx-button:where([data-variant='primary'])[data-halo='true']` (resting accent ring; hover/active keep it, no shadow morph without it) | `button.css` |
+| `data-halo` | `true` | Resting accent ring on every variant (`.dsx-button:where([data-variant='…'])[data-halo='true']`; hover/active keep it, no shadow morph without it) | `button.css` |
 | `data-high-contrast` | `true` | `.dsx-button:where([data-variant='primary'])[data-high-contrast='true']` etc. (variant-specific HC overrides) | `button.css` |
 | `data-loading` | `true` | `.dsx-button[data-loading='true']` | `button.css` (writes to cursor and spinner positioning) |
 | `data-disabled` | `true` | `.dsx-button[data-disabled='true']` | `button.css` |
@@ -112,7 +112,7 @@ Every CSS value the component paints is a `var(--dsx-*)` token.
 | Background (primary) | `var(--dsx-color-accent-track)` | Primary fill (ramp step 9). |
 | Text (primary) | `var(--dsx-color-accent-contrast)` | Primary text. |
 | Border (primary) | `var(--dsx-color-accent-track)` | Primary edge. |
-| Box shadow (primary) | `var(--dsx-shadow-accent-ring)` | Resting halo — open decision vs the 2026-09-05 remove-halo proposal. |
+| Box shadow (primary) | `var(--dsx-shadow-accent-ring)` | Resting halo — locked 2026-09-22 for every variant (was primary-only; settles the 2026-09-05 remove-halo proposal toward keep-and-extend). |
 | Box shadow (primary HC) | `var(--dsx-shadow-accent-glow)` | High-contrast primary elevation. |
 | Background (primary HC) | `var(--dsx-color-accent-indicator)` | High-contrast primary fill. |
 | Text (primary HC) | `var(--dsx-color-on-high-contrast)` | High-contrast primary text. |

package/dist/docs/components/card.md

@@ -93,6 +93,7 @@ The normalization is a one-way mapping: `outline` is the only variant that produ
 **Responsive behavior:**
 
 - The component does not write `@media` rules. `size`, `variant`, and `radius` are single-value only.
+- The root can shrink within its parent and is capped at the available width. Unbroken headings and identifiers wrap without truncation; Content and Footer retain their wrapping layout.
 
 **Reduced motion:**