maverick-wave 3.3.0 → 3.3.2

package/maverick-wave.min.js

@@ -1 +1 @@
-!function(){"use strict";function e(){document.querySelectorAll(".color-swatch").forEach(e=>{const t=function(e){if(!e||"transparent"===e)return"#000000";let t;t=e.startsWith("rgba")?e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/):e.match(/rgb?\((\d+),\s*(\d+),\s*(\d+)\)/);if(!t)return e;const c=parseInt(t[1],10).toString(16).padStart(2,"0"),o=parseInt(t[2],10).toString(16).padStart(2,"0"),n=parseInt(t[3],10).toString(16).padStart(2,"0");return`#${c}${o}${n}`.toUpperCase()}(window.getComputedStyle(e).backgroundColor),c=e.parentElement.querySelector(".mw-text-muted");c&&(c.textContent=t)})}document.addEventListener("DOMContentLoaded",function(){!function(){const e=document.querySelector(".mw-gallery-track");if(e){const t=document.querySelector(".mw-gallery-dots"),c=e.children,o=document.querySelector(".mw-gallery-desc"),n=document.querySelector(".mw-gallery-navi-prev"),s=document.querySelector(".mw-gallery-navi-next"),l=document.querySelector(".mw-gallery");let r=0;function a(){const t=l.offsetWidth;e.style.transform=`translateX(-${r*t}px)`}function i(e){const t=c.length;r=(e+t)%t,a(),document.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===r)}),o.textContent=c[r].dataset.desc}function d(){for(let e=0;e<c.length;e++){const c=document.createElement("span");c.className="mw-gallery-dot"+(0===e?" mw-active":""),c.addEventListener("click",()=>i(e)),t.appendChild(c)}}n.addEventListener("click",()=>i(r-1)),s.addEventListener("click",()=>i(r+1)),window.addEventListener("resize",a);let u=0;e.addEventListener("touchstart",e=>u=e.touches[0].clientX),e.addEventListener("touchend",e=>{const t=e.changedTouches[0].clientX-u;t>50&&i(r-1),t<-50&&i(r+1)}),d(),a()}}(),function(){const t=document.querySelector(".mw-theme-toggle");if(!t)return;const c=document.body,o=t.querySelector(".mw-theme-toggle-slider i"),n=getComputedStyle(document.documentElement).getPropertyValue("--mw-internal-theme-mode").trim()||"switchable";if("switchable"!==n)return console.log(`Theme mode fixed to: ${n}. Disabling toggle.`),o&&(o.className="light"===n?"fas fa-sun":"fas fa-moon"),"light"===n?t.classList.add("active"):t.classList.remove("active"),t.style.opacity="0.4",t.style.pointerEvents="none",t.style.cursor="default",t.setAttribute("aria-disabled","true"),localStorage.removeItem("mw-theme"),void("dark"===n&&c.classList.remove("mw-theme-light"));let s="light"===localStorage.getItem("mw-theme");const l=e=>{c.classList.toggle("mw-theme-light",e),t.classList.toggle("active",e),o&&(o.className=e?"fas fa-sun":"fas fa-moon")};l(s),t.addEventListener("click",()=>{s=!s,l(s),localStorage.setItem("mw-theme",s?"light":"dark"),setTimeout(e,400)})}(),e(),document.querySelectorAll(".mw-accordion-header").forEach(e=>{e.addEventListener("click",function(){this.classList.toggle("active");const e=this.nextElementSibling;e&&e.classList.toggle("active")})}),function(){const e=document.querySelector(".mw-menu-btn"),t=document.querySelector(".mw-navbar");if(!e||!t)return;function c(c){c.preventDefault(),c.stopPropagation(),e.classList.toggle("open"),t.classList.toggle("open")}e.addEventListener("click",c),e.addEventListener("touchstart",c,{passive:!1})}(),function(){const e=document.querySelectorAll(".mw-progress-fill");if(!e.length)return;const t=new IntersectionObserver((e,t)=>{e.forEach(e=>{if(!e.isIntersecting)return;const c=e.target,o=c.dataset.value||0;c.style.width=o+"%",t.unobserve(c)})},{root:null,threshold:.2});e.forEach(e=>t.observe(e))}(),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){const t=this.getAttribute("href");if("#"===t)return;if(!document.querySelector(t))return;const c=document.querySelector(".mw-menu-btn"),o=document.querySelector(".mw-navbar");c&&o&&(c.classList.remove("open"),o.classList.remove("open"))})}),function(){const e=document.querySelectorAll("section[id]"),t=document.querySelectorAll(".mw-navbar-link");if(0===e.length||0===t.length)return;window.addEventListener("scroll",function(e,t){let c;return function(){const o=this,n=arguments;clearTimeout(c),c=setTimeout(()=>e.apply(o,n),t)}}(function(){let c="";e.forEach(e=>{const t=e.offsetTop-100,o=e.clientHeight;scrollY>=t&&scrollY<t+o&&(c=e.getAttribute("id"))}),t.forEach(e=>{e.classList.remove("active");const t=e.getAttribute("href");if(t){const o=t.indexOf("#");if(-1!==o){t.substring(o+1)===c&&e.classList.add("active")}}})},100))}(),document.querySelectorAll(".mw-tabs-nav-item").forEach(e=>{e.addEventListener("click",function(){const e=this.closest(".mw-tabs");if(!e)return;e.querySelectorAll(".mw-tabs-nav-item").forEach(e=>{e.classList.remove("active")}),this.classList.add("active");const t=this.getAttribute("data-tab");if(!t)return;e.querySelectorAll(".mw-tabs-panel").forEach(e=>{e.classList.remove("active")});const c=document.getElementById(t);c&&c.classList.add("active")})}),document.querySelectorAll(".mw-alert-close").forEach(e=>{e.addEventListener("click",function(){const e=this.closest(".mw-alert");e&&(e.classList.add("mw-alert-closing"),setTimeout(()=>{e.classList.add("mw-alert-closed")},300))})}),function(){const e=document.querySelector(".mw-localhost-indicator-activated"),t=document.querySelector(".mw-header");if(e){if("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname||window.location.hostname.includes("192.168.")){const e=document.createElement("div");e.className="mw-localhost-indicator-pulse",t.prepend(e)}}}(),document.querySelectorAll(".mw-slider-container").forEach(e=>{const t=e.querySelector(".mw-slider"),c=e.querySelector(".mw-slider-value");if(!t||!c)return;const o=()=>{const e=Number(t.value),o=Number(t.max)||100,n=Math.round(e/o*100);t.style.setProperty("--value",n+"%"),c.classList.contains("mw-slider-numeric")?c.setAttribute("data-value",e):c.setAttribute("data-value",n)};t.addEventListener("input",o),o()}),document.querySelectorAll(".mw-modal-close").forEach(e=>{e.addEventListener("click",function(){const e=this.closest(".mw-modal-overlay");e&&e.classList.remove("mw-modal-open")})}),function(){const e=document.getElementById("login-button");e&&e.addEventListener("click",function(){const e=this.querySelector("i");e.classList.contains("fa-lock")?(e.classList.remove("fa-lock"),e.classList.add("fa-lock-open")):(e.classList.remove("fa-lock-open"),e.classList.add("fa-lock"))})}(),document.querySelectorAll(".mw-image-slider").forEach(e=>{const t=e.querySelectorAll(".mw-image-slider-overlay-image"),c=e.querySelectorAll("button[data-index]");if(!t.length||!c.length)return;let o=0;function n(){t.forEach(e=>{const t=parseInt(e.dataset.index);e.classList.toggle("active",t===o)}),c.forEach(e=>{const t=parseInt(e.dataset.index);e.classList.toggle("active",t===o)})}function s(e){o=e,n()}c.forEach(e=>{e.addEventListener("click",()=>{s(parseInt(e.dataset.index))})}),n()}),document.querySelectorAll(".mw-item-list-checkbox, .mw-item-list-checkbox-scroll").forEach(e=>{e.querySelectorAll("li").forEach(e=>{const t=e.querySelector('input[type="checkbox"]'),c=e.querySelector(".mw-checkbox");t&&c&&(t.checked&&e.classList.add("mw-selected"),e.addEventListener("click",function(e){e.target!==t&&e.target.closest(".mw-checkbox")!==c&&toggleCheckbox(this)}),t.addEventListener("change",function(){const e=this.closest("li");this.checked?e.classList.add("mw-selected"):e.classList.remove("mw-selected"),e.dispatchEvent(new CustomEvent("checkboxToggle",{detail:{checked:this.checked,item:e}}))}),c.addEventListener("click",function(e){setTimeout(()=>{const e=this.closest("li");this.querySelector('input[type="checkbox"]').checked?e.classList.add("mw-selected"):e.classList.remove("mw-selected")},0)}))})}),document.addEventListener("checkboxToggle",function(e){console.log("Checkbox toggled:",e.detail.checked,e.detail.item)})}),window.toggleCheckbox=function(e){const t=e.querySelector('input[type="checkbox"]');if(!t)return;const c=t.checked;t.checked=!c,t.checked?e.classList.add("mw-selected"):e.classList.remove("mw-selected"),e.dispatchEvent(new CustomEvent("checkboxToggle",{detail:{checked:t.checked,item:e}}))}}();
+!function(){"use strict";function e(){document.querySelectorAll(".color-swatch").forEach(e=>{const t=function(e){if(!e||"transparent"===e)return"#000000";const t=e=>Math.max(0,Math.min(255,Math.round(e))).toString(16).padStart(2,"0"),c=e.match(/color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\)/);if(c){const e="#"+t(255*c[1])+t(255*c[2])+t(255*c[3]),o=void 0===c[4]?1:parseFloat(c[4]);return(o<1?`${e} / ${o}`:e).toUpperCase()}const o=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(!o)return e;const n="#"+t(o[1])+t(o[2])+t(o[3]),s=void 0===o[4]?1:parseFloat(o[4]);return(s<1?`${n} / ${s}`:n).toUpperCase()}(window.getComputedStyle(e).backgroundColor),c=e.parentElement.querySelector(".mw-text-muted");c&&(c.textContent=t)})}document.addEventListener("DOMContentLoaded",function(){!function(){const e=document.querySelector(".mw-gallery-track");if(e){const t=document.querySelector(".mw-gallery-dots"),c=e.children,o=document.querySelector(".mw-gallery-desc"),n=document.querySelector(".mw-gallery-navi-prev"),s=document.querySelector(".mw-gallery-navi-next"),l=document.querySelector(".mw-gallery");let r=0;function i(){const t=l.offsetWidth;e.style.transform=`translateX(-${r*t}px)`}function a(e){const t=c.length;r=(e+t)%t,i(),document.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===r)}),o.textContent=c[r].dataset.desc}function d(){for(let e=0;e<c.length;e++){const c=document.createElement("span");c.className="mw-gallery-dot"+(0===e?" mw-active":""),c.addEventListener("click",()=>a(e)),t.appendChild(c)}}n.addEventListener("click",()=>a(r-1)),s.addEventListener("click",()=>a(r+1)),window.addEventListener("resize",i);let u=0;e.addEventListener("touchstart",e=>u=e.touches[0].clientX),e.addEventListener("touchend",e=>{const t=e.changedTouches[0].clientX-u;t>50&&a(r-1),t<-50&&a(r+1)}),d(),i()}}(),function(){const t=document.querySelector(".mw-theme-toggle");if(!t)return;const c=document.body,o=t.querySelector(".mw-theme-toggle-slider i"),n=getComputedStyle(document.documentElement).getPropertyValue("--mw-internal-theme-mode").trim()||"switchable";if("switchable"!==n)return console.log(`Theme mode fixed to: ${n}. Disabling toggle.`),o&&(o.className="light"===n?"fas fa-sun":"fas fa-moon"),"light"===n?t.classList.add("active"):t.classList.remove("active"),t.style.opacity="0.4",t.style.pointerEvents="none",t.style.cursor="default",t.setAttribute("aria-disabled","true"),localStorage.removeItem("mw-theme"),void("dark"===n&&c.classList.remove("mw-theme-light"));let s="light"===localStorage.getItem("mw-theme");const l=e=>{c.classList.toggle("mw-theme-light",e),t.classList.toggle("active",e),o&&(o.className=e?"fas fa-sun":"fas fa-moon")};l(s),t.addEventListener("click",()=>{s=!s,l(s),localStorage.setItem("mw-theme",s?"light":"dark"),setTimeout(e,400)})}(),e(),document.querySelectorAll(".mw-accordion-header").forEach(e=>{e.addEventListener("click",function(){this.classList.toggle("active");const e=this.nextElementSibling;e&&e.classList.toggle("active")})}),function(){const e=document.querySelector(".mw-menu-btn"),t=document.querySelector(".mw-navbar");if(!e||!t)return;function c(){e.classList.remove("open"),t.classList.remove("open")}function o(c){c.preventDefault(),c.stopPropagation(),e.classList.toggle("open"),t.classList.toggle("open")}e.addEventListener("click",o),e.addEventListener("touchstart",o,{passive:!1}),document.addEventListener("click",function(o){t.classList.contains("open")&&(t.contains(o.target)||e.contains(o.target)||c())}),document.addEventListener("keydown",function(e){"Escape"===e.key&&c()})}(),function(){const e=document.querySelectorAll(".mw-progress-fill");if(!e.length)return;const t=new IntersectionObserver((e,t)=>{e.forEach(e=>{if(!e.isIntersecting)return;const c=e.target,o=c.dataset.value||0;c.style.width=o+"%",t.unobserve(c)})},{root:null,threshold:.2});e.forEach(e=>t.observe(e))}(),document.querySelectorAll('a[href^="#"]').forEach(e=>{e.addEventListener("click",function(e){const t=this.getAttribute("href");if("#"===t)return;if(!document.querySelector(t))return;const c=document.querySelector(".mw-menu-btn"),o=document.querySelector(".mw-navbar");c&&o&&(c.classList.remove("open"),o.classList.remove("open"))})}),function(){const e=document.querySelectorAll("section[id]"),t=document.querySelectorAll(".mw-navbar-link");if(0===e.length||0===t.length)return;window.addEventListener("scroll",function(e,t){let c;return function(){const o=this,n=arguments;clearTimeout(c),c=setTimeout(()=>e.apply(o,n),t)}}(function(){let c="";e.forEach(e=>{const t=e.offsetTop-100,o=e.clientHeight;scrollY>=t&&scrollY<t+o&&(c=e.getAttribute("id"))}),t.forEach(e=>{e.classList.remove("active");const t=e.getAttribute("href");if(t){const o=t.indexOf("#");if(-1!==o){t.substring(o+1)===c&&e.classList.add("active")}}})},100))}(),document.querySelectorAll(".mw-tabs-nav-item").forEach(e=>{e.addEventListener("click",function(){const e=this.closest(".mw-tabs");if(!e)return;e.querySelectorAll(".mw-tabs-nav-item").forEach(e=>{e.classList.remove("active")}),this.classList.add("active");const t=this.getAttribute("data-tab");if(!t)return;e.querySelectorAll(".mw-tabs-panel").forEach(e=>{e.classList.remove("active")});const c=document.getElementById(t);c&&c.classList.add("active")})}),document.querySelectorAll(".mw-alert-close").forEach(e=>{e.addEventListener("click",function(){const e=this.closest(".mw-alert");e&&(e.classList.add("mw-alert-closing"),setTimeout(()=>{e.classList.add("mw-alert-closed")},300))})}),function(){const e=document.querySelector(".mw-localhost-indicator-activated"),t=document.querySelector(".mw-header");if(e){if("localhost"===window.location.hostname||"127.0.0.1"===window.location.hostname||window.location.hostname.includes("192.168.")){const e=document.createElement("div");e.className="mw-localhost-indicator-pulse",t.prepend(e)}}}(),document.querySelectorAll(".mw-slider-container").forEach(e=>{const t=e.querySelector(".mw-slider"),c=e.querySelector(".mw-slider-value");if(!t||!c)return;const o=()=>{const e=Number(t.value),o=Number(t.max)||100,n=Math.round(e/o*100);t.style.setProperty("--value",n+"%"),c.classList.contains("mw-slider-numeric")?c.setAttribute("data-value",e):c.setAttribute("data-value",n)};t.addEventListener("input",o),o()}),document.querySelectorAll(".mw-modal-close").forEach(e=>{e.addEventListener("click",function(){const e=this.closest(".mw-modal-overlay");e&&e.classList.remove("mw-modal-open")})}),function(){const e=document.getElementById("login-button");e&&e.addEventListener("click",function(){const e=this.querySelector("i");e.classList.contains("fa-lock")?(e.classList.remove("fa-lock"),e.classList.add("fa-lock-open")):(e.classList.remove("fa-lock-open"),e.classList.add("fa-lock"))})}(),document.querySelectorAll(".mw-image-slider").forEach(e=>{const t=e.querySelectorAll(".mw-image-slider-overlay-image"),c=e.querySelectorAll("button[data-index]");if(!t.length||!c.length)return;let o=0;function n(){t.forEach(e=>{const t=parseInt(e.dataset.index);e.classList.toggle("active",t===o)}),c.forEach(e=>{const t=parseInt(e.dataset.index);e.classList.toggle("active",t===o)})}function s(e){o=e,n()}c.forEach(e=>{e.addEventListener("click",()=>{s(parseInt(e.dataset.index))})}),n()}),document.querySelectorAll(".mw-item-list-checkbox, .mw-item-list-checkbox-scroll").forEach(e=>{e.querySelectorAll("li").forEach(e=>{const t=e.querySelector('input[type="checkbox"]'),c=e.querySelector(".mw-checkbox");t&&c&&(t.checked&&e.classList.add("mw-selected"),e.addEventListener("click",function(e){e.target!==t&&e.target.closest(".mw-checkbox")!==c&&toggleCheckbox(this)}),t.addEventListener("change",function(){const e=this.closest("li");this.checked?e.classList.add("mw-selected"):e.classList.remove("mw-selected"),e.dispatchEvent(new CustomEvent("checkboxToggle",{detail:{checked:this.checked,item:e}}))}),c.addEventListener("click",function(e){setTimeout(()=>{const e=this.closest("li");this.querySelector('input[type="checkbox"]').checked?e.classList.add("mw-selected"):e.classList.remove("mw-selected")},0)}))})}),document.addEventListener("checkboxToggle",function(e){console.log("Checkbox toggled:",e.detail.checked,e.detail.item)})}),window.toggleCheckbox=function(e){const t=e.querySelector('input[type="checkbox"]');if(!t)return;const c=t.checked;t.checked=!c,t.checked?e.classList.add("mw-selected"):e.classList.remove("mw-selected"),e.dispatchEvent(new CustomEvent("checkboxToggle",{detail:{checked:t.checked,item:e}}))}}();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maverick-wave",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "config": {
     "version_short": "3.3"
   },
