material-inspired-component-library 3.0.0 → 3.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:()=>v});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,o=e(t);return o.filter(e=>e>i+4)[0]||o[n?o.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:o=>{if(!o.matches(n)||o.dataset.miclinitialized)return;o.dataset.miclinitialized="1";const r=o.querySelector(".micl-bottomsheet__headline");if(!r)return;const l=r.querySelector(".micl-bottomsheet__draghandle");l?.addEventListener("click",()=>{i(o,t(o,!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,o.classList.add("micl-bottomsheet--resizing")),m&&i(o,s+a-t)}function p(n){c=!1,o.classList.remove("micl-bottomsheet--resizing"),m&&(m=!1,n.clientY<a?i(o,t(o,!0)):o.getBoundingClientRect().height<48?i(o,0):i(o,(t=>{let n=t.getBoundingClientRect().height,i=e(t),o=i.filter(e=>e<n-4);return o[o.length-1]||i[0]})(o)),document.removeEventListener("mousemove",d),document.removeEventListener("mouseup",p))}r.addEventListener("mousedown",e=>{e.eventPhase===Event.AT_TARGET&&(c=!0,e.preventDefault(),a=e.clientY,s=o.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)}}})(),o="button[popovertarget],button.micl-button--toggle",r=(()=>{const e=e=>{e.target&&e.target instanceof HTMLButtonElement&&(e.target.popoverTargetElement instanceof HTMLDialogElement&&(e.target.popoverTargetElement.open?e.target.popoverTargetElement.close():e.target.popoverTargetElement.showModal()),e.target.classList.contains("micl-button--toggle")&&(e.target.classList.add("micl-button--toggled"),e.target.classList.toggle("micl-button--selected"),e.target.dataset.miclalt&&([e.target.textContent,e.target.dataset.miclalt]=[e.target.dataset.miclalt,e.target.textContent])))};return{initialize:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&!t.dataset.miclinitialized&&(t.dataset.miclinitialized="1",(t.popoverTargetElement instanceof HTMLDialogElement&&!t.popoverTargetElement.hasAttribute("popover")||t.classList.contains("micl-button--toggle"))&&t.addEventListener("click",e))},cleanup:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&(document.removeEventListener("click",e),delete t.dataset.miclinitialized)}}})(),l=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",a=(()=>{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 o=i.findIndex(e=>(e=>!!e&&e.matches(":has(input[type=checkbox]:checked)"))(e)),r=i.findIndex(e=>0===e.tabIndex),l=r;switch(t.key){case"ArrowDown":l=(r+1)%i.length,t.preventDefault();break;case"ArrowUp":l=(r-1+i.length)%i.length,t.preventDefault();break;case"Tab":-1===o?0!==r&&(i[r].tabIndex=-1,i[0].tabIndex=0):o!==r&&(i[r].tabIndex=-1,i[o].tabIndex=0);break;case"Enter":case" ":const e=t.target.querySelector("input[type=checkbox]");e instanceof HTMLInputElement&&(e.checked=!e.checked)}if(l!==r){i[r].tabIndex=-1,i[l].tabIndex=0,i[l].focus();const e=i[l].querySelector(":scope > button");e?.dispatchEvent(new MouseEvent("mouseenter",{bubbles:!0,cancelable:!0,view:window}))}}}})(),s=".micl-menu[popover]",c=(()=>{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()})}})}}})(),m=".micl-navigationrail__item[for]:not(.micl-navigationrail__item--disabled)",d={keydown:e=>{if(!(e instanceof KeyboardEvent&&e.target instanceof HTMLLabelElement&&e.target.matches(m)))return;const t=document.getElementById(e.target.htmlFor);if(t)switch(e.key){case"Enter":case" ":e.preventDefault(),t.checked||(t.checked=!t.checked)}}},p="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",u=(()=>{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},o=e=>{let t=JSON.stringify(e.value+""),i=n(e);i&&(i.style.setProperty("--md-sys-slider-value",e.value),i.style.setProperty("--md-sys-slider-tip",t)),e.style.setProperty("--md-sys-slider-value",e.value),e.style.setProperty("--md-sys-slider-tip",t)};return{initialize:r=>{if(!r.matches(p))return;(e=>{let t=e.max||"100";n(e)?.style.setProperty("--md-sys-slider-max",t),e.style.setProperty("--md-sys-slider-max",t)})(r),(e=>{let t=e.min||"0";n(e)?.style.setProperty("--md-sys-slider-min",t),e.style.setProperty("--md-sys-slider-min",t)})(r),o(r),(e=>{let t=n(e);if(t){const n=window.getComputedStyle(e);["--md-sys-slider-handle-height","--md-sys-slider-track-height"].forEach(e=>{t.style.setProperty(e,n.getPropertyValue(e))})}})(r);const l=parseFloat(r.max),a=parseFloat(r.min),s=r.getBoundingClientRect(),c=((e,t,n)=>{const i=[];return e.list&&t>n&&e.list.querySelectorAll("option[value]").forEach(e=>{let o=parseFloat(e.value);!isNaN(o)&&o>=n&&o<=t&&i.push(o)}),i})(r,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"),o=n.getContext("2d");if(o){o.font=window.getComputedStyle(r).getPropertyValue("font");let n=o.measureText(t).width,l=o.measureText(e).width,a=s.width-10,m=0,d="";c.forEach(i=>{let o=a*i/100,r=Math.round((o-m)/n)-1;for(let e=0;e<r;e++)d+=t,m+=n;d+=e,m+=l}),i(r,d)}n.remove()}else i(r,e)},input:e=>{e.target.matches(p)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&o(e.target)}}})(),g=".micl-textfield-outlined > input,.micl-textfield-filled > input",f=".micl-textfield-outlined > select,.micl-textfield-filled > select",h=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",y=(()=>{const e=".micl-textfield__character-counter";return{initialize:t=>{if(t.dataset.miclinitialized)return;if(t.dataset.miclinitialized="1",t.value&&(t.dataset.miclvalue="1"),t instanceof HTMLSelectElement||!t.maxLength)return;const n=t.parentElement?.querySelector(e);n&&(n.textContent=`${t.value.length}/${t.maxLength}`)},input:t=>{if(!t.target.matches(`${g},${f},${h}`)||!(t.target instanceof HTMLInputElement||t.target instanceof HTMLSelectElement||t.target instanceof HTMLTextAreaElement)||!t.target.dataset.miclinitialized||t.target.disabled)return;if(t.target.value?t.target.dataset.miclvalue="1":delete t.target.dataset.miclvalue,t.target instanceof HTMLSelectElement||!t.target.maxLength)return;const n=t.target.parentElement?.querySelector(e);n&&(n.textContent=`${t.target.value.length}/${t.target.maxLength}`)}}})(),v=(()=>{const e={[n]:{component:i,type:HTMLDialogElement},[o]:{component:r,type:HTMLButtonElement},[l]:{component:a,type:HTMLElement},[s]:{component:c,type:HTMLElement},[m]:{component:d,type:HTMLLabelElement},[f]:{component:y,type:HTMLSelectElement},[p]:{component:u,type:HTMLInputElement},[h]:{component:y,type:HTMLTextAreaElement},[g]:{component:y,type:HTMLInputElement}},t=Object.keys(e).join(","),v=t=>{for(const[n,{component:i,type:o}]of Object.entries(e))if(t.matches(n)&&t instanceof o&&"function"==typeof i.initialize)return void i.initialize(t)},E=e=>{e.querySelectorAll(t).forEach(v),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")})})},b=t=>{for(const[n,{component:i,type:o}]of Object.entries(e))if(t.matches(n)&&t instanceof o&&"function"==typeof i.cleanup)return void i.cleanup(t)},L=e=>{e.querySelectorAll(t).forEach(b)},T=()=>{new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(t)&&v(e),e.querySelectorAll(t).forEach(v))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(t)&&b(e),L(e))}))})}).observe(document.body,{childList:!0,subtree:!0}),E(document),document.addEventListener("input",t=>{for(const[n,{component:i,type:o}]of Object.entries(e))if(t.target.matches(n)&&t.target instanceof o&&"function"==typeof i.input)return void i.input(t)}),document.addEventListener("keydown",t=>{for(const[n,{component:i,type:o}]of Object.entries(e))if(t.target.matches(n)&&t.target instanceof o&&"function"==typeof i.keydown)return void i.keydown(t)})},x=()=>{document.removeEventListener("DOMContentLoaded",x),T()};return"loading"!==document.readyState?T():document.addEventListener("DOMContentLoaded",x),{initialize:()=>E(document),cleanup:()=>L(document)}})()})(),t})());
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={d:(t,n)=>{for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};return(()=>{e.r(t),e.d(t,{default:()=>L});const n="dialog.micl-bottomsheet",i=(()=>{const e=e=>{let t=parseInt(e.dataset.miclfitheight||"0",10),n=parseInt(window.getComputedStyle(e).getPropertyValue("max-block-size"),10),i=(e.dataset.miclsnapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>=0&&e<=n);return t<1&&(t=Math.min(e.getBoundingClientRect().height,n),e.dataset.miclfitheight=`${t}`),[...new Set(i.concat([t]).sort())]},t=(t,n)=>{let i=t.getBoundingClientRect().height,r=e(t);return r.filter(e=>e>i+4)[0]||r[n?r.length-1:0]},i=(e,t)=>{t<1?(delete e.dataset.miclfitheight,e.style.removeProperty("--md-sys-bottomsheet-height"),e[e.popover?"hidePopover":"close"]()):e.style.setProperty("--md-sys-bottomsheet-height",`${t}px`)};return{initialize:r=>{if(!r.matches(n)||r.dataset.miclinitialized)return;r.dataset.miclinitialized="1";const l=r.querySelector(".micl-bottomsheet__headline");if(!l)return;const o=l.querySelector(".micl-bottomsheet__draghandle");o?.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))}l.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",l=(()=>{const e=e=>{e.target&&e.target instanceof HTMLButtonElement&&(e.target.popoverTargetElement instanceof HTMLDialogElement&&(e.target.popoverTargetElement.open?e.target.popoverTargetElement.close():e.target.popoverTargetElement.showModal()),e.target.classList.contains("micl-button--toggle")&&(e.target.classList.add("micl-button--toggled"),e.target.classList.toggle("micl-button--selected"),e.target.dataset.miclalt&&([e.target.textContent,e.target.dataset.miclalt]=[e.target.dataset.miclalt,e.target.textContent])))};return{initialize:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&!t.dataset.miclinitialized&&(t.dataset.miclinitialized="1",(t.popoverTargetElement instanceof HTMLDialogElement&&!t.popoverTargetElement.hasAttribute("popover")||t.classList.contains("micl-button--toggle"))&&t.addEventListener("click",e))},cleanup:t=>{t.matches("button[popovertarget],button.micl-button--toggle")&&(document.removeEventListener("click",e),delete t.dataset.miclinitialized)}}})(),o=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",a=(()=>{const e=e=>!!e&&e.classList.contains("micl-list-item--disabled");return{keydown:t=>{if(!(t instanceof KeyboardEvent&&t.target instanceof Element&&t.target.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const n=t.target.parentElement;if(!n)return;let i=[];if(n instanceof HTMLDetailsElement?i=Array.from(n.parentElement?.children||[]).map(t=>{let n=t.querySelector(":scope > summary");return e(n)?null:n}).filter(e=>!!e):n instanceof HTMLUListElement&&(i=Array.from(n.children).map(t=>t instanceof HTMLLIElement&&!e(t)?t:null).filter(e=>!!e)),0===i.length)return;let r=i.findIndex(e=>(e=>!!e&&e.matches(":has(input[type=checkbox]:checked)"))(e)),l=i.findIndex(e=>0===e.tabIndex),o=l;switch(t.key){case"ArrowDown":o=(l+1)%i.length,t.preventDefault();break;case"ArrowUp":o=(l-1+i.length)%i.length,t.preventDefault();break;case"Tab":-1===r?0!==l&&(i[l].tabIndex=-1,i[0].tabIndex=0):r!==l&&(i[l].tabIndex=-1,i[r].tabIndex=0);break;case"Enter":case" ":const e=t.target.querySelector("input[type=checkbox]");e instanceof HTMLInputElement&&(e.checked=!e.checked)}if(o!==l){i[l].tabIndex=-1,i[o].tabIndex=0,i[o].focus();const e=i[o].querySelector(":scope > button");e?.dispatchEvent(new MouseEvent("mouseenter",{bubbles:!0,cancelable:!0,view:window}))}}}})(),s=".micl-menu[popover]",c=(()=>{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()})}})}}})(),m=".micl-navigationrail__item[for]:not(.micl-navigationrail__item--disabled)",d={keydown:e=>{if(!(e instanceof KeyboardEvent&&e.target instanceof HTMLLabelElement&&e.target.matches(m)))return;const t=document.getElementById(e.target.htmlFor);if(t)switch(e.key){case"Enter":case" ":e.preventDefault(),t.checked||(t.checked=!t.checked)}}},p="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",u=(()=>{const e=String.fromCharCode(8226),t=String.fromCharCode(8201),n=e=>e.parentElement?.classList.contains("micl-slider__container")?e.parentElement:null,i=(e,t)=>{e.dataset.miclsliderticks=t},r=e=>{let t=JSON.stringify(e.value+""),i=n(e);i&&(i.style.setProperty("--md-sys-slider-value",e.value),i.style.setProperty("--md-sys-slider-tip",t)),e.style.setProperty("--md-sys-slider-value",e.value),e.style.setProperty("--md-sys-slider-tip",t)};return{initialize:l=>{if(!l.matches(p))return;(e=>{let t=e.max||"100";n(e)?.style.setProperty("--md-sys-slider-max",t),e.style.setProperty("--md-sys-slider-max",t)})(l),(e=>{let t=e.min||"0";n(e)?.style.setProperty("--md-sys-slider-min",t),e.style.setProperty("--md-sys-slider-min",t)})(l),r(l),(e=>{let t=n(e);if(t){const n=window.getComputedStyle(e);["--md-sys-slider-handle-height","--md-sys-slider-track-height"].forEach(e=>{t.style.setProperty(e,n.getPropertyValue(e))})}})(l);const o=parseFloat(l.max),a=parseFloat(l.min),s=l.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})(l,o,a).sort((e,t)=>e-t).map(e=>Math.round(100*(e-a)/(o-a)));if(c.length>0){const n=document.createElement("canvas"),r=n.getContext("2d");if(r){r.font=window.getComputedStyle(l).getPropertyValue("font");let n=r.measureText(t).width,o=r.measureText(e).width,a=s.width-10,m=0,d="";c.forEach(i=>{let r=a*i/100,l=Math.round((r-m)/n)-1;for(let e=0;e<l;e++)d+=t,m+=n;d+=e,m+=o}),i(l,d)}n.remove()}else i(l,e)},input:e=>{e.target.matches(p)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&r(e.target)}}})(),g=".micl-stepper",f=(()=>{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):null)},t=e=>{e.currentTarget&&"transform"===e.propertyName&&(e.currentTarget.classList.remove("micl-stepper__step--fromcurrent","micl-stepper__step--tocurrent"),e.currentTarget.removeEventListener("transitionend",t))},n=(e,t)=>{t&&e.forEach(e=>{e.classList.toggle("micl-hidden",!t[e.classList.contains("micl-stepper--gonext")?"nextElementSibling":"previousElementSibling"]?.classList.contains("micl-stepper__step"))})},i=(e,t)=>{e.querySelectorAll("[data-step]").forEach(e=>{e.classList.toggle("micl-hidden",e.dataset.step!==t.dataset.miclstep)})};return{initialize:r=>{if(!r.matches(g)||r.dataset.miclinitialized)return;r.dataset.miclinitialized="1",r.querySelectorAll(".micl-stepper__step").forEach((e,t)=>{e.dataset.miclstep=`${t+1}`});const l=e(r),o=r.querySelectorAll("button.micl-stepper--goback,button.micl-stepper--gonext");n([...o],l),l&&i(r,l),o.forEach(l=>{l.addEventListener("click",()=>{const a=(t=>{let n=e(t);return n&&(n.querySelectorAll("input:required,select:required,textarea:required").forEach(e=>{e.checkValidity()||(n=null)}),n?.querySelectorAll("fieldset.micl-checkbox-group[data-miclname]").forEach(e=>{let t=0;e.querySelectorAll(`.micl-checkbox[name="${e.dataset.miclname}"]`).forEach(e=>{e.checked&&t++}),0===t&&console.log("NOT ENGOUGH CHECKS")})),n})(r);if(!a)return;const s=a[l.classList.contains("micl-stepper--gonext")?"nextElementSibling":"previousElementSibling"];s?.classList.contains("micl-stepper__step")&&(a.addEventListener("transitionend",t),a.classList.add("micl-stepper__step--fromcurrent"),a.offsetHeight,s.addEventListener("transitionend",t),s.classList.add("micl-stepper__step--tocurrent"),s.offsetHeight,s.classList.add("micl-stepper__step--current"),a.classList.remove("micl-stepper__step--current"),a.offsetHeight,n([...o],s),i(r,s))})})}}})(),h=".micl-textfield-outlined > input,.micl-textfield-filled > input",y=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",v=".micl-textfield-filled > select,.micl-textfield-outlined > select",E=(()=>{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(`${h},${v},${y}`)&&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)}}})(),L=(()=>{const e={[n]:{component:i,type:HTMLDialogElement},[r]:{component:l,type:HTMLButtonElement},[o]:{component:a,type:HTMLElement},[s]:{component:c,type:HTMLElement},[m]:{component:d,type:HTMLLabelElement},[v]:{component:E,type:HTMLSelectElement},[p]:{component:u,type:HTMLInputElement},[g]:{component:f,type:HTMLElement},[y]:{component:E,type:HTMLTextAreaElement},[h]:{component:E,type:HTMLInputElement}},t=Object.keys(e).join(","),L=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)},b=e=>{e.querySelectorAll(t).forEach(L),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")})})},T=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)},x=e=>{e.querySelectorAll(t).forEach(T)},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)&&L(e),e.querySelectorAll(t).forEach(L))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(t)&&T(e),x(e))}))})}).observe(document.body,{childList:!0,subtree:!0}),b(document),document.addEventListener("input",S),document.addEventListener("keydown",S),document.addEventListener("invalid",S,!0)},_=()=>{document.removeEventListener("DOMContentLoaded",_),M()};return"loading"!==document.readyState?M():document.addEventListener("DOMContentLoaded",_),{initialize:()=>b(document),cleanup:()=>x(document)}})()})(),t})());

