maverick-wave 5.7.0 → 5.10.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 +22 -12
- package/.claude/skills/mw-maverick-wave/examples/angular-services.md +10 -1
- package/.claude/skills/mw-maverick-wave/examples/static-landing-page.md +4 -3
- package/.claude/skills/mw-maverick-wave/references/components.md +23 -9
- package/.claude/skills/mw-maverick-wave/references/javascript.md +1 -1
- package/.claude/skills/mw-maverick-wave/references/layout.md +8 -3
- package/.claude/skills/mw-maverick-wave/references/theming.md +57 -29
- package/CHANGELOG.md +19 -0
- package/README.md +43 -22
- package/index.html +395 -62
- package/maverick-wave.min.css +61 -5
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/scripts/verify.js +18 -2
- package/src/js/main.js +24 -5
- package/src/partials/header-container.html +7 -5
- package/src/partials/palette-container.html +176 -66
- package/src/partials/preview-container.html +136 -0
- package/src/partials/utilities-container.html +55 -4
- package/src/scss/abstracts/_functions.scss +31 -3
- package/src/scss/abstracts/_mixins.scss +62 -12
- package/src/scss/abstracts/_variables.scss +47 -21
- package/src/scss/base/_base.scss +101 -8
- package/src/scss/base/_reset.scss +2 -0
- package/src/scss/components/_badge.scss +1 -1
- package/src/scss/components/_buttons.scss +1 -1
- package/src/scss/components/_cards.scss +23 -14
- package/src/scss/components/_dropdown.scss +58 -1
- package/src/scss/components/_kanban.scss +10 -9
- package/src/scss/components/_lang-switch.scss +1 -1
- package/src/scss/components/_localhost-indicator.scss +1 -1
- package/src/scss/components/_modals.scss +13 -1
- package/src/scss/components/_pricing.scss +1 -1
- package/src/scss/components/_progress.scss +9 -5
- package/src/scss/components/_skeleton.scss +1 -1
- package/src/scss/components/_spinners.scss +5 -5
- package/src/scss/components/_stepper.scss +4 -1
- package/src/scss/components/_tabs.scss +28 -8
- package/src/scss/components/_tiles.scss +41 -16
- package/src/scss/components/_timelines.scss +12 -5
- package/src/scss/layout/_main.scss +1 -1
- package/src/scss/layout/_parallax.scss +10 -5
- package/src/scss/utilities/_elevation.scss +23 -0
- package/src/scss/utilities/_touch-targets.scss +1 -1
- package/src/scss/utilities/_variants.scss +115 -6
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 o="#"+t(a[1])+t(a[2])+t(a[3]),r=void 0===a[4]?1:parseFloat(a[4]);return(r<1?`${o} / ${r}`:o).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,o=e.querySelector(".mw-gallery-dots"),r=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}%)`,o&&o.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===l)}),r&&(r.textContent=a[l].dataset.desc||"")}if(o)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)),o.appendChild(t)}c&&c.addEventListener("click",()=>i(l-1)),s&&s.addEventListener("click",()=>i(l+1));let d=0;n.addEventListener("touchstart",e=>d=e.touches[0].clientX),n.addEventListener("touchend",e=>{const t=e.changedTouches[0].clientX-d;t>50&&i(l-1),t<-50&&i(l+1)}),i(0)}(t,e)}),function(){const t=document.querySelector(".mw-theme-toggle");if(!t)return;const a=document.body,o=document.documentElement,r=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.`),r&&(r.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("dark"===c&&a.classList.remove("mw-theme-light"));let s="light"===localStorage.getItem("mw-theme");const l=n=>{o.classList.add("mw-theme-switching"),a.classList.toggle("mw-theme-light",n),o.offsetHeight,o.classList.remove("mw-theme-switching"),e(t,n),r&&(r.className=n?"fas fa-sun":"fas fa-moon")};l(s),t.addEventListener("click",()=>{s=!s,l(s),localStorage.setItem("mw-theme",s?"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),n&&e.setAttribute("aria-expanded",String(a))}function o(e){e.preventDefault(),e.stopPropagation(),a(!t.classList.contains("open"))}e.addEventListener("click",o),e.addEventListener("touchstart",o,{passive:!1}),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 o=n(e);o&&(e.style.setProperty("--mw-progress-value",o),t?e.classList.add("mw-progress-driven"):a.push(e))}),t)return;const o=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=>o.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 o=()=>{const o=window.scrollY<n;o!==a&&(a=o,e.classList.toggle("mw-header-away",o),t&&t.classList.toggle("mw-announcement-away",o))};o(),requestAnimationFrame(()=>{e.classList.add("mw-header-driven"),t&&t.classList.add("mw-announcement-driven")}),window.addEventListener("scroll",o,{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 o=!1;const r=()=>{o=!1;const e=window.innerHeight,n=t.map(t=>a(t,e));t.forEach((e,t)=>e.el.style.setProperty("--mw-parallax-progress",n[t]))},c=()=>{o||(o=!0,requestAnimationFrame(r))};r(),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={};o=r;let c=null;function s(e){if(o!==r)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):o=null}requestAnimationFrame(s)}document.querySelectorAll('a[href^="#"]').forEach(n=>{n.addEventListener("click",function(n){const o=this.getAttribute("href");if("#"===o)return;const r=document.querySelector(o);if(!r)return;const c=document.querySelector(".mw-menu-btn"),s=document.querySelector(".mw-navbar");c&&s&&(c.classList.remove("open"),s.classList.remove("open")),n.preventDefault();const l=Math.max(0,e(r)-a());r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"),r.focus({preventScroll:!0}),window.matchMedia("(prefers-reduced-motion: reduce)").matches?window.scrollTo({top:l,behavior:"instant"}):t(l),history.replaceState(null,"",o)})})}(),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,o=arguments;clearTimeout(n),n=setTimeout(()=>e.apply(a,o),t)}}(function(){let o="";const r=a()+2;t.forEach(e=>{const t=e.offsetTop-r,n=e.clientHeight;scrollY>=t&&scrollY<t+n&&(o=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)===o&&e(t,!0)}}})},100))}(),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 o=c(e);e.setAttribute("role","tab"),e.id||(e.id=(o?o.id:"mw-tab-"+a)+"-tab"),o&&(e.setAttribute("aria-controls",o.id),o.setAttribute("role","tabpanel"),o.setAttribute("aria-labelledby",e.id)),s(e),e.addEventListener("click",()=>l(t,e)),e.addEventListener("keydown",e=>{const o=function(e,t,n,a){const o=t?"ArrowUp":"ArrowLeft",r=t?"ArrowDown":"ArrowRight";return e.key===o?(a-1+n)%n:e.key===r?(a+1)%n:"Home"===e.key?0:"End"===e.key?n-1:null}(e,n,t.length,a);null!==o&&(e.preventDefault(),l(t,t[o]),t[o].focus())})}),r(e);const a=new ResizeObserver(()=>r(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){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,o=Math.round(e/a*100);t.style.setProperty("--value",o+"%"),n.classList.contains("mw-slider-numeric")?n.setAttribute("data-value",e):n.setAttribute("data-value",o)};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?i(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(){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 o=0;function r(){n.forEach(t=>{e(t,parseInt(t.dataset.index)===o)}),a.forEach(t=>{e(t,parseInt(t.dataset.index)===o)})}function c(e){o=e,r()}a.forEach(e=>{e.addEventListener("click",()=>{c(parseInt(e.dataset.index))})}),r()}),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(d),document.querySelectorAll("[data-calendar]").forEach(u),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"),o=t.querySelector("summary .mw-flag"),r=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")}),r&&(r.textContent=s);const d=c.querySelector(".mw-flag");o&&d&&(o.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 o=null;function r(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&&r(a)}function i(e){e&&("DIALOG"===e.tagName?e.showModal():e.classList.add("mw-modal-open"))}function d(e){const t=Array.from(e.querySelectorAll(".mw-kanban-column")),n=e.querySelector(".mw-kanban-composer"),a=e.querySelector(".mw-kanban-card-template"),o=e.dataset.kanbanPrefix||"MW",r=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"),o=e.querySelector(".mw-kanban-count");o&&(o.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,r.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"),r.focus()}function w(){n.classList.remove("mw-active"),i&&i.classList.remove("mw-kanban-editing"),i=null}function f(){const t=r.value.trim();if(!t)return void r.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 o=a||document.createElement("div");o.className="mw-avatar mw-avatar-xs mw-avatar-initials",o.textContent=t,a||n.prepend(o)}(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 o+"-"+(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"),o=t[t.indexOf(a)+n];o&&(o.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 o=e.target.closest(".mw-kanban-delete");if(o){const e=o.closest(".mw-kanban-card");return e===i&&w(),e.remove(),void d()}const r=e.target.closest(".mw-kanban-add");r?m(r.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 u(e){const t=e.querySelector(".mw-calendar-grid"),n=e.querySelector(".mw-calendar-title");if(!t)return;const a="week"===e.dataset.calendar,o=function(e){if(!e)return{};try{return JSON.parse(e)}catch(e){return{}}}(e.dataset.calendarMarkers),r=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(r,{month:"long",year:"numeric"});const e=i(s),t=new Date(e);t.setDate(t.getDate()+6);const n=e.toLocaleDateString(r,{day:"numeric",month:e.getMonth()===t.getMonth()?void 0:"short"}),o=t.toLocaleDateString(r,{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+" - "+o}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(r,{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(o[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(),o=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(r,{weekday:"short"}),t.appendChild(n),e.setDate(e.getDate()+1)}}();for(let n=0;n<o;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 o=n.target.closest("[data-calendar-nav]");if(o)return r=parseInt(o.dataset.calendarNav,10),a?s.setDate(s.getDate()+7*r):s=new Date(s.getFullYear(),s.getMonth()+r,1),void f();var r;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 o=new Date(a.dataset.calendarDay+"T00:00:00");o.setDate(o.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())}(o)}),f()}["wheel","touchstart"].forEach(e=>{window.addEventListener(e,()=>o=null,{passive:!0})}),window.mwOpenModal=e=>i(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"))}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 o="#"+t(a[1])+t(a[2])+t(a[3]),r=void 0===a[4]?1:parseFloat(a[4]);return(r<1?`${o} / ${r}`:o).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,o=e.querySelector(".mw-gallery-dots"),r=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}%)`,o&&o.querySelectorAll(".mw-gallery-dot").forEach((e,t)=>{e.classList.toggle("mw-active",t===l)}),r&&(r.textContent=a[l].dataset.desc||"")}if(o)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)),o.appendChild(t)}c&&c.addEventListener("click",()=>i(l-1)),s&&s.addEventListener("click",()=>i(l+1));let d=0;n.addEventListener("touchstart",e=>d=e.touches[0].clientX),n.addEventListener("touchend",e=>{const t=e.changedTouches[0].clientX-d;t>50&&i(l-1),t<-50&&i(l+1)}),i(0)}(t,e)}),function(){const t=document.querySelector(".mw-theme-toggle");if(!t)return;const a=document.body,o=document.documentElement,r=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.`),r&&(r.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=>{o.classList.add("mw-theme-switching"),a.classList.toggle("mw-theme-light",n),a.classList.toggle("mw-theme-dark",!n),o.offsetHeight,o.classList.remove("mw-theme-switching"),e(t,n),r&&(r.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),n&&e.setAttribute("aria-expanded",String(a))}function o(e){e.preventDefault(),e.stopPropagation(),a(!t.classList.contains("open"))}e.addEventListener("click",o),e.addEventListener("touchstart",o,{passive:!1}),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 o=n(e);o&&(e.style.setProperty("--mw-progress-value",o),t?e.classList.add("mw-progress-driven"):a.push(e))}),t)return;const o=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=>o.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 o=()=>{const o=window.scrollY<n;o!==a&&(a=o,e.classList.toggle("mw-header-away",o),t&&t.classList.toggle("mw-announcement-away",o))};o(),requestAnimationFrame(()=>{e.classList.add("mw-header-driven"),t&&t.classList.add("mw-announcement-driven")}),window.addEventListener("scroll",o,{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 o=!1;const r=()=>{o=!1;const e=window.innerHeight,n=t.map(t=>a(t,e));t.forEach((e,t)=>e.el.style.setProperty("--mw-parallax-progress",n[t]))},c=()=>{o||(o=!0,requestAnimationFrame(r))};r(),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={};o=r;let c=null;function s(e){if(o!==r)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):o=null}requestAnimationFrame(s)}document.querySelectorAll('a[href^="#"]').forEach(n=>{n.addEventListener("click",function(n){const o=this.getAttribute("href");if("#"===o)return;const r=document.querySelector(o);if(!r)return;const c=document.querySelector(".mw-menu-btn"),s=document.querySelector(".mw-navbar");c&&s&&(c.classList.remove("open"),s.classList.remove("open")),n.preventDefault();const l=Math.max(0,e(r)-a());r.hasAttribute("tabindex")||r.setAttribute("tabindex","-1"),r.focus({preventScroll:!0}),window.matchMedia("(prefers-reduced-motion: reduce)").matches?window.scrollTo({top:l,behavior:"instant"}):t(l),history.replaceState(null,"",o)})})}(),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,o=arguments;clearTimeout(n),n=setTimeout(()=>e.apply(a,o),t)}}(function(){let o="";const r=a()+2;t.forEach(e=>{const t=e.offsetTop-r,n=e.clientHeight;scrollY>=t&&scrollY<t+n&&(o=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)===o&&e(t,!0)}}})},100))}(),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 o=c(e);e.setAttribute("role","tab"),e.id||(e.id=(o?o.id:"mw-tab-"+a)+"-tab"),o&&(e.setAttribute("aria-controls",o.id),o.setAttribute("role","tabpanel"),o.setAttribute("aria-labelledby",e.id)),s(e),e.addEventListener("click",()=>l(t,e)),e.addEventListener("keydown",e=>{const o=function(e,t,n,a){const o=t?"ArrowUp":"ArrowLeft",r=t?"ArrowDown":"ArrowRight";return e.key===o?(a-1+n)%n:e.key===r?(a+1)%n:"Home"===e.key?0:"End"===e.key?n-1:null}(e,n,t.length,a);null!==o&&(e.preventDefault(),l(t,t[o]),t[o].focus())})}),r(e);const a=new ResizeObserver(()=>r(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){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,o=Math.round(e/a*100);t.style.setProperty("--value",o+"%"),n.classList.contains("mw-slider-numeric")?n.setAttribute("data-value",e):n.setAttribute("data-value",o)};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?i(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(){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 o=0;function r(){n.forEach(t=>{e(t,parseInt(t.dataset.index)===o)}),a.forEach(t=>{e(t,parseInt(t.dataset.index)===o)})}function c(e){o=e,r()}a.forEach(e=>{e.addEventListener("click",()=>{c(parseInt(e.dataset.index))})}),r()}),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(d),document.querySelectorAll("[data-calendar]").forEach(u),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"),o=t.querySelector("summary .mw-flag"),r=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")}),r&&(r.textContent=s);const d=c.querySelector(".mw-flag");o&&d&&(o.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 o=null;function r(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&&r(a)}function i(e){e&&("DIALOG"===e.tagName?e.showModal():e.classList.add("mw-modal-open"))}function d(e){const t=Array.from(e.querySelectorAll(".mw-kanban-column")),n=e.querySelector(".mw-kanban-composer"),a=e.querySelector(".mw-kanban-card-template"),o=e.dataset.kanbanPrefix||"MW",r=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"),o=e.querySelector(".mw-kanban-count");o&&(o.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,r.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"),r.focus()}function w(){n.classList.remove("mw-active"),i&&i.classList.remove("mw-kanban-editing"),i=null}function f(){const t=r.value.trim();if(!t)return void r.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 o=a||document.createElement("div");o.className="mw-avatar mw-avatar-xs mw-avatar-initials",o.textContent=t,a||n.prepend(o)}(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 o+"-"+(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"),o=t[t.indexOf(a)+n];o&&(o.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 o=e.target.closest(".mw-kanban-delete");if(o){const e=o.closest(".mw-kanban-card");return e===i&&w(),e.remove(),void d()}const r=e.target.closest(".mw-kanban-add");r?m(r.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 u(e){const t=e.querySelector(".mw-calendar-grid"),n=e.querySelector(".mw-calendar-title");if(!t)return;const a="week"===e.dataset.calendar,o=function(e){if(!e)return{};try{return JSON.parse(e)}catch(e){return{}}}(e.dataset.calendarMarkers),r=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(r,{month:"long",year:"numeric"});const e=i(s),t=new Date(e);t.setDate(t.getDate()+6);const n=e.toLocaleDateString(r,{day:"numeric",month:e.getMonth()===t.getMonth()?void 0:"short"}),o=t.toLocaleDateString(r,{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+" - "+o}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(r,{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(o[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(),o=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(r,{weekday:"short"}),t.appendChild(n),e.setDate(e.getDate()+1)}}();for(let n=0;n<o;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 o=n.target.closest("[data-calendar-nav]");if(o)return r=parseInt(o.dataset.calendarNav,10),a?s.setDate(s.getDate()+7*r):s=new Date(s.getFullYear(),s.getMonth()+r,1),void f();var r;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 o=new Date(a.dataset.calendarDay+"T00:00:00");o.setDate(o.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())}(o)}),f()}["wheel","touchstart"].forEach(e=>{window.addEventListener(e,()=>o=null,{passive:!0})}),window.mwOpenModal=e=>i(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}();
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "maverick-wave",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.10.0",
|
|
4
4
|
"config": {
|
|
5
|
-
"version_short": "5.
|
|
5
|
+
"version_short": "5.10"
|
|
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/scripts/verify.js
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* 1. every var(--mw-*) has a definition
|
|
7
7
|
* 2. every --mw-* definition is used somewhere
|
|
8
8
|
* 3. every mw-* class in the markup exists in the built CSS
|
|
9
|
-
* 4. the committed root release files
|
|
9
|
+
* 4. the committed root release files match a fresh build
|
|
10
10
|
* 5. the CDN version pinned in the docs matches package.json
|
|
11
11
|
* 6. no `animation:` shorthand in a file that uses a scroll timeline
|
|
12
12
|
*
|
|
@@ -70,7 +70,13 @@ const docs = DOCS.map(read).filter(Boolean).map(stripFrontmatter).join('\n');
|
|
|
70
70
|
|
|
71
71
|
// --- 1 + 2: custom properties ---------------------------------------------
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
// Two shapes count as a definition: a plain declaration, and an `@property`
|
|
74
|
+
// registration - that one carries its value in `initial-value`, so the name is
|
|
75
|
+
// followed by `{` and not by a colon.
|
|
76
|
+
const tokensDefined = new Set([
|
|
77
|
+
...all(css, /(--mw-[a-z0-9-]+)\s*:/g),
|
|
78
|
+
...all(css, /@property\s+(--mw-[a-z0-9-]+)/g),
|
|
79
|
+
]);
|
|
74
80
|
// `\s*` after the paren: a long declaration wrapped by Prettier keeps its
|
|
75
81
|
// newline inside var() all the way through the minifier, and a token used only
|
|
76
82
|
// there would otherwise read as unused.
|
|
@@ -135,6 +141,16 @@ for (const f of ['maverick-wave.min.css', 'maverick-wave.min.js']) {
|
|
|
135
141
|
errors.push(
|
|
136
142
|
`release file missing or empty: ${f} - run \`npm run prepack\` and commit it`
|
|
137
143
|
);
|
|
144
|
+
continue;
|
|
145
|
+
}
|
|
146
|
+
// `gulp release` runs the same sass/postcss/terser pipeline as the dist tasks
|
|
147
|
+
// and only writes elsewhere, so dist/ is what the committed file has to equal.
|
|
148
|
+
// Existing-and-not-empty was not enough: 5.7.0 shipped a root bundle four
|
|
149
|
+
// commits behind src/, and every CDN consumer got that one.
|
|
150
|
+
if (read(p) !== read(path.join(ROOT, 'dist', f))) {
|
|
151
|
+
errors.push(
|
|
152
|
+
`release file stale: ${f} differs from the fresh build in dist/ - run \`npm run prepack\` and commit it`
|
|
153
|
+
);
|
|
138
154
|
}
|
|
139
155
|
}
|
|
140
156
|
|
package/src/js/main.js
CHANGED
|
@@ -334,22 +334,33 @@
|
|
|
334
334
|
// Clean up potentially conflicting localStorage
|
|
335
335
|
localStorage.removeItem('mw-theme');
|
|
336
336
|
|
|
337
|
-
// Ensure body
|
|
338
|
-
|
|
339
|
-
body.classList.remove('mw-theme-light');
|
|
340
|
-
}
|
|
337
|
+
// Ensure body classes are correct for fixed mode
|
|
338
|
+
body.classList.remove('mw-theme-light', 'mw-theme-dark');
|
|
341
339
|
|
|
342
340
|
return;
|
|
343
341
|
}
|
|
344
342
|
|
|
345
343
|
// mode switchable - only runs if themeMode === 'switchable'
|
|
346
|
-
|
|
344
|
+
const systemLight = window.matchMedia('(prefers-color-scheme: light)');
|
|
345
|
+
|
|
346
|
+
// Only trust the OS where the stylesheet can act on it. Without light-dark()
|
|
347
|
+
// the theme tokens sit on :root as the dark set and the light one arrives by
|
|
348
|
+
// class alone, so a light machine would get a sun icon over a dark page.
|
|
349
|
+
const followsSystem =
|
|
350
|
+
window.CSS && CSS.supports('color', 'light-dark(#000, #fff)');
|
|
351
|
+
const preferred = () => followsSystem && systemLight.matches;
|
|
352
|
+
|
|
353
|
+
const stored = localStorage.getItem('mw-theme');
|
|
354
|
+
let isLight = stored ? stored === 'light' : preferred();
|
|
347
355
|
|
|
348
356
|
// Function to apply theme styles and icon
|
|
349
357
|
const applyTheme = (lightMode) => {
|
|
350
358
|
// The forced reflow is the point: the new colours land while transitions are off
|
|
351
359
|
root.classList.add('mw-theme-switching');
|
|
352
360
|
body.classList.toggle('mw-theme-light', lightMode);
|
|
361
|
+
// The explicit counterpart, for dark on a machine set to light - without it
|
|
362
|
+
// the page would follow the OS straight back past the reader's choice
|
|
363
|
+
body.classList.toggle('mw-theme-dark', !lightMode);
|
|
353
364
|
void root.offsetHeight;
|
|
354
365
|
root.classList.remove('mw-theme-switching');
|
|
355
366
|
|
|
@@ -362,6 +373,14 @@
|
|
|
362
373
|
// Set initial theme based on isLight
|
|
363
374
|
applyTheme(isLight);
|
|
364
375
|
|
|
376
|
+
// Until the reader picks a side, the page keeps tracking the OS switch
|
|
377
|
+
systemLight.addEventListener('change', () => {
|
|
378
|
+
if (localStorage.getItem('mw-theme')) return;
|
|
379
|
+
isLight = preferred();
|
|
380
|
+
applyTheme(isLight);
|
|
381
|
+
updateColorSwatchHexValues();
|
|
382
|
+
});
|
|
383
|
+
|
|
365
384
|
// Add click listener for switching
|
|
366
385
|
themeToggle.addEventListener('click', () => {
|
|
367
386
|
isLight = !isLight;
|
|
@@ -41,14 +41,16 @@
|
|
|
41
41
|
</div>
|
|
42
42
|
</button>
|
|
43
43
|
|
|
44
|
-
<!--
|
|
44
|
+
<!-- Palette Switcher, showcase only - the panel lives in palette-container -->
|
|
45
45
|
<button
|
|
46
46
|
type="button"
|
|
47
|
-
class="
|
|
48
|
-
id="
|
|
49
|
-
aria-
|
|
47
|
+
class="palette-toggle"
|
|
48
|
+
id="palette-toggle"
|
|
49
|
+
aria-expanded="false"
|
|
50
|
+
aria-controls="palette-panel"
|
|
51
|
+
aria-label="Try another palette"
|
|
50
52
|
>
|
|
51
|
-
<i class="fas fa-
|
|
53
|
+
<i class="fas fa-palette"></i>
|
|
52
54
|
</button>
|
|
53
55
|
|
|
54
56
|
<!-- Burger Menu Button -->
|
|
@@ -1,14 +1,3 @@
|
|
|
1
|
-
<button
|
|
2
|
-
type="button"
|
|
3
|
-
class="palette-fab"
|
|
4
|
-
id="palette-fab"
|
|
5
|
-
aria-expanded="false"
|
|
6
|
-
aria-controls="palette-panel"
|
|
7
|
-
aria-label="Try another palette"
|
|
8
|
-
>
|
|
9
|
-
<i class="fas fa-palette"></i>
|
|
10
|
-
</button>
|
|
11
|
-
|
|
12
1
|
<div class="palette-panel" id="palette-panel" hidden>
|
|
13
2
|
<h3 class="palette-heading">Palette</h3>
|
|
14
3
|
<p class="palette-hint">
|
|
@@ -25,7 +14,7 @@
|
|
|
25
14
|
data-dark="#171f30"
|
|
26
15
|
data-light="#e7e7f0"
|
|
27
16
|
>
|
|
28
|
-
|
|
17
|
+
MaverickWave
|
|
29
18
|
</button>
|
|
30
19
|
<button
|
|
31
20
|
type="button"
|
|
@@ -127,6 +116,46 @@
|
|
|
127
116
|
>
|
|
128
117
|
Wine
|
|
129
118
|
</button>
|
|
119
|
+
<button
|
|
120
|
+
type="button"
|
|
121
|
+
class="palette-item"
|
|
122
|
+
data-primary="#cc8a04"
|
|
123
|
+
data-secondary="#2b5f9e"
|
|
124
|
+
data-dark="#231c0f"
|
|
125
|
+
data-light="#f3ecdc"
|
|
126
|
+
>
|
|
127
|
+
Amber
|
|
128
|
+
</button>
|
|
129
|
+
<button
|
|
130
|
+
type="button"
|
|
131
|
+
class="palette-item"
|
|
132
|
+
data-primary="#6da31c"
|
|
133
|
+
data-secondary="#a3319b"
|
|
134
|
+
data-dark="#171e10"
|
|
135
|
+
data-light="#ecf1e1"
|
|
136
|
+
>
|
|
137
|
+
Lime
|
|
138
|
+
</button>
|
|
139
|
+
<button
|
|
140
|
+
type="button"
|
|
141
|
+
class="palette-item"
|
|
142
|
+
data-primary="#5e2c6e"
|
|
143
|
+
data-secondary="#c9853a"
|
|
144
|
+
data-dark="#1c1221"
|
|
145
|
+
data-light="#ece5f0"
|
|
146
|
+
>
|
|
147
|
+
Aubergine
|
|
148
|
+
</button>
|
|
149
|
+
<button
|
|
150
|
+
type="button"
|
|
151
|
+
class="palette-item"
|
|
152
|
+
data-primary="#b0543a"
|
|
153
|
+
data-secondary="#3d7160"
|
|
154
|
+
data-dark="#231613"
|
|
155
|
+
data-light="#f3e8e4"
|
|
156
|
+
>
|
|
157
|
+
Clay
|
|
158
|
+
</button>
|
|
130
159
|
</div>
|
|
131
160
|
|
|
132
161
|
<div class="palette-custom">
|
|
@@ -144,10 +173,16 @@
|
|
|
144
173
|
<p class="palette-hint">
|
|
145
174
|
Every switch is one class on <html> or one custom property - no build,
|
|
146
175
|
no rebuild. The box at the bottom is what a project would carry, and it
|
|
147
|
-
reads back: paste someone else's setup in to see it.
|
|
176
|
+
reads back: paste someone else's setup in to see it. The link does the same
|
|
177
|
+
- Copy link hands someone this page exactly as it stands.
|
|
148
178
|
</p>
|
|
149
179
|
|
|
150
180
|
<div id="variant-list">
|
|
181
|
+
<p class="variant-group">Shown in the preview</p>
|
|
182
|
+
<p class="variant-group-hint">
|
|
183
|
+
Surfaces, controls and type - the section at the bottom of this page.
|
|
184
|
+
</p>
|
|
185
|
+
|
|
151
186
|
<label class="variant-row">
|
|
152
187
|
<span class="variant-label">
|
|
153
188
|
Distinctive card corners
|
|
@@ -181,23 +216,32 @@
|
|
|
181
216
|
|
|
182
217
|
<label class="variant-row">
|
|
183
218
|
<span class="variant-label">
|
|
184
|
-
|
|
219
|
+
Button shape
|
|
185
220
|
<small
|
|
186
|
-
>
|
|
221
|
+
>From cut corners to fully rounded. Form fields keep their own
|
|
222
|
+
shape.</small
|
|
187
223
|
>
|
|
188
224
|
</span>
|
|
189
|
-
<
|
|
225
|
+
<select data-variant-classes>
|
|
226
|
+
<option value="mw-btn-square">Square</option>
|
|
227
|
+
<option value="" selected>Default</option>
|
|
228
|
+
<option value="mw-btn-pill">Pill</option>
|
|
229
|
+
</select>
|
|
190
230
|
</label>
|
|
191
231
|
|
|
192
232
|
<label class="variant-row">
|
|
193
233
|
<span class="variant-label">
|
|
194
|
-
|
|
234
|
+
Button style
|
|
195
235
|
<small
|
|
196
|
-
>
|
|
197
|
-
|
|
236
|
+
>How a filled button is painted. Outline, ghost and link buttons keep
|
|
237
|
+
their own treatment.</small
|
|
198
238
|
>
|
|
199
239
|
</span>
|
|
200
|
-
<
|
|
240
|
+
<select data-variant-classes>
|
|
241
|
+
<option value="" selected>Default</option>
|
|
242
|
+
<option value="mw-btn-glass">Glass</option>
|
|
243
|
+
<option value="mw-btn-tactile">Tactile</option>
|
|
244
|
+
</select>
|
|
201
245
|
</label>
|
|
202
246
|
|
|
203
247
|
<label class="variant-row">
|
|
@@ -213,18 +257,24 @@
|
|
|
213
257
|
|
|
214
258
|
<label class="variant-row">
|
|
215
259
|
<span class="variant-label">
|
|
216
|
-
|
|
217
|
-
<small
|
|
260
|
+
Flat surfaces
|
|
261
|
+
<small
|
|
262
|
+
>Cards and panels lose their shadow and sit flat on the page.
|
|
263
|
+
Dropdowns and dialogs still float.</small
|
|
264
|
+
>
|
|
218
265
|
</span>
|
|
219
|
-
<
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
266
|
+
<input type="checkbox" data-variant-class="mw-shadows-flat" />
|
|
267
|
+
</label>
|
|
268
|
+
|
|
269
|
+
<label class="variant-row">
|
|
270
|
+
<span class="variant-label">
|
|
271
|
+
Flush surfaces
|
|
272
|
+
<small
|
|
273
|
+
>Cards, panels and the footer drop their own tone and sit on the page
|
|
274
|
+
colour, separated by their border alone.</small
|
|
224
275
|
>
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
</select>
|
|
276
|
+
</span>
|
|
277
|
+
<input type="checkbox" data-variant-class="mw-surfaces-flush" />
|
|
228
278
|
</label>
|
|
229
279
|
|
|
230
280
|
<label class="variant-row">
|
|
@@ -237,13 +287,70 @@
|
|
|
237
287
|
|
|
238
288
|
<label class="variant-row">
|
|
239
289
|
<span class="variant-label">
|
|
240
|
-
|
|
290
|
+
Underlined links
|
|
241
291
|
<small
|
|
242
|
-
>
|
|
243
|
-
|
|
292
|
+
>Links in running text carry their underline at rest instead of only
|
|
293
|
+
under the pointer.</small
|
|
244
294
|
>
|
|
245
295
|
</span>
|
|
246
|
-
<input type="checkbox" data-variant-class="mw-
|
|
296
|
+
<input type="checkbox" data-variant-class="mw-links-underline" />
|
|
297
|
+
</label>
|
|
298
|
+
|
|
299
|
+
<label class="variant-row">
|
|
300
|
+
<span class="variant-label">
|
|
301
|
+
Density
|
|
302
|
+
<small
|
|
303
|
+
>How much padding sits inside cards, panels and controls. Type stays
|
|
304
|
+
the size it is - use Text size to scale everything together.</small
|
|
305
|
+
>
|
|
306
|
+
</span>
|
|
307
|
+
<select data-variant-classes>
|
|
308
|
+
<option value="mw-density-compact">Compact</option>
|
|
309
|
+
<option value="" selected>Default</option>
|
|
310
|
+
<option value="mw-density-roomy">Roomy</option>
|
|
311
|
+
</select>
|
|
312
|
+
</label>
|
|
313
|
+
|
|
314
|
+
<label class="variant-row">
|
|
315
|
+
<span class="variant-label">
|
|
316
|
+
Text size
|
|
317
|
+
<small
|
|
318
|
+
>The base the whole scale is built on - type, padding and control
|
|
319
|
+
heights move together.</small
|
|
320
|
+
>
|
|
321
|
+
</span>
|
|
322
|
+
<select data-variant-prop="--mw-root-font-size">
|
|
323
|
+
<option value="93.75%">Compact</option>
|
|
324
|
+
<option value="" selected>Default</option>
|
|
325
|
+
<option value="106.25%">Large</option>
|
|
326
|
+
</select>
|
|
327
|
+
</label>
|
|
328
|
+
|
|
329
|
+
<label class="variant-row">
|
|
330
|
+
<span class="variant-label">
|
|
331
|
+
Page width
|
|
332
|
+
<small
|
|
333
|
+
>How wide the content runs before it stops growing on a large
|
|
334
|
+
screen.</small
|
|
335
|
+
>
|
|
336
|
+
</span>
|
|
337
|
+
<select data-variant-prop="--mw-container-width">
|
|
338
|
+
<option value="min(800px, calc(100% - 2 * var(--mw-container-gutter)))">
|
|
339
|
+
800
|
|
340
|
+
</option>
|
|
341
|
+
<option value="min(960px, calc(100% - 2 * var(--mw-container-gutter)))">
|
|
342
|
+
960
|
|
343
|
+
</option>
|
|
344
|
+
<option value="" selected>1200 (default)</option>
|
|
345
|
+
<option
|
|
346
|
+
value="min(1440px, calc(100% - 2 * var(--mw-container-gutter)))"
|
|
347
|
+
>
|
|
348
|
+
1440
|
|
349
|
+
</option>
|
|
350
|
+
<option value="calc(100% - 2 * var(--mw-container-gutter))">
|
|
351
|
+
Full
|
|
352
|
+
</option>
|
|
353
|
+
</select>
|
|
247
354
|
</label>
|
|
248
355
|
|
|
249
356
|
<label class="variant-row">
|
|
@@ -259,20 +366,22 @@
|
|
|
259
366
|
|
|
260
367
|
<label class="variant-row">
|
|
261
368
|
<span class="variant-label">
|
|
262
|
-
|
|
369
|
+
Motion tempo
|
|
263
370
|
<small
|
|
264
|
-
>
|
|
265
|
-
|
|
371
|
+
>How fast every transition and animation runs. Reduced-motion settings
|
|
372
|
+
still win over this.</small
|
|
266
373
|
>
|
|
267
374
|
</span>
|
|
268
|
-
<
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
/>
|
|
375
|
+
<select data-variant-prop="--mw-motion-scale">
|
|
376
|
+
<option value="0.6">Brisk</option>
|
|
377
|
+
<option value="" selected>Default</option>
|
|
378
|
+
<option value="1.6">Relaxed</option>
|
|
379
|
+
</select>
|
|
274
380
|
</label>
|
|
275
381
|
|
|
382
|
+
<p class="variant-group">Elsewhere on the page</p>
|
|
383
|
+
<p class="variant-group-hint">The frame around it. Scroll to see these.</p>
|
|
384
|
+
|
|
276
385
|
<label class="variant-row">
|
|
277
386
|
<span class="variant-label">
|
|
278
387
|
Sticky header
|
|
@@ -304,43 +413,44 @@
|
|
|
304
413
|
|
|
305
414
|
<label class="variant-row">
|
|
306
415
|
<span class="variant-label">
|
|
307
|
-
|
|
416
|
+
Scroll reveal
|
|
308
417
|
<small
|
|
309
|
-
>
|
|
418
|
+
>Cards and sections rise into place as they scroll in. Off has
|
|
419
|
+
everything sit where it lands.</small
|
|
310
420
|
>
|
|
311
421
|
</span>
|
|
312
|
-
<
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
422
|
+
<input
|
|
423
|
+
type="checkbox"
|
|
424
|
+
checked
|
|
425
|
+
data-variant-class="mw-scroll-static"
|
|
426
|
+
data-variant-invert
|
|
427
|
+
/>
|
|
317
428
|
</label>
|
|
318
429
|
|
|
319
430
|
<label class="variant-row">
|
|
320
431
|
<span class="variant-label">
|
|
321
|
-
|
|
432
|
+
Section spacing
|
|
322
433
|
<small
|
|
323
|
-
>How
|
|
324
|
-
screen.</small
|
|
434
|
+
>How much air sits above and below each section of the page.</small
|
|
325
435
|
>
|
|
326
436
|
</span>
|
|
327
|
-
<select data-variant-prop="--mw-
|
|
328
|
-
<option value=""
|
|
329
|
-
<option
|
|
330
|
-
|
|
331
|
-
>
|
|
332
|
-
1440
|
|
333
|
-
</option>
|
|
334
|
-
<option value="calc(100% - 2 * var(--mw-container-gutter))">
|
|
335
|
-
Full
|
|
336
|
-
</option>
|
|
437
|
+
<select data-variant-prop="--mw-section-padding-block">
|
|
438
|
+
<option value="2rem">Compact</option>
|
|
439
|
+
<option value="" selected>Default</option>
|
|
440
|
+
<option value="5.5rem">Airy</option>
|
|
337
441
|
</select>
|
|
338
442
|
</label>
|
|
339
443
|
</div>
|
|
340
444
|
|
|
341
|
-
<
|
|
342
|
-
|
|
343
|
-
|
|
445
|
+
<div class="variant-setup-head">
|
|
446
|
+
<label class="variant-setup-label" for="variant-setup">
|
|
447
|
+
Setup - editable, paste one in to load it
|
|
448
|
+
</label>
|
|
449
|
+
<button type="button" class="variant-share" id="variant-share">
|
|
450
|
+
<i class="fas fa-link"></i>
|
|
451
|
+
<span id="variant-share-label">Copy link</span>
|
|
452
|
+
</button>
|
|
453
|
+
</div>
|
|
344
454
|
<textarea
|
|
345
455
|
class="variant-setup"
|
|
346
456
|
id="variant-setup"
|