material-inspired-component-library 8.1.0 → 9.0.0

package/docs/themes/peri/theme.css

@@ -1,306 +0,0 @@
-.light {
-  --md-sys-color-primary: rgb(88 89 146);
-  --md-sys-color-surface-tint: rgb(88 89 146);
-  --md-sys-color-on-primary: rgb(255 255 255);
-  --md-sys-color-primary-container: rgb(225 223 255);
-  --md-sys-color-on-primary-container: rgb(64 65 120);
-  --md-sys-color-secondary: rgb(93 92 114);
-  --md-sys-color-on-secondary: rgb(255 255 255);
-  --md-sys-color-secondary-container: rgb(226 224 249);
-  --md-sys-color-on-secondary-container: rgb(69 69 89);
-  --md-sys-color-tertiary: rgb(121 83 105);
-  --md-sys-color-on-tertiary: rgb(255 255 255);
-  --md-sys-color-tertiary-container: rgb(255 216 236);
-  --md-sys-color-on-tertiary-container: rgb(95 60 81);
-  --md-sys-color-error: rgb(186 26 26);
-  --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(255 218 214);
-  --md-sys-color-on-error-container: rgb(147 0 10);
-  --md-sys-color-background: rgb(252 248 255);
-  --md-sys-color-on-background: rgb(27 27 33);
-  --md-sys-color-surface: rgb(252 248 255);
-  --md-sys-color-on-surface: rgb(27 27 33);
-  --md-sys-color-surface-variant: rgb(228 225 236);
-  --md-sys-color-on-surface-variant: rgb(71 70 79);
-  --md-sys-color-outline: rgb(119 118 128);
-  --md-sys-color-outline-variant: rgb(200 197 208);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(48 48 54);
-  --md-sys-color-inverse-on-surface: rgb(243 239 247);
-  --md-sys-color-inverse-primary: rgb(193 193 255);
-  --md-sys-color-primary-fixed: rgb(225 223 255);
-  --md-sys-color-on-primary-fixed: rgb(20 19 74);
-  --md-sys-color-primary-fixed-dim: rgb(193 193 255);
-  --md-sys-color-on-primary-fixed-variant: rgb(64 65 120);
-  --md-sys-color-secondary-fixed: rgb(226 224 249);
-  --md-sys-color-on-secondary-fixed: rgb(26 26 44);
-  --md-sys-color-secondary-fixed-dim: rgb(198 196 221);
-  --md-sys-color-on-secondary-fixed-variant: rgb(69 69 89);
-  --md-sys-color-tertiary-fixed: rgb(255 216 236);
-  --md-sys-color-on-tertiary-fixed: rgb(47 17 36);
-  --md-sys-color-tertiary-fixed-dim: rgb(233 185 211);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(95 60 81);
-  --md-sys-color-surface-dim: rgb(220 217 224);
-  --md-sys-color-surface-bright: rgb(252 248 255);
-  --md-sys-color-surface-container-lowest: rgb(255 255 255);
-  --md-sys-color-surface-container-low: rgb(246 242 250);
-  --md-sys-color-surface-container: rgb(240 236 244);
-  --md-sys-color-surface-container-high: rgb(234 231 239);
-  --md-sys-color-surface-container-highest: rgb(228 225 233);
-}
-.light-medium-contrast {
-  --md-sys-color-primary: rgb(47 48 102);
-  --md-sys-color-surface-tint: rgb(88 89 146);
-  --md-sys-color-on-primary: rgb(255 255 255);
-  --md-sys-color-primary-container: rgb(103 104 162);
-  --md-sys-color-on-primary-container: rgb(255 255 255);
-  --md-sys-color-secondary: rgb(52 52 72);
-  --md-sys-color-on-secondary: rgb(255 255 255);
-  --md-sys-color-secondary-container: rgb(108 107 129);
-  --md-sys-color-on-secondary-container: rgb(255 255 255);
-  --md-sys-color-tertiary: rgb(77 43 64);
-  --md-sys-color-on-tertiary: rgb(255 255 255);
-  --md-sys-color-tertiary-container: rgb(137 97 120);
-  --md-sys-color-on-tertiary-container: rgb(255 255 255);
-  --md-sys-color-error: rgb(116 0 6);
-  --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(207 44 39);
-  --md-sys-color-on-error-container: rgb(255 255 255);
-  --md-sys-color-background: rgb(252 248 255);
-  --md-sys-color-on-background: rgb(27 27 33);
-  --md-sys-color-surface: rgb(252 248 255);
-  --md-sys-color-on-surface: rgb(17 17 22);
-  --md-sys-color-surface-variant: rgb(228 225 236);
-  --md-sys-color-on-surface-variant: rgb(54 53 62);
-  --md-sys-color-outline: rgb(82 81 91);
-  --md-sys-color-outline-variant: rgb(109 108 117);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(48 48 54);
-  --md-sys-color-inverse-on-surface: rgb(243 239 247);
-  --md-sys-color-inverse-primary: rgb(193 193 255);
-  --md-sys-color-primary-fixed: rgb(103 104 162);
-  --md-sys-color-on-primary-fixed: rgb(255 255 255);
-  --md-sys-color-primary-fixed-dim: rgb(78 79 135);
-  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
-  --md-sys-color-secondary-fixed: rgb(108 107 129);
-  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
-  --md-sys-color-secondary-fixed-dim: rgb(83 83 104);
-  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
-  --md-sys-color-tertiary-fixed: rgb(137 97 120);
-  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
-  --md-sys-color-tertiary-fixed-dim: rgb(111 73 95);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
-  --md-sys-color-surface-dim: rgb(200 197 205);
-  --md-sys-color-surface-bright: rgb(252 248 255);
-  --md-sys-color-surface-container-lowest: rgb(255 255 255);
-  --md-sys-color-surface-container-low: rgb(246 242 250);
-  --md-sys-color-surface-container: rgb(234 231 239);
-  --md-sys-color-surface-container-high: rgb(223 219 227);
-  --md-sys-color-surface-container-highest: rgb(211 208 216);
-}
-.light-high-contrast {
-  --md-sys-color-primary: rgb(37 38 92);
-  --md-sys-color-surface-tint: rgb(88 89 146);
-  --md-sys-color-on-primary: rgb(255 255 255);
-  --md-sys-color-primary-container: rgb(67 67 123);
-  --md-sys-color-on-primary-container: rgb(255 255 255);
-  --md-sys-color-secondary: rgb(42 42 61);
-  --md-sys-color-on-secondary: rgb(255 255 255);
-  --md-sys-color-secondary-container: rgb(72 71 92);
-  --md-sys-color-on-secondary-container: rgb(255 255 255);
-  --md-sys-color-tertiary: rgb(66 34 54);
-  --md-sys-color-on-tertiary: rgb(255 255 255);
-  --md-sys-color-tertiary-container: rgb(98 62 83);
-  --md-sys-color-on-tertiary-container: rgb(255 255 255);
-  --md-sys-color-error: rgb(96 0 4);
-  --md-sys-color-on-error: rgb(255 255 255);
-  --md-sys-color-error-container: rgb(152 0 10);
-  --md-sys-color-on-error-container: rgb(255 255 255);
-  --md-sys-color-background: rgb(252 248 255);
-  --md-sys-color-on-background: rgb(27 27 33);
-  --md-sys-color-surface: rgb(252 248 255);
-  --md-sys-color-on-surface: rgb(0 0 0);
-  --md-sys-color-surface-variant: rgb(228 225 236);
-  --md-sys-color-on-surface-variant: rgb(0 0 0);
-  --md-sys-color-outline: rgb(44 43 52);
-  --md-sys-color-outline-variant: rgb(73 72 81);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(48 48 54);
-  --md-sys-color-inverse-on-surface: rgb(255 255 255);
-  --md-sys-color-inverse-primary: rgb(193 193 255);
-  --md-sys-color-primary-fixed: rgb(67 67 123);
-  --md-sys-color-on-primary-fixed: rgb(255 255 255);
-  --md-sys-color-primary-fixed-dim: rgb(44 44 99);
-  --md-sys-color-on-primary-fixed-variant: rgb(255 255 255);
-  --md-sys-color-secondary-fixed: rgb(72 71 92);
-  --md-sys-color-on-secondary-fixed: rgb(255 255 255);
-  --md-sys-color-secondary-fixed-dim: rgb(49 49 68);
-  --md-sys-color-on-secondary-fixed-variant: rgb(255 255 255);
-  --md-sys-color-tertiary-fixed: rgb(98 62 83);
-  --md-sys-color-on-tertiary-fixed: rgb(255 255 255);
-  --md-sys-color-tertiary-fixed-dim: rgb(73 40 60);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(255 255 255);
-  --md-sys-color-surface-dim: rgb(186 183 191);
-  --md-sys-color-surface-bright: rgb(252 248 255);
-  --md-sys-color-surface-container-lowest: rgb(255 255 255);
-  --md-sys-color-surface-container-low: rgb(243 239 247);
-  --md-sys-color-surface-container: rgb(228 225 233);
-  --md-sys-color-surface-container-high: rgb(214 211 219);
-  --md-sys-color-surface-container-highest: rgb(200 197 205);
-}
-.dark {
-  --md-sys-color-primary: rgb(193 193 255);
-  --md-sys-color-surface-tint: rgb(193 193 255);
-  --md-sys-color-on-primary: rgb(41 42 96);
-  --md-sys-color-primary-container: rgb(64 65 120);
-  --md-sys-color-on-primary-container: rgb(225 223 255);
-  --md-sys-color-secondary: rgb(198 196 221);
-  --md-sys-color-on-secondary: rgb(47 47 66);
-  --md-sys-color-secondary-container: rgb(69 69 89);
-  --md-sys-color-on-secondary-container: rgb(226 224 249);
-  --md-sys-color-tertiary: rgb(233 185 211);
-  --md-sys-color-on-tertiary: rgb(70 38 58);
-  --md-sys-color-tertiary-container: rgb(95 60 81);
-  --md-sys-color-on-tertiary-container: rgb(255 216 236);
-  --md-sys-color-error: rgb(255 180 171);
-  --md-sys-color-on-error: rgb(105 0 5);
-  --md-sys-color-error-container: rgb(147 0 10);
-  --md-sys-color-on-error-container: rgb(255 218 214);
-  --md-sys-color-background: rgb(19 19 24);
-  --md-sys-color-on-background: rgb(228 225 233);
-  --md-sys-color-surface: rgb(19 19 24);
-  --md-sys-color-on-surface: rgb(228 225 233);
-  --md-sys-color-surface-variant: rgb(71 70 79);
-  --md-sys-color-on-surface-variant: rgb(200 197 208);
-  --md-sys-color-outline: rgb(145 143 154);
-  --md-sys-color-outline-variant: rgb(71 70 79);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(228 225 233);
-  --md-sys-color-inverse-on-surface: rgb(48 48 54);
-  --md-sys-color-inverse-primary: rgb(88 89 146);
-  --md-sys-color-primary-fixed: rgb(225 223 255);
-  --md-sys-color-on-primary-fixed: rgb(20 19 74);
-  --md-sys-color-primary-fixed-dim: rgb(193 193 255);
-  --md-sys-color-on-primary-fixed-variant: rgb(64 65 120);
-  --md-sys-color-secondary-fixed: rgb(226 224 249);
-  --md-sys-color-on-secondary-fixed: rgb(26 26 44);
-  --md-sys-color-secondary-fixed-dim: rgb(198 196 221);
-  --md-sys-color-on-secondary-fixed-variant: rgb(69 69 89);
-  --md-sys-color-tertiary-fixed: rgb(255 216 236);
-  --md-sys-color-on-tertiary-fixed: rgb(47 17 36);
-  --md-sys-color-tertiary-fixed-dim: rgb(233 185 211);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(95 60 81);
-  --md-sys-color-surface-dim: rgb(19 19 24);
-  --md-sys-color-surface-bright: rgb(57 56 63);
-  --md-sys-color-surface-container-lowest: rgb(14 14 19);
-  --md-sys-color-surface-container-low: rgb(27 27 33);
-  --md-sys-color-surface-container: rgb(31 31 37);
-  --md-sys-color-surface-container-high: rgb(42 41 47);
-  --md-sys-color-surface-container-highest: rgb(53 52 58);
-}
-.dark-medium-contrast {
-  --md-sys-color-primary: rgb(218 217 255);
-  --md-sys-color-surface-tint: rgb(193 193 255);
-  --md-sys-color-on-primary: rgb(30 31 85);
-  --md-sys-color-primary-container: rgb(139 139 200);
-  --md-sys-color-on-primary-container: rgb(0 0 0);
-  --md-sys-color-secondary: rgb(220 218 243);
-  --md-sys-color-on-secondary: rgb(36 36 54);
-  --md-sys-color-secondary-container: rgb(144 142 165);
-  --md-sys-color-on-secondary-container: rgb(0 0 0);
-  --md-sys-color-tertiary: rgb(255 207 232);
-  --md-sys-color-on-tertiary: rgb(58 27 47);
-  --md-sys-color-tertiary-container: rgb(176 132 156);
-  --md-sys-color-on-tertiary-container: rgb(0 0 0);
-  --md-sys-color-error: rgb(255 210 204);
-  --md-sys-color-on-error: rgb(84 0 3);
-  --md-sys-color-error-container: rgb(255 84 73);
-  --md-sys-color-on-error-container: rgb(0 0 0);
-  --md-sys-color-background: rgb(19 19 24);
-  --md-sys-color-on-background: rgb(228 225 233);
-  --md-sys-color-surface: rgb(19 19 24);
-  --md-sys-color-on-surface: rgb(255 255 255);
-  --md-sys-color-surface-variant: rgb(71 70 79);
-  --md-sys-color-on-surface-variant: rgb(222 219 230);
-  --md-sys-color-outline: rgb(179 176 187);
-  --md-sys-color-outline-variant: rgb(145 143 153);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(228 225 233);
-  --md-sys-color-inverse-on-surface: rgb(42 41 47);
-  --md-sys-color-inverse-primary: rgb(65 66 122);
-  --md-sys-color-primary-fixed: rgb(225 223 255);
-  --md-sys-color-on-primary-fixed: rgb(8 6 65);
-  --md-sys-color-primary-fixed-dim: rgb(193 193 255);
-  --md-sys-color-on-primary-fixed-variant: rgb(47 48 102);
-  --md-sys-color-secondary-fixed: rgb(226 224 249);
-  --md-sys-color-on-secondary-fixed: rgb(15 15 33);
-  --md-sys-color-secondary-fixed-dim: rgb(198 196 221);
-  --md-sys-color-on-secondary-fixed-variant: rgb(52 52 72);
-  --md-sys-color-tertiary-fixed: rgb(255 216 236);
-  --md-sys-color-on-tertiary-fixed: rgb(34 7 26);
-  --md-sys-color-tertiary-fixed-dim: rgb(233 185 211);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(77 43 64);
-  --md-sys-color-surface-dim: rgb(19 19 24);
-  --md-sys-color-surface-bright: rgb(69 68 74);
-  --md-sys-color-surface-container-lowest: rgb(7 7 12);
-  --md-sys-color-surface-container-low: rgb(29 29 35);
-  --md-sys-color-surface-container: rgb(40 39 45);
-  --md-sys-color-surface-container-high: rgb(51 50 56);
-  --md-sys-color-surface-container-highest: rgb(62 61 67);
-}
-.dark-high-contrast {
-  --md-sys-color-primary: rgb(241 238 255);
-  --md-sys-color-surface-tint: rgb(193 193 255);
-  --md-sys-color-on-primary: rgb(0 0 0);
-  --md-sys-color-primary-container: rgb(189 189 253);
-  --md-sys-color-on-primary-container: rgb(3 0 60);
-  --md-sys-color-secondary: rgb(241 238 255);
-  --md-sys-color-on-secondary: rgb(0 0 0);
-  --md-sys-color-secondary-container: rgb(194 192 217);
-  --md-sys-color-on-secondary-container: rgb(9 9 27);
-  --md-sys-color-tertiary: rgb(255 235 243);
-  --md-sys-color-on-tertiary: rgb(0 0 0);
-  --md-sys-color-tertiary-container: rgb(229 181 207);
-  --md-sys-color-on-tertiary-container: rgb(27 3 19);
-  --md-sys-color-error: rgb(255 236 233);
-  --md-sys-color-on-error: rgb(0 0 0);
-  --md-sys-color-error-container: rgb(255 174 164);
-  --md-sys-color-on-error-container: rgb(34 0 1);
-  --md-sys-color-background: rgb(19 19 24);
-  --md-sys-color-on-background: rgb(228 225 233);
-  --md-sys-color-surface: rgb(19 19 24);
-  --md-sys-color-on-surface: rgb(255 255 255);
-  --md-sys-color-surface-variant: rgb(71 70 79);
-  --md-sys-color-on-surface-variant: rgb(255 255 255);
-  --md-sys-color-outline: rgb(242 238 250);
-  --md-sys-color-outline-variant: rgb(196 193 204);
-  --md-sys-color-shadow: rgb(0 0 0);
-  --md-sys-color-scrim: rgb(0 0 0);
-  --md-sys-color-inverse-surface: rgb(228 225 233);
-  --md-sys-color-inverse-on-surface: rgb(0 0 0);
-  --md-sys-color-inverse-primary: rgb(65 66 122);
-  --md-sys-color-primary-fixed: rgb(225 223 255);
-  --md-sys-color-on-primary-fixed: rgb(0 0 0);
-  --md-sys-color-primary-fixed-dim: rgb(193 193 255);
-  --md-sys-color-on-primary-fixed-variant: rgb(8 6 65);
-  --md-sys-color-secondary-fixed: rgb(226 224 249);
-  --md-sys-color-on-secondary-fixed: rgb(0 0 0);
-  --md-sys-color-secondary-fixed-dim: rgb(198 196 221);
-  --md-sys-color-on-secondary-fixed-variant: rgb(15 15 33);
-  --md-sys-color-tertiary-fixed: rgb(255 216 236);
-  --md-sys-color-on-tertiary-fixed: rgb(0 0 0);
-  --md-sys-color-tertiary-fixed-dim: rgb(233 185 211);
-  --md-sys-color-on-tertiary-fixed-variant: rgb(34 7 26);
-  --md-sys-color-surface-dim: rgb(19 19 24);
-  --md-sys-color-surface-bright: rgb(80 79 86);
-  --md-sys-color-surface-container-lowest: rgb(0 0 0);
-  --md-sys-color-surface-container-low: rgb(31 31 37);
-  --md-sys-color-surface-container: rgb(48 48 54);
-  --md-sys-color-surface-container-high: rgb(59 59 65);
-  --md-sys-color-surface-container-highest: rgb(71 70 76);
-}

package/docs/timepicker.html

@@ -1,160 +0,0 @@
-<!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 Time Pickers">
-    <title>MICL Time Pickers</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=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,home,keyboard,schedule&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: 8px;
-        }
-        p {
-            margin-block: 24px 0px;
-            color: var(--md-sys-color-on-surface);
-        }
-    </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-s" 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>Time Pickers</h1>
-                    <p class="micl-appbar__subtitle">Showcasing MICL time pickers</p>
-                </div>
-                <div id="settings-placeholder" class="micl-appbar__trailing"></div>
-            </header>
-
-            <div class="micl-pane__columns">
-                <div class="micl-pane__column" style="gap:24px">
-                    <div class="micl-card-outlined">
-                        <div class="micl-card__content">
-                            <p class="md-sys-typescale-body-medium">Default non-MICL time input field</p>
-                            <input type="time" name="t0" style="width:fit-content" value="08:40">
-                            <p class="md-sys-typescale-body-medium">MICL time textfield component without the MICL time picker component</p>
-                            <div class="micl-textfield-outlined" style="width:fit-content">
-                                <label for="mytextfield0">Start time</label>
-                                <input type="time" id="mytextfield0" value="08:40">
-                            </div>
-                            <p class="md-sys-typescale-body-medium">MICL time textfield component with the MICL time picker component</p>
-                            <div class="micl-textfield-outlined" style="width:fit-content">
-                                <label for="mytextfield1">Start time</label>
-                                <input type="time" id="mytextfield1" data-timepicker="mytimepicker1" value="23:19">
-                            </div>
-                            <dialog id="mytimepicker1" class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="mytitle1">
-                                <form method="dialog">
-                                    <div class="micl-dialog__headline">
-                                        <h2 id="mytitle1">Enter time</h2>
-                                    </div>
-                                    <div class="micl-dialog__content">
-                                        <input type="number" name="hour" value="00" aria-labelledby="myhour1">
-                                        <span class="micl-timepicker__separator">:</span>
-                                        <input type="number" name="minute" value="00" aria-labelledby="myminute1">
-                                        <div class="micl-timepicker__period"></div>
-                                        <span id="myhour1" class="micl-timepicker__supporting-text-hour">Hour</span>
-                                        <span id="myminute1" class="micl-timepicker__supporting-text-minute">Minute</span>
-                                        <div class="micl-timepicker__dial"></div>
-                                    </div>
-                                    <div class="micl-dialog__actions">
-                                        <button type="button" id="btn1" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--toggle micl-button--square material-symbols-outlined" commandfor="btn1" command="--micl-toggle" data-miclicon="keyboard" data-micliconselected="schedule"></button>
-                                        <div>
-                                            <button class="micl-button-text-s" value="">Cancel</button>
-                                            <button class="micl-button-text-s" value="OK">OK</button>
-                                        </div>
-                                    </div>
-                                </form>
-                            </dialog>
-                            <p class="md-sys-typescale-body-medium">Time input using a MICL button component that opens the MICL time picker</p>
-                            <div class="micl-flex--vcenter" style="column-gap:8px">
-                                <label for="mytime" class="md-sys-typescale-body-large">Start time:</label>
-                                <button type="button" id="mytime" class="micl-button-text-m" command="show-modal" commandfor="mytimepicker2" value="07:53">07:53</button>
-                            </div>
-                            <dialog id="mytimepicker2" class="micl-dialog micl-timepicker micl-timepicker--horizontal" closedby="closerequest" aria-labelledby="mytitle2">
-                                <form method="dialog">
-                                    <div class="micl-dialog__headline">
-                                        <h2 id="mytitle2">Enter time</h2>
-                                    </div>
-                                    <div class="micl-dialog__content">
-                                        <input type="number" name="hour" value="00" aria-labelledby="myhour2">
-                                        <span class="micl-timepicker__separator">:</span>
-                                        <input type="number" name="minute" value="00" aria-labelledby="myminute2">
-                                        <div class="micl-timepicker__period"></div>
-                                        <span id="myhour2" class="micl-timepicker__supporting-text-hour">Hour</span>
-                                        <span id="myminute2" class="micl-timepicker__supporting-text-minute">Minute</span>
-                                        <div class="micl-timepicker__dial micl-hidden"></div>
-                                    </div>
-                                    <div class="micl-dialog__actions">
-                                        <button type="button" id="btn2" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--toggle micl-button--square material-symbols-outlined" commandfor="btn2" command="--micl-toggle" data-miclicon="keyboard" data-micliconselected="schedule"></button>
-                                        <div>
-                                            <button class="micl-button-text-s" value="">Cancel</button>
-                                            <button class="micl-button-text-s" value="OK">OK</button>
-                                        </div>
-                                    </div>
-                                </form>
-                            </dialog>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </section>
-        <section class="micl-pane">
-            <div class="micl-card-filled" style="margin-top:8px">
-                <div class="micl-card__headline-s">
-                    <h2>Code example</h2>
-                    <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
-                </div>
-                <div class="micl-card__content docs-code">
-                    <pre tabindex="-1"><code>&lt;dialog class="micl-dialog micl-timepicker" closedby="closerequest" aria-labelledby="id0"&gt;
-  &lt;form method="dialog"&gt;
-    &lt;div class="micl-dialog__headline"&gt;
-      &lt;h2 id="id0"&gt;Enter time&lt;/h2&gt;
-    &lt;/div&gt;
-    &lt;div class="micl-dialog__content"&gt;
-      &lt;input type="number" name="hour" value="00" aria-labelledby="id1"&gt;
-      &lt;span class="micl-timepicker__separator"&gt;:&lt;/span&gt;
-      &lt;input type="number" name="minute" value="00" aria-labelledby="id2"&gt;
-      &lt;div class="micl-timepicker__period"&gt;&lt;/div&gt;
-      &lt;span id="id1" class="micl-timepicker__supporting-text-hour"&gt;Hour&lt;/span&gt;
-      &lt;span id="id2" class="micl-timepicker__supporting-text-minute"&gt;Minute&lt;/span&gt;
-      &lt;div class="micl-timepicker__dial"&gt;&lt;/div&gt;
-    &lt;/div&gt;
-    &lt;div class="micl-dialog__actions"&gt;
-      &lt;button
-        type="button"
-        id="btn"
-        class="micl-timepicker__inputmode micl-iconbutton-standard-s
-               micl-button--toggle micl-button--square material-symbols-outlined"
-        commandfor="btn"
-        command="--micl-toggle"
-        data-miclicon="keyboard"
-        data-micliconselected="schedule"
-      &gt;&lt;/button&gt;
-      &lt;div&gt;
-        &lt;button class="micl-button-text-s" value=""&gt;Cancel&lt;/button&gt;
-        &lt;button class="micl-button-text-s" value="OK"&gt;OK&lt;/button&gt;
-      &lt;/div&gt;
-    &lt;/div&gt;
-  &lt;/form&gt;
-&lt;/dialog&gt;</code></pre>
-                </div>
-            </div>
-        </section>
-    </main>
-
-    <script src="micl.js"></script>
-    <script src="docs.js"></script>
-</body>
-</html>

