@vertz/ui-primitives 0.2.20 → 0.2.22

package/dist/shared/{chunk-tfyg0qrp.js → chunk-c46v0fsw.js}

@@ -3,16 +3,16 @@ import {
   setExpanded,
   setHidden,
   setHiddenAnimated
-} from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-vevfhpc9.js";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
 
 // src/collapsible/collapsible.tsx
-import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { __element, __enterChildren, __exitChildren, __insert, __on, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function CollapsibleRoot(options = {}) {
   const { defaultOpen = false, disabled = false, onOpenChange, ...attrs } = options;
@@ -95,7 +95,7 @@ function CollapsibleRoot(options = {}) {
     {
       const __v = defaultOpen ? "" : "display: none";
       if (__v != null && __v !== false)
-        __el1.setAttribute("style", __v === true ? "" : __v);
+        __el1.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
     }
     return __el1;
   })();

package/dist/shared/{chunk-96d9nr7y.js → chunk-dhyr0s9n.js}

@@ -1,6 +1,6 @@
 import {
   Menu
-} from "./chunk-7ffg0caj.js";
+} from "./chunk-4rf1m34c.js";
 
 // src/dropdown-menu/dropdown-menu.ts
 var DropdownMenu = {

package/dist/shared/{chunk-avxcmmk6.js → chunk-e4mm5e59.js}

@@ -2,22 +2,22 @@ import {
   Keys,
   handleListNavigation,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setExpanded,
   setHidden,
   setHiddenAnimated
-} from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-vevfhpc9.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
 
 // src/accordion/accordion.tsx
-import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
+import { __element, __enterChildren, __exitChildren, __insert, __on, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function AccordionRoot(options = {}) {
   const { multiple = false, defaultValue = [], onValueChange, ...attrs } = options;
@@ -140,7 +140,7 @@ function AccordionRoot(options = {}) {
       {
         const __v = isOpen ? "" : "display: none";
         if (__v != null && __v !== false)
-          __el2.setAttribute("style", __v === true ? "" : __v);
+          __el2.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
       }
       return __el2;
     })();

package/dist/shared/{chunk-gt0wth9h.js → chunk-fqa5bwn1.js}

@@ -5,14 +5,14 @@ import {
   Keys,
   handleListNavigation,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setPressed
-} from "./chunk-vvjyx7fe.js";
+} from "./chunk-vevfhpc9.js";
 import {
   applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-2db2dnp3.js";
 
 // src/toggle-group/toggle-group.tsx
 import { __element, __on } from "@vertz/ui/internals";

package/dist/shared/{chunk-x0we8gcy.js → chunk-g8hnc95b.js}

@@ -9,18 +9,18 @@ import {
   Keys,
   handleListNavigation,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setHidden,
   setHiddenAnimated
-} from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-vevfhpc9.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
 
 // src/context-menu/context-menu.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";

package/dist/shared/chunk-j2tdpxgc.js

@@ -0,0 +1,185 @@
+import {
+  setRovingTabindex
+} from "./chunk-e2v1c9ex.js";
+import {
+  handleListNavigation
+} from "./chunk-7867pr13.js";
+import {
+  setDataState,
+  setHidden,
+  setSelected
+} from "./chunk-vevfhpc9.js";
+import {
+  uniqueId
+} from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
+
+// src/tabs/tabs.tsx
+import { __element, __enterChildren, __exitChildren, __insert, __on, __styleStr } from "@vertz/ui/internals";
+import { signal } from "@vertz/ui";
+function TabList(orientation, triggers, tabValues, selectTab) {
+  return (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "tablist");
+    {
+      const __v = orientation === "vertical" ? "vertical" : undefined;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-orientation", __v === true ? "" : __v);
+    }
+    __on(__el0, "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);
+        }
+      }
+    });
+    return __el0;
+  })();
+}
+function TabTrigger(triggerId, panelId, value, label, isActive, selectTab) {
+  return (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    __el0.setAttribute("role", "tab");
+    {
+      const __v = triggerId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = panelId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-controls", __v === true ? "" : __v);
+    }
+    {
+      const __v = value;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-value", __v === true ? "" : __v);
+    }
+    {
+      const __v = isActive ? "true" : "false";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-selected", __v === true ? "" : __v);
+    }
+    {
+      const __v = isActive ? "active" : "inactive";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", () => {
+      selectTab(value);
+    });
+    __enterChildren(__el0);
+    __insert(__el0, label ?? value);
+    __exitChildren();
+    return __el0;
+  })();
+}
+function TabsContainer(list) {
+  return (() => {
+    const __el0 = __element("div");
+    __enterChildren(__el0);
+    __insert(__el0, list);
+    __exitChildren();
+    return __el0;
+  })();
+}
+function TabPanel(panelId, triggerId, isActive) {
+  return (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "tabpanel");
+    {
+      const __v = panelId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __v === true ? "" : __v);
+    }
+    {
+      const __v = triggerId;
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-labelledby", __v === true ? "" : __v);
+    }
+    __el0.setAttribute("tabindex", "0");
+    {
+      const __v = isActive ? "false" : "true";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("aria-hidden", __v === true ? "" : __v);
+    }
+    {
+      const __v = isActive ? "active" : "inactive";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    {
+      const __v = isActive ? "" : "display: none";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
+    }
+    return __el0;
+  })();
+}
+function TabsRoot(options = {}) {
+  const { defaultValue = "", orientation = "horizontal", onValueChange, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const triggers = [];
+  const panels = [];
+  const tabValues = [];
+  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);
+  }
+  const list = TabList(orientation, triggers, tabValues, selectTab);
+  const root = TabsContainer(list);
+  const cleanups = [];
+  function Tab(value, label) {
+    const baseId = uniqueId("tab");
+    const triggerId = `${baseId}-trigger`;
+    const panelId = `${baseId}-panel`;
+    const isActive = value === state.value.peek();
+    const trig = TabTrigger(triggerId, panelId, value, label, isActive, selectTab);
+    const handleClick = () => {
+      trig.focus();
+    };
+    trig.addEventListener("click", handleClick);
+    cleanups.push(() => trig.removeEventListener("click", handleClick));
+    const panel = TabPanel(panelId, triggerId, isActive);
+    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 };
+  }
+  function destroy() {
+    for (const cleanup of cleanups)
+      cleanup();
+    cleanups.length = 0;
+  }
+  applyAttrs(root, attrs);
+  return { root, list, state, Tab, destroy };
+}
+var Tabs = {
+  Root: TabsRoot
+};
+
+export { Tabs };

package/dist/shared/{chunk-x2hz98qn.js → chunk-jda3v59q.js}

@@ -1,9 +1,9 @@
 import {
   Calendar
-} from "./chunk-18y8gfk0.js";
+} from "./chunk-k8nabsxm.js";
 import {
   Popover
-} from "./chunk-m1ptgp1s.js";
+} from "./chunk-9ezgd78r.js";
 
 // src/date-picker/date-picker.ts
 import { signal } from "@vertz/ui";

package/dist/shared/{chunk-18y8gfk0.js → chunk-k8nabsxm.js}

@@ -1,6 +1,6 @@
 import {
   applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-2db2dnp3.js";
 
 // src/calendar/calendar.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
@@ -36,6 +36,49 @@ function addMonths(date, months) {
   result.setMonth(result.getMonth() + months);
   return result;
 }
+function CalendarTitleEl() {
+  return (() => {
+    const __el0 = __element("div");
+    return __el0;
+  })();
+}
+function CalendarNavButton(onClick) {
+  return (() => {
+    const __el0 = __element("button");
+    __el0.setAttribute("type", "button");
+    __on(__el0, "click", onClick);
+    return __el0;
+  })();
+}
+function CalendarHeaderEl(prevButton, title, nextButton) {
+  return (() => {
+    const __el0 = __element("div");
+    __enterChildren(__el0);
+    __insert(__el0, prevButton);
+    __insert(__el0, title);
+    __insert(__el0, nextButton);
+    __exitChildren();
+    return __el0;
+  })();
+}
+function CalendarGridEl(onKeydown) {
+  return (() => {
+    const __el0 = __element("table");
+    __el0.setAttribute("role", "grid");
+    __on(__el0, "keydown", onKeydown);
+    return __el0;
+  })();
+}
+function CalendarRootEl(header, grid) {
+  return (() => {
+    const __el0 = __element("div");
+    __enterChildren(__el0);
+    __insert(__el0, header);
+    __insert(__el0, grid);
+    __exitChildren();
+    return __el0;
+  })();
+}
 function CalendarRoot(options = {}) {
   const {
     mode: modeOpt,
@@ -122,7 +165,14 @@ function CalendarRoot(options = {}) {
     }
     onValueChange?.(state.value.peek());
   }
+  const gridCleanups = [];
+  function cleanupGridListeners() {
+    for (const cleanup of gridCleanups)
+      cleanup();
+    gridCleanups.length = 0;
+  }
   function buildGrid() {
+    cleanupGridListeners();
     grid.innerHTML = "";
     const display = state.displayMonth.peek();
     const year = display.getFullYear();
@@ -184,10 +234,12 @@ function CalendarRoot(options = {}) {
             }
           }
         }
-        btn.addEventListener("click", () => {
+        const handleClick = () => {
           selectDate(cellDate);
           rebuildGrid();
-        });
+        };
+        btn.addEventListener("click", handleClick);
+        gridCleanups.push(() => btn.removeEventListener("click", handleClick));
         td.appendChild(btn);
         tr.appendChild(td);
         currentDate = addDays(currentDate, 1);
@@ -205,101 +257,71 @@ function CalendarRoot(options = {}) {
     onMonthChange?.(state.displayMonth.peek());
     rebuildGrid();
   }
-  const title = (() => {
-    const __el0 = __element("div");
-    return __el0;
-  })();
-  const prevButton = (() => {
-    const __el1 = __element("button");
-    __el1.setAttribute("type", "button");
-    __on(__el1, "click", () => navigateMonth(-1));
-    return __el1;
-  })();
-  const nextButton = (() => {
-    const __el2 = __element("button");
-    __el2.setAttribute("type", "button");
-    __on(__el2, "click", () => navigateMonth(1));
-    return __el2;
-  })();
-  const header = (() => {
-    const __el3 = __element("div");
-    __enterChildren(__el3);
-    __insert(__el3, prevButton);
-    __insert(__el3, title);
-    __insert(__el3, nextButton);
-    __exitChildren();
-    return __el3;
-  })();
-  const grid = (() => {
-    const __el4 = __element("table");
-    __el4.setAttribute("role", "grid");
-    __on(__el4, "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);
+  const title = CalendarTitleEl();
+  const prevButton = CalendarNavButton(() => navigateMonth(-1));
+  const nextButton = CalendarNavButton(() => navigateMonth(1));
+  const header = CalendarHeaderEl(prevButton, title, nextButton);
+  const grid = CalendarGridEl((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);
+        onMonthChange?.(state.displayMonth.peek());
         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);
-          onMonthChange?.(state.displayMonth.peek());
-          rebuildGrid();
-        }
-        const dateKey = next.toISOString().split("T")[0];
-        const btn = grid.querySelector(`button[data-date="${dateKey}"]`);
-        btn?.focus();
       }
-    });
-    return __el4;
-  })();
+      const dateKey = next.toISOString().split("T")[0];
+      const btn = grid.querySelector(`button[data-date="${dateKey}"]`);
+      btn?.focus();
+    }
+  });
   updateTitle();
   buildGrid();
