@peektravel/app-utilities 0.5.3 → 0.6.0

package/dist/ui/index.cjs

@@ -54,9 +54,31 @@ var OdyElement = class extends HTMLElement {
   /** Self-pruning re-render hook subscribed to locale changes (set on mount). */
   #localeCb = null;
   connectedCallback() {
-    queueMicrotask(() => {
-      if (this.isConnected && this.#slot === null) this.render();
-    });
+    this.#upgradeProperties();
+    if (this.#slot === null) {
+      queueMicrotask(() => {
+        if (this.isConnected && this.#slot === null) this.render();
+      });
+    } else {
+      this.render();
+    }
+  }
+  /** Re-apply own properties that shadow a prototype accessor (pre-upgrade sets). */
+  #upgradeProperties() {
+    const self = this;
+    for (const key of Object.getOwnPropertyNames(this)) {
+      let proto = Object.getPrototypeOf(this);
+      while (proto && proto !== HTMLElement.prototype) {
+        const desc = Object.getOwnPropertyDescriptor(proto, key);
+        if (desc && (desc.get || desc.set)) {
+          const value = self[key];
+          delete self[key];
+          self[key] = value;
+          break;
+        }
+        proto = Object.getPrototypeOf(proto);
+      }
+    }
   }
   attributeChangedCallback() {
     if (this.#slot !== null) this.render();
@@ -85,6 +107,77 @@ var OdyElement = class extends HTMLElement {
     }
     return this.#slot;
   }
+  /**
+   * Move slotted content out of a portaled chrome node (dialog/panel/bubble)
+   * back into the captured slot fragment, so it survives `disconnectedCallback`
+   * tearing that node down and is re-slotted by the re-render on reconnect.
+   * Portal components call this before `removePortal(...)`; without it, moving
+   * the element in the DOM would permanently lose the consumer's content.
+   */
+  reclaimPortaledSlot(node) {
+    if (this.#slot === null || !node) return;
+    const slot = node.querySelector("[data-ody-slot]");
+    if (slot) while (slot.firstChild) this.#slot.appendChild(slot.firstChild);
+  }
+  /**
+   * The element that actually holds slotted (consumer-provided) children right
+   * now, or `null` before the first render, for a non-slotting component, or
+   * while the slot is portaled out of the host (e.g. an open modal). See the
+   * child-mutation overrides below for why this is needed.
+   */
+  #slotTarget() {
+    return this.#slot !== null ? this.querySelector("[data-ody-slot]") : null;
+  }
+  // --- Framework-reconciler child mutations -------------------------------
+  //
+  // `mount()` physically relocates the consumer's light-DOM children into the
+  // internal `[data-ody-slot]` node, so a slotted child's real `parentNode` is
+  // that slot div, not the host `<ody-*>` element. Framework reconcilers
+  // (React, Vue, Angular, Svelte, …) don't track parent pointers — to move or
+  // remove a node they call `host.removeChild(child)` /
+  // `host.insertBefore(node, ref)` where `host` is the element from their
+  // virtual tree. Because the child no longer lives directly under the host,
+  // those calls would throw `NotFoundError` (or reorder into the wrong place).
+  //
+  // These overrides forward the operation to wherever the node actually lives
+  // (the slot), so reconciler operations succeed regardless of the relocation.
+  // For removal/insertion/replacement we key off the target node's real
+  // `parentNode`, which also works while the slot is portaled to `document.body`
+  // (open modal/panel/popover). Internal chrome mutations use {@link adopt} to
+  // bypass this forwarding; `mount()` itself never routes through here (it uses
+  // `this.innerHTML` and operates on the slot/fragment nodes directly).
+  appendChild(node) {
+    const slot = this.#slotTarget();
+    return slot ? slot.appendChild(node) : super.appendChild(node);
+  }
+  insertBefore(node, child) {
+    if (child && child.parentNode && child.parentNode !== this) {
+      return child.parentNode.insertBefore(node, child);
+    }
+    const slot = this.#slotTarget();
+    return slot ? slot.insertBefore(node, child) : super.insertBefore(node, child);
+  }
+  removeChild(child) {
+    if (child.parentNode && child.parentNode !== this) {
+      return child.parentNode.removeChild(child);
+    }
+    return super.removeChild(child);
+  }
+  replaceChild(node, child) {
+    if (child.parentNode && child.parentNode !== this) {
+      return child.parentNode.replaceChild(node, child);
+    }
+    return super.replaceChild(node, child);
+  }
+  /**
+   * Append an element the component owns (chrome / portaled nodes) as a direct
+   * host child, bypassing the slot-forwarding {@link appendChild} override.
+   * Portal-based components use this to re-home a portaled node before a
+   * re-render rebuilds the chrome.
+   */
+  adopt(node) {
+    super.appendChild(node);
+  }
   /** Read a string attribute with a fallback. */
   attr(name, fallback = "") {
     return this.getAttribute(name) ?? fallback;
@@ -156,8 +249,12 @@ function wireLocaleObserver() {
 function escapeHtml(value) {
   return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
 }
+var SAFE_CSS_COLOR = /^[a-zA-Z0-9#(),.%\s-]+$/;
+function cssColor(value, fallback = "") {
+  return value && SAFE_CSS_COLOR.test(value) ? value : fallback;
+}
 function classes(...parts) {
-  return parts.filter(Boolean).join(" ");
+  return escapeHtml(parts.filter(Boolean).join(" "));
 }
 function reflectControlValue(control, value) {
   if (control && control.value !== value) control.value = value;
@@ -851,8 +948,8 @@ var OdyCard = class extends OdyElement {
   static observedAttributes = ["bar-color", "clickable", "no-bar"];
   render() {
     const noBar = this.flag("no-bar");
-    const barColor = this.attr("bar-color");
-    const barStyle = barColor ? ` style="background-color:${this.esc(barColor)}"` : "";
+    const barColor = cssColor(this.attr("bar-color"));
+    const barStyle = barColor ? ` style="background-color:${barColor}"` : "";
     const cls = classes(
       "ody-card__container",
       this.flag("clickable") && "ody-card--clickable",
@@ -918,7 +1015,7 @@ var OdyLoadingBar = class extends OdyElement {
   render() {
     const raw = Number.parseFloat(this.attr("value", "0"));
     const value = Number.isFinite(raw) ? Math.min(100, Math.max(0, raw)) : 0;
-    const color = this.attr("color") || "var(--color-interaction-300)";
+    const color = cssColor(this.attr("color"), "var(--color-interaction-300)");
     const label = this.attr("label");
     const text = label ? `<div class="loading-bar__text-container"><span>${this.esc(label)}</span><span>${value}%</span></div>` : "";
     this.mount(
@@ -1121,11 +1218,11 @@ var OdyProductIndicator = class extends OdyElement {
       `ody-product-indicator-container--size-${size}`,
       clickable && "ody-product-indicator-clickable"
     );
-    const barColor = this.attr("bar-color");
-    const barStyle = barColor ? ` style="background-color:${this.esc(barColor)}"` : "";
+    const barColor = cssColor(this.attr("bar-color"));
+    const barStyle = barColor ? ` style="background-color:${barColor}"` : "";
     const bar = `<div class="ody-product-indicator__bar"${barStyle}></div>`;
-    const textColor = this.attr("text-color");
-    const textStyle = textColor ? ` style="color:${this.esc(textColor)}"` : "";
+    const textColor = cssColor(this.attr("text-color"));
+    const textStyle = textColor ? ` style="color:${textColor}"` : "";
     const name = this.attr("name");
     const nameEl = `<div class="ody-product-indicator__name"${textStyle}>${this.esc(name)}</div>`;
     const detail = this.attr("detail");
@@ -1141,6 +1238,16 @@ define("ody-product-indicator", OdyProductIndicator);
 // src/ui/components/toggle-button.ts
 var OdyToggleButton = class extends OdyElement {
   static observedAttributes = ["options", "selected", "size", "disabled"];
+  /** Options set via the JS property; when set it wins over the attribute. */
+  #options = null;
+  /** Options: the JS property wins, else the JSON `options` attribute. */
+  get options() {
+    return this.#options ?? this.#parseOptions();
+  }
+  set options(next) {
+    this.#options = coerceToggleOptions(next);
+    if (this.querySelector(".ody-toggle-button")) this.render();
+  }
   connectedCallback() {
     super.connectedCallback();
     this.addEventListener("click", this.#handleClick);
@@ -1172,7 +1279,7 @@ var OdyToggleButton = class extends OdyElement {
     const size = this.attr("size", "base");
     const selected = this.attr("selected");
     const groupDisabled = this.flag("disabled");
-    const buttons = this.#parseOptions().map((opt) => {
+    const buttons = this.options.map((opt) => {
       const isSelected = selected !== "" && selected === opt.value;
       const isDisabled = groupDisabled || Boolean(opt.disabled);
       const cls = classes(
@@ -1190,6 +1297,18 @@ var OdyToggleButton = class extends OdyElement {
     this.mount(`<div class="ody-toggle-button" aria-label="${this.localized("aria-label", "toggleGroup")}">${buttons}</div>`);
   }
 };
+function coerceToggleOptions(next) {
+  if (Array.isArray(next)) return next;
+  if (typeof next === "string" && next) {
+    try {
+      const parsed = JSON.parse(next);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+  return [];
+}
 define("ody-toggle-button", OdyToggleButton);
 
 // src/ui/components/section.ts
@@ -1762,6 +1881,20 @@ var OdyMoneyInput = class extends OdyElement {
   get precision() {
     return CURRENCY_PRECISION[this.attr("currency", "USD")] ?? DEFAULT_PRECISION;
   }
+  /**
+   * Reflect a `value` change into the live control in place instead of a full
+   * re-render, so a framework-controlled `value` binding never drops focus or
+   * caret while the user is typing. Other observed attributes change the chrome
+   * and still re-render via the base implementation.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value") {
+      if (oldValue === newValue) return;
+      reflectControlValue(this.querySelector(".ody-input__field"), newValue ?? "");
+      return;
+    }
+    super.attributeChangedCallback();
+  }
   render() {
     const size = this.attr("size", "base");
     const isReadonly = this.flag("readonly");
@@ -1785,11 +1918,15 @@ var OdyMoneyInput = class extends OdyElement {
     const input = this.querySelector(".ody-input__field");
     input?.addEventListener("input", this.#onInput);
     input?.addEventListener("blur", this.#onBlur);
+    input?.addEventListener("change", this.#onNativeChange);
   }
+  #onNativeChange = (event) => {
+    event.stopPropagation();
+  };
   #onInput = (event) => {
     event.stopPropagation();
     const value = event.target.value;
-    this.#value = value;
+    this.value = value;
     this.dispatchEvent(new CustomEvent("input", { detail: { value }, bubbles: true }));
   };
   #onBlur = (event) => {
@@ -1825,6 +1962,20 @@ var OdyPercentageInput = class extends OdyElement {
     this.#value = next;
     this.setAttribute("value", next);
   }
+  /**
+   * Reflect a `value` change into the live control in place instead of a full
+   * re-render, so a framework-controlled `value` binding never drops focus or
+   * caret while the user is typing. Other observed attributes change the chrome
+   * and still re-render via the base implementation.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value") {
+      if (oldValue === newValue) return;
+      reflectControlValue(this.querySelector(".ody-input__field"), newValue ?? "");
+      return;
+    }
+    super.attributeChangedCallback();
+  }
   render() {
     const size = this.attr("size", "base");
     const isReadonly = this.flag("readonly");
@@ -1847,7 +1998,11 @@ var OdyPercentageInput = class extends OdyElement {
     input?.addEventListener("keypress", this.#onKeypress);
     input?.addEventListener("input", this.#onInput);
     input?.addEventListener("blur", this.#onBlur);
+    input?.addEventListener("change", this.#onNativeChange);
   }
+  #onNativeChange = (event) => {
+    event.stopPropagation();
+  };
   #onKeypress = (event) => {
     if (NON_NUMERIC_KEY.test(event.key)) {
       event.preventDefault();
@@ -1863,7 +2018,7 @@ var OdyPercentageInput = class extends OdyElement {
   #onInput = (event) => {
     event.stopPropagation();
     const value = event.target.value;
-    this.#value = value;
+    this.value = value;
     this.dispatchEvent(new CustomEvent("input", { detail: { value }, bubbles: true }));
   };
   #onBlur = (event) => {
@@ -1883,6 +2038,26 @@ var OdyPercentageInput = class extends OdyElement {
 };
 define("ody-percentage-input", OdyPercentageInput);
 
+// src/ui/checkbox-state.ts
+function applyCheckboxState(root, checked, indeterminate) {
+  if (!root) return;
+  root.classList.toggle("ody-checkbox--checked", checked);
+  const input = root.querySelector(".ody-checkbox__input");
+  if (input) {
+    input.checked = checked;
+    input.indeterminate = indeterminate;
+  }
+  const box = root.querySelector(".ody-checkbox__box");
+  box?.querySelector(".ody-checkbox__mark")?.remove();
+  const icon = indeterminate ? "minus" : checked ? "check" : "";
+  if (icon && box) {
+    const mark = document.createElement("span");
+    mark.className = "ody-checkbox__mark";
+    mark.innerHTML = iconSvg(icon, "icon__svg");
+    box.appendChild(mark);
+  }
+}
+
 // src/ui/components/checkbox.ts
 var OdyCheckbox = class extends OdyElement {
   static observedAttributes = ["label", "size", "checked", "indeterminate", "disabled"];
@@ -1901,6 +2076,27 @@ var OdyCheckbox = class extends OdyElement {
   set value(next) {
     this.checked = next;
   }
+  /**
+   * Reflect `checked` / `indeterminate` in place instead of a full re-render, so
+   * selecting the box (mouse or keyboard) never rebuilds the native `<input>`
+   * and drops focus. Other observed attributes still re-render via the base.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if ((name === "checked" || name === "indeterminate") && this.querySelector(".ody-checkbox__input")) {
+      if (oldValue === newValue) return;
+      this.#syncChecked();
+      return;
+    }
+    super.attributeChangedCallback();
+  }
+  /** Update the live control, wrapper class, and check/minus mark in place. */
+  #syncChecked() {
+    applyCheckboxState(
+      this.querySelector(".ody-checkbox"),
+      this.flag("checked"),
+      this.flag("indeterminate")
+    );
+  }
   render() {
     const size = this.attr("size", "small");
     const isChecked = this.flag("checked");
@@ -1934,6 +2130,8 @@ var groupSeq = 0;
 var OdyRadioButtonGroup = class extends OdyElement {
   static observedAttributes = ["options", "value", "size", "disabled"];
   #name = `ody-radio-button-group-${groupSeq += 1}`;
+  /** Options set via the JS property; when set it wins over the attribute. */
+  #options = null;
   /** The selected option value. */
   get value() {
     return this.attr("value");
@@ -1941,9 +2139,29 @@ var OdyRadioButtonGroup = class extends OdyElement {
   set value(next) {
     this.setAttribute("value", next);
   }
-  /** Parsed `options`; malformed JSON yields an empty list. */
+  /** Options: the JS property wins, else the JSON `options` attribute. */
   get options() {
-    return parseOptions(this.attr("options"));
+    return this.#options ?? parseOptions(this.attr("options"));
+  }
+  set options(next) {
+    this.#options = coerceOptions(next);
+    if (this.querySelector(".ody-radio-button-group")) this.render();
+  }
+  /**
+   * Reflect a `value` change by re-checking the matching radio in place instead
+   * of rebuilding the fieldset — a full re-render would replace the focused
+   * radio and break keyboard (arrow-key) navigation between options.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value" && this.querySelector(".ody-radio-button-input__field")) {
+      if (oldValue === newValue) return;
+      const selected = this.value;
+      for (const input of this.querySelectorAll(".ody-radio-button-input__field")) {
+        input.checked = input.value === selected;
+      }
+      return;
+    }
+    super.attributeChangedCallback();
   }
   render() {
     const size = this.attr("size", "base");
@@ -1967,6 +2185,11 @@ var OdyRadioButtonGroup = class extends OdyElement {
     this.dispatchEvent(new CustomEvent("change", { detail: { value }, bubbles: true }));
   };
 };
+function coerceOptions(next) {
+  if (Array.isArray(next)) return next;
+  if (typeof next === "string") return parseOptions(next);
+  return [];
+}
 function parseOptions(raw) {
   if (!raw) return [];
   try {
@@ -1982,17 +2205,63 @@ define("ody-radio-button-group", OdyRadioButtonGroup);
 // src/ui/components/checkbox-group.ts
 var OdyCheckboxGroup = class extends OdyElement {
   static observedAttributes = ["options", "value", "select-all-label", "size", "disabled"];
-  /** The selected option values. */
+  /** Options set via the JS property; when set it wins over the attribute. */
+  #options = null;
+  /**
+   * The selected option values. The reflected `value` attribute is serialized
+   * as a JSON array so values containing commas round-trip; a legacy
+   * comma-separated attribute is still read for backwards compatibility.
+   */
   get value() {
     const raw = this.attr("value");
-    return raw ? raw.split(",").filter(Boolean) : [];
+    if (!raw) return [];
+    try {
+      const parsed = JSON.parse(raw);
+      if (Array.isArray(parsed)) return parsed.map(String);
+    } catch {
+    }
+    return raw.split(",").filter(Boolean);
   }
   set value(next) {
-    this.setAttribute("value", next.join(","));
+    this.setAttribute("value", JSON.stringify(Array.isArray(next) ? next : []));
   }
-  /** Parsed `options`; malformed JSON yields an empty list. */
+  /** Options: the JS property wins, else the JSON `options` attribute. */
   get options() {
-    return parseOptions2(this.attr("options"));
+    return this.#options ?? parseOptions2(this.attr("options"));
+  }
+  /**
+   * Accepts an array of `{ label, value }` (or a JSON string) and stores it as
+   * the source of truth. Mirrors `<ody-dropdown-*>` so `el.options = [...]`
+   * works, without reflecting a large JSON blob onto the DOM attribute.
+   */
+  set options(next) {
+    this.#options = coerceOptions2(next);
+    if (this.querySelector(".ody-checkbox-group")) this.render();
+  }
+  /**
+   * Reflect a `value` change by updating each checkbox (and the select-all
+   * parent) in place, so toggling an option keeps focus instead of rebuilding
+   * the group. Other observed attributes still re-render via the base.
+   */
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "value" && this.querySelector(".ody-checkbox-group")) {
+      if (oldValue === newValue) return;
+      this.#syncSelection();
+      return;
+    }
+    super.attributeChangedCallback();
+  }
+  /** Recompute checked/indeterminate state for every checkbox in place. */
+  #syncSelection() {
+    const options = this.options;
+    const selected = new Set(this.value);
+    const allChecked = options.length > 0 && options.every((o) => selected.has(o.value));
+    const someChecked = !allChecked && options.some((o) => selected.has(o.value));
+    for (const cb of this.querySelectorAll(".ody-checkbox-group__item .ody-checkbox")) {
+      const input = cb.querySelector(".ody-checkbox__input");
+      applyCheckboxState(cb, input ? selected.has(input.value) : false, false);
+    }
+    applyCheckboxState(this.querySelector(".ody-checkbox-group__select-all"), allChecked, someChecked);
   }
   render() {
     const size = this.attr("size", "small");
@@ -2058,6 +2327,11 @@ var OdyCheckboxGroup = class extends OdyElement {
     this.dispatchEvent(new CustomEvent("change", { detail: { value: this.value }, bubbles: true }));
   }
 };
+function coerceOptions2(next) {
+  if (Array.isArray(next)) return next;
+  if (typeof next === "string") return parseOptions2(next);
+  return [];
+}
 function parseOptions2(raw) {
   if (!raw) return [];
   try {
@@ -2237,6 +2511,11 @@ var OdyCopyButton = class extends OdyElement {
       if (this.isConnected) this.render();
     }, Number.isFinite(duration) ? duration : 1200);
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.#timer) clearTimeout(this.#timer);
+    this.#timer = void 0;
+  }
 };
 define("ody-copy-button", OdyCopyButton);
 
@@ -2446,7 +2725,7 @@ var OdyModal = class extends OdyElement {
     this.dispatchEvent(new CustomEvent(EVENT_CLOSE, { bubbles: true }));
   }
   render() {
-    if (this.#dialog) this.appendChild(this.#dialog);
+    if (this.#dialog) this.adopt(this.#dialog);
     if (this.#backdrop) removePortal(this.#backdrop);
     const isOpen = this.flag("open");
     const size = this.attr("size", "base");
@@ -2479,6 +2758,7 @@ var OdyModal = class extends OdyElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     document.removeEventListener("keydown", this.#onKeydown);
+    this.reclaimPortaledSlot(this.#dialog);
     if (this.#backdrop) removePortal(this.#backdrop);
     if (this.#dialog) removePortal(this.#dialog);
     this.#backdrop = null;
@@ -2541,7 +2821,7 @@ var OdyPopover = class extends OdyElement {
     if (this.#visible) this.close();
     this.#trigger?.removeEventListener("click", this.#onTriggerClick);
     if (this.#panel) {
-      this.appendChild(this.#panel);
+      this.adopt(this.#panel);
       this.#panel.classList.remove("ody-popover__container--open");
     }
     const trigger = this.querySelector("[data-ody-popover-trigger-slot]")?.firstElementChild;
@@ -2572,6 +2852,7 @@ var OdyPopover = class extends OdyElement {
     super.disconnectedCallback();
     document.removeEventListener("click", this.#onOutsideClick, true);
     this.#trigger?.removeEventListener("click", this.#onTriggerClick);
+    this.reclaimPortaledSlot(this.#panel);
     if (this.#panel) removePortal(this.#panel);
     this.#panel = null;
     this.#trigger = null;
@@ -2616,7 +2897,7 @@ var OdyTooltip = class extends OdyElement {
     if (this.#visible) this.hide();
     this.#unbind();
     if (this.#bubble) {
-      this.appendChild(this.#bubble);
+      this.adopt(this.#bubble);
       this.#bubble.classList.remove("ody-tooltip--visible");
     }
     const slotted = this.querySelector("[data-ody-tooltip-trigger-slot]")?.firstElementChild;
@@ -2658,6 +2939,7 @@ var OdyTooltip = class extends OdyElement {
   disconnectedCallback() {
     super.disconnectedCallback();
     this.#unbind();
+    this.reclaimPortaledSlot(this.#bubble);
     if (this.#bubble) removePortal(this.#bubble);
     this.#bubble = null;
     this.#trigger = null;
@@ -2681,7 +2963,7 @@ var OdyPanel = class extends OdyElement {
     this.dispatchEvent(new CustomEvent(EVENT_CLOSE3, { bubbles: true }));
   }
   render() {
-    if (this.#panel) this.appendChild(this.#panel);
+    if (this.#panel) this.adopt(this.#panel);
     if (this.#overlay) removePortal(this.#overlay);
     const isOpen = this.flag("open");
     const heading = this.attr("heading");
@@ -2702,6 +2984,7 @@ var OdyPanel = class extends OdyElement {
   };
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.reclaimPortaledSlot(this.#panel);
     if (this.#panel) removePortal(this.#panel);
     if (this.#overlay) removePortal(this.#overlay);
     this.#panel = null;
@@ -2721,6 +3004,8 @@ var HOST_TAG = "ody-toast-host";
 var DEFAULT_TIMEOUT = 4e3;
 var REMOVE_DELAY = 400;
 var OdyToastHost = class extends OdyElement {
+  /** Per-toast cleanups (cancel rAF + auto-dismiss timer) run on host teardown. */
+  #pending = /* @__PURE__ */ new Set();
   render() {
     this.mount(`<div class="toast-notification-container" data-ody-slot></div>`);
   }
@@ -2735,17 +3020,28 @@ var OdyToastHost = class extends OdyElement {
     const title = options.title ? `<h1 class="toast-notification__title">${this.esc(options.title)}</h1>` : "";
     el.innerHTML = `<div class="toast-notification__header__container"><div class="toast-notification__header"><span class="toast-notification__icon icon">${iconSvg(VARIANT_ICON3[variant], "icon__svg")}</span>` + title + `</div><button type="button" class="toast-notification__close-button" aria-label="${this.localized("close-label", "close")}">${iconSvg("close", "icon__svg")}</button></div><div class="toast-notification__body__container"><p class="toast-notification__body">${this.esc(message)}</p></div>`;
     container.appendChild(el);
-    requestAnimationFrame(() => el.classList.add("toast-notification--visible"));
+    const raf = requestAnimationFrame(() => el.classList.add("toast-notification--visible"));
     let timer;
-    const dismiss = () => {
+    const cleanup = () => {
+      cancelAnimationFrame(raf);
       if (timer !== void 0) clearTimeout(timer);
+      this.#pending.delete(cleanup);
+    };
+    const dismiss = () => {
+      cleanup();
       el.classList.remove("toast-notification--visible");
       setTimeout(() => el.remove(), REMOVE_DELAY);
     };
     el.querySelector(".toast-notification__close-button")?.addEventListener("click", dismiss);
     if (timeout > 0) timer = setTimeout(dismiss, timeout);
+    this.#pending.add(cleanup);
     return { dismiss };
   }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    for (const cleanup of [...this.#pending]) cleanup();
+    this.#pending.clear();
+  }
 };
 define(HOST_TAG, OdyToastHost);
 var hostEl = null;
@@ -2802,6 +3098,10 @@ var OdySelectBase = class extends OdyElement {
     if (!q) return this.options;
     return this.options.filter((o) => o.label.toLowerCase().includes(q));
   }
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.open) document.addEventListener("click", this.#onOutsideClick, true);
+  }
   // ---- Rendering -----------------------------------------------------------
   render() {
     const listId = `${this.uid}-listbox`;
@@ -3169,10 +3469,34 @@ var OdyDatePicker = class extends OdyElement {
     "presets",
     "display-format"
   ];
+  /** Presets set via the JS property; when set it wins over the attribute. */
+  #presets = null;
+  #isDateDisallowed;
+  #formatDate;
+  /** Preset list: the JS property wins, else the JSON `presets` attribute. */
+  get presets() {
+    return this.#presets ?? this.#parsePresets();
+  }
+  set presets(next) {
+    this.#presets = coerceDatePresets(next);
+    if (this.querySelector(".ody-datepicker__trigger")) this.render();
+  }
   /** Disable arbitrary days; not an attribute (functions can't serialize). */
-  isDateDisallowed;
+  get isDateDisallowed() {
+    return this.#isDateDisallowed;
+  }
+  set isDateDisallowed(fn) {
+    this.#isDateDisallowed = fn;
+    if (this.querySelector(".ody-datepicker__trigger")) this.render();
+  }
   /** Custom trigger-label formatter; wins over `display-format`/`Intl`. */
-  formatDate;
+  get formatDate() {
+    return this.#formatDate;
+  }
+  set formatDate(fn) {
+    this.#formatDate = fn;
+    if (this.querySelector(".ody-datepicker__trigger")) this.render();
+  }
   #open = false;
   /** First day of the currently displayed month (local). */
   #viewDate = /* @__PURE__ */ new Date();
@@ -3503,7 +3827,7 @@ var OdyDatePicker = class extends OdyElement {
     return rows.join("");
   }
   #renderPresets() {
-    const presets = this.#parsePresets();
+    const presets = this.presets;
     if (presets.length === 0) return "";
     const buttons = presets.map(
       (p) => `<button type="button" class="ody-datepicker__preset" data-value="${this.esc(p.value)}">${this.esc(p.label)}</button>`
@@ -3545,6 +3869,18 @@ var OdyDatePicker = class extends OdyElement {
     document.removeEventListener("click", this.#onOutsideClick, true);
   }
 };
+function coerceDatePresets(next) {
+  if (Array.isArray(next)) return next;
+  if (typeof next === "string" && next) {
+    try {
+      const parsed = JSON.parse(next);
+      return Array.isArray(parsed) ? parsed : [];
+    } catch {
+      return [];
+    }
+  }
+  return [];
+}
 define("ody-datepicker", OdyDatePicker);
 
 // src/ui/components/table.ts