@godxjp/ui 18.5.0 → 18.6.0

package/dist/styles/data-display-layout.css

@@ -18,6 +18,18 @@
     font-weight: var(--font-weight-medium);
   }
 
+  /* Entity-header mark — `<Avatar shape="square">` (gh#249). Opt-in ONLY: without the attribute the
+   * avatar above is untouched. Geometry and colour are token-owned (rule #45); the brand fill is
+   * handed down through --avatar-background so the fallback slot picks it up with no extra rule,
+   * and a service that only wants a neutral square overrides --avatar-square-background. */
+  .ui-avatar[data-shape="square"] {
+    inline-size: var(--avatar-square-size);
+    block-size: var(--avatar-square-size);
+    border-radius: var(--avatar-square-radius);
+    --avatar-background: var(--avatar-square-background, hsl(var(--primary)));
+    color: var(--avatar-square-foreground, hsl(var(--primary-foreground)));
+  }
+
   .ui-avatar-image {
     width: 100%;
     height: 100%;
@@ -508,6 +520,20 @@
   [data-slot="list-row"][data-overflow="wrap"] [data-slot="list-row-body"] {
     overflow-wrap: anywhere;
   }
+  /* `density="compact"` (#246) — the compact inline-actions geometry: tighter block padding and
+   * column gap plus a LOWER body threshold, so a 36px avatar, the title/description and one or two
+   * small trailing Buttons stay inline inside the canonical 326px content column at 390px. It only
+   * LOWERS thresholds; the #224 overflow contract above is untouched (the row still wraps, the body
+   * is still clamped with min(…, 100%)), so a compact row can never widen the page root. */
+  [data-slot="list-row"][data-density="compact"] {
+    gap: var(--list-row-compact-gap, var(--space-2));
+    padding: var(--list-row-compact-padding-y, var(--space-2))
+      var(--list-row-compact-padding-x, var(--list-row-padding-x));
+  }
+  [data-slot="list-row"][data-density="compact"] [data-slot="list-row-body"] {
+    min-inline-size: min(var(--list-row-compact-body-min-width, 6rem), 100%);
+    flex-basis: var(--list-row-compact-body-min-width, 6rem);
+  }
   [data-slot="list-row-trailing"] {
     display: inline-flex;
     max-inline-size: 100%;

package/dist/styles/layout.css

@@ -411,6 +411,29 @@
     max-width: 42rem;
   }
 
+  /* `measure` (gh#245 / gh#247) — a bounded page measure axis ORTHOGONAL to `variant`, so the
+   * quiet `ghost` chrome and a narrow/medium measure finally compose (they used to be the same
+   * variant axis, which is exactly why a notification feed could not have both). Unlike
+   * `variant="narrow"` — which caps only the body and leaves the header `extra` action stranded
+   * at the page edge — this caps the HEADER and the BODY to ONE shared measure, so the action
+   * ends on the same edge as the body surface. Both elements carry the identical page gutters,
+   * so their content edges line up exactly at both ends.
+   *
+   * `measure="default"` is the inert default: it emits `data-measure="default"`, which matches NO
+   * rule here, so every existing page renders byte-identically (the gh#231 `data-layout="stack"`
+   * precedent). The cap is a max, never a width — below it the page stays fluid, so 390px keeps
+   * the full compact-gutter surface. The footer is deliberately NOT capped: its border/background
+   * is page-level chrome that must span the page when `stickyFooter` pins it. */
+  .ui-page-container[data-measure="narrow"] .ui-page-header,
+  .ui-page-container[data-measure="narrow"] .ui-page-body {
+    max-inline-size: var(--page-measure-narrow);
+  }
+
+  .ui-page-container[data-measure="medium"] .ui-page-header,
+  .ui-page-container[data-measure="medium"] .ui-page-body {
+    max-inline-size: var(--page-measure-medium);
+  }
+
   /* flush = full-bleed body (DataTable); header/footer keep their inset. */
   .ui-page-container--flush .ui-page-body {
     padding-inline-start: 0;
@@ -711,6 +734,20 @@
   }
 }
 