package/docs/navigationrail.html

@@ -28,6 +28,7 @@
             <label for="item1" class="micl-navigationrail__item" tabindex="0">
                 <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox" aria-hidden="true">inbox</span>
                 <span class="micl-navigationrail__text">Inbox</span>
+                <span class="micl-badge" style="position-anchor:--inbox">97</span>
             </label>
             <input type="radio" id="item2" name="navitem" value="email_outbox">
             <label for="item2" class="micl-navigationrail__item" tabindex="0">
@@ -38,6 +39,7 @@
             <label for="item3" class="micl-navigationrail__item" tabindex="0">
                 <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites" aria-hidden="true">favorite</span>
                 <span class="micl-navigationrail__text">Favorites</span>
+                <span class="micl-badge micl-badge--small" style="position-anchor:--favorites"></span>
             </label>
             <input type="radio" id="item4" name="navitem" value="email_trash">
             <label for="item4" class="micl-navigationrail__item" tabindex="0">
@@ -45,9 +47,6 @@
                 <span class="micl-navigationrail__text">Trash</span>
             </label>
         </div>
-
-        <span class="micl-badge" style="position-anchor:--inbox;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px">97</span>
-        <span class="micl-badge micl-badge--small" style="position-anchor:--favorites;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px"></span>
     <!-- </nav> -->
     </dialog>
     <main class="micl-body">

