@threadlabs/looma 0.24.1 → 0.25.1

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

package/components/ui-separator/ui-separator.html

@@ -24,7 +24,7 @@
       border-block-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
     }
 
-    :host-state([emphasis="strong"]) {
+    :host([emphasis="strong"]) {
       --_separator-color: var(--ui-border-strong);
     }
 
@@ -34,17 +34,17 @@
       border-inline-start: var(--ui-border-width) solid var(--ui-separator-color, var(--_separator-color, var(--ui-border-divider)));
     }
 
-    :host-state([selectable]) {
+    :host([selectable]) {
       min-block-size: var(--ui-control-size-sm);
       border: 0;
       background: linear-gradient(var(--ui-separator-color, var(--ui-border-divider)), var(--ui-separator-color, var(--ui-border-divider))) center / 100%
         var(--ui-border-width) no-repeat;
       cursor: pointer;
     }
-    :host-state([selectable]):hover {
+    :host([selectable]):hover {
       background-color: var(--ui-surface-hover);
     }
-    :host-state([selected]) {
+    :host([selected]) {
       outline: var(--ui-focus-width) solid var(--ui-focus-ring);
       outline-offset: var(--ui-focus-width);
       border-radius: var(--ui-radius-sm);

package/components/ui-sidebar/ui-sidebar.html

@@ -79,7 +79,7 @@
       transition: inline-size var(--ui-motion-layout) var(--ui-motion-layout-ease), visibility var(--ui-motion-layout);
     }
 
-    :host-state([side="end"]) {
+    :host([side="end"]) {
       border-inline-end: 0;
       border-inline-start: var(--ui-border-width) solid var(--ui-sidebar-border, var(--ui-border-divider));
     }
@@ -126,7 +126,7 @@
     :host-state([internalCollapsed]):not([popover]) .content {
       transform: translateX(-100%);
     }
-    :host-state([side="end"][internalCollapsed]):not([popover]) .content {
+    :host([side="end"]):host-state([internalCollapsed]):not([popover]) .content {
       transform: translateX(100%);
     }
 
@@ -148,7 +148,7 @@
       display: none;
     }
 
-    :host-state([side="end"]) .resizer {
+    :host([side="end"]) .resizer {
       inset-inline-end: auto;
       inset-inline-start: 0;
       transform: translateX(-50%);
@@ -217,12 +217,12 @@
       transform: translateX(-100%);
     }
 
-    :host-state([side="end"])[popover] {
+    :host([side="end"])[popover] {
       inset-inline-start: auto;
       inset-inline-end: 0;
     }
 
-    :host-state([side="end"])[popover]:not(:popover-open) {
+    :host([side="end"])[popover]:not(:popover-open) {
       transform: translateX(100%);
     }
 
@@ -230,7 +230,7 @@
       :host[popover]:popover-open {
         transform: translateX(-100%);
       }
-      :host-state([side="end"])[popover]:popover-open {
+      :host([side="end"])[popover]:popover-open {
         transform: translateX(100%);
       }
     }

package/components/ui-sidebar/ui-sidebar.js

@@ -12,7 +12,7 @@ function positive(value, fallback) {
  * off-canvas drawer (a popover). A button toggles it with the platform's invoker commands:
  * `<button commandfor="nav" command="--toggle">`.
  */
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const view = document.defaultView;
@@ -188,3 +188,8 @@ export default function controller(host) {
     document.removeEventListener("click", onDocumentClick);
   };
 }
+
+/** 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-spinner/ui-spinner.html

@@ -32,7 +32,7 @@
       line-height: 1;
     }
 
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       font-size: var(--ui-font-size-md);
     }
 

package/components/ui-stack/ui-stack.html

@@ -29,40 +29,40 @@
       margin: 0;
     }
 
-    :host-state([gap="none"]) {
+    :host([gap="none"]) {
       --_layout-gap: 0px;
     }
-    :host-state([gap="xs"]) {
+    :host([gap="xs"]) {
       --_layout-gap: var(--ui-space-2);
     }
-    :host-state([gap="s"]) {
+    :host([gap="s"]) {
       --_layout-gap: var(--ui-space-3);
     }
-    :host-state([gap="m"]) {
+    :host([gap="m"]) {
       --_layout-gap: var(--ui-space-4);
     }
-    :host-state([gap="l"]) {
+    :host([gap="l"]) {
       --_layout-gap: var(--ui-space-5);
     }
-    :host-state([gap="xl"]) {
+    :host([gap="xl"]) {
       --_layout-gap: var(--ui-space-6);
     }
-    :host-state([align="start"]) {
+    :host([align="start"]) {
       align-items: flex-start;
     }
-    :host-state([align="center"]) {
+    :host([align="center"]) {
       align-items: center;
     }
-    :host-state([align="end"]) {
+    :host([align="end"]) {
       align-items: flex-end;
     }
-    :host-state([justify="center"]) {
+    :host([justify="center"]) {
       justify-content: center;
     }
-    :host-state([justify="end"]) {
+    :host([justify="end"]) {
       justify-content: flex-end;
     }
-    :host-state([justify="between"]) {
+    :host([justify="between"]) {
       justify-content: space-between;
     }
 

package/components/ui-status-message/ui-status-message.html

@@ -30,17 +30,17 @@
       line-height: var(--ui-line-height);
     }
 
-    :host-state([kind="error"]) {
+    :host([kind="error"]) {
       color: var(--ui-danger);
     }
 
-    :host-state([layout="panel"]) {
+    :host([layout="panel"]) {
       padding: var(--ui-space-6);
       border: var(--ui-border-width) dashed var(--ui-border-strong);
       border-radius: var(--ui-radius-lg);
     }
 
-    :host-state([layout="fill"]) {
+    :host([layout="fill"]) {
       flex: 1;
       flex-direction: column;
       justify-content: center;
@@ -56,7 +56,7 @@
       min-inline-size: 0;
     }
 
-    :host-state([layout="fill"]) .copy {
+    :host([layout="fill"]) .copy {
       flex: none;
       align-items: center;
     }

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

@@ -132,21 +132,21 @@
       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 {
       border-color: var(--ui-disabled-border);
       background-color: var(--ui-disabled-surface);
       box-shadow: none;
       cursor: not-allowed;
     }
 
-    :host-state([disabled]) input::after {
+    :host([disabled]) input::after {
       background-color: var(--ui-disabled-text);
       box-shadow: none;
     }
@@ -160,31 +160,31 @@
     /* 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"]) {
+    :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(--ui-switch-track-height, 1.5rem)) / 2);
     }
 
     /* The label centres on the track. */
-    :host-state([size="sm"]) .text,
-    :host-state([size="lg"]) .text {
+    :host([size="sm"]) .text,
+    :host([size="lg"]) .text {
       margin-top: calc((var(--_ui-switch-track-height, 1.5rem) - var(--_line)) / 2);
     }
 
     @media (pointer: coarse) {
-      :host-state([size="sm"]) {
+      :host([size="sm"]) {
         --_row: var(--ui-control-min-block-size);
       }
     }

package/components/ui-switch/ui-switch.js

@@ -5,7 +5,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);
@@ -33,3 +33,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-switcher/ui-switcher.html

@@ -49,37 +49,37 @@
       flex-basis: 100%;
     }
 
-    :host-state([gap="xs"]) {
+    :host([gap="xs"]) {
       --_switcher-gap: var(--ui-space-2);
     }
-    :host-state([gap="s"]) {
+    :host([gap="s"]) {
       --_switcher-gap: var(--ui-space-3);
     }
-    :host-state([gap="m"]) {
+    :host([gap="m"]) {
       --_switcher-gap: var(--ui-space-4);
     }
-    :host-state([gap="l"]) {
+    :host([gap="l"]) {
       --_switcher-gap: var(--ui-space-5);
     }
-    :host-state([gap="xl"]) {
+    :host([gap="xl"]) {
       --_switcher-gap: var(--ui-space-6);
     }
-    :host-state([threshold="xs"]) > :slotted(*) {
+    :host([threshold="xs"]) > :slotted(*) {
       flex-basis: calc((var(--_ui-switcher-threshold, 20rem) - 100%) * 999);
     }
-    :host-state([threshold="md"]) > :slotted(*) {
+    :host([threshold="md"]) > :slotted(*) {
       flex-basis: calc((var(--_ui-switcher-threshold, 45rem) - 100%) * 999);
     }
-    :host-state([threshold="lg"]) > :slotted(*) {
+    :host([threshold="lg"]) > :slotted(*) {
       flex-basis: calc((var(--_ui-switcher-threshold, 60rem) - 100%) * 999);
     }
-    :host-state([align="start"]) {
+    :host([align="start"]) {
       align-items: flex-start;
     }
-    :host-state([align="center"]) {
+    :host([align="center"]) {
       align-items: center;
     }
-    :host-state([align="end"]) {
+    :host([align="end"]) {
       align-items: flex-end;
     }
 

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

@@ -1,5 +1,5 @@
 /** Stack the group when the authored child count exceeds the optional row limit. */
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const update = () => {
     const limit = Number(host.props.limit.value);
@@ -13,3 +13,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));
+}

package/components/ui-table/ui-table.html

@@ -55,7 +55,7 @@
       outline-offset: calc(-1 * var(--ui-focus-width));
     }
 
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       --_pad-block: var(--ui-space-0-5);
       --_pad-inline: var(--ui-space-2);
       --_row-size: var(--ui-control-size-sm);
@@ -117,7 +117,7 @@
       text-align: end;
     }
 
-    :host-state([stickyHeader]) :slotted(thead th) {
+    :host([stickyHeader]) :slotted(thead th) {
       position: sticky;
       inset-block-start: 0;
       z-index: 1;

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

@@ -3,7 +3,7 @@
 // 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) {
+function connect(host) {
   const element = host.element;
   const authored = element.hasAttribute("tabindex") || element.hasAttribute("role");
   if (authored) return undefined;
@@ -53,3 +53,8 @@ export default function controller(host) {
     plain();
   };
 }
+
+/** 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-tabs/ui-tabs.html

@@ -68,7 +68,7 @@
       --_tab-padding-inline: var(--ui-space-3);
     }
 
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       --_tab-min-block-size: var(--ui-control-size-sm);
       --_tab-padding-block: var(--ui-space-1);
       --_tab-padding-inline: var(--ui-space-2);
@@ -130,7 +130,7 @@
       }
     }
 
-    :host-state([stretch]) .list {
+    :host([stretch]) .list {
       grid-auto-columns: minmax(max-content, 1fr);
     }
 
@@ -164,28 +164,28 @@
       padding: var(--ui-space-4);
     }
 
-    :host-state([orientation="vertical"]) {
+    :host([orientation="vertical"]) {
       grid-template-columns: max-content minmax(0, 1fr);
       align-items: start;
     }
 
-    :host-state([orientation="vertical"]) .list {
+    :host([orientation="vertical"]) .list {
       grid-auto-flow: row;
       grid-auto-columns: auto;
       border-block-end: 0;
       border-inline-end: var(--ui-border-width) solid var(--ui-border-divider);
     }
 
-    :host-state([orientation="vertical"]) .list button,
-    :host-state([orientation="vertical"]) .list > :slotted(button[slot="tab"]) {
+    :host([orientation="vertical"]) .list button,
+    :host([orientation="vertical"]) .list > :slotted(button[slot="tab"]) {
       margin: 0 calc(-1 * var(--ui-border-width)) 0 0;
       border-block-end: 0;
       border-inline-end: var(--ui-accent-line-width) solid transparent;
       text-align: start;
     }
 
-    :host-state([orientation="vertical"]) .list button[aria-selected="true"],
-    :host-state([orientation="vertical"]) .list > :slotted(button[slot="tab"][aria-selected="true"]) {
+    :host([orientation="vertical"]) .list button[aria-selected="true"],
+    :host([orientation="vertical"]) .list > :slotted(button[slot="tab"][aria-selected="true"]) {
       border-inline-end-color: var(--ui-accent-solid);
     }
 

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

@@ -3,7 +3,7 @@ import { trackTrigger } from "../shared/trigger.js";
 let panelIds = 0;
 
 /** Lists the authored panels (each labelled by its aria-label) as tabs and shows the selected one. */
-export default function controller(host) {
+function connect(host) {
   const { list, panels: container } = host.refs;
   const [trigger, stopTracking] = trackTrigger(host);
   const panels = () => Array.from(container.children).filter((child) => child instanceof HTMLElement);
@@ -115,3 +115,8 @@ export default function controller(host) {
     list.removeEventListener("wheel", onWheel);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}