@threadlabs/looma 0.13.5 → 0.14.0

package/vue/components.css

@@ -398,7 +398,7 @@
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-icon"][data-v-0a5aa1a0] {
+[data-component~="ui-icon"][data-v-fdb8162b] {
   /* Hooks do not inherit, so the svg reads the stroke from the root. A Looma component that
      sizes the icons it renders sets --_ui-default-icon-*, which the icon's own hooks override. */
   --_ui-icon-stroke-width: var(--ui-icon-stroke-width, var(--_ui-default-icon-stroke-width));
@@ -408,14 +408,14 @@
   inline-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
   block-size: var(--ui-icon-size, var(--_ui-default-icon-size, 1em));
 }
-svg[data-v-0a5aa1a0] {
+svg[data-v-fdb8162b] {
   inline-size: 100%;
   block-size: 100%;
   stroke-width: var(--_ui-icon-stroke-width, 2);
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-icon"][hidden][data-v-0a5aa1a0] {
+[data-component~="ui-icon"][hidden][data-v-fdb8162b] {
   display: none;
 }
 
@@ -554,7 +554,7 @@ ol[data-v-ee3145b6] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-button"][data-v-a45835c7] {
+[data-component~="ui-button"][data-v-bd32a08d] {
   --_hue: var(--ui-accent);
   --_hue-hover: var(--ui-accent-hover);
   --_hue-active: var(--ui-accent-active);
@@ -573,15 +573,15 @@ ol[data-v-ee3145b6] {
   vertical-align: middle;
   color: var(--_tone-text);
 }
-[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="align=start"][data-v-bd32a08d] {
   justify-content: flex-start;
   text-align: start;
 }
-[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="stretch"][data-v-bd32a08d] {
   display: flex;
   inline-size: 100%;
 }
-[data-component~="ui-button"][data-v-a45835c7] {
+[data-component~="ui-button"][data-v-bd32a08d] {
   appearance: none;
   min-block-size: var(--ui-button-min-block-size, var(--ui-control-size-md));
   border-style: solid;
@@ -606,17 +606,17 @@ ol[data-v-ee3145b6] {
   margin: 0;
 }
 @supports (text-box-trim: trim-both) {
-[data-component~="ui-button"][data-v-a45835c7] {
+[data-component~="ui-button"][data-v-bd32a08d] {
     text-box-trim: trim-both;
     text-box-edge: cap alphabetic;
 }
 }
-[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-bd32a08d] {
   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-button"][data-ui-button-state~="size=lg"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="size=lg"][data-v-bd32a08d] {
   min-block-size: var(--ui-control-size-lg);
   padding: var(--ui-space-3) var(--ui-space-4);
   font-size: var(--ui-font-size-md);
@@ -624,29 +624,29 @@ ol[data-v-ee3145b6] {
 
 /* A link is never :enabled, so interactive states test "not unavailable" instead: for a button that
    is exactly :enabled, at the same specificity, and it also matches a link that can be followed. */
-[data-component~="ui-button"][data-v-a45835c7]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-bd32a08d]:hover:not(:disabled, [aria-disabled="true"]) {
   border-color: var(--ui-button-hover-border, var(--_tone-hover));
   background-color: var(--ui-button-hover-surface, oklch(from var(--_tone) l c h / 12%));
 }
 
 /* Pressed reads as pressed in: the highlight goes, and the shadow moves inside. */
-[data-component~="ui-button"][data-v-a45835c7]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-bd32a08d]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-active-surface, oklch(from var(--_tone) l c h / 18%));
   background-image: none;
   box-shadow: var(--ui-pressed);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-a45835c7],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-bd32a08d],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-bd32a08d] {
   border-color: var(--_tone);
   background-color: var(--_tone);
   color: var(--_on-tone);
   box-shadow: var(--ui-button-solid-shadow, var(--ui-raised));
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-a45835c7], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a45835c7]):hover:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-bd32a08d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-bd32a08d]):hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-hover);
   border-color: var(--_tone-hover);
 }
-:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-a45835c7], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a45835c7]):active:not(:disabled, [aria-disabled="true"]) {
+:is([data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-bd32a08d], [data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-bd32a08d]):active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--_tone-active);
   border-color: var(--_tone-active);
   background-image: none;
