maverick-wave 4.24.0 → 4.26.0

package/maverick-wave.min.js

@@ -1 +1 @@
-!function(){"use strict";function e(e,t){e&&(e.classList.toggle("mw-active",t),t||e.classList.remove("active"))}function t(e){return!!e&&(e.classList.contains("mw-active")||e.classList.contains("active"))}function n(){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"),n=e.match(/color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\)/);if(n){const e="#"+t(255*n[1])+t(255*n[2])+t(255*n[3]),a=void 0===n[4]?1:parseFloat(n[4]);return(a<1?`${e} / ${a}`:e).toUpperCase()}const a=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(!a)return e;const c="#"+t(a[1])+t(a[2])+t(a[3]),o=void 0===a[4]?1:parseFloat(a[4]);return(o<1?`${c} / ${o}`:c).toUpperCase()}(window.getComputedStyle(e).backgroundColor),n=e.parentElement.querySelector(".mw-text-muted");n&&(n.textContent=t)})}function a(e){const t=Array.from(e.querySelectorAll(".mw-kanban-column")),n=e.querySelector(".mw-kanban-composer"),a=e.querySelector(".mw-kanban-card-template"),c=e.dataset.kanbanPrefix||"MW",o=n.querySelector(".mw-kanban-composer-title"),r=n.querySelector(".mw-kanban-composer-text"),s=n.querySelector(".mw-kanban-composer-priority"),l=n.querySelector(".mw-kanban-composer-assignee");let i=null;function d(){t.forEach(function(e,n){const a=e.querySelectorAll(".mw-kanban-card"),c=e.querySelector(".mw-kanban-count");c&&(c.textContent=a.length),e.querySelectorAll("[data-kanban-move]").forEach(function(e){const a=n+parseInt(e.dataset.kanbanMove,10);e.disabled=a<0||a>=t.length})})}function u(e,t){const n=e.querySelector(t);return n?n.textContent.replace(/\s+/g," ").trim():""}function m(e,t){f(),i=t||null,o.value=t?u(t,".mw-kanban-card-title"):"",r.value=t?u(t,".mw-kanban-card-text"):"",s.value=t?function(e){const t=e.querySelector(".mw-card-ribbon");if(!t)return"";const n=Array.from(t.classList).find(function(e){return 0===e.indexOf("mw-card-addon-")});return n?n.replace("mw-card-addon-",""):""}(t):"",l.value=t?function(e){const t=e.querySelector(".mw-avatar-initials");return t?t.textContent.trim():""}(t):"",t?(t.classList.add("mw-kanban-editing"),t.before(n)):e.querySelector(".mw-kanban-column-body").prepend(n),n.classList.add("mw-active"),o.focus()}function f(){n.classList.remove("mw-active"),i&&i.classList.remove("mw-kanban-editing"),i=null}function w(){const t=o.value.trim();if(!t)return void o.focus();const u=i||a.content.firstElementChild.cloneNode(!0);if(u.querySelector(".mw-kanban-card-title").textContent=t,u.querySelector(".mw-kanban-card-text").textContent=r.value.trim(),function(e,t){const n=e.querySelector(".mw-card-ribbon");if(n&&n.remove(),!t||!t.value)return;const a=document.createElement("div");a.className="mw-card-ribbon mw-card-addon-"+t.value,a.textContent=t.textContent,e.prepend(a)}(u,s.selectedOptions[0]),function(e,t){const n=e.querySelector(".mw-kanban-card-actions"),a=n.querySelector(".mw-avatar");if(!t)return void(a&&a.remove());const c=a||document.createElement("div");c.className="mw-avatar mw-avatar-xs mw-avatar-initials",c.textContent=t,a||n.prepend(c)}(u,l.value),!i){const t=function(){const t=Array.from(e.querySelectorAll(".mw-kanban-card-id")).map(function(e){return parseInt(e.textContent.split("-").pop(),10)||0});return c+"-"+(Math.max(0,...t)+1)}();u.classList.add("mw-kanban-card-in"),u.querySelector(".mw-kanban-card-id").textContent=t,u.querySelectorAll("[aria-label]").forEach(function(e){e.setAttribute("aria-label",e.getAttribute("aria-label").replace(/[A-Z]+-\d+/,t))}),n.before(u)}f(),d()}const h=["mw-kanban-card-moved-forward","mw-kanban-card-moved-back"];e.addEventListener("click",function(e){const n=e.target.closest("[data-kanban-move]");if(n){if(function(e,n){const a=e.closest(".mw-kanban-column"),c=t[t.indexOf(a)+n];c&&(c.querySelector(".mw-kanban-column-body").appendChild(e),e.classList.remove.apply(e.classList,h),e.offsetWidth,e.classList.add(n>0?h[0]:h[1]),d())}(n.closest(".mw-kanban-card"),parseInt(n.dataset.kanbanMove,10)),n.disabled){const e=n.parentElement.querySelector("[data-kanban-move]:not(:disabled)");e&&e.focus()}return}const a=e.target.closest(".mw-kanban-edit");if(a){const e=a.closest(".mw-kanban-card");return void m(e.closest(".mw-kanban-column"),e)}const c=e.target.closest(".mw-kanban-delete");if(c){const e=c.closest(".mw-kanban-card");return e===i&&f(),e.remove(),void d()}const o=e.target.closest(".mw-kanban-add");o?m(o.closest(".mw-kanban-column"),null):e.target.closest(".mw-kanban-composer-cancel")&&f()}),n.addEventListener("submit",function(e){e.preventDefault(),w()}),n.addEventListener("keydown",function(e){"Escape"===e.key&&f()}),d()}function c(e){const t=e.querySelector(".mw-calendar-grid"),n=e.querySelector(".mw-calendar-title");if(!t)return;const a="week"===e.dataset.calendar,c=function(e){if(!e)return{};try{return JSON.parse(e)}catch(e){return{}}}(e.dataset.calendarMarkers),o=e.dataset.calendarLocale||document.documentElement.lang||void 0,r=new Date;r.setHours(0,0,0,0);let s=e.dataset.calendarDate?new Date(e.dataset.calendarDate+"T00:00:00"):new Date(r),l=e.dataset.calendarSelected||"";function i(e){const t=new Date(e);return t.setDate(t.getDate()-(t.getDay()+6)%7),t}function d(e){return e.getFullYear()+"-"+String(e.getMonth()+1).padStart(2,"0")+"-"+String(e.getDate()).padStart(2,"0")}function u(){if(!a)return s.toLocaleDateString(o,{month:"long",year:"numeric"});const e=i(s),t=new Date(e);t.setDate(t.getDate()+6);const n=e.toLocaleDateString(o,{day:"numeric",month:e.getMonth()===t.getMonth()?void 0:"short"}),c=t.toLocaleDateString(o,{day:"numeric",month:"short",year:"numeric"});return"Week "+function(e){const t=i(e);t.setDate(t.getDate()+3);const n=i(new Date(t.getFullYear(),0,4));return n.setDate(n.getDate()+3),1+Math.round((t-n)/6048e5)}(e)+" · "+n+" - "+c}function m(e){const t=e.getDay();return 0===t||6===t}function f(e,t){const n=d(e),s=document.createElement("button");s.type="button",s.className="mw-calendar-day",s.tabIndex=-1,s.dataset.calendarDay=n,s.setAttribute("aria-pressed",n===l?"true":"false"),s.setAttribute("aria-label",e.toLocaleDateString(o,{weekday:"long",day:"numeric",month:"long",year:"numeric"})),m(e)&&s.classList.add("mw-calendar-weekend"),a||e.getMonth()===t||s.classList.add("mw-calendar-adjacent"),n===d(r)&&(s.classList.add("mw-calendar-today"),s.setAttribute("aria-current","date")),n===l&&s.classList.add("mw-selected");const i=document.createElement("span");i.className="mw-calendar-date",i.textContent=e.getDate(),s.appendChild(i);const u=[].concat(c[n]||[]);if(u.length){const e=document.createElement("span");e.className="mw-calendar-dots",u.forEach(function(t){const n=document.createElement("span");n.className=t?"mw-calendar-dot mw-calendar-dot-"+t:"mw-calendar-dot",e.appendChild(n)}),s.appendChild(e)}return s}function w(){const e=s.getMonth(),c=a?7:42,r=i(a?s:new Date(s.getFullYear(),e,1));t.innerHTML="",function(){const e=i(new Date);for(let n=0;n<7;n++){const n=document.createElement("div");n.className="mw-calendar-weekday",m(e)&&n.classList.add("mw-calendar-weekend"),n.setAttribute("aria-hidden","true"),n.textContent=e.toLocaleDateString(o,{weekday:"short"}),t.appendChild(n),e.setDate(e.getDate()+1)}}();for(let n=0;n<c;n++)t.appendChild(f(r,e)),r.setDate(r.getDate()+1);n&&(n.textContent=u()),function(){const e=t.querySelector(".mw-selected")||t.querySelector(".mw-calendar-today")||t.querySelector(".mw-calendar-day:not(.mw-calendar-adjacent)")||t.querySelector(".mw-calendar-day");e&&(e.tabIndex=0)}()}e.addEventListener("click",function(n){const c=n.target.closest("[data-calendar-nav]");if(c)return o=parseInt(c.dataset.calendarNav,10),a?s.setDate(s.getDate()+7*o):s=new Date(s.getFullYear(),s.getMonth()+o,1),void w();var o;const r=n.target.closest(".mw-calendar-day");var i;r&&!r.disabled&&(i=r.dataset.calendarDay,l=i===l?"":i,t.querySelectorAll(".mw-calendar-day").forEach(function(e){const t=e.dataset.calendarDay===l;e.classList.toggle("mw-selected",t),e.setAttribute("aria-pressed",t?"true":"false")}),e.dispatchEvent(new CustomEvent("mw-calendar-select",{bubbles:!0,detail:{date:l}})))}),t.addEventListener("keydown",function(e){const n={ArrowLeft:-1,ArrowRight:1,ArrowUp:-7,ArrowDown:7}[e.key];if(!n)return;const a=e.target.closest(".mw-calendar-day");if(!a)return;e.preventDefault();const c=new Date(a.dataset.calendarDay+"T00:00:00");c.setDate(c.getDate()+n),function(e){const n=d(e);let a=t.querySelector('[data-calendar-day="'+n+'"]');a||(s=new Date(e),w(),a=t.querySelector('[data-calendar-day="'+n+'"]')),a&&(t.querySelectorAll(".mw-calendar-day").forEach(function(e){e.tabIndex=-1}),a.tabIndex=0,a.focus())}(c)}),w()}document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".mw-gallery").forEach(e=>{const t=e.closest(".mw-gallery-container")||e.parentElement;t&&function(e,t){const n=t.querySelector(".mw-gallery-track");if(!n||!n.children.length)return;const a=n.children,c=e.querySelector(".mw-gallery-dots"),o=e.querySelector(".mw-gallery-desc"),r=t.querySelector(".mw-gallery-navi-prev"),s=t.querySelector(".mw-gallery-navi-next");let l=0;function i(e){const t=a.length;l=(e+t)%t,n.style.transform=`translateX(-${100*l}%)`,c&&c.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===l)}),o&&(o.textContent=a[l].dataset.desc||"")}if(c)for(let e=0;e<a.length;e++){const t=document.createElement("button");t.type="button",t.className="mw-gallery-dot"+(0===e?" mw-active":""),t.setAttribute("aria-label","Go to slide "+(e+1)),t.addEventListener("click",()=>i(e)),c.appendChild(t)}r&&r.addEventListener("click",()=>i(l-1)),s&&s.addEventListener("click",()=>i(l+1));let d=0;n.addEventListener("touchstart",e=>d=e.touches[0].clientX),n.addEventListener("touchend",e=>{const t=e.changedTouches[0].clientX-d;t>50&&i(l-1),t<-50&&i(l+1)}),i(0)}(t,e)}),function(){const t=document.querySelector(".mw-theme-toggle");if(!t)return;const a=document.body,c=t.querySelector(".mw-theme-toggle-slider i"),o=getComputedStyle(document.documentElement).getPropertyValue("--mw-internal-theme-mode").trim()||"switchable";if("switchable"!==o)return console.log(`Theme mode fixed to: ${o}. Disabling toggle.`),c&&(c.className="light"===o?"fas fa-sun":"fas fa-moon"),e(t,"light"===o),t.style.opacity="0.4",t.style.pointerEvents="none",t.style.cursor="default",t.setAttribute("aria-disabled","true"),localStorage.removeItem("mw-theme"),void("dark"===o&&a.classList.remove("mw-theme-light"));let r="light"===localStorage.getItem("mw-theme");const s=n=>{a.classList.toggle("mw-theme-light",n),e(t,n),c&&(c.className=n?"fas fa-sun":"fas fa-moon")};s(r),t.addEventListener("click",()=>{r=!r,s(r),localStorage.setItem("mw-theme",r?"light":"dark"),setTimeout(n,400)})}(),n(),document.querySelectorAll(".mw-accordion-header").forEach(n=>{const a="BUTTON"===n.tagName;a&&n.setAttribute("aria-expanded",String(t(n))),n.addEventListener("click",function(){const n=!t(this);e(this,n),e(this.nextElementSibling,n),a&&this.setAttribute("aria-expanded",String(n))})}),function(){const e=document.querySelector(".mw-menu-btn"),t=document.querySelector(".mw-navbar");if(!e||!t)return;function n(){e.classList.remove("open"),t.classList.remove("open")}function a(n){n.preventDefault(),n.stopPropagation(),e.classList.toggle("open"),t.classList.toggle("open")}e.addEventListener("click",a),e.addEventListener("touchstart",a,{passive:!1}),document.addEventListener("click",function(a){t.classList.contains("open")&&(t.contains(a.target)||e.contains(a.target)||n())}),document.addEventListener("keydown",function(e){"Escape"===e.key&&n()})}(),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 n=e.target,a=n.dataset.value||0;n.style.width=a+"%",t.unobserve(n)})},{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 n=document.querySelector(".mw-menu-btn"),a=document.querySelector(".mw-navbar");n&&a&&(n.classList.remove("open"),a.classList.remove("open"))})}),function(){const t=document.querySelectorAll("section[id]"),n=document.querySelectorAll(".mw-navbar-link");if(0===t.length||0===n.length)return;window.addEventListener("scroll",function(e,t){let n;return function(){const a=this,c=arguments;clearTimeout(n),n=setTimeout(()=>e.apply(a,c),t)}}(function(){let a="";t.forEach(e=>{const t=e.offsetTop-100,n=e.clientHeight;scrollY>=t&&scrollY<t+n&&(a=e.getAttribute("id"))}),n.forEach(t=>{e(t,!1);const n=t.getAttribute("href");if(n){const c=n.indexOf("#");if(-1!==c){n.substring(c+1)===a&&e(t,!0)}}})},100))}(),document.querySelectorAll(".mw-tabs-nav-item").forEach(t=>{t.addEventListener("click",function(){const t=this.closest(".mw-tabs");if(!t)return;t.querySelectorAll(".mw-tabs-nav-item").forEach(t=>{e(t,!1)}),e(this,!0);const n=this.getAttribute("data-tab");n&&(t.querySelectorAll(".mw-tabs-panel").forEach(t=>{e(t,!1)}),e(document.getElementById(n),!0))})}),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"),n=e.querySelector(".mw-slider-value");if(!t||!n)return;const a=()=>{const e=Number(t.value),a=Number(t.max)||100,c=Math.round(e/a*100);t.style.setProperty("--value",c+"%"),n.classList.contains("mw-slider-numeric")?n.setAttribute("data-value",e):n.setAttribute("data-value",c)};t.addEventListener("input",a),a()}),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(t=>{const n=t.querySelectorAll(".mw-image-slider-overlay-image"),a=t.querySelectorAll("button[data-index]");if(!n.length||!a.length)return;let c=0;function o(){n.forEach(t=>{e(t,parseInt(t.dataset.index)===c)}),a.forEach(t=>{e(t,parseInt(t.dataset.index)===c)})}function r(e){c=e,o()}a.forEach(e=>{e.addEventListener("click",()=>{r(parseInt(e.dataset.index))})}),o()}),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"]'),n=e.querySelector(".mw-checkbox");t&&n&&(t.checked&&e.classList.add("mw-selected"),e.addEventListener("click",function(e){e.target!==t&&e.target.closest(".mw-checkbox")!==n&&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}}))}),n.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)}),document.querySelectorAll(".mw-kanban").forEach(a),document.querySelectorAll("[data-calendar]").forEach(c),function(){function e(e){document.querySelectorAll(".mw-dropdown[open]").forEach(t=>{t!==e&&t.removeAttribute("open")})}document.addEventListener("click",function(t){const n=t.target.closest(".mw-dropdown");e(n),n&&t.target.closest(".mw-dropdown-item")&&n.removeAttribute("open")}),document.addEventListener("keydown",function(e){if("Escape"!==e.key)return;const t=document.querySelector(".mw-dropdown[open]");if(!t)return;t.removeAttribute("open");const n=t.querySelector("summary");n&&n.focus()})}()}),window.toggleCheckbox=function(e){const t=e.querySelector('input[type="checkbox"]');if(!t)return;const n=t.checked;t.checked=!n,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(e,t){e&&(e.classList.toggle("mw-active",t),t||e.classList.remove("active"))}function t(e){return!!e&&(e.classList.contains("mw-active")||e.classList.contains("active"))}function n(){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"),n=e.match(/color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\)/);if(n){const e="#"+t(255*n[1])+t(255*n[2])+t(255*n[3]),a=void 0===n[4]?1:parseFloat(n[4]);return(a<1?`${e} / ${a}`:e).toUpperCase()}const a=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);if(!a)return e;const c="#"+t(a[1])+t(a[2])+t(a[3]),o=void 0===a[4]?1:parseFloat(a[4]);return(o<1?`${c} / ${o}`:c).toUpperCase()}(window.getComputedStyle(e).backgroundColor),n=e.parentElement.querySelector(".mw-text-muted");n&&(n.textContent=t)})}function a(e){const t=Array.from(e.querySelectorAll(".mw-kanban-column")),n=e.querySelector(".mw-kanban-composer"),a=e.querySelector(".mw-kanban-card-template"),c=e.dataset.kanbanPrefix||"MW",o=n.querySelector(".mw-kanban-composer-title"),r=n.querySelector(".mw-kanban-composer-text"),s=n.querySelector(".mw-kanban-composer-priority"),l=n.querySelector(".mw-kanban-composer-assignee");let i=null;function d(){t.forEach(function(e,n){const a=e.querySelectorAll(".mw-kanban-card"),c=e.querySelector(".mw-kanban-count");c&&(c.textContent=a.length),e.querySelectorAll("[data-kanban-move]").forEach(function(e){const a=n+parseInt(e.dataset.kanbanMove,10);e.disabled=a<0||a>=t.length})})}function u(e,t){const n=e.querySelector(t);return n?n.textContent.replace(/\s+/g," ").trim():""}function m(e,t){f(),i=t||null,o.value=t?u(t,".mw-kanban-card-title"):"",r.value=t?u(t,".mw-kanban-card-text"):"",s.value=t?function(e){const t=e.querySelector(".mw-card-ribbon");if(!t)return"";const n=Array.from(t.classList).find(function(e){return 0===e.indexOf("mw-card-addon-")});return n?n.replace("mw-card-addon-",""):""}(t):"",l.value=t?function(e){const t=e.querySelector(".mw-avatar-initials");return t?t.textContent.trim():""}(t):"",t?(t.classList.add("mw-kanban-editing"),t.before(n)):e.querySelector(".mw-kanban-column-body").prepend(n),n.classList.add("mw-active"),o.focus()}function f(){n.classList.remove("mw-active"),i&&i.classList.remove("mw-kanban-editing"),i=null}function w(){const t=o.value.trim();if(!t)return void o.focus();const u=i||a.content.firstElementChild.cloneNode(!0);if(u.querySelector(".mw-kanban-card-title").textContent=t,u.querySelector(".mw-kanban-card-text").textContent=r.value.trim(),function(e,t){const n=e.querySelector(".mw-card-ribbon");if(n&&n.remove(),!t||!t.value)return;const a=document.createElement("div");a.className="mw-card-ribbon mw-card-addon-"+t.value,a.textContent=t.textContent,e.prepend(a)}(u,s.selectedOptions[0]),function(e,t){const n=e.querySelector(".mw-kanban-card-actions"),a=n.querySelector(".mw-avatar");if(!t)return void(a&&a.remove());const c=a||document.createElement("div");c.className="mw-avatar mw-avatar-xs mw-avatar-initials",c.textContent=t,a||n.prepend(c)}(u,l.value),!i){const t=function(){const t=Array.from(e.querySelectorAll(".mw-kanban-card-id")).map(function(e){return parseInt(e.textContent.split("-").pop(),10)||0});return c+"-"+(Math.max(0,...t)+1)}();u.classList.add("mw-kanban-card-in"),u.querySelector(".mw-kanban-card-id").textContent=t,u.querySelectorAll("[aria-label]").forEach(function(e){e.setAttribute("aria-label",e.getAttribute("aria-label").replace(/[A-Z]+-\d+/,t))}),n.before(u)}f(),d()}const h=["mw-kanban-card-moved-forward","mw-kanban-card-moved-back"];e.addEventListener("click",function(e){const n=e.target.closest("[data-kanban-move]");if(n){if(function(e,n){const a=e.closest(".mw-kanban-column"),c=t[t.indexOf(a)+n];c&&(c.querySelector(".mw-kanban-column-body").appendChild(e),e.classList.remove.apply(e.classList,h),e.offsetWidth,e.classList.add(n>0?h[0]:h[1]),d())}(n.closest(".mw-kanban-card"),parseInt(n.dataset.kanbanMove,10)),n.disabled){const e=n.parentElement.querySelector("[data-kanban-move]:not(:disabled)");e&&e.focus()}return}const a=e.target.closest(".mw-kanban-edit");if(a){const e=a.closest(".mw-kanban-card");return void m(e.closest(".mw-kanban-column"),e)}const c=e.target.closest(".mw-kanban-delete");if(c){const e=c.closest(".mw-kanban-card");return e===i&&f(),e.remove(),void d()}const o=e.target.closest(".mw-kanban-add");o?m(o.closest(".mw-kanban-column"),null):e.target.closest(".mw-kanban-composer-cancel")&&f()}),n.addEventListener("submit",function(e){e.preventDefault(),w()}),n.addEventListener("keydown",function(e){"Escape"===e.key&&f()}),d()}function c(e){const t=e.querySelector(".mw-calendar-grid"),n=e.querySelector(".mw-calendar-title");if(!t)return;const a="week"===e.dataset.calendar,c=function(e){if(!e)return{};try{return JSON.parse(e)}catch(e){return{}}}(e.dataset.calendarMarkers),o=e.dataset.calendarLocale||document.documentElement.lang||void 0,r=new Date;r.setHours(0,0,0,0);let s=e.dataset.calendarDate?new Date(e.dataset.calendarDate+"T00:00:00"):new Date(r),l=e.dataset.calendarSelected||"";function i(e){const t=new Date(e);return t.setDate(t.getDate()-(t.getDay()+6)%7),t}function d(e){return e.getFullYear()+"-"+String(e.getMonth()+1).padStart(2,"0")+"-"+String(e.getDate()).padStart(2,"0")}function u(){if(!a)return s.toLocaleDateString(o,{month:"long",year:"numeric"});const e=i(s),t=new Date(e);t.setDate(t.getDate()+6);const n=e.toLocaleDateString(o,{day:"numeric",month:e.getMonth()===t.getMonth()?void 0:"short"}),c=t.toLocaleDateString(o,{day:"numeric",month:"short",year:"numeric"});return"Week "+function(e){const t=i(e);t.setDate(t.getDate()+3);const n=i(new Date(t.getFullYear(),0,4));return n.setDate(n.getDate()+3),1+Math.round((t-n)/6048e5)}(e)+" · "+n+" - "+c}function m(e){const t=e.getDay();return 0===t||6===t}function f(e,t){const n=d(e),s=document.createElement("button");s.type="button",s.className="mw-calendar-day",s.tabIndex=-1,s.dataset.calendarDay=n,s.setAttribute("aria-pressed",n===l?"true":"false"),s.setAttribute("aria-label",e.toLocaleDateString(o,{weekday:"long",day:"numeric",month:"long",year:"numeric"})),m(e)&&s.classList.add("mw-calendar-weekend"),a||e.getMonth()===t||s.classList.add("mw-calendar-adjacent"),n===d(r)&&(s.classList.add("mw-calendar-today"),s.setAttribute("aria-current","date")),n===l&&s.classList.add("mw-selected");const i=document.createElement("span");i.className="mw-calendar-date",i.textContent=e.getDate(),s.appendChild(i);const u=[].concat(c[n]||[]);if(u.length){const e=document.createElement("span");e.className="mw-calendar-dots",u.forEach(function(t){const n=document.createElement("span");n.className=t?"mw-calendar-dot mw-calendar-dot-"+t:"mw-calendar-dot",e.appendChild(n)}),s.appendChild(e)}return s}function w(){const e=s.getMonth(),c=a?7:42,r=i(a?s:new Date(s.getFullYear(),e,1));t.innerHTML="",function(){const e=i(new Date);for(let n=0;n<7;n++){const n=document.createElement("div");n.className="mw-calendar-weekday",m(e)&&n.classList.add("mw-calendar-weekend"),n.setAttribute("aria-hidden","true"),n.textContent=e.toLocaleDateString(o,{weekday:"short"}),t.appendChild(n),e.setDate(e.getDate()+1)}}();for(let n=0;n<c;n++)t.appendChild(f(r,e)),r.setDate(r.getDate()+1);n&&(n.textContent=u()),function(){const e=t.querySelector(".mw-selected")||t.querySelector(".mw-calendar-today")||t.querySelector(".mw-calendar-day:not(.mw-calendar-adjacent)")||t.querySelector(".mw-calendar-day");e&&(e.tabIndex=0)}()}e.addEventListener("click",function(n){const c=n.target.closest("[data-calendar-nav]");if(c)return o=parseInt(c.dataset.calendarNav,10),a?s.setDate(s.getDate()+7*o):s=new Date(s.getFullYear(),s.getMonth()+o,1),void w();var o;const r=n.target.closest(".mw-calendar-day");var i;r&&!r.disabled&&(i=r.dataset.calendarDay,l=i===l?"":i,t.querySelectorAll(".mw-calendar-day").forEach(function(e){const t=e.dataset.calendarDay===l;e.classList.toggle("mw-selected",t),e.setAttribute("aria-pressed",t?"true":"false")}),e.dispatchEvent(new CustomEvent("mw-calendar-select",{bubbles:!0,detail:{date:l}})))}),t.addEventListener("keydown",function(e){const n={ArrowLeft:-1,ArrowRight:1,ArrowUp:-7,ArrowDown:7}[e.key];if(!n)return;const a=e.target.closest(".mw-calendar-day");if(!a)return;e.preventDefault();const c=new Date(a.dataset.calendarDay+"T00:00:00");c.setDate(c.getDate()+n),function(e){const n=d(e);let a=t.querySelector('[data-calendar-day="'+n+'"]');a||(s=new Date(e),w(),a=t.querySelector('[data-calendar-day="'+n+'"]')),a&&(t.querySelectorAll(".mw-calendar-day").forEach(function(e){e.tabIndex=-1}),a.tabIndex=0,a.focus())}(c)}),w()}document.addEventListener("DOMContentLoaded",function(){document.querySelectorAll(".mw-gallery").forEach(e=>{const t=e.closest(".mw-gallery-container")||e.parentElement;t&&function(e,t){const n=t.querySelector(".mw-gallery-track");if(!n||!n.children.length)return;const a=n.children,c=e.querySelector(".mw-gallery-dots"),o=e.querySelector(".mw-gallery-desc"),r=t.querySelector(".mw-gallery-navi-prev"),s=t.querySelector(".mw-gallery-navi-next");let l=0;function i(e){const t=a.length;l=(e+t)%t,n.style.transform=`translateX(-${100*l}%)`,c&&c.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===l)}),o&&(o.textContent=a[l].dataset.desc||"")}if(c)for(let e=0;e<a.length;e++){const t=document.createElement("button");t.type="button",t.className="mw-gallery-dot"+(0===e?" mw-active":""),t.setAttribute("aria-label","Go to slide "+(e+1)),t.addEventListener("click",()=>i(e)),c.appendChild(t)}r&&r.addEventListener("click",()=>i(l-1)),s&&s.addEventListener("click",()=>i(l+1));let d=0;n.addEventListener("touchstart",e=>d=e.touches[0].clientX),n.addEventListener("touchend",e=>{const t=e.changedTouches[0].clientX-d;t>50&&i(l-1),t<-50&&i(l+1)}),i(0)}(t,e)}),function(){const t=document.querySelector(".mw-theme-toggle");if(!t)return;const a=document.body,c=t.querySelector(".mw-theme-toggle-slider i"),o=getComputedStyle(document.documentElement).getPropertyValue("--mw-internal-theme-mode").trim()||"switchable";if("switchable"!==o)return console.log(`Theme mode fixed to: ${o}. Disabling toggle.`),c&&(c.className="light"===o?"fas fa-sun":"fas fa-moon"),e(t,"light"===o),t.style.opacity="0.4",t.style.pointerEvents="none",t.style.cursor="default",t.setAttribute("aria-disabled","true"),localStorage.removeItem("mw-theme"),void("dark"===o&&a.classList.remove("mw-theme-light"));let r="light"===localStorage.getItem("mw-theme");const s=n=>{a.classList.toggle("mw-theme-light",n),e(t,n),c&&(c.className=n?"fas fa-sun":"fas fa-moon")};s(r),t.addEventListener("click",()=>{r=!r,s(r),localStorage.setItem("mw-theme",r?"light":"dark"),setTimeout(n,400)})}(),n(),document.querySelectorAll(".mw-accordion-header").forEach(n=>{const a="BUTTON"===n.tagName;a&&n.setAttribute("aria-expanded",String(t(n))),n.addEventListener("click",function(){const n=!t(this);e(this,n),e(this.nextElementSibling,n),a&&this.setAttribute("aria-expanded",String(n))})}),function(){const e=document.querySelector(".mw-menu-btn"),t=document.querySelector(".mw-navbar");if(!e||!t)return;function n(){e.classList.remove("open"),t.classList.remove("open")}function a(n){n.preventDefault(),n.stopPropagation(),e.classList.toggle("open"),t.classList.toggle("open")}e.addEventListener("click",a),e.addEventListener("touchstart",a,{passive:!1}),document.addEventListener("click",function(a){t.classList.contains("open")&&(t.contains(a.target)||e.contains(a.target)||n())}),document.addEventListener("keydown",function(e){"Escape"===e.key&&n()})}(),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 n=e.target,a=n.dataset.value||0;n.style.width=a+"%",t.unobserve(n)})},{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 n=document.querySelector(".mw-menu-btn"),a=document.querySelector(".mw-navbar");n&&a&&(n.classList.remove("open"),a.classList.remove("open"))})}),function(){const t=document.querySelectorAll("section[id]"),n=document.querySelectorAll(".mw-navbar-link");if(0===t.length||0===n.length)return;function a(){const e=parseFloat(getComputedStyle(document.documentElement).scrollPaddingTop);return(Number.isNaN(e)?0:e)+2}window.addEventListener("scroll",function(e,t){let n;return function(){const a=this,c=arguments;clearTimeout(n),n=setTimeout(()=>e.apply(a,c),t)}}(function(){let c="";const o=a();t.forEach(e=>{const t=e.offsetTop-o,n=e.clientHeight;scrollY>=t&&scrollY<t+n&&(c=e.getAttribute("id"))}),n.forEach(t=>{e(t,!1);const n=t.getAttribute("href");if(n){const a=n.indexOf("#");if(-1!==a){n.substring(a+1)===c&&e(t,!0)}}})},100))}(),document.querySelectorAll(".mw-tabs-nav-item").forEach(t=>{t.addEventListener("click",function(){const t=this.closest(".mw-tabs");if(!t)return;t.querySelectorAll(".mw-tabs-nav-item").forEach(t=>{e(t,!1)}),e(this,!0);const n=this.getAttribute("data-tab");n&&(t.querySelectorAll(".mw-tabs-panel").forEach(t=>{e(t,!1)}),e(document.getElementById(n),!0))})}),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"),n=e.querySelector(".mw-slider-value");if(!t||!n)return;const a=()=>{const e=Number(t.value),a=Number(t.max)||100,c=Math.round(e/a*100);t.style.setProperty("--value",c+"%"),n.classList.contains("mw-slider-numeric")?n.setAttribute("data-value",e):n.setAttribute("data-value",c)};t.addEventListener("input",a),a()}),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(t=>{const n=t.querySelectorAll(".mw-image-slider-overlay-image"),a=t.querySelectorAll("button[data-index]");if(!n.length||!a.length)return;let c=0;function o(){n.forEach(t=>{e(t,parseInt(t.dataset.index)===c)}),a.forEach(t=>{e(t,parseInt(t.dataset.index)===c)})}function r(e){c=e,o()}a.forEach(e=>{e.addEventListener("click",()=>{r(parseInt(e.dataset.index))})}),o()}),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"]'),n=e.querySelector(".mw-checkbox");t&&n&&(t.checked&&e.classList.add("mw-selected"),e.addEventListener("click",function(e){e.target!==t&&e.target.closest(".mw-checkbox")!==n&&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}}))}),n.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)}),document.querySelectorAll(".mw-kanban").forEach(a),document.querySelectorAll("[data-calendar]").forEach(c),function(){function e(e){document.querySelectorAll(".mw-dropdown[open]").forEach(t=>{t!==e&&t.removeAttribute("open")})}document.addEventListener("click",function(t){const n=t.target.closest(".mw-dropdown");e(n),n&&t.target.closest(".mw-dropdown-item")&&n.removeAttribute("open")}),document.addEventListener("keydown",function(e){if("Escape"!==e.key)return;const t=document.querySelector(".mw-dropdown[open]");if(!t)return;t.removeAttribute("open");const n=t.querySelector("summary");n&&n.focus()})}()}),window.toggleCheckbox=function(e){const t=e.querySelector('input[type="checkbox"]');if(!t)return;const n=t.checked;t.checked=!n,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": "4.24.0",
+  "version": "4.26.0",
   "config": {
-    "version_short": "4.24"
+    "version_short": "4.26"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/scripts/verify.js

@@ -64,7 +64,10 @@ if (!css || !html) {
   process.exit(1);
 }
 const js = read(JS) || '';
-const docs = DOCS.map(read).filter(Boolean).join('\n');
+// The YAML frontmatter of a skill is metadata, not documentation - its
+// `name: mw-maverick-wave` would otherwise be reported as a missing class.
+const stripFrontmatter = (md) => md.replace(/^---\n[\s\S]*?\n---\n/, '');
+const docs = DOCS.map(read).filter(Boolean).map(stripFrontmatter).join('\n');
 
 // --- 1 + 2: custom properties ---------------------------------------------
 

package/src/js/main.js

@@ -487,13 +487,26 @@
 
     if (sections.length === 0 || navLinks.length === 0) return;
 
+    // An anchor jump lands on scroll-padding-top, so the spy has to measure
+    // against the same value - a hardcoded one marks the section before the
+    // target as soon as an announcement ribbon raises the padding. Read per
+    // run: the ribbon grows on small screens and can be dismissed at runtime.
+    function scrollOffset() {
+      const padding = parseFloat(
+        getComputedStyle(document.documentElement).scrollPaddingTop
+      );
+      // +2 absorbs subpixel rounding between the jump and the scroll position.
+      return (Number.isNaN(padding) ? 0 : padding) + 2;
+    }
+
     window.addEventListener(
       'scroll',
       debounce(function () {
         let current = '';
+        const offset = scrollOffset();
 
         sections.forEach((section) => {
-          const sectionTop = section.offsetTop - 100;
+          const sectionTop = section.offsetTop - offset;
           const sectionHeight = section.clientHeight;
 
           if (scrollY >= sectionTop && scrollY < sectionTop + sectionHeight) {

package/src/partials/documentation-container.html

@@ -87,6 +87,15 @@
       <li>
         <a href="#tags">Tags</a>
       </li>
+      <li>
+        <a href="#badges">Badges</a>
+      </li>
+      <li>
+        <a href="#dropdown">Dropdown</a>
+      </li>
+      <li>
+        <a href="#kbd">Keyboard Keys</a>
+      </li>
       <li>
         <a href="#ratings">Ratings</a>
       </li>
@@ -96,6 +105,9 @@
       <li>
         <a href="#alerts">Alerts</a>
       </li>
+      <li>
+        <a href="#announcement">Announcement</a>
+      </li>
       <li>
         <a href="#code">Code</a>
       </li>
@@ -105,6 +117,9 @@
       <li>
         <a href="#empty-state">Empty State</a>
       </li>
+      <li>
+        <a href="#pricing">Pricing</a>
+      </li>
     </ul>
     <!-- seperator -->
     <li>
@@ -117,6 +132,9 @@
       <li>
         <a href="#input-group">Input Group</a>
       </li>
+      <li>
+        <a href="#segmented">Segmented Control</a>
+      </li>
       <li>
         <a href="#form-field">Field Pattern</a>
       </li>
@@ -162,6 +180,15 @@
       <li>
         <a href="#content-slider">Content Slider</a>
       </li>
+      <li>
+        <a href="#testimonials">Testimonials</a>
+      </li>
+      <li>
+        <a href="#prose">Prose</a>
+      </li>
+      <li>
+        <a href="#media">Media</a>
+      </li>
       <li>
         <a href="#blog-posts">Blog Posts</a>
       </li>

package/src/partials/highlights-container.html

@@ -0,0 +1,69 @@
+<h2 class="mw-section-title">Why MaverickWave</h2>
+<p class="mw-section-intro">
+  Four decisions the framework has already made for you, so a page looks
+  finished on the first build - on a phone as much as on a desk.
+</p>
+
+<!-- mw-reveal-stagger: every card rises as it scrolls in, the second and
+     third of each row a beat later. One class on the grid, nothing per card -->
+<div class="mw-grid-4 mw-reveal-stagger">
+  <div class="mw-card mw-card-stack">
+    <div class="mw-card-stack-header">
+      <div class="mw-card-stack-icon">
+        <i class="fas fa-moon"></i>
+      </div>
+      <h5 class="mw-card-stack-title">Dark mode, built in</h5>
+    </div>
+    <div class="mw-card-stack-body">
+      <p class="mw-card-stack-text">
+        One class on <code>body</code> flips every component. Switchable, or
+        fixed to one theme at build time.
+      </p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-stack">
+    <div class="mw-card-stack-header">
+      <div class="mw-card-stack-icon">
+        <i class="fas fa-mobile-screen"></i>
+      </div>
+      <h5 class="mw-card-stack-title">Mobile first</h5>
+    </div>
+    <div class="mw-card-stack-body">
+      <p class="mw-card-stack-text">
+        Touch targets grow on a coarse pointer, modals turn into bottom sheets,
+        and nothing scrolls sideways.
+      </p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-stack">
+    <div class="mw-card-stack-header">
+      <div class="mw-card-stack-icon">
+        <i class="fas fa-palette"></i>
+      </div>
+      <h5 class="mw-card-stack-title">One color, whole palette</h5>
+    </div>
+    <div class="mw-card-stack-body">
+      <p class="mw-card-stack-text">
+        Set <code>--mw-primary-color</code> and the hover tones, tints and
+        borders follow via <code>color-mix()</code>.
+      </p>
+    </div>
+  </div>
+
+  <div class="mw-card mw-card-stack">
+    <div class="mw-card-stack-header">
+      <div class="mw-card-stack-icon">
+        <i class="fas fa-bolt"></i>
+      </div>
+      <h5 class="mw-card-stack-title">No build step</h5>
+    </div>
+    <div class="mw-card-stack-body">
+      <p class="mw-card-stack-text">
+        Two files from the CDN and you are done. The SCSS sources are there when
+        you want <code>@use</code> level control.
+      </p>
+    </div>
+  </div>
+</div>

package/src/partials/home-container.html

@@ -33,7 +33,7 @@
   </div>
 </div>
 
-<a class="mw-scroll-hint" href="#get-started">
+<a class="mw-scroll-hint" href="#highlights">
   More
   <i class="fas fa-chevron-down"></i>
 </a>

package/src/partials/testimonials-container.html

@@ -5,7 +5,10 @@
   <code>mw-testimonial-featured</code>; the rest flow in
   <code>mw-columns-3</code>, the masonry layout for cards of unequal height. The
   cards below also carry <code>mw-reveal</code> - scroll them into view to see
-  the entrance.
+  the entrance. Three of them are dated: <code>mw-testimonial-date</code> is a
+  <code>time</code> element on the right edge of the source line, month and
+  year. It is optional on purpose - a dated quote ages, so only show it where
+  the voices are kept fresh.
 </p>
 
 <figure class="mw-testimonial mw-testimonial-featured mw-mb-6">
@@ -17,6 +20,7 @@
   <figcaption class="mw-testimonial-source">
     Maren K.
     <span class="mw-testimonial-detail">&middot; Head of Engineering</span>
+    <time class="mw-testimonial-date" datetime="2026-06">June 2026</time>
   </figcaption>
 </figure>
 
@@ -40,6 +44,7 @@
     <figcaption class="mw-testimonial-source">
       Priya S.
       <span class="mw-testimonial-detail">&middot; Product Designer</span>
+      <time class="mw-testimonial-date" datetime="2026-04">April 2026</time>
     </figcaption>
   </figure>
 
@@ -58,6 +63,7 @@
     </blockquote>
     <figcaption class="mw-testimonial-source">
       Aylin D. <span class="mw-testimonial-detail">&middot; Agency Lead</span>
+      <time class="mw-testimonial-date" datetime="2026-08">August 2026</time>
     </figcaption>
   </figure>
 

package/src/scss/abstracts/_mixins.scss

@@ -340,3 +340,16 @@
     mask-image: $top, $bottom;
   }
 }
+
+// The scroll-reveal zone (utilities/_reveal.scss), as the range of the n-th
+// column of a row. Viewport lengths rather than percentages of the block: a
+// two-line counter band and a tall card then rise through the same region of
+// the screen instead of the short one snapping in. The zone starts 8dvh above
+// the bottom edge - right at the edge nobody sees the motion - and ends at
+// 34dvh, still in the lower third, so nothing is moving while someone already
+// reads it. Each further column of a row starts 4dvh later than the one before.
+@mixin reveal-range($column: 1) {
+  $shift: 4dvh * ($column - 1);
+
+  animation-range: entry #{8dvh + $shift} entry #{34dvh + $shift};
+}

package/src/scss/components/_testimonial.scss

@@ -37,7 +37,19 @@
 
 // margin-top: auto, so in a grid of equal-height cards every source line sits
 // on its card's bottom edge instead of floating under quotes of random length.
+//
+// A wrapping flex row rather than inline text, so an optional date can sit on
+// the card's right edge: "who" on the left, "when" on the right, and the two
+// do not run into each other. The column gap stands in for the space the
+// inline flow used to leave between name and detail. When the line runs out
+// of room the date drops to a line of its own and stays right-aligned - its
+// auto margin absorbs whatever is left.
 .mw-testimonial-source {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: spacing('2');
+  row-gap: spacing('1');
   margin-top: auto;
   padding-top: spacing('5');
   font-size: font-size('sm');
@@ -50,6 +62,16 @@
   color: var(--mw-text-muted-color);
 }
 
+// When the voice spoke - a <time>, month and year, on the right edge of the
+// source line. Optional on purpose: a dated quote ages, and a wall of voices
+// from three years ago says more about the page than about the product.
+.mw-testimonial-date {
+  margin-left: auto;
+  font-weight: font-weight('normal');
+  color: var(--mw-text-muted-color);
+  white-space: nowrap;
+}
+
 // The one voice lifted above the grid - it may speak a size louder.
 .mw-testimonial-featured {
   blockquote {

package/src/scss/layout/_grid.scss

@@ -11,6 +11,33 @@
   gap: spacing('9');
 }
 
+// The scroll-reveal stagger, made to follow the columns. mw-reveal-stagger
+// (utilities/_reveal.scss) shifts the entrance of the second and third child of
+// every three - right for a row of three, but in a mw-grid-4 the fourth card
+// would start over with the first. The grid knows its column count at every
+// breakpoint, so it restates the cycle to match: included once per column
+// count, right next to the grid-template-columns it belongs to. Only the range
+// is set here, through the shared `reveal-range` mixin - the animation and its
+// guards stay in _reveal.scss, and a child without the animation ignores the
+// range. The :nth-child(n) reset carries the
+// same specificity as the cycle rules, so a narrower breakpoint can override
+// the wider one's cycle for every child.
+@mixin _reveal-stagger($cols) {
+  &.mw-reveal-stagger > :nth-child(n) {
+    @include reveal-range(1);
+  }
+
+  // Guarded: Sass counts `from 2 through 1` downwards and would emit a rule
+  // for a second column that a single-column grid does not have.
+  @if $cols > 1 {
+    @for $i from 2 through $cols {
+      &.mw-reveal-stagger > :nth-child(#{$cols}n + #{$i}) {
+        @include reveal-range($i);
+      }
+    }
+  }
+}
+
 .mw-grid {
   @extend %grid-base;
 }
@@ -29,56 +56,69 @@
 .mw-grid-2 {
   @extend %grid-base;
   grid-template-columns: repeat(2, minmax(0, 1fr));
+  @include _reveal-stagger(2);
 
   @include media-down('sm') {
     grid-template-columns: minmax(0, 1fr);
+    @include _reveal-stagger(1);
   }
 }
 
 .mw-grid-3 {
   @extend %grid-base;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+  @include _reveal-stagger(3);
 
   @include media-down('md') {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    @include _reveal-stagger(2);
   }
 
   @include media-down('sm') {
     grid-template-columns: minmax(0, 1fr);
+    @include _reveal-stagger(1);
   }
 }
 
 .mw-grid-4 {
   @extend %grid-base;
   grid-template-columns: repeat(4, minmax(0, 1fr));
+  @include _reveal-stagger(4);
 
   @include media-down('lg') {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    @include _reveal-stagger(2);
   }
 
   @include media-down('sm') {
     grid-template-columns: minmax(0, 1fr);
+    @include _reveal-stagger(1);
   }
 }
 
 .mw-grid-5 {
   @extend %grid-base;
   grid-template-columns: repeat(5, minmax(0, 1fr));
+  @include _reveal-stagger(5);
 
   @include media-down('lg') {
     grid-template-columns: repeat(4, minmax(0, 1fr));
+    @include _reveal-stagger(4);
   }
 
   @include media-down('md') {
     grid-template-columns: repeat(3, minmax(0, 1fr));
+    @include _reveal-stagger(3);
   }
 
   @include media-down('sm') {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    @include _reveal-stagger(2);
   }
 
   @include media-down('xs') {
     grid-template-columns: minmax(0, 1fr);
+    @include _reveal-stagger(1);
   }
 }
 
@@ -148,8 +188,10 @@
 .mw-grid-2-lg {
   @extend %grid-base-lg;
   grid-template-columns: repeat(2, minmax(0, 1fr));
+  @include _reveal-stagger(2);
   @include media-down('sm') {
     grid-template-columns: minmax(0, 1fr);
+    @include _reveal-stagger(1);
     gap: spacing('6');
   }
 }
@@ -157,12 +199,15 @@
 .mw-grid-3-lg {
   @extend %grid-base-lg;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+  @include _reveal-stagger(3);
   @include media-down('lg') {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    @include _reveal-stagger(2);
     gap: spacing('7');
   }
   @include media-down('sm') {
     grid-template-columns: minmax(0, 1fr);
+    @include _reveal-stagger(1);
     gap: spacing('6');
   }
 }
@@ -170,14 +215,17 @@
 .mw-grid-4-lg {
   @extend %grid-base-lg;
   grid-template-columns: repeat(4, minmax(0, 1fr));
+  @include _reveal-stagger(4);
   @include media-down('xl') {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    @include _reveal-stagger(2);
   }
   @include media-down('md') {
     gap: spacing('7');
   }
   @include media-down('sm') {
     grid-template-columns: minmax(0, 1fr);
+    @include _reveal-stagger(1);
     gap: spacing('6');
   }
 }
@@ -185,18 +233,23 @@
 .mw-grid-5-lg {
   @extend %grid-base-lg;
   grid-template-columns: repeat(5, minmax(0, 1fr));
+  @include _reveal-stagger(5);
   @include media-down('xl') {
     grid-template-columns: repeat(4, minmax(0, 1fr));
+    @include _reveal-stagger(4);
   }
   @include media-down('lg') {
     grid-template-columns: repeat(3, minmax(0, 1fr));
+    @include _reveal-stagger(3);
   }
   @include media-down('md') {
     grid-template-columns: repeat(2, minmax(0, 1fr));
+    @include _reveal-stagger(2);
     gap: spacing('7');
   }
   @include media-down('sm') {
     grid-template-columns: minmax(0, 1fr);
+    @include _reveal-stagger(1);
     gap: spacing('6');
   }
 }

package/src/scss/utilities/_reveal.scss

@@ -6,11 +6,22 @@
 //
 // Both guards matter. `prefers-reduced-motion` is the obvious one. The
 // @supports guard is the safety net: a browser without scroll timelines would
-// otherwise apply `both` fill on an animation that never runs and leave the
-// block invisible forever - guarded, it simply renders in place.
+// otherwise apply the backwards fill on an animation that never runs and
+// leave the block invisible forever - guarded, it simply renders in place.
 //
-// The range ends well before the block reaches the middle of the screen, so
-// nothing is still moving while someone already reads it.
+// The zone it plays in is the `reveal-range` mixin in abstracts/_mixins.scss:
+// from 8dvh above the bottom edge to 34dvh, measured in viewport lengths so
+// every block rises through the same region of the screen. Eased out rather
+// than linear against the scroll: the block covers most of its way at once
+// and settles, which reads as arriving instead of being dragged.
+//
+// `backwards`, not `both`: the fill only has to hide the block before its
+// entrance - the last frame is the block's own resting state anyway. A
+// forwards fill would keep that frame applied for good, and an animated
+// `transform` beats every author rule: a card would lose its hover lift, and
+// as a transformed box it stays a stacking context, so a dropdown opened
+// inside it paints under the next card in the row. Without the forwards fill
+// the animation lets go once the entrance is done.
 //
 // Longhands on purpose, never the animation shorthand: esbuild's CSS minifier
 // (Vite's default, so every SCSS consumer) collapses a shorthand plus
@@ -19,12 +30,32 @@
 // Three longhands next to the timeline give it nothing to merge.
 @supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
-    .mw-reveal {
+    .mw-reveal,
+    .mw-reveal-stagger > * {
       animation-name: mw-reveal;
-      animation-timing-function: linear;
-      animation-fill-mode: both;
+      animation-timing-function: var(--mw-ease-out);
+      animation-fill-mode: backwards;
       animation-timeline: view();
-      animation-range: entry 2% entry 62%;
+      @include reveal-range(1);
+    }
+
+    // A row of cards crosses the viewport edge on the same scroll step, so
+    // mw-reveal on each of them rises as one slab. The stagger container
+    // shifts the range of the second and third child of every three - a wave
+    // across the row instead of a lift. One class on the grid, because the
+    // grid decides the columns per breakpoint and the markup cannot.
+    //
+    // Cycles of three are only the fallback for a container that is not one of
+    // the fixed grids - mw-columns-*, a project's own layout. mw-grid-2 to -5
+    // and their -lg variants restate the cycle to their own column count at
+    // every breakpoint (layout/_grid.scss), so the fourth card of a four-column
+    // row is a beat behind the third, not level with the first.
+    .mw-reveal-stagger > :nth-child(3n + 2) {
+      @include reveal-range(2);
+    }
+
+    .mw-reveal-stagger > :nth-child(3n + 3) {
+      @include reveal-range(3);
     }
   }
 }
@@ -32,7 +63,7 @@
 @keyframes mw-reveal {
   from {
     opacity: 0;
-    transform: translateY(26px);
+    transform: translateY(40px);
   }
 
   to {