@codbex/harmonia 0.3.0 → 0.4.0

package/dist/harmonia.esm.js

@@ -18493,7 +18493,6 @@ function accordion_default(Alpine) {
       "items-start",
       "justify-between",
       "gap-4",
-      "rounded-md",
       "py-4",
       "text-left",
       "text-sm",
@@ -18575,7 +18574,7 @@ function alert_default(Alpine) {
       "items-center",
       "[&>svg]:size-4",
       "[&>svg]:text-current",
-      modifiers.includes("floating") ? "shadow-alert" : void 0
+      modifiers.includes("floating") ? "shadow-lg" : void 0
     );
     el.setAttribute("data-slot", "alert");
     el.setAttribute("role", "alert");
@@ -18627,8 +18626,6 @@ function avatar_default(Alpine) {
       "bg-secondary",
       "text-secondary-foreground",
       "fill-secondary-foreground",
-      "hover:bg-secondary-hover",
-      "active:bg-secondary-active",
       "[[data-slot=toolbar]:not([data-variant=transparent])_&]:border",
       "has-[img]:border-0",
       "flex",
@@ -18645,6 +18642,9 @@ function avatar_default(Alpine) {
     el._avatar = Alpine2.reactive({
       fallback: false
     });
+    if (el.tagName === "BUTTON") {
+      el.classList.add("cursor-pointer", "hover:bg-secondary-hover", "active:bg-secondary-active");
+    }
   });
   Alpine.directive("h-avatar-image", (el, {}, { cleanup }) => {
     const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_avatar"));
@@ -18762,50 +18762,126 @@ function badge_default(Alpine) {
 }
 
 // src/components/button.js
+var buttonVariants = {
+  default: [
+    "bg-secondary",
+    "text-secondary-foreground",
+    "shadow-control",
+    "hover:bg-secondary-hover",
+    "active:bg-secondary-active",
+    "aria-pressed:bg-secondary-active",
+    "active:data-[toggled=true]:bg-secondary-active",
+    "hover:data-[toggled=true]:bg-secondary-hover",
+    "data-[toggled=true]:bg-secondary-active"
+  ],
+  primary: [
+    "bg-primary",
+    "text-primary-foreground",
+    "shadow-control",
+    "hover:bg-primary-hover",
+    "active:bg-primary-active",
+    "aria-pressed:bg-primary-active",
+    "active:data-[toggled=true]:bg-primary-active",
+    "hover:data-[toggled=true]:bg-primary-hover",
+    "data-[toggled=true]:bg-primary-active"
+  ],
+  positive: [
+    "bg-positive",
+    "text-positive-foreground",
+    "shadow-control",
+    "hover:bg-positive-hover",
+    "active:bg-positive-active",
+    "aria-pressed:bg-positive-active",
+    "active:data-[toggled=true]:bg-positive-active",
+    "hover:data-[toggled=true]:bg-positive-hover",
+    "data-[toggled=true]:bg-positive-active"
+  ],
+  negative: [
+    "bg-negative",
+    "text-negative-foreground",
+    "shadow-control",
+    "hover:bg-negative-hover",
+    "active:bg-negative-active",
+    "aria-pressed:bg-negative-active",
+    "active:data-[toggled=true]:bg-negative-active",
+    "hover:data-[toggled=true]:bg-negative-hover",
+    "data-[toggled=true]:bg-negative-active"
+  ],
+  warning: [
+    "bg-warning",
+    "text-warning-foreground",
+    "shadow-control",
+    "hover:bg-warning-hover",
+    "active:bg-warning-active",
+    "aria-pressed:bg-warning-active",
+    "active:data-[toggled=true]:bg-warning-active",
+    "hover:data-[toggled=true]:bg-warning-hover",
+    "data-[toggled=true]:bg-warning-active"
+  ],
+  outline: [
+    "border",
+    "bg-background",
+    "text-foreground",
+    "shadow-none",
+    "hover:bg-secondary",
+    "hover:text-secondary-foreground",
+    "active:bg-secondary-active",
+    "aria-pressed:bg-secondary-active",
+    "active:data-[toggled=true]:bg-secondary-active",
+    "hover:data-[toggled=true]:bg-secondary-hover",
+    "data-[toggled=true]:bg-secondary-active"
+  ],
+  transparent: [
+    "bg-transparent",
+    "text-foreground",
+    "shadow-none",
+    "hover:bg-secondary",
+    "hover:text-secondary-foreground",
+    "active:bg-secondary-active",
+    "aria-pressed:bg-secondary-active",
+    "active:data-[toggled=true]:bg-secondary-active",
+    "hover:data-[toggled=true]:bg-secondary-hover",
+    "data-[toggled=true]:bg-secondary-active"
+  ],
+  link: ["text-primary", "underline-offset-4", "hover:underline"]
+};
+var setButtonClasses = (el) => {
+  el.classList.add(
+    "cursor-pointer",
+    "inline-flex",
+    "items-center",
+    "justify-center",
+    "gap-2",
+    "whitespace-nowrap",
+    "rounded-control",
+    "text-sm",
+    "font-medium",
+    "transition-all",
+    "disabled:pointer-events-none",
+    "disabled:opacity-50",
+    "[&_svg]:pointer-events-none",
+    "[&_svg:not([class*='size-'])]:size-4",
+    "shrink-0",
+    "[&_svg]:shrink-0",
+    "outline-none",
+    "focus-visible:border-ring",
+    "focus-visible:ring-ring/50",
+    "focus-visible:ring-[3px]",
+    "aria-invalid:ring-negative/20",
+    "dark:aria-invalid:ring-negative/40",
+    "aria-invalid:border-negative",
+    "invalid:ring-negative/20",
+    "dark:invalid:ring-negative/40",
+    "invalid:border-negative"
+  );
+};
 function button_default(Alpine) {
   Alpine.directive("h-button", (el, { modifiers }, { cleanup }) => {
-    el.classList.add(
-      "cursor-pointer",
-      "inline-flex",
-      "items-center",
-      "justify-center",
-      "gap-2",
-      "whitespace-nowrap",
-      "rounded-control",
-      "text-sm",
-      "font-medium",
-      "transition-all",
-      "disabled:pointer-events-none",
-      "disabled:opacity-50",
-      "[&_svg]:pointer-events-none",
-      "[&_svg:not([class*='size-'])]:size-4",
-      "shrink-0",
-      "[&_svg]:shrink-0",
-      "outline-none",
-      "focus-visible:border-ring",
-      "focus-visible:ring-ring/50",
-      "focus-visible:ring-[3px]",
-      "aria-invalid:ring-negative/20",
-      "dark:aria-invalid:ring-negative/40",
-      "aria-invalid:border-negative",
-      "invalid:ring-negative/20",
-      "dark:invalid:ring-negative/40",
-      "invalid:border-negative"
-    );
+    setButtonClasses(el);
     if (!el.hasAttribute("data-slot")) {
       el.setAttribute("data-slot", "button");
     }
     const inGroup = modifiers.includes("group");
-    const variants = {
-      default: ["bg-secondary", "text-secondary-foreground", "shadow-control", "hover:bg-secondary-hover", "active:bg-secondary-active", "aria-pressed:bg-secondary-active"],
-      primary: ["bg-primary", "text-primary-foreground", "shadow-control", "hover:bg-primary-hover", "active:bg-primary-active", "aria-pressed:bg-primary-active"],
-      positive: ["bg-positive", "text-positive-foreground", "shadow-control", "hover:bg-positive-hover", "active:bg-positive-active", "aria-pressed:bg-positive-active"],
-      negative: ["bg-negative", "text-negative-foreground", "shadow-control", "hover:bg-negative-hover", "active:bg-negative-active", "aria-pressed:bg-negative-active"],
-      warning: ["bg-warning", "text-warning-foreground", "shadow-control", "hover:bg-warning-hover", "active:bg-warning-active", "aria-pressed:bg-warning-active"],
-      outline: ["border", "bg-background", "text-foreground", "shadow-none", "hover:bg-secondary", "hover:text-secondary-foreground", "active:bg-secondary-active", "aria-pressed:bg-secondary-active"],
-      transparent: ["bg-transparent", "text-foreground", "shadow-none", "hover:bg-secondary", "hover:text-secondary-foreground", "active:bg-secondary-active", "aria-pressed:bg-secondary-active"],
-      link: ["text-primary", "underline-offset-4", "hover:underline"]
-    };
     const sizes = {
       default: ["h-9", "px-4", "py-2", "has-[>svg]:px-3"],
       xs: inGroup ? ["h-6", "gap-1", "px-2", "[&>svg:not([class*='size-'])]:size-3.5", "has-[>svg]:px-2"] : ["h-6.5", "gap-1.5", "px-2.5", "has-[>svg]:px-2.5"],
@@ -18814,22 +18890,13 @@ function button_default(Alpine) {
       "icon-xs": inGroup ? ["size-6", "p-0", "has-[>svg]:p-0"] : ["size-6.5"],
       "icon-sm": inGroup ? ["size-8", "p-0", "has-[>svg]:p-0"] : ["size-8"],
       icon: ["size-9"],
-      "icon-lg": ["size-10"],
-      "icon-tab": [
-        "group-data-[orientation=horizontal]/tabs:aspect-square",
-        "group-data-[orientation=horizontal]/tabs:w-auto",
-        "group-data-[style=float]/tab-bar:group-data-[orientation=horizontal]/tabs:h-full",
-        "group-data-[style=inline]/tab-bar:group-data-[orientation=horizontal]/tabs:h-[80%]",
-        "group-data-[orientation=vertical]/tabs:h-9",
-        "group-data-[style=float]/tab-bar:group-data-[orientation=vertical]/tabs:w-full",
-        "group-data-[style=inline]/tab-bar:group-data-[orientation=vertical]/tabs:w-[80%]"
-      ]
+      "icon-lg": ["size-10"]
     };
     function setVariant(variant) {
-      for (const [_, value] of Object.entries(variants)) {
+      for (const [_, value] of Object.entries(buttonVariants)) {
         el.classList.remove(...value);
       }
-      if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
+      if (buttonVariants.hasOwnProperty(variant)) el.classList.add(...buttonVariants[variant]);
     }
     function setSize(size3) {
       if (sizes.hasOwnProperty(size3)) {
@@ -18895,10 +18962,6 @@ function button_default(Alpine) {
     }
     setVariant(el.getAttribute("data-orientation") ?? "horizontal");
   });
-  Alpine.directive("h-button-group-text", (el) => {
-    el.classList.add("bg-muted", "flex", "items-center", "gap-2", "rounded-control", "border", "px-4", "text-sm", "font-medium", "shadow-xs", "[&_svg]:pointer-events-none", "[&_svg:not([class*='size-'])]:size-4");
-    el.setAttribute("data-slot", "button-group-text");
-  });
   Alpine.directive("h-button-group-separator", (el) => {
     el.classList.add("bg-foreground/20", "shrink-0", "[[data-orientation=vertical]_&]:h-px", "[[data-orientation=vertical]_&]:w-full", "h-auto", "w-px", "relative", "!m-0", "self-stretch");
     el.setAttribute("role", "none");
@@ -18906,9 +18969,6 @@ function button_default(Alpine) {
   });
 }
 
-// src/components/calendar.js
-var import_lucide2 = __toESM(require_lucide(), 1);
-
 // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
 var max = Math.max;
@@ -20388,6 +20448,7 @@ var computePosition2 = (reference, floating, options) => {
 };
 
 // src/components/calendar.js
+var import_lucide2 = __toESM(require_lucide(), 1);
 function calendar_default(Alpine) {
   Alpine.directive("h-calendar", (el, { expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
     const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_datepicker"));
@@ -20411,7 +20472,7 @@ function calendar_default(Alpine) {
     let firstDay = 0;
     let minDate = void 0;
     let maxDate = void 0;
-    function modelChange() {
+    function modelChange(triggerInput = false) {
       Alpine2.nextTick(() => {
         el.dispatchEvent(new CustomEvent("change", { detail: { date: selected } }));
       });
@@ -20424,23 +20485,27 @@ function calendar_default(Alpine) {
       }
       if (datepicker) {
         datepicker._datepicker.input.value = formatter.format(selected);
+        datepicker._datepicker.input.setCustomValidity("");
+        if (triggerInput) datepicker._datepicker.input.dispatchEvent(new Event("change", { bubbles: true }));
       } else {
         el.setAttribute("data-invalid", "false");
       }
     }
-    if (datepicker) {
-      datepicker._datepicker.input.addEventListener("change", () => {
-        selected = new Date(datepicker._datepicker.input.value);
-        if (isNaN(selected)) {
-          console.error(`h-calendar: input value is not a valid date - ${datepicker._datepicker.input.value}`);
-          datepicker._datepicker.input.setCustomValidity("Input value is not a valid date.");
-          return;
-        } else {
-          datepicker._datepicker.input.setCustomValidity("");
-        }
+    const onInputChange = () => {
+      const newValue = new Date(datepicker._datepicker.input.value);
+      if (isNaN(newValue)) {
+        console.error(`h-calendar: input value is not a valid date - ${datepicker._datepicker.input.value}`);
+        datepicker._datepicker.input.setCustomValidity("Input value is not a valid date.");
+        return;
+      } else if (selected.getTime() !== newValue.getTime()) {
+        selected = newValue;
         modelChange();
         render();
-      });
+      }
+      datepicker._datepicker.input.setCustomValidity("");
+    };
+    if (datepicker) {
+      datepicker._datepicker.input.addEventListener("change", onInputChange);
     }
     function checkForModel() {
       if (el.hasOwnProperty("_x_model") && el._x_model.get()) {
@@ -20458,7 +20523,7 @@ function calendar_default(Alpine) {
       if (event.target.getAttribute("aria-disabled") === "true") return;
       focusedDay = new Date(event.target.dataset.year, event.target.dataset.month, event.target.dataset.day);
       selected = new Date(focusedDay);
-      modelChange();
+      modelChange(true);
       render();
       if (datepicker) datepicker._datepicker.expanded = false;
     }
@@ -20621,7 +20686,7 @@ function calendar_default(Alpine) {
           "align-middle",
           "text-center",
           "size-8",
-          "rounded-sm",
+          "rounded-control",
           "outline-none",
           "hover:bg-secondary-hover",
           "hover:text-secondary-foreground",
@@ -20837,6 +20902,9 @@ function calendar_default(Alpine) {
       for (let d = 0; d < dayCells.length; d++) {
         dayCells[d].removeEventListener("click", dayClick);
       }
+      if (datepicker) {
+        datepicker._datepicker.input.removeEventListener("change", onInputChange);
+      }
     });
   });
 }
@@ -20844,7 +20912,7 @@ function calendar_default(Alpine) {
 // src/components/card.js
 function card_default(Alpine) {
   Alpine.directive("h-card", (el) => {
-    el.classList.add("bg-card", "text-card-foreground", "vbox", "gap-6", "rounded-xl", "border", "py-6", "shadow-sm");
+    el.classList.add("bg-card", "text-card-foreground", "vbox", "gap-4", "rounded-xl", "border", "py-6", "shadow-sm");
     el.setAttribute("data-slot", "card");
   });
   Alpine.directive("h-card-header", (el) => {
@@ -20875,56 +20943,58 @@ function card_default(Alpine) {
 
 // src/components/checkbox.js
 function checkbox_default(Alpine) {
-  Alpine.directive("h-checkbox", (el, {}, { cleanup }) => {
+  Alpine.directive("h-checkbox", (el) => {
     el.classList.add(
-      "appearance-none",
-      "border-input",
-      "bg-input-inner",
-      "data-[state=checked]:bg-primary",
-      "data-[state=checked]:text-primary-foreground",
-      "data-[state=checked]:border-primary",
-      "focus-visible:border-ring",
-      "focus-visible:ring-ring/50",
-      "aria-invalid:ring-negative/20",
-      "dark:aria-invalid:ring-negative/40",
-      "aria-invalid:border-negative",
-      "invalid:ring-negative/20",
-      "dark:invalid:ring-negative/40",
-      "invalid:border-negative",
-      "size-4",
-      "shrink-0",
-      "rounded-[4px]",
-      "border",
-      "shadow-control",
-      "transition-all",
-      "outline-none",
-      "focus-visible:ring-[3px]",
-      "disabled:cursor-not-allowed",
-      "disabled:opacity-50",
-      "overflow-hidden",
-      "before:block",
+      "[&>input]:absolute",
+      "[&>input]:appearance-none",
+      "[&>input]:bg-transparent",
+      "[&>input]:border-0",
+      "[&>input]:cursor-pointer",
+      "[&>input]:focus-visible:border-ring",
+      "[&>input]:focus-visible:ring-[3px]",
+      "[&>input]:focus-visible:ring-ring/50",
+      "[&>input]:left-0",
+      "[&>input]:outline-none",
+      "[&>input]:rounded-[0.25rem]",
+      "[&>input]:size-full",
+      "[&>input]:top-0",
+      "aspect-square",
       "before:bg-transparent",
-      "before:border-l-2",
+      "before:block",
       "before:border-b-2",
+      "before:border-l-2",
       "before:border-primary-foreground",
+      "before:h-2",
+      "before:invisible",
       "before:pointer-events-none",
-      "before:w-2.5",
-      "before:h-1.5",
-      "before:rounded-[0.125rem]",
       "before:-rotate-45",
       "before:translate-x-0.5",
       "before:translate-y-0.75",
-      "data-[state=unchecked]:before:hidden"
+      "before:w-3.5",
+      "bg-input-inner",
+      "border",
+      "border-input",
+      "dark:has-[aria-invalid=true]:ring-negative/40",
+      "dark:has-[input:invalid]:ring-negative/40",
+      "duration-200",
+      "has-[aria-invalid=true]:border-negative",
+      "has-[aria-invalid=true]:ring-negative/20",
+      "has-[input:checked]:before:visible",
+      "has-[input:checked]:bg-primary",
+      "has-[input:checked]:border-primary",
+      "has-[input:disabled]:cursor-not-allowed",
+      "has-[input:disabled]:opacity-50",
+      "has-[input:invalid]:border-negative",
+      "has-[input:invalid]:ring-negative/20",
+      "relative",
+      "rounded-[0.25rem]",
+      "shadow-control",
+      "shrink-0",
+      "size-5",
+      "transition-color"
     );
+    el.setAttribute("tabindex", "-1");
     el.setAttribute("data-slot", "checkbox");
-    function setState() {
-      el.setAttribute("data-state", el.checked ? "checked" : "unchecked");
-    }
-    setState();
-    el.addEventListener("change", setState);
-    cleanup(() => {
-      el.removeEventListener("change", setState);
-    });
   });
 }
 
@@ -21009,6 +21079,7 @@ function datepicker_default(Alpine) {
       "border",
       "shadow-control",
       "transition-[color,box-shadow]",
+      "duration-200",
       "outline-none",
       "h-9",
       "pl-3",
@@ -21130,7 +21201,7 @@ function dialog_default(Alpine) {
       "rounded-lg",
       "border",
       "p-4",
-      "shadow-lg",
+      "shadow-xl",
       "sm:max-w-lg"
     );
     el.setAttribute("role", "dialog");
@@ -21288,7 +21359,7 @@ function info_page_default(Alpine) {
     el.setAttribute("data-slot", "info-page-header");
   });
   Alpine.directive("h-info-page-media", (el, { modifiers }) => {
-    el.classList.add("hbox", "shrink-0", "items-center", "justify-center", "mb-2", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0");
+    el.classList.add("hbox", "shrink-0", "items-center", "justify-center", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0");
     if (modifiers.includes("icon")) el.classList.add("bg-muted", "text-foreground", "size-10", "shrink-0", "items-center", "justify-center", "rounded-lg", "[&_svg:not([class*='size-'])]:size-6");
     else el.classList.add("bg-transparent");
     el.setAttribute("data-slot", "info-page-media");
@@ -21481,6 +21552,156 @@ function label_default(Alpine) {
   });
 }
 
+// src/components/list.js
+function list_default(Alpine) {
+  Alpine.directive("h-listbox", (el, {}, { cleanup }) => {
+    el.classList.add(
+      "divide-solid",
+      "divide-y",
+      "bg-input-inner",
+      "border-input",
+      "border",
+      "rounded-control",
+      "shadow-control",
+      "outline-none",
+      "disabled:pointer-events-none",
+      "disabled:cursor-not-allowed",
+      "disabled:opacity-50",
+      "focus-visible:border-ring",
+      "focus-visible:ring-ring/50",
+      "focus-visible:ring-[3px]",
+      "aria-invalid:ring-negative/20",
+      "dark:aria-invalid:ring-negative/40",
+      "aria-invalid:border-negative",
+      "invalid:ring-negative/20",
+      "dark:invalid:ring-negative/40",
+      "invalid:border-negative",
+      "[&>ul:first-child>*:first-child]:rounded-t-control",
+      "[&>ul:last-child>*:last-child]:rounded-b-control"
+    );
+    el.setAttribute("data-slot", "listbox");
+    el.setAttribute("role", "listbox");
+    function focusFirstOption(elem) {
+      const firstOption = elem.querySelector('[role="option"]');
+      if (firstOption) firstOption.focus();
+    }
+    function focusLastOption(elem) {
+      const itemList = elem.querySelectorAll('[role="option"]');
+      if (itemList.length) {
+        itemList[itemList.length - 1].focus();
+      }
+    }
+    function selectOption(option) {
+      const selected = el.querySelector('[aria-selected="true"]');
+      if (selected) selected.removeAttribute("aria-selected");
+      if (selected !== option) option.setAttribute("aria-selected", "true");
+    }
+    function onKeyDown(event) {
+      switch (event.key) {
+        case "PageUp":
+        case "PageDown":
+          event.preventDefault();
+          break;
+        case "Home":
+          focusFirstOption(el);
+          break;
+        case "End":
+          focusLastOption(el);
+          break;
+        case "ArrowUp":
+          let prevElem = event.target.previousElementSibling;
+          if (prevElem && prevElem.getAttribute("data-slot") !== "list-header") {
+            prevElem.focus();
+          } else {
+            prevElem = event.target.parentElement.previousElementSibling;
+            if (prevElem && prevElem.tagName === "UL") {
+              focusLastOption(prevElem);
+            }
+          }
+          break;
+        case "ArrowDown":
+          let nextElem = event.target.nextElementSibling;
+          if (nextElem) {
+            nextElem.focus();
+          } else {
+            nextElem = event.target.parentElement.nextElementSibling;
+            if (nextElem && nextElem.tagName === "UL") {
+              focusFirstOption(nextElem);
+            }
+          }
+          break;
+        case " ":
+        case "Enter":
+          selectOption(event.target);
+          break;
+        default:
+          break;
+      }
+    }
+    function onClick(event) {
+      if (event.target.getAttribute("data-slot") === "list-item") selectOption(event.target);
+    }
+    el.addEventListener("click", onClick);
+    el.addEventListener("keydown", onKeyDown);
+    cleanup(() => {
+      el.removeEventListener("keydown", onKeyDown);
+      el.removeEventListener("click", onClick);
+    });
+  });
+  Alpine.directive("h-list", (el) => {
+    el.classList.add("divide-solid", "divide-y");
+    el.setAttribute("data-slot", "list");
+    el.setAttribute("role", "group");
+  });
+  Alpine.directive("h-list-header", (el, {}, { Alpine: Alpine2 }) => {
+    el.classList.add("font-medium", "flex", "items-center", "p-2", "gap-2", "align-middle", "bg-table-header", "text-table-header-foreground");
+    el.setAttribute("role", "presentation");
+    el.setAttribute("data-slot", "list-header");
+    const list = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "list");
+    if (!list) {
+      throw new Error("h-list-header: must be placed inside an h-list element");
+    }
+    if (el.hasAttribute("id")) {
+      list.setAttribute("aria-labelledby", el.getAttribute("id"));
+    } else {
+      const id = `lbh${v4_default()}`;
+      el.setAttribute("id", id);
+      list.setAttribute("aria-labelledby", id);
+    }
+  });
+  Alpine.directive("h-list-item", (el, { modifiers }) => {
+    el.classList.add("min-h-11", "flex", "items-center", "p-2", "gap-2", "align-middle", "outline-none");
+    el.setAttribute("data-slot", "list-item");
+    const listbox = Alpine.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "listbox");
+    function setInteractive() {
+      el.classList.add(
+        "focus:bg-table-hover",
+        "focus:text-table-hover-foreground",
+        "hover:bg-table-hover",
+        "hover:text-table-hover-foreground",
+        "active:bg-table-active",
+        "active:text-table-active-foreground",
+        "aria-selected:bg-primary",
+        "aria-selected:text-primary-foreground",
+        "[&[aria-selected=true]:hover]:bg-primary-hover",
+        "[&[aria-selected=true]:hover]:text-primary-hover-foreground",
+        "[&[aria-selected=true]:focus]:bg-primary-hover",
+        "[&[aria-selected=true]:focus]:text-primary-hover-foreground"
+      );
+      el.setAttribute("tabindex", "0");
+    }
+    if (listbox) {
+      setInteractive();
+      el.setAttribute("role", "option");
+      el.setAttribute("tabindex", "0");
+    } else if (modifiers.includes("interactive")) {
+      setInteractive();
+    } else {
+      el.setAttribute("tabindex", "-1");
+    }
+  });
+}
+
 // src/components/menu.js
 function menu_default(Alpine) {
   Alpine.directive("h-menu-trigger", (el, { modifiers }) => {
@@ -21497,11 +21718,18 @@ function menu_default(Alpine) {
     if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
       throw new Error('h-menu: must have an "aria-label" or "aria-labelledby" attribute');
     }
-    const menuTrigger = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_menu_trigger"));
-    if (!menuTrigger) {
-      throw new Error("h-menu: menu must be inside an h-menu-trigger");
+    const isSubmenu = modifiers.includes("sub");
+    const menuTrigger = (() => {
+      if (isSubmenu) return;
+      let sibling = el.previousElementSibling;
+      while (sibling && !sibling.hasOwnProperty("_menu_trigger")) {
+        sibling = sibling.previousElementSibling;
+      }
+      return sibling;
+    })();
+    if (!isSubmenu && !menuTrigger) {
+      throw new Error("h-menu: menu must be placed after an h-menu-trigger element");
     }
-    let isSubmenu = modifiers.includes("sub");
     let menuSubItem;
     if (isSubmenu) menuSubItem = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "menu-sub");
     function listenForTrigger(listen) {
@@ -21560,12 +21788,17 @@ function menu_default(Alpine) {
         switch (event.key) {
           case "Left":
           case "ArrowLeft":
+            if (isSubmenu) {
+              Alpine2.nextTick(() => menuSubItem.focus());
+              close();
+            }
+            break;
           case "Esc":
           case "Escape":
-            close();
             if (isSubmenu) {
-              setTimeout(() => menuSubItem.focus(), 0);
+              Alpine2.nextTick(() => menuSubItem.focus());
             }
+            close();
             break;
           case "Tab":
           case " ":
@@ -21657,16 +21890,19 @@ function menu_default(Alpine) {
             })
           ]
         }).then(({ x, y }) => {
+          if (!isSubmenu) {
+            Alpine2.nextTick(() => el.focus());
+            listenForTrigger(false);
+          }
+          Alpine2.nextTick(() => {
+            top.addEventListener("contextmenu", onClick);
+            top.addEventListener("click", onClick);
+            el.addEventListener("keydown", onKeydown);
+          });
           Object.assign(el.style, {
             left: `${x}px`,
             top: `${y}px`
           });
-          if (!isSubmenu) Alpine2.nextTick(() => el.focus());
-          setTimeout(() => {
-            top.addEventListener("contextmenu", onClick);
-            top.addEventListener("click", onClick);
-            el.addEventListener("keydown", onKeydown);
-          }, 0);
         });
       }
     }
@@ -21920,27 +22156,19 @@ function menu_default(Alpine) {
     el.setAttribute("role", "menuitemcheckbox");
     el.setAttribute("data-slot", "menu-checkbox-item");
     function setState(checked, dispatch = true) {
-      el.setAttribute("aria-checked", checked);
       if (dispatch)
-        setTimeout(() => {
+        Alpine2.nextTick(() => {
           el.dispatchEvent(new Event("change", { bubbles: true }));
-        }, 0);
+        });
+      el.setAttribute("aria-checked", checked);
     }
     if (el.hasOwnProperty("_x_model")) {
-      let handler2 = function(event) {
-        if (event.type === "keydown") {
-          if (event.key !== " " && event.key !== "Enter") {
-            return;
-          } else if (event.key === " ") {
-            event.preventDefault();
-          }
-        }
+      let handler2 = function() {
         el._x_model.set(!el._x_model.get());
         setState(el._x_model.get());
       };
       setState(el._x_model.get(), false);
       el.addEventListener("click", handler2);
-      el.addEventListener("keydown", handler2);
     }
     const menu = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "menu");
     function focusOut(event) {
@@ -22146,14 +22374,13 @@ function pagination_default(Alpine) {
 
 // src/components/popover.js
 function popover_default(Alpine) {
-  Alpine.directive("h-popover", (el, { expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
+  Alpine.directive("h-popover-trigger", (el, { expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2, cleanup }) => {
     el._popover = Alpine2.reactive({
       id: void 0,
       controls: `hpc${v4_default()}`,
-      auto: modifiers.includes("auto"),
+      auto: expression ? false : true,
       expanded: expression ? evaluate2(expression) : false
     });
-    el.setAttribute("data-slot", "popover");
     if (expression) {
       const getExpanded = evaluateLater(expression);
       effect(() => {
@@ -22162,43 +22389,39 @@ function popover_default(Alpine) {
         });
       });
     }
-  });
-  Alpine.directive("h-popover-trigger", (el, { modifiers }, { effect, Alpine: Alpine2, cleanup }) => {
-    const popover = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_popover"));
-    if (!popover) {
-      throw new Error("h-popover-trigger must be inside an h-popover element");
-    }
     el.setAttribute("type", "button");
     if (modifiers.includes("chevron")) {
       el.classList.add("[&_svg]:transition-transform", "[&[data-state=open]>svg:not(:first-child):last-child]:rotate-180");
     }
     if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "popover-trigger");
     if (el.hasAttribute("id")) {
-      popover._popover.id = el.getAttribute("id");
+      el._popover.id = el.getAttribute("id");
     } else {
-      popover._popover.id = `hp${v4_default()}`;
-      el.setAttribute("id", popover._popover.id);
+      el._popover.id = `hp${v4_default()}`;
+      el.setAttribute("id", el._popover.id);
     }
-    el.setAttribute("aria-controls", popover._popover.controls);
+    el.setAttribute("aria-controls", el._popover.controls);
     el.setAttribute("aria-haspopup", "dialog");
     const setAttributes = () => {
-      el.setAttribute("data-state", popover._popover.expanded ? "open" : "closed");
-      el.setAttribute("aria-expanded", popover._popover.expanded);
+      el.setAttribute("data-state", el._popover.expanded ? "open" : "closed");
+      el.setAttribute("aria-expanded", el._popover.expanded);
     };
     const close = () => {
-      popover._popover.expanded = false;
+      el._popover.expanded = false;
+      el.addEventListener("click", handler2);
     };
     const handler2 = () => {
-      popover._popover.expanded = !popover._popover.expanded;
+      el._popover.expanded = !el._popover.expanded;
       setAttributes();
       Alpine2.nextTick(() => {
-        if (popover._popover.auto && popover._popover.expanded) {
+        if (el._popover.auto && el._popover.expanded) {
           top.addEventListener("click", close, { once: true });
+          el.removeEventListener("click", handler2);
         }
       });
     };
     setAttributes();
-    if (popover._popover.auto) {
+    if (el._popover.auto) {
       el.addEventListener("click", handler2);
       cleanup(() => {
         el.removeEventListener("click", handler2);
@@ -22210,13 +22433,19 @@ function popover_default(Alpine) {
       });
     }
   });
-  Alpine.directive("h-popover-content", (el, { modifiers }, { effect, Alpine: Alpine2 }) => {
-    const popover = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_popover"));
+  Alpine.directive("h-popover", (el, { modifiers }, { effect }) => {
+    const popover = (() => {
+      let sibling = el.previousElementSibling;
+      while (sibling && !sibling.hasOwnProperty("_popover")) {
+        sibling = sibling.previousElementSibling;
+      }
+      return sibling;
+    })();
     if (!popover) {
-      throw new Error("h-popover-content must be inside an h-popover element");
+      throw new Error("h-popover-content must be placed after an h-popover element");
     }
-    el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "top-0", "left-0", "z-50", "min-w-[1rem]", "rounded-control", "border", "shadow-md", "outline-hidden", "overflow-scroll");
-    el.setAttribute("data-slot", "popover-content");
+    el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "top-0", "left-0", "z-50", "min-w-[1rem]", "rounded-md", "border", "shadow-md", "outline-hidden", "overflow-scroll");
+    el.setAttribute("data-slot", "popover");
     el.setAttribute("role", "dialog");
     el.setAttribute("tabindex", "-1");
     el.setAttribute("id", popover._popover.controls);
@@ -22227,13 +22456,9 @@ function popover_default(Alpine) {
       el.classList.remove("overflow-scroll");
       el.classList.add("overflow-none");
     }
-    const control = popover.querySelector(`#${popover._popover.id}`);
-    if (!control) {
-      throw new Error("h-popover-content: trigger not found");
-    }
     let autoUpdateCleanup;
     function updatePosition() {
-      computePosition2(control, el, {
+      computePosition2(popover, el, {
         placement: el.getAttribute("data-align") || "bottom-start",
         middleware: [
           offset2(4),
@@ -22258,7 +22483,7 @@ function popover_default(Alpine) {
     effect(() => {
       el.setAttribute("data-state", popover._popover.expanded ? "open" : "closed");
       if (popover._popover.expanded) {
-        autoUpdateCleanup = autoUpdate(control, el, updatePosition);
+        autoUpdateCleanup = autoUpdate(popover, el, updatePosition);
       } else {
         if (autoUpdateCleanup) autoUpdateCleanup();
         Object.assign(el.style, {
@@ -22297,40 +22522,48 @@ function progress_default(Alpine) {
 function radio_default(Alpine) {
   Alpine.directive("h-radio", (el) => {
     el.classList.add(
-      "appearance-none",
-      "border-input",
-      "bg-input-inner",
-      "text-primary",
-      "focus-visible:border-ring",
-      "focus-visible:ring-ring/50",
-      "aria-invalid:ring-negative/20",
-      "dark:aria-invalid:ring-negative/40",
-      "aria-invalid:border-negative",
-      "invalid:ring-negative/20",
-      "dark:invalid:ring-negative/40",
-      "invalid:border-negative",
+      "[&>input]:absolute",
+      "[&>input]:appearance-none",
+      "[&>input]:bg-transparent",
+      "[&>input]:border-0",
+      "[&>input]:cursor-pointer",
+      "[&>input]:focus-visible:border-ring",
+      "[&>input]:focus-visible:ring-[3px]",
+      "[&>input]:focus-visible:ring-ring/50",
+      "[&>input]:left-0",
+      "[&>input]:outline-none",
+      "[&>input]:rounded-full",
+      "[&>input]:size-full",
+      "[&>input]:top-0",
       "aspect-square",
-      "size-4",
-      "shrink-0",
-      "rounded-full",
-      "border",
-      "shadow-control",
-      "transition-color",
-      "duration-200",
-      "outline-none",
-      "focus-visible:ring-[3px]",
-      "disabled:cursor-not-allowed",
-      "disabled:opacity-50",
-      "before:block",
       "before:bg-clip-padding",
-      "before:rounded-full",
-      "before:h-full",
-      "before:w-full",
       "before:bg-primary",
-      "before:border-input-inner",
+      "before:block",
       "before:border-3",
-      "not-checked:before:hidden"
+      "before:border-transparent",
+      "before:invisible",
+      "before:pointer-events-none",
+      "before:rounded-full",
+      "before:size-full",
+      "bg-input-inner",
+      "border",
+      "border-input",
+      "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:checked]:before:visible",
+      "has-[input:disabled]:cursor-not-allowed",
+      "has-[input:disabled]:opacity-50",
+      "has-[input:invalid]:border-negative",
+      "has-[input:invalid]:ring-negative/20",
+      "relative",
+      "rounded-full",
+      "shadow-control",
+      "shrink-0",
+      "size-5"
     );
+    el.setAttribute("tabindex", "-1");
     el.setAttribute("data-slot", "radio");
   });
 }
@@ -22852,21 +23085,40 @@ function separator_default(Alpine) {
 
 // src/components/sidebar.js
 function sidebar_default(Alpine) {
-  Alpine.directive("h-sidebar", (el, { modifiers }) => {
-    el.classList.add("group/sidebar", "bg-sidebar", "text-sidebar-foreground", "border-sidebar-border", "vbox", "h-full", "w-(--sidebar-width,16rem)");
-    if (modifiers.includes("floating")) {
-      el.classList.add("border", "rounded-lg", "shadow-sm", "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]");
-    } else el.classList.add("group-data-[collapsible=icon]:w-(--sidebar-width-icon)");
+  Alpine.directive("h-sidebar", (el, { modifiers }, { cleanup }) => {
+    el.classList.add("group/sidebar", "bg-sidebar", "text-sidebar-foreground", "border-sidebar-border", "vbox", "h-full", "w-(--sidebar-width,16rem)", "data-[collapsed=true]:w-min");
     if (modifiers.includes("right")) el.classList.add("border-l");
     else el.classList.add("border-r");
     el.setAttribute("data-slot", "sidebar");
+    const setFloating = () => {
+      if (el.getAttribute("data-floating") === "true") {
+        el.classList.add("border", "rounded-lg", "shadow-sm");
+      } else {
+        el.classList.remove("border", "rounded-lg", "shadow-sm");
+      }
+    };
+    setFloating();
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "attributes") {
+          if (mutation.attributeName === "data-floating") {
+            setFloating();
+          }
+        }
+      });
+    });
+    observer.observe(el, { attributes: true });
+    cleanup(() => {
+      observer.disconnect();
+    });
   });
   Alpine.directive("h-sidebar-header", (el) => {
-    el.classList.add("vbox", "gap-2", "p-2");
+    el.classList.add("vbox", "gap-2", "px-2", "h-12", "justify-center", "border-b");
+    if (el.dataset.borderless && el.dataset.borderless === "true") el.classList.remove("border-b");
     el.setAttribute("data-slot", "sidebar-header");
   });
   Alpine.directive("h-sidebar-content", (el) => {
-    el.classList.add("vbox", "min-h-0", "flex-1", "gap-2", "overflow-auto", "group-data-[collapsible=icon]:overflow-hidden");
+    el.classList.add("vbox", "min-h-0", "flex-1", "gap-2", "overflow-auto", "group-data-[collapsed=true]/sidebar:overflow-hidden");
     el.setAttribute("data-slot", "sidebar-content");
   });
   Alpine.directive("h-sidebar-group", (el) => {
@@ -22892,8 +23144,7 @@ function sidebar_default(Alpine) {
       "focus-visible:ring-2",
       "[&>svg]:size-4",
       "[&>svg]:shrink-0",
-      "group-data-[collapsible=icon]:-mt-8",
-      "group-data-[collapsible=icon]:opacity-0"
+      "group-data-[collapsed=true]/sidebar:!hidden"
     );
     if (modifiers.includes("action")) el.classList.add("hover:bg-secondary-hover", "active:bg-secondary-active");
     el.setAttribute("data-slot", "sidebar-group-label");
@@ -22922,7 +23173,7 @@ function sidebar_default(Alpine) {
       "after:absolute",
       "after:-inset-2",
       "md:after:hidden",
-      "group-data-[collapsible=icon]:hidden"
+      "group-data-[collapsed=true]/sidebar:hidden"
     );
     el.setAttribute("data-slot", "sidebar-group-action");
   });
@@ -22969,8 +23220,9 @@ function sidebar_default(Alpine) {
       "data-[active=true]:text-sidebar-primary-foreground",
       "data-[state=open]:hover:bg-sidebar-secondary",
       "data-[state=open]:hover:text-sidebar-secondary-foreground",
-      "group-data-[collapsible=icon]:size-8!",
-      "group-data-[collapsible=icon]:p-2!",
+      "group-data-[collapsed=true]/sidebar:!size-8",
+      "group-data-[collapsed=true]/sidebar:!p-2",
+      "group-data-[collapsed=true]/sidebar:[&>*:not(svg:first-child):not([data-slot=menu])]:!hidden",
       "[&>span]:truncate",
       "[&>span]:align-middle",
       "[&>svg]:size-4",
@@ -22981,7 +23233,7 @@ function sidebar_default(Alpine) {
     const sizes = {
       default: ["h-8", "text-sm"],
       sm: ["h-7", "text-xs"],
-      lg: ["h-12", "text-sm", "group-data-[collapsible=icon]:p-0!"]
+      lg: ["h-12", "text-sm", "group-data-[collapsed=true]/sidebar:p-0!"]
     };
     function setSize(size3) {
       if (sizes.hasOwnProperty(size3)) {
@@ -23019,7 +23271,7 @@ function sidebar_default(Alpine) {
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
       "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden"
+      "group-data-[collapsed=true]/sidebar:hidden"
     );
     if (modifiers.includes("autohide")) {
       el.classList.add("peer-data-[active=true]/menu-button:text-sidebar-secondary-foreground", "group-focus-within/menu-item:opacity-100", "group-hover/menu-item:opacity-100", "data-[state=open]:opacity-100", "md:opacity-0");
@@ -23048,7 +23300,7 @@ function sidebar_default(Alpine) {
       "peer-data-[size=sm]/menu-button:top-1",
       "peer-data-[size=default]/menu-button:top-1.5",
       "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsible=icon]:hidden"
+      "group-data-[collapsed=true]/sidebar:hidden"
     );
     el.setAttribute("data-slot", "sidebar-menu-badge");
   });
@@ -23071,7 +23323,7 @@ function sidebar_default(Alpine) {
     el.setAttribute("role", "none");
   });
   Alpine.directive("h-sidebar-menu-sub", (el, { modifiers }) => {
-    el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "py-0.5", "group-data-[collapsible=icon]:hidden");
+    el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "py-0.5", "group-data-[collapsed=true]/sidebar:hidden");
     if (!modifiers.includes("flat")) {
       el.classList.add("border-sidebar-border", "mx-3.5", "border-l", "px-2.5");
     }
@@ -23114,7 +23366,7 @@ function sidebar_default(Alpine) {
       "[&>svg:not(:first-child):last-child]:ml-auto",
       "data-[active=true]:bg-sidebar-primary",
       "data-[active=true]:text-sidebar-primary-foreground",
-      "group-data-[collapsible=icon]:hidden"
+      "group-data-[collapsed=true]/sidebar:hidden"
     );
     el.setAttribute("data-slot", "sidebar-menu-sub-button");
     const sizes = {
@@ -23130,7 +23382,8 @@ function sidebar_default(Alpine) {
     setSize(el.getAttribute("data-size"));
   });
   Alpine.directive("h-sidebar-footer", (el) => {
-    el.classList.add("vbox", "gap-2", "p-2");
+    el.classList.add("vbox", "gap-2", "px-2", "h-12", "justify-center", "border-t");
+    if (el.dataset.borderless && el.dataset.borderless === "true") el.classList.remove("border-t");
     el.setAttribute("data-slot", "sidebar-footer");
   });
 }
@@ -23142,7 +23395,7 @@ function skeleton_default(Alpine) {
     if (modifiers.includes("control")) {
       el.classList.add("rounded-control");
     } else if (modifiers.includes("card")) {
-      el.classList.add("rounded-xl");
+      el.classList.add("rounded-lg");
     } else if (modifiers.includes("avatar")) {
       el.classList.add("rounded-full", "size-8");
     } else el.classList.add("rounded-md");
@@ -23162,52 +23415,53 @@ function spinner_default(Alpine) {
 
 // src/components/switch.js
 function switch_default(Alpine) {
-  Alpine.directive("h-switch", (el, {}, { cleanup }) => {
+  Alpine.directive("h-switch", (el) => {
     el.classList.add(
-      "appearance-none",
-      "peer",
-      "data-[state=checked]:bg-primary",
-      "data-[state=unchecked]:bg-input",
-      "focus-visible:border-ring",
-      "focus-visible:ring-ring/50",
-      "inline-flex",
-      "data-[size=sm]:h-5",
-      "data-[size=sm]:w-8",
-      "h-6",
-      "w-10",
-      "shrink-0",
-      "items-center",
-      "rounded-full",
-      "border",
-      "border-transparent",
-      "shadow-control",
-      "transition-all",
-      "duration-200",
-      "outline-none",
-      "focus-visible:ring-[3px]",
-      "disabled:cursor-not-allowed",
-      "disabled:opacity-50",
-      "before:block",
+      "[&>input]:absolute",
+      "[&>input]:appearance-none",
+      "[&>input]:bg-transparent",
+      "[&>input]:border-0",
+      "[&>input]:cursor-pointer",
+      "[&>input]:focus-visible:border-ring",
+      "[&>input]:focus-visible:ring-[3px]",
+      "[&>input]:focus-visible:ring-ring/50",
+      "[&>input]:left-0",
+      "[&>input]:outline-none",
+      "[&>input]:rounded-full",
+      "[&>input]:size-full",
+      "[&>input]:top-0",
       "before:bg-background",
+      "before:duration-200",
+      "before:inline-block",
+      "before:m-[1px]",
       "before:pointer-events-none",
-      "data-[size=sm]:before:size-4",
-      "before:size-5",
-      "before:rounded-full",
       "before:ring-0",
+      "before:rounded-full",
+      "before:shadow-control",
+      "before:size-5",
       "before:transition-transform",
-      "before:duration-200",
-      "data-[state=checked]:before:translate-x-[calc(100%-3px)]",
-      "data-[state=unchecked]:before:translate-x-[1px]"
+      "bg-muted",
+      "border",
+      "data-[size=sm]:before:size-4",
+      "data-[size=sm]:h-5",
+      "data-[size=sm]:max-w-8",
+      "data-[size=sm]:min-w-8",
+      "duration-200",
+      "h-6",
+      "has-[input:checked]:before:translate-x-[calc(100%-var(--spacing)*1)]",
+      "has-[input:checked]:bg-primary",
+      "has-[input:checked]:border-primary-active",
+      "has-[input:disabled]:cursor-not-allowed",
+      "has-[input:disabled]:opacity-50",
+      "max-w-10",
+      "min-w-10",
+      "relative",
+      "rounded-full",
+      "shrink-0",
+      "transition-color"
     );
+    el.setAttribute("tabindex", "-1");
     el.setAttribute("data-slot", "switch");
-    function setState() {
-      el.setAttribute("data-state", el.checked ? "checked" : "unchecked");
-    }
-    setState();
-    el.addEventListener("change", setState);
-    cleanup(() => {
-      el.removeEventListener("change", setState);
-    });
   });
 }
 
@@ -23245,19 +23499,60 @@ function table_default(Alpine) {
     el.setAttribute("data-slot", "table-header");
   });
   Alpine.directive("h-table-head", (el) => {
-    el.classList.add("text-foreground", "h-10", "px-2", "text-left", "align-middle", "font-medium", "whitespace-nowrap", "[&:has([role=checkbox])]:pr-0", "[&>[role=checkbox]]:flex", "[&>[role=checkbox]]:items-center");
+    el.classList.add(
+      "text-foreground",
+      "[&[data-hoverable=true]:hover]:bg-table-hover",
+      "[&[data-hoverable=true]:hover]:text-table-hover-foreground",
+      "[&[data-activable=true]:active]:!bg-table-active",
+      "[&[data-activable=true]:active]:!text-table-active-foreground",
+      "h-10",
+      "px-2",
+      "text-left",
+      "align-middle",
+      "font-medium",
+      "whitespace-nowrap",
+      "[&:has([role=checkbox])]:pr-0",
+      "[&>[role=checkbox]]:flex",
+      "[&>[role=checkbox]]:items-center"
+    );
     el.setAttribute("data-slot", "table-head");
   });
   Alpine.directive("h-table-cell", (el) => {
-    el.classList.add("p-2", "align-middle", "whitespace-nowrap", "[&:has([role=checkbox])]:pr-0", "[&>[role=checkbox]]:flex", "[&>[role=checkbox]]:items-center");
+    el.classList.add(
+      "p-2",
+      "align-middle",
+      "whitespace-nowrap",
+      "[&:has([role=checkbox])]:pr-0",
+      "[&>[role=checkbox]]:flex",
+      "[&>[role=checkbox]]:items-center",
+      "[&[data-hoverable=true]:hover]:bg-table-hover",
+      "[&[data-hoverable=true]:hover]:text-table-hover-foreground",
+      "[&[data-activable=true]:active]:!bg-table-active",
+      "[&[data-activable=true]:active]:!text-table-active-foreground"
+    );
     el.setAttribute("data-slot", "table-cell");
   });
   Alpine.directive("h-table-body", (el) => {
-    el.classList.add("[&_tr:last-child_td]:border-b-0", "[&_tr:last-child_th]:border-b-0", "[&_tr_th]:bg-table-header", "[&_tr:hover_th]:bg-table-hover", "[&_tr:hover_th]:text-table-hover-foreground");
+    el.classList.add(
+      "[&_tr:last-child_td]:border-b-0",
+      "[&_tr:last-child_th]:border-b-0",
+      "[&_tr_th]:bg-table-header",
+      "[&_tr[data-hoverable=true]:hover_th]:bg-table-hover",
+      "[&_tr[data-hoverable=true]:hover_th]:text-table-hover-foreground",
+      "[&_tr[data-activable=true]:active_th]:!bg-table-active",
+      "[&_tr[data-activable=true]:active_th]:!text-table-active-foreground"
+    );
     el.setAttribute("data-slot", "table-body");
   });
   Alpine.directive("h-table-row", (el) => {
-    el.classList.add("hover:bg-table-hover", "hover:text-table-hover-foreground", "data-[state=selected]:bg-muted");
+    el.classList.add(
+      "[&[data-hoverable=true]:hover]:bg-table-hover",
+      "[&[data-hoverable=true]:hover]:text-table-hover-foreground",
+      "[&[data-activable=true]:active]:!bg-table-active",
+      "[&[data-activable=true]:active]:!text-table-active-foreground",
+      "data-[state=selected]:bg-table-active",
+      "data-[state=selected]:text-table-active-foreground"
+    );
     el.setAttribute("data-slot", "table-row");
   });
   Alpine.directive("h-table-caption", (el) => {
@@ -23280,18 +23575,23 @@ function tabs_default(Alpine) {
     el.classList.add(
       "group/tab-bar",
       "flex",
-      "gap-1.5",
+      "gap-1",
       "bg-object-header",
       "text-object-header-foreground",
       "group-data-[orientation=horizontal]/tabs:flex-row",
       "group-data-[orientation=vertical]/tabs:flex-col",
-      "data-[style=inline]:group-data-[orientation=horizontal]/tabs:inset-shadow-[0_-.063rem_var(--border)]",
-      "data-[style=inline]:group-data-[orientation=vertical]/tabs:inset-shadow-[-.063rem_0_var(--border)]",
-      "data-[style=inline]:group-data-[orientation=horizontal]/tabs:h-11",
-      "data-[style=inline]:data-[size=sm]:group-data-[orientation=horizontal]/tabs:h-8",
-      "data-[style=float]:border",
-      "data-[style=float]:rounded-lg",
-      "data-[style=float]:p-[3px]"
+      "[&:not([data-floating=true])]:group-data-[orientation=horizontal]/tabs:inset-shadow-[0_-.063rem_var(--border)]",
+      "[&:not([data-floating=true])]:group-data-[orientation=vertical]/tabs:inset-shadow-[-.063rem_0_var(--border)]",
+      "[&:not([data-floating=true])]:group-data-[orientation=horizontal]/tabs:h-10",
+      "[&:not([data-floating=true])]:group-data-[orientation=horizontal]/tabs:min-h-10",
+      "[&:not([data-floating=true])]:data-[size=sm]:group-data-[orientation=horizontal]/tabs:h-8",
+      "[&:not([data-floating=true])]:data-[size=sm]:group-data-[orientation=horizontal]/tabs:min-h-8",
+      "[&:not([data-floating=true])]:data-[size=lg]:group-data-[orientation=horizontal]/tabs:h-12",
+      "[&:not([data-floating=true])]:data-[size=lg]:group-data-[orientation=horizontal]/tabs:min-h-12",
+      "data-[floating=true]:border",
+      "data-[floating=true]:shadow-xs",
+      "data-[floating=true]:rounded-lg",
+      "data-[floating=true]:p-[0.188rem]"
     );
     el.setAttribute("data-slot", "tab-bar");
   });
@@ -23304,8 +23604,8 @@ function tabs_default(Alpine) {
       "group-data-[orientation=horizontal]/tabs:flex-row",
       "group-data-[orientation=vertical]/tabs:flex-col",
       "group-data-[orientation=vertical]/tabs:h-fit",
-      "group-data-[style=inline]/tab-bar:gap-2",
-      "group-data-[style=float]/tab-bar:gap-1"
+      "gap-2",
+      "group-data-[floating=true]/tab-bar:gap-1"
     );
     el.setAttribute("role", "tablist");
     el.setAttribute("data-slot", "tab-list");
@@ -23321,8 +23621,7 @@ function tabs_default(Alpine) {
       "aria-selected:text-foreground",
       "inline-flex",
       "group-data-[orientation=vertical]/tabs:w-full",
-      "group-data-[orientation=vertical]/tabs:h-9",
-      "group-data-[orientation=vertical]/tabs:group-data-[size=sm]/tab-bar:h-8",
+      "group-data-[orientation=vertical]/tabs:h-8",
       "group-data-[orientation=horizontal]/tabs:h-full",
       "items-center",
       "justify-start",
@@ -23333,21 +23632,21 @@ function tabs_default(Alpine) {
       "font-medium",
       "whitespace-nowrap",
       "transition-[color,box-shadow]",
-      "group-data-[style=float]/tab-bar:rounded-md",
-      "group-data-[style=float]/tab-bar:border",
-      "group-data-[style=float]/tab-bar:border-transparent",
-      "group-data-[style=float]/tab-bar:aria-selected:bg-background",
-      "group-data-[style=float]/tab-bar:aria-selected:border-border",
-      "group-data-[style=float]/tab-bar:hover:bg-background",
-      "group-data-[style=float]/tab-bar:hover:border-border",
-      "group-data-[style=inline]/tab-bar:border-0",
-      "group-data-[style=inline]/tab-bar:group-data-[orientation=horizontal]/tabs:hover:inset-shadow-[0_-.188rem_var(--border)]",
-      "group-data-[style=inline]/tab-bar:group-data-[orientation=horizontal]/tabs:aria-selected:inset-shadow-[0_-.125rem_var(--primary)]",
-      "group-data-[style=inline]/tab-bar:group-data-[orientation=horizontal]/tabs:hover:aria-selected:inset-shadow-[0_-.188rem_var(--primary)]",
-      "group-data-[style=inline]/tab-bar:group-data-[orientation=vertical]/tabs:px-3.5",
-      "group-data-[style=inline]/tab-bar:group-data-[orientation=vertical]/tabs:hover:inset-shadow-[-.188rem_0_var(--border)]",
-      "group-data-[style=inline]/tab-bar:group-data-[orientation=vertical]/tabs:aria-selected:inset-shadow-[-.125rem_0_var(--primary)]",
-      "group-data-[style=inline]/tab-bar:group-data-[orientation=vertical]/tabs:hover:aria-selected:inset-shadow-[-.188rem_0_var(--primary)]",
+      "group-data-[floating=true]/tab-bar:rounded-md",
+      "group-data-[floating=true]/tab-bar:border",
+      "group-data-[floating=true]/tab-bar:border-transparent",
+      "group-data-[floating=true]/tab-bar:aria-selected:bg-background",
+      "group-data-[floating=true]/tab-bar:aria-selected:border-border",
+      "group-data-[floating=true]/tab-bar:hover:bg-background",
+      "group-data-[floating=true]/tab-bar:hover:border-border",
+      "group-[&:not([data-floating=true])]/tab-bar:border-0",
+      "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=horizontal]/tabs:hover:inset-shadow-[0_-.188rem_var(--border)]",
+      "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=horizontal]/tabs:aria-selected:inset-shadow-[0_-.125rem_var(--primary)]",
+      "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=horizontal]/tabs:hover:aria-selected:inset-shadow-[0_-.188rem_var(--primary)]",
+      "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=vertical]/tabs:px-3",
+      "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=vertical]/tabs:hover:inset-shadow-[-.188rem_0_var(--border)]",
+      "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=vertical]/tabs:aria-selected:inset-shadow-[-.125rem_0_var(--primary)]",
+      "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=vertical]/tabs:hover:aria-selected:inset-shadow-[-.188rem_0_var(--primary)]",
       "focus-visible:ring-[3px]",
       "focus-visible:outline-1",
       "disabled:pointer-events-none",
@@ -23371,12 +23670,28 @@ function tabs_default(Alpine) {
     if (modifiers.includes("end"))
       el.classList.add(
         "group-data-[orientation=horizontal]/tabs:ml-auto",
-        "group-data-[style=inline]/tab-bar:group-data-[orientation=horizontal]/tabs:mr-1.5",
+        "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=horizontal]/tabs:mr-1.5",
         "group-data-[orientation=vertical]/tabs:mt-auto",
-        "group-data-[style=inline]/tab-bar:group-data-[orientation=vertical]/tabs:mb-1.5"
+        "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=vertical]/tabs:mb-1.5"
       );
     el.setAttribute("data-slot", "tab-list-actions");
   });
+  Alpine.directive("h-tab-list-action", (el) => {
+    setButtonClasses(el);
+    el.classList.add(
+      "group-data-[floating=true]/tab-bar:rounded-md",
+      "group-data-[orientation=horizontal]/tabs:aspect-square",
+      "group-data-[orientation=horizontal]/tabs:w-auto",
+      "group-data-[floating=true]/tab-bar:group-data-[orientation=horizontal]/tabs:h-full",
+      "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=horizontal]/tabs:h-[75%]",
+      "group-data-[orientation=vertical]/tabs:h-9",
+      "group-data-[floating=true]/tab-bar:group-data-[orientation=vertical]/tabs:w-full",
+      "group-[&:not([data-floating=true])]/tab-bar:group-data-[orientation=vertical]/tabs:w-[80%]"
+    );
+    el.classList.add(...buttonVariants[el.getAttribute("data-variant") ?? "outline"]);
+    el.setAttribute("role", "button");
+    el.setAttribute("data-slot", "tab-list-action");
+  });
   Alpine.directive("h-tabs-content", (el) => {
     el.classList.add("flex-1", "outline-none");
     el.setAttribute("role", "tabpanel");
@@ -23522,7 +23837,7 @@ function tile_default(Alpine) {
       "flex",
       "items-center",
       "text-sm",
-      "rounded-xl",
+      "rounded-lg",
       "transition-colors",
       "[a]:hover:bg-secondary-hover",
       "[a]:hover:text-secondary-foreground",
@@ -23570,10 +23885,10 @@ function tile_default(Alpine) {
     el.setAttribute("data-slot", "tile-media");
     switch (el.getAttribute("data-variant")) {
       case "icon":
-        el.classList.add("size-8", "border", "rounded-xl", "bg-muted", "[&_svg:not([class*='size-'])]:size-4");
+        el.classList.add("size-8", "border", "rounded-lg", "bg-muted", "[&_svg:not([class*='size-'])]:size-4");
         break;
       case "image":
-        el.classList.add("size-10", "rounded-xl", "overflow-hidden", "[&_img]:size-full", "[&_img]:object-cover");
+        el.classList.add("size-10", "rounded-lg", "overflow-hidden", "[&_img]:size-full", "[&_img]:object-cover");
         break;
       default:
         el.classList.add("bg-transparent");
@@ -23668,14 +23983,16 @@ function timepicker_default(Alpine) {
     el.classList.add(
       "cursor-pointer",
       "border-input",
-      "focus-visible:border-ring",
-      "focus-visible:ring-ring/50",
-      "aria-invalid:ring-negative/20",
-      "dark:aria-invalid:ring-negative/40",
-      "aria-invalid:border-negative",
-      "invalid:ring-negative/20",
-      "dark:invalid:ring-negative/40",
-      "invalid:border-negative",
+      "[&>input]:appearance-none",
+      "has-[input:focus-visible]:border-ring",
+      "has-[input:focus-visible]:ring-[3px]",
+      "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:invalid]:ring-negative/20",
       "hover:bg-secondary-hover",
       "active:bg-secondary-active",
       "flex",
@@ -23693,8 +24010,8 @@ function timepicker_default(Alpine) {
       "whitespace-nowrap",
       "shadow-control",
       "transition-[color,box-shadow]",
+      "duration-200",
       "outline-none",
-      "focus-visible:ring-[3px]",
       "has-[input:disabled]:pointer-events-none",
       "has-[input:disabled]:opacity-50",
       "[&_svg]:pointer-events-none",
@@ -23703,6 +24020,7 @@ function timepicker_default(Alpine) {
       "[&_svg]: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"],
@@ -23730,7 +24048,8 @@ function timepicker_default(Alpine) {
     } else {
       el._timepicker.is12Hour = new Intl.DateTimeFormat(el._timepicker.locale, { hour: "numeric" }).resolvedOptions().hour12;
     }
-    const handler2 = () => {
+    const handler2 = (event) => {
+      if (event.type === "keydown" && event.key !== "Enter") return;
       el._timepicker.expanded = !el._timepicker.expanded;
       el.setAttribute("aria-expanded", el._timepicker.expanded);
       Alpine2.nextTick(() => {
@@ -23742,8 +24061,10 @@ function timepicker_default(Alpine) {
       });
     };
     el.addEventListener("click", handler2);
+    el.addEventListener("keydown", handler2);
     cleanup(() => {
       el.removeEventListener("click", handler2);
+      el.removeEventListener("keydown", handler2);
       top.removeEventListener("click", el._timepicker.close);
     });
   });
@@ -24088,6 +24409,7 @@ function timepicker_default(Alpine) {
     okButton.addEventListener("click", timepicker._timepicker.close);
     footer.appendChild(okButton);
     el.appendChild(footer);
+    Alpine2.initTree(footer);
     let selectedHour;
     let selectedMinute;
     let selectedSecond;
@@ -24241,7 +24563,7 @@ function timepicker_default(Alpine) {
         periodList.children[p].removeEventListener("click", setPeriod);
       }
     });
-  }).before("h-button");
+  });
 }
 
 // src/components/toolbar.js
@@ -24253,14 +24575,19 @@ function toolbar_default(Alpine) {
       "hbox",
       "shrink-0",
       "items-center",
-      "px-2",
+      "px-1",
+      'has-[>[data-slot="avatar"]:last-child]:pr-2',
+      'has-[>[data-slot="toolbar-image"]:first-child]:pl-2',
       "gap-1",
       modifiers.includes("footer") ? "border-t" : "border-b",
       "w-full",
-      "h-11",
+      "h-12",
       "data-[size=sm]:h-8",
       "data-[variant=transparent]:bg-transparent",
-      "data-[variant=transparent]:text-foreground"
+      "data-[variant=transparent]:text-foreground",
+      "data-[floating=true]:shadow-xs",
+      "data-[floating=true]:rounded-lg",
+      "data-[floating=true]:border"
     );
     el.setAttribute("data-slot", "toolbar");
   });
@@ -24269,11 +24596,12 @@ function toolbar_default(Alpine) {
     el.setAttribute("data-slot", "toolbar-image");
   });
   Alpine.directive("h-toolbar-title", (el) => {
-    el.classList.add("text", "[[data-size=sm]_&]:text-sm", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
+    el.classList.add("text", "[[data-size=sm]_&]:text-sm", "first:pl-2", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
     el.setAttribute("data-slot", "toolbar-title");
   });
   Alpine.directive("h-toolbar-spacer", (el) => {
     el.classList.add("flex-[1_auto]", "h-full");
+    el.setAttribute("tabindex", "-1");
     el.setAttribute("data-slot", "toolbar-spacer");
   });
   Alpine.directive("h-toolbar-separator", (el) => {
@@ -24284,28 +24612,21 @@ function toolbar_default(Alpine) {
 
 // src/components/tooltip.js
 function tooltip_default(Alpine) {
-  Alpine.directive("h-tooltip", (el, {}, { Alpine: Alpine2 }) => {
+  Alpine.directive("h-tooltip-trigger", (el, {}, { Alpine: Alpine2, cleanup }) => {
     el._tooltip = Alpine2.reactive({
       id: void 0,
       controls: `hpc${v4_default()}`,
       shown: false
     });
-    el.setAttribute("data-slot", "tooltip");
-  });
-  Alpine.directive("h-tooltip-trigger", (el, {}, { Alpine: Alpine2, cleanup }) => {
-    const tooltip = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_tooltip"));
-    if (!tooltip) {
-      throw new Error("h-tooltip-trigger must be inside an h-tooltip element");
-    }
     if (el.hasAttribute("id")) {
-      tooltip._tooltip.id = el.getAttribute("id");
+      el._tooltip.id = el.getAttribute("id");
     } else {
-      tooltip._tooltip.id = `hp${v4_default()}`;
-      el.setAttribute("id", tooltip._tooltip.id);
+      el._tooltip.id = `hp${v4_default()}`;
+      el.setAttribute("id", el._tooltip.id);
     }
-    el.setAttribute("aria-describedby", tooltip._tooltip.controls);
+    el.setAttribute("aria-describedby", el._tooltip.controls);
     const handler2 = (event) => {
-      tooltip._tooltip.shown = event.type === "pointerenter";
+      el._tooltip.shown = event.type === "pointerenter";
     };
     el.addEventListener("pointerenter", handler2);
     el.addEventListener("pointerleave", handler2);
@@ -24314,20 +24635,25 @@ function tooltip_default(Alpine) {
       el.removeEventListener("pointerleave", handler2);
     });
   });
-  Alpine.directive("h-tooltip-content", (el, {}, { effect, Alpine: Alpine2 }) => {
-    const tooltip = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_tooltip"));
+  Alpine.directive("h-tooltip", (el, {}, { effect }) => {
+    const tooltip = (() => {
+      let sibling = el.previousElementSibling;
+      while (sibling && !sibling.hasOwnProperty("_tooltip")) {
+        sibling = sibling.previousElementSibling;
+      }
+      return sibling;
+    })();
     if (!tooltip) {
-      throw new Error("h-tooltip-content must be inside an h-tooltip element");
+      throw new Error("h-tooltip must be placed after an h-tooltip-trigger element");
     }
     el.classList.add("absolute", "bg-foreground", "text-background", "z-50", "w-fit", "rounded-md", "px-3", "py-1.5", "text-xs", "text-balance");
-    el.setAttribute("data-slot", "tooltip-content");
+    el.setAttribute("data-slot", "tooltip");
     el.setAttribute("id", tooltip._tooltip.controls);
-    const control = tooltip.querySelector(`#${tooltip._tooltip.id}`);
     const arrowEl = document.createElement("span");
     arrowEl.classList.add("absolute", "bg-foreground", "fill-foreground", "z-50", "size-2.5", "rotate-45", "rounded-[2px]");
     el.appendChild(arrowEl);
     function updatePosition() {
-      computePosition2(control, el, {
+      computePosition2(tooltip, el, {
         placement: "top",
         middleware: [offset2(10), flip2(), shift2({ padding: 4 }), arrow2({ element: arrowEl })]
       }).then(({ x, y, middlewareData, placement }) => {
@@ -24361,6 +24687,9 @@ function tooltip_default(Alpine) {
   });
 }
 
+// package.json
+var version = "0.4.0";
+
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
 var savedScheme = localStorage.getItem(colorSchemeKey);
@@ -24385,16 +24714,31 @@ var initColorScheme = () => {
 };
 var setColorScheme = (mode) => {
   if (mode === "dark") {
+    document.documentElement.classList.add("dark");
     localStorage.setItem(colorSchemeKey, "dark");
     window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChange);
   } else if (mode === "light") {
+    document.documentElement.classList.remove("dark");
     localStorage.setItem(colorSchemeKey, "light");
     window.matchMedia("(prefers-color-scheme: dark)").removeEventListener("change", colorSchemeChange);
   } else {
+    if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      document.documentElement.classList.add("dark");
+    } else {
+      document.documentElement.classList.remove("dark");
+    }
     localStorage.setItem(colorSchemeKey, "auto");
     window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", colorSchemeChange);
   }
 };
+var getColorScheme = () => {
+  const theme = localStorage.getItem(colorSchemeKey);
+  if (theme) return theme;
+  else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+    return "dark";
+  }
+  return "light";
+};
 initColorScheme();
 
 // src/module.js
@@ -24416,6 +24760,7 @@ var Harmonia = {
     registerPlugin(info_page_default);
     registerPlugin(input_default);
     registerPlugin(label_default);
+    registerPlugin(list_default);
     registerPlugin(menu_default);
     registerPlugin(pagination_default);
     registerPlugin(popover_default);
@@ -24438,7 +24783,9 @@ var Harmonia = {
     registerPlugin(toolbar_default);
     registerPlugin(tooltip_default);
   },
-  setColorScheme
+  setColorScheme,
+  getColorScheme,
+  version
 };
 var module_default = Harmonia;
 export {
@@ -24458,6 +24805,7 @@ export {
   info_page_default as InfoPage,
   input_default as Input,
   label_default as Label,
+  list_default as List,
   menu_default as Menu,
   pagination_default as Pagination,
   popover_default as Popover,