@godxjp/ui 18.5.0 → 18.7.0

package/dist/props/vocabulary/data.prop.d.ts

@@ -40,6 +40,17 @@ export type ColumnDefProp<T> = {
      * separating shadow. Pin at most one column per table.
      */
     pin?: "end";
+    /**
+     * Relative importance of the column, read ONLY by `DataTable preset="action-collection"`
+     * (gh#253). It is the SAME contract the `Table` primitive exposes on `TableHead`/`TableCell`:
+     * DataTable stamps it onto both cells of the column for you, so the preset can swap the desktop
+     * intrinsic widths for the token-owned priority measures (`--table-action-collection-*`) instead
+     * of scrolling a five-column approval queue sideways at 390px. Leave the free-text column
+     * unmarked — it takes the remaining space. Emitted as `data-priority` only when set, so an
+     * ordinary column gains no attribute. Prefer this over `width` under the preset: an explicit
+     * `width` utility wins the cascade and defeats the priority measure.
+     */
+    priority?: TableColumnPriorityProp;
 };
 /** Set of selected row IDs. */
 export type SelectedIdsProp = Set<string>;
@@ -64,3 +75,19 @@ export type HasActiveFiltersProp = boolean;
  * offset/background are tuned via the `--filter-bar-sticky-*` theme knobs.
  */
 export type StickyProp = boolean;
+/**
+ * Table named collection preset. `"default"` keeps the plain table (and emits no attribute).
+ * `"action-collection"` is the canonical dense approval / action queue: below `collapseBelow`
+ * the desktop intrinsic column widths are replaced by token-owned column-PRIORITY measures under
+ * `table-layout: fixed` and cells wrap, so every column — including the row actions — stays inside
+ * the initial narrow frame. The real `<table>` semantics are never rewritten.
+ */
+export type TablePresetProp = "default" | "action-collection";
+/**
+ * Relative importance of a table column, used by `preset="action-collection"` to allocate the
+ * narrow-frame measure. `"primary"` is the row's subject, `"secondary"` its object/target,
+ * `"meta"` a low-priority stamp (dates, ids), `"actions"` the row-action affordance whose measure
+ * is reserved first so it can never be pushed outside the viewport. A column with no priority
+ * takes the remaining space (the free-text column).
+ */
+export type TableColumnPriorityProp = "primary" | "secondary" | "meta" | "actions";

package/dist/props/vocabulary/index.d.ts

@@ -1,7 +1,7 @@
 /** Barrel — all vocabulary prop types. */
 export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, OnOpenChangeProp, HandlerProp, PendingProp, RequiredProp, DisabledProp, LabelProp, HelperProp, ErrorProp, PlaceholderProp, NameProp, ValueProp, DefaultValueProp, OnValueChangeProp, OnChangeProp, OnClickProp, AsChildProp, WidthProp, } from "./shared.prop.js";
 export type { TitleProp, SubtitleProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
-export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, AuthShellPresetProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
-export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";
+export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, TableDensityProp, DensityProp, GapProp, } from "./layout.prop.js";
+export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, SizeProp, FormLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, } from "./interaction.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbProp } from "./navigation.prop.js";
-export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";
+export type { GetRowIdProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, } from "./data.prop.js";

package/dist/props/vocabulary/interaction.prop.d.ts

@@ -7,6 +7,15 @@ export type ButtonVariantProp = "default" | "destructive" | "outline" | "dashed"
 /** Corner shape — maps to the radius tokens (default = control/component radius). Shared by
  *  Button + Badge. `pill` = fully rounded (`--radius-pill`), `sharp` = square (`--radius-sharp`). */
 export type ShapeProp = "default" | "pill" | "sharp";
+/**
+ * Avatar geometry — WHAT the mark represents, not just its corner radius, which is why it is a
+ * separate vocabulary from the control `ShapeProp` (`default | pill | sharp`): an entity mark is a
+ * ROUNDED rect, a value `ShapeProp` cannot express (its `sharp` = `--radius-sharp` = 0).
+ * - `circle` (default) — a person: the fully-round `--radius-pill` identity avatar.
+ * - `square` — an organization / service entity mark for an entity header: the compact rounded
+ *   square on the brand surface (`--avatar-square-*` tokens).
+ */
+export type AvatarShapeProp = "circle" | "square";
 /** Text size — steps of the golden-ratio type scale (NEVER an arbitrary px). `sm` = base. */
 export type TextSizeProp = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 /** Text colour intent — maps to semantic foreground tokens (no raw palette). */
@@ -45,8 +54,16 @@ export type BreakpointProp = "sm" | "md" | "lg" | "xl";
 export type ConfirmVariantProp = "default" | "destructive";
 /** Semantic color/status intent. */
 export type ToneProp = "default" | "success" | "warning" | "destructive" | "info" | "muted" | "neutral";
