@threadlabs/looma 0.1.23 → 0.1.25

package/dist/{ui-disclosure.entry-USX7OUEW.js → ui-disclosure.entry-XDPGKMBK.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-UY423IKN.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: "55f998f8e47ebe01fd5832d6c3dac310dda34b8d" }, h("slot", { key: "0d88728151901e1e412d7f5a3ae78b06aa7548fb" }));
   }
   static get watchers() {
     return {

package/dist/ui-editable.entry-S3TE6KFT.js

@@ -0,0 +1,110 @@
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
+import {
+  Host,
+  createEvent,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-UY423IKN.js";
+
+// dist/esm/ui-editable.entry.js
+var uiEditableCss = () => `:host{display:block;min-inline-size:0}[hidden]{display:none !important}`;
+var UIEditable = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.editChange = createEvent(this, "edit-change");
+  }
+  get host() {
+    return getElement(this);
+  }
+  /** Controlled edit state. Omit it to use defaultEdit and local interaction state. */
+  edit;
+  defaultEdit = false;
+  disabled = false;
+  editChange;
+  internalEdit = false;
+  trigger = null;
+  syncFromProp() {
+    if (isControlled(this.edit))
+      this.internalEdit = this.edit;
+  }
+  componentWillLoad() {
+    this.internalEdit = controlledOrDefault(this.edit, this.defaultEdit);
+  }
+  componentDidLoad() {
+    this.host.ownerDocument.addEventListener("pointerdown", this.onDocumentPointerDown, true);
+  }
+  disconnectedCallback() {
+    this.host.ownerDocument.removeEventListener("pointerdown", this.onDocumentPointerDown, true);
+  }
+  requestEdit(next, reason, trigger) {
+    if (this.disabled || this.internalEdit === next)
+      return;
+    if (!isControlled(this.edit))
+      this.internalEdit = next;
+    this.editChange.emit({ edit: next, reason, trigger });
+    if (next)
+      requestAnimationFrame(() => this.focusEditor());
+    else
+      requestAnimationFrame(() => this.trigger?.focus());
+  }
+  focusEditor() {
+    const editRoot = this.host.querySelector('[slot="edit"]');
+    const candidate = editRoot?.matches("input, textarea, select, button, [tabindex], ui-combobox, ui-multi-combobox") ? editRoot : editRoot?.querySelector("input, textarea, select, button, [tabindex], ui-combobox, ui-multi-combobox");
+    const focusInput = candidate?.focusInput;
+    if (typeof focusInput === "function")
+      void focusInput.call(candidate);
+    else
+      candidate?.focus();
+  }
+  eventTrigger(event) {
+    return event.composedPath().find((node) => node instanceof HTMLElement && node.hasAttribute("data-ui-editable-trigger"));
+  }
+  onClick = (event) => {
+    if (this.internalEdit || this.disabled)
+      return;
+    const trigger = this.eventTrigger(event);
+    if (!trigger)
+      return;
+    this.trigger = trigger;
+    this.requestEdit(true, "activate", "pointer");
+  };
+  onKeyDown = (event) => {
+    if (this.internalEdit && event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.requestEdit(false, "escape", "keyboard");
+      return;
+    }
+    if (this.internalEdit || !["Enter", " "].includes(event.key))
+      return;
+    const trigger = this.eventTrigger(event);
+    if (!trigger)
+      return;
+    event.preventDefault();
+    this.trigger = trigger;
+    this.requestEdit(true, "activate", "keyboard");
+  };
+  onDocumentPointerDown = (event) => {
+    if (!this.internalEdit || event.composedPath().includes(this.host))
+      return;
+    this.requestEdit(false, "light-dismiss", "pointer");
+  };
+  render() {
+    return h(Host, { key: "f350400d4ebf897fb657b83b7cba9d309c5067bd", "data-edit": this.internalEdit ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, onClick: this.onClick, onKeyDown: this.onKeyDown }, h("div", { key: "f365ac61f59e9aaa1516121e3d6e2a42187e1d7b", part: "preview", hidden: this.internalEdit }, h("slot", { key: "ea234b437cc4eb530f2994d695429be91d874ef7", name: "preview" })), h("div", { key: "dacf0e74e72c47868986c80aaa60f55942fd9505", part: "edit", hidden: !this.internalEdit }, h("slot", { key: "54a943bc290335181a23b4cfa6055e4acfd8a62b", name: "edit" })));
+  }
+  static get watchers() {
+    return {
+      "edit": [{
+        "syncFromProp": 0
+      }]
+    };
+  }
+};
+UIEditable.style = uiEditableCss();
+export {
+  UIEditable as ui_editable
+};

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

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.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: "9e917e07efcef5c0a96b8b09af8934f336a521bd", "data-disabled": this.disabled ? "" : void 0 }, h("button", { key: "940daac4c2ff1144d7e82b36727205f286325a8e", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "382c70aa4836f6e799f98e1f0e4bc6e3104430fc" })));
   }
 };
 UIFloatingActionButton.style = uiFloatingActionButtonCss();

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

@@ -0,0 +1,120 @@
+import {
+  createId
+} from "./chunk-OF57X5AR.js";
+import {
+  Host,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-UY423IKN.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: "ac01e2be489b9c907169417dc5064061bd74ff7c", "data-invalid": this.invalid ? "" : void 0, "data-disabled": this.disabled ? "" : void 0, "data-required": this.required ? "" : void 0 }, h("slot", { key: "c739f9b2c948bc1d3db4316871c2293bf75cf520", onSlotchange: this.scheduleWire }));
+  }
+};
+UIFormField.style = uiFormFieldCss();
+export {
+  UIFormField as ui_form_field
+};

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

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.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: "225e147d184109d39a2e6f9236ba3ba3c5864c31", "data-disabled": this.disabled ? "" : void 0, "data-ui-affordance": this.anticipatory ? "button" : void 0 }, h("button", { key: "7e54fab4520ae6641c974abf19e975e8eec7a3df", type: "button", "aria-label": this.label || void 0, disabled: this.disabled }, h("slot", { key: "54f9ba27c5a2ca896267f07ad1055907e74a64bc" })));
   }
 };
 UIIconButton.style = uiIconButtonCss();

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

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.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: "0d8676e8458476681653ef4600dcb0f3b56d1ed1", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "d3585c07b6985d9090002f7a9c0eea1227517e0f", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {

package/dist/ui-menu-item.entry-2HWOGUO5.js

@@ -0,0 +1,22 @@
+import {
+  Host,
+  h,
+  registerInstance
+} from "./chunk-UY423IKN.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: "711e7f70268d23969e40073cd47b065afadc22c9", role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? "true" : void 0, "data-value": this.value || void 0 }, h("span", { key: "d0c0aff983bdbc48666fcd652b39340bfd92c790", class: "menu-item__surface" }, h("slot", { key: "3fc6111848142b388529a9cdb5f6134bffe8fa42" })));
+  }
+};
+UIMenuItem.style = uiMenuItemCss();
+export {
+  UIMenuItem as ui_menu_item
+};

package/dist/{ui-menu.entry-IT3GW5TL.js → ui-menu.entry-NZ7ER54K.js}

