@threadlabs/looma 0.34.0 → 0.35.1

package/docs/theme.mjs

@@ -27,6 +27,12 @@ export const themeFields = [
   ['Material', 'surface-separation', 'Surface separation', '--ui-surface-separation', 'fraction', '0', 'One material offset, scaled by popup purpose and actual size: quiet tooltips through substantial dialogs.'],
   ['Material', 'translucency', 'Overlay translucency', '--ui-overlay-translucency', 'fraction', '0', 'How much background comes through floating surfaces.'],
   ['Material', 'edge-light', 'Edge light', '--ui-edge-light', 'fraction', '0', 'Light caught by surface edges, independent of depth.'],
+  ['Material', 'finish', 'Finish', '--ui-finish', 'fraction', '0', 'Matte through polished: how strongly the material catches a reflection.'],
+  ['Material', 'glow', 'Glow', '--ui-glow', 'fraction', '0', 'Soft reflected light beyond a surface, derived from its tone.'],
+  ['Material', 'light-x', 'Light horizontal position', '--ui-light-x', 'fraction', '0.5', 'The light source from left to right, relative to each surface.'],
+  ['Material', 'light-y', 'Light vertical position', '--ui-light-y', 'fraction', '0', 'The light source from top to bottom, relative to each surface.'],
+  ['Material', 'light-spread', 'Light spread', '--ui-light-spread', 'fraction', '0.5', 'A concentrated spot through broad illumination.'],
+  ['Material', 'light-strength', 'Light strength', '--ui-light-strength', 'fraction', '0.65', 'Shared illumination; each material and component role determines its response.'],
   ['Motion', 'response-time', 'Response time', '--ui-motion-fast', 'time', '120ms', 'Shared feedback pace; floating transitions take proportionally longer.'],
   ['Motion', 'response-curve', 'Response curve', '--ui-motion-ease', 'easing', 'cubic-bezier(0.2,0,0.2,1)', 'How movement accelerates and settles.'],
 ].map(([family, id, label, property, type, defaultValue, description]) => Object.freeze({ family, id, label, property, type, defaultValue, description, ...(bounds[id] ? { min: bounds[id][0], max: bounds[id][1] } : type === 'fraction' ? { min: 0, max: 1 } : {}) }));
@@ -35,14 +41,12 @@ export const defaultRecipe = () => ({ schemaVersion: 1, values: Object.fromEntri
 const starting = values => ({ schemaVersion: 1, values: { ...defaultRecipe().values, ...values } });
 export const startingPoints = {
   clear: defaultRecipe(),
-  bookish: starting({ action: '#2e1228', canvas: '#f7f7f5', surface: '#fffefd', text: '#0d0c0c', 'body-font': 'Arial, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'control-size': '42px', 'scale-contrast': '1.18', 'outer-depth': '1', 'inner-depth': '1', glassiness: '0.8', 'surface-separation': '0.65', translucency: '0.18', 'edge-light': '1', 'response-time': '150ms', 'response-curve': 'ease' }),
+  bookish: starting({ action: '#2e1228', canvas: '#f7f7f5', surface: '#fffefd', text: '#0d0c0c', 'body-font': 'Arial, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'control-size': '42px', 'scale-contrast': '1.18', 'outer-depth': '1', 'inner-depth': '1', glassiness: '0.8', 'surface-separation': '0.65', translucency: '0.18', 'edge-light': '1', finish: '0.85', glow: '0.3', 'light-spread': '0.3', 'light-strength': '0.9', 'response-time': '150ms', 'response-curve': 'ease' }),
   wiki: starting({ action: '#4f46e5', canvas: '#ffffff', surface: '#ffffff', text: '#1a1a1a', 'control-size': '34px', density: '0.85', 'scale-contrast': '1.15', 'corner-roundness': '6px', 'outer-depth': '0.35', 'inner-depth': '0', 'response-time': '110ms' }),
   editorial: starting({ action: '#182c24', canvas: '#eee9dc', surface: '#fffdf5', text: '#182c24', 'corner-roundness': '0px', 'outer-depth': '0', 'inner-depth': '0', 'body-font': 'Georgia, serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'line-weight': '2px', 'response-time': '90ms', 'response-curve': 'linear' }),
   night: starting({ action: '#a7b8ff', canvas: '#11141c', surface: '#202634', text: '#edf1fb', 'corner-roundness': '12px', 'outer-depth': '1.4', 'inner-depth': '0.45', translucency: '0.2', 'edge-light': '0.65', 'response-time': '210ms', 'response-curve': 'cubic-bezier(0.2,0.8,0.2,1)' }),
   garden: starting({ action: '#256342', canvas: '#eef5e7', surface: '#fcfff6', text: '#173121', 'corner-roundness': '22px', 'outer-depth': '0.35', 'inner-depth': '0', 'edge-light': '0.2', 'control-size': '46px', 'scale-contrast': '1.24', density: '1.05', 'response-time': '180ms', 'response-curve': 'cubic-bezier(0.16,1,0.3,1)' }),
 };
-// Preserve the public historical startingPoints.library import without a duplicate UI preset.
-Object.defineProperty(startingPoints, 'library', { value: startingPoints.bookish });
 export const startingPointLabels = { clear: 'Clear', bookish: 'Bookish', wiki: 'Wiki', editorial: 'Editorial', night: 'Night', garden: 'Garden' };
 const paletteKeys = ['action', 'canvas', 'surface', 'text'];
 // Palette choices move only the shared color seeds; size, material and motion stay independent.
@@ -51,6 +55,33 @@ export const themePalettes = Object.fromEntries([
   ['editorial', 'Ink & parchment'], ['night', 'Midnight'], ['garden', 'Forest & cream'],
 ].map(([id, label]) => [id, { label, values: Object.fromEntries(paletteKeys.map(key => [key, startingPoints[id].values[key]])) }]));
 
+const materialKeys = themeFields.filter(field => field.family === 'Material').map(field => field.id);
+const materialDefaults = defaultRecipe().values;
+const material = (label, overrides) => ({ label, values: Object.fromEntries(materialKeys.map(key => [key, overrides[key] ?? materialDefaults[key]])) });
+export const materialPresets = {
+  matte: material('Matte', { 'outer-depth': '0', 'inner-depth': '0' }),
+  soft: material('Soft', { 'outer-depth': '0.6', 'inner-depth': '0.3', 'edge-light': '0.3', finish: '0.2', 'light-spread': '0.8' }),
+  polished: material('Polished', { 'outer-depth': '1', 'inner-depth': '1', 'edge-light': '1', finish: '0.85', glow: '0.3', 'light-spread': '0.3', 'light-strength': '0.9' }),
+  glass: material('Frosted glass', startingPoints.bookish.values),
+};
+const refinementPresets = family => family === 'material' ? materialPresets : family === 'palette' ? themePalettes : undefined;
+
+/** Preset provenance is optional recipe data, never a second source of theme values. */
+export function refinementState(input, family) {
+  const recipe = validateRecipe(input), presets = refinementPresets(family);
+  if (!presets) throw new Error('Unknown refinement family.');
+  const matches = preset => Object.entries(preset.values).every(([key, value]) => recipe.values[key] === value);
+  const id = recipe.presets?.[family] ?? Object.keys(presets).find(id => matches(presets[id])) ?? 'custom';
+  return { id, customized: id !== 'custom' && !matches(presets[id]) };
+}
+
+/** Apply or restore one family without changing the rest of the design system. */
+export function applyRefinement(input, family, id) {
+  const recipe = validateRecipe(input), preset = refinementPresets(family)?.[id];
+  if (!preset) throw new Error('Unknown refinement preset.');
+  return validateRecipe({ ...recipe, values: { ...recipe.values, ...preset.values }, presets: { ...recipe.presets, [family]: id } });
+}
+
 /** Identify a coordinated palette without coupling it to the rest of a recipe. */
 export function paletteFor(input) {
   const { values } = validateRecipe(input);
@@ -111,19 +142,28 @@ export function validateRecipe(input) {
       if (number !== undefined && (number < min || number > max)) throw new Error(`${field.label}: choose a value between ${min} and ${max}${field.type.includes('length') ? 'px (or equivalent)' : field.type === 'time' ? 'ms' : ''}.`);
     }
   }
-  return { schemaVersion: 1, values };
+  if (input.presets !== undefined && (!input.presets || typeof input.presets !== 'object' || Array.isArray(input.presets) || Object.entries(input.presets).some(([family, id]) => !Object.hasOwn(refinementPresets(family) ?? {}, id)))) throw new Error('Unknown refinement preset.');
+  return { schemaVersion: 1, values, ...(input.presets === undefined ? {} : { presets: { ...input.presets } }) };
 }
 
 /** Match presets by their complete semantic recipe, including locally saved themes. */
 export function startingPointFor(input) {
-  const recipe = JSON.stringify(validateRecipe(input));
-  return Object.entries(startingPoints).find(([, value]) => JSON.stringify(value) === recipe)?.[0] ?? 'custom';
+  const recipe = JSON.stringify(validateRecipe(input).values);
+  return Object.entries(startingPoints).find(([, value]) => JSON.stringify(value.values) === recipe)?.[0] ?? 'custom';
 }
 
 const rgb = hex => [1, 3, 5].map(i => parseInt(hex.slice(i, i + 2), 16));
 const mix = (a, b, weight) => '#' + rgb(a).map((n, i) => Math.round(n * weight + rgb(b)[i] * (1 - weight)).toString(16).padStart(2, '0')).join('');
 const luminance = hex => rgb(hex).map(n => { const s = n / 255; return s <= .04045 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4; }).reduce((sum, n, i) => sum + n * [.2126, .7152, .0722][i], 0);
 const contrast = (a, b) => (Math.max(luminance(a), luminance(b)) + .05) / (Math.min(luminance(a), luminance(b)) + .05);
+// The brightest reflection stop is itself readable. Interpolating it over a readable
+// fill cannot wash out the label, even at maximum finish and light strength.
+function reflection(fill, text) {
+  const labels = Array.isArray(text) ? text : [text];
+  let amount = .32;
+  while (amount > 0 && labels.some(label => contrast(mix('#ffffff', fill, amount), label) < 4.5)) amount = Math.max(0, amount - .005);
+  return mix('#ffffff', fill, amount);
+}
 const foreground = (fill, light, dark) => [light, dark, '#ffffff', '#000000'].sort((a, b) => contrast(fill, b) - contrast(fill, a))[0];
 
 /** Find the nearest mixture with a known readable endpoint, including every supplied surface. */
@@ -164,6 +204,7 @@ export function deriveTheme(input, { mode } = {}) {
     tokens[`--ui-${tone}`] = fill;
     tokens[`--ui-on-${tone}`] = foreground(fill, '#ffffff', '#000000');
     tokens[`--ui-${tone}-on-strong`] = tokens[`--ui-on-${tone}`];
+    tokens[`--ui-${tone}-reflection`] = reflection(fill, tokens[`--ui-on-${tone}`]);
     tokens[`--ui-${tone}-hover`] = mix(fill, ink, .86);
     tokens[`--ui-${tone}-active`] = mix(fill, ink, .74);
     tokens[`--ui-${tone}-soft`] = mix(fill, tokens['--ui-surface-raised'], .08);
@@ -177,10 +218,17 @@ export function deriveTheme(input, { mode } = {}) {
   tokens['--ui-text'] = readableColour(textSeed, readingSurfaces, 4.5, ink);
   tokens['--ui-text-secondary'] = readableColour(mix(tokens['--ui-text'], tokens['--ui-surface-raised'], .72), readingSurfaces, 4.5, ink);
   tokens['--ui-text-muted'] = tokens['--ui-text-secondary'];
+  for (const [state, amount] of [['surface', .06], ['hover', .1], ['active', .14]]) {
+    tokens[`--ui-neutral-${state}`] = readableColour(mix(tokens['--ui-text'], tokens['--ui-surface-raised'], amount), [tokens['--ui-text']], 4.5, paper);
+  }
+  tokens['--ui-surface-reflection'] = reflection(tokens['--ui-surface-raised'], [tokens['--ui-text'], tokens['--ui-text-secondary'], ...Object.keys(tones).map(tone => tokens[`--ui-${tone}-subtle-text`])]);
+  tokens['--ui-neutral-reflection'] = reflection(tokens['--ui-neutral-surface'], tokens['--ui-text']);
   tokens['--ui-selection-surface'] = mix(tokens['--ui-accent'], tokens['--ui-surface-raised'], .1);
   tokens['--ui-selection-text'] = tokens['--ui-accent-subtle-text'];
   tokens['--ui-selection-border'] = mix(tokens['--ui-accent'], tokens['--ui-surface-raised'], .2);
   tokens['--ui-control-surface'] = tokens['--ui-surface-raised'];
+  // A hint is quieter than body copy; resolve it against its field, not every tinted content surface.
+  tokens['--ui-control-placeholder'] = readableColour(mix(tokens['--ui-text'], tokens['--ui-control-surface'], .5), [tokens['--ui-control-surface']], 4.5, ink);
   tokens['--ui-control-border'] = readableColour(mix(tokens['--ui-text'], tokens['--ui-surface-raised'], .43), readingSurfaces, 3, ink);
   tokens['--ui-control-border-hover'] = tokens['--ui-control-border'];
   tokens['--ui-border-strong'] = tokens['--ui-control-border'];
@@ -212,8 +260,14 @@ export function themeCSS(input, systemCSS = '', { scope = 'portable' } = {}) {
     else geometry.push(`  ${name}: ${value};`);
   }
   const geometrySelector = scope === 'documentation' ? ':root[data-looma-documentation-theme]' : ':root';
+  const chevron = color => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='${color.replace('#', '%23')}' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`;
+  const boundary = mode => scope === 'documentation'
+    ? `:root[data-looma-documentation-theme][data-theme="${mode}"], :root[data-looma-documentation-theme] [data-theme="${mode}"]`
+    : `[data-theme="${mode}"]`;
+  const chevrons = `${geometrySelector} { --ui-select-chevron: ${chevron(light['--ui-text-secondary'])}; }\n@media (prefers-color-scheme: dark) { ${geometrySelector}:not([data-theme]) { --ui-select-chevron: ${chevron(dark['--ui-text-secondary'])}; } }\n${boundary('light')} { --ui-select-chevron: ${chevron(light['--ui-text-secondary'])}; }\n${boundary('dark')} { --ui-select-chevron: ${chevron(dark['--ui-text-secondary'])}; }`;
+
   // Resolve colors at their point of use, so a nearer mode boundary wins independently
   // of the selector specificity needed to restore an early documentation theme.
   // Keep the first comment stable: the local writer recognizes its generated files by this marker.
-  return `/* Looma shared semantic theme. */\n/* Always includes light and dark.\n   Set data-theme="light" or "dark" on any element to fix that subtree's mode.\n   Leave the root attribute unset to follow the system; a switch can set/remove it. */\n${systemCSS}\n${geometrySelector} {\n${geometry.join('\n')}\n}\n${selector} {\n${palette.join('\n')}\n}\n:root:not([data-theme]) { color-scheme: light dark; }\n[data-theme="light"] { color-scheme: light; }\n[data-theme="dark"] { color-scheme: dark; }\n@media (prefers-reduced-motion: reduce) {\n  ${selector} { --ui-motion-fast: 0ms; --ui-motion-base: 0ms; --ui-motion-press: 0ms; --ui-press-scale: 1; }\n}\n`;
+  return `/* Looma shared semantic theme. */\n/* Always includes light and dark.\n   Set data-theme="light" or "dark" on any element to fix that subtree's mode.\n   Leave the root attribute unset to follow the system; a switch can set/remove it. */\n${systemCSS}\n${geometrySelector} {\n${geometry.join('\n')}\n}\n${selector} {\n${palette.join('\n')}\n}\n${chevrons}\n:root:not([data-theme]) { color-scheme: light dark; }\n[data-theme="light"] { color-scheme: light; }\n[data-theme="dark"] { color-scheme: dark; }\n@media (prefers-reduced-motion: reduce) {\n  ${selector} { --ui-motion-fast: 0ms; --ui-motion-base: 0ms; --ui-motion-press: 0ms; --ui-press-scale: 1; }\n}\n@media (prefers-reduced-transparency: reduce), (forced-colors: active) {\n  ${selector} { --ui-finish: 0; --ui-glow: 0; }\n}\n`;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.34.0",
+  "version": "0.35.1",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",
@@ -127,7 +127,7 @@
     "@tiptap/pm": ">=2 <3",
     "@tiptap/vue-3": ">=2 <3",
     "vue": "^3.5.43",
-    "markupress": "^0.8.3",
+    "markupress": "^0.8.5",
     "@nextwebwg/htmlkit": "1.0.0-alpha.69",
     "vite": "^8.3.4"
   },

package/styles/ui-badge.css

@@ -295,10 +295,18 @@
       box-shadow: none;
     }
 
-    /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
-       surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"] {
-      color: var(--ui-badge-text, var(--_badge-color-text, var(--_badge-surface)));
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, color-mix(in srgb, var(--ui-surface-raised) 88%, transparent)));
+      color: var(--ui-badge-text, var(--_badge-color-text, var(--ui-text-primary)));
+    }
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"]:not([data-ui-badge-state~="shape=circle"]) {
+      border-color: var(--ui-badge-border, var(--_badge-color-border, var(--_badge-outline-surface)));
+    }
+    :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=inverse"][data-ui-badge-state~="tone=neutral"][data-ui-badge-state~="shape=circle"] {
+      --_badge-outline-surface: var(--ui-badge-surface, var(--_badge-color-surface, light-dark(
+        color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 66%), transparent),
+        color-mix(in srgb, var(--ui-surface-raised) var(--ui-badge-circle-opacity, 56%), transparent)
+      )));
     }
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="variant=outline"] {
@@ -542,9 +550,6 @@
     /* A count can keep its containing control's contrasting ink instead of reversing it.
        The faint fill preserves text contrast; a quiet boundary separates the count from its control. */
 
-    /* Neutral reverses a subtle surface/ink pair rather than a strong tone. Keep its original
-       surface ink: moving it toward dark-theme primary text would reduce overlay contrast. */
-
     /* An icon mark keeps the existing tone recipe and follows the global spacing and radius. */
 
     :scope:where([data-component~="ui-badge"])[data-ui-badge-state~="shape=square"] .label :where([data-slotted], [data-slotted] *):is(svg) {

package/styles/ui-button.css

@@ -84,7 +84,7 @@
     :scope:where([data-component~="ui-button"]) {
       /* 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. */
       --_ui-action-start: 1px;
       --_ui-action-edge: var(
         --ui-action-edge,
@@ -92,6 +92,8 @@
         inset calc(-1 * var(--_ui-action-start)) -1px 0 light-dark(rgb(0 0 0 / 0.08), rgb(0 0 0 / 0.08))
       );
       --_ui-action-shadow: var(--_ui-action-edge), 0 1px 2px light-dark(rgb(0 0 0 / 0.10), rgb(0 0 0 / 0.20));
+      --_tone-highlight: var(--ui-accent-highlight, none);
+      --_tone-glow: var(--ui-accent-glow, 0 0 transparent);
       --_hue: var(--ui-accent);
       --_hue-hover: var(--ui-accent-hover);
       --_hue-active: var(--ui-accent-active);
@@ -142,8 +144,8 @@
       white-space: var(--ui-button-white-space, inherit);
       line-height: var(--ui-line-height-tight);
       padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-action-inset-md, var(--ui-space-3)) !important;
-      background-image: none;
-      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow)));
+      background-image: var(--ui-surface-highlight, none);
+      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
       cursor: pointer;
       transition:
         scale var(--ui-motion-press, var(--ui-motion-fast)) var(--ui-motion-ease),
@@ -275,7 +277,8 @@
       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)));
+      background-image: var(--_tone-highlight);
+      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
     }
 
     :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"]) {
@@ -293,6 +296,8 @@
     /* 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-tone="neutral"] {
+      --_tone-highlight: var(--ui-neutral-highlight, none);
+      --_tone-glow: var(--ui-neutral-glow, 0 0 transparent);
       --_hue: var(--ui-text);
       --_hue-hover: var(--ui-text);
       --_hue-active: var(--ui-text);
@@ -300,7 +305,21 @@
       --_on-hue: var(--ui-surface);
     }
 
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"] {
+      border-color: var(--ui-button-border, var(--ui-control-border));
+      background-color: var(--ui-button-surface, var(--ui-neutral-surface));
+      color: var(--ui-button-text, var(--ui-text));
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:hover:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-hover-surface, var(--ui-neutral-hover));
+    }
+    :scope:where([data-component~="ui-button"])[data-tone="neutral"][data-appearance="solid"]:active:not(:disabled, [aria-disabled="true"]) {
+      background-color: var(--ui-button-active-surface, var(--ui-neutral-active));
+    }
+
     :scope:where([data-component~="ui-button"])[data-tone="danger"], :scope:where([data-component~="ui-button"])[data-appearance="danger"] {
+      --_tone-highlight: var(--ui-danger-highlight, none);
+      --_tone-glow: var(--ui-danger-glow, 0 0 transparent);
       --_hue: var(--ui-danger);
       --_hue-hover: var(--ui-danger-hover);
       --_hue-active: var(--ui-danger-active, var(--ui-danger-hover));
@@ -309,6 +328,8 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="success"] {
+      --_tone-highlight: var(--ui-success-highlight, none);
+      --_tone-glow: var(--ui-success-glow, 0 0 transparent);
       --_hue: var(--ui-success);
       --_hue-hover: var(--ui-success-hover);
       --_hue-active: var(--ui-success-active);
@@ -317,6 +338,8 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="warning"] {
+      --_tone-highlight: var(--ui-warning-highlight, none);
+      --_tone-glow: var(--ui-warning-glow, 0 0 transparent);
       --_hue: var(--ui-warning);
       --_hue-hover: var(--ui-warning-hover);
       --_hue-active: var(--ui-warning-active);
@@ -325,6 +348,8 @@
     }
 
     :scope:where([data-component~="ui-button"])[data-tone="info"] {
+      --_tone-highlight: var(--ui-info-highlight, none);
+      --_tone-glow: var(--ui-info-glow, 0 0 transparent);
       --_hue: var(--ui-info);
       --_hue-hover: var(--ui-info-hover);
       --_hue-active: var(--ui-info-active);

package/styles/ui-card.css

@@ -11,6 +11,7 @@
        needs no layout of its own. */
     :scope:where([data-component~="ui-card"]) {
       --_ui-card-surface: var(--ui-surface-raised);
+      --_ui-card-elevation: 0 0 0 transparent;
       --_ui-selection-context-surface: initial;
       --_ui-selection-context-border: initial;
       --_ui-selection-context-text: initial;
@@ -45,33 +46,36 @@
     }
 
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=elevated"] {
+      --_ui-card-elevation: var(--ui-shadow-lg);
       border-color: var(--ui-border-subtle);
       box-shadow: var(--ui-shadow-lg);
     }
 
