@threadlabs/looma 0.14.8 → 0.15.1

package/components/ui-menu-item/ui-menu-item.js

@@ -0,0 +1,47 @@
+function radioScope(item) {
+  return item.closest('[role="group"]') ?? item.closest('[role="menu"]');
+}
+
+export default function controller(host) {
+  const item = host.element;
+  let external = Boolean(host.state.checked);
+  host.state.internalChecked = external;
+
+  const setChecked = (checked, trigger, announce) => {
+    if (Boolean(host.state.internalChecked) === checked) return;
+    host.state.internalChecked = checked;
+    if (announce) host.dispatch("change", { checked, value: String(host.state.value ?? ""), type: String(host.state.type), trigger });
+  };
+  const clearOtherRadios = (trigger, announce) => {
+    const scope = radioScope(item);
+    if (!scope) return;
+    for (const other of scope.querySelectorAll('[role="menuitemradio"]')) {
+      if (other === item || radioScope(other) !== scope) continue;
+      other.dispatchEvent(new CustomEvent("ui-menu-item-clear", { detail: { trigger, announce } }));
+    }
+  };
+  const onActivate = (event) => {
+    const type = String(host.state.type);
+    if (host.state.disabled || type === "action") return;
+    const checked = type === "radio" ? true : !host.state.internalChecked;
+    if (type === "radio") clearOtherRadios(event.detail.trigger, true);
+    setChecked(checked, event.detail.trigger, true);
+    event.detail.checked = checked;
+  };
+  const onClear = (event) => setChecked(false, event.detail.trigger, event.detail.announce);
+  const stop = host.effect(() => {
+    const checked = Boolean(host.state.checked);
+    if (checked === external) return;
+    external = checked;
+    if (checked && host.state.type === "radio") clearOtherRadios("programmatic", false);
+    setChecked(checked, "programmatic", false);
+  });
+  item.addEventListener("ui-menu-item-activate", onActivate);
+  item.addEventListener("ui-menu-item-clear", onClear);
+  if (external && host.state.type === "radio") queueMicrotask(() => clearOtherRadios("programmatic", false));
+  return () => {
+    stop();
+    item.removeEventListener("ui-menu-item-activate", onActivate);
+    item.removeEventListener("ui-menu-item-clear", onClear);
+  };
+}

package/components/ui-popover/ui-popover.html

@@ -2,7 +2,11 @@
   <defs>
     <prop name="open" type="boolean" default="false">Whether the popover is open initially or when set externally.</prop>
     <prop name="for" type="string" default="">ID of the control that toggles and anchors the popover.</prop>
-    <prop name="placement" type="string" default="bottom-start">Positions the surface relative to its trigger.</prop>
+    <prop
+      name="placement"
+      type="top | top-start | top-end | bottom | bottom-start | bottom-end | left | left-start | left-end | right | right-start | right-end"
+      default="bottom-start"
+    >Positions the surface around its trigger. Start and end on top or bottom follow the writing direction.</prop>
     <state name="internalOpen" :value="false"></state>
     <event
       name="open"
