@codbex/harmonia 1.7.2 → 1.9.0

package/dist/harmonia.js

@@ -597,12 +597,12 @@
       }) : { single: false };
       el.setAttribute("data-slot", "accordion");
     });
-    Alpine.directive("h-accordion-item", (el, { original: original2, expression, modifiers }, { effect, Alpine: Alpine2 }) => {
+    Alpine.directive("h-accordion-item", (el, { original: original2, expression, modifiers }, { Alpine: Alpine2 }) => {
       const accordion = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_accordion"));
       if (!accordion) {
         throw new Error(`${original2} must be inside an accordion`);
       }
-      el.classList.add("border-b", "last:border-b-0", "[[data-variant=header]_&]:data-[state=closed]:border-b-0");
+      el.classList.add("border-b", "last:border-b-0");
       el.setAttribute("data-slot", "accordion-item");
       const itemId = expression ?? `ha${uuid_default()}`;
       function getIsExpanded() {
@@ -622,11 +622,6 @@
         controls: `ha${uuid_default()}`,
         expanded: getIsExpanded()
       });
-      const setAttributes = () => {
-        el.setAttribute("data-state", el._h_accordionItem.expanded ? "open" : "closed");
-      };
-      setAttributes();
-      effect(setAttributes);
     });
     Alpine.directive("h-accordion-trigger", (el, { original: original2, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
       if (el.tagName.length !== 2 && !el.tagName.startsWith("H")) {
@@ -637,23 +632,12 @@
       if (!accordionItem || !accordion) {
         throw new Error(`${original2} must have an accordion and accordion item parent elements`);
       }
-      el.classList.add(
-        "flex",
-        "h-12",
-        "[[data-size=md]_&]:h-10",
-        "[[data-size=sm]_&]:h-8",
-        "[[data-variant=header]_&]:bg-object-header",
-        "[[data-variant=header]_&]:text-object-header-foreground",
-        "[[data-variant=header]_&]:px-4",
-        "[[data-variant=header]_&]:border-b",
-        "[[data-size=md][data-variant=header]_&]:px-3",
-        "[[data-size=sm][data-variant=header]_&]:px-2.5"
-      );
+      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");
       const getLabel = evaluateLater(expression);
       const chevronDown = createSvg({
         icon: ChevronDown,
-        classes: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200",
+        classes: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform motion-reduce:transition-none duration-200",
         attrs: {
           "aria-hidden": true,
           role: "presentation"
@@ -675,12 +659,13 @@
         "text-sm",
         "font-medium",
         "transition-all",
+        "motion-reduce:transition-none",
         "outline-none",
         "hover:underline",
         "focus-visible:ring-[calc(var(--spacing)*0.75)]",
         "disabled:pointer-events-none",
         "disabled:opacity-50",
-        "[&[data-state=open]>svg]:rotate-180"
+        "[&[aria-expanded=true]>svg]:rotate-180"
       );
       el.appendChild(button);
       effect(() => {
@@ -692,7 +677,6 @@
       button.setAttribute("id", accordionItem._h_accordionItem.id);
       button.setAttribute("aria-controls", accordionItem._h_accordionItem.controls);
       const setAttributes = () => {
-        button.setAttribute("data-state", accordionItem._h_accordionItem.expanded ? "open" : "closed");
         button.setAttribute("aria-expanded", accordionItem._h_accordionItem.expanded);
       };
       const handler = () => {
@@ -716,16 +700,46 @@
         });
       }
     });
-    Alpine.directive("h-accordion-content", (el, _, { effect, Alpine: Alpine2 }) => {
-      el.classList.add("pt-0", "pb-4", "overflow-hidden", "text-sm", "data-[state=closed]:hidden");
+    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"));
       if (parent) {
+        let onTransitionEnd = function(event) {
+          if (event.target === el && event.target.classList.contains("opacity-0")) {
+            el.classList.add("hidden");
+          }
+        };
         el.setAttribute("id", parent._h_accordionItem.controls);
         el.setAttribute("aria-labelledby", parent._h_accordionItem.id);
-        el.setAttribute("data-state", parent._h_accordionItem.expanded ? "open" : "closed");
         effect(() => {
-          el.setAttribute("data-state", parent._h_accordionItem.expanded ? "open" : "closed");
+          if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            el.style.removeProperty("max-height");
+            if (parent._h_accordionItem.expanded) {
+              el.classList.add("pb-4", "[[data-size=md]_&]:pb-3", "[[data-size=sm]_&]:pb-2");
+              el.classList.remove("hidden", "pb-0", "opacity-0");
+            } else {
+              el.classList.add("hidden", "pb-0", "opacity-0");
+              el.classList.remove("pb-4", "[[data-size=md]_&]:pb-3", "[[data-size=sm]_&]:pb-2");
+            }
+          } else if (parent._h_accordionItem.expanded) {
+            if (el.classList.contains("hidden")) {
+              el.classList.add("pb-4", "[[data-size=md]_&]:pb-3", "[[data-size=sm]_&]:pb-2");
+              el.classList.remove("hidden", "pb-0");
+              Alpine2.nextTick(() => {
+                el.style.maxHeight = `${el.scrollHeight}px`;
+                el.classList.remove("opacity-0");
+              });
+            }
+          } else {
+            el.style.maxHeight = "0px";
+            el.classList.add("opacity-0", "pb-0");
+            el.classList.remove("pb-4", "[[data-size=md]_&]:pb-3", "[[data-size=sm]_&]:pb-2");
+          }
+        });
+        el.addEventListener("transitionend", onTransitionEnd);
+        cleanup(() => {
+          el.removeEventListener("transitionend", onTransitionEnd);
         });
       }
     });
@@ -918,7 +932,9 @@
         "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"
       );
       el.setAttribute("data-slot", "badge");
@@ -1006,6 +1022,7 @@
     default: [
       "bg-secondary",
       "text-secondary-foreground",
+      "fill-secondary-foreground",
       "shadow-button",
       "hover:bg-secondary-hover",
       "active:bg-secondary-active",
@@ -1017,6 +1034,7 @@
     primary: [
       "bg-primary",
       "text-primary-foreground",
+      "fill-primary-foreground",
       "shadow-button",
       "focus-visible:outline-primary/50",
       "hover:bg-primary-hover",
@@ -1029,6 +1047,7 @@
     positive: [
       "bg-positive",
       "text-positive-foreground",
+      "fill-positive-foreground",
       "shadow-button",
       "focus-visible:outline-positive/50",
       "hover:bg-positive-hover",
@@ -1041,6 +1060,7 @@
     negative: [
       "bg-negative",
       "text-negative-foreground",
+      "fill-negative-foreground",
       "shadow-button",
       "focus-visible:outline-negative/50",
       "hover:bg-negative-hover",
@@ -1053,6 +1073,7 @@
     warning: [
       "bg-warning",
       "text-warning-foreground",
+      "fill-warning-foreground",
       "shadow-button",
       "focus-visible:outline-warning/50",
       "hover:bg-warning-hover",
@@ -1065,6 +1086,7 @@
     information: [
       "bg-information",
       "text-information-foreground",
+      "fill-information-foreground",
       "shadow-button",
       "focus-visible:outline-information/50",
       "hover:bg-information-hover",
@@ -1078,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"]
   };
@@ -1112,6 +1158,8 @@
       "text-sm",
       "font-medium",
       "transition-all",
+      "duration-100",
+      "motion-reduce:transition-none",
       "disabled:pointer-events-none",
       "disabled:opacity-50",
       "[&_svg]:pointer-events-none",
@@ -2722,11 +2770,25 @@
       el.classList.add("border", "rounded-control", "gap-2", "p-2");
       el.setAttribute("tabindex", "-1");
       if (datepicker) {
-        el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=open]:flex", "data-[state=open]:flex-col", "data-[state=closed]:hidden", "z-50", "shadow-md");
+        el.classList.add(
+          "absolute",
+          "bg-popover",
+          "text-popover-foreground",
+          "flex",
+          "flex-col",
+          "hidden",
+          "z-50",
+          "shadow-md",
+          "transition-[opacity,scale]",
+          "motion-reduce:transition-none",
+          "duration-100",
+          "ease-out",
+          "opacity-0",
+          "scale-95"
+        );
         el.setAttribute("role", "dialog");
         el.setAttribute("aria-modal", "true");
         el.setAttribute("data-slot", "date-picker-calendar");
-        el.setAttribute("data-state", datepicker._h_datepicker.state.expanded ? "open" : "closed");
       } else {
         el.classList.add("shadow-input", "data-[invalid=true]:border-negative", "data-[invalid=true]:ring-negative/20", "dark:data-[invalid=true]:ring-negative/40");
       }
@@ -2774,16 +2836,19 @@
       if (datepicker) {
         datepicker._h_datepicker.input.addEventListener("change", onInputChange);
       }
+      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()}`);
+          if (datepicker) datepicker._h_datepicker.input.setCustomValidity("Input value is not a valid date.");
+          else el.setAttribute("data-invalid", "true");
+        } else if (datepicker) {
+          datepicker._h_datepicker.input.value = formatter.format(selected);
+        }
+      }
       function checkForModel() {
         if (el.hasOwnProperty("_x_model") && el._x_model.get()) {
-          selected = new Date(el._x_model.get());
-          if (isNaN(selected)) {
-            console.error(`${original2}: 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) {
-            datepicker._h_datepicker.input.value = formatter.format(selected);
-          }
+          setFromModel();
         }
       }
       function dayClick(event) {
@@ -2830,6 +2895,7 @@
         "text-sm",
         "font-medium",
         "transition-all",
+        "motion-reduce:transition-none",
         "outline-none",
         "focus-visible:border-ring",
         "focus-visible:ring-ring/50",
@@ -2959,6 +3025,9 @@
             "size-8",
             "rounded-control",
             "outline-none",
+            "duration-100",
+            "transition-all",
+            "motion-reduce:transition-none",
             "hover:bg-secondary-hover",
             "hover:text-secondary-foreground",
             "focus:bg-secondary-hover",
@@ -3162,25 +3231,59 @@
             left: `${x}px`,
             top: `${y}px`
           });
+          el.classList.remove("scale-95", "opacity-0");
         });
       }
       if (datepicker) {
         effect(() => {
-          el.setAttribute("data-state", datepicker._h_datepicker.state.expanded ? "open" : "closed");
           if (datepicker._h_datepicker.state.expanded) {
+            el.classList.remove("hidden");
             autoUpdateCleanup = autoUpdate(datepicker, el, updatePosition);
             Alpine2.nextTick(() => {
               focusDay();
             });
           } else {
+            if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+              el.classList.add("hidden", "scale-95", "opacity-0");
+              Object.assign(el.style, {
+                left: "0px",
+                top: "0px"
+              });
+            } else {
+              el.classList.add("scale-95", "opacity-0");
+            }
             if (autoUpdateCleanup) autoUpdateCleanup();
-            Object.assign(el.style, {
-              left: "0px",
-              top: "0px"
-            });
           }
         });
       }
