@godxjp/ui 18.8.0 → 18.10.0

package/dist/styles/card-layout.css

@@ -51,16 +51,9 @@
     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: 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)));
+    border-color: hsl(var(--primary));
+    box-shadow: 0 0 0 1px hsl(var(--primary));
   }
 
   /* ── Density — override the shell inset/body tokens ──────────────────────
@@ -79,39 +72,33 @@
     --card-space-body-y: var(--space-5);
   }
 
-  /* ── 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. */
+  /* ── Accent edge — semantic left stripe (token width), content on shell ─ */
+  [data-slot="card"][data-accent] {
+    border-inline-start-width: var(--card-accent-rail-width);
+  }
+
   [data-slot="card"][data-accent="primary"] {
-    --card-accent-color: hsl(var(--primary));
+    border-inline-start-color: hsl(var(--primary));
   }
 
   [data-slot="card"][data-accent="success"] {
-    --card-accent-color: hsl(var(--success));
+    border-inline-start-color: hsl(var(--success));
   }
 
   [data-slot="card"][data-accent="warning"] {
-    --card-accent-color: hsl(var(--warning));
+    border-inline-start-color: hsl(var(--warning));
   }
 
   [data-slot="card"][data-accent="info"] {
-    --card-accent-color: hsl(var(--info));
+    border-inline-start-color: hsl(var(--info));
   }
 
   [data-slot="card"][data-accent="attention"] {
-    --card-accent-color: hsl(var(--attention));
+    border-inline-start-color: hsl(var(--attention));
   }
 
   [data-slot="card"][data-accent="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);
+    border-inline-start-color: hsl(var(--destructive));
   }
 
   [data-slot="card"][data-accent] > [data-slot="card-header"],
@@ -120,29 +107,6 @@
     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,18 +714,8 @@
 .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;
 }
@@ -736,8 +726,8 @@
 .ui-otp-slot {
   position: relative;
   display: flex;
-  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)));
+  width: var(--otp-slot-size, var(--control-height));
+  height: 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,22 +30,6 @@
     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

@@ -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-title-row > .ui-page-title {
     min-inline-size: 0;
   }
 
-  .ui-page-header-meta {
+  .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
@@ -953,84 +941,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 +973,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/navigation-layout.css

@@ -394,15 +394,10 @@
     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(--steps-inline-index-font-weight);
-    color: var(--steps-inline-index-color, currentColor);
+    font-weight: var(--font-weight-bold);
   }
 
   .ui-steps-inline-title {
@@ -423,7 +418,8 @@
     color: hsl(var(--destructive));
   }
 
-  .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control {
+  .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control,
+  .ui-steps-inline-separator {
     color: hsl(var(--muted-foreground));
   }
 
@@ -431,6 +427,5 @@
     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,14 +192,9 @@
     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"] {
@@ -343,12 +338,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 +388,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 +427,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)
@@ -524,11 +528,7 @@
   }
 
   /* AppShell-owned mobile drawer trigger — hidden on desktop, shown once the docked sidebar
-   * 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. */
+   * collapses out below `lg` (gh#165). 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

@@ -284,8 +284,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;
@@ -331,6 +346,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) {
@@ -352,6 +382,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) {
@@ -373,6 +418,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) {
@@ -394,5 +454,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);
 }