@codbex/harmonia 1.4.0 → 1.4.2

package/dist/harmonia.js

@@ -869,10 +869,6 @@
     bottom: "top",
     top: "bottom"
   };
-  var oppositeAlignmentMap = {
-    start: "end",
-    end: "start"
-  };
   function clamp(start, value, end2) {
     return max(start, min(value, end2));
   }
@@ -891,9 +887,9 @@
   function getAxisLength(axis) {
     return axis === "y" ? "height" : "width";
   }
-  var yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
   function getSideAxis(placement) {
-    return yAxisSides.has(getSide(placement)) ? "y" : "x";
+    const firstChar = placement[0];
+    return firstChar === "t" || firstChar === "b" ? "y" : "x";
   }
   function getAlignmentAxis(placement) {
     return getOppositeAxis(getSideAxis(placement));
@@ -916,7 +912,7 @@
     return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
   }
   function getOppositeAlignmentPlacement(placement) {
-    return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+    return placement.includes("start") ? placement.replace("start", "end") : placement.replace("end", "start");
   }
   var lrPlacement = ["left", "right"];
   var rlPlacement = ["right", "left"];
@@ -947,7 +943,8 @@
     return list;
   }
   function getOppositePlacement(placement) {
-    return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
+    const side = getSide(placement);
+    return oppositeSideMap[side] + placement.slice(side.length);
   }
   function expandPaddingObject(padding) {
     return {
@@ -1097,6 +1094,7 @@
       right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
     };
   }
