@godxjp/ui 18.15.4 → 19.0.0

package/dist/tokens/components/feedback.css

@@ -10,6 +10,25 @@
    * modal Dialog. Defaults resolve to rgb(0 0 0 / 0.2) (sheet) and rgb(0 0 0 / 0.3) (dialog). */
   --sheet-overlay-background: initial;
   --sheet-overlay-alpha: 40%;
+  /* Sheet chrome rhythm (#319). --sheet-pad-x/-y already governed the panel inset, but the gaps
+   * INSIDE the chrome — header stack, title/subtitle pair, the extra-slot row — were literal, so
+   * a service could retune the sheet's outer padding and still be stuck with the inner rhythm. */
+  --sheet-shadow: var(--shadow-lg);
+  --sheet-header-space-gap: 0.375rem;
+  --sheet-title-block-space-gap: var(--space-1);
+  --sheet-title-row-space-gap: var(--space-3);
+  --sheet-extra-space-gap: var(--space-2);
+  --sheet-footer-space-gap: var(--space-2);
+  --sheet-title-font-size: var(--font-size-lg);
+  --sheet-description-font-size: var(--font-size-sm);
+  /* The scroll region keeps a sliver of padding so a focused control's ring is never clipped at
+   * the scroll edges — retune together with --focus-ring-width. */
+  --sheet-body-space-block: var(--space-1);
+  /* Close button: offset from the panel corner, and the inline room the header reserves so a
+   * title never runs under it. */
+  --sheet-close-offset: var(--space-4);
+  --sheet-close-rest-alpha: 0.7;
+  --sheet-header-close-space-inline-end: var(--space-8);
   --dialog-width-default: 32rem;
   --dialog-viewport-inset: 1.5rem;
   --dialog-overlay-background: initial;
@@ -21,6 +40,26 @@
   --dialog-space-inset: var(--dialog-space-y) var(--dialog-space-x);
   --dialog-space-gap: var(--space-stack-md);
   --dialog-close-space-offset: var(--space-4);
+  /* Dialog chrome rhythm (#319) — the exact mirror of the --sheet-* set above, because Dialog's
+   * header markup is byte-identical to Sheet's. --dialog-space-x/-y already governed the panel
+   * inset, but every gap INSIDE the chrome (header stack, title/subtitle pair, the extra-slot row)
+   * was a literal on the component, so a service could retune the outer padding and still be stuck
+   * with the inner rhythm. Defaults are the values the literals resolved to. */
+  --dialog-header-space-gap: var(--space-stack-xs);
+  --dialog-title-row-space-gap: var(--space-3);
+  --dialog-title-block-space-gap: var(--space-1);
+  --dialog-extra-space-gap: var(--space-2);
+  /* Inline room the header reserves so a long title or the extra slot never runs under the
+   * absolutely-positioned close button; retune together with --dialog-close-space-offset.
+   * Mirrors --sheet-header-close-space-inline-end. */
+  --dialog-header-close-space-inline-end: var(--space-8);
+  /* Close button rest opacity — quiet at rest, full on hover (rule #44). Was a hard 0.7 baked into
+   * dialog-layout.css with no way for a theme to make the ✕ louder. Mirrors
+   * --sheet-close-rest-alpha so the two overlay siblings retune together. */
+  --dialog-close-rest-alpha: 0.7;
+  /* Type-to-confirm challenge: the step-up failure line under the input. Its size + ink were
+   * `text-sm text-destructive` on the component, i.e. unreachable from a theme. */
+  --dialog-step-up-error-font-size: var(--font-size-sm);
   /* Alert corner radius (gh#268 — rule #45): a full-width Alert often sits in the
    * same page column as a Card — so the DEFAULT IS the Card radius (gh#282); a service re-tunes by
    * overriding this once. Default keeps the historical --radius-md. */
@@ -29,17 +68,38 @@
   --alert-space-gap: var(--space-inline-md);
   --alert-inner-space-gap: var(--space-stack-sm);
   --alert-dismiss-space-offset: var(--space-3);