package/foundations/form/index.ts

@@ -1,174 +0,0 @@
-//
-// Copyright © 2025 Hermana AS
-//
-// Permission is hereby granted, free of charge, to any person obtaining a copy
-// of this software and associated documentation files (the "Software"), to deal
-// in the Software without restriction, including without limitation the rights
-// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-// copies of the Software, and to permit persons to whom the Software is
-// furnished to do so, subject to the following conditions:
-//
-// The above copyright notice and this permission notice shall be included in all
-// copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-// SOFTWARE.
-
-export default (() =>
-{
-    const isCVElement = (element: Element): element is
-        HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLFieldSetElement =>
-        'willValidate' in element;
-
-    const setErrorStateCheckbox = (element: HTMLInputElement): boolean =>
-    {
-        element.classList.toggle('micl-checkbox--error', !!element.validationMessage);
-
-        return false;
-    };
-
-    const setErrorStateTextField = (textField: HTMLElement, message: string): boolean =>
-    {
-        textField.classList.toggle('micl-textfield--error', !!message);
-
-        const supporting = textField.querySelector(
-            '.micl-textfield__supporting-text'
-        ) as HTMLElement;
-
-        if (supporting) {
-            if (!message) {
-                if ('micltext' in supporting.dataset) {
-                    supporting.textContent = supporting.dataset.micltext || '';
-                }
-            }
-            else {
-                if (!supporting.dataset.micltext) {
-                    supporting.dataset.micltext = supporting.textContent;
-                }
-                supporting.textContent = message;
-            }
-        }
-
-        return !!message && !!supporting;
-    };
-
-    const setErrorState = (element: HTMLElement): boolean =>
-    {
-        if (
-            !element.parentElement
-            || !isCVElement(element)
-        ) {
-            return false;
-        }
-        let reported = false;
-
-        if (
-            element instanceof HTMLInputElement
-            && (element.type === 'checkbox')
-            && element.classList.contains('micl-checkbox')
-        ) {
-            reported = setErrorStateCheckbox(element);
-        }
-        else if (
-            element.parentElement.classList.contains('micl-textfield-outlined')
-            || element.parentElement.classList.contains('micl-textfield-filled')
-        ) {
-            reported = setErrorStateTextField(element.parentElement, element.validationMessage);
-        }
-
-        return reported;
-    };
-
-    const clearCustomValidity = (event: Event): void =>
-    {
-        const element = event.target as Element;
-        if (isCVElement(element)) {
-            element.setCustomValidity('');
-        }
-    };
-
-    const setCustomValidityFieldSet = (fieldset: HTMLFieldSetElement): void =>
-    {
-        const message = fieldset.dataset.miclvalidateMessage || '';
-        if (!message) {
-            return;
-        }
-
-        if (fieldset.matches('[data-miclvalidate-checkboxes-name]')) {
-            const name       = fieldset.dataset.miclvalidateCheckboxesName || '';
-            const countEqual = fieldset.dataset.miclvalidateCheckboxesCountEqual || '';
-            const countMax   = fieldset.dataset.miclvalidateCheckboxesCountMax || '';
-            const countMin   = fieldset.dataset.miclvalidateCheckboxesCountMin || '';
-
-            if (name && (countEqual || countMax || countMin)) {
-                const checkedCount = fieldset.querySelectorAll<HTMLInputElement>(
-                    `input[type="checkbox"][name="${name}"]:checked`
-                ).length;
-                const expectedCountEqual = parseInt(countEqual, 10);
-                const expectedCountMax   = parseInt(countMax, 10);
-                const expectedCountMin   = parseInt(countMin, 10);
-
-                let invalid = (!isNaN(expectedCountEqual) && (checkedCount != expectedCountEqual))
-                              || (!isNaN(expectedCountMax) && (checkedCount > expectedCountMax))
-                              || (!isNaN(expectedCountMin) && (checkedCount < expectedCountMin));
-
-                fieldset.setCustomValidity(invalid ? message : '');
-
-                const firstCheckbox = fieldset.querySelector<HTMLInputElement>(
-                    `input[type="checkbox"][name="${name}"]`
-                );
-                if (firstCheckbox) {
-                    firstCheckbox.setCustomValidity(invalid ? message : '');
-                    if (invalid) {
-                        firstCheckbox.addEventListener('change', clearCustomValidity);
-                    }
-                    else {
-                        firstCheckbox.removeEventListener('change', clearCustomValidity);
-                    }
-                }
-            }
-        }
-    };
-
-    const validity = (container: HTMLFormElement | HTMLFieldSetElement, doReport?: boolean): boolean =>
-    {
-        let invalid = false;
-
-        container.querySelectorAll<HTMLFieldSetElement>(
-            'fieldset'
-        ).forEach(setCustomValidityFieldSet);
-
-        Array.from(container.elements).forEach(element =>
-        {
-            if (isCVElement(element) && element.willValidate) {
-                if (!element.checkValidity()) {
-                    invalid = true;
-                }
-                let reported = setErrorState(element);
-                if (!reported && doReport) {
-                    element.reportValidity();
-                }
-            }
-        });
-
-        return !invalid;
-    };
-
-    return {
-        validateFieldSet: (fieldset: HTMLFieldSetElement, doReport?: boolean): boolean =>
-        {
-            setCustomValidityFieldSet(fieldset);
-            return validity(fieldset, doReport);
-        },
-
-        validateForm: (form: HTMLFormElement, doReport?: boolean): boolean =>
-        {
-            return validity(form, doReport);
-        }
-    };
-})();