material-inspired-component-library 1.0.3 → 1.1.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 a,r,s=!1,c=!1;function m(t){const n=t.clientY;s&&Math.abs(a-n)>4&&(s=!1,c=!0,e.classList.add("micl-bottomsheet--resizing")),c&&i(e,r+a-n)}function d(o){s=!1,e.classList.remove("micl-bottomsheet--resizing"),c&&(c=!1,o.clientY<a?i(e,n(e,!0)):e.getBoundingClientRect().height<48?(e.popover&&e.hidePopover(),i(e,r)):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(),a=t.clientY,r=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()}}},a=".micl-list-item-one,.micl-list-item-two,.micl-list-item-three",r=(()=>{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 a=l;switch(n.key){case"ArrowDown":a=(l+1)%o.length,n.preventDefault();break;case"ArrowUp":a=(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)}a!==l&&(o[l].tabIndex=-1,o[a].tabIndex=0,o[a].focus())}}})(),s=".micl-menu[popover]",c=(()=>{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),a=parseFloat(n.min),r=(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-a)/(l-a)));if(r.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,a=l.measureText(e).width,s=i.width-10,c=0,m="";r.forEach(n=>{let i=s*n/100,l=Math.round((i-c)/o)-1;for(let e=0;e<l;e++)m+=t,c+=o;m+=e,c+=a}),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=(()=>{const e=".micl-textfield-character-counter";return{initialize:t=>{if(!t.dataset.miclinitialized&&(t.dataset.miclinitialized="1",t.value&&(t.dataset.miclvalue="1"),t instanceof HTMLInputElement&&t.maxLength)){const n=t.parentElement?.querySelector(e);n&&(n.textContent=`${t.value.length}/${t.maxLength}`)}},input:t=>{if(t.target.matches(`${u},${p}`)&&(t.target instanceof HTMLInputElement||t.target instanceof HTMLSelectElement)&&t.target.dataset.miclinitialized&&!t.target.disabled&&(t.target.value?t.target.dataset.miclvalue="1":delete t.target.dataset.miclvalue,t.target instanceof HTMLInputElement&&t.target.maxLength)){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},[a]:{component:r,type:HTMLElement},[s]:{component:c,type:HTMLElement},[p]:{component:g,type:HTMLSelectElement},[m]:{component:d,type:HTMLInputElement},[u]:{component:g,type:HTMLInputElement}},f=Object.keys(h).join(","),y=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)},v=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(f)&&y(e),e.querySelectorAll(f).forEach(y))}),e.removedNodes.forEach(e=>{e instanceof HTMLElement&&(e.matches(f)&&v(e),e.querySelectorAll(f).forEach(v))}))})}).observe(document.body,{childList:!0,subtree:!0}),document.querySelectorAll(f).forEach(y),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)})})()})()})();
+(()=>{"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)})})()})()})();

package/docs/slider.html

@@ -18,6 +18,7 @@
         }
         .range {
             margin: 64px 8px;
+            background-color: inherit;
         }
         .micl-card-elevated input[type=range] {
             width: 100%;

package/docs/textfield.html

@@ -45,15 +45,19 @@
                     <input type="text" id="mytextfield4" disabled value="Paris">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                 </div>
+                <div class="micl-textfield-outlined">
+                    <label for="mytextfield5">Multiline text field</label>
+                    <textarea id="mytextfield5"></textarea>
+                </div>
                 <div class="micl-textfield-outlined micl-textfield--error">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <label for="mytextfield5">Label text</label>
-                    <input type="text" id="mytextfield5">
+                    <label for="mytextfield6">Label text</label>
+                    <input type="text" id="mytextfield6">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                 </div>
                 <div class="micl-textfield-outlined micl-textfield--error">
-                    <label for="mytextfield6">Password</label>
-                    <input type="password" id="mytextfield6" value="foobar">
+                    <label for="mytextfield7">Password</label>
+                    <input type="password" id="mytextfield7" value="foobar">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
                     <span class="micl-textfield__supporting-text">Include an uppercase letter, a lowercase letter, and a numeric character</span>
                 </div>
@@ -71,7 +75,7 @@
                     <span class="micl-textfield__supporting-text">Supporting text</span>
                 </div>
                 <div class="micl-textfield-outlined">
-                    <span class="micl-textfield__prefix">€</span>
+                    <span class="micl-textfield__prefix" aria-label="Euro">€</span>
                     <label for="mytextfield13">Amount</label>
                     <input type="text" id="mytextfield13" value="299.89">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">credit_card</span>
@@ -83,16 +87,20 @@
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                     <span class="micl-textfield__supporting-text">This input field is disabled</span>
                 </div>
+                <div class="micl-textfield-outlined">
+                    <label for="mytextfield15">Text area</label>
+                    <textarea id="mytextfield15" rows="3">Text areas are taller than text fields and wrap overflow text onto a new line. They are a fixed height and scroll vertically when the cursor reaches the bottom of the field. </textarea>
+                </div>
                 <div class="micl-textfield-outlined micl-textfield--error">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <label for="mytextfield15">Label text</label>
-                    <input type="text" id="mytextfield15">
+                    <label for="mytextfield16">Label text</label>
+                    <input type="text" id="mytextfield16">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                 </div>
                 <div class="micl-textfield-outlined micl-textfield--error">
-                    <label for="mytextfield16">Weight</label>
-                    <input type="number" id="mytextfield16" value="17800">
-                    <span class="micl-textfield__suffix">kg</span>
+                    <label for="mytextfield17">Weight</label>
+                    <input type="number" id="mytextfield17" value="17800">
+                    <span class="micl-textfield__suffix" aria-label="Kilograms">kg</span>
                     <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
                     <span class="micl-textfield__supporting-text">Too heavy</span>
                 </div>
@@ -106,15 +114,15 @@
                 </div>
                 <div class="micl-textfield-filled" style="--md-sys-textfield-prefix-space:2.5em">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <span class="micl-textfield__prefix">NOK</span>
+                    <span class="micl-textfield__prefix" aria-label="Norwegian kroner">NOK</span>
                     <label for="mytextfield22">Amount*</label>
                     <input type="text" id="mytextfield22" required value="">
                     <span class="micl-textfield__supporting-text">In Norwegian kroner</span>
                 </div>
                 <div class="micl-textfield-filled">
                     <span class="micl-textfield__character-counter"></span>
-                    <span class="micl-textfield__supporting-text">Enter at least twelve characters</span>
-                    <span class="micl-textfield__prefix">€</span>
+                    <span class="micl-textfield__supporting-text micl-textfield__supporting-text--focus">Enter at least twelve characters</span>
+                    <span class="micl-textfield__prefix" aria-label="Euro">€</span>
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                     <input type="text" id="mytextfield23" maxlength="24">
                     <label for="mytextfield23">Label text</label>
@@ -127,16 +135,21 @@
                     <span class="micl-textfield__icon-trailing material-symbols-outlined">cancel</span>
                     <span class="micl-textfield__supporting-text">This input field is disabled</span>
                 </div>
+                <div class="micl-textfield-filled">
+                    <label for="mytextfield25">Multiline text field</label>
+                    <textarea id="mytextfield25" maxlength="100">Lorem ipsum dolor sit amet consectetur adipiscing elit</textarea>
+                    <span class="micl-textfield__character-counter"></span>
+                </div>
                 <div class="micl-textfield-filled micl-textfield--error">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <label for="mytextfield25">Label text</label>
-                    <input type="text" id="mytextfield25">
+                    <label for="mytextfield26">Label text</label>
+                    <input type="text" id="mytextfield26">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
                 </div>
                 <div class="micl-textfield-filled micl-textfield--error">
                     <span class="micl-textfield__icon-leading material-symbols-outlined">search</span>
-                    <label for="mytextfield26">City</label>
-                    <input type="text" id="mytextfield26" maxlength="20" value="Amsterdaaam">
+                    <label for="mytextfield27">City</label>
+                    <input type="text" id="mytextfield27" maxlength="20" value="Amsterdaaam">
                     <span class="micl-textfield__icon-trailing material-symbols-outlined" style="font-variation-settings:'FILL' 1">error</span>
                     <span class="micl-textfield__supporting-text">Incorrect spelling</span>
                     <span class="micl-textfield__character-counter"></span>

package/{components.ts → micl.ts}

@@ -25,7 +25,7 @@ import _checkbox, { checkboxSelector } from './components/checkbox';
 import _list, { listSelector } from './components/list';
 import _menu, { menuSelector } from './components/menu';
 import _slider, { sliderSelector } from './components/slider';
-import _textfield, { textfieldSelector, selectSelector } from './components/textfield';
+import _textfield, { textfieldSelector, selectSelector, textareaSelector } from './components/textfield';
 
 interface ComponentEntry<T extends HTMLElement> {
     component: {
@@ -47,6 +47,7 @@ export default (() =>
         [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 }
     };
 
@@ -66,11 +67,11 @@ 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 => {
+        parent.querySelectorAll<HTMLElement>('[class*="micl-"]').forEach(element => {
             if (window.getComputedStyle(element).getPropertyValue('--miclripple')) {
                 element.addEventListener('pointerdown', e => {
                     if ((e.currentTarget as Element).classList.contains('micl-card--nonactionable')) {
@@ -103,67 +104,88 @@ export default (() =>
         }
     };
 
-    const observer = new MutationObserver(mutations =>
+    const cleanupComponents = (parent: HTMLDocument | HTMLElement): void =>
     {
-        mutations.forEach(mutation =>
+        parent.querySelectorAll<HTMLElement>(selector).forEach(cleanupComponent);
+    };
+
+    const activate = () =>
+    {
+        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.0.3",
+  "version": "1.1.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",
@@ -33,14 +33,16 @@
   },
   "homepage": "https://github.com/henkpb/micl",
   "bugs": {
-    "url": "https://github.com/henkpb/material-inspired-component-library/issues"
+    "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/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/