@threadlabs/looma 0.33.1 → 0.35.0

package/styles/ui-dialog.css

@@ -38,6 +38,7 @@
     }
 
     :scope:where([data-component~="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);
 
@@ -70,6 +71,67 @@
         overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
     }
 
+    /* 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-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:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+        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),
+          var(--ui-material-glow, 0 0 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-component~="ui-dialog"]) {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      :scope:where([data-component~="ui-dialog"]) {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      :scope:where([data-component~="ui-dialog"]) {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     :scope:where([data-component~="ui-dialog"])[open] {
       display: flex !important;
       visibility: visible;
@@ -241,6 +303,18 @@
 @scope ([data-component~="ui-dialog"]) 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) {
+    }
+
     /* Own the layout wrapper; nested component roots are outside these scoped rules. */
 
     /* Alerts have no close target to add height above the title. */
@@ -285,6 +359,7 @@
     }
 
     :where([data-component~="ui-dialog"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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);
 
@@ -317,6 +392,67 @@
         overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
     }
 
+    /* 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. */
+    :where([data-component~="ui-dialog"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="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:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+        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),
+          var(--ui-material-glow, 0 0 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([data-component~="ui-dialog"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))) {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      :where([data-component~="ui-dialog"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))) {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      :where([data-component~="ui-dialog"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))) {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     :where([data-component~="ui-dialog"])[open]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))) {
       display: flex !important;
       visibility: visible;

package/styles/ui-icon-button.css

@@ -88,7 +88,9 @@
     :scope:where([data-component~="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. */
+         The shared theme supplies reflections and glow independently of the resting lift. */
+      --_tone-highlight: var(--ui-accent-highlight, none);
+      --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
       --_ui-action-start: 1px;
       --_ui-action-edge: var(
         --ui-action-edge,
@@ -108,7 +110,9 @@
       --_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"] {
+      --_tone-highlight: var(--ui-accent-highlight, none);
+      --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
       --_icon-button-border: var(--ui-accent-solid);
       --_icon-button-hover-border: var(--ui-accent-hover);
       --_icon-button-text: var(--ui-accent-subtle-text, var(--ui-accent-solid));
@@ -116,11 +120,65 @@
       color: var(--_icon-button-text);
     }
 
+    :scope:where([data-component~="ui-icon-button"])[data-tone="danger"] {
+      --_tone-highlight: var(--ui-danger-highlight, none);
+      --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
+      --_icon-button-border: var(--ui-danger);
+      --_icon-button-hover-border: var(--ui-danger-hover);
+      --_icon-button-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"] {
+      --_tone-highlight: var(--ui-success-highlight, none);
+      --_tone-glow: var(--ui-success-glow, 0 0 transparent);
+      --_icon-button-border: var(--ui-success);
+      --_icon-button-hover-border: var(--ui-success-hover);
+      --_icon-button-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"] {
+      --_tone-highlight: var(--ui-warning-highlight, none);
+      --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
+      --_icon-button-border: var(--ui-warning);
+      --_icon-button-hover-border: var(--ui-warning-hover);
+      --_icon-button-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"] {
+      --_tone-highlight: var(--ui-info-highlight, none);
+      --_tone-glow: var(--ui-info-glow, 0 0 transparent);
+      --_icon-button-border: var(--ui-info);
+      --_icon-button-hover-border: var(--ui-info-hover);
+      --_icon-button-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"] {
-      --_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:where([data-component~="ui-icon-button"])[data-tone="neutral"] {
+      --_tone-highlight: var(--ui-neutral-highlight, none);
+      --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
+      --_icon-button-solid-surface: var(--ui-neutral-surface);
+      --_icon-button-solid-hover-surface: var(--ui-neutral-hover);
+      --_icon-button-solid-text: var(--ui-text);
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] {
@@ -162,13 +220,13 @@
     }
 
     @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);
@@ -176,7 +234,7 @@
       }
     }
 
-    :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;
     }
 
@@ -285,19 +343,19 @@
       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;
+      background-image: var(--ui-surface-highlight, 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));
+      box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow)), var(--_tone-glow);
     }
 
-    :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;
+      background-image: var(--_tone-highlight);
       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)));
+      box-shadow: var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
     }
 
     :scope:where([data-component~="ui-icon-button"]):hover:enabled:not([aria-disabled="true"]) {
@@ -306,27 +364,26 @@
       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);
@@ -361,35 +418,35 @@
       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);
       }
     }
@@ -406,7 +463,7 @@
       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;
     }
 

package/styles/ui-input-group.css

