material-inspired-component-library 5.0.0 → 6.0.0

package/docs/themes/peri/theme.css

@@ -0,0 +1,306 @@
+.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

@@ -5,7 +5,9 @@
     <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="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
+    <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=dark_mode,home,keyboard,schedule&display=block">
     <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
     <link rel="stylesheet" href="micl.css">
@@ -78,7 +80,7 @@
                             <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" popovertarget="mytimepicker2">07:53</button>
+                                <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">
@@ -97,7 +99,7 @@
                                     <div class="micl-dialog__actions">
                                         <button type="button" class="micl-timepicker__inputmode micl-iconbutton-standard-s micl-button--square material-symbols-outlined" data-alticon="keyboard">schedule</button>
                                         <div>
-                                            <button class="micl-button-text-s" value="">Cancel</button>
+                                            <button class="micl-button-text-s" value="" command="close" commandfor="mytimepicker2">Cancel</button>
                                             <button class="micl-button-text-s" value="OK">OK</button>
                                         </div>
                                     </div>

package/foundations/index.scss

@@ -0,0 +1,102 @@
+//
+// 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.
+
+$md-sys-icon-size: 24px;
+
+$md-sys-padding-xxs: 4px;
+$md-sys-padding-xs: 8px;
+$md-sys-padding-s: 12px;
+$md-sys-padding-m: 16px;
+$md-sys-padding-l: 20px;
+$md-sys-padding-xl: 24px;
+$md-sys-padding-xxl: 28px;
+
+:root {
+    --md-sys-icon-size: #{$md-sys-icon-size};
+
+    --md-sys-padding-xxs: #{$md-sys-padding-xxs};
+    --md-sys-padding-xs: #{$md-sys-padding-xs};
+    --md-sys-padding-s: #{$md-sys-padding-s};
+    --md-sys-padding-m: #{$md-sys-padding-m};
+    --md-sys-padding-l: #{$md-sys-padding-l};
+    --md-sys-padding-xl: #{$md-sys-padding-xl};
+    --md-sys-padding-xxl: #{$md-sys-padding-xxl};
+}
+
+.micl-hidden {
+    display: none !important;
+}
+.micl-no-transition {
+    transition: none !important;
+}
+.micl-flex--vcenter {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+.micl-grid-iconfield {
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    row-gap: var(--md-sys-padding-xl, 24px);
+    background-color: inherit;
+}
+.micl-grid-iconfield__icon {
+    grid-column: 1;
+    margin-block-start: 0.6rem;
+}
+.micl-grid-iconfield__field {
+    grid-column: 2;
+}
+
+.micl-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+}
+
+@property --micl-ripple {
+    syntax: '<integer>';
+    inherits: false;
+    initial-value: 0;
+}
+@property --micl-x {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -100000px;
+}
+@property --micl-y {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -100000px;
+}
+@property --micl-width {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+}
+@property --micl-height {
+    syntax: '<length>';
+    inherits: true;
+    initial-value: 0px;
+}

package/foundations/layout/index.scss

@@ -38,29 +38,9 @@ $md-sys-window-margin-extralarge: 24px;
 
 $md-sys-pane-spacer: 24px;
 
-$md-sys-padding-xxs: 4px;
-$md-sys-padding-xs: 8px;
-$md-sys-padding-s: 12px;
-$md-sys-padding-m: 16px;
-$md-sys-padding-l: 20px;
-$md-sys-padding-xl: 24px;
-$md-sys-padding-xxl: 28px;
-
-$md-sys-icon-size: 24px;
-
 :root {
     --md-sys-layout-pane-spacer: #{$md-sys-pane-spacer};
 
-    --md-sys-layout-padding-xxs: #{$md-sys-padding-xxs};
-    --md-sys-layout-padding-xs: #{$md-sys-padding-xs};
-    --md-sys-layout-padding-s: #{$md-sys-padding-s};
-    --md-sys-layout-padding-m: #{$md-sys-padding-m};
-    --md-sys-layout-padding-l: #{$md-sys-padding-l};
-    --md-sys-layout-padding-xl: #{$md-sys-padding-xl};
-    --md-sys-layout-padding-xxl: #{$md-sys-padding-xxl};
-
-    --md-sys-layout-icon-size: #{$md-sys-icon-size};
-
     @media (max-width: $md-sys-window-compact-max) {
         --md-sys-layout-window-margin: #{$md-sys-window-margin-compact};
     }
@@ -232,35 +212,3 @@ $md-sys-icon-size: 24px;
         flex-direction: column;
     }
 }
-
-.micl-hidden {
-    display: none !important;
-}
-
-.micl-flex--vcenter {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-
-.micl-grid-iconfield {
-    box-sizing: border-box;
-    display: grid;
-    grid-template-columns: 48px 1fr;
-    row-gap: var(--md-sys-layout-padding-xl, 24px);
-    background-color: inherit;
-}
-.micl-grid-iconfield__icon {
-    grid-column: 1;
-    margin-block-start: 0.6rem;
-}
-.micl-grid-iconfield__field {
-    grid-column: 2;
-}
-
-.micl-link {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-}

package/foundations/scrollbar/index.scss

@@ -0,0 +1,46 @@
+//
+// 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.
+
+$md-sys-scrollbar-width: 8px;
+$md-sys-scrollbar-margin: 2px;
+$md-sys-scrollbar-size: calc(#{$md-sys-scrollbar-width} + 2 * #{$md-sys-scrollbar-margin});
+$md-sys-scrollbar-thumb-color: grey;
+
+::-webkit-scrollbar {
+    width: #{$md-sys-scrollbar-size};
+    height: #{$md-sys-scrollbar-size};
+}
+::-webkit-scrollbar-thumb {
+    border-radius: calc(#{$md-sys-scrollbar-size} / 2);
+    background-color: var(--md-sys-scrollbar-thumb-color, #{$md-sys-scrollbar-thumb-color});
+    background-clip: content-box;
+    border: #{$md-sys-scrollbar-margin} solid transparent;
+}
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+@supports not selector(::-webkit-scrollbar) {
+    .micl-scrollbar {
+        scrollbar-width: auto;
+        scrollbar-color: var(--md-sys-scrollbar-thumb-color, #{$md-sys-scrollbar-thumb-color}) transparent;
+    }
+}

package/intl.d.ts

@@ -0,0 +1,9 @@
+declare namespace Intl {
+    interface Locale {
+        getWeekInfo(): {
+            firstDay: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+            weekend: number[];
+            minimalDays: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+        };
+    }
+}

package/micl.ts

@@ -22,6 +22,7 @@
 import _bottomsheet, { bottomsheetSelector } from './components/bottomsheet';
 import _button, { buttonSelector } from './components/button';
 import _checkboxgroup, { checkboxGroupSelector } from './components/checkbox';
+import _datepicker, { datepickerSelector } from './components/datepicker';
 import _list, { listSelector } from './components/list';
 import _menu, { menuSelector } from './components/menu';
 import _navigationrail, { navigationrailSelector } from './components/navigationrail';
@@ -47,6 +48,7 @@ export default (() =>
         [bottomsheetSelector]   : { component: _bottomsheet, type: HTMLDialogElement },
         [buttonSelector]        : { component: _button, type: HTMLButtonElement },
         [checkboxGroupSelector] : { component: _checkboxgroup, type: HTMLElement },
+        [datepickerSelector]    : { component: _datepicker, type: HTMLDialogElement },
         [listSelector]          : { component: _list, type: HTMLElement },
         [menuSelector]          : { component: _menu, type: HTMLElement },
         [navigationrailSelector]: { component: _navigationrail, type: HTMLLabelElement },
@@ -60,6 +62,14 @@ export default (() =>
 
     const selector = Object.keys(componentMap).join(',');
 
+    const initializeScrollbars = (): void =>
+    {
+        document.documentElement.style.setProperty(
+            '--md-sys-scrollbar-thumb-color',
+            window.getComputedStyle(document.body).getPropertyValue('--md-sys-color-outline').trim()
+        );
+    };
+
     const initializeComponent = (element: HTMLElement): void =>
     {
         for (const [selector, { component, type }] of Object.entries(componentMap)) {
@@ -94,6 +104,8 @@ export default (() =>
                 });
             }
         });
+
+        initializeScrollbars();
     };
 
     const cleanupComponent = (element: HTMLElement): void =>
@@ -118,14 +130,12 @@ export default (() =>
     const handleEvent = (event: Event): void =>
     {
         for (const [selector, { component, type }] of Object.entries(componentMap)) {
-            if (
-                (event.target as Element).matches(selector)
-                && event.target instanceof type
-                && ['input', 'keydown'].includes(event.type)
-                && typeof component[event.type as ComponentKey] === 'function'
-            ) {
-                component[event.type as ComponentKey]?.(event);
-                return;
+            if (typeof component[event.type as ComponentKey] === 'function') {
+                const e = (event.target as Element).closest(selector);
+                if (e instanceof type) {
+                    component[event.type as ComponentKey]?.(event);
+                    return;
+                }
             }
         }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-inspired-component-library",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "The Material-Inspired Component Library (MICL) offers a collection of beautifully crafted components leveraging native HTML markup, designed to align with the Material Design 3 guidelines.",
   "author": "MICL Hermana <micl.hermana@proton.me> (https://github.com/henkpb/micl)",
   "license": "MIT",
@@ -21,6 +21,7 @@
     "button",
     "card",
     "checkbox",
+    "date picker",
     "dialog",
     "divider",
     "iconbutton",