@threadlabs/looma 0.41.2 → 0.42.0

package/vue/UiIconButton.vue

@@ -573,6 +573,10 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     /* 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;
@@ -603,10 +607,14 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(: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,
@@ -617,10 +625,14 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(: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,
@@ -634,10 +646,14 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(: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,
@@ -651,10 +667,14 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(: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,
@@ -668,10 +688,14 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(: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,
@@ -684,6 +708,10 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
     color: var(--_icon-button-text);
   }
   :global(: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;
@@ -861,6 +889,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(: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))
@@ -898,6 +927,7 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
   }
 
   :global(: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))
@@ -971,6 +1001,11 @@ useComponentHost(() => import('../components/ui-icon-button/ui-icon-button.js'),
       var(--ui-focus-halo);
   }
 
+  :global(: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);
+  }
+
   :global(: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);

package/vue/UiLightEditor.vue

@@ -366,7 +366,7 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
     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);
   }
   :global(.source:where([data-hn-ui-light-editor])::after) {
@@ -479,7 +479,7 @@ useComponentHost(() => import('../components/ui-light-editor/ui-light-editor.js'
     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);
   }
   :global(.source:where(:not([data-hn], [data-slotted]:not([data-slotted~="ui-light-editor"]))):where(:scope, :scope

package/vue/UiMenu.vue

@@ -353,7 +353,7 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
 /* 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]) {
   :global(:scope[data-ui-menu-state~="density=compact"]:where([data-hn-ui-menu])) {
@@ -427,21 +427,11 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
     overflow: auto;
   }
   :global(: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,
@@ -484,12 +474,12 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
         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))) {
@@ -501,8 +491,8 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
   @media (prefers-reduced-transparency: reduce) {
     :global(: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;
     }
   }
 
@@ -511,8 +501,8 @@ useComponentHost(() => import('../components/ui-menu/ui-menu.js'), {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
 

package/vue/UiMenuItem.vue

@@ -453,7 +453,7 @@ useComponentHost(() => import('../components/ui-menu-item/ui-menu-item.js'), {
   }
 
   :global(:scope[data-ui-menu-item-state~="tone=danger"]:where([data-hn-ui-menu-item])) {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
   }
 
   :global(.label:where([data-hn-ui-menu-item])) {

package/vue/UiPopover.vue

@@ -335,7 +335,7 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
 }
 
 /* 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. */
 