+  /* Leading tone glyph (the ⚠/✓/ⓘ at the start of the strip). It was a bare `1.25rem` in
+   * alert-layout.css with no token at all, so the ONLY ways to resize it were `!important` or a
+   * forked stylesheet — the two things the icon axis's tier 2 exists to abolish (gh#326). Same
+   * step, so nothing moves; a service now scopes `--alert-icon-size` to one Alert instead.
+   * Deliberately NOT --scaling-multiplied: the literal it replaces did not track density. */
+  --alert-icon-size: var(--icon-size-lg);
+  /* Dismiss ✕ — rest opacity (quiet at rest, full on hover, rule #44) and glyph size. The rest
+   * alpha was a hard 0.7 in alert-layout.css whose `:hover` companion lived on the COMPONENT as
+   * `hover:opacity-100`, so the two halves of one affordance sat in two files and neither was
+   * themeable. Mirrors --sheet-close-rest-alpha. The icon size carries a raw rem, not
+   * var(--space-N): it replaces a flat Tailwind `size-4` step and must not start tracking the
+   * density axis. */
+  --alert-dismiss-rest-alpha: 0.7;
+  --alert-dismiss-icon-size: var(--icon-size-md);
   /* Soft (subtle) semantic tint ratios — themeable so a service can hit its exact spec
    * (a brand's success-bg/-border are often more present than the faint 5%/30% default). */
   --alert-bg-alpha: 0.05;
   --alert-border-alpha: 0.3;
   /* BANNER — the page-level Alert treatment (gh#255). Every constant a service would want to
-   * match to its page grid is a knob (rule #45): a banner that must keep the app's rounded card
-   * language sets --banner-radius, one that rules its top edge too sets --banner-border-width.
+   * match to its page grid is a knob (rule #45).
+   *
+   * --banner-radius and --banner-border-width are NOT declared here (gh#327). They used to be,
+   * and both copies were dead: components/banner.css declares the same two names at the same
+   * `:root`, base.css imports banner AFTER feedback, so banner won every time. Radius agreed at
+   * `0`, but border-width did not — this file said `0` and banner.css says `1px`, and `1px` is
+   * what alert-layout.css actually paints as the strip's block-end hairline. So anyone who read
+   * THIS file for the default was told the strip has no rule when it has one, and the MCP token
+   * catalog carried both entries with the two conflicting values. banner.css owns the strip
+   * geometry; these two live there and only there.
+   *
    * The inline inset tracks the live page gutter, so a banner mounted above a PageContainer lines
    * its text up with the page title instead of sitting at a second, unrelated margin. */
-  --banner-radius: 0;
-  --banner-border-width: 0;
   --banner-border-block-end-width: 1px;
   --banner-space-block: var(--space-3);
   /* Inline inset tracks the page gutter so a banner's text lines up with the page title.
@@ -73,6 +133,12 @@
    * Defaults = hsl(var(--muted-foreground)) glyph · hsl(var(--muted)) fill. */
   --empty-state-icon-foreground: initial;
   --empty-state-icon-tint: initial;
+  /* Medallion box + the glyph inside it. Both were literal (`width: 3rem` in the stylesheet, a
+   * `size-6` utility on the icon), so a service could not scale the empty-state mark to its own
+   * page rhythm — and the two must move TOGETHER or the glyph stops sitting centred in its
+   * circle, which is exactly the kind of pair rule #45 exists to keep tunable as one. */
+  --empty-state-icon-size: var(--icon-size-4xl);
+  --empty-state-icon-glyph-size: var(--icon-size-xl);
   --skeleton-row-gap: var(--space-stack-sm);
   --skeleton-cell-gap: var(--space-inline-lg);
   --skeleton-card-inset: var(--space-section-active);
