@godxjp/ui 18.6.0 → 18.8.0

package/dist/styles/alert-layout.css

@@ -51,6 +51,42 @@
     padding-inline-end: calc(var(--alert-space-inset) + var(--space-8));
   }
 
+  /*
+   * BANNER variant (gh#255) — the same Alert, re-measured as page chrome: edge-to-edge, square,
+   * ruled only on the block-end edge so it separates itself from the content BELOW it. Declared
+   * after the base box (equal specificity → source order wins) and it touches geometry only, so
+   * every tone, the icon treatment, the actions grid and the dismiss control are inherited
+   * unchanged from the inline alert above.
+   */
+  [data-slot="alert"][data-variant="banner"] {
+    border-radius: var(--banner-radius);
+    border-width: var(--banner-border-width);
+    border-block-end-width: var(--banner-border-block-end-width);
+    padding: var(--banner-space-block) var(--banner-space-inline);
+  }
+
+  /* The dismissible reserve is re-derived from the BANNER inset — reusing the inline-alert
+   * calc would leave a ✕-sized hole on a strip whose own inset is half as deep. */
+  [data-slot="alert"][data-variant="banner"][data-dismissible] {
+    padding-inline-end: calc(var(--banner-space-inline) + var(--space-8));
+  }
+
+  [data-slot="alert"][data-variant="banner"] > [data-slot="alert-dismiss"] {
+    top: var(--banner-dismiss-space-offset);
+    inset-inline-end: var(--banner-dismiss-space-offset);
+  }
+
+  /* The compact page gutter. `.ui-page-container` steps `--space-page-active-x` down at this same
+   * breakpoint, and a banner mounted ABOVE the container (the normal case — page/app chrome) does
+   * not inherit that, so without this rule its text would sit 8px outside the page title at 390px.
+   * Bound to its own `--banner-space-inline-compact` knob rather than a literal, so a service
+   * retunes the mobile inset the same way it retunes the desktop one. */
+  @media (max-width: 720px) {
+    [data-slot="alert"][data-variant="banner"] {
+      --banner-space-inline: var(--banner-space-inline-compact);
+    }
+  }
+
   [data-slot="alert-icon"] {
     width: 1.25rem;
     height: 1.25rem;

package/dist/styles/card-layout.css

@@ -51,9 +51,16 @@
     background: transparent;
   }
 
+  /* `featured` = the brand-toned perimeter. Its colour is a role-mirror knob (rule #45): declared
+   * `initial` in the token layer so the --primary default resolves HERE, at the call site, and a
+   * scoped [data-tenant]/.dark override of --primary still reaches it. A service that wants the
+   * featured ring in a non-brand tone overrides --card-featured-border-color; a card that wants a
+   * SEMANTIC perimeter (attention / destructive / success …) uses
+   * `accent="…" accentPlacement="perimeter"` instead — same geometry, tone-owned. */
   [data-slot="card"][data-variant="featured"] {
-    border-color: hsl(var(--primary));
-    box-shadow: 0 0 0 1px hsl(var(--primary));
+    border-color: var(--card-featured-border-color, hsl(var(--primary)));
+    box-shadow: 0 0 0 var(--card-featured-ring-width)
+      var(--card-featured-border-color, hsl(var(--primary)));
   }
 
   /* ── Density — override the shell inset/body tokens ──────────────────────
@@ -72,33 +79,39 @@
     --card-space-body-y: var(--space-5);
   }
 
-  /* ── Accent edge — semantic left stripe (token width), content on shell ─ */
-  [data-slot="card"][data-accent] {
-    border-inline-start-width: var(--card-accent-rail-width);
-  }
-
+  /* ── Accent tone — ONE resolved colour per semantic accent ─────────────
+   * `--card-accent-color` is RESOLVED from the card's own `data-accent`, so both placements read
+   * the same value and a new tone is one line. It is deliberately NOT a service knob: it is set on
+   * the element, so a :root / [data-tenant] override could never reach it. Retint the ROLE
+   * (--attention, --success, …) — that is what a role is for. */
   [data-slot="card"][data-accent="primary"] {
-    border-inline-start-color: hsl(var(--primary));
+    --card-accent-color: hsl(var(--primary));
   }
 
   [data-slot="card"][data-accent="success"] {
-    border-inline-start-color: hsl(var(--success));
+    --card-accent-color: hsl(var(--success));
   }
 
   [data-slot="card"][data-accent="warning"] {
-    border-inline-start-color: hsl(var(--warning));
+    --card-accent-color: hsl(var(--warning));
   }
 
   [data-slot="card"][data-accent="info"] {
-    border-inline-start-color: hsl(var(--info));
+    --card-accent-color: hsl(var(--info));
   }
 
   [data-slot="card"][data-accent="attention"] {
-    border-inline-start-color: hsl(var(--attention));
+    --card-accent-color: hsl(var(--attention));
   }
 
   [data-slot="card"][data-accent="destructive"] {
-    border-inline-start-color: hsl(var(--destructive));
+    --card-accent-color: hsl(var(--destructive));
+  }
+
+  /* ── Accent placement `edge` (DEFAULT) — semantic left stripe (token width), content on shell ─ */
+  [data-slot="card"][data-accent] {
+    border-inline-start-width: var(--card-accent-rail-width);
+    border-inline-start-color: var(--card-accent-color);
   }
 
   [data-slot="card"][data-accent] > [data-slot="card-header"],
