@threadlabs/looma 0.35.0 → 0.36.0

package/docs/theme.mjs

@@ -1,6 +1,9 @@
+import { googleFonts, googleFontStack, googleFontURL } from './fonts.mjs';
+import { mixColour as mix, paletteSeeds, companionSurface, toLch, fromLch } from './palette.mjs';
+
 const bounds = {
-  'text-size': [14, 24], 'control-size': [32, 64], 'corner-roundness': [0, 32],
-  'line-weight': [.5, 3], density: [.75, 1.5], 'scale-contrast': [1, 1.5],
+  'text-size': [14, 24], 'control-roominess': [2, 4], 'corner-roundness': [0, 32],
+  'line-weight': [.5, 3], spacing: [.75, 1.5], 'scale-contrast': [1, 1.5],
   'space-curve': [.5, 2], 'text-weight': [400, 700], 'outer-depth': [0, 2], 'inner-depth': [0, 2],
   'response-time': [0, 600],
 };
@@ -11,13 +14,16 @@ export const themeFields = [
   ['Colour', 'canvas', 'Canvas', '--ui-surface', 'colour', '#f6f6f8', 'The ground behind surfaces.'],
   ['Colour', 'surface', 'Surface', '--ui-surface-raised', 'colour', '#ffffff', 'Fields, cards and floating surfaces.'],
   ['Colour', 'text', 'Text', '--ui-text', 'colour', '#1a1a1a', 'Readable content; supporting text follows this and Surface.'],
+  ['Colour', 'warmth', 'Surface warmth', null, 'fraction', '0.5', '0% cool, 50% original, 100% warm paper and ink; your brand hue stays independent.'],
+  ['Colour', 'color-intensity', 'Color intensity', null, 'fraction', '0.5', '0% quiet, 50% original, 100% vivid, coordinated across surfaces, actions and status colors.'],
+  ['Colour', 'palette-relationship', 'Palette relationship', null, 'choice', 'preserve', 'Keep seed hues, or relate quiet surfaces to the brand through neighboring or complementary hues.'],
   ['Type', 'body-font', 'Body font', '--ui-font-sans', 'font', 'system-ui, sans-serif', 'The shared interface typeface.'],
   ['Type', 'display-font', 'Display font', '--ui-font-display', 'font', 'system-ui, sans-serif', 'The heading typeface.'],
-  ['Type', 'text-size', 'Text size', '--ui-font-size', 'positive-length', '16px', 'Base type and choice-mark size. Accepts native CSS lengths, such as 1rem.'],
+  ['Type', 'text-size', 'Text size', '--ui-font-size', 'positive-length', '1rem', 'Base type and choice-mark size. Accepts native CSS lengths, such as 1rem.'],
   ['Type', 'text-weight', 'Emphasis weight', '--ui-font-medium', 'weight', '500', 'Control-label emphasis; body and headings keep their roles.'],
-  ['Size & spacing', 'control-size', 'Control size', '--ui-control-size', 'positive-length', '40px', 'One shared height for buttons, fields and swatches.'],
-  ['Size & spacing', 'density', 'Density', '--ui-density', 'positive', '1', 'More or less breathing room throughout the interface.'],
-  ['Size & spacing', 'scale-contrast', 'Size ratio', '--ui-scale-ratio', 'ratio', '1.2', 'The multiplier between small, medium and large controls.'],
+  ['Size & spacing', 'control-roominess', 'Control roominess', '--ui-control-roominess', 'positive', '2.5', 'Shared control height as a multiple of base text size; buttons, fields and swatches stay aligned.'],
+  ['Size & spacing', 'spacing', 'Spacing', '--ui-spacing', 'positive', '1', 'More or less breathing room throughout the interface.'],
+  ['Size & spacing', 'scale-contrast', 'Size ratio', '--ui-scale-ratio', 'ratio', '1.2', 'The multiplier between small, medium and large controls. At 1 the sizes are equal; higher values separate them.'],
   ['Size & spacing', 'space-curve', 'Spacing curve', '--ui-space-curve', 'nonnegative', '1', 'Spacing growth: 1 is linear, 2 is quadratic. Independent of control sizes.'],
   ['Size & spacing', 'corner-roundness', 'Corner roundness', '--ui-radius-md', 'length', '8px', 'One corner family across controls and surfaces.'],
   ['Size & spacing', 'line-weight', 'Line weight', '--ui-border-width', 'length', '1px', 'Shared edge weight; focus stays independently visible.'],
@@ -35,20 +41,20 @@ export const themeFields = [
   ['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 } : {}) }));
+].map(([family, id, label, property, type, defaultValue, description]) => Object.freeze({ family, id, label, property, type, defaultValue, description, ...(type === 'choice' ? { choices: { preserve: 'Preserve seed hues', neighboring: 'Neighboring hues', complementary: 'Complementary hues' } } : {}), ...(bounds[id] ? { min: bounds[id][0], max: bounds[id][1] } : type === 'fraction' ? { min: 0, max: 1 } : {}) }));
 
 export const defaultRecipe = () => ({ schemaVersion: 1, values: Object.fromEntries(themeFields.map(field => [field.id, field.defaultValue])) });
 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', 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' }),
+  bookish: starting({ action: '#2e1228', canvas: '#f7f7f5', surface: '#fffefd', text: '#0d0c0c', 'body-font': 'Arial, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'control-roominess': '2.625', '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-roominess': '2.125', spacing: '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)' }),
+  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-roominess': '2.875', 'scale-contrast': '1.24', spacing: '1.05', 'response-time': '180ms', 'response-curve': 'cubic-bezier(0.16,1,0.3,1)' }),
 };
 export const startingPointLabels = { clear: 'Clear', bookish: 'Bookish', wiki: 'Wiki', editorial: 'Editorial', night: 'Night', garden: 'Garden' };
-const paletteKeys = ['action', 'canvas', 'surface', 'text'];
+const paletteKeys = themeFields.filter(field => field.family === 'Colour').map(field => field.id);
 // Palette choices move only the shared color seeds; size, material and motion stay independent.
 export const themePalettes = Object.fromEntries([
   ['clear', 'Indigo & mist'], ['bookish', 'Plum & paper'], ['wiki', 'Indigo & chalk'],
@@ -88,6 +94,24 @@ export function paletteFor(input) {
   return Object.entries(themePalettes).find(([, palette]) => paletteKeys.every(key => values[key].toLowerCase() === palette.values[key].toLowerCase()))?.[0] ?? 'custom';
 }
 
+export const themeVariations = { warmer: 'Warmer', quieter: 'Quieter', expressive: 'More expressive', compact: 'More compact' };
+/** Nearby choices reuse the same bounded semantics; locks protect whole decision families. */
+export function nearbyVariation(input, kind, locks = []) {
+  const recipe = validateRecipe(input);
+  if (!Object.hasOwn(themeVariations, kind)) throw new Error('Unknown theme variation.');
+  const deltas = {
+    warmer: { warmth: .15 }, quieter: { 'color-intensity': -.12, glow: -.1, 'outer-depth': -.15 },
+    expressive: { finish: .15, 'edge-light': .15, glow: .1 }, compact: { 'control-roominess': -.15, spacing: -.1 },
+  }[kind];
+  const values = { ...recipe.values };
+  for (const [id, delta] of Object.entries(deltas)) {
+    const field = themeFields.find(item => item.id === id);
+    const family = field.family === 'Colour' ? 'palette' : field.family === 'Material' ? 'material' : 'type';
+    if (!locks.includes(family)) values[id] = String(Number(Math.max(field.min, Math.min(field.max, Number(values[id]) + delta)).toFixed(3)));
+  }
+  return validateRecipe({ ...recipe, values });
+}
+
 const scalar = /^[+]?(?:\d+(?:\.\d*)?|\.\d+)$/;
 const length = /^(?:0|[+]?(?:\d+(?:\.\d*)?|\.\d+)(?:px|rem|em|ex|ch|cap|ic|lh|rlh|vw|vh|vi|vb|vmin|vmax|svw|svh|lvw|lvh|dvw|dvh|cm|mm|Q|in|pt|pc))$/;
 const font = /^(?:"[^"\\;{}<>@\x00-\x1f]+"|'[^'\\;{}<>@\x00-\x1f]+'|[\p{L}_-][\p{L}\p{N}_ -]*)(?:\s*,\s*(?:"[^"\\;{}<>@\x00-\x1f]+"|'[^'\\;{}<>@\x00-\x1f]+'|[\p{L}_-][\p{L}\p{N}_ -]*))*$/u;
@@ -122,6 +146,7 @@ export function validateRecipe(input) {
     const value = values[field.id];
     let valid = typeof value === 'string' && value.length > 0;
     if (valid) switch (field.type) {
+      case 'choice': valid = Object.hasOwn(field.choices, value); break;
       case 'colour': valid = /^#[\da-f]{6}$/i.test(value); break;
       case 'font': valid = font.test(value); break;
       case 'length': valid = length.test(value) && Number.isFinite(parseFloat(value)); break;
@@ -143,7 +168,9 @@ export function validateRecipe(input) {
     }
   }
   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 } }) };
