@threadlabs/looma 0.1.23 → 0.1.25

package/dist/cjs/ui-disclosure.cjs.entry.js

@@ -3,6 +3,7 @@
 var index = require('./index-BHG9Rpil.js');
 var id = require('./id-CYbKpaYr.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 
 const uiDisclosureCss = () => `:host{display:block}::slotted([hidden]){display:none !important}`;
 
@@ -11,7 +12,8 @@ const UIDisclosure = class {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     disabled = false;
     internalOpen = false;
@@ -19,7 +21,8 @@ const UIDisclosure = class {
     trigger = null;
     content = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
     }
     syncState() {
         if (this.trigger) {
@@ -31,8 +34,7 @@ const UIDisclosure = class {
     }
     componentDidLoad() {
         this.resolveParts();
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
         this.syncState();
         this.trigger?.addEventListener('click', this.onTriggerClick);
         this.trigger?.addEventListener('keydown', this.onTriggerKeydown);
@@ -72,7 +74,8 @@ const UIDisclosure = class {
     setOpen(next, action) {
         if (this.internalOpen === next)
             return;
-        this.internalOpen = next;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = next;
         events.dispatchDetail(this.host, next ? 'open' : 'close', {
             open: next,
             reason: action.reason,
@@ -93,7 +96,7 @@ const UIDisclosure = class {
         this.setOpen(!this.internalOpen, { reason: 'action', trigger: 'keyboard' });
     };
     render() {
-        return (index.h(index.Host, { key: '3905d2d78a2d3d4ef36b582ba0f426be8e5e0f5e' }, index.h("slot", { key: '18547ff56457b73319264bba981f994fb947dffb' })));
+        return (index.h(index.Host, { key: '55f998f8e47ebe01fd5832d6c3dac310dda34b8d' }, index.h("slot", { key: '0d88728151901e1e412d7f5a3ae78b06aa7548fb' })));
     }
     static get watchers() { return {
         "open": [{

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

@@ -0,0 +1,100 @@
+'use strict';
+
+var index = require('./index-BHG9Rpil.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
+
+const uiEditableCss = () => `:host{display:block;min-inline-size:0}[hidden]{display:none !important}`;
+
+const UIEditable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.editChange = index.createEvent(this, "edit-change");
+    }
+    get host() { return index.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 (controlledState.isControlled(this.edit))
+            this.internalEdit = this.edit;
+    }
+    componentWillLoad() {
+        this.internalEdit = controlledState.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 (!controlledState.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 index.h(index.Host, { key: 'f350400d4ebf897fb657b83b7cba9d309c5067bd', "data-edit": this.internalEdit ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, onClick: this.onClick, onKeyDown: this.onKeyDown }, index.h("div", { key: 'f365ac61f59e9aaa1516121e3d6e2a42187e1d7b', part: "preview", hidden: this.internalEdit }, index.h("slot", { key: 'ea234b437cc4eb530f2994d695429be91d874ef7', name: "preview" })), index.h("div", { key: 'dacf0e74e72c47868986c80aaa60f55942fd9505', part: "edit", hidden: !this.internalEdit }, index.h("slot", { key: '54a943bc290335181a23b4cfa6055e4acfd8a62b', name: "edit" })));
+    }
+    static get watchers() { return {
+        "edit": [{
+                "syncFromProp": 0
+            }]
+    }; }
+};
+UIEditable.style = uiEditableCss();
+
+exports.ui_editable = UIEditable;

package/dist/cjs/ui-floating-action-button.cjs.entry.js

@@ -12,7 +12,7 @@ const UIFloatingActionButton = class {
     mobileOnly = false;
     label = '';
     render() {
-        return (index.h(index.Host, { key: 'c9a7d8c9b6d6608566b21621a73d939f372c830d', "data-disabled": this.disabled ? '' : undefined }, index.h("button", { key: '8eddccaf6be2f028bc02df967038843120045b84', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: '0ea12efb9cb8ecec06238066827a734fb3b01e1e' }))));
+        return (index.h(index.Host, { key: '9e917e07efcef5c0a96b8b09af8934f336a521bd', "data-disabled": this.disabled ? '' : undefined }, index.h("button", { key: '940daac4c2ff1144d7e82b36727205f286325a8e', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: '382c70aa4836f6e799f98e1f0e4bc6e3104430fc' }))));
     }
 };
 UIFloatingActionButton.style = uiFloatingActionButtonCss();

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

@@ -13,17 +13,62 @@ const UIFormField = class {
     invalid = false;
     disabled = false;
     required = false;
+    observer = null;
+    activeInput = null;
+    ownedDescriptionIds = 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.wire();
+        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) {
@@ -32,6 +77,9 @@ const UIFormField = class {
         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)
@@ -43,15 +91,22 @@ const UIFormField = class {
                 error.id = id.createId('form-field-error');
             describedIds.push(error.id);
         }
-        if (describedIds.length) {
-            input.setAttribute('aria-describedby', describedIds.join(' '));
+        const nextOwnedIds = describedIds.filter(id => !externalIds.includes(id));
+        const nextDescribedIds = Array.from(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 (index.h(index.Host, { key: 'cdd06c6b16ac56f3547e64e7888d8766243392db', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, index.h("slot", { key: '7d545673a3485f8beee01b13ab56185b98ba8856' })));
+        return (index.h(index.Host, { key: 'ac01e2be489b9c907169417dc5064061bd74ff7c', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, index.h("slot", { key: 'c739f9b2c948bc1d3db4316871c2293bf75cf520', onSlotchange: this.scheduleWire })));
     }
 };
 UIFormField.style = uiFormFieldCss();

package/dist/cjs/ui-icon-button.cjs.entry.js

@@ -15,7 +15,7 @@ const UIIconButton = class {
     /** Reveals this control through a surrounding ui-affordance-scope. */
     anticipatory = false;
     render() {
-        return (index.h(index.Host, { key: '8616d7e52a03a7a42738b11f4cabed3eb38c8640', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, index.h("button", { key: 'fae1362a50a0d80e2fcb3ab41f63ff21cf5d939a', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: 'e548fc504e3b26e85263fe3fc8faac0887fee16b' }))));
+        return (index.h(index.Host, { key: '225e147d184109d39a2e6f9236ba3ba3c5864c31', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, index.h("button", { key: '7e54fab4520ae6641c974abf19e975e8eec7a3df', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: '54f9ba27c5a2ca896267f07ad1055907e74a64bc' }))));
     }
 };
 UIIconButton.style = uiIconButtonCss();

package/dist/cjs/ui-input.cjs.entry.js

@@ -78,7 +78,7 @@ const UIInput = class {
         });
     };
     render() {
-        return (index.h(index.Host, { key: 'a2f2c108144a7acae0dfb1bef6ea1f38a4dcca9c', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: '04284765a12089a8a1045056d72551a3494f00fc', ref: (el) => (this.slotRef = el) })));
+        return (index.h(index.Host, { key: '0d8676e8458476681653ef4600dcb0f3b56d1ed1', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: 'd3585c07b6985d9090002f7a9c0eea1227517e0f', ref: (el) => (this.slotRef = el) })));
     }
     static get watchers() { return {
         "value": [{

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-BHG9Rpil.js');
 
-const uiMenuItemCss = () => `:host{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)}:host(:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}:host([aria-disabled='true']),:host([disabled]){opacity:0.6;cursor:not-allowed}`;
+const 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}`;
 
 const UIMenuItem = class {
     constructor(hostRef) {
@@ -11,7 +11,7 @@ const UIMenuItem = class {
     disabled = false;
     value = '';
     render() {
-        return (index.h(index.Host, { key: 'ebd7c5aa5c8fdce2d2349aef7f1a4505b9190852', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, index.h("slot", { key: '7b55a8545034b055f8cbd047a0f16ea729af097e' })));
+        return (index.h(index.Host, { key: '711e7f70268d23969e40073cd47b065afadc22c9', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, index.h("span", { key: 'd0c0aff983bdbc48666fcd652b39340bfd92c790', class: "menu-item__surface" }, index.h("slot", { key: '3fc6111848142b388529a9cdb5f6134bffe8fa42' }))));
     }
 };
 UIMenuItem.style = uiMenuItemCss();

package/dist/cjs/ui-menu.cjs.entry.js

@@ -3,16 +3,18 @@
 var index = require('./index-BHG9Rpil.js');
 var events = require('./events-TcQIzpNv.js');
 var manager = require('./manager-Ce25WRtl.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 var positioning = require('./positioning-i0WrCAdF.js');
 
-const 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}`;
+const 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%}`;
 
 const UIMenu = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.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;
@@ -23,7 +25,8 @@ const UIMenu = class {
     anchor = null;
     surface = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
     }
     resetSurface() {
         this.setupSurface();
@@ -50,8 +53,7 @@ const UIMenu = class {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
         this.host.addEventListener('click', this.onItemClick);
         this.host.addEventListener('keydown', this.onKeydown);
         this.setupSurface();
@@ -84,7 +86,8 @@ const UIMenu = class {
     closeMenu(reason, trigger) {
         if (!this.internalOpen)
             return;
-        this.internalOpen = false;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = false;
         events.dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -115,7 +118,8 @@ const UIMenu = class {
             reason: 'action',
             trigger: events.eventToTrigger(e),
         });
-        this.internalOpen = false;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = false;
     };
     onKeydown = (e) => {
         if (e.key === 'Escape') {
@@ -138,7 +142,8 @@ const UIMenu = class {
                     reason: 'action',
                     trigger: 'keyboard',
                 });
-                this.internalOpen = false;
+                if (!controlledState.isControlled(this.open))
+                    this.internalOpen = false;
             }
             return;
         }
@@ -155,7 +160,7 @@ const UIMenu = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: '25ae79e914820dfc470fa03d8c843646c3c060d9', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: 'b3a8b130e55610d948bc3e4603dede59dd560d05' })));
+        return (index.h(index.Host, { key: 'afba5a7f63238afdb6f71a3636c1f294d3e8ac6f', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, index.h("div", { key: '50d770efd27dddca436b804f10f1cc40bc604cb5', class: "menu__surface" }, index.h("slot", { key: '5014fc43a0ee2d66168bbcc1d52b20bd5120acb9' }))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -0,0 +1,158 @@
+'use strict';
+
+var index = require('./index-BHG9Rpil.js');
+
+const 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}`;
+
+const UIMultiCombobox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.queryChange = index.createEvent(this, "query-change");
+        this.addItem = index.createEvent(this, "add-item");
+        this.removeItem = index.createEvent(this, "remove-item");
+        this.createItem = index.createEvent(this, "create-item");
+        this.optionsChange = index.createEvent(this, "options-change");
+    }
+    get host() { return index.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 !== undefined)
+            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('\u0000');
+        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 === undefined)
+            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 });
+        // ui-combobox emits its selection value before the matching label query.
+        // Clear after both owner notifications so the stale label cannot win.
+        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 index.h(index.Host, { key: 'bdb03a28ea25b22340dc56381fa45031f0c47c27', onKeyDown: this.onKeyDown }, index.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 }, index.h("div", { key: 'ebd8fd8e62db3c2e47b1bfc7558c01e7e1abb8ba', slot: "start", class: "items", role: "group", "aria-label": `Selected ${this.label}` }, this.items.map((item, index$1) => 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$1) }, index.h("slot", { name: `item-${item.id}` }, index.h("ui-chip", { appearance: "pill" }, item.label))))), this.rows.map(option => index.h("span", { slot: `option-${option.id}` }, index.h("slot", { name: `option-${option.id}` }, option.label))), index.h("span", { key: '99cd9848130de37e52a4f735c95e3754dbc64691', slot: "create" }, index.h("slot", { key: '84cc7c14716819bd968bdfcb9213fe3887a5c2b9', name: "create" }, "Create \u201C", this.raw, "\u201D")), index.h("span", { key: '1660eb03425dea4d36797e416d91b051531a470d', slot: "loading" }, index.h("slot", { key: '10c979403e89331e8bdf69ff2db3f5bc272b2685', name: "loading" }, "Loading suggestions\u2026")), index.h("span", { key: '1c862b6c5906aa3ec5fc874de5a5119e13ef9422', slot: "empty" }, index.h("slot", { key: '1c70a1beb7321d3b2be888b3826a1dba2f6fcc70', name: "empty" }, "No suggestions.")), index.h("span", { key: '4b4da5cb8b22543b90ff9230191bbb2e81d16408', slot: "error" }, index.h("slot", { key: 'a371a5ce50895562ebc6e55227e4a4834af37f3d', name: "error" }, "Unable to load suggestions.")), index.h("div", { key: 'f82e38165d90bdbfa8413c0a561abf7ab5da0183', slot: "footer" }, index.h("slot", { key: '6c0bd2b89428832f4cb485f5d2e30a792859ba9e', name: "footer" }))));
+    }
+    static get watchers() { return {
+        "query": [{
+                "syncQuery": 0
+            }]
+    }; }
+};
+UIMultiCombobox.style = uiMultiComboboxCss();
+
+exports.ui_multi_combobox = UIMultiCombobox;

package/dist/cjs/ui-popover.cjs.entry.js

@@ -3,16 +3,18 @@
 var index = require('./index-BHG9Rpil.js');
 var manager = require('./manager-Ce25WRtl.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 var positioning = require('./positioning-i0WrCAdF.js');
 
-const uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg);max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;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}}`;
+const uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);box-sizing:border-box;max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:var(--ui-shadow-lg)}.popover__surface{box-sizing:border-box;padding:var(--ui-space-3);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;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}}`;
 
 const UIPopover = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     /** Optional id of the element this popover follows in the top layer. */
     for;