@@ -107,6 +120,29 @@
     padding-inline-start: calc(var(--card-space-inset) - var(--card-accent-rail-width));
   }
 
+  /* ── Accent placement `perimeter` — the full attention border (gh#12) ───
+   * The whole edge carries the semantic tone instead of one rail, so a card can read as
+   * "action required" / "failed" at a glance without borrowing `--primary` the way
+   * `variant="featured"` does. Same optical weight as `featured` (border + 1px ring), tone-owned.
+   * Because the rail is gone, the slot padding compensation above is undone — content returns to
+   * the normal shell column, so switching placement never shifts the text. */
+  [data-slot="card"][data-accent][data-accent-placement="perimeter"] {
+    border-width: var(--card-accent-perimeter-width);
+    border-color: var(--card-accent-color);
+    box-shadow:
+      0 0 0 var(--card-accent-perimeter-ring-width) var(--card-accent-color),
+      var(--card-shadow),
+      var(--card-glow);
+  }
+
+  [data-slot="card"][data-accent][data-accent-placement="perimeter"] > [data-slot="card-header"],
+  [data-slot="card"][data-accent][data-accent-placement="perimeter"]
+    > [data-slot="card-content"]:not([data-flush]),
+  [data-slot="card"][data-accent][data-accent-placement="perimeter"]
+    > [data-slot="card-footer"]:not([data-flush]) {
+    padding-inline-start: var(--card-space-inset);
+  }
+
   /* ── Header ──────────────────────────────────────────────────────────── */
   [data-slot="card-header"] {
     display: flex;

package/dist/styles/control.css

@@ -714,8 +714,18 @@
 .ui-otp-container {
   display: flex;
   align-items: center;
+  justify-content: var(--otp-container-align, flex-start);
   gap: var(--space-2);
 }
+/* `align` on InputOTP lands on the hidden <input> (input-otp owns the container element), so the
+ * container reads it through :has() — the same mechanism this file already uses for the invalid
+ * and disabled states. Specificity puts the per-instance prop above the theme token. */
+.ui-otp-container:has(.ui-otp-input[data-align="center"]) {
+  justify-content: center;
+}
+.ui-otp-container:has(.ui-otp-input[data-align="end"]) {
+  justify-content: flex-end;
+}
 .ui-otp-input:disabled {
   cursor: not-allowed;
 }
@@ -726,8 +736,8 @@
 .ui-otp-slot {
   position: relative;
   display: flex;
-  width: var(--otp-slot-size, var(--control-height));
-  height: var(--otp-slot-size, var(--control-height));
+  width: var(--otp-slot-inline-size, var(--otp-slot-size, var(--control-height)));
+  height: var(--otp-slot-block-size, var(--otp-slot-size, var(--control-height)));
   align-items: center;
   justify-content: center;
   font-size: var(--font-size-base);

package/dist/styles/data-display-layout.css

@@ -30,6 +30,22 @@
     color: var(--avatar-square-foreground, hsl(var(--primary-foreground)));
   }
 
+  /* CAPABILITY MEDALLION — `<Avatar appearance="tinted">` (gh#12). The tinted companion of the
+   * solid entity mark: same box, same radius, a soft role wash instead of a solid fill and the
+   * glyph in the role itself. Declared AFTER the square rule (equal specificity) so it retints
+   * either shape. The glyph rule is scoped to this appearance ON PURPOSE — a global
+   * `.ui-avatar svg` would outrank the per-call-site icon classes existing avatars already use. */
+  .ui-avatar[data-appearance="tinted"] {
+    --avatar-background: var(--avatar-tinted-background, hsl(var(--primary) / 0.1));
+    color: var(--avatar-tinted-foreground, hsl(var(--primary)));
+  }
+
+  .ui-avatar[data-appearance="tinted"] svg {
+    inline-size: var(--avatar-tinted-glyph-size);
+    block-size: var(--avatar-tinted-glyph-size);
+    flex: none;
+  }
+
   .ui-avatar-image {
     width: 100%;
     height: 100%;

package/dist/styles/layout.css

@@ -529,6 +529,41 @@
     overflow-wrap: anywhere;
   }
 
+  /* Title + `meta` share one baseline-aligned band (gh#255). The band only exists when `meta` is
+   * passed, so a header without it keeps its historical bare-`<h1>` DOM. `wrap` is what keeps a
+   * long JA/VI title and a status Badge legible at 390px instead of squeezing the title column. */
+  .ui-page-title-band {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--page-header-meta-gap);
+    min-inline-size: 0;
+  }
+
+  .ui-page-header-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--page-header-meta-gap);
+    min-inline-size: 0;
+  }
+
+  /* `loading` placeholders — the real `<h1>`/`<p>` wearing the shared `.ui-skeleton-block` skin, so
+   * the pending band occupies the same rhythm the settled band will. `max-inline-size: 100%` keeps
+   * them inside a 390px column; the block size replaces the line box the (sr-only) text no longer
+   * fills. */
+  .ui-page-title-placeholder {
+    inline-size: var(--page-title-placeholder-measure);
+    max-inline-size: 100%;
+    min-block-size: var(--page-title-placeholder-block-size);
+  }
+
+  .ui-page-subtitle-placeholder {
+    inline-size: var(--page-subtitle-placeholder-measure);
+    max-inline-size: 100%;
+    min-block-size: var(--page-subtitle-placeholder-block-size);
+  }
+
   /* Compact viewports use a responsive type step, not compact density: body/control text and
    * touch targets remain readable while page chrome stops competing with primary actions. A
    * single Flex action group must wrap even when the consumer omitted `wrap`, because clipping
@@ -918,6 +953,84 @@
     font-size: var(--filter-label-font-size);
   }
 
+  /* ── FilterBar typed model (#258) ──────────────────────────────────────────────────────────
+   * Every rule below is scoped to a region the bar only emits when its prop is passed, so a bar
+   * built the old way (children + onClear) matches none of them and is geometrically untouched.
+   *
+   * SEARCH — full-width while the strip is stacked (a bounded search box on a 390px screen wastes
+   * the row), then one shared token-owned measure from the 640px step up. This single measure is
+   * what the issue was filed against: as a plain child, every page picked its own width. */
+  .ui-filter-bar-search {
+    width: 100%;
+    min-width: 0;
+  }
+
+  @media (min-width: 640px) {
+    .ui-filter-bar-search {
+      width: var(--filter-bar-search-width);
+      max-width: 100%;
+      flex: 0 0 auto;
+    }
+  }
+
+  /* CHIPS — always their own full-width line. Applied filters are a record of state, not another
+   * control in the row; wrapping them in beside the pickers makes both harder to scan. */
+  .ui-filter-bar-chips {
+    display: flex;
+    width: 100%;
+    flex-basis: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--filter-bar-chip-row-gap);
+    min-width: 0;
+  }
+
+  .ui-filter-bar-chip {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: center;
+    gap: var(--filter-bar-chip-gap);
+    padding: var(--filter-bar-chip-padding-block) var(--filter-bar-chip-padding-inline);
+    border-radius: var(--filter-bar-chip-radius);
+    background: hsl(var(--filter-bar-chip-background, var(--muted)));
+    color: hsl(var(--filter-bar-chip-foreground, var(--muted-foreground)));
+    font-size: var(--filter-bar-chip-font-size);
+  }
+
+  /* A long JA/VI chip value wraps inside the chip rather than pushing the row into a horizontal
+   * scroll — the remove control must stay reachable at 390px. */
+  .ui-filter-bar-chip-label {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-filter-bar-chip-remove {
+    flex: none;
+  }
+
+  .ui-filter-bar-count {
+    color: hsl(var(--filter-bar-count-foreground, var(--muted-foreground)));
+    font-size: var(--filter-bar-count-font-size);
+    /* The count is a number that changes in place — tabular figures stop the row from twitching
+     * as it goes 9 → 10 → 100. */
+    font-variant-numeric: tabular-nums;
+  }
+
+  .ui-filter-bar-actions {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-inline-sm);
+  }
+
+  @media (min-width: 640px) {
+    .ui-filter-bar-actions {
+      width: auto;
+      flex: 0 0 auto;
+    }
+  }
+
   /* Toolbar/FilterBar `overflow="scroll"` (#216) — one bounded row that scrolls INLINE instead of
    * wrapping onto extra rows. Below 640px the strip still stacks (the `wrap` base rules above own
    * that): a 390px viewport must never hide a filter behind a horizontal scroll it cannot see.

package/dist/styles/navigation-layout.css

@@ -394,10 +394,15 @@
     box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
   }
 
+  /* The step NUMBER carries the emphasis. Both knobs exist because the canonical hosted-identity
+   * row marks the step with an accent TINT at normal weight, while the original marked it with
+   * bold at the inherited colour — a service picks its own emphasis instead of forking this rule
+   * (rule #45). Defaults are the original bold + inherited colour, so nothing moves. */
   .ui-steps-inline-index {
     flex: none;
     font-variant-numeric: tabular-nums;
-    font-weight: var(--font-weight-bold);
+    font-weight: var(--steps-inline-index-font-weight);
+    color: var(--steps-inline-index-color, currentColor);
   }
 
   .ui-steps-inline-title {
@@ -418,8 +423,7 @@
     color: hsl(var(--destructive));
   }
 
