@threadlabs/looma 0.37.0 → 0.37.2

package/components/shared/icons.js

@@ -46,6 +46,8 @@ export const icons = {
   "merge": [["path",{"d":"m8 6 4-4 4 4"}],["path",{"d":"M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22"}],["path",{"d":"m20 22-5-5"}]],
   "message-square-warning": [["path",{"d":"M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"}],["path",{"d":"M12 15h.01"}],["path",{"d":"M12 7v4"}]],
   "minus": [["path",{"d":"M5 12h14"}]],
+  "monitor": [["rect",{"width":"20","height":"14","x":"2","y":"3","rx":"2"}],["line",{"x1":"8","x2":"16","y1":"21","y2":"21"}],["line",{"x1":"12","x2":"12","y1":"17","y2":"21"}]],
+  "moon": [["path",{"d":"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"}]],
   "notebook-pen": [["path",{"d":"M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4"}],["path",{"d":"M2 6h4"}],["path",{"d":"M2 10h4"}],["path",{"d":"M2 14h4"}],["path",{"d":"M2 18h4"}],["path",{"d":"M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z"}]],
   "paint-bucket": [["path",{"d":"m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z"}],["path",{"d":"m5 2 5 5"}],["path",{"d":"M2 13h15"}],["path",{"d":"M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z"}]],
   "panel-bottom": [["rect",{"width":"18","height":"18","x":"3","y":"3","rx":"2"}],["path",{"d":"M3 15h18"}]],
@@ -64,6 +66,7 @@ export const icons = {
   "settings": [["path",{"d":"M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"}],["circle",{"cx":"12","cy":"12","r":"3"}]],
   "split": [["path",{"d":"M16 3h5v5"}],["path",{"d":"M8 3H3v5"}],["path",{"d":"M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3"}],["path",{"d":"m15 9 6-6"}]],
   "strikethrough": [["path",{"d":"M16 4H9a3 3 0 0 0-2.83 4"}],["path",{"d":"M14 12a4 4 0 0 1 0 8H6"}],["line",{"x1":"4","x2":"20","y1":"12","y2":"12"}]],
+  "sun": [["circle",{"cx":"12","cy":"12","r":"4"}],["path",{"d":"M12 2v2"}],["path",{"d":"M12 20v2"}],["path",{"d":"m4.93 4.93 1.41 1.41"}],["path",{"d":"m17.66 17.66 1.41 1.41"}],["path",{"d":"M2 12h2"}],["path",{"d":"M20 12h2"}],["path",{"d":"m6.34 17.66-1.41 1.41"}],["path",{"d":"m19.07 4.93-1.41 1.41"}]],
   "superscript": [["path",{"d":"m4 19 8-8"}],["path",{"d":"m12 19-8-8"}],["path",{"d":"M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06"}]],
   "table": [["path",{"d":"M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18"}]],
   "tag": [["path",{"d":"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"}],["circle",{"cx":"7.5","cy":"7.5","r":".5","fill":"currentColor"}]],

package/components/ui-button/ui-button.html

@@ -17,8 +17,8 @@
       quiet outline, neutral text and slightly raised surface, independently of action tone.</prop>
     <prop name="size" type="keyword" values="xs, sm, md, lg" default="md"
     >Height, padding, and type size. xs is 1.5rem with the smallest text, for a control inside a line of small text; sm is the small control height (2rem by
-      default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Under touch, sm
-      grows to the touch minimum, while xs keeps its size inside its line and gains an invisible touch-sized hit area.</prop>
+      default) with tighter padding and smaller text, md is the standard control height (2.5rem), and lg is taller (3rem) with roomier padding. Visible sizes
+      stay the same on touch. Inline xs and link actions can gain an adjustable invisible hit area.</prop>
     <prop name="shape" type="keyword" values="rounded, pill" default="rounded"
     >rounded uses the theme's action radius; pill rounds the ends fully, for a compact choice such as a status or a person.</prop>
     <prop name="tone" type="keyword" values="accent, neutral, danger, success, warning, info" default="accent"
@@ -555,18 +555,9 @@
     }
 
     /* The size states outrank :host, so sm is named too, or a small button would stay small. */
-    @media (pointer: coarse) {
-      :host {
-        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-      }
-      :host([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"] :host[data-appearance="link"],

package/components/ui-card/ui-card.html

@@ -6,13 +6,13 @@
     >The surface. outlined is a bordered panel on the page; subtle is a quiet filled one with no border, for supporting details set apart from the flow;
       elevated adds a subtle lift above the page, for a view's one card, such as sign-in. Treatment independently controls decorative material.</prop>
     <prop name="treatment" type="keyword" values="standard, expressive" default="standard"
-    >How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material treatment.
-      This does not add elevation or require glass.</prop>
+    >How much of the theme's decorative material the surface expresses. standard preserves its restrained treatment; expressive uses the full material
+      treatment. This does not add elevation or require glass.</prop>
     <prop name="padding" type="keyword" values="xs, sm, md, lg" default="md"
     >The space inside the card: xs is compact (0.5rem), sm is snug (0.75rem), md is the default (1.5rem), and lg is roomy (2rem).</prop>
     <prop name="tone" type="keyword" values="neutral, accent, info, success, warning, danger" default="neutral"
-    >accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the
-      surface hue; action controls retain their own intent.</prop>
+    >accent, info, success, warning and danger add a quiet semantic surface without changing card geometry. Row highlights follow the surface hue; action
+      controls retain their own intent.</prop>
     <prop name="as" type="keyword" values="div, section, article, aside" default="div"
     >The native element the card renders. Choose the one that names the content: a section of a page, a self-contained article, or an aside.</prop>
   </defs>
@@ -68,7 +68,7 @@
     }
 
     :host([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/components/ui-checkbox/ui-checkbox.html

@@ -19,7 +19,7 @@
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Aligns the checkbox with fields and buttons of the same size. It keeps its box size; the label takes that size's field type size and its first line centres
       in that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text
-      baseline. Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.</prop>
+      baseline. Touch input keeps the same visible alignment. md is the standard layout.</prop>
     <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
@@ -249,12 +249,6 @@
       padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-checkbox-size, 1.125rem))) / 2)) !important;
     }
 
-    @media (pointer: coarse) {
-      :host([size="sm"]) {
-        --_row: var(--ui-control-min-block-size);
-      }
-    }
-
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none !important;

package/components/ui-color-picker/ui-color-picker.html

@@ -122,14 +122,5 @@
       padding: 0 !important;
       accent-color: var(--ui-accent-solid);
     }
-    @media (pointer: coarse) {
-      :host {
-        --_size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-      }
-      :host([size="sm"]) {
-        --_size: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
-        --_font: var(--ui-font-size-md);
-      }
-    }
   </style>
 </template>

package/components/ui-combobox/ui-combobox.html

@@ -85,7 +85,7 @@
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Field height, padding, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by
       default) with smaller text, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller with roomier padding.
-      Under a coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. The label keeps its size.</prop>
+      Touch input keeps body-size field text without inflating the visible size ladder. The label keeps its size.</prop>
     <prop name="labelVisibility" type="keyword" values="visible, sr-only" default="visible"
     >visible shows the label above the field; sr-only hides it visually but keeps it as the input's accessible name. Use sr-only only when the surrounding
       layout already makes the field's purpose clear.</prop>
@@ -872,20 +872,8 @@
       white-space: nowrap;
     }
     @media (pointer: coarse) {
-      :host {
-        --_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. */
-      :host([size="sm"]) {
-        --_row: max(var(--ui-control-size-sm), var(--ui-control-min-block-size));
-      }
       :host([size="sm"]) input {
-        font-size: inherit;
+        font-size: var(--ui-font-size-md);
       }
     }
     @media (forced-colors: active) {

package/components/ui-cycle-button/ui-cycle-button.html

@@ -0,0 +1,41 @@
+<link rel="component" href="../ui-icon-button/ui-icon-button.html">
+<link rel="component" href="../ui-icon/ui-icon.html">
+<template component="ui-cycle-button" module="./ui-cycle-button.js">
+  <defs>
+    <prop name="items" type="list(object({ value: string, label: string, icon: string }))" required
+    >Ordered states with a value, readable label and Looma icon name. Activation advances to the next state and wraps.</prop>
+    <prop name="index" type="number" default="0">Initial or externally selected zero-based state. The first state is the default.</prop>
+    <prop name="label" type="string" default="State">What the button changes, such as Appearance. The selected state is included in its accessible name.</prop>
+    <prop name="size" type="keyword" values="sm, md, lg" default="md">Uses IconButton's compact visible sizes and adjustable invisible touch area.</prop>
+    <prop name="variant" type="keyword" values="ghost, outline, solid" default="outline">Uses IconButton's standard emphasis.</prop>
+    <prop name="disabled" type="boolean" default="false">Prevents cycling while keeping the selected state visible.</prop>
+    <state name="current" type="number" from="$index"></state>
+    <computed name="selected" from="default($items[default($current, 0)], $items[0])"></computed>
+    <event name="change" type="object"><prop name="value" type="string" required></prop><prop name="index" type="number" required></prop></event>
+  </defs>
+  <span><ui-icon-button
+      from:label="concat($label, ': ', default($selected.label, 'No choices'))"
+      from:title="concat($label, ': ', default($selected.label, 'No choices'))"
+      from:size="$size"
+      from:variant="$variant"
+      from:disabled="$disabled or $items.length &lt; 2"
+      tone="neutral"
+      aria-description="Activate to choose the next state."
+    >
+      <ui-icon from:name="default($selected.icon, '')"></ui-icon>
+    </ui-icon-button></span>
+  <style>
+    :host {
+      display: inline-flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      gap: 0 !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      vertical-align: middle;
+    }
+    :host[hidden] {
+      display: none !important;
+    }
+  </style>
+</template>

package/components/ui-cycle-button/ui-cycle-button.js

@@ -0,0 +1,19 @@
+/** Cycle an ordered choice without replacing its native button or moving focus. */
+export function connect(host) {
+  let external;
+  const stop = host.effect(() => {
+    const signature = JSON.stringify([host.props.items.value, host.props.index.value]);
+    if (signature === external) return;
+    external = signature;
+    const index = Math.trunc(Number(host.props.index.value));
+    host.state.current = Number.isFinite(index) && index >= 0 && index < host.props.items.value.length ? index : 0;
+  });
+  const cycle = () => {
+    const items = host.props.items.value;
+    if (host.props.disabled.value || items.length < 2) return;
+    host.state.current = (host.state.current + 1) % items.length;
+    host.dispatch('change', { value: items[host.state.current].value, index: host.state.current });
+  };
+  host.element.addEventListener('click', cycle);
+  return () => { stop(); host.element.removeEventListener('click', cycle); };
+}

package/components/ui-dialog/ui-dialog.html

@@ -112,7 +112,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. */
     :host {
-      --_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/components/ui-icon/ui-icon.html

@@ -55,6 +55,8 @@
         'merge': [{ tag: 'path', d: 'm8 6 4-4 4 4' }, { tag: 'path', d: 'M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22' }, { tag: 'path', d: 'm20 22-5-5' }],
         'message-square-warning': [{ tag: 'path', d: 'M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z' }, { tag: 'path', d: 'M12 15h.01' }, { tag: 'path', d: 'M12 7v4' }],
         'minus': [{ tag: 'path', d: 'M5 12h14' }],
+        'monitor': [{ tag: 'rect', width: '20', height: '14', x: '2', y: '3', rx: '2' }, { tag: 'line', x1: '8', x2: '16', y1: '21', y2: '21' }, { tag: 'line', x1: '12', x2: '12', y1: '17', y2: '21' }],
+        'moon': [{ tag: 'path', d: 'M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401' }],
         'notebook-pen': [{ tag: 'path', d: 'M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4' }, { tag: 'path', d: 'M2 6h4' }, { tag: 'path', d: 'M2 10h4' }, { tag: 'path', d: 'M2 14h4' }, { tag: 'path', d: 'M2 18h4' }, { tag: 'path', d: 'M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z' }],
         'paint-bucket': [{ tag: 'path', d: 'm19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z' }, { tag: 'path', d: 'm5 2 5 5' }, { tag: 'path', d: 'M2 13h15' }, { tag: 'path', d: 'M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z' }],
         'panel-bottom': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, { tag: 'path', d: 'M3 15h18' }],
@@ -73,6 +75,7 @@
         'settings': [{ tag: 'path', d: 'M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915' }, { tag: 'circle', cx: '12', cy: '12', r: '3' }],
         'split': [{ tag: 'path', d: 'M16 3h5v5' }, { tag: 'path', d: 'M8 3H3v5' }, { tag: 'path', d: 'M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3' }, { tag: 'path', d: 'm15 9 6-6' }],
         'strikethrough': [{ tag: 'path', d: 'M16 4H9a3 3 0 0 0-2.83 4' }, { tag: 'path', d: 'M14 12a4 4 0 0 1 0 8H6' }, { tag: 'line', x1: '4', x2: '20', y1: '12', y2: '12' }],
+        'sun': [{ tag: 'circle', cx: '12', cy: '12', r: '4' }, { tag: 'path', d: 'M12 2v2' }, { tag: 'path', d: 'M12 20v2' }, { tag: 'path', d: 'm4.93 4.93 1.41 1.41' }, { tag: 'path', d: 'm17.66 17.66 1.41 1.41' }, { tag: 'path', d: 'M2 12h2' }, { tag: 'path', d: 'M20 12h2' }, { tag: 'path', d: 'm6.34 17.66-1.41 1.41' }, { tag: 'path', d: 'm19.07 4.93-1.41 1.41' }],
         'superscript': [{ tag: 'path', d: 'm4 19 8-8' }, { tag: 'path', d: 'm12 19-8-8' }, { tag: 'path', d: 'M20 12h-4c0-1.5.442-2 1.5-2.5S20 8.334 20 7.002c0-.472-.17-.93-.484-1.29a2.105 2.105 0 0 0-2.617-.436c-.42.239-.738.614-.899 1.06' }],
         'table': [{ tag: 'path', d: 'M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18' }],
         'tag': [{ tag: 'path', d: 'M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z' }, { tag: 'circle', cx: '7.5', cy: '7.5', r: '.5', fill: 'currentColor' }],

package/components/ui-icon-button/ui-icon-button.html

@@ -15,11 +15,11 @@
     <prop name="pending" type="boolean" default="false">Deprecated alias for loading.</prop>
     <prop name="label" type="string">Accessible name for the icon.</prop>
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
-    >Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. On touch, every size gets an invisible hit
-      area of at least 44px.</prop>
+    >Button and icon size together: sm is 1.75rem with a small icon, md is 2rem, and lg is 2.5rem with a large icon. Touch can use an invisible hit area sized
+      by the adjustable control target preference.</prop>
     <prop name="matchButton" type="boolean" default="false"
-    >Matches a boxed Button of the same size when the two share a flex row. Uses the control-size theme tokens and stretches to the row's height, including
-      touch-sized controls. Leave it off for compact toolbar and inline icon buttons.</prop>
+    >Matches a boxed Button of the same size when the two share a flex row. Uses the control-size theme tokens and stretches to the row's height, on mouse and
+      touch alike. Leave it off for compact toolbar and inline icon buttons.</prop>
     <prop name="variant" type="keyword" values="ghost, outline, solid" default="ghost"
     >Emphasis. ghost shows only the icon until it is hovered, for toolbars and dense rows; outline adds a border on the default surface; solid fills with the
       accent colour, for the one primary action in a group.</prop>
@@ -376,14 +376,6 @@
       --_size: var(--ui-control-size-lg);
     }
 
-    @media (pointer: coarse) {
-      :host([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));
-      }
-    }
-
     :host([round]) {
       border-radius: var(--ui-radius-round);
     }
