@threadlabs/looma 0.22.9 → 0.22.11

package/components/ui-radio/ui-radio.js

@@ -9,18 +9,18 @@ export default function controller(host) {
   const input = host.refs.input;
   describeInput(input, host.refs.description);
   const [trigger, stopTracking] = trackTrigger(host);
-  let external = host.state.checked;
+  let external = host.props.checked.value;
   host.state.internalChecked = Boolean(external);
   const stop = host.effect(() => {
-    input.defaultChecked = Boolean(host.state.checked);
-    if (host.state.checked === external) return;
-    external = host.state.checked;
+    input.defaultChecked = Boolean(host.props.checked.value);
+    if (host.props.checked.value === external) return;
+    external = host.props.checked.value;
     host.state.internalChecked = Boolean(external);
   });
   const onChange = () => {
     host.state.internalChecked = input.checked;
     if (!input.checked) return;
-    host.dispatch("change", { checked: input.checked, value: String(host.state.value ?? "on"), trigger: trigger() });
+    host.dispatch("change", { checked: input.checked, value: String(host.props.value.value ?? "on"), trigger: trigger() });
   };
   input.addEventListener("change", onChange);
   const stopReset = afterFormReset(input, () => {

package/components/ui-radio-group/ui-radio-group.js

@@ -8,22 +8,22 @@ let groups = 0;
 // them, so a radio's own disabled is never overwritten.
 export default function controller(host) {
   const element = host.element;
-  const name = String(host.state.name || `ui-radio-group-${++groups}`);
+  const name = String(host.props.name.value || `ui-radio-group-${++groups}`);
   const [trigger, stopTracking] = trackTrigger(host);
   const inputs = () => Array.from(element.querySelectorAll('input[type="radio"]'));
-  let external = host.state.value;
+  let external = host.props.value.value;
   // A radio's own required survives until the group's required changes, since either one makes the
   // whole name group required.
   let required = false;
   host.state.internalValue = String(external ?? "");
   const stop = host.effect(() => {
-    if (host.state.value !== external) {
-      external = host.state.value;
+    if (host.props.value.value !== external) {
+      external = host.props.value.value;
       host.state.internalValue = String(external ?? "");
     }
     const value = host.state.internalValue;
-    const applyRequired = Boolean(host.state.required) !== required;
-    required = Boolean(host.state.required);
+    const applyRequired = Boolean(host.props.required.value) !== required;
+    required = Boolean(host.props.required.value);
     for (const input of inputs()) {
       if (applyRequired) input.required = required;
       input.name = name;

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

@@ -4,7 +4,7 @@ export default function controller(host) {
 
   const update = () => {
     frame = 0;
-    const horizontal = host.state.orientation === "horizontal";
+    const horizontal = host.props.orientation.value === "horizontal";
     const extent = horizontal ? area.scrollWidth - area.clientWidth : area.scrollHeight - area.clientHeight;
     const rtl = horizontal && getComputedStyle(area).direction === "rtl";
     const position = horizontal ? (rtl ? -area.scrollLeft : area.scrollLeft) : area.scrollTop;

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

@@ -105,6 +105,14 @@
       background: var(--ui-overlay-backdrop);
     }
 
+    dialog:modal {
+      background: transparent;
+    }
+
+    dialog[data-ui-backdrop-hidden]::backdrop {
+      background: transparent;
+    }
+
     .panel {
       position: relative;
       display: flex;

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

@@ -1,11 +1,14 @@
+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) {
   const dialog = host.refs.dialog;
+  const document = dialog.ownerDocument;
+  const overlayId = `ui-search-shell-${Math.random().toString(36).slice(2, 11)}`;
   const [trigger, stopTracking] = trackTrigger(host);
-  let external = host.state.open;
-  let activeModal = Boolean(host.state.modal);
+  let external = host.props.open.value;
+  let activeModal = Boolean(host.props.modal.value);
   let suppressNativeClose = false;
   host.state.internalOpen = Boolean(external);
 
@@ -21,18 +24,22 @@ export default function controller(host) {
     suppressNativeClose = false;
   };
   const stop = host.effect(() => {
-    if (host.state.open !== external) {
-      external = host.state.open;
+    if (host.props.open.value !== external) {
+      external = host.props.open.value;
       host.state.internalOpen = Boolean(external);
     }
-    const modal = Boolean(host.state.modal);
+    const modal = Boolean(host.props.modal.value);
     if (dialog.open && modal !== activeModal) closeNative();
     activeModal = modal;
     if (host.state.internalOpen && !dialog.open) {
       if (modal) dialog.showModal();
       else dialog.show();
-    } else if (!host.state.internalOpen) {
+    }
+    if (host.state.internalOpen) {
+      openOverlay({ id: overlayId, modal, element: dialog, modalElement: dialog, dismissible: false, requestClose: () => {} });
+    } else {
       closeNative();
+      closeOverlay(document, overlayId);
     }
   });
 
@@ -64,11 +71,13 @@ export default function controller(host) {
     else rows[fromSearch ? rows.length - 1 : (index - 1 + rows.length) % rows.length].focus();
   };
   const onClick = (event) => {
-    if (host.state.dismissible && event.target === dialog) dispatchClose("light-dismiss", trigger());
+    if (host.props.dismissible.value && event.target === dialog) dispatchClose("light-dismiss", trigger());
   };
   // Only the dialog's own close: a tooltip, menu, or popover inside it reports "close" too, and it bubbles.
   const onClose = (event) => {
     if (event.target !== dialog) return;
+    if (dialog.open) return;
+    closeOverlay(document, overlayId);
     if (!suppressNativeClose && host.state.internalOpen) dispatchClose("action", trigger());
   };
   dialog.addEventListener("cancel", onCancel);
@@ -83,5 +92,6 @@ export default function controller(host) {
     dialog.removeEventListener("click", onClick);
     dialog.removeEventListener("close", onClose);
     closeNative();
+    closeOverlay(document, overlayId);
   };
 }

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

@@ -4,7 +4,7 @@
 export default function controller(host) {
   const select = host.element;
   const apply = () => {
-    const value = host.state.value;
+    const value = host.props.value.value;
     if (value === undefined || value === null) return;
     for (const option of select.options) option.defaultSelected = option.value === String(value);
     if (select.value !== String(value)) select.value = String(value);

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

@@ -1,3 +1,5 @@
+import { announceOverlayOpen } from "../shared/overlay.js";
+
 const BREAKPOINTS = { sm: "40rem", md: "48rem", lg: "64rem" };
 
 function positive(value, fallback) {
@@ -16,14 +18,14 @@ export default function controller(host) {
   const view = document.defaultView;
   let pointerAbort;
   let media;
-  let lastCollapsed = Boolean(host.state.collapsed);
-  let lastWidth = Number(host.state.width) || 0;
+  let lastCollapsed = Boolean(host.props.collapsed.value);
+  let lastWidth = Number(host.props.width.value) || 0;
   host.state.internalCollapsed = lastCollapsed;
   host.state.drawer = false;
 
   const bounds = () => {
-    const min = positive(host.state.minWidth, 200);
-    return { min, max: Math.max(min, positive(host.state.maxWidth, 480)), step: positive(host.state.resizeStep, 16) };
+    const min = positive(host.props.minWidth.value, 200);
+    return { min, max: Math.max(min, positive(host.props.maxWidth.value, 480)), step: positive(host.props.resizeStep.value, 16) };
   };
   const currentWidth = () => element.getBoundingClientRect().width || 280;
   const setWidth = (value, trigger = "programmatic") => {
@@ -44,7 +46,7 @@ export default function controller(host) {
     if (event.key === "End") next = max;
     if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
       const delta = event.key === "ArrowRight" ? step : -step;
-      next = currentWidth() + (host.state.side === "end" ? -delta : delta);
+      next = currentWidth() + (host.props.side.value === "end" ? -delta : delta);
     }
     if (next === null) return;
     event.preventDefault();
@@ -55,7 +57,7 @@ export default function controller(host) {
     event.preventDefault();
     const startX = event.clientX;
     const startWidth = currentWidth();
-    const multiplier = host.state.side === "end" ? -1 : 1;
+    const multiplier = host.props.side.value === "end" ? -1 : 1;
     pointerAbort = new AbortController();
     const signal = pointerAbort.signal;
     const finish = () => {
@@ -75,7 +77,7 @@ export default function controller(host) {
     pointerAbort = undefined;
   };
   const syncHandle = () => {
-    if (!host.state.resizable || host.state.drawer || host.state.internalCollapsed) { endPointer(); return; }
+    if (!host.props.resizable.value || host.state.drawer || host.state.internalCollapsed) { endPointer(); return; }
     const { min, max } = bounds();
     handle.setAttribute("aria-valuemin", String(min));
     handle.setAttribute("aria-valuemax", String(max));
@@ -103,7 +105,7 @@ export default function controller(host) {
     media?.removeEventListener("change", applyMode);
     // Without media queries (a non-browser DOM) the sidebar simply stays docked.
     if (typeof view.matchMedia !== "function") return;
-    const width = BREAKPOINTS[host.state.breakpoint] ?? BREAKPOINTS.md;
+    const width = BREAKPOINTS[host.props.breakpoint.value] ?? BREAKPOINTS.md;
     media = view.matchMedia(`(width < ${width})`);
     media.addEventListener("change", applyMode);
     applyMode();
@@ -134,16 +136,17 @@ export default function controller(host) {
   // report it again, forever. Only the drawer's own popover ToggleEvent, which has a newState, counts.
   const onPopoverToggle = (event) => {
     if (!host.state.drawer || event.target !== element || typeof event.newState !== "string") return;
+    if (event.newState === "open") announceOverlayOpen(document, element);
     host.dispatch("toggle", { open: event.newState === "open", mode: "drawer", trigger: "programmatic" });
   };
 
   const apply = () => {
-    const collapsed = Boolean(host.state.collapsed);
+    const collapsed = Boolean(host.props.collapsed.value);
     if (collapsed !== lastCollapsed) {
       lastCollapsed = collapsed;
       host.state.internalCollapsed = collapsed;
     }
-    const width = Number(host.state.width) || 0;
+    const width = Number(host.props.width.value) || 0;
     if (width !== lastWidth) {
       lastWidth = width;
       if (width > 0) setWidth(width);
@@ -160,9 +163,9 @@ export default function controller(host) {
   if (!invokerCommands) document.addEventListener("click", onDocumentClick);
   if (lastWidth > 0) setWidth(lastWidth);
   watchBreakpoint();
-  let lastBreakpoint = host.state.breakpoint;
+  let lastBreakpoint = host.props.breakpoint.value;
   const stop = host.effect(() => {
-    if (host.state.breakpoint !== lastBreakpoint) { lastBreakpoint = host.state.breakpoint; watchBreakpoint(); }
+    if (host.props.breakpoint.value !== lastBreakpoint) { lastBreakpoint = host.props.breakpoint.value; watchBreakpoint(); }
     apply();
   });
   apply();

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

@@ -9,17 +9,17 @@ export default function controller(host) {
   const input = host.refs.input;
   describeInput(input, host.refs.description);
   const [trigger, stopTracking] = trackTrigger(host);
-  let external = host.state.checked;
+  let external = host.props.checked.value;
   host.state.internalChecked = Boolean(external);
   const stop = host.effect(() => {
-    input.defaultChecked = Boolean(host.state.checked);
-    if (host.state.checked === external) return;
-    external = host.state.checked;
+    input.defaultChecked = Boolean(host.props.checked.value);
+    if (host.props.checked.value === external) return;
+    external = host.props.checked.value;
     host.state.internalChecked = Boolean(external);
   });
   const onChange = () => {
     host.state.internalChecked = input.checked;
-    host.dispatch("change", { checked: input.checked, value: String(host.state.value ?? "on"), trigger: trigger() });
+    host.dispatch("change", { checked: input.checked, value: String(host.props.value.value ?? "on"), trigger: trigger() });
   };
   input.addEventListener("change", onChange);
   const stopReset = afterFormReset(input, () => {

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

@@ -2,7 +2,7 @@
 export default function controller(host) {
   const element = host.element;
   const update = () => {
-    const limit = Number(host.state.limit);
+    const limit = Number(host.props.limit.value);
     host.state.overLimit = Number.isFinite(limit) && limit >= 1 && element.children.length > Math.floor(limit);
   };
   const stop = host.effect(update);

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

@@ -12,7 +12,7 @@ export default function controller(host) {
     for (const tab of tabButtons()) tab.tabIndex = tab === button ? 0 : -1;
     button.focus();
   };
-  let external = String(host.state.value || "");
+  let external = String(host.props.value.value || "");
   host.state.internalValue = external;
 
   const readPanels = () => {
@@ -45,7 +45,7 @@ export default function controller(host) {
     }
   };
   const stop = host.effect(() => {
-    const value = String(host.state.value || "");
+    const value = String(host.props.value.value || "");
     if (value !== external) {
       external = value;
       host.state.internalValue = value;
@@ -69,10 +69,10 @@ export default function controller(host) {
     const button = event.target.closest?.('[role="tab"]');
     if (!button || !list.contains(button)) return;
     const buttons = tabButtons().filter((candidate) => !candidate.disabled);
-    const vertical = host.state.orientation === "vertical";
+    const vertical = host.props.orientation.value === "vertical";
     const previousKey = vertical ? "ArrowUp" : "ArrowLeft";
     const nextKey = vertical ? "ArrowDown" : "ArrowRight";
-    if (host.state.activation === "manual" && (event.key === "Enter" || event.key === " ")) {
+    if (host.props.activation.value === "manual" && (event.key === "Enter" || event.key === " ")) {
       event.preventDefault();
       select(button, "keyboard");
       return;
@@ -81,7 +81,7 @@ export default function controller(host) {
     event.preventDefault();
     const index = buttons.indexOf(button);
     const next = event.key === "Home" ? buttons[0] : event.key === "End" ? buttons.at(-1) : buttons[(index + (event.key === nextKey ? 1 : buttons.length - 1)) % buttons.length];
-    if (host.state.activation !== "manual") select(next, "keyboard");
+    if (host.props.activation.value !== "manual") select(next, "keyboard");
     focusTab(next);
   };
   const onFocusout = (event) => {

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

@@ -2,7 +2,7 @@
 // value is also made the native default, so a form reset returns to it.
 export default function controller(host) {
   return host.effect(() => {
-    const value = host.state.value;
+    const value = host.props.value.value;
     if (value === undefined || value === null) return;
     host.element.defaultValue = String(value);
     if (host.element.value !== String(value)) host.element.value = String(value);

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

@@ -9,7 +9,7 @@ export default function controller(host) {
   const element = host.element;
   const { action } = host.refs;
   if (!element.id) element.id = `ui-toast-authored-${++toastSequence}`;
-  let remaining = Math.max(0, Number(host.state.duration) || 0);
+  let remaining = Math.max(0, Number(host.props.duration.value) || 0);
   let started = 0;
   let timer = null;
   let paused = false;
@@ -37,7 +37,7 @@ export default function controller(host) {
   const resume = () => {
     if (!paused || element.matches(":hover, :focus-within")) return;
     paused = false;
-    if (host.state.duration > 0 && remaining <= 0) { dismiss("timeout", "programmatic"); return; }
+    if (host.props.duration.value > 0 && remaining <= 0) { dismiss("timeout", "programmatic"); return; }
     start();
   };
   const onFocusOut = () => queueMicrotask(resume);
@@ -45,7 +45,7 @@ export default function controller(host) {
     if (event.target.closest?.(".dismiss") || action?.contains(event.target)) dismiss("action", inputFor(event));
   };
   const stop = host.effect(() => {
-    const duration = Math.max(0, Number(host.state.duration) || 0);
+    const duration = Math.max(0, Number(host.props.duration.value) || 0);
     if (duration === remaining || dismissed) return;
     remaining = duration;
     start();

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

@@ -1,3 +1,4 @@
+import { announceOverlayOpen } from "../shared/overlay.js";
 import { trackTrigger } from "../shared/trigger.js";
 
 const instances = new WeakMap();
@@ -16,8 +17,11 @@ export default function controller(host) {
   const [trigger, stopTracking] = trackTrigger(host);
   const toasts = () => host.state.toasts ?? [];
   const authored = () => Array.from(element.children).some((child) => !child.classList.contains("toast"));
+  let announcedVisible = false;
   const sync = () => {
     const visible = authored() || toasts().length > 0;
+    if (visible && !announcedVisible) announceOverlayOpen(element.ownerDocument, element);
+    announcedVisible = visible;
     if (visible && !element.matches(":popover-open")) element.showPopover();
     else if (!visible && element.matches(":popover-open")) element.hidePopover();
   };
@@ -68,7 +72,7 @@ export default function controller(host) {
     const id = String(options.id || `ui-toast-${++toastIds}`);
     const tone = ["neutral", "info", "success", "warning", "danger"].includes(options.tone) ? options.tone : "neutral";
     host.state.toasts = [...toasts(), { id, message: String(message), tone, role: tone === "danger" ? "alert" : "status", closing: false }];
-    const duration = Math.max(0, Number(options.duration ?? host.state.duration ?? 0));
+    const duration = Math.max(0, Number(options.duration ?? host.props.duration.value ?? 0));
     if (duration > 0) {
       timers.set(id, { remaining: duration, started: 0, handle: 0 });
       startTimer(id);

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

@@ -1,4 +1,4 @@
-import { closeOverlay, createAnchoredSurface, createIdResolver, openOverlay } from "../shared/overlay.js";
+import { closeOverlay, createAnchoredSurface, createIdResolver, onOverlayOpen, openOverlay } from "../shared/overlay.js";
 
 const warmTooltips = new WeakMap();
 
@@ -34,7 +34,7 @@ export default function controller(host) {
   let hideTimer = null;
   let lastFor;
   let lastPlacement;
-  let lastExternalOpen = Boolean(host.state.open);
+  let lastExternalOpen = Boolean(host.props.open.value);
   host.state.internalOpen = lastExternalOpen;
 
   const clearShow = () => { if (showTimer !== null) clearTimeout(showTimer); showTimer = null; };
@@ -44,14 +44,14 @@ export default function controller(host) {
     if (Boolean(host.state.internalOpen) === open) return;
     host.state.internalOpen = open;
     trackVisible(open);
-    if (trigger && host.state.trigger === "click") trigger.setAttribute("aria-expanded", String(open));
+    if (trigger && host.props.trigger.value === "click") trigger.setAttribute("aria-expanded", String(open));
     host.dispatch(open ? "open" : "close", { open, reason: "action", trigger: input });
   };
   const onKeydown = (event) => {
     if (event.key !== "Escape") return;
     clearTimers();
     // A tooltip the reader opened is theirs to close.
-    if (host.state.trigger === "click" && host.state.internalOpen) setOpen(false, "keyboard");
+    if (host.props.trigger.value === "click" && host.state.internalOpen) setOpen(false, "keyboard");
   };
   const onEnter = (event) => {
     if (event.pointerType === "touch") return;
@@ -60,7 +60,7 @@ export default function controller(host) {
     showTimer = setTimeout(() => {
       showTimer = null;
       setOpen(true, "pointer");
-    }, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, Number(host.state.showDelay ?? 500)));
+    }, warm.active > 0 || warm.until > Date.now() ? 0 : Math.max(0, Number(host.props.showDelay.value ?? 500)));
   };
   const onLeave = () => {
     clearShow();
@@ -68,7 +68,7 @@ export default function controller(host) {
     hideTimer = setTimeout(() => {
       hideTimer = null;
       setOpen(false, "pointer");
-    }, Math.max(0, Number(host.state.hideDelay ?? 100)));
+    }, Math.max(0, Number(host.props.hideDelay.value ?? 100)));
   };
   const onFocusin = () => {
     focused = true;
@@ -104,7 +104,7 @@ export default function controller(host) {
     ids.add(element.id);
     trigger.setAttribute("aria-describedby", [...ids].join(" "));
     trigger.addEventListener("keydown", onKeydown);
-    const how = host.state.trigger ?? "hover";
+    const how = host.props.trigger.value ?? "hover";
     if (how === "click") {
       // A question-mark button says nothing on hover: it opens when pressed, and closes the same way.
       trigger.addEventListener("click", onClick);
@@ -123,8 +123,8 @@ export default function controller(host) {
     apply();
   });
   const setup = () => {
-    const nextFor = String(host.state.for ?? "");
-    const nextPlacement = String(host.state.placement ?? "top");
+    const nextFor = String(host.props.for.value ?? "");
+    const nextPlacement = String(host.props.placement.value ?? "top");
     if (surface && nextFor === lastFor && nextPlacement === lastPlacement) return;
     lastFor = nextFor;
     lastPlacement = nextPlacement;
@@ -138,14 +138,24 @@ export default function controller(host) {
     surface = createAnchoredSurface(element, { anchor: trigger, placement: nextPlacement, gap: offset });
   };
   const close = (reason, input) => {
-    if (reason !== "escape" && reason !== "light-dismiss") return;
+    if (reason !== "escape" && reason !== "light-dismiss" && reason !== "programmatic") return;
     clearTimers();
+    if (!host.state.internalOpen) return;
     host.state.internalOpen = false;
     trackVisible(false);
+    surface?.hide();
+    closeOverlay(document, overlayId);
+    if (trigger && host.props.trigger.value === "click") trigger.setAttribute("aria-expanded", "false");
     host.dispatch("close", { open: false, reason, trigger: input });
   };
+  const stopOverlayOpen = onOverlayOpen(document, (id) => {
+    if (id === overlayId) return;
+    clearTimers();
+    focused = false;
+    close("programmatic", "programmatic");
+  });
   const apply = () => {
-    const externalOpen = Boolean(host.state.open);
+    const externalOpen = Boolean(host.props.open.value);
     if (externalOpen !== lastExternalOpen) {
       lastExternalOpen = externalOpen;
       host.state.internalOpen = externalOpen;
@@ -169,6 +179,7 @@ export default function controller(host) {
   apply();
   return () => {
     stop();
+    stopOverlayOpen();
     ids.stop();
     clearTimers();
     trackVisible(false);

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

@@ -41,7 +41,7 @@ export default function controller(host) {
   const allItems = () => Array.from(element.querySelectorAll(itemSelector));
   const visibleItems = () => allItems().filter((item) => item.getClientRects().length > 0 && item.getAttribute("aria-disabled") !== "true");
   const rowFor = (item) => item.querySelector(":scope > .row");
-  const selectionMode = () => String(host.state.selection || "none");
+  const selectionMode = () => String(host.props.selection.value || "none");
   // Only a branch has aria-expanded.
   const acceptsChildren = (item) => item.hasAttribute("aria-expanded") && item.getAttribute("aria-disabled") !== "true";
   const metadata = (item) => ({
@@ -70,7 +70,7 @@ export default function controller(host) {
     if (nextPosition === "inside") {
       if (!acceptsChildren(to) || (toMeta.accepts.length && !toMeta.accepts.includes(fromMeta.type))) return { reason: "incompatible" };
     } else if (fromMeta.type !== toMeta.type) return { reason: "incompatible" };
-    const maxDepth = Math.max(0, Math.floor(Number(host.state.maxDepth ?? 0)));
+    const maxDepth = Math.max(0, Math.floor(Number(host.props.maxDepth.value ?? 0)));
     if (maxDepth > 0) {
       const resultingDepth = Math.max(0, Math.floor(depth(to))) + (nextPosition === "inside" ? 1 : 0) + subtreeDepth(from);
       if (resultingDepth > maxDepth) return { reason: "max-depth", maxDepth, resultingDepth };
@@ -91,7 +91,7 @@ export default function controller(host) {
       hoverTimer = null;
       hoverKey = null;
       if (key) expandTarget(key);
-    }, Math.max(0, Number(host.state.hoverExpandDelay ?? 700)));
+    }, Math.max(0, Number(host.props.hoverExpandDelay.value ?? 700)));
   };
   const clearTarget = () => {
     target?.removeAttribute("data-drop-position");
@@ -417,7 +417,7 @@ export default function controller(host) {
   });
   observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-selected"] });
   const stop = host.effect(() => {
-    element.setAttribute("aria-label", String(host.state.label || "Tree"));
+    element.setAttribute("aria-label", String(host.props.label.value || "Tree"));
     syncSelection();
   });
   syncStructure();

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

@@ -24,10 +24,10 @@ export default function controller(host) {
   trackInputModality(element.ownerDocument);
   const childItems = () => Array.from(children?.children ?? [])
     .filter((child) => child.matches?.('[role="treeitem"]'));
-  let lastExternalExpanded = Boolean(host.state.expanded);
+  let lastExternalExpanded = Boolean(host.props.expanded.value);
   host.state.internalExpanded = lastExternalExpanded;
 
-  const isContainer = () => Boolean(host.state.container) || Boolean(host.state.lazy) || childItems().length > 0;
+  const isContainer = () => Boolean(host.props.container.value) || Boolean(host.props.lazy.value) || childItems().length > 0;
   const updateLevel = () => {
     const tree = element.closest('[role="tree"]');
     let ancestor = parentItem(element);
@@ -40,21 +40,21 @@ export default function controller(host) {
   };
 
   const apply = () => {
-    const externalExpanded = Boolean(host.state.expanded);
+    const externalExpanded = Boolean(host.props.expanded.value);
     if (externalExpanded !== lastExternalExpanded) {
       lastExternalExpanded = externalExpanded;
       host.state.internalExpanded = externalExpanded;
     }
     const container = isContainer();
     const expanded = container && Boolean(host.state.internalExpanded);
-    const name = String(host.state.label || "Unnamed item");
+    const name = String(host.props.label.value || "Unnamed item");
     host.state.isContainer = container;
     // A leaf has no aria-expanded at all; "false" would announce it as a collapsed branch.
     if (container) element.setAttribute("aria-expanded", String(expanded));
     else element.removeAttribute("aria-expanded");
-    if (host.state.lazy && expanded && childItems().length === 0) element.setAttribute("aria-busy", "true");
+    if (host.props.lazy.value && expanded && childItems().length === 0) element.setAttribute("aria-busy", "true");
     else element.removeAttribute("aria-busy");
-    element.tabIndex = host.state.disabled || !host.state.tabStop ? -1 : 0;
+    element.tabIndex = host.props.disabled.value || !host.state.tabStop ? -1 : 0;
     const depth = Number(host.state.structuralLevel ?? 1) - 1;
     element.style.setProperty("--ui-tree-item-depth", String(depth));
     // Nested items already sit inside their parent's indented box. Add just one local step.
@@ -64,15 +64,15 @@ export default function controller(host) {
   };
 
   const setExpanded = (next, trigger) => {
-    if (!isContainer() || host.state.disabled || Boolean(host.state.internalExpanded) === next) return;
+    if (!isContainer() || host.props.disabled.value || Boolean(host.state.internalExpanded) === next) return;
     host.state.internalExpanded = next;
     apply();
-    host.dispatch("expand", { id: String(host.state.itemId || ""), expanded: next, trigger });
+    host.dispatch("expand", { id: String(host.props.itemId.value || ""), expanded: next, trigger });
     element.dispatchEvent(new CustomEvent("ui-tree-expansion-change", { bubbles: true }));
   };
   const onDisclosureClick = (event) => { event.stopPropagation(); setExpanded(!Boolean(host.state.internalExpanded), triggerFor(event)); };
   const onRowClick = (event) => {
-    if (host.state.disabled) return;
+    if (host.props.disabled.value) return;
     const interactive = event.composedPath().some((node) => node instanceof HTMLElement && node.matches?.(CONTROLS));
     if (interactive) return;
     if (isContainer()) {
@@ -84,7 +84,7 @@ export default function controller(host) {
     const link = labelText?.querySelector("a[href]");
     if (link) link.dispatchEvent(new MouseEvent("click", event));
   };
-  const onRoving = (event) => { host.state.tabStop = Boolean(event.detail?.active) && !host.state.disabled; apply(); };
+  const onRoving = (event) => { host.state.tabStop = Boolean(event.detail?.active) && !host.props.disabled.value; apply(); };
   const onExpansionRequest = (event) => {
     if (typeof event.detail?.expanded === "boolean") setExpanded(event.detail.expanded, event.detail.trigger ?? "keyboard");
   };
@@ -113,7 +113,7 @@ export default function controller(host) {
   let pointerHover = false;
   let keyboardFocus = false;
   // The tree sets this for its items; an item's own prop overrides it either way.
-  const marqueeWanted = () => host.state.marquee
+  const marqueeWanted = () => host.props.marquee.value
     || getComputedStyle(element).getPropertyValue("--_ui-default-tree-item-marquee").trim() === "1";
   // A slotted link may fill the row and have padding past its name. Measure the rendered letters,
   // since moving that link's box to the actions would send a short name too far (or move it at all).