@threadlabs/looma 0.41.2 → 0.42.0

package/vue/components.css

@@ -1172,12 +1172,15 @@ svg,.arc {
     --_ui-action-shadow:
       var(--_ui-action-edge),
       0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+    --_tone-border: var(--ui-accent-border, var(--ui-accent));
+    --_tone-hover-border: var(--ui-accent-hover-border, var(--ui-accent-hover));
+    --_tone-active-border: var(--ui-accent-active-border, var(--ui-accent-active));
     --_tone-highlight: var(--ui-accent-highlight, none);
     --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
     --_hue: var(--ui-accent);
     --_hue-hover: var(--ui-accent-hover);
     --_hue-active: var(--ui-accent-active);
-    --_hue-text: var(--ui-accent-active);
+    --_hue-text: var(--ui-accent-subtle-text);
     --_on-hue: var(--ui-on-accent);
 
     --_tone: var(--_hue);
@@ -1211,9 +1214,12 @@ svg,.arc {
     min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
     border-style: solid;
     border-width: var(--ui-border-width);
-    border-color: var(--ui-button-border, var(--_tone));
+    border-color: var(--ui-button-border, var(--_tone-text));
     border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-    background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+    background-color: var(
+      --ui-button-surface,
+      oklch(from var(--_tone) l c h / calc(5% * var(--ui-tonal-opacity, 1)))
+    );
     color: var(--ui-button-text, var(--_tone-text));
     font: inherit;
     font-weight: var(--ui-font-medium);
@@ -1335,8 +1341,11 @@ svg,.arc {
     align-self: center;
 }
 :scope:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
-    border-color: var(--ui-button-hover-border, var(--_tone-hover));
-    background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
+    border-color: var(--ui-button-hover-border, var(--_tone-text));
+    background-color: var(
+      --ui-button-hover-surface,
+      oklch(from var(--_tone) l c h / calc(12% * var(--ui-tonal-opacity, 1)))
+    );
 }
 :scope[data-appearance="card"][data-tone="neutral"]:where([data-hn-ui-button]) {
     border-color: var(--ui-button-border, var(--ui-border));
@@ -1351,12 +1360,15 @@ svg,.arc {
 }
 :scope:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     scale: var(--ui-press-scale, 1);
-    background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+    background-color: var(
+      --ui-button-active-surface,
+      oklch(from var(--_tone) l c h / calc(18% * var(--ui-tonal-opacity, 1)))
+    );
     background-image: none;
     box-shadow: var(--ui-pressed);
 }
 :scope[data-appearance="solid"]:where([data-hn-ui-button]),:scope[data-appearance="danger"]:where([data-hn-ui-button]) {
-    border-color: var(--_tone);
+    border-color: var(--ui-button-border, var(--_tone-border));
     background-color: var(--_tone);
     color: var(--_on-tone);
     background-image: var(--_tone-highlight);
@@ -1364,17 +1376,20 @@ svg,.arc {
       var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
       var(--_tone-glow);
 }
-:is(:scope[data-appearance="solid"], :scope[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:scope[data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]),:scope[data-appearance="danger"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     background-color: var(--_tone-hover);
-    border-color: var(--_tone-hover);
+    border-color: var(--ui-button-hover-border, var(--_tone-hover-border));
 }
 :is(:scope[data-appearance="solid"], :scope[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     background-color: var(--_tone-active);
-    border-color: var(--_tone-active);
+    border-color: var(--_tone-active-border);
     background-image: none;
     box-shadow: var(--ui-pressed);
 }
 :scope[data-tone="neutral"]:where([data-hn-ui-button]) {
+    --_tone-border: var(--ui-neutral-border, var(--ui-neutral-surface));
+    --_tone-hover-border: var(--ui-neutral-hover-border, var(--ui-neutral-hover));
+    --_tone-active-border: var(--ui-neutral-active-border, var(--ui-neutral-active));
     --_tone-highlight: var(--ui-neutral-highlight, none);
     --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
     --_hue: var(--ui-text);
@@ -1384,7 +1399,7 @@ svg,.arc {
     --_on-hue: var(--ui-surface);
 }
 :scope[data-tone="neutral"][data-appearance="solid"]:where([data-hn-ui-button]) {
-    border-color: var(--ui-button-border, var(--ui-control-border));
+    border-color: var(--ui-button-border, var(--_tone-border));
     background-color: var(--ui-button-surface, var(--ui-neutral-surface));
     color: var(--ui-button-text, var(--ui-text));
 }
@@ -1407,12 +1422,17 @@ svg,.arc {
     background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
 }
 :scope[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+    border-color: var(--ui-button-hover-border, var(--_tone-hover-border));
     background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
 }
 :scope[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+    border-color: var(--_tone-active-border);
     background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
 }
 :scope[data-tone="danger"]:where([data-hn-ui-button]),:scope[data-appearance="danger"]:where([data-hn-ui-button]) {
+    --_tone-border: var(--ui-danger-border, var(--ui-danger));
+    --_tone-hover-border: var(--ui-danger-hover-border, var(--ui-danger-hover));
+    --_tone-active-border: var(--ui-danger-active-border, var(--ui-danger-active));
     --_tone-highlight: var(--ui-danger-highlight, none);
     --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
     --_hue: var(--ui-danger);
@@ -1422,6 +1442,9 @@ svg,.arc {
     --_on-hue: var(--ui-on-danger);
 }
 :scope[data-tone="success"]:where([data-hn-ui-button]) {
+    --_tone-border: var(--ui-success-border, var(--ui-success));
+    --_tone-hover-border: var(--ui-success-hover-border, var(--ui-success-hover));
+    --_tone-active-border: var(--ui-success-active-border, var(--ui-success-active));
     --_tone-highlight: var(--ui-success-highlight, none);
     --_tone-glow: var(--ui-success-glow, 0 0 transparent);
     --_hue: var(--ui-success);
@@ -1431,6 +1454,9 @@ svg,.arc {
     --_on-hue: var(--ui-success-on-strong);
 }
 :scope[data-tone="warning"]:where([data-hn-ui-button]) {
+    --_tone-border: var(--ui-warning-border, var(--ui-warning));
+    --_tone-hover-border: var(--ui-warning-hover-border, var(--ui-warning-hover));
+    --_tone-active-border: var(--ui-warning-active-border, var(--ui-warning-active));
     --_tone-highlight: var(--ui-warning-highlight, none);
     --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
     --_hue: var(--ui-warning);
@@ -1440,6 +1466,9 @@ svg,.arc {
     --_on-hue: var(--ui-warning-on-strong);
 }
 :scope[data-tone="info"]:where([data-hn-ui-button]) {
+    --_tone-border: var(--ui-info-border, var(--ui-info));
+    --_tone-hover-border: var(--ui-info-hover-border, var(--ui-info-hover));
+    --_tone-active-border: var(--ui-info-active-border, var(--ui-info-active));
     --_tone-highlight: var(--ui-info-highlight, none);
     --_tone-glow: var(--ui-info-glow, 0 0 transparent);
     --_hue: var(--ui-info);
@@ -1486,7 +1515,10 @@ svg,.arc {
     color: var(--ui-button-ghost-text, var(--_tone-text));
 }
 :scope[data-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
-    background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
+    background-color: var(
+      --ui-button-ghost-hover-surface,
+      oklch(from var(--_tone) l c h / calc(10% * var(--ui-tonal-opacity, 1)))
+    );
     border-color: transparent;
 }
 :scope[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
@@ -1758,7 +1790,7 @@ html[data-ui-input-modality="touch"]
     --_callout-icon: var(--ui-danger-solid);
 }
 .content :where(:not([data-hn-ui-callout])):is(a) {
-    color: var(--ui-accent-active);
+    color: var(--ui-accent-subtle-text);
     text-decoration: underline;
     text-decoration-thickness: 0.06em;
     text-underline-offset: 0.18em;
@@ -1813,13 +1845,9 @@ html[data-ui-input-modality="touch"]
     box-shadow: var(--ui-shadow-lg);
 }
 :scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card]) {
-    --_ui-panel-glass: calc(
-      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
-    );
+    --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-    --_ui-panel-rim: calc(
-      (var(--_ui-panel-separation) + var(--_ui-panel-glass) * 0.25) * 0.65 * 8px
-    );
+    --_ui-panel-rim: calc(var(--_ui-panel-separation) * 8px);
     border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
     border-color: transparent;
     background:
@@ -1834,10 +1862,8 @@ html[data-ui-input-modality="touch"]
       var(--_ui-card-elevation),
       var(--ui-material-glow, 0 0 transparent),
       inset 0 0 0 var(--ui-border-width) var(--ui-material-edge, var(--ui-border-strong));
-    backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
-      saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
-    -webkit-backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
-      saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+    -webkit-backdrop-filter: blur(calc(var(--_ui-panel-glass) * 32px));
+    backdrop-filter: blur(calc(var(--_ui-panel-glass) * 32px));
 }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 :scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card]) {
@@ -1849,8 +1875,8 @@ html[data-ui-input-modality="touch"]
       background: var(--_ui-card-surface);
       border-width: var(--ui-border-width);
       border-color: var(--ui-border-strong);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 @media (forced-colors: active) {
@@ -1859,8 +1885,8 @@ html[data-ui-input-modality="touch"]
       color: CanvasText;
       border: var(--ui-border-width) solid CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 :scope[data-ui-card-state~="tone=accent"]:where([data-hn-ui-card]) {
@@ -1932,7 +1958,7 @@ html[data-ui-input-modality="touch"]
 
 /* The SVG's painted bounds are centred in its viewBox, including its round stroke.
    Centre that box directly; rotated border boxes do not centre the visible check. */
-@keyframes ui-checkbox-check-570a9f0b {
+@keyframes ui-checkbox-check-36f1c10d {
 from {
     opacity: 0;
     scale: 0.55;
@@ -2040,7 +2066,7 @@ input:checked:where([data-hn-ui-checkbox]),input:indeterminate:where([data-hn-ui
     border-color: var(--ui-accent-solid);
     background-color: var(--ui-accent-solid);
     background-image: var(--ui-accent-highlight, none);
-    box-shadow: var(--ui-control-inset);
+    box-shadow: none;
 }
 input:checked:where([data-hn-ui-checkbox])::after {
     inset: 50% auto auto 50% !important;
@@ -2051,7 +2077,7 @@ input:checked:where([data-hn-ui-checkbox])::after {
       center / contain no-repeat;
     opacity: 1;
     translate: -50% -50% !important;
-    animation: ui-checkbox-check-570a9f0b var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+    animation: ui-checkbox-check-36f1c10d var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 input:indeterminate:where([data-hn-ui-checkbox])::after {
     mask: none;
@@ -2594,7 +2620,7 @@ input[type="range"] {
 /* The label and the shortcut sit side by side, a gap apart, with the label wrapping on its own. */
 
 /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-   transparency, saturation and edge light belong to the surrounding decorative material. */
+   transparency, frosting and edge light belong to the surrounding decorative material. */
 
 /* A keyboard shortcut follows the label after a thin divider, smaller and quieter, as menus show
    it. The label stays first in the description, so a screen reader hears the name, then the keys. */
@@ -2659,21 +2685,11 @@ input[type="range"] {
     );
 }
 .surface:where([data-hn-ui-tooltip]) {
-    --_ui-material-glassiness: calc(
-      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
-    );
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-    --_ui-material-active: clamp(
-      0,
-      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
-      1
-    );
+    --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
     --_ui-material-rim: calc(
-      (
-        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
-      ) *
-        var(--_ui-material-scale, 0.08) *
-        8px
+      var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px
     );
     --_ui-material-content-color: var(
       --_ui-tooltip-surface,
@@ -2714,12 +2730,12 @@ input[type="range"] {
         var(--ui-elevation-tooltip, var(--ui-shadow-md))
       )
     );
-    backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
     -webkit-backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 32px)
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 32px)
+    );
 }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 .surface:where([data-hn-ui-tooltip]) {
@@ -2729,8 +2745,8 @@ input[type="range"] {
 @media (prefers-reduced-transparency: reduce) {
 .surface:where([data-hn-ui-tooltip]) {
       background: var(--_ui-material-content-color);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 @media (forced-colors: active) {
@@ -2738,8 +2754,8 @@ input[type="range"] {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 .shortcut:where([data-hn-ui-tooltip]) {
@@ -3904,6 +3920,10 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     /* Optional inherited action-group values keep text and icon actions under the same light.
        One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
        The shared theme supplies reflections and glow independently of the resting lift. */
+    --_solid-border: var(--ui-accent-border, var(--ui-accent-solid));
+    --_solid-hover-border: var(--ui-accent-hover-border, var(--ui-accent-hover));
+    --_solid-active-border: var(--ui-accent-active-border, var(--ui-accent-active));
+    --_solid-active-surface: var(--ui-accent-active, var(--ui-accent-hover));
     --_tone-highlight: var(--ui-accent-highlight, none);
     --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
     --_ui-action-start: 1px;
@@ -3932,10 +3952,14 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     --_ui-action-start: -1px;
 }
 :scope[data-tone="accent"]:where([data-hn-ui-icon-button]) {
+    --_solid-border: var(--ui-accent-border, var(--ui-accent));
+    --_solid-hover-border: var(--ui-accent-hover-border, var(--ui-accent-hover));
+    --_solid-active-border: var(--ui-accent-active-border, var(--ui-accent-active));
+    --_solid-active-surface: var(--ui-accent-active, var(--ui-accent-hover));
     --_tone-highlight: var(--ui-accent-highlight, none);
     --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
-    --_icon-button-border: var(--ui-accent-solid);
-    --_icon-button-hover-border: var(--ui-accent-hover);
+    --_icon-button-border: var(--ui-accent-subtle-text);
+    --_icon-button-hover-border: var(--ui-accent-subtle-text);
     --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
     --_icon-button-outline-surface: color-mix(
       in srgb,
@@ -3945,10 +3969,14 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     color: var(--_icon-button-text);
 }
 :scope[data-tone="danger"]:where([data-hn-ui-icon-button]) {
+    --_solid-border: var(--ui-danger-border, var(--ui-danger));
+    --_solid-hover-border: var(--ui-danger-hover-border, var(--ui-danger-hover));
+    --_solid-active-border: var(--ui-danger-active-border, var(--ui-danger-active));
+    --_solid-active-surface: var(--ui-danger-active, var(--ui-danger-hover));
     --_tone-highlight: var(--ui-danger-highlight, none);
     --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
-    --_icon-button-border: var(--ui-danger);
-    --_icon-button-hover-border: var(--ui-danger-hover);
+    --_icon-button-border: var(--ui-danger-subtle-text);
+    --_icon-button-hover-border: var(--ui-danger-subtle-text);
     --_icon-button-text: var(--ui-danger-subtle-text);
     --_icon-button-outline-surface: color-mix(
       in srgb,
@@ -3961,10 +3989,14 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     color: var(--_icon-button-text);
 }
 :scope[data-tone="success"]:where([data-hn-ui-icon-button]) {
+    --_solid-border: var(--ui-success-border, var(--ui-success));
+    --_solid-hover-border: var(--ui-success-hover-border, var(--ui-success-hover));
+    --_solid-active-border: var(--ui-success-active-border, var(--ui-success-active));
+    --_solid-active-surface: var(--ui-success-active, var(--ui-success-hover));
     --_tone-highlight: var(--ui-success-highlight, none);
     --_tone-glow: var(--ui-success-glow, 0 0 transparent);
-    --_icon-button-border: var(--ui-success);
-    --_icon-button-hover-border: var(--ui-success-hover);
+    --_icon-button-border: var(--ui-success-subtle-text);
+    --_icon-button-hover-border: var(--ui-success-subtle-text);
     --_icon-button-text: var(--ui-success-subtle-text);
     --_icon-button-outline-surface: color-mix(
       in srgb,
@@ -3977,10 +4009,14 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     color: var(--_icon-button-text);
 }
 :scope[data-tone="warning"]:where([data-hn-ui-icon-button]) {
+    --_solid-border: var(--ui-warning-border, var(--ui-warning));
+    --_solid-hover-border: var(--ui-warning-hover-border, var(--ui-warning-hover));
+    --_solid-active-border: var(--ui-warning-active-border, var(--ui-warning-active));
+    --_solid-active-surface: var(--ui-warning-active, var(--ui-warning-hover));
     --_tone-highlight: var(--ui-warning-highlight, none);
     --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
-    --_icon-button-border: var(--ui-warning);
-    --_icon-button-hover-border: var(--ui-warning-hover);
+    --_icon-button-border: var(--ui-warning-subtle-text);
+    --_icon-button-hover-border: var(--ui-warning-subtle-text);
     --_icon-button-text: var(--ui-warning-subtle-text);
     --_icon-button-outline-surface: color-mix(
       in srgb,
@@ -3993,10 +4029,14 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     color: var(--_icon-button-text);
 }
 :scope[data-tone="info"]:where([data-hn-ui-icon-button]) {
+    --_solid-border: var(--ui-info-border, var(--ui-info));
+    --_solid-hover-border: var(--ui-info-hover-border, var(--ui-info-hover));
+    --_solid-active-border: var(--ui-info-active-border, var(--ui-info-active));
+    --_solid-active-surface: var(--ui-info-active, var(--ui-info-hover));
     --_tone-highlight: var(--ui-info-highlight, none);
     --_tone-glow: var(--ui-info-glow, 0 0 transparent);
-    --_icon-button-border: var(--ui-info);
-    --_icon-button-hover-border: var(--ui-info-hover);
+    --_icon-button-border: var(--ui-info-subtle-text);
+    --_icon-button-hover-border: var(--ui-info-subtle-text);
     --_icon-button-text: var(--ui-info-subtle-text);
     --_icon-button-outline-surface: color-mix(
       in srgb,
@@ -4009,6 +4049,10 @@ input:disabled:where(:scope, :scope *):where([data-hn-ui-combobox]),button:disab
     color: var(--_icon-button-text);
 }
 :scope[data-tone="neutral"]:where([data-hn-ui-icon-button]) {
+    --_solid-border: var(--ui-neutral-border, var(--ui-neutral-surface));
+    --_solid-hover-border: var(--ui-neutral-hover-border, var(--ui-neutral-hover));
+    --_solid-active-border: var(--ui-neutral-active-border, var(--ui-neutral-active));
+    --_solid-active-surface: var(--ui-neutral-active, var(--ui-neutral-hover));
     --_tone-highlight: var(--ui-neutral-highlight, none);
     --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
     --_icon-button-outline-surface: transparent;
@@ -4167,6 +4211,7 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
       var(--_tone-glow);
 }
 :scope[data-appearance="solid"]:where([data-hn-ui-icon-button]) {
+    border-color: var(--ui-icon-button-border, var(--_solid-border));
     background-color: var(
       --ui-icon-button-solid-surface,
       var(--_icon-button-solid-surface, var(--ui-accent-solid))
@@ -4201,6 +4246,7 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
     background-color: var(--ui-icon-button-active-surface, var(--ui-neutral-active));
 }
 :scope[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    border-color: var(--ui-icon-button-hover-border, var(--_solid-hover-border));
     background-color: var(
       --ui-icon-button-solid-hover-surface,
       var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
@@ -4263,6 +4309,10 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
       var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
       var(--ui-focus-halo);
 }
+:scope[data-appearance="solid"]:active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    background-color: var(--ui-icon-button-active-surface, var(--_solid-active-surface));
+    border-color: var(--_solid-active-border);
+}
 :scope:is(:scope[data-appearance="outline"], :scope[data-appearance="solid"]):active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
     background-image: none;
     box-shadow: var(--ui-pressed);
@@ -4686,20 +4736,20 @@ dd:where([data-hn-ui-description-item]) {
 }
 
 /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-   transparency, saturation and edge light belong to the surrounding decorative material. */
+   transparency, frosting and edge light belong to the surrounding decorative material. */
 
 /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
 /* Alerts have no close target to add height above the title. */
 
 /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-@keyframes ui-dialog-enter-45428506 {
+@keyframes ui-dialog-enter-d8d3c50b {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-45428506 {
+@keyframes ui-dialog-backdrop-enter-d8d3c50b {
 from {
     background-color: transparent;
 }
@@ -4743,22 +4793,10 @@ from {
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
 :scope:where([data-hn-ui-dialog]) {
-    --_ui-material-glassiness: calc(
-      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
-    );
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-    --_ui-material-active: clamp(
-      0,
-      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
-      1
-    );
-    --_ui-material-rim: calc(
-      (
-        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
-      ) *
-        var(--_ui-material-scale, 1) *
-        8px
-    );
+    --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
+    --_ui-material-rim: calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px);
     --_ui-material-content-color: var(
       --ui-dialog-surface,
       var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
@@ -4800,12 +4838,12 @@ from {
         var(--ui-elevation-dialog, var(--ui-shadow-xl))
       )
     );
-    backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
     -webkit-backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 32px)
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 32px)
+    );
 }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 :scope:where([data-hn-ui-dialog]) {
@@ -4815,8 +4853,8 @@ from {
 @media (prefers-reduced-transparency: reduce) {
 :scope:where([data-hn-ui-dialog]) {
       background: var(--_ui-material-content-color);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 @media (forced-colors: active) {
@@ -4824,8 +4862,8 @@ from {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 :scope[open]:where([data-hn-ui-dialog]) {
@@ -4834,7 +4872,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-45428506 var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-d8d3c50b var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -4914,7 +4952,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 :scope[open]:modal:where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-45428506 var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-d8d3c50b var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {
@@ -4962,22 +5000,10 @@ footer:empty:where([data-hn-ui-dialog]) {
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
 :where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
-    --_ui-material-glassiness: calc(
-      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
-    );
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-    --_ui-material-active: clamp(
-      0,
-      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
-      1
-    );
-    --_ui-material-rim: calc(
-      (
-        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
-      ) *
-        var(--_ui-material-scale, 1) *
-        8px
-    );
+    --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
+    --_ui-material-rim: calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px);
     --_ui-material-content-color: var(
       --ui-dialog-surface,
       var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
@@ -5019,12 +5045,12 @@ footer:empty:where([data-hn-ui-dialog]) {
         var(--ui-elevation-dialog, var(--ui-shadow-xl))
       )
     );
-    backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
     -webkit-backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 32px)
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 32px)
+    );
 }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 :where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
@@ -5034,8 +5060,8 @@ footer:empty:where([data-hn-ui-dialog]) {
 @media (prefers-reduced-transparency: reduce) {
 :where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
       background: var(--_ui-material-content-color);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 @media (forced-colors: active) {
@@ -5043,8 +5069,8 @@ footer:empty:where([data-hn-ui-dialog]) {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 :where(.ui-dialog)[open]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
@@ -5053,7 +5079,7 @@ footer:empty:where([data-hn-ui-dialog]) {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-45428506 var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-d8d3c50b var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :where(.ui-dialog)[data-ui-dialog-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
@@ -5136,7 +5162,7 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
 }
 :where(.ui-dialog)[open]:modal:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-45428506 var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-d8d3c50b var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :where(.ui-dialog)[open][data-ui-backdrop-hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
@@ -5487,7 +5513,7 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
 /* Small follows its trigger down: an item's own hooks still win. */
 
 /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-   transparency, saturation and edge light belong to the surrounding decorative material. */
+   transparency, frosting and edge light belong to the surrounding decorative material. */
 @scope (.ui-menu) to ([data-hn]) {
 :scope[data-ui-menu-state~="density=compact"]:where([data-hn-ui-menu]) {
     --_ui-default-menu-item-padding-block: var(--ui-space-1);
@@ -5557,21 +5583,11 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
     overflow: auto;
 }
 :scope:not([inline]) .surface:where([data-hn-ui-menu]) {
-    --_ui-material-glassiness: calc(
-      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
-    );
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-    --_ui-material-active: clamp(
-      0,
-      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
-      1
-    );
+    --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
     --_ui-material-rim: calc(
-      (
-        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
-      ) *
-        var(--_ui-material-scale, 0.28) *
-        8px
+      var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px
     );
     --_ui-material-content-color: var(
       --_ui-menu-surface,
@@ -5614,12 +5630,12 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
         var(--ui-elevation-overlay, var(--ui-shadow-lg))
       )
     );
-    backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 0.18));
     -webkit-backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 0.18));
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 32px)
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 32px)
+    );
 }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 :scope:not([inline]) .surface:where([data-hn-ui-menu]) {
@@ -5629,8 +5645,8 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
 @media (prefers-reduced-transparency: reduce) {
 :scope:not([inline]) .surface:where([data-hn-ui-menu]) {
       background: var(--_ui-material-content-color);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 @media (forced-colors: active) {
@@ -5638,8 +5654,8 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 .surface hr:where([data-hn-ui-menu]) {
@@ -5771,7 +5787,7 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
     block-size: 100%;
 }
 :scope[data-ui-menu-item-state~="tone=danger"]:where([data-hn-ui-menu-item]) {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
 }
 .label:where([data-hn-ui-menu-item]) {
     display: flex !important;
@@ -6741,7 +6757,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
 }
 
 /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-   transparency, saturation and edge light belong to the surrounding decorative material. */
+   transparency, frosting and edge light belong to the surrounding decorative material. */
 
 /* A toolbar or card can supply its own surface, including an unclipped shadow. */
 @scope (.ui-popover) to ([data-hn]) {
@@ -6782,21 +6798,11 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     );
 }
 .surface:where([data-hn-ui-popover]) {
-    --_ui-material-glassiness: calc(
-      clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4)
-    );
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
     --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-    --_ui-material-active: clamp(
-      0,
-      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
-      1
-    );
+    --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
     --_ui-material-rim: calc(
-      (
-        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
-      ) *
-        var(--_ui-material-scale, 0.55) *
-        8px
+      var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px
     );
     --_ui-material-content-color: var(
       --_ui-popover-surface,
@@ -6839,12 +6845,12 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
         var(--ui-elevation-overlay, var(--ui-shadow-lg))
       )
     );
-    backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
     -webkit-backdrop-filter: blur(
-      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px)
-    ) saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 32px)
+    );
+    backdrop-filter: blur(
+      calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 32px)
+    );
 }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
 .surface:where([data-hn-ui-popover]) {
@@ -6854,8 +6860,8 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
 @media (prefers-reduced-transparency: reduce) {
 .surface:where([data-hn-ui-popover]) {
       background: var(--_ui-material-content-color);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 @media (forced-colors: active) {
@@ -6863,8 +6869,8 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
 }
 }
 :scope[data-ui-popover-state~="bare"] .surface:where([data-hn-ui-popover]) {
@@ -6873,8 +6879,8 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     border: 0;
     background: transparent;
     box-shadow: none;
-    backdrop-filter: none;
     -webkit-backdrop-filter: none;
+    backdrop-filter: none;
 }
 :scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover]) {
     display: none !important;
@@ -6982,7 +6988,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     color: var(--ui-text-muted);
 }
 :scope[data-ui-text-state~="tone=accent"]:where([data-hn-ui-text]) {
-    color: var(--ui-accent-active);
+    color: var(--ui-accent-subtle-text);
 }
 :scope[data-ui-text-state~="tone=danger"]:where([data-hn-ui-text]) {
     color: var(--ui-danger-subtle-text);
@@ -7036,7 +7042,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     font-family: var(--ui-font-family-mono);
 }
 :scope :where(:not([data-hn-ui-text])):is(a) {
-    color: var(--ui-accent-active);
+    color: var(--ui-accent-subtle-text);
     text-decoration: underline;
     text-decoration-thickness: 0.06em;
     text-underline-offset: 0.18em;
@@ -7380,7 +7386,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     width: 32px;
     height: 32px;
     flex: 0 0 auto;
-    color: var(--ui-accent-active, var(--ui-accent-solid));
+    color: var(--ui-accent-subtle-text);
     background: var(--ui-accent-soft, var(--ui-accent-subtle));
     border-radius: var(--ui-radius-round);
     font-size: var(--ui-font-size-xs);
@@ -7457,7 +7463,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     inline-size: 32px;
     block-size: 32px;
     flex: 0 0 auto;
-    color: var(--ui-accent-active);
+    color: var(--ui-accent-subtle-text);
     background: var(--ui-accent-soft);
     border-radius: var(--ui-radius-round);
     font-size: var(--ui-font-size-xs);
@@ -7809,7 +7815,7 @@ ul:where([data-hn-ui-editor-slash-menu-group]) {
     background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
 }
 :scope button.danger {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
 }
 .swatches {
     display: flex !important;
@@ -8223,7 +8229,7 @@ ul:where([data-hn-ui-editor-slash-menu-group]) {
 }
 :scope button.active {
     background: var(--ui-accent-soft, var(--ui-accent-subtle));
-    color: var(--ui-accent-active);
+    color: var(--ui-accent-subtle-text);
 }
 .group button {
     border-radius: var(--ui-radius-sm);
@@ -8236,7 +8242,7 @@ ul:where([data-hn-ui-editor-slash-menu-group]) {
     border-radius: var(--ui-radius-sm);
 }
 :scope button.danger {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
 }
 :scope {
     --_ui-default-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
@@ -8681,7 +8687,7 @@ path:where([data-hn-ui-light-editor]) {
     position: relative;
     z-index: 1;
     display: inline-flex !important;
-    color: var(--ui-accent);
+    color: var(--ui-accent-subtle-text);
     font-size: var(--ui-font-size-lg);
 }
 .source:where([data-hn-ui-light-editor])::after {
@@ -8794,7 +8800,7 @@ path:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
     position: relative;
     z-index: 1;
     display: inline-flex !important;
-    color: var(--ui-accent);
+    color: var(--ui-accent-subtle-text);
     font-size: var(--ui-font-size-lg);
 }
 .source:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope
@@ -9685,6 +9691,9 @@ path:where(:scope, :scope *):where([data-hn-ui-light-editor]) {
 
 /* The label, and under it an optional line saying what the choice means. */
 
+/* The native radio retains grouping, validation and keyboard behavior.
+   Its empty well recedes; the filled selection and its dot stay crisp. */
+
 /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
    and the first line centres in that control height, so the label shares a row's baseline.
    Multi-line labels and descriptions still grow downward from that first line. */
@@ -9738,9 +9747,34 @@ input:where([data-hn-ui-radio]) {
     inline-size: var(--_ui-radio-size, 1.125rem);
     block-size: var(--_ui-radio-size, 1.125rem);
     margin: max(0px, calc((1lh - var(--_ui-radio-size, 1.125rem)) / 2)) 0 0 !important;
-    accent-color: var(--ui-accent-solid);
+    -webkit-appearance: none;
+    appearance: none;
+    position: relative;
+    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+    border-radius: var(--ui-radius-round);
+    background-color: var(--ui-control-surface, var(--ui-surface-default));
+    background-image: var(--ui-surface-highlight, none);
+    box-shadow: var(--ui-control-inset);
     cursor: pointer;
 }
+input:where([data-hn-ui-radio])::after {
+    content: "";
+    position: absolute;
+    inset: 28%;
+    border-radius: var(--ui-radius-round);
+    background-color: var(--ui-text-on-accent);
+    opacity: 0;
+    transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
+}
+input:checked:where([data-hn-ui-radio]) {
+    background-color: var(--ui-accent-solid);
+    background-image: var(--ui-accent-highlight, none);
+    border-color: var(--ui-accent-solid);
+    box-shadow: none;
+}
+input:checked:where([data-hn-ui-radio])::after {
+    opacity: 1;
+}
 input:focus-visible:where([data-hn-ui-radio]) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
     outline-offset: var(--ui-focus-width);
@@ -9753,8 +9787,31 @@ input:focus-visible:where([data-hn-ui-radio]) {
     color: var(--ui-disabled-text);
 }
 :scope[data-ui-radio-state~="disabled"] input:where([data-hn-ui-radio]) {
+    border-color: var(--ui-disabled-border);
+    background-color: var(--ui-disabled-surface);
+    background-image: none;
+    box-shadow: none;
     cursor: not-allowed;
 }
+:scope[data-ui-radio-state~="disabled"] input:where([data-hn-ui-radio])::after {
+    background-color: var(--ui-disabled-text);
+}
+@media (prefers-reduced-motion: reduce) {
+input:where([data-hn-ui-radio])::after {
+      transition: none;
+}
+}
+@media (forced-colors: active) {
+input:where([data-hn-ui-radio]) {
+      -webkit-appearance: auto;
+      appearance: auto;
+      background: none;
+      box-shadow: none;
+}
+input:where([data-hn-ui-radio])::after {
+      display: none !important;
+}
+}
 :scope[data-ui-radio-state~="size=sm"]:where([data-hn-ui-radio]) {
     --_font: var(--ui-font-size-sm);
     --_row: var(--ui-control-size-sm);
@@ -10130,7 +10187,7 @@ dialog:where([data-hn-ui-search-shell]) {
     line-height: var(--ui-line-height-tight);
 }
 :scope[data-ui-section-state~="tone=danger"] .heading:where([data-hn-ui-section]) {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
 }
 .description:where([data-hn-ui-section]) {
     color: var(--ui-text-secondary);
@@ -10906,7 +10963,7 @@ input {
     line-height: var(--ui-line-height);
 }
 :scope[data-ui-status-message-state~="kind=error"]:where([data-hn-ui-status-message]) {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
 }
 :scope[data-ui-status-message-state~="layout=panel"]:where([data-hn-ui-status-message]) {
     padding: var(--ui-space-6) !important;
@@ -11044,7 +11101,8 @@ input:where([data-hn-ui-switch])::after {
     width: var(--_thumb);
     height: var(--_thumb);
     border-radius: var(--ui-radius-round);
-    background: var(--ui-text-secondary);
+    background-color: var(--ui-text-secondary);
+    background-image: var(--ui-knob-highlight, none);
     box-shadow: var(--ui-shadow-xs);
     transition:
       transform var(--ui-motion-base) var(--ui-motion-ease),
@@ -11057,7 +11115,8 @@ input:checked:where([data-hn-ui-switch]) {
 }
 input:checked:where([data-hn-ui-switch])::after {
     transform: translateX(calc(var(--_ui-switch-track-width) - var(--_ui-switch-track-height)));
-    background: var(--ui-text-on-accent);
+    background-color: var(--ui-text-on-accent);
+    background-image: var(--ui-knob-on-accent-highlight, none);
 }
 input:focus-visible:where([data-hn-ui-switch]) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
@@ -11079,6 +11138,7 @@ input:focus-visible:where([data-hn-ui-switch]) {
 }
 :scope[data-ui-switch-state~="disabled"] input:where([data-hn-ui-switch])::after {
     background-color: var(--ui-disabled-text);
+    background-image: none;
     box-shadow: none;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -11392,8 +11452,8 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
     background: var(--ui-surface-muted);
 }
 .list button[aria-selected="true"]:where([data-hn-ui-tabs]),.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"][aria-selected="true"]) {
-    color: var(--ui-accent-solid);
-    border-block-end-color: var(--ui-accent-solid);
+    color: var(--ui-accent-subtle-text);
+    border-block-end-color: var(--ui-accent-subtle-text);
 }
 .list button:focus-visible:where([data-hn-ui-tabs]),.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"]:focus-visible) {
     position: relative;
@@ -11431,7 +11491,7 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
     button[aria-selected="true"]:where([data-hn-ui-tabs]),:scope[data-ui-tabs-state~="orientation=vertical"]
     .list
     > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"][aria-selected="true"]) {
-    border-inline-end-color: var(--ui-accent-solid);
+    border-inline-end-color: var(--ui-accent-subtle-text);
 }
 @media (prefers-reduced-motion: reduce) {
 .list button:where([data-hn-ui-tabs]),.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"]) {
@@ -13593,7 +13653,6 @@ html[data-ui-input-modality="touch"]
   border: var(--ui-accent-line-width) dashed var(--ui-accent-solid);
   border-radius: var(--ui-radius-md);
   background: color-mix(in srgb, var(--ui-accent-soft) 92%, transparent);
-  color: var(--ui-accent-active);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-semibold);
   pointer-events: none;
@@ -13961,12 +14020,15 @@ html[data-ui-input-modality="touch"]
         inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
       );
       --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+      --_tone-border: var(--ui-accent-border, var(--ui-accent));
+      --_tone-hover-border: var(--ui-accent-hover-border, var(--ui-accent-hover));
+      --_tone-active-border: var(--ui-accent-active-border, var(--ui-accent-active));
       --_tone-highlight: var(--ui-accent-highlight, none);
       --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
       --_hue: var(--ui-accent);
       --_hue-hover: var(--ui-accent-hover);
       --_hue-active: var(--ui-accent-active);
-      --_hue-text: var(--ui-accent-active);
+      --_hue-text: var(--ui-accent-subtle-text);
       --_on-hue: var(--ui-on-accent);
 
       --_tone: var(--_hue);
@@ -14004,9 +14066,9 @@ html[data-ui-input-modality="touch"]
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border-style: solid;
       border-width: var(--ui-border-width);
-      border-color: var(--ui-button-border, var(--_tone));
+      border-color: var(--ui-button-border, var(--_tone-text));
       border-radius: var(--ui-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-      background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / 5%));
+      background-color: var(--ui-button-surface, oklch(from var(--_tone) l c h / calc(5% * var(--ui-tonal-opacity, 1))));
       color: var(--ui-button-text, var(--_tone-text));
       font: inherit;
       font-weight: var(--ui-font-medium);
@@ -14149,8 +14211,8 @@ html[data-ui-input-modality="touch"]
     /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
        is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
     :scope:where([data-component~="ui-button"]):hover:not(:disabled, [aria-disabled="true"]) {
-      border-color: var(--ui-button-hover-border, var(--_tone-hover));
-      background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
+      border-color: var(--ui-button-hover-border, var(--_tone-text));
+      background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / calc(12% * var(--ui-tonal-opacity, 1))));
     }
 
     :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"] {
@@ -14170,13 +14232,13 @@ html[data-ui-input-modality="touch"]
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :scope:where([data-component~="ui-button"]):active:not(:disabled, [aria-disabled="true"]) {
       scale: var(--ui-press-scale, 1);
-      background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
+      background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / calc(18% * var(--ui-tonal-opacity, 1))));
       background-image: none;
       box-shadow: var(--ui-pressed);
     }
 
     :scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
-      border-color: var(--_tone);
+      border-color: var(--ui-button-border, var(--_tone-border));
       background-color: var(--_tone);
       color: var(--_on-tone);
       background-image: var(--_tone-highlight);
@@ -14185,14 +14247,15 @@ html[data-ui-input-modality="touch"]
         var(--_tone-glow);
     }
 
-    :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]),
+    :scope:where([data-component~="ui-button"])[data-appearance="danger"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-hover);
-      border-color: var(--_tone-hover);
+      border-color: var(--ui-button-hover-border, var(--_tone-hover-border));
     }
 
     :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-active);
-      border-color: var(--_tone-active);
+      border-color: var(--_tone-active-border);
       background-image: none;
       box-shadow: var(--ui-pressed);
     }
@@ -14200,6 +14263,9 @@ html[data-ui-input-modality="touch"]
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
     :scope:where([data-component~="ui-button"])[data-tone="neutral"] {
+      --_tone-border: var(--ui-neutral-border, var(--ui-neutral-surface));
+      --_tone-hover-border: var(--ui-neutral-hover-border, var(--ui-neutral-hover));
+      --_tone-active-border: var(--ui-neutral-active-border, var(--ui-neutral-active));
       --_tone-highlight: var(--ui-neutral-highlight, none);
       --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
       --_hue: var(--ui-text);
@@ -14210,7 +14276,7 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"] {
-      border-color: var(--ui-button-border, var(--ui-control-border));
+      border-color: var(--ui-button-border, var(--_tone-border));
       background-color: var(--ui-button-surface, var(--ui-neutral-surface));
       color: var(--ui-button-text, var(--ui-text));
     }
@@ -14227,13 +14293,18 @@ html[data-ui-input-modality="touch"]
       background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
     }
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--_tone-hover-border));
       background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
     }
     :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--_tone-active-border);
       background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="danger"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
+      --_tone-border: var(--ui-danger-border, var(--ui-danger));
+      --_tone-hover-border: var(--ui-danger-hover-border, var(--ui-danger-hover));
+      --_tone-active-border: var(--ui-danger-active-border, var(--ui-danger-active));
       --_tone-highlight: var(--ui-danger-highlight, none);
       --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
       --_hue: var(--ui-danger);
@@ -14244,6 +14315,9 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="success"] {
+      --_tone-border: var(--ui-success-border, var(--ui-success));
+      --_tone-hover-border: var(--ui-success-hover-border, var(--ui-success-hover));
+      --_tone-active-border: var(--ui-success-active-border, var(--ui-success-active));
       --_tone-highlight: var(--ui-success-highlight, none);
       --_tone-glow: var(--ui-success-glow, 0 0 transparent);
       --_hue: var(--ui-success);
@@ -14254,6 +14328,9 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="warning"] {
+      --_tone-border: var(--ui-warning-border, var(--ui-warning));
+      --_tone-hover-border: var(--ui-warning-hover-border, var(--ui-warning-hover));
+      --_tone-active-border: var(--ui-warning-active-border, var(--ui-warning-active));
       --_tone-highlight: var(--ui-warning-highlight, none);
       --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
       --_hue: var(--ui-warning);
@@ -14264,6 +14341,9 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="info"] {
+      --_tone-border: var(--ui-info-border, var(--ui-info));
+      --_tone-hover-border: var(--ui-info-hover-border, var(--ui-info-hover));
+      --_tone-active-border: var(--ui-info-active-border, var(--ui-info-active));
       --_tone-highlight: var(--ui-info-highlight, none);
       --_tone-glow: var(--ui-info-glow, 0 0 transparent);
       --_hue: var(--ui-info);
@@ -14309,7 +14389,7 @@ html[data-ui-input-modality="touch"]
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
     :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
-      background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
+      background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / calc(10% * var(--ui-tonal-opacity, 1))));
       border-color: transparent;
     }
 
@@ -14894,6 +14974,10 @@ html[data-ui-input-modality="touch"]
       /* Optional inherited action-group values keep text and icon actions under the same light.
          One fine top/start highlight follows the bottom/end lowlight at a joined action seam.
          The shared theme supplies reflections and glow independently of the resting lift. */
+      --_solid-border: var(--ui-accent-border, var(--ui-accent-solid));
+      --_solid-hover-border: var(--ui-accent-hover-border, var(--ui-accent-hover));
+      --_solid-active-border: var(--ui-accent-active-border, var(--ui-accent-active));
+      --_solid-active-surface: var(--ui-accent-active, var(--ui-accent-hover));
       --_tone-highlight: var(--ui-accent-highlight, none);
       --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
       --_ui-action-start: 1px;
@@ -14916,20 +15000,28 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-tone="accent"] {
+      --_solid-border: var(--ui-accent-border, var(--ui-accent));
+      --_solid-hover-border: var(--ui-accent-hover-border, var(--ui-accent-hover));
+      --_solid-active-border: var(--ui-accent-active-border, var(--ui-accent-active));
+      --_solid-active-surface: var(--ui-accent-active, var(--ui-accent-hover));
       --_tone-highlight: var(--ui-accent-highlight, none);
       --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
-      --_icon-button-border: var(--ui-accent-solid);
-      --_icon-button-hover-border: var(--ui-accent-hover);
+      --_icon-button-border: var(--ui-accent-subtle-text);
+      --_icon-button-hover-border: var(--ui-accent-subtle-text);
       --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
       --_icon-button-outline-surface: color-mix(in srgb, var(--ui-accent-solid) 5%, var(--ui-surface-default));
       color: var(--_icon-button-text);
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-tone="danger"] {
+      --_solid-border: var(--ui-danger-border, var(--ui-danger));
+      --_solid-hover-border: var(--ui-danger-hover-border, var(--ui-danger-hover));
+      --_solid-active-border: var(--ui-danger-active-border, var(--ui-danger-active));
+      --_solid-active-surface: var(--ui-danger-active, var(--ui-danger-hover));
       --_tone-highlight: var(--ui-danger-highlight, none);
       --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
-      --_icon-button-border: var(--ui-danger);
-      --_icon-button-hover-border: var(--ui-danger-hover);
+      --_icon-button-border: var(--ui-danger-subtle-text);
+      --_icon-button-hover-border: var(--ui-danger-subtle-text);
       --_icon-button-text: var(--ui-danger-subtle-text);
       --_icon-button-outline-surface: color-mix(in srgb, var(--ui-danger) 5%, var(--ui-surface-default));
       --_icon-button-solid-surface: var(--ui-danger);
@@ -14939,10 +15031,14 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-tone="success"] {
+      --_solid-border: var(--ui-success-border, var(--ui-success));
+      --_solid-hover-border: var(--ui-success-hover-border, var(--ui-success-hover));
+      --_solid-active-border: var(--ui-success-active-border, var(--ui-success-active));
+      --_solid-active-surface: var(--ui-success-active, var(--ui-success-hover));
       --_tone-highlight: var(--ui-success-highlight, none);
       --_tone-glow: var(--ui-success-glow, 0 0 transparent);
-      --_icon-button-border: var(--ui-success);
-      --_icon-button-hover-border: var(--ui-success-hover);
+      --_icon-button-border: var(--ui-success-subtle-text);
+      --_icon-button-hover-border: var(--ui-success-subtle-text);
       --_icon-button-text: var(--ui-success-subtle-text);
       --_icon-button-outline-surface: color-mix(in srgb, var(--ui-success) 5%, var(--ui-surface-default));
       --_icon-button-solid-surface: var(--ui-success);
@@ -14952,10 +15048,14 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-tone="warning"] {
+      --_solid-border: var(--ui-warning-border, var(--ui-warning));
+      --_solid-hover-border: var(--ui-warning-hover-border, var(--ui-warning-hover));
+      --_solid-active-border: var(--ui-warning-active-border, var(--ui-warning-active));
+      --_solid-active-surface: var(--ui-warning-active, var(--ui-warning-hover));
       --_tone-highlight: var(--ui-warning-highlight, none);
       --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
-      --_icon-button-border: var(--ui-warning);
-      --_icon-button-hover-border: var(--ui-warning-hover);
+      --_icon-button-border: var(--ui-warning-subtle-text);
+      --_icon-button-hover-border: var(--ui-warning-subtle-text);
       --_icon-button-text: var(--ui-warning-subtle-text);
       --_icon-button-outline-surface: color-mix(in srgb, var(--ui-warning) 5%, var(--ui-surface-default));
       --_icon-button-solid-surface: var(--ui-warning);
@@ -14965,10 +15065,14 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-tone="info"] {
+      --_solid-border: var(--ui-info-border, var(--ui-info));
+      --_solid-hover-border: var(--ui-info-hover-border, var(--ui-info-hover));
+      --_solid-active-border: var(--ui-info-active-border, var(--ui-info-active));
+      --_solid-active-surface: var(--ui-info-active, var(--ui-info-hover));
       --_tone-highlight: var(--ui-info-highlight, none);
       --_tone-glow: var(--ui-info-glow, 0 0 transparent);
-      --_icon-button-border: var(--ui-info);
-      --_icon-button-hover-border: var(--ui-info-hover);
+      --_icon-button-border: var(--ui-info-subtle-text);
+      --_icon-button-hover-border: var(--ui-info-subtle-text);
       --_icon-button-text: var(--ui-info-subtle-text);
       --_icon-button-outline-surface: color-mix(in srgb, var(--ui-info) 5%, var(--ui-surface-default));
       --_icon-button-solid-surface: var(--ui-info);
@@ -14979,6 +15083,10 @@ html[data-ui-input-modality="touch"]
 
     /* Neutral actions share the same quiet surface and border roles as fields. */
     :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"] {
+      --_solid-border: var(--ui-neutral-border, var(--ui-neutral-surface));
+      --_solid-hover-border: var(--ui-neutral-hover-border, var(--ui-neutral-hover));
+      --_solid-active-border: var(--ui-neutral-active-border, var(--ui-neutral-active));
+      --_solid-active-surface: var(--ui-neutral-active, var(--ui-neutral-hover));
       --_tone-highlight: var(--ui-neutral-highlight, none);
       --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
       --_icon-button-outline-surface: transparent;
@@ -15155,6 +15263,7 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"] {
+      border-color: var(--ui-icon-button-border, var(--_solid-border));
       background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
       background-image: var(--_tone-highlight);
       color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
@@ -15180,6 +15289,7 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]) {
+      border-color: var(--ui-icon-button-hover-border, var(--_solid-hover-border));
       background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
     }
 
@@ -15241,6 +15351,11 @@ html[data-ui-input-modality="touch"]
         var(--ui-focus-halo);
     }
 
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"]:active:enabled:not([aria-disabled="true"]) {
+      background-color: var(--ui-icon-button-active-surface, var(--_solid-active-surface));
+      border-color: var(--_solid-active-border);
+    }
+
     :scope:where([data-component~="ui-icon-button"]):is(:scope:where([data-component~="ui-icon-button"])[data-appearance="outline"], :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"]):active:enabled:not([aria-disabled="true"]) {
       background-image: none;
       box-shadow: var(--ui-pressed);
@@ -15540,12 +15655,12 @@ html[data-ui-input-modality="touch"]
     }
 
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-       transparency, saturation and edge light belong to the surrounding decorative material. */
+       transparency, frosting and edge light belong to the surrounding decorative material. */
     :scope:where([data-component~="ui-menu"]):not([inline]) .surface {
-      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
-      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.28) * 8px);
+      --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
+      --_ui-material-rim: calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px);
       --_ui-material-content-color: var(--_ui-menu-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
       --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
       background:
@@ -15570,10 +15685,8 @@ html[data-ui-input-modality="touch"]
           var(--ui-elevation-overlay, var(--ui-shadow-lg))
         )
       );
-      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 0.18));
-      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 32px));
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 32px));
     }
 
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -15585,8 +15698,8 @@ html[data-ui-input-modality="touch"]
     @media (prefers-reduced-transparency: reduce) {
       :scope:where([data-component~="ui-menu"]):not([inline]) .surface {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -15595,8 +15708,8 @@ html[data-ui-input-modality="touch"]
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -15658,7 +15771,7 @@ html[data-ui-input-modality="touch"]
     /* Small follows its trigger down: an item's own hooks still win. */
 
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-       transparency, saturation and edge light belong to the surrounding decorative material. */
+       transparency, frosting and edge light belong to the surrounding decorative material. */
 
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
     }
@@ -15744,7 +15857,7 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-menu-item"])[data-ui-menu-item-state~="tone=danger"] {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
 
     .label {
@@ -15949,12 +16062,12 @@ html[data-ui-input-modality="touch"]
     }
 
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-       transparency, saturation and edge light belong to the surrounding decorative material. */
+       transparency, frosting and edge light belong to the surrounding decorative material. */
     .surface {
-      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
-      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.55) * 8px);
+      --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
+      --_ui-material-rim: calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px);
       --_ui-material-content-color: var(--_ui-popover-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
       --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
       background:
@@ -15979,10 +16092,8 @@ html[data-ui-input-modality="touch"]
           var(--ui-elevation-overlay, var(--ui-shadow-lg))
         )
       );
