actual-css 0.13.0 → 0.14.1

package/docs/pages/foundations/tokens.md

@@ -151,34 +151,42 @@ Color should reinforce structure and meaning, not carry them alone. Information
 
 The default palette is **Ink & Terra**: a near-neutral aubergine `primary`, terracotta `secondary`, and pigment-toned statuses (sage, ochre, brick) tuned to equal perceived weight. The neutral ramp (text, borders, subtle surfaces) is tinted toward the primary hue so the whole page quietly carries the identity. Optional themes can re-introduce vivid intent palettes on top of this foundation.
 
-Soft surfaces (`.btn.soft`, `.badge.soft`, and the default `.alert`) are generated from intent colors through `color-mix()`. Themes can tune the mix globally instead of rewriting component selectors.
+Soft surfaces are generated from intent colors through `color-mix()`, in two
+recipes that share one ink:
+
+- **Tint** — the default `.badge` and `.alert`, and `.btn.soft`: a translucent
+  intent laid over whatever surface is underneath, with no rim. It keeps
+  separating on `--surface-subtle` and `--surface-raised`, where a fixed mix
+  with `--surface` would match the surface it sits on.
+- **Mix** — the shared `.soft` on zones (`.card`, `.chat-bubble`, `.navbar`,
+  `.app-nav`): an opaque mix of `--surface` with the intent and a tinted rim.
+  A zone may sit over an image, where a translucent fill would hand the text's
+  contrast to whatever is behind it.
+
+Themes tune both globally instead of rewriting component selectors:
 
 ```css
 :root {
-  --soft-bg-mix: 88%;
-  --soft-border-mix: 65%;
-  --soft-hover-alpha: 12%;
+  --soft-bg-mix: 88%;     /* share of surface; the tint's opacity is 100% minus it */
+  --soft-hover-alpha: 6%; /* extra intent share on hover */
   --soft-fg-mix: 100%;
 }
 ```
 
-`--soft-border-mix` is the same lever for the rim. The `65%` default keeps a
-visibly tinted border around every soft surface; pointing it at `--soft-bg-mix`
-resolves the rim to the fill, and soft treatments become a tint carrying text
-with no contour — the flatter language of a modern component set, from one
-declaration:
+`--soft-border-mix` has no default. Unset, the tint draws no rim and the mix
+keeps a 65% one. A theme that sets it gives every soft treatment a tinted rim
+of that weight — contoured badges and alerts, from one declaration:
 
 ```css
-[data-theme="flat"] {
-  --soft-border-mix: var(--soft-bg-mix);
+[data-theme="contoured"] {
+  --soft-border-mix: 65%;
 }
 ```
 
-It reaches the default `.badge` and `.alert` plus every explicit `.soft`
-(`.btn`, `.card`, `.chat`, `.navbar`, `.app-nav`), and nothing else: a component
-on its own surface keeps its `--border` rim. The dial is also
-rendering-only — the baseline path below `color-mix()` keeps `var(--border)`, so
-borderless soft is a look, not a contract the Degraded tier upholds.
+A rule that re-derives a soft color reads it with the recipe's own fallback:
+`var(--soft-border-mix, 100%)` for a tint, `var(--soft-border-mix, 65%)` for a
+mix. Both recipes are rendering-only — the baseline path below `color-mix()`
+keeps `var(--surface-subtle)` and `var(--border)`.
 
 `--soft-fg-mix` is the share of raw intent in soft *text*. At its `100%` default soft ink is the intent color itself, which is what a palette of dark, muted intents wants. A vivid or light palette cannot afford that: a soft badge then paints intent-tinted ink on an intent-tinted surface, and the two converge. Lowering the mix rebates the ink toward `--text`, which is the right direction in both schemes because `--text` is dark on a light theme and light on a dark one. Around `45%` a fully saturated palette recovers AA while the ink still reads as its intent.
 
@@ -193,17 +201,19 @@ hook, and the soft recipe reads it before falling back to the global mix:
 - `--soft-fg-mix` — the **global fallback derivation**, unchanged.
 
 **Soft foregrounds are calibrated against the darkest or closest interactive
