arekui 1.0.0 → 2.0.0

package/arekui.js

@@ -1,450 +1,817 @@
-/*!
- * 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 v2.0.0 — optional vanilla JS (no browser runtime dependencies).
+ * data-ar-* driven behaviors: theme toggle, modal, sidebar, tabs, dropdown, accordion, toast, rating, popover, file upload, scroll-to-top, carousel controls.
+ */
+(() => {
+  var STORAGE_KEY = "arekui-theme";
+
+  var KNOWN_THEMES = ["light", "dark", "neo", "pixel", "brutalist"];
+  var THEME_LABELS = {
+    light: "Default",
+    dark: "Dark",
+    neo: "Neo",
+    pixel: "Pixel",
+    brutalist: "Brutalist",
+  };
+
+  function getTheme() {
+    return document.documentElement.getAttribute("data-theme");
+  }
+
+  function setTheme(theme) {
+    document.documentElement.setAttribute("data-theme", theme);
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    document.dispatchEvent(
+      new CustomEvent("ar-themechange", { detail: { theme: theme } }),
+    );
+    syncToggles();
+  }
+
+  function initTheme() {
+    var stored = localStorage.getItem(STORAGE_KEY);
+    if (stored && KNOWN_THEMES.indexOf(stored) !== -1) {
+      setTheme(stored);
+    } else {
+      var prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      ).matches;
+      setTheme(prefersDark ? "dark" : "light");
+    }
+  }
+
+  function setToggleLabel(el, whenOn, whenOff, isOn) {
+    if (el.children.length > 0) return;
+    var current = (el.textContent || "").trim();
+    if (current !== whenOn && current !== whenOff) return;
+    el.textContent = isOn ? whenOn : whenOff;
+  }
+
+  function toggleCycle(el, attr, own) {
+    var other = (el.getAttribute(attr) || "").trim();
+    if (!THEME_LABELS[other] || other === own) other = "light";
+    return [other, own];
+  }
+
+  function nextTheme(cycle, current) {
+    var idx = cycle.indexOf(current);
+    return idx === -1 ? cycle[cycle.length - 1] : cycle[(idx + 1) % cycle.length];
+  }
+
+  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));
+        var cycle = toggleCycle(el, "data-ar-neo-toggle", "neo");
+        setToggleLabel(el, THEME_LABELS[cycle[0]], THEME_LABELS[cycle[1]], isNeo);
+      }
+    });
+    document.querySelectorAll("[data-ar-pixel-toggle]").forEach((el) => {
+      var isPixel = current === "pixel";
+      if (el.matches('input[type="checkbox"]')) {
+        el.checked = isPixel;
+      } else {
+        el.setAttribute("aria-pressed", String(isPixel));
+        var cycle = toggleCycle(el, "data-ar-pixel-toggle", "pixel");
+        setToggleLabel(el, THEME_LABELS[cycle[0]], THEME_LABELS[cycle[1]], isPixel);
+      }
+    });
+    document.querySelectorAll("[data-ar-brutalist-toggle]").forEach((el) => {
+      var isBrutalist = current === "brutalist";
+      if (el.matches('input[type="checkbox"]')) {
+        el.checked = isBrutalist;
+      } else {
+        el.setAttribute("aria-pressed", String(isBrutalist));
+        var cycle = toggleCycle(el, "data-ar-brutalist-toggle", "brutalist");
+        setToggleLabel(el, THEME_LABELS[cycle[0]], THEME_LABELS[cycle[1]], isBrutalist);
+      }
+    });
+  }
+
+  function initThemeToggle() {
+    document.addEventListener("click", (e) => {
+      var toggle = e.target.closest("[data-ar-theme-toggle]");
+      if (!toggle) return;
+      var current = getTheme() || "light";
+      var next = nextTheme(toggleCycle(toggle, "data-ar-theme-toggle", "dark"), current);
+      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 next = nextTheme(toggleCycle(toggle, "data-ar-neo-toggle", "neo"), current);
+      setTheme(next);
+      localStorage.setItem(STORAGE_KEY, next);
+      syncToggles();
+    });
+  }
+
+  function initPixelToggle() {
+    document.addEventListener("click", (e) => {
+      var toggle = e.target.closest("[data-ar-pixel-toggle]");
+      if (!toggle) return;
+      var current = getTheme() || "light";
+      var next = nextTheme(toggleCycle(toggle, "data-ar-pixel-toggle", "pixel"), current);
+      setTheme(next);
+      localStorage.setItem(STORAGE_KEY, next);
+      syncToggles();
+    });
+  }
+
+  function initBrutalistToggle() {
+    document.addEventListener("click", (e) => {
+      var toggle = e.target.closest("[data-ar-brutalist-toggle]");
+      if (!toggle) return;
+      var current = getTheme() || "light";
+      var next = nextTheme(toggleCycle(toggle, "data-ar-brutalist-toggle", "brutalist"), current);
+      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();
+        });
+      });
+  }
+
+  var SIDEBAR_FOCUSABLE =
+    'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]),' +
+    ' textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+  var SIDEBAR_BREAKPOINTS = { "ar-sidebar-bp-md": 768 };
+  var SIDEBAR_DEFAULT_BP = 1024;
+  var SIDEBAR_MEDIA = {};
+  function sidebarMedia(px) {
+    if (!SIDEBAR_MEDIA[px]) {
+      SIDEBAR_MEDIA[px] = window.matchMedia("(min-width: " + px + "px)");
+    }
+    return SIDEBAR_MEDIA[px];
+  }
+  function sidebarBreakpoint(sidebar) {
+    var px = SIDEBAR_DEFAULT_BP;
+    if (sidebar) {
+      Object.keys(SIDEBAR_BREAKPOINTS).forEach(function (name) {
+        if (sidebar.classList.contains(name)) px = SIDEBAR_BREAKPOINTS[name];
+      });
+    }
+    return px;
+  }
+  function isPersistentSidebar(sidebar) {
+    if (!sidebar || !sidebarMedia(sidebarBreakpoint(sidebar)).matches)
+      return false;
+    return (
+      sidebar.classList.contains("ar-sidebar-responsive") ||
+      sidebar.classList.contains("ar-sidebar-compact") ||
+      sidebar.classList.contains("ar-sidebar-nav")
+    );
+  }
+  function sidebarMediaAll() {
+    return [SIDEBAR_DEFAULT_BP]
+      .concat(
+        Object.keys(SIDEBAR_BREAKPOINTS).map(function (name) {
+          return SIDEBAR_BREAKPOINTS[name];
+        }),
+      )
+      .map(sidebarMedia);
+  }
+
+  function setSidebarState(sidebar, open) {
+    if (!sidebar) return;
+    sidebar.classList.toggle("ar-sidebar-is-open", !!open);
+    sidebar.classList.toggle("ar-sidebar-is-close", !open);
+  }
+
+  function trapFocus(panel, e) {
+    if (e.key !== "Tab") return;
+    var items = Array.prototype.filter.call(
+      panel.querySelectorAll(SIDEBAR_FOCUSABLE),
+      (el) => el.getClientRects().length > 0,
+    );
+    if (!items.length) {
+      e.preventDefault();
+      return;
+    }
+    var first = items[0];
+    var last = items[items.length - 1];
+    if (!panel.contains(document.activeElement)) {
+      e.preventDefault();
+      first.focus();
+      return;
+    }
+    if (e.shiftKey && document.activeElement === first) {
+      e.preventDefault();
+      last.focus();
+      return;
+    }
+    if (!e.shiftKey && document.activeElement === last) {
+      e.preventDefault();
+      first.focus();
+    }
+  }
+
+  function syncSidebar(cb) {
+    if (!cb) return;
+    var sidebar = cb.closest(".ar-sidebar");
+    if (!sidebar) return;
+    var panel = sidebar.querySelector(".ar-sidebar-panel");
+    var persistent = isPersistentSidebar(sidebar);
+    setSidebarState(sidebar, cb.checked || persistent);
+    if (persistent) {
+      cb.checked = false;
+      cb._arOpener = null;
+      if (panel) {
+        panel.removeAttribute("role");
+        panel.removeAttribute("aria-modal");
+      }
+      document.body.style.overflow = "";
+      document
+        .querySelectorAll('[data-ar-sidebar-toggle="' + cb.id + '"]')
+        .forEach((btn) => btn.setAttribute("aria-expanded", "false"));
+      return;
+    }
+    if (cb.checked && !cb._arOpener) {
+      var active = document.activeElement;
+      if (active && active !== document.body && !sidebar.contains(active))
+        cb._arOpener = active;
+    }
+    if (panel) {
+      if (cb.checked) {
+        panel.setAttribute("role", "dialog");
+        panel.setAttribute("aria-modal", "true");
+        panel.focus();
+      } else {
+        panel.removeAttribute("role");
+        panel.removeAttribute("aria-modal");
+      }
+    }
+    document.body.style.overflow = cb.checked ? "hidden" : "";
+    document
+      .querySelectorAll('[data-ar-sidebar-toggle="' + cb.id + '"]')
+      .forEach((btn) => {
+        btn.setAttribute("aria-expanded", cb.checked ? "true" : "false");
+      });
+    if (!cb.checked) {
+      var restore = cb._arOpener;
+      cb._arOpener = null;
+      if (restore && document.contains(restore)) restore.focus();
+    }
+  }
+
+  function initSidebars() {
+    document.querySelectorAll(".ar-sidebar-toggle").forEach((cb) => {
+      var sidebar = cb.closest(".ar-sidebar");
+      if (!sidebar) return;
+      var panel = sidebar.querySelector(".ar-sidebar-panel");
+      if (!panel) return;
+      panel.setAttribute("tabindex", "-1");
+      setSidebarState(sidebar, cb.checked || isPersistentSidebar(sidebar));
+      cb.addEventListener("change", () => syncSidebar(cb));
+      panel.addEventListener("keydown", (e) => {
+        if (e.key === "Escape" && cb.checked) {
+          cb.checked = false;
+          syncSidebar(cb);
+          return;
+        }
+        if (isPersistentSidebar(sidebar)) return;
+        trapFocus(panel, e);
+      });
+      panel.querySelectorAll("a[href]").forEach((link) => {
+        link.addEventListener("click", () => {
+          if (!cb.checked) return;
+          cb.checked = false;
+          syncSidebar(cb);
+        });
+      });
+      document
+        .querySelectorAll('[data-ar-sidebar-toggle="' + cb.id + '"]')
+        .forEach((btn) => {
+          btn.setAttribute("aria-controls", cb.id);
+          btn.setAttribute("aria-expanded", cb.checked ? "true" : "false");
+        });
+    });
+
+    document.querySelectorAll("[data-ar-sidebar-toggle]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        var id = btn.getAttribute("data-ar-sidebar-toggle");
+        var cb = document.getElementById(id);
+        if (!cb) {
+          console.error(
+            '[ArekUI] data-ar-sidebar-toggle="' + id + '" matched no element',
+          );
+          return;
+        }
+        cb._arOpener = btn;
+        cb.checked = !cb.checked;
+        syncSidebar(cb);
+      });
+    });
+
+    document.querySelectorAll("[data-ar-sidebar-close]").forEach((closer) => {
+      closer.addEventListener("click", () => {
+        var sidebar = closer.closest(".ar-sidebar");
+        var cb = sidebar && sidebar.querySelector(".ar-sidebar-toggle");
+        if (!cb) return;
+        cb.checked = false;
+        syncSidebar(cb);
+      });
+    });
+
+    var onBreakpoint = () => {
+      document.querySelectorAll(".ar-sidebar-toggle").forEach((cb) => {
+        var sidebar = cb.closest(".ar-sidebar");
+        if (!sidebar) return;
+        setSidebarState(sidebar, cb.checked || isPersistentSidebar(sidebar));
+        if (cb.checked) syncSidebar(cb);
+      });
+    };
+    sidebarMediaAll().forEach((mql) => {
+      if (mql.addEventListener) mql.addEventListener("change", onBreakpoint);
+      else if (mql.addListener) mql.addListener(onBreakpoint);
+    });
+  }
+
+  function activateTab(tab, group) {
+    var panelId = tab.getAttribute("data-ar-tab");
+    group.querySelectorAll("[data-ar-tab]").forEach((t) => {
+      var isOn = t === tab;
+      t.classList.toggle("ar-tab-active", isOn);
+      t.setAttribute("aria-selected", String(isOn));
+      t.setAttribute("tabindex", isOn ? "0" : "-1");
+    });
+    var groupPanel = group.getAttribute("data-ar-tabs-panel");
+    if (groupPanel) {
+      var scope = group.parentElement || document;
+      var scoped = scope.querySelectorAll("[" + groupPanel + "]");
+      (scoped.length ? scoped : document.querySelectorAll("[" + groupPanel + "]")).forEach((p) => {
+        p.style.display = p.id === panelId ? "" : "none";
+      });
+    }
+  }
+
+  function initTabs() {
+    document.querySelectorAll(".ar-tabs").forEach((group) => {
+      group.setAttribute("role", "tablist");
+    });
+    document.querySelectorAll("[data-ar-tab]").forEach((tab) => {
+      var panelId = tab.getAttribute("data-ar-tab");
+      var panel = document.getElementById(panelId);
+      if (panel && !tab.id) tab.id = panelId + "-tab";
+      tab.setAttribute("role", "tab");
+      if (panel) {
+        tab.setAttribute("aria-controls", panelId);
+        panel.setAttribute("role", "tabpanel");
+        panel.setAttribute("aria-labelledby", tab.id);
+      }
+      var isActive = tab.classList.contains("ar-tab-active");
+      tab.setAttribute("aria-selected", String(isActive));
+      tab.setAttribute("tabindex", isActive ? "0" : "-1");
+
+      tab.addEventListener("click", () => {
+        var group = tab.closest(".ar-tabs");
+        if (group) activateTab(tab, group);
+      });
+
+      tab.addEventListener("keydown", (e) => {
+        var group = tab.closest(".ar-tabs");
+        if (!group) return;
+        var tabs = Array.from(group.querySelectorAll("[data-ar-tab]"));
+        if (!tabs.length) return;
+        var i = tabs.indexOf(tab);
+        var target;
+        if (e.key === "ArrowRight") target = (i + 1) % tabs.length;
+        else if (e.key === "ArrowLeft")
+          target = (i - 1 + tabs.length) % tabs.length;
+        else if (e.key === "Home") target = 0;
+        else if (e.key === "End") target = tabs.length - 1;
+        else return;
+        e.preventDefault();
+        var next = tabs[target];
+        activateTab(next, group);
+        next.focus();
+      });
+    });
+  }
+
+  function closeDropdown(dropdown) {
+    dropdown.classList.remove("ar-dropdown-open");
+    var trigger = dropdown.querySelector(":scope > button, :scope > a");
+    if (trigger) {
+      trigger.setAttribute("aria-expanded", "false");
+      trigger.blur();
+    }
+  }
+
+  function openDropdown(dropdown) {
+    dropdown.classList.add("ar-dropdown-open");
+    var trigger = dropdown.querySelector(":scope > button, :scope > a");
+    if (trigger) trigger.setAttribute("aria-expanded", "true");
+  }
+
+  function initDropdowns() {
+    document.querySelectorAll(".ar-dropdown").forEach((dropdown) => {
+      var content = dropdown.querySelector(".ar-dropdown-content");
+      if (!content) return;
+      var trigger = dropdown.querySelector(":scope > button, :scope > a");
+      if (trigger) trigger.setAttribute("aria-expanded", "false");
+
+      dropdown.addEventListener("click", (e) => {
+        if (content.contains(e.target)) {
+          closeDropdown(dropdown);
+          return;
+        }
+        if (dropdown.classList.contains("ar-dropdown-open")) {
+          closeDropdown(dropdown);
+        } else {
+          openDropdown(dropdown);
+        }
+      });
+    });
+
+    document.addEventListener("click", (e) => {
+      document
+        .querySelectorAll(".ar-dropdown.ar-dropdown-open")
+        .forEach((dd) => {
+          if (!dd.contains(e.target)) closeDropdown(dd);
+        });
+    });
+
+    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", () => {
+          var parent = d.closest(".ar-accordion");
+          if (!parent) return;
+          if (parent.getAttribute("data-ar-exclusive") === null) return;
+          parent.querySelectorAll("details[open]").forEach((other) => {
+            if (other !== d) other.removeAttribute("open");
+          });
+        });
+    });
+  }
+
+  function scrollCarousel(carousel, direction) {
+    if (!carousel) return;
+    var amount = carousel.clientWidth || 300;
+    var reduce =
+      window.matchMedia &&
+      window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    carousel.scrollBy({
+      left: direction * amount,
+      behavior: reduce ? "auto" : "smooth",
+    });
+  }
+
+  function findCarousel(btn, attrName) {
+    var id = btn.getAttribute(attrName);
+    if (id) return document.getElementById(id);
+    var frame = btn.closest(".ar-carousel-frame") || btn.parentElement;
+    return frame ? frame.querySelector(".ar-carousel") : null;
+  }
+
+  function initCarouselControls() {
+    document.querySelectorAll("[data-ar-carousel-prev]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        scrollCarousel(findCarousel(btn, "data-ar-carousel-prev"), -1);
+      });
+    });
+    document.querySelectorAll("[data-ar-carousel-next]").forEach((btn) => {
+      btn.addEventListener("click", () => {
+        scrollCarousel(findCarousel(btn, "data-ar-carousel-next"), 1);
+      });
+    });
+  }
+
+  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 || "info";
+    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() {
+    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 initReveal() {
+    var els = document.querySelectorAll("[data-ar-reveal]");
+    if (!els.length) return;
+    if (!("IntersectionObserver" in window)) {
+      els.forEach((el) => el.classList.add("ar-reveal", "ar-reveal-in"));
+      return;
+    }
+    var io = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add("ar-reveal-in");
+          io.unobserve(entry.target);
+        });
+      },
+      { rootMargin: "0px 0px -10% 0px", threshold: 0 },
+    );
+    els.forEach((el) => {
+      el.classList.add("ar-reveal");
+      io.observe(el);
+    });
+  }
+
+  function init() {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", ready);
+    } else {
+      ready();
+    }
+  }
+
+  function ready() {
+    if (!getTheme()) initTheme();
+    syncToggles();
+    initThemeToggle();
+    initNeoToggle();
+    initPixelToggle();
+    initBrutalistToggle();
+    initModals();
+    initSidebars();
+    initTabs();
+    initDropdowns();
+    initAccordion();
+    initRatings();
+    initPopovers();
+    initFileUploads();
+    initScrollTop();
+    initCarouselControls();
+    initReveal();
+  }
+
+  window.ArekUI = {
+    setTheme: setTheme,
+    getTheme: getTheme,
+    initTheme: initTheme,
+    init: init,
+    toast: toast,
+    dismissToast: dismissToast,
+    getRating: getRating,
+    setRating: setRating,
+    openPopover: openPopover,
+    closePopover: closePopover,
+  };
+
+  init();
+})();