@godxjp/ui 18.15.4 → 19.1.0

package/dist/tokens/components/shell.css

@@ -6,6 +6,41 @@
   --sidebar-section-label-font-size: var(--font-size-2xs);
   --sidebar-product-tenant-font-size: var(--font-size-2xs);
   --sidebar-badge-font-size: var(--font-size-2xs);
+  /* Sidebar nav count pill colours — the pill had a font-size knob and NO colour knob, so a rail
+   * that needed to tell "unread" from "mentions you" had to nest a <Badge> inside `badge` and got
+   * two pills, one inside the other. `initial` so the role defaults re-resolve at the call site
+   * under a scoped theme (a :root binding to a role var freezes at :root).
+   * Defaults = hsl(var(--secondary)) fill · hsl(var(--muted-foreground)) text. */
+  --sidebar-badge-background: initial;
+  --sidebar-badge-foreground: initial;
+  /* The EMPHASIS pair, read only by `SidebarItemProp.badgeTone="destructive"` (rule #44 — a
+   * neutral row never resolves them). Defaults = hsl(var(--destructive)) fill ·
+   * hsl(var(--destructive-foreground)) text, the canonical AA-checked pair. */
+  --sidebar-badge-destructive-background: initial;
+  --sidebar-badge-destructive-foreground: initial;
+  /* Softened focus ring on the tinted shell grounds: at full alpha the ring
+   * reads as a SELECTED item rather than a focused one (styles/focus-ring.css). */
+  --sidebar-user-focus-ring-alpha: 0.45;
+  /* Topbar glyphs. Three separate sizes, all previously baked as literals in shell-layout.css.
+   *
+   * --topbar-chip-icon-size is off the SCALE but on the pixel GRID, and those are different
+   * findings. Read the rule it styles: `display: grid; place-items: center; font-weight: 700` —
+   * it is a letter MEDALLION, not a glyph, so the half-pixel-stroke argument that made the
+   * NavigationMenu chevron snap from 14.4px to 14px does not apply here. 18px is a whole pixel
+   * sitting between --icon-size-md (16) and -lg (20); snapping it would be a visible 2px box
+   * change bought for nothing. Declared, not silently tolerated.
+   * scale-exempt: 18px letter medallion, a whole pixel between two icon steps, not a glyph */
+  --topbar-chip-icon-size: 1.125rem;
+  /* Sidebar product-switcher caret — a real glyph, previously a bare 0.875rem. */
+  --sidebar-product-caret-icon-size: var(--icon-size-sm);
+  --topbar-icon-size: var(--icon-size-md);
+  /* The caret is the eighth literal-sized icon rule in this file. The ratchet missed it because
+   * its selector says `caret` while the pattern looked for `icon|glyph` — the guard has been
+   * taught the wider vocabulary. */
+  --topbar-caret-icon-size: var(--icon-size-xs);
+
+  --topbar-icon-focus-ring-alpha: 0.45;
+
   --sidebar-user-role-font-size: var(--font-size-2xs);
   --org-switcher-meta-foreground: var(--muted-foreground);
   --sidebar-nav-sub-font-size: var(--font-size-xs);
@@ -23,14 +58,35 @@
 
   /* DXS application-shell geometry. These defaults mirror the checked-in
    * Admin/Console hi-fi source while remaining themeable by consumers. */
-  --app-shell-bar-height: 3rem;
+  --app-shell-bar-height: var(--band-height-2xl);
   /* (the coarse-pointer override lives at the end of this file — Rule #24 grows
    * controls to 44px, and a 48px bar cannot hold a 44px control plus its 3px
    * focus ring at the very top of the viewport, where overflow cannot help.) */
