@threadlabs/looma 0.36.0 → 0.37.1

package/docs/customizer.js

@@ -22,17 +22,18 @@ export function connect(host) {
   let alive = true;
   let selectedExample = '';
   let refinementTrigger;
-  let previewFrame = 0, pending = false, comparing = false, candidate, gestureStart;
-  const entryRecipe = structuredClone(recipe);
+  let previewFrame = 0, pending = false, candidate, gestureStart;
   const abort = new AbortController();
   const say = (text, error = false) => { message.textContent = text; message.setAttribute('role', error ? 'alert' : 'status'); };
   const sayApplied = text => say(theme?.storageAvailable ? text : 'Theme applies to this page. Browser storage is unavailable; download CSS or a recipe to keep it.');
   const fields = new Map(themeFields.map(field => [field.id, field]));
   const unitContext = () => ({ remPixels: parseFloat(view.getComputedStyle(document.documentElement).fontSize) });
+  const editorFor = (field, value) => valueEditor(field, value, { remPixels: parseFloat(recipe.values['text-size']) });
+  let boundsBase;
   const updateControl = (element, value) => {
     const field = fields.get(element.dataset.token);
     if (!field || !element.dataset.editorKind) { componentRegistry.update(element, { value }); return; }
-    const editor = valueEditor(field, value);
+    const editor = editorFor(field, value);
     if (element.dataset.editorKind === 'curve') {
       element.closest('[data-curve-for]').hidden = editor.kind !== 'curve';
       if (editor.kind === 'curve') componentRegistry.update(element, { value });
@@ -40,13 +41,33 @@ export function connect(host) {
   };
   const updateUnits = () => {
     for (const control of root.querySelectorAll('[data-unit-for]')) {
-      const field = fields.get(control.dataset.unitFor), editor = valueEditor(field, recipe.values[field.id]);
+      const field = fields.get(control.dataset.unitFor), editor = editorFor(field, recipe.values[field.id]);
       if (![...control.options].some(option => option.value === editor.unit)) control.add(new view.Option(editor.unit, editor.unit));
       componentRegistry.update(control, { value: editor.unit });
     }
   };
+  const updateSizes = () => {
+    const samples = [...root.querySelectorAll('[data-size-sample]')].filter(sample => sample.getClientRects().length);
+    if (!samples.length) return;
+    const base = parseFloat(view.getComputedStyle(document.documentElement).fontSize);
+    const rounded = value => Number(value.toFixed(2));
+    for (const sample of samples) {
+      const button = sample.querySelector('button');
+      if (button) {
+        const height = button.getBoundingClientRect().height;
+        sample.querySelector('[data-size-readout]').textContent = ` · ${rounded(height / base)}rem (${rounded(height)}px)`;
+      }
+    }
+  };
   const paint = () => {
     const css = theme?.css || themeCSS(recipe);
+    if (boundsBase !== recipe.values['text-size']) {
+      boundsBase = recipe.values['text-size'];
+      for (const control of root.querySelectorAll('[data-token]')) {
+        const field = fields.get(control.dataset.token);
+        if (field?.type.includes('length') && field.id !== 'text-size') updateControl(control, recipe.values[field.id]);
+      }
+    }
     for (const family of ['material','palette']) {
       const state = refinementState(recipe, family), presets = family === 'material' ? materialPresets : themePalettes;
       for (const select of root.querySelectorAll(`[data-refinement-preset="${family}"]`)) {
@@ -73,6 +94,7 @@ export function connect(host) {
       : 'Finish catches the light. Spread shapes its reflection; strength affects reflection, edge light and glow together.';
     const gaps = root.querySelector('[data-spacing-samples]');
     gaps.setAttribute('aria-label', `Spacing progression with curve ${recipe.values['space-curve']}`);
+    updateSizes();
   };
   const show = (next, persist = true) => {
     recipe = validateRecipe(next);
@@ -83,16 +105,15 @@ export function connect(host) {
     changed = JSON.stringify(recipe) !== JSON.stringify(saved);
     paint();
   };
-  const clearComparison = () => {
-    if (!comparing && !candidate) return;
-    comparing = false; candidate = undefined; theme?.compare();
-    root.querySelector('[data-action="compare"]').setAttribute('aria-pressed', 'false');
+  const clearPreview = () => {
+    if (!candidate) return;
+    candidate = undefined; theme?.compare();
     root.querySelector('[data-variation-confirm]').hidden = true;
   };
   const preview = next => {
     const validated = validateRecipe(next);
     if (JSON.stringify(validated.values) === JSON.stringify(recipe.values)) return;
-    clearComparison();
+    clearPreview();
     if (!pending) gestureStart = structuredClone(recipe);
     recipe = validated; pending = true;
     if (!previewFrame) previewFrame = view.requestAnimationFrame(() => {
@@ -166,17 +187,13 @@ export function connect(host) {
     if (!button) { view.requestAnimationFrame(paint); return; }
     if (button.dataset.action === 'save' && saving) return;
     flush();
-    if (!['compare', 'preview-variation', 'apply-variation', 'cancel-variation'].includes(button.dataset.action)) clearComparison();
+    if (!['preview-variation', 'apply-variation', 'cancel-variation'].includes(button.dataset.action)) clearPreview();
     try {
       switch (button.dataset.action) {
         case 'undo': case 'redo':
           theme?.[button.dataset.action](); show(theme?.recipe ?? recipe, false); sayApplied('Previous theme decision restored.'); break;
-        case 'compare':
-          candidate = undefined; comparing = !comparing; theme?.compare(comparing ? entryRecipe : undefined);
-          button.setAttribute('aria-pressed', String(comparing)); root.querySelector('[data-variation-confirm]').hidden = true;
-          say(comparing ? 'Comparing with the theme when you entered. Your edits remain intact. Choose Compare again to return.' : 'Back to your edited theme.'); break;
         case 'preview-variation': {
-          clearComparison();
+          clearPreview();
           const locks = [...root.querySelectorAll('[data-family-lock]')].filter(control => control.querySelector('input')?.checked).map(control => control.dataset.familyLock);
           candidate = nearbyVariation(recipe, root.querySelector('[data-variation-choice]').value, locks);
           theme?.compare(candidate); root.querySelector('[data-variation-confirm]').hidden = false;
@@ -185,10 +202,10 @@ export function connect(host) {
           break;
         }
         case 'apply-variation': {
-          const selected = candidate; clearComparison();
+          const selected = candidate; clearPreview();
           if (selected) show(selected); sayApplied('Variation applied. Undo returns to your previous theme.'); break;
         }
-        case 'cancel-variation': clearComparison(); paint(); say('Variation cancelled; your theme is unchanged.'); break;
+        case 'cancel-variation': clearPreview(); paint(); say('Variation cancelled; your theme is unchanged.'); break;
         case 'light-top': case 'light-left': case 'light-center': {
           const positions = { 'light-top': [.5, 0], 'light-left': [.15, .15], 'light-center': [.5, .5] };
           const [x, y] = positions[button.dataset.action];
@@ -252,7 +269,7 @@ export function connect(host) {
     if (event.target.matches('[data-light-editor]') || event.target.closest?.('[data-token]')) {
       input(event); flush(); sayApplied('Theme remembered in this browser. Undo restores the previous decision.'); return;
     }
-    flush(); clearComparison();
+    flush(); clearPreview();
     if (event.target.matches('[data-unit-for]')) {
       const field = fields.get(event.target.dataset.unitFor);
       try {
@@ -280,7 +297,7 @@ export function connect(host) {
   const cancel = event => { if (event.target.matches('[data-light-editor], [data-editor-kind="curve"]')) { flush(false); say('Drag cancelled; the previous value is restored.'); } };
   const keyboard = event => {
     if (!(event.ctrlKey || event.metaKey) || event.key.toLowerCase() !== 'z' || event.target.closest?.('input,textarea,select,[contenteditable="true"]')) return;
-    event.preventDefault(); flush(); clearComparison(); theme?.[event.shiftKey ? 'redo' : 'undo'](); show(theme?.recipe ?? recipe, false);
+    event.preventDefault(); flush(); clearPreview(); theme?.[event.shiftKey ? 'redo' : 'undo'](); show(theme?.recipe ?? recipe, false);
   };
   const ready = event => {
     if (event.data?.type === 'looma-preview-ready' && [...root.querySelectorAll('iframe')].some(frame => frame.contentWindow === event.source)) paint();
@@ -289,7 +306,7 @@ export function connect(host) {
   let fontRequest = 0;
   const selectFont = async event => {
     const control = event.target.closest?.('[data-font-picker]'); if (!control) return;
-    flush(); clearComparison();
+    flush(); clearPreview();
     const id = control.dataset.fontPicker, family = event.detail.value;
     const fonts = { ...recipe.fonts };
     if (family === 'system') delete fonts[id]; else fonts[id] = family;
@@ -310,6 +327,7 @@ export function connect(host) {
     selectedExample = event.detail.value ?? '';
     filterExamples();
   };
+  root.addEventListener('toggle', updateSizes, true);
   root.addEventListener('looma-example-remove', remove);
   root.addEventListener('input', input);
   root.addEventListener('cancel', cancel);
@@ -334,5 +352,5 @@ export function connect(host) {
       root.querySelector('[data-action="save"]').hidden = false;
     }).catch(error => { if (alive && error.name !== 'AbortError') say(error.message, true); });
   }
-  return () => { flush(); clearComparison(); root.removeEventListener('cancel', cancel); root.removeEventListener('keydown', keyboard); alive = false; abort.abort(); root.removeEventListener('looma-example-remove', remove); root.removeEventListener('input', input); root.removeEventListener('value-change', selectExample); root.removeEventListener('value-change', selectFont); root.removeEventListener('blur', blur, true); root.removeEventListener('change', change); root.removeEventListener('click', click); view.removeEventListener('beforeunload', flush); view.removeEventListener('message', ready); view.removeEventListener(themeEvent, synchronize); };
+  return () => { root.removeEventListener('toggle', updateSizes, true); flush(); clearPreview(); root.removeEventListener('cancel', cancel); root.removeEventListener('keydown', keyboard); alive = false; abort.abort(); root.removeEventListener('looma-example-remove', remove); root.removeEventListener('input', input); root.removeEventListener('value-change', selectExample); root.removeEventListener('value-change', selectFont); root.removeEventListener('blur', blur, true); root.removeEventListener('change', change); root.removeEventListener('click', click); view.removeEventListener('beforeunload', flush); view.removeEventListener('message', ready); view.removeEventListener(themeEvent, synchronize); };
 }

package/docs/theme.mjs

@@ -19,7 +19,7 @@ export const themeFields = [
   ['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', '1rem', 'Base type and choice-mark size. Accepts native CSS lengths, such as 1rem.'],
+  ['Type', 'text-size', 'Base text size', '--ui-font-size', 'positive-length', '16px', 'Sets the document root in px. Type, spacing and layout use rem relationships and scale from this base once.'],
   ['Type', 'text-weight', 'Emphasis weight', '--ui-font-medium', 'weight', '500', 'Control-label emphasis; body and headings keep their roles.'],
   ['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.'],
@@ -29,12 +29,12 @@ export const themeFields = [
   ['Size & spacing', 'line-weight', 'Line weight', '--ui-border-width', 'length', '1px', 'Shared edge weight; focus stays independently visible.'],
   ['Material', 'outer-depth', 'Outer depth', '--ui-outer-depth', 'nonnegative', '0.6', 'How strongly controls and floating surfaces rise above the page.'],
   ['Material', 'inner-depth', 'Inner depth', '--ui-inner-depth', 'nonnegative', '0.3', 'How strongly fields and pressed controls sit into their surface.'],
-  ['Material', 'glassiness', 'Glassiness', '--ui-glassiness', 'fraction', '0', 'Frosted blur, richer background colour and light-catching glass edges. Content stays readable.'],
+  ['Material', 'glassiness', 'Glassiness', '--ui-glassiness', 'fraction', '0', 'Clear through richly frosted: the upper range adds stronger blur, saturation and glass edges. Content stays readable.'],
   ['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', 'glow', 'Glow', '--ui-glow', 'fraction', '0', 'Reflected light beyond a surface, from a quiet halo to a vivid bloom at the upper end.'],
   ['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.'],
@@ -161,6 +161,7 @@ export function validateRecipe(input) {
         if (field.type === 'weight') valid &&= number >= 1 && number <= 1000;
       }
     }
+    if (field.id === 'text-size' && valid && !value.endsWith('px')) throw new Error('Base text size: enter a px value for the document root.');
     if (!valid) throw new Error(`${field.label}: enter a valid ${field.type.replaceAll('-', ' ')} value.`);
     if (Object.hasOwn(bounds, field.id)) {
       const number = boundedNumber(field, value), [min, max] = bounds[field.id];
@@ -186,7 +187,7 @@ const contrast = (a, b) => (Math.max(luminance(a), luminance(b)) + .05) / (Math.
 // 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;
+  let amount = .6;
   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);
 }
@@ -210,7 +211,7 @@ export function deriveTheme(input, { mode } = {}) {
   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 / 16}rem, ${values[field.id]}, ${max / 16}rem)`;
+      const [min, max] = bounds[field.id]; tokens[field.property] = `clamp(${min}px, ${values[field.id]}, ${max}px)`;
     }
   }
   const cacheKey = JSON.stringify([mode, ...paletteKeys.map(key => values[key])]);

package/docs/value-editors.mjs

@@ -3,14 +3,15 @@ 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) {
+export function valueEditor(field, value, { remPixels = 16 } = {}) {
+  if (field.id === 'text-size') return { kind: 'number', value, unit: 'px', min: field.min, max: field.max, step: 1 };
   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';
-    // Relative limits stay root-scaled when the user enlarges their default font.
-    const units = field.type === 'time' ? timeUnits : lengthUnits;
+    // Convert authoring limits against the same root as the displayed quantity.
+    const units = field.type === 'time' ? timeUnits : { ...lengthUnits, rem: 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,

package/editor/icons.d.ts

@@ -1,6 +1,9 @@
 import { type IconNode } from 'lucide';
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 export declare const LOOMA_ICONS: {
+    monitor: IconNode;
+    sun: IconNode;
+    moon: IconNode;
     'align-center': IconNode;
     'align-left': IconNode;
     'align-right': IconNode;

package/editor/index.js

@@ -2,10 +2,13 @@ import { n as TABLE_CELL_BACKGROUND_PRESETS, t as TABLE_CELL_BACKGROUND_OPTIONS
 import { n as resolveTableCellAt, t as measureTableOverlayGeometry } from "./chunks/ui.js";
 import { $ as LOOMA_ACTIVE_BLOCK_BLUR_GRACE_MS, A as filterLoomaMentionItems, B as LOOMA_FOOTNOTE_LABEL, C as loomaMarkdownToHtml, D as createLoomaMentionExtension, E as LoomaMentionSuggestionPluginKey, F as LoomaTableOfContents, G as LoomaFigcaption, H as LoomaFootnoteReference, I as getTableOfContentsEntries, J as revealLoomaExpandAt, K as LoomaFigure, L as normalizeTableOfContentsConfig, M as LoomaImage, N as normalizeImageDimension, O as DEFAULT_MENTION_RESULT_LIMIT, P as normalizeImagePlacement, Q as LoomaCallout, R as LoomaTab, S as loomaMarkdownFromDoc, T as siteRelativeHref, U as LoomaFootnotes, V as LoomaFootnote, W as findLoomaFootnote, X as LoomaChip, Y as LOOMA_CHIP_COLORS, Z as normalizeLoomaChipColor, _ as getActiveTableCellAlignment, a as getActiveTableUiState, b as setActiveTableCellBackground, c as insertTableAtRange, d as LoomaTableKit, et as LOOMA_ACTIVE_BLOCK_CLASS, f as getDefaultEditorExtensions, g as LoomaTableHeader, h as LoomaTableCell, i as getDefaultSlashCommands, j as normalizeMentionResultLimit, k as MAX_MENTION_RESULT_LIMIT, l as normalizeActiveTableColumnWidths, m as LoomaTable, n as createLoomaSlashCommandExtension, nt as LoomaActiveBlock, o as handleTableAction, p as getLoomaTableExtensions, q as LoomaExpand, r as filterLoomaSlashCommands, rt as LoomaActiveBlockPluginKey, s as handleTableOverlayAction, t as LoomaSlashCommand, tt as LOOMA_ACTIVE_BLOCK_TYPING_IDLE_MS, u as shouldShowTextFormattingToolbar, v as getActiveTableCellBackground, w as createSiteRelativeLinks, x as LoomaSmartPaste, y as setActiveTableCellAlignment, z as LoomaTabs } from "./chunks/extensions.js";
 import { a as setReferenceDisplay, i as referenceDisplay, n as LoomaReferencePresentation, o as LOOMA_CALLOUT_TONES, r as getReferenceDisplay, t as LoomaReference } from "./chunks/reference-display.js";
-import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bell, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Lightbulb, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, MessageSquareWarning, Minus, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Paperclip, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Superscript, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
+import { AlignCenter, AlignLeft, AlignRight, ArrowLeft, Bell, Bold, BookUser, Braces, Calculator, Check, ChevronDown, ChevronLeft, ChevronRight, CircleCheck, CircleDot, CircleQuestionMark, CircleX, CodeXml, Columns3, Compass, CreditCard, Ellipsis, Eraser, ExternalLink, FileText, Folder, GripHorizontal, GripVertical, Heading1, Heading2, Heading3, Highlighter, History, Image, Info, Italic, LayoutDashboard, Lightbulb, Link, List, ListOrdered, ListTodo, LoaderCircle, Merge, MessageSquareWarning, Minus, Monitor, Moon, NotebookPen, PaintBucket, PanelBottom, PanelLeft, PanelRight, PanelTop, Paperclip, Pencil, Pilcrow, Plus, Quote, Receipt, Redo2, Rows3, Search, Settings, Split, Strikethrough, Sun, Superscript, Table2, Tag, Trash2, TriangleAlert, Truck, Underline, Undo2, Unlink, UserRound, Users, X } from "lucide";
 //#region src/editor/icons.ts
 /** The opinionated Lucide set used by Looma's shipped interaction surfaces. */
 var LOOMA_ICONS = {
+	monitor: Monitor,
+	sun: Sun,
+	moon: Moon,
 	"align-center": AlignCenter,
 	"align-left": AlignLeft,
 	"align-right": AlignRight,

package/package.json

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

package/styles/ui-avatar-group.css

@@ -70,7 +70,7 @@
       inline-size: 1.25rem;
       block-size: 1.25rem;
       /* Matches the xs Avatar's initials. */
-      font-size: calc(var(--ui-font-size) * 0.5625);
+      font-size: calc(var(--ui-font-size-md) * 0.5625);
       line-height: 1;
     }
 

package/styles/ui-avatar.css

@@ -60,7 +60,7 @@
       inline-size: 1.25rem;
       block-size: 1.25rem;
       /* Below the type scale on purpose: two initials need room inside a 1.25rem circle. */
-      font-size: calc(var(--ui-font-size) * 0.5625);
+      font-size: calc(var(--ui-font-size-md) * 0.5625);
       letter-spacing: 0.02em;
     }
 

package/styles/ui-button.css

@@ -451,18 +451,9 @@
     }
 
     /* 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"]) {
-        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));
-      }
-    }
 
     /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
-       area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
-       a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+       area, centred on it, like IconButton's. A link-style action 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-appearance="link"],
@@ -567,12 +558,9 @@
     /* Ghost keeps no border, but gains the same neutral surface as other disabled buttons. */
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
-    @media (pointer: coarse) {
-    }
 
     /* Under touch, a link-style button's press lands within the control minimum: an invisible hit
-       area, centred on it, like IconButton's. A boxed button grows to the minimum itself (below);
-       a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
+       area, centred on it, like IconButton's. A link-style action 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. */
 

package/styles/ui-card.css

@@ -52,7 +52,7 @@
     }
 
     :scope:where([data-component~="ui-card"])[data-ui-card-state~="treatment=expressive"] {
-      --_ui-panel-glass: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-panel-glass: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
       --_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));

package/styles/ui-checkbox.css

@@ -210,12 +210,6 @@
       padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-checkbox-size, 1.125rem))) / 2)) !important;
     }
 
-    @media (pointer: coarse) {
-      :scope:where([data-component~="ui-checkbox"])[data-ui-checkbox-state~="size=sm"] {
-        --_row: var(--ui-control-min-block-size);
-      }
-    }
-
     /* A component that sets its display still honours the hidden attribute on its root. */
     :scope:where([data-component~="ui-checkbox"])[hidden] {
       display: none !important;
@@ -235,8 +229,5 @@
        and the first line centres in that control height, so the label shares a row's baseline.
        Multi-line labels and descriptions still grow downward from that first line. */
 
-    @media (pointer: coarse) {
-    }
-
     /* A component that sets its display still honours the hidden attribute on its root. */
 }

package/styles/ui-color-picker.css

@@ -104,17 +104,4 @@
       padding: 0 !important;
       accent-color: var(--ui-accent-solid);
     }
-    @media (pointer: coarse) {
-      :scope:where([data-component~="ui-color-picker"]) {
-        --_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: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
-        --_font: var(--ui-font-size-md);
-      }
-    }
-}
-@scope ([data-component~="ui-color-picker"]) to ([data-component]) {
-@media (pointer: coarse) {
-    }
 }

package/styles/ui-combobox.css

@@ -310,20 +310,8 @@
       white-space: nowrap;
     }
     @media (pointer: coarse) {
-      :scope:where([data-component~="ui-combobox"]) {
-        --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-      }
-      button {
-        min-inline-size: 2.75rem;
-        min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-      }
-      /* 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: 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;
+        font-size: var(--ui-font-size-md);
       }
     }
     @media (forced-colors: active) {
@@ -408,8 +396,6 @@
     /* A ghost icon button: the affordance is the mark, not a box around it. */
     /* A row with a tag or a description: the label and its tag on one line, the description under them. */
     @media (pointer: coarse) {
-      /* 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. */
     }
     @media (forced-colors: active) {
     }
@@ -722,20 +708,8 @@
       white-space: nowrap;
     }
     @media (pointer: coarse) {
-      :where([data-component~="ui-combobox"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
-        --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-      }
-      button:where(:scope, :scope *) {
-        min-inline-size: 2.75rem;
-        min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
-      }
-      /* 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: 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;
+        font-size: var(--ui-font-size-md);
       }
     }
     @media (forced-colors: active) {

package/styles/ui-cycle-button.css

@@ -0,0 +1,36 @@
+/* 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-cycle-button"] { --html-next-scope-owner: "ui-cycle-button" !important; }
+}
+@scope ([data-component~="ui-cycle-button"]) to ([data-component], [data-slotted]) {
+:scope:where([data-component~="ui-cycle-button"]) {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      gap: 0 !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      vertical-align: middle;
+    }
+    :scope:where([data-component~="ui-cycle-button"])[hidden] {
+      display: none !important;
+    }
+}
+@scope ([data-slotted~="ui-cycle-button"]:not([data-component])) to ([data-component], [data-slotted]) {
+:where([data-component~="ui-cycle-button"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-cycle-button"]))) {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      gap: 0 !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      vertical-align: middle;
+    }
+    :where([data-component~="ui-cycle-button"])[hidden]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-cycle-button"]))) {
+      display: none !important;
+    }
+}

package/styles/ui-dialog.css

@@ -74,7 +74,7 @@
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
        transparency, saturation and edge light belong to the surrounding decorative material. */
     :scope:where([data-component~="ui-dialog"]) {
-      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
       --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
       --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 1) * 8px);
@@ -395,7 +395,7 @@
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
        transparency, saturation and edge light belong to the surrounding decorative material. */
     :where([data-component~="ui-dialog"]):where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))) {
-      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
       --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
       --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 1) * 8px);

package/styles/ui-icon-button.css

@@ -331,14 +331,6 @@
       --_size: var(--ui-control-size-lg);
     }
 
-    @media (pointer: coarse) {
-      :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="matchButton"] {
-        inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
-        min-inline-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
-        min-block-size: max(var(--ui-icon-button-size, var(--_size)), var(--ui-control-min-block-size));
-      }
-    }
-
     :scope:where([data-component~="ui-icon-button"])[data-ui-icon-button-state~="round"] {
       border-radius: var(--ui-radius-round);
     }
@@ -348,14 +340,18 @@
       background-color: var(--ui-icon-button-outline-surface, var(--_icon-button-outline-surface, var(--ui-surface-default)));
       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)), var(--_tone-glow);
+      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: 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))), var(--_tone-glow);
+      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"]) {
@@ -509,9 +505,6 @@
 
     /* A text button's companion uses control geometry; compact icon buttons keep their own density. */
 
-    @media (pointer: coarse) {
-    }
-
     /* Native toggle state persists after pointer release, including during loading. */
 
     @media (prefers-reduced-motion: reduce) {

package/styles/ui-input-group.css

@@ -89,16 +89,6 @@
       min-block-size: var(--ui-control-size-lg);
     }
 
-    @media (pointer: coarse) {
-      :scope:where([data-component~="ui-input-group"]) {
-        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-      }
-
-      :scope:where([data-component~="ui-input-group"]):has(.field [data-ui-input-state~="size=sm"]) {
-        min-block-size: var(--ui-control-min-block-size);
-      }
-    }
-
     :scope:where([data-component~="ui-input-group"]):hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :is(:user-invalid, [data-user-invalid]))) {
       border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }
@@ -249,9 +239,6 @@
 
     /* The frame takes its input's size, so a small group lines up with small buttons and fields. */
 
-    @media (pointer: coarse) {
-    }
-
     /* The ring shows when the field's input would show its own: when it is focus-visible, which a
        text input is for a pointer as well as a keyboard. A focused action button draws its own. */
 

package/styles/ui-input.css

@@ -100,28 +100,13 @@
       font-size: var(--ui-font-size-md);
     }
 
-    /* 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. */
+    /* Touch may use body-size text in a small native field to avoid focus zoom; this does not impose a larger visible control height. */
     @media (pointer: coarse) {
-      :scope:where([data-component~="ui-input"]) {
-        min-block-size: var(
-          --ui-input-min-block-size,
-          var(--_ui-default-input-min-block-size, max(var(--ui-control-size-md), var(--ui-control-min-block-size)))
-        );
-      }
-
       :scope:where([data-component~="ui-input"]),
       :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"],
       :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
         font-size: var(--ui-font-size-md);
       }
-
-      :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, max(var(--ui-control-size-sm), var(--ui-control-min-block-size)))
-        );
-      }
     }
 
     /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
@@ -195,8 +180,7 @@
 
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
 
-    /* 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. */
+    /* Touch may use body-size text in a small native field to avoid focus zoom; this does not impose a larger visible control height. */
     @media (pointer: coarse) {
     }
 

package/styles/ui-menu.css

@@ -103,7 +103,7 @@
     /* Purpose and measured size shape one shared separation lever. The content plane stays opaque;
        transparency, saturation and edge light belong to the surrounding decorative material. */
     :scope:where([data-component~="ui-menu"]):not([inline]) .surface {
-      --_ui-material-glassiness: clamp(0, var(--ui-glassiness, 0), 1);
+      --_ui-material-glassiness: calc(clamp(0, var(--ui-glassiness, 0), 1) + 2 * pow(clamp(0, var(--ui-glassiness, 0), 1), 4));
       --_ui-material-separation: clamp(0, var(--ui-surface-separation, 0), 1);
       --_ui-material-active: clamp(0, calc((var(--_ui-material-glassiness) + var(--_ui-material-separation)) * 100000), 1);
       --_ui-material-rim: calc((var(--_ui-material-separation) + var(--_ui-material-glassiness) * 0.25) * var(--_ui-material-scale, 0.28) * 8px);