@godxjp/ui 18.4.0 → 18.5.0

package/dist/styles/layout.css

@@ -195,6 +195,102 @@
     min-width: 0;
   }
 
+  /* MasterDetail owns its tracks AND its collapse threshold — both token-driven (gh#223).
+   *
+   * WHY FLEX AND NOT `@container (min-width: …)`: a media/container-query CONDITION cannot read a
+   * `var()` — it is resolved before custom properties, so a tokenised breakpoint is impossible
+   * there (the reason the first cut hard-coded `40rem`, violating rule #45). The flex threshold
+   * below ("Holy Albatross") puts the breakpoint in a `calc()`, where a `var()` DOES resolve, so
+   * `--master-detail-collapse-below` is a genuine knob a service theme can retune once globally.
+   *
+   * How it reads: the fluid region's flex-basis is `(threshold - 100%) * 999`, where 100% is the
+   * composition's own inline size (so, like the old container query, the decision comes from the
+   * space available to the layout — never the viewport).
+   *   · width < threshold → a huge positive basis → each region takes a whole flex line and
+   *     shrinks to it: master stacked above detail, both full width.
+   *   · width ≥ threshold → the calc goes negative and is clamped to 0 → one line: the fluid
+   *     region absorbs the free space while the rail keeps its token width (`max()` keeps the
+   *     rail's basis at the preset because a negative operand can never win a max).
+   *
+   * `data-rail` picks WHICH region is the fixed rail. Default `detail` = the canonical
+   * "fluid list + fixed detail rail" (1fr / 320px) composition; `master` puts the fixed rail on
+   * the leading edge for a category/navigator list. DOM order is always master → detail, so the
+   * stacked order is list-then-detail either way, and the flex row follows the writing direction
+   * (RTL-safe without a single physical property). */
+  .ui-master-detail {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--master-detail-gap);
+    --master-detail-rail-size: var(--master-detail-rail-standard);
+  }
+
+  .ui-master-detail[data-rail-width="compact"] {
+    --master-detail-rail-size: var(--master-detail-rail-compact);
+  }
+
+  /* Per-instance override of the token threshold (theme sets it globally, prop overrides here). */
+  .ui-master-detail[data-collapse-below="false"] {
+    --master-detail-collapse-below: 0px;
+  }
+  .ui-master-detail[data-collapse-below="sm"] {
+    --master-detail-collapse-below: 40rem;
+  }
+  .ui-master-detail[data-collapse-below="md"] {
+    --master-detail-collapse-below: 48rem;
+  }
+  .ui-master-detail[data-collapse-below="lg"] {
+    --master-detail-collapse-below: 64rem;
+  }
+  .ui-master-detail[data-collapse-below="xl"] {
+    --master-detail-collapse-below: 80rem;
+  }
+
+  .ui-master-detail-master,
+  .ui-master-detail-detail {
+    min-inline-size: 0;
+  }
+
+  /* The fluid region. */
+  .ui-master-detail[data-rail="detail"] > .ui-master-detail-master,
+  .ui-master-detail[data-rail="master"] > .ui-master-detail-detail {
+    flex: 1 1 calc((var(--master-detail-collapse-below) - 100%) * 999);
+  }
+
+  /* The fixed rail. */
+  .ui-master-detail[data-rail="detail"] > .ui-master-detail-detail,
+  .ui-master-detail[data-rail="master"] > .ui-master-detail-master {
+    flex: 0 1
+      max(var(--master-detail-rail-size), calc((var(--master-detail-collapse-below) - 100%) * 999));
+  }
+
+  /* Bounded master viewport (gh#231) — OPT-IN via `masterViewport`. `auto` (the default) emits no
+   * bound at all, so an existing composition renders byte-identically; the two presets cap the
+   * collection's BLOCK size with a token and scroll it INSIDE the region, which is what keeps a
+   * long real collection from pushing the detail thousands of pixels below the fold once the
+   * layout stacks. Block axis only — the inline axis stays owned by the flex threshold above, so
+   * the bound is writing-direction agnostic (RTL-safe).
+   *
+   * A11y: the region carries tabIndex={0} in this mode (see master-detail.tsx) so the scroll
+   * container is reachable and scrollable by keyboard alone, and the inset below reserves room
+   * for a focused row's focus ring — an overflow container clips BOTH axes, so a ring drawn at
+   * the region's edge would otherwise be cut. Focus is never trapped: the region is a plain tab
+   * stop that Tab/Shift+Tab leave normally. */
+  .ui-master-detail[data-master-viewport="compact"] > .ui-master-detail-master,
+  .ui-master-detail[data-master-viewport="standard"] > .ui-master-detail-master {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--master-detail-master-viewport-inset);
+    scroll-padding-block: var(--master-detail-master-viewport-inset);
+  }
+
+  .ui-master-detail[data-master-viewport="compact"] > .ui-master-detail-master {
+    max-block-size: var(--master-detail-master-viewport-compact);
+  }
+
+  .ui-master-detail[data-master-viewport="standard"] > .ui-master-detail-master {
+    max-block-size: var(--master-detail-master-viewport-standard);
+  }
+
   @container responsive-grid (min-width: 40rem) {
     .ui-responsive-grid {
       grid-template-columns: repeat(var(--responsive-grid-sm, 2), minmax(0, 1fr));
@@ -435,6 +531,34 @@
     }
   }
 
+  /* `headerLayout="responsive-inline"` (gh#231): below the 640px step the DEFAULT arrangement
+   * drops `extra` onto its own full-width line under the subtitle, which pushes a compact header
+   * control (a member search, one primary action) off the title row on a 390px screen. This
+   * arrangement keeps it beside the title band at a token-owned measure instead, and lets the
+   * title/subtitle wrap into the space that is left. Scoped to the compact range only, so at
+   * >=640px both arrangements resolve to the identical row below — and a page that never sets
+   * `headerLayout` never matches these rules at all. */
+  @media (max-width: 639.98px) {
+    .ui-page-header[data-layout="responsive-inline"] .ui-page-header-row {
+      flex-direction: row;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: var(--space-inline-md);
+    }
+
+    .ui-page-header[data-layout="responsive-inline"] .ui-page-header-heading {
+      flex: 1 1 auto;
+      min-inline-size: 0;
+    }
+
+    .ui-page-header[data-layout="responsive-inline"] .ui-page-header-extra {
+      flex: 0 0 var(--page-header-extra-measure);
+      inline-size: var(--page-header-extra-measure);
+      max-inline-size: 100%;
+      justify-content: flex-end;
+    }
+  }
+
   @media (min-width: 640px) {
     .ui-page-header-row {
       flex-direction: row;
@@ -550,7 +674,8 @@
   .ui-empty-state-description {
     font-size: var(--font-size-base);
     color: hsl(var(--muted-foreground));
-    max-width: 28rem;
+    /* Measure knob (rule #45) — default 28rem, retunable per service/locale. */
+    max-width: var(--empty-state-description-max-width);
   }
 
   .ui-empty-state-icon {
@@ -755,4 +880,245 @@
     color: hsl(var(--muted-foreground));
     font-size: var(--filter-label-font-size);
   }
+
+  /* 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.
+   * `overflow-x` matches the rest of the package's scroll regions (.ui-data-table-scroll, tabs
+   * list) and the browser already mirrors its scroll origin under `dir="rtl"`; the INSET/margin
+   * properties below stay logical. No `tabindex` is needed — every group holds a focusable
+   * control, so the region is keyboard-reachable (axe scrollable-region-focusable / WCAG 2.1.1). */
+  @media (min-width: 640px) {
+    .ui-toolbar[data-overflow="scroll"] {
+      flex-wrap: nowrap;
+      overflow-x: auto;
+      overscroll-behavior-x: contain;
+      scrollbar-gutter: stable;
+      padding-block-end: var(--filter-bar-scroll-padding-y);
+    }
+
+    .ui-toolbar[data-overflow="scroll"] > .ui-toolbar-group {
+      flex: 0 0 auto;
+    }
+
+    /* The clear action stays parked at the inline end of the VIEWPORT of the scroll region, not at
+     * the end of its scroll width — `margin-inline-start: auto` would push it past the fold and
+     * make "clear all" unreachable without scrolling. */
+    .ui-toolbar[data-overflow="scroll"] > .ui-toolbar-clear {
+      position: sticky;
+      inset-inline-end: 0;
+      margin-inline-start: auto;
+      flex: 0 0 auto;
+      /* Above the scrolling groups, and opaque, so a filter never slides underneath it. */
+      z-index: 1;
+      background: hsl(var(--filter-bar-sticky-background, var(--background)));
+    }
+  }
+
+  /* ── LegalDocumentShell (#222) ─────────────────────────────────────────────────
+   * The long-form legal/policy document surface: a readable, measure-capped document
+   * column with a STICKY table-of-contents rail beside it. Every value reads a
+   * `--legal-document-*` component token, so a service re-tunes the measure, the rail
+   * and the section rhythm from theme.css with zero consumer `.legal-*` CSS.
+   *
+   * It OWNS its query container (`container: legal-document / inline-size`, the SplitPane
+   * precedent — gh#165), so the one-column ⇄ two-column decision comes from the SHELL's
+   * own available width, not the viewport: dropped into a narrow pane on a 1440px screen
+   * it correctly stays single-column.
+   *
+   * DOM order is header → rail (contents) → sections → footer, which is exactly the
+   * mobile reading order; the desktop branch only re-places those boxes into a grid.
+   */
+  .ui-legal-document-scope {
+    container: legal-document / inline-size;
+  }
+
+  .ui-legal-document {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    row-gap: var(--legal-document-section-gap);
+    align-items: start;
+    min-width: 0;
+  }
+
+  .ui-legal-document-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--legal-document-header-gap);
+    min-width: 0;
+    max-width: var(--legal-document-measure-max-width);
+    border-block-end: var(--legal-document-header-border);
+  }
+
+  .ui-legal-document-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--legal-document-meta-gap);
+    font-size: var(--legal-document-meta-font-size);
+    color: hsl(var(--legal-document-meta-foreground, var(--muted-foreground)));
+  }
+
+  /* Long-form prose wrapping that holds in JA (kinsoku via `line-break: strict`), in EN
+   * (long compounds / URLs via `overflow-wrap: break-word`) and in VI (diacritic-heavy
+   * words must NOT be broken mid-word — `word-break: normal` keeps that true). */
+  .ui-legal-document-summary,
+  .ui-legal-document-section-body {
+    min-width: 0;
+    line-height: var(--legal-document-body-line-height);
+    overflow-wrap: break-word;
+    word-break: normal;
+    line-break: strict;
+  }
+
+  .ui-legal-document-summary {
+    color: hsl(var(--legal-document-summary-foreground, var(--muted-foreground)));
+  }
+
+  .ui-legal-document-rail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--legal-document-nav-gap);
+    min-width: 0;
+  }
+
+  .ui-legal-document-toc {
+    display: flex;
+    flex-direction: column;
+    gap: var(--legal-document-toc-gap);
+    min-width: 0;
+    min-height: 0;
+    border-inline-end: var(--legal-document-toc-border);
+  }
+
+  .ui-legal-document-toc-title {
+    font-size: var(--legal-document-toc-title-font-size);
+    color: hsl(var(--legal-document-toc-foreground, var(--muted-foreground)));
+  }
+
+  .ui-legal-document-toc-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--legal-document-toc-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  /* REAL anchors — `href="#<section id>"` — so the contents list is keyboard-reachable,
+   * middle-clickable and deep-linkable even before JS boots. */
+  .ui-legal-document-toc-link {
+    display: block;
+    padding: var(--legal-document-toc-item-padding);
+    border-radius: var(--legal-document-toc-item-radius);
+    border-inline-start: var(--legal-document-toc-marker-width) solid transparent;
+    font-size: var(--legal-document-toc-font-size);
+    line-height: 1.6;
+    color: hsl(var(--legal-document-toc-foreground, var(--muted-foreground)));
+    text-decoration: none;
+    overflow-wrap: break-word;
+    transition-property: color, background-color, border-color;
+    transition-duration: var(--duration-fast);
+  }
+
+  .ui-legal-document-toc-link:hover {
+    color: hsl(var(--legal-document-toc-active-foreground, var(--foreground)));
+    background: hsl(var(--legal-document-toc-active-background, var(--accent)) / 0.6);
+  }
+
+  .ui-legal-document-toc-link:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+  }
+
+  /* Active entry: colour + a leading marker + a heavier weight, so the state survives a
+   * monochrome / high-contrast rendering (never colour-only, WCAG 1.4.1). The anchor also
+   * carries `aria-current="location"`. */
+  .ui-legal-document-toc-link[data-active] {
+    color: hsl(var(--legal-document-toc-active-foreground, var(--foreground)));
+    background: hsl(var(--legal-document-toc-active-background, var(--accent)));
+    border-inline-start-color: hsl(var(--legal-document-toc-marker-color, var(--primary)));
+    font-weight: var(--font-weight-medium);
+  }
+
+  .ui-legal-document-content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--legal-document-section-gap);
+    min-width: 0;
+    max-width: var(--legal-document-measure-max-width);
+  }
+
+  /* `scroll-margin-block-start` (logical, so it survives vertical writing modes) is what
+   * makes a hash jump AND a programmatic `scrollIntoView` land BELOW sticky chrome — no
+   * JS offset arithmetic, no consumer CSS. */
+  .ui-legal-document-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--legal-document-section-title-gap);
+    min-width: 0;
+    scroll-margin-block-start: var(--legal-document-scroll-offset);
+  }
+
+  /* The section is `tabIndex={-1}` and receives focus when its contents anchor is
+   * activated, so the focus ring must be VISIBLE (WCAG 2.4.7 / 2.4.11). */
+  .ui-legal-document-section:focus-visible {
+    outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color, var(--ring)));
+    outline-offset: var(--space-1);
+  }
+
+  .ui-legal-document-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--legal-document-footer-gap);
+    min-width: 0;
+    max-width: var(--legal-document-measure-max-width);
+    border-block-start: var(--legal-document-footer-border);
+  }
+
+  /* Two-column mode (shell ≥56rem — a 1024px and a 1440px viewport both qualify): the
+   * rail is PINNED beside a measure-capped document column and spans the header/body/
+   * footer rows, so it stays in view for the whole scroll. Logical grid placement means
+   * column 1 is the START side, i.e. it mirrors correctly under `dir="rtl"`.
+   *
+   * Below 56rem (the 390×844 case) NOTHING here applies: the shell stays a single column
+   * and the rail is a STATIC compact contents block between the document header and the
+   * first section — deliberately not sticky and not height-capped, so a phone never loses
+   * vertical space to pinned chrome. */
+  @container legal-document (min-width: 56rem) {
+    .ui-legal-document {
+      grid-template-columns:
+        var(--legal-document-toc-width)
+        minmax(0, var(--legal-document-measure-max-width));
+      column-gap: var(--legal-document-column-gap);
+    }
+
+    .ui-legal-document-header {
+      grid-column: 2;
+      grid-row: 1;
+    }
+
+    .ui-legal-document-rail {
+      grid-column: 1;
+      grid-row: 1 / span 3;
+      position: sticky;
+      inset-block-start: var(--legal-document-toc-inset-block-start);
+      align-self: start;
+      max-height: var(--legal-document-toc-max-height);
+      overflow-y: auto;
+    }
+
+    .ui-legal-document-content {
+      grid-column: 2;
+      grid-row: 2;
+    }
+
+    .ui-legal-document-footer {
+      grid-column: 2;
+      grid-row: 3;
+    }
+  }
 }