-    :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+    :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
       --_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:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
         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),
+        var(--_ui-card-elevation),
+        var(--ui-material-glow, 0 0 transparent),
         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"] {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
         background: var(--_ui-card-surface);
       }
     }
     @media (prefers-reduced-transparency: reduce) {
-      :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
         background: var(--_ui-card-surface);
         border-width: var(--ui-border-width);
         border-color: var(--ui-border-strong);
@@ -80,7 +84,7 @@
       }
     }
     @media (forced-colors: active) {
-      :scope:where([data-component~="ui-card"])[data-ui-card-state~="variant=glass"] {
+      :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
         background: Canvas;
         color: CanvasText;
         border: var(--ui-border-width) solid CanvasText;
@@ -116,10 +120,6 @@
 
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="tone=danger"] {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
-      border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
-      /* An accent edge keeps the corners on its side straight. */
-      border-start-start-radius: 0;
-      border-end-start-radius: 0;
       --_ui-card-surface: var(--ui-danger-soft);
     }
 

package/styles/ui-checkbox.css

@@ -91,7 +91,8 @@
       margin: max(0px, calc((1lh - var(--_ui-checkbox-size, 1.125rem)) / 2)) 0 0 !important;
       border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
       border-radius: min(var(--ui-radius-sm), calc(var(--_ui-checkbox-size, 1.125rem) / 4));
-      background: var(--ui-control-surface, var(--ui-surface-default));
+      background-color: var(--ui-control-surface, var(--ui-surface-default));
+      background-image: var(--ui-surface-highlight, none);
       box-shadow: var(--ui-control-inset);
       cursor: pointer;
       transition:
@@ -110,7 +111,8 @@
     input:checked,
     input:indeterminate {
       border-color: var(--ui-accent-solid);
-      background: var(--ui-accent-solid);
+      background-color: var(--ui-accent-solid);
+      background-image: var(--ui-accent-highlight, none);
       box-shadow: var(--ui-control-inset);
     }
 

package/styles/ui-dialog.css

@@ -81,6 +81,7 @@
       --_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;
@@ -96,6 +97,7 @@
           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))
         )
@@ -400,6 +402,7 @@
       --_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;
@@ -415,6 +418,7 @@
           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))
         )

package/styles/ui-icon-button.css

@@ -88,7 +88,9 @@
     :scope:where([data-component~="ui-icon-button"]) {
       /* 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,
@@ -109,6 +111,8 @@
     }
 
     :scope:where([data-component~="ui-icon-button"])[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));
@@ -117,6 +121,8 @@
     }
 
     :scope:where([data-component~="ui-icon-button"])[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);
@@ -128,6 +134,8 @@
     }
 
     :scope:where([data-component~="ui-icon-button"])[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);
@@ -139,6 +147,8 @@
     }
 
     :scope:where([data-component~="ui-icon-button"])[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);
@@ -150,6 +160,8 @@
     }
 
     :scope:where([data-component~="ui-icon-button"])[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);
@@ -162,9 +174,11 @@
 
     /* Omitted tone retains the existing accent solid; explicit neutral is additive. */
     :scope:where([data-component~="ui-icon-button"])[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);
+      --_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);
     }
 
     :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="anticipatory"] {
@@ -332,16 +346,16 @@
     :scope:where([data-component~="ui-icon-button"])[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);
     }
 
     :scope:where([data-component~="ui-icon-button"])[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);
     }
 
     :scope:where([data-component~="ui-icon-button"]):hover:enabled:not([aria-disabled="true"]) {

package/styles/ui-input-group.css

@@ -42,6 +42,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;
@@ -53,6 +54,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;
@@ -63,7 +65,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. */

package/styles/ui-input.css

@@ -75,7 +75,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/styles/ui-light-editor.css

@@ -0,0 +1,28 @@
+/* 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-light-editor"] { --html-next-scope-owner: "ui-light-editor" !important; }
+}
+@scope ([data-component~="ui-light-editor"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-light-editor"]) { display: grid !important; gap: var(--ui-space-3) !important; min-inline-size: 0; padding: 0 !important; margin: 0 !important; }
+    .stage { box-sizing: border-box !important; display: block !important; block-size: 13rem; padding: calc(var(--ui-control-min-block-size) / 2) !important; border: var(--ui-border-width) solid var(--ui-control-border); border-radius: var(--ui-field-radius, var(--ui-radius-md)); background: var(--ui-neutral-surface, var(--ui-surface)); }
+    .plane { position: relative; display: block !important; inline-size: 100%; block-size: 100%; }
+    svg { inline-size: 100%; block-size: 100%; overflow: visible; }
+    path { fill: none; stroke: var(--ui-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
+    .specimen { position: absolute; inset: 0; display: grid !important; place-items: center !important; }
+    .source { position: absolute; left: 50%; top: 0; translate: -50% -50%; display: grid !important; place-items: center !important; inline-size: max(2rem, var(--ui-control-min-block-size)); block-size: max(2rem, var(--ui-control-min-block-size)); padding: 0 !important; margin: 0 !important; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; }
+    .source:where(:not([data-component], [data-slotted]))::after { content: ""; inline-size: 1rem; block-size: 1rem; border: var(--ui-border-width) solid var(--ui-accent); border-radius: 50%; background: var(--ui-surface-raised); box-shadow: 0 0 0 var(--ui-space-2) color-mix(in srgb, var(--ui-accent) 12%, transparent), var(--ui-shadow-sm); }
+    .source:active { cursor: grabbing; }
+    .source:focus-visible { outline: var(--ui-focus-width) solid var(--ui-focus-ring); outline-offset: var(--ui-space-1); }
+    .source:disabled { cursor: not-allowed; }
+    .source:disabled:where(:not([data-component], [data-slotted]))::after { background: var(--ui-disabled-surface); border-color: var(--ui-disabled-border); box-shadow: none; }
+    .coordinates { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-space-2) !important; }
+    .hint { font-size: var(--ui-font-size-sm); color: var(--ui-text-secondary); }
+    @media (forced-colors: active) { .source:where(:not([data-component], [data-slotted]))::after { background: Canvas; border-color: CanvasText; } .source:focus-visible { outline-color: Highlight; } }
+}
+@scope ([data-component~="ui-light-editor"]) to ([data-component]) {
+@media (forced-colors: active) { }
+}

package/styles/ui-menu.css

@@ -110,6 +110,7 @@
       --_ui-material-content-color: var(--_ui-menu-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
       --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
       background:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
         linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
         linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
         var(--_ui-material-content-color) padding-box;
@@ -125,6 +126,7 @@
           0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 8px) calc(
             var(--_ui-material-separation) * var(--_ui-material-scale, 0.28) * 24px
           ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          var(--ui-material-glow, 0 0 transparent),
           inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
           var(--ui-elevation-overlay, var(--ui-shadow-lg))
         )

package/styles/ui-popover.css

@@ -81,6 +81,7 @@
       --_ui-material-content-color: var(--_ui-popover-surface, var(--ui-material-content, var(--ui-overlay-surface, var(--ui-surface-elevated))));
       --_ui-material-rim-color: color-mix(in srgb, var(--ui-material-glass, var(--ui-surface-elevated)) calc(var(--_ui-material-active) * 100%), transparent);
       background:
+        var(--ui-surface-highlight, linear-gradient(transparent, transparent)) padding-box,
         linear-gradient(var(--_ui-material-content-color), var(--_ui-material-content-color)) padding-box,
         linear-gradient(var(--_ui-material-rim-color), var(--_ui-material-rim-color)) border-box,
         var(--_ui-material-content-color) padding-box;
@@ -96,6 +97,7 @@
           0 calc(var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 8px) calc(
             var(--_ui-material-separation) * var(--_ui-material-scale, 0.55) * 24px
           ) color-mix(in oklab, var(--ui-text-primary) 15%, transparent),
+          var(--ui-material-glow, 0 0 transparent),
           inset 0 0 0 calc(var(--_ui-material-active) * var(--ui-border-width)) var(--ui-material-edge, var(--ui-border-strong)),
           var(--ui-elevation-overlay, var(--ui-shadow-lg))
         )