@threadlabs/looma 0.24.1 → 0.25.0

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;
     }
 

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

@@ -1,4 +1,4 @@
-export default function controller(host) {
+function connect(host) {
   const area = host.element;
   let frame = 0;
 
@@ -30,3 +30,8 @@ export default function controller(host) {
     if (frame) cancelAnimationFrame(frame);
   };
 }
+
+/** 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-search-result-row/ui-search-result-row.html

@@ -71,7 +71,7 @@
       transition: background-color var(--ui-motion-fast) var(--ui-motion-ease);
     }
 
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       min-block-size: var(--ui-search-result-row-min-height, 3.125rem);
       padding-block: var(--ui-search-result-row-padding-block, var(--ui-space-1));
       padding-inline: var(--ui-search-result-row-padding-inline, var(--ui-space-2));
@@ -81,12 +81,12 @@
     }
 
     /* Slot wrappers own their line boxes even when an app makes buttons inherit body typography. */
-    :host-state([density="compact"]) .title {
+    :host([density="compact"]) .title {
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height);
     }
 
-    :host-state([density="compact"]) .meta {
+    :host([density="compact"]) .meta {
       font-size: var(--ui-font-size-xs);
       line-height: var(--ui-line-height);
     }
@@ -95,7 +95,7 @@
       background: var(--ui-search-result-row-hover-surface, color-mix(in srgb, var(--ui-surface) 85%, black 3%));
     }
 
-    :host-state([selected]) {
+    :host([selected]) {
       background: var(
         --ui-search-result-row-selected-bg,
         var(--ui-selection-surface)
@@ -151,7 +151,7 @@
     }
 
     @media (forced-colors: active) {
-      :host-state([selected]):not(:focus-visible):not(:disabled) {
+      :host([selected]):not(:focus-visible):not(:disabled) {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }

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

@@ -2,7 +2,7 @@ import { closeOverlay, openOverlay } from "../shared/overlay.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 /** Owns native dialog state while leaving query and result state to the application. */
-export default function controller(host) {
+function connect(host) {
   const dialog = host.refs.dialog;
   const document = dialog.ownerDocument;
   const overlayId = `ui-search-shell-${Math.random().toString(36).slice(2, 11)}`;
@@ -95,3 +95,8 @@ export default function controller(host) {
     closeOverlay(document, overlayId);
   };
 }
+
+/** 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-section/ui-section.html

@@ -28,19 +28,19 @@
       min-inline-size: 0;
     }
 
-    :host-state([variant="card"]) {
+    :host([variant="card"]) {
       padding: var(--ui-space-5);
       border: var(--ui-border-width) solid var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
       background: var(--ui-surface-raised);
     }
 
-    :host-state([variant="divided"]) {
+    :host([variant="divided"]) {
       padding-block-start: var(--ui-space-6);
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
-    :host-state([variant="card"][tone="danger"]) {
+    :host([variant="card"][tone="danger"]) {
       border-color: color-mix(in srgb, var(--ui-danger) 45%, var(--ui-border-default));
       border-inline-start: var(--ui-accent-line-width) solid var(--ui-danger);
       background: var(--ui-danger-soft);
@@ -70,7 +70,7 @@
       line-height: var(--ui-line-height-tight);
     }
 
-    :host-state([tone="danger"]) .heading {
+    :host([tone="danger"]) .heading {
       color: var(--ui-danger);
     }
 

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

@@ -127,7 +127,7 @@
       cursor: not-allowed;
     }
 
-    :host-state([size="sm"]) {
+    :host([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));
@@ -136,7 +136,7 @@
       font-size: var(--ui-font-size-sm);
     }
 
-    :host-state([size="lg"]) {
+    :host([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);
@@ -147,7 +147,7 @@
     /* 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"]) {
+      :host([size="sm"]) {
         min-block-size: var(--ui-control-min-block-size);
         font-size: inherit;
       }

package/components/ui-select/ui-select.js

@@ -1,7 +1,7 @@
 // A controlled value can arrive before its projected <option> elements, so it is applied again
 // whenever the options change. The value's option is also marked the native default, so a form
 // reset returns to it rather than to the first option.
-export default function controller(host) {
+function connect(host) {
   const select = host.element;
   const apply = () => {
     const value = host.props.value.value;
@@ -17,3 +17,8 @@ export default function controller(host) {
     observer.disconnect();
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}