@threadlabs/looma 0.33.0 → 0.34.0

package/docs/value-editors.mjs

@@ -0,0 +1,33 @@
+/** Translate canonical recipe values for the reusable value editors; never duplicate design bounds here. */
+const lengthUnits = { px: 1, rem: 16, em: 16, cm: 96 / 2.54, mm: 96 / 25.4, Q: 96 / 101.6, in: 96, pt: 96 / 72, pc: 16 };
+const timeUnits = { ms: 1, s: 1000 };
+const rounded = value => String(Number(Number(value).toFixed(6)));
+
+export function valueEditor(field, value, { remPixels = 16 } = {}) {
+  if (field.type === 'easing') return { kind: /^step-/.test(value) ? 'text' : 'curve', value };
+  if (['colour', 'font'].includes(field.type)) return { kind: 'text', value };
+  if (field.type.includes('length') || field.type === 'time') {
+    const unit = value.match(/[a-z]+$/i)?.[0] ?? 'px';
+    const units = field.type === 'time' ? timeUnits : { ...lengthUnits, rem: remPixels, em: remPixels };
+    const factor = units[unit];
+    return { kind: 'number', value: value === '0' ? '0px' : value, unit,
+      min: factor ? field.min / factor : .001, max: factor ? field.max / factor : 1000000,
+      step: (field.type === 'time' ? 10 : field.id === 'line-weight' ? .25 : 1) / (factor ?? 1),
+      units: field.type === 'time' ? ['ms', 's'] : ['px', 'rem'], convertible: Boolean(factor) };
+  }
+  const scale = field.type === 'fraction' || field.id === 'density' ? 100 : 1;
+  return { kind: field.type === 'weight' ? 'number' : 'slider', value: field.type === 'weight' ? value : Number(value) * scale,
+    min: field.min * scale, max: field.max * scale, step: field.type === 'weight' ? 50 : scale === 100 ? 1 : .01,
+    unit: scale === 100 ? '%' : '', scale };
+}
+
+export function editorValue(field, value) {
+  return field.type === 'fraction' || field.id === 'density' ? rounded(Number(value) / 100) : String(value);
+}
+
+export function convertValueUnit(value, nextUnit, { remPixels = 16 } = {}) {
+  const unit = value.match(/[a-z]+$/i)?.[0] ?? 'px';
+  const units = Object.hasOwn(timeUnits, unit) ? timeUnits : { ...lengthUnits, rem: remPixels, em: remPixels };
+  if (!Object.hasOwn(units, unit) || !Object.hasOwn(units, nextUnit)) throw new Error('Choose compatible units.');
+  return rounded(parseFloat(value) * units[unit] / units[nextUnit]) + nextUnit;
+}

package/docs/workspace.mjs

@@ -0,0 +1,32 @@
+import { lstat, mkdir, open, realpath, unlink } from 'node:fs/promises';
+import path from 'node:path';
+
+export async function rejectSymlink(file) {
+  try { if ((await lstat(file)).isSymbolicLink()) throw new Error(`Looma's generated path cannot be a symlink: ${file}.`); }
+  catch (error) { if (error.code !== 'ENOENT') throw error; }
+}
+
+/** Generated sources and tooling wrappers stay in owned cache directories. */
+export async function cacheDirectory(root, name = '') {
+  root = await realpath(path.resolve(root));
+  if (name && !/^[a-z][a-z-]*$/.test(name)) throw new Error('Invalid Looma cache directory.');
+  const cache = path.join(root, '.looma');
+  await rejectSymlink(cache); await mkdir(cache, { recursive: true });
+  const directory = path.join(cache, name);
+  await rejectSymlink(directory); await mkdir(directory, { recursive: true });
+  return directory;
+}
+
+/** One complete preparation/build owns the generated tree, including across CLI processes. */
+export async function withBuildLock(root, action) {
+  const lockFile = path.join(await cacheDirectory(root), 'docs-build.lock');
+  await rejectSymlink(lockFile);
+  let lock;
+  try { lock = await open(lockFile, 'wx', 0o600); }
+  catch (error) {
+    if (error.code === 'EEXIST') throw new Error('Another documentation build holds .looma/docs-build.lock. Retry after it finishes. If the old process stopped, close it before removing that lock.');
+    throw error;
+  }
+  try { await lock.writeFile(JSON.stringify({ pid: process.pid })); return await action(); }
+  finally { try { await lock.close(); } finally { await unlink(lockFile); } }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.33.0",
+  "version": "0.34.0",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -83,7 +83,14 @@
       "import": "./editor/expressmark.js",
       "default": "./editor/expressmark.js"
     },
-    "./theme-system.css": "./theme-system.css"
+    "./theme-system.css": "./theme-system.css",
+    "./docs/catalog.json": "./docs/catalog.json",
+    "./docs/*": "./docs/*",
+    "./docs": {
+      "types": "./docs/index.d.ts",
+      "import": "./docs/index.mjs",
+      "default": "./docs/index.mjs"
+    }
   },
   "files": [
     "dist/",
@@ -96,7 +103,9 @@
     "*.css",
     "README.md",
     "LICENSE",
-    "EXPRESSIVE-MARKDOWN.md"
+    "EXPRESSIVE-MARKDOWN.md",
+    "docs/",
+    "bin/"
   ],
   "sideEffects": [
     "./dist/index.js",
@@ -117,7 +126,10 @@
     "@tiptap/core": ">=2 <3",
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
-    "vue": "^3.5.43"
+    "vue": "^3.5.43",
+    "markupress": "^0.8.3",
+    "@nextwebwg/htmlkit": "1.0.0-alpha.69",
+    "vite": "^8.3.4"
   },
   "peerDependenciesMeta": {
     "@tiptap/core": {
@@ -131,6 +143,15 @@
     },
     "vue": {
       "optional": true
+    },
+    "markupress": {
+      "optional": true
+    },
+    "@nextwebwg/htmlkit": {
+      "optional": true
+    },
+    "vite": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -185,6 +206,9 @@
   "engines": {
     "node": ">=22.22.2 <23 || >=24.15 <25"
   },
+  "bin": {
+    "looma-docs": "./bin/looma-docs.mjs"
+  },
   "scripts": {
     "build": "node build.mjs",
     "lint": "vue-tsc -p tsconfig.json --noEmit",

package/styles/ui-button.css

@@ -167,7 +167,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. */
-    :scope:where([data-component~="ui-button"]):not([variant="link"]):has(.badge:not(:empty)) {
+    :scope:where([data-component~="ui-button"]):not([data-appearance="link"]):has(.badge:not(:empty)) {
       padding-block: var(--ui-space-0-5) !important;
     }
 
@@ -212,7 +212,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. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"] {
       display: grid !important;
       grid-template-columns: auto minmax(0, 1fr) auto;
       align-content: center !important;
@@ -225,10 +225,10 @@
       box-shadow: none;
       background-image: none;
     }
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="size=lg"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][size="lg"] {
       min-block-size: max(var(--ui-control-min-block-size), var(--ui-control-size-lg));
     }
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]:has(.card-icon:empty) {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"]:has(.card-icon:empty) {
       grid-template-columns: minmax(0, 1fr) auto;
     }
     .card-icon {
@@ -255,11 +255,11 @@
     }
 
     /* A neutral card encloses content quietly; ordinary outlines keep their action-tone edge. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"] {
       border-color: var(--ui-button-border, var(--ui-border));
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"][data-ui-button-state~="tone=neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="card"][data-tone="neutral"]:hover:not(:disabled, [aria-disabled="true"]) {
       border-color: var(--ui-button-hover-border, var(--ui-border-strong));
     }
 
@@ -271,19 +271,19 @@
       box-shadow: var(--ui-pressed);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[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(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):hover:not(:disabled, [aria-disabled="true"]) {
+    :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):hover:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-hover);
       border-color: var(--_tone-hover);
     }
 
-    :is(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"]):active:not(:disabled, [aria-disabled="true"]) {
+    :is(:scope:where([data-component~="ui-button"])[data-appearance="solid"], :scope:where([data-component~="ui-button"])[data-appearance="danger"]):active:not(:disabled, [aria-disabled="true"]) {
       background-color: var(--_tone-active);
       border-color: var(--_tone-active);
       background-image: none;
@@ -292,7 +292,7 @@
 
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=neutral"] {
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"] {
       --_hue: var(--ui-text);
       --_hue-hover: var(--ui-text);
       --_hue-active: var(--ui-text);
@@ -300,40 +300,40 @@
       --_on-hue: var(--ui-surface);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=danger"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=danger"] {
+    :scope:where([data-component~="ui-button"])[data-tone="danger"], :scope:where([data-component~="ui-button"])[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);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=success"] {
+    :scope:where([data-component~="ui-button"])[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);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=warning"] {
+    :scope:where([data-component~="ui-button"])[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);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="tone=info"] {
+    :scope:where([data-component~="ui-button"])[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. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"] {
+    :scope:where([data-component~="ui-button"])[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)));
@@ -343,23 +343,23 @@
       box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[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)));
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
       --_ui-field-shadow: var(--ui-pressed);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=field"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[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);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"] {
       border-color: transparent;
       background: transparent;
       box-shadow: none;
@@ -367,14 +367,14 @@
     }
 
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[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. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[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%);
@@ -388,13 +388,13 @@
         var(--ui-focus-halo);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=solid"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[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(:scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"], :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=card"]):focus-visible {
+    :is(:scope:where([data-component~="ui-button"])[data-appearance="ghost"], :scope:where([data-component~="ui-button"])[data-appearance="link"], :scope:where([data-component~="ui-button"])[data-appearance="card"]):focus-visible {
       box-shadow: var(--ui-focus-halo);
     }
 
@@ -416,7 +416,7 @@
     }
 
     /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :scope:where([data-component~="ui-button"])[data-appearance="ghost"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background-color: var(--ui-disabled-surface);
       border-color: transparent;
     }
@@ -433,12 +433,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"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"],
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-appearance="link"],
     html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"] {
       position: relative;
     }
 
-    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]::after, 
+    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-appearance="link"]::after, 
     html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=xs"]::after {
       position: absolute;
       inset: 50% auto auto 50%;
@@ -450,7 +450,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. */
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"] {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"] {
       display: inline !important;
       min-block-size: 0;
       padding: 0 !important;
@@ -467,24 +467,24 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:hover:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[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;
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:active:not(:disabled, [aria-disabled="true"]) {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:active:not(:disabled, [aria-disabled="true"]) {
       background: none;
       transform: none;
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
+    :scope:where([data-component~="ui-button"])[data-appearance="link"]:is(:disabled, [aria-disabled="true"]:not([aria-busy="true"])) {
       background: none;
       border-color: transparent;
     }
 
-    :scope:where([data-component~="ui-button"])[data-ui-button-state~="variant=link"]:focus-visible {
+    :scope:where([data-component~="ui-button"])[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/styles/ui-card.css

@@ -49,6 +49,47 @@
       box-shadow: var(--ui-shadow-lg);
     }
 
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="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))) {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+        background: var(--_ui-card-surface);
+      }
+    }
+    @media (prefers-reduced-transparency: reduce) {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="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) {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+        background: Canvas;
+        color: CanvasText;
+        border: var(--ui-border-width) solid CanvasText;
+        box-shadow: none;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+    }
+
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="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));
@@ -116,6 +157,12 @@
 @scope ([data-component~="ui-card"]) to ([data-component]) {
 /* A surface that groups content. Its children stack with even space between them, so a card
        needs no layout of its own. */
+    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+    }
+    @media (prefers-reduced-transparency: reduce) {
+    }
+    @media (forced-colors: active) {
+    }
 
     /* A colored panel shades rows in its own hue, without changing button intent. */
 

package/styles/ui-curve-editor.css

@@ -0,0 +1,109 @@
+/* Generated by HTML Next 1.0.0-alpha.69. Do not edit. */
+@supports (-moz-appearance: none) {
+:where([data-component], [data-slotted]) { --html-next-scope-owner: boundary; }
+:where([data-slotted]:not([data-component])) { --html-next-scope-owner: projected !important; }
+}
+@supports (-moz-appearance: none) {
+[data-component~="ui-curve-editor"] { --html-next-scope-owner: "ui-curve-editor" !important; }
+}
+@scope ([data-component~="ui-curve-editor"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-curve-editor"]) {
+      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:where(:not([data-component], [data-slotted]))::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:where(:not([data-component], [data-slotted]))::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);
+    }
+    :scope:where([data-component~="ui-curve-editor"])[hidden] {
+      display: none !important;
+    }
+}