@godxjp/ui 18.5.0 → 18.6.0

package/dist/styles/shell-layout.css

@@ -147,6 +147,51 @@
     gap: var(--auth-shell-card-stack-gap);
   }
 
+  /* Login is an anchored three-part composition: AuthIdentity · Card · AuthFooter. The fixed
+   * identity track absorbs absent, one-line and wrapped two-line requester states while its
+   * content remains visually adjacent to the Card. This keeps real requester data intact without
+   * allowing its line count to move the canonical SCR-001 card anchor (gh#237). */
+  .ui-auth-shell[data-preset="login"] {
+    --auth-shell-card-max-width: var(--auth-shell-login-card-max-width);
+    --auth-shell-main-align: flex-start;
+    --auth-shell-main-padding: var(--auth-shell-login-flow-offset-block)
+      var(--auth-shell-login-main-padding-inline) var(--auth-shell-login-main-padding-block-end);
+    --auth-shell-card-stack-gap: var(--auth-shell-login-card-stack-gap);
+    --auth-shell-card-padding-block-compact: var(--auth-shell-login-card-padding-block-compact);
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card {
+    display: grid;
+    grid-template-rows: var(--auth-shell-login-identity-slot-block-size) auto auto;
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card > .ui-auth-identity,
+  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card > :has(> .ui-auth-identity) {
+    min-width: 0;
+    min-height: 0;
+    block-size: var(--auth-shell-login-identity-slot-block-size);
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-shell-card > .ui-auth-identity,
+  .ui-auth-shell[data-preset="login"]
+    .ui-auth-shell-card
+    > :has(> .ui-auth-identity)
+    > .ui-auth-identity {
+    height: 100%;
+    justify-content: flex-end;
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-requester {
+    max-width: 100%;
+    justify-content: center;
+  }
+
+  .ui-auth-shell[data-preset="login"] .ui-auth-requester > :last-child {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    text-align: center;
+  }
+
   .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);
@@ -197,6 +242,52 @@
     height: var(--auth-requester-glyph-size);
   }
 
+  .ui-auth-account-summary {
+    display: flex;
+    min-height: var(--auth-account-summary-min-height);
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--auth-account-summary-gap);
+    padding: var(--auth-account-summary-padding);
+    border-radius: var(--radius-md);
+    background: hsl(var(--muted));
+  }
+
+  .ui-auth-account-identity {
+    display: flex;
+    min-width: min(100%, var(--auth-account-summary-identity-min-width));
+    flex: 1 1 var(--auth-account-summary-identity-min-width);
+    align-items: center;
+    gap: var(--auth-account-summary-gap);
+  }
+
+  .ui-auth-account-avatar {
+    width: var(--auth-account-summary-avatar-size);
+    height: var(--auth-account-summary-avatar-size);
+    flex: none;
+  }
+
+  .ui-auth-account-fallback-icon {
+    width: var(--auth-account-summary-avatar-glyph-size);
+    height: var(--auth-account-summary-avatar-glyph-size);
+  }
+
+  .ui-auth-account-email {
+    min-width: 0;
+    overflow: hidden;
+    color: hsl(var(--foreground));
+    font-size: var(--auth-account-summary-email-font-size);
+    /* Declares its own line box because it CLIPS — see gh#254. */
+    line-height: var(--auth-account-summary-email-line-height);
+    font-weight: var(--font-weight-medium);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ui-auth-account-summary > [data-slot="button"] {
+    margin-inline-start: auto;
+  }
+
   .ui-auth-legal-footer {
     display: flex;
     flex-wrap: wrap;
@@ -277,6 +368,12 @@
       --auth-shell-main-padding: var(--auth-shell-canonical-main-padding-mobile);
     }
 
+    .ui-auth-shell[data-preset="login"] {
+      --auth-shell-main-padding: var(--auth-shell-login-flow-offset-block-mobile)
+        var(--auth-shell-login-main-padding-inline-mobile)
+        var(--auth-shell-login-main-padding-block-end);
+    }
+
     /* Declared after the canonical mobile inset so a preset's mobile gutter wins at equal
      * specificity: device-authorization = 5px inline (card x=5, width=380 at 390px);
      * context-selection = edge-to-edge (0 inline). */
@@ -479,6 +576,33 @@
     .app-mobile-nav-trigger {
       display: inline-flex;
     }
+
+    /* Some approved application contracts retain their navigation rail at narrow widths. This is
+     * an explicit AppShell mode, never a consumer media-query fork: the same sidebar node, footer,
+     * active items and token-owned rail width remain in the canonical two-track grid. */
+    .app-root[data-responsive-navigation="docked"] {
+      grid-template-areas:
+        "sidebar topbar"
+        "sidebar main"
+        "sidebar footer";
+      grid-template-columns: var(--app-shell-sidebar-width) minmax(0, 1fr);
+    }
+
+    .app-root[data-responsive-navigation="docked"][data-collapsed="true"] {
+      grid-template-columns: var(--app-shell-rail-width) minmax(0, 1fr);
+    }
+
+    .app-root[data-responsive-navigation="docked"] > .app-sidebar {
+      display: flex;
+    }
+
+    .app-root[data-responsive-navigation="docked"] > .app-topbar {
+      padding-inline: var(--app-shell-bar-inset);
+    }
+
+    .app-root[data-responsive-navigation="docked"] .app-mobile-nav-trigger {
+      display: none;
+    }
   }
 
   .sb-root {
@@ -781,6 +905,10 @@
     min-width: 0;
     flex: 1;
     overflow: hidden;
+    /* gh#254 — MUST NOT inherit the row's `line-height: 1`. This element clips, so its line box is
+     * its clip box, and a 1em box is shorter than the font's ascent+descent: every descender and
+     * Vietnamese tone mark below the baseline gets sheared off. Knob, not constant (rule #45). */
+    line-height: var(--sidebar-nav-item-line-height);
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -1093,6 +1221,16 @@
   .ui-topbar-start {
     flex: 0 1 auto;
   }
+  .ui-topbar-start > :last-child {
+    max-width: 100%;
+    min-width: 0;
+    flex: 0 1 auto;
+    overflow: hidden;
+    /* Declares its own line box because it CLIPS — see gh#254. */
+    line-height: var(--topbar-start-truncate-line-height);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   .ui-topbar-center {
     flex: 1 1 0%;
     justify-content: center;
@@ -1103,6 +1241,17 @@
     margin-inline-start: auto;
   }
 
+  /* COLLISION CONTRACT (gh#244) — with a docked 16rem sidebar, 901–1100px viewports do not have
+   * enough room for a breadcrumb/title, full search trigger and end utilities. The center slot is
+   * optional by definition, so remove it before it can cover either owned edge. This also gives
+   * phones the same deterministic allocation. A consumer with a real compact center presentation
+   * can opt it back in through the public token instead of a page-local media query. */
+  @media (width <= 68.75rem) {
+    .ui-topbar-center {
+      display: var(--topbar-center-compact-display);
+    }
+  }
+
   .tb-chip {
     display: inline-flex;
     max-width: 15rem;
@@ -1156,6 +1305,10 @@
     min-width: 0;
     overflow: hidden;
     font-weight: 500;
+    /* gh#254 — same trap as `.sb-label`: this clips, so it must own a line box tall enough for the
+     * font's descenders. `.tb-chip` uses `font: inherit`, so without this the chip would shear its
+     * glyphs the moment a service set a tight line-height on the bar. */
+    line-height: 1.5;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
@@ -1286,3 +1439,152 @@
     transition: none;
   }
 }
+
+/*
+ * ERROR SURFACE — the 403 / 404 / 500 / 503 exception surface (gh#221, gh#251).
+ *
+ * Geometry is PACKAGE-OWNED at 1440 / 1024 / 390: a consumer never writes `min-h-dvh`, a
+ * flex-centring class or a media query for an error page. In `system` mode the viewport centring
+ * comes from `CenteredShell align="center"` (which the component renders itself); this block owns
+ * the surface block that is identical in BOTH modes — measure, rhythm, metadata list.
+ *
+ * The narrow step is a CONTAINER query, not a viewport one (the SplitPane precedent, gh#165): the
+ * surface reads its OWN width, so it compacts correctly whether the shrinking came from a 390px
+ * phone or from an application shell whose sidebar is expanded on a laptop.
+ */
+@layer components {
+  .ui-error-surface {
+    container: error-surface / inline-size;
+    display: flex;
+    width: 100%;
+    max-width: var(--error-surface-max-width);
+    flex-direction: column;
+    align-items: center;
+    /* Logical, so the surface stays centred and its text start-aligns correctly under `dir="rtl"`. */
+    margin-inline: auto;
+    gap: var(--error-surface-gap);
+    padding-block: var(--error-surface-padding-block);
+    text-align: center;
+  }
+
+  .ui-error-surface-brand {
+    display: flex;
+    justify-content: center;
+    padding-block-end: var(--error-surface-brand-gap);
+  }
+
+  /* The EmptyState body already owns its own vertical rhythm and description measure
+   * (--empty-state-*); the surface only removes the duplicated block padding so the two spacing
+   * systems do not stack into a hole between the status code and the icon. */
+  .ui-error-surface .ui-error-surface-body {
+    width: 100%;
+    padding-block: 0;
+  }
+
+  .ui-error-surface-status {
+    margin: 0;
+  }
+
+  .ui-error-surface-meta {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: var(--error-surface-meta-gap);
+    /* Chrome is a token, default quiet (rule #44) — `none` unless a service opts in. */
+    border-block-start: var(--error-surface-meta-border);
+    padding-block-start: var(--error-surface-meta-padding-block);
+    margin: 0;
+  }
+
+  .ui-error-surface-meta-row {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: var(--error-surface-meta-row-gap);
+  }
+
+  .ui-error-surface-meta-row > dd {
+    margin-inline-start: 0;
+  }
+
+  .ui-error-surface-progress {
+    width: 100%;
+    max-width: var(--error-surface-progress-max-width);
+  }
+
+  /*
+   * NARROW STEP (the 390 case). Reclaim vertical space and stop a long ja / vi metadata row from
+   * wrapping into a ragged two-column shape: each label stacks over its value, centred.
+   */
+  @container error-surface (width < 30rem) {
+    .ui-error-surface {
+      padding-block: var(--error-surface-padding-block-compact);
+    }
+
+    .ui-error-surface-meta-row {
+      flex-direction: column;
+      gap: 0;
+    }
+  }
+}
+
+@layer components {
+  /* ── CenteredShell · `preset="public-landing"` (gh#252) ──────────────────────────────────────
+   * A PUBLIC landing page (marketing header · hero · sections · legal footer) is a COMPOSITION,
+   * not a framework component (docs/COMPOSITION-VS-COMPONENT.md: Hero / Navbar / Footer / Pricing
+   * all FAIL the Framework-Component Test). What the consumer must NOT own is the SHELL geometry —
+   * the content measure, the header/footer measure alignment, the section rhythm and the flat
+   * public-surface chrome. This preset owns all of it through `--centered-shell-landing-*` knobs,
+   * so a landing composes real primitives with ZERO page-local CSS and zero descendant selectors.
+   *
+   * `preset="default"` emits NO `data-preset` attribute at all, so none of this can match and every
+   * existing CenteredShell keeps its exact box (the gh#231 inert-default contract). */
+  .ui-centered-shell[data-preset="public-landing"] {
+    --centered-shell-main-padding: var(--centered-shell-landing-main-padding-block)
+      var(--centered-shell-landing-inset-inline);
+    /* The hero title is a real `Heading level={1}`; the preset re-points the h1 tier the same way
+     * `.ui-auth-shell` re-points it — never a consumer font-size. */
+    --heading-h1: var(--centered-shell-landing-heading-size);
+    /* Flat public surface: every Card in the subtree loses its elevation from ONE knob instead of
+     * a consumer `.landing .card { box-shadow: none }` descendant selector. */
+    --card-shadow: var(--centered-shell-landing-card-shadow);
+    background: hsl(var(--centered-shell-landing-background, var(--background)));
+  }
+
+  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-column {
+    display: flex;
+    max-width: var(--centered-shell-landing-max-width);
+    flex-direction: column;
+    /* Section rhythm — the consumer stacks plain `<section>` layout elements and never sets a gap. */
+    gap: var(--centered-shell-landing-section-gap);
+  }
+
+  /* Header and footer share the column's measure WITHOUT a consumer max-width wrapper: the inline
+   * padding is the page gutter until the viewport is wider than the measure, then it grows so the
+   * bar content starts on exactly the same inline edge as the centred column. */
+  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-bar,
+  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-footer {
+    padding-inline: max(
+      var(--centered-shell-landing-inset-inline),
+      calc((100% - var(--centered-shell-landing-max-width)) / 2)
+    );
+  }
+
+  .ui-centered-shell[data-preset="public-landing"] .ui-centered-shell-footer {
+    padding-block: var(--centered-shell-landing-footer-padding-block);
+    text-align: start;
+  }
+
+  /* Compact step (the 390px acceptance width sits here): the gutter, the section rhythm and the
+   * hero tier switch to their compact knobs. One media query, owned by the package. */
+  @media (width < 40rem) {
+    .ui-centered-shell[data-preset="public-landing"] {
+      --centered-shell-landing-inset-inline: var(--centered-shell-landing-inset-inline-compact);
+      --centered-shell-landing-main-padding-block: var(
+        --centered-shell-landing-main-padding-block-compact
+      );
+      --centered-shell-landing-section-gap: var(--centered-shell-landing-section-gap-compact);
+      --centered-shell-landing-heading-size: var(--centered-shell-landing-heading-size-compact);
+    }
+  }
+}

package/dist/styles/table-layout.css

@@ -74,12 +74,17 @@
     gap: var(--space-inline-sm);
   }
 
+  /* The footer owns its own inset on BOTH axes (gh#236) — it is a self-contained slot that is
+   * usually dropped straight into a flush container, so relying on an ancestor for inline/block-end
+   * padding left the label and the page-size Select flush against the container edge and its
+   * closing border. Logical properties only (RTL-safe); both axes are tunable tokens (#45). */
   .ui-data-table-pagination {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: var(--space-inline-sm);
-    padding-top: var(--space-stack-sm);
+    padding-block: var(--table-pagination-padding-y, var(--space-stack-sm));
+    padding-inline: var(--table-pagination-padding-x, var(--table-cell-space-x));
   }
 
   /* Numbered footer may wrap only between its two semantic groups. The supported JA/EN/VI locale
@@ -115,10 +120,22 @@
 
   .ui-data-table-surface {
     overflow: hidden;
+    /* Narrow-viewport legibility floor — a TOKEN, not the old `min-w-[640px]` literal (gh#253,
+     * rule #45). Cleared at the `sm` step below, and opted out of entirely by the collection
+     * preset, which owns its width through the column-priority measures. */
+    min-inline-size: var(--table-surface-min-inline-size);
     border: 1px solid hsl(var(--border));
     border-radius: var(--radius-md);
   }
 
