@godxjp/ui 18.9.0 → 18.11.0

package/dist/styles/layout.css

@@ -521,47 +521,35 @@
     width: 100%;
   }
 
-  .ui-page-title {
-    font-size: var(--page-title-font-size);
-    font-weight: var(--font-weight-medium);
-    letter-spacing: var(--letter-spacing-tight);
-    line-height: var(--line-height-tight);
-    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 {
+  /* Title line + status/meta band (PageContainer `status`, godxjp-ui#255). The band sits on
+   * the title's baseline row at the token-owned gap and WRAPS under the title when the
+   * viewport (390px) or a long JA/VI title leaves no room — never clips, never overlaps. */
+  .ui-page-header-title-row {
     display: flex;
     flex-wrap: wrap;
-    align-items: baseline;
-    gap: var(--page-header-meta-gap);
+    align-items: center;
+    gap: var(--page-header-status-gap);
     min-inline-size: 0;
   }
 
-  .ui-page-header-meta {
+  .ui-page-header-title-row > .ui-page-title {
+    min-inline-size: 0;
+  }
+
+  .ui-page-header-status {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--page-header-meta-gap);
+    gap: var(--page-header-status-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);
+  .ui-page-title {
+    font-size: var(--page-title-font-size);
+    font-weight: var(--font-weight-medium);
+    letter-spacing: var(--letter-spacing-tight);
+    line-height: var(--line-height-tight);
+    overflow-wrap: anywhere;
   }
 
   /* Compact viewports use a responsive type step, not compact density: body/control text and
@@ -638,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
@@ -953,84 +957,6 @@
     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.
@@ -1063,6 +989,90 @@
       z-index: 1;
       background: hsl(var(--filter-bar-sticky-background, var(--background)));
     }
+
+    /* Typed-model reset+actions cluster gets the same viewport-pinned treatment (gh#258). */
+    .ui-toolbar[data-overflow="scroll"] > .ui-filter-bar-end {
+      position: sticky;
+      inset-inline-end: 0;
+      margin-inline-start: auto;
+      flex: 0 0 auto;
+      z-index: 1;
+      background: hsl(var(--filter-bar-sticky-background, var(--background)));
+    }
+  }
+
+  /* ── FilterBar typed model (gh#258) ─────────────────────────────────────────────
+   * Canonical model layout: strip (search → filters → children → reset → actions) →
+   * applied-chips row → result-count/error line. Geometry is entirely token-owned
+   * (`--filter-bar-*`); stacking below 640px reuses the `.ui-toolbar` base rules, so
+   * 1440/1024/390 behave identically to the composition form. */
+  .ui-filter-bar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--filter-bar-section-gap);
+  }
+
+  .ui-filter-bar .ui-filter-bar-search {
+    inline-size: 100%;
+  }
+
+  .ui-filter-bar-end {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    width: 100%;
+  }
+
+  /* Inside the end cluster the clear button gives up its own auto margin — the CLUSTER is what
+   * parks at the inline end, so reset and actions stay adjacent in the keyboard/DOM order. */
+  .ui-filter-bar-end .ui-toolbar-clear {
+    margin-inline-start: 0;
+  }
+
+  .ui-filter-bar-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+  }
+
+  @media (min-width: 640px) {
+    .ui-filter-bar .ui-filter-bar-search {
+      inline-size: min(100%, var(--filter-bar-search-width));
+    }
+
+    .ui-filter-bar .ui-filter-bar-filter {
+      min-inline-size: min(100%, var(--filter-bar-filter-width));
+    }
+
+    .ui-filter-bar-end {
+      width: auto;
+      margin-inline-start: auto;
+    }
+  }
+
+  .ui-filter-bar-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--filter-bar-chip-gap);
+  }
+
+  .ui-filter-bar-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    min-width: 0;
+  }
+
+  .ui-filter-bar-meta {
+    font-size: var(--filter-label-font-size);
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-filter-bar-error {
+    color: hsl(var(--destructive));
   }
 
   /* ── LegalDocumentShell (#222) ─────────────────────────────────────────────────

package/dist/styles/shell-layout.css

@@ -343,12 +343,21 @@
   .ui-auth-shell[data-variant="canonical"] .ui-form-field {
     --field-label-gap: var(--auth-shell-field-label-gap);
   }
+}
 
-  .ui-auth-shell[data-variant="canonical"] [data-slot="form-field-label"] [data-slot="label"] {
-    font-size: var(--auth-shell-field-label-font-size);
-    line-height: var(--auth-shell-field-label-line-height);
-  }
+/* INTENTIONALLY UNLAYERED (like density.css) — the Label primitive carries `text-sm leading-none`
+ * Tailwind utility classes, and the utilities layer is declared after `components`, so a
+ * components-layer declaration of the same properties can NEVER win regardless of specificity.
+ * That left `--auth-shell-field-label-font-size` / `--auth-shell-field-label-line-height` dead and
+ * the canonical field label rendering as a 14px/1.0 line box instead of the canonical 12px/1.5 =
+ * 18px, sitting the email input 4px high (gh#263). Unlayered author CSS out-cascades every layer;
+ * the two tokens remain the public tuning knobs. */
+.ui-auth-shell[data-variant="canonical"] [data-slot="form-field-label"] [data-slot="label"] {
+  font-size: var(--auth-shell-field-label-font-size);
+  line-height: var(--auth-shell-field-label-line-height);
+}
 
+@layer components {
   /*
    * Compact auth card density — the two card axes are wired to SEPARATE knobs (gh#232), so a
    * service can shorten the canonical Login card without narrowing its column (or vice versa):
@@ -384,7 +393,7 @@
     gap: var(--auth-shell-divider-gap);
     color: hsl(var(--auth-shell-divider-label-color));
     font-size: var(--auth-shell-divider-label-font-size);
-    line-height: 1;
+    line-height: var(--auth-shell-divider-label-line-height);
   }
 
   .ui-auth-divider-rule {
@@ -423,8 +432,8 @@
 
     /* 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. */
+     * stays deliberately larger than a bare gutter: 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)

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;
   }
@@ -284,8 +299,23 @@
 
   .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);
+     * which is the free-text column — EXCEPT past the seven-column budget below the collapse
+     * step, where the `:has()` tier re-points the middle fallback at the flex floor (gh#262):
+     * the fixed algorithm hands an auto column 0px once the marked columns over-constrain the
+     * table, which is the one-character-per-line shredding this preset must never produce.
+     * There every column carries a rem floor-measure; once the floors outgrow the container the
+     * table's used width grows past its specified 100% (CSS 2.1 §17.5.2.1) and the DIRECT
+     * wrapper's keyboard-reachable overflow-x region scrolls — the SC 1.4.10-permitted
+     * one-dimensional scroll, instead of unreadable shredding (see tokens/components/table.css). */
+    inline-size: var(
+      --table-action-collection-column-width,
+      var(--table-action-collection-flex-width, auto)
+    );
+    /* Wrapping guard, considered for gh#262: this stays `overflow-wrap: anywhere`, NOT
+     * `word-break: keep-all`. Under `table-layout: fixed` a column cannot grow to fit an
+     * unbreakable CJK run, so keep-all would overflow/clip a long JA header instead of widening
+     * its column. With the floors guaranteeing a ~5-glyph measure, a wrapped JA header is two
+     * readable lines — never a vertical character column — and losing no text beats clipping. */
     overflow-wrap: anywhere;
     white-space: normal;
     vertical-align: top;
@@ -346,6 +376,21 @@
     [data-collapse-below="sm"] [data-slot="table-cell"] * {
       white-space: normal;
     }
+
+    /* SEVEN columns and up — the wide-collection floor tier (gh#262). Percent shares are
+     * guaranteed to sum past 100% here and fixed layout would normalize them into sub-glyph
+     * columns, so every column (the unmarked free-text one included) takes its rem floor
+     * instead; the over-constrained table grows past 100% and its wrapper scrolls. Up to six
+     * columns this rule never matches and the percent tier above keeps the canonical queues
+     * scroll-free — the preset's documented column-count ceiling. */
+    [data-collapse-below="sm"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-floor
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-floor);
+      --table-action-collection-flex-width: var(--table-action-collection-flex-width-floor);
+    }
   }
 
   @container ui-table-collection (width < 48rem) {
@@ -371,6 +416,21 @@
     [data-collapse-below="md"] [data-slot="table-cell"] * {
       white-space: normal;
     }
+
+    /* SEVEN columns and up — the wide-collection floor tier (gh#262). Percent shares are
+     * guaranteed to sum past 100% here and fixed layout would normalize them into sub-glyph
+     * columns, so every column (the unmarked free-text one included) takes its rem floor
+     * instead; the over-constrained table grows past 100% and its wrapper scrolls. Up to six
+     * columns this rule never matches and the percent tier above keeps the canonical queues
+     * scroll-free — the preset's documented column-count ceiling. */
+    [data-collapse-below="md"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-floor
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-floor);
+      --table-action-collection-flex-width: var(--table-action-collection-flex-width-floor);
+    }
   }
 
   @container ui-table-collection (width < 64rem) {
@@ -396,6 +456,21 @@
     [data-collapse-below="lg"] [data-slot="table-cell"] * {
       white-space: normal;
     }
+
+    /* SEVEN columns and up — the wide-collection floor tier (gh#262). Percent shares are
+     * guaranteed to sum past 100% here and fixed layout would normalize them into sub-glyph
+     * columns, so every column (the unmarked free-text one included) takes its rem floor
+     * instead; the over-constrained table grows past 100% and its wrapper scrolls. Up to six
+     * columns this rule never matches and the percent tier above keeps the canonical queues
+     * scroll-free — the preset's documented column-count ceiling. */
+    [data-collapse-below="lg"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-floor
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-floor);
+      --table-action-collection-flex-width: var(--table-action-collection-flex-width-floor);
+    }
   }
 
   @container ui-table-collection (width < 80rem) {
@@ -421,5 +496,20 @@
     [data-collapse-below="xl"] [data-slot="table-cell"] * {
       white-space: normal;
     }
+
+    /* SEVEN columns and up — the wide-collection floor tier (gh#262). Percent shares are
+     * guaranteed to sum past 100% here and fixed layout would normalize them into sub-glyph
+     * columns, so every column (the unmarked free-text one included) takes its rem floor
+     * instead; the over-constrained table grows past 100% and its wrapper scrolls. Up to six
+     * columns this rule never matches and the percent tier above keeps the canonical queues
+     * scroll-free — the preset's documented column-count ceiling. */
+    [data-collapse-below="xl"] [data-slot="table"]:has([data-slot="table-head"]:nth-child(7)) {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-floor);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-floor
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-floor);
+      --table-action-collection-flex-width: var(--table-action-collection-flex-width-floor);
+    }
   }
 }