+  var MAX_RESET_COUNT = 50;
   var computePosition = async (reference, floating, config) => {
     const {
       placement = "bottom",
@@ -1104,7 +1102,10 @@
       middleware = [],
       platform: platform2
     } = config;
-    const validMiddleware = middleware.filter(Boolean);
+    const platformWithDetectOverflow = platform2.detectOverflow ? platform2 : {
+      ...platform2,
+      detectOverflow
+    };
     const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
     let rects = await platform2.getElementRects({
       reference,
@@ -1116,14 +1117,17 @@
       y
     } = computeCoordsFromPlacement(rects, placement, rtl);
     let statefulPlacement = placement;
-    let middlewareData = {};
     let resetCount = 0;
-    for (let i = 0; i < validMiddleware.length; i++) {
-      var _platform$detectOverf;
+    const middlewareData = {};
+    for (let i = 0; i < middleware.length; i++) {
+      const currentMiddleware = middleware[i];
+      if (!currentMiddleware) {
+        continue;
+      }
       const {
         name,
         fn
-      } = validMiddleware[i];
+      } = currentMiddleware;
       const {
         x: nextX,
         y: nextY,
@@ -1137,10 +1141,7 @@
         strategy,
         middlewareData,
         rects,
-        platform: {
-          ...platform2,
-          detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
-        },
+        platform: platformWithDetectOverflow,
         elements: {
           reference,
           floating
@@ -1148,14 +1149,11 @@
       });
       x = nextX != null ? nextX : x;
       y = nextY != null ? nextY : y;
-      middlewareData = {
-        ...middlewareData,
-        [name]: {
-          ...middlewareData[name],
-          ...data
-        }
+      middlewareData[name] = {
+        ...middlewareData[name],
+        ...data
       };
-      if (reset && resetCount <= 50) {
+      if (reset && resetCount < MAX_RESET_COUNT) {
         resetCount++;
         if (typeof reset === "object") {
           if (reset.placement) {
@@ -1617,7 +1615,6 @@
     }
     return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
   }
-  var invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
   function isOverflowElement(element) {
     const {
       overflow,
@@ -1625,29 +1622,31 @@
       overflowY,
       display
     } = getComputedStyle2(element);
-    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== "inline" && display !== "contents";
   }
-  var tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
   function isTableElement(element) {
-    return tableElements.has(getNodeName(element));
+    return /^(table|td|th)$/.test(getNodeName(element));
   }
-  var topLayerSelectors = [":popover-open", ":modal"];
   function isTopLayer(element) {
-    return topLayerSelectors.some((selector) => {
-      try {
-        return element.matches(selector);
-      } catch (_e) {
-        return false;
+    try {
+      if (element.matches(":popover-open")) {
+        return true;
       }
-    });
+    } catch (_e) {
+    }
+    try {
+      return element.matches(":modal");
+    } catch (_e) {
+      return false;
+    }
   }
-  var transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
-  var willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
-  var containValues = ["paint", "layout", "strict", "content"];
+  var willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+  var containRe = /paint|layout|strict|content/;
+  var isNotNone = (value) => !!value && value !== "none";
+  var isWebKitValue;
   function isContainingBlock(elementOrCss) {
-    const webkit = isWebKit();
     const css = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
-    return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
+    return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || "") || containRe.test(css.contain || "");
   }
   function getContainingBlock(element) {
     let currentNode = getParentNode(element);
@@ -1662,12 +1661,13 @@
     return null;
   }
   function isWebKit() {
-    if (typeof CSS === "undefined" || !CSS.supports) return false;
-    return CSS.supports("-webkit-backdrop-filter", "none");
+    if (isWebKitValue == null) {
+      isWebKitValue = typeof CSS !== "undefined" && CSS.supports && CSS.supports("-webkit-backdrop-filter", "none");
+    }
+    return isWebKitValue;
   }
-  var lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
   function isLastTraversableNode(node) {
-    return lastTraversableNodeNames.has(getNodeName(node));
+    return /^(html|body|#document)$/.test(getNodeName(node));
   }
   function getComputedStyle2(element) {
     return getWindow(element).getComputedStyle(element);
@@ -1721,8 +1721,9 @@
     if (isBody) {
       const frameElement = getFrameElement(win);
       return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+    } else {
+      return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
     }
-    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
   }
   function getFrameElement(win) {
     return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
@@ -1886,7 +1887,7 @@
       if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
         scroll = getNodeScroll(offsetParent);
       }
-      if (isHTMLElement(offsetParent)) {
+      if (isOffsetParentAnElement) {
         const offsetRect = getBoundingClientRect(offsetParent);
         scale = getScale(offsetParent);
         offsets.x = offsetRect.x + offsetParent.clientLeft;
@@ -1960,7 +1961,6 @@
       y
     };
   }
-  var absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
   function getInnerBoundingClientRect(element, strategy) {
     const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
     const top2 = clientRect.top + element.clientTop;
@@ -2018,7 +2018,7 @@
       if (!currentNodeIsContaining && computedStyle.position === "fixed") {
         currentContainingBlockComputedStyle = null;
       }
-      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === "absolute" || currentContainingBlockComputedStyle.position === "fixed") || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
       if (shouldDropCurrentNode) {
         result = result.filter((ancestor) => ancestor !== currentNode);
       } else {
@@ -2038,20 +2038,23 @@
     } = _ref;
     const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
     const clippingAncestors = [...elementClippingAncestors, rootBoundary];
-    const firstClippingAncestor = clippingAncestors[0];
-    const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
-      const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
-      accRect.top = max(rect.top, accRect.top);
-      accRect.right = min(rect.right, accRect.right);
-      accRect.bottom = min(rect.bottom, accRect.bottom);
-      accRect.left = max(rect.left, accRect.left);
-      return accRect;
-    }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+    const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+    let top2 = firstRect.top;
+    let right = firstRect.right;
+    let bottom = firstRect.bottom;
+    let left = firstRect.left;
+    for (let i = 1; i < clippingAncestors.length; i++) {
+      const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+      top2 = max(rect.top, top2);
+      right = min(rect.right, right);
+      bottom = min(rect.bottom, bottom);
+      left = max(rect.left, left);
+    }
     return {
-      width: clippingRect.right - clippingRect.left,
-      height: clippingRect.bottom - clippingRect.top,
-      x: clippingRect.left,
-      y: clippingRect.top
+      width: right - left,
+      height: bottom - top2,
+      x: left,
+      y: top2
     };
   }
   function getDimensions(element) {
@@ -2260,7 +2263,7 @@
       animationFrame = false
     } = options;
     const referenceEl = unwrapElement(reference);
-    const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
+    const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...floating ? getOverflowAncestors(floating) : []] : [];
     ancestors.forEach((ancestor) => {
       ancestorScroll && ancestor.addEventListener("scroll", update, {
         passive: true
@@ -2273,7 +2276,7 @@
     if (elementResize) {
       resizeObserver = new ResizeObserver((_ref) => {
         let [firstEntry] = _ref;
-        if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
           resizeObserver.unobserve(floating);
           cancelAnimationFrame(reobserveFrame);
           reobserveFrame = requestAnimationFrame(() => {
@@ -2286,7 +2289,9 @@
       if (referenceEl && !animationFrame) {
         resizeObserver.observe(referenceEl);
       }
-      resizeObserver.observe(floating);
+      if (floating) {
+        resizeObserver.observe(floating);
+      }
     }
     let frameId;
     let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -7330,7 +7335,7 @@
       el.setAttribute("data-slot", "sidebar-header");
     });
     Alpine.directive("h-sidebar-content", (el) => {
-      el.classList.add("vbox", "min-h-0", "flex-1", "gap-2", "overflow-auto", "group-data-[collapsed=true]/sidebar:overflow-hidden");
+      el.classList.add("vbox", "min-h-0", "flex-1", "overflow-auto", "scrollbar-none");
       el.setAttribute("data-slot", "sidebar-content");
     });
     Alpine.directive("h-sidebar-group", (el, { expression, modifiers }, { effect, evaluate: evaluate2, evaluateLater, Alpine: Alpine2 }) => {
@@ -7654,13 +7659,16 @@
     });
     Alpine.directive("h-sidebar-menu-skeleton", (el, { modifiers }) => {
       el.classList.add("flex", "h-8", "items-center", "gap-2", "rounded-md", "px-2");
+      const skeleton = document.createElement("div");
+      skeleton.classList.add("h-4", "flex-1", "bg-sidebar-secondary", "animate-pulse", "rounded-md");
       if (modifiers.includes("icon")) {
+        skeleton.classList.add("group-data-[collapsed=true]/sidebar:!hidden");
         const icon = document.createElement("div");
         icon.classList.add("size-4", "rounded-md", "bg-sidebar-secondary", "animate-pulse", "rounded-md");
         el.appendChild(icon);
+      } else {
+        skeleton.classList.add("group-data-[collapsed=true]/sidebar:!w-4", "group-data-[collapsed=true]/sidebar:!max-w-4");
       }
-      const skeleton = document.createElement("div");
-      skeleton.classList.add("h-4", "flex-1", "bg-sidebar-secondary", "animate-pulse", "rounded-md");
       skeleton.style.maxWidth = `${Math.floor(Math.random() * 40) + 50}%`;
       el.appendChild(skeleton);
       el.setAttribute("data-slot", "sidebar-menu-skeleton");
@@ -7911,6 +7919,10 @@
           refreshGutters();
           queueLayout();
         },
+        gutterHidden() {
+          refreshGutters();
+          queueLayout();
+        },
         panelChange() {
           queueLayout();
         },
@@ -7949,6 +7961,7 @@
       el.classList.add("flex", "shrink", "grow-0", "box-border", "min-w-0", "min-h-0", "overflow-visible");
       el.setAttribute("tabindex", "-1");
       el.setAttribute("data-slot", "split-panel");
+      let gutterless = el.getAttribute("data-gutterless") === "true";
       const gutter = document.createElement("span");
       gutter.setAttribute("data-slot", "split-gutter");
       gutter.setAttribute("aria-disabled", el.getAttribute("data-locked") === "true");
@@ -8070,7 +8083,7 @@
           }
         },
         setGutter(last) {
-          if (this.hidden || last) {
+          if (this.hidden || gutterless || last) {
             gutter.remove();
           } else if (!gutter.parentElement) {
             el.after(gutter);
@@ -8184,7 +8197,10 @@
       };
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
-          if (mutation.attributeName === "data-hidden") {
+          if (mutation.attributeName === "data-gutterless") {
+            gutterless = el.getAttribute("data-gutterless") === "true";
+            split._h_split.gutterHidden();
+          } else if (mutation.attributeName === "data-hidden") {
             panel.hidden = el.getAttribute("data-hidden") === "true";
             if (panel.hidden) {
               el.classList.add("hidden");
@@ -8203,7 +8219,7 @@
           }
         });
       });
-      observer.observe(el, { attributes: true, attributeFilter: ["data-hidden", "data-locked", "data-collapse"] });
+      observer.observe(el, { attributes: true, attributeFilter: ["data-hidden", "data-locked", "data-collapse", "data-gutterless"] });
       cleanup(() => {
         gutter.remove();
         gutter.removeEventListener("pointerdown", drag);
@@ -9561,7 +9577,7 @@
       el.setAttribute("data-slot", "toolbar-image");
     });
     Alpine.directive("h-toolbar-title", (el) => {
-      el.classList.add("text", "[[data-size=sm]_&]:text-sm", "[[data-size=md]_&]:text-sm", "first:pl-2", "font-medium", "whitespace-nowrap", "text-ellipsis", "overflow-hidden");
+      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.setAttribute("data-slot", "toolbar-title");
     });
     Alpine.directive("h-toolbar-spacer", (el) => {
@@ -10004,7 +10020,7 @@
   }
 
   // package.json
-  var version = "1.4.0";
+  var version = "1.4.2";
 
   // src/index.js
   window.Harmonia = { getBreakpointListener, addColorSchemeListener, getColorScheme, removeColorSchemeListener, setColorScheme, version };