material-inspired-component-library 3.0.2 → 3.1.0

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

package/dist/radio.css

@@ -1 +1 @@
-:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-target-size: 48px;--md-sys-state-hover-state-layer-opacity: 8%;--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}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-radio-border-width: 2px;--md-sys-radio-container-size: 20px;--md-sys-radio-state-layer-size: 40px}input[type=radio].micl-radio{--md-sys-radio-motion-effects: cubic-bezier(0.34, 0.88, 0.34, 1);--md-sys-radio-motion-duration: 300ms;--md-sys-radio-motion-duration-reverse: 200ms;appearance:none;box-sizing:border-box;position:relative;inline-size:var(--md-sys-target-size);min-inline-size:var(--md-sys-target-size);block-size:var(--md-sys-target-size);min-block-size:var(--md-sys-target-size);margin:0;border:calc((var(--md-sys-target-size) - var(--md-sys-radio-state-layer-size))/2) solid rgba(0,0,0,0);background-clip:content-box;background-color:rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);outline-offset:-7px}input[type=radio].micl-radio::after{content:"";box-sizing:border-box;position:absolute;inline-size:var(--md-sys-radio-container-size);block-size:var(--md-sys-radio-container-size);inset:0;margin:auto;padding:calc(var(--md-sys-radio-container-size)/2 - var(--md-sys-radio-border-width));border:var(--md-sys-radio-border-width) solid var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-primary);background-clip:content-box;border-radius:var(--md-sys-shape-corner-full);transition:padding var(--md-sys-radio-motion-duration-reverse) var(--md-sys-radio-motion-effects),border-color var(--md-sys-radio-motion-duration-reverse) cubic-bezier(0.2, 0, 0, 1)}input[type=radio].micl-radio:checked::after{border-color:var(--md-sys-color-primary);padding:3px;transition:padding var(--md-sys-radio-motion-duration) var(--md-sys-radio-motion-effects),border-color var(--md-sys-radio-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=radio].micl-radio:not(:disabled){--micl-ripple: 1;background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:10000%,100%;cursor:pointer;transition:background-size 3000ms,--statelayer-opacity var(--md-sys-radio-motion-duration) linear}input[type=radio].micl-radio:not(:disabled):hover{--statelayer-color: var(--md-sys-color-on-surface);--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity)}input[type=radio].micl-radio:not(:disabled):hover:checked{--statelayer-color: var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):hover::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):hover:checked::after{border-color:var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):focus-visible{--statelayer-color: var(--md-sys-color-on-surface);--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary)}input[type=radio].micl-radio:not(:disabled):focus-visible:checked{--statelayer-color: var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):focus-visible::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):focus-visible:checked::after{border-color:var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):active{--statelayer-color: var(--md-sys-color-on-surface);--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);background-size:0%,100%;transition:background-size 0ms}input[type=radio].micl-radio:not(:disabled):active:checked{--statelayer-color: var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):active::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):active:checked::after{border-color:var(--md-sys-color-primary)}input[type=radio].micl-radio:disabled{opacity:38%}input[type=radio].micl-radio:disabled::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:disabled:checked::after{background-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled)+label,label:has(+input[type=radio].micl-radio:not(:disabled)){cursor:pointer}input[type=radio].micl-radio+label,label:has(+input[type=radio].micl-radio){color:var(--md-sys-color-on-surface)}
+:root{--md-sys-motion-duration-short1: 50ms;--md-sys-motion-duration-short2: 100ms;--md-sys-motion-duration-short3: 150ms;--md-sys-motion-duration-short4: 200ms;--md-sys-motion-duration-medium1: 250ms;--md-sys-motion-duration-medium2: 300ms;--md-sys-motion-duration-medium3: 350ms;--md-sys-motion-duration-medium4: 400ms;--md-sys-motion-duration-long1: 450ms;--md-sys-motion-duration-long2: 500ms;--md-sys-motion-duration-long3: 550ms;--md-sys-motion-duration-long4: 600ms;--md-sys-motion-duration-extra-long1: 700ms;--md-sys-motion-duration-extra-long2: 800ms;--md-sys-motion-duration-extra-long3: 900ms;--md-sys-motion-duration-extra-long4: 1000ms}:root{--md-sys-shape-corner-none: 0px;--md-sys-shape-corner-extra-small: 4px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-large-increased: 20px;--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-extra-large-increased: 32px;--md-sys-shape-corner-extra-extra-large: 48px;--md-sys-shape-corner-full: 50%}:root{--md-sys-state-layer-size: 40px;--md-sys-target-size: 48px;--md-sys-state-hover-state-layer-opacity: 8%;--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}@property --statelayer-color{syntax:"<color>";initial-value:rgba(0,0,0,0);inherits:false}@property --statelayer-opacity{syntax:"<percentage>";initial-value:0%;inherits:false}:root{--md-sys-radio-border-width: 2px;--md-sys-radio-container-size: 20px;--md-sys-radio-state-layer-size: 40px}input[type=radio].micl-radio{--md-sys-radio-motion-effects: cubic-bezier(0.34, 0.88, 0.34, 1);--md-sys-radio-motion-duration: 300ms;--md-sys-radio-motion-duration-reverse: 200ms;appearance:none;box-sizing:border-box;position:relative;inline-size:var(--md-sys-target-size);min-inline-size:var(--md-sys-target-size);block-size:var(--md-sys-target-size);min-block-size:var(--md-sys-target-size);margin:0;border:calc((var(--md-sys-target-size) - var(--md-sys-radio-state-layer-size))/2) solid rgba(0,0,0,0);background-clip:content-box;background-color:rgba(0,0,0,0);border-radius:var(--md-sys-shape-corner-full);outline-offset:-7px}input[type=radio].micl-radio::after{content:"";box-sizing:border-box;position:absolute;inline-size:var(--md-sys-radio-container-size);block-size:var(--md-sys-radio-container-size);inset:0;margin:auto;padding:calc(var(--md-sys-radio-container-size)/2 - var(--md-sys-radio-border-width));border:var(--md-sys-radio-border-width) solid var(--md-sys-color-on-surface-variant);background-color:var(--md-sys-color-primary);background-clip:content-box;border-radius:var(--md-sys-shape-corner-full);transition:padding var(--md-sys-radio-motion-duration-reverse) var(--md-sys-radio-motion-effects),border-color var(--md-sys-radio-motion-duration-reverse) cubic-bezier(0.2, 0, 0, 1)}input[type=radio].micl-radio:checked::after{border-color:var(--md-sys-color-primary);padding:3px;transition:padding var(--md-sys-radio-motion-duration) var(--md-sys-radio-motion-effects),border-color var(--md-sys-radio-motion-duration) cubic-bezier(0.2, 0, 0, 1)}input[type=radio].micl-radio:not(:disabled){--micl-ripple: 1;background-image:radial-gradient(circle at var(--micl-x, center) var(--micl-y, center), transparent 0%, rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)) 10%, transparent 10%),linear-gradient(rgb(from var(--statelayer-color) r g b/var(--statelayer-opacity)));background-repeat:no-repeat;background-size:10000%,100%;cursor:pointer;transition:background-size 3000ms,--statelayer-opacity var(--md-sys-radio-motion-duration) linear}input[type=radio].micl-radio:not(:disabled):hover,input[type=radio].micl-radio:not(:disabled):focus-visible,input[type=radio].micl-radio:not(:disabled):active{--statelayer-color: var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):hover:checked,input[type=radio].micl-radio:not(:disabled):focus-visible:checked,input[type=radio].micl-radio:not(:disabled):active:checked{--statelayer-color: var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):hover::after,input[type=radio].micl-radio:not(:disabled):focus-visible::after,input[type=radio].micl-radio:not(:disabled):active::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled):hover:checked::after,input[type=radio].micl-radio:not(:disabled):focus-visible:checked::after,input[type=radio].micl-radio:not(:disabled):active:checked::after{border-color:var(--md-sys-color-primary)}input[type=radio].micl-radio:not(:disabled):hover{--statelayer-opacity: var(--md-sys-state-hover-state-layer-opacity)}input[type=radio].micl-radio:not(:disabled):focus-visible{--statelayer-opacity: var(--md-sys-state-focus-state-layer-opacity);outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-secondary)}input[type=radio].micl-radio:not(:disabled):active{--statelayer-opacity: var(--md-sys-state-pressed-state-layer-opacity);background-size:0%,100%;transition:background-size 0ms}input[type=radio].micl-radio:disabled{opacity:38%}input[type=radio].micl-radio:disabled::after{border-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:disabled:checked::after{background-color:var(--md-sys-color-on-surface)}input[type=radio].micl-radio:not(:disabled)+label,label:has(+input[type=radio].micl-radio:not(:disabled)){cursor:pointer}input[type=radio].micl-radio+label,label:has(+input[type=radio].micl-radio){color:var(--md-sys-color-on-surface)}

package/docs/alert.html

@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Demonstrating MICL Alerts">
+    <title>MICL Alerts</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=award_star,check,dark_mode,error,home,question_mark&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;
+            row-gap: 24px;
+        }
+    </style>
+</head>
+<body class="micl-window light">
+    <main class="micl-body micl-body--stacked-to-large">
+        <section class="micl-pane">
+            <header class="micl-appbar">
+                <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
+                    <span class="material-symbols-outlined" aria-hidden="true">home</span>
+                </a>
+                <div class="micl-appbar__headline micl-appbar__headline--center">
+                    <h1>Alerts</h1>
+                    <p class="micl-appbar__subtitle">Showcasing MICL alerts</p>
+                </div>
+                <div id="settings-placeholder" class="micl-appbar__trailing"></div>
+            </header>
+
+            <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
+                <div class="micl-pane__column">
+                    <div class="micl-card-elevated">
+                        <div class="micl-card__headline-s">
+                            <h2>Error colors</h2>
+                        </div>
+                        <div class="micl-card__content">
+                            <div class="micl-alert-tonal" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">error</span>
+                                <div class="micl-alert__text">
+                                    <h4>An error has occurred</h4>
+                                    <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
+                                </div>
+                            </div>
+                            <div class="micl-alert-filled" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">error</span>
+                                <div class="micl-alert__text">
+                                    <h4>An error has occurred</h4>
+                                    <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
+                                </div>
+                            </div>
+                            <div class="micl-alert-outlined" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">error</span>
+                                <div class="micl-alert__text">
+                                    <h4>An error has occurred</h4>
+                                    <span class="micl-alert__supporting-text">Keyboard not responding. Press any key to continue.</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="micl-pane__column">
+                    <div class="micl-card-filled">
+                        <div class="micl-card__headline-s">
+                            <h2>Primary colors</h2>
+                        </div>
+                        <div class="micl-card__content">
+                            <div class="micl-alert-tonal micl-alert--primary" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">check</span>
+                                <div class="micl-alert__text">
+                                    <h4>Your file has been saved</h4>
+                                    <span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
+                                </div>
+                            </div>
+                            <div class="micl-alert-filled micl-alert--primary" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">check</span>
+                                <div class="micl-alert__text">
+                                    <h4>Your file has been saved</h4>
+                                    <span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
+                                </div>
+                            </div>
+                            <div class="micl-alert-outlined micl-alert--primary" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">check</span>
+                                <div class="micl-alert__text">
+                                    <h4>Your file has been saved</h4>
+                                    <span class="micl-alert__supporting-text">Please insert the next floppy disk.</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="micl-pane__column">
+                    <div class="micl-card-outlined">
+                        <div class="micl-card__headline-s">
+                            <h2>Secondary colors</h2>
+                        </div>
+                        <div class="micl-card__content">
+                            <div class="micl-alert-tonal micl-alert--secondary" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">award_star</span>
+                                <div class="micl-alert__text">
+                                    <h4>Your efforts have been rewarded</h4>
+                                    <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
+                                </div>
+                            </div>
+                            <div class="micl-alert-filled micl-alert--secondary" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">award_star</span>
+                                <div class="micl-alert__text">
+                                    <h4>Your efforts have been rewarded</h4>
+                                    <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
+                                </div>
+                            </div>
+                            <div class="micl-alert-outlined micl-alert--secondary" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">award_star</span>
+                                <div class="micl-alert__text">
+                                    <h4>Your efforts have been rewarded</h4>
+                                    <span class="micl-alert__supporting-text">Click the button below to retrieve your prize.</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="micl-pane__column">
+                    <div class="micl-card-elevated">
+                       <div class="micl-card__headline-s">
+                            <h2>Tertiary colors</h2>
+                        </div>
+                         <div class="micl-card__content">
+                            <div class="micl-alert-tonal micl-alert--tertiary" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">question_mark</span>
+                                <div class="micl-alert__text">
+                                    <h4>Checking your progress</h4>
+                                    <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
+                                </div>
+                            </div>
+                            <div class="micl-alert-filled micl-alert--tertiary" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">question_mark</span>
+                                <div class="micl-alert__text">
+                                    <h4>Checking your progress</h4>
+                                    <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
+                                </div>
+                            </div>
+                            <div class="micl-alert-outlined micl-alert--tertiary" role="alert">
+                                <span class="micl-alert__icon material-symbols-outlined">question_mark</span>
+                                <div class="micl-alert__text">
+                                    <h4>Checking your progress</h4>
+                                    <span class="micl-alert__supporting-text">Continuing this operation will clear the Internet.</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section class="micl-pane">
+            <div class="micl-card-filled">
+                <div class="micl-card__headline-s">
+                    <h2>Code example</h2>
+                </div>
+                <div class="micl-card__content docs-code">
+                    <pre><code>
+&lt;div class="micl-alert-tonal" role="alert"&gt;
+  &lt;span class="micl-alert__icon material-symbols-outlined">error&lt;/span&gt;
+  &lt;span class="micl-alert__text"&gt;
+    &lt;h4&gt;An error has occurred&lt;/h4&gt;
+    &lt;span class="micl-alert__supporting-text"&gt;Something unexplainable has happened.&lt;/span&gt;
+  &lt;/span&gt;
+&lt;/div&gt;
+                    </code></pre>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/docs/checkbox.html

