@godxjp/ui 18.10.0 → 18.11.1

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);
@@ -817,6 +827,11 @@
   display: inline-flex;
   align-items: center;
   gap: var(--space-1);
+  /* A 10-star scale needs ~276px of hit area; a 320px viewport offers ~212 inside a card. Without
+   * wrapping, the last stars are painted outside the surface with nothing to scroll them into
+   * view, so they can be neither seen nor clicked (WCAG 2.1.1 / 2.4.7). Wrapping keeps every star
+   * reachable and is a no-op wherever the row already fits. */
+  flex-wrap: wrap;
 }
 .ui-rating-star {
   /* ≥24px hit area (WCAG 2.5.8) around the 20px glyph */

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

@@ -626,6 +626,22 @@
     margin-top: var(--space-1);
   }
 
+  /* `headerLoading` 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);
+  }
+
   /* Default: content-height + top-packed. The container's min-height:100% keeps
    * the page background spanning the viewport-tall shell, but the body itself is
    * NOT stretched — so short pages no longer leave a jarring void below their

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

@@ -77,6 +77,17 @@
     background-color: var(--app-shell-main-background);
   }
 
+  /* `.app-main` carries tabindex="0" (axe scrollable-region-focusable, dbad118), so keyboard
+   * focus can land on the region — without a rule here the USER-AGENT default outline (blue
+   * in Chrome) wraps the whole content area. Use the design-system ring instead; INSET because
+   * `.app-main` is the shell's clip boundary (`contain: paint`) and an outset shadow would be
+   * clipped by the grid. Never remove the indicator outright — the region is focusable and
+   * must show focus (WCAG 2.4.7, gh#271). */
+  .app-main:focus-visible {
+    outline: none;
+    box-shadow: inset 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+  }
+
   .app-footer {
     grid-area: footer;
     border-top: 1px solid hsl(var(--border));
@@ -192,9 +203,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"] {
@@ -528,7 +544,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/styles/table-layout.css

@@ -169,6 +169,11 @@
     padding-inline: var(--space-page-active-x);
   }
 
+  /* Scroll-hint fade — a SCROLL affordance, so it only shows while the region
+   * actually overflows and is not scrolled to the inline-end. The component
+   * measures the scroll box and stamps `.ui-data-table-has-overflow-end`
+   * (gh#267 — the fade used to render unconditionally, washing out the last
+   * column of tables that never scroll). */
   .ui-data-table-scroll::after {
     content: "";
     position: absolute;
@@ -178,14 +183,35 @@
     z-index: 20;
     width: 1.75rem;
     pointer-events: none;
+    opacity: 0;
+    transition: opacity 150ms ease;
     background: linear-gradient(to left, hsl(var(--background) / 0.88), transparent);
   }
 
+  .ui-data-table-has-overflow-end::after {
+    opacity: 1;
+  }
+
   [data-slot="card-content"][data-flush] .ui-data-table-scroll {
     margin-inline: 0;
     padding-inline: 0;
   }
 
+  /* Same reset, same reason, for a table sitting straight on a FLUSH page. The bleed above exists
+   * to cancel the page gutter so the scroll region reaches the page edges — but
+   * `.ui-page-container--flush .ui-page-body` zeroes that gutter, leaving nothing to bleed into.
+   * The -16px then escapes the page: nothing clips it, so the whole page gained 16px of
+   * horizontal scroll at 320/375/390 (WCAG 2.2 SC 1.4.10 Reflow). Scoped by child combinator so a
+   * table inside a Card keeps its own bleed — the card supplies the padding that one compensates. */
+  .ui-page-container--flush > .ui-page-body > .ui-data-table-root > .ui-data-table-scroll {
+    margin-inline: 0;
+    padding-inline: 0;
+  }
+
+  .ui-page-container--flush > .ui-page-body > .ui-data-table-root > .ui-data-table-scroll::after {
+    inset-inline-end: 0;
+  }
+
   [data-slot="card-content"][data-flush] .ui-data-table-scroll::after {
     inset-inline-end: 0;
   }
@@ -322,7 +348,18 @@
     --table-action-collection-column-width: var(--table-action-collection-actions-width);
     text-align: end;
   }
+}
 
