@godxjp/ui 18.4.0 → 18.6.0

package/dist/tokens/components/feedback.css

@@ -1,6 +1,19 @@
 /* Feedback primitive tokens: dialog, alert, empty state. */
 
 :root {
+  --sheet-width-default: 22.5rem;
+  /* Overlay scrims — `initial` so the shared semantic --overlay-background re-resolves at the CALL
+   * SITE under a scoped [data-tenant]/.dark theme (a :root binding to it freezes at :root and a
+   * scoped override never reaches the overlay). Each surface takes a SHARE of that one scrim rather
+   * than a private literal, so a service retints every backdrop with one --overlay-background while
+   * the calibrated per-surface depth survives: a slide-in Sheet washes the page more lightly than a
+   * 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%;
+  --dialog-width-default: 32rem;
+  --dialog-viewport-inset: 1.5rem;
+  --dialog-overlay-background: initial;
+  --dialog-overlay-alpha: 60%;
   /* Dialog inset defaults to the shared global chrome tokens (override --space-chrome-* once for the
    * whole system, or --dialog-space-x/-y for dialogs only). */
   --dialog-space-x: var(--space-chrome-x);
@@ -22,6 +35,10 @@
   --dialog-content-glow: 0 0 0 0 transparent;
   --empty-state-space-y: var(--space-10);
   --empty-state-space-x: var(--space-6);
+  /* Measure of the description paragraph (rule #45 — a service-tunable constant gets a knob).
+   * 28rem reads ~65 Latin characters per line; a JA/VI service that needs a shorter or longer
+   * measure for its own copy retunes this once instead of forking `.ui-empty-state-description`. */
+  --empty-state-description-max-width: 28rem;
   --empty-state-section-space-y: var(--space-6);
   --empty-state-section-space-x: var(--space-4);
   --empty-state-compact-space-y: var(--space-3);

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

@@ -0,0 +1,67 @@
+/* LegalDocumentShell component tokens — the long-form legal/policy document surface
+ * (terms of service, privacy policy, DPA, cookie policy, SLA, EULA) with a sticky
+ * table-of-contents rail.
+ *
+ * Rule #45 — every service-tunable constant is a knob: the readable measure, the rail
+ * width/offset, the section rhythm and the body leading are exactly the values a service
+ * theme wants to re-tune to match its design grid, so NONE of them are hard-coded in
+ * `src/styles/layout.css`.
+ *
+ * Rule #44 — chrome is a token, default QUIET: every divider (`*-border`) defaults to
+ * `none`. A service opts IN via theme, e.g.
+ *   --legal-document-toc-border: 1px solid hsl(var(--border));
+ *
+ * Colour knobs whose default is a ROLE token are declared `initial` here with the role
+ * default at the CALL SITE (`var(--knob, var(--role))`) — see docs/TOKENS.md ·
+ * "Role-mirror knobs MUST be `initial`" — so a scoped `[data-tenant]` / `.dark`
+ * override of the role still reaches them.
+ */
+
+:root {
+  /* ── 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. */
+  --legal-document-measure-max-width: 46rem;
+  /* Rail ↔ document column gutter (two-column mode only). */
+  --legal-document-column-gap: var(--space-10);
+  /* Sticky table-of-contents rail width (two-column mode only). */
+  --legal-document-toc-width: 15rem;
+  /* Distance the pinned rail keeps from the top of the scrollport. */
+  --legal-document-toc-inset-block-start: var(--space-6);
+  /* Cap for a long contents list so the rail never outgrows the viewport. */
+  --legal-document-toc-max-height: calc(100dvh - var(--space-12));
+  --legal-document-toc-gap: var(--space-1);
+  --legal-document-toc-item-padding: var(--space-1) var(--space-2);
+  --legal-document-toc-item-radius: var(--radius);
+  --legal-document-toc-title-font-size: var(--font-size-2xs);
+  --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;
+  /* 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);
+  --legal-document-meta-gap: var(--space-2);
+  --legal-document-meta-font-size: var(--font-size-xs);
+  --legal-document-section-gap: var(--space-10);
+  --legal-document-section-title-gap: var(--space-3);
+  /* Long-form leading — legal prose reads looser than UI text. */
+  --legal-document-body-line-height: 1.8;
+  /* `scroll-margin-block-start` on every section: the offset a hash jump / anchor
+   * activation leaves above the heading so it is not hidden under sticky chrome. */
+  --legal-document-scroll-offset: var(--space-6);
+  --legal-document-footer-gap: var(--space-4);
+
+  /* ── Chrome — quiet by default (rule #44) ─────────────────────────────────── */
+  --legal-document-toc-border: none;
+  --legal-document-header-border: none;
+  --legal-document-footer-border: none;
+
+  /* ── Role-mirror knobs — `initial` here, role default at the call site ─────── */
+  --legal-document-meta-foreground: initial; /* default = hsl(var(--muted-foreground)) */
+  --legal-document-summary-foreground: initial; /* default = hsl(var(--muted-foreground)) */
+  --legal-document-toc-foreground: initial; /* default = hsl(var(--muted-foreground)) */
+  --legal-document-toc-active-foreground: initial; /* default = hsl(var(--foreground)) */
+  --legal-document-toc-active-background: initial; /* default = hsl(var(--accent)) */
+  --legal-document-toc-marker-color: initial; /* default = hsl(var(--primary)) */
+}

package/dist/tokens/components/list-row.css

@@ -1,6 +1,7 @@
 /* ListRow component tokens — a single-line entity row for short lists inside a Card
- * (sessions / API tokens / linked accounts / passkeys …). Sits in a flush CardContent;
- * rows separate with a quiet divider (#44 — chrome defaults to the calm semantic border). */
+ * (sessions / API tokens / linked accounts / passkeys / notifications …). Sits in a flush
+ * CardContent; rows separate with a quiet divider (#44 — chrome defaults to the calm
+ * semantic border). */
 :root {
   --list-row-padding-y: var(--space-3);
   --list-row-padding-x: var(--space-4);
@@ -8,4 +9,44 @@
   /* Row divider — `initial` so the --border default re-resolves at the call site under a scoped
    * theme (a :root binding to a role var freezes at :root). Default = 1px solid hsl(var(--border)). */
   --list-row-border: initial;
+  /* Inline size the content column keeps before the trailing actions wrap onto their own line
+   * (#45 — a service retunes the stack threshold to its grid). Clamped with min(…, 100%) at the
+   * call site, so a container narrower than the knob can never force page-root overflow (#224). */
+  --list-row-body-min-width: 12rem;
+  /* Gap BETWEEN trailing actions — they also wrap among themselves at narrow widths (#224). */
+  --list-row-trailing-gap: var(--space-2);
+  /* ── Compact inline-actions geometry (`density="compact"`, #246) ──────────────────────────
+   * The canonical invitation / history row: a 36px leading avatar, a shrinkable title +
+   * description body and one or two small trailing Buttons, all on ONE line inside the canonical
+   * 358px card (326px content after the row's own inline inset) at a 390px viewport. These knobs
+   * only LOWER the geometry — the #224 wrap contract (row + trailing cluster wrap, body clamped
+   * with min(…, 100%)) is untouched, so a cluster that genuinely cannot fit still wraps instead of
+   * widening the page root.
+   * Declared `initial` so the spacing defaults re-resolve at the CALL SITE — --space-2 is
+   * density-scaled and re-declared inside a `.ui-density-*` subtree, so a :root binding would
+   * freeze compact rows at the :root density (docs/TOKENS.md — the :root freeze rule).
+   * Defaults = var(--space-2) block padding · var(--list-row-padding-x) inline padding ·
+   * var(--space-2) gap. */
+  --list-row-compact-padding-y: initial;
+  /* Inline inset defaults to the default row axis so compact and default rows in the same Card keep
+   * one optical axis; a service retunes it to its own grid (#45). */
+  --list-row-compact-padding-x: initial;
+  --list-row-compact-gap: initial;
+  /* Compact body threshold — small enough that avatar + body + two compact Buttons fit the
+   * canonical column (36 + 8 + 96 + 8 + 146 = 294 ≤ 326), and still a readable measure. */
+  --list-row-compact-body-min-width: 6rem;
+  /* Read (default) row surface — `initial`, documented default = transparent, i.e. the Card
+   * surface shows through untouched (#44 — chrome defaults to the quietest state). */
+  --list-row-read-background: initial;
+  /* Unread emphasis surface (`unread` rows) — `initial` so the --muted default re-resolves at the
+   * call site under a scoped theme. Documented default = hsl(var(--muted)), the same quiet
+   * emphasis role the table header uses; it keeps the xs muted description line at WCAG AA
+   * (4.63:1 light / 5.47:1 dark), which hsl(var(--accent)) would not (4.23:1 light). */
+  --list-row-unread-background: initial;
+  /* Unread indicator dot fill — `initial` so the --primary default re-resolves at the call site
+   * under a scoped theme. Documented default = hsl(var(--primary)). */
+  --list-row-indicator-color: initial;
+  /* Diameter of the read/unread indicator dot; the gutter is reserved on read rows too so the
+   * titles of a mixed list stay on one optical axis. */
+  --list-row-indicator-size: var(--space-2);
 }

package/dist/tokens/components/logo.css

@@ -12,4 +12,78 @@
   --logo-font-size-sm: var(--font-size-xs);
   --logo-font-size-md: var(--font-size-sm);
   --logo-font-size-lg: var(--font-size-base);
+  /* Semantic identity fill reads the --brand IDENTITY role: independent of --primary (a re-themed
+   * action colour never recolours the mark) AND of --success (the 若竹 STATUS green stays on
+   * badges/progress/"saved" text — the mark used to borrow it and rendered ΔE76 ≈ 17.5 off the
+   * canonical emerald, gh#250). Services retune the role once for every Logo.
+   * ROLE-MIRROR KNOBS — declared `initial` here with the role default at the CALL SITE
+   * (logo-layout.css), so a scoped `.dark` / `[data-tenant]` override of --brand actually
+   * reaches the mark instead of freezing at the :root value (docs/TOKENS.md ·
+   * "Role-mirror knobs MUST be `initial`"). Documented defaults:
+   *   --logo-success-background = hsl(var(--brand))
+   *   --logo-success-foreground = hsl(var(--logo-identity-foreground))
+   *   --logo-godx-color         = hsl(var(--brand)) */
+  --logo-success-background: initial;
+  --logo-success-foreground: initial;
+  --logo-godx-color: initial;
+
+  /* Identity-fill INK — the ink `mark="glyph"` sets its (caller-supplied) TEXT in when it sits on
+   * the --brand identity fill. This is deliberately NOT --brand-foreground.
+   *
+   * --brand-foreground is the identity artwork's KNOCKOUT colour, not an ink: it tracks
+   * --background in both themes (light 60 33% 99% = --background; dark 48 9% 9% = --background)
+   * because `<Logo mark="godx">` punches its inner bar as an evenodd HOLE and the email mark has to
+   * paint that hole as a solid fill to match. Negative space only has to clear WCAG 2.2 SC 1.4.11
+   * (3:1, non-text) — and at 3.67:1 on the emerald it does.
+   *
+   * The boxed glyph is a different thing: it renders real TEXT, so SC 1.4.3 applies at 4.5:1 (14px
+   * bold is NOT "large text" — that needs 18.66px bold / 24px), and the knockout white measured
+   * 3.67:1 → a genuine AA failure. This ink is 48 9% 9% (#191815), the same near-black spine the
+   * DARK theme already inked the glyph with, so it is theme-INVARIANT: dark renders byte-identically
+   * (6.89:1, unchanged) and light rises 3.67 → 4.74:1. A service that re-themes --brand to a dark
+   * fill overrides --logo-success-foreground (the public knob) to re-invert the ink.
+   *
+   * NOT a role-mirror knob: its default is a real value, not a role token, so there is no role to
+   * freeze at :root and the `initial` + call-site rule (docs/TOKENS.md) does not apply to it. */
+  --logo-identity-foreground: 48 9% 9%;
+
+  /* ── Identity-mark box (`<Logo mark="godx" />`) ──────────────────────────────────────────────
+   * The `size` prop drives the identity mark exactly like it drives the boxed glyph — a public
+   * prop that renders identically at every tier is a silent no-op, and the godx LOCKUP already
+   * scaled its wordmark per tier, so a fixed mark broke the mark↔wordmark proportion at
+   * `size="lg"` (gh#163 follow-up). The godx artwork is a horizontal capsule inside a square
+   * viewBox, so it carries less optical weight than the fully-filled glyph box: each tier sits
+   * +0.25rem above its --logo-size-* sibling. `md` is 2rem — the historical fixed value — so
+   * every existing default-size identity surface renders byte-identically.
+   *
+   * --logo-godx-size is the PIN: declared `initial` (guaranteed-invalid) here with the per-tier
+   * default at the CALL SITE (logo-layout.css), so it is inert by default and a service that
+   * sets it once freezes the mark at that box on EVERY tier — the same call-site pattern the
+   * role-mirror colour knobs use (docs/TOKENS.md). Retune a single tier via --logo-godx-size-*.
+   * Documented default: --logo-godx-size = unset (tiers apply). */
+  --logo-godx-size-xs: 1.5rem;
+  --logo-godx-size-sm: 1.75rem;
+  --logo-godx-size-md: 2rem;
+  --logo-godx-size-lg: 2.5rem;
+  --logo-godx-size: initial;
+
+  /* ── Wordmark / lockup (`<Logo wordmark="GoDX" />`) ─────────────────────────────────────────
+   * The readable product name set beside the mark. The package ships NO wordmark artwork: the
+   * wordmark is typeset in the design-system display face, so a service retunes face, weight,
+   * tracking, size and the mark↔wordmark gap here instead of writing page CSS. The colour is a
+   * role-mirror knob whose default is the IDENTITY role --brand (never --primary, never the
+   * --success status green): the GoDX/`success` lockup is canonical emerald out of the box, and
+   * every other lockup reads --foreground.
+   * Documented defaults: --logo-wordmark-font-family = var(--font-family-display);
+   * --logo-wordmark-color = hsl(var(--foreground)), or hsl(var(--brand)) on the
+   * godx / tone="success" lockup. */
+  --logo-wordmark-gap: var(--space-2);
+  --logo-wordmark-font-size-xs: var(--font-size-xs);
+  --logo-wordmark-font-size-sm: var(--font-size-sm);
+  --logo-wordmark-font-size-md: var(--font-size-base);
+  --logo-wordmark-font-size-lg: var(--font-size-lg);
+  --logo-wordmark-font-weight: 700;
+  --logo-wordmark-letter-spacing: -0.01em;
+  --logo-wordmark-font-family: initial;
+  --logo-wordmark-color: initial;
 }

package/dist/tokens/components/navigation.css

@@ -10,11 +10,35 @@
   --filter-label-font-size: var(--font-size-xs);
   --filter-picker-width-sm: 11rem;
   --filter-picker-width-md: 14rem;
+  --steps-inline-gap: var(--space-2);
+  --steps-inline-item-gap: var(--space-1);
+  --steps-inline-font-size: var(--font-size-xs);
+  --steps-inline-separator-size: var(--control-icon-size-sm);
+
+  /* AppSettingPicker `compact` (gh#217) — the small, content-hugging labelled trigger used in an
+   * auth/legal footer, where the square icon-only default reads as a stray button and the full
+   * labelled trigger is too tall. Box height comes from the official --control-height-sm tier (never
+   * a literal / ad-hoc calc), and every other knob is themeable (rule #45). */
+  --app-setting-picker-compact-control-height: var(--control-height-sm);
+  --app-setting-picker-compact-padding-x: var(--space-2);
+  --app-setting-picker-compact-gap: var(--space-1);
+  --app-setting-picker-compact-font-size: var(--font-size-xs);
   --breadcrumb-font-size: var(--font-size-xs);
   --menubar-shortcut-font-size: var(--font-size-xs);
   --tabs-list-max-inline-size: 100%;
   --tabs-list-overflow: auto;
 
+  /* Tabs `line` active indicator (gh#248) — the ONLY selected-state decoration the line variant
+   * paints. The surrounding active ring belongs to the default/card lists, so `:focus-visible`
+   * keeps its own distinct keyboard ring here (WCAG 2.4.7). `--tabs-indicator-background` is a
+   * role-mirror knob: `initial` so hsl(var(--primary)) re-resolves at the CALL SITE under a scoped
+   * [data-tenant]/.dark theme (a :root binding to a role var would freeze at :root).
+   * Default = hsl(var(--primary)) · 2px thick · flush with the trigger edge (offset 0 = quietest,
+   * rule #44); a service raises the offset to park the bar on a thicker strip hairline. */
+  --tabs-indicator-background: initial;
+  --tabs-indicator-size: 2px;
+  --tabs-indicator-offset: 0px;
+
   /* 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. */
@@ -27,4 +51,8 @@
   /* Fill painted only when the filter strip is pinned. Role-mirror knob (rule #45): `initial`
    * so --background re-resolves at the call site under a scoped [data-tenant]/.dark theme. */
   --filter-bar-sticky-background: initial;
+  /* Scrollbar gutter reserved under a `overflow="scroll"` filter strip (#216) so the inline
+   * scrollbar never overlaps the controls. Rule #45 — a service theme retunes it to its grid
+   * (0 on an overlay-scrollbar platform). */
+  --filter-bar-scroll-padding-y: var(--space-1);
 }

package/dist/tokens/components/sheet.css

@@ -0,0 +1,19 @@
+/* Sheet RESPONSIVE (drawer / detail-panel) geometry.
+ *
+ * Lives in its own tier file rather than in feedback.css because these two knobs are the
+ * *responsive* contract (`SheetContent responsive="auto"`), not the static panel chrome —
+ * see feedback.css for --sheet-width-default / --sheet-pad-* / --sheet-overlay-background.
+ */
+
+:root {
+  /* Viewport width at and below which `SheetContent responsive="auto"` renders the mobile bottom
+   * sheet instead of the desktop side panel. Read at runtime by useSheetResponsiveMode() (a CSS
+   * @media cannot resolve a custom property), so a service moves the drawer breakpoint from ONE
+   * knob for every overlay that opts into the responsive contract — Sheet and OrgSwitcher alike.
+   * 48rem = 768px mirrors the library's canonical mobile line (useIsMobile). Accepts px/rem/em. */
+  --sheet-responsive-breakpoint-width: 48rem;
+  /* Block size cap for the responsive BOTTOM presentation only (never for a plain
+   * `side="bottom"` sheet, which stays content-sized). Keeps the sheet below the viewport so the
+   * SheetBody scrolls and the page behind it stays visible/dismissable. */
+  --sheet-bottom-max-height: 85dvh;
+}

package/dist/tokens/components/shell.css

@@ -7,6 +7,7 @@
   --sidebar-product-tenant-font-size: var(--font-size-2xs);
   --sidebar-badge-font-size: var(--font-size-2xs);
   --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);
   --sidebar-flyout-title-font-size: var(--font-size-xs);
   --topbar-chip-icon-font-size: var(--font-size-2xs);
@@ -23,12 +24,74 @@
   /* 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;
+  /* 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);
+  --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
+   * instead of forking `.app-root`. `-rail-` is the icon-only width used at
+   * `<AppShell sidebarCollapsed>`. */
+  --app-shell-sidebar-width: 16rem;
+  --app-shell-rail-width: 4rem;
   --app-shell-page-max-width: 80rem;
   --app-shell-main-background: hsl(var(--muted) / 0.4);
+  --app-shell-mobile-nav-width: 22.5rem;
+  /* Mobile-drawer scrim — `initial` so the shared --overlay-background default re-resolves at the
+   * CALL SITE under a scoped [data-tenant]/.dark theme (a :root binding freezes at :root). Default =
+   * var(--app-shell-mobile-nav-alpha) of the global scrim, i.e. rgb(0 0 0 / 0.2) out of the box. */
+  --app-shell-mobile-nav-background: initial;
+  /* Share of the global --overlay-background this drawer's scrim uses. A slide-in drawer washes the
+   * page more lightly than a modal dialog; keeping it a RATIO means a service retints the whole
+   * system with one --overlay-background and every overlay keeps its calibrated depth. */
+  --app-shell-mobile-nav-alpha: 40%;
+  /* Inline inset of the mobile drawer's scrollable nav body. Near-zero by design: the drawer nav
+   * (the <Sidebar> node by default) owns its own inset via --sidebar-nav-scroll-padding, so the
+   * 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);
   --sidebar-brand-mark-size: 1.375rem;
   --sidebar-nav-item-height: 2rem;
   --sidebar-nav-item-font-size: 0.8125rem;
+  /* 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;
+  /* Same gh#254 trap, two more clipping boxes. `.ui-auth-account-email` and the truncating last
+   * child of `.ui-topbar-start` both clip (`overflow: hidden`/`clip` + `text-overflow: ellipsis`),
+   * so their line box IS their clip box — inheriting a tight value shears descenders and Vietnamese
+   * 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-item-gap: 0.625rem;
+  --sidebar-nav-item-padding-x: 0.625rem;
+  --sidebar-nav-gap: 2px;
+  --sidebar-nav-scroll-padding: var(--space-3) var(--space-2);
+  --sidebar-section-gap: var(--space-4);
+  --sidebar-section-label-padding-x: var(--space-2);
+  --sidebar-section-label-padding-bottom: var(--space-1);
   --topbar-search-max-width: 26.25rem;
+  /* Standalone <Topbar> geometry (rule #45). Topbar is a pure slot bar, so its box is intentionally
+   * QUIET by default: `auto` height and no inline inset, i.e. exactly what it did before these knobs
+   * existed — inside AppShell the `.app-topbar` grid row still owns the height. A service that
+   * places Topbar directly on a page sets `--topbar-height: 3.5rem` / `--topbar-inset: var(--space-4)`
+   * once instead of writing an app-local class. `--topbar-gap` is the gap BETWEEN the start/center/end
+   * clusters and INSIDE each of them, so one knob re-rhythms the whole bar. */
+  --topbar-height: auto;
+  --topbar-inset: 0px;
+  --topbar-gap: var(--space-2);
+  /* At compact desktop/tablet widths the docked sidebar leaves too little inline room for three
+   * intrinsically-sized clusters. The package hides the optional center slot before it can cover
+   * the breadcrumb/title or end utilities. Consumers may opt back into another display strategy
+   * (for example `flex`) once their center content has its own compact presentation. */
+  --topbar-center-compact-display: none;
+  --org-switcher-trigger-height: 2.75rem;
+  --org-switcher-trigger-padding-x: var(--space-2);
+  --org-switcher-avatar-size: 1.75rem;
+  --org-switcher-menu-width: 16rem;
+  --org-switcher-sheet-max-height: 75dvh;
+  --org-switcher-state-min-height: 8rem;
 
   /* Sidebar active-item tint/marker — `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; a scoped role override
@@ -53,6 +116,114 @@
   --auth-shell-main-padding: var(--space-6);
   --auth-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
 
+  /* 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-card-max-width: 22.5rem;
+  --auth-shell-canonical-heading-size: var(--font-size-base);
+  --auth-shell-canonical-main-padding: 1rem;
+  --auth-shell-canonical-main-padding-mobile: 0.9375rem;
+  /* INLINE (start/end) inset of the compact auth card — the column the title, fields and actions
+   * align to. Independent of the block axis below (gh#232). */
+  --auth-shell-compact-card-inset: var(--space-6);
+  /* BLOCK (top/bottom) padding of the compact auth card — the knob that tunes canonical Login card
+   * HEIGHT without narrowing the column. Bound to the card's --card-space-shell-y, so it really
+   * reaches CardContent's block edges (before gh#232 it was wired only to --card-space-body-y and
+   * the rendered body kept the inset on both block edges — the documented token did nothing).
+   * Declared `initial` so the default mirrors the LIVE --auth-shell-compact-card-inset resolved at
+   * the CALL SITE: the canonical card renders exactly as before (24px block = 24px inline), and a
+   * service that re-tunes the inset inside a scoped `[data-tenant]` still drags the block default
+   * with it (a :root binding would freeze at the :root inset — docs/TOKENS.md). */
+  --auth-shell-card-padding-block-compact: initial; /* default = var(--auth-shell-compact-card-inset) */
+  /* Header↔body gap inside the compact auth card (the breathing room under the title before the
+   * first field). Its own knob since gh#232 — it used to ride on
+   * --auth-shell-card-padding-block-compact, which conflated the section gap with the card's block
+   * padding and made the block knob un-tunable. Default is the pre-gh#232 12px rhythm. */
+  --auth-shell-card-body-gap-compact: var(--space-3);
+  /* IN-SLOT stack gap of the compact auth card (title ↕ description inside the header). */
+  --auth-shell-card-gap-compact: var(--space-3);
+
+  /* Named AUTH FLOW PRESETS (gh#217 / gh#220). A preset owns the whole page measure for one
+   * canonical hosted-identity flow — card max-width plus the desktop and mobile page gutters — so a
+   * consumer selects `preset` once instead of hand-overriding --auth-shell-card-max-width. Presets
+   * are orthogonal to `variant` (which owns control density / heading size) and are applied AFTER
+   * it, so `variant="canonical" preset="device-authorization"` keeps the canonical chrome and only
+   * re-measures the page. Literal lengths (not --space-*) because the canonical artboards specify
+   * exact device pixels that must not drift with --scaling. */
+
+  /* Main-axis alignment of the auth column. Default `center` = today's vertically-centred card;
+   * a flow whose intro + card + footnote stack is tall opts into `start` via this knob. */
+  --auth-shell-main-align: center;
+  /* Gap between the direct sections of the auth column (intro · card · remember row). Default 0
+   * (quiet, rule #44) so an existing single-card consumer is untouched; presets opt in. */
+  --auth-shell-card-stack-gap: 0px;
+
+  /* Login preset (gh#237) — canonical SCR-001 anchors at 1440x900, 1024x900 and 390x844.
+   * The 112px identity slot is deliberately taller than a two-line real requester. Identity
+   * content aligns to the slot end, so missing/one-line/two-line requester data changes only the
+   * empty space above it, never the card or footer position. The flow starts at y=231 desktop and
+   * y=221 mobile: 231/221 + 112 + 20 gap = card y=363/353. Literal artboard lengths belong here,
+   * not in a consumer selector, and do not drift with --scaling. */
+  --auth-shell-login-card-max-width: 22.5rem;
+  --auth-shell-login-flow-offset-block: 14.4375rem;
+  --auth-shell-login-flow-offset-block-mobile: 13.8125rem;
+  --auth-shell-login-main-padding-inline: 1rem;
+  --auth-shell-login-main-padding-inline-mobile: 0.9375rem;
+  --auth-shell-login-main-padding-block-end: 1rem;
+  --auth-shell-login-identity-slot-block-size: 7rem;
+  --auth-shell-login-card-stack-gap: 1.25rem;
+  --auth-shell-login-card-padding-block-compact: calc(
+    var(--auth-shell-compact-card-inset) + var(--control-border-width) + var(--control-border-width)
+  );
+
+  /* Device-authorization preset — 380px card measure, 15px block · 5px inline mobile gutter
+   * (at a 390px viewport the card is x=5px, width=380px). */
+  --auth-shell-device-card-max-width: 23.75rem;
+  --auth-shell-device-main-padding: 1rem;
+  --auth-shell-device-main-padding-mobile: 0.9375rem 0.3125rem;
+
+  /* Context-selection preset — 25rem card measure on desktop/tablet, edge-to-edge on mobile
+   * (0 inline gutter) with a 16px rhythm between the intro, the card and the remember row. */
+  --auth-shell-context-card-max-width: 25rem;
+  --auth-shell-context-main-padding: var(--space-6);
+  --auth-shell-context-main-padding-mobile: var(--space-6) 0;
+  --auth-shell-context-card-stack-gap: 1rem;
+
+  /* Account-recovery preset (gh#233) — the SCR-008 measure shared by the password-recovery panel
+   * (request · sent · new-password · expired) and the sign-in MFA challenge panel (OTP ·
+   * recovery-code · passkey-failure). Both canonical desktop panels measure w=432 at 1440, so ONE
+   * preset owns them; the 360px canonical Login measure is untouched.
+   * The mobile gutter is a DECIDED contract, not a traced artboard: the supplied 390 reference is a
+   * desktop 2x2 composite that crops horizontally and cannot be measured. 15px inline at 390 ⇒ the
+   * panel is x=15, width=360 — the same page rhythm as the canonical Login flow, so a user moving
+   * from Login to Recovery on a phone never sees the surface jump. */
+  --auth-shell-recovery-card-max-width: 27rem;
+  --auth-shell-recovery-main-padding: 1rem;
+  --auth-shell-recovery-main-padding-mobile: 0.9375rem;
+
+  /* Labelled auth divider geometry. */
+  --auth-shell-divider-gap: 0.625rem;
+  --auth-shell-divider-label-font-size: 0.6875rem;
+  --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-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);
+  --auth-account-summary-identity-min-width: 12rem;
+  --auth-account-summary-avatar-size: var(--control-height-sm);
+  --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;
+  --auth-stack-gap: var(--space-3);
+  --auth-shell-field-label-gap: var(--space-1);
+  --auth-shell-field-label-font-size: var(--font-size-xs);
+  --auth-shell-field-label-line-height: 1.25;
+
   /* CenteredShell — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
    * account, standalone settings). The bar mirrors AppShell's `.app-topbar` chrome (fixed height +
    * inline padding); the column max-width has three tiers, all wider than the 24rem auth card. A
@@ -61,7 +232,46 @@
   --centered-shell-bar-padding-x: var(--space-4);
   --centered-shell-main-padding: var(--space-6);
   --centered-shell-footer-padding: var(--space-3) var(--space-6) var(--space-4);
+  /* Block offset of the centred column inside the 100dvh shell. `0` (default, the quietest state —
+   * rule #44) keeps the top-aligned flowing page; `auto` centres the column in the viewport, which
+   * is what CenteredShell `align="center"` sets for a SYSTEM-level standalone surface (500/503
+   * error page, maintenance notice). Auto block offsets collapse to 0 when the content is taller
+   * than the viewport, so a long localized message scrolls from the top instead of clipping. */
+  --centered-shell-column-offset-block: 0;
   --centered-shell-width-sm: 32rem;
   --centered-shell-width-md: 46rem;
   --centered-shell-width-lg: 64rem;
 }
