material-inspired-component-library 1.3.0 → 2.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 (49) hide show
  1. package/CODE_OF_CONDUCT.md +128 -0
  2. package/README.md +9 -1
  3. package/components/badge/README.md +65 -0
  4. package/components/badge/index.scss +61 -0
  5. package/components/bottomsheet/README.md +29 -17
  6. package/components/bottomsheet/index.scss +23 -23
  7. package/components/bottomsheet/index.ts +25 -24
  8. package/components/button/README.md +1 -1
  9. package/components/button/index.scss +10 -12
  10. package/components/button/index.ts +5 -0
  11. package/components/card/index.scss +2 -2
  12. package/components/checkbox/index.scss +1 -1
  13. package/components/dialog/README.md +9 -9
  14. package/components/iconbutton/index.scss +2 -2
  15. package/components/iconbutton/index.ts +5 -0
  16. package/components/list/index.scss +2 -2
  17. package/components/navigationrail/README.md +110 -59
  18. package/components/navigationrail/index.scss +399 -88
  19. package/components/{checkbox → navigationrail}/index.ts +12 -7
  20. package/components/radio/index.scss +2 -2
  21. package/components/sidesheet/README.md +32 -17
  22. package/components/sidesheet/index.scss +43 -47
  23. package/components/slider/README.md +5 -5
  24. package/dist/badge.css +1 -0
  25. package/dist/badge.js +1 -0
  26. package/dist/bottomsheet.css +1 -1
  27. package/dist/button.css +1 -1
  28. package/dist/card.css +1 -1
  29. package/dist/checkbox.css +1 -1
  30. package/dist/components/navigationrail/index.d.ts +5 -0
  31. package/dist/iconbutton.css +1 -1
  32. package/dist/list.css +1 -1
  33. package/dist/micl.css +1 -1
  34. package/dist/micl.js +1 -1
  35. package/dist/navigationrail.css +1 -1
  36. package/dist/radio.css +1 -1
  37. package/dist/sidesheet.css +1 -1
  38. package/docs/bottomsheet.html +58 -7
  39. package/docs/button.html +30 -30
  40. package/docs/docs.css +2 -1
  41. package/docs/index.html +35 -4
  42. package/docs/micl.css +1 -1
  43. package/docs/micl.js +1 -1
  44. package/docs/navigationrail.html +48 -42
  45. package/docs/sidesheet.html +22 -7
  46. package/micl.ts +20 -27
  47. package/package.json +4 -1
  48. package/styles.scss +17 -0
  49. package/dist/components/checkbox/index.d.ts +0 -5
package/docs/button.html CHANGED
@@ -29,23 +29,23 @@
29
29
  <button type="button" class="micl-button-text-xl">Click</button>
30
30
  <p></p>
31
31
  <button type="button" class="micl-button-text-xs micl-button--square">
32
- <span class="micl-button__icon material-symbols-outlined">edit</span>
32
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
33
33
  Click
34
34
  </button>
35
35
  <button type="button" class="micl-button-text-s micl-button--square">
36
- <span class="micl-button__icon material-symbols-outlined">edit</span>
36
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
37
37
  Click
38
38
  </button>
39
39
  <button type="button" class="micl-button-text-m micl-button--square">
40
- <span class="micl-button__icon material-symbols-outlined">edit</span>
40
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
41
41
  Click
42
42
  </button>
43
43
  <button type="button" class="micl-button-text-l micl-button--square">
44
- <span class="micl-button__icon material-symbols-outlined">edit</span>
44
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
45
45
  Click
46
46
  </button>
47
47
  <button type="button" class="micl-button-text-xl micl-button--square">
48
- <span class="micl-button__icon material-symbols-outlined">edit</span>
48
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
49
49
  Click
50
50
  </button>
51
51
  </div>
@@ -62,24 +62,24 @@
62
62
  <button type="button" class="micl-button-elevated-xl">Click</button>
63
63
  <p></p>
64
64
  <button type="button" class="micl-button-elevated-xs micl-button--square">
65
- <span class="micl-button__icon material-symbols-outlined">edit</span>
66
- Click
65
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
66
+ <span>Click</span>
67
67
  </button>
68
68
  <button type="button" class="micl-button-elevated-s micl-button--square">
69
- <span class="micl-button__icon material-symbols-outlined">edit</span>
70
- Click
69
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
70
+ <span>Click</span>
71
71
  </button>
72
72
  <button type="button" class="micl-button-elevated-m micl-button--square">
