actual-css 0.13.0 → 0.14.1

package/dist/actual.full.css

@@ -215,9 +215,20 @@ select {
 [data-theme] {
   /* State tokens — semantic colors for selected/pressed/current and disabled.
      Components consume these instead of hard-wiring --primary/--text-subtle
-     so forced-colors can override them in one place. */
+     so forced-colors can override them in one place. --state-selected is a
+     selected fill or accent, --state-selected-fg the ink on that fill.
+     --state-selected-text is selected ink on a regular surface (current nav
+     link, selected tab, current step number). It is reset to the
+     guaranteed-invalid value on every theme boundary, so a consumer reads its
+     local --state-selected through the fallback var(--state-selected-text,
+     var(--state-selected)): a theme that resolves it to var(--link) bakes that
+     reference where it is declared, so a nested island that does not set it
+     inherits an already-resolved value the local fallback can never reach. A
+     theme sets it when one color cannot be both a fill under its -fg and text
+     on the page, typically in a dark scheme. */
   --state-selected: var(--primary);
   --state-selected-fg: var(--primary-fg);
+  --state-selected-text: initial;
   --state-disabled: var(--text-subtle);
 
   /* Status dot ring — cuts the dot out of what it overlaps. */
@@ -226,10 +237,15 @@ select {
 
 :root {
   /* Variant tuning — themes may adjust generated soft surfaces without
-     replacing the component rules. */
+     replacing the component rules. --soft-bg-mix is the share of surface in a
+     soft fill: an opaque mix on the shared .soft, an opacity (100% minus it)
+     on the translucent badge, alert and soft-button tint. --soft-hover-alpha
+     is the extra intent share on hover. --soft-border-mix has no default: it
+     is a fallback-only hook whose absence lets each recipe keep its own rim
+     (a tinted rim on .soft, none on the tint), and a theme that sets it gives
+     both a rim of that weight. */
   --soft-bg-mix: 88%;
-  --soft-border-mix: 65%;
-  --soft-hover-alpha: 12%;
+  --soft-hover-alpha: 6%;
   /* Soft foreground: the share of raw intent in soft text. 100% keeps the
      pure intent color; lower values rebate it toward --text, which vivid or
      light intent palettes need to stay legible on their own soft surface.
@@ -718,6 +734,9 @@ small {
  *
  * Intent list source of truth: intents.css. Components consume --intent* tokens
  * instead of re-listing intent classes.
+ *
+ * Public hooks:
+ * --soft-border-mix (fallback-only: a soft rim of that weight on every recipe)
  */
 .solid {
   --ui-bg: var(--intent, var(--neutral));
@@ -781,7 +800,7 @@ 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
+   tabs, segmented, flyout). A local size declaration beats inherited density because it
    is declared on the sized component itself. Guarded by check:sync
    (size-scale-participants): .sm and .lg must list the same components. */
 :where(
@@ -794,6 +813,7 @@ small {
   .field,
   .choice,
   .choice-card,
+  .color-swatch,
   .input-icon,
   .floating-field,
   .otp,
@@ -801,6 +821,7 @@ small {
   .pagination,
   .tabs,
   .tab,
+  .segmented,
   .flyout
 ).sm {
   --control-size: var(--control-size-sm);
@@ -821,6 +842,7 @@ small {
   .field,
   .choice,
   .choice-card,
+  .color-swatch,
   .input-icon,
   .floating-field,
   .otp,
@@ -828,6 +850,7 @@ small {
   .pagination,
   .tabs,
   .tab,
+  .segmented,
   .flyout
 ).lg {
   --control-size: var(--control-size-lg);
@@ -839,21 +862,25 @@ small {
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable
-   everywhere. Interactive states live in the components that consume them. */
+   everywhere. Interactive states live in the components that consume them.
+   The shared .soft is opaque: it paints zones (.card, .navbar, .app-nav,
+   .chat-bubble) an author may lay over an image, where a translucent fill
+   would hand the text's contrast to whatever is behind it. The badge, alert
+   and soft button own a translucent tint instead (soft-tint). */
 @supports (color: color-mix(in oklch, red, white)) {
   .soft {
-    /* @sync soft-recipe */
     --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
     --ui-border: color-mix(
       in oklab,
-      var(--surface) var(--soft-border-mix),
+      var(--surface) var(--soft-border-mix, 65%),
       var(--intent, var(--neutral))
     );
+    /* @sync soft-ink */
     --ui-fg: var(
       --intent-soft-fg,
       color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
-    /* @sync soft-recipe */
+    /* @sync soft-ink */
   }
 }
 
@@ -880,6 +907,9 @@ small {
    --surface-solid, so one token reads on the page, on a solid band and on
    any nested surface.
 
+   A .segment is an action but takes the inset ring: its track's padding is
+   narrower than an offset ring, which would cover the neighbouring segment.
+
    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
@@ -1927,16 +1957,36 @@ small {
  * --scroll-snap-align
  * --scroll-snap-item-size
  * --scroll-snap-padding
+ *
+ * Internal:
+ * --scroll-snap-focus-bleed
  */
 .scroll-snap {
   --scroll-snap-gap: var(--gap);
   --scroll-snap-align: start;
   --scroll-snap-item-size: auto;
+  /* Declared here, not as a :root alias: an inherited alias arrives already
+     computed, so a --focus-ring-width override on the rail would not reach it. */
+  --scroll-snap-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
   display: flex;
   flex-direction: row;
   gap: var(--scroll-snap-gap);
+  /* Both axes clip: `auto` on one computes the other to `auto`, so a ring on
+     the top or bottom item would be lost too. Every side reserves the ring's
+     own width; the block reserve returns to the flow through a negative
+     margin, while the inline reserve stays as the rail's focus gutter.
+     Bleeding the inline reserve outward instead would make the border box
+     `containing block + 2 * reserve` wide, which at the viewport edge grows
+     the page: a rail cannot be flush with arbitrary surrounding content and
+     free of page overflow at once. */
+  margin-block: calc(var(--scroll-snap-focus-bleed) * -1);
+  padding-block: var(--scroll-snap-focus-bleed);
+  padding-inline: var(--scroll-snap-focus-bleed);
   overflow-x: auto;
+  /* One scroll axis, stated: a fractional content height could otherwise raise
+     a phantom vertical scrollbar under one font or zoom step. */
+  overflow-y: hidden;
 }
 
 .scroll-snap > * {
@@ -1946,7 +1996,17 @@ small {
 @supports (scroll-snap-type: x mandatory) {
   .scroll-snap {
     overscroll-behavior-inline: contain;
+    /* Fallback only, never the ring's protector: padding-inline above already
+       guarantees paint. A unitless `0` drops the clamp below but keeps this
+       declaration, so the worst case is a snapped item flush with the gutter,
+       not a clipped ring. */
     scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap));
+    /* A conforming <length> stays at least the focus reserve, so scroll and
+       snap stop with the gutter's air. */
+    scroll-padding-inline: max(
+      var(--scroll-snap-padding, var(--scroll-snap-gap)),
+      var(--scroll-snap-focus-bleed)
+    );
     /* x then inline: an engine that lacks the logical keyword keeps x.
        proximity is the default, so a short rail cannot trap the pointer. */
     scroll-snap-type: x proximity;
@@ -2043,6 +2103,16 @@ small {
   }
 }
 
+/* A reduce override, not a no-preference gate: a browser without the feature
+   evaluates it false and keeps the frosted bar instead of losing it. */
+@media (prefers-reduced-transparency: reduce) {
+  .topbar {
+    background: var(--surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
 /* Readable content measure. Composes with .center for centering or with
    margin-inline: auto for a one-off centered block.
  *
@@ -2557,6 +2627,9 @@ small {
  *
  * Range has its own custom-styled file (range.css) so the focus ring can
  * target the thumb pseudo-element rather than the rectangular CSS box.
+ *
+ * Public hooks:
+ * --color-size
  */
 .file {
   color: var(--text-muted);
@@ -2602,16 +2675,24 @@ small {
   outline-offset: var(--focus-outline-offset);
 }
 
-/* Native color picker — keep the browser's dialog and selected-color UI. The
-   swatch fills almost the whole control so it reads as a color, not as a tiny
-   square inside a button; the 1px padding keeps a hair of --surface around it. */
+/* Native color picker — keep the browser's dialog and selected-color UI. Same
+   geometry as .color-swatch: a --control-size hit area around a round swatch
+   the height of a .switch track, so a picker, a palette and a switch compose.
+   The input is the hit area; its padding leaves the swatch, which carries the
+   edge and the focus ring. Vendor pseudos cannot share a rule. */
 .color {
-  inline-size: var(--control-size);
-  block-size: var(--control-size);
-  padding: var(--border-width);
-  border: var(--border-width) solid var(--border-control);
-  border-radius: var(--radius);
-  background: var(--surface);
+  --color-size: calc(var(--choice-control-size) + 0.125em);
+
+  inline-size: max(var(--control-size), var(--color-size));
+  block-size: max(var(--control-size), var(--color-size));
+  padding: calc((max(var(--control-size), var(--color-size)) - var(--color-size)) / 2);
+  /* Lay out at the visible width, as .color-swatch does: the hit area
+     overflows on both sides so a label gap is measured from the swatch. */
+  margin: 0 calc((var(--color-size) - max(var(--control-size), var(--color-size))) / 2);
+  border: 0;
+  background: transparent;
+  /* Consumed so .sm/.lg reach the em-sized swatch. */
+  font-size: var(--control-font-size);
   cursor: pointer;
 }
 
@@ -2620,13 +2701,21 @@ small {
 }
 
 .color::-webkit-color-swatch {
-  border: 0;
-  border-radius: calc(var(--radius) - var(--border-width));
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--radius-full);
 }
 
 .color::-moz-color-swatch {
-  border: 0;
-  border-radius: calc(var(--radius) - var(--border-width));
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--radius-full);
+}
+
+.color:hover::-webkit-color-swatch {
+  border-color: var(--text-subtle);
+}
+
+.color:hover::-moz-color-swatch {
+  border-color: var(--text-subtle);
 }
 
 .color:disabled {
@@ -2634,25 +2723,36 @@ small {
   opacity: var(--disabled-opacity);
 }
 
+/* The ring goes around the visible swatch, not the larger hit area. */
 .color:focus-visible {
+  outline: none;
+}
+
+.color:focus-visible::-webkit-color-swatch {
   outline: var(--focus-ring-width) solid var(--focus);
   outline-offset: var(--focus-outline-offset);
 }
 
-@media (forced-colors: active) {
-  .color {
-    border-color: ButtonText;
-    background: ButtonFace;
-  }
+.color:focus-visible::-moz-color-swatch {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
 
-  /* The swatch color is content, so preserve it without disabling the host's
-     native forced-color focus treatment. Vendor pseudos cannot share a rule. */
+@media (forced-colors: active) {
+  /* The swatch color is content, so the swatch opts out of forcing and takes
+     system colors for its edge and ring itself. */
   .color::-webkit-color-swatch {
+    --focus: CanvasText;
+
     forced-color-adjust: none;
+    border-color: CanvasText;
   }
 
   .color::-moz-color-swatch {
+    --focus: CanvasText;
+
     forced-color-adjust: none;
+    border-color: CanvasText;
   }
 }
 
@@ -2802,6 +2902,15 @@ small {
   }
 }
 
+/* Same reduce override as .topbar (src/css/layout/topbar.css). */
+@media (prefers-reduced-transparency: reduce) {
+  .form-actions.sticky {
+    background: var(--surface);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}
+
 /*
  * Input Icon — decorative icon inside a relative wrapper, leading or trailing.
  *
@@ -2881,6 +2990,7 @@ small {
  * --switch-block-size
  * --switch-knob-margin
  * --switch-knob-size
+ * --switch-knob-inline-size
  * --switch-travel
  *
  * The track is sized from --choice-control-size (tokens.css), not
@@ -2914,9 +3024,11 @@ small {
     2 *
     var(--switch-knob-margin)
   );
+  /* A wider knob is a capsule; the travel follows its width. */
+  --switch-knob-inline-size: var(--switch-knob-size);
   --switch-travel: calc(
     var(--switch-width) -
-    var(--switch-knob-size) -
+    var(--switch-knob-inline-size) -
     2 *
     var(--border-width) -
     2 *
@@ -2952,7 +3064,7 @@ small {
   position: absolute;
   inset-block-start: var(--switch-knob-margin);
   inset-inline-start: var(--switch-knob-margin);
-  inline-size: var(--switch-knob-size);
+  inline-size: var(--switch-knob-inline-size);
   block-size: var(--switch-knob-size);
   border-radius: var(--radius-full);
   background: var(--switch-knob);
@@ -3464,6 +3576,170 @@ small {
   }
 }
 
+/*
+ * Color swatch — a color chosen from a palette the application defines.
+ *
+ * Docs: docs/pages/forms/color-swatches.md
+ *
+ * A <label class="color-swatch"> wraps a native radio (one color) or checkbox
+ * (several) and paints --color-swatch-value. The same class on a <button> is
+ * the trigger of a palette flyout. The application owns the colors; Actual
+ * owns the shape, the selection mark and the focus ring.
+ *
+ * Two sizes: the visible swatch (::before) is the height of a .switch track, so
+ * a swatch and a switch in neighbouring rows match; the element is the hit
+ * area around it. The hit area reaches half the inherited --gap past the
+ * swatch, up to --control-size, and overflows its layout box: neighbours in a
+ * .cluster or .grid meet in the middle of the gap instead of overlapping, and
+ * rows sit one gap apart like columns. Edge, selection ring and focus ring all
+ * belong to the visible swatch.
+ *
+ * The color is arbitrary, so nothing drawn on it may assume a contrast: the
+ * selected mark is a double ring (--text outside, --surface-opaque inside) that
+ * reads on any fill, and a hairline edge keeps a near-white color apart from
+ * the page. ::before opts out of forced colors to keep the color, so it takes
+ * system colors itself there.
+ *
+ * Without :has() the native radio stays visible in the swatch and carries the
+ * state; the ring needs :has() to mirror it.
+ *
+ * Public hooks:
+ * --color-swatch-value (fallback-only: the color, set per swatch)
+ * --color-swatch-size
+ * --color-swatch-radius
+ */
+.color-swatch {
+  /* The .switch track height (switch.css); a browser test holds them equal. */
+  --color-swatch-size: calc(var(--choice-control-size) + 0.125em);
+  --color-swatch-radius: var(--radius-full);
+  /* Internal: what the hit area adds to the swatch, half on each side. One gap
+     at most, so two neighbours never claim the same point — a wider reach let
+     the next swatch take a click on this one's center. */
+  --color-swatch-reach: clamp(0px, var(--control-size) - var(--color-swatch-size), var(--gap));
+
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: calc(var(--color-swatch-size) + var(--color-swatch-reach));
+  block-size: calc(var(--color-swatch-size) + var(--color-swatch-reach));
+  /* Lay out at the visible size: gaps are measured from the swatch, not from
+     its invisible reach. */
+  margin: calc(var(--color-swatch-reach) / -2);
+  padding: 0;
+  /* No in-flow text, so the baseline would be the box's bottom edge and an
+     inline swatch would ride above the line (a flyout trigger beside its
+     label). A palette in .cluster or .grid ignores it. */
+  vertical-align: middle;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  /* Consumed so .sm/.lg reach the em-sized swatch, as on .choice-card. */
+  font: inherit;
+  font-size: var(--control-font-size);
+  cursor: pointer;
+}
+
+.color-swatch::before {
+  content: "";
+  grid-area: 1 / 1;
+  inline-size: var(--color-swatch-size);
+  block-size: var(--color-swatch-size);
+  box-sizing: border-box;
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--color-swatch-radius);
+  background: var(--color-swatch-value, transparent) padding-box;
+  /* The color is the content, as on .color (native.css). */
+  forced-color-adjust: none;
+  transition:
+    border-color var(--duration),
+    box-shadow var(--duration);
+}
+
+/* Shares the swatch's cell and paints after ::before, so a native radio left
+   visible sits on the color. */
+.color-swatch > input {
+  grid-area: 1 / 1;
+  position: relative;
+  margin: 0;
+}
+
+/* Visually hidden but focusable, submitted and arrow-key navigable (sr-only
+   pattern). Guarded: without :has() the swatch cannot mirror :checked, so the
+   visible native radio is the fallback. */
+@supports selector(:has(*)) {
+  .color-swatch > input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+.color-swatch:hover::before {
+  border-color: var(--text-subtle);
+}
+
+.color-swatch:has(> input:checked)::before {
+  box-shadow:
+    inset 0 0 0 2px var(--text),
+    inset 0 0 0 4px var(--surface-opaque);
+}
+
+/* The ring goes around the visible swatch, not the larger hit area. */
+.color-swatch:focus-visible {
+  outline: none;
+}
+
+.color-swatch:focus-visible::before {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.color-swatch:has(> input:focus-visible)::before {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.color-swatch:disabled {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+.color-swatch:has(> input:disabled) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* A disabled swatch keeps its color: --disabled-opacity is 1 here
+   (tokens.css), and the edge carries the state. */
+@media (forced-colors: active) {
+  .color-swatch::before {
+    --focus: CanvasText;
+
+    border-color: CanvasText;
+  }
+
+  .color-swatch:has(> input:checked)::before {
+    box-shadow:
+      inset 0 0 0 2px CanvasText,
+      inset 0 0 0 4px Canvas;
+  }
+
+  .color-swatch:disabled::before {
+    border-color: GrayText;
+  }
+
+  .color-swatch:has(> input:disabled)::before {
+    border-color: GrayText;
+  }
+}
+
 /*
  * Customizable select — appearance: base-select picker enhancement.
  *
@@ -3958,12 +4234,27 @@ small {
   --ui-hover-bg: transparent;
 }
 
+/* A soft button takes the badge and alert tint, not the shared opaque .soft:
+   it carries a short label like them, and the translucent fill keeps
+   separating on a subtle or raised surface. Ink stays the shared .soft one. */
 @supports (color: color-mix(in oklch, red, white)) {
   .btn.soft {
+    /* @sync soft-tint */
+    --ui-bg: color-mix(
+      in oklab,
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix)),
+      transparent
+    );
+    --ui-border: color-mix(
+      in oklab,
+      var(--intent, var(--neutral)) calc(100% - var(--soft-border-mix, 100%)),
+      transparent
+    );
+    /* @sync soft-tint */
     --ui-hover-bg: color-mix(
       in oklab,
-      var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix) + var(--soft-hover-alpha)),
+      transparent
     );
   }
 
@@ -4162,11 +4453,14 @@ a.btn[aria-disabled="true"] {
 }
 
 @media (forced-colors: active) {
-  /* The X is a currentColor mask fill: without this the system remaps the
-    background to Canvas and the glyph disappears. Kept on the pseudo so the
-    host keeps its native color and focus adaptation. */
+  /* The X is a mask fill: without this the system remaps the background to
+    Canvas and the glyph disappears. Kept on the pseudo so the host keeps its
+    native color and focus adaptation. The fill is the system color, not
+    currentColor: an unadjusted pseudo inherits the authored ink, so a white
+    .solid ink painted a white X on Canvas. */
   .close::before {
     forced-color-adjust: none;
+    background: ButtonText;
   }
 }
 
@@ -4283,28 +4577,42 @@ a.btn[aria-disabled="true"] {
 }
 
 /* Soft by default. Local defaults remain behind --ui-* in the resolution
-   chain, so explicit shared treatments compose without selector exclusions. */
+   chain, so explicit shared treatments compose without selector exclusions.
+   The fill is a translucent intent tint, so it shows the surface it sits on
+   instead of a fixed mix with --surface: a mix stops separating on a subtle
+   or raised surface of its own lightness. No rim unless a theme sets
+   --soft-border-mix (tokens.css). */
 @supports (color: color-mix(in oklch, red, white)) {
   .badge {
-    /* @sync soft-recipe */
+    /* @sync soft-tint */
     --badge-default-bg: color-mix(
       in oklab,
-      var(--surface) var(--soft-bg-mix),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix)),
+      transparent
     );
     --badge-default-border: color-mix(
       in oklab,
-      var(--surface) var(--soft-border-mix),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-border-mix, 100%)),
+      transparent
     );
+    /* @sync soft-tint */
+    /* @sync soft-ink */
     --badge-default-fg: var(
       --intent-soft-fg,
       color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
-    /* @sync soft-recipe */
+    /* @sync soft-ink */
   }
 }
 
+/* Soft is the badge's own default: an explicit .soft must not swap the tint
+   for the shared opaque .soft recipe, so it defers to the default. */
+.badge.soft {
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
 .badge:empty {
   --badge-size: var(--badge-dot-size);
   --badge-bg: var(--intent, var(--neutral));
@@ -4343,8 +4651,8 @@ a.btn[aria-disabled="true"] {
   :is(a.badge, button.badge):where(:not(.solid, .outline, :empty)) {
     --badge-default-hover-bg: color-mix(
       in oklab,
-      var(--surface) calc(var(--soft-bg-mix) - var(--soft-hover-alpha)),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix) + var(--soft-hover-alpha)),
+      transparent
     );
   }
 
@@ -4462,6 +4770,16 @@ a.badge[aria-disabled="true"] {
   font-size: var(--alert-font-size);
 }
 
+/* Density steps the block padding only: the inline padding is the text
+   column's edge and stays stable. Local to the alert, like .card.compact. */
+.alert.compact {
+  --alert-pad-block: var(--space-20);
+}
+
+.alert.spacious {
+  --alert-pad-block: var(--space-40);
+}
+
 .alert > * {
   min-inline-size: 0;
 }
@@ -4486,28 +4804,40 @@ a.badge[aria-disabled="true"] {
 }
 
 /* Alerts are soft by default. The recipe writes local defaults rather than
-   --ui-* so an explicit shared treatment always wins without exclusions. */
+   --ui-* so an explicit shared treatment always wins without exclusions. The
+   fill is the translucent soft tint (see badge.css), with no rim unless a
+   theme sets --soft-border-mix. */
 @supports (color: color-mix(in oklch, red, white)) {
   .alert {
-    /* @sync soft-recipe */
+    /* @sync soft-tint */
     --alert-default-bg: color-mix(
       in oklab,
-      var(--surface) var(--soft-bg-mix),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-bg-mix)),
+      transparent
     );
     --alert-default-border: color-mix(
       in oklab,
-      var(--surface) var(--soft-border-mix),
-      var(--intent, var(--neutral))
+      var(--intent, var(--neutral)) calc(100% - var(--soft-border-mix, 100%)),
+      transparent
     );
+    /* @sync soft-tint */
+    /* @sync soft-ink */
     --alert-default-fg: var(
       --intent-soft-fg,
       color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
-    /* @sync soft-recipe */
+    /* @sync soft-ink */
   }
 }
 
+/* Soft is the alert's own default: an explicit .soft must not swap the tint
+   for the shared opaque .soft recipe, so it defers to the default. */
+.alert.soft {
+  --ui-bg: initial;
+  --ui-fg: initial;
+  --ui-border: initial;
+}
+
 /* 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. */
@@ -4606,7 +4936,10 @@ a.badge[aria-disabled="true"] {
 
 /* Admonition — structured static box with a tinted title bar and a body
    that rests on the page surface. Not collapsible — use .accordion inside
-   the body if the content needs to be expandable. */
+   the body if the content needs to be expandable. The title bar is what a
+   shared treatment paints (.solid fills it, .surface/.outline clear it): the
+   root's fill never shows behind the opaque title and body, and the title ink
+   already follows --ui-fg, so a bar left on the soft tint is unreadable. */
 .alert.admonition {
   padding: 0;
   display: block;
@@ -4620,6 +4953,7 @@ a.badge[aria-disabled="true"] {
   gap: var(--space-20);
   padding-block: var(--alert-pad-block);
   padding-inline: var(--alert-pad-inline);
+  font-weight: var(--font-weight-semibold);
   border-start-start-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width));
   border-start-end-radius: calc(var(--alert-radius, var(--radius-lg)) - var(--border-width));
 }
@@ -4631,18 +4965,17 @@ a.badge[aria-disabled="true"] {
 
 @supports (color: color-mix(in oklch, red, white)) {
   .alert.admonition > .alert-title {
-    background: color-mix(
-      in oklab,
-      var(--surface) var(--soft-bg-mix),
-      var(--intent, var(--neutral))
+    background: var(
+      --ui-bg,
+      color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)))
     );
   }
 }
 
 @supports not (color: color-mix(in oklch, red, white)) {
   .alert.admonition > .alert-title {
-    background: var(--intent, var(--neutral));
-    color: var(--intent-fg, var(--neutral-fg));
+    background: var(--ui-bg, var(--intent, var(--neutral)));
+    color: var(--ui-fg, var(--intent-fg, var(--neutral-fg)));
   }
 }
 
@@ -4653,6 +4986,32 @@ a.badge[aria-disabled="true"] {
   color: var(--text);
 }
 
+/* Solid: the filled title bar already carries the intent, so the frame moves
+   to the body and stays neutral. The root border goes because a transparent
+   one would show the root's intent fill around the body. */
+.alert.admonition.solid {
+  border: 0;
+}
+
+.alert.admonition.solid > .alert-body {
+  border: var(--border-width) solid var(--border);
+  border-block-start: 0;
+  border-end-start-radius: var(--alert-radius, var(--radius-lg));
+  border-end-end-radius: var(--alert-radius, var(--radius-lg));
+}
+
+/* Forced colors drop the title fill, so the bar would lose its edge: the
+   frame returns to the root as one uniform system-colored border. */
+@media (forced-colors: active) {
+  .alert.admonition.solid {
+    border: var(--border-width) solid CanvasText;
+  }
+
+  .alert.admonition.solid > .alert-body {
+    border: 0;
+  }
+}
+
 .alert.admonition > .alert-body > :first-child {
   margin-block-start: 0;
 }
@@ -7362,11 +7721,14 @@ a.avatar[aria-disabled="true"] {
 
 /* Complete owns the accented connector that reaches the current step, so the
    connector leaving current goes back to neutral. Declared after
-   .step-complete at equal specificity: current wins on every channel. */
+   .step-complete at equal specificity: current wins on every channel. The
+   current marker is a regular surface, so its number and ring are selected
+   ink on a surface, not a selected fill; they are held to different ratios
+   (4.5:1 for the number, 3:1 for the ring) by report:theme-contrast. */
 .steps > [aria-current="step"] {
   --step-marker-bg: var(--surface-opaque);
-  --step-marker-border: var(--state-selected);
-  --step-marker-fg: var(--state-selected);
+  --step-marker-border: var(--state-selected-text, var(--state-selected));
+  --step-marker-fg: var(--state-selected-text, var(--state-selected));
   --step-line: var(--border);
 
   color: var(--text);
@@ -7667,6 +8029,7 @@ a.avatar[aria-disabled="true"] {
 }
 
 .app-nav > a {
+  position: relative;
   display: grid;
   grid-template-rows: auto auto;
   place-content: center;
@@ -7707,20 +8070,27 @@ a.avatar[aria-disabled="true"] {
 }
 
 /* Current tile is already a full selected surface. Selection never changes
-   text metrics: the shared medium weight is kept, no permanent indicator is
-   added here. */
+   text metrics: the shared medium weight is kept. The forced-colors cue is a
+   transparent border on a ::before overlay, not on the tile: an element border
+   shrinks the content box, and the side layout starts its content at the inline
+   edge, so the icon and label shifted by --border-width when a tile became
+   current. The overlay costs no layout, yet forced colors still turn its
+   transparent border into a system-color frame once --state-selected flattens
+   to the bar's own Canvas. No forced-colors repaint: a Highlight fill put
+   HighlightText on Chromium's Canvas backplate, which hid the label. The
+   positioning context is on every link so it does not move when one becomes
+   current or an application places its own decoration. */
 .app-nav > a[aria-current="page"] {
   background: var(--state-selected);
   color: var(--state-selected-fg);
 }
 
-@media (forced-colors: active) {
-  /* --state-selected flattens to a UA color that no longer distinguishes the
-     current tile from the rest of the bar, so paint the system Highlight pair. */
-  .app-nav > a[aria-current="page"] {
-    background: Highlight;
-    color: HighlightText;
-  }
+.app-nav > a[aria-current="page"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border: var(--border-width) solid transparent;
+  border-radius: inherit;
 }
 
 /*
@@ -7732,6 +8102,9 @@ a.avatar[aria-disabled="true"] {
  * links are a .cluster using .nav-link items. .nav-list is the vertical nav
  * list shared with .drawer, fed by the shared --gap token.
  *
+ * Public hooks:
+ * --state-selected-text (fallback-only: current-link ink, see tokens.css)
+ *
  * Internal:
  * --gap (local value for the shared gap token)
  */
@@ -7809,7 +8182,7 @@ a.avatar[aria-disabled="true"] {
    shared with the hover rule above. */
 .nav-link:is([aria-current="page"], [aria-current="location"]) {
   background: var(--surface-subtle);
-  color: var(--state-selected);
+  color: var(--state-selected-text, var(--state-selected));
 }
 
 /* On a bar with its own --ui-bg/--ui-fg the fill is a tint of the link's own
@@ -7830,7 +8203,7 @@ a.avatar[aria-disabled="true"] {
 
   /* 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));
+    color: var(--ui-fg, var(--state-selected-text, var(--state-selected)));
   }
 }
 
@@ -8265,7 +8638,7 @@ a.avatar[aria-disabled="true"] {
    stays inert. */
 .tab[aria-selected="true"],
 .tab:is([aria-current="page"], [aria-current="true"]) {
-  color: var(--intent, var(--state-selected));
+  color: var(--intent, var(--state-selected-text, var(--state-selected)));
 }
 
 /* The selected indicator lives on a positioned pseudo so that only the active
@@ -8296,6 +8669,193 @@ a.avatar[aria-disabled="true"] {
   inline-size: 100%;
 }
 
+/*
+ * Segmented control — one compact choice among a few, on a shared track.
+ *
+ * Docs: docs/pages/components/segmented.md
+ *
+ * .segmented is the track, each .segment a direct child. The look is shared;
+ * the semantics stay with the markup, and the selected state is read from it:
+ *   radios    <label class="segment"><input type="radio">   :checked
+ *   tabs      <button class="segment" role="tab">           aria-selected="true"
+ *   links     <a class="segment">                           aria-current="page"
+ * No script of its own: radios bring their arrow keys, a tablist takes
+ * data-enhance="tabs". Without :has() the radio anatomy loses its selected
+ * fill and focus ring, and the native radio stays visible to carry both.
+ *
+ * One row of equal shares (grid-auto-columns: 1fr), at least --control-size
+ * tall so it lines up with .btn and .input. Labels wrap instead of truncating;
+ * a word longer than its share breaks, so the control never overflows its
+ * container. A strip too long for one row is .tabs, which scrolls.
+ *
+ * Focus is drawn inside the segment, unlike other discrete actions
+ * (focus.css): an offset ring would cross the track's padding and cover the
+ * neighbouring segment.
+ *
+ * Public hooks:
+ * --segmented-bg
+ * --segmented-pad
+ * --segmented-radius
+ * --segmented-fg
+ * --segmented-selected-bg
+ * --segmented-selected-border
+ */
+.segmented {
+  --segmented-bg: var(--surface-subtle);
+  --segmented-pad: var(--space-10);
+  --segmented-radius: var(--radius);
+  --segmented-fg: var(--text-muted);
+  --segmented-selected-bg: var(--surface-raised);
+  /* The edge is what separates the selected segment where --surface-raised
+     is darker than --surface-subtle (the default dark palette). */
+  --segmented-selected-border: var(--border);
+
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  gap: var(--segmented-pad);
+  /* why: margin and border also reset <fieldset>, the radio anatomy's
+     element. The border is transparent, not 0: forced colors paint it, which
+     outlines the track once its fill is gone. */
+  margin: 0;
+  padding: var(--segmented-pad);
+  border: var(--border-width) solid transparent;
+  border-radius: var(--segmented-radius);
+  background: var(--segmented-bg);
+  font-size: var(--control-font-size);
+  vertical-align: middle;
+}
+
+.segment {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375em;
+  /* The track is --control-size tall through its segments, not through its
+     own min-block-size: a <fieldset> lays its content in an anonymous box
+     sized to the content, so a minimum on the track left the segments short.
+     A minimum, not a height: a wrapped label grows the whole row. */
+  min-block-size: calc(var(--control-size) - 2 * (var(--segmented-pad) + var(--border-width)));
+  padding: calc(var(--space-10) / 2) var(--space-30);
+  border: 0;
+  border-radius: calc(var(--segmented-radius) - var(--segmented-pad));
+  background: transparent;
+  color: var(--segmented-fg);
+  font: inherit;
+  /* Constant across states: a heavier selected label would resize its share. */
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+  text-align: center;
+  text-decoration: none;
+  /* why: also shrinks the min-content contribution, so 1fr keeps equal
+     shares under constraint instead of widening one around a long word. */
+  overflow-wrap: anywhere;
+  cursor: pointer;
+  transition:
+    background-color var(--duration),
+    color var(--duration),
+    box-shadow var(--duration);
+}
+
+.segment > input {
+  margin: 0;
+}
+
+/* The radio is visually hidden but stays focusable, submitted and arrow-key
+   navigable (sr-only pattern). Guarded: without :has() the segment cannot
+   mirror :checked, so the visible native radio is the fallback. */
+@supports selector(:has(*)) {
+  .segment > input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+.segment:hover {
+  color: var(--text);
+}
+
+/* Separate rules from the :has() forms below: an engine without :has() would
+   discard a shared selector list, ARIA states included. */
+.segment:is([aria-selected="true"], [aria-current="page"], [aria-current="true"]) {
+  background: var(--segmented-selected-bg);
+  color: var(--text);
+  box-shadow:
+    0 0 0 var(--border-width) var(--segmented-selected-border),
+    var(--shadow);
+}
+
+.segment:has(> input:checked) {
+  background: var(--segmented-selected-bg);
+  color: var(--text);
+  box-shadow:
+    0 0 0 var(--border-width) var(--segmented-selected-border),
+    var(--shadow);
+}
+
+.segment:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.segment:has(> input:focus-visible) {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: calc(var(--focus-ring-width) * -1);
+}
+
+.segment:is(:disabled, [aria-disabled="true"]) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+.segment:has(> input:disabled) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* Forced colors drop the raised fill and its edge. The selected segment
+   takes the system highlight — a background, so the outline stays the focus
+   channel alone. forced-color-adjust: none is required, not cosmetic: the UA
+   otherwise paints a Canvas backplate behind the label, which hid the text on
+   the highlight. Opting out also stops the forcing of the rest, so the shadow
+   is dropped here and the focus line takes the highlight's text color. */
+@media (forced-colors: active) {
+  .segment:is([aria-selected="true"], [aria-current="page"], [aria-current="true"]) {
+    --focus: HighlightText;
+
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    box-shadow: none;
+  }
+
+  .segment:has(> input:checked) {
+    --focus: HighlightText;
+
+    forced-color-adjust: none;
+    background: Highlight;
+    color: HighlightText;
+    box-shadow: none;
+  }
+
+  /* --disabled-opacity is 1 here (tokens.css): the dimming needs a color. */
+  .segment:is(:disabled, [aria-disabled="true"]) {
+    color: GrayText;
+  }
+
+  .segment:has(> input:disabled) {
+    color: GrayText;
+  }
+}
+
 /*
  * Scrollspy — behavior hook for navigation that marks the active section
  * while the page scrolls.
@@ -8421,6 +8981,9 @@ a.avatar[aria-disabled="true"] {
 .list > :where(.list-item),
 .list > li > .list-item {
   display: flex;
+  /* A trailing control that no longer fits beside the content's longest word
+     moves to its own line instead of breaking that word. */
+  flex-wrap: wrap;
   /* 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. */
@@ -8467,17 +9030,29 @@ a.list-item:is([aria-current="page"], [aria-current="true"])::before {
   border-inline-start: 2px solid var(--state-selected);
 }
 
-/* The content region is the one that flexes, whichever position it holds. */
+/* The content region is the one that flexes, whichever position it holds.
+   Its automatic minimum is its longest word, which is what wraps the row; the
+   max size caps that minimum at the row, so a long token breaks rather than
+   widening the page. A zero minimum shrank it until words broke mid-way. */
 .list-item-content {
   flex: 1 1 0;
-  min-inline-size: 0;
+  max-inline-size: 100%;
 }
 
+/* break-word, not anywhere: anywhere also lowers the min-content to a single
+   character, and the row would never wrap. */
 .list-item-title,
 .list-item-text {
   display: block;
   margin: 0;
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
+}
+
+/* Truncated text gives up its width by design: without containment its
+   unbreakable line would become the content's minimum and push the trailing
+   region onto a line of its own. */
+.list-item-content .truncate {
+  contain: inline-size;
 }
 
 .list-item-text {