@@ -46,11 +46,11 @@
                             </div>
                             <div class="micl-flex--vcenter">
                                 <input type="checkbox" id="mycheckbox3" class="micl-checkbox" disabled value="c3">
-                                <label for="mycheckbox3" class="md-sys-typescale-body-medium">Third Choice</label>
+                                <label for="mycheckbox3" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
                             </div>
                             <div class="micl-flex--vcenter">
                                 <input type="checkbox" id="mycheckbox4" class="micl-checkbox" disabled checked value="c4">
-                                <label for="mycheckbox4" class="md-sys-typescale-body-medium">Fourth Choice</label>
+                                <label for="mycheckbox4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
                             </div>
                         </div>
                     </div>
@@ -65,11 +65,11 @@
                                 <input type="checkbox" id="mycheckbox22" class="micl-checkbox" checked value="c2">
                             </div>
                             <div class="micl-flex--vcenter">
-                                <label for="mycheckbox23" class="md-sys-typescale-body-medium">Third Choice</label>
+                                <label for="mycheckbox23" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
                                 <input type="checkbox" id="mycheckbox23" class="micl-checkbox" disabled value="c3">
                             </div>
                             <div class="micl-flex--vcenter">
-                                <label for="mycheckbox24" class="md-sys-typescale-body-medium">Fourth Choice</label>
+                                <label for="mycheckbox24" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
                                 <input type="checkbox" id="mycheckbox24" class="micl-checkbox" disabled checked value="c4">
                             </div>
                         </div>