package/dist/styles/logo-layout.css

@@ -38,4 +38,66 @@
     height: var(--logo-size-lg);
     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). */
+  .ui-logo[data-tone="success"] {
+    background: hsl(var(--logo-success-background, var(--success)));
+    color: hsl(var(--logo-success-foreground, var(--success-foreground)));
+  }
+
+  .ui-logo[data-mark="godx"] {
+    width: var(--logo-godx-size);
+    height: var(--logo-godx-size);
+    border-radius: 0;
+    background: transparent;
+    color: hsl(var(--logo-godx-color, var(--success)));
+  }
+
+  .ui-logo[data-mark="godx"] [data-slot="logo-artwork"] {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  /*
+   * LOCKUP — `<Logo wordmark="…" />`: the mark plus the readable product name as ONE element, so a
+   * shell header / auth brand bar never hand-rolls `inline-flex items-center gap-2` around a Logo
+   * and a `<Text>` (rule #46). Every knob is a token (rule #45); the wordmark colour defaults to
+   * the IDENTITY role and never reads --primary, so re-theming the action colour cannot recolour
+   * the brand — no consumer page CSS is required for the logo colour (gh#214).
+   */
+  .ui-logo-lockup {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--logo-wordmark-gap);
+  }
+
+  .ui-logo-lockup .ui-logo-wordmark {
+    font-family: var(--logo-wordmark-font-family, var(--font-family-display));
+    font-size: var(--logo-wordmark-font-size-md);
+    font-weight: var(--logo-wordmark-font-weight);
+    letter-spacing: var(--logo-wordmark-letter-spacing);
+    line-height: 1;
+    color: hsl(var(--logo-wordmark-color, var(--foreground)));
+    white-space: nowrap;
+  }
+
+  .ui-logo-lockup[data-size="xs"] .ui-logo-wordmark {
+    font-size: var(--logo-wordmark-font-size-xs);
+  }
+
+  .ui-logo-lockup[data-size="sm"] .ui-logo-wordmark {
+    font-size: var(--logo-wordmark-font-size-sm);
+  }
+
+  .ui-logo-lockup[data-size="lg"] .ui-logo-wordmark {
+    font-size: var(--logo-wordmark-font-size-lg);
+  }
+
+  /* Canonical brand-green GoDX wordmark — the identity role, independent of --primary. */
+  .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))));
+  }
 }

