actual-css 0.11.1 → 0.13.0

package/dist/actual.full.css

@@ -41,7 +41,8 @@ select {
 
   *,
   *::before,
-  *::after {
+  *::after,
+  ::backdrop {
     animation-duration: 0.01ms !important;
     animation-delay: 0s !important;
     animation-iteration-count: 1 !important;
@@ -72,7 +73,6 @@ select {
   --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   --font-width: 100%;
-  --font-width-dense: 95%;
   --line-height: 1.5;
   --line-height-tight: 1.25;
   --line-height-relaxed: 1.75;
@@ -134,9 +134,11 @@ select {
      without a component ring (links, summary, plain items). Components draw
      the themed ring instead: --focus-ring-width solid --focus. See focus.css
      for the two contracts. Both share --focus-ring-width: they differ in
-     color only. */
+     color only. No --focus-outline alias here: declared on :root it would be
+     inherited already computed, so a theme island or a region setting
+     --focus-ring-width would not reach it. focus.css composes the line on the
+     focused element instead. */
   --focus-outline-color: currentColor;
-  --focus-outline: var(--focus-ring-width) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
   --focus-ring-width: 2px;
 
@@ -156,8 +158,9 @@ select {
   --bar-height: 0.65rem;
 
   /* Controls — inputs and buttons share --control-size so heights always match.
-     .compact/.spacious (variants.css) switch geometry without changing
-     --control-font-size. Local .sm/.lg component sizes switch all three.
+     .compact/.spacious (variants.css) switch geometry (--control-size,
+     --control-pad-x) without changing --control-font-size. Local .sm/.lg
+     component sizes switch all three.
 
      Inline choices (checkbox, radio, switch) are typographic, not field-sized:
      they sit on a line of text, so they follow --control-font-size through
@@ -168,17 +171,35 @@ select {
 
      --control-pad-x is the opposite kind of token: a resolved geometry length,
      not an em ratio. Every part of one control must see the same horizontal
-     distance, so it is stated in the typographic tokens rather than an em
-     whose value would change on a descendant with its own font size (the
-     input-icon glyph, made larger by --input-icon-size). It mirrors
-     --control-font-size and is rebound beside it at the .sm/.lg boundaries
-     (variants.css); declaring it only in :root would freeze the md value,
-     because a var() inside a custom property resolves where it is declared. */
+     distance, so it is stated in lengths rather than an em whose value would
+     change on a descendant with its own font size (the input-icon glyph, made
+     larger by --input-icon-size).
+
+     Like --control-size, it is a scale plus a selection: themes set the
+     -sm/-md/-lg steps, and :root, .sm/.lg and .compact/.spacious (variants.css)
+     pick one. A theme that wrote --control-pad-x itself would be overwritten
+     by every size and density boundary — bootstrap-v6's 12px became a wider
+     13px inside .compact. The selection is rebound at each boundary because a
+     var() inside a custom property resolves where it is declared.
+
+     The boundaries also write --control-step-sm/-md/-lg: which step is
+     selected, as 0/1 weights that mean the same under every theme. A theme
+     that sets its own steps rebuilds the selection from them in its own block
+     (bootstrap-v6.css), so a nested island of it reads its steps without
+     resetting the density it sits in. Never rebind on every [data-theme]: a
+     palette-only island then became a geometry boundary that an inherited
+     --control-size or --control-pad-x no longer crossed. */
   --control-size-sm: 2rem;
   --control-size-md: 2.375rem;
   --control-size-lg: 2.75rem;
   --control-size: var(--control-size-md);
-  --control-pad-x: var(--font-size-md);
+  --control-pad-x-sm: var(--font-size-xs);
+  --control-pad-x-md: var(--font-size-md);
+  --control-pad-x-lg: var(--font-size-lg);
+  --control-pad-x: var(--control-pad-x-md);
+  --control-step-sm: 0;
+  --control-step-md: 1;
+  --control-step-lg: 0;
   --control-font-size: var(--font-size-md);
   --choice-control-size: 1.125em;
   --disabled-opacity: 0.65;
@@ -296,7 +317,9 @@ select {
  * Derived: "Theme-derived aliases", Tone subsystem, Backdrop fill — reference
  * other tokens; hard-coded overrides on a custom theme will break the intent.
  * Exception: --surface-opaque and --surface-solid-fg are public; a theme with
- * translucent surfaces overrides them with opaque values.
+ * translucent surfaces overrides them with opaque values. --border-control is
+ * public too: the resting edge of a neutral control, apart from structural
+ * separators.
  * Internal: --hgroup-gap.
  */
 :root {
@@ -367,6 +390,10 @@ select {
      fields, a solid band), which rules out the primary itself. */
   --focus: hsl(268 30% 55%);
   --hover-overlay: hsl(260 20% 10% / 0.04);
+  /* Solid fills take a stronger wash than the subtle shared overlay. Black in
+     both schemes on purpose: a solid button darkens on hover even in dark mode
+     (see themes/gradient.css), unlike the neutral washes. */
+  --hover-overlay-solid: rgb(0 0 0 / 0.14);
 
   /* Radius scale — themes may override the whole scale (e.g. [data-theme="square"]) */
   --radius: 0.5rem;
@@ -394,6 +421,9 @@ select {
      never a fill. --surface-solid-fg is the ink on --surface-solid. */
   --surface-opaque: var(--surface);
   --surface-solid-fg: var(--surface);
+  /* The edge that tells a control apart from the surface, where --border only
+     separates surfaces: fields, choices, switch, OTP cells, choice cards. */
+  --border-control: var(--border);
 }
 
 /* Soft foreground hooks — the soft ink is the intent rebated toward the local
@@ -515,7 +545,7 @@ select {
  * Public hooks:
  * --link
  * --hr-space
- * --font-width / --font-width-dense (see variants.css for the dense application)
+ * --font-width (the document's font-stretch; a theme typography choice)
  */
 
 body {
@@ -665,17 +695,21 @@ small {
  *   components/badge.css   — .badge default soft behind explicit --ui-*
  *   components/alert.css   — .alert default soft behind explicit --ui-*
  *
- * .compact/.spacious set inherited density tokens: spacing rhythm and geometry
- * only, plus a slight typographic width bonus. Density never changes font size
- * or icon size. Controls consume --control-size; non-control components may
+ * Three axes, each predictable on its own:
+ *   .sm/.lg            size    — typography + geometry, local to a component
+ *   .compact/.spacious density — rhythm + geometry, inherited by a region
+ *   .tight/.loose      rhythm  — --gap only, inherited by a region
+ *
+ * Density never touches typography: no font size, icon size or font width.
+ * A width bonus through font-stretch only showed on typefaces with a wdth axis,
+ * so .compact meant something different per OS and font; a condensed table is
+ * a typographic decision for the application. Controls consume --control-size
+ * and --control-pad-x, so a compact control is shorter and narrower (a height
+ * change alone read as the same control squashed); non-control components may
  * consume --density-* when the context should affect their local rhythm.
- * .compact applies --font-width-dense through font-stretch (a variable wdth
- * axis when available, otherwise normal width-face matching); layout must
- * never depend on the narrowing being available. .spacious restores
- * --font-width, so a spacious island inside a compact context returns to the
- * normal width exactly as it restores its own gap, spacing, and control size.
- * Themes whose typeface has no useful width axis opt out with
- * --font-width-dense: 100%.
+ *
+ * .tight/.loose reuse the density --gap steps, so a tight row and a compact
+ * one share one rhythm.
  *
  * .sm/.lg are local size roles, not shared measurements. Shared control
  * participants below map both typography and geometry; components with
@@ -714,18 +748,35 @@ small {
   --ui-border: var(--border);
 }
 
+/* Each boundary selects a control step twice: the values, resolved here, and
+   the 0/1 step weights a nested [data-theme] island rebuilds them from
+   (tokens.css). */
 .compact {
   --gap: var(--space-20);
   --density-space: var(--space-20);
   --control-size: var(--control-size-sm);
-  font-stretch: var(--font-width-dense);
+  --control-pad-x: var(--control-pad-x-sm);
+  --control-step-sm: 1;
+  --control-step-md: 0;
+  --control-step-lg: 0;
 }
 
 .spacious {
   --gap: var(--space-50);
   --density-space: var(--space-50);
   --control-size: var(--control-size-lg);
-  font-stretch: var(--font-width);
+  --control-pad-x: var(--control-pad-x-lg);
+  --control-step-sm: 0;
+  --control-step-md: 0;
+  --control-step-lg: 1;
+}
+
+.tight {
+  --gap: var(--space-20);
+}
+
+.loose {
+  --gap: var(--space-50);
 }
 
 /* Shared control scale. Wrappers are listed when their descendants form one
@@ -754,7 +805,10 @@ small {
 ).sm {
   --control-size: var(--control-size-sm);
   --control-font-size: var(--font-size-sm);
-  --control-pad-x: var(--font-size-sm);
+  --control-pad-x: var(--control-pad-x-sm);
+  --control-step-sm: 1;
+  --control-step-md: 0;
+  --control-step-lg: 0;
 }
 
 :where(
@@ -778,7 +832,10 @@ small {
 ).lg {
   --control-size: var(--control-size-lg);
   --control-font-size: var(--font-size-lg);
-  --control-pad-x: var(--font-size-lg);
+  --control-pad-x: var(--control-pad-x-lg);
+  --control-step-sm: 0;
+  --control-step-md: 0;
+  --control-step-lg: 1;
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable
@@ -826,16 +883,18 @@ small {
    Documented exception: an invalid field focuses in --form-invalid-border
    (danger), so the error stays visible at the point of correction. The border
    carries the same hook; report:theme-contrast measures that line at 3:1
-   against the field's background alongside --focus. */
+   against the field's background alongside --focus.
+
+   Public hooks:
+   --focus-outline (fallback-only: replaces the whole generic line)
+*/
 :focus {
-  outline: var(--focus-outline);
+  outline: var(--focus-outline, var(--focus-ring-width) solid var(--focus-outline-color));
   outline-offset: var(--focus-outline-offset);
 }
 
-@supports selector(:focus-visible) {
-  :focus:not(:focus-visible) {
-    outline: none;
-  }
+:focus:not(:focus-visible) {
+  outline: none;
 }
 
 @media print {
@@ -1298,7 +1357,22 @@ small {
  * --cluster-wrap
  *
  * Child contract: direct-child margins are reset, spacing comes from --gap.
+ * A ul/ol/menu keeps its semantics but loses list chrome (see below).
+ *
+ * The hooks describe this row's own geometry, so they stop at each cluster:
+ * set them on the cluster itself, or target nested rows with a selector. The
+ * gap token is context rhythm and keeps inheriting.
  */
+
+/* Instance boundary: an ancestor's value never reaches a nested cluster.
+   Zero specificity, so any class or inline style on the cluster wins without
+   depending on import order; `initial` makes the var() fallbacks apply. */
+:where(.cluster) {
+  --cluster-align: initial;
+  --cluster-justify: initial;
+  --cluster-wrap: initial;
+}
+
 .cluster {
   display: flex;
   flex-direction: row;
@@ -1312,6 +1386,16 @@ small {
   margin: 0;
 }
 
+/* Horizontal, wrapping layout is incompatible with list markers and native
+   indentation: a ul/ol/menu applied with .cluster stays a list in the DOM, but
+   its visual chrome would be accidental. .stack intentionally leaves this
+   alone — a vertical list can keep its numbers. */
+:where(ul, ol, menu).cluster {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 /*
  * Centered content column with a maximum measure.
  *
@@ -1321,6 +1405,8 @@ small {
  * --center-size
  * --center-pad
  */
+/* The hooks inherit on purpose: a site's content width is page policy, so a
+   theme sets them once on :root for every .center. */
 .center {
   box-sizing: content-box;
   inline-size: calc(100% - var(--center-pad, 1rem) * 2);
@@ -1493,6 +1579,9 @@ small {
  *
  * Child contract: every direct child is a peer; the flex-basis applies to all.
  */
+/* No instance reset, unlike .cluster and .grid: the children read the hook,
+   and a switcher nested as a direct child takes its own flex-basis from its
+   parent's value, so the hook must reach it. */
 .switcher {
   display: flex;
   flex-direction: row;
@@ -1525,6 +1614,9 @@ small {
  * visual, reading and keyboard order all agree — the role rules swap so the
  * aside still takes its preferred width and the main still reclaims the row.
  */
+/* No instance reset, unlike .cluster and .grid: the regions read the hooks,
+   and a layout nested as a region takes its own size from its parent's
+   values, so the hooks must reach it. */
 .sidebar-layout {
   display: flex;
   flex-direction: row;
@@ -1586,6 +1678,13 @@ small {
  * the thresholds were arrived at: docs/design-notes/grid.md.
  */
 
+/* Instance boundary: a nested grid never takes its parent's track template.
+   Zero specificity, so a class or inline style on the grid itself wins. */
+:where(.grid) {
+  --grid-columns: initial;
+  --grid-min: initial;
+}
+
 /* --grid-columns replaces the intrinsic auto-fit template: once set, the grid
    no longer collapses on its own and the author owns narrow-container
    collapse. */
@@ -1771,7 +1870,16 @@ small {
  * draw their native scrollbar — the intended fallback, not a broken state.
  *
  * Styles the scrollbar only; it does not create the overflow. Pair it with
- * .overflow-auto or a component that already scrolls.
+ * .overflow-auto or a component that already scrolls (horizontal steps, a
+ * table wrap; tabs hide their bar and fade their own edges). No edge fade
+ * here: a mask would dictate the strip's scroll-padding and focus geometry for
+ * a decorative cue, and an item clipped at the edge already says the strip
+ * continues.
+ *
+ * Not on touch: Chromium trades the overlay scrollbar of a touch screen,
+ * hidden at rest, for a classic always-visible one as soon as scrollbar-color
+ * or scrollbar-width is set. On a phone that painted a permanent bar under
+ * every strip; the native overlay is the better cue there.
  *
  * Public hooks:
  * --scroller-track
@@ -1780,9 +1888,16 @@ small {
 .scroller {
   --scroller-track: transparent;
   --scroller-thumb: var(--border);
+}
 
-  scrollbar-color: var(--scroller-thumb) var(--scroller-track);
-  scrollbar-width: thin;
+/* Any primary pointer but touch: a keyboard-only or pointerless device
+   (pointer: none) draws classic scrollbars too. `all and` keeps the negation
+   valid in Media Queries 3 parsers. */
+@media not all and (pointer: coarse) {
+  .scroller {
+    scrollbar-color: var(--scroller-thumb) var(--scroller-track);
+    scrollbar-width: thin;
+  }
 }
 
 /* Opt-in gutter: reserves space so the layout does not shift when
@@ -1883,8 +1998,9 @@ small {
 /*
  * Sticky, frosted top bar shell for app/dashboard shells (persistent
  * sidebar + topbar layouts). Owns positioning, stacking, and the frosted
- * background only — row content (search, breadcrumb, actions) stays local
- * to the page.
+ * background; it also lays its children out as a default row that a layout
+ * primitive on the same element (such as .cluster) replaces. Row content
+ * (search, breadcrumb, actions) stays local to the page.
  *
  * Docs: docs/pages/layout/topbar.md
  *
@@ -1898,16 +2014,21 @@ small {
   inset-block-start: 0;
   z-index: var(--z-sticky);
   isolation: isolate;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--gap);
   padding-block: var(--space-30);
   padding-inline: var(--space-40);
   border-block-end: var(--border-width) solid var(--border);
   background: var(--surface);
 }
 
+/* The row is a default at zero specificity: .topbar and the primitives share
+   layout/, so at class weight their file order alone would pick the winner. */
+:where(.topbar) {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gap);
+}
+
 /* Both conditions are required: the translucent background contains var(),
    so a browser with backdrop-filter but not color-mix (e.g. Safari < 16.2)
    would accept the declaration at parse time, fail it at computed-value
@@ -2040,7 +2161,7 @@ small {
 .input,
 .textarea,
 .select {
-  --control-border: var(--border);
+  --control-border: var(--border-control);
   --control-bg: var(--surface);
   --control-fg: var(--text);
   --control-cursor: auto;
@@ -2266,7 +2387,7 @@ small {
 /* Control geometry. --choice-* are the per-state tokens. */
 .check,
 .radio {
-  --choice-border: var(--border);
+  --choice-border: var(--border-control);
   --choice-bg: var(--surface);
   --choice-mark: var(--primary-fg);
 
@@ -2454,7 +2575,7 @@ small {
     calc((var(--control-size) - 1lh - 2 * var(--border-width)) / 2)
   );
   padding-inline: var(--space-20);
-  border: var(--border-width) solid var(--border);
+  border: var(--border-width) solid var(--border-control);
   border-radius: var(--radius-sm);
   background: var(--surface-subtle);
   color: var(--text);
@@ -2488,7 +2609,7 @@ small {
   inline-size: var(--control-size);
   block-size: var(--control-size);
   padding: var(--border-width);
-  border: var(--border-width) solid var(--border);
+  border: var(--border-width) solid var(--border-control);
   border-radius: var(--radius);
   background: var(--surface);
   cursor: pointer;
@@ -2542,6 +2663,8 @@ small {
  *
  * Imported by default through forms/index.css. Custom builds may omit this
  * file when an app wants to own validation styling completely.
+ * Without :has(), automatic error display and choice-card borders drop;
+ * native control states and the explicit .field.danger route stay available.
  *
  * State coverage (which states each component ships) is audited in
  * tests/validation.test.js and summarized in docs/pages/forms/validation.md —
@@ -2563,11 +2686,14 @@ small {
   display: block;
 }
 
-@supports selector(:has(*)) {
-  .field:has([aria-invalid="true"]) > .field-error,
-  .needs-validation.was-validated .field:has(:invalid) > .field-error {
-    display: block;
-  }
+.field:has([aria-invalid="true"]) > .field-error,
+.needs-validation.was-validated .field:has(:invalid) > .field-error {
+  display: block;
+}
+
+/* biome-ignore lint/style/noDescendingSpecificity: every invalid route reveals the error; keep :user-invalid separate so unsupported engines retain the other routes. */
+.needs-validation .field:has(:user-invalid) > .field-error {
+  display: block;
 }
 
 :where(.input, .textarea, .select, .check, .radio, .switch)[aria-invalid="true"],
@@ -2591,70 +2717,60 @@ small {
   --switch-bg: var(--danger);
 }
 
-@supports selector(:user-invalid) {
-  .needs-validation .check:is(:checked, :indeterminate):user-invalid,
-  .needs-validation .radio:checked:user-invalid {
-    --choice-bg: var(--danger);
-  }
+.needs-validation .check:is(:checked, :indeterminate):user-invalid,
+.needs-validation .radio:checked:user-invalid {
+  --choice-bg: var(--danger);
+}
 
-  .needs-validation .switch:checked:user-invalid {
-    --switch-bg: var(--danger);
-  }
+.needs-validation .switch:checked:user-invalid {
+  --switch-bg: var(--danger);
 }
 
 /* Choice cards hide their native input, so invalid state must surface on the
    card itself. Sets the same --form-invalid-border hook the card's border
    consumes. */
-@supports selector(:has(*)) {
-  .choice-card:has([aria-invalid="true"]),
-  .needs-validation.was-validated .choice-card:has(:invalid) {
-    --form-invalid-border: var(--danger);
-  }
+.choice-card:has([aria-invalid="true"]),
+.needs-validation.was-validated .choice-card:has(:invalid) {
+  --form-invalid-border: var(--danger);
 }
 
-@supports selector(:user-invalid) {
-  .needs-validation :is(.input, .textarea, .select, .check, .radio, .switch):user-invalid {
-    --form-invalid-border: var(--danger);
-  }
+.needs-validation :is(.input, .textarea, .select, .check, .radio, .switch):user-invalid {
+  --form-invalid-border: var(--danger);
 }
 
-@supports selector(:has(:user-invalid)) {
-  .needs-validation .field:has(:user-invalid) > .field-error {
-    display: block;
-  }
-
-  .needs-validation .choice-card:has(:user-invalid) {
-    --form-invalid-border: var(--danger);
-  }
+.needs-validation .choice-card:has(:user-invalid) {
+  --form-invalid-border: var(--danger);
 }
 
 /*
- * Form actions — bottom form bar with sticky variant.
+ * Form actions — the role of a .cluster action row that closes a form.
  *
  * Docs: docs/pages/forms/form-actions.md
  *
- * A flex cluster of buttons/actions that closes a form. The sticky variant
- * docks to the viewport bottom with a translucent blur where supported; at
- * rest it stays visually neutral so it does not double as a separator.
+ * Markup: `<div class="cluster form-actions">`. The cluster owns the row
+ * (flex, wrap, gap); this role owns the form-specific alignment policy and the
+ * opt-in sticky variant. The distance to the fields above belongs to the
+ * parent layout (.stack on the form), never to a margin here: a margin would
+ * add to a stack's gap. The sticky variant docks to the viewport bottom with a
+ * translucent blur where supported; at rest it stays visually neutral so it
+ * does not double as a separator.
  *
  * Public hooks:
  * --form-actions-align
  * --form-actions-justify
- * --form-actions-margin-block-start
  *
  * Internal:
  * --form-actions-sticky-block-offset (owned by .form-actions.sticky)
  * --form-actions-sticky-inline-offset (owned by .form-actions.sticky)
  * --form-actions-sticky-padding (owned by .form-actions.sticky)
  */
+
+/* The role relays its policy into the row's cluster hooks. Cluster hooks stop
+   at every nested .cluster, so the relay cannot leak, and this class beats the
+   cluster's zero-specificity reset in any import order. */
 .form-actions {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: var(--gap);
-  align-items: var(--form-actions-align, center);
-  justify-content: var(--form-actions-justify, flex-start);
-  margin-block-start: var(--form-actions-margin-block-start, var(--space-50));
+  --cluster-align: var(--form-actions-align, center);
+  --cluster-justify: var(--form-actions-justify, flex-start);
 }
 
 /* Opt-in sticky variant. When the bar is not stuck (at rest) the translucent
@@ -2780,7 +2896,7 @@ small {
 
 .switch {
   --switch-bg: var(--border);
-  --switch-border: var(--border);
+  --switch-border: var(--border-control);
   --switch-knob: var(--surface-raised);
   --switch-block-size: calc(var(--choice-control-size) + 0.125em);
   --switch-width: calc(var(--switch-block-size) * 1.8);
@@ -3117,7 +3233,7 @@ small {
   --choice-card-pad: var(--density-space, var(--space-40));
   --choice-card-gap: var(--space-30);
   --choice-card-radius: var(--radius);
-  --choice-card-border: var(--border);
+  --choice-card-border: var(--border-control);
   --choice-card-bg: var(--surface);
   --choice-card-check-size: 1.25em;
 
@@ -3453,10 +3569,13 @@ small {
  * messages stay in the surrounding .field, not inside the cell, so the
  * resting label can center on the control alone.
  *
- * The control must precede the label: the float is driven by the general
- * sibling combinator and :placeholder-shown. Injected nodes may appear between
- * the control and the label (password managers, extension wrappers); the cell
- * contract stays a single control plus one label. Every .input/.textarea needs
+ * The cell reads its control's state through :has(), so the label may come
+ * before or after the control (a form theme rendering label then widget needs
+ * no reordering). Injected sibling nodes are tolerated (password managers,
+ * extension wrappers) as long as the control stays a direct child; the cell
+ * contract stays a single control plus one label, since a second control
+ * would float the label on either one's state.
+ * Every .input/.textarea needs
  * placeholder=" " to expose a reliable empty state — without it the label
  * only reacts to focus.
  *
@@ -3506,23 +3625,22 @@ small {
 }
 
 /* Single-line controls rest in the middle until they receive a value. */
-.floating-field > :is(.input, .select) ~ .field-label {
+.floating-field:has(> :is(.input, .select)) > .field-label {
   inset-block-start: 50%;
   transform: translateY(-50%);
 }
 
 /* An empty textarea label follows the control's normal first-line position;
    the control itself keeps the extra headroom reserved for its floated state. */
-.floating-field > .textarea ~ .field-label {
+.floating-field:has(> .textarea) > .field-label {
   inset-block-start: calc(1em + var(--border-width));
   transform: none;
 }
 
 /* :autofill covers prefilled values before interaction, when the browser may
    not have propagated the value to the placeholder state yet. */
-.floating-field
-  > :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown))
-  ~ .field-label {
+.floating-field:has(> :is(.input, .textarea):is(:focus, :autofill, :not(:placeholder-shown)))
+> .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
@@ -3532,16 +3650,16 @@ small {
 /* Controls without a dependable :placeholder-shown empty state stay floated:
    select always, and date/time inputs whose placeholder rendering is
    inconsistent across engines (Firefox shows none). */
-.floating-field
+.floating-field:has(
   > :is(
-    .select,
-    .input[type="date"],
-    .input[type="time"],
-    .input[type="datetime-local"],
-    .input[type="month"],
-    .input[type="week"]
-  )
-  ~ .field-label {
+      .select,
+      .input[type="date"],
+      .input[type="time"],
+      .input[type="datetime-local"],
+      .input[type="month"],
+      .input[type="week"]
+    )
+) > .field-label {
   inset-block-start: var(--floating-label-top);
   transform: none;
   font-size: var(--font-size-xs);
@@ -3577,7 +3695,7 @@ small {
   --otp-cell-size: var(--control-size);
   --otp-gap: var(--space-10);
   --otp-font-size: 1.5em;
-  --otp-cell-border: var(--border);
+  --otp-cell-border: var(--border-control);
   --otp-cell-bg: var(--surface);
   --otp-caret-space: calc((var(--otp-cell-size) - 1ch) / 2 + var(--otp-gap) + 1px);
 
@@ -3663,10 +3781,9 @@ small {
   --otp-cell-border: var(--danger);
 }
 
-@supports selector(:user-invalid) {
-  .needs-validation .otp > input:user-invalid ~ span {
-    --otp-cell-border: var(--danger);
-  }
+/* biome-ignore lint/style/noDescendingSpecificity: all invalid routes write the same border, so their order cannot change the state. Keep :user-invalid separate so unsupported engines retain the other routes. */
+.needs-validation .otp > input:user-invalid ~ span {
+  --otp-cell-border: var(--danger);
 }
 
 .otp > input:disabled {
@@ -3736,7 +3853,6 @@ small {
  * --btn-bg
  * --btn-fg
  * --btn-border
- * --btn-default-hover-bg
  * --btn-border-block-end-color
  * --btn-border-block-end-width
  * --btn-border-block
@@ -3762,9 +3878,8 @@ small {
   --btn-bg: var(--ui-bg, var(--btn-default-bg, var(--intent, var(--neutral))));
   --btn-fg: var(--ui-fg, var(--btn-default-fg, var(--intent-fg, var(--neutral-fg))));
   --btn-border: var(--ui-border, var(--btn-default-border, transparent));
-  --btn-default-hover-bg: var(--btn-bg);
   --btn-radius: var(--radius);
-  --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
+  --btn-hover-overlay: var(--hover-overlay-solid, var(--hover-overlay));
   --btn-border-block: calc(
     var(--border-width) +
     var(--btn-border-block-end-width, var(--border-width))
@@ -3844,10 +3959,6 @@ small {
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  .btn {
-    --btn-default-hover-bg: color-mix(in oklch, var(--btn-bg) 88%, black);
-  }
-
   .btn.soft {
     --ui-hover-bg: color-mix(
       in oklab,
@@ -3863,9 +3974,9 @@ small {
 }
 
 /* The .soft/.outline/.ghost hover recipe (--ui-hover-bg) is set locally above;
-   the overlay darkening for solid/soft is .btn-specific. */
+   the overlay darkening for solid is .btn-specific. */
 .btn:not(:where(:disabled, [aria-disabled="true"])):hover {
-  background: var(--ui-hover-bg, var(--btn-default-hover-bg));
+  background: var(--ui-hover-bg, var(--btn-bg));
   /* Huge inset spread paints the overlay over any border-radius without a
      pseudo-element; a plain background would replace the fill instead of
      darkening it. */
@@ -4198,7 +4309,6 @@ a.btn[aria-disabled="true"] {
   --badge-size: var(--badge-dot-size);
   --badge-bg: var(--intent, var(--neutral));
   --badge-fg: var(--intent-fg, var(--neutral-fg));
-  --badge-border: transparent;
   padding: 0;
   border: 0;
   inline-size: var(--badge-size);
@@ -4230,10 +4340,6 @@ a.btn[aria-disabled="true"] {
 }
 
 @supports (color: color-mix(in oklch, red, white)) {
-  :is(a.badge, button.badge):is(.solid, :empty) {
-    --ui-hover-bg: color-mix(in oklch, var(--intent, var(--neutral)) 88%, black);
-  }
-
   :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
     --badge-default-hover-bg: color-mix(
       in oklab,
@@ -4260,7 +4366,7 @@ a.btn[aria-disabled="true"] {
   :where(:disabled, [aria-disabled="true"])
 ):hover {
   /* Huge inset spread paints the overlay over the pill radius (see button.css). */
-  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+  box-shadow: inset 0 0 0 999px var(--hover-overlay-solid, var(--hover-overlay));
 }
 
 button.badge {
@@ -4402,10 +4508,11 @@ a.badge[aria-disabled="true"] {
   }
 }
 
-/* Decorative leading icon — use .alert-icon on the icon element. */
+/* Decorative leading icon — use .alert-icon on the icon element. display and
+   vertical-align are the no-:has() layout (Degraded tier: the icon sits inline
+   before the text); the grid anatomy below replaces them. */
 .alert > .alert-icon {
   display: inline-block;
-  flex: none;
   inline-size: var(--alert-icon-size);
   block-size: var(--alert-icon-size);
   font-size: var(--alert-icon-size);
@@ -4437,45 +4544,44 @@ a.badge[aria-disabled="true"] {
 
 /* Grid anatomy — activated by a leading icon, a trailing dismiss button, or
    both. Icon and dismiss are pinned to the outer columns; anything else (the
-   message content) flows into the remaining text column. */
-@supports selector(.alert:has(> *)) {
-  .alert:has(> .alert-icon, > .close) {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr);
-    align-items: var(--items-align, start);
-    column-gap: var(--space-30);
-  }
-
-  .alert:has(> .alert-icon) {
-    grid-template-columns: auto minmax(0, 1fr);
-  }
+   message content) flows into the remaining text column. Without :has(), the
+   grid rules drop together and the alert keeps ordinary block flow. */
+.alert:has(> .alert-icon, > .close) {
+  display: grid;
+  /* No grid-template-columns: the icon and close branches below always set
+     it, since one of them is what matched. */
+  align-items: var(--items-align, start);
+  column-gap: var(--space-30);
+}
 
-  .alert:has(> .alert-icon) > .alert-icon {
-    grid-column: 1;
-    grid-row: 1 / -1;
-    display: inline-grid;
-    place-items: center;
-    margin-block-start: 0.125em;
-  }
+.alert:has(> .alert-icon) {
+  grid-template-columns: auto minmax(0, 1fr);
+}
 
-  .alert:has(> .alert-icon) > :not(.alert-icon, .close) {
-    grid-column: 2;
-  }
+.alert:has(> .alert-icon) > .alert-icon {
+  grid-column: 1;
+  grid-row: 1 / -1;
+  display: inline-grid;
+  place-items: center;
+  margin-block-start: 0.125em;
+}
 
-  .alert:has(> .close) {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
+.alert:has(> .alert-icon) > :not(.alert-icon, .close) {
+  grid-column: 2;
+}
 
-  .alert:has(> .alert-icon):has(> .close) {
-    grid-template-columns: auto minmax(0, 1fr) auto;
-  }
+.alert:has(> .close) {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
 
-  .alert:has(> .close) > .close {
-    grid-column: -2 / -1;
-    grid-row: 1;
-  }
+.alert:has(> .alert-icon):has(> .close) {
+  grid-template-columns: auto minmax(0, 1fr) auto;
 }
 
+.alert:has(> .close) > .close {
+  grid-column: -2 / -1;
+  grid-row: 1;
+}
 /* Links */
 .alert :where(a:not(.btn)) {
   color: inherit;
@@ -4561,34 +4667,6 @@ a.badge[aria-disabled="true"] {
   }
 }
 
-/*
- * Actions — a horizontal action-button cluster.
- *
- * Docs: docs/pages/patterns/actions.md
- *
- * Composes with .btn (or any inline element) and feeds layout via the shared
- * --gap token.
- *
- * Internal:
- * --gap (local value for the shared gap token)
- */
-.actions {
-  --gap: var(--space-20);
-
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--gap);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.actions > li {
-  margin: 0;
-}
-
 
 /* Surfaces */
 /*
@@ -4597,11 +4675,11 @@ a.badge[aria-disabled="true"] {
  * Docs: docs/pages/components/card.md
  *
  * Surface, border, radius, padding, density, and elevation stay local here.
- * Direct header/footer children are structural slots; a direct footer is
- * anchored to the card's bottom edge when extra block space is available (so
- * price/action rows align across equal-height cards in a grid). A bare card
- * owns its direct-child rhythm; a layout primitive on the same element takes
- * over that layout. Page layout remains the job of markup and layout
+ * Direct header/footer children are structural slots with a default split row;
+ * a direct footer is anchored to the card's bottom edge when extra block space
+ * is available (so price/action rows align across equal-height cards in a
+ * grid). A bare card owns its direct-child rhythm and its slot rows; a layout
+ * primitive on the card or on a slot takes over that layout. Page layout remains the job of markup and layout
  * primitives outside the card.
  *
  * Public hooks:
@@ -4639,6 +4717,9 @@ a.badge[aria-disabled="true"] {
 
 .card {
   --card-pad: var(--space-40);
+  /* Local anatomy, like the padding. Never var(--gap): that token is
+     inherited, so the --gap of a parent grid became the rhythm inside every
+     card (+79px per card on a 38px grid). */
   --card-gap: var(--space-30);
   --card-radius: var(--radius-lg);
   --card-max-inline-size: none;
@@ -4680,7 +4761,11 @@ a.badge[aria-disabled="true"] {
   margin-block: 0;
 }
 
-.card > :where(header, footer) {
+/* The slot row is a convenience default, not anatomy: like the root box it
+   lives at zero specificity, so a primitive, role or utility on the slot
+   (.cluster, .media, .form-actions, .justify-content-*) replaces it instead of
+   losing to components/ on source order. */
+:where(.card > header, .card > footer) {
   display: flex;
   flex-wrap: wrap;
   align-items: var(--items-align, center);
@@ -4689,15 +4774,15 @@ a.badge[aria-disabled="true"] {
   min-inline-size: 0;
 }
 
+:where(.card > header) {
+  align-items: var(--items-align, flex-start);
+}
+
 .card > :where(header, footer) > * {
   min-inline-size: 0;
   margin-block: 0;
 }
 
-.card > header {
-  align-items: var(--items-align, flex-start);
-}
-
 /* A direct footer is pinned to the bottom when the card has free space.
    Specificity beats .stack > * so a .card.stack keeps this contract. */
 .card > footer {
@@ -4712,6 +4797,7 @@ a.badge[aria-disabled="true"] {
 }
 .card.compact {
   --card-pad: var(--space-20);
+  --card-gap: var(--space-20);
 }
 
 @media print {
@@ -4732,15 +4818,19 @@ a.badge[aria-disabled="true"] {
  * Public hooks:
  * --modal-size
  * --modal-pad
- * --modal-header-bg
  * --dialog-viewport-gap
  * --dialog-icon-size
  * --dialog-icon-glyph-size
  *
  * The corner close control is .close (components/close.css).
  *
+ * The body footer is a structural slot with no layout of its own: its action
+ * row is composed in markup (`<footer class="cluster justify-content-end">`),
+ * as in the drawer. A default row here would fight every composed one.
+ *
  * Internal:
  * --dialog-inner-radius
+ * --dialog-close-reserve (header room for a corner close; zero without a close)
  * --dialog-focus-bleed
  * --dialog-viewport-block
  * --dialog-viewport-gap-default
@@ -4749,10 +4839,8 @@ a.badge[aria-disabled="true"] {
 :where(dialog).modal {
   /* --dialog-viewport-gap stays fallback-only so the responsive default can
      live in an internal token: a media query moves it without closing the
-     public hook.
-
-     calc() multiplication is not in the supported browser range, so the
-     doubled gap is spelled out with an additive calc. */
+     public hook. `-2x` is the gap on the two viewport edges, shared by the
+     width and height caps. */
   --dialog-viewport-gap-default: var(--space-40);
   --dialog-viewport-gap-2x: calc(
     var(--dialog-viewport-gap, var(--dialog-viewport-gap-default)) +
@@ -4760,10 +4848,19 @@ a.badge[aria-disabled="true"] {
   );
 
   /* The panel is borderless, so its inner and outer radius are the same. Kept
-     as one name for the padded wrapper and any edge band (header,
-     confirmation footer) so none of them drifts from the corner. */
+     as one name for the padded wrapper and the header band; a .bleed band
+     inherits it from the wrapper, so none of them drifts from the corner. */
   --dialog-inner-radius: var(--radius-lg);
 
+  /* Header room for a corner close. Unconditional baseline: without :has()
+     (Degraded tier) a header keeps too much room rather than a title running
+     under the close. Zeroed when the dialog has no close. */
+  --dialog-close-reserve: calc(
+    var(--close-size, var(--control-size)) +
+    var(--space-20) +
+    var(--space-30)
+  );
+
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button. */
   position: fixed;
@@ -4796,9 +4893,9 @@ a.badge[aria-disabled="true"] {
    * both edges, which reads as horizontal movement.
    */
   transform: translateY(0.35rem);
-  transition:
-    opacity var(--duration) var(--ease-exit),
-    transform var(--duration) var(--ease-exit);
+  transition-property: opacity, transform;
+  transition-duration: var(--duration);
+  transition-timing-function: var(--ease-exit);
 }
 
 @media (forced-colors: active) {
@@ -4822,10 +4919,8 @@ a.badge[aria-disabled="true"] {
   padding: var(--surface-pad);
 }
 
-/* Optional dialog chrome lives beside the padded body wrapper. Its leading
-   region and trailing controls share one center axis; wrapping the close in
-   the trailing cluster keeps it in flow instead of invoking the absolute
-   corner treatment from close.css. */
+/* Dialog chrome beside the padded body wrapper. Wrapping the close in the
+   trailing cluster keeps it in flow, not the absolute corner overlay. */
 :where(dialog).modal > header {
   display: flex;
   align-items: center;
@@ -4835,7 +4930,20 @@ a.badge[aria-disabled="true"] {
   padding: var(--modal-pad, var(--space-40));
   border-start-start-radius: var(--dialog-inner-radius);
   border-start-end-radius: var(--dialog-inner-radius);
-  background: var(--modal-header-bg, var(--surface-subtle));
+}
+
+/* Paint is not anatomy: the default band fill has zero specificity, so a
+   .background-* utility on the header replaces it. The layout above stays at
+   the component's weight — a composed .cluster must not reset the title/close
+   alignment. */
+:where(dialog.modal > header) {
+  background: var(--surface-subtle);
+}
+
+/* The chrome header is a centered row, so prose margins on a bare title only
+   push the band taller and pull the title off the close axis. */
+:where(dialog).modal > header > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 0;
 }
 
 :where(dialog).modal > header > .media {
@@ -4856,18 +4964,16 @@ a.badge[aria-disabled="true"] {
   flex: none;
 }
 
-@supports selector(dialog:has(> header)) {
-  /* The header stays fixed while the body wrapper owns overflow. Without
-     :has(), compact dialogs keep ordinary block flow as the fallback. */
-  :where(dialog).modal[open]:has(> header) {
-    display: grid;
-    grid-template-rows: auto minmax(0, 1fr);
-  }
+/* The header stays fixed while the body wrapper owns overflow. Without :has()
+   these drop individually and compact dialogs keep ordinary block flow. */
+:where(dialog).modal[open]:has(> header) {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+}
 
-  :where(dialog).modal:has(> header) > :is(form, .stack) {
-    min-block-size: 0;
-    max-block-size: none;
-  }
+:where(dialog).modal:has(> header) > :is(form, .stack) {
+  min-block-size: 0;
+  max-block-size: none;
 }
 
 @supports (block-size: 100svh) {
@@ -4886,24 +4992,37 @@ a.badge[aria-disabled="true"] {
 
 :where(dialog).modal.scrollable > form,
 :where(dialog).modal.scrollable > .stack {
-  grid-template-rows: auto minmax(0, 1fr) auto;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 
+/* Regions carry their own behaviour: a structural header or footer keeps its
+   size, every other child absorbs the free space and scrolls. Nothing here has
+   to detect which regions exist — an external header leaves the wrapper with
+   content + footer and this still holds. Each non-chrome child is its own
+   scrollport; wrap the body in one region for a single one. */
+:where(dialog).modal.scrollable > form > :is(header, footer),
+:where(dialog).modal.scrollable > .stack > :is(header, footer) {
+  flex: none;
+}
+
 :where(dialog).modal.scrollable > form > :not(:is(header, footer)),
 :where(dialog).modal.scrollable > .stack > :not(:is(header, footer)) {
-  --dialog-focus-bleed: calc(
-    var(--focus-outline-offset) +
-    max(var(--focus-ring-width), var(--border-width) * 2)
-  );
+  /* Declared here, not as a :root alias: an inherited alias arrives already
+     computed, so a --focus-ring-width override on the dialog would not reach
+     it. */
+  --dialog-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
+  flex: 1 1 auto;
   min-block-size: 0;
-  /* Keep focus paint inside the clip without moving the body off the fixed
-     header and footer edges. The reserve covers the thicker of the two
-     outside indicators: the :focus baseline (2 × border) and the component
-     line (--focus-ring-width, 3px in bootstrap-v6). */
-  margin-inline: calc(var(--dialog-focus-bleed) * -1);
-  padding-inline: var(--dialog-focus-bleed);
+  /* Keep focus paint inside the clip, on all four sides (overflow: auto clips
+     both axes), without moving the content. Every outside indicator is
+     --focus-ring-width wide (core/focus.css). On the block axis the reserve
+     reaches into the slot gap, which is wider, so the scrollport never slides
+     under the header or footer. */
+  margin: calc(var(--dialog-focus-bleed) * -1);
+  padding: var(--dialog-focus-bleed);
   overflow: auto;
   overscroll-behavior: contain;
 }
@@ -4925,59 +5044,30 @@ a.badge[aria-disabled="true"] {
   margin-block: 0;
 }
 
+/* No close anywhere: reclaim the reserve. Deliberately coarse — a close in
+   the body keeps the reserve, which costs only room, never overlap. */
+:where(dialog).modal:not(:has(.close)) {
+  --dialog-close-reserve: 0px;
+}
+
 /* The close button is anchored to the dialog at top inline-end, out of the
-   content flow; headers reserve inline room so titles never run under it.
-   The form/.stack anatomy is structural, so it stays in :where() and never
-   lends .stack's specificity to a bare <form>. */
+   content flow; headers reserve inline room so titles never run under it. A
+   .bleed header keeps at least its band inset. The form/.stack anatomy is
+   structural, so it stays in :where() and never lends .stack's specificity to
+   a bare <form>. */
 :where(dialog).modal > :where(form, .stack) > header {
-  padding-inline-end: calc(
-    var(--close-size, var(--control-size)) +
-    var(--space-20) +
-    var(--space-30)
-  );
+  padding-inline-end: var(--dialog-close-reserve);
+}
+
+:where(dialog).modal > :where(form, .stack) > header:where(.bleed) {
+  padding-inline-end: max(var(--bleed-pad, 0px), var(--dialog-close-reserve));
 }
 
 /* A corner .close that is a direct child of the chrome header needs the same
    reserve, but never below the header's own pad. Kept as its own rule so an
    unsupported :has() drops only this geometry, not the wrapper reserve. */
 :where(dialog).modal > header:has(> .close) {
-  padding-inline-end: max(
-    var(--modal-pad, var(--space-40)),
-    calc(var(--close-size, var(--control-size)) + var(--space-20) + var(--space-30))
-  );
-}
-
-:where(dialog).modal > :where(form, .stack) > footer {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: var(--gap);
-}
-
-/* Confirmation layout — a focused message followed by a visually distinct
-   action band. The media primitive owns icon/content alignment; this variant
-   only removes the standard form inset so both regions can own their padding. */
-:where(dialog).modal.dialog-confirmation > form {
-  --surface-pad: 0px;
-
-  gap: 0;
-  padding: 0;
-}
-
-:where(dialog).modal.dialog-confirmation > form > :is(.media, header) {
-  gap: var(--space-40);
-  padding: var(--space-50);
-}
-
-/* The action band splits a decision pair: the cancel-style action holds the
-   leading edge and the committing action the trailing one, so the destructive
-   choice is never adjacent to the dismiss. */
-:where(dialog).modal.dialog-confirmation > form > footer {
-  justify-content: space-between;
-  padding: var(--space-40) var(--space-50);
-  border-end-start-radius: var(--dialog-inner-radius);
-  border-end-end-radius: var(--dialog-inner-radius);
-  background: var(--surface-subtle);
+  padding-inline-end: max(var(--modal-pad, var(--space-40)), var(--dialog-close-reserve));
 }
 
 /* Intent boundary — inherited intents do not tint the icon well. A local
@@ -4990,14 +5080,17 @@ a.badge[aria-disabled="true"] {
   --ui-fg: initial;
 }
 
+/* The size hooks are read here, never declared: an author sets them on the
+   icon's media row (or the dialog) so both the circle and the title that
+   centers on it inherit one value. A local declaration on .dialog-icon would
+   shadow that value for the circle while the title kept the inherited one —
+   the two centers would drift. An override on the icon alone is deliberately
+   local and moves only the circle. */
 .dialog-icon {
-  --dialog-icon-size: 3rem;
-  --dialog-icon-glyph-size: 1.5rem;
-
   display: inline-grid;
   place-items: center;
-  inline-size: var(--dialog-icon-size);
-  block-size: var(--dialog-icon-size);
+  inline-size: var(--dialog-icon-size, 3rem);
+  block-size: var(--dialog-icon-size, 3rem);
   flex: none;
   border-radius: var(--radius-full);
   background: var(--ui-bg, var(--surface-subtle));
@@ -5007,46 +5100,27 @@ a.badge[aria-disabled="true"] {
 .dialog-icon > * {
   display: inline-grid;
   place-items: center;
-  inline-size: var(--dialog-icon-glyph-size);
-  block-size: var(--dialog-icon-glyph-size);
-  font-size: var(--dialog-icon-glyph-size);
+  inline-size: var(--dialog-icon-glyph-size, 1.5rem);
+  block-size: var(--dialog-icon-glyph-size, 1.5rem);
+  font-size: var(--dialog-icon-glyph-size, 1.5rem);
   line-height: 1;
 }
 
-:where(dialog).modal.dialog-confirmation > form > .media > header {
-  display: grid;
-  gap: var(--space-20);
-}
-
-:where(dialog).modal.dialog-confirmation > form > .media > header > * {
-  margin-block: 0;
-}
-
-/* The first heading occupies the icon row, so its text centers on the icon
-   without a font-relative nudge. Following copy stays in the same column. */
-:where(dialog).modal.dialog-confirmation
-  > form
-  > .media
-  > header
-  > :is(h1, h2, h3, h4, h5, h6):first-child {
+/* A leading icon well centers the first heading of the text column beside it:
+   the heading occupies the icon row, so its text centers without a
+   font-relative nudge, and following copy stays in the same column. Keyed on
+   the media anatomy, not on the dialog, so a card or page row composes it too. */
+.media > .dialog-icon + * > :is(h1, h2, h3, h4, h5, h6):first-child {
   display: flex;
   align-items: center;
   min-block-size: var(--dialog-icon-size, 3rem);
-}
-
-@media (max-width: 30rem) {
-  :where(dialog).modal.dialog-confirmation > form > :is(.media, header),
-  :where(dialog).modal.dialog-confirmation > form > footer {
-    padding: var(--space-40);
-  }
+  margin-block: 0;
 }
 
 :where(dialog).modal[open] {
   opacity: 1;
   transform: none;
-  transition:
-    opacity var(--duration) var(--ease-enter),
-    transform var(--duration) var(--ease-enter);
+  transition-timing-function: var(--ease-enter);
 }
 
 @starting-style {
@@ -5061,31 +5135,22 @@ a.badge[aria-disabled="true"] {
   opacity: 0;
   /* Scrim curve stays neutral `ease`; only the panel carries the character
      curves. */
-  transition: opacity var(--duration) ease;
+  transition-property: opacity;
+  transition-duration: var(--duration);
+  transition-timing-function: ease;
 }
 
 @supports (transition-behavior: allow-discrete) {
+  /* Add the discrete top-layer pair to the property list. Duration and timing
+     stay on the base rules, so [open] still only swaps the easing. */
   :where(dialog).modal {
-    transition:
-      opacity var(--duration) var(--ease-exit),
-      transform var(--duration) var(--ease-exit),
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
-  }
-
-  :where(dialog).modal[open] {
-    transition:
-      opacity var(--duration) var(--ease-enter),
-      transform var(--duration) var(--ease-enter),
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
+    transition-property: opacity, transform, overlay, display;
+    transition-behavior: allow-discrete;
   }
 
   :where(dialog).modal::backdrop {
-    transition:
-      opacity var(--duration) ease,
-      overlay var(--duration) allow-discrete,
-      display var(--duration) allow-discrete;
+    transition-property: opacity, overlay, display;
+    transition-behavior: allow-discrete;
   }
 }
 
@@ -5159,8 +5224,10 @@ html.has-modal-open.had-scrollbar {
  * Internal:
  * --drawer-closed-translate (side/RTL positioning state)
  * --drawer-focus-bleed
+ * --drawer-close-reserve (header room for a corner close; zero without a close)
  * --drawer-motion-duration (shared by panel and ::backdrop so exit duration
  *   changes in one place; entry state redefines it longer)
+ * --drawer-motion-ease (panel easing owned by the open/closed state)
  */
 :where(dialog).drawer {
   --drawer-size: 20rem;
@@ -5168,9 +5235,14 @@ html.has-modal-open.had-scrollbar {
   /* The inset a direct .bleed child cancels (components/bleed.css). */
   --surface-pad: var(--drawer-pad);
   --drawer-closed-translate: -100%;
+  /* Header room for a corner close. Unconditional baseline: without :has()
+     (Degraded tier) a header keeps too much room rather than a title running
+     under the close. Zeroed when the drawer has no close. */
+  --drawer-close-reserve: calc(var(--close-size, var(--control-size)) + var(--space-30));
   /* Exit is shorter than entry so the panel clears quickly; the scrim reads
      the same variable through inheritance and never lags the panel. */
   --drawer-motion-duration: var(--duration);
+  --drawer-motion-ease: var(--ease-exit);
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
@@ -5202,21 +5274,21 @@ html.has-modal-open.had-scrollbar {
   box-shadow: var(--shadow);
   opacity: 0;
   transform: translateX(var(--drawer-closed-translate));
-  transition:
-    opacity var(--drawer-motion-duration) var(--ease-exit),
-    transform var(--drawer-motion-duration) var(--ease-exit);
+  /* Unsupported discrete behavior drops alone, preserving opacity/transform. */
+  transition-property: opacity, transform, overlay, display;
+  transition-duration: var(--drawer-motion-duration);
+  transition-timing-function: var(--drawer-motion-ease);
+  transition-behavior: allow-discrete;
 }
 
 :where(dialog).drawer[open] {
   --drawer-motion-duration: var(--duration-slow);
+  --drawer-motion-ease: var(--ease-enter);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--space-40);
   opacity: 1;
   transform: translateX(0);
-  transition:
-    opacity var(--drawer-motion-duration) var(--ease-enter),
-    transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
 /* A form is the drawer's content wrapper when actions need method="dialog".
@@ -5236,7 +5308,10 @@ html.has-modal-open.had-scrollbar {
   opacity: 0;
   /* Scrim curve stays neutral `ease`; only the panel's character curves
      apply. Duration follows --drawer-motion-duration through inheritance. */
-  transition: opacity var(--drawer-motion-duration) ease;
+  transition-property: opacity, overlay, display;
+  transition-duration: var(--drawer-motion-duration);
+  transition-timing-function: ease;
+  transition-behavior: allow-discrete;
 }
 
 :where(dialog).drawer[data-side="end"] {
@@ -5270,47 +5345,23 @@ html.has-modal-open.had-scrollbar {
    exclusion list is easier to trust than its `position: absolute`. */
 :where(dialog).drawer > :not(:is(header, footer, form, .close)),
 :where(dialog).drawer > form > :not(:is(header, footer, .close)) {
-  --drawer-focus-bleed: calc(
-    var(--focus-outline-offset) +
-    max(var(--focus-ring-width), var(--border-width) * 2)
-  );
+  /* Declared here, not as a :root alias: an inherited alias arrives already
+     computed, so a --focus-ring-width override on the drawer would not reach
+     it. */
+  --drawer-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
   min-block-size: 0;
-  /* Keep focus paint inside the clip without moving the body off the fixed
-     header and footer edges. The reserve covers the thicker of the two
-     outside indicators: the :focus baseline (2 × border) and the component
-     line (--focus-ring-width, 3px in bootstrap-v6). */
-  margin-inline: calc(var(--drawer-focus-bleed) * -1);
-  padding-inline: var(--drawer-focus-bleed);
+  /* Keep focus paint inside the clip, on all four sides (overflow: auto clips
+     both axes), without moving the content. Every outside indicator is
+     --focus-ring-width wide (core/focus.css). On the block axis the reserve
+     reaches into the slot gap, which is wider, so the scrollport never slides
+     under the header or footer. */
+  margin: calc(var(--drawer-focus-bleed) * -1);
+  padding: var(--drawer-focus-bleed);
   overflow: auto;
   overscroll-behavior: contain;
 }
 
-@supports (transition-behavior: allow-discrete) {
-  :where(dialog).drawer {
-    transition:
-      opacity var(--drawer-motion-duration) var(--ease-exit),
-      transform var(--drawer-motion-duration) var(--ease-exit),
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-
-  :where(dialog).drawer[open] {
-    transition:
-      opacity var(--drawer-motion-duration) var(--ease-enter),
-      transform var(--drawer-motion-duration) var(--ease-enter),
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-
-  :where(dialog).drawer::backdrop {
-    transition:
-      opacity var(--drawer-motion-duration) ease,
-      overlay var(--drawer-motion-duration) allow-discrete,
-      display var(--drawer-motion-duration) allow-discrete;
-  }
-}
-
 /* Safari before 16.4 does not support :dir(); keep the ancestor-attribute
    path as the Degraded-tier fallback. The :dir() rules are dropped on their
    own there, so they need no wrapper. :dir() follows inherited HTML
@@ -5347,11 +5398,22 @@ html.has-modal-open.had-scrollbar {
   }
 }
 
+/* No close anywhere: reclaim the reserve. Deliberately coarse — a close in
+   the body keeps the reserve, which costs only room, never overlap. */
+:where(dialog).drawer:not(:has(.close)) {
+  --drawer-close-reserve: 0px;
+}
+
 /* The header reserves inline room so the title never runs under the close
-   control. */
+   control. A .bleed header keeps at least its band inset. */
 :where(dialog).drawer > header,
-:where(dialog).drawer > form > header {
-  padding-inline-end: calc(var(--close-size, var(--control-size)) + var(--space-30));
+:where(dialog).drawer > :where(form) > header {
+  padding-inline-end: var(--drawer-close-reserve);
+}
+
+:where(dialog).drawer > header:where(.bleed),
+:where(dialog).drawer > :where(form) > header:where(.bleed) {
+  padding-inline-end: max(var(--bleed-pad, 0px), var(--drawer-close-reserve));
 }
 
 /*
@@ -5488,6 +5550,9 @@ picture.bleed > img {
   position: absolute;
   inset-block-start: calc(100% + var(--space-10));
   inset-inline-start: 0;
+  /* Anatomy, not a default to replace: `flyout grid-3` (mega menu) takes its
+     columns from the grid preset and keeps this tight gap, because each
+     section pads itself — the visible gutter is section padding + gap. */
   display: grid;
   gap: var(--space-10);
   inline-size: var(--flyout-inline-size, max-content);
@@ -5528,7 +5593,6 @@ picture.bleed > img {
 .flyout[popover] {
   position: fixed;
   inset: auto;
-  margin: 0;
 }
 
 /* A presentation class may own its *visible* display type, but must not
@@ -6497,13 +6561,13 @@ picture.bleed > img {
  * --avatar-size
  * --avatar-radius
  * --avatar-font-size
+ * --avatar-bg
  * --avatar-stack-size
  * --avatar-stack-font-size
  * --avatar-stack-overlap
  * --avatar-stack-ring
  *
  * Internal:
- * --avatar-bg
  * --avatar-fg
  * --avatar-status-translate-x
  */
@@ -6581,16 +6645,13 @@ picture.bleed > img {
 
 .avatar > img,
 .avatar > picture > img {
+  display: block;
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   border-radius: inherit;
 }
 
-.avatar > picture > img {
-  display: block;
-}
-
 button.avatar {
   appearance: none;
   cursor: pointer;
@@ -6684,19 +6745,13 @@ a.avatar[aria-disabled="true"] {
   --avatar-stack-font-size: var(--font-size-lg);
 }
 
-@supports selector(:has(> .avatar)) {
-  .avatar-stack:has(> .avatar.sm) {
-    --avatar-stack-size: 1.75rem;
-    --avatar-stack-font-size: var(--font-size-xs);
-  }
-
-  .avatar-stack:has(> .avatar.lg) {
-    --avatar-stack-size: 3rem;
-    --avatar-stack-font-size: var(--font-size-lg);
-  }
-}
-
+/* Overlapping avatars hide their neighbour: a translucent fill (--surface-subtle
+   on a glass palette) would show the next avatar's edge through it, most of all
+   when hover raises one above the other. The fill is layered over the opaque
+   role; on an opaque fill the base never shows. */
 .avatar-stack > .avatar {
+  background-color: var(--surface-opaque);
+  background-image: linear-gradient(var(--avatar-bg), var(--avatar-bg));
   box-shadow: 0 0 0 var(--avatar-stack-ring) var(--surface-opaque);
 }
 
@@ -6917,11 +6972,10 @@ a.avatar[aria-disabled="true"] {
 }
 
 /* Remove the reserved avatar gutter when a message has no avatar. This is a
-   cosmetic enhancement; the two-column baseline remains fully readable. */
-@supports selector(:has(*)) {
-  .chat:not(:has(> .chat-avatar)) {
-    column-gap: 0;
-  }
+   cosmetic enhancement; the two-column baseline remains fully readable, and a
+   browser without :has() drops only this rule. */
+.chat:not(:has(> .chat-avatar)) {
+  column-gap: 0;
 }
 
 /*
@@ -7196,7 +7250,8 @@ a.avatar[aria-disabled="true"] {
  * destinations. Anything else focusable in a step is out of contract.
  *
  * The framework never hides an authored label to solve a layout problem. A
- * labelled row that outgrows its space scrolls. An `actual-container` size
+ * labelled row wraps its labels, then scrolls if its markers or authored item
+ * minimum outgrow the available space. An `actual-container` size
  * context buys it one thing: the wide representation, marker beside label.
  *
  * See docs/design-notes/steps.md for the threshold, the selector shapes, the
@@ -7332,10 +7387,11 @@ a.avatar[aria-disabled="true"] {
 /* Horizontal ------------------------------------------------------------- */
 
 .steps-horizontal {
-  --step-min: 7rem;
+  --step-min: var(--step-size);
   --step-gap: var(--space-20);
 
   inline-size: 100%;
+  column-gap: var(--step-gap);
   overflow-x: auto;
   /* Stated, never left to `overflow-x` alone: one scrolling axis computes the
      other to `auto`, and a row hugs fractional content closely enough that a
@@ -7344,11 +7400,22 @@ a.avatar[aria-disabled="true"] {
   overscroll-behavior-inline: contain;
 }
 
+/* A row that loads mid-flow starts scrolled to its current step; engines
+   without the property start at the first. */
+.steps-horizontal > [aria-current="step"] {
+  /* biome-ignore lint/correctness/noUnknownProperty: CSS Scroll Snap 2 property that Biome's list predates; an engine without it drops the declaration. */
+  scroll-initial-target: nearest;
+}
+
 /* A scroll container clips at the padding edge, so a navigable row reserves the
-   focus ring's own width and offset. Only this composition scrolls, and only a
-   link has a ring to protect. */
+   focus ring's own width and offset, and focus scrolls a link in that far from
+   the inline clip. Only this composition scrolls, and only a link has a ring to
+   protect. */
 .steps-horizontal:has(a[href]) {
+  /* Wrapped names can fill their cell right up to either inline clip edge. */
+  padding-inline: calc(var(--focus-outline-offset) + var(--focus-ring-width));
   padding-block: calc(var(--focus-outline-offset) + var(--focus-ring-width));
+  scroll-padding-inline: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 }
 
 /* One explicit row, the marker's: a `.step-label` is auto-placed into an
@@ -7360,6 +7427,8 @@ a.avatar[aria-disabled="true"] {
 .steps-horizontal > li {
   display: grid;
   flex: 1 0 var(--step-min);
+  /* Bound each label to its share so it cannot change the marker pitch. */
+  grid-template-columns: minmax(0, 1fr);
   grid-template-rows: var(--step-size);
   gap: var(--step-gap);
   justify-items: center;
@@ -7367,9 +7436,42 @@ a.avatar[aria-disabled="true"] {
   text-align: center;
 }
 
-/* An empty step is a marker and nothing else, so it needs a marker's width
-   rather than a reading width. That is what lets five of them fit a phone with
-   no size context and no variant class.
+.steps-horizontal .step-label {
+  /* Even an unbroken name must fit its share instead of overlapping a peer.
+     Hyphenation, when `lang` allows it, is tried before an arbitrary break. */
+  overflow-wrap: anywhere;
+  hyphens: auto;
+}
+
+/* Half end cells put the outer markers on the row's edges without changing
+   their pitch, so the track lines up with the text around it, as the compact
+   and inline forms do. The marker's half-width keeps the first connector equal
+   to its peers.
+
+   Source order is load-bearing: these tie the `:empty` rules below and the
+   inline query on specificity, and both must win over them. */
+.steps-horizontal > li:is(:first-child, :last-child) {
+  flex: 0.5 0 calc((var(--step-min) + var(--step-size)) / 2);
+  min-inline-size: max(var(--step-size), calc((var(--step-min) + var(--step-size)) / 2));
+}
+
+.steps-horizontal > li:first-child {
+  justify-items: start;
+  text-align: start;
+}
+
+.steps-horizontal > li:first-child::after {
+  inset-inline-start: var(--step-size);
+  inline-size: calc(200% - var(--step-size) * 2 + var(--step-gap));
+}
+
+.steps-horizontal > li:last-child {
+  justify-items: end;
+  text-align: end;
+}
+
+/* An empty step ignores any authored reading-width floor and needs only its
+   marker. That lets five of them fit a phone without a size context.
 
    `justify-items` is not an override of the row's centring: the marker is
    centred because a label sits under it and the two share a centre, and with no
@@ -7379,9 +7481,8 @@ a.avatar[aria-disabled="true"] {
    the text around it, the way the inline representation does.
 
    `:empty` says exactly what the markup says, the way `.badge:empty` does, and
-   it reads the item's own content: bare text in an `<li>` keeps a reading width
-   like its wrapped peers, where `> li:has(.step-label)` would give it a marker
-   floor and skew the row. `:empty` also keeps the compact form reachable on the
+   it reads the item's own content: bare text keeps the same authored floor as
+   its wrapped peers. `:empty` also keeps the compact form reachable on the
    Degraded tier, where only the inline bonus needs `:has()`. */
 .steps-horizontal > li:empty {
   flex: 1 1 0;
@@ -7391,6 +7492,8 @@ a.avatar[aria-disabled="true"] {
 
 .steps-horizontal > li:empty::after {
   inset-inline-start: var(--step-size);
+  /* Marker-only end cells keep full shares, unlike labelled end cells. */
+  inline-size: calc(100% - var(--step-size) + var(--step-gap));
 }
 
 .steps-horizontal > li:empty:last-child {
@@ -7398,12 +7501,12 @@ a.avatar[aria-disabled="true"] {
 }
 
 /* The pseudo-element is marker-height so --step-connector may be any complete
-   background value. */
+   background value; its length also crosses the gap to the next equal track. */
 .steps-horizontal > li::after {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: calc(50% + var(--step-size) / 2);
-  inline-size: calc(100% - var(--step-size));
+  inline-size: calc(100% - var(--step-size) + var(--step-gap));
   block-size: var(--step-size);
   background: var(
     --step-connector,
@@ -7422,6 +7525,11 @@ a.avatar[aria-disabled="true"] {
  * written — a row out of contract is not owed a curated fallback.
  */
 @container actual-container (inline-size >= 60rem) {
+  .steps-horizontal:has(.step-label) {
+    /* Inline connectors already own the spacing between marker-label groups. */
+    column-gap: 0;
+  }
+
   .steps-horizontal:has(.step-label) > li {
     display: flex;
     flex: 1 1 auto;
@@ -7620,8 +7728,8 @@ a.avatar[aria-disabled="true"] {
  *
  * Docs: docs/pages/components/navbar.md
  *
- * .navbar is a horizontal bar; .navbar-brand is the brand link; .navbar-nav is
- * the inline link list using .nav-link items. .nav-list is the vertical nav
+ * .navbar is a horizontal bar; .navbar-brand is the brand link; the inline
+ * links are a .cluster using .nav-link items. .nav-list is the vertical nav
  * list shared with .drawer, fed by the shared --gap token.
  *
  * Internal:
@@ -7670,17 +7778,6 @@ a.avatar[aria-disabled="true"] {
   border-radius: var(--radius-sm);
 }
 
-.navbar-nav {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--space-10);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 .nav-link {
   display: inline-flex;
   align-items: center;
@@ -7699,23 +7796,19 @@ a.avatar[aria-disabled="true"] {
 
 /* nav-link serves two contracts: plain page navigation (aria-current="page")
    and scrollspy, which toggles aria-current="location" on the active link.
-   Presence is the contract: the attribute is set on the current link and
-   removed everywhere else, never serialized as aria-current="false".
+   Those two values are the contract; any other, "false" included, is inert.
    Selection never changes text metrics: the shared medium weight is kept and
    the current link is carried by the selected accent. */
-.nav-link[aria-current] {
-  background: var(--surface-subtle);
-  color: var(--state-selected);
-}
-
 .nav-link:hover {
   background: var(--surface-subtle);
   color: var(--text);
 }
 
-/* A current link keeps its accent on hover: without this, the hover rule above
-   would drop it back to --text. The surface hover still applies. */
-.nav-link[aria-current]:hover {
+/* Current last, equal specificity to :hover (0,2,0): a hovered current link
+   keeps the selected accent instead of dropping to --text. The surface fill is
+   shared with the hover rule above. */
+.nav-link:is([aria-current="page"], [aria-current="location"]) {
+  background: var(--surface-subtle);
   color: var(--state-selected);
 }
 
@@ -7727,7 +7820,7 @@ a.avatar[aria-disabled="true"] {
    above keeps the light chip where color-mix is missing, with ink that is
    legible on it. */
 @supports (color: color-mix(in oklch, red, white)) {
-  .nav-link:is(:hover, [aria-current]) {
+  .nav-link:is(:hover, [aria-current="page"], [aria-current="location"]) {
     background: color-mix(in oklch, currentColor 10%, transparent);
   }
 
@@ -7735,19 +7828,22 @@ a.avatar[aria-disabled="true"] {
     color: var(--ui-fg, var(--text));
   }
 
-  .nav-link[aria-current],
-  .nav-link[aria-current]:hover {
+  /* After :hover so a hovered current link keeps the selected accent. */
+  .nav-link:is([aria-current="page"], [aria-current="location"]) {
     color: var(--ui-fg, var(--state-selected));
   }
 }
 
 /* Nav list — a vertical navigation list. Used by .drawer for stacked links.
    Links fill each row so the whole line is an interactive target; the
-   horizontal .navbar-nav links keep their intrinsic size. */
+   horizontal .cluster links keep their intrinsic size. */
+/* A vertical nav reads as one list, not a stack of separate buttons: each row
+   is already a control-height target, so the rows sit a hair apart. The grid
+   is the component's own layout; for a horizontal row use .cluster instead. */
 .nav-list {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
-  --gap: var(--space-20);
+  --gap: var(--space-10);
   gap: var(--gap);
   margin: 0;
   padding: 0;
@@ -7767,13 +7863,16 @@ a.avatar[aria-disabled="true"] {
    follows the forced palette without a forced-colors block and never touches
    the row separators. Navbar horizontal links keep color + surface only. The
    positioning context lives on every row link, so becoming current never moves
-   an app-positioned decoration to a new containing block. */
-.nav-list .nav-link[aria-current]::before {
+   an app-positioned decoration to a new containing block.
+   The trait sits centered in the link's inline padding with rounded ends: flush
+   on the edge, a square line read as pasted onto the rounded fill. */
+.nav-list .nav-link:is([aria-current="page"], [aria-current="location"])::before {
   content: "";
   position: absolute;
   inset-block: var(--space-20);
-  inset-inline-start: 0;
+  inset-inline-start: calc((var(--space-20) - 2px) / 2);
   border-inline-start: 2px solid currentColor;
+  border-radius: var(--radius-full);
 }
 
 /*
@@ -7782,14 +7881,21 @@ a.avatar[aria-disabled="true"] {
  * Docs: docs/pages/components/breadcrumb.md
  *
  * Inline list separated by "/". Mark the current page with `aria-current="page"`
- * either on the item or on the current link.
+ * either on the item or on the current link. Ancestor labels sit in an <a> or a
+ * <span>, the box that truncates.
+ *
+ * Breadcrumbs are a single navigation hierarchy. Wrapping makes hierarchy look
+ * like separate rows and causes unstable header height, and scrolling hides the
+ * root behind a scrollbar. A trail that does not fit truncates instead:
+ * ancestors first, the current page last, each label behind an ellipsis.
  */
+
 .breadcrumb {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   align-items: center;
   gap: var(--space-10);
+  min-inline-size: 0;
   margin: 0;
   padding: 0;
   color: var(--text-subtle);
@@ -7797,15 +7903,74 @@ a.avatar[aria-disabled="true"] {
   list-style: none;
 }
 
-.breadcrumb li {
-  display: inline-flex;
+/* The landmark around the trail must shrink with it in a flex or grid row, or
+   it keeps the trail's full width and the labels never get to truncate.
+   Without :has() the landmark keeps its width; min-inline-size: 0 on the
+   wrapper is the fallback. */
+:where(nav:has(> .breadcrumb)) {
+  min-inline-size: 0;
+}
+
+/* Grid, not flex: under a min-content constraint a grid track keeps its base
+   size, which is the label's minimum below, so the item's own minimum is
+   separator + label floor without anyone measuring a "/". A flex item would
+   report the full label as its minimum and never shrink.
+
+   Ancestors take the shrink before the current page, so the location is the
+   last thing to lose characters. The ratio is deliberately huge: at 1000 the
+   current page still took a fraction of a pixel, enough to trigger its
+   ellipsis while ancestors had room. Its own factor stays 1, because flex
+   distributes only a share of the deficit when the unfrozen factors sum below
+   one. Keyed on the last item, the current page by convention, so the order
+   holds without :has(). */
+.breadcrumb > li {
+  display: inline-grid;
+  flex: 0 1000000 auto;
+  grid-auto-flow: column;
   align-items: center;
-  gap: var(--space-10);
+  white-space: nowrap;
 }
 
-.breadcrumb li + li::before {
-  content: "/";
+.breadcrumb > li:last-child {
+  flex-shrink: 1;
+}
+
+/* A margin rather than a grid gap, so the separator keeps its space when the
+   current page below lays it out inline. The weight stays normal there, where
+   it would inherit the current page's. */
+.breadcrumb > li + li::before {
+  margin-inline-end: var(--space-10);
   color: var(--text-subtle);
+  font-weight: var(--font-weight-normal);
+  content: "/";
+}
+
+/* The ellipsis lives on the label, not on the item: an element never clips
+   its own outline, but an overflow-hidden item would clip its link's focus
+   line, which sits outside the link box.
+
+   The floor keeps a truncated label readable as a step ("Po…") instead of
+   collapsing to its separator. calc-size() lets a shorter label keep its own
+   width; without it, the plain 2em floor leaves a label under 2em a little
+   trailing room. */
+.breadcrumb > li > :is(a, span) {
+  min-inline-size: 2em;
+  min-inline-size: calc-size(max-content, min(size, 2em));
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* The current page written as bare text has no label box, so its item
+   truncates itself. Only with no element inside: an aria-current item that
+   holds a link would clip that link's focus line, and keeps the label rule
+   above instead. Its own rule, never merged with the one above: a browser
+   without :has() drops it alone, and bare text then keeps its full width. */
+.breadcrumb > li[aria-current="page"]:not(:has(> *)) {
+  display: block;
+  min-inline-size: 2em;
+  min-inline-size: calc-size(max-content, min(size, 2em));
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .breadcrumb a {
@@ -7839,6 +8004,11 @@ a.avatar[aria-disabled="true"] {
  * Truncated ranges are plain text (`.muted`, `aria-hidden="true"`), not .btn
  * — they are decorative, not actionable. They still get the same box sizing
  * as .btn below so the row stays visually aligned.
+ *
+ * The row wraps when it does not fit: every page stays visible and
+ * clickable. A strip that scrolled hid pages behind a scrollbar that clicking
+ * cannot move, since a click changes the page. Keeping the rendered range
+ * compact is the application's job.
  */
 .pagination {
   display: flex;
@@ -7888,8 +8058,18 @@ a.avatar[aria-disabled="true"] {
  * author class can then adjust a vertical strip without restating the
  * attribute to reach its specificity.
  *
+ * A horizontal strip is one axis of navigation, so it never wraps: a second
+ * line no longer matches the Left/Right model and reads as a nested level.
+ * When the tabs do not fit, the strip scrolls without a scrollbar; focus
+ * scrolls the active tab into view.
+ *
  * Public hooks:
+ * --tab-flex
  * --tab-gap
+ *
+ * Internal:
+ * --tab-edge
+ * --tab-fade-dir (read inside @keyframes, so it resolves per element)
  */
 /* Intent boundary — inherited intents do not tint this component.
    Local intent classes still win because :where() has zero specificity. */
@@ -7900,27 +8080,129 @@ a.avatar[aria-disabled="true"] {
 .tabs {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: var(--space-10);
   margin: 0;
   padding: 0;
+  /* Block overflow is hidden, not auto: overflow-x: auto alone computes the
+     block axis to auto, so a sub-pixel line box would add a vertical
+     scrollbar inside the strip. Nothing paints outside it: the focus outline
+     is inset and the indicator sits inside the tab. */
+  overflow: auto hidden;
+  overscroll-behavior-inline: contain;
+  /* why: a visible bar sits on the indicator and the hairline and reads as a
+     second underline. The strip has its own scroll controls: selecting the
+     clipped tab, or focusing it, brings it into view with the next one
+     hinted by scroll-padding; arrow keys and swipes do the same. */
+  scrollbar-width: none;
+  /* Focus scrolls a tab in with room to spare, hinting at the next one; the
+     edge fade below spans the same inset, so a revealed tab stays clear of it. */
+  --tab-edge: var(--space-60);
+
+  scroll-padding-inline: var(--tab-edge);
   border-block-end: var(--border-width) solid var(--border);
   list-style: none;
 }
 
+/* The landmark around link tabs is not a scroll container, so as a flex or
+   grid item it would keep the strip's full width and push the page into
+   scrolling. Letting it shrink hands the overflow back to the strip.
+   Without :has() the landmark keeps its width; min-inline-size: 0 on the
+   wrapper is the fallback. */
+:where(nav:has(> .tabs)) {
+  min-inline-size: 0;
+}
+
+/* Items keep their size and the strip scrolls instead. Covers both
+   anatomies: .tab directly in a tablist, or <li> in a navigation list.
+   --tab-flex: 1 1 0 shares the width equally; an item still never shrinks
+   below its label (flex items keep min-content), so a strip that cannot fit
+   scrolls as before. */
+.tabs > * {
+  flex: var(--tab-flex, none);
+}
+
 .tabs:where([aria-orientation="vertical"]) {
   display: grid;
+  overflow: visible;
   align-content: start;
   justify-items: stretch;
   border-block-end: 0;
   border-inline-end: var(--border-width) solid var(--border);
 }
 
+/* Edge fade: with no scrollbar, the strip fades the edges it can still scroll
+   toward. It runs on the strip's own inline timeline, which is inactive on a
+   strip that fits or a vertical rail, so those stay unmasked. Keep the
+   @supports: without scroll timelines the animation would end at once and pin
+   its last mask. It follows scroll, not time, so reduced motion keeps it. */
+@supports (animation-timeline: scroll()) {
+  .tabs {
+    --tab-fade-dir: to right;
+
+    animation: actual-tabs-fade linear both;
+    animation-timeline: scroll(self inline);
+  }
+
+  /* Gradient keywords are physical; :dir() follows the strip's own
+     direction, so an LTR island in an RTL page keeps its fade on the right. */
+  .tabs:dir(rtl) {
+    --tab-fade-dir: to left;
+  }
+}
+
+/* A strip that loads on a current link tab starts scrolled to it. Horizontal
+   only: the strip is then its nearest scroll container, while a vertical
+   rail would hand the target to the page. Engines without the property start
+   at the first tab, and the fade says there is more. */
+:where(.tabs:not([aria-orientation="vertical"]))
+.tab:is([aria-current="page"], [aria-current="true"]) {
+  /* biome-ignore lint/correctness/noUnknownProperty: CSS Scroll Snap 2 property that Biome's list predates; an engine without it drops the declaration. */
+  scroll-initial-target: nearest;
+}
+
+/* Forced colors keep every label at full contrast. */
+@media (forced-colors: active) {
+  .tabs {
+    animation: none;
+  }
+}
+
+/* mask-image does not interpolate, so each mask holds until halfway to the
+   next keyframe: the start fade appears within the first pixels of scroll and
+   the end fade drops at the very end. */
+@keyframes actual-tabs-fade {
+  0% {
+    mask-image: linear-gradient(
+      var(--tab-fade-dir),
+      #000 calc(100% - var(--tab-edge)),
+      transparent
+    );
+  }
+
+  1%,
+  99% {
+    mask-image: linear-gradient(
+      var(--tab-fade-dir),
+      transparent,
+      #000 var(--tab-edge) calc(100% - var(--tab-edge)),
+      transparent
+    );
+  }
+
+  100% {
+    mask-image: linear-gradient(var(--tab-fade-dir), transparent, #000 var(--tab-edge));
+  }
+}
+
 .tab {
   /* Positioning context for the selected indicator pseudo. */
   position: relative;
   display: inline-flex;
   align-items: center;
+  /* A tab wider than its label (--tab-flex) centers it; at natural width this
+     changes nothing, and a vertical rail resets it to the start below. */
+  justify-content: center;
   gap: var(--tab-gap, 0.375em);
   min-block-size: var(--control-size);
   padding-inline: var(--space-30);
@@ -7934,12 +8216,18 @@ a.avatar[aria-disabled="true"] {
      the strip. The active state is carried by color and the indicator line. */
   font-weight: var(--font-weight-semibold);
   text-decoration: none;
+  /* A label breaking inside a one-line strip is the same defect as the strip
+     wrapping. */
+  white-space: nowrap;
   cursor: pointer;
 }
 
+/* A vertical strip has no inline axis to protect: long labels wrap within the
+   rail instead of overflowing it. */
 .tabs:where([aria-orientation="vertical"]) .tab {
   justify-content: flex-start;
   padding-inline-end: var(--space-40);
+  white-space: normal;
 }
 
 .tab:is(:disabled, [aria-disabled="true"]) {
@@ -7970,8 +8258,13 @@ a.avatar[aria-disabled="true"] {
   border-end-end-radius: 0;
 }
 
+/* A link tab is current on aria-current="page". "true" is for the one place
+   where no page token fits: a navigation flyout trigger whose panel holds the
+   current page. State selectors name their values, never the attribute's
+   presence, so "false" (what React and Vue serialize for a false binding)
+   stays inert. */
 .tab[aria-selected="true"],
-.tab[aria-current="page"] {
+.tab:is([aria-current="page"], [aria-current="true"]) {
   color: var(--intent, var(--state-selected));
 }
 
@@ -7980,7 +8273,7 @@ a.avatar[aria-disabled="true"] {
    forced colors and erase the distinction. currentColor follows the palette the
    UA forces, so no forced-colors block is needed. */
 .tab[aria-selected="true"]::after,
-.tab[aria-current="page"]::after {
+.tab:is([aria-current="page"], [aria-current="true"])::after {
   content: "";
   position: absolute;
   inset-inline: 0;
@@ -7989,13 +8282,20 @@ a.avatar[aria-disabled="true"] {
 }
 
 .tabs:where([aria-orientation="vertical"]) .tab[aria-selected="true"]::after,
-.tabs:where([aria-orientation="vertical"]) .tab[aria-current="page"]::after {
+.tabs:where([aria-orientation="vertical"])
+  .tab:is([aria-current="page"], [aria-current="true"])::after {
   inset-block: 0;
   inset-inline: auto 0;
   border-block-end: 0;
   border-inline-end: 2px solid currentColor;
 }
 
+/* A shared width (--tab-flex) lands on the <li> of a link tab; the tab fills
+   it, so the indicator and the hit area span the whole share. */
+.tabs > li > .tab {
+  inline-size: 100%;
+}
+
 /*
  * Scrollspy — behavior hook for navigation that marks the active section
  * while the page scrolls.
@@ -8006,7 +8306,7 @@ a.avatar[aria-disabled="true"] {
  * <nav class="scrollspy">
  * containing <a href="#section"> links and toggles aria-current="location" on
  * the link whose target is in view. Pair with .nav-list and .nav-link, or style
- * [aria-current] yourself.
+ * [aria-current="location"] yourself.
  *
  * Progressive enhancement: on browsers that support :target-current,
  * this file enables the native target group and marks the active link.
@@ -8121,9 +8421,10 @@ a.avatar[aria-disabled="true"] {
 .list > :where(.list-item),
 .list > li > .list-item {
   display: flex;
-  /* Regions align to the first line, so leading, title, and trailing controls
-     share one horizontal line while supporting text wraps beneath. */
-  align-items: start;
+  /* Centered fits the short rows lists mostly hold. Read through
+     --items-align so .items-start on the row or the list wins without
+     outranking this selector — the opt-out for long supporting text. */
+  align-items: var(--items-align, center);
   gap: var(--list-item-gap);
   min-block-size: var(--list-item-min-size);
   padding-block: var(--list-item-pad-block);
@@ -8145,21 +8446,20 @@ a.list-item:hover {
   background: var(--surface-subtle);
 }
 
-/* Current row in a navigational list (master/detail). Generic by design: the
-   visual treatment only cares that the row is current, so presence is the
-   contract — the attribute is set on the current row and removed everywhere
-   else, never serialized as aria-current="false". The value (page, location,
-   …) stays free for assistive technology.
+/* Current row in a navigational list: aria-current="page" when the row opens
+   a page, "true" when it is the current item of a master/detail view (a
+   conversation, a thread, a record) that is no page of its own. Any other
+   value, "false" included, is inert.
    Calm by design: the row keeps its normal text metrics and color on a subtle
    surface, and the selected accent lives on an inset inline-start trait only.
    The trait is a real border, so it survives forced colors without a repaint
    block. The positioning context lives on every row link, so becoming current
    never moves an app-positioned decoration to a new containing block. */
-a.list-item[aria-current] {
+a.list-item:is([aria-current="page"], [aria-current="true"]) {
   background: var(--surface-subtle);
 }
 
-a.list-item[aria-current]::before {
+a.list-item:is([aria-current="page"], [aria-current="true"])::before {
   content: "";
   position: absolute;
   inset-block: var(--list-item-pad-block);
@@ -8428,7 +8728,7 @@ a.list-item[aria-current]::before {
 }
 
 .join-addon {
-  --control-border: var(--border);
+  --control-border: var(--border-control);
   --control-bg: var(--surface-subtle);
   --control-fg: var(--text-muted);
 
@@ -8533,7 +8833,7 @@ a.list-item[aria-current]::before {
    The second :has() covers a control nested one wrapper level deep. */
 .join:has(> :is(.input, .textarea, .select)) > .btn.outline,
 .join:has(> * > :is(.input, .textarea, .select)) > .btn.outline {
-  --btn-border-color: var(--intent, var(--border));
+  --btn-border-color: var(--intent, var(--border-control));
 }
 
 /* Effects — purely visual enrichments. */
@@ -8867,6 +9167,11 @@ a.list-item[aria-current]::before {
   align-items: end;
 }
 
+.items-baseline {
+  --items-align: baseline;
+  align-items: baseline;
+}
+
 .muted {
   color: var(--text-muted);
 }
@@ -8988,9 +9293,6 @@ a.list-item[aria-current]::before {
  * - utilities consume the current context instead of defining their own -sm/-lg scale.
  * - optional utilities extend core utilities, they do not re-express them.
  * - follow verbose .{property}-{value} naming.
- *
- * Internal:
- * --cluster-justify (local relay consumed by .cluster)
  */
 
 /* Display */
@@ -9065,23 +9367,22 @@ a.list-item[aria-current]::before {
   flex-wrap: nowrap;
 }
 
+/* The property is written directly, so the utility works on any flex row, not
+   only a .cluster. Utilities load last, so the direct declaration beats
+   .cluster at equal specificity. */
 .justify-content-start {
-  --cluster-justify: flex-start;
   justify-content: flex-start;
 }
 
 .justify-content-center {
-  --cluster-justify: center;
   justify-content: center;
 }
 
 .justify-content-end {
-  --cluster-justify: flex-end;
   justify-content: flex-end;
 }
 
 .justify-content-space-between {
-  --cluster-justify: space-between;
   justify-content: space-between;
 }