@codbex/harmonia 0.9.0 → 1.0.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"] });
@@ -21174,7 +21170,7 @@ function calendar_default(Alpine) {
     el.classList.add("border", "rounded-control", "gap-2", "p-2");
     el.setAttribute("tabindex", "-1");
     if (datepicker) {
-      el.classList.add("fixed", "bg-popover", "text-popover-foreground", "data-[state=open]:flex", "data-[state=open]:flex-col", "data-[state=closed]:hidden", "z-50", "shadow-md");
+      el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=open]:flex", "data-[state=open]:flex-col", "data-[state=closed]:hidden", "z-50", "shadow-md");
       el.setAttribute("role", "dialog");
       el.setAttribute("aria-modal", "true");
       el.setAttribute("data-slot", "date-picker-calendar");
@@ -21604,7 +21600,6 @@ function calendar_default(Alpine) {
     function updatePosition() {
       computePosition2(datepicker, el, {
         placement: el.getAttribute("data-align") || "bottom-start",
-        strategy: "fixed",
         middleware: [offset2(4), flip2(), shift2({ padding: 4 })]
       }).then(({ x, y }) => {
         Object.assign(el.style, {
@@ -21830,7 +21825,19 @@ function datepicker_default(Alpine) {
       "dark:has-[input:invalid]:ring-negative/40"
     );
     el.setAttribute("data-slot", "date-picker");
-    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.classList.add(
+      "bg-transparent",
+      "outline-none",
+      "flex-1",
+      "h-full",
+      "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");
   });
@@ -21939,8 +21946,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",
@@ -22019,7 +22026,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");
@@ -22066,9 +22073,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");
   });
 }
@@ -22133,20 +22163,35 @@ function info_page_default(Alpine) {
   });
 }
 
+// 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/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",
@@ -22155,7 +22200,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",
@@ -22170,7 +22214,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",
@@ -22179,15 +22222,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",
@@ -22201,7 +22247,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",
@@ -22221,6 +22266,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(
@@ -22231,7 +22280,6 @@ function input_default(Alpine) {
       "items-center",
       "justify-center",
       "gap-2",
-      "py-1.5",
       "text-sm",
       "font-medium",
       "select-none",
@@ -22243,8 +22291,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"]
     };
@@ -22269,6 +22333,136 @@ 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(
+      "border-l",
+      "border-input",
+      "h-full",
+      "aspect-square",
+      "bg-transparent",
+      "hover:bg-secondary",
+      "active:bg-secondary-active",
+      "outline-none",
+      "relative",
+      "before:block",
+      "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(
+      "border-l",
+      "border-input",
+      "rounded-r-control",
+      "h-full",
+      "aspect-square",
+      "bg-transparent",
+      "hover:bg-secondary",
+      "active:bg-secondary-active",
+      "outline-none",
+      "relative",
+      "before:block",
+      "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: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
@@ -23411,23 +23605,7 @@ function select_default(Alpine) {
       "[&_svg]:opacity-50"
     );
     el.setAttribute("data-slot", "select");
-    const setSize = (size3) => {
-      if (size3 === "sm") {
-        el.classList.add("h-8");
-        el.classList.remove("h-9", "h-6.5");
-      } else if (size3 === "xs") {
-        el.classList.add("h-6.5");
-        el.classList.remove("h-9", "h-8");
-      } else {
-        el.classList.add("h-9");
-        el.classList.remove("h-8", "h-6.5");
-      }
-    };
-    setSize(el.getAttribute("data-size"));
-    const observer = new MutationObserver(() => {
-      setSize(el.getAttribute("data-size"));
-    });
-    observer.observe(el, { attributes: true, attributeFilter: ["data-size"] });
+    const observer = sizeObserver(el);
     cleanup(() => {
       observer.disconnect();
     });
@@ -24169,13 +24347,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(
@@ -24307,13 +24485,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");
@@ -24329,10 +24507,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:
@@ -24351,7 +24529,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");
@@ -24910,6 +25101,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",
@@ -24924,14 +25119,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");
@@ -24945,9 +25132,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");
@@ -25030,6 +25214,15 @@ var getSelectedTime = (rawTime, convertTo12) => {
   }
   return { hour, minute, second, period };
 };
+function scrollIntoCenter(container, element, behavior = "instant") {
+  const containerRect = container.getBoundingClientRect();
+  const elementRect = element.getBoundingClientRect();
+  const offset3 = elementRect.top - containerRect.top - container.clientHeight / 2 + element.clientHeight / 2;
+  container.scrollBy({
+    top: offset3,
+    behavior
+  });
+}
 function timepicker_default(Alpine) {
   Alpine.directive("h-time-picker", (el, { expression }, { evaluateLater, cleanup, effect, Alpine: Alpine2 }) => {
     el._h_timepicker = Alpine2.reactive({
@@ -25236,7 +25429,7 @@ function timepicker_default(Alpine) {
       "outline-none",
       "border",
       "rounded-control",
-      "fixed",
+      "absolute",
       "bg-popover",
       "text-popover-foreground",
       "data-[state=open]:flex",
@@ -25648,21 +25841,26 @@ function timepicker_default(Alpine) {
     };
     el.addEventListener("click", onClick2);
     let autoUpdateCleanup;
+    let focusFirstItem = true;
     function updatePosition() {
       computePosition2(timepicker, el, {
         placement: el.getAttribute("data-align") || "bottom-start",
-        strategy: "fixed",
         middleware: [offset2(4), flip2(), shift2({ padding: 4 })]
       }).then(({ x, y }) => {
-        if (selectedHour) {
-          selectedHour.focus();
-        } else {
-          hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].focus();
-        }
         Object.assign(el.style, {
           left: `${x}px`,
           top: `${y}px`
         });
+        if (focusFirstItem) {
+          focusFirstItem = false;
+          Alpine2.nextTick(() => {
+            if (selectedHour) {
+              selectedHour.focus();
+            } else {
+              hoursList.children[timepicker._h_timepicker.is12Hour ? 1 : 0].focus();
+            }
+          });
+        }
       });
     }
     effect(() => {
@@ -25670,11 +25868,12 @@ function timepicker_default(Alpine) {
       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._h_timepicker.seconds) selectedSecond.scrollIntoView({ block: "center" });
+        if (selectedHour) scrollIntoCenter(selectedHour.parentElement, selectedHour);
+        if (selectedMinute) scrollIntoCenter(selectedMinute.parentElement, selectedMinute);
+        if (selectedSecond && timepicker._h_timepicker.seconds) scrollIntoCenter(selectedSecond.parentElement, selectedSecond);
       } else {
         if (autoUpdateCleanup) autoUpdateCleanup();
+        focusFirstItem = true;
         Object.assign(el.style, {
           left: "0px",
           top: "0px"
@@ -26065,7 +26264,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "0.9.0";
+var version = "1.0.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768) {