sibujs 4.12.0 → 4.13.1

package/dist/widgets.cjs

@@ -25,10 +25,13 @@ __export(widgets_exports, {
   contentEditable: () => contentEditable,
   datePicker: () => datePicker,
   fileUpload: () => fileUpload,
+  isWidgetKeyEvent: () => isWidgetKeyEvent,
   popover: () => popover,
   select: () => select,
+  selectMenu: () => selectMenu,
   tabs: () => tabs,
-  tooltip: () => tooltip
+  tooltip: () => tooltip,
+  widgetKeyOwner: () => widgetKeyOwner
 });
 module.exports = __toCommonJS(widgets_exports);
 
@@ -380,6 +383,7 @@ function bindOwnerScope(fn) {
   if (scope === null) return fn;
   return (...args) => runWithOwnerScope(scope, () => fn(...args));
 }
+var currentStructOwner = null;
 var subscriberEpochCounter = 0;
 function retrack(effectFn, subscriber) {
   const prev = currentSubscriber;
@@ -399,6 +403,9 @@ function retrack(effectFn, subscriber) {
   if (prevScope !== null && !sub._epoch && sub._scope === void 0) sub._scope = prevScope;
   const scope = sub._scope === void 0 ? null : sub._scope;
   if (scope !== prevScope) currentOwnerScope = scope;
+  const prevStructOwner = currentStructOwner;
+  if (prevStructOwner !== null && !sub._epoch && !sub._c && sub._owner == null) sub._owner = prevStructOwner;
+  if (sub._tok != null) currentStructOwner = sub._tok;
   const epoch = ++subscriberEpochCounter;
   sub._epoch = epoch;
   sub._structDirty = false;
@@ -412,6 +419,7 @@ function retrack(effectFn, subscriber) {
   } finally {
     currentSubscriber = prev;
     currentOwnerScope = prevScope;
+    currentStructOwner = prevStructOwner;
     if (savedDepth !== 0) {
       suspendDepth = savedDepth;
       suspendSavedSub = savedSuspendSub;
@@ -468,7 +476,25 @@ function track(effectFn, subscriber) {
   }
   return sub._dispose ?? (sub._dispose = () => cleanup(subscriber));
 }
-function reactiveBinding(commit, ownerNode) {
+function reactiveBinding(commit, ownerNode, structural) {
+  return createBinding(commit, ownerNode, structural === true)._dispose;
+}
+function structuralBinding(commit, ownerNode) {
+  const sub = createBinding(commit, ownerNode, true);
+  return {
+    stop: sub._dispose,
+    run: (fn) => {
+      const prev = currentStructOwner;
+      currentStructOwner = sub._tok ?? null;
+      try {
+        return fn();
+      } finally {
+        currentStructOwner = prev;
+      }
+    }
+  };
+}
+function createBinding(commit, ownerNode, structural) {
   const run = () => {
     const s = subscriber;
     if (s._disposed || s._reentrant) return;
@@ -491,19 +517,25 @@ function reactiveBinding(commit, ownerNode) {
   subscriber._disposed = false;
   subscriber._errorPhase = "binding";
   subscriber._errorNode = ownerNode;
+  subscriber._tok = null;
+  subscriber._owner = null;
+  if (structural) subscriber._tok = { sub: subscriber };
   try {
     run();
   } catch (err) {
     subscriber._disposed = true;
     subscriber._errorNode = void 0;
+    if (subscriber._tok != null) subscriber._tok.sub = null;
     cleanup(subscriber);
     throw err;
   }
-  return subscriber._dispose ?? (subscriber._dispose = () => {
+  subscriber._dispose = () => {
     subscriber._disposed = true;
     subscriber._errorNode = void 0;
+    if (subscriber._tok != null) subscriber._tok.sub = null;
     cleanup(subscriber);
-  });
+  };
+  return subscriber;
 }
 function recordDependency(signal2) {
   if (!currentSubscriber) return;
@@ -527,6 +559,7 @@ function recordDependency(signal2) {
 }
 function cleanup(subscriber) {
   const sub = subscriber;
+  if (sub._owner != null) sub._owner = null;
   let node = sub.depsHead ?? null;
   sub.depsHead = null;
   sub.depsTail = null;
@@ -586,20 +619,41 @@ function drainQueue() {
       break;
     }
     const sub = pendingQueue[i++];
-    pendingSet.delete(sub);
-    if (quarantined.size > 0 && quarantined.has(sub)) continue;
-    if (sub._hasComputedDep === true && !depsChanged(sub)) continue;
-    if (tickRepeat(sub)) {
-      cycleError(sub);
-      quarantined.add(sub);
-      continue;
-    }
-    const pushed = beginDisposerCapture(sub._cap ?? null);
-    try {
-      safeInvoke(sub);
-    } finally {
-      if (pushed) endDisposerCapture();
-    }
+    if (!pendingSet.delete(sub)) continue;
+    if (sub._owner != null && pendingSet.size > 0) {
+      runPendingOwners(sub);
+      if (pendingSet.has(sub)) continue;
+    }
+    runQueued(sub);
+  }
+}
+function runPendingOwners(sub) {
+  for (; ; ) {
+    let outer = null;
+    for (let t = sub._owner ?? null; t !== null; ) {
+      const o = t.sub;
+      if (o === null) break;
+      if (pendingSet.has(o)) outer = o;
+      t = o._owner ?? null;
+    }
+    if (outer === null) return;
+    pendingSet.delete(outer);
+    runQueued(outer);
+  }
+}
+function runQueued(sub) {
+  if (quarantined.size > 0 && quarantined.has(sub)) return;
+  if (sub._hasComputedDep === true && !depsChanged(sub)) return;
+  if (tickRepeat(sub)) {
+    cycleError(sub);
+    quarantined.add(sub);
+    return;
+  }
+  const pushed = beginDisposerCapture(sub._cap ?? null);
+  try {
+    safeInvoke(sub);
+  } finally {
+    if (pushed) endDisposerCapture();
   }
 }
 function drainNotificationQueue() {
@@ -735,7 +789,7 @@ function forEachSubscriber(signal2, visit) {
 }
 
 // src/reactivity/track.ts
-var _runtimeVersion = true ? "4.12.0" : "dev";
+var _runtimeVersion = true ? "4.13.1" : "dev";
 var REGISTRY_KEY = /* @__PURE__ */ Symbol.for("sibujs.reactive.v1");
 function resolveReactiveApi() {
   const g = globalThis;
@@ -770,6 +824,7 @@ function resolveReactiveApi() {
     getOwnerScope,
     runWithOwnerScope,
     bindOwnerScope,
+    structuralBinding,
     version: _runtimeVersion
   };
   g[REGISTRY_KEY] = local;
@@ -796,6 +851,7 @@ var forEachSubscriber2 = API.forEachSubscriber;
 var getOwnerScope2 = API.getOwnerScope ?? getOwnerScope;
 var runWithOwnerScope2 = API.runWithOwnerScope ?? runWithOwnerScope;
 var bindOwnerScope2 = API.bindOwnerScope ?? bindOwnerScope;
+var structuralBinding2 = API.structuralBinding ?? ((commit, ownerNode) => ({ stop: API.reactiveBinding(commit, ownerNode), run: (fn) => fn() }));
 
 // src/core/devtoolsHook.ts
 function emitDevtools(hook, event, payload) {
@@ -1036,6 +1092,165 @@ function signal(initial, options) {
   return [get, set];
 }
 
+// src/reactivity/domBinding.ts
+function domBinding(commit, ownerNode) {
+  if (isSSR()) return () => {
+  };
+  return reactiveBinding2(commit, ownerNode);
+}
+
+// src/widgets/attributeSnapshot.ts
+function snapshotAttributes(el, names) {
+  const previous = names.map((name) => [name, el.getAttribute(name)]);
+  return () => {
+    for (const [name, value] of previous) {
+      if (value === null) el.removeAttribute(name);
+      else el.setAttribute(name, value);
+    }
+  };
+}
+
+// src/widgets/keyOwnership.ts
+var CLAIM = /* @__PURE__ */ Symbol.for("sibujs.widgetKey");
+function claimWidgetKey(event, widget) {
+  event[CLAIM] = widget;
+}
+function isWidgetKeyEvent(event) {
+  return event[CLAIM] !== void 0;
+}
+function widgetKeyOwner(event) {
+  return event[CLAIM] ?? null;
+}
+
+// src/widgets/Accordion.ts
+var boundAccordions = /* @__PURE__ */ new WeakMap();
+function accordion(options) {
+  const { items: itemDefs, multiple = false, defaultExpanded = [] } = options;
+  const knownIds = new Set(itemDefs.map((item) => item.id));
+  const validDefaults = defaultExpanded.filter((id) => knownIds.has(id));
+  const initialExpanded = multiple ? validDefaults : validDefaults.slice(0, 1);
+  const [expandedIds, setExpandedIds] = signal(new Set(initialExpanded));
+  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 = [];
+    const idPrefix = createId("sibu-accordion");
+    for (const item of itemDefs) {
+      const trig = els.triggers[item.id];
+      const panel = els.panels[item.id];
+      if (!trig) continue;
+      restore.push(snapshotAttributes(trig, ["id", "aria-controls", "aria-expanded"]));
+      if (!trig.id) trig.id = `${idPrefix}-trigger-${idSegment(item.id)}`;
+      if (panel) {
+        restore.push(snapshotAttributes(panel, ["role", "id", "aria-labelledby", "hidden"]));
+        panel.setAttribute("role", "region");
+        if (!panel.id) panel.id = `${idPrefix}-panel-${idSegment(item.id)}`;
+        panel.setAttribute("aria-labelledby", trig.id);
+        trig.setAttribute("aria-controls", panel.id);
+      }
+    }
+    const fxTeardown = domBinding(() => {
+      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;
+      }
+    }, idempotencyKey);
+    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 (isWidgetKeyEvent(e)) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          claimWidgetKey(e, "accordion");
+          toggle(item.id);
+        }
+      };
+      trig.addEventListener("click", click);
+      trig.addEventListener("keydown", key);
+      handlers.push({ el: trig, click, key });
+    }
+    let tornDown = false;
+    const teardown = () => {
+      if (tornDown) return;
+      tornDown = true;
+      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/core/signals/watch.ts
 function watch(getter, callback) {
   devAssert(typeof getter === "function", "watch: first argument must be a getter function.");
@@ -1066,13 +1281,6 @@ function watch(getter, callback) {
   return teardown;
 }
 
-// src/reactivity/domBinding.ts
-function domBinding(commit, ownerNode) {
-  if (isSSR()) return () => {
-  };
-  return reactiveBinding2(commit, ownerNode);
-}
-
 // src/widgets/Combobox.ts
 var boundComboboxes = /* @__PURE__ */ new WeakMap();
 function combobox(options) {
@@ -1170,27 +1378,34 @@ function combobox(options) {
       open();
     };
     const onKey = (e) => {
+      if (isWidgetKeyEvent(e)) return;
       if (e.key === "ArrowDown") {
         e.preventDefault();
+        claimWidgetKey(e, "combobox");
         if (!isOpen()) open();
         highlightNext();
       } else if (e.key === "ArrowUp") {
         e.preventDefault();
+        claimWidgetKey(e, "combobox");
         if (!isOpen()) open();
         highlightPrev();
       } else if (e.key === "Enter") {
         if (highlightedIndex() >= 0) {
           e.preventDefault();
+          claimWidgetKey(e, "combobox");
           selectHighlighted();
         }
       } else if (e.key === "Escape") {
         e.preventDefault();
+        claimWidgetKey(e, "combobox");
         close();
       } else if (e.key === "Home") {
         e.preventDefault();
+        claimWidgetKey(e, "combobox");
         if (filteredItems().length > 0) setHighlightedIndex(0);
       } else if (e.key === "End") {
         e.preventDefault();
+        claimWidgetKey(e, "combobox");
         const len = filteredItems().length;
         if (len > 0) setHighlightedIndex(len - 1);
       }
@@ -1261,671 +1476,375 @@ function combobox(options) {
   };
 }
 
-// src/widgets/attributeSnapshot.ts
-function snapshotAttributes(el, names) {
-  const previous = names.map((name) => [name, el.getAttribute(name)]);
-  return () => {
-    for (const [name, value] of previous) {
-      if (value === null) el.removeAttribute(name);
-      else el.setAttribute(name, value);
+// src/utils/sanitize.ts
+function stripHtml(html) {
+  const input = String(html);
+  if (typeof DOMParser !== "undefined") {
+    try {
+      return new DOMParser().parseFromString(input, "text/html").body.textContent ?? "";
+    } catch {
     }
-  };
+  }
+  let prev;
+  let out = input;
+  do {
+    prev = out;
+    out = out.replace(/<[^>]*>/g, "");
+  } while (out !== prev);
+  return out.replace(/<[^>]*$/, "");
 }
 
-// src/widgets/Tabs.ts
-var boundTablists = /* @__PURE__ */ new WeakMap();
-function tabs(options) {
-  const { tabs: tabDefs, defaultTab } = options;
-  const firstEnabled = tabDefs.find((t) => !t.disabled)?.id ?? "";
-  const initialTab = defaultTab !== void 0 && tabDefs.some((t) => t.id === defaultTab && !t.disabled) ? defaultTab : firstEnabled;
-  const [activeTab, setActiveTabState] = signal(initialTab);
-  function setActiveTab(id) {
-    const tab = tabDefs.find((t) => t.id === id);
-    if (tab && !tab.disabled) {
-      setActiveTabState(id);
+// src/widgets/contentEditable.ts
+function toInertText(html) {
+  return stripHtml(String(html)).replace(/<(?=[a-z!/?])/gi, "&lt;");
+}
+function contentEditable(element) {
+  const [content, setContentInternal] = signal("");
+  const [isFocused, setFocused] = signal(false);
+  function setContent(input) {
+    if (typeof input === "string") {
+      setContentInternal(toInertText(input));
+      return;
     }
-  }
-  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;
-      }
+    if (typeof input.text === "string") {
+      setContentInternal(input.text);
+      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;
-      }
+    if (typeof input.html === "string") {
+      const shouldSanitize = input.sanitize !== false;
+      setContentInternal(shouldSanitize ? toInertText(input.html) : input.html);
+      return;
     }
+    setContentInternal("");
   }
-  function isActive(id) {
-    return activeTab() === id;
-  }
-  function bind(els) {
-    const existing = boundTablists.get(els.tablist);
-    if (existing) return existing;
-    const restore = [snapshotAttributes(els.tablist, ["role"])];
-    els.tablist.setAttribute("role", "tablist");
-    const idPrefix = createId("sibu-tabs");
-    for (const def of tabDefs) {
-      const tabEl = els.tabs[def.id];
-      if (!tabEl) continue;
-      restore.push(
-        snapshotAttributes(tabEl, ["role", "id", "aria-disabled", "aria-controls", "aria-selected", "tabindex"])
-      );
-      tabEl.setAttribute("role", "tab");
-      if (!tabEl.id) tabEl.id = `${idPrefix}-tab-${idSegment(def.id)}`;
-      if (def.disabled) tabEl.setAttribute("aria-disabled", "true");
-      else tabEl.removeAttribute("aria-disabled");
-      const panelEl = els.panels?.[def.id];
-      if (panelEl) {
-        restore.push(snapshotAttributes(panelEl, ["role", "id", "aria-labelledby", "hidden"]));
-        panelEl.setAttribute("role", "tabpanel");
-        if (!panelEl.id) panelEl.id = `${idPrefix}-panel-${idSegment(def.id)}`;
-        panelEl.setAttribute("aria-labelledby", tabEl.id);
-        tabEl.setAttribute("aria-controls", panelEl.id);
-      }
-    }
-    const fxTeardown = domBinding(() => {
-      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;
-      }
-    }, els.tablist);
-    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();
+  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);
+    if (element && !element.contains(range.commonAncestorContainer)) return;
+    const ancestor = range.commonAncestorContainer;
+    const existingWrap = findWrapperWithinEditor(
+      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);
         }
-      } 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;
-          }
+        parent.removeChild(existingWrap);
+        if (firstChild && lastChild) {
+          const newRange = document.createRange();
+          newRange.setStartBefore(firstChild);
+          newRange.setEndAfter(lastChild);
+          selection.removeAllRanges();
+          selection.addRange(newRange);
+          return;
         }
       }
-    };
-    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 });
+    } 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);
     }
-    let tornDown = false;
-    const teardown = () => {
-      if (tornDown) return;
-      tornDown = true;
-      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;
+  }
+  function findWrapperWithinEditor(el, tagName) {
+    const upper = tagName.toUpperCase();
+    while (el) {
+      if (el === element || isEditingHost(el)) return null;
+      if (el.tagName === upper) return el;
+      el = el.parentElement;
+    }
+    return null;
+  }
+  function isEditingHost(el) {
+    const attr = el.getAttribute("contenteditable");
+    return attr !== null && attr.toLowerCase() !== "false";
+  }
+  function bold() {
+    wrapSelection("strong");
+  }
+  function italic() {
+    wrapSelection("em");
+  }
+  function underline() {
+    wrapSelection("u");
   }
   return {
-    activeTab,
-    setActiveTab,
-    tabs: tabs2,
-    nextTab,
-    prevTab,
-    /** Reactive check — use inside class/nodes bindings for per-tab reactivity */
-    isActive,
-    bind
+    content,
+    setContent,
+    isFocused,
+    setFocused,
+    bold,
+    italic,
+    underline
   };
 }
 
-// src/widgets/Accordion.ts
-var boundAccordions = /* @__PURE__ */ new WeakMap();
-function accordion(options) {
-  const { items: itemDefs, multiple = false, defaultExpanded = [] } = options;
-  const knownIds = new Set(itemDefs.map((item) => item.id));
-  const validDefaults = defaultExpanded.filter((id) => knownIds.has(id));
-  const initialExpanded = multiple ? validDefaults : validDefaults.slice(0, 1);
-  const [expandedIds, setExpandedIds] = signal(new Set(initialExpanded));
-  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]));
-    }
+// 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 collapse(id) {
-    setExpandedIds((prev) => {
-      const next = new Set(prev);
-      next.delete(id);
-      return next;
-    });
+  function stripTime(d) {
+    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
   }
-  function toggle(id) {
-    if (expandedIds().has(id)) {
-      collapse(id);
-    } else {
-      expand(id);
-    }
+  function sameDay(a, b) {
+    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
   }
-  function expandAll() {
-    if (multiple) {
-      setExpandedIds(new Set(itemDefs.map((item) => item.id)));
+  function select2(date) {
+    if (!isDateDisabled(date)) {
+      setSelectedDate(date);
     }
   }
-  function collapseAll() {
-    setExpandedIds(/* @__PURE__ */ new Set());
+  function shiftMonth(prev, delta) {
+    return new Date(prev.getFullYear(), prev.getMonth() + delta, 1);
   }
-  function isExpanded(id) {
-    return expandedIds().has(id);
+  function nextMonth() {
+    setViewDate((prev) => shiftMonth(prev, 1));
   }
-  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 = [];
-    const idPrefix = createId("sibu-accordion");
-    for (const item of itemDefs) {
-      const trig = els.triggers[item.id];
-      const panel = els.panels[item.id];
-      if (!trig) continue;
-      restore.push(snapshotAttributes(trig, ["id", "aria-controls", "aria-expanded"]));
-      if (!trig.id) trig.id = `${idPrefix}-trigger-${idSegment(item.id)}`;
-      if (panel) {
-        restore.push(snapshotAttributes(panel, ["role", "id", "aria-labelledby", "hidden"]));
-        panel.setAttribute("role", "region");
-        if (!panel.id) panel.id = `${idPrefix}-panel-${idSegment(item.id)}`;
-        panel.setAttribute("aria-labelledby", trig.id);
-        trig.setAttribute("aria-controls", panel.id);
-      }
-    }
-    const fxTeardown = domBinding(() => {
-      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;
-      }
-    }, idempotencyKey);
-    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 });
-    }
-    let tornDown = false;
-    const teardown = () => {
-      if (tornDown) return;
-      tornDown = true;
-      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 boundPopovers = /* @__PURE__ */ new WeakMap();
-function popover() {
-  const [isOpen, setIsOpen] = signal(false);
-  function open() {
-    setIsOpen(true);
-  }
-  function close() {
-    setIsOpen(false);
+  function prevMonth() {
+    setViewDate((prev) => shiftMonth(prev, -1));
   }
-  function toggle() {
-    setIsOpen((prev) => !prev);
+  function nextYear() {
+    setViewDate((prev) => new Date(prev.getFullYear() + 1, prev.getMonth(), 1));
   }
-  function bind(els) {
-    const existing = boundPopovers.get(els.trigger);
-    if (existing) return existing;
-    const id = createId("sibu-popover");
-    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 = domBinding(() => {
-      const open2 = isOpen();
-      els.trigger.setAttribute("aria-expanded", open2 ? "true" : "false");
-      els.popover.hidden = !open2;
-    }, els.trigger);
-    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);
-    let tornDown = false;
-    const teardown = () => {
-      if (tornDown) return;
-      tornDown = true;
-      if (boundPopovers.get(els.trigger) === 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;
+  function prevYear() {
+    setViewDate((prev) => new Date(prev.getFullYear() - 1, prev.getMonth(), 1));
   }
-  return { isOpen, open, close, toggle, bind };
-}
-
-// src/widgets/Select.ts
-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);
+  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)
       });
     }
-  }
-  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]);
+    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)
+      });
     }
