@threadlabs/looma 0.34.0 → 0.35.0

package/styles/ui-badge.css

@@ -295,10 +295,18 @@
       box-shadow: none;
     }
 
-    /* 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. */
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
-      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:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]:not([data-ui-badge-state~="shape=circle"]) {
+      border-color: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-outline-surface)));
+    }
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-ui-badge-state~="shape=circle"] {
+      --_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:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=outline"] {
@@ -542,9 +550,6 @@
     /* 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. */
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {

package/styles/ui-button.css

@@ -84,7 +84,7 @@
     :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,
@@ -92,6 +92,8 @@
         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);
@@ -142,8 +144,8 @@
       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),
@@ -275,7 +277,8 @@
       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"]) {
@@ -293,6 +296,8 @@
     /* 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);
@@ -300,7 +305,21 @@
       --_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));
@@ -309,6 +328,8 @@
     }
 
     :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);
@@ -317,6 +338,8 @@
     }
 
     :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);
@@ -325,6 +348,8 @@
     }
 
     :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);

package/styles/ui-card.css

@@ -11,6 +11,7 @@
        needs no layout of its own. */
     :scope:where([data-component~="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;
@@ -45,33 +46,36 @@
     }
 
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=elevated"] {
+      --_ui-card-elevation: var(--ui-shadow-lg);
       border-color: var(--ui-border-subtle);
       box-shadow: var(--ui-shadow-lg);
     }
 
-    :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
       --_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:
+        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)), var(--ui-material-glass, var(--ui-surface-raised))) 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));
       -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:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
         background: var(--_ui-card-surface);
       }
     }
     @media (prefers-reduced-transparency: reduce) {
-      :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
         background: var(--_ui-card-surface);
         border-width: var(--ui-border-width);
         border-color: var(--ui-border-strong);
@@ -80,7 +84,7 @@
       }
     }
     @media (forced-colors: active) {
-      :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
         background: Canvas;
         color: CanvasText;
         border: var(--ui-border-width) solid CanvasText;
@@ -116,10 +120,6 @@
 
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=danger"] {
       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);
     }
 

package/styles/ui-checkbox.css

@@ -91,7 +91,8 @@
       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:
@@ -110,7 +111,8 @@
     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);
     }
 

package/styles/ui-dialog.css

@@ -81,6 +81,7 @@
       --_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;
@@ -96,6 +97,7 @@
           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))
         )
@@ -400,6 +402,7 @@
       --_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;
@@ -415,6 +418,7 @@
           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))
         )

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,
@@ -109,6 +111,8 @@
     }
 
     :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));
@@ -117,6 +121,8 @@
     }
 
     :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);
@@ -128,6 +134,8 @@
     }
 
     :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);
@@ -139,6 +147,8 @@
     }
 
     :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);
@@ -150,6 +160,8 @@
     }
 
     :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);
@@ -162,9 +174,11 @@
 
     /* 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"] {
@@ -332,16 +346,16 @@
     :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"]) {

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

@@ -110,6 +110,7 @@
       --_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;
@@ -125,6 +126,7 @@
           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))
         )

package/styles/ui-popover.css

@@ -81,6 +81,7 @@
       --_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;
@@ -96,6 +97,7 @@
           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))
         )

package/styles/ui-select.css

@@ -61,7 +61,7 @@
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-select-surface, 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));
@@ -74,15 +74,16 @@
     /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
     :scope:where([data-component~="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")
-      );
+      ), 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:where([data-component~="ui-select"]):hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:is(:user-invalid, [data-user-invalid])) {
@@ -114,6 +115,7 @@
     }
 
     :scope:where([data-component~="ui-select"]):disabled {
+      --_ui-select-highlight: none;
       background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       color: var(--ui-disabled-text);
       box-shadow: none;
@@ -124,8 +126,8 @@
       min-block-size: var(--ui-control-size-sm);
       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);
     }
 
@@ -133,7 +135,7 @@
       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);
     }
 

package/styles/ui-switch.css

@@ -84,6 +84,7 @@
       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: background-color var(--ui-motion-base) var(--ui-motion-ease), border-color var(--ui-motion-base) var(--ui-motion-ease);
@@ -105,6 +106,7 @@
 
     input:checked {
       background-color: var(--ui-accent-solid);
+      background-image: var(--ui-accent-highlight, none);
       border-color: var(--ui-accent-solid);
     }
 
@@ -128,6 +130,7 @@
     :scope:where([data-component~="ui-switch"])[data-ui-switch-state~="disabled"] input {
       border-color: var(--ui-disabled-border);
       background-color: var(--ui-disabled-surface);
+      background-image: none;
       box-shadow: none;
       cursor: not-allowed;
     }

package/styles/ui-textarea.css

@@ -72,7 +72,8 @@
       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))));
+      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);

package/theme-light.css

@@ -2,6 +2,7 @@
   :root:not([data-theme], [data-contrast="high"]),
   [data-theme="light"] {
     color-scheme: light;
+    --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");
     /* The seeds, and only the seeds. Neutrals, hovers, tints, and disabled colours are mixed from
        these in tokens.css, so a product themes Looma by changing these eleven values. */
     --ui-surface: #ffffff;

package/theme-system.css

@@ -2,6 +2,9 @@
    Existing public roles remain the customization interface; no component selectors. */
 /* Resolve shared geometry once where it is declared, rather than once per consuming
    control's font. Palette roles remain unregistered so light-dark resolves locally. */
+/* Reserve the same order when the remembered theme arrives before baseline CSS. */
+@layer tokens, base, theme, components;
+
 @property --ui-font-size { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --ui-control-size { syntax: "<length>"; inherits: true; initial-value: 40px; }
 @property --ui-radius-md { syntax: "<length>"; inherits: true; initial-value: 8px; }
@@ -18,6 +21,12 @@
     --ui-overlay-translucency: 0;
     --ui-glassiness: 0;
     --ui-surface-separation: 0;
+    --ui-finish: 0;
+    --ui-glow: 0;
+    --ui-light-x: 0.5;
+    --ui-light-y: 0;
+    --ui-light-spread: 0.5;
+    --ui-light-strength: 0.65;
   }
 
   :where(:root, [data-theme], [data-contrast]) {
@@ -58,26 +67,47 @@
     --_ui-theme-outer: max(0, var(--ui-outer-depth));
     --_ui-theme-inner: max(0, var(--ui-inner-depth));
     --_ui-theme-edge: clamp(0, var(--ui-edge-light), 1);
-    --_ui-theme-edge-paint: inset 1px 1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.08)), inset -1px -1px 0 rgb(0 0 0 / calc(var(--_ui-theme-edge) * 0.08));
+    --_ui-light-inline: calc((0.5 - var(--ui-light-x)) * 2px);
+    --_ui-shadow-x: calc((0.5 - var(--ui-light-x)) * 2);
+    --_ui-shadow-y: calc((0.5 - var(--ui-light-y)) * 2);
+    --_ui-light-block: calc((0.5 - var(--ui-light-y)) * 2px);
+    --_ui-theme-edge-paint: inset var(--_ui-light-inline) var(--_ui-light-block) 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * var(--ui-light-strength) * 0.3)), inset calc(-1 * var(--_ui-light-inline)) calc(-1 * var(--_ui-light-block)) 0 rgb(0 0 0 / calc(var(--_ui-theme-edge) * 0.1));
     --ui-action-edge: var(--_ui-theme-edge-paint);
