material-inspired-component-library 1.2.2 → 2.0.0

package/docs/micl.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.micl=t():e.micl=t()}(self,()=>(()=>{"use strict";var e={d:(t,n)=>{for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};return(()=>{e.r(t),e.d(t,{default:()=>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})());
+!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 o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},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",o=(()=>{var e=0;const t=t=>{let n=parseInt(window.getComputedStyle(t).getPropertyValue("max-height")),o=(t.dataset.snapheights||"").split(",").map(Number).filter(e=>!isNaN(e)&&e>0&&e<=n);return e||(e=t.getBoundingClientRect().height),[...new Set(o.concat([e,n]).sort())]},n=(e,n)=>{let o=e.getBoundingClientRect().height,i=t(e);return i.filter(e=>e>o+4)[0]||i[n?i.length-1:0]},o=(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 i=e.querySelector(".micl-bottomsheet__headline");if(!i)return;const r=i.querySelector(".micl-bottomsheet__draghandle");r?.addEventListener("click",()=>{const t=n(e,!1);t>4&&o(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&&o(e,a+l-n)}function d(i){s=!1,e.classList.remove("micl-bottomsheet--resizing"),c&&(c=!1,i.clientY<l?o(e,n(e,!0)):e.getBoundingClientRect().height<48?(e.popover&&e.hidePopover(),o(e,a)):o(e,(e=>{let n=e.getBoundingClientRect().height,o=t(e),i=o.filter(e=>e<n-4);return i[i.length-1]||o[0]})(e)),document.removeEventListener("mousemove",m),document.removeEventListener("mouseup",d))}i.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}}})(),i="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 o=[];if(n instanceof HTMLDetailsElement?o=Array.from(n.parentElement?.children||[]).map(t=>{let n=t.querySelector(":scope > summary");return e(n)?null:n}).filter(e=>!!e):n instanceof HTMLUListElement&&(o=Array.from(n.children).map(t=>t instanceof HTMLLIElement&&!e(t)?t:null).filter(e=>!!e)),0===o.length)return;let i=o.findIndex(e=>(e=>!!e&&e.matches(":has(input[type=checkbox]:checked)"))(e)),r=o.findIndex(e=>0===e.tabIndex),l=r;switch(t.key){case"ArrowDown":l=(r+1)%o.length,t.preventDefault();break;case"ArrowUp":l=(r-1+o.length)%o.length,t.preventDefault();break;case"Tab":-1===i?0!==r&&(o[r].tabIndex=-1,o[0].tabIndex=0):i!==r&&(o[r].tabIndex=-1,o[i].tabIndex=0);break;case"Enter":case" ":const e=t.target.querySelector("input[type=checkbox]");e instanceof HTMLInputElement&&(e.checked=!e.checked)}if(l!==r){o[r].tabIndex=-1,o[l].tabIndex=0,o[l].focus();const e=o[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(),o=t.getBoundingClientRect();return(n.x>o.x?"right ":"left ")+(n.y>o.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",o=>{"open"===o.oldState&&(t.style.transformOrigin=e(n,t))}),n&&t.addEventListener("toggle",o=>{"closed"===o.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,o=(e,t)=>{e.dataset.miclsliderticks=t},i=e=>{let t=JSON.stringify(e.value+""),o=n(e);o&&(o.style.setProperty("--md-sys-slider-value",e.value),o.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),i(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 o=[];return e.list&&t>n&&e.list.querySelectorAll("option[value]").forEach(e=>{let i=parseFloat(e.value);!isNaN(i)&&i>=n&&i<=t&&o.push(i)}),o})(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"),i=n.getContext("2d");if(i){i.font=window.getComputedStyle(r).getPropertyValue("font");let n=i.measureText(t).width,l=i.measureText(e).width,a=s.width-10,m=0,d="";c.forEach(o=>{let i=a*o/100,r=Math.round((i-m)/n)-1;for(let e=0;e<r;e++)d+=t,m+=n;d+=e,m+=l}),o(r,d)}n.remove()}else o(r,e)},input:e=>{e.target.matches(p)&&e.target instanceof HTMLInputElement&&!e.target.disabled&&i(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:o,type:HTMLDialogElement},[i]:{component:r,type:HTMLButtonElement},[l]:{component:a,type:HTMLElement},[s]:{component:c,type:HTMLElement},[m]:{component:d,type:HTMLLabelElement},[f]:{component:h,type:HTMLSelectElement},[p]:{component:u,type:HTMLInputElement},[y]:{component:h,type:HTMLTextAreaElement},[g]:{component:h,type:HTMLInputElement}},t=Object.keys(e).join(","),v=t=>{for(const[n,{component:o,type:i}]of Object.entries(e))if(t.matches(n)&&t instanceof i&&"function"==typeof o.initialize)return void o.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:o,type:i}]of Object.entries(e))if(t.matches(n)&&t instanceof i&&"function"==typeof o.cleanup)return void o.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:o,type:i}]of Object.entries(e))if(t.target.matches(n)&&t.target instanceof i&&"function"==typeof o.input)return void o.input(t)}),document.addEventListener("keydown",t=>{for(const[n,{component:o,type:i}]of Object.entries(e))if(t.target.matches(n)&&t.target instanceof i&&"function"==typeof o.keydown)return void o.keydown(t)})},x=()=>{document.removeEventListener("DOMContentLoaded",x),T()};return"loading"!==document.readyState?T():document.addEventListener("DOMContentLoaded",x),{initialize:()=>E(document),cleanup:()=>L(document)}})()})(),t})());

