actual-css 0.11.1 → 0.12.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;
@@ -156,8 +156,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 +169,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;
@@ -367,6 +386,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;
@@ -515,7 +538,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 +688,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 +741,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 +798,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 +825,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
@@ -1298,6 +1348,7 @@ 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).
  */
 .cluster {
   display: flex;
@@ -1312,6 +1363,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.
  *
@@ -1883,8 +1944,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 +1960,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
@@ -2629,32 +2696,37 @@ small {
 }
 
 /*
- * 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 policy hooks write the properties themselves rather than relaying
+   --cluster-*: a relay would inherit into any .cluster nested in the row.
+   These are equal-specificity overrides of .cluster, so they win only because
+   forms load after layout in the official bundle (tests/css-audit.test.js
+   guards the order); utilities load later and keep the author's last word. On
+   this row --cluster-justify/--cluster-align have no effect. */
 .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));
 }
 
 /* Opt-in sticky variant. When the bar is not stuck (at rest) the translucent
@@ -3736,7 +3808,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 +3833,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 +3914,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 +3929,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. */
@@ -4230,10 +4296,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 +4322,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 {
@@ -4561,34 +4623,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 +4631,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 +4673,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 +4717,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 +4730,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 +4753,7 @@ a.badge[aria-disabled="true"] {
 }
 .card.compact {
   --card-pad: var(--space-20);
+  --card-gap: var(--space-20);
 }
 
 @media print {
@@ -4732,15 +4774,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 +4795,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 +4804,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 +4849,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 +4875,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 +4886,14 @@ 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);
 }
 
 :where(dialog).modal > header > .media {
@@ -4856,18 +4914,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,10 +4942,21 @@ 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(
@@ -4897,6 +4964,7 @@ a.badge[aria-disabled="true"] {
     max(var(--focus-ring-width), var(--border-width) * 2)
   );
 
+  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
@@ -4925,59 +4993,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 +5029,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 +5049,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 +5084,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,6 +5173,7 @@ 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)
  */
@@ -5168,6 +5183,10 @@ 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);
@@ -5347,11 +5366,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 +5518,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);
@@ -6684,19 +6717,26 @@ 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);
-  }
+/* Infer the stack scale from its avatars. Progressive: without :has() the
+   explicit .avatar-stack.sm/.lg classes and the default size still size the
+   group, only the inference is lost. */
+.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);
-  }
+.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 +6957,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;
 }
 
 /*
@@ -7620,8 +7659,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 +7709,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;
@@ -7703,19 +7731,16 @@ a.avatar[aria-disabled="true"] {
    removed everywhere else, never serialized as aria-current="false".
    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[aria-current] {
+  background: var(--surface-subtle);
   color: var(--state-selected);
 }
 
@@ -7735,19 +7760,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[aria-current] {
     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;
@@ -8867,6 +8895,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 +9021,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 +9095,22 @@ a.list-item[aria-current]::before {
   flex-wrap: nowrap;
 }
 
+/* The property is written directly, never relayed through the cluster hook:
+   a relay would inherit into every .cluster nested inside. Utilities load last,
+   so the direct declaration already 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;
 }