@godxjp/ui 19.1.0 → 19.2.0

package/dist/tokens/components/control.css

@@ -1,4 +1,4 @@
-/* Control primitive tokens: heights, horizontal padding, adjacent control sizes. */
+
 
 :root {
   --control-height-compact: var(--band-height-sm);
@@ -9,8 +9,7 @@
   --control-padding-x-comfortable: var(--space-4);
 
   --control-height: calc(var(--control-height-default) * var(--scaling));
-  /* Adjacent control sizes, derived from the active --control-height. The ±step
-   * is scaled too so the whole control ladder stays proportional under --scaling. */
+
   --control-height-sm: calc(var(--control-height) - calc(0.25rem * var(--scaling)));
   --control-height-lg: calc(var(--control-height) + calc(0.25rem * var(--scaling)));
   --control-height-xs: calc(var(--control-height) - calc(0.5rem * var(--scaling)));
@@ -18,31 +17,18 @@
   --control-gap: var(--space-inline-sm);
   --control-gap-sm: var(--space-inline-xs);
   --control-radius: var(--radius);
-  /* Button corner radius — defaults to the button's historical `rounded-md` so nothing
-   * changes by default, but is its OWN knob so a service theme can retune the button
-   * radius INDEPENDENTLY of input/control radius (issue #124). */
+
   --button-radius: var(--radius-md);
-  /* Control surface knobs — font-size, border width and resting shadow of every
-   * `.ui-control` (input / picker trigger). Tokenised so a service theme tunes them
-   * once instead of each component hard-coding Tailwind utilities. Defaults preserve
-   * the historical look (font-size-base, 1px border, shadow-xs). */
+
   --control-font-size: var(--font-size-base);
   --control-border-width: var(--stroke-hairline);
   --control-shadow: var(--shadow-xs);
   --control-icon-size: calc(var(--icon-size-md) * var(--scaling));
   --control-icon-size-sm: calc(var(--icon-size-sm) * var(--scaling));
-  --control-focus-ring-width: var(--focus-ring-width);
 
-  /* Ring knobs for the two controls that need a softer, heavier mark than the
-   * global default — both are filled surfaces where a hard 2px ring reads as a
-   * second border. Values preserve the look these controls always had; they are
-   * knobs now instead of hand-written box-shadows (styles/focus-ring.css). */
   --toggle-focus-ring-width: var(--stroke-lg);
   --toggle-focus-ring-alpha: 0.35;
-  --time-input-focus-ring-width: var(--stroke-lg);
-  --time-input-focus-ring-alpha: 0.3;
 
-  /* Outline-form gaps — marks where a radius-hugging ring would touch the glyph. */
   --rating-focus-ring-offset: 2px;
 
   --checkbox-size: calc(1rem * var(--scaling));
@@ -70,52 +56,23 @@
   --slider-track-height: 0.375rem;
   --slider-thumb-size: 1rem;
 
-  /* InputOTP slot box (gh#233). Its own knob so an auth surface can widen the 6-slot challenge row
-   * to fill a wide panel WITHOUT re-scoping --control-height (which would resize every other
-   * control in the same card). Declared `initial` — the tier-mirror form of the role-mirror rule in
-   * docs/TOKENS.md: the default must resolve at the CALL SITE (`var(--otp-slot-size,
-   * var(--control-height))`), because `--otp-slot-size: var(--control-height)` here would FREEZE at
-   * the :root tier (32px) and an OTP row inside `.ui-auth-shell[data-variant="canonical"]`, which
-   * re-scopes --control-height to 36px, would silently shrink. Verified in Chromium: 36px before
-   * and after. A service opts in with a NAMED tier (`var(--control-height-lg)`), never a calc. */
-  --otp-slot-size: initial; /* default = var(--control-height) at the call site */
-  /* Per-AXIS overrides of the slot box (gh#12). --otp-slot-size stays the square shorthand; these
-   * two win over it when set, so a code field can be WIDER-than-tall or TALLER-than-wide without
-   * abandoning the token. A canonical device-grant code field is 27.5x52 per slot (a 4-slot
-   * `appearance="grouped"` box of 112x54 with its 1px group border) — not expressible with one
-   * square knob, which is why grouped OTP measured 146x38 against that artboard. `initial` for the
-   * same tier-mirror reason as --otp-slot-size: the whole fallback chain
-   * (axis → square → --control-height) must resolve at the CALL SITE so a shell that re-scopes
-   * --control-height still reaches an OTP row that sets neither axis. */
-  --otp-slot-inline-size: initial; /* default = var(--otp-slot-size, var(--control-height)) */
-  --otp-slot-block-size: initial; /* default = var(--otp-slot-size, var(--control-height)) */
-  /* Main-axis alignment of the whole OTP row (rule #44/#45 — chrome is a token, default quiet).
-   * `flex-start` is the historical behaviour, so an existing field is byte-identical; a centred
-   * code field is `align="center"` on InputOTP (which wins over this knob) or this token set once
-   * in a service theme. It exists because EVERY consumer was wrapping .ui-otp-container in a
-   * flex-centring div to get a centred challenge. */
+  --otp-slot-size: initial;
+
+  --otp-slot-inline-size: initial;
+  --otp-slot-block-size: initial;
+
   --otp-container-align: flex-start;
 
-  /* Checked/on/active fills — `initial` so the --primary default re-resolves at the call site
-   * under a scoped theme (a :root binding to var(--primary) freezes at the :root value and a scoped
-   * [data-tenant] override of --primary never reaches it). A service retints the "selected" state
-   * by overriding these directly. Defaults = hsl(var(--primary)) · slider track 0.2α. */
   --checkbox-checked-background: initial;
   --switch-checked-background: initial;
   --toggle-on-background: initial;
   --slider-track-background: initial;
   --slider-range-background: initial;
 
-  /* Switch OFF track fill (gh#315) — `initial`, default hsl(var(--input)). Its own knob so a
-   * service can quieten the off-track without dragging the --input control-boundary role back
-   * below the WCAG SC 1.4.11 floor (rule #45); whatever you set still owes 3:1 against the page
-   * and against the thumb (--background), or "off" stops being a visible state. */
   --switch-unchecked-background: initial;
 
-  /* ColorPicker — width of the hex text field beside the swatch. */
   --color-picker-input-width: 6.5rem;
 
-  /* Command / CommandPalette — list height, inner paddings and the palette's own box. */
   --command-list-max-height: min(300px, 50vh);
   --command-input-padding-x: var(--space-3);
   --command-group-padding: var(--space-1);
@@ -128,8 +85,6 @@
   --command-palette-hint-padding-x: var(--space-4);
   --command-palette-hint-gap: var(--space-4);
 
-  /* SearchInput — the inset the leading/trailing icons sit at, and the field padding derived
-   * from it so the text never runs under an icon. */
   --search-input-edge-inset: var(--space-3);
   --search-input-start-padding: calc(
     var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)
@@ -138,8 +93,6 @@
     var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)
   );
 
-  /* The --font-size-xs tier, spelled once per control that reads it, so a service can retune a
-   * single one of them without moving the whole scale. */
   --choice-description-font-size: var(--font-size-xs);
   --color-picker-hex-font-size: var(--font-size-xs);
   --command-group-heading-font-size: var(--font-size-xs);
@@ -149,91 +102,46 @@
   --button-sm-font-size: var(--font-size-xs);
 }
 
-/* Rule #24 — on touch devices (coarse pointer) interactive controls keep a ≥44px tap target
- * regardless of density; desktop (fine pointer) keeps the compact heights above. --control-height
- * resolves through these via var(), so inputs/buttons/selects/table rows all bump together. */
-/* Control-family tokens added for #319.
- *
- * These MUST live in a plain :root, not inside the @media (pointer: coarse) block below —
- * bare declarations in a conditional group rule are invalid CSS and the parser drops them
- * silently. They spent this whole refactor dead for exactly that reason: the guards read the
- * file textually, so check-token-tiers and the geometry ratchet both passed while every one of
- * these resolved to nothing. */
 :root {
-  /* TRAILING AFFIX — the clear ✕ / chevron overlay a select-family trigger parks at its inline
-   * end. Select, SearchSelect and TagInput each hard-coded the same `end-2 size-6 rounded-sm
-   * opacity-50` stack independently (#319), so a service retuning affix weight had to chase the
-   * literal through several components. One shared set of knobs instead — this is a CONTROL-level
-   * concern, not a per-component one. */
+
   --control-affix-inset-inline-end: var(--space-2);
   --control-affix-action-size: 1.5rem;
   --control-affix-action-radius: var(--radius-sm);
   --control-affix-icon-size: var(--icon-size-md);
-  /* Resting weight of an affix glyph — it must read as secondary until hovered/focused. */
+
   --control-affix-rest-alpha: 0.5;
-  /* Room a trigger reserves so its label never runs under the affix. */
-  /* 2.25rem — the room a single trailing affix needs. Written as a raw rem because the
-   * literal it replaced (`pe-9`) is a flat Tailwind step, not a density-scaled one. */
+
   --control-trigger-space-inline-end: 2.25rem;
 
-  /* INSIDE-FIELD AFFIX — the leading/trailing controls Input and TimePicker render WITHIN the
-   * field box, as opposed to the overlay affix (--control-affix-*) that Select and SearchSelect
-   * park on top of a trigger. Both carried the identical literal stack (#319). Because these sit
-   * on the field's own surface rather than over it, they rest a touch heavier than the overlay
-   * pair — that difference is the reason the two sets stay separate. */
   --control-inline-affix-size: 1.25rem;
   --control-inline-affix-icon-size: var(--control-affix-icon-size);
   --control-inline-affix-space-gap: var(--space-1);
   --control-inline-affix-inset-inline: var(--space-2);
   --control-inline-affix-rest-alpha: 0.7;
-  /* Inline room the field reserves so its text never runs under a single affix. */
+
   --control-inline-affix-space-inline-end: 2.25rem;
-  /* Input centres its affix on the field's single line; a textarea has no single line to centre
-   * on, so its clear control parks at the top-end corner instead. */
+
   --textarea-clear-inset-block-start: var(--space-2);
-  /* MULTILINE BOX — the block padding of `.ui-control-multiline` (Textarea). It was a bare
-   * `--space-2` inside the padding shorthand, which made it unreachable for a service that runs a
-   * denser composer, AND it is the constant the auto-grow row maths has to add back, so the two
-   * had to read the same knob or drift (#45). */
+
   --control-multiline-padding-block: var(--space-2);
-  /* TEXTAREA AUTO-GROW (gh#310) — `autoGrow` grows the box with its content between a floor and a
-   * ceiling expressed in TEXT ROWS. Rows, not pixels, because a row count survives a density
-   * change and a `--font-size-base` retheme where a px ceiling would silently stop matching the
-   * visible line count. Defaults reproduce today's geometry when `autoGrow` is absent (#44). */
-  /* The unit a "row" is measured in. `initial` on purpose: the call site reads
-   * `var(--textarea-autogrow-line-height, var(--line-height-normal))`, so a service that retunes
-   * the multiline line-height for CJK legibility retunes the ceiling with it (#46). Unitless —
-   * it is multiplied by `--control-font-size`. */
+
   --textarea-autogrow-line-height: initial;
-  /* Floor of the grown box, in text rows. The `minRows` prop overrides per instance — the same
-   * theme-global / prop-local priority as `--form-label-width` vs `labelWidth`. The floor is
-   * additionally clamped up to `--control-height` so a resting one-row composer still lines up
-   * with the Input / Button beside it instead of undercutting the control tier. */
+
   --textarea-autogrow-min-height-rows: 1;
-  /* Ceiling of the grown box, in text rows; past it the control scrolls internally instead of
-   * pushing the page. `maxRows={0}` sets this to `infinity` for an unbounded box. */
+
   --textarea-autogrow-max-height-rows: 8;
-  /* The non-text part of the box the row maths must add back: block padding + border, both
-   * edges. `.ui-textarea-autogrow--ghost` re-declares it without the border, because the ghost
-   * variant drops its own chrome. */
+
   --textarea-autogrow-box-inset: calc(
     (var(--control-multiline-padding-block) + var(--control-border-width)) * 2
   );
-  /* A field parking TWO inline affixes (TimePicker's clear+clock, DatePicker's clear+calendar)
-   * reserves a wider end than the single-affix case. */
+
   --control-inline-affix-pair-space-inline-end: 3.5rem;
-  /* COMPOSITE FIELD — the bordered box that wraps two inputs plus a separator (date/month
-   * range pickers) or one input plus affixes. Shared so the four range/picker fields cannot
-   * drift into four slightly different boxes. */
+
   --control-composite-field-space-gap: var(--space-2);
-  /* The <input type=file> button is a browser-owned box we restyle; it sits one tier below the
-   * field so it reads as a control INSIDE the control. */
+
   --input-file-button-height: var(--band-height-sm);
   --input-file-button-font-size: var(--font-size-sm);
 
-  /* SEARCH-SELECT — the Popover+Command combobox. Its panel geometry was baked onto the
-   * component as arbitrary values (`max-w-[min(32rem,calc(100vw-1.5rem))]`), so a service could
-   * not widen the panel or change the viewport gutter without forking. */
   --search-select-panel-max-width: 32rem;
   --search-select-panel-viewport-inset: var(--space-6);
   --search-select-list-space-inset: var(--space-1);
@@ -243,14 +151,11 @@
   --search-select-option-sublabel-font-size: var(--font-size-xs);
   --search-select-status-space-inline: var(--space-2);
   --search-select-status-space-block: var(--space-3);
-  /* Empty/error states sit alone in the panel, so they get a taller, centred block. */
+
   --search-select-placeholder-space-block: var(--space-6);
   --search-select-status-font-size: var(--font-size-sm);
   --search-select-spinner-size: 1rem;
 
-  /* CASCADER — column browser + flat search list. Its option rows, column widths and panel
-   * paddings were literals on the component (#319), so a service could not widen a column to fit
-   * longer JA labels or tighten the row rhythm without forking. */
   --cascader-column-min-width: 9rem;
   --cascader-columns-max-height: min(280px, 50vh);
   --cascader-list-max-height: min(300px, 50vh);
@@ -260,27 +165,21 @@
   --cascader-option-space-gap: var(--space-1);
   --cascader-option-font-size: var(--font-size-sm);
   --cascader-option-icon-size: var(--icon-size-md);
-  /* The flat search result row is denser than a column row — it has no chevron to balance. */
+
   --cascader-result-space-inline: var(--space-2);
   --cascader-result-space-block: 0.375rem;
   --cascader-result-radius: var(--radius-sm);
   --cascader-result-icon-space-inline-end: var(--space-2);
   --cascader-empty-space-block: var(--space-6);
 
-  /* SELECT — the Radix listbox surface. Its popup shares the menu row rhythm (--menu-item-*),
-   * so only what is genuinely its own lives here (#319). */
   --select-content-max-height: 24rem;
   --select-scroll-button-space-block: var(--space-1);
-  /* Select rows sit slightly wider than a menu row: a listbox has no leading icon column to
-   * absorb the optical inset, so 2.5 reads level with a menu's 2 + icon. */
+
   --select-item-space-inline: 0.625rem;
 
-  /* TIME PICKER — scroll columns of hour/minute/second plus an inline affix pair. All of its
-   * geometry was literal on the component (#319): a service could not shorten the column, widen
-   * the panel for a 12-hour layout, or retune the row rhythm without forking. */
   --time-picker-column-height: 13rem;
   --time-picker-panel-width: 9rem;
-  /* 12-hour mode adds an AM/PM column, so the panel is wider. */
+
   --time-picker-panel-width-12h: 13rem;
   --time-picker-heading-space-inline: var(--space-1);
   --time-picker-heading-space-block: 0.375rem;
@@ -293,15 +192,12 @@
 
   --time-picker-affix-space-gap: var(--control-inline-affix-space-gap);
 
-  /* TREE SELECT — a Select whose panel holds a tree. Its rows, indent and toggle were literal
-   * on the component, and the depth indent was a magic expression in JSX
-   * (`depth * 1.25 + 0.5` rem) that no theme could reach at all (#319). */
   --tree-select-list-max-height: min(300px, 50vh);
   --tree-select-row-space-block: 0.375rem;
   --tree-select-row-space-inline-end: var(--space-2);
   --tree-select-row-radius: var(--radius-sm);
   --tree-select-row-font-size: var(--font-size-sm);
-  /* Indent = base + depth × step. A denser service dials the step down without touching JSX. */
+
   --tree-select-depth-space-base: var(--space-2);
   --tree-select-depth-space-step: 1.25rem;
   --tree-select-toggle-size: 1.25rem;
@@ -309,17 +205,13 @@
   --tree-select-label-space-gap: var(--space-2);
   --tree-select-empty-space-block: var(--space-6);
 
-  /* CALENDAR — the react-day-picker grid. Day/weekday cells already size from --control-height
-   * (the system control tier), but the frame around them — root inset, month gaps, nav offset,
-   * grid rhythm — was literal on the component (#319), so a service could not tighten the
-   * calendar to its own density without forking the classNames map. */
   --calendar-space-inset: var(--space-3);
   --calendar-month-space-gap: var(--space-4);
   --calendar-caption-space-inline: var(--space-8);
   --calendar-caption-font-size: var(--font-size-sm);
   --calendar-nav-space-block-start: var(--space-3);
   --calendar-nav-space-inline: var(--space-1);
-  /* Nav chevrons read as secondary until hovered — they frame the month, they are not the point. */
+
   --calendar-nav-rest-alpha: 0.7;
   --calendar-grid-space-block-start: var(--space-4);
   --calendar-week-space-block-start: var(--space-2);
@@ -328,10 +220,10 @@
   --calendar-day-font-size: var(--font-size-sm);
   --calendar-day-radius: var(--radius-md);
   --calendar-chevron-size: var(--icon-size-md);
+  --calendar-footer-space-gap: var(--space-2);
+  --calendar-footer-space-block-start: var(--space-2);
+  --calendar-footer-border-width: var(--stroke-hairline);
 
-  /* TRANSFER — the two-pane list mover. Pane height, header rhythm and row density were literal
-   * on the component (#319), so a service could not fit the panes to its own page grid or
-   * tighten the row for a dense admin table without forking. */
   --transfer-pane-min-height: 14rem;
   --transfer-pane-radius: var(--radius-md);
   --transfer-panes-space-gap: var(--space-3);
@@ -346,66 +238,35 @@
   --transfer-row-space-gap: var(--space-2);
   --transfer-row-radius: var(--radius-sm);
   --transfer-row-font-size: var(--font-size-sm);
-  /* The checkbox is top-aligned against a two-line row, so it needs a hair of optical offset to
-   * sit level with the first line's cap height rather than its box. */
+
   --transfer-row-check-space-block-start: 0.125rem;
   --transfer-row-description-font-size: var(--font-size-xs);
   --transfer-empty-space-block: var(--space-8);
   --transfer-actions-space-gap: var(--space-2);
   --transfer-action-icon-size: var(--icon-size-md);
 
-  /* MONTH PICKER — shared by MonthPicker and MonthRangePicker, which render the same year-nav +
-   * 3-column month grid. Both carried an identical copy of every literal (#319); one set of knobs
-   * now drives both, so they cannot drift apart the way Select and DropdownMenu once did. */
   --month-picker-panel-space-inset: var(--space-3);
   --month-picker-grid-space-block-start: var(--space-3);
   --month-picker-grid-space-gap: var(--space-1);
   --month-picker-cell-space-inline: var(--space-4);
   --month-picker-nav-font-size: var(--font-size-sm);
-  /* Year-nav chevrons read as secondary until hovered — same treatment as the Calendar nav, so
-   * the two panels stay visually consistent when either is retuned. */
+
   --month-picker-nav-rest-alpha: var(--calendar-nav-rest-alpha);
   --month-picker-icon-size: var(--icon-size-md);
   --month-picker-separator-icon-size: var(--icon-size-sm);
 
-  /* BUTTON size-xs box + the count pill (#319, reconciled in #316).
-   *
-   * `size="xs"` now reads the tier, like every other control in the library. It used to be
-   * `calc(var(--control-height) - 0.75rem)` = 1.25rem, which sat 4px BELOW `--control-height-xs`
-   * (1.5rem) that `size="icon-xs"` already used — the same tier name, two heights, so an xs
-   * Button never lined up with the xs control beside it. It was also the exact shape this repo's
-   * own rule forbids: an ad-hoc `calc(var(--control-height) ± length)` silently re-derives a tier
-   * and drifts from its siblings (the bug that made Pagination's size-changer taller than its
-   * page buttons), and being a raw length rather than a `--scaling`-multiplied step, it did not
-   * move with density while the tier did.
-   *
-   * What settled it was not consistency but MEASUREMENT: an xs Button rendered 20px tall, under
-   * the 24x24 CSS px that WCAG 2.2 SC 2.5.8 (Target Size, Minimum) requires, while icon-xs beside
-   * it rendered 24px and passed. So this is an accessibility fix that happens to also remove an
-   * inconsistency, not a visual preference. It is a real visual change on the most-used component
-   * in the library (20px -> 24px), and it stays a knob: a service that wants the old box sets
-   * --button-xs-height back. */
   --button-xs-height: var(--control-height-xs);
   --button-xs-space-inline: var(--space-2);
   --button-xs-space-gap: var(--space-1);
   --button-xs-font-size: var(--font-size-xs);
   --button-xs-icon-size: var(--icon-size-xs);
-  /* Icon-adjacent padding: a button whose only child is an icon needs less inline room than one
-   * carrying a label, or the glyph floats in a too-wide box. One knob per size tier. */
+
   --button-icon-space-inline-md: var(--space-3);
   --button-icon-space-inline-sm: 0.625rem;
   --button-icon-space-inline-lg: var(--space-4);
   --button-icon-space-inline-xs: 0.375rem;
   --button-space-block: var(--space-2);
-  /* Count pill — a borderless counter that reads on the button's own surface. */
-  /* OTP separator glyph. Was a bare 1rem in styles/control.css, so the two-tier contract had no
-   * tier-2 route here at all: a consumer wanting a different separator could only use !important
-   * or fork the stylesheet. Same value, now reachable. */
-  /* The OTP blinking caret. The ratchet catches it because the selector says "caret", but it is a
-   * text CURSOR, not a chevron: a 1px bar as tall as the digit's line box. Its width belongs to
-   * the stroke scale; its height belongs to neither the icon nor the band scale, so it is declared
-   * rather than forced onto one.
-   * scale-exempt: text-caret height, tracks the OTP digit's line box, not an icon or a band */
+
   --otp-caret-block-size: 1rem;
   --otp-caret-inline-size: var(--stroke-hairline);
   --otp-separator-icon-size: var(--icon-size-md);
@@ -414,36 +275,6 @@
   --button-count-space-inline: var(--space-1);
   --button-count-font-size: var(--font-size-xs);
 
-  /* Count pill · COLOUR (gh#320). The pill used to tint itself translucently over whatever the
-   * button's surface happened to be (`bg-primary-foreground/15`, `bg-foreground/8`), which means
-   * its contrast was a FUNCTION of that surface — and five of those combinations measured below
-   * the 4.5:1 that WCAG 2.2 SC 1.4.3 requires of small text:
-   *
-   *   default (light)                  3.88   ·  destructive (dark)              4.29
-   *   outline family (light, at rest)  4.32   ·  outline family (light, hover)   3.64
-   *   outline family (dark, hover)     3.68
-   *
-   * The hover rows are the reason a static sweep never caught this: `--accent` only appears under
-   * the cursor, so no screenshot of a resting page contains the failing state. Same shape as
-   * gh#299 and gh#315 — a value that passes on the surface someone happened to check.
-   *
-   * The fix is the one gh#312 already validated on Toggle: OPAQUE role fills, which make the pill's
-   * contrast independent of the button's variant AND of hover. Each filled variant uses its own
-   * label pair SWAPPED, so the pill is exactly as legible as the label beside it and cannot be less
-   * legible under any theme that keeps that button readable at all:
-   *
-   *   default      --primary     on --primary-foreground       5.04 light · 7.07 dark
-   *   destructive  --destructive on --destructive-foreground   6.10 light · 5.53 dark
-   *   secondary    --secondary   on --secondary-foreground    14.25 light · 12.40 dark
-   *   outline family --foreground on --muted                  14.25 light · 12.40 dark
-   *
-   * The outline family's `--muted` fill is 1.09:1 against the button's own ground, so at rest the
-   * counter still reads as quiet text rather than a badge (#44) — it is legibility of the DIGITS
-   * that went up, not loudness of the pill.
-   *
-   * All eight are role-mirror knobs: `initial` at :root with the role default at the CALL SITE, so
-   * a scoped [data-tenant]/.dark override of the role still reaches them (docs/TOKENS.md ·
-   * "Role-mirror knobs MUST be `initial`"). */
   --button-count-background: initial;
   --button-count-color: initial;
   --button-count-default-background: initial;
@@ -453,27 +284,11 @@
   --button-count-secondary-background: initial;
   --button-count-secondary-color: initial;
 
-  /* LABEL — the Label primitive's own box and type (#319). Every one of these was a Tailwind
-   * literal baked into label.tsx (`text-sm leading-none flex items-center gap-2`), so a service
-   * whose form grid wanted a smaller/denser label had to hand-write font-size on every call site
-   * (which is exactly why --form-label-font-size had to be invented as a per-instance escape).
-   * They live under the `control` prefix because Label is a control-family primitive and
-   * src/tokens/components/ has no `label` file of its own.
-   *
-   * Defaults reproduce today's rendering exactly:
-   *   font-size   ← `text-sm`      → --text-sm → var(--font-size-sm)
-   *   line-height ← `leading-none` → 1 (leading-none beats text-sm's companion line-height) */
   --control-label-font-size: var(--font-size-sm);
   --control-label-line-height: 1;
-  /* Label → addon/required-marker gap. A RAW rem, deliberately NOT var(--space-2): the `gap-2` it
-   * replaces reads Tailwind's own --spacing grid, which this repo does NOT density-scale, so a
-   * --space-* default would silently resize every label row under a compact/comfortable density.
-   * A service that WANTS it to follow density points the knob at var(--space-2) itself. */
+
   --control-label-space-gap: 0.5rem;
-  /* Weight of a label whose `peer` control is disabled. Deliberately its OWN knob rather than the
-   * global --disabled-opacity (0.5): a label must stay READABLE next to a disabled control — it is
-   * still the field's accessible name — so it rests one step heavier than the control it names.
-   * Default = the historical `peer-disabled:opacity-70`. */
+
   --control-label-disabled-alpha: 0.7;
 }
 

package/dist/tokens/components/data-display.css

@@ -1,82 +1,53 @@
-/* Data-display component tokens — small-by-design text knobs (rule #45/#46). */
+
 
 :root {
-  /* Accordion chevron and Carousel arrow. Both were bare 1rem literals in
-   * data-display-layout.css — glyphs with no tier-2 route, invisible to the icon ratchet because
-   * neither selector contains the word "icon". */
+
   --accordion-chevron-size: var(--icon-size-md);
   --carousel-arrow-icon-size: var(--icon-size-md);
 
-  /* Outline-form ring gaps — a hugging ring would touch these marks
-   * (styles/focus-ring.css). */
   --accordion-focus-ring-offset: 2px;
   --carousel-dot-focus-ring-offset: 2px;
   --progress-label-font-size: var(--font-size-xs);
+
+  --code-block-font-size: var(--font-size-sm);
+  --code-block-font-size-xs: var(--font-size-xs);
+  --code-block-line-height: var(--line-height-normal);
+  --code-block-space-inset: var(--space-3);
+  --code-block-radius: var(--radius-md);
+  --code-block-max-height-sm: 12rem;
+  --code-block-max-height-md: 20rem;
+  --code-block-max-height-lg: 32rem;
+
+  --prose-font-size: var(--font-size-base);
+  --prose-font-size-sm: var(--font-size-xs);
+  --prose-line-height: var(--line-height-body);
+  --prose-space-block: var(--space-3);
+  --prose-heading-space-block-start: var(--space-6);
+  --prose-list-space-inline: var(--space-6);
+  --prose-list-item-space: var(--space-1);
+  --prose-quote-border-width: var(--stroke-md);
+  --prose-quote-space-inline: var(--space-3);
+  --prose-code-font-size: calc(1em / var(--font-size-ratio));
+  --prose-code-space-inline: var(--space-1);
+  --prose-code-radius: var(--radius-sm);
+  --prose-image-radius: var(--radius-md);
   --tree-item-title-font-size: var(--font-size-xs);
   --tree-item-description-font-size: var(--font-size-xs);
   --timeline-note-font-size: var(--font-size-xs);
 
-  /* Avatar surface — `initial` so the --muted default re-resolves at the call site under a scoped
-     theme (a :root binding to a role var freezes at :root; a scoped role override never reaches it).
-     A service re-tints the placeholder fill once (e.g. --avatar-background: hsl(var(--accent))).
-     Default = hsl(var(--muted)). */
   --avatar-background: initial;
-  /* Optional role wash over the avatar (default transparent = invisible, rule #44).
-     Painted as an overlay so a service sets --avatar-tint: hsl(var(--primary) / 0.08). */
+
   --avatar-tint: transparent;
 
-  /* Entity-header mark — `<Avatar shape="square">` (gh#249): the compact rounded SQUARE an
-     organization/service header uses, as opposed to the round person avatar. Every value is a knob
-     (rule #45) so a service matches the mark to its own grid without a className override.
-     --avatar-square-background / --avatar-square-foreground are role-mirror knobs: `initial` so the
-     --primary / --primary-foreground defaults re-resolve at the CALL SITE under a scoped
-     [data-tenant]/.dark theme (a :root binding to a role var would freeze at the :root value).
-     Defaults = --radius-lg corners · --control-height box (same as the circle avatar, so swapping
-     shape never reflows a header) · hsl(var(--primary)) fill · hsl(var(--primary-foreground)) glyph. */
   --avatar-square-radius: var(--radius-lg);
   --avatar-square-size: var(--control-height);
   --avatar-square-background: initial;
   --avatar-square-foreground: initial;
 
-  /* Capability medallion — `<Avatar appearance="tinted">` (gh#12): the tinted plate a capability /
-     feature glyph sits on, as opposed to the SOLID entity mark above. Pair it with shape="square"
-     for the canonical rounded square. --avatar-tinted-background / --avatar-tinted-foreground are
-     role-mirror knobs (`initial`, docs/TOKENS.md) so the --primary defaults resolve at the CALL
-     SITE and a scoped [data-tenant]/.dark override of --primary reaches them — the exact reason
-     this is a token and not the `hsl(var(--primary) / 0.1)` literal consumers were writing in page
-     CSS. Defaults = hsl(var(--primary) / 0.1) wash · hsl(var(--primary)) glyph ·
-     --control-icon-size glyph box. */
   --avatar-tinted-background: initial;
   --avatar-tinted-foreground: initial;
   --avatar-tinted-glyph-size: var(--control-icon-size);
 
-  /* PRESENCE INDICATOR — `<Avatar presence="online|away|busy|offline">` (gh#309): the realtime
-     reachability dot pinned to the block-end/inline-end corner of the mark. Every constant below is
-     a knob (rule #45) and the separator ring is chrome that reads a token (rule #44), because the
-     hand-rolled workaround this replaces —
-     `bg-green-500 ring-2 ring-background -end-0.5 -bottom-0.5` on a wrapper span — bakes four
-     service-tunable constants and a raw palette colour into a consumer page.
-
-     --avatar-presence-size is a PROPORTION of the mark, not a px step. One value therefore tracks
-     EVERY avatar the system paints — the --control-height default box, a `size-12` call site, the
-     --avatar-square-size entity mark, --org-switcher-avatar-size (1.75rem), --upload-avatar-size
-     (6rem), the 36px ListRow density="compact" leading mark — instead of freezing one diameter that
-     is a boulder on a 24px mark and a speck on a 96px one. --avatar-presence-min-size is the
-     legibility floor for the smallest marks; --avatar-presence-inset lets a service pull the dot
-     further into a round mark than into a square one.
-
-     --avatar-presence-ring-color and the four state colours are ROLE-MIRROR knobs: declared
-     `initial` here so the --background / --success / --warning / --destructive / --muted-foreground
-     defaults resolve at the CALL SITE and a scoped [data-tenant] / .dark override of the ROLE still
-     reaches them (docs/TOKENS.md · "Role-mirror knobs MUST be `initial`"). Binding them to the role
-     here would freeze the ring light-mode-white on a dark avatar.
-
-     Presence is never colour-alone (WCAG 1.4.1): the colour rides with a SHAPE — filled · half
-     filled · barred · hollow — and a localized sr-only string, so --avatar-presence-stroke-width and
-     --avatar-presence-bar-* are part of the accessible encoding, not decoration.
-
-     Defaults = 30% of the mark, floor 0.5rem · flush with the mark's corner · 2px separator ring in
-     --background · 1.5px state stroke · a 56%-wide, 1.5px dnd bar. */
   --avatar-presence-size: 30%;
   --avatar-presence-min-size: var(--space-2);
   --avatar-presence-inset: 0;
@@ -90,25 +61,16 @@
   --avatar-presence-busy-color: initial;
   --avatar-presence-offline-color: initial;
 
-  /* Progress track + fill — `initial` so the role defaults re-resolve under a scoped theme.
-     Track reads --secondary, fill reads --success; a service re-tones once.
-     Defaults = hsl(var(--secondary)) track · hsl(var(--success)) fill. */
   --progress-track-background: initial;
   --progress-fill-background: initial;
 
-  /* Timeline accents — `initial` so the dot/line role defaults re-resolve under a scoped theme.
-     Defaults = hsl(var(--success)) done · hsl(var(--primary)) current/line. */
   --timeline-dot-done-background: initial;
   --timeline-dot-current-background: initial;
   --timeline-line-completed-background: initial;
 
-  /* Tree active item — border + soft bg tint over the --primary role. `initial` so the default
-     re-resolves under a scoped theme. Defaults = hsl(var(--primary) / 0.3) border · 0.05 fill. */
   --tree-item-active-border: initial;
   --tree-item-active-background: initial;
 
-  /* QR codes stay scanner-safe in light and dark application themes. Consumers may override these
-     component tokens only when the resulting pair retains strong contrast. */
   --qr-code-foreground: 0 0% 0%;
   --qr-code-background: 0 0% 100%;
   --qr-code-size-xs: 6rem;
@@ -116,28 +78,15 @@
   --qr-code-size-md: 10rem;
   --qr-code-size-lg: 12.5rem;
 
-  /* SCROLL AREA — the custom scrollbar rail. `.ui-scroll-area-*` did not exist at all: the whole
-   * rail shipped as Tailwind literals on the component (`w-2.5 p-px` / `h-2.5 p-px`,
-   * `rounded-full`), so a service could not widen the bar for a touch/coarse-pointer console or
-   * square the thumb to match a sharp-cornered theme without forking ScrollArea (rule #45).
-   * --scroll-area-bar-size is a RAW rem on purpose: it replaces a FLAT Tailwind step (2.5 = 10px),
-   * not a --space-* step, so binding it to the density-scaled scale would silently change today's
-   * rendering under a non-default --scaling. Defaults reproduce the previous rail exactly. */
   --scroll-area-bar-size: 0.625rem;
-  /* Hairline inset that keeps the thumb off the rail edge — a service running a thicker bar
-   * usually wants a proportionally larger gutter here. */
+
   --scroll-area-bar-padding: 1px;
   --scroll-area-thumb-radius: var(--radius-pill);
 
-  /* PERMISSION MATRIX — the sticky-first-column grid. Nothing here was themeable: the class
-   * `.ui-permission-matrix` existed as a bare hook with no CSS rule at all, so every constant
-   * lived on the component (#319). A JA/VI service whose role names run longer than the English
-   * ones could not widen the label column without forking. */
   --permission-matrix-label-width: 16rem;
   --permission-matrix-role-space-gap: var(--space-1);
   --permission-matrix-name-space-gap: 0.375rem;
   --permission-matrix-cell-icon-size: var(--control-icon-size);
-  /* Floor for the scrolling body — below this the columns collapse into unreadable slivers, so
-   * the table scrolls instead. Mirrors --table-surface-min-inline-size on DataTable. */
+
   --permission-matrix-min-width: 48rem;
 }