@codbex/harmonia 0.9.1 → 1.1.0

package/dist/harmonia.esm.js

@@ -19586,24 +19586,20 @@ var setButtonClasses = (el) => {
     "invalid:!border-negative"
   );
 };
-var getButtonSize = (size3, inGroup = false) => {
+var getButtonSize = (size3, isAddon = 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"];
+      return isAddon ? ["h-6", "[[data-slot=input-group][data-size=sm]_&]:h-5", "gap-1", "px-2", "[&>svg:not([class*='size-'])]:size-3.5", "has-[>svg]:px-2", "has-[>[data-slot=spinner]]:px-2"] : ["h-6.5", "gap-1.5", "px-2.5", "has-[>svg]:px-2", "has-[>[data-slot=spinner]]:px-2"];
+    case "md":
+      return isAddon ? ["h-8", "px-2.5", "gap-1.5", "has-[>svg]:px-2.5", "has-[>[data-slot=spinner]]:px-2.5"] : ["h-8", "gap-1.5", "px-3", "has-[>svg]:px-2.5", "has-[>[data-slot=spinner]]:px-2.5"];
     case "icon-sm":
-      return inGroup ? ["size-8", "p-0", "has-[>svg]:p-0"] : ["size-8"];
+      return isAddon ? ["size-6", "[[data-slot=input-group][data-size=sm]_&]:size-5", "p-0", "has-[>svg]:p-0", "has-[>[data-slot=spinner]]:p-0"] : ["size-6.5"];
+    case "icon-md":
+      return isAddon ? ["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"];
+      return ["h-9", "px-4", "py-2", "has-[>svg]:px-3", "has-[>[data-slot=spinner]]:px-3"];
   }
 };
 function button_default(Alpine) {
@@ -19612,7 +19608,7 @@ function button_default(Alpine) {
     if (!el.hasAttribute("data-slot")) {
       el.setAttribute("data-slot", "button");
     }
-    const inGroup = modifiers.includes("group");
+    const isAddon = modifiers.includes("addon");
     let lastSize;
     function setVariant(variant) {
       for (const [_, value] of Object.entries(buttonVariants)) {
@@ -19620,34 +19616,34 @@ function button_default(Alpine) {
       }
       if (buttonVariants.hasOwnProperty(variant)) el.classList.add(...buttonVariants[variant]);
     }
-    function setSize(size3 = "default") {
-      el.classList.remove(...getButtonSize(lastSize, inGroup));
-      el.classList.add(...getButtonSize(size3, inGroup));
+    function setSize2(size3 = "default") {
+      el.classList.remove(...getButtonSize(lastSize, isAddon));
+      el.classList.add(...getButtonSize(size3, isAddon));
       if (size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
         console.error(`${original}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
       }
       lastSize = size3;
     }
     setVariant(el.getAttribute("data-variant") ?? "default");
-    if (inGroup) {
+    if (isAddon) {
       el.classList.remove("shadow-button", "inline-flex");
       el.classList.add("shadow-none", "flex");
-      setSize(el.getAttribute("data-size") ?? "xs");
+      setSize2(el.getAttribute("data-size") ?? "sm");
     } else {
       if (el.hasAttribute("data-size")) {
-        setSize(el.getAttribute("data-size"));
+        setSize2(el.getAttribute("data-size"));
       } else {
         if (["date-picker-trigger", "time-picker-trigger"].includes(el.getAttribute("data-slot"))) {
-          setSize("icon-xs");
+          setSize2("icon-sm");
         } else {
-          setSize();
+          setSize2();
         }
       }
     }
     const observer = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.attributeName === "data-variant") setVariant(el.getAttribute("data-variant") ?? "default");
-        else setSize(el.getAttribute("data-size") ?? (inGroup ? "xs" : "default"));
+        else setSize2(el.getAttribute("data-size") ?? (isAddon ? "sm" : "default"));
       });
     });
     observer.observe(el, { attributes: true, attributeFilter: ["data-variant", "data-size"] });
@@ -21299,7 +21295,7 @@ function calendar_default(Alpine) {
     previousYearBtn.setAttribute("type", "button");
     previousYearBtn.appendChild(
       (0, import_lucide2.createElement)(import_lucide2.ChevronsLeft, {
-        class: ["opacity-50 size-4 shrink-0 pointer-events-none"],
+        class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21317,7 +21313,7 @@ function calendar_default(Alpine) {
     previousMonthBtn.setAttribute("type", "button");
     previousMonthBtn.appendChild(
       (0, import_lucide2.createElement)(import_lucide2.ChevronLeft, {
-        class: ["opacity-50 size-4 shrink-0 pointer-events-none"],
+        class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21340,7 +21336,7 @@ function calendar_default(Alpine) {
     nextMonthBtn.setAttribute("type", "button");
     nextMonthBtn.appendChild(
       (0, import_lucide2.createElement)(import_lucide2.ChevronRight, {
-        class: ["opacity-50 size-4 shrink-0 pointer-events-none"],
+        class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21358,7 +21354,7 @@ function calendar_default(Alpine) {
     nextYearBtn.setAttribute("type", "button");
     nextYearBtn.appendChild(
       (0, import_lucide2.createElement)(import_lucide2.ChevronsRight, {
-        class: ["opacity-50 size-4 shrink-0 pointer-events-none"],
+        class: ["opacity-70 size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21783,8 +21779,29 @@ function collapsible_default(Alpine) {
 
 // src/components/datepicker.js
 var import_lucide3 = __toESM(require_lucide(), 1);
+
+// src/common/input-size.js
+function setSize(el, size3) {
+  if (size3 === "sm") {
+    el.classList.add("h-6.5");
+    el.classList.remove("h-9");
+  } else {
+    el.classList.add("h-9");
+    el.classList.remove("h-6.5");
+  }
+}
+function sizeObserver(el) {
+  const observer = new MutationObserver(() => {
+    setSize(el, el.getAttribute("data-size"));
+  });
+  setSize(el, el.getAttribute("data-size"));
+  observer.observe(el, { attributes: true, attributeFilter: ["data-size"] });
+  return observer;
+}
+
+// src/components/datepicker.js
 function datepicker_default(Alpine) {
-  Alpine.directive("h-date-picker", (el, { original }, { Alpine: Alpine2 }) => {
+  Alpine.directive("h-date-picker", (el, { original }, { Alpine: Alpine2, cleanup }) => {
     el._h_datepicker = Alpine2.reactive({
       id: void 0,
       controls: `hdpc${v4_default()}`,
@@ -21813,10 +21830,7 @@ function datepicker_default(Alpine) {
       "transition-[color,box-shadow]",
       "duration-200",
       "outline-none",
-      "h-9",
       "pl-3",
-      "pr-1",
-      "gap-2",
       "min-w-0",
       "has-[input:focus-visible]:border-ring",
       "has-[input:focus-visible]:ring-ring/50",
@@ -21832,18 +21846,26 @@ function datepicker_default(Alpine) {
     el._h_datepicker.input.classList.add(
       "bg-transparent",
       "outline-none",
-      "flex-1",
-      "h-full",
-      "border-0",
+      "size-full",
+      "pr-1",
+      "border-r",
+      "border-input",
+      "aria-invalid:border-negative",
+      "invalid:border-negative",
       "focus-visible:ring-0",
       "disabled:pointer-events-none",
       "disabled:cursor-not-allowed",
       "disabled:opacity-50",
       "md:text-sm",
-      "text-base"
+      "text-base",
+      "truncate"
     );
     el._h_datepicker.input.setAttribute("aria-autocomplete", "none");
     el._h_datepicker.input.setAttribute("type", "text");
+    const observer = sizeObserver(el);
+    cleanup(() => {
+      observer.disconnect();
+    });
   });
   Alpine.directive("h-date-picker-trigger", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "BUTTON") {
@@ -21856,6 +21878,28 @@ function datepicker_default(Alpine) {
     if (!datepicker) {
       throw new Error(`${original} must be inside an date-picker element`);
     }
+    el.classList.add(
+      "cursor-pointer",
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-r-control",
+      "h-full",
+      "aspect-square",
+      "bg-transparent",
+      "hover:bg-secondary",
+      "active:bg-secondary-active",
+      "outline-none",
+      "focus-visible:border-ring",
+      "focus-visible:ring-ring/50",
+      "focus-visible:ring-[calc(var(--spacing)*0.75)]",
+      "[input[aria-invalid=true]~&]:ring-negative/20",
+      "[input[aria-invalid=true]~&]:border-negative",
+      "dark:[input[aria-invalid=true]~&]:ring-negative/40",
+      "[input:invalid~&]:ring-negative/20",
+      "[input:invalid~&]:border-negative",
+      "dark:[input:invalid~&]:ring-negative/40"
+    );
     el.setAttribute("aria-controls", datepicker._h_datepicker.controls);
     el.setAttribute("aria-expanded", "false");
     el.setAttribute("aria-haspopup", "dialog");
@@ -21863,7 +21907,7 @@ function datepicker_default(Alpine) {
     el.setAttribute("data-slot", "date-picker-trigger");
     el.appendChild(
       (0, import_lucide3.createElement)(import_lucide3.Calendar, {
-        class: ["opacity-50 size-4 transition-transform duration-200"],
+        class: ["opacity-70 text-foreground size-4"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -21893,7 +21937,7 @@ function datepicker_default(Alpine) {
       el.removeEventListener("click", handler);
       top.removeEventListener("click", close);
     });
-  }).before("h-button");
+  });
 }
 
 // src/components/dialog.js
@@ -21950,8 +21994,8 @@ function dialog_default(Alpine) {
       "flex-col",
       "w-full",
       "max-w-[calc(100%-2rem)]",
-      "translate-x-[-50%]",
-      "translate-y-[-50%]",
+      "-translate-x-1/2",
+      "-translate-y-1/2",
       "gap-4",
       "rounded-lg",
       "border",
@@ -22030,7 +22074,7 @@ function fieldset_default(Alpine) {
     el.setAttribute("data-slot", "field-group");
   });
   Alpine.directive("h-field", (el) => {
-    el.classList.add("group/field", "w-full", "gap-3", "data-[invalid=true]:text-negative");
+    el.classList.add("group/field", "w-full", "gap-3", "has-[input:invalid]:text-negative", "has-[textarea:invalid]:text-negative", "has-[[aria-invalid=true]]:text-negative");
     switch (el.getAttribute("data-orientation")) {
       case "horizontal":
         el.classList.add("hbox", "items-center", "[&>[data-slot=field-label]]:flex-auto", "has-[>[data-slot=field-content]]:items-start", "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px");
@@ -22077,9 +22121,32 @@ function fieldset_default(Alpine) {
       "[&>a]:underline-offset-4"
     );
     el.setAttribute("data-slot", "field-description");
+    if (el.getAttribute("data-hide-on-error") === "true") {
+      el.classList.add(
+        "[[data-slot=field]_input:invalid~&]:hidden",
+        "[[data-slot=field]_textarea:invalid~&]:hidden",
+        "[[data-slot=field]_[aria-invalid=true]~&]:hidden",
+        "group-has-[input:invalid]/field:hidden",
+        "group-has-[textarea:invalid)]/field:hidden",
+        "group-has-[[aria-invalid=true]]/field:hidden"
+      );
+    }
   });
   Alpine.directive("h-field-error", (el) => {
-    el.classList.add("text-negative", "text-sm", "font-normal");
+    el.classList.add(
+      "hidden",
+      "[[data-slot=field]_input:invalid~&]:block",
+      "[[data-slot=field]_textarea:invalid~&]:block",
+      "[[data-slot=field]_[aria-invalid=true]~&]:block",
+      "group-has-[input:invalid]/field:block",
+      "group-has-[textarea:invalid)]/field:block",
+      "group-has-[[aria-invalid=true]]/field:block",
+      "text-negative",
+      "text-sm",
+      "leading-normal",
+      "font-normal",
+      "group-has-[[data-orientation=horizontal]]/field:text-balance"
+    );
     el.setAttribute("data-slot", "field-error");
   });
 }
@@ -22146,18 +22213,14 @@ function info_page_default(Alpine) {
 
 // src/components/input.js
 function input_default(Alpine) {
-  Alpine.directive("h-input", (el, { modifiers }) => {
+  Alpine.directive("h-input", (el, { modifiers }, { cleanup }) => {
     el.classList.add(
       "file:text-foreground",
       "placeholder:text-muted-foreground",
       "selection:bg-primary",
       "selection:text-primary-foreground",
-      "bg-input-inner",
       "border-input",
-      "w-full",
       "min-w-0",
-      "rounded-control",
-      "border",
       "[&:not([type='color'])]:px-3",
       "[&:not([type='color'])]:py-1",
       "[&[type='color']]:overflow-hidden",
@@ -22166,7 +22229,6 @@ function input_default(Alpine) {
       "[&::-webkit-color-swatch-wrapper]:rounded-0",
       "[&::-webkit-color-swatch-wrapper]:p-0",
       "text-base",
-      "shadow-input",
       "transition-[color,box-shadow]",
       "outline-none",
       "file:inline-flex",
@@ -22181,7 +22243,6 @@ function input_default(Alpine) {
       "md:text-sm",
       "focus-visible:border-ring",
       "focus-visible:ring-ring/50",
-      "focus-visible:ring-[calc(var(--spacing)*0.75)]",
       "aria-invalid:ring-negative/20",
       "dark:aria-invalid:ring-negative/40",
       "aria-invalid:border-negative",
@@ -22190,15 +22251,18 @@ function input_default(Alpine) {
       "invalid:!border-negative"
     );
     if (modifiers.includes("group")) {
-      el.classList.remove("rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[calc(var(--spacing)*0.75)]");
-      el.classList.add("flex-1", "rounded-none", "border-0", "bg-transparent", "shadow-none", "focus-visible:ring-0");
+      el.classList.add("h-full", "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");
-    if (el.getAttribute("data-size") === "sm") el.classList.add("h-8");
-    else if (el.getAttribute("data-size") === "xs") el.classList.add("h-6.5");
-    else el.classList.add("h-9");
+    } else {
+      el.classList.add("w-full", "rounded-control", "border", "bg-input-inner", "shadow-input", "focus-visible:ring-[calc(var(--spacing)*0.75)]");
+      el.setAttribute("data-slot", "input");
+      const observer = sizeObserver(el);
+      cleanup(() => {
+        observer.disconnect();
+      });
+    }
   });
-  Alpine.directive("h-input-group", (el) => {
+  Alpine.directive("h-input-group", (el, _, { cleanup }) => {
     el.classList.add(
       "group/input-group",
       "border-input",
@@ -22212,7 +22276,6 @@ function input_default(Alpine) {
       "shadow-input",
       "transition-[color,box-shadow]",
       "outline-none",
-      "h-9",
       "min-w-0",
       "has-[>textarea]:h-auto",
       "has-[>[data-align=inline-start]]:[&>input]:pl-2",
@@ -22232,6 +22295,10 @@ function input_default(Alpine) {
     );
     el.setAttribute("role", "group");
     el.setAttribute("data-slot", "input-group");
+    const observer = sizeObserver(el);
+    cleanup(() => {
+      observer.disconnect();
+    });
   });
   Alpine.directive("h-input-group-addon", (el, _, { cleanup }) => {
     el.classList.add(
@@ -22242,7 +22309,6 @@ function input_default(Alpine) {
       "items-center",
       "justify-center",
       "gap-2",
-      "py-1.5",
       "text-sm",
       "font-medium",
       "select-none",
@@ -22254,8 +22320,24 @@ function input_default(Alpine) {
     el.setAttribute("role", "group");
     el.setAttribute("data-slot", "input-group-addon");
     const variants = {
-      "inline-start": ["order-first", "pl-3", "has-[>button]:ml-[-0.45rem]", "has-[>[data-slot=tag]]:ml-[-0.35rem]"],
-      "inline-end": ["order-last", "pr-3", "has-[>button]:mr-[-0.45rem]", "has-[>[data-slot=tag]]:mr-[-0.35rem]"],
+      "inline-start": [
+        "order-first",
+        "pl-3",
+        "[[data-slot=input-group][data-size=sm]_&]:pl-1.25",
+        "has-[>button]:pl-1.25",
+        "[[data-slot=input-group][data-size=sm]_&]:has-[>button]:pl-0.5",
+        "has-[>[data-slot|=tag]]:pl-1.5",
+        "[[data-slot=input-group][data-size=sm]_&]:has-[>[data-slot|=tag]]:pl-0.5"
+      ],
+      "inline-end": [
+        "order-last",
+        "pr-3",
+        "[[data-slot=input-group][data-size=sm]_&]:pr-1.25",
+        "has-[>button]:pr-1.25",
+        "[[data-slot=input-group][data-size=sm]_&]:has-[>button]:pr-0.5",
+        "has-[>[data-slot|=tag]]:pr-1.5",
+        "[[data-slot=input-group][data-size=sm]_&]:has-[>[data-slot|=tag]]:pr-0.5"
+      ],
       "block-start": ["order-first", "w-full", "justify-start", "px-3", "pt-3", "[.border-b]:pb-3", "group-has-[>input]/input-group:pt-2.5"],
       "block-end": ["order-last", "w-full", "justify-start", "px-3", "pb-3", "[.border-t]:pt-3", "group-has-[>input]/input-group:pb-2.5"]
     };
@@ -22280,6 +22362,145 @@ function input_default(Alpine) {
     el.classList.add("text-muted-foreground", "flex", "items-center", "gap-2", "text-sm", "[&_svg]:pointer-events-none", "[&_svg:not([class*='size-'])]:size-4");
     el.setAttribute("data-slot", "label");
   });
+  Alpine.directive("h-input-number", (el, { original }, { cleanup }) => {
+    el.classList.add(
+      "group/input-number",
+      "border-input",
+      "bg-input-inner",
+      "relative",
+      "flex",
+      "w-full",
+      "items-center",
+      "rounded-control",
+      "border",
+      "shadow-input",
+      "transition-[color,box-shadow]",
+      "outline-none",
+      "min-w-0",
+      "has-[[data-slot=input-number-control]:focus-visible]:border-ring",
+      "has-[[data-slot=input-number-control]:focus-visible]:ring-ring/50",
+      "has-[[data-slot=input-number-control]:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
+      "has-[[data-slot][aria-invalid=true]]:ring-negative/20",
+      "has-[[data-slot][aria-invalid=true]]:border-negative",
+      "dark:has-[[data-slot][aria-invalid=true]]:ring-negative/40"
+    );
+    el.setAttribute("role", "group");
+    el.setAttribute("data-slot", "input-number");
+    const input = el.querySelector("input");
+    if (!input || input.getAttribute("type") !== "number") {
+      throw new Error(`${original} must contain an input of type 'number'`);
+    }
+    if (!input.hasAttribute("type")) input.setAttribute("type", "number");
+    if (!input.hasAttribute("inputmode")) input.setAttribute("inputmode", "numeric");
+    if (!input.hasAttribute("aria-roledescription")) {
+      input.setAttribute("aria-roledescription", "Number field");
+    }
+    if (!input.hasAttribute("id")) {
+      input.setAttribute("id", `in${v4_default()}`);
+    }
+    input.setAttribute("tabindex", "0");
+    input.setAttribute("autocomplete", "off");
+    input.setAttribute("autocorrect", "off");
+    input.setAttribute("spellcheck", "off");
+    input.setAttribute("data-slot", "input-number-control");
+    input.classList.add("rounded-l-control", "size-full", "px-3", "py-1", "outline-none");
+    const stepDown = document.createElement("button");
+    stepDown.setAttribute("type", "button");
+    stepDown.setAttribute("tabIndex", "-1");
+    stepDown.setAttribute("aria-label", "Decrease");
+    stepDown.setAttribute("aria-controls", input.getAttribute("id"));
+    stepDown.setAttribute("data-slot", "step-up-trigger");
+    stepDown.classList.add(
+      "cursor-pointer",
+      "border-l",
+      "border-input",
+      "[input[aria-invalid=true]~&]:border-negative",
+      "[input:invalid~&]:border-negative",
+      "h-full",
+      "aspect-square",
+      "bg-transparent",
+      "hover:bg-secondary",
+      "active:bg-secondary-active",
+      "outline-none",
+      "relative",
+      "before:block",
+      "before:opacity-70",
+      "before:rounded-full",
+      "before:h-0.5",
+      "before:min-h-px",
+      "before:w-3",
+      "before:mx-auto",
+      "before:bg-foreground",
+      "before:hover:bg-secondary-foreground"
+    );
+    el.appendChild(stepDown);
+    const onStepDown = () => {
+      input.stepDown();
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    stepDown.addEventListener("click", onStepDown);
+    const stepUp = document.createElement("button");
+    stepUp.setAttribute("type", "button");
+    stepUp.setAttribute("tabIndex", "-1");
+    stepUp.setAttribute("aria-label", "Increase");
+    stepUp.setAttribute("aria-controls", input.getAttribute("id"));
+    stepUp.setAttribute("data-slot", "step-up-trigger");
+    stepUp.classList.add(
+      "cursor-pointer",
+      "border-l",
+      "border-input",
+      "[input[aria-invalid=true]~&]:border-negative",
+      "[input:invalid~&]:border-negative",
+      "rounded-r-control",
+      "h-full",
+      "aspect-square",
+      "bg-transparent",
+      "hover:bg-secondary",
+      "active:bg-secondary-active",
+      "outline-none",
+      "relative",
+      "before:block",
+      "before:opacity-70",
+      "before:absolute",
+      "before:rounded-full",
+      "before:h-0.5",
+      "before:min-h-px",
+      "before:w-3",
+      "before:top-1/2",
+      "before:left-1/2",
+      "before:-translate-x-1/2",
+      "before:-translate-y-1/2",
+      "before:bg-foreground",
+      "before:hover:bg-secondary-foreground",
+      "after:block",
+      "after:opacity-70",
+      "after:absolute",
+      "after:rounded-full",
+      "after:h-3",
+      "after:min-w-px",
+      "after:w-0.5",
+      "after:top-1/2",
+      "after:left-1/2",
+      "after:-translate-x-1/2",
+      "after:-translate-y-1/2",
+      "after:bg-foreground",
+      "after:hover:bg-secondary-foreground"
+    );
+    el.appendChild(stepUp);
+    const onStepUp = () => {
+      input.stepUp();
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    };
+    stepUp.addEventListener("click", onStepUp);
+    const observer = sizeObserver(el);
+    cleanup(() => {
+      observer.disconnect();
+      stepDown.removeEventListener("click", onStepDown);
+      stepUp.removeEventListener("click", onStepUp);
+    });
+  });
 }
 
 // src/components/label.js
@@ -23415,30 +23636,10 @@ function select_default(Alpine) {
       "duration-200",
       "outline-none",
       "has-[input:disabled]:pointer-events-none",
-      "has-[input:disabled]:opacity-50",
-      "[&_svg]:pointer-events-none",
-      "[&_svg]:shrink-0",
-      "[&_svg]:size-4",
-      "[&_svg]:opacity-50"
+      "has-[input:disabled]:opacity-50"
     );
     el.setAttribute("data-slot", "select");
-    const setSize = (size3) => {
-      if (size3 === "sm") {
-        el.classList.add("h-8");
-        el.classList.remove("h-9", "h-6.5");
-      } else if (size3 === "xs") {
-        el.classList.add("h-6.5");
-        el.classList.remove("h-9", "h-8");
-      } else {
-        el.classList.add("h-9");
-        el.classList.remove("h-8", "h-6.5");
-      }
-    };
-    setSize(el.getAttribute("data-size"));
-    const observer = new MutationObserver(() => {
-      setSize(el.getAttribute("data-size"));
-    });
-    observer.observe(el, { attributes: true, attributeFilter: ["data-size"] });
+    const observer = sizeObserver(el);
     cleanup(() => {
       observer.disconnect();
     });
@@ -23673,7 +23874,7 @@ function select_default(Alpine) {
     fakeTrigger.addEventListener("keydown", onPress);
     fakeTrigger.addEventListener("click", onClick2);
     const chevronDown = (0, import_lucide4.createElement)(import_lucide4.ChevronDown, {
-      class: ["opacity-50 size-4 transition-transform duration-200"],
+      class: ["opacity-70 text-foreground size-4 shrink-0 pointer-events-none transition-transform duration-200"],
       width: "16",
       height: "16",
       "aria-hidden": true,
@@ -24180,13 +24381,13 @@ function sidebar_default(Alpine) {
       sm: ["h-7", "text-xs"],
       lg: ["h-12", "text-sm", "group-data-[collapsed=true]/sidebar:p-0!"]
     };
-    function setSize(size3) {
+    function setSize2(size3) {
       if (sizes.hasOwnProperty(size3)) {
         el.classList.add(...sizes[size3]);
       }
     }
     if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "default");
-    setSize(el.getAttribute("data-size"));
+    setSize2(el.getAttribute("data-size"));
   });
   Alpine.directive("h-sidebar-menu-action", (el, { modifiers }) => {
     el.classList.add(
@@ -24318,13 +24519,13 @@ function sidebar_default(Alpine) {
       sm: ["text-xs"],
       md: ["text-sm"]
     };
-    function setSize(size3) {
+    function setSize2(size3) {
       if (sizes.hasOwnProperty(size3)) {
         el.classList.add(...sizes[size3]);
       }
     }
     if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "md");
-    setSize(el.getAttribute("data-size"));
+    setSize2(el.getAttribute("data-size"));
   });
   Alpine.directive("h-sidebar-footer", (el) => {
     el.classList.add("vbox", "gap-2", "px-2", "h-12", "justify-center", "border-t");
@@ -24340,10 +24541,10 @@ function skeleton_default(Alpine) {
     if (modifiers.includes("control")) {
       el.classList.add("rounded-control");
       switch (el.getAttribute("data-size")) {
-        case "xs":
+        case "sm":
           el.classList.add("h-6.5");
           break;
-        case "sm":
+        case "md":
           el.classList.add("h-8");
           break;
         default:
@@ -24362,7 +24563,20 @@ function skeleton_default(Alpine) {
 // src/components/spinner.js
 function spinner_default(Alpine) {
   Alpine.directive("h-spinner", (el) => {
-    el.classList.add("size-4", "border-2", "border-x-primary", "border-b-primary", "border-t-transparent", "rounded-full", "animate-spin");
+    el.classList.add(
+      "size-4",
+      "border-2",
+      "border-primary",
+      "[[data-slot=button]_&]:border-secondary-foreground",
+      "[[data-slot=button][data-variant=primary]_&]:border-primary-foreground",
+      "[[data-slot=button][data-variant=positive]_&]:border-positive-foreground",
+      "[[data-slot=button][data-variant=negative]_&]:border-negative-foreground",
+      "[[data-slot=button][data-variant=warning]_&]:border-warning-foreground",
+      "[[data-slot=button][data-variant=information]_&]:border-information-foreground",
+      "!border-t-transparent",
+      "rounded-full",
+      "animate-spin"
+    );
     el.setAttribute("role", "status");
     el.setAttribute("data-slot", "spinner");
     if (!el.hasAttribute("aria-label")) el.setAttribute("aria-label", "Loading");
@@ -24921,6 +25135,10 @@ function tile_default(Alpine) {
       "group/tile",
       "flex",
       "items-center",
+      "py-3",
+      "px-4",
+      "has-data-[slot=tile-header]:py-4",
+      "gap-2.5",
       "text-sm",
       "rounded-lg",
       "transition-colors",
@@ -24935,14 +25153,6 @@ function tile_default(Alpine) {
       "focus-visible:ring-[calc(var(--spacing)*0.75)]"
     );
     el.setAttribute("data-slot", "tile");
-    const sizes = {
-      default: ["p-4", "gap-4"],
-      sm: ["py-3", "px-4", "gap-2.5"]
-    };
-    function setSize(size3) {
-      el.classList.add(...sizes[size3]);
-      el.setAttribute("data-size", size3);
-    }
     switch (el.getAttribute("data-variant")) {
       case "outline":
         el.classList.add("border", "border-border");
@@ -24956,9 +25166,6 @@ function tile_default(Alpine) {
       default:
         el.classList.add("border", "bg-transparent", "border-transparent");
     }
-    if (el.getAttribute("data-size") === "sm") {
-      setSize("sm");
-    } else setSize("sm");
   });
   Alpine.directive("h-tile-header", (el) => {
     el.classList.add("flex", "basis-full", "items-center", "justify-between", "gap-2");
@@ -25085,12 +25292,12 @@ function timepicker_default(Alpine) {
       "has-[input:focus-visible]:border-ring",
       "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
       "has-[input:focus-visible]:ring-ring/50",
-      "dark:has-[aria-invalid=true]:ring-negative/40",
-      "dark:has-[input:invalid]:ring-negative/40",
-      "has-[aria-invalid=true]:border-negative",
-      "has-[aria-invalid=true]:ring-negative/20",
-      "has-[input:invalid]:border-negative",
+      "has-[input[aria-invalid=true]]:ring-negative/20",
+      "has-[input[aria-invalid=true]]:border-negative",
+      "dark:has-[input[aria-invalid=true]]:ring-negative/40",
       "has-[input:invalid]:ring-negative/20",
+      "has-[input:invalid]:border-negative",
+      "dark:has-[input:invalid]:ring-negative/40",
       "hover:bg-secondary-hover",
       "active:bg-secondary-active",
       "flex",
@@ -25098,12 +25305,12 @@ function timepicker_default(Alpine) {
       "items-center",
       "justify-between",
       "gap-2",
-      "h-9",
       "rounded-control",
       "border",
       "bg-input-inner",
       "pl-3",
       "pr-2",
+      "data-[size=sm]:pr-1",
       "text-sm",
       "whitespace-nowrap",
       "shadow-input",
@@ -25111,17 +25318,13 @@ function timepicker_default(Alpine) {
       "duration-200",
       "outline-none",
       "has-[input:disabled]:pointer-events-none",
-      "has-[input:disabled]:opacity-50",
-      "[&_svg]:pointer-events-none",
-      "[&_svg]:shrink-0",
-      "[&_svg]:size-4",
-      "[&_svg]:opacity-50"
+      "has-[input:disabled]:opacity-50"
     );
     el.setAttribute("data-slot", "time-picker");
     el.setAttribute("tabindex", "-1");
     el.appendChild(
       (0, import_lucide5.createElement)(import_lucide5.Clock, {
-        class: ["opacity-50 size-4 transition-transform duration-200"],
+        class: ["opacity-70 text-foreground size-4 shrink-0 pointer-events-none"],
         width: "16",
         height: "16",
         "aria-hidden": true,
@@ -25160,13 +25363,15 @@ function timepicker_default(Alpine) {
     };
     el.addEventListener("click", handler);
     el.addEventListener("keydown", handler);
+    const observer = sizeObserver(el);
     cleanup(() => {
+      observer.disconnect();
       el.removeEventListener("click", handler);
       el.removeEventListener("keydown", handler);
       top.removeEventListener("click", el._h_timepicker.close);
     });
   });
-  Alpine.directive("h-time-picker-input", (el, { original }, { effect, Alpine: Alpine2 }) => {
+  Alpine.directive("h-time-picker-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
     if (el.tagName !== "INPUT") {
       throw new Error(`${original} must be a readonly input of type "text"`);
     }
@@ -25200,8 +25405,7 @@ function timepicker_default(Alpine) {
       timepicker._h_timepicker.id = `htp${v4_default()}`;
       el.setAttribute("id", timepicker._h_timepicker.id);
     }
-    el.classList.add("cursor-pointer", "bg-transparent", "text-transparent", "text-shadow-[0_0_0_var(--foreground)]", "outline-none", "flex-1", "h-full", "border-0", "md:text-sm", "text-base");
-    el.readOnly = true;
+    el.classList.add("cursor-pointer", "bg-transparent", "text-transparent", "text-shadow-[0_0_0_var(--foreground)]", "placeholder:text-muted-foreground", "outline-none", "size-full", "border-0", "md:text-sm", "text-base", "truncate");
     el.setAttribute("aria-autocomplete", "none");
     el.setAttribute("aria-controls", timepicker._h_timepicker.controls);
     el.setAttribute("aria-expanded", "false");
@@ -25244,11 +25448,20 @@ function timepicker_default(Alpine) {
       placeholder = timepicker._h_timepicker.is12Hour ? "--:-- --" : "--:--";
     }
     el.setAttribute("placeholder", placeholder);
+    const preventInput = (event) => {
+      event.preventDefault();
+    };
+    el.addEventListener("beforeinput", preventInput);
+    el.addEventListener("paste", preventInput);
     effect(() => {
       el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
       el.setAttribute("aria-expanded", timepicker._h_timepicker.expanded);
     });
-  }).before("h-button");
+    cleanup(() => {
+      el.removeEventListener("keydown", preventInput);
+      el.removeEventListener("paste", preventInput);
+    });
+  });
   Alpine.directive("h-time-picker-popup", (el, _, { effect, cleanup, Alpine: Alpine2 }) => {
     const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
     el.classList.add(
@@ -25265,6 +25478,7 @@ function timepicker_default(Alpine) {
       "z-50",
       "shadow-md"
     );
+    el.setAttribute("id", timepicker._h_timepicker.controls);
     el.setAttribute("tabindex", "-1");
     el.setAttribute("role", "dialog");
     el.setAttribute("aria-modal", "true");
@@ -25461,7 +25675,7 @@ function timepicker_default(Alpine) {
       }
     }
     const timeContainer = document.createElement("div");
-    timeContainer.classList.add("hbox", "max-h-[18rem]", "[&>ul]:border-r", "[&>ul:last-of-type]:border-r-0");
+    timeContainer.classList.add("hbox", "max-h-[14rem]", "[&>ul]:border-r", "[&>ul:last-of-type]:border-r-0");
     if (el.firstChild) el.classList.add("border-b");
     timeContainer.setAttribute("role", "group");
     timeContainer.addEventListener("click", setTime);
@@ -25548,6 +25762,7 @@ function timepicker_default(Alpine) {
     footer.classList.add("hbox", "justify-between", "gap-1", "border-t", "p-2");
     footer.setAttribute("tabindex", "-1");
     const nowButton = document.createElement("button");
+    nowButton.setAttribute("type", "button");
     nowButton.setAttribute(Alpine2.prefixed("h-button"), "");
     nowButton.setAttribute("data-size", "sm");
     nowButton.setAttribute("data-action", "time");
@@ -25555,6 +25770,7 @@ function timepicker_default(Alpine) {
     nowButton.addEventListener("click", getCurrentTime);
     footer.appendChild(nowButton);
     const okButton = document.createElement("button");
+    okButton.setAttribute("type", "button");
     okButton.setAttribute(Alpine2.prefixed("h-button"), "");
     okButton.setAttribute("data-variant", "primary");
     okButton.setAttribute("data-size", "sm");
@@ -26091,7 +26307,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "0.9.1";
+var version = "1.1.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768) {