@threadlabs/looma 0.34.0 → 0.35.1

package/components/ui-badge/ui-badge.html

@@ -325,10 +325,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. */
     :host([variant="inverse"][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)));
+    }
+    :host([variant="inverse"][tone="neutral"]:not([shape="circle"])) {
+      border-color: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-outline-surface)));
+    }
+    :host([variant="inverse"][tone="neutral"][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)
+      )));
     }
 
     :host([variant="outline"]) {

package/components/ui-button/ui-button.html

@@ -188,7 +188,7 @@
     :host {
       /* 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,
@@ -196,6 +196,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);
@@ -246,8 +248,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),
@@ -379,7 +381,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(:host[data-appearance="solid"], :host[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
@@ -397,6 +400,8 @@
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
     :host[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);
@@ -404,7 +409,21 @@
       --_on-hue: var(--ui-surface);
     }
 
+    :host[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));
+    }
+    :host[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :host[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+    }
+
     :host[data-tone="danger"], :host[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));
@@ -413,6 +432,8 @@
     }
 
     :host[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);
@@ -421,6 +442,8 @@
     }
 
     :host[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);
@@ -429,6 +452,8 @@
     }
 
     :host[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/components/ui-card/ui-card.html

@@ -2,14 +2,16 @@
   <defs>
     <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
     >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.</prop>
-    <prop name="variant" type="keyword" values="outlined, subtle, elevated, glass" default="outlined"
+    <prop name="variant" type="keyword" values="outlined, subtle, elevated" default="outlined"
     >The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;
-      elevated floats above the page with a shadow, for a view's one card, such as sign-in. glass frames an opaque readable content plane with frosted material;
-      shared glassiness and surface separation govern its treatment.</prop>
+      elevated adds a subtle lift above the page, for a view's one card, such as sign-in. Treatment independently controls decorative material.</prop>
+    <prop name="treatment" type="keyword" values="standard, expressive" default="standard"
+    >How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment.
+      This does not add elevation or require glass.</prop>
     <prop name="padding" type="keyword" values="xs, sm, md, lg" default="md"
     >The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
-    >accent, info, success and warning add a quiet semantic surface. danger retains its strong leading edge for consequential content. Row highlights follow the
+    >accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the
       surface hue; action controls retain their own intent.</prop>
     <prop name="as" type="keyword" values="div, section, article, aside" default="div"
     >The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.</prop>
@@ -25,6 +27,7 @@
        needs no layout of its own. */
     :host {
       --_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;
@@ -59,33 +62,36 @@
     }
 
     :host([variant="elevated"]) {
+      --_ui-card-elevation: var(--ui-shadow-lg);
       border-color: var(--ui-border-subtle);
       box-shadow: var(--ui-shadow-lg);
     }
 
-    :host([variant="glass"]) {
+    :host([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))) {
-      :host([variant="glass"]) {
+      :host([treatment="expressive"]) {
         background: var(--_ui-card-surface);
       }
     }
     @media (prefers-reduced-transparency: reduce) {
-      :host([variant="glass"]) {
+      :host([treatment="expressive"]) {
         background: var(--_ui-card-surface);
         border-width: var(--ui-border-width);
         border-color: var(--ui-border-strong);
@@ -94,7 +100,7 @@
       }
     }
     @media (forced-colors: active) {
-      :host([variant="glass"]) {
+      :host([treatment="expressive"]) {
         background: Canvas;
         color: CanvasText;
         border: var(--ui-border-width) solid CanvasText;
@@ -130,10 +136,6 @@
 
     :host([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/components/ui-checkbox/ui-checkbox.html

@@ -130,7 +130,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:
@@ -149,7 +150,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/components/ui-dialog/ui-dialog.html

@@ -119,6 +119,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;
@@ -134,6 +135,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/components/ui-icon-button/ui-icon-button.html

@@ -133,7 +133,9 @@
     :host {
       /* 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,
@@ -154,6 +156,8 @@
     }
 
     :host[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));
@@ -162,6 +166,8 @@
     }
 
     :host[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);
@@ -173,6 +179,8 @@
     }
 
     :host[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);
@@ -184,6 +192,8 @@
     }
 
     :host[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);
@@ -195,6 +205,8 @@
     }
 
     :host[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);
@@ -207,9 +219,11 @@
 
     /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
     :host[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);
     }
 
     :host([anticipatory]) {
@@ -377,16 +391,16 @@
     :host[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);
     }
 
     :host[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);
     }
 
     :host:hover:enabled:not([aria-disabled="true"]) {

package/components/ui-input/ui-input.html

@@ -108,7 +108,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/components/ui-input-group/ui-input-group.html

@@ -53,6 +53,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;
@@ -64,6 +65,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;
@@ -74,7 +76,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/components/ui-light-editor/ui-light-editor.html

@@ -0,0 +1,45 @@
+<link rel="component" href="../ui-number-input/ui-number-input.html">
+<template component="ui-light-editor" module="./ui-light-editor.js">
+  <defs>
+    <state name="horizontal" type="string" value="50"></state>
+    <state name="vertical" type="string" value="0"></state>
+    <prop name="x" type="number" default="0.5">Horizontal source position from 0 (left) to 1 (right), relative to every surface.</prop>
+    <prop name="y" type="number" default="0">Vertical source position from 0 (top) to 1 (bottom), relative to every surface.</prop>
+    <prop name="label" type="string" default="Light position">Accessible name for the position editor.</prop>
+    <prop name="size" type="keyword" values="sm, md, lg" default="md">Sets both coordinate fields to the shared small, medium or large control height.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents pointer, keyboard and exact edits.</prop>
+    <event name="input" type="object"><prop name="x" type="number" required></prop><prop name="y" type="number" required></prop></event>
+    <event name="change" type="object"><prop name="x" type="number" required></prop><prop name="y" type="number" required></prop></event>
+  </defs>
+  <span>
+    <span class="stage" from:aria-label="$label" role="group">
+      <span class="plane" $ref="plane">
+        <svg viewBox="0 0 100 60" preserveAspectRatio="none" aria-hidden="true"><path d="M0 30 H100 M50 0 V60"></path></svg>
+        <span class="specimen"><slot></slot></span>
+        <button type="button" class="source" $ref="source" from:disabled="$disabled" from:aria-label="concat($label, '. Arrow keys move the source; Shift moves faster.')"></button>
+      </span>
+    </span>
+    <span class="coordinates">
+      <ui-number-input data-coordinate="x" from:value="$horizontal" min="0" max="100" step="1" unit="%" label="Light horizontal position" from:size="$size" from:disabled="$disabled"></ui-number-input>
+      <ui-number-input data-coordinate="y" from:value="$vertical" min="0" max="100" step="1" unit="%" label="Light vertical position" from:size="$size" from:disabled="$disabled"></ui-number-input>
+    </span>
+    <span class="hint">Drag the light, use arrow keys, or enter its position. Top centre is 50%, 0%.</span>
+  </span>
+  <style>
+    :host { 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::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::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::after { background: Canvas; border-color: CanvasText; } .source:focus-visible { outline-color: Highlight; } }
+  </style>
+</template>

package/components/ui-light-editor/ui-light-editor.js

@@ -0,0 +1,53 @@
+const coordinate = value => Number.isFinite(Number(value)) ? Math.round(Math.max(0, Math.min(1, Number(value))) * 100) / 100 : 0.5;
+
+export function connect(host) {
+  const { plane, source } = host.refs;
+  let x = coordinate(host.props.x.value), y = coordinate(host.props.y.value), drag;
+  const listeners = [];
+  const listen = (element, type, fn) => { element.addEventListener(type, fn); listeners.push(() => element.removeEventListener(type, fn)); };
+  const paint = () => {
+    x = coordinate(x); y = coordinate(y);
+    source.style.left = `${x * 100}%`; source.style.top = `${y * 100}%`;
+    source.setAttribute('aria-description', `Horizontal ${Math.round(x * 100)} percent; vertical ${Math.round(y * 100)} percent.`);
+    host.state.horizontal = String(Math.round(x * 100)); host.state.vertical = String(Math.round(y * 100));
+  };
+  const emit = type => host.dispatch(type, { x, y });
+  listen(source, 'pointerdown', event => {
+    if (host.props.disabled.value || event.button !== 0) return;
+    event.preventDefault(); source.focus(); drag = event.pointerId; source.setPointerCapture(drag);
+  });
+  listen(source, 'pointermove', event => {
+    if (drag !== event.pointerId || host.props.disabled.value) return;
+    const rect = plane.getBoundingClientRect(); if (!rect.width || !rect.height) return;
+    x = (event.clientX - rect.left) / rect.width; y = (event.clientY - rect.top) / rect.height;
+    paint(); emit('input');
+  });
+  const end = event => {
+    if (drag !== event.pointerId) return;
+    drag = undefined;
+    if (source.hasPointerCapture(event.pointerId)) source.releasePointerCapture(event.pointerId);
+    if (!host.props.disabled.value) emit('change');
+  };
+  listen(source, 'pointerup', end); listen(source, 'pointercancel', end); listen(source, 'lostpointercapture', end);
+  listen(source, 'keydown', event => {
+    if (host.props.disabled.value || !['ArrowLeft','ArrowRight','ArrowUp','ArrowDown','Home','End'].includes(event.key)) return;
+    event.preventDefault(); const step = event.shiftKey ? .1 : .01;
+    if (event.key === 'Home') { x = .5; y = 0; }
+    else if (event.key === 'End') { x = .5; y = 1; }
+    else if (event.key === 'ArrowLeft') x -= step;
+    else if (event.key === 'ArrowRight') x += step;
+    else if (event.key === 'ArrowUp') y -= step;
+    else y += step;
+    paint(); emit('input'); emit('change');
+  });
+  for (const field of host.element.querySelectorAll('[data-coordinate]')) for (const type of ['input','change']) {
+    listen(field, type, event => {
+      event.stopPropagation(); if (host.props.disabled.value) return;
+      if (field.dataset.coordinate === 'x') x = parseFloat(event.detail.value) / 100;
+      else y = parseFloat(event.detail.value) / 100;
+      paint(); emit(type);
+    });
+  }
+  const stop = host.effect(() => { x = coordinate(host.props.x.value); y = coordinate(host.props.y.value); paint(); });
+  return () => { stop(); listeners.forEach(cleanup => cleanup()); if (drag !== undefined && source.hasPointerCapture(drag)) source.releasePointerCapture(drag); };
+}

package/components/ui-menu/ui-menu.html

@@ -136,6 +136,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;
@@ -151,6 +152,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/components/ui-number-input/ui-number-input.html

@@ -3,6 +3,7 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-number-input" module="./ui-number-input.js">
   <defs>
+    <state name="display" type="string" from="$value"></state>
     <prop name="value" type="string" default="0"
     >Exact value. Arithmetic is calculated on Enter or blur; the resulting value includes unit. Invalid expressions stay visible and expose invalid
       state.</prop>
@@ -30,7 +31,7 @@
       data-ui-field-control
       from:size="$size"
       from:disabled="$disabled"
-      from:value="$value"
+      from:value="$display"
       from:aria-label="$label"
       from:name="$name"
       inputmode="decimal"

package/components/ui-number-input/ui-number-input.js

@@ -7,9 +7,12 @@ export function connect(host) {
   const increase = host.element.querySelector('[data-number-step="increase"]');
   let current = 0;
   let external;
+  let resetValue;
   const unit = () => host.props.unit.value || "";
   const normalize = value => boundedNumber(value, host.props.min.value, host.props.max.value);
-  const paint = value => { current = normalize(value); input.value = numberText(current, unit()); input.removeAttribute("aria-invalid"); input.setCustomValidity(""); input.setAttribute("role", "spinbutton"); input.setAttribute("aria-valuenow", String(current)); input.setAttribute("aria-valuetext", input.value); input.setAttribute("aria-valuemin", String(host.props.min.value)); input.setAttribute("aria-valuemax", String(host.props.max.value)); };
+  // Bind the normalized display, so a later child binding flush cannot restore the
+  // raw prop (for example "51") over its calculated value with units ("51%").
+  const paint = value => { current = normalize(value); input.value = numberText(current, unit()); host.state.display = input.value; input.removeAttribute("aria-invalid"); input.setCustomValidity(""); input.setAttribute("role", "spinbutton"); input.setAttribute("aria-valuenow", String(current)); input.setAttribute("aria-valuetext", input.value); input.setAttribute("aria-valuemin", String(host.props.min.value)); input.setAttribute("aria-valuemax", String(host.props.max.value)); };
   const emit = () => { const value = numberText(current, unit()); host.dispatch("input", { value }); host.dispatch("change", { value }); };
   const commit = () => {
     if (host.props.disabled.value) return;
@@ -37,8 +40,8 @@ export function connect(host) {
   const stop = host.effect(() => {
     const signature = JSON.stringify([host.props.value.value, unit(), host.props.min.value, host.props.max.value]);
     if (signature === external) return; external = signature;
-    try { paint(calculateValue(host.props.value.value, unit())); input.defaultValue = input.value; } catch { paint(current); }
+    try { paint(calculateValue(host.props.value.value, unit())); resetValue = input.value; input.defaultValue = resetValue; } catch { paint(current); }
   });
-  const reset = afterFormReset(input, () => { try { paint(calculateValue(input.defaultValue, unit())); } catch { paint(0); } });
+  const reset = afterFormReset(input, () => { try { paint(calculateValue(resetValue, unit())); } catch { paint(0); } });
   return () => { stop(); reset(); input.removeEventListener("input", stopInput); input.removeEventListener("change", stopInput); input.removeEventListener("keydown", key); input.removeEventListener("blur", commit); decrease.removeEventListener("click", down); increase.removeEventListener("click", up); };
 }

package/components/ui-popover/ui-popover.html

@@ -107,6 +107,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;
@@ -122,6 +123,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/components/ui-reel/ui-reel.html

@@ -8,7 +8,8 @@
       scrolls sideways once they overflow.</prop>
     <prop name="snap" type="keyword" values="start, center"
     >Snaps scrolling to items: start comes to rest with an item's start edge at the reel's start, and center with an item centred in the reel. Unset, the reel
-      scrolls freely.</prop>
+      scrolls freely. Wrap a component item in a plain element when snapping: the wrapper receives snap alignment while the component keeps ownership of its
+      root styles.</prop>
   </defs>
   <div role="region" tabindex="0"><slot></slot></div>
   <style>

package/components/ui-select/ui-select.html

@@ -68,7 +68,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));
@@ -81,15 +81,16 @@
     /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
      * The root stays a native <select>, so the icon is a background image rather than an element. */
     :host {
+      --_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%;
     }
 
     :host:hover:not(:focus):not(:disabled):not([aria-invalid="true"]):not(:user-invalid) {
@@ -121,6 +122,7 @@
     }
 
     :host:disabled {
+      --_ui-select-highlight: none;
       background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       color: var(--ui-disabled-text);
       box-shadow: none;
@@ -131,8 +133,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);
     }
 
@@ -140,7 +142,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);
     }