-/** Inline Alert visual treatment. */
-export type AlertVariantProp = "default";
+/**
+ * Alert visual treatment.
+ *
+ * `"default"` is the inset, rounded, fully-bordered INLINE alert that sits inside a page body.
+ * `"banner"` is the page-level strip the `Banner` alias ships (gh#255): square, edge-to-edge, ruled
+ * on the block-end edge only, so it reads as page chrome above the content rather than as a card
+ * inside it. Both share one implementation, one tone scale and one dismiss/actions contract —
+ * `banner` re-measures the box through `--banner-*` tokens and changes nothing else.
+ */
+export type AlertVariantProp = "default" | "banner";
 /** Sort direction for table columns. */
 export type SortDirectionProp = "asc" | "desc";
 /** Table column text alignment. */

package/dist/props/vocabulary/layout.prop.d.ts

@@ -17,18 +17,52 @@ export type CenteredShellWidthProp = "sm" | "md" | "lg";
  * maintenance notice) — the geometry stays package-owned, so no consumer `min-h-dvh` / flex CSS.
  */
 export type CenteredShellAlignProp = "start" | "center";
+/**
+ * ErrorSurface shell contract — WHERE the exception surface lives, not how it looks.
+ *
+ * `"application"` (403 / 404): the failure happened INSIDE the authenticated app, so the surface is
+ * the page BODY of the `AppShell` the route already renders. It never reconstructs nav chrome — a
+ * component cannot manufacture the sidebar/topbar/user menu, which are consumer-owned; it renders
+ * as `AppShell`'s children (usually inside a `PageContainer`) so the shell is PRESERVED and the
+ * user is never stranded chrome-less.
+ *
+ * `"system"` (500 / 503): the app itself failed — session and nav data may be gone — so the surface
+ * owns the whole page and renders package-owned viewport-centred geometry
+ * (`CenteredShell align="center"`), with no consumer `min-h-dvh` / flex CSS at 1440 / 1024 / 390.
+ */
+export type ErrorSurfaceModeProp = "application" | "system";
+/**
+ * The HTTP status an ErrorSurface presents. Deliberately closed to the four exception pages every
+ * app ships (RFC 9110 §15.5.4 / §15.5.5 / §15.6.1 / §15.6.4); it drives the default icon, tone and
+ * the recommended `mode`. A number, never a string — it is the numeric status, and it is rendered
+ * with tabular figures.
+ */
+export type ErrorSurfaceStatusProp = 403 | 404 | 500 | 503;
 /**
  * AuthShell named flow preset — the page MEASURE contract for a canonical hosted-identity flow
  * (card max-width plus the desktop and mobile page gutters), owned by component tokens.
- * `"default"` keeps the shell's own measure; `"device-authorization"` is the 380px device-grant
- * measure with a 5px mobile inline gutter; `"context-selection"` is the 25rem organisation/context
- * picker measure that goes edge-to-edge on mobile; `"account-recovery"` is the 432px SCR-008
- * measure shared by the password-recovery and sign-in MFA challenge panels (15px mobile inline
- * gutter). Orthogonal to AuthShell's `variant` (which owns control density and heading size) —
- * combine them.
+ * `"default"` keeps the shell's own measure; `"login"` owns SCR-001's stable card anchor for
+ * standalone and requester flows; `"device-authorization"` is the 380px device-grant measure with
+ * a 5px mobile inline gutter; `"context-selection"` is the 25rem organisation/context picker
+ * measure that goes edge-to-edge on mobile; `"account-recovery"` is the 432px SCR-008 measure
+ * shared by the password-recovery and sign-in MFA challenge panels (15px mobile inline gutter);
+ * `"registration"` is the 360px sign-up measure — the only START-aligned preset, because a
+ * registration card is the tallest surface in the set and a centred tall card overflows above the
+ * scroll origin, and the only one with its own footer-clearance knob.
+ * Orthogonal to AuthShell's `variant` (which owns control density and heading size) — combine them.
  */
-export type AuthShellPresetProp = "default" | "device-authorization" | "context-selection" | "account-recovery";
+export type AuthShellPresetProp = "default" | "login" | "registration" | "device-authorization" | "context-selection" | "account-recovery";
 /** Shared gap between layout children; components may document subsets. */
 export type GapProp = "xs" | "sm" | "md" | "lg" | "xl";
 /** DataTable row density subset. */
 export type TableDensityProp = Exclude<DensityProp, "default">;
