sibujs 1.5.0 → 2.1.0

package/dist/chunk-ON5MMR2J.js

@@ -0,0 +1,1327 @@
+import {
+  watch
+} from "./chunk-45YP72ZQ.js";
+import {
+  derived
+} from "./chunk-DRUZZAK4.js";
+import {
+  stripHtml
+} from "./chunk-UCS6AMJ7.js";
+import {
+  effect
+} from "./chunk-WZA53FXU.js";
+import {
+  batch,
+  signal
+} from "./chunk-RDTDJCAB.js";
+
+// src/widgets/Combobox.ts
+var comboboxIdCounter = 0;
+var boundComboboxes = /* @__PURE__ */ new WeakMap();
+function combobox(options) {
+  const { items, filterFn, itemToString } = options;
+  const defaultFilterFn = (item, q) => {
+    const str = itemToString ? itemToString(item) : String(item);
+    return str.toLowerCase().includes(q.toLowerCase());
+  };
+  const filter = filterFn ?? defaultFilterFn;
+  const [query, setQuery] = signal("");
+  const [selectedItem, setSelectedItem] = signal(null);
+  const [highlightedIndex, setHighlightedIndex] = signal(-1);
+  const [isOpen, setIsOpen] = signal(false);
+  const filteredItems = derived(() => {
+    const q = query();
+    if (q === "") return items;
+    return items.filter((item) => filter(item, q));
+  });
+  watch(query, () => {
+    setHighlightedIndex(-1);
+  });
+  function select2(item) {
+    batch(() => {
+      setSelectedItem(item);
+      const str = itemToString ? itemToString(item) : String(item);
+      setQuery(str);
+      setIsOpen(false);
+    });
+  }
+  function highlightNext() {
+    const filtered = filteredItems();
+    if (filtered.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev + 1;
+      return next >= filtered.length ? 0 : next;
+    });
+  }
+  function highlightPrev() {
+    const filtered = filteredItems();
+    if (filtered.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const next = prev - 1;
+      return next < 0 ? filtered.length - 1 : next;
+    });
+  }
+  function selectHighlighted() {
+    const filtered = filteredItems();
+    const idx = highlightedIndex();
+    if (idx >= 0 && idx < filtered.length) {
+      select2(filtered[idx]);
+    }
+  }
+  function open() {
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function bind(els) {
+    const existing = boundComboboxes.get(els.input);
+    if (existing) return existing;
+    const listboxId = `sibu-combobox-listbox-${++comboboxIdCounter}`;
+    els.listbox.id = listboxId;
+    els.listbox.setAttribute("role", "listbox");
+    els.input.setAttribute("role", "combobox");
+    els.input.setAttribute("aria-autocomplete", "list");
+    els.input.setAttribute("aria-controls", listboxId);
+    const fxTeardown = effect(() => {
+      const open2 = isOpen();
+      els.input.setAttribute("aria-expanded", open2 ? "true" : "false");
+      els.listbox.hidden = !open2;
+      const idx = highlightedIndex();
+      const filtered = filteredItems();
+      let activeId = "";
+      for (let i = 0; i < filtered.length; i++) {
+        const optEl = els.option(filtered[i], i);
+        if (!optEl) continue;
+        if (!optEl.id) optEl.id = `${listboxId}-opt-${i}`;
+        optEl.setAttribute("role", "option");
+        const isHighlighted = i === idx;
+        optEl.setAttribute("aria-selected", isHighlighted ? "true" : "false");
+        if (isHighlighted) activeId = optEl.id;
+      }
+      if (activeId) els.input.setAttribute("aria-activedescendant", activeId);
+      else els.input.removeAttribute("aria-activedescendant");
+    });
+    const onInput = () => {
+      setQuery(els.input.value);
+      open();
+    };
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!isOpen()) open();
+        highlightNext();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!isOpen()) open();
+        highlightPrev();
+      } else if (e.key === "Enter") {
+        if (highlightedIndex() >= 0) {
+          e.preventDefault();
+          selectHighlighted();
+        }
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        close();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        if (filteredItems().length > 0) setHighlightedIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        const len = filteredItems().length;
+        if (len > 0) setHighlightedIndex(len - 1);
+      }
+    };
+    let blurTimer = null;
+    const onFocus = () => open();
+    const onBlur = () => {
+      if (blurTimer !== null) clearTimeout(blurTimer);
+      blurTimer = setTimeout(() => {
+        blurTimer = null;
+        if (document.activeElement !== els.input) close();
+      }, 100);
+    };
+    els.input.addEventListener("input", onInput);
+    els.input.addEventListener("keydown", onKey);
+    els.input.addEventListener("focus", onFocus);
+    els.input.addEventListener("blur", onBlur);
+    const teardown = () => {
+      boundComboboxes.delete(els.input);
+      fxTeardown();
+      els.input.removeEventListener("input", onInput);
+      els.input.removeEventListener("keydown", onKey);
+      els.input.removeEventListener("focus", onFocus);
+      els.input.removeEventListener("blur", onBlur);
+      if (blurTimer !== null) {
+        clearTimeout(blurTimer);
+        blurTimer = null;
+      }
+    };
+    boundComboboxes.set(els.input, teardown);
+    return teardown;
+  }
+  return {
+    query,
+    setQuery,
+    filteredItems,
+    selectedItem,
+    select: select2,
+    highlightedIndex,
+    highlightNext,
+    highlightPrev,
+    selectHighlighted,
+    isOpen,
+    open,
+    close,
+    bind
+  };
+}
+
+// src/widgets/Tabs.ts
+var boundTablists = /* @__PURE__ */ new WeakMap();
+function tabs(options) {
+  const { tabs: tabDefs, defaultTab } = options;
+  const initialTab = defaultTab ?? tabDefs.find((t) => !t.disabled)?.id ?? tabDefs[0]?.id ?? "";
+  const [activeTab, setActiveTabState] = signal(initialTab);
+  function setActiveTab(id) {
+    const tab = tabDefs.find((t) => t.id === id);
+    if (tab && !tab.disabled) {
+      setActiveTabState(id);
+    }
+  }
+  const tabs2 = derived(
+    () => tabDefs.map((t) => ({
+      ...t,
+      isActive: t.id === activeTab()
+    }))
+  );
+  function findCurrentIndex() {
+    return tabDefs.findIndex((t) => t.id === activeTab());
+  }
+  function nextTab() {
+    const currentIdx = findCurrentIndex();
+    const len = tabDefs.length;
+    if (len === 0) return;
+    for (let i = 1; i <= len; i++) {
+      const candidate = tabDefs[(currentIdx + i) % len];
+      if (!candidate.disabled) {
+        setActiveTabState(candidate.id);
+        return;
+      }
+    }
+  }
+  function prevTab() {
+    const currentIdx = findCurrentIndex();
+    const len = tabDefs.length;
+    if (len === 0) return;
+    for (let i = 1; i <= len; i++) {
+      const candidate = tabDefs[(currentIdx - i + len) % len];
+      if (!candidate.disabled) {
+        setActiveTabState(candidate.id);
+        return;
+      }
+    }
+  }
+  function isActive(id) {
+    return activeTab() === id;
+  }
+  function bind(els) {
+    const existing = boundTablists.get(els.tablist);
+    if (existing) return existing;
+    const restore = [];
+    const prevTablistRole = els.tablist.getAttribute("role");
+    els.tablist.setAttribute("role", "tablist");
+    restore.push(() => {
+      if (prevTablistRole === null) els.tablist.removeAttribute("role");
+      else els.tablist.setAttribute("role", prevTablistRole);
+    });
+    for (const def of tabDefs) {
+      const tabEl = els.tabs[def.id];
+      if (!tabEl) continue;
+      const prevRole = tabEl.getAttribute("role");
+      const prevId = tabEl.id;
+      const prevDisabled = tabEl.getAttribute("aria-disabled");
+      const prevControls = tabEl.getAttribute("aria-controls");
+      tabEl.setAttribute("role", "tab");
+      tabEl.setAttribute("id", `sibu-tab-${def.id}`);
+      if (def.disabled) tabEl.setAttribute("aria-disabled", "true");
+      const panelEl = els.panels?.[def.id];
+      let prevPanelRole = null;
+      let prevPanelId = "";
+      let prevPanelLabelledBy = null;
+      if (panelEl) {
+        prevPanelRole = panelEl.getAttribute("role");
+        prevPanelId = panelEl.id;
+        prevPanelLabelledBy = panelEl.getAttribute("aria-labelledby");
+        panelEl.setAttribute("role", "tabpanel");
+        panelEl.setAttribute("id", `sibu-tabpanel-${def.id}`);
+        panelEl.setAttribute("aria-labelledby", `sibu-tab-${def.id}`);
+        tabEl.setAttribute("aria-controls", `sibu-tabpanel-${def.id}`);
+      }
+      restore.push(() => {
+        if (prevRole === null) tabEl.removeAttribute("role");
+        else tabEl.setAttribute("role", prevRole);
+        if (prevId === "") tabEl.removeAttribute("id");
+        else tabEl.id = prevId;
+        if (prevDisabled === null) tabEl.removeAttribute("aria-disabled");
+        else tabEl.setAttribute("aria-disabled", prevDisabled);
+        if (prevControls === null) tabEl.removeAttribute("aria-controls");
+        else tabEl.setAttribute("aria-controls", prevControls);
+        tabEl.removeAttribute("aria-selected");
+        tabEl.removeAttribute("tabindex");
+        if (panelEl) {
+          if (prevPanelRole === null) panelEl.removeAttribute("role");
+          else panelEl.setAttribute("role", prevPanelRole);
+          if (prevPanelId === "") panelEl.removeAttribute("id");
+          else panelEl.id = prevPanelId;
+          if (prevPanelLabelledBy === null) panelEl.removeAttribute("aria-labelledby");
+          else panelEl.setAttribute("aria-labelledby", prevPanelLabelledBy);
+        }
+      });
+    }
+    const fxTeardown = effect(() => {
+      const active = activeTab();
+      for (const def of tabDefs) {
+        const tabEl = els.tabs[def.id];
+        if (!tabEl) continue;
+        const isAct = def.id === active;
+        tabEl.setAttribute("aria-selected", isAct ? "true" : "false");
+        tabEl.tabIndex = isAct ? 0 : -1;
+        const panelEl = els.panels?.[def.id];
+        if (panelEl) panelEl.hidden = !isAct;
+      }
+    });
+    const onKey = (e) => {
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        nextTab();
+        els.tabs[activeTab()]?.focus();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        prevTab();
+        els.tabs[activeTab()]?.focus();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        const first = tabDefs.find((t) => !t.disabled);
+        if (first) {
+          setActiveTabState(first.id);
+          els.tabs[first.id]?.focus();
+        }
+      } else if (e.key === "End") {
+        e.preventDefault();
+        for (let i = tabDefs.length - 1; i >= 0; i--) {
+          if (!tabDefs[i].disabled) {
+            setActiveTabState(tabDefs[i].id);
+            els.tabs[tabDefs[i].id]?.focus();
+            break;
+          }
+        }
+      }
+    };
+    els.tablist.addEventListener("keydown", onKey);
+    const clickHandlers = [];
+    for (const def of tabDefs) {
+      const tabEl = els.tabs[def.id];
+      if (!tabEl) continue;
+      const fn = () => setActiveTab(def.id);
+      tabEl.addEventListener("click", fn);
+      clickHandlers.push({ el: tabEl, fn });
+    }
+    const teardown = () => {
+      boundTablists.delete(els.tablist);
+      fxTeardown();
+      els.tablist.removeEventListener("keydown", onKey);
+      for (const { el, fn } of clickHandlers) el.removeEventListener("click", fn);
+      for (const r of restore) r();
+    };
+    boundTablists.set(els.tablist, teardown);
+    return teardown;
+  }
+  return {
+    activeTab,
+    setActiveTab,
+    tabs: tabs2,
+    nextTab,
+    prevTab,
+    /** Reactive check — use inside class/nodes bindings for per-tab reactivity */
+    isActive,
+    bind
+  };
+}
+
+// src/widgets/Accordion.ts
+var boundAccordions = /* @__PURE__ */ new WeakMap();
+function accordion(options) {
+  const { items: itemDefs, multiple = false, defaultExpanded = [] } = options;
+  const [expandedIds, setExpandedIds] = signal(new Set(defaultExpanded));
+  const items = derived(
+    () => itemDefs.map((item) => ({
+      ...item,
+      isExpanded: expandedIds().has(item.id)
+    }))
+  );
+  function expand(id) {
+    if (!itemDefs.some((item) => item.id === id)) return;
+    if (multiple) {
+      setExpandedIds((prev) => {
+        const next = new Set(prev);
+        next.add(id);
+        return next;
+      });
+    } else {
+      setExpandedIds(/* @__PURE__ */ new Set([id]));
+    }
+  }
+  function collapse(id) {
+    setExpandedIds((prev) => {
+      const next = new Set(prev);
+      next.delete(id);
+      return next;
+    });
+  }
+  function toggle(id) {
+    if (expandedIds().has(id)) {
+      collapse(id);
+    } else {
+      expand(id);
+    }
+  }
+  function expandAll() {
+    if (multiple) {
+      setExpandedIds(new Set(itemDefs.map((item) => item.id)));
+    }
+  }
+  function collapseAll() {
+    setExpandedIds(/* @__PURE__ */ new Set());
+  }
+  function isExpanded(id) {
+    return expandedIds().has(id);
+  }
+  function bind(els) {
+    const idempotencyKey = els.root ?? (itemDefs.length > 0 ? els.triggers[itemDefs[0].id] : void 0);
+    if (idempotencyKey) {
+      const existing = boundAccordions.get(idempotencyKey);
+      if (existing) return existing;
+    }
+    const restore = [];
+    for (const item of itemDefs) {
+      const trig = els.triggers[item.id];
+      const panel = els.panels[item.id];
+      if (!trig) continue;
+      const prevTrigId = trig.id;
+      const prevTrigControls = trig.getAttribute("aria-controls");
+      trig.id = `sibu-accordion-trigger-${item.id}`;
+      let prevPanelRole = null;
+      let prevPanelId = "";
+      let prevPanelLabelledBy = null;
+      if (panel) {
+        prevPanelRole = panel.getAttribute("role");
+        prevPanelId = panel.id;
+        prevPanelLabelledBy = panel.getAttribute("aria-labelledby");
+        panel.setAttribute("role", "region");
+        panel.id = `sibu-accordion-panel-${item.id}`;
+        panel.setAttribute("aria-labelledby", trig.id);
+        trig.setAttribute("aria-controls", panel.id);
+      }
+      restore.push(() => {
+        if (prevTrigId === "") trig.removeAttribute("id");
+        else trig.id = prevTrigId;
+        if (prevTrigControls === null) trig.removeAttribute("aria-controls");
+        else trig.setAttribute("aria-controls", prevTrigControls);
+        trig.removeAttribute("aria-expanded");
+        if (panel) {
+          if (prevPanelRole === null) panel.removeAttribute("role");
+          else panel.setAttribute("role", prevPanelRole);
+          if (prevPanelId === "") panel.removeAttribute("id");
+          else panel.id = prevPanelId;
+          if (prevPanelLabelledBy === null) panel.removeAttribute("aria-labelledby");
+          else panel.setAttribute("aria-labelledby", prevPanelLabelledBy);
+        }
+      });
+    }
+    const fxTeardown = effect(() => {
+      const ids = expandedIds();
+      for (const item of itemDefs) {
+        const trig = els.triggers[item.id];
+        const panel = els.panels[item.id];
+        if (!trig) continue;
+        const expanded = ids.has(item.id);
+        trig.setAttribute("aria-expanded", expanded ? "true" : "false");
+        if (panel) panel.hidden = !expanded;
+      }
+    });
+    const handlers = [];
+    for (const item of itemDefs) {
+      const trig = els.triggers[item.id];
+      if (!trig) continue;
+      const click = () => toggle(item.id);
+      const key = (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          toggle(item.id);
+        }
+      };
+      trig.addEventListener("click", click);
+      trig.addEventListener("keydown", key);
+      handlers.push({ el: trig, click, key });
+    }
+    const teardown = () => {
+      if (idempotencyKey) boundAccordions.delete(idempotencyKey);
+      fxTeardown();
+      for (const { el, click, key } of handlers) {
+        el.removeEventListener("click", click);
+        el.removeEventListener("keydown", key);
+      }
+      for (const r of restore) r();
+    };
+    if (idempotencyKey) boundAccordions.set(idempotencyKey, teardown);
+    return teardown;
+  }
+  return {
+    items,
+    toggle,
+    expand,
+    collapse,
+    expandAll,
+    collapseAll,
+    /** Reactive check — use inside class/nodes bindings for per-item reactivity */
+    isExpanded,
+    bind
+  };
+}
+
+// src/widgets/Popover.ts
+var popoverIdCounter = 0;
+var boundPopovers = /* @__PURE__ */ new WeakMap();
+function popover() {
+  const [isOpen, setIsOpen] = signal(false);
+  function open() {
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function toggle() {
+    setIsOpen((prev) => !prev);
+  }
+  function bind(els) {
+    const existing = boundPopovers.get(els.trigger);
+    if (existing) return existing;
+    const id = `sibu-popover-${++popoverIdCounter}`;
+    const prevPopoverRole = els.popover.getAttribute("role");
+    const prevPopoverId = els.popover.id;
+    const prevLabelledBy = els.popover.getAttribute("aria-labelledby");
+    const prevTriggerHaspopup = els.trigger.getAttribute("aria-haspopup");
+    const prevTriggerControls = els.trigger.getAttribute("aria-controls");
+    els.popover.setAttribute("role", "dialog");
+    els.popover.id = id;
+    els.trigger.setAttribute("aria-haspopup", "dialog");
+    els.trigger.setAttribute("aria-controls", id);
+    let assignedLabelId = null;
+    if (els.labelledBy) {
+      if (!els.labelledBy.id) {
+        els.labelledBy.id = `${id}-label`;
+        assignedLabelId = els.labelledBy.id;
+      }
+      els.popover.setAttribute("aria-labelledby", els.labelledBy.id);
+    }
+    const fxTeardown = effect(() => {
+      const open2 = isOpen();
+      els.trigger.setAttribute("aria-expanded", open2 ? "true" : "false");
+      els.popover.hidden = !open2;
+    });
+    const onTriggerClick = (e) => {
+      e.preventDefault();
+      toggle();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape" && isOpen()) {
+        e.stopPropagation();
+        close();
+        els.trigger.focus();
+      }
+    };
+    const onDocPointer = (e) => {
+      if (!isOpen()) return;
+      const t = e.target;
+      if (!t) return;
+      if (els.trigger.contains(t) || els.popover.contains(t)) return;
+      close();
+    };
+    els.trigger.addEventListener("click", onTriggerClick);
+    els.popover.addEventListener("keydown", onKey);
+    els.trigger.addEventListener("keydown", onKey);
+    document.addEventListener("pointerdown", onDocPointer);
+    const teardown = () => {
+      boundPopovers.delete(els.trigger);
+      fxTeardown();
+      els.trigger.removeEventListener("click", onTriggerClick);
+      els.popover.removeEventListener("keydown", onKey);
+      els.trigger.removeEventListener("keydown", onKey);
+      document.removeEventListener("pointerdown", onDocPointer);
+      if (prevPopoverRole === null) els.popover.removeAttribute("role");
+      else els.popover.setAttribute("role", prevPopoverRole);
+      if (prevPopoverId === "") els.popover.removeAttribute("id");
+      else els.popover.id = prevPopoverId;
+      if (prevLabelledBy === null) els.popover.removeAttribute("aria-labelledby");
+      else els.popover.setAttribute("aria-labelledby", prevLabelledBy);
+      if (assignedLabelId && els.labelledBy?.id === assignedLabelId) {
+        els.labelledBy.removeAttribute("id");
+      }
+      if (prevTriggerHaspopup === null) els.trigger.removeAttribute("aria-haspopup");
+      else els.trigger.setAttribute("aria-haspopup", prevTriggerHaspopup);
+      if (prevTriggerControls === null) els.trigger.removeAttribute("aria-controls");
+      else els.trigger.setAttribute("aria-controls", prevTriggerControls);
+      els.trigger.removeAttribute("aria-expanded");
+    };
+    boundPopovers.set(els.trigger, teardown);
+    return teardown;
+  }
+  return { isOpen, open, close, toggle, bind };
+}
+
+// src/widgets/Select.ts
+var selectIdCounter = 0;
+var boundSelects = /* @__PURE__ */ new WeakMap();
+function select(options) {
+  const { items, multiple = false, itemToString, isDisabled } = options;
+  const isItemDisabled = isDisabled ?? (() => false);
+  const [selectedItems, setSelectedItems] = signal([]);
+  const [isOpen, setIsOpen] = signal(false);
+  const [highlightedIndex, setHighlightedIndex] = signal(-1);
+  const selectedItem = derived(() => {
+    const sel = selectedItems();
+    return sel.length > 0 ? sel[sel.length - 1] : null;
+  });
+  function select2(item) {
+    if (isItemDisabled(item)) return;
+    if (multiple) {
+      setSelectedItems((prev) => {
+        if (prev.includes(item)) return prev;
+        return [...prev, item];
+      });
+    } else {
+      batch(() => {
+        setSelectedItems([item]);
+        setIsOpen(false);
+      });
+    }
+  }
+  function deselect(item) {
+    setSelectedItems((prev) => prev.filter((i) => i !== item));
+  }
+  function toggle(item) {
+    if (selectedItems().includes(item)) {
+      deselect(item);
+    } else {
+      select2(item);
+    }
+  }
+  function isSelected(item) {
+    return selectedItems().includes(item);
+  }
+  function open() {
+    setIsOpen(true);
+  }
+  function close() {
+    setIsOpen(false);
+  }
+  function nextEnabled(from, dir) {
+    const len = items.length;
+    if (len === 0) return -1;
+    let i = from;
+    for (let n = 0; n < len; n++) {
+      i = (i + dir + len) % len;
+      if (!isItemDisabled(items[i])) return i;
+    }
+    return -1;
+  }
+  function highlightNext() {
+    if (items.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const n = nextEnabled(prev < 0 ? -1 : prev, 1);
+      return n === -1 ? prev : n;
+    });
+  }
+  function highlightPrev() {
+    if (items.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const n = nextEnabled(prev < 0 ? items.length : prev, -1);
+      return n === -1 ? prev : n;
+    });
+  }
+  function selectHighlighted() {
+    const idx = highlightedIndex();
+    if (idx >= 0 && idx < items.length) {
+      select2(items[idx]);
+    }
+  }
+  function clear() {
+    setSelectedItems([]);
+  }
+  function bind(els) {
+    const existing = boundSelects.get(els.listbox);
+    if (existing) return existing;
+    const listboxId = `sibu-select-${++selectIdCounter}`;
+    els.listbox.id = listboxId;
+    els.listbox.setAttribute("role", "listbox");
+    els.listbox.setAttribute("aria-multiselectable", multiple ? "true" : "false");
+    if (els.listbox.tabIndex < 0) els.listbox.tabIndex = 0;
+    const toStr = els.itemToString ?? itemToString ?? ((it) => String(it));
+    const fxTeardown = effect(() => {
+      const idx = highlightedIndex();
+      const sel = selectedItems();
+      let activeId = "";
+      for (let i = 0; i < items.length; i++) {
+        const optEl = els.option(items[i], i);
+        if (!optEl) continue;
+        if (!optEl.id) optEl.id = `${listboxId}-opt-${i}`;
+        optEl.setAttribute("role", "option");
+        optEl.setAttribute("aria-selected", sel.includes(items[i]) ? "true" : "false");
+        if (isItemDisabled(items[i])) optEl.setAttribute("aria-disabled", "true");
+        else optEl.removeAttribute("aria-disabled");
+        if (i === idx) activeId = optEl.id;
+      }
+      if (activeId) els.listbox.setAttribute("aria-activedescendant", activeId);
+      else els.listbox.removeAttribute("aria-activedescendant");
+    });
+    let typeBuffer = "";
+    let typeTimer = null;
+    const onKey = (e) => {
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        highlightNext();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        highlightPrev();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        if (items.length > 0) setHighlightedIndex(0);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        if (items.length > 0) setHighlightedIndex(items.length - 1);
+      } else if (e.key === "Enter" || e.key === " ") {
+        if (highlightedIndex() >= 0) {
+          e.preventDefault();
+          selectHighlighted();
+        }
+      } else if (e.key.length === 1 && /\S/.test(e.key)) {
+        typeBuffer += e.key.toLowerCase();
+        if (typeTimer !== null) clearTimeout(typeTimer);
+        typeTimer = setTimeout(() => {
+          typeBuffer = "";
+          typeTimer = null;
+        }, 500);
+        const found = items.findIndex((it) => !isItemDisabled(it) && toStr(it).toLowerCase().startsWith(typeBuffer));
+        if (found !== -1) setHighlightedIndex(found);
+      }
+    };
+    els.listbox.addEventListener("keydown", onKey);
+    const teardown = () => {
+      boundSelects.delete(els.listbox);
+      fxTeardown();
+      els.listbox.removeEventListener("keydown", onKey);
+      if (typeTimer !== null) clearTimeout(typeTimer);
+    };
+    boundSelects.set(els.listbox, teardown);
+    return teardown;
+  }
+  return {
+    selectedItems,
+    selectedItem,
+    select: select2,
+    deselect,
+    toggle,
+    isSelected,
+    isOpen,
+    open,
+    close,
+    highlightedIndex,
+    highlightNext,
+    highlightPrev,
+    selectHighlighted,
+    clear,
+    bind
+  };
+}
+
+// src/widgets/Tooltip.ts
+var tooltipIdCounter = 0;
+var boundTriggers = /* @__PURE__ */ new WeakMap();
+function tooltip(options) {
+  const delay = options?.delay ?? 0;
+  const hideDelay = options?.hideDelay ?? 100;
+  const [isVisible, setIsVisible] = signal(false);
+  const [content, setContent] = signal("");
+  let delayTimer = null;
+  let hideTimer = null;
+  function show() {
+    if (hideTimer !== null) {
+      clearTimeout(hideTimer);
+      hideTimer = null;
+    }
+    if (delay > 0) {
+      if (delayTimer !== null) clearTimeout(delayTimer);
+      delayTimer = setTimeout(() => {
+        setIsVisible(true);
+        delayTimer = null;
+      }, delay);
+    } else {
+      setIsVisible(true);
+    }
+  }
+  function hide() {
+    if (delayTimer !== null) {
+      clearTimeout(delayTimer);
+      delayTimer = null;
+    }
+    setIsVisible(false);
+  }
+  function scheduleHide() {
+    if (delayTimer !== null) {
+      clearTimeout(delayTimer);
+      delayTimer = null;
+    }
+    if (hideTimer !== null) clearTimeout(hideTimer);
+    hideTimer = setTimeout(() => {
+      hideTimer = null;
+      setIsVisible(false);
+    }, hideDelay);
+  }
+  function bind(els) {
+    const existing = boundTriggers.get(els.trigger);
+    if (existing) return existing;
+    const id = `sibu-tooltip-${++tooltipIdCounter}`;
+    els.tooltip.setAttribute("role", "tooltip");
+    els.tooltip.id = id;
+    const prevDescribedBy = els.trigger.getAttribute("aria-describedby");
+    els.trigger.setAttribute("aria-describedby", prevDescribedBy ? `${prevDescribedBy} ${id}` : id);
+    const fxTeardown = effect(() => {
+      els.tooltip.hidden = !isVisible();
+    });
+    const onTriggerEnter = () => show();
+    const onTriggerLeave = () => scheduleHide();
+    const onTooltipEnter = () => {
+      if (hideTimer !== null) {
+        clearTimeout(hideTimer);
+        hideTimer = null;
+      }
+    };
+    const onTooltipLeave = () => scheduleHide();
+    const onFocus = () => show();
+    const onBlur = () => hide();
+    const onKey = (e) => {
+      if (e.key === "Escape" && isVisible()) {
+        e.stopPropagation();
+        hide();
+      }
+    };
+    els.trigger.addEventListener("pointerenter", onTriggerEnter);
+    els.trigger.addEventListener("pointerleave", onTriggerLeave);
+    els.trigger.addEventListener("focus", onFocus);
+    els.trigger.addEventListener("blur", onBlur);
+    els.trigger.addEventListener("keydown", onKey);
+    els.tooltip.addEventListener("pointerenter", onTooltipEnter);
+    els.tooltip.addEventListener("pointerleave", onTooltipLeave);
+    const teardown = () => {
+      boundTriggers.delete(els.trigger);
+      fxTeardown();
+      els.trigger.removeEventListener("pointerenter", onTriggerEnter);
+      els.trigger.removeEventListener("pointerleave", onTriggerLeave);
+      els.trigger.removeEventListener("focus", onFocus);
+      els.trigger.removeEventListener("blur", onBlur);
+      els.trigger.removeEventListener("keydown", onKey);
+      els.tooltip.removeEventListener("pointerenter", onTooltipEnter);
+      els.tooltip.removeEventListener("pointerleave", onTooltipLeave);
+      const cur = els.trigger.getAttribute("aria-describedby");
+      if (cur) {
+        const remaining = cur.split(/\s+/).filter((part) => part && part !== id);
+        if (remaining.length > 0) els.trigger.setAttribute("aria-describedby", remaining.join(" "));
+        else els.trigger.removeAttribute("aria-describedby");
+      } else if (prevDescribedBy) {
+        els.trigger.setAttribute("aria-describedby", prevDescribedBy);
+      }
+      if (delayTimer !== null) clearTimeout(delayTimer);
+      if (hideTimer !== null) clearTimeout(hideTimer);
+    };
+    boundTriggers.set(els.trigger, teardown);
+    return teardown;
+  }
+  return { isVisible, show, hide, content, setContent, bind };
+}
+
+// src/widgets/FileUpload.ts
+var fileUploadIdCounter = 0;
+var boundFileUploads = /* @__PURE__ */ new WeakMap();
+function fileUpload(options) {
+  const accept = options?.accept;
+  const multiple = options?.multiple ?? false;
+  const maxSize = options?.maxSize;
+  const onFiles = options?.onFiles;
+  const [files, setFiles] = signal([]);
+  const [errors, setErrors] = signal([]);
+  const [isDragOver, setDragOver] = signal(false);
+  function isAccepted(file) {
+    if (!accept) return true;
+    const acceptedTypes = accept.split(",").map((t) => t.trim().toLowerCase());
+    const fileName = file.name.toLowerCase();
+    const fileType = file.type.toLowerCase();
+    return acceptedTypes.some((pattern) => {
+      if (pattern.startsWith(".")) {
+        return fileName.endsWith(pattern);
+      }
+      if (pattern.endsWith("/*")) {
+        const prefix = pattern.slice(0, pattern.indexOf("/"));
+        return fileType.startsWith(`${prefix}/`);
+      }
+      return fileType === pattern;
+    });
+  }
+  function addFiles(fileList) {
+    const incoming = Array.from(fileList);
+    const validFiles = [];
+    const newErrors = [];
+    for (const file of incoming) {
+      if (!isAccepted(file)) {
+        newErrors.push(`File "${file.name}" is not an accepted type`);
+        continue;
+      }
+      if (maxSize !== void 0 && file.size > maxSize) {
+        newErrors.push(`File "${file.name}" exceeds maximum size of ${maxSize} bytes`);
+        continue;
+      }
+      validFiles.push(file);
+    }
+    batch(() => {
+      setErrors(newErrors);
+      if (validFiles.length > 0) {
+        if (multiple) {
+          setFiles((prev) => [...prev, ...validFiles]);
+        } else {
+          setFiles([validFiles[validFiles.length - 1]]);
+        }
+        if (onFiles) {
+          onFiles(validFiles);
+        }
+      }
+    });
+  }
+  function removeFile(index) {
+    setFiles((prev) => {
+      if (index < 0 || index >= prev.length) return prev;
+      const next = [...prev];
+      next.splice(index, 1);
+      return next;
+    });
+  }
+  function clear() {
+    batch(() => {
+      setFiles([]);
+      setErrors([]);
+    });
+  }
+  function bind(els) {
+    const existing = boundFileUploads.get(els.input);
+    if (existing) return existing;
+    const id = `sibu-fileupload-${++fileUploadIdCounter}`;
+    const restore = [];
+    if (accept) els.input.accept = accept;
+    els.input.multiple = multiple;
+    let hintId = null;
+    if (els.hint) {
+      const assignedHintId = !els.hint.id;
+      if (assignedHintId) els.hint.id = `${id}-hint`;
+      hintId = els.hint.id;
+      const prev = els.input.getAttribute("aria-describedby");
+      els.input.setAttribute("aria-describedby", prev ? `${prev} ${hintId}` : hintId);
+      restore.push(() => {
+        const cur = els.input.getAttribute("aria-describedby");
+        if (cur) {
+          const parts = cur.split(/\s+/).filter((p) => p && p !== hintId);
+          if (parts.length > 0) els.input.setAttribute("aria-describedby", parts.join(" "));
+          else els.input.removeAttribute("aria-describedby");
+        }
+        if (assignedHintId && els.hint && els.hint.id === hintId) els.hint.removeAttribute("id");
+      });
+    }
+    if (els.errorRegion) {
+      const prevRole = els.errorRegion.getAttribute("role");
+      const prevLive = els.errorRegion.getAttribute("aria-live");
+      els.errorRegion.setAttribute("role", "status");
+      els.errorRegion.setAttribute("aria-live", "polite");
+      restore.push(() => {
+        if (prevRole === null) els.errorRegion.removeAttribute("role");
+        else els.errorRegion.setAttribute("role", prevRole);
+        if (prevLive === null) els.errorRegion.removeAttribute("aria-live");
+        else els.errorRegion.setAttribute("aria-live", prevLive);
+      });
+    }
+    if (els.dropZone) {
+      const prevDzRole = els.dropZone.getAttribute("role");
+      const prevDzLabel = els.dropZone.getAttribute("aria-label");
+      const prevDzTabindex = els.dropZone.hasAttribute("tabindex") ? els.dropZone.getAttribute("tabindex") : null;
+      els.dropZone.setAttribute("role", "button");
+      els.dropZone.setAttribute("aria-label", "File drop zone \u2014 click or press Enter to browse");
+      if (els.dropZone.tabIndex < 0) els.dropZone.tabIndex = 0;
+      restore.push(() => {
+        if (prevDzRole === null) els.dropZone.removeAttribute("role");
+        else els.dropZone.setAttribute("role", prevDzRole);
+        if (prevDzLabel === null) els.dropZone.removeAttribute("aria-label");
+        else els.dropZone.setAttribute("aria-label", prevDzLabel);
+        if (prevDzTabindex === null) els.dropZone.removeAttribute("tabindex");
+        else els.dropZone.setAttribute("tabindex", prevDzTabindex);
+      });
+    }
+    const fxTeardown = effect(() => {
+      const errs = errors();
+      if (els.errorRegion) els.errorRegion.textContent = errs.join(". ");
+      if (els.dropZone) els.dropZone.setAttribute("data-drag-over", isDragOver() ? "true" : "false");
+    });
+    const onChange = () => {
+      if (els.input.files) addFiles(els.input.files);
+    };
+    const onDropClick = () => els.input.click();
+    const onDropKey = (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        els.input.click();
+      }
+    };
+    const onDragOver = (e) => {
+      e.preventDefault();
+      setDragOver(true);
+    };
+    const onDragLeave = () => setDragOver(false);
+    const onDrop = (e) => {
+      e.preventDefault();
+      setDragOver(false);
+      if (e.dataTransfer?.files) addFiles(e.dataTransfer.files);
+    };
+    els.input.addEventListener("change", onChange);
+    if (els.dropZone) {
+      els.dropZone.addEventListener("click", onDropClick);
+      els.dropZone.addEventListener("keydown", onDropKey);
+      els.dropZone.addEventListener("dragover", onDragOver);
+      els.dropZone.addEventListener("dragleave", onDragLeave);
+      els.dropZone.addEventListener("drop", onDrop);
+    }
+    const teardown = () => {
+      boundFileUploads.delete(els.input);
+      fxTeardown();
+      els.input.removeEventListener("change", onChange);
+      if (els.dropZone) {
+        els.dropZone.removeEventListener("click", onDropClick);
+        els.dropZone.removeEventListener("keydown", onDropKey);
+        els.dropZone.removeEventListener("dragover", onDragOver);
+        els.dropZone.removeEventListener("dragleave", onDragLeave);
+        els.dropZone.removeEventListener("drop", onDrop);
+      }
+      for (const r of restore) r();
+    };
+    boundFileUploads.set(els.input, teardown);
+    return teardown;
+  }
+  return {
+    files,
+    addFiles,
+    removeFile,
+    clear,
+    errors,
+    isDragOver,
+    setDragOver,
+    bind
+  };
+}
+
+// src/widgets/contentEditable.ts
+function contentEditable() {
+  const [content, setContentInternal] = signal("");
+  const [isFocused, setFocused] = signal(false);
+  function setContent(input) {
+    if (typeof input === "string") {
+      setContentInternal(input);
+      return;
+    }
+    if (typeof input.text === "string") {
+      setContentInternal(input.text);
+      return;
+    }
+    if (typeof input.html === "string") {
+      const shouldSanitize = input.sanitize !== false;
+      setContentInternal(shouldSanitize ? stripHtml(input.html) : input.html);
+      return;
+    }
+    setContentInternal("");
+  }
+  function wrapSelection(tagName) {
+    if (typeof window === "undefined") return;
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
+    const range = selection.getRangeAt(0);
+    const ancestor = range.commonAncestorContainer;
+    const existingWrap = findAncestorByTag(
+      ancestor instanceof HTMLElement ? ancestor : ancestor.parentElement,
+      tagName
+    );
+    let targetNode = null;
+    if (existingWrap) {
+      const parent = existingWrap.parentNode;
+      if (parent) {
+        const firstChild = existingWrap.firstChild;
+        const lastChild = existingWrap.lastChild;
+        while (existingWrap.firstChild) {
+          parent.insertBefore(existingWrap.firstChild, existingWrap);
+        }
+        parent.removeChild(existingWrap);
+        if (firstChild && lastChild) {
+          const newRange = document.createRange();
+          newRange.setStartBefore(firstChild);
+          newRange.setEndAfter(lastChild);
+          selection.removeAllRanges();
+          selection.addRange(newRange);
+          return;
+        }
+      }
+    } else {
+      const wrapper = document.createElement(tagName);
+      try {
+        range.surroundContents(wrapper);
+      } catch {
+        const fragment = range.extractContents();
+        wrapper.appendChild(fragment);
+        range.insertNode(wrapper);
+      }
+      targetNode = wrapper;
+    }
+    if (targetNode) {
+      selection.removeAllRanges();
+      const newRange = document.createRange();
+      newRange.selectNodeContents(targetNode);
+      selection.addRange(newRange);
+    }
+  }
+  function findAncestorByTag(el, tagName) {
+    const upper = tagName.toUpperCase();
+    while (el) {
+      if (el.tagName === upper) return el;
+      el = el.parentElement;
+    }
+    return null;
+  }
+  function bold() {
+    wrapSelection("strong");
+  }
+  function italic() {
+    wrapSelection("em");
+  }
+  function underline() {
+    wrapSelection("u");
+  }
+  return {
+    content,
+    setContent,
+    isFocused,
+    setFocused,
+    bold,
+    italic,
+    underline
+  };
+}
+
+// src/widgets/datePicker.ts
+var boundDatePickers = /* @__PURE__ */ new WeakMap();
+function datePicker(options) {
+  const minDate = options?.minDate;
+  const maxDate = options?.maxDate;
+  const initialDate = options?.initialDate ?? null;
+  const [selectedDate, setSelectedDate] = signal(initialDate);
+  const [viewDate, setViewDate] = signal(initialDate ?? /* @__PURE__ */ new Date());
+  function isDateDisabled(date) {
+    const d = stripTime(date);
+    if (minDate && d < stripTime(minDate)) return true;
+    if (maxDate && d > stripTime(maxDate)) return true;
+    return false;
+  }
+  function stripTime(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  }
+  function sameDay(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  }
+  function select2(date) {
+    if (!isDateDisabled(date)) {
+      setSelectedDate(date);
+    }
+  }
+  function shiftMonth(prev, delta) {
+    return new Date(prev.getFullYear(), prev.getMonth() + delta, 1);
+  }
+  function nextMonth() {
+    setViewDate((prev) => shiftMonth(prev, 1));
+  }
+  function prevMonth() {
+    setViewDate((prev) => shiftMonth(prev, -1));
+  }
+  function nextYear() {
+    setViewDate((prev) => new Date(prev.getFullYear() + 1, prev.getMonth(), 1));
+  }
+  function prevYear() {
+    setViewDate((prev) => new Date(prev.getFullYear() - 1, prev.getMonth(), 1));
+  }
+  const daysInMonth = derived(() => {
+    const vd = viewDate();
+    const year = vd.getFullYear();
+    const month = vd.getMonth();
+    const today = /* @__PURE__ */ new Date();
+    const selected = selectedDate();
+    const firstDay = new Date(year, month, 1);
+    const startDow = firstDay.getDay();
+    const lastDay = new Date(year, month + 1, 0);
+    const totalDaysInMonth = lastDay.getDate();
+    const days = [];
+    for (let i = startDow - 1; i >= 0; i--) {
+      const date = new Date(year, month, -i);
+      days.push({
+        date,
+        isCurrentMonth: false,
+        isToday: sameDay(date, today),
+        isSelected: selected !== null && sameDay(date, selected),
+        isDisabled: isDateDisabled(date)
+      });
+    }
+    for (let d = 1; d <= totalDaysInMonth; d++) {
+      const date = new Date(year, month, d);
+      days.push({
+        date,
+        isCurrentMonth: true,
+        isToday: sameDay(date, today),
+        isSelected: selected !== null && sameDay(date, selected),
+        isDisabled: isDateDisabled(date)
+      });
+    }
+    const remaining = days.length % 7;
+    if (remaining > 0) {
+      const trailingCount = 7 - remaining;
+      for (let i = 1; i <= trailingCount; i++) {
+        const date = new Date(year, month + 1, i);
+        days.push({
+          date,
+          isCurrentMonth: false,
+          isToday: sameDay(date, today),
+          isSelected: selected !== null && sameDay(date, selected),
+          isDisabled: isDateDisabled(date)
+        });
+      }
+    }
+    return days;
+  });
+  function isSelected(date) {
+    const sel = selectedDate();
+    return sel !== null && sameDay(date, sel);
+  }
+  return {
+    selectedDate,
+    select: select2,
+    viewDate,
+    setViewDate,
+    nextMonth,
+    prevMonth,
+    nextYear,
+    prevYear,
+    daysInMonth,
+    isDateDisabled,
+    /** Reactive check — use inside class bindings for per-day reactivity */
+    isSelected,
+    bind
+  };
+  function bind(els) {
+    const existing = boundDatePickers.get(els.grid);
+    if (existing) return existing;
+    els.grid.setAttribute("role", "grid");
+    if (els.grid.tabIndex < 0) els.grid.tabIndex = 0;
+    const fxTeardown = effect(() => {
+      const sel = selectedDate();
+      const view = viewDate();
+      const days = daysInMonth();
+      for (const d of days) {
+        const cell = els.cell(d.date);
+        if (!cell) continue;
+        cell.setAttribute("role", "gridcell");
+        cell.setAttribute("aria-selected", sel && isSameCalendarDay(sel, d.date) ? "true" : "false");
+        if (d.isDisabled) cell.setAttribute("aria-disabled", "true");
+        else cell.removeAttribute("aria-disabled");
+        cell.tabIndex = isSameCalendarDay(view, d.date) ? 0 : -1;
+      }
+    });
+    function isSameCalendarDay(a, b) {
+      return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+    }
+    function shiftDays(delta) {
+      setViewDate((prev) => new Date(prev.getFullYear(), prev.getMonth(), prev.getDate() + delta));
+    }
+    const onKey = (e) => {
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          shiftDays(-1);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          shiftDays(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          shiftDays(-7);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          shiftDays(7);
+          break;
+        case "Home":
+          e.preventDefault();
+          setViewDate((p) => new Date(p.getFullYear(), p.getMonth(), p.getDate() - p.getDay()));
+          break;
+        case "End": {
+          e.preventDefault();
+          setViewDate((p) => new Date(p.getFullYear(), p.getMonth(), p.getDate() + (6 - p.getDay())));
+          break;
+        }
+        case "PageUp":
+          e.preventDefault();
+          if (e.shiftKey) prevYear();
+          else prevMonth();
+          break;
+        case "PageDown":
+          e.preventDefault();
+          if (e.shiftKey) nextYear();
+          else nextMonth();
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          select2(viewDate());
+          break;
+      }
+    };
+    els.grid.addEventListener("keydown", onKey);
+    const teardown = () => {
+      boundDatePickers.delete(els.grid);
+      fxTeardown();
+      els.grid.removeEventListener("keydown", onKey);
+    };
+    boundDatePickers.set(els.grid, teardown);
+    return teardown;
+  }
+}
+
+export {
+  combobox,
+  tabs,
+  accordion,
+  popover,
+  select,
+  tooltip,
+  fileUpload,
+  contentEditable,
+  datePicker
+};