@threadlabs/looma 0.33.1 → 0.34.0

package/components/shared/overlay.js

@@ -1,3 +1,5 @@
+import { updateSurfaceMaterial } from "./surface-material.js";
+
 const dialogInvokers = new WeakMap();
 
 function stateFor(document) {
@@ -345,7 +347,10 @@ export function createViewportSurface(surface, options = {}) {
   let frame = null;
   const position = () => {
     frame = null;
-    if (stop) options.position?.();
+    if (stop) {
+      if (options.materialRole) updateSurfaceMaterial(surface, options.materialRole);
+      options.position?.();
+    }
   };
   const refresh = () => {
     if (stop && frame === null) frame = owner.requestAnimationFrame(position);
@@ -378,6 +383,7 @@ export function createViewportSurface(surface, options = {}) {
     show() {
       if (destroyed) return;
       show(surface);
+      if (options.materialRole) updateSurfaceMaterial(surface, options.materialRole);
       stop ??= observeOverlayViewport(surface.ownerDocument, position);
       options.position?.();
       if (!sizeObserver && owner.ResizeObserver) {
@@ -435,7 +441,7 @@ export function createAnchoredSurface(surface, options = {}) {
   surface.style.position = "fixed";
   surface.style.setProperty("margin", "0", "important");
   // `bare` resets the browser's popover chrome on a surface that has none of its own.
-  const presentation = createViewportSurface(surface, { position, bare: options.bare });
+  const presentation = createViewportSurface(surface, { position, bare: options.bare, materialRole: options.materialRole });
   // Resize and scroll events do not report an ancestor's transition or layout shift.
   // While visible, sample the live anchor and only re-position when its bounds change.
   const trackAnchor = () => {

package/components/shared/surface-material.js

@@ -0,0 +1,21 @@
+// Purpose has greater influence than size: even a large menu stays lighter than a dialog.
+const roleWeight = Object.freeze({ tooltip: 0.08, menu: 0.28, popover: 0.55, dialog: 1, panel: 0.65 });
+
+/** Derive a bounded material scale from a surface's purpose and rendered border box. */
+export function surfaceMaterialScale(role, width, height) {
+  if (!Object.hasOwn(roleWeight, role)) throw new Error(`Unknown surface material role: ${role}`);
+  const measured = [width, height].every(value => Number.isFinite(value) && value > 0);
+  const size = measured ? Math.max(0.8, Math.min(1.35, Math.sqrt(width * height / (320 * 240)))) : 1;
+  return Math.round(roleWeight[role] * size * 1000) / 1000;
+}
+
+/** Update component-owned material geometry; a tolerance prevents its rim feeding tiny resize changes back into itself. */
+export function updateSurfaceMaterial(element, role) {
+  const width = element.offsetWidth;
+  const height = element.offsetHeight;
+  const next = surfaceMaterialScale(role, width, height);
+  const previous = Number.parseFloat(element.style.getPropertyValue("--_ui-material-scale"));
+  if (!Number.isFinite(previous) || Math.abs(next - previous) >= Math.max(0.002, Math.abs(previous) * 0.04)) {
+    element.style.setProperty("--_ui-material-scale", String(next));
+  }
+}

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

@@ -2,6 +2,14 @@
 <link rel="component" href="../ui-icon/ui-icon.html">
 <template component="ui-button" module="./ui-button.js">
   <defs>
+    <prop name="preset" type="keyword" values="none, primary, standard, quiet, destructive" default="none"
+    >A shortcut that sets appearance and tone together: primary is solid accent, standard is solid neutral, quiet is ghost neutral, and destructive is solid
+      danger. A named preset takes precedence over variant and tone. Leave it at none to choose variant and tone independently.</prop>
+    <computed name="appearance" from="{ none: $variant, primary: 'solid', standard: 'solid', quiet: 'ghost', destructive: 'solid' }[$preset]"></computed>
+    <computed
+      name="colorTone"
+      from="{ none: { true: 'danger', false: $tone }[concat($variant = 'danger')], primary: 'accent', standard: 'neutral', quiet: 'neutral', destructive: 'danger' }[$preset]"
+    ></computed>
     <prop name="variant" type="keyword" values="outline, solid, danger, ghost, link, card, field" default="outline"
     >Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is
       hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the
@@ -42,7 +50,9 @@
   </defs>
   <template $match>
     <a
-      $when="$variant = 'card' and $as = 'a'"
+      from:data-appearance="$appearance"
+      from:data-tone="$colorTone"
+      $when="$appearance = 'card' and $as = 'a'"
       from:href="{ true: null, false: $href }[concat($disabled or $loading or $pending)]"
       from:target="$target"
       from:rel="$rel"
@@ -57,7 +67,9 @@
       <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
     </a>
     <button
-      $when="$variant = 'card'"
+      from:data-appearance="$appearance"
+      from:data-tone="$colorTone"
+      $when="$appearance = 'card'"
       from:type="$type"
       from:disabled="$disabled"
       from:aria-disabled="{ true: 'true', false: null }[concat($loading or $pending)]"
@@ -70,6 +82,8 @@
       <span class="card-action"><slot name="action"><ui-icon name="chevron-right" aria-hidden="true"></ui-icon></slot></span>
     </button>
     <a
+      from:data-appearance="$appearance"
+      from:data-tone="$colorTone"
       $when="$as = 'a'"
       from:href="{ true: null, false: $href }[concat($disabled or $loading or $pending)]"
       from:target="$target"
@@ -83,6 +97,8 @@
       <span class="badge"><slot name="badge"></slot></span>
     </a>
     <button
+      from:data-appearance="$appearance"
+      from:data-tone="$colorTone"
       $else
       from:type="$type"
       from:disabled="$disabled"
@@ -255,7 +271,7 @@
 
     /* A count is an adornment, not another line of label text. Keep the standard control height
        with enough inset for a 24px mark; large content can still grow the button naturally. */
-    :host:not([variant="link"]):has(.badge:not(:empty)) {
+    :host:not([data-appearance="link"]):has(.badge:not(:empty)) {
       padding-block: var(--ui-space-0-5) !important;
     }
 
@@ -300,7 +316,7 @@
 
     /* Card actions inherit Button's palette and behavior; only their shared layout changes.
        The icon may contain any decorative composition. Empty icons remove their column. */
-    :host([variant="card"]) {
+    :host[data-appearance="card"] {
       display: grid !important;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-content: center !important;
@@ -313,10 +329,10 @@
       box-shadow: none;
       background-image: none;
     }
-    :host([variant="card"][size="lg"]) {
+    :host[data-appearance="card"][size="lg"] {
       min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
     }
-    :host([variant="card"]):has(.card-icon:empty) {
+    :host[data-appearance="card"]:has(.card-icon:empty) {
       grid-template-columns: minmax(0, 1fr) auto;
     }
     .card-icon {
@@ -343,11 +359,11 @@
     }
 
     /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-    :host([variant="card"][tone="neutral"]) {
+    :host[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
 
-    :host([variant="card"][tone="neutral"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
@@ -359,19 +375,19 @@
       box-shadow: var(--ui-pressed);
     }
 
-    :host([variant="solid"]), :host([variant="danger"]) {
+    :host[data-appearance="solid"], :host[data-appearance="danger"] {
       border-color: var(--_tone);
       background-color: var(--_tone);
       color: var(--_on-tone);
       box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
     }
 
-    :is(:host([variant="solid"]), :host([variant="danger"])):hover:not(:disabled, [aria-disabled="true"]) {
+    :is(:host[data-appearance="solid"], :host[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-hover);
       border-color: var(--_tone-hover);
     }
 
-    :is(:host([variant="solid"]), :host([variant="danger"])):active:not(:disabled, [aria-disabled="true"]) {
+    :is(:host[data-appearance="solid"], :host[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-active);
       border-color: var(--_tone-active);
       background-image: none;
@@ -380,7 +396,7 @@
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
-    :host([tone="neutral"]) {
+    :host[data-tone="neutral"] {
       --_hue: var(--ui-text);
       --_hue-hover: var(--ui-text);
       --_hue-active: var(--ui-text);
@@ -388,40 +404,40 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :host([tone="danger"]), :host([variant="danger"]) {
+    :host[data-tone="danger"], :host[data-appearance="danger"] {
       --_hue: var(--ui-danger);
       --_hue-hover: var(--ui-danger-hover);
-      --_hue-active: var(--ui-danger-hover);
-      --_hue-text: var(--ui-danger-hover);
+      --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
+      --_hue-text: var(--ui-danger-subtle-text);
       --_on-hue: var(--ui-on-danger);
     }
 
-    :host([tone="success"]) {
+    :host[data-tone="success"] {
       --_hue: var(--ui-success);
-      --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-success-hover);
+      --_hue-active: var(--ui-success-active);
+      --_hue-text: var(--ui-success-subtle-text);
+      --_on-hue: var(--ui-success-on-strong);
     }
 
-    :host([tone="warning"]) {
+    :host[data-tone="warning"] {
       --_hue: var(--ui-warning);
-      --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-warning-hover);
+      --_hue-active: var(--ui-warning-active);
+      --_hue-text: var(--ui-warning-subtle-text);
+      --_on-hue: var(--ui-warning-on-strong);
     }
 
-    :host([tone="info"]) {
+    :host[data-tone="info"] {
       --_hue: var(--ui-info);
-      --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
-      --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
-      --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
-      --_on-hue: var(--ui-surface);
+      --_hue-hover: var(--ui-info-hover);
+      --_hue-active: var(--ui-info-active);
+      --_hue-text: var(--ui-info-subtle-text);
+      --_on-hue: var(--ui-info-on-strong);
     }
 
     /* A value picker is a field, with Select's quiet edge and resting lift. */
-    :host([variant="field"]) {
+    :host[data-appearance="field"] {
       --_ui-field-shadow: var(--ui-shadow-sm);
       border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
@@ -431,23 +447,23 @@
       box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
     }
 
-    :host([variant="field"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="field"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-text-secondary)));
       background-color: var(--ui-button-hover-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
     }
 
-    :host([variant="field"]):is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       --_ui-field-shadow: var(--ui-pressed);
     }
 
-    :host([variant="field"]):focus-visible {
+    :host[data-appearance="field"]:focus-visible {
       border-color: var(--ui-control-focus, var(--ui-accent-solid));
       box-shadow:
         var(--ui-button-shadow, var(--_ui-field-shadow)),
         var(--ui-control-focus-halo-shadow);
     }
 
-    :host([variant="ghost"]) {
+    :host[data-appearance="ghost"] {
       border-color: transparent;
       background: transparent;
       box-shadow: none;
@@ -455,14 +471,14 @@
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-    :host([variant="ghost"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
       border-color: transparent;
     }
 
     /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint
        edge and a soft inner shadow. Lighter than hover, so an open menu's trigger never reads as heavy. */
-    :host([variant="ghost"]):is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       background-color: var(--ui-button-ghost-active-surface, color-mix(in oklch, var(--ui-surface), var(--_tone) 3%));
       border-color: transparent;
       box-shadow: inset 0 0 0 1px oklch(from var(--_tone) l c h / 10%), inset 0 1px 2px oklch(from var(--_tone) l c h / 8%);
@@ -476,13 +492,13 @@
         var(--ui-focus-halo);
     }
 
-    :host([variant="solid"]):focus-visible {
+    :host[data-appearance="solid"]:focus-visible {
       box-shadow:
         var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))),
         var(--ui-focus-halo);
     }
 
-    :is(:host([variant="ghost"]), :host([variant="link"]), :host([variant="card"])):focus-visible {
+    :is(:host[data-appearance="ghost"], :host[data-appearance="link"], :host[data-appearance="card"]):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
@@ -504,7 +520,7 @@
     }
 
     /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-    :host([variant="ghost"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :host[data-appearance="ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background-color: var(--ui-disabled-surface);
       border-color: transparent;
     }
@@ -521,12 +537,12 @@
        a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
        area. xs sits inside a line of text the same way, so it keeps its size and gains the area too.
        Only these need it: a hit area on every button would reach over its neighbours. */
-    html[data-ui-input-modality="touch"] :host([variant="link"]),
+    html[data-ui-input-modality="touch"] :host[data-appearance="link"],
     html[data-ui-input-modality="touch"] :host([size="xs"]) {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :host([variant="link"])::after,
+    html[data-ui-input-modality="touch"] :host[data-appearance="link"]::after,
     html[data-ui-input-modality="touch"] :host([size="xs"])::after {
       position: absolute;
       inset: 50% auto auto 50%;
@@ -538,7 +554,7 @@
 
     /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
        WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-    :host([variant="link"]) {
+    :host[data-appearance="link"] {
       display: inline !important;
       min-block-size: 0;
       padding: 0 !important;
@@ -555,24 +571,24 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :host([variant="link"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
       background: none;
       transform: none;
     }
 
-    :host([variant="link"]):active:not(:disabled, [aria-disabled="true"]) {
+    :host[data-appearance="link"]:active:not(:disabled, [aria-disabled="true"]) {
       background: none;
       transform: none;
     }
 
-    :host([variant="link"]):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :host[data-appearance="link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background: none;
       border-color: transparent;
     }
 
-    :host([variant="link"]):focus-visible {
+    :host[data-appearance="link"]:focus-visible {
       box-shadow: none;
       /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);

package/components/ui-card/ui-card.html

@@ -2,9 +2,10 @@
   <defs>
     <prop name="size" type="keyword" values="content, sm, md, lg" default="content"
     >Optional size preset. content keeps the existing intrinsic sizing; the other sizes constrain the surface for compact, medium, or large content.</prop>
-    <prop name="variant" type="keyword" values="outlined, subtle, elevated" default="outlined"
+    <prop name="variant" type="keyword" values="outlined, subtle, elevated, glass" default="outlined"
     >The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;
-      elevated floats above the page with a shadow, for a view's one card, such as sign-in.</prop>
+      elevated floats above the page with a shadow, for a view's one card, such as sign-in. glass frames an opaque readable content plane with frosted material;
+      shared glassiness and surface separation govern its treatment.</prop>
     <prop name="padding" type="keyword" values="xs, sm, md, lg" default="md"
     >The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
@@ -62,6 +63,47 @@
       box-shadow: var(--ui-shadow-lg);
     }
 
+    :host([variant="glass"]) {
+      --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-panel-separation: clamp(0, var(--ui-surface-separation, 0), 1);
+      --_ui-panel-rim: calc((var(--_ui-panel-separation) + var(--_ui-panel-glass) * 0.25) * 0.65 * 8px);
+      border-width: calc(var(--ui-border-width) + var(--_ui-panel-rim));
+      border-color: transparent;
+      background:
+        linear-gradient(var(--_ui-card-surface), var(--_ui-card-surface)) padding-box,
+        linear-gradient(var(--ui-material-glass, var(--ui-surface-raised)), var(--ui-material-glass, var(--ui-surface-raised))) border-box,
+        var(--_ui-card-surface) padding-box;
+      box-shadow:
+        var(--ui-shadow-lg),
+        inset 0 0 0 var(--ui-border-width) var(--ui-material-edge, var(--ui-border-strong));
+      backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px)) saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+      -webkit-backdrop-filter: blur(calc(var(--_ui-panel-glass) * 0.65 * 18px)) saturate(calc(1 + var(--_ui-panel-glass) * 0.65 * 0.18));
+    }
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+      :host([variant="glass"]) {
+        background: var(--_ui-card-surface);
+      }
+    }
+    @media (prefers-reduced-transparency: reduce) {
+      :host([variant="glass"]) {
+        background: var(--_ui-card-surface);
+        border-width: var(--ui-border-width);
+        border-color: var(--ui-border-strong);
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+    @media (forced-colors: active) {
+      :host([variant="glass"]) {
+        background: Canvas;
+        color: CanvasText;
+        border: var(--ui-border-width) solid CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     :host([tone="accent"]) {
       border-color: color-mix(in srgb, var(--ui-accent) 25%, var(--ui-border-default));
       --_ui-card-surface: color-mix(in srgb, var(--ui-accent) 6%, var(--ui-surface-default));

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

@@ -0,0 +1,10 @@
+export function curvePoints(value) {
+  const presets = { linear: [0, 0, 1, 1], ease: [.25, .1, .25, 1], "ease-in": [.42, 0, 1, 1], "ease-out": [0, 0, .58, 1], "ease-in-out": [.42, 0, .58, 1] };
+  if (presets[value]) return [...presets[value]];
+  const match = /^cubic-bezier\(\s*([^)]*)\s*\)$/.exec(String(value));
+  const parts = match?.[1].split(",");
+  const points = parts?.map(part => part.trim() === "" ? NaN : Number(part));
+  if (!points || points.length !== 4 || points.some(number => !Number.isFinite(number))) throw new Error("Use a cubic-bezier curve.");
+  return points.map((number, index) => Math.min(index % 2 ? 2 : 1, Math.max(index % 2 ? -1 : 0, number)));
+}
+export function curveText(points) { return `cubic-bezier(${points.map(number => Number(number.toFixed(3))).join(", ")})`; }

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>