@vertz/ui-primitives 0.2.16 → 0.2.17

package/dist/src/toast/toast.d.ts

@@ -1,5 +1,17 @@
 import { Signal } from "@vertz/ui";
-interface ToastOptions {
+interface ElementAttrs {
+	class?: string;
+	id?: string;
+	style?: string;
+	title?: string;
+	role?: string;
+	tabindex?: number | string;
+	hidden?: boolean | string;
+	autofocus?: boolean;
+	[key: `data-${string}`]: string | undefined;
+	[key: `aria-${string}`]: string | undefined;
+}
+interface ToastOptions extends ElementAttrs {
 	duration?: number;
 	politeness?: "polite" | "assertive";
 }
@@ -15,7 +27,7 @@ interface ToastElements {
 	region: HTMLDivElement;
 }
 declare const Toast: {
-	Root(options?: ToastOptions): ToastElements & {
+	Root: (options?: ToastOptions) => ToastElements & {
 		state: ToastState;
 		announce: (content: string) => ToastMessage;
 		dismiss: (id: string) => void;

package/dist/src/toast/toast.js

@@ -1,7 +1,8 @@
 import {
   Toast
-} from "../../shared/chunk-cvbf1js1.js";
+} from "../../shared/chunk-gkddsbmh.js";
 import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-dpsgb1xw.js";
 import"../../shared/chunk-8y1jf6xr.js";
 export {
   Toast

package/dist/src/toggle/toggle.d.ts

@@ -1,4 +1,16 @@
-interface ToggleOptions {
+interface ElementAttrs {
+	class?: string;
+	id?: string;
+	style?: string;
+	title?: string;
+	role?: string;
+	tabindex?: number | string;
+	hidden?: boolean | string;
+	autofocus?: boolean;
+	[key: `data-${string}`]: string | undefined;
+	[key: `aria-${string}`]: string | undefined;
+}
+interface ToggleOptions extends ElementAttrs {
 	defaultPressed?: boolean;
 	disabled?: boolean;
 	onPressedChange?: (pressed: boolean) => void;

package/dist/src/toggle/toggle.js

@@ -1,7 +1,8 @@
 import {
   Toggle
-} from "../../shared/chunk-9cqe2q6e.js";
+} from "../../shared/chunk-n9nwx58j.js";
 import"../../shared/chunk-jctqs9m4.js";
+import"../../shared/chunk-dpsgb1xw.js";
 import"../../shared/chunk-8y1jf6xr.js";
 export {
   Toggle

package/dist/src/toggle-group/toggle-group.d.ts

@@ -1,5 +1,17 @@
 import { Signal } from "@vertz/ui";
-interface ToggleGroupOptions {
+interface ElementAttrs {
+	class?: string;
+	id?: string;
+	style?: string;
+	title?: string;
+	role?: string;
+	tabindex?: number | string;
+	hidden?: boolean | string;
+	autofocus?: boolean;
+	[key: `data-${string}`]: string | undefined;
+	[key: `aria-${string}`]: string | undefined;
+}
+interface ToggleGroupOptions extends ElementAttrs {
 	type?: "single" | "multiple";
 	defaultValue?: string[];
 	orientation?: "horizontal" | "vertical";
@@ -14,7 +26,7 @@ interface ToggleGroupElements {
 	root: HTMLDivElement;
 }
 declare const ToggleGroup: {
-	Root(options?: ToggleGroupOptions): ToggleGroupElements & {
+	Root: (options?: ToggleGroupOptions) => ToggleGroupElements & {
 		state: ToggleGroupState;
 		Item: (value: string) => HTMLButtonElement;
 	};

package/dist/src/toggle-group/toggle-group.js

@@ -1,9 +1,10 @@
 import {
   ToggleGroup
-} from "../../shared/chunk-tk1k1bet.js";
+} from "../../shared/chunk-gt0wth9h.js";
 import"../../shared/chunk-e2v1c9ex.js";
 import"../../shared/chunk-jctqs9m4.js";
 import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-dpsgb1xw.js";
 export {
   ToggleGroup
 };

package/dist/src/tooltip/tooltip.d.ts

@@ -1,4 +1,16 @@
 import { Signal } from "@vertz/ui";
+interface ElementAttrs {
+	class?: string;
+	id?: string;
+	style?: string;
+	title?: string;
+	role?: string;
+	tabindex?: number | string;
+	hidden?: boolean | string;
+	autofocus?: boolean;
+	[key: `data-${string}`]: string | undefined;
+	[key: `aria-${string}`]: string | undefined;
+}
 import { Middleware, Placement, Strategy } from "@floating-ui/dom";
 interface FloatingOptions {
 	placement?: Placement;
@@ -12,7 +24,7 @@ interface FloatingOptions {
 	/** Override the reference element used for positioning (e.g., a custom trigger wrapping the primitive trigger). */
 	referenceElement?: HTMLElement;
 }
-interface TooltipOptions {
+interface TooltipOptions extends ElementAttrs {
 	delay?: number;
 	onOpenChange?: (open: boolean) => void;
 	positioning?: FloatingOptions;
@@ -25,7 +37,7 @@ interface TooltipElements {
 	content: HTMLDivElement;
 }
 declare const Tooltip: {
-	Root(options?: TooltipOptions): TooltipElements & {
+	Root: (options?: TooltipOptions) => TooltipElements & {
 		state: TooltipState;
 	};
 };

package/dist/src/tooltip/tooltip.js

@@ -1,9 +1,10 @@
 import {
   Tooltip
-} from "../../shared/chunk-6dmt4513.js";
+} from "../../shared/chunk-9hj9p7s2.js";
 import"../../shared/chunk-0mcr52hc.js";
 import"../../shared/chunk-jctqs9m4.js";
 import"../../shared/chunk-vvjyx7fe.js";
+import"../../shared/chunk-dpsgb1xw.js";
 import"../../shared/chunk-8y1jf6xr.js";
 export {
   Tooltip

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/ui-primitives",
-  "version": "0.2.16",
+  "version": "0.2.17",
   "type": "module",
   "license": "MIT",
   "description": "Headless UI primitives for Vertz — Accordion, Dialog, Select, and more",
@@ -36,11 +36,11 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.5",
-    "@vertz/ui": "^0.2.15"
+    "@vertz/ui": "^0.2.16"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.7.0",
-    "@vertz/ui-compiler": "^0.2.15",
+    "@vertz/ui-compiler": "^0.2.16",
     "bunup": "^0.16.31",
     "happy-dom": "^20.7.0",
     "typescript": "^5.7.0"

package/dist/shared/chunk-2h5qpc00.js

@@ -1,98 +0,0 @@
-import {
-  setRovingTabindex
-} from "./chunk-e2v1c9ex.js";
-import {
-  handleListNavigation
-} from "./chunk-jctqs9m4.js";
-import {
-  setDataState,
-  setHidden,
-  setSelected
-} from "./chunk-vvjyx7fe.js";
-import {
-  uniqueId
-} from "./chunk-8y1jf6xr.js";
-
-// src/tabs/tabs.ts
-import { signal } from "@vertz/ui";
-var Tabs = {
-  Root(options = {}) {
-    const { defaultValue = "", orientation = "horizontal", onValueChange } = options;
-    const state = { value: signal(defaultValue) };
-    const triggers = [];
-    const panels = [];
-    const tabValues = [];
-    const root = document.createElement("div");
-    const list = document.createElement("div");
-    list.setAttribute("role", "tablist");
-    if (orientation === "vertical") {
-      list.setAttribute("aria-orientation", "vertical");
-    }
-    root.appendChild(list);
-    function selectTab(value) {
-      state.value.value = value;
-      for (let i = 0;i < tabValues.length; i++) {
-        const isActive = tabValues[i] === value;
-        const trig = triggers[i];
-        const panel = panels[i];
-        if (!trig || !panel)
-          continue;
-        setSelected(trig, isActive);
-        setDataState(trig, isActive ? "active" : "inactive");
-        trig.setAttribute("tabindex", isActive ? "0" : "-1");
-        setHidden(panel, !isActive);
-        setDataState(panel, isActive ? "active" : "inactive");
-      }
-      onValueChange?.(value);
-    }
-    list.addEventListener("keydown", (event) => {
-      const result = handleListNavigation(event, triggers, {
-        orientation
-      });
-      if (result) {
-        const idx = triggers.indexOf(result);
-        if (idx >= 0) {
-          const val = tabValues[idx];
-          if (val !== undefined)
-            selectTab(val);
-        }
-      }
-    });
-    function Tab(value, label) {
-      const baseId = uniqueId("tab");
-      const triggerId = `${baseId}-trigger`;
-      const panelId = `${baseId}-panel`;
-      const isActive = value === state.value.peek();
-      const trig = document.createElement("button");
-      trig.setAttribute("type", "button");
-      trig.setAttribute("role", "tab");
-      trig.id = triggerId;
-      trig.setAttribute("aria-controls", panelId);
-      trig.setAttribute("data-value", value);
-      trig.textContent = label ?? value;
-      setSelected(trig, isActive);
-      setDataState(trig, isActive ? "active" : "inactive");
-      const panel = document.createElement("div");
-      panel.setAttribute("role", "tabpanel");
-      panel.id = panelId;
-      panel.setAttribute("aria-labelledby", triggerId);
-      panel.setAttribute("tabindex", "0");
-      setHidden(panel, !isActive);
-      setDataState(panel, isActive ? "active" : "inactive");
-      trig.addEventListener("click", () => {
-        selectTab(value);
-        trig.focus();
-      });
-      triggers.push(trig);
-      panels.push(panel);
-      tabValues.push(value);
-      list.appendChild(trig);
-      root.appendChild(panel);
-      setRovingTabindex(triggers, triggers.findIndex((t) => tabValues[triggers.indexOf(t)] === state.value.peek()));
-      return { trigger: trig, panel };
-    }
-    return { root, list, state, Tab };
-  }
-};
-
-export { Tabs };

package/dist/shared/chunk-31yptvbf.js

@@ -1,151 +0,0 @@
-import {
-  createFloatingPosition
-} from "./chunk-0mcr52hc.js";
-import {
-  Keys,
-  isKey
-} from "./chunk-jctqs9m4.js";
-import {
-  setDataState,
-  setExpanded,
-  setHidden,
-  setHiddenAnimated
-} from "./chunk-vvjyx7fe.js";
-import {
-  uniqueId
-} from "./chunk-8y1jf6xr.js";
-
-// src/hover-card/hover-card.ts
-import { signal } from "@vertz/ui";
-var HoverCard = {
-  Root(options = {}) {
-    const { openDelay = 700, closeDelay = 300, onOpenChange, positioning } = options;
-    const contentId = uniqueId("hovercard");
-    const state = { open: signal(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 };
-  }
-};
-
-export { HoverCard };

package/dist/shared/chunk-3pantb0p.js

@@ -1,108 +0,0 @@
-import {
-  focusFirst,
-  saveFocus,
-  trapFocus
-} from "./chunk-e2v1c9ex.js";
-import {
-  Keys,
-  isKey
-} from "./chunk-jctqs9m4.js";
-import {
-  setDataState,
-  setExpanded,
-  setHidden,
-  setHiddenAnimated,
-  setLabelledBy
-} from "./chunk-vvjyx7fe.js";
-import {
-  linkedIds
-} from "./chunk-8y1jf6xr.js";
-
-// src/dialog/dialog.ts
-import { signal } 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: signal(defaultOpen) };
-    let restoreFocus = null;
-    let removeTrap = null;
-    const trigger = document.createElement("button");
-    trigger.setAttribute("type", "button");
-    trigger.id = ids.triggerId;
-    trigger.setAttribute("aria-controls", ids.contentId);
-    setExpanded(trigger, defaultOpen);
-    setDataState(trigger, defaultOpen ? "open" : "closed");
-    const overlay = document.createElement("div");
-    overlay.setAttribute("data-dialog-overlay", "");
-    setHidden(overlay, !defaultOpen);
-    setDataState(overlay, defaultOpen ? "open" : "closed");
-    const content = document.createElement("div");
-    content.setAttribute("role", "dialog");
-    content.id = ids.contentId;
-    if (modal) {
-      content.setAttribute("aria-modal", "true");
-    }
-    setLabelledBy(content, titleId);
-    setHidden(content, !defaultOpen);
-    setDataState(content, defaultOpen ? "open" : "closed");
-    const title = document.createElement("h2");
-    title.id = titleId;
-    const close = document.createElement("button");
-    close.setAttribute("type", "button");
-    close.setAttribute("aria-label", "Close");
-    function openDialog() {
-      state.open.value = true;
-      setExpanded(trigger, true);
-      setHidden(overlay, false);
-      setHidden(content, false);
-      setDataState(trigger, "open");
-      setDataState(overlay, "open");
-      setDataState(content, "open");
-      restoreFocus = saveFocus();
-      if (modal) {
-        removeTrap = trapFocus(content);
-      }
-      queueMicrotask(() => focusFirst(content));
-      onOpenChange?.(true);
-    }
-    function closeDialog() {
-      state.open.value = false;
-      setExpanded(trigger, false);
-      setDataState(trigger, "closed");
-      setDataState(overlay, "closed");
-      setDataState(content, "closed");
-      setHiddenAnimated(overlay, true);
-      setHiddenAnimated(content, true);
-      removeTrap?.();
-      removeTrap = null;
-      restoreFocus?.();
-      restoreFocus = null;
-      onOpenChange?.(false);
-    }
-    trigger.addEventListener("click", () => {
-      if (state.open.peek()) {
-        closeDialog();
-      } else {
-        openDialog();
-      }
-    });
-    close.addEventListener("click", () => {
-      closeDialog();
-    });
-    overlay.addEventListener("click", () => {
-      closeDialog();
-    });
-    content.addEventListener("keydown", (event) => {
-      if (isKey(event, Keys.Escape)) {
-        event.preventDefault();
-        event.stopPropagation();
-        closeDialog();
-      }
-    });
-    return { trigger, overlay, content, title, close, state, show: openDialog, hide: closeDialog };
-  }
-};
-
-export { Dialog };

package/dist/shared/chunk-3s6s6f06.js

@@ -1,61 +0,0 @@
-import {
-  setDataState,
-  setExpanded,
-  setHidden,
-  setHiddenAnimated
-} from "./chunk-vvjyx7fe.js";
-import {
-  linkedIds
-} from "./chunk-8y1jf6xr.js";
-
-// src/collapsible/collapsible.ts
-import { signal } from "@vertz/ui";
-var Collapsible = {
-  Root(options = {}) {
-    const { defaultOpen = false, disabled = false, onOpenChange } = options;
-    const ids = linkedIds("collapsible");
-    const state = {
-      open: signal(defaultOpen),
-      disabled: signal(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 };
-  }
-};
-
-export { Collapsible };