material-inspired-component-library 8.1.0 → 9.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 (284) hide show
  1. package/README.md +106 -18
  2. package/components/README.md +1 -1
  3. package/components/accordion/README.md +6 -6
  4. package/components/alert/README.md +10 -10
  5. package/components/alert/index.scss +27 -52
  6. package/components/appbar/README.md +19 -6
  7. package/components/appbar/index.scss +40 -44
  8. package/components/badge/README.md +12 -10
  9. package/components/badge/index.scss +21 -25
  10. package/components/bottomsheet/README.md +26 -1
  11. package/components/bottomsheet/index.scss +58 -44
  12. package/components/button/README.md +70 -10
  13. package/components/button/_shared.scss +210 -0
  14. package/components/button/index.scss +75 -389
  15. package/components/card/README.md +97 -85
  16. package/components/card/index.scss +46 -65
  17. package/components/checkbox/README.md +25 -14
  18. package/{tools/shapes/check.mjs → components/checkbox/_label.scss} +37 -42
  19. package/components/checkbox/index.scss +66 -66
  20. package/components/chip/README.md +186 -0
  21. package/components/chip/index.scss +285 -0
  22. package/components/datepicker/README.md +79 -0
  23. package/components/datepicker/index.scss +346 -315
  24. package/components/dialog/README.md +20 -10
  25. package/components/dialog/index.scss +55 -66
  26. package/components/divider/README.md +16 -15
  27. package/components/divider/index.scss +9 -25
  28. package/components/iconbutton/README.md +63 -12
  29. package/components/iconbutton/index.scss +142 -303
  30. package/components/list/README.md +89 -156
  31. package/components/list/index.scss +34 -36
  32. package/components/menu/README.md +81 -155
  33. package/components/menu/index.scss +52 -58
  34. package/components/navigationbar/README.md +108 -0
  35. package/components/navigationbar/index.scss +185 -0
  36. package/components/navigationrail/README.md +62 -37
  37. package/components/navigationrail/_navitem.scss +96 -0
  38. package/components/navigationrail/index.scss +78 -132
  39. package/components/progressindicator/README.md +83 -47
  40. package/components/progressindicator/index.scss +622 -172
  41. package/components/radio/README.md +11 -9
  42. package/components/radio/index.scss +36 -33
  43. package/components/select/README.md +12 -7
  44. package/components/select/index.scss +26 -34
  45. package/components/shapes/README.md +3 -3
  46. package/components/shapes/index.scss +0 -1
  47. package/components/sidesheet/README.md +21 -9
  48. package/components/sidesheet/index.scss +38 -46
  49. package/components/slider/README.md +21 -0
  50. package/components/slider/index.scss +108 -139
  51. package/components/snackbar/README.md +32 -35
  52. package/components/snackbar/index.scss +10 -22
  53. package/components/stepper/README.md +14 -7
  54. package/components/stepper/index.scss +58 -39
  55. package/components/switch/README.md +22 -15
  56. package/components/switch/index.scss +68 -60
  57. package/components/textfield/README.md +48 -5
  58. package/components/textfield/index.scss +192 -248
  59. package/components/timepicker/README.md +53 -23
  60. package/components/timepicker/index.scss +110 -128
  61. package/dist/alert.css +1 -1
  62. package/dist/alert.js +1 -1
  63. package/dist/appbar.css +1 -1
  64. package/dist/appbar.js +1 -1
  65. package/dist/badge.css +1 -1
  66. package/dist/badge.js +1 -1
  67. package/dist/base.css +1 -0
  68. package/dist/base.js +1 -0
  69. package/dist/bottomsheet.css +1 -1
  70. package/dist/bottomsheet.js +1 -1
  71. package/dist/button.css +1 -1
  72. package/dist/button.js +1 -1
  73. package/dist/card.css +1 -1
  74. package/dist/card.js +1 -1
  75. package/dist/checkbox.css +1 -1
  76. package/dist/checkbox.js +1 -1
  77. package/dist/chip.css +1 -0
  78. package/dist/chip.js +1 -0
  79. package/dist/components/button/index.d.ts +1 -1
  80. package/dist/components/iconbutton/index.d.ts +2 -7
  81. package/dist/components/slider/index.d.ts +1 -1
  82. package/dist/components/textfield/index.d.ts +2 -2
  83. package/dist/datepicker.css +1 -1
  84. package/dist/datepicker.js +1 -1
  85. package/dist/dialog.css +1 -1
  86. package/dist/dialog.js +1 -1
  87. package/dist/divider.css +1 -1
  88. package/dist/divider.js +1 -1
  89. package/dist/field.css +1 -0
  90. package/dist/field.js +1 -0
  91. package/dist/foundations/form/index.js +1 -1
  92. package/dist/foundations/runtime.d.ts +15 -0
  93. package/dist/foundations/runtime.js +1 -0
  94. package/dist/iconbutton.css +1 -1
  95. package/dist/iconbutton.js +1 -1
  96. package/dist/layout.css +1 -1
  97. package/dist/layout.js +1 -1
  98. package/dist/list.css +1 -1
  99. package/dist/list.js +1 -1
  100. package/dist/menu.css +1 -1
  101. package/dist/menu.js +1 -1
  102. package/dist/micl.css +1 -1
  103. package/dist/micl.d.ts +14 -5
  104. package/dist/micl.js +1 -1
  105. package/dist/navigationbar.css +1 -0
  106. package/dist/navigationbar.js +1 -0
  107. package/dist/navigationrail.css +1 -1
  108. package/dist/navigationrail.js +1 -1
  109. package/dist/progressindicator.css +1 -1
  110. package/dist/progressindicator.js +1 -1
  111. package/dist/radio.css +1 -1
  112. package/dist/radio.js +1 -1
  113. package/dist/scrollbar.js +1 -1
  114. package/dist/select.css +1 -1
  115. package/dist/select.js +1 -1
  116. package/dist/shapes.css +1 -1
  117. package/dist/shapes.js +1 -1
  118. package/dist/sidesheet.css +1 -1
  119. package/dist/sidesheet.js +1 -1
  120. package/dist/slider.css +1 -1
  121. package/dist/slider.js +1 -1
  122. package/dist/snackbar.css +1 -1
  123. package/dist/snackbar.js +1 -1
  124. package/dist/stepper.css +1 -1
  125. package/dist/stepper.js +1 -1
  126. package/dist/switch.css +1 -1
  127. package/dist/switch.js +1 -1
  128. package/dist/textfield.css +1 -1
  129. package/dist/textfield.js +1 -1
  130. package/dist/timepicker.css +1 -1
  131. package/dist/timepicker.js +1 -1
  132. package/foundations/_index.scss +35 -0
  133. package/foundations/{index.scss → base/index.scss} +21 -56
  134. package/foundations/field/index.scss +37 -0
  135. package/foundations/layout/index.scss +64 -65
  136. package/package.json +23 -9
  137. package/styles/statelayer.scss +20 -5
  138. package/styles.scss +5 -2
  139. package/.claude/settings.local.json +0 -14
  140. package/.editorconfig +0 -12
  141. package/.gitattributes +0 -9
  142. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -35
  143. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  144. package/CLAUDE.md +0 -53
  145. package/CODE_OF_CONDUCT.md +0 -128
  146. package/components/bottomsheet/index.ts +0 -153
  147. package/components/button/index.ts +0 -79
  148. package/components/checkbox/index.ts +0 -148
  149. package/components/datepicker/index.ts +0 -693
  150. package/components/iconbutton/index.ts +0 -77
  151. package/components/list/index.ts +0 -138
  152. package/components/menu/index.ts +0 -145
  153. package/components/navigationrail/index.ts +0 -87
  154. package/components/progressindicator/index.ts +0 -77
  155. package/components/slider/index.ts +0 -149
  156. package/components/snackbar/index.ts +0 -118
  157. package/components/stepper/index.ts +0 -248
  158. package/components/textfield/index.ts +0 -188
  159. package/components/timepicker/index.ts +0 -413
  160. package/dist/components/progressindicator/index.d.ts +0 -6
  161. package/dist/foundations.css +0 -1
  162. package/dist/foundations.js +0 -1
  163. package/docs/accordion.html +0 -344
  164. package/docs/alert.html +0 -177
  165. package/docs/bottomsheet.html +0 -240
  166. package/docs/button.html +0 -290
  167. package/docs/card-awards.webp +0 -0
  168. package/docs/card-cabinet.webp +0 -0
  169. package/docs/card-city.webp +0 -0
  170. package/docs/card-fingerprint.webp +0 -0
  171. package/docs/card-holiday.webp +0 -0
  172. package/docs/card-names.webp +0 -0
  173. package/docs/card.html +0 -159
  174. package/docs/checkbox.html +0 -147
  175. package/docs/datepicker.html +0 -274
  176. package/docs/dialog.html +0 -195
  177. package/docs/divider.html +0 -139
  178. package/docs/docs.css +0 -26
  179. package/docs/docs.js +0 -139
  180. package/docs/iconbutton.html +0 -329
  181. package/docs/index.html +0 -431
  182. package/docs/list.html +0 -310
  183. package/docs/menu.html +0 -574
  184. package/docs/micl.css +0 -1
  185. package/docs/micl.js +0 -1
  186. package/docs/navigationrail.html +0 -138
  187. package/docs/progressindicator.html +0 -288
  188. package/docs/radio.html +0 -123
  189. package/docs/select.html +0 -337
  190. package/docs/shapes.css +0 -1
  191. package/docs/shapes.html +0 -159
  192. package/docs/shapes.js +0 -1
  193. package/docs/sidesheet.html +0 -149
  194. package/docs/slider.html +0 -141
  195. package/docs/snackbar.html +0 -102
  196. package/docs/stepper.html +0 -319
  197. package/docs/switch.html +0 -196
  198. package/docs/textfield.html +0 -208
  199. package/docs/themes/airblue/dark-hc.css +0 -51
  200. package/docs/themes/airblue/dark-mc.css +0 -51
  201. package/docs/themes/airblue/dark.css +0 -51
  202. package/docs/themes/airblue/light-hc.css +0 -51
  203. package/docs/themes/airblue/light-mc.css +0 -51
  204. package/docs/themes/airblue/light.css +0 -51
  205. package/docs/themes/airblue/theme.css +0 -306
  206. package/docs/themes/barnred/dark-hc.css +0 -51
  207. package/docs/themes/barnred/dark-mc.css +0 -51
  208. package/docs/themes/barnred/dark.css +0 -51
  209. package/docs/themes/barnred/light-hc.css +0 -51
  210. package/docs/themes/barnred/light-mc.css +0 -51
  211. package/docs/themes/barnred/light.css +0 -51
  212. package/docs/themes/barnred/theme.css +0 -306
  213. package/docs/themes/citrine/dark-hc.css +0 -51
  214. package/docs/themes/citrine/dark-mc.css +0 -51
  215. package/docs/themes/citrine/dark.css +0 -51
  216. package/docs/themes/citrine/light-hc.css +0 -51
  217. package/docs/themes/citrine/light-mc.css +0 -51
  218. package/docs/themes/citrine/light.css +0 -51
  219. package/docs/themes/citrine/theme.css +0 -306
  220. package/docs/themes/gray/dark-hc.css +0 -51
  221. package/docs/themes/gray/dark-mc.css +0 -51
  222. package/docs/themes/gray/dark.css +0 -51
  223. package/docs/themes/gray/light-hc.css +0 -51
  224. package/docs/themes/gray/light-mc.css +0 -51
  225. package/docs/themes/gray/light.css +0 -51
  226. package/docs/themes/gray/theme.css +0 -306
  227. package/docs/themes/greenery/dark-hc.css +0 -51
  228. package/docs/themes/greenery/dark-mc.css +0 -51
  229. package/docs/themes/greenery/dark.css +0 -51
  230. package/docs/themes/greenery/light-hc.css +0 -51
  231. package/docs/themes/greenery/light-mc.css +0 -51
  232. package/docs/themes/greenery/light.css +0 -51
  233. package/docs/themes/greenery/theme.css +0 -306
  234. package/docs/themes/hermana/dark-hc.css +0 -51
  235. package/docs/themes/hermana/dark-mc.css +0 -51
  236. package/docs/themes/hermana/dark.css +0 -51
  237. package/docs/themes/hermana/light-hc.css +0 -51
  238. package/docs/themes/hermana/light-mc.css +0 -51
  239. package/docs/themes/hermana/light.css +0 -51
  240. package/docs/themes/hermana/theme.css +0 -306
  241. package/docs/themes/illuminating/dark-hc.css +0 -51
  242. package/docs/themes/illuminating/dark-mc.css +0 -51
  243. package/docs/themes/illuminating/dark.css +0 -51
  244. package/docs/themes/illuminating/light-hc.css +0 -51
  245. package/docs/themes/illuminating/light-mc.css +0 -51
  246. package/docs/themes/illuminating/light.css +0 -51
  247. package/docs/themes/illuminating/theme.css +0 -306
  248. package/docs/themes/magenta/dark-hc.css +0 -51
  249. package/docs/themes/magenta/dark-mc.css +0 -51
  250. package/docs/themes/magenta/dark.css +0 -51
  251. package/docs/themes/magenta/light-hc.css +0 -51
  252. package/docs/themes/magenta/light-mc.css +0 -51
  253. package/docs/themes/magenta/light.css +0 -51
  254. package/docs/themes/magenta/theme.css +0 -306
  255. package/docs/themes/mocha/dark-hc.css +0 -51
  256. package/docs/themes/mocha/dark-mc.css +0 -51
  257. package/docs/themes/mocha/dark.css +0 -51
  258. package/docs/themes/mocha/light-hc.css +0 -51
  259. package/docs/themes/mocha/light-mc.css +0 -51
  260. package/docs/themes/mocha/light.css +0 -51
  261. package/docs/themes/mocha/theme.css +0 -306
  262. package/docs/themes/olivegreen/dark-hc.css +0 -51
  263. package/docs/themes/olivegreen/dark-mc.css +0 -51
  264. package/docs/themes/olivegreen/dark.css +0 -51
  265. package/docs/themes/olivegreen/light-hc.css +0 -51
  266. package/docs/themes/olivegreen/light-mc.css +0 -51
  267. package/docs/themes/olivegreen/light.css +0 -51
  268. package/docs/themes/olivegreen/theme.css +0 -306
  269. package/docs/themes/peri/dark-hc.css +0 -51
  270. package/docs/themes/peri/dark-mc.css +0 -51
  271. package/docs/themes/peri/dark.css +0 -51
  272. package/docs/themes/peri/light-hc.css +0 -51
  273. package/docs/themes/peri/light-mc.css +0 -51
  274. package/docs/themes/peri/light.css +0 -51
  275. package/docs/themes/peri/theme.css +0 -306
  276. package/docs/timepicker.html +0 -160
  277. package/foundations/form/index.ts +0 -174
  278. package/foundations/layout/README.md +0 -127
  279. package/intl.d.ts +0 -9
  280. package/micl.ts +0 -221
  281. package/styles/README.md +0 -196
  282. package/tools/shapes/generate.mjs +0 -828
  283. package/tsconfig.json +0 -116
  284. package/webpack.config.js +0 -104
