@vertz/ui-primitives 0.1.1

package/dist/index.js

@@ -0,0 +1,1215 @@
+// src/accordion/accordion.ts
+import { signal } from "@vertz/ui";
+
+// src/utils/aria.ts
+function setExpanded(el, expanded) {
+  el.setAttribute("aria-expanded", String(expanded));
+}
+function setSelected(el, selected) {
+  el.setAttribute("aria-selected", String(selected));
+}
+function setHidden(el, hidden) {
+  el.setAttribute("aria-hidden", String(hidden));
+  el.style.display = hidden ? "none" : "";
+}
+function setChecked(el, checked) {
+  el.setAttribute("aria-checked", String(checked));
+}
+function setDisabled(el, disabled) {
+  el.setAttribute("aria-disabled", String(disabled));
+}
+function setDataState(el, state) {
+  el.setAttribute("data-state", state);
+}
+function setLabelledBy(el, labelId) {
+  el.setAttribute("aria-labelledby", labelId);
+}
+function setDescribedBy(el, descriptionId) {
+  el.setAttribute("aria-describedby", descriptionId);
+}
+function setValueRange(el, now, min, max) {
+  el.setAttribute("aria-valuenow", String(now));
+  el.setAttribute("aria-valuemin", String(min));
+  el.setAttribute("aria-valuemax", String(max));
+}
+
+// src/utils/id.ts
+var counter = 0;
+function uniqueId(prefix = "vz") {
+  return `${prefix}-${++counter}`;
+}
+function linkedIds(prefix = "vz") {
+  const base = uniqueId(prefix);
+  return {
+    triggerId: `${base}-trigger`,
+    contentId: `${base}-content`
+  };
+}
+
+// src/utils/keyboard.ts
+var Keys = {
+  Enter: "Enter",
+  Space: " ",
+  Escape: "Escape",
+  ArrowUp: "ArrowUp",
+  ArrowDown: "ArrowDown",
+  ArrowLeft: "ArrowLeft",
+  ArrowRight: "ArrowRight",
+  Home: "Home",
+  End: "End",
+  Tab: "Tab"
+};
+function isKey(event, ...keys) {
+  return keys.includes(event.key);
+}
+function handleListNavigation(event, items, options = {}) {
+  const { orientation = "vertical", loop = true } = options;
+  if (items.length === 0)
+    return null;
+  const prevKey = orientation === "vertical" ? Keys.ArrowUp : Keys.ArrowLeft;
+  const nextKey = orientation === "vertical" ? Keys.ArrowDown : Keys.ArrowRight;
+  const currentIndex = items.indexOf(document.activeElement);
+  let nextIndex = -1;
+  if (isKey(event, prevKey)) {
+    event.preventDefault();
+    if (currentIndex <= 0) {
+      nextIndex = loop ? items.length - 1 : 0;
+    } else {
+      nextIndex = currentIndex - 1;
+    }
+  } else if (isKey(event, nextKey)) {
+    event.preventDefault();
+    if (currentIndex >= items.length - 1) {
+      nextIndex = loop ? 0 : items.length - 1;
+    } else {
+      nextIndex = currentIndex + 1;
+    }
+  } else if (isKey(event, Keys.Home)) {
+    event.preventDefault();
+    nextIndex = 0;
+  } else if (isKey(event, Keys.End)) {
+    event.preventDefault();
+    nextIndex = items.length - 1;
+  }
+  const target = items[nextIndex];
+  if (target) {
+    target.focus();
+    return target;
+  }
+  return null;
+}
+function handleActivation(event, handler) {
+  if (isKey(event, Keys.Enter, Keys.Space)) {
+    event.preventDefault();
+    handler();
+  }
+}
+
+// src/accordion/accordion.ts
+var Accordion = {
+  Root(options = {}) {
+    const { multiple = false, defaultValue = [], onValueChange } = options;
+    const state = { value: signal([...defaultValue]) };
+    const triggers = [];
+    const root = document.createElement("div");
+    root.setAttribute("data-orientation", "vertical");
+    function toggleItem(value) {
+      const current = [...state.value.peek()];
+      const idx = current.indexOf(value);
+      if (idx >= 0) {
+        current.splice(idx, 1);
+      } else {
+        if (multiple) {
+          current.push(value);
+        } else {
+          current.length = 0;
+          current.push(value);
+        }
+      }
+      state.value.value = current;
+      onValueChange?.(current);
+    }
+    root.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.ArrowUp, Keys.ArrowDown, Keys.Home, Keys.End)) {
+        handleListNavigation(event, triggers, { orientation: "vertical" });
+      }
+    });
+    function Item(value) {
+      const baseId = uniqueId("accordion");
+      const triggerId = `${baseId}-trigger`;
+      const contentId = `${baseId}-content`;
+      const isOpen = state.value.peek().includes(value);
+      const item = document.createElement("div");
+      item.setAttribute("data-value", value);
+      const trigger = document.createElement("button");
+      trigger.setAttribute("type", "button");
+      trigger.id = triggerId;
+      trigger.setAttribute("aria-controls", contentId);
+      trigger.setAttribute("data-value", value);
+      setExpanded(trigger, isOpen);
+      setDataState(trigger, isOpen ? "open" : "closed");
+      const content = document.createElement("div");
+      content.setAttribute("role", "region");
+      content.id = contentId;
+      content.setAttribute("aria-labelledby", triggerId);
+      setHidden(content, !isOpen);
+      setDataState(content, isOpen ? "open" : "closed");
+      trigger.addEventListener("click", () => {
+        toggleItem(value);
+        const nowOpen = state.value.peek().includes(value);
+        setExpanded(trigger, nowOpen);
+        setHidden(content, !nowOpen);
+        setDataState(trigger, nowOpen ? "open" : "closed");
+        setDataState(content, nowOpen ? "open" : "closed");
+      });
+      triggers.push(trigger);
+      item.appendChild(trigger);
+      item.appendChild(content);
+      root.appendChild(item);
+      return { item, trigger, content };
+    }
+    return { root, state, Item };
+  }
+};
+// src/button/button.ts
+import { signal as signal2 } from "@vertz/ui";
+function createButtonRoot(state, options) {
+  const el = document.createElement("button");
+  el.setAttribute("type", "button");
+  el.setAttribute("role", "button");
+  setDataState(el, "idle");
+  if (options.disabled) {
+    el.disabled = true;
+    setDisabled(el, true);
+  }
+  el.addEventListener("click", () => {
+    if (state.disabled.peek())
+      return;
+    state.pressed.value = true;
+    setDataState(el, "pressed");
+    options.onPress?.();
+    queueMicrotask(() => {
+      state.pressed.value = false;
+      setDataState(el, "idle");
+    });
+  });
+  el.addEventListener("keydown", (event) => {
+    if (state.disabled.peek())
+      return;
+    handleActivation(event, () => {
+      el.click();
+    });
+  });
+  return el;
+}
+var Button = {
+  Root(options = {}) {
+    const state = {
+      disabled: signal2(options.disabled ?? false),
+      pressed: signal2(false)
+    };
+    const root = createButtonRoot(state, options);
+    return { root, state };
+  }
+};
+// src/checkbox/checkbox.ts
+import { signal as signal3 } from "@vertz/ui";
+function dataStateFor(checked) {
+  if (checked === "mixed")
+    return "indeterminate";
+  return checked ? "checked" : "unchecked";
+}
+var Checkbox = {
+  Root(options = {}) {
+    const { defaultChecked = false, disabled = false, onCheckedChange } = options;
+    const state = {
+      checked: signal3(defaultChecked),
+      disabled: signal3(disabled)
+    };
+    const root = document.createElement("button");
+    root.setAttribute("type", "button");
+    root.setAttribute("role", "checkbox");
+    root.id = uniqueId("checkbox");
+    setChecked(root, defaultChecked);
+    setDataState(root, dataStateFor(defaultChecked));
+    if (disabled) {
+      root.disabled = true;
+      root.setAttribute("aria-disabled", "true");
+    }
+    function toggle() {
+      if (state.disabled.peek())
+        return;
+      const current = state.checked.peek();
+      const next = current === "mixed" ? true : !current;
+      state.checked.value = next;
+      setChecked(root, next);
+      setDataState(root, dataStateFor(next));
+      onCheckedChange?.(next);
+    }
+    root.addEventListener("click", toggle);
+    root.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Space)) {
+        event.preventDefault();
+        toggle();
+      }
+    });
+    return { root, state };
+  }
+};
+// src/combobox/combobox.ts
+import { signal as signal4 } 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)
+    };
+    const optionElements = [];
+    const input = document.createElement("input");
+    input.setAttribute("type", "text");
+    input.setAttribute("role", "combobox");
+    input.setAttribute("aria-autocomplete", "list");
+    input.setAttribute("aria-controls", ids.contentId);
+    input.setAttribute("aria-haspopup", "listbox");
+    input.id = ids.triggerId;
+    input.value = defaultValue;
+    setExpanded(input, false);
+    const listbox = document.createElement("div");
+    listbox.setAttribute("role", "listbox");
+    listbox.id = ids.contentId;
+    setHidden(listbox, true);
+    setDataState(listbox, "closed");
+    function open() {
+      state.open.value = true;
+      setExpanded(input, true);
+      setHidden(listbox, false);
+      setDataState(listbox, "open");
+    }
+    function close() {
+      state.open.value = false;
+      state.activeIndex.value = -1;
+      setExpanded(input, false);
+      setHidden(listbox, true);
+      setDataState(listbox, "closed");
+      updateActiveDescendant(-1);
+    }
+    function selectOption(value) {
+      state.value.value = value;
+      state.inputValue.value = value;
+      input.value = value;
+      for (const opt of optionElements) {
+        const isActive = opt.getAttribute("data-value") === value;
+        setSelected(opt, isActive);
+        setDataState(opt, isActive ? "active" : "inactive");
+      }
+      onValueChange?.(value);
+      close();
+      input.focus();
+    }
+    function updateActiveDescendant(index) {
+      const opt = optionElements[index];
+      if (index >= 0 && opt) {
+        input.setAttribute("aria-activedescendant", opt.id);
+        for (let i = 0;i < optionElements.length; i++) {
+          const el = optionElements[i];
+          if (el)
+            setDataState(el, i === index ? "active" : "inactive");
+        }
+      } else {
+        input.removeAttribute("aria-activedescendant");
+      }
+    }
+    input.addEventListener("input", () => {
+      state.inputValue.value = input.value;
+      onInputChange?.(input.value);
+      if (!state.open.peek())
+        open();
+    });
+    input.addEventListener("focus", () => {
+      if (!state.open.peek() && input.value.length > 0)
+        open();
+    });
+    input.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isKey(event, Keys.ArrowDown)) {
+        event.preventDefault();
+        if (!state.open.peek()) {
+          open();
+        }
+        const next = Math.min(state.activeIndex.peek() + 1, optionElements.length - 1);
+        state.activeIndex.value = next;
+        updateActiveDescendant(next);
+        return;
+      }
+      if (isKey(event, Keys.ArrowUp)) {
+        event.preventDefault();
+        const prev = Math.max(state.activeIndex.peek() - 1, 0);
+        state.activeIndex.value = prev;
+        updateActiveDescendant(prev);
+        return;
+      }
+      if (isKey(event, Keys.Enter)) {
+        event.preventDefault();
+        const idx = state.activeIndex.peek();
+        if (idx >= 0 && idx < optionElements.length) {
+          const val = optionElements[idx]?.getAttribute("data-value");
+          if (val != null)
+            selectOption(val);
+        }
+        return;
+      }
+    });
+    function Option(value, label) {
+      const opt = document.createElement("div");
+      const optId = `${ids.contentId}-opt-${optionElements.length}`;
+      opt.setAttribute("role", "option");
+      opt.id = optId;
+      opt.setAttribute("data-value", value);
+      opt.textContent = label ?? value;
+      const isSelected = value === defaultValue;
+      setSelected(opt, isSelected);
+      setDataState(opt, isSelected ? "active" : "inactive");
+      opt.addEventListener("click", () => {
+        selectOption(value);
+      });
+      optionElements.push(opt);
+      listbox.appendChild(opt);
+      return opt;
+    }
+    return { input, listbox, state, Option };
+  }
+};
+// src/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) {
+        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/dialog/dialog.ts
+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) };
+    let restoreFocus = null;
+    let removeTrap = null;
+    const trigger = document.createElement("button");
+    trigger.setAttribute("type", "button");
+    trigger.id = ids.triggerId;
+    trigger.setAttribute("aria-controls", ids.contentId);
+    setExpanded(trigger, defaultOpen);
+    setDataState(trigger, defaultOpen ? "open" : "closed");
+    const overlay = document.createElement("div");
+    overlay.setAttribute("data-dialog-overlay", "");
+    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");
+    content.setAttribute("role", "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);
+    setDataState(content, defaultOpen ? "open" : "closed");
+    const title = document.createElement("h2");
+    title.id = titleId;
+    const close = document.createElement("button");
+    close.setAttribute("type", "button");
+    close.setAttribute("aria-label", "Close");
+    function openDialog() {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(overlay, false);
+      setHidden(content, false);
+      setDataState(trigger, "open");
+      setDataState(overlay, "open");
+      setDataState(content, "open");
+      restoreFocus = saveFocus();
+      if (modal) {
+        removeTrap = trapFocus(content);
+      }
+      queueMicrotask(() => focusFirst(content));
+      onOpenChange?.(true);
+    }
+    function closeDialog() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setHidden(overlay, true);
+      setHidden(content, true);
+      setDataState(trigger, "closed");
+      setDataState(overlay, "closed");
+      setDataState(content, "closed");
+      removeTrap?.();
+      removeTrap = null;
+      restoreFocus?.();
+      restoreFocus = null;
+      onOpenChange?.(false);
+    }
+    trigger.addEventListener("click", () => {
+      if (state.open.peek()) {
+        closeDialog();
+      } else {
+        openDialog();
+      }
+    });
+    close.addEventListener("click", () => {
+      closeDialog();
+    });
+    overlay.addEventListener("click", () => {
+      closeDialog();
+    });
+    content.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        event.stopPropagation();
+        closeDialog();
+      }
+    });
+    return { trigger, overlay, content, title, close, state };
+  }
+};
+// src/menu/menu.ts
+import { signal as signal6 } from "@vertz/ui";
+var Menu = {
+  Root(options = {}) {
+    const { onSelect } = options;
+    const ids = linkedIds("menu");
+    const state = {
+      open: signal6(false),
+      activeIndex: signal6(-1)
+    };
+    const items = [];
+    const trigger = document.createElement("button");
+    trigger.setAttribute("type", "button");
+    trigger.id = ids.triggerId;
+    trigger.setAttribute("aria-controls", ids.contentId);
+    trigger.setAttribute("aria-haspopup", "menu");
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    const content = document.createElement("div");
+    content.setAttribute("role", "menu");
+    content.id = ids.contentId;
+    setHidden(content, true);
+    setDataState(content, "closed");
+    function open() {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(trigger, "open");
+      setDataState(content, "open");
+      state.activeIndex.value = 0;
+      updateActiveItem(0);
+      items[0]?.focus();
+    }
+    function close() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setHidden(content, true);
+      setDataState(trigger, "closed");
+      setDataState(content, "closed");
+      trigger.focus();
+    }
+    function updateActiveItem(index) {
+      for (let i = 0;i < items.length; i++) {
+        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+      }
+    }
+    trigger.addEventListener("click", () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    });
+    trigger.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.ArrowDown, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        if (!state.open.peek())
+          open();
+      }
+    });
+    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);
+        }
+      }
+    });
+    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();
+      });
+      items.push(item);
+      content.appendChild(item);
+      return item;
+    }
+    return { trigger, content, state, Item };
+  }
+};
+// src/popover/popover.ts
+import { signal as signal7 } from "@vertz/ui";
+var Popover = {
+  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);
+    }
+    function close() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setHidden(content, true);
+      setDataState(trigger, "closed");
+      setDataState(content, "closed");
+      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/progress/progress.ts
+import { signal as signal8 } from "@vertz/ui";
+var Progress = {
+  Root(options = {}) {
+    const { defaultValue = 0, min = 0, max = 100 } = options;
+    const state = { value: signal8(defaultValue) };
+    const root = document.createElement("div");
+    root.setAttribute("role", "progressbar");
+    root.id = uniqueId("progress");
+    setValueRange(root, defaultValue, min, max);
+    const pct = (defaultValue - min) / (max - min) * 100;
+    if (pct >= 100) {
+      setDataState(root, "complete");
+    } else if (pct > 0) {
+      setDataState(root, "loading");
+    } else {
+      setDataState(root, "idle");
+    }
+    const indicator = document.createElement("div");
+    indicator.setAttribute("data-part", "indicator");
+    indicator.style.width = `${pct}%`;
+    root.appendChild(indicator);
+    function setValue(val) {
+      const clamped = Math.min(max, Math.max(min, val));
+      state.value.value = clamped;
+      setValueRange(root, clamped, min, max);
+      const p = (clamped - min) / (max - min) * 100;
+      indicator.style.width = `${p}%`;
+      if (p >= 100) {
+        setDataState(root, "complete");
+      } else if (p > 0) {
+        setDataState(root, "loading");
+      } else {
+        setDataState(root, "idle");
+      }
+    }
+    return { root, indicator, state, setValue };
+  }
+};
+// src/radio/radio.ts
+import { signal as signal9 } from "@vertz/ui";
+var Radio = {
+  Root(options = {}) {
+    const { defaultValue = "", onValueChange } = options;
+    const state = { value: signal9(defaultValue) };
+    const items = [];
+    const itemValues = [];
+    const root = document.createElement("div");
+    root.setAttribute("role", "radiogroup");
+    root.id = uniqueId("radiogroup");
+    function selectItem(value) {
+      state.value.value = value;
+      for (let i = 0;i < items.length; i++) {
+        const item = items[i];
+        if (!item)
+          continue;
+        const isActive = itemValues[i] === value;
+        setChecked(item, isActive);
+        setDataState(item, isActive ? "checked" : "unchecked");
+      }
+      setRovingTabindex(items, itemValues.indexOf(value));
+      onValueChange?.(value);
+    }
+    root.addEventListener("keydown", (event) => {
+      const result = handleListNavigation(event, items, { orientation: "vertical" });
+      if (result) {
+        const idx = items.indexOf(result);
+        if (idx >= 0) {
+          const val = itemValues[idx];
+          if (val !== undefined)
+            selectItem(val);
+        }
+      }
+    });
+    function Item(value, label) {
+      const item = document.createElement("div");
+      item.setAttribute("role", "radio");
+      item.id = uniqueId("radio");
+      item.setAttribute("data-value", value);
+      item.textContent = label ?? value;
+      const isActive = value === state.value.peek();
+      setChecked(item, isActive);
+      setDataState(item, isActive ? "checked" : "unchecked");
+      item.addEventListener("click", () => {
+        selectItem(value);
+        item.focus();
+      });
+      items.push(item);
+      itemValues.push(value);
+      root.appendChild(item);
+      setRovingTabindex(items, itemValues.indexOf(state.value.peek()));
+      return item;
+    }
+    return { root, state, Item };
+  }
+};
+// src/select/select.ts
+import { signal as signal10 } from "@vertz/ui";
+var Select = {
+  Root(options = {}) {
+    const { defaultValue = "", onValueChange } = options;
+    const ids = linkedIds("select");
+    const state = {
+      open: signal10(false),
+      value: signal10(defaultValue),
+      activeIndex: signal10(-1)
+    };
+    const items = [];
+    const trigger = document.createElement("button");
+    trigger.setAttribute("type", "button");
+    trigger.setAttribute("role", "combobox");
+    trigger.id = ids.triggerId;
+    trigger.setAttribute("aria-controls", ids.contentId);
+    trigger.setAttribute("aria-haspopup", "listbox");
+    setExpanded(trigger, false);
+    setDataState(trigger, "closed");
+    const content = document.createElement("div");
+    content.setAttribute("role", "listbox");
+    content.id = ids.contentId;
+    setHidden(content, true);
+    setDataState(content, "closed");
+    function open() {
+      state.open.value = true;
+      setExpanded(trigger, true);
+      setHidden(content, false);
+      setDataState(trigger, "open");
+      setDataState(content, "open");
+      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();
+    }
+    function close() {
+      state.open.value = false;
+      setExpanded(trigger, false);
+      setHidden(content, true);
+      setDataState(trigger, "closed");
+      setDataState(content, "closed");
+      trigger.focus();
+    }
+    function selectItem(value) {
+      state.value.value = value;
+      for (const item of items) {
+        const isActive = item.getAttribute("data-value") === value;
+        setSelected(item, isActive);
+        setDataState(item, isActive ? "active" : "inactive");
+      }
+      onValueChange?.(value);
+      close();
+    }
+    function updateActiveItem(index) {
+      for (let i = 0;i < items.length; i++) {
+        items[i]?.setAttribute("tabindex", i === index ? "0" : "-1");
+      }
+    }
+    trigger.addEventListener("click", () => {
+      if (state.open.peek()) {
+        close();
+      } else {
+        open();
+      }
+    });
+    trigger.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.ArrowDown, Keys.ArrowUp, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        if (!state.open.peek()) {
+          open();
+        }
+      }
+    });
+    content.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        event.preventDefault();
+        close();
+        return;
+      }
+      if (isKey(event, Keys.Enter, Keys.Space)) {
+        event.preventDefault();
+        const active = items[state.activeIndex.peek()];
+        if (active) {
+          const val = active.getAttribute("data-value");
+          if (val !== null)
+            selectItem(val);
+        }
+        return;
+      }
+      const result = handleListNavigation(event, items, { orientation: "vertical" });
+      if (result) {
+        const idx = items.indexOf(result);
+        if (idx >= 0) {
+          state.activeIndex.value = idx;
+          updateActiveItem(idx);
+        }
+      }
+    });
+    function Item(value, label) {
+      const item = document.createElement("div");
+      item.setAttribute("role", "option");
+      item.setAttribute("data-value", value);
+      item.setAttribute("tabindex", "-1");
+      item.textContent = label ?? value;
+      const isSelected = value === defaultValue;
+      setSelected(item, isSelected);
+      setDataState(item, isSelected ? "active" : "inactive");
+      item.addEventListener("click", () => {
+        selectItem(value);
+      });
+      items.push(item);
+      content.appendChild(item);
+      return item;
+    }
+    return { trigger, content, state, Item };
+  }
+};
+// src/slider/slider.ts
+import { signal as signal11 } from "@vertz/ui";
+var Slider = {
+  Root(options = {}) {
+    const {
+      defaultValue = 0,
+      min = 0,
+      max = 100,
+      step = 1,
+      disabled = false,
+      onValueChange
+    } = options;
+    const state = {
+      value: signal11(defaultValue),
+      disabled: signal11(disabled)
+    };
+    const root = document.createElement("div");
+    root.id = uniqueId("slider");
+    setDataState(root, disabled ? "disabled" : "active");
+    const track = document.createElement("div");
+    track.setAttribute("data-part", "track");
+    const thumb = document.createElement("div");
+    thumb.setAttribute("role", "slider");
+    thumb.setAttribute("tabindex", disabled ? "-1" : "0");
+    thumb.setAttribute("data-part", "thumb");
+    setValueRange(thumb, defaultValue, min, max);
+    if (disabled) {
+      thumb.setAttribute("aria-disabled", "true");
+    }
+    function clamp(val) {
+      return Math.min(max, Math.max(min, val));
+    }
+    function setValue(val) {
+      if (state.disabled.peek())
+        return;
+      const clamped = clamp(val);
+      state.value.value = clamped;
+      setValueRange(thumb, clamped, min, max);
+      const pct2 = (clamped - min) / (max - min) * 100;
+      thumb.style.left = `${pct2}%`;
+      setDataState(root, "active");
+      onValueChange?.(clamped);
+    }
+    thumb.addEventListener("keydown", (event) => {
+      if (state.disabled.peek())
+        return;
+      const current = state.value.peek();
+      if (isKey(event, Keys.ArrowRight, Keys.ArrowUp)) {
+        event.preventDefault();
+        setValue(current + step);
+      } else if (isKey(event, Keys.ArrowLeft, Keys.ArrowDown)) {
+        event.preventDefault();
+        setValue(current - step);
+      } else if (isKey(event, Keys.Home)) {
+        event.preventDefault();
+        setValue(min);
+      } else if (isKey(event, Keys.End)) {
+        event.preventDefault();
+        setValue(max);
+      }
+    });
+    track.appendChild(thumb);
+    root.appendChild(track);
+    const pct = (defaultValue - min) / (max - min) * 100;
+    thumb.style.left = `${pct}%`;
+    return { root, thumb, track, state };
+  }
+};
+// src/switch/switch.ts
+import { signal as signal12 } from "@vertz/ui";
+var Switch = {
+  Root(options = {}) {
+    const { defaultChecked = false, disabled = false, onCheckedChange } = options;
+    const state = {
+      checked: signal12(defaultChecked),
+      disabled: signal12(disabled)
+    };
+    const root = document.createElement("button");
+    root.setAttribute("type", "button");
+    root.setAttribute("role", "switch");
+    root.id = uniqueId("switch");
+    setChecked(root, defaultChecked);
+    setDataState(root, defaultChecked ? "checked" : "unchecked");
+    if (disabled) {
+      root.disabled = true;
+      root.setAttribute("aria-disabled", "true");
+    }
+    function toggle() {
+      if (state.disabled.peek())
+        return;
+      const next = !state.checked.peek();
+      state.checked.value = next;
+      setChecked(root, next);
+      setDataState(root, next ? "checked" : "unchecked");
+      onCheckedChange?.(next);
+    }
+    root.addEventListener("click", toggle);
+    root.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Space)) {
+        event.preventDefault();
+        toggle();
+      }
+    });
+    return { root, state };
+  }
+};
+// src/tabs/tabs.ts
+import { signal as signal13 } from "@vertz/ui";
+var Tabs = {
+  Root(options = {}) {
+    const { defaultValue = "", onValueChange } = options;
+    const state = { value: signal13(defaultValue) };
+    const triggers = [];
+    const panels = [];
+    const tabValues = [];
+    const root = document.createElement("div");
+    const list = document.createElement("div");
+    list.setAttribute("role", "tablist");
+    root.appendChild(list);
+    function selectTab(value) {
+      state.value.value = value;
+      for (let i = 0;i < tabValues.length; i++) {
+        const isActive = tabValues[i] === value;
+        const trig = triggers[i];
+        const panel = panels[i];
+        if (!trig || !panel)
+          continue;
+        setSelected(trig, isActive);
+        setDataState(trig, isActive ? "active" : "inactive");
+        trig.setAttribute("tabindex", isActive ? "0" : "-1");
+        setHidden(panel, !isActive);
+        setDataState(panel, isActive ? "active" : "inactive");
+      }
+      onValueChange?.(value);
+    }
+    list.addEventListener("keydown", (event) => {
+      const result = handleListNavigation(event, triggers, {
+        orientation: "horizontal"
+      });
+      if (result) {
+        const idx = triggers.indexOf(result);
+        if (idx >= 0) {
+          const val = tabValues[idx];
+          if (val !== undefined)
+            selectTab(val);
+        }
+      }
+    });
+    function Tab(value, label) {
+      const baseId = uniqueId("tab");
+      const triggerId = `${baseId}-trigger`;
+      const panelId = `${baseId}-panel`;
+      const isActive = value === state.value.peek();
+      const trig = document.createElement("button");
+      trig.setAttribute("type", "button");
+      trig.setAttribute("role", "tab");
+      trig.id = triggerId;
+      trig.setAttribute("aria-controls", panelId);
+      trig.setAttribute("data-value", value);
+      trig.textContent = label ?? value;
+      setSelected(trig, isActive);
+      setDataState(trig, isActive ? "active" : "inactive");
+      const panel = document.createElement("div");
+      panel.setAttribute("role", "tabpanel");
+      panel.id = panelId;
+      panel.setAttribute("aria-labelledby", triggerId);
+      panel.setAttribute("tabindex", "0");
+      setHidden(panel, !isActive);
+      setDataState(panel, isActive ? "active" : "inactive");
+      trig.addEventListener("click", () => {
+        selectTab(value);
+        trig.focus();
+      });
+      triggers.push(trig);
+      panels.push(panel);
+      tabValues.push(value);
+      list.appendChild(trig);
+      root.appendChild(panel);
+      setRovingTabindex(triggers, triggers.findIndex((t) => tabValues[triggers.indexOf(t)] === state.value.peek()));
+      return { trigger: trig, panel };
+    }
+    return { root, list, state, Tab };
+  }
+};
+// src/toast/toast.ts
+import { signal as signal14 } from "@vertz/ui";
+var Toast = {
+  Root(options = {}) {
+    const { duration = 5000, politeness = "polite" } = options;
+    const state = { messages: signal14([]) };
+    const region = document.createElement("div");
+    region.setAttribute("role", "status");
+    region.setAttribute("aria-live", politeness);
+    region.setAttribute("aria-atomic", "false");
+    setDataState(region, "empty");
+    function announce(content) {
+      const id = uniqueId("toast");
+      const el = document.createElement("div");
+      el.setAttribute("role", "status");
+      el.setAttribute("data-toast-id", id);
+      el.textContent = content;
+      setDataState(el, "open");
+      const msg = { id, content, el };
+      const messages = [...state.messages.peek(), msg];
+      state.messages.value = messages;
+      region.appendChild(el);
+      setDataState(region, "active");
+      if (duration > 0) {
+        setTimeout(() => dismiss(id), duration);
+      }
+      return msg;
+    }
+    function dismiss(id) {
+      const messages = state.messages.peek().filter((m) => m.id !== id);
+      state.messages.value = messages;
+      const el = region.querySelector(`[data-toast-id="${id}"]`);
+      if (el) {
+        setDataState(el, "closed");
+        el.remove();
+      }
+      if (messages.length === 0) {
+        setDataState(region, "empty");
+      }
+    }
+    return { region, state, announce, dismiss };
+  }
+};
+// src/tooltip/tooltip.ts
+import { signal as signal15 } from "@vertz/ui";
+var Tooltip = {
+  Root(options = {}) {
+    const { delay = 300, onOpenChange } = options;
+    const contentId = uniqueId("tooltip");
+    const state = { open: signal15(false) };
+    let showTimeout = null;
+    const trigger = document.createElement("span");
+    setDescribedBy(trigger, contentId);
+    const content = document.createElement("div");
+    content.setAttribute("role", "tooltip");
+    content.id = contentId;
+    setHidden(content, true);
+    setDataState(content, "closed");
+    function show() {
+      if (showTimeout !== null)
+        return;
+      showTimeout = setTimeout(() => {
+        state.open.value = true;
+        setHidden(content, false);
+        setDataState(content, "open");
+        onOpenChange?.(true);
+        showTimeout = null;
+      }, delay);
+    }
+    function hide() {
+      if (showTimeout !== null) {
+        clearTimeout(showTimeout);
+        showTimeout = null;
+      }
+      state.open.value = false;
+      setHidden(content, true);
+      setDataState(content, "closed");
+      onOpenChange?.(false);
+    }
+    trigger.addEventListener("mouseenter", show);
+    trigger.addEventListener("mouseleave", hide);
+    trigger.addEventListener("focus", show);
+    trigger.addEventListener("blur", hide);
+    trigger.addEventListener("keydown", (event) => {
+      if (isKey(event, Keys.Escape)) {
+        hide();
+      }
+    });
+    return { trigger, content, state };
+  }
+};
+export {
+  Tooltip,
+  Toast,
+  Tabs,
+  Switch,
+  Slider,
+  Select,
+  Radio,
+  Progress,
+  Popover,
+  Menu,
+  Dialog,
+  Combobox,
+  Checkbox,
+  Button,
+  Accordion
+};