material-inspired-component-library 2.0.1 → 3.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 (76) hide show
  1. package/README.md +14 -0
  2. package/components/README.md +2 -0
  3. package/components/appbar/README.md +94 -0
  4. package/components/appbar/index.scss +216 -0
  5. package/components/button/index.scss +70 -65
  6. package/components/button/index.ts +1 -1
  7. package/components/card/index.scss +1 -1
  8. package/components/checkbox/README.md +9 -0
  9. package/components/checkbox/index.scss +4 -0
  10. package/components/divider/index.scss +10 -10
  11. package/components/iconbutton/index.scss +111 -111
  12. package/components/iconbutton/index.ts +1 -1
  13. package/components/list/README.md +4 -4
  14. package/components/list/index.scss +3 -3
  15. package/components/navigationrail/README.md +11 -11
  16. package/components/navigationrail/index.scss +20 -12
  17. package/components/radio/README.md +13 -4
  18. package/components/radio/index.scss +7 -5
  19. package/components/select/README.md +28 -6
  20. package/components/select/index.scss +56 -10
  21. package/components/textfield/index.scss +3 -9
  22. package/components/textfield/index.ts +29 -22
  23. package/dist/appbar.css +1 -0
  24. package/dist/appbar.js +1 -0
  25. package/dist/bottomsheet.css +1 -1
  26. package/dist/button.css +1 -1
  27. package/dist/card.css +1 -1
  28. package/dist/checkbox.css +1 -1
  29. package/dist/components/textfield/index.d.ts +1 -1
  30. package/dist/dialog.css +1 -1
  31. package/dist/divider.css +1 -1
  32. package/dist/iconbutton.css +1 -1
  33. package/dist/layout.css +1 -0
  34. package/dist/layout.js +1 -0
  35. package/dist/list.css +1 -1
  36. package/dist/menu.css +1 -1
  37. package/dist/micl.css +1 -1
  38. package/dist/micl.js +1 -1
  39. package/dist/navigationrail.css +1 -1
  40. package/dist/radio.css +1 -1
  41. package/dist/select.css +1 -1
  42. package/dist/sidesheet.css +1 -1
  43. package/dist/slider.css +1 -1
  44. package/dist/switch.css +1 -1
  45. package/dist/textfield.css +1 -1
  46. package/docs/accordion.html +298 -254
  47. package/docs/bottomsheet.html +174 -145
  48. package/docs/button.html +210 -182
  49. package/docs/card.html +107 -72
  50. package/docs/checkbox.html +92 -69
  51. package/docs/dialog.html +154 -123
  52. package/docs/divider.html +96 -67
  53. package/docs/docs.css +14 -24
  54. package/docs/docs.js +4 -2
  55. package/docs/iconbutton.html +196 -171
  56. package/docs/index.html +296 -286
  57. package/docs/list.html +260 -216
  58. package/docs/menu.html +260 -220
  59. package/docs/micl.css +1 -1
  60. package/docs/micl.js +1 -1
  61. package/docs/navigationrail.html +36 -34
  62. package/docs/radio.html +93 -72
  63. package/docs/select.html +253 -173
  64. package/docs/sidesheet.html +104 -87
  65. package/docs/slider.html +105 -72
  66. package/docs/switch.html +126 -101
  67. package/docs/textfield.html +181 -138
  68. package/layout/README.md +122 -0
  69. package/layout/index.scss +259 -0
  70. package/micl.ts +1 -1
  71. package/package.json +4 -1
  72. package/styles/shapes.scss +0 -2
  73. package/styles/statelayer.scss +2 -0
  74. package/styles.scss +13 -0
  75. package/webpack.config.js +1 -1
  76. package/styles/layout.scss +0 -74
package/docs/bottomsheet.html CHANGED
@@ -6,18 +6,11 @@
6
6
  <meta name="description" content="Demonstrating MICL Bottom Sheets">
7
7
  <title>MICL Bottom Sheets</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,edit,link,pause,share,skip_next&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=close,dark_mode,edit,home,link,pause,share,skip_next&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">
13
13
  <style>
14
- .micl-card__content {
15
- display: flex;
16
- flex-direction: column;
17
- align-items: flex-start;
18
- padding-block: 32px;
19
- row-gap: 32px;
20
- }
21
14
  .figures {
22
15
  display: flex;
23
16
  }
@@ -60,152 +53,188 @@
60
53
  }
61
54
  </style>
62
55
  </head>
63
- <body class="light">
64
- <div class="headline">
65
- <h1 class="md-sys-typescale-emphasized-display-small">Bottom sheets</h1>
66
- <div id="settings-placeholder"></div>
67
- </div>
56
+ <body class="micl-window light">
57
+ <main class="micl-body">
58
+ <section class="micl-pane">
59
+ <header class="micl-appbar">
60
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
61
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
62
+ </a>
63
+ <div class="micl-appbar__headline micl-appbar__headline--center">
64
+ <h1>Bottom sheets</h1>
65
+ <p class="micl-appbar__subtitle">Showcasing MICL bottom sheets</p>
66
+ </div>
67
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
68
+ </header>
68
69
 
