@threadlabs/looma 0.1.22 → 0.1.24

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, h, H as Host } from './index-8BGiMGQ0.js';
 
 const uiSearchResultRowCss = () => `:host{display:block}.search-result-row{appearance:none;inline-size:100%;min-block-size:var(--ui-search-result-row-min-height, 56px);margin:0;padding-block:var(--ui-search-result-row-padding-block, var(--ui-space-3, 0.75rem));padding-inline:var(--ui-search-result-row-padding-inline, var(--ui-space-4, 1rem));display:flex;align-items:flex-start;gap:var(--ui-search-result-row-gap, var(--ui-space-3, 0.75rem));background:var(--ui-search-result-row-bg, transparent);border:none;border-block-end:1px solid var(--ui-search-result-row-border, var(--ui-border, #e5e7eb));color:inherit;cursor:pointer;text-align:left;transition:background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease)}:host(:last-child) .search-result-row{border-block-end:none}.search-result-row:hover:enabled{background:var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))}:host([selected]) .search-result-row{background:var(     --ui-search-result-row-selected-bg,     var(--ui-search-result-row-hover-bg, color-mix(in srgb, var(--ui-surface, #ffffff) 85%, black 3%))   )}.search-result-row:focus-visible{outline:2px solid var(--ui-focus-ring, #2563eb);outline-offset:-2px}.search-result-row:disabled,:host([disabled]) .search-result-row{opacity:0.6;cursor:not-allowed}.search-result-row__leading,.search-result-row__trailing{display:inline-flex;align-items:flex-start;flex-shrink:0}.search-result-row__content{min-inline-size:0;flex:1;display:flex;flex-direction:column}.search-result-row__title,.search-result-row__meta,.search-result-row__excerpt{display:block;min-inline-size:0}[hidden]{display:none}::slotted([slot='title']),::slotted([slot='meta']),::slotted([slot='excerpt']){display:block;margin:0}`;
 
@@ -37,7 +37,7 @@ const UISearchResultRow = class {
         this.hasTrailing = slotHasContent(this.trailingSlot);
     };
     render() {
-        return (h(Host, { key: '4fb3b963d73890850b58d03f225f125066412350' }, h("button", { key: '55332d2d06d279e5c6d39d044cfb89256cffdf69', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, h("span", { key: '1c9178595fb6f54ffc4e55b3a7cb5fe7dea94b40', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, h("slot", { key: '239d0a74e80e58f1b25d6b328293d9692a4483b6', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("span", { key: 'f80e39d4002bfa1ae7665857e27d184004654c03', class: "search-result-row__content", part: "content" }, h("span", { key: 'b1a1e7f378eee6db5a01949d8a299583556c79c1', class: "search-result-row__title", part: "title" }, h("slot", { key: '4d94ed22c472309e0ece5f7a2a744f400589c87e', name: "title" })), h("span", { key: '3dbc540f67e11cca515208597b7b6bb75e2772f5', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, h("slot", { key: '3ed5c8fd300a19801ac332d2e9516aadb19f664e', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '8403a7e6adc3b1fae04d659bfbf7ff5676ac113a', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, h("slot", { key: 'f0b0b07df739f780320394dae9b318f6676e9a94', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), h("span", { key: '2ebdf8d2ed7fefd31118052495503659c957d317', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, h("slot", { key: '60dfc20a47fff6aac28755bedb80e9a4b3fd93e0', name: "trailing", ref: (el) => (this.trailingSlot = el), onSlotchange: this.syncSlots })))));
+        return (h(Host, { key: '01e795d1c723c4e56f5648c429b40fc7841ff9b5' }, h("button", { key: '7bdde5075c5a3112d14741aa87937e69a8f5fea9', class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, h("span", { key: '39ba47af68a23875eebdbdf8f87ca7d94d42ec43', class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, h("slot", { key: 'f108b1c5d284057d5979bf4897f056543a1ff092', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '0daeb171b7010f37d959c91f2a87c1ae7e96a56f', class: "search-result-row__content", part: "content" }, h("span", { key: 'd7ec1b67a15fa9c79ea0fd23db73bd7bca40a8ce', class: "search-result-row__title", part: "title" }, h("slot", { key: '8c4a45511580a655e0593c8c57fd98838f2cb896', name: "title" })), h("span", { key: '0d30a58a7079ea0c8992c9b0b02b516a65350425', class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, h("slot", { key: '8de66e3b6adf89ed765ccc1c341ccac1b5513a6f', name: "meta", ref: (el) => (this.metaSlot = el), onSlotchange: this.syncSlots })), h("span", { key: '7c24542b9bb634a55530952c329242a351e813c3', class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, h("slot", { key: 'a5bfc4fd17b8535aa996e792498b33f25dd30ecd', name: "excerpt", ref: (el) => (this.excerptSlot = el), onSlotchange: this.syncSlots }))), h("span", { key: '25c74d8508a0b3b527ef5529a02e54e407cae5ae', class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, h("slot", { key: 'cba6f957de902b9ed3dc05c8b20794c9b69c85c6', name: "trailing", ref: (el) => (this.trailingSlot = el), onSlotchange: this.syncSlots })))));
     }
 };
 UISearchResultRow.style = uiSearchResultRowCss();

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-CEeiinfk.js';
+import { r as registerInstance, h } from './index-8BGiMGQ0.js';
 
 const uiSearchShellCss = () => `:host{position:fixed;inset:0;z-index:var(--ui-search-shell-z-index, 400);display:block}.search-shell{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-block-start:var(--ui-search-shell-padding-top, 10vh)}.search-shell__panel{position:relative;inline-size:min(     calc(100% - (var(--ui-search-shell-margin-inline, var(--ui-space-4, 1rem)) * 2)),     var(--ui-search-shell-max-width, 640px)   );max-block-size:var(--ui-search-shell-max-height, 80vh);display:flex;flex-direction:column;overflow:hidden;background:var(--ui-search-shell-bg, var(--ui-surface, #ffffff));border:1px solid var(--ui-search-shell-border, var(--ui-border, #e5e7eb));border-radius:var(--ui-search-shell-radius, var(--ui-radius-xl, 1rem));box-shadow:var(--ui-search-shell-shadow, var(--ui-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12)))}.search-shell__search,.search-shell__status,.search-shell__footer{flex-shrink:0}.search-shell__body{flex:1;min-block-size:0}[hidden]{display:none}@media (max-width: 767px){.search-shell{padding-block-start:0;align-items:stretch}.search-shell__panel{inline-size:100%;block-size:100vh;block-size:100dvh;max-block-size:none;border-radius:0;border-inline:none;border-block-start:none}}`;
 
@@ -29,7 +29,7 @@ const UISearchShell = class {
         this.hasFooter = slotHasContent(this.footerSlot);
     };
     render() {
-        return (h("div", { key: '946e3575a3b48f83315a5299d144a10647c31189', class: "search-shell", part: "base" }, h("slot", { key: '6146d441648a9cafca12b764e94373252b3940be', name: "backdrop" }), h("div", { key: 'e4389c8f39994209e1f8dc4dbf913e3728295545', class: "search-shell__panel", part: "panel" }, h("div", { key: '8c660767d3ac12e1d94086bb80bb459e2f45d173', class: "search-shell__search", part: "search" }, h("slot", { key: 'c870a4266f689654c76a1fc9e2bc23bf690a931c', name: "search" })), h("div", { key: 'b5a68d509a92fec24603008514e938ba27655f4d', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, h("slot", { key: 'bc3233c23289cb56ca8d4217c9b3c37df9570abc', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '291b357ed1c7949001952813c950fbaab24cd0fc', class: "search-shell__body", part: "body" }, h("slot", { key: '72ecf55e7267cef21e612c1aff840fef67442fb5', name: "body" })), h("div", { key: 'e393d0cc4bd0bbbf349a135d9f352ec08bd523cb', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: '2468bdafc67f01094a4461a1a1e2fd474a88ffcf', name: "footer", ref: (el) => (this.footerSlot = el), onSlotchange: this.syncSlots })))));
+        return (h("div", { key: 'c3a4366e1f22b249233e42fdc83f1620613cce52', class: "search-shell", part: "base" }, h("slot", { key: '4f22e4a44fe7ae190a80a6e5cd695c15eb4f029d', name: "backdrop" }), h("div", { key: 'bf452dae29f0ab31266d848a4dd4b794997b34a7', class: "search-shell__panel", part: "panel" }, h("div", { key: 'c0ef7d1d8ea95853404d39ddac1bff566d38d18e', class: "search-shell__search", part: "search" }, h("slot", { key: '462532250d8ba36aad1d31fe10da642d79e59faf', name: "search" })), h("div", { key: '4f7d91272d15f6e37df6fba4ae563efae5701b93', class: "search-shell__status", part: "status", hidden: !this.hasStatus }, h("slot", { key: 'd761691c1dd2c3012075163bb7eb9ce7e5bf3ef4', name: "status", ref: (el) => (this.statusSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '1427a10b3f43ea31c2a482beb17f78d70b5fb2cf', class: "search-shell__body", part: "body" }, h("slot", { key: '6d6e8c2b4ee4833b5476795d4c7e184dda07f81e', name: "body" })), h("div", { key: '8f7d36040f7d21489c703b53581e392a2616963b', class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: '08b84f01091d95895ee8693e9b322511bf614342', name: "footer", ref: (el) => (this.footerSlot = el), onSlotchange: this.syncSlots })))));
     }
 };
 UISearchShell.style = uiSearchShellCss();

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

@@ -1,29 +1,37 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
 
-const uiSelectCss = () => `:host{display:inline-flex;color:var(--ui-text-primary)}::slotted(select){width:100%;appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background-color:var(--ui-surface-default);color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding-block:var(--ui-select-padding-block, var(--ui-space-2));padding-inline-start:var(--ui-select-padding-inline-start, var(--ui-space-3));padding-inline-end:var(--ui-select-padding-inline-end, calc(var(--ui-space-6) + var(--ui-space-3)));margin:0;background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),     linear-gradient(135deg, currentColor 50%, transparent 50%);background-position:calc(100% - 1rem) calc(50% - 2px),     calc(100% - 0.7rem) calc(50% - 2px);background-size:0.35rem 0.35rem, 0.35rem 0.35rem;background-repeat:no-repeat;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(select:hover:not(:focus):not(:disabled)){border-color:var(--ui-border-strong)}::slotted(select:focus){border-color:var(--ui-focus-ring);box-shadow:0 0 0 3px var(--ui-accent-soft)}:host([data-invalid='true'])::slotted(select),::slotted(select[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(select:disabled){background-color:var(--ui-surface-muted);color:var(--ui-text-muted);cursor:not-allowed}::slotted(select:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}::slotted(select[multiple]),::slotted(select[size]:not([size='1'])){background-image:none;padding-inline-end:var(--ui-select-padding-inline-start, var(--ui-space-3))}`;
+const uiSelectCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(select){width:100%;appearance:none;min-block-size:var(--ui-control-min-block-size, 2.75rem);border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-radius-2);background-color:var(--ui-control-surface, var(--ui-surface-default));color:inherit;font:inherit;line-height:var(--ui-line-height-md);padding-block:var(--ui-select-padding-block, var(--ui-space-2));padding-inline-start:var(--ui-select-padding-inline-start, var(--ui-space-3));padding-inline-end:var(--ui-select-padding-inline-end, calc(var(--ui-space-6) + var(--ui-space-3)));margin:0;background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),     linear-gradient(135deg, currentColor 50%, transparent 50%);background-position:calc(100% - 1rem) calc(50% - 2px),     calc(100% - 0.7rem) calc(50% - 2px);background-size:0.35rem 0.35rem, 0.35rem 0.35rem;background-repeat:no-repeat;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(select:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(select:focus){border-color:var(--ui-control-focus, var(--ui-focus-ring));box-shadow:0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft))}:host([data-invalid='true'])::slotted(select),::slotted(select[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(select:disabled){background-color:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(select:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}::slotted(select[multiple]),::slotted(select[size]:not([size='1'])){background-image:none;padding-inline-end:var(--ui-select-padding-inline-start, var(--ui-space-3))}`;
 
 const UISelect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     get host() { return getElement(this); }
-    value = '';
-    defaultValue = '';
+    value;
+    defaultValue;
     disabled = false;
     invalid = false;
     required = false;
     internalValue = '';
     slotRef;
+    initialized = false;
     syncFromProp() {
-        this.internalValue = this.value;
+        if (this.value !== undefined)
+            this.internalValue = this.value;
     }
     syncToSelect() {
         const select = this.getSelect();
         if (!select)
             return;
         this.host.dataset.invalid = this.invalid ? 'true' : '';
-        select.value = this.internalValue || this.defaultValue;
+        // A native select automatically selects its first option. Apply the host
+        // default once regardless, then leave subsequent native/framework edits alone.
+        if (this.value !== undefined)
+            select.value = this.internalValue;
+        else if (!this.initialized && this.defaultValue !== undefined)
+            select.value = this.defaultValue;
+        this.initialized = true;
         select.disabled = this.disabled;
         select.required = this.required;
         select.setAttribute('aria-invalid', this.invalid ? 'true' : 'false');
@@ -70,7 +78,7 @@ const UISelect = class {
         });
     };
     render() {
-        return (h(Host, { key: '65420b700d6a80e3575efa25d72ccbf4b0398805', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'fa6b175770fcbf9ec904a528f0d41aa04f4e9c01', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: '9a83a040bbad98355999c8099a78c6eba3ffc995', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '4a70aa44651132899e283e45c32213cf3f00be24', ref: (el) => (this.slotRef = el) })));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 import { d as dispatchDetail } from './events-JwSoedEO.js';
+import { i as isControlled, c as controlledOrDefault } from './controlled-state-BnGhGgTH.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}`;
 
@@ -8,25 +9,28 @@ const UISwitch = class {
         registerInstance(this, hostRef);
     }
     get host() { return 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 (isControlled(this.checked))
+            this.internalChecked = this.checked;
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalChecked = this.internalChecked || this.defaultChecked;
+        this.internalChecked = controlledOrDefault(this.checked, this.defaultChecked);
     }
     toggle = (trigger) => {
         if (this.disabled)
             return;
-        this.internalChecked = !this.internalChecked;
+        const checked = !this.internalChecked;
+        if (!isControlled(this.checked))
+            this.internalChecked = checked;
         dispatchDetail(this.host, 'change', {
-            checked: this.internalChecked,
+            checked,
             value: this.value,
             trigger,
         });
@@ -43,14 +47,19 @@ const UISwitch = class {
         this.toggle('pointer');
     };
     render() {
-        return (h(Host, { key: '7dccbc5d5b97f5659decd5feda31b37e42e6f83e', 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 }, h("input", { key: '7841f4d20a50d1899c27ab232a9a34411a0c2d67', 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 (h(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 }, 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 (!isControlled(this.checked))
+                    this.internalChecked = checked;
                 dispatchDetail(this.host, 'change', {
-                    checked: this.internalChecked,
+                    checked,
                     value: this.value,
                     trigger: 'pointer',
                 });
-            } }), h("slot", { key: 'f3c2f5758e73f2a81f4a7ea4da734de0cb9a61c6' })));
+                if (isControlled(this.checked))
+                    input.checked = this.internalChecked;
+            } }), h("slot", { key: '7d72db5b720c0af0c4561b485ca558de61e1ce6e' })));
     }
     static get watchers() { return {
         "checked": [{

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
+import { i as isControlled, c as controlledOrDefault } from './controlled-state-BnGhGgTH.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)}`;
 
@@ -8,12 +9,14 @@ const UITabs = class {
         registerInstance(this, hostRef);
     }
     get host() { return 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 (isControlled(this.value))
+            this.internalValue = this.value;
     }
     syncState() {
         const tabs = this.getTabs();
@@ -34,11 +37,8 @@ const UITabs = class {
         });
     }
     componentDidLoad() {
-        this.syncFromProp();
-        if (!this.internalValue && this.defaultValue) {
-            this.internalValue = this.defaultValue;
-        }
-        if (!this.internalValue) {
+        this.internalValue = controlledOrDefault(this.value, this.defaultValue);
+        if (!isControlled(this.value) && !this.internalValue) {
             const tabs = this.getTabs();
             if (tabs.length > 0) {
                 this.internalValue = tabs[0]?.id ?? tabs[0]?.getAttribute('aria-controls') ?? '';
@@ -63,7 +63,8 @@ const UITabs = class {
         if (!newValue)
             return;
         const prev = this.internalValue;
-        this.internalValue = newValue;
+        if (!isControlled(this.value))
+            this.internalValue = newValue;
         this.syncState();
         dispatchDetail(this.host, 'select', { value: newValue, previousValue: prev || undefined, trigger });
     }
@@ -96,7 +97,7 @@ const UITabs = class {
         }
     };
     render() {
-        return (h(Host, { key: '99cd907204f73b1cbb1c8f2a182743c6554d5b0a', orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: 'a8158e593a3708e8819761d86356a58535a53e40' })));
+        return (h(Host, { key: '8681e699c6afdbafd59ed986b8bf3c815b32cd1c', orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: '673f4db2ae0aded3bd40934c1fff518cf6f83837' })));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,14 +1,14 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
 
-const uiTextareaCss = () => `:host{display:inline-flex;color:var(--ui-text-primary)}::slotted(textarea){width:100%;appearance:none;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-2);background:var(--ui-surface-default);color:inherit;font:inherit;line-height:var(--ui-line-height-md);min-block-size:calc(var(--ui-space-12, 3rem) * 2);padding:var(--ui-space-2) var(--ui-space-3);margin:0;resize:vertical;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(textarea:hover:not(:focus):not(:disabled)){border-color:var(--ui-border-strong)}::slotted(textarea:focus){border-color:var(--ui-focus-ring);box-shadow:0 0 0 3px var(--ui-accent-soft)}:host([data-invalid='true'])::slotted(textarea),::slotted(textarea[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(textarea:disabled){background:var(--ui-surface-muted);color:var(--ui-text-muted);cursor:not-allowed}::slotted(textarea:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
+const uiTextareaCss = () => `:host{display:inline-flex;min-inline-size:0;color:var(--ui-text-primary)}::slotted(textarea){width:100%;appearance:none;border:1px solid var(--ui-control-border, var(--ui-border-default));border-radius:var(--ui-radius-2);background:var(--ui-control-surface, var(--ui-surface-default));color:inherit;font:inherit;line-height:var(--ui-line-height-md);min-block-size:calc(var(--ui-space-12, 3rem) * 2);padding:var(--ui-space-2) var(--ui-space-3);margin:0;resize:vertical;transition:border-color var(--ui-motion-fast) var(--ui-motion-ease),     box-shadow var(--ui-motion-fast) var(--ui-motion-ease),     background-color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(textarea:hover:not(:focus):not(:disabled)){border-color:var(--ui-control-border-hover, var(--ui-border-strong))}::slotted(textarea:focus){border-color:var(--ui-control-focus, var(--ui-focus-ring));box-shadow:0 0 0 3px var(--ui-control-focus-halo, var(--ui-accent-soft))}:host([data-invalid='true'])::slotted(textarea),::slotted(textarea[aria-invalid='true']){border-color:var(--ui-accent-active)}::slotted(textarea:disabled){background:var(--ui-control-surface-disabled, var(--ui-surface-muted));color:var(--ui-text-muted);cursor:not-allowed}::slotted(textarea:focus-visible){outline:2px solid var(--ui-focus-ring);outline-offset:2px}`;
 
 const UITextarea = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
     }
     get host() { return getElement(this); }
-    value = '';
+    value;
     defaultValue = '';
     disabled = false;
     invalid = false;
@@ -17,14 +17,18 @@ const UITextarea = class {
     internalValue = '';
     slotRef;
     syncFromProp() {
-        this.internalValue = this.value;
+        if (this.value !== undefined)
+            this.internalValue = this.value;
     }
     syncToTextarea() {
         const textarea = this.getTextarea();
         if (!textarea)
             return;
         this.host.dataset.invalid = this.invalid ? 'true' : '';
-        textarea.value = this.internalValue;
+        // An omitted host value leaves the slotted textarea under framework or
+        // native-form control instead of resetting it during component updates.
+        if (this.value !== undefined)
+            textarea.value = this.internalValue;
         textarea.defaultValue = this.defaultValue;
         textarea.disabled = this.disabled;
         textarea.readOnly = this.readOnly;
@@ -73,7 +77,7 @@ const UITextarea = class {
         });
     };
     render() {
-        return (h(Host, { key: '697c98bf66c016b21b28c7805eee2223bb9d275a', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: 'bd95bd79b1fe4e4103510a3cb036419c55976611', ref: (el) => (this.slotRef = el) })));
+        return (h(Host, { key: '6ce80349ca316f7a44d08e83862125f6b4d736a6', "data-invalid": this.invalid ? '' : undefined }, h("slot", { key: '2c1ce87c9019d8346673ae5e7dd8a543d1bcb91c', ref: (el) => (this.slotRef = el) })));
     }
     static get watchers() { return {
         "value": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 import { d as dispatchDetail, e as eventToTrigger } from './events-JwSoedEO.js';
 import { b as createViewportSurface } from './positioning-Bu0dmLBE.js';
 
@@ -10,10 +10,12 @@ const UIToastRegion = class {
     }
     get host() { return 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)
@@ -23,22 +25,39 @@ const UIToastRegion = class {
     }
     componentDidLoad() {
         this.surface = 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) {
+            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)
@@ -47,24 +66,16 @@ const UIToastRegion = class {
         if (!toast)
             return;
         const id = toast.id ?? '';
-        toast.setAttribute('aria-hidden', 'true');
-        toast.remove();
+        const trigger = eventToTrigger(e);
+        this.pendingDismiss = { toast: toast, trigger };
         dispatchDetail(this.host, 'dismiss', {
             id,
             reason: 'action',
-            trigger: eventToTrigger(e),
+            trigger,
         });
-        this.updateOpenState();
-        if (this.getToasts().length === 0) {
-            dispatchDetail(this.host, 'close', {
-                open: false,
-                reason: 'action',
-                trigger: eventToTrigger(e),
-            });
-        }
     };
     render() {
-        return (h(Host, { key: '693e24016ec0881a4d619a489f1b655feee41784', role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: 'e666b2a73a5d7eb8dd607df3d1c5135b78cf3775' })));
+        return (h(Host, { key: 'b4430aceacb7a66202c6a43ad7b0bbe31c51eb94', role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? '' : undefined }, h("slot", { key: '8bfb02d38366fab29a1668a53b7834ccd1a9aa65' })));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,23 +1,33 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
-import { o as openOverlay, c as closeOverlay, r as requestTopOverlayClose } from './manager-PM9a74r7.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
+import { o as openOverlay, c as closeOverlay } from './manager-C-0syqXZ.js';
 import { d as dispatchDetail } from './events-JwSoedEO.js';
+import { i as isControlled, c as controlledOrDefault } from './controlled-state-BnGhGgTH.js';
 import { a as createAnchoredSurface } from './positioning-Bu0dmLBE.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) {
         registerInstance(this, hostRef);
+        this.opened = createEvent(this, "open");
+        this.closed = createEvent(this, "close");
     }
     get host() { return 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. */
     showDelay = 500;
     /** Pointer leave grace period in milliseconds. */
     hideDelay = 100;
+    /** Click or tap pins the description; activate again to dismiss. */
+    toggleOnClick = false;
+    pinned = false;
+    focused = false;
+    opened;
+    closed;
     internalOpen = false;
     overlayId = `ui-tooltip-${Math.random().toString(36).slice(2, 11)}`;
     trigger = null;
@@ -26,7 +36,8 @@ const UITooltip = class {
     hideTimer = null;
     syncFromProp() {
         this.clearTimers();
-        this.internalOpen = this.open;
+        if (isControlled(this.open))
+            this.internalOpen = this.open;
     }
     resetSurface() {
         this.syncTrigger();
@@ -51,11 +62,13 @@ const UITooltip = class {
         }
     }
     componentDidLoad() {
-        this.syncFromProp();
-        this.internalOpen = this.internalOpen || this.defaultOpen;
+        if (!this.host.id)
+            this.host.id = this.overlayId;
+        this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
         this.syncTrigger();
         this.setupSurface();
-        this.host.addEventListener('keydown', this.onKeydown);
+        this.host.addEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.addEventListener('pointerleave', this.onTriggerLeave);
         this.syncOverlay();
     }
     componentDidUpdate() {
@@ -66,12 +79,13 @@ const UITooltip = class {
         this.detachTriggerListeners();
         this.surface?.destroy();
         this.surface = null;
-        this.host.removeEventListener('keydown', this.onKeydown);
+        this.host.removeEventListener('pointerenter', this.onSurfaceEnter);
+        this.host.removeEventListener('pointerleave', this.onTriggerLeave);
         closeOverlay(this.overlayId);
     }
     syncTrigger() {
         const next = this.for
-            ? this.host.ownerDocument.getElementById(this.for)
+            ? this.host.getRootNode().getElementById(this.for)
             : this.host.previousElementSibling;
         if (next === this.trigger)
             return;
@@ -91,6 +105,11 @@ const UITooltip = class {
         this.detachTriggerListeners();
         if (!this.trigger)
             return;
+        const ids = new Set((this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean));
+        ids.add(this.host.id);
+        this.trigger.setAttribute('aria-describedby', [...ids].join(' '));
+        this.trigger.addEventListener('click', this.onTriggerClick);
+        this.trigger.addEventListener('keydown', this.onTriggerKeydown);
         this.trigger.addEventListener('pointerenter', this.onTriggerEnter);
         this.trigger.addEventListener('pointerleave', this.onTriggerLeave);
         this.trigger.addEventListener('focusin', this.onTriggerFocusIn);
@@ -99,6 +118,13 @@ const UITooltip = class {
     detachTriggerListeners() {
         if (!this.trigger)
             return;
+        const ids = (this.trigger.getAttribute('aria-describedby') || '').split(/\s+/).filter(id => id && id !== this.host.id);
+        if (ids.length)
+            this.trigger.setAttribute('aria-describedby', ids.join(' '));
+        else
+            this.trigger.removeAttribute('aria-describedby');
+        this.trigger.removeEventListener('click', this.onTriggerClick);
+        this.trigger.removeEventListener('keydown', this.onTriggerKeydown);
         this.trigger.removeEventListener('pointerenter', this.onTriggerEnter);
         this.trigger.removeEventListener('pointerleave', this.onTriggerLeave);
         this.trigger.removeEventListener('focusin', this.onTriggerFocusIn);
@@ -123,14 +149,29 @@ const UITooltip = class {
     setInteractionOpen(nextOpen, trigger) {
         if (this.internalOpen === nextOpen)
             return;
-        this.internalOpen = nextOpen;
+        if (!isControlled(this.open))
+            this.internalOpen = nextOpen;
         dispatchDetail(this.host, nextOpen ? 'open' : 'close', {
             open: nextOpen,
             reason: 'action',
             trigger,
         });
     }
-    onTriggerEnter = () => {
+    onSurfaceEnter = () => this.clearHideTimer();
+    onTriggerClick = (event) => {
+        if (!this.toggleOnClick)
+            return;
+        this.clearTimers();
+        this.pinned = !this.pinned;
+        this.setInteractionOpen(this.pinned, event.detail === 0 ? 'keyboard' : 'pointer');
+    };
+    onTriggerKeydown = (event) => {
+        if (event.key === 'Escape')
+            this.clearTimers();
+    };
+    onTriggerEnter = (event) => {
+        if (event.pointerType === 'touch')
+            return;
         this.clearHideTimer();
         if (this.internalOpen || this.showTimer !== null)
             return;
@@ -141,7 +182,7 @@ const UITooltip = class {
     };
     onTriggerLeave = () => {
         this.clearShowTimer();
-        if (!this.internalOpen || this.hideTimer !== null)
+        if (this.focused || this.pinned || !this.internalOpen || this.hideTimer !== null)
             return;
         this.hideTimer = setTimeout(() => {
             this.hideTimer = null;
@@ -149,6 +190,7 @@ const UITooltip = class {
         }, Math.max(0, this.hideDelay));
     };
     onTriggerFocusIn = () => {
+        this.focused = true;
         this.clearTimers();
         this.setInteractionOpen(true, 'keyboard');
     };
@@ -156,28 +198,26 @@ const UITooltip = class {
         const related = e.relatedTarget;
         if (related && this.host.contains(related))
             return;
+        this.focused = false;
+        this.pinned = false;
         this.clearTimers();
         this.setInteractionOpen(false, 'keyboard');
     };
     handleRequestClose(reason, trigger) {
-        if (reason === 'escape') {
+        if (reason === 'escape' || (reason === 'light-dismiss' && this.toggleOnClick)) {
+            this.pinned = false;
             this.clearTimers();
-            this.internalOpen = false;
+            if (!isControlled(this.open))
+                this.internalOpen = false;
             dispatchDetail(this.host, 'close', {
                 open: false,
-                reason: 'escape',
+                reason,
                 trigger: trigger,
             });
-            this.trigger?.focus();
         }
     }
-    onKeydown = (e) => {
-        if (e.key === 'Escape') {
-            requestTopOverlayClose('escape', 'keyboard');
-        }
-    };
     render() {
-        return (h(Host, { key: '4c3890a7371508ede06a5b370d1cec32db25280f', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined, onKeyDown: this.onKeydown }, h("slot", { key: '2e3bcd0dc69b0c3e3376d73dc4efc82e4f4cfaaa' })));
+        return (h(Host, { key: 'ce34c51bc3a9c9f7f31b7f0d329175df0cee1ab3', role: "tooltip", hidden: !this.internalOpen, "data-open": this.internalOpen ? '' : undefined }, h("div", { key: 'e5bb2bcb146fe8ec3b4e9a6abb550961181e3c06', class: "tooltip__surface" }, h("slot", { key: 'bdb71bfcb0f72c212cbb5c64fb69510fdded4afb' }))));
     }
     static get watchers() { return {
         "open": [{

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, g as getElement, h, H as Host } from './index-CEeiinfk.js';
+import { r as registerInstance, g as getElement, h, H as Host } from './index-8BGiMGQ0.js';
 
 const uiTopBarCss = () => `:host{position:sticky;inset-block-start:0;z-index:var(--ui-top-bar-z-index, 100);display:block}.top-bar{min-block-size:calc(var(--ui-top-bar-height, 56px) + env(safe-area-inset-top));display:flex;align-items:center;gap:var(--ui-top-bar-gap, var(--ui-space-3, 0.75rem));padding-block-start:env(safe-area-inset-top);padding-inline-start:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-left)   );padding-inline-end:max(     var(--ui-top-bar-padding-inline, var(--ui-space-4, 1rem)),     env(safe-area-inset-right)   );background:var(--ui-top-bar-bg, var(--ui-surface, #ffffff));border-block-end:1px solid var(--ui-top-bar-border, var(--ui-border, #e5e7eb))}.top-bar__leading,.top-bar__search,.top-bar__actions{display:flex;align-items:center;flex-shrink:0}.top-bar__actions{gap:var(--ui-top-bar-actions-gap, var(--ui-space-1, 0.25rem))}.top-bar__title{min-inline-size:0;flex:1}[hidden]{display:none}@media (min-width: 768px){:host{display:none}}`;
 
@@ -33,7 +33,7 @@ const UITopBar = class {
         this.hasActions = slotHasContent(this.actionsSlot);
     };
     render() {
-        return (h(Host, { key: '15c840c082724df0ec39ab6ad4e55f99192df5be' }, h("header", { key: '790afaeecdb3e598b8365391f57ee1e2d8ca69a2', class: "top-bar", part: "base" }, h("div", { key: 'fab822f5875c7e3b8e267be42c075597d79374fa', class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: '0723013c4b674964e4029442b715daa9eb0036db', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '77fc006257b7fa6a191191d9969ea66445b8bc3e', class: "top-bar__title" }, h("slot", { key: 'e8a07f1f767c1c0fa1244abcf3bb0e697e36a4fe' })), h("div", { key: 'bde5cdf797ae898f68eddeab362b8395f89bdf28', class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: '8b059d6123e94f3b7e18c15c88828ee9c6436136', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), h("div", { key: 'c262446cf29873903530ea3f840de4de9db3de82', class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: 'f417dbc8cc0115a455a72ce0feb5f32b323ce68f', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
+        return (h(Host, { key: 'b92aa4e03475b3e623212a1e98f45d5532860b51' }, h("header", { key: 'a3552708b0e424e762e100ee55fc6bfac4cd830a', class: "top-bar", part: "base" }, h("div", { key: '4c8a9e3a04ff23a615bf09e368f4212dd5b38157', class: "top-bar__leading", hidden: !this.hasLeading }, h("slot", { key: '64ecc99672b8fd37305810e0776a24bf87ea6f08', name: "leading", ref: (el) => (this.leadingSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '37fc003aba2b87f7c8c0e654cd6810d7f231f365', class: "top-bar__title" }, h("slot", { key: 'e6c901c15852e83340ca8ad1e264fd5e35445e84' })), h("div", { key: '37b1ac319367eeded4182ada401a31e0b9c2555a', class: "top-bar__search", hidden: !this.hasSearch }, h("slot", { key: '0a8b5ef500dd843909bb35a1133be548411f3b71', name: "search", ref: (el) => (this.searchSlot = el), onSlotchange: this.syncSlots })), h("div", { key: '7e5054a3ed6ecfe8d9d8b1b36992843aa0fb62eb', class: "top-bar__actions", hidden: !this.hasActions }, h("slot", { key: '19fe59c5ba4da7f0ceda764948f1288bfaa2a41d', name: "actions", ref: (el) => (this.actionsSlot = el), onSlotchange: this.syncSlots })))));
     }
 };
 UITopBar.style = uiTopBarCss();