@codbex/harmonia 1.5.2 → 1.6.1

package/dist/harmonia.esm.js

@@ -4768,11 +4768,11 @@ function checkbox_default(Alpine) {
       "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",
@@ -5731,14 +5731,14 @@ function list_default(Alpine) {
           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) => {
@@ -5823,6 +5823,9 @@ function menu_default(Alpine) {
       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) {
@@ -5846,8 +5849,8 @@ function menu_default(Alpine) {
         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) {
@@ -5879,7 +5882,7 @@ function menu_default(Alpine) {
       }
       return false;
     }
-    function onClick2(event) {
+    function onClick(event) {
       if (event.type === "contextmenu") event.preventDefault();
       close(isSubmenu);
     }
@@ -5997,8 +6000,8 @@ function menu_default(Alpine) {
             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, {
@@ -6039,9 +6042,9 @@ function menu_default(Alpine) {
       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);
     });
   });
@@ -6641,10 +6644,10 @@ function radio_default(Alpine) {
       "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",
@@ -6716,10 +6719,10 @@ function select_default(Alpine) {
         "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",
@@ -6950,7 +6953,7 @@ function select_default(Alpine) {
           }
       }
     };
-    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}`);
@@ -6971,14 +6974,14 @@ function select_default(Alpine) {
       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",
@@ -7001,7 +7004,7 @@ function select_default(Alpine) {
     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);
@@ -7098,11 +7101,11 @@ function select_default(Alpine) {
     }
     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 });
@@ -7301,14 +7304,14 @@ function sheet_default(Alpine) {
         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 }) => {
@@ -7787,6 +7790,7 @@ function spinner_default(Alpine) {
       "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");
@@ -7930,7 +7934,8 @@ function split_default(Alpine) {
       });
     };
     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,
@@ -7995,7 +8000,19 @@ function split_default(Alpine) {
     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";
@@ -8102,6 +8119,7 @@ function split_default(Alpine) {
     effect(setVariant);
     const initialSize = split._h_split.normalize(el.getAttribute("data-size"));
     let handleSize = 0;
+    let layoutFrame = null;
     const panel = {
       el,
       gutter,
@@ -8122,9 +8140,13 @@ function split_default(Alpine) {
       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() {
@@ -8150,6 +8172,7 @@ function split_default(Alpine) {
       },
       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) {
@@ -8159,6 +8182,10 @@ function split_default(Alpine) {
         }
       }
     };
+    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();
@@ -9519,10 +9546,10 @@ function timepicker_default(Alpine) {
         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() {
@@ -9565,20 +9592,10 @@ function timepicker_default(Alpine) {
     });
     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);
     });
   });
 }
@@ -9613,17 +9630,34 @@ function toolbar_default(Alpine) {
     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");
   });
 }
@@ -9806,7 +9840,7 @@ function tree_default(Alpine) {
       el.setAttribute("role", "tree");
       el.addEventListener("keydown", onKeyDown);
       cleanup(() => {
-        el.removeEventListener("keydown", onClick);
+        el.removeEventListener("keydown", onKeyDown);
       });
     }
   });
@@ -9836,7 +9870,7 @@ function tree_default(Alpine) {
     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") {
@@ -9851,9 +9885,9 @@ function tree_default(Alpine) {
         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) => {
@@ -9933,7 +9967,7 @@ function tree_default(Alpine) {
 }
 
 // package.json
-var version = "1.5.2";
+var version = "1.6.1";
 
 // src/utils/breakpoint-listener.js
 function getBreakpointListener(handler, breakpoint = 768) {
@@ -10008,10 +10042,7 @@ var setColorScheme = (mode) => {
 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) {
@@ -10046,32 +10077,59 @@ function focus_default(Alpine) {
 
 // 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);
         });
@@ -10081,10 +10139,14 @@ function include_default(Alpine) {
     }
     effect(() => {
       getUrl((url) => {
+        destroyTree();
+        el.innerHTML = "";
         if (url) getHtml(url);
-        else el.innerHTML = "";
       });
     });
+    cleanup(() => {
+      destroyTree();
+    });
   }).before("bind");
 }