@vertz/ui-primitives 0.2.14 → 0.2.16

package/dist/index.js

@@ -1,3675 +0,0 @@
-// src/accordion/accordion.ts
-import { signal } from "@vertz/ui";
-
-// src/utils/aria.ts
-import { onAnimationsComplete } from "@vertz/ui/internals";
-var hideGeneration = new WeakMap;
-function setExpanded(el, expanded) {
-  el.setAttribute("aria-expanded", String(expanded));
-}
-function setSelected(el, selected) {
-  el.setAttribute("aria-selected", String(selected));
-}
-function setHidden(el, hidden) {
-  el.setAttribute("aria-hidden", String(hidden));
-  el.style.display = hidden ? "none" : "";
-}
-function setHiddenAnimated(el, hidden) {
-  const gen = (hideGeneration.get(el) ?? 0) + 1;
-  hideGeneration.set(el, gen);
-  if (!hidden) {
-    el.setAttribute("aria-hidden", "false");
-    el.style.display = "";
-    return;
-  }
-  el.setAttribute("aria-hidden", "true");
-  onAnimationsComplete(el, () => {
-    if (hideGeneration.get(el) === gen) {
-      el.style.display = "none";
-    }
-  });
-}
-function setChecked(el, checked) {
-  el.setAttribute("aria-checked", String(checked));
-}
-function setDisabled(el, disabled) {
-  el.setAttribute("aria-disabled", String(disabled));
-}
-function setDataState(el, state) {
-  el.setAttribute("data-state", state);
-}
-function setLabelledBy(el, labelId) {
-  el.setAttribute("aria-labelledby", labelId);
-}
-function setDescribedBy(el, descriptionId) {
-  el.setAttribute("aria-describedby", descriptionId);
-}
-function setPressed(el, pressed) {
-  el.setAttribute("aria-pressed", String(pressed));
-}
-function setValueRange(el, now, min, max) {
-  el.setAttribute("aria-valuenow", String(now));
-  el.setAttribute("aria-valuemin", String(min));
-  el.setAttribute("aria-valuemax", String(max));
-}
-
-// src/utils/id.ts
-var counter = 0;
-function uniqueId(prefix = "vz") {
-  return `${prefix}-${++counter}`;
-}
-function linkedIds(prefix = "vz") {
-  const base = uniqueId(prefix);
-  return {
-    triggerId: `${base}-trigger`,
-    contentId: `${base}-content`
-  };
-}
-
-// src/utils/keyboard.ts
-var Keys = {
-  Enter: "Enter",
-  Space: " ",
-  Escape: "Escape",
-  ArrowUp: "ArrowUp",
-  ArrowDown: "ArrowDown",
-  ArrowLeft: "ArrowLeft",
-  ArrowRight: "ArrowRight",
-  Home: "Home",
-  End: "End",
-  Tab: "Tab"
-};
-function isKey(event, ...keys) {
-  return keys.includes(event.key);
-}
-function handleListNavigation(event, items, options = {}) {
-  const { orientation = "vertical", loop = true } = options;
-  if (items.length === 0)
-    return null;
-  const prevKey = orientation === "vertical" ? Keys.ArrowUp : Keys.ArrowLeft;
-  const nextKey = orientation === "vertical" ? Keys.ArrowDown : Keys.ArrowRight;
-  const currentIndex = items.indexOf(document.activeElement);
-  let nextIndex = -1;
-  if (isKey(event, prevKey)) {
-    event.preventDefault();
-    if (currentIndex <= 0) {
-      nextIndex = loop ? items.length - 1 : 0;
-    } else {
-      nextIndex = currentIndex - 1;
-    }
-  } else if (isKey(event, nextKey)) {
-    event.preventDefault();
-    if (currentIndex >= items.length - 1) {
-      nextIndex = loop ? 0 : items.length - 1;
-    } else {
-      nextIndex = currentIndex + 1;
-    }
-  } else if (isKey(event, Keys.Home)) {
-    event.preventDefault();
-    nextIndex = 0;
-  } else if (isKey(event, Keys.End)) {
-    event.preventDefault();
-    nextIndex = items.length - 1;
-  }
-  const target = items[nextIndex];
-  if (target) {
-    target.focus();
-    return target;
-  }
-  return null;
-}
-function handleActivation(event, handler) {
-  if (isKey(event, Keys.Enter, Keys.Space)) {
-    event.preventDefault();
-    handler();
-  }
-}
-
-// src/accordion/accordion.ts
-var Accordion = {
-  Root(options = {}) {
-    const { multiple = false, defaultValue = [], onValueChange } = options;
-    const state = { value: signal([...defaultValue]) };
-    const triggers = [];
-    const itemMap = new Map;
-    const root = document.createElement("div");
-    root.setAttribute("data-orientation", "vertical");
-    function updateItemState(val, open) {
-      const entry = itemMap.get(val);
-      if (!entry)
-        return;
-      const { trigger: t, content: c } = entry;
-      if (open) {
-        setHidden(c, false);
-      }
-      const height = c.scrollHeight;
-      c.style.setProperty("--accordion-content-height", `${height}px`);
-      setExpanded(t, open);
-      setDataState(t, open ? "open" : "closed");
-      setDataState(c, open ? "open" : "closed");
-      if (!open) {
-        setHiddenAnimated(c, true);
-      }
-    }
-    function toggleItem(value) {
-      const prev = [...state.value.peek()];
-      const current = [...prev];
-      const idx = current.indexOf(value);
-      if (idx >= 0) {
-        current.splice(idx, 1);
-      } else {
-        if (multiple) {
-          current.push(value);
-        } else {
-          current.length = 0;
-          current.push(value);
-        }
-      }
-      state.value.value = current;
-      onValueChange?.(current);
-      for (const v of prev) {
-        if (!current.includes(v)) {
-          updateItemState(v, false);
-        }
-      }
-      for (const v of current) {
-        if (!prev.includes(v)) {
-          updateItemState(v, true);
-        }
-      }
-    }
-    root.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
-        handleListNavigation(event, triggers, { orientation: "vertical" });
-      }
-    });
-    function Item(value) {
-      const baseId = uniqueId("accordion");
-      const triggerId = `${baseId}-trigger`;
-      const contentId = `${baseId}-content`;
-      const isOpen = state.value.peek().includes(value);
-      const item = document.createElement("div");
-      item.setAttribute("data-value", value);
-      const trigger = document.createElement("button");
-      trigger.setAttribute("type", "button");
-      trigger.id = triggerId;
-      trigger.setAttribute("aria-controls", contentId);
-      trigger.setAttribute("data-value", value);
-      setExpanded(trigger, isOpen);
-      setDataState(trigger, isOpen ? "open" : "closed");
-      const content = document.createElement("div");
-      content.setAttribute("role", "region");
-      content.id = contentId;
-      content.setAttribute("aria-labelledby", triggerId);
-      setHidden(content, !isOpen);
-      setDataState(content, isOpen ? "open" : "closed");
-      trigger.addEventListener("click", () => {
-        toggleItem(value);
-      });
-      itemMap.set(value, { trigger, content });
-      triggers.push(trigger);
-      item.appendChild(trigger);
-      item.appendChild(content);
-      root.appendChild(item);
-      if (isOpen) {
-        requestAnimationFrame(() => {
-          const height = content.scrollHeight;
-          content.style.setProperty("--accordion-content-height", `${height}px`);
-        });
-      }
-      return { item, trigger, content };
-    }
-    return { root, state, Item };
-  }
-};
-// src/alert-dialog/alert-dialog.tsx
-import { __element, __on } from "@vertz/ui/internals";
-import { signal as signal2 } from "@vertz/ui";
-
-// src/utils/focus.ts
-var FOCUSABLE_SELECTOR = [
-  "a[href]",
-  "button:not([disabled])",
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
-  '[tabindex]:not([tabindex="-1"])',
-  "[contenteditable]"
-].join(", ");
-function getFocusableElements(container) {
-  return Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR));
-}
-function trapFocus(container) {
-  function handleKeyDown(event) {
-    if (event.key !== "Tab")
-      return;
-    const focusable = getFocusableElements(container);
-    if (focusable.length === 0)
-      return;
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    if (!first || !last)
-      return;
-    if (event.shiftKey) {
-      if (document.activeElement === first) {
-        event.preventDefault();
-        last.focus();
-      }
-    } else {
-      if (document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
-      }
-    }
-  }
-  container.addEventListener("keydown", handleKeyDown);
-  return () => {
-    container.removeEventListener("keydown", handleKeyDown);
-  };
-}
-function focusFirst(container) {
-  const focusable = getFocusableElements(container);
-  if (focusable.length > 0) {
-    focusable[0]?.focus();
-  }
-}
-function saveFocus() {
-  const previously = document.activeElement;
-  return () => {
-    if (previously && typeof previously.focus === "function") {
-      previously.focus();
-    }
-  };
-}
-function setRovingTabindex(items, activeIndex) {
-  for (let i = 0;i < items.length; i++) {
-    items[i]?.setAttribute("tabindex", i === activeIndex ? "0" : "-1");
-  }
-}
-
-// src/alert-dialog/alert-dialog.tsx
-function AlertDialogRoot(options = {}) {
-  const { defaultOpen = false, onOpenChange, onAction } = options;
-  const ids = linkedIds("alertdialog");
-  const titleId = `${ids.contentId}-title`;
-  const descriptionId = `${ids.contentId}-description`;
-  const state = { open: signal2(defaultOpen) };
-  let restoreFocus = null;
-  let removeTrap = null;
-  function show() {
-    state.open.value = true;
-    setExpanded(trigger, true);
-    setHidden(overlay, false);
-    setHidden(content, false);
-    setDataState(trigger, "open");
-    setDataState(overlay, "open");
-    setDataState(content, "open");
-    restoreFocus = saveFocus();
-    removeTrap = trapFocus(content);
-    queueMicrotask(() => cancel.focus());
-    onOpenChange?.(true);
-  }
-  function hide() {
-    state.open.value = false;
-    setExpanded(trigger, false);
-    setDataState(trigger, "closed");
-    setDataState(overlay, "closed");
-    setDataState(content, "closed");
-    setHiddenAnimated(overlay, true);
-    setHiddenAnimated(content, true);
-    removeTrap?.();
-    removeTrap = null;
-    restoreFocus?.();
-    restoreFocus = null;
-    onOpenChange?.(false);
-  }
-  const trigger = (() => {
-    const __el0 = __element("button");
-    __el0.setAttribute("type", "button");
-    {
-      const __v = ids.triggerId;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("id", __v === true ? "" : __v);
-    }
-    {
-      const __v = ids.contentId;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "true" : "false";
-      if (__v != null && __v !== false)
-        __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "open" : "closed";
-      if (__v != null && __v !== false)
-        __el0.setAttribute("data-state", __v === true ? "" : __v);
-    }
-    __on(__el0, "click", () => {
-      if (!state.open.peek())
-        show();
-    });
-    return __el0;
-  })();
-  const overlay = (() => {
-    const __el1 = __element("div");
-    __el1.setAttribute("data-alertdialog-overlay", "");
-    {
-      const __v = defaultOpen ? "false" : "true";
-      if (__v != null && __v !== false)
-        __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "open" : "closed";
-      if (__v != null && __v !== false)
-        __el1.setAttribute("data-state", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "" : "display: none";
-      if (__v != null && __v !== false)
-        __el1.setAttribute("style", __v === true ? "" : __v);
-    }
-    return __el1;
-  })();
-  const content = (() => {
-    const __el2 = __element("div");
-    __el2.setAttribute("role", "alertdialog");
-    {
-      const __v = ids.contentId;
-      if (__v != null && __v !== false)
-        __el2.setAttribute("id", __v === true ? "" : __v);
-    }
-    __el2.setAttribute("aria-modal", "true");
-    {
-      const __v = titleId;
-      if (__v != null && __v !== false)
-        __el2.setAttribute("aria-labelledby", __v === true ? "" : __v);
-    }
-    {
-      const __v = descriptionId;
-      if (__v != null && __v !== false)
-        __el2.setAttribute("aria-describedby", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "false" : "true";
-      if (__v != null && __v !== false)
-        __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "open" : "closed";
-      if (__v != null && __v !== false)
-        __el2.setAttribute("data-state", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "" : "display: none";
-      if (__v != null && __v !== false)
-        __el2.setAttribute("style", __v === true ? "" : __v);
-    }
-    return __el2;
-  })();
-  const title = (() => {
-    const __el3 = __element("h2");
-    {
-      const __v = titleId;
-      if (__v != null && __v !== false)
-        __el3.setAttribute("id", __v === true ? "" : __v);
-    }
-    return __el3;
-  })();
-  const description = (() => {
-    const __el4 = __element("p");
-    {
-      const __v = descriptionId;
-      if (__v != null && __v !== false)
-        __el4.setAttribute("id", __v === true ? "" : __v);
-    }
-    return __el4;
-  })();
-  const cancel = (() => {
-    const __el5 = __element("button");
-    __el5.setAttribute("type", "button");
-    __on(__el5, "click", () => hide());
-    return __el5;
-  })();
-  const action = (() => {
-    const __el6 = __element("button");
-    __el6.setAttribute("type", "button");
-    __on(__el6, "click", () => {
-      onAction?.();
-      hide();
-    });
-    return __el6;
-  })();
-  if (defaultOpen) {
-    restoreFocus = saveFocus();
-    removeTrap = trapFocus(content);
-    queueMicrotask(() => cancel.focus());
-  }
-  return { trigger, overlay, content, title, description, cancel, action, state, show, hide };
-}
-var AlertDialog = {
-  Root: AlertDialogRoot
-};
-// src/badge/badge.tsx
-import { __element as __element2 } from "@vertz/ui/internals";
-function BadgeRoot(options = {}) {
-  const { variant = "default" } = options;
-  const badge = (() => {
-    const __el0 = __element2("span");
-    {
-      const __v = uniqueId("badge");
-      if (__v != null && __v !== false)
-        __el0.setAttribute("id", __v === true ? "" : __v);
-    }
-    __el0.setAttribute("data-slot", "badge");
-    {
-      const __v = variant;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("data-variant", __v === true ? "" : __v);
-    }
-    return __el0;
-  })();
-  return { badge };
-}
-var Badge = {
-  Root: BadgeRoot
-};
-// src/button/button.ts
-import { signal as signal3 } from "@vertz/ui";
-function createButtonRoot(state, options) {
-  const el = document.createElement("button");
-  el.setAttribute("type", "button");
-  el.setAttribute("role", "button");
-  setDataState(el, "idle");
-  if (options.disabled) {
-    el.disabled = true;
-    setDisabled(el, true);
-  }
-  el.addEventListener("click", () => {
-    if (state.disabled.peek())
-      return;
-    state.pressed.value = true;
-    setDataState(el, "pressed");
-    options.onPress?.();
-    queueMicrotask(() => {
-      state.pressed.value = false;
-      setDataState(el, "idle");
-    });
-  });
-  el.addEventListener("keydown", (event) => {
-    if (state.disabled.peek())
-      return;
-    handleActivation(event, () => {
-      el.click();
-    });
-  });
-  return el;
-}
-var Button = {
-  Root(options = {}) {
-    const state = {
-      disabled: signal3(options.disabled ?? false),
-      pressed: signal3(false)
-    };
-    const root = createButtonRoot(state, options);
-    return { root, state };
-  }
-};
-// src/calendar/calendar.ts
-import { signal as signal4 } from "@vertz/ui";
-var MONTH_NAMES = [
-  "January",
-  "February",
-  "March",
-  "April",
-  "May",
-  "June",
-  "July",
-  "August",
-  "September",
-  "October",
-  "November",
-  "December"
-];
-var DAY_NAMES = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
-function getDaysInMonth(year, month) {
-  return new Date(year, month + 1, 0).getDate();
-}
-function isSameDay(a, b) {
-  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-}
-function addDays(date, days) {
-  const result = new Date(date);
-  result.setDate(result.getDate() + days);
-  return result;
-}
-function addMonths(date, months) {
-  const result = new Date(date);
-  result.setMonth(result.getMonth() + months);
-  return result;
-}
-var Calendar = {
-  Root(options = {}) {
-    const now = new Date;
-    const defaultMonth = options.defaultMonth ?? now;
-    const weekStartsOn = options.weekStartsOn ?? 0;
-    const mode = options.mode ?? "single";
-    const state = {
-      value: signal4(options.defaultValue ?? null),
-      focusedDate: signal4(defaultMonth),
-      displayMonth: signal4(defaultMonth)
-    };
-    const root = document.createElement("div");
-    const header = document.createElement("div");
-    const title = document.createElement("div");
-    const prevButton = document.createElement("button");
-    prevButton.setAttribute("type", "button");
-    const nextButton = document.createElement("button");
-    nextButton.setAttribute("type", "button");
-    const grid = document.createElement("table");
-    grid.setAttribute("role", "grid");
-    function updateTitle() {
-      const month = state.displayMonth.peek();
-      title.textContent = `${MONTH_NAMES[month.getMonth()]} ${month.getFullYear()}`;
-    }
-    function isDateDisabled(date) {
-      if (options.disabled?.(date))
-        return true;
-      if (options.minDate && date < options.minDate && !isSameDay(date, options.minDate)) {
-        return true;
-      }
-      if (options.maxDate && date > options.maxDate && !isSameDay(date, options.maxDate)) {
-        return true;
-      }
-      return false;
-    }
-    function isSelected(date) {
-      const val = state.value.peek();
-      if (val === null)
-        return false;
-      if (val instanceof Date)
-        return isSameDay(val, date);
-      if (Array.isArray(val))
-        return val.some((d) => isSameDay(d, date));
-      if ("from" in val && "to" in val) {
-        return isSameDay(val.from, date) || isSameDay(val.to, date);
-      }
-      return false;
-    }
-    function isInRange(date) {
-      const val = state.value.peek();
-      if (val === null || !("from" in val))
-        return false;
-      const range = val;
-      return date > range.from && date < range.to;
-    }
-    function selectDate(date) {
-      if (isDateDisabled(date))
-        return;
-      if (mode === "single") {
-        state.value.value = date;
-      } else if (mode === "multiple") {
-        const current = state.value.peek() ?? [];
-        const existing = current.findIndex((d) => isSameDay(d, date));
-        if (existing >= 0) {
-          const next = [...current];
-          next.splice(existing, 1);
-          state.value.value = next;
-        } else {
-          state.value.value = [...current, date];
-        }
-      } else if (mode === "range") {
-        const current = state.value.peek();
-        if (!current || "to" in current && current.to) {
-          state.value.value = { from: date, to: date };
-        } else {
-          if (date < current.from) {
-            state.value.value = { from: date, to: current.from };
-          } else {
-            state.value.value = { from: current.from, to: date };
-          }
-        }
-      }
-      options.onValueChange?.(state.value.peek());
-    }
-    function buildGrid() {
-      grid.innerHTML = "";
-      const display = state.displayMonth.peek();
-      const year = display.getFullYear();
-      const month = display.getMonth();
-      const daysInMonth = getDaysInMonth(year, month);
-      const thead = document.createElement("thead");
-      const headerRow = document.createElement("tr");
-      for (let i = 0;i < 7; i++) {
-        const dayIndex = (weekStartsOn + i) % 7;
-        const th = document.createElement("th");
-        th.setAttribute("scope", "col");
-        th.textContent = DAY_NAMES[dayIndex] ?? "";
-        headerRow.appendChild(th);
-      }
-      thead.appendChild(headerRow);
-      grid.appendChild(thead);
-      const tbody = document.createElement("tbody");
-      const firstDay = new Date(year, month, 1);
-      const firstDayOfWeek = firstDay.getDay();
-      const offset = (firstDayOfWeek - weekStartsOn + 7) % 7;
-      const startDate = addDays(firstDay, -offset);
-      let currentDate = startDate;
-      const totalCells = offset + daysInMonth;
-      const totalRows = Math.ceil(totalCells / 7);
-      for (let row = 0;row < totalRows; row++) {
-        const tr = document.createElement("tr");
-        for (let col = 0;col < 7; col++) {
-          const td = document.createElement("td");
-          td.setAttribute("role", "gridcell");
-          const btn = document.createElement("button");
-          btn.setAttribute("type", "button");
-          const cellDate = new Date(currentDate);
-          btn.textContent = String(cellDate.getDate());
-          btn.setAttribute("data-date", cellDate.toISOString().split("T")[0] ?? "");
-          const isOutside = cellDate.getMonth() !== month;
-          if (isOutside) {
-            btn.setAttribute("data-outside-month", "true");
-          }
-          if (isSameDay(cellDate, now)) {
-            btn.setAttribute("data-today", "true");
-          }
-          if (isDateDisabled(cellDate)) {
-            btn.setAttribute("aria-disabled", "true");
-          }
-          if (isSelected(cellDate)) {
-            btn.setAttribute("aria-selected", "true");
-          }
-          if (mode === "range") {
-            const val = state.value.peek();
-            if (val && "from" in val) {
-              if (isSameDay(cellDate, val.from)) {
-                btn.setAttribute("data-range-start", "true");
-              }
-              if (isSameDay(cellDate, val.to)) {
-                btn.setAttribute("data-range-end", "true");
-              }
-              if (isInRange(cellDate)) {
-                btn.setAttribute("data-in-range", "true");
-              }
-            }
-          }
-          btn.addEventListener("click", () => {
-            selectDate(cellDate);
-            rebuildGrid();
-          });
-          td.appendChild(btn);
-          tr.appendChild(td);
-          currentDate = addDays(currentDate, 1);
-        }
-        tbody.appendChild(tr);
-      }
-      grid.appendChild(tbody);
-    }
-    function rebuildGrid() {
-      updateTitle();
-      buildGrid();
-    }
-    function navigateMonth(delta) {
-      state.displayMonth.value = addMonths(state.displayMonth.peek(), delta);
-      options.onMonthChange?.(state.displayMonth.peek());
-      rebuildGrid();
-    }
-    prevButton.addEventListener("click", () => navigateMonth(-1));
-    nextButton.addEventListener("click", () => navigateMonth(1));
-    grid.addEventListener("keydown", (event) => {
-      const active = document.activeElement;
-      if (!active || active.tagName !== "BUTTON")
-        return;
-      const dateStr = active.getAttribute("data-date");
-      if (!dateStr)
-        return;
-      const focused = new Date(dateStr + "T00:00:00");
-      let next = null;
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        next = addDays(focused, -1);
-      } else if (event.key === "ArrowRight") {
-        event.preventDefault();
-        next = addDays(focused, 1);
-      } else if (event.key === "ArrowUp") {
-        event.preventDefault();
-        next = addDays(focused, -7);
-      } else if (event.key === "ArrowDown") {
-        event.preventDefault();
-        next = addDays(focused, 7);
-      } else if (event.key === "Home") {
-        event.preventDefault();
-        const dayOfWeek = (focused.getDay() - weekStartsOn + 7) % 7;
-        next = addDays(focused, -dayOfWeek);
-      } else if (event.key === "End") {
-        event.preventDefault();
-        const dayOfWeek = (focused.getDay() - weekStartsOn + 7) % 7;
-        next = addDays(focused, 6 - dayOfWeek);
-      } else if (event.key === "PageUp") {
-        event.preventDefault();
-        next = event.shiftKey ? addMonths(focused, -12) : addMonths(focused, -1);
-      } else if (event.key === "PageDown") {
-        event.preventDefault();
-        next = event.shiftKey ? addMonths(focused, 12) : addMonths(focused, 1);
-      } else if (event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        selectDate(focused);
-        rebuildGrid();
-        return;
-      }
-      if (next) {
-        state.focusedDate.value = next;
-        if (next.getMonth() !== state.displayMonth.peek().getMonth() || next.getFullYear() !== state.displayMonth.peek().getFullYear()) {
-          state.displayMonth.value = new Date(next.getFullYear(), next.getMonth(), 1);
-          options.onMonthChange?.(state.displayMonth.peek());
-          rebuildGrid();
-        }
-        const dateKey = next.toISOString().split("T")[0];
-        const btn = grid.querySelector(`button[data-date="${dateKey}"]`);
-        btn?.focus();
-      }
-    });
-    updateTitle();
-    buildGrid();
-    root.appendChild(header);
-    root.appendChild(grid);
-    header.appendChild(prevButton);
-    header.appendChild(title);
-    header.appendChild(nextButton);
-    return { root, header, title, prevButton, nextButton, grid, state };
-  }
-};
-// src/carousel/carousel.ts
-import { signal as signal5 } from "@vertz/ui";
-var Carousel = {
-  Root(options = {}) {
-    const { orientation = "horizontal", loop = false, defaultIndex = 0, onSlideChange } = options;
-    const state = {
-      currentIndex: signal5(defaultIndex),
-      slideCount: signal5(0)
-    };
-    const slides = [];
-    const root = document.createElement("div");
-    root.setAttribute("role", "region");
-    root.setAttribute("aria-roledescription", "carousel");
-    root.setAttribute("data-orientation", orientation);
-    const viewport = document.createElement("div");
-    viewport.style.overflow = "hidden";
-    const prevButton = document.createElement("button");
-    prevButton.setAttribute("type", "button");
-    prevButton.setAttribute("aria-label", "Previous slide");
-    const nextButton = document.createElement("button");
-    nextButton.setAttribute("type", "button");
-    nextButton.setAttribute("aria-label", "Next slide");
-    function updateSlideVisibility() {
-      const current = state.currentIndex.peek();
-      for (let i = 0;i < slides.length; i++) {
-        const slide = slides[i];
-        if (!slide)
-          continue;
-        slide.setAttribute("aria-hidden", String(i !== current));
-        slide.setAttribute("aria-label", `Slide ${i + 1} of ${slides.length}`);
-        setDataState(slide, i === current ? "active" : "inactive");
-      }
-      if (!loop) {
-        prevButton.disabled = current <= 0;
-        nextButton.disabled = current >= slides.length - 1;
-      }
-      const translateProp = orientation === "horizontal" ? "translateX" : "translateY";
-      viewport.style.transform = `${translateProp}(-${current * 100}%)`;
-    }
-    function goTo(index) {
-      const total = slides.length;
-      if (total === 0)
-        return;
-      let next = index;
-      if (loop) {
-        next = (index % total + total) % total;
-      } else {
-        next = Math.max(0, Math.min(total - 1, index));
-      }
-      if (next === state.currentIndex.peek())
-        return;
-      state.currentIndex.value = next;
-      updateSlideVisibility();
-      onSlideChange?.(next);
-    }
-    function goNext() {
-      goTo(state.currentIndex.peek() + 1);
-    }
-    function goPrev() {
-      goTo(state.currentIndex.peek() - 1);
-    }
-    prevButton.addEventListener("click", goPrev);
-    nextButton.addEventListener("click", goNext);
-    root.addEventListener("keydown", (event) => {
-      const prevKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
-      const nextKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
-      if (isKey(event, prevKey)) {
-        event.preventDefault();
-        goPrev();
-      }
-      if (isKey(event, nextKey)) {
-        event.preventDefault();
-        goNext();
-      }
-    });
-    function Slide() {
-      const slide = document.createElement("div");
-      slide.setAttribute("role", "group");
-      slide.setAttribute("aria-roledescription", "slide");
-      slides.push(slide);
-      state.slideCount.value = slides.length;
-      viewport.appendChild(slide);
-      updateSlideVisibility();
-      return slide;
-    }
-    root.appendChild(viewport);
-    updateSlideVisibility();
-    return { root, viewport, prevButton, nextButton, state, Slide, goTo, goNext, goPrev };
-  }
-};
-// src/checkbox/checkbox.ts
-import { signal as signal6 } from "@vertz/ui";
-function dataStateFor(checked) {
-  if (checked === "mixed")
-    return "indeterminate";
-  return checked ? "checked" : "unchecked";
-}
-var Checkbox = {
-  Root(options = {}) {
-    const { defaultChecked = false, disabled = false, onCheckedChange } = options;
-    const state = {
-      checked: signal6(defaultChecked),
-      disabled: signal6(disabled)
-    };
-    const root = document.createElement("button");
-    root.setAttribute("type", "button");
-    root.setAttribute("role", "checkbox");
-    root.id = uniqueId("checkbox");
-    setChecked(root, defaultChecked);
-    setDataState(root, dataStateFor(defaultChecked));
-    if (disabled) {
-      root.disabled = true;
-      root.setAttribute("aria-disabled", "true");
-    }
-    function toggle() {
-      if (state.disabled.peek())
-        return;
-      const current = state.checked.peek();
-      const next = current === "mixed" ? true : !current;
-      state.checked.value = next;
-      setChecked(root, next);
-      setDataState(root, dataStateFor(next));
-      onCheckedChange?.(next);
-    }
-    root.addEventListener("click", toggle);
-    root.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Space)) {
-        event.preventDefault();
-        toggle();
-      }
-    });
-    return { root, state };
-  }
-};
-// src/collapsible/collapsible.ts
-import { signal as signal7 } from "@vertz/ui";
-var Collapsible = {
-  Root(options = {}) {
-    const { defaultOpen = false, disabled = false, onOpenChange } = options;
-    const ids = linkedIds("collapsible");
-    const state = {
-      open: signal7(defaultOpen),
-      disabled: signal7(disabled)
-    };
-    const root = document.createElement("div");
-    const trigger = document.createElement("button");
-    trigger.setAttribute("type", "button");
-    trigger.id = ids.triggerId;
-    trigger.setAttribute("aria-controls", ids.contentId);
-    setExpanded(trigger, defaultOpen);
-    setDataState(trigger, defaultOpen ? "open" : "closed");
-    if (disabled) {
-      trigger.disabled = true;
-      trigger.setAttribute("aria-disabled", "true");
-    }
-    const content = document.createElement("div");
-    content.id = ids.contentId;
-    setHidden(content, !defaultOpen);
-    setDataState(content, defaultOpen ? "open" : "closed");
-    function toggle() {
-      if (state.disabled.peek())
-        return;
-      const next = !state.open.peek();
-      state.open.value = next;
-      if (next) {
-        setHidden(content, false);
-      }
-      const height = content.scrollHeight;
-      content.style.setProperty("--collapsible-content-height", `${height}px`);
-      setExpanded(trigger, next);
-      setDataState(trigger, next ? "open" : "closed");
-      setDataState(content, next ? "open" : "closed");
-      if (!next) {
-        setHiddenAnimated(content, true);
-      }
-      onOpenChange?.(next);
-    }
-    trigger.addEventListener("click", toggle);
-    root.appendChild(trigger);
-    root.appendChild(content);
-    return { root, trigger, content, state };
-  }
-};
-// src/combobox/combobox.ts
-import { signal as signal8 } from "@vertz/ui";
-var Combobox = {
-  Root(options = {}) {
-    const { defaultValue = "", onValueChange, onInputChange } = options;
-    const ids = linkedIds("combobox");
-    const state = {
-      open: signal8(false),
-      value: signal8(defaultValue),
-      inputValue: signal8(defaultValue),
-      activeIndex: signal8(-1)
-    };
-    const optionElements = [];
-    const input = document.createElement("input");
-    input.setAttribute("type", "text");
-    input.setAttribute("role", "combobox");
-    input.setAttribute("aria-autocomplete", "list");
-    input.setAttribute("aria-controls", ids.contentId);
-    input.setAttribute("aria-haspopup", "listbox");
-    input.id = ids.triggerId;
-    input.value = defaultValue;
-    setExpanded(input, false);
-    const listbox = document.createElement("div");
-    listbox.setAttribute("role", "listbox");
-    listbox.id = ids.contentId;
-    setHidden(listbox, true);
-    setDataState(listbox, "closed");
-    function open() {
-      state.open.value = true;
-      setExpanded(input, true);
-      setHidden(listbox, false);
-      setDataState(listbox, "open");
-    }
-    function close() {
-      state.open.value = false;
-      state.activeIndex.value = -1;
-      setExpanded(input, false);
-      setDataState(listbox, "closed");
-      setHiddenAnimated(listbox, true);
-      updateActiveDescendant(-1);
-    }
-    function selectOption(value) {
-      state.value.value = value;
-      state.inputValue.value = value;
-      input.value = value;
-      for (const opt of optionElements) {
-        const isActive = opt.getAttribute("data-value") === value;
-        setSelected(opt, isActive);
-        setDataState(opt, isActive ? "active" : "inactive");
-      }
-      onValueChange?.(value);
-      close();
-      input.focus();
-    }
-    function updateActiveDescendant(index) {
-      const opt = optionElements[index];
-      if (index >= 0 && opt) {
-        input.setAttribute("aria-activedescendant", opt.id);
-        for (let i = 0;i < optionElements.length; i++) {
-          const el = optionElements[i];
-          if (el)
-            setDataState(el, i === index ? "active" : "inactive");
-        }
-      } else {
-        input.removeAttribute("aria-activedescendant");
-      }
-    }
-    input.addEventListener("input", () => {
-      state.inputValue.value = input.value;
-      onInputChange?.(input.value);
-      if (!state.open.peek())
-        open();
-    });
-    input.addEventListener("focus", () => {
-      if (!state.open.peek() && input.value.length > 0)
-        open();
-    });
-    input.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        close();
-        return;
-      }
-      if (isKey(event, Keys.ArrowDown)) {
-        event.preventDefault();
-        if (!state.open.peek()) {
-          open();
-        }
-        const next = Math.min(state.activeIndex.peek() + 1, optionElements.length - 1);
-        state.activeIndex.value = next;
-        updateActiveDescendant(next);
-        return;
-      }
-      if (isKey(event, Keys.ArrowUp)) {
-        event.preventDefault();
-        const prev = Math.max(state.activeIndex.peek() - 1, 0);
-        state.activeIndex.value = prev;
-        updateActiveDescendant(prev);
-        return;
-      }
-      if (isKey(event, Keys.Enter)) {
-        event.preventDefault();
-        const idx = state.activeIndex.peek();
-        if (idx >= 0 && idx < optionElements.length) {
-          const val = optionElements[idx]?.getAttribute("data-value");
-          if (val != null)
-            selectOption(val);
-        }
-        return;
-      }
-    });
-    function Option(value, label) {
-      const opt = document.createElement("div");
-      const optId = `${ids.contentId}-opt-${optionElements.length}`;
-      opt.setAttribute("role", "option");
-      opt.id = optId;
-      opt.setAttribute("data-value", value);
-      opt.textContent = label ?? value;
-      const isSelected = value === defaultValue;
-      setSelected(opt, isSelected);
-      setDataState(opt, isSelected ? "active" : "inactive");
-      opt.addEventListener("click", () => {
-        selectOption(value);
-      });
-      optionElements.push(opt);
-      listbox.appendChild(opt);
-      return opt;
-    }
-    return { input, listbox, state, Option };
-  }
-};
-// src/command/command.ts
-import { signal as signal9 } from "@vertz/ui";
-var Command = {
-  Root(options = {}) {
-    const { filter: customFilter, onSelect, onInputChange, placeholder } = options;
-    const listId = uniqueId("command-list");
-    const state = {
-      inputValue: signal9(""),
-      activeIndex: signal9(0)
-    };
-    const allItems = [];
-    const groups = new Map;
-    const root = document.createElement("div");
-    const input = document.createElement("input");
-    input.setAttribute("type", "text");
-    input.setAttribute("role", "combobox");
-    input.setAttribute("aria-autocomplete", "list");
-    input.setAttribute("aria-expanded", "true");
-    input.setAttribute("aria-controls", listId);
-    if (placeholder)
-      input.placeholder = placeholder;
-    const list = document.createElement("div");
-    list.setAttribute("role", "listbox");
-    list.id = listId;
-    const empty = document.createElement("div");
-    setHidden(empty, true);
-    const defaultFilter = (value, search) => {
-      return value.toLowerCase().includes(search.toLowerCase());
-    };
-    const filterFn = customFilter ?? defaultFilter;
-    function getVisibleItems() {
-      return allItems.filter((item) => item.getAttribute("aria-hidden") !== "true");
-    }
-    function updateActiveItem() {
-      const visible = getVisibleItems();
-      const activeIdx = state.activeIndex.peek();
-      for (const item of allItems) {
-        item.setAttribute("aria-selected", "false");
-      }
-      if (visible.length > 0 && activeIdx >= 0 && activeIdx < visible.length) {
-        visible[activeIdx]?.setAttribute("aria-selected", "true");
-      }
-    }
-    function runFilter() {
-      const search = state.inputValue.peek();
-      let visibleCount = 0;
-      for (const item of allItems) {
-        const value = item.getAttribute("data-value") ?? "";
-        const text = item.textContent ?? "";
-        const keywords = item.getAttribute("data-keywords") ?? "";
-        const searchable = `${value} ${text} ${keywords}`;
-        const matches = search === "" || filterFn(searchable, search);
-        setHidden(item, !matches);
-        if (matches)
-          visibleCount++;
-      }
-      for (const [groupEl, group] of groups) {
-        const hasVisible = group.items.some((item) => item.getAttribute("aria-hidden") !== "true");
-        setHidden(group.heading, !hasVisible);
-        if (!hasVisible) {
-          groupEl.style.display = "none";
-        } else {
-          groupEl.style.display = "";
-        }
-      }
-      setHidden(empty, visibleCount > 0);
-      state.activeIndex.value = 0;
-      updateActiveItem();
-    }
-    input.addEventListener("input", () => {
-      state.inputValue.value = input.value;
-      onInputChange?.(input.value);
-      runFilter();
-    });
-    input.addEventListener("keydown", (event) => {
-      const visible = getVisibleItems();
-      if (isKey(event, Keys.ArrowDown)) {
-        event.preventDefault();
-        const next = Math.min(state.activeIndex.peek() + 1, visible.length - 1);
-        state.activeIndex.value = next;
-        updateActiveItem();
-        return;
-      }
-      if (isKey(event, Keys.ArrowUp)) {
-        event.preventDefault();
-        const prev = Math.max(state.activeIndex.peek() - 1, 0);
-        state.activeIndex.value = prev;
-        updateActiveItem();
-        return;
-      }
-      if (isKey(event, Keys.Enter)) {
-        event.preventDefault();
-        const active = visible[state.activeIndex.peek()];
-        if (active) {
-          const val = active.getAttribute("data-value");
-          if (val !== null) {
-            onSelect?.(val);
-          }
-        }
-        return;
-      }
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        input.value = "";
-        state.inputValue.value = "";
-        onInputChange?.("");
-        runFilter();
-      }
-    });
-    function createItem(value, label, keywords, parent) {
-      const item = document.createElement("div");
-      item.setAttribute("role", "option");
-      item.setAttribute("data-value", value);
-      item.setAttribute("aria-selected", "false");
-      item.textContent = label ?? value;
-      if (keywords && keywords.length > 0) {
-        item.setAttribute("data-keywords", keywords.join(" "));
-      }
-      item.addEventListener("click", () => {
-        onSelect?.(value);
-      });
-      allItems.push(item);
-      (parent ?? list).appendChild(item);
-      updateActiveItem();
-      return item;
-    }
-    function Item(value, label, keywords) {
-      return createItem(value, label, keywords);
-    }
-    function Group(label) {
-      const headingId = uniqueId("command-group");
-      const el = document.createElement("div");
-      el.setAttribute("role", "group");
-      el.setAttribute("aria-labelledby", headingId);
-      const heading = document.createElement("div");
-      heading.id = headingId;
-      heading.textContent = label;
-      el.appendChild(heading);
-      const groupItems = [];
-      groups.set(el, { heading, items: groupItems });
-      list.appendChild(el);
-      return {
-        el,
-        Item: (value, itemLabel, keywords) => {
-          const item = createItem(value, itemLabel, keywords, el);
-          groupItems.push(item);
-          return item;
-        }
-      };
-    }
-    function Separator() {
-      const hr = document.createElement("hr");
-      hr.setAttribute("role", "separator");
-      list.appendChild(hr);
-      return hr;
-    }
-    root.appendChild(input);
-    root.appendChild(list);
-    root.appendChild(empty);
-    return { root, input, list, empty, state, Item, Group, Separator };
-  }
-};
-// src/context-menu/context-menu.ts
-import { signal as signal10 } from "@vertz/ui";
-
-// src/utils/dismiss.ts
-function createDismiss(options) {
-  const { onDismiss, insideElements, escapeKey = true, clickOutside = true } = options;
-  function handlePointerDown(event) {
-    const target = event.target;
-    const isInside = insideElements.some((el) => el.contains(target));
-    if (!isInside) {
-      onDismiss();
-    }
-  }
-  function handleKeyDown(event) {
-    if (event.key === "Escape") {
-      onDismiss();
-    }
-  }
-  if (clickOutside) {
-    document.addEventListener("pointerdown", handlePointerDown, true);
-  }
-  if (escapeKey) {
-    document.addEventListener("keydown", handleKeyDown);
-  }
-  return function cleanup() {
-    if (clickOutside) {
-      document.removeEventListener("pointerdown", handlePointerDown, true);
-    }
-    if (escapeKey) {
-      document.removeEventListener("keydown", handleKeyDown);
-    }
-  };
-}
-
-// src/utils/floating.ts
-import { autoUpdate, computePosition, flip, offset, shift } from "@floating-ui/dom";
-function createFloatingPosition(reference, floating, options = {}) {
-  const {
-    placement = "bottom-start",
-    strategy = "fixed",
-    offset: offsetValue = 4,
-    flip: enableFlip = true,
-    shift: enableShift = true,
-    middleware: extraMiddleware = [],
-    matchReferenceWidth = false,
-    portal = false
-  } = options;
-  if (portal && floating.parentElement !== document.body) {
-    document.body.appendChild(floating);
-  }
-  const mw = [];
-  mw.push(offset(offsetValue));
-  if (enableFlip)
-    mw.push(flip());
-  if (enableShift)
-    mw.push(shift());
-  if (matchReferenceWidth) {
-    mw.push({
-      name: "matchReferenceWidth",
-      fn({ rects }) {
-        floating.style.minWidth = `${rects.reference.width}px`;
-        return {};
-      }
-    });
-  }
-  mw.push(...extraMiddleware);
-  function updatePosition() {
-    computePosition(reference, floating, {
-      placement,
-      strategy,
-      middleware: mw
-    }).then((result) => {
-      floating.style.position = result.strategy;
-      floating.style.left = `${result.x}px`;
-      floating.style.top = `${result.y}px`;
-      const [side = "bottom", align = "center"] = result.placement.split("-");
-      floating.setAttribute("data-side", side);
-      floating.setAttribute("data-align", align);
-    });
-  }
-  const cleanupAutoUpdate = autoUpdate(reference, floating, updatePosition, {
-    animationFrame: true
-  });
-  return {
-    cleanup: cleanupAutoUpdate,
-    update() {
-      updatePosition();
-      return Promise.resolve();
-    }
-  };
-}
-function virtualElement(x, y) {
-  return {
-    getBoundingClientRect() {
-      return {
-        x,
-        y,
-        top: y,
-        left: x,
-        bottom: y,
-        right: x,
-        width: 0,
-        height: 0,
-        toJSON() {
-          return this;
-        }
-      };
-    }
-  };
-}
-
-// src/context-menu/context-menu.ts
-var ContextMenu = {
-  Root(options = {}) {
-    const { onSelect, positioning } = options;
-    const state = {
-      open: signal10(false),
-      activeIndex: signal10(-1)
-    };
-    const items = [];
-    let floatingCleanup = null;
-    let dismissCleanup = null;
-    const trigger = document.createElement("div");
-    const contentId = uniqueId("ctx-menu");
-    const content = document.createElement("div");
-    content.setAttribute("role", "menu");
-    content.id = contentId;
-    content.style.position = "fixed";
-    setHidden(content, true);
-    setDataState(content, "closed");
-    function handleClickOutside(event) {
-      const target = event.target;
-      if (!trigger.contains(target) && !content.contains(target)) {
-        close();
-      }
-    }
-    function open(x, y) {
-      state.open.value = true;
-      setHidden(content, false);
-      setDataState(content, "open");
-      if (positioning) {
-        const result = createFloatingPosition(virtualElement(x, y), content, {
-          strategy: "fixed",
-          ...positioning
-        });
-        floatingCleanup = result.cleanup;
-        dismissCleanup = createDismiss({
-          onDismiss: close,
-          insideElements: [trigger, content],
-          escapeKey: false
-        });
-      } else {
-        content.style.left = `${x}px`;
-        content.style.top = `${y}px`;
-        document.addEventListener("mousedown", handleClickOutside);
-      }
-      state.activeIndex.value = 0;
-      updateActiveItem(0);
-      items[0]?.focus();
-    }
-    function close() {
-      state.open.value = false;
-      setDataState(content, "closed");
-      setHiddenAnimated(content, true);
-      if (positioning) {
-        floatingCleanup?.();
-        floatingCleanup = null;
-        dismissCleanup?.();
-        dismissCleanup = null;
-      } else {
-        document.removeEventListener("mousedown", handleClickOutside);
-      }
-    }
-    function updateActiveItem(index) {
-      for (let i = 0;i < items.length; i++) {
-        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
-      }
-    }
-    trigger.addEventListener("contextmenu", (event) => {
-      event.preventDefault();
-      if (state.open.peek()) {
-        close();
-      }
-      open(event.clientX, event.clientY);
-    });
-    content.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        close();
-        return;
-      }
-      if (isKey(event, Keys.Enter, Keys.Space)) {
-        event.preventDefault();
-        const active = items[state.activeIndex.peek()];
-        if (active) {
-          const val = active.getAttribute("data-value");
-          if (val !== null) {
-            onSelect?.(val);
-            close();
-          }
-        }
-        return;
-      }
-      const result = handleListNavigation(event, items, { orientation: "vertical" });
-      if (result) {
-        const idx = items.indexOf(result);
-        if (idx >= 0) {
-          state.activeIndex.value = idx;
-          updateActiveItem(idx);
-        }
-        return;
-      }
-      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        const char = event.key.toLowerCase();
-        const match = items.find((item) => item.textContent?.toLowerCase().startsWith(char));
-        if (match) {
-          const idx = items.indexOf(match);
-          state.activeIndex.value = idx;
-          updateActiveItem(idx);
-          match.focus();
-        }
-      }
-    });
-    function createItem(value, label, parent) {
-      const item = document.createElement("div");
-      item.setAttribute("role", "menuitem");
-      item.setAttribute("data-value", value);
-      item.setAttribute("tabindex", "-1");
-      item.textContent = label ?? value;
-      item.addEventListener("click", () => {
-        onSelect?.(value);
-        close();
-      });
-      items.push(item);
-      (parent ?? content).appendChild(item);
-      return item;
-    }
-    function Item(value, label) {
-      return createItem(value, label);
-    }
-    function Group(label) {
-      const el = document.createElement("div");
-      el.setAttribute("role", "group");
-      el.setAttribute("aria-label", label);
-      content.appendChild(el);
-      return {
-        el,
-        Item: (value, itemLabel) => createItem(value, itemLabel, el)
-      };
-    }
-    function Separator() {
-      const hr = document.createElement("hr");
-      hr.setAttribute("role", "separator");
-      content.appendChild(hr);
-      return hr;
-    }
-    function Label(text) {
-      const el = document.createElement("div");
-      el.setAttribute("role", "none");
-      el.textContent = text;
-      content.appendChild(el);
-      return el;
-    }
-    return { trigger, content, state, Item, Group, Separator, Label };
-  }
-};
-// src/date-picker/date-picker.ts
-import { signal as signal12 } from "@vertz/ui";
-
-// src/popover/popover.ts
-import { signal as signal11 } from "@vertz/ui";
-var Popover = {
-  Root(options = {}) {
-    const { defaultOpen = false, onOpenChange, positioning } = options;
-    const ids = linkedIds("popover");
-    const state = { open: signal11(defaultOpen) };
-    let restoreFocus = null;
-    let floatingCleanup = null;
-    let dismissCleanup = null;
-    const trigger = document.createElement("button");
-    trigger.setAttribute("type", "button");
-    trigger.id = ids.triggerId;
-    trigger.setAttribute("aria-controls", ids.contentId);
-    trigger.setAttribute("aria-haspopup", "dialog");
-    setExpanded(trigger, defaultOpen);
-    setDataState(trigger, defaultOpen ? "open" : "closed");
-    const content = document.createElement("div");
-    content.setAttribute("role", "dialog");
-    content.id = ids.contentId;
-    setHidden(content, !defaultOpen);
-    setDataState(content, defaultOpen ? "open" : "closed");
-    function open() {
-      state.open.value = true;
-      setExpanded(trigger, true);
-      setHidden(content, false);
-      setDataState(trigger, "open");
-      setDataState(content, "open");
-      restoreFocus = saveFocus();
-      queueMicrotask(() => focusFirst(content));
-      if (positioning) {
-        const result = createFloatingPosition(trigger, content, positioning);
-        floatingCleanup = result.cleanup;
-        dismissCleanup = createDismiss({
-          onDismiss: close,
-          insideElements: [trigger, content],
-          escapeKey: false
-        });
-      }
-      onOpenChange?.(true);
-    }
-    function close() {
-      state.open.value = false;
-      setExpanded(trigger, false);
-      setDataState(trigger, "closed");
-      setDataState(content, "closed");
-      setHiddenAnimated(content, true);
-      floatingCleanup?.();
-      floatingCleanup = null;
-      dismissCleanup?.();
-      dismissCleanup = null;
-      restoreFocus?.();
-      restoreFocus = null;
-      onOpenChange?.(false);
-    }
-    trigger.addEventListener("click", () => {
-      if (state.open.peek()) {
-        close();
-      } else {
-        open();
-      }
-    });
-    content.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        close();
-      }
-    });
-    return { trigger, content, state };
-  }
-};
-
-// src/date-picker/date-picker.ts
-function defaultFormatDate(date) {
-  return date.toLocaleDateString();
-}
-function formatRangeDisplay(value, fmt) {
-  return `${fmt(value.from)} – ${fmt(value.to)}`;
-}
-var DatePicker = {
-  Root(options = {}) {
-    const {
-      mode = "single",
-      defaultValue = null,
-      minDate,
-      maxDate,
-      disabled,
-      formatDate = defaultFormatDate,
-      placeholder = "Pick a date",
-      onValueChange,
-      onOpenChange
-    } = options;
-    const defaultMonth = options.defaultMonth ?? (defaultValue instanceof Date ? defaultValue : defaultValue && ("from" in defaultValue) ? defaultValue.from : new Date);
-    const calendarMode = mode === "range" ? "range" : "single";
-    const calendarDefaultValue = defaultValue instanceof Date ? defaultValue : defaultValue && ("from" in defaultValue) ? defaultValue : undefined;
-    const popover = Popover.Root({
-      onOpenChange(open) {
-        state.open.value = open;
-        onOpenChange?.(open);
-      }
-    });
-    const calendarResult = Calendar.Root({
-      mode: calendarMode,
-      defaultValue: calendarDefaultValue,
-      defaultMonth,
-      minDate,
-      maxDate,
-      disabled,
-      onValueChange(value) {
-        if (mode === "single" && value instanceof Date) {
-          state.value.value = value;
-          updateTriggerText();
-          onValueChange?.(value);
-          hide();
-        } else if (mode === "range" && value && "from" in value) {
-          const range = value;
-          state.value.value = range;
-          updateTriggerText();
-          onValueChange?.(range);
-          if (range.from && range.to && range.from.getTime() !== range.to.getTime()) {
-            hide();
-          }
-        }
-      }
-    });
-    popover.content.appendChild(calendarResult.root);
-    const state = {
-      open: signal12(false),
-      value: signal12(defaultValue),
-      displayMonth: calendarResult.state.displayMonth
-    };
-    function updateTriggerText() {
-      const val = state.value.peek();
-      if (val === null) {
-        popover.trigger.textContent = placeholder;
-        popover.trigger.setAttribute("data-placeholder", "true");
-      } else if (val instanceof Date) {
-        popover.trigger.textContent = formatDate(val);
-        popover.trigger.removeAttribute("data-placeholder");
-      } else if ("from" in val) {
-        popover.trigger.textContent = formatRangeDisplay(val, formatDate);
-        popover.trigger.removeAttribute("data-placeholder");
-      }
-    }
-    function show() {
-      popover.trigger.click();
-    }
-    function hide() {
-      if (state.open.peek()) {
-        popover.trigger.click();
-      }
-    }
-    updateTriggerText();
-    return {
-      trigger: popover.trigger,
-      content: popover.content,
-      calendar: {
-        root: calendarResult.root,
-        header: calendarResult.header,
-        title: calendarResult.title,
-        prevButton: calendarResult.prevButton,
-        nextButton: calendarResult.nextButton,
-        grid: calendarResult.grid
-      },
-      state,
-      show,
-      hide
-    };
-  }
-};
-// src/dialog/dialog.ts
-import { signal as signal13 } from "@vertz/ui";
-var Dialog = {
-  Root(options = {}) {
-    const { modal = true, defaultOpen = false, onOpenChange } = options;
-    const ids = linkedIds("dialog");
-    const titleId = `${ids.contentId}-title`;
-    const state = { open: signal13(defaultOpen) };
-    let restoreFocus = null;
-    let removeTrap = null;
-    const trigger = document.createElement("button");
-    trigger.setAttribute("type", "button");
-    trigger.id = ids.triggerId;
-    trigger.setAttribute("aria-controls", ids.contentId);
-    setExpanded(trigger, defaultOpen);
-    setDataState(trigger, defaultOpen ? "open" : "closed");
-    const overlay = document.createElement("div");
-    overlay.setAttribute("data-dialog-overlay", "");
-    setHidden(overlay, !defaultOpen);
-    setDataState(overlay, defaultOpen ? "open" : "closed");
-    const content = document.createElement("div");
-    content.setAttribute("role", "dialog");
-    content.id = ids.contentId;
-    if (modal) {
-      content.setAttribute("aria-modal", "true");
-    }
-    setLabelledBy(content, titleId);
-    setHidden(content, !defaultOpen);
-    setDataState(content, defaultOpen ? "open" : "closed");
-    const title = document.createElement("h2");
-    title.id = titleId;
-    const close = document.createElement("button");
-    close.setAttribute("type", "button");
-    close.setAttribute("aria-label", "Close");
-    function openDialog() {
-      state.open.value = true;
-      setExpanded(trigger, true);
-      setHidden(overlay, false);
-      setHidden(content, false);
-      setDataState(trigger, "open");
-      setDataState(overlay, "open");
-      setDataState(content, "open");
-      restoreFocus = saveFocus();
-      if (modal) {
-        removeTrap = trapFocus(content);
-      }
-      queueMicrotask(() => focusFirst(content));
-      onOpenChange?.(true);
-    }
-    function closeDialog() {
-      state.open.value = false;
-      setExpanded(trigger, false);
-      setDataState(trigger, "closed");
-      setDataState(overlay, "closed");
-      setDataState(content, "closed");
-      setHiddenAnimated(overlay, true);
-      setHiddenAnimated(content, true);
-      removeTrap?.();
-      removeTrap = null;
-      restoreFocus?.();
-      restoreFocus = null;
-      onOpenChange?.(false);
-    }
-    trigger.addEventListener("click", () => {
-      if (state.open.peek()) {
-        closeDialog();
-      } else {
-        openDialog();
-      }
-    });
-    close.addEventListener("click", () => {
-      closeDialog();
-    });
-    overlay.addEventListener("click", () => {
-      closeDialog();
-    });
-    content.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        event.stopPropagation();
-        closeDialog();
-      }
-    });
-    return { trigger, overlay, content, title, close, state, show: openDialog, hide: closeDialog };
-  }
-};
-// src/menu/menu.ts
-import { signal as signal14 } from "@vertz/ui";
-var Menu = {
-  Root(options = {}) {
-    const { onSelect, positioning } = options;
-    const ids = linkedIds("menu");
-    const state = {
-      open: signal14(false),
-      activeIndex: signal14(-1)
-    };
-    const items = [];
-    let floatingCleanup = null;
-    let dismissCleanup = null;
-    const trigger = document.createElement("button");
-    trigger.setAttribute("type", "button");
-    trigger.id = ids.triggerId;
-    trigger.setAttribute("aria-controls", ids.contentId);
-    trigger.setAttribute("aria-haspopup", "menu");
-    setExpanded(trigger, false);
-    setDataState(trigger, "closed");
-    const content = document.createElement("div");
-    content.setAttribute("role", "menu");
-    content.setAttribute("tabindex", "-1");
-    content.id = ids.contentId;
-    setHidden(content, true);
-    setDataState(content, "closed");
-    function handleClickOutside(event) {
-      const target = event.target;
-      if (!trigger.contains(target) && !content.contains(target)) {
-        close();
-      }
-    }
-    function open(activateFirst = false) {
-      state.open.value = true;
-      setExpanded(trigger, true);
-      setHidden(content, false);
-      setDataState(trigger, "open");
-      setDataState(content, "open");
-      if (positioning) {
-        const ref = positioning.referenceElement ?? trigger;
-        const result = createFloatingPosition(ref, content, positioning);
-        floatingCleanup = result.cleanup;
-        dismissCleanup = createDismiss({
-          onDismiss: close,
-          insideElements: [ref, trigger, content],
-          escapeKey: false
-        });
-      } else {
-        document.addEventListener("mousedown", handleClickOutside);
-      }
-      if (activateFirst && items.length > 0) {
-        state.activeIndex.value = 0;
-        updateActiveItem(0);
-        items[0]?.focus();
-      } else {
-        state.activeIndex.value = -1;
-        updateActiveItem(-1);
-        content.focus();
-      }
-    }
-    function close() {
-      state.open.value = false;
-      setExpanded(trigger, false);
-      setDataState(trigger, "closed");
-      setDataState(content, "closed");
-      setHiddenAnimated(content, true);
-      if (positioning) {
-        floatingCleanup?.();
-        floatingCleanup = null;
-        dismissCleanup?.();
-        dismissCleanup = null;
-      } else {
-        document.removeEventListener("mousedown", handleClickOutside);
-      }
-      trigger.focus();
-    }
-    function updateActiveItem(index) {
-      for (let i = 0;i < items.length; i++) {
-        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
-      }
-    }
-    trigger.addEventListener("click", () => {
-      if (state.open.peek()) {
-        close();
-      } else {
-        open();
-      }
-    });
-    trigger.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
-        event.preventDefault();
-        if (!state.open.peek())
-          open(true);
-      }
-    });
-    content.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        close();
-        return;
-      }
-      if (isKey(event, Keys.Enter, Keys.Space)) {
-        event.preventDefault();
-        const active = items[state.activeIndex.peek()];
-        if (active) {
-          const val = active.getAttribute("data-value");
-          if (val !== null) {
-            onSelect?.(val);
-            close();
-          }
-        }
-        return;
-      }
-      if (state.activeIndex.peek() === -1) {
-        if (isKey(event, Keys.ArrowDown)) {
-          event.preventDefault();
-          state.activeIndex.value = 0;
-          updateActiveItem(0);
-          items[0]?.focus();
-          return;
-        }
-        if (isKey(event, Keys.ArrowUp)) {
-          event.preventDefault();
-          const last = items.length - 1;
-          state.activeIndex.value = last;
-          updateActiveItem(last);
-          items[last]?.focus();
-          return;
-        }
-      }
-      const result = handleListNavigation(event, items, { orientation: "vertical" });
-      if (result) {
-        const idx = items.indexOf(result);
-        if (idx >= 0) {
-          state.activeIndex.value = idx;
-          updateActiveItem(idx);
-        }
-        return;
-      }
-      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        const char = event.key.toLowerCase();
-        const match = items.find((item) => item.textContent?.toLowerCase().startsWith(char));
-        if (match) {
-          const idx = items.indexOf(match);
-          state.activeIndex.value = idx;
-          updateActiveItem(idx);
-          match.focus();
-        }
-      }
-    });
-    function createItem(value, label, parent) {
-      const item = document.createElement("div");
-      item.setAttribute("role", "menuitem");
-      item.setAttribute("data-value", value);
-      item.setAttribute("tabindex", "-1");
-      item.textContent = label ?? value;
-      item.addEventListener("click", () => {
-        onSelect?.(value);
-        close();
-      });
-      items.push(item);
-      (parent ?? content).appendChild(item);
-      return item;
-    }
-    function Item(value, label) {
-      return createItem(value, label);
-    }
-    function Group(label) {
-      const el = document.createElement("div");
-      el.setAttribute("role", "group");
-      el.setAttribute("aria-label", label);
-      content.appendChild(el);
-      return {
-        el,
-        Item: (value, itemLabel) => createItem(value, itemLabel, el)
-      };
-    }
-    function Separator() {
-      const hr = document.createElement("hr");
-      hr.setAttribute("role", "separator");
-      content.appendChild(hr);
-      return hr;
-    }
-    function Label(text) {
-      const el = document.createElement("div");
-      el.setAttribute("role", "none");
-      el.textContent = text;
-      content.appendChild(el);
-      return el;
-    }
-    return { trigger, content, state, Item, Group, Separator, Label };
-  }
-};
-
-// src/dropdown-menu/dropdown-menu.ts
-var DropdownMenu = {
-  Root(options = {}) {
-    const { positioning, ...rest } = options;
-    return Menu.Root({
-      ...rest,
-      positioning: {
-        placement: "bottom-start",
-        ...positioning
-      }
-    });
-  }
-};
-// src/hover-card/hover-card.ts
-import { signal as signal15 } from "@vertz/ui";
-var HoverCard = {
-  Root(options = {}) {
-    const { openDelay = 700, closeDelay = 300, onOpenChange, positioning } = options;
-    const contentId = uniqueId("hovercard");
-    const state = { open: signal15(false) };
-    let openTimeout = null;
-    let closeTimeout = null;
-    let floatingCleanup = null;
-    const trigger = document.createElement("span");
-    trigger.setAttribute("aria-haspopup", "dialog");
-    trigger.setAttribute("aria-expanded", "false");
-    const content = document.createElement("div");
-    content.setAttribute("role", "dialog");
-    content.id = contentId;
-    setHidden(content, true);
-    setDataState(content, "closed");
-    function cancelTimers() {
-      if (openTimeout) {
-        clearTimeout(openTimeout);
-        openTimeout = null;
-      }
-      if (closeTimeout) {
-        clearTimeout(closeTimeout);
-        closeTimeout = null;
-      }
-    }
-    function show() {
-      cancelTimers();
-      if (state.open.peek())
-        return;
-      openTimeout = setTimeout(() => {
-        state.open.value = true;
-        setExpanded(trigger, true);
-        setHidden(content, false);
-        setDataState(content, "open");
-        if (positioning) {
-          const effectivePlacement = positioning.placement ?? "bottom";
-          const result = createFloatingPosition(trigger, content, {
-            ...positioning,
-            placement: effectivePlacement
-          });
-          floatingCleanup = result.cleanup;
-        }
-        onOpenChange?.(true);
-        openTimeout = null;
-      }, openDelay);
-    }
-    function hide() {
-      cancelTimers();
-      if (!state.open.peek())
-        return;
-      closeTimeout = setTimeout(() => {
-        state.open.value = false;
-        setExpanded(trigger, false);
-        setDataState(content, "closed");
-        setHiddenAnimated(content, true);
-        floatingCleanup?.();
-        floatingCleanup = null;
-        onOpenChange?.(false);
-        closeTimeout = null;
-      }, closeDelay);
-    }
-    trigger.addEventListener("mouseenter", show);
-    trigger.addEventListener("mouseleave", hide);
-    trigger.addEventListener("focus", () => {
-      cancelTimers();
-      state.open.value = true;
-      setExpanded(trigger, true);
-      setHidden(content, false);
-      setDataState(content, "open");
-      if (positioning) {
-        floatingCleanup?.();
-        const effectivePlacement = positioning.placement ?? "bottom";
-        const result = createFloatingPosition(trigger, content, {
-          ...positioning,
-          placement: effectivePlacement
-        });
-        floatingCleanup = result.cleanup;
-      }
-      onOpenChange?.(true);
-    });
-    trigger.addEventListener("blur", (event) => {
-      const related = event.relatedTarget;
-      if (related && (trigger.contains(related) || content.contains(related)))
-        return;
-      hide();
-    });
-    content.addEventListener("mouseenter", () => {
-      if (closeTimeout) {
-        clearTimeout(closeTimeout);
-        closeTimeout = null;
-      }
-    });
-    content.addEventListener("mouseleave", hide);
-    content.addEventListener("focusin", () => {
-      if (closeTimeout) {
-        clearTimeout(closeTimeout);
-        closeTimeout = null;
-      }
-    });
-    content.addEventListener("focusout", (event) => {
-      const related = event.relatedTarget;
-      if (related && (trigger.contains(related) || content.contains(related)))
-        return;
-      hide();
-    });
-    function hideImmediate() {
-      cancelTimers();
-      state.open.value = false;
-      setExpanded(trigger, false);
-      setDataState(content, "closed");
-      setHiddenAnimated(content, true);
-      floatingCleanup?.();
-      floatingCleanup = null;
-      onOpenChange?.(false);
-    }
-    content.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        hideImmediate();
-        trigger.focus();
-      }
-    });
-    trigger.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape) && state.open.peek()) {
-        hideImmediate();
-      }
-    });
-    return { trigger, content, state };
-  }
-};
-// src/menubar/menubar.ts
-import { signal as signal16 } from "@vertz/ui";
-var Menubar = {
-  Root(options = {}) {
-    const { onSelect, positioning } = options;
-    const state = { activeMenu: signal16(null) };
-    const triggers = [];
-    const menus = new Map;
-    let floatingCleanup = null;
-    let dismissCleanup = null;
-    const root = document.createElement("div");
-    root.setAttribute("role", "menubar");
-    function closeAll() {
-      for (const [, menu] of menus) {
-        setExpanded(menu.trigger, false);
-        setDataState(menu.trigger, "closed");
-        setDataState(menu.content, "closed");
-        setHiddenAnimated(menu.content, true);
-      }
-      state.activeMenu.value = null;
-      if (positioning) {
-        floatingCleanup?.();
-        floatingCleanup = null;
-        dismissCleanup?.();
-        dismissCleanup = null;
-      } else {
-        document.removeEventListener("mousedown", handleClickOutside);
-      }
-    }
-    function openMenu(value) {
-      const current = state.activeMenu.peek();
-      if (current && current !== value) {
-        const prev = menus.get(current);
-        if (prev) {
-          setExpanded(prev.trigger, false);
-          setDataState(prev.trigger, "closed");
-          setDataState(prev.content, "closed");
-          setHiddenAnimated(prev.content, true);
-        }
-        if (positioning) {
-          floatingCleanup?.();
-          floatingCleanup = null;
-        }
-      }
-      const menu = menus.get(value);
-      if (!menu)
-        return;
-      state.activeMenu.value = value;
-      setExpanded(menu.trigger, true);
-      setHidden(menu.content, false);
-      setDataState(menu.trigger, "open");
-      setDataState(menu.content, "open");
-      if (positioning) {
-        const result = createFloatingPosition(menu.trigger, menu.content, positioning);
-        floatingCleanup = result.cleanup;
-        if (!dismissCleanup) {
-          dismissCleanup = createDismiss({
-            onDismiss: closeAll,
-            insideElements: [root],
-            escapeKey: false
-          });
-        }
-      } else {
-        document.addEventListener("mousedown", handleClickOutside);
-      }
-      const firstItem = menu.items[0];
-      if (firstItem) {
-        firstItem.setAttribute("tabindex", "0");
-        firstItem.focus();
-      }
-    }
-    function handleClickOutside(event) {
-      const target = event.target;
-      if (!root.contains(target)) {
-        closeAll();
-      }
-    }
-    root.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
-        const focused = document.activeElement;
-        const triggerIndex = triggers.indexOf(focused);
-        if (triggerIndex >= 0) {
-          const result = handleListNavigation(event, triggers, { orientation: "horizontal" });
-          if (result && state.activeMenu.peek()) {
-            const newTrigger = result;
-            const menuValue = newTrigger.getAttribute("data-value");
-            if (menuValue)
-              openMenu(menuValue);
-          }
-        }
-      }
-    });
-    function Menu2(value, label) {
-      const ids = linkedIds("menubar-menu");
-      const items = [];
-      const trigger = document.createElement("button");
-      trigger.setAttribute("type", "button");
-      trigger.setAttribute("role", "menuitem");
-      trigger.id = ids.triggerId;
-      trigger.setAttribute("aria-controls", ids.contentId);
-      trigger.setAttribute("aria-haspopup", "menu");
-      trigger.setAttribute("data-value", value);
-      trigger.textContent = label ?? value;
-      setExpanded(trigger, false);
-      setDataState(trigger, "closed");
-      setRovingTabindex(triggers.concat(trigger), triggers.length);
-      const content = document.createElement("div");
-      content.setAttribute("role", "menu");
-      content.id = ids.contentId;
-      setHidden(content, true);
-      setDataState(content, "closed");
-      trigger.addEventListener("click", () => {
-        if (state.activeMenu.peek() === value) {
-          closeAll();
-        } else {
-          openMenu(value);
-        }
-      });
-      trigger.addEventListener("keydown", (event) => {
-        if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
-          event.preventDefault();
-          openMenu(value);
-        }
-      });
-      content.addEventListener("keydown", (event) => {
-        if (isKey(event, Keys.Escape)) {
-          event.preventDefault();
-          event.stopPropagation();
-          closeAll();
-          trigger.focus();
-          return;
-        }
-        if (isKey(event, Keys.Enter, Keys.Space)) {
-          event.preventDefault();
-          const active = document.activeElement;
-          const activeItem = items.find((item) => item === active);
-          if (activeItem) {
-            const val = activeItem.getAttribute("data-value");
-            if (val !== null) {
-              onSelect?.(val);
-              closeAll();
-              trigger.focus();
-            }
-          }
-          return;
-        }
-        if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight)) {
-          event.preventDefault();
-          const triggerIdx = triggers.indexOf(trigger);
-          let nextIdx;
-          if (isKey(event, Keys.ArrowRight)) {
-            nextIdx = (triggerIdx + 1) % triggers.length;
-          } else {
-            nextIdx = (triggerIdx - 1 + triggers.length) % triggers.length;
-          }
-          const nextTrigger = triggers[nextIdx];
-          if (nextTrigger) {
-            nextTrigger.focus();
-            const nextValue = nextTrigger.getAttribute("data-value");
-            if (nextValue)
-              openMenu(nextValue);
-          }
-          return;
-        }
-        handleListNavigation(event, items, { orientation: "vertical" });
-      });
-      function createItem(val, itemLabel, parent) {
-        const item = document.createElement("div");
-        item.setAttribute("role", "menuitem");
-        item.setAttribute("data-value", val);
-        item.setAttribute("tabindex", "-1");
-        item.textContent = itemLabel ?? val;
-        item.addEventListener("click", () => {
-          onSelect?.(val);
-          closeAll();
-          trigger.focus();
-        });
-        items.push(item);
-        (parent ?? content).appendChild(item);
-        return item;
-      }
-      function Item(val, itemLabel) {
-        return createItem(val, itemLabel);
-      }
-      function Group(groupLabel) {
-        const el = document.createElement("div");
-        el.setAttribute("role", "group");
-        el.setAttribute("aria-label", groupLabel);
-        content.appendChild(el);
-        return {
-          el,
-          Item: (val, l) => createItem(val, l, el)
-        };
-      }
-      function Separator() {
-        const hr = document.createElement("hr");
-        hr.setAttribute("role", "separator");
-        content.appendChild(hr);
-        return hr;
-      }
-      triggers.push(trigger);
-      setRovingTabindex(triggers, 0);
-      menus.set(value, { trigger, content, items });
-      root.appendChild(trigger);
-      return { trigger, content, Item, Group, Separator };
-    }
-    return { root, state, Menu: Menu2 };
-  }
-};
-// src/navigation-menu/navigation-menu.ts
-import { signal as signal17 } from "@vertz/ui";
-var NavigationMenu = {
-  Root(options = {}) {
-    const { orientation = "horizontal", delayOpen = 200, delayClose = 300 } = options;
-    const state = { activeItem: signal17(null) };
-    const triggers = [];
-    const items = new Map;
-    let openTimeout = null;
-    let closeTimeout = null;
-    const root = document.createElement("nav");
-    const list = document.createElement("div");
-    const viewport = document.createElement("div");
-    function cancelTimers() {
-      if (openTimeout) {
-        clearTimeout(openTimeout);
-        openTimeout = null;
-      }
-      if (closeTimeout) {
-        clearTimeout(closeTimeout);
-        closeTimeout = null;
-      }
-    }
-    function openItem(value) {
-      cancelTimers();
-      const current = state.activeItem.peek();
-      if (current && current !== value) {
-        const prev = items.get(current);
-        if (prev) {
-          setExpanded(prev.trigger, false);
-          setDataState(prev.trigger, "closed");
-          setDataState(prev.content, "closed");
-          setHiddenAnimated(prev.content, true);
-        }
-      }
-      const item = items.get(value);
-      if (!item)
-        return;
-      state.activeItem.value = value;
-      setExpanded(item.trigger, true);
-      setHidden(item.content, false);
-      setDataState(item.trigger, "open");
-      setDataState(item.content, "open");
-    }
-    function closeAll() {
-      cancelTimers();
-      const current = state.activeItem.peek();
-      if (current) {
-        const item = items.get(current);
-        if (item) {
-          setExpanded(item.trigger, false);
-          setDataState(item.trigger, "closed");
-          setDataState(item.content, "closed");
-          setHiddenAnimated(item.content, true);
-        }
-      }
-      state.activeItem.value = null;
-    }
-    function Item(value, label) {
-      const ids = linkedIds("nav-menu");
-      const trigger = document.createElement("button");
-      trigger.setAttribute("type", "button");
-      trigger.id = ids.triggerId;
-      trigger.setAttribute("aria-controls", ids.contentId);
-      trigger.setAttribute("data-value", value);
-      trigger.textContent = label ?? value;
-      setExpanded(trigger, false);
-      setDataState(trigger, "closed");
-      const content = document.createElement("div");
-      content.id = ids.contentId;
-      setHidden(content, true);
-      setDataState(content, "closed");
-      trigger.addEventListener("click", () => {
-        if (state.activeItem.peek() === value) {
-          closeAll();
-        } else {
-          openItem(value);
-        }
-      });
-      trigger.addEventListener("mouseenter", () => {
-        cancelTimers();
-        openTimeout = setTimeout(() => {
-          openItem(value);
-          openTimeout = null;
-        }, delayOpen);
-      });
-      trigger.addEventListener("mouseleave", () => {
-        cancelTimers();
-        closeTimeout = setTimeout(() => {
-          closeAll();
-          closeTimeout = null;
-        }, delayClose);
-      });
-      content.addEventListener("mouseenter", () => {
-        cancelTimers();
-      });
-      content.addEventListener("mouseleave", () => {
-        cancelTimers();
-        closeTimeout = setTimeout(() => {
-          closeAll();
-          closeTimeout = null;
-        }, delayClose);
-      });
-      trigger.addEventListener("keydown", (event) => {
-        if (isKey(event, Keys.Enter, Keys.Space)) {
-          event.preventDefault();
-          openItem(value);
-          queueMicrotask(() => focusFirst(content));
-        }
-        if (isKey(event, Keys.Escape)) {
-          event.preventDefault();
-          closeAll();
-        }
-      });
-      content.addEventListener("keydown", (event) => {
-        if (isKey(event, Keys.Escape)) {
-          event.preventDefault();
-          event.stopPropagation();
-          closeAll();
-          trigger.focus();
-        }
-      });
-      triggers.push(trigger);
-      setRovingTabindex(triggers, 0);
-      items.set(value, { trigger, content });
-      list.appendChild(trigger);
-      viewport.appendChild(content);
-      return { trigger, content };
-    }
-    function Link(href, label) {
-      const a = document.createElement("a");
-      a.href = href;
-      a.textContent = label;
-      list.appendChild(a);
-      return a;
-    }
-    list.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.Home, Keys.End)) {
-        handleListNavigation(event, triggers, {
-          orientation: orientation === "horizontal" ? "horizontal" : "vertical"
-        });
-      }
-    });
-    root.appendChild(list);
-    root.appendChild(viewport);
-    return { root, list, viewport, state, Item, Link };
-  }
-};
-// src/progress/progress.ts
-import { signal as signal18 } from "@vertz/ui";
-var Progress = {
-  Root(options = {}) {
-    const { defaultValue = 0, min = 0, max = 100 } = options;
-    const state = { value: signal18(defaultValue) };
-    const root = document.createElement("div");
-    root.setAttribute("role", "progressbar");
-    root.id = uniqueId("progress");
-    setValueRange(root, defaultValue, min, max);
-    const pct = (defaultValue - min) / (max - min) * 100;
-    if (pct >= 100) {
-      setDataState(root, "complete");
-    } else if (pct > 0) {
-      setDataState(root, "loading");
-    } else {
-      setDataState(root, "idle");
-    }
-    const indicator = document.createElement("div");
-    indicator.setAttribute("data-part", "indicator");
-    indicator.style.width = `${pct}%`;
-    root.appendChild(indicator);
-    function setValue(val) {
-      const clamped = Math.min(max, Math.max(min, val));
-      state.value.value = clamped;
-      setValueRange(root, clamped, min, max);
-      const p = (clamped - min) / (max - min) * 100;
-      indicator.style.width = `${p}%`;
-      if (p >= 100) {
-        setDataState(root, "complete");
-      } else if (p > 0) {
-        setDataState(root, "loading");
-      } else {
-        setDataState(root, "idle");
-      }
-    }
-    return { root, indicator, state, setValue };
-  }
-};
-// src/radio/radio.ts
-import { signal as signal19 } from "@vertz/ui";
-var Radio = {
-  Root(options = {}) {
-    const { defaultValue = "", onValueChange } = options;
-    const state = { value: signal19(defaultValue) };
-    const items = [];
-    const itemValues = [];
-    const root = document.createElement("div");
-    root.setAttribute("role", "radiogroup");
-    root.id = uniqueId("radiogroup");
-    function selectItem(value) {
-      state.value.value = value;
-      for (let i = 0;i < items.length; i++) {
-        const item = items[i];
-        if (!item)
-          continue;
-        const isActive = itemValues[i] === value;
-        setChecked(item, isActive);
-        setDataState(item, isActive ? "checked" : "unchecked");
-      }
-      setRovingTabindex(items, itemValues.indexOf(value));
-      onValueChange?.(value);
-    }
-    root.addEventListener("keydown", (event) => {
-      const result = handleListNavigation(event, items, { orientation: "vertical" });
-      if (result) {
-        const idx = items.indexOf(result);
-        if (idx >= 0) {
-          const val = itemValues[idx];
-          if (val !== undefined)
-            selectItem(val);
-        }
-      }
-    });
-    function Item(value, label) {
-      const item = document.createElement("div");
-      item.setAttribute("role", "radio");
-      item.id = uniqueId("radio");
-      item.setAttribute("data-value", value);
-      item.textContent = label ?? value;
-      const isActive = value === state.value.peek();
-      setChecked(item, isActive);
-      setDataState(item, isActive ? "checked" : "unchecked");
-      item.addEventListener("click", () => {
-        selectItem(value);
-        item.focus();
-      });
-      items.push(item);
-      itemValues.push(value);
-      root.appendChild(item);
-      setRovingTabindex(items, itemValues.indexOf(state.value.peek()));
-      return item;
-    }
-    return { root, state, Item };
-  }
-};
-// src/resizable-panel/resizable-panel.ts
-import { signal as signal20 } from "@vertz/ui";
-var ResizablePanel = {
-  Root(options = {}) {
-    const { orientation = "horizontal", onResize } = options;
-    const state = { sizes: signal20([]) };
-    const panels = [];
-    const handles = [];
-    const root = document.createElement("div");
-    root.style.display = "flex";
-    root.style.flexDirection = orientation === "horizontal" ? "row" : "column";
-    root.setAttribute("data-orientation", orientation);
-    function updateSizes(newSizes) {
-      state.sizes.value = [...newSizes];
-      for (let i = 0;i < panels.length; i++) {
-        const panel = panels[i];
-        if (!panel)
-          continue;
-        const size = newSizes[i] ?? 0;
-        panel.el.style.flex = `0 0 ${size}%`;
-      }
-      for (let i = 0;i < handles.length; i++) {
-        const handle = handles[i];
-        const leftPanel = panels[i];
-        if (handle && leftPanel) {
-          const size = newSizes[i] ?? 0;
-          setValueRange(handle, Math.round(size), Math.round(leftPanel.minSize), Math.round(leftPanel.maxSize));
-        }
-      }
-      onResize?.(newSizes);
-    }
-    function Panel(panelOptions = {}) {
-      const { defaultSize, minSize = 0, maxSize = 100 } = panelOptions;
-      const el = document.createElement("div");
-      el.setAttribute("data-panel", "");
-      panels.push({ el, minSize, maxSize });
-      const sizes = state.sizes.peek();
-      if (defaultSize != null) {
-        sizes.push(defaultSize);
-      } else {
-        const equalSize = 100 / panels.length;
-        sizes.length = 0;
-        for (let i = 0;i < panels.length; i++) {
-          sizes.push(equalSize);
-        }
-      }
-      updateSizes(sizes);
-      root.appendChild(el);
-      return el;
-    }
-    function Handle() {
-      const handleIndex = handles.length;
-      const handle = document.createElement("div");
-      handle.setAttribute("role", "separator");
-      handle.setAttribute("tabindex", "0");
-      handle.setAttribute("data-orientation", orientation);
-      setDataState(handle, "idle");
-      handles.push(handle);
-      const STEP = 5;
-      handle.addEventListener("keydown", (event) => {
-        const sizes = [...state.sizes.peek()];
-        const leftIdx = handleIndex;
-        const rightIdx = handleIndex + 1;
-        const leftPanel = panels[leftIdx];
-        const rightPanel = panels[rightIdx];
-        if (!leftPanel || !rightPanel)
-          return;
-        let leftSize = sizes[leftIdx] ?? 0;
-        let rightSize = sizes[rightIdx] ?? 0;
-        const growKey = orientation === "horizontal" ? Keys.ArrowRight : Keys.ArrowDown;
-        const shrinkKey = orientation === "horizontal" ? Keys.ArrowLeft : Keys.ArrowUp;
-        if (isKey(event, growKey)) {
-          event.preventDefault();
-          const delta = Math.min(STEP, rightSize - rightPanel.minSize, leftPanel.maxSize - leftSize);
-          leftSize += delta;
-          rightSize -= delta;
-        } else if (isKey(event, shrinkKey)) {
-          event.preventDefault();
-          const delta = Math.min(STEP, leftSize - leftPanel.minSize, rightPanel.maxSize - rightSize);
-          leftSize -= delta;
-          rightSize += delta;
-        } else if (isKey(event, Keys.Home)) {
-          event.preventDefault();
-          const delta = leftSize - leftPanel.minSize;
-          leftSize -= delta;
-          rightSize += delta;
-        } else if (isKey(event, Keys.End)) {
-          event.preventDefault();
-          const delta = rightSize - rightPanel.minSize;
-          leftSize += delta;
-          rightSize -= delta;
-        } else {
-          return;
-        }
-        sizes[leftIdx] = leftSize;
-        sizes[rightIdx] = rightSize;
-        updateSizes(sizes);
-      });
-      handle.addEventListener("pointerdown", (event) => {
-        event.preventDefault();
-        handle.setPointerCapture(event.pointerId);
-        setDataState(handle, "dragging");
-        const startPos = orientation === "horizontal" ? event.clientX : event.clientY;
-        const rootSize = orientation === "horizontal" ? root.offsetWidth : root.offsetHeight;
-        const startSizes = [...state.sizes.peek()];
-        function onMove(e) {
-          const currentPos = orientation === "horizontal" ? e.clientX : e.clientY;
-          const delta = (currentPos - startPos) / rootSize * 100;
-          const sizes = [...startSizes];
-          const leftIdx = handleIndex;
-          const rightIdx = handleIndex + 1;
-          const leftPanel = panels[leftIdx];
-          const rightPanel = panels[rightIdx];
-          if (!leftPanel || !rightPanel)
-            return;
-          let newLeft = (startSizes[leftIdx] ?? 0) + delta;
-          let newRight = (startSizes[rightIdx] ?? 0) - delta;
-          newLeft = Math.max(leftPanel.minSize, Math.min(leftPanel.maxSize, newLeft));
-          newRight = Math.max(rightPanel.minSize, Math.min(rightPanel.maxSize, newRight));
-          sizes[leftIdx] = newLeft;
-          sizes[rightIdx] = newRight;
-          updateSizes(sizes);
-        }
-        function onUp(e) {
-          handle.releasePointerCapture(e.pointerId);
-          setDataState(handle, "idle");
-          handle.removeEventListener("pointermove", onMove);
-          handle.removeEventListener("pointerup", onUp);
-        }
-        handle.addEventListener("pointermove", onMove);
-        handle.addEventListener("pointerup", onUp);
-      });
-      root.appendChild(handle);
-      return handle;
-    }
-    return { root, state, Panel, Handle };
-  }
-};
-// src/scroll-area/scroll-area.ts
-import { signal as signal21 } from "@vertz/ui";
-var ScrollArea = {
-  Root(options = {}) {
-    const { orientation = "vertical" } = options;
-    const state = {
-      scrollTop: signal21(0),
-      scrollLeft: signal21(0)
-    };
-    const root = document.createElement("div");
-    root.style.position = "relative";
-    root.style.overflow = "hidden";
-    const viewport = document.createElement("div");
-    viewport.style.overflow = "scroll";
-    viewport.style.scrollbarWidth = "none";
-    const content = document.createElement("div");
-    const scrollbarY = document.createElement("div");
-    scrollbarY.setAttribute("aria-hidden", "true");
-    scrollbarY.setAttribute("data-orientation", "vertical");
-    const thumbY = document.createElement("div");
-    scrollbarY.appendChild(thumbY);
-    const scrollbarX = document.createElement("div");
-    scrollbarX.setAttribute("aria-hidden", "true");
-    scrollbarX.setAttribute("data-orientation", "horizontal");
-    const thumbX = document.createElement("div");
-    scrollbarX.appendChild(thumbX);
-    function syncThumbY() {
-      const { scrollTop, scrollHeight, clientHeight } = viewport;
-      if (scrollHeight <= clientHeight) {
-        thumbY.style.height = "0";
-        return;
-      }
-      const ratio = clientHeight / scrollHeight;
-      thumbY.style.height = `${ratio * 100}%`;
-      const scrollRatio = scrollTop / (scrollHeight - clientHeight);
-      thumbY.style.transform = `translateY(${scrollRatio * (1 / ratio - 1) * 100}%)`;
-      state.scrollTop.value = scrollTop;
-    }
-    function syncThumbX() {
-      const { scrollLeft, scrollWidth, clientWidth } = viewport;
-      if (scrollWidth <= clientWidth) {
-        thumbX.style.width = "0";
-        return;
-      }
-      const ratio = clientWidth / scrollWidth;
-      thumbX.style.width = `${ratio * 100}%`;
-      const scrollRatio = scrollLeft / (scrollWidth - clientWidth);
-      thumbX.style.transform = `translateX(${scrollRatio * (1 / ratio - 1) * 100}%)`;
-      state.scrollLeft.value = scrollLeft;
-    }
-    viewport.addEventListener("scroll", () => {
-      if (orientation === "vertical" || orientation === "both")
-        syncThumbY();
-      if (orientation === "horizontal" || orientation === "both")
-        syncThumbX();
-    });
-    let isDraggingY = false;
-    let startY = 0;
-    let startScrollTop = 0;
-    thumbY.addEventListener("pointerdown", (e) => {
-      isDraggingY = true;
-      startY = e.clientY;
-      startScrollTop = viewport.scrollTop;
-      thumbY.setPointerCapture(e.pointerId);
-      e.preventDefault();
-    });
-    thumbY.addEventListener("pointermove", (e) => {
-      if (!isDraggingY)
-        return;
-      const delta = e.clientY - startY;
-      const scrollbarHeight = scrollbarY.clientHeight;
-      const scrollRange = viewport.scrollHeight - viewport.clientHeight;
-      if (scrollbarHeight > 0) {
-        viewport.scrollTop = startScrollTop + delta / scrollbarHeight * scrollRange;
-      }
-    });
-    thumbY.addEventListener("pointerup", (e) => {
-      isDraggingY = false;
-      thumbY.releasePointerCapture(e.pointerId);
-    });
-    let isDraggingX = false;
-    let startX = 0;
-    let startScrollLeft = 0;
-    thumbX.addEventListener("pointerdown", (e) => {
-      isDraggingX = true;
-      startX = e.clientX;
-      startScrollLeft = viewport.scrollLeft;
-      thumbX.setPointerCapture(e.pointerId);
-      e.preventDefault();
-    });
-    thumbX.addEventListener("pointermove", (e) => {
-      if (!isDraggingX)
-        return;
-      const delta = e.clientX - startX;
-      const scrollbarWidth = scrollbarX.clientWidth;
-      const scrollRange = viewport.scrollWidth - viewport.clientWidth;
-      if (scrollbarWidth > 0) {
-        viewport.scrollLeft = startScrollLeft + delta / scrollbarWidth * scrollRange;
-      }
-    });
-    thumbX.addEventListener("pointerup", (e) => {
-      isDraggingX = false;
-      thumbX.releasePointerCapture(e.pointerId);
-    });
-    function update() {
-      syncThumbY();
-      syncThumbX();
-    }
-    viewport.appendChild(content);
-    root.appendChild(viewport);
-    if (orientation === "vertical" || orientation === "both")
-      root.appendChild(scrollbarY);
-    if (orientation === "horizontal" || orientation === "both")
-      root.appendChild(scrollbarX);
-    return { root, viewport, content, scrollbarY, thumbY, scrollbarX, thumbX, state, update };
-  }
-};
-// src/select/select.ts
-import { signal as signal22 } from "@vertz/ui";
-var Select = {
-  Root(options = {}) {
-    const { defaultValue = "", placeholder = "", onValueChange, positioning } = options;
-    const ids = linkedIds("select");
-    const state = {
-      open: signal22(false),
-      value: signal22(defaultValue),
-      activeIndex: signal22(-1)
-    };
-    const items = [];
-    let floatingCleanup = null;
-    let dismissCleanup = null;
-    const trigger = document.createElement("button");
-    trigger.setAttribute("type", "button");
-    trigger.setAttribute("role", "combobox");
-    trigger.id = ids.triggerId;
-    trigger.setAttribute("aria-controls", ids.contentId);
-    trigger.setAttribute("aria-haspopup", "listbox");
-    setExpanded(trigger, false);
-    setDataState(trigger, "closed");
-    const triggerText = document.createElement("span");
-    triggerText.setAttribute("data-part", "value");
-    triggerText.textContent = defaultValue || placeholder;
-    trigger.appendChild(triggerText);
-    const content = document.createElement("div");
-    content.setAttribute("role", "listbox");
-    content.setAttribute("tabindex", "-1");
-    content.id = ids.contentId;
-    setHidden(content, true);
-    setDataState(content, "closed");
-    function open() {
-      state.open.value = true;
-      setExpanded(trigger, true);
-      setHidden(content, false);
-      setDataState(trigger, "open");
-      setDataState(content, "open");
-      if (positioning) {
-        const result = createFloatingPosition(trigger, content, positioning);
-        floatingCleanup = result.cleanup;
-        dismissCleanup = createDismiss({
-          onDismiss: close,
-          insideElements: [trigger, content],
-          escapeKey: false
-        });
-      } else {
-        const rect = trigger.getBoundingClientRect();
-        const side = window.innerHeight - rect.bottom >= rect.top ? "bottom" : "top";
-        content.setAttribute("data-side", side);
-      }
-      const selectedIdx = items.findIndex((item) => item.getAttribute("data-value") === state.value.peek());
-      if (selectedIdx >= 0) {
-        state.activeIndex.value = selectedIdx;
-        updateActiveItem(selectedIdx);
-        items[selectedIdx]?.focus();
-      } else {
-        state.activeIndex.value = -1;
-        updateActiveItem(-1);
-        content.focus();
-      }
-    }
-    function close() {
-      state.open.value = false;
-      setExpanded(trigger, false);
-      setDataState(trigger, "closed");
-      setDataState(content, "closed");
-      setHiddenAnimated(content, true);
-      floatingCleanup?.();
-      floatingCleanup = null;
-      dismissCleanup?.();
-      dismissCleanup = null;
-      trigger.focus();
-    }
-    function selectItem(value) {
-      state.value.value = value;
-      for (const item of items) {
-        const isActive = item.getAttribute("data-value") === value;
-        setSelected(item, isActive);
-        setDataState(item, isActive ? "active" : "inactive");
-        if (isActive) {
-          triggerText.textContent = item.textContent ?? value;
-        }
-      }
-      onValueChange?.(value);
-      close();
-    }
-    function updateActiveItem(index) {
-      for (let i = 0;i < items.length; i++) {
-        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
-      }
-    }
-    trigger.addEventListener("click", () => {
-      if (state.open.peek()) {
-        close();
-      } else {
-        open();
-      }
-    });
-    trigger.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.ArrowDown, Keys.ArrowUp, Keys.Enter, Keys.Space)) {
-        event.preventDefault();
-        if (!state.open.peek()) {
-          open();
-        }
-      }
-    });
-    content.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        close();
-        return;
-      }
-      if (isKey(event, Keys.Enter, Keys.Space)) {
-        event.preventDefault();
-        const active = items[state.activeIndex.peek()];
-        if (active) {
-          const val = active.getAttribute("data-value");
-          if (val !== null)
-            selectItem(val);
-        }
-        return;
-      }
-      if (state.activeIndex.peek() === -1) {
-        if (isKey(event, Keys.ArrowDown)) {
-          event.preventDefault();
-          state.activeIndex.value = 0;
-          updateActiveItem(0);
-          items[0]?.focus();
-          return;
-        }
-        if (isKey(event, Keys.ArrowUp)) {
-          event.preventDefault();
-          const last = items.length - 1;
-          state.activeIndex.value = last;
-          updateActiveItem(last);
-          items[last]?.focus();
-          return;
-        }
-      }
-      const result = handleListNavigation(event, items, { orientation: "vertical" });
-      if (result) {
-        const idx = items.indexOf(result);
-        if (idx >= 0) {
-          state.activeIndex.value = idx;
-          updateActiveItem(idx);
-        }
-        return;
-      }
-      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        const char = event.key.toLowerCase();
-        const match = items.find((item) => item.textContent?.toLowerCase().startsWith(char));
-        if (match) {
-          const idx = items.indexOf(match);
-          state.activeIndex.value = idx;
-          updateActiveItem(idx);
-          match.focus();
-        }
-      }
-    });
-    function createItem(value, label, parent) {
-      const item = document.createElement("div");
-      item.setAttribute("role", "option");
-      item.setAttribute("data-value", value);
-      item.setAttribute("tabindex", "-1");
-      item.textContent = label ?? value;
-      const isSelected = value === defaultValue;
-      setSelected(item, isSelected);
-      setDataState(item, isSelected ? "active" : "inactive");
-      if (isSelected) {
-        triggerText.textContent = item.textContent ?? value;
-      }
-      item.addEventListener("click", () => {
-        selectItem(value);
-      });
-      items.push(item);
-      (parent ?? content).appendChild(item);
-      return item;
-    }
-    function Item(value, label) {
-      return createItem(value, label);
-    }
-    function Group(label) {
-      const el = document.createElement("div");
-      el.setAttribute("role", "group");
-      el.setAttribute("aria-label", label);
-      content.appendChild(el);
-      return {
-        el,
-        Item: (value, itemLabel) => createItem(value, itemLabel, el)
-      };
-    }
-    function Separator() {
-      const hr = document.createElement("hr");
-      hr.setAttribute("role", "separator");
-      content.appendChild(hr);
-      return hr;
-    }
-    return { trigger, content, state, Item, Group, Separator };
-  }
-};
-// src/sheet/sheet.tsx
-import { __element as __element3, __on as __on2 } from "@vertz/ui/internals";
-import { signal as signal23 } from "@vertz/ui";
-function SheetRoot(options = {}) {
-  const { side = "right", defaultOpen = false, onOpenChange } = options;
-  const ids = linkedIds("sheet");
-  const state = { open: signal23(defaultOpen) };
-  let restoreFocus = null;
-  let removeTrap = null;
-  function show() {
-    state.open.value = true;
-    setExpanded(trigger, true);
-    setHidden(overlay, false);
-    setHidden(content, false);
-    setDataState(trigger, "open");
-    setDataState(overlay, "open");
-    setDataState(content, "open");
-    restoreFocus = saveFocus();
-    removeTrap = trapFocus(content);
-    queueMicrotask(() => focusFirst(content));
-    onOpenChange?.(true);
-  }
-  function hide() {
-    state.open.value = false;
-    setExpanded(trigger, false);
-    setDataState(trigger, "closed");
-    setDataState(overlay, "closed");
-    setDataState(content, "closed");
-    setHiddenAnimated(overlay, true);
-    setHiddenAnimated(content, true);
-    removeTrap?.();
-    removeTrap = null;
-    restoreFocus?.();
-    restoreFocus = null;
-    onOpenChange?.(false);
-  }
-  const SWIPE_THRESHOLD = 50;
-  let startX = 0;
-  let startY = 0;
-  function handlePointerDown(e) {
-    startX = e.clientX;
-    startY = e.clientY;
-  }
-  function handlePointerUp(e) {
-    if (!state.open.peek())
-      return;
-    const deltaX = e.clientX - startX;
-    const deltaY = e.clientY - startY;
-    const shouldDismiss = side === "right" && deltaX >= SWIPE_THRESHOLD || side === "left" && deltaX <= -SWIPE_THRESHOLD || side === "bottom" && deltaY >= SWIPE_THRESHOLD || side === "top" && deltaY <= -SWIPE_THRESHOLD;
-    if (shouldDismiss) {
-      hide();
-    }
-  }
-  const trigger = (() => {
-    const __el0 = __element3("button");
-    __el0.setAttribute("type", "button");
-    {
-      const __v = ids.triggerId;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("id", __v === true ? "" : __v);
-    }
-    {
-      const __v = ids.contentId;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "true" : "false";
-      if (__v != null && __v !== false)
-        __el0.setAttribute("aria-expanded", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "open" : "closed";
-      if (__v != null && __v !== false)
-        __el0.setAttribute("data-state", __v === true ? "" : __v);
-    }
-    __on2(__el0, "click", () => {
-      state.open.peek() ? hide() : show();
-    });
-    return __el0;
-  })();
-  const overlay = (() => {
-    const __el1 = __element3("div");
-    __el1.setAttribute("data-sheet-overlay", "");
-    {
-      const __v = defaultOpen ? "false" : "true";
-      if (__v != null && __v !== false)
-        __el1.setAttribute("aria-hidden", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "open" : "closed";
-      if (__v != null && __v !== false)
-        __el1.setAttribute("data-state", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "" : "display: none";
-      if (__v != null && __v !== false)
-        __el1.setAttribute("style", __v === true ? "" : __v);
-    }
-    __on2(__el1, "click", () => hide());
-    return __el1;
-  })();
-  const content = (() => {
-    const __el2 = __element3("div");
-    __el2.setAttribute("role", "dialog");
-    __el2.setAttribute("aria-modal", "true");
-    {
-      const __v = ids.contentId;
-      if (__v != null && __v !== false)
-        __el2.setAttribute("id", __v === true ? "" : __v);
-    }
-    {
-      const __v = side;
-      if (__v != null && __v !== false)
-        __el2.setAttribute("data-side", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "false" : "true";
-      if (__v != null && __v !== false)
-        __el2.setAttribute("aria-hidden", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "open" : "closed";
-      if (__v != null && __v !== false)
-        __el2.setAttribute("data-state", __v === true ? "" : __v);
-    }
-    {
-      const __v = defaultOpen ? "" : "display: none";
-      if (__v != null && __v !== false)
-        __el2.setAttribute("style", __v === true ? "" : __v);
-    }
-    __on2(__el2, "keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        event.stopPropagation();
-        hide();
-      }
-    });
-    __on2(__el2, "pointerdown", handlePointerDown);
-    __on2(__el2, "pointerup", handlePointerUp);
-    return __el2;
-  })();
-  const close = (() => {
-    const __el3 = __element3("button");
-    __el3.setAttribute("type", "button");
-    __el3.setAttribute("aria-label", "Close");
-    __on2(__el3, "click", () => hide());
-    return __el3;
-  })();
-  return { trigger, overlay, content, close, state, show, hide };
-}
-var Sheet = {
-  Root: SheetRoot
-};
-// src/slider/slider.ts
-import { signal as signal24 } from "@vertz/ui";
-var Slider = {
-  Root(options = {}) {
-    const {
-      defaultValue = 0,
-      min = 0,
-      max = 100,
-      step = 1,
-      disabled = false,
-      onValueChange
-    } = options;
-    const state = {
-      value: signal24(defaultValue),
-      disabled: signal24(disabled)
-    };
-    const root = document.createElement("div");
-    root.id = uniqueId("slider");
-    setDataState(root, disabled ? "disabled" : "active");
-    const track = document.createElement("div");
-    track.setAttribute("data-part", "track");
-    const thumb = document.createElement("div");
-    thumb.setAttribute("role", "slider");
-    thumb.setAttribute("tabindex", disabled ? "-1" : "0");
-    thumb.setAttribute("data-part", "thumb");
-    setValueRange(thumb, defaultValue, min, max);
-    if (disabled) {
-      thumb.setAttribute("aria-disabled", "true");
-    }
-    function clamp(val) {
-      return Math.min(max, Math.max(min, val));
-    }
-    const fill = document.createElement("div");
-    fill.setAttribute("data-part", "fill");
-    fill.style.cssText = "position: absolute; height: 100%; border-radius: inherit;";
-    function updatePosition(pct2) {
-      thumb.style.left = `${pct2}%`;
-      fill.style.width = `${pct2}%`;
-    }
-    function setValue(val) {
-      if (state.disabled.peek())
-        return;
-      const clamped = clamp(val);
-      state.value.value = clamped;
-      setValueRange(thumb, clamped, min, max);
-      const pct2 = (clamped - min) / (max - min) * 100;
-      updatePosition(pct2);
-      setDataState(root, "active");
-      onValueChange?.(clamped);
-    }
-    function valueFromPointer(event) {
-      const rect = track.getBoundingClientRect();
-      const pct2 = Math.max(0, Math.min(1, (event.clientX - rect.left) / rect.width));
-      const raw = min + pct2 * (max - min);
-      return Math.round(raw / step) * step;
-    }
-    thumb.addEventListener("keydown", (event) => {
-      if (state.disabled.peek())
-        return;
-      const current = state.value.peek();
-      if (isKey(event, Keys.ArrowRight, Keys.ArrowUp)) {
-        event.preventDefault();
-        setValue(current + step);
-      } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowDown)) {
-        event.preventDefault();
-        setValue(current - step);
-      } else if (isKey(event, Keys.Home)) {
-        event.preventDefault();
-        setValue(min);
-      } else if (isKey(event, Keys.End)) {
-        event.preventDefault();
-        setValue(max);
-      }
-    });
-    root.addEventListener("pointerdown", (event) => {
-      if (state.disabled.peek())
-        return;
-      event.preventDefault();
-      setValue(valueFromPointer(event));
-      thumb.focus();
-      function onMove(e) {
-        setValue(valueFromPointer(e));
-      }
-      function onUp() {
-        document.removeEventListener("pointermove", onMove);
-        document.removeEventListener("pointerup", onUp);
-      }
-      document.addEventListener("pointermove", onMove);
-      document.addEventListener("pointerup", onUp);
-    });
-    thumb.style.position = "absolute";
-    thumb.style.transform = "translate(-50%, -50%)";
-    track.style.position = "relative";
-    track.appendChild(fill);
-    track.appendChild(thumb);
-    root.appendChild(track);
-    const pct = (defaultValue - min) / (max - min) * 100;
-    updatePosition(pct);
-    return { root, thumb, track, state };
-  }
-};
-// src/switch/switch.tsx
-import { signal as signal25 } from "@vertz/ui";
-import { __attr as __attr4, __element as __element4, __on as __on3 } from "@vertz/ui/internals";
-function SwitchRoot(options = {}) {
-  const { defaultChecked = false, disabled = false, onCheckedChange } = options;
-  const checked = signal25(defaultChecked, "checked");
-  function toggle() {
-    if (disabled)
-      return;
-    checked.value = !checked.value;
-    onCheckedChange?.(checked.value);
-  }
-  return (() => {
-    const __el0 = __element4("button");
-    __el0.setAttribute("data-v-id", "SwitchRoot");
-    __el0.setAttribute("type", "button");
-    __el0.setAttribute("role", "switch");
-    {
-      const __v = uniqueId("switch");
-      if (__v != null && __v !== false)
-        __el0.setAttribute("id", __v === true ? "" : __v);
-    }
-    __attr4(__el0, "aria-checked", () => checked.value ? "true" : "false");
-    __attr4(__el0, "data-state", () => checked.value ? "checked" : "unchecked");
-    {
-      const __v = disabled;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("disabled", __v === true ? "" : __v);
-    }
-    {
-      const __v = disabled ? "true" : undefined;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
-    }
-    __on3(__el0, "click", toggle);
-    __on3(__el0, "keydown", (e) => {
-      if (isKey(e, Keys.Space)) {
-        e.preventDefault();
-        toggle();
-      }
-    });
-    return __el0;
-  })();
-}
-var Switch = {
-  Root: SwitchRoot
-};
-// src/tabs/tabs.ts
-import { signal as signal26 } from "@vertz/ui";
-var Tabs = {
-  Root(options = {}) {
-    const { defaultValue = "", orientation = "horizontal", onValueChange } = options;
-    const state = { value: signal26(defaultValue) };
-    const triggers = [];
-    const panels = [];
-    const tabValues = [];
-    const root = document.createElement("div");
-    const list = document.createElement("div");
-    list.setAttribute("role", "tablist");
-    if (orientation === "vertical") {
-      list.setAttribute("aria-orientation", "vertical");
-    }
-    root.appendChild(list);
-    function selectTab(value) {
-      state.value.value = value;
-      for (let i = 0;i < tabValues.length; i++) {
-        const isActive = tabValues[i] === value;
-        const trig = triggers[i];
-        const panel = panels[i];
-        if (!trig || !panel)
-          continue;
-        setSelected(trig, isActive);
-        setDataState(trig, isActive ? "active" : "inactive");
-        trig.setAttribute("tabindex", isActive ? "0" : "-1");
-        setHidden(panel, !isActive);
-        setDataState(panel, isActive ? "active" : "inactive");
-      }
-      onValueChange?.(value);
-    }
-    list.addEventListener("keydown", (event) => {
-      const result = handleListNavigation(event, triggers, {
-        orientation
-      });
-      if (result) {
-        const idx = triggers.indexOf(result);
-        if (idx >= 0) {
-          const val = tabValues[idx];
-          if (val !== undefined)
-            selectTab(val);
-        }
-      }
-    });
-    function Tab(value, label) {
-      const baseId = uniqueId("tab");
-      const triggerId = `${baseId}-trigger`;
-      const panelId = `${baseId}-panel`;
-      const isActive = value === state.value.peek();
-      const trig = document.createElement("button");
-      trig.setAttribute("type", "button");
-      trig.setAttribute("role", "tab");
-      trig.id = triggerId;
-      trig.setAttribute("aria-controls", panelId);
-      trig.setAttribute("data-value", value);
-      trig.textContent = label ?? value;
-      setSelected(trig, isActive);
-      setDataState(trig, isActive ? "active" : "inactive");
-      const panel = document.createElement("div");
-      panel.setAttribute("role", "tabpanel");
-      panel.id = panelId;
-      panel.setAttribute("aria-labelledby", triggerId);
-      panel.setAttribute("tabindex", "0");
-      setHidden(panel, !isActive);
-      setDataState(panel, isActive ? "active" : "inactive");
-      trig.addEventListener("click", () => {
-        selectTab(value);
-        trig.focus();
-      });
-      triggers.push(trig);
-      panels.push(panel);
-      tabValues.push(value);
-      list.appendChild(trig);
-      root.appendChild(panel);
-      setRovingTabindex(triggers, triggers.findIndex((t) => tabValues[triggers.indexOf(t)] === state.value.peek()));
-      return { trigger: trig, panel };
-    }
-    return { root, list, state, Tab };
-  }
-};
-// src/toast/toast.ts
-import { signal as signal27 } from "@vertz/ui";
-var Toast = {
-  Root(options = {}) {
-    const { duration = 5000, politeness = "polite" } = options;
-    const state = { messages: signal27([]) };
-    const region = document.createElement("div");
-    region.setAttribute("role", "status");
-    region.setAttribute("aria-live", politeness);
-    region.setAttribute("aria-atomic", "false");
-    setDataState(region, "empty");
-    function announce(content) {
-      const id = uniqueId("toast");
-      const el = document.createElement("div");
-      el.setAttribute("role", "status");
-      el.setAttribute("data-toast-id", id);
-      el.textContent = content;
-      setDataState(el, "open");
-      const msg = { id, content, el };
-      const messages = [...state.messages.peek(), msg];
-      state.messages.value = messages;
-      region.appendChild(el);
-      setDataState(region, "active");
-      if (duration > 0) {
-        setTimeout(() => dismiss(id), duration);
-      }
-      return msg;
-    }
-    function dismiss(id) {
-      const messages = state.messages.peek().filter((m) => m.id !== id);
-      state.messages.value = messages;
-      const el = region.querySelector(`[data-toast-id="${id}"]`);
-      if (el) {
-        setDataState(el, "closed");
-        el.remove();
-      }
-      if (messages.length === 0) {
-        setDataState(region, "empty");
-      }
-    }
-    return { region, state, announce, dismiss };
-  }
-};
-// src/toggle/toggle.tsx
-import { signal as signal28 } from "@vertz/ui";
-import { __attr as __attr5, __element as __element5, __on as __on4 } from "@vertz/ui/internals";
-function ToggleRoot(options = {}) {
-  const { defaultPressed = false, disabled = false, onPressedChange } = options;
-  const pressed = signal28(defaultPressed, "pressed");
-  function toggle() {
-    if (disabled)
-      return;
-    pressed.value = !pressed.value;
-    onPressedChange?.(pressed.value);
-  }
-  return (() => {
-    const __el0 = __element5("button");
-    __el0.setAttribute("data-v-id", "ToggleRoot");
-    __el0.setAttribute("type", "button");
-    {
-      const __v = uniqueId("toggle");
-      if (__v != null && __v !== false)
-        __el0.setAttribute("id", __v === true ? "" : __v);
-    }
-    __attr5(__el0, "aria-pressed", () => pressed.value ? "true" : "false");
-    __attr5(__el0, "data-state", () => pressed.value ? "on" : "off");
-    {
-      const __v = disabled;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("disabled", __v === true ? "" : __v);
-    }
-    {
-      const __v = disabled ? "true" : undefined;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("aria-disabled", __v === true ? "" : __v);
-    }
-    __on4(__el0, "click", toggle);
-    __on4(__el0, "keydown", (e) => {
-      if (isKey(e, Keys.Space)) {
-        e.preventDefault();
-        toggle();
-      }
-    });
-    return __el0;
-  })();
-}
-var Toggle = {
-  Root: ToggleRoot
-};
-// src/toggle-group/toggle-group.ts
-import { signal as signal29 } from "@vertz/ui";
-var ToggleGroup = {
-  Root(options = {}) {
-    const {
-      type = "single",
-      defaultValue = [],
-      orientation = "horizontal",
-      disabled = false,
-      onValueChange
-    } = options;
-    const state = {
-      value: signal29([...defaultValue]),
-      disabled: signal29(disabled)
-    };
-    const items = [];
-    const root = document.createElement("div");
-    root.setAttribute("role", "group");
-    root.setAttribute("data-orientation", orientation);
-    function toggleValue(itemValue) {
-      if (state.disabled.peek())
-        return;
-      const current = [...state.value.peek()];
-      const idx = current.indexOf(itemValue);
-      if (type === "single") {
-        if (idx >= 0) {
-          current.length = 0;
-        } else {
-          current.length = 0;
-          current.push(itemValue);
-        }
-      } else {
-        if (idx >= 0) {
-          current.splice(idx, 1);
-        } else {
-          current.push(itemValue);
-        }
-      }
-      state.value.value = current;
-      onValueChange?.(current);
-      for (const item of items) {
-        const val = item.getAttribute("data-value") ?? "";
-        const isOn = current.includes(val);
-        setPressed(item, isOn);
-        setDataState(item, isOn ? "on" : "off");
-      }
-    }
-    root.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.ArrowLeft, Keys.ArrowRight, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
-        const result = handleListNavigation(event, items, { orientation });
-        if (result) {
-          const idx = items.indexOf(result);
-          if (idx >= 0) {
-            setRovingTabindex(items, idx);
-          }
-        }
-      }
-    });
-    function Item(value) {
-      const item = document.createElement("button");
-      item.setAttribute("type", "button");
-      item.setAttribute("data-value", value);
-      const isOn = state.value.peek().includes(value);
-      setPressed(item, isOn);
-      setDataState(item, isOn ? "on" : "off");
-      if (state.disabled.peek()) {
-        item.disabled = true;
-        item.setAttribute("aria-disabled", "true");
-      }
-      item.addEventListener("click", () => toggleValue(value));
-      items.push(item);
-      setRovingTabindex(items, 0);
-      root.appendChild(item);
-      return item;
-    }
-    return { root, state, Item };
-  }
-};
-// src/tooltip/tooltip.ts
-import { signal as signal30 } from "@vertz/ui";
-var Tooltip = {
-  Root(options = {}) {
-    const { delay = 300, onOpenChange, positioning } = options;
-    const contentId = uniqueId("tooltip");
-    const state = { open: signal30(false) };
-    let showTimeout = null;
-    let floatingCleanup = null;
-    const trigger = document.createElement("span");
-    setDescribedBy(trigger, contentId);
-    const content = document.createElement("div");
-    content.setAttribute("role", "tooltip");
-    content.id = contentId;
-    setHidden(content, true);
-    setDataState(content, "closed");
-    function show() {
-      if (showTimeout !== null)
-        return;
-      showTimeout = setTimeout(() => {
-        state.open.value = true;
-        setHidden(content, false);
-        setDataState(content, "open");
-        if (positioning) {
-          const effectivePlacement = positioning.placement ?? "top";
-          const result = createFloatingPosition(trigger, content, {
-            ...positioning,
-            placement: effectivePlacement
-          });
-          floatingCleanup = result.cleanup;
-        }
-        onOpenChange?.(true);
-        showTimeout = null;
-      }, delay);
-    }
-    function hide() {
-      if (showTimeout !== null) {
-        clearTimeout(showTimeout);
-        showTimeout = null;
-      }
-      state.open.value = false;
-      setDataState(content, "closed");
-      setHiddenAnimated(content, true);
-      floatingCleanup?.();
-      floatingCleanup = null;
-      onOpenChange?.(false);
-    }
-    trigger.addEventListener("mouseenter", show);
-    trigger.addEventListener("mouseleave", hide);
-    trigger.addEventListener("focus", show);
-    trigger.addEventListener("blur", hide);
-    trigger.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        hide();
-      }
-    });
-    return { trigger, content, state };
-  }
-};
-export {
-  Tooltip,
-  ToggleGroup,
-  Toggle,
-  Toast,
-  Tabs,
-  Switch,
-  Slider,
-  Sheet,
-  Select,
-  ScrollArea,
-  ResizablePanel,
-  Radio,
-  Progress,
-  Popover,
-  NavigationMenu,
-  Menubar,
-  Menu,
-  HoverCard,
-  DropdownMenu,
-  Dialog,
-  DatePicker,
-  ContextMenu,
-  Command,
-  Combobox,
-  Collapsible,
-  Checkbox,
-  Carousel,
-  Calendar,
-  Button,
-  Badge,
-  AlertDialog,
-  Accordion
-};