-    --ui-shadow-xs: 0 calc(1px * var(--_ui-theme-outer)) calc(2px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.08);
-    --ui-shadow-sm: 0 calc(1px * var(--_ui-theme-outer)) calc(3px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(12px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-xs: calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(2px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.08);
+    --ui-shadow-sm: calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(1px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(3px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(12px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
     --ui-shadow-md: var(--ui-shadow-sm);
-    --ui-shadow-lg: 0 calc(8px * var(--_ui-theme-outer)) calc(24px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), 0 calc(4px * var(--_ui-theme-outer)) calc(8px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
+    --ui-shadow-lg: calc(8px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(8px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(24px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.12), calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-x)) calc(4px * var(--_ui-theme-outer) * var(--_ui-shadow-y)) calc(8px * var(--_ui-theme-outer)) rgb(0 0 0 / 0.06);
     --ui-shadow-xl: var(--ui-shadow-lg);
-    --ui-action-shadow: var(--ui-shadow-sm);
+    --ui-action-shadow: var(--ui-action-edge), var(--ui-shadow-sm);
     --ui-raised: var(--ui-shadow-sm);
     --ui-elevation-tooltip: var(--ui-shadow-sm);
     --ui-elevation-overlay: var(--ui-shadow-lg);
     --ui-elevation-dialog: var(--ui-shadow-lg);
-    --ui-control-inset: inset 0 calc(1px * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset 0 -1px 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * 0.18));
-    --ui-pressed: inset 0 calc(2px * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
+    --ui-control-inset: inset calc(var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(var(--_ui-light-block) * var(--_ui-theme-inner)) calc(3px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.15), inset calc(-1 * var(--_ui-light-inline)) calc(-1 * var(--_ui-light-block)) 0 rgb(255 255 255 / calc(var(--_ui-theme-edge) * var(--ui-light-strength) * 0.18)), var(--ui-material-glow);
+    --ui-pressed: inset calc(2 * var(--_ui-light-inline) * var(--_ui-theme-inner)) calc(2 * var(--_ui-light-block) * var(--_ui-theme-inner)) calc(4px * var(--_ui-theme-inner)) rgb(0 0 0 / 0.2);
     --ui-overlay-surface: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 100%), transparent);
     /* Decorative outer material is allowed to transmit the scene. Content keeps
        its own opaque plane; changing the scene cannot undermine text contrast. */
     --ui-material-content: var(--ui-surface-raised);
     --ui-material-glass: color-mix(in srgb, var(--ui-surface-raised) calc((1 - clamp(0, var(--ui-overlay-translucency), 1)) * 35%), transparent);
     --ui-material-edge: color-mix(in srgb, var(--ui-surface-raised) 80%, var(--ui-text));
+    /* Each role has a bounded reflection colour. Shared source coordinates are
+       relative to each surface, so size and position never change the lighting. */
+    --ui-surface-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-surface-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-neutral-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-neutral-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-accent-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-accent-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-danger-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-danger-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-success-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-success-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-warning-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-warning-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-info-highlight: radial-gradient(ellipse calc(35% + var(--ui-light-spread) * 165%) calc(55% + var(--ui-light-spread) * 200%) at calc(var(--ui-light-x) * 100%) calc(var(--ui-light-y) * 100%), color-mix(in srgb, var(--ui-info-reflection, var(--ui-surface-raised)) calc(var(--ui-finish) * var(--ui-light-strength) * 100%), transparent), transparent 85%);
+    --ui-material-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-accent) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-neutral-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-text) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-accent-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-accent) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-danger-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-danger) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-success-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-success) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-warning-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-warning) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-info-glow: 0 0 calc(18px * var(--ui-glow)) color-mix(in srgb, var(--ui-info) calc(var(--ui-glow) * var(--ui-light-strength) * 18%), transparent);
+    --ui-raised-highlight: var(--ui-surface-highlight);
 
     /* Existing timing and easing names stay canonical. */
     --ui-motion-press: var(--ui-motion-fast);
@@ -93,4 +123,10 @@
       --ui-press-scale: 1;
     }
   }
+  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+    :where(:root, [data-theme], [data-contrast]) {
+      --ui-finish: 0;
+      --ui-glow: 0;
+    }
+  }
 }