-  /* Inline inset and slot gap of the AppShell top bar. `-compact` applies below the shell
-   * breakpoint (the docked sidebar is gone, so the bar tightens against the viewport edge). */
-  --app-shell-bar-inset: var(--space-4);
-  --app-shell-bar-inset-compact: var(--space-3);
+  /* Inline inset and slot gap of the AppShell top bar.
+   *
+   * ONE OWNER FOR THE HORIZONTAL PAGE-INSET AXIS (gh#330). The bar sits in the SAME grid track as
+   * `.app-main`, directly above the page, so its first control and the page title are on one
+   * vertical edge — or they are supposed to be. These two knobs used to name their own values
+   * (--space-4 / --space-3) while the page named --space-page-x / --space-page-compact-x, and
+   * nothing reconciled them: measured in Chromium on /isolate/layout-app-shell the topbar's
+   * content started at x=80 while the page header's started at x=88 (1512px), and because the two
+   * sides also stepped at DIFFERENT breakpoints (shell 900px, page 720px) the error was not even
+   * constant — 8px at 1512, 12px between 720 and 900, 4px below 720. A consumer cannot correct a
+   * drift that changes with the viewport.
+   *
+   * The page gutter WINS the axis, for three reasons: it is read by seven regions (page header,
+   * toolbar, body, footer, PageContainer.Inset, the DataTable full-bleed compensation, Banner)
+   * against this knob's one element; the bar is the region that must line up with the page, not
+   * the other way round (the rail is a different track with its own inset); and moving the bar
+   * moves exactly one element in one composition, while moving --space-page-x would move every
+   * page in every consumer app.
+   *
+   * The NAMES stay — a theme that already sets `--app-shell-bar-inset` keeps working, and a bar
+   * that genuinely wants to sit tighter than its page still has its own knob. Only the DEFAULTS
+   * now point at the owner. `-compact` applies below the PAGE's 720px step (not the shell's 900px
+   * restructure), so both sides tighten on the same line — see styles/shell-layout.css. */
+  --app-shell-bar-inset: var(--space-page-x);
+  --app-shell-bar-inset-compact: var(--space-page-compact-x);
   --app-shell-bar-gap: var(--space-3);
   /* Docked navigation rail widths — the SINGLE most-retuned shell constant (rule #45). A service
    * that designs on a different grid sets `--app-shell-sidebar-width: 15.9375rem` (255px) once
@@ -54,9 +110,48 @@
    * generic sheet chrome inset must NOT stack on top of it (gh#211). Set it to var(--space-6) for
    * a custom mobileNav node that wants the full sheet chrome inset. */
   --app-shell-mobile-nav-inset: var(--space-1);
+  /* Hamburger glyph in the drawer trigger. Bigger ON PURPOSE than the trigger Button's own
+   * `size="sm"` icon step (--control-icon-size-sm, 0.875rem) — it is the ONLY navigation
+   * affordance on a phone, so it reads at the 1.25rem step. A flat rem, not a density-scaled
+   * alias: it must not move with the density axis, or the one tap target that opens navigation
+   * shrinks on a compact page. Consumed as a `size-[var(...)]` utility so it outranks
+   * `.ui-button--sm svg` (see the comment at the call site in app-shell.tsx). */
+  --app-shell-mobile-nav-icon-size: var(--icon-size-lg);
+
+  /* ServiceRolePanel (gh#319). `.ui-service-role-panel` shipped as a bare hook — the class was on
+   * the root but no rule existed anywhere, so the role rail's rhythm lived entirely as Tailwind
+   * literals inside the component and no theme could reach it (#45). The panel is a thin
+   * composition over MasterDetail, which still owns ALL the two-track geometry; these knobs cover
+   * only the role LIST inside the master rail.
+   *
+   * Flat rems, not `--space-*`: the literals they replace read Tailwind's own `--spacing` grid,
+   * which this package never remaps and which does not follow the density axis. Aliasing them
+   * would start scaling the rail inside a `.ui-density-*` subtree — a visual change, not a
+   * refactor. */
+  --service-role-panel-list-gap: 0.25rem; /* between role rows (was `gap-1`) */
+  --service-role-panel-row-gap: 0.25rem; /* select button ↔ delete button (was `gap-1`) */
+  --service-role-panel-item-title-gap: 0.375rem; /* role name ↔ lock Badge (was `gap-1.5`) */
+  /* The role row is a MULTI-LINE button (name over a description/member-count line), so it opts
+   * out of the control height grid (`h-auto`) and sets its own block padding — that is what the
+   * `py-2` literal was doing. It needs the raised `.ui-service-role-panel` ancestor specificity
+   * (0,2,0) to beat `.ui-button--md { padding-block: var(--button-space-block) }` (0,1,0):
+   * layout.css is imported BEFORE control.css and both are `@layer components`, so an equal
+   * (0,1,0) rule here would silently lose. */
+  --service-role-panel-item-padding-block: 0.5rem;
   --sidebar-brand-mark-size: 1.375rem;
-  --sidebar-nav-item-height: 2rem;
-  --sidebar-nav-item-font-size: 0.8125rem;
+  --sidebar-nav-item-height: var(--band-height-md);
+  /* ON the type scale (gh#329). This was `0.8125rem` — 13px, which is not a step: the golden scale
+   * runs …/ratio² ≈ 11.1 · /ratio ≈ 12.5 · base 14…, so 13 sat BETWEEN two steps and every nav row
+   * in the rail read off the system's type rhythm. It had no mechanical anchor either — unlike the
+   * auth field label below, which is pinned to an artboard y-coordinate and keeps its literal with
+   * a declared `scale-exempt` — only the checked-in hi-fi source's number.
+   *
+   * GEOMETRY MOVES, by 0.53px: 13px → --font-size-xs (≈12.47px), the step the sub-row
+   * (--sidebar-nav-sub-font-size) and the flyout title already take. Nothing reflows — the row is a
+   * fixed 2rem with `align-items: center`, and 1.5 × 12.47 = 18.7px sits inside it with the same
+   * headroom 19.5px had. What is gained is that a service overriding --font-size-base now moves the
+   * rail's labels with the rest of its type, instead of leaving one constant behind. */
+  --sidebar-nav-item-font-size: var(--font-size-xs);
   /* Line box of the nav LABEL, not the row (gh#254): `.sb-label` clips, so its line box is its clip
    * box, and the row's `line-height: 1` shears descenders and Vietnamese tone marks. Keep >= 1.2. */
   --sidebar-nav-item-line-height: 1.5;
@@ -66,7 +161,7 @@
    * tone marks exactly as the sidebar label did. Keep >= 1.2. */
   --auth-account-summary-email-line-height: 1.5;
   --topbar-start-truncate-line-height: 1.5;
-  --sidebar-nav-icon-size: 1rem;
+  --sidebar-nav-icon-size: var(--icon-size-md);
   --sidebar-nav-item-gap: 0.625rem;
   --sidebar-nav-item-padding-x: 0.625rem;
   --sidebar-nav-gap: 2px;
@@ -111,7 +206,7 @@
    * search trigger, a collapsing field). A page-local media query is the anti-pattern this knob
    * replaces. */
   --topbar-center-compact-display: none;
-  --org-switcher-trigger-height: 2.75rem;
+  --org-switcher-trigger-height: var(--band-height-xl);
   --org-switcher-trigger-padding-x: var(--space-2);
   --org-switcher-avatar-size: 1.75rem;
   --org-switcher-menu-width: 16rem;
@@ -143,7 +238,7 @@
 
   /* Canonical DXS auth preset. These are public theme knobs: consumers select the preset once on
    * AuthShell and may retune the product theme here rather than overriding individual fields. */
-  --auth-shell-canonical-control-height: 2.25rem;
+  --auth-shell-canonical-control-height: var(--band-height-lg);
   --auth-shell-canonical-card-max-width: 22.5rem;
   --auth-shell-canonical-heading-size: var(--font-size-base);
   --auth-shell-canonical-main-padding: 1rem;
@@ -277,20 +372,27 @@
    * content instead. */
   --auth-shell-registration-identity-slot-block-size: 7rem;
 