+
+/* CenteredShell · public-landing preset (gh#252) — the token-owned geometry of a PUBLIC marketing
+ * / product landing page: one content measure shared by header, main column and footer, the
+ * section rhythm between page sections, the flat (chrome-quiet) card presentation and the hero
+ * heading tier. Every value is a service-themeable knob (rule #45): a landing composition is a
+ * COMPOSITION of real primitives (docs/COMPOSITION-VS-COMPONENT.md — Hero/Navbar/Footer FAIL the
+ * Framework-Component Test), so the consumer must never own geometry or a media query. These
+ * knobs are read ONLY under `.ui-centered-shell[data-preset="public-landing"]`, so the default
+ * shell — which emits no `data-preset` at all — is byte-identical to before. */
+:root {
+  --centered-shell-landing-max-width: 67.5rem; /* 1080px — header/main/footer share ONE measure */
+  --centered-shell-landing-inset-inline: var(--space-6); /* 24px page gutter ≥ 40rem */
+  --centered-shell-landing-inset-inline-compact: var(--space-4); /* 16px page gutter < 40rem */
+  --centered-shell-landing-main-padding-block: var(--space-10); /* 40px */
+  --centered-shell-landing-main-padding-block-compact: var(--space-6); /* 24px */
+  --centered-shell-landing-section-gap: var(--space-10); /* rhythm BETWEEN page sections */
+  --centered-shell-landing-section-gap-compact: var(--space-6);
+  --centered-shell-landing-footer-padding-block: var(--space-8);
+  /* Chrome is a token, default quiet (rule #44): a landing surface is FLAT — no card elevation —
+   * so a service opts back IN with `--centered-shell-landing-card-shadow: var(--card-shadow)`. */
+  --centered-shell-landing-card-shadow: none;
+  /* Hero heading tier. The preset re-points `--heading-h1` (same mechanism as
+   * `.ui-auth-shell` → `--auth-shell-heading-size`), so a hero title is a real `Heading level={1}`
+   * and never a consumer font-size. */
+  --centered-shell-landing-heading-size: var(--font-size-display);
+  --centered-shell-landing-heading-size-compact: var(--font-size-3xl);
+  /* Role-mirror knob — MUST stay `initial`, with the role default at the CALL SITE
+   * (`var(--centered-shell-landing-background, var(--background))`), so a scoped
+   * `[data-tenant]` / `.dark` override of `--background` still reaches it (docs/TOKENS.md ·
+   * "Role-mirror knobs MUST be `initial`"). Documented default = hsl(var(--background)) — a public
+   * page is the plain page canvas, not the app's `--muted` chrome. */
+  --centered-shell-landing-background: initial;
+}