@@ -16,12 +20,36 @@
   <span><div class="surface"><slot></slot></div></span>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-popover-surface {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-radius {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-popover-shadow {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-popover-viewport-gap {
       syntax: "*";
       inherits: false;
     }
+    @property --ui-popover-offset {
+      syntax: "*";
+      inherits: false;
+    }
 
     :host {
+      --_ui-popover-surface: var(--ui-popover-surface);
+      --_ui-popover-border: var(--ui-popover-border);
+      --_ui-popover-radius: var(--ui-popover-radius);
+      --_ui-popover-shadow: var(--ui-popover-shadow);
       box-sizing: border-box;
       max-inline-size: min(
         20rem,
@@ -43,10 +71,10 @@
       max-block-size: inherit;
       overflow: auto;
       padding: var(--ui-space-3);
-      background: var(--ui-surface-elevated);
-      border: 1px solid var(--ui-border-default);
-      border-radius: var(--ui-radius-lg);
-      box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
+      background: var(--_ui-popover-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--_ui-popover-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-popover-radius, var(--ui-overlay-radius, var(--ui-radius-lg)));
+      box-shadow: var(--_ui-popover-shadow, var(--ui-overlay-shadow, var(--ui-elevation-overlay, var(--ui-shadow-lg))));
     }
 
     :host:not(:host-state([internalOpen])) {

package/components/ui-popover/ui-popover.js

@@ -3,6 +3,14 @@ import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, req
 export default function controller(host) {
   const element = host.element;
   const document = element.ownerDocument;
+  const offset = () => {
+    const value = getComputedStyle(element).getPropertyValue("--ui-popover-offset").trim();
+    const amount = Number.parseFloat(value);
+    if (!Number.isFinite(amount)) return 4;
+    if (value.endsWith("rem")) return amount * Number.parseFloat(getComputedStyle(document.documentElement).fontSize);
+    if (value.endsWith("em")) return amount * Number.parseFloat(getComputedStyle(element).fontSize);
+    return amount;
+  };
   const overlayId = `ui-popover-${Math.random().toString(36).slice(2, 11)}`;
   let anchor = null;
   let surface = null;
@@ -39,7 +47,7 @@ export default function controller(host) {
     anchor?.removeEventListener("click", onAnchorClick);
     anchor = ids.get(nextFor);
     anchor?.addEventListener("click", onAnchorClick);
-    surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement }) : null;
+    surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement, gap: offset }) : null;
   };
   const apply = () => {
     const externalOpen = Boolean(host.state.open);

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

@@ -16,16 +16,24 @@
     <prop name="required" type="boolean" default="false"
     >Makes a choice required, as a required native radio does for its group: the group states aria-required, every radio in it is marked required, and native
       form validation fails until one is checked.</prop>
+    <prop name="invalid" type="boolean" default="false"
+    >Exposes an externally validated error on the group and styles its legend with the field danger colour.</prop>
     <state name="internalValue" :value="''"></state>
     <event name="select" type="object({ value: string, previousValue: string, trigger: keyboard | pointer | programmatic })"></event>
     <event name="change" type="object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })"></event>
   </defs>
-  <fieldset role="radiogroup" :aria-required="required" :disabled="disabled">
+  <fieldset role="radiogroup" :aria-required="required" :aria-invalid="invalid" :disabled="disabled">
     <legend><template $value="label"></template></legend>
     <slot></slot>
   </fieldset>
   <style>
+    @property --ui-radio-group-invalid-text {
+      syntax: "*";
+      inherits: false;
+    }
+
     :host {
+      --_ui-radio-group-invalid-text: var(--ui-radio-group-invalid-text, var(--ui-field-danger, var(--ui-danger-solid)));
       display: inline-flex;
       align-items: center;
       gap: var(--ui-space-2);
@@ -48,6 +56,10 @@
       clear: both;
     }
 
+    :host-state([invalid]) legend {
+      color: var(--_ui-radio-group-invalid-text);
+    }
+
     :host-state([orientation="vertical"]) {
       display: inline-grid;
       justify-items: start;

package/components/ui-search-shell/ui-search-shell.html

@@ -2,7 +2,7 @@
   <defs>
     <prop name="open" type="boolean" default="false">Shows the search surface.</prop>
     <prop name="modal" type="boolean" default="false">Makes the rest of the page inert while the search surface is open.</prop>
-    <prop name="dismissible" type="boolean" default="false">Allows Escape and backdrop activation to close the search surface.</prop>
+    <prop name="dismissible" type="boolean" default="false">Allows backdrop activation to close the search surface. Escape always closes it.</prop>
     <prop name="label" type="string" default="Search">Provides the native dialog's accessible name.</prop>
     <state name="internalOpen" :value="false"></state>
     <event
@@ -109,10 +109,10 @@
       max-block-size: var(--_ui-search-shell-max-height, 80vh);
       margin-inline: auto;
       overflow: hidden;
-      background: var(--_ui-search-shell-surface, var(--ui-surface-elevated));
-      border: 1px solid var(--_ui-search-shell-border, var(--ui-border-default));
-      border-radius: var(--_ui-search-shell-radius, var(--ui-radius-dialog));
-      box-shadow: var(--_ui-search-shell-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl)));
+      background: var(--_ui-search-shell-surface, var(--ui-overlay-surface, var(--ui-surface-elevated)));
+      border: 1px solid var(--_ui-search-shell-border, var(--ui-overlay-border, var(--ui-border-default)));
+      border-radius: var(--_ui-search-shell-radius, var(--ui-overlay-radius, var(--ui-radius-dialog)));
+      box-shadow: var(--_ui-search-shell-shadow, var(--ui-overlay-shadow, var(--ui-elevation-dialog, var(--ui-shadow-xl))));
     }
 
     .search {
@@ -133,7 +133,7 @@
       min-block-size: var(--ui-control-min-block-size);
       padding: var(--ui-space-2) var(--ui-space-3);
       border: 1px solid var(--ui-control-border);
-      border-radius: var(--ui-radius-md);
+      border-radius: var(--ui-field-radius, var(--ui-radius-md));
       background: var(--ui-control-surface);
       color: var(--ui-text-primary);
       font: inherit;

package/components/ui-search-shell/ui-search-shell.js

@@ -38,14 +38,30 @@ export default function controller(host) {
 
   const onCancel = (event) => {
     event.preventDefault();
-    if (host.state.dismissible) dispatchClose("escape", "keyboard");
+    dispatchClose("escape", "keyboard");
   };
-  // A search field spends the first Escape clearing itself and the dialog never sees a cancel,
-  // so a dismissible shell closes on Escape from anywhere inside it.
+  const resultRows = () => Array.from(dialog.querySelectorAll(".body button[aria-current]"))
+    .filter((row) => !row.disabled && !row.hidden && !row.closest("[hidden]"));
+  // A search field can spend Escape clearing itself before the native dialog sees a cancel.
   const onKeydown = (event) => {
-    if (event.key !== "Escape" || event.defaultPrevented || !host.state.dismissible) return;
+    if (event.defaultPrevented) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      dispatchClose("escape", "keyboard");
+      return;
+    }
+    if (!["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) return;
+    const rows = resultRows();
+    if (!rows.length) return;
+    const target = event.target;
+    const fromSearch = target.closest?.(".search") && target.matches?.("input, [role='searchbox'], [role='combobox']");
+    const index = rows.indexOf(target.closest?.(".body button[aria-current]"));
+    if (!fromSearch && index < 0) return;
     event.preventDefault();
-    dispatchClose("escape", "keyboard");
+    if (event.key === "Home") rows[0].focus();
+    else if (event.key === "End") rows.at(-1).focus();
+    else if (event.key === "ArrowDown") rows[fromSearch ? 0 : (index + 1) % rows.length].focus();
+    else rows[fromSearch ? rows.length - 1 : (index - 1 + rows.length) % rows.length].focus();
   };
   const onClick = (event) => {
     if (host.state.dismissible && event.target === dialog) dispatchClose("light-dismiss", trigger());

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

@@ -19,6 +19,14 @@
       syntax: "*";
       inherits: false;
     }
+    @property --ui-select-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-select-invalid-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-select-radius {
       syntax: "*";
       inherits: false;
@@ -37,7 +45,7 @@
       margin: 0;
       padding: var(--ui-space-2) var(--ui-space-3);
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-select-radius, var(--ui-radius-md));
+      border-radius: var(--ui-select-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background-color: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
       color-scheme: light dark;
@@ -77,13 +85,15 @@
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :host[aria-invalid="true"],
     :host:user-invalid {
-      border-color: var(--ui-danger-solid);
+      border-color: var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
     }
 
     :host:is([aria-invalid="true"], :user-invalid):focus-visible {
-      box-shadow:
+      box-shadow: var(
+        --ui-select-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+        0 0 0 3px color-mix(in srgb, var(--ui-select-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+      );
     }
 
     :host:disabled {

package/components/ui-switch/ui-switch.html

@@ -83,7 +83,7 @@
       height: var(--_ui-switch-track-height, 1.5rem);
       padding: 0;
       border: 1px solid var(--ui-control-border-hover, var(--ui-border-strong));
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       background: var(--ui-control-surface, var(--ui-surface-default));
       box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ui-text-primary) 10%, transparent);
       cursor: pointer;
@@ -98,7 +98,7 @@
       left: 3px;
       width: 1rem;
       height: 1rem;
-      border-radius: 999px;
+      border-radius: var(--ui-radius-round);
       background: var(--ui-text-secondary);
       box-shadow: var(--ui-shadow-xs);
       transition: transform var(--ui-motion-fast) var(--ui-motion-ease);

package/components/ui-switcher/ui-switcher.html

@@ -1,4 +1,4 @@
-<template component="ui-switcher">
+<template component="ui-switcher" controller="./ui-switcher.js">
   <defs>
     <prop name="gap" type="xs | s | m | l | xl"
     >Space between items, on the spacing scale: xs is 0.5rem, s 0.75rem, m 1rem (also the default), l 1.5rem, and xl 2rem. The --ui-switcher-gap custom
@@ -9,6 +9,9 @@
     <prop name="align" type="start | center | end | stretch"
     >How items line up while they sit in a row: stretch (the default) makes them equally tall; start, center, and end align their tops, middles, or
       bottoms.</prop>
+    <prop name="limit" type="integer"
+    >Most children allowed in a horizontal row. When the count exceeds this value, every child stacks regardless of width. Omit it for no count limit.</prop>
+    <state name="overLimit" :value="false"></state>
   </defs>
   <div><slot></slot></div>
   <style>
@@ -42,6 +45,10 @@
       flex-basis: calc((var(--_ui-switcher-threshold, 30rem) - 100%) * 999);
     }
 
+    :host-state([overLimit]) > :slotted(*) {
+      flex-basis: 100%;
+    }
+
     :host-state([gap="xs"]) {
       --_switcher-gap: var(--ui-space-2);
     }

package/components/ui-switcher/ui-switcher.js

@@ -0,0 +1,15 @@
+/** Stack the group when the authored child count exceeds the optional row limit. */
+export default function controller(host) {
+  const element = host.element;
+  const update = () => {
+    const limit = Number(host.state.limit);
+    host.state.overLimit = Number.isFinite(limit) && limit >= 1 && element.children.length > Math.floor(limit);
+  };
+  const stop = host.effect(update);
+  const observer = new MutationObserver(update);
+  observer.observe(element, { childList: true });
+  return () => {
+    stop();
+    observer.disconnect();
+  };
+}

package/components/ui-tabs/ui-tabs.html

@@ -9,6 +9,9 @@
     <prop name="orientation" type="horizontal | vertical" default="horizontal"
     >horizontal puts the tabs in a row above the panels, moved between with the Left and Right arrow keys; vertical puts them in a column beside the panels,
       moved between with Up and Down.</prop>
+    <prop name="activation" type="auto | manual" default="auto"
+    >In auto mode, arrow keys move focus and select the next panel. In manual mode, arrows move focus while Enter or Space selects a panel. Use manual when
+      displaying a panel takes time.</prop>
     <prop name="stretch" type="boolean" default="false">Share the full width of the tab list equally between tabs instead of sizing each to its label.</prop>
     <state name="internalValue" :value="''"></state>
     <state name="tabs" type="list(object({ id: string, label: string }))" :value="[]"></state>
@@ -16,18 +19,20 @@
   </defs>
   <div>
     <div class="list" $ref="list" role="tablist" :aria-label="label" :aria-orientation="orientation">
-      <button
-        $each="tab of tabs"
-        $key="tab.id"
-        type="button"
-        role="tab"
-        :id="format('%s-tab', tab.id)"
-        :value="tab.id"
-        :aria-controls="tab.id"
-        :aria-selected="tab.id = internalValue"
-        $value="tab.label"
-      >
-      </button>
+      <slot name="tab">
+        <button
+          $each="tab of tabs"
+          $key="tab.id"
+          type="button"
+          role="tab"
+          :id="format('%s-tab', tab.id)"
+          :value="tab.id"
+          :aria-controls="tab.id"
+          :aria-selected="tab.id = internalValue"
+          $value="tab.label"
+        >
+        </button>
+      </slot>
     </div>
     <div class="panels" $ref="panels"><slot></slot></div>
   </div>

package/components/ui-tabs/ui-tabs.js

@@ -7,6 +7,11 @@ export default function controller(host) {
   const { list, panels: container } = host.refs;
   const [trigger, stopTracking] = trackTrigger(host);
   const panels = () => Array.from(container.children).filter((child) => child instanceof HTMLElement);
+  const tabButtons = () => Array.from(list.querySelectorAll("button"));
+  const focusTab = (button) => {
+    for (const tab of tabButtons()) tab.tabIndex = tab === button ? 0 : -1;
+    button.focus();
+  };
   let external = String(host.state.value || "");
   host.state.internalValue = external;
 
@@ -15,12 +20,29 @@ export default function controller(host) {
     host.state.tabs = items.map((panel, index) => {
       if (!panel.id) panel.id = `ui-tab-panel-${++panelIds}`;
       panel.setAttribute("role", "tabpanel");
-      panel.setAttribute("aria-labelledby", `${panel.id}-tab`);
       return { id: panel.id, label: panel.getAttribute("aria-label") || `Tab ${index + 1}` };
     });
     if (!items.some((panel) => panel.id === host.state.internalValue)) {
       host.state.internalValue = external || items[0]?.id || "";
     }
+    syncButtons();
+  };
+  const syncButtons = () => {
+    const buttons = tabButtons();
+    const selected = host.state.internalValue;
+    const focused = list.contains(host.element.ownerDocument.activeElement) ? host.element.ownerDocument.activeElement : null;
+    for (const [index, panel] of panels().entries()) {
+      const button = buttons.find((candidate) => candidate.value === panel.id) ?? buttons[index];
+      if (!button) continue;
+      button.type = "button";
+      button.value = panel.id;
+      button.setAttribute("role", "tab");
+      if (!button.id) button.id = `${panel.id}-tab`;
+      button.setAttribute("aria-controls", panel.id);
+      button.setAttribute("aria-selected", String(panel.id === selected));
+      button.tabIndex = button.disabled ? -1 : button === focused || (!focused && button.value === selected) ? 0 : -1;
+      panel.setAttribute("aria-labelledby", button.id);
+    }
   };
   const stop = host.effect(() => {
     const value = String(host.state.value || "");
@@ -31,7 +53,7 @@ export default function controller(host) {
     const selected = host.state.internalValue;
     for (const panel of panels()) panel.hidden = panel.id !== selected;
     // Roving focus: only the selected tab is in the tab order.
-    for (const button of list.querySelectorAll('[role="tab"]')) button.tabIndex = button.value === selected ? 0 : -1;
+    syncButtons();
   });
 
   const select = (button, how) => {
@@ -46,16 +68,25 @@ export default function controller(host) {
   const onKeydown = (event) => {
     const button = event.target.closest?.('[role="tab"]');
     if (!button || !list.contains(button)) return;
-    const buttons = Array.from(list.querySelectorAll('[role="tab"]'));
+    const buttons = tabButtons().filter((candidate) => !candidate.disabled);
     const vertical = host.state.orientation === "vertical";
     const previousKey = vertical ? "ArrowUp" : "ArrowLeft";
     const nextKey = vertical ? "ArrowDown" : "ArrowRight";
-    if (event.key !== previousKey && event.key !== nextKey) return;
+    if (host.state.activation === "manual" && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      select(button, "keyboard");
+      return;
+    }
+    if (event.key !== previousKey && event.key !== nextKey && event.key !== "Home" && event.key !== "End") return;
     event.preventDefault();
     const index = buttons.indexOf(button);
-    const next = buttons[(index + (event.key === nextKey ? 1 : buttons.length - 1)) % buttons.length];
-    select(next, "keyboard");
-    next.focus();
+    const next = event.key === "Home" ? buttons[0] : event.key === "End" ? buttons.at(-1) : buttons[(index + (event.key === nextKey ? 1 : buttons.length - 1)) % buttons.length];
+    if (host.state.activation !== "manual") select(next, "keyboard");
+    focusTab(next);
+  };
+  const onFocusout = (event) => {
+    if (list.contains(event.relatedTarget)) return;
+    for (const button of tabButtons()) button.tabIndex = button.value === host.state.internalValue ? 0 : -1;
   };
   // A vertical mouse wheel over an overflowing strip scrolls it sideways instead of the page.
   // Trackpad gestures already carry a horizontal delta and are left to the browser.
@@ -66,16 +97,21 @@ export default function controller(host) {
   };
   list.addEventListener("click", onClick);
   list.addEventListener("keydown", onKeydown);
+  list.addEventListener("focusout", onFocusout);
   list.addEventListener("wheel", onWheel, { passive: false });
   const observer = new MutationObserver(readPanels);
   observer.observe(container, { childList: true });
+  const tabObserver = new MutationObserver(syncButtons);
+  tabObserver.observe(list, { childList: true });
   readPanels();
   return () => {
     stop();
     stopTracking();
     observer.disconnect();
+    tabObserver.disconnect();
     list.removeEventListener("click", onClick);
     list.removeEventListener("keydown", onKeydown);
+    list.removeEventListener("focusout", onFocusout);
     list.removeEventListener("wheel", onWheel);
   };
 }

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

@@ -8,17 +8,28 @@
     <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="autosize" type="boolean" default="false"
+    >Grow with the text while keeping rows as the minimum visible height. Uses CSS field sizing where supported; other browsers keep the native rows
+      behavior.</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>
+  <textarea :value="value" :disabled="disabled" :readonly="readonly" :required="required" :aria-invalid="invalid" :rows="rows" style:--_rows="rows"></textarea>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
     @property --ui-textarea-focus-shadow {
       syntax: "*";
       inherits: false;
     }
+    @property --ui-textarea-invalid-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-invalid-focus-shadow {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-textarea-radius {
       syntax: "*";
       inherits: false;
@@ -35,11 +46,12 @@
       min-inline-size: 0;
       min-block-size: calc(3rem * 2);
       margin: 0;
+      --_padding-block: var(--ui-space-2);
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       resize: vertical;
       border: 1px solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-textarea-radius, var(--ui-radius-md));
+      border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
       background: var(--ui-control-surface, var(--ui-surface-elevated));
       color: var(--ui-text-primary);
       font: inherit;
@@ -75,13 +87,15 @@
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :host[aria-invalid="true"],
     :host:user-invalid {
-      border-color: var(--ui-danger-solid);
+      border-color: var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
     }
 
     :host:is([aria-invalid="true"], :user-invalid):focus-visible {
-      box-shadow:
+      box-shadow: var(
+        --ui-textarea-invalid-focus-shadow,
         var(--ui-control-inset),
-        0 0 0 3px color-mix(in srgb, var(--ui-danger-solid) 22%, transparent);
+        0 0 0 3px color-mix(in srgb, var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%, transparent)
+      );
     }
 
     :host:disabled {
@@ -92,15 +106,24 @@
     }
 
     :host-state([size="sm"]) {
+      --_padding-block: var(--ui-space-1);
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: var(--ui-font-size-sm);
     }
 
     :host-state([size="lg"]) {
+      --_padding-block: var(--ui-space-3);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
     }
 
+    @supports (field-sizing: content) {
+      :host-state([autosize]) {
+        field-sizing: content;
+        min-block-size: calc(var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
+      }
+    }
+
     /* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
     @media (pointer: coarse) {
       :host-state([size="sm"]) {