material-inspired-component-library 1.0.0

package/docs/micl.js

@@ -0,0 +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)})})()})()})();

package/docs/radio.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MICL Radio Buttons</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="docs.css">
+    <style>
+        label {
+            color: var(--md-sys-color-on-surface);
+        }
+        .micl-card-filled .micl-card__content {
+            padding-inline: 0;
+        }
+        .micl-card-outlined .micl-card__content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        .radio {
+            display: flex;
+            align-items: center;
+        }
+    </style>
+</head>
+<body class="light">
+    <div class="headline">
+        <h1 class="md-sys-typescale-emphasized-display-small">Radio buttons</h1>
+        <div id="settings-placeholder"></div>
+    </div>
+
+    <div class="cards">
+        <div class="micl-card-elevated">
+            <div class="micl-card__content">
+                <div class="radio">
+                    <input type="radio" class="micl-radio" id="myradio1" name="choices" checked value="c1">
+                    <label for="myradio1" class="md-sys-typescale-body-medium">First Choice</label>
+                </div>
+                <div class="radio">
+                    <input type="radio" class="micl-radio" id="myradio2" name="choices" value="c2">
+                    <label for="myradio2" class="md-sys-typescale-body-medium">Second Choice</label>
+                </div>
+                <div class="radio">
+                    <input type="radio" class="micl-radio" id="myradio3" name="choices" value="c3">
+                    <label for="myradio3" class="md-sys-typescale-body-medium">Third Choice</label>
+                </div>
+                <div class="radio">
+                    <input type="radio" class="micl-radio" id="myradio4" name="choices" value="c4" disabled>
+                    <label for="myradio4" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
+                </div>
+            </div>
+        </div>
+        <div class="micl-card-filled">
+            <div class="micl-card__content">
+                <div class="radio">
+                    <input type="radio" class="micl-radio" id="myradio11" name="alternatives" checked value="c1">
+                    <label for="myradio11" class="md-sys-typescale-body-medium">First Choice</label>
+                </div>
+                <div class="radio">
+                    <input type="radio" class="micl-radio" id="myradio12" name="alternatives" value="c2">
+                    <label for="myradio12" class="md-sys-typescale-body-medium">Second Choice</label>
+                </div>
+                <div class="radio">
+                    <input type="radio" class="micl-radio" id="myradio13" name="alternatives" value="c3">
+                    <label for="myradio13" class="md-sys-typescale-body-medium">Third Choice</label>
+                </div>
+                <div class="radio">
+                    <input type="radio" class="micl-radio" id="myradio14" name="alternatives" value="c4" disabled>
+                    <label for="myradio14" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
+                </div>
+            </div>
+        </div>
+        <div class="micl-card-outlined">
+            <div class="micl-card__content">
+                <div class="radio">
+                    <label for="myradio21" class="md-sys-typescale-body-medium">First Choice</label>
+                    <input type="radio" class="micl-radio" id="myradio21" name="selection" checked value="c1">
+                </div>
+                <div class="radio">
+                    <label for="myradio22" class="md-sys-typescale-body-medium">Second Choice</label>
+                    <input type="radio" class="micl-radio" id="myradio22" name="selection" value="c2">
+                </div>
+                <div class="radio">
+                    <label for="myradio23" class="md-sys-typescale-body-medium">Third Choice</label>
+                    <input type="radio" class="micl-radio" id="myradio23" name="selection" value="c3">
+                </div>
+                <div class="radio">
+                    <label for="myradio24" class="md-sys-typescale-body-medium">Fourth Choice (disabled)</label>
+                    <input type="radio" class="micl-radio" id="myradio24" name="selection" value="c4" disabled>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/docs/select.html

@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MICL Selects</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=check,confirmation_number,dark_mode,group,home,newspaper,person,settings&display=block">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="docs.css">
+    <style>
+        .micl-card__content > .micl-textfield-outlined, .micl-card__content > .micl-textfield-filled {
+            margin: 32px 0;
+        }
+        .micl-list-item__thumbnail {
+            height: 32px;
+            min-height: 32px;
+        }
+    </style>
+</head>
+<body class="light">
+    <div class="headline">
+        <h1 class="md-sys-typescale-emphasized-display-small">Selects</h1>
+        <div id="settings-placeholder"></div>
+    </div>
+
+    <div class="cards">
+        <div class="micl-card-elevated">
+            <div class="micl-card__content">
+                <div class="micl-textfield-outlined">
+                    <label for="myselect1">Country</label>
+                    <select id="myselect1">
+                        <option class="micl-list-item-one" value=""></option>
+                        <option class="micl-list-item-one" value="AR">
+                            <span class="micl-list-item__text">Argentina</span>
+                        </option>
+                        <option class="micl-list-item-one" value="BO">
+                            <span class="micl-list-item__text">Bolivia</span>
+                        </option>
+                        <option class="micl-list-item-one" value="BR" disabled>
+                            <span class="micl-list-item__text">Brazil</span>
+                        </option>
+                        <option class="micl-list-item-one" value="CL">
+                            <span class="micl-list-item__text">Chile</span>
+                        </option>
+                        <option class="micl-list-item-one" value="CO">
+                            <span class="micl-list-item__text">Colombia</span>
+                        </option>
+                        <option class="micl-list-item-one" value="EC">
+                            <span class="micl-list-item__text">Ecuador</span>
+                        </option>
+                    </select>
+                </div>
+                <div class="micl-textfield-outlined">
+                    <label for="myselect2">Country</label>
+                    <select id="myselect2">
+                        <option class="micl-list-item-two" value="AR">
+                            <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
+                        </option>
+                        <option class="micl-list-item-two" value="BO">
+                            <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
+                        </option>
+                        <option selected class="micl-list-item-two" value="BR">
+                            <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
+                        </option>
+                        <option class="micl-list-item-two" value="CL" disabled>
+                            <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
+                        </option>
+                        <option class="micl-list-item-two" value="CO">
+                            <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
+                        </option>
+                        <option class="micl-list-item-two" value="EC">
+                            <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
+                        </option>
+                    </select>
+                </div>
+                <div class="micl-textfield-outlined">
+                    <label for="myselect3">Country</label>
+                    <select id="myselect3">
+                        <option class="micl-list-item-two" value=""></option>
+                        <option class="micl-list-item-two" value="AR">
+                            <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_Argentina.svg/330px-Flag_of_Argentina.svg.png)"></span>
+                            <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
+                        </option>
+                        <option class="micl-list-item-two" value="BO">
+                            <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Bandera_de_Bolivia_%28Estado%29.svg/330px-Bandera_de_Bolivia_%28Estado%29.svg.png)"></span>
+                            <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
+                        </option>
+                        <option class="micl-list-item-two" value="BR">
+                            <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/330px-Flag_of_Brazil.svg.png)"></span>
+                            <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
+                        </option>
+                        <option class="micl-list-item-two" value="CL">
+                            <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Flag_of_Chile.svg/330px-Flag_of_Chile.svg.png)"></span>
+                            <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
+                        </option>
+                        <option class="micl-list-item-two" value="CO" disabled>
+                            <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Colombia.svg/330px-Flag_of_Colombia.svg.png)"></span>
+                            <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
+                        </option>
+                        <option class="micl-list-item-two" value="EC">
+                            <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Flag_of_Ecuador.svg/330px-Flag_of_Ecuador.svg.png)"></span>
+                            <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
+                        </option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <div class="micl-card-outlined">
+            <div class="micl-card__content" style="padding-block-end:32px">
+                <div class="micl-textfield-filled">
+                    <label for="myselect4">Country</label>
+                    <select id="myselect4">
+                        <option class="micl-list-item-one" value=""></option>
+                        <option class="micl-list-item-one" value="AR">
+                            <span class="micl-list-item__text">Argentina</span>
+                        </option>
+                        <option class="micl-list-item-one" value="BO">
+                            <span class="micl-list-item__text">Bolivia</span>
+                        </option>
+                        <option class="micl-list-item-one" value="BR" disabled>
+                            <span class="micl-list-item__text">Brazil</span>
+                        </option>
+                        <option class="micl-list-item-one" value="CL">
+                            <span class="micl-list-item__text">Chile</span>
+                        </option>
+                        <option class="micl-list-item-one" value="CO">
+                            <span class="micl-list-item__text">Colombia</span>
+                        </option>
+                        <option class="micl-list-item-one" value="EC">
+                            <span class="micl-list-item__text">Ecuador</span>
+                        </option>
+                    </select>
+                </div>
+                <div class="micl-textfield-filled">
+                    <label for="myselect5">Country</label>
+                    <select id="myselect5" disabled>
+                        <option class="micl-list-item-one" value=""></option>
+                        <option class="micl-list-item-one" value="AR">
+                            <span class="micl-list-item__text">Argentina</span>
+                        </option>
+                        <option class="micl-list-item-one" value="BO">
+                            <span class="micl-list-item__text">Bolivia</span>
+                        </option>
+                        <option class="micl-list-item-one" value="BR" disabled>
+                            <span class="micl-list-item__text">Brazil</span>
+                        </option>
+                        <option class="micl-list-item-one" value="CL">
+                            <span class="micl-list-item__text">Chile</span>
+                        </option>
+                        <option class="micl-list-item-one" value="CO">
+                            <span class="micl-list-item__text">Colombia</span>
+                        </option>
+                        <option class="micl-list-item-one" value="EC">
+                            <span class="micl-list-item__text">Ecuador</span>
+                        </option>
+                    </select>
+                </div>
+
+                <dialog id="mydialog" class="micl-dialog" style="width:300px" closedby="any" popover>
+                    <div class="micl-dialog__headline">
+                        <h2>Select a country</h2>
+                        <span class="micl-dialog__supporting-text">Select a country from the pick list below and click <b>Save</b></span>
+                    </div>
+                    <div class="micl-dialog__content">
+                        <div class="micl-textfield-outlined" style="margin:8px">
+                            <label for="myselect5">Country</label>
+                            <select id="myselect5">
+                                <option class="micl-list-item-two" value="AR">
+                                    <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
+                                </option>
+                                <option class="micl-list-item-two" value="BO">
+                                    <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
+                                </option>
+                                <option selected class="micl-list-item-two" value="BR">
+                                    <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
+                                </option>
+                                <option class="micl-list-item-two" value="CL" disabled>
+                                    <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
+                                </option>
+                                <option class="micl-list-item-two" value="CO">
+                                    <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
+                                </option>
+                                <option class="micl-list-item-two" value="EC">
+                                    <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
+                                </option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="micl-dialog__actions">
+                        <button type="button" class="micl-button-text-s" popovertarget="mydialog">Cancel</button>
+                        <button type="button" class="micl-button-text-s">Save</button>
+                    </div>
+                </dialog>
+                <button type="button" class="micl-button-elevated-m" popovertarget="mydialog">Open Dialog with Select</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/docs/sidesheet.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MICL Side Sheets</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_back,close,dark_mode&display=block">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="docs.css">
+    <style>
+        .micl-card__content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            padding-block: 32px;
+            row-gap: 32px;
+        }
+        p {
+            color: var(--md-sys-color-on-surface);
+        }
+        .switch {
+            display: flex;
+            width: 100%;
+            align-items: center;
+            justify-content: space-between;
+            height: 48px;
+        }
+        input[type=checkbox].micl-switch {
+            --md-sys-switch-unselected-icon: "";
+        }
+        #mysidesheet2 {
+            --md-sys-divider-thickness: 0;
+        }
+    </style>
+</head>
+<body class="light">
+    <div class="headline">
+        <h1 class="md-sys-typescale-emphasized-display-small">Side sheets</h1>
+        <div id="settings-placeholder"></div>
+    </div>
+
+    <div class="cards">
+        <div class="micl-card-filled">
+            <div class="micl-card__content">
+                <dialog id="mysidesheet1" class="micl-sidesheet" closedby="any" popover>
+                    <div class="micl-sidesheet__headline">
+                        <h2>Title</h2>
+                        <button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet1">close</button>
+                    </div>
+                    <div class="micl-sidesheet__content">
+                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                        <p>Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
+                        <p>Per faucibus aliquet vivamus convallis curabitur massa habitasse aliquam ante pulvinar cubilia, nullam euismod vulputate nostra fermentum sagittis duis primis curae non viverra, cursus malesuada facilisi nisl blandit integer sem rhoncus odio nibh. Imperdiet eleifend bibendum lacinia non nec donec malesuada platea leo feugiat parturient, aptent duis sociis scelerisque natoque mus dui quam ullamcorper varius, mollis egestas velit nibh id quisque et ante sociosqu torquent. Pharetra placerat netus ligula nulla etiam ultricies, fames nibh varius massa orci ad, senectus penatibus quis leo semper. Aptent nisi auctor metus augue suspendisse commodo eu lacinia neque laoreet leo venenatis pharetra aliquet habitasse tellus, urna volutpat torquent accumsan sollicitudin lectus viverra nostra fusce primis maecenas sociis magnis netus porttitor.</p>
+                        <p>Mus phasellus nostra aliquet euismod faucibus per curae nec, montes rutrum cursus suscipit fames vivamus tincidunt, ullamcorper fermentum diam commodo arcu proin velit. Sociosqu mollis donec himenaeos eleifend ultricies id purus hac, dictum duis neque blandit ullamcorper condimentum sapien dis porttitor, mauris bibendum nostra vivamus faucibus orci metus. Facilisi bibendum himenaeos auctor tempor sed sociosqu nullam, ad class parturient odio enim ut tincidunt cras, in cum sapien inceptos consequat vitae.</p>
+                    </div>
+                </dialog>
+                <button type="button" class="micl-button-filled-m" popovertarget="mysidesheet1">Open Standard Sheet</button>
+
+                <dialog id="mysidesheet2" class="micl-sidesheet" closedby="any" popover>
+                    <div class="micl-sidesheet__headline">
+                        <h2>Title</h2>
+                        <button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet2">close</button>
+                    </div>
+                    <div class="micl-sidesheet__content">
+                        <p>Lorem ipsum dolor sit amet consectetur adipiscing elit, fringilla commodo proin natoque lobortis maecenas penatibus volutpat, dapibus erat tortor gravida augue torquent. Vitae tortor torquent suspendisse sem quisque etiam parturient eleifend, platea lacinia orci lacus pulvinar sociosqu habitasse accumsan, nisi inceptos ut tellus ornare gravida natoque. Velit fusce viverra cursus dignissim sollicitudin eros at bibendum tempus porta risus, torquent urna est mus euismod interdum enim gravida mattis.</p>
+                        <p>Potenti facilisis litora porta tincidunt semper vulputate himenaeos conubia ullamcorper, lacinia a consequat malesuada molestie pharetra interdum sed ut neque, sociosqu libero id montes rhoncus vestibulum suscipit fringilla. Dis sed est risus pulvinar eleifend, aliquet orci quis leo. Penatibus neque nibh cras nostra magnis vivamus, quis conubia sociis diam class, euismod et quisque metus fames. Feugiat donec magnis fusce elementum dis imperdiet velit convallis eget, maecenas sed sem lectus class facilisis posuere sociosqu, himenaeos taciti habitant orci senectus bibendum dignissim cursus.</p>
+                        <p>Per faucibus aliquet vivamus convallis curabitur massa habitasse aliquam ante pulvinar cubilia, nullam euismod vulputate nostra fermentum sagittis duis primis curae non viverra, cursus malesuada facilisi nisl blandit integer sem rhoncus odio nibh. Imperdiet eleifend bibendum lacinia non nec donec malesuada platea leo feugiat parturient, aptent duis sociis scelerisque natoque mus dui quam ullamcorper varius, mollis egestas velit nibh id quisque et ante sociosqu torquent. Pharetra placerat netus ligula nulla etiam ultricies, fames nibh varius massa orci ad, senectus penatibus quis leo semper. Aptent nisi auctor metus augue suspendisse commodo eu lacinia neque laoreet leo venenatis pharetra aliquet habitasse tellus, urna volutpat torquent accumsan sollicitudin lectus viverra nostra fusce primis maecenas sociis magnis netus porttitor.</p>
+                        <p>Mus phasellus nostra aliquet euismod faucibus per curae nec, montes rutrum cursus suscipit fames vivamus tincidunt, ullamcorper fermentum diam commodo arcu proin velit. Sociosqu mollis donec himenaeos eleifend ultricies id purus hac, dictum duis neque blandit ullamcorper condimentum sapien dis porttitor, mauris bibendum nostra vivamus faucibus orci metus. Facilisi bibendum himenaeos auctor tempor sed sociosqu nullam, ad class parturient odio enim ut tincidunt cras, in cum sapien inceptos consequat vitae.</p>
+                    </div>
+                </dialog>
+                <button type="button" class="micl-button-filled-m" popovertarget="mysidesheet2">Open Standard Sheet without dividers</button>
+
+                <dialog id="mysidesheet3" class="micl-sidesheet" closedby="closerequest">
+                    <div class="micl-sidesheet__headline">
+                        <button class="micl-iconbutton-standard-s material-symbols-outlined">arrow_back</button>
+                        <h2>Title</h2>
+                        <button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet3">close</button>
+                    </div>
+                    <div class="micl-sidesheet__content">
+                        <p class="md-sys-typescale-body-medium" style="padding-top:1rem">Make your selection:</p>
+                        <div class="switch">
+                            <label for="cb01" class="md-sys-typescale-body-medium">Selection A</label>
+                            <input type="checkbox" id="cb01" class="micl-switch">
+                        </div>
+                        <div class="switch">
+                            <label for="cb02" class="md-sys-typescale-body-medium">Selection B</label>
+                            <input type="checkbox" id="cb02" class="micl-switch" checked>
+                        </div>
+                        <div class="switch">
+                            <label for="cb03" class="md-sys-typescale-body-medium">Selection C</label>
+                            <input type="checkbox" id="cb03" class="micl-switch">
+                        </div>
+                        <div class="switch">
+                            <label for="cb04" class="md-sys-typescale-body-medium">Selection D</label>
+                            <input type="checkbox" id="cb04" class="micl-switch" checked>
+                        </div>
+                        <div class="switch">
+                            <label for="cb05" class="md-sys-typescale-body-medium">Selection E</label>
+                            <input type="checkbox" id="cb05" class="micl-switch">
+                        </div>
+                    </div>
+                    <div class="micl-sidesheet__actions">
+                    </div>
+                </dialog>
+                <button type="button" class="micl-button-filled-m" popovertarget="mysidesheet3">Open Modal Sheet</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/docs/slider.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MICL Sliders</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,volume_up&display=block">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="docs.css">
+    <style>
+        .micl-card-elevated, .micl-card-filled, .micl-card-outlined {
+            padding: 0 16px;
+            text-align: center;
+        }
+        .range {
+            margin: 64px 8px;
+        }
+        .micl-card-elevated input[type=range] {
+            width: 100%;
+        }
+        .micl-card-filled input[type=range] {
+            height: 360px;
+        }
+    </style>
+</head>
+<body class="light">
+    <div class="headline">
+        <h1 class="md-sys-typescale-emphasized-display-small">Sliders</h1>
+        <div id="settings-placeholder"></div>
+    </div>
+
+    <div class="cards">
+        <div class="micl-card-elevated">
+            <div class="range">
+                <input type="range" class="micl-slider-xs" min="1" max="10" value="6">
+            </div>
+            <div class="range">
+                <input type="range" class="micl-slider-s" min="0" max="100" value="25" step="25" list="markers">
+                <datalist id="markers">
+                  <option value="0"></option>
+                  <option value="25"></option>
+                  <option value="50"></option>
+                  <option value="75"></option>
+                  <option value="100"></option>
+                </datalist>
+            </div>
+            <div class="range micl-slider__container">
+                <span class="micl-slider__icon material-symbols-outlined">volume_up</span>
+                <input type="range" class="micl-slider-m" min="3.5" max="12.5" value="9.5" step="0.5">
+            </div>
+            <div class="range">
+                <input type="range" class="micl-slider-l" value="0">
+            </div>
+            <div class="range">
+                <input type="range" class="micl-slider-xl" disabled>
+            </div>
+        </div>
+        <div class="micl-card-filled">
+            <div class="range">
+                <input type="range" class="micl-slider-xl micl-slider--vertical">
+            </div>
+        </div>
+    </div>
+
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>