sibujs 1.5.0 → 2.1.0

package/dist/{chunk-VQDZK23A.js → chunk-O6EFQ3KT.js}

@@ -1,19 +1,22 @@
 import {
-  bindAttribute,
-  registerDisposer
-} from "./chunk-5ZYQ6KDD.js";
+  bindAttribute
+} from "./chunk-WIPZPFBQ.js";
 import {
   derived
-} from "./chunk-XHK6BDAJ.js";
+} from "./chunk-DRUZZAK4.js";
+import {
+  dispose,
+  registerDisposer
+} from "./chunk-2UPRY23K.js";
 import {
   effect
-} from "./chunk-VQNQZCWJ.js";
+} from "./chunk-WZA53FXU.js";
 import {
   signal
-} from "./chunk-NZIIMDWI.js";
+} from "./chunk-RDTDJCAB.js";
 import {
   track
-} from "./chunk-K4G4ZQNR.js";
+} from "./chunk-QO3WC6FS.js";
 
 // src/ui/form.ts
 function required(message = "This field is required") {
@@ -116,9 +119,18 @@ function form(config) {
       }
       return null;
     });
+    const wrappedSet = (next) => {
+      setValue(next);
+      setManualErrors((prev) => {
+        if (!(name in prev) || prev[name] == null) return prev;
+        const copy = { ...prev };
+        copy[name] = null;
+        return copy;
+      });
+    };
     fieldMap[name] = {
       value,
-      set: setValue,
+      set: wrappedSet,
       error,
       touched: isTouched,
       touch: () => setTouched(true),
@@ -252,6 +264,7 @@ function intersection(options) {
   let observer = null;
   let currentElement = null;
   function observe(element) {
+    if (typeof IntersectionObserver === "undefined") return;
     unobserve();
     currentElement = element;
     observer = new IntersectionObserver((entries) => {
@@ -279,6 +292,11 @@ function intersection(options) {
   };
 }
 function lazyLoad(element, loader, options) {
+  if (typeof IntersectionObserver === "undefined") {
+    loader();
+    return () => {
+    };
+  }
   const observer = new IntersectionObserver((entries) => {
     for (const entry of entries) {
       if (entry.isIntersecting) {
@@ -353,7 +371,7 @@ function inputMask(options) {
   const stripRegex = buildStripRegex();
   const rawCharTest = options.pattern.includes("*") ? () => true : (c) => /[a-zA-Z0-9]/.test(c);
   function bind(input) {
-    input.addEventListener("input", () => {
+    const onInput = () => {
       const cursorBefore = input.selectionStart ?? input.value.length;
       const oldValue = input.value;
       const raw = oldValue.replace(stripRegex, "");
@@ -377,13 +395,19 @@ function inputMask(options) {
         }
       }
       input.setSelectionRange(newCursor, newCursor);
-    });
-    input.addEventListener("focus", () => {
+    };
+    const onFocus = () => {
       if (!input.value) {
         const display = options.pattern.replace(/9/g, placeholder).replace(/A/g, placeholder).replace(/\*/g, placeholder);
         input.placeholder = display;
       }
-    });
+    };
+    input.addEventListener("input", onInput);
+    input.addEventListener("focus", onFocus);
+    return () => {
+      input.removeEventListener("input", onInput);
+      input.removeEventListener("focus", onFocus);
+    };
   }
   return { value, rawValue, bind };
 }
@@ -425,8 +449,20 @@ function focus() {
   let currentElement = null;
   function bind(element) {
     currentElement = element;
-    element.addEventListener("focus", () => setIsFocused(true));
-    element.addEventListener("blur", () => setIsFocused(false));
+    const onFocus = () => setIsFocused(true);
+    const onBlur = () => setIsFocused(false);
+    element.addEventListener("focus", onFocus);
+    element.addEventListener("blur", onBlur);
+    let disposed = false;
+    const dispose2 = () => {
+      if (disposed) return;
+      disposed = true;
+      element.removeEventListener("focus", onFocus);
+      element.removeEventListener("blur", onBlur);
+      if (currentElement === element) currentElement = null;
+    };
+    registerDisposer(element, dispose2);
+    return dispose2;
   }
   function focus2() {
     currentElement?.focus();
@@ -441,11 +477,35 @@ function FocusTrap(nodes, options = {}) {
   container.setAttribute("data-sibu-focus-trap", "true");
   container.appendChild(nodes);
   const previouslyFocused = document.activeElement;
-  container.addEventListener("keydown", (e) => {
+  const FOCUSABLE_SELECTOR = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"]), [contenteditable]';
+  function isEffectivelyVisible(el) {
+    let node = el;
+    while (node) {
+      if (node.hasAttribute("inert")) return false;
+      if (node.getAttribute("aria-hidden") === "true") return false;
+      if (node.hidden) return false;
+      node = node.parentElement;
+    }
+    if (el.offsetParent === null && el.getClientRects().length === 0) return false;
+    return true;
+  }
+  function getFocusable() {
+    const raw = Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
+    const out = [];
+    for (const el of raw) {
+      if (el.hasAttribute("disabled")) continue;
+      if (el.getAttribute("aria-hidden") === "true") continue;
+      if (el.hasAttribute("inert")) continue;
+      const ce = el.getAttribute("contenteditable");
+      if (ce !== null && ce === "false") continue;
+      if (!isEffectivelyVisible(el)) continue;
+      out.push(el);
+    }
+    return out;
+  }
+  const onTrapKeydown = (e) => {
     if (e.key !== "Tab") return;
-    const focusable = container.querySelectorAll(
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    );
+    const focusable = getFocusable();
     if (focusable.length === 0) {
       e.preventDefault();
       return;
@@ -463,18 +523,18 @@ function FocusTrap(nodes, options = {}) {
         first.focus();
       }
     }
-  });
+  };
+  container.addEventListener("keydown", onTrapKeydown);
   if (options.autoFocus !== false) {
     queueMicrotask(() => {
-      const first = container.querySelector(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
+      const first = getFocusable()[0];
       first?.focus();
     });
   }
   let trapObserver = null;
   function restoreFocusAndCleanup() {
     if (options.restoreFocus !== false) previouslyFocused?.focus();
+    container.removeEventListener("keydown", onTrapKeydown);
     if (trapObserver) {
       trapObserver.disconnect();
       trapObserver = null;
@@ -488,7 +548,7 @@ function FocusTrap(nodes, options = {}) {
     });
     queueMicrotask(() => {
       if (container.isConnected) {
-        trapObserver.observe(document.body, { childList: true, subtree: true });
+        trapObserver.observe(container, { childList: true, subtree: true });
       }
     });
   }
@@ -525,7 +585,16 @@ function hotkey(combo, handler, options = {}) {
   document.addEventListener("keydown", listener);
   return () => document.removeEventListener("keydown", listener);
 }
-function announce(message, priority = "polite") {
+var announceQueues = {
+  polite: [],
+  assertive: []
+};
+var announceDraining = {
+  polite: false,
+  assertive: false
+};
+var ANNOUNCE_INTERVAL_MS = 150;
+function ensureLiveRegion(priority) {
   let region = document.getElementById(`sibu-announce-${priority}`);
   if (!region) {
     region = document.createElement("div");
@@ -536,11 +605,33 @@ function announce(message, priority = "polite") {
     region.style.cssText = "position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;";
     document.body.appendChild(region);
   }
+  return region;
+}
+function drainAnnounceQueue(priority) {
+  if (announceDraining[priority]) return;
+  const queue = announceQueues[priority];
+  if (queue.length === 0) return;
+  announceDraining[priority] = true;
+  const region = ensureLiveRegion(priority);
+  const next = queue.shift();
   region.textContent = "";
   requestAnimationFrame(() => {
-    if (region) region.textContent = message;
+    if (!region.isConnected) {
+      announceDraining[priority] = false;
+      return;
+    }
+    region.textContent = next;
+    setTimeout(() => {
+      announceDraining[priority] = false;
+      drainAnnounceQueue(priority);
+    }, ANNOUNCE_INTERVAL_MS);
   });
 }
+function announce(message, priority = "polite") {
+  if (typeof document === "undefined") return;
+  announceQueues[priority].push(message);
+  drainAnnounceQueue(priority);
+}
 
 // src/ui/scopedStyle.ts
 var scopeCounter = 0;
@@ -677,66 +768,91 @@ function bindData(el, key, getter) {
 }
 
 // src/ui/dialog.ts
+var dialogStack = [];
+var globalListenerAttached = false;
+function __resetDialogStack() {
+  while (dialogStack.length > 0) dialogStack.pop();
+  if (typeof window !== "undefined" && globalListenerAttached) {
+    window.removeEventListener("keydown", handleGlobalKeydown);
+    globalListenerAttached = false;
+  }
+}
+function handleGlobalKeydown(event) {
+  if (event.key !== "Escape") return;
+  const top = dialogStack[dialogStack.length - 1];
+  if (top) top.close();
+}
+function ensureGlobalListener() {
+  if (typeof window === "undefined" || globalListenerAttached) return;
+  window.addEventListener("keydown", handleGlobalKeydown);
+  globalListenerAttached = true;
+}
+function removeGlobalListenerIfIdle() {
+  if (typeof window === "undefined") return;
+  if (!globalListenerAttached) return;
+  if (dialogStack.length > 0) return;
+  window.removeEventListener("keydown", handleGlobalKeydown);
+  globalListenerAttached = false;
+}
 function dialog() {
   const [isOpen, setIsOpen] = signal(false);
-  let listenerAttached = false;
-  function handleKeydown(event) {
-    if (event.key === "Escape") {
-      close();
-    }
+  const entry = { close: () => close() };
+  function pushOnStack() {
+    if (dialogStack.indexOf(entry) !== -1) return;
+    dialogStack.push(entry);
+    ensureGlobalListener();
   }
-  function attachListener() {
-    if (typeof window !== "undefined" && !listenerAttached) {
-      window.addEventListener("keydown", handleKeydown);
-      listenerAttached = true;
-    }
-  }
-  function detachListener() {
-    if (typeof window !== "undefined" && listenerAttached) {
-      window.removeEventListener("keydown", handleKeydown);
-      listenerAttached = false;
-    }
+  function removeFromStack() {
+    const idx = dialogStack.indexOf(entry);
+    if (idx !== -1) dialogStack.splice(idx, 1);
+    removeGlobalListenerIfIdle();
   }
   function open() {
+    if (isOpen()) return;
     setIsOpen(true);
-    attachListener();
+    pushOnStack();
   }
   function close() {
+    if (!isOpen()) {
+      removeFromStack();
+      return;
+    }
     setIsOpen(false);
-    detachListener();
+    removeFromStack();
   }
   function toggle() {
     if (isOpen()) close();
     else open();
   }
-  function dispose() {
-    detachListener();
+  function dispose2() {
+    removeFromStack();
     setIsOpen(false);
   }
-  return { open, close, isOpen, toggle, dispose };
+  return { open, close, isOpen, toggle, dispose: dispose2 };
 }
 
 // src/ui/toast.ts
-var toastCounter = 0;
 function toast(options) {
   const duration = options?.duration ?? 3e3;
   const maxToasts = options?.maxToasts ?? Infinity;
   const [toasts, setToasts] = signal([]);
   const timers = /* @__PURE__ */ new Map();
+  let toastCounter = 0;
   function show(message, type) {
     const id = `toast-${++toastCounter}`;
     const toast2 = { id, message, type };
+    const trimmedIds = [];
     setToasts((prev) => {
       const next = [...prev, toast2];
       if (next.length > maxToasts) {
         const removed = next.splice(0, next.length - maxToasts);
-        for (const r of removed) {
-          clearTimerForToast(r.id);
-        }
+        for (const r of removed) trimmedIds.push(r.id);
       }
       return next;
     });
-    if (duration > 0) {
+    for (const tid of trimmedIds) clearTimerForToast(tid);
+    const wasTrimmed = trimmedIds.indexOf(id) !== -1;
+    if (duration > 0 && !wasTrimmed) {
       const timer = setTimeout(() => {
         dismiss(id);
       }, duration);
@@ -822,14 +938,14 @@ function infiniteScroll(options) {
     },
     configurable: true
   });
-  function dispose() {
+  function dispose2() {
     disposed = true;
     if (observer) {
       observer.disconnect();
       observer = null;
     }
   }
-  return { sentinelRef: originalRef, loading, dispose };
+  return { sentinelRef: originalRef, loading, dispose: dispose2 };
 }
 
 // src/ui/pagination.ts
@@ -908,7 +1024,7 @@ function defineElement(name, component, options = {}) {
   class SibuElement extends HTMLElement {
     constructor() {
       super();
-      this._rendered = false;
+      this._rendered = null;
       if (options.shadow !== false) {
         this._root = this.attachShadow({ mode: options.mode || "open" });
       } else {
@@ -922,25 +1038,23 @@ function defineElement(name, component, options = {}) {
       this._render();
     }
     disconnectedCallback() {
-      if (this._root instanceof ShadowRoot) {
-        this._root.innerHTML = "";
-      }
-      this._rendered = false;
+      this._teardown();
     }
     attributeChangedCallback() {
       if (this._rendered) {
         this._render();
       }
     }
+    _teardown() {
+      if (this._rendered) {
+        dispose(this._rendered);
+        this._rendered = null;
+      }
+      this._root.replaceChildren();
+    }
     _render() {
+      this._teardown();
       const props = this._getProps();
-      if (this._root instanceof ShadowRoot) {
-        this._root.innerHTML = "";
-      } else {
-        while (this._root.firstChild) {
-          this._root.removeChild(this._root.firstChild);
-        }
-      }
       if (options.styles && this._root instanceof ShadowRoot) {
         const styleEl = document.createElement("style");
         styleEl.textContent = options.styles;
@@ -948,7 +1062,7 @@ function defineElement(name, component, options = {}) {
       }
       const el = component(props, this);
       this._root.appendChild(el);
-      this._rendered = true;
+      this._rendered = el;
     }
     _getProps() {
       const props = {};
@@ -1013,6 +1127,7 @@ export {
   bindAttrs,
   bindBoolAttr,
   bindData,
+  __resetDialogStack,
   dialog,
   toast,
   infiniteScroll,

package/dist/{chunk-BGN5ZMP4.js → chunk-OJ3P4ECI.js}

@@ -1,13 +1,15 @@
 import {
   signal
-} from "./chunk-WZSPOOER.js";
+} from "./chunk-RDTDJCAB.js";
 
 // src/core/rendering/context.ts
 function context(defaultValue) {
   const [getValue, setValue] = signal(defaultValue);
-  return {
+  const ctx = {
     provide(value) {
+      const previous = getValue();
       setValue(value);
+      return () => setValue(previous);
     },
     use() {
       return getValue;
@@ -17,8 +19,18 @@ function context(defaultValue) {
     },
     set(value) {
       setValue(value);
+    },
+    withContext(value, fn) {
+      const previous = getValue();
+      setValue(value);
+      try {
+        return fn();
+      } finally {
+        setValue(previous);
+      }
     }
   };
+  return ctx;
 }
 
 export {