@codbex/harmonia 0.9.1 → 1.1.0

package/dist/harmonia.js

@@ -594,24 +594,20 @@
       "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) {
@@ -620,7 +616,7 @@
       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)) {
@@ -628,34 +624,34 @@
         }
         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"] });
@@ -2306,7 +2302,7 @@
       previousYearBtn.setAttribute("type", "button");
       previousYearBtn.appendChild(
         createElement(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,
@@ -2324,7 +2320,7 @@
       previousMonthBtn.setAttribute("type", "button");
       previousMonthBtn.appendChild(
         createElement(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,
@@ -2347,7 +2343,7 @@
       nextMonthBtn.setAttribute("type", "button");
       nextMonthBtn.appendChild(
         createElement(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,
@@ -2365,7 +2361,7 @@
       nextYearBtn.setAttribute("type", "button");
       nextYearBtn.appendChild(
         createElement(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,
@@ -2788,9 +2784,28 @@
     });
   }
 
+  // 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()}`,
@@ -2819,10 +2834,7 @@
         "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",
@@ -2838,18 +2850,26 @@
       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") {
@@ -2862,6 +2882,28 @@
       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");
@@ -2869,7 +2911,7 @@
       el.setAttribute("data-slot", "date-picker-trigger");
       el.appendChild(
         createElement(Calendar, {
-          class: ["opacity-50 size-4 transition-transform duration-200"],
+          class: ["opacity-70 text-foreground size-4"],
           width: "16",
           height: "16",
           "aria-hidden": true,
@@ -2899,7 +2941,7 @@
         el.removeEventListener("click", handler);
         top.removeEventListener("click", close);
       });
-    }).before("h-button");
+    });
   }
 
   // src/components/dialog.js
@@ -2956,8 +2998,8 @@
         "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",
@@ -3036,7 +3078,7 @@
       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");
@@ -3083,9 +3125,32 @@
         "[&>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");
     });
   }
@@ -3152,18 +3217,14 @@
 
   // 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",
@@ -3172,7 +3233,6 @@
         "[&::-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",
@@ -3187,7 +3247,6 @@
         "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",
@@ -3196,15 +3255,18 @@
         "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",
@@ -3218,7 +3280,6 @@
         "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",
@@ -3238,6 +3299,10 @@
       );
       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(
@@ -3248,7 +3313,6 @@
         "items-center",
         "justify-center",
         "gap-2",
-        "py-1.5",
         "text-sm",
         "font-medium",
         "select-none",
@@ -3260,8 +3324,24 @@
       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"]
       };
@@ -3286,6 +3366,145 @@
       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
@@ -6279,30 +6498,10 @@
         "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();
       });
@@ -6537,7 +6736,7 @@
       fakeTrigger.addEventListener("keydown", onPress);
       fakeTrigger.addEventListener("click", onClick2);
       const chevronDown = createElement(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,
@@ -7044,13 +7243,13 @@
         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(
@@ -7182,13 +7381,13 @@
         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");
@@ -7204,10 +7403,10 @@
       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:
@@ -7226,7 +7425,20 @@
   // 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");
@@ -7785,6 +7997,10 @@
         "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",
@@ -7799,14 +8015,6 @@
         "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");
@@ -7820,9 +8028,6 @@
         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");
@@ -7948,12 +8153,12 @@
         "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",
@@ -7961,12 +8166,12 @@
         "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",
@@ -7974,17 +8179,13 @@
         "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(
         createElement(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,
@@ -8023,13 +8224,15 @@
       };
       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"`);
       }
@@ -8063,8 +8266,7 @@
         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");
@@ -8107,11 +8309,20 @@
         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(
@@ -8128,6 +8339,7 @@
         "z-50",
         "shadow-md"
       );
+      el.setAttribute("id", timepicker._h_timepicker.controls);
       el.setAttribute("tabindex", "-1");
       el.setAttribute("role", "dialog");
       el.setAttribute("aria-modal", "true");
@@ -8324,7 +8536,7 @@
         }
       }
       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);
@@ -8411,6 +8623,7 @@
       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");
@@ -8418,6 +8631,7 @@
       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");
@@ -9077,7 +9291,7 @@
   }
 
   // package.json
-  var version = "0.9.1";
+  var version = "1.1.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };