@codbex/harmonia 0.3.1 → 0.4.0

package/dist/harmonia.js

@@ -205,7 +205,6 @@
         "items-start",
         "justify-between",
         "gap-4",
-        "rounded-md",
         "py-4",
         "text-left",
         "text-sm",
@@ -287,7 +286,7 @@
         "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");
@@ -339,8 +338,6 @@
         "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",
@@ -357,6 +354,9 @@
       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"));
@@ -474,50 +474,126 @@
   }
 
   // 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"],
@@ -526,22 +602,13 @@
         "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)) {
@@ -607,10 +674,6 @@
       }
       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");
@@ -2120,7 +2183,7 @@
       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 } }));
         });
@@ -2133,23 +2196,27 @@
         }
         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()) {
@@ -2167,7 +2234,7 @@
         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;
       }
@@ -2330,7 +2397,7 @@
             "align-middle",
             "text-center",
             "size-8",
-            "rounded-sm",
+            "rounded-control",
             "outline-none",
             "hover:bg-secondary-hover",
             "hover:text-secondary-foreground",
@@ -2546,6 +2613,9 @@
         for (let d = 0; d < dayCells.length; d++) {
           dayCells[d].removeEventListener("click", dayClick);
         }
+        if (datepicker) {
+          datepicker._datepicker.input.removeEventListener("change", onInputChange);
+        }
       });
     });
   }
@@ -2553,7 +2623,7 @@
   // 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) => {
@@ -2584,56 +2654,58 @@
 
   // 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);
-      });
     });
   }
 
@@ -2717,6 +2789,7 @@
         "border",
         "shadow-control",
         "transition-[color,box-shadow]",
+        "duration-200",
         "outline-none",
         "h-9",
         "pl-3",
@@ -2838,7 +2911,7 @@
         "rounded-lg",
         "border",
         "p-4",
-        "shadow-lg",
+        "shadow-xl",
         "sm:max-w-lg"
       );
       el.setAttribute("role", "dialog");
@@ -2996,7 +3069,7 @@
       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");
@@ -3189,6 +3262,156 @@
     });
   }
 
+  // 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 }) => {
@@ -3205,11 +3428,18 @@
       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) {
@@ -3268,12 +3498,17 @@
           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 " ":
@@ -3365,16 +3600,19 @@
               })
             ]
           }).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);
           });
         }
       }
@@ -3628,27 +3866,19 @@
       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) {
@@ -3854,14 +4084,13 @@
 
   // 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(() => {
@@ -3870,43 +4099,39 @@
           });
         });
       }
-    });
-    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);
@@ -3918,13 +4143,19 @@
         });
       }
     });
-    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);
@@ -3935,13 +4166,9 @@
         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),
@@ -3966,7 +4193,7 @@
       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, {
@@ -4005,40 +4232,48 @@
   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");
     });
   }
@@ -6418,21 +6653,40 @@
 
   // 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) => {
@@ -6458,8 +6712,7 @@
         "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");
@@ -6488,7 +6741,7 @@
         "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");
     });
@@ -6535,8 +6788,9 @@
         "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",
@@ -6547,7 +6801,7 @@
       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)) {
@@ -6585,7 +6839,7 @@
         "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");
@@ -6614,7 +6868,7 @@
         "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");
     });
@@ -6637,7 +6891,7 @@
       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");
       }
@@ -6680,7 +6934,7 @@
         "[&>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 = {
@@ -6696,7 +6950,8 @@
       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");
     });
   }
@@ -6708,7 +6963,7 @@
       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");
@@ -6728,52 +6983,53 @@
 
   // 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);
-      });
     });
   }
 
@@ -6811,19 +7067,60 @@
       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) => {
@@ -6846,18 +7143,23 @@
       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");
     });
@@ -6870,8 +7172,8 @@
         "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");
@@ -6887,8 +7189,7 @@
         "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",
@@ -6899,21 +7200,21 @@
         "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",
@@ -6937,12 +7238,28 @@
       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");
@@ -7088,7 +7405,7 @@
         "flex",
         "items-center",
         "text-sm",
-        "rounded-xl",
+        "rounded-lg",
         "transition-colors",
         "[a]:hover:bg-secondary-hover",
         "[a]:hover:text-secondary-foreground",
@@ -7136,10 +7453,10 @@
       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");
@@ -7233,14 +7550,16 @@
       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",
@@ -7258,8 +7577,8 @@
         "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",
@@ -7268,6 +7587,7 @@
         "[&_svg]:opacity-50"
       );
       el.setAttribute("data-slot", "time-picker");
+      el.setAttribute("tabindex", "-1");
       el.appendChild(
         createElement(Clock, {
           class: ["opacity-50 size-4 transition-transform duration-200"],
@@ -7295,7 +7615,8 @@
       } 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(() => {
@@ -7307,8 +7628,10 @@
         });
       };
       el.addEventListener("click", handler2);
+      el.addEventListener("keydown", handler2);
       cleanup(() => {
         el.removeEventListener("click", handler2);
+        el.removeEventListener("keydown", handler2);
         top.removeEventListener("click", el._timepicker.close);
       });
     });
@@ -7819,14 +8142,19 @@
         "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");
     });
@@ -7835,11 +8163,12 @@
       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) => {
@@ -7850,28 +8179,21 @@
 
   // 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);
@@ -7880,20 +8202,25 @@
         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 }) => {
@@ -7951,20 +8278,38 @@
   };
   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();
 
+  // package.json
+  var version = "0.4.0";
+
   // src/index.js
-  window.Harmonia = { setColorScheme };
+  window.Harmonia = { getColorScheme, setColorScheme, version };
   document.addEventListener("alpine:init", () => {
     window.Alpine.plugin(accordion_default);
     window.Alpine.plugin(alert_default);
@@ -7982,6 +8327,7 @@
     window.Alpine.plugin(info_page_default);
     window.Alpine.plugin(input_default);
     window.Alpine.plugin(label_default);
+    window.Alpine.plugin(list_default);
     window.Alpine.plugin(menu_default);
     window.Alpine.plugin(pagination_default);
     window.Alpine.plugin(popover_default);