-  }
-  function clear() {
-    setSelectedItems([]);
-  }
-  function bind(els) {
-    const existing = boundSelects.get(els.listbox);
-    if (existing) return existing;
-    const prevId = els.listbox.id;
-    const prevRole = els.listbox.getAttribute("role");
-    const prevMultiselectable = els.listbox.getAttribute("aria-multiselectable");
-    const prevTabIndex = els.listbox.getAttribute("tabindex");
-    const listboxId = createId("sibu-select");
-    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 = domBinding(() => {
-      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");
-        const disabled = isItemDisabled(items[i]);
-        if (disabled) optEl.setAttribute("aria-disabled", "true");
-        else optEl.removeAttribute("aria-disabled");
-        if (i === idx && !disabled) activeId = optEl.id;
-      }
-      if (activeId) els.listbox.setAttribute("aria-activedescendant", activeId);
-      else els.listbox.removeAttribute("aria-activedescendant");
-    }, els.listbox);
-    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();
-        const first = nextEnabled(-1, 1);
-        if (first !== -1) setHighlightedIndex(first);
-      } else if (e.key === "End") {
-        e.preventDefault();
-        const last = nextEnabled(items.length, -1);
-        if (last !== -1) setHighlightedIndex(last);
-      } 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);
+    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)
+        });
       }
