@codbex/harmonia 1.10.1 → 1.11.0

package/dist/harmonia.js

@@ -42,6 +42,7 @@
   var CircleSuccess = 26;
   var CircleUnknown = 27;
   var CircleUser = 28;
+  var Home = 29;
   function setCalendarContent(svg) {
     const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
     path.setAttributeNS(
@@ -384,6 +385,15 @@
     );
     svg.appendChild(path2);
   }
+  function setHomeContent(svg) {
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    path.setAttributeNS(
+      null,
+      "d",
+      "m8 0.8252c-0.51124 0-1.0243 0.19615-1.416 0.58789l-4.4316 4.4297c-0.27162 0.2733-0.65234 0.7207-0.65234 1.6055v5.7266c0 1.108 0.892 2 2 2h9c1.108 0 2-0.892 2-2v-5.7266c0-0.88477-0.38073-1.3322-0.65234-1.6055l-4.4316-4.4297c-0.39174-0.39174-0.90478-0.58789-1.416-0.58789zm0 1.4258c0.25431-2.91e-4 0.5101 0.096117 0.70703 0.29297l4.2207 4.2188v0.00195c0.17404 0.1851 0.27111 0.42951 0.27148 0.68359v5.4277c0 0.554-0.446 1-1 1h-1.5078v-4.1289c0-1.108-0.892-2-2-2h-1.3828c-1.108 0-2 0.892-2 2v4.1289h-1.5078c-0.554 0-1-0.446-1-1v-5.4277c3.752e-4 -0.25408 0.09744-0.4985 0.27148-0.68359v-0.00195l4.2207-4.2188c0.19693-0.19685 0.45273-0.29326 0.70703-0.29297zm-0.58984 6.7949h1.1797c0.44244-4.323e-4 0.80121 0.35834 0.80078 0.80078v4.0293h-2.7812v-4.0293c-4.322e-4 -0.44244 0.35834-0.80121 0.80078-0.80078z"
+    );
+    svg.appendChild(path);
+  }
   function createSvg({ icon, classes = "size-4", attrs } = {}) {
     const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
     svg.setAttributeNS(null, "width", "16");
@@ -484,6 +494,9 @@
       case CircleUser:
         setCircleUserContent(svg);
         break;
+      case Home:
+        setHomeContent(svg);
+        break;
       default:
         break;
     }
@@ -583,6 +596,9 @@
       case "circle-user":
         setCircleUserContent(svg);
         break;
+      case "home":
+        setHomeContent(svg);
+        break;
       default:
         break;
     }
@@ -1017,6 +1033,113 @@
     });
   }
 
+  // src/components/breadcrumb.js
+  function breadcrumb_default(Alpine) {
+    Alpine.directive("h-breadcrumb", (el, _, { Alpine: Alpine2, cleanup }) => {
+      el.classList.add("flex", "items-center", "break-words", "text-sm", "text-muted-foreground", "rounded-control");
+      el.setAttribute("role", "navigation");
+      el.setAttribute("aria-label", "breadcrumb");
+      el.setAttribute("data-slot", "breadcrumb");
+      const variants = {
+        outline: ["border"]
+      };
+      const allVariantClasses = Object.values(variants).flat();
+      const sizes = {
+        default: ["h-9", "px-3"],
+        md: ["h-8", "px-2.5"],
+        sm: ["h-6.5", "px-2"]
+      };
+      const allSizeClasses = Object.values(sizes).flat();
+      function applyClasses() {
+        const variant = el.getAttribute("data-variant");
+        const size3 = el.getAttribute("data-size") ?? "default";
+        el.classList.remove(...allVariantClasses, ...allSizeClasses);
+        if (variant && Object.prototype.hasOwnProperty.call(variants, variant)) {
+          el.classList.add(...variants[variant]);
+          el.classList.add(...sizes[size3] ?? sizes.default);
+        } else {
+          el.classList.add("px-2");
+        }
+      }
+      applyClasses();
+      const observer = new MutationObserver(() => applyClasses());
+      observer.observe(el, { attributes: true, attributeFilter: ["data-variant", "data-size"] });
+      if (el.getAttribute("data-overflow") === "scroll") {
+        el.classList.add("overflow-x-scroll", "scrollbar-none");
+        let preserveScroll = false;
+        const scrollToEnd = () => {
+          el.scrollLeft = el.scrollWidth;
+        };
+        Alpine2.nextTick(scrollToEnd);
+        const handleScroll = () => {
+          preserveScroll = el.scrollLeft < el.scrollWidth - el.clientWidth - 1;
+        };
+        const handleResize = () => {
+          if (!preserveScroll) scrollToEnd();
+        };
+        el.addEventListener("scroll", handleScroll);
+        window.addEventListener("resize", handleResize);
+        cleanup(() => {
+          el.removeEventListener("scroll", handleScroll);
+          window.removeEventListener("resize", handleResize);
+          observer.disconnect();
+        });
+      } else if (el.getAttribute("data-overflow") === "nowrap") {
+        el.classList.add("flex-nowrap");
+        cleanup(() => observer.disconnect());
+      } else {
+        el.classList.add("flex-wrap");
+        cleanup(() => observer.disconnect());
+      }
+    });
+    Alpine.directive("h-breadcrumb-list", (el, _, { Alpine: Alpine2 }) => {
+      el.classList.add("flex", "items-center", "gap-1.5");
+      el.setAttribute("data-slot", "breadcrumb-list");
+      const nav = Alpine2.findClosest(el, (node) => node.getAttribute("data-slot") === "breadcrumb");
+      const overflow = nav?.getAttribute("data-overflow");
+      if (overflow === "scroll" || overflow === "nowrap") {
+        el.classList.add("flex-nowrap");
+      } else {
+        el.classList.add("flex-wrap");
+      }
+    });
+    Alpine.directive("h-breadcrumb-item", (el) => {
+      el.classList.add("group", "inline-flex", "items-center", "gap-1.5");
+      el.setAttribute("data-slot", "breadcrumb-item");
+      const separator = createSvg({
+        icon: ChevronRight,
+        classes: "size-3.5 group-first-of-type:hidden",
+        attrs: { "aria-hidden": "true", role: "presentation" }
+      });
+      el.prepend(separator);
+    });
+    Alpine.directive("h-breadcrumb-link", (el) => {
+      el.classList.add(
+        "cursor-pointer",
+        "hbox",
+        "gap-1.5",
+        "items-center",
+        "whitespace-nowrap",
+        "text-primary",
+        "transition-colors",
+        "underline-offset-4",
+        "hover:underline",
+        "hover:text-primary-hover",
+        "active:text-primary-active",
+        "[&>svg]:size-4",
+        "[&>svg]:text-current"
+      );
+      el.setAttribute("data-slot", "breadcrumb-link");
+    });
+    Alpine.directive("h-breadcrumb-page", (el) => {
+      el.classList.add("hbox", "gap-1.5", "items-center", "whitespace-nowrap", "text-foreground", "font-normal", "[&>svg]:size-4", "[&>svg]:text-current");
+      el.setAttribute("role", "link");
+      el.setAttribute("aria-current", "page");
+      el.setAttribute("aria-disabled", "true");
+      el.setAttribute("data-slot", "breadcrumb-page");
+    });
+  }
+
   // src/components/button.js
   var buttonVariants = {
     default: [
@@ -3418,7 +3541,9 @@
         "has-[>[data-slot=chip-close]]:pr-0",
         "has-[>[data-slot=spinner]]:px-2",
         "text-secondary-foreground",
-        "border"
+        "border",
+        "[&>:is(div,span:not([data-slot=chip-close]),p)]:py-1",
+        "[&>:is(div,span:not([data-slot=chip-close]),p)]:truncate"
       );
       if (!el.hasAttribute("type")) {
         el.setAttribute("type", "button");
@@ -3491,8 +3616,8 @@
       });
     });
     Alpine.directive("h-chip-close", (el, { original }, { effect, cleanup }) => {
-      if (el.tagName === "BUTTON") {
-        throw new Error(`${original} must NOT be a button element`);
+      if (el.tagName !== "SPAN") {
+        throw new Error(`${original} must be a span element`);
       }
       const chip = Alpine.findClosest(el.parentElement, (parent) => Object.prototype.hasOwnProperty.call(parent, "_h_chip"));
       el.classList.add(
@@ -4827,6 +4952,10 @@
       }
       function close(closeParent = false, focusTrigger = false) {
         el.pauseKeyEvents = false;
+        if (autoUpdateCleanup) {
+          autoUpdateCleanup();
+          autoUpdateCleanup = null;
+        }
         if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
           el.classList.add("hidden", "scale-95", "opacity-0");
           Object.assign(el.style, {
@@ -4956,6 +5085,7 @@
           }
         }
       }
+      let autoUpdateCleanup;
       function open(parent) {
         if (el.classList.contains("hidden")) {
           let getPlacement = function() {
@@ -4965,41 +5095,52 @@
               return el.getAttribute("data-align") || "bottom-start";
             }
             return "right-start";
+          }, updatePosition = function() {
+            const isFirst = firstOpen;
+            firstOpen = false;
+            computePosition2(parent, el, {
+              placement: getPlacement(),
+              strategy: "fixed",
+              middleware: [
+                offset2(isSubmenu ? 0 : 4),
+                flip2(),
+                shift2({ padding: 4 }),
+                size2({
+                  apply({ availableWidth, availableHeight, elements }) {
+                    Object.assign(elements.floating.style, {
+                      maxWidth: `${Math.max(0, availableWidth) - 4}px`,
+                      maxHeight: `${Math.max(0, availableHeight) - 4}px`
+                    });
+                  }
+                })
+              ]
+            }).then(({ x, y }) => {
+              if (isFirst) {
+                if (!isSubmenu) {
+                  Alpine2.nextTick(() => el.focus());
+                  listenForTrigger(false);
+                }
+                Alpine2.nextTick(() => {
+                  top.addEventListener("contextmenu", onClick);
+                  top.addEventListener("click", onClick);
+                  el.addEventListener("keydown", onKeyDown);
+                });
+              }
+              Object.assign(el.style, {
+                left: `${x}px`,
+                top: `${y}px`
+              });
+              el.classList.remove("scale-95", "opacity-0");
+            });
           };
           el.classList.remove("hidden");
           el.pauseKeyEvents = false;
-          computePosition2(parent, el, {
-            placement: getPlacement(),
-            strategy: "fixed",
-            middleware: [
-              offset2(isSubmenu ? 0 : 4),
-              flip2(),
-              shift2({ padding: 4 }),
-              size2({
-                apply({ availableWidth, availableHeight, elements }) {
-                  Object.assign(elements.floating.style, {
-                    maxWidth: `${Math.max(0, availableWidth) - 4}px`,
-                    maxHeight: `${Math.max(0, availableHeight) - 4}px`
-                  });
-                }
-              })
-            ]
-          }).then(({ x, y }) => {
-            if (!isSubmenu) {
-              Alpine2.nextTick(() => el.focus());
-              listenForTrigger(false);
-            }
-            Alpine2.nextTick(() => {
-              top.addEventListener("contextmenu", onClick);
-              top.addEventListener("click", onClick);
-              el.addEventListener("keydown", onKeyDown);
-            });
-            Object.assign(el.style, {
-              left: `${x}px`,
-              top: `${y}px`
-            });
-            el.classList.remove("scale-95", "opacity-0");
-          });
+          let firstOpen = true;
+          if (!isSubmenu && menuTrigger._menu_trigger.isDropdown) {
+            autoUpdateCleanup = autoUpdate(parent, el, updatePosition);
+          } else {
+            updatePosition();
+          }
         }
       }
       function openDropdown() {
@@ -5043,6 +5184,7 @@
       }
       el.addEventListener("transitionend", onTransitionEnd);
       cleanup(() => {
+        if (autoUpdateCleanup) autoUpdateCleanup();
         if (menuTrigger) listenForTrigger(false);
         top.removeEventListener("click", onClick);
         top.removeEventListener("contextmenu", onClick);
@@ -5082,7 +5224,10 @@
         "data-[inset=true]:pl-8",
         "[&_svg]:pointer-events-none",
         "[&_svg]:shrink-0",
-        "[&_svg:not([class*='size-'])]:size-4"
+        "[&_svg:not([class*='size-'])]:size-4",
+        "[&>a]:no-underline",
+        "[&>a]:text-inherit",
+        "[&>a]:size-full"
       );
       el.setAttribute("role", "menuitem");
       el.setAttribute("tabindex", "-1");
@@ -5496,8 +5641,8 @@
       el.setAttribute("aria-atomic", "false");
       el.setAttribute("data-slot", "notification-overlay");
       const commonListClasses = ["flex", "flex-col", "py-4", "p-10", "gap-4", "overflow-visible", "size-full"];
-      const commonTopClasses = ["[mask-image:linear-gradient(to_bottom,black_80%,transparent)]", "row-1"];
-      const commonBottomClasses = ["[mask-image:linear-gradient(to_top,black_80%,transparent)]", "row-2"];
+      const commonTopClasses = ["mask-[linear-gradient(to_bottom,black_85%,transparent)]", "row-1"];
+      const commonBottomClasses = ["mask-[linear-gradient(to_top,black_85%,transparent)]", "row-2"];
       const olTopLeft = document.createElement("ol");
       olTopLeft.classList.add(...commonListClasses, ...commonTopClasses, "max-lg:hidden", "items-start");
       olTopLeft.setAttribute("tabindex", "-1");
@@ -11572,7 +11717,7 @@
   }
 
   // package.json
-  var version = "1.10.1";
+  var version = "1.11.0";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };
@@ -11581,6 +11726,7 @@
     window.Alpine.plugin(alert_default);
     window.Alpine.plugin(avatar_default);
     window.Alpine.plugin(badge_default);
+    window.Alpine.plugin(breadcrumb_default);
     window.Alpine.plugin(button_default);
     window.Alpine.plugin(calendar_default);
     window.Alpine.plugin(card_default);