maverick-wave 5.24.0 → 5.26.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.claude/skills/mw-maverick-wave/SKILL.md +32 -5
- package/.claude/skills/mw-maverick-wave/references/components.md +4 -0
- package/.claude/skills/mw-maverick-wave/references/javascript.md +44 -8
- package/.claude/skills/mw-maverick-wave/references/layout.md +39 -11
- package/.claude/skills/mw-maverick-wave/references/theming.md +34 -10
- package/CHANGELOG.md +20 -0
- package/CLAUDE.md +4 -0
- package/README.md +4 -2
- package/index.html +13 -0
- package/maverick-wave.min.css +7 -5
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/src/js/main.js +149 -57
- package/src/partials/accordions-container.html +1 -1
- package/src/partials/alerts-container.html +1 -1
- package/src/partials/announcement-container.html +1 -1
- package/src/partials/avatars-container.html +1 -1
- package/src/partials/badges-container.html +1 -1
- package/src/partials/blog-posts-container.html +2 -2
- package/src/partials/breadcrumbs-container.html +1 -1
- package/src/partials/button-bar-container.html +1 -1
- package/src/partials/buttons-container.html +1 -1
- package/src/partials/calendar-container.html +1 -1
- package/src/partials/cards-container.html +1 -1
- package/src/partials/code-container.html +1 -1
- package/src/partials/colors-container.html +3 -3
- package/src/partials/coming-soon-container.html +1 -1
- package/src/partials/contact-container.html +1 -1
- package/src/partials/divider-container.html +1 -1
- package/src/partials/dropdown-container.html +1 -1
- package/src/partials/empty-state-container.html +1 -1
- package/src/partials/form-container.html +1 -1
- package/src/partials/form-elements-container.html +1 -1
- package/src/partials/form-field-container.html +1 -1
- package/src/partials/gallery-container.html +1 -1
- package/src/partials/get-started-container.html +5 -10
- package/src/partials/grid-container.html +1 -1
- package/src/partials/header-utilities-container.html +2 -2
- package/src/partials/html-lists-container.html +1 -1
- package/src/partials/info-container.html +1 -1
- package/src/partials/input-group-container.html +2 -4
- package/src/partials/item-lists-container.html +1 -1
- package/src/partials/kanban-container.html +2 -2
- package/src/partials/kbd-container.html +1 -1
- package/src/partials/leader-row-container.html +2 -2
- package/src/partials/login-container.html +2 -2
- package/src/partials/lunch-menu-container.html +2 -2
- package/src/partials/media-container.html +1 -1
- package/src/partials/meta-info-container.html +1 -1
- package/src/partials/modals-container.html +1 -1
- package/src/partials/page-header-container.html +1 -1
- package/src/partials/pagination-container.html +2 -2
- package/src/partials/palette-container.html +2 -2
- package/src/partials/panels-container.html +2 -2
- package/src/partials/parallax-container.html +1 -1
- package/src/partials/pricing-container.html +2 -2
- package/src/partials/progress-container.html +1 -1
- package/src/partials/prose-container.html +1 -1
- package/src/partials/ratings-container.html +1 -1
- package/src/partials/section-head-container.html +6 -3
- package/src/partials/segmented-container.html +1 -1
- package/src/partials/skeleton-container.html +1 -1
- package/src/partials/spinners-container.html +1 -1
- package/src/partials/stepper-container.html +1 -1
- package/src/partials/tables-container.html +1 -1
- package/src/partials/tabs-container.html +1 -1
- package/src/partials/tags-container.html +1 -7
- package/src/partials/testimonials-container.html +1 -1
- package/src/partials/tiles-container.html +1 -1
- package/src/partials/typography-container.html +1 -1
- package/src/partials/utilities-container.html +1 -1
- package/src/scss/base/_base.scss +21 -5
- package/src/scss/components/_blog-post.scss +15 -10
- package/src/scss/components/_button-bar.scss +10 -6
- package/src/scss/components/_code.scss +23 -34
- package/src/scss/components/_info.scss +8 -1
- package/src/scss/components/_kanban.scss +6 -6
- package/src/scss/components/_meta-info.scss +7 -6
- package/src/scss/components/_tables.scss +6 -4
- package/src/scss/components/_tiles.scss +20 -30
- package/src/scss/layout/_grid.scss +28 -0
- package/src/scss/layout/_header.scss +16 -9
- package/src/scss/layout/_home.scss +21 -2
- package/src/scss/layout/_main.scss +7 -7
- package/src/scss/layout/_page-header.scss +4 -4
- package/src/scss/layout/_section.scss +33 -10
- package/src/scss/main-lean.scss +16 -0
- package/src/scss/utilities/_index.scss +1 -0
- package/src/scss/utilities/_print.scss +107 -0
- package/src/scss/utilities/_touch-targets.scss +4 -0
package/maverick-wave.min.js
CHANGED
|
@@ -1 +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(){const e=Array.from(document.querySelectorAll(".color-swatch")),t=e.map(e=>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 r="#"+t(a[1])+t(a[2])+t(a[3]),o=void 0===a[4]?1:parseFloat(a[4]);return(o<1?`${r} / ${o}`:r).toUpperCase()}(window.getComputedStyle(e).backgroundColor));e.forEach((e,n)=>{const a=e.parentElement.querySelector(".mw-text-muted");a&&(a.textContent=t[n])})}function a(){const e=parseFloat(getComputedStyle(document.documentElement).scrollPaddingTop);return Number.isNaN(e)?0:e}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,r=e.querySelector(".mw-gallery-dots"),o=e.querySelector(".mw-gallery-desc"),c=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}%)`,r&&r.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===l)}),o&&(o.textContent=a[l].dataset.desc||"")}if(r)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)),r.appendChild(t)}c&&c.addEventListener("click",()=>i(l-1)),s&&s.addEventListener("click",()=>i(l+1));let d=0,u=0,m=!1;n.addEventListener("touchstart",e=>{m=1===e.touches.length,m&&(d=e.touches[0].clientX,u=e.touches[0].clientY)},{passive:!0}),n.addEventListener("touchcancel",()=>m=!1),n.addEventListener("touchend",e=>{if(!m)return;m=!1;const t=e.changedTouches[0].clientX-d,n=e.changedTouches[0].clientY-u;Math.abs(t)<50||Math.abs(t)<=Math.abs(n)||i(l+(t<0?1:-1))},{passive:!0}),i(0)}(t,e)}),function(){const t=document.querySelector(".mw-theme-toggle");if(!t)return;const a=document.body,r=document.documentElement,o=t.querySelector(".mw-theme-toggle-slider i"),c=getComputedStyle(document.documentElement).getPropertyValue("--mw-internal-theme-mode").trim()||"switchable";if("switchable"!==c)return console.log(`Theme mode fixed to: ${c}. Disabling toggle.`),o&&(o.className="light"===c?"fas fa-sun":"fas fa-moon"),e(t,"light"===c),t.style.opacity="0.4",t.style.pointerEvents="none",t.style.cursor="default",t.setAttribute("aria-disabled","true"),localStorage.removeItem("mw-theme"),void a.classList.remove("mw-theme-light","mw-theme-dark");const s=window.matchMedia("(prefers-color-scheme: light)"),l=window.CSS&&CSS.supports("color","light-dark(#000, #fff)"),i=()=>l&&s.matches,d=localStorage.getItem("mw-theme");let u=d?"light"===d:i();const m=n=>{r.classList.add("mw-theme-switching"),a.classList.toggle("mw-theme-light",n),a.classList.toggle("mw-theme-dark",!n),r.offsetHeight,r.classList.remove("mw-theme-switching"),e(t,n),o&&(o.className=n?"fas fa-sun":"fas fa-moon")};m(u),s.addEventListener("change",()=>{localStorage.getItem("mw-theme")||(u=i(),m(u),n())}),t.addEventListener("click",()=>{u=!u,m(u),localStorage.setItem("mw-theme",u?"light":"dark"),n()})}(),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;const n="BUTTON"===e.tagName;function a(a){e.classList.toggle("open",a),t.classList.toggle("open",a),document.body.classList.toggle("mw-nav-open",a),n&&e.setAttribute("aria-expanded",String(a))}function r(e){e.preventDefault(),e.stopPropagation(),a(!t.classList.contains("open"))}e.addEventListener("click",r),document.addEventListener("click",function(n){t.classList.contains("open")&&(t.contains(n.target)||e.contains(n.target)||a(!1))}),document.addEventListener("keydown",function(n){"Escape"===n.key&&t.classList.contains("open")&&(a(!1),e.focus())})}(),function(){const e=document.querySelectorAll(".mw-progress-fill");if(!e.length)return;const t=CSS.supports("animation-timeline","view()"),n=e=>e.dataset.value?e.dataset.value+"%":e.style.width,a=[];if(e.forEach(e=>{const r=n(e);r&&(e.style.setProperty("--mw-progress-value",r),t?e.classList.add("mw-progress-driven"):a.push(e))}),t)return;const r=new IntersectionObserver((e,t)=>{e.forEach(e=>{e.isIntersecting&&(e.target.style.width=n(e.target),t.unobserve(e.target))})},{root:null,threshold:.2});a.forEach(e=>r.observe(e))}(),function(){if(CSS.supports("animation-timeline","view()"))return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;const e=document.querySelectorAll(".mw-reveal, .mw-reveal-stagger > *");if(!e.length)return;const t=e=>{const t=e.parentElement;if(!t||!t.classList.contains("mw-reveal-stagger"))return 0;const n=getComputedStyle(t).gridTemplateColumns.split(" ").length;return[...t.children].indexOf(e)%n*90},n=new IntersectionObserver((e,n)=>{e.forEach(e=>{e.isIntersecting&&(n.unobserve(e.target),e.target.style.animationDelay=t(e.target)+"ms",e.target.classList.replace("mw-reveal-hidden","mw-reveal-run"))})},{threshold:.15});e.forEach(e=>{e.getBoundingClientRect().top<window.innerHeight||(e.classList.add("mw-reveal-hidden"),n.observe(e))})}(),function(){const e=document.querySelector(".mw-header-reveal");if(!e)return;if(CSS.supports("animation-timeline","scroll()"))return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=document.querySelector(".mw-announcement:not(.mw-announcement-static)"),n=270;let a=null;const r=()=>{const r=window.scrollY<n;r!==a&&(a=r,e.classList.toggle("mw-header-away",r),t&&t.classList.toggle("mw-announcement-away",r))};r(),requestAnimationFrame(()=>{e.classList.add("mw-header-driven"),t&&t.classList.add("mw-announcement-driven")}),window.addEventListener("scroll",r,{passive:!0})}(),function(){if(CSS.supports("animation-timeline","view()"))return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;const e=document.querySelectorAll(".mw-parallax-media");if(!e.length)return;const t=[...e].map(e=>(e.classList.add("mw-parallax-driven"),{el:e,pinned:Boolean(e.closest(".mw-parallax-sticky"))})),n=e=>Math.min(1,Math.max(0,e)),a=(e,t)=>{if(e.pinned)return n(window.scrollY/t);const a=e.el.getBoundingClientRect();return n((t-a.top)/(t+a.height))};let r=!1;const o=()=>{r=!1;const e=document.documentElement.clientHeight,n=t.map(t=>a(t,e));t.forEach((e,t)=>e.el.style.setProperty("--mw-parallax-progress",n[t]))},c=()=>{r||(r=!0,requestAnimationFrame(o))};o(),window.addEventListener("scroll",c,{passive:!0}),window.addEventListener("resize",c,{passive:!0})}(),function(){function e(e){const t=e.style.position,n="sticky"===getComputedStyle(e).position;n&&(e.style.position="static");const a=e.getBoundingClientRect().top+window.scrollY;return n&&(e.style.position=t),a}function t(e){const t=window.scrollY,n=e-t;if(!n)return;const a=Math.min(2e3,600+.5*Math.abs(n)),o={};r=o;let c=null;function s(e){if(r!==o)return;null===c&&(c=e);const l=Math.min(1,(e-c)/a),i=l<.5?4*l*l*l:1-Math.pow(-2*l+2,3)/2;window.scrollTo({top:t+n*i,behavior:"instant"}),l<1?requestAnimationFrame(s):r=null}requestAnimationFrame(s)}document.querySelectorAll('a[href^="#"]').forEach(n=>{n.addEventListener("click",function(n){const r=this.getAttribute("href");if("#"===r)return;const o=document.querySelector(r);if(!o)return;const c=document.querySelector(".mw-menu-btn"),s=document.querySelector(".mw-navbar");c&&s&&(c.classList.remove("open"),s.classList.remove("open"),document.body.classList.remove("mw-nav-open"),"BUTTON"===c.tagName&&c.setAttribute("aria-expanded","false")),n.preventDefault();const l=Math.max(0,e(o)-a());o.hasAttribute("tabindex")||o.setAttribute("tabindex","-1"),o.focus({preventScroll:!0}),window.matchMedia("(prefers-reduced-motion: reduce)").matches?window.scrollTo({top:l,behavior:"instant"}):t(l),history.replaceState(null,"",r)})})}(),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,r=arguments;clearTimeout(n),n=setTimeout(()=>e.apply(a,r),t)}}(function(){let r="";const o=a()+2;t.forEach(e=>{const t=e.offsetTop-o,n=e.clientHeight;scrollY>=t&&scrollY<t+n&&(r=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)===r&&e(t,!0)}}})},100),{passive:!0})}(),document.querySelectorAll(".mw-tabs-nav").forEach(e=>{const t=Array.from(e.querySelectorAll(".mw-tabs-nav-item"));if(!t.length)return;const n=!!e.closest(".mw-tabs-vertical");e.setAttribute("role","tablist"),n&&e.setAttribute("aria-orientation","vertical"),t.forEach((e,a)=>{const r=c(e);e.setAttribute("role","tab"),e.id||(e.id=(r?r.id:"mw-tab-"+a)+"-tab"),r&&(e.setAttribute("aria-controls",r.id),r.setAttribute("role","tabpanel"),r.setAttribute("aria-labelledby",e.id)),s(e),e.addEventListener("click",()=>l(t,e)),e.addEventListener("keydown",e=>{const r=function(e,t,n,a){const r=t?"ArrowUp":"ArrowLeft",o=t?"ArrowDown":"ArrowRight";return e.key===r?(a-1+n)%n:e.key===o?(a+1)%n:"Home"===e.key?0:"End"===e.key?n-1:null}(e,n,t.length,a);null!==r&&(e.preventDefault(),l(t,t[r]),t[r].focus())})}),o(e);const a=new ResizeObserver(()=>o(e));a.observe(e),t.forEach(e=>a.observe(e))}),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&&i()){const e=document.createElement("div");e.className="mw-localhost-indicator-pulse",t.prepend(e)}}(),function(){if(!i())return;const e=document.querySelector('meta[name="viewport"]'),t=e&&e.getAttribute("content")||"";if(/viewport-fit\s*=\s*cover/.test(t))return;console.warn('MaverickWave: <meta name="viewport"> is missing viewport-fit=cover. env(safe-area-inset-*) resolves to 0 without it, so notched phones lose the gutter, the nav panel and the modal padding that expect it.')}(),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,r=Math.round(e/a*100);t.style.setProperty("--value",r+"%"),n.classList.contains("mw-slider-numeric")?n.setAttribute("data-value",e):n.setAttribute("data-value",r)};t.addEventListener("input",a),a()}),document.addEventListener("click",e=>{const t=e.target.closest(".mw-modal-close");if(t){const e=t.closest("dialog.mw-modal");if(e)return void e.close();const n=t.closest(".mw-modal-overlay");return void(n&&n.classList.remove("mw-modal-open"))}const n=e.target.closest("[data-mw-modal]");var a;n?d(document.getElementById(n.dataset.mwModal)):e.target.matches("dialog.mw-modal[open]")&&(!("closedBy"in(a=e.target))||null===a.getAttribute("closedby"))&&e.target.close()}),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 r=0;function o(){n.forEach(t=>{e(t,parseInt(t.dataset.index)===r)}),a.forEach(t=>{e(t,parseInt(t.dataset.index)===r)})}function c(e){r=e,o()}a.forEach(e=>{e.addEventListener("click",()=>{c(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(u),document.querySelectorAll("[data-calendar]").forEach(m),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()})}(),document.querySelectorAll(".mw-lang-switch").forEach(t=>{const n=t.querySelectorAll("[data-mw-lang]"),a=t.querySelector("summary"),r=t.querySelector("summary .mw-flag"),o=t.querySelector("summary .mw-lang-switch-code");n.forEach(c=>{c.addEventListener("click",function(){const s=c.dataset.mwLang,l=c.querySelector(".mw-lang-switch-name"),i=l?l.textContent.trim():s;n.forEach(t=>{e(t,t===c),t===c?t.setAttribute("aria-current","true"):t.removeAttribute("aria-current")}),o&&(o.textContent=s);const d=c.querySelector(".mw-flag");r&&d&&(r.className=d.className),a&&a.setAttribute("aria-label","Language: "+i),t.dispatchEvent(new CustomEvent("mw-language-change",{bubbles:!0,detail:{lang:s,name:i}}))})})})}),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}}))};let r=null;function o(e){const t=e.querySelector(".mw-tabs-nav-item.mw-active, .mw-tabs-nav-item.active");t?(e.style.setProperty("--mw-tabs-marker-x",t.offsetLeft+"px"),e.style.setProperty("--mw-tabs-marker-w",t.offsetWidth),e.style.setProperty("--mw-tabs-marker-y",t.offsetTop+"px"),e.style.setProperty("--mw-tabs-marker-h",t.offsetHeight),e.setAttribute("data-mw-tabs-marker","")):e.removeAttribute("data-mw-tabs-marker")}function c(e){const t=e.getAttribute("data-tab");return t?document.getElementById(t):null}function s(e){const n=t(e);e.setAttribute("aria-selected",String(n)),e.tabIndex=n?0:-1}function l(t,n){t.forEach(t=>{const a=t===n;e(t,a),e(c(t),a),s(t)});const a=n.closest(".mw-tabs-nav");a&&o(a)}function i(){const e=window.location.hostname;return"localhost"===e||"127.0.0.1"===e||e.includes("192.168.")}function d(e){e&&("DIALOG"===e.tagName?e.showModal():e.classList.add("mw-modal-open"))}function u(e){const t=Array.from(e.querySelectorAll(".mw-kanban-column")),n=e.querySelector(".mw-kanban-composer"),a=e.querySelector(".mw-kanban-card-template"),r=e.dataset.kanbanPrefix||"MW",o=n.querySelector(".mw-kanban-composer-title"),c=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"),r=e.querySelector(".mw-kanban-count");r&&(r.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){w(),i=t||null,o.value=t?u(t,".mw-kanban-card-title"):"",c.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 w(){n.classList.remove("mw-active"),i&&i.classList.remove("mw-kanban-editing"),i=null}function f(){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=c.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 r=a||document.createElement("div");r.className="mw-avatar mw-avatar-xs mw-avatar-initials",r.textContent=t,a||n.prepend(r)}(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 r+"-"+(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)}w(),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"),r=t[t.indexOf(a)+n];r&&(r.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 r=e.target.closest(".mw-kanban-delete");if(r){const e=r.closest(".mw-kanban-card");return e===i&&w(),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")&&w()}),n.addEventListener("submit",function(e){e.preventDefault(),f()}),n.addEventListener("keydown",function(e){"Escape"===e.key&&w()}),d()}function m(e){const t=e.querySelector(".mw-calendar-grid"),n=e.querySelector(".mw-calendar-title");if(!t)return;const a="week"===e.dataset.calendar,r=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,c=new Date;c.setHours(0,0,0,0);let s=e.dataset.calendarDate?new Date(e.dataset.calendarDate+"T00:00:00"):new Date(c),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"}),r=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+" - "+r}function m(e){const t=e.getDay();return 0===t||6===t}function w(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(c)&&(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(r[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 f(){const e=s.getMonth(),r=a?7:42,c=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<r;n++)t.appendChild(w(c,e)),c.setDate(c.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 r=n.target.closest("[data-calendar-nav]");if(r)return o=parseInt(r.dataset.calendarNav,10),a?s.setDate(s.getDate()+7*o):s=new Date(s.getFullYear(),s.getMonth()+o,1),void f();var o;const c=n.target.closest(".mw-calendar-day");var i;c&&!c.disabled&&(i=c.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 r=new Date(a.dataset.calendarDay+"T00:00:00");r.setDate(r.getDate()+n),function(e){const n=d(e);let a=t.querySelector('[data-calendar-day="'+n+'"]');a||(s=new Date(e),f(),a=t.querySelector('[data-calendar-day="'+n+'"]')),a&&(t.querySelectorAll(".mw-calendar-day").forEach(function(e){e.tabIndex=-1}),a.tabIndex=0,a.focus())}(r)}),f()}["wheel","touchstart"].forEach(e=>{window.addEventListener(e,()=>r=null,{passive:!0})}),window.mwOpenModal=e=>d(document.getElementById(e)),window.mwCloseModal=e=>{var t;(t=document.getElementById(e))&&("DIALOG"===t.tagName?t.close():t.classList.remove("mw-modal-open"))},window.mwRefreshColorSwatches=n}();
|
|
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"))}const n=new WeakSet;function a(e){return!(!e||n.has(e))&&(n.add(e),!0)}let r=!1;function o(){r||(r=!0,function(){const t=document.querySelector(".mw-theme-toggle");if(!t)return;const n=document.documentElement,a=t.querySelector(".mw-theme-toggle-slider i"),r=getComputedStyle(document.documentElement).getPropertyValue("--mw-internal-theme-mode").trim()||"switchable";if("switchable"!==r)return console.log(`Theme mode fixed to: ${r}. Disabling toggle.`),a&&(a.className="light"===r?"fas fa-sun":"fas fa-moon"),e(t,"light"===r),t.style.opacity="0.4",t.style.pointerEvents="none",t.style.cursor="default",t.setAttribute("aria-disabled","true"),localStorage.removeItem("mw-theme"),void n.classList.remove("mw-theme-light","mw-theme-dark");const o=window.matchMedia("(prefers-color-scheme: light)"),c=window.CSS&&CSS.supports("color","light-dark(#000, #fff)"),s=()=>c&&o.matches,i=localStorage.getItem("mw-theme");let d=i?"light"===i:s();const u=r=>{n.classList.add("mw-theme-switching"),n.classList.toggle("mw-theme-light",r),n.classList.toggle("mw-theme-dark",!r),n.offsetHeight,n.classList.remove("mw-theme-switching"),e(t,r),a&&(a.className=r?"fas fa-sun":"fas fa-moon")};u(d),o.addEventListener("change",()=>{localStorage.getItem("mw-theme")||(d=s(),u(d),l())}),t.addEventListener("click",()=>{d=!d,u(d),localStorage.setItem("mw-theme",d?"light":"dark"),l()})}(),l(),function(){const e=document.querySelector(".mw-menu-btn"),t=document.querySelector(".mw-navbar");if(!e||!t)return;const n="BUTTON"===e.tagName;function a(a){e.classList.toggle("open",a),t.classList.toggle("open",a),document.body.classList.toggle("mw-nav-open",a),n&&e.setAttribute("aria-expanded",String(a))}function r(e){e.preventDefault(),e.stopPropagation(),a(!t.classList.contains("open"))}e.addEventListener("click",r),document.addEventListener("click",function(n){t.classList.contains("open")&&(t.contains(n.target)||e.contains(n.target)||a(!1))}),document.addEventListener("keydown",function(n){"Escape"===n.key&&t.classList.contains("open")&&(a(!1),e.focus())})}(),function(){const e=document.querySelector(".mw-header-reveal");if(!e)return;if(CSS.supports("animation-timeline","scroll()"))return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=document.querySelector(".mw-announcement:not(.mw-announcement-static)"),n=270;let a=null;const r=()=>{const r=window.scrollY<n;r!==a&&(a=r,e.classList.toggle("mw-header-away",r),t&&t.classList.toggle("mw-announcement-away",r))};r(),requestAnimationFrame(()=>{e.classList.add("mw-header-driven"),t&&t.classList.add("mw-announcement-driven")}),window.addEventListener("scroll",r,{passive:!0})}(),function(){if(CSS.supports("animation-timeline","view()"))return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;const e=document.querySelectorAll(".mw-parallax-media");if(!e.length)return;const t=[...e].map(e=>(e.classList.add("mw-parallax-driven"),{el:e,pinned:Boolean(e.closest(".mw-parallax-sticky"))})),n=e=>Math.min(1,Math.max(0,e)),a=(e,t)=>{if(e.pinned)return n(window.scrollY/t);const a=e.el.getBoundingClientRect();return n((t-a.top)/(t+a.height))};let r=!1;const o=()=>{r=!1;const e=document.documentElement.clientHeight,n=t.map(t=>a(t,e));t.forEach((e,t)=>e.el.style.setProperty("--mw-parallax-progress",n[t]))},c=()=>{r||(r=!0,requestAnimationFrame(o))};o(),window.addEventListener("scroll",c,{passive:!0}),window.addEventListener("resize",c,{passive:!0})}(),function(){function e(e){const t=e.style.position,n="sticky"===getComputedStyle(e).position;n&&(e.style.position="static");const a=e.getBoundingClientRect().top+window.scrollY;return n&&(e.style.position=t),a}function t(e){const t=window.scrollY,n=e-t;if(!n)return;const a=Math.min(2e3,600+.5*Math.abs(n)),r={};d=r;let o=null;function c(e){if(d!==r)return;null===o&&(o=e);const s=Math.min(1,(e-o)/a),l=s<.5?4*s*s*s:1-Math.pow(-2*s+2,3)/2;window.scrollTo({top:t+n*l,behavior:"instant"}),s<1?requestAnimationFrame(c):d=null}requestAnimationFrame(c)}document.querySelectorAll('a[href^="#"]').forEach(n=>{n.addEventListener("click",function(n){const a=this.getAttribute("href");if("#"===a)return;const r=document.querySelector(a);if(!r)return;const o=document.querySelector(".mw-menu-btn"),c=document.querySelector(".mw-navbar");o&&c&&(o.classList.remove("open"),c.classList.remove("open"),document.body.classList.remove("mw-nav-open"),"BUTTON"===o.tagName&&o.setAttribute("aria-expanded","false")),n.preventDefault();const s=Math.max(0,e(r)-i());r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"),r.focus({preventScroll:!0}),window.matchMedia("(prefers-reduced-motion: reduce)").matches?window.scrollTo({top:s,behavior:"instant"}):t(s),history.replaceState(null,"",a)})})}(),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,r=arguments;clearTimeout(n),n=setTimeout(()=>e.apply(a,r),t)}}(function(){let a="";const r=i()+2;t.forEach(e=>{const t=e.offsetTop-r,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 r=n.indexOf("#");if(-1!==r){n.substring(r+1)===a&&e(t,!0)}}})},100),{passive:!0})}(),document.addEventListener("click",e=>{const t=e.target.closest(".mw-modal-close");if(t){const e=t.closest("dialog.mw-modal");if(e)return void e.close();const n=t.closest(".mw-modal-overlay");return void(n&&n.classList.remove("mw-modal-open"))}const n=e.target.closest("[data-mw-modal]");var a;n?g(document.getElementById(n.dataset.mwModal)):e.target.matches("dialog.mw-modal[open]")&&(!("closedBy"in(a=e.target))||null===a.getAttribute("closedby"))&&e.target.close()}),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()})}(),document.addEventListener("click",e=>{const t=e.target.closest(".mw-tags-remove");if(!t)return;const n=t.closest(".mw-tags-item");n&&n.remove()}),document.addEventListener("click",e=>{const t=e.target.closest("[data-mw-copy]");if(!t||!navigator.clipboard)return;const n=t.getAttribute("data-mw-copy"),a=t.closest(".mw-input-group")?.querySelector("input"),r=n||a?.value;r&&navigator.clipboard.writeText(r).then(()=>{t.dispatchEvent(new CustomEvent("mwCopied",{bubbles:!0,detail:{text:r}}))})}),function(){const e=document.querySelector(".mw-localhost-indicator-activated"),t=document.querySelector(".mw-header");if(e&&h()){const e=document.createElement("div");e.className="mw-localhost-indicator-pulse",t.prepend(e)}}(),function(){if(!h())return;const e=document.querySelector('meta[name="viewport"]'),t=e&&e.getAttribute("content")||"";if(/viewport-fit\s*=\s*cover/.test(t))return;console.warn('MaverickWave: <meta name="viewport"> is missing viewport-fit=cover. env(safe-area-inset-*) resolves to 0 without it, so notched phones lose the gutter, the nav panel and the modal padding that expect it.')}())}function c(n){const r=n||document;!function(e){e.querySelectorAll(".mw-gallery").forEach(e=>{if(!a(e))return;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,r=e.querySelector(".mw-gallery-dots"),o=e.querySelector(".mw-gallery-desc"),c=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}%)`,r&&r.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===l)}),o&&(o.textContent=a[l].dataset.desc||"")}if(r)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)),r.appendChild(t)}c&&c.addEventListener("click",()=>i(l-1));s&&s.addEventListener("click",()=>i(l+1));let d=0,u=0,m=!1;n.addEventListener("touchstart",e=>{m=1===e.touches.length,m&&(d=e.touches[0].clientX,u=e.touches[0].clientY)},{passive:!0}),n.addEventListener("touchcancel",()=>m=!1),n.addEventListener("touchend",e=>{if(!m)return;m=!1;const t=e.changedTouches[0].clientX-d,n=e.changedTouches[0].clientY-u;Math.abs(t)<50||Math.abs(t)<=Math.abs(n)||i(l+(t<0?1:-1))},{passive:!0}),i(0)}(t,e)})}(r),function(n){const r=n.querySelectorAll(".mw-accordion-header");r.forEach(n=>{if(!a(n))return;const r="BUTTON"===n.tagName;r&&n.setAttribute("aria-expanded",String(t(n))),n.addEventListener("click",function(){const n=!t(this);e(this,n),e(this.nextElementSibling,n),r&&this.setAttribute("aria-expanded",String(n))})})}(r),function(e){const t=Array.from(e.querySelectorAll(".mw-progress-fill")).filter(a);if(!t.length)return;const n=CSS.supports("animation-timeline","view()"),r=e=>e.dataset.value?e.dataset.value+"%":e.style.width,o=[];if(t.forEach(e=>{const t=r(e);t&&(e.style.setProperty("--mw-progress-value",t),n?e.classList.add("mw-progress-driven"):o.push(e))}),n)return;const c=new IntersectionObserver((e,t)=>{e.forEach(e=>{e.isIntersecting&&(e.target.style.width=r(e.target),t.unobserve(e.target))})},{root:null,threshold:.2});o.forEach(e=>c.observe(e))}(r),function(e){if(CSS.supports("animation-timeline","view()"))return;if(window.matchMedia("(prefers-reduced-motion: reduce)").matches)return;const t=Array.from(e.querySelectorAll(".mw-reveal, .mw-reveal-stagger > *")).filter(a);if(!t.length)return;const n=e=>{const t=e.parentElement;if(!t||!t.classList.contains("mw-reveal-stagger"))return 0;const n=getComputedStyle(t).gridTemplateColumns.split(" ").length;return[...t.children].indexOf(e)%n*90},r=new IntersectionObserver((e,t)=>{e.forEach(e=>{e.isIntersecting&&(t.unobserve(e.target),e.target.style.animationDelay=n(e.target)+"ms",e.target.classList.replace("mw-reveal-hidden","mw-reveal-run"))})},{threshold:.15});t.forEach(e=>{e.getBoundingClientRect().top<window.innerHeight||(e.classList.add("mw-reveal-hidden"),r.observe(e))})}(r),function(e){e.querySelectorAll(".mw-tabs-nav").forEach(e=>{if(!a(e))return;const t=Array.from(e.querySelectorAll(".mw-tabs-nav-item"));if(!t.length)return;const n=!!e.closest(".mw-tabs-vertical");e.setAttribute("role","tablist"),n&&e.setAttribute("aria-orientation","vertical"),t.forEach((e,a)=>{const r=m(e);e.setAttribute("role","tab"),e.id||(e.id=(r?r.id:"mw-tab-"+a)+"-tab"),r&&(e.setAttribute("aria-controls",r.id),r.setAttribute("role","tabpanel"),r.setAttribute("aria-labelledby",e.id)),w(e),e.addEventListener("click",()=>f(t,e)),e.addEventListener("keydown",e=>{const r=function(e,t,n,a){const r=t?"ArrowUp":"ArrowLeft",o=t?"ArrowDown":"ArrowRight";return e.key===r?(a-1+n)%n:e.key===o?(a+1)%n:"Home"===e.key?0:"End"===e.key?n-1:null}(e,n,t.length,a);null!==r&&(e.preventDefault(),f(t,t[r]),t[r].focus())})}),u(e);const r=new ResizeObserver(()=>u(e));r.observe(e),t.forEach(e=>r.observe(e))})}(r),function(e){const t=e.querySelectorAll(".mw-alert-close");t.forEach(e=>{a(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))})})}(r),function(e){e.querySelectorAll(".mw-slider-container").forEach(e=>{if(!a(e))return;const t=e.querySelector(".mw-slider"),n=e.querySelector(".mw-slider-value");if(!t||!n)return;const r=()=>{const e=Number(t.value),a=Number(t.max)||100,r=Math.round(e/a*100);t.style.setProperty("--value",r+"%"),n.classList.contains("mw-slider-numeric")?n.setAttribute("data-value",e):n.setAttribute("data-value",r)};t.addEventListener("input",r),r()})}(r),function(t){const n=t.querySelectorAll(".mw-image-slider");n.forEach(t=>{if(!a(t))return;const n=t.querySelectorAll(".mw-image-slider-overlay-image"),r=t.querySelectorAll("button[data-index]");if(!n.length||!r.length)return;let o=0;function c(){n.forEach(t=>{e(t,parseInt(t.dataset.index)===o)}),r.forEach(t=>{e(t,parseInt(t.dataset.index)===o)})}function s(e){o=e,c()}r.forEach(e=>{e.addEventListener("click",()=>{s(parseInt(e.dataset.index))})}),c()})}(r),function(e){const t=e.querySelectorAll(".mw-item-list-checkbox, .mw-item-list-checkbox-scroll");t.forEach(e=>{if(!a(e))return;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&&s(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)}))})})}(r),function(e){e.querySelectorAll(".mw-kanban").forEach(e=>{a(e)&&function(e){const t=Array.from(e.querySelectorAll(".mw-kanban-column")),n=e.querySelector(".mw-kanban-composer"),a=e.querySelector(".mw-kanban-card-template"),r=e.dataset.kanbanPrefix||"MW",o=n.querySelector(".mw-kanban-composer-title"),c=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"),r=e.querySelector(".mw-kanban-count");r&&(r.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(){const t=Array.from(e.querySelectorAll(".mw-kanban-card-id")).map(function(e){return parseInt(e.textContent.split("-").pop(),10)||0});return r+"-"+(Math.max(0,...t)+1)}function m(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-",""):""}function w(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)}function f(e){const t=e.querySelector(".mw-avatar-initials");return t?t.textContent.trim():""}function h(e,t){const n=e.querySelector(t);return n?n.textContent.replace(/\s+/g," ").trim():""}function g(e,t){const n=e.querySelector(".mw-kanban-card-actions"),a=n.querySelector(".mw-avatar");if(!t)return void(a&&a.remove());const r=a||document.createElement("div");r.className="mw-avatar mw-avatar-xs mw-avatar-initials",r.textContent=t,a||n.prepend(r)}function p(e,t){y(),i=t||null,o.value=t?h(t,".mw-kanban-card-title"):"",c.value=t?h(t,".mw-kanban-card-text"):"",s.value=t?m(t):"",l.value=t?f(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 y(){n.classList.remove("mw-active"),i&&i.classList.remove("mw-kanban-editing"),i=null}function v(){const e=o.value.trim();if(!e)return void o.focus();const t=i||a.content.firstElementChild.cloneNode(!0);if(t.querySelector(".mw-kanban-card-title").textContent=e,t.querySelector(".mw-kanban-card-text").textContent=c.value.trim(),w(t,s.selectedOptions[0]),g(t,l.value),!i){const e=u();t.classList.add("mw-kanban-card-in"),t.querySelector(".mw-kanban-card-id").textContent=e,t.querySelectorAll("[aria-label]").forEach(function(t){t.setAttribute("aria-label",t.getAttribute("aria-label").replace(/[A-Z]+-\d+/,e))}),n.before(t)}y(),d()}const b=["mw-kanban-card-moved-forward","mw-kanban-card-moved-back"];function S(e,n){const a=e.closest(".mw-kanban-column"),r=t[t.indexOf(a)+n];r&&(r.querySelector(".mw-kanban-column-body").appendChild(e),e.classList.remove.apply(e.classList,b),e.offsetWidth,e.classList.add(n>0?b[0]:b[1]),d())}e.addEventListener("click",function(e){const t=e.target.closest("[data-kanban-move]");if(t){if(S(t.closest(".mw-kanban-card"),parseInt(t.dataset.kanbanMove,10)),t.disabled){const e=t.parentElement.querySelector("[data-kanban-move]:not(:disabled)");e&&e.focus()}return}const n=e.target.closest(".mw-kanban-edit");if(n){const e=n.closest(".mw-kanban-card");return void p(e.closest(".mw-kanban-column"),e)}const a=e.target.closest(".mw-kanban-delete");if(a){const e=a.closest(".mw-kanban-card");return e===i&&y(),e.remove(),void d()}const r=e.target.closest(".mw-kanban-add");r?p(r.closest(".mw-kanban-column"),null):e.target.closest(".mw-kanban-composer-cancel")&&y()}),n.addEventListener("submit",function(e){e.preventDefault(),v()}),n.addEventListener("keydown",function(e){"Escape"===e.key&&y()}),d()}(e)})}(r),function(e){e.querySelectorAll("[data-calendar]").forEach(e=>{a(e)&&function(e){const t=e.querySelector(".mw-calendar-grid"),n=e.querySelector(".mw-calendar-title");if(!t)return;const a="week"===e.dataset.calendar,r=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,c=new Date;c.setHours(0,0,0,0);let s=e.dataset.calendarDate?new Date(e.dataset.calendarDate+"T00:00:00"):new Date(c),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(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)}function m(){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"}),r=t.toLocaleDateString(o,{day:"numeric",month:"short",year:"numeric"});return"Week "+u(e)+" · "+n+" - "+r}function w(e){const t=e.getDay();return 0===t||6===t}function f(){const e=i(new Date);for(let n=0;n<7;n++){const n=document.createElement("div");n.className="mw-calendar-weekday",w(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)}}function h(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"})),w(e)&&s.classList.add("mw-calendar-weekend"),a||e.getMonth()===t||s.classList.add("mw-calendar-adjacent"),n===d(c)&&(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(r[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 g(){const e=s.getMonth(),r=a?7:42,o=i(a?s:new Date(s.getFullYear(),e,1));t.innerHTML="",f();for(let n=0;n<r;n++)t.appendChild(h(o,e)),o.setDate(o.getDate()+1);n&&(n.textContent=m()),p()}function p(){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)}function y(n){l=n===l?"":n,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}}))}function v(e){a?s.setDate(s.getDate()+7*e):s=new Date(s.getFullYear(),s.getMonth()+e,1),g()}function b(e){const n=d(e);let a=t.querySelector('[data-calendar-day="'+n+'"]');a||(s=new Date(e),g(),a=t.querySelector('[data-calendar-day="'+n+'"]')),a&&(t.querySelectorAll(".mw-calendar-day").forEach(function(e){e.tabIndex=-1}),a.tabIndex=0,a.focus())}e.addEventListener("click",function(e){const t=e.target.closest("[data-calendar-nav]");if(t)return void v(parseInt(t.dataset.calendarNav,10));const n=e.target.closest(".mw-calendar-day");n&&!n.disabled&&y(n.dataset.calendarDay)}),t.addEventListener("keydown",function(e){const t={ArrowLeft:-1,ArrowRight:1,ArrowUp:-7,ArrowDown:7}[e.key];if(!t)return;const n=e.target.closest(".mw-calendar-day");if(!n)return;e.preventDefault();const a=new Date(n.dataset.calendarDay+"T00:00:00");a.setDate(a.getDate()+t),b(a)}),g()}(e)})}(r),function(t){t.querySelectorAll(".mw-lang-switch").forEach(t=>{if(!a(t))return;const n=t.querySelectorAll("[data-mw-lang]"),r=t.querySelector("summary"),o=t.querySelector("summary .mw-flag"),c=t.querySelector("summary .mw-lang-switch-code");n.forEach(a=>{a.addEventListener("click",function(){const s=a.dataset.mwLang,l=a.querySelector(".mw-lang-switch-name"),i=l?l.textContent.trim():s;n.forEach(t=>{e(t,t===a),t===a?t.setAttribute("aria-current","true"):t.removeAttribute("aria-current")}),c&&(c.textContent=s);const d=a.querySelector(".mw-flag");o&&d&&(o.className=d.className),r&&r.setAttribute("aria-label","Language: "+i),t.dispatchEvent(new CustomEvent("mw-language-change",{bubbles:!0,detail:{lang:s,name:i}}))})})})}(r)}function s(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 l(){const e=Array.from(document.querySelectorAll(".color-swatch")),t=e.map(e=>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 r="#"+t(a[1])+t(a[2])+t(a[3]),o=void 0===a[4]?1:parseFloat(a[4]);return(o<1?`${r} / ${o}`:r).toUpperCase()}(window.getComputedStyle(e).backgroundColor));e.forEach((e,n)=>{const a=e.parentElement.querySelector(".mw-text-muted");a&&(a.textContent=t[n])})}function i(){const e=parseFloat(getComputedStyle(document.documentElement).scrollPaddingTop);return Number.isNaN(e)?0:e}document.addEventListener("DOMContentLoaded",function(){o(),c(document)}),window.MaverickWave={init:function(e){o(),c(e)}},window.mwToggleCheckbox=s;let d=null;function u(e){const t=e.querySelector(".mw-tabs-nav-item.mw-active, .mw-tabs-nav-item.active");t?(e.style.setProperty("--mw-tabs-marker-x",t.offsetLeft+"px"),e.style.setProperty("--mw-tabs-marker-w",t.offsetWidth),e.style.setProperty("--mw-tabs-marker-y",t.offsetTop+"px"),e.style.setProperty("--mw-tabs-marker-h",t.offsetHeight),e.setAttribute("data-mw-tabs-marker","")):e.removeAttribute("data-mw-tabs-marker")}function m(e){const t=e.getAttribute("data-tab");return t?document.getElementById(t):null}function w(e){const n=t(e);e.setAttribute("aria-selected",String(n)),e.tabIndex=n?0:-1}function f(t,n){t.forEach(t=>{const a=t===n;e(t,a),e(m(t),a),w(t)});const a=n.closest(".mw-tabs-nav");a&&u(a)}function h(){const e=window.location.hostname;return"localhost"===e||"127.0.0.1"===e||e.includes("192.168.")}function g(e){e&&("DIALOG"===e.tagName?e.showModal():e.classList.add("mw-modal-open"))}["wheel","touchstart"].forEach(e=>{window.addEventListener(e,()=>d=null,{passive:!0})}),window.mwOpenModal=e=>g(document.getElementById(e)),window.mwCloseModal=e=>{var t;(t=document.getElementById(e))&&("DIALOG"===t.tagName?t.close():t.classList.remove("mw-modal-open"))},window.mwRefreshColorSwatches=l}();
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "maverick-wave",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.26.0",
|
|
4
4
|
"config": {
|
|
5
|
-
"version_short": "5.
|
|
5
|
+
"version_short": "5.26"
|
|
6
6
|
},
|
|
7
7
|
"description": "A lightweight, modern CSS framework for building responsive websites with elegance and speed.",
|
|
8
8
|
"main": "src/js/main.js",
|
package/src/js/main.js
CHANGED
|
@@ -16,34 +16,77 @@
|
|
|
16
16
|
);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
//
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
19
|
+
// Every element that gets listeners of its own is remembered here, so running
|
|
20
|
+
// init() again over markup that is already wired does nothing to it. A
|
|
21
|
+
// WeakSet and not an attribute: nothing to clean up, nothing in the DOM, and
|
|
22
|
+
// an element that is removed takes its entry with it.
|
|
23
|
+
const wired = new WeakSet();
|
|
24
|
+
|
|
25
|
+
function fresh(el) {
|
|
26
|
+
if (!el || wired.has(el)) return false;
|
|
27
|
+
wired.add(el);
|
|
28
|
+
return true;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Bound to the document, the window, or the one element of its kind a page
|
|
32
|
+
// has. Running any of this twice would double the listeners, so it happens
|
|
33
|
+
// once and is not part of init().
|
|
34
|
+
let pageWired = false;
|
|
35
|
+
|
|
36
|
+
function initPage() {
|
|
37
|
+
if (pageWired) return;
|
|
38
|
+
pageWired = true;
|
|
39
|
+
|
|
23
40
|
initThemeToggle();
|
|
24
41
|
initColorSwatches();
|
|
25
|
-
initAccordions();
|
|
26
42
|
initMobileNav();
|
|
27
|
-
initProgressBars();
|
|
28
|
-
initReveals();
|
|
29
43
|
initHeaderReveal();
|
|
30
44
|
initParallax();
|
|
31
45
|
initSmoothScrolling();
|
|
32
46
|
initScrollSpy();
|
|
33
|
-
initTabs();
|
|
34
|
-
initAlerts();
|
|
35
|
-
initLocalhostIndicator();
|
|
36
|
-
warnMissingViewportFit();
|
|
37
|
-
initFormSliders();
|
|
38
47
|
initModals();
|
|
39
|
-
initImageSliders();
|
|
40
|
-
initCheckboxLists();
|
|
41
|
-
initKanbanBoards();
|
|
42
|
-
initCalendars();
|
|
43
48
|
initDropdowns();
|
|
44
|
-
|
|
49
|
+
initTagRemovals();
|
|
50
|
+
initCopyButtons();
|
|
51
|
+
initLocalhostIndicator();
|
|
52
|
+
warnMissingViewportFit();
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
// Everything that binds per element - and therefore can meet markup that
|
|
56
|
+
// arrived after the page did.
|
|
57
|
+
function initComponents(root) {
|
|
58
|
+
const scope = root || document;
|
|
59
|
+
|
|
60
|
+
initGalleries(scope);
|
|
61
|
+
initAccordions(scope);
|
|
62
|
+
initProgressBars(scope);
|
|
63
|
+
initReveals(scope);
|
|
64
|
+
initTabs(scope);
|
|
65
|
+
initAlerts(scope);
|
|
66
|
+
initFormSliders(scope);
|
|
67
|
+
initImageSliders(scope);
|
|
68
|
+
initCheckboxLists(scope);
|
|
69
|
+
initKanbanBoards(scope);
|
|
70
|
+
initCalendars(scope);
|
|
71
|
+
initLangSwitches(scope);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
document.addEventListener('DOMContentLoaded', function () {
|
|
75
|
+
initPage();
|
|
76
|
+
initComponents(document);
|
|
45
77
|
});
|
|
46
78
|
|
|
79
|
+
// The way back in for anything that renders after DOMContentLoaded: an htmx
|
|
80
|
+
// swap, a modal filled from a fetch, a view transition that replaces the
|
|
81
|
+
// page body. Call it with the subtree that changed, or with nothing for the
|
|
82
|
+
// whole document - elements already wired are skipped either way.
|
|
83
|
+
window.MaverickWave = {
|
|
84
|
+
init: function (root) {
|
|
85
|
+
initPage();
|
|
86
|
+
initComponents(root);
|
|
87
|
+
},
|
|
88
|
+
};
|
|
89
|
+
|
|
47
90
|
// The menu is a <details>, so only two things are left: close on an outside
|
|
48
91
|
// click and close on Escape. Delegated, so a menu added later works too.
|
|
49
92
|
function initDropdowns() {
|
|
@@ -86,8 +129,9 @@
|
|
|
86
129
|
// Keeps the trigger in step with the choice and announces it - which language
|
|
87
130
|
// actually loads is the application's business, usually the URL or the server:
|
|
88
131
|
// document.addEventListener('mw-language-change', (e) => e.detail.lang)
|
|
89
|
-
function initLangSwitches() {
|
|
90
|
-
|
|
132
|
+
function initLangSwitches(root) {
|
|
133
|
+
root.querySelectorAll('.mw-lang-switch').forEach((languageSwitch) => {
|
|
134
|
+
if (!fresh(languageSwitch)) return;
|
|
91
135
|
const items = languageSwitch.querySelectorAll('[data-mw-lang]');
|
|
92
136
|
const summary = languageSwitch.querySelector('summary');
|
|
93
137
|
const triggerFlag = languageSwitch.querySelector('summary .mw-flag');
|
|
@@ -128,12 +172,13 @@
|
|
|
128
172
|
}
|
|
129
173
|
|
|
130
174
|
// ===== Checkbox Lists =====
|
|
131
|
-
function initCheckboxLists() {
|
|
132
|
-
const checkboxLists =
|
|
175
|
+
function initCheckboxLists(root) {
|
|
176
|
+
const checkboxLists = root.querySelectorAll(
|
|
133
177
|
'.mw-item-list-checkbox, .mw-item-list-checkbox-scroll'
|
|
134
178
|
);
|
|
135
179
|
|
|
136
180
|
checkboxLists.forEach((list) => {
|
|
181
|
+
if (!fresh(list)) return;
|
|
137
182
|
const listItems = list.querySelectorAll('li');
|
|
138
183
|
|
|
139
184
|
listItems.forEach((item) => {
|
|
@@ -155,7 +200,7 @@
|
|
|
155
200
|
) {
|
|
156
201
|
return;
|
|
157
202
|
}
|
|
158
|
-
|
|
203
|
+
toggleCheckboxRow(this);
|
|
159
204
|
});
|
|
160
205
|
|
|
161
206
|
// Add change handler to the checkbox itself
|
|
@@ -190,15 +235,13 @@
|
|
|
190
235
|
});
|
|
191
236
|
});
|
|
192
237
|
});
|
|
193
|
-
|
|
194
|
-
// Listen for custom events (optional - for debugging or external handling)
|
|
195
|
-
document.addEventListener('checkboxToggle', function (event) {
|
|
196
|
-
console.log('Checkbox toggled:', event.detail.checked, event.detail.item);
|
|
197
|
-
});
|
|
198
238
|
}
|
|
199
239
|
|
|
200
|
-
//
|
|
201
|
-
|
|
240
|
+
// Public helper for toggling a checkbox row from application code. Prefixed
|
|
241
|
+
// like the three below it - an unprefixed global is one collision away from
|
|
242
|
+
// somebody else's toggleCheckbox. The list itself calls the local function,
|
|
243
|
+
// so the behaviour does not depend on what the global is called.
|
|
244
|
+
function toggleCheckboxRow(listItem) {
|
|
202
245
|
const checkbox = listItem.querySelector('input[type="checkbox"]');
|
|
203
246
|
if (!checkbox) return;
|
|
204
247
|
|
|
@@ -220,11 +263,47 @@
|
|
|
220
263
|
detail: { checked: checkbox.checked, item: listItem },
|
|
221
264
|
})
|
|
222
265
|
);
|
|
223
|
-
}
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
window.mwToggleCheckbox = toggleCheckboxRow;
|
|
269
|
+
|
|
270
|
+
// A removable tag removes itself. Delegated, so the showcase needs no inline
|
|
271
|
+
// onclick for it and a page with a Content-Security-Policy can use it.
|
|
272
|
+
function initTagRemovals() {
|
|
273
|
+
document.addEventListener('click', (event) => {
|
|
274
|
+
const button = event.target.closest('.mw-tags-remove');
|
|
275
|
+
if (!button) return;
|
|
276
|
+
|
|
277
|
+
const item = button.closest('.mw-tags-item');
|
|
278
|
+
if (item) item.remove();
|
|
279
|
+
});
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
// data-mw-copy="text to copy" on a button puts that text on the clipboard.
|
|
283
|
+
// Empty value means: take it from the input the button sits next to, which
|
|
284
|
+
// is what an input group with a copy button is.
|
|
285
|
+
function initCopyButtons() {
|
|
286
|
+
document.addEventListener('click', (event) => {
|
|
287
|
+
const button = event.target.closest('[data-mw-copy]');
|
|
288
|
+
if (!button || !navigator.clipboard) return;
|
|
289
|
+
|
|
290
|
+
const own = button.getAttribute('data-mw-copy');
|
|
291
|
+
const field = button.closest('.mw-input-group')?.querySelector('input');
|
|
292
|
+
const text = own || field?.value;
|
|
293
|
+
if (!text) return;
|
|
294
|
+
|
|
295
|
+
navigator.clipboard.writeText(text).then(() => {
|
|
296
|
+
button.dispatchEvent(
|
|
297
|
+
new CustomEvent('mwCopied', { bubbles: true, detail: { text } })
|
|
298
|
+
);
|
|
299
|
+
});
|
|
300
|
+
});
|
|
301
|
+
}
|
|
224
302
|
|
|
225
303
|
// ===== Gallery Component =====
|
|
226
|
-
function initGalleries() {
|
|
227
|
-
|
|
304
|
+
function initGalleries(root) {
|
|
305
|
+
root.querySelectorAll('.mw-gallery').forEach((gallery) => {
|
|
306
|
+
if (!fresh(gallery)) return;
|
|
228
307
|
// Dots and caption sit next to .mw-gallery, not inside it, so the
|
|
229
308
|
// container is the scope - with the parent as a fallback, otherwise a
|
|
230
309
|
// markup without the wrapper would silently stay dead
|
|
@@ -332,7 +411,6 @@
|
|
|
332
411
|
const themeToggle = document.querySelector('.mw-theme-toggle');
|
|
333
412
|
if (!themeToggle) return;
|
|
334
413
|
|
|
335
|
-
const body = document.body;
|
|
336
414
|
const root = document.documentElement;
|
|
337
415
|
const icon = themeToggle.querySelector('.mw-theme-toggle-slider i');
|
|
338
416
|
|
|
@@ -359,8 +437,8 @@
|
|
|
359
437
|
// Clean up potentially conflicting localStorage
|
|
360
438
|
localStorage.removeItem('mw-theme');
|
|
361
439
|
|
|
362
|
-
// Ensure
|
|
363
|
-
|
|
440
|
+
// Ensure the theme classes are gone for fixed mode
|
|
441
|
+
root.classList.remove('mw-theme-light', 'mw-theme-dark');
|
|
364
442
|
|
|
365
443
|
return;
|
|
366
444
|
}
|
|
@@ -382,10 +460,13 @@
|
|
|
382
460
|
const applyTheme = (lightMode) => {
|
|
383
461
|
// The forced reflow is the point: the new colours land while transitions are off
|
|
384
462
|
root.classList.add('mw-theme-switching');
|
|
385
|
-
body
|
|
463
|
+
// On <html> and not on <body>: a script in the <head> runs before the
|
|
464
|
+
// body exists, and that script is the only way to apply a stored choice
|
|
465
|
+
// before the first paint instead of flashing the other theme first.
|
|
466
|
+
root.classList.toggle('mw-theme-light', lightMode);
|
|
386
467
|
// The explicit counterpart, for dark on a machine set to light - without it
|
|
387
468
|
// the page would follow the OS straight back past the reader's choice
|
|
388
|
-
|
|
469
|
+
root.classList.toggle('mw-theme-dark', !lightMode);
|
|
389
470
|
void root.offsetHeight;
|
|
390
471
|
root.classList.remove('mw-theme-switching');
|
|
391
472
|
|
|
@@ -474,9 +555,10 @@
|
|
|
474
555
|
}
|
|
475
556
|
|
|
476
557
|
// ===== Accordions =====
|
|
477
|
-
function initAccordions() {
|
|
478
|
-
const accordionHeaders =
|
|
558
|
+
function initAccordions(root) {
|
|
559
|
+
const accordionHeaders = root.querySelectorAll('.mw-accordion-header');
|
|
479
560
|
accordionHeaders.forEach((header) => {
|
|
561
|
+
if (!fresh(header)) return;
|
|
480
562
|
// A header written as a <button> announces whether its panel is open.
|
|
481
563
|
// Only when the markup says so - setting it on a <div> without a role
|
|
482
564
|
// would claim a state for something that is not a control.
|
|
@@ -546,8 +628,10 @@
|
|
|
546
628
|
|
|
547
629
|
// The fill is driven from CSS where the browser can do it (_progress.scss), so
|
|
548
630
|
// this only hands the target width over and switches the animation on
|
|
549
|
-
function initProgressBars() {
|
|
550
|
-
const fills =
|
|
631
|
+
function initProgressBars(root) {
|
|
632
|
+
const fills = Array.from(root.querySelectorAll('.mw-progress-fill')).filter(
|
|
633
|
+
fresh
|
|
634
|
+
);
|
|
551
635
|
if (!fills.length) return;
|
|
552
636
|
|
|
553
637
|
const scrollDriven = CSS.supports('animation-timeline', 'view()');
|
|
@@ -590,13 +674,13 @@
|
|
|
590
674
|
// (_reveal.scss). Older Safari and Firefox have none, so there an observer
|
|
591
675
|
// stands in: hide what is still below the fold, run the same keyframes when
|
|
592
676
|
// it arrives.
|
|
593
|
-
function initReveals() {
|
|
677
|
+
function initReveals(root) {
|
|
594
678
|
if (CSS.supports('animation-timeline', 'view()')) return;
|
|
595
679
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
|
596
680
|
|
|
597
|
-
const targets =
|
|
598
|
-
'.mw-reveal, .mw-reveal-stagger > *'
|
|
599
|
-
);
|
|
681
|
+
const targets = Array.from(
|
|
682
|
+
root.querySelectorAll('.mw-reveal, .mw-reveal-stagger > *')
|
|
683
|
+
).filter(fresh);
|
|
600
684
|
if (!targets.length) return;
|
|
601
685
|
|
|
602
686
|
// The wave the grid draws in CSS, rebuilt from the column count the browser
|
|
@@ -908,8 +992,9 @@
|
|
|
908
992
|
|
|
909
993
|
// Set here and not in the markup, so a page that already ships .mw-tabs gets the
|
|
910
994
|
// tablist semantics by loading the script
|
|
911
|
-
function initTabs() {
|
|
912
|
-
|
|
995
|
+
function initTabs(root) {
|
|
996
|
+
root.querySelectorAll('.mw-tabs-nav').forEach((nav) => {
|
|
997
|
+
if (!fresh(nav)) return;
|
|
913
998
|
const items = Array.from(nav.querySelectorAll('.mw-tabs-nav-item'));
|
|
914
999
|
if (!items.length) return;
|
|
915
1000
|
|
|
@@ -988,10 +1073,11 @@
|
|
|
988
1073
|
}
|
|
989
1074
|
|
|
990
1075
|
// ===== Alerts =====
|
|
991
|
-
function initAlerts() {
|
|
992
|
-
const alertCloseButtons =
|
|
1076
|
+
function initAlerts(root) {
|
|
1077
|
+
const alertCloseButtons = root.querySelectorAll('.mw-alert-close');
|
|
993
1078
|
|
|
994
1079
|
alertCloseButtons.forEach((button) => {
|
|
1080
|
+
if (!fresh(button)) return;
|
|
995
1081
|
button.addEventListener('click', function () {
|
|
996
1082
|
const alert = this.closest('.mw-alert');
|
|
997
1083
|
if (!alert) return;
|
|
@@ -1053,8 +1139,9 @@
|
|
|
1053
1139
|
}
|
|
1054
1140
|
|
|
1055
1141
|
// ===== Form Sliders =====
|
|
1056
|
-
function initFormSliders() {
|
|
1057
|
-
|
|
1142
|
+
function initFormSliders(root) {
|
|
1143
|
+
root.querySelectorAll('.mw-slider-container').forEach((wrapper) => {
|
|
1144
|
+
if (!fresh(wrapper)) return;
|
|
1058
1145
|
const slider = wrapper.querySelector('.mw-slider');
|
|
1059
1146
|
const badge = wrapper.querySelector('.mw-slider-value');
|
|
1060
1147
|
if (!slider || !badge) return;
|
|
@@ -1151,10 +1238,11 @@
|
|
|
1151
1238
|
window.mwRefreshColorSwatches = updateColorSwatchHexValues;
|
|
1152
1239
|
|
|
1153
1240
|
// ===== Image Sliders =====
|
|
1154
|
-
function initImageSliders() {
|
|
1155
|
-
const sliders =
|
|
1241
|
+
function initImageSliders(root) {
|
|
1242
|
+
const sliders = root.querySelectorAll('.mw-image-slider');
|
|
1156
1243
|
|
|
1157
1244
|
sliders.forEach((slider) => {
|
|
1245
|
+
if (!fresh(slider)) return;
|
|
1158
1246
|
const overlayImages = slider.querySelectorAll(
|
|
1159
1247
|
'.mw-image-slider-overlay-image'
|
|
1160
1248
|
);
|
|
@@ -1191,8 +1279,10 @@
|
|
|
1191
1279
|
}
|
|
1192
1280
|
|
|
1193
1281
|
// ===== Kanban Boards =====
|
|
1194
|
-
function initKanbanBoards() {
|
|
1195
|
-
|
|
1282
|
+
function initKanbanBoards(root) {
|
|
1283
|
+
root.querySelectorAll('.mw-kanban').forEach((board) => {
|
|
1284
|
+
if (fresh(board)) initKanbanBoard(board);
|
|
1285
|
+
});
|
|
1196
1286
|
}
|
|
1197
1287
|
|
|
1198
1288
|
function initKanbanBoard(board) {
|
|
@@ -1418,8 +1508,10 @@
|
|
|
1418
1508
|
refresh();
|
|
1419
1509
|
}
|
|
1420
1510
|
// ===== Calendars =====
|
|
1421
|
-
function initCalendars() {
|
|
1422
|
-
|
|
1511
|
+
function initCalendars(root) {
|
|
1512
|
+
root.querySelectorAll('[data-calendar]').forEach((calendar) => {
|
|
1513
|
+
if (fresh(calendar)) initCalendar(calendar);
|
|
1514
|
+
});
|
|
1423
1515
|
}
|
|
1424
1516
|
|
|
1425
1517
|
// Status dots come in as {"2026-08-19": ["success", "warning"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Accordions</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
Only as much content open as anyone needs at once. The header is the control
|
|
4
4
|
and the panel follows it in the DOM, which is what lets the whole thing run
|
|
5
5
|
off two state classes and no wrapper element.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Alerts System</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
A message that belongs to the page it sits on. The colour carries the severity
|
|
4
4
|
and the left rule repeats it, so the meaning survives where the tint does not.
|
|
5
5
|
The same markup inside a <code>mw-toast-stack</code> becomes a toast.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Announcement</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
The ribbon glued under the fixed header - a discount, a launch note, a
|
|
4
4
|
maintenance window. Shown here with <code>mw-announcement-static</code>, so
|
|
5
5
|
the demos sit in the flow instead of over this page. Without it the ribbon
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Avatars</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
A picture or a pair of initials, in five sizes. The colour variants sit on the
|
|
4
4
|
border, so they still read over a photo; on an initials avatar they fill the
|
|
5
5
|
circle as well. Inside a group the overlap follows the avatar size.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Badges</h3>
|
|
2
2
|
|
|
3
|
-
<p class="mw-text-muted mw-
|
|
3
|
+
<p class="mw-text-muted mw-text-measure">
|
|
4
4
|
A badge is not a tag. A tag names something and sits in a row of its own kind;
|
|
5
5
|
a badge carries a count or a status and usually sits <em>on</em> something -
|
|
6
6
|
the number on a bell, the dot on an avatar. That is why it fills its colour
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Blog Posts</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
A long-form article rather than a card: title, meta line, body and the way
|
|
4
4
|
back out. The gradient rule down the left edge is what makes it read as a page
|
|
5
5
|
instead of a panel.
|
|
6
6
|
</p>
|
|
7
7
|
|
|
8
|
-
<div class="mw-blog-post
|
|
8
|
+
<div class="mw-blog-post">
|
|
9
9
|
<h2 class="mw-blog-post-title">
|
|
10
10
|
Just a dummy blog post (markdown generated)
|
|
11
11
|
</h2>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Button Bars</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
A framed row of actions. Below 576px it stacks and every button takes the full
|
|
4
4
|
width. The colour variants style whatever is inside them, so a bar of five
|
|
5
5
|
buttons needs one class rather than five.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Buttons</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
Three emphasis levels: primary fills, outline draws a line, ghost does neither
|
|
4
4
|
until you point at it. Every variant dips a pixel when pressed - on touch that
|
|
5
5
|
press is the only feedback there is.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Calendar</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
Month, compact and week share every class - a week is seven cells instead of
|
|
4
4
|
forty-two, <code>mw-calendar-compact</code> drops the dots and a third of the
|
|
5
5
|
height. The status dots come in as
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Cards</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
The framework's main container: a surface, padding, an optional image, a
|
|
4
4
|
header and a footer. The add-ons - badge, ribbon, title icon - all take their
|
|
5
5
|
colour from one <code>mw-card-addon-*</code> class on the card itself.
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Code</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
Inline code gets a surface of its own so it reads as a quoted thing; blocks
|
|
4
4
|
get a filename bar and a terminal variant. The syntax colours are a fixed pair
|
|
5
5
|
of themes rather than brand tokens - code is easier to read in the colours an
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
<!-- the hex code string is getting updated via javascript! -->
|
|
4
4
|
|
|
5
|
-
<p class="mw-text-muted mw-text-measure
|
|
5
|
+
<p class="mw-text-muted mw-text-measure">
|
|
6
6
|
These thirteen are the only colors you ever set. Everything else - hover
|
|
7
7
|
tones, translucent backgrounds, borders, muted text, the card and footer
|
|
8
8
|
surfaces, the ink variant the dark theme needs - is derived from them at
|
|
@@ -152,7 +152,7 @@
|
|
|
152
152
|
|
|
153
153
|
<h3 class="mw-section-subtitle">Fill or Ink</h3>
|
|
154
154
|
|
|
155
|
-
<p class="mw-text-muted
|
|
155
|
+
<p class="mw-text-muted">
|
|
156
156
|
Every brand and status colour comes in two tokens.
|
|
157
157
|
<code>--mw-primary-color</code> is the exact colour, for anything it
|
|
158
158
|
<strong>fills</strong> - buttons, badges, bars - with
|
|
@@ -193,7 +193,7 @@
|
|
|
193
193
|
|
|
194
194
|
<h3 class="mw-section-subtitle">Label Ink Per Colour</h3>
|
|
195
195
|
|
|
196
|
-
<p class="mw-text-muted
|
|
196
|
+
<p class="mw-text-muted">
|
|
197
197
|
<code>--mw-accent-text-color</code> is the label on every solid coloured
|
|
198
198
|
surface, and one value for all six only holds while the whole palette sits on
|
|
199
199
|
the same side of the lightness scale. A neon green primary next to a deep blue
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<h3 class="mw-section-subtitle">Coming Soon Banner</h3>
|
|
2
|
-
<p class="mw-text-muted mw-text-measure
|
|
2
|
+
<p class="mw-text-muted mw-text-measure">
|
|
3
3
|
A placeholder for a section that is not built yet. Loud on purpose: the whole
|
|
4
4
|
point is that nobody ships it by accident.
|
|
5
5
|
</p>
|