package/foundations/layout/README.md DELETED
@@ -1,127 +0,0 @@
1
- # Layout
2
- This guide explains how to use Material-Inspired Component Library (MICL) CSS classes to implement the [Material Design 3 Layout](https://m3.material.io/foundations/layout/understanding-layout/overview) guidelines.
3
-
4
- ## Basic Layout Structure
5
-
6
- ### HTML
7
- A standard layout is comprised of a **navigation region** and a **body region**. The body region itself is divided into one or more **panes**.
8
-
9
- ```HTML
10
- <body class="micl-window">
11
- <nav id="micl-navigationrail">
12
- ...
13
- </nav>
14
- <main class="micl-body">
15
- <section class="micl-pane">
16
- <header class="micl-appbar">
17
- ...
18
- </header>
19
- <div>
20
- ...app content...
21
- </div>
22
- </section>
23
- </main>
24
- </body>
25
- ```
26
-
27
- ### CSS
28
- Import the layout styles into your project:
29
-
30
- ```CSS
31
- @use "material-inspired-component-library/dist/layout";
32
- ```
33
-
34
- Or import all MICL styles:
35
- ```CSS
36
- @use "material-inspired-component-library/styles";
37
- ```
38
-
39
- ## Layout Components Explained
40
-
41
- ### Window
42
- The **window** is the entire viewport of your application. Add the `micl-window` class to the `<body>` element to apply fundamental layout styles, such as horizontal margins and the background color.
43
-
44
- For **spatial environments** where the main layout parts are visually separated, add the `micl-window--spatial` class. This makes the `<body>` background visible, allowing you to use a custom background image or color.
45
-
46
- ```HTML
47
- <body class="micl-window micl-window--spatial" style="background-image:url('landscape.webp')">
48
- ...
49
- </body>
50
- ```
51
-
52
- ### Navigation region
53
- Use the dedicated [Navigation Rail](../../components/navigationrail/README.md) component to display the main destinations in your application.
54
-
55
- ### Body region
56
- The body region holds the majority of your app's content. Use the `<main>` element with the `micl-body` class to define this area.
57
-
58
- #### Panes
59
- Panes divide the body region into 1 to 3 distinct vertical areas. Use an element like the `<section>` element with the `micl-pane` class to create a pane with a **flexible width** that adapts to its content. To create a pane with a **fixed width**, add the `micl-pane--fixed` class.
60
-
61
- To ensure that flexible panes distribute space evenly among themselves, add the `micl-body--evenly` class to the `micl-body` container.
62
-
63
- ##### Responsive pane behavior
64
- Panes respond to window width changes by either stacking or becoming hidden. The following classes control this behavior:
65
-
66
- ###### Hiding panes
67
- These classes hide a pane based on the window's size, following Material Design's responsive breakpoints.
68
-
69
- | CSS class | Description |
70
- | --------- | ----------- |
71
- | micl-pane--hidden-to-medium | Hides the pane in compact-sized windows. |
72
- | micl-pane--hidden-to-expanded | Hides the pane in compact and medium-sized windows. |
73
- | micl-pane--hidden-to-large | Hides the pane in compact, medium and expanded-sized windows. |
74
- | micl-pane--hidden-to-extralarge | Hides the pane in all sizes except extra-large. |
75
-
76
- ###### Stacking panes
77
- Add one of these classes to the `micl-body` container to determine when panes should stack vertically instead of aligning horizontally.
78
-
79
- | CSS class | Description |
80
- | --------- | ----------- |
81
- | micl-body--stacked-to-medium | Panes stack vertically in compact-sized windows. |
82
- | micl-body--stacked-to-expanded | Panes stack vertically in compact and medium-sized windows. |
83
- | micl-body--stacked-to-large | Panes stack vertically in compact, medium, and expanded-sized windows. |
84
- | micl-body--stacked-to-extralarge | Panes stack vertically in all sizes except extra-large. |
85
-
86
- ###### Columns within panes
87
- You can further divide the content within a pane into multiple columns by using a `<div>` with the `micl-pane__columns` class. Use the `micl-pane__column` class for each column.
88
-
89
- ```HTML
90
- <section class="micl-pane">
91
- <header class="micl-appbar">
92
- ...
93
- </header>
94
- <div class="micl-pane__columns">
95
- <div class="micl-pane__column">...</div>
96
- <div class="micl-pane__column">...</div>
97
- </div>
98
- </section>
99
- ```
100
-
101
- To evenly distribute space between columns, add the `micl-pane__columns--evenly` class to the `micl-pane__columns` container.
102
-
103
- Add one of these classes to the `micl-pane__columns` container to determine when columns should stack vertically instead of aligning horizontally.
104
-
105
- | CSS class | Description |
106
- | --------- | ----------- |
107
- | micl-pane__columns--stacked-to-medium | Columns stack vertically in compact-sized windows. |
108
- | micl-pane__columns--stacked-to-expanded | Columns stack vertically in compact and medium-sized windows. |
109
- | micl-pane__columns--stacked-to-large | Columns stack vertically in compact, medium, and expanded-sized windows. |
110
- | micl-pane__columns--stacked-to-extralarge | Columns stack vertically in all sizes except extra-large. |
111
-
112
- ## Customizations
113
- You can customize the layout settings by overriding its global CSS variables. These variables are declared on the `:root` pseudo-class.
114
-
115
- | Variable name | Default Value | Description |
116
- | ------------- | ------------- | ----------- |
117
- | --md-sys-layout-pane-spacer | 24px | |
118
-
119
- **Example: Changing the space between panes**
120
-
121
- ```HTML
122
- <body style="--md-sys-layout-pane-spacer:32px">
123
- <main class="micl-body">
124
- ...
125
- </main>
126
- </body>
127
- ```
package/intl.d.ts DELETED
@@ -1,9 +0,0 @@
1
- declare namespace Intl {
2
- interface Locale {
3
- getWeekInfo(): {
4
- firstDay: 1 | 2 | 3 | 4 | 5 | 6 | 7;
5
- weekend: number[];
6
- minimalDays: 1 | 2 | 3 | 4 | 5 | 6 | 7;
7
- };
8
- }
9
- }
package/micl.ts DELETED
@@ -1,221 +0,0 @@
1
- //
2
- // Copyright © 2025 Hermana AS
3
- //
4
- // Permission is hereby granted, free of charge, to any person obtaining a copy
5
- // of this software and associated documentation files (the "Software"), to deal
6
- // in the Software without restriction, including without limitation the rights
7
- // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
8
- // copies of the Software, and to permit persons to whom the Software is
9
- // furnished to do so, subject to the following conditions:
10
- //
11
- // The above copyright notice and this permission notice shall be included in all
12
- // copies or substantial portions of the Software.
13
- //
14
- // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15
- // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16
- // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17
- // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18
- // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
19
- // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
20
- // SOFTWARE.
21
-
22
- import _bottomsheet, { bottomsheetSelector } from './components/bottomsheet';
23
- import _button, { buttonSelector } from './components/button';
24
- import _checkboxgroup, { checkboxGroupSelector } from './components/checkbox';
25
- import _datepicker, { datepickerSelector } from './components/datepicker';
26
- import _list, { listSelector } from './components/list';
27
- import _menu, { menuSelector } from './components/menu';
28
- import _navigationrail, { navigationrailSelector } from './components/navigationrail';
29
- import _progressindicator, { progressindicatorSelector } from './components/progressindicator';
30
- import _slider, { sliderSelector } from './components/slider';
31
- import _snackbar, { snackbarSelector } from './components/snackbar';
32
- import _stepper, { stepperSelector } from './components/stepper';
33
- import _textfield, { textfieldSelector, textareaSelector, selectSelector } from './components/textfield';
34
- import _timepicker, { timepickerSelector } from './components/timepicker';
35
-
36
- interface ComponentEventHandlers {
37
- input? : (event: Event) => void;
38
- keydown?: (event: Event) => void;
39
- change? : (event: Event) => void;
40
- }
41
-
42
- interface ComponentEntry<T extends HTMLElement> {
43
- component: ComponentEventHandlers & {
44
- initialize?: (element: T) => void;
45
- cleanup? : (element: T) => void;
46
- };
47
- type: new () => T;
48
- }
49
-
50
- type EventHandlerKey = keyof ComponentEventHandlers;
51
-
52
- export default (() =>
53
- {
54
- const componentMap: Record<string, ComponentEntry<any>> = {
55
- [bottomsheetSelector] : { component: _bottomsheet, type: HTMLDialogElement },
56
- [buttonSelector] : { component: _button, type: HTMLButtonElement },
57
- [checkboxGroupSelector] : { component: _checkboxgroup, type: HTMLElement },
58
- [datepickerSelector] : { component: _datepicker, type: HTMLDialogElement },
59
- [listSelector] : { component: _list, type: HTMLElement },
60
- [menuSelector] : { component: _menu, type: HTMLElement },
61
- [navigationrailSelector]: { component: _navigationrail, type: HTMLElement },
62
- [progressindicatorSelector]: { component: _progressindicator, type: HTMLProgressElement },
63
- [selectSelector] : { component: _textfield, type: HTMLSelectElement },
64
- [sliderSelector] : { component: _slider, type: HTMLInputElement },
65
- [snackbarSelector] : { component: _snackbar, type: HTMLElement },
66
- [stepperSelector] : { component: _stepper, type: HTMLElement },
67
- [textareaSelector] : { component: _textfield, type: HTMLTextAreaElement },
68
- [textfieldSelector] : { component: _textfield, type: HTMLInputElement },
69
- [timepickerSelector] : { component: _timepicker, type: HTMLDialogElement }
70
- };
71
-
72
- const selector = Object.keys(componentMap).join(',');
73
-
74
- const findEntry = (element: HTMLElement): ComponentEntry<HTMLElement> | undefined =>
75
- Object.entries(componentMap)
76
- .find(([selector, { type }]) => element.matches(selector) && element instanceof type)
77
- ?.[1];
78
-
79
- const initializeScrollbars = (): void =>
80
- {
81
- document.documentElement.style.setProperty(
82
- '--md-sys-scrollbar-thumb-color',
83
- window.getComputedStyle(document.body).getPropertyValue('--md-sys-color-outline').trim()
84
- );
85
- };
86
-
87
- const initializeComponent = (element: HTMLElement): void =>
88
- {
89
- const entry = findEntry(element);
90
- if (entry && typeof entry.component.initialize === 'function') {
91
- entry.component.initialize(element);
92
- }
93
- };
94
-
95
- const rippleInitialized = new WeakSet<HTMLElement>();
96
-
97
- const initializeComponents = (parent: HTMLDocument | HTMLElement): void =>
98
- {
99
- parent.querySelectorAll<HTMLElement>(selector).forEach(initializeComponent);
100
- parent.querySelectorAll<HTMLElement>('[class*="micl-"], [class*="micl-"] > summary').forEach(element =>
101
- {
102
- if (rippleInitialized.has(element)) return;
103
-
104
- if (window.getComputedStyle(element).getPropertyValue('--micl-ripple') === '1') {
105
- element.addEventListener('pointerdown', (e: PointerEvent) =>
106
- {
107
- if ((e.currentTarget as Element).classList.contains('micl-card--nonactionable')) {
108
- return;
109
- }
110
- e.stopPropagation();
111
-
112
- const r = element.getBoundingClientRect();
113
- element.style.setProperty('--micl-x', `${e.clientX - r.left}px`);
114
- element.style.setProperty('--micl-y', `${e.clientY - r.top}px`);
115
-
116
- element.classList.remove('micl-rippling');
117
- void element.offsetWidth;
118
- element.classList.add('micl-rippling');
119
-
120
- const cleanup = (ev: AnimationEvent): void =>
121
- {
122
- if (ev.animationName !== 'micl-ripple') return;
123
-
124
- element.classList.remove('micl-rippling');
125
- element.style.removeProperty('--micl-x');
126
- element.style.removeProperty('--micl-y');
127
- element.removeEventListener('animationend', cleanup);
128
- };
129
-
130
- element.addEventListener('animationend', cleanup);
131
- });
132
-
133
- rippleInitialized.add(element);
134
- }
135
- });
136
-
137
- initializeScrollbars();
138
- };
139
-
140
- const cleanupComponent = (element: HTMLElement): void =>
141
- {
142
- const entry = findEntry(element);
143
- if (entry && typeof entry.component.cleanup === 'function') {
144
- entry.component.cleanup(element);
145
- }
146
- };
147
-
148
- const cleanupComponents = (parent: HTMLDocument | HTMLElement): void =>
149
- {
150
- parent.querySelectorAll<HTMLElement>(selector).forEach(cleanupComponent);
151
- };
152
-
153
- const handleEvent = (event: Event): void =>
154
- {
155
- const target = (event.target as Element).closest(selector);
156
- if (!(target instanceof HTMLElement)) return;
157
-
158
- const entry = findEntry(target);
159
- const key = event.type as EventHandlerKey;
160
- if (entry && typeof entry.component[key] === 'function') {
161
- entry.component[key]?.(event);
162
- }
163
- };
164
-
165
- const activate = () =>
166
- {
167
- const observer = new MutationObserver(mutations =>
168
- {
169
- mutations.forEach(mutation =>
170
- {
171
- if (mutation.type !== 'childList') {
172
- return;
173
- }
174
- mutation.addedNodes.forEach(node =>
175
- {
176
- if (node instanceof HTMLElement) {
177
- if (node.matches(selector)) {
178
- initializeComponent(node);
179
- }
180
- node.querySelectorAll<HTMLElement>(selector).forEach(initializeComponent);
181
- }
182
- });
183
- mutation.removedNodes.forEach(node =>
184
- {
185
- if (node instanceof HTMLElement) {
186
- if (node.matches(selector)) {
187
- cleanupComponent(node);
188
- }
189
- cleanupComponents(node);
190
- }
191
- });
192
- });
193
- });
194
- observer.observe(document.body, { childList: true, subtree: true });
195
-
196
- initializeComponents(document);
197
-
198
- // Delegated Event Handlers
199
- document.addEventListener('change', handleEvent);
200
- document.addEventListener('input', handleEvent);
201
- document.addEventListener('keydown', handleEvent);
202
- };
203
-
204
- const loaded = () =>
205
- {
206
- document.removeEventListener('DOMContentLoaded', loaded);
207
- activate();
208
- };
209
-
210
- if (document.readyState !== 'loading') {
211
- activate();
212
- }
213
- else {
214
- document.addEventListener('DOMContentLoaded', loaded);
215
- }
216
-
217
- return {
218
- initialize: () => initializeComponents(document),
219
- cleanup : () => cleanupComponents(document)
220
- };
221
- })();
package/styles/README.md DELETED
@@ -1,196 +0,0 @@
1
- # Styles
2
- This guide covers the fundamental visual settings used by components, all based on the [Material Design 3 Styles](https://m3.material.io/styles) specifications.
3
-
4
- Each style-topic ships as a Sass partial with the same opt-in pattern: `@use ... with ($master: true)` installs the full set of tokens — that is what the master CSS bundle does. The default mode exposes mixins that emit only the tokens you ask for, so per-component bundles (and any custom subset bundle you build yourself) carry only the tokens they actually reference.
5
-
6
- ## Elevation
7
- Elevation represents the distance between surfaces on the z-axis, creating a sense of depth and hierarchy. It's a realization of the [Material Design 3 Elevation](https://m3.material.io/styles/elevation/overview) system.
8
-
9
- ### CSS
10
- Import the elevation styles into your project. To install all six elevation levels at once, configure the module in master mode:
11
-
12
- ```CSS
13
- @use "material-inspired-component-library/styles/elevation" with ($master: true);
14
- ```
15
-
16
- To install only specific levels (useful when you build your own subset bundle), use the `level` mixin:
17
-
18
- ```CSS
19
- @use "material-inspired-component-library/styles/elevation";
20
- @include elevation.level(1);
21
- @include elevation.level(2);
22
- ```
23
-
24
- ### Customizations
25
- You can customize elevation levels by overriding their global CSS variables.
26
-
27
- **Example: Changing the elevation of a sidesheet:**
28
-
29
- ```HTML
30
- <div style="--md-sys-elevation-level1: rgba(0, 0, 0, 0.2) 0px 3px 4px -1px, rgba(0, 0, 0, 0.1) 0px 4px 8px 0px, rgba(0, 0, 0, 0.1) 0px 1px 9px 0px">
31
- <dialog class="micl-sidesheet" closedby="any" popover>
32
- </dialog>
33
- </div>
34
- ```
35
-
36
-
37
- ## Motion
38
- Motion brings your UI to life, making it expressive and intuitive to use. The motion styles are based on the [Material Design 3 Motion](https://m3.material.io/styles/motion/overview/how-it-works) guidelines.
39
-
40
- ### CSS
41
- Import the motion styles into your project. To install all sixteen duration tokens at once, configure the module in master mode:
42
-
43
- ```CSS
44
- @use "material-inspired-component-library/styles/motion" with ($master: true);
45
- ```
46
-
47
- To install only specific durations, use the `duration` mixin:
48
-
49
- ```CSS
50
- @use "material-inspired-component-library/styles/motion";
51
- @include motion.duration('short3');
52
- @include motion.duration('long4');
53
- ```
54
-
55
- The easing curves (`$md-sys-motion-easing-emphasized`, `$md-sys-motion-easing-standard` and its accelerate/decelerate variants, the expressive/standard fast-default-slow × spatial-effects curves, etc.) are exposed as **Sass variables**, not CSS custom properties. Reference them through interpolation in your transitions:
56
-
57
- ```CSS
58
- @use "material-inspired-component-library/styles/motion";
59
- @include motion.duration('short3');
60
-
61
- .my-component {
62
- transition: opacity var(--md-sys-motion-duration-short3) motion.$md-sys-motion-easing-standard;
63
- }
64
- ```
65
-
66
- ### Customizations
67
- You can customize duration tokens by overriding their global CSS variables.
68
-
69
- **Example: Slowing the long4 duration:**
70
-
71
- ```HTML
72
- <div style="--md-sys-motion-duration-long4: 800ms">
73
- </div>
74
- ```
75
-
76
-
77
- ## Shape corner-radius tokens
78
- Shape tokens define the corner radii used across every component, following the [Material Design 3 Shape](https://m3.material.io/styles/shape/overview-principles) principles.
79
-
80
- ### CSS
81
- Each component opts into the corner tokens it actually uses, so when you `@use` a component, the matching corner tokens come along automatically — typically there is nothing to opt into yourself. To install **all** corner tokens at once (useful when you build your own subset bundle), configure the module in master mode:
82
-
83
- ```CSS
84
- @use "material-inspired-component-library/styles/shapes" with ($master: true);
85
- ```
86
-
87
- To install only specific corner tokens, use the `corner` mixin:
88
-
89
- ```CSS
90
- @use "material-inspired-component-library/styles/shapes";
91
- @include shapes.corner('medium');
92
- @include shapes.corner('full');
93
- ```
94
-
95
- ### Customizations
96
- Corner radii are exposed as CSS custom properties and can be overridden anywhere in the cascade.
97
-
98
- **Example: Changing the corner radius of a card:**
99
-
100
- ```HTML
101
- <div style="--md-sys-shape-corner-medium: 14px">
102
- <div class="micl-card-outlined">
103
- </div>
104
- </div>
105
- ```
106
-
107
- The decorative shape gallery (heart, cookie, clover, sunny, …) is **not** part of these tokens. It is shipped as an opt-in component — see the [Shape Component](../components/shape/README.md).
108
-
109
-
110
- ## State layers
111
- State layers are visual overlays that communicate the interaction status of a component, such as when it's hovered over or pressed. These are based on [Material Design 3 States](https://m3.material.io/foundations/interaction/states/overview).
112
-
113
- ### CSS
114
- Import the state layer styles into your project. To install every state token and ripple parameter, configure the module in master mode:
115
-
116
- ```CSS
117
- @use "material-inspired-component-library/styles/statelayer" with ($master: true);
118
- ```
119
-
120
- To install only the parts you need, use the three opt-in mixins:
121
-
122
- ```CSS
123
- @use "material-inspired-component-library/styles/statelayer";
124
- @include statelayer.token('hover-state-layer-opacity');
125
- @include statelayer.token('focus-state-layer-opacity');
126
- @include statelayer.property; // typed-property registrations for animatable color/opacity
127
- @include statelayer.keyframes; // ripple @keyframes (only needed for the spreading ripple effect)
128
- ```
129
-
130
- ### Customizations
131
- Customize the appearance of state layers by overriding their global CSS variables, such as adjusting the opacity.
132
-
133
- **Example: Changing the opacity of the hover-state layer:**
134
-
135
- ```HTML
136
- <div style="--md-sys-state-hover-state-layer-opacity: 12%">
137
- </div>
138
- ```
139
-
140
-
141
- ## Typography
142
- Typography is the foundation of text styling. The typography styles in this library are based on the [Material Design 3 Typography](https://m3.material.io/styles/typography/overview) specifications.
143
-
144
- ### CSS
145
- Import the typography styles into your project. The typeface and weight references are always installed. To additionally install all 31 typescale token sets, the narrow-typeface tracking overrides, and the `.md-sys-typescale-*` utility classes at once, configure the module in master mode:
146
-
147
- ```CSS
148
- @use "material-inspired-component-library/styles/typography" with ($master: true);
149
- ```
150
-
151
- To install only specific typescales, use the `scale` mixin:
152
-
153
- ```CSS
154
- @use "material-inspired-component-library/styles/typography";
155
- @include typography.scale('body-large');
156
- @include typography.scale('title-medium');
157
- ```
158
-
159
- There is also one selector-scope mixin per typescale (`display-large`, `display-medium`, …, `emphasized-label-small`) that emits the five `font-family`/`font-size`/`line-height`/`font-weight`/`letter-spacing` declarations at once, so you can apply a typescale to your own element without naming each variable:
160
-
161
- ```CSS
162
- @use "material-inspired-component-library/styles/typography";
163
- @include typography.scale('body-large');
164
-
165
- .my-paragraph {
166
- @include typography.body-large;
167
- }
168
- ```
169
-
170
- ### Customizations
171
- You can customize font settings by overriding their global CSS variables on the **:root** CSS pseudo-class.
172
-
173
- **Changing both the plain and brand style font:**
174
-
175
- ```CSS
176
- :root {
177
- --md-ref-typeface-plain: Roboto, system-ui, sans-serif;
178
- --md-ref-typeface-brand: Roboto, system-ui, sans-serif;
179
- }
180
- ```
181
-
182
- And include a reference to the font in your application.
183
-
184
- ```HTML
185
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
186
- ```
187
-
188
- **Font width and letter spacing**
189
-
190
- The default typography styles apply natural letter spacing (`0px` or `normal`) optimized for the default MICL font, [**Google Sans**](https://fonts.google.com/specimen/Google+Sans). If you opt to use a narrower geometric font, such as [**Roboto**](https://fonts.google.com/specimen/Roboto), you can enable positive letter spacing to improve legibility at smaller sizes. To do this, set the `--md-ref-typeface-plain-narrow` variable to `1` in your root stylesheet:
191
-
192
- ```CSS
193
- :root {
194
- --md-ref-typeface-plain-narrow: 1;
195
- }
196
- ```