actual-css 0.10.0 → 0.11.1

package/dist/actual.full.css

@@ -130,9 +130,13 @@ select {
   --ease-enter: cubic-bezier(0.2, 0, 0, 1);
   --ease-exit: cubic-bezier(0.4, 0, 1, 1);
 
-  /* Focus ring — shared by every interactive component's :focus-visible */
+  /* Generic focus fallback — an adaptive currentColor line for elements
+     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. */
   --focus-outline-color: currentColor;
-  --focus-outline: calc(var(--border-width) * 2) solid var(--focus-outline-color);
+  --focus-outline: var(--focus-ring-width) solid var(--focus-outline-color);
   --focus-outline-offset: 2px;
   --focus-ring-width: 2px;
 
@@ -195,8 +199,8 @@ select {
   --state-selected-fg: var(--primary-fg);
   --state-disabled: var(--text-subtle);
 
-  /* Status dot ring — follows the island's surface. */
-  --indicator-ring: var(--surface);
+  /* Status dot ring — cuts the dot out of what it overlaps. */
+  --indicator-ring: var(--surface-opaque);
 }
 
 :root {
@@ -291,6 +295,8 @@ select {
  * Shadow color, Focus ring derivation.
  * 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.
  * Internal: --hgroup-gap.
  */
 :root {
@@ -382,6 +388,12 @@ select {
   --heading: var(--text);
   --selection-bg: var(--primary);
   --selection-fg: var(--primary-fg);
+  /* Surface roles that must stay opaque when a theme paints translucent
+     surfaces; both equal --surface on an opaque palette. --surface-opaque
+     hides or separates what is painted beneath a ring, separator or marker —
+     never a fill. --surface-solid-fg is the ink on --surface-solid. */
+  --surface-opaque: var(--surface);
+  --surface-solid-fg: var(--surface);
 }
 
 /* Soft foreground hooks — the soft ink is the intent rebated toward the local
@@ -719,7 +731,8 @@ small {
 /* Shared control scale. Wrappers are listed when their descendants form one
    component (field, choice-card, floating-field, input-icon, join, pagination,
    tabs, flyout). A local size declaration beats inherited density because it
-   is declared on the sized component itself. */
+   is declared on the sized component itself. Guarded by check:sync
+   (size-scale-participants): .sm and .lg must list the same components. */
 :where(
   .btn,
   .input,
@@ -798,12 +811,22 @@ small {
    for its keyboard focus indicator; forced colors keep outlines and drop
    shadows.
 
-   Component indicators are a solid --focus-ring-width line in --focus: inset
-   on fields (inside their border box), offset by --focus-outline-offset on
-   discrete actions. The color never derives from an intent or a local
+   Two contracts share the job, both --focus-ring-width wide. Text-like
+   elements, whose ink is the thing being focused (links, summary, .nav-link,
+   .menu-item, breadcrumb links, .navbar-brand), declare no outline and take
+   the generic fallback below: a currentColor line that follows whatever the
+   application painted. Boxed components, with a fill or border of their own,
+   draw the themed ring instead — a solid line in --focus: inset on fields
+   (inside their border box), offset by --focus-outline-offset on discrete
+   actions. The color never derives from an intent or a local
    surface — the theme guarantees --focus at 3:1 against both --surface and
    --surface-solid, so one token reads on the page, on a solid band and on
-   any nested surface. */
+   any nested surface.
+
+   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. */
 :focus {
   outline: var(--focus-outline);
   outline-offset: var(--focus-outline-offset);
@@ -2040,8 +2063,8 @@ small {
   cursor: var(--control-cursor);
   /* No outline: none here — the core :focus fallback must survive for browsers
      without :focus-visible. Pointer focus is hidden by core's
-     :focus:not(:focus-visible); keyboard focus swaps in the transparent
-     outline + ring below. */
+     :focus:not(:focus-visible); keyboard focus draws the inset outline below
+     (invalid fields take --form-invalid-border, the documented exception). */
   transition:
     border-color var(--duration),
     box-shadow var(--duration),
@@ -2425,7 +2448,11 @@ small {
      the whole control, not just the filename text. */
   min-block-size: var(--control-size);
   padding-block: var(--space-10);
-  padding-block: max(var(--space-10), calc((var(--control-size) - 1lh) / 2));
+  /* Border-box height: both borders come out of the padding, as on .btn. */
+  padding-block: max(
+    var(--space-10),
+    calc((var(--control-size) - 1lh - 2 * var(--border-width)) / 2)
+  );
   padding-inline: var(--space-20);
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius-sm);
@@ -2889,6 +2916,10 @@ small {
  * --range-track-height
  * --range-thumb-bg
  * --range-track-bg
+ * --range-fill-bg
+ *
+ * Runtime-written (by actual-css/js/range, never set by hand):
+ * --range-progress
  */
 
 /* Intent boundary — inherited intents do not tint this component.
@@ -2898,10 +2929,17 @@ small {
 }
 
 .range {
-  --range-thumb-size: 1.25rem;
-  --range-track-height: 0.25rem;
+  --range-thumb-size: 1.125rem;
+  --range-track-height: 0.625rem;
   --range-thumb-bg: var(--intent, var(--primary));
   --range-track-bg: var(--border);
+  --range-fill-bg: var(--intent, var(--primary));
+  /* Fill share, written by actual-css/js/range. 0% with no runtime means a
+     plain track — the control stays fully usable without JavaScript. */
+  --range-progress: 0%;
+  /* Logical fill direction: the gradient below cannot use flow-relative
+     keywords, so RTL flips the angle through this hook instead. */
+  --range-fill-from: to right;
 
   appearance: none;
   -webkit-appearance: none;
@@ -2911,16 +2949,29 @@ small {
   cursor: pointer;
 }
 
+:where([dir="rtl"]) .range,
+.range:dir(rtl) {
+  --range-fill-from: to left;
+}
+
 .range::-webkit-slider-runnable-track {
   block-size: var(--range-track-height);
   border-radius: var(--radius-full);
-  background: var(--range-track-bg);
+  background: linear-gradient(
+    var(--range-fill-from),
+    var(--range-fill-bg) var(--range-progress),
+    var(--range-track-bg) var(--range-progress)
+  );
 }
 
 .range::-moz-range-track {
   block-size: var(--range-track-height);
   border-radius: var(--radius-full);
-  background: var(--range-track-bg);
+  background: linear-gradient(
+    var(--range-fill-from),
+    var(--range-fill-bg) var(--range-progress),
+    var(--range-track-bg) var(--range-progress)
+  );
 }
 
 .range::-webkit-slider-thumb {
@@ -2933,6 +2984,10 @@ small {
   background: var(--range-thumb-bg);
   margin-block-start: calc((var(--range-track-height) - var(--range-thumb-size)) / 2);
   cursor: inherit;
+  /* Permanent surface separator: the fill defaults to the thumb color, so
+     without this the thumb would melt into the filled part of the track.
+     Focus-visible keeps this ring and adds the --focus ring outside it. */
+  box-shadow: 0 0 0 2px var(--surface-opaque);
   transition: box-shadow var(--duration);
 }
 
@@ -2943,6 +2998,7 @@ small {
   border: 0;
   background: var(--range-thumb-bg);
   cursor: inherit;
+  box-shadow: 0 0 0 2px var(--surface-opaque);
   transition: box-shadow var(--duration);
 }
 
@@ -2953,20 +3009,21 @@ small {
 /*
  * A thumb pseudo-element takes no reliable outline, so its ring is a solid
  * --focus shadow (the transparent outline above covers forced colors). The
- * 1px surface-coloured separator keeps the ring visually distinct from the
- * small, coloured thumb — unlike a full-size input where the same gap would
- * read as an unwanted void.
+ * surface-coloured separator keeps the ring visually distinct from the
+ * coloured thumb — unlike a full-size input where the same gap would
+ * read as an unwanted void. It doubles as the resting separator between
+ * the thumb and the same-coloured fill.
  */
 .range:focus-visible::-webkit-slider-thumb {
   box-shadow:
-    0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus);
+    0 0 0 2px var(--surface-opaque),
+    0 0 0 calc(2px + var(--focus-ring-width)) var(--focus);
 }
 
 .range:focus-visible::-moz-range-thumb {
   box-shadow:
-    0 0 0 1px var(--surface),
-    0 0 0 calc(1px + var(--focus-ring-width)) var(--focus);
+    0 0 0 2px var(--surface-opaque),
+    0 0 0 calc(2px + var(--focus-ring-width)) var(--focus);
 }
 
 .range:disabled {
@@ -2974,28 +3031,41 @@ small {
   cursor: not-allowed;
   opacity: var(--disabled-opacity);
 }
-
 /* Forced colors: the track must stay a visible line against the page (Canvas
-  would merge with it) and the thumb needs a real boundary to remain
-  distinguishable from the track. Disabled keeps GrayText via :disabled.
-  Focus stays on the transparent outline of :focus-visible. Track and thumb
-  fills are written on the properties, not only the hooks: an application
-  hook override at the same specificity loads after this file and would win
-  the variable, leaving a Canvas-remapped fill. */
+   would merge with it) and the thumb needs a real boundary to remain
+   distinguishable from the track. The fill keeps its two-tone split with
+   system colors so the value stays readable. Disabled keeps GrayText via
+   :disabled. Focus stays on the transparent outline of :focus-visible. Track
+   and thumb fills are written on the properties, not only the hooks: an
+   application hook override at the same specificity loads after this file
+   and would win the variable, leaving a Canvas-remapped fill.
+   The split lives in a background-image, which forced-color-adjust: auto
+   drops — so the tracks opt out locally. The colors stay system keywords,
+   keeping native contrast adaptation; only the host keeps adjusting. */
 @media (forced-colors: active) {
   .range {
     --range-track-bg: CanvasText;
     --range-thumb-bg: ButtonFace;
+    --range-fill-bg: Highlight;
   }
 
   .range::-webkit-slider-runnable-track {
-    background: CanvasText;
+    forced-color-adjust: none;
+    background: linear-gradient(
+      var(--range-fill-from),
+      Highlight var(--range-progress),
+      CanvasText var(--range-progress)
+    );
   }
 
   .range::-moz-range-track {
-    background: CanvasText;
+    forced-color-adjust: none;
+    background: linear-gradient(
+      var(--range-fill-from),
+      Highlight var(--range-progress),
+      CanvasText var(--range-progress)
+    );
   }
-
   .range::-webkit-slider-thumb {
     background: ButtonFace;
     border: var(--border-width) solid ButtonText;
@@ -3014,13 +3084,15 @@ small {
  *
  * Each .choice-card is a <label> wrapping a native radio or checkbox. When
  * :has() is supported the input is visually hidden and the card mirrors its
- * state: checked border and tint, checkmark badge (round for radio, rounded
- * square for checkbox), focus ring, disabled dimming. Without :has() the
- * native input stays visible so selection state never disappears.
+ * state: an indicator on the leading edge (a ring for radio, a box for
+ * checkbox) that fills with a check, checked border and tint, focus ring,
+ * disabled dimming. Without :has() the native input stays visible in the
+ * indicator's slot, so selection state never disappears.
  *
- * The badge overhangs the top-right corner by 0.375em; ancestors with
- * overflow: hidden will clip it. Pair with grid or flex utilities for group
- * layout.
+ * The card is a two-column grid: the indicator in the first column, level
+ * with the first row, and each child element of the label on its own row in
+ * the second. Wrap loose text in an element. A corner badge for tiles is a
+ * documented recipe on these same layers, not a variant.
  *
  * .chip is the compact pill form (filter chips, selectable tags): control
  * height, and a leading dot that turns into the check in a fixed slot, so
@@ -3028,6 +3100,7 @@ small {
  *
  * Public hooks:
  * --choice-card-pad
+ * --choice-card-gap
  * --choice-card-radius
  * --choice-card-border
  * --choice-card-bg
@@ -3042,19 +3115,25 @@ small {
 
 .choice-card {
   --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-bg: var(--surface);
-  --choice-card-check-size: 1.5em;
+  --choice-card-check-size: 1.25em;
 
   position: relative;
-  display: block;
+  display: grid;
+  grid-template-columns: var(--choice-card-check-size) minmax(0, 1fr);
+  /* why: a card stretched by a taller grid neighbour keeps its rows at the
+     top instead of spreading them. */
+  align-content: start;
+  column-gap: var(--choice-card-gap);
   padding: var(--choice-card-pad);
   border: var(--border-width) solid var(--form-invalid-border, var(--choice-card-border));
   border-radius: var(--choice-card-radius);
   background: var(--choice-card-bg);
   color: var(--text);
-  /* Consumed so .sm/.lg reach the card; the badge's em sizing follows. */
+  /* Consumed so .sm/.lg reach the card; the indicator's em sizing follows. */
   font-size: var(--control-font-size);
   cursor: pointer;
   transition:
@@ -3063,6 +3142,18 @@ small {
     box-shadow var(--duration);
 }
 
+.choice-card > * {
+  grid-column: 2;
+}
+
+/* The input owns the indicator's cell: visible there without :has(), hidden
+   in it with :has(). */
+.choice-card > :is(input[type="radio"], input[type="checkbox"]) {
+  grid-area: 1 / 1;
+  place-self: center;
+  margin: 0;
+}
+
 /* The native input is visually hidden but stays focusable and participates in
    form submission and keyboard navigation (sr-only pattern). Guarded: without
    :has() the card cannot mirror the input's state, so the visible native
@@ -3108,24 +3199,31 @@ small {
   }
 }
 
-/* Checkmark badge — always rendered at scale(0) and scaled in on check, so
-   the entrance can transition (a pseudo created on :checked could not). */
+/* Indicator: ::before is the ring or box, ::after the check. Both share the
+   input's cell, centred on the first line — not the first row, which a long
+   label wraps — and stay hidden until :has() can mirror the input. The em
+   margin is the lh-less fallback at the default 1.5 line-height. */
 .choice-card::before,
 .choice-card::after {
   content: "";
-  position: absolute;
-  inset-inline-end: -0.375em;
-  inset-block-start: -0.375em;
+  grid-area: 1 / 1;
+  align-self: start;
+  margin-block-start: calc((1.5em - var(--choice-card-check-size)) / 2);
+  margin-block-start: calc((1lh - var(--choice-card-check-size)) / 2);
   inline-size: var(--choice-card-check-size);
   block-size: var(--choice-card-check-size);
   transform: scale(0);
-  transition: transform var(--duration);
+  transition:
+    transform var(--duration),
+    background-color var(--duration),
+    border-color var(--duration);
 }
 
-/* Badge disc — circle for radio, rounded square for checkbox */
+/* A border, not an inset shadow: forced colors drop shadows, and the resting
+   ring is the only sign of an unchecked option. The invalid border reaches it
+   through the same hook as the card's. */
 .choice-card::before {
-  background: var(--intent, var(--state-selected));
-  box-shadow: 0 0 0 2px var(--surface);
+  border: max(var(--border-width), 1.5px) solid var(--form-invalid-border, var(--text-muted));
   z-index: 1;
 }
 
@@ -3147,7 +3245,19 @@ small {
   z-index: 2;
 }
 
-.choice-card:has(:checked)::before,
+/* Guarded with the input's hiding above: a resting ring beside a visible
+   native input would draw the indicator twice. */
+@supports selector(:has(*)) {
+  .choice-card::before {
+    transform: none;
+  }
+}
+
+.choice-card:has(:checked)::before {
+  border-color: var(--intent, var(--state-selected));
+  background: var(--intent, var(--state-selected));
+}
+
 .choice-card:has(:checked)::after {
   transform: scale(1);
 }
@@ -3173,11 +3283,16 @@ small {
 .choice-card.chip::before {
   --choice-chip-dot: calc(var(--control-pad-x) + var(--choice-card-check-size) / 2) 50%;
 
+  position: absolute;
   inset: 0;
+  /* why: an absolute box honours self-alignment — the card's start would
+     shrink this layer to 0 height and the dot with it. */
+  align-self: auto;
+  margin: 0;
   inline-size: auto;
   block-size: auto;
+  border: 0;
   border-radius: inherit;
-  box-shadow: none;
   background: var(--text-subtle);
   transform: none;
   clip-path: circle(0.1875em at var(--choice-chip-dot));
@@ -3191,10 +3306,11 @@ small {
 
 /* The check keeps the card's scale-in, in flow ahead of the label. */
 .choice-card.chip::after {
-  position: static;
   order: -1;
   flex: none;
-  margin-inline-end: 0.375em;
+  align-self: center;
+  margin-block: 0;
+  margin-inline: 0 0.375em;
   background: var(--intent, var(--state-selected));
   -webkit-mask-size: contain;
   mask-size: contain;
@@ -3204,9 +3320,11 @@ small {
    this repair, forced colors pushes disc and check to the same system color
    and the state disappears. Highlight/Canvas/HighlightText are preserved as-is,
    so no forced-color-adjust is needed. The pseudo is not focusable — the
-   outline is a separator against the card, not a focus channel. */
+   outline separates the disc from whatever it overlaps (the card's border,
+   for a corner-badge recipe), not a focus channel. */
 @media (forced-colors: active) {
   .choice-card:has(:checked)::before {
+    border-color: Highlight;
     background: Highlight;
     outline: 2px solid Canvas;
   }
@@ -3502,7 +3620,7 @@ small {
   padding-block: 0;
   padding-inline: calc((var(--otp-cell-size) - 1ch) / 2) 0;
   border: 0;
-  outline: 2px solid transparent;
+  outline: none;
   box-shadow: none;
   background: transparent;
   color: var(--text);
@@ -3527,6 +3645,14 @@ small {
    character after it: the state rules select the cells as following siblings
    (input:focus ~ span, input:disabled ~ span, …), so that order is part of the
    contract. */
+/* The documented markup puts .input on the native input, so the field ring
+   (.input:focus-visible:not(:disabled), control.css) would outrank the reset
+   above and draw that group ring; this selector must stay one step above it.
+   No transparent outline either: forced colors would paint it as a ring. */
+.otp > input:focus-visible:not(:disabled) {
+  outline: none;
+}
+
 .otp > input:focus ~ span {
   --otp-cell-border: var(--focus);
   --otp-cell-border-width: calc(var(--border-width) * 2);
@@ -3613,6 +3739,7 @@ small {
  * --btn-default-hover-bg
  * --btn-border-block-end-color
  * --btn-border-block-end-width
+ * --btn-border-block
  * --spinner-width
  */
 
@@ -3638,6 +3765,10 @@ small {
   --btn-default-hover-bg: var(--btn-bg);
   --btn-radius: var(--radius);
   --btn-hover-overlay: var(--hover-overlay, rgb(0 0 0 / 0.08));
+  --btn-border-block: calc(
+    var(--border-width) +
+    var(--btn-border-block-end-width, var(--border-width))
+  );
 
   /* Positioning context for indicators, overlays, and grouped states. */
   position: relative;
@@ -3647,7 +3778,13 @@ small {
   gap: var(--btn-gap, 0.375em);
   min-block-size: var(--btn-min-size);
   padding-block: var(--space-20);
-  padding-block: max(var(--space-10), calc((var(--btn-min-size) - 1lh) / 2));
+  /* why: centres one line in --btn-min-size and keeps that rhythm when the
+     label wraps. min-block-size is a border-box length, so both borders come
+     out of it; without them .btn stood 2px taller than .input. */
+  padding-block: max(
+    var(--space-10),
+    calc((var(--btn-min-size) - 1lh - var(--btn-border-block)) / 2)
+  );
   padding-inline: var(--btn-pad-x);
   border: var(--border-width) solid var(--btn-border-color, var(--btn-border));
   border-block-end-color: var(
@@ -3744,6 +3881,8 @@ small {
   --ui-fg: var(--intent, currentColor);
   --ui-border: transparent;
   --btn-radius: var(--radius-sm);
+  /* border: 0 below; the padding must not subtract a border it lacks. */
+  --btn-border-block: 0px;
 
   min-block-size: auto;
   padding-inline: 0;
@@ -3835,8 +3974,17 @@ a.btn[aria-disabled="true"] {
  * Public hooks:
  * --close-size
  * --close-icon-size
+ * --close-bg
+ * --close-color
+ * --close-hover-color
+ * --close-hover-overlay
  */
 .close {
+  /* Routes the hover/active wash, as --btn-hover-overlay does for .btn. A
+     context that wants ink-only feedback (the dialog corner) sets it
+     transparent. */
+  --close-hover-overlay: var(--hover-overlay);
+
   display: inline-grid;
   place-items: center;
   flex: none;
@@ -3863,12 +4011,12 @@ a.btn[aria-disabled="true"] {
    the control (the dialog corner's --surface-subtle) instead of replacing it. */
 @media (hover: hover) {
   .close:hover {
-    box-shadow: inset 0 0 0 999px var(--hover-overlay);
+    box-shadow: inset 0 0 0 999px var(--close-hover-overlay);
   }
 }
 
 .close:active {
-  box-shadow: inset 0 0 0 999px var(--hover-overlay);
+  box-shadow: inset 0 0 0 999px var(--close-hover-overlay);
 }
 
 .close:focus-visible {
@@ -3880,23 +4028,25 @@ a.btn[aria-disabled="true"] {
    surface rather than to the header or a scroll container inside it. Matched
    on the documented positions (the dialog, its form, its header, or a form
    inside that header) so a .close inside content — an alert in the body —
-   keeps its own place. */
+   keeps its own place. The corner drops the wash: only the ink changes. */
 :where(dialog):is(.modal, .drawer) > .close,
 :where(dialog):is(.modal, .drawer) > :is(form, header) > .close,
 :where(dialog):is(.modal, .drawer) > :is(form, header) > :is(form, header) > .close {
+  --close-hover-overlay: transparent;
+
   position: absolute;
   z-index: 1;
   inset-block-start: var(--space-20);
   inset-inline-end: var(--space-20);
-  background: var(--surface-subtle);
-  color: var(--text-muted);
+  background: var(--close-bg, var(--surface-subtle));
+  color: var(--close-color, var(--text-muted));
 }
 
 @media (hover: hover) {
   :where(dialog):is(.modal, .drawer) > .close:hover,
   :where(dialog):is(.modal, .drawer) > :is(form, header) > .close:hover,
   :where(dialog):is(.modal, .drawer) > :is(form, header) > :is(form, header) > .close:hover {
-    color: var(--text);
+    color: var(--close-hover-color, var(--text));
   }
 }
 
@@ -4581,6 +4731,8 @@ a.badge[aria-disabled="true"] {
  *
  * Public hooks:
  * --modal-size
+ * --modal-pad
+ * --modal-header-bg
  * --dialog-viewport-gap
  * --dialog-icon-size
  * --dialog-icon-glyph-size
@@ -4588,6 +4740,7 @@ a.badge[aria-disabled="true"] {
  * The corner close control is .close (components/close.css).
  *
  * Internal:
+ * --dialog-inner-radius
  * --dialog-focus-bleed
  * --dialog-viewport-block
  * --dialog-viewport-gap-default
@@ -4606,6 +4759,11 @@ a.badge[aria-disabled="true"] {
     var(--dialog-viewport-gap, var(--dialog-viewport-gap-default))
   );
 
+  /* 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. */
+  --dialog-inner-radius: var(--radius-lg);
+
   /* 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;
@@ -4619,7 +4777,9 @@ a.badge[aria-disabled="true"] {
      dynamic token; only the modal pins the small viewport. */
   --dialog-viewport-block: var(--viewport-block);
   max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
-  border: var(--border-width) solid var(--border);
+  /* Zero rather than absent: the UA stylesheet draws `border: solid` on
+     dialog, and an authored edge reads as a hard seam against .bleed bands. */
+  border: 0;
   border-radius: var(--radius-lg);
   background: var(--surface-raised);
   color: var(--text);
@@ -4641,14 +4801,73 @@ a.badge[aria-disabled="true"] {
     transform var(--duration) var(--ease-exit);
 }
 
+@media (forced-colors: active) {
+  /* With no authored border the panel edge disappears once colors collapse.
+     The browser forces the border color, so only the width is authored. */
+  :where(dialog).modal {
+    border: var(--border-width) solid CanvasText;
+  }
+}
+
 :where(dialog).modal > form,
 :where(dialog).modal > .stack {
+  --surface-pad: var(--modal-pad, var(--space-40));
+
   display: grid;
   gap: var(--space-40);
   max-block-size: calc(var(--dialog-viewport-block) - var(--dialog-viewport-gap-2x));
+  border-radius: var(--dialog-inner-radius);
   overflow: auto;
   overscroll-behavior: contain;
-  padding: var(--space-40);
+  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. */
+:where(dialog).modal > header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-30);
+  min-block-size: var(--close-size, var(--control-size));
+  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));
+}
+
+:where(dialog).modal > header > .media {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+:where(dialog).modal > header > .media > :is(h1, h2, h3, h4, h5, h6) {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--close-size, var(--control-size));
+  margin-block: 0;
+}
+
+:where(dialog).modal > header > .cluster {
+  --cluster-wrap: nowrap;
+
+  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);
+  }
+
+  :where(dialog).modal:has(> header) > :is(form, .stack) {
+    min-block-size: 0;
+    max-block-size: none;
+  }
 }
 
 @supports (block-size: 100svh) {
@@ -4700,12 +4919,32 @@ a.badge[aria-disabled="true"] {
   margin-block-end: 0;
 }
 
+/* A media row inside the structural header is title anatomy, so its heading
+   does not bring prose margins into the icon alignment. */
+:where(dialog).modal > :where(form, .stack) > header > .media > :is(h1, h2, h3, h4, h5, h6) {
+  margin-block: 0;
+}
+
 /* 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>. */
 :where(dialog).modal > :where(form, .stack) > header {
-  padding-inline-end: calc(var(--close-size, var(--control-size)) + var(--space-30));
+  padding-inline-end: calc(
+    var(--close-size, var(--control-size)) +
+    var(--space-20) +
+    var(--space-30)
+  );
+}
+
+/* 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 {
@@ -4719,19 +4958,25 @@ a.badge[aria-disabled="true"] {
    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 > .media {
+: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: calc(var(--radius-lg) - var(--border-width));
-  border-end-end-radius: calc(var(--radius-lg) - var(--border-width));
+  border-end-start-radius: var(--dialog-inner-radius);
+  border-end-end-radius: var(--dialog-inner-radius);
   background: var(--surface-subtle);
 }
 
@@ -4768,8 +5013,29 @@ a.badge[aria-disabled="true"] {
   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 {
+  display: flex;
+  align-items: center;
+  min-block-size: var(--dialog-icon-size, 3rem);
+}
+
 @media (max-width: 30rem) {
-  :where(dialog).modal.dialog-confirmation > form > .media,
+  :where(dialog).modal.dialog-confirmation > form > :is(.media, header),
   :where(dialog).modal.dialog-confirmation > form > footer {
     padding: var(--space-40);
   }
@@ -5095,9 +5361,9 @@ html.has-modal-open.had-scrollbar {
  *
  * A surface that insets its direct children relays that inset to them as
  * --surface-pad; a direct .bleed child cancels it and reaches the surface
- * edge. Card and drawer pad at the container level, so they own the token
- * there; the accordion pads its summary and its panel instead, so the panel
- * owns it and the item does not.
+ * edge. Card and drawer pad at the container level, while modal pads its inner
+ * wrapper; each owns the token where that inset lives. The accordion pads its
+ * summary and panel instead, so the panel owns it and the item does not.
  *
  * Why the token is handed to the children rather than declared on the surface:
  * custom properties inherit, so a surface-level declaration would also reach a
@@ -5118,11 +5384,11 @@ html.has-modal-open.had-scrollbar {
  * Framework plumbing:
  * --surface-pad (declared by the surface)
  */
-:where(.card, .drawer, .accordion details > summary + *) > * * {
+:where(.card, .drawer, dialog.modal > :is(form, .stack), .accordion details > summary + *) > * * {
   --bleed-pad: initial;
 }
 
-:where(.card, .drawer, .accordion details > summary + *) > * {
+:where(.card, .drawer, dialog.modal > :is(form, .stack), .accordion details > summary + *) > * {
   --bleed-pad: var(--surface-pad);
 }
 
@@ -5186,6 +5452,7 @@ picture.bleed > img {
  * Public hooks:
  * --flyout-inline-size
  * --flyout-max-inline-size
+ * --flyout-pad
  *
  * Internal:
  * --menu-item-size (derived from --control-size for menu rows)
@@ -5238,7 +5505,9 @@ picture.bleed > img {
   );
   overflow: auto;
   margin: 0;
-  padding: var(--space-10);
+  /* Tight by default for action menus, whose items carry their own padding.
+     Rich panels (forms, pickers) opt into dialog air per instance. */
+  padding: var(--flyout-pad, var(--space-10));
   border: var(--border-width) solid var(--border);
   border-radius: var(--radius);
   background: var(--surface-raised);
@@ -5511,7 +5780,7 @@ picture.bleed > img {
  */
 .tooltip {
   --tooltip-bg: var(--surface-solid);
-  --tooltip-fg: var(--surface);
+  --tooltip-fg: var(--surface-solid-fg);
   --tooltip-arrow-size: 5px;
 
   position: fixed;
@@ -6157,8 +6426,8 @@ picture.bleed > img {
 }
 
 .status-bar {
-  --status-bg: var(--intent, var(--text));
-  --status-fg: var(--intent-fg, var(--surface));
+  --status-bg: var(--intent, var(--surface-solid));
+  --status-fg: var(--intent-fg, var(--surface-solid-fg));
 
   position: fixed;
   /* Fixed positioning tracks the layout viewport, which the mobile software
@@ -6428,7 +6697,7 @@ a.avatar[aria-disabled="true"] {
 }
 
 .avatar-stack > .avatar {
-  box-shadow: 0 0 0 var(--avatar-stack-ring) var(--surface);
+  box-shadow: 0 0 0 var(--avatar-stack-ring) var(--surface-opaque);
 }
 
 .avatar-stack > .avatar + .avatar {
@@ -6854,7 +7123,7 @@ a.avatar[aria-disabled="true"] {
 }
 
 .rating > input[type="radio"]:focus-visible {
-  outline: var(--focus-outline);
+  outline: var(--focus-ring-width) solid var(--focus);
   outline-offset: var(--focus-outline-offset);
   background: var(--rating-color);
 }
@@ -6960,7 +7229,7 @@ a.avatar[aria-disabled="true"] {
   --step-size: 1.75rem;
   --step-inline-gap: var(--space-20);
   --step-line-size: var(--border-width);
-  --step-marker-bg: var(--surface);
+  --step-marker-bg: var(--surface-opaque);
   --step-marker-border: var(--border);
   --step-marker-fg: var(--text-muted);
   --step-marker-radius: var(--radius-full);
@@ -7040,7 +7309,7 @@ a.avatar[aria-disabled="true"] {
    connector leaving current goes back to neutral. Declared after
    .step-complete at equal specificity: current wins on every channel. */
 .steps > [aria-current="step"] {
-  --step-marker-bg: var(--surface);
+  --step-marker-bg: var(--surface-opaque);
   --step-marker-border: var(--state-selected);
   --step-marker-fg: var(--state-selected);
   --step-line: var(--border);
@@ -7079,7 +7348,7 @@ a.avatar[aria-disabled="true"] {
    focus ring's own width and offset. Only this composition scrolls, and only a
    link has a ring to protect. */
 .steps-horizontal:has(a[href]) {
-  padding-block: calc(var(--focus-outline-offset) + var(--border-width) * 2);
+  padding-block: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 }
 
 /* One explicit row, the marker's: a `.step-label` is auto-placed into an
@@ -7563,8 +7832,9 @@ a.avatar[aria-disabled="true"] {
  *
  * Docs: docs/pages/components/pagination.md
  *
- * Render .btn elements inside a .pagination list. The active page is marked
- * with aria-current="page"; .btn owns the active state styling.
+ * Render .btn.ghost elements inside a .pagination list. The active page is
+ * marked with aria-current="page"; .btn owns the active state styling, so the
+ * current page is the only filled item.
  *
  * Truncated ranges are plain text (`.muted`, `aria-hidden="true"`), not .btn
  * — they are decorative, not actionable. They still get the same box sizing
@@ -7682,10 +7952,10 @@ a.avatar[aria-disabled="true"] {
 }
 
 /* The ring is square on the edge the tab is attached to, so it reads as part
-   of the strip rather than a floating chip. */
+   of the strip rather than a floating chip. Color and width follow the
+   component ring contract (focus.css); only the geometry is tab-specific. */
 .tab:focus-visible {
-  outline: var(--focus-outline);
-  outline-color: var(--focus);
+  outline: var(--focus-ring-width) solid var(--focus);
   outline-offset: -2px;
   border-radius: var(--radius-sm) var(--radius-sm) 0 0;
 }
@@ -7938,6 +8208,12 @@ a.list-item[aria-current]::before {
  * .table-wrap provides the scroll container and outer chrome; .table owns row
  * and cell rules. Tokens are sourced from the shared scale.
  *
+ * Responsive strategy is horizontal overflow: the wrap scrolls, the table
+ * keeps its columns. Restructuring rows into cards would destroy the
+ * column scanability tables exist for, and needs data-label duplication
+ * because CSS cannot join a cell to its header — that representation choice
+ * belongs to the application, not the framework.
+ *
  * Public hooks:
  * --table-min
  * --table-cell-pad
@@ -8026,11 +8302,14 @@ a.list-item[aria-current]::before {
  * .sm/.lg are deliberately not supported.
  *
  * Public hooks:
+ * --meter-track
  * --meter-value
  * --bar-height
  */
 
 .meter {
+  --meter-track: var(--surface-subtle);
+
   appearance: none;
   -webkit-appearance: none;
   display: block;
@@ -8039,7 +8318,7 @@ a.list-item[aria-current]::before {
   overflow: hidden;
   border: 0;
   border-radius: var(--radius-full);
-  background: var(--surface-subtle);
+  background: var(--meter-track);
 }
 
 /* A non-native meter is a weighted flex container. The element type keeps the
@@ -8058,7 +8337,7 @@ a.list-item[aria-current]::before {
 }
 
 .meter:not(meter) > * + * {
-  border-inline-start: var(--border-width) solid var(--surface);
+  border-inline-start: var(--border-width) solid var(--surface-opaque);
 }
 
 .meter::-webkit-meter-bar {
@@ -8066,7 +8345,7 @@ a.list-item[aria-current]::before {
   block-size: var(--bar-height);
   border: 0;
   border-radius: var(--radius-full);
-  background: var(--surface-subtle);
+  background: var(--meter-track);
 }
 
 .meter::-webkit-meter-optimum-value {
@@ -8295,36 +8574,55 @@ a.list-item[aria-current]::before {
 
 .aura {
   --aura-color: var(--intent, var(--primary));
-  --aura-width: 2px;
+  --aura-width: 1px;
   --aura-blur: 0.25rem;
-  --aura-intensity: 1;
+  --aura-intensity: 0.4;
   --aura-radius: var(--radius-lg);
   --aura-duration: 6s;
 
   position: relative;
   isolation: isolate;
   display: inline-grid;
-  padding: var(--aura-width);
   border-radius: calc(var(--aura-radius) + var(--aura-width));
-  border: var(--border-width) solid transparent;
+
+  /* The frame is the border itself, so --aura-width is the painted thickness.
+     A transparent border stays for forced colors, where it becomes the visible
+     boundary; a padding frame inside it would paint both, doubling the line. */
+  border: var(--aura-width) solid transparent;
   background: var(--aura-color);
 
   /* A short feathered accent rather than a long wedge with a hard edge, which
      reads as one lit side. Nothing tints the frame outside it: a constant tint
-     across 2px draws an outline, the opposite of the effect. */
+     across the frame draws an outline, the opposite of the effect. `border-box`
+     sizes the gradient to the border box: the default padding-box origin would
+     tile a neighbouring copy of the gradient into the border, which is now the
+     whole frame. */
   background: conic-gradient(
-    from var(--aura-angle),
-    transparent 0 78%,
-    var(--aura-color) 93%,
-    transparent
-  );
-}
-
-/* Near halo — inherits the frame gradient, so it tracks the lit accent. */
+      from var(--aura-angle),
+      transparent 0 78%,
+      var(--aura-color) 93%,
+      transparent
+    )
+    border-box;
+
+  /* Far halo — flat and static. At this blur the rotating detail is no longer
+     legible, so there is nothing to gain from animating a second wide blurred
+     layer. This is the layer that stays lit at all times, so it — not the
+     frame — is what keeps the object present between two passes of the
+     accent. An outer shadow never paints under the box, so it stays out of a
+     translucent child. min() because a color-mix() share above 100% is
+     invalid, where the opacity it replaces clamped. */
+  box-shadow: 0 0 calc(var(--aura-blur) * 8) var(--aura-blur)
+    color-mix(in oklab, var(--aura-color) min(100%, calc(15% * var(--aura-intensity))), transparent);
+}
+
+/* Near halo — inherits the frame gradient, so it tracks the lit accent. An
+   absolute inset starts at the padding edge, inside the border that is the
+   frame, so the negative inset puts the halo back on the frame. */
 .aura::before {
   position: absolute;
   z-index: -1;
-  inset: 0;
+  inset: calc(-1 * var(--aura-width));
   border-radius: inherit;
   background: inherit;
   filter: blur(var(--aura-blur));
@@ -8333,29 +8631,22 @@ a.list-item[aria-current]::before {
   content: "";
 }
 
-/* Far halo — flat and static. At this blur the rotating detail is no longer
-   legible, so there is nothing to gain from animating a second wide blurred
-   layer. It outgrows the frame, otherwise the child covers it and the whole
-   effect reads as a drop shadow. This is the layer that stays lit at all
-   times, so it — not the frame — is what keeps the object present between two
-   passes of the accent. */
+/* Occlusion — the frame and the near halo paint across the whole box, and only
+   their edge is meant to show. This mask sits above both, under the child, so
+   a transparent or translucent child (an .outline alert, a glass surface) is
+   framed rather than filled with the frame color. It follows the child's
+   shape through --aura-radius. */
 .aura::after {
   position: absolute;
   z-index: -1;
-  inset: calc(-1 * var(--aura-blur));
-  border-radius: calc(var(--aura-radius) + var(--aura-width) + var(--aura-blur));
-  background: var(--aura-color);
-  filter: blur(calc(var(--aura-blur) * 4));
-  opacity: calc(0.15 * var(--aura-intensity));
+  inset: 0;
+  border-radius: var(--aura-radius);
+  background: var(--surface-opaque);
   pointer-events: none;
   content: "";
 }
 
-/* Lifts the child above both halos. It also has to be opaque: the frame paints
-   across the whole box and only its edge is meant to show, so a transparent
-   child (an .outline alert, a .ghost button) is filled with the frame color
-   rather than framed by it. Documented as a constraint, not worked around —
-   masking a ring would cost more than the case is worth. */
+/* Lifts the child above the halo and the mask. */
 .aura > * {
   position: relative;
 }
@@ -8378,7 +8669,7 @@ a.list-item[aria-current]::before {
     animation: aura-breathe-near var(--aura-duration) ease-in-out infinite;
   }
 
-  .aura-glow::after {
+  .aura-glow {
     animation: aura-breathe-far var(--aura-duration) ease-in-out infinite;
   }
 }
@@ -8390,8 +8681,8 @@ a.list-item[aria-current]::before {
 @media (prefers-reduced-motion: reduce) {
   .aura:not(.aura-glow) {
     background:
-      radial-gradient(4rem 4rem at 0% 0%, var(--aura-color), transparent 70%),
-      radial-gradient(4rem 4rem at 100% 100%, var(--aura-color), transparent 70%);
+      radial-gradient(4rem 4rem at 0% 0%, var(--aura-color), transparent 70%) border-box,
+      radial-gradient(4rem 4rem at 100% 100%, var(--aura-color), transparent 70%) border-box;
   }
 }
 
@@ -8412,10 +8703,16 @@ a.list-item[aria-current]::before {
   }
 }
 
+/* The far halo is the element's own shadow: opening its spread and share
+   breathes it without scaling the child. */
 @keyframes aura-breathe-far {
   50% {
-    opacity: calc(0.28 * var(--aura-intensity));
-    transform: scale(1.07);
+    box-shadow: 0 0 calc(var(--aura-blur) * 10) calc(var(--aura-blur) * 2)
+      color-mix(
+        in oklab,
+        var(--aura-color) min(100%, calc(28% * var(--aura-intensity))),
+        transparent
+      );
   }
 }
 
@@ -8435,6 +8732,64 @@ a.list-item[aria-current]::before {
   --aura-radius: var(--radius-full);
 }
 
+/*
+ * Highlight sweeping across a text label — an activity in progress.
+ *
+ * Docs: docs/pages/components/shimmer.md
+ *
+ * Presentation only: it carries no state and selects no ARIA attribute, so the
+ * label stays whatever the author makes it (a role="status" message, a list
+ * item, a heading).
+ *
+ * Public hooks:
+ * --shimmer-color
+ * --shimmer-highlight
+ */
+.shimmer {
+  --shimmer-color: var(--text-muted);
+  --shimmer-highlight: var(--text);
+
+  color: var(--shimmer-color);
+}
+
+/* The sweep paints the glyphs through a clipped background, which needs the
+   glyph fill transparent. Without background-clip: text that would erase the
+   label, so the transparency lives under the same query as the clip. It is
+   the fill, not `color`: a label class that sets its own color (.muted, a
+   caption style) would otherwise win the cascade and paint opaque glyphs over
+   the sweep. Reduced motion keeps the plain label — a frozen band would read
+   as a random tint. */
+@supports (background-clip: text) {
+  @media (prefers-reduced-motion: no-preference) {
+    .shimmer {
+      -webkit-text-fill-color: transparent;
+      background:
+        linear-gradient(
+          90deg,
+          var(--shimmer-color) 40%,
+          var(--shimmer-highlight) 50%,
+          var(--shimmer-color) 60%
+        )
+        0 0 / 300% 100%;
+      background-clip: text;
+      animation: actual-shimmer var(--duration-shimmer) linear infinite;
+    }
+  }
+}
+
+/* The band occupies the middle third of a background three times the label's
+   width, so each pass leaves the end of the label before the next one enters
+   at the start. */
+@keyframes actual-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+
+  to {
+    background-position: 0% 0;
+  }
+}
+
 /* Utilities — small, single-purpose escape hatches. */
 /*
  * Small, single-purpose utilities for common escape hatches.