@threadlabs/looma 0.13.6 → 0.14.1

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-description-list/ui-description-list.html

@@ -1,32 +1,77 @@
 <template component="ui-description-list">
   <defs>
-    <prop name="layout" type="rows | tiles" default="rows"
-    >rows sets each term beside its value, one per line, for a short summary; tiles sets each pair on its own bordered tile in a grid, term above value, for
-      figures and facts to scan.</prop>
+    <prop name="layout" type="rows | stacked | grid | tiles" default="rows"
+    >rows sets each term beside its value, one per line, for a short summary; stacked sets every term above its value, one pair per line, for a narrow space;
+      grid sets the pairs, term above value, in as many columns as fit, for facts to scan across; tiles sets each pair on its own bordered tile in a grid, for
+      figures to compare.</prop>
+    <prop name="columns" type="'2' | '3' | '4'"
+    >The most columns grid and tiles set on a wide list; a narrow list still drops to fewer. Left unset, they fit as many as the width allows.</prop>
+    <prop name="density" type="comfortable | compact" default="comfortable"
+    >How much room each pair takes. comfortable spaces the pairs apart to read; compact sets them close together, for facts inside other content such as a card
+      or a table's detail row.</prop>
   </defs>
   <dl><slot></slot></dl>
   <style>
     /* Named values: a term and what it is, for each item (ui-description-item). */
     /* Rows line every term up in one column and every value in the next, through subgrid. */
     :host {
+      --_gap: var(--ui-space-2);
+      --_gap-compact: var(--ui-space-1);
+      --_column-gap: var(--ui-space-6);
+      --_min: 10rem;
+      --_track: var(--_min);
+      --_tile-padding: var(--ui-space-3);
       display: grid;
       grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
-      gap: var(--ui-space-2) var(--ui-space-6);
+      gap: var(--_gap) var(--_column-gap);
       min-inline-size: 0;
       margin: 0;
     }
 
-    /* Tiles pass their shape to the items through private properties, which cross into each item. */
+    /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
+       private properties, which cross into each item. */
+    :host-state([layout="stacked"]),
+    :host-state([layout="grid"]),
     :host-state([layout="tiles"]) {
       --_ui-description-display: flex;
       --_ui-description-column: auto;
+      --_ui-description-align: stretch;
+      --_gap: var(--ui-space-4);
+      --_gap-compact: var(--ui-space-2);
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    /* A column is at least --_min wide; with columns set, at least its share of the width, so no more
+       than that many fit. */
+    :host-state([layout="grid"]),
+    :host-state([layout="tiles"]) {
+      grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
+    }
+
+    :host-state([layout="tiles"]) {
       --_ui-description-align: flex-start;
       --_ui-description-value-size: var(--ui-font-size-lg);
-      --_ui-description-padding: var(--ui-space-3);
+      --_ui-description-padding: var(--_tile-padding);
       --_ui-description-border-width: 1px;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
-      gap: var(--ui-space-3);
+      --_gap: var(--ui-space-3);
+      --_gap-compact: var(--ui-space-2);
+      --_column-gap: var(--_gap);
+    }
+
+    :host-state([columns="2"]) {
+      --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
+    }
+    :host-state([columns="3"]) {
+      --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
+    }
+    :host-state([columns="4"]) {
+      --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
+    }
+
+    /* Compact takes each layout's closer spacing. */
+    :host-state([density="compact"]) {
+      --_gap: var(--_gap-compact);
+      --_tile-padding: var(--ui-space-2);
     }
 
     /* A component that sets its display still honours the hidden attribute on its root. */

package/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-table/ui-table.html

@@ -0,0 +1,131 @@
+<template component="ui-table" controller="./ui-table.js">
+  <defs>
+    <prop name="density" type="comfortable | compact" default="comfortable"
+    >How tall each row is. Every row is at least one control tall, so a row holding a control lines up with the rows around it. comfortable fits a control of
+      the standard height (2.5rem), for tables read or edited at a glance; compact fits a small one (2rem), such as a Checkbox or a Button with size="sm", for
+      long tables to scan.</prop>
+    <prop name="stickyHeader" type="boolean" default="false"
+    >Keeps the header row in view while the rows scroll beneath it. The table scrolls inside its own box, so this needs a bounded height, such as a table that
+      fills a fixed-height panel.</prop>
+  </defs>
+  <div><slot></slot></div>
+  <style>
+    /* Styles an authored <table> (caption, thead, tbody, th scope) without replacing it: the table is
+       meaningful before JavaScript, and a screen reader reads it as a table. The root scrolls a table
+       wider than it, or taller than a bounded height; while it does, the controller makes the root a named, focusable region so a
+       keyboard can scroll it. A cell's data-ui-align (start, center, or end; start by default) sets its
+       content along the row, such as end for a column of figures. */
+    :host {
+      --_pad-block: var(--ui-space-1);
+      --_pad-inline: var(--ui-space-3);
+      --_row-size: var(--ui-control-size);
+      display: block;
+      box-sizing: border-box;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      min-block-size: 0;
+      overflow: auto;
+      overscroll-behavior-inline: contain;
+      /* The sideways scroll fade every Looma scroller uses (see ui-scroll-area). Only the inline edges
+         fade, so a sticky header never fades. */
+      --_ui-scroll-fade-direction: to right;
+      --_ui-scroll-fade-size: var(--ui-scroll-fade-size, 24px);
+      mask-image: linear-gradient(
+        var(--_ui-scroll-fade-direction),
+        transparent,
+        #000 var(--_ui-scroll-fade-start),
+        #000 calc(100% - var(--_ui-scroll-fade-end)),
+        transparent
+      );
+      animation: ui-scroll-fade-start linear, ui-scroll-fade-start-hold linear, ui-scroll-fade-end-hold linear, ui-scroll-fade-end linear;
+      animation-timeline: scroll(self inline);
+      animation-range:
+        0 var(--_ui-scroll-fade-size),
+        var(--_ui-scroll-fade-size) calc(100% + 1px),
+        -1px calc(100% - var(--_ui-scroll-fade-size)),
+        calc(100% - var(--_ui-scroll-fade-size)) 100%;
+    }
+
+    :host:dir(rtl) {
+      --_ui-scroll-fade-direction: to left;
+    }
+
+    :host:focus-visible {
+      outline: 2px solid var(--ui-focus-ring);
+      outline-offset: -2px;
+    }
+
+    :host-state([density="compact"]) {
+      --_pad-block: var(--ui-space-0-5);
+      --_pad-inline: var(--ui-space-2);
+      --_row-size: var(--ui-control-size-sm);
+    }
+
+    /* Separate borders stay on their cells when a sticky header scrolls; collapsed ones stay behind. */
+    :slotted(table) {
+      inline-size: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      color: var(--ui-text-primary);
+      font-size: var(--ui-font-size-sm);
+      line-height: var(--ui-line-height);
+      font-variant-numeric: tabular-nums;
+    }
+
+    :slotted(caption) {
+      padding-block-end: var(--ui-space-2);
+      color: var(--ui-text-secondary);
+      font-weight: var(--ui-font-medium);
+      text-align: start;
+    }
+
+    /* Every row is at least one control tall, so a row holding a checkbox, select, or input keeps the
+       rhythm of the rows around it. A cell's height is its minimum. */
+    :slotted(th),
+    :slotted(td) {
+      block-size: var(--_row-size);
+      padding: var(--_pad-block) var(--_pad-inline);
+      border-block-end: 1px solid var(--ui-border-subtle);
+      text-align: start;
+      vertical-align: middle;
+    }
+
+    :slotted(thead th) {
+      block-size: auto;
+      padding-block: var(--ui-space-2);
+      border-block-end-color: var(--ui-border-default);
+      background: var(--ui-surface);
+      color: var(--ui-text-muted);
+      font-weight: var(--ui-font-medium);
+      white-space: nowrap;
+      vertical-align: bottom;
+    }
+
+    :slotted(tbody th) {
+      font-weight: var(--ui-font-medium);
+    }
+
+    :slotted(tbody tr:last-child > *) {
+      border-block-end-width: 0;
+    }
+
+    :slotted([data-ui-align="center"]) {
+      text-align: center;
+    }
+
+    :slotted([data-ui-align="end"]) {
+      text-align: end;
+    }
+
+    :host-state([stickyHeader]) :slotted(thead th) {
+      position: sticky;
+      inset-block-start: 0;
+      z-index: 1;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-table/ui-table.js

@@ -0,0 +1,55 @@
+// While the table is wider than the root, or taller than a root of bounded height, the root scrolls
+// it: it becomes a region a keyboard can focus and scroll with the arrow keys, named by the table's caption unless the author named it. When
+// the table fits, the root is plain again, so it is not an empty stop in the tab order.
+let captions = 0;
+
+export default function controller(host) {
+  const element = host.element;
+  const authored = element.hasAttribute("tabindex") || element.hasAttribute("role");
+  if (authored) return undefined;
+
+  // What this controller set, so a table moved or re-inserted starts plain and is judged again.
+  let region = false;
+  let labelled = false;
+  const plain = () => {
+    if (region) {
+      element.removeAttribute("role");
+      element.removeAttribute("tabindex");
+    }
+    if (labelled) element.removeAttribute("aria-labelledby");
+    region = labelled = false;
+  };
+  const update = () => {
+    const scrolls = element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
+    if (!scrolls) return plain();
+    element.setAttribute("role", "region");
+    element.setAttribute("tabindex", "0");
+    region = true;
+    const caption = element.querySelector(":scope > table > caption");
+    if (caption && !element.hasAttribute("aria-label") && !element.hasAttribute("aria-labelledby")) {
+      caption.id ||= `ui-table-caption-${++captions}`;
+      element.setAttribute("aria-labelledby", caption.id);
+      labelled = true;
+    }
+  };
+
+  const resize = new ResizeObserver(update);
+  const observe = () => {
+    resize.disconnect();
+    resize.observe(element);
+    for (const child of element.children) resize.observe(child);
+  };
+  // A table rendered or replaced later is observed too.
+  const children = new MutationObserver(() => {
+    observe();
+    update();
+  });
+  children.observe(element, { childList: true });
+  observe();
+  update();
+  return () => {
+    resize.disconnect();
+    children.disconnect();
+    plain();
+  };
+}

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;