@phantompixeldev/retrocss 2.7.0 → 2.8.1

package/dist/retro.js

@@ -1,28 +1,4 @@
-var RetroCSS = (() => {
-  var __defProp = Object.defineProperty;
-  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-  var __getOwnPropNames = Object.getOwnPropertyNames;
-  var __hasOwnProp = Object.prototype.hasOwnProperty;
-  var __export = (target, all) => {
-    for (var name in all)
-      __defProp(target, name, { get: all[name], enumerable: true });
-  };
-  var __copyProps = (to, from, except, desc) => {
-    if (from && typeof from === "object" || typeof from === "function") {
-      for (let key of __getOwnPropNames(from))
-        if (!__hasOwnProp.call(to, key) && key !== except)
-          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-    }
-    return to;
-  };
-  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-  // src/js/retro.js
-  var retro_exports = {};
-  __export(retro_exports, {
-    default: () => retro_default
-  });
-
+(() => {
   // src/js/components/modal.js
   var FOCUSABLE = [
     "a[href]",
@@ -130,7 +106,6 @@ var RetroCSS = (() => {
         }
         this._trap(e, openModal);
       });
-      console.log("Modal component initialized");
     },
     show(modalId) {
       const modal = document.getElementById(modalId);
@@ -155,7 +130,6 @@ var RetroCSS = (() => {
       this._isolate(modal);
       const target = modal.querySelector("[autofocus]") || this._focusable(modal)[0] || modal;
       target.focus();
-      console.log(`Modal ${modalId} opened`);
     },
     hide(modalId) {
       const modal = document.getElementById(modalId);
@@ -168,35 +142,74 @@ var RetroCSS = (() => {
         this._lastFocused.focus();
       }
       this._lastFocused = null;
-      console.log(`Modal ${modalId} closed`);
     }
   };
   var modal_default = RetroModal;
 
   // src/js/components/toast.js
   var RetroToast = {
-    show(message, options = {}) {
-      let container = document.getElementById("retro-toast-container");
-      if (!container) {
-        container = document.createElement("div");
-        container.id = "retro-toast-container";
-        document.body.appendChild(container);
+    /**
+     * The container is a live region. Without this, toasts were shown silently:
+     * a screen reader had no way to know anything had appeared, which made the
+     * theme toggle and every `data-retro-toast` trigger inaudible.
+     */
+    container() {
+      let el = document.getElementById("retro-toast-container");
+      if (!el) {
+        el = document.createElement("div");
+        el.id = "retro-toast-container";
+        document.body.appendChild(el);
       }
+      el.setAttribute("role", "status");
+      el.setAttribute("aria-live", "polite");
+      el.setAttribute("aria-atomic", "false");
+      return el;
+    },
+    show(message, options = {}) {
+      const container = this.container();
       const toast = document.createElement("div");
       toast.className = "retro-toast";
-      if (options.type) {
-        toast.classList.add(`retro-toast-${options.type}`);
+      if (options.type) toast.classList.add(`retro-toast-${options.type}`);
+      if (options.type === "danger") {
+        toast.setAttribute("role", "alert");
+        toast.setAttribute("aria-live", "assertive");
       }
+      const body = document.createElement("div");
+      body.className = "retro-toast-body";
       if (options.html) {
         toast.classList.add("retro-toast-html");
-        toast.innerHTML = message;
+        body.innerHTML = message;
       } else {
-        toast.textContent = message;
+        body.textContent = message;
       }
+      toast.appendChild(body);
+      const close = document.createElement("button");
+      close.type = "button";
+      close.className = "retro-toast-close";
+      close.setAttribute("aria-label", "Dismiss notification");
+      close.textContent = "\xD7";
+      close.addEventListener("click", () => dismiss());
+      toast.appendChild(close);
       container.appendChild(toast);
-      setTimeout(() => {
+      const duration = options.duration === void 0 ? 3e3 : options.duration;
+      let timer = null;
+      let dismissed = false;
+      function dismiss() {
+        if (dismissed) return;
+        dismissed = true;
+        clearTimeout(timer);
         toast.remove();
-      }, options.duration || 3e3);
+      }
+      const start = () => {
+        if (duration > 0) timer = setTimeout(dismiss, duration);
+      };
+      const pause = () => clearTimeout(timer);
+      toast.addEventListener("mouseenter", pause);
+      toast.addEventListener("mouseleave", start);
+      toast.addEventListener("focusin", pause);
+      toast.addEventListener("focusout", start);
+      start();
+      return { dismiss, element: toast };
     }
   };
   var toast_default = RetroToast;
@@ -479,7 +492,6 @@ var RetroCSS = (() => {
           });
         }
       });
-      console.log("File uploads initialized:", root.querySelectorAll(".retro-file-upload").length);
     }
   };
   var file_upload_default = RetroFileUpload;
@@ -593,7 +605,6 @@ var RetroCSS = (() => {
         startX = null;
         moveX = null;
       });
-      console.log("Carousel initialized:", this.slides.length, "slides");
     };
     RetroCarousel.prototype.goTo = function(idx) {
       if (idx < 0) idx = this.slides.length - 1;
@@ -617,17 +628,29 @@ var RetroCSS = (() => {
 
   // src/js/tabs.js
   var RetroTabs = class {
-    constructor(selector, options = {}) {
-      this.tabContainer = document.querySelector(selector);
+    constructor(target, options = {}) {
+      this.tabContainer = typeof target === "string" ? document.querySelector(target) : target;
       if (!this.tabContainer) return;
       this.options = {
         contentSelector: options.contentSelector || ".retro-tab-content",
         activeClass: options.activeClass || "active",
-        defaultTab: options.defaultTab || 0,
-        ...options
+        ...options,
+        // findIndex returns -1 when no tab carries .active, and `-1 || 0` is -1
+        // because -1 is truthy -- which then indexes this.tabs[-1].
+        defaultTab: Math.max(0, options.defaultTab ?? 0)
       };
       this.tabs = Array.from(this.tabContainer.querySelectorAll(".retro-nav-item"));
-      this.contentElements = this.options.contentContainer ? Array.from(document.querySelector(this.options.contentContainer).children) : Array.from(this.tabContainer.nextElementSibling.querySelectorAll(this.options.contentSelector));
+      let paneRoot = this.options.contentContainer;
+      if (typeof paneRoot === "string") paneRoot = document.querySelector(paneRoot);
+      if (!paneRoot) paneRoot = this.tabContainer.nextElementSibling;
+      if (!paneRoot) return;
+      this.contentElements = Array.from(
+        paneRoot.querySelectorAll(this.options.contentSelector)
+      );
+      if (!this.contentElements.length) {
+        this.contentElements = Array.from(paneRoot.children);
+      }
+      if (!this.tabs.length || !this.contentElements.length) return;
       this.init();
     }
     init() {
@@ -704,11 +727,6 @@ var RetroCSS = (() => {
               if (i === 0 && tabs[0].classList.contains("active")) {
                 content.appendChild(existingContent);
               } else {
-                content.textContent = `Content for ${tab.textContent}`;
-                content.style.padding = "20px";
-                content.style.border = "2px solid #000";
-                content.style.borderTop = "0";
-                content.style.background = "#fff";
               }
               wrapper.appendChild(content);
             });
@@ -716,7 +734,7 @@ var RetroCSS = (() => {
           }
         }
         new RetroTabs(nav, {
-          contentContainer: ".retro-tab-pane",
+          contentContainer,
           defaultTab: Array.from(nav.querySelectorAll(".retro-nav-item")).findIndex((tab) => tab.classList.contains("active"))
         });
       });
@@ -736,8 +754,6 @@ var RetroCSS = (() => {
               if (i === 0 && tabs[0].classList.contains("active")) {
                 content.appendChild(existingContent);
               } else {
-                content.textContent = `Content for ${tab.textContent}`;
-                content.style.padding = "20px";
                 content.style.marginTop = "10px";
                 content.style.background = "#f5f5f5";
               }
@@ -747,7 +763,7 @@ var RetroCSS = (() => {
           }
         }
         new RetroTabs(nav, {
-          contentContainer: ".retro-tab-pane-underlined",
+          contentContainer,
           defaultTab: Array.from(nav.querySelectorAll(".retro-nav-item")).findIndex((tab) => tab.classList.contains("active"))
         });
       });
@@ -767,8 +783,6 @@ var RetroCSS = (() => {
               if (i === 0 && tabs[0].classList.contains("active") || tab.classList.contains("active")) {
                 content.appendChild(nextEl);
               } else {
-                content.textContent = `Content for ${tab.textContent}`;
-                content.style.padding = "20px";
                 content.style.marginTop = "10px";
                 content.style.background = "#f5f5f5";
               }
@@ -777,7 +791,7 @@ var RetroCSS = (() => {
             contentContainer = wrapper;
           }
           new RetroTabs(nav, {
-            contentContainer: ".retro-tab-pane-buttons",
+            contentContainer,
             defaultTab: Array.from(nav.querySelectorAll(".retro-nav-item")).findIndex((tab) => tab.classList.contains("active"))
           });
         }
@@ -816,7 +830,6 @@ var RetroCSS = (() => {
           });
         });
       });
-      console.log("Accordion component initialized");
     }
     static init(selector = ".retro-accordion") {
       new _RetroAccordion(selector);
@@ -879,72 +892,59 @@ var RetroCSS = (() => {
 
   // src/js/infinite-scroll.js
   var RetroInfiniteScroll = {
-    isLoading: false,
-    page: 1,
-    itemsPerPage: 5,
-    maxPages: 5,
-    // For demo purposes
-    init() {
-      const containers = document.querySelectorAll(".retro-infinite-scroll");
-      if (!containers.length) return;
+    /** How close to the bottom, in px, before more content is requested. */
+    threshold: 50,
+    init(root = document) {
+      const containers = root.querySelectorAll(".retro-infinite-scroll");
       containers.forEach((container) => {
-        this.appendItems(container, 1);
+        if (container.dataset.retroInfiniteBound === "true") return;
+        container.dataset.retroInfiniteBound = "true";
+        const state = { page: 1, loading: false, finished: false };
         container.addEventListener("scroll", () => {
-          if (this.isNearBottom(container) && !this.isLoading && this.page < this.maxPages) {
-            this.loadMoreItems(container);
-          }
+          if (state.loading || state.finished) return;
+          if (!this.isNearBottom(container)) return;
+          this.requestMore(container, state);
         });
       });
     },
     isNearBottom(container) {
-      return container.scrollHeight - container.scrollTop - container.clientHeight < 50;
+      return container.scrollHeight - container.scrollTop - container.clientHeight < this.threshold;
     },
-    loadMoreItems(container) {
+    requestMore(container, state) {
       const loader = container.querySelector(".retro-infinite-loader");
-      this.isLoading = true;
+      state.loading = true;
       if (loader) loader.style.display = "flex";
-      setTimeout(() => {
-        this.page++;
-        this.appendItems(container, this.page);
-        this.isLoading = false;
+      const settle = () => {
+        state.loading = false;
         if (loader) loader.style.display = "none";
-        if (this.page >= this.maxPages) {
-          const endMessage = document.createElement("div");
-          endMessage.className = "retro-infinite-end";
-          endMessage.textContent = "End of content";
-          endMessage.style.textAlign = "center";
-          endMessage.style.padding = "20px";
-          endMessage.style.color = "var(--retro-border-medium)";
-          container.appendChild(endMessage);
-        }
-      }, 800);
-    },
-    appendItems(container, page) {
-      const loader = container.querySelector(".retro-infinite-loader");
-      for (let i = 1; i <= this.itemsPerPage; i++) {
-        const itemIndex = (page - 1) * this.itemsPerPage + i;
-        const item = document.createElement("div");
-        item.className = "retro-card retro-mb-3";
-        const card = `
-        <div class="retro-card-header">
-          Item ${itemIndex}
-        </div>
-        <div class="retro-card-content">
-          <p>This is demo content for infinite scroll. Scroll down to load more items.</p>
-          <div class="retro-progress" style="margin-top: 10px;">
-            <div class="retro-progress-bar" style="width: ${Math.floor(
-          Math.random() * 100
-        )}%;"></div>
-          </div>
-        </div>
-      `;
-        item.innerHTML = card;
-        if (loader) {
-          container.insertBefore(item, loader);
-        } else {
-          container.appendChild(item);
+      };
+      const detail = {
+        page: state.page + 1,
+        /** Insert a node above the loader. */
+        append(node) {
+          if (loader) container.insertBefore(node, loader);
+          else container.appendChild(node);
+        },
+        /** Call when a page has been added. */
+        loaded() {
+          state.page += 1;
+          settle();
+        },
+        /** Call when there is nothing left. */
+        done() {
+          state.finished = true;
+          settle();
+          if (container.querySelector(".retro-infinite-end")) return;
+          const end = document.createElement("div");
+          end.className = "retro-infinite-end";
+          end.textContent = "End of content";
+          container.appendChild(end);
         }
-      }
+      };
+      const delivered = container.dispatchEvent(
+        new CustomEvent("retro:loadmore", { detail, bubbles: true, cancelable: true })
+      );
+      if (delivered && state.loading) settle();
     }
   };
   window.RetroInfiniteScroll = RetroInfiniteScroll;
@@ -1134,19 +1134,15 @@ var RetroCSS = (() => {
   };
   window.RetroSidebar = RetroSidebar;
 
-  // src/js/datetime.js
-  (function() {
-    document.querySelectorAll('input[type="date"], input[type="time"]').forEach(function(input) {
-      input.addEventListener("change", function() {
-        if (window.RetroCSS && RetroCSS.toast) {
-          RetroCSS.toast.show("Selected: " + input.value, { type: "info" });
-        }
-      });
-    });
-  })();
-
   // src/js/retro.js
-  var RetroCSS2 = {
+  function readStoredTheme() {
+    try {
+      return localStorage.getItem("retro-theme") || "light";
+    } catch (e) {
+      return "light";
+    }
+  }
+  var RetroCSS = {
     modal: modal_default,
     toast: toast_default,
     form: form_default,
@@ -1159,11 +1155,13 @@ var RetroCSS = (() => {
     accordion: window.RetroAccordion,
     tabs: window.RetroTabs,
     infiniteScroll: window.RetroInfiniteScroll,
-    // Store theme preference
-    theme: localStorage.getItem("retro-theme") || "light",
+    // Store theme preference. Read defensively: in a sandboxed iframe, or with
+    // third-party storage blocked, touching localStorage throws SecurityError —
+    // and this runs during module evaluation, so it would take the whole bundle
+    // down before init() ever ran.
+    theme: readStoredTheme(),
     // Initialize all components
     init() {
-      console.log("RetroCSS initializing components...");
       modal_default.init();
       dropdown_default.init();
       form_default.init();
@@ -1171,21 +1169,17 @@ var RetroCSS = (() => {
       file_upload_default.init();
       if (window.RetroCarousel && typeof window.RetroCarousel.init === "function") {
         window.RetroCarousel.init();
-        console.log("Carousel initialized");
       } else {
         console.warn("RetroCarousel not available");
       }
-      if (window.RetroTabsInit && typeof window.RetroTabsInit.init === "function") {
-        window.RetroTabsInit.init();
-        console.log("Tabs initialized");
+      if (window.RetroTabs && typeof window.RetroTabs.init === "function") {
+        window.RetroTabs.init();
       }
       if (window.RetroAccordion && typeof window.RetroAccordion.init === "function") {
         window.RetroAccordion.init();
-        console.log("Accordion initialized");
       }
       if (window.RetroInfiniteScroll && typeof window.RetroInfiniteScroll.init === "function") {
         window.RetroInfiniteScroll.init();
-        console.log("Infinite Scroll initialized");
       }
       this.initTooltips();
       this.initToastTriggers();
@@ -1220,7 +1214,6 @@ var RetroCSS = (() => {
           tooltip.classList.remove("show");
         });
       });
-      console.log("Tooltips initialized:", tooltipTriggers.length);
     },
     // Initialize toast trigger elements
     initToastTriggers() {
@@ -1236,17 +1229,8 @@ var RetroCSS = (() => {
             duration,
             html
           });
-          if (message === "Stacked Toast 1") {
-            setTimeout(() => {
-              toast_default.show("Stacked Toast 2", { type: "primary" });
-              setTimeout(() => {
-                toast_default.show("Stacked Toast 3", { type: "success" });
-              }, 600);
-            }, 600);
-          }
         });
       });
-      console.log("Toast triggers initialized:", toastTriggers.length);
     },
     // Initialize search bar components
     initSearchBars() {
@@ -1255,55 +1239,35 @@ var RetroCSS = (() => {
         const input = searchBar.querySelector(".retro-search-input");
         const suggestions = searchBar.querySelector(".retro-search-suggestions");
         if (!input) return;
+        const items = suggestions ? Array.from(suggestions.querySelectorAll(".retro-search-suggestion")) : [];
+        const choose = (item) => {
+          input.value = item.textContent.trim();
+          searchBar.classList.remove("active");
+          input.dispatchEvent(new Event("change", { bubbles: true }));
+          input.focus();
+        };
+        items.forEach((item) => item.addEventListener("click", () => choose(item)));
         input.addEventListener("focus", () => {
-          if (suggestions) {
-            searchBar.classList.add("active");
-          }
-        });
-        document.addEventListener("click", (e) => {
-          if (!searchBar.contains(e.target)) {
-            searchBar.classList.remove("active");
-          }
+          if (suggestions) searchBar.classList.add("active");
         });
-        if (suggestions) {
-          const suggestionItems = suggestions.querySelectorAll(".retro-search-suggestion");
-          suggestionItems.forEach((item) => {
-            item.addEventListener("click", () => {
-              input.value = item.textContent;
-              searchBar.classList.remove("active");
-              input.dispatchEvent(new Event("change", { bubbles: true }));
-              input.focus();
-            });
-          });
-        }
         input.addEventListener("input", () => {
-          if (!suggestions) return;
           const value = input.value.trim().toLowerCase();
-          suggestions.innerHTML = "";
-          if (value) {
-            const demoItems = [
-              `${value} - Result 1`,
-              `${value} - Result 2`,
-              `${value} - Result 3`
-            ];
-            demoItems.forEach((item) => {
-              const suggestion = document.createElement("div");
-              suggestion.className = "retro-search-suggestion";
-              suggestion.textContent = item;
-              suggestion.addEventListener("click", () => {
-                input.value = item;
-                searchBar.classList.remove("active");
-                input.focus();
-              });
-              suggestions.appendChild(suggestion);
-            });
-            searchBar.classList.add("active");
-          } else {
-            searchBar.classList.remove("active");
-          }
+          events_default.emit("search", { searchBar, input, value });
+          if (!suggestions) return;
+          let visible = 0;
+          items.forEach((item) => {
+            const match = !value || item.textContent.toLowerCase().includes(value);
+            item.hidden = !match;
+            if (match) visible += 1;
+          });
+          searchBar.classList.toggle("active", visible > 0);
+        });
+      });
+      document.addEventListener("click", (e) => {
+        document.querySelectorAll(".retro-search-bar.active").forEach((bar) => {
+          if (!bar.contains(e.target)) bar.classList.remove("active");
         });
       });
-      console.log("Search bars initialized:", searchBars.length);
     },
     // Initialize tag input components
     initTagInputs() {
@@ -1364,7 +1328,6 @@ var RetroCSS = (() => {
           }
         });
       });
-      console.log("Tag inputs initialized:", tagInputs.length);
     },
     // Initialize theme toggle button
     initThemeToggle() {
@@ -1379,7 +1342,6 @@ var RetroCSS = (() => {
           });
         });
       });
-      console.log("Theme toggles initialized:", themeToggles.length);
     },
     // Apply theme to document
     applyTheme(theme) {
@@ -1420,15 +1382,20 @@ var RetroCSS = (() => {
           });
         });
       });
-      console.log("Rating stars initialized:", ratings.length);
     }
   };
-  window.RetroCSS = RetroCSS2;
+  window.RetroCSS = RetroCSS;
+  window.RetroModal = modal_default;
+  window.RetroToast = toast_default;
+  window.RetroForm = form_default;
+  window.RetroTable = table_default;
+  window.RetroDropdown = dropdown_default;
+  window.RetroFileUpload = file_upload_default;
+  window.RetroEvents = events_default;
   if (document.readyState === "loading") {
-    document.addEventListener("DOMContentLoaded", () => RetroCSS2.init());
+    document.addEventListener("DOMContentLoaded", () => RetroCSS.init());
   } else {
-    RetroCSS2.init();
+    RetroCSS.init();
   }
-  var retro_default = RetroCSS2;
-  return __toCommonJS(retro_exports);
+  var retro_default = RetroCSS;
 })();