@codbex/harmonia 0.5.0 → 0.7.0

package/dist/harmonia.js

@@ -137,14 +137,14 @@
   // 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");
       }
@@ -152,24 +152,24 @@
       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);
@@ -178,8 +178,8 @@
       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");
       }
@@ -234,17 +234,17 @@
           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();
@@ -252,10 +252,10 @@
       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();
           }
         });
@@ -264,13 +264,13 @@
     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");
         });
       }
     });
@@ -360,7 +360,7 @@
         "[&>svg]:size-5"
       );
       el.setAttribute("data-slot", "avatar");
-      el._avatar = Alpine2.reactive({
+      el._h_avatar = Alpine2.reactive({
         fallback: false
       });
       if (el.tagName === "BUTTON") {
@@ -368,7 +368,7 @@
       }
     });
     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");
       }
@@ -379,7 +379,7 @@
       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) {
@@ -404,14 +404,14 @@
       });
     });
     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");
       });
     });
@@ -425,7 +425,7 @@
         "inline-flex",
         "items-center",
         "justify-center",
-        "rounded-md",
+        "rounded-full",
         "border",
         "px-2",
         "py-0.5",
@@ -477,7 +477,7 @@
     default: [
       "bg-secondary",
       "text-secondary-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-secondary-hover",
       "active:bg-secondary-active",
       "aria-pressed:bg-secondary-active",
@@ -488,7 +488,7 @@
     primary: [
       "bg-primary",
       "text-primary-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-primary-hover",
       "active:bg-primary-active",
       "aria-pressed:bg-primary-active",
@@ -499,7 +499,7 @@
     positive: [
       "bg-positive",
       "text-positive-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-positive-hover",
       "active:bg-positive-active",
       "aria-pressed:bg-positive-active",
@@ -510,7 +510,7 @@
     negative: [
       "bg-negative",
       "text-negative-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-negative-hover",
       "active:bg-negative-active",
       "aria-pressed:bg-negative-active",
@@ -521,7 +521,7 @@
     warning: [
       "bg-warning",
       "text-warning-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-warning-hover",
       "active:bg-warning-active",
       "aria-pressed:bg-warning-active",
@@ -612,21 +612,24 @@
         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 {
@@ -2165,7 +2168,7 @@
   // src/components/calendar.js
   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) {
@@ -2173,9 +2176,9 @@
         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;
@@ -2198,38 +2201,38 @@
           }
         }
         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);
           }
         }
       }
@@ -2239,7 +2242,7 @@
         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;
@@ -2532,7 +2535,7 @@
             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 " ":
@@ -2596,8 +2599,8 @@
       }
       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();
@@ -2617,7 +2620,7 @@
           dayCells[d].removeEventListener("click", dayClick);
         }
         if (datepicker) {
-          datepicker._datepicker.input.removeEventListener("change", onInputChange);
+          datepicker._h_datepicker.input.removeEventListener("change", onInputChange);
         }
       });
     });
@@ -2702,7 +2705,7 @@
         "has-[input:invalid]:ring-negative/20",
         "relative",
         "rounded-[0.25rem]",
-        "shadow-control",
+        "shadow-input",
         "shrink-0",
         "size-5",
         "transition-color"
@@ -2715,7 +2718,7 @@
   // 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");
@@ -2723,13 +2726,13 @@
         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");
       }
@@ -2740,10 +2743,10 @@
         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(() => {
@@ -2751,14 +2754,14 @@
       });
     });
     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");
       });
     });
   }
@@ -2766,21 +2769,21 @@
   // src/components/datepicker.js
   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",
@@ -2790,7 +2793,7 @@
         "items-center",
         "rounded-control",
         "border",
-        "shadow-control",
+        "shadow-input",
         "transition-[color,box-shadow]",
         "duration-200",
         "outline-none",
@@ -2810,9 +2813,9 @@
         "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") {
@@ -2821,11 +2824,11 @@
       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");
@@ -2840,17 +2843,17 @@
         })
       );
       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);
@@ -2883,12 +2886,24 @@
                 }
               }
               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();
+            }
           }
         });
       });
@@ -2905,7 +2920,8 @@
         "top-[50%]",
         "left-[50%]",
         "z-50",
-        "grid",
+        "flex",
+        "flex-col",
         "w-full",
         "max-w-[calc(100%-2rem)]",
         "translate-x-[-50%]",
@@ -2915,24 +2931,27 @@
         "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(
@@ -2952,9 +2971,17 @@
       );
       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");
@@ -3113,7 +3140,7 @@
         "[&::-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",
@@ -3137,7 +3164,7 @@
         "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");
@@ -3156,7 +3183,7 @@
         "items-center",
         "rounded-control",
         "border",
-        "shadow-control",
+        "shadow-input",
         "transition-[color,box-shadow]",
         "outline-none",
         "h-9",
@@ -3275,7 +3302,7 @@
         "border-input",
         "border",
         "rounded-control",
-        "shadow-control",
+        "shadow-input",
         "outline-none",
         "disabled:pointer-events-none",
         "disabled:cursor-not-allowed",
@@ -3374,13 +3401,11 @@
       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");
@@ -3656,7 +3681,9 @@
     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",
@@ -3772,6 +3799,7 @@
             Alpine2.nextTick(() => {
               submenuitem.focus();
               el._menu_sub.expanded = true;
+              el.setAttribute("aria-expanded", true);
             });
           }
         }
@@ -3781,28 +3809,33 @@
         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);
@@ -3810,9 +3843,11 @@
         }
       }
       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);
@@ -4272,7 +4307,7 @@
         "has-[input:invalid]:ring-negative/20",
         "relative",
         "rounded-full",
-        "shadow-control",
+        "shadow-input",
         "shrink-0",
         "size-5"
       );
@@ -6168,7 +6203,7 @@
   });
   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,
@@ -6176,17 +6211,18 @@
         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) => {
@@ -6195,7 +6231,7 @@
           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"];
@@ -6227,38 +6263,38 @@
           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;
@@ -6266,26 +6302,72 @@
         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":
@@ -6296,16 +6378,30 @@
           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 {
@@ -6333,7 +6429,7 @@
       });
     });
     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");
       }
@@ -6341,11 +6437,11 @@
       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");
       }
@@ -6374,8 +6470,8 @@
         });
       }
       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();
@@ -6387,14 +6483,16 @@
       });
     });
     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");
@@ -6407,62 +6505,65 @@
       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",
@@ -6506,26 +6607,26 @@
       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");
@@ -6538,11 +6639,11 @@
         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");
@@ -6550,30 +6651,30 @@
         }
       }
       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();
           }
         }
@@ -6613,6 +6714,61 @@
     });
   }
 
+  // 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 }) => {
@@ -6950,6 +7106,128 @@
     });
   }
 
+  // src/components/split.js
+  function split_default(Alpine) {
+    Alpine.directive("h-split", (el) => {
+      el.classList.add("group/split", "flex", "data-[orientation=horizontal]:flex-row", "data-[orientation=vertical]:flex-col");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("data-slot", "split");
+    });
+    Alpine.directive("h-split-panel", (el) => {
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("data-slot", "split-panel");
+    });
+    Alpine.directive("h-split-gutter", (el, {}, { cleanup }) => {
+      el.classList.add(
+        "relative",
+        "shrink-0",
+        "touch-none",
+        "bg-border",
+        "outline-none",
+        "hover:bg-primary-hover",
+        "active:bg-primary-active",
+        "before:absolute",
+        "before:top-1/2",
+        "before:left-1/2",
+        "before:-translate-x-1/2",
+        "before:-translate-y-1/2",
+        "before:block",
+        "before:bg-transparent",
+        "hover:before:bg-primary-hover",
+        "group-data-[locked=true]/split:pointer-events-none",
+        "group-data-[orientation=horizontal]/split:cursor-col-resize",
+        "group-data-[orientation=vertical]/split:cursor-row-resize"
+      );
+      const borderClasses = [
+        "bg-border",
+        "outline-none",
+        "hover:bg-primary-hover",
+        "active:bg-primary-active",
+        "before:absolute",
+        "before:top-1/2",
+        "before:left-1/2",
+        "before:-translate-x-1/2",
+        "before:-translate-y-1/2",
+        "before:block",
+        "before:bg-transparent",
+        "hover:before:bg-primary-hover",
+        "group-data-[orientation=horizontal]/split:!w-px",
+        "group-data-[orientation=horizontal]/split:before:h-full",
+        "group-data-[orientation=horizontal]/split:before:w-[0.313rem]",
+        "group-data-[orientation=vertical]/split:!h-px",
+        "group-data-[orientation=vertical]/split:before:w-full",
+        "group-data-[orientation=vertical]/split:before:h-[0.313rem]"
+      ];
+      const handleClasses = [
+        "bg-transparent",
+        "outline-none",
+        "after:absolute",
+        "after:block",
+        "after:rounded-sm",
+        "after:bg-background",
+        "after:border-split-handle",
+        "after:border-2",
+        "after:shadow-xs",
+        "after:top-1/2",
+        "after:left-1/2",
+        "after:-translate-x-1/2",
+        "after:-translate-y-1/2",
+        "hover:after:border-primary-hover",
+        "active:after:border-primary-active",
+        "before:absolute",
+        "before:block",
+        "before:top-1/2",
+        "before:left-1/2",
+        "before:-translate-x-1/2",
+        "before:-translate-y-1/2",
+        "before:rounded-sm",
+        "before:from-transparent",
+        "before:from-15%",
+        "before:via-split-handle",
+        "before:to-85%",
+        "before:to-transparent",
+        "hover:before:bg-primary-hover",
+        "hover:before:via-transparent",
+        "active:before:bg-primary-active",
+        "active:before:via-transparent",
+        // Orientation classes
+        "group-data-[orientation=horizontal]/split:before:h-full",
+        "group-data-[orientation=horizontal]/split:before:w-0.5",
+        "group-data-[orientation=horizontal]/split:before:bg-gradient-to-b",
+        "group-data-[orientation=vertical]/split:before:h-0.5",
+        "group-data-[orientation=vertical]/split:before:w-full",
+        "group-data-[orientation=vertical]/split:before:bg-gradient-to-r",
+        // Size classes
+        "group-data-[orientation=horizontal]/split:!w-4",
+        "group-data-[orientation=horizontal]/split:after:w-2.5",
+        "group-data-[orientation=horizontal]/split:after:h-5",
+        "group-data-[orientation=vertical]/split:!h-4",
+        "group-data-[orientation=vertical]/split:after:w-5",
+        "group-data-[orientation=vertical]/split:after:h-2.5"
+      ];
+      el.setAttribute("data-slot", "split-gutter");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("role", "separator");
+      function setVariant(variant = "handle") {
+        if (variant === "border") {
+          el.classList.remove(...handleClasses);
+          el.classList.add(...borderClasses);
+        } else {
+          el.classList.remove(...borderClasses);
+          el.classList.add(...handleClasses);
+        }
+      }
+      const observer = new MutationObserver(() => {
+        setVariant(el.parentElement.getAttribute("data-variant"));
+      });
+      observer.observe(el.parentElement, { attributes: true, attributeFilter: ["data-variant"] });
+      setVariant(el.parentElement.getAttribute("data-variant"));
+      cleanup(() => {
+        observer.disconnect();
+      });
+    });
+  }
+
   // src/components/switch.js
   function switch_default(Alpine) {
     Alpine.directive("h-switch", (el) => {
@@ -6974,7 +7252,7 @@
         "before:pointer-events-none",
         "before:ring-0",
         "before:rounded-full",
-        "before:shadow-control",
+        "before:shadow-input",
         "before:size-5",
         "before:transition-transform",
         "bg-muted",
@@ -7006,7 +7284,7 @@
   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");
       }
@@ -7127,6 +7405,7 @@
         "[&: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]"
       );
@@ -7348,7 +7627,7 @@
         "px-3",
         "py-2",
         "text-base",
-        "shadow-control",
+        "shadow-input",
         "transition-[color,box-shadow]",
         "outline-none",
         "focus-visible:ring-[3px]",
@@ -7357,7 +7636,7 @@
         "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");