-  const root = (() => {
-    const __el5 = __element("div");
-    __enterChildren(__el5);
-    __insert(__el5, header);
-    __insert(__el5, grid);
-    __exitChildren();
-    return __el5;
-  })();
+  const root = CalendarRootEl(header, grid);
+  function destroy() {
+    cleanupGridListeners();
+  }
   applyAttrs(root, attrs);
-  return { root, header, title, prevButton, nextButton, grid, state };
+  return { root, header, title, prevButton, nextButton, grid, state, destroy };
 }
 var Calendar = {
   Root: CalendarRoot

package/dist/shared/{chunk-j4cm8avr.js → chunk-kcnq15je.js}

@@ -1,17 +1,17 @@
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setValueRange
-} from "./chunk-vvjyx7fe.js";
+} from "./chunk-vevfhpc9.js";
 import {
   applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-2db2dnp3.js";
 
 // src/resizable-panel/resizable-panel.tsx
-import { __element, __on } from "@vertz/ui/internals";
+import { __element, __on, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function ResizablePanelRoot(options = {}) {
   const { orientation = "horizontal", onResize, ...attrs } = options;
@@ -42,7 +42,7 @@ function ResizablePanelRoot(options = {}) {
     {
       const __v = `display: flex; flex-direction: ${orientation === "horizontal" ? "row" : "column"};`;
       if (__v != null && __v !== false)
-        __el0.setAttribute("style", __v === true ? "" : __v);
+        __el0.setAttribute("style", typeof __v === "object" ? __styleStr(__v) : __v === true ? "" : String(__v));
     }
     {
       const __v = orientation;

package/dist/shared/{chunk-4da5zksy.js → chunk-mqs4qq0b.js}

@@ -1,9 +1,9 @@
 import {
   handleActivation
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-2db2dnp3.js";
 
 // src/button/button.tsx
 import { __element, __on } from "@vertz/ui/internals";