+@layer components {
+  .ui-page-container[data-preset="admin-collection"] {
+    --control-height: var(--admin-collection-control-height);
+    --space-section-active: var(--admin-collection-section-gap);
+    --filter-bar-padding-y: var(--admin-collection-toolbar-padding-y);
+    --table-row-height: var(--admin-collection-table-row-height);
+    --table-cell-padding-y: var(--admin-collection-table-cell-padding-y);
+  }
+
+  .ui-page-container[data-preset="admin-collection"] .ui-toolbar .ui-search-input {
+    inline-size: min(100%, var(--admin-collection-search-measure));
+  }
+}
+
 @layer components {
   /* Pagination is ONE horizontal row and never wraps to a second desktop line (gh#153 — the old
    * `flex-wrap: wrap` split the range / size-changer / page strip across rows). The number strip
@@ -1122,3 +1159,65 @@
     }
   }
 }
+
+@layer components {
+  /* ── Flex responsive region visibility (gh#252) ──────────────────────────────────────────────
+   * `hideBelow` / `hideFrom` are the ONE public way to drop a layout region at a breakpoint step.
+   * Without them a public header cannot hide its anchor navigation below the tablet step, or show
+   * a compact-only affordance, without a page-local media query — which is exactly the API-first
+   * violation gh#252 reports. The steps are the package's canonical breakpoint scale, the same
+   * values `--master-detail-collapse-below` uses (sm 40rem · md 48rem · lg 64rem · xl 80rem); a
+   * media query cannot read a `var()`, so the step values are the tokenized scale written out.
+   *
+   * Both props default to `undefined`, so NO `data-hide-*` attribute is emitted and none of these
+   * selectors can match — every existing Flex is untouched (the gh#231 inert-default contract).
+   * `display: none` removes the region from the a11y tree too, which is the point: the destination
+   * must stay reachable from another region (the footer nav) at that width. */
+  @media (width < 40rem) {
+    .ui-flex[data-hide-below="sm"] {
+      display: none;
+    }
+  }
+
+  @media (width < 48rem) {
+    .ui-flex[data-hide-below="md"] {
+      display: none;
+    }
+  }
+
+  @media (width < 64rem) {
+    .ui-flex[data-hide-below="lg"] {
+      display: none;
+    }
+  }
+
+  @media (width < 80rem) {
+    .ui-flex[data-hide-below="xl"] {
+      display: none;
+    }
+  }
+
+  @media (width >= 40rem) {
+    .ui-flex[data-hide-from="sm"] {
+      display: none;
+    }
+  }
+
+  @media (width >= 48rem) {
+    .ui-flex[data-hide-from="md"] {
+      display: none;
+    }
+  }
+
+  @media (width >= 64rem) {
+    .ui-flex[data-hide-from="lg"] {
+      display: none;
+    }
+  }
+
+  @media (width >= 80rem) {
+    .ui-flex[data-hide-from="xl"] {
+      display: none;
+    }
+  }
+}

package/dist/styles/logo-layout.css

@@ -39,19 +39,52 @@
     font-size: var(--logo-font-size-lg);
   }
 
-  /* Identity fills — role defaults live HERE (call site), not on :root, so a scoped `.dark` /
-   * `[data-tenant]` override of --success re-resolves (docs/TOKENS.md · role-mirror knobs). */
+  /* Identity fills — the IDENTITY role --brand (canonical GoDX emerald), NOT the --success STATUS
+   * green: `tone="success"` names the semantic slot, not the status role, and a badge/progress
+   * green must never drag the product mark with it (gh#250). Role defaults live HERE (call site),
+   * not on :root, so a scoped `.dark` / `[data-tenant]` override of --brand re-resolves
+   * (docs/TOKENS.md · role-mirror knobs).
+   *
+   * The INK is --logo-identity-foreground, NOT --brand-foreground: this branch sets caller-supplied
+   * TEXT on the fill, so WCAG 2.2 SC 1.4.3 applies at 4.5:1 (14px bold is not "large text"), while
+   * --brand-foreground is the artwork KNOCKOUT colour that tracks --background and only owes 3:1 as
+   * non-text (SC 1.4.11). Knockout white on the emerald measured 3.67:1 — an AA failure on every
+   * boxed `tone="success"` glyph. See src/tokens/components/logo.css. */
   .ui-logo[data-tone="success"] {
-    background: hsl(var(--logo-success-background, var(--success)));
-    color: hsl(var(--logo-success-foreground, var(--success-foreground)));
+    background: hsl(var(--logo-success-background, var(--brand)));
+    color: hsl(var(--logo-success-foreground, var(--logo-identity-foreground)));
   }
 
+  /* The identity mark honours `size` like every other Logo branch. The godx box has its OWN tier
+   * scale (--logo-godx-size-*) because the artwork is a horizontal capsule in a square viewBox and
+   * needs ~+0.25rem over the filled glyph box to read at the same weight — but a public `size` prop
+   * that renders identically at xs and lg is a silent no-op, and the lockup already scaled its
+   * wordmark per tier, so a frozen mark broke the mark↔wordmark proportion at `size="lg"`.
+   * These are `[data-mark][data-size]` (0,3,0) so they beat BOTH `.ui-logo[data-size]` and the
+   * `[data-mark="godx"]` base regardless of source order — the ordering bug that hid `size` here.
+   * --logo-godx-size stays the documented PIN: unset by default, and set once by a service theme it
+   * wins at every tier (call-site default, docs/TOKENS.md). */
   .ui-logo[data-mark="godx"] {
-    width: var(--logo-godx-size);
-    height: var(--logo-godx-size);
+    width: var(--logo-godx-size, var(--logo-godx-size-md));
+    height: var(--logo-godx-size, var(--logo-godx-size-md));
     border-radius: 0;
     background: transparent;
-    color: hsl(var(--logo-godx-color, var(--success)));
+    color: hsl(var(--logo-godx-color, var(--brand)));
+  }
+
+  .ui-logo[data-mark="godx"][data-size="xs"] {
+    width: var(--logo-godx-size, var(--logo-godx-size-xs));
+    height: var(--logo-godx-size, var(--logo-godx-size-xs));
+  }
+
+  .ui-logo[data-mark="godx"][data-size="sm"] {
+    width: var(--logo-godx-size, var(--logo-godx-size-sm));
+    height: var(--logo-godx-size, var(--logo-godx-size-sm));
+  }
+
+  .ui-logo[data-mark="godx"][data-size="lg"] {
+    width: var(--logo-godx-size, var(--logo-godx-size-lg));
+    height: var(--logo-godx-size, var(--logo-godx-size-lg));
   }
 
   .ui-logo[data-mark="godx"] [data-slot="logo-artwork"] {
@@ -95,9 +128,9 @@
     font-size: var(--logo-wordmark-font-size-lg);
   }
 
-  /* Canonical brand-green GoDX wordmark — the identity role, independent of --primary. */
+  /* Canonical GoDX wordmark — the --brand IDENTITY role, independent of --primary AND of --success. */
   .ui-logo-lockup[data-mark="godx"] .ui-logo-wordmark,
   .ui-logo-lockup[data-tone="success"] .ui-logo-wordmark {
-    color: hsl(var(--logo-wordmark-color, var(--logo-godx-color, var(--success))));
+    color: hsl(var(--logo-wordmark-color, var(--logo-godx-color, var(--brand))));
   }
 }

package/dist/styles/navigation-layout.css

@@ -49,6 +49,45 @@
     scrollbar-width: thin;
   }
 
+  /* Tabs `line` — the ACTIVE decoration is a token-owned bar and nothing else (gh#248). It is
+   * deliberately painted here (not as an `after:*` utility) so it stays independent of the
+   * `:focus-visible` ring utilities: "selected" and "keyboard-focused" are two different states and
+   * must remain visually distinct (WCAG 2.4.7). Logical insets keep the vertical rail on the
+   * inline-END edge under dir="rtl" too. */
+  [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
+    content: "";
+    position: absolute;
+    background: var(--tabs-indicator-background, hsl(var(--primary)));
+    opacity: 0;
+    transition: opacity var(--duration-fast) var(--ease-standard);
+    pointer-events: none;
+  }
+
+  [data-slot="tabs-list"][data-variant="line"][data-orientation="horizontal"]
+    [data-slot="tabs-trigger"]::after {
+    inset-inline: 0;
+    inset-block-end: calc(-1 * var(--tabs-indicator-offset));
+    block-size: var(--tabs-indicator-size);
+  }
+
+  [data-slot="tabs-list"][data-variant="line"][data-orientation="vertical"]
+    [data-slot="tabs-trigger"]::after {
+    inset-block: 0;
+    inset-inline-end: calc(-1 * var(--tabs-indicator-offset));
+    inline-size: var(--tabs-indicator-size);
+  }
+
+  [data-slot="tabs-list"][data-variant="line"]
+    [data-slot="tabs-trigger"][data-state="active"]::after {
+    opacity: 1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"]::after {
+      transition: none;
+    }
+  }
+
   .ui-context-menu-content {
     z-index: 50;
     min-width: 10rem;
@@ -320,3 +359,73 @@
     transform-origin: center;
   }
 }
+
+@layer components {
+  .ui-steps-inline {
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: var(--steps-inline-gap);
+    font-size: var(--steps-inline-font-size);
+    line-height: var(--line-height-tight);
+  }
+
+  .ui-steps-inline-item {
+    display: inline-flex;
+    min-width: 0;
+    flex: 0 1 auto;
+    align-items: center;
+    gap: var(--steps-inline-gap);
+    text-align: start;
+  }
+
+  .ui-steps-inline-control {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--steps-inline-item-gap);
+    border-radius: var(--radius-sm);
+    outline: none;
+  }
+
+  button.ui-steps-inline-control:focus-visible {
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+  }
+
+  .ui-steps-inline-index {
+    flex: none;
+    font-variant-numeric: tabular-nums;
+    font-weight: var(--font-weight-bold);
+  }
+
+  .ui-steps-inline-title {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-steps-inline-item[data-status="finish"] .ui-steps-inline-control {
+    color: hsl(var(--primary));
+  }
+
+  .ui-steps-inline-item[data-status="process"] .ui-steps-inline-control {
+    color: hsl(var(--foreground));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-steps-inline-item[data-status="error"] .ui-steps-inline-control {
+    color: hsl(var(--destructive));
+  }
+
+  .ui-steps-inline-item[data-status="wait"] .ui-steps-inline-control,
+  .ui-steps-inline-separator {
+    color: hsl(var(--muted-foreground));
+  }
+
+  .ui-steps-inline-separator {
+    width: var(--steps-inline-separator-size);
+    height: var(--steps-inline-separator-size);
+    flex: none;
+  }
+}