@threadlabs/looma 0.1.23 → 0.1.24

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: '0b8fd5608631b5f9159fdf99d6eba918cc6587e4', "data-invalid": this.invalid ? '' : undefined, "data-disabled": this.disabled ? '' : undefined, "data-required": this.required ? '' : undefined }, index.h("slot", { key: '4ed78782bcc8b6699a40d8402994b486d71d730a', 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: 'fb4534d977b4812f402855f78176b8316ebace61', "data-disabled": this.disabled ? '' : undefined, "data-ui-affordance": this.anticipatory ? 'button' : undefined }, index.h("button", { key: 'b90d290870ad76ba18de88a6b6947a15040ff12a', type: "button", "aria-label": this.label || undefined, disabled: this.disabled }, index.h("slot", { key: '88ded6ad90a4cfeffcd687990e5ba8b0c7d3bd30' }))));
     }
 };
 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: 'fe125b4e8ec35e9ac0b0ca0434aa8439f515c51b', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: 'ec0609f9143435cf0436abb98488b9f30b71530b', 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: 'f8a1721f8e516af04f901b53c3a66ce1de932608', role: "menuitem", tabIndex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "data-value": this.value || undefined }, index.h("span", { key: '6483d0b3ce1be06aed214f626b2d6a2963a44ade', class: "menu-item__surface" }, index.h("slot", { key: 'db470b1cbb54d56a14d05c0d7f72c43e37f4263e' }))));
     }
 };
 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: 'c5af7acaf41b75165e9f7cf47d65b7a1dcd4d1c0', role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? '' : undefined }, index.h("div", { key: '058fff9a00a1dcba26f6db425096e7a96d889896', class: "menu__surface" }, index.h("slot", { key: 'dbbf9eb4ba2a348b6d85049e229ed0562ee17318' }))));
     }
     static get watchers() { return {
         "open": [{

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: '6a38873f2e4d085f733fa116057b1f55418e23ed', "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, index.h("div", { key: '6fef6e37921e8c52994617719f1ebb6d9bd54ee2', class: "popover__surface" }, index.h("slot", { key: '5ee4269592219035a3185f8f06fd71ecb12e4e71' }))));
     }
     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: '28c6eb6cc9520b570f40d2193d0c64a7a6c7db01', role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? '' : undefined }, index.h("slot", { key: '97814378181be78bfac6090ff173459e1f539728' })));
     }
     static get watchers() { return {
         "value": [{

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

@@ -2,6 +2,7 @@
 
 var index = require('./index-BHG9Rpil.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 
 const uiRadioCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2);color:var(--ui-text-primary)}:host([data-disabled='true']),:host([aria-disabled='true']){opacity:0.6;cursor:not-allowed}::slotted(input[type='radio']){accent-color:var(--ui-accent-solid);cursor:pointer}::slotted(input[type='radio']:focus-visible){outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
 
@@ -10,28 +11,32 @@ const UIRadio = class {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    checked = false;
+    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
+    checked;
     defaultChecked = false;
     disabled = false;
     name = '';
     required = false;
     value = 'on';
+    internalChecked = false;
     slotRef;
+    syncFromProp() {
+        if (controlledState.isControlled(this.checked))
+            this.internalChecked = this.checked;
+    }
     syncToInput() {
         const input = this.getInput();
         if (!input)
             return;
         this.host.toggleAttribute('data-disabled', this.disabled);
-        input.checked = this.checked;
+        input.checked = this.internalChecked;
         input.disabled = this.disabled;
         input.name = this.name;
         input.required = this.required;
         input.value = this.value;
     }
     componentDidLoad() {
-        if (!this.checked && this.defaultChecked) {
-            this.checked = true;
-        }
+        this.internalChecked = controlledState.controlledOrDefault(this.checked, this.defaultChecked);
         this.slotRef?.addEventListener('slotchange', () => this.syncToInput());
         this.syncToInput();
         const input = this.getInput();
@@ -53,6 +58,10 @@ const UIRadio = class {
         const input = e.target;
         if (!input || !input.checked)
             return;
+        if (!controlledState.isControlled(this.checked))
+            this.internalChecked = true;
+        else
+            this.syncToInput();
         events.dispatchDetail(this.host, 'change', {
             checked: true,
             value: this.value,
@@ -60,11 +69,11 @@ const UIRadio = class {
         });
     };
     render() {
-        return (index.h(index.Host, { key: '898869b84429366e43c075723e884f34da6fc6df', role: "radio", "aria-checked": String(this.checked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, index.h("slot", { key: '3f3b881175f25d439807ec9f8f0dd59a1acd6a90', ref: (el) => (this.slotRef = el) })));
+        return (index.h(index.Host, { key: 'a5220e72dbf1b55ca73a3e6234f31c99d806433a', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, index.h("slot", { key: '687e94b2036107c807e0319c3620bca7c06cbb26', ref: (el) => (this.slotRef = el) })));
     }
     static get watchers() { return {
         "checked": [{
-                "syncToInput": 0
+                "syncFromProp": 0
             }],
         "disabled": [{
                 "syncToInput": 0

package/dist/cjs/ui-search-result-row.cjs.entry.js

@@ -39,7 +39,7 @@ const UISearchResultRow = class {
         this.hasTrailing = slotHasContent(this.trailingSlot);
     };
     render() {
-        return (index.h(index.Host, { key: '8ef897782b50f1ecb129a51a25631d3d2bafe1e3' }, index.h("button", { key: '5b4fb4ac4968551a191e80bde7b991391d931220', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, index.h("span", { key: '5f5988d87bcf754d8a521e19e0e2a490dd868bd2', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, index.h("slot", { key: 'a7671c75c28d71ab843dcbb1fcdd9f4d0e0f7361', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("span", { key: '4ed60057e10ade9d7771812ad28aa25a017d34d8', class: "search-result-row__content", part: "content" }, index.h("span", { key: '37fa74ef4980ffd0b576ff824532d1267420461c', class: "search-result-row__title", part: "title" }, index.h("slot", { key: '187df950b39702723fa456b09e220e2b7587f00a', name: "title" })), index.h("span", { key: '6d2476c57d7c9c7530c3796a723f47f5f4859d71', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, index.h("slot", { key: 'd53329dd6865bbda005b0d25a2b9bc7b7a597452', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), index.h("span", { key: '8846c9669c0f65a739b770f41a93ddd4bef3f6bd', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, index.h("slot", { key: 'b63f70371538901aaff481a9e524bf817883cee6', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), index.h("span", { key: '1e8f94c3d83c3f649595c2843522b0973590a8d5', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, index.h("slot", { key: 'cfba9301ad97c1130a01f78c16052fc26e249f4b', name: "trailing", ref: (el) => (this.trailingSlot = el), onSlotchange: this.syncSlots })))));
+        return (index.h(index.Host, { key: '01e795d1c723c4e56f5648c429b40fc7841ff9b5' }, index.h("button", { key: '7bdde5075c5a3112d14741aa87937e69a8f5fea9', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, index.h("span", { key: '39ba47af68a23875eebdbdf8f87ca7d94d42ec43', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, index.h("slot", { key: 'f108b1c5d284057d5979bf4897f056543a1ff092', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("span", { key: '0daeb171b7010f37d959c91f2a87c1ae7e96a56f', class: "search-result-row__content", part: "content" }, index.h("span", { key: 'd7ec1b67a15fa9c79ea0fd23db73bd7bca40a8ce', class: "search-result-row__title", part: "title" }, index.h("slot", { key: '8c4a45511580a655e0593c8c57fd98838f2cb896', name: "title" })), index.h("span", { key: '0d30a58a7079ea0c8992c9b0b02b516a65350425', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, index.h("slot", { key: '8de66e3b6adf89ed765ccc1c341ccac1b5513a6f', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), index.h("span", { key: '7c24542b9bb634a55530952c329242a351e813c3', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, index.h("slot", { key: 'a5bfc4fd17b8535aa996e792498b33f25dd30ecd', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), index.h("span", { key: '25c74d8508a0b3b527ef5529a02e54e407cae5ae', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, index.h("slot", { key: 'cba6f957de902b9ed3dc05c8b20794c9b69c85c6', name: "trailing", ref: (el) => (this.trailingSlot = el), onSlotchange: this.syncSlots })))));
     }
 };
 UISearchResultRow.style = uiSearchResultRowCss();

package/dist/cjs/ui-search-shell.cjs.entry.js

@@ -31,7 +31,7 @@ const UISearchShell = class {
         this.hasFooter = slotHasContent(this.footerSlot);
     };
     render() {
-        return (index.h("div", { key: '2a09e1ee81d04c0af5420887a9fa0dfb8057040c', class: "search-shell", part: "base" }, index.h("slot", { key: '9124af2e3e73b686a73b11c7fe8c9d40986e98c1', name: "backdrop" }), index.h("div", { key: 'cec39a8cbbfe99b7bbeb37ce32655a88cee2bec3', class: "search-shell__panel", part: "panel" }, index.h("div", { key: '8168eda720e031daf350800ac48dcf445be0c417', class: "search-shell__search", part: "search" }, index.h("slot", { key: 'b220c9670a6a53cd93fa434dc97dc9d2582bec08', name: "search" })), index.h("div", { key: '24386da67dd8ab5e865519e5b0b70fe9c8924010', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, index.h("slot", { key: '7a0dfada13aca3275961667dadc9623729fbf644', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: 'e06b7da6219c7a71d69662c5bdcc24e6baa52aa9', class: "search-shell__body", part: "body" }, index.h("slot", { key: 'fabdea16cf443b57a826fc748b24342ff214b918', name: "body" })), index.h("div", { key: 'd38662a77f19fd59315b1882cda0a55680cc5a0b', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, index.h("slot", { key: '56eb386e22ae033939cdbdf3c6b6edf68594ceb5', name: "footer", ref: (el) => (this.footerSlot = el), onSlotchange: this.syncSlots })))));
+        return (index.h("div", { key: 'c3a4366e1f22b249233e42fdc83f1620613cce52', class: "search-shell", part: "base" }, index.h("slot", { key: '4f22e4a44fe7ae190a80a6e5cd695c15eb4f029d', name: "backdrop" }), index.h("div", { key: 'bf452dae29f0ab31266d848a4dd4b794997b34a7', class: "search-shell__panel", part: "panel" }, index.h("div", { key: 'c0ef7d1d8ea95853404d39ddac1bff566d38d18e', class: "search-shell__search", part: "search" }, index.h("slot", { key: '462532250d8ba36aad1d31fe10da642d79e59faf', name: "search" })), index.h("div", { key: '4f7d91272d15f6e37df6fba4ae563efae5701b93', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, index.h("slot", { key: 'd761691c1dd2c3012075163bb7eb9ce7e5bf3ef4', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '1427a10b3f43ea31c2a482beb17f78d70b5fb2cf', class: "search-shell__body", part: "body" }, index.h("slot", { key: '6d6e8c2b4ee4833b5476795d4c7e184dda07f81e', name: "body" })), index.h("div", { key: '8f7d36040f7d21489c703b53581e392a2616963b', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, index.h("slot", { key: '08b84f01091d95895ee8693e9b322511bf614342', name: "footer", ref: (el) => (this.footerSlot = el), onSlotchange: this.syncSlots })))));
     }
 };
 UISearchShell.style = uiSearchShellCss();

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

@@ -80,7 +80,7 @@ const UISelect = class {
         });
     };
     render() {
-        return (index.h(index.Host, { key: '5ac54353f467b70e94fce0ae661dc86c305befe7', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: '1386f3e4912720ab597f4567112e9c8b4166bcc6', ref: (el) => (this.slotRef = el) })));
+        return (index.h(index.Host, { key: '9a83a040bbad98355999c8099a78c6eba3ffc995', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: '4a70aa44651132899e283e45c32213cf3f00be24', ref: (el) => (this.slotRef = el) })));
     }
     static get watchers() { return {
         "value": [{

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

@@ -2,6 +2,7 @@
 
 var index = require('./index-BHG9Rpil.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 
 const uiSwitchCss = () => `: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}:host([role='switch']){cursor:pointer}:host input[type='checkbox']{appearance:none;-webkit-appearance:none;display:block;position:relative;width:2.25rem;height:1.25rem;padding:0;border:1px solid var(--ui-border-default);border-radius:999px;background:var(--ui-surface-muted);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     border-color var(--ui-motion-fast) var(--ui-motion-ease);margin:0}:host input[type='checkbox']::after{content:'';position:absolute;top:2px;left:2px;width:0.875rem;height:0.875rem;border-radius:999px;background:var(--ui-surface-default);border:1px solid var(--ui-border-default);transition:transform var(--ui-motion-fast) var(--ui-motion-ease)}:host input[type='checkbox']:checked{background:var(--ui-accent-solid);border-color:var(--ui-accent-solid)}:host input[type='checkbox']:checked::after{transform:translateX(calc(2.25rem - 0.875rem - 4px));background:var(--ui-text-on-accent);border-color:var(--ui-text-on-accent)}:host input[type='checkbox']:focus-visible{outline:2px solid var(--ui-accent-solid);outline-offset:2px}`;
 
@@ -10,25 +11,28 @@ const UISwitch = class {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    checked = false;
+    /** Controlled checked state. Omit it to use defaultChecked and local interaction state. */
+    checked;
     defaultChecked = false;
     disabled = false;
     required = false;
     value = 'on';
     internalChecked = false;
     syncFromProp() {
-        this.internalChecked = this.checked;
+        if (controlledState.isControlled(this.checked))
+            this.internalChecked = this.checked;
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalChecked = this.internalChecked || this.defaultChecked;
+        this.internalChecked = controlledState.controlledOrDefault(this.checked, this.defaultChecked);
     }
     toggle = (trigger) => {
         if (this.disabled)
             return;
-        this.internalChecked = !this.internalChecked;
+        const checked = !this.internalChecked;
+        if (!controlledState.isControlled(this.checked))
+            this.internalChecked = checked;
         events.dispatchDetail(this.host, 'change', {
-            checked: this.internalChecked,
+            checked,
             value: this.value,
             trigger,
         });
@@ -45,14 +49,19 @@ const UISwitch = class {
         this.toggle('pointer');
     };
     render() {
-        return (index.h(index.Host, { key: '14205d2856f8fb49b72d69d40f10ac1473a80c04', role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, index.h("input", { key: '974f8e487c8bf9196c05420e1817139dd6b4138c', type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
-                this.internalChecked = e.target.checked;
+        return (index.h(index.Host, { key: 'e11500e37da6a52c0cb4e143254363f85911aac1', role: "switch", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.onKeydown, onClick: this.onClick }, index.h("input", { key: '777310a90b66f67e6a8eb0f77da5274e32f10db0', type: "checkbox", checked: this.internalChecked, disabled: this.disabled, required: this.required, value: this.value, "aria-hidden": "true", tabIndex: -1, onChange: (e) => {
+                const input = e.target;
+                const checked = input.checked;
+                if (!controlledState.isControlled(this.checked))
+                    this.internalChecked = checked;
                 events.dispatchDetail(this.host, 'change', {
-                    checked: this.internalChecked,
+                    checked,
                     value: this.value,
                     trigger: 'pointer',
                 });
-            } }), index.h("slot", { key: 'd1cd89aa2d5312cff8845364cdee64821977cb44' })));
+                if (controlledState.isControlled(this.checked))
+                    input.checked = this.internalChecked;
+            } }), index.h("slot", { key: '7d72db5b720c0af0c4561b485ca558de61e1ce6e' })));
     }
     static get watchers() { return {
         "checked": [{

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

@@ -2,6 +2,7 @@
 
 var index = require('./index-BHG9Rpil.js');
 var events = require('./events-TcQIzpNv.js');
+var controlledState = require('./controlled-state-BFya8rAX.js');
 
 const uiTabsCss = () => `:host{display:flex;flex-direction:column;gap:0}:host([data-orientation='vertical']){flex-direction:row}::slotted([role='tablist']){display:flex;gap:0;max-inline-size:100%;overflow-x:auto;overscroll-behavior-inline:contain;border-bottom:1px solid var(--ui-border-default)}:host([data-orientation='vertical']) ::slotted([role='tablist']){flex-direction:column;border-bottom:none;border-inline-end:1px solid var(--ui-border-default)}::slotted(button[role='tab']),::slotted([role='tab']),::slotted(ui-button) button[role='tab']{padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);font-weight:var(--ui-font-medium, 500);color:var(--ui-text-secondary);background:none;border:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--ui-motion-fast) var(--ui-motion-ease);box-shadow:none}::slotted(button[role='tab']:hover),::slotted([role='tab']:hover){color:var(--ui-text-primary)}::slotted(button[role='tab'][aria-selected='true']),::slotted([role='tab'][aria-selected='true']){color:var(--ui-accent-solid);border-bottom-color:var(--ui-accent-solid)}:host([data-orientation='vertical']) ::slotted(button[role='tab']),:host([data-orientation='vertical']) ::slotted([role='tab']){border-bottom:none;border-inline-end:2px solid transparent;margin-bottom:0;margin-inline-end:-1px}:host([data-orientation='vertical']) ::slotted(button[role='tab'][aria-selected='true']),:host([data-orientation='vertical']) ::slotted([role='tab'][aria-selected='true']){border-inline-end-color:var(--ui-accent-solid)}::slotted([role='tabpanel']){padding:var(--ui-space-4)}`;
 
@@ -10,12 +11,14 @@ const UITabs = class {
         index.registerInstance(this, hostRef);
     }
     get host() { return index.getElement(this); }
-    value = '';
+    /** Controlled selected tab value. Omit it to use defaultValue and local interaction state. */
+    value;
     defaultValue = '';
     orientation = 'horizontal';
     internalValue = '';
     syncFromProp() {
-        this.internalValue = this.value;
+        if (controlledState.isControlled(this.value))
+            this.internalValue = this.value;
     }
     syncState() {
         const tabs = this.getTabs();
@@ -36,11 +39,8 @@ const UITabs = class {
         });
     }
     componentDidLoad() {
-        this.syncFromProp();
-        if (!this.internalValue && this.defaultValue) {
-            this.internalValue = this.defaultValue;
-        }
-        if (!this.internalValue) {
+        this.internalValue = controlledState.controlledOrDefault(this.value, this.defaultValue);
+        if (!controlledState.isControlled(this.value) && !this.internalValue) {
             const tabs = this.getTabs();
             if (tabs.length > 0) {
                 this.internalValue = tabs[0]?.id ?? tabs[0]?.getAttribute('aria-controls') ?? '';
@@ -65,7 +65,8 @@ const UITabs = class {
         if (!newValue)
             return;
         const prev = this.internalValue;
-        this.internalValue = newValue;
+        if (!controlledState.isControlled(this.value))
+            this.internalValue = newValue;
         this.syncState();
         events.dispatchDetail(this.host, 'select', { value: newValue, previousValue: prev || undefined, trigger });
     }
@@ -98,7 +99,7 @@ const UITabs = class {
         }
     };
     render() {
-        return (index.h(index.Host, { key: 'ca8671f06914de2bd6b412caf11e385d67ae722b', orientation: this.orientation, "data-orientation": this.orientation }, index.h("slot", { key: '49beb3783c8f6a330d25164c82933c2bf6345b1e' })));
+        return (index.h(index.Host, { key: '8681e699c6afdbafd59ed986b8bf3c815b32cd1c', orientation: this.orientation, "data-orientation": this.orientation }, index.h("slot", { key: '673f4db2ae0aded3bd40934c1fff518cf6f83837' })));
     }
     static get watchers() { return {
         "value": [{

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

@@ -79,7 +79,7 @@ const UITextarea = class {
         });
     };
     render() {
-        return (index.h(index.Host, { key: '9ccc0464bca55b3364645ea90df3890f9ed9d697', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: '81c4df31064d4dcd2b2e27dfcf3141cc9f18f54e', ref: (el) => (this.slotRef = el) })));
+        return (index.h(index.Host, { key: '6ce80349ca316f7a44d08e83862125f6b4d736a6', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: '2c1ce87c9019d8346673ae5e7dd8a543d1bcb91c', ref: (el) => (this.slotRef = el) })));
     }
     static get watchers() { return {
         "value": [{