package/dist/styles/navigation-layout.css

@@ -1,4 +1,47 @@
 @layer components {
+  .ui-app-setting-picker-inline {
+    width: auto;
+    min-height: 0;
+    height: auto;
+    border: 0;
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    font: inherit;
+  }
+
+  [data-slot="auth-legal-footer"] .ui-app-setting-picker-inline {
+    width: auto;
+    min-height: 0;
+    height: auto;
+    border-width: 0;
+    border-radius: 0;
+    padding: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+
+  .ui-app-setting-picker-inline:hover,
+  .ui-app-setting-picker-inline[data-state="open"] {
+    background: transparent;
+    color: hsl(var(--foreground));
+    text-decoration: underline;
+  }
+
+  /*
+   * AppSettingPicker `compact` (gh#217) — a small, content-hugging LABELLED trigger for auth /
+   * legal footers: it keeps the icon, the readable value and the real control chrome (so it is
+   * obviously a switcher), but re-tiers the box to --control-height-sm and drops the picker's owned
+   * per-kind width. Every value is a token; the height comes from the official control tier, never
+   * a literal or an ad-hoc calc.
+   */
+  .ui-app-setting-picker-compact {
+    --control-height: var(--app-setting-picker-compact-control-height);
+    --control-padding-x: var(--app-setting-picker-compact-padding-x);
+    --control-font-size: var(--app-setting-picker-compact-font-size);
+  }
   [data-slot="tabs-list"] {
     max-inline-size: var(--tabs-list-max-inline-size);
     overflow-x: var(--tabs-list-overflow);