@vertz/ui-primitives 0.2.20 → 0.2.22

package/dist/shared/{chunk-bew4bjgf.js → chunk-07yzsaaw.js}

@@ -4,19 +4,19 @@ 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";
+} from "./chunk-vevfhpc9.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
 
 // src/hover-card/hover-card.tsx
 import { __element, __on } from "@vertz/ui/internals";

package/dist/shared/{chunk-yr9yzpvq.js → chunk-279bzynx.js}

@@ -3,40 +3,24 @@ import {
 } from "./chunk-e2v1c9ex.js";
 import {
   handleListNavigation
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setChecked,
-  setDataState
-} from "./chunk-vvjyx7fe.js";
-import {
-  applyAttrs
-} from "./chunk-dpsgb1xw.js";
+  setDataState,
+  setDisabled
+} from "./chunk-vevfhpc9.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
 
 // src/radio/radio.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
-function RadioRoot(options = {}) {
-  const { defaultValue = "", onValueChange, ...attrs } = options;
-  const state = { value: signal(defaultValue) };
-  const items = [];
-  const itemValues = [];
-  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);
-  }
-  const root = (() => {
+function RadioGroup(items, itemValues, selectItem) {
+  return (() => {
     const __el0 = __element("div");
     __el0.setAttribute("role", "radiogroup");
     {
@@ -57,48 +41,89 @@ function RadioRoot(options = {}) {
     });
     return __el0;
   })();
-  function Item(value, label) {
-    const isActive = value === state.value.peek();
-    const item = (() => {
-      const __el1 = __element("div");
-      __el1.setAttribute("role", "radio");
-      {
-        const __v = uniqueId("radio");
-        if (__v != null && __v !== false)
-          __el1.setAttribute("id", __v === true ? "" : __v);
-      }
-      {
-        const __v = value;
-        if (__v != null && __v !== false)
-          __el1.setAttribute("data-value", __v === true ? "" : __v);
-      }
-      {
-        const __v = isActive ? "true" : "false";
-        if (__v != null && __v !== false)
-          __el1.setAttribute("aria-checked", __v === true ? "" : __v);
-      }
-      {
-        const __v = isActive ? "checked" : "unchecked";
-        if (__v != null && __v !== false)
-          __el1.setAttribute("data-state", __v === true ? "" : __v);
-      }
-      __on(__el1, "click", () => {
+}
+function RadioItem(value, label, isActive, disabled, selectItem) {
+  const el = (() => {
+    const __el0 = __element("div");
+    __el0.setAttribute("role", "radio");
+    {
+      const __v = uniqueId("radio");
+      if (__v != null && __v !== false)
+        __el0.setAttribute("id", __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-checked", __v === true ? "" : __v);
+    }
+    {
+      const __v = isActive ? "checked" : "unchecked";
+      if (__v != null && __v !== false)
+        __el0.setAttribute("data-state", __v === true ? "" : __v);
+    }
+    __on(__el0, "click", () => {
+      if (!disabled)
         selectItem(value);
+    });
+    __enterChildren(__el0);
+    __insert(__el0, label ?? value);
+    __exitChildren();
+    return __el0;
+  })();
+  if (disabled) {
+    setDisabled(el, true);
+    el.setAttribute("data-disabled", "");
+  }
+  return el;
+}
+function RadioRoot(options = {}) {
+  const { defaultValue = "", onValueChange, ...attrs } = options;
+  const state = { value: signal(defaultValue) };
+  const items = [];
+  const itemValues = [];
+  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);
+  }
+  const root = RadioGroup(items, itemValues, selectItem);
+  const cleanups = [];
+  function Item(value, label, itemOptions) {
+    const isActive = value === state.value.peek();
+    const disabled = itemOptions?.disabled ?? false;
+    const item = RadioItem(value, label, isActive, disabled, selectItem);
+    const handleClick = () => {
+      if (!disabled)
         item.focus();
-      });
-      __enterChildren(__el1);
-      __insert(__el1, label ?? value);
-      __exitChildren();
-      return __el1;
-    })();
+    };
+    item.addEventListener("click", handleClick);
+    cleanups.push(() => item.removeEventListener("click", handleClick));
     items.push(item);
     itemValues.push(value);
     root.appendChild(item);
     setRovingTabindex(items, itemValues.indexOf(state.value.peek()));
     return item;
   }
+  function destroy() {
+    for (const cleanup of cleanups)
+      cleanup();
+    cleanups.length = 0;
+  }
   applyAttrs(root, attrs);
-  return { root, state, Item };
+  return { root, state, Item, destroy };
 }
 var Radio = {
   Root: RadioRoot

package/dist/shared/{chunk-sqs8kyb2.js → chunk-27xs9apd.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";
+} from "./chunk-vevfhpc9.js";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
 
 // src/menubar/menubar.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";

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

@@ -1,11 +1,15 @@
 // 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);
     } else if (key === "style") {
       const existing = el.getAttribute("style");
       el.setAttribute("style", existing ? `${existing}; ${String(value)}` : String(value));

package/dist/shared/{chunk-8ak7vdk1.js → chunk-2k8gxzdf.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";
+} from "./chunk-vevfhpc9.js";
 import {
   uniqueId
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.js";
 
 // src/slider/slider.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";

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

@@ -6,19 +6,19 @@ import {
 import {
   Keys,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setExpanded,
   setHidden,
   setHiddenAnimated
-} from "./chunk-vvjyx7fe.js";
+} from "./chunk-vevfhpc9.js";
 import {
   linkedIds
 } 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-7ffg0caj.js → chunk-4rf1m34c.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";
+} from "./chunk-vevfhpc9.js";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.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-gkddsbmh.js → chunk-56reyd5r.js}

@@ -1,48 +1,39 @@
 import {
   setDataState
-} 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/toast/toast.tsx
-import { __element, __enterChildren, __exitChildren, __insert } from "@vertz/ui/internals";
 import { signal } from "@vertz/ui";
+function createRegionElement(politeness) {
+  const el = document.createElement("div");
+  el.setAttribute("role", "status");
+  el.setAttribute("aria-live", politeness);
+  el.setAttribute("aria-atomic", "false");
+  el.setAttribute("data-state", "empty");
+  return el;
+}
+function createMessageElement(id, content) {
+  const el = document.createElement("div");
+  el.setAttribute("role", "status");
+  el.setAttribute("data-toast-id", id);
+  el.setAttribute("data-state", "open");
+  el.textContent = content;
+  return el;
+}
 function ToastRoot(options = {}) {
   const { duration = 5000, politeness = "polite", ...attrs } = options;
   const state = { messages: signal([]) };
-  const region = (() => {
-    const __el0 = __element("div");
-    __el0.setAttribute("role", "status");
-    {
-      const __v = politeness;
-      if (__v != null && __v !== false)
-        __el0.setAttribute("aria-live", __v === true ? "" : __v);
-    }
-    __el0.setAttribute("aria-atomic", "false");
-    __el0.setAttribute("data-state", "empty");
-    return __el0;
-  })();
+  const region = createRegionElement(politeness);
   applyAttrs(region, attrs);
   function announce(content) {
     const id = uniqueId("toast");
-    const el = (() => {
-      const __el1 = __element("div");
-      __el1.setAttribute("role", "status");
-      {
-        const __v = id;
-        if (__v != null && __v !== false)
-          __el1.setAttribute("data-toast-id", __v === true ? "" : __v);
-      }
-      __el1.setAttribute("data-state", "open");
-      __enterChildren(__el1);
-      __insert(__el1, content);
-      __exitChildren();
-      return __el1;
-    })();
+    const el = createMessageElement(id, content);
     const msg = { id, content, el };
     state.messages.value = [...state.messages.peek(), msg];
     region.appendChild(el);

package/dist/shared/{chunk-jctqs9m4.js → chunk-7867pr13.js}

@@ -24,24 +24,16 @@ function handleListNavigation(event, items, options = {}) {
   let nextIndex = -1;
   if (isKey(event, prevKey)) {
     event.preventDefault();
-    if (currentIndex <= 0) {
-      nextIndex = loop ? items.length - 1 : 0;
-    } else {
-      nextIndex = currentIndex - 1;
-    }
+    nextIndex = findEnabled(items, currentIndex, -1, loop);
   } else if (isKey(event, nextKey)) {
     event.preventDefault();
-    if (currentIndex >= items.length - 1) {
-      nextIndex = loop ? 0 : items.length - 1;
-    } else {
-      nextIndex = currentIndex + 1;
-    }
+    nextIndex = findEnabled(items, currentIndex, 1, loop);
   } else if (isKey(event, Keys.Home)) {
     event.preventDefault();
-    nextIndex = 0;
+    nextIndex = findEnabledFrom(items, 0, 1);
   } else if (isKey(event, Keys.End)) {
     event.preventDefault();
-    nextIndex = items.length - 1;
+    nextIndex = findEnabledFrom(items, items.length - 1, -1);
   }
   const target = items[nextIndex];
   if (target) {
@@ -50,6 +42,38 @@ function handleListNavigation(event, items, options = {}) {
   }
   return null;
 }
+function isDisabled(el) {
+  return el.getAttribute("aria-disabled") === "true";
+}
+function findEnabled(items, current, direction, loop) {
+  const len = items.length;
+  let candidate = current;
+  for (let i = 0;i < len; i++) {
+    candidate += direction;
+    if (loop) {
+      candidate = (candidate % len + len) % len;
+    } else if (candidate < 0 || candidate >= len) {
+      return -1;
+    }
+    const el = items[candidate];
+    if (el && !isDisabled(el))
+      return candidate;
+  }
+  return -1;
+}
+function findEnabledFrom(items, start, direction) {
+  const len = items.length;
+  let candidate = start;
+  for (let i = 0;i < len; i++) {
+    if (candidate < 0 || candidate >= len)
+      return -1;
+    const el = items[candidate];
+    if (el && !isDisabled(el))
+      return candidate;
+    candidate += direction;
+  }
+  return -1;
+}
 function handleActivation(event, handler) {
   if (isKey(event, Keys.Enter, Keys.Space)) {
     event.preventDefault();

package/dist/shared/{chunk-n9nwx58j.js → chunk-7bxsf80c.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-2db2dnp3.js";
 
 // src/toggle/toggle.tsx
 import { computed, signal } from "@vertz/ui";

package/dist/shared/{chunk-7krvqrwq.js → chunk-8qtexw5s.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";
+} from "./chunk-vevfhpc9.js";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.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-m1ptgp1s.js → chunk-9ezgd78r.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";
+} from "./chunk-vevfhpc9.js";
 import {
   linkedIds
 } from "./chunk-8y1jf6xr.js";
+import {
+  applyAttrs
+} from "./chunk-2db2dnp3.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-kg27s15c.js → chunk-ajpj10z0.js}

@@ -8,20 +8,20 @@ import {
   Keys,
   handleListNavigation,
   isKey
-} from "./chunk-jctqs9m4.js";
+} from "./chunk-7867pr13.js";
 import {
   setDataState,
   setExpanded,
   setHidden,
   setHiddenAnimated,
   setSelected
-} 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/select/select.tsx
 import { __element, __enterChildren, __exitChildren, __insert, __on } from "@vertz/ui/internals";