-  .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control,
-  .ui-steps-inline-separator {
+  .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control {
     color: hsl(var(--muted-foreground));
   }
 
@@ -427,5 +431,6 @@
     width: var(--steps-inline-separator-size);
     height: var(--steps-inline-separator-size);
     flex: none;
+    color: var(--steps-inline-separator-color, hsl(var(--muted-foreground)));
   }
 }

package/dist/styles/shell-layout.css

@@ -192,9 +192,14 @@
     text-align: center;
   }
 
+  /* Device-authorization also owns its CODE FIELD (gh#12): the preset's subject is the code, so
+   * the slot box comes from the preset instead of the generic square control tier. Scoped on the
+   * shell so every OTP inside the device flow inherits it; a per-instance override still wins. */
   .ui-auth-shell[data-preset="device-authorization"] {
     --auth-shell-card-max-width: var(--auth-shell-device-card-max-width);
     --auth-shell-main-padding: var(--auth-shell-device-main-padding);
+    --otp-slot-inline-size: var(--auth-shell-device-otp-slot-inline-size);
+    --otp-slot-block-size: var(--auth-shell-device-otp-slot-block-size);
   }
 
   .ui-auth-shell[data-preset="context-selection"] {
@@ -212,6 +217,30 @@
     --auth-shell-main-padding: var(--auth-shell-recovery-main-padding);
   }
 