73
- <span class="micl-button__icon material-symbols-outlined">edit</span>
74
- Click
73
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
74
+ <span>Click</span>
75
75
  </button>
76
76
  <button type="button" class="micl-button-elevated-l micl-button--square">
77
- <span class="micl-button__icon material-symbols-outlined">edit</span>
78
- Click
77
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
78
+ <span>Click</span>
79
79
  </button>
80
80
  <button type="button" class="micl-button-elevated-xl micl-button--square">
81
- <span class="micl-button__icon material-symbols-outlined">edit</span>
82
- Click
81
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
82
+ <span>Click</span>
83
83
  </button>
84
84
  </div>
85
85
  </div>
@@ -95,23 +95,23 @@
95
95
  <button type="button" class="micl-button-filled-xl">Click</button>
96
96
  <p></p>
97
97
  <button type="button" class="micl-button-filled-xs micl-button--square">
98
- <span class="micl-button__icon material-symbols-outlined">edit</span>
98
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
99
99
  Click
100
100
  </button>
101
101
  <button type="button" class="micl-button-filled-s micl-button--square">
102
- <span class="micl-button__icon material-symbols-outlined">edit</span>
102
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
103
103
  Click
104
104
  </button>
105
105
  <button type="button" class="micl-button-filled-m micl-button--square">
106
- <span class="micl-button__icon material-symbols-outlined">edit</span>
106
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
107
107
  Click
108
108
  </button>
109
109
  <button type="button" class="micl-button-filled-l micl-button--square">
110
- <span class="micl-button__icon material-symbols-outlined">edit</span>
110
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
111
111
  Click
112
112
  </button>
113
113
  <button type="button" class="micl-button-filled-xl micl-button--square">
114
- <span class="micl-button__icon material-symbols-outlined">edit</span>
114
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
115
115
  Click
116
116
  </button>
117
117
  </div>
@@ -128,23 +128,23 @@
128
128
  <button type="button" class="micl-button-tonal-xl">Click</button>
129
129
  <p></p>
130
130
  <button type="button" class="micl-button-tonal-xs micl-button--square">
131
- <span class="micl-button__icon material-symbols-outlined">edit</span>
131
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
132
132
  Click
133
133
  </button>
134
134
  <button type="button" class="micl-button-tonal-s micl-button--square">
135
- <span class="micl-button__icon material-symbols-outlined">edit</span>
135
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
136
136
  Click
137
137
  </button>
138
138
  <button type="button" class="micl-button-tonal-m micl-button--square">
139
- <span class="micl-button__icon material-symbols-outlined">edit</span>
139
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
140
140
  Click
141
141
  </button>
142
142
  <button type="button" class="micl-button-tonal-l micl-button--square">
143
- <span class="micl-button__icon material-symbols-outlined">edit</span>
143
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
144
144
  Click
145
145
  </button>
146
146
  <button type="button" class="micl-button-tonal-xl micl-button--square">
147
- <span class="micl-button__icon material-symbols-outlined">edit</span>
147
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
148
148
  Click
149
149
  </button>
150
150
  </div>
@@ -161,23 +161,23 @@
161
161
  <button type="button" class="micl-button-outlined-xl">Click</button>
162
162
  <p></p>
163
163
  <button type="button" class="micl-button-outlined-xs micl-button--square">
164
- <span class="micl-button__icon material-symbols-outlined">edit</span>
164
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
165
165
  Click
166
166
  </button>
167
167
  <button type="button" class="micl-button-outlined-s micl-button--square">
168
- <span class="micl-button__icon material-symbols-outlined">edit</span>
168
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
169
169
  Click
170
170
  </button>
171
171
  <button type="button" class="micl-button-outlined-m micl-button--square">
172
- <span class="micl-button__icon material-symbols-outlined">edit</span>
172
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
173
173
  Click
174
174
  </button>
175
175
  <button type="button" class="micl-button-outlined-l micl-button--square">
176
- <span class="micl-button__icon material-symbols-outlined">edit</span>
176
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
177
177
  Click
178
178
  </button>
179
179
  <button type="button" class="micl-button-outlined-xl micl-button--square">
180
- <span class="micl-button__icon material-symbols-outlined">edit</span>
180
+ <span class="micl-button__icon material-symbols-outlined" aria-hidden="true">edit</span>
181
181
  Click
182
182
  </button>
183
183
  </div>
package/docs/docs.css CHANGED
@@ -1,11 +1,11 @@
1
1
  body {
2
2
  margin: 0;
3
- padding: 16px;
4
3
  background-color: var(--md-sys-color-background);
5
4
  }
6
5
  .headline {
7
6
  display: flex;
8
7
  align-items: center;
8
+ padding: 16px;
9
9
  column-gap: 16px;
10
10
  }
11
11
  h1 {
@@ -28,6 +28,7 @@ h1 {
28
28
  display: flex;
29
29
  flex-direction: row;
30
30
  flex-wrap: wrap;
31
+ padding: 8px;
31
32
  }
32
33
  .micl-card-elevated, .micl-card-filled, .micl-card-outlined {
33
34
  width: 360px;
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,edit,globe,link,more_vert,newspaper,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,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">
@@ -20,6 +20,37 @@
20
20
  </style>
21
21
  </head>
22
22
  <body class="light">
23
+ <div id="mynavigationrail" class="micl-navigationrail">
24
+ <div class="micl-navigationrail__headline">
25
+ <button type="button" class="micl-iconbutton-standard-s micl-button--toggle material-symbols-outlined" popovertarget="mynavigationrail" data-miclalt="menu_open" aria-label="Toggle navigation rail">menu</button>
26
+ </div>
27
+ <div class="micl-navigationrail__content">
28
+ <input type="radio" id="item1" name="navitem" value="email_inbox" checked>
29
+ <label for="item1" class="micl-navigationrail__item">
30
+ <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--inbox">inbox</span>
31
+ <span class="micl-navigationrail__text">Inbox</span>
32
+ </label>
33
+ <input type="radio" id="item2" name="navitem" value="email_outbox">
34
+ <label for="item2" class="micl-navigationrail__item">
35
+ <span class="micl-navigationrail__icon material-symbols-outlined">outbox</span>
36
+ <span class="micl-navigationrail__text">Outbox</span>
37
+ </label>
38
+ <input type="radio" id="item3" name="navitem" value="email_favorites">
39
+ <label for="item3" class="micl-navigationrail__item">
40
+ <span class="micl-navigationrail__icon material-symbols-outlined" style="anchor-name:--favorites">favorite</span>
41
+ <span class="micl-navigationrail__text">Favorites</span>
42
+ </label>
43
+ <input type="radio" id="item4" name="navitem" value="email_trash">
44
+ <label for="item4" class="micl-navigationrail__item">
45
+ <span class="micl-navigationrail__icon material-symbols-outlined">delete</span>
46
+ <span class="micl-navigationrail__text">Trash</span>
47
+ </label>
48
+ </div>
49
+
50
+ <span class="micl-badge" style="position-anchor:--inbox;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px">97</span>
51
+ <span class="micl-badge micl-badge--small" style="position-anchor:--favorites;--md-sys-badge-block-offset:4px;--md-sys-badge-inline-offset:16px"></span>
52
+ </div>
53
+
23
54
  <div class="headline">
24
55
  <h1 class="md-sys-typescale-emphasized-display-small">MICL Showcase</h1>
25
56
  <div id="settings-placeholder"></div>
@@ -244,9 +275,9 @@
244
275
  </dialog>
245
276
  <button class="micl-button-elevated-s" popovertarget="mydialog">Open Dialog</button>
246
277
 
247
- <dialog id="mysidesheet" class="micl-sidesheet" closedby="any" popover>
278
+ <dialog id="mysidesheet" class="micl-sidesheet" popover aria-labelledby="mytitle">
248
279
  <div class="micl-sidesheet__headline">
249
- <h2>Title</h2>
280
+ <h2 id="mytitle">Lorum ipsum</h2>
250
281
  <button class="micl-iconbutton-standard-s material-symbols-outlined" popovertarget="mysidesheet">close</button>
251
282
  </div>
252
283
  <div class="micl-sidesheet__content">
@@ -258,7 +289,7 @@
258
289
  </dialog>
259
290
  <button type="button" class="micl-button-tonal-s" popovertarget="mysidesheet">Open Side Sheet</button>
260
291
 
261
- <dialog id="mybottomsheet" class="micl-bottomsheet" closedby="any" popover data-snapheights="400">
292
+ <dialog id="mybottomsheet" class="micl-bottomsheet" popover data-snapheights="400">
262
293
  <div class="micl-bottomsheet__headline">
263
294
  <button type="button" class="micl-bottomsheet__draghandle" aria-label="Drag handle"></button>
264
295
  </div>