package/docs/navigationrail.html

@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MICL Navigation Rail</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,delete,favorite,inbox,menu,menu_open,outbox&display=block">
+    <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="docs.css">
+    <style>
+        .micl-card__content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            padding-block: 32px;
+            row-gap: 32px;
+        }
+    </style>
+</head>
+<body class="light">
+    <!-- <dialog id="mynavigationrail1" class="micl-navigationrail" closedby="closerequest"> -->
+    <!-- <div id="mynavigationrail1" class="micl-navigationrail" popover="manual"> -->
+    <div id="mynavigationrail1" class="micl-navigationrail">
+        <div class="micl-navigationrail__headline">
+            <button type="button" class="micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" popovertarget="mynavigationrail1" data-miclalt="menu_open" aria-label="Toggle navigation rail">menu</button>
+        </div>
+        <div class="micl-navigationrail__content">
+            <input type="radio" id="item1" name="navitem" value="email_inbox" checked>
+            <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>
+            </label>
+            <input type="radio" id="item2" name="navitem" value="email_outbox">
+            <label for="item2" class="micl-navigationrail__item" tabindex="0">
+                <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">outbox</span>
+                <span class="micl-navigationrail__text">Outbox</span>
+            </label>
+            <input type="radio" id="item3" name="navitem" value="email_favorites">
+            <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>
+            </label>
+            <input type="radio" id="item4" name="navitem" value="email_trash">
+            <label for="item4" class="micl-navigationrail__item" tabindex="0">
+                <span class="micl-navigationrail__icon material-symbols-outlined" aria-hidden="true">delete</span>
+                <span class="micl-navigationrail__text">Trash</span>
+            </label>
+        </div>
+
+        <span class="micl-badge-large" style="position-anchor:--inbox;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px">97</span>
+        <span class="micl-badge-small" style="position-anchor:--favorites;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px"></span>
+    </div>
+    <!-- </dialog> -->
+
+    <div class="headline">
+        <!-- <button type="button" class="micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" style="margin:8px 0 0 8px" popovertarget="mynavigationrail1" aria-label="Toggle navigation rail">menu</button> -->
+        <h1 class="md-sys-typescale-emphasized-display-small">Navigation rails</h1>
+        <div id="settings-placeholder"></div>
+    </div>
+
+    <div class="cards">
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+        <div class="micl-card-filled" style="height:400px"></div>
+    </div>
+
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/micl.ts

@@ -21,9 +21,9 @@
 
 import _bottomsheet, { bottomsheetSelector } from './components/bottomsheet';
 import _button, { buttonSelector } from './components/button';
-import _checkbox, { checkboxSelector } from './components/checkbox';
 import _list, { listSelector } from './components/list';
 import _menu, { menuSelector } from './components/menu';
+import _navigationrail, { navigationrailSelector } from './components/navigationrail';
 import _slider, { sliderSelector } from './components/slider';
 import _textfield, { textfieldSelector, selectSelector, textareaSelector } from './components/textfield';
 
