@godxjp/ui 18.4.0 → 18.6.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));
@@ -315,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;
@@ -435,6 +554,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 +697,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 {
@@ -586,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
@@ -755,4 +917,307 @@
     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;
+    }
+  }
+}
+
+@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

@@ -38,4 +38,99 @@
     height: var(--logo-size-lg);
     font-size: var(--logo-font-size-lg);
   }
+
+  /* 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(--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, 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(--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"] {
+    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 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(--brand))));
+  }
 }