@threadlabs/looma 0.22.9 → 0.22.11

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

@@ -12,7 +12,7 @@ export default function controller(host) {
   const overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
   let trigger = null;
   let lastFor = "";
-  let lastExternalOpen = Boolean(host.state.open);
+  let lastExternalOpen = Boolean(host.props.open.value);
   let lastOpen;
   host.state.internalOpen = lastExternalOpen;
 
@@ -34,7 +34,7 @@ export default function controller(host) {
     apply();
   });
   const syncTrigger = () => {
-    const nextFor = String(host.state.for ?? "");
+    const nextFor = String(host.props.for.value ?? "");
     if (nextFor === lastFor) return;
     lastFor = nextFor;
     trigger?.removeEventListener("click", onTriggerClick);
@@ -47,22 +47,22 @@ export default function controller(host) {
     }
   };
   const apply = () => {
-    const externalOpen = Boolean(host.state.open);
+    const externalOpen = Boolean(host.props.open.value);
     if (externalOpen !== lastExternalOpen) {
       lastExternalOpen = externalOpen;
       host.state.internalOpen = externalOpen;
     }
-    host.state.accessibleLabel = inferredLabel(element, host.state.label);
+    host.state.accessibleLabel = inferredLabel(element, host.props.label.value);
     dialog?.setAttribute("aria-label", String(host.state.accessibleLabel));
-    if (host.state.alert) dialog?.setAttribute("role", "alertdialog");
+    if (host.props.alert.value) dialog?.setAttribute("role", "alertdialog");
     else dialog?.removeAttribute("role");
     syncTrigger();
     const open = Boolean(host.state.internalOpen);
     // `modeless` is a deprecated no-op: non-modal is the default. An alert dialog is always modal (APG alertdialog).
-    const modal = Boolean(host.state.modal || host.state.alert);
+    const modal = Boolean(host.props.modal.value || host.props.alert.value);
     // An unset or unknown closedby follows native <dialog>'s auto state: closerequest when modal, none otherwise.
-    const requestedClosedBy = ["any", "closerequest", "none"].includes(host.state.closedby) ? host.state.closedby : modal ? "closerequest" : "none";
-    const closedBy = host.state.alert && requestedClosedBy === "any" ? "closerequest" : requestedClosedBy;
+    const requestedClosedBy = ["any", "closerequest", "none"].includes(host.props.closedby.value) ? host.props.closedby.value : modal ? "closerequest" : "none";
+    const closedBy = host.props.alert.value && requestedClosedBy === "any" ? "closerequest" : requestedClosedBy;
     trigger?.setAttribute("aria-expanded", String(open));
     if (!dialog) return;
     dialog.setAttribute("closedby", closedBy);
@@ -72,7 +72,7 @@ export default function controller(host) {
         if (modal) dialog.showModal();
         else dialog.show();
       }
-      openOverlay({ id: overlayId, modal, element, dismissible: true, canClose: (reason) => reason === "light-dismiss" ? closedBy === "any" : reason !== "escape" || closedBy !== "none", requestClose });
+      openOverlay({ id: overlayId, modal, element, modalElement: dialog, dismissible: true, canClose: (reason) => reason === "light-dismiss" ? closedBy === "any" : reason !== "escape" || closedBy !== "none", requestClose });
     } else {
       if (dialog.open) dialog.close();
       closeOverlay(document, overlayId);
@@ -83,7 +83,7 @@ export default function controller(host) {
     lastOpen = open;
   };
   const onClose = (event) => {
-    if (event instanceof CustomEvent) return;
+    if (event instanceof CustomEvent || event.target !== dialog) return;
     // Consumers receive one Looma close event with a reason, not an additional native close event.
     event.stopImmediatePropagation();
     if (dialog.open || !host.state.internalOpen) return;
@@ -104,7 +104,7 @@ export default function controller(host) {
     requestTopOverlayClose(document, "escape", "keyboard");
   };
   const observer = new MutationObserver(() => {
-    const label = inferredLabel(element, host.state.label);
+    const label = inferredLabel(element, host.props.label.value);
     if (label !== host.state.accessibleLabel) host.state.accessibleLabel = label;
   });
   observer.observe(element, { childList: true, subtree: true, characterData: true });

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

@@ -16,7 +16,7 @@ export default function controller(host) {
   const document = host.element.ownerDocument;
   const [trigger, stopTracking] = trackTrigger(host);
   host.state.contentId = `ui-disclosure-${++disclosures}`;
-  let external = host.state.open;
+  let external = host.props.open.value;
   host.state.internalOpen = Boolean(external);
   let groupName = "";
   const member = {
@@ -27,7 +27,7 @@ export default function controller(host) {
     },
   };
   const syncGroup = (reason, how) => {
-    const name = String(host.state.name || "");
+    const name = String(host.props.name.value || "");
     if (name !== groupName) {
       if (groupName) groupFor(document, groupName).delete(member);
       groupName = name;
@@ -38,11 +38,11 @@ export default function controller(host) {
     }
   };
   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 level = Number(host.state.headingLevel);
+    const level = Number(host.props.headingLevel.value);
     host.state.headingRole = Number.isInteger(level) && level >= 2 && level <= 6 ? "heading" : null;
     host.state.headingAriaLevel = host.state.headingRole ? level : null;
     syncGroup("programmatic", "programmatic");
@@ -50,7 +50,7 @@ export default function controller(host) {
     else host.refs.panel.setAttribute("hidden", "until-found");
   });
   const onClick = () => {
-    if (host.state.disabled) return;
+    if (host.props.disabled.value) return;
     const open = !host.state.internalOpen;
     const how = trigger();
     host.state.internalOpen = open;

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

@@ -134,6 +134,20 @@
       white-space: nowrap;
     }
 
+    /* Fixed text is part of the value, but should not look editable. */
+    .affix:has([slot="prefix"]),
+    .affix:has([slot="suffix"]) {
+      background: var(--ui-surface-muted);
+    }
+
+    .affix:has([slot="prefix"]) {
+      border-inline-end: 1px solid var(--ui-border-divider);
+    }
+
+    .affix:has([slot="suffix"]) {
+      border-inline-start: 1px solid var(--ui-border-divider);
+    }
+
     /* Centred rather than padded above and below: the group is exactly a lone Input's height, so a
        small button sits inside it with the difference split evenly, and the field keeps its height. */
     .action {

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;