package/dist/styles/text-layout.css

@@ -107,6 +107,19 @@
      * having to add `min-w-0` — the documented flex-truncate idiom (issue #114). */
     min-width: 0;
   }
+  /* Multi-line clamp (`clamp` prop, issue #261) — the token-owned line-clamp so consumers never
+   * write a page-local `line-clamp-N` utility. Visual-only: the full text stays in the DOM and
+   * the accessible name. `--text-clamp` is set inline by the component from the prop value. */
+  [data-slot="text"][data-clamp] {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--text-clamp, 2);
+    line-clamp: var(--text-clamp, 2);
+    overflow: hidden;
+    /* Same flex-shrink contract as truncate (issue #114): clamps inside a flex row without
+     * the consumer adding `min-w-0`. */
+    min-width: 0;
+  }
   [data-slot="text"][data-tabular] {
     font-variant-numeric: tabular-nums;
   }

package/dist/tokens/base.css

@@ -13,6 +13,7 @@
 @import "./components/descriptions.css";
 @import "./components/table.css";
 @import "./components/feedback.css";
+@import "./components/banner.css";
 @import "./components/sheet.css";
 @import "./components/badge.css";
 @import "./components/navigation.css";

package/dist/tokens/components/badge.css

@@ -7,4 +7,9 @@
   /* Small-by-design (badge/pill/counter). A knob (rule #45) so a service can
    * re-tune badge text without touching the global --font-size-xs step. */
   --badge-font-size: var(--font-size-xs);
+  /* Companion to --badge-font-size (gh#260). The cva's old `text-xs` utility also set
+   * line-height via Tailwind's default `--text-xs--line-height: calc(1 / 0.75)` (the theme
+   * remaps --text-xs but never that companion). Same unitless ratio here keeps the default
+   * badge pixel-identical now that badge-layout.css owns the type metrics. */
+  --badge-line-height: calc(1 / 0.75);
 }

package/dist/tokens/components/banner.css

@@ -0,0 +1,16 @@
+/* Banner — the full-bleed attention strip (<Banner> = Alert variant="banner").
+ * Colour stays with the alert tone rules; these tokens own ONLY the strip geometry,
+ * so a service retunes the banner once here instead of forking alert-layout.css
+ * (rule #45 — every service-tunable constant gets a knob). */
+
+:root {
+  /* Square corners — a strip spans its container edge-to-edge, so it carries no radius. */
+  --banner-radius: 0;
+  /* The strip keeps a single hairline block-end rule (tone-coloured via the alert
+   * border rules); inline/block-start edges are open so it reads as part of the frame. */
+  --banner-border-width: 1px;
+  /* Strip inset. Block is denser than the inline Alert card; inline defaults to the
+   * page gutter so banner text aligns with page content under AppShell/PageContainer. */
+  --banner-space-inset-block: var(--space-3);
+  --banner-space-inset-inline: var(--space-page-active-x, var(--space-6));
+}