package/docs/radio.html

@@ -16,10 +16,6 @@
             flex-direction: column;
             align-items: flex-end;
         }
-        .radio {
-            display: flex;
-            align-items: center;
-        }
     </style>
 </head>
 <body class="micl-window light">
@@ -40,19 +36,19 @@
                 <div class="micl-pane__column">
                     <div class="micl-card-elevated">
                         <div class="micl-card__content">
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <input type="radio" class="micl-radio" id="myradio1" name="choices" checked value="c1">
                                 <label for="myradio1" class="md-sys-typescale-body-medium">First Choice</label>
                             </div>
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <input type="radio" class="micl-radio" id="myradio2" name="choices" value="c2">
                                 <label for="myradio2" class="md-sys-typescale-body-medium">Second Choice</label>
                             </div>
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <input type="radio" class="micl-radio" id="myradio3" name="choices" value="c3">
                                 <label for="myradio3" class="md-sys-typescale-body-medium">Third Choice</label>
                             </div>
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <input type="radio" class="micl-radio" id="myradio4" name="choices" value="c4" disabled>
                                 <label for="myradio4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
                             </div>
@@ -60,19 +56,19 @@
                     </div>
                     <div class="micl-card-filled">
                         <div class="micl-card__content">
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <input type="radio" class="micl-radio" id="myradio11" name="alternatives" checked value="c1">
                                 <label for="myradio11" class="md-sys-typescale-body-medium">First Choice</label>
                             </div>
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <input type="radio" class="micl-radio" id="myradio12" name="alternatives" value="c2">
                                 <label for="myradio12" class="md-sys-typescale-body-medium">Second Choice</label>
                             </div>
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <input type="radio" class="micl-radio" id="myradio13" name="alternatives" value="c3">
                                 <label for="myradio13" class="md-sys-typescale-body-medium">Third Choice</label>
                             </div>
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <input type="radio" class="micl-radio" id="myradio14" name="alternatives" value="c4" disabled>
                                 <label for="myradio14" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
                             </div>
@@ -82,19 +78,19 @@
                 <div class="micl-pane__column">
                     <div class="micl-card-outlined">
                         <div class="micl-card__content">
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <label for="myradio21" class="md-sys-typescale-body-medium">First Choice</label>
                                 <input type="radio" class="micl-radio" id="myradio21" name="selection" checked value="c1">
                             </div>
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <label for="myradio22" class="md-sys-typescale-body-medium">Second Choice</label>
                                 <input type="radio" class="micl-radio" id="myradio22" name="selection" value="c2">
                             </div>
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <label for="myradio23" class="md-sys-typescale-body-medium">Third Choice</label>
                                 <input type="radio" class="micl-radio" id="myradio23" name="selection" value="c3">
                             </div>
-                            <div class="radio">
+                            <div class="micl-flex--vcenter">
                                 <label for="myradio24" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
                                 <input type="radio" class="micl-radio" id="myradio24" name="selection" value="c4" disabled>
                             </div>
@@ -110,7 +106,7 @@
                 </div>
                 <div class="micl-card__content docs-code">
                     <pre><code>
-&lt;div style="display:flex;align-items:center"&gt;
+&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;
 &lt;/div&gt;

package/docs/select.html

@@ -20,6 +20,12 @@
         .micl-list-item__thumbnail {
             height: 56px;
         }
