material-inspired-component-library 8.0.0 → 8.0.1

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 (84) hide show
  1. package/.claude/settings.local.json +14 -0
  2. package/CLAUDE.md +13 -2
  3. package/components/alert/index.scss +5 -0
  4. package/components/appbar/index.scss +12 -0
  5. package/components/badge/index.scss +2 -0
  6. package/components/bottomsheet/index.scss +9 -0
  7. package/components/button/index.scss +23 -0
  8. package/components/card/index.scss +23 -0
  9. package/components/checkbox/index.scss +17 -0
  10. package/components/datepicker/index.scss +13 -0
  11. package/components/dialog/index.scss +16 -0
  12. package/components/iconbutton/index.scss +18 -0
  13. package/components/list/index.scss +25 -0
  14. package/components/menu/index.scss +18 -0
  15. package/components/navigationrail/index.scss +17 -0
  16. package/components/progressindicator/README.md +88 -0
  17. package/components/progressindicator/index.scss +225 -0
  18. package/components/progressindicator/index.ts +77 -0
  19. package/components/radio/index.scss +13 -0
  20. package/components/select/index.scss +6 -0
  21. package/components/shape/README.md +103 -0
  22. package/components/shape/_paths.generated.scss +64 -0
  23. package/components/shape/index.scss +66 -0
  24. package/components/shape/master.scss +28 -0
  25. package/components/sidesheet/index.scss +11 -0
  26. package/components/slider/index.scss +13 -0
  27. package/components/snackbar/index.scss +12 -0
  28. package/components/stepper/index.scss +2 -0
  29. package/components/switch/index.scss +9 -0
  30. package/components/textfield/index.scss +9 -0
  31. package/components/timepicker/index.scss +16 -0
  32. package/dist/alert.css +1 -1
  33. package/dist/appbar.css +1 -1
  34. package/dist/badge.css +1 -1
  35. package/dist/bottomsheet.css +1 -1
  36. package/dist/button.css +1 -1
  37. package/dist/card.css +1 -1
  38. package/dist/checkbox.css +1 -1
  39. package/dist/components/progressindicator/index.d.ts +6 -0
  40. package/dist/datepicker.css +1 -1
  41. package/dist/dialog.css +1 -1
  42. package/dist/foundations/form/index.js +1 -0
  43. package/dist/iconbutton.css +1 -1
  44. package/dist/layout.css +1 -1
  45. package/dist/list.css +1 -1
  46. package/dist/menu.css +1 -1
  47. package/dist/micl.css +1 -1
  48. package/dist/micl.js +1 -1
  49. package/dist/navigationrail.css +1 -1
  50. package/dist/progressindicator.css +1 -0
  51. package/dist/progressindicator.js +1 -0
  52. package/dist/radio.css +1 -1
  53. package/dist/select.css +1 -1
  54. package/dist/shape.css +1 -0
  55. package/dist/shape.js +1 -0
  56. package/dist/sidesheet.css +1 -1
  57. package/dist/slider.css +1 -1
  58. package/dist/snackbar.css +1 -1
  59. package/dist/stepper.css +1 -1
  60. package/dist/switch.css +1 -1
  61. package/dist/textfield.css +1 -1
  62. package/dist/timepicker.css +1 -1
  63. package/docs/datepicker.html +21 -21
  64. package/docs/index.html +1 -0
  65. package/docs/micl.css +1 -1
  66. package/docs/micl.js +1 -1
  67. package/docs/progressindicator.html +288 -0
  68. package/docs/shape.css +1 -0
  69. package/docs/shape.js +1 -0
  70. package/docs/shapes.html +86 -21
  71. package/foundations/layout/README.md +1 -1
  72. package/foundations/layout/index.scss +3 -0
  73. package/micl.ts +2 -0
  74. package/package.json +4 -2
  75. package/styles/README.md +86 -8
  76. package/styles/elevation.scss +46 -13
  77. package/styles/motion.scss +51 -47
  78. package/styles/shapes.scss +38 -104
  79. package/styles/statelayer.scss +88 -41
  80. package/styles/typography.scss +120 -322
  81. package/styles.scss +10 -6
  82. package/tools/shapes/check.mjs +42 -0
  83. package/tools/shapes/generate.mjs +834 -0
  84. package/webpack.config.js +16 -1
package/docs/datepicker.html CHANGED
@@ -8,7 +8,7 @@
8
8
  <link rel="preconnect" href="https://fonts.googleapis.com">
9
9
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
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=arrow_drop_down,calendar_today,check,chevron_left,chevron_right,content_copy,dark_mode,edit,home&display=block">
11
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_drop_down,calendar_today,check,chevron_backward,chevron_forward,content_copy,dark_mode,edit,home&display=block">
12
12
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
13
13
  <link rel="stylesheet" href="micl.css">
14
14
  <link rel="stylesheet" href="docs.css">
@@ -63,18 +63,18 @@
63
63
  <button type="button" id="btn1" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn1" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
64
64
  <hr class="micl-divider">
65
65
  <div class="micl-datepicker__month-selector">
66
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
66
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_backward</button>
67
67
  <button type="button" class="micl-datepicker__month micl-button-text-xs">
68
68
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
69
69
  </button>
70
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
70
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_forward</button>
71
71
  </div>
72
72
  <div class="micl-datepicker__year-selector">
73
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
73
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_backward</button>
74
74
  <button type="button" class="micl-datepicker__year micl-button-text-xs">
75
75
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
76
76
  </button>
77
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
77
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_forward</button>
78
78
  </div>
79
79
  </div>
80
80
  <div class="micl-dialog__content">
@@ -103,18 +103,18 @@
103
103
  <div class="micl-dialog__headline">
104
104
  <span class="micl-dialog__supporting-text">Enter date</span>
105
105
  <div class="micl-datepicker__month-selector">
106
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
106
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_backward</button>
107
107
  <button type="button" class="micl-datepicker__month micl-button-text-xs">
108
108
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
109
109
  </button>
110
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
110
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_forward</button>
111
111
  </div>
112
112
  <div class="micl-datepicker__year-selector">
113
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
113
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_backward</button>
114
114
  <button type="button" class="micl-datepicker__year micl-button-text-xs">
115
115
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
116
116
  </button>
117
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
117
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_forward</button>
118
118
  </div>
119
119
  </div>
120
120
  <div class="micl-dialog__content">
@@ -142,18 +142,18 @@
142
142
  <button type="button" id="btn2" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn2" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
143
143
  <hr class="micl-divider">
144
144
  <div class="micl-datepicker__month-selector">
145
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
145
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_backward</button>
146
146
  <button type="button" class="micl-datepicker__month micl-button-text-xs">
147
147
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
148
148
  </button>
149
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
149
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_forward</button>
150
150
  </div>
151
151
  <div class="micl-datepicker__year-selector">
152
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
152
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_backward</button>
153
153
  <button type="button" class="micl-datepicker__year micl-button-text-xs">
154
154
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
155
155
  </button>
156
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
156
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_forward</button>
157
157
  </div>
158
158
  </div>
159
159
  <div class="micl-dialog__content">
@@ -185,18 +185,18 @@
185
185
  <button type="button" id="btn4" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn4" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"></button>
186
186
  <hr class="micl-divider">
187
187
  <div class="micl-datepicker__month-selector">
188
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_left</button>
188
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month">chevron_backward</button>
189
189
  <button type="button" class="micl-datepicker__month micl-button-text-xs">
190
190
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
191
191
  </button>
192
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_right</button>
192
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month">chevron_forward</button>
193
193
  </div>
194
194
  <div class="micl-datepicker__year-selector">
195
- <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_left</button>
195
+ <button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year">chevron_backward</button>
196
196
  <button type="button" class="micl-datepicker__year micl-button-text-xs">
197
197
  <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">arrow_drop_down</span>
198
198
  </button>
199
- <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_right</button>
199
+ <button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year">chevron_forward</button>
200
200
  </div>
201
201
  </div>
202
202
  <div class="micl-dialog__content">
@@ -234,18 +234,18 @@
234
234
  &lt;button type="button" id="btn" class="micl-datepicker__inputmode micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" commandfor="btn" command="--micl-toggle" data-miclicon="edit" data-micliconselected="calendar_today"&gt;&lt;/button&gt;
235
235
  &lt;hr class="micl-divider"&gt;
236
236
  &lt;div class="micl-datepicker__month-selector"&gt;
237
- &lt;button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month"&gt;chevron_left&lt;/button&gt;
237
+ &lt;button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous month"&gt;chevron_backward&lt;/button&gt;
238
238
  &lt;button type="button" class="micl-datepicker__month micl-button-text-xs"&gt;
239
239
  &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;arrow_drop_down&lt;/span&gt;
240
240
  &lt;/button&gt;
241
- &lt;button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month"&gt;chevron_right&lt;/button&gt;
241
+ &lt;button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next month"&gt;chevron_forward&lt;/button&gt;
242
242
  &lt;/div&gt;
243
243
  &lt;div class="micl-datepicker__year-selector"&gt;
244
- &lt;button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year"&gt;chevron_left&lt;/button&gt;
244
+ &lt;button type="button" class="micl-datepicker__previous micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Previous year"&gt;chevron_backward&lt;/button&gt;
245
245
  &lt;button type="button" class="micl-datepicker__year micl-button-text-xs"&gt;
246
246
  &lt;span class="micl-button__icon material-symbols-outlined" aria-hidden="true"&gt;arrow_drop_down&lt;/span&gt;
247
247
  &lt;/button&gt;
248
- &lt;button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year"&gt;chevron_right&lt;/button&gt;
248
+ &lt;button type="button" class="micl-datepicker__next micl-iconbutton-standard-xs material-symbols-outlined" aria-label="Next year"&gt;chevron_forward&lt;/button&gt;
249
249
  &lt;/div&gt;
250
250
  &lt;/div&gt;
251
251
  &lt;div class="micl-dialog__content"&gt;
package/docs/index.html CHANGED
@@ -377,6 +377,7 @@
377
377
  <p><a href="list.html" class="md-sys-typescale-body-large">Lists</a></p>
378
378
  <p><a href="menu.html" class="md-sys-typescale-body-large">Menus</a></p>
379
379
  <p><a href="navigationrail.html" class="md-sys-typescale-body-large">Navigation rails</a></p>
380
+ <p><a href="progressindicator.html" class="md-sys-typescale-body-large">Progress indicators</a></p>
380
381
  <p><a href="radio.html" class="md-sys-typescale-body-large">Radio buttons</a></p>
381
382
  <p><a href="select.html" class="md-sys-typescale-body-large">Selects</a></p>
382
383
  <p><a href="sidesheet.html" class="md-sys-typescale-body-large">Side sheets</a></p>