package/dist/tokens/components/navigation.css

@@ -65,29 +65,14 @@
    * (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;
+  /* FilterBar typed model (gh#258) — token-owned geometry so every list page gets the SAME
+   * search width, filter width, chip rhythm and section stacking without page-local CSS.
+   * All are rule-#45 knobs: a service theme retunes them once, props/className override per
+   * instance. Below 640px the strip stacks (search/filters full-width); the widths apply from
+   * the 640px breakpoint up, always clamped by min(100%, …) so a narrow container never
+   * overflows at 390px with long JA/EN/VI labels. */
+  --filter-bar-search-width: 20rem;
+  --filter-bar-filter-width: var(--filter-picker-width-md);
+  --filter-bar-chip-gap: var(--space-2);
+  --filter-bar-section-gap: var(--space-2);
 }

package/dist/tokens/components/shell.css

@@ -183,9 +183,11 @@
   --auth-shell-login-main-padding-block-end: 1rem;
   --auth-shell-login-identity-slot-block-size: 7rem;
   --auth-shell-login-card-stack-gap: 1.25rem;
-  --auth-shell-login-card-padding-block-compact: calc(
-    var(--auth-shell-compact-card-inset) + var(--control-border-width) + var(--control-border-width)
-  );
+  /* Canonical SCR-001 block inset is a FLAT 24px — the same measure as the inline inset. The card
+   * draws its own 1px border and a border-box rect already contains it, so the former
+   * `+ 2 x --control-border-width` double-counted the border and pushed the passkey CTA to y=390
+   * instead of the canonical y=388 (gh#263). */
+  --auth-shell-login-card-padding-block-compact: var(--auth-shell-compact-card-inset);
 
   /* Device-authorization preset — 380px card measure, 15px block · 5px inline mobile gutter
    * (at a 390px viewport the card is x=5px, width=380px). */
@@ -256,14 +258,19 @@
   --auth-shell-registration-main-padding-block-end-mobile: 2rem;
   --auth-shell-registration-card-stack-gap: 1.25rem;
   /* Fixed identity track, the same 112px `login` proved (gh#237). Without it the card anchor moves
-   * with the title/requester line count — measured here at 82.69px for one wrapped requester — so
-   * the canonical y above would hold for exactly one copy length and drift for every other. The
-   * slot absorbs absent / one-line / two-line identity content instead. */
+   * with the title/requester line count, so the canonical y above would hold for exactly one copy
+   * length and drift for every other. The slot absorbs absent / one-line / two-line identity
+   * content instead. */
   --auth-shell-registration-identity-slot-block-size: 7rem;
 
-  /* Labelled auth divider geometry. */
+  /* Labelled auth divider geometry. The canonical SCR-001 divider row is 19px tall at the 11px
+   * label (the artboard label inherits the page's line-height instead of collapsing to a 1.0 line
+   * box). 19/11 pins the row at exactly 19px and keeps it proportional if a service retunes the
+   * label font-size. The previous hardcoded `line-height: 1` rendered an 11px row, sitting the
+   * whole lower half of the Login card 8px high (gh#263). */
   --auth-shell-divider-gap: 0.625rem;
   --auth-shell-divider-label-font-size: 0.6875rem;
+  --auth-shell-divider-label-line-height: calc(19 / 11);
   --auth-shell-divider-rule-color: var(--border);
   --auth-shell-divider-label-color: var(--muted-foreground);
   --auth-identity-gap: 0.375rem;
@@ -281,8 +288,12 @@
   --auth-footer-text-font-size: 0.6875rem;
   --auth-stack-gap: var(--space-3);
   --auth-shell-field-label-gap: var(--space-1);
