maverick-wave 4.9.4 → 4.11.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(){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 n(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"),l=n.querySelector(".mw-kanban-composer-priority"),s=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"):"",l.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):"",s.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,l.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,s.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()}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),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 a(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 l=e.dataset.calendarDate?new Date(e.dataset.calendarDate+"T00:00:00"):new Date(r),s=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 l.toLocaleDateString(o,{month:"long",year:"numeric"});const e=i(l),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),l=document.createElement("button");l.type="button",l.className="mw-calendar-day",l.tabIndex=-1,l.dataset.calendarDay=n,l.setAttribute("aria-pressed",n===s?"true":"false"),l.setAttribute("aria-label",e.toLocaleDateString(o,{weekday:"long",day:"numeric",month:"long",year:"numeric"})),m(e)&&l.classList.add("mw-calendar-weekend"),a||e.getMonth()===t||l.classList.add("mw-calendar-adjacent"),n===d(r)&&(l.classList.add("mw-calendar-today"),l.setAttribute("aria-current","date")),n===s&&l.classList.add("mw-selected");const i=document.createElement("span");i.className="mw-calendar-date",i.textContent=e.getDate(),l.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)}),l.appendChild(e)}return l}function w(){const e=l.getMonth(),c=a?7:42,r=i(a?l:new Date(l.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?l.setDate(l.getDate()+7*o):l=new Date(l.getFullYear(),l.getMonth()+o,1),void w();var o;const r=n.target.closest(".mw-calendar-day");var i;r&&!r.disabled&&(i=r.dataset.calendarDay,s=i===s?"":i,t.querySelectorAll(".mw-calendar-day").forEach(function(e){const t=e.dataset.calendarDay===s;e.classList.toggle("mw-selected",t),e.setAttribute("aria-pressed",t?"true":"false")}),e.dispatchEvent(new CustomEvent("mw-calendar-select",{bubbles:!0,detail:{date:s}})))}),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||(l=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"),l=t.querySelector(".mw-gallery-navi-next");let s=0;function i(e){const t=a.length;s=(e+t)%t,n.style.transform=`translateX(-${100*s}%)`,c&&c.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===s)}),o&&(o.textContent=a[s].dataset.desc||"")}if(c)for(let e=0;e<a.length;e++){const t=document.createElement("span");t.className="mw-gallery-dot"+(0===e?" mw-active":""),t.addEventListener("click",()=>i(e)),c.appendChild(t)}r&&r.addEventListener("click",()=>i(s-1)),l&&l.addEventListener("click",()=>i(s+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(s-1),t<-50&&i(s+1)}),i(0)}(t,e)}),function(){const n=document.querySelector(".mw-theme-toggle");if(!n)return;const a=document.body,c=n.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(n,"light"===o),n.style.opacity="0.4",n.style.pointerEvents="none",n.style.cursor="default",n.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 l=t=>{a.classList.toggle("mw-theme-light",t),e(n,t),c&&(c.className=t?"fas fa-sun":"fas fa-moon")};l(r),n.addEventListener("click",()=>{r=!r,l(r),localStorage.setItem("mw-theme",r?"light":"dark"),setTimeout(t,400)})}(),t(),document.querySelectorAll(".mw-accordion-header").forEach(t=>{t.addEventListener("click",function(){const t=!((n=this)&&(n.classList.contains("mw-active")||n.classList.contains("active")));var n;e(this,t),e(this.nextElementSibling,t)})}),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(n),document.querySelectorAll("[data-calendar]").forEach(a)}),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(){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 n(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 a(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 n=document.querySelector(".mw-theme-toggle");if(!n)return;const a=document.body,c=n.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(n,"light"===o),n.style.opacity="0.4",n.style.pointerEvents="none",n.style.cursor="default",n.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=t=>{a.classList.toggle("mw-theme-light",t),e(n,t),c&&(c.className=t?"fas fa-sun":"fas fa-moon")};s(r),n.addEventListener("click",()=>{r=!r,s(r),localStorage.setItem("mw-theme",r?"light":"dark"),setTimeout(t,400)})}(),t(),document.querySelectorAll(".mw-accordion-header").forEach(t=>{t.addEventListener("click",function(){const t=!((n=this)&&(n.classList.contains("mw-active")||n.classList.contains("active")));var n;e(this,t),e(this.nextElementSibling,t)})}),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(n),document.querySelectorAll("[data-calendar]").forEach(a),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.9.4",
+  "version": "4.11.0",
   "config": {
-    "version_short": "4.9"
+    "version_short": "4.11"
   },
   "description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
   "main": "src/js/main.js",

package/src/js/main.js

@@ -39,8 +39,55 @@
     initCheckboxLists();
     initKanbanBoards();
     initCalendars();
+    initDropdowns();
   });
 
+  // ===== Dropdowns =====
+  //
+  // The menu is a <details>, so opening, closing, the keyboard and the state a
+  // screen reader reads out are all the browser's job already. Two things it
+  // does not do, because no markup can express them: close when the click lands
+  // somewhere else, and close on Escape.
+  //
+  // Delegated to the document rather than bound per dropdown, so a menu added
+  // to the page later works without being initialised.
+  function initDropdowns() {
+    function closeAll(except) {
+      document.querySelectorAll('.mw-dropdown[open]').forEach((dropdown) => {
+        if (dropdown !== except) dropdown.removeAttribute('open');
+      });
+    }
+
+    document.addEventListener('click', function (event) {
+      const dropdown = event.target.closest('.mw-dropdown');
+
+      // Only one menu open at a time - opening a second while the first is
+      // still up reads as two menus fighting over the same click
+      closeAll(dropdown);
+
+      if (!dropdown) return;
+
+      // A choice inside the menu closes it. Anything the item does itself -
+      // navigating, submitting - still runs; this only takes the menu away.
+      if (event.target.closest('.mw-dropdown-item')) {
+        dropdown.removeAttribute('open');
+      }
+    });
+
+    document.addEventListener('keydown', function (event) {
+      if (event.key !== 'Escape') return;
+
+      const open = document.querySelector('.mw-dropdown[open]');
+      if (!open) return;
+
+      open.removeAttribute('open');
+      // Focus goes back to what opened it, or it is left on a menu that is no
+      // longer there and the next Tab starts from the top of the page
+      const trigger = open.querySelector('summary');
+      if (trigger) trigger.focus();
+    });
+  }
+
   // ===== Checkbox Lists =====
   function initCheckboxLists() {
     const checkboxLists = document.querySelectorAll(
@@ -184,8 +231,13 @@
 
     if (dotsBox) {
       for (let i = 0; i < slides.length; i++) {
-        const dot = document.createElement('span');
+        // A button, not a span: the dots are the only way to reach slide four
+        // directly, and as a span nothing focuses them and no screen reader
+        // says what they are.
+        const dot = document.createElement('button');
+        dot.type = 'button';
         dot.className = 'mw-gallery-dot' + (i === 0 ? ' mw-active' : '');
+        dot.setAttribute('aria-label', 'Go to slide ' + (i + 1));
         dot.addEventListener('click', () => goToSlide(i));
         dotsBox.appendChild(dot);
       }
@@ -790,12 +842,30 @@
       refresh();
     }
 
+    const MOVE_CLASSES = [
+      'mw-kanban-card-moved-forward',
+      'mw-kanban-card-moved-back',
+    ];
+
     function moveCard(card, offset) {
       const current = card.closest('.mw-kanban-column');
       const target = columns[columns.indexOf(current) + offset];
       if (!target) return;
 
       target.querySelector('.mw-kanban-column-body').appendChild(card);
+
+      // The card lands in a lane somewhere else on the board, so it says so on
+      // arrival and comes in from the side it was pushed from. Re-parenting it
+      // alone made it blink into the other column with no motion at all.
+      //
+      // Both classes come off first and the reflow is forced in between: an
+      // element that already carries the class it is being given again keeps
+      // the finished animation and plays nothing, so a second push in the same
+      // direction would be the silent one.
+      card.classList.remove.apply(card.classList, MOVE_CLASSES);
+      void card.offsetWidth;
+      card.classList.add(offset > 0 ? MOVE_CLASSES[0] : MOVE_CLASSES[1]);
+
       refresh();
     }
 

package/src/partials/accordions-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Accordions</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Only as much content open as anyone needs at once. The header is the control
+  and the panel follows it in the DOM, which is what lets the whole thing run
+  off two state classes and no wrapper element.
+</p>
 
 <div class="mw-accordion">
   <div class="mw-accordion-item">

package/src/partials/alerts-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Alerts System</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A message that belongs to the page it sits on. The colour carries the severity
+  and the left rule repeats it, so the meaning survives where the tint does not.
+  The same markup inside a <code>mw-toast-stack</code> becomes a toast.
+</p>
 
 <div class="mw-grid-2 mw-gap-4">
   <!-- Primary: System Notifications -->

package/src/partials/avatars-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Avatars</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A picture or a pair of initials, in five sizes. The colour variants sit on the
+  border, so they still read over a photo; on an initials avatar they fill the
+  circle as well. Inside a group the overlap follows the avatar size.
+</p>
 
 <div class="mw-grid-2">
   <div>

package/src/partials/badges-container.html

@@ -0,0 +1,114 @@
+<h3 class="mw-section-subtitle">Badges</h3>
+
+<p class="mw-text-muted mw-mb-6 mw-text-measure">
+  A badge is not a tag. A tag names something and sits in a row of its own kind;
+  a badge carries a count or a status and usually sits <em>on</em> something -
+  the number on a bell, the dot on an avatar. That is why it fills its colour
+  instead of tinting it, and why it comes with an anchor.
+</p>
+
+<div class="mw-grid-2 mw-gap-6">
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Counts</h3>
+    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Colors</h5>
+        <div class="mw-d-flex mw-items-center mw-gap-3 mw-flex-wrap">
+          <span class="mw-badge">3</span>
+          <span class="mw-badge mw-badge-secondary">8</span>
+          <span class="mw-badge mw-badge-success">1</span>
+          <span class="mw-badge mw-badge-warning">4</span>
+          <span class="mw-badge mw-badge-danger">99+</span>
+          <span class="mw-badge mw-badge-info">12</span>
+          <span class="mw-badge mw-badge-muted">0</span>
+          <span class="mw-badge mw-badge-outline">new</span>
+        </div>
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Sizes</h5>
+        <div class="mw-d-flex mw-items-center mw-gap-3">
+          <span class="mw-badge mw-badge-sm">7</span>
+          <span class="mw-badge">7</span>
+          <span class="mw-badge mw-badge-lg">7</span>
+        </div>
+        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
+          Round on one character, a pill from two on - a
+          <code>min-width</code> the padding grows past, the same rule an OS
+          badge follows. The digits are tabular, so a counter ticking 9 to 10
+          does not shift what sits beside it.
+        </p>
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Anchored to something</h5>
+        <div class="mw-d-flex mw-items-center mw-gap-6">
+          <span class="mw-badge-anchor">
+            <button class="mw-btn mw-btn-outline">
+              <i class="fas fa-inbox"></i> Inbox
+            </button>
+            <span class="mw-badge mw-badge-danger mw-badge-float">5</span>
+          </span>
+          <span class="mw-badge-anchor">
+            <i class="fas fa-bell mw-text-xl"></i>
+            <span class="mw-badge mw-badge-primary mw-badge-float mw-badge-sm"
+              >2</span
+            >
+          </span>
+        </div>
+        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
+          <code>mw-badge-anchor</code> on the thing being badged,
+          <code>mw-badge-float</code> on the badge. It hangs off the corner and
+          carries a ring in the surface colour, so it reads as a separate object
+          rather than a blob on the icon.
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    <h3 class="mw-card-title mw-mb-4">Status</h3>
+    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Dot with a label</h5>
+        <div class="mw-grid-1 mw-gap-3">
+          <span class="mw-badge-status mw-badge-status-success">
+            <span class="mw-badge-dot"></span> Online
+          </span>
+          <span class="mw-badge-status mw-badge-status-warning">
+            <span class="mw-badge-dot"></span> Degraded
+          </span>
+          <span class="mw-badge-status mw-badge-status-danger">
+            <span class="mw-badge-dot mw-badge-pulse"></span> Incident
+          </span>
+          <span class="mw-badge-status mw-badge-status-muted">
+            <span class="mw-badge-dot"></span> Archived
+          </span>
+        </div>
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Live</h5>
+        <p class="mw-text-muted mw-text-sm mw-mb-0">
+          <code>mw-badge-pulse</code> adds a ring that grows out and fades. The
+          dot underneath never moves, so a column of them in a table stays
+          readable. For something actually running - a job, an open connection -
+          not for decoration.
+        </p>
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">In a row</h5>
+        <div class="mw-row-split mw-row-split-center">
+          <span>Deployment #4812</span>
+          <span class="mw-badge-status mw-badge-status-success">
+            <span class="mw-badge-dot"></span> Passed
+          </span>
+        </div>
+        <hr class="mw-divider" />
+        <div class="mw-row-split mw-row-split-center">
+          <span>Deployment #4811</span>
+          <span class="mw-badge-status mw-badge-status-danger">
+            <span class="mw-badge-dot"></span> Failed
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/partials/blog-posts-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Blog Posts</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A long-form article rather than a card: title, meta line, body and the way
+  back out. The gradient rule down the left edge is what makes it read as a page
+  instead of a panel.
+</p>
 
 <div class="mw-blog-post mw-mt-9">
   <h2 class="mw-blog-post-title">

package/src/partials/breadcrumbs-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Breadcrumbs</h3>
-<p class="mw-text-muted">
+<p class="mw-text-muted mw-text-measure mw-mb-6">
   Modern skewed navigation breadcrumbs with overlapping design.
 </p>
 

package/src/partials/button-bar-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Button Bars</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A framed row of actions. Below 576px it stacks and every button takes the full
+  width. The colour variants style whatever is inside them, so a bar of five
+  buttons needs one class rather than five.
+</p>
 
 <div class="mw-grid-stack-stretch">
   <div>

package/src/partials/buttons-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Buttons</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Three emphasis levels: primary fills, outline draws a line, ghost does neither
+  until you point at it. Every variant dips a pixel when pressed - on touch that
+  press is the only feedback there is.
+</p>
 
 <div class="mw-grid-1">
   <div>
@@ -31,6 +36,85 @@
     </div>
   </div>
 
+  <div>
+    <h3 class="mw-mb-4">Ghost, Icon &amp; Block</h3>
+    <div class="mw-card mw-card-simple mw-grid-1 mw-gap-6">
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Ghost</h5>
+        <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
+          <button type="button" class="mw-btn mw-btn-ghost">Rename</button>
+          <button type="button" class="mw-btn mw-btn-ghost mw-active">
+            Selected
+          </button>
+          <button type="button" class="mw-btn mw-btn-ghost mw-btn-ghost-danger">
+            Remove
+          </button>
+        </div>
+        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
+          The third emphasis level: primary fills, outline draws a line, ghost
+          does neither until you point at it. For a toolbar or a card's own
+          actions, where five outlined boxes would fight the content under them.
+          Not <code>mw-btn-plain</code> - this keeps the shape, the padding and
+          the hit area, it just does not paint them at rest.
+        </p>
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Icon only</h5>
+        <div class="mw-d-flex mw-flex-wrap mw-items-center mw-gap-3">
+          <button
+            type="button"
+            class="mw-btn mw-btn-ghost mw-btn-icon mw-btn-sm"
+            aria-label="Edit"
+            data-tooltip="Edit"
+          >
+            <i class="fas fa-pen"></i>
+          </button>
+          <button
+            type="button"
+            class="mw-btn mw-btn-ghost mw-btn-icon"
+            aria-label="Duplicate"
+            data-tooltip="Duplicate"
+          >
+            <i class="fas fa-copy"></i>
+          </button>
+          <button
+            type="button"
+            class="mw-btn mw-btn-outline mw-btn-icon"
+            aria-label="Share"
+            data-tooltip="Share"
+          >
+            <i class="fas fa-share"></i>
+          </button>
+          <button
+            type="button"
+            class="mw-btn mw-btn-primary mw-btn-icon mw-btn-lg"
+            aria-label="Add"
+            data-tooltip="Add"
+          >
+            <i class="fas fa-plus"></i>
+          </button>
+        </div>
+        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
+          <code>mw-btn-icon</code> makes the button square. Without it the
+          horizontal padding is the only thing setting the width, so an icon
+          button ends up wider than it is tall and a row of them lines up on
+          nothing. It always needs an <code>aria-label</code> - there is no text
+          to read out.
+        </p>
+      </div>
+      <div>
+        <h5 class="mw-text-medium mw-mb-2">Block</h5>
+        <button type="button" class="mw-btn mw-btn-primary mw-btn-block">
+          Sign in
+        </button>
+        <p class="mw-text-muted mw-text-sm mw-mt-3 mw-mb-0">
+          <code>mw-btn-block</code> takes the full width - the one action on a
+          sheet, a sign-in form, a narrow sidebar.
+        </p>
+      </div>
+    </div>
+  </div>
+
   <div>
     <h3 class="mw-mb-4">Button Sizes</h3>
     <div class="mw-card mw-card-simple">

package/src/partials/calendar-container.html

@@ -1,5 +1,5 @@
 <h3 class="mw-section-subtitle">Calendar</h3>
-<p class="mw-text-muted">
+<p class="mw-text-muted mw-text-measure mw-mb-6">
   Month, compact and week share every class - a week is seven cells instead of
   forty-two, <code>mw-calendar-compact</code> drops the dots and a third of the
   height. The status dots come in as

package/src/partials/cards-container.html

@@ -1,4 +1,9 @@
 <h3 class="mw-section-subtitle">Cards</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  The framework's main container: a surface, padding, an optional image, a
+  header and a footer. The add-ons - badge, ribbon, title icon - all take their
+  colour from one <code>mw-card-addon-*</code> class on the card itself.
+</p>
 
 <h3 class="mw-mb-4">Standard Cards</h3>
 <div class="mw-grid-3">

package/src/partials/code-container.html

@@ -1,4 +1,10 @@
 <h3 class="mw-section-subtitle">Code</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  Inline code gets a surface of its own so it reads as a quoted thing; blocks
+  get a filename bar and a terminal variant. The syntax colours are a fixed pair
+  of themes rather than brand tokens - code is easier to read in the colours an
+  editor already uses.
+</p>
 
 <div class="mw-grid-2 mw-gap-5">
   <div>

package/src/partials/colors-container.html

@@ -2,7 +2,7 @@
 
 <!-- the hex code string is getting updated via javascript! -->
 
-<p class="mw-text-muted mw-mb-6">
+<p class="mw-text-muted mw-text-measure mw-mb-6">
   These thirteen are the only colors you ever set. Everything else - hover
   tones, translucent backgrounds, borders, muted text, the card and footer
   surfaces, the ink variant the dark theme needs - is derived from them at

package/src/partials/coming-soon-container.html

@@ -1,4 +1,8 @@
 <h3 class="mw-section-subtitle">Coming Soon Banner</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A placeholder for a section that is not built yet. Loud on purpose: the whole
+  point is that nobody ships it by accident.
+</p>
 
 <div class="mw-coming-soon">
   <i class="mw-coming-soon-icon fas fa-tools"></i>

package/src/partials/divider-container.html

@@ -1,4 +1,8 @@
 <h3 class="mw-section-subtitle">Divider</h3>
+<p class="mw-text-muted mw-text-measure mw-mb-6">
+  A rule between two things - horizontal or vertical, solid or dashed, in a
+  brand colour, or with a label sitting in the middle of it.
+</p>
 
 <div class="mw-grid-2 mw-gap-6">
   <div>