-  /* Labelled auth divider geometry. The canonical SCR-001 divider row is 19px tall at the 11px
+  /* Labelled auth divider geometry. The canonical SCR-001 divider row is 19px tall at an 11px
    * label (the artboard label inherits the page's line-height instead of collapsing to a 1.0 line
-   * box). 19/11 pins the row at exactly 19px and keeps it proportional if a service retunes the
-   * label font-size. The previous hardcoded `line-height: 1` rendered an 11px row, sitting the
-   * whole lower half of the Login card 8px high (gh#263). */
+   * box). 19/11 is that RATIO, not a pin: it holds the row proportional when the label's step
+   * moves, which is exactly what gh#329 did to it. The previous hardcoded `line-height: 1`
+   * rendered an 11px row, sitting the whole lower half of the Login card 8px high (gh#263).
+   *
+   * ON the type scale (gh#329): the label was the literal `0.6875rem` (11px) and is now
+   * --font-size-2xs, the scale's ratio⁻² step ≈ 11.107px — the same step the sidebar section
+   * label, the kbd cap and the chrome page subtitle already take. GEOMETRY MOVES by 0.11px on the
+   * label and 0.19px on the row (19 → 19.19px), i.e. a fifth of a pixel, and in exchange the auth
+   * micro-scale finally rides the service's --font-size-base like everything else. 11 was never a
+   * step; it was 2xs rounded to the nearest whole pixel and then written down as if it were. */
   --auth-shell-divider-gap: 0.625rem;
-  --auth-shell-divider-label-font-size: 0.6875rem;
+  --auth-shell-divider-label-font-size: var(--font-size-2xs);
   --auth-shell-divider-label-line-height: calc(19 / 11);
   --auth-shell-divider-rule-color: var(--border);
   --auth-shell-divider-label-color: var(--muted-foreground);
   --auth-identity-gap: 0.375rem;
   --auth-requester-gap: 0.375rem;
-  --auth-requester-icon-size: 1rem;
-  --auth-requester-glyph-size: 0.625rem;
+  --auth-requester-icon-size: var(--icon-size-md);
+  --auth-requester-glyph-size: var(--icon-size-2xs);
   --auth-account-summary-min-height: var(--control-height-comfortable);
   --auth-account-summary-gap: var(--space-2);
   --auth-account-summary-padding: var(--space-1) var(--space-2);
@@ -299,13 +401,23 @@
   --auth-account-summary-avatar-glyph-size: var(--control-icon-size-sm);
   --auth-account-summary-email-font-size: var(--font-size-sm);
   --auth-footer-content-gap: 0.375rem;
-  --auth-footer-text-font-size: 0.6875rem;
+  /* The same 11px → 2xs snap as the divider label above (gh#329); this one carried no artboard
+   * anchor at all, only the literal. GEOMETRY MOVES by 0.11px. */
+  --auth-footer-text-font-size: var(--font-size-2xs);
   --auth-stack-gap: var(--space-3);
   --auth-shell-field-label-gap: var(--space-1);
   /* Canonical SCR-001 field label: a LITERAL 12px (the golden-ratio --font-size-xs ≈ 12.47px would
    * drift the 18px line box to 18.7px and push the email input off its y=489 anchor) with a 1.5
    * line box = 18px. The former var(--font-size-xs)/1.25 pair rendered a 14px box, sitting the
-   * email input 4px high (gh#263). */
+   * email input 4px high (gh#263).
+   *
+   * gh#329 asked whether this is merely a long way of writing --font-size-xs. It is NOT: the xs
+   * step is base/ratio ≈ 12.47px, not 12. This is the system's TIER 2 — a value that is off every
+   * step because it is anchored to something outside the system (an artboard coordinate), which is
+   * a real need and must have a sanctioned route rather than becoming a fork or an !important. The
+   * route is the marker below, which the scale-bypass guard honours and PRINTS, so the exception is
+   * declared once and stays visible instead of hiding in prose. */
+  /* scale-exempt: SCR-001 pins the email input at y=489; --font-size-xs (12.47px) drifts the 18px label box to 18.7px (gh#263) */
   --auth-shell-field-label-font-size: 0.75rem;
   --auth-shell-field-label-line-height: 1.5;
 
@@ -367,6 +479,6 @@
  * overflow setting can recover. 3.5rem gives 6px of breathing per side. */
 @media (pointer: coarse) {
   :root {
-    --app-shell-bar-height: 3.5rem;
+    --app-shell-bar-height: var(--band-height-3xl);
   }
 }

package/dist/tokens/components/table.css

@@ -1,9 +1,9 @@
 /* Table component tokens: row height, cell padding. */
 
 :root {
-  --table-row-height-compact: 1.75rem;
-  --table-row-height-default: 2rem;
-  --table-row-height-comfortable: 2.75rem;
+  --table-row-height-compact: var(--band-height-sm);
+  --table-row-height-default: var(--band-height-md);
+  --table-row-height-comfortable: var(--band-height-xl);
   --table-row-height: calc(var(--table-row-height-default) * var(--scaling));
   --table-cell-padding-y: var(--space-2);
   --table-cell-space-x: var(--control-padding-x);
@@ -147,4 +147,53 @@
   --table-stacked-collection-card-gap: var(--space-stack-sm);
   --table-stacked-collection-cell-padding-y: var(--space-stack-xs);
   --table-stacked-collection-label-font-size: var(--font-size-xs);
+
+  /* DATA TABLE odds and ends that were still literal on the component (#319). The table's cell
+   * rhythm, widths and action-collection tiers were already tokenized; these are the pieces
+   * around them — the select column, sort glyphs, sticky header layer and skeleton shapes. */
+  --table-select-column-width: 2.5rem;
+  --table-sort-icon-size: var(--icon-size-xs);
+  --table-toolbar-icon-size: var(--icon-size-md);
+  --table-pagination-icon-size: var(--icon-size-md);
+  --table-pagination-font-size: var(--font-size-sm);
+  /* Skeleton placeholders mimic the real content they stand in for: a checkbox square and a
+   * text line at the row's cap height. Retune with --table-cell-padding-y to keep the loading
+   * state the same height as the loaded one. */
+  --table-skeleton-check-size: 1rem;
+  /* The skeleton bar's BLOCK SIZE. `--table-skeleton-line-height` was a length on the
+   * line-height axis, whose scale is unitless ratios (gh#324) — a mis-named height, and the
+   * only raw value on that axis, which is what kept the axis ungated. Renamed rather than
+   * left, with the old name kept as a DEPRECATED ALIAS: it is a published token a consumer
+   * theme may already override, and styles/table-layout.css still reads the old name, so an
+   * override of either spelling keeps working. Prefer the new name; the alias may be removed
+   * in a future major. */
+  --table-skeleton-line-block-size: 1rem;
+  --table-skeleton-line-height: var(--table-skeleton-line-block-size);
+  --table-skeleton-radius: var(--radius-sm);
+
+  /* The table's own base type step (gh#319). Was a `text-sm` utility on the <table>; the theme
+   * remaps `--text-sm` to `--font-size-sm`, so this default is byte-identical. */
+  --table-font-size: var(--font-size-sm);
+  /* MANDATORY companion to --table-font-size — the gh#260 trap, again. `text-sm` also set
+   * line-height from Tailwind's `--text-sm--line-height`, and styles/base.css remaps `--text-sm`
+   * but NOT that companion. Without this the table would silently inherit ambient page leading
+   * the moment the font-size moved into CSS. Same unitless ratio Tailwind ships. */
+  --table-line-height: calc(1.25 / 0.875);
+  /* Horizontal row rule (chrome, #44) — the divider between body rows AND under the header row.
+   * Owned here rather than as TableRow's `border-b` utility so the "last row draws no rule"
+   * rule in `@layer components` can actually zero it; a utility would outrank it by layer.
+   * Colour is deliberately NOT set: it inherits the global `* { border-color: hsl(var(--border)) }`
+   * so a scoped [data-tenant]/.dark override of --border still reaches every row. */
+  --table-row-border-width: var(--stroke-hairline);
+  /* Flush divider (chrome, #44/#45) — the ONE edge a full-bleed table keeps when it sits inside
+   * `<CardContent flush>`: the line between a plain CardHeader and the first row. The other three
+   * edges coincide with the card's own frame and are erased (gh#305); this one has nothing behind
+   * it, so without it the header band floats (gh#306). Scoped by construction to the case that
+   * needs it — a BANDED header, a CardBar or a headerless card already draw their own line there
+   * and never reach this token — so a service tunes only the plain-header divider: `0` for a
+   * borderless full-bleed table, heavier for a stronger band. Colour and style are NOT set here:
+   * only the width is restored, so the surface's own border declaration still owns them and a
+   * scoped [data-tenant]/.dark override of --border reaches it.
+   * Default = the same hairline the table's other rules draw. */
+  --table-flush-divider-width: var(--table-row-border-width);
 }

package/dist/tokens/components/toggle.css

@@ -0,0 +1,82 @@
+/* TOGGLE — counter-pill + pressed-state knobs (gh#312).
+ *
+ * Toggle owns the pressed state; Button owns the counter-pill vocabulary (`count` /
+ * `overflowCount` / `showZero`). A counted pressed chip (a faceted filter chip "Unread 12", a
+ * reaction chip) needs both, so Toggle grew the same vocabulary — and these knobs exist so it
+ * grows it WITHOUT growing a second, drifting set of constants (cardinal rule #45).
+ *
+ * SHARE vs SPLIT — the rule this file follows, and why each half falls where it does:
+ *
+ *   • GEOMETRY is genuinely the same pill — min-width, inline padding, type step, corner. Toggle
+ *     keeps its OWN knob for each (rule #45) but sets it to Button's exact value off the same
+ *     primitive scale token, and a test asserts the two stay equal — so a Toggle count set beside
+ *     a Button count is indistinguishable and cannot drift unnoticed, while a service can still
+ *     move one without the other.
+ *
+ *   • COLOUR is genuinely different, and MEASURED so. Button's pill sits on a static variant
+ *     surface and tints itself with a translucent foreground (`bg-primary-foreground/15`,
+ *     `bg-foreground/8`). Toggle's pill sits on a surface that INVERTS when pressed, and a
+ *     translucent tint over it cannot clear WCAG 1.4.3 AA at the xs step: with the shipped roles,
+ *     `--primary-foreground` over `--primary-foreground/0.16` over `--primary` measures 3.82:1 in
+ *     light (4.39:1 even at 0.08 — the ceiling is the chip label's own 5.04:1, and any tint can
+ *     only lower it), and `--muted-foreground` over `--foreground/0.08` measures 4.32:1, dropping
+ *     to 3.64:1 once the chip hovers to `--accent`. Forcing a shared colour token here would ship
+ *     a known #299-class failure.
+ *
+ *     So Toggle's pill uses OPAQUE role fills, which makes its contrast independent of the chip's
+ *     variant and hover surface, and inverts them with the state:
+ *       unpressed  --foreground on --muted              → 14.25:1 light · 12.40:1 dark
+ *       pressed    --primary   on --primary-foreground  →  5.04:1 light ·  7.07:1 dark
+ *     The pressed pair is the chip label's own pair, swapped — the pill is exactly as legible as
+ *     the label it sits next to, never worse, under any theme that keeps that pair legible.
+ *
+ * Every colour knob is a ROLE-MIRROR knob: `initial` at :root with the role default at the call
+ * site (docs/TOKENS.md · "Role-mirror knobs MUST be `initial`"). A `:root` binding to
+ * `var(--primary)` would freeze at the :root value and a scoped `[data-tenant]`/`.dark` override
+ * of the role would never reach it.
+ */
+:root {
+  /* ── Counter pill · geometry. One knob per component (rule #45, and the repo's existing shape:
+   * --button-count-*, --tag-input-chip-font-size, --toggle-sm-font-size are all independent knobs
+   * off the same primitive scale). The VALUES are byte-identical to Button's counter pill and read
+   * the same primitive tokens, so the two pills render the same size and a Toggle count set beside
+   * a Button count is indistinguishable — asserted by
+   * src/styles/__tests__/toggle-count-token-parity.test.ts so it cannot drift silently.
+   *
+   * (They are concrete here rather than `initial` + a call-site `var(--toggle-…, var(--button-…))`
+   * fallback because check:typography requires a bare `var(--token)` for every font-size, and a
+   * split shape across the five geometry knobs would be worse than a consistent one.) */
+  --toggle-count-min-width: var(--space-4);
+  --toggle-count-space-inline: var(--space-1);
+  --toggle-count-font-size: var(--font-size-xs);
+  --toggle-count-radius: var(--radius-pill);
+  /* Quiet default (#44) — the toggle's own flex gap already separates label from pill; this knob
+   * ADDS to it for a service whose design grid wants the counter pushed further out. */
+  --toggle-count-gap: 0;
+
+  /* ── Counter pill · unpressed colours. Defaults = hsl(var(--muted)) fill (quiet: 1.09:1 against
+   * the chip's own surface, so at rest the count reads as text, #44) and hsl(var(--foreground))
+   * text (14.25:1 on that fill). Opaque on purpose — a translucent fill would take its contrast
+   * from whatever surface the chip currently has, and lose ~0.7 on hover. */
+  --toggle-count-background: initial;
+  --toggle-count-color: initial;
+
+  /* ── Counter pill · PRESSED colours. Defaults = hsl(var(--primary-foreground)) fill,
+   * hsl(var(--primary)) text — the pressed chip's OWN pair, swapped. Not `--primary` on
+   * `--primary`: the pressed chip is already filled with --primary, so a --primary pill would be
+   * invisible on it. The swap also flips the pill from near-invisible to solid, which is one of
+   * the encodings that keeps the pressed state off colour alone (WCAG 1.4.1). */
+  --toggle-pressed-count-background: initial;
+  --toggle-pressed-count-color: initial;
+
+  /* ── Pressed chrome. Default = hsl(var(--primary)), i.e. the pressed fill itself, so out of the
+   * box this border is quiet (#44) and the pressed state is carried by the fill inversion + the
+   * pill inversion + the forced-colors rule below. A service whose pressed fill is a PALE tint
+   * (where those inversions get weak) opts into a visible outline by overriding this. */
+  --toggle-pressed-border-color: initial;
+
+  /* Under forced-colors every fill is flattened to a system colour, so neither inversion encodes
+   * anything any more. This outline is the state's structural fallback there — drawn on the
+   * PRESSED pill only, and as `outline` (not `border`) so it costs no layout. */
+  --toggle-count-forced-outline-width: var(--stroke-hairline);
+}

package/dist/tokens/components/upload.css

@@ -0,0 +1,107 @@
+/* Upload primitive tokens — dropzone, picture tile, avatar, draft bar, file row.
+ *
+ * Upload carried 66 hard-coded geometry/chrome literals, the single worst file in the library
+ * (#319). It renders five variants (dropzone · button · picture · picture-card · avatar), and
+ * EVERY one of them baked its box straight onto the component: a service could not resize the
+ * avatar, retune the dropzone's generous 40px inset, or align the file row to its own grid
+ * without forking. That is precisely the gap cardinal rule #45 exists to close.
+ *
+ * Radius defaults mirror the utilities they replace, verified against the built CSS:
+ *   rounded-lg   = var(--radius)                            → --radius-lg
+ *   rounded-md   = calc(var(--radius) / var(--radius-ratio)) → --radius-md
+ *   rounded-full                                             → --radius-pill
+ */
+
+:root {
+  /* DROPZONE — the large drag target. Its inset is deliberately generous; a dense service
+   * dials it back with one override instead of forking the variant. */
+  --upload-dropzone-space-inset: var(--space-10);
+  --upload-dropzone-radius: var(--radius-lg);
+  --upload-dropzone-border-width: var(--stroke-md);
+  --upload-dropzone-icon-size: var(--icon-size-3xl);
+  --upload-dropzone-hint-space-block-start: var(--space-3);
+  --upload-dropzone-hint-font-size: var(--font-size-sm);
+  --upload-dropzone-meta-space-block-start: var(--space-1);
+  --upload-dropzone-meta-font-size: var(--font-size-xs);
+
+  /* TILE — the 96px square shared by picture-card thumbnails and the "add image" button.
+   * One knob resizes the whole gallery; picture-card grids are the most common thing a service
+   * re-grids to match its own column rhythm. */
+  --upload-tile-size: 6rem;
+  --upload-tile-radius: var(--radius-md);
+  --upload-tile-space-gap: var(--space-3);
+  --upload-tile-icon-size: var(--icon-size-xl);
+  --upload-tile-label-space-block-start: var(--space-1);
+  --upload-tile-label-font-size: var(--font-size-xs);
+  --upload-tile-overlay-font-size: var(--font-size-xs);
+  /* Busy scrim over a tile/frame — role-mirror knob, `initial` so --background re-resolves at the
+   * CALL SITE under a scoped [data-tenant]/.dark theme. Default = hsl(var(--background) / 0.7). */
+  --upload-overlay-background: initial;
+  --upload-overlay-alpha: 70%;
+
+  /* REMOVE affordance — the ✕ / trash chip pinned to a tile or avatar. */
+  --upload-remove-space-inset: var(--space-1);
+  --upload-remove-offset: var(--space-1);
+  --upload-remove-icon-size: var(--icon-size-sm);
+
+  /* PICTURE — the single wide preview variant. */
+  --upload-picture-max-width: 20rem;
+  --upload-picture-radius: var(--radius-md);
+  --upload-picture-preview-max-height: 12rem;
+  --upload-picture-empty-height: 8rem;
+  --upload-picture-empty-label-space-block-start: var(--space-2);
+  --upload-picture-empty-label-font-size: var(--font-size-sm);
+  --upload-picture-overlay-font-size: var(--font-size-sm);
+  /* "Pending replace" chip. The radius previously came from a bare `rounded`, which resolves to a
+   * flat .25rem and so ignored the radius scale entirely — the exact shape of a rule #44 miss.
+   * It now follows the tile radius like every other chip in the component. */
+  --upload-picture-badge-radius: var(--radius-md);
+  --upload-picture-badge-offset: var(--space-2);
+  --upload-picture-badge-space-inline: var(--space-2);
+  --upload-picture-badge-space-block: 0.125rem;
+  --upload-picture-badge-font-size: var(--font-size-xs);
+
+  /* AVATAR — the round single-image variant. */
+  --upload-avatar-size: 6rem;
+  --upload-avatar-border-width: var(--stroke-md);
+  --upload-avatar-change-space-block: var(--space-1);
+  /* The "change" strip sits ON the photo, so its scrim is intentionally a fixed dark wash rather
+   * than a surface role — it must stay legible over an arbitrary user image in either theme. */
+  --upload-avatar-change-background: rgb(0 0 0 / 0.7);
+  --upload-avatar-change-foreground: #fff;
+  /* Alpha of an image the user has marked for deletion but not yet committed. */
+  --upload-avatar-pending-delete-alpha: 0.4;
+
+  /* DRAFT BAR — the undo strip shown after a pending remove/replace. */
+  --upload-draft-space-inline: var(--space-3);
+  --upload-draft-space-block: var(--space-2);
+  --upload-draft-space-gap: var(--space-2);
+  --upload-draft-radius: var(--radius-md);
+  --upload-draft-font-size: var(--font-size-sm);
+  --upload-draft-icon-size: var(--icon-size-sm);
+
+  /* FILE ROW — the list rendered under the dropzone/button variants. */
+  --upload-row-space-inline: var(--space-3);
+  --upload-row-space-block: var(--space-2);
+  --upload-row-space-gap: var(--space-3);
+  --upload-row-radius: var(--radius-md);
+  --upload-row-font-size: var(--font-size-sm);
+  --upload-row-icon-size: var(--icon-size-md);
+
+  /* CROP DIALOG — the 1:1 avatar cropper (`UploadCropDialog`). The 66-literal upload pass above
+   * never reached this file, so the whole cropper was still baked on the component: the dialog was
+   * pinned to `max-w-sm`, the round preview to `size-48`, the zoom row to `px-2`. An avatar is one
+   * of the most service-specific sizes there is (a 96px tile service wants a smaller crop stage
+   * than a 200px one), and the crop stage must stay in proportion with --upload-avatar-size —
+   * which is exactly the pair rule #45 exists to keep tunable together.
+   *
+   * The dialog width intentionally stays a knob of its own rather than reading
+   * --dialog-width-default: the cropper is deliberately NARROWER than a normal dialog so the round
+   * stage reads as the subject, not as a small element in a wide box. */
+  --upload-crop-dialog-max-width: 24rem;
+  --upload-crop-preview-size: 12rem;
+  --upload-crop-preview-radius: var(--radius-pill);
+  /* Zoom row inset — the slider is inset from the dialog edge so its thumb's focus ring is never
+   * flush against the dialog padding. */
+  --upload-crop-zoom-space-inline: var(--space-2);
+}