material-inspired-component-library 8.1.1 → 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 (283) 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 +7 -5
  13. package/components/button/_shared.scss +210 -0
  14. package/components/button/index.scss +49 -283
  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 +8 -3
  29. package/components/iconbutton/index.scss +83 -186
  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 +60 -36
  37. package/components/navigationrail/_navitem.scss +96 -0
  38. package/components/navigationrail/index.scss +76 -130
  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/iconbutton/index.d.ts +2 -7
  80. package/dist/components/slider/index.d.ts +1 -1
  81. package/dist/components/textfield/index.d.ts +2 -2
  82. package/dist/datepicker.css +1 -1
  83. package/dist/datepicker.js +1 -1
  84. package/dist/dialog.css +1 -1
  85. package/dist/dialog.js +1 -1
  86. package/dist/divider.css +1 -1
  87. package/dist/divider.js +1 -1
  88. package/dist/field.css +1 -0
  89. package/dist/field.js +1 -0
  90. package/dist/foundations/form/index.js +1 -1
  91. package/dist/foundations/runtime.d.ts +15 -0
  92. package/dist/foundations/runtime.js +1 -0
  93. package/dist/iconbutton.css +1 -1
  94. package/dist/iconbutton.js +1 -1
  95. package/dist/layout.css +1 -1
  96. package/dist/layout.js +1 -1
  97. package/dist/list.css +1 -1
  98. package/dist/list.js +1 -1
  99. package/dist/menu.css +1 -1
  100. package/dist/menu.js +1 -1
  101. package/dist/micl.css +1 -1
  102. package/dist/micl.d.ts +14 -5
  103. package/dist/micl.js +1 -1
  104. package/dist/navigationbar.css +1 -0
  105. package/dist/navigationbar.js +1 -0
  106. package/dist/navigationrail.css +1 -1
  107. package/dist/navigationrail.js +1 -1
  108. package/dist/progressindicator.css +1 -1
  109. package/dist/progressindicator.js +1 -1
  110. package/dist/radio.css +1 -1
  111. package/dist/radio.js +1 -1
  112. package/dist/scrollbar.js +1 -1
  113. package/dist/select.css +1 -1
  114. package/dist/select.js +1 -1
  115. package/dist/shapes.css +1 -1
  116. package/dist/shapes.js +1 -1
  117. package/dist/sidesheet.css +1 -1
  118. package/dist/sidesheet.js +1 -1
  119. package/dist/slider.css +1 -1
  120. package/dist/slider.js +1 -1
  121. package/dist/snackbar.css +1 -1
  122. package/dist/snackbar.js +1 -1
  123. package/dist/stepper.css +1 -1
  124. package/dist/stepper.js +1 -1
  125. package/dist/switch.css +1 -1
  126. package/dist/switch.js +1 -1
  127. package/dist/textfield.css +1 -1
  128. package/dist/textfield.js +1 -1
  129. package/dist/timepicker.css +1 -1
  130. package/dist/timepicker.js +1 -1
  131. package/foundations/_index.scss +35 -0
  132. package/foundations/{index.scss → base/index.scss} +21 -56
  133. package/foundations/field/index.scss +37 -0
  134. package/foundations/layout/index.scss +64 -65
  135. package/package.json +23 -9
  136. package/styles/statelayer.scss +20 -5
  137. package/styles.scss +5 -2
  138. package/.claude/settings.local.json +0 -17
  139. package/.editorconfig +0 -12
  140. package/.gitattributes +0 -9
  141. package/.github/ISSUE_TEMPLATE/bug_report.md +0 -35
  142. package/.github/ISSUE_TEMPLATE/feature_request.md +0 -20
  143. package/CLAUDE.md +0 -53
  144. package/CODE_OF_CONDUCT.md +0 -128
  145. package/components/bottomsheet/index.ts +0 -153
  146. package/components/button/index.ts +0 -79
  147. package/components/checkbox/index.ts +0 -148
  148. package/components/datepicker/index.ts +0 -693
  149. package/components/iconbutton/index.ts +0 -77
  150. package/components/list/index.ts +0 -138
  151. package/components/menu/index.ts +0 -145
  152. package/components/navigationrail/index.ts +0 -87
  153. package/components/progressindicator/index.ts +0 -77
  154. package/components/slider/index.ts +0 -149
  155. package/components/snackbar/index.ts +0 -118
  156. package/components/stepper/index.ts +0 -248
  157. package/components/textfield/index.ts +0 -188
  158. package/components/timepicker/index.ts +0 -413
  159. package/dist/components/progressindicator/index.d.ts +0 -6
  160. package/dist/foundations.css +0 -1
  161. package/dist/foundations.js +0 -1
  162. package/docs/accordion.html +0 -344
  163. package/docs/alert.html +0 -177
  164. package/docs/bottomsheet.html +0 -240
  165. package/docs/button.html +0 -291
  166. package/docs/card-awards.webp +0 -0
  167. package/docs/card-cabinet.webp +0 -0
  168. package/docs/card-city.webp +0 -0
  169. package/docs/card-fingerprint.webp +0 -0
  170. package/docs/card-holiday.webp +0 -0
  171. package/docs/card-names.webp +0 -0
  172. package/docs/card.html +0 -159
  173. package/docs/checkbox.html +0 -147
  174. package/docs/datepicker.html +0 -274
  175. package/docs/dialog.html +0 -195
  176. package/docs/divider.html +0 -139
  177. package/docs/docs.css +0 -26
  178. package/docs/docs.js +0 -139
  179. package/docs/iconbutton.html +0 -331
  180. package/docs/index.html +0 -431
  181. package/docs/list.html +0 -310
  182. package/docs/menu.html +0 -574
  183. package/docs/micl.css +0 -1
  184. package/docs/micl.js +0 -1
  185. package/docs/navigationrail.html +0 -138
  186. package/docs/progressindicator.html +0 -288
  187. package/docs/radio.html +0 -123
  188. package/docs/select.html +0 -337
  189. package/docs/shapes.css +0 -1
  190. package/docs/shapes.html +0 -159
  191. package/docs/shapes.js +0 -1
  192. package/docs/sidesheet.html +0 -149
  193. package/docs/slider.html +0 -141
  194. package/docs/snackbar.html +0 -102
  195. package/docs/stepper.html +0 -319
  196. package/docs/switch.html +0 -196
  197. package/docs/textfield.html +0 -208
  198. package/docs/themes/airblue/dark-hc.css +0 -51
  199. package/docs/themes/airblue/dark-mc.css +0 -51
  200. package/docs/themes/airblue/dark.css +0 -51
  201. package/docs/themes/airblue/light-hc.css +0 -51
  202. package/docs/themes/airblue/light-mc.css +0 -51
  203. package/docs/themes/airblue/light.css +0 -51
  204. package/docs/themes/airblue/theme.css +0 -306
  205. package/docs/themes/barnred/dark-hc.css +0 -51
  206. package/docs/themes/barnred/dark-mc.css +0 -51
  207. package/docs/themes/barnred/dark.css +0 -51
  208. package/docs/themes/barnred/light-hc.css +0 -51
  209. package/docs/themes/barnred/light-mc.css +0 -51
  210. package/docs/themes/barnred/light.css +0 -51
  211. package/docs/themes/barnred/theme.css +0 -306
  212. package/docs/themes/citrine/dark-hc.css +0 -51
  213. package/docs/themes/citrine/dark-mc.css +0 -51
  214. package/docs/themes/citrine/dark.css +0 -51
  215. package/docs/themes/citrine/light-hc.css +0 -51
  216. package/docs/themes/citrine/light-mc.css +0 -51
  217. package/docs/themes/citrine/light.css +0 -51
  218. package/docs/themes/citrine/theme.css +0 -306
  219. package/docs/themes/gray/dark-hc.css +0 -51
  220. package/docs/themes/gray/dark-mc.css +0 -51
  221. package/docs/themes/gray/dark.css +0 -51
  222. package/docs/themes/gray/light-hc.css +0 -51
  223. package/docs/themes/gray/light-mc.css +0 -51
  224. package/docs/themes/gray/light.css +0 -51
  225. package/docs/themes/gray/theme.css +0 -306
  226. package/docs/themes/greenery/dark-hc.css +0 -51
  227. package/docs/themes/greenery/dark-mc.css +0 -51
  228. package/docs/themes/greenery/dark.css +0 -51
  229. package/docs/themes/greenery/light-hc.css +0 -51
  230. package/docs/themes/greenery/light-mc.css +0 -51
  231. package/docs/themes/greenery/light.css +0 -51
  232. package/docs/themes/greenery/theme.css +0 -306
  233. package/docs/themes/hermana/dark-hc.css +0 -51
  234. package/docs/themes/hermana/dark-mc.css +0 -51
  235. package/docs/themes/hermana/dark.css +0 -51
  236. package/docs/themes/hermana/light-hc.css +0 -51
  237. package/docs/themes/hermana/light-mc.css +0 -51
  238. package/docs/themes/hermana/light.css +0 -51
  239. package/docs/themes/hermana/theme.css +0 -306
  240. package/docs/themes/illuminating/dark-hc.css +0 -51
  241. package/docs/themes/illuminating/dark-mc.css +0 -51
  242. package/docs/themes/illuminating/dark.css +0 -51
  243. package/docs/themes/illuminating/light-hc.css +0 -51
  244. package/docs/themes/illuminating/light-mc.css +0 -51
  245. package/docs/themes/illuminating/light.css +0 -51
  246. package/docs/themes/illuminating/theme.css +0 -306
  247. package/docs/themes/magenta/dark-hc.css +0 -51
  248. package/docs/themes/magenta/dark-mc.css +0 -51
  249. package/docs/themes/magenta/dark.css +0 -51
  250. package/docs/themes/magenta/light-hc.css +0 -51
  251. package/docs/themes/magenta/light-mc.css +0 -51
  252. package/docs/themes/magenta/light.css +0 -51
  253. package/docs/themes/magenta/theme.css +0 -306
  254. package/docs/themes/mocha/dark-hc.css +0 -51
  255. package/docs/themes/mocha/dark-mc.css +0 -51
  256. package/docs/themes/mocha/dark.css +0 -51
  257. package/docs/themes/mocha/light-hc.css +0 -51
  258. package/docs/themes/mocha/light-mc.css +0 -51
  259. package/docs/themes/mocha/light.css +0 -51
  260. package/docs/themes/mocha/theme.css +0 -306
  261. package/docs/themes/olivegreen/dark-hc.css +0 -51
  262. package/docs/themes/olivegreen/dark-mc.css +0 -51
  263. package/docs/themes/olivegreen/dark.css +0 -51
  264. package/docs/themes/olivegreen/light-hc.css +0 -51
  265. package/docs/themes/olivegreen/light-mc.css +0 -51
  266. package/docs/themes/olivegreen/light.css +0 -51
  267. package/docs/themes/olivegreen/theme.css +0 -306
  268. package/docs/themes/peri/dark-hc.css +0 -51
  269. package/docs/themes/peri/dark-mc.css +0 -51
  270. package/docs/themes/peri/dark.css +0 -51
  271. package/docs/themes/peri/light-hc.css +0 -51
  272. package/docs/themes/peri/light-mc.css +0 -51
  273. package/docs/themes/peri/light.css +0 -51
  274. package/docs/themes/peri/theme.css +0 -306
  275. package/docs/timepicker.html +0 -160
  276. package/foundations/form/index.ts +0 -174
  277. package/foundations/layout/README.md +0 -127
  278. package/intl.d.ts +0 -9
  279. package/micl.ts +0 -221
  280. package/styles/README.md +0 -196
  281. package/tools/shapes/generate.mjs +0 -828
  282. package/tsconfig.json +0 -116
  283. package/webpack.config.js +0 -159
package/docs/bottomsheet.html DELETED
@@ -1,240 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="Demonstrating MICL Bottom Sheets">
7
- <title>MICL Bottom Sheets</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <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">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,content_copy,dark_mode,edit,home,link,pause,share,skip_next&display=block">
12
- <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
- <link rel="stylesheet" href="micl.css">
14
- <link rel="stylesheet" href="docs.css">
15
- <style>
16
- .figures {
17
- display: flex;
18
- }
19
- figure {
20
- display: flex;
21
- flex-direction: column;
22
- align-items: center;
23
- margin-inline: 0 32px;
24
- margin-block: 0 32px;
25
- }
26
- h3, figcaption, p > span {
27
- color: var(--md-sys-color-on-surface);
28
- }
29
- img {
30
- width: 64px;
31
- height: 64px;
32
- border-radius: 50%;
33
- object-fit: cover;
34
- }
35
- .player {
36
- display: flex;
37
- align-items: center;
38
- column-gap: 16px;
39
- padding-block-start: 24px;
40
- }
41
- .cover {
42
- border-radius: 0;
43
- }
44
- .actions {
45
- display: flex;
46
- column-gap: 16px;
47
- }
48
- p {
49
- display: flex;
50
- flex: 1 1 100%;
51
- flex-direction: column;
52
- }
53
- </style>
54
- </head>
55
- <body class="micl-window light">
56
- <main class="micl-body">
57
- <section class="micl-pane">
58
- <header class="micl-appbar">
59
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
60
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
61
- </a>
62
- <div class="micl-appbar__headline micl-appbar__headline--center">
63
- <h1>Bottom sheets</h1>
64
- <p class="micl-appbar__subtitle">Showcasing MICL bottom sheets</p>
65
- </div>
66
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
67
- </header>
68
-
69
- <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
70
- <div class="micl-pane__column">
71
- <div class="micl-card-filled">
72
- <div class="micl-card__headline-s">
73
- <h2>Showcase</h2>
74
- </div>
75
- <p class="micl-card__supporting-text">Click a button to open one of the MICL bottom sheets.</p>
76
- <div class="micl-card__content docs-buttons">
77
- <dialog id="mybottomsheet1" class="micl-bottomsheet" popover>
78
- <div class="micl-bottomsheet__content">
79
- <h3 class="md-sys-typescale-title-large">Send</h3>
80
- <div class="figures">
81
- <figure>
82
- <img alt="John" src="card-names.webp">
83
- <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
84
- </figure>
85
- <figure>
86
- <img alt="Carol" src="card-awards.webp">
87
- <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
88
- </figure>
89
- <figure>
90
- <img alt="Bill" src="card-fingerprint.webp">
91
- <figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
92
- </figure>
93
- <figure>
94
- <img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
95
- <figcaption class="md-sys-typescale-body-small">Knut Steen</figcaption>
96
- </figure>
97
- </div>
98
- </div>
99
- </dialog>
100
- <button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet1">Open Sheet</button>
101
-
102
- <dialog id="mybottomsheet2" class="micl-bottomsheet" popover="manual">
103
- <div class="micl-bottomsheet__content">
104
- <div class="player">
105
- <img alt="City Album" src="card-city.webp" class="cover">
106
- <p>
107
- <span class="md-sys-typescale-body-large">City Sleepers</span>
108
- <span class="md-sys-typescale-body-small">Various artists</span>
109
- </p>
110
- <div class="actions">
111
- <span class="material-symbols-outlined micl-list-item__icon">pause</span>
112
- <span class="material-symbols-outlined micl-list-item__icon">skip_next</span>
113
- </div>
114
- </div>
115
- </div>
116
- </dialog>
117
- <button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet2">Open Co-Existing Sheet</button>
118
-
119
- <dialog id="mybottomsheet3" class="micl-bottomsheet" popover data-miclsnapheights="0,400">
120
- <div class="micl-bottomsheet__headline">
121
- <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
122
- </div>
123
- <div class="micl-bottomsheet__content">
124
- <ul class="micl-list" role="listbox">
125
- <li class="micl-list-item-one" tabindex="0">
126
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
127
- <span class="micl-list-item__text">
128
- <span class="micl-list-item__headline">Share</span>
129
- </span>
130
- </li>
131
- <li class="micl-list-item-one">
132
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">link</span>
133
- <span class="micl-list-item__text">
134
- <span class="micl-list-item__headline">Get link</span>
135
- </span>
136
- </li>
137
- <li class="micl-list-item-one">
138
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">edit</span>
139
- <span class="micl-list-item__text">
140
- <span class="micl-list-item__headline">Edit name</span>
141
- </span>
142
- </li>
143
- </ul>
144
- </div>
145
- </dialog>
146
- <button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet3">Open Resizable Sheet</button>
147
-
148
- <dialog id="mybottomsheet4" class="micl-bottomsheet" closedby="closerequest">
149
- <div class="micl-bottomsheet__headline">
150
- <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
151
- </div>
152
- <div class="micl-bottomsheet__content">
153
- <ul class="micl-list" role="listbox" style="flex-direction:row">
154
- <li class="micl-list-item-one" tabindex="0">
155
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">share</span>
156
- <span class="micl-list-item__text">
157
- <span class="micl-list-item__headline">Share</span>
158
- </span>
159
- </li>
160
- <li class="micl-list-item-one">
161
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">link</span>
162
- <span class="micl-list-item__text">
163
- <span class="micl-list-item__headline">Get link</span>
164
- </span>
165
- </li>
166
- <li class="micl-list-item-one">
167
- <span class="material-symbols-outlined micl-list-item__icon" aria-hidden="true">edit</span>
168
- <span class="micl-list-item__text">
169
- <span class="micl-list-item__headline">Edit name</span>
170
- </span>
171
- </li>
172
- <li class="micl-list-item-one">
173
- <button type="button" class="micl-iconbutton-standard-m material-symbols-outlined" command="close" commandfor="mybottomsheet4">close</button>
174
- </li>
175
- </ul>
176
- <hr class="micl-divider">
177
- <h3 class="md-sys-typescale-title-large">Send</h3>
178
- <div class="figures">
179
- <figure>
180
- <img alt="John" src="card-names.webp">
181
- <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
182
- </figure>
183
- <figure>
184
- <img alt="Carol" src="card-awards.webp">
185
- <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
186
- </figure>
187
- <figure>
188
- <img alt="Bill" src="card-fingerprint.webp">
189
- <figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
190
- </figure>
191
- <figure>
192
- <img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
193
- <figcaption class="md-sys-typescale-body-small">Knut Steen</figcaption>
194
- </figure>
195
- </div>
196
- </div>
197
- </dialog>
198
- <button type="button" class="micl-button-outlined-m" command="show-modal" commandfor="mybottomsheet4">Open Modal Sheet</button>
199
- </div>
200
- </div>
201
- </div>
202
- <div class="micl-pane__column">
203
- <div class="micl-card-filled">
204
- <div class="micl-card__headline-s">
205
- <h2>Code example</h2>
206
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
207
- </div>
208
- <div class="micl-card__content docs-code">
209
- <pre tabindex="-1"><code>&lt;dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400"&gt;
210
- &lt;div class="micl-bottomsheet__headline"&gt;
211
- &lt;button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"&gt;&lt;/button&gt;
212
- &lt;/div&gt;
213
- &lt;div class="micl-bottomsheet__content"&gt;
214
- &lt;ul class="micl-list" role="listbox"&gt;
215
- &lt;li class="micl-list-item-one" tabindex="0"&gt;
216
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;share&lt;/span&gt;
217
- &lt;span class="micl-list-item__text"&gt;
218
- &lt;span class="micl-list-item__headline"&gt;Share&lt;/span&gt;
219
- &lt;/span&gt;
220
- &lt;/li&gt;
221
- &lt;li class="micl-list-item-one"&gt;
222
- &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;edit&lt;/span&gt;
223
- &lt;span class="micl-list-item__text"&gt;
224
- &lt;span class="micl-list-item__headline"&gt;Edit name&lt;/span&gt;
225
- &lt;/span&gt;
226
- &lt;/li&gt;
227
- &lt;/ul&gt;
228
- &lt;/div&gt;
229
- &lt;/dialog&gt;</code></pre>
230
- </div>
231
- </div>
232
- </div>
233
- </div>
234
- </section>
235
- </main>
236
-
237
- <script src="micl.js"></script>
238
- <script src="docs.js"></script>
239
- </body>
240
- </html>
package/docs/button.html DELETED
@@ -1,291 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="Demonstrating MICL Buttons">
7
- <title>MICL Buttons</title>
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <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">
11
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=content_copy,dark_mode,draw,edit,home&display=block">
12
- <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
- <link rel="stylesheet" href="micl.css">
14
- <link rel="stylesheet" href="docs.css">
15
- </head>
16
- <body class="micl-window light">
17
- <main class="micl-body micl-body--stacked-to-large">
18
- <section class="micl-pane">
19
- <header class="micl-appbar">
20
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
21
- <span class="material-symbols-outlined" aria-hidden="true">home</span>
22
- </a>
23
- <div class="micl-appbar__headline micl-appbar__headline--center">
24
- <h1>Buttons</h1>
25
- <p class="micl-appbar__subtitle">Showcasing MICL buttons</p>
26
- </div>
27
- <div id="settings-placeholder" class="micl-appbar__trailing"></div>
28
- </header>
29
-
30
- <div class="micl-card-filled">
31
- <div class="micl-card__headline-m">
32
- <h2>Text buttons</h2>
33
- </div>
34
- <div class="micl-card__content" style="padding-block:8px 16px">
35
- <button type="button" class="micl-button-text-xs">Click</button>
36
- <button type="button" class="micl-button-text-s">Click</button>
37
- <button type="button" class="micl-button-text-m">Click</button>
38
- <button type="button" class="micl-button-text-l">Click</button>
39
- <button type="button" class="micl-button-text-xl">Click</button>
40
- <p></p>
41
- <button type="button" class="micl-button-text-xs micl-button--square">
42
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
43
- Click
44
- </button>
45
- <button type="button" class="micl-button-text-s micl-button--square">
46
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
47
- Click
48
- </button>
49
- <button type="button" class="micl-button-text-m micl-button--square">
50
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
51
- Click
52
- </button>
53
- <button type="button" class="micl-button-text-l micl-button--square" disabled>
54
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
55
- Click
56
- </button>
57
- <button type="button" class="micl-button-text-xl micl-button--square">
58
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
59
- Click
60
- </button>
61
- </div>
62
- </div>
63
- <div class="micl-card-outlined">
64
- <div class="micl-card__headline-m">
65
- <h2>Elevated buttons</h2>
66
- </div>
67
- <div class="micl-card__content" style="padding-block:8px 16px">
68
- <button type="button" class="micl-button-elevated-xs">Click</button>
69
- <button type="button" class="micl-button-elevated-s">Click</button>
70
- <button type="button" class="micl-button-elevated-m">Click</button>
71
- <button type="button" class="micl-button-elevated-l">Click</button>
72
- <button type="button" class="micl-button-elevated-xl">Click</button>
73
- <p></p>
74
- <button type="button" class="micl-button-elevated-xs micl-button--square">
75
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
76
- <span>Click</span>
77
- </button>
78
- <button type="button" class="micl-button-elevated-s micl-button--square">
79
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
80
- <span>Click</span>
81
- </button>
82
- <button type="button" class="micl-button-elevated-m micl-button--square">
83
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
84
- <span>Click</span>
85
- </button>
86
- <button type="button" class="micl-button-elevated-l micl-button--square" disabled>
87
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
88
- <span>Click</span>
89
- </button>
90
- <button type="button" class="micl-button-elevated-xl micl-button--square">
91
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
92
- <span>Click</span>
93
- </button>
94
- </div>
95
- </div>
96
- <div class="micl-card-elevated">
97
- <div class="micl-card__headline-m">
98
- <h2>Filled buttons</h2>
99
- </div>
100
- <div class="micl-card__content" style="padding-block:8px 16px">
101
- <button type="button" class="micl-button-filled-xs">Click</button>
102
- <button type="button" class="micl-button-filled-s">Click</button>
103
- <button type="button" class="micl-button-filled-m">Click</button>
104
- <button type="button" class="micl-button-filled-l">Click</button>
105
- <button type="button" class="micl-button-filled-xl">Click</button>
106
- <p></p>
107
- <button type="button" class="micl-button-filled-xs micl-button--square">
108
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
109
- Click
110
- </button>
111
- <button type="button" class="micl-button-filled-s micl-button--square">
112
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
113
- Click
114
- </button>
115
- <button type="button" class="micl-button-filled-m micl-button--square">
116
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
117
- Click
118
- </button>
119
- <button type="button" class="micl-button-filled-l micl-button--square" disabled>
120
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
121
- Click
122
- </button>
123
- <button type="button" class="micl-button-filled-xl micl-button--square">
124
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
125
- Click
126
- </button>
127
- </div>
128
- </div>
129
- <div class="micl-card-outlined">
130
- <div class="micl-card__headline-m">
131
- <h2>Tonal buttons</h2>
132
- </div>
133
- <div class="micl-card__content" style="padding-block:8px 16px">
134
- <button type="button" class="micl-button-tonal-xs">Click</button>
135
- <button type="button" class="micl-button-tonal-s">Click</button>
136
- <button type="button" class="micl-button-tonal-m">Click</button>
137
- <button type="button" class="micl-button-tonal-l">Click</button>
138
- <button type="button" class="micl-button-tonal-xl">Click</button>
139
- <p></p>
140
- <button type="button" class="micl-button-tonal-xs micl-button--square">
141
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
142
- Click
143
- </button>
144
- <button type="button" class="micl-button-tonal-s micl-button--square">
145
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
146
- Click
147
- </button>
148
- <button type="button" class="micl-button-tonal-m micl-button--square">
149
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
150
- Click
151
- </button>
152
- <button type="button" class="micl-button-tonal-l micl-button--square" disabled>
153
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
154
- Click
155
- </button>
156
- <button type="button" class="micl-button-tonal-xl micl-button--square">
157
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
158
- Click
159
- </button>
160
- </div>
161
- </div>
162
- <div class="micl-card-elevated">
163
- <div class="micl-card__headline-m">
164
- <h2>Outlined buttons</h2>
165
- </div>
166
- <div class="micl-card__content" style="padding-block:8px 16px">
167
- <button type="button" class="micl-button-outlined-xs">Click</button>
168
- <button type="button" class="micl-button-outlined-s">Click</button>
169
- <button type="button" class="micl-button-outlined-m">Click</button>
170
- <button type="button" class="micl-button-outlined-l">Click</button>
171
- <button type="button" class="micl-button-outlined-xl">Click</button>
172
- <p></p>
173
- <button type="button" class="micl-button-outlined-xs micl-button--square">
174
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
175
- Click
176
- </button>
177
- <button type="button" class="micl-button-outlined-s micl-button--square">
178
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
179
- Click
180
- </button>
181
- <button type="button" class="micl-button-outlined-m micl-button--square">
182
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
183
- Click
184
- </button>
185
- <button type="button" class="micl-button-outlined-l micl-button--square" disabled>
186
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
187
- Click
188
- </button>
189
- <button type="button" class="micl-button-outlined-xl micl-button--square">
190
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
191
- Click
192
- </button>
193
- </div>
194
- </div>
195
- <div class="micl-card-outlined">
196
- <div class="micl-card__headline-m">
197
- <h2>Toggle buttons</h2>
198
- </div>
199
- <div class="micl-card__content">
200
- <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
201
- <button type="button" id="btn1" class="micl-button-elevated-m micl-button--toggle" aria-pressed="false" commandfor="btn1" command="--micl-toggle">Click</button>
202
- <button type="button" id="btn2" class="micl-button-elevated-m micl-button--toggle" aria-pressed="true" commandfor="btn2" command="--micl-toggle">Click</button>
203
- <button type="button" id="btn3" class="micl-button-elevated-m micl-button--square micl-button--toggle" aria-pressed="false" commandfor="btn3" command="--micl-toggle">
204
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
205
- Click
206
- </button>
207
- <button type="button" id="btn4" class="micl-button-elevated-m micl-button--square micl-button--toggle" aria-pressed="true" commandfor="btn4" command="--micl-toggle">
208
- <span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
209
- Click
210
- </button>
211
- </div>
212
- <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
213
- <button type="button" id="btn5" class="micl-button-filled-m micl-button--toggle" aria-pressed="false" commandfor="btn5" command="--micl-toggle">Click</button>
214
- <button type="button" id="btn6" class="micl-button-filled-m micl-button--toggle" aria-pressed="true" commandfor="btn6" command="--micl-toggle">Click</button>
215
- <button type="button" id="btn7" class="micl-button-filled-m micl-button--square micl-button--toggle" aria-pressed="false" commandfor="btn7" command="--micl-toggle">
216
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
217
- Click
218
- </button>
219
- <button type="button" id="btn8" class="micl-button-filled-m micl-button--square micl-button--toggle" aria-pressed="true" commandfor="btn8" command="--micl-toggle">
220
- <span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
221
- Click
222
- </button>
223
- </div>
224
- <div style="display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px">
225
- <button type="button" id="btn9" class="micl-button-tonal-m micl-button--toggle" aria-pressed="false" commandfor="btn9" command="--micl-toggle">Click</button>
226
- <button type="button" id="btn10" class="micl-button-tonal-m micl-button--toggle" aria-pressed="true" commandfor="btn10" command="--micl-toggle">Click</button>
227
- <button type="button" id="btn11" class="micl-button-tonal-m micl-button--square micl-button--toggle" aria-pressed="false" commandfor="btn11" command="--micl-toggle">
228
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
229
- Click
230
- </button>
231
- <button type="button" id="btn12" class="micl-button-tonal-m micl-button--square micl-button--toggle" aria-pressed="true" commandfor="btn12" command="--micl-toggle">
232
- <span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
233
- Click
234
- </button>
235
- </div>
236
- <div style="display:flex;flex-wrap:wrap;gap:8px">
237
- <button type="button" id="btn13" class="micl-button-outlined-m micl-button--toggle" aria-pressed="false" commandfor="btn13" command="--micl-toggle">Click</button>
238
- <button type="button" id="btn14" class="micl-button-outlined-m micl-button--toggle" aria-pressed="true" commandfor="btn14" command="--micl-toggle">Click</button>
239
- <button type="button" id="btn15" class="micl-button-outlined-m micl-button--square micl-button--toggle" aria-pressed="false" commandfor="btn15" command="--micl-toggle">
240
- <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
241
- Click
242
- </button>
243
- <button type="button" id="btn16" class="micl-button-outlined-m micl-button--square micl-button--toggle" aria-pressed="true" commandfor="btn16" command="--micl-toggle">
244
- <span class="micl-button__icon material-symbols-outlined" data-miclicon="edit" data-micliconselected="draw" aria-hidden="true"></span>
245
- Click
246
- </button>
247
- </div>
248
- </div>
249
- </div>
250
- </section>
251
- <section class="micl-pane">
252
- <div class="micl-card-filled" style="margin-top:8px">
253
- <div class="micl-card__headline-s">
254
- <h2>Code example</h2>
255
- <button type="button" id="copycode" class="micl-iconbutton-standard-s material-symbols-outlined" aria-label="Copy code">content_copy</button>
256
- </div>
257
- <div class="micl-card__content docs-code">
258
- <pre tabindex="-1"><code>&lt;button type="button" class="micl-button-tonal-s"&gt;Click&lt;/button&gt;
259
-
260
- &lt;button type="button" class="micl-button-outlined-xl micl-button--square"&gt;
261
- &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;edit&lt;/span&gt;
262
- Click
263
- &lt;/button&gt;
264
-
265
- &lt;button class="micl-button-filled-m micl-button--toggle" aria-pressed="true"&gt;Click&lt;/button&gt;
266
-
267
- &lt;button
268
- type="button"
269
- id="mybutton"
270
- class="micl-button-tonal-l micl-button--toggle"
271
- aria-pressed="false"
272
- commandfor="mybutton"
273
- command="--micl-toggle"
274
- &gt;
275
- &lt;span
276
- class="micl-button__icon material-symbols-outlined"
277
- data-miclicon="edit"
278
- data-micliconselected="draw"
279
- aria-hidden="true"
280
- &gt;&lt;/span&gt;
281
- Click
282
- &lt;/button&gt;</code></pre>
283
- </div>
284
- </div>
285
- </section>
286
- </main>
287
-
288
- <script src="micl.js"></script>
289
- <script src="docs.js"></script>
290
- </body>
291
- </html>
package/docs/card-awards.webp DELETED
Binary file
package/docs/card-cabinet.webp DELETED
Binary file
package/docs/card-city.webp DELETED
Binary file
package/docs/card-fingerprint.webp DELETED
Binary file
package/docs/card-holiday.webp DELETED
Binary file
package/docs/card-names.webp DELETED
Binary file