maverick-wave 3.3.2 → 3.5.0

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";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}}))}}();
+!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(){document.querySelectorAll(".mw-gallery").forEach(e=>{const t=e.closest(".mw-gallery-container")||e.parentElement;t&&function(e,t){const c=t.querySelector(".mw-gallery-track");if(!c||!c.children.length)return;const o=c.children,n=e.querySelector(".mw-gallery-dots"),s=e.querySelector(".mw-gallery-desc"),l=t.querySelector(".mw-gallery-navi-prev"),r=t.querySelector(".mw-gallery-navi-next");let a=0;function i(e){const t=o.length;a=(e+t)%t,c.style.transform=`translateX(-${100*a}%)`,n&&n.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===a)}),s&&(s.textContent=o[a].dataset.desc||"")}if(n)for(let e=0;e<o.length;e++){const t=document.createElement("span");t.className="mw-gallery-dot"+(0===e?" mw-active":""),t.addEventListener("click",()=>i(e)),n.appendChild(t)}l&&l.addEventListener("click",()=>i(a-1)),r&&r.addEventListener("click",()=>i(a+1));let d=0;c.addEventListener("touchstart",e=>d=e.touches[0].clientX),c.addEventListener("touchend",e=>{const t=e.changedTouches[0].clientX-d;t>50&&i(a-1),t<-50&&i(a+1)}),i(0)}(t,e)}),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,8 +1,8 @@
 {
   "name": "maverick-wave",
-  "version": "3.3.2",
+  "version": "3.5.0",
   "config": {
-    "version_short": "3.3"
+    "version_short": "3.5"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/js/main.js

@@ -119,64 +119,77 @@
 
   // ===== Gallery Component =====
   function initGalleries() {
-    const track = document.querySelector('.mw-gallery-track');
+    document.querySelectorAll('.mw-gallery').forEach((gallery) => {
+      // Dots and caption sit next to .mw-gallery, not inside it, so the
+      // container is the scope — with the parent as a fallback, otherwise a
+      // markup without the wrapper would silently stay dead
+      const scope =
+        gallery.closest('.mw-gallery-container') || gallery.parentElement;
+      if (scope) initGallery(scope, gallery);
+    });
+  }
 
-    if (track) {
-      const dots = document.querySelector('.mw-gallery-dots');
-      const slides = track.children;
-      const descBox = document.querySelector('.mw-gallery-desc');
-      const prevBtn = document.querySelector('.mw-gallery-navi-prev');
-      const nextBtn = document.querySelector('.mw-gallery-navi-next');
-      const sliderContainer = document.querySelector('.mw-gallery');
+  function initGallery(container, gallery) {
+    const track = gallery.querySelector('.mw-gallery-track');
+    if (!track || !track.children.length) return;
 
-      let current = 0;
+    const slides = track.children;
 
-      function updateSliderPosition() {
-        const slideWidth = sliderContainer.offsetWidth;
-        track.style.transform = `translateX(-${current * slideWidth}px)`;
-      }
+    // Everything below the track is optional — a gallery may well ship
+    // without arrows, dots or a caption, and a missing one must not throw
+    const dotsBox = container.querySelector('.mw-gallery-dots');
+    const descBox = container.querySelector('.mw-gallery-desc');
+    const prevBtn = gallery.querySelector('.mw-gallery-navi-prev');
+    const nextBtn = gallery.querySelector('.mw-gallery-navi-next');
 
-      function goToSlide(index) {
-        const total = slides.length;
-        current = (index + total) % total;
-        updateSliderPosition();
+    let current = 0;
 
-        document.querySelectorAll('.mw-gallery-dot').forEach((dot, i) => {
+    function goToSlide(index) {
+      const total = slides.length;
+      current = (index + total) % total;
+
+      // Percentages refer to the track's own width, which is one slide —
+      // so no measuring and nothing to recalculate on resize
+      track.style.transform = `translateX(-${current * 100}%)`;
+
+      if (dotsBox) {
+        dotsBox.querySelectorAll('.mw-gallery-dot').forEach((dot, i) => {
           dot.classList.toggle('mw-active', i === current);
         });
+      }
 
-        descBox.textContent = slides[current].dataset.desc;
+      if (descBox) {
+        descBox.textContent = slides[current].dataset.desc || '';
       }
+    }
 
-      function initDots() {
-        for (let i = 0; i < slides.length; i++) {
-          const dot = document.createElement('span');
-          dot.className = 'mw-gallery-dot' + (i === 0 ? ' mw-active' : '');
-          dot.addEventListener('click', () => goToSlide(i));
-          dots.appendChild(dot);
-        }
+    if (dotsBox) {
+      for (let i = 0; i < slides.length; i++) {
+        const dot = document.createElement('span');
+        dot.className = 'mw-gallery-dot' + (i === 0 ? ' mw-active' : '');
+        dot.addEventListener('click', () => goToSlide(i));
+        dotsBox.appendChild(dot);
       }
+    }
 
+    if (prevBtn)
       prevBtn.addEventListener('click', () => goToSlide(current - 1));
+    if (nextBtn)
       nextBtn.addEventListener('click', () => goToSlide(current + 1));
 
-      window.addEventListener('resize', updateSliderPosition);
-
-      // Optional: Swipe support
-      let startX = 0;
-      track.addEventListener(
-        'touchstart',
-        (e) => (startX = e.touches[0].clientX)
-      );
-      track.addEventListener('touchend', (e) => {
-        const delta = e.changedTouches[0].clientX - startX;
-        if (delta > 50) goToSlide(current - 1);
-        if (delta < -50) goToSlide(current + 1);
-      });
+    // Optional: Swipe support
+    let startX = 0;
+    track.addEventListener(
+      'touchstart',
+      (e) => (startX = e.touches[0].clientX)
+    );
+    track.addEventListener('touchend', (e) => {
+      const delta = e.changedTouches[0].clientX - startX;
+      if (delta > 50) goToSlide(current - 1);
+      if (delta < -50) goToSlide(current + 1);
+    });
 
-      initDots();
-      updateSliderPosition();
-    }
+    goToSlide(0);
   }
 
   // ===== Theme Toggle =====

package/src/partials/utilities-container.html

@@ -11,6 +11,24 @@
     <div class="mw-card mw-card-simple mw-p-2">Small padding</div>
     <div class="mw-card mw-card-simple mw-p-4 mw-mt-4">Medium padding</div>
     <div class="mw-card mw-card-simple mw-p-6 mw-mt-4">Large padding</div>
+
+    <h4 class="mw-mt-6 mw-mb-2">Auto Margins</h4>
+    <p class="mw-text-muted mw-text-sm mw-mb-3">
+      Every margin utility also takes <code>auto</code> &mdash;
+      <code>mw-mx-auto</code> centers a block, <code>mw-ml-auto</code> pushes a
+      flex item to the far side.
+    </p>
+
+    <div class="mw-card mw-card-simple mw-mb-4">
+      <div class="mw-card mw-card-simple mw-mx-auto" style="width: 60%">
+        mw-mx-auto
+      </div>
+    </div>
+
+    <div class="mw-card mw-card-simple mw-d-flex mw-items-center mw-gap-3">
+      <span>Left</span>
+      <span class="mw-tag mw-tag-primary mw-ml-auto">mw-ml-auto</span>
+    </div>
   </div>
 
   <div>
@@ -34,7 +52,7 @@
       </div>
     </div>
 
-    <div class="mw-card mw-card-simple">
+    <div class="mw-card mw-card-simple mw-mb-4">
       <h4 class="mw-mb-2">Alignment</h4>
       <div
         class="mw-d-flex mw-justify-center mw-items-center mw-gap-3"
@@ -44,12 +62,26 @@
         <div class="mw-card mw-card-simple mw-p-2">Centered</div>
       </div>
     </div>
+
+    <div class="mw-card mw-card-simple">
+      <h4 class="mw-mb-2">Align Self</h4>
+      <p class="mw-text-muted mw-text-sm mw-mb-3">
+        <code>mw-items-*</code> sets the rule for the whole container,
+        <code>mw-self-*</code> lets a single child break out of it.
+      </p>
+      <div class="mw-d-flex mw-items-stretch mw-gap-3" style="height: 130px">
+        <div class="mw-card mw-card-simple mw-p-2">stretch</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-self-start">start</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-self-center">center</div>
+        <div class="mw-card mw-card-simple mw-p-2 mw-self-end">end</div>
+      </div>
+    </div>
   </div>
 
   <div>
     <h3 class="mw-mb-4">Gap Utilities</h3>
     <div class="mw-card mw-card-simple">
-      <h4 class="mw-mb-3">Different Gap Sizes (from 0 - 10)</h4>
+      <h4 class="mw-mb-3">Different Gap Sizes (from 0 - 14)</h4>
 
       <div class="mw-mb-4">
         <p class="mw-mb-2">Small gap (gap-2)</p>

package/src/scss/abstracts/_variables.scss

@@ -17,7 +17,7 @@ $secondary-color: #bb3110 !default;
 $success-color: #218838 !default;
 $warning-color: #d4a310 !default;
 // Darkened a little so light button text stays readable on the solid surface
-$danger-color: #c82333 !default;
+$danger-color: #db182f !default;
 $info-color: #17a2b8 !default;
 $gray-color: #565656 !default;
 $dark-background: #0b111a !default;
@@ -67,7 +67,7 @@ $form-elements-background: #efefef !default;
 }
 
 // Uniform hover tone for every solid brand/status surface
-$hover-shift: 18%;
+$hover-shift: 12%;
 
 // Base colors that don't change between themes.
 // Emitted as --mw-<key>.
@@ -153,6 +153,9 @@ $header-colors: (
   'burgerbutton-color': token('dark-text-color'),
   'border': token('border-accent'),
 );
+// Drives the bar height, the anchor scroll offset and the mobile drawer padding.
+// 59px is the intrinsic height: 42px logo + 2 × spacing('3') + 1px border.
+$header-height: 62px;
 
 // Typography
 $font-family: 'Poppins', sans-serif;

package/src/scss/base/_base.scss

@@ -45,6 +45,9 @@ $_active-prefix: 'dark';
   // hero background image
   --mw-hero-background: #{$mw-hero-image};
 
+  // header height
+  --mw-header-height: #{$header-height};
+
   // Active theme — aliases onto the dark or light set above
   @each $name, $value in $_active-theme {
     --mw-#{$name}: var(--mw-#{$_active-prefix}-#{$name});

package/src/scss/base/_reset.scss

@@ -11,7 +11,8 @@
 html {
   scroll-behavior: smooth;
   min-width: 360px;
-  scroll-padding-top: 70px;
+  // Keeps anchor targets clear of the fixed header, plus a bit of breathing room
+  scroll-padding-top: calc(var(--mw-header-height) + #{spacing('4')});
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
 }

package/src/scss/components/_gallery.scss

@@ -14,17 +14,20 @@
   &-track {
     display: flex;
     transition: transform 0.3s ease;
-    height: 100%;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
   }
 
   &-slide {
     width: 100%;
     flex-shrink: 0;
-    height: 100%;
+    aspect-ratio: 16 / 9;
 
     img {
       width: 100%;
-      height: 580px;
+      height: 100%;
       object-fit: cover;
       display: block;
     }
@@ -34,32 +37,45 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    color: rgba(23, 23, 23, 0.8); // fixed color
-    background: rgba(240, 240, 240, 0.2); // fixed color
-    border: none;
-    font-size: font-size('5xl');
-    cursor: pointer;
-    z-index: z-index('menu');
-    user-select: none;
-    border-radius: radius('md');
+    width: 52px;
+    height: 108px;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: calc(580px * 0.9);
-    width: 8%;
+    padding: spacing('0');
+    border: none;
+    border-radius: radius('md');
+    background: rgb(0 0 0 / 40%);
+    color: rgb(255 255 255 / 75%);
+    font-size: font-size('xl');
+    line-height: 1;
+    cursor: pointer;
+    z-index: z-index('lift');
+    user-select: none;
+    transition: var(--mw-transition);
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: -8px;
+      border-radius: inherit;
+    }
 
     &:hover {
-      background: rgba(223, 223, 223, 0.4); // fixed color
+      background: rgb(0 0 0 / 85%);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--mw-primary-color);
+      outline-offset: 2px;
     }
 
     &-prev {
-      left: 3px;
-      z-index: z-index('menu');
+      left: spacing('4');
     }
 
     &-next {
-      right: 3px;
-      z-index: z-index('menu');
+      right: spacing('4');
     }
   }
 
@@ -97,26 +113,8 @@
   }
 }
 
-@include media-down('lg') {
-  .mw-gallery {
-    &-slide img {
-      height: 470px;
-    }
-    &-navi {
-      font-size: font-size('3xl');
-      height: calc(470px * 0.9);
-    }
-  }
-}
-
 @include media-down('md') {
   .mw-gallery {
-    &-slide img {
-      height: 380px;
-    }
-    &-navi {
-      height: calc(380px * 0.9);
-    }
     &-desc {
       font-size: font-size('sm');
     }
@@ -132,14 +130,12 @@
 
 @include media-down('sm') {
   .mw-gallery {
-    &-slide img {
-      height: 270px;
+    &-slide {
+      aspect-ratio: 4 / 3;
     }
     &-navi {
-      font-size: font-size('2xl');
-      height: calc(270px * 0.9);
-      border-radius: radius('sm');
-      width: 11%;
+      width: 46px;
+      height: 88px;
     }
     &-desc {
       font-size: font-size('xs');

package/src/scss/layout/_header.scss

@@ -12,6 +12,13 @@
   padding: spacing('3') spacing('0');
   transition: var(--mw-transition);
 
+  // Flex, so the container stays vertically centered once the height token
+  // exceeds the intrinsic content height. min-height, so a too-small token
+  // never clips a taller logo or a wrapping action row.
+  display: flex;
+  align-items: center;
+  min-height: var(--mw-header-height);
+
   .mw-container {
     display: flex;
     justify-content: space-between;
@@ -162,10 +169,6 @@
   }
 }
 
-// Header bar height: 42px logo + 2 × spacing('3') padding + 1px border.
-// Overridable via --mw-header-height for projects with a taller bar.
-$_header-height: 59px;
-
 // Off-canvas drawer for the collapsed navbar (mobile only)
 @mixin navbar-off-canvas {
   position: fixed;
@@ -195,8 +198,7 @@ $_header-height: 59px;
     // Keeps a rubber-band scroll inside the panel from moving the page
     overscroll-behavior: contain;
     padding: calc(
-        var(--mw-header-height, #{$_header-height}) + #{spacing('6')} +
-          env(safe-area-inset-top)
+        var(--mw-header-height) + #{spacing('6')} + env(safe-area-inset-top)
       )
       spacing('4') calc(#{spacing('6')} + env(safe-area-inset-bottom));
   }

package/src/scss/utilities/_flex.scss

@@ -76,3 +76,22 @@
     align-items: stretch;
   }
 }
+
+// Align self — the per-item counterpart to .mw-items-*
+.mw-self {
+  &-start {
+    align-self: flex-start;
+  }
+
+  &-end {
+    align-self: flex-end;
+  }
+
+  &-center {
+    align-self: center;
+  }
+
+  &-stretch {
+    align-self: stretch;
+  }
+}

package/src/scss/utilities/_spacing.scss

@@ -1,7 +1,15 @@
+@use 'sass:map';
 @use '../abstracts' as *;
 
+$_margin-values: map.merge(
+  $spacing,
+  (
+    'auto': auto,
+  )
+);
+
 // Margin utilities
-@each $key, $value in $spacing {
+@each $key, $value in $_margin-values {
   .mw-m-#{$key} {
     margin: $value;
   }
@@ -35,46 +43,44 @@
 
 // Padding utilities
 @each $key, $value in $spacing {
-  .mw-p-#{$key} {
-    padding: $value;
-  }
+  @if $value >= 0 {
+    .mw-p-#{$key} {
+      padding: $value;
+    }
 
-  .mw-pt-#{$key} {
-    padding-top: $value;
-  }
+    .mw-pt-#{$key} {
+      padding-top: $value;
+    }
 
-  .mw-pb-#{$key} {
-    padding-bottom: $value;
-  }
+    .mw-pb-#{$key} {
+      padding-bottom: $value;
+    }
 
-  .mw-pl-#{$key} {
-    padding-left: $value;
-  }
+    .mw-pl-#{$key} {
+      padding-left: $value;
+    }
 
-  .mw-pr-#{$key} {
-    padding-right: $value;
-  }
+    .mw-pr-#{$key} {
+      padding-right: $value;
+    }
 
-  .mw-px-#{$key} {
-    padding-left: $value;
-    padding-right: $value;
-  }
+    .mw-px-#{$key} {
+      padding-left: $value;
+      padding-right: $value;
+    }
 
-  .mw-py-#{$key} {
-    padding-top: $value;
-    padding-bottom: $value;
+    .mw-py-#{$key} {
+      padding-top: $value;
+      padding-bottom: $value;
+    }
   }
 }
 
-// Gap utilities (positive values only — negative gap is invalid CSS)
+// Gap utilities
 @each $key, $value in $spacing {
   @if $value >= 0 {
     .mw-gap-#{$key} {
       gap: $value;
-
-      @include media-down('sm') {
-        gap: calc($value * 0.75);
-      }
     }
   }
 }