@threadlabs/looma 0.37.0 → 0.37.1

package/docs/customizer.js

@@ -22,8 +22,7 @@ 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.');
@@ -106,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(() => {
@@ -189,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;
@@ -208,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];
@@ -275,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 {
@@ -303,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();
@@ -312,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;
@@ -358,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 () => { root.removeEventListener('toggle', updateSizes, true); 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

@@ -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.'],
@@ -187,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);
 }

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.37.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.7",
+    "markupress": "^0.8.7 || ^0.9.0",
     "@nextwebwg/htmlkit": "1.0.0-alpha.69",
     "vite": "^8.3.4"
   },

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);

package/styles/ui-popover.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. */
     .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.55) * 8px);

package/styles/ui-radio.css

@@ -110,12 +110,6 @@
       padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-radio-size, 1.125rem))) / 2)) !important;
     }
 
-    @media (pointer: coarse) {
-      :scope:where([data-component~="ui-radio"])[data-ui-radio-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-radio"])[hidden] {
       display: none !important;
@@ -130,8 +124,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-select.css

@@ -143,16 +143,10 @@
       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-select"]) {
-        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-      }
-
       :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=sm"] {
-        min-block-size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
-        font-size: inherit;
+        font-size: var(--ui-font-size-md);
       }
     }
 
@@ -169,8 +163,7 @@
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
 
-    /* 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-switch.css

@@ -166,12 +166,6 @@
       padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-switch-track-height, 1.5rem))) / 2)) !important;
     }
 
-    @media (pointer: coarse) {
-      :scope:where([data-component~="ui-switch"])[data-ui-switch-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-switch"])[hidden] {
       display: none !important;
@@ -189,8 +183,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-tooltip.css

@@ -106,7 +106,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. */
     .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.08) * 8px);