npm - material-inspired-component-library - Versions diffs - 1.0.0 - Mend

material-inspired-component-library 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (174) hide show

package/.editorconfig +12 -0
package/.gitattributes +9 -0
package/.github/ISSUE_TEMPLATE/bug_report.md +35 -0
package/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
package/LICENSE +21 -0
package/README.md +99 -0
package/components/README.md +12 -0
package/components/accordion/README.md +94 -0
package/components/bottomsheet/README.md +77 -0
package/components/bottomsheet/bottomsheet.scss +134 -0
package/components/bottomsheet/index.ts +152 -0
package/components/button/README.md +92 -0
package/components/button/button.scss +515 -0
package/components/button/index.ts +73 -0
package/components/card/README.md +125 -0
package/components/card/card.scss +261 -0
package/components/checkbox/README.md +62 -0
package/components/checkbox/checkbox.scss +275 -0
package/components/checkbox/index.ts +48 -0
package/components/dialog/README.md +133 -0
package/components/dialog/dialog.scss +262 -0
package/components/divider/README.md +52 -0
package/components/divider/divider.scss +74 -0
package/components/iconbutton/README.md +86 -0
package/components/iconbutton/iconbutton.scss +461 -0
package/components/iconbutton/index.ts +73 -0
package/components/list/README.md +176 -0
package/components/list/index.ts +108 -0
package/components/list/list.scss +295 -0
package/components/menu/README.md +96 -0
package/components/menu/index.ts +77 -0
package/components/menu/menu.scss +124 -0
package/components/radio/README.md +53 -0
package/components/radio/radio.scss +138 -0
package/components/select/README.md +84 -0
package/components/select/select.scss +122 -0
package/components/sidesheet/README.md +99 -0
package/components/sidesheet/sidesheet.scss +162 -0
package/components/slider/README.md +69 -0
package/components/slider/index.ts +114 -0
package/components/slider/slider.scss +258 -0
package/components/switch/README.md +49 -0
package/components/switch/switch.scss +176 -0
package/components/textfield/README.md +75 -0
package/components/textfield/index.ts +81 -0
package/components/textfield/textfield.scss +387 -0
package/components.ts +169 -0
package/dist/bottomsheet.css +1 -0
package/dist/bottomsheet.js +0 -0
package/dist/button.css +1 -0
package/dist/button.js +0 -0
package/dist/card.css +1 -0
package/dist/card.js +0 -0
package/dist/checkbox.css +1 -0
package/dist/checkbox.js +0 -0
package/dist/dialog.css +1 -0
package/dist/dialog.js +0 -0
package/dist/divider.css +1 -0
package/dist/divider.js +0 -0
package/dist/iconbutton.css +1 -0
package/dist/iconbutton.js +0 -0
package/dist/list.css +1 -0
package/dist/list.js +0 -0
package/dist/menu.css +1 -0
package/dist/menu.js +0 -0
package/dist/micl.css +1 -0
package/dist/micl.js +1 -0
package/dist/radio.css +1 -0
package/dist/radio.js +0 -0
package/dist/select.css +1 -0
package/dist/select.js +0 -0
package/dist/sidesheet.css +1 -0
package/dist/sidesheet.js +0 -0
package/dist/slider.css +1 -0
package/dist/slider.js +0 -0
package/dist/switch.css +1 -0
package/dist/switch.js +0 -0
package/dist/textfield.css +1 -0
package/dist/textfield.js +0 -0
package/docs/accordion.html +285 -0
package/docs/bottomsheet.html +162 -0
package/docs/button.html +206 -0
package/docs/card-awards.webp +0 -0
package/docs/card-cabinet.webp +0 -0
package/docs/card-city.webp +0 -0
package/docs/card-fingerprint.webp +0 -0
package/docs/card-holiday.webp +0 -0
package/docs/card-names.webp +0 -0
package/docs/card.html +91 -0
package/docs/checkbox.html +99 -0
package/docs/dialog.html +153 -0
package/docs/divider.html +103 -0
package/docs/docs.css +34 -0
package/docs/docs.js +69 -0
package/docs/iconbutton.html +197 -0
package/docs/index.html +319 -0
package/docs/list.html +224 -0
package/docs/menu.html +143 -0
package/docs/micl.css +1 -0
package/docs/micl.js +1 -0
package/docs/radio.html +101 -0
package/docs/select.html +205 -0
package/docs/sidesheet.html +115 -0
package/docs/slider.html +72 -0
package/docs/switch.html +151 -0
package/docs/textfield.html +151 -0
package/docs/themes/airblue/dark-hc.css +51 -0
package/docs/themes/airblue/dark-mc.css +51 -0
package/docs/themes/airblue/dark.css +51 -0
package/docs/themes/airblue/light-hc.css +51 -0
package/docs/themes/airblue/light-mc.css +51 -0
package/docs/themes/airblue/light.css +51 -0
package/docs/themes/airblue/theme.css +306 -0
package/docs/themes/barnred/dark-hc.css +51 -0
package/docs/themes/barnred/dark-mc.css +51 -0
package/docs/themes/barnred/dark.css +51 -0
package/docs/themes/barnred/light-hc.css +51 -0
package/docs/themes/barnred/light-mc.css +51 -0
package/docs/themes/barnred/light.css +51 -0
package/docs/themes/barnred/theme.css +306 -0
package/docs/themes/citrine/dark-hc.css +51 -0
package/docs/themes/citrine/dark-mc.css +51 -0
package/docs/themes/citrine/dark.css +51 -0
package/docs/themes/citrine/light-hc.css +51 -0
package/docs/themes/citrine/light-mc.css +51 -0
package/docs/themes/citrine/light.css +51 -0
package/docs/themes/citrine/theme.css +306 -0
package/docs/themes/olivegreen/dark-hc.css +51 -0
package/docs/themes/olivegreen/dark-mc.css +51 -0
package/docs/themes/olivegreen/dark.css +51 -0
package/docs/themes/olivegreen/light-hc.css +51 -0
package/docs/themes/olivegreen/light-mc.css +51 -0
package/docs/themes/olivegreen/light.css +51 -0
package/docs/themes/olivegreen/theme.css +306 -0
package/package.json +62 -0
package/styles/README.md +99 -0
package/styles/elevation.scss +36 -0
package/styles/motion.scss +124 -0
package/styles/ripple.scss +50 -0
package/styles/shapes.scss +46 -0
package/styles/statelayer.scss +42 -0
package/styles/typography.scss +568 -0
package/styles.scss +43 -0
package/themes/README.md +57 -0
package/themes/airblue/dark-hc.css +51 -0
package/themes/airblue/dark-mc.css +51 -0
package/themes/airblue/dark.css +51 -0
package/themes/airblue/light-hc.css +51 -0
package/themes/airblue/light-mc.css +51 -0
package/themes/airblue/light.css +51 -0
package/themes/airblue/theme.css +306 -0
package/themes/barnred/dark-hc.css +51 -0
package/themes/barnred/dark-mc.css +51 -0
package/themes/barnred/dark.css +51 -0
package/themes/barnred/light-hc.css +51 -0
package/themes/barnred/light-mc.css +51 -0
package/themes/barnred/light.css +51 -0
package/themes/barnred/theme.css +306 -0
package/themes/citrine/dark-hc.css +51 -0
package/themes/citrine/dark-mc.css +51 -0
package/themes/citrine/dark.css +51 -0
package/themes/citrine/light-hc.css +51 -0
package/themes/citrine/light-mc.css +51 -0
package/themes/citrine/light.css +51 -0
package/themes/citrine/theme.css +306 -0
package/themes/olivegreen/dark-hc.css +51 -0
package/themes/olivegreen/dark-mc.css +51 -0
package/themes/olivegreen/dark.css +51 -0
package/themes/olivegreen/light-hc.css +51 -0
package/themes/olivegreen/light-mc.css +51 -0
package/themes/olivegreen/light.css +51 -0
package/themes/olivegreen/theme.css +306 -0
package/tsconfig.json +110 -0
package/webpack.config.js +49 -0

package/docs/button.html ADDED Viewed

@@ -0,0 +1,206 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MICL Buttons</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,edit&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">
+</head>
+<body class="light">
+    <div class="headline">
+        <h1 class="md-sys-typescale-emphasized-display-small">Buttons</h1>
+        <div id="settings-placeholder"></div>
+    </div>
+    <div class="cards">
+        <div class="micl-card-filled" style="width:850px">
+            <div class="micl-card__headline-m">
+                <h2>Text buttons</h2>
+            </div>
+            <div class="micl-card__content" style="padding-block:8px 16px">
+                <button type="button" class="micl-button-text-xs">Click</button>
+                <button type="button" class="micl-button-text-s">Click</button>
+                <button type="button" class="micl-button-text-m">Click</button>
+                <button type="button" class="micl-button-text-l">Click</button>
+                <button type="button" class="micl-button-text-xl">Click</button>
+                <p></p>
+                <button type="button" class="micl-button-text-xs micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-text-s micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-text-m micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-text-l micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-text-xl micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+            </div>
+        </div>
+        <div class="micl-card-outlined" style="width:850px">
+            <div class="micl-card__headline-m">
+                <h2>Elevated buttons</h2>
+            </div>
+            <div class="micl-card__content" style="padding-block:8px 16px">
+                <button type="button" class="micl-button-elevated-xs">Click</button>
+                <button type="button" class="micl-button-elevated-s">Click</button>
+                <button type="button" class="micl-button-elevated-m">Click</button>
+                <button type="button" class="micl-button-elevated-l">Click</button>
+                <button type="button" class="micl-button-elevated-xl">Click</button>
+                <p></p>
+                <button type="button" class="micl-button-elevated-xs micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-elevated-s micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-elevated-m micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-elevated-l micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-elevated-xl micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+            </div>
+        </div>
+        <div class="micl-card-elevated" style="width:850px">
+            <div class="micl-card__headline-m">
+                <h2>Filled buttons</h2>
+            </div>
+            <div class="micl-card__content" style="padding-block:8px 16px">
+                <button type="button" class="micl-button-filled-xs">Click</button>
+                <button type="button" class="micl-button-filled-s">Click</button>
+                <button type="button" class="micl-button-filled-m">Click</button>
+                <button type="button" class="micl-button-filled-l">Click</button>
+                <button type="button" class="micl-button-filled-xl">Click</button>
+                <p></p>
+                <button type="button" class="micl-button-filled-xs micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-filled-s micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-filled-m micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-filled-l micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-filled-xl micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+            </div>
+        </div>
+        <div class="micl-card-outlined" style="width:850px">
+            <div class="micl-card__headline-m">
+                <h2>Tonal buttons</h2>
+            </div>
+            <div class="micl-card__content" style="padding-block:8px 16px">
+                <button type="button" class="micl-button-tonal-xs">Click</button>
+                <button type="button" class="micl-button-tonal-s">Click</button>
+                <button type="button" class="micl-button-tonal-m">Click</button>
+                <button type="button" class="micl-button-tonal-l">Click</button>
+                <button type="button" class="micl-button-tonal-xl">Click</button>
+                <p></p>
+                <button type="button" class="micl-button-tonal-xs micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-tonal-s micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-tonal-m micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-tonal-l micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-tonal-xl micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+            </div>
+        </div>
+        <div class="micl-card-elevated" style="width:850px">
+            <div class="micl-card__headline-m">
+                <h2>Outlined buttons</h2>
+            </div>
+            <div class="micl-card__content" style="padding-block:8px 16px">
+                <button type="button" class="micl-button-outlined-xs">Click</button>
+                <button type="button" class="micl-button-outlined-s">Click</button>
+                <button type="button" class="micl-button-outlined-m">Click</button>
+                <button type="button" class="micl-button-outlined-l">Click</button>
+                <button type="button" class="micl-button-outlined-xl">Click</button>
+                <p></p>
+                <button type="button" class="micl-button-outlined-xs micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-outlined-s micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-outlined-m micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-outlined-l micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+                <button type="button" class="micl-button-outlined-xl micl-button--square">
+                    <span class="micl-button__icon material-symbols-outlined">edit</span>
+                    Click
+                </button>
+            </div>
+        </div>
+        <div class="micl-card-outlined" style="width:850px">
+            <div class="micl-card__headline-m">
+                <h2>Toggle buttons</h2>
+            </div>
+            <div class="micl-card__content" style="padding-block:8px 16px">
+                <button type="button" class="micl-button-elevated-m micl-button--toggle">Click</button>
+                <button type="button" class="micl-button-filled-m micl-button--toggle">Click</button>
+                <button type="button" class="micl-button-tonal-m micl-button--toggle">Click</button>
+                <button type="button" class="micl-button-outlined-m micl-button--toggle">Click</button>
+                <p></p>
+                <button type="button" class="micl-button-elevated-m micl-button--toggle micl-button--selected">Click</button>
+                <button type="button" class="micl-button-filled-m micl-button--toggle micl-button--selected">Click</button>
+                <button type="button" class="micl-button-tonal-m micl-button--toggle micl-button--selected">Click</button>
+                <button type="button" class="micl-button-outlined-m micl-button--toggle micl-button--selected">Click</button>
+            </div>
+        </div>
+    </div>
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/docs/card-awards.webp ADDED Viewed

Binary file

package/docs/card-cabinet.webp ADDED Viewed

Binary file

package/docs/card-city.webp ADDED Viewed

Binary file

package/docs/card-fingerprint.webp ADDED Viewed

Binary file

package/docs/card-holiday.webp ADDED Viewed

Binary file

package/docs/card-names.webp ADDED Viewed

Binary file

package/docs/card.html ADDED Viewed

@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MICL Cards</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode&display=block">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="docs.css">
+</head>
+<body class="light">
+    <div class="headline">
+        <h1 class="md-sys-typescale-emphasized-display-small">Cards</h1>
+        <div id="settings-placeholder"></div>
+    </div>
+    <div class="cards">
+        <div class="micl-card-elevated" tabindex="0">
+            <div class="micl-card__headline-s">
+                <h2>Lorem ipsum dolor sit amet consectetur adipiscing elit</h2>
+            </div>
+            <p class="micl-card__subhead">Dummy or placeholder text</p>
+            <p class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</p>
+            <div class="micl-card__content">
+                <p class="md-sys-typescale-body-small">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>
+            </div>
+        </div>
+        <div class="micl-card-filled" tabindex="0">
+            <div class="micl-card__headline-m">
+                <h2>Lorem ipsum</h2>
+            </div>
+            <p class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</p>
+            <div class="micl-card__content">
+                <p class="md-sys-typescale-body-medium">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>
+            </div>
+        </div>
+        <div class="micl-card-outlined">
+            <div class="micl-card__headline-l">
+                <h2>Lorem</h2>
+            </div>
+            <div class="micl-card__content">
+                <p class="md-sys-typescale-body-large">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>
+            </div>
+        </div>
+        <details class="micl-card-elevated">
+            <summary>
+                <img alt="holiday" class="micl-card__image" src="card-holiday.webp">
+                <span class="micl-card__headline-s">
+                    <span class="micl-heading">Lorem ipsum dolor sit amet consectetur adipiscing elit</span>
+                </span>
+                <span class="micl-card__subhead">Dummy or placeholder text</span>
+                <span class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</span>
+            </summary>
+            <div class="micl-card__content" style="padding:0">
+                <p class="md-sys-typescale-body-small" style="margin:16px">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>
+                <hr class="micl-divider">
+                <button type="button" class="micl-button-text-s">Share</button>
+            </div>
+        </details>
+        <details class="micl-card-filled">
+            <summary>
+                <img alt="cabinet" class="micl-card__image" src="card-cabinet.webp">
+                <span class="micl-card__headline-m">
+                    <span class="micl-heading">Lorem ipsum</span>
+                </span>
+                <span class="micl-card__supporting-text">This is a dummy or placeholder text commonly used in web development.</span>
+            </summary>
+            <div class="micl-card__content">
+                <p class="md-sys-typescale-body-medium">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>
+            </div>
+        </details>
+        <details class="micl-card-outlined">
+            <summary>
+                <img alt="city" class="micl-card__image" src="card-city.webp">
+                <span class="micl-card__headline-l">
+                    <span class="micl-heading">Lorem</span>
+                </span>
+            </summary>
+            <div class="micl-card__content">
+                <p class="md-sys-typescale-body-large">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>
+            </div>
+        </details>
+    </div>
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/docs/checkbox.html ADDED Viewed

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MICL Checkboxes</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode&display=block">
+    <link rel="stylesheet" href="themes/citrine/theme.css" id="theme-link">
+    <link rel="stylesheet" href="micl.css">
+    <link rel="stylesheet" href="docs.css">
+    <style>
+        label {
+            color: var(--md-sys-color-on-surface);
+        }
+        .micl-card-filled .micl-card__content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        .checkbox {
+            display: flex;
+            align-items: center;
+        }
+    </style>
+</head>
+<body class="light">
+    <div class="headline">
+        <h1 class="md-sys-typescale-emphasized-display-small">Checkboxes</h1>
+        <div id="settings-placeholder"></div>
+    </div>
+    <div class="cards">
+        <div class="micl-card-elevated">
+            <div class="micl-card__content">
+                <div class="checkbox">
+                    <input type="checkbox" id="mycheckbox1" class="micl-checkbox" value="c1">
+                    <label for="mycheckbox1" class="md-sys-typescale-body-medium">First Choice</label>
+                </div>
+                <div class="checkbox">
+                    <input type="checkbox" id="mycheckbox2" class="micl-checkbox" checked value="c2">
+                    <label for="mycheckbox2" class="md-sys-typescale-body-medium">Second Choice</label>
+                </div>
+                <div class="checkbox">
+                    <input type="checkbox" id="mycheckbox3" class="micl-checkbox" disabled value="c3">
+                    <label for="mycheckbox3" class="md-sys-typescale-body-medium">Third Choice</label>
+                </div>
+                <div class="checkbox">
+                    <input type="checkbox" id="mycheckbox4" class="micl-checkbox" disabled checked value="c4">
+                    <label for="mycheckbox4" class="md-sys-typescale-body-medium">Fourth Choice</label>
+                </div>
+            </div>
+        </div>
+        <div class="micl-card-filled">
+            <div class="micl-card__content">
+                <div class="checkbox">
+                    <label for="mycheckbox21" class="md-sys-typescale-body-medium">First Choice</label>
+                    <input type="checkbox" id="mycheckbox21" class="micl-checkbox" value="c1">
+                </div>
+                <div class="checkbox">
+                    <label for="mycheckbox22" class="md-sys-typescale-body-medium">Second Choice</label>
+                    <input type="checkbox" id="mycheckbox22" class="micl-checkbox" checked value="c2">
+                </div>
+                <div class="checkbox">
+                    <label for="mycheckbox23" class="md-sys-typescale-body-medium">Third Choice</label>
+                    <input type="checkbox" id="mycheckbox23" class="micl-checkbox" disabled value="c3">
+                </div>
+                <div class="checkbox">
+                    <label for="mycheckbox24" class="md-sys-typescale-body-medium">Fourth Choice</label>
+                    <input type="checkbox" id="mycheckbox24" class="micl-checkbox" disabled checked value="c4">
+                </div>
+            </div>
+        </div>
+        <div class="micl-card-outlined">
+            <div class="micl-card__content">
+                <div class="checkbox">
+                    <input type="checkbox" id="mycheckbox11" class="micl-checkbox micl-checkbox--error" value="c1">
+                    <label for="mycheckbox11" class="md-sys-typescale-body-medium">First Choice</label>
+                </div>
+                <div class="checkbox">
+                    <input type="checkbox" id="mycheckbox12" class="micl-checkbox micl-checkbox--error" checked value="c2">
+                    <label for="mycheckbox12" class="md-sys-typescale-body-medium">Second Choice</label>
+                </div>
+                <div class="checkbox">
+                    <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>
+                </div>
+                <div class="checkbox">
+                    <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>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>

package/docs/dialog.html ADDED Viewed

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MICL Dialogs</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=close,dark_mode,info,logout,person,restart_alt&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__content {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+            padding-block: 32px;
+            row-gap: 32px;
+        }
+    </style>
+</head>
+<body class="light">
+    <div class="headline">
+        <h1 class="md-sys-typescale-emphasized-display-small">Dialogs</h1>
+        <div id="settings-placeholder"></div>
+    </div>
+    <div class="cards">
+        <div class="micl-card-outlined">
+            <div class="micl-card__content">
+                <dialog id="mydialog1" class="micl-dialog" style="width:300px" closedby="any" popover>
+                    <div class="micl-dialog__headline">
+                        <h2>Basic dialog</h2>
+                        <span class="micl-dialog__supporting-text">A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made.</span>
+                    </div>
+                    <div class="micl-dialog__actions">
+                        <button type="button" class="micl-button-text-s" popovertarget="mydialog1">Cancel</button>
+                        <button type="button" class="micl-button-text-s">Action</button>
+                    </div>
+                </dialog>
+                <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mydialog1">Open Basic Dialog</button>
+                <dialog id="mydialog2" class="micl-dialog" style="width:400px" closedby="any" popover>
+                    <div class="micl-dialog__headline">
+                        <span class="micl-dialog__icon material-symbols-outlined">restart_alt</span>
+                        <h2>Reset settings?</h2>
+                        <span class="micl-dialog__supporting-text">This will reset your app preferences back to their default settings. The following accounts will also be signed out:</span>
+                    </div>
+                    <div class="micl-dialog__content">
+                        <hr class="micl-divider">
+                        <ul class="micl-list" style="--md-sys-list-item-background-color:transparent;margin-block:24px">
+                            <li class="micl-list-item-one">
+                                <span class="material-symbols-outlined micl-list-item__avatar">logout</span>
+                                <span class="micl-list-item__text">
+                                    <span class="micl-list-item__headline">johnny.hanssen@proton.me</span>
+                                </span>
+                            </li>
+                            <li class="micl-list-item-one">
+                                <span class="material-symbols-outlined micl-list-item__avatar">logout</span>
+                                <span class="micl-list-item__text">
+                                    <span class="micl-list-item__headline">laura.smith@outlook.com</span>
+                                </span>
+                            </li>
+                            <li class="micl-list-item-one">
+                                <span class="material-symbols-outlined micl-list-item__avatar">logout</span>
+                                <span class="micl-list-item__text">
+                                    <span class="micl-list-item__headline">lucy.hong@gmail.com</span>
+                                </span>
+                            </li>
+                        </ul>
+                        <hr class="micl-divider">
+                    </div>
+                    <div class="micl-dialog__actions">
+                        <button type="button" class="micl-button-text-s" popovertarget="mydialog2">Cancel</button>
+                        <button type="button" class="micl-button-text-s">Accept</button>
+                    </div>
+                </dialog>
+                <button class="micl-button-tonal-m micl-button--square" popovertarget="mydialog2">Open Dialog</button>
+                <dialog id="mydialog3" class="micl-dialog" style="width:350px" closedby="closerequest">
+                    <div class="micl-dialog__headline">
+                        <h2>Delete selected images?</h2>
+                        <span class="micl-dialog__supporting-text">Images will be permanently removed from your account and all synchronized devices.</span>
+                    </div>
+                    <form method="dialog" class="micl-dialog__actions">
+                        <button class="micl-button-text-s" value="donotdelete">Cancel</button>
+                        <button class="micl-button-text-s" value="dodelete">Delete</button>
+                    </form>
+                </dialog>
+                <button class="micl-button-tonal-m micl-button--square" popovertarget="mydialog3">Open Modal Dialog</button>
+                <dialog id="mydialog4" class="micl-dialog-fullscreen" closedby="none" popover>
+                    <form method="dialog" class="micl-dialog__headline">
+                        <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mydialog4" aria-label="Close">close</button>
+                        <span class="micl-dialog__icon material-symbols-outlined">person</span>
+                        <h2>Personal info</h2>
+                        <button class="micl-button-text-s" value="dosave">Save</button>
+                    </form>
+                    <div class="micl-dialog__content">
+                        <p class="micl-dialog__supporting-text">Please specify personal information about the new employee.</p>
+                        <div class="micl-textfield-outlined" style="margin-block:24px">
+                            <label for="mytextfield1">Name</label>
+                            <input type="text" id="mytextfield1" value="Marie Curie">
+                        </div>
+                        <div class="micl-textfield-outlined" style="margin-block:24px">
+                            <label for="mytextfield2">Address</label>
+                            <input type="text" id="mytextfield2" value="Rue du Boulevard 3, Paris">
+                        </div>
+                        <div class="micl-textfield-outlined">
+                            <label for="myselect">Country</label>
+                            <select id="myselect">
+                                <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">
+                                    <span class="micl-list-item__text">Brazil</span>
+                                </option>
+                                <option class="micl-list-item-one" value="CL" disabled>
+                                    <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="FR" selected>
+                                    <span class="micl-list-item__text">France</span>
+                                </option>
+                            </select>
+                        </div>
+                        <div class="micl-textfield-outlined" style="margin-block:24px 4px">
+                            <label for="mytextfield4">Profession</label>
+                            <input type="text" id="mytextfield4" value="Physics researcher">
+                        </div>
+                    </div>
+                    <form method="dialog" class="micl-dialog__actions">
+                        <button type="button" class="micl-button-text-s" popovertarget="mydialog4">Cancel</button>
+                        <button class="micl-button-text-s" value="dosave">Save</button>
+                    </form>
+                </dialog>
+                <button class="micl-button-tonal-m micl-button--square" popovertarget="mydialog4">Open Full-Screen Dialog</button>
+            </div>
+        </div>
+    </div>
+    <script src="micl.js"></script>
+    <script src="docs.js"></script>
+</body>
+</html>