maverick-wave 5.27.0 → 5.28.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/CHANGELOG.md +7 -0
- package/README.md +2 -2
- package/maverick-wave.min.css +4 -4
- package/maverick-wave.min.js +1 -1
- package/package.json +2 -2
- package/src/js/main.js +8 -8
- package/src/scss/abstracts/_variables.scss +6 -0
- package/src/scss/components/_hero-badge.scss +48 -0
- package/src/scss/components/_index.scss +2 -0
- package/src/scss/components/_leader-row.scss +24 -18
- package/src/scss/components/_tooltip.scss +193 -0
- package/src/scss/layout/_footer.scss +46 -84
- package/src/scss/layout/_grid.scss +48 -45
- package/src/scss/layout/_header-reveal.scss +1 -1
- package/src/scss/layout/_header.scss +49 -66
- package/src/scss/layout/_home.scss +5 -2
- package/src/scss/layout/_main.scss +100 -337
- package/src/scss/layout/_parallax.scss +1 -1
- package/src/scss/layout/_section.scss +24 -17
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"))}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}();
|
|
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("mw-active",a),t.classList.toggle("mw-active",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("mw-active"))}e.addEventListener("click",r),document.addEventListener("click",function(n){t.classList.contains("mw-active")&&(t.contains(n.target)||e.contains(n.target)||a(!1))}),document.addEventListener("keydown",function(n){"Escape"===n.key&&t.classList.contains("mw-active")&&(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("mw-active"),c.classList.remove("mw-active"),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 v(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 p(){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 v(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?v(r.closest(".mw-kanban-column"),null):e.target.closest(".mw-kanban-composer-cancel")&&y()}),n.addEventListener("submit",function(e){e.preventDefault(),p()}),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()),v()}function v(){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 p(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 p(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.28.0",
|
|
4
4
|
"config": {
|
|
5
|
-
"version_short": "5.
|
|
5
|
+
"version_short": "5.28"
|
|
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
|
@@ -586,10 +586,10 @@
|
|
|
586
586
|
const announces = menuBtn.tagName === 'BUTTON';
|
|
587
587
|
|
|
588
588
|
function setOpen(open) {
|
|
589
|
-
menuBtn.classList.toggle('
|
|
590
|
-
navbar.classList.toggle('
|
|
589
|
+
menuBtn.classList.toggle('mw-active', open);
|
|
590
|
+
navbar.classList.toggle('mw-active', open);
|
|
591
591
|
// The scrim and the rules that pin the bar and the burger in place hang
|
|
592
|
-
// off this one class rather than off `:has(.mw-navbar.
|
|
592
|
+
// off this one class rather than off `:has(.mw-navbar.mw-active)` - a selector
|
|
593
593
|
// that has to re-match the whole document from a class change several
|
|
594
594
|
// levels down, which is where WebKit's invalidation has let it slip.
|
|
595
595
|
document.body.classList.toggle('mw-nav-open', open);
|
|
@@ -599,7 +599,7 @@
|
|
|
599
599
|
function toggleMenu(e) {
|
|
600
600
|
e.preventDefault();
|
|
601
601
|
e.stopPropagation();
|
|
602
|
-
setOpen(!navbar.classList.contains('
|
|
602
|
+
setOpen(!navbar.classList.contains('mw-active'));
|
|
603
603
|
}
|
|
604
604
|
|
|
605
605
|
// One listener, not two. The button carries touch-action: manipulation, so
|
|
@@ -610,7 +610,7 @@
|
|
|
610
610
|
|
|
611
611
|
// The scrim is a body pseudo-element, so its taps land on the document
|
|
612
612
|
document.addEventListener('click', function (e) {
|
|
613
|
-
if (!navbar.classList.contains('
|
|
613
|
+
if (!navbar.classList.contains('mw-active')) return;
|
|
614
614
|
if (navbar.contains(e.target) || menuBtn.contains(e.target)) return;
|
|
615
615
|
setOpen(false);
|
|
616
616
|
});
|
|
@@ -618,7 +618,7 @@
|
|
|
618
618
|
// Or Escape strands the keyboard user in a panel that is no longer there
|
|
619
619
|
document.addEventListener('keydown', function (e) {
|
|
620
620
|
if (e.key !== 'Escape') return;
|
|
621
|
-
if (!navbar.classList.contains('
|
|
621
|
+
if (!navbar.classList.contains('mw-active')) return;
|
|
622
622
|
setOpen(false);
|
|
623
623
|
menuBtn.focus();
|
|
624
624
|
});
|
|
@@ -891,8 +891,8 @@
|
|
|
891
891
|
const menuBtn = document.querySelector('.mw-menu-btn');
|
|
892
892
|
const nav = document.querySelector('.mw-navbar');
|
|
893
893
|
if (menuBtn && nav) {
|
|
894
|
-
menuBtn.classList.remove('
|
|
895
|
-
nav.classList.remove('
|
|
894
|
+
menuBtn.classList.remove('mw-active');
|
|
895
|
+
nav.classList.remove('mw-active');
|
|
896
896
|
document.body.classList.remove('mw-nav-open');
|
|
897
897
|
if (menuBtn.tagName === 'BUTTON') {
|
|
898
898
|
menuBtn.setAttribute('aria-expanded', 'false');
|
|
@@ -520,7 +520,13 @@ $z-index: (
|
|
|
520
520
|
'lift': 3,
|
|
521
521
|
'card': 10,
|
|
522
522
|
'menu': 30,
|
|
523
|
+
// The scrim sits under the bar, the panel hangs off it, the logo clears the
|
|
524
|
+
// panel and the burger stays on top of all of them while it is the X.
|
|
525
|
+
'header-scrim': 99,
|
|
523
526
|
'header': 100,
|
|
527
|
+
'header-panel': 103,
|
|
528
|
+
'header-logo': 105,
|
|
529
|
+
'header-burger': 110,
|
|
524
530
|
'spinner': 300,
|
|
525
531
|
'modal': 500,
|
|
526
532
|
'tooltip': 700,
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@use '../abstracts' as *;
|
|
2
|
+
|
|
3
|
+
@layer mw.components {
|
|
4
|
+
// Glass rather than a fill: on a hero image a solid badge is the loudest thing
|
|
5
|
+
// on the screen and plain text sinks into the picture.
|
|
6
|
+
.mw-hero-badge {
|
|
7
|
+
display: inline-flex;
|
|
8
|
+
align-items: center;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
gap: spacing('3');
|
|
11
|
+
max-width: 100%;
|
|
12
|
+
margin-bottom: spacing('6');
|
|
13
|
+
padding: spacing('2') spacing('5');
|
|
14
|
+
border: 1px solid #{fade('hero-text-color', 22%)};
|
|
15
|
+
border-radius: 999px;
|
|
16
|
+
// A vertical ramp and not a flat tint: glass is lit from above, and the
|
|
17
|
+
// gradient is what gives the pill a thickness instead of a fogged panel
|
|
18
|
+
background: linear-gradient(
|
|
19
|
+
to bottom,
|
|
20
|
+
#{fade('hero-text-color', 16%)},
|
|
21
|
+
#{fade('hero-text-color', 5%)}
|
|
22
|
+
);
|
|
23
|
+
// saturate() is what separates glass from frosted plastic: the blur alone
|
|
24
|
+
// greys out what shows through, and pushing the chroma back up is how a
|
|
25
|
+
// real lens reads. The two inset lines are the specular highlight - light
|
|
26
|
+
// catching the top edge, a fainter bounce off the bottom - and the outer
|
|
27
|
+
// shadow is what lifts the pill off the photo instead of pasting it on.
|
|
28
|
+
backdrop-filter: blur(14px) saturate(180%);
|
|
29
|
+
box-shadow:
|
|
30
|
+
inset 0 1px 0 #{fade('hero-text-color', 40%)},
|
|
31
|
+
inset 0 -1px 0 #{fade('hero-text-color', 12%)},
|
|
32
|
+
0 2px 12px rgb(0 0 0 / 18%);
|
|
33
|
+
color: fade('hero-text-color', 88%);
|
|
34
|
+
font-size: font-size('sm');
|
|
35
|
+
font-weight: font-weight('medium');
|
|
36
|
+
letter-spacing: 0.02em;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// Carries the secondary colour, because the badge is a state, not a label -
|
|
40
|
+
// override `background` for a different one
|
|
41
|
+
.mw-hero-badge-dot {
|
|
42
|
+
width: 8px;
|
|
43
|
+
height: 8px;
|
|
44
|
+
flex-shrink: 0;
|
|
45
|
+
border-radius: radius('full');
|
|
46
|
+
background: var(--mw-secondary-color);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
@@ -19,6 +19,7 @@
|
|
|
19
19
|
@forward 'empty-state';
|
|
20
20
|
@forward 'flag';
|
|
21
21
|
@forward 'gallery';
|
|
22
|
+
@forward 'hero-badge';
|
|
22
23
|
@forward 'info';
|
|
23
24
|
@forward 'kanban';
|
|
24
25
|
@forward 'kbd';
|
|
@@ -49,3 +50,4 @@
|
|
|
49
50
|
@forward 'tiles';
|
|
50
51
|
@forward 'timelines';
|
|
51
52
|
@forward 'toasts';
|
|
53
|
+
@forward 'tooltip';
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
// and invoice draws one.
|
|
11
11
|
//
|
|
12
12
|
// The leader is the row's own ::before rather than an element in the markup.
|
|
13
|
-
// A generated box on a
|
|
13
|
+
// A generated box on a grid container is a grid item, so "order" can place it
|
|
14
14
|
// between the two spans - and generated content stays out of the
|
|
15
15
|
// accessibility tree, where a filler element would need aria-hidden.
|
|
16
16
|
.mw-leader-row {
|
|
@@ -18,20 +18,27 @@
|
|
|
18
18
|
--mw-leader-row-width: 2px;
|
|
19
19
|
--mw-leader-row-color: var(--mw-border);
|
|
20
20
|
|
|
21
|
-
|
|
22
|
-
//
|
|
23
|
-
//
|
|
24
|
-
|
|
25
|
-
|
|
21
|
+
// Grid, not a wrapping flex row. Flex fills a line greedily and moves the
|
|
22
|
+
// next item down before it shrinks anything, so a label that still fit on
|
|
23
|
+
// its own line kept it and pushed the value underneath - on a phone the
|
|
24
|
+
// row then read as text, dashes, and a number stranded on the line below.
|
|
25
|
+
// A grid column gives instead: the label breaks between its words and the
|
|
26
|
+
// value stays where it belongs.
|
|
27
|
+
//
|
|
28
|
+
// The leader column holds a stub of line when label and value nearly fill
|
|
29
|
+
// the row. Anything past the two declared columns - a second value - takes
|
|
30
|
+
// a column of its own.
|
|
31
|
+
display: grid;
|
|
32
|
+
grid-template-columns: minmax(0, auto) minmax(spacing('6'), 1fr);
|
|
33
|
+
grid-auto-flow: column;
|
|
34
|
+
grid-auto-columns: max-content;
|
|
35
|
+
align-items: end;
|
|
26
36
|
gap: spacing('3');
|
|
27
37
|
margin: 0;
|
|
28
38
|
|
|
29
39
|
&::before {
|
|
30
40
|
content: '';
|
|
31
41
|
order: 1;
|
|
32
|
-
flex: 1 1 auto;
|
|
33
|
-
// Keeps a stub of line visible when label and value nearly fill the row
|
|
34
|
-
min-width: spacing('6');
|
|
35
42
|
border-bottom: var(--mw-leader-row-width) var(--mw-leader-row-style)
|
|
36
43
|
var(--mw-leader-row-color);
|
|
37
44
|
margin-bottom: $_mw-leader-baseline-lift;
|
|
@@ -39,17 +46,16 @@
|
|
|
39
46
|
|
|
40
47
|
&-label {
|
|
41
48
|
order: 0;
|
|
42
|
-
//
|
|
43
|
-
//
|
|
44
|
-
//
|
|
45
|
-
|
|
49
|
+
// Words first, and the column floor is zero, so a single word wider than
|
|
50
|
+
// what is left of the row breaks inside itself rather than running past
|
|
51
|
+
// the edge - a German compound noun reaches that point on a phone.
|
|
52
|
+
overflow-wrap: break-word;
|
|
46
53
|
// The row also works as a dl group, and a dd carries 40px of browser margin
|
|
47
54
|
margin: 0;
|
|
48
55
|
}
|
|
49
56
|
|
|
50
57
|
&-value {
|
|
51
58
|
order: 2;
|
|
52
|
-
flex-shrink: 0;
|
|
53
59
|
margin: 0;
|
|
54
60
|
// A price or a page number must not break, and a column of them only
|
|
55
61
|
// lines up with tabular figures.
|
|
@@ -59,8 +65,8 @@
|
|
|
59
65
|
|
|
60
66
|
// Two values in one row read as a single long range with only a gap between
|
|
61
67
|
// them. The mark takes the leader's colour, so retuning a row moves both.
|
|
62
|
-
// It hangs off the first of the pair, not the second
|
|
63
|
-
//
|
|
68
|
+
// It hangs off the first of the pair, not the second, where a trailing mark
|
|
69
|
+
// would read as "and there is more" at the end of the row.
|
|
64
70
|
&-value:has(+ &-value)::after {
|
|
65
71
|
content: '|';
|
|
66
72
|
margin-left: spacing('3');
|
|
@@ -77,10 +83,10 @@
|
|
|
77
83
|
}
|
|
78
84
|
|
|
79
85
|
&-top {
|
|
80
|
-
align-items:
|
|
86
|
+
align-items: start;
|
|
81
87
|
|
|
82
88
|
&::before {
|
|
83
|
-
//
|
|
89
|
+
// start pins the leader to the top edge, so it drops to the first
|
|
84
90
|
// line's baseline itself instead of being lifted off the last one
|
|
85
91
|
margin: calc(1lh - #{$_mw-leader-baseline-lift}) 0 0;
|
|
86
92
|
}
|
|
@@ -0,0 +1,193 @@
|
|
|
1
|
+
@use 'sass:math';
|
|
2
|
+
@use '../abstracts' as *;
|
|
3
|
+
|
|
4
|
+
@layer mw.components {
|
|
5
|
+
// A pseudo element on the trigger, so an ancestor with `overflow: hidden` cuts
|
|
6
|
+
// it off. Hidden means `display: none`: a laid-out box still counts towards the
|
|
7
|
+
// page's overflow, and a 280px bubble near the right edge added 50px of sideways
|
|
8
|
+
// scroll on a phone. Hence `allow-discrete` and the starting style.
|
|
9
|
+
$_mw-tooltip-arrow: 6px;
|
|
10
|
+
$_mw-tooltip-gap: 8px;
|
|
11
|
+
// A square turned 45deg rather than a border triangle: it reads the same from
|
|
12
|
+
// above and from below, so the second placement costs no second arrow and a
|
|
13
|
+
// flip never has to repaint anything. The diagonal carries the visible width,
|
|
14
|
+
// so the side is the visible height doubled over root two.
|
|
15
|
+
$_mw-tooltip-arrow-side: math.div($_mw-tooltip-arrow * 2, math.sqrt(2));
|
|
16
|
+
// Half a side short of where the triangle's edge sat, so the turned square is
|
|
17
|
+
// centred on the bubble's edge and only its outer half shows. The inner half
|
|
18
|
+
// lands on the bubble in the same colour, which is what makes it read as one
|
|
19
|
+
// shape rather than a diamond stuck to a box.
|
|
20
|
+
$_mw-tooltip-arrow-inset: $_mw-tooltip-gap +
|
|
21
|
+
$_mw-tooltip-arrow - math.div($_mw-tooltip-arrow-side, 2);
|
|
22
|
+
|
|
23
|
+
[data-tooltip] {
|
|
24
|
+
position: relative;
|
|
25
|
+
|
|
26
|
+
&::before {
|
|
27
|
+
content: attr(data-tooltip);
|
|
28
|
+
position: absolute;
|
|
29
|
+
bottom: 100%;
|
|
30
|
+
left: 50%;
|
|
31
|
+
transform: translateX(-50%);
|
|
32
|
+
margin-bottom: $_mw-tooltip-gap + $_mw-tooltip-arrow;
|
|
33
|
+
max-width: min(280px, 90vw);
|
|
34
|
+
width: max-content;
|
|
35
|
+
padding: spacing('1') spacing('2');
|
|
36
|
+
background: var(--mw-gray-color);
|
|
37
|
+
color: $fixed-surface-text;
|
|
38
|
+
font-size: font-size('xs');
|
|
39
|
+
border-radius: radius('xs');
|
|
40
|
+
box-shadow: var(--mw-elevation-2);
|
|
41
|
+
pointer-events: none;
|
|
42
|
+
opacity: 0;
|
|
43
|
+
display: none;
|
|
44
|
+
transition:
|
|
45
|
+
opacity var(--mw-duration-fast) var(--mw-ease-out),
|
|
46
|
+
display var(--mw-duration-fast) allow-discrete;
|
|
47
|
+
z-index: z-index('tooltip');
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&::after {
|
|
51
|
+
content: '';
|
|
52
|
+
position: absolute;
|
|
53
|
+
bottom: 100%;
|
|
54
|
+
left: 50%;
|
|
55
|
+
transform: translateX(-50%) rotate(45deg);
|
|
56
|
+
margin-bottom: $_mw-tooltip-arrow-inset;
|
|
57
|
+
width: $_mw-tooltip-arrow-side;
|
|
58
|
+
height: $_mw-tooltip-arrow-side;
|
|
59
|
+
background: var(--mw-gray-color);
|
|
60
|
+
opacity: 0;
|
|
61
|
+
display: none;
|
|
62
|
+
transition:
|
|
63
|
+
opacity var(--mw-duration-fast) var(--mw-ease-out),
|
|
64
|
+
display var(--mw-duration-fast) allow-discrete;
|
|
65
|
+
z-index: z-index('tooltip');
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// The placement API: the text is the attribute, the side is a class. The
|
|
69
|
+
// three steer different properties - block axis, inline axis - so `below`
|
|
70
|
+
// and `end` compose without a rule for the pairing.
|
|
71
|
+
//
|
|
72
|
+
// They place the bubble against the trigger rather than joining the anchored
|
|
73
|
+
// path below, and that is the point, not a shortcut. The reason to want them
|
|
74
|
+
// is a control in a fixed header, and that header carries a backdrop-filter,
|
|
75
|
+
// which makes it the containing block for anything `fixed` inside it.
|
|
76
|
+
// `block-end` is then the few pixels between the trigger and the header's own
|
|
77
|
+
// bottom edge, the bubble does not fit, and it gets pushed back over the
|
|
78
|
+
// trigger it belongs to. What this gives up is the clipping immunity the
|
|
79
|
+
// anchored path buys - a modifier inside a scroll container is cut off.
|
|
80
|
+
//
|
|
81
|
+
// Opting out has to restore the placement, not just the positioning scheme:
|
|
82
|
+
// the anchored path below is the later rule and clears `bottom`, `top`,
|
|
83
|
+
// `left` and the centring transform so `position-area` can resolve them
|
|
84
|
+
// itself. Leave that cleared and the box falls to its static position, which
|
|
85
|
+
// for a pseudo element is inside the trigger it is supposed to sit above.
|
|
86
|
+
// The three rules under this one then move the one edge each of them owns.
|
|
87
|
+
&:is(.mw-tooltip-below, .mw-tooltip-end, .mw-tooltip-start) {
|
|
88
|
+
&::before,
|
|
89
|
+
&::after {
|
|
90
|
+
position: absolute;
|
|
91
|
+
position-area: none;
|
|
92
|
+
bottom: 100%;
|
|
93
|
+
top: auto;
|
|
94
|
+
left: 50%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
&::before {
|
|
98
|
+
transform: translateX(-50%);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
&::after {
|
|
102
|
+
transform: translateX(-50%) rotate(45deg);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&.mw-tooltip-below {
|
|
107
|
+
&::before {
|
|
108
|
+
top: 100%;
|
|
109
|
+
bottom: auto;
|
|
110
|
+
margin-top: $_mw-tooltip-gap + $_mw-tooltip-arrow;
|
|
111
|
+
margin-bottom: 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
&::after {
|
|
115
|
+
top: 100%;
|
|
116
|
+
bottom: auto;
|
|
117
|
+
margin-top: $_mw-tooltip-arrow-inset;
|
|
118
|
+
margin-bottom: 0;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
// Only the bubble moves - the arrow stays centred on the trigger it points at.
|
|
123
|
+
&.mw-tooltip-end::before {
|
|
124
|
+
left: auto;
|
|
125
|
+
right: 0;
|
|
126
|
+
transform: none;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&.mw-tooltip-start::before {
|
|
130
|
+
left: 0;
|
|
131
|
+
right: auto;
|
|
132
|
+
transform: none;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
&:hover::before,
|
|
136
|
+
&:hover::after,
|
|
137
|
+
&:focus-visible::before,
|
|
138
|
+
&:focus-visible::after {
|
|
139
|
+
opacity: 1;
|
|
140
|
+
display: block;
|
|
141
|
+
|
|
142
|
+
@starting-style {
|
|
143
|
+
opacity: 0;
|
|
144
|
+
}
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// A press usually scales the trigger, and a transform makes it a containing
|
|
148
|
+
// block for the fixed-position bubble above - which would drop the label
|
|
149
|
+
// into the element being pressed. So it steps aside for the click instead;
|
|
150
|
+
// by then it has been read anyway. After the hover rule, same weight.
|
|
151
|
+
&:active::before,
|
|
152
|
+
&:active::after {
|
|
153
|
+
opacity: 0;
|
|
154
|
+
display: none;
|
|
155
|
+
// Not transitioned: `allow-discrete` holds `display: block` until the fade
|
|
156
|
+
// ends, and the bubble would spend those 180ms visibly sitting in the
|
|
157
|
+
// element. Going back out on release keeps the fade - that one is wanted.
|
|
158
|
+
transition: none;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
// The clipping caveat above, lifted where the browser can do it: `fixed` takes
|
|
162
|
+
// the bubble out of the trigger's containing block, anchor positioning keeps
|
|
163
|
+
// it attached. No `anchor-name` needed - a pseudo element is implicitly
|
|
164
|
+
// anchored to the element it comes from.
|
|
165
|
+
//
|
|
166
|
+
// Still no `position-try-fallbacks: flip-block`, and no longer because of the
|
|
167
|
+
// arrow - the turned square survives a flip. Bubble and arrow are two
|
|
168
|
+
// separately anchored boxes, so each would decide on its own whether it fits,
|
|
169
|
+
// and the tiny one nearly always does: the label flips, the arrow stays.
|
|
170
|
+
@supports (position-area: block-start) {
|
|
171
|
+
&::before,
|
|
172
|
+
&::after {
|
|
173
|
+
position: fixed;
|
|
174
|
+
// The absolute placement these replace - left as-is they fight the
|
|
175
|
+
// position-area, which resolves the inset properties itself.
|
|
176
|
+
bottom: auto;
|
|
177
|
+
left: auto;
|
|
178
|
+
top: auto;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
&::before {
|
|
182
|
+
position-area: block-start;
|
|
183
|
+
transform: none;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
// The turn stays - it is the arrow's shape, not its placement.
|
|
187
|
+
&::after {
|
|
188
|
+
position-area: block-start;
|
|
189
|
+
transform: rotate(45deg);
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
}
|