@phantompixeldev/retrocss 2.8.0 → 3.0.0

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;
@@ -249,32 +262,76 @@ var RetroCSS = (() => {
   var form_default = RetroForm;
 
   // src/js/components/table.js
+  var cellValue = (row, index) => {
+    const cell = row.children[index];
+    if (!cell) return "";
+    return (cell.dataset.sortValue ?? cell.textContent).trim();
+  };
+  var asNumber = (s) => {
+    const m = String(s).trim().replace(/,/g, "").match(/^[$€£¥\s]*([+-]?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?)\s*[^\d]*$/);
+    return m ? parseFloat(m[1]) : null;
+  };
   var RetroTable = {
     init(root = document) {
       root.querySelectorAll(".retro-table-sortable").forEach((table) => {
-        table.addEventListener("click", function(e) {
-          const th = e.target.closest("th");
-          if (!th || !table.contains(th)) return;
-          const ths = table.querySelectorAll("th");
-          const idx = Array.from(ths).indexOf(th);
-          if (idx === -1) return;
+        if (table.dataset.retroSortBound === "true") return;
+        table.dataset.retroSortBound = "true";
+        const headers = Array.from(table.querySelectorAll("thead th"));
+        if (!headers.length) return;
+        const sortable = headers.filter((th) => th.dataset.sort !== "none");
+        sortable.forEach((th) => {
+          if (!th.hasAttribute("tabindex")) th.tabIndex = 0;
+          if (!th.hasAttribute("aria-sort")) th.setAttribute("aria-sort", "none");
+          th.classList.add("retro-th-sortable");
+        });
+        const sortBy = (th) => {
+          const index = headers.indexOf(th);
           const tbody = table.querySelector("tbody");
-          const rows = Array.from(tbody.querySelectorAll("tr"));
-          const isAsc = th.classList.toggle("asc");
-          th.classList.toggle("desc", !isAsc);
-          ths.forEach((oth) => {
-            if (oth !== th) oth.classList.remove("asc", "desc");
+          if (index === -1 || !tbody) return;
+          const rows = Array.from(tbody.rows);
+          if (rows.length < 2) return;
+          const ascending = th.getAttribute("aria-sort") !== "ascending";
+          headers.forEach((other) => {
+            if (other === th) return;
+            other.setAttribute("aria-sort", "none");
+            other.classList.remove("asc", "desc");
           });
+          th.setAttribute("aria-sort", ascending ? "ascending" : "descending");
+          th.classList.toggle("asc", ascending);
+          th.classList.toggle("desc", !ascending);
+          let numeric = th.dataset.sort === "number";
+          if (!th.dataset.sort) {
+            const sample = rows.map((r) => cellValue(r, index)).find((v) => v !== "");
+            numeric = sample !== void 0 && asNumber(sample) !== null;
+          }
+          const dir = ascending ? 1 : -1;
           rows.sort((a, b) => {
-            let t1 = a.children[idx].textContent.trim();
-            let t2 = b.children[idx].textContent.trim();
-            let n1 = parseFloat(t1), n2 = parseFloat(t2);
-            if (!isNaN(n1) && !isNaN(n2)) {
-              return isAsc ? n1 - n2 : n2 - n1;
+            const x = cellValue(a, index);
+            const y = cellValue(b, index);
+            if (numeric) {
+              const nx = asNumber(x);
+              const ny = asNumber(y);
+              if (nx === null && ny === null) return 0;
+              if (nx === null) return 1;
+              if (ny === null) return -1;
+              return (nx - ny) * dir;
             }
-            return isAsc ? t1.localeCompare(t2) : t2.localeCompare(t1);
+            return x.localeCompare(y, void 0, { numeric: true }) * dir;
           });
-          rows.forEach((row) => tbody.appendChild(row));
+          const frag = document.createDocumentFragment();
+          rows.forEach((row) => frag.appendChild(row));
+          tbody.appendChild(frag);
+        };
+        table.addEventListener("click", (e) => {
+          const th = e.target.closest("thead th");
+          if (th && sortable.includes(th)) sortBy(th);
+        });
+        table.addEventListener("keydown", (e) => {
+          if (e.key !== "Enter" && e.key !== " ") return;
+          const th = e.target.closest("thead th");
+          if (!th || !sortable.includes(th)) return;
+          e.preventDefault();
+          sortBy(th);
         });
       });
     }
@@ -479,7 +536,6 @@ var RetroCSS = (() => {
           });
         }
       });
-      console.log("File uploads initialized:", root.querySelectorAll(".retro-file-upload").length);
     }
   };
   var file_upload_default = RetroFileUpload;
@@ -593,7 +649,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 +672,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 +771,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 +778,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 +798,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 +807,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 +827,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 +835,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 +874,6 @@ var RetroCSS = (() => {
           });
         });
       });
-      console.log("Accordion component initialized");
     }
     static init(selector = ".retro-accordion") {
       new _RetroAccordion(selector);
@@ -842,109 +899,110 @@ var RetroCSS = (() => {
 
   // src/js/code-copy.js
   var RetroCodeCopy = {
-    init() {
-      const codeBlocks = document.querySelectorAll(".retro-code");
-      codeBlocks.forEach((block) => {
-        if (!block.querySelector(".retro-code-copy")) {
-          const copyButton = document.createElement("button");
-          copyButton.className = "retro-code-copy";
-          copyButton.textContent = "Copy";
-          block.appendChild(copyButton);
-          copyButton.addEventListener("click", async () => {
-            const code = block.querySelector("code").textContent;
-            try {
-              await navigator.clipboard.writeText(code);
-              const originalText = copyButton.textContent;
-              copyButton.textContent = "Copied!";
-              copyButton.style.background = "#c0c0c0";
-              setTimeout(() => {
-                copyButton.textContent = originalText;
-                copyButton.style.background = "";
-              }, 2e3);
-            } catch (err) {
-              console.error("Failed to copy code:", err);
-              copyButton.textContent = "Failed to copy";
-              copyButton.style.background = "#ffcccc";
-              setTimeout(() => {
-                copyButton.textContent = "Copy";
-                copyButton.style.background = "";
-              }, 2e3);
+    /** How long the "Copied!" / "Failed" state stays up, in ms. */
+    feedbackDuration: 2e3,
+    init(root = document) {
+      root.querySelectorAll(".retro-code").forEach((block) => {
+        if (block.querySelector(".retro-code-copy")) return;
+        const code = block.querySelector("code");
+        if (!code) return;
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "retro-code-copy";
+        button.textContent = "Copy";
+        button.setAttribute("aria-label", "Copy code to clipboard");
+        button.setAttribute("aria-live", "polite");
+        let timer = null;
+        const report = (label, state) => {
+          clearTimeout(timer);
+          button.textContent = label;
+          button.classList.toggle("retro-code-copy-ok", state === "ok");
+          button.classList.toggle("retro-code-copy-fail", state === "fail");
+          timer = setTimeout(() => {
+            button.textContent = "Copy";
+            button.classList.remove("retro-code-copy-ok", "retro-code-copy-fail");
+          }, this.feedbackDuration);
+        };
+        button.addEventListener("click", async () => {
+          const text = code.textContent;
+          try {
+            if (navigator.clipboard?.writeText) {
+              await navigator.clipboard.writeText(text);
+            } else {
+              throw new Error("clipboard unavailable");
             }
-          });
-        }
+            report("Copied!", "ok");
+          } catch {
+            const range = document.createRange();
+            range.selectNodeContents(code);
+            const sel = window.getSelection();
+            sel.removeAllRanges();
+            sel.addRange(range);
+            report("Press Ctrl+C", "fail");
+          }
+        });
+        block.appendChild(button);
       });
     }
   };
   window.RetroCodeCopy = RetroCodeCopy;
+  var code_copy_default = RetroCodeCopy;
 
   // 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;
@@ -961,192 +1019,15 @@ var RetroCSS = (() => {
     });
   });
 
-  // src/js/sidebar.js
-  var RetroSidebar = {
-    // Configuration
-    config: {
-      sidebarSelector: ".retro-sidebar",
-      toggleSelector: ".retro-sidebar-toggle",
-      overlaySelector: ".retro-sidebar-overlay",
-      activeClass: "active",
-      mobileBreakpoint: 768,
-      transitionDuration: 300,
-      // ms
-      bodyOpenClass: "sidebar-open"
-    },
-    // State
-    isOpen: false,
-    // Initialize the sidebar
-    init() {
-      const sidebar = document.querySelector(this.config.sidebarSelector);
-      if (!sidebar) return;
-      sidebar.setAttribute("role", "navigation");
-      sidebar.setAttribute("aria-label", "Sidebar Navigation");
-      this.setupLinks(sidebar);
-      this.setupMobile();
-      this.setupScrollTracking();
-      this.setupResizeHandler();
-      this.setActiveLink();
-    },
-    // Setup sidebar links
-    setupLinks(sidebar) {
-      const sidebarLinks = sidebar.querySelectorAll("a");
-      sidebarLinks.forEach((link) => {
-        link.addEventListener("focus", () => {
-          link.style.outline = "1px dotted var(--retro-primary)";
-        });
-        link.addEventListener("blur", () => {
-          link.style.outline = "";
-        });
-        if (link.getAttribute("href")?.startsWith("#")) {
-          link.addEventListener("click", (e) => {
-            const targetId = link.getAttribute("href");
-            const targetElement = document.querySelector(targetId);
-            if (targetElement) {
-              e.preventDefault();
-              targetElement.scrollIntoView({
-                behavior: "smooth",
-                block: "start"
-              });
-              history.pushState(null, "", targetId);
-              this.setActiveLink(link);
-              if (window.innerWidth < this.config.mobileBreakpoint) {
-                this.closeSidebar();
-              }
-            }
-          });
-        }
-      });
-    },
-    // Setup mobile functionality
-    setupMobile() {
-      let toggleBtn = document.querySelector(this.config.toggleSelector);
-      if (!toggleBtn) {
-        toggleBtn = document.createElement("button");
-        toggleBtn.className = "retro-sidebar-toggle";
-        toggleBtn.innerHTML = '<div class="retro-sidebar-toggle-icon"><span></span></div>';
-        toggleBtn.setAttribute("aria-label", "Toggle Sidebar");
-        const sidebar = document.querySelector(this.config.sidebarSelector);
-        if (sidebar && sidebar.parentNode) {
-          sidebar.parentNode.insertBefore(toggleBtn, sidebar);
-        }
-      }
-      let overlay = document.querySelector(this.config.overlaySelector);
-      if (!overlay) {
-        overlay = document.createElement("div");
-        overlay.className = "retro-sidebar-overlay";
-        document.body.appendChild(overlay);
-      }
-      toggleBtn.addEventListener("click", () => this.toggleSidebar());
-      overlay.addEventListener("click", () => this.closeSidebar());
-      document.addEventListener("keydown", (e) => {
-        if (e.key === "Escape" && this.isOpen) {
-          this.closeSidebar();
-        }
-      });
-    },
-    // Toggle the sidebar open/closed
-    toggleSidebar() {
-      const sidebar = document.querySelector(this.config.sidebarSelector);
-      const overlay = document.querySelector(this.config.overlaySelector);
-      if (!sidebar || !overlay) return;
-      if (this.isOpen) {
-        this.closeSidebar();
-      } else {
-        sidebar.classList.add(this.config.activeClass);
-        overlay.classList.add(this.config.activeClass);
-        document.body.classList.add(this.config.bodyOpenClass);
-        this.isOpen = true;
-      }
-    },
-    // Close the sidebar
-    closeSidebar() {
-      const sidebar = document.querySelector(this.config.sidebarSelector);
-      const overlay = document.querySelector(this.config.overlaySelector);
-      if (!sidebar || !overlay) return;
-      sidebar.classList.remove(this.config.activeClass);
-      overlay.classList.remove(this.config.activeClass);
-      document.body.classList.remove(this.config.bodyOpenClass);
-      this.isOpen = false;
-    },
-    // Setup scroll position tracking
-    setupScrollTracking() {
-      const sidebar = document.querySelector(this.config.sidebarSelector);
-      if (!sidebar) return;
-      window.addEventListener("scroll", () => {
-        this.updateActiveOnScroll();
-      });
-    },
-    // Update active link based on scroll position
-    updateActiveOnScroll() {
-      const sections = document.querySelectorAll("section[id], div[id]");
-      if (sections.length === 0) return;
-      let currentSection = null;
-      let maxVisiblePercentage = 0;
-      sections.forEach((section) => {
-        const rect = section.getBoundingClientRect();
-        const isVisible = rect.top < window.innerHeight && rect.bottom > 0;
-        if (isVisible) {
-          const visibleHeight = Math.min(rect.bottom, window.innerHeight) - Math.max(rect.top, 0);
-          const visiblePercentage = visibleHeight / rect.height;
-          if (visiblePercentage > maxVisiblePercentage) {
-            maxVisiblePercentage = visiblePercentage;
-            currentSection = section;
-          }
-        }
-      });
-      if (currentSection) {
-        const id = currentSection.getAttribute("id");
-        const link = document.querySelector(`.retro-sidebar a[href="#${id}"]`);
-        if (link) {
-          this.setActiveLink(link);
-        }
-      }
-    },
-    // Set active link
-    setActiveLink(activeLink = null) {
-      const sidebar = document.querySelector(this.config.sidebarSelector);
-      if (!sidebar) return;
-      if (!activeLink) {
-        const hash = window.location.hash;
-        if (hash) {
-          activeLink = sidebar.querySelector(`a[href="${hash}"]`);
-        } else {
-          const currentPath = window.location.pathname;
-          activeLink = sidebar.querySelector(`a[href="${currentPath}"]`) || sidebar.querySelector("a");
-        }
-      }
-      sidebar.querySelectorAll("a").forEach((link) => {
-        link.classList.remove(this.config.activeClass);
-      });
-      if (activeLink) {
-        activeLink.classList.add(this.config.activeClass);
-      }
-    },
-    // Setup resize handler
-    setupResizeHandler() {
-      window.addEventListener("resize", () => {
-        if (window.innerWidth >= this.config.mobileBreakpoint && this.isOpen) {
-          this.closeSidebar();
-        }
-      });
-    }
-  };
-  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 +1040,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,22 +1054,19 @@ 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");
       }
+      code_copy_default.init();
       this.initTooltips();
       this.initToastTriggers();
       this.initSearchBars();
@@ -1220,7 +1100,6 @@ var RetroCSS = (() => {
           tooltip.classList.remove("show");
         });
       });
-      console.log("Tooltips initialized:", tooltipTriggers.length);
     },
     // Initialize toast trigger elements
     initToastTriggers() {
@@ -1236,17 +1115,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 +1125,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 +1214,6 @@ var RetroCSS = (() => {
           }
         });
       });
-      console.log("Tag inputs initialized:", tagInputs.length);
     },
     // Initialize theme toggle button
     initThemeToggle() {
@@ -1379,7 +1228,6 @@ var RetroCSS = (() => {
           });
         });
       });
-      console.log("Theme toggles initialized:", themeToggles.length);
     },
     // Apply theme to document
     applyTheme(theme) {
@@ -1420,15 +1268,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;
 })();