@codbex/harmonia 1.2.1 → 1.4.0

package/dist/harmonia.esm.js

@@ -2210,10 +2210,10 @@ function accordion_default(Alpine) {
     }) : { single: false };
     el.setAttribute("data-slot", "accordion");
   });
-  Alpine.directive("h-accordion-item", (el, { original: original2, expression, modifiers }, { effect, Alpine: Alpine2 }) => {
+  Alpine.directive("h-accordion-item", (el, { original, expression, modifiers }, { effect, Alpine: Alpine2 }) => {
     const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
     if (!accordion) {
-      throw new Error(`${original2} must be inside an accordion`);
+      throw new Error(`${original} must be inside an accordion`);
     }
     el.classList.add("border-b", "last:border-b-0", "[[data-variant=header]_&]:data-[state=closed]:border-b-0");
     el.setAttribute("data-slot", "accordion-item");
@@ -2241,14 +2241,14 @@ function accordion_default(Alpine) {
     setAttributes();
     effect(setAttributes);
   });
-  Alpine.directive("h-accordion-trigger", (el, { original: original2, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
+  Alpine.directive("h-accordion-trigger", (el, { original, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
     if (el.tagName.length !== 2 && !el.tagName.startsWith("H")) {
-      throw new Error(`${original2} must be a header element`);
+      throw new Error(`${original} must be a header element`);
     }
     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(`${original2} must have an accordion and accordion item parent elements`);
+      throw new Error(`${original} must have an accordion and accordion item parent elements`);
     }
     el.classList.add(
       "flex",
@@ -2433,10 +2433,10 @@ function avatar_default(Alpine) {
       el.classList.add("cursor-pointer", "hover:bg-secondary-hover", "active:bg-secondary-active");
     }
   });
-  Alpine.directive("h-avatar-image", (el, { original: original2 }, { cleanup }) => {
+  Alpine.directive("h-avatar-image", (el, { original }, { cleanup }) => {
     const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
     if (!avatar) {
-      throw new Error(`${original2} must be inside an avatar element`);
+      throw new Error(`${original} must be inside an avatar element`);
     }
     el.classList.add("aspect-square", "size-full");
     el.setAttribute("data-slot", "avatar-image");
@@ -2467,10 +2467,10 @@ function avatar_default(Alpine) {
       observer.disconnect();
     });
   });
-  Alpine.directive("h-avatar-fallback", (el, { original: original2 }, { effect }) => {
+  Alpine.directive("h-avatar-fallback", (el, { original }, { effect }) => {
     const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
     if (!avatar) {
-      throw new Error(`${original2} must be inside an avatar element`);
+      throw new Error(`${original} must be inside an avatar element`);
     }
     el.classList.add("hidden", "bg-muted", "flex", "size-full", "items-center", "justify-center");
     el.setAttribute("data-slot", "avatar-fallback");
@@ -2679,7 +2679,7 @@ var getButtonSize = (size3, isAddon = false) => {
   }
 };
 function button_default(Alpine) {
-  Alpine.directive("h-button", (el, { original: original2, modifiers }, { cleanup }) => {
+  Alpine.directive("h-button", (el, { original, modifiers }, { cleanup }) => {
     setButtonClasses(el);
     if (!el.hasAttribute("data-slot")) {
       el.setAttribute("data-slot", "button");
@@ -2696,7 +2696,7 @@ function button_default(Alpine) {
       el.classList.remove(...getButtonSize(lastSize, isAddon));
       el.classList.add(...getButtonSize(size3, isAddon));
       if (size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-        console.error(`${original2}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
+        console.error(`${original}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
       }
       lastSize = size3;
     }
@@ -4245,7 +4245,7 @@ var computePosition2 = (reference, floating, options) => {
 
 // src/components/calendar.js
 function calendar_default(Alpine) {
-  Alpine.directive("h-calendar", (el, { original: original2, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-calendar", (el, { original, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
     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");
@@ -4289,7 +4289,7 @@ function calendar_default(Alpine) {
     const onInputChange = () => {
       const newValue = new Date(datepicker._h_datepicker.input.value);
       if (isNaN(newValue)) {
-        console.error(`${original2}: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
+        console.error(`${original}: 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()) {
@@ -4306,7 +4306,7 @@ function calendar_default(Alpine) {
       if (el.hasOwnProperty("_x_model") && el._x_model.get()) {
         selected = new Date(el._x_model.get());
         if (isNaN(selected)) {
-          console.error(`${original2}: input value is not a valid date - ${el._x_model.get()}`);
+          console.error(`${original}: input value is not a valid date - ${el._x_model.get()}`);
           if (datepicker) datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
           else el.setAttribute("data-invalid", "true");
         } else if (datepicker) {
@@ -4815,10 +4815,10 @@ function collapsible_default(Alpine) {
       });
     }
   });
-  Alpine.directive("h-collapsible-trigger", (el, { original: original2, modifiers }, { effect, Alpine: Alpine2, cleanup }) => {
+  Alpine.directive("h-collapsible-trigger", (el, { original, modifiers }, { effect, Alpine: Alpine2, cleanup }) => {
     const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
     if (!collapsible) {
-      throw new Error(`${original2} must be inside a collapsible element`);
+      throw new Error(`${original} must be inside a collapsible element`);
     }
     if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible-trigger");
     if (modifiers.includes("chevron")) {
@@ -4837,10 +4837,10 @@ function collapsible_default(Alpine) {
       el.removeEventListener("click", handler);
     });
   });
-  Alpine.directive("h-collapsible-content", (el, { original: original2 }, { effect, Alpine: Alpine2 }) => {
+  Alpine.directive("h-collapsible-content", (el, { original }, { effect, Alpine: Alpine2 }) => {
     const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
     if (!collapsible) {
-      throw new Error(`${original2} must be inside an h-collapsible element`);
+      throw new Error(`${original} 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");
@@ -4871,7 +4871,7 @@ function sizeObserver(el) {
 
 // src/components/datepicker.js
 function datepicker_default(Alpine) {
-  Alpine.directive("h-date-picker", (el, { original: original2, modifiers }, { Alpine: Alpine2, cleanup }) => {
+  Alpine.directive("h-date-picker", (el, { original, modifiers }, { Alpine: Alpine2, cleanup }) => {
     const state = Alpine2.reactive({
       expanded: false
     });
@@ -4884,7 +4884,7 @@ function datepicker_default(Alpine) {
     };
     el._h_datepicker.input = el.querySelector("input");
     if (!el._h_datepicker.input || el._h_datepicker.input.tagName !== "INPUT") {
-      throw new Error(`${original2} must contain an input`);
+      throw new Error(`${original} must contain an input`);
     } else if (el._h_datepicker.input.hasAttribute("id")) {
       el._h_datepicker.id = el._h_datepicker.input.getAttribute("id");
     } else {
@@ -4961,16 +4961,16 @@ function datepicker_default(Alpine) {
       observer.disconnect();
     });
   });
-  Alpine.directive("h-date-picker-trigger", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-date-picker-trigger", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "BUTTON") {
-      throw new Error(`${original2} must be a button`);
+      throw new Error(`${original} must be a button`);
     }
     if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-      throw new Error(`${original2}: must have an "aria-label" or "aria-labelledby" attribute`);
+      throw new Error(`${original}: must have an "aria-label" or "aria-labelledby" attribute`);
     }
     const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
     if (!datepicker) {
-      throw new Error(`${original2} must be inside an date-picker element`);
+      throw new Error(`${original} must be inside an date-picker element`);
     }
     el.classList.add("cursor-pointer", "inline-flex", "items-center", "justify-center", "h-full", "aspect-square", "bg-transparent", "hover:bg-secondary", "active:bg-secondary-active", "outline-none");
     if (datepicker._h_datepicker.inTable) {
@@ -5250,13 +5250,13 @@ function fieldset_default(Alpine) {
 
 // src/components/icon.js
 function icon_default(Alpine) {
-  Alpine.directive("h-icon", (el, { original: original2, modifiers }) => {
+  Alpine.directive("h-icon", (el, { original, modifiers }) => {
     if (el.tagName.toLowerCase() !== "svg") {
-      throw new Error(`${original2} works only on svg elements`);
+      throw new Error(`${original} works only on svg elements`);
     } else if (!el.hasAttribute("role")) {
-      throw new Error(`${original2} must have a role`);
+      throw new Error(`${original} must have a role`);
     } else if (el.getAttribute("role") === "img" && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-      throw new Error(`${original2}: svg images with the role of img must have an "aria-label" or "aria-labelledby" attribute`);
+      throw new Error(`${original}: svg images with the role of img must have an "aria-label" or "aria-labelledby" attribute`);
     }
     el.classList.add("fill-current");
     el.setAttribute("data-slot", "icon");
@@ -5473,7 +5473,7 @@ function input_default(Alpine) {
     el.classList.add("text-muted-foreground", "flex", "items-center", "gap-2", "text-sm", "[&_svg]:pointer-events-none", "[&_svg:not([class*='size-'])]:size-4");
     el.setAttribute("data-slot", "label");
   });
-  Alpine.directive("h-input-number", (el, { original: original2 }, { cleanup }) => {
+  Alpine.directive("h-input-number", (el, { original }, { cleanup }) => {
     el.classList.add(
       "overflow-hidden",
       "group/input-number",
@@ -5506,7 +5506,7 @@ function input_default(Alpine) {
     el.setAttribute("data-slot", "input-number");
     const input = el.querySelector("input");
     if (!input || input.getAttribute("type") !== "number") {
-      throw new Error(`${original2} must contain an input of type 'number'`);
+      throw new Error(`${original} must contain an input of type 'number'`);
     }
     if (!input.hasAttribute("type")) input.setAttribute("type", "number");
     if (!input.hasAttribute("inputmode")) input.setAttribute("inputmode", "numeric");
@@ -5752,13 +5752,13 @@ function list_default(Alpine) {
     el.setAttribute("data-slot", "list");
     el.setAttribute("role", "group");
   });
-  Alpine.directive("h-list-header", (el, { original: original2 }, { Alpine: Alpine2 }) => {
+  Alpine.directive("h-list-header", (el, { original }, { Alpine: Alpine2 }) => {
     el.classList.add("font-medium", "flex", "items-center", "p-2", "gap-2", "align-middle", "bg-table-header", "text-table-header-foreground");
     el.setAttribute("role", "presentation");
     el.setAttribute("data-slot", "list-header");
     const list = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "list");
     if (!list) {
-      throw new Error(`${original2} must be placed inside a list element`);
+      throw new Error(`${original} must be placed inside a list element`);
     }
     if (!el.hasAttribute("id")) {
       const id = `lbh${v4_default()}`;
@@ -5810,9 +5810,9 @@ function menu_default(Alpine) {
     };
     el.setAttribute("data-state", "closed");
   });
-  Alpine.directive("h-menu", (el, { original: original2, modifiers }, { cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-menu", (el, { original, modifiers }, { cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "UL") {
-      throw new Error(`${original2} must be an ul element`);
+      throw new Error(`${original} must be an ul element`);
     }
     el.classList.add("hidden", "fixed", "bg-popover", "text-popover-foreground", "font-normal", "z-50", "min-w-[8rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "p-1", "shadow-md", "border", "outline-none");
     el.setAttribute("role", "menu");
@@ -5820,7 +5820,7 @@ function menu_default(Alpine) {
     el.setAttribute("tabindex", "-1");
     el.setAttribute("data-slot", "menu");
     if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-      throw new Error(`${original2} must have an "aria-label" or "aria-labelledby" attribute`);
+      throw new Error(`${original} must have an "aria-label" or "aria-labelledby" attribute`);
     }
     const isSubmenu = modifiers.includes("sub");
     const menuTrigger = (() => {
@@ -5832,7 +5832,7 @@ function menu_default(Alpine) {
       return sibling;
     })();
     if (!isSubmenu && !menuTrigger) {
-      throw new Error(`${original2} menu must be placed after a menu trigger element`);
+      throw new Error(`${original} menu must be placed after a menu trigger element`);
     }
     let menuSubItem;
     if (isSubmenu) menuSubItem = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "menu-sub");
@@ -6051,9 +6051,9 @@ function menu_default(Alpine) {
       el.removeEventListener("keydown", onKeyDown);
     });
   });
-  Alpine.directive("h-menu-item", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-menu-item", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "LI") {
-      throw new Error(`${original2} must be a li element`);
+      throw new Error(`${original} must be a li element`);
     }
     el.classList.add(
       "focus:bg-secondary-hover",
@@ -6107,7 +6107,7 @@ function menu_default(Alpine) {
       el.removeEventListener("mouseleave", focusOut);
     });
   });
-  Alpine.directive("h-menu-sub", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-menu-sub", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
     el.classList.add(
       "focus:bg-secondary-hover",
       "hover:bg-secondary-hover",
@@ -6139,7 +6139,7 @@ function menu_default(Alpine) {
     const chevronRight = createSvg({ icon: ChevronRight, classes: "size-4 ml-auto", attrs: { "aria-hidden": true, role: "presentation" } });
     el.appendChild(chevronRight);
     const parentMenu = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "menu");
-    if (!parentMenu) throw new Error(`${original2} must have a parent`);
+    if (!parentMenu) throw new Error(`${original} must have a parent`);
     el._menu_sub = {
       open: void 0,
       close: void 0,
@@ -6233,9 +6233,9 @@ function menu_default(Alpine) {
     el.classList.add("text-foreground", "px-2", "py-1.5", "text-sm", "font-semibold", "text-left", "data-[inset=true]:pl-8");
     el.setAttribute("data-slot", "menu-label");
   });
-  Alpine.directive("h-menu-checkbox-item", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-menu-checkbox-item", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "LI" && el.tagName !== "DIV") {
-      throw new Error(`${original2} must be a li or div element`);
+      throw new Error(`${original} must be a li or div element`);
     }
     el.classList.add(
       "focus:bg-secondary-hover",
@@ -6301,9 +6301,9 @@ function menu_default(Alpine) {
       el.removeEventListener("mouseleave", focusOut);
     });
   });
-  Alpine.directive("h-menu-radio-item", (el, { original: original2, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-menu-radio-item", (el, { original, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "LI" && el.tagName !== "DIV") {
-      throw new Error(`${original2} must be a li or div element`);
+      throw new Error(`${original} must be a li or div element`);
     }
     el.classList.add(
       "focus:bg-secondary-hover",
@@ -6507,6 +6507,7 @@ function popover_default(Alpine) {
     const close = () => {
       el._popover.expanded = false;
       el.addEventListener("click", handler);
+      setAttributes();
     };
     const handler = () => {
       el._popover.expanded = !el._popover.expanded;
@@ -6531,7 +6532,7 @@ function popover_default(Alpine) {
       });
     }
   });
-  Alpine.directive("h-popover", (el, { original: original2, modifiers }, { effect }) => {
+  Alpine.directive("h-popover", (el, { original, modifiers }, { effect }) => {
     const popover = (() => {
       let sibling = el.previousElementSibling;
       while (sibling && !sibling.hasOwnProperty("_popover")) {
@@ -6540,9 +6541,9 @@ function popover_default(Alpine) {
       return sibling;
     })();
     if (!popover) {
-      throw new Error(`${original2} must be placed after a popover element`);
+      throw new Error(`${original} must be placed after a popover element`);
     }
-    el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "top-0", "left-0", "z-50", "min-w-[1rem]", "rounded-md", "border", "shadow-md", "outline-hidden", "overflow-scroll");
+    el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "top-0", "left-0", "z-50", "min-w-[1rem]", "rounded-md", "border", "shadow-md", "outline-hidden", "overflow-auto");
     el.setAttribute("data-slot", "popover");
     el.setAttribute("role", "dialog");
     el.setAttribute("tabindex", "-1");
@@ -6695,7 +6696,8 @@ var FilterType = Object.freeze({
 function select_default(Alpine) {
   Alpine.directive("h-select", (el, { modifiers }, { Alpine: Alpine2, cleanup }) => {
     el._h_select = Alpine2.reactive({
-      id: void 0,
+      fieldLabelId: void 0,
+      trigger: void 0,
       controls: `hsc${v4_default()}`,
       expanded: false,
       multiple: false,
@@ -6742,13 +6744,20 @@ function select_default(Alpine) {
       });
     }
   });
-  Alpine.directive("h-select-input", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-select-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "INPUT") {
-      throw new Error(`${original2} must be a readonly input of type "text"`);
+      throw new Error(`${original} must be an input of type "text"`);
     }
     const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
+    const label = (() => {
+      const field = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "field");
+      if (field) {
+        return field.querySelector("[data-slot=field-label]");
+      }
+      return;
+    })();
     if (!select) {
-      throw new Error(`${original2} must be inside a select element`);
+      throw new Error(`${original} must be inside a select element`);
     } else if (el.hasOwnProperty("_x_model")) {
       select._h_select.multiple = Array.isArray(el._x_model.get());
       select._h_model.set = (value) => {
@@ -6786,6 +6795,19 @@ function select_default(Alpine) {
     fakeTrigger.setAttribute("data-slot", "select-value");
     fakeTrigger.setAttribute("tabindex", "0");
     fakeTrigger.classList.add("flex", "items-center", "justify-between", "gap-2", "outline-none", "pl-3", "pr-2", "size-full", "[&[data-state=open]>svg]:rotate-180");
+    select._h_select.trigger = fakeTrigger;
+    let labelObserver;
+    if (label) {
+      if (!label.hasAttribute("id")) {
+        label.setAttribute("id", `hsil${v4_default()}`);
+      }
+      select._h_select.fieldLabelId = label.getAttribute("id");
+      fakeTrigger.setAttribute("aria-labelledby", label.getAttribute("id"));
+      labelObserver = new MutationObserver(() => {
+        select._h_select.fieldLabelId = label.getAttribute("id");
+      });
+      labelObserver.observe(label, { attributes: true, attributeFilter: ["id"] });
+    }
     function getPlaceholder() {
       if (!el.value) {
         const value = el.getAttribute("placeholder");
@@ -6798,17 +6820,10 @@ function select_default(Alpine) {
       }
     }
     getPlaceholder();
-    const observer = new MutationObserver((mutations) => {
-      mutations.forEach((mutation) => {
-        if (mutation.attributeName === "data-id") {
-          select._h_select.id = el.getAttribute("data-id");
-          fakeTrigger.setAttribute("id", select._h_select.id);
-        } else if (mutation.attributeName === "placeholder" && !select._h_select.label.length) {
-          getPlaceholder();
-        }
-      });
+    const observer = new MutationObserver(() => {
+      getPlaceholder();
     });
-    observer.observe(el, { attributes: true, attributeFilter: ["data-id", "placeholder"] });
+    observer.observe(el, { attributes: true, attributeFilter: ["placeholder"] });
     effect(() => {
       if (select._h_select.label.length === 1) {
         displayValue.innerText = select._h_select.label[0];
@@ -6821,8 +6836,6 @@ function select_default(Alpine) {
       }
     });
     fakeTrigger.setAttribute("data-slot", "select-input");
-    select._h_select.id = el.hasAttribute("data-id") ? el.getAttribute("data-id") : `hs${v4_default()}`;
-    fakeTrigger.setAttribute("id", select._h_select.id);
     fakeTrigger.setAttribute("aria-controls", select._h_select.controls);
     fakeTrigger.setAttribute("aria-haspopup", "listbox");
     fakeTrigger.setAttribute("aria-autocomplete", "none");
@@ -6984,9 +6997,9 @@ function select_default(Alpine) {
     const onInputChange = () => {
       select._h_select.label.length = 0;
       for (let i = 0; i < select._h_select.listeners.length; i++) {
-        const label = select._h_select.listeners[i](select._h_model.get());
-        if (label) {
-          select._h_select.label.push(label);
+        const label2 = select._h_select.listeners[i](select._h_model.get());
+        if (label2) {
+          select._h_select.label.push(label2);
         }
       }
     };
@@ -6999,27 +7012,28 @@ function select_default(Alpine) {
       top.removeEventListener("click", close);
       el.removeEventListener("change", onInputChange);
       observer.disconnect();
+      if (labelObserver) {
+        labelObserver.disconnect();
+      }
     });
   });
-  Alpine.directive("h-select-content", (el, { original: original2 }, { effect, Alpine: Alpine2 }) => {
+  Alpine.directive("h-select-content", (el, { original }, { effect, Alpine: Alpine2 }) => {
     const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
     if (!select) {
-      throw new Error(`${original2} must be inside a select element`);
+      throw new Error(`${original} must be inside a select element`);
     }
     el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "p-1", "top-0", "left-0", "z-50", "min-w-[1rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "border", "shadow-md");
     el.setAttribute("data-slot", "select-content");
     el.setAttribute("role", "listbox");
-    el.setAttribute("role", "presentation");
     el.setAttribute("id", select._h_select.controls);
     el.setAttribute("tabindex", "-1");
     el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
-    const control = select.querySelector(`#${select._h_select.id}`);
-    if (!control) {
-      throw new Error(`${original2}: trigger not found`);
+    if (!select._h_select.trigger) {
+      throw new Error(`${original}: trigger not found`);
     }
     let autoUpdateCleanup;
     function updatePosition() {
-      computePosition2(control, el, {
+      computePosition2(select._h_select.trigger, el, {
         placement: el.getAttribute("data-align") || "bottom-start",
         middleware: [
           offset2(4),
@@ -7042,12 +7056,12 @@ function select_default(Alpine) {
       });
     }
     effect(() => {
-      el.setAttribute("aria-labelledby", select._h_select.id);
+      el.setAttribute("aria-labelledby", select._h_select.fieldLabelId);
     });
     effect(() => {
       el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
       if (select._h_select.expanded) {
-        autoUpdateCleanup = autoUpdate(control, el, updatePosition);
+        autoUpdateCleanup = autoUpdate(select._h_select.trigger, el, updatePosition);
       } else {
         if (autoUpdateCleanup) autoUpdateCleanup();
         Object.assign(el.style, {
@@ -7057,10 +7071,10 @@ function select_default(Alpine) {
       }
     });
   });
-  Alpine.directive("h-select-search", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-select-search", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
     if (!select) {
-      throw new Error(`${original2} must be inside an h-select element`);
+      throw new Error(`${original} must be inside an h-select element`);
     } else {
       select._h_select.filterType = FilterType[el.getAttribute("data-filter")] ?? FilterType["starts-with"];
     }
@@ -7132,10 +7146,10 @@ function select_default(Alpine) {
       selectGroup._h_selectGroup.labelledby = id;
     }
   });
-  Alpine.directive("h-select-option", (el, { original: original2, expression }, { effect, evaluateLater, cleanup }) => {
+  Alpine.directive("h-select-option", (el, { original, expression }, { effect, evaluateLater, cleanup }) => {
     const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
     if (!select) {
-      throw new Error(`${original2} must be inside an h-select element`);
+      throw new Error(`${original} must be inside an h-select element`);
     }
     el.classList.add(
       "focus:bg-primary",
@@ -7366,13 +7380,35 @@ function sidebar_default(Alpine) {
     el.classList.add("vbox", "min-h-0", "flex-1", "gap-2", "overflow-auto", "group-data-[collapsed=true]/sidebar:overflow-hidden");
     el.setAttribute("data-slot", "sidebar-content");
   });
-  Alpine.directive("h-sidebar-group", (el) => {
+  Alpine.directive("h-sidebar-group", (el, { expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
     el.classList.add("relative", "vbox", "w-full", "min-w-0", "p-2");
     el.setAttribute("data-slot", "sidebar-group");
+    el._h_sidebar_group = {
+      collapsable: modifiers.includes("collapsed"),
+      controlId: void 0,
+      controls: void 0,
+      state: Alpine2.reactive({
+        collapsed: evaluate2(expression || "false")
+      })
+    };
+    if (expression) {
+      el._h_sidebar_group.state = Alpine2.reactive({
+        collapsed: evaluate2(expression || "false")
+      });
+      const getCollapsed = evaluateLater(expression);
+      effect(() => {
+        getCollapsed((collapsed) => {
+          el._h_sidebar_group.state.collapsed = collapsed;
+        });
+      });
+    }
   });
-  Alpine.directive("h-sidebar-group-label", (el, { modifiers }) => {
+  Alpine.directive("h-sidebar-group-label", (el, { original }, { cleanup }) => {
+    const group = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_group"));
+    if (!group) {
+      throw new Error(`${original} must be placed inside a sidebar group`);
+    }
     el.classList.add(
-      "text-sidebar-foreground/70",
       "ring-sidebar-ring",
       "flex",
       "h-8",
@@ -7380,7 +7416,6 @@ function sidebar_default(Alpine) {
       "items-center",
       "rounded-md",
       "px-2",
-      "text-xs",
       "font-medium",
       "outline-hidden",
       "transition-[margin,opacity]",
@@ -7391,8 +7426,39 @@ function sidebar_default(Alpine) {
       "[&>svg]:shrink-0",
       "group-data-[collapsed=true]/sidebar:!hidden"
     );
-    if (modifiers.includes("action")) el.classList.add("hover:bg-secondary-hover", "active:bg-secondary-active");
     el.setAttribute("data-slot", "sidebar-group-label");
+    if (group._h_sidebar_group.collapsable) {
+      el.classList.add("text-sidebar-foreground", "text-sm", "hover:bg-secondary-hover", "active:bg-secondary-active");
+      if (el.hasAttribute("id")) {
+        group._h_sidebar_group.controlId = el.getAttribute("id");
+      } else {
+        group._h_sidebar_group.controlId = `sgl${v4_default()}`;
+        el.setAttribute("id", group._h_sidebar_group.controlId);
+      }
+      group._h_sidebar_group.controls = `sgc${v4_default()}`;
+      el.setAttribute("aria-controls", group._h_sidebar_group.controls);
+      el.setAttribute("aria-expanded", !group._h_sidebar_group.state.collapsed);
+      const handler = () => {
+        group._h_sidebar_group.state.collapsed = !group._h_sidebar_group.state.collapsed;
+        el.setAttribute("aria-expanded", !group._h_sidebar_group.state.collapsed);
+      };
+      el.appendChild(
+        createSvg({
+          icon: ChevronRight,
+          classes: "ml-auto pointer-events-none size-4 shrink-0 transition-transform duration-200 [[aria-expanded=true]>&]:rotate-90",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
+      el.addEventListener("click", handler);
+      cleanup(() => {
+        el.removeEventListener("click", handler);
+      });
+    } else {
+      el.classList.add("text-sidebar-foreground/70", "text-xs");
+    }
   });
   Alpine.directive("h-sidebar-group-action", (el) => {
     el.classList.add(
@@ -7427,41 +7493,85 @@ function sidebar_default(Alpine) {
     }
     el.setAttribute("data-slot", "sidebar-group-action");
   });
-  Alpine.directive("h-sidebar-group-content", (el) => {
-    el.classList.add("w-full", "text-sm");
+  Alpine.directive("h-sidebar-group-content", (el, { original }, { effect }) => {
+    const group = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_group"));
+    if (!group) {
+      throw new Error(`${original} must be placed inside a sidebar group`);
+    }
+    el.classList.add("w-full", "text-sm", "data-[collapsed=true]:hidden", "group-data-[collapsed=true]/sidebar:!block");
     el.setAttribute("data-slot", "sidebar-group-content");
+    if (group._h_sidebar_group.collapsable) {
+      el.setAttribute("id", group._h_sidebar_group.controls);
+      el.setAttribute("aria-labelledby", group._h_sidebar_group.controlId);
+      el.setAttribute("data-collapsed", group._h_sidebar_group.state.collapsed);
+      effect(() => {
+        el.setAttribute("data-collapsed", group._h_sidebar_group.state.collapsed);
+      });
+    }
   });
-  Alpine.directive("h-sidebar-menu", (el) => {
+  Alpine.directive("h-sidebar-menu", (el, { original }) => {
+    if (el.tagName !== "UL") {
+      throw new Error(`${original} must be an ul element`);
+    }
     el.classList.add("vbox", "w-full", "min-w-0", "gap-1");
     el.setAttribute("data-slot", "sidebar-menu");
   });
-  Alpine.directive("h-sidebar-menu-item", (el, { original: original2 }) => {
-    if (el.tagName !== "BUTTON") {
-      throw new Error(`${original2} must be a button`);
+  Alpine.directive("h-sidebar-menu-item", (el, { original, expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
+    if (el.tagName !== "LI") {
+      throw new Error(`${original} must be a li element`);
+    }
+    el._h_sidebar_menu_item = {
+      isSub: false,
+      collapsable: modifiers.includes("collapsed"),
+      controlId: void 0,
+      controls: void 0,
+      state: Alpine2.reactive({
+        collapsed: evaluate2(expression || "false")
+      })
+    };
+    let parent = el.parentElement;
+    while (parent) {
+      if (parent.getAttribute("data-slot") === "sidebar-menu-sub") {
+        el._h_sidebar_menu_item.isSub = true;
+        break;
+      } else if (parent.getAttribute("data-slot") === "sidebar") {
+        break;
+      }
+      parent = parent.parentElement;
+    }
+    if (!el._h_sidebar_menu_item.isSub) {
+      el.classList.add("group/menu-item", "relative");
+    } else {
+      el.classList.add("relative");
     }
-    el.classList.add("group/menu-item", "relative");
-    el.setAttribute("type", "button");
     el.setAttribute("data-slot", "sidebar-menu-item");
+    if (expression) {
+      const getCollapsed = evaluateLater(expression);
+      effect(() => {
+        getCollapsed((collapsed) => {
+          el._h_sidebar_menu_item.state.collapsed = collapsed;
+        });
+      });
+    }
   });
-  Alpine.directive("h-sidebar-menu-button", (el) => {
-    if (el.tagName !== "BUTTON") {
-      throw new Error(`${original} must be a button`);
+  Alpine.directive("h-sidebar-menu-button", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
+    if (el.tagName !== "BUTTON" && el.tagName !== "A") {
+      throw new Error(`${original} must be a button or a link`);
+    } else if (el.tagName === "BUTTON") {
+      el.setAttribute("type", "button");
     }
+    const menuItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_menu_item"));
     el.classList.add(
-      "peer/menu-button",
       "flex",
       "w-full",
       "items-center",
       "gap-2",
       "overflow-hidden",
       "rounded-md",
-      "p-2",
-      "text-left",
-      "text-sm",
       "align-middle",
+      "[&>span]:align-middle",
       "outline-hidden",
       "ring-sidebar-ring",
-      "transition-[width,height,padding]",
       "hover:bg-sidebar-secondary",
       "hover:text-sidebar-secondary-foreground",
       "focus-visible:ring-2",
@@ -7469,25 +7579,14 @@ function sidebar_default(Alpine) {
       "active:text-sidebar-primary-foreground",
       "disabled:pointer-events-none",
       "disabled:opacity-50",
-      "group-has-data-[sidebar=menu-action]/menu-item:pr-8",
       "aria-disabled:pointer-events-none",
       "aria-disabled:opacity-50",
       "data-[active=true]:bg-sidebar-primary",
-      "data-[active=true]:font-medium",
       "data-[active=true]:text-sidebar-primary-foreground",
-      "data-[state=open]:hover:bg-sidebar-secondary",
-      "data-[state=open]:hover:text-sidebar-secondary-foreground",
-      "group-data-[collapsed=true]/sidebar:!size-8",
-      "group-data-[collapsed=true]/sidebar:!p-2",
-      "group-data-[collapsed=true]/sidebar:[&>*:not(svg:first-child):not([data-slot=menu])]:!hidden",
       "[&>span]:truncate",
-      "[&>span]:align-middle",
       "[&>svg]:size-4",
-      "[&>svg]:shrink-0",
-      "[&>svg:not(:first-child):last-child]:ml-auto"
+      "[&>svg]:shrink-0"
     );
-    el.setAttribute("type", "button");
-    if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "sidebar-menu-button");
     const sizes = {
       default: ["h-8", "text-sm"],
       sm: ["h-7", "text-xs"],
@@ -7498,22 +7597,77 @@ function sidebar_default(Alpine) {
         el.classList.add(...sizes[size3]);
       }
     }
-    if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "default");
-    setSize2(el.getAttribute("data-size"));
+    setSize2(el.getAttribute("data-size") || "default");
+    if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "sidebar-menu-button");
+    if (menuItem && menuItem._h_sidebar_menu_item.isSub) {
+      el.classList.add("text-sidebar-foreground", "h-7", "min-w-0", "-translate-x-px", "px-2", "[&>svg:not(:first-child):last-child]:ml-auto", "group-data-[collapsed=true]/sidebar:hidden");
+      if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "sidebar-menu-sub-button");
+    } else {
+      el.classList.add(
+        "peer/menu-button",
+        "p-2",
+        "text-left",
+        "text-sm",
+        "duration-200",
+        "transition-[width,height,padding]",
+        "group-has-data-[sidebar=menu-action]/menu-item:pr-8",
+        "data-[active=true]:font-medium",
+        "data-[state=open]:hover:bg-sidebar-secondary",
+        "data-[state=open]:hover:text-sidebar-secondary-foreground",
+        "group-data-[collapsed=true]/sidebar:!size-8",
+        "group-data-[collapsed=true]/sidebar:!p-2",
+        "group-data-[collapsed=true]/sidebar:[&>*:not(svg:first-child):not([data-slot=menu])]:!hidden"
+      );
+    }
+    if (menuItem && menuItem._h_sidebar_menu_item.collapsable) {
+      if (el.hasAttribute("id")) {
+        menuItem._h_sidebar_menu_item.controlId = el.getAttribute("id");
+      } else {
+        menuItem._h_sidebar_menu_item.controlId = `sgl${v4_default()}`;
+        el.setAttribute("id", menuItem._h_sidebar_menu_item.controlId);
+      }
+      menuItem._h_sidebar_menu_item.controls = `sgc${v4_default()}`;
+      el.setAttribute("aria-controls", menuItem._h_sidebar_menu_item.controls);
+      el.setAttribute("aria-expanded", !menuItem._h_sidebar_menu_item.state.collapsed);
+      const handler = () => {
+        menuItem._h_sidebar_menu_item.state.collapsed = !menuItem._h_sidebar_menu_item.state.collapsed;
+        el.setAttribute("aria-expanded", !menuItem._h_sidebar_menu_item.state.collapsed);
+      };
+      el.appendChild(
+        createSvg({
+          icon: ChevronRight,
+          classes: "ml-auto pointer-events-none size-4 shrink-0 transition-transform duration-200 [[aria-expanded=true]>&]:rotate-90",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
+      el.addEventListener("click", handler);
+      cleanup(() => {
+        el.removeEventListener("click", handler);
+      });
+    } else {
+      el.classList.add("[&>svg:not(:first-child):last-child]:ml-auto");
+    }
   });
   Alpine.directive("h-sidebar-menu-action", (el, { modifiers }) => {
     el.classList.add(
       "text-sidebar-foreground",
       "ring-sidebar-ring",
       "hover:bg-sidebar-secondary",
+      "active:bg-sidebar-secondary/70",
       "hover:text-sidebar-secondary-foreground",
       "peer-hover/menu-button:text-sidebar-secondary-foreground",
+      "peer-active/menu-button:text-sidebar-primary-foreground",
+      "peer-data-[active=true]/menu-button:text-sidebar-primary-foreground",
       "absolute",
-      "top-1.5",
-      "right-1.5",
+      "top-0.5",
+      "right-0.5",
+      "bottom-0.5",
       "flex",
       "aspect-square",
-      "w-5",
+      "h-auto",
       "items-center",
       "justify-center",
       "rounded-md",
@@ -7526,13 +7680,10 @@ function sidebar_default(Alpine) {
       "after:absolute",
       "after:-inset-2",
       "md:after:hidden",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
       "group-data-[collapsed=true]/sidebar:hidden"
     );
     if (modifiers.includes("autohide")) {
-      el.classList.add("peer-data-[active=true]/menu-button:text-sidebar-secondary-foreground", "group-focus-within/menu-item:opacity-100", "group-hover/menu-item:opacity-100", "data-[state=open]:opacity-100", "md:opacity-0");
+      el.classList.add("group-focus-within/menu-item:opacity-100", "group-hover/menu-item:opacity-100", "data-[state=open]:opacity-100", "md:opacity-0");
     }
     if (el.tagName !== "BUTTON") {
       el.setAttribute("role", "button");
@@ -7541,30 +7692,11 @@ function sidebar_default(Alpine) {
     }
     el.setAttribute("data-slot", "sidebar-menu-action");
   });
-  Alpine.directive("h-sidebar-menu-badge", (el) => {
-    el.classList.add(
-      "text-sidebar-foreground",
-      "pointer-events-none",
-      "absolute",
-      "right-1.5",
-      "flex",
-      "h-5",
-      "min-w-5",
-      "items-center",
-      "justify-center",
-      "rounded-md",
-      "px-1",
-      "text-xs",
-      "font-medium",
-      "tabular-nums",
-      "select-none",
-      "peer-hover/menu-button:text-sidebar-secondary-foreground",
-      "peer-data-[active=true]/menu-button:text-sidebar-primary-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsed=true]/sidebar:hidden"
-    );
+  Alpine.directive("h-sidebar-menu-badge", (el, { original }) => {
+    if (el.tagName !== "SPAN") {
+      throw new Error(`${original} must be a span element`);
+    }
+    el.classList.add("flex-1", "pointer-events-none", "flex", "h-full", "min-w-min", "items-center", "justify-end", "text-xs", "font-medium", "tabular-nums", "select-none", "group-data-[collapsed=true]/sidebar:hidden");
     el.setAttribute("data-slot", "sidebar-menu-badge");
   });
   Alpine.directive("h-sidebar-menu-skeleton", (el, { modifiers }) => {
@@ -7585,68 +7717,27 @@ function sidebar_default(Alpine) {
     el.setAttribute("data-slot", "sidebar-separator");
     el.setAttribute("role", "none");
   });
-  Alpine.directive("h-sidebar-menu-sub", (el, { modifiers }) => {
-    el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "py-0.5", "group-data-[collapsed=true]/sidebar:!hidden");
-    if (!modifiers.includes("flat")) {
-      el.classList.add("border-sidebar-border", "mx-3.5", "border-l", "px-2.5");
+  Alpine.directive("h-sidebar-menu-sub", (el, { original }, { effect, Alpine: Alpine2 }) => {
+    if (el.tagName !== "UL") {
+      throw new Error(`${original} must be an ul element`);
     }
-    el.setAttribute("data-slot", "sidebar-menu-sub");
-  });
-  Alpine.directive("h-sidebar-menu-sub-item", (el) => {
-    el.classList.add("group/menu-sub-item", "relative");
-    el.setAttribute("data-slot", "sidebar-menu-sub-item");
-  });
-  Alpine.directive("h-sidebar-menu-sub-button", (el) => {
-    if (el.tagName !== "BUTTON") {
-      throw new Error(`${original} must be a button`);
+    const menuItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_menu_item"));
+    if (!menuItem) {
+      throw new Error(`${original} must be placed inside a sidebar menu item`);
     }
-    el.classList.add(
-      "text-sidebar-foreground",
-      "ring-sidebar-ring",
-      "hover:bg-sidebar-secondary",
-      "hover:text-sidebar-secondary-foreground",
-      "active:bg-primary-secondary",
-      "active:text-sidebar-primary-foreground",
-      "[&>svg]:text-sidebar-secondary-foreground",
-      "flex",
-      "h-7",
-      "w-full",
-      "min-w-0",
-      "-translate-x-px",
-      "items-center",
-      "gap-2",
-      "overflow-hidden",
-      "rounded-md",
-      "px-2",
-      "align-middle",
-      "outline-hidden",
-      "focus-visible:ring-2",
-      "disabled:pointer-events-none",
-      "disabled:opacity-50",
-      "aria-disabled:pointer-events-none",
-      "aria-disabled:opacity-50",
-      "[&>span]:truncate",
-      "[&>span]:align-middle",
-      "[&>svg]:size-4",
-      "[&>svg]:shrink-0",
-      "[&>svg:not(:first-child):last-child]:ml-auto",
-      "data-[active=true]:bg-sidebar-primary",
-      "data-[active=true]:text-sidebar-primary-foreground",
-      "group-data-[collapsed=true]/sidebar:hidden"
-    );
-    el.setAttribute("type", "button");
-    el.setAttribute("data-slot", "sidebar-menu-sub-button");
-    const sizes = {
-      sm: ["text-xs"],
-      md: ["text-sm"]
-    };
-    function setSize2(size3) {
-      if (sizes.hasOwnProperty(size3)) {
-        el.classList.add(...sizes[size3]);
-      }
+    el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "pl-2.5", "py-0.5", "ml-3.5", "data-[collapsed=true]:!hidden", "group-data-[collapsed=true]/sidebar:!hidden");
+    if (el.getAttribute("data-line") !== "false") {
+      el.classList.add("border-sidebar-border", "border-l");
+    }
+    el.setAttribute("data-slot", "sidebar-menu-sub");
+    if (menuItem._h_sidebar_menu_item.collapsable) {
+      el.setAttribute("id", menuItem._h_sidebar_menu_item.controls);
+      el.setAttribute("aria-labelledby", menuItem._h_sidebar_menu_item.controlId);
+      el.setAttribute("data-collapsed", menuItem._h_sidebar_menu_item.state.collapsed);
+      effect(() => {
+        el.setAttribute("data-collapsed", menuItem._h_sidebar_menu_item.state.collapsed);
+      });
     }
-    if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "md");
-    setSize2(el.getAttribute("data-size"));
   });
   Alpine.directive("h-sidebar-footer", (el) => {
     el.classList.add("vbox", "gap-2", "px-2", "h-12", "justify-center", "border-t");
@@ -7897,10 +7988,10 @@ function split_default(Alpine) {
       observer.disconnect();
     });
   });
-  Alpine.directive("h-split-panel", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-split-panel", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     const split = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_split"));
     if (!split) {
-      throw new Error(`${original2} must be inside an split element`);
+      throw new Error(`${original} must be inside an split element`);
     }
     el.classList.add("flex", "shrink", "grow-0", "box-border", "min-w-0", "min-h-0", "overflow-visible");
     el.setAttribute("tabindex", "-1");
@@ -8420,7 +8511,7 @@ function tabs_default(Alpine) {
     el.setAttribute("role", "tablist");
     el.setAttribute("data-slot", "tab-list");
   });
-  Alpine.directive("h-tab", (el, { original: original2 }) => {
+  Alpine.directive("h-tab", (el, { original }) => {
     el.classList.add(
       "cursor-pointer",
       "focus-visible:border-ring",
@@ -8467,8 +8558,8 @@ function tabs_default(Alpine) {
     );
     el.setAttribute("role", "tab");
     el.setAttribute("data-slot", "tab");
-    if (!el.hasAttribute("id")) throw new Error(`${original2}: Tabs must have an id`);
-    if (!el.hasAttribute("aria-controls")) throw new Error(`${original2}: aria-controls must be set to the tab-content id.`);
+    if (!el.hasAttribute("id")) throw new Error(`${original}: Tabs must have an id`);
+    if (!el.hasAttribute("aria-controls")) throw new Error(`${original}: aria-controls must be set to the tab-content id.`);
   });
   Alpine.directive("h-tab-action", (el) => {
     el.classList.add("cursor-pointer", "ml-auto", "rounded-md", "text-foreground", "hover:bg-secondary", "hover:text-secondary-foreground", "active:bg-secondary-active");
@@ -8502,13 +8593,13 @@ function tabs_default(Alpine) {
     el.setAttribute("role", "button");
     el.setAttribute("data-slot", "tab-list-action");
   });
-  Alpine.directive("h-tabs-content", (el, { original: original2 }) => {
+  Alpine.directive("h-tabs-content", (el, { original }) => {
     el.classList.add("flex-1", "outline-none");
     el.setAttribute("role", "tabpanel");
     el.setAttribute("tabindex", "0");
     el.setAttribute("data-slot", "tabs-content");
-    if (!el.hasAttribute("id")) throw new Error(`${original2}: Tab content must have an id`);
-    if (!el.hasAttribute("aria-labelledby")) throw new Error(`${original2}: aria-labelledby must be set to the tab id.`);
+    if (!el.hasAttribute("id")) throw new Error(`${original}: Tab content must have an id`);
+    if (!el.hasAttribute("aria-labelledby")) throw new Error(`${original}: aria-labelledby must be set to the tab id.`);
   });
 }
 
@@ -8901,13 +8992,13 @@ function timepicker_default(Alpine) {
       top.removeEventListener("click", el._h_timepicker.close);
     });
   });
-  Alpine.directive("h-time-picker-input", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
+  Alpine.directive("h-time-picker-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "INPUT") {
-      throw new Error(`${original2} must be a readonly input of type "text"`);
+      throw new Error(`${original} must be a readonly input of type "text"`);
     }
     const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
     if (!timepicker) {
-      throw new Error(`${original2} must be inside a time-picker element`);
+      throw new Error(`${original} must be inside a time-picker element`);
     }
     timepicker._h_timepicker.focusInput = () => {
       el.focus();
@@ -9224,7 +9315,7 @@ function timepicker_default(Alpine) {
     timeContainer.addEventListener("click", setTime);
     el.appendChild(timeContainer);
     const hoursList = document.createElement("ul");
-    hoursList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
+    hoursList.classList.add("flex-1", "overflow-y-auto", "[scrollbar-width:thin]");
     hoursList.setAttribute("role", "listbox");
     hoursList.setAttribute("tabindex", "-1");
     hoursList.setAttribute("aria-label", el.dataset.labelHours ?? "Select hour");
@@ -9241,7 +9332,7 @@ function timepicker_default(Alpine) {
       hoursList.appendChild(hour);
     }
     const minutesList = document.createElement("ul");
-    minutesList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
+    minutesList.classList.add("flex-1", "overflow-y-auto", "[scrollbar-width:thin]");
     minutesList.setAttribute("role", "listbox");
     minutesList.setAttribute("tabindex", "-1");
     minutesList.setAttribute("aria-label", el.dataset.labelMinutes ?? "Select minute");
@@ -9258,7 +9349,7 @@ function timepicker_default(Alpine) {
       minutesList.appendChild(minute);
     }
     const secondsList = document.createElement("ul");
-    secondsList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
+    secondsList.classList.add("flex-1", "overflow-y-auto", "[scrollbar-width:thin]");
     if (!timepicker._h_timepicker.seconds) {
       secondsList.classList.add("hidden");
     }
@@ -9278,7 +9369,7 @@ function timepicker_default(Alpine) {
       secondsList.appendChild(second);
     }
     const periodList = document.createElement("ul");
-    periodList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
+    periodList.classList.add("flex-1", "overflow-y-auto", "[scrollbar-width:thin]");
     if (!timepicker._h_timepicker.is12Hour) {
       periodList.classList.add("hidden");
     }
@@ -9556,7 +9647,7 @@ function tooltip_default(Alpine) {
       el.removeEventListener("pointerleave", handler);
     });
   });
-  Alpine.directive("h-tooltip", (el, { original: original2 }, { effect }) => {
+  Alpine.directive("h-tooltip", (el, { original }, { effect }) => {
     const tooltip = (() => {
       let sibling = el.previousElementSibling;
       while (sibling && !sibling.hasOwnProperty("_tooltip")) {
@@ -9565,7 +9656,7 @@ function tooltip_default(Alpine) {
       return sibling;
     })();
     if (!tooltip) {
-      throw new Error(`${original2} must be placed after a tooltip trigger element`);
+      throw new Error(`${original} must be placed after a tooltip trigger element`);
     }
     el.classList.add("absolute", "bg-foreground", "text-background", "z-50", "w-fit", "rounded-md", "px-3", "py-1.5", "text-xs", "text-balance");
     el.setAttribute("data-slot", "tooltip");
@@ -9771,9 +9862,9 @@ function tree_default(Alpine) {
       });
     }
   });
-  Alpine.directive("h-tree-button", (el, { original: original2 }, { effect }) => {
+  Alpine.directive("h-tree-button", (el, { original }, { effect }) => {
     const treeItem = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_tree_item"));
-    if (!treeItem) throw new Error(`${original2} must be inside a tree item`);
+    if (!treeItem) throw new Error(`${original} must be inside a tree item`);
     el.classList.add(
       "flex",
       "w-full",
@@ -9836,7 +9927,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.2.1";
+var version = "1.4.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768) {
@@ -9943,7 +10034,7 @@ function focus_default(Alpine) {
 
 // src/utils/template.js
 function template_default(Alpine) {
-  Alpine.directive("h-template", (el, { original: original2, expression }, { evaluate: evaluate2, Alpine: Alpine2, cleanup }) => {
+  Alpine.directive("h-template", (el, { original, expression }, { evaluate: evaluate2, Alpine: Alpine2, cleanup }) => {
     if (el.hasAttribute(Alpine2.prefixed("data"))) {
       const template = evaluate2(expression);
       const clone = template.content.cloneNode(true).firstElementChild;
@@ -9957,7 +10048,7 @@ function template_default(Alpine) {
         clone.remove();
       });
     } else {
-      console.error(`${original2}: ${Alpine2.prefixed("data")} directive is missing`);
+      console.error(`${original}: ${Alpine2.prefixed("data")} directive is missing`);
     }
   });
 }