material-inspired-component-library 3.1.0 → 4.0.0

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:()=>x});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 o=r.querySelector(".micl-bottomsheet__headline");if(!o)return;const l=o.querySelector(".micl-bottomsheet__draghandle");l?.addEventListener("click",()=>{i(r,t(r,!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,r.classList.add("micl-bottomsheet--resizing")),m&&i(r,s+a-t)}function p(n){c=!1,r.classList.remove("micl-bottomsheet--resizing"),m&&(m=!1,n.clientY<a?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))}o.addEventListener("mousedown",e=>{e.eventPhase===Event.AT_TARGET&&(c=!0,e.preventDefault(),a=e.clientY,s=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",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)}}})(),l=".micl-checkbox-group",a=(()=>{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 r=0,o=0;return n.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(e=>{if(e!==i){const i=e.closest(l);i===n?(r++,e.checked&&!e.indeterminate&&o++):e.classList.contains("micl-checkbox__parent")&&i?.parentElement?.closest(l)===n&&(r++,t(i)&&o++)}}),0===o?(i.checked=!1,i.indeterminate=!1):o===r?(i.checked=!0,i.indeterminate=!1):(i.checked=!0,i.indeterminate=!0),o===r},n=(e,t)=>{e.querySelectorAll('input[type="checkbox"].micl-checkbox').forEach(i=>{const r=i.closest(l);r===e?i.checked=t:i.classList.contains("micl-checkbox__parent")&&r?.parentElement?.closest(l)===e&&(i.checked=t,n(r,t))})},i=(i,r)=>{const o=e(i);if(!o)return;r===o&&n(i,r.checked);let a,s=i;do{a=s,s=s.parentElement?.closest(l)}while(s);t(a)};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))}}})(),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 r=i.findIndex(e=>(e=>!!e&&e.matches(":has(input[type=checkbox]:checked)"))(e)),o=i.findIndex(e=>0===e.tabIndex),l=o;switch(t.key){case"ArrowDown":l=(o+1)%i.length,t.preventDefault();break;case"ArrowUp":l=(o-1+i.length)%i.length,t.preventDefault();break;case"Tab":-1===r?0!==o&&(i[o].tabIndex=-1,i[0].tabIndex=0):r!==o&&(i[o].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(l!==o){i[o].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}))}}}})(),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},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: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),r(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 l=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 r=parseFloat(e.value);!isNaN(r)&&r>=n&&r<=t&&i.push(r)}),i})(o,l,a).sort((e,t)=>e-t).map(e=>Math.round(100*(e-a)/(l-a)));if(c.length>0){const n=document.createElement("canvas"),r=n.getContext("2d");if(r){r.font=window.getComputedStyle(o).getPropertyValue("font");let n=r.measureText(t).width,l=r.measureText(e).width,a=s.width-10,m=0,d="";c.forEach(i=>{let r=a*i/100,o=Math.round((r-m)/n)-1;for(let e=0;e<o;e++)d+=t,m+=n;d+=e,m+=l}),i(o,d)}n.remove()}else i(o,e)},input:e=>{e.target.matches(g)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&r(e.target)}}})(),h=".micl-stepper",y=(()=>{const e=e=>{let t=e.querySelector(".micl-stepper__step--current");return t||(t=e.querySelector(".micl-stepper__step"),t&&t.classList.add("micl-stepper__step--current"),t)},t=e=>{const n=e.currentTarget;"transform"===e.propertyName&&n&&(n.classList.remove("micl-stepper__step--fromcurrent","micl-stepper__step--tocurrent"),n.removeEventListener("transitionend",t))},n=(e,n)=>{e.addEventListener("transitionend",t),e.classList.add("micl-stepper__step--fromcurrent"),e.offsetHeight,n.addEventListener("transitionend",t),n.classList.add("micl-stepper__step--tocurrent"),n.offsetHeight,n.classList.add("micl-stepper__step--current"),e.classList.remove("micl-stepper__step--current"),e.offsetHeight},i=(e,t,n)=>{e.forEach(e=>{const i=n?"previousElementSibling":"nextElementSibling",r=t[i]?.classList.contains("micl-stepper__step");e.classList.toggle("micl-hidden",!r)})},r=(e,t)=>{const n=t.dataset.miclstep;n&&e.querySelectorAll("[data-step]").forEach(e=>{const t=e.dataset.step!==n;e.classList.toggle("micl-hidden",t)})},o=e=>{if(!e)return!0;const t=e.querySelectorAll("fieldset.micl-checkbox-group[data-miclname]");return Array.from(t).every(e=>{const t=e.dataset.miclname;if(t)return e.querySelectorAll(`input[type="checkbox"][name="${t}"]:checked`).length>0})};return{initialize:t=>{if(!t.matches(h)||t.dataset.miclinitialized)return;t.dataset.miclinitialized="1",t.querySelectorAll(".micl-stepper__step").forEach((e,t)=>{e.dataset.miclstep=`${t+1}`});const l=e(t),a=Array.from(t.querySelectorAll("button.micl-stepper--goback")),s=Array.from(t.querySelectorAll("button.micl-stepper--gonext"));l&&(i(a,l,!0),i(s,l,!1),r(t,l)),a.forEach(o=>{o.addEventListener("click",o=>{const l=e(t);if(!l)return;const s=l.previousElementSibling;s?.classList.contains("micl-stepper__step")&&(n(l,s),i(a,s,!0),r(t,s))},!0)}),s.forEach(l=>{l.addEventListener("click",l=>{const a=(t=>{const n=e(t);if(!n)return null;let i=!0;return n.querySelectorAll("input,select,textarea").forEach(e=>{e.checkValidity()||(i=!1)}),o(n)||(i=!1),i?n:null})(t);if(!a)return void l.stopImmediatePropagation();const c=a.nextElementSibling;c?.classList.contains("micl-stepper__step")&&(n(a,c),i(s,c,!1),r(t,c))},!0)}),t instanceof HTMLFormElement&&t.addEventListener("submit",e=>{e.submitter?.classList.contains("micl-form--dosubmit")||e.preventDefault(),t.checkValidity()&&o(t)||e.stopImmediatePropagation()},!0)}}})(),E=".micl-textfield-outlined > input,.micl-textfield-filled > input",v=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",b=".micl-textfield-filled > select,.micl-textfield-outlined > select",L=(()=>{const e=e=>e instanceof HTMLInputElement||e instanceof HTMLSelectElement||e instanceof HTMLTextAreaElement,t=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}`)},n=(e,t)=>{if(e.required){e.parentElement?.classList.toggle("micl-textfield--error",!t);const n=e.parentElement?.querySelector(".micl-textfield__supporting-text");n&&(t||"micltext"in n.dataset||(n.dataset.micltext=n.textContent),n.textContent=e.validationMessage||n.dataset.micltext||"")}};return{initialize:e=>{e.dataset.miclinitialized||(e.dataset.miclinitialized="1",e.value&&(e.dataset.miclvalue="1"),e instanceof HTMLSelectElement&&e.addEventListener("mousedown",()=>{const t=e.getBoundingClientRect(),n=t.top,i=window.innerHeight-t.bottom;!e.matches(":open")&&e.style.setProperty("--md-sys-select-picker-origin",n>i?"left bottom":"left top")}),t(e))},input:i=>{e(i.target)&&i.target.matches(`${E},${b},${v}`)&&i.target.dataset.miclinitialized&&!i.target.disabled&&(i.target.value?i.target.dataset.miclvalue="1":delete i.target.dataset.miclvalue,n(i.target,!0),t(i.target))},invalid:t=>{e(t.target)&&n(t.target)}}})(),x=(()=>{const e={[n]:{component:i,type:HTMLDialogElement},[r]:{component:o,type:HTMLButtonElement},[l]:{component:a,type:HTMLElement},[s]:{component:c,type:HTMLElement},[m]:{component:d,type:HTMLElement},[p]:{component:u,type:HTMLLabelElement},[b]:{component:L,type:HTMLSelectElement},[g]:{component:f,type:HTMLInputElement},[h]:{component:y,type:HTMLElement},[v]:{component:L,type:HTMLTextAreaElement},[E]:{component:L,type:HTMLInputElement}},t=Object.keys(e).join(","),x=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)},T=e=>{e.querySelectorAll(t).forEach(x),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")})})},S=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)},k=e=>{e.querySelectorAll(t).forEach(S)},_=t=>{for(const[n,{component:i,type:r}]of Object.entries(e))if(t.target.matches(n)&&t.target instanceof r&&["input","invalid","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)&&x(e),e.querySelectorAll(t).forEach(x))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(t)&&S(e),k(e))}))})}).observe(document.body,{childList:!0,subtree:!0}),T(document),document.addEventListener("input",_),document.addEventListener("keydown",_),document.addEventListener("invalid",_,!0)},w=()=>{document.removeEventListener("DOMContentLoaded",w),M()};return"loading"!==document.readyState?M():document.addEventListener("DOMContentLoaded",w),{initialize:()=>T(document),cleanup:()=>k(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:()=>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})());

package/docs/radio.html

@@ -22,7 +22,7 @@
     <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-m" aria-label="Navigate to the main MICL Showcase page">
+                <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">
@@ -105,7 +105,7 @@
                     <h2>Code example</h2>
                 </div>
                 <div class="micl-card__content docs-code">
-                    <pre><code>
+                    <pre tabindex="-1"><code>
 &lt;div class="micl-flex--vcenter"&gt;
   &lt;input type="radio" class="micl-radio" id="id0" name="choices" checked value="v0"&gt;
   &lt;label for="id0" class="md-sys-typescale-body-medium">First Choice&lt;/label&gt;

package/docs/select.html

@@ -32,7 +32,7 @@
     <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-m" aria-label="Navigate to the main MICL Showcase page">
+                <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">
@@ -258,7 +258,7 @@
                     <h2>Code example</h2>
                 </div>
                 <div class="micl-card__content docs-code">
-                    <pre><code>
+                    <pre tabindex="-1"><code>
 &lt;div class="micl-textfield-outlined"&gt;
   &lt;label for="myselect"&gt;Country&lt;/label&gt;
   &lt;select id="myselect"&gt;

package/docs/sidesheet.html

@@ -33,7 +33,7 @@
     <main class="micl-body">
         <section class="micl-pane">
             <header class="micl-appbar">
-                <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
+                <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">
@@ -123,7 +123,7 @@
                             <h2>Code example</h2>
                         </div>
                         <div class="micl-card__content docs-code">
-                            <pre><code>
+                            <pre tabindex="-1"><code>
 &lt;dialog id="id0" class="micl-sidesheet" popover aria-labelledby="id1"&gt;
     &lt;div class="micl-sidesheet__headline"&gt;
         &lt;h2 id="id1"&gt;Lorem Ipsum&lt;/h2&gt;

package/docs/slider.html

@@ -34,7 +34,7 @@
     <main class="micl-body micl-body--evenly 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-m" aria-label="Navigate to the main MICL Showcase page">
+                <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">
@@ -121,7 +121,7 @@
                     <h2>Code example</h2>
                 </div>
                 <div class="micl-card__content docs-code">
-                    <pre><code>
+                    <pre tabindex="-1"><code>
 &lt;input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="id0"&gt;
 &lt;datalist id="id0"&gt;
   &lt;option value="0"&gt;&lt;/option&gt;

package/docs/stepper.html

@@ -0,0 +1,318 @@
+<!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 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="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>
+        h2, p {
+            color: var(--md-sys-color-on-surface);
+        }
+        .docs-icon {
+            inline-size: 32px;
+            block-size: 32px;
+            margin: var(--md-sys-card-padding-inline);
+            border-radius: 16px;
+            background-color: var(--md-sys-color-primary);
+            color: var(--md-sys-color-on-primary);
+            font-size: 16px;
+            line-height: 32px;
+            text-align: center;
+        }
+    </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>Steppers</h1>
+                    <p class="micl-appbar__subtitle">Showcasing MICL steppers</p>
+                </div>
+                <div id="settings-placeholder" class="micl-appbar__trailing"></div>
+            </header>
+
+            <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
+                <div class="micl-pane__column">
+                    <div class="micl-card-elevated">
+                        <div class="docs-icon" aria-hidden="true">A</div>
+                        <div class="micl-card__headline-s">
+                            <h2>Basic stepper with three steps</h2>
+                        </div>
+                        <div class="micl-card__content">
+                            <div class="micl-stepper" role="tablist" aria-label="My stepper">
+                                <div class="micl-stepper__steps" tabindex="-1">
+                                    <div class="micl-stepper__step" role="tabpanel" aria-current="step">
+                                        <h2>First step</h2>
+                                        <p class="md-sys-typescale-body-small">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div class="micl-stepper__step" role="tabpanel">
+                                        <h2>Second step</h2>
+                                        <p class="md-sys-typescale-body-medium">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div class="micl-stepper__step" role="tabpanel">
+                                        <h2>Last step</h2>
+                                        <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
+                                    </div>
+                                </div>
+                                <div class="micl-stepper__actions">
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
+                                    </div>
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="micl-card-outlined">
+                        <div class="docs-icon" aria-hidden="true">C</div>
+                        <div class="micl-card__headline-s">
+                            <h2>Stepper with progress dots</h2>
+                        </div>
+                        <div class="micl-card__content">
+                            <div class="micl-stepper" role="tablist" aria-label="My stepper">
+                                <div class="micl-stepper__steps" tabindex="-1">
+                                    <div class="micl-stepper__step" role="tabpanel" aria-current="step">
+                                        <h2>First step</h2>
+                                        <p class="md-sys-typescale-body-small">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div class="micl-stepper__step" role="tabpanel">
+                                        <h2>Second step</h2>
+                                        <p class="md-sys-typescale-body-medium">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div class="micl-stepper__step" role="tabpanel">
+                                        <h2>Last step</h2>
+                                        <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
+                                    </div>
+                                </div>
+                                <div class="micl-stepper__actions">
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
+                                    </div>
+                                    <div class="micl-stepper__progress-dots"></div>
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="micl-card-filled">
+                        <div class="docs-icon" aria-hidden="true">F</div>
+                        <div class="micl-card__headline-s">
+                            <h2>Non-linear stepper</h2>
+                        </div>
+                        <div class="micl-card__content">
+                            <div class="micl-stepper micl-stepper--nonlinear" role="tablist" aria-label="My stepper">
+                                <div class="micl-stepper__header" style="--md-sys-stepper-counter-style:upper-alpha">
+                                    <button type="button" role="tab" id="step1label" class="micl-button-text-xs" aria-controls="step4" aria-selected="true">
+                                        <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
+                                        First step
+                                    </button>
+                                    <button type="button" role="tab" id="step2label" class="micl-button-text-xs" aria-controls="step5">
+                                        <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
+                                        Second step
+                                    </button>
+                                    <button type="button" role="tab" id="step3label" class="micl-button-text-xs" aria-controls="step6">
+                                        <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
+                                        Last step
+                                    </button>
+                                </div>
+                                <div class="micl-stepper__steps" tabindex="-1">
+                                    <div id="step4" class="micl-stepper__step" role="tabpanel" aria-labelledby="step1label" aria-current="step">
+                                        <p class="md-sys-typescale-body-small">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div id="step5" class="micl-stepper__step" role="tabpanel" aria-labelledby="step2label">
+                                        <p class="md-sys-typescale-body-medium">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div id="step6" class="micl-stepper__step" role="tabpanel" aria-labelledby="step3label">
+                                        <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
+                                    </div>
+                                </div>
+                                <div class="micl-stepper__actions">
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
+                                    </div>
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="micl-pane__column">
+                    <div class="micl-card-filled">
+                        <div class="docs-icon" aria-hidden="true">B</div>
+                        <div class="micl-card__headline-s">
+                            <h2>Stepper with progress counter</h2>
+                        </div>
+                        <div class="micl-card__content">
+                            <div class="micl-stepper" role="tablist" aria-label="My stepper">
+                                <div class="micl-stepper__steps" tabindex="-1">
+                                    <div class="micl-stepper__step" role="tabpanel">
+                                        <h2>First step</h2>
+                                        <p class="md-sys-typescale-body-small">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div class="micl-stepper__step" role="tabpanel" aria-current="step">
+                                        <h2>Second step</h2>
+                                        <p class="md-sys-typescale-body-medium">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div class="micl-stepper__step" role="tabpanel">
+                                        <h2>Last step</h2>
+                                        <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
+                                    </div>
+                                </div>
+                                <div class="micl-stepper__actions">
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
+                                    </div>
+                                    <div class="md-sys-typescale-body-large" style="color:var(--md-sys-color-on-surface)">
+                                        <span class="micl-stepper__progress-current"></span>
+                                        <span> of </span>
+                                        <span class="micl-stepper__progress-total"></span>
+                                    </div>
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="micl-card-elevated">
+                        <div class="docs-icon" aria-hidden="true">D</div>
+                        <div class="micl-card__headline-s">
+                            <h2>Stepper with header</h2>
+                        </div>
+                        <div class="micl-card__content">
+                            <div class="micl-stepper" role="tablist" aria-label="My stepper">
+                                <div class="micl-stepper__header">
+                                    <button type="button" role="tab" id="step4label" class="micl-button-text-xs" aria-controls="step1" aria-selected="true">
+                                        <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
+                                        First step
+                                    </button>
+                                    <button type="button" role="tab" id="step5label" class="micl-button-text-xs" aria-controls="step2">
+                                        <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
+                                        Second step
+                                    </button>
+                                    <button type="button" role="tab" id="step6label" class="micl-button-text-xs" aria-controls="step3">
+                                        <span class="micl-stepper__progress-dot" aria-hidden="true"></span>
+                                        Last step
+                                    </button>
+                                </div>
+                                <div class="micl-stepper__steps" tabindex="-1">
+                                    <div id="step1" class="micl-stepper__step" role="tabpanel" aria-labelledby="step4label" aria-current="step">
+                                        <p class="md-sys-typescale-body-small">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div id="step2" class="micl-stepper__step" role="tabpanel" aria-labelledby="step5label">
+                                        <p class="md-sys-typescale-body-medium">Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                                    </div>
+                                    <div id="step3" class="micl-stepper__step" role="tabpanel" aria-labelledby="step6label">
+                                        <p class="md-sys-typescale-body-large">Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames.</p>
+                                    </div>
+                                </div>
+                                <div class="micl-stepper__actions">
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
+                                    </div>
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="micl-card-outlined">
+                        <div class="docs-icon" aria-hidden="true">G</div>
+                        <div class="micl-card__headline-s">
+                            <h2>Stepper with validation</h2>
+                        </div>
+                        <div class="micl-card__content">
+                            <form class="micl-stepper" role="tablist" aria-label="My stepper">
+                                <div class="micl-stepper__steps" tabindex="-1">
+                                    <fieldset class="micl-stepper__step" style="row-gap:16px" role="tabpanel" aria-current="step">
+                                        <div class="micl-textfield-outlined">
+                                            <label for="mytextfield1">Username</label>
+                                            <input type="text" id="mytextfield1" name="mytext" required maxlength="10">
+                                        </div>
+                                        <div class="micl-textfield-outlined">
+                                            <label for="mytextfield2">Password</label>
+                                            <input type="password" id="mytextfield2" name="mypassword" pattern="\d{4,4}" required>
+                                            <span class="micl-textfield__supporting-text">A password must consist of four digits</span>
+                                        </div>
+                                        <div class="micl-flex--vcenter">
+                                            <input type="checkbox" id="mycheckbox1" class="micl-checkbox" value="c1" required>
+                                            <label for="mycheckbox1" class="md-sys-typescale-body-medium">I agree to the terms and conditions</label>
+                                        </div>
+                                    </fieldset>
+                                    <fieldset class="micl-stepper__step" role="tabpanel">
+                                        <p class="md-sys-typescale-body-medium">Congratulations!</p>
+                                    </fieldset>
+                                </div>
+                                <div class="micl-stepper__actions">
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-back">Back</button>
+                                    </div>
+                                    <div>
+                                        <button type="button" class="micl-button-text-m micl-stepper__action-next">Next</button>
+                                    </div>
+                                </div>
+                            </form>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="micl-pane" style="flex-shrink:0.5">
+            <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>
+&lt;div class="micl-stepper" role="tablist" aria-label="My stepper"&gt;
+  &lt;div class="micl-stepper__steps"&gt;
+    &lt;div class="micl-stepper__step" role="tabpanel" aria-current="step"&gt;
+      &lt;h2&gt;First step&lt;/h2&gt;
+      &lt;p&gt;Content First step&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="micl-stepper__step" role="tabpanel"&gt;
+      &lt;h2&gt;Second step&lt;/h2&gt;
+      &lt;p&gt;Content Second step&lt;/p&gt;
+    &lt;/div&gt;
+    &lt;div class="micl-stepper__step" role="tabpanel"&gt;
+      &lt;h2&gt;Last step&lt;/h2&gt;
+      &lt;p&gt;Content Last step&lt;/p&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+
+  &lt;div class="micl-stepper__actions"&gt;
+    &lt;div&gt;
+      &lt;button type="button" class="micl-button-text-m micl-stepper__action-back"&gt;Back&lt;/button&gt;
+    &lt;/div&gt;
+    &lt;div&gt;
+      &lt;button type="button" class="micl-button-text-m micl-stepper__action-next"&gt;Next&lt;/button&gt;
+    &lt;/div&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+                    </code></pre>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/docs/switch.html

@@ -11,11 +11,15 @@
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
-        .micl-card-filled .micl-card__content,
-        .micl-card-outlined.unselectedicon .micl-card__content {
+        .micl-card-filled.noicons .micl-card__content {
             display: flex;
             flex-direction: column;
             align-items: flex-end;
+            text-align: end;
+        }
+        .micl-card-outlined.unselectedicon .micl-card__content {
+            display: flex;
+            flex-direction: column;
         }
         .micl-flex--vcenter {
             column-gap: 16px;
@@ -46,7 +50,7 @@
     <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-m" aria-label="Navigate to the main MICL Showcase page">
+                <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">
@@ -174,7 +178,7 @@
                     <h2>Code example</h2>
                 </div>
                 <div class="micl-card__content docs-code">
-                    <pre><code>
+                    <pre tabindex="-1"><code>
 &lt;div class="micl-flex--vcenter" style="column-gap:16px"&gt;
   &lt;input type="checkbox" class="micl-switch" id="id0" checked value="v0" role="switch"&gt;
   &lt;label for="id0" class="md-sys-typescale-body-medium"&gt;First Choice&lt;/label&gt;

package/docs/textfield.html

@@ -20,7 +20,7 @@
     <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-m" aria-label="Navigate to the main MICL Showcase page">
+                <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">
@@ -177,7 +177,7 @@
                     <h2>Code example</h2>
                 </div>
                 <div class="micl-card__content docs-code">
-                    <pre><code>
+                    <pre tabindex="-1"><code>
 &lt;div class="micl-textfield-outlined"&gt;
   &lt;label for="id0">Label text&lt;/label&gt;
   &lt;input type="text" id="id0"&gt;