+/* The compact tier lives in `godxjp-ui-responsive` — the LAST layer, declared after Tailwind in
+ * styles/base.css — not in `@layer components`. `<table>` carries `text-sm`, a Tailwind utility,
+ * and `utilities` outranks `components` by LAYER ORDER, so a `font-size:` re-point written here as
+ * a component rule can never apply however specific it is: that is exactly why
+ * `--table-action-collection-font-size-compact` was dead at every width (gh#412), leaving the
+ * narrow frame at 14px where a 5–6 character Japanese label overflows its column measure. The
+ * column measures move with it so the whole compact tier is decided in ONE place, and so a
+ * consumer utility on the table can't half-collapse it either. See styles/base.css · THE LAYER
+ * CONTRACT. */
+@layer godxjp-ui-responsive {
   /* 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 ·
@@ -339,6 +376,10 @@
       --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);
+      /* The legibility floor. Default `0` keeps the table fitted to its container exactly as
+       * before; a consumer whose column count exceeds the priority budget raises it and the
+       * surrounding scroll region takes the overflow instead of the cells. */
+      min-inline-size: var(--table-action-collection-min-inline-size-compact);
     }
 
     /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
@@ -375,6 +416,10 @@
       --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);
+      /* The legibility floor. Default `0` keeps the table fitted to its container exactly as
+       * before; a consumer whose column count exceeds the priority budget raises it and the
+       * surrounding scroll region takes the overflow instead of the cells. */
+      min-inline-size: var(--table-action-collection-min-inline-size-compact);
     }
 
     /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
@@ -411,6 +456,10 @@
       --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);
+      /* The legibility floor. Default `0` keeps the table fitted to its container exactly as
+       * before; a consumer whose column count exceeds the priority budget raises it and the
+       * surrounding scroll region takes the overflow instead of the cells. */
+      min-inline-size: var(--table-action-collection-min-inline-size-compact);
     }
 
     /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
@@ -447,6 +496,10 @@
       --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);
+      /* The legibility floor. Default `0` keeps the table fitted to its container exactly as
+       * before; a consumer whose column count exceeds the priority budget raises it and the
+       * surrounding scroll region takes the overflow instead of the cells. */
+      min-inline-size: var(--table-action-collection-min-inline-size-compact);
     }
 
     /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the

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

@@ -21,6 +21,10 @@
   --dialog-space-inset: var(--dialog-space-y) var(--dialog-space-x);
   --dialog-space-gap: var(--space-stack-md);
   --dialog-close-space-offset: var(--space-4);
+  /* Alert corner radius (gh#268 — rule #45): a full-width Alert often sits in the
+   * same page column as a Card (--card-radius); a service aligns them by
+   * overriding this once. Default keeps the historical --radius-md. */
+  --alert-radius: var(--radius-md);
   --alert-space-inset: var(--space-section-active);
   --alert-space-gap: var(--space-inline-md);
   --alert-inner-space-gap: var(--space-stack-sm);
@@ -29,6 +33,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

package/dist/tokens/components/shell.css

@@ -81,10 +81,21 @@
   --topbar-height: auto;
   --topbar-inset: 0px;
   --topbar-gap: var(--space-2);
-  /* At compact desktop/tablet widths the docked sidebar leaves too little inline room for three
-   * intrinsically-sized clusters. The package hides the optional center slot before it can cover
-   * the breadcrumb/title or end utilities. Consumers may opt back into another display strategy
-   * (for example `flex`) once their center content has its own compact presentation. */
+  /* ⚠ THIS KNOB DELETES CONTENT AT 1100px AND BELOW — read before you ship a center slot.
+   * At compact desktop/tablet widths the docked sidebar leaves too little inline room for three
+   * intrinsically-sized clusters, so the package hides the optional center slot before it can
+   * cover the breadcrumb/title or end utilities (gh#244). The default is `none`, which means a
+   * global search trigger placed in `center` is INVISIBLE from 1100px down — including on every
+   * phone — unless the consumer opts back in. That default arrived in 18.6.0 and removed the slot
+   * for consumers who never changed a line of their own code (gh#12); it stays because the
+   * overlap it prevents is a real defect and flipping a shipped default twice is worse than
+   * documenting it once, but it is a DECISION, not an accident:
+   *
+   *   :root { --topbar-center-compact-display: flex; }   ← restore the slot at every width
+   *
+   * Opt back in only once the center content has a compact presentation of its own (an icon-only
+   * search trigger, a collapsing field). A page-local media query is the anti-pattern this knob
+   * replaces. */
   --topbar-center-compact-display: none;
   --org-switcher-trigger-height: 2.75rem;
   --org-switcher-trigger-padding-x: var(--space-2);