+  /* `preset="action-collection"` (gh#253) — the priority measures fit the table to its container at
+   * every width, so the desktop floor would re-introduce exactly the horizontal scroll the preset
+   * removes. Attribute-scoped: `preset="default"` emits NO attribute, so an untouched DataTable
+   * never matches this rule (the inert-default contract, gh#231). */
+  .ui-data-table-surface[data-preset="action-collection"] {
+    min-inline-size: 0;
+  }
+
   /* Zebra striping (opt-in via the `striped` prop). Selected rows keep their
    * own emphasis, so they are excluded from the stripe. */
   .ui-data-table-surface[data-striped] tbody tr:nth-child(even):not([data-state="selected"]) {
@@ -187,6 +204,12 @@
     .ui-data-table-scroll::after {
       inset-inline-end: 0;
     }
+
+    /* From `sm` up the viewport is already wider than the floor, so it is released and the surface
+     * simply fills its container (this is the `sm:min-w-0` half of the old utility pair). */
+    .ui-data-table-surface {
+      min-inline-size: 0;
+    }
   }
 
   /* ── Pinned (sticky) inline-end column ────────────────────────────────
@@ -233,3 +256,143 @@
     );
   }
 }
+
+@layer components {
+  /* ── Table · `preset="action-collection"` (gh#253) ───────────────────────────────────────────
+   * The canonical dense approval / action queue: requester · target · reason · requested date ·
+   * row actions, all five discoverable in the initial 390px frame, WITHOUT a consumer width, a
+   * hidden column or a page-local breakpoint.
+   *
+   * It keeps the REAL table: no `display` change, no role rewriting, no card transformation — so
+   * `<table>/<thead>/<tr>/<th>/<td>` semantics, header association, `aria-sort` and screen-reader
+   * table navigation survive exactly as they are at 1440. What the preset replaces is the SIZING
+   * model: the desktop INTRINSIC column widths (a `white-space: nowrap` reason column is what
+   * makes a five-column queue 1511px wide and forces the horizontal scroll gh#253 reports) give
+   * way to `table-layout: fixed` plus token-owned column-PRIORITY measures, and cells wrap.
+   *
+   * The collapse step is measured against the TABLE'S OWN container, not the viewport (a table in
+   * a master rail must collapse before the page does), so it is a container query. Below the step
+   * only the MEASURES and the type/padding tier change — the structure is identical. */
+  .ui-table-collection {
+    container: ui-table-collection / inline-size;
+  }
+
+  .ui-table-collection [data-slot="table"] {
+    table-layout: fixed;
+    inline-size: 100%;
+  }
+
+  .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);
+    overflow-wrap: anywhere;
+    white-space: normal;
+    vertical-align: top;
+  }
+
+  .ui-table-collection [data-priority="primary"] {
+    --table-action-collection-column-width: var(--table-action-collection-primary-width);
+  }
+
+  .ui-table-collection [data-priority="secondary"] {
+    --table-action-collection-column-width: var(--table-action-collection-secondary-width);
+  }
+
+  .ui-table-collection [data-priority="meta"] {
+    --table-action-collection-column-width: var(--table-action-collection-meta-width);
+  }
+
+  .ui-table-collection [data-priority="actions"] {
+    --table-action-collection-column-width: var(--table-action-collection-actions-width);
+    text-align: end;
+  }
+
+  /* Below the step the SOURCE measures are re-pointed to their compact tier (and the type / row
+   * density with them); nothing else moves. One block per canonical step — a media/container
+   * query cannot read a `var()`, so the tokenized scale is written out (sm 40rem · md 48rem ·
+   * lg 64rem · xl 80rem, the same steps as `--master-detail-collapse-below`). */
+  @container ui-table-collection (width < 40rem) {
+    [data-collapse-below="sm"] [data-slot="table"] {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-compact
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
+      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
+      --table-row-height: var(--table-action-collection-row-height-compact);
+      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
+      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
+      font-size: var(--table-action-collection-font-size-compact);
+    }
+
+    /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
+     * compact measure — inside a collapsed action cell everything wraps. */
+    [data-collapse-below="sm"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+  }
+
+  @container ui-table-collection (width < 48rem) {
+    [data-collapse-below="md"] [data-slot="table"] {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-compact
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
+      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
+      --table-row-height: var(--table-action-collection-row-height-compact);
+      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
+      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
+      font-size: var(--table-action-collection-font-size-compact);
+    }
+
+    /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
+     * compact measure — inside a collapsed action cell everything wraps. */
+    [data-collapse-below="md"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+  }
+
+  @container ui-table-collection (width < 64rem) {
+    [data-collapse-below="lg"] [data-slot="table"] {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-compact
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
+      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
+      --table-row-height: var(--table-action-collection-row-height-compact);
+      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
+      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
+      font-size: var(--table-action-collection-font-size-compact);
+    }
+
+    /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
+     * compact measure — inside a collapsed action cell everything wraps. */
+    [data-collapse-below="lg"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+  }
+
+  @container ui-table-collection (width < 80rem) {
+    [data-collapse-below="xl"] [data-slot="table"] {
+      --table-action-collection-primary-width: var(--table-action-collection-primary-width-compact);
+      --table-action-collection-secondary-width: var(
+        --table-action-collection-secondary-width-compact
+      );
+      --table-action-collection-meta-width: var(--table-action-collection-meta-width-compact);
+      --table-action-collection-actions-width: var(--table-action-collection-actions-width-compact);
+      --table-row-height: var(--table-action-collection-row-height-compact);
+      --table-cell-space-x: var(--table-action-collection-cell-space-x-compact);
+      --table-cell-padding-y: var(--table-action-collection-cell-padding-y-compact);
+      font-size: var(--table-action-collection-font-size-compact);
+    }
+
+    /* A nowrap child (a Badge pill, a chip) would otherwise bleed into the next column at the
+     * compact measure — inside a collapsed action cell everything wraps. */
+    [data-collapse-below="xl"] [data-slot="table-cell"] * {
+      white-space: normal;
+    }
+  }
+}

package/dist/theme/dxs.canonical.css

@@ -33,10 +33,11 @@
 
 :root {
   /* ── Brand palette — the shipped GodX Navy ramp (identical to the `brand`
-   *    axis preset). The brand-green IDENTITY mark is deliberately NOT here:
-   *    `--logo-godx-color` / `--logo-wordmark-color` default to the `--success`
-   *    identity role at their call sites and never read `--primary`, so a
-   *    re-themed action colour can never recolour the GoDX mark or wordmark. */
+   *    axis preset). The emerald IDENTITY mark is deliberately NOT here:
+   *    `--logo-godx-color` / `--logo-wordmark-color` default to the `--brand`
+   *    IDENTITY role at their call sites and never read `--primary` (nor the
+   *    `--success` status green — gh#250), so a re-themed action colour can
+   *    never recolour the GoDX mark or wordmark. */
   --primary: 211 73% 15%;
   --primary-foreground: 0 0% 100%;
   --ring: 24 99% 46%;

package/dist/tokens/axes.css

@@ -73,9 +73,10 @@
  * `src/theme/dxs.canonical.css` mirrors this block for stylesheet-only apps;
  * `src/tokens/__tests__/dxs-canonical-theme.test.ts` fails if the two drift.
  *
- * The brand-green GoDX identity mark needs no binding: `--logo-godx-color` /
- * `--logo-wordmark-color` already default to the `--success` identity role at
- * their call sites and never reference `--primary`. */
+ * The GoDX identity mark needs no binding: `--logo-godx-color` /
+ * `--logo-wordmark-color` already default to the `--brand` IDENTITY role (the
+ * canonical emerald) at their call sites, and never reference `--primary` — nor
+ * the `--success` status green they wrongly borrowed before gh#250. */
 :root[data-brand="dxs"] {
   --primary: 211 73% 15%;
   --primary-foreground: 0 0% 100%;

package/dist/tokens/base.css

@@ -24,3 +24,4 @@
 @import "./components/shell.css";
 @import "./components/sidebar.css";
 @import "./components/legal-document.css";
+@import "./components/error-surface.css";

package/dist/tokens/components/data-display.css

@@ -15,6 +15,19 @@
      Painted as an overlay so a service sets --avatar-tint: hsl(var(--primary) / 0.08). */
   --avatar-tint: transparent;
 
+  /* Entity-header mark — `<Avatar shape="square">` (gh#249): the compact rounded SQUARE an
+     organization/service header uses, as opposed to the round person avatar. Every value is a knob
+     (rule #45) so a service matches the mark to its own grid without a className override.
+     --avatar-square-background / --avatar-square-foreground are role-mirror knobs: `initial` so the
+     --primary / --primary-foreground defaults re-resolve at the CALL SITE under a scoped
+     [data-tenant]/.dark theme (a :root binding to a role var would freeze at the :root value).
+     Defaults = --radius-lg corners · --control-height box (same as the circle avatar, so swapping
+     shape never reflows a header) · hsl(var(--primary)) fill · hsl(var(--primary-foreground)) glyph. */
+  --avatar-square-radius: var(--radius-lg);
+  --avatar-square-size: var(--control-height);
+  --avatar-square-background: initial;
+  --avatar-square-foreground: initial;
+
   /* Progress track + fill — `initial` so the role defaults re-resolve under a scoped theme.
      Track reads --secondary, fill reads --success; a service re-tones once.
      Defaults = hsl(var(--secondary)) track · hsl(var(--success)) fill. */