@codbex/harmonia 1.2.0 → 1.3.0

package/dist/harmonia.esm.js

@@ -6507,6 +6507,7 @@ function popover_default(Alpine) {
     const close = () => {
       el._popover.expanded = false;
       el.addEventListener("click", handler);
+      setAttributes();
     };
     const handler = () => {
       el._popover.expanded = !el._popover.expanded;
@@ -7366,13 +7367,35 @@ function sidebar_default(Alpine) {
     el.classList.add("vbox", "min-h-0", "flex-1", "gap-2", "overflow-auto", "group-data-[collapsed=true]/sidebar:overflow-hidden");
     el.setAttribute("data-slot", "sidebar-content");
   });
-  Alpine.directive("h-sidebar-group", (el) => {
+  Alpine.directive("h-sidebar-group", (el, { expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
     el.classList.add("relative", "vbox", "w-full", "min-w-0", "p-2");
     el.setAttribute("data-slot", "sidebar-group");
+    el._h_sidebar_group = {
+      collapsable: modifiers.includes("collapsed"),
+      controlId: void 0,
+      controls: void 0,
+      state: Alpine2.reactive({
+        collapsed: evaluate2(expression || "false")
+      })
+    };
+    if (expression) {
+      el._h_sidebar_group.state = Alpine2.reactive({
+        collapsed: evaluate2(expression || "false")
+      });
+      const getCollapsed = evaluateLater(expression);
+      effect(() => {
+        getCollapsed((collapsed) => {
+          el._h_sidebar_group.state.collapsed = collapsed;
+        });
+      });
+    }
   });
-  Alpine.directive("h-sidebar-group-label", (el, { modifiers }) => {
+  Alpine.directive("h-sidebar-group-label", (el, { original }, { cleanup }) => {
+    const group = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_group"));
+    if (!group) {
+      throw new Error(`${original} must be placed inside a sidebar group`);
+    }
     el.classList.add(
-      "text-sidebar-foreground/70",
       "ring-sidebar-ring",
       "flex",
       "h-8",
@@ -7380,7 +7403,6 @@ function sidebar_default(Alpine) {
       "items-center",
       "rounded-md",
       "px-2",
-      "text-xs",
       "font-medium",
       "outline-hidden",
       "transition-[margin,opacity]",
@@ -7391,8 +7413,39 @@ function sidebar_default(Alpine) {
       "[&>svg]:shrink-0",
       "group-data-[collapsed=true]/sidebar:!hidden"
     );
-    if (modifiers.includes("action")) el.classList.add("hover:bg-secondary-hover", "active:bg-secondary-active");
     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");
+      if (el.hasAttribute("id")) {
+        group._h_sidebar_group.controlId = el.getAttribute("id");
+      } else {
+        group._h_sidebar_group.controlId = `sgl${v4_default()}`;
+        el.setAttribute("id", group._h_sidebar_group.controlId);
+      }
+      group._h_sidebar_group.controls = `sgc${v4_default()}`;
+      el.setAttribute("aria-controls", group._h_sidebar_group.controls);
+      el.setAttribute("aria-expanded", !group._h_sidebar_group.state.collapsed);
+      const handler = () => {
+        group._h_sidebar_group.state.collapsed = !group._h_sidebar_group.state.collapsed;
+        el.setAttribute("aria-expanded", !group._h_sidebar_group.state.collapsed);
+      };
+      el.appendChild(
+        createSvg({
+          icon: ChevronRight,
+          classes: "ml-auto pointer-events-none size-4 shrink-0 transition-transform duration-200 [[aria-expanded=true]>&]:rotate-90",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
+      el.addEventListener("click", handler);
+      cleanup(() => {
+        el.removeEventListener("click", handler);
+      });
+    } else {
+      el.classList.add("text-sidebar-foreground/70", "text-xs");
+    }
   });
   Alpine.directive("h-sidebar-group-action", (el) => {
     el.classList.add(
@@ -7420,36 +7473,92 @@ function sidebar_default(Alpine) {
       "md:after:hidden",
       "group-data-[collapsed=true]/sidebar:hidden"
     );
+    if (el.tagName !== "BUTTON") {
+      el.setAttribute("role", "button");
+    } else {
+      el.setAttribute("type", "button");
+    }
     el.setAttribute("data-slot", "sidebar-group-action");
   });
-  Alpine.directive("h-sidebar-group-content", (el) => {
-    el.classList.add("w-full", "text-sm");
+  Alpine.directive("h-sidebar-group-content", (el, { original }, { effect }) => {
+    const group = Alpine.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_group"));
+    if (!group) {
+      throw new Error(`${original} must be placed inside a sidebar group`);
+    }
+    el.classList.add("w-full", "text-sm", "data-[collapsed=true]:hidden", "group-data-[collapsed=true]/sidebar:!block");
     el.setAttribute("data-slot", "sidebar-group-content");
+    if (group._h_sidebar_group.collapsable) {
+      el.setAttribute("id", group._h_sidebar_group.controls);
+      el.setAttribute("aria-labelledby", group._h_sidebar_group.controlId);
+      el.setAttribute("data-collapsed", group._h_sidebar_group.state.collapsed);
+      effect(() => {
+        el.setAttribute("data-collapsed", group._h_sidebar_group.state.collapsed);
+      });
+    }
   });
-  Alpine.directive("h-sidebar-menu", (el) => {
+  Alpine.directive("h-sidebar-menu", (el, { original }) => {
+    if (el.tagName !== "UL") {
+      throw new Error(`${original} must be an ul element`);
+    }
     el.classList.add("vbox", "w-full", "min-w-0", "gap-1");
     el.setAttribute("data-slot", "sidebar-menu");
   });
-  Alpine.directive("h-sidebar-menu-item", (el) => {
-    el.classList.add("group/menu-item", "relative");
+  Alpine.directive("h-sidebar-menu-item", (el, { original, expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
+    if (el.tagName !== "LI") {
+      throw new Error(`${original} must be a li element`);
+    }
+    el._h_sidebar_menu_item = {
+      isSub: false,
+      collapsable: modifiers.includes("collapsed"),
+      controlId: void 0,
+      controls: void 0,
+      state: Alpine2.reactive({
+        collapsed: evaluate2(expression || "false")
+      })
+    };
+    let parent = el.parentElement;
+    while (parent) {
+      if (parent.getAttribute("data-slot") === "sidebar-menu-sub") {
+        el._h_sidebar_menu_item.isSub = true;
+        break;
+      } else if (parent.getAttribute("data-slot") === "sidebar") {
+        break;
+      }
+      parent = parent.parentElement;
+    }
+    if (!el._h_sidebar_menu_item.isSub) {
+      el.classList.add("group/menu-item", "relative");
+    } else {
+      el.classList.add("relative");
+    }
     el.setAttribute("data-slot", "sidebar-menu-item");
+    if (expression) {
+      const getCollapsed = evaluateLater(expression);
+      effect(() => {
+        getCollapsed((collapsed) => {
+          el._h_sidebar_menu_item.state.collapsed = collapsed;
+        });
+      });
+    }
   });
-  Alpine.directive("h-sidebar-menu-button", (el) => {
+  Alpine.directive("h-sidebar-menu-button", (el, { original }, { cleanup, Alpine: Alpine2 }) => {
+    if (el.tagName !== "BUTTON" && el.tagName !== "A") {
+      throw new Error(`${original} must be a button or a link`);
+    } else if (el.tagName === "BUTTON") {
+      el.setAttribute("type", "button");
+    }
+    const menuItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_menu_item"));
     el.classList.add(
-      "peer/menu-button",
       "flex",
       "w-full",
       "items-center",
       "gap-2",
       "overflow-hidden",
       "rounded-md",
-      "p-2",
-      "text-left",
-      "text-sm",
       "align-middle",
+      "[&>span]:align-middle",
       "outline-hidden",
       "ring-sidebar-ring",
-      "transition-[width,height,padding]",
       "hover:bg-sidebar-secondary",
       "hover:text-sidebar-secondary-foreground",
       "focus-visible:ring-2",
@@ -7457,24 +7566,14 @@ function sidebar_default(Alpine) {
       "active:text-sidebar-primary-foreground",
       "disabled:pointer-events-none",
       "disabled:opacity-50",
-      "group-has-data-[sidebar=menu-action]/menu-item:pr-8",
       "aria-disabled:pointer-events-none",
       "aria-disabled:opacity-50",
       "data-[active=true]:bg-sidebar-primary",
-      "data-[active=true]:font-medium",
       "data-[active=true]:text-sidebar-primary-foreground",
-      "data-[state=open]:hover:bg-sidebar-secondary",
-      "data-[state=open]: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",
       "[&>span]:truncate",
-      "[&>span]:align-middle",
       "[&>svg]:size-4",
-      "[&>svg]:shrink-0",
-      "[&>svg:not(:first-child):last-child]:ml-auto"
+      "[&>svg]:shrink-0"
     );
-    if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "sidebar-menu-button");
     const sizes = {
       default: ["h-8", "text-sm"],
       sm: ["h-7", "text-xs"],
@@ -7485,22 +7584,77 @@ function sidebar_default(Alpine) {
         el.classList.add(...sizes[size3]);
       }
     }
-    if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "default");
-    setSize2(el.getAttribute("data-size"));
+    setSize2(el.getAttribute("data-size") || "default");
+    if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "sidebar-menu-button");
+    if (menuItem && menuItem._h_sidebar_menu_item.isSub) {
+      el.classList.add("text-sidebar-foreground", "h-7", "min-w-0", "-translate-x-px", "px-2", "[&>svg:not(:first-child):last-child]:ml-auto", "group-data-[collapsed=true]/sidebar:hidden");
+      if (!el.hasAttribute("data-slot")) el.setAttribute("data-slot", "sidebar-menu-sub-button");
+    } else {
+      el.classList.add(
+        "peer/menu-button",
+        "p-2",
+        "text-left",
+        "text-sm",
+        "duration-200",
+        "transition-[width,height,padding]",
+        "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",
+        "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"
+      );
+    }
+    if (menuItem && menuItem._h_sidebar_menu_item.collapsable) {
+      if (el.hasAttribute("id")) {
+        menuItem._h_sidebar_menu_item.controlId = el.getAttribute("id");
+      } else {
+        menuItem._h_sidebar_menu_item.controlId = `sgl${v4_default()}`;
+        el.setAttribute("id", menuItem._h_sidebar_menu_item.controlId);
+      }
+      menuItem._h_sidebar_menu_item.controls = `sgc${v4_default()}`;
+      el.setAttribute("aria-controls", menuItem._h_sidebar_menu_item.controls);
+      el.setAttribute("aria-expanded", !menuItem._h_sidebar_menu_item.state.collapsed);
+      const handler = () => {
+        menuItem._h_sidebar_menu_item.state.collapsed = !menuItem._h_sidebar_menu_item.state.collapsed;
+        el.setAttribute("aria-expanded", !menuItem._h_sidebar_menu_item.state.collapsed);
+      };
+      el.appendChild(
+        createSvg({
+          icon: ChevronRight,
+          classes: "ml-auto pointer-events-none size-4 shrink-0 transition-transform duration-200 [[aria-expanded=true]>&]:rotate-90",
+          attrs: {
+            "aria-hidden": true,
+            role: "presentation"
+          }
+        })
+      );
+      el.addEventListener("click", handler);
+      cleanup(() => {
+        el.removeEventListener("click", handler);
+      });
+    } else {
+      el.classList.add("[&>svg:not(:first-child):last-child]:ml-auto");
+    }
   });
   Alpine.directive("h-sidebar-menu-action", (el, { modifiers }) => {
     el.classList.add(
       "text-sidebar-foreground",
       "ring-sidebar-ring",
       "hover:bg-sidebar-secondary",
+      "active:bg-sidebar-secondary/70",
       "hover:text-sidebar-secondary-foreground",
       "peer-hover/menu-button:text-sidebar-secondary-foreground",
+      "peer-active/menu-button:text-sidebar-primary-foreground",
+      "peer-data-[active=true]/menu-button:text-sidebar-primary-foreground",
       "absolute",
-      "top-1.5",
-      "right-1.5",
+      "top-0.5",
+      "right-0.5",
+      "bottom-0.5",
       "flex",
       "aspect-square",
-      "w-5",
+      "h-auto",
       "items-center",
       "justify-center",
       "rounded-md",
@@ -7513,40 +7667,23 @@ function sidebar_default(Alpine) {
       "after:absolute",
       "after:-inset-2",
       "md:after:hidden",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
       "group-data-[collapsed=true]/sidebar:hidden"
     );
     if (modifiers.includes("autohide")) {
-      el.classList.add("peer-data-[active=true]/menu-button:text-sidebar-secondary-foreground", "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", "data-[state=open]:opacity-100", "md:opacity-0");
+    }
+    if (el.tagName !== "BUTTON") {
+      el.setAttribute("role", "button");
+    } else {
+      el.setAttribute("type", "button");
     }
     el.setAttribute("data-slot", "sidebar-menu-action");
   });
-  Alpine.directive("h-sidebar-menu-badge", (el) => {
-    el.classList.add(
-      "text-sidebar-foreground",
-      "pointer-events-none",
-      "absolute",
-      "right-1.5",
-      "flex",
-      "h-5",
-      "min-w-5",
-      "items-center",
-      "justify-center",
-      "rounded-md",
-      "px-1",
-      "text-xs",
-      "font-medium",
-      "tabular-nums",
-      "select-none",
-      "peer-hover/menu-button:text-sidebar-secondary-foreground",
-      "peer-data-[active=true]/menu-button:text-sidebar-primary-foreground",
-      "peer-data-[size=sm]/menu-button:top-1",
-      "peer-data-[size=default]/menu-button:top-1.5",
-      "peer-data-[size=lg]/menu-button:top-2.5",
-      "group-data-[collapsed=true]/sidebar:hidden"
-    );
+  Alpine.directive("h-sidebar-menu-badge", (el, { original }) => {
+    if (el.tagName !== "SPAN") {
+      throw new Error(`${original} must be a span element`);
+    }
+    el.classList.add("flex-1", "pointer-events-none", "flex", "h-full", "min-w-min", "items-center", "justify-end", "text-xs", "font-medium", "tabular-nums", "select-none", "group-data-[collapsed=true]/sidebar:hidden");
     el.setAttribute("data-slot", "sidebar-menu-badge");
   });
   Alpine.directive("h-sidebar-menu-skeleton", (el, { modifiers }) => {
@@ -7567,64 +7704,27 @@ function sidebar_default(Alpine) {
     el.setAttribute("data-slot", "sidebar-separator");
     el.setAttribute("role", "none");
   });
-  Alpine.directive("h-sidebar-menu-sub", (el, { modifiers }) => {
-    el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "py-0.5", "group-data-[collapsed=true]/sidebar:!hidden");
-    if (!modifiers.includes("flat")) {
-      el.classList.add("border-sidebar-border", "mx-3.5", "border-l", "px-2.5");
+  Alpine.directive("h-sidebar-menu-sub", (el, { original }, { effect, Alpine: Alpine2 }) => {
+    if (el.tagName !== "UL") {
+      throw new Error(`${original} must be an ul element`);
+    }
+    const menuItem = Alpine2.findClosest(el.parentElement, (parent) => parent.hasOwnProperty("_h_sidebar_menu_item"));
+    if (!menuItem) {
+      throw new Error(`${original} must be placed inside a sidebar menu item`);
+    }
+    el.classList.add("vbox", "min-w-0", "translate-x-px", "gap-1", "pl-2.5", "py-0.5", "ml-3.5", "data-[collapsed=true]:!hidden", "group-data-[collapsed=true]/sidebar:!hidden");
+    if (el.getAttribute("data-line") !== "false") {
+      el.classList.add("border-sidebar-border", "border-l");
     }
     el.setAttribute("data-slot", "sidebar-menu-sub");
-  });
-  Alpine.directive("h-sidebar-menu-sub-item", (el) => {
-    el.classList.add("group/menu-sub-item", "relative");
-    el.setAttribute("data-slot", "sidebar-menu-sub-item");
-  });
-  Alpine.directive("h-sidebar-menu-sub-button", (el) => {
-    el.classList.add(
-      "text-sidebar-foreground",
-      "ring-sidebar-ring",
-      "hover:bg-sidebar-secondary",
-      "hover:text-sidebar-secondary-foreground",
-      "active:bg-primary-secondary",
-      "active:text-sidebar-primary-foreground",
-      "[&>svg]:text-sidebar-secondary-foreground",
-      "flex",
-      "h-7",
-      "w-full",
-      "min-w-0",
-      "-translate-x-px",
-      "items-center",
-      "gap-2",
-      "overflow-hidden",
-      "rounded-md",
-      "px-2",
-      "align-middle",
-      "outline-hidden",
-      "focus-visible:ring-2",
-      "disabled:pointer-events-none",
-      "disabled:opacity-50",
-      "aria-disabled:pointer-events-none",
-      "aria-disabled:opacity-50",
-      "[&>span]:truncate",
-      "[&>span]:align-middle",
-      "[&>svg]:size-4",
-      "[&>svg]:shrink-0",
-      "[&>svg:not(:first-child):last-child]:ml-auto",
-      "data-[active=true]:bg-sidebar-primary",
-      "data-[active=true]:text-sidebar-primary-foreground",
-      "group-data-[collapsed=true]/sidebar:hidden"
-    );
-    el.setAttribute("data-slot", "sidebar-menu-sub-button");
-    const sizes = {
-      sm: ["text-xs"],
-      md: ["text-sm"]
-    };
-    function setSize2(size3) {
-      if (sizes.hasOwnProperty(size3)) {
-        el.classList.add(...sizes[size3]);
-      }
+    if (menuItem._h_sidebar_menu_item.collapsable) {
+      el.setAttribute("id", menuItem._h_sidebar_menu_item.controls);
+      el.setAttribute("aria-labelledby", menuItem._h_sidebar_menu_item.controlId);
+      el.setAttribute("data-collapsed", menuItem._h_sidebar_menu_item.state.collapsed);
+      effect(() => {
+        el.setAttribute("data-collapsed", menuItem._h_sidebar_menu_item.state.collapsed);
+      });
     }
-    if (!el.hasAttribute("data-size")) el.setAttribute("data-size", "md");
-    setSize2(el.getAttribute("data-size"));
   });
   Alpine.directive("h-sidebar-footer", (el) => {
     el.classList.add("vbox", "gap-2", "px-2", "h-12", "justify-center", "border-t");
@@ -9814,7 +9914,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.2.0";
+var version = "1.3.0";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768) {