@codbex/harmonia 1.8.0 → 1.9.1

package/dist/harmonia.js

@@ -597,10 +597,10 @@
       }) : { single: false };
       el.setAttribute("data-slot", "accordion");
     });
-    Alpine.directive("h-accordion-item", (el, { original: original2, expression, modifiers }, { Alpine: Alpine2 }) => {
-      const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
+    Alpine.directive("h-accordion-item", (el, { original, expression, modifiers }, { Alpine: Alpine2 }) => {
+      const accordion = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_accordion"));
       if (!accordion) {
-        throw new Error(`${original2} must be inside an accordion`);
+        throw new Error(`${original} must be inside an accordion`);
       }
       el.classList.add("border-b", "last:border-b-0");
       el.setAttribute("data-slot", "accordion-item");
@@ -623,14 +623,14 @@
         expanded: getIsExpanded()
       });
     });
-    Alpine.directive("h-accordion-trigger", (el, { original: original2, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-accordion-trigger", (el, { original, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
       if (el.tagName.length !== 2 && !el.tagName.startsWith("H")) {
-        throw new Error(`${original2} must be a header element`);
+        throw new Error(`${original} must be a header element`);
       }
-      const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
-      const accordionItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordionItem"));
+      const accordion = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_accordion"));
+      const accordionItem = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_accordionItem"));
       if (!accordionItem || !accordion) {
-        throw new Error(`${original2} must have an accordion and accordion item parent elements`);
+        throw new Error(`${original} must have an accordion and accordion item parent elements`);
       }
       el.classList.add("flex", "h-12", "min-h-12", "[[data-size=md]_&]:h-10", "[[data-size=md]_&]:min-h-10", "[[data-size=sm]_&]:h-8", "[[data-size=sm]_&]:min-h-8");
       el.setAttribute("tabIndex", "-1");
@@ -703,7 +703,7 @@
     Alpine.directive("h-accordion-content", (el, _, { effect, cleanup, Alpine: Alpine2 }) => {
       el.classList.add("pb-0", "overflow-hidden", "text-sm", "hidden", "transition-[opacity,max-height,padding-bottom]", "motion-reduce:transition-none", "duration-200", "ease-out", "opacity-0");
       el.setAttribute("data-slot", "accordion-content");
-      const parent = Alpine2.findClosest(el.parentElement, (parent2) => parent2.hasOwnProperty("_h_accordionItem"));
+      const parent = Alpine2.findClosest(el.parentElement, (parent2) => Object.prototype.hasOwnProperty.call(parent2, "_h_accordionItem"));
       if (parent) {
         let onTransitionEnd = function(event) {
           if (event.target === el && event.target.classList.contains("opacity-0")) {
@@ -780,7 +780,7 @@
         for (const [_, value] of Object.entries(variants)) {
           el.classList.remove(...value);
         }
-        if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
+        if (Object.prototype.hasOwnProperty.call(variants, variant)) el.classList.add(...variants[variant]);
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
       const observer = new MutationObserver(() => {
@@ -861,10 +861,10 @@
         el.classList.add("cursor-pointer", "hover:bg-secondary-hover", "active:bg-secondary-active");
       }
     });
-    Alpine.directive("h-avatar-image", (el, { original: original2 }, { cleanup }) => {
-      const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
+    Alpine.directive("h-avatar-image", (el, { original }, { cleanup }) => {
+      const avatar = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_avatar"));
       if (!avatar) {
-        throw new Error(`${original2} must be inside an avatar element`);
+        throw new Error(`${original} must be inside an avatar element`);
       }
       el.classList.add("aspect-square", "size-full", "rounded-[inherit]");
       el.setAttribute("data-slot", "avatar-image");
@@ -895,10 +895,10 @@
         observer.disconnect();
       });
     });
-    Alpine.directive("h-avatar-fallback", (el, { original: original2 }, { effect }) => {
-      const avatar = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_avatar"));
+    Alpine.directive("h-avatar-fallback", (el, { original }, { effect }) => {
+      const avatar = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_avatar"));
       if (!avatar) {
-        throw new Error(`${original2} must be inside an avatar element`);
+        throw new Error(`${original} must be inside an avatar element`);
       }
       el.classList.add("hidden", "bg-muted", "flex", "size-full", "items-center", "justify-center", "rounded-[inherit]");
       el.setAttribute("data-slot", "avatar-fallback");
@@ -932,7 +932,8 @@
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
         "focus-visible:ring-[calc(var(--spacing)*0.75)]",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
         "motion-reduce:transition-none",
         "overflow-hidden"
       );
@@ -950,7 +951,7 @@
         for (const [_2, value] of Object.entries(variants)) {
           el.classList.remove(...value);
         }
-        if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
+        if (Object.prototype.hasOwnProperty.call(variants, variant)) el.classList.add(...variants[variant]);
       }
       setVariant(el.getAttribute("data-variant") ?? "default");
       const observer = new MutationObserver(() => {
@@ -1003,7 +1004,7 @@
         for (const [_2, value] of Object.entries(variants)) {
           el.classList.remove(...value);
         }
-        if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
+        if (Object.prototype.hasOwnProperty.call(variants, variant)) el.classList.add(...variants[variant]);
       }
       setVariant(el.getAttribute("data-variant") ?? "primary");
       const observer = new MutationObserver(() => {
@@ -1021,6 +1022,7 @@
     default: [
       "bg-secondary",
       "text-secondary-foreground",
+      "fill-secondary-foreground",
       "shadow-button",
       "hover:bg-secondary-hover",
       "active:bg-secondary-active",
@@ -1032,6 +1034,7 @@
     primary: [
       "bg-primary",
       "text-primary-foreground",
+      "fill-primary-foreground",
       "shadow-button",
       "focus-visible:outline-primary/50",
       "hover:bg-primary-hover",
@@ -1044,6 +1047,7 @@
     positive: [
       "bg-positive",
       "text-positive-foreground",
+      "fill-positive-foreground",
       "shadow-button",
       "focus-visible:outline-positive/50",
       "hover:bg-positive-hover",
@@ -1056,6 +1060,7 @@
     negative: [
       "bg-negative",
       "text-negative-foreground",
+      "fill-negative-foreground",
       "shadow-button",
       "focus-visible:outline-negative/50",
       "hover:bg-negative-hover",
@@ -1068,6 +1073,7 @@
     warning: [
       "bg-warning",
       "text-warning-foreground",
+      "fill-warning-foreground",
       "shadow-button",
       "focus-visible:outline-warning/50",
       "hover:bg-warning-hover",
@@ -1080,6 +1086,7 @@
     information: [
       "bg-information",
       "text-information-foreground",
+      "fill-information-foreground",
       "shadow-button",
       "focus-visible:outline-information/50",
       "hover:bg-information-hover",
@@ -1093,25 +1100,49 @@
       "border",
       "bg-background",
       "text-foreground",
+      "fill-foreground",
       "hover:bg-secondary",
       "hover:text-secondary-foreground",
+      "hover:fill-secondary-foreground",
       "active:bg-secondary-active",
+      "active:text-secondary-foreground",
+      "active:fill-secondary-foreground",
       "aria-pressed:bg-secondary-active",
+      "aria-pressed:text-secondary-foreground",
+      "aria-pressed:fill-secondary-foreground",
       "active:data-[toggled=true]:bg-secondary-active",
+      "active:data-[toggled=true]:text-secondary-foreground",
+      "active:data-[toggled=true]:fill-secondary-foreground",
       "hover:data-[toggled=true]:bg-secondary-hover",
-      "data-[toggled=true]:bg-secondary-active"
+      "hover:data-[toggled=true]:text-secondary-foreground",
+      "hover:data-[toggled=true]:fill-secondary-foreground",
+      "data-[toggled=true]:bg-secondary-active",
+      "data-[toggled=true]:text-secondary-foreground",
+      "data-[toggled=true]:fill-secondary-foreground"
     ],
     transparent: [
       "bg-transparent",
       "text-foreground",
+      "fill-foreground",
       "shadow-none",
       "hover:bg-secondary",
       "hover:text-secondary-foreground",
+      "hover:fill-secondary-foreground",
       "active:bg-secondary-active",
+      "active:text-secondary-foreground",
+      "active:fill-secondary-foreground",
       "aria-pressed:bg-secondary-active",
+      "aria-pressed:text-secondary-foreground",
+      "aria-pressed:fill-secondary-foreground",
       "active:data-[toggled=true]:bg-secondary-active",
+      "active:data-[toggled=true]:text-secondary-foreground",
+      "active:data-[toggled=true]:fill-secondary-foreground",
       "hover:data-[toggled=true]:bg-secondary-hover",
-      "data-[toggled=true]:bg-secondary-active"
+      "hover:data-[toggled=true]:text-secondary-foreground",
+      "hover:data-[toggled=true]:fill-secondary-foreground",
+      "data-[toggled=true]:bg-secondary-active",
+      "data-[toggled=true]:text-secondary-foreground",
+      "data-[toggled=true]:fill-secondary-foreground"
     ],
     link: ["text-primary", "underline-offset-4", "hover:underline"]
   };
@@ -1127,6 +1158,7 @@
       "text-sm",
       "font-medium",
       "transition-all",
+      "duration-100",
       "motion-reduce:transition-none",
       "disabled:pointer-events-none",
       "disabled:opacity-50",
@@ -1162,7 +1194,7 @@
     }
   };
   function button_default(Alpine) {
-    Alpine.directive("h-button", (el, { original: original2, modifiers }, { cleanup }) => {
+    Alpine.directive("h-button", (el, { original, modifiers }, { cleanup }) => {
       setButtonClasses(el);
       if (!el.hasAttribute("data-slot")) {
         el.setAttribute("data-slot", "button");
@@ -1173,13 +1205,13 @@
         for (const [_, value] of Object.entries(buttonVariants)) {
           el.classList.remove(...value);
         }
-        if (buttonVariants.hasOwnProperty(variant)) el.classList.add(...buttonVariants[variant]);
+        if (Object.prototype.hasOwnProperty.call(buttonVariants, variant)) el.classList.add(...buttonVariants[variant]);
       }
       function setSize2(size3 = "default") {
         el.classList.remove(...getButtonSize(lastSize, isAddon));
         el.classList.add(...getButtonSize(size3, isAddon));
         if (size3.startsWith("icon") && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-          console.error(`${original2}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
+          console.error(`${original}: Icon-only buttons must have an "aria-label" or "aria-labelledby" attribute`, el);
         }
         lastSize = size3;
       }
@@ -1232,7 +1264,7 @@
         for (const [_, value] of Object.entries(variants)) {
           el.classList.remove(...value);
         }
-        if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
+        if (Object.prototype.hasOwnProperty.call(variants, variant)) el.classList.add(...variants[variant]);
       }
       setVariant(el.getAttribute("data-orientation") ?? "horizontal");
     });
@@ -1258,8 +1290,8 @@
     bottom: "top",
     top: "bottom"
   };
-  function clamp(start, value, end2) {
-    return max(start, min(value, end2));
+  function clamp(start, value, end) {
+    return max(start, min(value, end));
   }
   function evaluate(value, param) {
     return typeof value === "function" ? value(param) : value;
@@ -2733,8 +2765,8 @@
 
   // src/components/calendar.js
   function calendar_default(Alpine) {
-    Alpine.directive("h-calendar", (el, { original: original2, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
-      const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
+    Alpine.directive("h-calendar", (el, { original, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+      const datepicker = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_datepicker"));
       el.classList.add("border", "rounded-control", "gap-2", "p-2");
       el.setAttribute("tabindex", "-1");
       if (datepicker) {
@@ -2791,7 +2823,7 @@
       const onInputChange = () => {
         const newValue = new Date(datepicker._h_datepicker.input.value);
         if (isNaN(newValue)) {
-          console.error(`${original2}: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
+          console.error(`${original}: input value is not a valid date - ${datepicker._h_datepicker.input.value}`);
           datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
           return;
         } else if (selected.getTime() !== newValue.getTime()) {
@@ -2807,7 +2839,7 @@
       function setFromModel() {
         selected = new Date(el._x_model.get());
         if (isNaN(selected)) {
-          console.error(`${original2}: input value is not a valid date - ${el._x_model.get()}`);
+          console.error(`${original}: input value is not a valid date - ${el._x_model.get()}`);
           if (datepicker) datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
           else el.setAttribute("data-invalid", "true");
         } else if (datepicker) {
@@ -2815,7 +2847,7 @@
         }
       }
       function checkForModel() {
-        if (el.hasOwnProperty("_x_model") && el._x_model.get()) {
+        if (Object.prototype.hasOwnProperty.call(el, "_x_model") && el._x_model.get()) {
           setFromModel();
         }
       }
@@ -3019,8 +3051,8 @@
         const year = date.getFullYear();
         const month = date.getMonth();
         const start = new Date(year, month, 1);
-        const end2 = new Date(year, month + 1, 0);
-        const days = end2.getDate();
+        const end = new Date(year, month + 1, 0);
+        const days = end.getDate();
         const prevEndDay = new Date(year, month, 1);
         prevEndDay.setDate(prevEndDay.getDate() - 1);
         let lastPrevMonthDay = prevEndDay.getDate();
@@ -3127,7 +3159,7 @@
             break;
           case "End":
             event.preventDefault();
-            newDay.setDate(end.getDate());
+            newDay.setDate(new Date(newDay.getFullYear(), newDay.getMonth() + 1, 0).getDate());
             break;
           case "PageUp":
             event.preventDefault();
@@ -3236,7 +3268,7 @@
       if (datepicker) {
         el.addEventListener("transitionend", onTransitionEnd);
       }
-      if (el.hasOwnProperty("_x_model")) {
+      if (Object.prototype.hasOwnProperty.call(el, "_x_model")) {
         const modelExpression = el.getAttribute("x-model");
         const evaluateModel = evaluateLater(modelExpression);
         effect(() => {
@@ -3365,7 +3397,7 @@
 
   // src/components/datepicker.js
   function datepicker_default(Alpine) {
-    Alpine.directive("h-date-picker", (el, { original: original2, modifiers }, { Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-date-picker", (el, { original, modifiers }, { Alpine: Alpine2, cleanup }) => {
       const state = Alpine2.reactive({
         expanded: false
       });
@@ -3378,7 +3410,7 @@
       };
       el._h_datepicker.input = el.querySelector("input");
       if (!el._h_datepicker.input || el._h_datepicker.input.tagName !== "INPUT") {
-        throw new Error(`${original2} must contain an input`);
+        throw new Error(`${original} must contain an input`);
       } else if (el._h_datepicker.input.hasAttribute("id")) {
         el._h_datepicker.id = el._h_datepicker.input.getAttribute("id");
       } else {
@@ -3391,7 +3423,8 @@
         "border-input",
         "flex",
         "items-center",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
         "motion-reduce:transition-none",
         "duration-200",
         "outline-none",
@@ -3456,18 +3489,31 @@
         observer.disconnect();
       });
     });
-    Alpine.directive("h-date-picker-trigger", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-date-picker-trigger", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "BUTTON") {
-        throw new Error(`${original2} must be a button`);
+        throw new Error(`${original} must be a button`);
       }
       if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-        throw new Error(`${original2}: must have an "aria-label" or "aria-labelledby" attribute`);
+        throw new Error(`${original}: must have an "aria-label" or "aria-labelledby" attribute`);
       }
-      const datepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_datepicker"));
+      const datepicker = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_datepicker"));
       if (!datepicker) {
-        throw new Error(`${original2} must be inside an date-picker element`);
+        throw new Error(`${original} must be inside an date-picker element`);
       }
-      el.classList.add("cursor-pointer", "inline-flex", "items-center", "justify-center", "h-full", "aspect-square", "bg-transparent", "hover:bg-secondary", "active:bg-secondary-active", "outline-none");
+      el.classList.add(
+        "cursor-pointer",
+        "inline-flex",
+        "items-center",
+        "justify-center",
+        "h-full",
+        "aspect-square",
+        "bg-transparent",
+        "hover:bg-secondary",
+        "hover:text-secondary-foreground",
+        "active:bg-secondary-active",
+        "active:text-secondary-foreground",
+        "outline-none"
+      );
       if (datepicker._h_datepicker.inTable) {
         el.classList.add(
           "focus-visible:inset-ring-ring/50",
@@ -3498,7 +3544,7 @@
       el.appendChild(
         createSvg({
           icon: Calendar,
-          classes: "opacity-70 text-foreground size-4",
+          classes: "opacity-70 text-inherit size-4",
           attrs: {
             "aria-hidden": true,
             role: "presentation"
@@ -3740,13 +3786,13 @@
         });
       }
     });
-    Alpine.directive("h-exp-panel-trigger", (el, { original: original2, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-exp-panel-trigger", (el, { original, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
       if (el.tagName.length !== 2 && !el.tagName.startsWith("H")) {
-        throw new Error(`${original2} must be a header element`);
+        throw new Error(`${original} must be a header element`);
       }
-      const expPanelItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_expPanelItem"));
+      const expPanelItem = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_expPanelItem"));
       if (!expPanelItem) {
-        throw new Error(`${original2} must have an exp-panel-item parent element`);
+        throw new Error(`${original} must have an exp-panel-item parent element`);
       }
       el.classList.add(
         "bg-object-header",
@@ -3927,13 +3973,13 @@
 
   // src/components/icon.js
   function icon_default(Alpine) {
-    Alpine.directive("h-icon", (el, { original: original2, modifiers }) => {
+    Alpine.directive("h-icon", (el, { original, modifiers }) => {
       if (el.tagName.toLowerCase() !== "svg") {
-        throw new Error(`${original2} works only on svg elements`);
+        throw new Error(`${original} works only on svg elements`);
       } else if (!el.hasAttribute("role")) {
-        throw new Error(`${original2} must have a role`);
+        throw new Error(`${original} must have a role`);
       } else if (el.getAttribute("role") === "img" && !el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-        throw new Error(`${original2}: svg images with the role of img must have an "aria-label" or "aria-labelledby" attribute`);
+        throw new Error(`${original}: svg images with the role of img must have an "aria-label" or "aria-labelledby" attribute`);
       }
       el.classList.add("fill-current");
       el.setAttribute("data-slot", "icon");
@@ -4005,7 +4051,8 @@
         "[&::-webkit-color-swatch-wrapper]:rounded-0",
         "[&::-webkit-color-swatch-wrapper]:p-0",
         "text-base",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
         "motion-reduce:transition-none",
         "outline-none",
         "file:inline-flex",
@@ -4063,7 +4110,8 @@
         "rounded-control",
         "border",
         "shadow-input",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
         "motion-reduce:transition-none",
         "outline-none",
         "min-w-0",
@@ -4132,7 +4180,7 @@
         "block-end": ["order-last", "w-full", "justify-start", "px-3", "pb-3", "[.border-t]:pt-3", "group-has-[>input]/input-group:pb-2.5"]
       };
       function setVariant(variant) {
-        if (variants.hasOwnProperty(variant)) el.classList.add(...variants[variant]);
+        if (Object.prototype.hasOwnProperty.call(variants, variant)) el.classList.add(...variants[variant]);
       }
       setVariant(el.getAttribute("data-align") ?? "inline-start");
       const handler = (event) => {
@@ -4152,7 +4200,7 @@
       el.classList.add("text-muted-foreground", "flex", "items-center", "gap-2", "text-sm", "[&_svg]:pointer-events-none", "[&_svg:not([class*='size-'])]:size-4");
       el.setAttribute("data-slot", "label");
     });
-    Alpine.directive("h-input-number", (el, { original: original2 }, { cleanup }) => {
+    Alpine.directive("h-input-number", (el, { original }, { cleanup }) => {
       el.classList.add(
         "overflow-hidden",
         "group/input-number",
@@ -4165,8 +4213,10 @@
         "rounded-control",
         "border",
         "shadow-input",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
         "motion-reduce:transition-none",
+        "duration-200",
         "outline-none",
         "min-w-0",
         "has-[input:focus-visible]:border-ring",
@@ -4186,7 +4236,7 @@
       el.setAttribute("data-slot", "input-number");
       const input = el.querySelector("input");
       if (!input || input.getAttribute("type") !== "number") {
-        throw new Error(`${original2} must contain an input of type 'number'`);
+        throw new Error(`${original} must contain an input of type 'number'`);
       }
       if (!input.hasAttribute("type")) input.setAttribute("type", "number");
       if (!input.hasAttribute("inputmode")) input.setAttribute("inputmode", "numeric");
@@ -4211,7 +4261,7 @@
       stepDown.appendChild(
         createSvg({
           icon: Minus,
-          classes: "opacity-70 fill-foreground size-4 shrink-0 pointer-events-none",
+          classes: "opacity-70 text-inherit size-4 shrink-0 pointer-events-none",
           attrs: {
             "aria-hidden": true,
             role: "presentation"
@@ -4229,16 +4279,23 @@
         "[input:invalid~&]:border-negative",
         "h-full",
         "aspect-square",
+        "transition-colors",
+        "motion-reduce:transition-none",
+        "duration-100",
         "bg-transparent",
         "hover:bg-secondary",
+        "hover:text-secondary-foreground",
         "active:bg-secondary-active",
+        "active:text-secondary-foreground",
         "outline-none",
         "relative",
         "[&:hover>svg]:text-secondary-foreground"
       );
       el.appendChild(stepDown);
       const onStepDown = () => {
-        input.stepDown();
+        if (input.step === "any") {
+          input.value = (parseFloat(input.value) || 0) - 1;
+        } else input.stepDown();
         input.dispatchEvent(new Event("input", { bubbles: true }));
         input.dispatchEvent(new Event("change", { bubbles: true }));
       };
@@ -4252,7 +4309,7 @@
       stepUp.appendChild(
         createSvg({
           icon: Plus,
-          classes: "opacity-70 fill-foreground size-4 shrink-0 pointer-events-none",
+          classes: "opacity-70 text-inherit size-4 shrink-0 pointer-events-none",
           attrs: {
             "aria-hidden": true,
             role: "presentation"
@@ -4270,16 +4327,23 @@
         "[input:invalid~&]:border-negative",
         "h-full",
         "aspect-square",
+        "transition-all",
+        "motion-reduce:transition-none",
+        "duration-100",
         "bg-transparent",
         "hover:bg-secondary",
+        "hover:text-secondary-foreground",
         "active:bg-secondary-active",
+        "active:text-secondary-foreground",
         "outline-none",
         "relative",
         "[&:hover>svg]:text-secondary-foreground"
       );
       el.appendChild(stepUp);
       const onStepUp = () => {
-        input.stepUp();
+        if (input.step === "any") {
+          input.value = (parseFloat(input.value) || 0) + 1;
+        } else input.stepUp();
         input.dispatchEvent(new Event("input", { bubbles: true }));
         input.dispatchEvent(new Event("change", { bubbles: true }));
       };
@@ -4386,7 +4450,8 @@
             focusLastOption(el);
             break;
           case "Up":
-          case "ArrowUp":
+          case "ArrowUp": {
+            event.preventDefault();
             let prevElem = event.target.previousElementSibling;
             if (prevElem && prevElem.getAttribute("data-slot") !== "list-header") {
               prevElem.focus();
@@ -4397,8 +4462,10 @@
               }
             }
             break;
+          }
           case "Down":
-          case "ArrowDown":
+          case "ArrowDown": {
+            event.preventDefault();
             let nextElem = event.target.nextElementSibling;
             if (nextElem) {
               nextElem.focus();
@@ -4409,6 +4476,7 @@
               }
             }
             break;
+          }
           case " ":
           case "Enter":
             selectOption(event.target);
@@ -4432,13 +4500,13 @@
       el.setAttribute("data-slot", "list");
       el.setAttribute("role", "group");
     });
-    Alpine.directive("h-list-header", (el, { original: original2 }, { Alpine: Alpine2 }) => {
+    Alpine.directive("h-list-header", (el, { original }, { 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(`${original2} must be placed inside a list element`);
+        throw new Error(`${original} must be placed inside a list element`);
       }
       if (!el.hasAttribute("id")) {
         const id = `lbh${uuid_default()}`;
@@ -4496,9 +4564,9 @@
         }
       }
     });
-    Alpine.directive("h-menu", (el, { original: original2, modifiers }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu", (el, { original, modifiers }, { cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "UL") {
-        throw new Error(`${original2} must be an ul element`);
+        throw new Error(`${original} must be an ul element`);
       }
       el.classList.add(
         "hidden",
@@ -4530,11 +4598,11 @@
       const menuTrigger = (() => {
         if (isSubmenu) return;
         let sibling = el.previousElementSibling;
-        while (sibling && !sibling.hasOwnProperty("_menu_trigger")) {
+        while (sibling && !Object.prototype.hasOwnProperty.call(sibling, "_menu_trigger")) {
           sibling = sibling.previousElementSibling;
         }
-        if (!sibling.hasOwnProperty("_menu_trigger")) {
-          throw new Error(`${original2} menu must be placed after a menu trigger element`);
+        if (!Object.prototype.hasOwnProperty.call(sibling, "_menu_trigger")) {
+          throw new Error(`${original} menu must be placed after a menu trigger element`);
         }
         return sibling;
       })();
@@ -4543,7 +4611,7 @@
           if (parent && parent.hasAttribute("id")) {
             el.setAttribute("aria-labelledby", parent.id);
           } else {
-            throw new Error(`${original2} must have an "aria-label" or "aria-labelledby" attribute`);
+            throw new Error(`${original} must have an "aria-label" or "aria-labelledby" attribute`);
           }
         }
       }
@@ -4551,7 +4619,7 @@
       if (isSubmenu) {
         menuSubItem = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "menu-sub");
         if (!menuSubItem) {
-          throw new Error(`${original2} must be placed inside a ${Alpine2.prefixed("h-menu-sub")} element`);
+          throw new Error(`${original} must be placed inside a ${Alpine2.prefixed("h-menu-sub")} element`);
         }
         setAriaAttrubutes(menuSubItem);
       } else if (menuTrigger) {
@@ -4614,7 +4682,9 @@
       }
       function onClick(event) {
         if (event.type === "contextmenu") event.preventDefault();
-        close(isSubmenu);
+        if (el.getAttribute("data-innerclicks") === "true" && el.contains(event.composedPath()[0])) {
+          return;
+        } else close(isSubmenu);
       }
       el.pauseKeyEvents = false;
       function onKeyDown(event) {
@@ -4657,7 +4727,7 @@
               }
               break;
             case "Up":
-            case "ArrowUp":
+            case "ArrowUp": {
               event.preventDefault();
               let menuitems = el.querySelectorAll(':scope > [role^=menuitem][tabIndex="-1"]:has(~ [role^=menuitem][tabIndex="0"])');
               if (menuitems.length) {
@@ -4669,6 +4739,7 @@
                 menuitem.focus();
               }
               break;
+            }
             case "Home":
             case "PageUp":
               event.preventDefault();
@@ -4790,9 +4861,9 @@
         el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
-    Alpine.directive("h-menu-item", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-item", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "LI") {
-        throw new Error(`${original2} must be a li element`);
+        throw new Error(`${original} must be a li element`);
       }
       el.classList.add(
         "focus:bg-secondary-hover",
@@ -4846,7 +4917,7 @@
         el.removeEventListener("mouseleave", focusOut);
       });
     });
-    Alpine.directive("h-menu-sub", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-sub", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
       el.classList.add(
         "focus:bg-secondary-hover",
         "hover:bg-secondary-hover",
@@ -4878,7 +4949,7 @@
       const chevronRight = createSvg({ icon: ChevronRight, classes: "size-4 ml-auto", attrs: { "aria-hidden": true, role: "presentation" } });
       el.appendChild(chevronRight);
       const parentMenu = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("role") === "menu");
-      if (!parentMenu) throw new Error(`${original2} must have a parent`);
+      if (!parentMenu) throw new Error(`${original} must have a parent`);
       if (!el.hasAttribute("id")) {
         el.setAttribute("id", `ms${uuid_default()}`);
       }
@@ -4975,9 +5046,9 @@
       el.classList.add("text-foreground", "px-2", "py-1.5", "text-sm", "font-semibold", "text-left", "data-[inset=true]:pl-8");
       el.setAttribute("data-slot", "menu-label");
     });
-    Alpine.directive("h-menu-checkbox-item", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-checkbox-item", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "LI" && el.tagName !== "DIV") {
-        throw new Error(`${original2} must be a li or div element`);
+        throw new Error(`${original} must be a li or div element`);
       }
       el.classList.add(
         "focus:bg-secondary-hover",
@@ -5017,7 +5088,7 @@
         el._x_model.set(!el._x_model.get());
         setState(el._x_model.get());
       }
-      if (el.hasOwnProperty("_x_model")) {
+      if (Object.prototype.hasOwnProperty.call(el, "_x_model")) {
         setState(el._x_model.get(), false);
         el.addEventListener("click", onActivate);
       }
@@ -5034,7 +5105,7 @@
       el.addEventListener("mouseenter", focusIn);
       el.addEventListener("focus", focusIn);
       cleanup(() => {
-        if (el.hasOwnProperty("_x_model")) {
+        if (Object.prototype.hasOwnProperty.call(el, "_x_model")) {
           el.removeEventListener("click", onActivate);
           el.removeEventListener("keydown", onActivate);
         }
@@ -5044,9 +5115,9 @@
         el.removeEventListener("mouseleave", focusOut);
       });
     });
-    Alpine.directive("h-menu-radio-item", (el, { original: original2, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-menu-radio-item", (el, { original, expression }, { effect, evaluateLater, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "LI" && el.tagName !== "DIV") {
-        throw new Error(`${original2} must be a li or div element`);
+        throw new Error(`${original} must be a li or div element`);
       }
       el.classList.add(
         "focus:bg-secondary-hover",
@@ -5102,7 +5173,7 @@
           el._x_model.set(value);
         }
       }
-      if (el.hasOwnProperty("_x_model")) {
+      if (Object.prototype.hasOwnProperty.call(el, "_x_model")) {
         effect(() => {
           setState(el._x_model.get() === value);
         });
@@ -5122,7 +5193,7 @@
       el.addEventListener("mouseenter", focusIn);
       el.addEventListener("focus", focusIn);
       cleanup(() => {
-        if (el.hasOwnProperty("_x_model")) {
+        if (Object.prototype.hasOwnProperty.call(el, "_x_model")) {
           el.removeEventListener("click", onActivate);
           el.removeEventListener("keydown", onActivate);
         }
@@ -5170,7 +5241,7 @@
         };
         this.items.push(item);
         this.listeners.forEach((listener) => {
-          if (listener.hasOwnProperty("added")) listener.added(item);
+          if (Object.prototype.hasOwnProperty.call(listener, "added")) listener.added(item);
         });
       },
       update(id, data) {
@@ -5183,7 +5254,7 @@
             this.items[index].data[key] = value;
           }
           this.listeners.forEach((listener) => {
-            if (listener.hasOwnProperty("updated")) listener.updated(id, data);
+            if (Object.prototype.hasOwnProperty.call(listener, "updated")) listener.updated(id, data);
           });
         } else {
           console.error(`Notification with id "${id}" does not exist`);
@@ -5194,7 +5265,7 @@
           throw new Error("Cannot remove a notification if an ID is not provided");
         }
         this.listeners.forEach((listener) => {
-          if (listener.hasOwnProperty("removed")) listener.removed(id);
+          if (Object.prototype.hasOwnProperty.call(listener, "removed")) listener.removed(id);
         });
         this.items = this.items.filter((n) => n.id !== id);
       }
@@ -5219,9 +5290,9 @@
         }
       };
     });
-    Alpine.directive("h-notification-overlay", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-notification-overlay", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "SECTION") {
-        throw new Error(`${original2} must be a button`);
+        throw new Error(`${original} must be a button`);
       }
       const notificationTemplates = {};
       el.querySelectorAll("template").forEach((template) => {
@@ -5356,17 +5427,17 @@
         xlBreakpointListener.remove();
       });
     });
-    Alpine.directive("h-notification-list", (el, { original: original2 }) => {
+    Alpine.directive("h-notification-list", (el, { original }) => {
       if (el.tagName !== "OL" && el.tagName !== "UL") {
-        throw new Error(`${original2} must be a list element`);
+        throw new Error(`${original} must be a list element`);
       }
       el.classList.add("flex", "flex-col", "divide-solid", "divide-y");
       el.setAttribute("data-slot", "notification-list");
       el.setAttribute("role", "group");
     });
-    Alpine.directive("h-notification", (el, { original: original2, modifiers }) => {
+    Alpine.directive("h-notification", (el, { original, modifiers }) => {
       if (el.tagName !== "LI") {
-        throw new Error(`${original2} must be a list item element`);
+        throw new Error(`${original} must be a list item element`);
       }
       el.classList.add("pointer-events-auto", "p-3", "flex", "gap-2");
       if (modifiers.includes("floating")) {
@@ -5402,7 +5473,7 @@
       el.classList.add("flex", "gap-2", "data-[orientation=vertical]:flex-col");
       el.setAttribute("data-slot", "notification-actions");
     });
-    Alpine.directive("h-notification-close", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-notification-close", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
       if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "notification-close");
       let nId;
       function close() {
@@ -5421,7 +5492,7 @@
           el.removeEventListener("click", close);
         });
       } else {
-        console.error(`${original2} must be inside a notification with an id`);
+        console.error(`${original} must be inside a notification with an id`);
       }
     });
   }
@@ -5510,7 +5581,7 @@
   // src/components/popover.js
   function popover_default(Alpine) {
     Alpine.directive("h-popover-trigger", (el, { expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2, cleanup }) => {
-      el._popover = Alpine2.reactive({
+      el._h_popover = Alpine2.reactive({
         id: void 0,
         controls: `hpc${uuid_default()}`,
         auto: expression ? false : true,
@@ -5520,7 +5591,7 @@
         const getExpanded = evaluateLater(expression);
         effect(() => {
           getExpanded((expanded) => {
-            el._popover.expanded = expanded;
+            el._h_popover.expanded = expanded;
           });
         });
       }
@@ -5530,33 +5601,33 @@
       }
       if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "popover-trigger");
       if (el.hasAttribute("id")) {
-        el._popover.id = el.getAttribute("id");
+        el._h_popover.id = el.getAttribute("id");
       } else {
-        el._popover.id = `hp${uuid_default()}`;
-        el.setAttribute("id", el._popover.id);
+        el._h_popover.id = `hp${uuid_default()}`;
+        el.setAttribute("id", el._h_popover.id);
       }
-      el.setAttribute("aria-controls", el._popover.controls);
+      el.setAttribute("aria-controls", el._h_popover.controls);
       el.setAttribute("aria-haspopup", "dialog");
       const setAttributes = () => {
-        el.setAttribute("aria-expanded", el._popover.expanded);
+        el.setAttribute("aria-expanded", el._h_popover.expanded);
       };
       const close = () => {
-        el._popover.expanded = false;
+        el._h_popover.expanded = false;
         el.addEventListener("click", handler);
         setAttributes();
       };
       const handler = () => {
-        el._popover.expanded = !el._popover.expanded;
+        el._h_popover.expanded = !el._h_popover.expanded;
         setAttributes();
         Alpine2.nextTick(() => {
-          if (el._popover.auto && el._popover.expanded) {
+          if (el._h_popover.auto && el._h_popover.expanded) {
             top.addEventListener("click", close, { once: true });
             el.removeEventListener("click", handler);
           }
         });
       };
       setAttributes();
-      if (el._popover.auto) {
+      if (el._h_popover.auto) {
         el.addEventListener("click", handler);
         cleanup(() => {
           el.removeEventListener("click", handler);
@@ -5568,16 +5639,16 @@
         });
       }
     });
-    Alpine.directive("h-popover", (el, { original: original2, modifiers }, { effect, cleanup }) => {
+    Alpine.directive("h-popover", (el, { original, modifiers }, { effect, cleanup }) => {
       const popover = (() => {
         let sibling = el.previousElementSibling;
-        while (sibling && !sibling.hasOwnProperty("_popover")) {
+        while (sibling && !Object.prototype.hasOwnProperty.call(sibling, "_h_popover")) {
           sibling = sibling.previousElementSibling;
         }
         return sibling;
       })();
       if (!popover) {
-        throw new Error(`${original2} must be placed after a popover element`);
+        throw new Error(`${original} must be placed after a popover element`);
       }
       el.classList.add(
         "absolute",
@@ -5603,8 +5674,8 @@
       el.setAttribute("data-slot", "popover");
       el.setAttribute("role", "dialog");
       el.setAttribute("tabindex", "-1");
-      el.setAttribute("id", popover._popover.controls);
-      el.setAttribute("aria-labelledby", popover._popover.id);
+      el.setAttribute("id", popover._h_popover.controls);
+      el.setAttribute("aria-labelledby", popover._h_popover.id);
       let noScroll = modifiers.includes("no-scroll");
       if (noScroll) {
         el.classList.remove("overflow-auto");
@@ -5642,7 +5713,7 @@
         });
       }
       effect(() => {
-        if (popover._popover.expanded) {
+        if (popover._h_popover.expanded) {
           el.classList.remove("hidden");
           autoUpdateCleanup = autoUpdate(popover, el, updatePosition);
         } else {
@@ -7614,7 +7685,7 @@
       el.classList.add("harmonia-slider");
       el.setAttribute("data-slot", "range");
       initialize(el, evaluate2(expression));
-      if (el.hasOwnProperty("_x_model")) {
+      if (Object.prototype.hasOwnProperty.call(el, "_x_model")) {
         el.noUiSlider.on("change", (values) => {
           el._x_model.set(values);
           el.dispatchEvent(new Event("change", { bubbles: true }));
@@ -7652,9 +7723,18 @@
         set: void 0,
         get: void 0
       };
-      el.classList.add("cursor-pointer", "outline-none", "transition-[color,box-shadow]", "motion-reduce:transition-none", "duration-200", "w-full", "has-[input:disabled]:pointer-events-none", "has-[input:disabled]:opacity-50");
+      el.classList.add("cursor-pointer", "outline-none", "transition-colors", "transition-shadow", "motion-reduce:transition-none", "duration-200", "w-full", "has-[input:disabled]:pointer-events-none", "has-[input:disabled]:opacity-50");
       if (modifiers.includes("table")) {
-        el.classList.add("h-10", "flex", "focus-visible:inset-ring-ring/50", "focus-visible:inset-ring-2", "hover:bg-table-hover", "hover:text-table-hover-foreground", "active:!bg-table-active", "active:!text-table-active-foreground");
+        el.classList.add(
+          "h-10",
+          "flex",
+          "focus-visible:inset-ring-ring/50",
+          "focus-visible:inset-ring-2",
+          '[&>[data-slot="select-input"]]:hover:bg-table-hover',
+          '[&>[data-slot="select-input"]]:hover:text-table-hover-foreground',
+          '[&>[data-slot="select-input"]]:active:!bg-table-active',
+          '[&>[data-slot="select-input"]]:active:!text-table-active-foreground'
+        );
         el.setAttribute("data-slot", "cell-input-select");
       } else {
         el.classList.add(
@@ -7668,8 +7748,11 @@
           "has-[input[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",
+          '[&>[data-slot="select-input"]]:hover:bg-secondary-hover',
+          '[&>[data-slot="select-input"]]:hover:text-secondary-foreground',
+          '[&>[data-slot="select-input"]]:active:bg-secondary-active',
+          '[&>[data-slot="select-input"]]:active:text-secondary-foreground',
+          '[&>[data-slot="select-input"]]:rounded-control',
           "rounded-control",
           "border",
           "bg-input-inner",
@@ -7684,11 +7767,11 @@
         });
       }
     });
-    Alpine.directive("h-select-input", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-select-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "INPUT") {
-        throw new Error(`${original2} must be an input of type "text"`);
+        throw new Error(`${original} must be an input of type "text"`);
       }
-      const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
+      const select = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_select"));
       const label = (() => {
         const field = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "field");
         if (field) {
@@ -7697,8 +7780,8 @@
         return;
       })();
       if (!select) {
-        throw new Error(`${original2} must be inside a select element`);
-      } else if (el.hasOwnProperty("_x_model")) {
+        throw new Error(`${original} must be inside a select element`);
+      } else if (Object.prototype.hasOwnProperty.call(el, "_x_model")) {
         select._h_select.multiple = Array.isArray(el._x_model.get());
         select._h_model.set = (value) => {
           if (select._h_select.multiple) {
@@ -7796,7 +7879,7 @@
       const onKeyDown = (event) => {
         switch (event.key) {
           case "Down":
-          case "ArrowDown":
+          case "ArrowDown": {
             event.preventDefault();
             let nextIndex = 0;
             for (let o = 0; o < options.length; o++) {
@@ -7818,8 +7901,9 @@
             options[nextIndex].setAttribute("tabindex", "0");
             options[nextIndex].focus();
             break;
+          }
           case "Up":
-          case "ArrowUp":
+          case "ArrowUp": {
             event.preventDefault();
             let prevIndex = options.length - 1;
             for (let o = options.length - 1; o >= 0; o--) {
@@ -7841,6 +7925,7 @@
             options[prevIndex].setAttribute("tabindex", "0");
             options[prevIndex].focus();
             break;
+          }
           case "Home":
           case "PageUp":
             event.preventDefault();
@@ -7926,7 +8011,7 @@
       fakeTrigger.addEventListener("click", onClick);
       const chevronDown = createSvg({
         icon: ChevronDown,
-        classes: "opacity-70 text-foreground size-4 shrink-0 pointer-events-none transition-transform motion-reduce:transition-none duration-200",
+        classes: "opacity-70 text-inherit size-4 shrink-0 pointer-events-none transition-transform motion-reduce:transition-none duration-200",
         attrs: {
           "aria-hidden": true,
           role: "presentation"
@@ -7957,10 +8042,10 @@
         }
       });
     });
-    Alpine.directive("h-select-content", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
-      const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
+    Alpine.directive("h-select-content", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
+      const select = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_select"));
       if (!select) {
-        throw new Error(`${original2} must be inside a select element`);
+        throw new Error(`${original} must be inside a select element`);
       }
       el.classList.add(
         "absolute",
@@ -7989,7 +8074,7 @@
       el.setAttribute("id", select._h_select.controls);
       el.setAttribute("tabindex", "-1");
       if (!select._h_select.trigger) {
-        throw new Error(`${original2}: trigger not found`);
+        throw new Error(`${original}: trigger not found`);
       }
       let autoUpdateCleanup;
       function updatePosition() {
@@ -8050,10 +8135,10 @@
         el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
-    Alpine.directive("h-select-search", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
-      const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
+    Alpine.directive("h-select-search", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
+      const select = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_select"));
       if (!select) {
-        throw new Error(`${original2} must be inside an h-select element`);
+        throw new Error(`${original} must be inside an h-select element`);
       } else {
         select._h_select.filterType = FilterType[el.getAttribute("data-filter")] ?? FilterType["starts-with"];
       }
@@ -8118,17 +8203,17 @@
     Alpine.directive("h-select-label", (el) => {
       el.classList.add("text-muted-foreground", "px-2", "py-1.5", "text-xs");
       el.setAttribute("data-slot", "select-label");
-      const selectGroup = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_selectGroup"));
+      const selectGroup = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_selectGroup"));
       if (selectGroup) {
         const id = `hsl${uuid_default()}`;
         el.setAttribute("id", id);
         selectGroup._h_selectGroup.labelledby = id;
       }
     });
-    Alpine.directive("h-select-option", (el, { original: original2, expression }, { effect, evaluateLater, cleanup }) => {
-      const select = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
+    Alpine.directive("h-select-option", (el, { original, expression }, { effect, evaluateLater, cleanup }) => {
+      const select = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_select"));
       if (!select) {
-        throw new Error(`${original2} must be inside an h-select element`);
+        throw new Error(`${original} must be inside an h-select element`);
       }
       el.classList.add(
         "focus:bg-primary",
@@ -8221,6 +8306,7 @@
       const onActivate = (event) => {
         if (event.type === "keydown" && (event.key === "Enter" || event.key === " ") || event.type === "click") {
           if (select._h_select.multiple) {
+            event.stopPropagation();
             const vIndex = select._h_model.get().indexOf(getValue());
             if (vIndex > -1) {
               const val = select._h_model.get().splice(vIndex, 1);
@@ -8323,10 +8409,10 @@
         el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
-    Alpine.directive("h-sheet", (el, { original: original2 }, { effect, cleanup }) => {
-      const overlay = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sheet_overlay"));
+    Alpine.directive("h-sheet", (el, { original }, { effect, cleanup }) => {
+      const overlay = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_sheet_overlay"));
       if (!overlay) {
-        throw new Error(`${original2} must be placed inside a sheet overlay`);
+        throw new Error(`${original} must be placed inside a sheet overlay`);
       }
       el.classList.add("hidden", "bg-background", "fixed", "shadow-lg", "transform", "transition-all", "motion-reduce:transition-none", "duration-200", "ease-out");
       el.setAttribute("data-slot", "sheet");
@@ -8449,10 +8535,10 @@
         });
       }
     });
-    Alpine.directive("h-sidebar-group-label", (el, { original: original2 }, { cleanup }) => {
-      const group = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_group"));
+    Alpine.directive("h-sidebar-group-label", (el, { original }, { cleanup }) => {
+      const group = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_sidebar_group"));
       if (!group) {
-        throw new Error(`${original2} must be placed inside a sidebar group`);
+        throw new Error(`${original} must be placed inside a sidebar group`);
       }
       el.classList.add(
         "ring-sidebar-ring",
@@ -8475,7 +8561,7 @@
       );
       el.setAttribute("data-slot", "sidebar-group-label");
       if (group._h_sidebar_group.collapsable) {
-        el.classList.add("text-sidebar-foreground", "text-sm", "hover:bg-secondary-hover", "active:bg-secondary-active");
+        el.classList.add("text-sidebar-foreground", "text-sm", "hover:bg-sidebar-secondary", "hover:text-sidebar-secondary-foreground", "active:bg-sidebar-secondary", "active:text-sidebar-secondary-foreground");
         if (el.hasAttribute("id")) {
           group._h_sidebar_group.controlId = el.getAttribute("id");
         } else {
@@ -8541,10 +8627,10 @@
       }
       el.setAttribute("data-slot", "sidebar-group-action");
     });
-    Alpine.directive("h-sidebar-group-content", (el, { original: original2 }, { effect }) => {
-      const group = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_group"));
+    Alpine.directive("h-sidebar-group-content", (el, { original }, { effect }) => {
+      const group = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_sidebar_group"));
       if (!group) {
-        throw new Error(`${original2} must be placed inside a sidebar group`);
+        throw new Error(`${original} must be placed inside a sidebar group`);
       }
       el.classList.add("w-full", "text-sm", "data-[collapsed=true]:hidden", "group-data-[collapsed=true]/sidebar:!block");
       el.setAttribute("data-slot", "sidebar-group-content");
@@ -8557,16 +8643,16 @@
         });
       }
     });
-    Alpine.directive("h-sidebar-menu", (el, { original: original2 }) => {
+    Alpine.directive("h-sidebar-menu", (el, { original }) => {
       if (el.tagName !== "UL") {
-        throw new Error(`${original2} must be an ul element`);
+        throw new Error(`${original} must be an ul element`);
       }
       el.classList.add("vbox", "w-full", "min-w-0", "gap-1");
       el.setAttribute("data-slot", "sidebar-menu");
     });
-    Alpine.directive("h-sidebar-menu-item", (el, { original: original2, expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
+    Alpine.directive("h-sidebar-menu-item", (el, { original, expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
       if (el.tagName !== "LI") {
-        throw new Error(`${original2} must be a li element`);
+        throw new Error(`${original} must be a li element`);
       }
       el._h_sidebar_menu_item = {
         isSub: false,
@@ -8602,13 +8688,13 @@
         });
       }
     });
-    Alpine.directive("h-sidebar-menu-button", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-sidebar-menu-button", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "BUTTON" && el.tagName !== "A") {
-        throw new Error(`${original2} must be a button or a link`);
+        throw new Error(`${original} must be a button or a link`);
       } else if (el.tagName === "BUTTON") {
         el.setAttribute("type", "button");
       }
-      const menuItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_menu_item"));
+      const menuItem = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_sidebar_menu_item"));
       el.classList.add(
         "flex",
         "w-full",
@@ -8641,7 +8727,7 @@
         lg: ["h-12", "text-sm", "group-data-[collapsed=true]/sidebar:p-0!"]
       };
       function setSize2(size3) {
-        if (sizes.hasOwnProperty(size3)) {
+        if (Object.prototype.hasOwnProperty.call(sizes, size3)) {
           el.classList.add(...sizes[size3]);
         }
       }
@@ -8742,9 +8828,9 @@
       }
       el.setAttribute("data-slot", "sidebar-menu-action");
     });
-    Alpine.directive("h-sidebar-menu-badge", (el, { original: original2 }) => {
+    Alpine.directive("h-sidebar-menu-badge", (el, { original }) => {
       if (el.tagName !== "SPAN") {
-        throw new Error(`${original2} must be a span element`);
+        throw new Error(`${original} must be a span element`);
       }
       el.classList.add("flex-1", "pointer-events-none", "flex", "h-full", "min-w-min", "items-center", "justify-end", "text-xs", "font-medium", "tabular-nums", "select-none", "group-data-[collapsed=true]/sidebar:hidden");
       el.setAttribute("data-slot", "sidebar-menu-badge");
@@ -8770,13 +8856,13 @@
       el.setAttribute("data-slot", "sidebar-separator");
       el.setAttribute("role", "none");
     });
-    Alpine.directive("h-sidebar-menu-sub", (el, { original: original2 }, { effect, Alpine: Alpine2 }) => {
+    Alpine.directive("h-sidebar-menu-sub", (el, { original }, { effect, Alpine: Alpine2 }) => {
       if (el.tagName !== "UL") {
-        throw new Error(`${original2} must be an ul element`);
+        throw new Error(`${original} must be an ul element`);
       }
-      const menuItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_menu_item"));
+      const menuItem = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_sidebar_menu_item"));
       if (!menuItem) {
-        throw new Error(`${original2} must be placed inside a sidebar menu item`);
+        throw new Error(`${original} must be placed inside a sidebar menu item`);
       }
       el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "pl-2.5", "py-0.5", "ml-3.5", "data-[collapsed=true]:!hidden", "group-data-[collapsed=true]/sidebar:!hidden");
       if (el.getAttribute("data-line") !== "false") {
@@ -8851,7 +8937,7 @@
 
   // src/components/split.js
   function split_default(Alpine) {
-    Alpine.directive("h-split", (el, {}, { cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-split", (el, _, { cleanup, Alpine: Alpine2 }) => {
       const panels = [];
       const state = Alpine2.reactive({
         isHorizontal: el.getAttribute("data-orientation") === "horizontal",
@@ -9047,10 +9133,10 @@
         observer.disconnect();
       });
     });
-    Alpine.directive("h-split-panel", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
-      const split = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_split"));
+    Alpine.directive("h-split-panel", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
+      const split = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_split"));
       if (!split) {
-        throw new Error(`${original2} must be inside an split element`);
+        throw new Error(`${original} must be inside an split element`);
       }
       el.classList.add(
         "flex",
@@ -9495,7 +9581,8 @@
         "justify-between",
         "outline-none",
         "gap-2",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
         "motion-reduce:transition-none",
         "[&_svg]:pointer-events-none",
         "[&_svg]:opacity-70",
@@ -9600,7 +9687,7 @@
       el.setAttribute("role", "tablist");
       el.setAttribute("data-slot", "tab-list");
     });
-    Alpine.directive("h-tab", (el, { original: original2 }) => {
+    Alpine.directive("h-tab", (el, { original }) => {
       el.classList.add(
         "cursor-pointer",
         "focus-visible:border-ring",
@@ -9621,7 +9708,8 @@
         "text-sm",
         "font-medium",
         "whitespace-nowrap",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
         "motion-reduce:transition-none",
         "group-data-[floating=true]/tab-bar:rounded-md",
         "group-data-[floating=true]/tab-bar:border",
@@ -9648,8 +9736,8 @@
       );
       el.setAttribute("role", "tab");
       el.setAttribute("data-slot", "tab");
-      if (!el.hasAttribute("id")) throw new Error(`${original2}: Tabs must have an id`);
-      if (!el.hasAttribute("aria-controls")) throw new Error(`${original2}: aria-controls must be set to the tab-content id.`);
+      if (!el.hasAttribute("id")) throw new Error(`${original}: Tabs must have an id`);
+      if (!el.hasAttribute("aria-controls")) throw new Error(`${original}: aria-controls must be set to the tab-content id.`);
     });
     Alpine.directive("h-tab-action", (el) => {
       el.classList.add("cursor-pointer", "ml-auto", "rounded-md", "text-foreground", "hover:bg-secondary", "hover:text-secondary-foreground", "active:bg-secondary-active");
@@ -9683,13 +9771,13 @@
       el.setAttribute("role", "button");
       el.setAttribute("data-slot", "tab-list-action");
     });
-    Alpine.directive("h-tabs-content", (el, { original: original2 }) => {
+    Alpine.directive("h-tabs-content", (el, { original }) => {
       el.classList.add("flex-1", "outline-none");
       el.setAttribute("role", "tabpanel");
       el.setAttribute("tabindex", "0");
       el.setAttribute("data-slot", "tabs-content");
-      if (!el.hasAttribute("id")) throw new Error(`${original2}: Tab content must have an id`);
-      if (!el.hasAttribute("aria-labelledby")) throw new Error(`${original2}: aria-labelledby must be set to the tab id.`);
+      if (!el.hasAttribute("id")) throw new Error(`${original}: Tab content must have an id`);
+      if (!el.hasAttribute("aria-labelledby")) throw new Error(`${original}: aria-labelledby must be set to the tab id.`);
     });
   }
 
@@ -9803,7 +9891,8 @@
         "py-2",
         "text-base",
         "shadow-input",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
         "motion-reduce:transition-none",
         "outline-none",
         "focus-visible:ring-[calc(var(--spacing)*0.75)]",
@@ -9985,8 +10074,6 @@
       el.classList.add(
         "cursor-pointer",
         "border-input",
-        "hover:bg-secondary-hover",
-        "active:bg-secondary-active",
         "flex",
         "items-center",
         "justify-between",
@@ -9996,7 +10083,8 @@
         "data-[size=sm]:pr-1",
         "text-sm",
         "whitespace-nowrap",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
         "motion-reduce:transition-none",
         "duration-200",
         "outline-none",
@@ -10013,16 +10101,30 @@
           "has-[input[aria-invalid=true]]:inset-ring-negative/20",
           "dark:has-[input[aria-invalid=true]]:inset-ring-negative/40",
           "has-[input:invalid]:!inset-ring-negative/20",
-          "dark:has-[input:invalid]:!inset-ring-negative/40"
+          "dark:has-[input:invalid]:!inset-ring-negative/40",
+          "hover:bg-table-hover",
+          "hover:text-table-hover-foreground",
+          "active:!bg-table-active",
+          "active:!text-table-active-foreground",
+          "has-[[aria-expanded=true]]:bg-transparent",
+          "has-[[aria-expanded=true]]:text-foreground"
         );
         el.setAttribute("data-slot", "cell-input-time");
       } else {
         el.classList.add(
           "w-full",
+          "hover:bg-secondary-hover",
+          "hover:text-secondary-foreground",
+          '[&>[data-slot="time-picker-input"]]:hover:text-secondary-foreground',
+          "active:bg-secondary-active",
+          "active:text-secondary-foreground",
+          '[&>[data-slot="time-picker-input"]]:active:text-secondary-foreground',
           "rounded-control",
           "border",
           "bg-input-inner",
           "shadow-input",
+          "has-[[aria-expanded=true]]:bg-input-inner",
+          "has-[[aria-expanded=true]]:text-foreground",
           "has-[input:focus-visible]:border-ring",
           "has-[input:focus-visible]:ring-[calc(var(--spacing)*0.75)]",
           "has-[input:focus-visible]:ring-ring/50",
@@ -10039,7 +10141,7 @@
       el.appendChild(
         createSvg({
           icon: Clock,
-          classes: "opacity-70 text-foreground size-4 shrink-0 pointer-events-none",
+          classes: "opacity-70 text-inherit size-4 shrink-0 pointer-events-none",
           attrs: {
             "aria-hidden": true,
             role: "presentation"
@@ -10086,13 +10188,13 @@
         top.removeEventListener("click", el._h_timepicker.close);
       });
     });
-    Alpine.directive("h-time-picker-input", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-time-picker-input", (el, { original }, { effect, cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "INPUT") {
-        throw new Error(`${original2} must be a readonly input of type "text"`);
+        throw new Error(`${original} must be a readonly input of type "text"`);
       }
-      const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
+      const timepicker = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_timepicker"));
       if (!timepicker) {
-        throw new Error(`${original2} must be inside a time-picker element`);
+        throw new Error(`${original} must be inside a time-picker element`);
       }
       timepicker._h_timepicker.focusInput = () => {
         el.focus();
@@ -10102,7 +10204,7 @@
           el.dispatchEvent(new Event("change"));
         });
       };
-      if (el.hasOwnProperty("_x_model")) {
+      if (Object.prototype.hasOwnProperty.call(el, "_x_model")) {
         timepicker._h_timepicker.model = el._x_model;
       } else {
         timepicker._h_timepicker.model = {
@@ -10190,7 +10292,7 @@
       });
     });
     Alpine.directive("h-time-picker-popup", (el, _, { effect, cleanup, Alpine: Alpine2 }) => {
-      const timepicker = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_timepicker"));
+      const timepicker = Alpine2.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_timepicker"));
       el.classList.add(
         "overflow-hidden",
         "outline-none",
@@ -10290,7 +10392,7 @@
           }
           switch (event.key) {
             case "Up":
-            case "ArrowUp":
+            case "ArrowUp": {
               event.target.setAttribute("tabindex", "-1");
               let prevElem = event.target.previousElementSibling;
               if (prevElem === null || prevElem.classList.contains("hidden")) {
@@ -10303,8 +10405,9 @@
               prevElem.setAttribute("tabindex", "0");
               prevElem.focus();
               break;
+            }
             case "Down":
-            case "ArrowDown":
+            case "ArrowDown": {
               event.target.setAttribute("tabindex", "-1");
               let nextElem = event.target.nextElementSibling;
               if (nextElem === null || nextElem.classList.contains("hidden")) {
@@ -10317,8 +10420,9 @@
               nextElem.setAttribute("tabindex", "0");
               nextElem.focus();
               break;
+            }
             case "Home":
-            case "PageUp":
+            case "PageUp": {
               let firstChild;
               if (list.firstChild === event.target) {
                 break;
@@ -10335,8 +10439,9 @@
               firstChild.setAttribute("tabindex", "0");
               firstChild.focus();
               break;
+            }
             case "End":
-            case "PageDown":
+            case "PageDown": {
               let lastElem;
               if (list.lastChild === event.target) {
                 break;
@@ -10353,22 +10458,25 @@
               lastElem.setAttribute("tabindex", "0");
               lastElem.focus();
               break;
+            }
             case "Right":
-            case "ArrowRight":
+            case "ArrowRight": {
               let nextColumn = event.target.parentElement.nextElementSibling;
               if (nextColumn) {
                 const child = nextColumn.querySelector('li[tabindex="0"]');
                 child.focus();
               }
               break;
+            }
             case "Left":
-            case "ArrowLeft":
+            case "ArrowLeft": {
               let prevColumn = event.target.parentElement.previousElementSibling;
               if (prevColumn) {
                 const child = prevColumn.querySelector('li[tabindex="0"]');
                 child.focus();
               }
               break;
+            }
             case "Enter":
             case " ":
               event.target.click();
@@ -10769,16 +10877,16 @@
         el.removeEventListener("pointerleave", handler);
       });
     });
-    Alpine.directive("h-tooltip", (el, { original: original2 }, { effect, cleanup }) => {
+    Alpine.directive("h-tooltip", (el, { original }, { effect, cleanup }) => {
       const tooltip = (() => {
         let sibling = el.previousElementSibling;
-        while (sibling && !sibling.hasOwnProperty("_tooltip")) {
+        while (sibling && !Object.prototype.hasOwnProperty.call(sibling, "_tooltip")) {
           sibling = sibling.previousElementSibling;
         }
         return sibling;
       })();
       if (!tooltip) {
-        throw new Error(`${original2} must be placed after a tooltip trigger element`);
+        throw new Error(`${original} must be placed after a tooltip trigger element`);
       }
       el.classList.add(
         "absolute",
@@ -10883,7 +10991,7 @@
         );
         el.setAttribute("data-slot", "subtree");
         el.setAttribute("role", "group");
-        const treeItem = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_tree_item"));
+        const treeItem = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_tree_item"));
         effect(() => {
           if (treeItem._h_tree_item.expanded) {
             el.classList.remove("!hidden");
@@ -11023,9 +11131,9 @@
         });
       }
     });
-    Alpine.directive("h-tree-button", (el, { original: original2 }, { effect }) => {
-      const treeItem = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_tree_item"));
-      if (!treeItem) throw new Error(`${original2} must be inside a tree item`);
+    Alpine.directive("h-tree-button", (el, { original }, { effect }) => {
+      const treeItem = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_tree_item"));
+      if (!treeItem) throw new Error(`${original} must be inside a tree item`);
       el.classList.add(
         "flex",
         "w-full",
@@ -11167,7 +11275,7 @@
 
   // src/utils/template.js
   function template_default(Alpine) {
-    Alpine.directive("h-template", (el, { original: original2, expression }, { evaluate: evaluate2, Alpine: Alpine2, cleanup }) => {
+    Alpine.directive("h-template", (el, { original, expression }, { evaluate: evaluate2, Alpine: Alpine2, cleanup }) => {
       if (el.hasAttribute(Alpine2.prefixed("data"))) {
         const template = evaluate2(expression);
         const clone = template.content.cloneNode(true).firstElementChild;
@@ -11181,14 +11289,14 @@
           clone.remove();
         });
       } else {
-        console.error(`${original2}: ${Alpine2.prefixed("data")} directive is missing`);
+        console.error(`${original}: ${Alpine2.prefixed("data")} directive is missing`);
       }
     });
   }
 
   // src/utils/include.js
   function include_default(Alpine) {
-    Alpine.directive("h-include", (el, { modifiers, expression }, { evaluateLater, effect, cleanup, Alpine: Alpine2 }) => {
+    Alpine.directive("h-include", (el, { original, modifiers, expression }, { evaluateLater, effect, cleanup, Alpine: Alpine2 }) => {
       const getUrl = evaluateLater(expression);
       function executeScript(oldScript) {
         return new Promise((resolve, reject) => {
@@ -11274,7 +11382,7 @@
   }
 
   // package.json
-  var version = "1.8.0";
+  var version = "1.9.1";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };