@threadlabs/looma 0.24.1 → 0.25.1

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

@@ -1,5 +1,6 @@
 <template component="ui-input-group" controller="./ui-input-group.js">
   <defs>
+    <prop name="multiline" type="boolean" default="false">Groups a Textarea with an action below its text inside the shared frame.</prop>
     <prop name="prefixKind" type="keyword" values="text, icon" default="text"
     >Text affixes have their own framing. An icon prefix shares the field surface and uses one compact icon-to-value gap.</prop>
     <prop name="disabled" type="boolean" default="false">Fades the group's framing to match a disabled input inside it. Disable the input itself too.</prop>
@@ -46,6 +47,17 @@
       --_ui-default-input-focus-outline: none;
       --_ui-default-input-radius: 0;
       --_ui-default-input-surface: transparent;
+      --_ui-default-textarea-border-width: 0;
+      --_ui-default-textarea-border: transparent;
+      --_ui-default-textarea-border-hover: transparent;
+      --_ui-default-textarea-focus-border: transparent;
+      --_ui-default-textarea-invalid-border: transparent;
+      --_ui-default-textarea-invalid-focus-shadow: none;
+      --_ui-default-textarea-shadow: none;
+      --_ui-default-textarea-focus-shadow: none;
+      --_ui-default-textarea-focus-outline: none;
+      --_ui-default-textarea-radius: 0;
+      --_ui-default-textarea-surface: transparent;
 
       display: flex;
       align-items: stretch;
@@ -79,13 +91,13 @@
       }
     }
 
-    :host:hover:not(:has(input:focus, input:disabled, input:read-only, [aria-invalid="true"], :user-invalid)) {
+    :host:hover:not(:has(:is(input, textarea):focus, :is(input, textarea):disabled, :is(input, textarea):read-only, [aria-invalid="true"], :user-invalid)) {
       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. */
-    :host:has(.field input:focus-visible) {
+    :host:has(.field :is(input, textarea):focus-visible) {
       border-color: var(--ui-control-focus, var(--ui-accent-solid));
       box-shadow:
         var(--ui-control-inset),
@@ -96,7 +108,7 @@
       border-color: var(--ui-input-group-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
     }
 
-    :host:has(input:is([aria-invalid="true"], :user-invalid):focus-visible) {
+    :host:has(:is(input, textarea):is([aria-invalid="true"], :user-invalid):focus-visible) {
       box-shadow: var(
         --ui-input-group-invalid-focus-shadow,
         var(--ui-control-inset),
@@ -110,14 +122,14 @@
 
     /* Forced colors drop box shadows, so the focus ring becomes an outline. */
     @media (forced-colors: active) {
-      :host:has(input:focus-visible) {
+      :host:has(:is(input, textarea):focus-visible) {
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: var(--ui-border-width);
       }
     }
 
-    :host-state([disabled]),
-    :host:has(input:disabled) {
+    :host([disabled]),
+    :host:has(:is(input, textarea):disabled) {
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
       box-shadow: none;
       cursor: not-allowed;
@@ -154,10 +166,10 @@
       border-inline-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
-    :host-state([prefixKind="icon"]) {
+    :host([prefixKind="icon"]) {
       --_ui-default-input-padding-inline-start: var(--ui-space-2);
     }
-    :host-state([prefixKind="icon"]) .affix:first-child {
+    :host([prefixKind="icon"]) .affix:first-child {
       padding-inline-end: 0;
       border-inline-end: 0;
       background: transparent;
@@ -172,6 +184,23 @@
       padding-inline: var(--ui-space-1);
     }
 
+    /* Multiline text owns the first row; its action remains inside the same frame below it. */
+    :host([multiline]) {
+      display: grid;
+      grid-template-columns: auto minmax(0, 1fr) auto;
+    }
+
+    :host([multiline]) .field {
+      grid-column: 2;
+    }
+
+    :host([multiline]) .action {
+      grid-column: 1 / -1;
+      justify-content: end;
+      padding: var(--ui-space-2);
+      padding-block-start: 0;
+    }
+
     .affix:empty,
     .action:empty {
       display: none;

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

@@ -15,13 +15,13 @@ const affixProblem = (affix) =>
 // instead, so the input's name stays its label and the affix is read once, with the input. The
 // consumer's own aria-describedby (or a Form Field's) is kept. A press on an affix, or anywhere in
 // the box outside the input, focuses the input without moving its caret or selecting the affix.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   let owned = [];
   let described = null;
   const warned = new Set();
   const wire = () => {
-    const input = element.querySelector(".field input");
+    const input = element.querySelector(".field :is(input, textarea)");
     const affixes = Array.from(element.querySelectorAll(":scope > .affix")).filter((affix) => {
       const text = affix.textContent.trim() !== "" && !affix.querySelector(INTERACTIVE);
       if (text) affix.setAttribute("aria-hidden", "true");
@@ -50,7 +50,7 @@ export default function controller(host) {
   };
   // Click, not pointerdown: a tap's click is a user activation, so a touch keyboard opens.
   const onClick = (event) => {
-    if (pressedAround(event) && !host.props.disabled.value) element.querySelector(".field input")?.focus();
+    if (pressedAround(event) && !host.props.disabled.value) element.querySelector(".field :is(input, textarea)")?.focus();
   };
   element.addEventListener("mousedown", onMousedown);
   element.addEventListener("click", onClick);
@@ -65,3 +65,8 @@ export default function controller(host) {
     element.removeEventListener("click", onClick);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-list/ui-list.html

@@ -41,16 +41,16 @@
       list-style: none;
     }
 
-    :host-state([as="ol"]),
-    :host-state([markers="disc"]) {
+    :host([as="ol"]),
+    :host([markers="disc"]) {
       padding-inline-start: var(--ui-space-5);
     }
 
-    :host-state([as="ol"]) {
+    :host([as="ol"]) {
       list-style: decimal;
     }
 
-    :host-state([markers="disc"]) {
+    :host([markers="disc"]) {
       list-style: disc;
     }
 
@@ -72,7 +72,7 @@
     }
 
     /* Compact passes its size to the items through private properties, which cross into each item. */
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       --_list-gap: var(--ui-list-gap, var(--ui-space-2));
       --_ui-list-item-min-size: 0;
       --_ui-list-item-padding-block: 0;
@@ -82,7 +82,7 @@
       --_ui-list-native-padding-inline: 0;
     }
 
-    :host-state([layout="grid"]) {
+    :host([layout="grid"]) {
       --_list-gap: var(--ui-list-gap, var(--ui-space-3));
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_list-min-item-width)), 1fr));

package/components/ui-list-item/ui-list-item.html

@@ -66,7 +66,7 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease), border-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :host-state([variant="card"]) {
+    :host([variant="card"]) {
       padding-block: var(--ui-list-item-padding-block, var(--ui-space-3));
       padding-inline: var(--ui-list-item-padding-inline, var(--ui-space-4));
       border: var(--ui-border-width) solid var(--ui-border-strong);
@@ -78,15 +78,15 @@
       background: var(--ui-surface-hover);
     }
 
-    :host-state([variant="card"]):has(.title a[href]:hover) {
+    :host([variant="card"]):has(.title a[href]:hover) {
       border-color: var(--ui-border-strong);
     }
 
-    :host-state([highlighted]) {
+    :host([highlighted]) {
       background: var(--ui-selection-surface);
     }
 
-    :host-state([current]) {
+    :host([current]) {
       background: var(--ui-selection-surface);
       color: var(--ui-selection-text);
     }
@@ -108,7 +108,7 @@
       font-size: var(--_ui-list-item-icon-size, var(--ui-font-size-lg));
     }
 
-    :host-state([current]) .leading {
+    :host([current]) .leading {
       color: var(--ui-selection-text);
     }
 
@@ -137,8 +137,8 @@
       white-space: nowrap;
     }
 
-    :host-state([wrap]) .title,
-    :host-state([wrap]) .description {
+    :host([wrap]) .title,
+    :host([wrap]) .description {
       white-space: normal;
       overflow-wrap: anywhere;
     }
@@ -184,7 +184,7 @@
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-focus-width));
       }
-      :is(:host-state([current]), :host-state([highlighted])):not(:has(a:focus-visible)) {
+      :is(:host([current]), :host([highlighted])):not(:has(a:focus-visible)) {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }

package/components/ui-listbox/ui-listbox.js

@@ -13,7 +13,7 @@ function readOptions(container) {
   }));
 }
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const { options: authored, validity } = host.refs;
   const form = element.closest("form");
@@ -169,3 +169,8 @@ export default function controller(host) {
     validity.removeEventListener("invalid", onInvalid);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-menu/ui-menu.html

@@ -55,7 +55,7 @@
 
     /* Compact sets its items' defaults, so nothing has to rescale a global; an item's own hooks
        still win. */
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       --_ui-default-menu-item-padding-block: var(--ui-space-1);
       --_ui-default-menu-item-padding-inline: var(--ui-space-2);
       --_ui-default-menu-item-font-size: var(--ui-font-size-sm);
@@ -65,7 +65,7 @@
     }
 
     /* Small follows its trigger down: an item's own hooks still win. */
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       --_ui-default-menu-item-padding-block: var(--ui-space-0-5);
       --_ui-default-menu-item-padding-inline: var(--ui-space-2);
       --_ui-default-menu-item-font-size: var(--ui-font-size-xs);
@@ -126,7 +126,7 @@
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
-    :host:not(:host-state([internalOpen])):not(:host-state([inline])) {
+    :host:not(:host-state([internalOpen])):not(:host([inline])) {
       display: none;
     }
 

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

@@ -11,7 +11,7 @@ function disabled(item) {
   return item.getAttribute("aria-disabled") === "true" || item.hasAttribute("disabled") || item.getAttribute("disabled") === "true";
 }
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const overlayId = `ui-menu-${Math.random().toString(36).slice(2, 11)}`;
@@ -136,3 +136,8 @@ export default function controller(host) {
     releaseAnchor();
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

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

@@ -113,18 +113,18 @@
       --_ui-default-icon-size: 0.75rem;
     }
 
-    :host-state([type="action"]) .indicator {
+    :host([type="action"]) .indicator {
       display: none;
     }
 
-    :host-state([type="checkbox"])[aria-checked="true"] .indicator {
+    :host([type="checkbox"])[aria-checked="true"] .indicator {
       border-color: var(--ui-accent);
       background: var(--ui-accent);
     }
 
     /* A menu marks its chosen item with a check, as menus conventionally do; a radio circle reads
        as a form control. The empty slot keeps unchosen labels aligned with the chosen one. */
-    :host-state([type="radio"]) .indicator {
+    :host([type="radio"]) .indicator {
       border-color: transparent;
       color: var(--ui-text-secondary);
     }

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

@@ -2,7 +2,7 @@ function radioScope(item) {
   return item.closest('[role="group"]') ?? item.closest('[role="menu"]');
 }
 
-export default function controller(host) {
+function connect(host) {
   const item = host.element;
   let external = Boolean(host.props.checked.value);
   host.state.internalChecked = external;
@@ -45,3 +45,8 @@ export default function controller(host) {
     item.removeEventListener("ui-menu-item-clear", onClear);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-meter/ui-meter.html

@@ -61,7 +61,7 @@
       outline: var(--ui-border-width) solid transparent;
     }
 
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       inline-size: var(--ui-meter-inline-size, 5rem);
       block-size: var(--ui-space-1);
     }
@@ -74,23 +74,23 @@
       box-shadow: inset 0 1px rgb(255 255 255 / 0.26), inset 0 -1px rgb(0 0 0 / 0.1);
     }
 
-    :host-state([tone="accent"]) {
+    :host([tone="accent"]) {
       --_meter-fill: var(--ui-accent-solid);
     }
 
-    :host-state([tone="info"]) {
+    :host([tone="info"]) {
       --_meter-fill: var(--ui-info-solid);
     }
 
-    :host-state([tone="success"]) {
+    :host([tone="success"]) {
       --_meter-fill: var(--ui-success-solid);
     }
 
-    :host-state([tone="warning"]) {
+    :host([tone="warning"]) {
       --_meter-fill: var(--ui-warning-solid);
     }
 
-    :host-state([tone="danger"]) {
+    :host([tone="danger"]) {
       --_meter-fill: var(--ui-danger-solid);
     }
 
@@ -154,7 +154,7 @@
       mask-image: repeating-linear-gradient(to right, #000 0 var(--_meter-segment), transparent 0 var(--_meter-period));
     }
 
-    :host-state([size="sm"])[data-ui-meter-segments] {
+    :host([size="sm"])[data-ui-meter-segments] {
       --_meter-gap: var(--ui-space-0-5);
     }
 

package/components/ui-nav-item/ui-nav-item.html

@@ -113,7 +113,7 @@
       color: var(--ui-selection-text);
     }
 
-    :host-state([variant="line"]) {
+    :host([variant="line"]) {
       border-radius: 0;
     }
 
@@ -130,14 +130,14 @@
       border-inline-start: var(--_indicator-width) solid var(--_indicator-color);
     }
 
-    :host-state([variant="line"])[aria-current] .indicator {
+    :host([variant="line"])[aria-current] .indicator {
       display: block;
     }
 
     @media (forced-colors: active) {
       /* System colors may erase the selected fill. Trace the complete surface, without
          creating an edge stripe; the stronger keyboard focus outline keeps precedence. */
-      :host-state([variant="surface"])[aria-current]:not(:focus-visible) {
+      :host([variant="surface"])[aria-current]:not(:focus-visible) {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }
@@ -186,17 +186,17 @@
       line-height: var(--ui-line-height-tight);
     }
 
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       min-block-size: var(--ui-nav-compact-min-block-size);
       padding-block: var(--ui-nav-compact-padding-block);
       padding-inline: var(--ui-nav-compact-padding-inline);
     }
-    :host-state([density="compact"]) .label {
+    :host([density="compact"]) .label {
       font-size: var(--ui-font-size-sm);
     }
 
     @media (pointer: coarse) {
-      :host-state([density="compact"]) {
+      :host([density="compact"]) {
         min-block-size: var(--ui-control-min-block-size);
       }
     }

package/components/ui-page-header/ui-page-header.html

@@ -73,12 +73,12 @@
       gap: var(--ui-space-2);
     }
 
-    :host-state([align="center"]) {
+    :host([align="center"]) {
       flex-direction: column;
       text-align: center;
     }
 
-    :host-state([align="center"]) .copy {
+    :host([align="center"]) .copy {
       align-items: center;
       flex-basis: auto;
     }

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

@@ -122,15 +122,15 @@
       }
     }
 
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
       max-inline-size: min(22rem, calc(100vw - var(--ui-space-2) * 2));
     }
-    :host-state([size="md"]) {
+    :host([size="md"]) {
       inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
       max-inline-size: min(28rem, calc(100vw - var(--ui-space-2) * 2));
     }
-    :host-state([size="lg"]) {
+    :host([size="lg"]) {
       inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
       max-inline-size: min(36rem, calc(100vw - var(--ui-space-2) * 2));
     }

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

@@ -1,6 +1,6 @@
 import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay, requestTopOverlayClose } from "../shared/overlay.js";
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const offset = () => {
@@ -98,3 +98,8 @@ export default function controller(host) {
     releaseAnchor();
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

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

@@ -90,44 +90,44 @@
       outline-offset: var(--ui-focus-width);
     }
 
-    :host-state([disabled]) {
+    :host([disabled]) {
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }
-    :host-state([disabled]) .description {
+    :host([disabled]) .description {
       color: var(--ui-disabled-text);
     }
-    :host-state([disabled]) input {
+    :host([disabled]) input {
       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"]) {
+    :host([size="sm"]) {
       --_font: var(--ui-font-size-sm);
       --_row: var(--ui-control-size-sm);
     }
 
-    :host-state([size="lg"]) {
+    :host([size="lg"]) {
       --_font: var(--ui-font-size-md);
       --_row: var(--ui-control-size-lg);
     }
 
-    :host-state([size="sm"]),
-    :host-state([size="lg"]) {
+    :host([size="sm"]),
+    :host([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 {
+    :host([size="sm"]) input,
+    :host([size="lg"]) input {
       margin-top: calc((var(--_line) - var(--_ui-radio-size, 1.125rem)) / 2 + 1px);
     }
 
     @media (pointer: coarse) {
-      :host-state([size="sm"]) {
+      :host([size="sm"]) {
         --_row: var(--ui-control-min-block-size);
       }
     }

package/components/ui-radio/ui-radio.js

@@ -6,7 +6,7 @@ import { trackTrigger } from "../shared/trigger.js";
 // `checked` sets the control initially and whenever it changes; the user's changes update the state.
 // A form reset returns the control to `checked`. Vue writes the checked attribute on every render, so
 // the native default alone cannot hold it there.
-export default function controller(host) {
+function connect(host) {
   const input = host.refs.input;
   describeInput(input, host.refs.description);
   const [trigger, stopTracking] = trackTrigger(host);
@@ -40,3 +40,8 @@ export default function controller(host) {
     input.removeEventListener("change", onChange);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

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

@@ -64,11 +64,11 @@
       clear: both;
     }
 
-    :host-state([invalid]) legend {
+    :host([invalid]) legend {
       color: var(--_ui-radio-group-invalid-text);
     }
 
-    :host-state([orientation="vertical"]) {
+    :host([orientation="vertical"]) {
       display: inline-grid;
       justify-items: start;
     }

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

@@ -7,7 +7,7 @@ let groups = 0;
 // Native radios that share a name already move and check with the arrow keys. The group gives its
 // radios that name, applies a controlled value, and reports the user's choice. Its fieldset disables
 // them, so a radio's own disabled is never overwritten.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const name = String(host.props.name.value || `ui-radio-group-${++groups}`);
   const [trigger, stopTracking] = trackTrigger(host);
@@ -60,3 +60,8 @@ export default function controller(host) {
     element.removeEventListener("change", onChange);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}

package/components/ui-reel/ui-reel.html

@@ -68,37 +68,37 @@
       flex: 0 0 var(--_ui-reel-item-width, var(--_reel-item-width));
     }
 
-    :host-state([gap="xs"]) {
+    :host([gap="xs"]) {
       --_reel-gap: var(--ui-space-2);
     }
-    :host-state([gap="s"]) {
+    :host([gap="s"]) {
       --_reel-gap: var(--ui-space-3);
     }
-    :host-state([gap="m"]) {
+    :host([gap="m"]) {
       --_reel-gap: var(--ui-space-4);
     }
-    :host-state([gap="l"]) {
+    :host([gap="l"]) {
       --_reel-gap: var(--ui-space-5);
     }
-    :host-state([gap="xl"]) {
+    :host([gap="xl"]) {
       --_reel-gap: var(--ui-space-6);
     }
-    :host-state([itemWidth="sm"]) {
+    :host([itemWidth="sm"]) {
       --_reel-item-width: 12rem;
     }
-    :host-state([itemWidth="md"]) {
+    :host([itemWidth="md"]) {
       --_reel-item-width: 16rem;
     }
-    :host-state([itemWidth="lg"]) {
+    :host([itemWidth="lg"]) {
       --_reel-item-width: 20rem;
     }
-    :host-state([snap]) {
+    :host([snap]) {
       scroll-snap-type: inline mandatory;
     }
-    :host-state([snap="start"]) > :slotted(*) {
+    :host([snap="start"]) > :slotted(*) {
       scroll-snap-align: start;
     }
-    :host-state([snap="center"]) > :slotted(*) {
+    :host([snap="center"]) > :slotted(*) {
       scroll-snap-align: center;
     }
 

package/components/ui-scroll-area/ui-scroll-area.html

@@ -36,7 +36,7 @@
       display: flow-root;
     }
 
-    :host-state([orientation="horizontal"]) {
+    :host([orientation="horizontal"]) {
       overflow-x: auto;
       overflow-y: hidden;
       --_ui-scroll-fade-direction: var(--_ui-scroll-fade-inline);
@@ -46,13 +46,13 @@
       --_ui-scroll-fade-inline: to left;
     }
 
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       max-block-size: calc(9.375rem + var(--ui-scroll-fade-size, 24px));
     }
-    :host-state([size="md"]) {
+    :host([size="md"]) {
       max-block-size: 20rem;
     }
-    :host-state([size="lg"]) {
+    :host([size="lg"]) {
       max-block-size: 30rem;
     }