@@ -393,14 +385,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);
     }
 
     :host[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);
     }
 
     :host:hover:enabled:not([aria-disabled="true"]) {

package/components/ui-input/ui-input.html

@@ -34,9 +34,9 @@
     <prop name="required" type="boolean" default="false">Marks the control as required for form validation.</prop>
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Height, padding, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by default)
-      with smaller text, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller with roomier padding. Under a
-      coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. Change it after render through this option; the element's size property is
-      the native one.</prop>
+      with smaller text, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller with roomier padding. Touch input
+      keeps body-size field text without inflating the visible size ladder. Change it after render through this option; the element's size property is the
+      native one.</prop>
   </defs>
   <input from:type="$type" from:value="$value" from:disabled="$disabled" from:readonly="$readonly" from:required="$required" from:aria-invalid="$invalid">
   <style>
@@ -133,28 +133,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) {
-      :host {
-        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)))
-        );
-      }
-
       :host,
       :host([size="sm"]),
       :host([size="lg"]) {
         font-size: var(--ui-font-size-md);
       }
-
-      :host([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. */

package/components/ui-input-group/ui-input-group.html

@@ -100,16 +100,6 @@
       min-block-size: var(--ui-control-size-lg);
     }
 
-    @media (pointer: coarse) {
-      :host {
-        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-      }
-
-      :host:has(.field [data-ui-input-state~="size=sm"]) {
-        min-block-size: var(--ui-control-min-block-size);
-      }
-    }
-
     :host:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :user-invalid)) {
       border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }

package/components/ui-menu/ui-menu.html

@@ -129,7 +129,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. */
     :host: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/components/ui-popover/ui-popover.html

@@ -100,7 +100,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/components/ui-radio/ui-radio.html

@@ -15,7 +15,7 @@
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Aligns the radio with fields and buttons of the same size. It keeps its box size; the label takes that size's field type size and its first line centres in
       that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text baseline.
-      Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.</prop>
+      Touch input keeps the same visible alignment. md is the standard layout.</prop>
     <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
@@ -134,12 +134,6 @@
       padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-radio-size, 1.125rem))) / 2)) !important;
     }
 
-    @media (pointer: coarse) {
-      :host([size="sm"]) {
-        --_row: var(--ui-control-min-block-size);
-      }
-    }
-
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none !important;

package/components/ui-select/ui-select.html

@@ -9,8 +9,8 @@
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Height, padding, chevron, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by
       default) with smaller text and a smaller chevron, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller
-      with roomier padding. Under a coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. It is not the native size attribute: a select
-      is always a single-choice dropdown. Change it after render through this option; the element's size property is the native one.</prop>
+      with roomier padding. Touch input keeps body-size field text without inflating the visible size ladder. It is not the native size attribute: a select is
+      always a single-choice dropdown. Change it after render through this option; the element's size property is the native one.</prop>
   </defs>
   <select from:disabled="$disabled" from:required="$required" from:aria-invalid="$invalid"><slot></slot></select>
   <style>
@@ -150,16 +150,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) {
-      :host {
-        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
-      }
-
       :host([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);
       }
     }
 

package/components/ui-switch/ui-switch.html

@@ -12,7 +12,7 @@
     <prop name="size" type="keyword" values="sm, md, lg" default="md"
     >Aligns the switch with fields and buttons of the same size. It keeps its track size; the label takes that size's field type size and its first line centres
       in that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text
-      baseline. Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.</prop>
+      baseline. Touch input keeps the same visible alignment. md is the standard layout.</prop>
     <state type="boolean" name="internalChecked" value="false"></state>
     <event name="change" type="object">
       <prop name="checked" required type="boolean"></prop>
@@ -196,12 +196,6 @@
       padding-block: max(0px, calc((var(--_row) - max(var(--_line), var(--_ui-switch-track-height, 1.5rem))) / 2)) !important;
     }
 
-    @media (pointer: coarse) {
-      :host([size="sm"]) {
-        --_row: var(--ui-control-min-block-size);
-      }
-    }
-
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none !important;

package/components/ui-tooltip/ui-tooltip.html

@@ -137,7 +137,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);