@threadlabs/looma 0.27.2 → 0.27.3

package/package.json

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

package/styles/ui-button.css

@@ -323,6 +323,33 @@
       --_on-hue: var(--ui-surface);
     }
 
+    /* A value picker is a field, with Select's quiet edge and resting lift. */
+    :scope[data-ui-button-state~="variant=field"] {
+      --_ui-field-shadow: var(--ui-shadow-sm);
+      border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
+      border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
+      background-color: var(--ui-button-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+      color: var(--ui-button-text, var(--ui-text-primary));
+      font-weight: var(--ui-font-normal);
+      box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
+    }
+
+    :scope[data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
+      border-color: var(--ui-button-hover-border, var(--ui-control-border-hover, var(--ui-text-secondary)));
+      background-color: var(--ui-button-hover-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+    }
+
+    :scope[data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+      --_ui-field-shadow: var(--ui-pressed);
+    }
+
+    :scope[data-ui-button-state~="variant=field"]:focus-visible {
+      border-color: var(--ui-control-focus, var(--ui-accent-solid));
+      box-shadow:
+        var(--ui-button-shadow, var(--_ui-field-shadow)),
+        var(--ui-control-focus-halo-shadow);
+    }
+
     :scope[data-ui-button-state~="variant=ghost"] {
       border-color: transparent;
       background: transparent;
@@ -484,6 +511,8 @@
     /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
        destructive secondary action, not a special case. */
 
+    /* A value picker is a field, with Select's quiet edge and resting lift. */
+
     /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
 
     /* Pressed, or holding its menu open, a ghost button sinks slightly: a light surface with a faint

package/styles/ui-combobox.css

@@ -85,6 +85,7 @@
       --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
       --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
+      --_row: var(--ui-control-size-md);
       display: grid;
       gap: var(--ui-space-1);
       min-inline-size: 0;
@@ -106,6 +107,8 @@
     }
 
     .field {
+      box-sizing: border-box;
+      min-block-size: var(--_row);
       flex: 1 1 auto;
       display: flex;
       min-inline-size: 0;
@@ -172,14 +175,14 @@
       appearance: none;
       width: 100%;
       min-inline-size: 0;
-      min-block-size: calc(var(--ui-control-size-md) - 2px);
+      min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
       box-sizing: border-box;
       border: 0;
       border-radius: inherit;
       background: transparent;
       color: inherit;
       font: inherit;
-      line-height: var(--ui-line-height-md);
+      line-height: var(--ui-line-height-tight);
       padding: var(--ui-space-2) var(--ui-space-3);
       margin: 0;
       outline: none;
@@ -188,12 +191,13 @@
       --_row: var(--ui-control-size-sm);
     }
     :scope[data-ui-combobox-state~="size=sm"] input {
-      min-block-size: calc(var(--_row) - 2px);
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: var(--ui-font-size-sm);
     }
+    :scope[data-ui-combobox-state~="size=lg"] {
+      --_row: var(--ui-control-size-lg);
+    }
     :scope[data-ui-combobox-state~="size=lg"] input {
-      min-block-size: calc(var(--ui-control-size-lg) - 2px);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
     }
@@ -299,9 +303,12 @@
       white-space: nowrap;
     }
     @media (pointer: coarse) {
+      :scope {
+        --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
       button {
         min-inline-size: 2.75rem;
-        min-block-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. */
@@ -325,7 +332,7 @@
        while the clear and disclosure controls remain fixed at the end of the field. */
     :scope[data-ui-combobox-state~="multiple"] .field {
       align-items: center;
-      min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
+      min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
       padding: var(--ui-space-1);
     }
     :scope[data-ui-combobox-state~="multiple"] .entry {

package/styles/ui-input-group.css

@@ -80,6 +80,10 @@
     }
 
     @media (pointer: coarse) {
+      :scope {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+
       :scope:has(.field [data-ui-input-state~="size=sm"]) {
         min-block-size: var(--ui-control-min-block-size);
       }

package/styles/ui-input.css

@@ -71,7 +71,7 @@
       background: var(--ui-input-surface, var(--_ui-default-input-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
       color: var(--ui-text-primary);
       font: inherit;
-      line-height: var(--ui-line-height-md);
+      line-height: var(--ui-line-height-tight);
       box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
       transition:
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -95,6 +95,13 @@
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     @media (pointer: coarse) {
+      :scope {
+        min-block-size: var(
+          --ui-input-min-block-size,
+          var(--_ui-default-input-min-block-size, max(var(--ui-control-size-md), var(--ui-control-min-block-size)))
+        );
+      }
+
       :scope,
       :scope[data-ui-input-state~="size=sm"],
       :scope[data-ui-input-state~="size=lg"] {

package/styles/ui-select.css

@@ -56,8 +56,8 @@
       color: var(--ui-text-primary);
       color-scheme: light dark;
       font: inherit;
-      line-height: var(--ui-line-height-md);
-      box-shadow: var(--ui-select-shadow, var(--ui-control-inset));
+      line-height: var(--ui-line-height-tight);
+      box-shadow: var(--ui-select-shadow, var(--ui-shadow-sm));
       transition:
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
@@ -85,7 +85,7 @@
     :scope:focus-visible {
       border-color: var(--ui-select-focus-border, var(--ui-control-focus, var(--ui-accent-solid)));
       outline: none;
-      box-shadow: var(--ui-select-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+      box-shadow: var(--ui-select-focus-shadow, var(--ui-shadow-sm), var(--ui-control-focus-halo-shadow));
     }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
@@ -97,7 +97,7 @@
     :scope:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
       box-shadow: var(
         --ui-select-invalid-focus-shadow,
-        var(--ui-control-inset),
+        var(--ui-shadow-sm),
         0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
           in srgb,
           var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
@@ -133,6 +133,10 @@
     /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
        body-size text: below 16px, iOS zooms the page into the focused field. */
     @media (pointer: coarse) {
+      :scope {
+        min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+      }
+
       :scope[data-ui-select-state~="size=sm"] {
         min-block-size: var(--ui-control-min-block-size);
         font-size: inherit;

package/vanilla/UiButton.d.ts

@@ -19,7 +19,7 @@ export interface UiButtonProps {
   target?: string | null;
   tone?: "accent" | "neutral" | "danger" | "success" | "warning" | "info" | null;
   type?: "button" | "submit" | "reset" | null;
-  variant?: "outline" | "solid" | "danger" | "ghost" | "link" | "card" | null;
+  variant?: "outline" | "solid" | "danger" | "ghost" | "link" | "card" | "field" | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];
   slots?: Readonly<Record<string, readonly (string | Node)[]>>;

package/vanilla/UiButton.js

@@ -27,7 +27,7 @@ let P0, P1, P2, P3, P4, P5, P6, P7, P8, P9, P10, P11, P12, P13, P14, P15, P16, P
 const S = { n: [], t: [], f: import.meta.url, g: "ui-button" };
 const A = [["a",{},[],"",[],["data-ui-button-state","data-align","data-as","data-disabled","data-href","data-loading","data-pending","data-rel","data-shape","data-size","data-stretch","data-target","data-tone","data-type","data-variant","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-align","data-as","data-disabled","data-href","data-loading","data-pending","data-rel","data-shape","data-size","data-stretch","data-target","data-tone","data-type","data-variant","type","disabled","aria-disabled","aria-busy"]],["a",{},[],"",[],["data-ui-button-state","data-align","data-as","data-disabled","data-href","data-loading","data-pending","data-rel","data-shape","data-size","data-stretch","data-target","data-tone","data-type","data-variant","href","target","rel","aria-disabled","aria-busy","tabindex"]],["button",{},[],"",[],["data-ui-button-state","data-align","data-as","data-disabled","data-href","data-loading","data-pending","data-rel","data-shape","data-size","data-stretch","data-target","data-tone","data-type","data-variant","type","disabled","aria-disabled","aria-busy"]]];
 const Q = [[],[],[],[]];
-const D = { props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"accent", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
+const D = { props: { "align": { "required":false,"values":["center","start"],"default":"center", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "as": { "required":false,"values":["button","a"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "disabled": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "href": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "loading": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "pending": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "rel": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "shape": { "required":false,"values":["rounded","pill"],"default":"rounded", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "size": { "required":false,"values":["xs","sm","md","lg"],"default":"md", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "stretch": { "required":false,"default":false, c: checkBoolean, t: "boolean", j: 0, m: "b" }, "target": { "required":false, c: checkString, t: "string", j: 0, m: "s" }, "tone": { "required":false,"values":["accent","neutral","danger","success","warning","info"],"default":"accent", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "type": { "required":false,"values":["button","submit","reset"],"default":"button", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] }, "variant": { "required":false,"values":["outline","solid","danger","ghost","link","card","field"],"default":"outline", c: checkFormat("keyword", keywordFormat), t: "keyword", j: 0, m: ["p",formatOf(keywordFormat),false] } } };
 const C = (host) => controller.default(host);
 
 export function createUiButton(options = {}, html) {

package/vue/UiButton.d.ts

@@ -75,7 +75,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"outline" | "solid" | "danger" | "ghost" | "link" | "card" | null>;
+        type: PropType<"outline" | "solid" | "danger" | "ghost" | "link" | "card" | "field" | null>;
         default: string;
     };
 }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
@@ -132,7 +132,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
         default: string;
     };
     variant: {
-        type: PropType<"outline" | "solid" | "danger" | "ghost" | "link" | "card" | null>;
+        type: PropType<"outline" | "solid" | "danger" | "ghost" | "link" | "card" | "field" | null>;
         default: string;
     };
 }>> & Readonly<{}>, {
@@ -140,7 +140,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     shape: "pill" | "rounded" | null;
     size: "xs" | "sm" | "md" | "lg" | null;
     tone: "info" | "neutral" | "accent" | "success" | "warning" | "danger" | null;
-    variant: "link" | "danger" | "solid" | "outline" | "ghost" | "card" | null;
+    variant: "link" | "field" | "danger" | "solid" | "outline" | "ghost" | "card" | null;
     align: "center" | "start" | null;
     as: "a" | "button" | null;
     disabled: boolean | null;

package/vue/UiButton.vue

@@ -102,7 +102,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'tone' },
       description:
-        'Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:\n      tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour.',
+        'Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:\n      tone="danger" variant="outline" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour. The field variant always uses neutral field colors.',
       values: ['accent', 'neutral', 'danger', 'success', 'warning', 'info'],
       default: 'accent',
     },
@@ -120,8 +120,8 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'variant' },
       description:
-        'Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the\n      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot.',
-      values: ['outline', 'solid', 'danger', 'ghost', 'link', 'card'],
+        'Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the\n      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot. field opens a custom value picker: it shares Select\'s\n      quiet outline, neutral text and slightly raised surface, independently of action tone.',
+      values: ['outline', 'solid', 'danger', 'ghost', 'link', 'card', 'field'],
       default: 'outline',
     },
   },
@@ -150,7 +150,7 @@ const props = defineProps({
   },
   variant: {
     type: null as unknown as PropType<
-      'outline' | 'solid' | 'danger' | 'ghost' | 'link' | 'card' | null
+      'outline' | 'solid' | 'danger' | 'ghost' | 'link' | 'card' | 'field' | null
     >,
     default: 'outline',
   },
@@ -263,13 +263,13 @@ const checkedProps = computed(() => ({
     'type',
     acceptedProps,
   ) as 'button' | 'submit' | 'reset',
-  variant: checkedProp<'outline' | 'solid' | 'danger' | 'ghost' | 'link' | 'card'>(
+  variant: checkedProp<'outline' | 'solid' | 'danger' | 'ghost' | 'link' | 'card' | 'field'>(
     props['variant'],
     { kind: 'terminal', name: 'keyword' },
     false,
     'variant',
     acceptedProps,
-  ) as 'outline' | 'solid' | 'danger' | 'ghost' | 'link' | 'card',
+  ) as 'outline' | 'solid' | 'danger' | 'ghost' | 'link' | 'card' | 'field',
 }))
 void checkedProps.value
 watchSyncEffect(() => {
@@ -1175,6 +1175,39 @@ function concat<T extends unknown[]>(...values: T): ConcatResult<T> {
   --_on-hue: var(--ui-surface);
 }
 
+/* A value picker is a field, with Select's quiet edge and resting lift. */
+[data-component~="ui-button"][data-ui-button-state~="variant=field"] {
+  --_ui-field-shadow: var(--ui-shadow-sm);
+  border-color: var(--ui-button-border, var(--ui-control-border, var(--ui-border-strong)));
+  border-radius: var(--ui-button-radius, var(--ui-field-radius, var(--ui-radius-md)));
+  background-color: var(--ui-button-surface, var(--ui-control-surface, var(--ui-surface-elevated)));
+  color: var(--ui-button-text, var(--ui-text-primary));
+  font-weight: var(--ui-font-normal);
+  box-shadow: var(--ui-button-shadow, var(--_ui-field-shadow));
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=field"]:hover:not(:disabled, [aria-disabled="true"]) {
+  border-color: var(
+    --ui-button-hover-border,
+    var(--ui-control-border-hover, var(--ui-text-secondary))
+  );
+  background-color: var(
+    --ui-button-hover-surface,
+    var(--ui-control-surface, var(--ui-surface-elevated))
+  );
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=field"]:is(:active, [aria-expanded="true"]):not(:disabled, [aria-disabled="true"]) {
+  --_ui-field-shadow: var(--ui-pressed);
+}
+
+[data-component~="ui-button"][data-ui-button-state~="variant=field"]:focus-visible {
+  border-color: var(--ui-control-focus, var(--ui-accent-solid));
+  box-shadow:
+    var(--ui-button-shadow, var(--_ui-field-shadow)),
+    var(--ui-control-focus-halo-shadow);
+}
+
 [data-component~="ui-button"][data-ui-button-state~="variant=ghost"] {
   border-color: transparent;
   background: transparent;

package/vue/UiCombobox.vue

@@ -62,7 +62,7 @@ const propValidityContract = {
       required: false,
       target: { attribute: 'clearqueryonblur' },
       description:
-        'In multiple mode, clears unfinished search text when focus leaves the whole combobox, preserving selected items. A controlled query reports query-change\n      with an empty query; the consumer must reflect it back. Does not choose or create an option. The default preserves unfinished text. Single mode keeps\n      its existing selection and free-text resolution.',
+        'In multiple mode, clears unfinished search text when focus leaves the whole combobox, preserving selected items. A controlled query reports query-change\n      with an empty query; the consumer must reflect it back. Does not choose or create an option. The default preserves unfinished text. Single mode keeps its\n      existing selection and free-text resolution.',
       default: false,
     },
     clearable: {
@@ -2256,6 +2256,7 @@ function uniqueKeys<T>(
   --_ui-combobox-popup-radius: var(--ui-combobox-popup-radius);
   --_ui-combobox-popup-shadow: var(--ui-combobox-popup-shadow);
 
+  --_row: var(--ui-control-size-md);
   display: grid;
   gap: var(--ui-space-1);
   min-inline-size: 0;
@@ -2277,6 +2278,8 @@ label {
 }
 
 .field {
+  box-sizing: border-box;
+  min-block-size: var(--_row);
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -2347,14 +2350,14 @@ input {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
-  min-block-size: calc(var(--ui-control-size-md) - 2px);
+  min-block-size: calc(var(--_row) - 2 * var(--ui-border-width));
   box-sizing: border-box;
   border: 0;
   border-radius: inherit;
   background: transparent;
   color: inherit;
   font: inherit;
-  line-height: var(--ui-line-height-md);
+  line-height: var(--ui-line-height-tight);
   padding: var(--ui-space-2) var(--ui-space-3);
   margin: 0;
   outline: none;
@@ -2363,12 +2366,13 @@ input {
   --_row: var(--ui-control-size-sm);
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input {
-  min-block-size: calc(var(--_row) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
   font-size: var(--ui-font-size-sm);
 }
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] {
+  --_row: var(--ui-control-size-lg);
+}
 [data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input {
-  min-block-size: calc(var(--ui-control-size-lg) - 2px);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
 }
@@ -2485,9 +2489,12 @@ input:disabled, button:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
+  [data-component~="ui-combobox"] {
+    --_row: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+  }
   button {
     min-inline-size: 2.75rem;
-    min-block-size: 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. */
@@ -2511,7 +2518,7 @@ input:disabled, button:disabled {
    while the clear and disclosure controls remain fixed at the end of the field. */
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field {
   align-items: center;
-  min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
+  min-block-size: var(--_ui-combobox-item-min-block-size, var(--_row));
   padding: var(--ui-space-1);
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .entry {

package/vue/UiInput.vue

@@ -584,7 +584,7 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
   );
   color: var(--ui-text-primary);
   font: inherit;
-  line-height: var(--ui-line-height-md);
+  line-height: var(--ui-line-height-tight);
   box-shadow: var(--ui-input-shadow, var(--_ui-default-input-shadow, var(--ui-control-inset)));
   transition:
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
@@ -614,6 +614,16 @@ useComponentHost(() => import('../components/ui-input/ui-input.js'), {
 /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
    body-size text: below 16px, iOS zooms the page into the focused field. */
 @media (pointer: coarse) {
+  [data-component~="ui-input"] {
+    min-block-size: var(
+      --ui-input-min-block-size,
+      var(
+        --_ui-default-input-min-block-size,
+        max(var(--ui-control-size-md), var(--ui-control-min-block-size))
+      )
+    );
+  }
+
   [data-component~="ui-input"],
   [data-component~="ui-input"][data-ui-input-state~="size=sm"],
   [data-component~="ui-input"][data-ui-input-state~="size=lg"] {

package/vue/UiInputGroup.vue

@@ -306,6 +306,10 @@ useComponentHost(() => import('../components/ui-input-group/ui-input-group.js'),
 }
 
 @media (pointer: coarse) {
+  [data-component~="ui-input-group"] {
+    min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+  }
+
   [data-component~="ui-input-group"]:has(.field [data-ui-input-state~="size=sm"]) {
     min-block-size: var(--ui-control-min-block-size);
   }

package/vue/UiSelect.vue

@@ -286,8 +286,8 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   color: var(--ui-text-primary);
   color-scheme: light dark;
   font: inherit;
-  line-height: var(--ui-line-height-md);
-  box-shadow: var(--ui-select-shadow, var(--ui-control-inset));
+  line-height: var(--ui-line-height-tight);
+  box-shadow: var(--ui-select-shadow, var(--ui-shadow-sm));
   transition:
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
@@ -320,7 +320,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
   outline: none;
   box-shadow: var(
     --ui-select-focus-shadow,
-    var(--ui-control-inset),
+    var(--ui-shadow-sm),
     var(--ui-control-focus-halo-shadow)
   );
 }
@@ -334,7 +334,7 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
 [data-component~="ui-select"]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow: var(
     --ui-select-invalid-focus-shadow,
-    var(--ui-control-inset),
+    var(--ui-shadow-sm),
     0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
       in srgb,
       var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
@@ -370,6 +370,10 @@ useComponentHost(() => import('../components/ui-select/ui-select.js'), {
 /* Under touch a small field is still a touch-sized target, as a small button is, and keeps
    body-size text: below 16px, iOS zooms the page into the focused field. */
 @media (pointer: coarse) {
+  [data-component~="ui-select"] {
+    min-block-size: max(var(--ui-control-size-md), var(--ui-control-min-block-size));
+  }
+
   [data-component~="ui-select"][data-ui-select-state~="size=sm"] {
     min-block-size: var(--ui-control-min-block-size);
     font-size: inherit;

package/vue/chunks/UiButton.js

@@ -297,7 +297,7 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				},
 				required: false,
 				target: { attribute: "tone" },
-				description: "Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:\n      tone=\"danger\" variant=\"outline\" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour.",
+				description: "Which colour the button speaks in. It applies to every variant, so an outline, a ghost, and a solid in the same tone are the same action at three volumes:\n      tone=\"danger\" variant=\"outline\" is a destructive secondary action. neutral is the quiet one, for a button that should not claim a colour. The field variant always uses neutral field colors.",
 				values: [
 					"accent",
 					"neutral",
@@ -330,14 +330,15 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 				},
 				required: false,
 				target: { attribute: "variant" },
-				description: "Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the\n      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot.",
+				description: "Emphasis: how loudly the button asks. solid fills with its tone, outline draws its tone at the edge over a wash of it, ghost carries only text until it is\n      hovered, and link is an inline text action that reads as a link. danger is solid in the danger tone, kept for the call sites that name it. card uses the\n      same tone on a full-width action with an icon slot, wrapping content, and a centered action slot. field opens a custom value picker: it shares Select's\n      quiet outline, neutral text and slightly raised surface, independently of action tone.",
 				values: [
 					"outline",
 					"solid",
 					"danger",
 					"ghost",
 					"link",
-					"card"
+					"card",
+					"field"
 				],
 				default: "outline"
 			}
@@ -765,6 +766,6 @@ var UiButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-e56c4e01"]]);
+}), [["__scopeId", "data-v-8789629f"]]);
 //#endregion
 export { UiButton_default as t };

package/vue/chunks/UiCombobox.js

@@ -294,7 +294,7 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 				},
 				required: false,
 				target: { attribute: "clearqueryonblur" },
-				description: "In multiple mode, clears unfinished search text when focus leaves the whole combobox, preserving selected items. A controlled query reports query-change\n      with an empty query; the consumer must reflect it back. Does not choose or create an option. The default preserves unfinished text. Single mode keeps\n      its existing selection and free-text resolution.",
+				description: "In multiple mode, clears unfinished search text when focus leaves the whole combobox, preserving selected items. A controlled query reports query-change\n      with an empty query; the consumer must reflect it back. Does not choose or create an option. The default preserves unfinished text. Single mode keeps its\n      existing selection and free-text resolution.",
 				default: false
 			},
 			clearable: {
@@ -2090,6 +2090,6 @@ var UiCombobox_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__P
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-33359776"]]);
+}), [["__scopeId", "data-v-7a56e205"]]);
 //#endregion
 export { UiCombobox_default as t };

package/vue/chunks/UiInput.js

@@ -720,6 +720,6 @@ var UiInput_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-1e464f91"]]);
+}), [["__scopeId", "data-v-3c4d919b"]]);
 //#endregion
 export { UiInput_default as t };

package/vue/chunks/UiInputGroup.js

@@ -212,6 +212,6 @@ var UiInputGroup_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-ac4d8095"]]);
+}), [["__scopeId", "data-v-9e6e0392"]]);
 //#endregion
 export { UiInputGroup_default as t };

package/vue/chunks/UiSelect.js

@@ -228,6 +228,6 @@ var UiSelect_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PUR
 			}]]);
 		};
 	}
-}), [["__scopeId", "data-v-0c317a58"]]);
+}), [["__scopeId", "data-v-395cd822"]]);
 //#endregion
 export { UiSelect_default as t };