+        .bigdot {
+            width: 24px;
+            min-width: 24px;
+            height: 24px;
+            border-radius: 100%;
+        }
     </style>
 </head>
 <body class="micl-window light">
@@ -136,7 +142,8 @@
                                     <option class="micl-list-item-one" value="BR" disabled>
                                         <span class="micl-list-item__text">Brazil</span>
                                     </option>
-                                    <option class="micl-list-item-one" value="CL">
+                                    <hr class="micl-divider">
+                                    <option class="micl-list-item-one" selected value="CL">
                                         <span class="micl-list-item__text">Chile</span>
                                     </option>
                                     <option class="micl-list-item-one" value="CO">
@@ -149,7 +156,39 @@
                             </div>
                             <div class="micl-textfield-filled">
                                 <label for="myselect5">Country</label>
-                                <select id="myselect5" disabled>
+                                <select id="myselect5">
+                                    <option class="micl-list-item-one" value=""></option>
+                                    <option class="micl-list-item-one" value="AR">
+                                        <span class="micl-list-item__text">Argentina</span>
+                                        <span class="bigdot" style="background-color:teal"></span>
+                                    </option>
+                                    <option class="micl-list-item-one" value="BO">
+                                        <span class="micl-list-item__text">Bolivia</span>
+                                        <span class="bigdot" style="background-color:yellow"></span>
+                                    </option>
+                                    <option class="micl-list-item-one" value="BR">
+                                        <span class="micl-list-item__text">Brazil</span>
+                                        <span class="bigdot" style="background-color:burlywood"></span>
+                                    </option>
+                                    <hr class="micl-divider">
+                                    <option class="micl-list-item-one" value="CL">
+                                        <span class="micl-list-item__text">Chile</span>
+                                        <span class="bigdot" style="background-color:coral"></span>
+                                    </option>
+                                    <option class="micl-list-item-one" value="CO">
+                                        <span class="micl-list-item__text">Colombia</span>
+                                        <span class="bigdot" style="background-color:darkkhaki"></span>
+                                    </option>
+                                    <hr class="micl-divider">
+                                    <option class="micl-list-item-one" value="EC">
+                                        <span class="micl-list-item__text">Ecuador</span>
+                                        <span class="bigdot" style="background-color:darkviolet"></span>
+                                    </option>
+                                </select>
+                            </div>
+                            <div class="micl-textfield-filled">
+                                <label for="myselect6">Country</label>
+                                <select id="myselect6" disabled>
                                     <option class="micl-list-item-one" value=""></option>
                                     <option class="micl-list-item-one" value="AR">
                                         <span class="micl-list-item__text">Argentina</span>
@@ -179,8 +218,8 @@
                                 </div>
                                 <div class="micl-dialog__content">
                                     <div class="micl-textfield-outlined" style="margin:8px">
-                                        <label for="myselect5">Country</label>
-                                        <select id="myselect5">
+                                        <label for="myselect7">Country</label>
+                                        <select id="myselect7">
                                             <option class="micl-list-item-two" value="AR">
                                                 <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
                                             </option>
@@ -221,8 +260,8 @@
                 <div class="micl-card__content docs-code">
                     <pre><code>
 &lt;div class="micl-textfield-outlined"&gt;
-  &lt;label for="myselect1"&gt;Country&lt;/label&gt;
-  &lt;select id="myselect1"&gt;
+  &lt;label for="myselect"&gt;Country&lt;/label&gt;
+  &lt;select id="myselect"&gt;
     &lt;option class="micl-list-item-one" value=""&gt;&lt;/option&gt;
     &lt;option class="micl-list-item-one" value="AR"&gt;
       &lt;span class="micl-list-item__text"&gt;Argentina&lt;/span&gt;
@@ -230,6 +269,7 @@
     &lt;option class="micl-list-item-one" value="BO"&gt;
       &lt;span class="micl-list-item__text"&gt;Bolivia&lt;/span&gt;
     &lt;/option&gt;
+    &lt;hr class="micl-divider"&gt;
     &lt;option class="micl-list-item-one" value="BR" disabled&gt;
       &lt;span class="micl-list-item__text"&gt;Brazil&lt;/span&gt;
     &lt;/option&gt;

package/docs/switch.html

@@ -17,16 +17,19 @@
             flex-direction: column;
             align-items: flex-end;
         }
