@threadlabs/looma 0.13.6 → 0.14.1

package/vanilla/index.js

@@ -55,6 +55,7 @@ export * from "./UiStack.js";
 export * from "./UiStatusMessage.js";
 export * from "./UiSwitch.js";
 export * from "./UiSwitcher.js";
+export * from "./UiTable.js";
 export * from "./UiTabs.js";
 export * from "./UiText.js";
 export * from "./UiTextarea.js";

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;

package/vue/UiDescriptionList.d.ts

@@ -1,12 +1,15 @@
 type __VLS_Props = {
-    layout?: 'rows' | 'tiles';
+    columns?: '2' | '3' | '4';
+    density?: 'comfortable' | 'compact';
+    layout?: 'rows' | 'stacked' | 'grid' | 'tiles';
 };
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    layout: "rows" | "tiles";
+    density: "comfortable" | "compact";
+    layout: "rows" | "stacked" | "grid" | "tiles";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiDescriptionList.vue

@@ -6,9 +6,12 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    layout?: 'rows' | 'tiles'
+    columns?: '2' | '3' | '4'
+    density?: 'comfortable' | 'compact'
+    layout?: 'rows' | 'stacked' | 'grid' | 'tiles'
   }>(),
   {
+    density: 'comfortable',
     layout: 'rows',
   },
 )
@@ -17,6 +20,8 @@ const props = withDefaults(
 const hostState = computed(() =>
   [
     props.layout && `layout layout=${props.layout}`,
+    props.columns && `columns columns=${props.columns}`,
+    props.density && `density density=${props.density}`,
   ].filter(Boolean).join(' ')
 )
 </script>
@@ -35,24 +40,63 @@ const hostState = computed(() =>
 /* Named values: a term and what it is, for each item (ui-description-item). */
 /* Rows line every term up in one column and every value in the next, through subgrid. */
 [data-component~="ui-description-list"] {
+  --_gap: var(--ui-space-2);
+  --_gap-compact: var(--ui-space-1);
+  --_column-gap: var(--ui-space-6);
+  --_min: 10rem;
+  --_track: var(--_min);
+  --_tile-padding: var(--ui-space-3);
   display: grid;
   grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-  gap: var(--ui-space-2) var(--ui-space-6);
+  gap: var(--_gap) var(--_column-gap);
   min-inline-size: 0;
   margin: 0;
 }
 
-/* Tiles pass their shape to the items through private properties, which cross into each item. */
+/* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+   private properties, which cross into each item. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=stacked"],
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=grid"],
 [data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
   --_ui-description-display: flex;
   --_ui-description-column: auto;
+  --_ui-description-align: stretch;
+  --_gap: var(--ui-space-4);
+  --_gap-compact: var(--ui-space-2);
+  grid-template-columns: minmax(0, 1fr);
+}
+
+/* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+   than that many fit. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=grid"],
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
+}
+
+[data-component~="ui-description-list"][data-ui-description-list-state~="layout=tiles"] {
   --_ui-description-align: flex-start;
   --_ui-description-value-size: var(--ui-font-size-lg);
-  --_ui-description-padding: var(--ui-space-3);
+  --_ui-description-padding: var(--_tile-padding);
   --_ui-description-border-width: 1px;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
-  gap: var(--ui-space-3);
+  --_gap: var(--ui-space-3);
+  --_gap-compact: var(--ui-space-2);
+  --_column-gap: var(--_gap);
+}
+
+[data-component~="ui-description-list"][data-ui-description-list-state~="columns=2"] {
+  --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
+}
+[data-component~="ui-description-list"][data-ui-description-list-state~="columns=3"] {
+  --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
+}
+[data-component~="ui-description-list"][data-ui-description-list-state~="columns=4"] {
+  --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
+}
+
+/* Compact takes each layout's closer spacing. */
+[data-component~="ui-description-list"][data-ui-description-list-state~="density=compact"] {
+  --_gap: var(--_gap-compact);
+  --_tile-padding: var(--ui-space-2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiInput.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     invalid?: boolean;
     readonly?: boolean;
     required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     value?: string;
     modelValue?: string | null;
 };
@@ -12,6 +13,7 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     invalid: boolean;
+    size: "sm" | "md" | "lg";
     disabled: boolean;
     required: boolean;
     readonly: boolean;

package/vue/UiInput.vue

@@ -12,6 +12,7 @@ const props = withDefaults(
     invalid?: boolean
     readonly?: boolean
     required?: boolean
+    size?: 'sm' | 'md' | 'lg'
     value?: string
     modelValue?: string | null
   }>(),
@@ -20,6 +21,7 @@ const props = withDefaults(
     invalid: false,
     readonly: false,
     required: false,
+    size: 'md',
   },
 )
 const emit = defineEmits<{
@@ -32,6 +34,13 @@ const model = computed({
 
 const root = ref<HTMLElement | null>(null)
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+  ].filter(Boolean).join(' ')
+)
+
 const dispatch = createDispatch(root)
 
 useComponentHost(controllerModule.default, {
@@ -50,6 +59,7 @@ useComponentHost(controllerModule.default, {
     :required="required"
     :aria-invalid="invalid"
     v-model="model"
+    :data-ui-input-state="hostState || undefined"
     ref="root"
   >
 </template>
@@ -138,6 +148,37 @@ useComponentHost(controllerModule.default, {
     background-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
+/* Each size reads the hook and then an Input Group's default first, so a group, which draws the frame, can zero it. */
+[data-component~="ui-input"][data-ui-input-state~="size=sm"] {
+  min-block-size: var(
+    --ui-input-min-block-size,
+    var(--_ui-default-input-min-block-size, var(--ui-control-size-sm))
+  );
+  padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
+}
+
+[data-component~="ui-input"][data-ui-input-state~="size=lg"] {
+  min-block-size: var(
+    --ui-input-min-block-size,
+    var(--_ui-default-input-min-block-size, var(--ui-control-size-lg))
+  );
+  padding: var(--ui-space-3) var(--ui-space-4);
+  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. */
+@media (pointer: coarse) {
+  [data-component~="ui-input"][data-ui-input-state~="size=sm"] {
+    min-block-size: var(
+      --ui-input-min-block-size,
+      var(--_ui-default-input-min-block-size, var(--ui-control-min-block-size))
+    );
+    font-size: inherit;
+  }
+}
+
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
 [data-component~="ui-input"]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);

package/vue/UiInputGroup.vue

@@ -91,6 +91,21 @@ useComponentHost(controllerModule.default, {
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
 
+/* The frame takes its input's size, so a small group lines up with small buttons and fields. */
+[data-component~="ui-input-group"]:has(.field [data-ui-input-state~="size=sm"]) {
+  min-block-size: var(--ui-control-size-sm);
+}
+
+[data-component~="ui-input-group"]:has(.field [data-ui-input-state~="size=lg"]) {
+  min-block-size: var(--ui-control-size-lg);
+}
+
+@media (pointer: coarse) {
+  [data-component~="ui-input-group"]:has(.field [data-ui-input-state~="size=sm"]) {
+    min-block-size: var(--ui-control-min-block-size);
+  }
+}
+
 [data-component~="ui-input-group"]:hover:not(:has(input:focus, input:disabled)) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }

package/vue/UiList.d.ts

@@ -7,8 +7,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    layout: "rows" | "grid";
     density: "comfortable" | "compact";
+    layout: "rows" | "grid";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/vue/UiRadio.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     disabled?: boolean;
     name?: string;
     required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     value?: string;
 };
 declare var __VLS_1: {}, __VLS_3: {};
@@ -29,6 +30,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/UiRadio.vue

@@ -12,6 +12,7 @@ const props = withDefaults(
     disabled?: boolean
     name?: string
     required?: boolean
+    size?: 'sm' | 'md' | 'lg'
     value?: string
   }>(),
   {
@@ -19,6 +20,7 @@ const props = withDefaults(
     disabled: false,
     name: '',
     required: false,
+    size: 'md',
     value: 'on',
   },
 )
@@ -43,6 +45,7 @@ const internalChecked = ref(false)
 const hostState = computed(() =>
   [
     props.disabled && 'disabled',
+    props.size && `size size=${props.size}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -159,6 +162,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-radio"][data-ui-radio-state~="size=sm"] {
+  --_font: var(--ui-font-size-sm);
+  --_row: var(--ui-control-size-sm);
+}
+
+[data-component~="ui-radio"][data-ui-radio-state~="size=lg"] {
+  --_font: var(--ui-font-size-md);
+  --_row: var(--ui-control-size-lg);
+}
+
+[data-component~="ui-radio"][data-ui-radio-state~="size=sm"],
+[data-component~="ui-radio"][data-ui-radio-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-radio"][data-ui-radio-state~="size=sm"] input,
+[data-component~="ui-radio"][data-ui-radio-state~="size=lg"] input {
+  margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2);
+}
+
+@media (pointer: coarse) {
+  [data-component~="ui-radio"][data-ui-radio-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-radio"][hidden] {
   display: none;

package/vue/UiSelect.d.ts

@@ -2,6 +2,7 @@ type __VLS_Props = {
     disabled?: boolean;
     invalid?: boolean;
     required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     value?: string;
     modelValue?: string | null;
 };
@@ -15,6 +16,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     invalid: boolean;
+    size: "sm" | "md" | "lg";
     disabled: boolean;
     required: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/vue/UiSelect.vue

@@ -11,6 +11,7 @@ const props = withDefaults(
     disabled?: boolean
     invalid?: boolean
     required?: boolean
+    size?: 'sm' | 'md' | 'lg'
     value?: string
     modelValue?: string | null
   }>(),
@@ -18,6 +19,7 @@ const props = withDefaults(
     disabled: false,
     invalid: false,
     required: false,
+    size: 'md',
   },
 )
 const emit = defineEmits<{
@@ -30,6 +32,13 @@ const model = computed({
 
 const root = ref<HTMLElement | null>(null)
 
+/** The values the styles' :host-state() rules test. */
+const hostState = computed(() =>
+  [
+    props.size && `size size=${props.size}`,
+  ].filter(Boolean).join(' ')
+)
+
 const dispatch = createDispatch(root)
 
 useComponentHost(controllerModule.default, {
@@ -47,6 +56,7 @@ useComponentHost(controllerModule.default, {
     :required="required"
     :aria-invalid="invalid"
     v-model="model"
+    :data-ui-select-state="hostState || undefined"
     ref="root"
   >
     <slot />
@@ -137,9 +147,30 @@ useComponentHost(controllerModule.default, {
   cursor: not-allowed;
 }
 
-[data-component~="ui-select"][size]:not([size="1"]) {
-  min-block-size: 7rem;
-  padding: var(--ui-space-2);
+[data-component~="ui-select"][data-ui-select-state~="size=sm"] {
+  min-block-size: var(--ui-control-size-sm);
+  padding: var(--ui-space-1) var(--ui-space-2);
+  padding-inline-end: calc(var(--ui-space-2) + var(--ui-icon-size-sm) + var(--ui-space-1));
+  background-position: right var(--ui-space-2) center;
+  background-size: var(--ui-icon-size-sm) var(--ui-icon-size-sm);
+  font-size: var(--ui-font-size-sm);
+}
+
+[data-component~="ui-select"][data-ui-select-state~="size=lg"] {
+  min-block-size: var(--ui-control-size-lg);
+  padding: var(--ui-space-3) var(--ui-space-4);
+  padding-inline-end: calc(var(--ui-space-4) + 1.5rem);
+  background-position: right var(--ui-space-4) center;
+  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. */
+@media (pointer: coarse) {
+  [data-component~="ui-select"][data-ui-select-state~="size=sm"] {
+    min-block-size: var(--ui-control-min-block-size);
+    font-size: inherit;
+  }
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */

package/vue/UiSwitch.d.ts

@@ -3,6 +3,7 @@ type __VLS_Props = {
     disabled?: boolean;
     name?: string;
     required?: boolean;
+    size?: 'sm' | 'md' | 'lg';
     value?: string;
 };
 declare var __VLS_1: {}, __VLS_3: {};
@@ -29,6 +30,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/UiSwitch.vue

@@ -12,6 +12,7 @@ const props = withDefaults(
     disabled?: boolean
     name?: string
     required?: boolean
+    size?: 'sm' | 'md' | 'lg'
     value?: string
   }>(),
   {
@@ -19,6 +20,7 @@ const props = withDefaults(
     disabled: false,
     name: '',
     required: false,
+    size: 'md',
     value: 'on',
   },
 )
@@ -43,6 +45,7 @@ const internalChecked = ref(false)
 const hostState = computed(() =>
   [
     props.disabled && 'disabled',
+    props.size && `size size=${props.size}`,
   ].filter(Boolean).join(' ')
 )
 
@@ -206,6 +209,38 @@ input:focus-visible {
   }
 }
 
+/* A sized switch keeps its track 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-switch"][data-ui-switch-state~="size=sm"] {
+  --_font: var(--ui-font-size-sm);
+  --_row: var(--ui-control-size-sm);
+}
+
+[data-component~="ui-switch"][data-ui-switch-state~="size=lg"] {
+  --_font: var(--ui-font-size-md);
+  --_row: var(--ui-control-size-lg);
+}
+
+[data-component~="ui-switch"][data-ui-switch-state~="size=sm"],
+[data-component~="ui-switch"][data-ui-switch-state~="size=lg"] {
+  --_line: calc(var(--_font) * var(--ui-line-height-md));
+  font-size: var(--_font);
+  padding-block: calc((var(--_row) - var(--ui-switch-track-height, 1.5rem)) / 2);
+}
+
+/* The label centres on the track. */
+[data-component~="ui-switch"][data-ui-switch-state~="size=sm"] .text,
+[data-component~="ui-switch"][data-ui-switch-state~="size=lg"] .text {
+  margin-top: calc((var(--_ui-switch-track-height, 1.5rem) - var(--_line)) / 2);
+}
+
+@media (pointer: coarse) {
+  [data-component~="ui-switch"][data-ui-switch-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-switch"][hidden] {
   display: none;