@codbex/harmonia 1.5.2 → 1.6.1

package/dist/harmonia.js

@@ -2862,11 +2862,11 @@
         "bg-input-inner",
         "border",
         "border-input",
-        "dark:has-[aria-invalid=true]:ring-negative/40",
+        "dark:has-[input[aria-invalid=true]]:ring-negative/40",
         "dark:has-[input:invalid]:ring-negative/40",
         "duration-200",
-        "has-[aria-invalid=true]:border-negative",
-        "has-[aria-invalid=true]:ring-negative/20",
+        "has-[input[aria-invalid=true]]:border-negative",
+        "has-[input[aria-invalid=true]]:ring-negative/20",
         "has-[input:checked]:bg-primary",
         "has-[input:checked]:border-primary",
         "has-[input:disabled]:cursor-not-allowed",
@@ -3825,14 +3825,14 @@
             break;
         }
       }
-      function onClick2(event) {
+      function onClick(event) {
         if (event.target.getAttribute("data-slot") === "list-item") selectOption(event.target);
       }
-      el.addEventListener("click", onClick2);
+      el.addEventListener("click", onClick);
       el.addEventListener("keydown", onKeyDown);
       cleanup(() => {
         el.removeEventListener("keydown", onKeyDown);
-        el.removeEventListener("click", onClick2);
+        el.removeEventListener("click", onClick);
       });
     });
     Alpine.directive("h-list", (el) => {
@@ -3917,6 +3917,9 @@
         while (sibling && !sibling.hasOwnProperty("_menu_trigger")) {
           sibling = sibling.previousElementSibling;
         }
+        if (!sibling.hasOwnProperty("_menu_trigger")) {
+          throw new Error(`${original2} must be placed after the menu trigger`);
+        }
         return sibling;
       })();
       if (!isSubmenu && !menuTrigger) {
@@ -3940,8 +3943,8 @@
           left: "0px",
           top: "0px"
         });
-        top.removeEventListener("contextmenu", onClick2);
-        top.removeEventListener("click", onClick2);
+        top.removeEventListener("contextmenu", onClick);
+        top.removeEventListener("click", onClick);
         el.removeEventListener("keydown", onKeyDown);
         if (isSubmenu) {
           if (closeParent) {
@@ -3973,7 +3976,7 @@
         }
         return false;
       }
-      function onClick2(event) {
+      function onClick(event) {
         if (event.type === "contextmenu") event.preventDefault();
         close(isSubmenu);
       }
@@ -4091,8 +4094,8 @@
               listenForTrigger(false);
             }
             Alpine2.nextTick(() => {
-              top.addEventListener("contextmenu", onClick2);
-              top.addEventListener("click", onClick2);
+              top.addEventListener("contextmenu", onClick);
+              top.addEventListener("click", onClick);
               el.addEventListener("keydown", onKeyDown);
             });
             Object.assign(el.style, {
@@ -4133,9 +4136,9 @@
         listenForTrigger(true);
       }
       cleanup(() => {
-        listenForTrigger(false);
-        top.removeEventListener("click", onClick2);
-        top.removeEventListener("contextmenu", onClick2);
+        if (menuTrigger) listenForTrigger(false);
+        top.removeEventListener("click", onClick);
+        top.removeEventListener("contextmenu", onClick);
         el.removeEventListener("keydown", onKeyDown);
       });
     });
@@ -4735,10 +4738,10 @@
         "bg-input-inner",
         "border",
         "border-input",
-        "dark:has-[aria-invalid=true]:ring-negative/40",
+        "dark:has-[input[aria-invalid=true]]:ring-negative/40",
         "dark:has-[input:invalid]:ring-negative/40",
-        "has-[aria-invalid=true]:border-negative",
-        "has-[aria-invalid=true]:ring-negative/20",
+        "has-[input[aria-invalid=true]]:border-negative",
+        "has-[input[aria-invalid=true]]:ring-negative/20",
         "has-[input:checked]:before:visible",
         "has-[input:disabled]:cursor-not-allowed",
         "has-[input:disabled]:opacity-50",
@@ -6669,10 +6672,10 @@
           "has-focus-visible:border-ring",
           "has-focus-visible:ring-[calc(var(--spacing)*0.75)]",
           "has-focus-visible:ring-ring/50",
-          "dark:has-[aria-invalid=true]:ring-negative/40",
+          "dark:has-[input[aria-invalid=true]]:ring-negative/40",
           "dark:has-[input:invalid]:ring-negative/40",
-          "has-[aria-invalid=true]:border-negative",
-          "has-[aria-invalid=true]:ring-negative/20",
+          "has-[input[aria-invalid=true]]:border-negative",
+          "has-[input[aria-invalid=true]]:ring-negative/20",
           "has-[input:invalid]:border-negative",
           "has-[input:invalid]:ring-negative/20",
           "hover:bg-secondary-hover",
@@ -6903,7 +6906,7 @@
             }
         }
       };
-      const onClick2 = () => {
+      const onClick = () => {
         select._h_select.expanded = !select._h_select.expanded;
         if (select._h_select.expanded) {
           if (!content) content = select.querySelector(`#${select._h_select.controls}`);
@@ -6924,14 +6927,14 @@
         if (event.key === "Escape" && select._h_select.expanded) close(true);
         else if (event.key === "Enter") {
           event.preventDefault();
-          onClick2();
+          onClick();
         } else if (event.key === " ") {
           event.preventDefault();
-          setTimeout(() => onClick2(), 0);
+          setTimeout(() => onClick(), 0);
         }
       };
       fakeTrigger.addEventListener("keydown", onPress);
-      fakeTrigger.addEventListener("click", onClick2);
+      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",
@@ -6954,7 +6957,7 @@
       select._h_select.refreshLabel = onInputChange;
       el.addEventListener("change", onInputChange);
       cleanup(() => {
-        fakeTrigger.removeEventListener("click", onClick2);
+        fakeTrigger.removeEventListener("click", onClick);
         fakeTrigger.removeEventListener("keydown", onPress);
         el.parentElement.removeEventListener("keydown", onKeyDown);
         top.removeEventListener("click", close);
@@ -7051,11 +7054,11 @@
       }
       el.addEventListener("click", onActivate);
       el.addEventListener("keydown", onActivate);
+      function onInput() {
+        select._h_select.search = searchInput.value.toLowerCase();
+      }
       if (select._h_select.filterType !== FilterType.none) {
-        let onInput2 = function() {
-          select._h_select.search = searchInput.value.toLowerCase();
-        };
-        searchInput.addEventListener("keyup", onInput2);
+        searchInput.addEventListener("keyup", onInput);
       }
       effect(() => {
         if (select._h_select.expanded) searchInput.focus({ preventScroll: true });
@@ -7254,14 +7257,14 @@
           el.setAttribute("data-open", isOpen);
         });
       });
-      const onClick2 = (event) => {
+      const onClick = (event) => {
         if (event.target.getAttribute("data-slot") === "sheet-overlay") {
           evaluate2(`${expression} = false`);
         }
       };
-      el.addEventListener("click", onClick2);
+      el.addEventListener("click", onClick);
       cleanup(() => {
-        el.removeEventListener("click", onClick2);
+        el.removeEventListener("click", onClick);
       });
     });
     Alpine.directive("h-sheet", (el, _, { cleanup }) => {
@@ -7740,6 +7743,7 @@
         "rounded-full",
         "animate-spin"
       );
+      if (el.tagName === "SPAN") el.classList.add("inline-block");
       el.setAttribute("role", "status");
       el.setAttribute("data-slot", "spinner");
       if (!el.hasAttribute("aria-label")) el.setAttribute("aria-label", "Loading");
@@ -7883,7 +7887,8 @@
         });
       };
       const refreshGutters = () => {
-        panels.forEach((p, i) => p.setGutter(i === panels.length - 1));
+        const lastPanelIndex = panels.length - 1;
+        panels.forEach((p, i) => p.setGutter(i === lastPanelIndex));
       };
       el._h_split = {
         state,
@@ -7948,7 +7953,19 @@
       if (!split) {
         throw new Error(`${original2} must be inside an split element`);
       }
-      el.classList.add("flex", "shrink", "grow-0", "box-border", "min-w-0", "min-h-0", "overflow-visible");
+      el.classList.add(
+        "flex",
+        "shrink",
+        "grow-0",
+        "box-border",
+        "overflow-visible",
+        "[[data-orientation=horizontal]_&]:min-w-(--h-split-panel-min)",
+        "[[data-orientation=horizontal]_&]:max-w-(--h-split-panel-max)",
+        "[[data-orientation=horizontal]_&]:min-h-0",
+        "[[data-orientation=vertical]_&]:min-h-(--h-split-panel-min)",
+        "[[data-orientation=vertical]_&]:max-h-(--h-split-panel-max)",
+        "[[data-orientation=vertical]_&]:min-w-0"
+      );
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "split-panel");
       let gutterless = el.getAttribute("data-gutterless") === "true";
@@ -8055,6 +8072,7 @@
       effect(setVariant);
       const initialSize = split._h_split.normalize(el.getAttribute("data-size"));
       let handleSize = 0;
+      let layoutFrame = null;
       const panel = {
         el,
         gutter,
@@ -8075,9 +8093,13 @@
         setGutter(last) {
           if (this.hidden || gutterless || last) {
             gutter.remove();
-          } else if (!gutter.parentElement) {
-            el.after(gutter);
-            handleSize = this.getHandleSize();
+          } else {
+            if (layoutFrame) cancelAnimationFrame(layoutFrame);
+            layoutFrame = requestAnimationFrame(() => {
+              el.after(gutter);
+              handleSize = this.getHandleSize();
+              layoutFrame = null;
+            });
           }
         },
         setHandleOffset() {
@@ -8103,6 +8125,7 @@
         },
         setLocked(locked = false) {
           const panelLocked = el.getAttribute("data-locked") === "true";
+          gutter.setAttribute("aria-disabled", locked || panelLocked);
           if (locked) {
             gutter.classList.add("pointer-events-none");
           } else if (panelLocked) {
@@ -8112,6 +8135,10 @@
           }
         }
       };
+      el.style.setProperty("--h-split-panel-min", `${panel.min}px`);
+      if (panel.max < Infinity) {
+        el.style.setProperty("--h-split-panel-max", `${panel.max}px`);
+      }
       split._h_split.addPanel(panel);
       const drag = (e) => {
         e.preventDefault();
@@ -9472,10 +9499,10 @@
           periodList.classList.add("hidden");
         }
       }
-      const onClick2 = (event) => {
+      const onClick = (event) => {
         event.stopPropagation();
       };
-      el.addEventListener("click", onClick2);
+      el.addEventListener("click", onClick);
       let autoUpdateCleanup;
       let focusFirstItem = true;
       function updatePosition() {
@@ -9518,20 +9545,10 @@
       });
       cleanup(() => {
         el.removeEventListener("keydown", onKeyDown);
-        el.removeEventListener("click", onClick2);
+        el.removeEventListener("click", onClick);
         okButton.removeEventListener("click", timepicker._h_timepicker.close);
-        for (let h = 0; h < hoursList.children.length; h++) {
-          hoursList.children[h].removeEventListener("click", setHour);
-        }
-        for (let m = 0; m < minutesList.children.length; m++) {
-          minutesList.children[m].removeEventListener("click", setMinute);
-        }
-        for (let s = 0; s < secondsList.children.length; s++) {
-          secondsList.children[s].removeEventListener("click", setSecond);
-        }
-        for (let p = 0; p < periodList.children.length; p++) {
-          periodList.children[p].removeEventListener("click", setPeriod);
-        }
+        nowButton.removeEventListener("click", getCurrentTime);
+        timeContainer.removeEventListener("click", setTime);
       });
     });
   }
@@ -9566,17 +9583,34 @@
       el.classList.add("size-8", "[[data-size=md]_&]:size-7", "[[data-size=sm]_&]:size-6");
       el.setAttribute("data-slot", "toolbar-image");
     });
+    Alpine.directive("h-toolbar-branding", (el) => {
+      el.classList.add(
+        "flex",
+        "flex-col",
+        "pl-2",
+        "[[data-slot=toolbar-image]~&]:pl-1",
+        "[[data-size=sm]_&,[data-size=md]_&]:flex-row",
+        "[[data-size=sm]_&,[data-size=md]_&]:items-baseline",
+        "[[data-size=sm]_&,[data-size=md]_&]:gap-1",
+        "[[data-size=sm]_&_[data-slot=toolbar-subtitle],[data-size=md]_&_[data-slot=toolbar-subtitle]]:pl-0"
+      );
+      el.setAttribute("data-slot", "toolbar-branding");
+    });
     Alpine.directive("h-toolbar-title", (el) => {
-      el.classList.add("text", "[[data-size=sm]_&]:text-sm", "[[data-size=md]_&]:text-sm", "first-of-type:pl-2", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
+      el.classList.add("pl-2", "[[data-slot=toolbar-branding]_&]:pl-0", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
       el.setAttribute("data-slot", "toolbar-title");
     });
+    Alpine.directive("h-toolbar-subtitle", (el) => {
+      el.classList.add("text-xs", "font-normal", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
+      el.setAttribute("data-slot", "toolbar-subtitle");
+    });
     Alpine.directive("h-toolbar-spacer", (el) => {
       el.classList.add("flex-[1_auto]", "h-full");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "toolbar-spacer");
     });
     Alpine.directive("h-toolbar-separator", (el) => {
-      el.classList.add("w-px", "h-8", "[[data-size=md]_&]:h-6", "[[data-size=sm]_&]:h-6", "border-l");
+      el.classList.add("w-px", "h-8", "[[data-size=md]_&,[data-size=sm]_&]:h-6", "border-l");
       el.setAttribute("data-slot", "toolbar-separator");
     });
   }
@@ -9759,7 +9793,7 @@
         el.setAttribute("role", "tree");
         el.addEventListener("keydown", onKeyDown);
         cleanup(() => {
-          el.removeEventListener("keydown", onClick);
+          el.removeEventListener("keydown", onKeyDown);
         });
       }
     });
@@ -9789,7 +9823,7 @@
       effect(() => {
         if (!el.closest('[role="tree"]')) return;
       });
-      const onClick2 = (event) => {
+      const onClick = (event) => {
         if (event.target === el || event.target.parentElement === el) {
           if (el._h_tree_item.hasSubtree) {
             if (expression === "false" || expression === "true") {
@@ -9804,9 +9838,9 @@
           el.setAttribute("tabindex", "0");
         }
       };
-      el.addEventListener("click", onClick2);
+      el.addEventListener("click", onClick);
       cleanup(() => {
-        el.removeEventListener("click", onClick2);
+        el.removeEventListener("click", onClick);
       });
       if (el._h_tree_item.hasSubtree) {
         const setExpanded = (expanded) => {
@@ -9941,10 +9975,7 @@
   var getColorScheme = () => {
     const theme = localStorage.getItem(colorSchemeKey);
     if (theme) return theme;
-    else if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
-      return "dark";
-    }
-    return "light";
+    return "auto";
   };
   var getSystemColorScheme = () => {
     if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
@@ -10005,32 +10036,59 @@
 
   // src/utils/include.js
   function include_default(Alpine) {
-    Alpine.directive("h-include", (el, { modifiers, expression }, { evaluateLater, effect }) => {
+    Alpine.directive("h-include", (el, { modifiers, expression }, { evaluateLater, effect, cleanup, Alpine: Alpine2 }) => {
       const getUrl = evaluateLater(expression);
+      function executeScript(oldScript) {
+        return new Promise((resolve, reject) => {
+          const newScript = document.createElement("script");
+          for (const attr of oldScript.attributes) {
+            newScript.setAttribute(attr.name, attr.value);
+          }
+          if (oldScript.src) {
+            newScript.src = oldScript.src;
+            newScript.onload = resolve;
+            newScript.onerror = reject;
+          } else {
+            newScript.textContent = oldScript.textContent;
+            resolve();
+          }
+          el.appendChild(newScript);
+        });
+      }
+      function initTree() {
+        for (let i = 0; i < el.children.length; i++) {
+          if (el.children[i].tagName !== "SCRIPT") Alpine2.initTree(el.children[i]);
+        }
+      }
+      function destroyTree() {
+        if (el.children.length) {
+          for (let i = 0; i < el.children.length; i++) {
+            if (el.children[i].tagName !== "SCRIPT") Alpine2.initTree(el.children[i]);
+          }
+        }
+      }
       function getHtml(url) {
         const parsed = new URL(url, window.location.origin);
         if (parsed.origin === window.location.origin) {
           fetch(url).then((response) => {
             if (response.status === 200) return response.text();
             throw response;
-          }).then((content) => {
+          }).then(async (content) => {
             if (modifiers.includes("js")) {
               const container = document.createElement("div");
               container.innerHTML = content;
-              let staticScript = container.querySelector("script");
-              const script = document.createElement("script");
-              for (let a = 0; a < staticScript.attributes.length; a++) {
-                script.setAttribute(staticScript.attributes[a].name, staticScript.attributes[a].value);
-              }
-              script.appendChild(document.createTextNode(staticScript.innerHTML));
-              staticScript.remove();
+              const scripts = [...container.querySelectorAll("script")];
+              scripts.forEach((script) => script.remove());
               while (container.childNodes.length > 0) {
                 el.appendChild(container.childNodes[0]);
               }
-              el.appendChild(script);
+              for (const oldScript of scripts) {
+                await executeScript(oldScript);
+              }
             } else {
               el.innerHTML = content;
             }
+            initTree();
           }).catch((response) => {
             console.error(response);
           });
@@ -10040,10 +10098,14 @@
       }
       effect(() => {
         getUrl((url) => {
+          destroyTree();
+          el.innerHTML = "";
           if (url) getHtml(url);
-          else el.innerHTML = "";
         });
       });
+      cleanup(() => {
+        destroyTree();
+      });
     }).before("bind");
   }
 
@@ -10060,11 +10122,11 @@
   }
 
   // package.json
-  var version = "1.5.2";
+  var version = "1.6.1";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, getSystemColorScheme, version };
-  document.addEventListener("alpine:init", () => {
+  function registerPlugins() {
     window.Alpine.plugin(accordion_default);
     window.Alpine.plugin(alert_default);
     window.Alpine.plugin(avatar_default);
@@ -10109,5 +10171,7 @@
     window.Alpine.plugin(focus_default);
     window.Alpine.plugin(template_default);
     window.Alpine.plugin(include_default);
-  });
+  }
+  if (window.Alpine) registerPlugins();
+  else document.addEventListener("alpine:init", registerPlugins, { once: true });
 })();