@codbex/harmonia 0.5.0 → 0.6.0

package/dist/harmonia.esm.js

@@ -18425,14 +18425,14 @@ var v4_default = v4;
 // src/components/accordion.js
 function accordion_default(Alpine) {
   Alpine.directive("h-accordion", (el, { expression, modifiers }, { Alpine: Alpine2 }) => {
-    el._accordion = modifiers.includes("single") ? Alpine2.reactive({
+    el._h_accordion = modifiers.includes("single") ? Alpine2.reactive({
       single: true,
       expandedId: expression ?? ""
     }) : { single: false };
     el.setAttribute("data-slot", "accordion");
   });
   Alpine.directive("h-accordion-item", (el, { expression, modifiers }, { effect, Alpine: Alpine2 }) => {
-    const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_accordion"));
+    const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
     if (!accordion) {
       throw new Error("h-accordion-item must be inside an h-accordion");
     }
@@ -18440,24 +18440,24 @@ function accordion_default(Alpine) {
     el.setAttribute("data-slot", "accordion-item");
     const itemId = expression ?? `ha${v4_default()}`;
     function getIsExpanded() {
-      if (accordion._accordion.single) {
-        if (accordion._accordion.expandedId !== "") {
-          return accordion._accordion.expandedId === itemId;
+      if (accordion._h_accordion.single) {
+        if (accordion._h_accordion.expandedId !== "") {
+          return accordion._h_accordion.expandedId === itemId;
         } else if (modifiers.includes("default")) {
-          accordion._accordion.expandedId = itemId;
+          accordion._h_accordion.expandedId = itemId;
           return true;
         }
         return false;
       }
       return modifiers.includes("default");
     }
-    el._accordionItem = Alpine2.reactive({
+    el._h_accordionItem = Alpine2.reactive({
       id: itemId,
       controls: `ha${v4_default()}`,
       expanded: getIsExpanded()
     });
     const setAttributes = () => {
-      el.setAttribute("data-state", el._accordionItem.expanded ? "open" : "closed");
+      el.setAttribute("data-state", el._h_accordionItem.expanded ? "open" : "closed");
     };
     setAttributes();
     effect(setAttributes);
@@ -18466,8 +18466,8 @@ function accordion_default(Alpine) {
     if (el.tagName.length !== 2 && !el.tagName.startsWith("H")) {
       throw new Error("h-accordion-trigger must be a header element");
     }
-    const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_accordion"));
-    const accordionItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_accordionItem"));
+    const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
+    const accordionItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordionItem"));
     if (!accordionItem || !accordion) {
       throw new Error("h-accordion-trigger must be inside an h-accordion-item, which must be inside an h-accordion");
     }
@@ -18522,17 +18522,17 @@ function accordion_default(Alpine) {
         button.appendChild(chevronDown);
       });
     });
-    button.setAttribute("id", accordionItem._accordionItem.id);
-    button.setAttribute("aria-controls", accordionItem._accordionItem.controls);
+    button.setAttribute("id", accordionItem._h_accordionItem.id);
+    button.setAttribute("aria-controls", accordionItem._h_accordionItem.controls);
     const setAttributes = () => {
-      button.setAttribute("data-state", accordionItem._accordionItem.expanded ? "open" : "closed");
-      button.setAttribute("aria-expanded", accordionItem._accordionItem.expanded);
+      button.setAttribute("data-state", accordionItem._h_accordionItem.expanded ? "open" : "closed");
+      button.setAttribute("aria-expanded", accordionItem._h_accordionItem.expanded);
     };
     const handler2 = () => {
-      accordionItem._accordionItem.expanded = !accordionItem._accordionItem.expanded;
+      accordionItem._h_accordionItem.expanded = !accordionItem._h_accordionItem.expanded;
       setAttributes();
-      if (accordion._accordion.single) {
-        accordion._accordion.expandedId = accordionItem._accordionItem.id;
+      if (accordion._h_accordion.single) {
+        accordion._h_accordion.expandedId = accordionItem._h_accordionItem.id;
       }
     };
     setAttributes();
@@ -18540,10 +18540,10 @@ function accordion_default(Alpine) {
     cleanup(() => {
       el.removeEventListener("click", handler2);
     });
-    if (accordion._accordion.single) {
+    if (accordion._h_accordion.single) {
       effect(() => {
-        if (accordion._accordion.expandedId !== accordionItem._accordionItem.id) {
-          accordionItem._accordionItem.expanded = false;
+        if (accordion._h_accordion.expandedId !== accordionItem._h_accordionItem.id) {
+          accordionItem._h_accordionItem.expanded = false;
           setAttributes();
         }
       });
@@ -18552,13 +18552,13 @@ function accordion_default(Alpine) {
   Alpine.directive("h-accordion-content", (el, {}, { effect, Alpine: Alpine2 }) => {
     el.classList.add("pt-0", "pb-4", "overflow-hidden", "text-sm", "data-[state=closed]:hidden");
     el.setAttribute("data-slot", "accordion-content");
-    const parent = Alpine2.findClosest(el.parentElement, (parent2) => parent2.hasOwnProperty("_accordionItem"));
+    const parent = Alpine2.findClosest(el.parentElement, (parent2) => parent2.hasOwnProperty("_h_accordionItem"));
     if (parent) {
-      el.setAttribute("id", parent._accordionItem.controls);
-      el.setAttribute("aria-labelledby", parent._accordionItem.id);
-      el.setAttribute("data-state", parent._accordionItem.expanded ? "open" : "closed");
+      el.setAttribute("id", parent._h_accordionItem.controls);
+      el.setAttribute("aria-labelledby", parent._h_accordionItem.id);
+      el.setAttribute("data-state", parent._h_accordionItem.expanded ? "open" : "closed");
       effect(() => {
-        el.setAttribute("data-state", parent._accordionItem.expanded ? "open" : "closed");
+        el.setAttribute("data-state", parent._h_accordionItem.expanded ? "open" : "closed");
       });
     }
   });
@@ -18648,7 +18648,7 @@ function avatar_default(Alpine) {
       "[&>svg]:size-5"
     );
     el.setAttribute("data-slot", "avatar");
-    el._avatar = Alpine2.reactive({
+    el._h_avatar = Alpine2.reactive({
       fallback: false
     });
     if (el.tagName === "BUTTON") {
@@ -18656,7 +18656,7 @@ function avatar_default(Alpine) {
     }
   });
   Alpine.directive("h-avatar-image", (el, {}, { cleanup }) => {
-    const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_avatar"));
+    const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
     if (!avatar) {
       throw new Error("h-avatar-image must be inside an h-avatar element");
     }
@@ -18667,7 +18667,7 @@ function avatar_default(Alpine) {
     function fallback(active = false) {
       if (active) el.classList.add("hidden");
       else el.classList.remove("hidden");
-      avatar._avatar.fallback = active;
+      avatar._h_avatar.fallback = active;
     }
     function completeCheck() {
       if (el.complete) {
@@ -18692,14 +18692,14 @@ function avatar_default(Alpine) {
     });
   });
   Alpine.directive("h-avatar-fallback", (el, {}, { effect }) => {
-    const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_avatar"));
+    const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
     if (!avatar) {
       throw new Error("h-avatar-fallback must be inside an h-avatar element");
     }
     el.classList.add("hidden", "bg-muted", "flex", "size-full", "items-center", "justify-center");
     el.setAttribute("data-slot", "avatar-fallback");
     effect(() => {
-      if (avatar._avatar.fallback) el.classList.remove("hidden");
+      if (avatar._h_avatar.fallback) el.classList.remove("hidden");
       else el.classList.add("hidden");
     });
   });
@@ -18713,7 +18713,7 @@ function badge_default(Alpine) {
       "inline-flex",
       "items-center",
       "justify-center",
-      "rounded-md",
+      "rounded-full",
       "border",
       "px-2",
       "py-0.5",
@@ -18765,7 +18765,7 @@ var buttonVariants = {
   default: [
     "bg-secondary",
     "text-secondary-foreground",
-    "shadow-control",
+    "shadow-button",
     "hover:bg-secondary-hover",
     "active:bg-secondary-active",
     "aria-pressed:bg-secondary-active",
@@ -18776,7 +18776,7 @@ var buttonVariants = {
   primary: [
     "bg-primary",
     "text-primary-foreground",
-    "shadow-control",
+    "shadow-button",
     "hover:bg-primary-hover",
     "active:bg-primary-active",
     "aria-pressed:bg-primary-active",
@@ -18787,7 +18787,7 @@ var buttonVariants = {
   positive: [
     "bg-positive",
     "text-positive-foreground",
-    "shadow-control",
+    "shadow-button",
     "hover:bg-positive-hover",
     "active:bg-positive-active",
     "aria-pressed:bg-positive-active",
@@ -18798,7 +18798,7 @@ var buttonVariants = {
   negative: [
     "bg-negative",
     "text-negative-foreground",
-    "shadow-control",
+    "shadow-button",
     "hover:bg-negative-hover",
     "active:bg-negative-active",
     "aria-pressed:bg-negative-active",
@@ -18809,7 +18809,7 @@ var buttonVariants = {
   warning: [
     "bg-warning",
     "text-warning-foreground",
-    "shadow-control",
+    "shadow-button",
     "hover:bg-warning-hover",
     "active:bg-warning-active",
     "aria-pressed:bg-warning-active",
@@ -18900,21 +18900,24 @@ function button_default(Alpine) {
       el.setAttribute("data-slot", "button");
     }
     const inGroup = modifiers.includes("group");
+    let lastSize;
     function setVariant(variant) {
       for (const [_, value] of Object.entries(buttonVariants)) {
         el.classList.remove(...value);
       }
       if (buttonVariants.hasOwnProperty(variant)) el.classList.add(...buttonVariants[variant]);
     }
-    function setSize(size3) {
+    function setSize(size3 = "default") {
+      el.classList.remove(...getButtonSize(lastSize, inGroup));
       el.classList.add(...getButtonSize(size3, inGroup));
-      if (size3 && size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
+      if (size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
         console.error('h-button: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute', el);
       }
+      lastSize = size3;
     }
     setVariant(el.getAttribute("data-variant") ?? "default");
     if (inGroup) {
-      el.classList.remove("shadow-control", "inline-flex");
+      el.classList.remove("shadow-button", "inline-flex");
       el.classList.add("shadow-none", "flex");
       setSize(el.getAttribute("data-size") ?? "xs");
     } else {
@@ -20454,7 +20457,7 @@ var computePosition2 = (reference, floating, options) => {
 var import_lucide2 = __toESM(require_lucide(), 1);
 function calendar_default(Alpine) {
   Alpine.directive("h-calendar", (el, { expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
-    const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_datepicker"));
+    const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
     el.classList.add("border", "rounded-control", "gap-2", "p-2");
     el.setAttribute("tabindex", "-1");
     if (datepicker) {
@@ -20462,9 +20465,9 @@ function calendar_default(Alpine) {
       el.setAttribute("role", "dialog");
       el.setAttribute("aria-modal", "true");
       el.setAttribute("data-slot", "date-picker-calendar");
-      el.setAttribute("data-state", datepicker._datepicker.expanded ? "open" : "closed");
+      el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
     } else {
-      el.classList.add("shadow-control", "data-[invalid=true]:border-negative", "data-[invalid=true]:ring-negative/20", "dark:data-[invalid=true]:ring-negative/40");
+      el.classList.add("shadow-input", "data-[invalid=true]:border-negative", "data-[invalid=true]:ring-negative/20", "dark:data-[invalid=true]:ring-negative/40");
     }
     let date = /* @__PURE__ */ new Date();
     let selected = void 0;
@@ -20487,38 +20490,38 @@ function calendar_default(Alpine) {
         }
       }
       if (datepicker) {
-        datepicker._datepicker.input.value = formatter.format(selected);
-        datepicker._datepicker.input.setCustomValidity("");
-        if (triggerInput) datepicker._datepicker.input.dispatchEvent(new Event("change", { bubbles: true }));
+        datepicker._h_datepicker.input.value = formatter.format(selected);
+        datepicker._h_datepicker.input.setCustomValidity("");
+        if (triggerInput) datepicker._h_datepicker.input.dispatchEvent(new Event("change", { bubbles: true }));
       } else {
         el.setAttribute("data-invalid", "false");
       }
     }
     const onInputChange = () => {
-      const newValue = new Date(datepicker._datepicker.input.value);
+      const newValue = new Date(datepicker._h_datepicker.input.value);
       if (isNaN(newValue)) {
-        console.error(`h-calendar: input value is not a valid date - ${datepicker._datepicker.input.value}`);
-        datepicker._datepicker.input.setCustomValidity("Input value is not a valid date.");
+        console.error(`h-calendar: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
+        datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
         return;
       } else if (selected.getTime() !== newValue.getTime()) {
         selected = newValue;
         modelChange();
         render();
       }
-      datepicker._datepicker.input.setCustomValidity("");
+      datepicker._h_datepicker.input.setCustomValidity("");
     };
     if (datepicker) {
-      datepicker._datepicker.input.addEventListener("change", onInputChange);
+      datepicker._h_datepicker.input.addEventListener("change", onInputChange);
     }
     function checkForModel() {
       if (el.hasOwnProperty("_x_model") && el._x_model.get()) {
         selected = new Date(el._x_model.get());
         if (isNaN(selected)) {
           console.error(`h-calendar: input value is not a valid date - ${el._x_model.get()}`);
-          if (datepicker) datepicker._datepicker.input.setCustomValidity("Input value is not a valid date.");
+          if (datepicker) datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
           else el.setAttribute("data-invalid", "true");
         } else if (datepicker) {
-          datepicker._datepicker.input.value = formatter.format(selected);
+          datepicker._h_datepicker.input.value = formatter.format(selected);
         }
       }
     }
@@ -20528,7 +20531,7 @@ function calendar_default(Alpine) {
       selected = new Date(focusedDay);
       modelChange(true);
       render();
-      if (datepicker) datepicker._datepicker.expanded = false;
+      if (datepicker) datepicker._h_datepicker.expanded = false;
     }
     function isDisabled(d) {
       if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
@@ -20821,7 +20824,7 @@ function calendar_default(Alpine) {
           newDay.setMonth(newDay.getMonth() + 1);
           break;
         case "Escape":
-          if (datepicker) datepicker._datepicker.expanded = false;
+          if (datepicker) datepicker._h_datepicker.expanded = false;
           return;
         case "Enter":
         case " ":
@@ -20885,8 +20888,8 @@ function calendar_default(Alpine) {
     }
     if (datepicker) {
       effect(() => {
-        el.setAttribute("data-state", datepicker._datepicker.expanded ? "open" : "closed");
-        if (datepicker._datepicker.expanded) {
+        el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
+        if (datepicker._h_datepicker.expanded) {
           autoUpdateCleanup = autoUpdate(datepicker, el, updatePosition);
           Alpine2.nextTick(() => {
             focusDay();
@@ -20906,7 +20909,7 @@ function calendar_default(Alpine) {
         dayCells[d].removeEventListener("click", dayClick);
       }
       if (datepicker) {
-        datepicker._datepicker.input.removeEventListener("change", onInputChange);
+        datepicker._h_datepicker.input.removeEventListener("change", onInputChange);
       }
     });
   });
@@ -20991,7 +20994,7 @@ function checkbox_default(Alpine) {
       "has-[input:invalid]:ring-negative/20",
       "relative",
       "rounded-[0.25rem]",
-      "shadow-control",
+      "shadow-input",
       "shrink-0",
       "size-5",
       "transition-color"
@@ -21004,7 +21007,7 @@ function checkbox_default(Alpine) {
 // src/components/collapsible.js
 function collapsible_default(Alpine) {
   Alpine.directive("h-collapsible", (el, { expression }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
-    el._collapsible = Alpine2.reactive({
+    el._h_collapsible = Alpine2.reactive({
       expanded: expression ? evaluate2(expression) : false
     });
     if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible");
@@ -21012,13 +21015,13 @@ function collapsible_default(Alpine) {
       const getExpanded = evaluateLater(expression);
       effect(() => {
         getExpanded((expanded) => {
-          el._collapsible.expanded = expanded;
+          el._h_collapsible.expanded = expanded;
         });
       });
     }
   });
   Alpine.directive("h-collapsible-trigger", (el, { modifiers }, { effect, Alpine: Alpine2, cleanup }) => {
-    const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_collapsible"));
+    const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
     if (!collapsible) {
       throw new Error("h-collapsible-trigger must be inside an h-collapsible element");
     }
@@ -21029,10 +21032,10 @@ function collapsible_default(Alpine) {
       else el.classList.add("[&[data-state=open]>svg:not(:first-child):last-child]:rotate-180", "[&[data-state=open]>svg:only-child]:rotate-180");
     }
     const handler2 = () => {
-      collapsible._collapsible.expanded = !collapsible._collapsible.expanded;
+      collapsible._h_collapsible.expanded = !collapsible._h_collapsible.expanded;
     };
     effect(() => {
-      el.setAttribute("data-state", collapsible._collapsible.expanded ? "open" : "closed");
+      el.setAttribute("data-state", collapsible._h_collapsible.expanded ? "open" : "closed");
     });
     el.addEventListener("click", handler2);
     cleanup(() => {
@@ -21040,14 +21043,14 @@ function collapsible_default(Alpine) {
     });
   });
   Alpine.directive("h-collapsible-content", (el, {}, { effect, Alpine: Alpine2 }) => {
-    const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_collapsible"));
+    const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
     if (!collapsible) {
       throw new Error("h-collapsible-content must be inside an h-collapsible element");
     }
     if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible-content");
-    el.classList.add("data-[state=closed]:hidden");
+    el.classList.add("data-[state=closed]:!hidden");
     effect(() => {
-      el.setAttribute("data-state", collapsible._collapsible.expanded ? "open" : "closed");
+      el.setAttribute("data-state", collapsible._h_collapsible.expanded ? "open" : "closed");
     });
   });
 }
@@ -21056,21 +21059,21 @@ function collapsible_default(Alpine) {
 var import_lucide3 = __toESM(require_lucide(), 1);
 function datepicker_default(Alpine) {
   Alpine.directive("h-date-picker", (el, {}, { Alpine: Alpine2 }) => {
-    el._datepicker = Alpine2.reactive({
+    el._h_datepicker = Alpine2.reactive({
       id: void 0,
       controls: `hdpc${v4_default()}`,
       input: void 0,
       expanded: false
     });
-    el._datepicker.input = el.querySelector("input");
-    if (!el._datepicker.input || el._datepicker.input.tagName !== "INPUT") {
+    el._h_datepicker.input = el.querySelector("input");
+    if (!el._h_datepicker.input || el._h_datepicker.input.tagName !== "INPUT") {
       throw new Error("h-date-picker must have an input inside it");
-    } else if (el._datepicker.input.hasAttribute("id")) {
-      el._datepicker.id = el._datepicker.input.getAttribute("id");
+    } else if (el._h_datepicker.input.hasAttribute("id")) {
+      el._h_datepicker.id = el._h_datepicker.input.getAttribute("id");
     } else {
       const id = `hdp${v4_default()}`;
-      el._datepicker.input.setAttribute("id", id);
-      el._datepicker.id = id;
+      el._h_datepicker.input.setAttribute("id", id);
+      el._h_datepicker.id = id;
     }
     el.classList.add(
       "border-input",
@@ -21080,7 +21083,7 @@ function datepicker_default(Alpine) {
       "items-center",
       "rounded-control",
       "border",
-      "shadow-control",
+      "shadow-input",
       "transition-[color,box-shadow]",
       "duration-200",
       "outline-none",
@@ -21100,9 +21103,9 @@ function datepicker_default(Alpine) {
       "dark:has-[input:invalid]:ring-negative/40"
     );
     el.setAttribute("data-slot", "date-picker");
-    el._datepicker.input.classList.add("bg-transparent", "outline-none", "flex-1", "border-0", "focus-visible:ring-0", "disabled:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-50", "md:text-sm", "text-base");
-    el._datepicker.input.setAttribute("aria-autocomplete", "none");
-    el._datepicker.input.setAttribute("type", "text");
+    el._h_datepicker.input.classList.add("bg-transparent", "outline-none", "flex-1", "border-0", "focus-visible:ring-0", "disabled:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-50", "md:text-sm", "text-base");
+    el._h_datepicker.input.setAttribute("aria-autocomplete", "none");
+    el._h_datepicker.input.setAttribute("type", "text");
   });
   Alpine.directive("h-date-picker-trigger", (el, {}, { effect, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "BUTTON") {
@@ -21111,11 +21114,11 @@ function datepicker_default(Alpine) {
     if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
       throw new Error('h-date-picker-trigger: must have an "aria-label" or "aria-labelledby" attribute');
     }
-    const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_datepicker"));
+    const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
     if (!datepicker) {
       throw new Error("h-date-picker-trigger must be inside an h-date-picker element");
     }
-    el.setAttribute("aria-controls", datepicker._datepicker.controls);
+    el.setAttribute("aria-controls", datepicker._h_datepicker.controls);
     el.setAttribute("aria-expanded", "false");
     el.setAttribute("aria-haspopup", "dialog");
     el.setAttribute("type", "button");
@@ -21130,17 +21133,17 @@ function datepicker_default(Alpine) {
       })
     );
     effect(() => {
-      el.setAttribute("data-state", datepicker._datepicker.expanded ? "open" : "closed");
-      el.setAttribute("aria-expanded", datepicker._datepicker.expanded);
+      el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
+      el.setAttribute("aria-expanded", datepicker._h_datepicker.expanded);
     });
     const close = () => {
-      datepicker._datepicker.expanded = false;
+      datepicker._h_datepicker.expanded = false;
     };
     const handler2 = () => {
-      datepicker._datepicker.expanded = !datepicker._datepicker.expanded;
-      el.setAttribute("aria-expanded", datepicker._datepicker.expanded);
+      datepicker._h_datepicker.expanded = !datepicker._h_datepicker.expanded;
+      el.setAttribute("aria-expanded", datepicker._h_datepicker.expanded);
       Alpine2.nextTick(() => {
-        if (datepicker._datepicker.expanded) {
+        if (datepicker._h_datepicker.expanded) {
           top.addEventListener("click", close, { once: true });
         } else {
           top.removeEventListener("click", close);
@@ -21173,12 +21176,24 @@ function dialog_default(Alpine) {
               }
             }
             inputs[0].focus();
+            return;
           } else {
-            const buttons = el.getElementsByTagName("BUTTON");
-            if (buttons.length) {
-              buttons[0].focus();
+            const textareas = el.getElementsByTagName("TEXTAREA");
+            if (textareas.length) {
+              for (let i = 0; i < textareas.length; i++) {
+                if (textareas[i].autofocus) {
+                  textareas[i].focus();
+                  return;
+                }
+              }
+              textareas[0].focus();
+              return;
             }
           }
+          const buttons = el.getElementsByTagName("BUTTON");
+          if (buttons.length) {
+            buttons[0].focus();
+          }
         }
       });
     });
@@ -21195,7 +21210,8 @@ function dialog_default(Alpine) {
       "top-[50%]",
       "left-[50%]",
       "z-50",
-      "grid",
+      "flex",
+      "flex-col",
       "w-full",
       "max-w-[calc(100%-2rem)]",
       "translate-x-[-50%]",
@@ -21205,24 +21221,27 @@ function dialog_default(Alpine) {
       "border",
       "p-4",
       "shadow-xl",
-      "sm:max-w-lg"
+      "sm:max-w-lg",
+      "outline-none"
     );
     el.setAttribute("role", "dialog");
     el.setAttribute("data-slot", "dialog");
-    if (!el.hasAttribute("aria-labelledby")) {
-      console.error('h-dialog: attribute "aria-labelledby" is missing');
-    }
-    if (!el.hasAttribute("aria-describedby")) {
-      console.error('h-dialog: attribute "aria-describedby" is missing');
-    }
   });
   Alpine.directive("h-dialog-header", (el) => {
     el.classList.add("grid", "grid-cols-[1fr_auto]", "place-items-start", "gap-2", "text-center", "sm:text-left");
     el.setAttribute("data-slot", "dialog-header");
   });
-  Alpine.directive("h-dialog-title", (el) => {
+  Alpine.directive("h-dialog-title", (el, {}, { Alpine: Alpine2 }) => {
     el.classList.add("text-lg", "leading-none", "font-semibold");
     el.setAttribute("data-slot", "dialog-title");
+    const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
+    if (dialog && (!dialog.hasAttribute("aria-labelledby") || !dialog.hasAttribute("aria-label"))) {
+      if (!el.hasAttribute("id")) {
+        const id = `dht${v4_default()}`;
+        el.setAttribute("id", id);
+      }
+      dialog.setAttribute("aria-labelledby", el.getAttribute("id"));
+    }
   });
   Alpine.directive("h-dialog-close", (el) => {
     el.classList.add(
@@ -21242,9 +21261,17 @@ function dialog_default(Alpine) {
     );
     el.setAttribute("data-slot", "dialog-close");
   });
-  Alpine.directive("h-dialog-description", (el) => {
+  Alpine.directive("h-dialog-description", (el, {}, { Alpine: Alpine2 }) => {
     el.classList.add("col-span-full", "text-muted-foreground", "text-sm");
     el.setAttribute("data-slot", "dialog-description");
+    const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
+    if (dialog && (!dialog.hasAttribute("aria-describedby") || !dialog.hasAttribute("aria-description"))) {
+      if (!el.hasAttribute("id")) {
+        const id = `dhd${v4_default()}`;
+        el.setAttribute("id", id);
+      }
+      dialog.setAttribute("aria-describedby", el.getAttribute("id"));
+    }
   });
   Alpine.directive("h-dialog-footer", (el) => {
     el.classList.add("flex", "flex-col-reverse", "gap-2", "sm:flex-row", "sm:justify-end");
@@ -21403,7 +21430,7 @@ function input_default(Alpine) {
       "[&::-webkit-color-swatch-wrapper]:rounded-0",
       "[&::-webkit-color-swatch-wrapper]:p-0",
       "text-base",
-      "shadow-control",
+      "shadow-input",
       "transition-[color,box-shadow]",
       "outline-none",
       "file:inline-flex",
@@ -21427,7 +21454,7 @@ function input_default(Alpine) {
       "invalid:!border-negative"
     );
     if (modifiers.includes("group")) {
-      el.classList.remove("rounded-control", "border", "bg-input-inner", "shadow-control", "focus-visible:ring-[3px]");
+      el.classList.remove("rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[3px]");
       el.classList.add("flex-1", "rounded-none", "border-0", "bg-transparent", "shadow-none", "focus-visible:ring-0");
       el.setAttribute("data-slot", "input-group-control");
     } else el.setAttribute("data-slot", "input");
@@ -21446,7 +21473,7 @@ function input_default(Alpine) {
       "items-center",
       "rounded-control",
       "border",
-      "shadow-control",
+      "shadow-input",
       "transition-[color,box-shadow]",
       "outline-none",
       "h-9",
@@ -21565,7 +21592,7 @@ function list_default(Alpine) {
       "border-input",
       "border",
       "rounded-control",
-      "shadow-control",
+      "shadow-input",
       "outline-none",
       "disabled:pointer-events-none",
       "disabled:cursor-not-allowed",
@@ -21664,13 +21691,11 @@ function list_default(Alpine) {
     if (!list) {
       throw new Error("h-list-header: must be placed inside an h-list element");
     }
-    if (el.hasAttribute("id")) {
-      list.setAttribute("aria-labelledby", el.getAttribute("id"));
-    } else {
+    if (!el.hasAttribute("id")) {
       const id = `lbh${v4_default()}`;
       el.setAttribute("id", id);
-      list.setAttribute("aria-labelledby", id);
     }
+    list.setAttribute("aria-labelledby", el.getAttribute("id"));
   });
   Alpine.directive("h-list-item", (el, { modifiers }) => {
     el.classList.add("min-h-11", "flex", "items-center", "p-2", "gap-2", "align-middle", "outline-none");
@@ -21946,7 +21971,9 @@ function menu_default(Alpine) {
   Alpine.directive("h-menu-item", (el, {}, { cleanup, Alpine: Alpine2 }) => {
     el.classList.add(
       "focus:bg-secondary-hover",
+      "focus:text-secondary-foreground",
       "hover:bg-secondary-hover",
+      "hover:text-secondary-foreground",
       "data-[variant=negative]:text-negative",
       "data-[variant=negative]:focus:bg-negative/10",
       "data-[variant=negative]:hover:bg-negative/10",
@@ -22062,6 +22089,7 @@ function menu_default(Alpine) {
           Alpine2.nextTick(() => {
             submenuitem.focus();
             el._menu_sub.expanded = true;
+            el.setAttribute("aria-expanded", true);
           });
         }
       }
@@ -22071,28 +22099,33 @@ function menu_default(Alpine) {
       if (event.type === "mouseleave") {
         el._menu_sub.close();
         el._menu_sub.expanded = false;
+        el.setAttribute("aria-expanded", false);
         parentMenu.pauseKeyEvents = false;
-        el.setAttribute("aria-expanded", "false");
         parentMenu.focus();
       } else if (el._menu_sub.expanded) {
-        el.setAttribute("aria-expanded", "false");
         el._menu_sub.close();
         el._menu_sub.expanded = false;
+        el.setAttribute("aria-expanded", false);
         parentMenu.pauseKeyEvents = false;
         el.removeEventListener("keydown", onKeydown);
       }
     }
     function focusIn(event) {
       el.setAttribute("tabindex", "0");
-      if (event.type === "mouseenter") {
-        el.setAttribute("aria-expanded", "true");
+      if (event.type === "click" && event.pointerType === "touch" && (event.target === el || event.target.parentElement === el)) {
+        el._menu_sub.open(el);
+        el._menu_sub.expanded = true;
+        el.setAttribute("aria-expanded", true);
+        event.stopPropagation();
+      } else if (event.type === "mouseenter") {
         el.addEventListener("mouseleave", focusOut);
         el._menu_sub.open(el);
         el._menu_sub.expanded = true;
+        el.setAttribute("aria-expanded", true);
       } else {
         if (el._menu_sub.expanded) {
-          el.setAttribute("aria-expanded", "false");
           el._menu_sub.expanded = false;
+          el.setAttribute("aria-expanded", false);
           parentMenu.pauseKeyEvents = false;
         }
         el.addEventListener("keydown", onKeydown);
@@ -22100,9 +22133,11 @@ function menu_default(Alpine) {
       }
     }
     el.addEventListener("mouseenter", focusIn);
+    el.addEventListener("click", focusIn);
     el.addEventListener("focus", focusIn);
     cleanup(() => {
       el.removeEventListener("mouseenter", focusIn);
+      el.removeEventListener("click", focusIn);
       el.removeEventListener("focus", focusIn);
       el.removeEventListener("blur", focusOut);
       el.removeEventListener("mouseleave", focusOut);
@@ -22562,7 +22597,7 @@ function radio_default(Alpine) {
       "has-[input:invalid]:ring-negative/20",
       "relative",
       "rounded-full",
-      "shadow-control",
+      "shadow-input",
       "shrink-0",
       "size-5"
     );
@@ -22600,7 +22635,7 @@ var FilterType = Object.freeze({
 });
 function select_default(Alpine) {
   Alpine.directive("h-select", (el, {}, { Alpine: Alpine2 }) => {
-    el._select = Alpine2.reactive({
+    el._h_select = Alpine2.reactive({
       id: void 0,
       controls: `hsc${v4_default()}`,
       expanded: false,
@@ -22608,17 +22643,18 @@ function select_default(Alpine) {
       multiple: false,
       label: [],
       search: "",
+      focusSearch: void 0,
       filterType: FilterType["starts-with"]
     });
     el.setAttribute("data-slot", "select");
   });
   Alpine.directive("h-select-trigger", (el, {}, { effect, cleanup, Alpine: Alpine2 }) => {
-    const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_select"));
+    const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
     if (!select) {
       throw new Error("h-select-trigger must be inside an h-select element");
     } else if (el.hasOwnProperty("_x_model")) {
-      select._select.multiple = Array.isArray(el._x_model.get());
-      select._select.model = el._x_model.get();
+      select._h_select.multiple = Array.isArray(el._x_model.get());
+      select._h_select.model = el._x_model.get();
     }
     setButtonClasses(el);
     const setVariant = (variant) => {
@@ -22627,7 +22663,7 @@ function select_default(Alpine) {
         return;
       } else if (variant === "transparent") {
         el.classList.add(...buttonVariants["transparent"]);
-      } else el.classList.add("shadow-control", ...buttonVariants["outline"]);
+      } else el.classList.add("shadow-input", ...buttonVariants["outline"]);
     };
     const setSize = (size3) => {
       const sizes = ["sm", "xs", "lg"];
@@ -22659,38 +22695,38 @@ function select_default(Alpine) {
         if (mutation.attributeName === "value") {
           el.dispatchEvent(new Event("change", { bubbles: true }));
           if (el.value) selectValue.classList.remove("text-muted-foreground");
-        } else if (mutation.attributeName === "placeholder" && !select._select.label.length) {
+        } else if (mutation.attributeName === "placeholder" && !select._h_select.label.length) {
           getPlaceholder();
         }
       });
     });
     observer.observe(el, { attributes: true, attributeFilter: ["value", "placeholder"] });
     effect(() => {
-      if (select._select.label.length === 1) {
-        selectValue.innerText = select._select.label[0];
-      } else if (select._select.label.length > 1) {
-        selectValue.innerText = select._select.label.join(", ");
+      if (select._h_select.label.length === 1) {
+        selectValue.innerText = select._h_select.label[0];
+      } else if (select._h_select.label.length > 1) {
+        selectValue.innerText = select._h_select.label.join(", ");
       } else {
         getPlaceholder();
       }
     });
     el.setAttribute("data-slot", "select-trigger");
     if (el.hasAttribute("id")) {
-      select._select.id = el.getAttribute("id");
+      select._h_select.id = el.getAttribute("id");
     } else {
-      select._select.id = `hs${v4_default()}`;
-      el.setAttribute("id", select._select.id);
+      select._h_select.id = `hs${v4_default()}`;
+      el.setAttribute("id", select._h_select.id);
     }
-    el.setAttribute("aria-controls", select._select.controls);
+    el.setAttribute("aria-controls", select._h_select.controls);
     el.setAttribute("aria-haspopup", "listbox");
     el.setAttribute("aria-autocomplete", "none");
     el.setAttribute("role", "combobox");
     effect(() => {
-      el.setAttribute("data-state", select._select.expanded ? "open" : "closed");
-      el.setAttribute("aria-expanded", select._select.expanded);
+      el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
+      el.setAttribute("aria-expanded", select._h_select.expanded);
     });
     const close = () => {
-      select._select.expanded = false;
+      select._h_select.expanded = false;
     };
     let content;
     let options;
@@ -22698,26 +22734,72 @@ function select_default(Alpine) {
       switch (event.key) {
         case "Down":
         case "ArrowDown":
+          event.preventDefault();
+          let nextIndex = 0;
           for (let o = 0; o < options.length; o++) {
-            if (options[o] === document.activeElement) {
-              if (o < options.length - 1) {
-                options[o + 1].focus();
-              } else options[0].focus();
-              return;
+            if (options[o].getAttribute("tabindex") === "0") {
+              options[o].setAttribute("tabindex", "-1");
+              if (o < options.length - 1) nextIndex = o + 1;
+              break;
             }
           }
-          options[0].focus();
+          if (options[nextIndex].getAttribute("data-disabled") === "true") {
+            if (nextIndex === options.length - 1) nextIndex = 0;
+            for (let o = nextIndex; o < options.length; o++) {
+              if (options[o].getAttribute("data-disabled") !== "true") {
+                nextIndex = o;
+                break;
+              }
+            }
+          }
+          options[nextIndex].setAttribute("tabindex", "0");
+          options[nextIndex].focus();
           break;
         case "Up":
         case "ArrowUp":
+          event.preventDefault();
+          let prevIndex = options.length - 1;
           for (let o = options.length - 1; o >= 0; o--) {
-            if (options[o] === document.activeElement) {
-              if (o !== 0) {
-                options[o - 1].focus();
-              } else options[options.length - 1].focus();
-              return;
+            if (options[o].getAttribute("tabindex") === "0") {
+              options[o].setAttribute("tabindex", "-1");
+              if (o !== 0) prevIndex = o - 1;
+              break;
+            }
+          }
+          if (options[prevIndex].getAttribute("data-disabled") === "true") {
+            if (prevIndex === 0) prevIndex = options.length - 1;
+            for (let o = prevIndex; o >= 0; o--) {
+              if (options[o].getAttribute("data-disabled") !== "true") {
+                prevIndex = o;
+                break;
+              }
+            }
+          }
+          options[prevIndex].setAttribute("tabindex", "0");
+          options[prevIndex].focus();
+          break;
+        case "Home":
+        case "PageUp":
+          event.preventDefault();
+          for (let o = 0; o < options.length; o++) {
+            if (options[o].getAttribute("tabindex") === "0") {
+              options[o].setAttribute("tabindex", "-1");
+              break;
             }
           }
+          options[0].setAttribute("tabindex", "0");
+          options[0].focus();
+          break;
+        case "End":
+        case "PageDown":
+          event.preventDefault();
+          for (let o = 0; o < options.length; o++) {
+            if (options[o].getAttribute("tabindex") === "0") {
+              options[o].setAttribute("tabindex", "-1");
+              break;
+            }
+          }
+          options[options.length - 1].setAttribute("tabindex", "0");
           options[options.length - 1].focus();
           break;
         case "Enter":
@@ -22728,16 +22810,30 @@ function select_default(Alpine) {
         case "Tab":
           handler2();
           break;
+        case "Control":
+        case "Shift":
+        case "Alt":
+          break;
+        default:
+          if (select._h_select.focusSearch) {
+            for (let o = 0; o < options.length; o++) {
+              if (options[o].getAttribute("tabindex") === "0") {
+                options[o].setAttribute("tabindex", "-1");
+                break;
+              }
+            }
+            select._h_select.focusSearch();
+          }
       }
     };
     const handler2 = () => {
-      select._select.expanded = !select._select.expanded;
-      if (select._select.expanded) {
-        if (!content) content = select.querySelector(`#${select._select.controls}`);
+      select._h_select.expanded = !select._h_select.expanded;
+      if (select._h_select.expanded) {
+        if (!content) content = select.querySelector(`#${select._h_select.controls}`);
         options = content.querySelectorAll("[role=option]");
       }
       Alpine2.nextTick(() => {
-        if (select._select.expanded) {
+        if (select._h_select.expanded) {
           top.addEventListener("click", close, { once: true });
           el.parentElement.addEventListener("keydown", shiftFocus);
         } else {
@@ -22765,7 +22861,7 @@ function select_default(Alpine) {
     });
   });
   Alpine.directive("h-select-content", (el, {}, { effect, Alpine: Alpine2 }) => {
-    const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_select"));
+    const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
     if (!select) {
       throw new Error("h-select-content must be inside an h-select element");
     }
@@ -22773,11 +22869,11 @@ function select_default(Alpine) {
     el.setAttribute("data-slot", "select-content");
     el.setAttribute("role", "listbox");
     el.setAttribute("role", "presentation");
-    el.setAttribute("id", select._select.controls);
+    el.setAttribute("id", select._h_select.controls);
     el.setAttribute("tabindex", "-1");
-    el.setAttribute("aria-labelledby", select._select.id);
-    el.setAttribute("data-state", select._select.expanded ? "open" : "closed");
-    const control = select.querySelector(`#${select._select.id}`);
+    el.setAttribute("aria-labelledby", select._h_select.id);
+    el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
+    const control = select.querySelector(`#${select._h_select.id}`);
     if (!control) {
       throw new Error("h-select-content: trigger not found");
     }
@@ -22806,8 +22902,8 @@ function select_default(Alpine) {
       });
     }
     effect(() => {
-      el.setAttribute("data-state", select._select.expanded ? "open" : "closed");
-      if (select._select.expanded) {
+      el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
+      if (select._h_select.expanded) {
         autoUpdateCleanup = autoUpdate(control, el, updatePosition);
       } else {
         if (autoUpdateCleanup) autoUpdateCleanup();
@@ -22819,14 +22915,16 @@ function select_default(Alpine) {
     });
   });
   Alpine.directive("h-select-search", (el, { modifiers }, { effect, cleanup }) => {
-    const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_select"));
+    const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
     if (!select) {
       throw new Error("h-select-search must be inside an h-select element");
-    } else select._select.filterType = FilterType[modifiers[0]] ?? FilterType["starts-with"];
+    } else {
+      select._h_select.filterType = FilterType[modifiers[0]] ?? FilterType["starts-with"];
+    }
     el.classList.add("flex", "h-8", "items-center", "gap-2", "border-b", "px-2");
     el.setAttribute("data-slot", "select-search");
-    el.setAttribute("aria-autocomplete", select._select.filterType === FilterType.none ? "both" : "list");
-    el.setAttribute("aria-controls", select._select.controls);
+    el.setAttribute("aria-autocomplete", select._h_select.filterType === FilterType.none ? "both" : "list");
+    el.setAttribute("aria-controls", select._h_select.controls);
     el.setAttribute("aria-haspopup", "listbox");
     el.setAttribute("role", "combobox");
     el.setAttribute("autocomplete", "off");
@@ -22839,62 +22937,65 @@ function select_default(Alpine) {
     searchInput.classList.add("placeholder:text-muted-foreground", "flex", "h-10", "w-full", "rounded-md", "bg-transparent", "py-3", "text-sm", "outline-hidden", "disabled:cursor-not-allowed", "disabled:opacity-50");
     el.appendChild(searchIcon);
     el.appendChild(searchInput);
+    select._h_select.focusSearch = () => {
+      searchInput.focus();
+    };
     function handler2(event) {
-      if (event.type === "keydown" && event.key === "Escape") return;
+      if (event.type === "keydown" && (event.key === "Escape" || event.key === "ArrowDown" || event.key === "Down")) return;
       event.stopPropagation();
     }
     el.addEventListener("click", handler2);
     el.addEventListener("keydown", handler2);
-    if (select._select.filterType !== FilterType.none) {
+    if (select._h_select.filterType !== FilterType.none) {
       let onInput2 = function() {
-        select._select.search = searchInput.value.toLowerCase();
+        select._h_select.search = searchInput.value.toLowerCase();
       };
       searchInput.addEventListener("keyup", onInput2);
     }
     effect(() => {
-      if (select._select.expanded) searchInput.focus({ preventScroll: true });
-      el.setAttribute("aria-expanded", select._select.expanded);
+      if (select._h_select.expanded) searchInput.focus({ preventScroll: true });
+      el.setAttribute("aria-expanded", select._h_select.expanded);
     });
     cleanup(() => {
       el.removeEventListener("click", handler2);
       el.removeEventListener("keydown", handler2);
-      if (select._select.filterType !== FilterType.none) searchInput.removeEventListener("keyup", onInput);
+      if (select._h_select.filterType !== FilterType.none) searchInput.removeEventListener("keyup", onInput);
     });
   });
   Alpine.directive("h-select-group", (el, {}, { effect }) => {
     el.setAttribute("data-slot", "select-group");
-    el._selectGroup = Alpine.reactive({
+    el._h_selectGroup = Alpine.reactive({
       labelledby: void 0
     });
     effect(() => {
-      if (el._selectGroup.labelledby) {
-        el.setAttribute("aria-labelledby", el._selectGroup.labelledby);
+      if (el._h_selectGroup.labelledby) {
+        el.setAttribute("aria-labelledby", el._h_selectGroup.labelledby);
       }
     });
   });
   Alpine.directive("h-select-label", (el) => {
     el.classList.add("text-muted-foreground", "px-2", "py-1.5", "text-xs");
     el.setAttribute("data-slot", "select-label");
-    const selectGroup = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_selectGroup"));
+    const selectGroup = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_selectGroup"));
     if (selectGroup) {
       const id = `hsl${v4_default()}`;
       el.setAttribute("id", id);
-      selectGroup._selectGroup.labelledby = id;
+      selectGroup._h_selectGroup.labelledby = id;
     }
   });
   Alpine.directive("h-select-option", (el, { expression }, { effect, evaluateLater, cleanup }) => {
-    const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_select"));
+    const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
     if (!select) {
       throw new Error("h-select-option must be inside an h-select element");
     }
     el.classList.add(
       "focus:bg-primary",
       "focus:text-primary-foreground",
-      "hover:bg-primary",
-      "hover:text-primary-foreground",
+      "hover:bg-secondary-hover",
+      "hover:text-secondary-foreground",
       "[&_svg:not([class*='text-'])]:text-muted-foreground",
       "focus:[&_svg:not([class*='text-'])]:text-primary-foreground",
-      "hover:[&_svg:not([class*='text-'])]:text-primary-foreground",
+      "hover:[&_svg:not([class*='text-'])]:text-secondary-foreground",
       "relative",
       "flex",
       "w-full",
@@ -22938,26 +23039,26 @@ function select_default(Alpine) {
     const getLabel = evaluateLater(expression);
     effect(() => {
       getLabel((label) => {
-        if (select._select.multiple && select._select.model.includes(getValue())) {
-          select._select.label[select._select.label.indexOf(labelEl.innerText)] = label;
-        } else if (select._select.model === getValue()) {
-          select._select.label[0] = label;
+        if (select._h_select.multiple && select._h_select.model.includes(getValue())) {
+          select._h_select.label[select._h_select.label.indexOf(labelEl.innerText)] = label;
+        } else if (select._h_select.model === getValue()) {
+          select._h_select.label[0] = label;
         }
         labelEl.innerText = label;
       });
     });
     effect(() => {
-      if (select._select.search) {
-        if (select._select.filterType === FilterType["starts-with"]) {
-          if (!labelEl.innerText.toLowerCase().startsWith(select._select.search)) {
+      if (select._h_select.search) {
+        if (select._h_select.filterType === FilterType["starts-with"]) {
+          if (!labelEl.innerText.toLowerCase().startsWith(select._h_select.search)) {
             el.classList.add("hidden");
           } else el.classList.remove("hidden");
-        } else if (select._select.filterType === FilterType.contains) {
-          if (!labelEl.innerText.toLowerCase().includes(select._select.search)) {
+        } else if (select._h_select.filterType === FilterType.contains) {
+          if (!labelEl.innerText.toLowerCase().includes(select._h_select.search)) {
             el.classList.add("hidden");
           } else el.classList.remove("hidden");
-        } else if (select._select.filterType === FilterType["contains-each"]) {
-          const terms = select._select.search.split(" ");
+        } else if (select._h_select.filterType === FilterType["contains-each"]) {
+          const terms = select._h_select.search.split(" ");
           const label = labelEl.innerText.toLowerCase();
           if (!terms.every((term) => label.includes(term))) el.classList.add("hidden");
           else el.classList.remove("hidden");
@@ -22970,11 +23071,11 @@ function select_default(Alpine) {
       if (selected) {
         indicatorEl.classList.remove("invisible");
         el.setAttribute("aria-selected", "true");
-        if (!select._select.label.length) {
-          select._select.label.push(labelEl.innerText);
-        } else if (!select._select.label.includes(labelEl.innerText)) {
-          if (select._select.multiple) select._select.label.push(labelEl.innerText);
-          else select._select.label[0] = labelEl.innerText;
+        if (!select._h_select.label.length) {
+          select._h_select.label.push(labelEl.innerText);
+        } else if (!select._h_select.label.includes(labelEl.innerText)) {
+          if (select._h_select.multiple) select._h_select.label.push(labelEl.innerText);
+          else select._h_select.label[0] = labelEl.innerText;
         }
       } else {
         indicatorEl.classList.add("invisible");
@@ -22982,30 +23083,30 @@ function select_default(Alpine) {
       }
     }
     function removeLabel() {
-      const lIndex = select._select.label.indexOf(labelEl.innerText);
-      if (lIndex > -1) select._select.label.splice(lIndex, 1);
+      const lIndex = select._h_select.label.indexOf(labelEl.innerText);
+      if (lIndex > -1) select._h_select.label.splice(lIndex, 1);
     }
     effect(() => {
-      if (select._select.multiple) {
-        setSelectedState(select._select.model.includes(getValue()));
+      if (select._h_select.multiple) {
+        setSelectedState(select._h_select.model.includes(getValue()));
       } else {
-        setSelectedState(select._select.model === getValue());
+        setSelectedState(select._h_select.model === getValue());
       }
     });
     const handler2 = (event) => {
       if (event.type === "keydown" && event.key === "Enter" || event.type === "click") {
-        if (select._select.multiple) {
-          const vIndex = select._select.model.indexOf(getValue());
+        if (select._h_select.multiple) {
+          const vIndex = select._h_select.model.indexOf(getValue());
           if (vIndex > -1) {
-            select._select.model.splice(vIndex, 1);
+            select._h_select.model.splice(vIndex, 1);
             removeLabel();
           } else {
-            select._select.model.push(getValue());
+            select._h_select.model.push(getValue());
           }
-        } else if (select._select.model !== getValue()) {
-          select._select.model = getValue();
+        } else if (select._h_select.model !== getValue()) {
+          select._h_select.model = getValue();
         } else {
-          select._select.model = "";
+          select._h_select.model = "";
           removeLabel();
         }
       }
@@ -23045,6 +23146,61 @@ function separator_default(Alpine) {
   });
 }
 
+// src/components/sheet.js
+function sheet_default(Alpine) {
+  Alpine.directive("h-sheet-overlay", (el, { expression }, { effect, evaluate: evaluate2, evaluateLater, cleanup }) => {
+    el.classList.add("data-[open=false]:hidden", "fixed", "inset-0", "z-50", "bg-black/50");
+    el.setAttribute("tabindex", "-1");
+    el.setAttribute("data-slot", "sheet-overlay");
+    el.setAttribute("data-open", evaluate2(expression));
+    const getIsOpen = evaluateLater(expression);
+    effect(() => {
+      getIsOpen((isOpen) => {
+        el.setAttribute("data-open", isOpen);
+      });
+    });
+    const onClick = (event) => {
+      if (event.target.getAttribute("data-slot") === "sheet-overlay") {
+        evaluate2(`${expression} = false`);
+      }
+    };
+    el.addEventListener("click", onClick);
+    cleanup(() => {
+      el.removeEventListener("click", onClick);
+    });
+  });
+  Alpine.directive("h-sheet", (el, {}, { cleanup }) => {
+    el.classList.add("bg-background", "fixed", "shadow-lg");
+    el.setAttribute("data-slot", "sheet");
+    let lastSide;
+    const getSideClasses = (side) => {
+      switch (side) {
+        case "top":
+          return ["inset-x-0", "top-0", "h-auto"];
+        case "right":
+          return ["inset-y-0", "right-0", "h-full", "w-auto", "sm:max-w-sm"];
+        case "left":
+          return ["inset-y-0", "left-0", "h-full", "w-auto", "sm:max-w-sm"];
+        default:
+          return ["inset-x-0", "bottom-0", "h-auto"];
+      }
+    };
+    const setSide = (side) => {
+      el.classList.remove(...getSideClasses(lastSide));
+      el.classList.add(...getSideClasses(side));
+      lastSide = side;
+    };
+    const observer = new MutationObserver(() => {
+      setSide(el.getAttribute("data-align"));
+    });
+    setSide(el.getAttribute("data-align"));
+    observer.observe(el, { attributes: true, attributeFilter: ["data-align"] });
+    cleanup(() => {
+      observer.disconnect();
+    });
+  });
+}
+
 // src/components/sidebar.js
 function sidebar_default(Alpine) {
   Alpine.directive("h-sidebar", (el, { modifiers }, { cleanup }) => {
@@ -23406,7 +23562,7 @@ function switch_default(Alpine) {
       "before:pointer-events-none",
       "before:ring-0",
       "before:rounded-full",
-      "before:shadow-control",
+      "before:shadow-input",
       "before:size-5",
       "before:transition-transform",
       "bg-muted",
@@ -23438,7 +23594,7 @@ function switch_default(Alpine) {
 function table_default(Alpine) {
   Alpine.directive("h-table-container", (el, { modifiers }) => {
     if (modifiers.includes("scroll")) {
-      el.classList.add("overflow-scroll", "[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-10", "[&_tfoot]:sticky", "[&_tfoot]:bottom-0", "[&_tfoot]:z-10", "[&_tbody_tr_th]:sticky", "[&_tbody_tr_th]:left-0", "[&_tbody_tr_th]:z-5");
+      el.classList.add("overflow-scroll", "[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-2", "[&_tfoot]:sticky", "[&_tfoot]:bottom-0", "[&_tfoot]:z-2", "[&_tbody_tr_th]:sticky", "[&_tbody_tr_th]:left-0", "[&_tbody_tr_th]:z-1");
     } else {
       el.classList.add("relative", "w-full", "overflow-x-auto");
     }
@@ -23559,6 +23715,7 @@ function tabs_default(Alpine) {
       "[&:not([data-floating=true])]:data-[size=lg]:group-data-[orientation=horizontal]/tabs:min-h-12",
       "data-[floating=true]:border",
       "data-[floating=true]:shadow-xs",
+      "data-[floating=true]:z-1",
       "data-[floating=true]:rounded-lg",
       "data-[floating=true]:p-[0.188rem]"
     );
@@ -23780,7 +23937,7 @@ function textarea_default(Alpine) {
       "px-3",
       "py-2",
       "text-base",
-      "shadow-control",
+      "shadow-input",
       "transition-[color,box-shadow]",
       "outline-none",
       "focus-visible:ring-[3px]",
@@ -23789,7 +23946,7 @@ function textarea_default(Alpine) {
       "md:text-sm"
     );
     if (modifiers.includes("group")) {
-      el.classList.remove("rounded-control", "border", "bg-input-inner", "py-2", "shadow-control", "focus-visible:ring-[3px]");
+      el.classList.remove("rounded-control", "border", "bg-input-inner", "py-2", "shadow-input", "focus-visible:ring-[3px]");
       el.classList.add("flex-1", "resize-none", "rounded-none", "border-0", "bg-transparent", "py-3", "shadow-none", "focus-visible:ring-0");
       el.setAttribute("data-slot", "input-group-control");
     } else el.setAttribute("data-slot", "textarea");
@@ -23930,7 +24087,7 @@ var getSelectedTime = (rawTime, convertTo12) => {
 };
 function timepicker_default(Alpine) {
   Alpine.directive("h-time-picker", (el, { expression }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
-    el._timepicker = Alpine2.reactive({
+    el._h_timepicker = Alpine2.reactive({
       id: void 0,
       controls: `htpc${v4_default()}`,
       model: void 0,
@@ -23939,8 +24096,8 @@ function timepicker_default(Alpine) {
       locale: void 0,
       seconds: void 0,
       close() {
-        el._timepicker.expanded = false;
-        top.removeEventListener("click", el._timepicker.close);
+        el._h_timepicker.expanded = false;
+        top.removeEventListener("click", el._h_timepicker.close);
       }
     });
     el._time = {
@@ -23980,7 +24137,7 @@ function timepicker_default(Alpine) {
       "pr-2",
       "text-sm",
       "whitespace-nowrap",
-      "shadow-control",
+      "shadow-input",
       "transition-[color,box-shadow]",
       "duration-200",
       "outline-none",
@@ -24007,28 +24164,28 @@ function timepicker_default(Alpine) {
       effect(() => {
         getConfig((config) => {
           if (config) {
-            if (config["locale"]) el._timepicker.locale = config.locale;
-            el._timepicker.seconds = config["seconds"];
+            if (config["locale"]) el._h_timepicker.locale = config.locale;
+            el._h_timepicker.seconds = config["seconds"];
             if (config["is12Hour"] !== void 0) {
-              el._timepicker.is12Hour = config.is12Hour;
+              el._h_timepicker.is12Hour = config.is12Hour;
             } else {
-              el._timepicker.is12Hour = new Intl.DateTimeFormat(el._timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
+              el._h_timepicker.is12Hour = new Intl.DateTimeFormat(el._h_timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
             }
           }
         });
       });
     } else {
-      el._timepicker.is12Hour = new Intl.DateTimeFormat(el._timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
+      el._h_timepicker.is12Hour = new Intl.DateTimeFormat(el._h_timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
     }
     const handler2 = (event) => {
       if (event.type === "keydown" && event.key !== "Enter") return;
-      el._timepicker.expanded = !el._timepicker.expanded;
-      el.setAttribute("aria-expanded", el._timepicker.expanded);
+      el._h_timepicker.expanded = !el._h_timepicker.expanded;
+      el.setAttribute("aria-expanded", el._h_timepicker.expanded);
       Alpine2.nextTick(() => {
-        if (el._timepicker.expanded) {
-          top.addEventListener("click", el._timepicker.close);
+        if (el._h_timepicker.expanded) {
+          top.addEventListener("click", el._h_timepicker.close);
         } else {
-          top.removeEventListener("click", el._timepicker.close);
+          top.removeEventListener("click", el._h_timepicker.close);
         }
       });
     };
@@ -24037,14 +24194,14 @@ function timepicker_default(Alpine) {
     cleanup(() => {
       el.removeEventListener("click", handler2);
       el.removeEventListener("keydown", handler2);
-      top.removeEventListener("click", el._timepicker.close);
+      top.removeEventListener("click", el._h_timepicker.close);
     });
   });
   Alpine.directive("h-time-picker-input", (el, {}, { effect, Alpine: Alpine2 }) => {
     if (el.tagName !== "INPUT") {
       throw new Error("h-time-picker-input must be a readonly input of type text");
     }
-    const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_timepicker"));
+    const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
     if (!timepicker) {
       throw new Error("h-time-picker-input must be inside an h-time-picker element");
     }
@@ -24054,9 +24211,9 @@ function timepicker_default(Alpine) {
       });
     };
     if (el.hasOwnProperty("_x_model")) {
-      timepicker._timepicker.model = el._x_model;
+      timepicker._h_timepicker.model = el._x_model;
     } else {
-      timepicker._timepicker.model = {
+      timepicker._h_timepicker.model = {
         get() {
           return el.value;
         },
@@ -24066,62 +24223,62 @@ function timepicker_default(Alpine) {
       };
     }
     if (el.hasAttribute("id")) {
-      timepicker._timepicker.id = el.getAttribute("id");
+      timepicker._h_timepicker.id = el.getAttribute("id");
     } else {
-      timepicker._timepicker.id = `htp${v4_default()}`;
-      el.setAttribute("id", timepicker._timepicker.id);
+      timepicker._h_timepicker.id = `htp${v4_default()}`;
+      el.setAttribute("id", timepicker._h_timepicker.id);
     }
     el.classList.add("cursor-pointer", "bg-transparent", "outline-none", "flex-1", "h-full", "border-0", "focus-visible:ring-0", "md:text-sm", "text-base", "after:block", "after:w-1");
     el.readOnly = true;
     el.setAttribute("aria-autocomplete", "none");
-    el.setAttribute("aria-controls", timepicker._timepicker.controls);
+    el.setAttribute("aria-controls", timepicker._h_timepicker.controls);
     el.setAttribute("aria-expanded", "false");
     el.setAttribute("aria-haspopup", "dialog");
     el.setAttribute("type", "text");
     el.setAttribute("data-slot", "time-picker-input");
-    const rawTime = timepicker._timepicker.model.get();
+    const rawTime = timepicker._h_timepicker.model.get();
     if (rawTime) {
-      const { hour, minute, second, period } = getSelectedTime(rawTime, timepicker._timepicker.is12Hour);
-      if (timepicker._timepicker.seconds === void 0 && !second) {
-        timepicker._timepicker.seconds = false;
-      } else if (timepicker._timepicker.seconds === void 0 && second) {
-        timepicker._timepicker.seconds = true;
+      const { hour, minute, second, period } = getSelectedTime(rawTime, timepicker._h_timepicker.is12Hour);
+      if (timepicker._h_timepicker.seconds === void 0 && !second) {
+        timepicker._h_timepicker.seconds = false;
+      } else if (timepicker._h_timepicker.seconds === void 0 && second) {
+        timepicker._h_timepicker.seconds = true;
       }
-      if (timepicker._timepicker.is12Hour) {
-        if (timepicker._timepicker.seconds) {
-          timepicker._timepicker.model.set(`${hour}:${minute}:${second ?? "00"} ${period}`);
+      if (timepicker._h_timepicker.is12Hour) {
+        if (timepicker._h_timepicker.seconds) {
+          timepicker._h_timepicker.model.set(`${hour}:${minute}:${second ?? "00"} ${period}`);
           timepicker._time.parts.second = second ?? "00";
         } else {
-          timepicker._timepicker.model.set(`${hour}:${minute} ${period}`);
+          timepicker._h_timepicker.model.set(`${hour}:${minute} ${period}`);
         }
         timepicker._time.parts.hour = hour;
         timepicker._time.parts.minute = minute;
         timepicker._time.parts.period = period;
       } else {
-        if (timepicker._timepicker.seconds) {
-          timepicker._timepicker.model.set(`${hour}:${minute}:${second ?? "00"}`);
+        if (timepicker._h_timepicker.seconds) {
+          timepicker._h_timepicker.model.set(`${hour}:${minute}:${second ?? "00"}`);
           timepicker._time.parts.second = second ?? "00";
         } else {
-          timepicker._timepicker.model.set(`${hour}:${minute}`);
+          timepicker._h_timepicker.model.set(`${hour}:${minute}`);
         }
         timepicker._time.parts.hour = hour;
         timepicker._time.parts.minute = minute;
       }
     }
     let placeholder;
-    if (timepicker._timepicker.seconds) {
-      placeholder = timepicker._timepicker.is12Hour ? "--:--:-- --" : "--:--:--";
+    if (timepicker._h_timepicker.seconds) {
+      placeholder = timepicker._h_timepicker.is12Hour ? "--:--:-- --" : "--:--:--";
     } else {
-      placeholder = timepicker._timepicker.is12Hour ? "--:-- --" : "--:--";
+      placeholder = timepicker._h_timepicker.is12Hour ? "--:-- --" : "--:--";
     }
     el.setAttribute("placeholder", placeholder);
     effect(() => {
-      el.setAttribute("data-state", timepicker._timepicker.expanded ? "open" : "closed");
-      el.setAttribute("aria-expanded", timepicker._timepicker.expanded);
+      el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
+      el.setAttribute("aria-expanded", timepicker._h_timepicker.expanded);
     });
   }).before("h-button");
   Alpine.directive("h-time-picker-popup", (el, {}, { effect, cleanup, Alpine: Alpine2 }) => {
-    const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_timepicker"));
+    const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
     el.classList.add(
       "overflow-hidden",
       "outline-none",
@@ -24140,8 +24297,8 @@ function timepicker_default(Alpine) {
     el.setAttribute("role", "dialog");
     el.setAttribute("aria-modal", "true");
     el.setAttribute("data-slot", "time-picker-popup");
-    el.setAttribute("aria-labelledby", timepicker._timepicker.id);
-    el.setAttribute("data-state", timepicker._timepicker.expanded ? "open" : "closed");
+    el.setAttribute("aria-labelledby", timepicker._h_timepicker.id);
+    el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
     const optionClasses = [
       "px-3.5",
       "py-2",
@@ -24163,7 +24320,7 @@ function timepicker_default(Alpine) {
     const updateModel = () => {
       let newValue;
       if (timepicker._time.parts.hour !== null && timepicker._time.parts.minute !== null) {
-        if (timepicker._timepicker.seconds) {
+        if (timepicker._h_timepicker.seconds) {
           if (timepicker._time.parts.seconds !== null) {
             newValue = `${timepicker._time.parts.hour}:${timepicker._time.parts.minute}:${timepicker._time.parts.second}`;
           } else return;
@@ -24171,13 +24328,13 @@ function timepicker_default(Alpine) {
           newValue = `${timepicker._time.parts.hour}:${timepicker._time.parts.minute}`;
         }
       } else return;
-      if (timepicker._timepicker.is12Hour) {
+      if (timepicker._h_timepicker.is12Hour) {
         if (timepicker._time.parts.period !== null) {
           newValue += ` ${timepicker._time.parts.period}`;
         } else return;
       }
       if (newValue) {
-        timepicker._timepicker.model.set(newValue);
+        timepicker._h_timepicker.model.set(newValue);
         timepicker._time.changed();
       }
     };
@@ -24185,22 +24342,22 @@ function timepicker_default(Alpine) {
       let date = /* @__PURE__ */ new Date();
       let hour = date.getHours();
       timepicker._time.parts.period = hour >= 12 ? dayPeriodLabels.pm : dayPeriodLabels.am;
-      if (timepicker._timepicker.is12Hour) {
+      if (timepicker._h_timepicker.is12Hour) {
         hour = date.getHours() % 12 || 12;
       }
       let minute = date.getMinutes();
       timepicker._time.parts.hour = hour < 10 ? `0${hour}` : hour.toString();
       timepicker._time.parts.minute = minute < 10 ? `0${minute}` : minute.toString();
-      if (timepicker._timepicker.seconds) {
+      if (timepicker._h_timepicker.seconds) {
         let second = date.getSeconds();
         timepicker._time.parts.second = second < 10 ? `0${second}` : second.toString();
       }
       updateModel();
-      timepicker._timepicker.close();
+      timepicker._h_timepicker.close();
     };
     function onKeyDown(event) {
       if (event.key === "Escape") {
-        timepicker._timepicker.close();
+        timepicker._h_timepicker.close();
       } else if (event.target.tagName === "LI") {
         let list;
         let inHoursList = event.target.parentElement.dataset.type === "hours";
@@ -24218,7 +24375,7 @@ function timepicker_default(Alpine) {
             event.target.setAttribute("tabindex", "-1");
             let prevElem = event.target.previousElementSibling;
             if (prevElem === null || prevElem.classList.contains("hidden")) {
-              if (inHoursList && timepicker._timepicker.is12Hour) {
+              if (inHoursList && timepicker._h_timepicker.is12Hour) {
                 prevElem = list.children[12];
               } else {
                 prevElem = list.lastChild;
@@ -24231,7 +24388,7 @@ function timepicker_default(Alpine) {
             event.target.setAttribute("tabindex", "-1");
             let nextElem = event.target.nextElementSibling;
             if (nextElem === null || nextElem.classList.contains("hidden")) {
-              if (inHoursList && timepicker._timepicker.is12Hour) {
+              if (inHoursList && timepicker._h_timepicker.is12Hour) {
                 nextElem = list.children[1];
               } else {
                 nextElem = list.firstChild;
@@ -24254,7 +24411,7 @@ function timepicker_default(Alpine) {
           if (selectedHour) {
             selectedHour.focus();
           } else {
-            hoursList.children[timepicker._timepicker.is12Hour ? 1 : 0].focus();
+            hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].focus();
           }
           event.stopPropagation();
           event.preventDefault();
@@ -24319,7 +24476,7 @@ function timepicker_default(Alpine) {
     }
     const secondsList = document.createElement("ul");
     secondsList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
-    if (!timepicker._timepicker.seconds) {
+    if (!timepicker._h_timepicker.seconds) {
       secondsList.classList.add("hidden");
     }
     secondsList.setAttribute("role", "listbox");
@@ -24339,7 +24496,7 @@ function timepicker_default(Alpine) {
     }
     const periodList = document.createElement("ul");
     periodList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
-    if (!timepicker._timepicker.is12Hour) {
+    if (!timepicker._h_timepicker.is12Hour) {
       periodList.classList.add("hidden");
     }
     periodList.setAttribute("role", "listbox");
@@ -24378,7 +24535,7 @@ function timepicker_default(Alpine) {
     okButton.setAttribute("data-action", "close");
     okButton.innerText = el.dataset.labelOk ?? "OK";
     okButton.disabled = true;
-    okButton.addEventListener("click", timepicker._timepicker.close);
+    okButton.addEventListener("click", timepicker._h_timepicker.close);
     footer.appendChild(okButton);
     el.appendChild(footer);
     Alpine2.initTree(footer);
@@ -24387,7 +24544,7 @@ function timepicker_default(Alpine) {
     let selectedSecond;
     let selectedPeriod;
     function render() {
-      if (timepicker._timepicker.is12Hour) {
+      if (timepicker._h_timepicker.is12Hour) {
         hoursList.firstChild.classList.add("hidden");
         for (let h = 1; h < 13; h++) {
           if (hoursList.children[h].innerText === timepicker._time.parts.hour) {
@@ -24418,7 +24575,7 @@ function timepicker_default(Alpine) {
         }
       }
       if (!selectedHour) {
-        hoursList.children[timepicker._timepicker.is12Hour ? 1 : 0].setAttribute("tabindex", "0");
+        hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].setAttribute("tabindex", "0");
       }
       for (let m = 0; m < minutesList.children.length; m++) {
         if (minutesList.children[m].innerText === timepicker._time.parts.minute) {
@@ -24433,7 +24590,7 @@ function timepicker_default(Alpine) {
       if (!selectedMinute) {
         minutesList.firstChild.setAttribute("tabindex", "0");
       }
-      if (timepicker._timepicker.seconds) {
+      if (timepicker._h_timepicker.seconds) {
         secondsList.classList.remove("hidden");
         for (let s = 0; s < secondsList.children.length; s++) {
           if (secondsList.children[s].innerText === timepicker._time.parts.second) {
@@ -24448,20 +24605,20 @@ function timepicker_default(Alpine) {
         if (!selectedSecond) {
           secondsList.firstChild.setAttribute("tabindex", "0");
         }
-        if (timepicker._timepicker.is12Hour) {
+        if (timepicker._h_timepicker.is12Hour) {
           okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute && timepicker._time.parts.second && timepicker._time.parts.period ? false : true;
         } else {
           okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute && timepicker._time.parts.second ? false : true;
         }
       } else {
         secondsList.classList.add("hidden");
-        if (timepicker._timepicker.is12Hour) {
+        if (timepicker._h_timepicker.is12Hour) {
           okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute && timepicker._time.parts.period ? false : true;
         } else {
           okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute ? false : true;
         }
       }
-      if (timepicker._timepicker.is12Hour) {
+      if (timepicker._h_timepicker.is12Hour) {
         periodList.classList.remove("hidden");
         for (let p = 0; p < periodList.children.length; p++) {
           if (periodList.children[p].innerText === timepicker._time.parts.period) {
@@ -24494,7 +24651,7 @@ function timepicker_default(Alpine) {
         if (selectedHour) {
           selectedHour.focus();
         } else {
-          hoursList.children[timepicker._timepicker.is12Hour ? 1 : 0].focus();
+          hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].focus();
         }
         Object.assign(el.style, {
           left: `${x}px`,
@@ -24503,13 +24660,13 @@ function timepicker_default(Alpine) {
       });
     }
     effect(() => {
-      el.setAttribute("data-state", timepicker._timepicker.expanded ? "open" : "closed");
-      if (timepicker._timepicker.expanded) {
+      el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
+      if (timepicker._h_timepicker.expanded) {
         render();
         autoUpdateCleanup = autoUpdate(timepicker, el, updatePosition);
         if (selectedHour) selectedHour.scrollIntoView({ block: "center" });
         if (selectedMinute) selectedMinute.scrollIntoView({ block: "center" });
-        if (selectedSecond && timepicker._timepicker.seconds) selectedSecond.scrollIntoView({ block: "center" });
+        if (selectedSecond && timepicker._h_timepicker.seconds) selectedSecond.scrollIntoView({ block: "center" });
       } else {
         if (autoUpdateCleanup) autoUpdateCleanup();
         Object.assign(el.style, {
@@ -24521,7 +24678,7 @@ function timepicker_default(Alpine) {
     cleanup(() => {
       el.removeEventListener("keydown", onKeyDown);
       el.removeEventListener("click", onClick);
-      okButton.removeEventListener("click", timepicker._timepicker.close);
+      okButton.removeEventListener("click", timepicker._h_timepicker.close);
       for (let h = 0; h < hoursList.children.length; h++) {
         hoursList.children[h].removeEventListener("click", setHour);
       }
@@ -24661,7 +24818,7 @@ function tooltip_default(Alpine) {
 }
 
 // package.json
-var version = "0.5.0";
+var version = "0.6.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler2, breakpoint = 768) {
@@ -24731,6 +24888,18 @@ var getColorScheme = () => {
 };
 initColorScheme();
 
+// src/utils/focus.js
+function focus_default(Alpine) {
+  Alpine.directive("h-focus", (el, { expression }, { effect, evaluateLater }) => {
+    const getValue = evaluateLater(expression);
+    effect(() => {
+      getValue((val) => {
+        if (val) el.focus();
+      });
+    });
+  });
+}
+
 // src/module.js
 var registerComponents = (registerPlugin) => {
   registerPlugin(accordion_default);
@@ -24745,6 +24914,7 @@ var registerComponents = (registerPlugin) => {
   registerPlugin(datepicker_default);
   registerPlugin(dialog_default);
   registerPlugin(fieldset_default);
+  registerPlugin(focus_default);
   registerPlugin(icon_default);
   registerPlugin(info_page_default);
   registerPlugin(input_default);
@@ -24758,6 +24928,7 @@ var registerComponents = (registerPlugin) => {
   registerPlugin(range_default);
   registerPlugin(select_default);
   registerPlugin(separator_default);
+  registerPlugin(sheet_default);
   registerPlugin(sidebar_default);
   registerPlugin(skeleton_default);
   registerPlugin(spinner_default);
@@ -24786,6 +24957,7 @@ export {
   datepicker_default as DatePicker,
   dialog_default as Dialog,
   fieldset_default as Fieldset,
+  focus_default as Focus,
   icon_default as Icon,
   info_page_default as InfoPage,
   input_default as Input,
@@ -24799,6 +24971,7 @@ export {
   range_default as Range,
   select_default as Select,
   separator_default as Separator,
+  sheet_default as Sheet,
   sidebar_default as Sidebar,
   skeleton_default as Skeleton,
   spinner_default as Spinner,