@codbex/harmonia 1.8.0 → 1.9.0

package/dist/harmonia.esm.js

@@ -2838,7 +2838,8 @@ function badge_default(Alpine) {
       "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"
     );
@@ -2927,6 +2928,7 @@ var buttonVariants = {
   default: [
     "bg-secondary",
     "text-secondary-foreground",
+    "fill-secondary-foreground",
     "shadow-button",
     "hover:bg-secondary-hover",
     "active:bg-secondary-active",
@@ -2938,6 +2940,7 @@ var buttonVariants = {
   primary: [
     "bg-primary",
     "text-primary-foreground",
+    "fill-primary-foreground",
     "shadow-button",
     "focus-visible:outline-primary/50",
     "hover:bg-primary-hover",
@@ -2950,6 +2953,7 @@ var buttonVariants = {
   positive: [
     "bg-positive",
     "text-positive-foreground",
+    "fill-positive-foreground",
     "shadow-button",
     "focus-visible:outline-positive/50",
     "hover:bg-positive-hover",
@@ -2962,6 +2966,7 @@ var buttonVariants = {
   negative: [
     "bg-negative",
     "text-negative-foreground",
+    "fill-negative-foreground",
     "shadow-button",
     "focus-visible:outline-negative/50",
     "hover:bg-negative-hover",
@@ -2974,6 +2979,7 @@ var buttonVariants = {
   warning: [
     "bg-warning",
     "text-warning-foreground",
+    "fill-warning-foreground",
     "shadow-button",
     "focus-visible:outline-warning/50",
     "hover:bg-warning-hover",
@@ -2986,6 +2992,7 @@ var buttonVariants = {
   information: [
     "bg-information",
     "text-information-foreground",
+    "fill-information-foreground",
     "shadow-button",
     "focus-visible:outline-information/50",
     "hover:bg-information-hover",
@@ -2999,25 +3006,49 @@ var buttonVariants = {
     "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"]
 };
@@ -3033,6 +3064,7 @@ var setButtonClasses = (el) => {
     "text-sm",
     "font-medium",
     "transition-all",
+    "duration-100",
     "motion-reduce:transition-none",
     "disabled:pointer-events-none",
     "disabled:opacity-50",
@@ -5297,7 +5329,8 @@ function datepicker_default(Alpine) {
       "border-input",
       "flex",
       "items-center",
-      "transition-[color,box-shadow]",
+      "transition-colors",
+      "transition-shadow",
       "motion-reduce:transition-none",
       "duration-200",
       "outline-none",
@@ -5373,7 +5406,20 @@ function datepicker_default(Alpine) {
     if (!datepicker) {
       throw new Error(`${original2} 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",
@@ -5404,7 +5450,7 @@ function datepicker_default(Alpine) {
     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"
@@ -5911,7 +5957,8 @@ function input_default(Alpine) {
       "[&::-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",
@@ -5969,7 +6016,8 @@ function input_default(Alpine) {
       "rounded-control",
       "border",
       "shadow-input",
-      "transition-[color,box-shadow]",
+      "transition-colors",
+      "transition-shadow",
       "motion-reduce:transition-none",
       "outline-none",
       "min-w-0",
@@ -6071,8 +6119,10 @@ function input_default(Alpine) {
       "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",
@@ -6117,7 +6167,7 @@ function input_default(Alpine) {
     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"
@@ -6135,16 +6185,23 @@ function input_default(Alpine) {
       "[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 }));
     };
@@ -6158,7 +6215,7 @@ function input_default(Alpine) {
     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"
@@ -6176,16 +6233,23 @@ function input_default(Alpine) {
       "[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 }));
     };
@@ -6520,7 +6584,9 @@ function menu_default(Alpine) {
     }
     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) {
@@ -7699,9 +7765,18 @@ function select_default(Alpine) {
       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(
@@ -7715,8 +7790,11 @@ function select_default(Alpine) {
         "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",
@@ -7973,7 +8051,7 @@ function select_default(Alpine) {
     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"
@@ -8268,6 +8346,7 @@ function select_default(Alpine) {
     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);
@@ -8522,7 +8601,7 @@ function sidebar_default(Alpine) {
     );
     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 {
@@ -9542,7 +9621,8 @@ function table_default(Alpine) {
       "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",
@@ -9668,7 +9748,8 @@ function tabs_default(Alpine) {
       "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",
@@ -9850,7 +9931,8 @@ function textarea_default(Alpine) {
       "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)]",
@@ -10032,8 +10114,6 @@ function timepicker_default(Alpine) {
     el.classList.add(
       "cursor-pointer",
       "border-input",
-      "hover:bg-secondary-hover",
-      "active:bg-secondary-active",
       "flex",
       "items-center",
       "justify-between",
@@ -10043,7 +10123,8 @@ function timepicker_default(Alpine) {
       "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",
@@ -10060,16 +10141,30 @@ function timepicker_default(Alpine) {
         "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",
@@ -10086,7 +10181,7 @@ function timepicker_default(Alpine) {
     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"
@@ -11136,7 +11231,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.8.0";
+var version = "1.9.0";
 
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";