@threadlabs/looma 0.33.0 → 0.34.0

package/vue/components.css

@@ -1216,7 +1216,7 @@ svg,.arc {
     flex: none;
     vertical-align: middle;
 }
-:scope:not([variant="link"]):has(.badge:not(:empty)):where([data-hn-ui-button]) {
+:scope:not([data-appearance="link"]):has(.badge:not(:empty)):where([data-hn-ui-button]) {
     padding-block: var(--ui-space-0-5) !important;
 }
 .badge:where([data-hn-ui-button]) {
@@ -1253,7 +1253,7 @@ svg,.arc {
       var(--ui-action-inset-lg, var(--ui-space-4)) !important;
     font-size: var(--ui-font-size-md);
 }
-:scope[data-ui-button-state~="variant=card"]:where([data-hn-ui-button]) {
+:scope[data-appearance="card"]:where([data-hn-ui-button]) {
     display: grid !important;
     grid-template-columns: auto minmax(0, 1fr) auto;
     align-content: center !important;
@@ -1266,10 +1266,10 @@ svg,.arc {
     box-shadow: none;
     background-image: none;
 }
-:scope[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"]:where([data-hn-ui-button]) {
+:scope[data-appearance="card"][size="lg"]:where([data-hn-ui-button]) {
     min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
 }
-:scope[data-ui-button-state~="variant=card"]:has(.card-icon:empty):where([data-hn-ui-button]) {
+:scope[data-appearance="card"]:has(.card-icon:empty):where([data-hn-ui-button]) {
     grid-template-columns: minmax(0, 1fr) auto;
 }
 .card-icon:where([data-hn-ui-button]) {
@@ -1291,10 +1291,10 @@ svg,.arc {
     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%));
 }
-:scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:where([data-hn-ui-button]) {
+:scope[data-appearance="card"][data-tone="neutral"]:where([data-hn-ui-button]) {
     border-color: var(--ui-button-border, var(--ui-border));
 }
-:scope[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:scope[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     border-color: var(--ui-button-hover-border, var(--ui-border-strong));
 }
 :scope:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
@@ -1303,58 +1303,58 @@ svg,.arc {
     background-image: none;
     box-shadow: var(--ui-pressed);
 }
-:scope[data-ui-button-state~="variant=solid"]:where([data-hn-ui-button]),:scope[data-ui-button-state~="variant=danger"]:where([data-hn-ui-button]) {
+:scope[data-appearance="solid"]:where([data-hn-ui-button]),:scope[data-appearance="danger"]:where([data-hn-ui-button]) {
     border-color: var(--_tone);
     background-color: var(--_tone);
     color: var(--_on-tone);
     box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
 }
-:is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:is(:scope[data-appearance="solid"], :scope[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     background-color: var(--_tone-hover);
     border-color: var(--_tone-hover);
 }
-:is(:scope[data-ui-button-state~="variant=solid"], :scope[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:is(:scope[data-appearance="solid"], :scope[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     background-color: var(--_tone-active);
     border-color: var(--_tone-active);
     background-image: none;
     box-shadow: var(--ui-pressed);
 }
-:scope[data-ui-button-state~="tone=neutral"]:where([data-hn-ui-button]) {
+:scope[data-tone="neutral"]:where([data-hn-ui-button]) {
     --_hue: var(--ui-text);
     --_hue-hover: var(--ui-text);
     --_hue-active: var(--ui-text);
     --_hue-text: var(--ui-text);
     --_on-hue: var(--ui-surface);
 }
-:scope[data-ui-button-state~="tone=danger"]:where([data-hn-ui-button]),:scope[data-ui-button-state~="variant=danger"]:where([data-hn-ui-button]) {
+:scope[data-tone="danger"]:where([data-hn-ui-button]),:scope[data-appearance="danger"]:where([data-hn-ui-button]) {
     --_hue: var(--ui-danger);
     --_hue-hover: var(--ui-danger-hover);
-    --_hue-active: var(--ui-danger-hover);
-    --_hue-text: var(--ui-danger-hover);
+    --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
+    --_hue-text: var(--ui-danger-subtle-text);
     --_on-hue: var(--ui-on-danger);
 }
-:scope[data-ui-button-state~="tone=success"]:where([data-hn-ui-button]) {
+:scope[data-tone="success"]:where([data-hn-ui-button]) {
     --_hue: var(--ui-success);
-    --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
-    --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
-    --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
-    --_on-hue: var(--ui-surface);
+    --_hue-hover: var(--ui-success-hover);
+    --_hue-active: var(--ui-success-active);
+    --_hue-text: var(--ui-success-subtle-text);
+    --_on-hue: var(--ui-success-on-strong);
 }
-:scope[data-ui-button-state~="tone=warning"]:where([data-hn-ui-button]) {
+:scope[data-tone="warning"]:where([data-hn-ui-button]) {
     --_hue: var(--ui-warning);
-    --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
-    --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
-    --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
-    --_on-hue: var(--ui-surface);
+    --_hue-hover: var(--ui-warning-hover);
+    --_hue-active: var(--ui-warning-active);
+    --_hue-text: var(--ui-warning-subtle-text);
+    --_on-hue: var(--ui-warning-on-strong);
 }
-:scope[data-ui-button-state~="tone=info"]:where([data-hn-ui-button]) {
+:scope[data-tone="info"]:where([data-hn-ui-button]) {
     --_hue: var(--ui-info);
-    --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
-    --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
-    --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
-    --_on-hue: var(--ui-surface);
+    --_hue-hover: var(--ui-info-hover);
+    --_hue-active: var(--ui-info-active);
+    --_hue-text: var(--ui-info-subtle-text);
+    --_on-hue: var(--ui-info-on-strong);
 }
-:scope[data-ui-button-state~="variant=field"]:where([data-hn-ui-button]) {
+:scope[data-appearance="field"]:where([data-hn-ui-button]) {
     --_ui-field-shadow: var(--ui-shadow-sm);
     border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
     border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -1366,7 +1366,7 @@ svg,.arc {
     font-weight: var(--ui-font-normal);
     box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
 }
-:scope[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:scope[data-appearance="field"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     border-color: var(
       --ui-button-hover-border,
       var(--ui-control-border-hover, var(--ui-text-secondary))
@@ -1376,26 +1376,26 @@ svg,.arc {
       var(--ui-control-surface, var(--ui-surface-elevated))
     );
 }
-:scope[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:scope[data-appearance="field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     --_ui-field-shadow: var(--ui-pressed);
 }
-:scope[data-ui-button-state~="variant=field"]:focus-visible:where([data-hn-ui-button]) {
+:scope[data-appearance="field"]:focus-visible:where([data-hn-ui-button]) {
     border-color: var(--ui-control-focus, var(--ui-accent-solid));
     box-shadow:
       var(--ui-button-shadow, var(--_ui-field-shadow)),
       var(--ui-control-focus-halo-shadow);
 }
-:scope[data-ui-button-state~="variant=ghost"]:where([data-hn-ui-button]) {
+:scope[data-appearance="ghost"]:where([data-hn-ui-button]) {
     border-color: transparent;
     background: transparent;
     box-shadow: none;
     color: var(--ui-button-ghost-text, var(--_tone-text));
 }
-:scope[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:scope[data-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
     border-color: transparent;
 }
-:scope[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:scope[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     background-color: var(
       --ui-button-ghost-active-surface,
       color-mix(in oklch, var(--ui-surface), var(--_tone) 3%)
@@ -1411,12 +1411,12 @@ svg,.arc {
       var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
       var(--ui-focus-halo);
 }
-:scope[data-ui-button-state~="variant=solid"]:focus-visible:where([data-hn-ui-button]) {
+:scope[data-appearance="solid"]:focus-visible:where([data-hn-ui-button]) {
     box-shadow:
       var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
       var(--ui-focus-halo);
 }
-:is(:scope[data-ui-button-state~="variant=ghost"], :scope[data-ui-button-state~="variant=link"], :scope[data-ui-button-state~="variant=card"]):focus-visible:where([data-hn-ui-button]) {
+:is(:scope[data-appearance="ghost"], :scope[data-appearance="link"], :scope[data-appearance="card"]):focus-visible:where([data-hn-ui-button]) {
     box-shadow: var(--ui-focus-halo);
 }
 :scope:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button]) {
@@ -1432,7 +1432,7 @@ svg,.arc {
 :is(:scope[data-ui-button-state~="loading"], :scope[data-ui-button-state~="pending"]):focus-visible:where([data-hn-ui-button]) {
     box-shadow: var(--ui-focus-halo);
 }
-:scope[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button]) {
+:scope[data-appearance="ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button]) {
     background-color: var(--ui-disabled-surface);
     border-color: transparent;
 }
@@ -1442,12 +1442,12 @@ svg,.arc {
 }
 }
 html[data-ui-input-modality="touch"]
-    :scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button]),html[data-ui-input-modality="touch"]
+    :scope[data-appearance="link"]:where([data-hn-ui-button]),html[data-ui-input-modality="touch"]
     :scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button]) {
     position: relative;
 }
 html[data-ui-input-modality="touch"]
-    :scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button])::after,html[data-ui-input-modality="touch"]
+    :scope[data-appearance="link"]:where([data-hn-ui-button])::after,html[data-ui-input-modality="touch"]
     :scope[data-ui-button-state~="size=xs"]:where([data-hn-ui-button])::after {
     position: absolute;
     inset: 50% auto auto 50%;
@@ -1456,7 +1456,7 @@ html[data-ui-input-modality="touch"]
     transform: translate(-50%, -50%);
     content: "";
 }
-:scope[data-ui-button-state~="variant=link"]:where([data-hn-ui-button]) {
+:scope[data-appearance="link"]:where([data-hn-ui-button]) {
     display: inline !important;
     min-block-size: 0;
     padding: 0 !important;
@@ -1474,21 +1474,21 @@ html[data-ui-input-modality="touch"]
       color var(--ui-motion-fast) var(--ui-motion-ease),
       text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-:scope[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:scope[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     color: var(--ui-button-link-hover-text, var(--ui-text-primary));
     text-decoration-color: currentColor;
     background: none;
     transform: none;
 }
-:scope[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+:scope[data-appearance="link"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
     background: none;
     transform: none;
 }
-:scope[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button]) {
+:scope[data-appearance="link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])):where([data-hn-ui-button]) {
     background: none;
     border-color: transparent;
 }
-:scope[data-ui-button-state~="variant=link"]:focus-visible:where([data-hn-ui-button]) {
+:scope[data-appearance="link"]:focus-visible:where([data-hn-ui-button]) {
     box-shadow: none;
     /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
     outline: var(--ui-focus-width) solid var(--ui-focus-ring);
@@ -1717,6 +1717,53 @@ html[data-ui-input-modality="touch"]
     border-color: var(--ui-border-subtle);
     box-shadow: var(--ui-shadow-lg);
 }
+:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card]) {
+    --_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
+    );
+    border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
+    border-color: transparent;
+    background:
+      linear-gradient(var(--_ui-card-surface), var(--_ui-card-surface)) padding-box,
+      linear-gradient(
+      var(--ui-material-glass, var(--ui-surface-raised)),
+      var(--ui-material-glass, var(--ui-surface-raised))
+    ) border-box,
+      var(--_ui-card-surface) padding-box;
+    box-shadow:
+      var(--ui-shadow-lg),
+      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));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card]) {
+      background: var(--_ui-card-surface);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card]) {
+      background: var(--_ui-card-surface);
+      border-width: var(--ui-border-width);
+      border-color: var(--ui-border-strong);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
+@media (forced-colors: active) {
+:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card]) {
+      background: Canvas;
+      color: CanvasText;
+      border: var(--ui-border-width) solid CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
 :scope[data-ui-card-state~="tone=accent"]:where([data-hn-ui-card]) {
     border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
     --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));
@@ -2439,6 +2486,9 @@ input[type="range"] {
 
 /* The label and the shortcut sit side by side, a gap apart, with the label wrapping on its own. */
 
+/* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+   transparency, saturation and edge light belong to the surrounding decorative material. */
+
 /* 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. */
 
@@ -2448,6 +2498,7 @@ input[type="range"] {
  * the surface border line, so the fill covers that stretch of border and the outline runs unbroken. */
 @scope (.ui-tooltip) to ([data-hn]) {
 :scope:where([data-hn-ui-tooltip]) {
+    --_ui-material-scale: 0.08;
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-tooltip-border: var(--ui-tooltip-border);
     --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -2500,6 +2551,88 @@ input[type="range"] {
       var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md)))
     );
 }
+.surface:where([data-hn-ui-tooltip]) {
+    --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+    --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+    --_ui-material-active: clamp(
+      0,
+      calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000),
+      1
+    );
+    --_ui-material-rim: calc(
+      (
+        var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25
+      ) *
+        var(--_ui-material-scale, 0.08) *
+        8px
+    );
+    --_ui-material-content-color: var(
+      --_ui-tooltip-surface,
+      var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated)))
+    );
+    --_ui-material-rim-color: color-mix(
+      in srgb,
+      var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%),
+      transparent
+    );
+    background:
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --_ui-tooltip-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --_ui-tooltip-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        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));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.surface:where([data-hn-ui-tooltip]) {
+      background: var(--_ui-material-content-color);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+.surface:where([data-hn-ui-tooltip]) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
+@media (forced-colors: active) {
+.surface:where([data-hn-ui-tooltip]) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
 .shortcut:where([data-hn-ui-tooltip]) {
     display: inline-flex !important;
     align-items: center !important;
@@ -3531,215 +3664,847 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
 }
 }
 
-/* One term and its value in a ui-description-list, laid out by the list's layout. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-description-item) to ([data-hn]) {
-:scope:where([data-hn-ui-description-item]) {
-    display: var(--_ui-description-display, grid) !important;
-    grid-column: var(--_ui-description-column, 1 / -1);
-    grid-template-columns: subgrid;
-    flex-direction: column !important;
-    align-items: var(--_ui-description-align, baseline) !important;
-    gap: var(--ui-space-1) var(--ui-space-6) !important;
-    min-inline-size: 0;
-    padding: var(--_ui-description-padding, 0) !important;
-    border-width: var(--_ui-description-border-width, 0);
-    border-style: solid;
-    border-color: var(--_ui-description-border-color, var(--ui-border-default));
-    border-radius: var(--ui-radius-md);
-    font-size: var(--ui-font-size-sm);
-}
-dt:where([data-hn-ui-description-item]) {
-    color: var(--ui-text-muted);
-}
-dd:where([data-hn-ui-description-item]) {
-    margin: 0 !important;
-    min-inline-size: 0;
-    color: var(--ui-text-primary);
-    font-weight: var(--ui-font-medium);
-    font-size: var(--_ui-description-value-size, inherit);
-    text-align: start;
-    overflow-wrap: anywhere;
-}
-:scope[hidden]:where([data-hn-ui-description-item]) {
-    display: none !important;
-}
-}
-
-/* Named values: a term and what it is, for each item (ui-description-item). */
-/* Rows line every term up in one column and every value in the next, through subgrid. */
-
-/* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
-   private properties, which cross into each item. */
-
-/* A column is at least --_min wide; with columns set, at least its share of the width, so no more
-   than that many fit. */
-
-/* Compact takes each layout's closer spacing. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-description-list) to ([data-hn]) {
-:scope:where([data-hn-ui-description-list]) {
-    --_gap: var(--ui-space-2);
-    --_gap-compact: var(--ui-space-1);
-    --_column-gap: var(--ui-space-6);
-    --_min: 10rem;
-    --_track: var(--_min);
-    --_tile-padding: var(--ui-space-3);
-    display: grid !important;
-    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-    gap: var(--_gap) var(--_column-gap) !important;
-    min-inline-size: 0;
-    margin: 0 !important;
-}
-:scope[data-ui-description-list-state~="layout=stacked"]:where([data-hn-ui-description-list]),:scope[data-ui-description-list-state~="layout=grid"]:where([data-hn-ui-description-list]),:scope[data-ui-description-list-state~="layout=tiles"]:where([data-hn-ui-description-list]) {
-    --_ui-description-display: flex;
-    --_ui-description-column: auto;
-    --_ui-description-align: stretch;
-    --_gap: var(--ui-space-4);
-    --_gap-compact: var(--ui-space-2);
-    grid-template-columns: minmax(0, 1fr);
-}
-:scope[data-ui-description-list-state~="layout=grid"]:where([data-hn-ui-description-list]),:scope[data-ui-description-list-state~="layout=tiles"]:where([data-hn-ui-description-list]) {
-    inline-size: 100%;
-    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
-}
-:scope[data-ui-description-list-state~="layout=tiles"]:where([data-hn-ui-description-list]) {
-    --_ui-description-align: flex-start;
-    --_ui-description-value-size: var(--ui-font-size-lg);
-    --_ui-description-padding: var(--_tile-padding);
-    --_ui-description-border-width: var(--ui-border-width);
-    --_ui-description-border-color: var(--ui-border-strong);
-    --_gap: var(--ui-space-3);
-    --_gap-compact: var(--ui-space-2);
-    --_column-gap: var(--_gap);
-}
-:scope[data-ui-description-list-state~="columns=2"]:where([data-hn-ui-description-list]) {
-    --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
-}
-:scope[data-ui-description-list-state~="columns=3"]:where([data-hn-ui-description-list]) {
-    --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
-}
-:scope[data-ui-description-list-state~="columns=4"]:where([data-hn-ui-description-list]) {
-    --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
-}
-:scope[data-ui-description-list-state~="density=compact"]:where([data-hn-ui-description-list]) {
-    --_gap: var(--_gap-compact);
-    --_tile-padding: var(--ui-space-2);
-}
-:scope[hidden]:where([data-hn-ui-description-list]) {
-    display: none !important;
-}
-}
-
-/* The controller sets each fade length from overflow and scroll position. The mask blends
-       into whatever is behind the area without needing to know its colour. Before upgrade, its
-       zero-length defaults leave the authored scroll area fully visible. */
-
-/* Trim projected edges without changing spacing inside an item. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-scroll-area) to ([data-hn]) {
-:scope[data-ui-scroll-area-state~="fill"]:where([data-hn-ui-scroll-area]) {
-    flex: 1;
-}
-:scope:where([data-hn-ui-scroll-area]) {
-    display: block !important;
-    box-sizing: border-box !important;
-    min-block-size: 0;
-    min-inline-size: 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    --_ui-scroll-fade-direction: to bottom;
-    --_ui-scroll-fade-inline: to right;
-    --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
-    mask-image: linear-gradient(
-      var(--_ui-scroll-fade-direction),
-      transparent,
-      #000 var(--_ui-scroll-fade-start),
-      #000 calc(100% - var(--_ui-scroll-fade-end)),
-      transparent
-    );
-}
-.content:where([data-hn-ui-scroll-area]) {
-    display: flow-root !important;
-}
-:scope[data-ui-scroll-area-state~="trim"]
-    .content
-    > :where(:not([data-hn-ui-scroll-area])):is(:first-child) {
-    margin-block-start: 0 !important;
-}
-:scope[data-ui-scroll-area-state~="trim"]
-    .content
-    > :where(:not([data-hn-ui-scroll-area])):is(:last-child) {
-    margin-block-end: 0 !important;
-}
-:scope[data-ui-scroll-area-state~="orientation=horizontal"]:where([data-hn-ui-scroll-area]) {
-    overflow-x: auto;
-    overflow-y: hidden;
-    --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
-}
-:scope:dir(rtl):where([data-hn-ui-scroll-area]) {
-    --_ui-scroll-fade-inline: to left;
-}
-:scope[data-ui-scroll-area-state~="size=sm"]:where([data-hn-ui-scroll-area]) {
-    max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
-}
-:scope[data-ui-scroll-area-state~="size=md"]:where([data-hn-ui-scroll-area]) {
-    max-block-size: 20rem;
-}
-:scope[data-ui-scroll-area-state~="size=lg"]:where([data-hn-ui-scroll-area]) {
-    max-block-size: 30rem;
-}
-:scope[data-ui-scroll-area-state~="padding=xs"]:where([data-hn-ui-scroll-area]) {
-    padding: var(--ui-space-2) !important;
-}
-:scope[data-ui-scroll-area-state~="padding=sm"]:where([data-hn-ui-scroll-area]) {
-    padding: var(--ui-space-3) !important;
-}
-:scope[data-ui-scroll-area-state~="padding=md"]:where([data-hn-ui-scroll-area]) {
-    padding: var(--ui-space-5) !important;
-}
-:scope[data-ui-scroll-area-state~="padding=lg"]:where([data-hn-ui-scroll-area]) {
-    padding: var(--ui-space-6) !important;
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-icon-button-active-scale {
+  syntax: "*";
+  inherits: false;
 }
-:scope[hidden]:where([data-hn-ui-scroll-area]) {
-    display: none !important;
+@property --ui-icon-button-active-surface {
+  syntax: "*";
+  inherits: false;
 }
+@property --ui-icon-button-border {
+  syntax: "*";
+  inherits: false;
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-dialog-duration {
+@property --ui-icon-button-disabled-filter {
   syntax: "*";
   inherits: false;
 }
-@property --ui-dialog-surface {
+@property --ui-icon-button-disabled-opacity {
   syntax: "*";
   inherits: false;
 }
-@property --ui-dialog-border {
+@property --ui-icon-button-hover-border {
   syntax: "*";
   inherits: false;
 }
-@property --ui-dialog-radius {
+@property --ui-icon-button-hover-surface {
   syntax: "*";
   inherits: false;
 }
-@property --ui-dialog-shadow {
+@property --ui-icon-button-hover-text {
   syntax: "*";
   inherits: false;
 }
-@property --ui-dialog-max-width {
+@property --ui-icon-button-icon-size {
   syntax: "*";
   inherits: false;
 }
-@property --ui-dialog-viewport-gap {
+@property --ui-icon-button-icon-stroke-width {
   syntax: "*";
   inherits: false;
 }
-
+@property --ui-icon-button-outline-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-outline-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-size {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-solid-hover-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-solid-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-solid-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-solid-text {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-icon-button-surface {
+  syntax: "*";
+  inherits: false;
+}
+
+/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
+
+/* At rest an anticipatory button shows only its guide dot. The icon grows into place when
+   proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
+
+/* A touch target without a bigger button: an invisible hit area, at least the control
+   minimum, centred on the button (::before is the anticipatory guide). */
+
+/* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+
+/* Native toggle state persists after pointer release, including during loading. */
+
+/* Disabled is a flat neutral control, independent of the active variant's tone. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-icon-button) to ([data-hn]) {
+:scope:where([data-hn-ui-icon-button]) {
+    /* 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.
+       A single ambient lift avoids stacking a face gradient or another inset bevel. */
+    --_ui-action-start: 1px;
+    --_ui-action-edge: var(
+      --ui-action-edge,
+      inset var(--_ui-action-start) 1px 0 light-dark(
+        rgb(255 255 255 / 0.08),
+        rgb(255 255 255 / 0.06)
+      ),
+      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));
+    /* Hooks do not inherit, so the parts below read them from the root. */
+    --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
+    --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
+
+    display: inline-flex !important;
+    color: var(--ui-text-secondary);
+}
+:scope:dir(rtl):where([data-hn-ui-icon-button]) {
+    --_ui-action-start: -1px;
+}
+:scope[data-tone="accent"]:where([data-hn-ui-icon-button]) {
+    --_icon-button-border: var(--ui-accent-solid);
+    --_icon-button-hover-border: var(--ui-accent-hover);
+    --_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[data-tone="danger"]:where([data-hn-ui-icon-button]) {
+    --_icon-button-border: var(--ui-danger);
+    --_icon-button-hover-border: var(--ui-danger-hover);
+    --_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);
+    --_icon-button-solid-hover-surface: var(--ui-danger-hover);
+    --_icon-button-solid-text: var(--ui-danger-on-strong);
+    color: var(--_icon-button-text);
+}
+:scope[data-tone="success"]:where([data-hn-ui-icon-button]) {
+    --_icon-button-border: var(--ui-success);
+    --_icon-button-hover-border: var(--ui-success-hover);
+    --_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);
+    --_icon-button-solid-hover-surface: var(--ui-success-hover);
+    --_icon-button-solid-text: var(--ui-success-on-strong);
+    color: var(--_icon-button-text);
+}
+:scope[data-tone="warning"]:where([data-hn-ui-icon-button]) {
+    --_icon-button-border: var(--ui-warning);
+    --_icon-button-hover-border: var(--ui-warning-hover);
+    --_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);
+    --_icon-button-solid-hover-surface: var(--ui-warning-hover);
+    --_icon-button-solid-text: var(--ui-warning-on-strong);
+    color: var(--_icon-button-text);
+}
+:scope[data-tone="info"]:where([data-hn-ui-icon-button]) {
+    --_icon-button-border: var(--ui-info);
+    --_icon-button-hover-border: var(--ui-info-hover);
+    --_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);
+    --_icon-button-solid-hover-surface: var(--ui-info-hover);
+    --_icon-button-solid-text: var(--ui-info-on-strong);
+    color: var(--_icon-button-text);
+}
+:scope[data-tone="neutral"]:where([data-hn-ui-icon-button]) {
+    --_icon-button-solid-surface: var(--ui-text-primary);
+    --_icon-button-solid-hover-surface: var(--ui-text-primary);
+    --_icon-button-solid-text: var(--ui-surface-default);
+}
+:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button]) {
+    position: relative;
+}
+:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button])::before {
+    content: "";
+    position: absolute;
+    inset: 50% auto auto 50%;
+    z-index: 1;
+    inline-size: var(--ui-affordance-guide-size);
+    block-size: var(--ui-affordance-guide-size);
+    border-radius: var(--ui-radius-round);
+    background: var(--ui-affordance-guide-color, var(--ui-border-strong));
+    opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
+    transform: translate(-50%, -50%);
+    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
+    pointer-events: none;
+}
+:scope[data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]:where([data-hn-ui-icon-button])::before {
+    inline-size: 2px;
+    block-size: 20px;
+    background: var(--ui-border-strong);
+    opacity: 1;
+}
+:scope[data-ui-icon-button-state~="anticipatory"]:disabled:where([data-hn-ui-icon-button])::before {
+    opacity: 0;
+}
+:scope[data-ui-icon-button-state~="anticipatory"]
+    .content:where([data-hn-ui-icon-button]) {
+    opacity: 1;
+    transform: scale(1);
+    transition:
+      opacity var(--ui-motion-fast) var(--ui-motion-ease),
+      transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
+}
+@media (hover: hover) and (pointer: fine) {
+:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-appearance="solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button]) {
+      border-color: transparent;
+      background-color: transparent;
+      box-shadow: none;
+}
+:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-appearance="solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+      .content:where([data-hn-ui-icon-button]) {
+      opacity: 0;
+      transform: scale(0.65);
+      transition-duration: var(--ui-motion-fast);
+}
+}
+:scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="revealed"], :scope[data-appearance="solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])::before {
+    opacity: 0;
+}
+:scope:where([data-hn-ui-icon-button]) {
+    /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
+    --_size: 2rem;
+    appearance: none;
+    inline-size: var(--ui-icon-button-size, var(--_size));
+    block-size: var(--ui-icon-button-size, var(--_size));
+    min-inline-size: var(--ui-icon-button-size, var(--_size));
+    min-block-size: var(--ui-icon-button-size, var(--_size));
+    padding: 0 !important;
+    margin: 0 !important;
+    border: var(--ui-border-width) solid transparent;
+    border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
+    background-color: var(--ui-icon-button-surface, transparent);
+    color: inherit;
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    cursor: pointer;
+    transition:
+      background-color var(--ui-motion-fast) var(--ui-motion-ease),
+      border-color var(--ui-motion-fast) var(--ui-motion-ease),
+      color var(--ui-motion-fast) var(--ui-motion-ease),
+      box-shadow var(--ui-motion-base) var(--ui-motion-ease),
+      scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease);
+}
+@media (hover: none), (pointer: coarse) {
+:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button])::before {
+      opacity: 0;
+}
+}
+@media (pointer: coarse) {
+:scope:where([data-hn-ui-icon-button]) {
+      position: relative;
+}
+:scope:where([data-hn-ui-icon-button])::after {
+      content: "";
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--ui-control-min-block-size));
+      block-size: max(100%, var(--ui-control-min-block-size));
+      transform: translate(-50%, -50%);
+}
+}
+html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button]) {
+    position: relative;
+}
+html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::after {
+    content: "";
+    position: absolute;
+    inset: 50% auto auto 50%;
+    inline-size: max(100%, var(--ui-control-min-block-size));
+    block-size: max(100%, var(--ui-control-min-block-size));
+    transform: translate(-50%, -50%);
+}
+:scope[data-ui-icon-button-state~="size=sm"]:where([data-hn-ui-icon-button]) {
+    --_size: 1.75rem;
+    inline-size: var(--ui-icon-button-size, var(--_size));
+    block-size: var(--ui-icon-button-size, var(--_size));
+    min-inline-size: var(--ui-icon-button-size, var(--_size));
+    min-block-size: var(--ui-icon-button-size, var(--_size));
+}
+:scope[data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button]) {
+    --_size: 2.5rem;
+    inline-size: var(--ui-icon-button-size, var(--_size));
+    block-size: var(--ui-icon-button-size, var(--_size));
+    min-inline-size: var(--ui-icon-button-size, var(--_size));
+    min-block-size: var(--ui-icon-button-size, var(--_size));
+}
+:scope[data-ui-icon-button-state~="matchButton"]:where([data-hn-ui-icon-button]) {
+    --_size: var(--ui-control-size-md);
+    block-size: auto;
+    align-self: stretch;
+}
+:scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"]:where([data-hn-ui-icon-button]) {
+    --_size: var(--ui-control-size-sm);
+}
+:scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button]) {
+    --_size: var(--ui-control-size-lg);
+}
+@media (pointer: coarse) {
+:scope[data-ui-icon-button-state~="matchButton"]:where([data-hn-ui-icon-button]) {
+      inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
+      min-inline-size: max(
+        var(--ui-icon-button-size, var(--_size)),
+        var(--ui-control-min-block-size)
+      );
+      min-block-size: max(
+        var(--ui-icon-button-size, var(--_size)),
+        var(--ui-control-min-block-size)
+      );
+}
+}
+:scope[data-ui-icon-button-state~="round"]:where([data-hn-ui-icon-button]) {
+    border-radius: var(--ui-radius-round);
+}
+:scope[data-appearance="outline"]:where([data-hn-ui-icon-button]) {
+    border-color: var(
+      --ui-icon-button-border,
+      var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
+    );
+    background-color: var(
+      --ui-icon-button-outline-surface,
+      var(--_icon-button-outline-surface, var(--ui-surface-default))
+    );
+    background-image: none;
+    color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
+    box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
+}
+:scope[data-appearance="solid"]:where([data-hn-ui-icon-button]) {
+    background-color: var(
+      --ui-icon-button-solid-surface,
+      var(--_icon-button-solid-surface, var(--ui-accent-solid))
+    );
+    background-image: none;
+    color: var(
+      --ui-icon-button-solid-text,
+      var(--_icon-button-solid-text, var(--ui-text-on-accent))
+    );
+    box-shadow: var(
+      --ui-icon-button-solid-shadow,
+      var(--ui-action-shadow, var(--_ui-action-shadow))
+    );
+}
+:scope:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    /* Derived from the text colour so the ghost hover shows on any background. */
+    background-color: var(
+      --ui-icon-button-hover-surface,
+      color-mix(in srgb, currentColor 8%, transparent)
+    );
+    color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+}
+:scope[data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    border-color: var(
+      --ui-icon-button-hover-border,
+      var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
+    );
+}
+:scope[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    background-color: var(
+      --ui-icon-button-solid-hover-surface,
+      var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
+    );
+}
+:scope[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    color: var(
+      --ui-icon-button-solid-text,
+      var(--_icon-button-solid-text, var(--ui-text-on-accent))
+    );
+}
+:scope[data-appearance="ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    background-color: var(
+      --ui-icon-button-active-surface,
+      color-mix(in srgb, currentColor 16%, transparent)
+    );
+    color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
+    box-shadow: var(--ui-pressed);
+}
+:scope[data-appearance="outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button]) {
+    background-color: var(
+      --ui-icon-button-active-surface,
+      color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
+    );
+    background-image: none;
+    box-shadow: var(--ui-pressed);
+}
+:scope:active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+    scale: var(--ui-icon-button-active-scale, var(--ui-press-scale, 0.96));
+}
+:is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]):where([data-hn-ui-icon-button]) {
+    cursor: progress;
+}
+.content:where([data-hn-ui-icon-button]) {
+    display: inline-flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+}
+:is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"])
+    .content:where([data-hn-ui-icon-button]) {
+    display: none !important;
+}
+@media (prefers-reduced-motion: reduce) {
+:scope[data-ui-icon-button-state~="anticipatory"]
+      .content:where([data-hn-ui-icon-button]) {
+      transition: none;
+}
+}
+:scope:focus-visible:where([data-hn-ui-icon-button]) {
+    outline: none;
+    box-shadow: var(--ui-focus-halo);
+}
+:scope[data-appearance="outline"]:focus-visible:where([data-hn-ui-icon-button]) {
+    box-shadow:
+      var(--ui-action-shadow, var(--_ui-action-shadow)),
+      var(--ui-focus-halo);
+}
+:scope[data-appearance="solid"]:focus-visible:where([data-hn-ui-icon-button]) {
+    box-shadow:
+      var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--ui-focus-halo);
+}
+: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);
+}
+:scope[data-appearance="outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button]) {
+    box-shadow:
+      var(--ui-pressed),
+      var(--ui-focus-halo);
+}
+@media (forced-colors: active) {
+:scope[data-appearance="outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button]) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: calc(-2 * var(--ui-focus-width));
+}
+:scope[data-appearance="outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button]) {
+      outline-offset: var(--ui-focus-width);
+}
+}
+:scope:disabled:where([data-hn-ui-icon-button]) {
+    border-color: var(--ui-disabled-border);
+    background-color: var(--ui-disabled-surface);
+    color: var(--ui-disabled-text);
+    filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
+    opacity: var(--ui-icon-button-disabled-opacity, 1);
+    cursor: not-allowed;
+    box-shadow: none;
+    background-image: none;
+}
+:scope[data-appearance="ghost"]:disabled:where([data-hn-ui-icon-button]) {
+    border-color: transparent;
+}
+:scope:where([data-hn-ui-icon-button]) {
+    --_icon-button-icon-default: var(--ui-icon-size-md);
+    /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
+       defaults, which its own --ui-icon-* hooks still override. */
+    --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+    --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+}
+:scope[data-ui-icon-button-state~="size=sm"]:where([data-hn-ui-icon-button]) {
+    --_icon-button-icon-default: var(--ui-icon-size-sm);
+}
+:scope[data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button]) {
+    --_icon-button-icon-default: var(--ui-icon-size-lg);
+}
+:where(:not([data-hn-ui-icon-button])):is(svg) {
+    inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+    block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
+    flex-shrink: 0;
+    stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+}
+:scope[hidden]:where([data-hn-ui-icon-button]) {
+    display: none !important;
+}
+}
+
+@scope (.ui-number-input) to ([data-hn]) {
+:scope {
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-1) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-inline-size: 0;
+}
+:scope[hidden] {
+    display: none !important;
+}
+}
+@scope ([data-slotted~="ui-number-input"]:not([data-hn])) to ([data-hn], [data-slotted]) {
+:where(.ui-number-input):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-number-input"]))) {
+    display: flex !important;
+    align-items: center !important;
+    gap: var(--ui-space-1) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-inline-size: 0;
+}
+:where(.ui-number-input)[hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-number-input"]))) {
+    display: none !important;
+}
+}
+
+@scope (.ui-curve-editor) to ([data-hn]) {
+:scope {
+    display: grid !important;
+    gap: var(--ui-space-3) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-inline-size: 0;
+}
+.plot-frame {
+    box-sizing: border-box !important;
+    display: block !important;
+    block-size: 12rem;
+    padding: max(var(--ui-space-4), 0.75rem, calc(var(--ui-control-min-block-size) / 2)) !important;
+    margin: 0 !important;
+    border: var(--ui-border-width) solid var(--ui-control-border);
+    border-radius: var(--ui-field-radius, var(--ui-radius-md));
+    background: var(--ui-control-surface, var(--ui-surface));
+}
+.plot {
+    position: relative;
+    display: block !important;
+    inline-size: 100%;
+    block-size: 100%;
+}
+svg {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+}
+path {
+    fill: none;
+    stroke: var(--ui-accent-solid);
+    stroke-width: 2;
+    vector-effect: non-scaling-stroke;
+}
+.guide {
+    stroke: var(--ui-control-border);
+    stroke-width: 1;
+}
+.handle {
+    position: absolute;
+    left: 25%;
+    top: 63.333%;
+    translate: -50% -50%;
+    inline-size: max(1.5rem, var(--ui-control-min-block-size));
+    block-size: max(1.5rem, var(--ui-control-min-block-size));
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    color: var(--ui-text-primary);
+    touch-action: none;
+    cursor: grab;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.second {
+    top: 33.333%;
+}
+.handle::after {
+    content: "";
+    position: absolute;
+    inset: 25%;
+    border: var(--ui-border-width) solid var(--ui-accent-solid);
+    background: var(--ui-surface-raised);
+    border-radius: 50%;
+    box-shadow: var(--ui-shadow-xs);
+}
+.handle::before {
+    content: "";
+    position: absolute;
+    inset: 40%;
+    background: var(--ui-accent-solid);
+    border-radius: 50%;
+    z-index: 1;
+}
+.handle:focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-control-focus, var(--ui-accent-solid));
+    outline-offset: var(--ui-space-1);
+}
+.handle:disabled {
+    cursor: not-allowed;
+}
+.coordinates {
+    display: grid !important;
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+    gap: var(--ui-space-2) !important;
+}
+.coordinate {
+    display: grid !important;
+    gap: var(--ui-space-1) !important;
+    font-size: var(--ui-font-size-sm);
+}
+output {
+    overflow-wrap: anywhere;
+    font-family: var(--ui-font-mono, monospace);
+    font-size: var(--ui-font-size-sm);
+}
+:scope[hidden] {
+    display: none !important;
+}
+}
+
+/* One term and its value in a ui-description-list, laid out by the list's layout. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-description-item) to ([data-hn]) {
+:scope:where([data-hn-ui-description-item]) {
+    display: var(--_ui-description-display, grid) !important;
+    grid-column: var(--_ui-description-column, 1 / -1);
+    grid-template-columns: subgrid;
+    flex-direction: column !important;
+    align-items: var(--_ui-description-align, baseline) !important;
+    gap: var(--ui-space-1) var(--ui-space-6) !important;
+    min-inline-size: 0;
+    padding: var(--_ui-description-padding, 0) !important;
+    border-width: var(--_ui-description-border-width, 0);
+    border-style: solid;
+    border-color: var(--_ui-description-border-color, var(--ui-border-default));
+    border-radius: var(--ui-radius-md);
+    font-size: var(--ui-font-size-sm);
+}
+dt:where([data-hn-ui-description-item]) {
+    color: var(--ui-text-muted);
+}
+dd:where([data-hn-ui-description-item]) {
+    margin: 0 !important;
+    min-inline-size: 0;
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-medium);
+    font-size: var(--_ui-description-value-size, inherit);
+    text-align: start;
+    overflow-wrap: anywhere;
+}
+:scope[hidden]:where([data-hn-ui-description-item]) {
+    display: none !important;
+}
+}
+
+/* Named values: a term and what it is, for each item (ui-description-item). */
+/* Rows line every term up in one column and every value in the next, through subgrid. */
+
+/* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+   private properties, which cross into each item. */
+
+/* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+   than that many fit. */
+
+/* Compact takes each layout's closer spacing. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-description-list) to ([data-hn]) {
+:scope:where([data-hn-ui-description-list]) {
+    --_gap: var(--ui-space-2);
+    --_gap-compact: var(--ui-space-1);
+    --_column-gap: var(--ui-space-6);
+    --_min: 10rem;
+    --_track: var(--_min);
+    --_tile-padding: var(--ui-space-3);
+    display: grid !important;
+    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
+    gap: var(--_gap) var(--_column-gap) !important;
+    min-inline-size: 0;
+    margin: 0 !important;
+}
+:scope[data-ui-description-list-state~="layout=stacked"]:where([data-hn-ui-description-list]),:scope[data-ui-description-list-state~="layout=grid"]:where([data-hn-ui-description-list]),:scope[data-ui-description-list-state~="layout=tiles"]:where([data-hn-ui-description-list]) {
+    --_ui-description-display: flex;
+    --_ui-description-column: auto;
+    --_ui-description-align: stretch;
+    --_gap: var(--ui-space-4);
+    --_gap-compact: var(--ui-space-2);
+    grid-template-columns: minmax(0, 1fr);
+}
+:scope[data-ui-description-list-state~="layout=grid"]:where([data-hn-ui-description-list]),:scope[data-ui-description-list-state~="layout=tiles"]:where([data-hn-ui-description-list]) {
+    inline-size: 100%;
+    grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
+}
+:scope[data-ui-description-list-state~="layout=tiles"]:where([data-hn-ui-description-list]) {
+    --_ui-description-align: flex-start;
+    --_ui-description-value-size: var(--ui-font-size-lg);
+    --_ui-description-padding: var(--_tile-padding);
+    --_ui-description-border-width: var(--ui-border-width);
+    --_ui-description-border-color: var(--ui-border-strong);
+    --_gap: var(--ui-space-3);
+    --_gap-compact: var(--ui-space-2);
+    --_column-gap: var(--_gap);
+}
+:scope[data-ui-description-list-state~="columns=2"]:where([data-hn-ui-description-list]) {
+    --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
+}
+:scope[data-ui-description-list-state~="columns=3"]:where([data-hn-ui-description-list]) {
+    --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
+}
+:scope[data-ui-description-list-state~="columns=4"]:where([data-hn-ui-description-list]) {
+    --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
+}
+:scope[data-ui-description-list-state~="density=compact"]:where([data-hn-ui-description-list]) {
+    --_gap: var(--_gap-compact);
+    --_tile-padding: var(--ui-space-2);
+}
+:scope[hidden]:where([data-hn-ui-description-list]) {
+    display: none !important;
+}
+}
+
+/* The controller sets each fade length from overflow and scroll position. The mask blends
+       into whatever is behind the area without needing to know its colour. Before upgrade, its
+       zero-length defaults leave the authored scroll area fully visible. */
+
+/* Trim projected edges without changing spacing inside an item. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-scroll-area) to ([data-hn]) {
+:scope[data-ui-scroll-area-state~="fill"]:where([data-hn-ui-scroll-area]) {
+    flex: 1;
+}
+:scope:where([data-hn-ui-scroll-area]) {
+    display: block !important;
+    box-sizing: border-box !important;
+    min-block-size: 0;
+    min-inline-size: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    --_ui-scroll-fade-direction: to bottom;
+    --_ui-scroll-fade-inline: to right;
+    --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+    mask-image: linear-gradient(
+      var(--_ui-scroll-fade-direction),
+      transparent,
+      #000 var(--_ui-scroll-fade-start),
+      #000 calc(100% - var(--_ui-scroll-fade-end)),
+      transparent
+    );
+}
+.content:where([data-hn-ui-scroll-area]) {
+    display: flow-root !important;
+}
+:scope[data-ui-scroll-area-state~="trim"]
+    .content
+    > :where(:not([data-hn-ui-scroll-area])):is(:first-child) {
+    margin-block-start: 0 !important;
+}
+:scope[data-ui-scroll-area-state~="trim"]
+    .content
+    > :where(:not([data-hn-ui-scroll-area])):is(:last-child) {
+    margin-block-end: 0 !important;
+}
+:scope[data-ui-scroll-area-state~="orientation=horizontal"]:where([data-hn-ui-scroll-area]) {
+    overflow-x: auto;
+    overflow-y: hidden;
+    --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
+}
+:scope:dir(rtl):where([data-hn-ui-scroll-area]) {
+    --_ui-scroll-fade-inline: to left;
+}
+:scope[data-ui-scroll-area-state~="size=sm"]:where([data-hn-ui-scroll-area]) {
+    max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
+}
+:scope[data-ui-scroll-area-state~="size=md"]:where([data-hn-ui-scroll-area]) {
+    max-block-size: 20rem;
+}
+:scope[data-ui-scroll-area-state~="size=lg"]:where([data-hn-ui-scroll-area]) {
+    max-block-size: 30rem;
+}
+:scope[data-ui-scroll-area-state~="padding=xs"]:where([data-hn-ui-scroll-area]) {
+    padding: var(--ui-space-2) !important;
+}
+:scope[data-ui-scroll-area-state~="padding=sm"]:where([data-hn-ui-scroll-area]) {
+    padding: var(--ui-space-3) !important;
+}
+:scope[data-ui-scroll-area-state~="padding=md"]:where([data-hn-ui-scroll-area]) {
+    padding: var(--ui-space-5) !important;
+}
+:scope[data-ui-scroll-area-state~="padding=lg"]:where([data-hn-ui-scroll-area]) {
+    padding: var(--ui-space-6) !important;
+}
+:scope[hidden]:where([data-hn-ui-scroll-area]) {
+    display: none !important;
+}
+}
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-dialog-duration {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-surface {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-border {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-radius {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-shadow {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-max-width {
+  syntax: "*";
+  inherits: false;
+}
+@property --ui-dialog-viewport-gap {
+  syntax: "*";
+  inherits: false;
+}
+
+/* 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. */
+
 /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
 /* Alerts have no close target to add height above the title. */
@@ -3749,19 +4514,20 @@ dd:where([data-hn-ui-description-item]) {
 /* A CSS-drawn X. */
 
 /* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-c23cce38 {
+@keyframes ui-dialog-enter-ea8be62a {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-c23cce38 {
+@keyframes ui-dialog-backdrop-enter-ea8be62a {
 from {
     background-color: transparent;
 }
 }
 @scope (.ui-dialog) to ([data-hn]) {
 :scope:where([data-hn-ui-dialog]) {
+    --_ui-material-scale: 1;
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -3797,13 +4563,95 @@ from {
       display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
+:scope:where([data-hn-ui-dialog]) {
+    --_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-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:
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --ui-dialog-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --ui-dialog-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        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));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+:scope:where([data-hn-ui-dialog]) {
+      background: var(--_ui-material-content-color);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+:scope:where([data-hn-ui-dialog]) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
+@media (forced-colors: active) {
+:scope:where([data-hn-ui-dialog]) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
 :scope[open]:where([data-hn-ui-dialog]) {
     display: flex !important;
     visibility: visible;
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-c23cce38 var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-ea8be62a var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -3924,7 +4772,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 :scope[open]:modal:where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-c23cce38 var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-ea8be62a var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {
@@ -3935,6 +4783,7 @@ footer:empty:where([data-hn-ui-dialog]) {
 }
 @scope ([data-slotted~="ui-dialog"]:not([data-hn])) to ([data-hn], [data-slotted]) {
 :where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    --_ui-material-scale: 1;
     /* Hooks do not inherit, so the parts below read them from the root. */
     --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -3970,13 +4819,95 @@ footer:empty:where([data-hn-ui-dialog]) {
       display var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete,
       overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
 }
+:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+    --_ui-material-glassiness: 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-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:
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --ui-dialog-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --ui-dialog-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        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));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+      background: var(--_ui-material-content-color);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
+@media (forced-colors: active) {
+:where(.ui-dialog):where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
 :where(.ui-dialog)[open]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
     display: flex !important;
     visibility: visible;
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-c23cce38 var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-ea8be62a var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :where(.ui-dialog)[data-ui-dialog-state~="size=sm"]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog]) {
@@ -4105,7 +5036,7 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
 }
 :where(.ui-dialog)[open]:modal:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
     background-color: var(--ui-overlay-backdrop);
-    animation: ui-dialog-backdrop-enter-c23cce38 var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-ea8be62a var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :where(.ui-dialog)[open][data-ui-backdrop-hidden]:where(:scope, :not([data-hn], [data-slotted]:not([data-slotted~="ui-dialog"]))):where([data-hn-ui-dialog])::backdrop {
@@ -4454,6 +5385,9 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
    still win. */
 
 /* 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. */
 @scope (.ui-menu) to ([data-hn]) {
 :scope[data-ui-menu-state~="density=compact"]:where([data-hn-ui-menu]) {
     --_ui-default-menu-item-padding-block: var(--ui-space-1);
@@ -4478,6 +5412,7 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
     --_ui-default-menu-icon-display: inline-flex;
 }
 :scope:where([data-hn-ui-menu]) {
+    --_ui-material-scale: 0.28;
     --_ui-menu-surface: var(--ui-menu-surface);
     --_ui-menu-border: var(--ui-menu-border);
     --_ui-menu-radius: var(--ui-menu-radius);
@@ -4521,6 +5456,88 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
     max-block-size: inherit;
     overflow: auto;
 }
+:scope:not([inline]) .surface:where([data-hn-ui-menu]) {
+    --_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-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:
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --_ui-menu-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --_ui-menu-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        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));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+:scope:not([inline]) .surface:where([data-hn-ui-menu]) {
+      background: var(--_ui-material-content-color);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+:scope:not([inline]) .surface:where([data-hn-ui-menu]) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
+@media (forced-colors: active) {
+:scope:not([inline]) .surface:where([data-hn-ui-menu]) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
 .surface hr:where([data-hn-ui-menu]) {
     align-self: stretch;
     block-size: 0;
@@ -4983,1051 +6000,607 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     gap: var(--ui-space-1) !important;
 }
 .label-action:where([data-hn-ui-form-field]) {
-    display: flex !important;
-    align-items: unsafe center !important;
-    block-size: 1lh;
-}
-.label-action:not(:has(> *)):where([data-hn-ui-form-field]) {
-    display: none !important;
-}
-.help:where([data-hn-ui-form-field]) {
-    color: var(--_ui-form-field-help-text, var(--ui-text-muted));
-    font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
-    line-height: var(--ui-line-height-md);
-}
-.help > :where(:not([data-hn-ui-form-field])):is(*) {
-    min-block-size: var(--_ui-form-field-help-min-block-size, 0);
-}
-.error:where([data-hn-ui-form-field]) {
-    display: none !important;
-}
-:scope[data-ui-form-field-state~="invalid"] .error:where([data-hn-ui-form-field]) {
-    display: contents !important;
-}
-.error:where([data-hn-ui-form-field]),:where(:not([data-hn-ui-form-field])):is([role="alert"]) {
-    color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
-    font-size: var(--ui-font-size-sm);
-}
-:scope[hidden]:where([data-hn-ui-form-field]) {
-    display: none !important;
-}
-}
-
-@property --ui-input-group-radius {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-group-invalid-border {
-  syntax: "*";
-  inherits: false;
-}
-@property --ui-input-group-invalid-focus-shadow {
-  syntax: "*";
-  inherits: false;
-}
-/* An input with fixed text before or after it, such as a domain after a site's name
-   ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
-   focus ring around the input and its affixes together; the input inside drops its own through
-   its custom properties, so it is still the one ui-input, with its form behaviour intact. The
-   affixes are plain text beside the input, so name the input with a label that says what the
-   whole value is. The action slot takes one button at the end, inside the border, for the one
-   thing the field is for ("Continue" after a site's address), so it reads as the field's action
-   and not the form's. */
-
-/* The frame takes its input's size, so a small group lines up with small buttons and fields. */
-
-/* The ring shows when the field's input would show its own: when it is focus-visible, which a
-   text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-
-/* Forced colors drop box shadows, so the focus ring becomes an outline. */
-
-/* Fixed text is part of the value, but should not look editable. */
-
-/* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
-   small button sits inside it with the difference split evenly, and the field keeps its height. */
-
-/* Multiline text owns the first row; its action remains inside the same frame below it. */
-
-/* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
-   so a translated label or pending indicator cannot cover what the person types. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-input-group) to ([data-hn]) {
-:scope:where([data-hn-ui-input-group]) {
-    /* The group's own border and height stand for the input's, so the group is a lone Input's height.
-       Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
-    --_ui-default-input-border-width: 0;
-    --_ui-default-input-min-block-size: 0;
-    --_ui-default-input-border: transparent;
-    --_ui-default-input-border-hover: transparent;
-    --_ui-default-input-focus-border: transparent;
-    --_ui-default-input-invalid-border: transparent;
-    --_ui-default-input-invalid-focus-shadow: none;
-    --_ui-default-input-shadow: none;
-    --_ui-default-input-focus-shadow: none;
-    --_ui-default-input-focus-outline: none;
-    --_ui-default-input-radius: 0;
-    --_ui-default-input-surface: transparent;
-    --_ui-default-textarea-border-width: 0;
-    --_ui-default-textarea-border: transparent;
-    --_ui-default-textarea-border-hover: transparent;
-    --_ui-default-textarea-focus-border: transparent;
-    --_ui-default-textarea-invalid-border: transparent;
-    --_ui-default-textarea-invalid-focus-shadow: none;
-    --_ui-default-textarea-shadow: none;
-    --_ui-default-textarea-focus-shadow: none;
-    --_ui-default-textarea-focus-outline: none;
-    --_ui-default-textarea-radius: 0;
-    --_ui-default-textarea-surface: transparent;
-
-    display: flex !important;
-    align-items: stretch !important;
-    box-sizing: border-box !important;
-    inline-size: 100%;
-    min-inline-size: 0;
-    min-block-size: var(--ui-control-size-md);
-    /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
-    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-    border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
-    background: var(--ui-control-surface, var(--ui-surface-elevated));
-    box-shadow: var(--ui-control-inset);
-    overflow: hidden;
-    /* A press anywhere in the frame focuses the input. */
-    cursor: text;
-    transition:
-      border-color var(--ui-motion-fast) var(--ui-motion-ease),
-      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
-}
-:scope[data-ui-input-group-state~="variant=subtle"]:where([data-hn-ui-input-group]) {
-    border-color: var(--ui-border);
-    background: var(--ui-surface-muted);
-    box-shadow: none;
-}
-:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group]) {
-    min-block-size: var(--ui-control-size-sm);
-}
-:scope:has(.field [data-ui-input-state~="size=lg"]):where([data-hn-ui-input-group]) {
-    min-block-size: var(--ui-control-size-lg);
-}
-@media (pointer: coarse) {
-:scope:where([data-hn-ui-input-group]) {
-      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-}
-:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group]) {
-      min-block-size: var(--ui-control-min-block-size);
-}
-}
-:scope:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))):where([data-hn-ui-input-group]) {
-    border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
-}
-:scope:has(.field :is(input, textarea):focus-visible):where([data-hn-ui-input-group]) {
-    border-color: var(--ui-control-focus, var(--ui-accent-solid));
-    box-shadow:
-      var(--ui-control-inset),
-      var(--ui-control-focus-halo-shadow);
-}
-:scope:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):where([data-hn-ui-input-group]) {
-    border-color: var(
-      --ui-input-group-invalid-border,
-      var(--ui-field-danger, var(--ui-danger-solid))
-    );
-}
-:scope:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible):where([data-hn-ui-input-group]) {
-    box-shadow: var(
-      --ui-input-group-invalid-focus-shadow,
-      var(--ui-control-inset),
-      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-        in srgb,
-        var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-        transparent
-      )
-    );
-}
-@media (forced-colors: active) {
-:scope:has(:is(input, textarea):focus-visible):where([data-hn-ui-input-group]) {
-      outline: var(--ui-focus-width) solid Highlight;
-      outline-offset: var(--ui-border-width);
-}
-}
-:scope[data-ui-input-group-state~="disabled"]:where([data-hn-ui-input-group]),:scope:has(:is(input, textarea):disabled):where([data-hn-ui-input-group]) {
-    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-    box-shadow: none;
-    cursor: not-allowed;
-}
-.field:where([data-hn-ui-input-group]) {
-    display: flex !important;
-    flex: 1;
-    min-inline-size: 0;
-}
-.affix:where([data-hn-ui-input-group]) {
-    display: inline-flex !important;
-    flex: none;
-    align-items: center !important;
-    padding-inline: var(--ui-space-2) !important;
-    color: var(--ui-text-muted);
-    font-family: var(--ui-font-family-mono);
-    font-size: var(--ui-font-size-sm);
-    white-space: nowrap;
-}
-.affix:has([slot="prefix"]):where([data-hn-ui-input-group]),.affix:has([slot="suffix"]):where([data-hn-ui-input-group]) {
-    background: var(--ui-surface-muted);
-}
-.affix:has([slot="prefix"]):where([data-hn-ui-input-group]) {
-    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
-}
-.affix:has([slot="suffix"]):where([data-hn-ui-input-group]) {
-    border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
-}
-:scope[data-ui-input-group-state~="prefixKind=icon"]:where([data-hn-ui-input-group]) {
-    --_ui-default-input-padding-inline-start: var(--ui-space-2);
-}
-:scope[data-ui-input-group-state~="prefixKind=icon"]
-    .affix:first-child:where([data-hn-ui-input-group]) {
-    padding-inline-end: 0 !important;
-    border-inline-end: 0;
-    background: transparent;
-}
-.action:where([data-hn-ui-input-group]) {
-    display: flex !important;
-    flex: none;
-    align-items: center !important;
-    padding-inline: var(--ui-space-1) !important;
-}
-:scope[data-ui-input-group-state~="multiline"]:where([data-hn-ui-input-group]) {
-    display: grid !important;
-    grid-template-columns: auto minmax(0, 1fr) auto;
-}
-:scope[data-ui-input-group-state~="multiline"] .field:where([data-hn-ui-input-group]) {
-    grid-column: 2;
-}
-:scope[data-ui-input-group-state~="multiline"] .action:where([data-hn-ui-input-group]) {
-    grid-column: 1 / -1;
-    justify-content: end !important;
-    padding: var(--ui-space-2) !important;
-    padding-block-start: 0 !important;
-}
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]:where([data-hn-ui-input-group]) {
-    --_ui-default-textarea-padding-inline-end: calc(
-      var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
-    );
-}
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .field:where([data-hn-ui-input-group]) {
-    grid-row: 1;
-}
-:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
-    .action:where([data-hn-ui-input-group]) {
-    grid-column: 2;
-    grid-row: 1;
-    align-self: start;
-    justify-self: end;
-    padding: var(--ui-space-2) !important;
-}
-.affix:empty:where([data-hn-ui-input-group]),.action:empty:where([data-hn-ui-input-group]) {
-    display: none !important;
-}
-:scope[hidden]:where([data-hn-ui-input-group]) {
-    display: none !important;
-}
-}
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-textarea-border-width {
-  syntax: "*";
-  inherits: false;
+    display: flex !important;
+    align-items: unsafe center !important;
+    block-size: 1lh;
 }
-@property --ui-textarea-border {
-  syntax: "*";
-  inherits: false;
+.label-action:not(:has(> *)):where([data-hn-ui-form-field]) {
+    display: none !important;
 }
-@property --ui-textarea-border-hover {
-  syntax: "*";
-  inherits: false;
+.help:where([data-hn-ui-form-field]) {
+    color: var(--_ui-form-field-help-text, var(--ui-text-muted));
+    font-size: var(--_ui-form-field-help-font-size, var(--ui-font-size-sm));
+    line-height: var(--ui-line-height-md);
 }
-@property --ui-textarea-focus-border {
-  syntax: "*";
-  inherits: false;
+.help > :where(:not([data-hn-ui-form-field])):is(*) {
+    min-block-size: var(--_ui-form-field-help-min-block-size, 0);
 }
-@property --ui-textarea-focus-outline {
-  syntax: "*";
-  inherits: false;
+.error:where([data-hn-ui-form-field]) {
+    display: none !important;
 }
-@property --ui-textarea-surface {
-  syntax: "*";
-  inherits: false;
+:scope[data-ui-form-field-state~="invalid"] .error:where([data-hn-ui-form-field]) {
+    display: contents !important;
 }
-@property --ui-textarea-focus-shadow {
-  syntax: "*";
-  inherits: false;
+.error:where([data-hn-ui-form-field]),:where(:not([data-hn-ui-form-field])):is([role="alert"]) {
+    color: var(--_ui-form-field-danger, var(--ui-field-danger, var(--ui-danger)));
+    font-size: var(--ui-font-size-sm);
 }
-@property --ui-textarea-invalid-border {
-  syntax: "*";
-  inherits: false;
+:scope[hidden]:where([data-hn-ui-form-field]) {
+    display: none !important;
 }
-@property --ui-textarea-invalid-focus-shadow {
-  syntax: "*";
-  inherits: false;
 }
-@property --ui-textarea-radius {
+
+@property --ui-input-group-radius {
   syntax: "*";
   inherits: false;
 }
-@property --ui-textarea-shadow {
+@property --ui-input-group-invalid-border {
   syntax: "*";
   inherits: false;
 }
-@property --ui-textarea-padding-inline-end {
+@property --ui-input-group-invalid-focus-shadow {
   syntax: "*";
   inherits: false;
 }
+/* An input with fixed text before or after it, such as a domain after a site's name
+   ("acme" + ".example.com") or slashes around a path. The group draws the field's border and
+   focus ring around the input and its affixes together; the input inside drops its own through
+   its custom properties, so it is still the one ui-input, with its form behaviour intact. The
+   affixes are plain text beside the input, so name the input with a label that says what the
+   whole value is. The action slot takes one button at the end, inside the border, for the one
+   thing the field is for ("Continue" after a site's address), so it reads as the field's action
+   and not the form's. */
 
-/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
+/* The frame takes its input's size, so a small group lines up with small buttons and fields. */
 
-/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
+/* The ring shows when the field's input would show its own: when it is focus-visible, which a
+   text input is for a pointer as well as a keyboard. A focused action button draws its own. */
 
-/* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
+/* Forced colors drop box shadows, so the focus ring becomes an outline. */
+
+/* Fixed text is part of the value, but should not look editable. */
+
+/* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
+   small button sits inside it with the difference split evenly, and the field keeps its height. */
+
+/* Multiline text owns the first row; its action remains inside the same frame below it. */
+
+/* The same textarea keeps its full resizeable box. Its text reserves the action's live width,
+   so a translated label or pending indicator cannot cover what the person types. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-textarea) to ([data-hn]) {
-:scope {
+@scope (.ui-input-group) to ([data-hn]) {
+:scope:where([data-hn-ui-input-group]) {
+    /* The group's own border and height stand for the input's, so the group is a lone Input's height.
+       Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
+    --_ui-default-input-border-width: 0;
+    --_ui-default-input-min-block-size: 0;
+    --_ui-default-input-border: transparent;
+    --_ui-default-input-border-hover: transparent;
+    --_ui-default-input-focus-border: transparent;
+    --_ui-default-input-invalid-border: transparent;
+    --_ui-default-input-invalid-focus-shadow: none;
+    --_ui-default-input-shadow: none;
+    --_ui-default-input-focus-shadow: none;
+    --_ui-default-input-focus-outline: none;
+    --_ui-default-input-radius: 0;
+    --_ui-default-input-surface: transparent;
+    --_ui-default-textarea-border-width: 0;
+    --_ui-default-textarea-border: transparent;
+    --_ui-default-textarea-border-hover: transparent;
+    --_ui-default-textarea-focus-border: transparent;
+    --_ui-default-textarea-invalid-border: transparent;
+    --_ui-default-textarea-invalid-focus-shadow: none;
+    --_ui-default-textarea-shadow: none;
+    --_ui-default-textarea-focus-shadow: none;
+    --_ui-default-textarea-focus-outline: none;
+    --_ui-default-textarea-radius: 0;
+    --_ui-default-textarea-surface: transparent;
+
+    display: flex !important;
+    align-items: stretch !important;
     box-sizing: border-box !important;
-    display: inline-block !important;
     inline-size: 100%;
     min-inline-size: 0;
-    min-block-size: calc(3rem * 2);
-    margin: 0 !important;
-    --_padding-block: var(--ui-space-2);
-    padding: var(--ui-space-2) var(--ui-space-3) !important;
-    padding-inline-end: var(
-      --ui-textarea-padding-inline-end,
-      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3))
-    ) !important;
-    appearance: none;
-    resize: vertical;
-    border: var(
-      --ui-textarea-border-width,
-      var(--_ui-default-textarea-border-width, var(--ui-border-width))
-    ) solid
-      var(
-        --ui-textarea-border,
-        var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong)))
-      );
-    border-radius: var(
-      --ui-textarea-radius,
-      var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)))
-    );
-    background: var(
-      --ui-textarea-surface,
-      var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
-    );
-    color: var(--ui-text-primary);
-    font: inherit;
-    line-height: var(--ui-line-height-md);
-    box-shadow: var(
-      --ui-textarea-shadow,
-      var(--_ui-default-textarea-shadow, var(--ui-control-inset))
-    );
+    min-block-size: var(--ui-control-size-md);
+    /* The frame reads the shared control tokens with a lone Input's fallbacks, so the two match. */
+    border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
+    border-radius: var(--ui-input-group-radius, var(--ui-field-radius, var(--ui-radius-md)));
+    background: var(--ui-control-surface, var(--ui-surface-elevated));
+    box-shadow: var(--ui-control-inset);
+    overflow: hidden;
+    /* A press anywhere in the frame focuses the input. */
+    cursor: text;
     transition:
       border-color var(--ui-motion-fast) var(--ui-motion-ease),
-      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
-      background-color var(--ui-motion-fast) var(--ui-motion-ease);
-}
-:scope::selection {
-    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
-    color: inherit;
-}
-:scope::placeholder {
-    color: var(--ui-control-placeholder, var(--ui-text-secondary));
-    opacity: 1;
-}
-:scope:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
-    border-color: var(
-      --ui-textarea-border-hover,
-      var(
-        --_ui-default-textarea-border-hover,
-        var(--ui-control-border-hover, var(--ui-text-secondary))
-      )
-    );
-}
-:scope:focus-visible {
-    border-color: var(
-      --ui-textarea-focus-border,
-      var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
-    );
-    outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
-    box-shadow: var(
-      --ui-textarea-focus-shadow,
-      var(
-        --_ui-default-textarea-focus-shadow,
-        var(--ui-control-inset),
-        var(--ui-control-focus-halo-shadow)
-      )
-    );
-}
-:scope[aria-invalid="true"],:scope:is(:user-invalid, [data-user-invalid]) {
-    border-color: var(
-      --ui-textarea-invalid-border,
-      var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
-    );
-}
-:scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
-    box-shadow: var(
-      --ui-textarea-invalid-focus-shadow,
-      var(
-        --_ui-default-textarea-invalid-focus-shadow,
-        var(--ui-control-inset),
-        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-          in srgb,
-          var(
-            --ui-textarea-invalid-border,
-            var(
-              --_ui-default-textarea-invalid-border,
-              var(--ui-field-danger, var(--ui-danger-solid))
-            )
-          ) 22%,
-          transparent
-        )
-      )
-    );
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-:scope:disabled {
-    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
-    color: var(--ui-disabled-text);
+:scope[data-ui-input-group-state~="variant=subtle"]:where([data-hn-ui-input-group]) {
+    border-color: var(--ui-border);
+    background: var(--ui-surface-muted);
     box-shadow: none;
-    cursor: not-allowed;
-}
-:scope[data-ui-textarea-state~="size=sm"] {
-    --_padding-block: var(--ui-space-1);
-    padding: var(--ui-space-1) var(--ui-space-2) !important;
-    padding-inline-end: var(
-      --ui-textarea-padding-inline-end,
-      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2))
-    ) !important;
-    font-size: var(--ui-font-size-sm);
-}
-:scope[data-ui-textarea-state~="size=lg"] {
-    --_padding-block: var(--ui-space-3);
-    padding: var(--ui-space-3) var(--ui-space-4) !important;
-    padding-inline-end: var(
-      --ui-textarea-padding-inline-end,
-      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4))
-    ) !important;
-    font-size: var(--ui-font-size-md);
-}
-:scope[data-ui-textarea-state~="maxRows"] {
-    max-block-size: calc(
-      max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) +
-        2px
-    );
 }
-@supports (field-sizing: content) {
-:scope[data-ui-textarea-state~="autosize"] {
-      field-sizing: content;
-      min-block-size: calc(
-        var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px
-      );
+:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group]) {
+    min-block-size: var(--ui-control-size-sm);
 }
+:scope:has(.field [data-ui-input-state~="size=lg"]):where([data-hn-ui-input-group]) {
+    min-block-size: var(--ui-control-size-lg);
 }
 @media (pointer: coarse) {
-:scope[data-ui-textarea-state~="size=sm"] {
-      font-size: inherit;
+:scope:where([data-hn-ui-input-group]) {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
 }
+:scope:has(.field [data-ui-input-state~="size=sm"]):where([data-hn-ui-input-group]) {
+      min-block-size: var(--ui-control-min-block-size);
 }
-:scope[hidden] {
-    display: none !important;
 }
+:scope:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))):where([data-hn-ui-input-group]) {
+    border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
-
-/* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
-       wrapping into several lines, and a fade at each edge that has more to show says so. */
-
-/* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
-   strip, so a floating toolbar's border and shadow stay whole. */
-
-/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
-
-/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
-
-/* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-editor-toolbar) to ([data-hn]) {
-:scope:where([data-hn-ui-editor-toolbar]) {
-    position: sticky;
-    top: 0;
-    z-index: var(--ui-editor-toolbar-z-index, 10);
-    display: flex !important;
-    align-items: center !important;
-    padding: var(--ui-editor-toolbar-padding-block, 6px)
-      var(--ui-editor-toolbar-padding-inline, 12px) !important;
-    min-height: var(--ui-editor-toolbar-min-height, 48px);
-    background: var(--ui-editor-toolbar-surface, var(--ui-surface));
-    border-bottom: var(--ui-border-width) solid
-      var(--ui-editor-toolbar-border, var(--ui-border-divider));
+:scope:has(.field :is(input, textarea):focus-visible):where([data-hn-ui-input-group]) {
+    border-color: var(--ui-control-focus, var(--ui-accent-solid));
+    box-shadow:
+      var(--ui-control-inset),
+      var(--ui-control-focus-halo-shadow);
 }
-.strip:where([data-hn-ui-editor-toolbar]) {
-    display: flex !important;
-    flex: 1 1 auto;
-    align-items: center !important;
-    justify-content: flex-start !important;
-    gap: var(--ui-editor-toolbar-gap, 2px) !important;
-    min-width: 0;
-    overflow-x: auto;
-    overflow-y: hidden;
-    overscroll-behavior-inline: contain;
-    scrollbar-width: none;
+:scope:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):where([data-hn-ui-input-group]) {
+    border-color: var(
+      --ui-input-group-invalid-border,
+      var(--ui-field-danger, var(--ui-danger-solid))
+    );
 }
-.strip:where([data-hn-ui-editor-toolbar])::-webkit-scrollbar {
-    display: none !important;
+:scope:has(:is(input, textarea):is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible):where([data-hn-ui-input-group]) {
+    box-shadow: var(
+      --ui-input-group-invalid-focus-shadow,
+      var(--ui-control-inset),
+      0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+        in srgb,
+        var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
+        transparent
+      )
+    );
 }
-.strip > :where(:not([data-hn-ui-editor-toolbar])):is(*) {
-    flex: 0 0 auto;
+@media (forced-colors: active) {
+:scope:has(:is(input, textarea):focus-visible):where([data-hn-ui-input-group]) {
+      outline: var(--ui-focus-width) solid Highlight;
+      outline-offset: var(--ui-border-width);
 }
-.strip:where([data-hn-ui-editor-toolbar]) {
-    --_ui-scroll-fade-direction: to right;
-    --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
-    mask-image: linear-gradient(
-      var(--_ui-scroll-fade-direction),
-      transparent,
-      #000 var(--_ui-scroll-fade-start),
-      #000 calc(100% - var(--_ui-scroll-fade-end)),
-      transparent
-    );
-    animation:
-      ui-scroll-fade-start linear,
-      ui-scroll-fade-start-hold linear,
-      ui-scroll-fade-end-hold linear,
-      ui-scroll-fade-end linear;
-    animation-timeline: scroll(self inline);
-    animation-range:
-      0 var(--_ui-scroll-fade-size),
-      var(--_ui-scroll-fade-size) calc(100% + 1px),
-      -1px calc(100% - var(--_ui-scroll-fade-size)),
-      calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
-:scope:dir(rtl) .strip:where([data-hn-ui-editor-toolbar]) {
-    --_ui-scroll-fade-direction: to left;
+:scope[data-ui-input-group-state~="disabled"]:where([data-hn-ui-input-group]),:scope:has(:is(input, textarea):disabled):where([data-hn-ui-input-group]) {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    box-shadow: none;
+    cursor: not-allowed;
 }
-:where(:not([data-hn-ui-editor-toolbar])):is(.divider) {
-    width: 1px;
-    height: 20px;
-    background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
-    flex-shrink: 0;
-    margin: 0 var(--ui-editor-toolbar-divider-margin, 4px) !important;
+.field:where([data-hn-ui-input-group]) {
+    display: flex !important;
+    flex: 1;
+    min-inline-size: 0;
 }
-:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
-    box-sizing: border-box !important;
-    position: relative;
-    top: auto;
-    width: max-content;
-    max-width: min(calc(100vw - 24px), 100%);
-    min-height: auto;
-    padding: var(--ui-editor-toolbar-floating-padding, 4px) !important;
-    background: color-mix(
-      in srgb,
-      var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
-      transparent
-    );
-    border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
-    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
-    box-shadow: var(
-      --ui-editor-toolbar-floating-shadow,
-      var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
-    );
-    backdrop-filter: blur(10px);
+.affix:where([data-hn-ui-input-group]) {
+    display: inline-flex !important;
+    flex: none;
+    align-items: center !important;
+    padding-inline: var(--ui-space-2) !important;
+    color: var(--ui-text-muted);
+    font-family: var(--ui-font-family-mono);
+    font-size: var(--ui-font-size-sm);
+    white-space: nowrap;
 }
-@media (max-width: 767px) {
-:scope:where([data-hn-ui-editor-toolbar]) {
-      position: fixed;
-      top: auto;
-      bottom: env(safe-area-inset-bottom);
-      left: 0;
-      right: 0;
-      min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-      border-top: var(--ui-border-width) solid
-        var(--ui-editor-toolbar-border, var(--ui-border-divider));
-      border-bottom: none;
-      box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+.affix:has([slot="prefix"]):where([data-hn-ui-input-group]),.affix:has([slot="suffix"]):where([data-hn-ui-input-group]) {
+    background: var(--ui-surface-muted);
 }
-:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
-      position: relative;
-      inset: auto;
-      min-height: auto;
-      border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
-      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
-      box-shadow: var(
-        --ui-editor-toolbar-floating-shadow,
-        var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
-      );
+.affix:has([slot="prefix"]):where([data-hn-ui-input-group]) {
+    border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
 }
+.affix:has([slot="suffix"]):where([data-hn-ui-input-group]) {
+    border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
 }
-.looma-editor__sticky-toolbar-shell :scope:where([data-hn-ui-editor-toolbar]) {
-    position: relative;
-    min-height: var(--ui-editor-toolbar-min-height, 48px);
-    background: transparent;
-    border: 0;
-    box-shadow: none;
+:scope[data-ui-input-group-state~="prefixKind=icon"]:where([data-hn-ui-input-group]) {
+    --_ui-default-input-padding-inline-start: var(--ui-space-2);
 }
-.looma-editor__mobile-toolbar-shell
-    :scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
-    width: 100%;
-    max-width: none;
-    min-height: 100%;
-    padding: 0 !important;
+:scope[data-ui-input-group-state~="prefixKind=icon"]
+    .affix:first-child:where([data-hn-ui-input-group]) {
+    padding-inline-end: 0 !important;
+    border-inline-end: 0;
     background: transparent;
-    border: 0;
-    border-radius: 0;
-    box-shadow: none;
-    backdrop-filter: none;
 }
-.looma-editor__mobile-toolbar-shell
-    :scope[data-ui-editor-toolbar-state~="floating"]
-    .strip:where([data-hn-ui-editor-toolbar]) {
-    scroll-snap-type: x mandatory;
+.action:where([data-hn-ui-input-group]) {
+    display: flex !important;
+    flex: none;
+    align-items: center !important;
+    padding-inline: var(--ui-space-1) !important;
 }
-:scope[hidden]:where([data-hn-ui-editor-toolbar]) {
-    display: none !important;
+:scope[data-ui-input-group-state~="multiline"]:where([data-hn-ui-input-group]) {
+    display: grid !important;
+    grid-template-columns: auto minmax(0, 1fr) auto;
 }
+:scope[data-ui-input-group-state~="multiline"] .field:where([data-hn-ui-input-group]) {
+    grid-column: 2;
 }
-
-/* This component's hooks style the element they are set on, and never a nested one. */
-@property --ui-icon-button-active-scale {
-  syntax: "*";
-  inherits: false;
+:scope[data-ui-input-group-state~="multiline"] .action:where([data-hn-ui-input-group]) {
+    grid-column: 1 / -1;
+    justify-content: end !important;
+    padding: var(--ui-space-2) !important;
+    padding-block-start: 0 !important;
 }
-@property --ui-icon-button-active-surface {
-  syntax: "*";
-  inherits: false;
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]:where([data-hn-ui-input-group]) {
+    --_ui-default-textarea-padding-inline-end: calc(
+      var(--_ui-input-group-action-inline-size, 7rem) + var(--ui-space-3)
+    );
 }
-@property --ui-icon-button-border {
-  syntax: "*";
-  inherits: false;
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .field:where([data-hn-ui-input-group]) {
+    grid-row: 1;
 }
-@property --ui-icon-button-disabled-filter {
-  syntax: "*";
-  inherits: false;
+:scope[data-ui-input-group-state~="multiline"][data-ui-input-group-state~="actionPosition=top-end"]
+    .action:where([data-hn-ui-input-group]) {
+    grid-column: 2;
+    grid-row: 1;
+    align-self: start;
+    justify-self: end;
+    padding: var(--ui-space-2) !important;
 }
-@property --ui-icon-button-disabled-opacity {
-  syntax: "*";
-  inherits: false;
+.affix:empty:where([data-hn-ui-input-group]),.action:empty:where([data-hn-ui-input-group]) {
+    display: none !important;
 }
-@property --ui-icon-button-hover-border {
-  syntax: "*";
-  inherits: false;
+:scope[hidden]:where([data-hn-ui-input-group]) {
+    display: none !important;
 }
-@property --ui-icon-button-hover-surface {
-  syntax: "*";
-  inherits: false;
 }
-@property --ui-icon-button-hover-text {
+
+/* This component's hooks style the element they are set on, and never a nested one. */
+@property --ui-textarea-border-width {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-icon-size {
+@property --ui-textarea-border {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-icon-stroke-width {
+@property --ui-textarea-border-hover {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-outline-surface {
+@property --ui-textarea-focus-border {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-outline-text {
+@property --ui-textarea-focus-outline {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-radius {
+@property --ui-textarea-surface {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-size {
+@property --ui-textarea-focus-shadow {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-solid-hover-surface {
+@property --ui-textarea-invalid-border {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-solid-shadow {
+@property --ui-textarea-invalid-focus-shadow {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-solid-surface {
+@property --ui-textarea-radius {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-solid-text {
+@property --ui-textarea-shadow {
   syntax: "*";
   inherits: false;
 }
-@property --ui-icon-button-surface {
+@property --ui-textarea-padding-inline-end {
   syntax: "*";
   inherits: false;
 }
 
-/* Omitted tone retains the existing accent solid; explicit neutral is additive. */
-
-/* At rest an anticipatory button shows only its guide dot. The icon grows into place when
-   proximity, hover, or focus reveals it; the button's hit area and guide remain stable. */
-
-/* A touch target without a bigger button: an invisible hit area, at least the control
-   minimum, centred on the button (::before is the anticipatory guide). */
-
-/* A text button's companion uses control geometry; compact icon buttons keep their own density. */
+/* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
 
-/* Native toggle state persists after pointer release, including during loading. */
+/* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 
-/* Disabled is a flat neutral control, independent of the active variant's tone. */
+/* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-@scope (.ui-icon-button) to ([data-hn]) {
-:scope:where([data-hn-ui-icon-button]) {
-    /* 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.
-       A single ambient lift avoids stacking a face gradient or another inset bevel. */
-    --_ui-action-start: 1px;
-    --_ui-action-edge: var(
-      --ui-action-edge,
-      inset var(--_ui-action-start) 1px 0 light-dark(
-        rgb(255 255 255 / 0.08),
-        rgb(255 255 255 / 0.06)
-      ),
-      inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(
-        rgb(0 0 0 / 0.08),
-        rgb(0 0 0 / 0.08)
-      )
+@scope (.ui-textarea) to ([data-hn]) {
+:scope {
+    box-sizing: border-box !important;
+    display: inline-block !important;
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: calc(3rem * 2);
+    margin: 0 !important;
+    --_padding-block: var(--ui-space-2);
+    padding: var(--ui-space-2) var(--ui-space-3) !important;
+    padding-inline-end: var(
+      --ui-textarea-padding-inline-end,
+      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-3))
+    ) !important;
+    appearance: none;
+    resize: vertical;
+    border: var(
+      --ui-textarea-border-width,
+      var(--_ui-default-textarea-border-width, var(--ui-border-width))
+    ) solid
+      var(
+        --ui-textarea-border,
+        var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong)))
+      );
+    border-radius: var(
+      --ui-textarea-radius,
+      var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)))
     );
-    --_ui-action-shadow:
-      var(--_ui-action-edge),
-      0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
-    /* Hooks do not inherit, so the parts below read them from the root. */
-    --_ui-icon-button-icon-size: var(--ui-icon-button-icon-size);
-    --_ui-icon-button-icon-stroke-width: var(--ui-icon-button-icon-stroke-width);
-
-    display: inline-flex !important;
-    color: var(--ui-text-secondary);
-}
-:scope:dir(rtl):where([data-hn-ui-icon-button]) {
-    --_ui-action-start: -1px;
-}
-:scope[data-ui-icon-button-state~="tone=accent"]:where([data-hn-ui-icon-button]) {
-    --_icon-button-border: var(--ui-accent-solid);
-    --_icon-button-hover-border: var(--ui-accent-hover);
-    --_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)
+    background: var(
+      --ui-textarea-surface,
+      var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
+    );
+    color: var(--ui-text-primary);
+    font: inherit;
+    line-height: var(--ui-line-height-md);
+    box-shadow: var(
+      --ui-textarea-shadow,
+      var(--_ui-default-textarea-shadow, var(--ui-control-inset))
     );
-    color: var(--_icon-button-text);
-}
-:scope[data-ui-icon-button-state~="tone=neutral"]:where([data-hn-ui-icon-button]) {
-    --_icon-button-solid-surface: var(--ui-text-primary);
-    --_icon-button-solid-hover-surface: var(--ui-text-primary);
-    --_icon-button-solid-text: var(--ui-surface-default);
-}
-:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button]) {
-    position: relative;
-}
-:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button])::before {
-    content: "";
-    position: absolute;
-    inset: 50% auto auto 50%;
-    z-index: 1;
-    inline-size: var(--ui-affordance-guide-size);
-    block-size: var(--ui-affordance-guide-size);
-    border-radius: var(--ui-radius-round);
-    background: var(--ui-affordance-guide-color, var(--ui-border-strong));
-    opacity: calc(var(--ui-affordance-guide-opacity) * var(--ui-affordance-scope-guide, 1));
-    transform: translate(-50%, -50%);
-    transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);
-    pointer-events: none;
-}
-:scope[data-ui-icon-button-state~="anticipatory"][data-ui-icon-button-state~="guide=bar"]:where([data-hn-ui-icon-button])::before {
-    inline-size: 2px;
-    block-size: 20px;
-    background: var(--ui-border-strong);
-    opacity: 1;
-}
-:scope[data-ui-icon-button-state~="anticipatory"]:disabled:where([data-hn-ui-icon-button])::before {
-    opacity: 0;
-}
-:scope[data-ui-icon-button-state~="anticipatory"]
-    .content:where([data-hn-ui-icon-button]) {
-    opacity: 1;
-    transform: scale(1);
-    transition:
-      opacity var(--ui-motion-fast) var(--ui-motion-ease),
-      transform calc(var(--ui-motion-fast) * 2) cubic-bezier(0.2, 1.4, 0.35, 1);
-}
-@media (hover: hover) and (pointer: fine) {
-:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button]) {
-      border-color: transparent;
-      background-color: transparent;
-      box-shadow: none;
-}
-:scope[data-ui-icon-button-state~="anticipatory"]:not(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], :scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
-      .content:where([data-hn-ui-icon-button]) {
-      opacity: 0;
-      transform: scale(0.65);
-      transition-duration: var(--ui-motion-fast);
-}
-}
-:scope[data-ui-icon-button-state~="anticipatory"]:is(:scope[data-ui-icon-button-state~="revealed"], :scope[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible):where([data-hn-ui-icon-button])::before {
-    opacity: 0;
-}
-:scope:where([data-hn-ui-icon-button]) {
-    /* The size prop resolves here; --ui-icon-button-size overrides it on an element. */
-    --_size: 2rem;
-    appearance: none;
-    inline-size: var(--ui-icon-button-size, var(--_size));
-    block-size: var(--ui-icon-button-size, var(--_size));
-    min-inline-size: var(--ui-icon-button-size, var(--_size));
-    min-block-size: var(--ui-icon-button-size, var(--_size));
-    padding: 0 !important;
-    margin: 0 !important;
-    border: var(--ui-border-width) solid transparent;
-    border-radius: var(--ui-icon-button-radius, var(--ui-action-radius, var(--ui-radius-md)));
-    background-color: var(--ui-icon-button-surface, transparent);
-    color: inherit;
-    display: inline-flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    cursor: pointer;
     transition:
-      background-color var(--ui-motion-fast) var(--ui-motion-ease),
       border-color var(--ui-motion-fast) var(--ui-motion-ease),
-      color var(--ui-motion-fast) var(--ui-motion-ease),
-      box-shadow var(--ui-motion-base) var(--ui-motion-ease),
-      scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease);
-}
-@media (hover: none), (pointer: coarse) {
-:scope[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button])::before {
-      opacity: 0;
-}
-}
-@media (pointer: coarse) {
-:scope:where([data-hn-ui-icon-button]) {
-      position: relative;
-}
-:scope:where([data-hn-ui-icon-button])::after {
-      content: "";
-      position: absolute;
-      inset: 50% auto auto 50%;
-      inline-size: max(100%, var(--ui-control-min-block-size));
-      block-size: max(100%, var(--ui-control-min-block-size));
-      transform: translate(-50%, -50%);
-}
-}
-html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button]) {
-    position: relative;
-}
-html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::after {
-    content: "";
-    position: absolute;
-    inset: 50% auto auto 50%;
-    inline-size: max(100%, var(--ui-control-min-block-size));
-    block-size: max(100%, var(--ui-control-min-block-size));
-    transform: translate(-50%, -50%);
-}
-:scope[data-ui-icon-button-state~="size=sm"]:where([data-hn-ui-icon-button]) {
-    --_size: 1.75rem;
-    inline-size: var(--ui-icon-button-size, var(--_size));
-    block-size: var(--ui-icon-button-size, var(--_size));
-    min-inline-size: var(--ui-icon-button-size, var(--_size));
-    min-block-size: var(--ui-icon-button-size, var(--_size));
-}
-:scope[data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button]) {
-    --_size: 2.5rem;
-    inline-size: var(--ui-icon-button-size, var(--_size));
-    block-size: var(--ui-icon-button-size, var(--_size));
-    min-inline-size: var(--ui-icon-button-size, var(--_size));
-    min-block-size: var(--ui-icon-button-size, var(--_size));
-}
-:scope[data-ui-icon-button-state~="matchButton"]:where([data-hn-ui-icon-button]) {
-    --_size: var(--ui-control-size-md);
-    block-size: auto;
-    align-self: stretch;
-}
-:scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=sm"]:where([data-hn-ui-icon-button]) {
-    --_size: var(--ui-control-size-sm);
-}
-:scope[data-ui-icon-button-state~="matchButton"][data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button]) {
-    --_size: var(--ui-control-size-lg);
-}
-@media (pointer: coarse) {
-:scope[data-ui-icon-button-state~="matchButton"]:where([data-hn-ui-icon-button]) {
-      inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
-      min-inline-size: max(
-        var(--ui-icon-button-size, var(--_size)),
-        var(--ui-control-min-block-size)
-      );
-      min-block-size: max(
-        var(--ui-icon-button-size, var(--_size)),
-        var(--ui-control-min-block-size)
-      );
+      box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
+      background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
+:scope::selection {
+    background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
+    color: inherit;
 }
-:scope[data-ui-icon-button-state~="round"]:where([data-hn-ui-icon-button]) {
-    border-radius: var(--ui-radius-round);
+:scope::placeholder {
+    color: var(--ui-control-placeholder, var(--ui-text-secondary));
+    opacity: 1;
 }
-:scope[data-ui-icon-button-state~="variant=outline"]:where([data-hn-ui-icon-button]) {
+:scope:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
     border-color: var(
-      --ui-icon-button-border,
-      var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong)))
-    );
-    background-color: var(
-      --ui-icon-button-outline-surface,
-      var(--_icon-button-outline-surface, var(--ui-surface-default))
+      --ui-textarea-border-hover,
+      var(
+        --_ui-default-textarea-border-hover,
+        var(--ui-control-border-hover, var(--ui-text-secondary))
+      )
     );
-    background-image: none;
-    color: var(--ui-icon-button-outline-text, var(--_icon-button-text, var(--ui-text-primary)));
-    box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
 }
-:scope[data-ui-icon-button-state~="variant=solid"]:where([data-hn-ui-icon-button]) {
-    background-color: var(
-      --ui-icon-button-solid-surface,
-      var(--_icon-button-solid-surface, var(--ui-accent-solid))
-    );
-    background-image: none;
-    color: var(
-      --ui-icon-button-solid-text,
-      var(--_icon-button-solid-text, var(--ui-text-on-accent))
+:scope:focus-visible {
+    border-color: var(
+      --ui-textarea-focus-border,
+      var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
     );
+    outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
     box-shadow: var(
-      --ui-icon-button-solid-shadow,
-      var(--ui-action-shadow, var(--_ui-action-shadow))
-    );
-}
-:scope:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
-    /* Derived from the text colour so the ghost hover shows on any background. */
-    background-color: var(
-      --ui-icon-button-hover-surface,
-      color-mix(in srgb, currentColor 8%, transparent)
+      --ui-textarea-focus-shadow,
+      var(
+        --_ui-default-textarea-focus-shadow,
+        var(--ui-control-inset),
+        var(--ui-control-focus-halo-shadow)
+      )
     );
-    color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
 }
-:scope[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
+:scope[aria-invalid="true"],:scope:is(:user-invalid, [data-user-invalid]) {
     border-color: var(
-      --ui-icon-button-hover-border,
-      var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border)))
+      --ui-textarea-invalid-border,
+      var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))
     );
 }
-:scope[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
-    background-color: var(
-      --ui-icon-button-solid-hover-surface,
-      var(--_icon-button-solid-hover-surface, var(--ui-accent-hover))
+:scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+    box-shadow: var(
+      --ui-textarea-invalid-focus-shadow,
+      var(
+        --_ui-default-textarea-invalid-focus-shadow,
+        var(--ui-control-inset),
+        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+          in srgb,
+          var(
+            --ui-textarea-invalid-border,
+            var(
+              --_ui-default-textarea-invalid-border,
+              var(--ui-field-danger, var(--ui-danger-solid))
+            )
+          ) 22%,
+          transparent
+        )
+      )
     );
 }
-:scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]),:scope[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
-    color: var(
-      --ui-icon-button-solid-text,
-      var(--_icon-button-solid-text, var(--ui-text-on-accent))
-    );
+:scope:disabled {
+    background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
+    color: var(--ui-disabled-text);
+    box-shadow: none;
+    cursor: not-allowed;
 }
-:scope[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
-    background-color: var(
-      --ui-icon-button-active-surface,
-      color-mix(in srgb, currentColor 16%, transparent)
-    );
-    color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
-    box-shadow: var(--ui-pressed);
+:scope[data-ui-textarea-state~="size=sm"] {
+    --_padding-block: var(--ui-space-1);
+    padding: var(--ui-space-1) var(--ui-space-2) !important;
+    padding-inline-end: var(
+      --ui-textarea-padding-inline-end,
+      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-2))
+    ) !important;
+    font-size: var(--ui-font-size-sm);
 }
-:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button]) {
-    background-color: var(
-      --ui-icon-button-active-surface,
-      color-mix(in srgb, currentColor 12%, var(--ui-surface-default))
+:scope[data-ui-textarea-state~="size=lg"] {
+    --_padding-block: var(--ui-space-3);
+    padding: var(--ui-space-3) var(--ui-space-4) !important;
+    padding-inline-end: var(
+      --ui-textarea-padding-inline-end,
+      var(--_ui-default-textarea-padding-inline-end, var(--ui-space-4))
+    ) !important;
+    font-size: var(--ui-font-size-md);
+}
+:scope[data-ui-textarea-state~="maxRows"] {
+    max-block-size: calc(
+      max(var(--_rows), var(--_max-rows)) * 1lh + var(--_padding-block) + var(--_padding-block) +
+        2px
     );
-    background-image: none;
-    box-shadow: var(--ui-pressed);
 }
-:scope:active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
-    scale: var(--ui-icon-button-active-scale, var(--ui-press-scale, 0.96));
+@supports (field-sizing: content) {
+:scope[data-ui-textarea-state~="autosize"] {
+      field-sizing: content;
+      min-block-size: calc(
+        var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px
+      );
 }
-:is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"]):where([data-hn-ui-icon-button]) {
-    cursor: progress;
 }
-.content:where([data-hn-ui-icon-button]) {
-    display: inline-flex !important;
-    align-items: center !important;
-    justify-content: center !important;
+@media (pointer: coarse) {
+:scope[data-ui-textarea-state~="size=sm"] {
+      font-size: inherit;
 }
-:is(:scope[data-ui-icon-button-state~="loading"], :scope[data-ui-icon-button-state~="pending"])
-    .content:where([data-hn-ui-icon-button]) {
-    display: none !important;
 }
-@media (prefers-reduced-motion: reduce) {
-:scope[data-ui-icon-button-state~="anticipatory"]
-      .content:where([data-hn-ui-icon-button]) {
-      transition: none;
+:scope[hidden] {
+    display: none !important;
 }
 }
-:scope:focus-visible:where([data-hn-ui-icon-button]) {
-    outline: none;
-    box-shadow: var(--ui-focus-halo);
+
+/* One row, always. When the controls outgrow the space, the row scrolls sideways rather than
+       wrapping into several lines, and a fade at each edge that has more to show says so. */
+
+/* The edge fades are the scroll fade every Looma scroller uses (see ui-scroll-area), a mask on the
+   strip, so a floating toolbar's border and shadow stay whole. */
+
+/* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
+
+/* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
+
+/* A component that sets its display still honours the hidden attribute on its root. */
+@scope (.ui-editor-toolbar) to ([data-hn]) {
+:scope:where([data-hn-ui-editor-toolbar]) {
+    position: sticky;
+    top: 0;
+    z-index: var(--ui-editor-toolbar-z-index, 10);
+    display: flex !important;
+    align-items: center !important;
+    padding: var(--ui-editor-toolbar-padding-block, 6px)
+      var(--ui-editor-toolbar-padding-inline, 12px) !important;
+    min-height: var(--ui-editor-toolbar-min-height, 48px);
+    background: var(--ui-editor-toolbar-surface, var(--ui-surface));
+    border-bottom: var(--ui-border-width) solid
+      var(--ui-editor-toolbar-border, var(--ui-border-divider));
 }
-:scope[data-ui-icon-button-state~="variant=outline"]:focus-visible:where([data-hn-ui-icon-button]) {
-    box-shadow:
-      var(--ui-action-shadow, var(--_ui-action-shadow)),
-      var(--ui-focus-halo);
+.strip:where([data-hn-ui-editor-toolbar]) {
+    display: flex !important;
+    flex: 1 1 auto;
+    align-items: center !important;
+    justify-content: flex-start !important;
+    gap: var(--ui-editor-toolbar-gap, 2px) !important;
+    min-width: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
 }
-:scope[data-ui-icon-button-state~="variant=solid"]:focus-visible:where([data-hn-ui-icon-button]) {
-    box-shadow:
-      var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
-      var(--ui-focus-halo);
+.strip:where([data-hn-ui-editor-toolbar])::-webkit-scrollbar {
+    display: none !important;
 }
-:scope:is(:scope[data-ui-icon-button-state~="variant=outline"], :scope[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]):where([data-hn-ui-icon-button]) {
-    background-image: none;
-    box-shadow: var(--ui-pressed);
+.strip > :where(:not([data-hn-ui-editor-toolbar])):is(*) {
+    flex: 0 0 auto;
 }
-:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button]) {
-    box-shadow:
-      var(--ui-pressed),
-      var(--ui-focus-halo);
+.strip:where([data-hn-ui-editor-toolbar]) {
+    --_ui-scroll-fade-direction: to right;
+    --_ui-scroll-fade-size: var(--ui-editor-toolbar-fade-size, var(--ui-scroll-fade-size, 24px));
+    mask-image: linear-gradient(
+      var(--_ui-scroll-fade-direction),
+      transparent,
+      #000 var(--_ui-scroll-fade-start),
+      #000 calc(100% - var(--_ui-scroll-fade-end)),
+      transparent
+    );
+    animation:
+      ui-scroll-fade-start linear,
+      ui-scroll-fade-start-hold linear,
+      ui-scroll-fade-end-hold linear,
+      ui-scroll-fade-end linear;
+    animation-timeline: scroll(self inline);
+    animation-range:
+      0 var(--_ui-scroll-fade-size),
+      var(--_ui-scroll-fade-size) calc(100% + 1px),
+      -1px calc(100% - var(--_ui-scroll-fade-size)),
+      calc(100% - var(--_ui-scroll-fade-size)) 100%;
 }
-@media (forced-colors: active) {
-:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:where([data-hn-ui-icon-button]) {
-      outline: var(--ui-focus-width) solid Highlight;
-      outline-offset: calc(-2 * var(--ui-focus-width));
+:scope:dir(rtl) .strip:where([data-hn-ui-editor-toolbar]) {
+    --_ui-scroll-fade-direction: to left;
 }
-:scope[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible:where([data-hn-ui-icon-button]) {
-      outline-offset: var(--ui-focus-width);
+:where(:not([data-hn-ui-editor-toolbar])):is(.divider) {
+    width: 1px;
+    height: 20px;
+    background: var(--ui-editor-toolbar-divider, var(--ui-border-divider));
+    flex-shrink: 0;
+    margin: 0 var(--ui-editor-toolbar-divider-margin, 4px) !important;
 }
+:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
+    box-sizing: border-box !important;
+    position: relative;
+    top: auto;
+    width: max-content;
+    max-width: min(calc(100vw - 24px), 100%);
+    min-height: auto;
+    padding: var(--ui-editor-toolbar-floating-padding, 4px) !important;
+    background: color-mix(
+      in srgb,
+      var(--ui-editor-toolbar-surface, var(--ui-surface)) 96%,
+      transparent
+    );
+    border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+    box-shadow: var(
+      --ui-editor-toolbar-floating-shadow,
+      var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+    );
+    backdrop-filter: blur(10px);
 }
-:scope:disabled:where([data-hn-ui-icon-button]) {
-    border-color: var(--ui-disabled-border);
-    background-color: var(--ui-disabled-surface);
-    color: var(--ui-disabled-text);
-    filter: var(--ui-icon-button-disabled-filter, var(--ui-disabled-filter));
-    opacity: var(--ui-icon-button-disabled-opacity, 1);
-    cursor: not-allowed;
-    box-shadow: none;
-    background-image: none;
+@media (max-width: 767px) {
+:scope:where([data-hn-ui-editor-toolbar]) {
+      position: fixed;
+      top: auto;
+      bottom: env(safe-area-inset-bottom);
+      left: 0;
+      right: 0;
+      min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
+      border-top: var(--ui-border-width) solid
+        var(--ui-editor-toolbar-border, var(--ui-border-divider));
+      border-bottom: none;
+      box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
 }
-:scope[data-ui-icon-button-state~="variant=ghost"]:disabled:where([data-hn-ui-icon-button]) {
-    border-color: transparent;
+:scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
+      position: relative;
+      inset: auto;
+      min-height: auto;
+      border: var(--ui-border-width) solid var(--ui-editor-toolbar-border, var(--ui-border-strong));
+      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg));
+      box-shadow: var(
+        --ui-editor-toolbar-floating-shadow,
+        var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12))
+      );
 }
-:scope:where([data-hn-ui-icon-button]) {
-    --_icon-button-icon-default: var(--ui-icon-size-md);
-    /* A slotted ui-icon is its own component, out of reach of the svg rule below; these are its
-       defaults, which its own --ui-icon-* hooks still override. */
-    --_ui-default-icon-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-    --_ui-default-icon-stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
 }
-:scope[data-ui-icon-button-state~="size=sm"]:where([data-hn-ui-icon-button]) {
-    --_icon-button-icon-default: var(--ui-icon-size-sm);
+.looma-editor__sticky-toolbar-shell :scope:where([data-hn-ui-editor-toolbar]) {
+    position: relative;
+    min-height: var(--ui-editor-toolbar-min-height, 48px);
+    background: transparent;
+    border: 0;
+    box-shadow: none;
 }
-:scope[data-ui-icon-button-state~="size=lg"]:where([data-hn-ui-icon-button]) {
-    --_icon-button-icon-default: var(--ui-icon-size-lg);
+.looma-editor__mobile-toolbar-shell
+    :scope[data-ui-editor-toolbar-state~="floating"]:where([data-hn-ui-editor-toolbar]) {
+    width: 100%;
+    max-width: none;
+    min-height: 100%;
+    padding: 0 !important;
+    background: transparent;
+    border: 0;
+    border-radius: 0;
+    box-shadow: none;
+    backdrop-filter: none;
 }
-:where(:not([data-hn-ui-icon-button])):is(svg) {
-    inline-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-    block-size: var(--_ui-icon-button-icon-size, var(--_icon-button-icon-default));
-    flex-shrink: 0;
-    stroke-width: var(--_ui-icon-button-icon-stroke-width, 1.75);
+.looma-editor__mobile-toolbar-shell
+    :scope[data-ui-editor-toolbar-state~="floating"]
+    .strip:where([data-hn-ui-editor-toolbar]) {
+    scroll-snap-type: x mandatory;
 }
-:scope[hidden]:where([data-hn-ui-icon-button]) {
+:scope[hidden]:where([data-hn-ui-editor-toolbar]) {
     display: none !important;
 }
 }
@@ -6062,9 +6635,13 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
   inherits: false;
 }
 
+/* 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. */
+
 /* A toolbar or card can supply its own surface, including an unclipped shadow. */
 @scope (.ui-popover) to ([data-hn]) {
 :scope:where([data-hn-ui-popover]) {
+    --_ui-material-scale: 0.55;
     --_ui-popover-surface: var(--ui-popover-surface);
     --_ui-popover-border: var(--ui-popover-border);
     --_ui-popover-radius: var(--ui-popover-radius);
@@ -6099,12 +6676,96 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
       var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg)))
     );
 }
+.surface:where([data-hn-ui-popover]) {
+    --_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-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:
+      linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color))
+      padding-box,
+      linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+      var(--_ui-material-content-color) padding-box;
+    border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+    border-color: var(
+      --_ui-popover-border,
+      color-mix(
+        in oklab,
+        var(--ui-overlay-border, var(--ui-border-strong)) calc(
+          (1 - var(--_ui-material-active)) * 100%
+        ),
+        transparent
+      )
+    );
+    box-shadow: var(
+      --_ui-popover-shadow,
+      var(
+        --ui-overlay-shadow,
+        0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(
+          var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px
+        ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+        inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(
+          --ui-material-edge,
+          var(--ui-border-strong)
+        ),
+        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));
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+.surface:where([data-hn-ui-popover]) {
+      background: var(--_ui-material-content-color);
+}
+}
+@media (prefers-reduced-transparency: reduce) {
+.surface:where([data-hn-ui-popover]) {
+      background: var(--_ui-material-content-color);
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
+@media (forced-colors: active) {
+.surface:where([data-hn-ui-popover]) {
+      background: Canvas;
+      border-color: CanvasText;
+      box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+}
+}
 :scope[data-ui-popover-state~="bare"] .surface:where([data-hn-ui-popover]) {
     overflow: visible;
     padding: 0 !important;
     border: 0;
     background: transparent;
     box-shadow: none;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
 }
 :scope:not([data-ui-popover-state~="internalOpen"]):where([data-hn-ui-popover]) {
     display: none !important;
@@ -6180,7 +6841,7 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
     color: var(--ui-text-primary);
     text-align: start;
 }
-:scope:is(h2, h3, h4, h5, h6):where([data-hn-ui-text]) {
+:scope:is(h1, h2, h3, h4, h5, h6):where([data-hn-ui-text]) {
     font-family: var(--ui-font-display, inherit);
     font-size: inherit;
     font-weight: inherit;
@@ -6235,10 +6896,31 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
 :scope[data-ui-text-state~="weight=semibold"]:where([data-hn-ui-text]) {
     font-weight: var(--ui-font-semibold);
 }
+:scope[data-ui-text-state~="variant=display"]:where([data-hn-ui-text]),:scope[data-ui-text-state~="variant=heading"]:where([data-hn-ui-text]) {
+    font-family: var(--ui-font-display, var(--ui-font-family-sans));
+    font-weight: var(--ui-font-semibold);
+    line-height: var(--ui-line-height-tight);
+}
+:scope[data-ui-text-state~="variant=display"]:where([data-hn-ui-text]) {
+    font-size: var(--ui-font-size-2xl);
+}
+:scope[data-ui-text-state~="variant=heading"]:where([data-hn-ui-text]) {
+    font-size: var(--ui-font-size-xl);
+}
+:scope[data-ui-text-state~="variant=label"]:where([data-hn-ui-text]) {
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-medium);
+    line-height: var(--ui-line-height);
+}
+:scope[data-ui-text-state~="variant=caption"]:where([data-hn-ui-text]) {
+    font-size: var(--ui-font-size-sm);
+    line-height: var(--ui-line-height);
+}
 :scope[data-ui-text-state~="variant=eyebrow"]:where([data-hn-ui-text]) {
     font-size: var(--ui-font-size-xs);
     font-weight: var(--ui-font-semibold);
     letter-spacing: 0.06em;
+    line-height: var(--ui-line-height);
     text-transform: uppercase;
 }
 :scope[data-ui-text-state~="variant=code"]:where([data-hn-ui-text]) {
@@ -9556,6 +10238,48 @@ dialog:where([data-hn-ui-search-shell]) {
 }
 }
 
+@scope (.ui-slider) to ([data-hn]) {
+:scope {
+    display: grid !important;
+    grid-template-columns: minmax(4rem, 1fr) minmax(8rem, 1fr) !important;
+    align-items: center !important;
+    gap: var(--ui-space-2) !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    min-inline-size: 0;
+}
+input {
+    inline-size: 100%;
+    min-inline-size: 0;
+    min-block-size: var(--ui-control-size-md);
+    margin: 0 !important;
+    accent-color: var(--ui-accent-solid);
+    cursor: pointer;
+}
+:scope[data-ui-slider-state~="size=sm"] input {
+    min-block-size: var(--ui-control-size-sm);
+}
+:scope[data-ui-slider-state~="size=lg"] input {
+    min-block-size: var(--ui-control-size-lg);
+}
+input:focus-visible {
+    outline: var(--ui-focus-width) solid var(--ui-control-focus, var(--ui-accent-solid));
+    outline-offset: var(--ui-space-1);
+    border-radius: var(--ui-radius-sm);
+}
+input:disabled {
+    cursor: not-allowed;
+}
+@media (pointer: coarse) {
+input {
+      min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+}
+}
+:scope[hidden] {
+    display: none !important;
+}
+}
+
 /* The one way a view says it is loading, has nothing yet, or failed, with an optional next step.
        Every view says it the same way, in the same place, at the same size. */
 
@@ -9973,6 +10697,10 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
   syntax: "*";
   inherits: false;
 }
+@property --ui-tabs-panel-padding {
+  syntax: "*";
+  inherits: false;
+}
 
 /* Density resolves into the tab row's own values; the public tokens still override them. */
 
@@ -9987,6 +10715,7 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
     --_ui-tabs-tab-min-block-size: var(--ui-tabs-tab-min-block-size);
     --_ui-tabs-tab-padding-block: var(--ui-tabs-tab-padding-block);
     --_ui-tabs-tab-padding-inline: var(--ui-tabs-tab-padding-inline);
+    --_ui-tabs-panel-padding: var(--ui-tabs-panel-padding);
 
     --_tab-min-block-size: var(--ui-control-size);
     --_tab-padding-block: var(--ui-space-2);
@@ -10070,7 +10799,7 @@ input:where([data-hn-ui-switch]),input:where([data-hn-ui-switch])::after {
     min-inline-size: 0;
 }
 .panels > :where(:not([data-hn-ui-tabs])):is(*) {
-    padding: var(--ui-space-4) !important;
+    padding: var(--_ui-tabs-panel-padding, var(--ui-space-4)) !important;
 }
 :scope[data-ui-tabs-state~="orientation=vertical"]:where([data-hn-ui-tabs]) {
     grid-template-columns: max-content minmax(0, 1fr);
@@ -12689,7 +13418,7 @@ html[data-ui-input-modality="touch"]
 
     /* A count is an adornment, not another line of label text. Keep the standard control height
        with enough inset for a 24px mark; large content can still grow the button naturally. */
-    :scope:where([data-component~="ui-button"]):not([variant="link"]):has(.badge:not(:empty)) {
+    :scope:where([data-component~="ui-button"]):not([data-appearance="link"]):has(.badge:not(:empty)) {
       padding-block: var(--ui-space-0-5) !important;
     }
 
@@ -12734,7 +13463,7 @@ html[data-ui-input-modality="touch"]
 
     /* Card actions inherit Button's palette and behavior; only their shared layout changes.
        The icon may contain any decorative composition. Empty icons remove their column. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"] {
       display: grid !important;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-content: center !important;
@@ -12747,10 +13476,10 @@ html[data-ui-input-modality="touch"]
       box-shadow: none;
       background-image: none;
     }
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][size="lg"] {
       min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
     }
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"]:has(.card-icon:empty) {
       grid-template-columns: minmax(0, 1fr) auto;
     }
     .card-icon {
@@ -12777,11 +13506,11 @@ html[data-ui-input-modality="touch"]
     }
 
     /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
@@ -12793,19 +13522,19 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--ui-pressed);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
       border-color: var(--_tone);
       background-color: var(--_tone);
       color: var(--_on-tone);
       box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     }
 
-    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-hover);
       border-color: var(--_tone-hover);
     }
 
-    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
+    :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-active);
       border-color: var(--_tone-active);
       background-image: none;
@@ -12814,7 +13543,7 @@ html[data-ui-input-modality="touch"]
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"] {
       --_hue: var(--ui-text);
       --_hue-hover: var(--ui-text);
       --_hue-active: var(--ui-text);
@@ -12822,40 +13551,40 @@ html[data-ui-input-modality="touch"]
       --_on-hue: var(--ui-surface);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=danger"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+    :scope:where([data-component~="ui-button"])[data-tone="danger"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
       --_hue: var(--ui-danger);
       --_hue-hover: var(--ui-danger-hover);
-      --_hue-active: var(--ui-danger-hover);
-      --_hue-text: var(--ui-danger-hover);
+      --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
+      --_hue-text: var(--ui-danger-subtle-text);
       --_on-hue: var(--ui-on-danger);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=success"] {
+    :scope:where([data-component~="ui-button"])[data-tone="success"] {
       --_hue: var(--ui-success);
-      --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-success-hover);
+      --_hue-active: var(--ui-success-active);
+      --_hue-text: var(--ui-success-subtle-text);
+      --_on-hue: var(--ui-success-on-strong);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=warning"] {
+    :scope:where([data-component~="ui-button"])[data-tone="warning"] {
       --_hue: var(--ui-warning);
-      --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-warning-hover);
+      --_hue-active: var(--ui-warning-active);
+      --_hue-text: var(--ui-warning-subtle-text);
+      --_on-hue: var(--ui-warning-on-strong);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=info"] {
+    :scope:where([data-component~="ui-button"])[data-tone="info"] {
       --_hue: var(--ui-info);
-      --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-info-hover);
+      --_hue-active: var(--ui-info-active);
+      --_hue-text: var(--ui-info-subtle-text);
+      --_on-hue: var(--ui-info-on-strong);
     }
 
     /* A value picker is a field, with Select's quiet edge and resting lift. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="field"] {
       --_ui-field-shadow: var(--ui-shadow-sm);
       border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -12865,23 +13594,23 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="field"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-text-secondary)));
       background-color: var(--ui-button-hover-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       --_ui-field-shadow: var(--ui-pressed);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[data-appearance="field"]:focus-visible {
       border-color: var(--ui-control-focus, var(--ui-accent-solid));
       box-shadow:
         var(--ui-button-shadow, var(--_ui-field-shadow)),
         var(--ui-control-focus-halo-shadow);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"] {
       border-color: transparent;
       background: transparent;
       box-shadow: none;
@@ -12889,14 +13618,14 @@ html[data-ui-input-modality="touch"]
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
       border-color: transparent;
     }
 
     /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
        edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
       border-color: transparent;
       box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
@@ -12910,13 +13639,13 @@ html[data-ui-input-modality="touch"]
         var(--ui-focus-halo);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[data-appearance="solid"]:focus-visible {
       box-shadow:
         var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
-    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]):focus-visible {
+    :is(:scope:where([data-component~="ui-button"])[data-appearance="ghost"], :scope:where([data-component~="ui-button"])[data-appearance="link"], :scope:where([data-component~="ui-button"])[data-appearance="card"]):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
@@ -12938,7 +13667,7 @@ html[data-ui-input-modality="touch"]
     }
 
     /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background-color: var(--ui-disabled-surface);
       border-color: transparent;
     }
@@ -12955,12 +13684,12 @@ html[data-ui-input-modality="touch"]
        a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
        area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
        Only these need it: a hit area on every button would reach over its neighbours. */
-    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"],
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-appearance="link"],
     html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]::after, 
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-appearance="link"]::after, 
     html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"]::after {
       position: absolute;
       inset: 50% auto auto 50%;
@@ -12972,7 +13701,7 @@ html[data-ui-input-modality="touch"]
 
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"] {
       display: inline !important;
       min-block-size: 0;
       padding: 0 !important;
@@ -12989,24 +13718,24 @@ html[data-ui-input-modality="touch"]
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:active:not(:disabled, [aria-disabled="true"]) {
       background: none;
       transform: none;
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background: none;
       border-color: transparent;
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
@@ -13501,7 +14230,7 @@ html[data-ui-input-modality="touch"]
       --_ui-action-start: -1px;
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="tone=accent"] {
+    :scope:where([data-component~="ui-icon-button"])[data-tone="accent"] {
       --_icon-button-border: var(--ui-accent-solid);
       --_icon-button-hover-border: var(--ui-accent-hover);
       --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
@@ -13509,8 +14238,52 @@ html[data-ui-input-modality="touch"]
       color: var(--_icon-button-text);
     }
 
+    :scope:where([data-component~="ui-icon-button"])[data-tone="danger"] {
+      --_icon-button-border: var(--ui-danger);
+      --_icon-button-hover-border: var(--ui-danger-hover);
+      --_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);
+      --_icon-button-solid-hover-surface: var(--ui-danger-hover);
+      --_icon-button-solid-text: var(--ui-danger-on-strong);
+      color: var(--_icon-button-text);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-tone="success"] {
+      --_icon-button-border: var(--ui-success);
+      --_icon-button-hover-border: var(--ui-success-hover);
+      --_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);
+      --_icon-button-solid-hover-surface: var(--ui-success-hover);
+      --_icon-button-solid-text: var(--ui-success-on-strong);
+      color: var(--_icon-button-text);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-tone="warning"] {
+      --_icon-button-border: var(--ui-warning);
+      --_icon-button-hover-border: var(--ui-warning-hover);
+      --_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);
+      --_icon-button-solid-hover-surface: var(--ui-warning-hover);
+      --_icon-button-solid-text: var(--ui-warning-on-strong);
+      color: var(--_icon-button-text);
+    }
+
+    :scope:where([data-component~="ui-icon-button"])[data-tone="info"] {
+      --_icon-button-border: var(--ui-info);
+      --_icon-button-hover-border: var(--ui-info-hover);
+      --_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);
+      --_icon-button-solid-hover-surface: var(--ui-info-hover);
+      --_icon-button-solid-text: var(--ui-info-on-strong);
+      color: var(--_icon-button-text);
+    }
+
     /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-icon-button"])[data-tone="neutral"] {
       --_icon-button-solid-surface: var(--ui-text-primary);
       --_icon-button-solid-hover-surface: var(--ui-text-primary);
       --_icon-button-solid-text: var(--ui-surface-default);
@@ -13555,13 +14328,13 @@ html[data-ui-input-modality="touch"]
     }
 
     @media (hover: hover) and (pointer: fine) {
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background-color: transparent;
         box-shadow: none;
       }
 
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:not(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="loading"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="pending"], :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
         .content {
         opacity: 0;
         transform: scale(0.65);
@@ -13569,7 +14342,7 @@ html[data-ui-input-modality="touch"]
       }
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"]:is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="revealed"], :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
       opacity: 0;
     }
 
@@ -13678,7 +14451,7 @@ html[data-ui-input-modality="touch"]
       border-radius: var(--ui-radius-round);
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"] {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"] {
       border-color: var(--ui-icon-button-border, var(--_icon-button-border, var(--ui-control-border, var(--ui-border-strong))));
       background-color: var(--ui-icon-button-outline-surface, var(--_icon-button-outline-surface, var(--ui-surface-default)));
       background-image: none;
@@ -13686,7 +14459,7 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"] {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"] {
       background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
       background-image: none;
       color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
@@ -13699,27 +14472,26 @@ html[data-ui-input-modality="touch"]
       color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"]:hover:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]:hover:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=accent"]:hover:enabled:not([aria-disabled="true"]),
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"][data-ui-icon-button-state~="tone=neutral"]:hover:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]) {
       color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 16%, transparent));
       color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
       box-shadow: var(--ui-pressed);
     }
 
     /* Native toggle state persists after pointer release, including during loading. */
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"][aria-pressed="true"]:enabled {
       background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 12%, var(--ui-surface-default)));
       background-image: none;
       box-shadow: var(--ui-pressed);
@@ -13754,35 +14526,35 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--ui-focus-halo);
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"]:focus-visible {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"]:focus-visible {
       box-shadow:
         var(--ui-action-shadow, var(--_ui-action-shadow)),
         var(--ui-focus-halo);
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]:focus-visible {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="solid"]:focus-visible {
       box-shadow:
         var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
-    :scope:where([data-component~="ui-icon-button"]):is(:scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"], :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=solid"]):active:enabled:not([aria-disabled="true"]) {
+    :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);
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"][aria-pressed="true"]:enabled:focus-visible {
       box-shadow:
         var(--ui-pressed),
         var(--ui-focus-halo);
     }
 
     @media (forced-colors: active) {
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled {
+      :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"][aria-pressed="true"]:enabled {
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-2 * var(--ui-focus-width));
       }
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=outline"][aria-pressed="true"]:enabled:focus-visible {
+      :scope:where([data-component~="ui-icon-button"])[data-appearance="outline"][aria-pressed="true"]:enabled:focus-visible {
         outline-offset: var(--ui-focus-width);
       }
     }
@@ -13799,7 +14571,7 @@ html[data-ui-input-modality="touch"]
       background-image: none;
     }
 
-    :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="variant=ghost"]:disabled {
+    :scope:where([data-component~="ui-icon-button"])[data-appearance="ghost"]:disabled {
       border-color: transparent;
     }
 
@@ -14025,6 +14797,7 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-menu"]) {
+      --_ui-material-scale: 0.28;
       --_ui-menu-surface: var(--ui-menu-surface);
       --_ui-menu-border: var(--ui-menu-border);
       --_ui-menu-radius: var(--ui-menu-radius);
@@ -14066,6 +14839,65 @@ html[data-ui-input-modality="touch"]
       overflow: auto;
     }
 
+    /* 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. */
+    :scope:where([data-component~="ui-menu"]):not([inline]) .surface {
+      --_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-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:
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-menu-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-menu-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          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));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      :scope:where([data-component~="ui-menu"]):not([inline]) .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @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;
+      }
+    }
+
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-menu"]):not([inline]) .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     .surface hr {
       align-self: stretch;
       block-size: 0;
@@ -14123,6 +14955,18 @@ html[data-ui-input-modality="touch"]
 
     /* Small follows its trigger down: an item's own hooks still win. */
 
+    /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+       transparency, saturation and edge light belong to the surrounding decorative material. */
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
     @starting-style {
     }
 
@@ -14364,6 +15208,7 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-popover"]) {
+      --_ui-material-scale: 0.55;
       --_ui-popover-surface: var(--ui-popover-surface);
       --_ui-popover-border: var(--ui-popover-border);
       --_ui-popover-radius: var(--ui-popover-radius);
@@ -14396,6 +15241,65 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
+    /* 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. */
+    .surface {
+      --_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-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:
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-popover-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-popover-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          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));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      .surface {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     /* A toolbar or card can supply its own surface, including an unclipped shadow. */
     :scope:where([data-component~="ui-popover"])[data-ui-popover-state~="bare"] .surface {
       overflow: visible;
@@ -14403,6 +15307,8 @@ html[data-ui-input-modality="touch"]
       border: 0;
       background: transparent;
       box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
     }
 
     :scope:where([data-component~="ui-popover"]):not([data-ui-popover-state~="internalOpen"]) {
@@ -14460,6 +15366,18 @@ html[data-ui-input-modality="touch"]
 @scope ([data-component~="ui-popover"]) to ([data-component]) {
 /* 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. */
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
     /* A toolbar or card can supply its own surface, including an unclipped shadow. */
 
     @starting-style {
@@ -14580,7 +15498,7 @@ html[data-ui-input-modality="touch"]
 
     /* A heading drops the browser's heading size and weight, so size and weight set it as they set
        any text, and inherit keeps the text around it. */
-    :scope:where([data-component~="ui-text"]):is(h2, h3, h4, h5, h6) {
+    :scope:where([data-component~="ui-text"]):is(h1, h2, h3, h4, h5, h6) {
       font-family: var(--ui-font-display, inherit);
       font-size: inherit;
       font-weight: inherit;
@@ -14643,10 +15561,32 @@ html[data-ui-input-modality="touch"]
       font-weight: var(--ui-font-semibold);
     }
 
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=display"], :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=heading"] {
+      font-family: var(--ui-font-display, var(--ui-font-family-sans));
+      font-weight: var(--ui-font-semibold);
+      line-height: var(--ui-line-height-tight);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=display"] {
+      font-size: var(--ui-font-size-2xl);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=heading"] {
+      font-size: var(--ui-font-size-xl);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=label"] {
+      font-size: var(--ui-font-size-sm);
+      font-weight: var(--ui-font-medium);
+      line-height: var(--ui-line-height);
+    }
+    :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=caption"] {
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+    }
+
     :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=eyebrow"] {
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
       letter-spacing: 0.06em;
+      line-height: var(--ui-line-height);
       text-transform: uppercase;
     }
     :scope:where([data-component~="ui-text"])[data-ui-text-state~="variant=code"] {
@@ -14762,6 +15702,7 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-tooltip"]) {
+      --_ui-material-scale: 0.08;
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-tooltip-border: var(--ui-tooltip-border);
       --_ui-tooltip-max-inline-size: var(--ui-tooltip-max-inline-size);
@@ -14814,6 +15755,65 @@ html[data-ui-input-modality="touch"]
       box-shadow: var(--_ui-tooltip-shadow, var(--ui-overlay-shadow, var(--ui-elevation-tooltip, var(--ui-shadow-md))));
     }
 
+    /* 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. */
+    .surface {
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
+      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.08) * 8px);
+      --_ui-material-content-color: var(--_ui-tooltip-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
+      --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
+      background:
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-tooltip-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-tooltip-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.08) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          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));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      .surface {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     /* 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. */
     .shortcut {
@@ -14938,6 +15938,18 @@ html[data-ui-input-modality="touch"]
 
     /* The label and the shortcut sit side by side, a gap apart, with the label wrapping on its own. */
 
+    /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+       transparency, saturation and edge light belong to the surrounding decorative material. */
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+    }
+
+    @media (forced-colors: active) {
+    }
+
     /* 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. */