@@ -22,7 +24,8 @@ const UIPopover = class {
     anchor = null;
     surface = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
     }
     onOpenChange() {
         this.syncOverlay();
@@ -81,8 +84,7 @@ const UIPopover = class {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
         this.host.addEventListener('keydown', this.onKeydown);
         this.setupSurface();
         this.syncOverlay();
@@ -97,7 +99,8 @@ const UIPopover = class {
         this.syncOverlay();
     }
     handleRequestClose(reason, trigger) {
-        this.internalOpen = false;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = false;
         events.dispatchDetail(this.host, 'close', {
             open: false,
             reason: reason,
@@ -110,7 +113,7 @@ const UIPopover = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: 'cd957cb9fd5d1c05da7729a16d4cb229bc1deffa', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("slot", { key: 'd14960a1471948120f7173e18adae8d86e4fabb7' })));
+        return (index.h(index.Host, { key: 'a4986ace0f3c586774a549cb844287b28ccd0531', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("div", { key: '8f2c589916d06138ef72bfe0d039893b3c59a7cc', class: "popover__surface" }, index.h("slot", { key: 'ee70e7dcc53a99b5c80e56862a6eb00edcfcf912' }))));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-radio-group.cjs.entry.js

@@ -109,7 +109,7 @@ const UIRadioGroup = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: 'e80e01600d499d1b8e3410060433dac2bb8cf38a', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, index.h("slot", { key: 'e60dcfa1b174b1a4c9092567e6ec4d9f5bcd9ffe' })));
+        return (index.h(index.Host, { key: '1882ad7c092c6a138eab2a52c19beb9a950a8d5a', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, index.h("slot", { key: 'd5abade3d23963410cfbac17e80aa16dd21ccc6e' })));
     }
     static get watchers() { return {
         "value": [{