material-inspired-component-library 3.0.2 → 4.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 (90) hide show
  1. package/README.md +16 -14
  2. package/components/README.md +1 -1
  3. package/components/accordion/README.md +8 -3
  4. package/components/alert/README.md +76 -0
  5. package/components/alert/index.scss +121 -0
  6. package/components/appbar/README.md +9 -4
  7. package/components/appbar/index.scss +1 -1
  8. package/components/badge/README.md +8 -3
  9. package/components/badge/index.scss +1 -0
  10. package/components/bottomsheet/README.md +8 -3
  11. package/components/button/README.md +8 -3
  12. package/components/button/index.scss +7 -0
  13. package/components/card/README.md +10 -4
  14. package/components/card/index.scss +1 -1
  15. package/components/checkbox/README.md +56 -13
  16. package/components/checkbox/index.scss +148 -183
  17. package/components/checkbox/index.ts +148 -0
  18. package/components/dialog/README.md +8 -3
  19. package/components/dialog/index.scss +1 -0
  20. package/components/divider/README.md +8 -3
  21. package/components/iconbutton/README.md +8 -3
  22. package/components/iconbutton/index.scss +3 -1
  23. package/components/list/README.md +8 -3
  24. package/components/list/index.scss +2 -0
  25. package/components/list/index.ts +2 -3
  26. package/components/menu/README.md +7 -2
  27. package/components/menu/index.ts +2 -2
  28. package/components/navigationrail/README.md +8 -3
  29. package/components/navigationrail/index.scss +1 -0
  30. package/components/radio/README.md +8 -3
  31. package/components/radio/index.scss +8 -24
  32. package/components/select/README.md +3 -3
  33. package/components/sidesheet/README.md +8 -3
  34. package/components/slider/README.md +8 -3
  35. package/components/slider/index.scss +1 -0
  36. package/components/slider/index.ts +9 -10
  37. package/components/stepper/README.md +190 -0
  38. package/components/stepper/index.scss +93 -14
  39. package/components/stepper/index.ts +169 -88
  40. package/components/switch/README.md +8 -3
  41. package/components/switch/index.scss +2 -0
  42. package/components/textfield/README.md +8 -3
  43. package/components/textfield/index.ts +8 -41
  44. package/dist/alert.css +1 -0
  45. package/dist/alert.js +1 -0
  46. package/dist/badge.css +1 -1
  47. package/dist/button.css +1 -1
  48. package/dist/card.css +1 -1
  49. package/dist/checkbox.css +1 -1
  50. package/dist/components/checkbox/index.d.ts +5 -0
  51. package/dist/components/textfield/index.d.ts +0 -1
  52. package/dist/dialog.css +1 -1
  53. package/dist/foundations/form/index.d.ts +5 -0
  54. package/dist/iconbutton.css +1 -1
  55. package/dist/list.css +1 -1
  56. package/dist/micl.css +1 -1
  57. package/dist/micl.js +1 -1
  58. package/dist/navigationrail.css +1 -1
  59. package/dist/radio.css +1 -1
  60. package/dist/slider.css +1 -1
  61. package/dist/stepper.css +1 -1
  62. package/dist/switch.css +1 -1
  63. package/docs/accordion.html +1 -1
  64. package/docs/alert.html +176 -0
  65. package/docs/bottomsheet.html +2 -2
  66. package/docs/button.html +2 -2
  67. package/docs/card.html +7 -7
  68. package/docs/checkbox.html +33 -9
  69. package/docs/dialog.html +2 -2
  70. package/docs/divider.html +8 -8
  71. package/docs/iconbutton.html +2 -2
  72. package/docs/index.html +43 -32
  73. package/docs/list.html +2 -2
  74. package/docs/menu.html +2 -2
  75. package/docs/micl.css +1 -1
  76. package/docs/micl.js +1 -1
  77. package/docs/radio.html +2 -2
  78. package/docs/select.html +2 -2
  79. package/docs/sidesheet.html +2 -2
  80. package/docs/slider.html +2 -2
  81. package/docs/stepper.html +318 -0
  82. package/docs/switch.html +8 -4
  83. package/docs/textfield.html +2 -2
  84. package/foundations/form/index.ts +174 -0
  85. package/{layout → foundations/layout}/README.md +5 -0
  86. package/{layout → foundations/layout}/index.scss +1 -1
  87. package/micl.ts +3 -3
  88. package/package.json +3 -1
  89. package/styles.scss +2 -1
  90. package/webpack.config.js +1 -1
package/docs/index.html CHANGED
@@ -6,7 +6,7 @@
6
6
  <meta name="description" content="The Material-Inspired Component Library (MICL) Showcase">
7
7
  <title>MICL Showcase</title>
8
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
9
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,delete,edit,favorite,globe,inbox,link,menu,menu_open,more_vert,newspaper,outbox,person,share&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,delete,edit,error,favorite,globe,inbox,link,menu,menu_open,more_vert,newspaper,outbox,person,share&display=block">
10
10
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
11
11
  <link rel="stylesheet" href="micl.css">
12
12
  <link rel="stylesheet" href="docs.css">
@@ -128,39 +128,48 @@
128
128
  <h2>Card</h2>
129
129
  </div>
130
130
  <span class="micl-card__supporting-text">A card is a versatile component that groups related elements. It can hold a wide range of content, including images, headlines, supporting text, and buttons. Cards are designed with flexible layouts and dimensions that adapt to their contents.</span>
131
- <div class="micl-card__content" style="display:flex;justify-content:space-between;padding-block-start:16px">
132
- <button type="button" class="micl-button-filled-s">Action</button>
133
- <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mymenu" aria-label="Open Menu">more_vert</button>
134
- <nav id="mymenu" class="micl-menu" popover>
135
- <ul class="micl-list">
136
- <li class="micl-list-item-one" tabindex="0">
137
- <span class="micl-list-item__text">
138
- <span class="micl-list-item__headline">Menu item without graphics</span>
139
- </span>
140
- </li>
141
- <li class="micl-list-item-one" tabindex="0">
142
- <span class="micl-list-item__icon material-symbols-outlined">globe</span>
143
- <span class="micl-list-item__text">
144
- <span class="micl-list-item__headline">Menu item with an icon</span>
145
- </span>
146
- </li>
147
- <li class="micl-list-item-three">
148
- <a href="https://www.nytimes.com" tabindex="-1">
149
- <span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
131
+ <div class="micl-card__content">
132
+ <div class="micl-alert-outlined" role="alert">
133
+ <span class="micl-alert__icon material-symbols-outlined">error</span>
134
+ <div class="micl-alert__text">
135
+ <h4>This is an alert</h4>
136
+ <span class="micl-alert__supporting-text">An error has occurred</span>
137
+ </div>
138
+ </div>
139
+ <div style="display:flex;justify-content:space-between;padding-block-start:16px">
140
+ <button type="button" class="micl-button-filled-s">Action</button>
141
+ <button type="button" class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mymenu" aria-label="Open Menu">more_vert</button>
142
+ <nav id="mymenu" class="micl-menu" popover>
143
+ <ul class="micl-list">
144
+ <li class="micl-list-item-one" tabindex="0">
150
145
  <span class="micl-list-item__text">
151
- <span class="micl-list-item__headline">The New York Times</span>
152
- <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
146
+ <span class="micl-list-item__headline">Menu item without graphics</span>
153
147
  </span>
154
- </a>
155
- </li>
156
- <li class="micl-list-item-one" tabindex="0">
157
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Atmosphere_-_2.jpg/256px-Atmosphere_-_2.jpg?20200310200715)"></span>
158
- <span class="micl-list-item__text">
159
- <span class="micl-list-item__headline">Item with an image</span>
160
- </span>
161
- </li>
162
- </ul>
163
- </nav>
148
+ </li>
149
+ <li class="micl-list-item-one" tabindex="0">
150
+ <span class="micl-list-item__icon material-symbols-outlined">globe</span>
151
+ <span class="micl-list-item__text">
152
+ <span class="micl-list-item__headline">Menu item with an icon</span>
153
+ </span>
154
+ </li>
155
+ <li class="micl-list-item-three">
156
+ <a href="https://www.nytimes.com" tabindex="-1">
157
+ <span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
158
+ <span class="micl-list-item__text">
159
+ <span class="micl-list-item__headline">The New York Times</span>
160
+ <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
161
+ </span>
162
+ </a>
163
+ </li>
164
+ <li class="micl-list-item-one" tabindex="0">
165
+ <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Atmosphere_-_2.jpg/256px-Atmosphere_-_2.jpg?20200310200715)"></span>
166
+ <span class="micl-list-item__text">
167
+ <span class="micl-list-item__headline">Item with an image</span>
168
+ </span>
169
+ </li>
170
+ </ul>
171
+ </nav>
172
+ </div>
164
173
  </div>
165
174
  </div>
166
175
  </div>
@@ -332,6 +341,7 @@
332
341
  </div>
333
342
  <div class="micl-card__content" style="column-count:2;padding-block-start:16px">
334
343
  <p><a href="accordion.html" class="md-sys-typescale-body-large">Accordions</a></p>
344
+ <p><a href="alert.html" class="md-sys-typescale-body-large">Alerts</a></p>
335
345
  <p><a href="bottomsheet.html" class="md-sys-typescale-body-large">Bottom sheets</a></p>
336
346
  <p><a href="button.html" class="md-sys-typescale-body-large">Buttons</a></p>
337
347
  <p><a href="card.html" class="md-sys-typescale-body-large">Cards</a></p>
@@ -346,6 +356,7 @@
346
356
  <p><a href="select.html" class="md-sys-typescale-body-large">Selects</a></p>
347
357
  <p><a href="sidesheet.html" class="md-sys-typescale-body-large">Side sheets</a></p>
348
358
  <p><a href="slider.html" class="md-sys-typescale-body-large">Sliders</a></p>
359
+ <p><a href="stepper.html" class="md-sys-typescale-body-large">Steppers</a></p>
349
360
  <p><a href="switch.html" class="md-sys-typescale-body-large">Switches</a></p>
350
361
  <p><a href="textfield.html" class="md-sys-typescale-body-large">Text fields</a></p>
351
362
  </div>
package/docs/list.html CHANGED
@@ -21,7 +21,7 @@
21
21
  <main class="micl-body micl-body--stacked-to-extralarge">
22
22
  <section class="micl-pane">
23
23
  <header class="micl-appbar">
24
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
24
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
25
25
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
26
26
  </a>
27
27
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -250,7 +250,7 @@
250
250
  <h2>Code example</h2>
251
251
  </div>
252
252
  <div class="micl-card__content docs-code">
253
- <pre><code>
253
+ <pre tabindex="-1"><code>
254
254
  &lt;ul class="micl-list" role="listbox"&gt;
255
255
  &lt;li class="micl-list-item-two" tabindex="0"&gt;
256
256
  &lt;span class="micl-list-item__avatar"&gt;17&lt;/span&gt;
package/docs/menu.html CHANGED
@@ -23,7 +23,7 @@
23
23
  <main class="micl-body">
24
24
  <section class="micl-pane">
25
25
  <header class="micl-appbar">
26
- <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
26
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-s" aria-label="Navigate to the main MICL Showcase page">
27
27
  <span class="material-symbols-outlined" aria-hidden="true">home</span>
28
28
  </a>
29
29
  <div class="micl-appbar__headline micl-appbar__headline--center">
@@ -333,7 +333,7 @@
333
333
  <h2>Code example</h2>
334
334
  </div>
335
335
  <div class="micl-card__content docs-code">
336
- <pre><code>
336
+ <pre tabindex="-1"><code>
337
337
  &lt;nav id="id0" class="micl-menu" popover&gt;
338
338
  &lt;ul class="micl-list"&gt;
339
339
  &lt;li class="micl-list-item-one" tabindex="0"&gt;