@godxjp/ui 18.4.0 → 18.6.0

package/dist/styles/table-layout.css

@@ -74,12 +74,17 @@
     gap: var(--space-inline-sm);
   }
 
+  /* The footer owns its own inset on BOTH axes (gh#236) — it is a self-contained slot that is
+   * usually dropped straight into a flush container, so relying on an ancestor for inline/block-end
+   * padding left the label and the page-size Select flush against the container edge and its
+   * closing border. Logical properties only (RTL-safe); both axes are tunable tokens (#45). */
   .ui-data-table-pagination {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: var(--space-inline-sm);
-    padding-top: var(--space-stack-sm);
+    padding-block: var(--table-pagination-padding-y, var(--space-stack-sm));
+    padding-inline: var(--table-pagination-padding-x, var(--table-cell-space-x));
   }
 
   /* Numbered footer may wrap only between its two semantic groups. The supported JA/EN/VI locale
@@ -115,10 +120,22 @@
 
   .ui-data-table-surface {
     overflow: hidden;
+    /* Narrow-viewport legibility floor — a TOKEN, not the old `min-w-[640px]` literal (gh#253,
+     * rule #45). Cleared at the `sm` step below, and opted out of entirely by the collection
+     * preset, which owns its width through the column-priority measures. */
+    min-inline-size: var(--table-surface-min-inline-size);
     border: 1px solid hsl(var(--border));
     border-radius: var(--radius-md);
   }
 
