@threadlabs/looma 0.13.5 → 0.14.0

package/vanilla/UiInput.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-input/ui-input.js";
 import "../styles/ui-input.css";
 
-const definition = {...{"contract":{"tag":"ui-input","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"input","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"input","choices":["input"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-input","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"input","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"input","choices":["input"]}},source:{file:import.meta.url},css:""};
 
 export function createUiInput(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiRadio.d.ts

@@ -11,6 +11,7 @@ export interface UiRadioProps {
   disabled?: boolean | null;
   name?: string | null;
   required?: boolean | null;
+  size?: "sm" | "md" | "lg" | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiRadio.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-radio/ui-radio.js";
 import "../styles/ui-radio.css";
 
-const definition = {...{"contract":{"tag":"ui-radio","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"radio"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-radio","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"radio"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
 
 export function createUiRadio(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiSelect.d.ts

@@ -9,6 +9,7 @@ export interface UiSelectProps {
   disabled?: boolean | null;
   invalid?: boolean | null;
   required?: boolean | null;
+  size?: "sm" | "md" | "lg" | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiSelect.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-select/ui-select.js";
 import "../styles/ui-select.css";
 
-const definition = {...{"contract":{"tag":"ui-select","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"select","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"select","choices":["select"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-select","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"select","attributes":[{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}}],"children":[{"kind":"slot"}]},"declarations":[],"root":{"kind":"native","element":"select","choices":["select"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSelect(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiSwitch.d.ts

@@ -11,6 +11,7 @@ export interface UiSwitchProps {
   disabled?: boolean | null;
   name?: string | null;
   required?: boolean | null;
+  size?: "sm" | "md" | "lg" | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiSwitch.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-switch/ui-switch.js";
 import "../styles/ui-switch.css";
 
-const definition = {...{"contract":{"tag":"ui-switch","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"role","value":"switch"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-switch","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"literal","name":"role","value":"switch"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
 
 export function createUiSwitch(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vanilla/UiTextarea.d.ts

@@ -11,6 +11,7 @@ export interface UiTextareaProps {
   readonly?: boolean | null;
   required?: boolean | null;
   rows?: number | null;
+  size?: "sm" | "md" | "lg" | null;
   value?: string | null;
   attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
   children?: readonly (string | Node)[];

package/vanilla/UiTextarea.js

@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
 import * as controller from "../components/ui-textarea/ui-textarea.js";
 import "../styles/ui-textarea.css";
 
-const definition = {...{"contract":{"tag":"ui-textarea","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"textarea","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-textarea","props":{"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"rows":{"type":{"kind":"terminal","name":"integer"},"required":false,"target":{"attribute":"rows"},"default":4},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"textarea","attributes":[{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"rows","expression":"rows","expressionPlan":{"source":"rows","ast":{"kind":"id","name":"rows"},"dependencies":["rows"]}}],"children":[]},"declarations":[],"root":{"kind":"native","element":"textarea","choices":["textarea"]}},source:{file:import.meta.url},css:""};
 
 export function createUiTextarea(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;

package/vue/UiButton.vue

@@ -357,8 +357,9 @@ function attribute(value: unknown): any {
   border-color: transparent;
 }
 
+/* The size states outrank :host, so sm is named too, or a small button would stay small. */
 @media (pointer: coarse) {
-  [data-component~="ui-button"] {
+  [data-component~="ui-button"], [data-component~="ui-button"][data-ui-button-state~="size=sm"] {
     min-block-size: var(--ui-control-min-block-size);
   }
 }

package/vue/UiCheckbox.d.ts

@@ -4,6 +4,7 @@ type __VLS_Props = {
     indeterminate?: boolean;
     name?: string;
     required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     value?: string;
 };
 declare var __VLS_1: {}, __VLS_3: {};
@@ -30,6 +31,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:value"?: ((value: string) => any) | undefined;
 }>, {
     name: string;
+    size: "sm" | "md" | "lg";
     value: string;
     disabled: boolean;
     checked: boolean;

package/vue/UiCheckbox.vue

@@ -13,6 +13,7 @@ const props = withDefaults(
     indeterminate?: boolean
     name?: string
     required?: boolean
+    size?: 'sm' | 'md' | 'lg'
     value?: string
   }>(),
   {
@@ -21,6 +22,7 @@ const props = withDefaults(
     indeterminate: false,
     name: '',
     required: false,
+    size: 'md',
     value: 'on',
   },
 )
@@ -45,6 +47,7 @@ const internalChecked = ref(false)
 const hostState = computed(() =>
   [
     props.disabled && 'disabled',
+    props.size && `size size=${props.size}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -215,6 +218,37 @@ input:focus-visible {
   cursor: not-allowed;
 }
 
+/* A sized choice keeps its box and aligns instead: the label takes that size's field type size,
+   and the first line centres in that control height, so the label shares a row's baseline.
+   Multi-line labels and descriptions still grow downward from that first line. */
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] {
+  --_font: var(--ui-font-size-sm);
+  --_row: var(--ui-control-size-sm);
+}
+
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] {
+  --_font: var(--ui-font-size-md);
+  --_row: var(--ui-control-size-lg);
+}
+
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"],
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] {
+  --_line: calc(var(--_font) * var(--ui-line-height-md));
+  font-size: var(--_font);
+  padding-block: calc((var(--_row) - var(--_line)) / 2);
+}
+
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] input,
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] input {
+  margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
+}
+
+@media (pointer: coarse) {
+  [data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"] {
+    --_row: var(--ui-control-min-block-size);
+  }
+}
+
 /* A component that sets its display still honours the hidden attribute on its root. */
 [data-component~="ui-checkbox"][hidden] {
   display: none;

package/vue/UiCombobox.d.ts

@@ -21,7 +21,7 @@ type __VLS_Props = {
     readonly?: boolean;
     required?: boolean;
     selectedValues?: readonly (string)[];
-    size?: 'sm' | 'md';
+    size?: 'sm' | 'md' | 'lg';
     tokenSeparators?: readonly (string)[];
     value?: string | null;
 };
@@ -247,7 +247,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
 }>, {
     label: string;
     name: string;
-    size: "sm" | "md";
+    size: "sm" | "md" | "lg";
     disabled: boolean;
     required: boolean;
     allowCreate: boolean;

package/vue/UiCombobox.vue

@@ -33,7 +33,7 @@ const props = withDefaults(
     readonly?: boolean
     required?: boolean
     selectedValues?: readonly (string)[]
-    size?: 'sm' | 'md'
+    size?: 'sm' | 'md' | 'lg'
     tokenSeparators?: readonly (string)[]
     value?: string | null
   }>(),
@@ -834,9 +834,18 @@ input {
   margin: 0;
   outline: none;
 }
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] {
+  --_row: var(--ui-control-size-sm);
+}
 [data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input {
-  min-block-size: calc(var(--ui-control-size-sm) - 2px);
+  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"] 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);
 }
 button {
   appearance: none;
@@ -937,6 +946,14 @@ input:disabled, button:disabled {
     min-inline-size: 2.75rem;
     min-block-size: 2.75rem;
   }
+  /* 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. */
+  [data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] {
+    --_row: var(--ui-control-min-block-size);
+  }
+  [data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input {
+    font-size: inherit;
+  }
 }
 @media (forced-colors: active) {
   .field, .popup {
@@ -995,6 +1012,26 @@ input:disabled, button:disabled {
   min-block-size: 1.75rem;
   padding: var(--ui-space-0-5) var(--ui-space-1);
 }
+/* A small multiple field starts at the small control height; chosen items still wrap it taller. */
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
+  .field {
+  min-block-size: 0;
+  padding: var(--ui-space-0-5);
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
+  input {
+  min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
+  padding: 0 var(--ui-space-1);
+}
+/* A large multiple field starts at the large control height, as sm starts at the small one. */
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
+  .field {
+  min-block-size: 0;
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
+  input {
+  min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
+}
 .item {
   appearance: none;
   display: inline-flex;