@threadlabs/looma 0.33.0 → 0.34.0

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

@@ -0,0 +1,51 @@
+import { curvePoints, curveText } from "./curve.js";
+
+export function connect(host) {
+  const { plot, first, second, firstLine, secondLine, curve, result } = host.refs;
+  const fields = [...host.element.querySelectorAll("[data-curve-coordinate]")];
+  let points = [.25, .1, .25, 1]; let external; let drag;
+  const limit = () => { points = curvePoints(curveText(points)); };
+  const paint = () => {
+    limit();
+    const x = index => points[index] * 100;
+    const y = index => (2 - points[index]) / 3 * 100;
+    for (const [index, handle] of [[0, first], [2, second]]) {
+      handle.style.left = `${x(index)}%`; handle.style.top = `${y(index + 1)}%`;
+      handle.setAttribute("aria-description", `X ${points[index]}, Y ${points[index + 1]}`);
+    }
+    firstLine.setAttribute("d", `M0 66.667 L${x(0)} ${y(1)}`);
+    secondLine.setAttribute("d", `M100 33.333 L${x(2)} ${y(3)}`);
+    curve.setAttribute("d", `M0 66.667 C${x(0)} ${y(1)} ${x(2)} ${y(3)} 100 33.333`);
+    fields.forEach((field, index) => { host.state[`point${index}`] = String(points[index]); });
+    result.value = curveText(points); result.textContent = curveText(points);
+  };
+  const emit = type => host.dispatch(type, { value: curveText(points) });
+  const move = event => {
+    if (!drag || event.pointerId !== drag.id || host.props.disabled.value) return;
+    const rect = plot.getBoundingClientRect();
+    if (!rect.width || !rect.height) return;
+    points[drag.index] = (event.clientX - rect.left) / rect.width;
+    points[drag.index + 1] = 2 - (event.clientY - rect.top) / rect.height * 3;
+    paint(); emit("input");
+  };
+  const finish = event => { if (drag?.id !== event.pointerId) return; drag = undefined; if (!host.props.disabled.value) emit("change"); };
+  const cleanups = [];
+  for (const [index, handle] of [[0, first], [2, second]]) {
+    const down = event => { if (host.props.disabled.value || event.button !== 0) return; event.preventDefault(); handle.focus(); drag = { id: event.pointerId, index }; handle.setPointerCapture(event.pointerId); };
+    const key = event => {
+      if (host.props.disabled.value || !["ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown"].includes(event.key)) return;
+      event.preventDefault(); const step = event.shiftKey ? .1 : .01;
+      points[index + (event.key === "ArrowUp" || event.key === "ArrowDown" ? 1 : 0)] += (event.key === "ArrowLeft" || event.key === "ArrowDown" ? -step : step);
+      paint(); emit("input"); emit("change");
+    };
+    for (const [type, callback] of [["pointerdown", down], ["pointermove", move], ["pointerup", finish], ["pointercancel", finish], ["keydown", key]]) {
+      handle.addEventListener(type, callback); cleanups.push(() => handle.removeEventListener(type, callback));
+    }
+  }
+  fields.forEach((field, index) => {
+    const edit = event => { event.stopPropagation(); if (host.props.disabled.value) return; points[index] = Number(event.detail.value); paint(); emit(event.type); };
+    for (const type of ["input", "change"]) { field.addEventListener(type, edit); cleanups.push(() => field.removeEventListener(type, edit)); }
+  });
+  const stop = host.effect(() => { const value = host.props.value.value; if (value === external) return; external = value; try { points = curvePoints(value); } catch { /* Keep the last valid curve. */ } paint(); });
+  return () => { stop(); cleanups.forEach(cleanup => cleanup()); };
+}

package/components/ui-dialog/ui-dialog.html

@@ -13,7 +13,8 @@
       closerequest when modal, none when not.</prop>
     <prop name="alert" type="boolean" default="false"
     >Use alert dialog semantics and require an explicit action instead of the header close button. An alert dialog is always modal.</prop>
-    <prop name="size" type="keyword" values="sm, md, lg, fullscreen" default="md">Choose a compact, standard, wide, or viewport-filling dialog.</prop>
+    <prop name="size" type="keyword" values="sm, md, lg, fullscreen" default="md"
+    >Choose a compact, standard, wide, or viewport-filling dialog. Shared surface separation adapts to dialog purpose and rendered size.</prop>
     <prop name="label" type="string">Visible title in the dialog header; also its accessible name.</prop>
     <prop name="for" type="string" default="">ID of the control that opens the dialog.</prop>
     <state type="boolean" name="internalOpen" value="false"></state>
@@ -75,6 +76,7 @@
     }
 
     :host {
+      --_ui-material-scale: 1;
       /* Hooks do not inherit, so the parts below read them from the root. */
       --_ui-dialog-duration: var(--ui-dialog-duration);
 
@@ -107,6 +109,65 @@
         overlay var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease) allow-discrete;
     }
 
+    /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
+       transparency, saturation and edge light belong to the surrounding decorative material. */
+    :host {
+      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+      --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
+      --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 1) * 8px);
+      --_ui-material-content-color: var(--ui-dialog-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
+      --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
+      background:
+        linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
+        linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
+        var(--_ui-material-content-color) padding-box;
+      border-width: calc(var(--ui-border-width) + var(--_ui-material-rim));
+      border-color: var(
+        --ui-dialog-border,
+        color-mix(in oklab, var(--ui-overlay-border, var(--ui-border-strong)) calc((1 - var(--_ui-material-active)) * 100%), transparent)
+      );
+      box-shadow: var(
+        --ui-dialog-shadow,
+        var(
+          --ui-overlay-shadow,
+          0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 8px) calc(
+            var(--_ui-material-separation) * var(--_ui-material-scale, 1) * 24px
+          ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
+          var(--ui-elevation-dialog, var(--ui-shadow-xl))
+        )
+      );
+      backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 18px))
+        saturate(calc(1 + var(--_ui-material-glassiness) * var(--_ui-material-scale, 1) * 0.18));
+    }
+
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      :host {
+        background: var(--_ui-material-content-color);
+      }
+    }
+
+    @media (prefers-reduced-transparency: reduce) {
+      :host {
+        background: var(--_ui-material-content-color);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
+    @media (forced-colors: active) {
+      :host {
+        background: Canvas;
+        border-color: CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     :host[open] {
       display: flex !important;
       visibility: visible;

package/components/ui-dialog/ui-dialog.js

@@ -1,4 +1,5 @@
-import { closeDialog, closeOverlay, createIdResolver, openOverlay, requestTopOverlayClose, showDialog } from "../shared/overlay.js";
+import { updateSurfaceMaterial } from "../shared/surface-material.js";
+import { closeDialog, closeOverlay, createIdResolver, openOverlay, observeOverlayViewport, requestTopOverlayClose, showDialog } from "../shared/overlay.js";
 
 function inferredLabel(element, explicit) {
   if (String(explicit ?? "").trim()) return String(explicit).trim();
@@ -18,6 +19,7 @@ function observeContentHeight(dialog, refs) {
   };
   const observer = new owner.ResizeObserver(() => {
     if (!dialog.open) { reset(); return; }
+    updateSurfaceMaterial(dialog, "dialog");
     const previous = animation ? parseFloat(owner.getComputedStyle(dialog).height) : lastHeight;
     animation?.cancel();
     animation = null;
@@ -63,6 +65,7 @@ export function connect(host) {
   let lastFor = "";
   let lastExternalOpen = Boolean(host.props.open.value);
   let lastOpen;
+  let stopMaterialViewport = null;
   host.state.internalOpen = lastExternalOpen;
 
   const requestClose = (reason, input) => {
@@ -126,9 +129,13 @@ export function connect(host) {
     dialog.setAttribute("closedby", closedBy);
     if (open) {
       showDialog(dialog, modal);
+      updateSurfaceMaterial(dialog, "dialog");
+      stopMaterialViewport ??= observeOverlayViewport(document, () => updateSurfaceMaterial(dialog, "dialog"));
       openOverlay({ id: overlayId, modal, element, modalElement: dialog, dismissible: true, canClose: (reason) => reason === "light-dismiss" ? closedBy === "any" : reason !== "escape" || closedBy !== "none", requestClose });
     } else {
       resize.reset();
+      stopMaterialViewport?.();
+      stopMaterialViewport = null;
       closeDialog(dialog);
       closeOverlay(document, overlayId);
     }
@@ -176,6 +183,7 @@ export function connect(host) {
     ids.stop();
     observer.disconnect();
     resize.destroy();
+    stopMaterialViewport?.();
     dialog?.removeEventListener("close", onClose, true);
     dialog?.removeEventListener("cancel", onCancel);
     closeButton?.removeEventListener("click", onCloseClick);

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

@@ -1,6 +1,12 @@
 <link rel="component" href="../ui-spinner/ui-spinner.html">
 <template component="ui-icon-button" module="./ui-icon-button.js">
   <defs>
+    <prop name="preset" type="keyword" values="none, primary, standard, quiet, destructive" default="none"
+    >The same shortcuts as Button: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid danger. A named preset
+      wins over variant and tone; none preserves independent choices.</prop>
+    <!-- Computed maps read every member in HTML Next. auto keeps an omitted tone concrete so the preset map can resolve, while retaining the existing variant-dependent appearance. -->
+    <computed name="appearance" from="{ none: $variant, primary: 'solid', standard: 'solid', quiet: 'ghost', destructive: 'solid' }[$preset]"></computed>
+    <computed name="colorTone" from="{ none: $tone, primary: 'accent', standard: 'neutral', quiet: 'neutral', destructive: 'danger' }[$preset]"></computed>
     <prop name="disabled" type="boolean" default="false"
     >Disables the button, so it cannot be pressed or focused, and gives it a flat neutral surface and muted icon.</prop>
     <prop name="loading" type="boolean" default="false"
@@ -17,9 +23,10 @@
     <prop name="variant" type="keyword" values="ghost, outline, solid" default="ghost"
     >Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with the
       accent colour, for the one primary action in a group.</prop>
-    <prop name="tone" type="keyword" values="accent, neutral"
-    >Colour for every variant. When omitted, ghost and outline keep their neutral appearance and solid keeps its accent fill. Set accent for a coloured action
-      or neutral for a quiet one. Native aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.</prop>
+    <prop name="tone" type="keyword" values="auto, accent, neutral, danger, success, warning, info" default="auto"
+    >Colour for every variant. auto preserves the existing variant-specific default. When omitted, ghost and outline keep their neutral appearance and solid
+      keeps its accent fill. Set accent for a coloured action or neutral for a quiet one. danger, success, warning and info share Button's intent colors. Native
+      aria-pressed="true" keeps an outline toggle visibly pressed; the consumer owns that state.</prop>
     <prop name="anticipatory" type="boolean" default="false"
     >Keeps the button out of sight until it is wanted: at rest a fine pointer sees only a small guide dot, and the button appears on hover, on focus, or when
       the pointer comes near inside a ui-affordance-scope. Touch devices and the solid variant always show it.</prop>
@@ -32,6 +39,8 @@
     <prop name="round" type="boolean" default="false">Use a fully circular shape.</prop>
   </defs>
   <button
+    from:data-appearance="$appearance"
+    from:data-tone="$colorTone"
     from:disabled="$disabled"
     type="button"
     from:aria-label="$label"
@@ -144,7 +153,7 @@
       --_ui-action-start: -1px;
     }
 
-    :host([tone="accent"]) {
+    :host[data-tone="accent"] {
       --_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));
@@ -152,8 +161,52 @@
       color: var(--_icon-button-text);
     }
 
+    :host[data-tone="danger"] {
+      --_icon-button-border: var(--ui-danger);
+      --_icon-button-hover-border: var(--ui-danger-hover);
+      --_icon-button-text: var(--ui-danger-subtle-text);
+      --_icon-button-outline-surface: color-mix(in srgb, var(--ui-danger) 5%, var(--ui-surface-default));
+      --_icon-button-solid-surface: var(--ui-danger);
+      --_icon-button-solid-hover-surface: var(--ui-danger-hover);
+      --_icon-button-solid-text: var(--ui-danger-on-strong);
+      color: var(--_icon-button-text);
+    }
+
+    :host[data-tone="success"] {
+      --_icon-button-border: var(--ui-success);
+      --_icon-button-hover-border: var(--ui-success-hover);
+      --_icon-button-text: var(--ui-success-subtle-text);
+      --_icon-button-outline-surface: color-mix(in srgb, var(--ui-success) 5%, var(--ui-surface-default));
+      --_icon-button-solid-surface: var(--ui-success);
+      --_icon-button-solid-hover-surface: var(--ui-success-hover);
+      --_icon-button-solid-text: var(--ui-success-on-strong);
+      color: var(--_icon-button-text);
+    }
+
+    :host[data-tone="warning"] {
+      --_icon-button-border: var(--ui-warning);
+      --_icon-button-hover-border: var(--ui-warning-hover);
+      --_icon-button-text: var(--ui-warning-subtle-text);
+      --_icon-button-outline-surface: color-mix(in srgb, var(--ui-warning) 5%, var(--ui-surface-default));
+      --_icon-button-solid-surface: var(--ui-warning);
+      --_icon-button-solid-hover-surface: var(--ui-warning-hover);
+      --_icon-button-solid-text: var(--ui-warning-on-strong);
+      color: var(--_icon-button-text);
+    }
+
+    :host[data-tone="info"] {
+      --_icon-button-border: var(--ui-info);
+      --_icon-button-hover-border: var(--ui-info-hover);
+      --_icon-button-text: var(--ui-info-subtle-text);
+      --_icon-button-outline-surface: color-mix(in srgb, var(--ui-info) 5%, var(--ui-surface-default));
+      --_icon-button-solid-surface: var(--ui-info);
+      --_icon-button-solid-hover-surface: var(--ui-info-hover);
+      --_icon-button-solid-text: var(--ui-info-on-strong);
+      color: var(--_icon-button-text);
+    }
+
     /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
-    :host([tone="neutral"]) {
+    :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);
@@ -198,13 +251,13 @@
     }
 
     @media (hover: hover) and (pointer: fine) {
-      :host([anticipatory]):not(:host([revealed]), :host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
+      :host([anticipatory]):not(:host([revealed]), :host[data-appearance="solid"], :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible) {
         border-color: transparent;
         background-color: transparent;
         box-shadow: none;
       }
 
-      :host([anticipatory]):not(:host([revealed]), :host([variant="solid"]), :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
+      :host([anticipatory]):not(:host([revealed]), :host[data-appearance="solid"], :host([loading]), :host([pending]), :disabled, [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)
         .content {
         opacity: 0;
         transform: scale(0.65);
@@ -212,7 +265,7 @@
       }
     }
 
-    :host([anticipatory]):is(:host([revealed]), :host([variant="solid"]), [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
+    :host([anticipatory]):is(:host([revealed]), :host[data-appearance="solid"], [aria-pressed="true"], [data-ui-proximity="near"], :hover, :focus-visible)::before {
       opacity: 0;
     }
 
@@ -321,7 +374,7 @@
       border-radius: var(--ui-radius-round);
     }
 
-    :host([variant="outline"]) {
+    :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;
@@ -329,7 +382,7 @@
       box-shadow: var(--ui-action-shadow, var(--_ui-action-shadow));
     }
 
-    :host([variant="solid"]) {
+    :host[data-appearance="solid"] {
       background-color: var(--ui-icon-button-solid-surface, var(--_icon-button-solid-surface, var(--ui-accent-solid)));
       background-image: none;
       color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
@@ -342,27 +395,26 @@
       color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
     }
 
-    :host([variant="outline"]):hover:enabled:not([aria-disabled="true"]) {
+    :host[data-appearance="outline"]:hover:enabled:not([aria-disabled="true"]) {
       border-color: var(--ui-icon-button-hover-border, var(--_icon-button-hover-border, var(--ui-control-border-hover, var(--ui-control-border))));
     }
 
-    :host([variant="solid"]):hover:enabled:not([aria-disabled="true"]) {
+    :host[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-solid-hover-surface, var(--_icon-button-solid-hover-surface, var(--ui-accent-hover)));
     }
 
-    :host([variant="solid"][tone="accent"]):hover:enabled:not([aria-disabled="true"]),
-    :host([variant="solid"][tone="neutral"]):hover:enabled:not([aria-disabled="true"]) {
+    :host[data-appearance="solid"]:hover:enabled:not([aria-disabled="true"]) {
       color: var(--ui-icon-button-solid-text, var(--_icon-button-solid-text, var(--ui-text-on-accent)));
     }
 
-    :host([variant="ghost"])[aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
+    :host[data-appearance="ghost"][aria-expanded="true"]:enabled:not([aria-disabled="true"]) {
       background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 16%, transparent));
       color: var(--ui-icon-button-hover-text, var(--_icon-button-text, var(--ui-text-primary)));
       box-shadow: var(--ui-pressed);
     }
 
     /* Native toggle state persists after pointer release, including during loading. */
-    :host([variant="outline"])[aria-pressed="true"]:enabled {
+    :host[data-appearance="outline"][aria-pressed="true"]:enabled {
       background-color: var(--ui-icon-button-active-surface, color-mix(in srgb, currentColor 12%, var(--ui-surface-default)));
       background-image: none;
       box-shadow: var(--ui-pressed);
@@ -397,35 +449,35 @@
       box-shadow: var(--ui-focus-halo);
     }
 
-    :host([variant="outline"]):focus-visible {
+    :host[data-appearance="outline"]:focus-visible {
       box-shadow:
         var(--ui-action-shadow, var(--_ui-action-shadow)),
         var(--ui-focus-halo);
     }
 
-    :host([variant="solid"]):focus-visible {
+    :host[data-appearance="solid"]:focus-visible {
       box-shadow:
         var(--ui-icon-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
-    :host:is(:host([variant="outline"]), :host([variant="solid"])):active:enabled:not([aria-disabled="true"]) {
+    :host:is(:host[data-appearance="outline"], :host[data-appearance="solid"]):active:enabled:not([aria-disabled="true"]) {
       background-image: none;
       box-shadow: var(--ui-pressed);
     }
 
-    :host([variant="outline"])[aria-pressed="true"]:enabled:focus-visible {
+    :host[data-appearance="outline"][aria-pressed="true"]:enabled:focus-visible {
       box-shadow:
         var(--ui-pressed),
         var(--ui-focus-halo);
     }
 
     @media (forced-colors: active) {
-      :host([variant="outline"])[aria-pressed="true"]:enabled {
+      :host[data-appearance="outline"][aria-pressed="true"]:enabled {
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-2 * var(--ui-focus-width));
       }
-      :host([variant="outline"])[aria-pressed="true"]:enabled:focus-visible {
+      :host[data-appearance="outline"][aria-pressed="true"]:enabled:focus-visible {
         outline-offset: var(--ui-focus-width);
       }
     }
@@ -442,7 +494,7 @@
       background-image: none;
     }
 
-    :host([variant="ghost"]):disabled {
+    :host[data-appearance="ghost"]:disabled {
       border-color: transparent;
     }
 

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,65 @@
       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:
+        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),
+          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,62 @@
+<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>
+    <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="$value"
+      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,44 @@
+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;
+  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)); };
+  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())); input.defaultValue = input.value; } catch { paint(current); }
+  });
+  const reset = afterFormReset(input, () => { try { paint(calculateValue(input.defaultValue, 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); };
+}