+      function onTransitionEnd(event) {
+        if (event.target === el && event.target.classList.contains("opacity-0")) {
+          el.classList.add("hidden");
+          Object.assign(el.style, {
+            left: "0px",
+            top: "0px"
+          });
+        }
+      }
+      if (datepicker) {
+        el.addEventListener("transitionend", onTransitionEnd);
+      }
+      if (el.hasOwnProperty("_x_model")) {
+        const modelExpression = el.getAttribute("x-model");
+        const evaluateModel = evaluateLater(modelExpression);
+        effect(() => {
+          evaluateModel((value) => {
+            if (!selected && value || value && selected.getTime() !== new Date(value).getTime()) {
+              setFromModel();
+              render();
+            } else if (!value) {
+              if (datepicker) datepicker._h_datepicker.input.value = "";
+              selected = void 0;
+              render();
+            }
+          });
+        });
+      }
       cleanup(() => {
         el.removeEventListener("keydown", onKeyDown);
         for (let d = 0; d < dayCells.length; d++) {
@@ -3188,6 +3291,7 @@
         }
         if (datepicker) {
           datepicker._h_datepicker.input.removeEventListener("change", onInputChange);
+          el.removeEventListener("transitionend", onTransitionEnd);
         }
       });
     });
@@ -3262,7 +3366,8 @@
         "shadow-input",
         "shrink-0",
         "size-5",
-        "transition-color"
+        "transition-colors",
+        "motion-reduce:transition-none"
       );
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "checkbox");
@@ -3271,57 +3376,6 @@
     });
   }
 
-  // src/components/collapsible.js
-  function collapsible_default(Alpine) {
-    Alpine.directive("h-collapsible", (el, { expression }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
-      el._h_collapsible = Alpine2.reactive({
-        expanded: expression ? evaluate2(expression) : false
-      });
-      if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible");
-      if (expression) {
-        const getExpanded = evaluateLater(expression);
-        effect(() => {
-          getExpanded((expanded) => {
-            el._h_collapsible.expanded = expanded;
-          });
-        });
-      }
-    });
-    Alpine.directive("h-collapsible-trigger", (el, { original: original2, modifiers }, { effect, Alpine: Alpine2, cleanup }) => {
-      const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
-      if (!collapsible) {
-        throw new Error(`${original2} must be inside a collapsible element`);
-      }
-      if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible-trigger");
-      if (modifiers.includes("chevron")) {
-        el.classList.add("[&_svg]:transition-transform");
-        if (modifiers.includes("90")) el.classList.add("[&[data-state=open]>svg:not(:first-child):last-child]:rotate-90", "[&[data-state=open]>svg:only-child]:rotate-90");
-        else el.classList.add("[&[data-state=open]>svg:not(:first-child):last-child]:rotate-180", "[&[data-state=open]>svg:only-child]:rotate-180");
-      }
-      const handler = () => {
-        collapsible._h_collapsible.expanded = !collapsible._h_collapsible.expanded;
-      };
-      effect(() => {
-        el.setAttribute("data-state", collapsible._h_collapsible.expanded ? "open" : "closed");
-      });
-      el.addEventListener("click", handler);
-      cleanup(() => {
-        el.removeEventListener("click", handler);
-      });
-    });
-    Alpine.directive("h-collapsible-content", (el, { original: original2 }, { effect, Alpine: Alpine2 }) => {
-      const collapsible = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_collapsible"));
-      if (!collapsible) {
-        throw new Error(`${original2} must be inside an h-collapsible element`);
-      }
-      if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "collapsible-content");
-      el.classList.add("data-[state=closed]:!hidden");
-      effect(() => {
-        el.setAttribute("data-state", collapsible._h_collapsible.expanded ? "open" : "closed");
-      });
-    });
-  }
-
   // src/common/input-size.js
   function setSize(el, size3) {
     if (size3 === "sm") {
@@ -3369,7 +3423,9 @@
         "border-input",
         "flex",
         "items-center",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
+        "motion-reduce:transition-none",
         "duration-200",
         "outline-none",
         "pl-3",
@@ -3444,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",
@@ -3475,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"
@@ -3510,11 +3579,20 @@
   // src/components/dialog.js
   function dialog_default(Alpine) {
     Alpine.directive("h-dialog-overlay", (el, _, { cleanup }) => {
-      el.classList.add("hidden", "data-[open=true]:block", "fixed", "inset-0", "z-50", "bg-black/60");
+      el.classList.add("hidden", "fixed", "inset-0", "z-50", "bg-black/60", "transition-[opacity,scale]", "motion-reduce:transition-none", "duration-200", "ease-out", "opacity-0", "*:scale-95");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "dialog-overlay");
       const observer = new MutationObserver(() => {
         if (el.getAttribute("data-open") === "true") {
+          if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            el.classList.remove("hidden", "*:scale-95", "opacity-0");
+          } else {
+            el.classList.remove("hidden");
+            Alpine.nextTick(() => {
+              el.offsetHeight;
+              el.classList.remove("*:scale-95", "opacity-0");
+            });
+          }
           const inputs = el.getElementsByTagName("INPUT");
           if (inputs.length) {
             for (let i = 0; i < inputs.length; i++) {
@@ -3542,11 +3620,24 @@
           if (buttons.length) {
             buttons[0].focus();
           }
+        } else {
+          if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            el.classList.add("hidden", "*:scale-95", "opacity-0");
+          } else {
+            el.classList.add("*:scale-95", "opacity-0");
+          }
         }
       });
+      function onTransitionEnd(event) {
+        if (event.target === el && event.target.classList.contains("opacity-0")) {
+          el.classList.add("hidden");
+        }
+      }
+      el.addEventListener("transitionend", onTransitionEnd);
       observer.observe(el, { attributes: true, attributeFilter: ["data-open"] });
       cleanup(() => {
         observer.disconnect();
+        el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
     Alpine.directive("h-dialog", (el) => {
@@ -3569,7 +3660,11 @@
         "p-4",
         "shadow-xl",
         "sm:max-w-lg",
-        "outline-none"
+        "outline-none",
+        "transition-[opacity,scale]",
+        "motion-reduce:transition-none",
+        "duration-200",
+        "ease-out"
       );
       el.setAttribute("role", "dialog");
       el.setAttribute("data-slot", "dialog");
@@ -3598,6 +3693,7 @@
         "rounded-xs",
         "opacity-70",
         "transition-opacity",
+        "motion-reduce:transition-none",
         "hover:opacity-100",
         "focus:ring-2",
         "focus:ring-offset-2",
@@ -3628,6 +3724,161 @@
     });
   }
 
+  // src/components/expansion-panel.js
+  function expansion_panel_default(Alpine) {
+    Alpine.directive("h-exp-panel", (el) => {
+      el.classList.add("vbox", "h-full", "group/exp", "data-[floating=true]:gap-2", "data-[floating=true]:overflow-visible");
+      el.setAttribute("data-slot", "exp-panel");
+    });
+    Alpine.directive("h-exp-panel-item", (el, { expression }, { evaluate: evaluate2, evaluateLater, effect, Alpine: Alpine2 }) => {
+      el.classList.add(
+        "flex",
+        "flex-col",
+        "overflow-hidden",
+        "transition-all",
+        "motion-reduce:transition-none",
+        "duration-300",
+        "ease-out",
+        "h-full",
+        "border-b",
+        "last:border-b-0",
+        "min-h-12",
+        "[[data-size=md]_&]:min-h-10",
+        "[[data-size=sm]_&]:min-h-8",
+        "[[data-floating=true]_&]:border-b-0",
+        "[[data-floating=true]_&]:overflow-visible"
+      );
+      el.setAttribute("data-slot", "exp-panel-item");
+      let itemId;
+      if (el.hasAttribute("id")) {
+        itemId = el.getAttribute("id");
+      } else {
+        itemId = `epi${uuid_default()}`;
+      }
+      function setExpanded(expanded) {
+        if (expanded) {
+          el.classList.add("flex-[1_1_0]");
+          el.classList.remove("flex-[0_1_0]");
+        } else {
+          el.classList.add("flex-[0_1_0]");
+          el.classList.remove("flex-[1_1_0]");
+        }
+      }
+      el._h_expPanelItem = Alpine2.reactive({
+        controls: itemId,
+        expanded: evaluate2(expression || "false")
+      });
+      if (expression !== "" && expression !== void 0 && expression !== null && expression !== "true" && expression !== "false") {
+        const getIsExpanded = evaluateLater(expression);
+        effect(() => {
+          getIsExpanded((expanded) => {
+            setExpanded(expanded);
+          });
+        });
+        effect(() => {
+          if (evaluate2(expression) !== el._h_expPanelItem.expanded) {
+            evaluate2(`${expression} = ${el._h_expPanelItem.expanded}`);
+          }
+        });
+      } else {
+        effect(() => {
+          setExpanded(el._h_expPanelItem.expanded);
+        });
+      }
+    });
+    Alpine.directive("h-exp-panel-trigger", (el, { original: original2, expression }, { effect, evaluateLater, Alpine: Alpine2, cleanup }) => {
+      if (el.tagName.length !== 2 && !el.tagName.startsWith("H")) {
+        throw new Error(`${original2} must be a header element`);
+      }
+      const expPanelItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_expPanelItem"));
+      if (!expPanelItem) {
+        throw new Error(`${original2} must have an exp-panel-item parent element`);
+      }
+      el.classList.add(
+        "bg-object-header",
+        "border-b",
+        "[[data-slot=exp-panel-item]:last-child>&]:not-has-[button[aria-expanded=true]]:group-has-[button[aria-expanded=true]]/exp:border-b-0",
+        "flex",
+        "h-12",
+        "min-h-12",
+        "px-4",
+        "text-object-header-foreground",
+        "[[data-floating=true]_&]:border",
+        "[[data-floating=true]_&]:!border-b",
+        "[[data-floating=true]_&]:rounded-lg",
+        "[[data-floating=true]_&]:shadow-xs",
+        "[[data-size=md]_&]:h-10",
+        "[[data-size=md]_&]:min-h-10",
+        "[[data-size=md]_&]:px-3",
+        "[[data-size=sm]_&]:h-8",
+        "[[data-size=sm]_&]:min-h-8",
+        "[[data-size=sm]_&]:px-2.5",
+        "[[data-variant=transparent]_&]:bg-transparent",
+        "[[data-variant=transparent]_&]:text-foreground"
+      );
+      el.setAttribute("tabIndex", "-1");
+      const getLabel = evaluateLater(expression);
+      const chevronDown = createSvg({
+        icon: ChevronDown,
+        classes: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform motion-reduce:transition-none duration-200",
+        attrs: {
+          "aria-hidden": true,
+          role: "presentation"
+        }
+      });
+      const button = document.createElement("button");
+      button.setAttribute("type", "button");
+      button.setAttribute("tabIndex", "0");
+      button.setAttribute("data-slot", "exp-panel-trigger");
+      button.classList.add(
+        "cursor-pointer",
+        "focus-visible:border-ring",
+        "focus-visible:ring-ring/50",
+        "flex",
+        "flex-1",
+        "items-center",
+        "justify-between",
+        "gap-4",
+        "text-left",
+        "text-sm",
+        "font-medium",
+        "transition-all",
+        "motion-reduce:transition-none",
+        "outline-none",
+        "hover:underline",
+        "focus-visible:ring-[calc(var(--spacing)*0.75)]",
+        "disabled:pointer-events-none",
+        "disabled:opacity-50",
+        "[&[aria-expanded=true]>svg]:rotate-180"
+      );
+      el.appendChild(button);
+      effect(() => {
+        getLabel((label) => {
+          button.innerText = label;
+          button.appendChild(chevronDown);
+        });
+      });
+      button.setAttribute("id", expPanelItem._h_expPanelItem.id);
+      button.setAttribute("aria-controls", expPanelItem._h_expPanelItem.controls);
+      const setAttributes = () => {
+        button.setAttribute("aria-expanded", expPanelItem._h_expPanelItem.expanded);
+      };
+      const handler = () => {
+        expPanelItem._h_expPanelItem.expanded = !expPanelItem._h_expPanelItem.expanded;
+        setAttributes();
+      };
+      setAttributes();
+      el.addEventListener("click", handler);
+      cleanup(() => {
+        el.removeEventListener("click", handler);
+      });
+    });
+    Alpine.directive("h-exp-panel-content", (el) => {
+      el.classList.add("flex-1", "overflow-scroll");
+      el.setAttribute("data-slot", "exp-panel-content");
+    });
+  }
+
   // src/components/fieldset.js
   function fieldset_default(Alpine) {
     Alpine.directive("h-fieldset", (el) => {
@@ -3800,7 +4051,9 @@
         "[&::-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",
         "file:h-7",
@@ -3857,7 +4110,9 @@
         "rounded-control",
         "border",
         "shadow-input",
-        "transition-[color,box-shadow]",
+        "transition-colors",
+        "transition-shadow",
+        "motion-reduce:transition-none",
         "outline-none",
         "min-w-0",
         "has-[>textarea]:h-auto",
@@ -3958,7 +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",
@@ -4003,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"
@@ -4021,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 }));
       };
@@ -4044,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"
@@ -4062,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 }));
       };
@@ -4277,23 +4549,47 @@
       el._menu_trigger = {
         isDropdown: modifiers.includes("dropdown"),
         setOpen(open) {
-          el.setAttribute("data-state", open ? "open" : "closed");
+          el.setAttribute("aria-expanded", open);
         }
       };
-      el.setAttribute("data-state", "closed");
+      if (el._menu_trigger.isDropdown) {
+        el.setAttribute("aria-haspopup", "true");
+        el.setAttribute("aria-expanded", "false");
+        if (!el.hasAttribute("id")) {
+          el.setAttribute("id", `mt${uuid_default()}`);
+        }
+      }
     });
     Alpine.directive("h-menu", (el, { original: original2, modifiers }, { cleanup, Alpine: Alpine2 }) => {
       if (el.tagName !== "UL") {
         throw new Error(`${original2} must be an ul element`);
       }
-      el.classList.add("hidden", "fixed", "bg-popover", "text-popover-foreground", "font-normal", "z-50", "min-w-[8rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "p-1", "shadow-md", "border", "outline-none");
+      el.classList.add(
+        "hidden",
+        "fixed",
+        "bg-popover",
+        "text-popover-foreground",
+        "font-normal",
+        "z-50",
+        "min-w-[8rem]",
+        "overflow-x-hidden",
+        "overflow-y-auto",
+        "rounded-md",
+        "p-1",
+        "shadow-md",
+        "border",
+        "outline-none",
+        "transition-[opacity,scale]",
+        "motion-reduce:transition-none",
+        "duration-100",
+        "ease-out",
+        "opacity-0",
+        "scale-95"
+      );
       el.setAttribute("role", "menu");
       el.setAttribute("aria-orientation", "vertical");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "menu");
-      if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
-        throw new Error(`${original2} must have an "aria-label" or "aria-labelledby" attribute`);
-      }
       const isSubmenu = modifiers.includes("sub");
       const menuTrigger = (() => {
         if (isSubmenu) return;
@@ -4302,15 +4598,31 @@
           sibling = sibling.previousElementSibling;
         }
         if (!sibling.hasOwnProperty("_menu_trigger")) {
-          throw new Error(`${original2} must be placed after the menu trigger`);
+          throw new Error(`${original2} menu must be placed after a menu trigger element`);
         }
         return sibling;
       })();
-      if (!isSubmenu && !menuTrigger) {
-        throw new Error(`${original2} menu must be placed after a menu trigger element`);
+      function setAriaAttrubutes(parent) {
+        if (!el.hasAttribute("aria-labelledby") && !el.hasAttribute("aria-label")) {
+          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`);
+          }
+        }
       }
       let menuSubItem;
-      if (isSubmenu) menuSubItem = Alpine2.findClosest(el.parentElement, (parent) => parent.getAttribute("data-slot") === "menu-sub");
+      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`);
+        }
+        setAriaAttrubutes(menuSubItem);
+      } else if (menuTrigger) {
+        setAriaAttrubutes(menuTrigger._menu_trigger.isDropdown ? menuTrigger : void 0);
+      } else {
+        setAriaAttrubutes();
+      }
       function listenForTrigger(listen) {
         if (listen) {
           if (menuTrigger._menu_trigger.isDropdown) menuTrigger.addEventListener("click", openDropdown);
@@ -4322,11 +4634,15 @@
       }
       function close(closeParent = false, focusTrigger = false) {
         el.pauseKeyEvents = false;
-        el.classList.add("hidden");
-        Object.assign(el.style, {
-          left: "0px",
-          top: "0px"
-        });
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          el.classList.add("hidden", "scale-95", "opacity-0");
+          Object.assign(el.style, {
+            left: "0px",
+            top: "0px"
+          });
+        } else {
+          el.classList.add("scale-95", "opacity-0");
+        }
         top.removeEventListener("contextmenu", onClick);
         top.removeEventListener("click", onClick);
         el.removeEventListener("keydown", onKeyDown);
@@ -4362,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) {
@@ -4486,6 +4804,7 @@
               left: `${x}px`,
               top: `${y}px`
             });