-    };
-    els.listbox.addEventListener("keydown", onKey);
-    let tornDown = false;
-    const teardown = () => {
-      if (tornDown) return;
-      tornDown = true;
-      if (boundSelects.get(els.listbox) === teardown) boundSelects.delete(els.listbox);
-      fxTeardown();
-      els.listbox.removeEventListener("keydown", onKey);
-      if (typeTimer !== null) clearTimeout(typeTimer);
-      if (prevId === "") els.listbox.removeAttribute("id");
-      else els.listbox.id = prevId;
-      if (prevRole === null) els.listbox.removeAttribute("role");
-      else els.listbox.setAttribute("role", prevRole);
-      if (prevMultiselectable === null) els.listbox.removeAttribute("aria-multiselectable");
-      else els.listbox.setAttribute("aria-multiselectable", prevMultiselectable);
-      if (prevTabIndex === null) els.listbox.removeAttribute("tabindex");
-      else els.listbox.setAttribute("tabindex", prevTabIndex);
-      els.listbox.removeAttribute("aria-activedescendant");
-    };
-    boundSelects.set(els.listbox, teardown);
-    return teardown;
+    }
+    return days;
+  });
+  function isSelected(date) {
+    const sel = selectedDate();
+    return sel !== null && sameDay(date, sel);
   }
   return {
-    selectedItems,
-    selectedItem,
+    selectedDate,
     select: select2,
-    deselect,
-    toggle,
-    isSelected,
-    isOpen,
-    open,
-    close,
-    highlightedIndex,
-    highlightNext,
-    highlightPrev,
-    selectHighlighted,
-    clear,
-    bind
-  };
-}
-
-// src/widgets/Tooltip.ts
-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);
-  }
+    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 = boundTriggers.get(els.trigger);
+    const existing = boundDatePickers.get(els.grid);
     if (existing) return existing;
-    const id = createId("sibu-tooltip");
-    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 prevGridRole = els.grid.getAttribute("role");
+    const prevGridTabIndex = els.grid.getAttribute("tabindex");
+    const prevGridLabel = els.grid.getAttribute("aria-label");
+    els.grid.setAttribute("role", "grid");
+    if (els.grid.tabIndex < 0) els.grid.tabIndex = 0;
+    let pendingFocus = false;
+    const touchedCells = /* @__PURE__ */ new Map();
+    const restoreAttr = (el, name, value) => {
+      if (value === null) el.removeAttribute(name);
+      else el.setAttribute(name, value);
+    };
+    const restoreCell = (cell, snap) => {
+      restoreAttr(cell, "role", snap.role);
+      restoreAttr(cell, "aria-selected", snap.selected);
+      restoreAttr(cell, "aria-disabled", snap.disabled);
+      restoreAttr(cell, "tabindex", snap.tabindex);
+    };
     const fxTeardown = domBinding(() => {
-      els.tooltip.hidden = !isVisible();
-    }, els.trigger);
-    const onTriggerEnter = () => show();
-    const onTriggerLeave = () => scheduleHide();
-    const onTooltipEnter = () => {
-      if (hideTimer !== null) {
-        clearTimeout(hideTimer);
-        hideTimer = null;
+      const sel = selectedDate();
+      const view = viewDate();
+      const days = daysInMonth();
+      els.grid.setAttribute("aria-label", view.toLocaleDateString(void 0, { month: "long", year: "numeric" }));
+      let viewCell = null;
+      const displayed = /* @__PURE__ */ new Set();
+      for (const d of days) {
+        const cell = els.cell(d.date);
+        if (!cell) continue;
+        displayed.add(cell);
+        if (!touchedCells.has(cell)) {
+          touchedCells.set(cell, {
+            role: cell.getAttribute("role"),
+            selected: cell.getAttribute("aria-selected"),
+            disabled: cell.getAttribute("aria-disabled"),
+            tabindex: cell.getAttribute("tabindex")
+          });
+        }
+        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");
+        const isView = isSameCalendarDay(view, d.date);
+        cell.tabIndex = isView ? 0 : -1;
+        if (isView) viewCell = cell;
       }
-    };
-    const onTooltipLeave = () => scheduleHide();
-    const onFocus = () => show();
-    const onBlur = () => hide();
+      for (const [cell, snap] of touchedCells) {
+        if (!displayed.has(cell)) {
+          restoreCell(cell, snap);
+          touchedCells.delete(cell);
+        }
+      }
+      if (pendingFocus && viewCell && typeof viewCell.focus === "function") {
+        pendingFocus = false;
+        viewCell.focus();
+      }
+    }, els.grid);
+    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) => {
-      if (e.key === "Escape" && isVisible()) {
-        e.stopPropagation();
-        hide();
+      if (isWidgetKeyEvent(e)) return;
+      if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown") {
+        pendingFocus = true;
+      }
+      switch (e.key) {
+        case "ArrowLeft":
+          e.preventDefault();
+          claimWidgetKey(e, "datePicker");
+          shiftDays(-1);
+          break;
+        case "ArrowRight":
+          e.preventDefault();
+          claimWidgetKey(e, "datePicker");
+          shiftDays(1);
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          claimWidgetKey(e, "datePicker");
+          shiftDays(-7);
+          break;
+        case "ArrowDown":
+          e.preventDefault();
+          claimWidgetKey(e, "datePicker");
+          shiftDays(7);
+          break;
+        case "Home":
+          e.preventDefault();
+          claimWidgetKey(e, "datePicker");
+          setViewDate((p) => new Date(p.getFullYear(), p.getMonth(), p.getDate() - p.getDay()));
+          break;
+        case "End": {
+          e.preventDefault();
+          claimWidgetKey(e, "datePicker");
+          setViewDate((p) => new Date(p.getFullYear(), p.getMonth(), p.getDate() + (6 - p.getDay())));
+          break;
+        }
+        case "PageUp":
+          e.preventDefault();
+          claimWidgetKey(e, "datePicker");
+          if (e.shiftKey) prevYear();
+          else prevMonth();
+          break;
+        case "PageDown":
+          e.preventDefault();
+          claimWidgetKey(e, "datePicker");
+          if (e.shiftKey) nextYear();
+          else nextMonth();
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          claimWidgetKey(e, "datePicker");
+          select2(viewDate());
+          break;
       }
     };
-    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);
+    els.grid.addEventListener("keydown", onKey);
     let tornDown = false;
     const teardown = () => {
       if (tornDown) return;
       tornDown = true;
-      if (boundTriggers.get(els.trigger) === teardown) boundTriggers.delete(els.trigger);
+      if (boundDatePickers.get(els.grid) === teardown) boundDatePickers.delete(els.grid);
       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);
+      els.grid.removeEventListener("keydown", onKey);
+      if (prevGridRole === null) els.grid.removeAttribute("role");
+      else els.grid.setAttribute("role", prevGridRole);
+      if (prevGridTabIndex === null) els.grid.removeAttribute("tabindex");
+      else els.grid.setAttribute("tabindex", prevGridTabIndex);
+      if (prevGridLabel === null) els.grid.removeAttribute("aria-label");
+      else els.grid.setAttribute("aria-label", prevGridLabel);
+      for (const [cell, snap] of touchedCells) restoreCell(cell, snap);
+      touchedCells.clear();
     };
-    boundTriggers.set(els.trigger, teardown);
+    boundDatePickers.set(els.grid, teardown);
     return teardown;
   }
-  return { isVisible, show, hide, content, setContent, bind };
 }
 
 // src/widgets/FileUpload.ts
@@ -2073,8 +1992,10 @@ function fileUpload(options) {
     };
     const onDropClick = () => els.input.click();
     const onDropKey = (e) => {
+      if (isWidgetKeyEvent(e)) return;
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
+        claimWidgetKey(e, "fileUpload");
         els.input.click();
       }
     };
@@ -2127,365 +2048,841 @@ function fileUpload(options) {
   };
 }
 
-// src/utils/sanitize.ts
-function stripHtml(html) {
-  const input = String(html);
-  if (typeof DOMParser !== "undefined") {
-    try {
-      return new DOMParser().parseFromString(input, "text/html").body.textContent ?? "";
-    } catch {
+// src/widgets/Popover.ts
+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 = createId("sibu-popover");
+    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 = domBinding(() => {
+      const open2 = isOpen();
+      els.trigger.setAttribute("aria-expanded", open2 ? "true" : "false");
+      els.popover.hidden = !open2;
+    }, els.trigger);
+    const onTriggerClick = (e) => {
+      e.preventDefault();
+      toggle();
+    };
+    const onKey = (e) => {
+      if (isWidgetKeyEvent(e)) return;
+      if (e.key === "Escape" && isOpen()) {
+        e.stopPropagation();
+        claimWidgetKey(e, "popover");
+        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);
+    let tornDown = false;
+    const teardown = () => {
+      if (tornDown) return;
+      tornDown = true;
+      if (boundPopovers.get(els.trigger) === 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;
   }
-  let prev;
-  let out = input;
-  do {
-    prev = out;
-    out = out.replace(/<[^>]*>/g, "");
-  } while (out !== prev);
-  return out.replace(/<[^>]*$/, "");
+  return { isOpen, open, close, toggle, bind };
 }
 
-// src/widgets/contentEditable.ts
-function toInertText(html) {
-  return stripHtml(String(html)).replace(/<(?=[a-z!/?])/gi, "&lt;");
-}
-function contentEditable(element) {
-  const [content, setContentInternal] = signal("");
-  const [isFocused, setFocused] = signal(false);
-  function setContent(input) {
-    if (typeof input === "string") {
-      setContentInternal(toInertText(input));
-      return;
-    }
-    if (typeof input.text === "string") {
-      setContentInternal(input.text);
-      return;
-    }
-    if (typeof input.html === "string") {
-      const shouldSanitize = input.sanitize !== false;
-      setContentInternal(shouldSanitize ? toInertText(input.html) : input.html);
-      return;
+// src/widgets/Select.ts
+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);
+      });
     }
-    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);
-    if (element && !element.contains(range.commonAncestorContainer)) return;
-    const ancestor = range.commonAncestorContainer;
-    const existingWrap = findWrapperWithinEditor(
-      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;
-        }
-      }
+  function deselect(item) {
+    setSelectedItems((prev) => prev.filter((i) => i !== item));
+  }
+  function toggle(item) {
+    if (selectedItems().includes(item)) {
+      deselect(item);
     } 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);
+      select2(item);
     }
   }
-  function findWrapperWithinEditor(el, tagName) {
-    const upper = tagName.toUpperCase();
-    while (el) {
-      if (el === element || isEditingHost(el)) return null;
-      if (el.tagName === upper) return el;
-      el = el.parentElement;
+  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 null;
+    return -1;
   }
-  function isEditingHost(el) {
-    const attr = el.getAttribute("contenteditable");
-    return attr !== null && attr.toLowerCase() !== "false";
+  function highlightNext() {
+    if (items.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const n = nextEnabled(prev < 0 ? -1 : prev, 1);
+      return n === -1 ? prev : n;
+    });
   }
-  function bold() {
-    wrapSelection("strong");
+  function highlightPrev() {
+    if (items.length === 0) return;
+    setHighlightedIndex((prev) => {
+      const n = nextEnabled(prev < 0 ? items.length : prev, -1);
+      return n === -1 ? prev : n;
+    });
   }
-  function italic() {
-    wrapSelection("em");
+  function selectHighlighted() {
+    const idx = highlightedIndex();
+    if (idx >= 0 && idx < items.length) {
+      select2(items[idx]);
+    }
   }
-  function underline() {
-    wrapSelection("u");
+  function clear() {
+    setSelectedItems([]);
+  }
+  function bind(els) {
+    const existing = boundSelects.get(els.listbox);
+    if (existing) return existing;
+    const prevId = els.listbox.id;
+    const prevRole = els.listbox.getAttribute("role");
+    const prevMultiselectable = els.listbox.getAttribute("aria-multiselectable");
+    const prevTabIndex = els.listbox.getAttribute("tabindex");
+    const listboxId = createId("sibu-select");
+    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 = domBinding(() => {
+      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");
+        const disabled = isItemDisabled(items[i]);
+        if (disabled) optEl.setAttribute("aria-disabled", "true");
+        else optEl.removeAttribute("aria-disabled");
+        if (i === idx && !disabled) activeId = optEl.id;
+      }
+      if (activeId) els.listbox.setAttribute("aria-activedescendant", activeId);
+      else els.listbox.removeAttribute("aria-activedescendant");
+    }, els.listbox);
+    let typeBuffer = "";
+    let typeTimer = null;
+    const onKey = (e) => {
+      if (isWidgetKeyEvent(e)) return;
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        claimWidgetKey(e, "select");
+        highlightNext();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        claimWidgetKey(e, "select");
+        highlightPrev();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        claimWidgetKey(e, "select");
+        const first = nextEnabled(-1, 1);
+        if (first !== -1) setHighlightedIndex(first);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        claimWidgetKey(e, "select");
+        const last = nextEnabled(items.length, -1);
+        if (last !== -1) setHighlightedIndex(last);
+      } else if (e.key === "Enter" || e.key === " ") {
+        if (highlightedIndex() >= 0) {
+          e.preventDefault();
+          claimWidgetKey(e, "select");
+          selectHighlighted();
+        }
+      } else if (e.key.length === 1 && /\S/.test(e.key)) {
+        claimWidgetKey(e, "select");
+        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);
+    let tornDown = false;
+    const teardown = () => {
+      if (tornDown) return;
+      tornDown = true;
+      if (boundSelects.get(els.listbox) === teardown) boundSelects.delete(els.listbox);
+      fxTeardown();
+      els.listbox.removeEventListener("keydown", onKey);
+      if (typeTimer !== null) clearTimeout(typeTimer);
+      if (prevId === "") els.listbox.removeAttribute("id");
+      else els.listbox.id = prevId;
+      if (prevRole === null) els.listbox.removeAttribute("role");
+      else els.listbox.setAttribute("role", prevRole);
+      if (prevMultiselectable === null) els.listbox.removeAttribute("aria-multiselectable");
+      else els.listbox.setAttribute("aria-multiselectable", prevMultiselectable);
+      if (prevTabIndex === null) els.listbox.removeAttribute("tabindex");
+      else els.listbox.setAttribute("tabindex", prevTabIndex);
+      els.listbox.removeAttribute("aria-activedescendant");
+    };
+    boundSelects.set(els.listbox, teardown);
+    return teardown;
   }
   return {
-    content,
-    setContent,
-    isFocused,
-    setFocused,
-    bold,
-    italic,
-    underline
+    selectedItems,
+    selectedItem,
+    select: select2,
+    deselect,
+    toggle,
+    isSelected,
+    isOpen,
+    open,
+    close,
+    highlightedIndex,
+    highlightNext,
+    highlightPrev,
+    selectHighlighted,
+    clear,
+    bind
   };
 }
 
-// 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;
+// src/widgets/selectMenu.ts
+var boundMenus = /* @__PURE__ */ new WeakMap();
+var OPTION_ATTRS = ["id", "role", "aria-selected", "aria-disabled"];
+function selectMenu(options) {
+  const getItems = typeof options.items === "function" ? options.items : () => options.items;
+  const toStr = options.itemToString ?? ((item) => String(item));
+  const isDisabled = options.isDisabled ?? (() => false);
+  const isEqual = options.isEqual ?? Object.is;
+  const pageSize = Math.max(1, options.pageSize ?? 10);
+  const [ownValue, setOwnValue] = signal(options.defaultValue ?? null);
+  const readValue = options.value;
+  const value = () => readValue ? readValue() ?? null : ownValue();
+  const [isOpen, setIsOpen] = signal(false);
+  const [active, setActiveIndex] = signal(-1);
+  const enabledAt = (items, i) => i >= 0 && i < items.length && !isDisabled(items[i]);
+  function enabledFrom(items, from, dir) {
+    for (let i = from; i >= 0 && i < items.length; i += dir) if (!isDisabled(items[i])) return i;
+    return -1;
   }
-  function stripTime(d) {
-    return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+  function selectedIndex(items) {
+    const v = value();
+    if (v === null) return -1;
+    return items.findIndex((it) => isEqual(it, v));
+  }
+  function open(activeAt = "selected") {
+    untracked2(() => {
+      const items = getItems();
+      let idx = -1;
+      if (activeAt === "last") idx = enabledFrom(items, items.length - 1, -1);
+      else if (activeAt === "first") idx = enabledFrom(items, 0, 1);
+      else {
+        const sel = selectedIndex(items);
+        idx = enabledAt(items, sel) ? sel : enabledFrom(items, 0, 1);
+      }
+      batch(() => {
+        setActiveIndex(idx);
+        setIsOpen(true);
+      });
+    });
   }
-  function sameDay(a, b) {
-    return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  function close() {
+    setIsOpen(false);
   }
-  function select2(date) {
-    if (!isDateDisabled(date)) {
-      setSelectedDate(date);
-    }
+  function toggle() {
+    if (untracked2(isOpen)) close();
+    else open();
   }
-  function shiftMonth(prev, delta) {
-    return new Date(prev.getFullYear(), prev.getMonth() + delta, 1);
+  function setActive(index) {
+    if (enabledAt(untracked2(getItems), index)) setActiveIndex(index);
   }
-  function nextMonth() {
-    setViewDate((prev) => shiftMonth(prev, 1));
+  function select2(item) {
+    if (isDisabled(item)) return;
+    batch(() => {
+      if (!readValue) setOwnValue(() => item);
+      setIsOpen(false);
+    });
+    options.onChange?.(item);
   }
-  function prevMonth() {
-    setViewDate((prev) => shiftMonth(prev, -1));
+  function activeItem() {
+    const items = getItems();
+    const i = active();
+    return i >= 0 && i < items.length ? items[i] : null;
   }
-  function nextYear() {
-    setViewDate((prev) => new Date(prev.getFullYear() + 1, prev.getMonth(), 1));
+  function bind(els) {
+    const existing = boundMenus.get(els.trigger);
+    if (existing) return existing;
+    const { trigger, listbox } = els;
+    const restoreTrigger = snapshotAttributes(trigger, [
+      "role",
+      "aria-haspopup",
+      "aria-expanded",
+      "aria-controls",
+      "aria-activedescendant",
+      "tabindex"
+    ]);
+    const restoreListbox = snapshotAttributes(listbox, ["id", "role", "tabindex"]);
+    const prevHidden = listbox.hidden;
+    const optionRestores = /* @__PURE__ */ new Map();
+    const generatedIds = /* @__PURE__ */ new WeakMap();
+    let optionIndex = /* @__PURE__ */ new Map();
+    const listboxId = listbox.id || createId("sibu-select-menu");
+    listbox.id = listboxId;
+    listbox.setAttribute("role", "listbox");
+    listbox.tabIndex = -1;
+    trigger.setAttribute("role", "combobox");
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-controls", listboxId);
+    if (trigger.tabIndex < 0) trigger.tabIndex = 0;
+    const generatedIdFor = (el, taken) => {
+      let id = generatedIds.get(el);
+      while (id === void 0 || taken.has(id) || el.ownerDocument.getElementById(id) !== null) {
+        id = createId(`${listboxId}-opt`);
+      }
+      generatedIds.set(el, id);
+      return id;
+    };
+    let lastScrolled = null;
+    const stopBinding = domBinding(() => {
+      const items = getItems();
+      const openNow = isOpen();
+      const idx = active();
+      const sel = value();
+      trigger.setAttribute("aria-expanded", openNow ? "true" : "false");
+      listbox.hidden = !openNow;
+      const nextIndex = /* @__PURE__ */ new Map();
+      let activeEl = null;
+      const optionEls = [];
+      const taken = /* @__PURE__ */ new Set();
+      for (let i = 0; i < items.length; i++) {
+        const el = els.option(items[i], i);
+        optionEls.push(el);
+        if (el?.id) taken.add(el.id);
+      }
+      for (let i = 0; i < items.length; i++) {
+        const el = optionEls[i];
+        if (!el) continue;
+        if (!optionRestores.has(el)) optionRestores.set(el, snapshotAttributes(el, OPTION_ATTRS));
+        nextIndex.set(el, i);
+        if (!el.id) {
+          el.id = generatedIdFor(el, taken);
+          taken.add(el.id);
+        }
+        el.setAttribute("role", "option");
+        el.setAttribute("aria-selected", sel !== null && isEqual(items[i], sel) ? "true" : "false");
+        const disabled = isDisabled(items[i]);
+        if (disabled) el.setAttribute("aria-disabled", "true");
+        else el.removeAttribute("aria-disabled");
+        if (i === idx && !disabled) activeEl = el;
+      }
+      for (const [el, restore] of optionRestores) {
+        if (nextIndex.has(el)) continue;
+        restore();
+        optionRestores.delete(el);
+        if (lastScrolled === el) lastScrolled = null;
+      }
+      optionIndex = nextIndex;
+      if (openNow && activeEl) {
+        trigger.setAttribute("aria-activedescendant", activeEl.id);
+        if (activeEl !== lastScrolled) {
+          activeEl.scrollIntoView?.({
+            block: "nearest"
+          });
+          lastScrolled = activeEl;
+        }
+      } else {
+        trigger.removeAttribute("aria-activedescendant");
+        if (!openNow) lastScrolled = null;
+      }
+    }, trigger);
+    let typeBuffer = "";
+    let typeTimer = null;
+    const typeahead = (char) => {
+      typeBuffer += char.toLowerCase();
+      if (typeTimer !== null) clearTimeout(typeTimer);
+      typeTimer = setTimeout(() => {
+        typeBuffer = "";
+        typeTimer = null;
+      }, 500);
+      const items = getItems();
+      const n = items.length;
+      if (n === 0) return;
+      const start = untracked2(active);
+      const repeated = typeBuffer.length > 1 && [...typeBuffer].every((c) => c === typeBuffer[0]);
+      const needle = repeated ? typeBuffer[0] : typeBuffer;
+      const offset = typeBuffer.length === 1 || repeated ? 1 : 0;
+      for (let k = 0; k < n; k++) {
+        const i = (Math.max(start, 0) + offset + k) % n;
+        if (!isDisabled(items[i]) && toStr(items[i]).toLowerCase().startsWith(needle)) {
+          setActiveIndex(i);
+          return;
+        }
+      }
+    };
+    const commitActive = () => {
+      const item = untracked2(activeItem);
+      if (item !== null && !isDisabled(item)) select2(item);
+      else close();
+    };
+    const move = (delta) => {
+      const items = getItems();
+      const cur = untracked2(active);
+      const dir = delta > 0 ? 1 : -1;
+      const target = Math.min(items.length - 1, Math.max(0, cur + delta));
+      let next = enabledFrom(items, target, dir);
+      if (next === -1) next = enabledFrom(items, target, dir === 1 ? -1 : 1);
+      if (next !== -1) setActiveIndex(next);
+    };
+    const onKey = (e) => {
+      if (isWidgetKeyEvent(e) || e.ctrlKey || e.metaKey) return;
+      const openNow = untracked2(isOpen);
+      const key = e.key;
+      let handled = true;
+      if (!openNow) {
+        if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " ") open();
+        else if (key === "Home") open("first");
+        else if (key === "End") open("last");
+        else if (key.length === 1 && !e.altKey) {
+          open();
+          typeahead(key);
+        } else handled = false;
+      } else if (key === "ArrowDown" && !e.altKey) move(1);
+      else if (key === "ArrowUp" && e.altKey) commitActive();
+      else if (key === "ArrowUp") move(-1);
+      else if (key === "Home") setActive(enabledFrom(getItems(), 0, 1));
+      else if (key === "End") {
+        const items = getItems();
+        setActive(enabledFrom(items, items.length - 1, -1));
+      } else if (key === "PageDown") move(pageSize);
+      else if (key === "PageUp") move(-pageSize);
+      else if (key === "Escape") close();
+      else if (key === " " && typeBuffer !== "") typeahead(key);
+      else if (key === "Enter" || key === " ") commitActive();
+      else if (key === "Tab") {
+        commitActive();
+        handled = false;
+      } else if (key.length === 1 && !e.altKey) typeahead(key);
+      else handled = false;
+      if (handled) {
+        e.preventDefault();
+        claimWidgetKey(e, "selectMenu");
+      }
+    };
+    const onTriggerClick = () => toggle();
+    const onListboxPointerDown = (e) => e.preventDefault();
+    const optionFromEvent = (e) => {
+      let node = e.target;
+      while (node && node !== listbox) {
+        const i = optionIndex.get(node);
+        if (i !== void 0) return i;
+        node = node.parentNode;
+      }
+      return -1;
+    };
+    const onListboxClick = (e) => {
+      const i = optionFromEvent(e);
+      if (i === -1) return;
+      const item = getItems()[i];
+      if (isDisabled(item)) return;
+      select2(item);
+      trigger.focus();
+    };
+    const onListboxPointerMove = (e) => {
+      const i = optionFromEvent(e);
+      if (i !== -1 && i !== untracked2(active)) setActive(i);
+    };
+    const onDocPointerDown = (e) => {
+      if (!untracked2(isOpen)) return;
+      const target = e.target;
+      if (target && (trigger.contains(target) || listbox.contains(target))) return;
+      close();
+    };
+    const onTriggerBlur = (e) => {
+      if (!untracked2(isOpen)) return;
+      const next = e.relatedTarget;
+      if (next && listbox.contains(next)) return;
+      close();
+    };
+    trigger.addEventListener("keydown", onKey);
+    trigger.addEventListener("click", onTriggerClick);
+    trigger.addEventListener("blur", onTriggerBlur);
+    listbox.addEventListener("mousedown", onListboxPointerDown);
+    listbox.addEventListener("click", onListboxClick);
+    listbox.addEventListener("pointermove", onListboxPointerMove);
+    const doc = trigger.ownerDocument;
+    doc.addEventListener("pointerdown", onDocPointerDown, true);
+    let tornDown = false;
+    const teardown = () => {
+      if (tornDown) return;
+      tornDown = true;
+      if (boundMenus.get(trigger) === teardown) boundMenus.delete(trigger);
+      stopBinding();
+      trigger.removeEventListener("keydown", onKey);
+      trigger.removeEventListener("click", onTriggerClick);
+      trigger.removeEventListener("blur", onTriggerBlur);
+      listbox.removeEventListener("mousedown", onListboxPointerDown);
+      listbox.removeEventListener("click", onListboxClick);
+      listbox.removeEventListener("pointermove", onListboxPointerMove);
+      doc.removeEventListener("pointerdown", onDocPointerDown, true);
+      if (typeTimer !== null) clearTimeout(typeTimer);
+      for (const restore of optionRestores.values()) restore();
+      optionRestores.clear();
+      optionIndex.clear();
+      restoreTrigger();
+      restoreListbox();
+      listbox.hidden = prevHidden;
+    };
+    boundMenus.set(trigger, teardown);
+    return teardown;
   }
-  function prevYear() {
-    setViewDate((prev) => new Date(prev.getFullYear() - 1, prev.getMonth(), 1));
+  return { value, isOpen, open, close, toggle, active, activeItem, setActive, select: select2, bind };
+}
+
+// src/widgets/Tabs.ts
+var boundTablists = /* @__PURE__ */ new WeakMap();
+function tabs(options) {
+  const { tabs: tabDefs, defaultTab } = options;
+  const firstEnabled = tabDefs.find((t) => !t.disabled)?.id ?? "";
+  const initialTab = defaultTab !== void 0 && tabDefs.some((t) => t.id === defaultTab && !t.disabled) ? defaultTab : firstEnabled;
+  const [activeTab, setActiveTabState] = signal(initialTab);
+  function setActiveTab(id) {
+    const tab = tabDefs.find((t) => t.id === id);
+    if (tab && !tab.disabled) {
+      setActiveTabState(id);
+    }
   }
-  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)
-      });
+  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;
+      }
     }
-    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)
-      });
+  }
+  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;
+      }
     }
