@threadlabs/looma 0.24.1 → 0.25.0

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

package/components/ui-text/ui-text.html

@@ -53,64 +53,64 @@
       font-weight: inherit;
     }
 
-    :host-state([size="xs"]) {
+    :host([size="xs"]) {
       font-size: var(--ui-font-size-xs);
       line-height: var(--ui-line-height);
     }
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       font-size: var(--ui-font-size-sm);
       line-height: var(--ui-line-height);
     }
-    :host-state([size="md"]) {
+    :host([size="md"]) {
       font-size: var(--ui-font-size-md);
       line-height: var(--ui-line-height);
     }
-    :host-state([size="lg"]) {
+    :host([size="lg"]) {
       font-size: var(--ui-font-size-lg);
       line-height: var(--ui-line-height-relaxed);
     }
 
-    :host-state([tone="secondary"]) {
+    :host([tone="secondary"]) {
       color: var(--ui-text-secondary);
     }
-    :host-state([tone="muted"]) {
+    :host([tone="muted"]) {
       color: var(--ui-text-muted);
     }
-    :host-state([tone="accent"]) {
+    :host([tone="accent"]) {
       color: var(--ui-accent-active);
     }
     /* Every status tone uses the text-safe token a subtle badge sets its words in, so text and badges
        in one tone match, and each holds 4.5:1 on sunken surfaces where some base colours fall short. */
-    :host-state([tone="danger"]) {
+    :host([tone="danger"]) {
       color: var(--ui-danger-subtle-text);
     }
-    :host-state([tone="success"]) {
+    :host([tone="success"]) {
       color: var(--ui-success-subtle-text);
     }
-    :host-state([tone="info"]) {
+    :host([tone="info"]) {
       color: var(--ui-info-subtle-text);
     }
-    :host-state([tone="warning"]) {
+    :host([tone="warning"]) {
       color: var(--ui-warning-subtle-text);
     }
 
-    :host-state([weight="normal"]) {
+    :host([weight="normal"]) {
       font-weight: var(--ui-font-normal);
     }
-    :host-state([weight="medium"]) {
+    :host([weight="medium"]) {
       font-weight: var(--ui-font-medium);
     }
-    :host-state([weight="semibold"]) {
+    :host([weight="semibold"]) {
       font-weight: var(--ui-font-semibold);
     }
 
-    :host-state([variant="eyebrow"]) {
+    :host([variant="eyebrow"]) {
       font-size: var(--ui-font-size-xs);
       font-weight: var(--ui-font-semibold);
       letter-spacing: 0.06em;
       text-transform: uppercase;
     }
-    :host-state([variant="code"]) {
+    :host([variant="code"]) {
       font-family: var(--ui-font-family-mono);
     }
 
@@ -123,21 +123,21 @@
       text-underline-offset: 0.18em;
     }
 
-    :host-state([truncate]) {
+    :host([truncate]) {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
-    :host-state([align="center"]) {
+    :host([align="center"]) {
       text-align: center;
     }
 
-    :host-state([font="sans"]) {
+    :host([font="sans"]) {
       font-family: var(--ui-font-family-sans, sans-serif);
     }
 
-    :host-state([wrap="anywhere"]) {
+    :host([wrap="anywhere"]) {
       overflow-wrap: anywhere;
     }
 

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

@@ -117,20 +117,20 @@
       cursor: not-allowed;
     }
 
-    :host-state([size="sm"]) {
+    :host([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"]) {
+    :host([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]) {
+      :host([autosize]) {
         field-sizing: content;
         min-block-size: calc(var(--_rows) * 1lh + var(--_padding-block) + var(--_padding-block) + 2px);
       }
@@ -138,7 +138,7 @@
 
     /* Below 16px, iOS zooms the page into the focused field, so touch keeps body-size text. */
     @media (pointer: coarse) {
-      :host-state([size="sm"]) {
+      :host([size="sm"]) {
         font-size: inherit;
       }
     }

package/components/ui-textarea/ui-textarea.js

@@ -1,6 +1,6 @@
 // The value attribute only sets the default; a controlled value is applied to the live textarea. The
 // value is also made the native default, so a form reset returns to it.
-export default function controller(host) {
+function connect(host) {
   return host.effect(() => {
     const value = host.props.value.value;
     if (value === undefined || value === null) return;
@@ -8,3 +8,8 @@ export default function controller(host) {
     if (host.element.value !== String(value)) host.element.value = String(value);
   });
 }
+
+/** 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-toast/ui-toast.html

@@ -61,16 +61,16 @@
       pointer-events: auto;
     }
 
-    :host-state([tone="info"]) {
+    :host([tone="info"]) {
       --_ui-toast-accent: var(--ui-info-solid);
     }
-    :host-state([tone="success"]) {
+    :host([tone="success"]) {
       --_ui-toast-accent: var(--ui-success-solid);
     }
-    :host-state([tone="warning"]) {
+    :host([tone="warning"]) {
       --_ui-toast-accent: var(--ui-warning-solid);
     }
-    :host-state([tone="danger"]) {
+    :host([tone="danger"]) {
       --_ui-toast-accent: var(--ui-danger-solid);
     }
 

package/components/ui-toast/ui-toast.js

@@ -5,7 +5,7 @@ function inputFor(event) {
 }
 
 /** Authored toasts request dismissal; their consumer owns removal from the rendered list. */
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const { action } = host.refs;
   if (!element.id) element.id = `ui-toast-authored-${++toastSequence}`;
@@ -66,3 +66,8 @@ export default function controller(host) {
     element.removeEventListener("focusout", onFocusOut);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}