@codbex/harmonia 0.7.0 → 0.9.0

package/dist/harmonia.js

@@ -143,10 +143,10 @@
       }) : { single: false };
       el.setAttribute("data-slot", "accordion");
     });
-    Alpine.directive("h-accordion-item", (el, { 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("h-accordion-item must be inside an h-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");
@@ -174,14 +174,14 @@
       setAttributes();
       effect(setAttributes);
     });
-    Alpine.directive("h-accordion-trigger", (el, { 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("h-accordion-trigger 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("h-accordion-trigger must be inside an h-accordion-item, which must be inside an h-accordion");
+        throw new Error(`${original} must have an accordion and accordion item parent elements`);
       }
       el.classList.add(
         "flex",
@@ -222,7 +222,7 @@
         "transition-all",
         "outline-none",
         "hover:underline",
-        "focus-visible:ring-[3px]",
+        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "disabled:pointer-events-none",
         "disabled:opacity-50",
         "[&[data-state=open]>svg]:rotate-180"
@@ -240,7 +240,7 @@
         button.setAttribute("data-state", accordionItem._h_accordionItem.expanded ? "open" : "closed");
         button.setAttribute("aria-expanded", accordionItem._h_accordionItem.expanded);
       };
-      const handler2 = () => {
+      const handler = () => {
         accordionItem._h_accordionItem.expanded = !accordionItem._h_accordionItem.expanded;
         setAttributes();
         if (accordion._h_accordion.single) {
@@ -248,9 +248,9 @@
         }
       };
       setAttributes();
-      el.addEventListener("click", handler2);
+      el.addEventListener("click", handler);
       cleanup(() => {
-        el.removeEventListener("click", handler2);
+        el.removeEventListener("click", handler);
       });
       if (accordion._h_accordion.single) {
         effect(() => {
@@ -261,7 +261,7 @@
         });
       }
     });
-    Alpine.directive("h-accordion-content", (el, {}, { effect, Alpine: Alpine2 }) => {
+    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("_h_accordionItem"));
@@ -314,10 +314,8 @@
         if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach(() => {
-          setVariant(el.getAttribute("data-variant") ?? "default");
-        });
+      const observer = new MutationObserver(() => {
+        setVariant(el.getAttribute("data-variant") ?? "default");
       });
       observer.observe(el, { attributes: true, attributeFilter: ["data-variant"] });
       cleanup(() => {
@@ -340,7 +338,7 @@
 
   // src/components/avatar.js
   function avatar_default(Alpine) {
-    Alpine.directive("h-avatar", (el, {}, { Alpine: Alpine2 }) => {
+    Alpine.directive("h-avatar", (el, _, { Alpine: Alpine2 }) => {
       el.classList.add(
         "relative",
         "bg-secondary",
@@ -367,10 +365,10 @@
         el.classList.add("cursor-pointer", "hover:bg-secondary-hover", "active:bg-secondary-active");
       }
     });
-    Alpine.directive("h-avatar-image", (el, {}, { 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("h-avatar-image must be inside an h-avatar element");
+        throw new Error(`${original} must be inside an h-avatar element`);
       }
       el.classList.add("aspect-square", "size-full");
       el.setAttribute("data-slot", "avatar-image");
@@ -392,10 +390,8 @@
       } else {
         interval = setInterval(completeCheck, 10);
       }
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach(() => {
-          interval = setInterval(completeCheck, 10);
-        });
+      const observer = new MutationObserver(() => {
+        interval = setInterval(completeCheck, 10);
       });
       observer.observe(el, { attributes: true, attributeFilter: ["src"] });
       cleanup(() => {
@@ -403,10 +399,10 @@
         observer.disconnect();
       });
     });
-    Alpine.directive("h-avatar-fallback", (el, {}, { 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("h-avatar-fallback must be inside an h-avatar element");
+        throw new Error(`${original} 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");
@@ -419,7 +415,7 @@
 
   // src/components/badge.js
   function badge_default(Alpine) {
-    Alpine.directive("h-badge", (el, {}, { cleanup }) => {
+    Alpine.directive("h-badge", (el, _, { cleanup }) => {
       el.classList.add(
         "[a&]:cursor-pointer",
         "inline-flex",
@@ -439,7 +435,7 @@
         "[&>svg]:pointer-events-none",
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
-        "focus-visible:ring-[3px]",
+        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "transition-[color,box-shadow]",
         "overflow-hidden"
       );
@@ -454,16 +450,14 @@
         outline: ["bg-transparent", "text-foreground", "[a&]:hover:bg-secondary", "[a&]:hover:text-secondary-foreground", "[a&]:active:bg-secondary-active"]
       };
       function setVariant(variant) {
-        for (const [_, value] of Object.entries(variants)) {
+        for (const [_2, value] of Object.entries(variants)) {
           el.classList.remove(...value);
         }
         if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach(() => {
-          setVariant(el.getAttribute("data-variant") ?? "default");
-        });
+      const observer = new MutationObserver(() => {
+        setVariant(el.getAttribute("data-variant") ?? "default");
       });
       observer.observe(el, { attributes: true, attributeFilter: ["data-variant"] });
       cleanup(() => {
@@ -489,6 +483,7 @@
       "bg-primary",
       "text-primary-foreground",
       "shadow-button",
+      "focus-visible:outline-primary/50",
       "hover:bg-primary-hover",
       "active:bg-primary-active",
       "aria-pressed:bg-primary-active",
@@ -500,6 +495,7 @@
       "bg-positive",
       "text-positive-foreground",
       "shadow-button",
+      "focus-visible:outline-positive/50",
       "hover:bg-positive-hover",
       "active:bg-positive-active",
       "aria-pressed:bg-positive-active",
@@ -511,6 +507,7 @@
       "bg-negative",
       "text-negative-foreground",
       "shadow-button",
+      "focus-visible:outline-negative/50",
       "hover:bg-negative-hover",
       "active:bg-negative-active",
       "aria-pressed:bg-negative-active",
@@ -522,6 +519,7 @@
       "bg-warning",
       "text-warning-foreground",
       "shadow-button",
+      "focus-visible:outline-warning/50",
       "hover:bg-warning-hover",
       "active:bg-warning-active",
       "aria-pressed:bg-warning-active",
@@ -529,6 +527,18 @@
       "hover:data-[toggled=true]:bg-warning-hover",
       "data-[toggled=true]:bg-warning-active"
     ],
+    information: [
+      "bg-information",
+      "text-information-foreground",
+      "shadow-button",
+      "focus-visible:outline-information/50",
+      "hover:bg-information-hover",
+      "active:bg-information-active",
+      "aria-pressed:bg-information-active",
+      "active:data-[toggled=true]:bg-information-active",
+      "hover:data-[toggled=true]:bg-information-hover",
+      "data-[toggled=true]:bg-information-active"
+    ],
     outline: [
       "border",
       "bg-background",
@@ -573,10 +583,9 @@
       "[&_svg:not([class*='size-'])]:size-4",
       "shrink-0",
       "[&_svg]:shrink-0",
-      "outline-none",
-      "focus-visible:border-ring",
-      "focus-visible:ring-ring/50",
-      "focus-visible:ring-[3px]",
+      "outline-ring/50",
+      "focus-visible:outline-[calc(var(--spacing)*0.75)]",
+      "focus-visible:outline",
       "aria-invalid:ring-negative/20",
       "dark:aria-invalid:ring-negative/40",
       "aria-invalid:border-negative",
@@ -606,7 +615,7 @@
     }
   };
   function button_default(Alpine) {
-    Alpine.directive("h-button", (el, { modifiers }, { cleanup }) => {
+    Alpine.directive("h-button", (el, { original, modifiers }, { cleanup }) => {
       setButtonClasses(el);
       if (!el.hasAttribute("data-slot")) {
         el.setAttribute("data-slot", "button");
@@ -623,7 +632,7 @@
         el.classList.remove(...getButtonSize(lastSize, inGroup));
         el.classList.add(...getButtonSize(size3, inGroup));
         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);
+          console.error(`${original}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
         }
         lastSize = size3;
       }
@@ -2167,7 +2176,7 @@
 
   // src/components/calendar.js
   function calendar_default(Alpine) {
-    Alpine.directive("h-calendar", (el, { 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");
@@ -2211,7 +2220,7 @@
       const onInputChange = () => {
         const newValue = new Date(datepicker._h_datepicker.input.value);
         if (isNaN(newValue)) {
-          console.error(`h-calendar: 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()) {
@@ -2228,7 +2237,7 @@
         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()}`);
+            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) {
@@ -2283,7 +2292,7 @@
         "outline-none",
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
-        "focus-visible:ring-[3px]",
+        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "bg-transparent",
         "text-foreground",
         "hover:bg-secondary",
@@ -2510,35 +2519,49 @@
         if (!focusedDay) focusedDay = selected || new Date(date.getFullYear(), date.getMonth(), 1);
         let newDay = new Date(focusedDay);
         switch (event.key) {
+          case "Left":
           case "ArrowLeft":
+            event.preventDefault();
             newDay.setDate(newDay.getDate() - 1);
             break;
+          case "Right":
           case "ArrowRight":
+            event.preventDefault();
             newDay.setDate(newDay.getDate() + 1);
             break;
+          case "Up":
           case "ArrowUp":
+            event.preventDefault();
             newDay.setDate(newDay.getDate() - 7);
             break;
+          case "Down":
           case "ArrowDown":
+            event.preventDefault();
             newDay.setDate(newDay.getDate() + 7);
             break;
           case "Home":
+            event.preventDefault();
             newDay.setDate(1);
             break;
           case "End":
+            event.preventDefault();
             newDay.setDate(end.getDate());
             break;
           case "PageUp":
+            event.preventDefault();
             newDay.setMonth(newDay.getMonth() - 1);
             break;
           case "PageDown":
+            event.preventDefault();
             newDay.setMonth(newDay.getMonth() + 1);
             break;
           case "Escape":
+            event.preventDefault();
             if (datepicker) datepicker._h_datepicker.expanded = false;
             return;
           case "Enter":
           case " ":
+            event.preventDefault();
             if (!isDisabled(focusedDay)) {
               selected = new Date(focusedDay);
               modelChange();
@@ -2668,11 +2691,11 @@
         "[&>input]:border-0",
         "[&>input]:cursor-pointer",
         "[&>input]:focus-visible:border-ring",
-        "[&>input]:focus-visible:ring-[3px]",
+        "[&>input]:focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "[&>input]:focus-visible:ring-ring/50",
         "[&>input]:left-0",
         "[&>input]:outline-none",
-        "[&>input]:rounded-[0.25rem]",
+        "[&>input]:rounded-[0.438rem]",
         "[&>input]:size-full",
         "[&>input]:top-0",
         "aspect-square",
@@ -2704,7 +2727,7 @@
         "has-[input:invalid]:border-negative",
         "has-[input:invalid]:ring-negative/20",
         "relative",
-        "rounded-[0.25rem]",
+        "rounded-[0.438rem]",
         "shadow-input",
         "shrink-0",
         "size-5",
@@ -2731,10 +2754,10 @@
         });
       }
     });
-    Alpine.directive("h-collapsible-trigger", (el, { 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("h-collapsible-trigger must be inside an h-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")) {
@@ -2742,21 +2765,21 @@
         if (modifiers.includes("90")) el.classList.add("[&[data-state=open]>svg:not(:first-child):last-child]:rotate-90", "[&[data-state=open]>svg:only-child]:rotate-90");
         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 = () => {
+      const handler = () => {
         collapsible._h_collapsible.expanded = !collapsible._h_collapsible.expanded;
       };
       effect(() => {
         el.setAttribute("data-state", collapsible._h_collapsible.expanded ? "open" : "closed");
       });
-      el.addEventListener("click", handler2);
+      el.addEventListener("click", handler);
       cleanup(() => {
-        el.removeEventListener("click", handler2);
+        el.removeEventListener("click", handler);
       });
     });
-    Alpine.directive("h-collapsible-content", (el, {}, { 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("h-collapsible-content 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");
@@ -2768,7 +2791,7 @@
 
   // src/components/datepicker.js
   function datepicker_default(Alpine) {
-    Alpine.directive("h-date-picker", (el, {}, { Alpine: Alpine2 }) => {
+    Alpine.directive("h-date-picker", (el, { original }, { Alpine: Alpine2 }) => {
       el._h_datepicker = Alpine2.reactive({
         id: void 0,
         controls: `hdpc${v4_default()}`,
@@ -2777,7 +2800,7 @@
       });
       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");
+        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 {
@@ -2804,7 +2827,7 @@
         "min-w-0",
         "has-[input:focus-visible]:border-ring",
         "has-[input:focus-visible]:ring-ring/50",
-        "has-[input:focus-visible]:ring-[3px]",
+        "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
         "has-[input[aria-invalid=true]]:ring-negative/20",
         "has-[input[aria-invalid=true]]:border-negative",
         "dark:has-[input[aria-invalid=true]]:ring-negative/40",
@@ -2817,16 +2840,16 @@
       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 }) => {
+    Alpine.directive("h-date-picker-trigger", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "BUTTON") {
-        throw new Error("h-date-picker-trigger must be a button");
+        throw new Error(`${original} must be a button`);
       }
       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');
+        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("h-date-picker-trigger must be inside an h-date-picker element");
+        throw new Error(`${original} must be inside an date-picker element`);
       }
       el.setAttribute("aria-controls", datepicker._h_datepicker.controls);
       el.setAttribute("aria-expanded", "false");
@@ -2849,7 +2872,7 @@
       const close = () => {
         datepicker._h_datepicker.expanded = false;
       };
-      const handler2 = () => {
+      const handler = () => {
         datepicker._h_datepicker.expanded = !datepicker._h_datepicker.expanded;
         el.setAttribute("aria-expanded", datepicker._h_datepicker.expanded);
         Alpine2.nextTick(() => {
@@ -2860,9 +2883,9 @@
           }
         });
       };
-      el.addEventListener("click", handler2);
+      el.addEventListener("click", handler);
       cleanup(() => {
-        el.removeEventListener("click", handler2);
+        el.removeEventListener("click", handler);
         top.removeEventListener("click", close);
       });
     }).before("h-button");
@@ -2870,42 +2893,40 @@
 
   // src/components/dialog.js
   function dialog_default(Alpine) {
-    Alpine.directive("h-dialog-overlay", (el, {}, { cleanup }) => {
+    Alpine.directive("h-dialog-overlay", (el, _, { cleanup }) => {
       el.classList.add("hidden", "data-[open=true]:block", "fixed", "inset-0", "z-50", "bg-black/60");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "dialog-overlay");
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach(() => {
-          if (el.getAttribute("data-open") === "true") {
-            const inputs = el.getElementsByTagName("INPUT");
-            if (inputs.length) {
-              for (let i = 0; i < inputs.length; i++) {
-                if (inputs[i].autofocus) {
-                  inputs[i].focus();
+      const observer = new MutationObserver(() => {
+        if (el.getAttribute("data-open") === "true") {
+          const inputs = el.getElementsByTagName("INPUT");
+          if (inputs.length) {
+            for (let i = 0; i < inputs.length; i++) {
+              if (inputs[i].autofocus) {
+                inputs[i].focus();
+                return;
+              }
+            }
+            inputs[0].focus();
+            return;
+          } else {
+            const textareas = el.getElementsByTagName("TEXTAREA");
+            if (textareas.length) {
+              for (let i = 0; i < textareas.length; i++) {
+                if (textareas[i].autofocus) {
+                  textareas[i].focus();
                   return;
                 }
               }
-              inputs[0].focus();
+              textareas[0].focus();
               return;
-            } else {
-              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();
             }
           }
-        });
+          const buttons = el.getElementsByTagName("BUTTON");
+          if (buttons.length) {
+            buttons[0].focus();
+          }
+        }
       });
       observer.observe(el, { attributes: true, attributeFilter: ["data-open"] });
       cleanup(() => {
@@ -2941,7 +2962,7 @@
       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: Alpine2 }) => {
+    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");
@@ -2971,7 +2992,7 @@
       );
       el.setAttribute("data-slot", "dialog-close");
     });
-    Alpine.directive("h-dialog-description", (el, {}, { Alpine: Alpine2 }) => {
+    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");
@@ -3060,13 +3081,13 @@
 
   // src/components/icon.js
   function icon_default(Alpine) {
-    Alpine.directive("h-icon", (el) => {
+    Alpine.directive("h-icon", (el, { original }) => {
       if (el.tagName.toLowerCase() !== "svg") {
-        throw new Error("h-icon works only on svg elements");
+        throw new Error(`${original} works only on svg elements`);
       } else if (!el.hasAttribute("role")) {
-        throw new Error("h-icon 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('h-icon: 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");
@@ -3155,7 +3176,7 @@
         "md:text-sm",
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
-        "focus-visible:ring-[3px]",
+        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "aria-invalid:ring-negative/20",
         "dark:aria-invalid:ring-negative/40",
         "aria-invalid:border-negative",
@@ -3164,7 +3185,7 @@
         "invalid:!border-negative"
       );
       if (modifiers.includes("group")) {
-        el.classList.remove("rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[3px]");
+        el.classList.remove("rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[calc(var(--spacing)*0.75)]");
         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");
@@ -3199,7 +3220,7 @@
         "has-[>[data-align=block-end]]:[&>input]:pt-3",
         "has-[[data-slot=input-group-control]:focus-visible]:border-ring",
         "has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
-        "has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
         "has-[[data-slot][aria-invalid=true]]:ring-negative/20",
         "has-[[data-slot][aria-invalid=true]]:border-negative",
         "dark:has-[[data-slot][aria-invalid=true]]:ring-negative/40"
@@ -3207,7 +3228,7 @@
       el.setAttribute("role", "group");
       el.setAttribute("data-slot", "input-group");
     });
-    Alpine.directive("h-input-group-addon", (el, {}, { cleanup }) => {
+    Alpine.directive("h-input-group-addon", (el, _, { cleanup }) => {
       el.classList.add(
         "text-muted-foreground",
         "flex",
@@ -3237,7 +3258,7 @@
         if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
       }
       setVariant(el.getAttribute("data-align") ?? "inline-start");
-      const handler2 = (event) => {
+      const handler = (event) => {
         if (event.target.closest("button")) {
           return;
         }
@@ -3245,9 +3266,9 @@
         if (!input) input = event.currentTarget.parentElement?.querySelector("textarea");
         input?.focus();
       };
-      el.addEventListener("click", handler2);
+      el.addEventListener("click", handler);
       cleanup(() => {
-        el.removeEventListener("click", handler2);
+        el.removeEventListener("click", handler);
       });
     });
     Alpine.directive("h-input-group-text", (el) => {
@@ -3294,7 +3315,7 @@
 
   // src/components/list.js
   function list_default(Alpine) {
-    Alpine.directive("h-listbox", (el, {}, { cleanup }) => {
+    Alpine.directive("h-listbox", (el, _, { cleanup }) => {
       el.classList.add(
         "divide-solid",
         "divide-y",
@@ -3309,7 +3330,7 @@
         "disabled:opacity-50",
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
-        "focus-visible:ring-[3px]",
+        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "aria-invalid:ring-negative/20",
         "dark:aria-invalid:ring-negative/40",
         "aria-invalid:border-negative",
@@ -3348,6 +3369,7 @@
           case "End":
             focusLastOption(el);
             break;
+          case "Up":
           case "ArrowUp":
             let prevElem = event.target.previousElementSibling;
             if (prevElem && prevElem.getAttribute("data-slot") !== "list-header") {
@@ -3359,6 +3381,7 @@
               }
             }
             break;
+          case "Down":
           case "ArrowDown":
             let nextElem = event.target.nextElementSibling;
             if (nextElem) {
@@ -3378,14 +3401,14 @@
             break;
         }
       }
-      function onClick(event) {
+      function onClick2(event) {
         if (event.target.getAttribute("data-slot") === "list-item") selectOption(event.target);
       }
-      el.addEventListener("click", onClick);
+      el.addEventListener("click", onClick2);
       el.addEventListener("keydown", onKeyDown);
       cleanup(() => {
         el.removeEventListener("keydown", onKeyDown);
-        el.removeEventListener("click", onClick);
+        el.removeEventListener("click", onClick2);
       });
     });
     Alpine.directive("h-list", (el) => {
@@ -3393,13 +3416,13 @@
       el.setAttribute("data-slot", "list");
       el.setAttribute("role", "group");
     });
-    Alpine.directive("h-list-header", (el, {}, { 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("h-list-header: must be placed inside an h-list element");
+        throw new Error(`${original} must be placed inside a list element`);
       }
       if (!el.hasAttribute("id")) {
         const id = `lbh${v4_default()}`;
@@ -3447,14 +3470,14 @@
         isDropdown: modifiers.includes("dropdown")
       };
     });
-    Alpine.directive("h-menu", (el, { modifiers }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu", (el, { original, modifiers }, { cleanup, Alpine: Alpine2 }) => {
       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");
       el.setAttribute("aria-orientation", "vertical");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "menu");
       if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-        throw new Error('h-menu: 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 = (() => {
@@ -3466,7 +3489,7 @@
         return sibling;
       })();
       if (!isSubmenu && !menuTrigger) {
-        throw new Error("h-menu: menu must be placed after an h-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");
@@ -3479,22 +3502,23 @@
           else menuTrigger.removeEventListener("contextmenu", onContextmenu);
         }
       }
-      function close(parent = false) {
+      function close(closeParent = false, focusTrigger = false) {
         el.pauseKeyEvents = false;
         el.classList.add("hidden");
         Object.assign(el.style, {
           left: "0px",
           top: "0px"
         });
-        top.removeEventListener("contextmenu", onClick);
-        top.removeEventListener("click", onClick);
-        el.removeEventListener("keydown", onKeydown);
+        top.removeEventListener("contextmenu", onClick2);
+        top.removeEventListener("click", onClick2);
+        el.removeEventListener("keydown", onKeyDown);
         if (isSubmenu) {
-          if (parent) {
+          if (closeParent) {
             menuSubItem._menu_sub.closeTree();
           }
         } else {
           listenForTrigger(true);
+          if (focusTrigger) menuTrigger.focus();
         }
       }
       el._menu = { close };
@@ -3515,12 +3539,12 @@
         }
         return false;
       }
-      function onClick(event) {
+      function onClick2(event) {
         if (event.type === "contextmenu") event.preventDefault();
         close(isSubmenu);
       }
       el.pauseKeyEvents = false;
-      function onKeydown(event) {
+      function onKeyDown(event) {
         if (!el.pauseKeyEvents) {
           let menuitem;
           switch (event.key) {
@@ -3536,7 +3560,7 @@
               if (isSubmenu) {
                 Alpine2.nextTick(() => menuSubItem.focus());
               }
-              close();
+              close(void 0, true);
               break;
             case "Tab":
             case " ":
@@ -3633,9 +3657,9 @@
               listenForTrigger(false);
             }
             Alpine2.nextTick(() => {
-              top.addEventListener("contextmenu", onClick);
-              top.addEventListener("click", onClick);
-              el.addEventListener("keydown", onKeydown);
+              top.addEventListener("contextmenu", onClick2);
+              top.addEventListener("click", onClick2);
+              el.addEventListener("keydown", onKeyDown);
             });
             Object.assign(el.style, {
               left: `${x}px`,
@@ -3673,12 +3697,12 @@
       }
       cleanup(() => {
         listenForTrigger(false);
-        top.removeEventListener("click", onClick);
-        top.removeEventListener("contextmenu", onClick);
-        el.removeEventListener("keydown", onKeydown);
+        top.removeEventListener("click", onClick2);
+        top.removeEventListener("contextmenu", onClick2);
+        el.removeEventListener("keydown", onKeyDown);
       });
     });
-    Alpine.directive("h-menu-item", (el, {}, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-item", (el, _, { cleanup, Alpine: Alpine2 }) => {
       el.classList.add(
         "focus:bg-secondary-hover",
         "focus:text-secondary-foreground",
@@ -3731,7 +3755,7 @@
         el.removeEventListener("mouseleave", focusOut);
       });
     });
-    Alpine.directive("h-menu-sub", (el, {}, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-sub", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
       el.classList.add(
         "focus:bg-secondary-hover",
         "hover:bg-secondary-hover",
@@ -3756,12 +3780,13 @@
         "[&_svg:not([class*='size-'])]:size-4",
         "after:block",
         "after:bg-transparent",
-        "after:border-t-[0.063rem]",
-        "after:border-r-[0.063rem]",
+        "after:border-t-[calc(var(--spacing)*0.25)]",
+        "after:border-r-[calc(var(--spacing)*0.25)]",
         "after:border-muted-foreground",
         "after:pointer-events-none",
-        "after:size-[0.438rem]",
-        "after:rounded-[0.063rem]",
+        "after:min-w-1.75",
+        "after:size-1.75",
+        "after:rounded-[calc(var(--spacing)*0.25)]",
         "after:rotate-45",
         "after:ml-auto",
         "after:-translate-x-0.75"
@@ -3772,7 +3797,7 @@
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "menu-sub");
       const parentMenu = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "menu");
-      if (!parentMenu) throw new Error("h-menu-sub: Menu sub item must have a parent");
+      if (!parentMenu) throw new Error(`${original} must have a parent`);
       el._menu_sub = {
         open: void 0,
         close: void 0,
@@ -3780,17 +3805,17 @@
         closeTree() {
           el.setAttribute("aria-expanded", "false");
           this.expanded = false;
-          el.removeEventListener("keydown", onKeydown);
+          el.removeEventListener("keydown", onKeyDown);
           parentMenu.pauseKeyEvents = false;
           parentMenu._menu.close(true);
         }
       };
       const keyEvents = ["Right", "ArrowRight", "Enter", " "];
-      function onKeydown(event) {
+      function onKeyDown(event) {
         if (keyEvents.includes(event.key)) {
           event.stopPropagation();
           event.preventDefault();
-          el.removeEventListener("keydown", onKeydown);
+          el.removeEventListener("keydown", onKeyDown);
           const submenuitem = el.querySelector('[role^=menuitem][tabIndex="-1"]:first-of-type');
           if (submenuitem) {
             el.setAttribute("aria-expanded", "true");
@@ -3817,7 +3842,7 @@
           el._menu_sub.expanded = false;
           el.setAttribute("aria-expanded", false);
           parentMenu.pauseKeyEvents = false;
-          el.removeEventListener("keydown", onKeydown);
+          el.removeEventListener("keydown", onKeyDown);
         }
       }
       function focusIn(event) {
@@ -3838,7 +3863,7 @@
             el.setAttribute("aria-expanded", false);
             parentMenu.pauseKeyEvents = false;
           }
-          el.addEventListener("keydown", onKeydown);
+          el.addEventListener("keydown", onKeyDown);
           el.addEventListener("blur", focusOut);
         }
       }
@@ -3866,7 +3891,7 @@
       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, {}, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-checkbox-item", (el, _, { cleanup, Alpine: Alpine2 }) => {
       el.classList.add(
         "focus:bg-secondary-hover",
         "hover:bg-secondary-hover",
@@ -3895,7 +3920,6 @@
         "before:pointer-events-none",
         "before:w-2.5",
         "before:h-1.5",
-        "before:rounded-[0.125rem]",
         "before:-rotate-45",
         "before:-translate-x-0.75",
         "aria-[checked=true]:before:visible"
@@ -3910,13 +3934,13 @@
           });
         el.setAttribute("aria-checked", checked);
       }
+      function onActivate() {
+        el._x_model.set(!el._x_model.get());
+        setState(el._x_model.get());
+      }
       if (el.hasOwnProperty("_x_model")) {
-        let handler2 = function() {
-          el._x_model.set(!el._x_model.get());
-          setState(el._x_model.get());
-        };
         setState(el._x_model.get(), false);
-        el.addEventListener("click", handler2);
+        el.addEventListener("click", onActivate);
       }
       const menu = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "menu");
       function focusOut(event) {
@@ -3932,8 +3956,8 @@
       el.addEventListener("focus", focusIn);
       cleanup(() => {
         if (el.hasOwnProperty("_x_model")) {
-          el.removeEventListener("click", handler);
-          el.removeEventListener("keydown", handler);
+          el.removeEventListener("click", onActivate);
+          el.removeEventListener("keydown", onActivate);
         }
         el.removeEventListener("mouseenter", focusIn);
         el.removeEventListener("focus", focusIn);
@@ -3983,24 +4007,24 @@
         el.setAttribute("aria-checked", checked);
         if (dispatch) el.dispatchEvent(new Event("change", { bubbles: true }));
       }
-      if (el.hasOwnProperty("_x_model")) {
-        let handler2 = function(event) {
-          if (event.type === "keydown") {
-            if (event.key !== " " && event.key !== "Enter") {
-              return;
-            } else if (event.key === " ") {
-              event.preventDefault();
-            }
-          }
-          if (el._x_model.get() !== value) {
-            el._x_model.set(value);
+      function onActivate(event) {
+        if (event.type === "keydown") {
+          if (event.key !== " " && event.key !== "Enter") {
+            return;
+          } else if (event.key === " ") {
+            event.preventDefault();
           }
-        };
+        }
+        if (el._x_model.get() !== value) {
+          el._x_model.set(value);
+        }
+      }
+      if (el.hasOwnProperty("_x_model")) {
         effect(() => {
           setState(el._x_model.get() === value);
         });
-        el.addEventListener("click", handler2);
-        el.addEventListener("keydown", handler2);
+        el.addEventListener("click", onActivate);
+        el.addEventListener("keydown", onActivate);
       }
       const menu = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "menu");
       function focusOut(event) {
@@ -4016,8 +4040,8 @@
       el.addEventListener("focus", focusIn);
       cleanup(() => {
         if (el.hasOwnProperty("_x_model")) {
-          el.removeEventListener("click", handler);
-          el.removeEventListener("keydown", handler);
+          el.removeEventListener("click", onActivate);
+          el.removeEventListener("keydown", onActivate);
         }
         el.removeEventListener("mouseenter", focusIn);
         el.removeEventListener("focus", focusIn);
@@ -4061,7 +4085,7 @@
         "outline-none",
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
-        "focus-visible:ring-[3px]",
+        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "h-9",
         "min-w-9",
         "text-foreground",
@@ -4156,23 +4180,23 @@
       };
       const close = () => {
         el._popover.expanded = false;
-        el.addEventListener("click", handler2);
+        el.addEventListener("click", handler);
       };
-      const handler2 = () => {
+      const handler = () => {
         el._popover.expanded = !el._popover.expanded;
         setAttributes();
         Alpine2.nextTick(() => {
           if (el._popover.auto && el._popover.expanded) {
             top.addEventListener("click", close, { once: true });
-            el.removeEventListener("click", handler2);
+            el.removeEventListener("click", handler);
           }
         });
       };
       setAttributes();
       if (el._popover.auto) {
-        el.addEventListener("click", handler2);
+        el.addEventListener("click", handler);
         cleanup(() => {
-          el.removeEventListener("click", handler2);
+          el.removeEventListener("click", handler);
           top.removeEventListener("click", close);
         });
       } else {
@@ -4181,7 +4205,7 @@
         });
       }
     });
-    Alpine.directive("h-popover", (el, { modifiers }, { effect }) => {
+    Alpine.directive("h-popover", (el, { original, modifiers }, { effect }) => {
       const popover = (() => {
         let sibling = el.previousElementSibling;
         while (sibling && !sibling.hasOwnProperty("_popover")) {
@@ -4190,7 +4214,7 @@
         return sibling;
       })();
       if (!popover) {
-        throw new Error("h-popover-content must be placed after an h-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.setAttribute("data-slot", "popover");
@@ -4276,7 +4300,7 @@
         "[&>input]:border-0",
         "[&>input]:cursor-pointer",
         "[&>input]:focus-visible:border-ring",
-        "[&>input]:focus-visible:ring-[3px]",
+        "[&>input]:focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "[&>input]:focus-visible:ring-ring/50",
         "[&>input]:left-0",
         "[&>input]:outline-none",
@@ -6202,103 +6226,175 @@
     none: 3
   });
   function select_default(Alpine) {
-    Alpine.directive("h-select", (el, {}, { Alpine: Alpine2 }) => {
+    Alpine.directive("h-select", (el, _, { Alpine: Alpine2, cleanup }) => {
       el._h_select = Alpine2.reactive({
         id: void 0,
         controls: `hsc${v4_default()}`,
         expanded: false,
-        model: void 0,
         multiple: false,
         label: [],
+        refreshLabel: void 0,
+        listeners: [],
         search: "",
         focusSearch: void 0,
         filterType: FilterType["starts-with"]
       });
+      el._h_model = {
+        set: void 0,
+        get: void 0
+      };
+      el.classList.add(
+        "cursor-pointer",
+        "border-input",
+        "has-focus-visible:border-ring",
+        "has-focus-visible:ring-[calc(var(--spacing)*0.75)]",
+        "has-focus-visible:ring-ring/50",
+        "dark:has-[aria-invalid=true]:ring-negative/40",
+        "dark:has-[input:invalid]:ring-negative/40",
+        "has-[aria-invalid=true]:border-negative",
+        "has-[aria-invalid=true]:ring-negative/20",
+        "has-[input:invalid]:border-negative",
+        "has-[input:invalid]:ring-negative/20",
+        "hover:bg-secondary-hover",
+        "active:bg-secondary-active",
+        "w-full",
+        "rounded-control",
+        "border",
+        "bg-input-inner",
+        "text-sm",
+        "whitespace-nowrap",
+        "shadow-input",
+        "transition-[color,box-shadow]",
+        "duration-200",
+        "outline-none",
+        "has-[input:disabled]:pointer-events-none",
+        "has-[input:disabled]:opacity-50",
+        "[&_svg]:pointer-events-none",
+        "[&_svg]:shrink-0",
+        "[&_svg]:size-4",
+        "[&_svg]:opacity-50"
+      );
       el.setAttribute("data-slot", "select");
+      const setSize = (size3) => {
+        if (size3 === "sm") {
+          el.classList.add("h-8");
+          el.classList.remove("h-9", "h-6.5");
+        } else if (size3 === "xs") {
+          el.classList.add("h-6.5");
+          el.classList.remove("h-9", "h-8");
+        } else {
+          el.classList.add("h-9");
+          el.classList.remove("h-8", "h-6.5");
+        }
+      };
+      setSize(el.getAttribute("data-size"));
+      const observer = new MutationObserver(() => {
+        setSize(el.getAttribute("data-size"));
+      });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-size"] });
+      cleanup(() => {
+        observer.disconnect();
+      });
     });
-    Alpine.directive("h-select-trigger", (el, {}, { effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-select-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
+      if (el.tagName !== "INPUT") {
+        throw new Error(`${original} must be a readonly input of type "text"`);
+      }
       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");
+        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_select.model = el._x_model.get();
+        select._h_model.set = (value) => {
+          if (select._h_select.multiple) {
+            const vIndex = el._x_model.get().indexOf(value);
+            if (vIndex > -1) {
+              const newArr = el._x_model.get();
+              newArr.splice(vIndex, 1);
+              el._x_model.set(newArr);
+            } else {
+              const arr = el._x_model.get();
+              arr.push(value);
+              el._x_model.set(arr);
+            }
+          } else if (el._x_model.get() !== value) {
+            el._x_model.set(value);
+          } else {
+            el._x_model.set("");
+          }
+        };
+        select._h_model.get = el._x_model.get;
+      } else {
+        select._h_model.set = (value) => {
+          el.value = value;
+          el.dispatchEvent(new Event("change", { bubbles: true }));
+        };
+        select._h_model.get = () => el.value;
       }
-      setButtonClasses(el);
-      const setVariant = (variant) => {
-        if (variant === "secondary") {
-          el.classList.add(...buttonVariants["default"]);
-          return;
-        } else if (variant === "transparent") {
-          el.classList.add(...buttonVariants["transparent"]);
-        } else el.classList.add("shadow-input", ...buttonVariants["outline"]);
-      };
-      const setSize = (size3) => {
-        const sizes = ["sm", "xs", "lg"];
-        if (sizes.includes(size3)) {
-          el.classList.add(...getButtonSize(size3));
-        } else el.classList.add(...getButtonSize());
-      };
-      setVariant(el.getAttribute("data-variant"));
-      setSize(el.getAttribute("data-size"));
-      el.classList.add("w-full", "[&_svg]:opacity-50", "[&[data-state=open]>svg]:rotate-180");
-      el.setAttribute("type", "button");
-      const selectValue = document.createElement("span");
-      selectValue.setAttribute("data-slot", "select-value");
-      selectValue.classList.add("text-left", "truncate", "pointer-events-none", "w-full");
+      el.classList.add("hidden");
+      el.setAttribute("type", "text");
+      const fakeTrigger = document.createElement("span");
+      const displayValue = document.createElement("span");
+      displayValue.classList.add("text-left", "truncate", "w-full");
+      fakeTrigger.appendChild(displayValue);
+      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");
       function getPlaceholder() {
         if (!el.value) {
           const value = el.getAttribute("placeholder");
           if (value) {
-            selectValue.innerText = value;
-            selectValue.classList.add("text-muted-foreground");
+            displayValue.innerText = value;
+            displayValue.classList.add("text-muted-foreground");
           } else {
-            selectValue.classList.remove("text-muted-foreground");
+            displayValue.classList.remove("text-muted-foreground");
           }
         }
       }
       getPlaceholder();
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
-          if (mutation.attributeName === "value") {
-            el.dispatchEvent(new Event("change", { bubbles: true }));
-            if (el.value) selectValue.classList.remove("text-muted-foreground");
+          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();
           }
         });
       });
-      observer.observe(el, { attributes: true, attributeFilter: ["value", "placeholder"] });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-id", "placeholder"] });
       effect(() => {
         if (select._h_select.label.length === 1) {
-          selectValue.innerText = select._h_select.label[0];
+          displayValue.innerText = select._h_select.label[0];
+          displayValue.classList.remove("text-muted-foreground");
         } else if (select._h_select.label.length > 1) {
-          selectValue.innerText = select._h_select.label.join(", ");
+          displayValue.innerText = select._h_select.label.join(", ");
+          displayValue.classList.remove("text-muted-foreground");
         } else {
           getPlaceholder();
         }
       });
-      el.setAttribute("data-slot", "select-trigger");
-      if (el.hasAttribute("id")) {
-        select._h_select.id = el.getAttribute("id");
-      } else {
-        select._h_select.id = `hs${v4_default()}`;
-        el.setAttribute("id", select._h_select.id);
-      }
-      el.setAttribute("aria-controls", select._h_select.controls);
-      el.setAttribute("aria-haspopup", "listbox");
-      el.setAttribute("aria-autocomplete", "none");
-      el.setAttribute("role", "combobox");
+      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");
+      fakeTrigger.setAttribute("role", "combobox");
       effect(() => {
-        el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
-        el.setAttribute("aria-expanded", select._h_select.expanded);
+        fakeTrigger.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
+        fakeTrigger.setAttribute("aria-expanded", select._h_select.expanded);
       });
-      const close = () => {
+      const close = (focusSelect = false) => {
         select._h_select.expanded = false;
+        top.removeEventListener("click", close);
+        el.parentElement.removeEventListener("keydown", onKeyDown);
+        options = null;
+        if (focusSelect) fakeTrigger.focus();
       };
       let content;
       let options;
-      const shiftFocus = (event) => {
+      const onKeyDown = (event) => {
         switch (event.key) {
           case "Down":
           case "ArrowDown":
@@ -6370,13 +6466,19 @@
             options[options.length - 1].setAttribute("tabindex", "0");
             options[options.length - 1].focus();
             break;
+          case " ":
           case "Enter":
+            event.preventDefault();
+            if (!select._h_select.multiple) {
+              close(true);
+            }
+            break;
           case "Escape":
-            handler2();
-            el.focus();
+            event.preventDefault();
+            close(true);
             break;
           case "Tab":
-            handler2();
+            close();
             break;
           case "Control":
           case "Shift":
@@ -6394,7 +6496,7 @@
             }
         }
       };
-      const handler2 = () => {
+      const onClick2 = () => {
         select._h_select.expanded = !select._h_select.expanded;
         if (select._h_select.expanded) {
           if (!content) content = select.querySelector(`#${select._h_select.controls}`);
@@ -6403,15 +6505,26 @@
         Alpine2.nextTick(() => {
           if (select._h_select.expanded) {
             top.addEventListener("click", close, { once: true });
-            el.parentElement.addEventListener("keydown", shiftFocus);
+            el.parentElement.addEventListener("keydown", onKeyDown);
           } else {
             top.removeEventListener("click", close);
-            el.parentElement.removeEventListener("keydown", shiftFocus);
+            el.parentElement.removeEventListener("keydown", onKeyDown);
             options = null;
           }
         });
       };
-      el.addEventListener("click", handler2);
+      const onPress = (event) => {
+        if (event.key === "Escape" && select._h_select.expanded) close(true);
+        else if (event.key === "Enter") {
+          event.preventDefault();
+          onClick2();
+        } else if (event.key === " ") {
+          event.preventDefault();
+          setTimeout(() => onClick2(), 0);
+        }
+      };
+      fakeTrigger.addEventListener("keydown", onPress);
+      fakeTrigger.addEventListener("click", onClick2);
       const chevronDown = createElement(ChevronDown, {
         class: ["opacity-50 size-4 transition-transform duration-200"],
         width: "16",
@@ -6419,19 +6532,32 @@
         "aria-hidden": true,
         role: "presentation"
       });
-      el.appendChild(selectValue);
-      el.appendChild(chevronDown);
+      el.parentElement.appendChild(fakeTrigger);
+      fakeTrigger.appendChild(chevronDown);
+      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);
+          }
+        }
+      };
+      select._h_select.refreshLabel = onInputChange;
+      el.addEventListener("change", onInputChange);
       cleanup(() => {
-        el.removeEventListener("click", handler2);
-        el.parentElement.removeEventListener("keydown", shiftFocus);
+        fakeTrigger.removeEventListener("click", onClick2);
+        fakeTrigger.removeEventListener("keydown", onPress);
+        el.parentElement.removeEventListener("keydown", onKeyDown);
         top.removeEventListener("click", close);
+        el.removeEventListener("change", onInputChange);
         observer.disconnect();
       });
     });
-    Alpine.directive("h-select-content", (el, {}, { 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("h-select-content must be inside an h-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");
@@ -6439,11 +6565,10 @@
       el.setAttribute("role", "presentation");
       el.setAttribute("id", select._h_select.controls);
       el.setAttribute("tabindex", "-1");
-      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");
+        throw new Error(`${original}: trigger not found`);
       }
       let autoUpdateCleanup;
       function updatePosition() {
@@ -6469,6 +6594,9 @@
           });
         });
       }
+      effect(() => {
+        el.setAttribute("aria-labelledby", select._h_select.id);
+      });
       effect(() => {
         el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
         if (select._h_select.expanded) {
@@ -6482,12 +6610,12 @@
         }
       });
     });
-    Alpine.directive("h-select-search", (el, { modifiers }, { effect, cleanup }) => {
-      const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
+    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("h-select-search must be inside an h-select element");
+        throw new Error(`${original} must be inside an h-select element`);
       } else {
-        select._h_select.filterType = FilterType[modifiers[0]] ?? FilterType["starts-with"];
+        select._h_select.filterType = FilterType[el.getAttribute("data-filter")] ?? FilterType["starts-with"];
       }
       el.classList.add("flex", "h-8", "items-center", "gap-2", "border-b", "px-2");
       el.setAttribute("data-slot", "select-search");
@@ -6508,12 +6636,12 @@
       select._h_select.focusSearch = () => {
         searchInput.focus();
       };
-      function handler2(event) {
+      function onActivate(event) {
         if (event.type === "keydown" && (event.key === "Escape" || event.key === "ArrowDown" || event.key === "Down")) return;
         event.stopPropagation();
       }
-      el.addEventListener("click", handler2);
-      el.addEventListener("keydown", handler2);
+      el.addEventListener("click", onActivate);
+      el.addEventListener("keydown", onActivate);
       if (select._h_select.filterType !== FilterType.none) {
         let onInput2 = function() {
           select._h_select.search = searchInput.value.toLowerCase();
@@ -6524,13 +6652,19 @@
         if (select._h_select.expanded) searchInput.focus({ preventScroll: true });
         el.setAttribute("aria-expanded", select._h_select.expanded);
       });
+      const observer = new MutationObserver(() => {
+        select._h_select.filterType = FilterType[el.getAttribute("data-filter")] ?? FilterType["starts-with"];
+        el.setAttribute("aria-autocomplete", select._h_select.filterType === FilterType.none ? "both" : "list");
+      });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-filter"] });
       cleanup(() => {
-        el.removeEventListener("click", handler2);
-        el.removeEventListener("keydown", handler2);
+        el.removeEventListener("click", onActivate);
+        el.removeEventListener("keydown", onActivate);
         if (select._h_select.filterType !== FilterType.none) searchInput.removeEventListener("keyup", onInput);
+        observer.disconnect();
       });
     });
-    Alpine.directive("h-select-group", (el, {}, { effect }) => {
+    Alpine.directive("h-select-group", (el, _, { effect }) => {
       el.setAttribute("data-slot", "select-group");
       el._h_selectGroup = Alpine.reactive({
         labelledby: void 0
@@ -6551,10 +6685,10 @@
         selectGroup._h_selectGroup.labelledby = id;
       }
     });
-    Alpine.directive("h-select-option", (el, { 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("h-select-option must be inside an h-select element");
+        throw new Error(`${original} must be inside an h-select element`);
       }
       el.classList.add(
         "focus:bg-primary",
@@ -6601,18 +6735,13 @@
       el.appendChild(indicatorEl);
       el.appendChild(labelEl);
       function getValue() {
-        if (el.hasOwnProperty("_x_bindings") && el._x_bindings.hasOwnProperty("value")) return el._x_bindings.value;
-        else return el.getAttribute("value");
+        return el.getAttribute("data-value");
       }
       const getLabel = evaluateLater(expression);
       effect(() => {
         getLabel((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;
+          select._h_select.refreshLabel();
         });
       });
       effect(() => {
@@ -6639,51 +6768,40 @@
         if (selected) {
           indicatorEl.classList.remove("invisible");
           el.setAttribute("aria-selected", "true");
-          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");
-          el.setAttribute("aria-selected", "false");
+          return labelEl.innerText;
         }
+        indicatorEl.classList.add("invisible");
+        el.setAttribute("aria-selected", "false");
+        return "";
       }
-      function removeLabel() {
-        const lIndex = select._h_select.label.indexOf(labelEl.innerText);
-        if (lIndex > -1) select._h_select.label.splice(lIndex, 1);
-      }
-      effect(() => {
-        if (select._h_select.multiple) {
-          setSelectedState(select._h_select.model.includes(getValue()));
-        } else {
-          setSelectedState(select._h_select.model === getValue());
-        }
-      });
-      const handler2 = (event) => {
-        if (event.type === "keydown" && event.key === "Enter" || event.type === "click") {
+      const onModelChange = (value) => {
+        return setSelectedState(select._h_select.multiple ? value.includes(getValue()) : value === getValue());
+      };
+      select._h_select.listeners.push(onModelChange);
+      const onActivate = (event) => {
+        if (event.type === "keydown" && (event.key === "Enter" || event.key === " ") || event.type === "click") {
           if (select._h_select.multiple) {
-            const vIndex = select._h_select.model.indexOf(getValue());
+            const vIndex = select._h_model.get().indexOf(getValue());
             if (vIndex > -1) {
-              select._h_select.model.splice(vIndex, 1);
-              removeLabel();
+              const val = select._h_model.get().splice(vIndex, 1);
+              select._h_model.set(val);
             } else {
-              select._h_select.model.push(getValue());
+              select._h_model.get().push(getValue());
             }
-          } else if (select._h_select.model !== getValue()) {
-            select._h_select.model = getValue();
+          } else if (select._h_model.get() !== getValue()) {
+            select._h_model.set(getValue());
           } else {
-            select._h_select.model = "";
-            removeLabel();
+            select._h_model.set("");
           }
         }
       };
-      el.addEventListener("click", handler2);
-      el.addEventListener("keydown", handler2);
+      el.addEventListener("click", onActivate);
+      el.addEventListener("keydown", onActivate);
       cleanup(() => {
-        el.removeEventListener("click", handler2);
-        el.removeEventListener("keydown", handler2);
+        el.removeEventListener("click", onActivate);
+        el.removeEventListener("keydown", onActivate);
+        const lIndex = select._h_select.listeners.indexOf(onModelChange);
+        select._h_select.listeners.splice(lIndex, 1);
       });
     });
     Alpine.directive("h-select-separator", (el) => {
@@ -6727,17 +6845,17 @@
           el.setAttribute("data-open", isOpen);
         });
       });
-      const onClick = (event) => {
+      const onClick2 = (event) => {
         if (event.target.getAttribute("data-slot") === "sheet-overlay") {
           evaluate2(`${expression} = false`);
         }
       };
-      el.addEventListener("click", onClick);
+      el.addEventListener("click", onClick2);
       cleanup(() => {
-        el.removeEventListener("click", onClick);
+        el.removeEventListener("click", onClick2);
       });
     });
-    Alpine.directive("h-sheet", (el, {}, { cleanup }) => {
+    Alpine.directive("h-sheet", (el, _, { cleanup }) => {
       el.classList.add("bg-background", "fixed", "shadow-lg");
       el.setAttribute("data-slot", "sheet");
       let lastSide;
@@ -6784,10 +6902,8 @@
         }
       };
       setFloating();
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach(() => {
-          setFloating();
-        });
+      const observer = new MutationObserver(() => {
+        setFloating();
       });
       observer.observe(el, { attributes: true, attributeFilter: ["data-floating"] });
       cleanup(() => {
@@ -7117,7 +7233,7 @@
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "split-panel");
     });
-    Alpine.directive("h-split-gutter", (el, {}, { cleanup }) => {
+    Alpine.directive("h-split-gutter", (el, _, { cleanup }) => {
       el.classList.add(
         "relative",
         "shrink-0",
@@ -7153,10 +7269,10 @@
         "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=horizontal]/split:before:w-[calc(var(--spacing)*1.25)]",
         "group-data-[orientation=vertical]/split:!h-px",
         "group-data-[orientation=vertical]/split:before:w-full",
-        "group-data-[orientation=vertical]/split:before:h-[0.313rem]"
+        "group-data-[orientation=vertical]/split:before:h-[calc(var(--spacing)*1.25)]"
       ];
       const handleClasses = [
         "bg-transparent",
@@ -7238,7 +7354,7 @@
         "[&>input]:border-0",
         "[&>input]:cursor-pointer",
         "[&>input]:focus-visible:border-ring",
-        "[&>input]:focus-visible:ring-[3px]",
+        "[&>input]:focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "[&>input]:focus-visible:ring-ring/50",
         "[&>input]:left-0",
         "[&>input]:outline-none",
@@ -7247,27 +7363,27 @@
         "[&>input]:top-0",
         "before:bg-background",
         "before:duration-200",
-        "before:inline-block",
-        "before:m-[1px]",
+        "before:block",
         "before:pointer-events-none",
         "before:ring-0",
         "before:rounded-full",
         "before:shadow-input",
-        "before:size-5",
+        "before:h-full",
+        "before:aspect-square",
         "before:transition-transform",
         "bg-muted",
         "border",
-        "data-[size=sm]:before:size-4",
         "data-[size=sm]:h-5",
         "data-[size=sm]:max-w-8",
         "data-[size=sm]:min-w-8",
         "duration-200",
         "h-6",
-        "has-[input:checked]:before:translate-x-[calc(100%-var(--spacing)*1)]",
+        "has-[input:checked]:before:translate-x-[calc(100%-var(--spacing))]",
         "has-[input:checked]:bg-primary",
         "has-[input:checked]:border-primary-active",
         "has-[input:disabled]:cursor-not-allowed",
         "has-[input:disabled]:opacity-50",
+        "p-0.25",
         "max-w-10",
         "min-w-10",
         "relative",
@@ -7407,7 +7523,7 @@
         "data-[floating=true]:shadow-xs",
         "data-[floating=true]:z-1",
         "data-[floating=true]:rounded-lg",
-        "data-[floating=true]:p-[0.188rem]"
+        "data-[floating=true]:p-[calc(var(--spacing)*0.75)]"
       );
       el.setAttribute("data-slot", "tab-bar");
     });
@@ -7417,6 +7533,9 @@
         "flex",
         "items-start",
         "justify-start",
+        "scrollbar-none",
+        "group-data-[orientation=horizontal]/tabs:overflow-x-scroll",
+        "group-data-[orientation=vertical]/tabs:overflow-y-scroll",
         "group-data-[orientation=horizontal]/tabs:flex-row",
         "group-data-[orientation=vertical]/tabs:flex-col",
         "group-data-[orientation=vertical]/tabs:h-fit",
@@ -7426,7 +7545,7 @@
       el.setAttribute("role", "tablist");
       el.setAttribute("data-slot", "tab-list");
     });
-    Alpine.directive("h-tab", (el) => {
+    Alpine.directive("h-tab", (el, { original }) => {
       el.classList.add(
         "cursor-pointer",
         "focus-visible:border-ring",
@@ -7473,8 +7592,8 @@
       );
       el.setAttribute("role", "tab");
       el.setAttribute("data-slot", "tab");
-      if (!el.hasAttribute("id")) throw new Error("h-tab: Tabs must have an id");
-      if (!el.hasAttribute("aria-controls")) throw new Error("h-tab: 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");
@@ -7508,13 +7627,13 @@
       el.setAttribute("role", "button");
       el.setAttribute("data-slot", "tab-list-action");
     });
-    Alpine.directive("h-tabs-content", (el) => {
+    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("h-tabs-content: Tab content must have an id");
-      if (!el.hasAttribute("aria-labelledby")) throw new Error("h-tabs-content: 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.`);
     });
   }
 
@@ -7577,7 +7696,7 @@
           el.classList.add("mt-6", "border-l-2", "pl-6", "italic");
           break;
         case "code-inline":
-          el.classList.add("bg-muted", "relative", "rounded", "px-[0.3rem]", "py-[0.2rem]", "font-mono", "text-sm", "font-semibold", "whitespace-pre");
+          el.classList.add("bg-muted", "relative", "rounded", "px-[calc(var(--spacing)*1.2)]", "py-[calc(var(--spacing)*0.8)]", "font-mono", "text-sm", "font-semibold", "whitespace-pre");
           break;
         case "code":
           el.classList.add("bg-muted", "relative", "rounded", "p-3", "font-mono", "text-sm", "font-semibold", "whitespace-pre");
@@ -7630,13 +7749,13 @@
         "shadow-input",
         "transition-[color,box-shadow]",
         "outline-none",
-        "focus-visible:ring-[3px]",
+        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "disabled:cursor-not-allowed",
         "disabled:opacity-50",
         "md:text-sm"
       );
       if (modifiers.includes("group")) {
-        el.classList.remove("rounded-control", "border", "bg-input-inner", "py-2", "shadow-input", "focus-visible:ring-[3px]");
+        el.classList.remove("rounded-control", "border", "bg-input-inner", "py-2", "shadow-input", "focus-visible:ring-[calc(var(--spacing)*0.75)]");
         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");
@@ -7666,7 +7785,7 @@
         "outline-none",
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
-        "focus-visible:ring-[3px]"
+        "focus-visible:ring-[calc(var(--spacing)*0.75)]"
       );
       el.setAttribute("data-slot", "tile");
       const sizes = {
@@ -7784,12 +7903,16 @@
         is12Hour: false,
         locale: void 0,
         seconds: void 0,
-        close() {
+        focusInput: void 0,
+        close(focus = false) {
           el._h_timepicker.expanded = false;
           top.removeEventListener("click", el._h_timepicker.close);
+          if (focus && this.focusInput) {
+            this.focusInput();
+          }
         }
       });
-      el._time = {
+      el._h_time = {
         changed: void 0,
         parts: {
           hour: null,
@@ -7803,7 +7926,7 @@
         "border-input",
         "[&>input]:appearance-none",
         "has-[input:focus-visible]:border-ring",
-        "has-[input:focus-visible]:ring-[3px]",
+        "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
         "has-[input:focus-visible]:ring-ring/50",
         "dark:has-[aria-invalid=true]:ring-negative/40",
         "dark:has-[input:invalid]:ring-negative/40",
@@ -7866,7 +7989,7 @@
       } else {
         el._h_timepicker.is12Hour = new Intl.DateTimeFormat(el._h_timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
       }
-      const handler2 = (event) => {
+      const handler = (event) => {
         if (event.type === "keydown" && event.key !== "Enter") return;
         el._h_timepicker.expanded = !el._h_timepicker.expanded;
         el.setAttribute("aria-expanded", el._h_timepicker.expanded);
@@ -7878,23 +8001,26 @@
           }
         });
       };
-      el.addEventListener("click", handler2);
-      el.addEventListener("keydown", handler2);
+      el.addEventListener("click", handler);
+      el.addEventListener("keydown", handler);
       cleanup(() => {
-        el.removeEventListener("click", handler2);
-        el.removeEventListener("keydown", handler2);
+        el.removeEventListener("click", handler);
+        el.removeEventListener("keydown", handler);
         top.removeEventListener("click", el._h_timepicker.close);
       });
     });
-    Alpine.directive("h-time-picker-input", (el, {}, { effect, Alpine: Alpine2 }) => {
+    Alpine.directive("h-time-picker-input", (el, { original }, { effect, Alpine: Alpine2 }) => {
       if (el.tagName !== "INPUT") {
-        throw new Error("h-time-picker-input 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("h-time-picker-input must be inside an h-time-picker element");
+        throw new Error(`${original} must be inside a time-picker element`);
       }
-      timepicker._time.changed = () => {
+      timepicker._h_timepicker.focusInput = () => {
+        el.focus();
+      };
+      timepicker._h_time.changed = () => {
         Alpine2.nextTick(() => {
           el.dispatchEvent(new Event("change"));
         });
@@ -7917,7 +8043,7 @@
         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.classList.add("cursor-pointer", "bg-transparent", "text-transparent", "text-shadow-[0_0_0_var(--foreground)]", "outline-none", "flex-1", "h-full", "border-0", "md:text-sm", "text-base");
       el.readOnly = true;
       el.setAttribute("aria-autocomplete", "none");
       el.setAttribute("aria-controls", timepicker._h_timepicker.controls);
@@ -7936,22 +8062,22 @@
         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";
+            timepicker._h_time.parts.second = second ?? "00";
           } else {
             timepicker._h_timepicker.model.set(`${hour}:${minute} ${period}`);
           }
-          timepicker._time.parts.hour = hour;
-          timepicker._time.parts.minute = minute;
-          timepicker._time.parts.period = period;
+          timepicker._h_time.parts.hour = hour;
+          timepicker._h_time.parts.minute = minute;
+          timepicker._h_time.parts.period = period;
         } else {
           if (timepicker._h_timepicker.seconds) {
             timepicker._h_timepicker.model.set(`${hour}:${minute}:${second ?? "00"}`);
-            timepicker._time.parts.second = second ?? "00";
+            timepicker._h_time.parts.second = second ?? "00";
           } else {
             timepicker._h_timepicker.model.set(`${hour}:${minute}`);
           }
-          timepicker._time.parts.hour = hour;
-          timepicker._time.parts.minute = minute;
+          timepicker._h_time.parts.hour = hour;
+          timepicker._h_time.parts.minute = minute;
         }
       }
       let placeholder;
@@ -7966,7 +8092,7 @@
         el.setAttribute("aria-expanded", timepicker._h_timepicker.expanded);
       });
     }).before("h-button");
-    Alpine.directive("h-time-picker-popup", (el, {}, { effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-time-picker-popup", (el, _, { effect, cleanup, Alpine: Alpine2 }) => {
       const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
       el.classList.add(
         "overflow-hidden",
@@ -8008,45 +8134,45 @@
       ];
       const updateModel = () => {
         let newValue;
-        if (timepicker._time.parts.hour !== null && timepicker._time.parts.minute !== null) {
+        if (timepicker._h_time.parts.hour !== null && timepicker._h_time.parts.minute !== null) {
           if (timepicker._h_timepicker.seconds) {
-            if (timepicker._time.parts.seconds !== null) {
-              newValue = `${timepicker._time.parts.hour}:${timepicker._time.parts.minute}:${timepicker._time.parts.second}`;
+            if (timepicker._h_time.parts.seconds !== null) {
+              newValue = `${timepicker._h_time.parts.hour}:${timepicker._h_time.parts.minute}:${timepicker._h_time.parts.second}`;
             } else return;
           } else {
-            newValue = `${timepicker._time.parts.hour}:${timepicker._time.parts.minute}`;
+            newValue = `${timepicker._h_time.parts.hour}:${timepicker._h_time.parts.minute}`;
           }
         } else return;
         if (timepicker._h_timepicker.is12Hour) {
-          if (timepicker._time.parts.period !== null) {
-            newValue += ` ${timepicker._time.parts.period}`;
+          if (timepicker._h_time.parts.period !== null) {
+            newValue += ` ${timepicker._h_time.parts.period}`;
           } else return;
         }
         if (newValue) {
           timepicker._h_timepicker.model.set(newValue);
-          timepicker._time.changed();
+          timepicker._h_time.changed();
         }
       };
       const getCurrentTime = () => {
         let date = /* @__PURE__ */ new Date();
         let hour = date.getHours();
-        timepicker._time.parts.period = hour >= 12 ? dayPeriodLabels.pm : dayPeriodLabels.am;
+        timepicker._h_time.parts.period = hour >= 12 ? dayPeriodLabels.pm : dayPeriodLabels.am;
         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();
+        timepicker._h_time.parts.hour = hour < 10 ? `0${hour}` : hour.toString();
+        timepicker._h_time.parts.minute = minute < 10 ? `0${minute}` : minute.toString();
         if (timepicker._h_timepicker.seconds) {
           let second = date.getSeconds();
-          timepicker._time.parts.second = second < 10 ? `0${second}` : second.toString();
+          timepicker._h_time.parts.second = second < 10 ? `0${second}` : second.toString();
         }
         updateModel();
         timepicker._h_timepicker.close();
       };
       function onKeyDown(event) {
         if (event.key === "Escape") {
-          timepicker._h_timepicker.close();
+          timepicker._h_timepicker.close(true);
         } else if (event.target.tagName === "LI") {
           let list;
           let inHoursList = event.target.parentElement.dataset.type === "hours";
@@ -8060,6 +8186,7 @@
             list = periodList;
           }
           switch (event.key) {
+            case "Up":
             case "ArrowUp":
               event.target.setAttribute("tabindex", "-1");
               let prevElem = event.target.previousElementSibling;
@@ -8073,6 +8200,7 @@
               prevElem.setAttribute("tabindex", "0");
               prevElem.focus();
               break;
+            case "Down":
             case "ArrowDown":
               event.target.setAttribute("tabindex", "-1");
               let nextElem = event.target.nextElementSibling;
@@ -8086,6 +8214,58 @@
               nextElem.setAttribute("tabindex", "0");
               nextElem.focus();
               break;
+            case "Home":
+            case "PageUp":
+              let firstChild;
+              if (list.firstChild === event.target) {
+                break;
+              } else if (inHoursList && timepicker._h_timepicker.is12Hour) {
+                if (list.children[1] === event.target) {
+                  break;
+                } else {
+                  firstChild = list.children[1];
+                }
+              } else {
+                firstChild = list.firstChild;
+              }
+              event.target.setAttribute("tabindex", "-1");
+              firstChild.setAttribute("tabindex", "0");
+              firstChild.focus();
+              break;
+            case "End":
+            case "PageDown":
+              let lastElem;
+              if (list.lastChild === event.target) {
+                break;
+              } else if (inHoursList && timepicker._h_timepicker.is12Hour) {
+                if (list.children[12] !== event.target) {
+                  lastElem = list.children[12];
+                } else {
+                  break;
+                }
+              } else {
+                lastElem = list.lastChild;
+              }
+              event.target.setAttribute("tabindex", "-1");
+              lastElem.setAttribute("tabindex", "0");
+              lastElem.focus();
+              break;
+            case "Right":
+            case "ArrowRight":
+              let nextColumn = event.target.parentElement.nextElementSibling;
+              if (nextColumn) {
+                const child = nextColumn.querySelector('li[tabindex="0"]');
+                child.focus();
+              }
+              break;
+            case "Left":
+            case "ArrowLeft":
+              let prevColumn = event.target.parentElement.previousElementSibling;
+              if (prevColumn) {
+                const child = prevColumn.querySelector('li[tabindex="0"]');
+                child.focus();
+              }
+              break;
             case "Enter":
             case " ":
               event.target.click();
@@ -8111,13 +8291,13 @@
       function setTime(event) {
         if (event.target.tagName === "LI") {
           if (event.target.parentElement.dataset.type === "hours") {
-            timepicker._time.parts.hour = event.target.innerText;
+            timepicker._h_time.parts.hour = event.target.innerText;
           } else if (event.target.parentElement.dataset.type === "minutes") {
-            timepicker._time.parts.minute = event.target.innerText;
+            timepicker._h_time.parts.minute = event.target.innerText;
           } else if (event.target.parentElement.dataset.type === "seconds") {
-            timepicker._time.parts.second = event.target.innerText;
+            timepicker._h_time.parts.second = event.target.innerText;
           } else if (event.target.parentElement.dataset.type === "period") {
-            timepicker._time.parts.period = event.target.innerText;
+            timepicker._h_time.parts.period = event.target.innerText;
           }
           render();
           updateModel();
@@ -8236,7 +8416,7 @@
         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) {
+            if (hoursList.children[h].innerText === timepicker._h_time.parts.hour) {
               hoursList.children[h].setAttribute("tabindex", "0");
               hoursList.children[h].setAttribute("aria-selected", true);
               selectedHour = hoursList.children[h];
@@ -8253,7 +8433,7 @@
         } else {
           for (let h = 0; h < hoursList.children.length; h++) {
             hoursList.children[h].classList.remove("hidden");
-            if (hoursList.children[h].innerText === timepicker._time.parts.hour) {
+            if (hoursList.children[h].innerText === timepicker._h_time.parts.hour) {
               hoursList.children[h].setAttribute("tabindex", "0");
               hoursList.children[h].setAttribute("aria-selected", true);
               selectedHour = hoursList.children[h];
@@ -8267,7 +8447,7 @@
           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) {
+          if (minutesList.children[m].innerText === timepicker._h_time.parts.minute) {
             minutesList.children[m].setAttribute("tabindex", "0");
             minutesList.children[m].setAttribute("aria-selected", true);
             selectedMinute = minutesList.children[m];
@@ -8282,7 +8462,7 @@
         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) {
+            if (secondsList.children[s].innerText === timepicker._h_time.parts.second) {
               secondsList.children[s].setAttribute("tabindex", "0");
               secondsList.children[s].setAttribute("aria-selected", true);
               selectedSecond = secondsList.children[s];
@@ -8295,22 +8475,22 @@
             secondsList.firstChild.setAttribute("tabindex", "0");
           }
           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;
+            okButton.disabled = timepicker._h_time.parts.hour && timepicker._h_time.parts.minute && timepicker._h_time.parts.second && timepicker._h_time.parts.period ? false : true;
           } else {
-            okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute && timepicker._time.parts.second ? false : true;
+            okButton.disabled = timepicker._h_time.parts.hour && timepicker._h_time.parts.minute && timepicker._h_time.parts.second ? false : true;
           }
         } else {
           secondsList.classList.add("hidden");
           if (timepicker._h_timepicker.is12Hour) {
-            okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute && timepicker._time.parts.period ? false : true;
+            okButton.disabled = timepicker._h_time.parts.hour && timepicker._h_time.parts.minute && timepicker._h_time.parts.period ? false : true;
           } else {
-            okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute ? false : true;
+            okButton.disabled = timepicker._h_time.parts.hour && timepicker._h_time.parts.minute ? false : true;
           }
         }
         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) {
+            if (periodList.children[p].innerText === timepicker._h_time.parts.period) {
               periodList.children[p].setAttribute("tabindex", "0");
               periodList.children[p].setAttribute("aria-selected", true);
               selectedPeriod = periodList.children[p];
@@ -8326,10 +8506,10 @@
           periodList.classList.add("hidden");
         }
       }
-      const onClick = (event) => {
+      const onClick2 = (event) => {
         event.stopPropagation();
       };
-      el.addEventListener("click", onClick);
+      el.addEventListener("click", onClick2);
       let autoUpdateCleanup;
       function updatePosition() {
         computePosition2(timepicker, el, {
@@ -8366,7 +8546,7 @@
       });
       cleanup(() => {
         el.removeEventListener("keydown", onKeyDown);
-        el.removeEventListener("click", onClick);
+        el.removeEventListener("click", onClick2);
         okButton.removeEventListener("click", timepicker._h_timepicker.close);
         for (let h = 0; h < hoursList.children.length; h++) {
           hoursList.children[h].removeEventListener("click", setHour);
@@ -8431,7 +8611,7 @@
 
   // src/components/tooltip.js
   function tooltip_default(Alpine) {
-    Alpine.directive("h-tooltip-trigger", (el, {}, { Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-tooltip-trigger", (el, _, { Alpine: Alpine2, cleanup }) => {
       el._tooltip = Alpine2.reactive({
         id: void 0,
         controls: `hpc${v4_default()}`,
@@ -8444,17 +8624,17 @@
         el.setAttribute("id", el._tooltip.id);
       }
       el.setAttribute("aria-describedby", el._tooltip.controls);
-      const handler2 = (event) => {
+      const handler = (event) => {
         el._tooltip.shown = event.type === "pointerenter";
       };
-      el.addEventListener("pointerenter", handler2);
-      el.addEventListener("pointerleave", handler2);
+      el.addEventListener("pointerenter", handler);
+      el.addEventListener("pointerleave", handler);
       cleanup(() => {
-        el.removeEventListener("pointerenter", handler2);
-        el.removeEventListener("pointerleave", handler2);
+        el.removeEventListener("pointerenter", handler);
+        el.removeEventListener("pointerleave", handler);
       });
     });
-    Alpine.directive("h-tooltip", (el, {}, { effect }) => {
+    Alpine.directive("h-tooltip", (el, { original }, { effect }) => {
       const tooltip = (() => {
         let sibling = el.previousElementSibling;
         while (sibling && !sibling.hasOwnProperty("_tooltip")) {
@@ -8463,13 +8643,13 @@
         return sibling;
       })();
       if (!tooltip) {
-        throw new Error("h-tooltip must be placed after an h-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");
       el.setAttribute("id", tooltip._tooltip.controls);
       const arrowEl = document.createElement("span");
-      arrowEl.classList.add("absolute", "bg-foreground", "fill-foreground", "z-50", "size-2.5", "rotate-45", "rounded-[2px]");
+      arrowEl.classList.add("absolute", "bg-foreground", "size-2.5", "rotate-45");
       el.appendChild(arrowEl);
       function updatePosition() {
         computePosition2(tooltip, el, {
@@ -8480,11 +8660,12 @@
             left: `${x}px`,
             top: `${y}px`
           });
-          if (middlewareData.arrow)
+          if (middlewareData.arrow) {
             Object.assign(arrowEl.style, {
               left: middlewareData.arrow.x != null ? `${middlewareData.arrow.x}px` : "",
-              top: placement === "top" ? `${el.offsetHeight - 5}px` : `-5px`
+              top: placement === "top" ? `${el.offsetHeight - arrowEl.clientHeight / 2}px` : `-${arrowEl.clientHeight / 2}px`
             });
+          }
         });
       }
       effect(() => {
@@ -8506,14 +8687,262 @@
     });
   }
 
+  // src/components/tree.js
+  function tree_default(Alpine) {
+    Alpine.directive("h-tree", (el, { modifiers }, { effect, cleanup }) => {
+      el.classList.add("vbox", "w-full", "min-w-0", "gap-1");
+      el.setAttribute("tabindex", "-1");
+      if (modifiers.includes("sub")) {
+        el.classList.add(
+          "relative",
+          "translate-x-px",
+          "py-0.5",
+          "pl-4",
+          "data-[border=true]:before:absolute",
+          "data-[border=true]:before:left-[calc(var(--spacing)*2.5)]",
+          "data-[border=true]:before:block",
+          "data-[border=true]:before:top-0.5",
+          "data-[border=true]:before:bottom-0.5",
+          "data-[border=true]:before:min-w-px",
+          "data-[border=true]:before:w-[calc(var(--spacing)*0.25)]",
+          "data-[border=true]:before:bg-border"
+        );
+        el.setAttribute("data-slot", "subtree");
+        el.setAttribute("role", "group");
+        const treeItem = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_tree_item"));
+        effect(() => {
+          if (treeItem._h_tree_item.expanded) {
+            el.classList.remove("!hidden");
+          } else {
+            el.classList.add("!hidden");
+          }
+        });
+      } else {
+        let getVisibleItems = function(tree) {
+          return [...tree.querySelectorAll('[role="treeitem"]')].filter((item) => {
+            let parent = item.parentElement.closest('[role="group"]');
+            while (parent) {
+              const parentItem = parent.closest('[role="treeitem"]');
+              if (parentItem && parentItem.getAttribute("aria-expanded") === "false") {
+                return false;
+              }
+              parent = parentItem?.parentElement.closest('[role="group"]');
+            }
+            return true;
+          });
+        }, focusItem = function(item) {
+          [...el.querySelectorAll('[role="treeitem"]')].forEach((i) => i.setAttribute("tabindex", "-1"));
+          item.setAttribute("tabindex", "0");
+          item.focus();
+        }, onKeyDown = function(event) {
+          const items = getVisibleItems(el);
+          const current = el.querySelector('li[tabindex="0"]');
+          const index = items.indexOf(current);
+          if (index === -1) return;
+          switch (event.key) {
+            case "Down":
+            case "ArrowDown":
+              event.preventDefault();
+              if (items[index + 1]) focusItem(items[index + 1]);
+              break;
+            case "Up":
+            case "ArrowUp":
+              event.preventDefault();
+              if (items[index - 1]) focusItem(items[index - 1]);
+              break;
+            case "Right":
+            case "ArrowRight":
+              if (current.getAttribute("aria-expanded") === "false") {
+                current.click();
+              } else {
+                const firstChild = current.querySelector('[role="group"] [role="treeitem"]');
+                if (firstChild) focusItem(firstChild);
+              }
+              break;
+            case "Left":
+            case "ArrowLeft":
+              if (current.getAttribute("aria-expanded") === "true") {
+                current.click();
+              } else {
+                const parentItem = current.parentElement.closest('[role="treeitem"]');
+                if (parentItem) focusItem(parentItem);
+              }
+              break;
+            case "Home":
+              event.preventDefault();
+              focusItem(items[0]);
+              break;
+            case "End":
+              event.preventDefault();
+              focusItem(items[items.length - 1]);
+              break;
+            case "Enter":
+            case " ":
+              event.preventDefault();
+              current.click();
+              break;
+          }
+        };
+        el.setAttribute("data-slot", "tree");
+        el.setAttribute("role", "tree");
+        el.addEventListener("keydown", onKeyDown);
+        cleanup(() => {
+          el.removeEventListener("keydown", onClick);
+        });
+      }
+    });
+    Alpine.directive("h-tree-item", (el, { modifiers, expression }, { evaluate: evaluate2, evaluateLater, effect, cleanup }) => {
+      el._h_tree_item = Alpine.reactive({
+        hasSubtree: modifiers.includes("expanded"),
+        expanded: true
+      });
+      el.classList.add(
+        "group/tree-item",
+        "relative",
+        "outline-none",
+        'focus:[&>[data-slot="tree-button"]]:bg-secondary',
+        'focus:[&>[data-slot="tree-button"]]:text-secondary-foreground',
+        'aria-selected:[&>[data-slot="tree-button"]]:bg-primary',
+        'aria-selected:[&>[data-slot="tree-button"]]:font-medium',
+        'aria-selected:[&>[data-slot="tree-button"]]:text-primary-foreground'
+      );
+      el.setAttribute("data-slot", "tree-item");
+      el.setAttribute("role", "treeitem");
+      const treeRoot = Alpine.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "tree");
+      if (treeRoot && treeRoot.querySelector("[data-slot=tree-item]") === el) {
+        el.setAttribute("tabindex", "0");
+      } else {
+        el.setAttribute("tabindex", "-1");
+      }
+      effect(() => {
+        if (!el.closest('[role="tree"]')) return;
+      });
+      const onClick2 = (event) => {
+        if (event.target === el || event.target.parentElement === el) {
+          if (el._h_tree_item.hasSubtree) {
+            if (expression === "false" || expression === "true") {
+              el._h_tree_item.expanded = el.getAttribute("aria-expanded") === "true" ? false : true;
+              el.setAttribute("aria-expanded", el._h_tree_item.expanded);
+            } else {
+              el._h_tree_item.expanded = !evaluate2(expression);
+              evaluate2(`${expression} = !${expression}`);
+            }
+          }
+          [...treeRoot.querySelectorAll('[role="treeitem"]')].forEach((i) => i.setAttribute("tabindex", "-1"));
+          el.setAttribute("tabindex", "0");
+        }
+      };
+      el.addEventListener("click", onClick2);
+      cleanup(() => {
+        el.removeEventListener("click", onClick2);
+      });
+      if (el._h_tree_item.hasSubtree) {
+        const setExpanded = (expanded) => {
+          el._h_tree_item.expanded = expanded;
+          el.setAttribute("aria-expanded", expanded);
+        };
+        const getExpanded = evaluateLater(expression);
+        effect(() => {
+          getExpanded((expanded) => {
+            setExpanded(expanded);
+          });
+        });
+      }
+    });
+    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(`${original} must be inside a tree item`);
+      el.classList.add(
+        "flex",
+        "w-full",
+        "items-center",
+        "gap-2",
+        "overflow-hidden",
+        "rounded-md",
+        "p-1.5",
+        "text-left",
+        "text-sm",
+        "align-middle",
+        "outline-hidden",
+        "ring-ring",
+        "transition-[width,height,padding]",
+        "hover:bg-secondary",
+        "hover:text-secondary-foreground",
+        "focus-visible:ring-2",
+        "active:bg-primary",
+        "active:text-primary-foreground",
+        "disabled:pointer-events-none",
+        "disabled:opacity-50",
+        "aria-disabled:pointer-events-none",
+        "aria-disabled:opacity-50",
+        "[&>span]:w-full",
+        "[&>span]:truncate",
+        "[&>span]:align-middle",
+        "[&>span]:pointer-events-none",
+        "[&>svg]:size-4",
+        "[&>svg]:shrink-0",
+        "[&>svg]:pointer-events-none",
+        "data-[indicator]:after:block",
+        "data-[indicator]:after:ml-auto",
+        "data-[indicator]:after:rounded-full",
+        "data-[indicator]:after:size-2",
+        "data-[indicator=positive]:after:bg-positive",
+        "data-[indicator=negative]:after:bg-negative",
+        "data-[indicator=warning]:after:bg-warning",
+        "data-[indicator=information]:after:bg-information",
+        "before:mr-1",
+        "before:bg-transparent",
+        "before:min-w-1.5",
+        "before:size-1.5",
+        "before:pointer-events-none"
+      );
+      el.setAttribute("data-slot", "tree-button");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("role", "presentation");
+      if (treeItem._h_tree_item.hasSubtree) {
+        el.classList.add(
+          "before:block",
+          "before:mr-1",
+          "before:bg-transparent",
+          "before:border-t-[calc(var(--spacing)*0.25)]",
+          "before:border-r-[calc(var(--spacing)*0.25)]",
+          "before:border-foreground",
+          "active:before:border-primary-foreground",
+          "before:pointer-events-none",
+          "before:min-w-1.5",
+          "before:size-1.5",
+          "before:rounded-[calc(var(--spacing)*0.25)]",
+          "before:rotate-135",
+          "before:translate-x-1/2",
+          "before:-translate-y-0.25",
+          "data-[expanded=false]:before:rotate-45",
+          "data-[expanded=false]:before:translate-x-1/2",
+          "data-[expanded=false]:before:-translate-y-0",
+          "aria-selected:before:border-primary-foreground"
+        );
+      }
+      effect(() => {
+        el.setAttribute("data-expanded", treeItem._h_tree_item.expanded);
+      });
+    });
+  }
+
   // src/utils/theme.js
   var colorSchemeKey = "codbex.harmonia.colorMode";
   var savedScheme = localStorage.getItem(colorSchemeKey);
+  var callbacks = [];
+  var onColorSchemeChange = (scheme) => {
+    for (let i = 0; i < callbacks.length; i++) {
+      callbacks[i](scheme);
+    }
+  };
   var colorSchemeChange = (event) => {
     if (event.matches) {
       document.documentElement.classList.add("dark");
+      onColorSchemeChange("dark");
     } else {
       document.documentElement.classList.remove("dark");
+      onColorSchemeChange("light");
     }
   };
   var initColorScheme = () => {
@@ -8533,15 +8962,19 @@
       document.documentElement.classList.add("dark");
       localStorage.setItem(colorSchemeKey, "dark");
       window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChange);
+      onColorSchemeChange("dark");
     } else if (mode === "light") {
       document.documentElement.classList.remove("dark");
       localStorage.setItem(colorSchemeKey, "light");
       window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChange);
+      onColorSchemeChange("light");
     } else {
       if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
         document.documentElement.classList.add("dark");
+        onColorSchemeChange("dark");
       } else {
         document.documentElement.classList.remove("dark");
+        onColorSchemeChange("light");
       }
       localStorage.setItem(colorSchemeKey, "auto");
       window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", colorSchemeChange);
@@ -8555,16 +8988,27 @@
     }
     return "light";
   };
+  var addColorSchemeListener = (callback) => {
+    callbacks.push(callback);
+  };
+  var removeColorSchemeListener = (callback) => {
+    for (let i = 0; i < callbacks.length; i++) {
+      if (callbacks[i] === callback) {
+        callbacks.splice(i, 1);
+        return;
+      }
+    }
+  };
   initColorScheme();
 
   // src/utils/breakpoint-listener.js
-  function getBreakpointListener(handler2, breakpoint = 768) {
+  function getBreakpointListener(handler, breakpoint = 768) {
     const mql = top.matchMedia(`(width <= ${breakpoint}px)`);
     const onWidthChange = (event) => {
-      handler2(event.matches);
+      handler(event.matches);
     };
     mql.addEventListener("change", onWidthChange);
-    handler2(mql.matches);
+    handler(mql.matches);
     return {
       _mql: mql,
       _onWidthChange: onWidthChange,
@@ -8574,6 +9018,26 @@
     };
   }
 
+  // src/utils/template.js
+  function template_default(Alpine) {
+    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;
+        Alpine2.addScopeToNode(clone, Alpine2.closestDataStack(el)[0], el.parentElement);
+        Alpine2.mutateDom(() => {
+          el.before(clone);
+          Alpine2.initTree(clone);
+        });
+        cleanup(() => {
+          clone.remove();
+        });
+      } else {
+        console.error(`${original}: ${Alpine2.prefixed("data")} directive is missing`);
+      }
+    });
+  }
+
   // src/utils/focus.js
   function focus_default(Alpine) {
     Alpine.directive("h-focus", (el, { expression }, { effect, evaluateLater }) => {
@@ -8587,10 +9051,10 @@
   }
 
   // package.json
-  var version = "0.7.0";
+  var version = "0.9.0";
 
   // src/index.js
-  window.Harmonia = { getBreakpointListener, getColorScheme, setColorScheme, version };
+  window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };
   document.addEventListener("alpine:init", () => {
     window.Alpine.plugin(accordion_default);
     window.Alpine.plugin(alert_default);
@@ -8632,7 +9096,9 @@
     window.Alpine.plugin(timepicker_default);
     window.Alpine.plugin(toolbar_default);
     window.Alpine.plugin(tooltip_default);
+    window.Alpine.plugin(tree_default);
     window.Alpine.plugin(focus_default);
+    window.Alpine.plugin(template_default);
   });
 })();
 /*! Bundled license information:
@@ -8650,7 +9116,7 @@ lucide/dist/esm/icons/clock.js:
 lucide/dist/esm/icons/search.js:
 lucide/dist/esm/lucide.js:
   (**
-   * @license lucide v0.544.0 - ISC
+   * @license lucide v0.562.0 - ISC
    *
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.