-        .switch {
-            display: flex;
-            align-items: center;
+        .micl-flex--vcenter {
             column-gap: 16px;
-            height: 48px;
         }
-        .micl-card-outlined.unselectedicon .switch {
+        .micl-card-outlined.unselectedicon .micl-flex--vcenter {
             width: 100%;
             justify-content: space-between;
         }
+        .micl-card-outlined.unselectedicon label {
+            display: flex;
+            flex-direction: column;
+            flex-basis: 100%;
+            margin-block: 12px;
+        }
         .noicons input[type=checkbox].micl-switch {
             --md-sys-switch-selected-icon: "";
             --md-sys-switch-unselected-icon: "";
@@ -60,19 +63,19 @@
                             <h2>Switches with icons</h2>
                         </div>
                         <div class="micl-card__content">
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <input type="checkbox" class="micl-switch" id="myswitch1" checked value="c1" role="switch">
                                 <label for="myswitch1" class="md-sys-typescale-body-medium">First Choice</label>
                             </div>
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <input type="checkbox" class="micl-switch" id="myswitch2" value="c2" role="switch">
                                 <label for="myswitch2" class="md-sys-typescale-body-medium">Second Choice</label>
                             </div>
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <input type="checkbox" class="micl-switch" id="myswitch3" value="c3" disabled role="switch">
                                 <label for="myswitch3" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
                             </div>
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <input type="checkbox" class="micl-switch" id="myswitch4" value="c4" checked disabled role="switch">
                                 <label for="myswitch4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
                             </div>
@@ -83,19 +86,19 @@
                             <h2>Switches without icons</h2>
                         </div>
                         <div class="micl-card__content">
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <label for="myswitch5" class="md-sys-typescale-body-medium">First Choice</label>
                                 <input type="checkbox" class="micl-switch" id="myswitch5" checked value="c1" role="switch">
                             </div>
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <label for="myswitch6" class="md-sys-typescale-body-medium">Second Choice</label>
                                 <input type="checkbox" class="micl-switch" id="myswitch6" value="c2" role="switch">
                             </div>
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <label for="myswitch7" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
                                 <input type="checkbox" class="micl-switch" id="myswitch7" value="c3" disabled role="switch">
                             </div>
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <label for="myswitch8" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
                                 <input type="checkbox" class="micl-switch" id="myswitch8" value="c4" checked disabled role="switch">
                             </div>
@@ -108,19 +111,19 @@
                             <h2>Switches with selected icon</h2>
                         </div>
                         <div class="micl-card__content">
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <input type="checkbox" class="micl-switch" id="myswitch9" checked value="c1" role="switch">
                                 <label for="myswitch9" class="md-sys-typescale-body-medium">First Choice</label>
                             </div>
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <input type="checkbox" class="micl-switch" id="myswitch10" value="c2" role="switch">
                                 <label for="myswitch10" class="md-sys-typescale-body-medium">Second Choice</label>
                             </div>
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <input type="checkbox" class="micl-switch" id="myswitch11" value="c3" disabled role="switch">
                                 <label for="myswitch11" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
                             </div>
-                            <div class="switch">
+                            <div class="micl-flex--vcenter">
                                 <input type="checkbox" class="micl-switch" id="myswitch12" value="c4" checked disabled role="switch">
                                 <label for="myswitch12" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
                             </div>
@@ -132,20 +135,32 @@
                             <h2>Switches with unselected icon</h2>
                         </div>
                         <div class="micl-card__content">
-                            <div class="switch">
-                                <label for="myswitch13" class="md-sys-typescale-body-medium">First Choice</label>
+                            <div class="micl-flex--vcenter">
+                                <label for="myswitch13">
+                                    <span class="md-sys-typescale-body-large">First Choice</span>
+                                    <span class="md-sys-typescale-body-small">This is the first choice</span>
+                                </label>
                                 <input type="checkbox" class="micl-switch" id="myswitch13" checked value="c1" role="switch">
                             </div>
-                            <div class="switch">
-                                <label for="myswitch14" class="md-sys-typescale-body-medium">Second Choice</label>
+                            <div class="micl-flex--vcenter">
+                                <label for="myswitch14">
+                                    <span class="md-sys-typescale-body-large">Second Choice</span>
+                                    <span class="md-sys-typescale-body-small">This is the second choice</span>
+                                </label>
                                 <input type="checkbox" class="micl-switch" id="myswitch14" value="c2" role="switch">
                             </div>
-                            <div class="switch">
-                                <label for="myswitch15" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
+                            <div class="micl-flex--vcenter">
+                                <label for="myswitch15">
+                                    <span class="md-sys-typescale-body-large">Third Choice</span>
+                                    <span class="md-sys-typescale-body-small">This is the third choice</span>
+                                </label>
                                 <input type="checkbox" class="micl-switch" id="myswitch15" value="c3" disabled role="switch">
                             </div>
-                            <div class="switch">
-                                <label for="myswitch16" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
+                            <div class="micl-flex--vcenter">
+                                <label for="myswitch16">
+                                    <span class="md-sys-typescale-body-large">Fourth Choice</span>
+                                    <span class="md-sys-typescale-body-small">This is the fourth choice</span>
+                                </label>
                                 <input type="checkbox" class="micl-switch" id="myswitch16" value="c4" checked disabled role="switch">
                             </div>
                         </div>
@@ -160,7 +175,7 @@
                 </div>
                 <div class="micl-card__content docs-code">
                     <pre><code>
-&lt;div style="display:flex;align-items:center;column-gap:16px"&gt;
+&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;
 &lt;/div&gt;

package/layout/index.scss

@@ -19,7 +19,7 @@
 // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 // SOFTWARE.
 
-@use '../components/iconbutton';
+@use '../styles/shapes';
 
 $md-sys-window-compact-max: 599px;
 $md-sys-window-medium-min: 600px;
@@ -46,6 +46,8 @@ $md-sys-padding-l: 20px;
 $md-sys-padding-xl: 24px;
 $md-sys-padding-xxl: 28px;
 
+$md-sys-icon-size: 24px;
+
 :root {
     --md-sys-layout-pane-spacer: #{$md-sys-pane-spacer};
 
@@ -57,6 +59,8 @@ $md-sys-padding-xxl: 28px;
     --md-sys-layout-padding-xl: #{$md-sys-padding-xl};
     --md-sys-layout-padding-xxl: #{$md-sys-padding-xxl};
 
+    --md-sys-layout-icon-size: #{$md-sys-icon-size};
+
     @media (max-width: $md-sys-window-compact-max) {
         --md-sys-layout-window-margin: #{$md-sys-window-margin-compact};
     }
@@ -98,7 +102,7 @@ $md-sys-padding-xxl: 28px;
             block-size: inherit;
             min-block-size: inherit;
             margin: 0;
-            padding-block-end: var(--md-sys-navigationrail-top-space);
+            padding-block-end: var(--md-sys-navigationrail-top-space, 0px);
             border-radius: var(--md-sys-layout-spatial-radius);
         }
         .micl-body {
@@ -166,18 +170,7 @@ $md-sys-padding-xxl: 28px;
     }
 }
 
-.micl-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-}
-
 @media (max-width: $md-sys-window-compact-max) {
-    :root {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-compact};
-    }
-
     .micl-body.micl-body--stacked-to-medium,
     .micl-body.micl-body--stacked-to-expanded,
     .micl-body.micl-body--stacked-to-large,
@@ -198,10 +191,6 @@ $md-sys-padding-xxl: 28px;
     }
 }
 @media (min-width: $md-sys-window-medium-min) and (max-width: $md-sys-window-medium-max) {
-    :root {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-medium};
-    }
-
     .micl-body.micl-body--stacked-to-expanded,
     .micl-body.micl-body--stacked-to-large,
     .micl-body.micl-body--stacked-to-extralarge {
@@ -219,10 +208,6 @@ $md-sys-padding-xxl: 28px;
     }
 }
 @media (min-width: $md-sys-window-expanded-min) and (max-width: $md-sys-window-expanded-max) {
-    :root {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-expanded};
-    }
-
     .micl-body.micl-body--stacked-to-large,
     .micl-body.micl-body--stacked-to-extralarge {
         flex-direction: column;
@@ -237,10 +222,6 @@ $md-sys-padding-xxl: 28px;
     }
 }
 @media (min-width: $md-sys-window-large-min) and (max-width: $md-sys-window-large-max) {
-    :root {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-large};
-    }
-
     .micl-body.micl-body--stacked-to-extralarge {
         flex-direction: column;
     }
@@ -251,8 +232,35 @@ $md-sys-padding-xxl: 28px;
         flex-direction: column;
     }
 }
-@media (min-width: $md-sys-window-extralarge-min) {
-    :root {
-        --md-sys-layout-window-margin: #{$md-sys-window-margin-extralarge};
-    }
+
+.micl-hidden {
+    display: none !important;
+}
+
+.micl-flex--vcenter {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.micl-grid-iconfield {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    row-gap: var(--md-sys-layout-padding-xl, 24px);
+    background-color: inherit;
+}
+.micl-grid-iconfield__icon {
+    grid-column: 1;
+    margin-block-start: 0.6rem;
+}
+.micl-grid-iconfield__field {
+    grid-column: 2;
+}
+
+.micl-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
 }