@@ -7497,7 +7776,7 @@
   };
   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,
@@ -7506,8 +7785,8 @@
         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 = {
@@ -7547,7 +7826,7 @@
         "pr-2",
         "text-sm",
         "whitespace-nowrap",
-        "shadow-control",
+        "shadow-input",
         "transition-[color,box-shadow]",
         "duration-200",
         "outline-none",
@@ -7574,28 +7853,28 @@
         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);
           }
         });
       };
@@ -7604,14 +7883,14 @@
       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");
       }
@@ -7621,9 +7900,9 @@
         });
       };
       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;
           },
@@ -7633,62 +7912,62 @@
         };
       }
       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;
-        }
-        if (timepicker._timepicker.is12Hour) {
-          if (timepicker._timepicker.seconds) {
-            timepicker._timepicker.model.set(`${hour}:${minute}:${second ?? "00"} ${period}`);
+        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._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",
@@ -7707,8 +7986,8 @@
       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",
@@ -7730,7 +8009,7 @@
       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;
@@ -7738,13 +8017,13 @@
             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();
         }
       };
@@ -7752,22 +8031,22 @@
         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";
@@ -7785,7 +8064,7 @@
               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;
@@ -7798,7 +8077,7 @@
               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;
@@ -7821,7 +8100,7 @@
             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();
@@ -7886,7 +8165,7 @@
       }
       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");
@@ -7906,7 +8185,7 @@
       }
       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");
@@ -7945,7 +8224,7 @@
       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);
@@ -7954,7 +8233,7 @@
       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) {
@@ -7985,7 +8264,7 @@
           }
         }
         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) {
@@ -8000,7 +8279,7 @@
         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) {
@@ -8015,20 +8294,20 @@
           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) {
@@ -8061,7 +8340,7 @@
           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`,
@@ -8070,13 +8349,13 @@
         });
       }
       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, {
@@ -8088,7 +8367,7 @@
       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);
         }
@@ -8295,8 +8574,20 @@
     };
   }
 
+  // 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();
+        });
+      });
+    });
+  }
+
   // package.json
-  var version = "0.5.0";
+  var version = "0.7.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, getColorScheme, setColorScheme, version };
@@ -8326,9 +8617,11 @@
     window.Alpine.plugin(range_default);
     window.Alpine.plugin(select_default);
     window.Alpine.plugin(separator_default);
+    window.Alpine.plugin(sheet_default);
     window.Alpine.plugin(sidebar_default);
     window.Alpine.plugin(skeleton_default);
     window.Alpine.plugin(spinner_default);
+    window.Alpine.plugin(split_default);
     window.Alpine.plugin(switch_default);
     window.Alpine.plugin(table_default);
     window.Alpine.plugin(tabs_default);
@@ -8339,6 +8632,7 @@
     window.Alpine.plugin(timepicker_default);
     window.Alpine.plugin(toolbar_default);
     window.Alpine.plugin(tooltip_default);
+    window.Alpine.plugin(focus_default);
   });
 })();
 /*! Bundled license information: