@threadlabs/looma 0.13.6 → 0.14.0

package/components/ui-button/ui-button.html

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

package/components/ui-checkbox/ui-checkbox.html

@@ -14,6 +14,10 @@
     <prop name="value" type="string" default="on"
     >The value a form submits under name while the checkbox is checked, also reported in the change event's detail so one handler can tell checkboxes apart. on
       by default, as on a native checkbox.</prop>
+    <prop name="size" type="sm | md | lg" default="md"
+    >Aligns the checkbox with fields and buttons of the same size. It keeps its box size; the label takes that size's field type size and its first line centres
+      in that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text
+      baseline. Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.</prop>
     <state name="internalChecked" :value="false"></state>
     <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
   </defs>
@@ -154,6 +158,37 @@
       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. */
+    :host-state([size="sm"]) {
+      --_font: var(--ui-font-size-sm);
+      --_row: var(--ui-control-size-sm);
+    }
+
+    :host-state([size="lg"]) {
+      --_font: var(--ui-font-size-md);
+      --_row: var(--ui-control-size-lg);
+    }
+
+    :host-state([size="sm"]),
+    :host-state([size="lg"]) {
+      --_line: calc(var(--_font) * var(--ui-line-height-md));
+      font-size: var(--_font);
+      padding-block: calc((var(--_row) - var(--_line)) / 2);
+    }
+
+    :host-state([size="sm"]) input,
+    :host-state([size="lg"]) input {
+      margin-top: calc((var(--_line) - var(--_ui-checkbox-size, 1.125rem)) / 2);
+    }
+
+    @media (pointer: coarse) {
+      :host-state([size="sm"]) {
+        --_row: var(--ui-control-min-block-size);
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

package/components/ui-combobox/ui-combobox.html

@@ -44,8 +44,10 @@
     <prop name="required" type="boolean" default="false"
     >Requires a value: adds an asterisk to the label, marks the input required for native form validation, and makes validation report "A value is required."
       when the field is left empty. In multiple mode a chosen item satisfies it, whatever is left in the input.</prop>
-    <prop name="size" type="sm | md" default="md"
-    >Field height. md is the standard control height; sm is the small control height with tighter padding, for dense forms.</prop>
+    <prop name="size" type="sm | md | lg" default="md"
+    >Field height, padding, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by
+      default) with smaller text, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller with roomier padding.
+      Under a coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. The label keeps its size.</prop>
     <prop name="labelVisibility" type="visible | sr-only" default="visible"
     >visible shows the label above the field; sr-only hides it visually but keeps it as the input's accessible name. Use sr-only only when the surrounding
       layout already makes the field's purpose clear.</prop>
@@ -395,9 +397,18 @@
       margin: 0;
       outline: none;
     }
+    :host-state([size="sm"]) {
+      --_row: var(--ui-control-size-sm);
+    }
     :host-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);
+    }
+    :host-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;
@@ -498,6 +509,14 @@
         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. */
+      :host-state([size="sm"]) {
+        --_row: var(--ui-control-min-block-size);
+      }
+      :host-state([size="sm"]) input {
+        font-size: inherit;
+      }
     }
     @media (forced-colors: active) {
       .field, .popup {
@@ -555,6 +574,22 @@
       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. */
+    :host-state([multiple]):host-state([size="sm"]) .field {
+      min-block-size: 0;
+      padding: var(--ui-space-0-5);
+    }
+    :host-state([multiple]):host-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. */
+    :host-state([multiple]):host-state([size="lg"]) .field {
+      min-block-size: 0;
+    }
+    :host-state([multiple]):host-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/components/ui-input/ui-input.html

@@ -7,6 +7,11 @@
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
     <prop name="readonly" type="boolean" default="false">Allows selection without allowing edits.</prop>
     <prop name="required" type="boolean" default="false">Marks the control as required for form validation.</prop>
+    <prop name="size" type="sm | md | lg" default="md"
+    >Height, padding, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by default)
+      with smaller text, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller with roomier padding. Under a
+      coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. Change it after render through this option; the element's size property is
+      the native one.</prop>
   </defs>
   <input :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid">
   <style>
@@ -84,6 +89,28 @@
         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. */
+    :host-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);
+    }
+
+    :host-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) {
+      :host-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. */
     :host::selection {
       background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);

package/components/ui-input-group/ui-input-group.html

@@ -50,6 +50,21 @@
       transition: border-color var(--ui-motion-fast) var(--ui-motion-ease), 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. */
+    :host:has(.field [data-ui-input-state~="size=sm"]) {
+      min-block-size: var(--ui-control-size-sm);
+    }
+
+    :host:has(.field [data-ui-input-state~="size=lg"]) {
+      min-block-size: var(--ui-control-size-lg);
+    }
+
+    @media (pointer: coarse) {
+      :host:has(.field [data-ui-input-state~="size=sm"]) {
+        min-block-size: var(--ui-control-min-block-size);
+      }
+    }
+
     :host:hover:not(:has(input:focus, input:disabled)) {
       border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
     }

package/components/ui-radio/ui-radio.html

@@ -12,6 +12,10 @@
     <prop name="value" type="string" default="on"
     >The value this radio stands for: submitted with a form, reported in its change event, and matched against a ui-radio-group's value to decide which radio is
       checked.</prop>
+    <prop name="size" type="sm | md | lg" default="md"
+    >Aligns the radio with fields and buttons of the same size. It keeps its box size; the label takes that size's field type size and its first line centres in
+      that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text baseline.
+      Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.</prop>
     <state name="internalChecked" :value="false"></state>
     <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
   </defs>
@@ -90,6 +94,37 @@
       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. */
+    :host-state([size="sm"]) {
+      --_font: var(--ui-font-size-sm);
+      --_row: var(--ui-control-size-sm);
+    }
+
+    :host-state([size="lg"]) {
+      --_font: var(--ui-font-size-md);
+      --_row: var(--ui-control-size-lg);
+    }
+
+    :host-state([size="sm"]),
+    :host-state([size="lg"]) {
+      --_line: calc(var(--_font) * var(--ui-line-height-md));
+      font-size: var(--_font);
+      padding-block: calc((var(--_row) - var(--_line)) / 2);
+    }
+
+    :host-state([size="sm"]) input,
+    :host-state([size="lg"]) input {
+      margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2);
+    }
+
+    @media (pointer: coarse) {
+      :host-state([size="sm"]) {
+        --_row: var(--ui-control-min-block-size);
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

package/components/ui-select/ui-select.html

@@ -6,6 +6,11 @@
     <prop name="disabled" type="boolean" default="false">Prevents selection and form submission.</prop>
     <prop name="invalid" type="boolean" default="false">Exposes invalid state to assistive technology and styling.</prop>
     <prop name="required" type="boolean" default="false">Requires a non-empty option for form validation.</prop>
+    <prop name="size" type="sm | md | lg" default="md"
+    >Height, padding, chevron, and type size, matching Button's sizes so a field and a button of one size share a row. sm is the small control height (2rem by
+      default) with smaller text and a smaller chevron, for compact rows such as a table row or a filter bar; md is the standard control height; lg is taller
+      with roomier padding. Under a coarse pointer, sm grows to the 44px touch minimum and keeps body-size text. It is not the native size attribute: a select
+      is always a single-choice dropdown. Change it after render through this option; the element's size property is the native one.</prop>
   </defs>
   <select :disabled="disabled" :required="required" :aria-invalid="invalid"><slot></slot></select>
   <style>
@@ -88,9 +93,30 @@
       cursor: not-allowed;
     }
 
-    :host[size]:not([size="1"]) {
-      min-block-size: 7rem;
-      padding: var(--ui-space-2);
+    :host-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);
+    }
+
+    :host-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) {
+      :host-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/components/ui-switch/ui-switch.html

@@ -9,6 +9,10 @@
     <prop name="value" type="string" default="on"
     >The value a form submits under name while the switch is on, also reported in the change event's detail so one handler can tell switches apart. on by
       default, as on a native checkbox.</prop>
+    <prop name="size" type="sm | md | lg" default="md"
+    >Aligns the switch with fields and buttons of the same size. It keeps its track size; the label takes that size's field type size and its first line centres
+      in that control height (sm 2rem, lg 3rem by default), so in a row of inputs, selects, and buttons of one size it shares their height and their text
+      baseline. Under a coarse pointer an sm row grows to the 44px touch minimum, as they do. md is the standard layout.</prop>
     <state name="internalChecked" :value="false"></state>
     <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
   </defs>
@@ -131,6 +135,38 @@
       }
     }
 
+    /* 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. */
+    :host-state([size="sm"]) {
+      --_font: var(--ui-font-size-sm);
+      --_row: var(--ui-control-size-sm);
+    }
+
+    :host-state([size="lg"]) {
+      --_font: var(--ui-font-size-md);
+      --_row: var(--ui-control-size-lg);
+    }
+
+    :host-state([size="sm"]),
+    :host-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. */
+    :host-state([size="sm"]) .text,
+    :host-state([size="lg"]) .text {
+      margin-top: calc((var(--_ui-switch-track-height, 1.5rem) - var(--_line)) / 2);
+    }
+
+    @media (pointer: coarse) {
+      :host-state([size="sm"]) {
+        --_row: var(--ui-control-min-block-size);
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;

package/components/ui-textarea/ui-textarea.html

@@ -8,6 +8,9 @@
     <prop name="readonly" type="boolean" default="false">Allows selection without allowing edits.</prop>
     <prop name="required" type="boolean" default="false">Marks the control as required for form validation.</prop>
     <prop name="rows" type="integer" default="4">Initial number of visible text rows.</prop>
+    <prop name="size" type="sm | md | lg" default="md"
+    >Padding and type size, matching Input's sizes so a textarea sits with fields of the same size; rows sets its height. sm has tighter padding and smaller
+      text, for compact forms; lg has roomier padding. Under a coarse pointer, sm keeps body-size text.</prop>
   </defs>
   <textarea :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid" :rows="rows"></textarea>
   <style>
@@ -88,6 +91,23 @@
       cursor: not-allowed;
     }
 
+    :host-state([size="sm"]) {
+      padding: var(--ui-space-1) var(--ui-space-2);
+      font-size: var(--ui-font-size-sm);
+    }
+
+    :host-state([size="lg"]) {
+      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) {
+      :host-state([size="sm"]) {
+        font-size: inherit;
+      }
+    }
+
     /* A component that sets its display still honours the hidden attribute on its root. */
     :host[hidden] {
       display: none;