@threadlabs/looma 0.33.1 → 0.35.0

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

@@ -84,6 +84,7 @@
     }
 
     :host {
+      --_ui-material-scale: 0.28;
       --_ui-menu-surface: var(--ui-menu-surface);
       --_ui-menu-border: var(--ui-menu-border);
       --_ui-menu-radius: var(--ui-menu-radius);
@@ -125,6 +126,67 @@
       overflow: auto;
     }
 
+    /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+       transparency, saturation and edge light belong to the surrounding decorative material. */
+    :host:not([inline]) .surface {
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
+      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.28) * 8px);
+      --_ui-material-content-color: var(--_ui-menu-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
+      --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
+      background:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-menu-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-menu-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          var(--ui-material-glow, 0 0 transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          var(--ui-elevation-overlay, var(--ui-shadow-lg))
+        )
+      );
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.28) * 0.18));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      :host:not([inline]) .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      :host:not([inline]) .surface {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      :host:not([inline]) .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     .surface hr {
       align-self: stretch;
       block-size: 0;

package/components/ui-menu/ui-menu.js

@@ -63,7 +63,7 @@ export function connect(host) {
     anchor = ids.get(nextFor);
     if (anchor) anchorAria = { "aria-haspopup": anchor.getAttribute("aria-haspopup"), "aria-expanded": anchor.getAttribute("aria-expanded") };
     anchor?.addEventListener("click", onAnchorClick);
-    surface = host.props.inline.value ? null : createAnchoredSurface(element, { anchor, placement: nextPlacement });
+    surface = host.props.inline.value ? null : createAnchoredSurface(element, { anchor, placement: nextPlacement, materialRole: "menu" });
   };
   const apply = () => {
     const inline = Boolean(host.props.inline.value);

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

@@ -0,0 +1,47 @@
+// Restricted dimensional arithmetic: unitless factors and one matching unit, without code evaluation.
+export function calculateValue(source, unit = "") {
+  const text = String(source).trim();
+  if (!text || text.length > 256) throw new Error("Enter a number or arithmetic expression.");
+  const tokens = text.match(/(?:\d*\.?\d+(?:e[+-]?\d+)?)(?:[a-z%]+)?|[()+*/-]/gi) ?? [];
+  if (tokens.join("") !== text.replace(/\s+/g, "")) throw new Error("Unsupported expression.");
+  let index = 0;
+  const add = () => {
+    let left = multiply();
+    while (["+", "-"].includes(tokens[index])) {
+      const operator = tokens[index++]; const right = multiply();
+      // A bare number in addition uses the field's unit.
+      if (left.unit && right.unit && left.unit !== right.unit) throw new Error("Use matching units.");
+      left = { number: left.number + (operator === "+" ? 1 : -1) * right.number, unit: left.unit || right.unit };
+    }
+    return left;
+  };
+  const multiply = () => {
+    let left = atom();
+    while (["*", "/"].includes(tokens[index])) {
+      const operator = tokens[index++]; const right = atom();
+      if (operator === "*" && left.unit && right.unit) throw new Error("Multiply by a unitless number.");
+      if (operator === "/" && right.unit) throw new Error("Divide by a unitless number.");
+      left = { number: operator === "*" ? left.number * right.number : left.number / right.number, unit: left.unit || right.unit };
+    }
+    return left;
+  };
+  const atom = () => {
+    const token = tokens[index++];
+    if (token === "+" || token === "-") { const value = atom(); return { ...value, number: (token === "-" ? -1 : 1) * value.number }; }
+    if (token === "(") { const value = add(); if (tokens[index++] !== ")") throw new Error("Close the parentheses."); return value; }
+    const match = /^(\d*\.?\d+(?:e[+-]?\d+)?)([a-z%]*)$/i.exec(token ?? "");
+    if (!match) throw new Error("Enter a number.");
+    if (match[2] && match[2] !== unit) throw new Error(`Use ${unit || "unitless values"}.`);
+    return { number: Number(match[1]), unit: match[2] };
+  };
+  const result = add();
+  if (index !== tokens.length || !Number.isFinite(result.number)) throw new Error("Enter a finite result.");
+  return result.number;
+}
+
+export function boundedNumber(value, min, max) {
+  const lower = Number.isFinite(Number(min)) ? Number(min) : -Number.MAX_VALUE;
+  const upper = Number.isFinite(Number(max)) ? Number(max) : Number.MAX_VALUE;
+  return Math.min(Math.max(value, Math.min(lower, upper)), Math.max(lower, upper));
+}
+export function numberText(value, unit = "") { return `${Number(value.toFixed(6))}${unit}`; }

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

@@ -0,0 +1,63 @@
+<link rel="component" href="../ui-input/ui-input.html">
+<link rel="component" href="../ui-icon-button/ui-icon-button.html">
+<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>
+    <prop name="unit" type="string" default="">One accepted unit, such as px, rem, ms or %. Bare numbers use this unit. No automatic unit conversion.</prop>
+    <prop name="min" type="number" default="-1000000">Inclusive lower bound applied to typing, arithmetic, stepping and external values.</prop>
+    <prop name="max" type="number" default="1000000">Inclusive upper bound applied to every editing path.</prop>
+    <prop name="step" type="number" default="1">Positive increment used by arrows and step buttons; Shift multiplies it by ten.</prop>
+    <prop name="name" type="string" default="">Optional form field name.</prop>
+    <prop name="label" type="string" default="Value">Accessible name for the editing control.</prop>
+    <prop name="size" type="keyword" values="sm, md, lg" default="md">Shared field and button height.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.</prop>
+    <event name="input" type="object"><prop name="value" type="string" required></prop></event>
+    <event name="change" type="object"><prop name="value" type="string" required></prop></event>
+  </defs>
+  <span>
+    <ui-icon-button
+      data-number-step="decrease"
+      match-button
+      type="button"
+      from:size="$size"
+      from:disabled="$disabled"
+      from:label="concat('Decrease ', $label)"
+    ><ui-icon name="minus"></ui-icon></ui-icon-button>
+    <ui-input
+      data-ui-field-control
+      from:size="$size"
+      from:disabled="$disabled"
+      from:value="$display"
+      from:aria-label="$label"
+      from:name="$name"
+      inputmode="decimal"
+      spellcheck="false"
+      aria-description="Enter calculates arithmetic. Arrow keys step; Shift changes ten steps."
+    ></ui-input>
+    <ui-icon-button
+      data-number-step="increase"
+      match-button
+      type="button"
+      from:size="$size"
+      from:disabled="$disabled"
+      from:label="concat('Increase ', $label)"
+    ><ui-icon name="plus"></ui-icon></ui-icon-button>
+  </span>
+  <style>
+    :host {
+      display: flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-1) !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      min-inline-size: 0;
+    }
+    :host[hidden] {
+      display: none !important;
+    }
+  </style>
+</template>

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

@@ -0,0 +1,47 @@
+import { calculateValue, boundedNumber, numberText } from "./arithmetic.js";
+import { afterFormReset } from "../shared/form-reset.js";
+
+export function connect(host) {
+  const input = host.element.querySelector('input');
+  const decrease = host.element.querySelector('[data-number-step="decrease"]');
+  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);
+  // 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;
+    try { paint(calculateValue(input.value, unit())); emit(); }
+    catch (error) { input.setAttribute("aria-invalid", "true"); input.setCustomValidity(error.message); }
+  };
+  const step = (direction, multiplier = 1) => {
+    if (host.props.disabled.value) return;
+    let value = current;
+    try { value = calculateValue(input.value, unit()); } catch { /* Recover from an unfinished expression using the last result. */ }
+    const increment = Math.abs(Number(host.props.step.value)) || 1;
+    paint(value + direction * increment * multiplier); emit();
+  };
+  const key = event => {
+    if (event.key === "Enter") { event.preventDefault(); commit(); }
+    if (event.key === "ArrowUp" || event.key === "ArrowDown") { event.preventDefault(); step(event.key === "ArrowUp" ? 1 : -1, event.shiftKey ? 10 : 1); }
+    if (event.key === "Escape") { paint(current); }
+  };
+  // Do not leak unfinished expressions as accepted component values.
+  const stopInput = event => event.stopPropagation();
+  const down = () => step(-1); const up = () => step(1);
+  input.addEventListener("input", stopInput); input.addEventListener("change", stopInput);
+  input.addEventListener("keydown", key); input.addEventListener("blur", commit);
+  decrease.addEventListener("click", down); increase.addEventListener("click", up);
+  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())); resetValue = input.value; input.defaultValue = resetValue; } catch { paint(current); }
+  });
+  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

@@ -3,7 +3,8 @@
     <prop name="bare" type="boolean" default="false"
     >Delegates the surface to its content, with no padding, border, background, shadow, or overflow clipping.</prop>
     <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>
+    >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content. Shared
+      surface separation adapts to popover purpose and rendered size.</prop>
     <prop name="open" type="boolean" default="false">Whether the popover is open initially or when set externally.</prop>
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the popover.</prop>
     <prop
@@ -63,6 +64,7 @@
     }
 
     :host {
+      --_ui-material-scale: 0.55;
       --_ui-popover-surface: var(--ui-popover-surface);
       --_ui-popover-border: var(--ui-popover-border);
       --_ui-popover-radius: var(--ui-popover-radius);
@@ -95,6 +97,67 @@
       box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
+    /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+       transparency, saturation and edge light belong to the surrounding decorative material. */
+    .surface {
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
+      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.55) * 8px);
+      --_ui-material-content-color: var(--_ui-popover-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
+      --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
+      background:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --_ui-popover-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --_ui-popover-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          var(--ui-material-glow, 0 0 transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          var(--ui-elevation-overlay, var(--ui-shadow-lg))
+        )
+      );
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 0.55) * 0.18));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      .surface {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      .surface {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      .surface {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     /* A toolbar or card can supply its own surface, including an unclipped shadow. */
     :host([bare]) .surface {
       overflow: visible;
@@ -102,6 +165,8 @@
       border: 0;
       background: transparent;
       box-shadow: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
     }
 
     :host(:not(:state(internalOpen))) {

package/components/ui-popover/ui-popover.js

@@ -59,7 +59,7 @@ export function connect(host) {
     anchor = ids.get(nextFor);
     if (anchor) anchorExpanded = anchor.getAttribute("aria-expanded");
     anchor?.addEventListener("click", onAnchorClick);
-    surface = createAnchoredSurface(element, { anchor, placement: nextPlacement, gap: offset });
+    surface = createAnchoredSurface(element, { anchor, placement: nextPlacement, gap: offset, materialRole: "popover" });
   };
   const apply = () => {
     const externalOpen = Boolean(host.props.open.value);

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);
     }
 

package/components/ui-slider/ui-slider.html

@@ -0,0 +1,84 @@
+<link rel="component" href="../ui-number-input/ui-number-input.html">
+<template component="ui-slider" module="./ui-slider.js">
+  <defs>
+    <state name="current" type="number" from="$value"></state>
+    <prop name="value" type="number" default="0">Current numeric value. Native range and exact entry share bounds.</prop>
+    <prop name="min" type="number" default="0">Inclusive lower bound for dragging, keyboard steps and exact entry.</prop>
+    <prop name="max" type="number" default="100">Inclusive upper bound for dragging, keyboard steps and exact entry.</prop>
+    <prop name="step" type="number" default="1">Positive native range and exact entry increment.</prop>
+    <prop name="unit" type="string" default="">Unit shown by the exact editor.</prop>
+    <prop name="name" type="string" default="">Optional numeric form field name.</prop>
+    <prop name="label" type="string" default="Value">Accessible name for the editing control.</prop>
+    <prop name="size" type="keyword" values="sm, md, lg" default="md">Shared field and button height.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents typing, stepping and pointer or keyboard changes while keeping the value visible.</prop>
+    <event name="input" type="object"><prop name="value" type="number" required></prop></event>
+    <event name="change" type="object"><prop name="value" type="number" required></prop></event>
+  </defs>
+  <span>
+    <input
+      $ref="range"
+      type="range"
+      data-ui-field-control
+      from:aria-label="$label"
+      from:aria-valuetext="concat($current, $unit)"
+      from:value="$value"
+      from:min="$min"
+      from:max="$max"
+      from:step="$step"
+      from:disabled="$disabled"
+      from:name="$name"
+    >
+    <ui-number-input
+      data-slider-exact
+      from:value="concat($current, $unit)"
+      from:unit="$unit"
+      from:min="$min"
+      from:max="$max"
+      from:step="$step"
+      from:size="$size"
+      from:disabled="$disabled"
+      from:label="$label"
+    ></ui-number-input>
+  </span>
+  <style>
+    :host {
+      display: grid !important;
+      grid-template-columns: minmax(4rem, 1fr) minmax(8rem, 1fr) !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      min-inline-size: 0;
+    }
+    input {
+      inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: var(--ui-control-size-md);
+      margin: 0 !important;
+      accent-color: var(--ui-accent-solid);
+      cursor: pointer;
+    }
+    :host([size="sm"]) input {
+      min-block-size: var(--ui-control-size-sm);
+    }
+    :host([size="lg"]) input {
+      min-block-size: var(--ui-control-size-lg);
+    }
+    input:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-control-focus, var(--ui-accent-solid));
+      outline-offset: var(--ui-space-1);
+      border-radius: var(--ui-radius-sm);
+    }
+    input:disabled {
+      cursor: not-allowed;
+    }
+    @media (pointer: coarse) {
+      input {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+    }
+    :host[hidden] {
+      display: none !important;
+    }
+  </style>
+</template>

package/components/ui-slider/ui-slider.js

@@ -0,0 +1,29 @@
+import { boundedNumber, calculateValue } from "../ui-number-input/arithmetic.js";
+import { afterFormReset } from "../shared/form-reset.js";
+
+export function connect(host) {
+  const { range } = host.refs;
+  const exact = host.element.querySelector("[data-slider-exact]");
+  let external;
+  const paint = value => {
+    range.value = String(boundedNumber(value, host.props.min.value, host.props.max.value));
+    host.state.current = Number(range.value);
+  };
+  const edit = event => {
+    event.stopPropagation();
+    if (host.props.disabled.value) return;
+    const raw = event.currentTarget === range ? Number(range.value) : calculateValue(event.detail.value, host.props.unit.value || "");
+    paint(raw); host.dispatch(event.type, { value: Number(range.value) });
+  };
+  for (const field of [range, exact]) for (const type of ["input", "change"]) field.addEventListener(type, edit);
+  const stop = host.effect(() => {
+    const signature = JSON.stringify([host.props.value.value, host.props.min.value, host.props.max.value, host.props.step.value]);
+    if (external === signature) return; external = signature;
+    range.min = String(Math.min(Number(host.props.min.value), Number(host.props.max.value)));
+    range.max = String(Math.max(Number(host.props.min.value), Number(host.props.max.value)));
+    range.step = String(Math.abs(Number(host.props.step.value)) || 1);
+    range.defaultValue = String(host.props.value.value); paint(Number(host.props.value.value));
+  });
+  const reset = afterFormReset(range, () => paint(Number(range.defaultValue)));
+  return () => { stop(); reset(); for (const field of [range, exact]) for (const type of ["input", "change"]) field.removeEventListener(type, edit); };
+}

package/components/ui-switch/ui-switch.html

@@ -114,6 +114,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);
@@ -135,6 +136,7 @@
 
     input:checked {
       background-color: var(--ui-accent-solid);
+      background-image: var(--ui-accent-highlight, none);
       border-color: var(--ui-accent-solid);
     }
 
@@ -158,6 +160,7 @@
     :host([disabled]) input {
       border-color: var(--ui-disabled-border);
       background-color: var(--ui-disabled-surface);
+      background-image: none;
       box-shadow: none;
       cursor: not-allowed;
     }