@vertz/ui-primitives 0.2.20 → 0.2.21

package/dist/shared/{chunk-g9qvd20g.js → chunk-je7tqf67.js}

@@ -1,13 +1,13 @@
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState
 } from "./chunk-vvjyx7fe.js";
 import {
   applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-q8dm19a5.js";
 
 // src/carousel/carousel.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";

package/dist/shared/{chunk-sqs8kyb2.js → chunk-kr5qg80z.js}

@@ -11,19 +11,19 @@ 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";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/menubar/menubar.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";

package/dist/shared/{chunk-7krvqrwq.js → chunk-kytkmdpc.js}

@@ -6,28 +6,30 @@ import {
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
+  setDescribedBy,
   setExpanded,
   setHidden,
   setHiddenAnimated,
   setLabelledBy
 } from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/dialog/dialog.tsx
-import { __element, __on } from "@vertz/ui/internals";
+import { __element, __on, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function DialogRoot(options = {}) {
   const { modal = true, defaultOpen = false, onOpenChange, ...attrs } = options;
   const ids = linkedIds("dialog");
   const titleId = `${ids.contentId}-title`;
+  const descriptionId = `${ids.contentId}-description`;
   const state = { open: signal(defaultOpen) };
   let restoreFocus = null;
   let removeTrap = null;
@@ -108,7 +110,7 @@ function DialogRoot(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));
     }
     __on(__el1, "click", () => closeDialog());
     return __el1;
@@ -139,7 +141,7 @@ function DialogRoot(options = {}) {
     {
       const __v = defaultOpen ? "" : "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));
     }
     __on(__el2, "keydown", (event) => {
       if (isKey(event, Keys.Escape)) {
@@ -151,6 +153,7 @@ function DialogRoot(options = {}) {
     return __el2;
   })();
   setLabelledBy(content, titleId);
+  setDescribedBy(content, descriptionId);
   const title = (() => {
     const __el3 = __element("h2");
     {
@@ -160,15 +163,34 @@ function DialogRoot(options = {}) {
     }
     return __el3;
   })();
-  const close = (() => {
-    const __el4 = __element("button");
-    __el4.setAttribute("type", "button");
-    __el4.setAttribute("aria-label", "Close");
-    __on(__el4, "click", () => closeDialog());
+  const description = (() => {
+    const __el4 = __element("p");
+    {
+      const __v = descriptionId;
+      if (__v != null && __v !== false)
+        __el4.setAttribute("id", __v === true ? "" : __v);
+    }
     return __el4;
   })();
+  const close = (() => {
+    const __el5 = __element("button");
+    __el5.setAttribute("type", "button");
+    __el5.setAttribute("aria-label", "Close");
+    __on(__el5, "click", () => closeDialog());
+    return __el5;
+  })();
   applyAttrs(content, attrs);
-  return { trigger, overlay, content, title, close, state, show: openDialog, hide: closeDialog };
+  return {
+    trigger,
+    overlay,
+    content,
+    title,
+    description,
+    close,
+    state,
+    show: openDialog,
+    hide: closeDialog
+  };
 }
 var Dialog = {
   Root: DialogRoot

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

@@ -1,6 +1,6 @@
 import {
   applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-q8dm19a5.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-n9nwx58j.js → chunk-q2q20y9a.js}

@@ -1,13 +1,13 @@
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
+} from "./chunk-7867pr13.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/toggle/toggle.tsx
 import { computed, signal } from "@vertz/ui";

package/dist/shared/{chunk-dpsgb1xw.js → chunk-q8dm19a5.js}

@@ -1,11 +1,16 @@
 // src/utils/attrs.ts
 function applyAttrs(el, attrs) {
+  const resolvedClass = attrs.className ?? attrs.class;
   for (const [key, value] of Object.entries(attrs)) {
     if (value == null)
       continue;
-    if (key === "class") {
+    if (key === "className" || key === "class") {
+      if (key === "class" && attrs.className != null)
+        continue;
       const existing = el.getAttribute("class");
-      el.setAttribute("class", existing ? `${existing} ${String(value)}` : String(value));
+      const classValue = String(resolvedClass);
+      el.setAttribute("class", existing ? `${existing} ${classValue}` : classValue);
+      continue;
     } else if (key === "style") {
       const existing = el.getAttribute("style");
       el.setAttribute("style", existing ? `${existing}; ${String(value)}` : String(value));

package/dist/shared/{chunk-7ffg0caj.js → chunk-q9fgfgh9.js}

@@ -8,25 +8,25 @@ 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";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/menu/menu.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function MenuRoot(options = {}) {
-  const { onSelect, positioning, ...attrs } = options;
+  const { onSelect, onOpenChange, positioning, ...attrs } = options;
   const ids = linkedIds("menu");
   const state = {
     open: signal(false),
@@ -47,6 +47,7 @@ function MenuRoot(options = {}) {
     setHidden(content, false);
     setDataState(trigger, "open");
     setDataState(content, "open");
+    onOpenChange?.(true);
     if (positioning) {
       const ref = positioning.referenceElement ?? trigger;
       const result = createFloatingPosition(ref, content, positioning);
@@ -75,6 +76,7 @@ function MenuRoot(options = {}) {
     setDataState(trigger, "closed");
     setDataState(content, "closed");
     setHiddenAnimated(content, true);
+    onOpenChange?.(false);
     if (positioning) {
       floatingCleanup?.();
       floatingCleanup = null;

package/dist/shared/{chunk-m1ptgp1s.js → chunk-qfk1ycfw.js}

@@ -11,22 +11,22 @@ import {
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setExpanded,
   setHidden,
   setHiddenAnimated
 } from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/popover/popover.tsx
-import { __element, __on } from "@vertz/ui/internals";
+import { __element, __on, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function PopoverRoot(options = {}) {
   const { defaultOpen = false, onOpenChange, positioning, ...attrs } = options;
@@ -122,7 +122,7 @@ function PopoverRoot(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));
     }
     __on(__el1, "keydown", (event) => {
       if (isKey(event, Keys.Escape)) {

package/dist/shared/{chunk-x0we8gcy.js → chunk-te4pdqnh.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";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/context-menu/context-menu.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";

package/dist/shared/{chunk-gkddsbmh.js → chunk-v9qddmh9.js}

@@ -1,12 +1,12 @@
 import {
   setDataState
 } from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/toast/toast.tsx
 import { __element, __enterChildren, __exitChildren, __insert } from "@vertz/ui/internals";

package/dist/shared/{chunk-t1vkvsz2.js → chunk-vm37m55w.js}

@@ -6,7 +6,7 @@ import {
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setExpanded,
@@ -18,7 +18,7 @@ import {
 } from "./chunk-8y1jf6xr.js";
 
 // src/sheet/sheet.tsx
-import { __element, __on } from "@vertz/ui/internals";
+import { __element, __on, __styleStr } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
 function SheetRoot(options = {}) {
   const { side = "right", defaultOpen = false, onOpenChange } = options;
@@ -114,7 +114,7 @@ function SheetRoot(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));
     }
     __on(__el1, "click", () => hide());
     return __el1;
@@ -146,7 +146,7 @@ function SheetRoot(options = {}) {
     {
       const __v = defaultOpen ? "" : "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));
     }
     __on(__el2, "keydown", (event) => {
       if (isKey(event, Keys.Escape)) {

package/dist/shared/{chunk-8ak7vdk1.js → chunk-y5vdb6br.js}

@@ -1,17 +1,17 @@
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setValueRange
 } from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-q8dm19a5.js";
 
 // src/slider/slider.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";

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

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