@threadlabs/looma 0.22.8 → 0.22.10

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

@@ -8,15 +8,15 @@ export default function controller(host) {
   const document = element.ownerDocument;
   const { preview, input } = host.refs;
 
-  let lastExternalEdit = Boolean(host.state.edit);
-  let lastExternalValue = String(host.state.value ?? "");
+  let lastExternalEdit = Boolean(host.props.edit.value);
+  let lastExternalValue = String(host.props.value.value ?? "");
   host.state.internalEdit = lastExternalEdit;
   host.state.internalValue = lastExternalValue;
   host.state.draft = lastExternalValue;
 
   const apply = () => {
-    const externalEdit = Boolean(host.state.edit);
-    const externalValue = String(host.state.value ?? "");
+    const externalEdit = Boolean(host.props.edit.value);
+    const externalValue = String(host.props.value.value ?? "");
     if (externalEdit !== lastExternalEdit) {
       lastExternalEdit = externalEdit;
       host.state.internalEdit = externalEdit;
@@ -29,13 +29,13 @@ export default function controller(host) {
     }
     // The inactive input stays in layout (it shares the value's cell) but out of the tab order.
     input.tabIndex = host.state.internalEdit ? 0 : -1;
-    const maxLength = Number(host.state.maxLength);
+    const maxLength = Number(host.props.maxLength.value);
     if (Number.isFinite(maxLength) && maxLength > 0) input.maxLength = Math.floor(maxLength);
     else input.removeAttribute("maxlength");
   };
 
   const setEditing = (next, reason, trigger, returnFocus = true) => {
-    if (host.state.disabled || Boolean(host.state.internalEdit) === next) return;
+    if (host.props.disabled.value || Boolean(host.state.internalEdit) === next) return;
     // Measured before the input is disabled, which drops focus to the body. A press elsewhere has
     // not moved focus yet, so it says not to return it.
     const focusWasInside = returnFocus && element.contains(document.activeElement);

package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js

@@ -8,12 +8,12 @@ export default function controller(host) {
   const element = host.element;
   let selected = { rows: 3, cols: 3 };
   let preview = null;
-  let lastHeaderRow = Boolean(host.state.headerRow);
+  let lastHeaderRow = Boolean(host.props.headerRow.value);
   host.state.withHeaderRow = lastHeaderRow;
 
   const update = () => {
-    const rows = bounded(host.state.maxRows, 8);
-    const cols = bounded(host.state.maxCols, 8);
+    const rows = bounded(host.props.maxRows.value, 8);
+    const cols = bounded(host.props.maxCols.value, 8);
     selected = { rows: Math.min(selected.rows, rows), cols: Math.min(selected.cols, cols) };
     const active = preview ?? selected;
     host.state.rows = rows;
@@ -26,7 +26,7 @@ export default function controller(host) {
     });
   };
   const stop = host.effect(() => {
-    const headerRow = Boolean(host.state.headerRow);
+    const headerRow = Boolean(host.props.headerRow.value);
     if (headerRow !== lastHeaderRow) {
       lastHeaderRow = headerRow;
       host.state.withHeaderRow = headerRow;

package/components/ui-editor-mention-menu/ui-editor-mention-menu.js

@@ -5,7 +5,7 @@ export default function controller(host) {
   const element = host.element;
   const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
-    if (host.state.visible) positionMenu(element, normalizeAnchor(host.state.anchorRect), 320);
+    if (host.state.visible) positionMenu(element, normalizeAnchor(host.props.anchorRect.value), 320);
   };
   const options = () => Array.from(element.querySelectorAll('[role="option"]'));
   const syncOptions = () => {
@@ -19,18 +19,18 @@ export default function controller(host) {
     if (rows.length) element.setAttribute("aria-activedescendant", rows[active].id);
     else element.removeAttribute("aria-activedescendant");
     const empty = Boolean(host.refs.empty.children.length);
-    host.refs.empty.hidden = rows.length > 0 || host.state.loading;
-    const visible = Boolean(host.state.open && normalizeAnchor(host.state.anchorRect)
-      && (host.state.loading || rows.length > 0 || empty));
+    host.refs.empty.hidden = rows.length > 0 || host.props.loading.value;
+    const visible = Boolean(host.props.open.value && normalizeAnchor(host.props.anchorRect.value)
+      && (host.props.loading.value || rows.length > 0 || empty));
     if (host.state.visible !== visible) host.state.visible = visible;
     place();
   };
   const stop = host.effect(() => {
-    if (!authoredLabel) element.setAttribute("aria-label", String(host.state.label || "Mentions"));
-    const items = (Array.isArray(host.state.items) ? host.state.items : []).slice(0, 20);
+    if (!authoredLabel) element.setAttribute("aria-label", String(host.props.label.value || "Mentions"));
+    const items = (Array.isArray(host.props.items.value) ? host.props.items.value : []).slice(0, 20);
     host.state.rows = items.map((item) => ({ ...item, initials: item.initials ?? String(item.label).slice(0, 2).toUpperCase() }));
-    host.state.searching = Boolean(host.state.loading && !items.length);
-    host.state.active = Math.min(Number(host.state.selectedIndex ?? 0), Math.max(0, items.length - 1));
+    host.state.searching = Boolean(host.props.loading.value && !items.length);
+    host.state.active = Math.min(Number(host.props.selectedIndex.value ?? 0), Math.max(0, items.length - 1));
     host.state.prefix = element.id || "ui-editor-mention-menu";
     queueMicrotask(syncOptions);
   });

package/components/ui-editor-slash-menu/ui-editor-slash-menu.js

@@ -5,11 +5,11 @@ export default function controller(host) {
   const element = host.element;
   const authoredLabel = element.hasAttribute("aria-label") || element.hasAttribute("aria-labelledby");
   const place = () => {
-    if (host.state.visible) positionMenu(element, normalizeAnchor(host.state.anchorRect), 280);
+    if (host.state.visible) positionMenu(element, normalizeAnchor(host.props.anchorRect.value), 280);
   };
   const options = () => Array.from(element.querySelectorAll('[role="option"]'));
   const syncOptions = () => {
-    const query = String(host.state.query || "").trim().toLocaleLowerCase();
+    const query = String(host.props.query.value || "").trim().toLocaleLowerCase();
     const generated = host.state.rows.length > 0;
     for (const row of options()) {
       if (generated) break;
@@ -28,16 +28,16 @@ export default function controller(host) {
       row.setAttribute("aria-selected", String(index === active));
     });
     host.refs.empty.hidden = rows.length > 0;
-    const visible = Boolean(host.state.open && normalizeAnchor(host.state.anchorRect)
+    const visible = Boolean(host.props.open.value && normalizeAnchor(host.props.anchorRect.value)
       && (rows.length > 0 || host.refs.empty.children.length));
     if (host.state.visible !== visible) host.state.visible = visible;
     place();
   };
   const stop = host.effect(() => {
-    const items = Array.isArray(host.state.items) ? host.state.items : [];
-    if (!authoredLabel) element.setAttribute("aria-label", String(host.state.label || "Insert block"));
+    const items = Array.isArray(host.props.items.value) ? host.props.items.value : [];
+    if (!authoredLabel) element.setAttribute("aria-label", String(host.props.label.value || "Insert block"));
     host.state.rows = items.map((item) => ({ ...item, value: String(item.value ?? item.title) }));
-    host.state.active = Number(host.state.selectedIndex ?? 0);
+    host.state.active = Number(host.props.selectedIndex.value ?? 0);
     queueMicrotask(syncOptions);
   });
   const rowOf = (event) => event.target.closest?.('[role="option"]');

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

@@ -48,10 +48,10 @@ export default function controller(host) {
     frame = requestAnimationFrame(nudge);
   };
   const stop = host.effect(() => {
-    const scope = String(host.state.scope || "cell");
-    const enabled = new Set((Array.isArray(host.state.actions) ? host.state.actions : []).filter((action) =>
+    const scope = String(host.props.scope.value || "cell");
+    const enabled = new Set((Array.isArray(host.props.actions.value) ? host.props.actions.value : []).filter((action) =>
       scope === "cell" || (scope === "row" ? !action.includes("column") : !action.includes("row"))));
-    const background = String(host.state.cellBackground ?? "");
+    const background = String(host.props.cellBackground.value ?? "");
     const swatches = backgrounds.filter(([action]) => enabled.has(action))
       .map(([action, label, color]) => ({ action, label, color, selected: color === background }));
     host.state.swatches = swatches.length ? swatches : null;
@@ -59,10 +59,10 @@ export default function controller(host) {
       .map(([heading, items]) => ({
         heading,
         items: items.filter(([action]) => enabled.has(action))
-          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger", checkable: action.startsWith("toggle-header-"), checked: action === "toggle-header-row" ? Boolean(host.state.headerRow) : action === "toggle-header-column" ? Boolean(host.state.headerColumn) : false })),
+          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger", checkable: action.startsWith("toggle-header-"), checked: action === "toggle-header-row" ? Boolean(host.props.headerRow.value) : action === "toggle-header-column" ? Boolean(host.props.headerColumn.value) : false })),
       }))
       .filter((section) => section.items.length);
-    if (host.state.open) schedule();
+    if (host.props.open.value) schedule();
   });
   const onClick = (event) => {
     const action = event.target.closest?.("[data-action]")?.dataset.action;

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

@@ -99,7 +99,7 @@ export default function controller(host) {
     if (to !== from) host.dispatch(axis === "row" ? "reorder-row" : "reorder-column", { fromIndex: from, toIndex: to });
   };
   const boundaries = (axis) => {
-    const values = host.state.geometry?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
+    const values = host.props.geometry.value?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
     if (Array.isArray(values) && values.length >= 2 && values.every(Number.isFinite)) return values;
     const rect = element.getBoundingClientRect();
     return fallbackBoundaries(3, axis === "row" ? rect.height : rect.width);
@@ -118,19 +118,19 @@ export default function controller(host) {
     };
   });
   const stop = host.effect(() => {
-    if (!host.state.open) {
+    if (!host.props.open.value) {
       host.state.activeKey = "";
       return;
     }
     host.state.rows = controls("row");
     host.state.cols = controls("col");
-    const hovered = host.state.geometry?.hoveredCell ?? null;
+    const hovered = host.props.geometry.value?.hoveredCell ?? null;
     host.state.hovered = hovered && {
       ...hovered,
       rowOffset: `${hovered.top + hovered.height / 2}px`,
       columnOffset: `${hovered.left + hovered.width / 2}px`,
     };
-    const active = host.state.geometry?.activeCell ?? null;
+    const active = host.props.geometry.value?.activeCell ?? null;
     host.state.active = active && { ...active, menuLeft: `${active.left + active.width - 30}px`, menuTop: `${active.top + 6}px` };
     queueMicrotask(proximity.refresh);
   });

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

@@ -24,26 +24,26 @@ export default function controller(host) {
     menu.style.bottom = below >= above ? "auto" : "calc(100% + var(--ui-space-2))";
   };
   const stop = host.effect(() => {
-    const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
-    const alignment = host.state.cellAlignment === "center" || host.state.cellAlignment === "right" ? host.state.cellAlignment : "left";
+    const enabled = new Set(Array.isArray(host.props.actions.value) ? host.props.actions.value : []);
+    const alignment = host.props.cellAlignment.value === "center" || host.props.cellAlignment.value === "right" ? host.props.cellAlignment.value : "left";
     host.state.alignments = [["align-left", "Align left"], ["align-center", "Align center"], ["align-right", "Align right"]]
       .filter(([action]) => enabled.has(action))
       .map(([action, label]) => ({ action, label, active: action === `align-${alignment}` }));
     host.state.structure = [["add-row-after", "Add row", "rows"], ["add-column-after", "Add column", "columns"]]
       .filter(([action]) => enabled.has(action))
       .map(([action, label, icon]) => ({ action, label, icon }));
-    const background = String(host.state.cellBackground ?? "");
+    const background = String(host.props.cellBackground.value ?? "");
     host.state.swatches = backgrounds.filter(([action]) => enabled.has(action))
       .map(([action, label, color]) => ({ action, label, color, selected: color === background }));
     host.state.sections = overflowSections
       .map(([heading, items]) => ({
         heading,
         items: items.filter(([action]) => enabled.has(action))
-          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger", checkable: action.startsWith("toggle-header-"), checked: action === "toggle-header-row" ? Boolean(host.state.headerRow) : action === "toggle-header-column" ? Boolean(host.state.headerColumn) : false })),
+          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger", checkable: action.startsWith("toggle-header-"), checked: action === "toggle-header-row" ? Boolean(host.props.headerRow.value) : action === "toggle-header-column" ? Boolean(host.props.headerColumn.value) : false })),
       }))
       .filter((section) => section.items.length);
     host.state.hasOverflow = host.state.swatches.length > 0 || host.state.sections.length > 0;
-    if (!host.state.open || !host.state.hasOverflow) host.state.overflowOpen = false;
+    if (!host.props.open.value || !host.state.hasOverflow) host.state.overflowOpen = false;
   });
   const onClick = (event) => {
     const action = event.target.closest?.("[data-action]")?.dataset.action;

package/components/ui-form-field/ui-form-field.js

@@ -44,7 +44,7 @@ export default function controller(host) {
       if (!help.id) help.id = id("form-field-help");
       described.push(help.id);
     }
-    if (error && host.state.invalid) {
+    if (error && host.props.invalid.value) {
       if (!error.id) error.id = id("form-field-error");
       described.push(error.id);
     }
@@ -52,9 +52,9 @@ export default function controller(host) {
     const next = Array.from(new Set([...external, ...described])).join(" ");
     if (next && input.getAttribute("aria-describedby") !== next) input.setAttribute("aria-describedby", next);
     else if (!next && input.hasAttribute("aria-describedby")) input.removeAttribute("aria-describedby");
-    input.disabled = Boolean(host.state.disabled);
-    input.required = Boolean(host.state.required);
-    input.setAttribute("aria-invalid", String(Boolean(host.state.invalid)));
+    input.disabled = Boolean(host.props.disabled.value);
+    input.required = Boolean(host.props.required.value);
+    input.setAttribute("aria-invalid", String(Boolean(host.props.invalid.value)));
   };
   const schedule = () => {
     if (queued) return;

package/components/ui-icon-button/ui-icon-button.js

@@ -1,11 +1,11 @@
 // Marks an anticipatory button for the enclosing ui-affordance-scope, which reveals it on proximity.
 export default function controller(host) {
   const stop = host.effect(() => {
-    if (host.state.anticipatory) host.element.setAttribute("data-ui-affordance", "button");
+    if (host.props.anticipatory.value) host.element.setAttribute("data-ui-affordance", "button");
     else host.element.removeAttribute("data-ui-affordance");
   });
   const onClick = (event) => {
-    if (!host.state.loading && !host.state.pending) return;
+    if (!host.props.loading.value && !host.props.pending.value) return;
     event.preventDefault();
     event.stopImmediatePropagation();
   };

package/components/ui-input/ui-input.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;
     const input = host.element;
     const text = String(value);

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

@@ -50,7 +50,7 @@ export default function controller(host) {
   };
   // Click, not pointerdown: a tap's click is a user activation, so a touch keyboard opens.
   const onClick = (event) => {
-    if (pressedAround(event) && !host.state.disabled) element.querySelector(".field input")?.focus();
+    if (pressedAround(event) && !host.props.disabled.value) element.querySelector(".field input")?.focus();
   };
   element.addEventListener("mousedown", onMousedown);
   element.addEventListener("click", onClick);

package/components/ui-listbox/ui-listbox.js

@@ -33,11 +33,11 @@ export default function controller(host) {
   let typeaheadTimer;
 
   const selected = () => Array.isArray(host.state.selection) ? host.state.selection : [];
-  const externallySelected = () => host.state.multiple
-    ? (Array.isArray(host.state.values) ? Array.from(new Set(host.state.values.map(String))) : null)
-    : (host.state.value === undefined || host.state.value === null ? null : [String(host.state.value)]);
+  const externallySelected = () => host.props.multiple.value
+    ? (Array.isArray(host.props.values.value) ? Array.from(new Set(host.props.values.value.map(String))) : null)
+    : (host.props.value.value === undefined || host.props.value.value === null ? null : [String(host.props.value.value)]);
   const defaultSelection = () => externallySelected()
-    ?? options.filter((option) => option.selected).map((option) => option.value).slice(0, host.state.multiple ? undefined : 1);
+    ?? options.filter((option) => option.selected).map((option) => option.value).slice(0, host.props.multiple.value ? undefined : 1);
   const enabledIndices = () => options.filter((option) => !option.disabled).map((option) => option.index);
   const render = () => {
     const set = new Set(selected());
@@ -83,9 +83,9 @@ export default function controller(host) {
   };
   const choose = (index, trigger) => {
     const option = options[index];
-    if (!option || option.disabled || host.state.disabled) return;
+    if (!option || option.disabled || host.props.disabled.value) return;
     activate(index);
-    if (host.state.multiple) {
+    if (host.props.multiple.value) {
       const current = selected();
       setSelection(current.includes(option.value)
         ? current.filter((value) => value !== option.value)
@@ -101,17 +101,17 @@ export default function controller(host) {
         : key === "ArrowDown" ? indices[(current + 1) % indices.length]
           : indices[(current <= 0 ? indices.length : current) - 1];
     activate(next);
-    if (!host.state.multiple) choose(next, "keyboard");
+    if (!host.props.multiple.value) choose(next, "keyboard");
   };
   const onClick = (event) => {
-    if (host.state.disabled) return;
+    if (host.props.disabled.value) return;
     const row = event.target.closest("[data-index]");
     if (!row || !element.contains(row)) return;
     element.focus();
     choose(Number(row.dataset.index), "pointer");
   };
   const onKeydown = (event) => {
-    if (host.state.disabled || event.altKey || event.metaKey || event.ctrlKey) return;
+    if (host.props.disabled.value || event.altKey || event.metaKey || event.ctrlKey) return;
     if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
       event.preventDefault();
       move(event.key);
@@ -125,7 +125,7 @@ export default function controller(host) {
       const match = options.find((option) => !option.disabled && option.label.toLocaleLowerCase().startsWith(typeahead));
       if (match) {
         activate(match.index);
-        if (!host.state.multiple) choose(match.index, "keyboard");
+        if (!host.props.multiple.value) choose(match.index, "keyboard");
       }
     }
   };
@@ -145,7 +145,7 @@ export default function controller(host) {
   authored.disabled = true;
   element.setAttribute("data-enhanced", "");
   const stop = host.effect(() => {
-    const signature = JSON.stringify([host.state.multiple, host.state.value, host.state.values]);
+    const signature = JSON.stringify([host.props.multiple.value, host.props.value.value, host.props.values.value]);
     if (signature !== external) {
       external = signature;
       initial = defaultSelection();
@@ -160,7 +160,7 @@ export default function controller(host) {
   return () => {
     stop();
     observer.disconnect();
-    authored.disabled = host.state.disabled;
+    authored.disabled = host.props.disabled.value;
     element.removeAttribute("data-enhanced");
     clearTimeout(typeaheadTimer);
     element.removeEventListener("click", onClick);

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

@@ -21,7 +21,7 @@ export default function controller(host) {
   let surface = null;
   let lastFor;
   let lastPlacement;
-  let lastExternalOpen = Boolean(host.state.open);
+  let lastExternalOpen = Boolean(host.props.open.value);
   host.state.internalOpen = lastExternalOpen;
 
   const onAnchorClick = (event) => {
@@ -51,8 +51,8 @@ export default function controller(host) {
     anchorAria = null;
   };
   const setup = () => {
-    const nextFor = host.state.inline ? "" : String(host.state.for ?? "");
-    const nextPlacement = String(host.state.placement ?? "bottom-start");
+    const nextFor = host.props.inline.value ? "" : String(host.props.for.value ?? "");
+    const nextPlacement = String(host.props.placement.value ?? "bottom-start");
     if (nextFor === lastFor && nextPlacement === lastPlacement && surface) return;
     lastFor = nextFor;
     lastPlacement = nextPlacement;
@@ -64,8 +64,8 @@ export default function controller(host) {
     surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement }) : null;
   };
   const apply = () => {
-    const inline = Boolean(host.state.inline);
-    const externalOpen = Boolean(host.state.open);
+    const inline = Boolean(host.props.inline.value);
+    const externalOpen = Boolean(host.props.open.value);
     if (externalOpen !== lastExternalOpen) {
       lastExternalOpen = externalOpen;
       host.state.internalOpen = externalOpen;
@@ -97,14 +97,14 @@ export default function controller(host) {
       return;
     }
     host.dispatch("select", { value, trigger });
-    if (host.state.inline) return;
+    if (host.props.inline.value) return;
     host.dispatch("close", { open: false, reason: "action", trigger });
     host.state.internalOpen = false;
   };
   const onClick = (event) => select(menuItemFrom(event.target), triggerFor(event));
   const onKeydown = (event) => {
     if (event.key === "Escape") {
-      if (host.state.inline) return;
+      if (host.props.inline.value) return;
       event.preventDefault();
       requestTopOverlayClose(document, "escape", "keyboard");
       return;

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

@@ -4,13 +4,13 @@ function radioScope(item) {
 
 export default function controller(host) {
   const item = host.element;
-  let external = Boolean(host.state.checked);
+  let external = Boolean(host.props.checked.value);
   host.state.internalChecked = external;
 
   const setChecked = (checked, trigger, announce) => {
     if (Boolean(host.state.internalChecked) === checked) return;
     host.state.internalChecked = checked;
-    if (announce) host.dispatch("change", { checked, value: String(host.state.value ?? ""), type: String(host.state.type), trigger });
+    if (announce) host.dispatch("change", { checked, value: String(host.props.value.value ?? ""), type: String(host.props.type.value), trigger });
   };
   const clearOtherRadios = (trigger, announce) => {
     const scope = radioScope(item);
@@ -21,8 +21,8 @@ export default function controller(host) {
     }
   };
   const onActivate = (event) => {
-    const type = String(host.state.type);
-    if (host.state.disabled || type === "action") return;
+    const type = String(host.props.type.value);
+    if (host.props.disabled.value || type === "action") return;
     const checked = type === "radio" ? true : !host.state.internalChecked;
     if (type === "radio") clearOtherRadios(event.detail.trigger, true);
     setChecked(checked, event.detail.trigger, true);
@@ -30,15 +30,15 @@ export default function controller(host) {
   };
   const onClear = (event) => setChecked(false, event.detail.trigger, event.detail.announce);
   const stop = host.effect(() => {
-    const checked = Boolean(host.state.checked);
+    const checked = Boolean(host.props.checked.value);
     if (checked === external) return;
     external = checked;
-    if (checked && host.state.type === "radio") clearOtherRadios("programmatic", false);
+    if (checked && host.props.type.value === "radio") clearOtherRadios("programmatic", false);
     setChecked(checked, "programmatic", false);
   });
   item.addEventListener("ui-menu-item-activate", onActivate);
   item.addEventListener("ui-menu-item-clear", onClear);
-  if (external && host.state.type === "radio") queueMicrotask(() => clearOtherRadios("programmatic", false));
+  if (external && host.props.type.value === "radio") queueMicrotask(() => clearOtherRadios("programmatic", false));
   return () => {
     stop();
     item.removeEventListener("ui-menu-item-activate", onActivate);

package/components/ui-popover/ui-popover.js

@@ -18,7 +18,7 @@ export default function controller(host) {
   let lastFor;
   let lastPlacement;
   let lastOpen;
-  let lastExternalOpen = Boolean(host.state.open);
+  let lastExternalOpen = Boolean(host.props.open.value);
   host.state.internalOpen = lastExternalOpen;
 
   const close = (reason, trigger) => {
@@ -47,8 +47,8 @@ export default function controller(host) {
     anchorExpanded = null;
   };
   const setup = () => {
-    const nextFor = String(host.state.for ?? "");
-    const nextPlacement = String(host.state.placement ?? "bottom-start");
+    const nextFor = String(host.props.for.value ?? "");
+    const nextPlacement = String(host.props.placement.value ?? "bottom-start");
     if (surface && nextFor === lastFor && nextPlacement === lastPlacement) return;
     lastFor = nextFor;
     lastPlacement = nextPlacement;
@@ -60,7 +60,7 @@ export default function controller(host) {
     surface = anchor ? createAnchoredSurface(element, { anchor, placement: nextPlacement, gap: offset }) : null;
   };
   const apply = () => {
-    const externalOpen = Boolean(host.state.open);
+    const externalOpen = Boolean(host.props.open.value);
     if (externalOpen !== lastExternalOpen) {
       lastExternalOpen = externalOpen;
       host.state.internalOpen = externalOpen;

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.js

@@ -4,8 +4,8 @@ import { trackTrigger } from "../shared/trigger.js";
 export default function controller(host) {
   const dialog = host.refs.dialog;
   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,11 +21,11 @@ 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) {
@@ -64,7 +64,7 @@ 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) => {

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