+  if (input.fonts !== undefined && (!input.fonts || typeof input.fonts !== 'object' || Array.isArray(input.fonts) || Object.entries(input.fonts).some(([key, family]) => !['body-font', 'display-font'].includes(key) || !Object.hasOwn(googleFonts, family) || values[key] !== googleFontStack(family)))) throw new Error('Choose a Google font with its matching font stack.');
+  if (input.origin !== undefined && !Object.hasOwn(startingPoints, input.origin)) throw new Error('Unknown theme origin.');
+  return { schemaVersion: 1, values, ...(input.fonts === undefined ? {} : { fonts: { ...input.fonts } }), ...(input.origin === undefined ? {} : { origin: input.origin }), ...(input.presets === undefined ? {} : { presets: { ...input.presets } }) };
 }
 
 /** Match presets by their complete semantic recipe, including locally saved themes. */
@@ -153,7 +180,6 @@ export function startingPointFor(input) {
 }
 
 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
@@ -177,29 +203,38 @@ function readableColour(seed, surfaces, minimum, endpoint) {
 }
 
 /** Resolve editable colour seeds into a coordinated set of readable semantic roles. */
+const paletteCache = new Map();
 export function deriveTheme(input, { mode } = {}) {
   if (mode !== undefined && !['light', 'dark'].includes(mode)) throw new Error('Unknown theme color mode.');
   const { values } = validateRecipe(input);
-  const tokens = Object.fromEntries(themeFields.map(field => [field.property, values[field.id]]));
+  const tokens = Object.fromEntries(themeFields.filter(field => field.property).map(field => [field.property, values[field.id]]));
   for (const field of themeFields.filter(field => field.type.includes('length') && Object.hasOwn(bounds, field.id))) {
     if (boundedNumber(field, values[field.id]) === undefined) {
-      const [min, max] = bounds[field.id]; tokens[field.property] = `clamp(${min}px, ${values[field.id]}, ${max}px)`;
+      const [min, max] = bounds[field.id]; tokens[field.property] = `clamp(${min / 16}rem, ${values[field.id]}, ${max / 16}rem)`;
     }
   }
+  const cacheKey = JSON.stringify([mode, ...paletteKeys.map(key => values[key])]);
+  if (paletteCache.has(cacheKey)) {
+    const cached = paletteCache.get(cacheKey);
+    return { tokens: { ...tokens, ...cached.tokens }, adjustments: cached.adjustments.map(item => ({ ...item })) };
+  }
+  const geometry = new Set(Object.keys(tokens));
+  const seeds = paletteSeeds(values);
   const adjustments = [];
-  const nativeInk = foreground(values.canvas, '#ffffff', '#000000');
+  const nativeInk = foreground(seeds.canvas, '#ffffff', '#000000');
   const ink = mode === 'light' ? '#000000' : mode === 'dark' ? '#ffffff' : nativeInk;
   const paper = ink === '#000000' ? '#ffffff' : '#000000';
   // Preserve the requested palette in its native mode. The companion keeps a restrained
   // tint of the same surface seeds; contrast resolution below governs all usable roles.
-  const companionSurface = mix(values.text, paper, .8);
-  const surface = seed => readableColour(nativeInk === ink ? seed : mix(seed, companionSurface, .02), [ink], 7, paper);
-  tokens['--ui-surface'] = surface(values.canvas);
-  tokens['--ui-surface-raised'] = surface(values.surface);
+  const surface = seed => readableColour(nativeInk === ink ? seed : companionSurface(seed, mode ?? (ink === '#000000' ? 'light' : 'dark')), [ink], 7, paper);
+  tokens['--ui-surface'] = surface(seeds.canvas);
+  tokens['--ui-surface-raised'] = surface(seeds.surface);
   tokens['--ui-surface-sunken'] = surface(mix(tokens['--ui-surface-raised'], tokens['--ui-surface'], .92));
   const surfaces = ['--ui-surface', '--ui-surface-raised', '--ui-surface-sunken'].map(name => tokens[name]);
-  const tones = { accent: values.action, danger: '#c92d1e', success: '#007a33', warning: '#ba5b0b', info: '#0066cc' };
-  for (const [tone, seed] of Object.entries(tones)) {
+  const tones = { accent: seeds.action, danger: '#c92d1e', success: '#007a33', warning: '#ba5b0b', info: '#0066cc' };
+  for (const [tone, original] of Object.entries(tones)) {
+    const [l, c, h] = toLch(original);
+    const seed = tone === 'accent' ? original : fromLch([l, c * (.6 + Number(values['color-intensity']) * .8), h]);
     const fill = readableColour(seed, surfaces, 5, ink);
     tokens[`--ui-${tone}`] = fill;
     tokens[`--ui-on-${tone}`] = foreground(fill, '#ffffff', '#000000');
@@ -214,7 +249,7 @@ export function deriveTheme(input, { mode } = {}) {
   for (const tone of Object.keys(tones)) {
     tokens[`--ui-${tone}-subtle-text`] = readableColour(tokens[`--ui-${tone}`], readingSurfaces, 4.5, ink);
   }
-  const textSeed = nativeInk === ink ? values.text : mix(values.text, ink, .08);
+  const textSeed = nativeInk === ink ? seeds.text : mix(seeds.text, ink, .08);
   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'];
@@ -227,19 +262,24 @@ export function deriveTheme(input, { mode } = {}) {
   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'];
-  tokens['--ui-disabled-text'] = tokens['--ui-text-secondary'];
+  tokens['--ui-disabled-text'] = mix(tokens['--ui-text'], tokens['--ui-surface-raised'], .45);
   tokens['--ui-disabled-surface'] = tokens['--ui-surface-sunken'];
-  tokens['--ui-disabled-border'] = tokens['--ui-control-border'];
+  tokens['--ui-disabled-border'] = mix(tokens['--ui-text'], tokens['--ui-surface-raised'], .2);
   tokens['--ui-focus-ring'] = readableColour(tokens['--ui-accent'], readingSurfaces, 3, ink);
   tokens['--ui-focus-width'] = 'max(2px, calc(var(--ui-border-width) * 2))';
   tokens['color-scheme'] = ink === '#000000' ? 'light' : 'dark';
   for (const [id, property] of [['action', '--ui-accent'], ['canvas', '--ui-surface'], ['surface', '--ui-surface-raised'], ['text', '--ui-text']]) {
     if (tokens[property].toLowerCase() !== values[id].toLowerCase()) adjustments.push({ id, requested: values[id], resolved: tokens[property], reason: 'Adjusted to keep the shared palette readable.' });
   }
-  return { tokens, adjustments };
+  const colors = Object.fromEntries(Object.entries(tokens).filter(([key]) => !geometry.has(key) || /^#[\da-f]{6}$/i.test(tokens[key])));
+  paletteCache.set(cacheKey, { tokens: colors, adjustments });
+  if (paletteCache.size > 16) paletteCache.delete(paletteCache.keys().next().value);
+  return { tokens, adjustments: adjustments.map(item => ({ ...item })) };
 }
 
 /** Shared public seeds; combine with theme-system.css for a standalone exported theme. */
@@ -249,6 +289,8 @@ export function themeCSS(input, systemCSS = '', { scope = 'portable' } = {}) {
   const selector = scope === 'documentation'
     ? ':root[data-looma-documentation-theme], :root[data-looma-documentation-theme] [data-theme], :root[data-looma-documentation-theme] [data-contrast]'
     : ':root, [data-theme], [data-contrast]';
+  const fontURL = googleFontURL(validateRecipe(input).fonts);
+  const imports = fontURL ? `@import url("${fontURL}");\n` : '';
   const light = deriveTheme(input, { mode: 'light' }).tokens;
   const dark = deriveTheme(input, { mode: 'dark' }).tokens;
   const palette = [], geometry = [];
@@ -267,5 +309,5 @@ export function themeCSS(input, systemCSS = '', { scope = 'portable' } = {}) {
   // 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${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`;
+  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${imports}${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/docs/value-editors.mjs

@@ -3,26 +3,28 @@ const lengthUnits = { px: 1, rem: 16, em: 16, cm: 96 / 2.54, mm: 96 / 25.4, Q: 9
 const timeUnits = { ms: 1, s: 1000 };
 const rounded = value => String(Number(Number(value).toFixed(6)));
 
-export function valueEditor(field, value, { remPixels = 16 } = {}) {
+export function valueEditor(field, value) {
+  if (field.type === 'choice') return { kind: 'choice', value };
   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 };
+    // Relative limits stay root-scaled when the user enlarges their default font.
+    const units = field.type === 'time' ? timeUnits : lengthUnits;
     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;
+  const scale = field.type === 'fraction' || field.id === 'spacing' ? 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);
+  return field.type === 'fraction' || field.id === 'spacing' ? rounded(Number(value) / 100) : String(value);
 }
 
 export function convertValueUnit(value, nextUnit, { remPixels = 16 } = {}) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "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.4",
+    "markupress": "^0.8.6",
     "@nextwebwg/htmlkit": "1.0.0-alpha.69",
     "vite": "^8.3.4"
   },

package/styles/ui-button.css

@@ -145,7 +145,9 @@
       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: var(--ui-surface-highlight, none);
-      box-shadow: var(--ui-button-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
+      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),
@@ -278,7 +280,9 @@
       background-color: var(--_tone);
       color: var(--_on-tone);
       background-image: var(--_tone-highlight);
-      box-shadow: var(--ui-button-solid-shadow, var(--ui-action-shadow, var(--_ui-action-shadow))), var(--_tone-glow);
+      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"]) {
@@ -448,8 +452,11 @@
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
     @media (pointer: coarse) {
-      :scope:where([data-component~="ui-button"]), :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
-        min-block-size: var(--ui-control-min-block-size);
+      :scope:where([data-component~="ui-button"]) {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+      :scope:where([data-component~="ui-button"])[data-ui-button-state~="size=sm"] {
+        min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       }
     }
 

package/styles/ui-color-picker.css

@@ -109,7 +109,7 @@
         --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
       }
       :scope:where([data-component~="ui-color-picker"])[data-ui-color-picker-state~="size=sm"] {
-        --_size: var(--ui-control-min-block-size);
+        --_size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
         --_font: var(--ui-font-size-md);
       }
     }

package/styles/ui-combobox.css

@@ -320,7 +320,7 @@
       /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
          body-size text: below 16px, iOS zooms the page into the focused field. */
       :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] {
-        --_row: var(--ui-control-min-block-size);
+        --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       }
       :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input {
         font-size: inherit;
@@ -732,7 +732,7 @@
       /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
          body-size text: below 16px, iOS zooms the page into the focused field. */
       :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
-        --_row: var(--ui-control-min-block-size);
+        --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
       }
       :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
         font-size: inherit;

package/styles/ui-input.css

@@ -117,7 +117,10 @@
       }
 
       :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"] {
-        min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size)));
+        min-block-size: var(
+          --ui-input-min-block-size,
+          var(--_ui-default-input-min-block-size, max(var(--ui-control-size-sm), var(--ui-control-min-block-size)))
+        );
       }
     }
 