69
- <div class="cards">
70
- <div class="micl-card-filled" style="height:400px">
71
- <div class="micl-card__content">
72
- <dialog id="mybottomsheet1" class="micl-bottomsheet" popover>
73
- <div class="micl-bottomsheet__content">
74
- <h3 class="md-sys-typescale-title-large">Send</h3>
75
- <div class="figures">
76
- <figure>
77
- <img alt="John" src="card-names.webp">
78
- <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
79
- </figure>
80
- <figure>
81
- <img alt="Carol" src="card-awards.webp">
82
- <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
83
- </figure>
84
- <figure>
85
- <img alt="Bill" src="card-fingerprint.webp">
86
- <figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
87
- </figure>
88
- <figure>
89
- <img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
90
- <figcaption class="md-sys-typescale-body-small">Knut Steen</figcaption>
91
- </figure>
70
+ <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
71
+ <div class="micl-pane__column">
72
+ <div class="micl-card-filled">
73
+ <div class="micl-card__headline-s">
74
+ <h2>Showcase</h2>
92
75
  </div>
93
- </div>
94
- </dialog>
95
- <button type="button" class="micl-button-filled-m" popovertarget="mybottomsheet1">Open Sheet</button>
76
+ <p class="micl-card__supporting-text">Click a button to open one of the MICL bottom sheets.</p>
77
+ <div class="micl-card__content docs-buttons">
78
+ <dialog id="mybottomsheet1" class="micl-bottomsheet" popover>
79
+ <div class="micl-bottomsheet__content">
80
+ <h3 class="md-sys-typescale-title-large">Send</h3>
81
+ <div class="figures">
82
+ <figure>
83
+ <img alt="John" src="card-names.webp">
84
+ <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
85
+ </figure>
86
+ <figure>
87
+ <img alt="Carol" src="card-awards.webp">
88
+ <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
89
+ </figure>
90
+ <figure>
91
+ <img alt="Bill" src="card-fingerprint.webp">
92
+ <figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
93
+ </figure>
94
+ <figure>
95
+ <img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
96
+ <figcaption class="md-sys-typescale-body-small">Knut Steen</figcaption>
97
+ </figure>
98
+ </div>
99
+ </div>
100
+ </dialog>
101
+ <button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet1">Open Sheet</button>
96
102
 
97
- <dialog id="mybottomsheet2" class="micl-bottomsheet" popover="manual">
98
- <div class="micl-bottomsheet__content">
99
- <div class="player">
100
- <img alt="City Album" src="card-city.webp" class="cover">
101
- <p>
102
- <span class="md-sys-typescale-body-large">City Sleepers</span>
103
- <span class="md-sys-typescale-body-small">Various artists</span>
104
- </p>
105
- <div class="actions">
106
- <span class="material-symbols-outlined micl-list-item__icon">pause</span>
107
- <span class="material-symbols-outlined micl-list-item__icon">skip_next</span>
108
- </div>
109
- </div>
110
- </div>
111
- </dialog>
112
- <button type="button" class="micl-button-filled-m" popovertarget="mybottomsheet2">Open Co-Existing Sheet</button>
103
+ <dialog id="mybottomsheet2" class="micl-bottomsheet" popover="manual">
104
+ <div class="micl-bottomsheet__content">
105
+ <div class="player">
106
+ <img alt="City Album" src="card-city.webp" class="cover">
107
+ <p>
108
+ <span class="md-sys-typescale-body-large">City Sleepers</span>
109
+ <span class="md-sys-typescale-body-small">Various artists</span>
110
+ </p>
111
+ <div class="actions">
112
+ <span class="material-symbols-outlined micl-list-item__icon">pause</span>
113
+ <span class="material-symbols-outlined micl-list-item__icon">skip_next</span>
114
+ </div>
115
+ </div>
116
+ </div>
117
+ </dialog>
118
+ <button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet2">Open Co-Existing Sheet</button>
113
119
 
114
- <dialog id="mybottomsheet3" class="micl-bottomsheet" popover data-miclsnapheights="0,400">
115
- <div class="micl-bottomsheet__headline">
116
- <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
117
- </div>
118
- <div class="micl-bottomsheet__content">
119
- <ul class="micl-list" role="listbox">
120
- <li class="micl-list-item-one" tabindex="0">
121
- <span class="material-symbols-outlined micl-list-item__icon">share</span>
122
- <span class="micl-list-item__text">
123
- <span class="micl-list-item__headline">Share</span>
124
- </span>
125
- </li>
126
- <li class="micl-list-item-one" tabindex="0">
127
- <span class="material-symbols-outlined micl-list-item__icon">link</span>
128
- <span class="micl-list-item__text">
129
- <span class="micl-list-item__headline">Get link</span>
130
- </span>
131
- </li>
132
- <li class="micl-list-item-one" tabindex="0">
133
- <span class="material-symbols-outlined micl-list-item__icon">edit</span>
134
- <span class="micl-list-item__text">
135
- <span class="micl-list-item__headline">Edit name</span>
136
- </span>
137
- </li>
138
- </ul>
139
- </div>
140
- </dialog>
141
- <button type="button" class="micl-button-filled-m" popovertarget="mybottomsheet3">Open Resizable Sheet</button>
120
+ <dialog id="mybottomsheet3" class="micl-bottomsheet" popover data-miclsnapheights="0,400">
121
+ <div class="micl-bottomsheet__headline">
122
+ <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
123
+ </div>
124
+ <div class="micl-bottomsheet__content">
125
+ <ul class="micl-list" role="listbox">
126
+ <li class="micl-list-item-one" tabindex="0">
127
+ <span class="material-symbols-outlined micl-list-item__icon">share</span>
128
+ <span class="micl-list-item__text">
129
+ <span class="micl-list-item__headline">Share</span>
130
+ </span>
131
+ </li>
132
+ <li class="micl-list-item-one" tabindex="0">
133
+ <span class="material-symbols-outlined micl-list-item__icon">link</span>
134
+ <span class="micl-list-item__text">
135
+ <span class="micl-list-item__headline">Get link</span>
136
+ </span>
137
+ </li>
138
+ <li class="micl-list-item-one" tabindex="0">
139
+ <span class="material-symbols-outlined micl-list-item__icon">edit</span>
140
+ <span class="micl-list-item__text">
141
+ <span class="micl-list-item__headline">Edit name</span>
142
+ </span>
143
+ </li>
144
+ </ul>
145
+ </div>
146
+ </dialog>
147
+ <button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet3">Open Resizable Sheet</button>
142
148
 
143
- <dialog id="mybottomsheet4" class="micl-bottomsheet" closedby="any">
144
- <div class="micl-bottomsheet__headline">
145
- <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
149
+ <dialog id="mybottomsheet4" class="micl-bottomsheet" closedby="any">
150
+ <div class="micl-bottomsheet__headline">
151
+ <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
152
+ </div>
153
+ <div class="micl-bottomsheet__content">
154
+ <ul class="micl-list" role="listbox" style="display:flex">
155
+ <li class="micl-list-item-one" tabindex="0">
156
+ <span class="material-symbols-outlined micl-list-item__icon">share</span>
157
+ <span class="micl-list-item__text">
158
+ <span class="micl-list-item__headline">Share</span>
159
+ </span>
160
+ </li>
161
+ <li class="micl-list-item-one" tabindex="0">
162
+ <span class="material-symbols-outlined micl-list-item__icon">link</span>
163
+ <span class="micl-list-item__text">
164
+ <span class="micl-list-item__headline">Get link</span>
165
+ </span>
166
+ </li>
167
+ <li class="micl-list-item-one" tabindex="0">
168
+ <span class="material-symbols-outlined micl-list-item__icon">edit</span>
169
+ <span class="micl-list-item__text">
170
+ <span class="micl-list-item__headline">Edit name</span>
171
+ </span>
172
+ </li>
173
+ <li class="micl-list-item-one" tabindex="0">
174
+ <button type="button" class="micl-iconbutton-standard-m material-symbols-outlined" popovertarget="mybottomsheet4">close</button>
175
+ </li>
176
+ </ul>
177
+ <hr class="micl-divider">
178
+ <h3 class="md-sys-typescale-title-large">Send</h3>
179
+ <div class="figures">
180
+ <figure>
181
+ <img alt="John" src="card-names.webp">
182
+ <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
183
+ </figure>
184
+ <figure>
185
+ <img alt="Carol" src="card-awards.webp">
186
+ <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
187
+ </figure>
188
+ <figure>
189
+ <img alt="Bill" src="card-fingerprint.webp">
190
+ <figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
191
+ </figure>
192
+ <figure>
193
+ <img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
194
+ <figcaption class="md-sys-typescale-body-small">Knut Steen</figcaption>
195
+ </figure>
196
+ </div>
197
+ </div>
198
+ </dialog>
199
+ <button type="button" class="micl-button-outlined-m" popovertarget="mybottomsheet4">Open Modal Sheet</button>
200
+ </div>
146
201
  </div>