@@ -81,4 +147,77 @@
    * a scoped theme (a :root binding to a role var freezes at :root). A service tints the shimmer to
    * its surface (rule #44) without forking the keyframes. Default = hsl(var(--muted)). */
   --skeleton-background: initial;
+  /* Skeleton bar heights + widths (#319). These carry RAW rem, not var(--space-N): the literals
+   * they replace were plain Tailwind steps, which are not multiplied by --scaling. Routing them
+   * through the spacing scale would silently make the loading state track the density axis while
+   * the loaded content it stands in for does not. Names say what each bar STANDS IN FOR, so a
+   * service retuning its type scale knows which one to move. */
+  --skeleton-block-height: 1rem;
+  --skeleton-caption-height: 0.75rem;
+  --skeleton-title-height: 1.75rem;
+  --skeleton-label-width: 6rem;
+  --skeleton-detail-value-max-width: 28rem;
+  --skeleton-stat-value-width: 8rem;
+  --skeleton-stat-caption-width: 5rem;
+
+  /* QUERY LIFECYCLE FOOTERS — the two rows `<InfiniteQueryState>` appends under a paginated feed:
+   * the "load more" button row and the "loading more…" caption. Both gaps were Tailwind literals
+   * on the component (`pt-4` / `pt-2`), so a service running a denser (or airier) feed could not
+   * align them to its own vertical rhythm without forking the component (rule #45). They live in
+   * the feedback tier because these ARE query feedback surfaces and there is no query stylesheet.
+   * Defaults = var(--space-stack-md) (16px) and var(--space-stack-sm) (8px) — the exact values the
+   * Tailwind steps resolved to, so adopting this changes nothing until a theme opts in. */
+  --query-load-more-space-block-start: var(--space-stack-md);
+  --query-loading-more-space-block-start: var(--space-stack-sm);
+
+  /* TOOLTIP — the transient label surface. Every constant here was a Tailwind literal baked into
+   * the component (`max-w-xs px-2 py-1 rounded-md text-xs shadow-md`), so a service could not
+   * retune tooltip density or measure without forking the component (rule #45). Defaults reproduce
+   * the previous look exactly, so adopting this changes nothing until a theme opts in. */
+  --tooltip-max-width: 20rem;
+  --tooltip-space-inline: var(--space-2);
+  --tooltip-space-block: var(--space-1);
+  --tooltip-radius: var(--radius);
+  --tooltip-font-size: var(--font-size-xs);
+  /* Raised-surface depth — role-mirror knob, so a flat service theme sets `none` once. */
+  --tooltip-shadow: var(--shadow-md);
+  /* Surface colours — `initial` so the popover roles re-resolve at the CALL SITE under a scoped
+   * [data-tenant]/.dark theme (docs/TOKENS.md · "Role-mirror knobs MUST be `initial`").
+   * Defaults = hsl(var(--popover)) fill · hsl(var(--popover-foreground)) text. */
+  --tooltip-background: initial;
+  --tooltip-foreground: initial;
+  --tooltip-border-color: initial;
+
+  /* POPOVER — the interactive overlay panel. Same story as Tooltip: `w-72 rounded-md p-4 shadow-md`
+   * were literals, so a service could not align the panel to its own grid or width scale. */
+  --popover-width: 18rem;
+  --popover-space-inset: var(--space-4);
+  --popover-radius: var(--radius);
+  --popover-shadow: var(--shadow-md);
+  --popover-header-space-gap: var(--space-1);
+  --popover-header-font-size: var(--font-size-sm);
+  /* Role-mirror knobs — `initial`, defaults resolve at the call site (see Tooltip above). */
+  --popover-surface-background: initial;
+  --popover-surface-foreground: initial;
+  --popover-surface-border-color: initial;
+
+  /* TOAST (Sonner) — the status glyph in the toast's leading slot.
+   *
+   * WHY A KNOB AND NOT A UTILITY: sonner renders the toast body itself and takes the five status
+   * glyphs through ONE `icons={{ success, info, warning, error, loading }}` config prop. That prop
+   * is all-or-nothing — a consumer who wants a different glyph size must re-declare all five icons,
+   * re-importing lucide and re-deriving the aria wiring. Routing the size through a token makes it
+   * a one-line theme override instead (rule #45).
+   *
+   * Raw rem, not var(--space-N): it replaces a flat Tailwind `size-4` step, and the 16px box sonner
+   * gives `[data-icon]` is itself fixed — scaling the glyph with density alone would overflow it.
+   *
+   * NAMESPACE NOTE: sonner publishes its own `--toast-*` custom properties (--toast-icon-margin-*,
+   * --toast-svg-margin-*, --toast-button-margin-*, --toast-close-button-*). Neither name below
+   * collides with those; keep it that way when adding to this group. */
+  --toast-icon-size: var(--icon-size-md);
+  /* Viewport gutter of the mobile toast stack. Sonner passes `mobileOffset` straight into inline
+   * CSS, so a var() string resolves normally. Flat 16px on purpose: this is a fixed inset from the
+   * device edge (thumb reach / safe area), not a density-scaled gap inside a surface. */
+  --toast-mobile-offset: 16px;
 }