@@ -1,7 +1,3 @@
-import {
-  dispatchDetail,
-  eventToTrigger
-} from "./chunk-UL7UIUJZ.js";
 import {
   closeOverlay,
   openOverlay,
@@ -10,15 +6,23 @@ import {
 import {
   createAnchoredSurface
 } from "./chunk-YHXJC5M5.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
+import {
+  dispatchDetail,
+  eventToTrigger
+} from "./chunk-UL7UIUJZ.js";
 import {
   Host,
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-UY423IKN.js";
 
 // dist/esm/ui-menu.entry.js
-var uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));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}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;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)}::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}::slotted(ui-menu-item[aria-disabled='true']),::slotted(ui-menu-item[disabled]){opacity:0.6;cursor:not-allowed}`;
+var uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;box-sizing:border-box;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:0;border:0;border-radius:0;background:transparent;box-shadow:var(--ui-shadow-lg)}.menu__surface{display:flex;flex-direction:column;box-sizing:border-box;padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));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}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%}`;
 var UIMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -26,7 +30,8 @@ var UIMenu = class {
   get host() {
     return getElement(this);
   }
-  open = false;
+  /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+  open;
   defaultOpen = false;
   /** Id of the control that anchors this menu in the top layer. */
   for;
@@ -37,7 +42,8 @@ var UIMenu = class {
   anchor = null;
   surface = null;
   syncFromProp() {
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
   }
   resetSurface() {
     this.setupSurface();
@@ -63,8 +69,7 @@ var UIMenu = class {
     }
   }
   componentDidLoad() {
-    this.syncFromProp();
-    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
     this.host.addEventListener("click", this.onItemClick);
     this.host.addEventListener("keydown", this.onKeydown);
     this.setupSurface();
@@ -97,7 +102,8 @@ var UIMenu = class {
   closeMenu(reason, trigger) {
     if (!this.internalOpen)
       return;
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
     dispatchDetail(this.host, "close", {
       open: false,
       reason,
@@ -125,7 +131,8 @@ var UIMenu = class {
       reason: "action",
       trigger: eventToTrigger(e)
     });
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
   };
   onKeydown = (e) => {
     if (e.key === "Escape") {
@@ -148,7 +155,8 @@ var UIMenu = class {
           reason: "action",
           trigger: "keyboard"
         });
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+          this.internalOpen = false;
       }
       return;
     }
@@ -159,7 +167,7 @@ var UIMenu = class {
     }
   };
   render() {
-    return h(Host, { key: "25ae79e914820dfc470fa03d8c843646c3c060d9", role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "b3a8b130e55610d948bc3e4603dede59dd560d05" }));
+    return h(Host, { key: "afba5a7f63238afdb6f71a3636c1f294d3e8ac6f", role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? "" : void 0 }, h("div", { key: "50d770efd27dddca436b804f10f1cc40bc604cb5", class: "menu__surface" }, h("slot", { key: "5014fc43a0ee2d66168bbcc1d52b20bd5120acb9" })));
   }
   static get watchers() {
     return {

package/dist/ui-multi-combobox.entry-DZ5LLSVQ.js

@@ -0,0 +1,167 @@
+import {
+  Host,
+  createEvent,
+  getElement,
+  h,
+  registerInstance
+} from "./chunk-UY423IKN.js";
+
+// dist/esm/ui-multi-combobox.entry.js
+var uiMultiComboboxCss = () => `:host{display:block;min-inline-size:0;color:var(--ui-text-primary);font:inherit}ui-combobox::part(field){flex-wrap:wrap;align-items:center;gap:var(--ui-space-1);min-block-size:var(--ui-multi-combobox-min-block-size, 2.5rem);padding:var(--ui-space-1)}ui-combobox::part(input){flex:1 0 var(--ui-multi-combobox-input-min-inline-size, 5rem);width:auto;min-block-size:1.75rem;padding:var(--ui-space-0-5) var(--ui-space-1)}.items{display:contents}.item{appearance:none;display:inline-flex;max-inline-size:100%;padding:0;border:0;border-radius:var(--ui-radius-1);background:transparent;color:inherit;font:inherit;cursor:default}.item:focus-visible{outline:2px solid var(--ui-focus-ring);outline-offset:1px}.item:disabled{opacity:.6}`;
+var UIMultiCombobox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.queryChange = createEvent(this, "query-change");
+    this.addItem = createEvent(this, "add-item");
+    this.removeItem = createEvent(this, "remove-item");
+    this.createItem = createEvent(this, "create-item");
+    this.optionsChange = createEvent(this, "options-change");
+  }
+  get host() {
+    return getElement(this);
+  }
+  label = "";
+  placeholder = "";
+  items = [];
+  config = {};
+  query;
+  defaultQuery = "";
+  disabled = false;
+  readOnly = false;
+  required = false;
+  name = "";
+  queryChange;
+  addItem;
+  removeItem;
+  createItem;
+  optionsChange;
+  raw = "";
+  rows = [];
+  combobox;
+  filteredConfig;
+  filteredConfigSource;
+  filteredSelection = "";
+  componentWillLoad() {
+    this.raw = this.query ?? this.defaultQuery;
+  }
+  syncQuery() {
+    if (this.query !== void 0)
+      this.raw = this.query;
+  }
+  get selectedValues() {
+    return new Set(this.items.map((item) => item.value));
+  }
+  get comboboxConfig() {
+    const selectionKey = this.items.map((item) => item.value).join("\0");
+    if (this.filteredConfig && this.filteredConfigSource === this.config && this.filteredSelection === selectionKey) {
+      return this.filteredConfig;
+    }
+    const ownerFilter = this.config.filter;
+    const selected = this.selectedValues;
+    this.filteredConfigSource = this.config;
+    this.filteredSelection = selectionKey;
+    this.filteredConfig = {
+      ...this.config,
+      filter: (option, query, context) => !selected.has(option.value) && (ownerFilter ? ownerFilter(option, query, context) : option.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()))
+    };
+    return this.filteredConfig;
+  }
+  setQuery(query, trigger) {
+    if (this.query === void 0)
+      this.raw = query;
+    this.queryChange.emit({ query, display: query, trigger });
+  }
+  onQueryChange = (event) => {
+    event.stopPropagation();
+    this.setQuery(event.detail.query, event.detail.trigger);
+  };
+  onOptionsChange = (event) => {
+    event.stopPropagation();
+    this.rows = event.detail;
+    this.optionsChange.emit(event.detail);
+  };
+  onValueChange = (event) => {
+    event.stopPropagation();
+    if (event.detail.kind !== "selection" || !event.detail.option)
+      return;
+    const item = event.detail.option;
+    this.addItem.emit({ item, index: this.items.length, trigger: event.detail.trigger });
+    queueMicrotask(() => this.setQuery("", event.detail.trigger));
+  };
+  onCreateEntry = (event) => {
+    event.stopPropagation();
+    const query = event.detail.query.trim();
+    if (!query)
+      return;
+    this.setQuery("", event.detail.trigger);
+    this.createItem.emit({ query, trigger: event.detail.trigger });
+  };
+  remove(index, trigger) {
+    const item = this.items[index];
+    if (!item || item.disabled || this.disabled || this.readOnly)
+      return;
+    this.removeItem.emit({ item, index, trigger });
+    requestAnimationFrame(() => {
+      const buttons = this.host.shadowRoot?.querySelectorAll('[part="item"]') ?? [];
+      const next = buttons[Math.min(index, buttons.length - 1)] ?? buttons[index - 1];
+      if (next && next.dataset.value !== item.value)
+        next.focus();
+      else
+        void this.focusInput();
+    });
+  }
+  focusItem(index) {
+    this.host.shadowRoot?.querySelectorAll('[part="item"]')[index]?.focus();
+  }
+  onItemKeyDown = (event, index) => {
+    if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+      return;
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.focusItem(Math.max(0, index - 1));
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      event.stopPropagation();
+      if (index === this.items.length - 1)
+        void this.focusInput();
+      else
+        this.focusItem(index + 1);
+    } else if (event.key === "Backspace" || event.key === "Delete") {
+      event.preventDefault();
+      event.stopPropagation();
+      this.remove(index, "keyboard");
+    }
+  };
+  onKeyDown = (event) => {
+    if (event.defaultPrevented || this.disabled || this.readOnly || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey)
+      return;
+    const input = event.composedPath().find((node) => node instanceof HTMLInputElement);
+    if (!input || this.raw || (input.selectionStart ?? 0) > 0)
+      return;
+    if (event.key === "ArrowLeft" && this.items.length) {
+      event.preventDefault();
+      this.focusItem(this.items.length - 1);
+    } else if (event.key === "Backspace" && this.items.length) {
+      event.preventDefault();
+      this.remove(this.items.length - 1, "keyboard");
+    }
+  };
+  async focusInput() {
+    await this.combobox?.focusInput();
+  }
+  render() {
+    return h(Host, { key: "bdb03a28ea25b22340dc56381fa45031f0c47c27", onKeyDown: this.onKeyDown }, h("ui-combobox", { key: "51ba1ab747af9f216223bd71f524db79ef57b8a9", ref: (element) => this.combobox = element, label: this.label, "label-visibility": "sr-only", placeholder: this.placeholder, name: this.name, value: null, query: this.raw, config: this.comboboxConfig, size: "sm", disabled: this.disabled, readOnly: this.readOnly, required: this.required, "onQuery-change": this.onQueryChange, "onValue-change": this.onValueChange, "onCreate-entry": this.onCreateEntry, "onOptions-change": this.onOptionsChange }, h("div", { key: "ebd8fd8e62db3c2e47b1bfc7558c01e7e1abb8ba", slot: "start", class: "items", role: "group", "aria-label": `Selected ${this.label}` }, this.items.map((item, index) => h("button", { type: "button", part: "item", class: "item", "data-value": item.value, tabIndex: -1, disabled: this.disabled || this.readOnly || item.disabled, "aria-label": `${item.label}, press Delete or Backspace to remove`, onKeyDown: (event) => this.onItemKeyDown(event, index) }, h("slot", { name: `item-${item.id}` }, h("ui-chip", { appearance: "pill" }, item.label))))), this.rows.map((option) => h("span", { slot: `option-${option.id}` }, h("slot", { name: `option-${option.id}` }, option.label))), h("span", { key: "99cd9848130de37e52a4f735c95e3754dbc64691", slot: "create" }, h("slot", { key: "84cc7c14716819bd968bdfcb9213fe3887a5c2b9", name: "create" }, "Create \u201C", this.raw, "\u201D")), h("span", { key: "1660eb03425dea4d36797e416d91b051531a470d", slot: "loading" }, h("slot", { key: "10c979403e89331e8bdf69ff2db3f5bc272b2685", name: "loading" }, "Loading suggestions\u2026")), h("span", { key: "1c862b6c5906aa3ec5fc874de5a5119e13ef9422", slot: "empty" }, h("slot", { key: "1c70a1beb7321d3b2be888b3826a1dba2f6fcc70", name: "empty" }, "No suggestions.")), h("span", { key: "4b4da5cb8b22543b90ff9230191bbb2e81d16408", slot: "error" }, h("slot", { key: "a371a5ce50895562ebc6e55227e4a4834af37f3d", name: "error" }, "Unable to load suggestions.")), h("div", { key: "f82e38165d90bdbfa8413c0a561abf7ab5da0183", slot: "footer" }, h("slot", { key: "6c0bd2b89428832f4cb485f5d2e30a792859ba9e", name: "footer" }))));
+  }
+  static get watchers() {
+    return {
+      "query": [{
+        "syncQuery": 0
+      }]
+    };
+  }
+};
+UIMultiCombobox.style = uiMultiComboboxCss();
+export {
+  UIMultiCombobox as ui_multi_combobox
+};