package/dist/tokens/components/sidebar.css

@@ -0,0 +1,33 @@
+/* Sidebar nav-row COLOUR knobs (gh#228). The row/label and its icon are separately themeable:
+ * before this, `.sb-nav-item` painted one `--muted-foreground` that the Lucide SVG inherited, so a
+ * service could only darken its 16px nav icons by writing page-local CSS or by re-tinting every
+ * muted text globally. Geometry knobs (--sidebar-nav-icon-size, --sidebar-nav-item-height/-gap/
+ * -padding-x) live in components/shell.css and are untouched by these.
+ *
+ * ROLE-MIRROR KNOBS — declared `initial` here with the role default at the CALL SITE
+ * (`var(--knob, hsl(var(--role)))`), so a scoped `[data-tenant]` / `.dark` role override
+ * re-resolves live instead of freezing at :root (docs/TOKENS.md · "Role-mirror knobs MUST be
+ * `initial`"). Every default is byte-identical to the pre-gh#228 rendering.
+ *
+ * The ACTIVE row's own background/foreground keep their existing knobs
+ * (--sidebar-item-active-background / --sidebar-item-active-foreground, components/shell.css);
+ * only the active ICON gets a new one. */
+
+:root {
+  /* Resting nav row + label (also the resting sub-row). Default = hsl(var(--muted-foreground)). */
+  --sidebar-nav-item-foreground: initial;
+  /* Hovered nav row + label. Default = hsl(var(--foreground)). */
+  --sidebar-nav-item-hover-foreground: initial;
+  /* `aria-disabled` nav row + label. Default = the resting row colour. */
+  --sidebar-nav-item-disabled-foreground: initial;
+
+  /* Nav ICON (`.sb-icon`, incl. the collapsed rail and group triggers). Default = currentColor,
+   * i.e. the row colour — the pre-gh#228 look. Set this alone to get canonical dark icons next to
+   * muted labels. */
+  --sidebar-nav-icon-foreground: initial;
+  /* Icon on a hovered / active / disabled row. Each falls back to --sidebar-nav-icon-foreground,
+   * then to currentColor, so setting the base icon knob alone themes every state. */
+  --sidebar-nav-icon-hover-foreground: initial;
+  --sidebar-nav-icon-active-foreground: initial;
+  --sidebar-nav-icon-disabled-foreground: initial;
+}