@@ -88,11 +88,35 @@
                             </div>
                             <div class="micl-flex--vcenter">
                                 <input type="checkbox" id="mycheckbox13" class="micl-checkbox micl-checkbox--error" disabled value="c3">
-                                <label for="mycheckbox13" class="md-sys-typescale-body-medium">Third Choice</label>
+                                <label for="mycheckbox13" class="md-sys-typescale-body-medium">Third Choice (disabled)</label>
                             </div>
                             <div class="micl-flex--vcenter">
                                 <input type="checkbox" id="mycheckbox14" class="micl-checkbox micl-checkbox--error" disabled checked value="c4">
-                                <label for="mycheckbox14" class="md-sys-typescale-body-medium">Fourth Choice</label>
+                                <label for="mycheckbox14" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="micl-card-elevated">
+                        <div class="micl-card__content">
+                            <div class="micl-checkbox-group">
+                                <div class="micl-flex--vcenter">
+                                    <input type="checkbox" id="mycheckbox30" class="micl-checkbox micl-checkbox__parent" value="c0">
+                                    <label for="mycheckbox30" class="md-sys-typescale-body-medium">Choices</label>
+                                </div>
+                                <div style="padding-inline-start:16px">
+                                    <div class="micl-flex--vcenter">
+                                        <input type="checkbox" id="mycheckbox31" class="micl-checkbox" value="c1">
+                                        <label for="mycheckbox31" class="md-sys-typescale-body-medium">First Choice</label>
+                                    </div>
+                                    <div class="micl-flex--vcenter">
+                                        <input type="checkbox" id="mycheckbox32" class="micl-checkbox" checked value="c2">
+                                        <label for="mycheckbox32" class="md-sys-typescale-body-medium">Second Choice</label>
+                                    </div>
+                                    <div class="micl-flex--vcenter">
+                                        <input type="checkbox" id="mycheckbox33" class="micl-checkbox" value="c3">
+                                        <label for="mycheckbox33" class="md-sys-typescale-body-medium">Third Choice</label>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -106,7 +130,7 @@
                 </div>
                 <div class="micl-card__content docs-code">
                     <pre><code>
-&lt;div style="display:flex;align-items:center"&gt;
+&lt;div class="micl-flex--vcenter"&gt;
   &lt;input type="checkbox" id="id0" class="micl-checkbox" value="v0"&gt;
   &lt;label for="id0" class="md-sys-typescale-body-medium"&gt;First Choice&lt;/label&gt;
 &lt;/div&gt;