+            el.classList.remove("scale-95", "opacity-0");
           });
         }
       }
@@ -4519,11 +4838,22 @@
       } else {
         listenForTrigger(true);
       }
+      function onTransitionEnd(event) {
+        if (event.target === el && event.target.classList.contains("opacity-0")) {
+          el.classList.add("hidden");
+          Object.assign(el.style, {
+            left: "0px",
+            top: "0px"
+          });
+        }
+      }
+      el.addEventListener("transitionend", onTransitionEnd);
       cleanup(() => {
         if (menuTrigger) listenForTrigger(false);
         top.removeEventListener("click", onClick);
         top.removeEventListener("contextmenu", onClick);
         el.removeEventListener("keydown", onKeyDown);
+        el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
     Alpine.directive("h-menu-item", (el, { original: original2 }, { cleanup, Alpine: Alpine2 }) => {
@@ -4615,6 +4945,9 @@
       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 (!el.hasAttribute("id")) {
+        el.setAttribute("id", `ms${uuid_default()}`);
+      }
       el._menu_sub = {
         open: void 0,
         close: void 0,
@@ -4730,6 +5063,7 @@
         "aria-[disabled=true]:cursor-not-allowed",
         "aria-[disabled=true]:opacity-50",
         "transition-all",
+        "motion-reduce:transition-none",
         "overflow-hidden",
         "aria-[checked=true]:[&>svg]:visible"
       );
@@ -4799,6 +5133,7 @@
         "aria-[disabled=true]:cursor-not-allowed",
         "aria-[disabled=true]:opacity-50",
         "transition-all",
+        "motion-reduce:transition-none",
         "overflow-hidden",
         "before:invisible",
         "before:bg-foreground",
@@ -5004,7 +5339,7 @@
       const listener = {
         added(item) {
           const clone = notificationTemplates[item.template].content.firstElementChild.cloneNode(true);
-          clone.classList.add("transform", "transition-all", "duration-300", "ease-out", "opacity-0");
+          clone.classList.add("transform", "transition-all", "motion-reduce:transition-none", "duration-300", "ease-out", "opacity-0");
           clone.setAttribute("id", item.id);
           Alpine2.addScopeToNode(clone, item.data);
           if (!isExtraLarge && !isLarge) {
@@ -5059,15 +5394,20 @@
         removed(id) {
           const element = el.querySelector(`#${id}`);
           if (element) {
-            element.addEventListener(
-              "transitionend",
-              () => {
-                Alpine2.destroyTree(element);
-                element.remove();
-              },
-              { once: true }
-            );
-            element.classList.add(element._h_animation_class, "opacity-0");
+            if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+              Alpine2.destroyTree(element);
+              element.remove();
+            } else {
+              element.addEventListener(
+                "transitionend",
+                () => {
+                  Alpine2.destroyTree(element);
+                  element.remove();
+                },
+                { once: true }
+              );
+              element.classList.add(element._h_animation_class, "opacity-0");
+            }
           }
         }
       };
@@ -5177,6 +5517,7 @@
         "text-sm",
         "font-medium",
         "transition-all",
+        "motion-reduce:transition-none",
         "disabled:pointer-events-none",
         "disabled:opacity-50",
         "[&_svg]:pointer-events-none",
@@ -5251,7 +5592,7 @@
       }
       el.setAttribute("type", "button");
       if (modifiers.includes("chevron")) {
-        el.classList.add("[&_svg]:transition-transform", "[&[data-state=open]>svg:not(:first-child):last-child]:rotate-180");
+        el.classList.add("[&_svg]:transition-transform", "motion-reduce:[&_svg]:transition-none", "[&[aria-expanded=true]>svg:not(:first-child):last-child]:rotate-180");
       }
       if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "popover-trigger");
       if (el.hasAttribute("id")) {
@@ -5263,7 +5604,6 @@
       el.setAttribute("aria-controls", el._popover.controls);
       el.setAttribute("aria-haspopup", "dialog");
       const setAttributes = () => {
-        el.setAttribute("data-state", el._popover.expanded ? "open" : "closed");
         el.setAttribute("aria-expanded", el._popover.expanded);
       };
       const close = () => {
@@ -5305,13 +5645,32 @@
       if (!popover) {
         throw new Error(`${original2} must be placed after a popover element`);
       }
-      el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "top-0", "left-0", "z-50", "min-w-[1rem]", "rounded-md", "border", "shadow-md", "outline-hidden", "overflow-auto");
+      el.classList.add(
+        "absolute",
+        "bg-popover",
+        "text-popover-foreground",
+        "hidden",
+        "top-0",
+        "left-0",
+        "z-50",
+        "min-w-[1rem]",
+        "rounded-md",
+        "border",
+        "shadow-md",
+        "outline-hidden",
+        "overflow-auto",
+        "transition-[opacity,scale]",
+        "motion-reduce:transition-none",
+        "duration-100",
+        "ease-out",
+        "opacity-0",
+        "scale-95"
+      );
       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("data-state", popover._popover.expanded ? "open" : "closed");
       let noScroll = modifiers.includes("no-scroll");
       if (noScroll) {
         el.classList.remove("overflow-auto");
@@ -5345,22 +5704,39 @@
             left: `${x}px`,
             top: `${y}px`
           });
+          el.classList.remove("scale-95", "opacity-0");
         });
       }
       effect(() => {
-        el.setAttribute("data-state", popover._popover.expanded ? "open" : "closed");
         if (popover._popover.expanded) {
+          el.classList.remove("hidden");
           autoUpdateCleanup = autoUpdate(popover, el, updatePosition);
         } else {
+          if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            el.classList.add("hidden", "scale-95", "opacity-0");
+            Object.assign(el.style, {
+              left: "0px",
+              top: "0px"
+            });
+          } else {
+            el.classList.add("scale-95", "opacity-0");
+          }
           if (autoUpdateCleanup) autoUpdateCleanup();
+        }
+      });
+      function onTransitionEnd(event) {
+        if (event.target === el && event.target.classList.contains("opacity-0")) {
+          el.classList.add("hidden");
           Object.assign(el.style, {
             left: "0px",
             top: "0px"
           });
         }
-      });
+      }
+      el.addEventListener("transitionend", onTransitionEnd);
       cleanup(() => {
         el.removeEventListener("click", stopPropagation);
+        el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
   }
@@ -5371,7 +5747,7 @@
       el.classList.add("bg-secondary", "relative", "h-2", "w-full", "overflow-hidden", "rounded-full");
       el.setAttribute("data-slot", "progress");
       const indicator = document.createElement("div");
-      indicator.classList.add("bg-primary", "h-full", "w-full", "flex-1", "transition-all", "rounded-full");
+      indicator.classList.add("bg-primary", "h-full", "w-full", "flex-1", "transition-all", "motion-reduce:transition-none", "rounded-full");
       indicator.setAttribute("data-slot", "progress-indicator");
       Object.assign(indicator.style, {
         transform: `translateX(-${100 - 0}%)`
@@ -7342,9 +7718,18 @@
         set: void 0,
         get: void 0
       };
-      el.classList.add("cursor-pointer", "outline-none", "transition-[color,box-shadow]", "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(
@@ -7358,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",
@@ -7425,7 +7813,7 @@
       fakeTrigger.appendChild(displayValue);
       fakeTrigger.setAttribute("data-slot", "select-value");
       fakeTrigger.setAttribute("tabindex", "0");
-      fakeTrigger.classList.add("flex", "items-center", "justify-between", "gap-2", "outline-none", "pl-3", "pr-2", "size-full", "[&[data-state=open]>svg]:rotate-180");
+      fakeTrigger.classList.add("flex", "items-center", "justify-between", "gap-2", "outline-none", "pl-3", "pr-2", "size-full", "[&[aria-expanded=true]>svg]:rotate-180");
       select._h_select.trigger = fakeTrigger;
       let labelObserver;
       if (label) {
@@ -7472,7 +7860,6 @@
       fakeTrigger.setAttribute("aria-autocomplete", "none");
       fakeTrigger.setAttribute("role", "combobox");
       effect(() => {
-        fakeTrigger.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
         fakeTrigger.setAttribute("aria-expanded", select._h_select.expanded);
       });
       const close = (focusSelect = false) => {
@@ -7617,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 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"
@@ -7648,17 +8035,37 @@
         }
       });
     });
