@vertz/ui-primitives 0.1.1 → 0.2.0

package/dist/index.js

@@ -2,6 +2,8 @@
 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));
 }
@@ -12,6 +14,21 @@ 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));
 }
@@ -27,6 +44,9 @@ function setLabelledBy(el, 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));
@@ -111,10 +131,29 @@ var Accordion = {
     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 current = [...state.value.peek()];
+      const prev = [...state.value.peek()];
+      const current = [...prev];
       const idx = current.indexOf(value);
       if (idx >= 0) {
         current.splice(idx, 1);
@@ -128,6 +167,16 @@ var Accordion = {
       }
       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)) {
@@ -156,16 +205,18 @@ var Accordion = {
       setDataState(content, isOpen ? "open" : "closed");
       trigger.addEventListener("click", () => {
         toggleItem(value);
-        const nowOpen = state.value.peek().includes(value);
-        setExpanded(trigger, nowOpen);
-        setHidden(content, !nowOpen);
-        setDataState(trigger, nowOpen ? "open" : "closed");
-        setDataState(content, nowOpen ? "open" : "closed");
       });
+      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 };
@@ -212,8 +263,363 @@ var Button = {
     return { root, state };
   }
 };
-// src/checkbox/checkbox.ts
+// src/calendar/calendar.ts
 import { signal as signal3 } 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: signal3(options.defaultValue ?? null),
+      focusedDate: signal3(defaultMonth),
+      displayMonth: signal3(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 signal4 } from "@vertz/ui";
+var Carousel = {
+  Root(options = {}) {
+    const { orientation = "horizontal", loop = false, defaultIndex = 0, onSlideChange } = options;
+    const state = {
+      currentIndex: signal4(defaultIndex),
+      slideCount: signal4(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 signal5 } from "@vertz/ui";
 function dataStateFor(checked) {
   if (checked === "mixed")
     return "indeterminate";
@@ -223,8 +629,8 @@ var Checkbox = {
   Root(options = {}) {
     const { defaultChecked = false, disabled = false, onCheckedChange } = options;
     const state = {
-      checked: signal3(defaultChecked),
-      disabled: signal3(disabled)
+      checked: signal5(defaultChecked),
+      disabled: signal5(disabled)
     };
     const root = document.createElement("button");
     root.setAttribute("type", "button");
@@ -256,17 +662,66 @@ var Checkbox = {
     return { root, state };
   }
 };
+// src/collapsible/collapsible.ts
+import { signal as signal6 } from "@vertz/ui";
+var Collapsible = {
+  Root(options = {}) {
+    const { defaultOpen = false, disabled = false, onOpenChange } = options;
+    const ids = linkedIds("collapsible");
+    const state = {
+      open: signal6(defaultOpen),
+      disabled: signal6(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 signal4 } from "@vertz/ui";
+import { signal as signal7 } from "@vertz/ui";
 var Combobox = {
   Root(options = {}) {
     const { defaultValue = "", onValueChange, onInputChange } = options;
     const ids = linkedIds("combobox");
     const state = {
-      open: signal4(false),
-      value: signal4(defaultValue),
-      inputValue: signal4(defaultValue),
-      activeIndex: signal4(-1)
+      open: signal7(false),
+      value: signal7(defaultValue),
+      inputValue: signal7(defaultValue),
+      activeIndex: signal7(-1)
     };
     const optionElements = [];
     const input = document.createElement("input");
@@ -293,8 +748,8 @@ var Combobox = {
       state.open.value = false;
       state.activeIndex.value = -1;
       setExpanded(input, false);
-      setHidden(listbox, true);
       setDataState(listbox, "closed");
+      setHiddenAnimated(listbox, true);
       updateActiveDescendant(-1);
     }
     function selectOption(value) {
@@ -387,77 +842,678 @@ var Combobox = {
     return { input, listbox, state, Option };
   }
 };
-// src/dialog/dialog.ts
-import { signal as signal5 } 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) {
+// src/command/command.ts
+import { signal as signal8 } from "@vertz/ui";
+var Command = {
+  Root(options = {}) {
+    const { filter: customFilter, onSelect, onInputChange, placeholder } = options;
+    const listId = uniqueId("command-list");
+    const state = {
+      inputValue: signal8(""),
+      activeIndex: signal8(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();
-        last.focus();
+        const next = Math.min(state.activeIndex.peek() + 1, visible.length - 1);
+        state.activeIndex.value = next;
+        updateActiveItem();
+        return;
       }
-    } else {
-      if (document.activeElement === last) {
+      if (isKey(event, Keys.ArrowUp)) {
         event.preventDefault();
-        first.focus();
+        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 };
   }
-  container.addEventListener("keydown", handleKeyDown);
-  return () => {
-    container.removeEventListener("keydown", handleKeyDown);
+};
+// src/context-menu/context-menu.ts
+import { signal as signal9 } 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);
+    }
   };
 }
-function focusFirst(container) {
-  const focusable = getFocusableElements(container);
-  if (focusable.length > 0) {
-    focusable[0]?.focus();
+
+// 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 saveFocus() {
-  const previously = document.activeElement;
-  return () => {
-    if (previously && typeof previously.focus === "function") {
-      previously.focus();
+function virtualElement(x, y) {
+  return {
+    getBoundingClientRect() {
+      return {
+        x,
+        y,
+        top: y,
+        left: x,
+        bottom: y,
+        right: x,
+        width: 0,
+        height: 0,
+        toJSON() {
+          return this;
+        }
+      };
     }
   };
 }
-function setRovingTabindex(items, activeIndex) {
-  for (let i = 0;i < items.length; i++) {
+
+// src/context-menu/context-menu.ts
+var ContextMenu = {
+  Root(options = {}) {
+    const { onSelect, positioning } = options;
+    const state = {
+      open: signal9(false),
+      activeIndex: signal9(-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 signal11 } from "@vertz/ui";
+
+// src/popover/popover.ts
+import { signal as signal10 } 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/popover/popover.ts
+var Popover = {
+  Root(options = {}) {
+    const { defaultOpen = false, onOpenChange, positioning } = options;
+    const ids = linkedIds("popover");
+    const state = { open: signal10(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: signal11(false),
+      value: signal11(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 signal12 } 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: signal5(defaultOpen) };
+    const state = { open: signal12(defaultOpen) };
     let restoreFocus = null;
     let removeTrap = null;
     const trigger = document.createElement("button");
@@ -468,11 +1524,6 @@ var Dialog = {
     setDataState(trigger, defaultOpen ? "open" : "closed");
     const overlay = document.createElement("div");
     overlay.setAttribute("data-dialog-overlay", "");
-    if (modal) {
-      overlay.style.position = "fixed";
-      overlay.style.inset = "0";
-      overlay.style.zIndex = "49";
-    }
     setHidden(overlay, !defaultOpen);
     setDataState(overlay, defaultOpen ? "open" : "closed");
     const content = document.createElement("div");
@@ -480,11 +1531,6 @@ var Dialog = {
     content.id = ids.contentId;
     if (modal) {
       content.setAttribute("aria-modal", "true");
-      content.style.position = "fixed";
-      content.style.top = "50%";
-      content.style.left = "50%";
-      content.style.transform = "translate(-50%, -50%)";
-      content.style.zIndex = "50";
     }
     setLabelledBy(content, titleId);
     setHidden(content, !defaultOpen);
@@ -512,11 +1558,11 @@ var Dialog = {
     function closeDialog() {
       state.open.value = false;
       setExpanded(trigger, false);
-      setHidden(overlay, true);
-      setHidden(content, true);
       setDataState(trigger, "closed");
       setDataState(overlay, "closed");
       setDataState(content, "closed");
+      setHiddenAnimated(overlay, true);
+      setHiddenAnimated(content, true);
       removeTrap?.();
       removeTrap = null;
       restoreFocus?.();
@@ -543,20 +1589,22 @@ var Dialog = {
         closeDialog();
       }
     });
-    return { trigger, overlay, content, title, close, state };
+    return { trigger, overlay, content, title, close, state, show: openDialog, hide: closeDialog };
   }
 };
 // src/menu/menu.ts
-import { signal as signal6 } from "@vertz/ui";
+import { signal as signal13 } from "@vertz/ui";
 var Menu = {
   Root(options = {}) {
-    const { onSelect } = options;
+    const { onSelect, positioning } = options;
     const ids = linkedIds("menu");
     const state = {
-      open: signal6(false),
-      activeIndex: signal6(-1)
+      open: signal13(false),
+      activeIndex: signal13(-1)
     };
     const items = [];
+    let floatingCleanup = null;
+    let dismissCleanup = null;
     const trigger = document.createElement("button");
     trigger.setAttribute("type", "button");
     trigger.id = ids.triggerId;
@@ -566,25 +1614,58 @@ var Menu = {
     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 open() {
+    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");
-      state.activeIndex.value = 0;
-      updateActiveItem(0);
-      items[0]?.focus();
+      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);
-      setHidden(content, true);
       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) {
@@ -603,7 +1684,7 @@ var Menu = {
       if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
         event.preventDefault();
         if (!state.open.peek())
-          open();
+          open(true);
       }
     });
     content.addEventListener("keydown", (event) => {
@@ -624,6 +1705,23 @@ var Menu = {
         }
         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);
@@ -631,87 +1729,571 @@ var Menu = {
           state.activeIndex.value = idx;
           updateActiveItem(idx);
         }
-      }
-    });
-    function Item(value, label) {
-      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();
+        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 signal14 } from "@vertz/ui";
+var HoverCard = {
+  Root(options = {}) {
+    const { openDelay = 700, closeDelay = 300, onOpenChange, positioning } = options;
+    const contentId = uniqueId("hovercard");
+    const state = { open: signal14(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 signal15 } from "@vertz/ui";
+var Menubar = {
+  Root(options = {}) {
+    const { onSelect, positioning } = options;
+    const state = { activeMenu: signal15(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" });
       });
-      items.push(item);
-      content.appendChild(item);
-      return item;
+      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 { trigger, content, state, Item };
+    return { root, state, Menu: Menu2 };
   }
 };
-// src/popover/popover.ts
-import { signal as signal7 } from "@vertz/ui";
-var Popover = {
+// src/navigation-menu/navigation-menu.ts
+import { signal as signal16 } from "@vertz/ui";
+var NavigationMenu = {
   Root(options = {}) {
-    const { defaultOpen = false, onOpenChange } = options;
-    const ids = linkedIds("popover");
-    const state = { open: signal7(defaultOpen) };
-    let restoreFocus = 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));
-      onOpenChange?.(true);
+    const { orientation = "horizontal", delayOpen = 200, delayClose = 300 } = options;
+    const state = { activeItem: signal16(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 close() {
-      state.open.value = false;
+    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);
-      setHidden(content, true);
       setDataState(trigger, "closed");
+      const content = document.createElement("div");
+      content.id = ids.contentId;
+      setHidden(content, true);
       setDataState(content, "closed");
-      restoreFocus?.();
-      restoreFocus = null;
-      onOpenChange?.(false);
+      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 };
     }
-    trigger.addEventListener("click", () => {
-      if (state.open.peek()) {
-        close();
-      } else {
-        open();
-      }
-    });
-    content.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        close();
+    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"
+        });
       }
     });
-    return { trigger, content, state };
+    root.appendChild(list);
+    root.appendChild(viewport);
+    return { root, list, viewport, state, Item, Link };
   }
 };
 // src/progress/progress.ts
-import { signal as signal8 } from "@vertz/ui";
+import { signal as signal17 } from "@vertz/ui";
 var Progress = {
   Root(options = {}) {
     const { defaultValue = 0, min = 0, max = 100 } = options;
-    const state = { value: signal8(defaultValue) };
+    const state = { value: signal17(defaultValue) };
     const root = document.createElement("div");
     root.setAttribute("role", "progressbar");
     root.id = uniqueId("progress");
@@ -746,11 +2328,11 @@ var Progress = {
   }
 };
 // src/radio/radio.ts
-import { signal as signal9 } from "@vertz/ui";
+import { signal as signal18 } from "@vertz/ui";
 var Radio = {
   Root(options = {}) {
     const { defaultValue = "", onValueChange } = options;
-    const state = { value: signal9(defaultValue) };
+    const state = { value: signal18(defaultValue) };
     const items = [];
     const itemValues = [];
     const root = document.createElement("div");
@@ -802,18 +2384,275 @@ var Radio = {
     return { root, state, Item };
   }
 };
+// src/resizable-panel/resizable-panel.ts
+import { signal as signal19 } from "@vertz/ui";
+var ResizablePanel = {
+  Root(options = {}) {
+    const { orientation = "horizontal", onResize } = options;
+    const state = { sizes: signal19([]) };
+    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 signal20 } from "@vertz/ui";
+var ScrollArea = {
+  Root(options = {}) {
+    const { orientation = "vertical" } = options;
+    const state = {
+      scrollTop: signal20(0),
+      scrollLeft: signal20(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 signal10 } from "@vertz/ui";
+import { signal as signal21 } from "@vertz/ui";
 var Select = {
   Root(options = {}) {
-    const { defaultValue = "", onValueChange } = options;
+    const { defaultValue = "", placeholder = "", onValueChange, positioning } = options;
     const ids = linkedIds("select");
     const state = {
-      open: signal10(false),
-      value: signal10(defaultValue),
-      activeIndex: signal10(-1)
+      open: signal21(false),
+      value: signal21(defaultValue),
+      activeIndex: signal21(-1)
     };
     const items = [];
+    let floatingCleanup = null;
+    let dismissCleanup = null;
     const trigger = document.createElement("button");
     trigger.setAttribute("type", "button");
     trigger.setAttribute("role", "combobox");
@@ -822,8 +2661,13 @@ var Select = {
     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");
@@ -833,18 +2677,40 @@ var Select = {
       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());
-      const focusIdx = selectedIdx >= 0 ? selectedIdx : 0;
-      state.activeIndex.value = focusIdx;
-      updateActiveItem(focusIdx);
-      items[focusIdx]?.focus();
+      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);
-      setHidden(content, true);
       setDataState(trigger, "closed");
       setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      floatingCleanup?.();
+      floatingCleanup = null;
+      dismissCleanup?.();
+      dismissCleanup = null;
       trigger.focus();
     }
     function selectItem(value) {
@@ -853,6 +2719,9 @@ var Select = {
         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();
@@ -893,6 +2762,23 @@ var Select = {
         }
         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);
@@ -900,9 +2786,20 @@ var Select = {
           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 Item(value, label) {
+    function createItem(value, label, parent) {
       const item = document.createElement("div");
       item.setAttribute("role", "option");
       item.setAttribute("data-value", value);
@@ -911,18 +2808,40 @@ var Select = {
       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);
-      content.appendChild(item);
+      (parent ?? content).appendChild(item);
       return item;
     }
-    return { trigger, content, state, 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/slider/slider.ts
-import { signal as signal11 } from "@vertz/ui";
+import { signal as signal22 } from "@vertz/ui";
 var Slider = {
   Root(options = {}) {
     const {
@@ -934,8 +2853,8 @@ var Slider = {
       onValueChange
     } = options;
     const state = {
-      value: signal11(defaultValue),
-      disabled: signal11(disabled)
+      value: signal22(defaultValue),
+      disabled: signal22(disabled)
     };
     const root = document.createElement("div");
     root.id = uniqueId("slider");
@@ -953,6 +2872,13 @@ var Slider = {
     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;
@@ -960,10 +2886,16 @@ var Slider = {
       state.value.value = clamped;
       setValueRange(thumb, clamped, min, max);
       const pct2 = (clamped - min) / (max - min) * 100;
-      thumb.style.left = `${pct2}%`;
+      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;
@@ -982,21 +2914,41 @@ var Slider = {
         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;
-    thumb.style.left = `${pct}%`;
+    updatePosition(pct);
     return { root, thumb, track, state };
   }
 };
 // src/switch/switch.ts
-import { signal as signal12 } from "@vertz/ui";
+import { signal as signal23 } from "@vertz/ui";
 var Switch = {
   Root(options = {}) {
     const { defaultChecked = false, disabled = false, onCheckedChange } = options;
     const state = {
-      checked: signal12(defaultChecked),
-      disabled: signal12(disabled)
+      checked: signal23(defaultChecked),
+      disabled: signal23(disabled)
     };
     const root = document.createElement("button");
     root.setAttribute("type", "button");
@@ -1028,17 +2980,20 @@ var Switch = {
   }
 };
 // src/tabs/tabs.ts
-import { signal as signal13 } from "@vertz/ui";
+import { signal as signal24 } from "@vertz/ui";
 var Tabs = {
   Root(options = {}) {
-    const { defaultValue = "", onValueChange } = options;
-    const state = { value: signal13(defaultValue) };
+    const { defaultValue = "", orientation = "horizontal", onValueChange } = options;
+    const state = { value: signal24(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;
@@ -1058,7 +3013,7 @@ var Tabs = {
     }
     list.addEventListener("keydown", (event) => {
       const result = handleListNavigation(event, triggers, {
-        orientation: "horizontal"
+        orientation
       });
       if (result) {
         const idx = triggers.indexOf(result);
@@ -1106,11 +3061,11 @@ var Tabs = {
   }
 };
 // src/toast/toast.ts
-import { signal as signal14 } from "@vertz/ui";
+import { signal as signal25 } from "@vertz/ui";
 var Toast = {
   Root(options = {}) {
     const { duration = 5000, politeness = "polite" } = options;
-    const state = { messages: signal14([]) };
+    const state = { messages: signal25([]) };
     const region = document.createElement("div");
     region.setAttribute("role", "status");
     region.setAttribute("aria-live", politeness);
@@ -1148,14 +3103,130 @@ var Toast = {
     return { region, state, announce, dismiss };
   }
 };
+// src/toggle/toggle.ts
+import { signal as signal26 } from "@vertz/ui";
+var Toggle = {
+  Root(options = {}) {
+    const { defaultPressed = false, disabled = false, onPressedChange } = options;
+    const state = {
+      pressed: signal26(defaultPressed),
+      disabled: signal26(disabled)
+    };
+    const root = document.createElement("button");
+    root.setAttribute("type", "button");
+    root.id = uniqueId("toggle");
+    setPressed(root, defaultPressed);
+    setDataState(root, defaultPressed ? "on" : "off");
+    if (disabled) {
+      root.disabled = true;
+      root.setAttribute("aria-disabled", "true");
+    }
+    function toggle() {
+      if (state.disabled.peek())
+        return;
+      const next = !state.pressed.peek();
+      state.pressed.value = next;
+      setPressed(root, next);
+      setDataState(root, next ? "on" : "off");
+      onPressedChange?.(next);
+    }
+    root.addEventListener("click", toggle);
+    root.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Space)) {
+        event.preventDefault();
+        toggle();
+      }
+    });
+    return { root, state };
+  }
+};
+// src/toggle-group/toggle-group.ts
+import { signal as signal27 } from "@vertz/ui";
+var ToggleGroup = {
+  Root(options = {}) {
+    const {
+      type = "single",
+      defaultValue = [],
+      orientation = "horizontal",
+      disabled = false,
+      onValueChange
+    } = options;
+    const state = {
+      value: signal27([...defaultValue]),
+      disabled: signal27(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 signal15 } from "@vertz/ui";
+import { signal as signal28 } from "@vertz/ui";
 var Tooltip = {
   Root(options = {}) {
-    const { delay = 300, onOpenChange } = options;
+    const { delay = 300, onOpenChange, positioning } = options;
     const contentId = uniqueId("tooltip");
-    const state = { open: signal15(false) };
+    const state = { open: signal28(false) };
     let showTimeout = null;
+    let floatingCleanup = null;
     const trigger = document.createElement("span");
     setDescribedBy(trigger, contentId);
     const content = document.createElement("div");
@@ -1170,6 +3241,14 @@ var Tooltip = {
         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);
@@ -1180,8 +3259,10 @@ var Tooltip = {
         showTimeout = null;
       }
       state.open.value = false;
-      setHidden(content, true);
       setDataState(content, "closed");
+      setHiddenAnimated(content, true);
+      floatingCleanup?.();
+      floatingCleanup = null;
       onOpenChange?.(false);
     }
     trigger.addEventListener("mouseenter", show);
@@ -1198,18 +3279,32 @@ var Tooltip = {
 };
 export {
   Tooltip,
+  ToggleGroup,
+  Toggle,
   Toast,
   Tabs,
   Switch,
   Slider,
   Select,
+  ScrollArea,
+  ResizablePanel,
   Radio,
   Progress,
   Popover,
+  NavigationMenu,
+  Menubar,
   Menu,
+  HoverCard,
+  DropdownMenu,
   Dialog,
+  DatePicker,
+  ContextMenu,
+  Command,
   Combobox,
+  Collapsible,
   Checkbox,
+  Carousel,
+  Calendar,
   Button,
   Accordion
 };