@godxjp/ui 18.10.0 → 18.11.0

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

@@ -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"] {
@@ -528,7 +533,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

@@ -186,6 +186,21 @@
     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 +337,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 +365,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 +405,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 +445,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 +485,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

@@ -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

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.0",
+  "godxUiMcp": "18.11.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",