@@ -183,6 +194,18 @@
   --auth-shell-device-card-max-width: 23.75rem;
   --auth-shell-device-main-padding: 1rem;
   --auth-shell-device-main-padding-mobile: 0.9375rem 0.3125rem;
+  /* CODE FIELD measure — the preset owns it (gh#12). A device grant is the one canonical flow whose
+   * PRIMARY control is the code field, so leaving it on the generic square --otp-slot-size made the
+   * preset own the page but not its own subject: two 4-slot `appearance="grouped"` boxes rendered
+   * 146x38 (4 x the canonical 36px control tier + the 1px group border) against a 112x54 artboard.
+   * These are the per-slot boxes that ADD UP to that artboard group:
+   *   inline  27.5px x 4 + 2 x 1px group border = 112px
+   *   block   52px       + 2 x 1px group border =  54px
+   * Literal artboard lengths, like every other preset measure here — they must not drift with
+   * --scaling. A service that groups its code differently overrides --otp-slot-inline-size /
+   * --otp-slot-block-size on its own field; the generic square knob is untouched everywhere else. */
+  --auth-shell-device-otp-slot-inline-size: 1.71875rem;
+  --auth-shell-device-otp-slot-block-size: 3.25rem;
 
   /* Context-selection preset — 25rem card measure on desktop/tablet, edge-to-edge on mobile
    * (0 inline gutter) with a 16px rhythm between the intro, the card and the remember row. */

package/dist/tokens/components/table.css

@@ -108,4 +108,25 @@
   --table-action-collection-cell-space-x-compact: var(--space-2);
   --table-action-collection-cell-padding-y-compact: var(--space-2);
   --table-action-collection-row-height-compact: var(--table-row-height-compact);
+  /* Compact-tier LEGIBILITY FLOOR — the measure below which the preset stops fitting the table
+   * to its container and lets the scroll region it already owns take over.
+   *
+   * The percentage budget above is sized for ONE column per priority tier plus one free-text
+   * column. A queue that repeats a tier — two `secondary` columns, three `meta` columns, or an
+   * unmarked column beside them — asks for more than 100%, and under `table-layout: fixed` the
+   * surplus is taken out of the columns rather than out of the table: measured on a seven-column
+   * Japanese admin queue at 390, every column landed at 44–59px and CJK labels wrapped at ONE to
+   * TWO characters per line (dxs-platform/platform#680). That is a WCAG 2.2 SC 1.4.10 Reflow (AA)
+   * failure, and it is the failure mode this floor removes.
+   *
+   * Scrolling is the correct escape, not a concession: SC 1.4.10 exempts "parts of the content
+   * which require two-dimensional layout for usage or meaning", and its own note names data
+   * tables as the example. A table that scrolls horizontally inside its card conforms; a table
+   * whose cells are one character wide does not.
+   *
+   * Default `0` so nothing changes for any existing consumer: a queue that fits its priority
+   * budget keeps fitting. A consumer whose queue carries more columns than the budget sets this
+   * to the measure at which its narrowest column is still readable (roughly 5rem per column for
+   * Japanese at the compact type tier) and the table scrolls instead of crushing. */
+  --table-action-collection-min-inline-size-compact: 0;
 }

package/dist/tokens/semantic/layout.css

@@ -89,6 +89,14 @@
    * nor the wrapping row. */
   --page-header-status-gap: var(--space-inline-sm);
 
+  /* PageContainer `headerLoading` placeholders (gh#255). The title/subtitle elements wear the
+   * shared `.ui-skeleton-block` skin, so they need only a MEASURE and a block size — a service
+   * retunes the pending band's proportions here instead of per page. */
+  --page-title-placeholder-measure: 14rem; /* 224px */
+  --page-title-placeholder-block-size: 1.5em;
+  --page-subtitle-placeholder-measure: 22rem; /* 352px */
+  --page-subtitle-placeholder-block-size: 1.25em;
+
   /* Bounded page MEASURE (gh#245 / gh#247) — the shared inline cap applied to the page HEADER and
    * BODY together, so the header `extra` action ends on the same edge as the body surface (the
    * `variant="narrow"` complaint: it caps only `.ui-page-body`, leaving the header action out at

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "18.10.0",
-  "godxUiMcp": "18.10.0",
+  "version": "18.11.1",
+  "godxUiMcp": "18.11.1",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",