@@ -42,6 +42,7 @@
       --_ui-default-input-focus-outline: none;
       --_ui-default-input-radius: 0;
       --_ui-default-input-surface: transparent;
+      --_ui-default-input-highlight: none;
       --_ui-default-textarea-border-width: 0;
       --_ui-default-textarea-border: transparent;
       --_ui-default-textarea-border-hover: transparent;
@@ -53,6 +54,7 @@
       --_ui-default-textarea-focus-outline: none;
       --_ui-default-textarea-radius: 0;
       --_ui-default-textarea-surface: transparent;
+      --_ui-default-textarea-highlight: none;
 
       display: flex !important;
       align-items: stretch !important;
@@ -63,7 +65,8 @@
       /* 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));
+      background-color: var(--ui-control-surface, var(--ui-surface-elevated));
+      background-image: var(--ui-surface-highlight, none);
       box-shadow: var(--ui-control-inset);
       overflow: hidden;
       /* A press anywhere in the frame focuses the input. */

package/styles/ui-input.css

@@ -75,7 +75,8 @@
       border: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width))) solid
         var(--ui-input-border, var(--_ui-default-input-border, var(--ui-control-border, var(--ui-border-strong))));
       border-radius: var(--ui-input-radius, var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md))));
-      background: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-color: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
+      background-image: var(--_ui-default-input-highlight, var(--ui-surface-highlight, none));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-tight);

package/styles/ui-light-editor.css

@@ -0,0 +1,28 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-light-editor"] { --html-next-scope-owner: "ui-light-editor" !important; }
+}
+@scope ([data-component~="ui-light-editor"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-light-editor"]) { display: grid !important; gap: var(--ui-space-3) !important; min-inline-size: 0; padding: 0 !important; margin: 0 !important; }
+    .stage { box-sizing: border-box !important; display: block !important; block-size: 13rem; padding: calc(var(--ui-control-min-block-size) / 2) !important; border: var(--ui-border-width) solid var(--ui-control-border); border-radius: var(--ui-field-radius, var(--ui-radius-md)); background: var(--ui-neutral-surface, var(--ui-surface)); }
+    .plane { 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-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
+    .specimen { position: absolute; inset: 0; display: grid !important; place-items: center !important; }
+    .source { position: absolute; left: 50%; top: 0; translate: -50% -50%; display: grid !important; place-items: center !important; inline-size: max(2rem, var(--ui-control-min-block-size)); block-size: max(2rem, var(--ui-control-min-block-size)); padding: 0 !important; margin: 0 !important; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; }
+    .source:where(:not([data-component], [data-slotted]))::after { content: ""; inline-size: 1rem; block-size: 1rem; border: var(--ui-border-width) solid var(--ui-accent); border-radius: 50%; background: var(--ui-surface-raised); box-shadow: 0 0 0 var(--ui-space-2) color-mix(in srgb, var(--ui-accent) 12%, transparent), var(--ui-shadow-sm); }
+    .source:active { cursor: grabbing; }
+    .source:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-ring); outline-offset: var(--ui-space-1); }
+    .source:disabled { cursor: not-allowed; }
+    .source:disabled:where(:not([data-component], [data-slotted]))::after { background: var(--ui-disabled-surface); border-color: var(--ui-disabled-border); box-shadow: none; }
+    .coordinates { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-space-2) !important; }
+    .hint { font-size: var(--ui-font-size-sm); color: var(--ui-text-secondary); }
+    @media (forced-colors: active) { .source:where(:not([data-component], [data-slotted]))::after { background: Canvas; border-color: CanvasText; } .source:focus-visible { outline-color: Highlight; } }
+}
+@scope ([data-component~="ui-light-editor"]) to ([data-component]) {
+@media (forced-colors: active) { }
+}

package/styles/ui-menu.css

@@ -58,6 +58,7 @@
     }
 
     :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);
@@ -99,6 +100,67 @@
       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:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+        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),
+          var(--ui-material-glow, 0 0 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;
@@ -156,6 +218,18 @@
 
     /* 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 {
     }
 

package/styles/ui-number-input.css

@@ -0,0 +1,34 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-number-input"] { --html-next-scope-owner: "ui-number-input" !important; }
+}
+@scope ([data-component~="ui-number-input"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="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;
+    }
+    :scope:where([data-component~="ui-number-input"])[hidden] {
+      display: none !important;
+    }
+}
+@scope ([data-slotted~="ui-number-input"]:not([data-component])) to ([data-component], [data-slotted]) {
+:where([data-component~="ui-number-input"]):where(:scope, :not([data-component], [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([data-component~="ui-number-input"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-number-input"]))) {
+      display: none !important;
+    }
+}