+/**
+ * CenteredShell named page preset — the token-owned SHELL geometry of a whole page shape.
+ * `"default"` keeps the shell's own box (and emits no attribute at all, so it can match no rule).
+ * `"public-landing"` is the PUBLIC marketing / product landing contract: one content measure
+ * shared by the header bar, the centred column and the footer, the section rhythm between page
+ * sections, the flat (elevation-free) public-surface chrome and the hero heading tier — all owned
+ * by `--centered-shell-landing-*` knobs so the landing COMPOSITION (hero, nav, sections, footer —
+ * each of which fails the Framework-Component Test) needs no page-local CSS.
+ */
+export type CenteredShellPresetProp = "default" | "public-landing";

package/dist/styles/alert-layout.css

@@ -51,6 +51,42 @@
     padding-inline-end: calc(var(--alert-space-inset) + var(--space-8));
   }
 
+  /*
+   * BANNER variant (gh#255) — the same Alert, re-measured as page chrome: edge-to-edge, square,
+   * ruled only on the block-end edge so it separates itself from the content BELOW it. Declared
+   * after the base box (equal specificity → source order wins) and it touches geometry only, so
+   * every tone, the icon treatment, the actions grid and the dismiss control are inherited
+   * unchanged from the inline alert above.
+   */
+  [data-slot="alert"][data-variant="banner"] {
+    border-radius: var(--banner-radius);
+    border-width: var(--banner-border-width);
+    border-block-end-width: var(--banner-border-block-end-width);
+    padding: var(--banner-space-block) var(--banner-space-inline);
+  }
+
+  /* The dismissible reserve is re-derived from the BANNER inset — reusing the inline-alert
+   * calc would leave a ✕-sized hole on a strip whose own inset is half as deep. */
+  [data-slot="alert"][data-variant="banner"][data-dismissible] {
+    padding-inline-end: calc(var(--banner-space-inline) + var(--space-8));
+  }
+
+  [data-slot="alert"][data-variant="banner"] > [data-slot="alert-dismiss"] {
+    top: var(--banner-dismiss-space-offset);
+    inset-inline-end: var(--banner-dismiss-space-offset);
+  }
+
+  /* The compact page gutter. `.ui-page-container` steps `--space-page-active-x` down at this same
+   * breakpoint, and a banner mounted ABOVE the container (the normal case — page/app chrome) does
+   * not inherit that, so without this rule its text would sit 8px outside the page title at 390px.
+   * Bound to its own `--banner-space-inline-compact` knob rather than a literal, so a service
+   * retunes the mobile inset the same way it retunes the desktop one. */
+  @media (max-width: 720px) {
+    [data-slot="alert"][data-variant="banner"] {
+      --banner-space-inline: var(--banner-space-inline-compact);
+    }
+  }
+
   [data-slot="alert-icon"] {
     width: 1.25rem;
     height: 1.25rem;

package/dist/styles/control.css

@@ -745,6 +745,34 @@
   border-start-end-radius: var(--radius-md);
   border-end-end-radius: var(--radius-md);
 }
+.ui-otp-group[data-appearance="grouped"] {
+  overflow: hidden;
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-md);
+  background: hsl(var(--background));
+}
+.ui-otp-group[data-appearance="grouped"] .ui-otp-slot {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.ui-otp-group[data-appearance="grouped"] .ui-otp-slot[data-active="true"] {
+  box-shadow: none;
+}
+.ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
+  border-color: hsl(var(--focus-ring-color, var(--ring)));
+  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));
+}
+.ui-otp-container:has(.ui-otp-input[aria-invalid="true"]) .ui-otp-group[data-appearance="grouped"] {
+  border-color: hsl(var(--destructive));
+}
+.ui-otp-container:has(.ui-otp-input[aria-invalid="true"])
+  .ui-otp-group[data-appearance="grouped"]:has(.ui-otp-slot[data-active="true"]) {
+  box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--destructive));
+}
+.ui-otp-container:has(.ui-otp-input:disabled) .ui-otp-group[data-appearance="grouped"] {
+  background: hsl(var(--muted));
+}
 .ui-otp-slot[data-active="true"] {
   z-index: 1;
   box-shadow: 0 0 0 var(--focus-ring-width) hsl(var(--focus-ring-color, var(--ring)));

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;
@@ -506,6 +529,41 @@
     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 {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--page-header-meta-gap);
+    min-inline-size: 0;
+  }
+
+  .ui-page-header-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--page-header-meta-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);
+  }
+
   /* Compact viewports use a responsive type step, not compact density: body/control text and
    * touch targets remain readable while page chrome stops competing with primary actions. A
    * single Flex action group must wrap even when the consumer omitted `wrap`, because clipping
@@ -711,6 +769,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
@@ -881,6 +953,84 @@
     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.
@@ -1122,3 +1272,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))));
   }
 }