-      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
-      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 32px));
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 32px));
     }
 
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -15994,8 +16105,8 @@ html[data-ui-input-modality="touch"]
     @media (prefers-reduced-transparency: reduce) {
       .surface {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -16004,8 +16115,8 @@ html[data-ui-input-modality="touch"]
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -16016,8 +16127,8 @@ html[data-ui-input-modality="touch"]
       border: 0;
       background: transparent;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
 
     :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
@@ -16076,7 +16187,7 @@ html[data-ui-input-modality="touch"]
 /* This component's hooks style the element they are set on, and never a nested one. */
 
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-       transparency, saturation and edge light belong to the surrounding decorative material. */
+       transparency, frosting and edge light belong to the surrounding decorative material. */
 
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
     }
@@ -16243,7 +16354,7 @@ html[data-ui-input-modality="touch"]
       color: var(--ui-text-muted);
     }
     :scope:where([data-component~="ui-text"])[data-ui-text-state~="tone=accent"] {
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
     }
     /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
        in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
@@ -16349,7 +16460,7 @@ html[data-ui-input-modality="touch"]
     /* A link in running text is underlined, so it stands apart from the words around it by more than
        colour. */
     :scope:where([data-component~="ui-text"]) :where([data-slotted], [data-slotted] *):is(a) {
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
       text-decoration: underline;
       text-decoration-thickness: 0.06em;
       text-underline-offset: 0.18em;
@@ -16465,12 +16576,12 @@ html[data-ui-input-modality="touch"]
     }
 
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-       transparency, saturation and edge light belong to the surrounding decorative material. */
+       transparency, frosting and edge light belong to the surrounding decorative material. */
     .surface {
-      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
-      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
-      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.08) * 8px);
+      --_ui-material-active: clamp(0, calc(var(--_ui-material-separation) * 100000), 1);
+      --_ui-material-rim: calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px);
       --_ui-material-content-color: var(--_ui-tooltip-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
       --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
       background:
@@ -16493,10 +16604,8 @@ html[data-ui-input-modality="touch"]
           var(--ui-elevation-tooltip, var(--ui-shadow-md))
         )
       );
-      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
-      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 18px))
-        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 32px));
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.08) * 32px));
     }
 
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -16508,8 +16617,8 @@ html[data-ui-input-modality="touch"]
     @media (prefers-reduced-transparency: reduce) {
       .surface {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -16518,8 +16627,8 @@ html[data-ui-input-modality="touch"]
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -16649,7 +16758,7 @@ html[data-ui-input-modality="touch"]
     /* The label and the shortcut sit side by side, a gap apart, with the label wrapping on its own. */
 
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
-       transparency, saturation and edge light belong to the surrounding decorative material. */
+       transparency, frosting and edge light belong to the surrounding decorative material. */
 
     @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
     }
@@ -16793,7 +16902,7 @@ html[data-ui-input-modality="touch"]
       border-color: var(--ui-accent-solid);
       background-color: var(--ui-accent-solid);
       background-image: var(--ui-accent-highlight, none);
-      box-shadow: var(--ui-control-inset);
+      box-shadow: none;
     }
 
     /* The SVG's painted bounds are centred in its viewBox, including its round stroke.
@@ -17600,7 +17709,7 @@ html[data-ui-input-modality="touch"]
 
     /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
     .content :where([data-slotted], [data-slotted] *):is(a) {
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
       text-decoration: underline;
       text-decoration-thickness: 0.06em;
       text-underline-offset: 0.18em;