@threadlabs/looma 0.34.0 → 0.35.0

package/vue/components.css

@@ -392,9 +392,6 @@ svg {
 /* A count can keep its containing control's contrasting ink instead of reversing it.
    The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
 
-/* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
-   surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
-
 /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
 /* A visible glyph needs fixed geometry, unlike a content-sized pill or a hidden-label dot. */
@@ -675,7 +672,34 @@ svg {
     box-shadow: none;
 }
 :scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]:where([data-hn-ui-badge]) {
-    color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+    --_badge-outline-surface: var(
+      --ui-badge-surface,
+      var(--_badge-color-surface, color-mix(in srgb, var(--ui-surface-raised) 88%, transparent))
+    );
+    color: var(--ui-badge-text, var(--_badge-color-text, var(--ui-text-primary)));
+}
+:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]:not([data-ui-badge-state~="shape=circle"]):where([data-hn-ui-badge]) {
+    border-color: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-outline-surface)));
+}
+:scope[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-ui-badge-state~="shape=circle"]:where([data-hn-ui-badge]) {
+    --_badge-outline-surface: var(
+      --ui-badge-surface,
+      var(
+        --_badge-color-surface,
+        light-dark(
+          color-mix(
+            in srgb,
+            var(--ui-surface-raised) var(--ui-badge-circle-opacity, 66%),
+            transparent
+          ),
+          color-mix(
+            in srgb,
+            var(--ui-surface-raised) var(--ui-badge-circle-opacity, 56%),
+            transparent
+          )
+        )
+      )
+    );
 }
 :scope[data-ui-badge-state~="variant=outline"]:where([data-hn-ui-badge]) {
     --_badge-surface: var(--ui-surface-default);
@@ -1134,7 +1158,7 @@ svg,.arc {
 :scope:where([data-hn-ui-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. */
     --_ui-action-start: 1px;
     --_ui-action-edge: var(
       --ui-action-edge,
@@ -1150,6 +1174,8 @@ svg,.arc {
     --_ui-action-shadow:
       var(--_ui-action-edge),
       0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+    --_tone-highlight: var(--ui-accent-highlight, none);
+    --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
     --_hue: var(--ui-accent);
     --_hue-hover: var(--ui-accent-hover);
     --_hue-active: var(--ui-accent-active);
@@ -1197,8 +1223,10 @@ svg,.arc {
     line-height: var(--ui-line-height-tight);
     padding: var(--ui-control-inset-block-md, var(--ui-space-2))
       var(--ui-action-inset-md, var(--ui-space-3)) !important;
-    background-image: none;
-    box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+    background-image: var(--ui-surface-highlight, none);
+    box-shadow:
+      var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--_tone-glow);
     cursor: pointer;
     transition:
       scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
@@ -1307,7 +1335,10 @@ svg,.arc {
     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)));
+    background-image: var(--_tone-highlight);
+    box-shadow:
+      var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
+      var(--_tone-glow);
 }
 :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);
@@ -1320,13 +1351,28 @@ svg,.arc {
     box-shadow: var(--ui-pressed);
 }
 :scope[data-tone="neutral"]:where([data-hn-ui-button]) {
+    --_tone-highlight: var(--ui-neutral-highlight, none);
+    --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
     --_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-tone="neutral"][data-appearance="solid"]:where([data-hn-ui-button]) {
+    border-color: var(--ui-button-border, var(--ui-control-border));
+    background-color: var(--ui-button-surface, var(--ui-neutral-surface));
+    color: var(--ui-button-text, var(--ui-text));
+}
+:scope[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+    background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+}
+:scope[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]):where([data-hn-ui-button]) {
+    background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+}
 :scope[data-tone="danger"]:where([data-hn-ui-button]),:scope[data-appearance="danger"]:where([data-hn-ui-button]) {
+    --_tone-highlight: var(--ui-danger-highlight, none);
+    --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
     --_hue: var(--ui-danger);
     --_hue-hover: var(--ui-danger-hover);
     --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
@@ -1334,6 +1380,8 @@ svg,.arc {
     --_on-hue: var(--ui-on-danger);
 }
 :scope[data-tone="success"]:where([data-hn-ui-button]) {
+    --_tone-highlight: var(--ui-success-highlight, none);
+    --_tone-glow: var(--ui-success-glow, 0 0 transparent);
     --_hue: var(--ui-success);
     --_hue-hover: var(--ui-success-hover);
     --_hue-active: var(--ui-success-active);
@@ -1341,6 +1389,8 @@ svg,.arc {
     --_on-hue: var(--ui-success-on-strong);
 }
 :scope[data-tone="warning"]:where([data-hn-ui-button]) {
+    --_tone-highlight: var(--ui-warning-highlight, none);
+    --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
     --_hue: var(--ui-warning);
     --_hue-hover: var(--ui-warning-hover);
     --_hue-active: var(--ui-warning-active);
@@ -1348,6 +1398,8 @@ svg,.arc {
     --_on-hue: var(--ui-warning-on-strong);
 }
 :scope[data-tone="info"]:where([data-hn-ui-button]) {
+    --_tone-highlight: var(--ui-info-highlight, none);
+    --_tone-glow: var(--ui-info-glow, 0 0 transparent);
     --_hue: var(--ui-info);
     --_hue-hover: var(--ui-info-hover);
     --_hue-active: var(--ui-info-active);
@@ -1684,6 +1736,7 @@ html[data-ui-input-modality="touch"]
 @scope (.ui-card) to ([data-hn]) {
 :scope:where([data-hn-ui-card]) {
     --_ui-card-surface: var(--ui-surface-raised);
+    --_ui-card-elevation: 0 0 0 transparent;
     --_ui-selection-context-surface: initial;
     --_ui-selection-context-border: initial;
     --_ui-selection-context-text: initial;
@@ -1714,10 +1767,11 @@ html[data-ui-input-modality="touch"]
     --_ui-card-surface: var(--ui-surface-muted);
 }
 :scope[data-ui-card-state~="variant=elevated"]:where([data-hn-ui-card]) {
+    --_ui-card-elevation: var(--ui-shadow-lg);
     border-color: var(--ui-border-subtle);
     box-shadow: var(--ui-shadow-lg);
 }
-:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card]) {
+:scope[data-ui-card-state~="treatment=expressive"]: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(
@@ -1726,6 +1780,7 @@ html[data-ui-input-modality="touch"]
     border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
     border-color: transparent;
     background:
+      var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
       linear-gradient(var(--_ui-card-surface), var(--_ui-card-surface)) padding-box,
       linear-gradient(
       var(--ui-material-glass, var(--ui-surface-raised)),
@@ -1733,7 +1788,8 @@ html[data-ui-input-modality="touch"]
     ) border-box,
       var(--_ui-card-surface) padding-box;
     box-shadow:
-      var(--ui-shadow-lg),
+      var(--_ui-card-elevation),
+      var(--ui-material-glow, 0 0 transparent),
       inset 0 0 0 var(--ui-border-width) var(--ui-material-edge, var(--ui-border-strong));
     backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px))
       saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
@@ -1741,12 +1797,12 @@ html[data-ui-input-modality="touch"]
       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]) {
+:scope[data-ui-card-state~="treatment=expressive"]: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]) {
+:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card]) {
       background: var(--_ui-card-surface);
       border-width: var(--ui-border-width);
       border-color: var(--ui-border-strong);
@@ -1755,7 +1811,7 @@ html[data-ui-input-modality="touch"]
 }
 }
 @media (forced-colors: active) {
-:scope[data-ui-card-state~="variant=glass"]:where([data-hn-ui-card]) {
+:scope[data-ui-card-state~="treatment=expressive"]:where([data-hn-ui-card]) {
       background: Canvas;
       color: CanvasText;
       border: var(--ui-border-width) solid CanvasText;
@@ -1785,10 +1841,6 @@ html[data-ui-input-modality="touch"]
 }
 :scope[data-ui-card-state~="tone=danger"]:where([data-hn-ui-card]) {
     border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-    border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
-    /* An accent edge keeps the corners on its side straight. */
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
     --_ui-card-surface: var(--ui-danger-soft);
 }
 :scope[data-ui-card-state~="tone=accent"]:where([data-hn-ui-card]),:scope[data-ui-card-state~="tone=info"]:where([data-hn-ui-card]),:scope[data-ui-card-state~="tone=success"]:where([data-hn-ui-card]),:scope[data-ui-card-state~="tone=warning"]:where([data-hn-ui-card]),:scope[data-ui-card-state~="tone=danger"]:where([data-hn-ui-card]) {
@@ -1836,7 +1888,7 @@ html[data-ui-input-modality="touch"]
 /* The label, and under it an optional line saying what the choice means. */
 
 /* Centre the tick's box and lift it slightly for the rotated check shape. */
-@keyframes ui-checkbox-check-0e08e52b {
+@keyframes ui-checkbox-check-4950a023 {
 from {
     opacity: 0;
     transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(0.55);
@@ -1924,7 +1976,8 @@ input:where([data-hn-ui-checkbox]) {
     margin: max(0px, calc((1lh - var(--_ui-checkbox-size, 1.125rem)) / 2)) 0 0 !important;
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
     border-radius: min(var(--ui-radius-sm), calc(var(--_ui-checkbox-size, 1.125rem) / 4));
-    background: var(--ui-control-surface, var(--ui-surface-default));
+    background-color: var(--ui-control-surface, var(--ui-surface-default));
+    background-image: var(--ui-surface-highlight, none);
     box-shadow: var(--ui-control-inset);
     cursor: pointer;
     transition:
@@ -1940,7 +1993,8 @@ input:where([data-hn-ui-checkbox])::after {
 }
 input:checked:where([data-hn-ui-checkbox]),input:indeterminate:where([data-hn-ui-checkbox]) {
     border-color: var(--ui-accent-solid);
-    background: var(--ui-accent-solid);
+    background-color: var(--ui-accent-solid);
+    background-image: var(--ui-accent-highlight, none);
     box-shadow: var(--ui-control-inset);
 }
 input:checked:where([data-hn-ui-checkbox])::after {
@@ -1956,7 +2010,7 @@ input:checked:where([data-hn-ui-checkbox])::after {
       calc(var(--_ui-checkbox-size) * 0.125 / 1.125) 0;
     opacity: 1;
     transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg);
-    animation: ui-checkbox-check-0e08e52b var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
+    animation: ui-checkbox-check-4950a023 var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
 }
 input:indeterminate:where([data-hn-ui-checkbox])::after {
     inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto;
@@ -2204,10 +2258,11 @@ input:focus-visible:where([data-hn-ui-checkbox]) {
       --ui-input-radius,
       var(--_ui-default-input-radius, var(--ui-field-radius, var(--ui-radius-md)))
     );
-    background: var(
+    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);
@@ -3761,7 +3816,9 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
 :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. */
+       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,
@@ -3788,6 +3845,8 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     --_ui-action-start: -1px;
 }
 :scope[data-tone="accent"]:where([data-hn-ui-icon-button]) {
+    --_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));
@@ -3799,6 +3858,8 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     color: var(--_icon-button-text);
 }
 :scope[data-tone="danger"]:where([data-hn-ui-icon-button]) {
+    --_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);
@@ -3813,6 +3874,8 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     color: var(--_icon-button-text);
 }
 :scope[data-tone="success"]:where([data-hn-ui-icon-button]) {
+    --_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);
@@ -3827,6 +3890,8 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     color: var(--_icon-button-text);
 }
 :scope[data-tone="warning"]:where([data-hn-ui-icon-button]) {
+    --_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);
@@ -3841,6 +3906,8 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     color: var(--_icon-button-text);
 }
 :scope[data-tone="info"]:where([data-hn-ui-icon-button]) {
+    --_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);
@@ -3855,9 +3922,11 @@ button:where(:scope, :scope *):where([data-hn-ui-combobox]) {
     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);
+    --_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[data-ui-icon-button-state~="anticipatory"]:where([data-hn-ui-icon-button]) {
     position: relative;
@@ -4013,24 +4082,25 @@ html[data-ui-input-modality="touch"] :scope:where([data-hn-ui-icon-button])::aft
       --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[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;
+    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: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. */
@@ -4514,13 +4584,13 @@ dd:where([data-hn-ui-description-item]) {
 /* A CSS-drawn X. */
 
 /* A touch target, like Button on coarse pointers. */
-@keyframes ui-dialog-enter-ea8be62a {
+@keyframes ui-dialog-enter-0eef3ecb {
 from {
     opacity: 0;
     transform: scale(0.96);
 }
 }
-@keyframes ui-dialog-backdrop-enter-ea8be62a {
+@keyframes ui-dialog-backdrop-enter-0eef3ecb {
 from {
     background-color: transparent;
 }
@@ -4588,6 +4658,7 @@ from {
       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,
@@ -4610,6 +4681,7 @@ from {
         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)
@@ -4651,7 +4723,7 @@ from {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-ea8be62a var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-0eef3ecb var(--ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[data-ui-dialog-state~="size=sm"]:where([data-hn-ui-dialog]) {
@@ -4772,7 +4844,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-ea8be62a var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-0eef3ecb var(--_ui-dialog-duration, var(--ui-motion-base))
       var(--ui-motion-ease);
 }
 :scope[open][data-ui-backdrop-hidden]:where([data-hn-ui-dialog])::backdrop {
@@ -4844,6 +4916,7 @@ footer:empty:where([data-hn-ui-dialog]) {
       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,
@@ -4866,6 +4939,7 @@ footer:empty:where([data-hn-ui-dialog]) {
         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)
@@ -4907,7 +4981,7 @@ footer:empty:where([data-hn-ui-dialog]) {
     pointer-events: auto;
     opacity: 1;
     transform: scale(1);
-    animation: ui-dialog-enter-ea8be62a var(--ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-enter-0eef3ecb 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]) {
@@ -5036,7 +5110,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-ea8be62a var(--_ui-dialog-duration, var(--ui-motion-base))
+    animation: ui-dialog-backdrop-enter-0eef3ecb 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 {
@@ -5481,6 +5555,7 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
       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,
@@ -5503,6 +5578,7 @@ footer:empty:where(:scope, :scope *):where([data-hn-ui-dialog]) {
         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)
@@ -6085,6 +6161,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     --_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;
@@ -6096,6 +6173,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     --_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;
@@ -6106,7 +6184,8 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
     /* 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. */
@@ -6333,10 +6412,11 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
       --ui-textarea-radius,
       var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)))
     );
-    background: var(
+    background-color: var(
       --ui-textarea-surface,
       var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated)))
     );
+    background-image: var(--_ui-default-textarea-highlight, var(--ui-surface-highlight, none));
     color: var(--ui-text-primary);
     font: inherit;
     line-height: var(--ui-line-height-md);
@@ -6701,6 +6781,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
       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,
@@ -6723,6 +6804,7 @@ legend.sr-only:where([data-hn-ui-radio-group]) {
         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),
+        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)
@@ -8511,6 +8593,109 @@ ul:where([data-hn-ui-editor-slash-menu-group]) {
 }
 }
 
+@scope (.ui-light-editor) to ([data-hn]) {
+:scope:where([data-hn-ui-light-editor]) {
+    display: grid !important;
+    gap: var(--ui-space-3) !important;
+    min-inline-size: 0;
+    padding: 0 !important;
+    margin: 0 !important;
+}
+.stage:where([data-hn-ui-light-editor]) {
+    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:where([data-hn-ui-light-editor]) {
+    position: relative;
+    display: block !important;
+    inline-size: 100%;
+    block-size: 100%;
+}
+svg:where([data-hn-ui-light-editor]) {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+}
+path:where([data-hn-ui-light-editor]) {
+    fill: none;
+    stroke: var(--ui-border);
+    stroke-width: 1;
+    vector-effect: non-scaling-stroke;
+}
+.specimen:where([data-hn-ui-light-editor]) {
+    position: absolute;
+    inset: 0;
+    display: grid !important;
+    place-items: center !important;
+}
+.source:where([data-hn-ui-light-editor]) {
+    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([data-hn-ui-light-editor])::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:where([data-hn-ui-light-editor]) {
+    cursor: grabbing;
+}
+.source:focus-visible:where([data-hn-ui-light-editor]) {
+    outline: var(--ui-focus-width) solid var(--ui-focus-ring);
+    outline-offset: var(--ui-space-1);
+}
+.source:disabled:where([data-hn-ui-light-editor]) {
+    cursor: not-allowed;
+}
+.source:disabled:where([data-hn-ui-light-editor])::after {
+    background: var(--ui-disabled-surface);
+    border-color: var(--ui-disabled-border);
+    box-shadow: none;
+}
+.coordinates:where([data-hn-ui-light-editor]) {
+    display: grid !important;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    gap: var(--ui-space-2) !important;
+}
+.hint:where([data-hn-ui-light-editor]) {
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-secondary);
+}
+@media (forced-colors: active) {
+.source:where([data-hn-ui-light-editor])::after {
+      background: Canvas;
+      border-color: CanvasText;
+}
+.source:focus-visible:where([data-hn-ui-light-editor]) {
+      outline-color: Highlight;
+}
+}
+}
+
 /* This component's hooks style the element they are set on, and never a nested one. */
 @property --ui-list-gap {
   syntax: "*";
@@ -9893,7 +10078,7 @@ dialog:where([data-hn-ui-search-shell]) {
       var(--ui-control-surface, var(--ui-surface-elevated))
     );
     color: var(--ui-text-primary);
-    color-scheme: light dark;
+    color-scheme: inherit;
     font: inherit;
     line-height: var(--ui-line-height-tight);
     box-shadow: var(--ui-select-shadow, var(--ui-shadow-sm));
@@ -9903,15 +10088,18 @@ dialog:where([data-hn-ui-search-shell]) {
       background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 :scope:where([data-hn-ui-select]) {
+    --_ui-select-highlight: var(--ui-surface-highlight, linear-gradient(transparent, transparent));
     appearance: none;
     padding-inline-end: calc(var(--ui-space-3) + 1.5rem) !important;
-    background-image: var(
-      --ui-select-chevron,
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
-    );
+    background-image:
+      var(
+        --ui-select-chevron,
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+      ),
+      var(--_ui-select-highlight);
     background-repeat: no-repeat;
-    background-position: right var(--ui-space-3) center;
-    background-size: 1.125rem 1.125rem;
+    background-position: right var(--ui-space-3) center, center;
+    background-size: 1.125rem 1.125rem, 100% 100%;
 }
 :scope:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])):where([data-hn-ui-select]) {
     border-color: var(
@@ -9943,6 +10131,7 @@ dialog:where([data-hn-ui-search-shell]) {
     );
 }
 :scope:disabled:where([data-hn-ui-select]) {
+    --_ui-select-highlight: none;
     background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     color: var(--ui-disabled-text);
     box-shadow: none;
@@ -9953,15 +10142,17 @@ dialog:where([data-hn-ui-search-shell]) {
     padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
     padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1))
       !important;
-    background-position: right var(--ui-space-2) center;
-    background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
+    background-position: right var(--ui-space-2) center, center;
+    background-size:
+      var(--ui-icon-size-sm) var(--ui-icon-size-sm),
+      100% 100%;
     font-size: var(--ui-font-size-sm);
 }
 :scope[data-ui-select-state~="size=lg"]:where([data-hn-ui-select]) {
     min-block-size: var(--ui-control-size-lg);
     padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
     padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
-    background-position: right var(--ui-space-4) center;
+    background-position: right var(--ui-space-4) center, center;
     font-size: var(--ui-font-size-md);
 }
 @media (pointer: coarse) {
@@ -10418,6 +10609,7 @@ input:where([data-hn-ui-switch]) {
     border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
     border-radius: var(--ui-radius-round);
     background-color: var(--ui-control-surface, var(--ui-surface-default));
+    background-image: var(--ui-surface-highlight, none);
     box-shadow: var(--ui-control-inset);
     cursor: pointer;
     transition:
@@ -10441,6 +10633,7 @@ input:where([data-hn-ui-switch])::after {
 }
 input:checked:where([data-hn-ui-switch]) {
     background-color: var(--ui-accent-solid);
+    background-image: var(--ui-accent-highlight, none);
     border-color: var(--ui-accent-solid);
 }
 input:checked:where([data-hn-ui-switch])::after {
@@ -10461,6 +10654,7 @@ input:focus-visible:where([data-hn-ui-switch]) {
 :scope[data-ui-switch-state~="disabled"] input:where([data-hn-ui-switch]) {
     border-color: var(--ui-disabled-border);
     background-color: var(--ui-disabled-surface);
+    background-image: none;
     box-shadow: none;
     cursor: not-allowed;
 }
@@ -13335,7 +13529,7 @@ html[data-ui-input-modality="touch"]
     :scope:where([data-component~="ui-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. */
       --_ui-action-start: 1px;
       --_ui-action-edge: var(
         --ui-action-edge,
@@ -13343,6 +13537,8 @@ html[data-ui-input-modality="touch"]
         inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
       );
       --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+      --_tone-highlight: var(--ui-accent-highlight, none);
+      --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
       --_hue: var(--ui-accent);
       --_hue-hover: var(--ui-accent-hover);
       --_hue-active: var(--ui-accent-active);
@@ -13393,8 +13589,8 @@ html[data-ui-input-modality="touch"]
       white-space: var(--ui-button-white-space, inherit);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-action-inset-md, var(--ui-space-3)) !important;
-      background-image: none;
-      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+      background-image: var(--ui-surface-highlight, none);
+      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
       cursor: pointer;
       transition:
         scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
@@ -13526,7 +13722,8 @@ html[data-ui-input-modality="touch"]
       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)));
+      background-image: var(--_tone-highlight);
+      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
     }
 
     :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"]) {
@@ -13544,6 +13741,8 @@ 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-tone="neutral"] {
+      --_tone-highlight: var(--ui-neutral-highlight, none);
+      --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
       --_hue: var(--ui-text);
       --_hue-hover: var(--ui-text);
       --_hue-active: var(--ui-text);
@@ -13551,7 +13750,21 @@ html[data-ui-input-modality="touch"]
       --_on-hue: var(--ui-surface);
     }
 
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"] {
+      border-color: var(--ui-button-border, var(--ui-control-border));
+      background-color: var(--ui-button-surface, var(--ui-neutral-surface));
+      color: var(--ui-button-text, var(--ui-text));
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+    }
+
     :scope:where([data-component~="ui-button"])[data-tone="danger"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
+      --_tone-highlight: var(--ui-danger-highlight, none);
+      --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
       --_hue: var(--ui-danger);
       --_hue-hover: var(--ui-danger-hover);
       --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
@@ -13560,6 +13773,8 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="success"] {
+      --_tone-highlight: var(--ui-success-highlight, none);
+      --_tone-glow: var(--ui-success-glow, 0 0 transparent);
       --_hue: var(--ui-success);
       --_hue-hover: var(--ui-success-hover);
       --_hue-active: var(--ui-success-active);
@@ -13568,6 +13783,8 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="warning"] {
+      --_tone-highlight: var(--ui-warning-highlight, none);
+      --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
       --_hue: var(--ui-warning);
       --_hue-hover: var(--ui-warning-hover);
       --_hue-active: var(--ui-warning-active);
@@ -13576,6 +13793,8 @@ html[data-ui-input-modality="touch"]
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="info"] {
+      --_tone-highlight: var(--ui-info-highlight, none);
+      --_tone-glow: var(--ui-info-glow, 0 0 transparent);
       --_hue: var(--ui-info);
       --_hue-hover: var(--ui-info-hover);
       --_hue-active: var(--ui-info-active);
@@ -14210,7 +14429,9 @@ html[data-ui-input-modality="touch"]
     :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,
@@ -14231,6 +14452,8 @@ html[data-ui-input-modality="touch"]
     }
 
     :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));
@@ -14239,6 +14462,8 @@ html[data-ui-input-modality="touch"]
     }
 
     :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);
@@ -14250,6 +14475,8 @@ html[data-ui-input-modality="touch"]
     }
 
     :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);
@@ -14261,6 +14488,8 @@ html[data-ui-input-modality="touch"]
     }
 
     :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);
@@ -14272,6 +14501,8 @@ html[data-ui-input-modality="touch"]
     }
 
     :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);
@@ -14284,9 +14515,11 @@ html[data-ui-input-modality="touch"]
 
     /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
     :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);
+      --_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"] {
@@ -14454,16 +14687,16 @@ html[data-ui-input-modality="touch"]
     :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-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"]) {
@@ -14849,6 +15082,7 @@ html[data-ui-input-modality="touch"]
       --_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;
@@ -14864,6 +15098,7 @@ html[data-ui-input-modality="touch"]
           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))
         )
@@ -15251,6 +15486,7 @@ html[data-ui-input-modality="touch"]
       --_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:
+        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;
@@ -15266,6 +15502,7 @@ html[data-ui-input-modality="touch"]
           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),
+          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))
         )
@@ -16060,7 +16297,8 @@ html[data-ui-input-modality="touch"]
       margin: max(0px, calc((1lh - var(--_ui-checkbox-size, 1.125rem)) / 2)) 0 0 !important;
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: min(var(--ui-radius-sm), calc(var(--_ui-checkbox-size, 1.125rem) / 4));
-      background: var(--ui-control-surface, var(--ui-surface-default));
+      background-color: var(--ui-control-surface, var(--ui-surface-default));
+      background-image: var(--ui-surface-highlight, none);
       box-shadow: var(--ui-control-inset);
       cursor: pointer;
       transition:
@@ -16079,7 +16317,8 @@ html[data-ui-input-modality="touch"]
     input:checked,
     input:indeterminate {
       border-color: var(--ui-accent-solid);
-      background: var(--ui-accent-solid);
+      background-color: var(--ui-accent-solid);
+      background-image: var(--ui-accent-highlight, none);
       box-shadow: var(--ui-control-inset);
     }
 
@@ -16508,7 +16747,8 @@ html[data-ui-input-modality="touch"]
       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);