-surface they are expected to appear on.** For interactive soft treatments the
-fill moves toward the intent on hover (`--soft-hover-alpha`), so the binding
-surface is the *hovered* one and the resting fill simply carries more margin;
-the default palette ships its own `--primary`/`--secondary`/… `-soft-fg` hooks
-to keep that pair ≥ 4.5:1 in both color schemes, enforced by
-`tests/browser/soft-recipe.test.js`. The hard line stops at the default theme:
+surface they are expected to appear on.** The tint is translucent, so the same
+pair reads differently on each surface — usually closest on `--surface-subtle`.
+For interactive soft treatments the fill moves toward the intent on hover
+(`--soft-hover-alpha`), so the binding pair is the *hovered* tint over
+`--surface-subtle` and the resting fill simply carries more margin; the default
+palette ships its own `--primary`/`--secondary`/… `-soft-fg` hooks to keep
+every pair ≥ 4.5:1 on `--surface`, `--surface-raised` and `--surface-subtle` in
+both color schemes, enforced by `tests/browser/soft-recipe.test.js`. The hard line stops at the default theme:
 presets and custom `[data-theme]` islands keep the `--soft-fg-mix` derivation
 unless they declare the hooks themselves (the framework resets them outside
 the default boundary). A theme that overrides the soft palette is responsible
 for preserving sufficient text contrast; `bunx --bun actual-css contrast --theme FILE`
-measures its resting and hovered pairs.
+measures its resting and hovered pairs, composited on each of those surfaces.
 
 A theme whose primary should read more muted than its statuses sets only
 `--primary-soft-fg`, and every soft `.primary` foreground follows it. Without a
@@ -599,12 +609,33 @@ A minimal recolor theme (illustrative, not a shipped theme):
 
 Several tokens are theme-derived aliases that reference other tokens — `--state-selected`/`--state-selected-fg`/`--state-disabled`, `--indicator-ring`, `--shadow`/`--shadow-popout`, `--heading`, `--selection-bg`/`--selection-fg`, and `--surface-opaque`/`--surface-solid-fg`. They are declared on `:root, [data-theme]` so they recompute on every theme boundary: a custom property resolves its `var()` references at computed-value time on the element that declares it, so an alias declared only on `:root` would be inherited as an already-resolved value and would not follow a `[data-theme]` island's overridden tokens. A theme that wants a distinct alias (e.g. a `--selection-bg` of its own) overrides it explicitly afterwards, which wins by cascade order.
 
+Selected state has three roles:
+
+- `--state-selected` — the selected fill or accent: a pressed button, a checked switch, a completed step.
+- `--state-selected-fg` — ink on that fill.
+- `--state-selected-text` — selected ink on a regular surface: the current nav link, the selected tab, the current step's number and ring.
+
+`--state-selected-text` has no default: the core resets it to the guaranteed-invalid value on every theme boundary, and each consumer reads `var(--state-selected-text, var(--state-selected))`. The reset is what lets a nested theme island reach its own `--state-selected`: a theme that resolves the hook to another token bakes the reference where it is declared, so an island that sets nothing would otherwise inherit the resolved value and never fall back. Set it when one color cannot be both a fill under its `-fg` and text on the page — typically a dark scheme, where a fill dark enough for white ink is too dark to read as text. Pulling the accent toward `--text` keeps its hue in both schemes:
+
+```css
+[data-theme="my-theme"] {
+  --state-selected-text: light-dark(
+    var(--primary),
+    color-mix(in oklab, var(--primary) 50%, var(--text))
+  );
+}
+```
+
+`actual-css contrast` measures it on each surface (4.5:1 for text, 3:1 for the step ring).
+
 Without `data-theme`, the default theme advertises `color-scheme: light dark` and follows the user's OS preference in browsers that support `light-dark()`. Dark themes should set `color-scheme: dark`. Light themes should set `color-scheme: light`. Browsers without `light-dark()` receive the light fallback.
 
 Because the native select chevron is an SVG background image and cannot inherit `currentColor`, the select hands the arrow back to the browser under `prefers-contrast: more` (same treatment as `forced-colors: active`) instead of shipping a recolored chevron per theme — one native fallback covers every theme without a high-contrast icon variant to maintain.
 
 Under `prefers-contrast: more`, the user's contrast preference wins over a theme's palette by contract: the core collapses `--text-muted`/`--text-subtle` to `--text` and thickens borders and focus so no theme can defeat a legibility requirement. This is a deliberate decision, not a specificity quirk — the repeated `[data-theme][data-theme]` attribute only outranks a preset theme stylesheet loaded after the core.
 
+Under `prefers-reduced-transparency: reduce`, `.topbar` and `.form-actions.sticky` paint `--surface` without a backdrop blur. A theme with translucent `--surface-*` redeclares them opaque inside the same media query; the glass demo theme shows the recipe.
+
 Under `forced-colors: active`, the browser automatically remaps `color`, `background`, and `border` properties to system colors. The core only adjusts what the remapping cannot express on its own — `--state-disabled` becomes `GrayText` and `--disabled-opacity` becomes `1` — declared on `:root` and `[data-theme]` so every theme boundary follows. Keep local forced-color rules only for custom control geometry, native bar parts, or selected/checked states that would otherwise be communicated only by background color.
 
 ## Component mapping

package/docs/pages/guides/design-tools.md

@@ -10,16 +10,22 @@ bunx --bun actual-css design --theme src/theme.css --out design/
 
 ## What is exported
 
-| File                                          | Content                              |
-| --------------------------------------------- | ------------------------------------ |
-| `figma/foundations.tokens.json`               | spacing, radius, borders, type sizes |
-| `figma/light.tokens.json`, `dark.tokens.json` | colors, one file per scheme          |
-| `penpot/tokens.json`                          | all tokens, as sets and themes       |
-| `penpot/plugin/`                              | the plugin and component spec        |
+| File                                          | Content                                |
+| --------------------------------------------- | -------------------------------------- |
+| `figma/foundations.tokens.json`               | spacing, radius, borders, type sizes   |
+| `figma/light.tokens.json`, `dark.tokens.json` | colors, one file per scheme            |
+| `dtcg/foundations.tokens.json`                | the portable profile, every foundation |
+| `dtcg/light.tokens.json`, `dark.tokens.json`  | colors, one file per scheme            |
+| `penpot/tokens.json`                          | all tokens, as sets and themes         |
+| `penpot/plugin/`                              | the plugin and component spec          |
 
 Token names are the CSS names without `--`: `surface-raised` in the design tool is `var(--surface-raised)` in code. A scheme exists when the theme declares it: `color-scheme: light dark` exports both, anything else one. Lengths are exported in px, with the CSS value kept in `$extensions["actual-css"]`.
 