package/styles/ui-light-editor.css

@@ -7,22 +7,117 @@
 [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: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-glyph {
+      position: relative;
+      z-index: 1;
+      display: inline-flex !important;
+      color: var(--ui-accent);
+      font-size: var(--ui-font-size-lg);
+    }
+    .source:where(:not([data-component], [data-slotted]))::after {
+      content: "";
+      position: absolute;
+      inline-size: 2rem;
+      block-size: 2rem;
+      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-glyph {
+        color: CanvasText;
+      }
+      .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) { }
+@media (forced-colors: active) {
+    }
 }

package/styles/ui-select.css

@@ -77,10 +77,12 @@
       --_ui-select-highlight: var(--ui-surface-highlight, linear-gradient(transparent, transparent));
       appearance: none;
       padding-inline-end: calc(var(--ui-space-3) + 1.5rem) !important;
-      background-image: var(
-        --ui-select-chevron,
-        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
-      ), var(--_ui-select-highlight);
+      background-image:
+        var(
+          --ui-select-chevron,
+          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c5c58' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+        ),
+        var(--_ui-select-highlight);
       background-repeat: no-repeat;
       background-position: right var(--ui-space-3) center, center;
       background-size: 1.125rem 1.125rem, 100% 100%;
@@ -127,7 +129,9 @@
       padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
       padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1)) !important;
       background-position: right var(--ui-space-2) center, center;
-      background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm), 100% 100%;
+      background-size:
+        var(--ui-icon-size-sm) var(--ui-icon-size-sm),
+        100% 100%;
       font-size: var(--ui-font-size-sm);
     }
 
@@ -147,7 +151,7 @@
       }
 
       :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=sm"] {
-        min-block-size: var(--ui-control-min-block-size);
+        min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
         font-size: inherit;
       }
     }

package/styles/ui-tabs.css

@@ -59,10 +59,9 @@
       max-inline-size: 100%;
       /* Tabs that do not fit scroll sideways rather than wrapping or squeezing. */
       overflow-x: auto;
-      /* overflow-x: auto would make the block axis scrollable too; a sideways swipe must not scroll the
-         strip or the page vertically. */
+      /* Contain sideways overscroll without trapping vertical page scrolling. */
       overflow-y: hidden;
-      overscroll-behavior: contain;
+      overscroll-behavior-inline: contain;
       scrollbar-width: thin;
       border-block-end: var(--ui-border-width) solid var(--ui-border-divider);
     }

package/styles/ui-tooltip.css

@@ -204,7 +204,8 @@
       border-inline-end-width: var(--ui-border-width);
       border-block-end-width: var(--ui-border-width);
       border-end-end-radius: var(--ui-border-width);
-      transform: rotate(45deg) scaleX(1.25) scaleY(0.85);
+      /* Stretch in screen axes after rotation so both arrow shoulders stay level. */
+      transform: scale(1.25, 0.85) rotate(45deg);
     }
 
     :scope:where([data-component~="ui-tooltip"])[data-ui-actual-placement="bottom"] .surface:where(:not([data-component], [data-slotted]))::after {

package/theme-system.css

@@ -12,7 +12,8 @@
 
 @layer theme {
   :root {
-    --ui-density: 1;
+    --ui-spacing: 1;
+    --ui-control-roominess: 2.5;
     --ui-scale-ratio: 1.2;
     --ui-space-curve: 1;
     --ui-outer-depth: 0.6;
@@ -32,8 +33,9 @@
   :where(:root, [data-theme], [data-contrast]) {
     /* Controls use a ratio. Spacing uses an independent curve, so increasing the size
        contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
+    --ui-control-size: calc(var(--ui-font-size) * var(--ui-control-roominess));
     --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
-    --_ui-theme-unit: calc(var(--ui-control-size) * 0.1 * max(0, var(--ui-density)));
+    --_ui-theme-unit: calc(var(--ui-font-size) * 0.25 * max(0, var(--ui-spacing)));
     --_ui-theme-curve: max(0, var(--ui-space-curve));
     --ui-control-size-sm: calc(var(--ui-control-size) / var(--_ui-theme-ratio));
     --ui-control-size-md: var(--ui-control-size);
@@ -116,6 +118,16 @@
     --ui-press-scale: 0.98;
   }
 
+  @media (pointer: coarse) {
+    :where(:root, [data-theme], [data-contrast]) {
+      --ui-control-size-sm: max(calc(var(--ui-control-size) / var(--_ui-theme-ratio)), var(--ui-control-min-block-size));
+      --ui-control-size-md: calc(var(--ui-control-size-sm) * var(--_ui-theme-ratio));
+      --ui-control-size-lg: calc(var(--ui-control-size-md) * var(--_ui-theme-ratio));
+      /* Small native fields use body-size text on touch to avoid focus zoom. */
+      --ui-control-inset-block-sm: max(0px, calc((var(--ui-control-size-sm) - var(--ui-font-size-md) * var(--ui-line-height-tight) - 2 * var(--ui-border-width)) / 2));
+    }
+  }
+
   @media (prefers-reduced-motion: reduce) {
     :where(:root, [data-theme], [data-contrast]) {
       --ui-motion-press: 0ms;

package/tokens.css

@@ -251,7 +251,7 @@
     --ui-control-surface: var(--ui-surface);
     --ui-control-surface-disabled: var(--ui-surface-muted);
     --ui-control-border-hover: color-mix(in oklab, var(--ui-text) 50%, var(--ui-surface));
-    --ui-control-placeholder: var(--ui-text-secondary);
+    --ui-control-placeholder: color-mix(in oklab, var(--ui-text) 58%, var(--ui-control-surface));
     --ui-control-focus: var(--ui-focus-ring);
     /* Derived from the ring, not a near-white tint, so the halo shows on any surface. */
     --ui-control-focus-halo: color-mix(in srgb, var(--ui-focus-ring) 24%, transparent);
@@ -283,6 +283,15 @@
       --ui-motion-fast: 0ms;
     }
   }
+  /* Raise the family together on touch, so the minimum does not collapse sm and md. */
+  @media (pointer: coarse) {
+    :root, :where([data-theme], [data-contrast]) {
+      --ui-control-size-sm: max(calc(var(--ui-control-size) / 1.2), var(--ui-control-min-block-size));
+      --ui-control-size-md: calc(var(--ui-control-size-sm) * 1.2);
+      --ui-control-size-lg: calc(var(--ui-control-size-md) * 1.2);
+    }
+  }
+
 }
 
 /* The scroll fade every Looma scroller uses (see ui-scroll-area). Scroll-driven animations grow each
@@ -409,4 +418,5 @@
     color: var(--ui-disabled-text);
     cursor: not-allowed;
   }
+
 }