+  /* Registration preset (gh#256) — the sign-up measure. `flex-start` is the load-bearing line: a
+   * registration card is the tallest surface in the hosted-identity set, and a vertically CENTRED
+   * tall card overflows ABOVE the scroll origin on a short viewport, putting its first field out of
+   * reach. Start-aligned, the block-start inset is ordinary page padding the user scrolls past, and
+   * the block-end inset is the footer clearance the form keeps at the end of a long scroll. */
+  .ui-auth-shell[data-preset="registration"] {
+    --auth-shell-card-max-width: var(--auth-shell-registration-card-max-width);
+    --auth-shell-main-align: flex-start;
+    --auth-shell-main-padding: var(--auth-shell-registration-main-padding-block-start)
+      var(--auth-shell-registration-main-padding-inline)
+      var(--auth-shell-registration-main-padding-block-end);
+    --auth-shell-card-stack-gap: var(--auth-shell-registration-card-stack-gap);
+  }
+
+  /* Fixed identity track — the mechanism `login` proved (gh#237), applied to the identity block
+   * wherever it sits in the column rather than through a grid row, so the preset does not constrain
+   * how many sections the page stacks. Content aligns to the slot END, so absent / one-line /
+   * wrapped two-line identity copy changes only the empty space ABOVE it and never moves the card
+   * off its canonical anchor. */
+  .ui-auth-shell[data-preset="registration"] .ui-auth-shell-card > .ui-auth-identity {
+    block-size: var(--auth-shell-registration-identity-slot-block-size);
+    justify-content: flex-end;
+  }
+
   .ui-auth-identity {
     display: flex;
     flex-direction: column;
@@ -391,6 +420,16 @@
     .ui-auth-shell[data-preset="account-recovery"] {
       --auth-shell-main-padding: var(--auth-shell-recovery-main-padding-mobile);
     }
+
+    /* registration = 15px inline at 390 (card x=15, width=360 — the same page rhythm as Login, so
+     * sign-in → sign-up never jumps on a phone). The block insets tighten but the footer clearance
+     * stays deliberately larger than the block-start inset: at 390 the form is at its tallest and
+     * the consent/legal footer must not sit flush against the submit button. */
+    .ui-auth-shell[data-preset="registration"] {
+      --auth-shell-main-padding: var(--auth-shell-registration-main-padding-block-start-mobile)
+        var(--auth-shell-registration-main-padding-inline-mobile)
+        var(--auth-shell-registration-main-padding-block-end-mobile);
+    }
   }
 
   /*
@@ -485,7 +524,11 @@
   }
 
   /* AppShell-owned mobile drawer trigger — hidden on desktop, shown once the docked sidebar
-   * collapses out below `lg` (gh#165). The drawer nav itself is a focus-trapped Sheet. */
+   * collapses out at 900px, THE ONE AppShell breakpoint (gh#165, gh#259). NOT Tailwind's `lg`
+   * (1024px): this comment said "below lg" for six minors while the shipped rule below and the
+   * hamburger's own `max-[900px]:inline-flex` both fired at 900 — see the block comment on the
+   * `@media (width <= 56.25rem)` rule for why 900 is the canonical value. The drawer nav itself is
+   * a focus-trapped Sheet. */
   .app-mobile-nav-trigger {
     display: none;
     flex: 0 0 auto;

package/dist/tokens/components/card.css

@@ -74,6 +74,18 @@
    * The slot padding compensation in card-layout.css subtracts the same token,
    * so content stays aligned on the shell whatever the rail width. */
   --card-accent-rail-width: 6px;
+  /* Accent placement `perimeter` (gh#12) — the FULL attention border. Two knobs so a service can
+   * tune the edge weight and the outer ring independently; the defaults reproduce the optical
+   * weight of `variant="featured"` (1px border + 1px ring) in the card's own semantic accent tone
+   * instead of --primary. Structural 1px literals, like the base card hairline. */
+  --card-accent-perimeter-width: 1px;
+  --card-accent-perimeter-ring-width: 1px;
+  /* `variant="featured"` edge — role-mirror knob (docs/TOKENS.md). `initial` so the --primary
+   * default resolves at the CALL SITE and a scoped [data-tenant]/.dark override of --primary
+   * reaches it; a service points it anywhere (e.g. var(--attention)) to retint every featured card
+   * at once. Default = hsl(var(--primary)). */
+  --card-featured-border-color: initial;
+  --card-featured-ring-width: 1px;
   --stat-card-label-font-size: var(--font-size-xs);
   --stat-card-label-font-weight: var(--font-weight-medium);
   --stat-card-label-letter-spacing: 0.04em;

package/dist/tokens/components/control.css

@@ -67,6 +67,22 @@
    * re-scopes --control-height to 36px, would silently shrink. Verified in Chromium: 36px before
    * and after. A service opts in with a NAMED tier (`var(--control-height-lg)`), never a calc. */
   --otp-slot-size: initial; /* default = var(--control-height) at the call site */
+  /* Per-AXIS overrides of the slot box (gh#12). --otp-slot-size stays the square shorthand; these
+   * two win over it when set, so a code field can be WIDER-than-tall or TALLER-than-wide without
+   * abandoning the token. A canonical device-grant code field is 27.5x52 per slot (a 4-slot
+   * `appearance="grouped"` box of 112x54 with its 1px group border) — not expressible with one
+   * square knob, which is why grouped OTP measured 146x38 against that artboard. `initial` for the
+   * same tier-mirror reason as --otp-slot-size: the whole fallback chain
+   * (axis → square → --control-height) must resolve at the CALL SITE so a shell that re-scopes
+   * --control-height still reaches an OTP row that sets neither axis. */
+  --otp-slot-inline-size: initial; /* default = var(--otp-slot-size, var(--control-height)) */
+  --otp-slot-block-size: initial; /* default = var(--otp-slot-size, var(--control-height)) */
+  /* Main-axis alignment of the whole OTP row (rule #44/#45 — chrome is a token, default quiet).
+   * `flex-start` is the historical behaviour, so an existing field is byte-identical; a centred
+   * code field is `align="center"` on InputOTP (which wins over this knob) or this token set once
+   * in a service theme. It exists because EVERY consumer was wrapping .ui-otp-container in a
+   * flex-centring div to get a centred challenge. */
+  --otp-container-align: flex-start;
 
   /* Checked/on/active fills — `initial` so the --primary default re-resolves at the call site
    * under a scoped theme (a :root binding to var(--primary) freezes at the :root value and a scoped

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

@@ -28,6 +28,18 @@
   --avatar-square-background: initial;
   --avatar-square-foreground: initial;
 
+  /* Capability medallion — `<Avatar appearance="tinted">` (gh#12): the tinted plate a capability /
+     feature glyph sits on, as opposed to the SOLID entity mark above. Pair it with shape="square"
+     for the canonical rounded square. --avatar-tinted-background / --avatar-tinted-foreground are
+     role-mirror knobs (`initial`, docs/TOKENS.md) so the --primary defaults resolve at the CALL
+     SITE and a scoped [data-tenant]/.dark override of --primary reaches them — the exact reason
+     this is a token and not the `hsl(var(--primary) / 0.1)` literal consumers were writing in page
+     CSS. Defaults = hsl(var(--primary) / 0.1) wash · hsl(var(--primary)) glyph ·
+     --control-icon-size glyph box. */
+  --avatar-tinted-background: initial;
+  --avatar-tinted-foreground: initial;
+  --avatar-tinted-glyph-size: var(--control-icon-size);
+
   /* 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

@@ -63,8 +63,14 @@
   --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 */
+  /* TOUCH TARGET, deliberately DECOUPLED from --control-height-lg (36px). Do not "restore" the
+   * mirror: email is a mobile-first, touch-only medium. There is no hover state, no precise
+   * pointer, and mail clients do not reliably offer zoom or a focus affordance — so the web's AA
+   * floor (SC 2.5.8, 24x24, which 36px clears) is the wrong bar here. 44px is the AAA target size
+   * (SC 2.5.5, 44x44) and the Apple HIG 44pt / Material 48dp convention. A service that must keep
+   * the old box sets --email-cta-height + --email-cta-line-height in its own theme. */
+  --email-cta-height: 44px;
+  --email-cta-line-height: 44px; /* 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 */

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/navigation.css

@@ -14,6 +14,15 @@
   --steps-inline-item-gap: var(--space-1);
   --steps-inline-font-size: var(--font-size-xs);
   --steps-inline-separator-size: var(--control-icon-size-sm);
+  /* Inline-step emphasis (gh#12). The step number's weight and tint are separate knobs so a
+   * service can express progression the canonical way — an accent TINT at normal weight — instead
+   * of the original bold. --steps-inline-index-color / --steps-inline-separator-color are
+   * role-mirror knobs (docs/TOKENS.md): `initial` so their defaults (the inherited step colour and
+   * the --muted-foreground role) resolve at the CALL SITE and a scoped [data-tenant]/.dark
+   * override still reaches them. Defaults reproduce today's row byte for byte. */
+  --steps-inline-index-font-weight: var(--font-weight-bold);
+  --steps-inline-index-color: initial; /* default = currentColor at the call site */
+  --steps-inline-separator-color: initial; /* default = hsl(var(--muted-foreground)) */
 
   /* 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
@@ -55,4 +64,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;
 }