@threadlabs/looma 0.1.23 → 0.1.24

package/dist/{ui-checkbox.entry-DMZJB3RE.js → ui-checkbox.entry-OB6GFC4M.js}

@@ -1,3 +1,7 @@
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail,
   eventToTrigger
@@ -7,7 +11,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-checkbox.entry.js
 var uiCheckboxCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([aria-disabled='true']),:host([data-disabled='true']){opacity:0.6;cursor:not-allowed}::slotted(input[type='checkbox']){accent-color:var(--ui-accent-solid);width:1.125em;height:1.125em;cursor:pointer}::slotted(input[type='checkbox']:focus-visible){outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
@@ -18,7 +22,8 @@ var UICheckbox = class {
   get host() {
     return getElement(this);
   }
-  checked = false;
+  /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
+  checked;
   defaultChecked = false;
   disabled = false;
   indeterminate = false;
@@ -27,7 +32,8 @@ var UICheckbox = class {
   internalChecked = false;
   slotRef;
   syncFromProp() {
-    this.internalChecked = this.checked;
+    if (isControlled(this.checked))
+      this.internalChecked = this.checked;
   }
   syncToInput() {
     const input = this.getInput();
@@ -42,8 +48,7 @@ var UICheckbox = class {
     input.value = this.value;
   }
   componentDidLoad() {
-    this.syncFromProp();
-    this.internalChecked = this.internalChecked || this.defaultChecked;
+    this.internalChecked = controlledOrDefault(this.checked, this.defaultChecked);
     this.slotRef?.addEventListener("slotchange", () => this.syncToInput());
     this.syncToInput();
     const input = this.getInput();
@@ -65,16 +70,20 @@ var UICheckbox = class {
     const input = e.target;
     if (!input)
       return;
-    this.internalChecked = input.checked;
+    const checked = input.checked;
+    if (!isControlled(this.checked))
+      this.internalChecked = checked;
+    else
+      this.syncToInput();
     this.indeterminate = input.indeterminate;
     dispatchDetail(this.host, "change", {
-      checked: this.internalChecked,
+      checked,
       value: this.value,
       trigger: eventToTrigger(e)
     });
   };
   render() {
-    return h(Host, { key: "66b6708ae71c9eca6c03c63891b590bd050c2506", role: "checkbox", "aria-checked": this.indeterminate ? "mixed" : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "b5e168a9ff0c6e5e747fff6c6264c59744f10a56", ref: (el) => this.slotRef = el }));
+    return h(Host, { key: "eb46eb41a5ab871058960bd2aa1163a03144bc0f", role: "checkbox", "aria-checked": this.indeterminate ? "mixed" : String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "ce18b1f1b63efebf048cd67b87064641cf4d915c", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {

package/dist/ui-chip.entry-XSNPJXX3.js

@@ -0,0 +1,22 @@
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-IMHSPETJ.js";
+
+// dist/esm/ui-chip.entry.js
+var uiChipCss = () => `:host{--ui-chip-surface:var(--ui-surface-subtle);--ui-chip-text:var(--ui-text-secondary);--ui-chip-border:var(--ui-border-default);--ui-chip-font-size:var(--ui-font-size-xs);--ui-chip-font-weight:var(--ui-font-normal);--ui-chip-line-height:var(--ui-line-height-tight);--ui-chip-padding-block:var(--ui-space-0-5);--ui-chip-padding-inline:var(--ui-space-2);--ui-chip-notch:var(--ui-space-1);display:inline-flex;max-width:100%}.chip__surface{display:inline-flex;align-items:center;max-width:100%;padding:var(--ui-chip-padding-block) var(--ui-chip-padding-inline);border:1px solid var(--ui-chip-border);background:var(--ui-chip-surface);color:var(--ui-chip-text) !important;font-family:var(--ui-font-family-sans) !important;font-size:var(--ui-chip-font-size) !important;font-weight:var(--ui-chip-font-weight) !important;line-height:var(--ui-chip-line-height) !important;white-space:nowrap}:host([data-appearance='pill']) .chip__surface{border-radius:var(--ui-radius-round)}:host([data-appearance='tag']) .chip__surface{border:0;padding-inline-end:calc(var(--ui-chip-padding-inline) + var(--ui-chip-notch));clip-path:polygon(0 0, calc(100% - var(--ui-chip-notch)) 0, 100% 50%, calc(100% - var(--ui-chip-notch)) 100%, 0 100%)}`;
+var UIChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  /** `tag` has a square leading edge and an angled trailing edge; `pill` is fully rounded. */
+  appearance = "tag";
+  render() {
+    return h(Host, { key: "fe1246a1e698098f0ca9cb04e749d5adf233e50c", "data-appearance": this.appearance }, h("span", { key: "a17237699b9eb20fb0a084adbd900a3aa9bc12b0", class: "chip__surface" }, h("slot", { key: "7f4e5dcc82d360083d4ded2617fa39a9dc1fd3ef" })));
+  }
+};
+UIChip.style = uiChipCss();
+export {
+  UIChip as ui_chip
+};

package/dist/{ui-combobox.entry-ZCTPXEES.js → ui-combobox.entry-IIMMUJF7.js}

@@ -11,7 +11,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-combobox.entry.js
 function formatEditingValue(raw, selection, format) {
@@ -512,20 +512,20 @@ var UICombobox = class {
     const description = [this.helpOpen ? "help-text" : "", this.validation.issues.length ? "validation" : ""].filter(Boolean).join(" ") || void 0;
     const status = this.loading ? "Loading suggestions\u2026" : this.lookupError || (this.expanded ? `${this.rows.length} suggestions available.` : "");
     const groups = [...new Set(this.rows.map((row) => row.group ?? ""))];
-    return h(Host, { key: "2378bfd8473852642fef21898f4a756eb3b092ba", "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, h("label", { key: "7aba65aeb336d490ddeaf5db9bba9db8ab8b9dbb", htmlFor: "input", part: "label" }, this.label, this.required ? " *" : ""), h("div", { key: "ee87156259d0fe1e2e56c4b36667e8daf5e1e2c1", class: "field", part: "field", ref: (element) => this.field = element }, h("input", { key: "35c5b85ff9a4bcba9bddaf85ff1f118a94aa077b", id: "input", ref: (element) => this.input = element, role: "combobox", "aria-autocomplete": "list", "aria-expanded": String(this.expanded), "aria-controls": "listbox", "aria-activedescendant": this.expanded && this.active >= 0 ? `option-${this.active}` : void 0, "aria-describedby": description, "aria-invalid": String(this.validation.status === "error"), "aria-busy": String(this.validation.status === "pending"), value: this.display, placeholder: this.placeholder, name: this.name || void 0, disabled: this.disabled, readOnly: this.readOnly, required: this.required, autoComplete: "off", part: "input", onInput: this.onInput, onKeyDown: this.onKeydown, onCompositionstart: () => this.composing = true, onCompositionend: () => {
+    return h(Host, { key: "b485462943bef9e5cb0a4b42f82888024132ab3a", "data-size": this.size, "data-validation": this.validation.status, onFocusout: this.onFocusOut }, h("label", { key: "99db32d80b0a250ff4ebea8481dda94be53df2eb", htmlFor: "input", part: "label" }, this.label, this.required ? " *" : ""), h("div", { key: "922adddf41c07215d3ec73947e8e3fe801c7ef89", class: "field", part: "field", ref: (element) => this.field = element }, h("input", { key: "557780297c5afee8112a5085984c5dd4ea1a02be", id: "input", ref: (element) => this.input = element, role: "combobox", "aria-autocomplete": "list", "aria-expanded": String(this.expanded), "aria-controls": "listbox", "aria-activedescendant": this.expanded && this.active >= 0 ? `option-${this.active}` : void 0, "aria-describedby": description, "aria-invalid": String(this.validation.status === "error"), "aria-busy": String(this.validation.status === "pending"), value: this.display, placeholder: this.placeholder, name: this.name || void 0, disabled: this.disabled, readOnly: this.readOnly, required: this.required, autoComplete: "off", part: "input", onInput: this.onInput, onKeyDown: this.onKeydown, onCompositionstart: () => this.composing = true, onCompositionend: () => {
       this.composing = false;
       this.onInput(new InputEvent("input"));
-    } }), this.clearable && h("button", { key: "74e4f44836b751ab5e9f794a39b480602e0c106d", type: "button", part: "affordance", "aria-label": `Clear ${this.label}`, disabled: this.disabled || this.readOnly, onClick: () => {
+    } }), this.clearable && h("button", { key: "ab180bacc7f5232eb517b7fed9bee0d62a4b1156", type: "button", part: "affordance", "aria-label": `Clear ${this.label}`, disabled: this.disabled || this.readOnly, onClick: () => {
       this.commit(null, "", null, "clear", "pointer");
       this.close();
       this.input?.focus();
-    } }, "\xD7"), this.help && h("button", { key: "c870ced139fb22baa50a1795ab78f14c38647d34", id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, h("span", { key: "ba3dc5128c1941b21b53a5ba78a27017b3df5ec8", "aria-hidden": "true" }, "?")), this.disclosure && h("button", { key: "eced588e3fa7958dd6185173faaef01219c30243", type: "button", part: "affordance", "aria-label": `Suggestions for ${this.label}`, "aria-controls": "listbox", "aria-expanded": String(this.expanded), disabled: this.disabled || this.readOnly, onClick: () => {
+    } }, "\xD7"), this.help && h("button", { key: "b4ea9b44c9e22eb9ac259fb67b86368eede2b13f", id: "help", type: "button", part: "affordance", "aria-label": `Help for ${this.label}`, disabled: this.disabled }, h("span", { key: "36222d7a98a4f6abb12f785e9b4f28c2479a4e37", "aria-hidden": "true" }, "?")), this.disclosure && h("button", { key: "1d8757b7c817575b6915d0e8c164e20776df83e5", type: "button", part: "affordance", "aria-label": `Suggestions for ${this.label}`, "aria-controls": "listbox", "aria-expanded": String(this.expanded), disabled: this.disabled || this.readOnly, onClick: () => {
       if (this.expanded)
         this.close();
       else
         this.open("disclosure");
       this.input?.focus();
-    } }, h("span", { key: "7cb9f7f2bb15246dcdd2348ea0ca656d1d0c8c33", "aria-hidden": "true" }, "\u2304"))), this.help && h("ui-tooltip", { key: "b1b5d42ca457f9b951758bb5e816c8dbbcd1087d", id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), h("div", { key: "9eca2df66c72917e6bfda21205c2a4ef97dd91d5", class: "popup", part: "popup", hidden: !this.expanded, ref: (element) => this.popup = element }, h("div", { key: "641e1f137c9cfef5d08ec99f6178e59487a20bf1", id: "listbox", role: "listbox", "aria-label": `${this.label} suggestions`, "aria-busy": String(this.loading) }, groups.map((group) => h("div", { role: group ? "group" : "presentation", "aria-label": group || void 0 }, group && h("div", { class: "group", part: "group" }, group), this.rows.map((row, index) => (row.group ?? "") !== group ? null : h("div", { id: `option-${index}`, role: "option", "aria-selected": String(this.selected === row.value), "aria-disabled": String(Boolean(row.disabled)), "data-active": this.active === index ? "" : void 0, part: "option", class: "option", onPointerDown: (event) => event.preventDefault(), onClick: () => this.choose(index, "pointer") }, h("slot", { name: `option-${row.id}` }, h("span", { class: "primary", part: "option-primary" }, row.label), row.description && h("span", { class: "secondary", part: "option-secondary" }, row.description)))))), this.canCreate && h("div", { key: "38a3aa6b2ffae30e6f81e1f89d10c9966dd31b10", id: `option-${this.rows.length}`, role: "option", "aria-selected": "false", class: "option", part: "option", "data-active": this.active === this.rows.length ? "" : void 0, onPointerDown: (event) => event.preventDefault(), onClick: () => this.choose(this.rows.length, "pointer") }, h("slot", { key: "dd3e895ef363f6d30a0c25e4b5092a8feacc63e5", name: "create" }, "Create \u201C", this.raw, "\u201D"))), this.loading ? h("div", { class: "message" }, h("slot", { name: "loading" }, "Loading suggestions\u2026")) : this.lookupError ? h("div", { class: "message" }, h("slot", { name: "error" }, this.lookupError)) : !this.rows.length && !this.canCreate ? h("div", { class: "message" }, h("slot", { name: "empty" }, "No suggestions.")) : null), h("div", { key: "9cf12a8fde7d9cfb9e2d2a77669ac4708c7fded6", id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map((issue) => h("div", null, issue.message))), h("div", { key: "1c7b1d3f658e500cbf5f5004a76a39511cc79c49", class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, status, " ", this.validation.status === "pending" ? "Checking value\u2026" : this.validation.issues.map((issue) => issue.message).join(" ")));
+    } }, h("span", { key: "cd2dad7694dc24104521a58d4182d6e866f54095", "aria-hidden": "true" }, "\u2304"))), this.help && h("ui-tooltip", { key: "5e0eecd828a0e82d94b0be5b5f3233cddca4a87b", id: "help-text", for: "help", toggleOnClick: true, onOpen: () => this.helpOpen = true, onClose: () => this.helpOpen = false }, this.help), h("div", { key: "694902d8c8f58664838a943e0e2c14c856be9a08", class: "popup", part: "popup", hidden: !this.expanded, ref: (element) => this.popup = element }, h("div", { key: "81b18e296151afde18c47492aa997bdd13d553bc", id: "listbox", role: "listbox", "aria-label": `${this.label} suggestions`, "aria-busy": String(this.loading) }, groups.map((group) => h("div", { role: group ? "group" : "presentation", "aria-label": group || void 0 }, group && h("div", { class: "group", part: "group" }, group), this.rows.map((row, index) => (row.group ?? "") !== group ? null : h("div", { id: `option-${index}`, role: "option", "aria-selected": String(this.selected === row.value), "aria-disabled": String(Boolean(row.disabled)), "data-active": this.active === index ? "" : void 0, part: "option", class: "option", onPointerDown: (event) => event.preventDefault(), onClick: () => this.choose(index, "pointer") }, h("slot", { name: `option-${row.id}` }, h("span", { class: "primary", part: "option-primary" }, row.label), row.description && h("span", { class: "secondary", part: "option-secondary" }, row.description)))))), this.canCreate && h("div", { key: "dbf87523b5c6f17aedf15295d9703557f2d31524", id: `option-${this.rows.length}`, role: "option", "aria-selected": "false", class: "option", part: "option", "data-active": this.active === this.rows.length ? "" : void 0, onPointerDown: (event) => event.preventDefault(), onClick: () => this.choose(this.rows.length, "pointer") }, h("slot", { key: "bd4bdd2b132de7f72c1e5450fb0c0d16254aeedb", name: "create" }, "Create \u201C", this.raw, "\u201D"))), this.loading ? h("div", { class: "message" }, h("slot", { name: "loading" }, "Loading suggestions\u2026")) : this.lookupError ? h("div", { class: "message" }, h("slot", { name: "error" }, this.lookupError)) : !this.rows.length && !this.canCreate ? h("div", { class: "message" }, h("slot", { name: "empty" }, "No suggestions.")) : null), h("div", { key: "0d39fb1acb6d65307fabc3f502785a19710dc4af", id: "validation", class: "message", part: "validation", hidden: !this.validation.issues.length }, this.validation.issues.map((issue) => h("div", null, issue.message))), h("div", { key: "a83334d72b90ca0f411e6161a8bf5e2e8c2e33a8", class: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" }, status, " ", this.validation.status === "pending" ? "Checking value\u2026" : this.validation.issues.map((issue) => issue.message).join(" ")));
   }
   static get watchers() {
     return {

package/dist/{ui-context-menu.entry-2WMCBGCP.js → ui-context-menu.entry-AIULIE5Y.js}

@@ -1,6 +1,3 @@
-import {
-  dispatchDetail
-} from "./chunk-UL7UIUJZ.js";
 import {
   closeOverlay,
   openOverlay,
@@ -9,12 +6,15 @@ import {
 import {
   createAnchoredSurface
 } from "./chunk-YHXJC5M5.js";
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
 import {
   Host,
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-context-menu.entry.js
 var uiContextMenuCss = () => `:host{display:contents}:host([data-focus-trigger='pointer']) ::slotted(ui-menu-item:focus){outline:none}.menu{position:fixed;inset:auto;margin:0;z-index:var(--ui-z-overlay, 1000);min-width:12rem;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}.menu:popover-open{opacity:1;transform:translateY(0) scale(1)}@starting-style{.menu:popover-open{opacity:0;transform:translateY(-4px) scale(0.99)}}.menu[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){.menu{transition:none}}`;
@@ -226,7 +226,7 @@ var UIContextMenu = class {
     this.closeMenu("action", "pointer");
   };
   render() {
-    return h(Host, { key: "641dd3aba6120cf4187f4503c64029eaf307dc4f", "data-open": this.internalOpen ? "" : void 0, "data-focus-trigger": this.internalOpen ? this.focusTrigger : void 0, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: "3f550349f9537b951b50a8c291f1951dd5a3b723", name: "trigger" }), h("div", { key: "a612523f054986122638722340d8135c44a85399", class: "menu", "data-open": this.internalOpen ? "" : void 0 }, h("ui-menu", { key: "0711879d09900183e938d8942abb8b9032812a5f", open: this.internalOpen }, h("slot", { key: "8e088dd20a48d8fb81126f2dd020abb886e86e22" }))));
+    return h(Host, { key: "5d927f41a72e680ad6d6d4a3fa0c913360cb8660", "data-open": this.internalOpen ? "" : void 0, "data-focus-trigger": this.internalOpen ? this.focusTrigger : void 0, onKeyDown: this.onKeydown, onClick: this.onItemClick }, h("slot", { key: "e5b1ec05d96093671fb839e3b81ddefb730575e1", name: "trigger" }), h("div", { key: "a0c4a8ca50bcca2b7d3ee53b4c26db054af93151", class: "menu", "data-open": this.internalOpen ? "" : void 0 }, h("ui-menu", { key: "ac03b9dc3fa56d0cbb28115060726de4500a668b", open: this.internalOpen }, h("slot", { key: "f2d8484cb9fb3956a3a5979795633a74d423577d" }))));
   }
   static get watchers() {
     return {

package/dist/{ui-dialog.entry-WO23XOSW.js → ui-dialog.entry-QSYWYHLY.js}

@@ -1,17 +1,21 @@
-import {
-  dispatchDetail
-} from "./chunk-UL7UIUJZ.js";
 import {
   closeOverlay,
   openOverlay,
   requestTopOverlayClose
 } from "./chunk-TL4FIE7X.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
 import {
   Host,
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-dialog.entry.js
 var uiDialogCss = () => `:host{display:block}:host:not([data-open]){display:none}:host dialog{--ui-dialog-duration:var(--ui-motion-base);--ui-dialog-viewport-gap:var(--ui-space-4, 1rem);position:fixed;inset:0;inline-size:min(     calc(100% - (var(--ui-dialog-viewport-gap) * 2)),     var(--ui-dialog-max-width, 440px)   );max-inline-size:none;max-block-size:calc(100dvh - (var(--ui-dialog-viewport-gap) * 2));margin:auto;padding:var(--ui-space-4);overflow:auto;background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-dialog);box-shadow:var(--ui-shadow-dialog);visibility:hidden;pointer-events:none;opacity:0;transform:scale(0.96);transition:opacity var(--ui-dialog-duration) var(--ui-motion-ease),     transform var(--ui-dialog-duration) var(--ui-motion-ease),     visibility var(--ui-dialog-duration),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]{visibility:visible;pointer-events:auto;opacity:1;transform:scale(1);animation:ui-dialog-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-enter{from{opacity:0;transform:scale(0.96)}}:host dialog::backdrop{background-color:transparent;transition:background-color var(--ui-dialog-duration) var(--ui-motion-ease),     display var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete,     overlay var(--ui-dialog-duration) var(--ui-motion-ease) allow-discrete}:host dialog[open]::backdrop{background-color:var(--ui-overlay-backdrop);animation:ui-dialog-backdrop-enter var(--ui-dialog-duration) var(--ui-motion-ease)}@keyframes ui-dialog-backdrop-enter{from{background-color:transparent}}`;
@@ -22,17 +26,27 @@ var UIDialog = class {
   get host() {
     return getElement(this);
   }
-  open = false;
+  /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+  open;
   defaultOpen = false;
   modal = true;
   dismissible = true;
   /** Accessible name forwarded to the native dialog surface. */
   label;
   internalOpen = false;
+  accessibleLabel = "Dialog";
   overlayId = `ui-dialog-${Math.random().toString(36).slice(2, 11)}`;
   dialogRef;
+  contentObserver = null;
   syncFromProp() {
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
+  }
+  syncLabelFromProp() {
+    this.syncAccessibleLabel();
+  }
+  componentWillLoad() {
+    this.syncAccessibleLabel();
   }
   syncOpen() {
     if (this.dialogRef) {
@@ -52,20 +66,29 @@ var UIDialog = class {
     }
   }
   componentDidLoad() {
-    this.syncFromProp();
-    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.contentObserver = new MutationObserver(this.syncAccessibleLabel);
+    this.contentObserver.observe(this.host, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
     this.dialogRef?.addEventListener("close", this.onDialogClose);
+    this.syncAccessibleLabel();
     this.syncOpen();
   }
   disconnectedCallback() {
     this.dialogRef?.removeEventListener("close", this.onDialogClose);
+    this.contentObserver?.disconnect();
+    this.contentObserver = null;
     closeOverlay(this.overlayId);
   }
   componentDidUpdate() {
     this.syncOpen();
   }
   handleRequestClose(reason, trigger) {
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
     dispatchDetail(this.host, "close", {
       open: false,
       reason,
@@ -74,8 +97,12 @@ var UIDialog = class {
   }
   onDialogClose = () => {
     if (this.internalOpen) {
-      this.internalOpen = false;
-      closeOverlay(this.overlayId);
+      if (!isControlled(this.open)) {
+        this.internalOpen = false;
+        closeOverlay(this.overlayId);
+      } else {
+        requestAnimationFrame(() => this.syncOpen());
+      }
       dispatchDetail(this.host, "close", {
         open: false,
         reason: "programmatic",
@@ -88,14 +115,25 @@ var UIDialog = class {
       requestTopOverlayClose("escape", "keyboard");
     }
   };
+  syncAccessibleLabel = () => {
+    const explicitLabel = this.label?.trim();
+    const heading = this.host.querySelector('[slot="heading"], [data-ui-dialog-title], h1, h2, h3, h4, h5, h6');
+    const headingLabel = heading?.textContent?.trim();
+    const nextLabel = explicitLabel || headingLabel || "Dialog";
+    if (this.accessibleLabel !== nextLabel)
+      this.accessibleLabel = nextLabel;
+  };
   render() {
-    return h(Host, { key: "6e88afd3a595ab0eed3d82a046ffb15e1e167cdb", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("dialog", { key: "420e4d8de66245a5818a1284adb23a536ebcd907", ref: (el) => this.dialogRef = el, open: this.internalOpen, "aria-label": this.label }, h("slot", { key: "10604688504f013f79b7a6ed5f9ed36bc9c6b48b" })));
+    return h(Host, { key: "b7aa33e24a74527a58718b3fa2218f5a09e9e439", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("dialog", { key: "f24455edc404581b5040c9c0090bf64141f9e296", ref: (el) => this.dialogRef = el, open: this.internalOpen, "aria-label": this.accessibleLabel }, h("slot", { key: "bad318e44b9c80dc0aae04ea5cdbb7b2ab472c35" })));
   }
   static get watchers() {
     return {
       "open": [{
         "syncFromProp": 0
       }],
+      "label": [{
+        "syncLabelFromProp": 0
+      }],
       "internalOpen": [{
         "syncOpen": 0
       }]

package/dist/{ui-disclosure.entry-USX7OUEW.js → ui-disclosure.entry-3BJEYU3U.js}

@@ -1,6 +1,10 @@
 import {
   createId
 } from "./chunk-OF57X5AR.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail,
   eventToTrigger,
@@ -11,7 +15,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-disclosure.entry.js
 var uiDisclosureCss = () => `:host{display:block}::slotted([hidden]){display:none !important}`;
@@ -22,7 +26,8 @@ var UIDisclosure = class {
   get host() {
     return getElement(this);
   }
-  open = false;
+  /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+  open;
   defaultOpen = false;
   disabled = false;
   internalOpen = false;
@@ -30,7 +35,8 @@ var UIDisclosure = class {
   trigger = null;
   content = null;
   syncFromProp() {
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
   }
   syncState() {
     if (this.trigger) {
@@ -42,8 +48,7 @@ var UIDisclosure = class {
   }
   componentDidLoad() {
     this.resolveParts();
-    this.syncFromProp();
-    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
     this.syncState();
     this.trigger?.addEventListener("click", this.onTriggerClick);
     this.trigger?.addEventListener("keydown", this.onTriggerKeydown);
@@ -80,7 +85,8 @@ var UIDisclosure = class {
   setOpen(next, action) {
     if (this.internalOpen === next)
       return;
-    this.internalOpen = next;
+    if (!isControlled(this.open))
+      this.internalOpen = next;
     dispatchDetail(this.host, next ? "open" : "close", {
       open: next,
       reason: action.reason,
@@ -101,7 +107,7 @@ var UIDisclosure = class {
     this.setOpen(!this.internalOpen, { reason: "action", trigger: "keyboard" });
   };
   render() {
-    return h(Host, { key: "3905d2d78a2d3d4ef36b582ba0f426be8e5e0f5e" }, h("slot", { key: "18547ff56457b73319264bba981f994fb947dffb" }));
+    return h(Host, { key: "55a6fd71965104b96b55fd53870becce748a4116" }, h("slot", { key: "542727e10d335ff44fc7cf8250e80f045f89b8f2" }));
   }
   static get watchers() {
     return {

package/dist/{ui-floating-action-button.entry-MXDIN7MV.js → ui-floating-action-button.entry-JEVNV6FI.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-floating-action-button.entry.js
 var uiFloatingActionButtonCss = () => `:host{position:fixed;inset-block-end:calc(     var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom)   );inset-inline-end:max(     var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),     env(safe-area-inset-right)   );inline-size:var(--ui-floating-action-button-size, 56px);block-size:var(--ui-floating-action-button-size, 56px);display:inline-flex;z-index:var(--ui-floating-action-button-z-index, 100)}button{appearance:none;inline-size:100%;block-size:100%;border:none;border-radius:999px;margin:0;padding:0;display:inline-flex;align-items:center;justify-content:center;background:var(--ui-floating-action-button-bg, var(--ui-accent-solid));color:var(--ui-floating-action-button-color, var(--ui-text-on-accent));box-shadow:var(     --ui-floating-action-button-shadow,     0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)   );cursor:pointer;transition:background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),     transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),     box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease)}button:hover:enabled{background:var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));box-shadow:var(     --ui-floating-action-button-hover-shadow,     0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)   )}button:active:enabled{transform:scale(var(--ui-floating-action-button-active-scale, 0.94))}button:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:2px}button:disabled,:host([disabled]){opacity:0.6;cursor:not-allowed}::slotted(svg){inline-size:var(--ui-floating-action-button-icon-size, 24px);block-size:var(--ui-floating-action-button-icon-size, 24px);flex-shrink:0}@media (min-width: 768px){:host([mobile-only]){display:none}}`;
@@ -14,7 +14,7 @@ var UIFloatingActionButton = class {
   mobileOnly = false;
   label = "";
   render() {
-    return h(Host, { key: "c9a7d8c9b6d6608566b21621a73d939f372c830d", "data-disabled": this.disabled ? "" : void 0 }, h("button", { key: "8eddccaf6be2f028bc02df967038843120045b84", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "0ea12efb9cb8ecec06238066827a734fb3b01e1e" })));
+    return h(Host, { key: "b41f0aaabbcd23cb79ac06245e69fd8ecb9c9912", "data-disabled": this.disabled ? "" : void 0 }, h("button", { key: "36a023bd66d38845f1116874380d7a28bb46b5a2", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "412c41e4732cc230f84e7758bfc7faab7e0802e2" })));
   }
 };
 UIFloatingActionButton.style = uiFloatingActionButtonCss();

package/dist/ui-form-field.entry-PKSY7UU4.js

@@ -0,0 +1,120 @@
+import {
+  createId
+} from "./chunk-OF57X5AR.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-IMHSPETJ.js";
+
+// dist/esm/ui-form-field.entry.js
+var uiFormFieldCss = () => `:host{display:grid;gap:var(--ui-space-2);min-inline-size:0;align-content:start;color:var(--ui-text-primary)}::slotted(label){color:var(--ui-text-secondary);font-size:0.95rem}::slotted([data-slot='help']){min-block-size:var(--ui-form-field-help-min-block-size, 0);color:var(--ui-text-muted);font-size:0.875rem;line-height:var(--ui-line-height-md)}::slotted([data-slot='error']),::slotted([role='alert']){color:var(--ui-accent-active);font-size:0.875rem}`;
+var UIFormField = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  get host() {
+    return getElement(this);
+  }
+  invalid = false;
+  disabled = false;
+  required = false;
+  observer = null;
+  activeInput = null;
+  ownedDescriptionIds = /* @__PURE__ */ new Set();
+  wireQueued = false;
+  componentDidLoad() {
+    this.observer = new MutationObserver(this.scheduleWire);
+    this.observer.observe(this.host, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["aria-describedby", "data-slot", "id", "role"]
+    });
+    this.wire();
+  }
+  componentDidUpdate() {
+    this.scheduleWire();
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+    this.observer = null;
+    this.removeOwnedDescriptions(this.activeInput);
+    this.activeInput = null;
+    this.ownedDescriptionIds.clear();
+  }
+  descriptionIds(input) {
+    return Array.from(new Set((input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean)));
+  }
+  removeOwnedDescriptions(input) {
+    if (!input || this.ownedDescriptionIds.size === 0)
+      return;
+    const remaining = this.descriptionIds(input).filter((id) => !this.ownedDescriptionIds.has(id));
+    if (remaining.length > 0)
+      input.setAttribute("aria-describedby", remaining.join(" "));
+    else
+      input.removeAttribute("aria-describedby");
+  }
+  scheduleWire = () => {
+    if (this.wireQueued)
+      return;
+    this.wireQueued = true;
+    queueMicrotask(() => {
+      this.wireQueued = false;
+      this.wire();
+    });
+  };
+  wire() {
+    const label = this.host.querySelector("label");
+    const input = this.host.querySelector("input, textarea, select");
+    const help = this.host.querySelector('[data-slot="help"]');
+    const error = this.host.querySelector('[data-slot="error"], [role="alert"]');
+    if (input !== this.activeInput) {
+      this.removeOwnedDescriptions(this.activeInput);
+      this.activeInput = input;
+      this.ownedDescriptionIds.clear();
+    }
+    if (!input)
+      return;
+    if (!input.id) {
+      input.id = createId("form-field-input");
+    }
+    if (label && !label.getAttribute("for")) {
+      label.setAttribute("for", input.id);
+    }
+    const previousOwnedIds = this.ownedDescriptionIds;
+    const externalIds = this.descriptionIds(input).filter((id) => !previousOwnedIds.has(id));
+    const describedIds = [];
+    if (help) {
+      if (!help.id)
+        help.id = createId("form-field-help");
+      describedIds.push(help.id);
+    }
+    if (error) {
+      if (!error.id)
+        error.id = createId("form-field-error");
+      describedIds.push(error.id);
+    }
+    const nextOwnedIds = describedIds.filter((id) => !externalIds.includes(id));
+    const nextDescribedIds = Array.from(/* @__PURE__ */ new Set([...externalIds, ...describedIds]));
+    const nextDescribedBy = nextDescribedIds.join(" ");
+    if (input.getAttribute("aria-describedby") !== nextDescribedBy) {
+      if (nextDescribedBy)
+        input.setAttribute("aria-describedby", nextDescribedBy);
+      else
+        input.removeAttribute("aria-describedby");
+    }
+    this.ownedDescriptionIds = new Set(nextOwnedIds);
+    input.disabled = this.disabled;
+    input.required = this.required;
+    input.setAttribute("aria-invalid", this.invalid ? "true" : "false");
+  }
+  render() {
+    return h(Host, { key: "0b8fd5608631b5f9159fdf99d6eba918cc6587e4", "data-invalid": this.invalid ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-required": this.required ? "" : void 0 }, h("slot", { key: "4ed78782bcc8b6699a40d8402994b486d71d730a", onSlotchange: this.scheduleWire }));
+  }
+};
+UIFormField.style = uiFormFieldCss();
+export {
+  UIFormField as ui_form_field
+};

package/dist/{ui-icon-button.entry-MJUNXHBU.js → ui-icon-button.entry-TPX7BE7R.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-icon-button.entry.js
 var uiIconButtonCss = () => `:host{display:inline-flex;color:var(--ui-text-secondary)}:host([anticipatory]){position:relative}:host([anticipatory])::before{content:'';position:absolute;inset:50% auto auto 50%;z-index:1;inline-size:var(--ui-affordance-guide-size, 0.25rem);block-size:var(--ui-affordance-guide-size, 0.25rem);border-radius:var(--ui-radius-round, 999px);background:var(--ui-affordance-guide-color, var(--ui-border-strong));opacity:var(--ui-affordance-guide-opacity, 0.42);transform:translate(-50%, -50%);transition:opacity var(--ui-affordance-motion, var(--ui-motion-fast)) var(--ui-motion-ease);pointer-events:none}:host([anticipatory]) button{opacity:0;transform:scale(0.72);pointer-events:none}:host([anticipatory][data-ui-proximity='near'])::before,:host([anticipatory]:focus-within)::before,:host([anticipatory]:hover)::before,:host([anticipatory][variant='solid'])::before{opacity:0}:host([anticipatory][data-ui-proximity='near']) button,:host([anticipatory]:focus-within) button,:host([anticipatory]:hover) button,:host([anticipatory][variant='solid']) button{opacity:1;transform:scale(1);pointer-events:auto}button{appearance:none;inline-size:var(--ui-icon-button-size, 2.5rem);block-size:var(--ui-icon-button-size, 2.5rem);min-inline-size:var(--ui-icon-button-size, 2.5rem);min-block-size:var(--ui-icon-button-size, 2.5rem);padding:0;margin:0;border:1px solid transparent;border-radius:var(--ui-icon-button-radius, var(--ui-radius-2));background:var(--ui-icon-button-bg, transparent);color:inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     border-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease)}@media (hover: none), (pointer: coarse){:host([anticipatory])::before{opacity:0}:host([anticipatory]) button{opacity:1;transform:none;pointer-events:auto}}:host([size='sm']) button{inline-size:var(--ui-icon-button-size-sm, 2rem);block-size:var(--ui-icon-button-size-sm, 2rem);min-inline-size:var(--ui-icon-button-size-sm, 2rem);min-block-size:var(--ui-icon-button-size-sm, 2rem)}:host([size='lg']) button{inline-size:var(--ui-icon-button-size-lg, 2.75rem);block-size:var(--ui-icon-button-size-lg, 2.75rem);min-inline-size:var(--ui-icon-button-size-lg, 2.75rem);min-block-size:var(--ui-icon-button-size-lg, 2.75rem)}:host([variant='outline']) button{border-color:var(--ui-icon-button-border, var(--ui-border-default));background:var(--ui-icon-button-outline-bg, var(--ui-surface-default));color:var(--ui-icon-button-outline-color, var(--ui-text-primary))}:host([variant='solid']) button{background:var(--ui-icon-button-solid-bg, var(--ui-accent-solid));color:var(--ui-icon-button-solid-color, var(--ui-text-on-accent));box-shadow:var(     --ui-icon-button-solid-shadow,     0 1px 2px color-mix(in srgb, var(--ui-accent-solid) 18%, transparent)   )}button:hover:enabled{background:var(--ui-icon-button-hover-bg, var(--ui-surface-muted));color:var(--ui-icon-button-hover-color, var(--ui-text-primary))}:host([variant='outline']) button:hover:enabled{border-color:var(--ui-icon-button-hover-border, var(--ui-border-strong))}:host([variant='solid']) button:hover:enabled{background:var(--ui-icon-button-solid-hover-bg, var(--ui-accent-hover))}button:active:enabled{transform:scale(var(--ui-icon-button-active-scale, 0.96))}button:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:2px}button:disabled,:host([disabled]){opacity:0.6;cursor:not-allowed}::slotted(svg){inline-size:var(--ui-icon-button-icon-size, 1.125rem);block-size:var(--ui-icon-button-icon-size, 1.125rem);flex-shrink:0;stroke-width:var(--ui-icon-button-icon-stroke-width, 1.75)}`;
@@ -17,7 +17,7 @@ var UIIconButton = class {
   /** Reveals this control through a surrounding ui-affordance-scope. */
   anticipatory = false;
   render() {
-    return h(Host, { key: "8616d7e52a03a7a42738b11f4cabed3eb38c8640", "data-disabled": this.disabled ? "" : void 0, "data-ui-affordance": this.anticipatory ? "button" : void 0 }, h("button", { key: "fae1362a50a0d80e2fcb3ab41f63ff21cf5d939a", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "e548fc504e3b26e85263fe3fc8faac0887fee16b" })));
+    return h(Host, { key: "fb4534d977b4812f402855f78176b8316ebace61", "data-disabled": this.disabled ? "" : void 0, "data-ui-affordance": this.anticipatory ? "button" : void 0 }, h("button", { key: "b90d290870ad76ba18de88a6b6947a15040ff12a", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "88ded6ad90a4cfeffcd687990e5ba8b0c7d3bd30" })));
   }
 };
 UIIconButton.style = uiIconButtonCss();

package/dist/{ui-input.entry-AWG63YIG.js → ui-input.entry-6NCLNW4E.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-input.entry.js
 var uiInputCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(input){width:100%;appearance:none;min-block-size:var(--ui-control-min-block-size, 2.75rem);border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-radius-2);background:var(--ui-control-surface, var(--ui-surface-default));color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding:var(--ui-space-2) var(--ui-space-3);margin:0;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(input:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(input:focus){border-color:var(--ui-control-focus, var(--ui-focus-ring));box-shadow:0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft))}:host([data-invalid='true'])::slotted(input),::slotted(input[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(input:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(input:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
@@ -83,7 +83,7 @@ var UIInput = class {
     });
   };
   render() {
-    return h(Host, { key: "a2f2c108144a7acae0dfb1bef6ea1f38a4dcca9c", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "04284765a12089a8a1045056d72551a3494f00fc", ref: (el) => this.slotRef = el }));
+    return h(Host, { key: "fe125b4e8ec35e9ac0b0ca0434aa8439f515c51b", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "ec0609f9143435cf0436abb98488b9f30b71530b", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {

package/dist/ui-menu-item.entry-KA2K3PKV.js

@@ -0,0 +1,22 @@
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-IMHSPETJ.js";
+
+// dist/esm/ui-menu-item.entry.js
+var uiMenuItemCss = () => `:host{display:block;width:100%}.menu-item__surface{display:block;box-sizing:border-box;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease)}:host(:hover:not([aria-disabled='true']):not([disabled])) .menu-item__surface{background:var(--ui-surface-subtle)}:host([aria-disabled='true']) .menu-item__surface,:host([disabled]) .menu-item__surface{opacity:0.6;cursor:not-allowed}`;
+var UIMenuItem = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  disabled = false;
+  value = "";
+  render() {
+    return h(Host, { key: "f8a1721f8e516af04f901b53c3a66ce1de932608", role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? "true" : void 0, "data-value": this.value || void 0 }, h("span", { key: "6483d0b3ce1be06aed214f626b2d6a2963a44ade", class: "menu-item__surface" }, h("slot", { key: "db470b1cbb54d56a14d05c0d7f72c43e37f4263e" })));
+  }
+};
+UIMenuItem.style = uiMenuItemCss();
+export {
+  UIMenuItem as ui_menu_item
+};