@threadlabs/looma 0.41.1 → 0.42.0

package/styles/ui-card.css

@@ -52,9 +52,9 @@
     }
 
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
-      --_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:
@@ -66,8 +66,8 @@
         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:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
@@ -79,8 +79,8 @@
         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) {
@@ -89,8 +89,8 @@
         color: CanvasText;
         border: var(--ui-border-width) solid CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 

package/styles/ui-checkbox.css

@@ -114,7 +114,7 @@
       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.

package/styles/ui-dialog.css

@@ -72,12 +72,12 @@
     }
 
     /* 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-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))));
       --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
       background:
@@ -102,10 +102,8 @@
           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));
+      -webkit-backdrop-filter: blur(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))) {
@@ -117,8 +115,8 @@
     @media (prefers-reduced-transparency: reduce) {
       :scope:where([data-component~="ui-dialog"]) {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -127,8 +125,8 @@
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -256,7 +254,7 @@
 /* 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))) {
     }
@@ -339,12 +337,12 @@
     }
 
     /* 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. */
     :where([data-component~="ui-dialog"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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))));
       --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
       background:
@@ -369,10 +367,8 @@
           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));
+      -webkit-backdrop-filter: blur(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))) {
@@ -384,8 +380,8 @@
     @media (prefers-reduced-transparency: reduce) {
       :where([data-component~="ui-dialog"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))) {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -394,8 +390,8 @@
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 

package/styles/ui-editor-mention-menu-item.css

@@ -42,7 +42,7 @@
       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);

package/styles/ui-editor-mention-menu.css

@@ -110,7 +110,7 @@
       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);

package/styles/ui-editor-table-context-menu.css

@@ -68,7 +68,7 @@
     }
 
     :scope:where([data-component~="ui-editor-table-context-menu"]) button.danger {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
 
     /* Swatches wrap like words: the row asks for the menu's full width, and a narrower menu fits fewer. */

package/styles/ui-editor-table-toolbar.css

@@ -81,7 +81,7 @@
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) button.active {
       background: var(--ui-accent-soft, var(--ui-accent-subtle));
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
     }
 
     .group button {
@@ -98,7 +98,7 @@
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) button.danger {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
 
     :scope:where([data-component~="ui-editor-table-toolbar"]) {

package/styles/ui-icon-button.css

@@ -89,6 +89,10 @@
       /* 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;
@@ -111,20 +115,28 @@
     }
 
     :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);
@@ -134,10 +146,14 @@
     }
 
     :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);
@@ -147,10 +163,14 @@
     }
 
     :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);
@@ -160,10 +180,14 @@
     }
 
     :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);
@@ -174,6 +198,10 @@
 
     /* 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;
@@ -350,6 +378,7 @@
     }
 
     :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)));
@@ -375,6 +404,7 @@
     }
 
     :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)));
     }
 
@@ -436,6 +466,11 @@
         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);

package/styles/ui-light-editor.css

@@ -67,7 +67,7 @@
       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-component], [data-slotted]))::after {
@@ -182,7 +182,7 @@
       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-component], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope *)::after {

package/styles/ui-menu-item.css

@@ -67,7 +67,7 @@
     }
 
     :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 {

package/styles/ui-menu.css

@@ -101,12 +101,12 @@
     }
 
     /* 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:
@@ -131,10 +131,8 @@
           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))) {
@@ -146,8 +144,8 @@
     @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;
       }
     }
 
@@ -156,8 +154,8 @@
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -219,7 +217,7 @@
     /* 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))) {
     }

package/styles/ui-popover.css

@@ -72,12 +72,12 @@
     }
 
     /* 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:
@@ -102,10 +102,8 @@
           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))) {
@@ -117,8 +115,8 @@
     @media (prefers-reduced-transparency: reduce) {
       .surface {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -127,8 +125,8 @@
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -139,8 +137,8 @@
       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"]) {
@@ -199,7 +197,7 @@
 /* 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))) {
     }

package/styles/ui-radio.css

@@ -70,10 +70,40 @@
       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;
     }
 
+    /* The native radio retains grouping, validation and keyboard behavior.
+       Its empty well recedes; the filled selection and its dot stay crisp. */
+    input:where(:not([data-component], [data-slotted]))::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 {
+      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(:not([data-component], [data-slotted]))::after {
+      opacity: 1;
+    }
+
     input:focus-visible {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
       outline-offset: var(--ui-focus-width);
@@ -87,9 +117,31 @@
       color: var(--ui-disabled-text);
     }
     :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="disabled"] input {
+      border-color: var(--ui-disabled-border);
+      background-color: var(--ui-disabled-surface);
+      background-image: none;
+      box-shadow: none;
       cursor: not-allowed;
     }
 
+    :scope:where([data-component~="ui-radio"])[data-ui-radio-state~="disabled"] input:where(:not([data-component], [data-slotted]))::after {
+      background-color: var(--ui-disabled-text);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      input:where(:not([data-component], [data-slotted]))::after { transition: none; }
+    }
+
+    @media (forced-colors: active) {
+      input {
+        -webkit-appearance: auto;
+        appearance: auto;
+        background: none;
+        box-shadow: none;
+      }
+      input:where(:not([data-component], [data-slotted]))::after { display: none !important; }
+    }
+
     /* 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. */
@@ -120,6 +172,15 @@
 
     /* 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. */
+
+    @media (prefers-reduced-motion: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
     /* 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. */

package/styles/ui-section.css

@@ -75,7 +75,7 @@
     }
 
     :scope:where([data-component~="ui-section"])[data-ui-section-state~="tone=danger"] .heading {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
 
     .description {

package/styles/ui-site-header.css

@@ -39,6 +39,7 @@
       align-items: center !important;
       align-content: center !important;
       gap: var(--ui-space-2) !important;
+      inline-size: 100%;
       min-inline-size: 0;
       min-block-size: var(--ui-site-header-compact-height, 3.75rem);
       padding: var(--ui-space-2) var(--ui-site-header-padding-inline, var(--ui-space-4)) !important;
@@ -60,13 +61,16 @@
       max-inline-size: 100%;
     }
     .actions {
-      flex-wrap: wrap !important;
+      display: grid !important;
+      grid-auto-flow: column !important;
+      grid-auto-columns: minmax(max-content, var(--ui-control-min-block-size)) !important;
+      justify-items: center !important;
       margin-inline-start: auto !important;
     }
     /* Text shares a baseline inside one group; the group is centred beside any control height. */
     .identity {
       display: flex !important;
-      flex: 1 1 auto;
+      flex: 1 1 0;
       flex-wrap: wrap !important;
       align-items: baseline !important;
       gap: var(--ui-space-2) var(--ui-space-6) !important;

package/styles/ui-status-message.css

@@ -21,7 +21,7 @@
     }
 
     :scope:where([data-component~="ui-status-message"])[data-ui-status-message-state~="kind=error"] {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
 
     :scope:where([data-component~="ui-status-message"])[data-ui-status-message-state~="layout=panel"] {