material-inspired-component-library 5.0.0 → 5.0.1

package/docs/micl.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={d:(t,n)=>{for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};return(()=>{e.r(t),e.d(t,{default:()=>w});const n="dialog.micl-bottomsheet",i=(()=>{const e=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10),n=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10),i=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=n);return t<1&&(t=Math.min(e.getBoundingClientRect().height,n),e.dataset.miclfitheight=`${t}`),[...new Set(i.concat([t]).sort())]},t=(t,n)=>{let i=t.getBoundingClientRect().height,r=e(t);return r.filter(e=>e>i+4)[0]||r[n?r.length-1:0]},i=(e,t)=>{t<1?(delete e.dataset.miclfitheight,e.style.removeProperty("--md-sys-bottomsheet-height"),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-sys-bottomsheet-height",`${t}px`)};return{initialize:r=>{if(!r.matches(n)||r.dataset.miclinitialized)return;r.dataset.miclinitialized="1";const l=r.querySelector(".micl-bottomsheet__headline");if(!l)return;const a=l.querySelector(".micl-bottomsheet__draghandle");a?.addEventListener("click",()=>{i(r,t(r,!1))});let o,c,s=!1,m=!1;function d(e){const t=e.clientY;s&&Math.abs(o-t)>4&&(s=!1,m=!0,r.classList.add("micl-bottomsheet--resizing")),m&&i(r,c+o-t)}function p(n){s=!1,r.classList.remove("micl-bottomsheet--resizing"),m&&(m=!1,n.clientY<o?i(r,t(r,!0)):r.getBoundingClientRect().height<48?i(r,0):i(r,(t=>{let n=t.getBoundingClientRect().height,i=e(t),r=i.filter(e=>e<n-4);return r[r.length-1]||i[0]})(r)),document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",p))}l.addEventListener("mousedown",e=>{e.eventPhase===Event.AT_TARGET&&(s=!0,e.preventDefault(),o=e.clientY,c=r.getBoundingClientRect().height,document.addEventListener("mousemove",d),document.addEventListener("mouseup",p))})},cleanup:e=>{e.matches(n)&&(e.classList.remove("micl-bottomsheet--resizing"),delete e.dataset.miclinitialized,delete e.dataset.miclfitheight)}}})(),r="button[popovertarget],button.micl-button--toggle",l=(()=>{const e=e=>{e.target&&e.target instanceof HTMLButtonElement&&(e.target.popoverTargetElement instanceof HTMLDialogElement&&(e.target.popoverTargetElement.open?e.target.popoverTargetElement.close():e.target.popoverTargetElement.showModal()),e.target.classList.contains("micl-button--toggle")&&(e.target.classList.add("micl-button--toggled"),e.target.classList.toggle("micl-button--selected"),e.target.dataset.miclalt&&([e.target.textContent,e.target.dataset.miclalt]=[e.target.dataset.miclalt,e.target.textContent])))};return{initialize:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&!t.dataset.miclinitialized&&(t.dataset.miclinitialized="1",(t.popoverTargetElement instanceof HTMLDialogElement&&!t.popoverTargetElement.hasAttribute("popover")||t.classList.contains("micl-button--toggle"))&&t.addEventListener("click",e))},cleanup:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&(document.removeEventListener("click",e),delete t.dataset.miclinitialized)}}})(),a=".micl-checkbox-group",o=(()=>{const e=e=>{const t=e.querySelector(".micl-checkbox__parent");return t?.closest(a)===e?t:null},t=n=>{const i=e(n);if(!i)return!1;let r=0,l=0;return n.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(e=>{if(e!==i){const i=e.closest(a);i===n?(r++,e.checked&&!e.indeterminate&&l++):e.classList.contains("micl-checkbox__parent")&&i?.parentElement?.closest(a)===n&&(r++,t(i)&&l++)}}),0===l?(i.checked=!1,i.indeterminate=!1):l===r?(i.checked=!0,i.indeterminate=!1):(i.checked=!0,i.indeterminate=!0),l===r},n=(e,t)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(i=>{const r=i.closest(a);r===e?i.checked=t:i.classList.contains("micl-checkbox__parent")&&r?.parentElement?.closest(a)===e&&(i.checked=t,n(r,t))})},i=(i,r)=>{const l=e(i);if(!l)return;r===l&&n(i,r.checked);let o,c=i;do{o=c,c=c.parentElement?.closest(a)}while(c);t(o)};return{initialize:e=>{e.matches(a)&&!e.dataset.miclinitialized&&(e.dataset.miclinitialized="1",e.addEventListener("change",t=>{const n=t.target;n.classList.contains("micl-checkbox")&&(t.stopPropagation(),i(e,n))}),i(e,null))}}})(),c=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",s=(()=>{const e=e=>!!e&&e.classList.contains("micl-list-item--disabled");return{keydown:t=>{if(!(t instanceof KeyboardEvent&&t.target instanceof Element&&t.target.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const n=t.target.parentElement;if(!n)return;let i=[];if(n instanceof HTMLDetailsElement?i=Array.from(n.parentElement?.children||[]).map(t=>{let n=t.querySelector(":scope > summary");return e(n)?null:n}).filter(e=>!!e):n instanceof HTMLUListElement&&(i=Array.from(n.children).map(t=>t instanceof HTMLLIElement&&!e(t)?t:null).filter(e=>!!e)),0===i.length)return;let r=i.findIndex(e=>(e=>!!e&&e.matches(":has(input[type=checkbox]:checked)"))(e)),l=i.findIndex(e=>0===e.tabIndex),a=l;switch(t.key){case"ArrowDown":a=(l+1)%i.length,t.preventDefault();break;case"ArrowUp":a=(l-1+i.length)%i.length,t.preventDefault();break;case"Tab":-1===r?0!==l&&(i[l].tabIndex=-1,i[0].tabIndex=0):r!==l&&(i[l].tabIndex=-1,i[r].tabIndex=0);break;case"Enter":case" ":const e=t.target.querySelector("input[type=checkbox]");e instanceof HTMLInputElement&&(e.checked=!e.checked)}if(a!==l){i[l].tabIndex=-1,i[a].tabIndex=0,i[a].focus();const e=i[a].querySelector(":scope > button");e?.dispatchEvent(new MouseEvent("mouseenter",{bubbles:!0,cancelable:!0,view:window}))}}}})(),m=".micl-menu[popover]",d=(()=>{const e=(e,t)=>{const n=e.getBoundingClientRect(),i=t.getBoundingClientRect();return(n.x>i.x?"right ":"left ")+(n.y>i.y?"bottom":"top")};return{initialize:t=>{if(!t.matches(".micl-menu[popover]")||t.dataset.miclinitialized)return;t.dataset.miclinitialized="1";const n=document.querySelector(`[popovertarget="${t.id}"]`);n&&t.addEventListener("beforetoggle",i=>{"open"===i.oldState&&(t.style.transformOrigin=e(n,t))}),n&&t.addEventListener("toggle",i=>{"closed"===i.oldState&&(t.style.transformOrigin=e(n,t))}),t.querySelectorAll(":scope > ul.micl-list > li > button[popovertarget]").forEach(e=>{if(e.popoverTargetElement?.matches(".micl-menu[popover]")){let t,n=`--${e.popoverTargetElement.id}`;e.popoverTargetElement instanceof HTMLElement&&(e.style.setProperty("anchor-name",n),e.popoverTargetElement.style.insetBlockStart=`anchor(${n} start)`,e.popoverTargetElement.style.insetInlineStart=`anchor(${n} end)`),e.addEventListener("mouseenter",()=>{e.popoverTargetElement instanceof HTMLElement&&e.popoverTargetElement.showPopover()}),e.addEventListener("mouseleave",()=>{t=setTimeout(()=>{e.popoverTargetElement instanceof HTMLElement&&!e.popoverTargetElement.matches(":hover")&&e.popoverTargetElement.hidePopover()},100)}),e.popoverTargetElement.addEventListener("mouseenter",()=>{clearTimeout(t)}),e.popoverTargetElement.addEventListener("mouseleave",()=>{e.popoverTargetElement instanceof HTMLElement&&e.popoverTargetElement.hidePopover()})}})}}})(),p=".micl-navigationrail__item[for]:not(.micl-navigationrail__item--disabled)",u={keydown:e=>{if(!(e instanceof KeyboardEvent&&e.target instanceof HTMLLabelElement&&e.target.matches(p)))return;const t=document.getElementById(e.target.htmlFor);if(t)switch(e.key){case"Enter":case" ":e.preventDefault(),t.checked||(t.checked=!t.checked)}}},g="input[type=range].micl-slider-xs,input[type=range].micl-slider-s,input[type=range].micl-slider-m,input[type=range].micl-slider-l,input[type=range].micl-slider-xl",h=(()=>{const e=String.fromCharCode(8226),t=String.fromCharCode(8201),n=e=>e.parentElement?.classList.contains("micl-slider__container")?e.parentElement:null,i=(e,t)=>{e.dataset.miclsliderticks=t},r=e=>{let t=JSON.stringify(e.value+""),i=n(e);i&&(i.style.setProperty("--md-sys-slider-value",e.value),i.style.setProperty("--md-sys-slider-tip",t)),e.style.setProperty("--md-sys-slider-value",e.value),e.style.setProperty("--md-sys-slider-tip",t)};return{initialize:l=>{if(!l.matches(g))return;(e=>{let t=e.max||"100";n(e)?.style.setProperty("--md-sys-slider-max",t),e.style.setProperty("--md-sys-slider-max",t)})(l),(e=>{let t=e.min||"0";n(e)?.style.setProperty("--md-sys-slider-min",t),e.style.setProperty("--md-sys-slider-min",t)})(l),r(l),(e=>{let t=n(e);if(t){const n=window.getComputedStyle(e);["--md-sys-slider-handle-height","--md-sys-slider-track-height"].forEach(e=>{t.style.setProperty(e,n.getPropertyValue(e))})}})(l);const a=parseFloat(l.max),o=parseFloat(l.min),c=l.getBoundingClientRect(),s=((e,t,n)=>{const i=[];return e.list&&t>n&&e.list.querySelectorAll("option[value]").forEach(e=>{let r=parseFloat(e.value);!isNaN(r)&&r>=n&&r<=t&&i.push(r)}),i})(l,a,o).sort((e,t)=>e-t).map(e=>Math.round(100*(e-o)/(a-o)));if(s.length>0){const n=document.createElement("canvas"),r=n.getContext("2d");if(r){r.font=window.getComputedStyle(l).getPropertyValue("font");let n=r.measureText(t).width,a=r.measureText(e).width,o=c.width-10,m=0,d="";s.forEach(i=>{let r=o*i/100,l=Math.round((r-m)/n)-1;for(let e=0;e<l;e++)d+=t,m+=n;d+=e,m+=a}),i(l,d)}n.remove()}else i(l,e)},input:e=>{e.target.matches(g)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&r(e.target)}}})(),f=(()=>{const e=e=>"willValidate"in e,t=t=>{const n=t.target;e(n)&&n.setCustomValidity("")},n=e=>{const n=e.dataset.miclvalidateMessage||"";if(n&&e.matches("[data-miclvalidate-checkboxes-name]")){const i=e.dataset.miclvalidateCheckboxesName||"",r=e.dataset.miclvalidateCheckboxesCountEqual||"",l=e.dataset.miclvalidateCheckboxesCountMax||"",a=e.dataset.miclvalidateCheckboxesCountMin||"";if(i&&(r||l||a)){const o=e.querySelectorAll(`input[type="checkbox"][name="${i}"]:checked`).length,c=parseInt(r,10),s=parseInt(l,10),m=parseInt(a,10);let d=!isNaN(c)&&o!=c||!isNaN(s)&&o>s||!isNaN(m)&&o<m;e.setCustomValidity(d?n:"");const p=e.querySelector(`input[type="checkbox"][name="${i}"]`);p&&(p.setCustomValidity(d?n:""),d?p.addEventListener("change",t):p.removeEventListener("change",t))}}},i=(t,i)=>{let r=!1;return t.querySelectorAll("fieldset").forEach(n),Array.from(t.elements).forEach(t=>{if(e(t)&&t.willValidate){t.checkValidity()||(r=!0);let n=(t=>{if(!t.parentElement||!e(t))return!1;let n=!1;return t instanceof HTMLInputElement&&"checkbox"===t.type&&t.classList.contains("micl-checkbox")?n=(e=>(e.classList.toggle("micl-checkbox--error",!!e.validationMessage),!1))(t):(t.parentElement.classList.contains("micl-textfield-outlined")||t.parentElement.classList.contains("micl-textfield-filled"))&&(n=((e,t)=>{e.classList.toggle("micl-textfield--error",!!t);const n=e.querySelector(".micl-textfield__supporting-text");return n&&(t?(n.dataset.micltext||(n.dataset.micltext=n.textContent),n.textContent=t):"micltext"in n.dataset&&(n.textContent=n.dataset.micltext||"")),!!t&&!!n})(t.parentElement,t.validationMessage)),n})(t);!n&&i&&t.reportValidity()}}),!r};return{validateFieldSet:(e,t)=>(n(e),i(e,t)),validateForm:(e,t)=>i(e,t)}})(),y=".micl-stepper",v=".micl-stepper__action-back,.micl-stepper__action-next",E=".micl-stepper__header button[role=tab][aria-controls]",L="micl-stepper__step",b="."+L,k=(()=>{const e=e=>e.querySelector(`${b}[aria-current=step]`)||n(e,e.querySelector(b)),t=(e,t)=>Array.from(e.querySelectorAll(b)).indexOf(t)+1,n=(e,t)=>{if(!t)return null;let n=0;e.querySelectorAll(b).forEach((e,i)=>{e.setAttribute("aria-current",e===t?"step":"false"),e===t&&(n=i)});const i=e.querySelectorAll(E).item(n);return e.querySelectorAll(E).forEach((e,t)=>{e.setAttribute("aria-selected",e===i?"true":"false")}),l(e,t),t},i=e=>{const t=e.currentTarget;"transform"===e.propertyName&&t&&(t.classList.remove("micl-stepper__step--fromselected","micl-stepper__step--toselected"),t.removeEventListener("transitionend",i))},r=e=>e.classList.contains("micl-stepper__action-back"),l=(e,n)=>{((e,t)=>{Array.from(e.querySelectorAll(v)).forEach(e=>{const n=r(e)?"previousElementSibling":"nextElementSibling",i=t[n]?.classList.contains(L);e.classList.toggle("micl-hidden",!i)})})(e,n),((e,n)=>{const i=t(e,n);e.querySelectorAll("[data-step]").forEach(e=>{const t=e.dataset.step!=`${i}`;e.classList.toggle("micl-hidden",t)})})(e,n),((e,n)=>{const i=t(e,n),r=e.querySelectorAll(b).length,l=!e.classList.contains("micl-stepper--nonlinear"),a=(t,n)=>{e.querySelectorAll(t).forEach(e=>{e.textContent=n})};a(".micl-stepper__progress-current",`${i}`),a(".micl-stepper__progress-total",`${r}`),e.querySelectorAll(".micl-stepper__progress-dots").forEach(e=>{const t=document.createDocumentFragment();e.innerHTML="";for(let e=1;e<=r;e++){let n=document.createElement("span");n.classList.add("micl-stepper__progress-dot"),(l&&e<=i||!l&&e===i)&&n.classList.add("micl-stepper__progress--done"),t.appendChild(n)}e.appendChild(t)}),e.querySelectorAll(E).forEach((e,t)=>{e.classList.toggle("micl-stepper__progress--done",l?t+1<=i:t+1===i)})})(e,n)};return{initialize:t=>{if(!t.matches(y)||t.dataset.miclinitialized)return;t.dataset.miclinitialized="1";const a=e(t),o=t.querySelector(".micl-stepper__header");a&&(l(t,a),o?.querySelectorAll("button[role=tab][aria-controls]").forEach(e=>{e.addEventListener("click",()=>{if("ariaControlsElements"in Element.prototype&&e.ariaControlsElements)n(t,e.ariaControlsElements[0]);else{const i=e.getAttribute("aria-controls");i&&n(t,document.getElementById(i))}})})),Array.from(t.querySelectorAll(v)).forEach(l=>{l.addEventListener("click",function(l){const a=r(this),o=e(t);if(!o||!a&&o instanceof HTMLFieldSetElement&&!f.validateFieldSet(o,!0))return void(a||l.stopImmediatePropagation());const c=o[a?"previousElementSibling":"nextElementSibling"];c?.classList.contains(L)&&((e,t,r)=>{t.addEventListener("transitionend",i),t.classList.add("micl-stepper__step--fromselected"),t.offsetHeight,r.addEventListener("transitionend",i),r.classList.add("micl-stepper__step--toselected"),r.offsetHeight,n(e,r)})(t,o,c)},!0)}),t instanceof HTMLFormElement&&t.addEventListener("submit",e=>{e.submitter?.classList.contains("micl-form--dosubmit")||e.preventDefault(),f.validateForm(t,!0)||e.stopImmediatePropagation()},!0)}}})(),x=".micl-textfield-outlined > input,.micl-textfield-filled > input",_=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",S=".micl-textfield-filled > select,.micl-textfield-outlined > select",T=(()=>{const e=e=>{if(!e.parentElement||e instanceof HTMLSelectElement||!e.maxLength)return;const t=e.parentElement.querySelector(".micl-textfield__character-counter");t&&(t.textContent=`${e.value.length}/${e.maxLength}`)};return{initialize:t=>{if(!t.dataset.miclinitialized){if(t.dataset.miclinitialized="1",t.value&&(t.dataset.miclvalue="1"),t instanceof HTMLSelectElement&&t.addEventListener("mousedown",()=>{const e=t.getBoundingClientRect(),n=e.top,i=window.innerHeight-e.bottom;!t.matches(":open")&&t.style.setProperty("--md-sys-select-picker-origin",n>i?"left bottom":"left top")}),t.matches("input[type=time][data-timepicker]")){const e=t.dataset.timepicker?document.getElementById(t.dataset.timepicker):null;e instanceof HTMLDialogElement&&(t.addEventListener("click",t=>{t.preventDefault(),e.showModal()}),t.addEventListener("keydown",t=>{if(t instanceof KeyboardEvent)switch(t.key){case"Enter":case" ":t.preventDefault(),e.showModal()}}))}e(t)}},input:t=>{t.target.matches(`${x},${S},${_}`)&&t.target.dataset.miclinitialized&&!t.target.disabled&&(t.target.value?t.target.dataset.miclvalue="1":delete t.target.dataset.miclvalue,e(t.target))}}})(),C="dialog.micl-dialog.micl-timepicker",M=(()=>{const e=(()=>{try{const e=new Intl.DateTimeFormat(void 0,{hour:"numeric"}).resolvedOptions().hourCycle;return"h11"===e||"h12"===e}catch(e){return!1}})(),t=(e,t)=>e.querySelector(t),n=e=>e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement,i=e=>!!e&&!e.classList.contains("micl-hidden"),r=(e,t)=>{e.classList.toggle("micl-timepicker--selected",t)},l=t=>"hour"===t?{min:e?1:0,max:e?12:23}:{min:0,max:59},a=(e,t,n)=>{e.querySelectorAll("data").forEach(e=>e.classList.remove("micl-timepicker__time--selected"));const i=e.querySelector(`data[data-${t}][value="${n}"]`);let r="";i?(r=window.getComputedStyle(i).getPropertyValue("--micl-angle"),i.classList.add("micl-timepicker__time--selected")):"minute"===t&&(r=`${Math.round(360*parseInt(n,10)/60-90)}deg`),r&&e.style.setProperty("--micl-angle",r)},o=(n,i,r,l,o=!0)=>{let c=parseInt(r||"0",10);if(isNaN(c))return;const s=t(n,`input[name=${i}]`);if(s){if("hour"===i&&l&&e){const e=n.querySelector(".micl-timepicker__am"),t=n.querySelector(".micl-timepicker__pm");c>12?(t&&(t.checked=!0),c-=12):e&&(e.checked=!0)}if(s.value=`${c}`.padStart(2,"0"),o){const e=t(n,".micl-timepicker__dial");if(!e)return;a(e,i,s.value)}}},c=(t,n,i)=>{if("ArrowDown"!==i.key&&"ArrowUp"!==i.key)return;i.preventDefault();const{max:r,min:a}=l(n.name);let c=parseInt(n.value,10)||0;if(c+="ArrowUp"===i.key?1:-1,(c<a||c>r)&&(c=c<a?r:a,"hour"===n.name&&e)){const e=t.querySelector("input[name=period]:not(:checked)");e?.click()}o(t,n.name,`${c}`)};return{initialize:s=>{if(s.dataset.miclinitialized)return;const m=t(s,"form"),d=t(s,".micl-timepicker__inputmode"),p=t(s,".micl-timepicker__dial"),u=[t(s,"input[name=hour]"),t(s,"input[name=minute]")].filter(e=>null!==e);if(!m||u.length<2)return;s.dataset.miclinitialized="1",u.forEach((t,n)=>{(t=>{const{min:n,max:i}=l(t.name);let r;r="hour"===t.name?e?"(0[1-9]|1[0-2])":"(0[0-9]|1[0-9]|2[0-3])":"(0[0-9]|[1-5][0-9])";const a={maxlength:"2",pattern:r,inputmode:"numeric",autocomplete:"off",role:"spinbutton",min:String(n),max:String(i)};for(const e in a)t.setAttribute(e,a[e])})(t),p&&t.toggleAttribute("readonly",i(p)),t.addEventListener("keydown",c.bind(null,s,t)),t.addEventListener("focus",()=>{r(u[0===n?1:0],!1),r(t,!0),p&&(((e,t)=>{e.querySelectorAll("data").forEach(e=>{e.dataset[t]&&(e.textContent=e.dataset[t],e.value=e.dataset[t].padStart(2,"0")),e.classList.contains("micl-timepicker__dial-inner")&&e.classList["hour"===t?"remove":"add"]("micl-hidden")})})(p,t.name),a(p,t.name,t.value))}),t.addEventListener("blur",()=>{i(p)||((e=>{const{max:t,min:n}=l(e.name);let i=parseInt(e.value,10);isNaN(i)&&(i=n),i>t&&(i=t),i<0&&(i=n),e.value=String(i).padStart(2,"0")})(t),r(t,!1))})});const g=s.querySelector(".micl-timepicker__period");if(g&&e&&(["am","pm"].forEach(e=>{let t=document.createElement("input");t.type="radio",t.name="period",t.classList.add(`micl-timepicker__${e}`),t.value=e,t.ariaLabel=e.toUpperCase(),g.appendChild(t)}),g.classList.toggle("micl-hidden",!e)),d?.addEventListener("click",()=>{const e=d.textContent;d.textContent=d.dataset.alticon||e,d.dataset.alticon=e,p?.classList.toggle("micl-hidden"),u.forEach(e=>{e.toggleAttribute("readonly",i(p))}),i(p)&&u[0].focus()}),p){((t,n)=>{let i=e?300:270;for(let t=e?1:0;t<=(e?12:23);t++){const r=document.createElement("data");r.value=`${t}`.padStart(2,"0"),r.textContent=`${t}`,r.dataset.hour=`${t}`,r.style.setProperty("--micl-angle",`${i}deg`),!e&&t>=12?r.classList.add("micl-timepicker__dial-inner"):r.dataset.minute=""+5*t%60,n.appendChild(r),i=(i+30)%360}const r=document.createElement("span");r.classList.add("micl-timepicker__track"),n.appendChild(r)})(0,p);const t=(e,t)=>{const n=document.elementFromPoint(e,t);n&&"DATA"===n.tagName&&o(s,s.querySelector("input[name=hour].micl-timepicker--selected")?"hour":"minute",n.value)};p.addEventListener("pointerdown",e=>{p.classList.add("micl-timepicker__dial--dragging"),t(e.clientX,e.clientY),p.setPointerCapture(e.pointerId)}),p.addEventListener("pointermove",e=>{p.classList.contains("micl-timepicker__dial--dragging")&&t(e.clientX,e.clientY)});const n=e=>{p.classList.remove("micl-timepicker__dial--dragging"),p.releasePointerCapture(e.pointerId)};p.addEventListener("pointerup",n),p.addEventListener("pointercancel",n)}s.addEventListener("beforetoggle",e=>{if("open"===e.oldState)return;let t=document.activeElement;if(t&&(t.dataset.timepicker||t.popoverTargetElement)||(t=document.querySelector(`[data-timepicker="${s.id}"],[popovertarget="${s.id}"]`)),!t)return;s._miclInvoker=t;const i=(n(t)?t.value:t.textContent).split(":");2===i.length&&(o(s,"hour",i[0],!0),o(s,"minute",i[1],!1,!1))}),s.addEventListener("close",()=>{if(!s.returnValue)return;let t=s._miclInvoker;if(t||(t=document.querySelector(`[data-timepicker="${s.id}"],[popovertarget="${s.id}"]`)),!t)return;const i=m.elements;let r=parseInt(i.namedItem("hour")?.value||"0",10);if(isNaN(r))return;e&&"pm"===i.namedItem("period")?.value&&(r+=12);const l=parseInt(i.namedItem("minute")?.value||"0",10);if(isNaN(l))return;const a=`${r}`.padStart(2,"0")+":"+`${l}`.padStart(2,"0");n(t)?t.value=a:t.textContent=a})}}})(),w=(()=>{const e={[n]:{component:i,type:HTMLDialogElement},[r]:{component:l,type:HTMLButtonElement},[a]:{component:o,type:HTMLElement},[c]:{component:s,type:HTMLElement},[m]:{component:d,type:HTMLElement},[p]:{component:u,type:HTMLLabelElement},[S]:{component:T,type:HTMLSelectElement},[g]:{component:h,type:HTMLInputElement},[y]:{component:k,type:HTMLElement},[_]:{component:T,type:HTMLTextAreaElement},[x]:{component:T,type:HTMLInputElement},[C]:{component:M,type:HTMLDialogElement}},t=Object.keys(e).join(","),f=t=>{for(const[n,{component:i,type:r}]of Object.entries(e))if(t.matches(n)&&t instanceof r&&"function"==typeof i.initialize)return void i.initialize(t)},v=e=>{e.querySelectorAll(t).forEach(f),e.querySelectorAll('[class*="micl-"]').forEach(e=>{"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();let n=e.getBoundingClientRect();e.style.setProperty("--micl-x",t.clientX-n.left+"px"),e.style.setProperty("--micl-y",t.clientY-n.top+"px")})})},E=t=>{for(const[n,{component:i,type:r}]of Object.entries(e))if(t.matches(n)&&t instanceof r&&"function"==typeof i.cleanup)return void i.cleanup(t)},L=e=>{e.querySelectorAll(t).forEach(E)},b=t=>{for(const[n,{component:i,type:r}]of Object.entries(e))if(t.target.matches(n)&&t.target instanceof r&&["input","keydown"].includes(t.type)&&"function"==typeof i[t.type])return void i[t.type]?.(t)},w=()=>{new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(t)&&f(e),e.querySelectorAll(t).forEach(f))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(t)&&E(e),L(e))}))})}).observe(document.body,{childList:!0,subtree:!0}),v(document),document.addEventListener("input",b),document.addEventListener("keydown",b)},A=()=>{document.removeEventListener("DOMContentLoaded",A),w()};return"loading"!==document.readyState?w():document.addEventListener("DOMContentLoaded",A),{initialize:()=>v(document),cleanup:()=>L(document)}})()})(),t})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={d:(t,n)=>{for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};return(()=>{e.r(t),e.d(t,{default:()=>Y});const n="dialog.micl-bottomsheet",i=(()=>{const e=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10),n=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10),i=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=n);return t<1&&(t=Math.min(e.getBoundingClientRect().height,n),e.dataset.miclfitheight=`${t}`),[...new Set(i.concat([t]).sort())]},t=(t,n)=>{let i=t.getBoundingClientRect().height,a=e(t);return a.filter(e=>e>i+4)[0]||a[n?a.length-1:0]},i=(e,t)=>{t<1?(delete e.dataset.miclfitheight,e.style.removeProperty("--md-sys-bottomsheet-height"),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-sys-bottomsheet-height",`${t}px`)};return{initialize:a=>{if(!a.matches(n)||a.dataset.miclinitialized)return;a.dataset.miclinitialized="1";const r=a.querySelector(".micl-bottomsheet__headline");if(!r)return;const l=r.querySelector(".micl-bottomsheet__draghandle");l?.addEventListener("click",()=>{i(a,t(a,!1))});let o,c,s=!1,d=!1;function m(e){const t=e.clientY;s&&Math.abs(o-t)>4&&(s=!1,d=!0,a.classList.add("micl-bottomsheet--resizing")),d&&i(a,c+o-t)}function p(n){s=!1,a.classList.remove("micl-bottomsheet--resizing"),d&&(d=!1,n.clientY<o?i(a,t(a,!0)):a.getBoundingClientRect().height<48?i(a,0):i(a,(t=>{let n=t.getBoundingClientRect().height,i=e(t),a=i.filter(e=>e<n-4);return a[a.length-1]||i[0]})(a)),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",p))}r.addEventListener("mousedown",e=>{e.eventPhase===Event.AT_TARGET&&(s=!0,e.preventDefault(),o=e.clientY,c=a.getBoundingClientRect().height,document.addEventListener("mousemove",m),document.addEventListener("mouseup",p))})},cleanup:e=>{e.matches(n)&&(e.classList.remove("micl-bottomsheet--resizing"),delete e.dataset.miclinitialized,delete e.dataset.miclfitheight)}}})(),a="button[popovertarget],button.micl-button--toggle",r=(()=>{const e=e=>{e.target&&e.target instanceof HTMLButtonElement&&(e.target.popoverTargetElement instanceof HTMLDialogElement&&(e.target.popoverTargetElement.open?e.target.popoverTargetElement.close():e.target.popoverTargetElement.showModal()),e.target.classList.contains("micl-button--toggle")&&(e.target.classList.add("micl-button--toggled"),e.target.classList.toggle("micl-button--selected"),e.target.dataset.miclalt&&([e.target.textContent,e.target.dataset.miclalt]=[e.target.dataset.miclalt,e.target.textContent])))};return{initialize:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&!t.dataset.miclinitialized&&(t.dataset.miclinitialized="1",(t.popoverTargetElement instanceof HTMLDialogElement&&!t.popoverTargetElement.hasAttribute("popover")||t.classList.contains("micl-button--toggle"))&&t.addEventListener("click",e))},cleanup:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&(document.removeEventListener("click",e),delete t.dataset.miclinitialized)}}})(),l=".micl-checkbox-group",o=(()=>{const e=e=>{const t=e.querySelector(".micl-checkbox__parent");return t?.closest(l)===e?t:null},t=n=>{const i=e(n);if(!i)return!1;let a=0,r=0;return n.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(e=>{if(e!==i){const i=e.closest(l);i===n?(a++,e.checked&&!e.indeterminate&&r++):e.classList.contains("micl-checkbox__parent")&&i?.parentElement?.closest(l)===n&&(a++,t(i)&&r++)}}),0===r?(i.checked=!1,i.indeterminate=!1):r===a?(i.checked=!0,i.indeterminate=!1):(i.checked=!0,i.indeterminate=!0),r===a},n=(e,t)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(i=>{const a=i.closest(l);a===e?i.checked=t:i.classList.contains("micl-checkbox__parent")&&a?.parentElement?.closest(l)===e&&(i.checked=t,n(a,t))})},i=(i,a)=>{const r=e(i);if(!r)return;a===r&&n(i,a.checked);let o,c=i;do{o=c,c=c.parentElement?.closest(l)}while(c);t(o)};return{initialize:e=>{e.matches(l)&&!e.dataset.miclinitialized&&(e.dataset.miclinitialized="1",e.addEventListener("change",t=>{const n=t.target;n.classList.contains("micl-checkbox")&&(t.stopPropagation(),i(e,n))}),i(e,null))}}})(),c="dialog.micl-dialog.micl-datepicker",s=new WeakMap,d=(new Intl.DateTimeFormat).resolvedOptions().locale,m=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement,p=(()=>{try{const e=new Intl.Locale(d).getWeekInfo?.();if(e)return 7===e.firstDay?0:e.firstDay}catch{}return/US|CA|MX/i.test(d)?0:1})(),u=e=>{const t=new Date(e);return t.setHours(0,0,0,0),t},g=e=>!isNaN(e.getTime()),h=(e,t)=>{if(e)if(e.firstElementChild){let n=e.firstChild;for(;n;){if(n.nodeType===Node.TEXT_NODE)return void(n.nodeValue=t);n=n.nextSibling}e.appendChild(document.createTextNode(t))}else e.textContent=t},f=(e,t)=>{const n=[],i=new Date(e,t,1).getDay(),a=new Date(e,t,1-(i-p+7)%7),r=e=>e.toString().padStart(2,"0");for(let e=0;e<42;e++)n.push({date:new Date(a),val:`${a.getFullYear()}-${r(a.getMonth()+1)}-${r(a.getDate())}`,isCurrentMonth:a.getMonth()===t}),a.setDate(a.getDate()+1);return n},y=(e,t,n,i=!1)=>{if(i){const n=document.createDocumentFragment(),i=new Date,a=i.getDay()-p;i.setDate(i.getDate()-a);for(let e=0;e<7;e++){const t=document.createElement("span");t.style.gridArea=`1 / ${e+1}`,t.textContent=i.toLocaleDateString(d,{weekday:"narrow"}),t.title=i.toLocaleDateString(d,{weekday:"long"}),n.appendChild(t),i.setDate(i.getDate()+1)}t.forEach((e,t)=>{const i=document.createElement("time"),a=Math.floor(t/7)+2,r=t%7+1;i.style.gridArea=`${a} / ${r}`,n.appendChild(i)}),e.appendChild(n)}const a=u(new Date);e.querySelectorAll("time").forEach((e,i)=>{const r=t[i];e.dateTime=r.val,e.textContent=r.date.getDate().toString();const l=r.date.getTime()===n.selected.getTime(),o=r.date.getTime()===a.getTime();e.className="",r.isCurrentMonth||e.classList.add("micl-datepicker__outside"),l&&e.classList.add("micl-datepicker__selected"),o&&e.classList.add("micl-datepicker__today")})},v=(e,t,n=0)=>{const i=e.querySelector(".micl-dialog__content"),a=i?.querySelector(".micl-datepicker__calendars");if(!a)return;const r="micl-startleft",l="micl-startright",o="micl-moveleft",c="micl-moveright";if(a.classList.remove(o,c,r,l),a.offsetWidth,0!==n){const e=a.querySelector(".micl-datepicker__calendar");if(!e)return;const i=document.createElement("div"),s=document.createElement("div");i.classList.add("micl-datepicker__calendar"),s.classList.add("micl-datepicker__calendar-inner");const d=f(t.viewDate.getFullYear(),t.viewDate.getMonth());y(s,d,t,!0);const m=n>0,p=m?r:l,u=m?o:c;i.appendChild(s),m?a.appendChild(i):a.prepend(i),a.classList.add("micl-no-transition",p),a.offsetWidth,requestAnimationFrame(()=>{a.classList.remove("micl-no-transition",p),a.classList.add(u)});const g=()=>{a.removeEventListener("transitionend",g),setTimeout(()=>{a.classList.remove(u),e.parentElement===a&&e.remove(),a.classList.add("micl-no-transition",r),a.offsetWidth,a.classList.remove("micl-no-transition",r)},0)};a.addEventListener("transitionend",g)}else{let e=a.querySelector(".micl-datepicker__calendar");e||(e=document.createElement("div"),e.classList.add("micl-datepicker__calendar"),e=a.appendChild(e));let n=e.querySelector(".micl-datepicker__calendar-inner");n||(n=document.createElement("div"),n.classList.add("micl-datepicker__calendar-inner"),e.appendChild(n));const i=f(t.viewDate.getFullYear(),t.viewDate.getMonth());y(n,i,t,0===n.querySelectorAll("time").length)}const s=i?.querySelector(".micl-datepicker__input input");if(s){const e=e=>e.toString().padStart(2,"0");s.value=`${t.selected.getFullYear()}-${e(t.selected.getMonth()+1)}-${e(t.selected.getDate())}`}h(e.querySelector("h1, h2, h3, h4, h5, h6, .micl-heading"),t.selected.toLocaleDateString(d,{weekday:"short",day:"numeric",month:"short"})),h(e.querySelector(".micl-datepicker__month"),t.viewDate.toLocaleDateString(d,{month:"short"})),h(e.querySelector(".micl-datepicker__year"),t.viewDate.toLocaleDateString(d,e.classList.contains("micl-dialog--docked")?{year:"numeric"}:{month:"long",year:"numeric"})),["months","years"].forEach(n=>{const i="months"===n?t.viewDate.getMonth():t.viewDate.getFullYear(),a=e.querySelector(`.micl-datepicker__${n} input[value="${i}"]`);a&&(a.checked=!0)})},E=(e,t)=>{"months"!==t&&"years"!==t||e.querySelector(`.micl-datepicker__${t}.micl-datepicker__view-hidden`)||(t="calendars"),["calendars","input","month-selector","year-selector"].forEach(n=>{let i="input"===t;"calendars"!==n&&"input"!==n||(i=t!==n),e.querySelector(`.micl-datepicker__${n}`)?.classList.toggle("micl-datepicker__view-hidden",i)});const n=e.querySelector(".micl-dialog__content");if(!n)return;const i=parseInt(window.getComputedStyle(n).getPropertyValue("max-block-size"),10);[".micl-datepicker__months",".micl-datepicker__years"].forEach(e=>{const a=n.querySelector(e);if(!a)return;const r=a.querySelector("input:checked");let l=!1;if(r&&e.substring(18)===t){const e=window.getComputedStyle(a).getPropertyValue("transition-duration"),t=parseFloat(e)*(e.includes("ms")?1:1e3),o=a.scrollHeight-i,c=(i-48)/2;if(r.offsetTop>c){let e=r.offsetTop-c-24;e>o&&(e=o);const i=performance.now(),s=a=>{const r=Math.min((a-i)/t,1);n.scrollTop=e*r,r<1&&requestAnimationFrame(s)};a.classList.remove("micl-datepicker__view-hidden"),requestAnimationFrame(s),l=null,a.addEventListener("transitionend",function t(i){"height"!==i.propertyName&&"block-size"!==i.propertyName||(n.scrollTop=e,a.removeEventListener("transitionend",t))})}}else l=!0;null!==l&&a.classList.toggle("micl-datepicker__view-hidden",l)})},L=(e,t,n)=>{const i=s.get(e);if(!i)return;const a=new Date(i.viewDate);"month"===n?a.setMonth(a.getMonth()+t):a.setFullYear(a.getFullYear()+t),i.min&&a<i.min||i.max&&a>i.max||(i.viewDate=a,v(e,i,"month"===n?t:0))},k={keydown:e=>{if(!(e instanceof KeyboardEvent&&e.target instanceof Element))return;const t=e.target.closest(c);if(t)switch(e.key){case"Enter":case" ":e.target instanceof HTMLInputElement&&"date"===e.target.type&&e.preventDefault();break;case"M":case"Y":E(t,"M"===e.key?"months":"years");break;case"PageUp":case"PageDown":L(t,"PageUp"===e.key?1:-1,e.shiftKey?"year":"month")}},initialize:e=>{if(e.dataset.miclinitialized)return;const t=e.querySelector("form"),n=e.querySelector(".micl-dialog__content");t&&n&&(e.dataset.miclinitialized="1",e.addEventListener("click",t=>{const n=t.target,i=n.closest("button");if(i){const t=i.parentElement?.classList.contains("micl-datepicker__month-selector"),n=i.classList.contains("micl-datepicker__next"),a=i.classList.contains("micl-datepicker__previous");if(n||a)return void L(e,n?1:-1,t?"month":"year")}n.closest(".micl-datepicker__month")&&E(e,"months"),n.closest(".micl-datepicker__year")&&E(e,"years");const a=n.closest(".micl-datepicker__inputmode");if(a){const t=a.textContent;a.textContent=a.dataset.alticon||t,a.dataset.alticon=t;const n=!!e.querySelector(".micl-datepicker__input.micl-datepicker__view-hidden");E(e,n?"input":"calendars")}const r=n.closest("time");if(r&&r.dateTime&&((e,t)=>{const n=s.get(e);if(!n)return;const i=t.split("-").map(Number);n.selected=new Date(i[0],i[1]-1,i[2]),n.viewDate=new Date(n.selected),v(e,n)})(e,r.dateTime),n instanceof HTMLInputElement&&("miclmonth"===n.name||"miclyear"===n.name)){const t=s.get(e);if(t){const i=parseInt(n.value,10);"miclmonth"===n.name?t.viewDate.setMonth(i):t.viewDate.setFullYear(i),v(e,t),E(e,"calendars")}}}),e.addEventListener("beforetoggle",t=>{if("open"!==t.newState)return;let n=document.activeElement;if(m(n)&&(n.dataset.datepicker||n.getAttribute("popovertarget"))||(n=document.querySelector(`[data-datepicker="${e.id}"],[popovertarget="${e.id}"]`)),!m(n))return;let i=new Date,a=null,r=null;if(n instanceof HTMLInputElement)"date"===n.type&&n.valueAsDate?i=n.valueAsDate:n.value&&(i=new Date(n.value)),n.min&&(a=new Date(n.min)),n.max&&(r=new Date(n.max));else{const e=new Date(n.value||n.textContent);g(e)&&(i=e)}g(i)||(i=new Date),i=u(i),s.set(e,{invoker:n,selected:i,viewDate:new Date(i),min:a,max:r}),((e,t,n)=>{["months","years"].forEach(i=>{const a=e.querySelector(`.micl-datepicker__${i}`);if(a){a.innerHTML="";const e=document.createDocumentFragment();if("months"===i){const t=new Intl.DateTimeFormat(void 0,{month:"long"});for(let n=0;n<12;n++){const i=document.createElement("label");i.innerHTML=`<span class="material-symbols-outlined">check</span><input type="radio" name="miclmonth" value="${n}"> ${t.format(new Date(2e3,n,1))}`,e.appendChild(i)}}else for(let i=t;i<=n;i++){const t=document.createElement("label");t.innerHTML=`<input type="radio" name="miclyear" value="${i}"> ${i}`,e.appendChild(t)}const r=document.createElement("div");r.classList.add(`micl-datepicker__${i}-inner`),a.appendChild(r).appendChild(e)}})})(e,a?a.getFullYear():1900,r?r.getFullYear():2099),E(e,"calendars"),v(e,s.get(e))}),e.addEventListener("close",()=>{const t=s.get(e);if(!t||!t.invoker||""===e.returnValue)return;const n=e=>e.toString().padStart(2,"0"),i=`${t.selected.getFullYear()}-${n(t.selected.getMonth()+1)}-${n(t.selected.getDate())}`;t.invoker.value=i,t.invoker instanceof HTMLInputElement?(t.invoker.dispatchEvent(new Event("change",{bubbles:!0})),t.invoker.dispatchEvent(new Event("input",{bubbles:!0}))):t.invoker.textContent=t.selected.toLocaleDateString()}))}},_=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",b=(()=>{const e=e=>!!e&&e.classList.contains("micl-list-item--disabled");return{keydown:t=>{if(!(t instanceof KeyboardEvent&&t.target instanceof Element&&t.target.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const n=t.target.parentElement;if(!n)return;let i=[];if(n instanceof HTMLDetailsElement?i=Array.from(n.parentElement?.children||[]).map(t=>{let n=t.querySelector(":scope > summary");return e(n)?null:n}).filter(e=>!!e):n instanceof HTMLUListElement&&(i=Array.from(n.children).map(t=>t instanceof HTMLLIElement&&!e(t)?t:null).filter(e=>!!e)),0===i.length)return;let a=i.findIndex(e=>(e=>!!e&&e.matches(":has(input[type=checkbox]:checked)"))(e)),r=i.findIndex(e=>0===e.tabIndex),l=r;switch(t.key){case"ArrowDown":l=(r+1)%i.length,t.preventDefault();break;case"ArrowUp":l=(r-1+i.length)%i.length,t.preventDefault();break;case"Tab":-1===a?0!==r&&(i[r].tabIndex=-1,i[0].tabIndex=0):a!==r&&(i[r].tabIndex=-1,i[a].tabIndex=0);break;case"Enter":case" ":const e=t.target.querySelector("input[type=checkbox]");e instanceof HTMLInputElement&&(e.checked=!e.checked)}if(l!==r){i[r].tabIndex=-1,i[l].tabIndex=0,i[l].focus();const e=i[l].querySelector(":scope > button");e?.dispatchEvent(new MouseEvent("mouseenter",{bubbles:!0,cancelable:!0,view:window}))}}}})(),S=".micl-menu[popover]",x=(()=>{const e=(e,t)=>{const n=e.getBoundingClientRect(),i=t.getBoundingClientRect();return(n.x>i.x?"right ":"left ")+(n.y>i.y?"bottom":"top")};return{initialize:t=>{if(!t.matches(".micl-menu[popover]")||t.dataset.miclinitialized)return;t.dataset.miclinitialized="1";const n=document.querySelector(`[popovertarget="${t.id}"]`);n&&t.addEventListener("beforetoggle",i=>{"open"===i.oldState&&(t.style.transformOrigin=e(n,t))}),n&&t.addEventListener("toggle",i=>{"closed"===i.oldState&&(t.style.transformOrigin=e(n,t))}),t.querySelectorAll(":scope > ul.micl-list > li > button[popovertarget]").forEach(e=>{if(e.popoverTargetElement?.matches(".micl-menu[popover]")){let t,n=`--${e.popoverTargetElement.id}`;e.popoverTargetElement instanceof HTMLElement&&(e.style.setProperty("anchor-name",n),e.popoverTargetElement.style.insetBlockStart=`anchor(${n} start)`,e.popoverTargetElement.style.insetInlineStart=`anchor(${n} end)`),e.addEventListener("mouseenter",()=>{e.popoverTargetElement instanceof HTMLElement&&e.popoverTargetElement.showPopover()}),e.addEventListener("mouseleave",()=>{t=setTimeout(()=>{e.popoverTargetElement instanceof HTMLElement&&!e.popoverTargetElement.matches(":hover")&&e.popoverTargetElement.hidePopover()},100)}),e.popoverTargetElement.addEventListener("mouseenter",()=>{clearTimeout(t)}),e.popoverTargetElement.addEventListener("mouseleave",()=>{e.popoverTargetElement instanceof HTMLElement&&e.popoverTargetElement.hidePopover()})}})}}})(),w=".micl-navigationrail__item[for]:not(.micl-navigationrail__item--disabled)",T={keydown:e=>{if(!(e instanceof KeyboardEvent&&e.target instanceof HTMLLabelElement&&e.target.matches(w)))return;const t=document.getElementById(e.target.htmlFor);if(t)switch(e.key){case"Enter":case" ":e.preventDefault(),t.checked||(t.checked=!t.checked)}}},C="input[type=range].micl-slider-xs,input[type=range].micl-slider-s,input[type=range].micl-slider-m,input[type=range].micl-slider-l,input[type=range].micl-slider-xl",M=(()=>{const e=String.fromCharCode(8226),t=String.fromCharCode(8201),n=e=>e.parentElement?.classList.contains("micl-slider__container")?e.parentElement:null,i=(e,t)=>{e.dataset.miclsliderticks=t},a=e=>{let t=JSON.stringify(e.value+""),i=n(e);i&&(i.style.setProperty("--md-sys-slider-value",e.value),i.style.setProperty("--md-sys-slider-tip",t)),e.style.setProperty("--md-sys-slider-value",e.value),e.style.setProperty("--md-sys-slider-tip",t)};return{initialize:r=>{if(!r.matches(C))return;(e=>{let t=e.max||"100";n(e)?.style.setProperty("--md-sys-slider-max",t),e.style.setProperty("--md-sys-slider-max",t)})(r),(e=>{let t=e.min||"0";n(e)?.style.setProperty("--md-sys-slider-min",t),e.style.setProperty("--md-sys-slider-min",t)})(r),a(r),(e=>{let t=n(e);if(t){const n=window.getComputedStyle(e);["--md-sys-slider-handle-height","--md-sys-slider-track-height"].forEach(e=>{t.style.setProperty(e,n.getPropertyValue(e))})}})(r);const l=parseFloat(r.max),o=parseFloat(r.min),c=r.getBoundingClientRect(),s=((e,t,n)=>{const i=[];return e.list&&t>n&&e.list.querySelectorAll("option[value]").forEach(e=>{let a=parseFloat(e.value);!isNaN(a)&&a>=n&&a<=t&&i.push(a)}),i})(r,l,o).sort((e,t)=>e-t).map(e=>Math.round(100*(e-o)/(l-o)));if(s.length>0){const n=document.createElement("canvas"),a=n.getContext("2d");if(a){a.font=window.getComputedStyle(r).getPropertyValue("font");let n=a.measureText(t).width,l=a.measureText(e).width,o=c.width-10,d=0,m="";s.forEach(i=>{let a=o*i/100,r=Math.round((a-d)/n)-1;for(let e=0;e<r;e++)m+=t,d+=n;m+=e,d+=l}),i(r,m)}n.remove()}else i(r,e)},input:e=>{e.target.matches(C)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&a(e.target)}}})(),D=(()=>{const e=e=>"willValidate"in e,t=t=>{const n=t.target;e(n)&&n.setCustomValidity("")},n=e=>{const n=e.dataset.miclvalidateMessage||"";if(n&&e.matches("[data-miclvalidate-checkboxes-name]")){const i=e.dataset.miclvalidateCheckboxesName||"",a=e.dataset.miclvalidateCheckboxesCountEqual||"",r=e.dataset.miclvalidateCheckboxesCountMax||"",l=e.dataset.miclvalidateCheckboxesCountMin||"";if(i&&(a||r||l)){const o=e.querySelectorAll(`input[type="checkbox"][name="${i}"]:checked`).length,c=parseInt(a,10),s=parseInt(r,10),d=parseInt(l,10);let m=!isNaN(c)&&o!=c||!isNaN(s)&&o>s||!isNaN(d)&&o<d;e.setCustomValidity(m?n:"");const p=e.querySelector(`input[type="checkbox"][name="${i}"]`);p&&(p.setCustomValidity(m?n:""),m?p.addEventListener("change",t):p.removeEventListener("change",t))}}},i=(t,i)=>{let a=!1;return t.querySelectorAll("fieldset").forEach(n),Array.from(t.elements).forEach(t=>{if(e(t)&&t.willValidate){t.checkValidity()||(a=!0);let n=(t=>{if(!t.parentElement||!e(t))return!1;let n=!1;return t instanceof HTMLInputElement&&"checkbox"===t.type&&t.classList.contains("micl-checkbox")?n=(e=>(e.classList.toggle("micl-checkbox--error",!!e.validationMessage),!1))(t):(t.parentElement.classList.contains("micl-textfield-outlined")||t.parentElement.classList.contains("micl-textfield-filled"))&&(n=((e,t)=>{e.classList.toggle("micl-textfield--error",!!t);const n=e.querySelector(".micl-textfield__supporting-text");return n&&(t?(n.dataset.micltext||(n.dataset.micltext=n.textContent),n.textContent=t):"micltext"in n.dataset&&(n.textContent=n.dataset.micltext||"")),!!t&&!!n})(t.parentElement,t.validationMessage)),n})(t);!n&&i&&t.reportValidity()}}),!a};return{validateFieldSet:(e,t)=>(n(e),i(e,t)),validateForm:(e,t)=>i(e,t)}})(),q=".micl-stepper",A=".micl-stepper__action-back,.micl-stepper__action-next",$=".micl-stepper__header button[role=tab][aria-controls]",I="micl-stepper__step",H="."+I,P=(()=>{const e=e=>e.querySelector(`${H}[aria-current=step]`)||n(e,e.querySelector(H)),t=(e,t)=>Array.from(e.querySelectorAll(H)).indexOf(t)+1,n=(e,t)=>{if(!t)return null;let n=0;e.querySelectorAll(H).forEach((e,i)=>{e.setAttribute("aria-current",e===t?"step":"false"),e===t&&(n=i)});const i=e.querySelectorAll($).item(n);return e.querySelectorAll($).forEach((e,t)=>{e.setAttribute("aria-selected",e===i?"true":"false")}),r(e,t),t},i=e=>{const t=e.currentTarget;"transform"===e.propertyName&&t&&(t.classList.remove("micl-stepper__step--fromselected","micl-stepper__step--toselected"),t.removeEventListener("transitionend",i))},a=e=>e.classList.contains("micl-stepper__action-back"),r=(e,n)=>{((e,t)=>{Array.from(e.querySelectorAll(A)).forEach(e=>{const n=a(e)?"previousElementSibling":"nextElementSibling",i=t[n]?.classList.contains(I);e.classList.toggle("micl-hidden",!i)})})(e,n),((e,n)=>{const i=t(e,n);e.querySelectorAll("[data-step]").forEach(e=>{const t=e.dataset.step!=`${i}`;e.classList.toggle("micl-hidden",t)})})(e,n),((e,n)=>{const i=t(e,n),a=e.querySelectorAll(H).length,r=!e.classList.contains("micl-stepper--nonlinear"),l=(t,n)=>{e.querySelectorAll(t).forEach(e=>{e.textContent=n})};l(".micl-stepper__progress-current",`${i}`),l(".micl-stepper__progress-total",`${a}`),e.querySelectorAll(".micl-stepper__progress-dots").forEach(e=>{const t=document.createDocumentFragment();e.innerHTML="";for(let e=1;e<=a;e++){let n=document.createElement("span");n.classList.add("micl-stepper__progress-dot"),(r&&e<=i||!r&&e===i)&&n.classList.add("micl-stepper__progress--done"),t.appendChild(n)}e.appendChild(t)}),e.querySelectorAll($).forEach((e,t)=>{e.classList.toggle("micl-stepper__progress--done",r?t+1<=i:t+1===i)})})(e,n)};return{initialize:t=>{if(!t.matches(q)||t.dataset.miclinitialized)return;t.dataset.miclinitialized="1";const l=e(t),o=t.querySelector(".micl-stepper__header");l&&(r(t,l),o?.querySelectorAll("button[role=tab][aria-controls]").forEach(e=>{e.addEventListener("click",()=>{if("ariaControlsElements"in Element.prototype&&e.ariaControlsElements)n(t,e.ariaControlsElements[0]);else{const i=e.getAttribute("aria-controls");i&&n(t,document.getElementById(i))}})})),Array.from(t.querySelectorAll(A)).forEach(r=>{r.addEventListener("click",function(r){const l=a(this),o=e(t);if(!o||!l&&o instanceof HTMLFieldSetElement&&!D.validateFieldSet(o,!0))return void(l||r.stopImmediatePropagation());const c=o[l?"previousElementSibling":"nextElementSibling"];c?.classList.contains(I)&&((e,t,a)=>{t.addEventListener("transitionend",i),t.classList.add("micl-stepper__step--fromselected"),t.offsetHeight,a.addEventListener("transitionend",i),a.classList.add("micl-stepper__step--toselected"),a.offsetHeight,n(e,a)})(t,o,c)},!0)}),t instanceof HTMLFormElement&&t.addEventListener("submit",e=>{e.submitter?.classList.contains("micl-form--dosubmit")||e.preventDefault(),D.validateForm(t,!0)||e.stopImmediatePropagation()},!0)}}})(),z=".micl-textfield-outlined > input,.micl-textfield-filled > input",N=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",F=".micl-textfield-filled > select,.micl-textfield-outlined > select",B=(()=>{const e=e=>{if(!e.parentElement||e instanceof HTMLSelectElement||!e.maxLength)return;const t=e.parentElement.querySelector(".micl-textfield__character-counter");t&&(t.textContent=`${e.value.length}/${e.maxLength}`)};return{initialize:t=>{if(!t.dataset.miclinitialized){if(t.dataset.miclinitialized="1",t.value&&(t.dataset.miclvalue="1"),t instanceof HTMLSelectElement&&t.addEventListener("mousedown",()=>{const e=t.getBoundingClientRect(),n=e.top,i=window.innerHeight-e.bottom;!t.matches(":open")&&t.style.setProperty("--md-sys-select-picker-origin",n>i?"left bottom":"left top")}),t.matches("input[type=time][data-timepicker],input[type=date][data-datepicker]")){const e=t.dataset.timepicker?document.getElementById(t.dataset.timepicker):t.dataset.datepicker?document.getElementById(t.dataset.datepicker):null;e instanceof HTMLDialogElement&&(t.addEventListener("click",t=>{t.preventDefault(),e.showModal()}),t.addEventListener("keydown",t=>{if(t instanceof KeyboardEvent)switch(t.key){case"Enter":case" ":t.preventDefault(),e.showModal()}}))}e(t)}},input:t=>{t.target.matches(`${z},${F},${N}`)&&t.target.dataset.miclinitialized&&!t.target.disabled&&(t.target.value?t.target.dataset.miclvalue="1":delete t.target.dataset.miclvalue,e(t.target))}}})(),O="dialog.micl-dialog.micl-timepicker",V=(()=>{const e=(()=>{try{const e=new Intl.DateTimeFormat(void 0,{hour:"numeric"}).resolvedOptions().hourCycle;return"h11"===e||"h12"===e}catch(e){return!1}})(),t=(e,t)=>e.querySelector(t),n=e=>e instanceof HTMLInputElement||e instanceof HTMLButtonElement,i=e=>!!e&&!e.classList.contains("micl-hidden"),a=(e,t)=>{e.classList.toggle("micl-timepicker--selected",t)},r=t=>"hour"===t?{min:e?1:0,max:e?12:23}:{min:0,max:59},l=(e,t,n)=>{e.querySelectorAll("data").forEach(e=>e.classList.remove("micl-timepicker__time--selected"));const i=e.querySelector(`data[data-${t}][value="${n}"]`);let a="";i?(a=window.getComputedStyle(i).getPropertyValue("--micl-angle"),i.classList.add("micl-timepicker__time--selected")):"minute"===t&&(a=`${Math.round(360*parseInt(n,10)/60-90)}deg`),a&&e.style.setProperty("--micl-angle",a)},o=(n,i,a,r,o=!0)=>{let c=parseInt(a||"0",10);if(isNaN(c))return;const s=t(n,`input[name=${i}]`);if(s){if("hour"===i&&r&&e){const e=n.querySelector(".micl-timepicker__am"),t=n.querySelector(".micl-timepicker__pm");c>12?(t&&(t.checked=!0),c-=12):e&&(e.checked=!0)}if(s.value=`${c}`.padStart(2,"0"),o){const e=t(n,".micl-timepicker__dial");if(!e)return;l(e,i,s.value)}}},c=(t,n,i)=>{if("ArrowDown"!==i.key&&"ArrowUp"!==i.key)return;i.preventDefault();const{max:a,min:l}=r(n.name);let c=parseInt(n.value,10)||0;if(c+="ArrowUp"===i.key?1:-1,(c<l||c>a)&&(c=c<l?a:l,"hour"===n.name&&e)){const e=t.querySelector("input[name=period]:not(:checked)");e?.click()}o(t,n.name,`${c}`)};return{initialize:s=>{if(s.dataset.miclinitialized)return;const d=t(s,"form"),m=t(s,".micl-timepicker__inputmode"),p=t(s,".micl-timepicker__dial"),u=[t(s,"input[name=hour]"),t(s,"input[name=minute]")].filter(e=>null!==e);if(!d||u.length<2)return;s.dataset.miclinitialized="1",u.forEach((t,n)=>{(t=>{const{min:n,max:i}=r(t.name);let a;a="hour"===t.name?e?"(0[1-9]|1[0-2])":"(0[0-9]|1[0-9]|2[0-3])":"(0[0-9]|[1-5][0-9])";const l={maxlength:"2",pattern:a,inputmode:"numeric",autocomplete:"off",role:"spinbutton",min:String(n),max:String(i)};for(const e in l)t.setAttribute(e,l[e])})(t),p&&t.toggleAttribute("readonly",i(p)),t.addEventListener("keydown",c.bind(null,s,t)),t.addEventListener("focus",()=>{a(u[0===n?1:0],!1),a(t,!0),p&&(((e,t)=>{e.querySelectorAll("data").forEach(e=>{e.dataset[t]&&(e.textContent=e.dataset[t],e.value=e.dataset[t].padStart(2,"0")),e.classList.contains("micl-timepicker__dial-inner")&&e.classList["hour"===t?"remove":"add"]("micl-hidden")})})(p,t.name),l(p,t.name,t.value))}),t.addEventListener("blur",()=>{i(p)||((e=>{const{max:t,min:n}=r(e.name);let i=parseInt(e.value,10);isNaN(i)&&(i=n),i>t&&(i=t),i<0&&(i=n),e.value=String(i).padStart(2,"0")})(t),a(t,!1))})});const g=s.querySelector(".micl-timepicker__period");if(g&&e&&(["am","pm"].forEach(e=>{let t=document.createElement("input");t.type="radio",t.name="period",t.classList.add(`micl-timepicker__${e}`),t.value=e,t.ariaLabel=e.toUpperCase(),g.appendChild(t)}),g.classList.toggle("micl-hidden",!e)),m?.addEventListener("click",()=>{const e=m.textContent;m.textContent=m.dataset.alticon||e,m.dataset.alticon=e,p?.classList.toggle("micl-hidden"),u.forEach(e=>{e.toggleAttribute("readonly",i(p))}),i(p)&&u[0].focus()}),p){((t,n)=>{let i=e?300:270;for(let t=e?1:0;t<=(e?12:23);t++){const a=document.createElement("data");a.value=`${t}`.padStart(2,"0"),a.textContent=`${t}`,a.dataset.hour=`${t}`,a.style.setProperty("--micl-angle",`${i}deg`),!e&&t>=12?a.classList.add("micl-timepicker__dial-inner"):a.dataset.minute=""+5*t%60,n.appendChild(a),i=(i+30)%360}const a=document.createElement("span");a.classList.add("micl-timepicker__track"),n.appendChild(a)})(0,p);const t=(e,t)=>{const n=document.elementFromPoint(e,t);n&&"DATA"===n.tagName&&o(s,s.querySelector("input[name=hour].micl-timepicker--selected")?"hour":"minute",n.value)};p.addEventListener("pointerdown",e=>{p.classList.add("micl-timepicker__dial--dragging"),t(e.clientX,e.clientY),p.setPointerCapture(e.pointerId)}),p.addEventListener("pointermove",e=>{p.classList.contains("micl-timepicker__dial--dragging")&&t(e.clientX,e.clientY)});const n=e=>{p.classList.remove("micl-timepicker__dial--dragging"),p.releasePointerCapture(e.pointerId)};p.addEventListener("pointerup",n),p.addEventListener("pointercancel",n)}s.addEventListener("beforetoggle",e=>{if("open"===e.oldState)return;let t=document.activeElement;if(n(t)&&(t.dataset.timepicker||t.popoverTargetElement)||(t=document.querySelector(`[data-timepicker="${s.id}"],[popovertarget="${s.id}"]`)),!n(t))return;s._miclInvoker=t;const i=(t.value||t.textContent).split(":");2===i.length&&(o(s,"hour",i[0],!0),o(s,"minute",i[1],!1,!1))}),s.addEventListener("close",()=>{if(!s.returnValue)return;let t=s._miclInvoker;if(t||(t=document.querySelector(`[data-timepicker="${s.id}"],[popovertarget="${s.id}"]`)),!n(t))return;const i=d.elements;let a=parseInt(i.namedItem("hour")?.value||"0",10);if(isNaN(a))return;e&&"pm"===i.namedItem("period")?.value&&(a+=12);const r=parseInt(i.namedItem("minute")?.value||"0",10);if(isNaN(r))return;const l=`${a}`.padStart(2,"0")+":"+`${r}`.padStart(2,"0");t.value=l,t instanceof HTMLInputElement?(t.dispatchEvent(new Event("change",{bubbles:!0})),t.dispatchEvent(new Event("input",{bubbles:!0}))):t.textContent=l})}}})(),Y=(()=>{const e={[n]:{component:i,type:HTMLDialogElement},[a]:{component:r,type:HTMLButtonElement},[l]:{component:o,type:HTMLElement},[c]:{component:k,type:HTMLDialogElement},[_]:{component:b,type:HTMLElement},[S]:{component:x,type:HTMLElement},[w]:{component:T,type:HTMLLabelElement},[F]:{component:B,type:HTMLSelectElement},[C]:{component:M,type:HTMLInputElement},[q]:{component:P,type:HTMLElement},[N]:{component:B,type:HTMLTextAreaElement},[z]:{component:B,type:HTMLInputElement},[O]:{component:V,type:HTMLDialogElement}},t=Object.keys(e).join(","),s=t=>{for(const[n,{component:i,type:a}]of Object.entries(e))if(t.matches(n)&&t instanceof a&&"function"==typeof i.initialize)return void i.initialize(t)},d=e=>{e.querySelectorAll(t).forEach(s),e.querySelectorAll('[class*="micl-"]').forEach(e=>{"1"===window.getComputedStyle(e).getPropertyValue("--micl-ripple")&&e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;t.stopPropagation();let n=e.getBoundingClientRect();e.style.setProperty("--micl-x",t.clientX-n.left+"px"),e.style.setProperty("--micl-y",t.clientY-n.top+"px")})}),document.documentElement.style.setProperty("--md-sys-scrollbar-thumb-color",window.getComputedStyle(document.body).getPropertyValue("--md-sys-color-outline").trim())},m=t=>{for(const[n,{component:i,type:a}]of Object.entries(e))if(t.matches(n)&&t instanceof a&&"function"==typeof i.cleanup)return void i.cleanup(t)},p=e=>{e.querySelectorAll(t).forEach(m)},u=t=>{for(const[n,{component:i,type:a}]of Object.entries(e))if("function"==typeof i[t.type]&&t.target.closest(n)instanceof a)return void i[t.type]?.(t)},g=()=>{new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(t)&&s(e),e.querySelectorAll(t).forEach(s))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(t)&&m(e),p(e))}))})}).observe(document.body,{childList:!0,subtree:!0}),d(document),document.addEventListener("input",u),document.addEventListener("keydown",u)},h=()=>{document.removeEventListener("DOMContentLoaded",h),g()};return"loading"!==document.readyState?g():document.addEventListener("DOMContentLoaded",h),{initialize:()=>d(document),cleanup:()=>p(document)}})()})(),t})());

package/docs/navigationrail.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Demonstrating MICL Navigation Rails">
     <title>MICL Navigation Rail</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,delete,favorite,home,inbox,menu,menu_open,outbox&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">

package/docs/radio.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Demonstrating MICL Radio Buttons">
     <title>MICL Radio Buttons</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">

package/docs/select.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Demonstrating MICL Selects">
     <title>MICL Selects</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">

package/docs/sidesheet.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Demonstrating MICL Side Sheets">
     <title>MICL Side Sheets</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode,home&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">

package/docs/slider.html

@@ -7,7 +7,7 @@
     <title>MICL Sliders</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home,volume_up&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">

package/docs/stepper.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Demonstrating MICL Steppers">
     <title>MICL Steppers</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">

package/docs/switch.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Demonstrating MICL Switches">
     <title>MICL Switches</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">

package/docs/textfield.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Demonstrating MICL Text Fields">
     <title>MICL Text Fields</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=cancel,credit_card,dark_mode,error,home,search&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">

package/docs/timepicker.html

@@ -5,7 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="Demonstrating MICL Time Pickers">
     <title>MICL Time Pickers</title>
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home,keyboard,schedule&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
@@ -78,7 +80,7 @@
                             <p class="md-sys-typescale-body-medium">Time input using a MICL button component that opens the MICL time picker</p>
                             <div class="micl-flex--vcenter" style="column-gap:8px">
                                 <label for="mytime" class="md-sys-typescale-body-large">Start time:</label>
-                                <button type="button" id="mytime" class="micl-button-text-m" popovertarget="mytimepicker2">07:53</button>
+                                <button type="button" id="mytime" class="micl-button-text-m" popovertarget="mytimepicker2" value="07:53">07:53</button>
                             </div>
                             <dialog id="mytimepicker2" class="micl-dialog micl-timepicker micl-timepicker--horizontal" closedby="closerequest" aria-labelledby="mytitle2">
                                 <form method="dialog">

package/foundations/index.scss

@@ -0,0 +1,102 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+$md-sys-icon-size: 24px;
+
+$md-sys-padding-xxs: 4px;
+$md-sys-padding-xs: 8px;
+$md-sys-padding-s: 12px;
+$md-sys-padding-m: 16px;
+$md-sys-padding-l: 20px;
+$md-sys-padding-xl: 24px;
+$md-sys-padding-xxl: 28px;
+
+:root {
+    --md-sys-icon-size: #{$md-sys-icon-size};
+
+    --md-sys-padding-xxs: #{$md-sys-padding-xxs};
+    --md-sys-padding-xs: #{$md-sys-padding-xs};
+    --md-sys-padding-s: #{$md-sys-padding-s};
+    --md-sys-padding-m: #{$md-sys-padding-m};
+    --md-sys-padding-l: #{$md-sys-padding-l};
+    --md-sys-padding-xl: #{$md-sys-padding-xl};
+    --md-sys-padding-xxl: #{$md-sys-padding-xxl};
+}
+
+.micl-hidden {
+    display: none !important;
+}
+.micl-no-transition {
+    transition: none !important;
+}
+.micl-flex--vcenter {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.micl-grid-iconfield {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    row-gap: var(--md-sys-padding-xl, 24px);
+    background-color: inherit;
+}
+.micl-grid-iconfield__icon {
+    grid-column: 1;
+    margin-block-start: 0.6rem;
+}
+.micl-grid-iconfield__field {
+    grid-column: 2;
+}
+
+.micl-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}
+
+@property --micl-ripple {
+    syntax: '<integer>';
+    inherits: false;
+    initial-value: 0;
+}
+@property --micl-x {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -100000px;
+}
+@property --micl-y {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -100000px;
+}
+@property --micl-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+}
+@property --micl-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+}

package/foundations/layout/index.scss

@@ -38,29 +38,9 @@ $md-sys-window-margin-extralarge: 24px;
 
 $md-sys-pane-spacer: 24px;
 
-$md-sys-padding-xxs: 4px;
-$md-sys-padding-xs: 8px;
-$md-sys-padding-s: 12px;
-$md-sys-padding-m: 16px;
-$md-sys-padding-l: 20px;
-$md-sys-padding-xl: 24px;
-$md-sys-padding-xxl: 28px;
-
-$md-sys-icon-size: 24px;
-
 :root {
     --md-sys-layout-pane-spacer: #{$md-sys-pane-spacer};
 
-    --md-sys-layout-padding-xxs: #{$md-sys-padding-xxs};
-    --md-sys-layout-padding-xs: #{$md-sys-padding-xs};
-    --md-sys-layout-padding-s: #{$md-sys-padding-s};
-    --md-sys-layout-padding-m: #{$md-sys-padding-m};
-    --md-sys-layout-padding-l: #{$md-sys-padding-l};
-    --md-sys-layout-padding-xl: #{$md-sys-padding-xl};
-    --md-sys-layout-padding-xxl: #{$md-sys-padding-xxl};
-
-    --md-sys-layout-icon-size: #{$md-sys-icon-size};
-
     @media (max-width: $md-sys-window-compact-max) {
         --md-sys-layout-window-margin: #{$md-sys-window-margin-compact};
     }
@@ -232,35 +212,3 @@ $md-sys-icon-size: 24px;
         flex-direction: column;
     }
 }
-
-.micl-hidden {
-    display: none !important;
-}
-
-.micl-flex--vcenter {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.micl-grid-iconfield {
-    box-sizing: border-box;
-    display: grid;
-    grid-template-columns: 48px 1fr;
-    row-gap: var(--md-sys-layout-padding-xl, 24px);
-    background-color: inherit;
-}
-.micl-grid-iconfield__icon {
-    grid-column: 1;
-    margin-block-start: 0.6rem;
-}
-.micl-grid-iconfield__field {
-    grid-column: 2;
-}
-
-.micl-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-}

package/foundations/scrollbar/index.scss

@@ -0,0 +1,46 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+$md-sys-scrollbar-width: 8px;
+$md-sys-scrollbar-margin: 2px;
+$md-sys-scrollbar-size: calc(#{$md-sys-scrollbar-width} + 2 * #{$md-sys-scrollbar-margin});
+$md-sys-scrollbar-thumb-color: grey;
+
+::-webkit-scrollbar {
+    width: #{$md-sys-scrollbar-size};
+    height: #{$md-sys-scrollbar-size};
+}
+::-webkit-scrollbar-thumb {
+    border-radius: calc(#{$md-sys-scrollbar-size} / 2);
+    background-color: var(--md-sys-scrollbar-thumb-color, #{$md-sys-scrollbar-thumb-color});
+    background-clip: content-box;
+    border: #{$md-sys-scrollbar-margin} solid transparent;
+}
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+@supports not selector(::-webkit-scrollbar) {
+    .micl-scrollbar {
+        scrollbar-width: auto;
+        scrollbar-color: var(--md-sys-scrollbar-thumb-color, #{$md-sys-scrollbar-thumb-color}) transparent;
+    }
+}

package/intl.d.ts

@@ -0,0 +1,9 @@
+declare namespace Intl {
+    interface Locale {
+        getWeekInfo(): {
+            firstDay: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+            weekend: number[];
+            minimalDays: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+        };
+    }
+}

package/micl.ts

@@ -22,6 +22,7 @@
 import _bottomsheet, { bottomsheetSelector } from './components/bottomsheet';
 import _button, { buttonSelector } from './components/button';
 import _checkboxgroup, { checkboxGroupSelector } from './components/checkbox';
+import _datepicker, { datepickerSelector } from './components/datepicker';
 import _list, { listSelector } from './components/list';
 import _menu, { menuSelector } from './components/menu';
 import _navigationrail, { navigationrailSelector } from './components/navigationrail';
@@ -47,6 +48,7 @@ export default (() =>
         [bottomsheetSelector]   : { component: _bottomsheet, type: HTMLDialogElement },
         [buttonSelector]        : { component: _button, type: HTMLButtonElement },
         [checkboxGroupSelector] : { component: _checkboxgroup, type: HTMLElement },
+        [datepickerSelector]    : { component: _datepicker, type: HTMLDialogElement },
         [listSelector]          : { component: _list, type: HTMLElement },
         [menuSelector]          : { component: _menu, type: HTMLElement },
         [navigationrailSelector]: { component: _navigationrail, type: HTMLLabelElement },
@@ -60,6 +62,14 @@ export default (() =>
 
     const selector = Object.keys(componentMap).join(',');
 
+    const initializeScrollbars = (): void =>
+    {
+        document.documentElement.style.setProperty(
+            '--md-sys-scrollbar-thumb-color',
+            window.getComputedStyle(document.body).getPropertyValue('--md-sys-color-outline').trim()
+        );
+    };
+
     const initializeComponent = (element: HTMLElement): void =>
     {
         for (const [selector, { component, type }] of Object.entries(componentMap)) {
@@ -94,6 +104,8 @@ export default (() =>
                 });
             }
         });
+
+        initializeScrollbars();
     };
 
     const cleanupComponent = (element: HTMLElement): void =>
@@ -118,14 +130,12 @@ export default (() =>
     const handleEvent = (event: Event): void =>
     {
         for (const [selector, { component, type }] of Object.entries(componentMap)) {
-            if (
-                (event.target as Element).matches(selector)
-                && event.target instanceof type
-                && ['input', 'keydown'].includes(event.type)
-                && typeof component[event.type as ComponentKey] === 'function'
-            ) {
-                component[event.type as ComponentKey]?.(event);
-                return;
+            if (typeof component[event.type as ComponentKey] === 'function') {
+                const e = (event.target as Element).closest(selector);
+                if (e instanceof type) {
+                    component[event.type as ComponentKey]?.(event);
+                    return;
+                }
             }
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
   "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
   "license": "MIT",
@@ -21,6 +21,7 @@
     "button",
     "card",
     "checkbox",
+    "date picker",
     "dialog",
     "divider",
     "iconbutton",

package/styles/README.md

@@ -23,7 +23,7 @@ You can customize elevation levels by overriding their global CSS variables.
 </div>
 ```
 
-
+  
 ## Motion
 Motion brings your UI to life, making it expressive and intuitive to use. The motion styles are based on the [Material Design 3 Motion](https://m3.material.io/styles/motion/overview/how-it-works) guidelines.
 
@@ -34,7 +34,7 @@ Import the motion styles into your project:
 @use "material-inspired-component-library/styles/motion";
 ```
 
-
+  
 ## Shapes
 Shapes add decorative flair and help emphasize elements. These styles adhere to the [Material Design 3 Shape](https://m3.material.io/styles/shape/overview-principles) principles.
 
@@ -57,7 +57,7 @@ You can customize a component's shape by overriding its global CSS variables, su
 </div>
 ```
 
-
+  
 ## State layers
 State layers are visual overlays that communicate the interaction status of a component, such as when it's hovered over or pressed. These are based on [Material Design 3 States](https://m3.material.io/foundations/interaction/states/overview).
 
@@ -78,7 +78,7 @@ Customize the appearance of state layers by overriding their global CSS variable
 </div>
 ```
 
-
+  
 ## Typography
 Typography is the foundation of text styling. The typography styles in this library are based on the [Material Design 3 Typography](https://m3.material.io/styles/typography/overview) specifications.
 
@@ -90,10 +90,19 @@ Import the typography styles into your project:
 ```
 
 ### Customizations
-You can customize font settings by overriding their global CSS variables.
+You can customize font settings by overriding their global CSS variables on the **:root** CSS pseudo-class.
+
+**Changing both the plain and brand style font:**
 
-**Changing the brand style font:**
+```CSS
+:root {
+  --md-ref-typeface-plain: Roboto, system-ui, sans-serif;
+  --md-ref-typeface-brand: Roboto, system-ui, sans-serif;
+}
+```
+
+And include a reference to the font in your application.
 
 ```HTML
-<div style="--md-ref-typeface-brand:Helvetica, Arial, sans-serif">
-</div>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+```