material-inspired-component-library 1.1.0 → 1.2.1

package/docs/micl.js

@@ -1 +1 @@
-(()=>{"use strict";(()=>{const e="dialog.micl-bottomsheet",t=(()=>{var e=0;const t=t=>{let n=parseInt(window.getComputedStyle(t).getPropertyValue("max-height")),i=(t.dataset.snapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>0&&e<=n);return e||(e=t.getBoundingClientRect().height),[...new Set(i.concat([e,n]).sort())]},n=(e,n)=>{let i=e.getBoundingClientRect().height,o=t(e);return o.filter(e=>e>i+4)[0]||o[n?o.length-1:0]},i=(e,t)=>{e.style.setProperty("--md-sys-bottomsheet-height",`${t}px`)};return{initialize:e=>{if(!e.matches("dialog.micl-bottomsheet")||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const o=e.querySelector(".micl-bottomsheet__headline");if(!o)return;const l=o.querySelector(".micl-bottomsheet__draghandle");l?.addEventListener("click",()=>{const t=n(e,!1);t>4&&i(e,t)});let r,a,c=!1,s=!1;function m(t){const n=t.clientY;c&&Math.abs(r-n)>4&&(c=!1,s=!0,e.classList.add("micl-bottomsheet--resizing")),s&&i(e,a+r-n)}function d(o){c=!1,e.classList.remove("micl-bottomsheet--resizing"),s&&(s=!1,o.clientY<r?i(e,n(e,!0)):e.getBoundingClientRect().height<48?(e.popover&&e.hidePopover(),i(e,a)):i(e,(e=>{let n=e.getBoundingClientRect().height,i=t(e),o=i.filter(e=>e<n-4);return o[o.length-1]||i[0]})(e)),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",d))}o.addEventListener("mousedown",t=>{t.eventPhase===Event.AT_TARGET&&(c=!0,t.preventDefault(),r=t.clientY,a=e.getBoundingClientRect().height,document.addEventListener("mousemove",m),document.addEventListener("mouseup",d))})},cleanup:e=>{e.matches("dialog.micl-bottomsheet")&&delete e.dataset.miclinitialized}}})(),n="button[popovertarget],button.micl-button--toggle",i=(()=>{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.toggle("micl-button--selected"))};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-checkbox",l={keydown:e=>{if(e.target.matches(o)&&e instanceof KeyboardEvent&&e.target instanceof HTMLInputElement&&!e.target.disabled)switch(e.key){case"Enter":case" ":e.target.checked=!e.target.checked,e.preventDefault()}}},r=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",a=(()=>{const e=e=>!!e&&e.classList.contains("micl-list-item--disabled"),t=e=>!!e&&e.matches(":has(input[type=checkbox]:checked)");return{keydown:n=>{if(!(n instanceof KeyboardEvent&&n.target instanceof Element&&n.target.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const i=n.target.parentElement;if(!i)return;let o=[];if(i instanceof HTMLDetailsElement?o=Array.from(i.parentElement?.children||[]).map(t=>{let n=t.querySelector(":scope > summary");return e(n)?null:n}).filter(e=>!!e):i instanceof HTMLUListElement&&(o=Array.from(i.children).map(t=>t instanceof HTMLLIElement&&!e(t)?t:null).filter(e=>!!e)),0===o.length)return;let l=o.findIndex(e=>t(e));-1===l&&(l=o.findIndex(e=>0===e.tabIndex)),-1===l&&(l=0);let r=l;switch(n.key){case"ArrowDown":r=(l+1)%o.length,n.preventDefault();break;case"ArrowUp":r=(l-1+o.length)%o.length,n.preventDefault();break;case"Tab":let e=o.findIndex(e=>t(e));-1===e?0!==l&&(o[l].tabIndex=-1,o[0].tabIndex=0):e!==l&&(o[l].tabIndex=-1,o[e].tabIndex=0);break;case"Enter":case" ":const i=n.target.querySelector("input[type=checkbox].micl-checkbox");i instanceof HTMLInputElement&&(i.checked=!i.checked)}r!==l&&(o[l].tabIndex=-1,o[r].tabIndex=0,o[r].focus())}}})(),c=".micl-menu[popover]",s=(()=>{const e=(e,t)=>{const n=e.getBoundingClientRect().y,i=t.getBoundingClientRect().y,o=window.getComputedStyle(t).getPropertyValue("transform-origin");return(n>i?"bottom ":"top ")+(parseInt(o)>0?"right":"left")};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))})}}})(),m="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",d=(()=>{const e=String.fromCharCode(8226),t=String.fromCharCode(8201);return{initialize:n=>{n.style.setProperty("--md-sys-slider-max",n.max||"100"),n.style.setProperty("--md-sys-slider-min",n.min||"0"),n.style.setProperty("--md-sys-slider-value",n.value),n.style.setProperty("--md-sys-slider-tip",JSON.stringify(n.value+""));const i=n.getBoundingClientRect(),o=document.elementFromPoint(Math.max(i.x-1,0),Math.max(i.y-1,0));o&&(n.style.color=window.getComputedStyle(o).getPropertyValue("background-color"));const l=parseFloat(n.max),r=parseFloat(n.min),a=(e=>{const t=[],n=parseFloat(e.max),i=parseFloat(e.min);return e.list&&!isNaN(n)&&!isNaN(i)&&n>i&&e.list.querySelectorAll("option[value]").forEach(e=>{let o=parseFloat(e.value);!isNaN(o)&&o>=i&&o<=n&&t.push(o)}),t})(n).sort((e,t)=>e-t).map(e=>Math.round(100*(e-r)/(l-r)));if(a.length>0){const o=document.createElement("canvas"),l=o.getContext("2d");if(l){l.font=window.getComputedStyle(n).getPropertyValue("font");let o=l.measureText(t).width,r=l.measureText(e).width,c=i.width-10,s=0,m="";a.forEach(n=>{let i=c*n/100,l=Math.round((i-s)/o)-1;for(let e=0;e<l;e++)m+=t,s+=o;m+=e,s+=r}),n.dataset.miclsliderticks=m}o.remove()}else n.dataset.miclsliderticks=e},input:e=>{e.target.matches(".micl-slider-xs,.micl-slider-s,.micl-slider-m,.micl-slider-l,.micl-slider-xl")&&e.target instanceof HTMLInputElement&&!e.target.disabled&&(e.target.style.setProperty("--md-sys-slider-value",e.target.value),e.target.style.setProperty("--md-sys-slider-tip",JSON.stringify(e.target.value+"")))}}})(),u=".micl-textfield-outlined > input,.micl-textfield-filled > input",p=".micl-textfield-outlined > select,.micl-textfield-filled > select",g=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",f=(()=>{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(`${u},${p},${g}`)||!(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}`)}}})();(()=>{const h={[e]:{component:t,type:HTMLDialogElement},[n]:{component:i,type:HTMLButtonElement},[o]:{component:l,type:HTMLInputElement},[r]:{component:a,type:HTMLElement},[c]:{component:s,type:HTMLElement},[p]:{component:f,type:HTMLSelectElement},[m]:{component:d,type:HTMLInputElement},[g]:{component:f,type:HTMLTextAreaElement},[u]:{component:f,type:HTMLInputElement}},y=Object.keys(h).join(","),v=e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.matches(t)&&e instanceof i&&"function"==typeof n.initialize)return void n.initialize(e)},E=e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.matches(t)&&e instanceof i&&"function"==typeof n.cleanup)return void n.cleanup(e)};new MutationObserver(e=>{e.forEach(e=>{"childList"===e.type&&(e.addedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(y)&&v(e),e.querySelectorAll(y).forEach(v))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(y)&&E(e),e.querySelectorAll(y).forEach(E))}))})}).observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll(y).forEach(v),document.querySelectorAll('[class*="micl-"]').forEach(e=>{window.getComputedStyle(e).getPropertyValue("--miclripple")&&e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;const n=t.clientX,i=t.clientY,o=e.getBoundingClientRect(),l=2*Math.sqrt(Math.pow(o.width,2)+Math.pow(o.height,2));e.style.cssText="--s:0;--o:1;",e.offsetTop,e.style.cssText=`--t:1;--o:0;--d:${l};--x:${n-o.left};--y:${i-o.top}`})}),document.addEventListener("input",e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.target.matches(t)&&e.target instanceof i&&"function"==typeof n.input)return void n.input(e)}),document.addEventListener("keydown",e=>{for(const[t,{component:n,type:i}]of Object.entries(h))if(e.target.matches(t)&&e.target instanceof i&&"function"==typeof n.keydown)return void n.keydown(e)})})()})()})();
+!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=(()=>{var e=0;const t=t=>{let n=parseInt(window.getComputedStyle(t).getPropertyValue("max-height")),i=(t.dataset.snapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>0&&e<=n);return e||(e=t.getBoundingClientRect().height),[...new Set(i.concat([e,n]).sort())]},n=(e,n)=>{let i=e.getBoundingClientRect().height,o=t(e);return o.filter(e=>e>i+4)[0]||o[n?o.length-1:0]},i=(e,t)=>{e.style.setProperty("--md-sys-bottomsheet-height",`${t}px`)};return{initialize:e=>{if(!e.matches("dialog.micl-bottomsheet")||e.dataset.miclinitialized)return;e.dataset.miclinitialized="1";const o=e.querySelector(".micl-bottomsheet__headline");if(!o)return;const r=o.querySelector(".micl-bottomsheet__draghandle");r?.addEventListener("click",()=>{const t=n(e,!1);t>4&&i(e,t)});let l,a,s=!1,c=!1;function m(t){const n=t.clientY;s&&Math.abs(l-n)>4&&(s=!1,c=!0,e.classList.add("micl-bottomsheet--resizing")),c&&i(e,a+l-n)}function d(o){s=!1,e.classList.remove("micl-bottomsheet--resizing"),c&&(c=!1,o.clientY<l?i(e,n(e,!0)):e.getBoundingClientRect().height<48?(e.popover&&e.hidePopover(),i(e,a)):i(e,(e=>{let n=e.getBoundingClientRect().height,i=t(e),o=i.filter(e=>e<n-4);return o[o.length-1]||i[0]})(e)),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",d))}o.addEventListener("mousedown",t=>{t.eventPhase===Event.AT_TARGET&&(s=!0,t.preventDefault(),l=t.clientY,a=e.getBoundingClientRect().height,document.addEventListener("mousemove",m),document.addEventListener("mouseup",d))})},cleanup:e=>{e.matches("dialog.micl-bottomsheet")&&delete e.dataset.miclinitialized}}})(),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.toggle("micl-button--selected"))};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",a={keydown:e=>{if(e.target.matches(l)&&e instanceof KeyboardEvent&&e.target instanceof HTMLInputElement&&!e.target.disabled)switch(e.key){case"Enter":case" ":e.target.checked=!e.target.checked,e.preventDefault()}}},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"),t=e=>!!e&&e.matches(":has(input[type=checkbox]:checked)");return{keydown:n=>{if(!(n instanceof KeyboardEvent&&n.target instanceof Element&&n.target.matches(".micl-list-item-one,.micl-list-item-two,.micl-list-item-three")))return;const i=n.target.parentElement;if(!i)return;let o=[];if(i instanceof HTMLDetailsElement?o=Array.from(i.parentElement?.children||[]).map(t=>{let n=t.querySelector(":scope > summary");return e(n)?null:n}).filter(e=>!!e):i instanceof HTMLUListElement&&(o=Array.from(i.children).map(t=>t instanceof HTMLLIElement&&!e(t)?t:null).filter(e=>!!e)),0===o.length)return;let r=o.findIndex(e=>t(e));-1===r&&(r=o.findIndex(e=>0===e.tabIndex)),-1===r&&(r=0);let l=r;switch(n.key){case"ArrowDown":l=(r+1)%o.length,n.preventDefault();break;case"ArrowUp":l=(r-1+o.length)%o.length,n.preventDefault();break;case"Tab":let e=o.findIndex(e=>t(e));-1===e?0!==r&&(o[r].tabIndex=-1,o[0].tabIndex=0):e!==r&&(o[r].tabIndex=-1,o[e].tabIndex=0);break;case"Enter":case" ":const i=n.target.querySelector("input[type=checkbox]");i instanceof HTMLInputElement&&(i.checked=!i.checked)}l!==r&&(o[r].tabIndex=-1,o[l].tabIndex=0,o[l].focus())}}})(),m=".micl-menu[popover]",d=(()=>{const e=(e,t)=>{const n=e.getBoundingClientRect().y,i=t.getBoundingClientRect().y,o=window.getComputedStyle(t).getPropertyValue("transform-origin");return(n>i?"bottom ":"top ")+(parseInt(o)>0?"right":"left")};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))})}}})(),u="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",p=(()=>{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(u))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(u)&&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",y=".micl-textfield-outlined > textarea,.micl-textfield-filled > textarea",h=(()=>{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},${y}`)||!(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:HTMLInputElement},[s]:{component:c,type:HTMLElement},[m]:{component:d,type:HTMLElement},[f]:{component:h,type:HTMLSelectElement},[u]:{component:p,type:HTMLInputElement},[y]:{component:h,type:HTMLTextAreaElement},[g]:{component:h,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=>{e.parentElement&&!window.getComputedStyle(e.parentElement).getPropertyValue("--miclripple")&&window.getComputedStyle(e).getPropertyValue("--miclripple")&&e.addEventListener("pointerdown",t=>{if(t.currentTarget.classList.contains("micl-card--nonactionable"))return;const n=t.clientX,i=t.clientY,o=e.getBoundingClientRect(),r=2*Math.sqrt(Math.pow(o.width,2)+Math.pow(o.height,2));e.style.cssText="--s:0;--o:1;",e.offsetTop,e.style.cssText=`--t:1;--o:0;--d:${r};--x:${n-o.left};--y:${i-o.top}`})})},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)},x=()=>{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)})},T=()=>{document.removeEventListener("DOMContentLoaded",T),x()};return"loading"!==document.readyState?x():document.addEventListener("DOMContentLoaded",T),{initialize:()=>E(document),cleanup:()=>L(document)}})()})(),t})());

package/docs/radio.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>MICL Radio Buttons</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>

package/docs/select.html

@@ -6,16 +6,18 @@
     <title>MICL Selects</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,confirmation_number,dark_mode,group,home,newspaper,person,settings&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
         .micl-card__content > .micl-textfield-outlined, .micl-card__content > .micl-textfield-filled {
             margin: 32px 0;
         }
+        #myselect3 option::checkmark {
+            display: none;
+        }
         .micl-list-item__thumbnail {
-            height: 32px;
-            min-height: 32px;
+            height: 56px;
         }
     </style>
 </head>
@@ -79,27 +81,27 @@
                     <label for="myselect3">Country</label>
                     <select id="myselect3">
                         <option class="micl-list-item-two" value=""></option>
-                        <option class="micl-list-item-two" value="AR">
+                        <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="AR">
                             <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_Argentina.svg/330px-Flag_of_Argentina.svg.png)"></span>
                             <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
                         </option>
-                        <option class="micl-list-item-two" value="BO">
+                        <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="BO">
                             <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Bandera_de_Bolivia_%28Estado%29.svg/330px-Bandera_de_Bolivia_%28Estado%29.svg.png)"></span>
                             <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
                         </option>
-                        <option class="micl-list-item-two" value="BR">
+                        <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="BR">
                             <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/330px-Flag_of_Brazil.svg.png)"></span>
                             <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
                         </option>
-                        <option class="micl-list-item-two" value="CL">
+                        <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="CL">
                             <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Flag_of_Chile.svg/330px-Flag_of_Chile.svg.png)"></span>
                             <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
                         </option>
-                        <option class="micl-list-item-two" value="CO" disabled>
+                        <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="CO" disabled>
                             <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Colombia.svg/330px-Flag_of_Colombia.svg.png)"></span>
                             <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
                         </option>
-                        <option class="micl-list-item-two" value="EC">
+                        <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="EC">
                             <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Flag_of_Ecuador.svg/330px-Flag_of_Ecuador.svg.png)"></span>
                             <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
                         </option>

package/docs/sidesheet.html

@@ -6,7 +6,7 @@
     <title>MICL Side Sheets</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>

package/docs/slider.html

@@ -8,18 +8,20 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,volume_up&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>
-        .micl-card-elevated, .micl-card-filled, .micl-card-outlined {
-            padding: 0 16px;
-            text-align: center;
-        }
-        .range {
-            margin: 64px 8px;
+        .micl-card__content {
+            display: flex;
+            flex-direction: column;
+            row-gap: 64px;
+            padding-block: 64px;
             background-color: inherit;
         }
+        .micl-card-filled .micl-card__content {
+            align-items: center;
+        }
         .micl-card-elevated input[type=range] {
             width: 100%;
         }
@@ -36,35 +38,69 @@
 
     <div class="cards">
         <div class="micl-card-elevated">
-            <div class="range">
+            <div class="micl-card__content">
                 <input type="range" class="micl-slider-xs" min="1" max="10" value="6">
-            </div>
-            <div class="range">
-                <input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="markers">
-                <datalist id="markers">
+                <input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="markers1">
+                <datalist id="markers1">
                   <option value="0"></option>
                   <option value="25"></option>
                   <option value="50"></option>
                   <option value="75"></option>
                   <option value="100"></option>
                 </datalist>
-            </div>
-            <div class="range micl-slider__container">
-                <span class="micl-slider__icon material-symbols-outlined">volume_up</span>
-                <input type="range" class="micl-slider-m" min="3.5" max="12.5" value="9.5" step="0.5">
-            </div>
-            <div class="range">
+                <div class="range micl-slider__container">
+                    <span class="micl-slider__icon material-symbols-outlined">volume_up</span>
+                    <input type="range" class="micl-slider-m" min="3.5" max="12.5" value="9.5" step="0.5">
+                </div>
                 <input type="range" class="micl-slider-l" value="0">
-            </div>
-            <div class="range">
                 <input type="range" class="micl-slider-xl" disabled>
             </div>
         </div>
         <div class="micl-card-filled">
-            <div class="range">
+            <div class="micl-card__content">
                 <input type="range" class="micl-slider-xl micl-slider--vertical">
             </div>
         </div>
+        <div class="micl-card-elevated">
+            <div class="micl-card__headline-s">
+                <h2>Gecko browsers</h2>
+            </div>
+            <div class="micl-card__content">
+                <div class="micl-slider__container">
+                    <input type="range" class="micl-slider-xs" min="1" max="10" value="6">
+                </div>
+                <div class="micl-slider__container">
+                    <input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="markers2">
+                </div>
+                <datalist id="markers2">
+                  <option value="0"></option>
+                  <option value="25"></option>
+                  <option value="50"></option>
+                  <option value="75"></option>
+                  <option value="100"></option>
+                </datalist>
+                <div class="micl-slider__container">
+                    <span class="micl-slider__icon material-symbols-outlined">volume_up</span>
+                    <input type="range" class="micl-slider-m" min="3.5" max="12.5" value="9.5" step="0.5">
+                </div>
+                <div class="micl-slider__container">
+                    <input type="range" class="micl-slider-l" value="0">
+                </div>
+                <div class="micl-slider__container">
+                    <input type="range" class="micl-slider-xl" disabled>
+                </div>
+            </div>
+        </div>
+        <div class="micl-card-filled">
+            <div class="micl-card__headline-s">
+                <h2>Gecko browsers</h2>
+            </div>
+            <div class="micl-card__content">
+                <div class="micl-slider__container">
+                    <input type="range" class="micl-slider-xl micl-slider--vertical">
+                </div>
+            </div>
+        </div>
     </div>
 
     <script src="micl.js"></script>

package/docs/switch.html

@@ -6,7 +6,7 @@
     <title>MICL Switches</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>

package/docs/textfield.html

@@ -6,7 +6,7 @@
     <title>MICL Text Fields</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=cancel,credit_card,dark_mode,error,search&display=block">
-    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
     <link rel="stylesheet" href="docs.css">
     <style>

package/{components.ts → micl.ts}

@@ -67,12 +67,16 @@ export default (() =>
         }
     };
 