package/dist/tokens/components/form.css

@@ -31,4 +31,20 @@
    * which only reaches DIRECT children — dead in the common `Form > CardContent > FormField*`
    * composition every real Save-button form needs), so it holds at any DOM depth relative to Form. */
   --form-field-row-gap: var(--space-3); /* 12px */
+
+  /* Row rhythm between the ROWS of a `<Form columns={n}>` grid (gh#304). The grid path cannot use
+   * the margin above — a per-item margin inside a grid double-counts the track gap AND leaves the
+   * first item of row 1 unshifted while its row-mates drop, so row 1's columns end up misaligned.
+   * The rhythm therefore rides the grid's own `row-gap`, and it DEFAULTS TO THE SAME
+   * --form-field-row-gap the stacked path uses so `columns={1}` — and every `columns={n}` form once
+   * it collapses to one column on a narrow container — is pixel-identical to a Form with no
+   * `columns` at all. Retune this alone only to give multi-column forms a looser row rhythm than
+   * stacked ones; retune --form-field-row-gap to move both together. */
+  --form-grid-row-gap: var(--form-field-row-gap); /* 12px */
+
+  /* Gutter between the COLUMNS of a `<Form columns={n}>` grid (gh#304). Was ResponsiveGrid's
+   * generic 16px stack gap with no way to say otherwise; it is a form's inter-field gutter and a
+   * service aligning forms to its design grid needs it as a knob (rule #45). The default keeps the
+   * historical 16px, so nothing moves unless a theme opts in. */
+  --form-grid-column-gap: var(--space-4); /* 16px */
 }

package/dist/tokens/components/legal-document.css

@@ -21,6 +21,10 @@
   /* ── Geometry ─────────────────────────────────────────────────────────────── */
   /* Readable document measure. Caps the header, the section column and the footer so
    * a 1440px viewport still reads at ~75-90 characters per line. */
+  /* Section anchor ring needs a gap so the mark does not touch the heading
+   * (outline form — styles/focus-ring.css). */
+  --legal-document-section-focus-ring-offset: var(--space-1);
+
   --legal-document-measure-max-width: 46rem;
   /* Rail ↔ document column gutter (two-column mode only). */
   --legal-document-column-gap: var(--space-10);
@@ -37,7 +41,7 @@
   --legal-document-toc-font-size: var(--font-size-xs);
   /* Leading marker on the active contents entry — a non-colour affordance so the
    * active state is never colour-only (WCAG 1.4.1). */
-  --legal-document-toc-marker-width: 2px;
+  --legal-document-toc-marker-width: var(--stroke-md);
   /* Gap between the `documentNavigation` slot and the contents list inside the rail. */
   --legal-document-nav-gap: var(--space-4);
   --legal-document-header-gap: var(--space-2);

package/dist/tokens/components/navigation.css

@@ -7,7 +7,19 @@
    * localized labels (ja 100/ページ) never clip; this token only keeps short labels from
    * collapsing below the control rhythm. */
   --pagination-size-width: 5.5rem;
+  /* Inline padding on a page button. The button keeps min-width: var(--control-height), so this
+   * only takes effect once a number outgrows that box. Deliberately --space-1 rather than
+   * --space-2: at the wider value a two-digit label (14.8px of text + 2 * 8px + 2px border) came
+   * to 32.8px and pushed the common 1–2 digit buttons off square by 0.8px. */
+  --pagination-page-padding-x: var(--space-1);
   --pagination-total-font-size: var(--font-size-sm);
