@threadlabs/looma 0.24.1 → 0.25.1

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

@@ -26,6 +26,30 @@
   ></textarea>
   <style>
     /* This component's hooks style the element they are set on, and never a nested one. */
+    @property --ui-textarea-border-width {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-border-hover {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-focus-border {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-focus-outline {
+      syntax: "*";
+      inherits: false;
+    }
+    @property --ui-textarea-surface {
+      syntax: "*";
+      inherits: false;
+    }
     @property --ui-textarea-focus-shadow {
       syntax: "*";
       inherits: false;
@@ -58,13 +82,14 @@
       padding: var(--ui-space-2) var(--ui-space-3);
       appearance: none;
       resize: vertical;
-      border: var(--ui-border-width) solid var(--ui-control-border, var(--ui-border-strong));
-      border-radius: var(--ui-textarea-radius, var(--ui-field-radius, var(--ui-radius-md)));
-      background: var(--ui-control-surface, var(--ui-surface-elevated));
+      border: var(--ui-textarea-border-width, var(--_ui-default-textarea-border-width, var(--ui-border-width))) solid
+        var(--ui-textarea-border, var(--_ui-default-textarea-border, var(--ui-control-border, var(--ui-border-strong))));
+      border-radius: var(--ui-textarea-radius, var(--_ui-default-textarea-radius, var(--ui-field-radius, var(--ui-radius-md))));
+      background: var(--ui-textarea-surface, var(--_ui-default-textarea-surface, var(--ui-control-surface, var(--ui-surface-elevated))));
       color: var(--ui-text-primary);
       font: inherit;
       line-height: var(--ui-line-height-md);
-      box-shadow: var(--ui-textarea-shadow, var(--ui-control-inset));
+      box-shadow: var(--ui-textarea-shadow, var(--_ui-default-textarea-shadow, var(--ui-control-inset)));
       transition:
         border-color var(--ui-motion-fast) var(--ui-motion-ease),
         box-shadow var(--ui-motion-fast) var(--ui-motion-ease),
@@ -83,29 +108,32 @@
     }
 
     :host:hover:not(:focus):not(:disabled):not(:read-only):not([aria-invalid="true"]):not(:user-invalid) {
-      border-color: var(--ui-control-border-hover, var(--ui-text-secondary));
+      border-color: var(--ui-textarea-border-hover, var(--_ui-default-textarea-border-hover, var(--ui-control-border-hover, var(--ui-text-secondary))));
     }
 
     :host:focus-visible {
-      border-color: var(--ui-control-focus, var(--ui-accent-solid));
-      outline: none;
-      box-shadow: var(--ui-textarea-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow));
+      border-color: var(--ui-textarea-focus-border, var(--_ui-default-textarea-focus-border, var(--ui-control-focus, var(--ui-accent-solid))));
+      outline: var(--ui-textarea-focus-outline, var(--_ui-default-textarea-focus-outline, none));
+      box-shadow: var(--ui-textarea-focus-shadow, var(--_ui-default-textarea-focus-shadow, var(--ui-control-inset), var(--ui-control-focus-halo-shadow)));
     }
 
     /* The app's invalid flag, or the browser's own verdict once the user has left an invalid field. */
     :host[aria-invalid="true"],
     :host:user-invalid {
-      border-color: var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)));
+      border-color: var(--ui-textarea-invalid-border, var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))));
     }
 
     :host:is([aria-invalid="true"], :user-invalid):focus-visible {
       box-shadow: var(
         --ui-textarea-invalid-focus-shadow,
-        var(--ui-control-inset),
-        0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
-          in srgb,
-          var(--ui-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid))) 22%,
-          transparent
+        var(
+          --_ui-default-textarea-invalid-focus-shadow,
+          var(--ui-control-inset),
+          0 0 0 calc(var(--ui-focus-width) * 1.5) color-mix(
+            in srgb,
+            var(--ui-textarea-invalid-border, var(--_ui-default-textarea-invalid-border, var(--ui-field-danger, var(--ui-danger-solid)))) 22%,
+            transparent
+          )
         )
       );
     }
@@ -117,20 +145,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 +166,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));
+}

package/components/ui-toast-region/ui-toast-region.html

@@ -3,7 +3,7 @@
 <template component="ui-toast-region" controller="./ui-toast-region.js">
   <defs>
     <prop name="duration" type="number" default="0"
