@threadlabs/looma 0.1.23 → 0.1.24

package/dist/{ui-menu.entry-IT3GW5TL.js → ui-menu.entry-7GDO5L2T.js}

@@ -1,7 +1,3 @@
-import {
-  dispatchDetail,
-  eventToTrigger
-} from "./chunk-UL7UIUJZ.js";
 import {
   closeOverlay,
   openOverlay,
@@ -10,15 +6,23 @@ import {
 import {
   createAnchoredSurface
 } from "./chunk-YHXJC5M5.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
+import {
+  dispatchDetail,
+  eventToTrigger
+} from "./chunk-UL7UIUJZ.js";
 import {
   Host,
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-menu.entry.js
-var uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%;padding:var(--ui-space-2) var(--ui-space-3);text-align:left;background:none;border:none;border-radius:var(--ui-radius-2);color:var(--ui-text-primary);font-size:var(--ui-font-size-md);font-weight:var(--ui-font-medium, 500);cursor:pointer;transition:background-color var(--ui-motion-fast) var(--ui-motion-ease),     color var(--ui-motion-fast) var(--ui-motion-ease)}::slotted(ui-menu-item:hover:not([aria-disabled='true']):not([disabled])){background:var(--ui-surface-subtle)}::slotted(ui-menu-item[aria-disabled='true']),::slotted(ui-menu-item[disabled]){opacity:0.6;cursor:not-allowed}`;
+var uiMenuCss = () => `:host{--ui-menu-viewport-gap:var(--ui-space-2, 0.5rem);display:flex;flex-direction:column;box-sizing:border-box;inline-size:max-content;min-inline-size:min(12rem, calc(100vw - (var(--ui-menu-viewport-gap) * 2)));max-inline-size:calc(100vw - (var(--ui-menu-viewport-gap) * 2));padding:0;border:0;border-radius:0;background:transparent;box-shadow:var(--ui-shadow-lg)}.menu__surface{display:flex;flex-direction:column;box-sizing:border-box;padding:var(--ui-space-1);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;overflow:auto;max-block-size:calc(100dvh - (var(--ui-menu-viewport-gap) * 2));opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}::slotted(ui-menu-item){display:block;width:100%}`;
 var UIMenu = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -26,7 +30,8 @@ var UIMenu = class {
   get host() {
     return getElement(this);
   }
-  open = false;
+  /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+  open;
   defaultOpen = false;
   /** Id of the control that anchors this menu in the top layer. */
   for;
@@ -37,7 +42,8 @@ var UIMenu = class {
   anchor = null;
   surface = null;
   syncFromProp() {
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
   }
   resetSurface() {
     this.setupSurface();
@@ -63,8 +69,7 @@ var UIMenu = class {
     }
   }
   componentDidLoad() {
-    this.syncFromProp();
-    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
     this.host.addEventListener("click", this.onItemClick);
     this.host.addEventListener("keydown", this.onKeydown);
     this.setupSurface();
@@ -97,7 +102,8 @@ var UIMenu = class {
   closeMenu(reason, trigger) {
     if (!this.internalOpen)
       return;
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
     dispatchDetail(this.host, "close", {
       open: false,
       reason,
@@ -125,7 +131,8 @@ var UIMenu = class {
       reason: "action",
       trigger: eventToTrigger(e)
     });
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
   };
   onKeydown = (e) => {
     if (e.key === "Escape") {
@@ -148,7 +155,8 @@ var UIMenu = class {
           reason: "action",
           trigger: "keyboard"
         });
-        this.internalOpen = false;
+        if (!isControlled(this.open))
+          this.internalOpen = false;
       }
       return;
     }
@@ -159,7 +167,7 @@ var UIMenu = class {
     }
   };
   render() {
-    return h(Host, { key: "25ae79e914820dfc470fa03d8c843646c3c060d9", role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "b3a8b130e55610d948bc3e4603dede59dd560d05" }));
+    return h(Host, { key: "c5af7acaf41b75165e9f7cf47d65b7a1dcd4d1c0", role: "menu", "aria-orientation": "vertical", "data-open": this.internalOpen ? "" : void 0 }, h("div", { key: "058fff9a00a1dcba26f6db425096e7a96d889896", class: "menu__surface" }, h("slot", { key: "dbbf9eb4ba2a348b6d85049e229ed0562ee17318" })));
   }
   static get watchers() {
     return {

package/dist/{ui-popover.entry-ZQQB4N6E.js → ui-popover.entry-FR6YRNK6.js}

@@ -1,6 +1,3 @@
-import {
-  dispatchDetail
-} from "./chunk-UL7UIUJZ.js";
 import {
   closeOverlay,
   openOverlay,
@@ -9,15 +6,22 @@ import {
 import {
   createAnchoredSurface
 } from "./chunk-YHXJC5M5.js";
+import {
+  controlledOrDefault,
+  isControlled
+} from "./chunk-HNFCGIBP.js";
+import {
+  dispatchDetail
+} from "./chunk-UL7UIUJZ.js";
 import {
   Host,
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-popover.entry.js
-var uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3);box-shadow:var(--ui-shadow-lg);max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}`;
+var uiPopoverCss = () => `:host{--ui-popover-viewport-gap:var(--ui-space-2, 0.5rem);box-sizing:border-box;max-inline-size:min(     20rem,     calc(100vw - (var(--ui-popover-viewport-gap) * 2))   );max-block-size:calc(100dvh - (var(--ui-popover-viewport-gap) * 2));overflow:auto;padding:0;border:0;border-radius:0;background:transparent;box-shadow:var(--ui-shadow-lg)}.popover__surface{box-sizing:border-box;padding:var(--ui-space-3);background:var(--ui-surface-elevated);border:1px solid var(--ui-border-default);border-radius:var(--ui-radius-3)}:host(:not([data-open])){display:none}:host([popover]){position:fixed;inset:auto;margin:0;opacity:0;transform:translateY(-4px) scale(0.99);transition:opacity var(--ui-motion-fast) var(--ui-motion-ease),     transform var(--ui-motion-fast) var(--ui-motion-ease),     display var(--ui-motion-fast) allow-discrete,     overlay var(--ui-motion-fast) allow-discrete}:host([popover]:popover-open){opacity:1;transform:translateY(0) scale(1)}@starting-style{:host([popover]:popover-open){opacity:0;transform:translateY(-4px) scale(0.99)}}:host([hidden]){display:none !important}@media (prefers-reduced-motion: reduce){:host([popover]){transition:none}}`;
 var UIPopover = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -25,7 +29,8 @@ var UIPopover = class {
   get host() {
     return getElement(this);
   }
-  open = false;
+  /** Controlled open state. Omit it to use defaultOpen and local interaction state. */
+  open;
   defaultOpen = false;
   /** Optional id of the element this popover follows in the top layer. */
   for;
@@ -35,7 +40,8 @@ var UIPopover = class {
   anchor = null;
   surface = null;
   syncFromProp() {
-    this.internalOpen = this.open;
+    if (isControlled(this.open))
+      this.internalOpen = this.open;
   }
   onOpenChange() {
     this.syncOverlay();
@@ -92,8 +98,7 @@ var UIPopover = class {
     }
   }
   componentDidLoad() {
-    this.syncFromProp();
-    this.internalOpen = this.internalOpen || this.defaultOpen;
+    this.internalOpen = controlledOrDefault(this.open, this.defaultOpen);
     this.host.addEventListener("keydown", this.onKeydown);
     this.setupSurface();
     this.syncOverlay();
@@ -108,7 +113,8 @@ var UIPopover = class {
     this.syncOverlay();
   }
   handleRequestClose(reason, trigger) {
-    this.internalOpen = false;
+    if (!isControlled(this.open))
+      this.internalOpen = false;
     dispatchDetail(this.host, "close", {
       open: false,
       reason,
@@ -121,7 +127,7 @@ var UIPopover = class {
     }
   };
   render() {
-    return h(Host, { key: "cd957cb9fd5d1c05da7729a16d4cb229bc1deffa", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("slot", { key: "d14960a1471948120f7173e18adae8d86e4fabb7" }));
+    return h(Host, { key: "6a38873f2e4d085f733fa116057b1f55418e23ed", "data-open": this.internalOpen ? "" : void 0, onKeyDown: this.onKeydown }, h("div", { key: "6fef6e37921e8c52994617719f1ebb6d9bd54ee2", class: "popover__surface" }, h("slot", { key: "5ee4269592219035a3185f8f06fd71ecb12e4e71" })));
   }
   static get watchers() {
     return {

package/dist/{ui-radio-group.entry-V7PCTS7I.js → ui-radio-group.entry-7QHXQSNO.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-radio-group.entry.js
 var uiRadioGroupCss = () => `:host{display:inline-flex;align-items:center;gap:var(--ui-space-2)}:host([data-orientation='vertical']){display:inline-grid;justify-items:start}`;
@@ -114,7 +114,7 @@ var UIRadioGroup = class {
     }
   };
   render() {
-    return h(Host, { key: "e80e01600d499d1b8e3410060433dac2bb8cf38a", role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "e60dcfa1b174b1a4c9092567e6ec4d9f5bcd9ffe" }));
+    return h(Host, { key: "28c6eb6cc9520b570f40d2193d0c64a7a6c7db01", role: "radiogroup", "aria-orientation": this.orientation, "data-orientation": this.orientation, "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "97814378181be78bfac6090ff173459e1f539728" }));
   }
   static get watchers() {
     return {

package/dist/{ui-radio.entry-JYH6TQBI.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-GDMQKT5F.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.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 = 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: "898869b84429366e43c075723e884f34da6fc6df", role: "radio", "aria-checked": String(this.checked), "aria-disabled": String(this.disabled), "data-disabled": this.disabled ? "" : void 0 }, h("slot", { key: "3f3b881175f25d439807ec9f8f0dd59a1acd6a90", 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-JBNYXXUN.js → ui-search-result-row.entry-AHVVAAIO.js}

@@ -2,7 +2,7 @@ import {
   Host,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.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: "8ef897782b50f1ecb129a51a25631d3d2bafe1e3" }, h("button", { key: "5b4fb4ac4968551a191e80bde7b991391d931220", class: "search-result-row", type: "button", disabled: this.disabled, part: "button" }, h("span", { key: "5f5988d87bcf754d8a521e19e0e2a490dd868bd2", class: "search-result-row__leading", part: "leading", hidden: !this.hasLeading }, h("slot", { key: "a7671c75c28d71ab843dcbb1fcdd9f4d0e0f7361", name: "leading", ref: (el) => this.leadingSlot = el, onSlotchange: this.syncSlots })), h("span", { key: "4ed60057e10ade9d7771812ad28aa25a017d34d8", class: "search-result-row__content", part: "content" }, h("span", { key: "37fa74ef4980ffd0b576ff824532d1267420461c", class: "search-result-row__title", part: "title" }, h("slot", { key: "187df950b39702723fa456b09e220e2b7587f00a", name: "title" })), h("span", { key: "6d2476c57d7c9c7530c3796a723f47f5f4859d71", class: "search-result-row__meta", part: "meta", hidden: !this.hasMeta }, h("slot", { key: "d53329dd6865bbda005b0d25a2b9bc7b7a597452", name: "meta", ref: (el) => this.metaSlot = el, onSlotchange: this.syncSlots })), h("span", { key: "8846c9669c0f65a739b770f41a93ddd4bef3f6bd", class: "search-result-row__excerpt", part: "excerpt", hidden: !this.hasExcerpt }, h("slot", { key: "b63f70371538901aaff481a9e524bf817883cee6", name: "excerpt", ref: (el) => this.excerptSlot = el, onSlotchange: this.syncSlots }))), h("span", { key: "1e8f94c3d83c3f649595c2843522b0973590a8d5", class: "search-result-row__trailing", part: "trailing", hidden: !this.hasTrailing }, h("slot", { key: "cfba9301ad97c1130a01f78c16052fc26e249f4b", 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-TEAWE76O.js → ui-search-shell.entry-CNBEAMEZ.js}

@@ -1,7 +1,7 @@
 import {
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.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: "2a09e1ee81d04c0af5420887a9fa0dfb8057040c", class: "search-shell", part: "base" }, h("slot", { key: "9124af2e3e73b686a73b11c7fe8c9d40986e98c1", name: "backdrop" }), h("div", { key: "cec39a8cbbfe99b7bbeb37ce32655a88cee2bec3", class: "search-shell__panel", part: "panel" }, h("div", { key: "8168eda720e031daf350800ac48dcf445be0c417", class: "search-shell__search", part: "search" }, h("slot", { key: "b220c9670a6a53cd93fa434dc97dc9d2582bec08", name: "search" })), h("div", { key: "24386da67dd8ab5e865519e5b0b70fe9c8924010", class: "search-shell__status", part: "status", hidden: !this.hasStatus }, h("slot", { key: "7a0dfada13aca3275961667dadc9623729fbf644", name: "status", ref: (el) => this.statusSlot = el, onSlotchange: this.syncSlots })), h("div", { key: "e06b7da6219c7a71d69662c5bdcc24e6baa52aa9", class: "search-shell__body", part: "body" }, h("slot", { key: "fabdea16cf443b57a826fc748b24342ff214b918", name: "body" })), h("div", { key: "d38662a77f19fd59315b1882cda0a55680cc5a0b", class: "search-shell__footer", part: "footer", hidden: !this.hasFooter }, h("slot", { key: "56eb386e22ae033939cdbdf3c6b6edf68594ceb5", 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-F3A6TE2U.js → ui-select.entry-TUY6TCTC.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-select.entry.js
 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))}`;
@@ -86,7 +86,7 @@ var UISelect = class {
     });
   };
   render() {
-    return h(Host, { key: "5ac54353f467b70e94fce0ae661dc86c305befe7", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "1386f3e4912720ab597f4567112e9c8b4166bcc6", 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-MJIICMP2.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-GDMQKT5F.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: "14205d2856f8fb49b72d69d40f10ac1473a80c04", 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: "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 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: "d1cd89aa2d5312cff8845364cdee64821977cb44" }));
+      if (isControlled(this.checked))
+        input.checked = this.internalChecked;
+    } }), h("slot", { key: "7d72db5b720c0af0c4561b485ca558de61e1ce6e" }));
   }
   static get watchers() {
     return {

package/dist/{ui-tabs.entry-6REFIUHV.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-GDMQKT5F.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: "ca8671f06914de2bd6b412caf11e385d67ae722b", orientation: this.orientation, "data-orientation": this.orientation }, h("slot", { key: "49beb3783c8f6a330d25164c82933c2bf6345b1e" }));
+    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-OJTXCED7.js → ui-textarea.entry-JYGMGPX2.js}

@@ -7,7 +7,7 @@ import {
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.js";
+} from "./chunk-IMHSPETJ.js";
 
 // dist/esm/ui-textarea.entry.js
 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}`;
@@ -85,7 +85,7 @@ var UITextarea = class {
     });
   };
   render() {
-    return h(Host, { key: "9ccc0464bca55b3364645ea90df3890f9ed9d697", "data-invalid": this.invalid ? "" : void 0 }, h("slot", { key: "81c4df31064d4dcd2b2e27dfcf3141cc9f18f54e", 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-NOFXLKPS.js → ui-toast-region.entry-TOW4KZLZ.js}

@@ -1,16 +1,16 @@
+import {
+  createViewportSurface
+} from "./chunk-YHXJC5M5.js";
 import {
   dispatchDetail,
   eventToTrigger
 } from "./chunk-UL7UIUJZ.js";
-import {
-  createViewportSurface
-} from "./chunk-YHXJC5M5.js";
 import {
   Host,
   getElement,
   h,
   registerInstance
-} from "./chunk-GDMQKT5F.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: "9ec1cc51ecc4e7a256be5d89a09a10788e46db53", role: "region", "aria-label": "Notifications", "data-open": this.internalOpen ? "" : void 0 }, h("slot", { key: "7b08656f3745a02f8e9f0935e47d6f2cffd88f9b" }));
+    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 {