+  /* Chevron glyph inside the `simple` form's Prev/Next Buttons (#319). Those are size="sm"
+   * Buttons, so `.ui-button--sm svg` would draw them at --control-icon-size-sm; the component
+   * pinned them larger with a literal `size-4` class instead, because in simple mode the chevron
+   * IS the control — there is no label beside it to carry the affordance. The knob keeps that
+   * deliberate override themeable (rule #45) and tracks the default control-icon tier, so it now
+   * follows density like every other control glyph instead of staying a flat 1rem. */
+  --pagination-icon-size: var(--control-icon-size);
   --filter-bar-gap: var(--space-3);
   --filter-bar-padding-y: var(--space-2);
   --filter-label-font-size: var(--font-size-xs);
@@ -51,6 +63,28 @@
   --tabs-indicator-size: 2px;
   --tabs-indicator-offset: 0px;
 
+  /* TABS BOX GEOMETRY (#319) — the strip↔panel gap and the whole `line` trigger box were Tailwind
+   * scale literals on tabs.tsx, so a service could only retune the tab rhythm by forking the
+   * component (rule #45).
+   * Every default below is a RAW rem/px, deliberately NOT a --space-* step: the classes they
+   * replace (`gap-2`, `p-0`, `rounded-none`, `px-4`, `py-2`) read Tailwind's own --spacing grid,
+   * which this repo does NOT density-scale, so a --space-* default would silently resize the tabs
+   * under a compact/comfortable density. A service that WANTS a knob to follow density simply
+   * points it at var(--space-2) itself. */
+
+  /* Gap between the tab strip and the panel below it. */
+  --tabs-root-gap: 0.5rem;
+  /* Inset of the `line` strip. The default/pill strip keeps its own padding box; the line strip is
+   * a flat underlined rail, so its default is the quietest value — none (rule #44). Raise it to
+   * give the rail breathing room above its hairline. */
+  --tabs-list-line-space-inset: 0px;
+  /* `line` trigger box. Square corners because the selected state is the token-owned ::after bar,
+   * never a pill; the hit box is wider/taller than the pill trigger so the underline spans a real
+   * column of the rail. */
+  --tabs-trigger-line-radius: 0px;
+  --tabs-trigger-line-padding-x: 1rem;
+  --tabs-trigger-line-padding-y: 0.5rem;
+
   /* Menu item hover/highlight tint — `initial` so the --accent default re-resolves at the call site
    * under a scoped theme (a :root binding to a role var freezes at :root).
    * Defaults = hsl(var(--accent)) fill · hsl(var(--accent-foreground)) text. */
@@ -78,4 +112,79 @@
   --filter-bar-filter-width: var(--filter-picker-width-md);
   --filter-bar-chip-gap: var(--space-2);
   --filter-bar-section-gap: var(--space-2);
