@godxjp/ui 18.9.0 → 18.10.0

package/dist/styles/base.css

@@ -28,34 +28,6 @@
  * ───────────────────────────────────────────────────────────────────────── */
 @import "tailwindcss";
 
-/* ── THE LAYER CONTRACT (gh#412) ───────────────────────────────────────────
- * `@import "tailwindcss"` establishes `theme, base, components, utilities`. Everything this
- * package styles lives in `@layer components`, which is EARLIER than `utilities` — so a Tailwind
- * utility a component itself emits silently outranks the package rule that is supposed to own the
- * same property, no matter how specific that rule is. That is not a specificity bug you can fix
- * with another selector; layer order beats specificity outright.
- *
- * It shipped as a real defect: `<table class="… text-sm">` (utilities) vs the collection preset's
- * `font-size: var(--table-action-collection-font-size-compact)` (components) — the compact type
- * tier never applied at ANY width, so the documented token was dead and a 5–6 character Japanese
- * label could not fit the narrow-frame column measure (WCAG 2.2 SC 1.4.10, and only ever visible
- * in Japanese). Two independent consumers reported it.
- *
- * `godxjp-ui-responsive` is declared HERE, after Tailwind, so it is the LAST layer and outranks
- * `utilities`. It is reserved for one thing: RESPONSIVE RE-POINTS — the container/media blocks
- * that must win over a component's own static utility for the layout contract to hold. Nothing
- * static belongs in it; a rule that does not sit inside a `@container`/`@media` query goes in
- * `@layer components` like everything else.
- *
- * What this layer canNOT do — and the rule consumers must follow: an UNLAYERED consumer rule
- * outranks EVERY layer, including this one. So app CSS must theme this package through TOKENS on
- * a wrapper, never by writing its own selectors against `[data-slot]` / `[data-priority]`
- * elements. A consumer that does write such a rule must put it in a layer
- * (`@layer components { … }`), or it will silently kill the responsive re-points the package
- * makes — a column measured to 0px and wrapped one character per line is what that looks like.
- * See docs/TOKENS.md · "The layer contract". */
-@layer godxjp-ui-responsive;
-
 /* Per-language font wiring — token-only, NO hardcoded faces. Each locale reads
  * an OPTIONAL per-lang slot token (empty by default) and falls back to the
  * base sans. Consumers switch a locale's face by setting its slot, e.g.

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;