@threadlabs/looma 0.13.5 → 0.14.0

package/vue/UiIcon.vue

@@ -1,8 +1,6 @@
 <!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref } from 'vue'
-import * as controllerModule from '../components/ui-icon/ui-icon.js'
-import { createDispatch, useComponentHost } from './host'
+import { computed } from 'vue'
 
 defineOptions({ inheritAttrs: false })
 
@@ -15,38 +13,328 @@ const props = withDefaults(
   },
 )
 
-const root = ref<HTMLElement | null>(null)
-const shapes = ref<
-  {
-    tag: 'path' | 'circle' | 'rect' | 'line'
-    d?: string
-    cx?: string
-    cy?: string
-    r?: string
-    x?: string
-    y?: string
-    width?: string
-    height?: string
-    rx?: string
-    x1?: string
-    x2?: string
-    y1?: string
-    y2?: string
-  }[]
->([])
+const shapes = computed(() =>
+  ({
+    'align-center': [{ tag: 'path', d: 'M21 5H3' }, { tag: 'path', d: 'M17 12H7' }, {
+      tag: 'path',
+      d: 'M19 19H5',
+    }],
+    'align-left': [{ tag: 'path', d: 'M21 5H3' }, { tag: 'path', d: 'M15 12H3' }, {
+      tag: 'path',
+      d: 'M17 19H3',
+    }],
+    'align-right': [{ tag: 'path', d: 'M21 5H3' }, { tag: 'path', d: 'M21 12H9' }, {
+      tag: 'path',
+      d: 'M21 19H7',
+    }],
+    'arrow-left': [{ tag: 'path', d: 'm12 19-7-7 7-7' }, { tag: 'path', d: 'M19 12H5' }],
+    bold: [{
+      tag: 'path',
+      d: 'M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8',
+    }],
+    'book-user': [{ tag: 'path', d: 'M15 13a3 3 0 1 0-6 0' }, {
+      tag: 'path',
+      d: 'M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H19a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1H6.5a1 1 0 0 1 0-5H20',
+    }, { tag: 'circle', cx: '12', cy: '8', r: '2' }],
+    braces: [{
+      tag: 'path',
+      d: 'M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1',
+    }, {
+      tag: 'path',
+      d: 'M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1',
+    }],
+    calculator: [
+      { tag: 'rect', width: '16', height: '20', x: '4', y: '2', rx: '2' },
+      { tag: 'line', x1: '8', x2: '16', y1: '6', y2: '6' },
+      { tag: 'line', x1: '16', x2: '16', y1: '14', y2: '18' },
+      { tag: 'path', d: 'M16 10h.01' },
+      { tag: 'path', d: 'M12 10h.01' },
+      { tag: 'path', d: 'M8 10h.01' },
+      { tag: 'path', d: 'M12 14h.01' },
+      { tag: 'path', d: 'M8 14h.01' },
+      { tag: 'path', d: 'M12 18h.01' },
+      { tag: 'path', d: 'M8 18h.01' },
+    ],
+    'chevron-down': [{ tag: 'path', d: 'm6 9 6 6 6-6' }],
+    'chevron-left': [{ tag: 'path', d: 'm15 18-6-6 6-6' }],
+    'chevron-right': [{ tag: 'path', d: 'm9 18 6-6-6-6' }],
+    'circle-check': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, {
+      tag: 'path',
+      d: 'm9 12 2 2 4-4',
+    }],
+    'circle-x': [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'path', d: 'm15 9-6 6' }, {
+      tag: 'path',
+      d: 'm9 9 6 6',
+    }],
+    'code-xml': [{ tag: 'path', d: 'm18 16 4-4-4-4' }, { tag: 'path', d: 'm6 8-4 4 4 4' }, {
+      tag: 'path',
+      d: 'm14.5 4-5 16',
+    }],
+    columns: [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, {
+      tag: 'path',
+      d: 'M9 3v18',
+    }, { tag: 'path', d: 'M15 3v18' }],
+    'credit-card': [{ tag: 'rect', width: '20', height: '14', x: '2', y: '5', rx: '2' }, {
+      tag: 'line',
+      x1: '2',
+      x2: '22',
+      y1: '10',
+      y2: '10',
+    }],
+    ellipsis: [{ tag: 'circle', cx: '12', cy: '12', r: '1' }, {
+      tag: 'circle',
+      cx: '19',
+      cy: '12',
+      r: '1',
+    }, { tag: 'circle', cx: '5', cy: '12', r: '1' }],
+    eraser: [{
+      tag: 'path',
+      d: 'M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21',
+    }, { tag: 'path', d: 'm5.082 11.09 8.828 8.828' }],
+    'file-text': [
+      {
+        tag: 'path',
+        d: 'M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z',
+      },
+      { tag: 'path', d: 'M14 2v5a1 1 0 0 0 1 1h5' },
+      { tag: 'path', d: 'M10 9H8' },
+      { tag: 'path', d: 'M16 13H8' },
+      { tag: 'path', d: 'M16 17H8' },
+    ],
+    folder: [{
+      tag: 'path',
+      d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z',
+    }],
+    'grip-horizontal': [
+      { tag: 'circle', cx: '12', cy: '9', r: '1' },
+      { tag: 'circle', cx: '19', cy: '9', r: '1' },
+      { tag: 'circle', cx: '5', cy: '9', r: '1' },
+      { tag: 'circle', cx: '12', cy: '15', r: '1' },
+      { tag: 'circle', cx: '19', cy: '15', r: '1' },
+      { tag: 'circle', cx: '5', cy: '15', r: '1' },
+    ],
+    'grip-vertical': [
+      { tag: 'circle', cx: '9', cy: '12', r: '1' },
+      { tag: 'circle', cx: '9', cy: '5', r: '1' },
+      { tag: 'circle', cx: '9', cy: '19', r: '1' },
+      { tag: 'circle', cx: '15', cy: '12', r: '1' },
+      { tag: 'circle', cx: '15', cy: '5', r: '1' },
+      { tag: 'circle', cx: '15', cy: '19', r: '1' },
+    ],
+    'heading-1': [{ tag: 'path', d: 'M4 12h8' }, { tag: 'path', d: 'M4 18V6' }, {
+      tag: 'path',
+      d: 'M12 18V6',
+    }, { tag: 'path', d: 'm17 12 3-2v8' }],
+    'heading-2': [{ tag: 'path', d: 'M4 12h8' }, { tag: 'path', d: 'M4 18V6' }, {
+      tag: 'path',
+      d: 'M12 18V6',
+    }, { tag: 'path', d: 'M21 18h-4c0-4 4-3 4-6 0-1.5-2-2.5-4-1' }],
+    'heading-3': [
+      { tag: 'path', d: 'M4 12h8' },
+      { tag: 'path', d: 'M4 18V6' },
+      { tag: 'path', d: 'M12 18V6' },
+      { tag: 'path', d: 'M17.5 10.5c1.7-1 3.5 0 3.5 1.5a2 2 0 0 1-2 2' },
+      { tag: 'path', d: 'M17 17.5c2 1.5 4 .3 4-1.5a2 2 0 0 0-2-2' },
+    ],
+    help: [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, {
+      tag: 'path',
+      d: 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3',
+    }, { tag: 'path', d: 'M12 17h.01' }],
+    highlighter: [{ tag: 'path', d: 'm9 11-6 6v3h9l3-3' }, {
+      tag: 'path',
+      d: 'm22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4',
+    }],
+    image: [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2', ry: '2' }, {
+      tag: 'circle',
+      cx: '9',
+      cy: '9',
+      r: '2',
+    }, { tag: 'path', d: 'm21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21' }],
+    info: [{ tag: 'circle', cx: '12', cy: '12', r: '10' }, { tag: 'path', d: 'M12 16v-4' }, {
+      tag: 'path',
+      d: 'M12 8h.01',
+    }],
+    italic: [{ tag: 'line', x1: '19', x2: '10', y1: '4', y2: '4' }, {
+      tag: 'line',
+      x1: '14',
+      x2: '5',
+      y1: '20',
+      y2: '20',
+    }, { tag: 'line', x1: '15', x2: '9', y1: '4', y2: '20' }],
+    'layout-dashboard': [
+      { tag: 'rect', width: '7', height: '9', x: '3', y: '3', rx: '1' },
+      { tag: 'rect', width: '7', height: '5', x: '14', y: '3', rx: '1' },
+      { tag: 'rect', width: '7', height: '9', x: '14', y: '12', rx: '1' },
+      { tag: 'rect', width: '7', height: '5', x: '3', y: '16', rx: '1' },
+    ],
+    list: [
+      { tag: 'path', d: 'M3 5h.01' },
+      { tag: 'path', d: 'M3 12h.01' },
+      { tag: 'path', d: 'M3 19h.01' },
+      { tag: 'path', d: 'M8 5h13' },
+      { tag: 'path', d: 'M8 12h13' },
+      { tag: 'path', d: 'M8 19h13' },
+    ],
+    'list-ordered': [
+      { tag: 'path', d: 'M11 5h10' },
+      { tag: 'path', d: 'M11 12h10' },
+      { tag: 'path', d: 'M11 19h10' },
+      { tag: 'path', d: 'M4 4h1v5' },
+      { tag: 'path', d: 'M4 9h2' },
+      { tag: 'path', d: 'M6.5 20H3.4c0-1 2.6-1.925 2.6-3.5a1.5 1.5 0 0 0-2.6-1.02' },
+    ],
+    'list-todo': [
+      { tag: 'path', d: 'M13 5h8' },
+      { tag: 'path', d: 'M13 12h8' },
+      { tag: 'path', d: 'M13 19h8' },
+      { tag: 'path', d: 'm3 17 2 2 4-4' },
+      { tag: 'rect', x: '3', y: '4', width: '6', height: '6', rx: '1' },
+    ],
+    loader: [{ tag: 'path', d: 'M21 12a9 9 0 1 1-6.219-8.56' }],
+    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' }],
+    minus: [{ tag: 'path', d: 'M5 12h14' }],
+    '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',
+    }],
+    'panel-left': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, {
+      tag: 'path',
+      d: 'M9 3v18',
+    }],
+    'panel-right': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, {
+      tag: 'path',
+      d: 'M15 3v18',
+    }],
+    'panel-top': [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, {
+      tag: 'path',
+      d: 'M3 9h18',
+    }],
+    pilcrow: [{ tag: 'path', d: 'M13 4v16' }, { tag: 'path', d: 'M17 4v16' }, {
+      tag: 'path',
+      d: 'M19 4H9.5a4.5 4.5 0 0 0 0 9H13',
+    }],
+    plus: [{ tag: 'path', d: 'M5 12h14' }, { tag: 'path', d: 'M12 5v14' }],
+    quote: [{
+      tag: 'path',
+      d: 'M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z',
+    }, {
+      tag: 'path',
+      d: 'M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z',
+    }],
+    receipt: [
+      { tag: 'path', d: 'M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1Z' },
+      { tag: 'path', d: 'M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8' },
+      { tag: 'path', d: 'M12 17.5v-11' },
+    ],
+    redo: [{ tag: 'path', d: 'm15 14 5-5-5-5' }, {
+      tag: 'path',
+      d: 'M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13',
+    }],
+    rows: [{ tag: 'rect', width: '18', height: '18', x: '3', y: '3', rx: '2' }, {
+      tag: 'path',
+      d: 'M21 9H3',
+    }, { tag: 'path', d: 'M21 15H3' }],
+    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' }],
+    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',
+    }],
+    trash: [
+      { tag: 'path', d: 'M10 11v6' },
+      { tag: 'path', d: 'M14 11v6' },
+      { tag: 'path', d: 'M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6' },
+      { tag: 'path', d: 'M3 6h18' },
+      { tag: 'path', d: 'M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2' },
+    ],
+    'triangle-alert': [
+      {
+        tag: 'path',
+        d: 'm21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3',
+      },
+      { tag: 'path', d: 'M12 9v4' },
+      { tag: 'path', d: 'M12 17h.01' },
+    ],
+    truck: [
+      { tag: 'path', d: 'M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2' },
+      { tag: 'path', d: 'M15 18H9' },
+      {
+        tag: 'path',
+        d: 'M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.624l-3.48-4.35A1 1 0 0 0 17.52 8H14',
+      },
+      { tag: 'circle', cx: '17', cy: '18', r: '2' },
+      { tag: 'circle', cx: '7', cy: '18', r: '2' },
+    ],
+    underline: [{ tag: 'path', d: 'M6 4v6a6 6 0 0 0 12 0V4' }, {
+      tag: 'line',
+      x1: '4',
+      x2: '20',
+      y1: '20',
+      y2: '20',
+    }],
+    undo: [{ tag: 'path', d: 'M9 14 4 9l5-5' }, {
+      tag: 'path',
+      d: 'M4 9h10.5a5.5 5.5 0 0 1 5.5 5.5a5.5 5.5 0 0 1-5.5 5.5H11',
+    }],
+    users: [
+      { tag: 'path', d: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' },
+      { tag: 'path', d: 'M16 3.128a4 4 0 0 1 0 7.744' },
+      { tag: 'path', d: 'M22 21v-2a4 4 0 0 0-3-3.87' },
+      { tag: 'circle', cx: '9', cy: '7', r: '4' },
+    ],
+  })[props.name]
+)
 
-const dispatch = createDispatch(root)
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
 
-useComponentHost(controllerModule.default, {
-  root,
-  dispatch,
-  props,
-  state: { shapes },
-})
+function attribute(value: unknown): any {
+  if (
+    value === null || value === undefined || value === false
+    || (typeof value === 'object' && !Array.isArray(value))
+  ) return undefined
+  return value === true ? '' : text(value)
+}
+
+function list(value: unknown): any[] {
+  return Array.isArray(value) ? value : []
+}
 </script>
 
 <template>
-  <span data-component="ui-icon" aria-hidden="true" v-bind="$attrs" ref="root"><svg
+  <span data-component="ui-icon" aria-hidden="true" v-bind="$attrs"><svg
       viewBox="0 0 24 24"
       fill="none"
       stroke="currentColor"
@@ -55,24 +343,31 @@ useComponentHost(controllerModule.default, {
       stroke-linejoin="round"
       focusable="false"
     >
-      <g v-for="(shape, index) in shapes" :key="index">
-        <path v-if="shape.tag === 'path'" :d="shape.d"></path>
-        <circle v-if="shape.tag === 'circle'" :cx="shape.cx" :cy="shape.cy" :r="shape.r"></circle>
+      <g v-for="(shape, index) in list(shapes)" :key="index">
+        <path v-if="shape.tag === 'path'" :d="attribute(shape.d)"></path>
+        <circle
+          v-if="shape.tag === 'circle'"
+          :cx="attribute(shape.cx)"
+          :cy="attribute(shape.cy)"
+          :r="attribute(shape.r)"
+        >
+        </circle>
         <rect
           v-if="shape.tag === 'rect'"
-          :x="shape.x"
-          :y="shape.y"
-          :width="shape.width"
-          :height="shape.height"
-          :rx="shape.rx"
+          :x="attribute(shape.x)"
+          :y="attribute(shape.y)"
+          :width="attribute(shape.width)"
+          :height="attribute(shape.height)"
+          :rx="attribute(shape.rx)"
+          :ry="attribute(shape.ry)"
         >
         </rect>
         <line
           v-if="shape.tag === 'line'"
-          :x1="shape.x1"
-          :x2="shape.x2"
-          :y1="shape.y1"
-          :y2="shape.y2"
+          :x1="attribute(shape.x1)"
+          :y1="attribute(shape.y1)"
+          :x2="attribute(shape.x2)"
+          :y2="attribute(shape.y2)"
         >
         </line>
       </g>

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/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>;