@@ -10,9 +10,11 @@
   "scripts": {
     "clean": "gulp clean",
     "format": "prettier --write \"**/*.{scss,js,json,html,md}\"",
+    "format:check": "prettier --check \"**/*.{scss,js,json,html,md}\"",
     "showcase": "http-server -c-1 -p 8888 dist",
     "start": "gulp",
     "build": "gulp clean && gulp build",
+    "verify": "node scripts/verify.js",
     "release": "gulp release"
   },
   "repository": {

package/scripts/verify.js

@@ -0,0 +1,137 @@
+#!/usr/bin/env node
+/**
+ * Consistency checks between the built CSS and everything that references it.
+ * Runs against dist/, so `npm run build` has to happen first.
+ *
+ *   1. every var(--mw-*) has a definition
+ *   2. every --mw-* definition is used somewhere
+ *   3. every mw-* class in the markup exists in the built CSS
+ *
+ * Sources are scanned rather than hard-coded so a new partial is covered
+ * automatically. Exits 1 on any error; warnings never fail the build.
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const ROOT = path.join(__dirname, '..');
+const CSS = path.join(ROOT, 'dist', 'maverick-wave.min.css');
+const HTML = path.join(ROOT, 'dist', 'index.html');
+const JS = path.join(ROOT, 'src', 'js', 'main.js');
+
+// Everything that documents classes: the slash command plus every markdown file
+// of the maverick-wave skill. Collected by walking the tree, so a new reference
+// or example file is covered without touching this list.
+const DOCS = [
+  path.join(ROOT, '.claude', 'commands', 'mw.md'),
+  ...markdownFiles(path.join(ROOT, '.claude', 'skills')),
+];
+
+// Tokens read by JavaScript or reserved for consumers, so "unused in CSS" is fine
+const TOKEN_ALLOWLIST = new Set(['--mw-internal-theme-mode']);
+
+// Classes that exist only as JS hooks or are applied by the host application
+const CLASS_ALLOWLIST = new Set([]);
+
+const read = (p) => (fs.existsSync(p) ? fs.readFileSync(p, 'utf8') : null);
+const all = (str, re) => [...str.matchAll(re)].map((m) => m[1]);
+
+function markdownFiles(dir) {
+  if (!fs.existsSync(dir)) return [];
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) return markdownFiles(full);
+    return entry.name.endsWith('.md') ? [full] : [];
+  });
+}
+
+const errors = [];
+const warnings = [];
+
+const css = read(CSS);
+const html = read(HTML);
+if (!css || !html) {
+  console.error(
+    'dist/ is missing or incomplete — run `npm run build` before `npm run verify`.'
+  );
+  process.exit(1);
+}
+const js = read(JS) || '';
+const docs = DOCS.map(read).filter(Boolean).join('\n');
+
+// --- 1 + 2: custom properties ---------------------------------------------
+
+const tokensDefined = new Set(all(css, /(--mw-[a-z0-9-]+)\s*:/g));
+const tokensUsed = new Set([
+  ...all(css, /var\((--mw-[a-z0-9-]+)/g),
+  ...all(html, /var\((--mw-[a-z0-9-]+)/g),
+  ...all(js, /(--mw-[a-z0-9-]+)/g),
+]);
+
+for (const t of [...tokensUsed].sort()) {
+  if (!tokensDefined.has(t)) {
+    errors.push(`token referenced but never defined: var(${t})`);
+  }
+}
+for (const t of [...tokensDefined].sort()) {
+  if (!tokensUsed.has(t) && !TOKEN_ALLOWLIST.has(t)) {
+    errors.push(
+      `token defined but never used: ${t} — overriding it would do nothing`
+    );
+  }
+}
+
+// --- 3: classes ------------------------------------------------------------
+
+const classesInCss = new Set(all(css, /\.(mw-[a-z0-9-]+)/g));
+
+// Classes the JS adds at runtime, or queries as a hook, count as legitimate
+// targets — including selector strings like '.mw-foo' and '[class~="mw-foo"]'
+const classesInJs = new Set(all(js, /\.?(mw-[a-z0-9-]+)/g));
+
+const classesInMarkup = new Map(); // class -> where it was seen
+for (const attr of html.matchAll(/class\s*=\s*"([^"]*)"/g)) {
+  for (const c of attr[1].split(/\s+/)) {
+    if (c.startsWith('mw-') && !classesInMarkup.has(c)) {
+      classesInMarkup.set(c, 'showcase');
+    }
+  }
+}
+// The docs name classes as `mw-foo` in prose and code fences. A trailing hyphen
+// means a family was written as a stem (`mw-btn-mini-` + variants), never a real
+// class — skip those instead of reporting them as missing.
+for (const c of all(docs, /[`."'\s](mw-[a-z0-9-]+)/g)) {
+  if (c.endsWith('-')) continue;
+  if (!classesInMarkup.has(c)) classesInMarkup.set(c, 'docs');
+}
+
+for (const [c, where] of [...classesInMarkup].sort()) {
+  if (classesInCss.has(c) || classesInJs.has(c) || CLASS_ALLOWLIST.has(c)) {
+    continue;
+  }
+  errors.push(`class used in ${where} but not generated by the CSS: .${c}`);
+}
+
+// Informational: framework classes the showcase never demonstrates
+const undocumented = [...classesInCss].filter(
+  (c) => !classesInMarkup.has(c) && !classesInJs.has(c)
+);
+if (undocumented.length) {
+  warnings.push(
+    `${undocumented.length} classes exist in the CSS but are not shown in the showcase`
+  );
+}
+
+// --- report ----------------------------------------------------------------
+
+const label = (n, s) => `${n} ${s}${n === 1 ? '' : 's'}`;
+
+for (const w of warnings) console.log(`  warn   ${w}`);
+for (const e of errors) console.error(`  ERROR  ${e}`);
+
+console.log(
+  `\nverify: ${tokensDefined.size} tokens, ${classesInCss.size} classes checked — ` +
+    (errors.length ? `${label(errors.length, 'error')}` : 'clean')
+);
+
+process.exit(errors.length ? 1 : 0);

package/src/js/main.js

@@ -268,23 +268,35 @@
   }
 
   function rgbToHex(rgb) {
-    // Check if the color is in RGB/RGBA format
     if (!rgb || rgb === 'transparent') return '#000000';
 
-    let rgbArray;
-    if (rgb.startsWith('rgba')) {
-      rgbArray = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
-    } else {
-      rgbArray = rgb.match(/rgb?\((\d+),\s*(\d+),\s*(\d+)\)/);
+    const toHex = (v) =>
+      Math.max(0, Math.min(255, Math.round(v)))
+        .toString(16)
+        .padStart(2, '0');
+
+    const srgb = rgb.match(
+      /color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\)/
+    );
+    if (srgb) {
+      const hex =
+        '#' +
+        toHex(srgb[1] * 255) +
+        toHex(srgb[2] * 255) +
+        toHex(srgb[3] * 255);
+      const alpha = srgb[4] === undefined ? 1 : parseFloat(srgb[4]);
+      return (alpha < 1 ? `${hex} / ${alpha}` : hex).toUpperCase();
     }
 
+    const rgbArray = rgb.match(
+      /rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/
+    );
     if (!rgbArray) return rgb;
 
-    const r = parseInt(rgbArray[1], 10).toString(16).padStart(2, '0');
-    const g = parseInt(rgbArray[2], 10).toString(16).padStart(2, '0');
-    const b = parseInt(rgbArray[3], 10).toString(16).padStart(2, '0');
-
-    return `#${r}${g}${b}`.toUpperCase();
+    const hex =
+      '#' + toHex(rgbArray[1]) + toHex(rgbArray[2]) + toHex(rgbArray[3]);
+    const alpha = rgbArray[4] === undefined ? 1 : parseFloat(rgbArray[4]);
+    return (alpha < 1 ? `${hex} / ${alpha}` : hex).toUpperCase();
   }
 
   // ===== Accordions =====
@@ -306,6 +318,11 @@
 
     if (!menuBtn || !navbar) return;
 
+    function closeMenu() {
+      menuBtn.classList.remove('open');
+      navbar.classList.remove('open');
+    }
+
     function toggleMenu(e) {
       e.preventDefault();
       e.stopPropagation();
@@ -316,6 +333,17 @@
     // Add multiple event listeners for better iOS compatibility
     menuBtn.addEventListener('click', toggleMenu);
     menuBtn.addEventListener('touchstart', toggleMenu, { passive: false });
+
+    // The scrim is a body pseudo-element, so its taps land on the document
+    document.addEventListener('click', function (e) {
+      if (!navbar.classList.contains('open')) return;
+      if (navbar.contains(e.target) || menuBtn.contains(e.target)) return;
+      closeMenu();
+    });
+
+    document.addEventListener('keydown', function (e) {
+      if (e.key === 'Escape') closeMenu();
+    });
   }
 
   // ===== Progress Bars =====

package/src/partials/accordions-container.html

@@ -40,19 +40,17 @@
         </p>
         <pre class="mw-code-block"><code>/* Your custom-styles.css */
   :root {
-    /* Override base colors */
-    --mw-primary-color: #e94560; 
+    /* Root colors — hover tones, translucent backgrounds and borders
+       are derived from them at runtime via color-mix() */
+    --mw-primary-color: #e94560;
     --mw-secondary-color: #f39c12;
-  
-    /* Override specific theme colors */
-    --mw-dark-page-background: #1a1a2e; 
-    --mw-light-card-background: #f0f0f5; 
-  
-    /* Override component variables */
-    --mw-alert-primary-bg: rgba(233, 69, 96, 0.15);
-  
-    /* Override font */
-    --mw-font-family-base: 'Your Custom Font', sans-serif; 
+
+    /* Theme colors */
+    --mw-dark-page-background: #1a1a2e;
+    --mw-light-page-background: #f0f0f5;
+
+    /* Font */
+    --mw-font-family-base: 'Your Custom Font', sans-serif;
   }</code></pre>
         <p>This method is flexible and doesn't require a Sass build process.</p>
 
@@ -61,24 +59,21 @@
         </h5>
         <p>
           If you integrate MaverickWave's SCSS source files into your project,
-          you can override the framework's default Sass variables
-          <em>before</em> importing it. This gives you deeper control and allows
-          derived colors (calculated using Sass functions like
-          <code>rgba()</code> or <code>color.adjust()</code> within the
-          framework) to automatically use your custom base colors.
+          pass your overrides through <code>@use ... with (...)</code>. A plain
+          assignment before the <code>@use</code> has no effect &mdash; the root
+          colors are declared with <code>!default</code>, which only the
+          configuration reaches.
         </p>
-        <pre class="mw-code-block"><code>// Your main.scss
-  
-  // Override Sass variables BEFORE importing
-  $primary-color: #e94560;
-  $font-family: 'Your Custom Font', sans-serif;
-  $mw-theme-mode: 'dark'; // Optionally set theme mode
-  
-  // Import MaverickWave
-  @import 'path/to/maverick-wave/scss/maverick-wave';</code></pre>
+        <pre class="mw-code-block"><code>// Your styles.scss
+
+  @use 'path/to/maverick-wave/src/scss/main' with (
+    $primary-color: #e94560,
+    $mw-theme-mode: 'dark' // 'switchable' | 'dark' | 'light'
+  );</code></pre>
         <p>
           This method requires you to have a Sass compiler set up in your
-          project.
+          project. Single components can be imported instead of
+          <code>main</code> &mdash; see the "Get Started" section.
         </p>
         <p class="mw-mt-4">
           <button

package/src/partials/alerts-container.html

@@ -118,3 +118,29 @@
     </button>
   </div>
 </div>
+
+<h4 class="mw-mb-2 mw-mt-8">Toast Stack</h4>
+<p class="mw-text-muted mw-mb-3">
+  Alerts become toasts by putting them in a fixed, stacked container. Positions:
+  <code>mw-toast-stack-top-right</code> (default),
+  <code>mw-toast-stack-top-center</code>,
+  <code>mw-toast-stack-bottom-right</code>. Auto-dismiss stays the application's
+  job.
+</p>
+
+<div class="mw-card mw-card-simple">
+  <pre
+    class="mw-code-block"
+  ><code>&lt;div class="mw-toast-stack mw-toast-stack-top-right"&gt;
+  &lt;div class="mw-alert mw-alert-success"&gt;
+    &lt;div class="mw-alert-icon"&gt;&lt;i class="fas fa-check-circle"&gt;&lt;/i&gt;&lt;/div&gt;
+    &lt;div class="mw-alert-content"&gt;Entry saved.&lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+  <p class="mw-text-muted mw-text-sm">
+    The container is <code>position: fixed</code>, so it cannot be shown inline
+    here. Its width is capped at <code>min(380px, calc(100vw - 2rem))</code>, it
+    lets clicks pass through everywhere except on a toast, and the entry
+    animation respects <code>prefers-reduced-motion</code>.
+  </p>
+</div>

package/src/partials/avatars-container.html

@@ -64,6 +64,28 @@
         </div>
       </div>
 
+      <h4 class="mw-mb-2 mw-mt-4">Avatar Initials</h4>
+      <p class="mw-text-muted mw-text-sm">
+        For users without a picture. The color variants tint the surface here
+        instead of the border.
+      </p>
+      <div>
+        <div class="mw-avatar mw-avatar-initials mw-avatar-xs">MW</div>
+        <div class="mw-avatar mw-avatar-initials mw-avatar-sm">AB</div>
+        <div class="mw-avatar mw-avatar-initials">CD</div>
+        <div class="mw-avatar mw-avatar-initials mw-avatar-secondary">EF</div>
+      </div>
+      <div>
+        <div class="mw-avatar mw-avatar-initials mw-avatar-success">GH</div>
+        <div class="mw-avatar mw-avatar-initials mw-avatar-warning">IJ</div>
+        <div class="mw-avatar mw-avatar-initials mw-avatar-danger">KL</div>
+        <div
+          class="mw-avatar mw-avatar-initials mw-avatar-info mw-avatar-square"
+        >
+          MN
+        </div>
+      </div>
+
       <h4 class="mw-mb-2 mw-mt-4">Avatar Group</h4>
       <div class="mw-avatar-group mw-mt-3 mw-mb-5">
         <div class="mw-avatar mw-avatar-sm">

package/src/partials/buttons-container.html

@@ -11,6 +11,12 @@
         <button type="button" class="mw-btn mw-btn-secondary">
           Secondary Button
         </button>
+        <button type="button" class="mw-btn mw-btn-danger">
+          Danger Button
+        </button>
+        <button type="button" class="mw-btn mw-btn-success">
+          Success Button
+        </button>
         <button type="button" class="mw-btn mw-btn-outline">
           Outline Button
         </button>
@@ -46,37 +52,27 @@
     <h3 class="mw-mb-4">Buttons with Icons</h3>
     <div class="mw-card mw-card-simple">
       <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-4">
-        <button type="button" class="mw-btn mw-btn-primary mw-btn-icon">
+        <button type="button" class="mw-btn mw-btn-primary">
           <i class="fas fa-save"></i>
           Save Changes
         </button>
 
-        <button type="button" class="mw-btn mw-btn-secondary mw-btn-icon">
+        <button type="button" class="mw-btn mw-btn-secondary">
           <i class="fas fa-plus"></i>
           Add Item
         </button>
 
-        <button
-          type="button"
-          href="#"
-          class="mw-btn mw-btn-outline mw-btn-icon"
-        >
+        <button type="button" href="#" class="mw-btn mw-btn-outline">
           <i class="fas fa-arrow-left"></i>
           Go Back
         </button>
 
-        <button
-          type="button"
-          class="mw-btn mw-btn-primary mw-btn-sm mw-btn-icon"
-        >
+        <button type="button" class="mw-btn mw-btn-primary mw-btn-sm">
           <i class="fas fa-check"></i>
           OK
         </button>
 
-        <button
-          type="button"
-          class="mw-btn mw-btn-outline mw-btn-lg mw-btn-icon"
-        >
+        <button type="button" class="mw-btn mw-btn-outline mw-btn-lg">
           <i class="fas fa-upload"></i>
           Upload File
         </button>

package/src/partials/cards-container.html

@@ -71,7 +71,7 @@
       <h5 class="mw-card-stack-title">Frontend</h5>
     </div>
     <div class="mw-card-stack-body">
-      <div class="mw-tags mw-tags-stack">
+      <div class="mw-tags">
         <span class="mw-tags-item">React</span>
         <span class="mw-tags-item">TypeScript</span>
         <span class="mw-tags-item">Next.js</span>
@@ -91,7 +91,7 @@
       <h5 class="mw-card-stack-title">Backend</h5>
     </div>
     <div class="mw-card-stack-body">
-      <div class="mw-tags mw-tags-stack">
+      <div class="mw-tags">
         <span class="mw-tags-item">Node.js</span>
         <span class="mw-tags-item">Express</span>
         <span class="mw-tags-item">NestJS</span>
@@ -111,7 +111,7 @@
       <h5 class="mw-card-stack-title">Data Storage</h5>
     </div>
     <div class="mw-card-stack-body">
-      <div class="mw-tags mw-tags-stack">
+      <div class="mw-tags">
         <span class="mw-tags-item">MongoDB</span>
         <span class="mw-tags-item">PostgreSQL</span>
         <span class="mw-tags-item">Redis</span>
@@ -131,7 +131,7 @@
       <h5 class="mw-card-stack-title">DevOps & Cloud</h5>
     </div>
     <div class="mw-card-stack-body">
-      <div class="mw-tags mw-tags-stack">
+      <div class="mw-tags">
         <span class="mw-tags-item">Docker</span>
         <span class="mw-tags-item">GitHub Actions</span>
         <span class="mw-tags-item">AWS</span>
@@ -280,10 +280,10 @@
       <p class="mw-card-text">
         Tags can be used to categorize content or show related topics.
       </p>
-      <div class="mw-tags">
-        <span class="mw-tags-item">Primary</span>
-        <span class="mw-tags-item mw-tags-item-success">Success</span>
-        <span class="mw-tags-item mw-tags-item-danger">Danger</span>
+      <div class="mw-d-flex mw-flex-wrap mw-gap-2">
+        <span class="mw-tag mw-tag-primary">Primary</span>
+        <span class="mw-tag mw-tag-success">Success</span>
+        <span class="mw-tag mw-tag-danger">Danger</span>
       </div>
       <div class="mw-card-footer">
         <button type="button" class="mw-btn mw-btn-link">Learn More</button>

package/src/partials/colors-container.html

@@ -2,6 +2,13 @@
 
 <!-- the hex code string is getting updated via javascript! -->
 
+<p class="mw-text-muted mw-mb-6">
+  These twelve are the only colors you ever set. Everything else &mdash; hover
+  tones, translucent backgrounds, borders, muted text &mdash; is derived from
+  them at runtime with <code>color-mix()</code>, so overriding a root token
+  cascades to all of its variants.
+</p>
+
 <div class="mw-grid-auto-sm">
   <div class="mw-card mw-card-simple color-card">
     <div class="mw-text-center">
@@ -29,9 +36,9 @@
     <div class="mw-text-center">
       <div
         class="color-swatch"
-        style="background: var(--mw-page-background)"
+        style="background: var(--mw-success-color)"
       ></div>
-      <p>Page Background</p>
+      <p>Success</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
@@ -40,33 +47,36 @@
     <div class="mw-text-center">
       <div
         class="color-swatch"
-        style="background: var(--mw-card-background)"
+        style="background: var(--mw-warning-color)"
       ></div>
-      <p>Card Background</p>
+      <p>Warning</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
 
   <div class="mw-card mw-card-simple color-card">
     <div class="mw-text-center">
-      <div class="color-swatch" style="background: var(--mw-border)"></div>
-      <p>Border</p>
+      <div
+        class="color-swatch"
+        style="background: var(--mw-danger-color)"
+      ></div>
+      <p>Danger</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
 
   <div class="mw-card mw-card-simple color-card">
     <div class="mw-text-center">
-      <div class="color-swatch" style="background: var(--mw-shadow)"></div>
-      <p>Shadow</p>
+      <div class="color-swatch" style="background: var(--mw-info-color)"></div>
+      <p>Info</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
 
   <div class="mw-card mw-card-simple color-card">
     <div class="mw-text-center">
-      <div class="color-swatch" style="background: var(--mw-text-color)"></div>
-      <p>Text</p>
+      <div class="color-swatch" style="background: var(--mw-gray-color)"></div>
+      <p>Gray</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
@@ -75,9 +85,9 @@
     <div class="mw-text-center">
       <div
         class="color-swatch"
-        style="background: var(--mw-text-muted-color)"
+        style="background: var(--mw-accent-text-color)"
       ></div>
-      <p>Text Secondary</p>
+      <p>Accent Text</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
@@ -86,9 +96,9 @@
     <div class="mw-text-center">
       <div
         class="color-swatch"
-        style="background: var(--mw-success-color)"
+        style="background: var(--mw-dark-page-background)"
       ></div>
-      <p>Success</p>
+      <p>Dark Page</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
@@ -97,9 +107,9 @@
     <div class="mw-text-center">
       <div
         class="color-swatch"
-        style="background: var(--mw-warning-color)"
+        style="background: var(--mw-dark-text-color)"
       ></div>
-      <p>Warning</p>
+      <p>Dark Text</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
@@ -108,17 +118,20 @@
     <div class="mw-text-center">
       <div
         class="color-swatch"
-        style="background: var(--mw-danger-color)"
+        style="background: var(--mw-light-page-background)"
       ></div>
-      <p>Danger</p>
+      <p>Light Page</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>
 
   <div class="mw-card mw-card-simple color-card">
     <div class="mw-text-center">
-      <div class="color-swatch" style="background: var(--mw-info-color)"></div>
-      <p>Info</p>
+      <div
+        class="color-swatch"
+        style="background: var(--mw-light-text-color)"
+      ></div>
+      <p>Light Text</p>
       <p class="mw-text-muted">#000000</p>
     </div>
   </div>