@threadlabs/looma 0.33.1 → 0.35.0

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

@@ -0,0 +1,181 @@
+<link rel="component" href="../ui-number-input/ui-number-input.html">
+<template component="ui-curve-editor" module="./ui-curve-editor.js">
+  <defs>
+    <state name="point0" type="string" value="0.25"></state>
+    <state name="point1" type="string" value="0.1"></state>
+    <state name="point2" type="string" value="0.25"></state>
+    <state name="point3" type="string" value="1"></state>
+
+    <prop name="value" type="string" default="cubic-bezier(0.25, 0.1, 0.25, 1)"
+    >CSS cubic-bezier or a standard easing keyword. X stays within 0–1; Y is bounded to -1–2 for a limited overshoot.</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>
+    <span class="plot-frame" from:aria-label="$label" role="group"><span class="plot" $ref="plot">
+        <svg viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
+          <path class="guide" d="M0 66.667 H100 M0 33.333 H100"></path>
+          <path $ref="firstLine" class="guide" d="M0 66.667 L25 63.333"></path>
+          <path $ref="secondLine" class="guide" d="M100 33.333 L25 33.333"></path>
+          <path $ref="curve" d="M0 66.667 C25 63.333 25 33.333 100 33.333"></path>
+        </svg>
+        <button $ref="first" class="handle" type="button" from:disabled="$disabled" aria-label="First curve handle. Arrow keys adjust; Shift moves faster.">
+        </button>
+        <button
+          $ref="second"
+          class="handle second"
+          type="button"
+          from:disabled="$disabled"
+          aria-label="Second curve handle. Arrow keys adjust; Shift moves faster."
+        >
+        </button>
+      </span></span>
+    <span class="coordinates">
+      <span class="coordinate"><span>X1</span><ui-number-input
+          data-curve-coordinate="0"
+          from:value="$point0"
+          min="0"
+          max="1"
+          step="0.01"
+          label="First handle X"
+          from:size="$size"
+          from:disabled="$disabled"
+        ></ui-number-input></span>
+      <span class="coordinate"><span>Y1</span><ui-number-input
+          data-curve-coordinate="1"
+          from:value="$point1"
+          min="-1"
+          max="2"
+          step="0.01"
+          label="First handle Y"
+          from:size="$size"
+          from:disabled="$disabled"
+        ></ui-number-input></span>
+      <span class="coordinate"><span>X2</span><ui-number-input
+          data-curve-coordinate="2"
+          from:value="$point2"
+          min="0"
+          max="1"
+          step="0.01"
+          label="Second handle X"
+          from:size="$size"
+          from:disabled="$disabled"
+        ></ui-number-input></span>
+      <span class="coordinate"><span>Y2</span><ui-number-input
+          data-curve-coordinate="3"
+          from:value="$point3"
+          min="-1"
+          max="2"
+          step="0.01"
+          label="Second handle Y"
+          from:size="$size"
+          from:disabled="$disabled"
+        ></ui-number-input></span>
+    </span>
+    <output $ref="result">{$value}</output>
+  </span>
+  <style>
+    :host {
+      display: grid !important;
+      gap: var(--ui-space-3) !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      min-inline-size: 0;
+    }
+    .plot-frame {
+      box-sizing: border-box !important;
+      display: block !important;
+      block-size: 12rem;
+      padding: max(var(--ui-space-4), 0.75rem, calc(var(--ui-control-min-block-size) / 2)) !important;
+      margin: 0 !important;
+      border: var(--ui-border-width) solid var(--ui-control-border);
+      border-radius: var(--ui-field-radius, var(--ui-radius-md));
+      background: var(--ui-control-surface, var(--ui-surface));
+    }
+    .plot {
+      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-accent-solid);
+      stroke-width: 2;
+      vector-effect: non-scaling-stroke;
+    }
+    .guide {
+      stroke: var(--ui-control-border);
+      stroke-width: 1;
+    }
+    .handle {
+      position: absolute;
+      left: 25%;
+      top: 63.333%;
+      translate: -50% -50%;
+      inline-size: max(1.5rem, var(--ui-control-min-block-size));
+      block-size: max(1.5rem, var(--ui-control-min-block-size));
+      border: 0;
+      border-radius: 50%;
+      background: transparent;
+      color: var(--ui-text-primary);
+      touch-action: none;
+      cursor: grab;
+      padding: 0 !important;
+      margin: 0 !important;
+    }
+    .second {
+      top: 33.333%;
+    }
+    .handle::after {
+      content: "";
+      position: absolute;
+      inset: 25%;
+      border: var(--ui-border-width) solid var(--ui-accent-solid);
+      background: var(--ui-surface-raised);
+      border-radius: 50%;
+      box-shadow: var(--ui-shadow-xs);
+    }
+    .handle::before {
+      content: "";
+      position: absolute;
+      inset: 40%;
+      background: var(--ui-accent-solid);
+      border-radius: 50%;
+      z-index: 1;
+    }
+    .handle:focus-visible {
+      outline: var(--ui-focus-width) solid var(--ui-control-focus, var(--ui-accent-solid));
+      outline-offset: var(--ui-space-1);
+    }
+    .handle:disabled {
+      cursor: not-allowed;
+    }
+    .coordinates {
+      display: grid !important;
+      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+      gap: var(--ui-space-2) !important;
+    }
+    .coordinate {
+      display: grid !important;
+      gap: var(--ui-space-1) !important;
+      font-size: var(--ui-font-size-sm);
+    }
+    output {
+      overflow-wrap: anywhere;
+      font-family: var(--ui-font-mono, monospace);
+      font-size: var(--ui-font-size-sm);
+    }
+    :host[hidden] {
+      display: none !important;
+    }
+  </style>
+</template>

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,67 @@
         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:
+        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-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),
+          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))
+        )
+      );
+      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"
@@ -124,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,
@@ -144,7 +155,9 @@
       --_ui-action-start: -1px;
     }
 
-    :host([tone="accent"]) {
+    :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));
@@ -152,11 +165,65 @@
       color: var(--_icon-button-text);
     }
 
+    :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);
+      --_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"] {
+      --_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);
+      --_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"] {
+      --_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);
+      --_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"] {
+      --_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);
+      --_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"]) {
-      --_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);
+    :host[data-tone="neutral"] {
+      --_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]) {
@@ -198,13 +265,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 +279,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,19 +388,19 @@
       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;
+      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([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;
+      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"]) {
@@ -342,27 +409,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 +463,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 +508,7 @@
       background-image: none;
     }
 
-    :host([variant="ghost"]):disabled {
+    :host[data-appearance="ghost"]:disabled {
       border-color: transparent;
     }
 

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. */