-  --auth-shell-field-label-font-size: var(--font-size-xs);
-  --auth-shell-field-label-line-height: 1.25;
+  /* Canonical SCR-001 field label: a LITERAL 12px (the golden-ratio --font-size-xs ≈ 12.47px would
+   * drift the 18px line box to 18.7px and push the email input off its y=489 anchor) with a 1.5
+   * line box = 18px. The former var(--font-size-xs)/1.25 pair rendered a 14px box, sitting the
+   * email input 4px high (gh#263). */
+  --auth-shell-field-label-font-size: 0.75rem;
+  --auth-shell-field-label-line-height: 1.5;
 
   /* CenteredShell — authenticated, no-sidebar, centred-column page shell (hosted-ID "My Page",
    * account, standalone settings). The bar mirrors AppShell's `.app-topbar` chrome (fixed height +

package/dist/tokens/components/table.css

@@ -59,11 +59,51 @@
   --table-action-collection-secondary-width: 22%; /* target / resource */
   --table-action-collection-meta-width: 12%; /* timestamps, ids — lowest priority */
   --table-action-collection-actions-width: 3.5rem; /* row-action affordance, never clipped */
-  /* Compact tier, applied below the collapse step (the 390px acceptance frame). */
+  /* Compact tier, applied below the collapse step (the 390px acceptance frame). Percentages,
+   * like the desktop tier: while the priority ratios FIT (the canonical queues up to the
+   * six-column budget below), they keep the table filling its container edge-to-edge with no
+   * horizontal scroll — the gh#253 acceptance. */
   --table-action-collection-primary-width-compact: 24%;
   --table-action-collection-secondary-width-compact: 22%;
   --table-action-collection-meta-width-compact: 20%;
   --table-action-collection-actions-width-compact: 2.75rem;
+  /* Wide-collection FLOORS — the compact measures from SEVEN columns up (gh#262).
+   *
+   * Percentage measures stop working once a queue carries enough columns for the shares to sum
+   * past 100%: `table-layout: fixed` NORMALIZES them back into the table's specified width, so at
+   * ~10 columns on a 390px frame a "24%" column really renders at a tenth of the frame, every
+   * column drops below one CJK glyph, and JA headers shred into a vertical one-character-per-line
+   * column (the failure mode WCAG 2.2 SC 1.4.10 Reflow exists to prevent). Cell `min-inline-size`
+   * and `max(%, length)` widths are equally inert in the fixed algorithm, and the intrinsic
+   * (max-content) size of a fixed-layout table is degenerate — all verified in Chromium — so a
+   * LENGTH is the only floor an engine respects: length columns are never squeezed, and when
+   * their sum outgrows the container the table's used width grows past its specified 100%
+   * (CSS 2.1 §17.5.2.1) into the keyboard-reachable overflow-x wrapper, which scrolls.
+   * ONE-dimensional scrolling of a data table is explicitly permitted by SC 1.4.10;
+   * one-character-per-line is not readable at all.
+   *
+   * The stylesheet switches tiers on a COLUMN BUDGET, not on width: up to six columns the
+   * percentage ratios above still resolve to readable measures at every acceptance artboard
+   * (320 · 375 · 390), so the canonical five-column approval queue keeps its documented
+   * scroll-free 390 frame byte-for-byte; from seven columns the shares are guaranteed to
+   * over-sum and the floors + intentional scroll take over. That budget is the preset's
+   * documented column-count ceiling (gh#262 expectation 3): past six columns the preset stops
+   * compressing and starts scrolling.
+   *
+   * Units are rem, not ch: `ch` tracks the "0" glyph (~half a CJK em), so a ch-denominated floor
+   * would silently halve for the JA copy these floors exist to protect. At the compact type tier
+   * (font-size-xs = 0.75rem, space-2 inline padding each side) the 5rem meta floor keeps a ~4rem
+   * text measure = 5 full-width glyphs per line — a JA header wraps to two readable lines, never
+   * a character column. */
+  --table-action-collection-primary-width-floor: 6rem;
+  --table-action-collection-secondary-width-floor: 5.5rem;
+  --table-action-collection-meta-width-floor: 5rem;
+  /* Floor for a column with NO `priority` (the free-text column, `auto` up to the budget). It
+   * cannot stay `auto` past the budget: once the marked columns over-constrain the table, the
+   * fixed algorithm hands an auto column exactly 0px (verified in Chromium) — the same
+   * shredding, moved to the free-text column. The actions floor is simply
+   * `--table-action-collection-actions-width-compact`, already an absolute measure. */
+  --table-action-collection-flex-width-floor: 5rem;
   --table-action-collection-font-size-compact: var(--font-size-xs);
   --table-action-collection-cell-space-x-compact: var(--space-2);
   --table-action-collection-cell-padding-y-compact: var(--space-2);