-    const initializeComponents = () =>
+    const initializeComponents = (parent: HTMLDocument | HTMLElement): void =>
     {
-        document.querySelectorAll<HTMLElement>(selector).forEach(initializeComponent);
+        parent.querySelectorAll<HTMLElement>(selector).forEach(initializeComponent);
 
-        document.querySelectorAll<HTMLElement>('[class*="micl-"]').forEach(element => {
-            if (window.getComputedStyle(element).getPropertyValue('--miclripple')) {
+        parent.querySelectorAll<HTMLElement>('[class*="micl-"]').forEach(element => {
+            if (
+                element.parentElement
+                && !window.getComputedStyle(element.parentElement).getPropertyValue('--miclripple')
+                && window.getComputedStyle(element).getPropertyValue('--miclripple')
+            ) {
                 element.addEventListener('pointerdown', e => {
                     if ((e.currentTarget as Element).classList.contains('micl-card--nonactionable')) {
                         return;
@@ -104,67 +108,88 @@ export default (() =>
         }
     };
 
-    const observer = new MutationObserver(mutations =>
+    const cleanupComponents = (parent: HTMLDocument | HTMLElement): void =>
+    {
+        parent.querySelectorAll<HTMLElement>(selector).forEach(cleanupComponent);
+    };
+
+    const activate = () =>
     {
-        mutations.forEach(mutation =>
+        const observer = new MutationObserver(mutations =>
         {
-            if (mutation.type !== 'childList') {
-                return;
-            }
-            mutation.addedNodes.forEach(node =>
+            mutations.forEach(mutation =>
             {
-                if (node instanceof HTMLElement) {
-                    if (node.matches(selector)) {
-                        initializeComponent(node);
-                    }
-                    node.querySelectorAll<HTMLElement>(selector).forEach(initializeComponent);
+                if (mutation.type !== 'childList') {
+                    return;
                 }
-            });
-            mutation.removedNodes.forEach(node =>
-            {
-                if (node instanceof HTMLElement) {
-                    if (node.matches(selector)) {
-                        cleanupComponent(node);
+                mutation.addedNodes.forEach(node =>
+                {
+                    if (node instanceof HTMLElement) {
+                        if (node.matches(selector)) {
+                            initializeComponent(node);
+                        }
+                        node.querySelectorAll<HTMLElement>(selector).forEach(initializeComponent);
                     }
-                    node.querySelectorAll<HTMLElement>(selector).forEach(cleanupComponent);
-                }
+                });
+                mutation.removedNodes.forEach(node =>
+                {
+                    if (node instanceof HTMLElement) {
+                        if (node.matches(selector)) {
+                            cleanupComponent(node);
+                        }
+                        cleanupComponents(node);
+                    }
+                });
             });
         });
-    });
-    observer.observe(document.body, { childList: true, subtree: true });
+        observer.observe(document.body, { childList: true, subtree: true });
 
-    initializeComponents();
+        initializeComponents(document);
 
-    // Delegated Event Handlers
-    document.addEventListener('input', event =>
-    {
-        for (const [selector, { component, type }] of Object.entries(componentMap)) {
-            if (
-                (event.target as Element).matches(selector)
-                && event.target instanceof type
-                && typeof component.input === 'function'
-            ) {
-                component.input(event);
-                return;
+        // Delegated Event Handlers
+        document.addEventListener('input', event =>
+        {
+            for (const [selector, { component, type }] of Object.entries(componentMap)) {
+                if (
+                    (event.target as Element).matches(selector)
+                    && event.target instanceof type
+                    && typeof component.input === 'function'
+                ) {
+                    component.input(event);
+                    return;
+                }
             }
-        }
-    });
-    document.addEventListener('keydown', event =>
-    {
-        for (const [selector, { component, type }] of Object.entries(componentMap)) {
-            if (
-                (event.target as Element).matches(selector)
-                && event.target instanceof type
-                && typeof component.keydown === 'function'
-            ) {
-                component.keydown(event);
-                return;
+        });
+        document.addEventListener('keydown', event =>
+        {
+            for (const [selector, { component, type }] of Object.entries(componentMap)) {
+                if (
+                    (event.target as Element).matches(selector)
+                    && event.target instanceof type
+                    && typeof component.keydown === 'function'
+                ) {
+                    component.keydown(event);
+                    return;
+                }
             }
-        }
-    });
+        });
+    };
+
+    const loaded = () =>
+    {
+        document.removeEventListener('DOMContentLoaded', loaded);
+        activate();
+    };
+
+    if (document.readyState !== 'loading') {
+        activate();
+    }
+    else {
+        document.addEventListener('DOMContentLoaded', loaded);
+    }
 
     return {
-        initialize: () => initializeComponents(),
-        cleanup   : () => document.querySelectorAll<HTMLElement>(selector).forEach(cleanupComponent)
+        initialize: () => initializeComponents(document),
+        cleanup   : () => cleanupComponents(document)
     };
 })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
   "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
   "license": "MIT",
@@ -35,12 +35,14 @@
   "bugs": {
     "url": "https://github.com/henkpb/micl/issues"
   },
-  "main": "index.js",
+  "main": "dist/micl.js",
+  "types": "dist/micl.d.ts",
   "scripts": {
     "build": "webpack",
     "start": "echo 'No start script yet'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "sideEffects": false,
   "devDependencies": {
     "autoprefixer": "^10.4.19",
     "css-loader": "^7.1.2",

package/styles/layout.scss

@@ -0,0 +1,74 @@
+//
+// Copyright © 2025 Hermana AS
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+$md-sys-margin-compact: 0px;
+$md-sys-margin-medium: 0px;
+$md-sys-margin-expanded: 0px;
+$md-sys-margin-large: 0px;
+$md-sys-margin-extra-large: 0px;
+
+$md-sys-spacer: 24px;
+
+$md-sys-padding-xxs: 4px;
+$md-sys-padding-xs: 8px;
+$md-sys-padding-s: 12px;
+$md-sys-padding-m: 16px;
+$md-sys-padding-l: 20px;
+$md-sys-padding-xl: 24px;
+$md-sys-padding-xxl: 28px;
+
+$md-sys-target-size: 48px;
+
+:root {
+    --md-sys-margin-compact: $md-sys-margin-compact;
+    --md-sys-margin-medium: $md-sys-margin-medium;
+    --md-sys-margin-expanded: $md-sys-margin-expanded;
+    --md-sys-margin-large: $md-sys-margin-large;
+    --md-sys-margin-extra-large: $md-sys-margin-extra-large;
+
+    --md-sys-spacer: $md-sys-spacer;
+
+    --md-sys-padding-xxs: $md-sys-padding-xxs;
+    --md-sys-padding-xs: $md-sys-padding-xs;
+    --md-sys-padding-s: $md-sys-padding-s;
+    --md-sys-padding-m: $md-sys-padding-m;
+    --md-sys-padding-l: $md-sys-padding-l;
+    --md-sys-padding-xl: $md-sys-padding-xl;
+    --md-sys-padding-xxl: $md-sys-padding-xxl;
+
+    --md-sys-target-size: $md-sys-target-size;
+}
+
+.micl-pane-fixed {
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: row;
+}
+
+.micl-pane-flexible {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: row;
+}
+
+.micl-pane__column {
+    display: flex;
+}

package/tsconfig.json

@@ -26,7 +26,7 @@
 
     /* Modules */
     "module": "es2022",                                  /* Specify what module code is generated. */
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "rootDir": "./",                                     /* Specify the root folder within your source files. */
     "moduleResolution": "node10",                        /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
@@ -50,14 +50,14 @@
     // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
 
     /* Emit */
-    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    "declaration": true,                                 /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
-    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    "outDir": "./dist",                                  /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
     // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
@@ -70,7 +70,7 @@
     // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
     // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
     // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
-    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    "declarationDir": "./dist",                          /* Specify the output directory for generated declaration files. */
 
     /* Interop Constraints */
     // "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
@@ -106,5 +106,11 @@
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
-  }
+  },
+  "include": [
+    "./**/*"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }

package/webpack.config.js

@@ -15,7 +15,7 @@ module.exports = [{
     mode: 'production',
     entry: {
         ...scssEntries,
-        micl: ['./styles.scss', './components.ts']
+        micl: ['./styles.scss', './micl.ts']
     },
     resolve: {
         extensions: ['.ts', '.tsx', '.js']
@@ -23,7 +23,11 @@ module.exports = [{
     output: {
         path: distDir,
         filename: '[name].js',
-        clean: true
+        clean: true,
+        library: {
+            name: 'micl',
+            type: 'umd'
+        }
     },
     module: {
         rules: [{
@@ -34,8 +38,7 @@ module.exports = [{
                 'postcss-loader',
                 'sass-loader'
             ]
-        },
-        {
+        }, {
             test: /\.tsx?$/,
             use: 'ts-loader',
             exclude: /node_modules/