@godxjp/ui 18.5.0 → 18.7.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

@@ -33,10 +33,11 @@
 
 :root {
   /* ── Brand palette — the shipped GodX Navy ramp (identical to the `brand`
-   *    axis preset). The brand-green IDENTITY mark is deliberately NOT here:
-   *    `--logo-godx-color` / `--logo-wordmark-color` default to the `--success`
-   *    identity role at their call sites and never read `--primary`, so a
-   *    re-themed action colour can never recolour the GoDX mark or wordmark. */
+   *    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%;

package/dist/tokens/axes.css

@@ -73,9 +73,10 @@
  * `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 brand-green GoDX identity mark needs no binding: `--logo-godx-color` /
- * `--logo-wordmark-color` already default to the `--success` identity role at
- * their call sites and never reference `--primary`. */
+ * 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%;

package/dist/tokens/base.css

@@ -24,3 +24,4 @@
 @import "./components/shell.css";
 @import "./components/sidebar.css";
 @import "./components/legal-document.css";
+@import "./components/error-surface.css";

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

@@ -10,8 +10,10 @@
  * 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/--success) and are converted
+ * (--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 ─────────────────────────────────────── */
@@ -24,31 +26,53 @@
   --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 — the canonical GoDX capsule (see EMAIL_BRAND_MARK) ─────────────────────── */
-  --email-mark-width: 32px; /* mirrors --logo-godx-size (2rem) */
-  --email-mark-height: 32px;
+  /* ── 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:
-    -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
+    "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) */
-  --email-body-line-height: 1.7; /* mirrors --line-height-body */
+  /* 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: 20px; /* mirrors --heading-h1 (base × φ^¼³ ≈ 19.8px) */
-  --email-heading-line-height: 1.25; /* mirrors --line-height-tight */
-  --email-heading-font-weight: 700; /* mirrors --font-weight-bold */
+  --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: 44px; /* mirrors --control-height-comfortable (2.75rem coarse-pointer target) */
-  --email-cta-line-height: 44px; /* equal to the height: bulletproof vertical centring in Outlook */
-  --email-cta-padding-x: 24px; /* mirrors --space-6 */
+  --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: 700; /* mirrors --font-weight-bold */
+  --email-cta-font-weight: 500; /* mirrors --font-weight-medium */
 
   /* ── Legal footer ───────────────────────────────────────────────────────────────────────── */
-  --email-footer-font-size: 12px; /* mirrors --font-size-xs (base ÷ φ^¼ ≈ 12.5px) */
-  --email-footer-line-height: 1.5; /* mirrors --line-height-normal */
+  --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 */
@@ -61,6 +85,9 @@
   --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 */
-  --email-mobile-heading-font-size: 18px; /* mirrors --heading-h2 (base × φ^¼² ≈ 17.6px) */
+  /* 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;
+}

package/dist/tokens/components/feedback.css

@@ -29,6 +29,26 @@
    * (a brand's success-bg/-border are often more present than the faint 5%/30% default). */
   --alert-bg-alpha: 0.05;
   --alert-border-alpha: 0.3;
+  /* BANNER — the page-level Alert treatment (gh#255). Every constant a service would want to
+   * match to its page grid is a knob (rule #45): a banner that must keep the app's rounded card
+   * language sets --banner-radius, one that rules its top edge too sets --banner-border-width.
+   * The inline inset tracks the live page gutter, so a banner mounted above a PageContainer lines
+   * its text up with the page title instead of sitting at a second, unrelated margin. */
+  --banner-radius: 0;
+  --banner-border-width: 0;
+  --banner-border-block-end-width: 1px;
+  --banner-space-block: var(--space-3);
+  /* Inline inset tracks the page gutter so a banner's text lines up with the page title.
+   * `--space-page-active-x` steps down to the compact gutter on `.ui-page-container` only, and
+   * custom properties inherit — so a banner rendered INSIDE the container picks the compact value
+   * up for free, while the normal case (a banner mounted ABOVE the container, or in AppShell) would
+   * keep the desktop gutter and sit 8px out at 390px. The compact step below is what actually keeps
+   * the two aligned; retune it rather than hard-coding a mobile inset at the call site. */
+  --banner-space-inline: var(--space-page-active-x);
+  --banner-space-inline-compact: var(--space-page-compact-x);
+  /* Dismiss offset is measured from the banner's own (shorter) block inset, so the ✕ stays
+   * optically centred on a one-line strip instead of floating at the inline-alert offset. */
+  --banner-dismiss-space-offset: var(--space-2);
   /* Brand glow layer for the raised dialog/sheet panel — invisible no-op at rest (rule #44).
    * Paired AFTER --shadow-lg in the surface box-shadow so a service can wash the overlay with the
    * global glow, e.g. --dialog-content-glow: var(--shadow-glow), with no markup change. */

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

@@ -15,6 +15,26 @@
   --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;

package/dist/tokens/components/logo.css

@@ -12,28 +12,70 @@
   --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 is deliberately independent from --primary so a green brand mark never
-   * recolours primary buttons or links. Services can retune the role once for every Logo.
+  /* 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 --success actually
+   * (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(--success))
-   *   --logo-success-foreground = hsl(var(--success-foreground))
-   *   --logo-godx-color         = hsl(var(--success)) */
+   *   --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-size: 2rem;
   --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 (never --primary): the GoDX/`success`
-   * lockup is brand-green out of the box, and every other lockup reads --foreground.
+   * 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(--success)) on the
+   * --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);

package/dist/tokens/components/navigation.css

@@ -10,6 +10,10 @@
   --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
@@ -24,6 +28,17 @@
   --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. */
@@ -40,4 +55,30 @@
    * 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);
+
+  /* FilterBar typed model (#258) — the search / chip / result-count regions the bar now OWNS, so a
+   * list page never re-decides them. Every constant is a knob (rule #45): a service matches its own
+   * grid by retuning these once instead of per page.
+   *
+   * Search MEASURE — the whole point of the `search` slot. Below the 640px step the control is
+   * full-width (a bounded search box on a 390px screen wastes the row), so this binds only at and
+   * above it. 18rem = 288px: comfortable for a JA/VI query without crowding the filter groups. */
+  --filter-bar-search-width: 18rem;
+
+  /* Applied-filter chips. */
+  --filter-bar-chip-gap: var(--space-inline-xs);
+  --filter-bar-chip-row-gap: var(--space-inline-xs);
+  --filter-bar-chip-padding-inline: var(--space-2);
+  --filter-bar-chip-padding-block: var(--space-1);
+  --filter-bar-chip-radius: var(--radius-sm);
+  --filter-bar-chip-font-size: var(--font-size-xs);
+  /* Role-mirror knobs (docs/TOKENS.md) — `initial` at :root so --muted / --muted-foreground
+   * re-resolve at the CALL SITE under a scoped [data-tenant]/.dark theme. Binding a role var here
+   * would freeze the chip at the :root palette and a tenant override would never reach it. */
+  --filter-bar-chip-background: initial;
+  --filter-bar-chip-foreground: initial;
+
+  /* Result-count live region. */
+  --filter-bar-count-font-size: var(--font-size-xs);
+  --filter-bar-count-foreground: initial;
 }