package/dist/tokens/components/table.css

@@ -7,6 +7,29 @@
   --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);
+  /* Pagination footer inset (gh#236). The footer ships as a SELF-CONTAINED slot and is commonly
+   * placed in a flush container (`<Card><CardContent flush><DataTable/>`), where no ancestor
+   * supplies padding — so it owns its own on BOTH axes instead of declaring block-start only.
+   * Block default = the previous single `padding-top` value, now on both block edges (breathing
+   * room above the footer and before the container's closing border). Inline default = the cell
+   * inline padding, so the "rows per page" label sits on the same optical axis as the first
+   * column's text. A service retunes either axis to its own grid (#45).
+   * Both are declared `initial` so the defaults re-resolve at the CALL SITE: --space-stack-sm and
+   * --table-cell-space-x are density-scaled and re-declared inside a `.ui-density-*` subtree, and a
+   * :root binding would freeze the footer at the :root density (docs/TOKENS.md — the :root freeze
+   * rule). Defaults = var(--space-stack-sm) block · var(--table-cell-space-x) inline. */
+  --table-pagination-padding-y: initial;
+  --table-pagination-padding-x: initial;
+  /* DataTable surface — narrow-viewport legibility FLOOR (gh#253). Below the `sm` viewport step a
+   * multi-column admin grid whose columns are `white-space: nowrap` would otherwise be crushed, so
+   * the bordered surface keeps a minimum inline size and `.ui-data-table-scroll` scrolls instead.
+   * This shipped as a hard-coded `min-w-[640px]` utility on the surface element, which left a
+   * service that wants a narrower (or no) floor with no route but forking the component (#45).
+   * Default = the previous literal, in px so the floor releases at EXACTLY the same width as the
+   * px-based `sm` media query that clears it (a rem value would drift under a non-16px root and
+   * re-introduce the scroll between the two thresholds). Set `0` to opt out entirely — which is
+   * what `preset="action-collection"` does, because there the priority measures own the width. */
+  --table-surface-min-inline-size: 640px;
   --table-head-font-size: var(--font-size-xs);
   /* Header band — its OWN bg + fg knobs (decoupled from --secondary). Declared `initial` so the
    * default re-resolves to the LIVE --muted / --muted-foreground roles at the call site: a :root
@@ -24,3 +47,25 @@
   --table-row-hover-background: initial;
   --table-row-selected-background: initial;
 }
+
+/* Table · action-collection preset (gh#253) — the canonical dense approval / action queue.
+ * Column PRIORITY measures replace the desktop intrinsic widths (a nowrap free-text column is
+ * what makes a five-column queue wider than its card and forces a horizontal scroll). Nothing
+ * here is read unless `preset="action-collection"` is set, so every existing table is untouched.
+ * Percentages so the ratio holds at any card width; the action affordance is an absolute measure
+ * because it must never be squeezed below its touch target. */
+:root {
+  --table-action-collection-primary-width: 18%; /* requester / subject */
+  --table-action-collection-secondary-width: 22%; /* target / resource */
+  --table-action-collection-meta-width: 12%; /* timestamps, ids — lowest priority */
+  --table-action-collection-actions-width: 3.5rem; /* row-action affordance, never clipped */
+  /* Compact tier, applied below the collapse step (the 390px acceptance frame). */
+  --table-action-collection-primary-width-compact: 24%;
+  --table-action-collection-secondary-width-compact: 22%;
+  --table-action-collection-meta-width-compact: 20%;
+  --table-action-collection-actions-width-compact: 2.75rem;
+  --table-action-collection-font-size-compact: var(--font-size-xs);
+  --table-action-collection-cell-space-x-compact: var(--space-2);
+  --table-action-collection-cell-padding-y-compact: var(--space-2);
+  --table-action-collection-row-height-compact: var(--table-row-height-compact);
+}