@@ -40,15 +40,15 @@ interface ComponentEntry<T extends HTMLElement> {
 export default (() =>
 {
     const componentMap: Record<string, ComponentEntry<any>> = {
-        [bottomsheetSelector]: { component: _bottomsheet, type: HTMLDialogElement },
-        [buttonSelector]     : { component: _button, type: HTMLButtonElement },
-        [checkboxSelector]   : { component: _checkbox, type: HTMLInputElement },
-        [listSelector]       : { component: _list, type: HTMLElement },
-        [menuSelector]       : { component: _menu, type: HTMLElement },
-        [selectSelector]     : { component: _textfield, type: HTMLSelectElement },
-        [sliderSelector]     : { component: _slider, type: HTMLInputElement },
-        [textareaSelector]   : { component: _textfield, type: HTMLTextAreaElement },
-        [textfieldSelector]  : { component: _textfield, type: HTMLInputElement }
+        [bottomsheetSelector]   : { component: _bottomsheet, type: HTMLDialogElement },
+        [buttonSelector]        : { component: _button, type: HTMLButtonElement },
+        [listSelector]          : { component: _list, type: HTMLElement },
+        [menuSelector]          : { component: _menu, type: HTMLElement },
+        [navigationrailSelector]: { component: _navigationrail, type: HTMLLabelElement },
+        [selectSelector]        : { component: _textfield, type: HTMLSelectElement },
+        [sliderSelector]        : { component: _slider, type: HTMLInputElement },
+        [textareaSelector]      : { component: _textfield, type: HTMLTextAreaElement },
+        [textfieldSelector]     : { component: _textfield, type: HTMLInputElement }
     };
 
     const selector = Object.keys(componentMap).join(',');
@@ -71,24 +71,19 @@ export default (() =>
     {
         parent.querySelectorAll<HTMLElement>(selector).forEach(initializeComponent);
 
-        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 => {
+        parent.querySelectorAll<HTMLElement>('[class*="micl-"]').forEach(element =>
+        {
+            if (window.getComputedStyle(element).getPropertyValue('--micl-ripple') === '1') {
+                element.addEventListener('pointerdown', e =>
+                {
                     if ((e.currentTarget as Element).classList.contains('micl-card--nonactionable')) {
                         return;
                     }
-                    const
-                        x = e.clientX,
-                        y = e.clientY,
-                        r = element.getBoundingClientRect(),
-                        d = Math.sqrt(Math.pow(r.width, 2) + Math.pow(r.height, 2)) * 2;
-                    element.style.cssText = `--s:0;--o:1;`;
-                    element.offsetTop;
-                    element.style.cssText = `--t:1;--o:0;--d:${d};--x:${x - r.left};--y:${y - r.top}`;
+                    e.stopPropagation();
+
+                    let r = element.getBoundingClientRect();
+                    element.style.setProperty('--micl-x', `${e.clientX - r.left}px`);
+                    element.style.setProperty('--micl-y', `${e.clientY - r.top}px`);
                 });
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "1.2.2",
+  "version": "2.0.0",
   "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",
@@ -11,7 +11,9 @@
     "front-end",
     "UI",
     "UX",
+    "CSS",
     "accordion",
+    "badge",
     "bottomsheet",
     "button",
     "card",
@@ -21,6 +23,7 @@
     "iconbutton",
     "list",
     "menu",
+    "navigation rail",
     "radio button",
     "sidesheet",
     "slider",
@@ -44,18 +47,18 @@
   },
   "sideEffects": false,
   "devDependencies": {
-    "autoprefixer": "^10.4.19",
+    "autoprefixer": "^10.4.21",
     "css-loader": "^7.1.2",
     "extract-loader": "^5.1.0",
     "file-loader": "^6.2.0",
     "glob": "^11.0.3",
-    "mini-css-extract-plugin": "^2.9.3",
+    "mini-css-extract-plugin": "^2.9.4",
     "postcss-loader": "^8.1.1",
-    "sass": "^1.89.1",
+    "sass": "^1.90.0",
     "sass-loader": "^16.0.5",
     "ts-loader": "^9.5.2",
-    "typescript": "^5.8.3",
-    "webpack": "^5.99",
-    "webpack-cli": "^6.0"
+    "typescript": "^5.9.2",
+    "webpack": "^5.101.3",
+    "webpack-cli": "^6.0.1"
   }
 }

package/styles/statelayer.scss

@@ -26,6 +26,7 @@ $md-sys-state-focus-state-layer-opacity: 10%;
 $md-sys-state-pressed-state-layer-opacity: 10%;
 $md-sys-state-dragged-state-layer-opacity: 16%;
 
+$md-sys-state-focus-indicator-inner-offset: -3px;
 $md-sys-state-focus-indicator-outer-offset: 2px;
 $md-sys-state-focus-indicator-thickness: 3px;
 
@@ -37,6 +38,19 @@ $md-sys-state-focus-indicator-thickness: 3px;
     --md-sys-state-pressed-state-layer-opacity: #{$md-sys-state-pressed-state-layer-opacity};
     --md-sys-state-dragged-state-layer-opacity: #{$md-sys-state-dragged-state-layer-opacity};
 
+    --md-sys-state-focus-indicator-inner-offset: #{$md-sys-state-focus-indicator-inner-offset};
     --md-sys-state-focus-indicator-outer-offset: #{$md-sys-state-focus-indicator-outer-offset};
     --md-sys-state-focus-indicator-thickness: #{$md-sys-state-focus-indicator-thickness};
 }
+
+@property --statelayer-color {
+    syntax: '<color>';
+    initial-value: transparent;
+    inherits: false;
+}
+
+@property --statelayer-opacity {
+    syntax: '<percentage>';
+    initial-value: 0%;
+    inherits: false;
+}

package/styles.scss

@@ -23,7 +23,6 @@
 @use 'styles/shapes';
 @use 'styles/elevation';
 @use 'styles/motion';
-@use 'styles/ripple';
 @use 'styles/statelayer';
 
 @use 'components/divider';
@@ -39,5 +38,23 @@
 @use 'components/select';
 @use 'components/card';
 @use 'components/dialog';
+@use 'components/badge';
 @use 'components/sidesheet';
 @use 'components/bottomsheet';
+@use 'components/navigationrail';
+
+@property --micl-ripple {
+    syntax: '<integer>';
+    inherits: false;
+    initial-value: 0;
+}
+@property --micl-x {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -100000px;
+}
+@property --micl-y {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -100000px;
+}

package/webpack.config.js

@@ -3,6 +3,7 @@ const glob    = require('glob');
 const webpack = require('webpack');
 const miniCss = require('mini-css-extract-plugin');
 const distDir = path.resolve(__dirname, 'dist');
+const docsDir = path.resolve(__dirname, 'docs');
 
 const scssFiles = glob.sync('./components/**/*.scss');
 const scssEntries = scssFiles.reduce((entries, filePath) => {
@@ -49,4 +50,40 @@ module.exports = [{
             filename: '[name].css'
         })
     ]
+}, {
+    mode: 'production',
+    entry: {
+        micl: ['./styles.scss', './micl.ts']
+    },
+    resolve: {
+        extensions: ['.ts', '.tsx', '.js']
+    },
+    output: {
+        path: docsDir,
+        filename: '[name].js',
+        library: {
+            name: 'micl',
+            type: 'umd'
+        }
+    },
+    module: {
+        rules: [{
+            test: /\.scss$/,
+            use : [
+                miniCss.loader,
+                'css-loader',
+                'postcss-loader',
+                'sass-loader'
+            ]
+        }, {
+            test: /\.tsx?$/,
+            use: 'ts-loader',
+            exclude: /node_modules/
+        }]
+    },
+    plugins: [
+        new miniCss({
+            filename: '[name].css'
+        })
+    ]
 }];

package/dist/components/checkbox/index.d.ts

@@ -1,5 +0,0 @@
-export declare const checkboxSelector = ".micl-checkbox";
-declare const _default: {
-    keydown: (event: Event) => void;
-};
-export default _default;

package/styles/ripple.scss

@@ -1,50 +0,0 @@
-//
-// 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.
-
-@use 'motion';
-
-body {
-    --md-sys-ripple-background-color: var(--md-sys-color-on-surface);
-    --md-sys-ripple-opacity: 20%;
-    --md-sys-ripple-duration: var(--md-sys-motion-duration-extra-long4);
-}
-
-@mixin effect {
-    position: relative;
-    overflow: hidden;
-
-    &::before {
-        content: "";
-        position: absolute;
-        display: block;
-        inset-block-start: calc(var(--y) * 1px);
-        inset-inline-start: calc(var(--x) * 1px);
-        width:  calc(var(--d) * 1px);
-        height: calc(var(--d) * 1px);
-        border-radius: 50%;
-        background: var(--md-sys-ripple-background-color);
-        opacity: calc(var(--o, 1) * var(--md-sys-ripple-opacity, 0.3));
-        pointer-events: none;
-        transition: calc(var(--t, 0) * var(--md-sys-ripple-duration)) motion.$md-sys-motion-easing-emphasized-decelerate;
-        transform: translate(-50%, -50%) scale(var(--s, 1));
-        transform-origin: center;
-    }
-}