@threadlabs/looma 0.1.23 → 0.1.25

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: 'f4700b43790accd29a6bcc55fcc862072e29c335', role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? '' : undefined }, index.h("slot", { key: 'ed32c35f8f68c662a8b95e58b74c8c76c959ea49', 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: 'eeda041dbcf8841cd53be9c532df208eb3be3d3b' }, index.h("button", { key: '71d3db6d2eca4f8d7796429f68ef73bf2c7b62f7', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, index.h("span", { key: 'f2260cab9f654e7f5e96a5e7e2a1cbbb5a55fde3', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, index.h("slot", { key: '824fffc19c2b5712dae0c000f12cc36a0043a370', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("span", { key: '4e3728ea7d363f256f1b3283df6eb984cf3f570f', class: "search-result-row__content", part: "content" }, index.h("span", { key: '95009b1ce569fb4251df62334a5dd88f1de561af', class: "search-result-row__title", part: "title" }, index.h("slot", { key: '132beecf36471ae0db68d686829428225699c534', name: "title" })), index.h("span", { key: '0ad7c8d52aa40ccf62667d3ecca4d48b49917a9a', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, index.h("slot", { key: '4b97129504571a676839287bd87e68d803f8bc99', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), index.h("span", { key: 'e6c73e653fb7dc213866a15870281f3f6d95a86b', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, index.h("slot", { key: '49deae8194485304380b8b4b3d4fe96cd6623f4d', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), index.h("span", { key: 'c7c6f0b57668644a28d3c4c981b4db79a0e3c42a', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, index.h("slot", { key: 'e6cbceeb41d23c9b7514f53663438069499d1a4d', 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: 'ae5baf1fae88f3c0ff8c98e68e1c31d7f19d7b6a', class: "search-shell", part: "base" }, index.h("slot", { key: '192d10867902bc4618762ab3ce1ca8a44229ec11', name: "backdrop" }), index.h("div", { key: '72bafd3ba7aadebcb011fb27f56793a9079bb2e1', class: "search-shell__panel", part: "panel" }, index.h("div", { key: 'c2d46c9099699cc1c2f357cb51d11ab0e6cf6c69', class: "search-shell__search", part: "search" }, index.h("slot", { key: '21f4ed690247fa794bd9322c75cee1721926087a', name: "search" })), index.h("div", { key: '84baba674456aa2a5878d5858d0e6531251440ce', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, index.h("slot", { key: '6e7b6533a29231ebbcd41529d8120649ca4a1dd1', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '710d51d450132ad0f528b2eb2cd6f0312dbced2f', class: "search-shell__body", part: "body" }, index.h("slot", { key: '2c380ff4ad33ead6ca8c2611ebc024f125f0da48', name: "body" })), index.h("div", { key: '6923984a31c7bc23bae3ecee08d7acad14703a02', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, index.h("slot", { key: '57c2eab7a3f46558ada8d1aa70d64f434bb8cdd6', 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: '74cbe4a76a23af415c202c61951ad513b0ed6cb8', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: 'e86eb0cfb0d379cb3f8b2ea5ce3c69639d0cdda4', 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: 'a37ded5259d71a57308cba6dd158ae4ae81e4e8b', 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: '882f81f39d752430f1de1554a5d83176416f4617', 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: 'b3b2b5afae622d1ae79cadd84f60c6b6c2df55a4' })));
     }
     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: '19207153c7b7a6ea5f5ffb50439e99af70984b44', orientation: this.orientation, "data-orientation": this.orientation }, index.h("slot", { key: '5045cd040eeccd028c00328206d47f7d17b622de' })));
     }
     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: '020adfed4a177ef5d07852ff2e6ffb66b6f80742', "data-invalid": this.invalid ? '' : undefined }, index.h("slot", { key: '2e9bd0e071e24fcf248eadf38f16484321359503', ref: (el) => (this.slotRef = el) })));
     }
     static get watchers() { return {
         "value": [{

package/dist/cjs/ui-toast-region.cjs.entry.js

@@ -12,10 +12,12 @@ const UIToastRegion = class {
     }
     get host() { return index.getElement(this); }
     open = true;
-    internalOpen = true;
+    internalOpen = false;
     surface = null;
+    contentObserver = null;
+    pendingDismiss = null;
     syncFromProp() {
-        this.internalOpen = this.open;
+        this.syncContents();
     }
     syncSurface() {
         if (this.internalOpen)
@@ -25,22 +27,39 @@ const UIToastRegion = class {
     }
     componentDidLoad() {
         this.surface = positioning.createViewportSurface(this.host);
-        this.syncFromProp();
+        this.contentObserver = new MutationObserver(this.syncContents);
+        this.contentObserver.observe(this.host, { childList: true, subtree: true });
+        this.syncContents();
         this.syncSurface();
         this.host.addEventListener('click', this.onClick);
     }
     disconnectedCallback() {
         this.host.removeEventListener('click', this.onClick);
+        this.contentObserver?.disconnect();
+        this.contentObserver = null;
         this.surface?.destroy();
         this.surface = null;
     }
     getToasts() {
         return Array.from(this.host.querySelectorAll('[data-ui-toast]'));
     }
-    updateOpenState() {
-        const toasts = this.getToasts();
-        this.internalOpen = toasts.length > 0;
-    }
+    syncContents = () => {
+        const nextOpen = this.open && this.getToasts().length > 0;
+        const wasOpen = this.internalOpen;
+        const completedDismiss = this.pendingDismiss && !this.host.contains(this.pendingDismiss.toast)
+            ? this.pendingDismiss
+            : null;
+        this.internalOpen = nextOpen;
+        if (wasOpen && !nextOpen && completedDismiss) {
+            events.dispatchDetail(this.host, 'close', {
+                open: false,
+                reason: 'action',
+                trigger: completedDismiss.trigger,
+            });
+        }
+        if (completedDismiss || !this.open)
+            this.pendingDismiss = null;
+    };
     onClick = (e) => {
         const dismissBtn = e.target.closest?.('[data-ui-toast-dismiss]');
         if (!dismissBtn)
@@ -49,24 +68,16 @@ const UIToastRegion = class {
         if (!toast)
             return;
         const id = toast.id ?? '';
-        toast.setAttribute('aria-hidden', 'true');
-        toast.remove();
+        const trigger = events.eventToTrigger(e);
+        this.pendingDismiss = { toast: toast, trigger };
         events.dispatchDetail(this.host, 'dismiss', {
             id,
             reason: 'action',
-            trigger: events.eventToTrigger(e),
+            trigger,
         });
-        this.updateOpenState();
-        if (this.getToasts().length === 0) {
-            events.dispatchDetail(this.host, 'close', {
-                open: false,
-                reason: 'action',
-                trigger: events.eventToTrigger(e),
-            });
-        }
     };
     render() {
-        return (index.h(index.Host, { key: '9ec1cc51ecc4e7a256be5d89a09a10788e46db53', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: '7b08656f3745a02f8e9f0935e47d6f2cffd88f9b' })));
+        return (index.h(index.Host, { key: '8a3546bcd59e12f21393ea55fa4d232d3907a34e', role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: 'a4a4525a1ca768d65ff36b3889a821b8dda8b6f7' })));
     }
     static get watchers() { return {
         "open": [{

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

@@ -3,9 +3,10 @@
 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 uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md);opacity:0;transform:translateY(4px);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-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
+const uiTooltipCss = () => `:host{position:fixed;inset:auto;margin:0;display:inline-block;box-sizing:border-box;padding:0;border:0;border-radius:0;background:transparent;opacity:0;transform:translateY(4px);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}.tooltip__surface{box-sizing:border-box;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-elevated);color:var(--ui-text-primary);padding:var(--ui-space-2) var(--ui-space-3);font-size:var(--ui-font-size-sm);box-shadow:var(--ui-shadow-md)}:host(:popover-open){opacity:1;transform:translateY(0)}@starting-style{:host(:popover-open){opacity:0;transform:translateY(4px)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host{transition:none}}`;
 
 const UITooltip = class {
     constructor(hostRef) {
@@ -15,7 +16,8 @@ const UITooltip = class {
     }
     get host() { return index.getElement(this); }
     for = '';
-    open = false;
+    /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+    open;
     defaultOpen = false;
     placement = 'top-start';
     /** Pointer hover intent delay in milliseconds. Keyboard focus is immediate. */
@@ -36,7 +38,8 @@ const UITooltip = class {
     hideTimer = null;
     syncFromProp() {
         this.clearTimers();
-        this.internalOpen = this.open;
+        if (controlledState.isControlled(this.open))
+            this.internalOpen = this.open;
     }
     resetSurface() {
         this.syncTrigger();
@@ -63,8 +66,7 @@ const UITooltip = class {
     componentDidLoad() {
         if (!this.host.id)
             this.host.id = this.overlayId;
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        this.internalOpen = controlledState.controlledOrDefault(this.open, this.defaultOpen);
         this.syncTrigger();
         this.setupSurface();
         this.host.addEventListener('pointerenter', this.onSurfaceEnter);
@@ -149,7 +151,8 @@ const UITooltip = class {
     setInteractionOpen(nextOpen, trigger) {
         if (this.internalOpen === nextOpen)
             return;
-        this.internalOpen = nextOpen;
+        if (!controlledState.isControlled(this.open))
+            this.internalOpen = nextOpen;
         events.dispatchDetail(this.host, nextOpen ? 'open' : 'close', {
             open: nextOpen,
             reason: 'action',
@@ -206,7 +209,8 @@ const UITooltip = class {
         if (reason === 'escape' || (reason === 'light-dismiss' && this.toggleOnClick)) {
             this.pinned = false;
             this.clearTimers();
-            this.internalOpen = false;
+            if (!controlledState.isControlled(this.open))
+                this.internalOpen = false;
             events.dispatchDetail(this.host, 'close', {
                 open: false,
                 reason,
@@ -215,7 +219,7 @@ const UITooltip = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b0199c23316a707ae3e1e7c361f2838872f62221', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, index.h("slot", { key: 'd0c7822f2f47848a509bf8e310806edbdb320f02' })));
+        return (index.h(index.Host, { key: '6c70f235889d6f1c425f0a51fcfc04e06a96dea4', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, index.h("div", { key: '5c4f1d264e32d308f5b26af4e967e13369c4238a', class: "tooltip__surface" }, index.h("slot", { key: '52b5900d67ffa7590b0ff97511f99718d2e8c311' }))));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/ui-top-bar.cjs.entry.js

@@ -35,7 +35,7 @@ const UITopBar = class {
         this.hasActions = slotHasContent(this.actionsSlot);
     };
     render() {
-        return (index.h(index.Host, { key: '730e45232ab2b86c2ac99dba773f4ca15d7c3c51' }, index.h("header", { key: 'f94f9b4f3f5930fda950895d2eec01d3ec175479', class: "top-bar", part: "base" }, index.h("div", { key: '038f6a404b0f159b4b826ada73d3c920266354c8', class: "top-bar__leading", hidden: !this.hasLeading }, index.h("slot", { key: '2d415368310c319eca3f3eb9b2c885ef79bb4107', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: 'dfd78b02066a91e9c610e4655a70da704ad65327', class: "top-bar__title" }, index.h("slot", { key: '499e24a864a31f6e400fd02aab4a3f960c87e572' })), index.h("div", { key: '5aa94952996487651dffecd2e351548631fa29b6', class: "top-bar__search", hidden: !this.hasSearch }, index.h("slot", { key: 'eddad95f8acf787ee0cead2a46e7961a06375d5c', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: 'dc69d492aa221a8beb888350bf101f8beeceede9', class: "top-bar__actions", hidden: !this.hasActions }, index.h("slot", { key: '7cde7e062f487da8209738a32415636c7a6b72f0', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
+        return (index.h(index.Host, { key: 'ef7cf644a8e8381d7d1f8d093bcfefcdc4620682' }, index.h("header", { key: '5055594a179d86efefd43529e070a582c51cb1d8', class: "top-bar", part: "base" }, index.h("div", { key: 'bd6ec069ae9d7820a6992250ba1aa997b4cc6754', class: "top-bar__leading", hidden: !this.hasLeading }, index.h("slot", { key: '3b9b1b73fb455ad720e1db46757555eb3713c0b8', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: 'e402cc0cb7ec4418460182f8f32cb161c6139221', class: "top-bar__title" }, index.h("slot", { key: 'fce0cfc11da269167853f591742b1369023864ae' })), index.h("div", { key: '6861bb04f399076378aa1fa9be24b35db277106a', class: "top-bar__search", hidden: !this.hasSearch }, index.h("slot", { key: '3857f37d53ec99b36a52cb7830e634afdee29d2e', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), index.h("div", { key: '538f6297078b6d5aa85906e902066e8809f52540', class: "top-bar__actions", hidden: !this.hasActions }, index.h("slot", { key: '3c45ff59c4b48673e796c6e93842cb11fceb652f', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
     }
 };
 UITopBar.style = uiTopBarCss();