@threadlabs/looma 0.24.1 → 0.25.0

package/components/ui-card/ui-card.html

@@ -34,44 +34,44 @@
       color: var(--ui-text-primary);
     }
 
-    :host-state([padding="xs"]) {
+    :host([padding="xs"]) {
       gap: var(--ui-space-1);
       padding: var(--ui-space-2);
     }
-    :host-state([padding="sm"]) {
+    :host([padding="sm"]) {
       gap: var(--ui-space-2);
       padding: var(--ui-space-3);
     }
 
-    :host-state([padding="lg"]) {
+    :host([padding="lg"]) {
       padding: var(--ui-space-6);
     }
 
-    :host-state([variant="subtle"]) {
+    :host([variant="subtle"]) {
       border-color: transparent;
       background: var(--ui-surface-muted);
     }
 
-    :host-state([variant="elevated"]) {
+    :host([variant="elevated"]) {
       border-color: var(--ui-border-subtle);
       box-shadow: var(--ui-shadow-lg);
     }
 
-    :host-state([tone="danger"]) {
+    :host([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);
     }
 
-    :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-checkbox/ui-checkbox.html

@@ -183,18 +183,18 @@
       outline-offset: var(--ui-focus-width);
     }
 
-    :host-state([invalid]) input {
+    :host([invalid]) input {
       border-color: var(--_ui-checkbox-invalid-border);
     }
 
-    :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: var(--ui-disabled-surface);
       box-shadow: none;
@@ -204,30 +204,30 @@
     /* 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-checkbox-size, 1.125rem)) / 2);
     }
 
     @media (pointer: coarse) {
-      :host-state([size="sm"]) {
+      :host([size="sm"]) {
         --_row: var(--ui-control-min-block-size);
       }
     }

package/components/ui-checkbox/ui-checkbox.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-cluster/ui-cluster.html

@@ -33,40 +33,40 @@
       margin: 0;
     }
 
-    :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="end"]) {
+    :host([align="end"]) {
       align-items: flex-end;
     }
-    :host-state([align="stretch"]) {
+    :host([align="stretch"]) {
       align-items: stretch;
     }
-    :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;
     }
-    :host-state([wrap="nowrap"]) {
+    :host([wrap="nowrap"]) {
       flex-wrap: nowrap;
     }
 

package/components/ui-combobox/ui-combobox.html

@@ -115,7 +115,7 @@
     </state>
     <state type="string" name="raw" value=""></state>
     <state type="string" name="display" value=""></state>
-    <state name="selected" type="string"></state>
+    <state name="selected" type="string" nullable></state>
     <state type="boolean" name="expanded" value="false"></state>
     <state
       name="rows"
@@ -367,8 +367,6 @@
       </prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
-    <method name="validate" export="validate" returns="promise(unknown)"></method>
-    <method name="focusInput" export="focusInput" returns="promise(undefined)"></method>
   </defs>
   <div>
     <label from:for="concat(uid, '-input')" class:sr-only="labelVisibility = 'sr-only'">{$label}<template $if="required">
@@ -706,15 +704,15 @@
       margin: 0;
       outline: none;
     }
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       --_row: var(--ui-control-size-sm);
     }
-    :host-state([size="sm"]) input {
+    :host([size="sm"]) input {
       min-block-size: calc(var(--_row) - 2px);
       padding: var(--ui-space-1) var(--ui-space-2);
       font-size: var(--ui-font-size-sm);
     }
-    :host-state([size="lg"]) input {
+    :host([size="lg"]) input {
       min-block-size: calc(var(--ui-control-size-lg) - 2px);
       padding: var(--ui-space-3) var(--ui-space-4);
       font-size: var(--ui-font-size-md);
@@ -756,7 +754,7 @@
       background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
     }
     :host-state([validationStatus="error"]) .field,
-    :host-state([invalid]) .field {
+    :host([invalid]) .field {
       border-color: var(--_ui-combobox-invalid-border, var(--ui-field-danger, var(--ui-danger-solid, var(--ui-accent-active))));
     }
     .popup {
@@ -827,10 +825,10 @@
       }
       /* 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. */
-      :host-state([size="sm"]) {
+      :host([size="sm"]) {
         --_row: var(--ui-control-min-block-size);
       }
-      :host-state([size="sm"]) input {
+      :host([size="sm"]) input {
         font-size: inherit;
       }
     }
@@ -845,40 +843,40 @@
 
     /* Multiple mode keeps one control height. Chips and the input scroll within the entry,
        while the clear and disclosure controls remain fixed at the end of the field. */
-    :host-state([multiple]) .field {
+    :host([multiple]) .field {
       align-items: center;
       min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
       padding: var(--ui-space-1);
     }
-    :host-state([multiple]) .entry {
+    :host([multiple]) .entry {
       align-items: center;
       gap: var(--ui-space-1);
       overflow-x: auto;
       scrollbar-width: none;
     }
-    :host-state([multiple]) .entry::-webkit-scrollbar {
+    :host([multiple]) .entry::-webkit-scrollbar {
       display: none;
     }
-    :host-state([multiple]) input {
+    :host([multiple]) input {
       flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
       width: auto;
       min-block-size: 1.75rem;
       padding: var(--ui-space-0-5) var(--ui-space-1);
     }
     /* Size variants keep their control height as selections are added. */
-    :host-state([multiple]):host-state([size="sm"]) .field {
+    :host([multiple]):host([size="sm"]) .field {
       min-block-size: 0;
       padding: var(--ui-space-0-5);
     }
-    :host-state([multiple]):host-state([size="sm"]) input {
+    :host([multiple]):host([size="sm"]) input {
       min-block-size: calc(var(--_row) - 2 * var(--ui-border-width) - 2 * var(--ui-space-0-5));
       padding: 0 var(--ui-space-1);
     }
     /* A large multiple field starts at the large control height, as sm starts at the small one. */
-    :host-state([multiple]):host-state([size="lg"]) .field {
+    :host([multiple]):host([size="lg"]) .field {
       min-block-size: 0;
     }
-    :host-state([multiple]):host-state([size="lg"]) input {
+    :host([multiple]):host([size="lg"]) input {
       min-block-size: calc(var(--ui-control-size-lg) - 2 * var(--ui-border-width) - 2 * var(--ui-space-1));
     }
     .item {

package/components/ui-combobox/ui-combobox.js

@@ -1,8 +1,6 @@
 import { afterFormReset } from "../shared/form-reset.js";
 import { closeOverlay, createAnchoredSurface, openOverlay } from "../shared/overlay.js";
 
-const instances = new WeakMap();
-
 let comboboxes = 0;
 
 // An option's secondary line and tag ride on data-* attributes: <option> holds only text, so markup inside
@@ -23,15 +21,7 @@ function authoredOptions(container) {
   });
 }
 
-export async function validate(host) {
-  return instances.get(host.element)?.validate();
-}
-
-export async function focusInput(host) {
-  instances.get(host.element)?.input?.focus();
-}
-
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const uid = `ui-combobox-${++comboboxes}`;
@@ -514,9 +504,13 @@ export default function controller(host) {
   host.state.validation = { status: "pristine", touched: false, dirty: false, issues: [] };
   surface = createAnchoredSurface(popup, { anchor: field, placement: "bottom-start" });
 
-  const api = { get input() { return input; }, validate: validateCurrent };
-  instances.set(element, api);
-  const listeners = { input: onInput, keydown: onKeydown, click: onClick, pointerdown: onPointerdown, focusin: onFocusin, focusout: onFocusout, compositionstart: onCompositionstart, compositionend: onCompositionend, open: onTooltipOpen, close: onTooltipClose };
+  const onCommand = (event) => {
+    if (event.target === element && event.command === "--validate") void validateCurrent();
+  };
+  const onValidate = (event) => {
+    if (event.target === element) void validateCurrent();
+  };
+  const listeners = { input: onInput, keydown: onKeydown, click: onClick, pointerdown: onPointerdown, focusin: onFocusin, focusout: onFocusout, compositionstart: onCompositionstart, compositionend: onCompositionend, open: onTooltipOpen, close: onTooltipClose, command: onCommand, validate: onValidate };
   for (const [name, listener] of Object.entries(listeners)) element.addEventListener(name, listener);
   // Authored options can change after mount (renamed, replaced, or arriving late). A selected value
   // then shows its current label, unless the user is editing the text.
@@ -582,6 +576,10 @@ export default function controller(host) {
     close();
     validationRun?.abort();
     surface.destroy();
-    instances.delete(element);
   };
 }
+
+/** 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-container/ui-container.html

@@ -29,19 +29,19 @@
       padding-inline: var(--ui-container-gutters, var(--_container-gutters));
     }
 
-    :host-state([measure="narrow"]) {
+    :host([measure="narrow"]) {
       --_container-measure: 45ch;
     }
-    :host-state([measure="wide"]) {
+    :host([measure="wide"]) {
       --_container-measure: 80ch;
     }
-    :host-state([gutters="s"]) {
+    :host([gutters="s"]) {
       --_container-gutters: var(--ui-space-3);
     }
-    :host-state([gutters="m"]) {
+    :host([gutters="m"]) {
       --_container-gutters: var(--ui-space-4);
     }
-    :host-state([gutters="l"]) {
+    :host([gutters="l"]) {
       --_container-gutters: var(--ui-space-5);
     }
 

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

@@ -5,7 +5,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 menuSurface = host.refs.menu;
@@ -157,3 +157,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-cover/ui-cover.html

@@ -19,7 +19,7 @@
       padding: var(--ui-space-6) var(--ui-space-4);
     }
 
-    :host-state([size="fill"]) {
+    :host([size="fill"]) {
       flex: 1;
       min-block-size: 100%;
     }

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

@@ -30,9 +30,9 @@
 
     /* Stacked, grid, and tiles set each term above its value, passing the shape to the items through
        private properties, which cross into each item. */
-    :host-state([layout="stacked"]),
-    :host-state([layout="grid"]),
-    :host-state([layout="tiles"]) {
+    :host([layout="stacked"]),
+    :host([layout="grid"]),
+    :host([layout="tiles"]) {
       --_ui-description-display: flex;
       --_ui-description-column: auto;
       --_ui-description-align: stretch;
@@ -43,13 +43,13 @@
 
     /* A column is at least --_min wide; with columns set, at least its share of the width, so no more
        than that many fit. */
-    :host-state([layout="grid"]),
-    :host-state([layout="tiles"]) {
+    :host([layout="grid"]),
+    :host([layout="tiles"]) {
       inline-size: 100%;
       grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_track)), 1fr));
     }
 
-    :host-state([layout="tiles"]) {
+    :host([layout="tiles"]) {
       --_ui-description-align: flex-start;
       --_ui-description-value-size: var(--ui-font-size-lg);
       --_ui-description-padding: var(--_tile-padding);
@@ -60,18 +60,18 @@
       --_column-gap: var(--_gap);
     }
 
-    :host-state([columns="2"]) {
+    :host([columns="2"]) {
       --_track: max(var(--_min), (100% - var(--_column-gap)) / 2);
     }
-    :host-state([columns="3"]) {
+    :host([columns="3"]) {
       --_track: max(var(--_min), (100% - 2 * var(--_column-gap)) / 3);
     }
-    :host-state([columns="4"]) {
+    :host([columns="4"]) {
       --_track: max(var(--_min), (100% - 3 * var(--_column-gap)) / 4);
     }
 
     /* Compact takes each layout's closer spacing. */
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       --_gap: var(--_gap-compact);
       --_tile-padding: var(--ui-space-2);
     }

package/components/ui-dialog/ui-dialog.html

@@ -116,15 +116,15 @@
       animation: ui-dialog-enter var(--ui-dialog-duration, var(--ui-motion-base)) var(--ui-motion-ease);
     }
 
-    :host-state([size="sm"]) {
+    :host([size="sm"]) {
       --_ui-dialog-size: 360px;
     }
 
-    :host-state([size="lg"]) {
+    :host([size="lg"]) {
       --_ui-dialog-size: 640px;
     }
 
-    :host-state([size="fullscreen"]) {
+    :host([size="fullscreen"]) {
       inset: 0;
       inline-size: 100%;
       block-size: 100dvh;
@@ -133,7 +133,7 @@
       border-radius: var(--ui-dialog-radius, 0);
     }
 
-    :host-state([alert]) .close {
+    :host([alert]) .close {
       display: none;
     }
 

package/components/ui-dialog/ui-dialog.js

@@ -5,7 +5,7 @@ function inferredLabel(element, explicit) {
   return element.querySelector("h1, h2, h3, h4, h5, h6")?.textContent?.trim() || "Dialog";
 }
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const dialog = element.localName === "dialog" ? element : element.querySelector("dialog");
@@ -126,3 +126,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-disclosure/ui-disclosure.html

@@ -80,7 +80,7 @@
       --_trigger-padding-inline: var(--ui-space-3);
     }
 
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       --_trigger-min-block-size: var(--ui-control-size-sm);
       --_trigger-padding-block: var(--ui-space-1);
       --_trigger-padding-inline: var(--ui-space-2);
@@ -178,7 +178,7 @@
 
     /* A bounded accordion owns one flexible body, so its trigger never scrolls away. The
      * normal content-sized layout and its animation remain unchanged when fill is omitted. */
-    :host-state([fill]) {
+    :host([fill]) {
       display: flex;
       flex-direction: column;
       flex: 0 0 var(--_ui-disclosure-heading-size, var(--_trigger-min-block-size));
@@ -187,20 +187,20 @@
       border-block-end: 0;
       border-block-start: var(--ui-border-width) solid var(--ui-border-divider);
     }
-    :host-state([fill][internalOpen]) {
+    :host([fill]):host-state([internalOpen]) {
       flex-grow: 1;
     }
-    :host-state([fill]) .heading {
+    :host([fill]) .heading {
       flex: none;
     }
-    :host-state([fill]) .trigger {
+    :host([fill]) .trigger {
       border-radius: 0;
     }
-    :host-state([fill]) .panel {
+    :host([fill]) .panel {
       flex: 1;
       min-block-size: 0;
     }
-    :host-state([fill]) .panel-inner {
+    :host([fill]) .panel-inner {
       display: flex;
       flex-direction: column;
       flex: 1;
@@ -208,7 +208,7 @@
       padding: 0;
     }
 
-    :host-state([variant="navigation"]) .trigger {
+    :host([variant="navigation"]) .trigger {
       gap: var(--ui-nav-gap);
       padding-inline: var(--ui-nav-padding-inline);
       min-block-size: var(--ui-nav-min-block-size);
@@ -218,28 +218,28 @@
       font-weight: var(--ui-font-normal);
       color: var(--ui-text-secondary);
     }
-    :host-state([variant="navigation"][density="compact"]) .trigger {
+    :host([variant="navigation"][density="compact"]) .trigger {
       padding-inline: var(--ui-nav-compact-padding-inline);
       padding-block: var(--ui-nav-compact-padding-block);
       min-block-size: var(--ui-nav-compact-min-block-size);
       font-size: var(--ui-font-size-sm);
     }
-    :host-state([variant="navigation"]) .trigger:hover:not(:disabled) {
+    :host([variant="navigation"]) .trigger:hover:not(:disabled) {
       background: var(--ui-nav-hover-surface);
       color: var(--ui-text-primary);
     }
-    :host-state([variant="navigation"]) :is(.leading, .indicator) {
+    :host([variant="navigation"]) :is(.leading, .indicator) {
       inline-size: var(--ui-nav-icon-size);
       font-size: var(--ui-nav-icon-size);
     }
     @media (pointer: coarse) {
-      :host-state([variant="navigation"][density="compact"]) .trigger {
+      :host([variant="navigation"][density="compact"]) .trigger {
         min-block-size: var(--ui-control-min-block-size);
       }
     }
 
     @media (prefers-reduced-motion: reduce) {
-      :host-state([fill]),
+      :host([fill]),
       .panel,
       .indicator {
         transition: none;

package/components/ui-disclosure/ui-disclosure.js

@@ -34,7 +34,7 @@ function leaveGroup(document, name, member) {
 }
 
 // `open` sets the disclosure initially and whenever it changes; the trigger toggles the state.
-export default function controller(host) {
+function connect(host) {
   const document = host.element.ownerDocument;
   const [trigger, stopTracking] = trackTrigger(host);
   host.state.contentId = `ui-disclosure-${++disclosures}`;
@@ -119,3 +119,8 @@ export default function controller(host) {
     host.refs.panel.removeEventListener("beforematch", onBeforematch);
   };
 }
+
+/** 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-editable/ui-editable.html

@@ -177,7 +177,7 @@
       box-shadow: var(--ui-focus-halo);
     }
 
-    :host-state([disabled]) .preview {
+    :host([disabled]) .preview {
       color: var(--ui-disabled-text);
       cursor: not-allowed;
     }

package/components/ui-editable/ui-editable.js

@@ -3,7 +3,7 @@ function triggerFor(event) {
 }
 
 /** Owns the display/edit transition so authors only provide value and label. */
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const { preview, input } = host.refs;
@@ -119,3 +119,8 @@ export default function controller(host) {
     document.removeEventListener("pointerdown", onDocumentPointerdown, true);
   };
 }
+
+/** 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-editor-insert-table-grid/ui-editor-insert-table-grid.js

@@ -4,7 +4,7 @@ function bounded(value, fallback) {
 }
 
 // Lays out the grid cells and inserts the chosen size by pointer or keyboard.
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   let selected = { rows: 3, cols: 3 };
   let preview = null;
@@ -103,3 +103,8 @@ export default function controller(host) {
     host.refs.header.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));
+}