147
- <div class="micl-bottomsheet__content">
148
- <ul class="micl-list" role="listbox" style="display:flex">
149
- <li class="micl-list-item-one" tabindex="0">
150
- <span class="material-symbols-outlined micl-list-item__icon">share</span>
151
- <span class="micl-list-item__text">
152
- <span class="micl-list-item__headline">Share</span>
153
- </span>
154
- </li>
155
- <li class="micl-list-item-one" tabindex="0">
156
- <span class="material-symbols-outlined micl-list-item__icon">link</span>
157
- <span class="micl-list-item__text">
158
- <span class="micl-list-item__headline">Get link</span>
159
- </span>
160
- </li>
161
- <li class="micl-list-item-one" tabindex="0">
162
- <span class="material-symbols-outlined micl-list-item__icon">edit</span>
163
- <span class="micl-list-item__text">
164
- <span class="micl-list-item__headline">Edit name</span>
165
- </span>
166
- </li>
167
- <li class="micl-list-item-one" tabindex="0">
168
- <button type="button" class="micl-iconbutton-standard-m material-symbols-outlined" popovertarget="mybottomsheet4">close</button>
169
- </li>
170
- </ul>
171
- <hr class="micl-divider">
172
- <h3 class="md-sys-typescale-title-large">Send</h3>
173
- <div class="figures">
174
- <figure>
175
- <img alt="John" src="card-names.webp">
176
- <figcaption class="md-sys-typescale-body-small">John Reeves</figcaption>
177
- </figure>
178
- <figure>
179
- <img alt="Carol" src="card-awards.webp">
180
- <figcaption class="md-sys-typescale-body-small">Carol Glass</figcaption>
181
- </figure>
182
- <figure>
183
- <img alt="Bill" src="card-fingerprint.webp">
184
- <figcaption class="md-sys-typescale-body-small">Bill Graves</figcaption>
185
- </figure>
186
- <figure>
187
- <img alt="Knut" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/KnutSteen.1.jpg/250px-KnutSteen.1.jpg">
188
- <figcaption class="md-sys-typescale-body-small">Knut Steen</figcaption>
189
- </figure>
202
+ </div>
203
+ <div class="micl-pane__column">
204
+ <div class="micl-card-filled">
205
+ <div class="micl-card__headline-s">
206
+ <h2>Code example</h2>
207
+ </div>
208
+ <div class="micl-card__content docs-code">
209
+ <pre><code>
210
+ &lt;dialog id="id0" class="micl-bottomsheet" popover data-miclsnapheights="0,400"&gt;
211
+ &lt;div class="micl-bottomsheet__headline"&gt;
212
+ &lt;button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"&gt;&lt;/button&gt;
213
+ &lt;/div&gt;
214
+ &lt;div class="micl-bottomsheet__content"&gt;
215
+ &lt;ul class="micl-list" role="listbox"&gt;
216
+ &lt;li class="micl-list-item-one" tabindex="0"&gt;
217
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;share&lt;/span&gt;
218
+ &lt;span class="micl-list-item__text"&gt;
219
+ &lt;span class="micl-list-item__headline"&gt;Share&lt;/span&gt;
220
+ &lt;/span&gt;
221
+ &lt;/li&gt;
222
+ &lt;li class="micl-list-item-one" tabindex="0"&gt;
223
+ &lt;span class="material-symbols-outlined micl-list-item__icon"&gt;edit&lt;/span&gt;
224
+ &lt;span class="micl-list-item__text"&gt;
225
+ &lt;span class="micl-list-item__headline"&gt;Edit name&lt;/span&gt;
226
+ &lt;/span&gt;
227
+ &lt;/li&gt;
228
+ &lt;/ul&gt;
229
+ &lt;/div&gt;
230
+ &lt;/dialog&gt;
231
+ </code></pre>
190
232
  </div>
191
233
  </div>
192
- </dialog>
193
- <button type="button" class="micl-button-filled-m" popovertarget="mybottomsheet4">Open Modal Sheet</button>
234
+ </div>
194
235
  </div>
195
- </div>
196
-
197
- <div class="micl-card-filled" style="height:400px"></div>
198
- <div class="micl-card-filled" style="height:400px"></div>
199
- <div class="micl-card-filled" style="height:400px"></div>
200
- <div class="micl-card-filled" style="height:400px"></div>
201
- <div class="micl-card-filled" style="height:400px"></div>
202
- <div class="micl-card-filled" style="height:400px"></div>
203
- <div class="micl-card-filled" style="height:400px"></div>
204
- <div class="micl-card-filled" style="height:400px"></div>
205
- <div class="micl-card-filled" style="height:400px"></div>
206
- <div class="micl-card-filled" style="height:400px"></div>
207
- <div class="micl-card-filled" style="height:400px"></div>
208
- </div>
236
+ </section>
237
+ </main>
209
238
 
210
239
  <script src="micl.js"></script>
211
240
  <script src="docs.js"></script>