+
+  /* MENU SURFACES — one row rhythm shared by ContextMenu, Menubar and DropdownMenu. All three are
+   * the same Radix popup surface; the row height was a literal `2rem` in the CSS and DropdownMenu
+   * had not been converted at all, so it carried the whole box as Tailwind literals on the
+   * component (#319). A service tunes the menu rhythm once here instead of three times. */
+  --menu-item-height: var(--band-height-md);
+  --menu-item-radius: var(--radius-sm);
+  --menu-item-space-inline: var(--space-2);
+  --menu-item-space-gap: var(--space-2);
+  --menu-item-font-size: var(--font-size-base);
+  /* Inset rows (a checkbox/radio row without its own indicator) reserve the indicator column so
+   * labels stay aligned with their checked siblings. */
+  --menu-item-inset-space-inline-start: var(--space-8);
+  --menu-indicator-size: 0.875rem;
+  --menu-indicator-inset-inline-start: var(--space-2);
+  --menu-icon-size: var(--icon-size-md);
+  --menu-content-space-inset: var(--space-1);
+  --menu-content-min-width: 10rem;
+  /* DropdownMenu is anchored to a small trigger, so it opens narrower than a context menu. */
+  --dropdown-content-min-width: 8rem;
+  --menu-separator-space-block: var(--space-1);
+  --menu-separator-space-inline: calc(var(--space-1) * -1);
+
+  /* NAVIGATION MENU — the disclosure chevron on a top-level trigger. It was a bare `0.9rem` in
+   * navigation-layout.css: no token, so unreachable from an app (gh#326), and 14.4px, so off the
+   * icon scale AND off the pixel grid. A stroked chevron drawn into a 14.4px box lands its path
+   * on half pixels at 1x, which is a rendering defect rather than a rounding preference, so this
+   * SNAPS to the nearest step — --icon-size-sm, 14px, −0.4px. The nearest step upward is 16px
+   * (+1.6px) and would also fight the `opacity: 0.7` that makes this chevron deliberately quiet.
+   * `sm` rather than `md` is the same call the other quiet chevrons in the system already made
+   * (--month-picker-separator-icon-size, --steps-inline-separator-size). NOT
+   * --scaling-multiplied: the literal it replaces did not track density. */
+  --navigation-menu-trigger-icon-size: var(--icon-size-sm);
+
+  /* STEPS — the full (non-inline) variant. `--steps-inline-*` already covers the compact inline
+   * form; the marker, connector and text rhythm of the main variant were still literal on the
+   * component (#319), so a service could not resize the dot, retighten the vertical run, or move
+   * the horizontal connector to match its own grid. */
+  --steps-dot-size: 0.625rem;
+  --steps-dot-process-ring-width: var(--stroke-xl);
+  --steps-marker-border-width: var(--stroke-md);
+  --steps-marker-font-size: var(--font-size-sm);
+  --steps-marker-icon-size: var(--icon-size-md);
+  --steps-wait-icon-size: var(--icon-size-xs);
+  --steps-title-font-size: var(--font-size-sm);
+  --steps-title-font-size-compact: var(--font-size-xs);
+  --steps-subtitle-font-size: var(--font-size-xs);
+  /* Vertical run: gap between marker and text, and the drop to the next step. */
+  --steps-vertical-space-gap: var(--space-3);
+  --steps-vertical-space-block-end: var(--space-8);
+  --steps-vertical-text-space-block-start: var(--space-1);
+  /* Horizontal run: the text sits under the marker, and the connector spans the gap between
+   * two markers — inset by the marker radius on each side so it never runs under a marker. */
+  --steps-horizontal-text-space-block-start: var(--space-2);
+  --steps-horizontal-text-space-inline: var(--space-2);
+  --steps-connector-inset: 1.25rem;
+  --steps-connector-space-block-start: var(--space-4);
+
+  /* APP SETTING PICKER — per-kind trigger widths (#319). Each picker is sized to the longest
+   * value it can show: a timezone name is far wider than a theme name. These were literal
+   * `sm:w-*` steps in a lookup table, so a service whose locale renders longer labels (a German
+   * timezone list, a Japanese density label) could not widen just the one that overflows. */
+  --app-setting-picker-locale-width: 10rem;
+  --app-setting-picker-timezone-width: 14rem;
+  --app-setting-picker-date-format-width: 11rem;
+  --app-setting-picker-time-format-width: 11rem;
+  --app-setting-picker-theme-width: 9rem;
+  --app-setting-picker-brand-width: 11rem;
+  --app-setting-picker-density-width: 10rem;
+  --app-setting-picker-font-size-width: 9rem;
+  /* Below this the trigger hugs its content instead of taking the per-kind width, so a picker
+   * dropped into a narrow topbar never stretches the bar (gh#165). */
+  --app-setting-picker-width-breakpoint: 40rem;
+  --app-setting-picker-icon-size: var(--icon-size-md);
+  --app-setting-picker-icon-rest-alpha: 0.7;
 }

package/dist/tokens/components/scroll-area.css

@@ -0,0 +1,21 @@
+/* SCROLL AREA — the bottom-anchoring contract (gh#311).
+ *
+ * The rail geometry (--scroll-area-bar-size / --scroll-area-bar-padding / --scroll-area-thumb-radius)
+ * lives with the other data-display knobs in ./data-display.css, because it is styled from
+ * styles/data-display-layout.css. What lives HERE is the one constant that is read by JavaScript
+ * rather than by CSS, so it needs no layout rule to hang off.
+ */
+:root {
+  /* How close to the bottom edge the reader still counts as "following the stream" for
+   * `<ScrollArea anchor="bottom">`. Inside this band new content keeps the viewport pinned to the
+   * newest item; one pixel beyond it the reader is reading history and anchoring NEVER moves them
+   * again until they come back (WCAG 3.2.5 — no change of context on request of the machine).
+   *
+   * It is a rule #45 knob because the right distance is a function of the row height a service
+   * renders: one line of a dense audit log is ~20px, a chat bubble with an avatar is ~64px, and
+   * "one row from the bottom" is what the reader actually means. Expressed in rem on purpose — it
+   * then tracks the user's font size, so the band is still one row at 200% zoom (WCAG 1.4.4)
+   * instead of collapsing to a third of a row. The `anchorOffset` prop overrides it per instance;
+   * px/rem/em are all accepted. */
+  --scroll-area-anchor-offset: 3rem;
+}

