arekui 1.0.0 → 1.0.2

package/arekui.js

@@ -1,450 +1,450 @@
-/*!
- * Arekui v1.0.0 — optional vanilla JS (no dependencies).
- * data-ar-* driven behaviors: theme toggle, modal, drawer, tabs, dropdown, accordion, toast, rating, popover, file upload, scroll-to-top.
- */
-(() => {
-  var STORAGE_KEY = "arekui-theme";
-
-  var THEMES_LIGHT_DARK = ["light", "dark"];
-  var THEMES_DEFAULT_NEO = ["light", "neo"];
-
-  function getTheme() {
-    return document.documentElement.getAttribute("data-theme");
-  }
-
-  function setTheme(theme) {
-    document.documentElement.setAttribute("data-theme", theme);
-    document.documentElement.classList.toggle("dark", theme === "dark");
-  }
-
-  function initTheme() {
-    var stored = localStorage.getItem(STORAGE_KEY);
-    var allThemes = THEMES_LIGHT_DARK.concat(THEMES_DEFAULT_NEO);
-    if (stored && allThemes.indexOf(stored) !== -1) {
-      setTheme(stored);
-    } else {
-      var prefersDark = window.matchMedia(
-        "(prefers-color-scheme: dark)",
-      ).matches;
-      setTheme(prefersDark ? "dark" : "light");
-    }
-  }
-
-  function syncToggles() {
-    var current = getTheme();
-    document.querySelectorAll("[data-ar-theme-toggle]").forEach((el) => {
-      if (el.matches('input[type="checkbox"]')) {
-        el.checked = current === "dark";
-      } else {
-        el.setAttribute("aria-pressed", String(current === "dark"));
-      }
-    });
-    document.querySelectorAll("[data-ar-neo-toggle]").forEach((el) => {
-      var isNeo = current === "neo";
-      if (el.matches('input[type="checkbox"]')) {
-        el.checked = isNeo;
-      } else {
-        el.setAttribute("aria-pressed", String(isNeo));
-        el.textContent = isNeo ? "Default" : "Neo";
-      }
-    });
-  }
-
-  function initThemeToggle() {
-    document.addEventListener("click", (e) => {
-      var toggle = e.target.closest("[data-ar-theme-toggle]");
-      if (!toggle) return;
-      var current = getTheme() || "light";
-      var idx = THEMES_LIGHT_DARK.indexOf(current);
-      var next = THEMES_LIGHT_DARK[(idx + 1) % THEMES_LIGHT_DARK.length];
-      setTheme(next);
-      localStorage.setItem(STORAGE_KEY, next);
-      syncToggles();
-    });
-  }
-
-  function initNeoToggle() {
-    document.addEventListener("click", (e) => {
-      var toggle = e.target.closest("[data-ar-neo-toggle]");
-      if (!toggle) return;
-      var current = getTheme() || "light";
-      var idx = THEMES_DEFAULT_NEO.indexOf(current);
-      var next = THEMES_DEFAULT_NEO[(idx + 1) % THEMES_DEFAULT_NEO.length];
-      setTheme(next);
-      localStorage.setItem(STORAGE_KEY, next);
-      syncToggles();
-    });
-  }
-
-  function initModals() {
-    document.querySelectorAll("[data-ar-open]").forEach((opener) => {
-      opener.addEventListener("click", (e) => {
-        e.preventDefault();
-        var target = document.getElementById(
-          opener.getAttribute("data-ar-open"),
-        );
-        if (target && typeof target.showModal === "function")
-          target.showModal();
-      });
-    });
-    document.querySelectorAll("[data-ar-close]").forEach((closer) => {
-      closer.addEventListener("click", () => {
-        var modal = closer.closest("dialog");
-        if (modal && typeof modal.close === "function") modal.close();
-      });
-    });
-    document
-      .querySelectorAll("dialog[data-ar-backdrop-close]")
-      .forEach((modal) => {
-        modal.addEventListener("click", (e) => {
-          if (e.target === modal) modal.close();
-        });
-      });
-  }
-
-  function initDrawers() {
-    document.querySelectorAll("[data-ar-drawer-toggle]").forEach((btn) => {
-      btn.addEventListener("click", () => {
-        var id = btn.getAttribute("data-ar-drawer-toggle");
-        var checkbox = document.getElementById(id);
-        if (checkbox) checkbox.checked = !checkbox.checked;
-      });
-    });
-  }
-
-  function initTabs() {
-    document.querySelectorAll("[data-ar-tab]").forEach((tab) => {
-      tab.addEventListener("click", () => {
-        var group = tab.closest(".ar-tabs");
-        if (!group) return;
-        group.querySelectorAll("[data-ar-tab]").forEach((t) => {
-          t.classList.remove("ar-tab-active");
-        });
-        tab.classList.add("ar-tab-active");
-        var panelId = tab.getAttribute("data-ar-tab");
-        var groupPanel = group.getAttribute("data-ar-tabs-panel");
-        if (groupPanel) {
-          document.querySelectorAll("[" + groupPanel + "]").forEach((p) => {
-            p.style.display = p.id === panelId ? "" : "none";
-          });
-        }
-      });
-    });
-  }
-
-  function closeDropdown(dropdown) {
-    dropdown.classList.remove("ar-dropdown-open");
-    var trigger = dropdown.querySelector(":scope > button, :scope > a");
-    if (trigger) trigger.blur();
-  }
-
-  function initDropdowns() {
-    document.querySelectorAll(".ar-dropdown").forEach((dropdown) => {
-      var content = dropdown.querySelector(".ar-dropdown-content");
-      if (!content) return;
-
-      dropdown.addEventListener("click", (e) => {
-        if (content.contains(e.target)) {
-          closeDropdown(dropdown);
-          return;
-        }
-        if (dropdown.classList.contains("ar-dropdown-open")) {
-          closeDropdown(dropdown);
-        } else {
-          dropdown.classList.add("ar-dropdown-open");
-        }
-      });
-    });
-
-    document.addEventListener("click", (e) => {
-      document
-        .querySelectorAll(".ar-dropdown.ar-dropdown-open")
-        .forEach((dd) => {
-          if (!dd.contains(e.target)) dd.classList.remove("ar-dropdown-open");
-        });
-    });
-
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") {
-        document
-          .querySelectorAll(".ar-dropdown.ar-dropdown-open")
-          .forEach(closeDropdown);
-      }
-    });
-  }
-
-  function initAccordion() {
-    document.querySelectorAll(".ar-accordion details").forEach((d) => {
-      var first = d.querySelector("summary");
-      if (first)
-        first.addEventListener("click", () => {
-          if (d.getAttribute("data-ar-exclusive") !== null) return;
-          var parent = d.closest(".ar-accordion");
-          if (!parent) return;
-          parent.querySelectorAll("details[open]").forEach((other) => {
-            if (other !== d) other.removeAttribute("open");
-          });
-        });
-    });
-  }
-
-  var toastContainers = {};
-
-  function getToastContainer(position) {
-    if (toastContainers[position]) return toastContainers[position];
-    var container = document.createElement("div");
-    container.className = "ar-toast-container";
-    container.setAttribute("data-ar-toast-position", position);
-    document.body.appendChild(container);
-    toastContainers[position] = container;
-    return container;
-  }
-
-  function toast(message, options) {
-    var opts = options || {};
-    var type = opts.type || "";
-    var duration = typeof opts.duration === "number" ? opts.duration : 4000;
-    var position = opts.position || "top-right";
-    var closable = opts.closable !== false;
-    var icon = opts.icon || null;
-
-    var container = getToastContainer(position);
-    var el = document.createElement("div");
-    el.className = "ar-toast" + (type ? " ar-toast-" + type : "");
-    el.style.position = "relative";
-
-    if (icon) {
-      var iconEl = document.createElement("span");
-      iconEl.className = "ar-toast-icon";
-      iconEl.textContent = icon;
-      el.appendChild(iconEl);
-    }
-
-    var msgEl = document.createElement("span");
-    msgEl.className = "ar-toast-message";
-    msgEl.textContent = message;
-    el.appendChild(msgEl);
-
-    if (closable) {
-      var closeBtn = document.createElement("button");
-      closeBtn.className = "ar-toast-close";
-      closeBtn.textContent = "\u2715";
-      closeBtn.setAttribute("aria-label", "Close");
-      closeBtn.addEventListener("click", () => {
-        dismissToast(el);
-      });
-      el.appendChild(closeBtn);
-    }
-
-    if (duration > 0) {
-      var progress = document.createElement("div");
-      progress.className = "ar-toast-progress";
-      progress.style.animationDuration = duration + "ms";
-      el.appendChild(progress);
-    }
-
-    container.appendChild(el);
-
-    var timer;
-    if (duration > 0) {
-      timer = setTimeout(() => {
-        dismissToast(el);
-      }, duration);
-    }
-
-    el.addEventListener("mouseenter", () => {
-      if (timer) clearTimeout(timer);
-      if (el.querySelector(".ar-toast-progress")) {
-        el.querySelector(".ar-toast-progress").style.animationPlayState =
-          "paused";
-      }
-    });
-    el.addEventListener("mouseleave", () => {
-      if (duration > 0) {
-        var remaining = duration * 0.3;
-        timer = setTimeout(() => {
-          dismissToast(el);
-        }, remaining);
-        if (el.querySelector(".ar-toast-progress")) {
-          el.querySelector(".ar-toast-progress").style.animationPlayState =
-            "running";
-        }
-      }
-    });
-
-    return el;
-  }
-
-  function dismissToast(el) {
-    if (el.classList.contains("ar-toast-out")) return;
-    el.classList.add("ar-toast-out");
-    el.addEventListener("animationend", () => {
-      el.remove();
-    });
-  }
-
-  function initRatings() {
-    document.querySelectorAll("[data-ar-rating]").forEach((group) => {
-      var inputs = group.querySelectorAll("input");
-      inputs.forEach((input) => {
-        input.addEventListener("change", () => {
-          var event = new CustomEvent("ar-rating-change", {
-            detail: { value: Number(input.value) },
-            bubbles: true,
-          });
-          group.dispatchEvent(event);
-        });
-      });
-    });
-  }
-
-  function getRating(container) {
-    var checked = container.querySelector("input:checked");
-    return checked ? Number(checked.value) : 0;
-  }
-
-  function setRating(container, value) {
-    var input = container.querySelector('input[value="' + value + '"]');
-    if (input) {
-      input.checked = true;
-      input.dispatchEvent(new Event("change"));
-    }
-  }
-
-  function initPopovers() {
-    // Click toggle
-    document.addEventListener("click", (e) => {
-      var trigger = e.target.closest("[data-ar-popover]");
-      if (trigger) {
-        e.preventDefault();
-        var id = trigger.getAttribute("data-ar-popover");
-        var popover = id
-          ? document.getElementById(id)
-          : trigger.querySelector(".ar-popover-content");
-        if (!popover) return;
-        var wrapper =
-          popover.closest(".ar-popover") || trigger.closest(".ar-popover");
-        if (!wrapper) return;
-        document.querySelectorAll(".ar-popover-open").forEach((p) => {
-          if (p !== wrapper) p.classList.remove("ar-popover-open");
-        });
-        wrapper.classList.toggle("ar-popover-open");
-        return;
-      }
-      if (!e.target.closest(".ar-popover")) {
-        document.querySelectorAll(".ar-popover-open").forEach((p) => {
-          p.classList.remove("ar-popover-open");
-        });
-      }
-    });
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") {
-        document.querySelectorAll(".ar-popover-open").forEach((p) => {
-          p.classList.remove("ar-popover-open");
-        });
-      }
-    });
-  }
-
-  function openPopover(id) {
-    var el = document.getElementById(id);
-    if (el) {
-      var wrapper = el.closest(".ar-popover");
-      if (wrapper) wrapper.classList.add("ar-popover-open");
-    }
-  }
-
-  function closePopover(id) {
-    var el = document.getElementById(id);
-    if (el) {
-      var wrapper = el.closest(".ar-popover");
-      if (wrapper) wrapper.classList.remove("ar-popover-open");
-    }
-  }
-
-  function initFileUploads() {
-    document.querySelectorAll(".ar-file-upload").forEach((zone) => {
-      var input = zone.querySelector('input[type="file"]');
-      if (!input) return;
-      ["dragenter", "dragover"].forEach((evt) => {
-        zone.addEventListener(evt, (e) => {
-          e.preventDefault();
-          zone.classList.add("ar-file-upload-dragover");
-        });
-      });
-      ["dragleave", "drop"].forEach((evt) => {
-        zone.addEventListener(evt, (e) => {
-          e.preventDefault();
-          zone.classList.remove("ar-file-upload-dragover");
-        });
-      });
-      input.addEventListener("change", () => {
-        var event = new CustomEvent("ar-file-change", {
-          detail: { files: input.files },
-          bubbles: true,
-        });
-        zone.dispatchEvent(event);
-      });
-    });
-  }
-
-  function initScrollTop() {
-    var btns = document.querySelectorAll("[data-ar-scroll-top]");
-    if (!btns.length) return;
-
-    function toggle() {
-      var show = window.scrollY > 300;
-      btns.forEach((btn) => {
-        btn.classList.toggle("ar-scroll-top-visible", show);
-      });
-    }
-
-    window.addEventListener("scroll", toggle, { passive: true });
-    toggle();
-
-    btns.forEach((btn) => {
-      btn.addEventListener("click", () => {
-        window.scrollTo({ top: 0, behavior: "smooth" });
-      });
-    });
-  }
-
-  function init() {
-    if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", ready);
-    } else {
-      ready();
-    }
-  }
-
-  function ready() {
-    if (!getTheme()) initTheme();
-    syncToggles();
-    initThemeToggle();
-    initNeoToggle();
-    initModals();
-    initDrawers();
-    initTabs();
-    initDropdowns();
-    initAccordion();
-    initRatings();
-    initPopovers();
-    initFileUploads();
-    initScrollTop();
-  }
-
-  window.ARStyle = {
-    setTheme: setTheme,
-    getTheme: getTheme,
-    initTheme: initTheme,
-    init: init,
-    toast: toast,
-    dismissToast: dismissToast,
-    getRating: getRating,
-    setRating: setRating,
-    openPopover: openPopover,
-    closePopover: closePopover,
-  };
-
-  init();
-})();
+/*!
+ * Arekui v1.0.0 — optional vanilla JS (no dependencies).
+ * data-ar-* driven behaviors: theme toggle, modal, drawer, tabs, dropdown, accordion, toast, rating, popover, file upload, scroll-to-top.
+ */
+(() => {
+  var STORAGE_KEY = "arekui-theme";
+
+  var THEMES_LIGHT_DARK = ["light", "dark"];
+  var THEMES_DEFAULT_NEO = ["light", "neo"];
+
+  function getTheme() {
+    return document.documentElement.getAttribute("data-theme");
+  }
+
+  function setTheme(theme) {
+    document.documentElement.setAttribute("data-theme", theme);
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  }
+
+  function initTheme() {
+    var stored = localStorage.getItem(STORAGE_KEY);
+    var allThemes = THEMES_LIGHT_DARK.concat(THEMES_DEFAULT_NEO);
+    if (stored && allThemes.indexOf(stored) !== -1) {
+      setTheme(stored);
+    } else {
+      var prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      ).matches;
+      setTheme(prefersDark ? "dark" : "light");
+    }
+  }
+
+  function syncToggles() {
+    var current = getTheme();
+    document.querySelectorAll("[data-ar-theme-toggle]").forEach((el) => {
+      if (el.matches('input[type="checkbox"]')) {
+        el.checked = current === "dark";
+      } else {
+        el.setAttribute("aria-pressed", String(current === "dark"));
+      }
+    });
+    document.querySelectorAll("[data-ar-neo-toggle]").forEach((el) => {
+      var isNeo = current === "neo";
+      if (el.matches('input[type="checkbox"]')) {
+        el.checked = isNeo;
+      } else {
+        el.setAttribute("aria-pressed", String(isNeo));
+        el.textContent = isNeo ? "Default" : "Neo";
+      }
+    });
+  }
+
+  function initThemeToggle() {
+    document.addEventListener("click", (e) => {
+      var toggle = e.target.closest("[data-ar-theme-toggle]");
+      if (!toggle) return;
+      var current = getTheme() || "light";
+      var idx = THEMES_LIGHT_DARK.indexOf(current);
+      var next = THEMES_LIGHT_DARK[(idx + 1) % THEMES_LIGHT_DARK.length];
+      setTheme(next);
+      localStorage.setItem(STORAGE_KEY, next);
+      syncToggles();
+    });
+  }
+
+  function initNeoToggle() {
+    document.addEventListener("click", (e) => {
+      var toggle = e.target.closest("[data-ar-neo-toggle]");
+      if (!toggle) return;
+      var current = getTheme() || "light";
+      var idx = THEMES_DEFAULT_NEO.indexOf(current);
+      var next = THEMES_DEFAULT_NEO[(idx + 1) % THEMES_DEFAULT_NEO.length];
+      setTheme(next);
+      localStorage.setItem(STORAGE_KEY, next);
+      syncToggles();
+    });
+  }
+
+  function initModals() {
+    document.querySelectorAll("[data-ar-open]").forEach((opener) => {
+      opener.addEventListener("click", (e) => {
+        e.preventDefault();
+        var target = document.getElementById(
+          opener.getAttribute("data-ar-open"),
+        );
+        if (target && typeof target.showModal === "function")
+          target.showModal();
+      });
+    });
+    document.querySelectorAll("[data-ar-close]").forEach((closer) => {
+      closer.addEventListener("click", () => {
+        var modal = closer.closest("dialog");
+        if (modal && typeof modal.close === "function") modal.close();
+      });
+    });
+    document
+      .querySelectorAll("dialog[data-ar-backdrop-close]")
+      .forEach((modal) => {
+        modal.addEventListener("click", (e) => {
+          if (e.target === modal) modal.close();
+        });
+      });
+  }
+
+  function initDrawers() {
+    document.querySelectorAll("[data-ar-drawer-toggle]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        var id = btn.getAttribute("data-ar-drawer-toggle");
+        var checkbox = document.getElementById(id);
+        if (checkbox) checkbox.checked = !checkbox.checked;
+      });
+    });
+  }
+
+  function initTabs() {
+    document.querySelectorAll("[data-ar-tab]").forEach((tab) => {
+      tab.addEventListener("click", () => {
+        var group = tab.closest(".ar-tabs");
+        if (!group) return;
+        group.querySelectorAll("[data-ar-tab]").forEach((t) => {
+          t.classList.remove("ar-tab-active");
+        });
+        tab.classList.add("ar-tab-active");
+        var panelId = tab.getAttribute("data-ar-tab");
+        var groupPanel = group.getAttribute("data-ar-tabs-panel");
+        if (groupPanel) {
+          document.querySelectorAll("[" + groupPanel + "]").forEach((p) => {
+            p.style.display = p.id === panelId ? "" : "none";
+          });
+        }
+      });
+    });
+  }
+
+  function closeDropdown(dropdown) {
+    dropdown.classList.remove("ar-dropdown-open");
+    var trigger = dropdown.querySelector(":scope > button, :scope > a");
+    if (trigger) trigger.blur();
+  }
+
+  function initDropdowns() {
+    document.querySelectorAll(".ar-dropdown").forEach((dropdown) => {
+      var content = dropdown.querySelector(".ar-dropdown-content");
+      if (!content) return;
+
+      dropdown.addEventListener("click", (e) => {
+        if (content.contains(e.target)) {
+          closeDropdown(dropdown);
+          return;
+        }
+        if (dropdown.classList.contains("ar-dropdown-open")) {
+          closeDropdown(dropdown);
+        } else {
+          dropdown.classList.add("ar-dropdown-open");
+        }
+      });
+    });
+
+    document.addEventListener("click", (e) => {
+      document
+        .querySelectorAll(".ar-dropdown.ar-dropdown-open")
+        .forEach((dd) => {
+          if (!dd.contains(e.target)) dd.classList.remove("ar-dropdown-open");
+        });
+    });
+
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        document
+          .querySelectorAll(".ar-dropdown.ar-dropdown-open")
+          .forEach(closeDropdown);
+      }
+    });
+  }
+
+  function initAccordion() {
+    document.querySelectorAll(".ar-accordion details").forEach((d) => {
+      var first = d.querySelector("summary");
+      if (first)
+        first.addEventListener("click", () => {
+          if (d.getAttribute("data-ar-exclusive") !== null) return;
+          var parent = d.closest(".ar-accordion");
+          if (!parent) return;
+          parent.querySelectorAll("details[open]").forEach((other) => {
+            if (other !== d) other.removeAttribute("open");
+          });
+        });
+    });
+  }
+
+  var toastContainers = {};
+
+  function getToastContainer(position) {
+    if (toastContainers[position]) return toastContainers[position];
+    var container = document.createElement("div");
+    container.className = "ar-toast-container";
+    container.setAttribute("data-ar-toast-position", position);
+    document.body.appendChild(container);
+    toastContainers[position] = container;
+    return container;
+  }
+
+  function toast(message, options) {
+    var opts = options || {};
+    var type = opts.type || "";
+    var duration = typeof opts.duration === "number" ? opts.duration : 4000;
+    var position = opts.position || "top-right";
+    var closable = opts.closable !== false;
+    var icon = opts.icon || null;
+
+    var container = getToastContainer(position);
+    var el = document.createElement("div");
+    el.className = "ar-toast" + (type ? " ar-toast-" + type : "");
+    el.style.position = "relative";
+
+    if (icon) {
+      var iconEl = document.createElement("span");
+      iconEl.className = "ar-toast-icon";
+      iconEl.textContent = icon;
+      el.appendChild(iconEl);
+    }
+
+    var msgEl = document.createElement("span");
+    msgEl.className = "ar-toast-message";
+    msgEl.textContent = message;
+    el.appendChild(msgEl);
+
+    if (closable) {
+      var closeBtn = document.createElement("button");
+      closeBtn.className = "ar-toast-close";
+      closeBtn.textContent = "\u2715";
+      closeBtn.setAttribute("aria-label", "Close");
+      closeBtn.addEventListener("click", () => {
+        dismissToast(el);
+      });
+      el.appendChild(closeBtn);
+    }
+
+    if (duration > 0) {
+      var progress = document.createElement("div");
+      progress.className = "ar-toast-progress";
+      progress.style.animationDuration = duration + "ms";
+      el.appendChild(progress);
+    }
+
+    container.appendChild(el);
+
+    var timer;
+    if (duration > 0) {
+      timer = setTimeout(() => {
+        dismissToast(el);
+      }, duration);
+    }
+
+    el.addEventListener("mouseenter", () => {
+      if (timer) clearTimeout(timer);
+      if (el.querySelector(".ar-toast-progress")) {
+        el.querySelector(".ar-toast-progress").style.animationPlayState =
+          "paused";
+      }
+    });
+    el.addEventListener("mouseleave", () => {
+      if (duration > 0) {
+        var remaining = duration * 0.3;
+        timer = setTimeout(() => {
+          dismissToast(el);
+        }, remaining);
+        if (el.querySelector(".ar-toast-progress")) {
+          el.querySelector(".ar-toast-progress").style.animationPlayState =
+            "running";
+        }
+      }
+    });
+
+    return el;
+  }
+
+  function dismissToast(el) {
+    if (el.classList.contains("ar-toast-out")) return;
+    el.classList.add("ar-toast-out");
+    el.addEventListener("animationend", () => {
+      el.remove();
+    });
+  }
+
+  function initRatings() {
+    document.querySelectorAll("[data-ar-rating]").forEach((group) => {
+      var inputs = group.querySelectorAll("input");
+      inputs.forEach((input) => {
+        input.addEventListener("change", () => {
+          var event = new CustomEvent("ar-rating-change", {
+            detail: { value: Number(input.value) },
+            bubbles: true,
+          });
+          group.dispatchEvent(event);
+        });
+      });
+    });
+  }
+
+  function getRating(container) {
+    var checked = container.querySelector("input:checked");
+    return checked ? Number(checked.value) : 0;
+  }
+
+  function setRating(container, value) {
+    var input = container.querySelector('input[value="' + value + '"]');
+    if (input) {
+      input.checked = true;
+      input.dispatchEvent(new Event("change"));
+    }
+  }
+
+  function initPopovers() {
+    // Click toggle
+    document.addEventListener("click", (e) => {
+      var trigger = e.target.closest("[data-ar-popover]");
+      if (trigger) {
+        e.preventDefault();
+        var id = trigger.getAttribute("data-ar-popover");
+        var popover = id
+          ? document.getElementById(id)
+          : trigger.querySelector(".ar-popover-content");
+        if (!popover) return;
+        var wrapper =
+          popover.closest(".ar-popover") || trigger.closest(".ar-popover");
+        if (!wrapper) return;
+        document.querySelectorAll(".ar-popover-open").forEach((p) => {
+          if (p !== wrapper) p.classList.remove("ar-popover-open");
+        });
+        wrapper.classList.toggle("ar-popover-open");
+        return;
+      }
+      if (!e.target.closest(".ar-popover")) {
+        document.querySelectorAll(".ar-popover-open").forEach((p) => {
+          p.classList.remove("ar-popover-open");
+        });
+      }
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") {
+        document.querySelectorAll(".ar-popover-open").forEach((p) => {
+          p.classList.remove("ar-popover-open");
+        });
+      }
+    });
+  }
+
+  function openPopover(id) {
+    var el = document.getElementById(id);
+    if (el) {
+      var wrapper = el.closest(".ar-popover");
+      if (wrapper) wrapper.classList.add("ar-popover-open");
+    }
+  }
+
+  function closePopover(id) {
+    var el = document.getElementById(id);
+    if (el) {
+      var wrapper = el.closest(".ar-popover");
+      if (wrapper) wrapper.classList.remove("ar-popover-open");
+    }
+  }
+
+  function initFileUploads() {
+    document.querySelectorAll(".ar-file-upload").forEach((zone) => {
+      var input = zone.querySelector('input[type="file"]');
+      if (!input) return;
+      ["dragenter", "dragover"].forEach((evt) => {
+        zone.addEventListener(evt, (e) => {
+          e.preventDefault();
+          zone.classList.add("ar-file-upload-dragover");
+        });
+      });
+      ["dragleave", "drop"].forEach((evt) => {
+        zone.addEventListener(evt, (e) => {
+          e.preventDefault();
+          zone.classList.remove("ar-file-upload-dragover");
+        });
+      });
+      input.addEventListener("change", () => {
+        var event = new CustomEvent("ar-file-change", {
+          detail: { files: input.files },
+          bubbles: true,
+        });
+        zone.dispatchEvent(event);
+      });
+    });
+  }
+
+  function initScrollTop() {
+    var btns = document.querySelectorAll("[data-ar-scroll-top]");
+    if (!btns.length) return;
+
+    function toggle() {
+      var show = window.scrollY > 300;
+      btns.forEach((btn) => {
+        btn.classList.toggle("ar-scroll-top-visible", show);
+      });
+    }
+
+    window.addEventListener("scroll", toggle, { passive: true });
+    toggle();
+
+    btns.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        window.scrollTo({ top: 0, behavior: "smooth" });
+      });
+    });
+  }
+
+  function init() {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", ready);
+    } else {
+      ready();
+    }
+  }
+
+  function ready() {
+    if (!getTheme()) initTheme();
+    syncToggles();
+    initThemeToggle();
+    initNeoToggle();
+    initModals();
+    initDrawers();
+    initTabs();
+    initDropdowns();
+    initAccordion();
+    initRatings();
+    initPopovers();
+    initFileUploads();
+    initScrollTop();
+  }
+
+  window.ARStyle = {
+    setTheme: setTheme,
+    getTheme: getTheme,
+    initTheme: initTheme,
+    init: init,
+    toast: toast,
+    dismissToast: dismissToast,
+    getRating: getRating,
+    setRating: setRating,
+    openPopover: openPopover,
+    closePopover: closePopover,
+  };
+
+  init();
+})();