@codbex/harmonia 1.7.1 → 1.8.0

package/dist/harmonia.esm.js

@@ -2503,12 +2503,12 @@ function accordion_default(Alpine) {
     }) : { 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() {
@@ -2528,11 +2528,6 @@ function accordion_default(Alpine) {
       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")) {
@@ -2543,23 +2538,12 @@ function accordion_default(Alpine) {
     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"
@@ -2581,12 +2565,13 @@ function accordion_default(Alpine) {
       "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(() => {
@@ -2598,7 +2583,6 @@ function accordion_default(Alpine) {
     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 = () => {
@@ -2622,16 +2606,46 @@ function accordion_default(Alpine) {
       });
     }
   });
-  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);
       });
     }
   });
@@ -2825,6 +2839,7 @@ function badge_default(Alpine) {
       "focus-visible:ring-ring/50",
       "focus-visible:ring-[calc(var(--spacing)*0.75)]",
       "transition-[color,box-shadow]",
+      "motion-reduce:transition-none",
       "overflow-hidden"
     );
     el.setAttribute("data-slot", "badge");
@@ -3018,6 +3033,7 @@ var setButtonClasses = (el) => {
     "text-sm",
     "font-medium",
     "transition-all",
+    "motion-reduce:transition-none",
     "disabled:pointer-events-none",
     "disabled:opacity-50",
     "[&_svg]:pointer-events-none",
@@ -4628,11 +4644,25 @@ function calendar_default(Alpine) {
     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");
     }
@@ -4680,16 +4710,19 @@ function calendar_default(Alpine) {
     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) {
@@ -4736,6 +4769,7 @@ function calendar_default(Alpine) {
       "text-sm",
       "font-medium",
       "transition-all",
+      "motion-reduce:transition-none",
       "outline-none",
       "focus-visible:border-ring",
       "focus-visible:ring-ring/50",
@@ -4865,6 +4899,9 @@ function calendar_default(Alpine) {
           "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",
@@ -5068,25 +5105,59 @@ function calendar_default(Alpine) {
           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++) {
@@ -5094,6 +5165,7 @@ function calendar_default(Alpine) {
       }
       if (datepicker) {
         datepicker._h_datepicker.input.removeEventListener("change", onInputChange);
+        el.removeEventListener("transitionend", onTransitionEnd);
       }
     });
   });
@@ -5168,7 +5240,8 @@ function checkbox_default(Alpine) {
       "shadow-input",
       "shrink-0",
       "size-5",
-      "transition-color"
+      "transition-colors",
+      "motion-reduce:transition-none"
     );
     el.setAttribute("tabindex", "-1");
     el.setAttribute("data-slot", "checkbox");
@@ -5177,57 +5250,6 @@ function checkbox_default(Alpine) {
   });
 }
 
-// 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") {
@@ -5276,6 +5298,7 @@ function datepicker_default(Alpine) {
       "flex",
       "items-center",
       "transition-[color,box-shadow]",
+      "motion-reduce:transition-none",
       "duration-200",
       "outline-none",
       "pl-3",
@@ -5416,11 +5439,20 @@ function datepicker_default(Alpine) {
 // 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++) {
@@ -5448,11 +5480,24 @@ function dialog_default(Alpine) {
         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) => {
@@ -5475,7 +5520,11 @@ function dialog_default(Alpine) {
       "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");
@@ -5504,6 +5553,7 @@ function dialog_default(Alpine) {
       "rounded-xs",
       "opacity-70",
       "transition-opacity",
+      "motion-reduce:transition-none",
       "hover:opacity-100",
       "focus:ring-2",
       "focus:ring-offset-2",
@@ -5534,6 +5584,161 @@ function dialog_default(Alpine) {
   });
 }
 
+// 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) => {
@@ -5707,6 +5912,7 @@ function input_default(Alpine) {
       "[&::-webkit-color-swatch-wrapper]:p-0",
       "text-base",
       "transition-[color,box-shadow]",
+      "motion-reduce:transition-none",
       "outline-none",
       "file:inline-flex",
       "file:h-7",
@@ -5764,6 +5970,7 @@ function input_default(Alpine) {
       "border",
       "shadow-input",
       "transition-[color,box-shadow]",
+      "motion-reduce:transition-none",
       "outline-none",
       "min-w-0",
       "has-[>textarea]:h-auto",
@@ -5865,6 +6072,7 @@ function input_default(Alpine) {
       "border",
       "shadow-input",
       "transition-[color,box-shadow]",
+      "motion-reduce:transition-none",
       "outline-none",
       "min-w-0",
       "has-[input:focus-visible]:border-ring",
@@ -6183,23 +6391,47 @@ function menu_default(Alpine) {
     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;
@@ -6208,15 +6440,31 @@ function menu_default(Alpine) {
         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);
@@ -6228,11 +6476,15 @@ function menu_default(Alpine) {
     }
     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);
@@ -6392,6 +6644,7 @@ function menu_default(Alpine) {
             left: `${x}px`,
             top: `${y}px`
           });
+          el.classList.remove("scale-95", "opacity-0");
         });
       }
     }
@@ -6425,11 +6678,22 @@ function menu_default(Alpine) {
     } 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 }) => {
@@ -6521,6 +6785,9 @@ function menu_default(Alpine) {
     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,
@@ -6636,6 +6903,7 @@ function menu_default(Alpine) {
       "aria-[disabled=true]:cursor-not-allowed",
       "aria-[disabled=true]:opacity-50",
       "transition-all",
+      "motion-reduce:transition-none",
       "overflow-hidden",
       "aria-[checked=true]:[&>svg]:visible"
     );
@@ -6705,6 +6973,7 @@ function menu_default(Alpine) {
       "aria-[disabled=true]:cursor-not-allowed",
       "aria-[disabled=true]:opacity-50",
       "transition-all",
+      "motion-reduce:transition-none",
       "overflow-hidden",
       "before:invisible",
       "before:bg-foreground",
@@ -6910,7 +7179,7 @@ function notifications_default(Alpine) {
     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) {
@@ -6965,15 +7234,20 @@ function notifications_default(Alpine) {
       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");
+          }
         }
       }
     };
@@ -7083,6 +7357,7 @@ function pagination_default(Alpine) {
       "text-sm",
       "font-medium",
       "transition-all",
+      "motion-reduce:transition-none",
       "disabled:pointer-events-none",
       "disabled:opacity-50",
       "[&_svg]:pointer-events-none",
@@ -7157,7 +7432,7 @@ function popover_default(Alpine) {
     }
     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")) {
@@ -7169,7 +7444,6 @@ function popover_default(Alpine) {
     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 = () => {
@@ -7211,16 +7485,35 @@ function popover_default(Alpine) {
     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-scroll");
+      el.classList.remove("overflow-auto");
       el.classList.add("overflow-none");
     }
     const stopPropagation = (event) => {
@@ -7251,22 +7544,39 @@ function popover_default(Alpine) {
           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);
     });
   });
 }
@@ -7277,7 +7587,7 @@ function progress_default(Alpine) {
     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}%)`
@@ -7389,7 +7699,7 @@ function select_default(Alpine) {
       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-[color,box-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.setAttribute("data-slot", "cell-input-select");
@@ -7472,7 +7782,7 @@ function select_default(Alpine) {
     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) {
@@ -7519,7 +7829,6 @@ function select_default(Alpine) {
     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) => {
@@ -7664,7 +7973,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 duration-200",
+      classes: "opacity-70 text-foreground size-4 shrink-0 pointer-events-none transition-transform motion-reduce:transition-none duration-200",
       attrs: {
         "aria-hidden": true,
         role: "presentation"
@@ -7695,17 +8004,37 @@ function select_default(Alpine) {
       }
     });
   });
-  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`);
     }
@@ -7731,22 +8060,41 @@ function select_default(Alpine) {
           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 }) => {
@@ -7974,16 +8322,43 @@ function separator_default(Alpine) {
 // 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`);
@@ -7992,12 +8367,29 @@ function sheet_default(Alpine) {
     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":
@@ -8019,9 +8411,32 @@ function sheet_default(Alpine) {
       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);
     });
   });
 }
@@ -8097,6 +8512,7 @@ function sidebar_default(Alpine) {
       "font-medium",
       "outline-hidden",
       "transition-[margin,opacity]",
+      "motion-reduce:transition-none",
       "duration-200",
       "ease-linear",
       "focus-visible:ring-2",
@@ -8123,7 +8539,7 @@ function sidebar_default(Alpine) {
       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"
@@ -8156,6 +8572,7 @@ function sidebar_default(Alpine) {
       "p-0",
       "outline-hidden",
       "transition-transform",
+      "motion-reduce:transition-none",
       "focus-visible:ring-2",
       "[&>svg]:size-4",
       "[&>svg]:shrink-0",
@@ -8288,10 +8705,11 @@ function sidebar_default(Alpine) {
         "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"
@@ -8314,7 +8732,7 @@ function sidebar_default(Alpine) {
       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"
@@ -8352,6 +8770,7 @@ function sidebar_default(Alpine) {
       "p-0",
       "outline-hidden",
       "transition-transform",
+      "motion-reduce:transition-none",
       "focus-visible:ring-2",
       "[&>svg]:size-4",
       "[&>svg]:shrink-0",
@@ -8361,7 +8780,7 @@ function sidebar_default(Alpine) {
       "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");
@@ -9000,6 +9419,7 @@ function switch_default(Alpine) {
       "before:h-full",
       "before:aspect-square",
       "before:transition-transform",
+      "before:motion-reduce:transition-none",
       "bg-muted",
       "border",
       "data-[size=sm]:h-5",
@@ -9018,7 +9438,8 @@ function switch_default(Alpine) {
       "relative",
       "rounded-full",
       "shrink-0",
-      "transition-color"
+      "transition-colors",
+      "motion-reduce:transition-none"
     );
     el.setAttribute("tabindex", "-1");
     el.setAttribute("data-slot", "switch");
@@ -9122,10 +9543,12 @@ function table_default(Alpine) {
       "outline-none",
       "gap-2",
       "transition-[color,box-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",
@@ -9246,6 +9669,7 @@ function tabs_default(Alpine) {
       "font-medium",
       "whitespace-nowrap",
       "transition-[color,box-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",
@@ -9427,6 +9851,7 @@ function textarea_default(Alpine) {
       "text-base",
       "shadow-input",
       "transition-[color,box-shadow]",
+      "motion-reduce:transition-none",
       "outline-none",
       "focus-visible:ring-[calc(var(--spacing)*0.75)]",
       "disabled:cursor-not-allowed",
@@ -9460,9 +9885,11 @@ function tile_default(Alpine) {
       "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",
@@ -9617,6 +10044,7 @@ function timepicker_default(Alpine) {
       "text-sm",
       "whitespace-nowrap",
       "transition-[color,box-shadow]",
+      "motion-reduce:transition-none",
       "duration-200",
       "outline-none",
       "has-[input:disabled]:pointer-events-none",
@@ -9801,7 +10229,6 @@ function timepicker_default(Alpine) {
     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(() => {
@@ -9819,11 +10246,17 @@ function timepicker_default(Alpine) {
       "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");
@@ -9831,7 +10264,6 @@ function timepicker_default(Alpine) {
     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",
@@ -10241,6 +10673,7 @@ function timepicker_default(Alpine) {
           left: `${x}px`,
           top: `${y}px`
         });
+        el.classList.remove("scale-95", "opacity-0");
         if (focusFirstItem) {
           focusFirstItem = false;
           Alpine2.nextTick(() => {
@@ -10254,25 +10687,41 @@ function timepicker_default(Alpine) {
       });
     }
     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);
@@ -10367,7 +10816,7 @@ function tooltip_default(Alpine) {
       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")) {
@@ -10378,7 +10827,24 @@ function tooltip_default(Alpine) {
     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");
@@ -10393,6 +10859,7 @@ function tooltip_default(Alpine) {
           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` : "",
@@ -10406,6 +10873,23 @@ function tooltip_default(Alpine) {
         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",
@@ -10416,6 +10900,10 @@ function tooltip_default(Alpine) {
           top: "0px"
         });
       }
+    }
+    el.addEventListener("transitionend", onTransitionEnd);
+    cleanup(() => {
+      el.removeEventListener("transitionend", onTransitionEnd);
     });
   });
 }
@@ -10599,6 +11087,7 @@ function tree_default(Alpine) {
       "outline-hidden",
       "ring-ring",
       "transition-[width,height,padding]",
+      "motion-reduce:transition-none",
       "hover:bg-secondary",
       "hover:text-secondary-foreground",
       "focus-visible:ring-2",
@@ -10630,7 +11119,7 @@ function tree_default(Alpine) {
     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"
@@ -10647,7 +11136,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.7.1";
+var version = "1.8.0";
 
 // src/utils/theme.js
 var colorSchemeKey = "codbex.harmonia.colorMode";
@@ -10844,9 +11333,9 @@ var registerComponents = (registerPlugin) => {
   registerPlugin(calendar_default);
   registerPlugin(card_default);
   registerPlugin(checkbox_default);
-  registerPlugin(collapsible_default);
   registerPlugin(datepicker_default);
   registerPlugin(dialog_default);
+  registerPlugin(expansion_panel_default);
   registerPlugin(fieldset_default);
   registerPlugin(focus_default);
   registerPlugin(icon_default);
@@ -10892,9 +11381,9 @@ export {
   calendar_default as Calendar,
   card_default as Card,
   checkbox_default as Checkbox,
-  collapsible_default as Collapsible,
   datepicker_default as DatePicker,
   dialog_default as Dialog,
+  expansion_panel_default as ExpansionPanel,
   fieldset_default as Fieldset,
   focus_default as Focus,
   icon_default as Icon,