-Colors no theme token paints — the soft fills and borders of `.soft` — are exported as recipe tokens named `<variant>-<intent>-<role>` (`soft-danger-bg`, `soft-danger-border`, `soft-danger-fg`), next to the theme colors so they switch with the scheme. Font stacks, line heights, shadows, motion and z-index have no design-tool equivalent and are not exported.
+Colors no theme token paints — the soft fills and borders of `.soft` — are exported as recipe tokens named `<variant>-<intent>-<role>` (`soft-danger-bg`, `soft-danger-border`, `soft-danger-fg`), next to the theme colors so they switch with the scheme.
+
+## DTCG
+
+`dtcg/` is the portable profile, for any reader that follows the [Design Tokens Format](https://www.designtokens.org/format/): every foundation carries the `$type` the spec defines (`dimension`, `fontWeight`, `fontFamily`, `duration`, `cubicBezier`, `number`), and each color carries a 6-digit `hex` with `alpha` separate. It keeps font stacks, line heights and motion, which `figma/` drops, and omits Figma's adaptations: a font weight is a `fontWeight` here, a `number` there. Shadows and z-index are not exported anywhere.
 
 ## Figma
 

package/docs/pages/guides/introduction.md

@@ -53,7 +53,7 @@ optimizing — the bare `actual-css` entrypoint and `actual-css/full` both resol
 to the complete compiled framework:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.13/dist/actual.full.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/actual-css@0.14/dist/actual.full.min.css">
 ```
 
 The package does not maintain separate partial bundles. Modular entrypoints map

package/docs/pages/layout/scroll-snap.md

@@ -40,8 +40,10 @@ Items snap to the inline start edge by default, with `proximity` snapping so a s
 
 - `--scroll-snap-item-size` — item `flex` basis; set it for card rails.
 - `--scroll-snap-gap` — space between items.
-- `--scroll-snap-padding` — inline scroll padding, so a snapped item does not sit
-  flush against the container edge. Not declared; falls back to `--scroll-snap-gap`.
+- `--scroll-snap-padding` — preferred inline scroll inset; defaults to
+  `--scroll-snap-gap`. Use a length (`0px` for zero); conforming values stay at
+  least large enough for the focus gutter, and the rail's edge items keep that
+  gutter even at rest.
 - `--scroll-snap-align` — item snap alignment. Prefer `data-snap-align="center"`
   over setting this directly.
 

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "actual-css",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
   "type": "module",
-  "packageManager": "bun@1.4.2",
+  "packageManager": "bun@1.4.3",
   "license": "MIT",
   "author": "Thomas <thomas@lekoala.be>",
   "repository": {
@@ -132,6 +132,7 @@
     "build:js": "bun scripts/build-js.js",
     "build:themes": "bun scripts/build-themes.js",
     "build:size": "bun scripts/build-size.js",
+    "build:pages": "bun scripts/pages.js",
     "export:design": "bun scripts/export-design.js",
     "check:enhance": "bun run scripts/check-enhance.js",
     "generate:reserved": "bun scripts/generate-reserved-classes.js",
@@ -157,9 +158,9 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.15",
-    "happy-dom": "^20.14.0"
+    "happy-dom": "^21.0.1"
   },
   "dependencies": {
-    "@lekoala/floating": "^0.2.0"
+    "@lekoala/floating": "^0.3.0"
   }
 }

package/reserved-classes.json

@@ -48,6 +48,7 @@
   "close",
   "cluster",
   "color",
+  "color-swatch",
   "column-gap-context",
   "column-layout",
   "compact",
@@ -198,6 +199,8 @@
   "scroller",
   "scrollspy",
   "secondary",
+  "segment",
+  "segmented",
   "select",
   "separated",
   "shadow-context",

package/src/cli/actual-css.js

@@ -22,9 +22,9 @@ function usage() {
     "stands for. Remote imports are kept and hoisted to the top of the bundle.",
     "Leaves modern CSS syntax untouched; this is a bundler, not a transpiler.",
     "",
-    "design: export a theme's tokens for Figma and Penpot, plus Button, Input, Badge,",
-    "Alert and Card measured in headless Chrome and a Penpot plugin that builds them.",
-    "Needs Bun (bunx --bun actual-css design ...).",
+    "design: export a theme's tokens for Figma, Penpot and a portable DTCG profile,",
+    "plus Button, Input, Badge, Alert and Card measured in headless Chrome and a",
+    "Penpot plugin that builds them. Needs Bun (bunx --bun actual-css design ...).",
     "",
     "contrast: measure the pairs a theme tunes by hand in headless Chrome, in every",
     "scheme it declares: soft ink on its resting and hovered fill, the focus line on",

package/src/css/components/alert.css

@@ -61,6 +61,16 @@
   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;
 }
@@ -85,28 +95,40 @@
 }
 
 /* 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. */
@@ -205,7 +227,10 @@
 
 /* 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;
@@ -219,6 +244,7 @@
   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));
 }
@@ -230,18 +256,17 @@
 
 @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)));
   }
 }
 
@@ -252,6 +277,32 @@
   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;
 }

package/src/css/components/app-nav.css

@@ -40,6 +40,7 @@
 }
 
 .app-nav > a {
+  position: relative;
   display: grid;
   grid-template-rows: auto auto;
   place-content: center;
@@ -80,18 +81,25 @@
 }
 
 /* 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;
 }

package/src/css/components/badge.css

@@ -111,28 +111,42 @@
 }
 
 /* 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));
@@ -171,8 +185,8 @@
   :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
     );
   }
 

package/src/css/components/button.css

@@ -133,12 +133,27 @@
   --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
     );
   }
 

package/src/css/components/close.css

@@ -93,10 +93,13 @@
 }
 
 @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;
   }
 }

package/src/css/components/index.css

@@ -40,6 +40,7 @@
 @import "./breadcrumb.css";
 @import "./pagination.css";
 @import "./tab.css";
+@import "./segmented.css";
 @import "./scrollspy.css";
 
 /* Data */

package/src/css/components/list.css

@@ -43,6 +43,9 @@
 .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. */
@@ -89,17 +92,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 {

package/src/css/components/navbar.css

@@ -7,6 +7,9 @@
  * 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)
  */
@@ -84,7 +87,7 @@
    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
@@ -105,7 +108,7 @@
 
   /* 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)));
   }
 }