@threadlabs/looma 0.1.22 → 0.1.24

package/dist/{ui-radio.entry-B73QZK2M.js → ui-radio.entry-YNMXKLDW.js}

@@ -1,3 +1,7 @@
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail,
   eventToTrigger
@@ -7,7 +11,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-radio.entry.js
 var 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}`;
@@ -18,28 +22,32 @@ var UIRadio = class {
   get host() {
     return 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 (isControlled(this.checked))
+      this.internalChecked = this.checked;
+  }
   syncToInput() {
     const input = this.getInput();
     if (!input)
       return;
-    this.host.dataset.disabled = this.disabled ? "true" : "";
-    input.checked = this.checked;
+    this.host.toggleAttribute("data-disabled", this.disabled);
+    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 = controlledOrDefault(this.checked, this.defaultChecked);
     this.slotRef?.addEventListener("slotchange", () => this.syncToInput());
     this.syncToInput();
     const input = this.getInput();
@@ -61,6 +69,10 @@ var UIRadio = class {
     const input = e.target;
     if (!input || !input.checked)
       return;
+    if (!isControlled(this.checked))
+      this.internalChecked = true;
+    else
+      this.syncToInput();
     dispatchDetail(this.host, "change", {
       checked: true,
       value: this.value,
@@ -68,12 +80,12 @@ var UIRadio = class {
     });
   };
   render() {
-    return h(Host, { key: "e3025fa3ee89c684ab27e7780f11399e1e455eff", role: "radio", "aria-checked": String(this.checked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "279fd849b1ea8f2f84e34043a01da710008aba51", ref: (el) => this.slotRef = el }));
+    return h(Host, { key: "a5220e72dbf1b55ca73a3e6234f31c99d806433a", role: "radio", "aria-checked": String(this.internalChecked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "687e94b2036107c807e0319c3620bca7c06cbb26", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {
       "checked": [{
-        "syncToInput": 0
+        "syncFromProp": 0
       }],
       "disabled": [{
         "syncToInput": 0

package/dist/{ui-search-result-row.entry-DR2Y5S7P.js → ui-search-result-row.entry-AHVVAAIO.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-search-result-row.entry.js
 var 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}`;
@@ -41,7 +41,7 @@ var 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/{ui-search-shell.entry-ST5IKJBC.js → ui-search-shell.entry-CNBEAMEZ.js}

@@ -1,7 +1,7 @@
 import {
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-search-shell.entry.js
 var 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}}`;
@@ -32,7 +32,7 @@ var 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/{ui-select.entry-7GPRFV67.js → ui-select.entry-TUY6TCTC.js}

@@ -7,10 +7,10 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-select.entry.js
-var 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))}`;
+var 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))}`;
 var UISelect = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -18,22 +18,28 @@ var UISelect = class {
   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 !== void 0)
+      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;
+    if (this.value !== void 0)
+      select.value = this.internalValue;
+    else if (!this.initialized && this.defaultValue !== void 0)
+      select.value = this.defaultValue;
+    this.initialized = true;
     select.disabled = this.disabled;
     select.required = this.required;
     select.setAttribute("aria-invalid", this.invalid ? "true" : "false");
@@ -80,7 +86,7 @@ var UISelect = class {
     });
   };
   render() {
-    return h(Host, { key: "65420b700d6a80e3575efa25d72ccbf4b0398805", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "fa6b175770fcbf9ec904a528f0d41aa04f4e9c01", ref: (el) => this.slotRef = el }));
+    return h(Host, { key: "9a83a040bbad98355999c8099a78c6eba3ffc995", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "4a70aa44651132899e283e45c32213cf3f00be24", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {

package/dist/{ui-switch.entry-XQ5IRJRH.js → ui-switch.entry-26LFI7B5.js}

@@ -1,3 +1,7 @@
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail
 } from "./chunk-UL7UIUJZ.js";
@@ -6,7 +10,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-switch.entry.js
 var 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}`;
@@ -17,25 +21,28 @@ var UISwitch = class {
   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
     });
@@ -52,14 +59,19 @@ var 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 ? "" : void 0, 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 ? "" : void 0, 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 {

package/dist/{ui-tabs.entry-HPW5L5CY.js → ui-tabs.entry-LXB62RJJ.js}

@@ -1,3 +1,7 @@
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
 import {
   dispatchDetail,
   eventToTrigger
@@ -7,7 +11,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-tabs.entry.js
 var 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)}`;
@@ -18,12 +22,14 @@ var UITabs = class {
   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();
@@ -44,11 +50,8 @@ var 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") ?? "";
@@ -73,7 +76,8 @@ var 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 || void 0, trigger });
   }
@@ -102,7 +106,7 @@ var 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 {

package/dist/{ui-textarea.entry-W2PSRYVS.js → ui-textarea.entry-JYGMGPX2.js}

@@ -7,10 +7,10 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-textarea.entry.js
-var 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}`;
+var 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}`;
 var UITextarea = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -18,7 +18,7 @@ var UITextarea = class {
   get host() {
     return getElement(this);
   }
-  value = "";
+  value;
   defaultValue = "";
   disabled = false;
   invalid = false;
@@ -27,14 +27,16 @@ var UITextarea = class {
   internalValue = "";
   slotRef;
   syncFromProp() {
-    this.internalValue = this.value;
+    if (this.value !== void 0)
+      this.internalValue = this.value;
   }
   syncToTextarea() {
     const textarea = this.getTextarea();
     if (!textarea)
       return;
     this.host.dataset.invalid = this.invalid ? "true" : "";
-    textarea.value = this.internalValue;
+    if (this.value !== void 0)
+      textarea.value = this.internalValue;
     textarea.defaultValue = this.defaultValue;
     textarea.disabled = this.disabled;
     textarea.readOnly = this.readOnly;
@@ -83,7 +85,7 @@ var UITextarea = class {
     });
   };
   render() {
-    return h(Host, { key: "697c98bf66c016b21b28c7805eee2223bb9d275a", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "bd95bd79b1fe4e4103510a3cb036419c55976611", ref: (el) => this.slotRef = el }));
+    return h(Host, { key: "6ce80349ca316f7a44d08e83862125f6b4d736a6", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "2c1ce87c9019d8346673ae5e7dd8a543d1bcb91c", ref: (el) => this.slotRef = el }));
   }
   static get watchers() {
     return {

package/dist/{ui-toast-region.entry-FJUHFXKZ.js → ui-toast-region.entry-TOW4KZLZ.js}

@@ -10,7 +10,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-NIPNHZ5W.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-toast-region.entry.js
 var uiToastRegionCss = () => `:host{position:fixed;top:calc(var(--ui-space-4) + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:9999;display:grid;gap:var(--ui-space-2);inline-size:min(24rem, calc(100vw - (var(--ui-space-4) * 2)));max-inline-size:100%;pointer-events:none}:host([popover]){right:auto;bottom:auto;margin:0}:host>*{pointer-events:auto}::slotted([data-ui-toast]){display:grid;grid-template-columns:1fr auto;gap:var(--ui-space-2);align-items:start;border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);padding:var(--ui-space-3) var(--ui-space-4);background:var(--ui-surface-elevated);color:var(--ui-text-primary);box-shadow:var(--ui-shadow-lg);animation:ui-toast-enter 0.25s var(--ui-motion-ease) forwards}@keyframes ui-toast-enter{from{opacity:0;transform:translateY(-0.5rem)}to{opacity:1;transform:translateY(0)}}::slotted([data-ui-toast][aria-hidden='true']){display:none}::slotted([data-ui-toast-dismiss]){border:0;background:transparent;color:var(--ui-text-secondary);cursor:pointer;font:inherit}`;
@@ -22,10 +22,12 @@ var UIToastRegion = class {
     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)
@@ -35,22 +37,37 @@ var 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)
@@ -59,24 +76,16 @@ var UIToastRegion = class {
     if (!toast)
       return;
     const id = toast.id ?? "";
-    toast.setAttribute("aria-hidden", "true");
-    toast.remove();
+    const trigger = eventToTrigger(e);
+    this.pendingDismiss = { 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 ? "" : void 0 }, h("slot", { key: "e666b2a73a5d7eb8dd607df3d1c5135b78cf3775" }));
+    return h(Host, { key: "b4430aceacb7a66202c6a43ad7b0bbe31c51eb94", role: "region", "aria-label": "Notifications", "aria-live": "polite", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "8bfb02d38366fab29a1668a53b7834ccd1a9aa65" }));
   }
   static get watchers() {
     return {