-    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)
-        });
+  }
+  function isActive(id) {
+    return activeTab() === id;
+  }
+  function bind(els) {
+    const existing = boundTablists.get(els.tablist);
+    if (existing) return existing;
+    const restore = [snapshotAttributes(els.tablist, ["role"])];
+    els.tablist.setAttribute("role", "tablist");
+    const idPrefix = createId("sibu-tabs");
+    for (const def of tabDefs) {
+      const tabEl = els.tabs[def.id];
+      if (!tabEl) continue;
+      restore.push(
+        snapshotAttributes(tabEl, ["role", "id", "aria-disabled", "aria-controls", "aria-selected", "tabindex"])
+      );
+      tabEl.setAttribute("role", "tab");
+      if (!tabEl.id) tabEl.id = `${idPrefix}-tab-${idSegment(def.id)}`;
+      if (def.disabled) tabEl.setAttribute("aria-disabled", "true");
+      else tabEl.removeAttribute("aria-disabled");
+      const panelEl = els.panels?.[def.id];
+      if (panelEl) {
+        restore.push(snapshotAttributes(panelEl, ["role", "id", "aria-labelledby", "hidden"]));
+        panelEl.setAttribute("role", "tabpanel");
+        if (!panelEl.id) panelEl.id = `${idPrefix}-panel-${idSegment(def.id)}`;
+        panelEl.setAttribute("aria-labelledby", tabEl.id);
+        tabEl.setAttribute("aria-controls", panelEl.id);
+      }
+    }
+    const fxTeardown = domBinding(() => {
+      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;
+      }
+    }, els.tablist);
+    const onKey = (e) => {
+      if (isWidgetKeyEvent(e)) return;
+      if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        claimWidgetKey(e, "tabs");
+        nextTab();
+        els.tabs[activeTab()]?.focus();
+      } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        claimWidgetKey(e, "tabs");
+        prevTab();
+        els.tabs[activeTab()]?.focus();
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        claimWidgetKey(e, "tabs");
+        const first = tabDefs.find((t) => !t.disabled);
+        if (first) {
+          setActiveTabState(first.id);
+          els.tabs[first.id]?.focus();
+        }
+      } else if (e.key === "End") {
+        e.preventDefault();
+        claimWidgetKey(e, "tabs");
+        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 });
     }
-    return days;
-  });
-  function isSelected(date) {
-    const sel = selectedDate();
-    return sel !== null && sameDay(date, sel);
+    let tornDown = false;
+    const teardown = () => {
+      if (tornDown) return;
+      tornDown = true;
+      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 {
-    selectedDate,
-    select: select2,
-    viewDate,
-    setViewDate,
-    nextMonth,
-    prevMonth,
-    nextYear,
-    prevYear,
-    daysInMonth,
-    isDateDisabled,
-    /** Reactive check — use inside class bindings for per-day reactivity */
-    isSelected,
+    activeTab,
+    setActiveTab,
+    tabs: tabs2,
+    nextTab,
+    prevTab,
+    /** Reactive check — use inside class/nodes bindings for per-tab reactivity */
+    isActive,
     bind
   };
+}
+
+// src/widgets/Tooltip.ts
+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 = boundDatePickers.get(els.grid);
+    const existing = boundTriggers.get(els.trigger);
     if (existing) return existing;
-    const prevGridRole = els.grid.getAttribute("role");
-    const prevGridTabIndex = els.grid.getAttribute("tabindex");
-    const prevGridLabel = els.grid.getAttribute("aria-label");
-    els.grid.setAttribute("role", "grid");
-    if (els.grid.tabIndex < 0) els.grid.tabIndex = 0;
-    let pendingFocus = false;
-    const touchedCells = /* @__PURE__ */ new Map();
-    const restoreAttr = (el, name, value) => {
-      if (value === null) el.removeAttribute(name);
-      else el.setAttribute(name, value);
-    };
-    const restoreCell = (cell, snap) => {
-      restoreAttr(cell, "role", snap.role);
-      restoreAttr(cell, "aria-selected", snap.selected);
-      restoreAttr(cell, "aria-disabled", snap.disabled);
-      restoreAttr(cell, "tabindex", snap.tabindex);
-    };
+    const id = createId("sibu-tooltip");
+    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 = domBinding(() => {
-      const sel = selectedDate();
-      const view = viewDate();
-      const days = daysInMonth();
-      els.grid.setAttribute("aria-label", view.toLocaleDateString(void 0, { month: "long", year: "numeric" }));
-      let viewCell = null;
-      const displayed = /* @__PURE__ */ new Set();
-      for (const d of days) {
-        const cell = els.cell(d.date);
-        if (!cell) continue;
-        displayed.add(cell);
-        if (!touchedCells.has(cell)) {
-          touchedCells.set(cell, {
-            role: cell.getAttribute("role"),
-            selected: cell.getAttribute("aria-selected"),
-            disabled: cell.getAttribute("aria-disabled"),
-            tabindex: cell.getAttribute("tabindex")
-          });
-        }
-        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");
-        const isView = isSameCalendarDay(view, d.date);
-        cell.tabIndex = isView ? 0 : -1;
-        if (isView) viewCell = cell;
-      }
-      for (const [cell, snap] of touchedCells) {
-        if (!displayed.has(cell)) {
-          restoreCell(cell, snap);
-          touchedCells.delete(cell);
-        }
-      }
-      if (pendingFocus && viewCell && typeof viewCell.focus === "function") {
-        pendingFocus = false;
-        viewCell.focus();
+      els.tooltip.hidden = !isVisible();
+    }, els.trigger);
+    const onTriggerEnter = () => show();
+    const onTriggerLeave = () => scheduleHide();
+    const onTooltipEnter = () => {
+      if (hideTimer !== null) {
+        clearTimeout(hideTimer);
+        hideTimer = null;
       }
-    }, els.grid);
-    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 onTooltipLeave = () => scheduleHide();
+    const onFocus = () => show();
+    const onBlur = () => hide();
     const onKey = (e) => {
-      if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "ArrowUp" || e.key === "ArrowDown" || e.key === "Home" || e.key === "End" || e.key === "PageUp" || e.key === "PageDown") {
-        pendingFocus = true;
-      }
-      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;
+      if (isWidgetKeyEvent(e)) return;
+      if (e.key === "Escape" && isVisible()) {
+        e.stopPropagation();
+        claimWidgetKey(e, "tooltip");
+        hide();
       }
     };
-    els.grid.addEventListener("keydown", onKey);
+    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);
     let tornDown = false;
     const teardown = () => {
       if (tornDown) return;
       tornDown = true;
-      if (boundDatePickers.get(els.grid) === teardown) boundDatePickers.delete(els.grid);
+      if (boundTriggers.get(els.trigger) === teardown) boundTriggers.delete(els.trigger);
       fxTeardown();
-      els.grid.removeEventListener("keydown", onKey);
-      if (prevGridRole === null) els.grid.removeAttribute("role");
-      else els.grid.setAttribute("role", prevGridRole);
-      if (prevGridTabIndex === null) els.grid.removeAttribute("tabindex");
-      else els.grid.setAttribute("tabindex", prevGridTabIndex);
-      if (prevGridLabel === null) els.grid.removeAttribute("aria-label");
-      else els.grid.setAttribute("aria-label", prevGridLabel);
-      for (const [cell, snap] of touchedCells) restoreCell(cell, snap);
-      touchedCells.clear();
+      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);
     };
-    boundDatePickers.set(els.grid, teardown);
+    boundTriggers.set(els.trigger, teardown);
     return teardown;
   }
+  return { isVisible, show, hide, content, setContent, bind };
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -2494,8 +2891,11 @@ function datePicker(options) {
   contentEditable,
   datePicker,
   fileUpload,
+  isWidgetKeyEvent,
   popover,
   select,
+  selectMenu,
   tabs,
-  tooltip
+  tooltip,
+  widgetKeyOwner
 });