+  /* `preset="action-collection"` (gh#253) — the priority measures fit the table to its container at
+   * every width, so the desktop floor would re-introduce exactly the horizontal scroll the preset
+   * removes. Attribute-scoped: `preset="default"` emits NO attribute, so an untouched DataTable
+   * never matches this rule (the inert-default contract, gh#231). */
+  .ui-data-table-surface[data-preset="action-collection"] {
+    min-inline-size: 0;
+  }
+
   /* Zebra striping (opt-in via the `striped` prop). Selected rows keep their
    * own emphasis, so they are excluded from the stripe. */
   .ui-data-table-surface[data-striped] tbody tr:nth-child(even):not([data-state="selected"]) {
@@ -187,6 +204,12 @@
     .ui-data-table-scroll::after {
       inset-inline-end: 0;
     }
+
+    /* From `sm` up the viewport is already wider than the floor, so it is released and the surface
+     * simply fills its container (this is the `sm:min-w-0` half of the old utility pair). */
+    .ui-data-table-surface {
+      min-inline-size: 0;
+    }
   }
 
   /* ── Pinned (sticky) inline-end column ────────────────────────────────
@@ -233,3 +256,143 @@
     );
   }
 }
+
+@layer components {
+  /* ── Table · `preset="action-collection"` (gh#253) ───────────────────────────────────────────
+   * The canonical dense approval / action queue: requester · target · reason · requested date ·
+   * row actions, all five discoverable in the initial 390px frame, WITHOUT a consumer width, a
+   * hidden column or a page-local breakpoint.
+   *
+   * It keeps the REAL table: no `display` change, no role rewriting, no card transformation — so
+   * `<table>/<thead>/<tr>/<th>/<td>` semantics, header association, `aria-sort` and screen-reader
+   * table navigation survive exactly as they are at 1440. What the preset replaces is the SIZING
+   * model: the desktop INTRINSIC column widths (a `white-space: nowrap` reason column is what
+   * makes a five-column queue 1511px wide and forces the horizontal scroll gh#253 reports) give
+   * way to `table-layout: fixed` plus token-owned column-PRIORITY measures, and cells wrap.
+   *
+   * The collapse step is measured against the TABLE'S OWN container, not the viewport (a table in
+   * a master rail must collapse before the page does), so it is a container query. Below the step
+   * only the MEASURES and the type/padding tier change — the structure is identical. */
+  .ui-table-collection {
+    container: ui-table-collection / inline-size;
+  }
+
+  .ui-table-collection [data-slot="table"] {
+    table-layout: fixed;
+    inline-size: 100%;
+  }
+
+  .ui-table-collection :is([data-slot="table-head"], [data-slot="table-cell"]) {
+    /* The column measure comes from `priority`; an unmarked column takes what is left (`auto`),
+     * which is the free-text column. */
+    inline-size: var(--table-action-collection-column-width, auto);
+    overflow-wrap: anywhere;
+    white-space: normal;
+    vertical-align: top;
+  }
+
+  .ui-table-collection [data-priority="primary"] {
+    --table-action-collection-column-width: var(--table-action-collection-primary-width);
+  }
+
+  .ui-table-collection [data-priority="secondary"] {
+    --table-action-collection-column-width: var(--table-action-collection-secondary-width);
+  }
+
+  .ui-table-collection [data-priority="meta"] {
+    --table-action-collection-column-width: var(--table-action-collection-meta-width);
+  }
+
+  .ui-table-collection [data-priority="actions"] {
+    --table-action-collection-column-width: var(--table-action-collection-actions-width);
+    text-align: end;
+  }
+
+  /* Below the step the SOURCE measures are re-pointed to their compact tier (and the type / row
+   * density with them); nothing else moves. One block per canonical step — a media/container
+   * query cannot read a `var()`, so the tokenized scale is written out (sm 40rem · md 48rem ·
+   * lg 64rem · xl 80rem, the same steps as `--master-detail-collapse-below`). */
+  @container ui-table-collection (width < 40rem) {
+    [data-collapse-below="sm"] [data-slot="table"] {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-compact
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
+      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
+      --table-row-height: var(--table-action-collection-row-height-compact);
+      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
+      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
+      font-size: var(--table-action-collection-font-size-compact);
+    }
+
+    /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
+     * compact measure — inside a collapsed action cell everything wraps. */
+    [data-collapse-below="sm"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+  }
+
+  @container ui-table-collection (width < 48rem) {
+    [data-collapse-below="md"] [data-slot="table"] {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-compact
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
+      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
+      --table-row-height: var(--table-action-collection-row-height-compact);
+      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
+      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
+      font-size: var(--table-action-collection-font-size-compact);
+    }
+
+    /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
+     * compact measure — inside a collapsed action cell everything wraps. */
+    [data-collapse-below="md"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+  }
+
+  @container ui-table-collection (width < 64rem) {
+    [data-collapse-below="lg"] [data-slot="table"] {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-compact
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
+      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
+      --table-row-height: var(--table-action-collection-row-height-compact);
+      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
+      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
+      font-size: var(--table-action-collection-font-size-compact);
+    }
+
+    /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
+     * compact measure — inside a collapsed action cell everything wraps. */
+    [data-collapse-below="lg"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+  }
+
+  @container ui-table-collection (width < 80rem) {
+    [data-collapse-below="xl"] [data-slot="table"] {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-compact
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
+      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
+      --table-row-height: var(--table-action-collection-row-height-compact);
+      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
+      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
+      font-size: var(--table-action-collection-font-size-compact);
+    }
+
+    /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
+     * compact measure — inside a collapsed action cell everything wraps. */
+    [data-collapse-below="xl"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+  }
+}

package/dist/theme/dxs.canonical.css

@@ -0,0 +1,77 @@
+/* ───────────────────────────────────────────────────────────────────────────
+ * THE CANONICAL DXS THEME — gh#214
+ *
+ * The one stylesheet a DXS surface imports INSTEAD of `@godxjp/ui/styles`. It
+ * makes the canonical contract the DEFAULT for every surface in the app, so no
+ * page ever needs local CSS for auth geometry, density, page insets, the brand
+ * logo colour, the auth divider, or the legal footer.
+ *
+ *   import "@godxjp/ui/theme/dxs.canonical.css";   // instead of @godxjp/ui/styles
+ *
+ * Prefer the RUNTIME route when the app already mounts the provider — it is the
+ * same contract, switchable at runtime and persisted with the other axes:
+ *
+ *   <AppProvider brand="dxs"> … </AppProvider>     // writes <html data-brand="dxs">
+ *
+ * NOT A NEW BRAND. Every value below is canonical evidence already encoded in
+ * this package — the shipped GodX Navy primary ramp, and the
+ * `--auth-shell-canonical-*` measures declared in
+ * `src/tokens/components/shell.css`. This file only re-points the generic knob
+ * at the canonical one; it invents no colour and no geometry.
+ *
+ * SOURCE OF TRUTH: `src/tokens/axes.css` · `:root[data-brand="dxs"]`. This file
+ * mirrors that block at `:root` for stylesheet-only apps (no provider). They are
+ * asserted identical by `src/tokens/__tests__/dxs-canonical-theme.test.ts` — add
+ * a knob to BOTH or to neither.
+ *
+ * OVERRIDING: declare your own root block AFTER this import; at equal
+ * specificity the later declaration wins. Token overrides only — never component
+ * CSS or Tailwind utilities in a theme file.
+ * ─────────────────────────────────────────────────────────────────────────── */
+
+@import "@godxjp/ui/styles";
+
+:root {
+  /* ── Brand palette — the shipped GodX Navy ramp (identical to the `brand`
+   *    axis preset). The emerald IDENTITY mark is deliberately NOT here:
+   *    `--logo-godx-color` / `--logo-wordmark-color` default to the `--brand`
+   *    IDENTITY role at their call sites and never read `--primary` (nor the
+   *    `--success` status green — gh#250), so a re-themed action colour can
+   *    never recolour the GoDX mark or wordmark. */
+  --primary: 211 73% 15%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 24 99% 46%;
+  --accent: 24 99% 95%;
+  --accent-foreground: 24 99% 28%;
+
+  /* ── Canonical auth surface — 36px controls, 22.5rem card measure, 16px page
+   *    inset (15px below 30rem, see the media query below). This is what
+   *    `AuthShell variant="canonical"` applies per-instance, made the default
+   *    for every auth surface in the app. `variant="canonical"` still owns the
+   *    COMPACT CARD density (`[data-density="compact"]` is element-scoped and
+   *    cannot be reached from a token), so keep passing it for the full
+   *    canonical card rhythm. */
+  --auth-shell-control-height: var(--auth-shell-canonical-control-height);
+  --auth-shell-heading-size: var(--auth-shell-canonical-heading-size);
+  --auth-shell-card-max-width: var(--auth-shell-canonical-card-max-width);
+  --auth-shell-main-padding: var(--auth-shell-canonical-main-padding);
+}
+
+/* Canonical 15px mobile page inset. */
+@media (max-width: 30rem) {
+  :root {
+    --auth-shell-main-padding: var(--auth-shell-canonical-main-padding-mobile);
+  }
+}
+
+/* ── TODO (no canonical in-repo source yet — do NOT guess) ───────────────────
+ * · AppShell rail width / collapsed rail width / responsive breakpoint are
+ *   still CSS literals, not tokens (gh#213), so there is nothing for a theme to
+ *   bind. Add the bindings here once `--app-shell-sidebar-width` /
+ *   `--app-shell-rail-width` / the breakpoint knob ship.
+ * · Standalone `.ui-topbar` height/gap/inset knobs do not exist yet (gh#213).
+ * · A real DXS wordmark ASSET (logotype artwork) has not been supplied by
+ *   design. `<Logo wordmark="GoDX" />` typesets the name in the design-system
+ *   display face via `--logo-wordmark-font-family`; swap in the real logotype
+ *   (an inline `<svg>` passed as `wordmark`) when it exists.
+ * ─────────────────────────────────────────────────────────────────────────── */

package/dist/tokens/axes.css

@@ -57,3 +57,43 @@
   --accent: 215 25% 94%;
   --accent-foreground: 215 25% 20%;
 }
+
+/* ── THE CANONICAL DXS PRESET (gh#214) ──────────────────────────────────────
+ * `dxs` is the one brand value that is NOT just a primary tint: it binds the
+ * canonical DXS SURFACE CONTRACT that every hosted-identity screen shares, so a
+ * service selects it once (`<AppProvider brand="dxs">`, or import
+ * `@godxjp/ui/theme/dxs.canonical.css`) and needs ZERO page CSS for auth
+ * geometry, density, insets, logo colour, divider or footer.
+ *
+ * SINGLE SOURCE OF TRUTH — every value below is already canonical evidence in
+ * this package: the palette is the shipped GodX Navy ramp (identical to
+ * `data-brand="brand"`), and the auth knobs simply re-point the generic
+ * AuthShell tokens at the `--auth-shell-canonical-*` values declared in
+ * `tokens/components/shell.css`. Nothing here is a new brand colour.
+ * `src/theme/dxs.canonical.css` mirrors this block for stylesheet-only apps;
+ * `src/tokens/__tests__/dxs-canonical-theme.test.ts` fails if the two drift.
+ *
+ * The GoDX identity mark needs no binding: `--logo-godx-color` /
+ * `--logo-wordmark-color` already default to the `--brand` IDENTITY role (the
+ * canonical emerald) at their call sites, and never reference `--primary` — nor
+ * the `--success` status green they wrongly borrowed before gh#250. */
+:root[data-brand="dxs"] {
+  --primary: 211 73% 15%;
+  --primary-foreground: 0 0% 100%;
+  --ring: 24 99% 46%;
+  --accent: 24 99% 95%;
+  --accent-foreground: 24 99% 28%;
+
+  /* Canonical auth surface — 36px controls, 22.5rem card measure, 16px page
+   * inset (15px below 30rem, see the media query). Matches AuthShell
+   * `variant="canonical"`, which still owns the compact CARD density knob. */
+  --auth-shell-control-height: var(--auth-shell-canonical-control-height);
+  --auth-shell-heading-size: var(--auth-shell-canonical-heading-size);
+  --auth-shell-card-max-width: var(--auth-shell-canonical-card-max-width);
+  --auth-shell-main-padding: var(--auth-shell-canonical-main-padding);
+}
+@media (max-width: 30rem) {
+  :root[data-brand="dxs"] {
+    --auth-shell-main-padding: var(--auth-shell-canonical-main-padding-mobile);
+  }
+}

package/dist/tokens/base.css

@@ -9,13 +9,19 @@
 @import "./components/control.css";
 @import "./components/form.css";
 @import "./components/card.css";
+@import "./components/chart.css";
 @import "./components/descriptions.css";
 @import "./components/table.css";
 @import "./components/feedback.css";
+@import "./components/sheet.css";
 @import "./components/badge.css";
 @import "./components/navigation.css";
 @import "./components/data-display.css";
 @import "./components/list-row.css";
 @import "./components/logo.css";
+@import "./components/email.css";
 @import "./components/data-entry.css";
 @import "./components/shell.css";
+@import "./components/sidebar.css";
+@import "./components/legal-document.css";
+@import "./components/error-surface.css";

package/dist/tokens/components/card.css

@@ -4,11 +4,28 @@
   /* Horizontal inset of every slot (header / content / footer) + the resting top/bottom
    * shell padding. This is the column the title, body and footer all align to. */
   --card-space-inset: var(--space-section-active);
+  /* BLOCK-axis (top/bottom) shell padding of the slotted card rhythm — a plain header's top, a
+   * `solo` body's top, and the terminal slot's bottom (gh#232). Split off --card-space-inset so a
+   * shell (AuthShell compact) can retune the card's height WITHOUT moving the inline column.
+   * Declared `initial` — NOT `var(--card-space-inset)` — so the default resolves at the CALL SITE:
+   * a :root binding would freeze at the :root inset and `[data-density="tight"|"cozy"]` (which
+   * override --card-space-inset on the card element) would stop reaching it. See docs/TOKENS.md ·
+   * "Role-mirror knobs MUST be `initial`" — the same call-site rule applies to derived knobs. */
+  --card-space-shell-y: initial; /* default = var(--card-space-inset) */
   /* Vertical padding of a BANDED header band (top = bottom). Drives --card-space-divided-y. */
   --card-space-header-y: var(--space-stack-sm);
   /* Gap between the header and the body, and the body's own top padding — the breathing
    * room under a title before content begins. */
   --card-space-body-y: var(--space-section-active);
+  /* Symmetric block padding for a SOLO content slot, so a composed shell can tune block and
+   * inline spacing independently without targeting CardContent.
+   * Declared `initial` for the SAME reason as --card-space-shell-y above: written as
+   * `var(--card-space-inset)` here it would freeze at the :root inset, and a card carrying
+   * [data-density="tight"|"cozy"] (which override --card-space-inset ON THE CARD) would keep the
+   * :root value. The default now resolves at the call site through the chain
+   * solo-y → shell-y → inset, so a solo body follows the general block knob when only that is
+   * set, and an explicit solo-y still wins. */
+  --card-space-solo-y: initial; /* default = var(--card-space-shell-y, var(--card-space-inset)) */
   /* Vertical padding of a SEPARATED footer band (top = bottom). Drives --card-space-divided-y. */
   --card-space-footer-y: var(--space-stack-sm);
   /* DIVIDED-section vertical padding (rule #44/#45). A header/footer that carries a divider
@@ -75,4 +92,35 @@
   --stat-card-icon-background: initial;
   --stat-card-icon-foreground: initial;
   --stat-card-delta-font-size: var(--font-size-xs);
+  /* ── ServiceLauncherCard (gh#219) ───────────────────────────────────────────────────
+   * Internal rhythm of a launcher tile: one gap knob drives the vertical stack AND the
+   * icon↔title↔status row, so a service theme retunes the whole tile density once. */
+  --card-service-launcher-space-gap: var(--space-stack-sm);
+  /* Semantic icon surface. `--control-height-lg` is the 36px control tier the hi-fi calls for —
+   * a tier token, never a literal, so the medallion tracks --scaling with its sibling controls. */
+  --card-service-launcher-icon-size: var(--control-height-lg);
+  --card-service-launcher-icon-glyph-size: var(--space-5);
+  --card-service-launcher-icon-radius: var(--radius-md);
+  /* Available-service medallion tint. `initial` (role-mirror rule, docs/TOKENS.md) so the role
+   * defaults resolve at the CALL SITE and a scoped [data-tenant]/.dark override reaches them.
+   * Defaults = hsl(var(--accent)) fill · hsl(var(--primary)) glyph. */
+  --card-service-launcher-icon-background: initial;
+  --card-service-launcher-icon-foreground: initial;
+  /* Unavailable medallion tint — applied when the consumer supplies `disabledReason`, so an
+   * un-launchable service never reads as brand-live. `initial` for the same role-mirror reason.
+   * Defaults = hsl(var(--muted)) fill · hsl(var(--muted-foreground)) glyph. */
+  --card-service-launcher-unavailable-icon-background: initial;
+  --card-service-launcher-unavailable-icon-foreground: initial;
+  /* Description prose — also drives the disabled-reason line and the catalog-CTA caption. */
+  --card-service-launcher-description-font-size: var(--font-size-xs);
+  --card-service-launcher-description-line-height: var(--line-height-body);
+  /* Mono metadata line (hostname · plan) — tighter leading than prose by design. */
+  --card-service-launcher-metadata-font-size: var(--font-size-xs);
+  --card-service-launcher-metadata-line-height: var(--line-height-normal);
+  /* Dashed catalog/add companion tile: kept tall enough to sit level with a populated launcher
+   * tile in the same grid row. Four control tiers ≈ medallion + title + description + action. */
+  --card-service-launcher-cta-min-height: calc(var(--control-height-lg) * 4);
+  /* Skeleton bar widths — shape-matched placeholders for the title and status badge. */
+  --card-service-launcher-skeleton-title-width: var(--space-12);
+  --card-service-launcher-skeleton-status-width: var(--space-10);
 }

package/dist/tokens/components/chart.css

@@ -0,0 +1,47 @@
+/* Chart component tokens — the dependency-free `CompactBarTrend` primitive
+ * (`@godxjp/ui/charts`). Every piece of its geometry and every fill is a public knob so a
+ * service theme can match its own design grid WITHOUT page-local CSS or inline heights
+ * (cardinal rules #44/#45). The recharts-backed charts draw their own SVG and only use the
+ * foundation `--chart-1..6` palette. */
+
+:root {
+  /* ── Plot height tiers (size = xs|sm|md|lg) ───────────────────────────────────────────
+   * `xs` is the canonical dashboard-summary-card density: a seven-day trend that sits under
+   * a KPI headline without stealing its vertical rhythm. A service retunes the whole scale
+   * here; a screen picks a step with the `size` prop. */
+  --chart-trend-plot-height-xs: 3.5rem;
+  --chart-trend-plot-height-sm: 5rem;
+  --chart-trend-plot-height-md: 7.5rem;
+  --chart-trend-plot-height-lg: 10rem;
+  /* Active tier — chart-layout.css re-points this per `data-size`; overriding it directly
+   * pins one height for every trend regardless of `size`. */
+  --chart-trend-plot-height: var(--chart-trend-plot-height-xs);
+
+  /* ── Bar marks ────────────────────────────────────────────────────────────────────────
+   * Thin marks, a surface gap between neighbours and a rounded data-end anchored to the
+   * baseline (the data-visualization mark spec). */
+  --chart-trend-bar-gap: var(--space-2);
+  --chart-trend-bar-radius: var(--radius-sm);
+  /* Ceiling on a single mark so a 3-point trend does not render slabs. */
+  --chart-trend-bar-max-width: 1.5rem;
+  /* Floor so a zero/absent value still reads as a plotted category rather than a hole. */
+  --chart-trend-bar-min-height: 2px;
+  /* Muted mark fill — role-mirror knob, declared `initial` so the role default re-resolves
+   * at the CALL SITE under `.dark` / `[data-tenant]` (docs/TOKENS.md · "Role-mirror knobs
+   * MUST be `initial`"). Default = hsl(var(--muted-foreground) / 0.75), which clears the
+   * 3:1 non-text contrast floor (WCAG 1.4.11) against the card surface. */
+  --chart-trend-bar-background: initial;
+  /* Opacity applied to the muted-fill role default. */
+  --chart-trend-bar-background-alpha: 0.75;
+  /* Emphasized ("current") mark fill — role-mirror knob. Default = hsl(var(--primary)). */
+  --chart-trend-bar-emphasis-background: initial;
+
+  /* ── Baseline + category ticks ────────────────────────────────────────────────────────
+   * Chrome defaults QUIET (rule #44): no baseline rule at rest. A service opts in with
+   * `--chart-trend-baseline-border: 1px solid hsl(var(--border));`. */
+  --chart-trend-baseline-border: initial;
+  --chart-trend-tick-gap: var(--space-1);
+  --chart-trend-tick-font-size: var(--font-size-xs);
+  /* Gap between the plot block and the optional activity footer slot. */
+  --chart-trend-footer-gap: var(--space-2);
+}

package/dist/tokens/components/control.css

@@ -58,6 +58,16 @@
   --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 */
+
   /* 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
@@ -75,6 +85,12 @@
   --command-group-padding: var(--space-1);
   --command-item-padding-y: var(--space-2);
   --command-item-padding-x: var(--space-2);
+  --command-palette-width: 35rem;
+  --command-palette-inset-top: calc(var(--space-6) * 4);
+  --command-palette-viewport-inset: var(--space-3);
+  --command-palette-hint-padding-y: var(--space-2);
+  --command-palette-hint-padding-x: var(--space-4);
+  --command-palette-hint-gap: var(--space-4);
   --search-input-edge-inset: var(--space-3);
   --search-input-start-padding: calc(
     var(--search-input-edge-inset) + var(--control-icon-size) + var(--control-gap)

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

@@ -15,6 +15,19 @@
      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;
+
   /* 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. */

package/dist/tokens/components/email.css

@@ -0,0 +1,93 @@
+/* EMAIL component tokens — the geometry/typography half of the transactional-email contract
+ * (`@godxjp/ui/email`). HTML email cannot read CSS custom properties: Outlook/Gmail strip <style>
+ * blocks and require LITERAL inline values, so a Blade/Twig/MJML template can never `var()` these.
+ * They still live in the component tier because this is the ONE source a maintainer edits — the
+ * `@godxjp/ui/email` export is GENERATED from this file plus the colour roles in foundation.css
+ * (scripts/gen-email-tokens.mjs), so an email template and a web screen can never drift apart.
+ *
+ * Every value is a LITERAL px/number (never rem, never calc, never var): email clients resolve
+ * neither the cascade nor relative units reliably, and the export must serialise to a plain hex/px
+ * string. Where a value mirrors a web token the comment names it, so a retune stays traceable.
+ *
+ * Colours are deliberately NOT redeclared here — they derive from the semantic roles
+ * (--card/--background/--foreground/--muted/--border/--primary/--ring/--brand) and are converted
+ * HSL→hex at module load, so a re-themed role re-tints the email with zero copy-paste.
+ * The identity mark reads --brand, NOT --success: --success is the wakatake status green, and the
+ * two are deliberately distinct roles (gh#250).
+ */
+:root {
+  /* ── Shell — the 480px transactional-email geometry ─────────────────────────────────────── */
+  --email-shell-width: 480px; /* canonical transactional card width */
+  --email-shell-padding: 32px; /* card inset — mirrors --space-8 (2rem) */
+  --email-shell-page-padding: 24px; /* gutter between the client viewport and the card (--space-6) */
+  --email-shell-border-width: 1px; /* card edge — mirrors the 1px --border hairline */
+  --email-card-radius: 10px; /* mirrors --card-radius (--radius-xl = 6px × φ ≈ 10px) */
+  --email-card-reference-height: 407px; /* canonical invitation reference measures 480×407 */
+  --email-stack-gap: 24px; /* block rhythm — mirrors --space-stack-lg (1.5rem) */
+  --email-stack-gap-sm: 12px; /* tight rhythm — mirrors --space-3 (0.75rem) */
+
+  /* ── Brand-mark lockup — the canonical GoDX capsule + wordmark (see EMAIL_BRAND_MARK) ────── */
+  /* The mark ARTWORK is the same 32×32 capsule + glyph `<Logo mark="godx" />` paints; only the
+   * RENDERED BOX differs. The canonical SCR-302 header sets it at 22px next to a 13px/700 "GoDX"
+   * wordmark, which is smaller than the web --logo-godx-size (2rem) — an email header carries the
+   * identity, not the navigation, so the lockup sits quieter (gh#250). */
+  --email-mark-width: 22px; /* canonical SCR-302 header lockup mark box */
+  --email-mark-height: 22px;
+  --email-mark-gap: 8px; /* mark ↔ wordmark — mirrors --logo-wordmark-gap (--space-2) */
+  --email-wordmark-font-size: 13px; /* canonical wordmark size (≈ --font-size-xs 12.5px) */
+  --email-wordmark-font-weight: 700; /* mirrors --logo-wordmark-font-weight */
+
+  /* ── Typography — literal px so no client has to resolve the rem scale ──────────────────── */
+  /* The DXS canonical face is M PLUS 2 (see src/styles/fonts.css). Email clients honour NO
+   * @font-face, so the stack ships the face NAME first and degrades through the platform JP faces
+   * to a generic — a client with M PLUS 2 installed (or a webmail that already loaded it) renders
+   * the canonical face, everything else lands on Hiragino (macOS/iOS) → Yu Gothic (Windows) →
+   * Noto Sans JP → Meiryo → the system UI face → Arial → sans-serif. Family names are SINGLE-quoted
+   * on export (the generator normalises) because an inline `style="…"` attribute is double-quoted;
+   * only ASCII aliases are listed, since a non-ASCII family name does not survive every transfer
+   * encoding. */
+  --email-font-family-sans:
+    "M PLUS 2", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", YuGothic,
+    "Noto Sans JP", Meiryo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, Arial,
+    sans-serif;
+  /* Tabular/reference strings — invoice ids, masked card numbers, ISO dates, amounts — are set in
+   * the mono face in the canonical card. Mirrors --font-family-mono. */
+  --email-font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --email-body-font-size: 14px; /* mirrors --font-size-base (0.875rem) */
+  /* 1.9, NOT the web --line-height-body (1.7) — the canonical email card runs its JP body copy
+   * looser than a screen, because a mail client gives the reader no density control. */
+  --email-body-line-height: 1.9;
+  --email-body-font-weight: 400; /* mirrors --font-weight-normal */
+  --email-heading-font-size: 17px; /* canonical card title (≈ --heading-h2, base × φ^¼² ≈ 17.6px) */
+  --email-heading-line-height: 1.7; /* the title shares the card's body leading, not a tight ramp */
+  --email-heading-font-weight: 500; /* mirrors --font-weight-medium — an email title is calm, not bold */
+
+  /* ── Primary CTA — the one action button ────────────────────────────────────────────────── */
+  --email-cta-height: 36px; /* mirrors --control-height-lg (2.25rem) — the canonical CTA box */
+  --email-cta-line-height: 36px; /* equal to the height: bulletproof vertical centring in Outlook */
+  --email-cta-padding-x: 16px; /* mirrors --space-4 */
+  --email-cta-radius: 6px; /* mirrors the --radius base (0.375rem) */
+  --email-cta-font-size: 14px; /* mirrors --font-size-base */
+  --email-cta-font-weight: 500; /* mirrors --font-weight-medium */
+
+  /* ── Legal footer ───────────────────────────────────────────────────────────────────────── */
+  --email-footer-font-size: 11px; /* mirrors --font-size-2xs (base ÷ φ^¼² ≈ 11.1px) */
+  --email-footer-line-height: 1.8; /* the legal band runs looser than the web --line-height-normal */
+  --email-footer-link-gap: 12px; /* horizontal separation between footer links (--space-3) */
+  --email-footer-padding-top: 20px; /* space above the legal band */
+  --email-footer-border-width: 1px; /* the hairline above the legal band */
+
+  /* ── Focus affordance (webmail preview panes that DO honour :focus) ─────────────────────── */
+  --email-focus-border-width: 2px; /* mirrors --focus-ring-width */
+
+  /* ── Mobile reflow — applied under the narrow media query and by inline fallbacks ───────── */
+  --email-mobile-max-width: 520px; /* the reflow breakpoint (card width + both gutters) */
+  --email-mobile-width: 100%; /* the card goes fluid below the breakpoint */
+  --email-mobile-padding: 20px; /* reduced card inset — mirrors --space-5 */
+  --email-mobile-page-padding: 12px; /* reduced viewport gutter — mirrors --space-3 */
+  /* One step below the 17px desktop title. The canonical 390px reference raster is unusable (it is
+   * 435px wide and already clips the card — dxs-platform/platform#496), so this is the library's
+   * documented contract rather than a measured canonical value. */
+  --email-mobile-heading-font-size: 16px;
+  --email-mobile-cta-width: 100%; /* the CTA goes full-bleed so the tap target spans the card */
+}

package/dist/tokens/components/error-surface.css

@@ -0,0 +1,36 @@
+/* ErrorSurface — the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251).
+ *
+ * Package-owned geometry: a service retunes the surface here (or in its own theme.css) instead of
+ * forking `.ui-error-surface` or adding a `className` to the component. Chrome defaults are QUIET
+ * (cardinal rule #44): the metadata block ships with no divider — a service opts IN.
+ */
+:root {
+  /* Measure of the surface block. Caps the status code + body + metadata column so a long ja/vi
+   * headline wraps at a readable width in BOTH shells, including the application shell where
+   * PageContainer is much wider than the copy wants to be. */
+  --error-surface-max-width: 32rem;
+
+  /* Rhythm between the status code, the EmptyState body, the metadata list and the progress meter. */
+  --error-surface-gap: var(--space-3);
+
+  /* Block padding of the surface inside the shell it is placed in. Desktop (1440/1024) default; the
+   * 390 step steps it down so a phone loses no vertical space (see styles/shell-layout.css). */
+  --error-surface-padding-block: var(--space-10);
+  --error-surface-padding-block-compact: var(--space-6);
+
+  /* Brand slot (a Logo) above the status code, system mode only. */
+  --error-surface-brand-gap: var(--space-2);
+
+  /* Metadata description list: row rhythm and the label↔value gap inside one row. */
+  --error-surface-meta-gap: var(--space-1);
+  --error-surface-meta-row-gap: var(--space-2);
+
+  /* Chrome, default quiet (#44). A service opts in with
+   * `--error-surface-meta-border: 1px solid hsl(var(--border));`. */
+  --error-surface-meta-border: none;
+  --error-surface-meta-padding-block: 0;
+
+  /* Width of the maintenance progress meter — narrower than the measure, so it reads as metadata
+   * rather than as the primary content of the page. */
+  --error-surface-progress-max-width: 18rem;
+}