arekui 1.0.2 → 2.0.0

package/arekui.js

@@ -1,12 +1,18 @@
 /*!
- * 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.
+ * 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 THEMES_LIGHT_DARK = ["light", "dark"];
-  var THEMES_DEFAULT_NEO = ["light", "neo"];
+  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");
@@ -15,12 +21,15 @@
   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);
-    var allThemes = THEMES_LIGHT_DARK.concat(THEMES_DEFAULT_NEO);
-    if (stored && allThemes.indexOf(stored) !== -1) {
+    if (stored && KNOWN_THEMES.indexOf(stored) !== -1) {
       setTheme(stored);
     } else {
       var prefersDark = window.matchMedia(
@@ -30,6 +39,24 @@
     }
   }
 
+  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) => {
@@ -45,7 +72,28 @@
         el.checked = isNeo;
       } else {
         el.setAttribute("aria-pressed", String(isNeo));
-        el.textContent = isNeo ? "Default" : "Neo";
+        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);
       }
     });
   }
@@ -55,8 +103,7 @@
       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];
+      var next = nextTheme(toggleCycle(toggle, "data-ar-theme-toggle", "dark"), current);
       setTheme(next);
       localStorage.setItem(STORAGE_KEY, next);
       syncToggles();
@@ -68,8 +115,31 @@
       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];
+      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();
@@ -102,32 +172,260 @@
       });
   }
 
-  function initDrawers() {
-    document.querySelectorAll("[data-ar-drawer-toggle]").forEach((btn) => {
+  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-drawer-toggle");
-        var checkbox = document.getElementById(id);
-        if (checkbox) checkbox.checked = !checkbox.checked;
+        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;
-        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";
-          });
-        }
+        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();
       });
     });
   }
@@ -135,13 +433,24 @@
   function closeDropdown(dropdown) {
     dropdown.classList.remove("ar-dropdown-open");
     var trigger = dropdown.querySelector(":scope > button, :scope > a");
-    if (trigger) trigger.blur();
+    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)) {
@@ -151,7 +460,7 @@
         if (dropdown.classList.contains("ar-dropdown-open")) {
           closeDropdown(dropdown);
         } else {
-          dropdown.classList.add("ar-dropdown-open");
+          openDropdown(dropdown);
         }
       });
     });
@@ -160,7 +469,7 @@
       document
         .querySelectorAll(".ar-dropdown.ar-dropdown-open")
         .forEach((dd) => {
-          if (!dd.contains(e.target)) dd.classList.remove("ar-dropdown-open");
+          if (!dd.contains(e.target)) closeDropdown(dd);
         });
     });
 
@@ -178,9 +487,9 @@
       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;
+          if (parent.getAttribute("data-ar-exclusive") === null) return;
           parent.querySelectorAll("details[open]").forEach((other) => {
             if (other !== d) other.removeAttribute("open");
           });
@@ -188,6 +497,38 @@
     });
   }
 
+  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) {
@@ -202,7 +543,7 @@
 
   function toast(message, options) {
     var opts = options || {};
-    var type = opts.type || "";
+    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;
@@ -312,7 +653,6 @@
   }
 
   function initPopovers() {
-    // Click toggle
     document.addEventListener("click", (e) => {
       var trigger = e.target.closest("[data-ar-popover]");
       if (trigger) {
@@ -409,6 +749,29 @@
     });
   }
 
+  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);
@@ -422,8 +785,10 @@
     syncToggles();
     initThemeToggle();
     initNeoToggle();
+    initPixelToggle();
+    initBrutalistToggle();
     initModals();
-    initDrawers();
+    initSidebars();
     initTabs();
     initDropdowns();
     initAccordion();
@@ -431,9 +796,11 @@
     initPopovers();
     initFileUploads();
     initScrollTop();
+    initCarouselControls();
+    initReveal();
   }
 
-  window.ARStyle = {
+  window.ArekUI = {
     setTheme: setTheme,
     getTheme: getTheme,
     initTheme: initTheme,