@threadlabs/looma 0.39.1 → 0.39.3

package/docs/site.mjs

@@ -1,6 +1,6 @@
 import { cp, mkdir, readFile, readdir, realpath, rename, rm, symlink, unlink, writeFile } from 'node:fs/promises';
 import path from 'node:path';
-import { randomUUID } from 'node:crypto';
+import { createHash, randomUUID } from 'node:crypto';
 import { createRequire } from 'node:module';
 import { fileURLToPath, pathToFileURL } from 'node:url';
 import { discoverComponents, escapeHtml, mergeCatalogs, readCatalog, readJson } from './catalog.mjs';
@@ -144,7 +144,7 @@ export async function prepareDocumentation({ root, config = {}, catalog }) {
   const customizer = path.join(generated, 'customizer.html');
   await write(customizer, customizerResource({ catalog: combined, config, base }, config.recipe));
   const customizerPage = path.join(content, 'customize.md');
-  await write(customizerPage, `---\ntitle: Customize\nsidebar: false\noutline: false\nprevious: false\nnext: false\n---\n\n# Weave your design system\n\n<link rel="component" href="${relativeHref(customizerPage, customizer)}">\n<looma-customizer></looma-customizer>\n`);
+  await write(customizerPage, `---\ntitle: Customize\nsidebar: false\noutline: false\nprevious: false\nnext: false\n---\n\n# Customize your theme\n\n<link rel="component" href="${relativeHref(customizerPage, customizer)}">\n<looma-customizer></looma-customizer>\n`);
   await write(path.join(generated, 'catalog.json'), JSON.stringify(combined));
   const redirects = {};
   for (const component of combined.components) {
@@ -220,7 +220,7 @@ export async function buildDocumentation({ root = process.cwd(), config = {}, ca
   });
 }
 
-async function isolatePreviewScripts(site, { outDir, writeFile: writeOutput }) {
+async function isolatePreviewScripts(site, { outDir }) {
   const { build } = await tool('vite', site.root);
   // Preview entries and outputs are independent. Keep compiler memory bounded
   // and retain the build lock until every in-flight bundle has settled.
@@ -236,9 +236,13 @@ async function isolatePreviewScripts(site, { outDir, writeFile: writeOutput }) {
           const input = path.join(outDir, url.slice(site.base.length));
           const bundle = await build({ configFile: false, logLevel: 'silent', build: { write: false, minify: true, lib: { entry: input, name: 'LoomaPreview', formats: ['iife'] }, rollupOptions: { output: { codeSplitting: false } } } });
           const code = (Array.isArray(bundle) ? bundle[0] : bundle).output.find(output => output.type === 'chunk').code;
-          const name = `${exampleKey(example.id)}.js`;
-          await writeOutput('_looma/runtime/' + name, code);
-          html = html.replace(tag, `<script src="${site.base}_looma/runtime/${name}" defer></script>`);
+          // A sandbox has an opaque origin: Safari cannot authorize this runtime via 'self'.
+          // Hash the exact inline bytes and run after the preview DOM, preserving isolation.
+          const script = code.replace(/<\/script/gi, '<\\/script');
+          const hash = createHash('sha256').update(script).digest('base64');
+          if (!/<meta\b[^>]*http-equiv="Content-Security-Policy"[^>]*content="[^"]*\bscript-src\b/.test(html)) throw new Error(`Missing script policy for isolated preview ${example.id}.`);
+          html = html.replace(/(<meta\b[^>]*http-equiv="Content-Security-Policy"[^>]*content="[^"]*\bscript-src)\b/, `$1 'sha256-${hash}'`);
+          html = html.replace(tag, '').replace('</body>', () => `<script>${script}</script></body>`);
         }
         html = html.replace(/<link\b[^>]*rel="modulepreload"[^>]*>/g, '');
         await writeFile(htmlFile, html);

package/docs/theme-session.mjs

@@ -7,7 +7,7 @@ export const themeEvent = 'looma-documentation-theme';
 export function createThemeSession(view, { base, baseline, systemCSS, historyLimit = 100 }) {
   const key = `looma:documentation-theme:v1:${base}`;
   let original = validateRecipe(baseline);
-  let selected, draft, comparison;
+  let selected, draft;
   const past = [], future = [];
   let portableCSS = '';
   let storageAvailable = true;
@@ -17,7 +17,7 @@ export function createThemeSession(view, { base, baseline, systemCSS, historyLim
   const read = value => { try { return value ? validateRecipe(JSON.parse(value)) : undefined; } catch { return undefined; } };
   try { selected = read(view.localStorage.getItem(key)); } catch { storageAvailable = false; }
   const paint = () => {
-    const displayed = comparison ?? draft ?? selected;
+    const displayed = draft ?? selected;
     portableCSS = displayed ? themeCSS(displayed, systemCSS) : '';
     view.document.documentElement.toggleAttribute('data-looma-documentation-theme', Boolean(displayed));
     style.textContent = displayed ? themeCSS(displayed, systemCSS, { scope: 'documentation' }) : '';
@@ -42,22 +42,21 @@ export function createThemeSession(view, { base, baseline, systemCSS, historyLim
     preview(recipe) { draft = validateRecipe(recipe); paint(); },
     commit() { if (draft) session.apply(draft); },
     cancel() { draft = undefined; paint(); },
-    compare(recipe) { comparison = recipe === undefined ? undefined : validateRecipe(recipe); paint(); },
-    undo() { if (!past.length) return; future.push(structuredClone(selected)); selected = past.pop(); draft = comparison = undefined; persist(); },
-    redo() { if (!future.length) return; past.push(structuredClone(selected)); selected = future.pop(); draft = comparison = undefined; persist(); },
+    undo() { if (!past.length) return; future.push(structuredClone(selected)); selected = past.pop(); draft = undefined; persist(); },
+    redo() { if (!future.length) return; past.push(structuredClone(selected)); selected = future.pop(); draft = undefined; persist(); },
     apply(recipe) {
       const next = validateRecipe(recipe);
       if (JSON.stringify(next) !== JSON.stringify(selected)) remember();
-      selected = next; draft = comparison = undefined; persist();
+      selected = next; draft = undefined; persist();
     },
-    reset() { if (selected !== undefined) remember(); selected = draft = comparison = undefined; persist(); return structuredClone(original); },
+    reset() { if (selected !== undefined) remember(); selected = draft = undefined; persist(); return structuredClone(original); },
     baseline(recipe) { original = validateRecipe(recipe); },
   };
   view.addEventListener('storage', event => {
     if (event.key !== key && event.key !== null) return;
     const next = read(event.newValue);
     if (event.newValue !== null && !next) return;
-    selected = next; draft = comparison = undefined; past.length = future.length = 0; paint();
+    selected = next; draft = undefined; past.length = future.length = 0; paint();
   });
   view.addEventListener('markupress-header-notice-dismiss', () => session.reset());
   paint();

package/docs/theme.mjs

@@ -49,9 +49,9 @@ const starting = values => ({ schemaVersion: 1, values: { ...defaultRecipe().val
 export const startingPoints = {
   clear: defaultRecipe(),
   bookish: starting({ rhythm: '1.05', 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({ rhythm: '0.8', 'text-weight': '400', 'space-curve': '0.8', 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' }),
+  wiki: starting({ rhythm: '0.95', 'text-weight': '400', 'space-curve': '0.8', action: '#4f46e5', canvas: '#ffffff', surface: '#ffffff', text: '#1a1a1a', 'control-roominess': '2.125', spacing: '0.95', 'scale-contrast': '1.15', 'corner-roundness': '6px', 'outer-depth': '0.35', 'inner-depth': '0', 'response-time': '110ms' }),
   editorial: starting({ rhythm: '1.3', 'text-size': '17px', spacing: '1.12', 'space-curve': '1.4', 'scale-contrast': '1.3', 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({ rhythm: '0.9', 'display-font': 'ui-monospace, monospace', 'text-weight': '600', 'control-roominess': '2.375', spacing: '0.9', 'scale-contrast': '1.25', 'space-curve': '1.2', finish: '0.6', glow: '0.45', glassiness: '0.45', 'surface-separation': '0.25', 'light-x': '0.25', 'light-spread': '0.65', 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)' }),
+  night: starting({ rhythm: '1.05', 'display-font': 'ui-monospace, monospace', 'text-weight': '500', 'control-roominess': '2.375', spacing: '1.05', 'scale-contrast': '1.25', 'space-curve': '1', finish: '0.6', glow: '0.45', glassiness: '0.45', 'surface-separation': '0.25', 'light-x': '0.25', 'light-spread': '0.65', 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({ rhythm: '1.2', 'body-font': 'ui-rounded, system-ui, sans-serif', 'display-font': 'Georgia, serif', 'text-weight': '400', 'space-curve': '1.15', finish: '0.15', 'light-spread': '1', action: '#256342', canvas: '#f4edda', surface: '#fff8e7', 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' };
@@ -95,24 +95,6 @@ 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;
@@ -291,15 +273,21 @@ 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 recipe = validateRecipe(input);
+  const fontURL = googleFontURL(recipe.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 = [];
+  const relativeLengths = new Map(themeFields.filter(field => field.property && field.type.includes('length') && recipe.values[field.id].endsWith('rem')).map(field => [field.property, recipe.values[field.id]]));
   for (const [name, value] of Object.entries(light)) {
     if (name === 'color-scheme') continue;
     if (/^#[\da-f]{6}$/i.test(value)) palette.push(`  ${name}: light-dark(${value}, ${dark[name]});`);
-    else geometry.push(`  ${name}: ${value};`);
+    else {
+      const relative = relativeLengths.get(name);
+      const resolved = relative ? value.replace(relative, `calc(${parseFloat(relative)} * var(--_ui-root-font-unit, 1rem))`) : value;
+      geometry.push(`  ${name}: ${resolved};`);
+    }
   }
   const geometrySelector = scope === 'documentation' ? ':root[data-looma-documentation-theme]' : ':root';
   const chevron = color => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='${color.replace('#', '%23')}' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.39.1",
+  "version": "0.39.3",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

package/styles/ui-button.css

@@ -130,6 +130,7 @@
 
     :scope:where([data-component~="ui-button"]) {
       --_button-square-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
+      box-sizing: border-box !important;
       appearance: none;
       min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
       border-style: solid;
@@ -176,6 +177,21 @@
       padding-block: var(--ui-space-0-5) !important;
     }
 
+    /* Trim the text line itself: an anonymous flex item retains font-metric space in some fonts. */
+    .label {
+      display: block !important;
+      align-content: center !important;
+      min-inline-size: 0 !important;
+      min-block-size: 1lh !important;
+    }
+
+    .label:has(svg) {
+      display: inline-flex !important;
+      align-items: center !important;
+      gap: var(--ui-space-2) !important;
+      text-box-trim: none;
+    }
+
     .badge {
       display: inline-flex !important;
       align-items: center !important;
@@ -187,7 +203,7 @@
     }
 
     @supports (text-box-trim: trim-both) {
-      :scope:where([data-component~="ui-button"]) {
+      .label:not(:has(svg)) {
         text-box-trim: trim-both;
         text-box-edge: cap alphabetic;
       }
@@ -515,6 +531,11 @@
       transition: color var(--ui-motion-fast) var(--ui-motion-ease), text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    :scope:where([data-component~="ui-button"])[data-appearance="link"] .label {
+      display: inline !important;
+      text-box-trim: none;
+    }
+
     :scope:where([data-component~="ui-button"])[data-appearance="link"]:hover:not(:disabled, [aria-disabled="true"]) {
       color: var(--ui-button-link-hover-text, var(--ui-text-primary));
       text-decoration-color: currentColor;
@@ -552,6 +573,8 @@
     /* A count is an adornment, not another line of label text. Keep the standard control height
        with enough inset for a 24px mark; large content can still grow the button naturally. */
 
+    /* Trim the text line itself: an anonymous flex item retains font-metric space in some fonts. */
+
     @supports (text-box-trim: trim-both) {
     }
 

package/styles/ui-checkbox.css

@@ -103,7 +103,8 @@
 
     input:where(:not([data-component], [data-slotted]))::after {
       content: "";
-      position: absolute;
+      position: absolute !important;
+      transform: none !important;
       opacity: 0;
       transition: opacity var(--ui-motion-fast) var(--ui-motion-ease);
     }
@@ -116,43 +117,44 @@
       box-shadow: var(--ui-control-inset);
     }
 
-    /* Centre the tick's box and lift it slightly for the rotated check shape. */
+    /* The SVG's painted bounds are centred in its viewBox, including its round stroke.
+       Centre that box directly; rotated border boxes do not centre the visible check. */
     input:checked:where(:not([data-component], [data-slotted]))::after {
-      inset: 0;
-      margin: auto !important;
-      inline-size: calc(var(--_ui-checkbox-size) * 0.28 / 1.125);
-      block-size: calc(var(--_ui-checkbox-size) * 0.5 / 1.125);
-      /* Longhands, not `border: solid var(...)`: lowering drops a shorthand that omits a
-         component, which left the tick with no style and no colour. */
-      border-style: solid;
-      border-color: var(--ui-text-on-accent);
-      border-width: 0 calc(var(--_ui-checkbox-size) * 0.125 / 1.125) calc(var(--_ui-checkbox-size) * 0.125 / 1.125) 0;
+      inset: 50% auto auto 50% !important;
+      inline-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+      block-size: calc(var(--_ui-checkbox-size) * 0.7) !important;
+      background: var(--ui-text-on-accent);
+      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 11.5 5 5 9-9'/%3E%3C/svg%3E")
+        center / contain no-repeat;
       opacity: 1;
-      transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg);
+      translate: -50% -50% !important;
       animation: ui-checkbox-check var(--ui-motion-base) var(--ui-motion-ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both;
     }
 
     input:indeterminate:where(:not([data-component], [data-slotted]))::after {
-      inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto;
-      block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125);
+      mask: none;
+      animation: none;
+      inset: 50% calc(var(--_ui-checkbox-size) * 0.23 / 1.125) auto !important;
+      inline-size: auto !important;
+      block-size: calc(var(--_ui-checkbox-size) * 0.125 / 1.125) !important;
       border-radius: var(--ui-radius-round);
       background: var(--ui-text-on-accent);
       opacity: 1;
-      transform: translateY(-50%);
+      translate: 0 -50% !important;
     }
 
     @keyframes ui-checkbox-check {
       from {
         opacity: 0;
-        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(0.55);
+        scale: 0.55;
       }
       65% {
         opacity: 1;
-        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1.12);
+        scale: 1.12;
       }
       to {
         opacity: 1;
-        transform: translateY(calc(var(--_ui-checkbox-size) * -0.09 / 1.125)) rotate(45deg) scale(1);
+        scale: 1;
       }
     }
 
@@ -163,6 +165,20 @@
       }
     }
 
+    @media (forced-colors: active) {
+      input:checked,
+      input:indeterminate {
+        forced-color-adjust: none;
+        background: Highlight;
+        border-color: Highlight;
+      }
+      input:checked:where(:not([data-component], [data-slotted]))::after, 
+      input:indeterminate:where(:not([data-component], [data-slotted]))::after {
+        forced-color-adjust: none;
+        background: HighlightText;
+      }
+    }
+
     input:hover:enabled {
       border-color: var(--ui-accent-solid);
     }
@@ -220,11 +236,15 @@
 
     /* The label, and under it an optional line saying what the choice means. */
 
-    /* Centre the tick's box and lift it slightly for the rotated check shape. */
+    /* The SVG's painted bounds are centred in its viewBox, including its round stroke.
+       Centre that box directly; rotated border boxes do not centre the visible check. */
 
     @media (prefers-reduced-motion: reduce) {
     }
 
+    @media (forced-colors: active) {
+    }
+
     /* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
        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. */

package/styles/ui-combobox.css

@@ -198,10 +198,12 @@
       color: inherit;
     }
     input {
+      --_ui-combobox-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
       appearance: none;
       width: 100%;
       min-inline-size: 0;
       min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+      max-block-size: max(calc(var(--_row) - 2 * var(--ui-border-width)), calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-combobox-inset-block)));
       box-sizing: border-box !important;
       border: 0;
       border-radius: inherit;
@@ -209,7 +211,7 @@
       color: inherit;
       font: inherit;
       line-height: var(--ui-line-height-tight);
-      padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+      padding: var(--_ui-combobox-inset-block) var(--ui-space-3) !important;
       margin: 0 !important;
       outline: none;
     }
@@ -217,14 +219,16 @@
       --_row: var(--ui-control-size-sm);
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input {
-      padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+      --_ui-combobox-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
+      padding: var(--_ui-combobox-inset-block) var(--ui-space-2) !important;
       font-size: var(--ui-font-size-sm);
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] {
       --_row: var(--ui-control-size-lg);
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] input {
-      padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+      --_ui-combobox-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
+      padding: var(--_ui-combobox-inset-block) var(--ui-space-4) !important;
       font-size: var(--ui-font-size-md);
     }
     button {
@@ -359,6 +363,7 @@
       display: none !important;
     }
     :scope:where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] input {
+      max-block-size: none;
       flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;
@@ -617,10 +622,12 @@
       color: inherit;
     }
     input:where(:scope, :scope *) {
+      --_ui-combobox-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
       appearance: none;
       width: 100%;
       min-inline-size: 0;
       min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
+      max-block-size: max(calc(var(--_row) - 2 * var(--ui-border-width)), calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-combobox-inset-block)));
       box-sizing: border-box !important;
       border: 0;
       border-radius: inherit;
@@ -628,7 +635,7 @@
       color: inherit;
       font: inherit;
       line-height: var(--ui-line-height-tight);
-      padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+      padding: var(--_ui-combobox-inset-block) var(--ui-space-3) !important;
       margin: 0 !important;
       outline: none;
     }
@@ -636,14 +643,16 @@
       --_row: var(--ui-control-size-sm);
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=sm"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
-      padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+      --_ui-combobox-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
+      padding: var(--_ui-combobox-inset-block) var(--ui-space-2) !important;
       font-size: var(--ui-font-size-sm);
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"]:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
       --_row: var(--ui-control-size-lg);
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="size=lg"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
-      padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+      --_ui-combobox-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
+      padding: var(--_ui-combobox-inset-block) var(--ui-space-4) !important;
       font-size: var(--ui-font-size-md);
     }
     button:where(:scope, :scope *) {
@@ -776,6 +785,7 @@
       display: none !important;
     }
     :where([data-component~="ui-combobox"])[data-ui-combobox-state~="multiple"] input:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-combobox"]))) {
+      max-block-size: none;
       flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;

package/styles/ui-dialog.css

@@ -193,58 +193,10 @@
     }
 
     .close {
-      display: inline-grid !important;
-      place-items: center;
-      flex: none;
+      display: flex !important;
+      align-items: center !important;
+      flex: none !important;
       margin-inline-start: auto !important;
-      inline-size: var(--ui-control-size-sm);
-      block-size: var(--ui-control-size-sm);
-      padding: 0 !important;
-      border: 0;
-      border-radius: var(--ui-radius-round);
-      background: transparent;
-      color: var(--ui-text-secondary);
-      cursor: pointer;
-      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
-    }
-
-    /* A CSS-drawn X. */
-    .close:where(:not([data-component], [data-slotted]))::before, 
-    .close:where(:not([data-component], [data-slotted]))::after {
-      content: "";
-      grid-area: 1 / 1;
-      inline-size: 0.875rem;
-      block-size: 1.5px;
-      border-radius: 1px;
-      background: currentColor;
-      transform: rotate(45deg);
-    }
-
-    .close:where(:not([data-component], [data-slotted]))::after {
-      transform: rotate(-45deg);
-    }
-
-    .close:hover {
-      background: var(--ui-surface-muted);
-      color: var(--ui-text-primary);
-    }
-
-    .close:focus-visible {
-      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-      outline-offset: var(--ui-focus-width);
-    }
-
-    /* A touch target, like Button on coarse pointers. */
-    @media (pointer: coarse) {
-      .close {
-        inline-size: var(--ui-control-min-block-size);
-        block-size: var(--ui-control-min-block-size);
-      }
-    }
-
-    html[data-ui-input-modality="touch"] :scope:where([data-component~="ui-dialog"]) .close {
-      inline-size: var(--ui-control-min-block-size);
-      block-size: var(--ui-control-min-block-size);
     }
 
     .body {
@@ -320,12 +272,6 @@
     /* Alerts have no close target to add height above the title. */
 
     /* :host-qualified so page heading rules that reach in cannot outrank the dialog chrome. */
-
-    /* A CSS-drawn X. */
-
-    /* A touch target, like Button on coarse pointers. */
-    @media (pointer: coarse) {
-    }
 }
 @scope ([data-slotted~="ui-dialog"]:not([data-component])) to ([data-component], [data-slotted]) {
 /* This component's hooks style the element they are set on, and never a nested one. */
@@ -514,57 +460,10 @@
     }
 
     .close:where(:scope, :scope *) {
-      display: inline-grid !important;
-      place-items: center;
-      flex: none;
+      display: flex !important;
+      align-items: center !important;
+      flex: none !important;
       margin-inline-start: auto !important;
-      inline-size: var(--ui-control-size-sm);
-      block-size: var(--ui-control-size-sm);
-      padding: 0 !important;
-      border: 0;
-      border-radius: var(--ui-radius-round);
-      background: transparent;
-      color: var(--ui-text-secondary);
-      cursor: pointer;
-      transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), color var(--ui-motion-fast) var(--ui-motion-ease);
-    }
-
-    /* A CSS-drawn X. */
-    .close:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope *)::before, .close:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope *)::after {
-      content: "";
-      grid-area: 1 / 1;
-      inline-size: 0.875rem;
-      block-size: 1.5px;
-      border-radius: 1px;
-      background: currentColor;
-      transform: rotate(45deg);
-    }
-
-    .close:where(:not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))):where(:scope, :scope *)::after {
-      transform: rotate(-45deg);
-    }
-
-    .close:hover:where(:scope, :scope *) {
-      background: var(--ui-surface-muted);
-      color: var(--ui-text-primary);
-    }
-
-    .close:focus-visible:where(:scope, :scope *) {
-      outline: var(--ui-focus-width) solid var(--ui-focus-ring);
-      outline-offset: var(--ui-focus-width);
-    }
-
-    /* A touch target, like Button on coarse pointers. */
-    @media (pointer: coarse) {
-      .close:where(:scope, :scope *) {
-        inline-size: var(--ui-control-min-block-size);
-        block-size: var(--ui-control-min-block-size);
-      }
-    }
-
-    html[data-ui-input-modality="touch"] :where([data-component~="ui-dialog"]) .close:where(:scope, :not([data-component], [data-slotted]:not([data-slotted~="ui-dialog"]))) {
-      inline-size: var(--ui-control-min-block-size);
-      block-size: var(--ui-control-min-block-size);
     }
 
     .body:where(:scope, :scope *) {

package/styles/ui-input-group.css

@@ -32,6 +32,7 @@
          Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
       --_ui-default-input-border-width: 0;
       --_ui-default-input-min-block-size: 0;
+      --_ui-default-input-frame-width: calc(2 * var(--ui-border-width));
       --_ui-default-input-border: transparent;
       --_ui-default-input-border-hover: transparent;
       --_ui-default-input-focus-border: transparent;

package/styles/ui-input.css

@@ -61,15 +61,24 @@
       syntax: "*";
       inherits: false;
     }
+    /* Normalize a unitless zero border to a length before the box calculation. */
+    @property --_ui-input-stroke {
+      syntax: "<length>";
+      inherits: false;
+      initial-value: 1px;
+    }
 
     :scope:where([data-component~="ui-input"]) {
+      --_ui-input-size: var(--ui-control-size-md);
+      --_ui-input-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
+      --_ui-input-stroke: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width)));
       box-sizing: border-box !important;
       display: inline-block !important;
       inline-size: var(--ui-input-inline-size, 100%);
       min-inline-size: 0;
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-md)));
       margin: 0 !important;
-      padding: var(--ui-control-inset-block-md, var(--ui-space-2)) var(--ui-space-3) !important;
+      padding: var(--_ui-input-inset-block) var(--ui-space-3) !important;
       appearance: none;
       padding-inline-start: var(--_ui-default-input-padding-inline-start, var(--ui-space-3)) !important;
       border: var(--ui-input-border-width, var(--_ui-default-input-border-width, var(--ui-border-width))) solid
@@ -87,16 +96,25 @@
         background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
+    /* Cap Safari's excess text metrics without changing native date, file, color or range widgets. */
+    :scope:where([data-component~="ui-input"]):is([type="text"], [type="search"], [type="tel"], [type="url"], [type="email"], [type="password"], [type="number"]) {
+      max-block-size: max(calc(var(--_ui-input-size) - var(--_ui-default-input-frame-width, 0px)), calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-input-inset-block) + 2 * var(--_ui-input-stroke)));
+    }
+
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
     :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=sm"] {
+      --_ui-input-size: var(--ui-control-size-sm);
+      --_ui-input-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-sm)));
-      padding: var(--ui-control-inset-block-sm, var(--ui-space-1)) var(--ui-space-2) !important;
+      padding: var(--_ui-input-inset-block) var(--ui-space-2) !important;
       font-size: var(--ui-font-size-sm);
     }
 
     :scope:where([data-component~="ui-input"])[data-ui-input-state~="size=lg"] {
+      --_ui-input-size: var(--ui-control-size-lg);
+      --_ui-input-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
       min-block-size: var(--ui-input-min-block-size, var(--_ui-default-input-min-block-size, var(--ui-control-size-lg)));
-      padding: var(--ui-control-inset-block-lg, var(--ui-space-3)) var(--ui-space-4) !important;
+      padding: var(--_ui-input-inset-block) var(--ui-space-4) !important;
       font-size: var(--ui-font-size-md);
     }
 
@@ -177,6 +195,9 @@
 @scope ([data-component~="ui-input"]) to ([data-component]) {
 /* This component's hooks style the element they are set on, and never a nested one. An Input
        Group sets --_ui-default-input-* for the input inside it, below the input's own hooks. */
+    /* Normalize a unitless zero border to a length before the box calculation. */
+
+    /* Cap Safari's excess text metrics without changing native date, file, color or range widgets. */
 
     /* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */