material-inspired-component-library 4.0.0 → 4.0.2

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:()=>M});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,l=e(t);return l.filter(e=>e>i+4)[0]||l[n?l.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:l=>{if(!l.matches(n)||l.dataset.miclinitialized)return;l.dataset.miclinitialized="1";const o=l.querySelector(".micl-bottomsheet__headline");if(!o)return;const r=o.querySelector(".micl-bottomsheet__draghandle");r?.addEventListener("click",()=>{i(l,t(l,!1))});let a,s,c=!1,m=!1;function d(e){const t=e.clientY;c&&Math.abs(a-t)>4&&(c=!1,m=!0,l.classList.add("micl-bottomsheet--resizing")),m&&i(l,s+a-t)}function p(n){c=!1,l.classList.remove("micl-bottomsheet--resizing"),m&&(m=!1,n.clientY<a?i(l,t(l,!0)):l.getBoundingClientRect().height<48?i(l,0):i(l,(t=>{let n=t.getBoundingClientRect().height,i=e(t),l=i.filter(e=>e<n-4);return l[l.length-1]||i[0]})(l)),document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",p))}o.addEventListener("mousedown",e=>{e.eventPhase===Event.AT_TARGET&&(c=!0,e.preventDefault(),a=e.clientY,s=l.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)}}})(),l="button[popovertarget],button.micl-button--toggle",o=(()=>{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)}}})(),r=".micl-checkbox-group",a=(()=>{const e=e=>{const t=e.querySelector(".micl-checkbox__parent");return t?.closest(r)===e?t:null},t=n=>{const i=e(n);if(!i)return!1;let l=0,o=0;return n.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(e=>{if(e!==i){const i=e.closest(r);i===n?(l++,e.checked&&!e.indeterminate&&o++):e.classList.contains("micl-checkbox__parent")&&i?.parentElement?.closest(r)===n&&(l++,t(i)&&o++)}}),0===o?(i.checked=!1,i.indeterminate=!1):o===l?(i.checked=!0,i.indeterminate=!1):(i.checked=!0,i.indeterminate=!0),o===l},n=(e,t)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(i=>{const l=i.closest(r);l===e?i.checked=t:i.classList.contains("micl-checkbox__parent")&&l?.parentElement?.closest(r)===e&&(i.checked=t,n(l,t))})},i=(i,l)=>{const o=e(i);if(!o)return;l===o&&n(i,l.checked);let a,s=i;do{a=s,s=s.parentElement?.closest(r)}while(s);t(a)};return{initialize:e=>{e.matches(r)&&!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))}}})(),s=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",c=(()=>{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 l=i.findIndex(e=>(e=>!!e&&e.matches(":has(input[type=checkbox]:checked)"))(e)),o=i.findIndex(e=>0===e.tabIndex),r=o;switch(t.key){case"ArrowDown":r=(o+1)%i.length,t.preventDefault();break;case"ArrowUp":r=(o-1+i.length)%i.length,t.preventDefault();break;case"Tab":-1===l?0!==o&&(i[o].tabIndex=-1,i[0].tabIndex=0):l!==o&&(i[o].tabIndex=-1,i[l].tabIndex=0);break;case"Enter":case" ":const e=t.target.querySelector("input[type=checkbox]");e instanceof HTMLInputElement&&(e.checked=!e.checked)}if(r!==o){i[o].tabIndex=-1,i[r].tabIndex=0,i[r].focus();const e=i[r].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},l=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:o=>{if(!o.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)})(o),(e=>{let t=e.min||"0";n(e)?.style.setProperty("--md-sys-slider-min",t),e.style.setProperty("--md-sys-slider-min",t)})(o),l(o),(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))})}})(o);const r=parseFloat(o.max),a=parseFloat(o.min),s=o.getBoundingClientRect(),c=((e,t,n)=>{const i=[];return e.list&&t>n&&e.list.querySelectorAll("option[value]").forEach(e=>{let l=parseFloat(e.value);!isNaN(l)&&l>=n&&l<=t&&i.push(l)}),i})(o,r,a).sort((e,t)=>e-t).map(e=>Math.round(100*(e-a)/(r-a)));if(c.length>0){const n=document.createElement("canvas"),l=n.getContext("2d");if(l){l.font=window.getComputedStyle(o).getPropertyValue("font");let n=l.measureText(t).width,r=l.measureText(e).width,a=s.width-10,m=0,d="";c.forEach(i=>{let l=a*i/100,o=Math.round((l-m)/n)-1;for(let e=0;e<o;e++)d+=t,m+=n;d+=e,m+=r}),i(o,d)}n.remove()}else i(o,e)},input:e=>{e.target.matches(g)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&l(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||"",l=e.dataset.miclvalidateCheckboxesCountEqual||"",o=e.dataset.miclvalidateCheckboxesCountMax||"",r=e.dataset.miclvalidateCheckboxesCountMin||"";if(i&&(l||o||r)){const a=e.querySelectorAll(`input[type="checkbox"][name="${i}"]:checked`).length,s=parseInt(l,10),c=parseInt(o,10),m=parseInt(r,10);let d=!isNaN(s)&&a!=s||!isNaN(c)&&a>c||!isNaN(m)&&a<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 l=!1;return t.querySelectorAll("fieldset").forEach(n),Array.from(t.elements).forEach(t=>{if(e(t)&&t.willValidate){t.checkValidity()||(l=!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()}}),!l};return{validateFieldSet:(e,t)=>(n(e),i(e,t)),validateForm:(e,t)=>i(e,t)}})(),y=".micl-stepper",E=".micl-stepper__action-back,.micl-stepper__action-next",v=".micl-stepper__header button[role=tab][aria-controls]",b="micl-stepper__step",L="."+b,x=(()=>{const e=e=>e.querySelector(`${L}[aria-current=step]`)||n(e,e.querySelector(L)),t=(e,t)=>Array.from(e.querySelectorAll(L)).indexOf(t)+1,n=(e,t)=>{if(!t)return null;let n=0;e.querySelectorAll(L).forEach((e,i)=>{e.setAttribute("aria-current",e===t?"step":"false"),e===t&&(n=i)});const i=e.querySelectorAll(v).item(n);return e.querySelectorAll(v).forEach((e,t)=>{e.setAttribute("aria-selected",e===i?"true":"false")}),o(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))},l=e=>e.classList.contains("micl-stepper__action-back"),o=(e,n)=>{((e,t)=>{Array.from(e.querySelectorAll(E)).forEach(e=>{const n=l(e)?"previousElementSibling":"nextElementSibling",i=t[n]?.classList.contains(b);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),l=e.querySelectorAll(L).length,o=!e.classList.contains("micl-stepper--nonlinear"),r=(t,n)=>{e.querySelectorAll(t).forEach(e=>{e.textContent=n})};r(".micl-stepper__progress-current",`${i}`),r(".micl-stepper__progress-total",`${l}`),e.querySelectorAll(".micl-stepper__progress-dots").forEach(e=>{const t=document.createDocumentFragment();e.innerHTML="";for(let e=1;e<=l;e++){let n=document.createElement("span");n.classList.add("micl-stepper__progress-dot"),(o&&e<=i||!o&&e===i)&&n.classList.add("micl-stepper__progress--done"),t.appendChild(n)}e.appendChild(t)}),e.querySelectorAll(v).forEach((e,t)=>{e.classList.toggle("micl-stepper__progress--done",o?t+1<=i:t+1===i)})})(e,n)};return{initialize:t=>{if(!t.matches(y)||t.dataset.miclinitialized)return;t.dataset.miclinitialized="1";const r=e(t),a=t.querySelector(".micl-stepper__header");r&&(o(t,r),a?.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(E)).forEach(o=>{o.addEventListener("click",function(o){const r=l(this),a=e(t);if(!a||!r&&a instanceof HTMLFieldSetElement&&!f.validateFieldSet(a,!0))return void(r||o.stopImmediatePropagation());const s=a[r?"previousElementSibling":"nextElementSibling"];s?.classList.contains(b)&&((e,t,l)=>{t.addEventListener("transitionend",i),t.classList.add("micl-stepper__step--fromselected"),t.offsetHeight,l.addEventListener("transitionend",i),l.classList.add("micl-stepper__step--toselected"),l.offsetHeight,n(e,l)})(t,a,s)},!0)}),t instanceof HTMLFormElement&&t.addEventListener("submit",e=>{e.submitter?.classList.contains("micl-form--dosubmit")||e.preventDefault(),f.validateForm(t,!0)||e.stopImmediatePropagation()},!0)}}})(),T=".micl-textfield-outlined > input,.micl-textfield-filled > input",S=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",k=".micl-textfield-filled > select,.micl-textfield-outlined > select",_=(()=>{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=>{t.dataset.miclinitialized||(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")}),e(t))},input:t=>{t.target.matches(`${T},${k},${S}`)&&t.target.dataset.miclinitialized&&!t.target.disabled&&(t.target.value?t.target.dataset.miclvalue="1":delete t.target.dataset.miclvalue,e(t.target))}}})(),M=(()=>{const e={[n]:{component:i,type:HTMLDialogElement},[l]:{component:o,type:HTMLButtonElement},[r]:{component:a,type:HTMLElement},[s]:{component:c,type:HTMLElement},[m]:{component:d,type:HTMLElement},[p]:{component:u,type:HTMLLabelElement},[k]:{component:_,type:HTMLSelectElement},[g]:{component:h,type:HTMLInputElement},[y]:{component:x,type:HTMLElement},[S]:{component:_,type:HTMLTextAreaElement},[T]:{component:_,type:HTMLInputElement}},t=Object.keys(e).join(","),f=t=>{for(const[n,{component:i,type:l}]of Object.entries(e))if(t.matches(n)&&t instanceof l&&"function"==typeof i.initialize)return void i.initialize(t)},E=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")})})},v=t=>{for(const[n,{component:i,type:l}]of Object.entries(e))if(t.matches(n)&&t instanceof l&&"function"==typeof i.cleanup)return void i.cleanup(t)},b=e=>{e.querySelectorAll(t).forEach(v)},L=t=>{for(const[n,{component:i,type:l}]of Object.entries(e))if(t.target.matches(n)&&t.target instanceof l&&["input","keydown"].includes(t.type)&&"function"==typeof i[t.type])return void i[t.type]?.(t)},M=()=>{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)&&v(e),b(e))}))})}).observe(document.body,{childList:!0,subtree:!0}),E(document),document.addEventListener("input",L),document.addEventListener("keydown",L)},C=()=>{document.removeEventListener("DOMContentLoaded",C),M()};return"loading"!==document.readyState?M():document.addEventListener("DOMContentLoaded",C),{initialize:()=>E(document),cleanup:()=>b(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:()=>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,l=e(t);return l.filter(e=>e>i+4)[0]||l[n?l.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:l=>{if(!l.matches(n)||l.dataset.miclinitialized)return;l.dataset.miclinitialized="1";const o=l.querySelector(".micl-bottomsheet__headline");if(!o)return;const r=o.querySelector(".micl-bottomsheet__draghandle");r?.addEventListener("click",()=>{i(l,t(l,!1))});let a,s,c=!1,m=!1;function d(e){const t=e.clientY;c&&Math.abs(a-t)>4&&(c=!1,m=!0,l.classList.add("micl-bottomsheet--resizing")),m&&i(l,s+a-t)}function p(n){c=!1,l.classList.remove("micl-bottomsheet--resizing"),m&&(m=!1,n.clientY<a?i(l,t(l,!0)):l.getBoundingClientRect().height<48?i(l,0):i(l,(t=>{let n=t.getBoundingClientRect().height,i=e(t),l=i.filter(e=>e<n-4);return l[l.length-1]||i[0]})(l)),document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",p))}o.addEventListener("mousedown",e=>{e.eventPhase===Event.AT_TARGET&&(c=!0,e.preventDefault(),a=e.clientY,s=l.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)}}})(),l="button[popovertarget],button.micl-button--toggle",o=(()=>{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)}}})(),r=".micl-checkbox-group",a=(()=>{const e=e=>{const t=e.querySelector(".micl-checkbox__parent");return t?.closest(r)===e?t:null},t=n=>{const i=e(n);if(!i)return!1;let l=0,o=0;return n.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(e=>{if(e!==i){const i=e.closest(r);i===n?(l++,e.checked&&!e.indeterminate&&o++):e.classList.contains("micl-checkbox__parent")&&i?.parentElement?.closest(r)===n&&(l++,t(i)&&o++)}}),0===o?(i.checked=!1,i.indeterminate=!1):o===l?(i.checked=!0,i.indeterminate=!1):(i.checked=!0,i.indeterminate=!0),o===l},n=(e,t)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(i=>{const l=i.closest(r);l===e?i.checked=t:i.classList.contains("micl-checkbox__parent")&&l?.parentElement?.closest(r)===e&&(i.checked=t,n(l,t))})},i=(i,l)=>{const o=e(i);if(!o)return;l===o&&n(i,l.checked);let a,s=i;do{a=s,s=s.parentElement?.closest(r)}while(s);t(a)};return{initialize:e=>{e.matches(r)&&!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))}}})(),s=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",c=(()=>{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 l=i.findIndex(e=>(e=>!!e&&e.matches(":has(input[type=checkbox]:checked)"))(e)),o=i.findIndex(e=>0===e.tabIndex),r=o;switch(t.key){case"ArrowDown":r=(o+1)%i.length,t.preventDefault();break;case"ArrowUp":r=(o-1+i.length)%i.length,t.preventDefault();break;case"Tab":-1===l?0!==o&&(i[o].tabIndex=-1,i[0].tabIndex=0):l!==o&&(i[o].tabIndex=-1,i[l].tabIndex=0);break;case"Enter":case" ":const e=t.target.querySelector("input[type=checkbox]");e instanceof HTMLInputElement&&(e.checked=!e.checked)}if(r!==o){i[o].tabIndex=-1,i[r].tabIndex=0,i[r].focus();const e=i[r].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",f=(()=>{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},l=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:o=>{if(!o.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)})(o),(e=>{let t=e.min||"0";n(e)?.style.setProperty("--md-sys-slider-min",t),e.style.setProperty("--md-sys-slider-min",t)})(o),l(o),(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))})}})(o);const r=parseFloat(o.max),a=parseFloat(o.min),s=o.getBoundingClientRect(),c=((e,t,n)=>{const i=[];return e.list&&t>n&&e.list.querySelectorAll("option[value]").forEach(e=>{let l=parseFloat(e.value);!isNaN(l)&&l>=n&&l<=t&&i.push(l)}),i})(o,r,a).sort((e,t)=>e-t).map(e=>Math.round(100*(e-a)/(r-a)));if(c.length>0){const n=document.createElement("canvas"),l=n.getContext("2d");if(l){l.font=window.getComputedStyle(o).getPropertyValue("font");let n=l.measureText(t).width,r=l.measureText(e).width,a=s.width-10,m=0,d="";c.forEach(i=>{let l=a*i/100,o=Math.round((l-m)/n)-1;for(let e=0;e<o;e++)d+=t,m+=n;d+=e,m+=r}),i(o,d)}n.remove()}else i(o,e)},input:e=>{e.target.matches(g)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&l(e.target)}}})(),h=(()=>{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||"",l=e.dataset.miclvalidateCheckboxesCountEqual||"",o=e.dataset.miclvalidateCheckboxesCountMax||"",r=e.dataset.miclvalidateCheckboxesCountMin||"";if(i&&(l||o||r)){const a=e.querySelectorAll(`input[type="checkbox"][name="${i}"]:checked`).length,s=parseInt(l,10),c=parseInt(o,10),m=parseInt(r,10);let d=!isNaN(s)&&a!=s||!isNaN(c)&&a>c||!isNaN(m)&&a<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 l=!1;return t.querySelectorAll("fieldset").forEach(n),Array.from(t.elements).forEach(t=>{if(e(t)&&t.willValidate){t.checkValidity()||(l=!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()}}),!l};return{validateFieldSet:(e,t)=>(n(e),i(e,t)),validateForm:(e,t)=>i(e,t)}})(),y=".micl-stepper",E=".micl-stepper__action-back,.micl-stepper__action-next",v=".micl-stepper__header button[role=tab][aria-controls]",L="micl-stepper__step",b="."+L,x=(()=>{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(v).item(n);return e.querySelectorAll(v).forEach((e,t)=>{e.setAttribute("aria-selected",e===i?"true":"false")}),o(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))},l=e=>e.classList.contains("micl-stepper__action-back"),o=(e,n)=>{((e,t)=>{Array.from(e.querySelectorAll(E)).forEach(e=>{const n=l(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),l=e.querySelectorAll(b).length,o=!e.classList.contains("micl-stepper--nonlinear"),r=(t,n)=>{e.querySelectorAll(t).forEach(e=>{e.textContent=n})};r(".micl-stepper__progress-current",`${i}`),r(".micl-stepper__progress-total",`${l}`),e.querySelectorAll(".micl-stepper__progress-dots").forEach(e=>{const t=document.createDocumentFragment();e.innerHTML="";for(let e=1;e<=l;e++){let n=document.createElement("span");n.classList.add("micl-stepper__progress-dot"),(o&&e<=i||!o&&e===i)&&n.classList.add("micl-stepper__progress--done"),t.appendChild(n)}e.appendChild(t)}),e.querySelectorAll(v).forEach((e,t)=>{e.classList.toggle("micl-stepper__progress--done",o?t+1<=i:t+1===i)})})(e,n)};return{initialize:t=>{if(!t.matches(y)||t.dataset.miclinitialized)return;t.dataset.miclinitialized="1";const r=e(t),a=t.querySelector(".micl-stepper__header");r&&(o(t,r),a?.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(E)).forEach(o=>{o.addEventListener("click",function(o){const r=l(this),a=e(t);if(!a||!r&&a instanceof HTMLFieldSetElement&&!h.validateFieldSet(a,!0))return void(r||o.stopImmediatePropagation());const s=a[r?"previousElementSibling":"nextElementSibling"];s?.classList.contains(L)&&((e,t,l)=>{t.addEventListener("transitionend",i),t.classList.add("micl-stepper__step--fromselected"),t.offsetHeight,l.addEventListener("transitionend",i),l.classList.add("micl-stepper__step--toselected"),l.offsetHeight,n(e,l)})(t,a,s)},!0)}),t instanceof HTMLFormElement&&t.addEventListener("submit",e=>{e.submitter?.classList.contains("micl-form--dosubmit")||e.preventDefault(),h.validateForm(t,!0)||e.stopImmediatePropagation()},!0)}}})(),k=".micl-textfield-outlined > input,.micl-textfield-filled > input",T=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",S=".micl-textfield-filled > select,.micl-textfield-outlined > select",_=(()=>{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(`${k},${S},${T}`)&&t.target.dataset.miclinitialized&&!t.target.disabled&&(t.target.value?t.target.dataset.miclvalue="1":delete t.target.dataset.miclvalue,e(t.target))}}})(),M="dialog.micl-dialog.micl-timepicker",C=(()=>{const e=e=>e instanceof HTMLInputElement||e instanceof HTMLTextAreaElement||e instanceof HTMLSelectElement;return{initialize:t=>{const n=t.querySelector("form"),i=t.querySelector("input");if(!n||!i)return;if(t.dataset.miclinitialized)return;t.dataset.miclinitialized="1",i.addEventListener("keydown",e=>{e instanceof KeyboardEvent&&("Enter"!==e.key&&" "!==e.key||e.preventDefault())}),i.addEventListener("change",()=>{const e=parseInt(i.value.split(":")[0],10);i.classList.toggle("micl-timepicker--pm",e>=12),console.log(`${i.value}  -  ${e}`)});const l=t.querySelector(".micl-timepicker__dial");l&&(l.addEventListener("mousedown",()=>{l.classList.add("micl-timepicker__dial--dragging")}),l.addEventListener("mouseup",()=>{l.classList.remove("micl-timepicker__dial--dragging")})),t.addEventListener("beforetoggle",n=>{if("open"===n.oldState)return;const l=document.querySelector(`[data-timepicker="${t.id}"],[popovertarget="${t.id}"]`);l&&(e(l)?i.value=l.value:"textContent"in l&&(i.value=l.textContent))}),t.addEventListener("close",()=>{t.returnValue&&document.querySelectorAll(`[data-timepicker="${t.id}"],[popovertarget="${t.id}"]`).forEach(t=>{e(t)?t.value=i.value:"textContent"in t&&(t.textContent=i.value)})})}}})(),w=(()=>{const e={[n]:{component:i,type:HTMLDialogElement},[l]:{component:o,type:HTMLButtonElement},[r]:{component:a,type:HTMLElement},[s]:{component:c,type:HTMLElement},[m]:{component:d,type:HTMLElement},[p]:{component:u,type:HTMLLabelElement},[S]:{component:_,type:HTMLSelectElement},[g]:{component:f,type:HTMLInputElement},[y]:{component:x,type:HTMLElement},[T]:{component:_,type:HTMLTextAreaElement},[k]:{component:_,type:HTMLInputElement},[M]:{component:C,type:HTMLDialogElement}},t=Object.keys(e).join(","),h=t=>{for(const[n,{component:i,type:l}]of Object.entries(e))if(t.matches(n)&&t instanceof l&&"function"==typeof i.initialize)return void i.initialize(t)},E=e=>{e.querySelectorAll(t).forEach(h),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")})})},v=t=>{for(const[n,{component:i,type:l}]of Object.entries(e))if(t.matches(n)&&t instanceof l&&"function"==typeof i.cleanup)return void i.cleanup(t)},L=e=>{e.querySelectorAll(t).forEach(v)},b=t=>{for(const[n,{component:i,type:l}]of Object.entries(e))if(t.target.matches(n)&&t.target instanceof l&&["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)&&h(e),e.querySelectorAll(t).forEach(h))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(t)&&v(e),L(e))}))})}).observe(document.body,{childList:!0,subtree:!0}),E(document),document.addEventListener("input",b),document.addEventListener("keydown",b)},q=()=>{document.removeEventListener("DOMContentLoaded",q),w()};return"loading"!==document.readyState?w():document.addEventListener("DOMContentLoaded",q),{initialize:()=>E(document),cleanup:()=>L(document)}})()})(),t})());

package/docs/sidesheet.html

@@ -79,14 +79,14 @@
                             </dialog>
                             <button type="button" class="micl-button-outlined-m" popovertarget="mysidesheet2">Open Standard Sheet<br>without dividers</button>
 
-                            <dialog id="mysidesheet3" class="micl-sidesheet" closedby="closerequest" aria-labelledby="title1">
+                            <dialog id="mysidesheet3" class="micl-sidesheet" closedby="closerequest" aria-labelledby="title1" tabindex="-1">
                                 <div class="micl-sidesheet__headline">
                                     <button class="micl-iconbutton-standard-s material-symbols-outlined">arrow_back</button>
                                     <h2 id="title3">Title</h2>
                                     <button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet3">close</button>
                                 </div>
                                 <div class="micl-sidesheet__content">
-                                    <p class="md-sys-typescale-body-medium" style="padding-top:1rem">Make your selection:</p>
+                                    <p class="md-sys-typescale-body-medium">Make your selection:</p>
                                     <div class="switch">
                                         <label for="cb01" class="md-sys-typescale-body-medium">Selection A</label>
                                         <input type="checkbox" id="cb01" class="micl-switch">
@@ -108,6 +108,7 @@
                                         <input type="checkbox" id="cb05" class="micl-switch">
                                     </div>
                                 </div>
+                                <hr class="micl-divider">
                                 <div class="micl-sidesheet__actions">
                                     <button type="button" class="micl-button-filled-s">Save</button>
                                     <button type="button" class="micl-button-outlined-s">Cancel</button>

package/docs/timepicker.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <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="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">
+    <link rel="stylesheet" href="docs.css">
+    <style>
+        .micl-card__content {
+            display: flex;
+            flex-direction: column;
+            row-gap: 8px;
+        }
+        p {
+            margin-block: 24px 0px;
+            color: var(--md-sys-color-on-surface);
+        }
+    </style>
+</head>
+<body class="micl-window light">
+    <main class="micl-body micl-body--stacked-to-large">
+        <section class="micl-pane">
+            <header class="micl-appbar">
+                <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
+                    <span class="material-symbols-outlined" aria-hidden="true">home</span>
+                </a>
+                <div class="micl-appbar__headline micl-appbar__headline--center">
+                    <h1>Time Pickers</h1>
+                    <p class="micl-appbar__subtitle">Showcasing MICL time pickers</p>
+                </div>
+                <div id="settings-placeholder" class="micl-appbar__trailing"></div>
+            </header>
+
+            <div class="micl-pane__columns">
+                <div class="micl-pane__column" style="gap:24px">
+                    <div class="micl-card-outlined">
+                        <div class="micl-card__content">
+                            <p class="md-sys-typescale-body-medium">Default non-MICL time input field</p>
+                            <input type="time" name="t0" style="width:fit-content" value="08:40">
+                            <p class="md-sys-typescale-body-medium">MICL time textfield component without the MICL time picker component</p>
+                            <div class="micl-textfield-outlined" style="width:fit-content">
+                                <label for="mytextfield0">Start time</label>
+                                <input type="time" id="mytextfield0" value="08:40">
+                            </div>
+                            <p class="md-sys-typescale-body-medium">MICL time textfield component with the MICL time picker component</p>
+                            <div class="micl-textfield-outlined" style="width:fit-content">
+                                <label for="mytextfield1">Start time</label>
+                                <input type="time" id="mytextfield1" data-timepicker="mytimepicker" value="23:19">
+                            </div>
+                            <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="mytimepicker">07:53</button>
+                            </div>
+
+                            <dialog id="mytimepicker" class="micl-dialog micl-timepicker" closedby="any" aria-labelledby="mytitle">
+                                <form method="dialog">
+                                    <div class="micl-dialog__headline">
+                                        <h2 id="mytitle">Enter time</h2>
+                                    </div>
+                                    <div class="micl-dialog__content">
+                                        <input type="time" name="time" class="micl-blabla" value="">
+                                        <span class="micl-timepicker__supporting-text-hour">Hour</span>
+                                        <span class="micl-timepicker__supporting-text-minute">Minute</span>
+                                        <div class="micl-timepicker__dial">
+                                            <time datetime="12:00" class="micl-timepicker__time--selected">12</time>
+                                            <time datetime="1:00">1</time>
+                                            <time datetime="2:00">2</time>
+                                            <time datetime="3:00">3</time>
+                                            <time datetime="4:00">4</time>
+                                            <time datetime="5:00">5</time>
+                                            <time datetime="6:00">6</time>
+                                            <time datetime="7:00">7</time>
+                                            <time datetime="8:00">8</time>
+                                            <time datetime="9:00">9</time>
+                                            <time datetime="10:00">10</time>
+                                            <time datetime="11:00">11</time>
+                                            <span class="micl-timepicker__track"></span>
+                                        </div>
+                                    </div>
+                                    <div class="micl-dialog__actions">
+                                        <button class="micl-button-text-s" value="">Cancel</button>
+                                        <button class="micl-button-text-s" value="OK">OK</button>
+                                    </div>
+                                </form>
+                            </dialog>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="micl-pane">
+            <div class="micl-card-filled">
+                <div class="micl-card__headline-s">
+                    <h2>Code example</h2>
+                </div>
+                <div class="micl-card__content docs-code">
+                    <pre tabindex="-1"><code>
+                    </code></pre>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/micl.ts

@@ -28,6 +28,7 @@ import _navigationrail, { navigationrailSelector } from './components/navigation
 import _slider, { sliderSelector } from './components/slider';
 import _stepper, { stepperSelector } from './components/stepper';
 import _textfield, { textfieldSelector, textareaSelector, selectSelector } from './components/textfield';
+import _timepicker, { timepickerSelector } from './components/timepicker';
 
 interface ComponentEntry<T extends HTMLElement> {
     component: {
@@ -53,7 +54,8 @@ export default (() =>
         [sliderSelector]        : { component: _slider, type: HTMLInputElement },
         [stepperSelector]       : { component: _stepper, type: HTMLElement },
         [textareaSelector]      : { component: _textfield, type: HTMLTextAreaElement },
-        [textfieldSelector]     : { component: _textfield, type: HTMLInputElement }
+        [textfieldSelector]     : { component: _textfield, type: HTMLInputElement },
+        [timepickerSelector]    : { component: _timepicker, type: HTMLDialogElement }
     };
 
     const selector = Object.keys(componentMap).join(',');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "4.0.0",
+  "version": "4.0.2",
   "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",
@@ -47,9 +47,7 @@
   "main": "dist/micl.js",
   "types": "dist/micl.d.ts",
   "scripts": {
-    "build": "webpack",
-    "start": "echo 'No start script yet'",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack"
   },
   "sideEffects": false,
   "devDependencies": {

package/styles.scss

@@ -47,6 +47,7 @@
 @use 'components/bottomsheet';
 @use 'components/navigationrail';
 @use 'components/stepper';
+@use 'components/timepicker';
 
 @property --micl-ripple {
     syntax: '<integer>';