@threadlabs/looma 0.39.2 → 0.39.4

package/docs/README.md

@@ -256,7 +256,7 @@ Use the `@threadlabs/looma/docs` entrypoint for programmatic discovery, catalog
 
 ## Saving and recovery
 
-The local editor writes only the configured recipe and CSS inside the project. It rejects symlink paths, generated or dependency directories, cross-origin save requests and stale file revisions. A competing edit leaves your unsaved preview in place; reload and reconcile it before saving again. Examples run in isolated frames and receive theme CSS, never the local editing capability.
+The local editor writes only the configured recipe and CSS inside the project. It rejects symlink paths, generated or dependency directories, cross-origin save requests and stale file revisions. A competing edit leaves your unsaved preview in place; reload and reconcile it before saving again. Examples run in isolated frames and receive theme CSS, never the local editing capability. Each preview's compiled runtime is embedded after its content and authorized by an exact content hash in the generated content policy. This keeps previews interactive in Safari while retaining their opaque origin and parent-page isolation.
 
 The writer stages complete files, serializes saves with a project lock, and rolls back the recipe if replacing the CSS fails. If a process stops during a save or build, close the old editor before removing its `.looma/theme-write.lock` or `.looma/docs-build.lock`; restart and save the loaded recipe to regenerate a consistent pair. Change the server base, output directory or theme-file paths by restarting `dev`.
 

package/docs/catalog.json

@@ -458,7 +458,7 @@
   ],
   "schemaVersion": 1,
   "package": "@threadlabs/looma",
-  "version": "0.39.2",
+  "version": "0.39.4",
   "groups": [
     {
       "id": "layout",
@@ -7430,24 +7430,12 @@
           {
             "name": "--ui-border-width"
           },
-          {
-            "name": "--ui-control-min-block-size"
-          },
-          {
-            "name": "--ui-control-size-sm"
-          },
           {
             "name": "--ui-elevation-dialog",
             "fallbacks": [
               "var(--ui-shadow-xl)"
             ]
           },
-          {
-            "name": "--ui-focus-ring"
-          },
-          {
-            "name": "--ui-focus-width"
-          },
           {
             "name": "--ui-font-semibold"
           },
@@ -7493,9 +7481,6 @@
           {
             "name": "--ui-motion-ease"
           },
-          {
-            "name": "--ui-motion-fast"
-          },
           {
             "name": "--ui-overlay-backdrop"
           },
@@ -7527,9 +7512,6 @@
           {
             "name": "--ui-radius-dialog"
           },
-          {
-            "name": "--ui-radius-round"
-          },
           {
             "name": "--ui-shadow-xl"
           },
@@ -7557,9 +7539,6 @@
               "linear-gradient(transparent, transparent)"
             ]
           },
-          {
-            "name": "--ui-surface-muted"
-          },
           {
             "name": "--ui-surface-separation",
             "fallbacks": [
@@ -7568,9 +7547,6 @@
           },
           {
             "name": "--ui-text-primary"
-          },
-          {
-            "name": "--ui-text-secondary"
           }
         ]
       },

package/docs/customizer.js

@@ -66,11 +66,19 @@ export function connect(host) {
   };
   const header = document.querySelector('[data-component~="markupress-header"]');
   const previews = [...root.querySelectorAll('[data-editor-preview], .palette-preview')];
+  let layoutFrame = 0;
   const updatePreviewLayout = () => {
     const chrome = header?.getBoundingClientRect().height ?? 0;
     root.style.setProperty('--_editor-chrome-height', `${chrome}px`);
     for (const preview of previews) preview.toggleAttribute('data-page-flow', preview.offsetHeight > (view.innerHeight - chrome) / 2);
   };
+  // Layout writes must run outside ResizeObserver delivery, including when a preview appears.
+  const schedulePreviewLayout = () => {
+    if (!layoutFrame) layoutFrame = view.requestAnimationFrame(() => {
+      layoutFrame = 0;
+      updatePreviewLayout();
+    });
+  };
   const replayMotion = () => {
     const element = root.querySelector('[data-motion-object]');
     const duration = parseFloat(convertValueUnit(recipe.values['response-time'], 'ms', unitContext()));
@@ -405,9 +413,9 @@ export function connect(host) {
     filterExamples();
   };
   const motionPreferenceChanged = () => { motionAnimation?.cancel(); paint(); };
-  const previewObserver = new view.ResizeObserver(updatePreviewLayout);
+  const previewObserver = new view.ResizeObserver(schedulePreviewLayout);
   for (const element of [...previews, ...(header ? [header] : [])]) previewObserver.observe(element);
-  view.addEventListener('resize', updatePreviewLayout);
+  view.addEventListener('resize', schedulePreviewLayout);
   motionPreference.addEventListener('change', motionPreferenceChanged);
   root.addEventListener('toggle', updateSizes, true);
   root.addEventListener('looma-example-remove', remove);
@@ -438,5 +446,5 @@ export function connect(host) {
       root.querySelector('[data-action="save"]').hidden = false;
     }).catch(error => { if (alive && error.name !== 'AbortError') say(error.message, true); });
   }
-  return () => { previewObserver.disconnect(); view.removeEventListener('resize', updatePreviewLayout); motionPreference.removeEventListener('change', motionPreferenceChanged); root.removeEventListener('toggle', updateSizes, true); motionAnimation?.cancel(); flush(); 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', choose); 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('popstate', renderView); view.removeEventListener('hashchange', renderView); view.removeEventListener(themeEvent, synchronize); };
+  return () => { previewObserver.disconnect(); if (layoutFrame) view.cancelAnimationFrame(layoutFrame); view.removeEventListener('resize', schedulePreviewLayout); motionPreference.removeEventListener('change', motionPreferenceChanged); root.removeEventListener('toggle', updateSizes, true); motionAnimation?.cancel(); flush(); 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', choose); 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('popstate', renderView); view.removeEventListener('hashchange', renderView); view.removeEventListener(themeEvent, synchronize); };
 }

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';
@@ -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.mjs

@@ -273,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.2",
+  "version": "0.39.4",
   "type": "module",
   "description": "Looma components as HTML, Vue, and plain DOM, with design tokens.",
   "license": "MIT",

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. */
 

package/styles/ui-select.css

@@ -50,13 +50,16 @@
     }
 
     :scope:where([data-component~="ui-select"]) {
+      --_ui-select-size: var(--ui-control-size-md);
+      --_ui-select-inset-block: var(--ui-control-inset-block-md, var(--ui-space-2));
       box-sizing: border-box !important;
       display: inline-block !important;
       inline-size: var(--ui-select-inline-size, 100%);
       min-inline-size: 0;
+      max-block-size: max(var(--_ui-select-size), calc(1em * var(--ui-line-height-tight) + 2 * var(--_ui-select-inset-block) + 2 * var(--ui-border-width)));
       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-select-inset-block) var(--ui-space-3) !important;
       border: var(--ui-border-width) solid var(--ui-select-border, var(--ui-control-border, var(--ui-border-strong)));
       border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-select-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
@@ -129,8 +132,10 @@
     }
 
     :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=sm"] {
+      --_ui-select-size: var(--ui-control-size-sm);
+      --_ui-select-inset-block: var(--ui-control-inset-block-sm, var(--ui-space-1));
       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-select-inset-block) var(--ui-space-2) !important;
       padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1)) !important;
       background-position: right var(--ui-space-2) center, center;
       background-size:
@@ -140,8 +145,10 @@
     }
 
     :scope:where([data-component~="ui-select"])[data-ui-select-state~="size=lg"] {
+      --_ui-select-size: var(--ui-control-size-lg);
+      --_ui-select-inset-block: var(--ui-control-inset-block-lg, var(--ui-space-3));
       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-select-inset-block) var(--ui-space-4) !important;
       padding-inline-end: calc(var(--ui-space-4) + 1.5rem) !important;
       background-position: right var(--ui-space-4) center, center;
       font-size: var(--ui-font-size-md);

package/theme-system.css

@@ -8,11 +8,14 @@
 /* Keep the root font seed unregistered: a registered rem length used by root
    font-size creates a dependency cycle (CSS Properties and Values API 2.7.2). */
 @property --ui-control-size { syntax: "<length>"; inherits: true; initial-value: 40px; }
+@property --_ui-root-font-unit { syntax: "<length>"; inherits: true; initial-value: 16px; }
 @property --ui-radius-md { syntax: "<length>"; inherits: true; initial-value: 8px; }
 @property --ui-border-width { syntax: "<length>"; inherits: true; initial-value: 1px; }
 
 @layer theme {
   :root {
+    /* Resolve once on the root: WebKit can resolve registered rem lengths against the initial font size. */
+    --_ui-root-font-unit: 1em;
     --ui-spacing: 1;
     --ui-rhythm: 1;
     --ui-control-roominess: 2.5;
@@ -35,7 +38,7 @@
   :where(:root, [data-theme], [data-contrast]) {
     /* Controls use a ratio. Spacing uses an independent curve, so increasing the size
        contrast cannot unexpectedly turn linear spacing into quadratic spacing. */
-    --ui-control-size: calc(1rem * var(--ui-control-roominess));
+    --ui-control-size: calc(var(--_ui-root-font-unit) * var(--ui-control-roominess));
     --_ui-theme-ratio: max(1, var(--ui-scale-ratio));
     --_ui-theme-unit: calc(1rem * 0.25 * max(0, var(--ui-spacing)) * clamp(0.75, var(--ui-rhythm), 1.5));
     --ui-line-height-tight: clamp(1.1, calc(1.2 + (var(--ui-rhythm) - 1) * 0.2), 1.3);

package/vanilla/UiDialog.js

@@ -3,7 +3,7 @@ import { attachGeneratedController, buildTemplate, clearRegion, toAttribute, toT
 import * as controller from "../components/ui-dialog/ui-dialog.js";
 import "../styles/ui-dialog.css";
 
-const T0 = ["",[],"\n    ",["header",[],"\n      ",1,"\n      ",["button",["class","close","type","button","aria-label","Close"]],"\n    "],"\n    ",["div",["class","body"],["ui-scroll-area",[],4]],"\n    ",["footer",[],4],"\n  "];
+const T0 = ["",[],"\n    ",["header",[],"\n      ",1,"\n      ",["div",["class","close"],["ui-icon-button",["size","sm","round","","label","Close"],["ui-icon",["name","x"]]]],"\n    "],"\n    ",["div",["class","body"],["ui-scroll-area",[],4]],"\n    ",["footer",[],4],"\n  "];
 const T1 = ["h2",["class","title"],0];
 const T2 = ["",[]];
 const T3 = ["",[]];
@@ -82,7 +82,7 @@ export function createUiDialog(options = {}, html) {
   };
   const t0 = element.firstChild.nextSibling;
   const t1 = t0.firstChild.nextSibling;
-  const t2 = t1.nextSibling.nextSibling.nextSibling;
+  const t2 = t1.nextSibling.nextSibling.nextSibling.firstChild;
   const t3 = t0.nextSibling.nextSibling;
   const t4 = t3.firstChild;
   const t5 = t4.firstChild;