@vanduo-oss/framework 1.4.0 → 1.4.2

package/dist/vanduo.js

@@ -1,4 +1,4 @@
-/*! Vanduo v1.4.0 | Built: 2026-05-20T14:51:00.085Z | git:46420b0 | development */
+/*! Vanduo v1.4.2 | Built: 2026-05-23T19:59:36.731Z | git:adbe750 | development */
 (() => {
   // js/utils/lifecycle.js
   (function() {
@@ -176,7 +176,7 @@
   // js/vanduo.js
   (function() {
     "use strict";
-    const VANDUO_VERSION = true ? "1.4.0" : "0.0.0-dev";
+    const VANDUO_VERSION = true ? "1.4.2" : "0.0.0-dev";
     const hasOwn = Object.prototype.hasOwnProperty;
     const Vanduo2 = {
       version: VANDUO_VERSION,
@@ -2094,7 +2094,7 @@
           this.caption.style.display = "none";
         }
         const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
-        document.body.style.setProperty("--scrollbar-width", `${scrollbarWidth}px`);
+        document.body.style.setProperty("--vd-scrollbar-width", `${scrollbarWidth}px`);
         document.body.classList.add("body-image-box-open");
         this.backdrop.classList.add("is-visible");
         this.backdrop.focus();
@@ -2118,7 +2118,7 @@
         this.isOpen = false;
         this.backdrop.classList.remove("is-visible");
         document.body.classList.remove("body-image-box-open");
-        document.body.style.removeProperty("--scrollbar-width");
+        document.body.style.removeProperty("--vd-scrollbar-width");
         if (this.currentTrigger) {
           this.currentTrigger.focus();
           this.currentTrigger.dispatchEvent(new CustomEvent("imageBox:close", { bubbles: true }));
@@ -2553,7 +2553,7 @@
        */
       getBreakpoint: function() {
         const root = getComputedStyle(document.documentElement);
-        const breakpointValue = root.getPropertyValue("--breakpoint-lg").trim();
+        const breakpointValue = root.getPropertyValue("--vd-breakpoint-lg").trim();
         const parsed = parseInt(breakpointValue, 10);
         return isNaN(parsed) ? 992 : parsed;
       },
@@ -3202,7 +3202,7 @@
         }
         value = Math.max(0, Math.min(100, value));
         if (animate) {
-          el.style.transition = "width var(--transition-duration-slow) var(--transition-ease)";
+          el.style.transition = "width var(--vd-transition-duration-slow) var(--vd-transition-ease)";
         } else {
           el.style.transition = "none";
           setTimeout(() => {
@@ -4478,7 +4478,7 @@
         }
         this.state.radius = radius;
         document.documentElement.setAttribute("data-radius", radius);
-        document.documentElement.style.setProperty("--radius-scale", radius);
+        document.documentElement.style.setProperty("--vd-radius-scale", radius);
         this.savePreference(this.STORAGE_KEYS.RADIUS, radius);
         this.dispatchEvent("radius-change", { radius });
       },
@@ -4708,11 +4708,11 @@
         };
         let primarySwatches = "";
         for (const [key, value] of Object.entries(this.PRIMARY_COLORS)) {
-          primarySwatches += `<button class="tc-color-swatch${key === this.state.primary ? " is-active" : ""}" data-color="${esc(key)}" style="--swatch-color: ${safeColor(value.color)}" title="${esc(value.name)}"></button>`;
+          primarySwatches += `<button class="tc-color-swatch${key === this.state.primary ? " is-active" : ""}" data-color="${esc(key)}" style="--vd-swatch-color: ${safeColor(value.color)}" title="${esc(value.name)}"></button>`;
         }
         let neutralSwatches = "";
         for (const [key, value] of Object.entries(this.NEUTRAL_COLORS)) {
-          neutralSwatches += `<button class="tc-neutral-swatch${key === this.state.neutral ? " is-active" : ""}" data-neutral="${esc(key)}" style="--swatch-color: ${safeColor(value.color)}" title="${esc(value.name)}"><span>${esc(value.name)}</span></button>`;
+          neutralSwatches += `<button class="tc-neutral-swatch${key === this.state.neutral ? " is-active" : ""}" data-neutral="${esc(key)}" style="--vd-swatch-color: ${safeColor(value.color)}" title="${esc(value.name)}"><span>${esc(value.name)}</span></button>`;
         }
         let radiusButtons = "";
         this.RADIUS_OPTIONS.forEach((r) => {
@@ -7440,7 +7440,7 @@
         }
         el.classList.add("is-morphing");
         let duration = MORPH_DURATION_MS;
-        const custom = getComputedStyle(el).getPropertyValue("--morph-duration");
+        const custom = getComputedStyle(el).getPropertyValue("--vd-morph-duration");
         if (custom) {
           const parsed = parseFloat(custom);
           if (!isNaN(parsed)) duration = parsed * (custom.indexOf("ms") !== -1 ? 1 : 1e3);
@@ -8360,7 +8360,7 @@
         const sentinel = document.createElement("div");
         sentinel.style.cssText = "display:block;height:1px;margin-bottom:-1px;visibility:hidden;pointer-events:none;";
         el.parentNode.insertBefore(sentinel, el);
-        el.style.setProperty("--affix-top-offset", offset + "px");
+        el.style.setProperty("--vd-affix-top-offset", offset + "px");
         function stick() {
           if (isStuck) return;
           isStuck = true;
@@ -8406,7 +8406,7 @@
           },
           () => {
             el.classList.remove("is-stuck");
-            el.style.removeProperty("--affix-top-offset");
+            el.style.removeProperty("--vd-affix-top-offset");
           }
         );
         this.instances.set(el, { cleanup, observer, sentinel, scrollParent });
@@ -8934,6 +8934,27 @@
       x.setDate(x.getDate() + (6 - day));
       return x;
     }
+    function positionAnchoredPopup(anchor, popup, gap) {
+      const padding = 8;
+      const offset = gap != null ? gap : 4;
+      const rect = anchor.getBoundingClientRect();
+      popup.style.minWidth = Math.max(rect.width, 0) + "px";
+      let top = rect.bottom + offset;
+      let left = rect.left;
+      popup.style.top = top + "px";
+      popup.style.left = left + "px";
+      const popRect = popup.getBoundingClientRect();
+      if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+        top = rect.top - popRect.height - offset;
+        popup.style.top = top + "px";
+      }
+      const alignedRect = popup.getBoundingClientRect();
+      left = rect.left;
+      if (left + alignedRect.width > window.innerWidth - padding) {
+        left = window.innerWidth - alignedRect.width - padding;
+      }
+      popup.style.left = Math.max(padding, left) + "px";
+    }
     const Datepicker = {
       instances: /* @__PURE__ */ new Map(),
       init: function(root) {
@@ -9015,7 +9036,7 @@
         wrapper.style.display = "inline-block";
         input.parentNode.insertBefore(wrapper, input);
         wrapper.appendChild(input);
-        wrapper.appendChild(popup);
+        document.body.appendChild(popup);
         const isSameDay = (a, b) => a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
         const selectDate = (date) => {
           selectedDate = date;
@@ -9245,6 +9266,9 @@
             }
             popup.appendChild(grid);
           }
+          if (popup.classList.contains("is-open")) {
+            requestAnimationFrame(positionPopup);
+          }
         };
         const handleGridKeydown = (e) => {
           if (!popup.classList.contains("is-open") || viewMode !== "days") return;
@@ -9312,6 +9336,13 @@
           render();
           requestAnimationFrame(focusFocusedDay);
         };
+        const positionPopup = () => {
+          if (!popup.classList.contains("is-open")) return;
+          positionAnchoredPopup(input, popup);
+        };
+        const repositionHandler = () => {
+          positionPopup();
+        };
         const open = () => {
           viewMode = "days";
           if (selectedDate) {
@@ -9329,7 +9360,10 @@
           render();
           popup.classList.add("is-open");
           input.setAttribute("aria-expanded", "true");
-          requestAnimationFrame(focusFocusedDay);
+          requestAnimationFrame(() => {
+            positionPopup();
+            focusFocusedDay();
+          });
         };
         const close = () => {
           popup.classList.remove("is-open");
@@ -9344,7 +9378,7 @@
           open();
         };
         const outsideHandler = (e) => {
-          if (!wrapper.contains(e.target)) close();
+          if (!input.contains(e.target) && !popup.contains(e.target)) close();
         };
         const escHandler = (e) => {
           if (e.key === "Escape" && popup.classList.contains("is-open")) {
@@ -9357,6 +9391,8 @@
         document.addEventListener("click", outsideHandler, true);
         document.addEventListener("keydown", escHandler);
         popup.addEventListener("keydown", handleGridKeydown);
+        window.addEventListener("resize", repositionHandler);
+        window.addEventListener("scroll", repositionHandler, true);
         input.setAttribute("aria-haspopup", "dialog");
         input.setAttribute("aria-expanded", "false");
         input.setAttribute("autocomplete", "off");
@@ -9364,7 +9400,10 @@
           () => input.removeEventListener("focus", focusHandler),
           () => document.removeEventListener("click", outsideHandler, true),
           () => document.removeEventListener("keydown", escHandler),
-          () => popup.removeEventListener("keydown", handleGridKeydown)
+          () => popup.removeEventListener("keydown", handleGridKeydown),
+          () => window.removeEventListener("resize", repositionHandler),
+          () => window.removeEventListener("scroll", repositionHandler, true),
+          () => popup.remove()
         );
         this.instances.set(input, { cleanup, open, close, popup });
       },
@@ -9387,6 +9426,27 @@
   // js/components/timepicker.js
   (function() {
     "use strict";
+    function positionAnchoredPopup(anchor, popup, gap) {
+      const padding = 8;
+      const offset = gap != null ? gap : 4;
+      const rect = anchor.getBoundingClientRect();
+      popup.style.minWidth = Math.max(rect.width, 0) + "px";
+      let top = rect.bottom + offset;
+      let left = rect.left;
+      popup.style.top = top + "px";
+      popup.style.left = left + "px";
+      const popRect = popup.getBoundingClientRect();
+      if (popRect.bottom > window.innerHeight - padding && rect.top - popRect.height > padding) {
+        top = rect.top - popRect.height - offset;
+        popup.style.top = top + "px";
+      }
+      const alignedRect = popup.getBoundingClientRect();
+      left = rect.left;
+      if (left + alignedRect.width > window.innerWidth - padding) {
+        left = window.innerWidth - alignedRect.width - padding;
+      }
+      popup.style.left = Math.max(padding, left) + "px";
+    }
     const Timepicker = {
       instances: /* @__PURE__ */ new Map(),
       init: function(root) {
@@ -9411,7 +9471,7 @@
         const popup = document.createElement("div");
         popup.className = "vd-timepicker-popup";
         popup.setAttribute("role", "listbox");
-        wrapper.appendChild(popup);
+        document.body.appendChild(popup);
         const times = [];
         for (let h = 0; h < 24; h++) {
           for (let m = 0; m < 60; m += step) {
@@ -9451,12 +9511,22 @@
             popup.appendChild(item);
           });
         };
+        const positionPopup = () => {
+          if (!popup.classList.contains("is-open")) return;
+          positionAnchoredPopup(input, popup);
+        };
+        const repositionHandler = () => {
+          positionPopup();
+        };
         const open = () => {
           render();
           popup.classList.add("is-open");
           input.setAttribute("aria-expanded", "true");
-          const selected = popup.querySelector(".is-selected");
-          if (selected) selected.scrollIntoView({ block: "center" });
+          requestAnimationFrame(() => {
+            positionPopup();
+            const selected = popup.querySelector(".is-selected");
+            if (selected) selected.scrollIntoView({ block: "center" });
+          });
         };
         const close = () => {
           popup.classList.remove("is-open");
@@ -9464,7 +9534,7 @@
         };
         const focusHandler = () => open();
         const outsideHandler = (e) => {
-          if (!wrapper.contains(e.target)) close();
+          if (!input.contains(e.target) && !popup.contains(e.target)) close();
         };
         const escHandler = (e) => {
           if (e.key === "Escape") close();
@@ -9472,6 +9542,8 @@
         input.addEventListener("focus", focusHandler);
         document.addEventListener("click", outsideHandler, true);
         document.addEventListener("keydown", escHandler);
+        window.addEventListener("resize", repositionHandler);
+        window.addEventListener("scroll", repositionHandler, true);
         input.setAttribute("aria-haspopup", "listbox");
         input.setAttribute("aria-expanded", "false");
         input.setAttribute("autocomplete", "off");
@@ -9479,7 +9551,10 @@
         cleanup.push(
           () => input.removeEventListener("focus", focusHandler),
           () => document.removeEventListener("click", outsideHandler, true),
-          () => document.removeEventListener("keydown", escHandler)
+          () => document.removeEventListener("keydown", escHandler),
+          () => window.removeEventListener("resize", repositionHandler),
+          () => window.removeEventListener("scroll", repositionHandler, true),
+          () => popup.remove()
         );
         this.instances.set(input, { cleanup, open, close });
       },
@@ -10282,8 +10357,8 @@
       const max = parseFloat(input.max) || 1;
       const val = parseFloat(input.value) || 0;
       const pct = (val - min) / (max - min) * 100;
-      input.style.setProperty("--fill", pct + "%");
-      input.style.backgroundImage = "linear-gradient(to right, var(--music-player-track-fill, currentColor) 0%, var(--music-player-track-fill, currentColor) " + pct + "%, var(--music-player-track-bg, #ccc) " + pct + "%, var(--music-player-track-bg, #ccc) 100%)";
+      input.style.setProperty("--vd-fill", pct + "%");
+      input.style.backgroundImage = "linear-gradient(to right, var(--vd-music-player-track-fill, currentColor) 0%, var(--vd-music-player-track-fill, currentColor) " + pct + "%, var(--vd-music-player-track-bg, #ccc) " + pct + "%, var(--vd-music-player-track-bg, #ccc) 100%)";
     }
     function icon(name) {
       const el = document.createElement("i");
@@ -10968,8 +11043,8 @@
           "vd-music-player-floating-bottom-right",
           "is-position-custom"
         );
-        container.style.removeProperty("--music-player-floating-top");
-        container.style.removeProperty("--music-player-floating-left");
+        container.style.removeProperty("--vd-music-player-floating-top");
+        container.style.removeProperty("--vd-music-player-floating-left");
         if (r && r.parent && r.parent.isConnected) {
           r.parent.insertBefore(container, r.next);
         }
@@ -11061,8 +11136,8 @@
        */
       _setCornerPosition: function(container, which) {
         container.classList.remove("is-position-custom", "vd-music-player-floating-bottom-left", "vd-music-player-floating-bottom-right");
-        container.style.removeProperty("--music-player-floating-top");
-        container.style.removeProperty("--music-player-floating-left");
+        container.style.removeProperty("--vd-music-player-floating-top");
+        container.style.removeProperty("--vd-music-player-floating-left");
         if (which === "bottom-left") {
           container.classList.add("vd-music-player-floating-bottom-left");
         } else {
@@ -11077,8 +11152,8 @@
       _setCustomPositionFromRect: function(container, left, top) {
         container.classList.remove("vd-music-player-floating-bottom-left", "vd-music-player-floating-bottom-right");
         container.classList.add("is-position-custom");
-        container.style.setProperty("--music-player-floating-left", left + "px");
-        container.style.setProperty("--music-player-floating-top", top + "px");
+        container.style.setProperty("--vd-music-player-floating-left", left + "px");
+        container.style.setProperty("--vd-music-player-floating-top", top + "px");
       },
       /**
        * @param {HTMLElement} container