-    Alpine.directive("h-select-content", (el, { original: original2 }, { effect, Alpine: Alpine2 }) => {
+    Alpine.directive("h-select-content", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
       const select = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_select"));
       if (!select) {
         throw new Error(`${original2} must be inside a select element`);
       }
-      el.classList.add("absolute", "bg-popover", "text-popover-foreground", "data-[state=closed]:hidden", "p-1", "top-0", "left-0", "z-50", "min-w-[1rem]", "overflow-x-hidden", "overflow-y-auto", "rounded-md", "border", "shadow-md");
+      el.classList.add(
+        "absolute",
+        "bg-popover",
+        "text-popover-foreground",
+        "hidden",
+        "p-1",
+        "top-0",
+        "left-0",
+        "z-50",
+        "min-w-[1rem]",
+        "overflow-x-hidden",
+        "overflow-y-auto",
+        "rounded-md",
+        "border",
+        "shadow-md",
+        "transition-[opacity,scale]",
+        "motion-reduce:transition-none",
+        "duration-100",
+        "ease-out",
+        "opacity-0",
+        "scale-95"
+      );
       el.setAttribute("data-slot", "select-content");
       el.setAttribute("role", "listbox");
       el.setAttribute("id", select._h_select.controls);
       el.setAttribute("tabindex", "-1");
-      el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
       if (!select._h_select.trigger) {
         throw new Error(`${original2}: trigger not found`);
       }
@@ -7684,22 +8091,41 @@
             left: `${x}px`,
             top: `${y}px`
           });
+          el.classList.remove("scale-95", "opacity-0");
         });
       }
       effect(() => {
         el.setAttribute("aria-labelledby", select._h_select.fieldLabelId);
       });
       effect(() => {
-        el.setAttribute("data-state", select._h_select.expanded ? "open" : "closed");
         if (select._h_select.expanded) {
+          el.classList.remove("hidden");
           autoUpdateCleanup = autoUpdate(select._h_select.trigger, el, updatePosition);
         } else {
+          if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            el.classList.add("hidden", "scale-95", "opacity-0");
+            Object.assign(el.style, {
+              left: "0px",
+              top: "0px"
+            });
+          } else {
+            el.classList.add("scale-95", "opacity-0");
+          }
           if (autoUpdateCleanup) autoUpdateCleanup();
+        }
+      });
+      function onTransitionEnd(event) {
+        if (event.target === el && event.target.classList.contains("opacity-0")) {
+          el.classList.add("hidden");
           Object.assign(el.style, {
             left: "0px",
             top: "0px"
           });
         }
+      }
+      el.addEventListener("transitionend", onTransitionEnd);
+      cleanup(() => {
+        el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
     Alpine.directive("h-select-search", (el, { original: original2 }, { effect, cleanup, Alpine: Alpine2 }) => {
@@ -7873,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);
@@ -7927,16 +8354,43 @@
   // src/components/sheet.js
   function sheet_default(Alpine) {
     Alpine.directive("h-sheet-overlay", (el, { expression }, { effect, evaluate: evaluate2, evaluateLater, cleanup }) => {
-      el.classList.add("data-[open=false]:hidden", "fixed", "inset-0", "z-50", "bg-black/50");
+      el._h_sheet_overlay = {
+        showSheet: void 0,
+        hideSheet: void 0,
+        state: Alpine.reactive({
+          open: evaluate2(expression || "false")
+        })
+      };
+      el.classList.add("hidden", "fixed", "inset-0", "z-50", "bg-black/50", "transition-opacity", "motion-reduce:transition-none", "duration-200", "ease-out", "opacity-0");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "sheet-overlay");
-      el.setAttribute("data-open", evaluate2(expression));
       const getIsOpen = evaluateLater(expression);
       effect(() => {
         getIsOpen((isOpen) => {
-          el.setAttribute("data-open", isOpen);
+          el._h_sheet_overlay.state.open = isOpen;
         });
       });
+      effect(() => {
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          if (el._h_sheet_overlay.state.open) {
+            el.classList.remove("hidden", "opacity-0");
+          } else {
+            el.classList.add("hidden", "opacity-0");
+          }
+        } else if (el._h_sheet_overlay.state.open) {
+          el.classList.remove("hidden");
+          el.offsetHeight;
+          el.classList.remove("opacity-0");
+        } else {
+          el.classList.add("opacity-0");
+        }
+      });
+      function onTransitionEnd(event) {
+        if (event.target === el && event.target.classList.contains("opacity-0")) {
+          el.classList.add("hidden");
+        }
+      }
+      el.addEventListener("transitionend", onTransitionEnd);
       const onClick = (event) => {
         if (event.target.getAttribute("data-slot") === "sheet-overlay") {
           evaluate2(`${expression} = false`);
@@ -7945,12 +8399,29 @@
       el.addEventListener("click", onClick);
       cleanup(() => {
         el.removeEventListener("click", onClick);
+        el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
-    Alpine.directive("h-sheet", (el, _, { cleanup }) => {
-      el.classList.add("bg-background", "fixed", "shadow-lg");
+    Alpine.directive("h-sheet", (el, { original: original2 }, { effect, cleanup }) => {
+      const overlay = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sheet_overlay"));
+      if (!overlay) {
+        throw new Error(`${original2} 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");
       let lastSide;
+      const getTranslateClass = (side) => {
+        switch (side) {
+          case "top":
+            return "-translate-y-full";
+          case "right":
+            return "translate-x-full";
+          case "left":
+            return "-translate-x-full";
+          default:
+            return "translate-y-full";
+        }
+      };
       const getSideClasses = (side) => {
         switch (side) {
           case "top":
@@ -7972,9 +8443,32 @@
         setSide(el.getAttribute("data-align"));
       });
       setSide(el.getAttribute("data-align"));
+      el.classList.add(getTranslateClass(lastSide));
+      function onTransitionEnd(event) {
+        if (event.target === el && event.target.classList.contains(getTranslateClass(lastSide))) {
+          el.classList.add("hidden");
+        }
+      }
+      el.addEventListener("transitionend", onTransitionEnd);
+      effect(() => {
+        if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+          if (overlay._h_sheet_overlay.state.open) {
+            el.classList.remove("hidden", getTranslateClass(lastSide));
+          } else {
+            el.classList.add("hidden", getTranslateClass(lastSide));
+          }
+        } else if (overlay._h_sheet_overlay.state.open) {
+          el.classList.remove("hidden");
+          el.offsetHeight;
+          el.classList.remove(getTranslateClass(lastSide));
+        } else {
+          el.classList.add(getTranslateClass(lastSide));
+        }
+      });
       observer.observe(el, { attributes: true, attributeFilter: ["data-align"] });
       cleanup(() => {
         observer.disconnect();
+        el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
   }
@@ -8050,6 +8544,7 @@
         "font-medium",
         "outline-hidden",
         "transition-[margin,opacity]",
+        "motion-reduce:transition-none",
         "duration-200",
         "ease-linear",
         "focus-visible:ring-2",
@@ -8059,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 {
@@ -8076,7 +8571,7 @@
         el.appendChild(
           createSvg({
             icon: ChevronRight,
-            classes: "ml-auto pointer-events-none size-4 shrink-0 transition-transform duration-200 [[aria-expanded=true]>&]:rotate-90",
+            classes: "ml-auto pointer-events-none size-4 shrink-0 transition-transform motion-reduce:transition-none duration-200 [[aria-expanded=true]>&]:rotate-90",
             attrs: {
               "aria-hidden": true,
               role: "presentation"
@@ -8109,6 +8604,7 @@
         "p-0",
         "outline-hidden",
         "transition-transform",
+        "motion-reduce:transition-none",
         "focus-visible:ring-2",
         "[&>svg]:size-4",
         "[&>svg]:shrink-0",
@@ -8241,10 +8737,11 @@
           "text-sm",
           "duration-200",
           "transition-[width,height,padding]",
+          "motion-reduce:transition-none",
           "group-has-data-[sidebar=menu-action]/menu-item:pr-8",
           "data-[active=true]:font-medium",
-          "data-[state=open]:hover:bg-sidebar-secondary",
-          "data-[state=open]:hover:text-sidebar-secondary-foreground",
+          "aria-[expanded=true]:hover:bg-sidebar-secondary",
+          "aria-[expanded=true]:hover:text-sidebar-secondary-foreground",
           "group-data-[collapsed=true]/sidebar:!size-8",
           "group-data-[collapsed=true]/sidebar:!p-2",
           "group-data-[collapsed=true]/sidebar:[&>*:not(svg:first-child):not([data-slot=menu])]:!hidden"
@@ -8267,7 +8764,7 @@
         el.appendChild(
           createSvg({
             icon: ChevronRight,
-            classes: "ml-auto pointer-events-none size-4 shrink-0 transition-transform duration-200 [[aria-expanded=true]>&]:rotate-90",
+            classes: "ml-auto pointer-events-none size-4 shrink-0 transition-transform motion-reduce:transition-none duration-200 [[aria-expanded=true]>&]:rotate-90",
             attrs: {
               "aria-hidden": true,
               role: "presentation"
@@ -8305,6 +8802,7 @@
         "p-0",
         "outline-hidden",
         "transition-transform",
+        "motion-reduce:transition-none",
         "focus-visible:ring-2",
         "[&>svg]:size-4",
         "[&>svg]:shrink-0",
@@ -8314,7 +8812,7 @@
         "group-data-[collapsed=true]/sidebar:hidden"
       );
       if (modifiers.includes("autohide")) {
-        el.classList.add("group-focus-within/menu-item:opacity-100", "group-hover/menu-item:opacity-100", "data-[state=open]:opacity-100", "md:opacity-0");
+        el.classList.add("group-focus-within/menu-item:opacity-100", "group-hover/menu-item:opacity-100", "aria-[expanded=true]:opacity-100", "md:opacity-0");
       }
       if (el.tagName !== "BUTTON") {
         el.setAttribute("role", "button");
@@ -8953,6 +9451,7 @@
         "before:h-full",
         "before:aspect-square",
         "before:transition-transform",
+        "before:motion-reduce:transition-none",
         "bg-muted",
         "border",
         "data-[size=sm]:h-5",
@@ -8971,7 +9470,8 @@
         "relative",
         "rounded-full",
         "shrink-0",
-        "transition-color"
+        "transition-colors",
+        "motion-reduce:transition-none"
       );
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "switch");
@@ -9074,11 +9574,14 @@
         "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",
         "[&_svg]:text-foreground",
         "[&_svg]:transition-transform",
+        "motion-reduce:[&_svg]:transition-none",
         "[&_svg]:duration-200",
         "[&_svg:not([class*='size-'])]:size-4",
         "shrink-0",
@@ -9198,7 +9701,9 @@
         "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",
         "group-data-[floating=true]/tab-bar:border-transparent",
@@ -9379,7 +9884,9 @@
         "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)]",
         "disabled:cursor-not-allowed",
@@ -9413,9 +9920,11 @@
         "text-sm",
         "rounded-lg",
         "transition-colors",
+        "motion-reduce:transition-none",
         "[a]:hover:bg-secondary-hover",
         "[a]:hover:text-secondary-foreground",
         "[a]:transition-colors",
+        "[a]:motion-reduce:transition-none",
         "duration-100",
         "flex-wrap",
         "outline-none",
@@ -9558,8 +10067,6 @@
       el.classList.add(
         "cursor-pointer",
         "border-input",
-        "hover:bg-secondary-hover",
-        "active:bg-secondary-active",
         "flex",
         "items-center",
         "justify-between",
@@ -9569,7 +10076,9 @@
         "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",
         "has-[input:disabled]:pointer-events-none",
@@ -9585,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",
@@ -9611,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"
@@ -9754,7 +10277,6 @@
       el.addEventListener("beforeinput", preventInput);
       el.addEventListener("paste", preventInput);
       effect(() => {
-        el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
         el.setAttribute("aria-expanded", timepicker._h_timepicker.expanded);
       });
       cleanup(() => {
@@ -9772,11 +10294,17 @@
         "absolute",
         "bg-popover",
         "text-popover-foreground",
-        "data-[state=open]:flex",
-        "data-[state=open]:flex-col",
-        "data-[state=closed]:hidden",
+        "flex",
+        "flex-col",
+        "hidden",
         "z-50",
-        "shadow-md"
+        "shadow-md",
+        "transition-[opacity,scale]",
+        "motion-reduce:transition-none",
+        "duration-100",
+        "ease-out",
+        "opacity-0",
+        "scale-95"
       );
       el.setAttribute("id", timepicker._h_timepicker.controls);
       el.setAttribute("tabindex", "-1");
@@ -9784,7 +10312,6 @@
       el.setAttribute("aria-modal", "true");
       el.setAttribute("data-slot", "time-picker-popup");
       el.setAttribute("aria-labelledby", timepicker._h_timepicker.id);
-      el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
       const optionClasses = [
         "px-3.5",
         "py-2",
@@ -10194,6 +10721,7 @@
             left: `${x}px`,
             top: `${y}px`
           });
+          el.classList.remove("scale-95", "opacity-0");
           if (focusFirstItem) {
             focusFirstItem = false;
             Alpine2.nextTick(() => {
@@ -10207,25 +10735,41 @@
         });
       }
       effect(() => {
-        el.setAttribute("data-state", timepicker._h_timepicker.expanded ? "open" : "closed");
         if (timepicker._h_timepicker.expanded) {
           render();
+          el.classList.remove("hidden");
           autoUpdateCleanup = autoUpdate(timepicker, el, updatePosition);
           if (selectedHour) scrollIntoCenter(selectedHour.parentElement, selectedHour);
           if (selectedMinute) scrollIntoCenter(selectedMinute.parentElement, selectedMinute);
           if (selectedSecond && timepicker._h_timepicker.seconds) scrollIntoCenter(selectedSecond.parentElement, selectedSecond);
         } else {
+          if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            el.classList.add("hidden", "scale-95", "opacity-0");
+            Object.assign(el.style, {
+              left: "0px",
+              top: "0px"
+            });
+          } else {
+            el.classList.add("scale-95", "opacity-0");
+          }
           if (autoUpdateCleanup) autoUpdateCleanup();
           focusFirstItem = true;
+        }
+      });
+      function onTransitionEnd(event) {
+        if (event.target === el && event.target.classList.contains("opacity-0")) {
+          el.classList.add("hidden");
           Object.assign(el.style, {
             left: "0px",
             top: "0px"
           });
         }
-      });
+      }
+      el.addEventListener("transitionend", onTransitionEnd);
       cleanup(() => {
         el.removeEventListener("keydown", onKeyDown);
         el.removeEventListener("click", onClick);
+        el.removeEventListener("transitionend", onTransitionEnd);
         okButton.removeEventListener("click", timepicker._h_timepicker.close);
         nowButton.removeEventListener("click", getCurrentTime);
         timeContainer.removeEventListener("click", setTime);
@@ -10320,7 +10864,7 @@
         el.removeEventListener("pointerleave", handler);
       });
     });
-    Alpine.directive("h-tooltip", (el, { original: original2 }, { effect }) => {
+    Alpine.directive("h-tooltip", (el, { original: original2 }, { effect, cleanup }) => {
       const tooltip = (() => {
         let sibling = el.previousElementSibling;
         while (sibling && !sibling.hasOwnProperty("_tooltip")) {
@@ -10331,7 +10875,24 @@
       if (!tooltip) {
         throw new Error(`${original2} must be placed after a tooltip trigger element`);
       }
-      el.classList.add("absolute", "bg-foreground", "text-background", "z-50", "w-fit", "rounded-md", "px-3", "py-1.5", "text-xs", "text-balance");
+      el.classList.add(
+        "absolute",
+        "bg-foreground",
+        "text-background",
+        "z-50",
+        "w-fit",
+        "rounded-md",
+        "px-3",
+        "py-1.5",
+        "text-xs",
+        "text-balance",
+        "transition-[opacity,scale]",
+        "motion-reduce:transition-none",
+        "duration-100",
+        "ease-out",
+        "opacity-0",
+        "scale-95"
+      );
       el.setAttribute("data-slot", "tooltip");
       el.setAttribute("id", tooltip._tooltip.controls);
       const arrowEl = document.createElement("span");
@@ -10346,6 +10907,7 @@
             left: `${x}px`,
             top: `${y}px`
           });
+          el.classList.remove("scale-95", "opacity-0");
           if (middlewareData.arrow) {
             Object.assign(arrowEl.style, {
               left: middlewareData.arrow.x != null ? `${middlewareData.arrow.x}px` : "",
@@ -10359,6 +10921,23 @@
           el.classList.remove("hidden");
           updatePosition();
         } else {
+          if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+            el.classList.add("hidden", "scale-95", "opacity-0");
+            Object.assign(el.style, {
+              left: "0px",
+              top: "0px"
+            });
+            Object.assign(arrowEl.style, {
+              left: "0px",
+              top: "0px"
+            });
+          } else {
+            el.classList.add("scale-95", "opacity-0");
+          }
+        }
+      });
+      function onTransitionEnd(event) {
+        if (event.target === el && event.target.classList.contains("opacity-0")) {
           el.classList.add("hidden");
           Object.assign(el.style, {
             left: "0px",
@@ -10369,6 +10948,10 @@
             top: "0px"
           });
         }
+      }
+      el.addEventListener("transitionend", onTransitionEnd);
+      cleanup(() => {
+        el.removeEventListener("transitionend", onTransitionEnd);
       });
     });
   }
@@ -10552,6 +11135,7 @@
         "outline-hidden",
         "ring-ring",
         "transition-[width,height,padding]",
+        "motion-reduce:transition-none",
         "hover:bg-secondary",
         "hover:text-secondary-foreground",
         "focus-visible:ring-2",
@@ -10583,7 +11167,7 @@
       if (treeItem._h_tree_item.hasSubtree) {
         const chevronDown = createSvg({
           icon: ChevronRight,
-          classes: "size-4 shrink-0 transition-transform duration-200 [[data-expanded=true]>&]:rotate-90",
+          classes: "size-4 shrink-0 transition-transform motion-reduce:transition-none duration-200 [[data-expanded=true]>&]:rotate-90",
           attrs: {
             "aria-hidden": true,
             role: "presentation"
@@ -10785,7 +11369,7 @@
   }
 
   // package.json
-  var version = "1.7.2";
+  var version = "1.9.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };
@@ -10798,9 +11382,9 @@
     window.Alpine.plugin(calendar_default);
     window.Alpine.plugin(card_default);
     window.Alpine.plugin(checkbox_default);
-    window.Alpine.plugin(collapsible_default);
     window.Alpine.plugin(datepicker_default);
     window.Alpine.plugin(dialog_default);
+    window.Alpine.plugin(expansion_panel_default);
     window.Alpine.plugin(fieldset_default);
     window.Alpine.plugin(icon_default);
     window.Alpine.plugin(info_page_default);