-    >Default milliseconds for toasts added with show() or the show command; 0 keeps each until dismissed. Hover or focus pauses a timer.</prop>
+    >Default milliseconds for toasts added with the show-toast event or command; 0 keeps each until dismissed. Hover or focus pauses a timer.</prop>
     <prop name="placement" type="keyword" values="top, top-start, top-end, bottom, bottom-start, bottom-end" default="top"
     >Screen edge where the stack appears. Start and end follow the writing direction.</prop>
     <state
@@ -24,7 +24,12 @@
       <prop name="reason" required type="keyword" values="action, timeout"></prop>
       <prop name="trigger" required type="keyword" values="keyboard, pointer, programmatic"></prop>
     </event>
-    <method name="show" export="show" returns="promise(string)"></method>
+    <event name="show-toast" type="object">
+      <prop name="message" required type="string"></prop>
+      <prop name="id" type="string"></prop>
+      <prop name="tone" type="keyword" values="neutral, info, success, warning, danger"></prop>
+      <prop name="duration" type="number"></prop>
+    </event>
   </defs>
   <div role="region" aria-label="Notifications" aria-live="polite" popover="manual">
     <slot></slot>
@@ -107,25 +112,25 @@
       display: none;
     }
 
-    :host-state([placement="top-start"]),
-    :host-state([placement="bottom-start"]) {
+    :host([placement="top-start"]),
+    :host([placement="bottom-start"]) {
       left: auto;
       right: auto;
       inset-inline-start: calc(var(--ui-space-4) + env(safe-area-inset-left));
       transform: none;
     }
 
-    :host-state([placement="top-end"]),
-    :host-state([placement="bottom-end"]) {
+    :host([placement="top-end"]),
+    :host([placement="bottom-end"]) {
       left: auto;
       right: auto;
       inset-inline-end: calc(var(--ui-space-4) + env(safe-area-inset-right));
       transform: none;
     }
 
-    :host-state([placement="bottom"]),
-    :host-state([placement="bottom-start"]),
-    :host-state([placement="bottom-end"]) {
+    :host([placement="bottom"]),
+    :host([placement="bottom-start"]),
+    :host([placement="bottom-end"]) {
       top: auto;
       bottom: calc(var(--ui-space-4) + env(safe-area-inset-bottom));
     }
@@ -168,11 +173,11 @@
       pointer-events: none;
     }
 
-    :is(:host-state([placement="bottom"]), :host-state([placement="bottom-start"]), :host-state([placement="bottom-end"])) .toast {
+    :is(:host([placement="bottom"]), :host([placement="bottom-start"]), :host([placement="bottom-end"])) .toast {
       animation-name: ui-toast-enter-bottom;
     }
 
-    :is(:host-state([placement="bottom"]), :host-state([placement="bottom-start"]), :host-state([placement="bottom-end"])) .toast.closing {
+    :is(:host([placement="bottom"]), :host([placement="bottom-start"]), :host([placement="bottom-end"])) .toast.closing {
       animation-name: ui-toast-exit-bottom;
     }
 

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

@@ -1,18 +1,13 @@
 import { announceOverlayOpen } from "../shared/overlay.js";
 import { trackTrigger } from "../shared/trigger.js";
 
-const instances = new WeakMap();
 let toastIds = 0;
 
-export async function show(host, message, options = {}) {
-  return instances.get(host.element)?.show(message, options);
-}
-
 /**
  * Shows the region while it has authored or generated messages. Generated messages dismiss by
  * action or timeout; authored ui-toast children own their removal through the dismiss event.
  */
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const [trigger, stopTracking] = trackTrigger(host);
   const toasts = () => host.state.toasts ?? [];
@@ -85,24 +80,28 @@ export default function controller(host) {
     if (id) dismiss(id, "action", trigger());
   };
   const onCommand = (event) => {
-    if (event.command === "--show-toast" && event.source?.value) add(event.source.value);
+    if (event.target === element && event.command === "--show-toast" && event.source?.value) add(event.source.value);
+  };
+  const onShowToast = (event) => {
+    if (event.target === element && typeof event.detail?.message === "string") add(event.detail.message, event.detail);
   };
   const stop = host.effect(sync);
   const observer = new MutationObserver(sync);
   observer.observe(element, { childList: true });
   element.addEventListener("click", onClick);
   element.addEventListener("command", onCommand);
+  element.addEventListener("show-toast", onShowToast);
   element.addEventListener("pointerenter", pauseTimers);
   element.addEventListener("pointerleave", resumeTimers);
   element.addEventListener("focusin", pauseTimers);
   element.addEventListener("focusout", resumeTimers);
-  instances.set(element, { show: add });
   return () => {
     stop();
     stopTracking();
     observer.disconnect();
     element.removeEventListener("click", onClick);
     element.removeEventListener("command", onCommand);
+    element.removeEventListener("show-toast", onShowToast);
     element.removeEventListener("pointerenter", pauseTimers);
     element.removeEventListener("pointerleave", resumeTimers);
     element.removeEventListener("focusin", pauseTimers);
@@ -110,6 +109,10 @@ export default function controller(host) {
     for (const timer of timers.values()) clearTimeout(timer.handle);
     timers.clear();
     if (element.matches(":popover-open")) element.hidePopover();
-    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-tooltip/ui-tooltip.html

@@ -152,7 +152,7 @@
       font: inherit;
     }
 
-    :host-state([inverse]) .surface {
+    :host([inverse]) .surface {
       --_tooltip-line: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
       background: var(--_ui-tooltip-inverse-surface, var(--ui-text-primary));
       color: var(--_ui-tooltip-inverse-text, var(--ui-surface-default));

package/components/ui-tooltip/ui-tooltip.js

@@ -2,7 +2,7 @@ import { closeOverlay, createAnchoredSurface, createIdResolver, onOverlayOpen, o
 
 const warmTooltips = new WeakMap();
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const warm = warmTooltips.get(document) ?? { active: 0, until: 0 };
@@ -190,3 +190,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-tree/ui-tree.html

@@ -75,12 +75,12 @@
 
     /* Reaches the items the way density does, so the setting lives on the tree the way a reader
        thinks about it: this list scrolls its long names. */
-    :host-state([marquee]) {
+    :host([marquee]) {
       --_ui-default-tree-item-marquee: 1;
     }
 
     /* The items' defaults for this density: an item's own hook still wins. */
-    :host-state([density="compact"]) {
+    :host([density="compact"]) {
       --_ui-default-tree-item-min-block-size: var(--ui-control-size-sm);
       --_ui-default-tree-item-font-size: var(--ui-font-size-sm);
       --_ui-default-tree-item-label-padding-block: 0;

package/components/ui-tree/ui-tree.js

@@ -16,7 +16,7 @@ function parentItem(item, tree) {
   return parent && tree.contains(parent) ? parent : null;
 }
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const document = element.ownerDocument;
   const itemSelector = '[role="treeitem"]';
@@ -483,3 +483,8 @@ export default function controller(host) {
     element.removeEventListener("click", onMoveClick, 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-tree-item/ui-tree-item.html

@@ -179,15 +179,15 @@
     }
 
     /* Selection is the same surface recipe as destination and choice rows. */
-    :host-state([selected]) > .row {
+    :host([selected]) > .row {
       color: var(--ui-selection-text);
       background: var(--ui-selection-surface);
     }
-    :host-state([selected]):not([aria-disabled="true"]) > .row > .leading {
+    :host([selected]):not([aria-disabled="true"]) > .row > .leading {
       color: var(--ui-selection-text);
     }
 
-    :host-state([disabled]) .row {
+    :host([disabled]) .row {
       color: var(--ui-disabled-text);
       background: var(--ui-disabled-surface);
     }
@@ -687,7 +687,7 @@
         outline: var(--ui-focus-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-focus-width));
       }
-      :host-state([selected]):not(:focus-visible):not([aria-disabled="true"]) > .row {
+      :host([selected]):not(:focus-visible):not([aria-disabled="true"]) > .row {
         outline: var(--ui-border-width) solid Highlight;
         outline-offset: calc(-1 * var(--ui-border-width));
       }

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

@@ -17,7 +17,7 @@ const CONTROLS = [
     "radio", "switch", "tab", "slider", "spinbutton", "combobox", "textbox", "dialog"].map((role) => `[role="${role}"]`),
 ].join(", ");
 
-export default function controller(host) {
+function connect(host) {
   const element = host.element;
   const { row, disclosure, children, leading, label, actions, labelText } = host.refs;
   // Touch use enlarges rows and hides drag handles (see the template's styles).
@@ -233,3 +233,8 @@ export default function controller(host) {
     row.removeEventListener("click", onRowClick);
   };
 }
+
+/** Keep DOM setup and its cleanup tied to each connection, including reconnects. */
+export default function controller(host) {
+  host.on("connect", () => connect(host));
+}