@@ -655,43 +655,43 @@ ol[data-v-ee3145b6] {
 
 /* Tone is the colour, variant is the volume. Every pairing works: a danger outline is a
    destructive secondary action, not a special case. */
-[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="tone=neutral"][data-v-bd32a08d] {
   --_hue: var(--ui-text);
   --_hue-hover: var(--ui-text);
   --_hue-active: var(--ui-text);
   --_hue-text: var(--ui-text);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-a45835c7],
-[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="tone=danger"][data-v-bd32a08d],
+[data-component~="ui-button"][data-ui-button-state~="variant=danger"][data-v-bd32a08d] {
   --_hue: var(--ui-danger);
   --_hue-hover: var(--ui-danger-hover);
   --_hue-active: var(--ui-danger-hover);
   --_hue-text: var(--ui-danger-hover);
   --_on-hue: var(--ui-on-danger);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="tone=success"][data-v-bd32a08d] {
   --_hue: var(--ui-success);
   --_hue-hover: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-success) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-success) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="tone=warning"][data-v-bd32a08d] {
   --_hue: var(--ui-warning);
   --_hue-hover: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-warning) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-warning) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="tone=info"][data-v-bd32a08d] {
   --_hue: var(--ui-info);
   --_hue-hover: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_hue-active: color-mix(in srgb, var(--ui-info) 75%, #000);
   --_hue-text: color-mix(in srgb, var(--ui-info) 85%, #000);
   --_on-hue: var(--ui-surface);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-bd32a08d] {
   border-color: transparent;
   background: transparent;
   box-shadow: none;
@@ -699,24 +699,24 @@ ol[data-v-ee3145b6] {
 }
 
 /* Tints derive from the text colour, not a surface token, so hover and press show on any background. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-a45835c7]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-bd32a08d]:hover:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-hover-surface, oklch(from var(--_tone) l c h / 10%));
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-a45835c7]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-bd32a08d]:active:not(:disabled, [aria-disabled="true"]) {
   background-color: var(--ui-button-ghost-active-surface, oklch(from var(--_tone) l c h / 16%));
   border-color: transparent;
   box-shadow: var(--ui-pressed);
 }
 
 /* A soft halo that transitions in with the other box-shadow changes, layered on the raised shadow. */
-[data-component~="ui-button"][data-v-a45835c7]:focus-visible {
+[data-component~="ui-button"][data-v-bd32a08d]:focus-visible {
   outline: none;
   box-shadow:
     var(--ui-button-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-a45835c7]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=solid"][data-v-bd32a08d]:focus-visible {
   box-shadow:
     var(--ui-button-solid-shadow, var(--ui-raised)),
     var(--ui-focus-halo);
@@ -727,7 +727,7 @@ ol[data-v-ee3145b6] {
    fill, border, and text together (--ui-disabled-filter), and the theme decides which way is
    toward the page. The highlight and shadow go, because nothing that cannot be pressed should
    look raised. */
-[data-component~="ui-button"][data-v-a45835c7]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-v-bd32a08d]:is(:disabled, [aria-disabled="true"]) {
   filter: var(--ui-button-disabled-filter, var(--ui-disabled-filter));
   opacity: var(--ui-button-disabled-opacity, 1);
   cursor: not-allowed;
@@ -739,12 +739,14 @@ ol[data-v-ee3145b6] {
    it takes a surface rather than reading as plain text. The surface is a wash of the faded tone,
    the way hover washes the live one, so it stays light in every tone. An opaque mix toward the
    hue came out a mid-grey slab for neutral, whose hue is the ink: louder than the enabled button. */
-[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-a45835c7]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=ghost"][data-v-bd32a08d]:is(:disabled, [aria-disabled="true"]) {
   background-color: oklch(from var(--_tone) l c h / 14%);
   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-v-a45835c7] {
+[data-component~="ui-button"][data-v-bd32a08d], [data-component~="ui-button"][data-ui-button-state~="size=sm"][data-v-bd32a08d] {
     min-block-size: var(--ui-control-min-block-size);
 }
 }
@@ -754,11 +756,11 @@ ol[data-v-ee3145b6] {
    a link-style one keeps its text size, so a standalone one ("See all" under a list) needs the
    area. Only the link needs it: a hit area on every button would reach over its neighbours. */
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a45835c7] {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-bd32a08d] {
   position: relative;
 }
 html[data-ui-input-modality="touch"]
-  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a45835c7]::after {
+  [data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-bd32a08d]::after {
   position: absolute;
   inset: 50% auto auto 50%;
   inline-size: max(100%, var(--ui-control-min-block-size));
@@ -769,7 +771,7 @@ html[data-ui-input-modality="touch"]
 
 /* Link: an inline text action. No box, padding, or minimum height (inline targets are exempt under
    WCAG 2.5.8); the inherited font; an underline that strengthens on hover; a visible focus ring. */
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a45835c7] {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-bd32a08d] {
   display: inline;
   min-block-size: 0;
   padding: 0;
@@ -787,21 +789,21 @@ html[data-ui-input-modality="touch"]
     color var(--ui-motion-fast) var(--ui-motion-ease),
     text-decoration-color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a45835c7]:hover:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-bd32a08d]:hover:not(:disabled, [aria-disabled="true"]) {
   color: var(--ui-button-link-hover-text, var(--ui-text-primary));
   text-decoration-color: currentColor;
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a45835c7]:active:not(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-bd32a08d]:active:not(:disabled, [aria-disabled="true"]) {
   background: none;
   transform: none;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a45835c7]:is(:disabled, [aria-disabled="true"]) {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-bd32a08d]:is(:disabled, [aria-disabled="true"]) {
   background: none;
   border-color: transparent;
 }
-[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-a45835c7]:focus-visible {
+[data-component~="ui-button"][data-ui-button-state~="variant=link"][data-v-bd32a08d]:focus-visible {
   box-shadow: none;
   /* Fallback keeps the ring if the token is missing: an unresolved var() would void the outline. */
   outline: 2px solid var(--ui-focus-ring);
@@ -809,7 +811,7 @@ html[data-ui-input-modality="touch"]
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-button"][hidden][data-v-a45835c7] {
+[data-component~="ui-button"][hidden][data-v-bd32a08d] {
   display: none;
 }
 
@@ -984,7 +986,7 @@ html[data-ui-input-modality="touch"]
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-checkbox"][data-v-e122df08] {
+[data-component~="ui-checkbox"][data-v-bfcc98e1] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-checkbox-size: var(--ui-checkbox-size);
 
@@ -997,25 +999,25 @@ html[data-ui-input-modality="touch"]
 }
 
 /* The label, and under it an optional line saying what the choice means. */
-.text[data-v-e122df08] {
+.text[data-v-bfcc98e1] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-1);
   min-inline-size: 0;
 }
-.label[data-v-e122df08] {
+.label[data-v-bfcc98e1] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-.description[data-v-e122df08] {
+.description[data-v-bfcc98e1] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-.description[data-v-e122df08]:empty {
+.description[data-v-bfcc98e1]:empty {
   display: none;
 }
-input[data-v-e122df08] {
+input[data-v-bfcc98e1] {
   appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -1033,20 +1035,20 @@ input[data-v-e122df08] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-input[data-v-e122df08]::after {
+input[data-v-bfcc98e1]::after {
   content: "";
   position: absolute;
   opacity: 0;
 }
-input[data-v-e122df08]:checked,
-input[data-v-e122df08]:indeterminate {
+input[data-v-bfcc98e1]:checked,
+input[data-v-bfcc98e1]:indeterminate {
   border-color: var(--ui-accent-solid);
   background: var(--ui-accent-solid);
   box-shadow: inset 0 1px 2px color-mix(in srgb, #000 16%, transparent);
 }
 
 /* Centre the tick's box, then lift it: a rotated L's ink sits ~0.11rem below its box centre. */
-input[data-v-e122df08]:checked::after {
+input[data-v-bfcc98e1]:checked::after {
   inset: 0;
   margin: auto;
   inline-size: 0.32rem;
@@ -1059,7 +1061,7 @@ input[data-v-e122df08]:checked::after {
   opacity: 1;
   transform: translateY(-0.11rem) rotate(45deg);
 }
-input[data-v-e122df08]:indeterminate::after {
+input[data-v-bfcc98e1]:indeterminate::after {
   inset: 50% 0.23rem auto;
   block-size: 0.125rem;
   border-radius: var(--ui-radius-round);
@@ -1067,25 +1069,52 @@ input[data-v-e122df08]:indeterminate::after {
   opacity: 1;
   transform: translateY(-50%);
 }
-input[data-v-e122df08]:hover:enabled {
+input[data-v-bfcc98e1]:hover:enabled {
   border-color: var(--ui-accent-solid);
 }
-input[data-v-e122df08]:focus-visible {
+input[data-v-bfcc98e1]:focus-visible {
   outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
   outline-offset: 2px;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-e122df08] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"][data-v-bfcc98e1] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-e122df08] {
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="disabled"] input[data-v-bfcc98e1] {
   border-color: var(--ui-border-default);
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   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"][data-v-bfcc98e1] {
+  --_font: var(--ui-font-size-sm);
+  --_row: var(--ui-control-size-sm);
+}
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-bfcc98e1] {
+  --_font: var(--ui-font-size-md);
+  --_row: var(--ui-control-size-lg);
+}
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=sm"][data-v-bfcc98e1],
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"][data-v-bfcc98e1] {
+  --_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-v-bfcc98e1],
+[data-component~="ui-checkbox"][data-ui-checkbox-state~="size=lg"] input[data-v-bfcc98e1] {
+  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"][data-v-bfcc98e1] {
+    --_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][data-v-e122df08] {
+[data-component~="ui-checkbox"][hidden][data-v-bfcc98e1] {
   display: none;
 }
 
@@ -1327,7 +1356,7 @@ input[data-v-e122df08]:focus-visible {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-combobox"][data-v-1482f333] {
+[data-component~="ui-combobox"][data-v-fd4a871f] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-combobox-label-text: var(--ui-combobox-label-text);
   --_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
@@ -1346,20 +1375,20 @@ input[data-v-e122df08]:focus-visible {
   color: var(--ui-text-primary);
   font: inherit;
 }
-label[data-v-1482f333] {
+label[data-v-fd4a871f] {
   color: var(--_ui-combobox-label-text, var(--ui-text-primary));
   font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
   font-weight: 500;
 }
 /* The field and anything that annotates it sit on one row; the help button is beside the box,
    not inside it, because a control's box holds its value. */
-.control[data-v-1482f333] {
+.control[data-v-fd4a871f] {
   display: flex;
   align-items: center;
   gap: var(--ui-space-2);
   min-inline-size: 0;
 }
-.field[data-v-1482f333] {
+.field[data-v-fd4a871f] {
   flex: 1 1 auto;
   display: flex;
   min-inline-size: 0;
@@ -1371,14 +1400,14 @@ label[data-v-1482f333] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.field[data-v-1482f333]:focus-within {
+.field[data-v-fd4a871f]:focus-within {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
 /* A ghost icon button: the affordance is the mark, not a box around it. */
-.help[data-v-1482f333] {
+.help[data-v-fd4a871f] {
   flex: none;
   display: inline-flex;
   align-items: center;
@@ -1395,28 +1424,28 @@ label[data-v-1482f333] {
     background-color var(--ui-motion-fast) var(--ui-motion-ease),
     color var(--ui-motion-fast) var(--ui-motion-ease);
 }
-.help[data-v-1482f333]:hover:enabled,
-.help[aria-expanded="true"][data-v-1482f333] {
+.help[data-v-fd4a871f]:hover:enabled,
+.help[aria-expanded="true"][data-v-fd4a871f] {
   background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--ui-text-primary);
 }
-.help[data-v-1482f333]:focus-visible {
+.help[data-v-fd4a871f]:focus-visible {
   outline: none;
   box-shadow: var(--ui-focus-halo);
 }
-.help[data-v-1482f333]:disabled {
+.help[data-v-fd4a871f]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.help-icon[data-v-1482f333] {
+.help-icon[data-v-fd4a871f] {
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-input[data-v-1482f333]::selection {
+input[data-v-fd4a871f]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-input[data-v-1482f333] {
+input[data-v-fd4a871f] {
   appearance: none;
   width: 100%;
   min-inline-size: 0;
@@ -1432,11 +1461,20 @@ input[data-v-1482f333] {
   margin: 0;
   outline: none;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-1482f333] {
-  min-block-size: calc(var(--ui-control-size-sm) - 2px);
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-fd4a871f] {
+  --_row: var(--ui-control-size-sm);
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-fd4a871f] {
+  min-block-size: calc(var(--_row) - 2px);
   padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
 }
-button[data-v-1482f333] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-fd4a871f] {
+  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[data-v-fd4a871f] {
   appearance: none;
   display: inline-grid;
   place-items: center;
@@ -1451,31 +1489,31 @@ button[data-v-1482f333] {
   padding: 0 var(--ui-space-1);
   cursor: pointer;
 }
-.affordance-icon[data-v-1482f333] {
+.affordance-icon[data-v-fd4a871f] {
   display: block;
   inline-size: var(--ui-icon-size-sm);
   block-size: var(--ui-icon-size-sm);
 }
-button[data-v-1482f333]:hover:enabled {
+button[data-v-fd4a871f]:hover:enabled {
   background: var(--ui-surface-muted);
   color: var(--ui-text-primary);
 }
-button[data-v-1482f333]:focus-visible {
+button[data-v-fd4a871f]:focus-visible {
   outline: none;
   background: var(--ui-surface-muted);
   box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
 }
-input[data-v-1482f333]:disabled, button[data-v-1482f333]:disabled {
+input[data-v-fd4a871f]:disabled, button[data-v-fd4a871f]:disabled {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.field[data-v-1482f333]:has(input:disabled) {
+.field[data-v-fd4a871f]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-1482f333] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-fd4a871f] {
   border-color: var(--ui-danger-solid, var(--ui-accent-active));
 }
-.popup[data-v-1482f333] {
+.popup[data-v-fd4a871f] {
   box-sizing: border-box;
   min-inline-size: 12rem;
   max-inline-size: calc(100vw - 1rem);
@@ -1489,40 +1527,40 @@ input[data-v-1482f333]:disabled, button[data-v-1482f333]:disabled {
   color: var(--ui-text-primary);
   box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
 }
-[hidden][data-v-1482f333] {
+[hidden][data-v-fd4a871f] {
   display: none;
 }
-.option[data-v-1482f333] {
+.option[data-v-fd4a871f] {
   padding: var(--ui-space-2) var(--ui-space-3);
   border-radius: var(--ui-radius-sm);
   cursor: pointer;
   overflow-wrap: anywhere;
 }
-.option[data-v-1482f333]:hover, .option.active[data-v-1482f333] {
+.option[data-v-fd4a871f]:hover, .option.active[data-v-fd4a871f] {
   background: var(--ui-surface-muted);
   outline: 1px solid var(--ui-focus-ring);
   outline-offset: -1px;
 }
-.option[aria-disabled="true"][data-v-1482f333] {
+.option[aria-disabled="true"][data-v-fd4a871f] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-.primary[data-v-1482f333] {
+.primary[data-v-fd4a871f] {
   display: block;
   color: var(--_ui-combobox-option-text, var(--ui-text-primary));
   font-weight: 500;
 }
-.message[data-v-1482f333], .group[data-v-1482f333] {
+.message[data-v-fd4a871f], .group[data-v-fd4a871f] {
   color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
   font-weight: 400;
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-md);
   overflow-wrap: anywhere;
 }
-.group[data-v-1482f333], .popup .message[data-v-1482f333] {
+.group[data-v-fd4a871f], .popup .message[data-v-fd4a871f] {
   padding: var(--ui-space-2) var(--ui-space-3);
 }
-.sr-only[data-v-1482f333] {
+.sr-only[data-v-fd4a871f] {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
@@ -1531,16 +1569,24 @@ input[data-v-1482f333]:disabled, button[data-v-1482f333]:disabled {
   white-space: nowrap;
 }
 @media (pointer: coarse) {
-button[data-v-1482f333] {
+button[data-v-fd4a871f] {
     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"][data-v-fd4a871f] {
+    --_row: var(--ui-control-min-block-size);
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-fd4a871f] {
+    font-size: inherit;
 }
 }
 @media (forced-colors: active) {
-.field[data-v-1482f333], .popup[data-v-1482f333] {
+.field[data-v-fd4a871f], .popup[data-v-fd4a871f] {
     border-color: CanvasText;
 }
-.option.active[data-v-1482f333] {
+.option.active[data-v-fd4a871f] {
     outline-color: Highlight;
 }
 }
@@ -1548,12 +1594,12 @@ button[data-v-1482f333] {
 /* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
    before anything is picked. aria-selected is the state; this draws it.
    Longhands, not shorthands: lowering drops a shorthand that omits a component. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-1482f333] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-fd4a871f] {
   display: flex;
   gap: var(--ui-space-2);
   align-items: center;
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-1482f333]::before {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-fd4a871f]::before {
   content: "";
   flex: none;
   inline-size: 1.125rem;
@@ -1568,7 +1614,7 @@ button[data-v-1482f333] {
   background-size: 0.7rem;
 }
 [data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
-  .option[aria-selected="true"][data-v-1482f333]::before {
+  .option[aria-selected="true"][data-v-fd4a871f]::before {
   border-color: var(--ui-accent-solid);
   background-color: var(--ui-accent-solid);
   background-image: var(
@@ -1578,20 +1624,40 @@ button[data-v-1482f333] {
 }
 
 /* Multiple mode: chips wrap before the cursor on one flexible field line. */
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-1482f333] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-fd4a871f] {
   flex-wrap: wrap;
   align-items: center;
   gap: var(--ui-space-1);
   min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
   padding: var(--ui-space-1);
 }
-[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-1482f333] {
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-fd4a871f] {
   flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
   width: auto;
   min-block-size: 1.75rem;
   padding: var(--ui-space-0-5) var(--ui-space-1);
 }
-.item[data-v-1482f333] {
+/* 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[data-v-fd4a871f] {
+  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[data-v-fd4a871f] {
+  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[data-v-fd4a871f] {
+  min-block-size: 0;
+}
+[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
+  input[data-v-fd4a871f] {
+  min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
+}
+.item[data-v-fd4a871f] {
   appearance: none;
   display: inline-flex;
   min-inline-size: 0;
@@ -1605,16 +1671,16 @@ button[data-v-1482f333] {
   font: inherit;
   cursor: default;
 }
-.item[data-v-1482f333]:focus-visible {
+.item[data-v-fd4a871f]:focus-visible {
   outline: 2px solid var(--ui-focus-ring);
   outline-offset: 1px;
 }
-.item[data-v-1482f333]:disabled {
+.item[data-v-fd4a871f]:disabled {
   opacity: 0.6;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-combobox"][hidden][data-v-1482f333] {
+[data-component~="ui-combobox"][hidden][data-v-fd4a871f] {
   display: none;
 }
 
@@ -3722,7 +3788,7 @@ svg[data-v-006fa1b2-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-input"][data-v-e1edefb2] {
+[data-component~="ui-input"][data-v-4ba095d3] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -3754,22 +3820,52 @@ svg[data-v-006fa1b2-s] {
     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"][data-v-4ba095d3] {
+  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"][data-v-4ba095d3] {
+  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"][data-v-4ba095d3] {
+    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"][data-v-e1edefb2]::selection {
+[data-component~="ui-input"][data-v-4ba095d3]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-input"][data-v-e1edefb2]::placeholder {
+[data-component~="ui-input"][data-v-4ba095d3]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-input"][data-v-e1edefb2]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-input"][data-v-4ba095d3]:hover:not(:focus):not(:disabled) {
   border-color: var(
     --ui-input-border-hover,
     var(--_ui-default-input-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary)))
   );
 }
-[data-component~="ui-input"][data-v-e1edefb2]:focus-visible {
+[data-component~="ui-input"][data-v-4ba095d3]:focus-visible {
   border-color: var(
     --ui-input-focus-border,
     var(--_ui-default-input-focus-border, var(--ui-control-focus, var(--ui-accent-solid)))
@@ -3786,14 +3882,14 @@ svg[data-v-006fa1b2-s] {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-input"][aria-invalid="true"][data-v-e1edefb2],
-[data-component~="ui-input"][data-v-e1edefb2]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-input"][aria-invalid="true"][data-v-4ba095d3],
+[data-component~="ui-input"][data-v-4ba095d3]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(
     --ui-input-invalid-border,
     var(--_ui-default-input-invalid-border, var(--ui-danger-solid))
   );
 }
-[data-component~="ui-input"][data-v-e1edefb2]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-input"][data-v-4ba095d3]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow: var(
     --ui-input-invalid-focus-shadow,
     var(
@@ -3803,7 +3899,7 @@ svg[data-v-006fa1b2-s] {
     )
   );
 }
-[data-component~="ui-input"][data-v-e1edefb2]:disabled {
+[data-component~="ui-input"][data-v-4ba095d3]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-disabled-text);
   box-shadow: none;
@@ -3812,7 +3908,7 @@ svg[data-v-006fa1b2-s] {
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-[data-component~="ui-input"][data-v-e1edefb2]:focus-visible {
+[data-component~="ui-input"][data-v-4ba095d3]:focus-visible {
     outline: var(
       --ui-input-focus-outline,
       var(--_ui-default-input-focus-outline, 2px solid Highlight)
@@ -3825,7 +3921,7 @@ svg[data-v-006fa1b2-s] {
  * scroll vertically inside the field. Native inputs already center their single line. */
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input"][hidden][data-v-e1edefb2] {
+[data-component~="ui-input"][hidden][data-v-4ba095d3] {
   display: none;
 }
 
@@ -3837,7 +3933,7 @@ svg[data-v-006fa1b2-s] {
        whole value is. The action slot takes one button at the end, inside the border, for the one
        thing the field is for ("Continue" after a site's address), so it reads as the field's action
        and not the form's. */
-[data-component~="ui-input-group"][data-v-d57b2ead] {
+[data-component~="ui-input-group"][data-v-26a5b56d] {
   /* The group's own border and height stand for the input's, so the group is a lone Input's height.
      Hooks do not inherit, so these are defaults for the input; its own hooks still win. */
   --_ui-default-input-border-width: 0;
@@ -3871,22 +3967,35 @@ svg[data-v-006fa1b2-s] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease),
     box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
 }
-[data-component~="ui-input-group"][data-v-d57b2ead]:hover:not(:has(input:focus, input:disabled)) {
+
+/* The frame takes its input's size, so a small group lines up with small buttons and fields. */
+[data-component~="ui-input-group"][data-v-26a5b56d]:has(.field [data-ui-input-state~="size=sm"]) {
+  min-block-size: var(--ui-control-size-sm);
+}
+[data-component~="ui-input-group"][data-v-26a5b56d]:has(.field [data-ui-input-state~="size=lg"]) {
+  min-block-size: var(--ui-control-size-lg);
+}
+@media (pointer: coarse) {
+[data-component~="ui-input-group"][data-v-26a5b56d]:has(.field [data-ui-input-state~="size=sm"]) {
+    min-block-size: var(--ui-control-min-block-size);
+}
+}
+[data-component~="ui-input-group"][data-v-26a5b56d]:hover:not(:has(input:focus, input:disabled)) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
 
 /* The ring shows when the field's input would show its own: when it is focus-visible, which a
    text input is for a pointer as well as a keyboard. A focused action button draws its own. */
-[data-component~="ui-input-group"][data-v-d57b2ead]:has(.field input:focus-visible) {
+[data-component~="ui-input-group"][data-v-26a5b56d]:has(.field input:focus-visible) {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   box-shadow:
     var(--ui-control-inset),
     var(--ui-control-focus-halo-shadow);
 }
-[data-component~="ui-input-group"][data-v-d57b2ead]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
+[data-component~="ui-input-group"][data-v-26a5b56d]:has([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])) {
   border-color: var(--ui-danger-solid);
 }
-[data-component~="ui-input-group"][data-v-d57b2ead]:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
+[data-component~="ui-input-group"][data-v-26a5b56d]:has(input:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible) {
   box-shadow:
     var(--ui-control-inset),
     0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
@@ -3894,23 +4003,23 @@ svg[data-v-006fa1b2-s] {
 
 /* Forced colors drop box shadows, so the focus ring becomes an outline. */
 @media (forced-colors: active) {
-[data-component~="ui-input-group"][data-v-d57b2ead]:has(input:focus-visible) {
+[data-component~="ui-input-group"][data-v-26a5b56d]:has(input:focus-visible) {
     outline: 2px solid Highlight;
     outline-offset: 1px;
 }
 }
-[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-d57b2ead],
-[data-component~="ui-input-group"][data-v-d57b2ead]:has(input:disabled) {
+[data-component~="ui-input-group"][data-ui-input-group-state~="disabled"][data-v-26a5b56d],
+[data-component~="ui-input-group"][data-v-26a5b56d]:has(input:disabled) {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   box-shadow: none;
   cursor: not-allowed;
 }
-.field[data-v-d57b2ead] {
+.field[data-v-26a5b56d] {
   display: flex;
   flex: 1;
   min-inline-size: 0;
 }
-.affix[data-v-d57b2ead] {
+.affix[data-v-26a5b56d] {
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -3923,19 +4032,19 @@ svg[data-v-006fa1b2-s] {
 
 /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
    small button sits inside it with the difference split evenly, and the field keeps its height. */
-.action[data-v-d57b2ead] {
+.action[data-v-26a5b56d] {
   display: flex;
   flex: none;
   align-items: center;
   padding-inline: var(--ui-space-1);
 }
-.affix[data-v-d57b2ead]:empty,
-.action[data-v-d57b2ead]:empty {
+.affix[data-v-26a5b56d]:empty,
+.action[data-v-26a5b56d]:empty {
   display: none;
 }
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-input-group"][hidden][data-v-d57b2ead] {
+[data-component~="ui-input-group"][hidden][data-v-26a5b56d] {
   display: none;
 }
 
@@ -4561,7 +4670,7 @@ svg[data-v-006fa1b2-s] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-radio"][data-v-293c00d6] {
+[data-component~="ui-radio"][data-v-02111ebf] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-radio-size: var(--ui-radio-size);
 
@@ -4574,25 +4683,25 @@ svg[data-v-006fa1b2-s] {
 }
 
 /* The label, and under it an optional line saying what the choice means. */
-.text[data-v-293c00d6] {
+.text[data-v-02111ebf] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-1);
   min-inline-size: 0;
 }
-.label[data-v-293c00d6] {
+.label[data-v-02111ebf] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-.description[data-v-293c00d6] {
+.description[data-v-02111ebf] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-.description[data-v-293c00d6]:empty {
+.description[data-v-02111ebf]:empty {
   display: none;
 }
-input[data-v-293c00d6] {
+input[data-v-02111ebf] {
   flex: 0 0 auto;
   inline-size: var(--_ui-radio-size, 1.125rem);
   block-size: var(--_ui-radio-size, 1.125rem);
@@ -4600,20 +4709,47 @@ input[data-v-293c00d6] {
   accent-color: var(--ui-accent-solid);
   cursor: pointer;
 }
-input[data-v-293c00d6]:focus-visible {
+input[data-v-02111ebf]:focus-visible {
   outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
   outline-offset: 2px;
 }
-[data-component~="ui-radio"][data-ui-radio-state~="disabled"][data-v-293c00d6] {
+[data-component~="ui-radio"][data-ui-radio-state~="disabled"][data-v-02111ebf] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-radio"][data-ui-radio-state~="disabled"] input[data-v-293c00d6] {
+[data-component~="ui-radio"][data-ui-radio-state~="disabled"] input[data-v-02111ebf] {
   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"][data-v-02111ebf] {
+  --_font: var(--ui-font-size-sm);
+  --_row: var(--ui-control-size-sm);
+}
+[data-component~="ui-radio"][data-ui-radio-state~="size=lg"][data-v-02111ebf] {
+  --_font: var(--ui-font-size-md);
+  --_row: var(--ui-control-size-lg);
+}
+[data-component~="ui-radio"][data-ui-radio-state~="size=sm"][data-v-02111ebf],
+[data-component~="ui-radio"][data-ui-radio-state~="size=lg"][data-v-02111ebf] {
+  --_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-v-02111ebf],
+[data-component~="ui-radio"][data-ui-radio-state~="size=lg"] input[data-v-02111ebf] {
+  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"][data-v-02111ebf] {
+    --_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][data-v-293c00d6] {
+[data-component~="ui-radio"][hidden][data-v-02111ebf] {
   display: none;
 }
 
@@ -5178,7 +5314,7 @@ dialog[data-v-40145d41] {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-select"][data-v-57618b8b] {
+[data-component~="ui-select"][data-v-c81ec3d9] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -5202,7 +5338,7 @@ dialog[data-v-40145d41] {
 
 /* The select draws its own chevron: the native caret cannot be inset or sized consistently.
  * The root stays a native <s-lect>, so the icon is a background image rather than an element. */
-[data-component~="ui-select"][data-v-57618b8b] {
+[data-component~="ui-select"][data-v-c81ec3d9] {
   appearance: none;
   padding-inline-end: calc(var(--ui-space-3) + 1.5rem);
   background-image: var(
@@ -5213,10 +5349,10 @@ dialog[data-v-40145d41] {
   background-position: right var(--ui-space-3) center;
   background-size: 1.125rem 1.125rem;
 }
-[data-component~="ui-select"][data-v-57618b8b]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-select"][data-v-c81ec3d9]:hover:not(:focus):not(:disabled) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
-[data-component~="ui-select"][data-v-57618b8b]:focus-visible {
+[data-component~="ui-select"][data-v-c81ec3d9]:focus-visible {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   outline: none;
   box-shadow: var(
@@ -5227,28 +5363,48 @@ dialog[data-v-40145d41] {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-select"][aria-invalid="true"][data-v-57618b8b],
-[data-component~="ui-select"][data-v-57618b8b]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-select"][aria-invalid="true"][data-v-c81ec3d9],
+[data-component~="ui-select"][data-v-c81ec3d9]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-danger-solid);
 }
-[data-component~="ui-select"][data-v-57618b8b]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-select"][data-v-c81ec3d9]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow:
     var(--ui-control-inset),
     0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
 }
-[data-component~="ui-select"][data-v-57618b8b]:disabled {
+[data-component~="ui-select"][data-v-c81ec3d9]:disabled {
   background-color: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }
-[data-component~="ui-select"][size][data-v-57618b8b]:not([size="1"]) {
-  min-block-size: 7rem;
-  padding: var(--ui-space-2);
+[data-component~="ui-select"][data-ui-select-state~="size=sm"][data-v-c81ec3d9] {
+  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"][data-v-c81ec3d9] {
+  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"][data-v-c81ec3d9] {
+    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. */
-[data-component~="ui-select"][hidden][data-v-57618b8b] {
+[data-component~="ui-select"][hidden][data-v-c81ec3d9] {
   display: none;
 }
 
@@ -5606,7 +5762,7 @@ to {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-switch"][data-v-98e06e1e] {
+[data-component~="ui-switch"][data-v-87fc218c] {
   /* Hooks do not inherit, so the parts below read them from the root. */
   --_ui-switch-track-width: var(--ui-switch-track-width);
   --_ui-switch-track-height: var(--ui-switch-track-height);
@@ -5620,25 +5776,25 @@ to {
 }
 
 /* The label, and under it an optional line saying what the choice means. */
-.text[data-v-98e06e1e] {
+.text[data-v-87fc218c] {
   display: flex;
   flex-direction: column;
   gap: var(--ui-space-1);
   min-inline-size: 0;
 }
-.label[data-v-98e06e1e] {
+.label[data-v-87fc218c] {
   min-inline-size: 0;
   line-height: var(--ui-line-height-md);
 }
-.description[data-v-98e06e1e] {
+.description[data-v-87fc218c] {
   color: var(--ui-text-secondary);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height);
 }
-.description[data-v-98e06e1e]:empty {
+.description[data-v-87fc218c]:empty {
   display: none;
 }
-input[data-v-98e06e1e] {
+input[data-v-87fc218c] {
   appearance: none;
   -webkit-appearance: none;
   position: relative;
@@ -5656,7 +5812,7 @@ input[data-v-98e06e1e] {
     border-color var(--ui-motion-fast) var(--ui-motion-ease);
   margin: 0;
 }
-input[data-v-98e06e1e]::after {
+input[data-v-87fc218c]::after {
   content: "";
   position: absolute;
   top: 3px;
@@ -5668,35 +5824,64 @@ input[data-v-98e06e1e]::after {
   box-shadow: var(--ui-shadow-xs);
   transition: transform var(--ui-motion-fast) var(--ui-motion-ease);
 }
-input[data-v-98e06e1e]:checked {
+input[data-v-87fc218c]:checked {
   background: var(--ui-accent-solid);
   border-color: var(--ui-accent-solid);
 }
-input[data-v-98e06e1e]:checked::after {
+input[data-v-87fc218c]:checked::after {
   transform: translateX(1rem);
   background: var(--ui-text-on-accent);
 }
-input[data-v-98e06e1e]:focus-visible {
+input[data-v-87fc218c]:focus-visible {
   outline: 2px solid var(--ui-focus-ring, var(--ui-accent-solid));
   outline-offset: 2px;
 }
-[data-component~="ui-switch"][data-ui-switch-state~="disabled"][data-v-98e06e1e] {
+[data-component~="ui-switch"][data-ui-switch-state~="disabled"][data-v-87fc218c] {
   color: var(--ui-disabled-text);
   cursor: not-allowed;
 }
-[data-component~="ui-switch"][data-ui-switch-state~="disabled"] input[data-v-98e06e1e] {
+[data-component~="ui-switch"][data-ui-switch-state~="disabled"] input[data-v-87fc218c] {
   border-color: var(--ui-border-default);
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   cursor: not-allowed;
 }
 @media (prefers-reduced-motion: reduce) {
-input[data-v-98e06e1e], input[data-v-98e06e1e]::after {
+input[data-v-87fc218c], input[data-v-87fc218c]::after {
     transition: none;
 }
 }
 
+/* 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"][data-v-87fc218c] {
+  --_font: var(--ui-font-size-sm);
+  --_row: var(--ui-control-size-sm);
+}
+[data-component~="ui-switch"][data-ui-switch-state~="size=lg"][data-v-87fc218c] {
+  --_font: var(--ui-font-size-md);
+  --_row: var(--ui-control-size-lg);
+}
+[data-component~="ui-switch"][data-ui-switch-state~="size=sm"][data-v-87fc218c],
+[data-component~="ui-switch"][data-ui-switch-state~="size=lg"][data-v-87fc218c] {
+  --_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-v-87fc218c],
+[data-component~="ui-switch"][data-ui-switch-state~="size=lg"] .text[data-v-87fc218c] {
+  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"][data-v-87fc218c] {
+    --_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][data-v-98e06e1e] {
+[data-component~="ui-switch"][hidden][data-v-87fc218c] {
   display: none;
 }
 
@@ -5999,7 +6184,7 @@ input[data-v-98e06e1e], input[data-v-98e06e1e]::after {
   syntax: "*";
   inherits: false;
 }
-[data-component~="ui-textarea"][data-v-73461aaf] {
+[data-component~="ui-textarea"][data-v-00f7b2fd] {
   box-sizing: border-box;
   display: inline-block;
   inline-size: 100%;
@@ -6023,18 +6208,18 @@ input[data-v-98e06e1e], input[data-v-98e06e1e]::after {
 }
 
 /* Tabbing into a field selects its text; tint that selection softly instead of the page highlight. */
-[data-component~="ui-textarea"][data-v-73461aaf]::selection {
+[data-component~="ui-textarea"][data-v-00f7b2fd]::selection {
   background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
   color: inherit;
 }
-[data-component~="ui-textarea"][data-v-73461aaf]::placeholder {
+[data-component~="ui-textarea"][data-v-00f7b2fd]::placeholder {
   color: var(--ui-control-placeholder, var(--ui-text-secondary));
   opacity: 1;
 }
-[data-component~="ui-textarea"][data-v-73461aaf]:hover:not(:focus):not(:disabled) {
+[data-component~="ui-textarea"][data-v-00f7b2fd]:hover:not(:focus):not(:disabled) {
   border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
 }
-[data-component~="ui-textarea"][data-v-73461aaf]:focus-visible {
+[data-component~="ui-textarea"][data-v-00f7b2fd]:focus-visible {
   border-color: var(--ui-control-focus, var(--ui-accent-solid));
   outline: none;
   box-shadow: var(
@@ -6045,24 +6230,39 @@ input[data-v-98e06e1e], input[data-v-98e06e1e]::after {
 }
 
 /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
-[data-component~="ui-textarea"][aria-invalid="true"][data-v-73461aaf],
-[data-component~="ui-textarea"][data-v-73461aaf]:is(:user-invalid, [data-user-invalid]) {
+[data-component~="ui-textarea"][aria-invalid="true"][data-v-00f7b2fd],
+[data-component~="ui-textarea"][data-v-00f7b2fd]:is(:user-invalid, [data-user-invalid]) {
   border-color: var(--ui-danger-solid);
 }
-[data-component~="ui-textarea"][data-v-73461aaf]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
+[data-component~="ui-textarea"][data-v-00f7b2fd]:is([aria-invalid="true"], :is(:user-invalid, [data-user-invalid])):focus-visible {
   box-shadow:
     var(--ui-control-inset),
     0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
 }
-[data-component~="ui-textarea"][data-v-73461aaf]:disabled {
+[data-component~="ui-textarea"][data-v-00f7b2fd]:disabled {
   background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
   color: var(--ui-disabled-text);
   box-shadow: none;
   cursor: not-allowed;
 }
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"][data-v-00f7b2fd] {
+  padding: var(--ui-space-1) var(--ui-space-2);
+  font-size: var(--ui-font-size-sm);
+}
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=lg"][data-v-00f7b2fd] {
+  padding: var(--ui-space-3) var(--ui-space-4);
+  font-size: var(--ui-font-size-md);
+}
+
+/* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
+@media (pointer: coarse) {
+[data-component~="ui-textarea"][data-ui-textarea-state~="size=sm"][data-v-00f7b2fd] {
+    font-size: inherit;
+}
+}
 
 /* A component that sets its display still honours the hidden attribute on its root. */
-[data-component~="ui-textarea"][hidden][data-v-73461aaf] {
+[data-component~="ui-textarea"][hidden][data-v-00f7b2fd] {
   display: none;
 }