@@ -378,21 +378,11 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
     );
   }
   :global(.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,
@@ -435,12 +425,12 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
         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))) {
@@ -452,8 +442,8 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
   @media (prefers-reduced-transparency: reduce) {
     :global(.surface:where([data-hn-ui-popover])) {
       background: var(--_ui-material-content-color);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
 
@@ -462,8 +452,8 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
   :global(:scope[data-ui-popover-state~="bare"] .surface:where([data-hn-ui-popover])) {
@@ -472,8 +462,8 @@ useComponentHost(() => import('../components/ui-popover/ui-popover.js'), {
     border: 0;
     background: transparent;
     box-shadow: none;
-    backdrop-filter: none;
     -webkit-backdrop-filter: none;
+    backdrop-filter: none;
   }
 
   :global(:scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover])) {

package/vue/UiRadio.vue

@@ -303,6 +303,9 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
 
 /* 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. */
@@ -361,9 +364,36 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
     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;
   }
+  :global(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);
+  }
+
+  :global(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;
+  }
+
+  :global(input:checked:where([data-hn-ui-radio])::after) {
+    opacity: 1;
+  }
 
   :global(input:focus-visible:where([data-hn-ui-radio])) {
     outline: var(--ui-focus-width) solid var(--ui-focus-ring, var(--ui-accent-solid));
@@ -378,8 +408,34 @@ useComponentHost(() => import('../components/ui-radio/ui-radio.js'), {
     color: var(--ui-disabled-text);
   }
   :global(: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;
   }
+
+  :global(:scope[data-ui-radio-state~="disabled"] input:where([data-hn-ui-radio])::after) {
+    background-color: var(--ui-disabled-text);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :global(input:where([data-hn-ui-radio])::after) {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    :global(input:where([data-hn-ui-radio])) {
+      -webkit-appearance: auto;
+      appearance: auto;
+      background: none;
+      box-shadow: none;
+    }
+    :global(input:where([data-hn-ui-radio])::after) {
+      display: none !important;
+    }
+  }
   :global(:scope[data-ui-radio-state~="size=sm"]:where([data-hn-ui-radio])) {
     --_font: var(--ui-font-size-sm);
     --_row: var(--ui-control-size-sm);

package/vue/UiSection.vue

@@ -219,7 +219,7 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-section-state~="tone=danger"] .heading:where([data-hn-ui-section])) {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
   }
 
   :global(.description:where([data-hn-ui-section])) {

package/vue/UiStatusMessage.vue

@@ -187,7 +187,7 @@ const hostState = computed(() =>
   }
 
   :global(:scope[data-ui-status-message-state~="kind=error"]:where([data-hn-ui-status-message])) {
-    color: var(--ui-danger);
+    color: var(--ui-danger-subtle-text);
   }
 
   :global(:scope[data-ui-status-message-state~="layout=panel"]:where([data-hn-ui-status-message])) {

package/vue/UiSwitch.vue

@@ -392,7 +392,8 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
     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),
@@ -407,7 +408,8 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
 
   :global(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);
   }
 
   :global(input:focus-visible:where([data-hn-ui-switch])) {
@@ -432,6 +434,7 @@ useComponentHost(() => import('../components/ui-switch/ui-switch.js'), {
 
   :global(: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;
   }
 

package/vue/UiTabs.vue

@@ -448,8 +448,8 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   }
   :global(.list button[aria-selected="true"]:where([data-hn-ui-tabs])),
   :global(.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);
   }
   :global(.list button:focus-visible:where([data-hn-ui-tabs])),
   :global(.list > :where(:not([data-hn-ui-tabs])):is(button[slot="tab"]:focus-visible)) {
@@ -495,7 +495,7 @@ useComponentHost(() => import('../components/ui-tabs/ui-tabs.js'), {
   :global(: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) {

package/vue/UiText.vue

@@ -719,7 +719,7 @@ const hostState = computed(() =>
     color: var(--ui-text-muted);
   }
   :global(:scope[data-ui-text-state~="tone=accent"]:where([data-hn-ui-text])) {
-    color: var(--ui-accent-active);
+    color: var(--ui-accent-subtle-text);
   }
   :global(:scope[data-ui-text-state~="tone=danger"]:where([data-hn-ui-text])) {
     color: var(--ui-danger-subtle-text);
@@ -777,7 +777,7 @@ const hostState = computed(() =>
     font-family: var(--ui-font-family-mono);
   }
   :global(: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;

package/vue/UiTooltip.vue

@@ -390,7 +390,7 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
 /* 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. */
@@ -456,21 +456,11 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
     );
   }
   :global(.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,
@@ -511,12 +501,12 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
         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))) {
@@ -528,8 +518,8 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
   @media (prefers-reduced-transparency: reduce) {
     :global(.surface:where([data-hn-ui-tooltip])) {
       background: var(--_ui-material-content-color);
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
 
@@ -538,8 +528,8 @@ useComponentHost(() => import('../components/ui-tooltip/ui-tooltip.js'), {
       background: Canvas;
       border-color: CanvasText;
       box-shadow: none;
-      backdrop-filter: none;
       -webkit-backdrop-filter: none;
+      backdrop-filter: none;
     }
   }
   :global(.shortcut:where([data-hn-ui-tooltip])) {

package/vue/chunks/UiButton.js

@@ -874,6 +874,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-872bcd48"]]);
+}), [["__scopeId", "data-v-26648489"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCallout.js

@@ -297,6 +297,6 @@ var UiCallout_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-15314c87"]]);
+}), [["__scopeId", "data-v-7d8e0649"]]);
 //#endregion
 export { UiCallout_default as t };

package/vue/chunks/UiCard.js

@@ -127,7 +127,7 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 				},
 				required: false,
 				target: { attribute: "treatment" },
-				description: "How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material\n      treatment. This does not add elevation or require glass.",
+				description: "How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material\n      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.",
 				values: ["standard", "expressive"],
 				default: "standard"
 			},
@@ -298,6 +298,6 @@ var UiCard_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-2944b075"]]);
+}), [["__scopeId", "data-v-b628f494"]]);
 //#endregion
 export { UiCard_default as t };

package/vue/chunks/UiCheckbox.js

@@ -356,6 +356,6 @@ var UiCheckbox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-570a9f0b"]]);
+}), [["__scopeId", "data-v-36f1c10d"]]);
 //#endregion
 export { UiCheckbox_default as t };

package/vue/chunks/UiDialog.js

@@ -362,6 +362,6 @@ var UiDialog_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-45428506"]]);
+}), [["__scopeId", "data-v-d8d3c50b"]]);
 //#endregion
 export { UiDialog_default as t };

package/vue/chunks/UiEditorMentionMenu.js

@@ -613,6 +613,6 @@ var UiEditorMentionMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_defaul
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0f0b9571"]]);
+}), [["__scopeId", "data-v-54879c45"]]);
 //#endregion
 export { UiEditorMentionMenu_default as t };

package/vue/chunks/UiEditorMentionMenuItem.js

@@ -135,6 +135,6 @@ var UiEditorMentionMenuItem_default = /*#__PURE__*/ _plugin_vue_export_helper_de
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-9ff3165a"]]);
+}), [["__scopeId", "data-v-9537bb4e"]]);
 //#endregion
 export { UiEditorMentionMenuItem_default as t };

package/vue/chunks/UiEditorTableContextMenu.js

@@ -495,6 +495,6 @@ var UiEditorTableContextMenu_default = /*#__PURE__*/ _plugin_vue_export_helper_d
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-3fc801ab"]]);
+}), [["__scopeId", "data-v-08c865b7"]]);
 //#endregion
 export { UiEditorTableContextMenu_default as t };

package/vue/chunks/UiEditorTableToolbar.js

@@ -702,6 +702,6 @@ var UiEditorTableToolbar_default = /*#__PURE__*/ _plugin_vue_export_helper_defau
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-a0455015"]]);
+}), [["__scopeId", "data-v-1103cb89"]]);
 //#endregion
 export { UiEditorTableToolbar_default as t };

package/vue/chunks/UiIconButton.js

@@ -462,6 +462,6 @@ var UiIconButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-d48cf3c9"]]);
+}), [["__scopeId", "data-v-919cca1c"]]);
 //#endregion
 export { UiIconButton_default as t };