package/dist/tokens/components/separator.css

@@ -0,0 +1,52 @@
+/* Separator component tokens (gh#308) — the tokenized rule AND the LABELLED rule that a `label`
+ * interrupts: a message stream's day divider, an unread "new messages" watermark, an auth
+ * conjunction. Before #308 the only labelled rule in the library was the auth-scoped AuthDivider,
+ * whose rule baked `height: 1px` into shell-layout.css and whose type ramp lived on the
+ * `--auth-shell-divider-*` layer — so a service that retuned its login divider silently retuned
+ * every day divider in its chat. These knobs are the generic layer; AuthDivider now re-points them.
+ *
+ * Chrome defaults to the QUIETEST state (rule #44): one hairline, a muted xs label, no surrounding
+ * padding. A service opts IN to a louder watermark from its theme, never by forking CSS. */
+:root {
+  /* Rule weight, both orientations and both halves of a labelled rule. */
+  --separator-rule-size: var(--stroke-hairline);
+  /* Rule colour. Role-mirror knob → declared `initial` so the --border default re-resolves at the
+   * CALL SITE under a scoped [data-tenant] / .dark theme (docs/TOKENS.md — the :root freeze rule).
+   * Documented default = hsl(var(--border)). */
+  --separator-rule-color: initial;
+  /* Gap between the label and each rule half. `initial` so the default re-resolves at the call
+   * site: --space-* is density-scaled and re-declared inside a `.ui-density-*` subtree, so a
+   * :root binding would freeze the gap at the :root density. Documented default = var(--space-3). */
+  --separator-label-gap: initial;
+  /* Length of the SHORT rule half when labelAlign is `start` / `end` — the label's inset from the
+   * inline edge (the Slack/Mattermost stream convention). It is a grid track on the INLINE axis,
+   * so it flips with the writing direction under dir="rtl" with no extra rule. `initial` for the
+   * same density reason as the gap. Documented default = var(--space-6). */
+  --separator-label-inset: initial;
+  /* Label type ramp (#46) — steps of the modular scale, never a literal. `xs` is the quiet
+   * stream/divider voice; --separator-label-line-height keeps ja/vi descenders and tone marks
+   * intact (cf. #254); --separator-label-font-weight lets a service raise an unread watermark
+   * without touching the day divider. */
+  --separator-label-font-size: var(--font-size-xs);
+  --separator-label-line-height: var(--line-height-normal);
+  --separator-label-font-weight: var(--font-weight-medium);
+  /* Label colour. Role-mirror → `initial`; documented default = hsl(var(--muted-foreground)). */
+  --separator-label-color: initial;
+  /* Per-tone rule + label colours. `tone` re-points BOTH the rule and the label — never the rule
+   * alone — so an attention rule such as an unread watermark is not colour-only (WCAG 1.4.1) and
+   * survives forced-colors. All role-mirror → `initial`; documented defaults are the matching
+   * semantic role. `muted` deliberately mirrors the quiet default so a service can still split the
+   * two voices later without a breaking change. */
+  --separator-tone-muted-rule-color: initial;
+  --separator-tone-muted-label-color: initial;
+  --separator-tone-primary-rule-color: initial;
+  --separator-tone-primary-label-color: initial;
+  --separator-tone-success-rule-color: initial;
+  --separator-tone-success-label-color: initial;
+  --separator-tone-warning-rule-color: initial;
+  --separator-tone-warning-label-color: initial;
+  --separator-tone-destructive-rule-color: initial;
+  --separator-tone-destructive-label-color: initial;
+  --separator-tone-info-rule-color: initial;
+  --separator-tone-info-label-color: initial;
+}