@threadlabs/looma 0.41.1 → 0.42.0

package/components/ui-button/ui-button.html

@@ -197,12 +197,15 @@
         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);
@@ -240,9 +243,9 @@
       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);
@@ -385,8 +388,8 @@
     /* 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. */
     :host: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))));
     }
 
     :host[data-appearance="card"][data-tone="neutral"] {
@@ -406,13 +409,13 @@
     /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
     :host: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);
     }
 
     :host[data-appearance="solid"], :host[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);
@@ -421,14 +424,15 @@
         var(--_tone-glow);
     }
 
-    :is(:host[data-appearance="solid"], :host[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]),
+    :host[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(:host[data-appearance="solid"], :host[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);
     }
@@ -436,6 +440,9 @@
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
     :host[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);
@@ -446,7 +453,7 @@
     }
 
     :host[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));
     }
@@ -463,13 +470,18 @@
       background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
     }
     :host[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));
     }
     :host[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));
     }
 
     :host[data-tone="danger"], :host[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);
@@ -480,6 +492,9 @@
     }
 
     :host[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);
@@ -490,6 +505,9 @@
     }
 
     :host[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);
@@ -500,6 +518,9 @@
     }
 
     :host[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);
@@ -545,7 +566,7 @@
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
     :host[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;
     }
 

package/components/ui-button/ui-button.js

@@ -1,7 +1,7 @@
-// Loading actions retain focus but cannot activate, navigate, submit, or notify click consumers.
+// Disabled or loading actions cannot activate, navigate, submit, or notify click consumers.
 export function connect(host) {
   const onClick = (event) => {
-    if (!host.props.loading.value && !host.props.pending.value) return;
+    if (!host.props.disabled.value && !host.props.loading.value && !host.props.pending.value) return;
     event.preventDefault();
     event.stopImmediatePropagation();
   };

package/components/ui-callout/ui-callout.html

@@ -216,7 +216,7 @@
 
     /* A link in the callout's text is underlined, so it reads as a link by more than colour. */
     .content :slotted(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;

package/components/ui-card/ui-card.html

@@ -7,7 +7,7 @@
       elevated adds a subtle lift above the page, for a view's one card, such as sign-in. Treatment independently controls decorative material.</prop>
     <prop name="treatment" type="keyword" values="standard, expressive" default="standard"
     >How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material
-      treatment. This does not add elevation or require glass.</prop>
+      treatment. Its glass rim can transmit and frost the surrounding scene while content remains opaque. Surface separation controls the rim, independently of frosting. This does not add elevation or require glass.</prop>
     <prop name="padding" type="keyword" values="xs, sm, md, lg" default="md"
     >The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
@@ -68,9 +68,9 @@
     }
 
     :host([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:
@@ -82,8 +82,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))) {
       :host([treatment="expressive"]) {
@@ -95,8 +95,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) {
@@ -105,8 +105,8 @@
         color: CanvasText;
         border: var(--ui-border-width) solid CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 

package/components/ui-checkbox/ui-checkbox.html

@@ -153,7 +153,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/components/ui-dialog/ui-dialog.html

@@ -112,12 +112,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. */
     :host {
-      --_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:
@@ -142,10 +142,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))) {
@@ -157,8 +155,8 @@
     @media (prefers-reduced-transparency: reduce) {
       :host {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -167,8 +165,8 @@
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 

package/components/ui-editor-mention-menu/ui-editor-mention-menu.html

@@ -147,7 +147,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/components/ui-editor-mention-menu-item/ui-editor-mention-menu-item.html

@@ -44,7 +44,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/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html

@@ -141,7 +141,7 @@
     }
 
     :host 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/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -193,7 +193,7 @@
 
     :host button.active {
       background: var(--ui-accent-soft, var(--ui-accent-subtle));
-      color: var(--ui-accent-active);
+      color: var(--ui-accent-subtle-text);
     }
 
     .group button {
@@ -210,7 +210,7 @@
     }
 
     :host button.danger {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
 
     :host {

package/components/ui-icon-button/ui-icon-button.html

@@ -133,6 +133,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;
@@ -155,20 +159,28 @@
     }
 
     :host[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);
     }
 
     :host[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);
@@ -178,10 +190,14 @@
     }
 
     :host[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);
@@ -191,10 +207,14 @@
     }
 
     :host[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);
@@ -204,10 +224,14 @@
     }
 
     :host[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);
@@ -218,6 +242,10 @@
 
     /* Neutral actions share the same quiet surface and border roles as fields. */
     :host[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;
@@ -394,6 +422,7 @@
     }
 
     :host[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)));
@@ -419,6 +448,7 @@
     }
 
     :host[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)));
     }
 
@@ -480,6 +510,11 @@
         var(--ui-focus-halo);
     }
 
+    :host[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);
+    }
+
     :host:is(:host[data-appearance="outline"], :host[data-appearance="solid"]):active:enabled:not([aria-disabled="true"]) {
       background-image: none;
       box-shadow: var(--ui-pressed);

package/components/ui-light-editor/ui-light-editor.html

@@ -117,7 +117,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::after {

package/components/ui-menu/ui-menu.html

@@ -127,12 +127,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. */
     :host: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:
@@ -157,10 +157,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))) {
@@ -172,8 +170,8 @@
     @media (prefers-reduced-transparency: reduce) {
       :host:not([inline]) .surface {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -182,8 +180,8 @@
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 

package/components/ui-menu-item/ui-menu-item.html

@@ -114,7 +114,7 @@
     }
 
     :host([tone="danger"]) {
-      color: var(--ui-danger);
+      color: var(--ui-danger-subtle-text);
     }
 
     .label {

package/components/ui-popover/ui-popover.html

@@ -98,12 +98,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:
@@ -128,10 +128,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))) {
@@ -143,8 +141,8 @@
     @media (prefers-reduced-transparency: reduce) {
       .surface {
         background: var(--_ui-material-content-color);
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -153,8 +151,8 @@
         background: Canvas;
         border-color: CanvasText;
         box-shadow: none;
-        backdrop-filter: none;
         -webkit-backdrop-filter: none;
+        backdrop-filter: none;
       }
     }
 
@@ -165,8 +163,8 @@
       border: 0;
       background: transparent;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
 
     :host(:not(:state(internalOpen))) {