@codbex/harmonia 1.8.0 → 1.9.0

package/dist/harmonia.js

@@ -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"
       );
@@ -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",
@@ -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",
@@ -3467,7 +3500,20 @@
       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",
@@ -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"
@@ -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",
@@ -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",
@@ -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 }));
       };
@@ -4614,7 +4678,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) {
@@ -7652,9 +7718,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 +7743,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",
@@ -7926,7 +8004,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"
@@ -8221,6 +8299,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);
@@ -8475,7 +8554,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 {
@@ -9495,7 +9574,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",
@@ -9621,7 +9701,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",
@@ -9803,7 +9884,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 +10067,6 @@
       el.classList.add(
         "cursor-pointer",
         "border-input",
-        "hover:bg-secondary-hover",
-        "active:bg-secondary-active",
         "flex",
         "items-center",
         "justify-between",
@@ -9996,7 +10076,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 +10094,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 +10134,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"
@@ -11274,7 +11369,7 @@
   }
 
   // package.json
-  var version = "1.8.0";
+  var version = "1.9.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };