@codbex/harmonia 0.4.0 → 0.6.0

package/dist/harmonia.js

@@ -137,39 +137,39 @@
   // src/components/accordion.js
   function accordion_default(Alpine) {
     Alpine.directive("h-accordion", (el, { expression, modifiers }, { Alpine: Alpine2 }) => {
-      el._accordion = modifiers.includes("single") ? Alpine2.reactive({
+      el._h_accordion = modifiers.includes("single") ? Alpine2.reactive({
         single: true,
         expandedId: expression ?? ""
       }) : { single: false };
       el.setAttribute("data-slot", "accordion");
     });
     Alpine.directive("h-accordion-item", (el, { expression, modifiers }, { effect, Alpine: Alpine2 }) => {
-      const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_accordion"));
+      const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
       if (!accordion) {
         throw new Error("h-accordion-item must be inside an h-accordion");
       }
-      el.classList.add("border-b", "last:border-b-0");
+      el.classList.add("border-b", "last:border-b-0", "[[data-variant=header]_&]:data-[state=closed]:border-b-0");
       el.setAttribute("data-slot", "accordion-item");
       const itemId = expression ?? `ha${v4_default()}`;
       function getIsExpanded() {
-        if (accordion._accordion.single) {
-          if (accordion._accordion.expandedId !== "") {
-            return accordion._accordion.expandedId === itemId;
+        if (accordion._h_accordion.single) {
+          if (accordion._h_accordion.expandedId !== "") {
+            return accordion._h_accordion.expandedId === itemId;
           } else if (modifiers.includes("default")) {
-            accordion._accordion.expandedId = itemId;
+            accordion._h_accordion.expandedId = itemId;
             return true;
           }
           return false;
         }
         return modifiers.includes("default");
       }
-      el._accordionItem = Alpine2.reactive({
+      el._h_accordionItem = Alpine2.reactive({
         id: itemId,
         controls: `ha${v4_default()}`,
         expanded: getIsExpanded()
       });
       const setAttributes = () => {
-        el.setAttribute("data-state", el._accordionItem.expanded ? "open" : "closed");
+        el.setAttribute("data-state", el._h_accordionItem.expanded ? "open" : "closed");
       };
       setAttributes();
       effect(setAttributes);
@@ -178,12 +178,23 @@
       if (el.tagName.length !== 2 && !el.tagName.startsWith("H")) {
         throw new Error("h-accordion-trigger must be a header element");
       }
-      const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_accordion"));
-      const accordionItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_accordionItem"));
+      const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
+      const accordionItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordionItem"));
       if (!accordionItem || !accordion) {
         throw new Error("h-accordion-trigger must be inside an h-accordion-item, which must be inside an h-accordion");
       }
-      el.classList.add("flex");
+      el.classList.add(
+        "flex",
+        "h-12",
+        "[[data-size=md]_&]:h-10",
+        "[[data-size=sm]_&]:h-8",
+        "[[data-variant=header]_&]:bg-object-header",
+        "[[data-variant=header]_&]:text-object-header-foreground",
+        "[[data-variant=header]_&]:px-4",
+        "[[data-variant=header]_&]:border-b",
+        "[[data-size=md][data-variant=header]_&]:px-3",
+        "[[data-size=sm][data-variant=header]_&]:px-2.5"
+      );
       el.setAttribute("tabIndex", "-1");
       const getLabel = evaluateLater(expression);
       const chevronDown = createElement(ChevronDown, {
@@ -202,10 +213,9 @@
         "focus-visible:ring-ring/50",
         "flex",
         "flex-1",
-        "items-start",
+        "items-center",
         "justify-between",
         "gap-4",
-        "py-4",
         "text-left",
         "text-sm",
         "font-medium",
@@ -224,17 +234,17 @@
           button.appendChild(chevronDown);
         });
       });
-      button.setAttribute("id", accordionItem._accordionItem.id);
-      button.setAttribute("aria-controls", accordionItem._accordionItem.controls);
+      button.setAttribute("id", accordionItem._h_accordionItem.id);
+      button.setAttribute("aria-controls", accordionItem._h_accordionItem.controls);
       const setAttributes = () => {
-        button.setAttribute("data-state", accordionItem._accordionItem.expanded ? "open" : "closed");
-        button.setAttribute("aria-expanded", accordionItem._accordionItem.expanded);
+        button.setAttribute("data-state", accordionItem._h_accordionItem.expanded ? "open" : "closed");
+        button.setAttribute("aria-expanded", accordionItem._h_accordionItem.expanded);
       };
       const handler2 = () => {
-        accordionItem._accordionItem.expanded = !accordionItem._accordionItem.expanded;
+        accordionItem._h_accordionItem.expanded = !accordionItem._h_accordionItem.expanded;
         setAttributes();
-        if (accordion._accordion.single) {
-          accordion._accordion.expandedId = accordionItem._accordionItem.id;
+        if (accordion._h_accordion.single) {
+          accordion._h_accordion.expandedId = accordionItem._h_accordionItem.id;
         }
       };
       setAttributes();
@@ -242,10 +252,10 @@
       cleanup(() => {
         el.removeEventListener("click", handler2);
       });
-      if (accordion._accordion.single) {
+      if (accordion._h_accordion.single) {
         effect(() => {
-          if (accordion._accordion.expandedId !== accordionItem._accordionItem.id) {
-            accordionItem._accordionItem.expanded = false;
+          if (accordion._h_accordion.expandedId !== accordionItem._h_accordionItem.id) {
+            accordionItem._h_accordionItem.expanded = false;
             setAttributes();
           }
         });
@@ -254,13 +264,13 @@
     Alpine.directive("h-accordion-content", (el, {}, { effect, Alpine: Alpine2 }) => {
       el.classList.add("pt-0", "pb-4", "overflow-hidden", "text-sm", "data-[state=closed]:hidden");
       el.setAttribute("data-slot", "accordion-content");
-      const parent = Alpine2.findClosest(el.parentElement, (parent2) => parent2.hasOwnProperty("_accordionItem"));
+      const parent = Alpine2.findClosest(el.parentElement, (parent2) => parent2.hasOwnProperty("_h_accordionItem"));
       if (parent) {
-        el.setAttribute("id", parent._accordionItem.controls);
-        el.setAttribute("aria-labelledby", parent._accordionItem.id);
-        el.setAttribute("data-state", parent._accordionItem.expanded ? "open" : "closed");
+        el.setAttribute("id", parent._h_accordionItem.controls);
+        el.setAttribute("aria-labelledby", parent._h_accordionItem.id);
+        el.setAttribute("data-state", parent._h_accordionItem.expanded ? "open" : "closed");
         effect(() => {
-          el.setAttribute("data-state", parent._accordionItem.expanded ? "open" : "closed");
+          el.setAttribute("data-state", parent._h_accordionItem.expanded ? "open" : "closed");
         });
       }
     });
@@ -305,13 +315,11 @@
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes" && mutation.attributeName === "data-variant") {
-            setVariant(el.getAttribute("data-variant") ?? "default");
-          }
+        mutations.forEach(() => {
+          setVariant(el.getAttribute("data-variant") ?? "default");
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -342,6 +350,7 @@
         "has-[img]:border-0",
         "flex",
         "size-8",
+        "aspect-square",
         "shrink-0",
         "overflow-hidden",
         "rounded-full",
@@ -351,7 +360,7 @@
         "[&>svg]:size-5"
       );
       el.setAttribute("data-slot", "avatar");
-      el._avatar = Alpine2.reactive({
+      el._h_avatar = Alpine2.reactive({
         fallback: false
       });
       if (el.tagName === "BUTTON") {
@@ -359,7 +368,7 @@
       }
     });
     Alpine.directive("h-avatar-image", (el, {}, { cleanup }) => {
-      const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_avatar"));
+      const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
       if (!avatar) {
         throw new Error("h-avatar-image must be inside an h-avatar element");
       }
@@ -370,7 +379,7 @@
       function fallback(active = false) {
         if (active) el.classList.add("hidden");
         else el.classList.remove("hidden");
-        avatar._avatar.fallback = active;
+        avatar._h_avatar.fallback = active;
       }
       function completeCheck() {
         if (el.complete) {
@@ -384,27 +393,25 @@
         interval = setInterval(completeCheck, 10);
       }
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes") {
-            if (mutation.attributeName === "src") interval = setInterval(completeCheck, 10);
-          }
+        mutations.forEach(() => {
+          interval = setInterval(completeCheck, 10);
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["src"] });
       cleanup(() => {
         if (interval) clearInterval(interval);
         observer.disconnect();
       });
     });
     Alpine.directive("h-avatar-fallback", (el, {}, { effect }) => {
-      const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_avatar"));
+      const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
       if (!avatar) {
         throw new Error("h-avatar-fallback must be inside an h-avatar element");
       }
       el.classList.add("hidden", "bg-muted", "flex", "size-full", "items-center", "justify-center");
       el.setAttribute("data-slot", "avatar-fallback");
       effect(() => {
-        if (avatar._avatar.fallback) el.classList.remove("hidden");
+        if (avatar._h_avatar.fallback) el.classList.remove("hidden");
         else el.classList.add("hidden");
       });
     });
@@ -418,7 +425,7 @@
         "inline-flex",
         "items-center",
         "justify-center",
-        "rounded-md",
+        "rounded-full",
         "border",
         "px-2",
         "py-0.5",
@@ -433,12 +440,6 @@
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
         "focus-visible:ring-[3px]",
-        "aria-invalid:ring-negative/20",
-        "dark:aria-invalid:ring-negative/40",
-        "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative",
         "transition-[color,box-shadow]",
         "overflow-hidden"
       );
@@ -460,13 +461,11 @@
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes" && mutation.attributeName === "data-variant") {
-            setVariant(el.getAttribute("data-variant") ?? "default");
-          }
+        mutations.forEach(() => {
+          setVariant(el.getAttribute("data-variant") ?? "default");
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -478,7 +477,7 @@
     default: [
       "bg-secondary",
       "text-secondary-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-secondary-hover",
       "active:bg-secondary-active",
       "aria-pressed:bg-secondary-active",
@@ -489,7 +488,7 @@
     primary: [
       "bg-primary",
       "text-primary-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-primary-hover",
       "active:bg-primary-active",
       "aria-pressed:bg-primary-active",
@@ -500,7 +499,7 @@
     positive: [
       "bg-positive",
       "text-positive-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-positive-hover",
       "active:bg-positive-active",
       "aria-pressed:bg-positive-active",
@@ -511,7 +510,7 @@
     negative: [
       "bg-negative",
       "text-negative-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-negative-hover",
       "active:bg-negative-active",
       "aria-pressed:bg-negative-active",
@@ -522,7 +521,7 @@
     warning: [
       "bg-warning",
       "text-warning-foreground",
-      "shadow-control",
+      "shadow-button",
       "hover:bg-warning-hover",
       "active:bg-warning-active",
       "aria-pressed:bg-warning-active",
@@ -534,7 +533,6 @@
       "border",
       "bg-background",
       "text-foreground",
-      "shadow-none",
       "hover:bg-secondary",
       "hover:text-secondary-foreground",
       "active:bg-secondary-active",
@@ -582,11 +580,31 @@
       "aria-invalid:ring-negative/20",
       "dark:aria-invalid:ring-negative/40",
       "aria-invalid:border-negative",
-      "invalid:ring-negative/20",
-      "dark:invalid:ring-negative/40",
-      "invalid:border-negative"
+      "invalid:!ring-negative/20",
+      "dark:invalid:!ring-negative/40",
+      "invalid:!border-negative"
     );
   };
+  var getButtonSize = (size3, inGroup = false) => {
+    switch (size3) {
+      case "xs":
+        return inGroup ? ["h-6", "gap-1", "px-2", "[&>svg:not([class*='size-'])]:size-3.5", "has-[>svg]:px-2"] : ["h-6.5", "gap-1.5", "px-2.5", "has-[>svg]:px-2.5"];
+      case "sm":
+        return inGroup ? ["h-8", "px-2.5", "gap-1.5", "has-[>svg]:px-2.5"] : ["h-8", "gap-1.5", "px-3", "has-[>svg]:px-2.5"];
+      case "lg":
+        return ["h-10", "px-6", "has-[>svg]:px-4"];
+      case "icon-xs":
+        return inGroup ? ["size-6", "p-0", "has-[>svg]:p-0"] : ["size-6.5"];
+      case "icon-sm":
+        return inGroup ? ["size-8", "p-0", "has-[>svg]:p-0"] : ["size-8"];
+      case "icon":
+        return ["size-9"];
+      case "icon-lg":
+        return ["size-10"];
+      default:
+        return ["h-9", "px-4", "py-2", "has-[>svg]:px-3"];
+    }
+  };
   function button_default(Alpine) {
     Alpine.directive("h-button", (el, { modifiers }, { cleanup }) => {
       setButtonClasses(el);
@@ -594,34 +612,24 @@
         el.setAttribute("data-slot", "button");
       }
       const inGroup = modifiers.includes("group");
-      const sizes = {
-        default: ["h-9", "px-4", "py-2", "has-[>svg]:px-3"],
-        xs: inGroup ? ["h-6", "gap-1", "px-2", "[&>svg:not([class*='size-'])]:size-3.5", "has-[>svg]:px-2"] : ["h-6.5", "gap-1.5", "px-2.5", "has-[>svg]:px-2.5"],
-        sm: inGroup ? ["h-8", "px-2.5", "gap-1.5", "has-[>svg]:px-2.5"] : ["h-8", "gap-1.5", "px-3", "has-[>svg]:px-2.5"],
-        lg: ["h-10", "px-6", "has-[>svg]:px-4"],
-        "icon-xs": inGroup ? ["size-6", "p-0", "has-[>svg]:p-0"] : ["size-6.5"],
-        "icon-sm": inGroup ? ["size-8", "p-0", "has-[>svg]:p-0"] : ["size-8"],
-        icon: ["size-9"],
-        "icon-lg": ["size-10"]
-      };
+      let lastSize;
       function setVariant(variant) {
         for (const [_, value] of Object.entries(buttonVariants)) {
           el.classList.remove(...value);
         }
         if (buttonVariants.hasOwnProperty(variant)) el.classList.add(...buttonVariants[variant]);
       }
-      function setSize(size3) {
-        if (sizes.hasOwnProperty(size3)) {
-          el.classList.add(...sizes[size3]);
-          el.setAttribute("data-size", size3);
-          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);
-          }
+      function setSize(size3 = "default") {
+        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);
         }
+        lastSize = size3;
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
       if (inGroup) {
-        el.classList.remove("shadow-control", "inline-flex");
+        el.classList.remove("shadow-button", "inline-flex");
         el.classList.add("shadow-none", "flex");
         setSize(el.getAttribute("data-size") ?? "xs");
       } else {
@@ -631,19 +639,17 @@
           if (["date-picker-trigger", "time-picker-trigger"].includes(el.getAttribute("data-slot"))) {
             setSize("icon-xs");
           } else {
-            setSize("default");
+            setSize();
           }
         }
       }
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
-          if (mutation.type === "attributes") {
-            if (mutation.attributeName === "data-variant") setVariant(el.getAttribute("data-variant") ?? "default");
-            else if (mutation.attributeName === "data-size") setSize(el.getAttribute("data-size") ?? (inGroup ? "xs" : "default"));
-          }
+          if (mutation.attributeName === "data-variant") setVariant(el.getAttribute("data-variant") ?? "default");
+          else setSize(el.getAttribute("data-size") ?? (inGroup ? "xs" : "default"));
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant", "data-size"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -2162,7 +2168,7 @@
   // src/components/calendar.js
   function calendar_default(Alpine) {
     Alpine.directive("h-calendar", (el, { expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
-      const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_datepicker"));
+      const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
       el.classList.add("border", "rounded-control", "gap-2", "p-2");
       el.setAttribute("tabindex", "-1");
       if (datepicker) {
@@ -2170,9 +2176,9 @@
         el.setAttribute("role", "dialog");
         el.setAttribute("aria-modal", "true");
         el.setAttribute("data-slot", "date-picker-calendar");
-        el.setAttribute("data-state", datepicker._datepicker.expanded ? "open" : "closed");
+        el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
       } else {
-        el.classList.add("shadow-control", "data-[invalid=true]:border-negative", "data-[invalid=true]:ring-negative/20", "dark:data-[invalid=true]:ring-negative/40");
+        el.classList.add("shadow-input", "data-[invalid=true]:border-negative", "data-[invalid=true]:ring-negative/20", "dark:data-[invalid=true]:ring-negative/40");
       }
       let date = /* @__PURE__ */ new Date();
       let selected = void 0;
@@ -2195,38 +2201,38 @@
           }
         }
         if (datepicker) {
-          datepicker._datepicker.input.value = formatter.format(selected);
-          datepicker._datepicker.input.setCustomValidity("");
-          if (triggerInput) datepicker._datepicker.input.dispatchEvent(new Event("change", { bubbles: true }));
+          datepicker._h_datepicker.input.value = formatter.format(selected);
+          datepicker._h_datepicker.input.setCustomValidity("");
+          if (triggerInput) datepicker._h_datepicker.input.dispatchEvent(new Event("change", { bubbles: true }));
         } else {
           el.setAttribute("data-invalid", "false");
         }
       }
       const onInputChange = () => {
-        const newValue = new Date(datepicker._datepicker.input.value);
+        const newValue = new Date(datepicker._h_datepicker.input.value);
         if (isNaN(newValue)) {
-          console.error(`h-calendar: input value is not a valid date - ${datepicker._datepicker.input.value}`);
-          datepicker._datepicker.input.setCustomValidity("Input value is not a valid date.");
+          console.error(`h-calendar: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
+          datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
           return;
         } else if (selected.getTime() !== newValue.getTime()) {
           selected = newValue;
           modelChange();
           render();
         }
-        datepicker._datepicker.input.setCustomValidity("");
+        datepicker._h_datepicker.input.setCustomValidity("");
       };
       if (datepicker) {
-        datepicker._datepicker.input.addEventListener("change", onInputChange);
+        datepicker._h_datepicker.input.addEventListener("change", onInputChange);
       }
       function checkForModel() {
         if (el.hasOwnProperty("_x_model") && el._x_model.get()) {
           selected = new Date(el._x_model.get());
           if (isNaN(selected)) {
             console.error(`h-calendar: input value is not a valid date - ${el._x_model.get()}`);
-            if (datepicker) datepicker._datepicker.input.setCustomValidity("Input value is not a valid date.");
+            if (datepicker) datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
             else el.setAttribute("data-invalid", "true");
           } else if (datepicker) {
-            datepicker._datepicker.input.value = formatter.format(selected);
+            datepicker._h_datepicker.input.value = formatter.format(selected);
           }
         }
       }
@@ -2236,7 +2242,7 @@
         selected = new Date(focusedDay);
         modelChange(true);
         render();
-        if (datepicker) datepicker._datepicker.expanded = false;
+        if (datepicker) datepicker._h_datepicker.expanded = false;
       }
       function isDisabled(d) {
         if (minDate && d < new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate())) return true;
@@ -2529,7 +2535,7 @@
             newDay.setMonth(newDay.getMonth() + 1);
             break;
           case "Escape":
-            if (datepicker) datepicker._datepicker.expanded = false;
+            if (datepicker) datepicker._h_datepicker.expanded = false;
             return;
           case "Enter":
           case " ":
@@ -2593,8 +2599,8 @@
       }
       if (datepicker) {
         effect(() => {
-          el.setAttribute("data-state", datepicker._datepicker.expanded ? "open" : "closed");
-          if (datepicker._datepicker.expanded) {
+          el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
+          if (datepicker._h_datepicker.expanded) {
             autoUpdateCleanup = autoUpdate(datepicker, el, updatePosition);
             Alpine2.nextTick(() => {
               focusDay();
@@ -2614,7 +2620,7 @@
           dayCells[d].removeEventListener("click", dayClick);
         }
         if (datepicker) {
-          datepicker._datepicker.input.removeEventListener("change", onInputChange);
+          datepicker._h_datepicker.input.removeEventListener("change", onInputChange);
         }
       });
     });
@@ -2699,7 +2705,7 @@
         "has-[input:invalid]:ring-negative/20",
         "relative",
         "rounded-[0.25rem]",
-        "shadow-control",
+        "shadow-input",
         "shrink-0",
         "size-5",
         "transition-color"
@@ -2712,7 +2718,7 @@
   // src/components/collapsible.js
   function collapsible_default(Alpine) {
     Alpine.directive("h-collapsible", (el, { expression }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
-      el._collapsible = Alpine2.reactive({
+      el._h_collapsible = Alpine2.reactive({
         expanded: expression ? evaluate2(expression) : false
       });
       if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible");
@@ -2720,13 +2726,13 @@
         const getExpanded = evaluateLater(expression);
         effect(() => {
           getExpanded((expanded) => {
-            el._collapsible.expanded = expanded;
+            el._h_collapsible.expanded = expanded;
           });
         });
       }
     });
     Alpine.directive("h-collapsible-trigger", (el, { modifiers }, { effect, Alpine: Alpine2, cleanup }) => {
-      const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_collapsible"));
+      const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
       if (!collapsible) {
         throw new Error("h-collapsible-trigger must be inside an h-collapsible element");
       }
@@ -2737,10 +2743,10 @@
         else el.classList.add("[&[data-state=open]>svg:not(:first-child):last-child]:rotate-180", "[&[data-state=open]>svg:only-child]:rotate-180");
       }
       const handler2 = () => {
-        collapsible._collapsible.expanded = !collapsible._collapsible.expanded;
+        collapsible._h_collapsible.expanded = !collapsible._h_collapsible.expanded;
       };
       effect(() => {
-        el.setAttribute("data-state", collapsible._collapsible.expanded ? "open" : "closed");
+        el.setAttribute("data-state", collapsible._h_collapsible.expanded ? "open" : "closed");
       });
       el.addEventListener("click", handler2);
       cleanup(() => {
@@ -2748,14 +2754,14 @@
       });
     });
     Alpine.directive("h-collapsible-content", (el, {}, { effect, Alpine: Alpine2 }) => {
-      const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_collapsible"));
+      const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
       if (!collapsible) {
         throw new Error("h-collapsible-content must be inside an h-collapsible element");
       }
       if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible-content");
-      el.classList.add("data-[state=closed]:hidden");
+      el.classList.add("data-[state=closed]:!hidden");
       effect(() => {
-        el.setAttribute("data-state", collapsible._collapsible.expanded ? "open" : "closed");
+        el.setAttribute("data-state", collapsible._h_collapsible.expanded ? "open" : "closed");
       });
     });
   }
@@ -2763,21 +2769,21 @@
   // src/components/datepicker.js
   function datepicker_default(Alpine) {
     Alpine.directive("h-date-picker", (el, {}, { Alpine: Alpine2 }) => {
-      el._datepicker = Alpine2.reactive({
+      el._h_datepicker = Alpine2.reactive({
         id: void 0,
         controls: `hdpc${v4_default()}`,
         input: void 0,
         expanded: false
       });
-      el._datepicker.input = el.querySelector("input");
-      if (!el._datepicker.input || el._datepicker.input.tagName !== "INPUT") {
+      el._h_datepicker.input = el.querySelector("input");
+      if (!el._h_datepicker.input || el._h_datepicker.input.tagName !== "INPUT") {
         throw new Error("h-date-picker must have an input inside it");
-      } else if (el._datepicker.input.hasAttribute("id")) {
-        el._datepicker.id = el._datepicker.input.getAttribute("id");
+      } else if (el._h_datepicker.input.hasAttribute("id")) {
+        el._h_datepicker.id = el._h_datepicker.input.getAttribute("id");
       } else {
         const id = `hdp${v4_default()}`;
-        el._datepicker.input.setAttribute("id", id);
-        el._datepicker.id = id;
+        el._h_datepicker.input.setAttribute("id", id);
+        el._h_datepicker.id = id;
       }
       el.classList.add(
         "border-input",
@@ -2787,7 +2793,7 @@
         "items-center",
         "rounded-control",
         "border",
-        "shadow-control",
+        "shadow-input",
         "transition-[color,box-shadow]",
         "duration-200",
         "outline-none",
@@ -2807,9 +2813,9 @@
         "dark:has-[input:invalid]:ring-negative/40"
       );
       el.setAttribute("data-slot", "date-picker");
-      el._datepicker.input.classList.add("bg-transparent", "outline-none", "flex-1", "border-0", "focus-visible:ring-0", "disabled:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-50", "md:text-sm", "text-base");
-      el._datepicker.input.setAttribute("aria-autocomplete", "none");
-      el._datepicker.input.setAttribute("type", "text");
+      el._h_datepicker.input.classList.add("bg-transparent", "outline-none", "flex-1", "border-0", "focus-visible:ring-0", "disabled:pointer-events-none", "disabled:cursor-not-allowed", "disabled:opacity-50", "md:text-sm", "text-base");
+      el._h_datepicker.input.setAttribute("aria-autocomplete", "none");
+      el._h_datepicker.input.setAttribute("type", "text");
     });
     Alpine.directive("h-date-picker-trigger", (el, {}, { effect, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "BUTTON") {
@@ -2818,11 +2824,11 @@
       if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
         throw new Error('h-date-picker-trigger: must have an "aria-label" or "aria-labelledby" attribute');
       }
-      const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_datepicker"));
+      const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
       if (!datepicker) {
         throw new Error("h-date-picker-trigger must be inside an h-date-picker element");
       }
-      el.setAttribute("aria-controls", datepicker._datepicker.controls);
+      el.setAttribute("aria-controls", datepicker._h_datepicker.controls);
       el.setAttribute("aria-expanded", "false");
       el.setAttribute("aria-haspopup", "dialog");
       el.setAttribute("type", "button");
@@ -2837,17 +2843,17 @@
         })
       );
       effect(() => {
-        el.setAttribute("data-state", datepicker._datepicker.expanded ? "open" : "closed");
-        el.setAttribute("aria-expanded", datepicker._datepicker.expanded);
+        el.setAttribute("data-state", datepicker._h_datepicker.expanded ? "open" : "closed");
+        el.setAttribute("aria-expanded", datepicker._h_datepicker.expanded);
       });
       const close = () => {
-        datepicker._datepicker.expanded = false;
+        datepicker._h_datepicker.expanded = false;
       };
       const handler2 = () => {
-        datepicker._datepicker.expanded = !datepicker._datepicker.expanded;
-        el.setAttribute("aria-expanded", datepicker._datepicker.expanded);
+        datepicker._h_datepicker.expanded = !datepicker._h_datepicker.expanded;
+        el.setAttribute("aria-expanded", datepicker._h_datepicker.expanded);
         Alpine2.nextTick(() => {
-          if (datepicker._datepicker.expanded) {
+          if (datepicker._h_datepicker.expanded) {
             top.addEventListener("click", close, { once: true });
           } else {
             top.removeEventListener("click", close);
@@ -2869,8 +2875,8 @@
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "dialog-overlay");
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes" && mutation.attributeName === "data-open" && el.getAttribute("data-open") === "true") {
+        mutations.forEach(() => {
+          if (el.getAttribute("data-open") === "true") {
             const inputs = el.getElementsByTagName("INPUT");
             if (inputs.length) {
               for (let i = 0; i < inputs.length; i++) {
@@ -2880,16 +2886,28 @@
                 }
               }
               inputs[0].focus();
+              return;
             } else {
-              const buttons = el.getElementsByTagName("BUTTON");
-              if (buttons.length) {
-                buttons[0].focus();
+              const textareas = el.getElementsByTagName("TEXTAREA");
+              if (textareas.length) {
+                for (let i = 0; i < textareas.length; i++) {
+                  if (textareas[i].autofocus) {
+                    textareas[i].focus();
+                    return;
+                  }
+                }
+                textareas[0].focus();
+                return;
               }
             }
+            const buttons = el.getElementsByTagName("BUTTON");
+            if (buttons.length) {
+              buttons[0].focus();
+            }
           }
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-open"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -2902,7 +2920,8 @@
         "top-[50%]",
         "left-[50%]",
         "z-50",
-        "grid",
+        "flex",
+        "flex-col",
         "w-full",
         "max-w-[calc(100%-2rem)]",
         "translate-x-[-50%]",
@@ -2912,24 +2931,27 @@
         "border",
         "p-4",
         "shadow-xl",
-        "sm:max-w-lg"
+        "sm:max-w-lg",
+        "outline-none"
       );
       el.setAttribute("role", "dialog");
       el.setAttribute("data-slot", "dialog");
-      if (!el.hasAttribute("aria-labelledby")) {
-        console.error('h-dialog: attribute "aria-labelledby" is missing');
-      }
-      if (!el.hasAttribute("aria-describedby")) {
-        console.error('h-dialog: attribute "aria-describedby" is missing');
-      }
     });
     Alpine.directive("h-dialog-header", (el) => {
       el.classList.add("grid", "grid-cols-[1fr_auto]", "place-items-start", "gap-2", "text-center", "sm:text-left");
       el.setAttribute("data-slot", "dialog-header");
     });
-    Alpine.directive("h-dialog-title", (el) => {
+    Alpine.directive("h-dialog-title", (el, {}, { Alpine: Alpine2 }) => {
       el.classList.add("text-lg", "leading-none", "font-semibold");
       el.setAttribute("data-slot", "dialog-title");
+      const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
+      if (dialog && (!dialog.hasAttribute("aria-labelledby") || !dialog.hasAttribute("aria-label"))) {
+        if (!el.hasAttribute("id")) {
+          const id = `dht${v4_default()}`;
+          el.setAttribute("id", id);
+        }
+        dialog.setAttribute("aria-labelledby", el.getAttribute("id"));
+      }
     });
     Alpine.directive("h-dialog-close", (el) => {
       el.classList.add(
@@ -2949,9 +2971,17 @@
       );
       el.setAttribute("data-slot", "dialog-close");
     });
-    Alpine.directive("h-dialog-description", (el) => {
+    Alpine.directive("h-dialog-description", (el, {}, { Alpine: Alpine2 }) => {
       el.classList.add("col-span-full", "text-muted-foreground", "text-sm");
       el.setAttribute("data-slot", "dialog-description");
+      const dialog = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "dialog");
+      if (dialog && (!dialog.hasAttribute("aria-describedby") || !dialog.hasAttribute("aria-description"))) {
+        if (!el.hasAttribute("id")) {
+          const id = `dhd${v4_default()}`;
+          el.setAttribute("id", id);
+        }
+        dialog.setAttribute("aria-describedby", el.getAttribute("id"));
+      }
     });
     Alpine.directive("h-dialog-footer", (el) => {
       el.classList.add("flex", "flex-col-reverse", "gap-2", "sm:flex-row", "sm:justify-end");
@@ -3110,7 +3140,7 @@
         "[&::-webkit-color-swatch-wrapper]:rounded-0",
         "[&::-webkit-color-swatch-wrapper]:p-0",
         "text-base",
-        "shadow-control",
+        "shadow-input",
         "transition-[color,box-shadow]",
         "outline-none",
         "file:inline-flex",
@@ -3129,12 +3159,12 @@
         "aria-invalid:ring-negative/20",
         "dark:aria-invalid:ring-negative/40",
         "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative"
+        "invalid:!ring-negative/20",
+        "dark:invalid:!ring-negative/40",
+        "invalid:!border-negative"
       );
       if (modifiers.includes("group")) {
-        el.classList.remove("rounded-control", "border", "bg-input-inner", "shadow-control", "focus-visible:ring-[3px]");
+        el.classList.remove("rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[3px]");
         el.classList.add("flex-1", "rounded-none", "border-0", "bg-transparent", "shadow-none", "focus-visible:ring-0");
         el.setAttribute("data-slot", "input-group-control");
       } else el.setAttribute("data-slot", "input");
@@ -3153,7 +3183,7 @@
         "items-center",
         "rounded-control",
         "border",
-        "shadow-control",
+        "shadow-input",
         "transition-[color,box-shadow]",
         "outline-none",
         "h-9",
@@ -3272,7 +3302,7 @@
         "border-input",
         "border",
         "rounded-control",
-        "shadow-control",
+        "shadow-input",
         "outline-none",
         "disabled:pointer-events-none",
         "disabled:cursor-not-allowed",
@@ -3283,9 +3313,9 @@
         "aria-invalid:ring-negative/20",
         "dark:aria-invalid:ring-negative/40",
         "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative",
+        "invalid:!ring-negative/20",
+        "dark:invalid:!ring-negative/40",
+        "invalid:!border-negative",
         "[&>ul:first-child>*:first-child]:rounded-t-control",
         "[&>ul:last-child>*:last-child]:rounded-b-control"
       );
@@ -3371,13 +3401,11 @@
       if (!list) {
         throw new Error("h-list-header: must be placed inside an h-list element");
       }
-      if (el.hasAttribute("id")) {
-        list.setAttribute("aria-labelledby", el.getAttribute("id"));
-      } else {
+      if (!el.hasAttribute("id")) {
         const id = `lbh${v4_default()}`;
         el.setAttribute("id", id);
-        list.setAttribute("aria-labelledby", id);
       }
+      list.setAttribute("aria-labelledby", el.getAttribute("id"));
     });
     Alpine.directive("h-list-item", (el, { modifiers }) => {
       el.classList.add("min-h-11", "flex", "items-center", "p-2", "gap-2", "align-middle", "outline-none");
@@ -3653,7 +3681,9 @@
     Alpine.directive("h-menu-item", (el, {}, { cleanup, Alpine: Alpine2 }) => {
       el.classList.add(
         "focus:bg-secondary-hover",
+        "focus:text-secondary-foreground",
         "hover:bg-secondary-hover",
+        "hover:text-secondary-foreground",
         "data-[variant=negative]:text-negative",
         "data-[variant=negative]:focus:bg-negative/10",
         "data-[variant=negative]:hover:bg-negative/10",
@@ -3769,6 +3799,7 @@
             Alpine2.nextTick(() => {
               submenuitem.focus();
               el._menu_sub.expanded = true;
+              el.setAttribute("aria-expanded", true);
             });
           }
         }
@@ -3778,28 +3809,33 @@
         if (event.type === "mouseleave") {
           el._menu_sub.close();
           el._menu_sub.expanded = false;
+          el.setAttribute("aria-expanded", false);
           parentMenu.pauseKeyEvents = false;
-          el.setAttribute("aria-expanded", "false");
           parentMenu.focus();
         } else if (el._menu_sub.expanded) {
-          el.setAttribute("aria-expanded", "false");
           el._menu_sub.close();
           el._menu_sub.expanded = false;
+          el.setAttribute("aria-expanded", false);
           parentMenu.pauseKeyEvents = false;
           el.removeEventListener("keydown", onKeydown);
         }
       }
       function focusIn(event) {
         el.setAttribute("tabindex", "0");
-        if (event.type === "mouseenter") {
-          el.setAttribute("aria-expanded", "true");
+        if (event.type === "click" && event.pointerType === "touch" && (event.target === el || event.target.parentElement === el)) {
+          el._menu_sub.open(el);
+          el._menu_sub.expanded = true;
+          el.setAttribute("aria-expanded", true);
+          event.stopPropagation();
+        } else if (event.type === "mouseenter") {
           el.addEventListener("mouseleave", focusOut);
           el._menu_sub.open(el);
           el._menu_sub.expanded = true;
+          el.setAttribute("aria-expanded", true);
         } else {
           if (el._menu_sub.expanded) {
-            el.setAttribute("aria-expanded", "false");
             el._menu_sub.expanded = false;
+            el.setAttribute("aria-expanded", false);
             parentMenu.pauseKeyEvents = false;
           }
           el.addEventListener("keydown", onKeydown);
@@ -3807,9 +3843,11 @@
         }
       }
       el.addEventListener("mouseenter", focusIn);
+      el.addEventListener("click", focusIn);
       el.addEventListener("focus", focusIn);
       cleanup(() => {
         el.removeEventListener("mouseenter", focusIn);
+        el.removeEventListener("click", focusIn);
         el.removeEventListener("focus", focusIn);
         el.removeEventListener("blur", focusOut);
         el.removeEventListener("mouseleave", focusOut);
@@ -4269,7 +4307,7 @@
         "has-[input:invalid]:ring-negative/20",
         "relative",
         "rounded-full",
-        "shadow-control",
+        "shadow-input",
         "shrink-0",
         "size-5"
       );
@@ -6165,7 +6203,7 @@
   });
   function select_default(Alpine) {
     Alpine.directive("h-select", (el, {}, { Alpine: Alpine2 }) => {
-      el._select = Alpine2.reactive({
+      el._h_select = Alpine2.reactive({
         id: void 0,
         controls: `hsc${v4_default()}`,
         expanded: false,
@@ -6173,22 +6211,41 @@
         multiple: false,
         label: [],
         search: "",
+        focusSearch: void 0,
         filterType: FilterType["starts-with"]
       });
       el.setAttribute("data-slot", "select");
     });
     Alpine.directive("h-select-trigger", (el, {}, { effect, cleanup, Alpine: Alpine2 }) => {
-      const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_select"));
+      const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
       if (!select) {
         throw new Error("h-select-trigger must be inside an h-select element");
       } else if (el.hasOwnProperty("_x_model")) {
-        select._select.multiple = Array.isArray(el._x_model.get());
-        select._select.model = el._x_model.get();
+        select._h_select.multiple = Array.isArray(el._x_model.get());
+        select._h_select.model = el._x_model.get();
       }
+      setButtonClasses(el);
+      const setVariant = (variant) => {
+        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("pointer-events-none");
+      selectValue.classList.add("text-left", "truncate", "pointer-events-none", "w-full");
       function getPlaceholder() {
         if (!el.value) {
           const value = el.getAttribute("placeholder");
@@ -6203,100 +6260,41 @@
       getPlaceholder();
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
-          if (mutation.type === "attributes") {
-            if (mutation.attributeName === "value") {
-              el.dispatchEvent(new Event("change", { bubbles: true }));
-              if (el.value) selectValue.classList.remove("text-muted-foreground");
-            } else if (mutation.attributeName === "placeholder" && !select._select.label.length) {
-              getPlaceholder();
-            }
+          if (mutation.attributeName === "value") {
+            el.dispatchEvent(new Event("change", { bubbles: true }));
+            if (el.value) selectValue.classList.remove("text-muted-foreground");
+          } else if (mutation.attributeName === "placeholder" && !select._h_select.label.length) {
+            getPlaceholder();
           }
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["value", "placeholder"] });
       effect(() => {
-        if (select._select.label.length === 1) {
-          selectValue.innerText = select._select.label[0];
-        } else if (select._select.label.length > 1) {
-          selectValue.innerText = select._select.label.join(", ");
+        if (select._h_select.label.length === 1) {
+          selectValue.innerText = select._h_select.label[0];
+        } else if (select._h_select.label.length > 1) {
+          selectValue.innerText = select._h_select.label.join(", ");
         } else {
           getPlaceholder();
         }
       });
-      el.classList.add(
-        "[&>*]:pointer-events-none",
-        "cursor-pointer",
-        "border-input",
-        "focus-visible:border-ring",
-        "focus-visible:ring-ring/50",
-        "aria-invalid:ring-negative/20",
-        "dark:aria-invalid:ring-negative/40",
-        "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative",
-        "hover:bg-secondary-hover",
-        "active:bg-secondary-active",
-        "flex",
-        "w-full",
-        "items-center",
-        "justify-between",
-        "gap-2",
-        "rounded-control",
-        "border",
-        "bg-input-inner",
-        "px-3",
-        "text-sm",
-        "whitespace-nowrap",
-        "shadow-control",
-        "transition-[color,box-shadow]",
-        "outline-none",
-        "focus-visible:ring-[3px]",
-        "disabled:cursor-not-allowed",
-        "disabled:opacity-50",
-        "*:data-[slot=select-value]:line-clamp-1",
-        "*:data-[slot=select-value]:flex",
-        "*:data-[slot=select-value]:items-center",
-        "*:data-[slot=select-value]:gap-2",
-        "[&_svg]:pointer-events-none",
-        "[&_svg]:shrink-0",
-        "[&_svg:not([class*='size-'])]:size-4",
-        "[&_svg]:size-4",
-        "[&_svg]:opacity-50",
-        "[&[data-state=open]>svg]:rotate-180"
-      );
       el.setAttribute("data-slot", "select-trigger");
       if (el.hasAttribute("id")) {
-        select._select.id = el.getAttribute("id");
+        select._h_select.id = el.getAttribute("id");
       } else {
-        select._select.id = `hs${v4_default()}`;
-        el.setAttribute("id", select._select.id);
+        select._h_select.id = `hs${v4_default()}`;
+        el.setAttribute("id", select._h_select.id);
       }
-      el.setAttribute("aria-controls", select._select.controls);
+      el.setAttribute("aria-controls", select._h_select.controls);
       el.setAttribute("aria-haspopup", "listbox");
       el.setAttribute("aria-autocomplete", "none");
       el.setAttribute("role", "combobox");
-      const sizes = {
-        default: ["h-9", "py-2"],
-        xs: ["h-6.5", "py-[0.188rem]"],
-        sm: ["h-8", "py-1.5"]
-      };
-      function setSize(size3) {
-        for (const [_, value] of Object.entries(sizes)) {
-          el.classList.remove(...value);
-        }
-        if (sizes.hasOwnProperty(size3)) {
-          el.classList.add(...sizes[size3]);
-        }
-      }
-      if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "default");
-      setSize(el.getAttribute("data-size"));
       effect(() => {
-        el.setAttribute("data-state", select._select.expanded ? "open" : "closed");
-        el.setAttribute("aria-expanded", select._select.expanded);
+        el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
+        el.setAttribute("aria-expanded", select._h_select.expanded);
       });
       const close = () => {
-        select._select.expanded = false;
+        select._h_select.expanded = false;
       };
       let content;
       let options;
@@ -6304,26 +6302,72 @@
         switch (event.key) {
           case "Down":
           case "ArrowDown":
+            event.preventDefault();
+            let nextIndex = 0;
             for (let o = 0; o < options.length; o++) {
-              if (options[o] === document.activeElement) {
-                if (o < options.length - 1) {
-                  options[o + 1].focus();
-                } else options[0].focus();
-                return;
+              if (options[o].getAttribute("tabindex") === "0") {
+                options[o].setAttribute("tabindex", "-1");
+                if (o < options.length - 1) nextIndex = o + 1;
+                break;
               }
             }
-            options[0].focus();
+            if (options[nextIndex].getAttribute("data-disabled") === "true") {
+              if (nextIndex === options.length - 1) nextIndex = 0;
+              for (let o = nextIndex; o < options.length; o++) {
+                if (options[o].getAttribute("data-disabled") !== "true") {
+                  nextIndex = o;
+                  break;
+                }
+              }
+            }
+            options[nextIndex].setAttribute("tabindex", "0");
+            options[nextIndex].focus();
             break;
           case "Up":
           case "ArrowUp":
+            event.preventDefault();
+            let prevIndex = options.length - 1;
             for (let o = options.length - 1; o >= 0; o--) {
-              if (options[o] === document.activeElement) {
-                if (o !== 0) {
-                  options[o - 1].focus();
-                } else options[options.length - 1].focus();
-                return;
+              if (options[o].getAttribute("tabindex") === "0") {
+                options[o].setAttribute("tabindex", "-1");
+                if (o !== 0) prevIndex = o - 1;
+                break;
+              }
+            }
+            if (options[prevIndex].getAttribute("data-disabled") === "true") {
+              if (prevIndex === 0) prevIndex = options.length - 1;
+              for (let o = prevIndex; o >= 0; o--) {
+                if (options[o].getAttribute("data-disabled") !== "true") {
+                  prevIndex = o;
+                  break;
+                }
               }
             }
+            options[prevIndex].setAttribute("tabindex", "0");
+            options[prevIndex].focus();
+            break;
+          case "Home":
+          case "PageUp":
+            event.preventDefault();
+            for (let o = 0; o < options.length; o++) {
+              if (options[o].getAttribute("tabindex") === "0") {
+                options[o].setAttribute("tabindex", "-1");
+                break;
+              }
+            }
+            options[0].setAttribute("tabindex", "0");
+            options[0].focus();
+            break;
+          case "End":
+          case "PageDown":
+            event.preventDefault();
+            for (let o = 0; o < options.length; o++) {
+              if (options[o].getAttribute("tabindex") === "0") {
+                options[o].setAttribute("tabindex", "-1");
+                break;
+              }
+            }
+            options[options.length - 1].setAttribute("tabindex", "0");
             options[options.length - 1].focus();
             break;
           case "Enter":
@@ -6334,16 +6378,30 @@
           case "Tab":
             handler2();
             break;
+          case "Control":
+          case "Shift":
+          case "Alt":
+            break;
+          default:
+            if (select._h_select.focusSearch) {
+              for (let o = 0; o < options.length; o++) {
+                if (options[o].getAttribute("tabindex") === "0") {
+                  options[o].setAttribute("tabindex", "-1");
+                  break;
+                }
+              }
+              select._h_select.focusSearch();
+            }
         }
       };
       const handler2 = () => {
-        select._select.expanded = !select._select.expanded;
-        if (select._select.expanded) {
-          if (!content) content = select.querySelector(`#${select._select.controls}`);
+        select._h_select.expanded = !select._h_select.expanded;
+        if (select._h_select.expanded) {
+          if (!content) content = select.querySelector(`#${select._h_select.controls}`);
           options = content.querySelectorAll("[role=option]");
         }
         Alpine2.nextTick(() => {
-          if (select._select.expanded) {
+          if (select._h_select.expanded) {
             top.addEventListener("click", close, { once: true });
             el.parentElement.addEventListener("keydown", shiftFocus);
           } else {
@@ -6371,19 +6429,19 @@
       });
     });
     Alpine.directive("h-select-content", (el, {}, { effect, Alpine: Alpine2 }) => {
-      const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_select"));
+      const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
       if (!select) {
         throw new Error("h-select-content must be inside an h-select element");
       }
-      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-control", "border", "shadow-md");
+      el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "p-1", "top-0", "left-0", "z-50", "min-w-[1rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "border", "shadow-md");
       el.setAttribute("data-slot", "select-content");
       el.setAttribute("role", "listbox");
       el.setAttribute("role", "presentation");
-      el.setAttribute("id", select._select.controls);
+      el.setAttribute("id", select._h_select.controls);
       el.setAttribute("tabindex", "-1");
-      el.setAttribute("aria-labelledby", select._select.id);
-      el.setAttribute("data-state", select._select.expanded ? "open" : "closed");
-      const control = select.querySelector(`#${select._select.id}`);
+      el.setAttribute("aria-labelledby", select._h_select.id);
+      el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
+      const control = select.querySelector(`#${select._h_select.id}`);
       if (!control) {
         throw new Error("h-select-content: trigger not found");
       }
@@ -6412,8 +6470,8 @@
         });
       }
       effect(() => {
-        el.setAttribute("data-state", select._select.expanded ? "open" : "closed");
-        if (select._select.expanded) {
+        el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
+        if (select._h_select.expanded) {
           autoUpdateCleanup = autoUpdate(control, el, updatePosition);
         } else {
           if (autoUpdateCleanup) autoUpdateCleanup();
@@ -6425,14 +6483,16 @@
       });
     });
     Alpine.directive("h-select-search", (el, { modifiers }, { effect, cleanup }) => {
-      const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_select"));
+      const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
       if (!select) {
         throw new Error("h-select-search must be inside an h-select element");
-      } else select._select.filterType = FilterType[modifiers[0]] ?? FilterType["starts-with"];
+      } else {
+        select._h_select.filterType = FilterType[modifiers[0]] ?? FilterType["starts-with"];
+      }
       el.classList.add("flex", "h-8", "items-center", "gap-2", "border-b", "px-2");
       el.setAttribute("data-slot", "select-search");
-      el.setAttribute("aria-autocomplete", select._select.filterType === FilterType.none ? "both" : "list");
-      el.setAttribute("aria-controls", select._select.controls);
+      el.setAttribute("aria-autocomplete", select._h_select.filterType === FilterType.none ? "both" : "list");
+      el.setAttribute("aria-controls", select._h_select.controls);
       el.setAttribute("aria-haspopup", "listbox");
       el.setAttribute("role", "combobox");
       el.setAttribute("autocomplete", "off");
@@ -6445,69 +6505,72 @@
       searchInput.classList.add("placeholder:text-muted-foreground", "flex", "h-10", "w-full", "rounded-md", "bg-transparent", "py-3", "text-sm", "outline-hidden", "disabled:cursor-not-allowed", "disabled:opacity-50");
       el.appendChild(searchIcon);
       el.appendChild(searchInput);
+      select._h_select.focusSearch = () => {
+        searchInput.focus();
+      };
       function handler2(event) {
-        if (event.type === "keydown" && event.key === "Escape") return;
+        if (event.type === "keydown" && (event.key === "Escape" || event.key === "ArrowDown" || event.key === "Down")) return;
         event.stopPropagation();
       }
       el.addEventListener("click", handler2);
       el.addEventListener("keydown", handler2);
-      if (select._select.filterType !== FilterType.none) {
+      if (select._h_select.filterType !== FilterType.none) {
         let onInput2 = function() {
-          select._select.search = searchInput.value.toLowerCase();
+          select._h_select.search = searchInput.value.toLowerCase();
         };
         searchInput.addEventListener("keyup", onInput2);
       }
       effect(() => {
-        if (select._select.expanded) searchInput.focus({ preventScroll: true });
-        el.setAttribute("aria-expanded", select._select.expanded);
+        if (select._h_select.expanded) searchInput.focus({ preventScroll: true });
+        el.setAttribute("aria-expanded", select._h_select.expanded);
       });
       cleanup(() => {
         el.removeEventListener("click", handler2);
         el.removeEventListener("keydown", handler2);
-        if (select._select.filterType !== FilterType.none) searchInput.removeEventListener("keyup", onInput);
+        if (select._h_select.filterType !== FilterType.none) searchInput.removeEventListener("keyup", onInput);
       });
     });
     Alpine.directive("h-select-group", (el, {}, { effect }) => {
       el.setAttribute("data-slot", "select-group");
-      el._selectGroup = Alpine.reactive({
+      el._h_selectGroup = Alpine.reactive({
         labelledby: void 0
       });
       effect(() => {
-        if (el._selectGroup.labelledby) {
-          el.setAttribute("aria-labelledby", el._selectGroup.labelledby);
+        if (el._h_selectGroup.labelledby) {
+          el.setAttribute("aria-labelledby", el._h_selectGroup.labelledby);
         }
       });
     });
     Alpine.directive("h-select-label", (el) => {
       el.classList.add("text-muted-foreground", "px-2", "py-1.5", "text-xs");
       el.setAttribute("data-slot", "select-label");
-      const selectGroup = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_selectGroup"));
+      const selectGroup = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_selectGroup"));
       if (selectGroup) {
         const id = `hsl${v4_default()}`;
         el.setAttribute("id", id);
-        selectGroup._selectGroup.labelledby = id;
+        selectGroup._h_selectGroup.labelledby = id;
       }
     });
     Alpine.directive("h-select-option", (el, { expression }, { effect, evaluateLater, cleanup }) => {
-      const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_select"));
+      const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
       if (!select) {
         throw new Error("h-select-option must be inside an h-select element");
       }
       el.classList.add(
         "focus:bg-primary",
         "focus:text-primary-foreground",
-        "hover:bg-primary",
-        "hover:text-primary-foreground",
+        "hover:bg-secondary-hover",
+        "hover:text-secondary-foreground",
         "[&_svg:not([class*='text-'])]:text-muted-foreground",
         "focus:[&_svg:not([class*='text-'])]:text-primary-foreground",
-        "hover:[&_svg:not([class*='text-'])]:text-primary-foreground",
+        "hover:[&_svg:not([class*='text-'])]:text-secondary-foreground",
         "relative",
         "flex",
         "w-full",
         "cursor-default",
         "items-center",
         "gap-2",
-        "rounded-control",
+        "rounded-sm",
         "py-1.5",
         "pr-8",
         "pl-2",
@@ -6544,26 +6607,26 @@
       const getLabel = evaluateLater(expression);
       effect(() => {
         getLabel((label) => {
-          if (select._select.multiple && select._select.model.includes(getValue())) {
-            select._select.label[select._select.label.indexOf(labelEl.innerText)] = label;
-          } else if (select._select.model === getValue()) {
-            select._select.label[0] = label;
+          if (select._h_select.multiple && select._h_select.model.includes(getValue())) {
+            select._h_select.label[select._h_select.label.indexOf(labelEl.innerText)] = label;
+          } else if (select._h_select.model === getValue()) {
+            select._h_select.label[0] = label;
           }
           labelEl.innerText = label;
         });
       });
       effect(() => {
-        if (select._select.search) {
-          if (select._select.filterType === FilterType["starts-with"]) {
-            if (!labelEl.innerText.toLowerCase().startsWith(select._select.search)) {
+        if (select._h_select.search) {
+          if (select._h_select.filterType === FilterType["starts-with"]) {
+            if (!labelEl.innerText.toLowerCase().startsWith(select._h_select.search)) {
               el.classList.add("hidden");
             } else el.classList.remove("hidden");
-          } else if (select._select.filterType === FilterType.contains) {
-            if (!labelEl.innerText.toLowerCase().includes(select._select.search)) {
+          } else if (select._h_select.filterType === FilterType.contains) {
+            if (!labelEl.innerText.toLowerCase().includes(select._h_select.search)) {
               el.classList.add("hidden");
             } else el.classList.remove("hidden");
-          } else if (select._select.filterType === FilterType["contains-each"]) {
-            const terms = select._select.search.split(" ");
+          } else if (select._h_select.filterType === FilterType["contains-each"]) {
+            const terms = select._h_select.search.split(" ");
             const label = labelEl.innerText.toLowerCase();
             if (!terms.every((term) => label.includes(term))) el.classList.add("hidden");
             else el.classList.remove("hidden");
@@ -6576,11 +6639,11 @@
         if (selected) {
           indicatorEl.classList.remove("invisible");
           el.setAttribute("aria-selected", "true");
-          if (!select._select.label.length) {
-            select._select.label.push(labelEl.innerText);
-          } else if (!select._select.label.includes(labelEl.innerText)) {
-            if (select._select.multiple) select._select.label.push(labelEl.innerText);
-            else select._select.label[0] = labelEl.innerText;
+          if (!select._h_select.label.length) {
+            select._h_select.label.push(labelEl.innerText);
+          } else if (!select._h_select.label.includes(labelEl.innerText)) {
+            if (select._h_select.multiple) select._h_select.label.push(labelEl.innerText);
+            else select._h_select.label[0] = labelEl.innerText;
           }
         } else {
           indicatorEl.classList.add("invisible");
@@ -6588,30 +6651,30 @@
         }
       }
       function removeLabel() {
-        const lIndex = select._select.label.indexOf(labelEl.innerText);
-        if (lIndex > -1) select._select.label.splice(lIndex, 1);
+        const lIndex = select._h_select.label.indexOf(labelEl.innerText);
+        if (lIndex > -1) select._h_select.label.splice(lIndex, 1);
       }
       effect(() => {
-        if (select._select.multiple) {
-          setSelectedState(select._select.model.includes(getValue()));
+        if (select._h_select.multiple) {
+          setSelectedState(select._h_select.model.includes(getValue()));
         } else {
-          setSelectedState(select._select.model === getValue());
+          setSelectedState(select._h_select.model === getValue());
         }
       });
       const handler2 = (event) => {
         if (event.type === "keydown" && event.key === "Enter" || event.type === "click") {
-          if (select._select.multiple) {
-            const vIndex = select._select.model.indexOf(getValue());
+          if (select._h_select.multiple) {
+            const vIndex = select._h_select.model.indexOf(getValue());
             if (vIndex > -1) {
-              select._select.model.splice(vIndex, 1);
+              select._h_select.model.splice(vIndex, 1);
               removeLabel();
             } else {
-              select._select.model.push(getValue());
+              select._h_select.model.push(getValue());
             }
-          } else if (select._select.model !== getValue()) {
-            select._select.model = getValue();
+          } else if (select._h_select.model !== getValue()) {
+            select._h_select.model = getValue();
           } else {
-            select._select.model = "";
+            select._h_select.model = "";
             removeLabel();
           }
         }
@@ -6651,6 +6714,61 @@
     });
   }
 
+  // src/components/sheet.js
+  function sheet_default(Alpine) {
+    Alpine.directive("h-sheet-overlay", (el, { expression }, { effect, evaluate: evaluate2, evaluateLater, cleanup }) => {
+      el.classList.add("data-[open=false]:hidden", "fixed", "inset-0", "z-50", "bg-black/50");
+      el.setAttribute("tabindex", "-1");
+      el.setAttribute("data-slot", "sheet-overlay");
+      el.setAttribute("data-open", evaluate2(expression));
+      const getIsOpen = evaluateLater(expression);
+      effect(() => {
+        getIsOpen((isOpen) => {
+          el.setAttribute("data-open", isOpen);
+        });
+      });
+      const onClick = (event) => {
+        if (event.target.getAttribute("data-slot") === "sheet-overlay") {
+          evaluate2(`${expression} = false`);
+        }
+      };
+      el.addEventListener("click", onClick);
+      cleanup(() => {
+        el.removeEventListener("click", onClick);
+      });
+    });
+    Alpine.directive("h-sheet", (el, {}, { cleanup }) => {
+      el.classList.add("bg-background", "fixed", "shadow-lg");
+      el.setAttribute("data-slot", "sheet");
+      let lastSide;
+      const getSideClasses = (side) => {
+        switch (side) {
+          case "top":
+            return ["inset-x-0", "top-0", "h-auto"];
+          case "right":
+            return ["inset-y-0", "right-0", "h-full", "w-auto", "sm:max-w-sm"];
+          case "left":
+            return ["inset-y-0", "left-0", "h-full", "w-auto", "sm:max-w-sm"];
+          default:
+            return ["inset-x-0", "bottom-0", "h-auto"];
+        }
+      };
+      const setSide = (side) => {
+        el.classList.remove(...getSideClasses(lastSide));
+        el.classList.add(...getSideClasses(side));
+        lastSide = side;
+      };
+      const observer = new MutationObserver(() => {
+        setSide(el.getAttribute("data-align"));
+      });
+      setSide(el.getAttribute("data-align"));
+      observer.observe(el, { attributes: true, attributeFilter: ["data-align"] });
+      cleanup(() => {
+        observer.disconnect();
+      });
+    });
+  }
+
   // src/components/sidebar.js
   function sidebar_default(Alpine) {
     Alpine.directive("h-sidebar", (el, { modifiers }, { cleanup }) => {
@@ -6667,15 +6785,11 @@
       };
       setFloating();
       const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.type === "attributes") {
-            if (mutation.attributeName === "data-floating") {
-              setFloating();
-            }
-          }
+        mutations.forEach(() => {
+          setFloating();
         });
       });
-      observer.observe(el, { attributes: true });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-floating"] });
       cleanup(() => {
         observer.disconnect();
       });
@@ -6962,10 +7076,21 @@
       el.classList.add("bg-secondary", "animate-pulse");
       if (modifiers.includes("control")) {
         el.classList.add("rounded-control");
+        switch (el.getAttribute("data-size")) {
+          case "xs":
+            el.classList.add("h-6.5");
+            break;
+          case "sm":
+            el.classList.add("h-8");
+            break;
+          default:
+            el.classList.add("h-9");
+            break;
+        }
       } else if (modifiers.includes("card")) {
         el.classList.add("rounded-lg");
       } else if (modifiers.includes("avatar")) {
-        el.classList.add("rounded-full", "size-8");
+        el.classList.add("rounded-full", "size-8", "aspect-square");
       } else el.classList.add("rounded-md");
       el.setAttribute("data-slot", "skeleton");
     });
@@ -7005,7 +7130,7 @@
         "before:pointer-events-none",
         "before:ring-0",
         "before:rounded-full",
-        "before:shadow-control",
+        "before:shadow-input",
         "before:size-5",
         "before:transition-transform",
         "bg-muted",
@@ -7037,7 +7162,7 @@
   function table_default(Alpine) {
     Alpine.directive("h-table-container", (el, { modifiers }) => {
       if (modifiers.includes("scroll")) {
-        el.classList.add("overflow-scroll", "[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-10", "[&_tfoot]:sticky", "[&_tfoot]:bottom-0", "[&_tfoot]:z-10", "[&_tbody_tr_th]:sticky", "[&_tbody_tr_th]:left-0", "[&_tbody_tr_th]:z-5");
+        el.classList.add("overflow-scroll", "[&_thead]:sticky", "[&_thead]:top-0", "[&_thead]:z-2", "[&_tfoot]:sticky", "[&_tfoot]:bottom-0", "[&_tfoot]:z-2", "[&_tbody_tr_th]:sticky", "[&_tbody_tr_th]:left-0", "[&_tbody_tr_th]:z-1");
       } else {
         el.classList.add("relative", "w-full", "overflow-x-auto");
       }
@@ -7158,6 +7283,7 @@
         "[&:not([data-floating=true])]:data-[size=lg]:group-data-[orientation=horizontal]/tabs:min-h-12",
         "data-[floating=true]:border",
         "data-[floating=true]:shadow-xs",
+        "data-[floating=true]:z-1",
         "data-[floating=true]:rounded-lg",
         "data-[floating=true]:p-[0.188rem]"
       );
@@ -7328,8 +7454,11 @@
         case "blockquote":
           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");
+          break;
         case "code":
-          el.classList.add("bg-muted", "relative", "rounded", "px-[0.3rem]", "py-[0.2rem]", "font-mono", "text-sm", "font-semibold");
+          el.classList.add("bg-muted", "relative", "rounded", "p-3", "font-mono", "text-sm", "font-semibold", "whitespace-pre");
           break;
         case "lead":
           el.classList.add("text-muted-foreground", "text-xl");
@@ -7363,9 +7492,9 @@
         "aria-invalid:ring-negative/20",
         "dark:aria-invalid:ring-negative/40",
         "aria-invalid:border-negative",
-        "invalid:ring-negative/20",
-        "dark:invalid:ring-negative/40",
-        "invalid:border-negative",
+        "invalid:!ring-negative/20",
+        "dark:invalid:!ring-negative/40",
+        "invalid:!border-negative",
         "bg-input-inner",
         "flex",
         "field-sizing-content",
@@ -7376,7 +7505,7 @@
         "px-3",
         "py-2",
         "text-base",
-        "shadow-control",
+        "shadow-input",
         "transition-[color,box-shadow]",
         "outline-none",
         "focus-visible:ring-[3px]",
@@ -7385,7 +7514,7 @@
         "md:text-sm"
       );
       if (modifiers.includes("group")) {
-        el.classList.remove("rounded-control", "border", "bg-input-inner", "py-2", "shadow-control", "focus-visible:ring-[3px]");
+        el.classList.remove("rounded-control", "border", "bg-input-inner", "py-2", "shadow-input", "focus-visible:ring-[3px]");
         el.classList.add("flex-1", "resize-none", "rounded-none", "border-0", "bg-transparent", "py-3", "shadow-none", "focus-visible:ring-0");
         el.setAttribute("data-slot", "input-group-control");
       } else el.setAttribute("data-slot", "textarea");
@@ -7525,7 +7654,7 @@
   };
   function timepicker_default(Alpine) {
     Alpine.directive("h-time-picker", (el, { expression }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
-      el._timepicker = Alpine2.reactive({
+      el._h_timepicker = Alpine2.reactive({
         id: void 0,
         controls: `htpc${v4_default()}`,
         model: void 0,
@@ -7534,8 +7663,8 @@
         locale: void 0,
         seconds: void 0,
         close() {
-          el._timepicker.expanded = false;
-          top.removeEventListener("click", el._timepicker.close);
+          el._h_timepicker.expanded = false;
+          top.removeEventListener("click", el._h_timepicker.close);
         }
       });
       el._time = {
@@ -7575,7 +7704,7 @@
         "pr-2",
         "text-sm",
         "whitespace-nowrap",
-        "shadow-control",
+        "shadow-input",
         "transition-[color,box-shadow]",
         "duration-200",
         "outline-none",
@@ -7602,28 +7731,28 @@
         effect(() => {
           getConfig((config) => {
             if (config) {
-              if (config["locale"]) el._timepicker.locale = config.locale;
-              el._timepicker.seconds = config["seconds"];
+              if (config["locale"]) el._h_timepicker.locale = config.locale;
+              el._h_timepicker.seconds = config["seconds"];
               if (config["is12Hour"] !== void 0) {
-                el._timepicker.is12Hour = config.is12Hour;
+                el._h_timepicker.is12Hour = config.is12Hour;
               } else {
-                el._timepicker.is12Hour = new Intl.DateTimeFormat(el._timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
+                el._h_timepicker.is12Hour = new Intl.DateTimeFormat(el._h_timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
               }
             }
           });
         });
       } else {
-        el._timepicker.is12Hour = new Intl.DateTimeFormat(el._timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
+        el._h_timepicker.is12Hour = new Intl.DateTimeFormat(el._h_timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
       }
       const handler2 = (event) => {
         if (event.type === "keydown" && event.key !== "Enter") return;
-        el._timepicker.expanded = !el._timepicker.expanded;
-        el.setAttribute("aria-expanded", el._timepicker.expanded);
+        el._h_timepicker.expanded = !el._h_timepicker.expanded;
+        el.setAttribute("aria-expanded", el._h_timepicker.expanded);
         Alpine2.nextTick(() => {
-          if (el._timepicker.expanded) {
-            top.addEventListener("click", el._timepicker.close);
+          if (el._h_timepicker.expanded) {
+            top.addEventListener("click", el._h_timepicker.close);
           } else {
-            top.removeEventListener("click", el._timepicker.close);
+            top.removeEventListener("click", el._h_timepicker.close);
           }
         });
       };
@@ -7632,14 +7761,14 @@
       cleanup(() => {
         el.removeEventListener("click", handler2);
         el.removeEventListener("keydown", handler2);
-        top.removeEventListener("click", el._timepicker.close);
+        top.removeEventListener("click", el._h_timepicker.close);
       });
     });
     Alpine.directive("h-time-picker-input", (el, {}, { effect, Alpine: Alpine2 }) => {
       if (el.tagName !== "INPUT") {
         throw new Error("h-time-picker-input must be a readonly input of type text");
       }
-      const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_timepicker"));
+      const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
       if (!timepicker) {
         throw new Error("h-time-picker-input must be inside an h-time-picker element");
       }
@@ -7649,9 +7778,9 @@
         });
       };
       if (el.hasOwnProperty("_x_model")) {
-        timepicker._timepicker.model = el._x_model;
+        timepicker._h_timepicker.model = el._x_model;
       } else {
-        timepicker._timepicker.model = {
+        timepicker._h_timepicker.model = {
           get() {
             return el.value;
           },
@@ -7661,62 +7790,62 @@
         };
       }
       if (el.hasAttribute("id")) {
-        timepicker._timepicker.id = el.getAttribute("id");
+        timepicker._h_timepicker.id = el.getAttribute("id");
       } else {
-        timepicker._timepicker.id = `htp${v4_default()}`;
-        el.setAttribute("id", timepicker._timepicker.id);
+        timepicker._h_timepicker.id = `htp${v4_default()}`;
+        el.setAttribute("id", timepicker._h_timepicker.id);
       }
       el.classList.add("cursor-pointer", "bg-transparent", "outline-none", "flex-1", "h-full", "border-0", "focus-visible:ring-0", "md:text-sm", "text-base", "after:block", "after:w-1");
       el.readOnly = true;
       el.setAttribute("aria-autocomplete", "none");
-      el.setAttribute("aria-controls", timepicker._timepicker.controls);
+      el.setAttribute("aria-controls", timepicker._h_timepicker.controls);
       el.setAttribute("aria-expanded", "false");
       el.setAttribute("aria-haspopup", "dialog");
       el.setAttribute("type", "text");
       el.setAttribute("data-slot", "time-picker-input");
-      const rawTime = timepicker._timepicker.model.get();
+      const rawTime = timepicker._h_timepicker.model.get();
       if (rawTime) {
-        const { hour, minute, second, period } = getSelectedTime(rawTime, timepicker._timepicker.is12Hour);
-        if (timepicker._timepicker.seconds === void 0 && !second) {
-          timepicker._timepicker.seconds = false;
-        } else if (timepicker._timepicker.seconds === void 0 && second) {
-          timepicker._timepicker.seconds = true;
-        }
-        if (timepicker._timepicker.is12Hour) {
-          if (timepicker._timepicker.seconds) {
-            timepicker._timepicker.model.set(`${hour}:${minute}:${second ?? "00"} ${period}`);
+        const { hour, minute, second, period } = getSelectedTime(rawTime, timepicker._h_timepicker.is12Hour);
+        if (timepicker._h_timepicker.seconds === void 0 && !second) {
+          timepicker._h_timepicker.seconds = false;
+        } else if (timepicker._h_timepicker.seconds === void 0 && second) {
+          timepicker._h_timepicker.seconds = true;
+        }
+        if (timepicker._h_timepicker.is12Hour) {
+          if (timepicker._h_timepicker.seconds) {
+            timepicker._h_timepicker.model.set(`${hour}:${minute}:${second ?? "00"} ${period}`);
             timepicker._time.parts.second = second ?? "00";
           } else {
-            timepicker._timepicker.model.set(`${hour}:${minute} ${period}`);
+            timepicker._h_timepicker.model.set(`${hour}:${minute} ${period}`);
           }
           timepicker._time.parts.hour = hour;
           timepicker._time.parts.minute = minute;
           timepicker._time.parts.period = period;
         } else {
-          if (timepicker._timepicker.seconds) {
-            timepicker._timepicker.model.set(`${hour}:${minute}:${second ?? "00"}`);
+          if (timepicker._h_timepicker.seconds) {
+            timepicker._h_timepicker.model.set(`${hour}:${minute}:${second ?? "00"}`);
             timepicker._time.parts.second = second ?? "00";
           } else {
-            timepicker._timepicker.model.set(`${hour}:${minute}`);
+            timepicker._h_timepicker.model.set(`${hour}:${minute}`);
           }
           timepicker._time.parts.hour = hour;
           timepicker._time.parts.minute = minute;
         }
       }
       let placeholder;
-      if (timepicker._timepicker.seconds) {
-        placeholder = timepicker._timepicker.is12Hour ? "--:--:-- --" : "--:--:--";
+      if (timepicker._h_timepicker.seconds) {
+        placeholder = timepicker._h_timepicker.is12Hour ? "--:--:-- --" : "--:--:--";
       } else {
-        placeholder = timepicker._timepicker.is12Hour ? "--:-- --" : "--:--";
+        placeholder = timepicker._h_timepicker.is12Hour ? "--:-- --" : "--:--";
       }
       el.setAttribute("placeholder", placeholder);
       effect(() => {
-        el.setAttribute("data-state", timepicker._timepicker.expanded ? "open" : "closed");
-        el.setAttribute("aria-expanded", timepicker._timepicker.expanded);
+        el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
+        el.setAttribute("aria-expanded", timepicker._h_timepicker.expanded);
       });
     }).before("h-button");
     Alpine.directive("h-time-picker-popup", (el, {}, { effect, cleanup, Alpine: Alpine2 }) => {
-      const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_timepicker"));
+      const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
       el.classList.add(
         "overflow-hidden",
         "outline-none",
@@ -7735,8 +7864,8 @@
       el.setAttribute("role", "dialog");
       el.setAttribute("aria-modal", "true");
       el.setAttribute("data-slot", "time-picker-popup");
-      el.setAttribute("aria-labelledby", timepicker._timepicker.id);
-      el.setAttribute("data-state", timepicker._timepicker.expanded ? "open" : "closed");
+      el.setAttribute("aria-labelledby", timepicker._h_timepicker.id);
+      el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
       const optionClasses = [
         "px-3.5",
         "py-2",
@@ -7758,7 +7887,7 @@
       const updateModel = () => {
         let newValue;
         if (timepicker._time.parts.hour !== null && timepicker._time.parts.minute !== null) {
-          if (timepicker._timepicker.seconds) {
+          if (timepicker._h_timepicker.seconds) {
             if (timepicker._time.parts.seconds !== null) {
               newValue = `${timepicker._time.parts.hour}:${timepicker._time.parts.minute}:${timepicker._time.parts.second}`;
             } else return;
@@ -7766,13 +7895,13 @@
             newValue = `${timepicker._time.parts.hour}:${timepicker._time.parts.minute}`;
           }
         } else return;
-        if (timepicker._timepicker.is12Hour) {
+        if (timepicker._h_timepicker.is12Hour) {
           if (timepicker._time.parts.period !== null) {
             newValue += ` ${timepicker._time.parts.period}`;
           } else return;
         }
         if (newValue) {
-          timepicker._timepicker.model.set(newValue);
+          timepicker._h_timepicker.model.set(newValue);
           timepicker._time.changed();
         }
       };
@@ -7780,22 +7909,22 @@
         let date = /* @__PURE__ */ new Date();
         let hour = date.getHours();
         timepicker._time.parts.period = hour >= 12 ? dayPeriodLabels.pm : dayPeriodLabels.am;
-        if (timepicker._timepicker.is12Hour) {
+        if (timepicker._h_timepicker.is12Hour) {
           hour = date.getHours() % 12 || 12;
         }
         let minute = date.getMinutes();
         timepicker._time.parts.hour = hour < 10 ? `0${hour}` : hour.toString();
         timepicker._time.parts.minute = minute < 10 ? `0${minute}` : minute.toString();
-        if (timepicker._timepicker.seconds) {
+        if (timepicker._h_timepicker.seconds) {
           let second = date.getSeconds();
           timepicker._time.parts.second = second < 10 ? `0${second}` : second.toString();
         }
         updateModel();
-        timepicker._timepicker.close();
+        timepicker._h_timepicker.close();
       };
       function onKeyDown(event) {
         if (event.key === "Escape") {
-          timepicker._timepicker.close();
+          timepicker._h_timepicker.close();
         } else if (event.target.tagName === "LI") {
           let list;
           let inHoursList = event.target.parentElement.dataset.type === "hours";
@@ -7813,7 +7942,7 @@
               event.target.setAttribute("tabindex", "-1");
               let prevElem = event.target.previousElementSibling;
               if (prevElem === null || prevElem.classList.contains("hidden")) {
-                if (inHoursList && timepicker._timepicker.is12Hour) {
+                if (inHoursList && timepicker._h_timepicker.is12Hour) {
                   prevElem = list.children[12];
                 } else {
                   prevElem = list.lastChild;
@@ -7826,7 +7955,7 @@
               event.target.setAttribute("tabindex", "-1");
               let nextElem = event.target.nextElementSibling;
               if (nextElem === null || nextElem.classList.contains("hidden")) {
-                if (inHoursList && timepicker._timepicker.is12Hour) {
+                if (inHoursList && timepicker._h_timepicker.is12Hour) {
                   nextElem = list.children[1];
                 } else {
                   nextElem = list.firstChild;
@@ -7849,7 +7978,7 @@
             if (selectedHour) {
               selectedHour.focus();
             } else {
-              hoursList.children[timepicker._timepicker.is12Hour ? 1 : 0].focus();
+              hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].focus();
             }
             event.stopPropagation();
             event.preventDefault();
@@ -7914,7 +8043,7 @@
       }
       const secondsList = document.createElement("ul");
       secondsList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
-      if (!timepicker._timepicker.seconds) {
+      if (!timepicker._h_timepicker.seconds) {
         secondsList.classList.add("hidden");
       }
       secondsList.setAttribute("role", "listbox");
@@ -7934,7 +8063,7 @@
       }
       const periodList = document.createElement("ul");
       periodList.classList.add("flex-1", "overflow-y-scroll", "[scrollbar-width:thin]");
-      if (!timepicker._timepicker.is12Hour) {
+      if (!timepicker._h_timepicker.is12Hour) {
         periodList.classList.add("hidden");
       }
       periodList.setAttribute("role", "listbox");
@@ -7973,7 +8102,7 @@
       okButton.setAttribute("data-action", "close");
       okButton.innerText = el.dataset.labelOk ?? "OK";
       okButton.disabled = true;
-      okButton.addEventListener("click", timepicker._timepicker.close);
+      okButton.addEventListener("click", timepicker._h_timepicker.close);
       footer.appendChild(okButton);
       el.appendChild(footer);
       Alpine2.initTree(footer);
@@ -7982,7 +8111,7 @@
       let selectedSecond;
       let selectedPeriod;
       function render() {
-        if (timepicker._timepicker.is12Hour) {
+        if (timepicker._h_timepicker.is12Hour) {
           hoursList.firstChild.classList.add("hidden");
           for (let h = 1; h < 13; h++) {
             if (hoursList.children[h].innerText === timepicker._time.parts.hour) {
@@ -8013,7 +8142,7 @@
           }
         }
         if (!selectedHour) {
-          hoursList.children[timepicker._timepicker.is12Hour ? 1 : 0].setAttribute("tabindex", "0");
+          hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].setAttribute("tabindex", "0");
         }
         for (let m = 0; m < minutesList.children.length; m++) {
           if (minutesList.children[m].innerText === timepicker._time.parts.minute) {
@@ -8028,7 +8157,7 @@
         if (!selectedMinute) {
           minutesList.firstChild.setAttribute("tabindex", "0");
         }
-        if (timepicker._timepicker.seconds) {
+        if (timepicker._h_timepicker.seconds) {
           secondsList.classList.remove("hidden");
           for (let s = 0; s < secondsList.children.length; s++) {
             if (secondsList.children[s].innerText === timepicker._time.parts.second) {
@@ -8043,20 +8172,20 @@
           if (!selectedSecond) {
             secondsList.firstChild.setAttribute("tabindex", "0");
           }
-          if (timepicker._timepicker.is12Hour) {
+          if (timepicker._h_timepicker.is12Hour) {
             okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute && timepicker._time.parts.second && timepicker._time.parts.period ? false : true;
           } else {
             okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute && timepicker._time.parts.second ? false : true;
           }
         } else {
           secondsList.classList.add("hidden");
-          if (timepicker._timepicker.is12Hour) {
+          if (timepicker._h_timepicker.is12Hour) {
             okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute && timepicker._time.parts.period ? false : true;
           } else {
             okButton.disabled = timepicker._time.parts.hour && timepicker._time.parts.minute ? false : true;
           }
         }
-        if (timepicker._timepicker.is12Hour) {
+        if (timepicker._h_timepicker.is12Hour) {
           periodList.classList.remove("hidden");
           for (let p = 0; p < periodList.children.length; p++) {
             if (periodList.children[p].innerText === timepicker._time.parts.period) {
@@ -8089,7 +8218,7 @@
           if (selectedHour) {
             selectedHour.focus();
           } else {
-            hoursList.children[timepicker._timepicker.is12Hour ? 1 : 0].focus();
+            hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].focus();
           }
           Object.assign(el.style, {
             left: `${x}px`,
@@ -8098,13 +8227,13 @@
         });
       }
       effect(() => {
-        el.setAttribute("data-state", timepicker._timepicker.expanded ? "open" : "closed");
-        if (timepicker._timepicker.expanded) {
+        el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
+        if (timepicker._h_timepicker.expanded) {
           render();
           autoUpdateCleanup = autoUpdate(timepicker, el, updatePosition);
           if (selectedHour) selectedHour.scrollIntoView({ block: "center" });
           if (selectedMinute) selectedMinute.scrollIntoView({ block: "center" });
-          if (selectedSecond && timepicker._timepicker.seconds) selectedSecond.scrollIntoView({ block: "center" });
+          if (selectedSecond && timepicker._h_timepicker.seconds) selectedSecond.scrollIntoView({ block: "center" });
         } else {
           if (autoUpdateCleanup) autoUpdateCleanup();
           Object.assign(el.style, {
@@ -8116,7 +8245,7 @@
       cleanup(() => {
         el.removeEventListener("keydown", onKeyDown);
         el.removeEventListener("click", onClick);
-        okButton.removeEventListener("click", timepicker._timepicker.close);
+        okButton.removeEventListener("click", timepicker._h_timepicker.close);
         for (let h = 0; h < hoursList.children.length; h++) {
           hoursList.children[h].removeEventListener("click", setHour);
         }
@@ -8150,6 +8279,7 @@
         "w-full",
         "h-12",
         "data-[size=sm]:h-8",
+        "data-[size=md]:h-10",
         "data-[variant=transparent]:bg-transparent",
         "data-[variant=transparent]:text-foreground",
         "data-[floating=true]:shadow-xs",
@@ -8159,11 +8289,11 @@
       el.setAttribute("data-slot", "toolbar");
     });
     Alpine.directive("h-toolbar-image", (el) => {
-      el.classList.add("size-8", "[[data-size=sm]_&]:size-6");
+      el.classList.add("size-8", "[[data-size=md]_&]:size-7", "[[data-size=sm]_&]:size-6");
       el.setAttribute("data-slot", "toolbar-image");
     });
     Alpine.directive("h-toolbar-title", (el) => {
-      el.classList.add("text", "[[data-size=sm]_&]:text-sm", "first:pl-2", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
+      el.classList.add("text", "[[data-size=sm]_&]:text-sm", "[[data-size=md]_&]:text-sm", "first:pl-2", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
       el.setAttribute("data-slot", "toolbar-title");
     });
     Alpine.directive("h-toolbar-spacer", (el) => {
@@ -8172,7 +8302,7 @@
       el.setAttribute("data-slot", "toolbar-spacer");
     });
     Alpine.directive("h-toolbar-separator", (el) => {
-      el.classList.add("w-px", "h-8", "[[data-size=sm]_&]:h-6", "border-l");
+      el.classList.add("w-px", "h-8", "[[data-size=md]_&]:h-6", "[[data-size=sm]_&]:h-6", "border-l");
       el.setAttribute("data-slot", "toolbar-separator");
     });
   }
@@ -8305,11 +8435,40 @@
   };
   initColorScheme();
 
+  // src/utils/breakpoint-listener.js
+  function getBreakpointListener(handler2, breakpoint = 768) {
+    const mql = top.matchMedia(`(width <= ${breakpoint}px)`);
+    const onWidthChange = (event) => {
+      handler2(event.matches);
+    };
+    mql.addEventListener("change", onWidthChange);
+    handler2(mql.matches);
+    return {
+      _mql: mql,
+      _onWidthChange: onWidthChange,
+      remove() {
+        this._mql.removeEventListener("change", this._onWidthChange);
+      }
+    };
+  }
+
+  // src/utils/focus.js
+  function focus_default(Alpine) {
+    Alpine.directive("h-focus", (el, { expression }, { effect, evaluateLater }) => {
+      const getValue = evaluateLater(expression);
+      effect(() => {
+        getValue((val) => {
+          if (val) el.focus();
+        });
+      });
+    });
+  }
+
   // package.json
-  var version = "0.4.0";
+  var version = "0.6.0";
 
   // src/index.js
-  window.Harmonia = { getColorScheme, setColorScheme, version };
+  window.Harmonia = { getBreakpointListener, getColorScheme, setColorScheme, version };
   document.addEventListener("alpine:init", () => {
     window.Alpine.plugin(accordion_default);
     window.Alpine.plugin(alert_default);
@@ -8336,6 +8495,7 @@
     window.Alpine.plugin(range_default);
     window.Alpine.plugin(select_default);
     window.Alpine.plugin(separator_default);
+    window.Alpine.plugin(sheet_default);
     window.Alpine.plugin(sidebar_default);
     window.Alpine.plugin(skeleton_default);
     window.Alpine.plugin(spinner_default);
@@ -8349,6 +8509,7 @@
     window.Alpine.plugin(timepicker_default);
     window.Alpine.plugin(toolbar_default);
     window.Alpine.plugin(tooltip_default);
+    window.Alpine.plugin(focus_default);
   });
 })();
 /*! Bundled license information: