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/menu.html CHANGED
@@ -3,9 +3,10 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <meta name="description" content="Demonstrating MICL Menus">
6
7
  <title>MICL Menus</title>
7
8
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
8
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,dark_mode,group,home,keyboard_command_key,newspaper,person,settings&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=arrow_right,check,dark_mode,group,home,keyboard_command_key,newspaper,settings&display=block">
9
10
  <link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
10
11
  <link rel="stylesheet" href="micl.css">
11
12
  <link rel="stylesheet" href="docs.css">
@@ -16,310 +17,349 @@
16
17
  .micl-list-item-three:has(.micl-checkbox:checked) .micl-list-item__icon {
17
18
  visibility: visible;
18
19
  }
19
- .micl-card__content {
20
- display: flex;
21
- flex-direction: column;
22
- align-items: flex-start;
23
- padding-block: 32px;
24
- row-gap: 32px;
25
- }
26
20
  </style>
27
21
  </head>
28
- <body class="light">
29
- <div class="headline">
30
- <h1 class="md-sys-typescale-emphasized-display-small">Menus</h1>
31
- <div id="settings-placeholder"></div>
32
- </div>
33
-
34
- <div class="cards">
35
- <div class="micl-card-outlined">
36
- <div class="micl-card__content">
37
- <div style="position:relative">
38
- <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mymenu1">Open Basic Menu</button>
39
- <nav id="mymenu1" class="micl-menu" popover>
40
- <ul class="micl-list">
41
- <li class="micl-list-item-one" tabindex="0">
42
- <span class="micl-list-item__text">
43
- <span class="micl-list-item__headline">Home</span>
44
- </span>
45
- </li>
46
- <li class="micl-list-item-one">
47
- <span class="micl-list-item__text">
48
- <span class="micl-list-item__headline">About</span>
49
- </span>
50
- </li>
51
- <li class="micl-list-item-one micl-list-item--disabled">
52
- <span class="micl-list-item__text">
53
- <span class="micl-list-item__headline">Contact</span>
54
- </span>
55
- </li>
56
- </ul>
57
- </nav>
58
- </div>
59
-
60
- <div style="position:relative">
61
- <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mymenu2">Open Menu</button>
62
- <nav id="mymenu2" class="micl-menu" popover>
63
- <ul class="micl-list">
64
- <li class="micl-list-item-two" tabindex="0">
65
- <span class="micl-list-item__icon material-symbols-outlined">home</span>
66
- <span class="micl-list-item__text">
67
- <span class="micl-list-item__headline">Home</span>
68
- <span class="micl-list-item__supporting-text">Click here to go home</span>
69
- </span>
70
- </li>
71
- <li class="micl-list-item-two">
72
- <label>
73
- <span class="micl-list-item__icon"></span>
74
- <span class="micl-list-item__text">
75
- <span class="micl-list-item__headline">Person</span>
76
- <span class="micl-list-item__supporting-text">Are you an administrator?</span>
77
- </span>
78
- <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
79
- </label>
80
- </li>
81
- <li class="micl-list-item-two">
82
- <span class="micl-list-item__icon material-symbols-outlined">settings</span>
83
- <span class="micl-list-item__text">
84
- <span class="micl-list-item__headline">About</span>
85
- <span class="micl-list-item__supporting-text">Change everything in the system</span>
86
- </span>
87
- </li>
88
- <li class="micl-list-item-two micl-list-item__divider">
89
- <span class="micl-list-item__text">
90
- <span class="micl-list-item__headline">Contact</span>
91
- <span class="micl-list-item__supporting-text">Call me!</span>
92
- </span>
93
- <span class="micl-list-item__icon material-symbols-outlined">keyboard_command_key</span>
94
- </li>
95
- </ul>
96
- </nav>
22
+ <body class="micl-window light">
23
+ <main class="micl-body">
24
+ <section class="micl-pane">
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">
27
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
28
+ </a>
29
+ <div class="micl-appbar__headline micl-appbar__headline--center">
30
+ <h1>Menus</h1>
31
+ <p class="micl-appbar__subtitle">Showcasing MICL menus</p>
97
32
  </div>
33
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
34
+ </header>
98
35
 
99
- <div style="position:relative">
100
- <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mymenu3">Open Big Menu</button>
101
- <nav id="mymenu3" class="micl-menu" popover>
102
- <ul class="micl-list">
103
- <li class="micl-list-item-three" tabindex="0">
104
- <span class="micl-list-item__icon material-symbols-outlined">group</span>
105
- <span class="micl-list-item__text">
106
- <span class="micl-list-item__headline">Number of employees</span>
107
- <span class="micl-list-item__supporting-text">Currently + those who have signed a contract</span>
108
- </span>
109
- <span class="micl-list-item__trailing-text">381</span>
110
- </li>
111
- <li class="micl-list-item-three">
112
- <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/1928_Model_A_Ford.jpg/330px-1928_Model_A_Ford.jpg)"></span>
113
- <span class="micl-list-item__text">
114
- <span class="micl-list-item__headline">Company cars</span>
115
- <span class="micl-list-item__supporting-text">Available to our wonderful employees</span>
116
- </span>
117
- </li>
118
- <li class="micl-list-item-three">
119
- <a href="https://www.nytimes.com" tabindex="-1">
120
- <span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
121
- <span class="micl-list-item__text">
122
- <span class="micl-list-item__headline">The New York Times</span>
123
- <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
124
- </span>
125
- </a>
126
- </li>
127
- <li class="micl-list-item-three">
128
- <label>
129
- <span class="micl-list-item__icon material-symbols-outlined">check</span>
130
- <span class="micl-list-item__text">
131
- <span class="micl-list-item__headline">Select or Unselect</span>
132
- <span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
133
- </span>
134
- <input type="checkbox" id="cb2" class="micl-checkbox" style="display:none" value="c2" tabindex="-1">
135
- </label>
136
- </li>
137
- </ul>
138
- </nav>
139
- </div>
140
-
141
- <div style="position:relative">
142
- <button type="button" class="micl-button-tonal-m micl-button--square" popovertarget="mymenu4">Open Menu with Sub-Menus</button>
143
- <nav id="mymenu4" class="micl-menu" popover>
144
- <ul class="micl-list">
145
- <li class="micl-list-item-one" tabindex="0">
146
- <button popovertarget="mymenu5" tabindex="-1">
147
- <span class="micl-list-item__text">
148
- <span class="micl-list-item__headline">Europe</span>
149
- </span>
150
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
151
- </button>
152
- <nav id="mymenu5" class="micl-menu" popover>
36
+ <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
37
+ <div class="micl-pane__column">
38
+ <div class="micl-card-filled">
39
+ <div class="micl-card__headline-s">
40
+ <h2>Showcase</h2>
41
+ </div>
42
+ <p class="micl-card__supporting-text">Click a button to open one of the MICL menus.</p>
43
+ <div class="micl-card__content docs-buttons">
44
+ <div style="position:relative">
45
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu1">Open Basic Menu</button>
46
+ <nav id="mymenu1" class="micl-menu" popover>
153
47
  <ul class="micl-list">
154
48
  <li class="micl-list-item-one" tabindex="0">
155
49
  <span class="micl-list-item__text">
156
- <span class="micl-list-item__headline">Norway</span>
157
- </span>
158
- </li>
159
- <li class="micl-list-item-one">
160
- <span class="micl-list-item__text">
161
- <span class="micl-list-item__headline">Sweden</span>
162
- </span>
163
- </li>
164
- <li class="micl-list-item-one">
165
- <span class="micl-list-item__text">
166
- <span class="micl-list-item__headline">France</span>
50
+ <span class="micl-list-item__headline">Home</span>
167
51
  </span>
168
52
  </li>
169
53
  <li class="micl-list-item-one">
170
54
  <span class="micl-list-item__text">
171
- <span class="micl-list-item__headline">Italy</span>
55
+ <span class="micl-list-item__headline">About</span>
172
56
  </span>
173
57
  </li>
174
- <li class="micl-list-item-one">
58
+ <li class="micl-list-item-one micl-list-item--disabled">
175
59
  <span class="micl-list-item__text">
176
- <span class="micl-list-item__headline">Slovenia</span>
60
+ <span class="micl-list-item__headline">Contact</span>
177
61
  </span>
178
62
  </li>
179
63
  </ul>
180
64
  </nav>
181
- </li>
182
- <li class="micl-list-item-one">
183
- <button popovertarget="mymenu6" tabindex="-1">
184
- <span class="micl-list-item__text">
185
- <span class="micl-list-item__headline">Africa</span>
186
- </span>
187
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
188
- </button>
189
- <nav id="mymenu6" class="micl-menu" popover>
65
+ </div>
66
+
67
+ <div style="position:relative">
68
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu2">Open Menu</button>
69
+ <nav id="mymenu2" class="micl-menu" popover>
190
70
  <ul class="micl-list">
191
- <li class="micl-list-item-one" tabindex="0">
192
- <span class="micl-list-item__text">
193
- <span class="micl-list-item__headline">Egypt</span>
194
- </span>
195
- </li>
196
- <li class="micl-list-item-one">
71
+ <li class="micl-list-item-two" tabindex="0">
72
+ <span class="micl-list-item__icon material-symbols-outlined">home</span>
197
73
  <span class="micl-list-item__text">
198
- <span class="micl-list-item__headline">Cameroon</span>
74
+ <span class="micl-list-item__headline">Home</span>
75
+ <span class="micl-list-item__supporting-text">Click here to go home</span>
199
76
  </span>
200
77
  </li>
201
- <li class="micl-list-item-one">
202
- <span class="micl-list-item__text">
203
- <span class="micl-list-item__headline">Botswana</span>
204
- </span>
78
+ <li class="micl-list-item-two">
79
+ <label>
80
+ <span class="micl-list-item__icon"></span>
81
+ <span class="micl-list-item__text">
82
+ <span class="micl-list-item__headline">Person</span>
83
+ <span class="micl-list-item__supporting-text">Are you an administrator?</span>
84
+ </span>
85
+ <input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
86
+ </label>
205
87
  </li>
206
- <li class="micl-list-item-one">
88
+ <li class="micl-list-item-two">
89
+ <span class="micl-list-item__icon material-symbols-outlined">settings</span>
207
90
  <span class="micl-list-item__text">
208
- <span class="micl-list-item__headline">Ghana</span>
91
+ <span class="micl-list-item__headline">About</span>
92
+ <span class="micl-list-item__supporting-text">Change everything in the system</span>
209
93
  </span>
210
94
  </li>
211
- <li class="micl-list-item-one">
95
+ <li class="micl-list-item-two micl-list-item__divider">
212
96
  <span class="micl-list-item__text">
213
- <span class="micl-list-item__headline">Niger</span>
97
+ <span class="micl-list-item__headline">Contact</span>
98
+ <span class="micl-list-item__supporting-text">Call me!</span>
214
99
  </span>
100
+ <span class="micl-list-item__icon material-symbols-outlined">keyboard_command_key</span>
215
101
  </li>
216
102
  </ul>
217
103
  </nav>
218
- </li>
219
- <li class="micl-list-item-one">
220
- <button popovertarget="mymenu7" tabindex="-1">
221
- <span class="micl-list-item__text">
222
- <span class="micl-list-item__headline">Asia</span>
223
- </span>
224
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
225
- </button>
226
- <nav id="mymenu7" class="micl-menu" popover>
104
+ </div>
105
+
106
+ <div style="position:relative">
107
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu3">Open Big Menu</button>
108
+ <nav id="mymenu3" class="micl-menu" popover>
227
109
  <ul class="micl-list">
228
- <li class="micl-list-item-one" tabindex="0">
110
+ <li class="micl-list-item-three" tabindex="0">
111
+ <span class="micl-list-item__icon material-symbols-outlined">group</span>
229
112
  <span class="micl-list-item__text">
230
- <span class="micl-list-item__headline">Bhutan</span>
113
+ <span class="micl-list-item__headline">Number of employees</span>
114
+ <span class="micl-list-item__supporting-text">Currently + those who have signed a contract</span>
231
115
  </span>
116
+ <span class="micl-list-item__trailing-text">381</span>
232
117
  </li>
233
- <li class="micl-list-item-one">
234
- <span class="micl-list-item__text">
235
- <span class="micl-list-item__headline">India</span>
236
- </span>
237
- </li>
238
- <li class="micl-list-item-one">
118
+ <li class="micl-list-item-three">
119
+ <span class="micl-list-item__image" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/1928_Model_A_Ford.jpg/330px-1928_Model_A_Ford.jpg)"></span>
239
120
  <span class="micl-list-item__text">
240
- <span class="micl-list-item__headline">Jordan</span>
121
+ <span class="micl-list-item__headline">Company cars</span>
122
+ <span class="micl-list-item__supporting-text">Available to our wonderful employees</span>
241
123
  </span>
242
124
  </li>
243
- <li class="micl-list-item-one">
244
- <span class="micl-list-item__text">
245
- <span class="micl-list-item__headline">Vietnam</span>
246
- </span>
125
+ <li class="micl-list-item-three">
126
+ <a href="https://www.nytimes.com" tabindex="-1">
127
+ <span class="micl-list-item__icon material-symbols-outlined">newspaper</span>
128
+ <span class="micl-list-item__text">
129
+ <span class="micl-list-item__headline">The New York Times</span>
130
+ <span class="micl-list-item__supporting-text">Clicking this item opens the front page of The New York Times</span>
131
+ </span>
132
+ </a>
247
133
  </li>
248
- <li class="micl-list-item-one">
249
- <span class="micl-list-item__text">
250
- <span class="micl-list-item__headline">Mongolia</span>
251
- </span>
134
+ <li class="micl-list-item-three">
135
+ <label>
136
+ <span class="micl-list-item__icon material-symbols-outlined">check</span>
137
+ <span class="micl-list-item__text">
138
+ <span class="micl-list-item__headline">Select or Unselect</span>
139
+ <span class="micl-list-item__supporting-text">A check-mark before this text if the item is selected.</span>
140
+ </span>
141
+ <input type="checkbox" id="cb2" class="micl-checkbox" style="display:none" value="c2" tabindex="-1">
142
+ </label>
252
143
  </li>
253
144
  </ul>
254
145
  </nav>
255
- </li>
256
- <li class="micl-list-item-one">
257
- <button popovertarget="mymenu8" tabindex="-1">
258
- <span class="micl-list-item__text">
259
- <span class="micl-list-item__headline">America</span>
260
- </span>
261
- <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
262
- </button>
263
- <nav id="mymenu8" class="micl-menu" popover>
146
+ </div>
147
+
148
+ <div style="position:relative">
149
+ <button type="button" class="micl-button-outlined-m micl-button--square" popovertarget="mymenu4">Open Menu with Sub-Menus</button>
150
+ <nav id="mymenu4" class="micl-menu" popover>
264
151
  <ul class="micl-list">
265
152
  <li class="micl-list-item-one" tabindex="0">
266
- <button popovertarget="mymenu9" tabindex="-1">
153
+ <button popovertarget="mymenu5" tabindex="-1">
267
154
  <span class="micl-list-item__text">
268
- <span class="micl-list-item__headline">North America</span>
155
+ <span class="micl-list-item__headline">Europe</span>
269
156
  </span>
270
157
  <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
271
158
  </button>
272
- <nav id="mymenu9" class="micl-menu" popover>
159
+ <nav id="mymenu5" class="micl-menu" popover>
273
160
  <ul class="micl-list">
274
161
  <li class="micl-list-item-one" tabindex="0">
275
162
  <span class="micl-list-item__text">
276
- <span class="micl-list-item__headline">Mexico</span>
163
+ <span class="micl-list-item__headline">Norway</span>
277
164
  </span>
278
165
  </li>
279
166
  <li class="micl-list-item-one">
280
167
  <span class="micl-list-item__text">
281
- <span class="micl-list-item__headline">Canada</span>
168
+ <span class="micl-list-item__headline">Sweden</span>
282
169
  </span>
283
170
  </li>
284
171
  <li class="micl-list-item-one">
285
172
  <span class="micl-list-item__text">
286
- <span class="micl-list-item__headline">USA</span>
173
+ <span class="micl-list-item__headline">France</span>
174
+ </span>
175
+ </li>
176
+ <li class="micl-list-item-one">
177
+ <span class="micl-list-item__text">
178
+ <span class="micl-list-item__headline">Italy</span>
179
+ </span>
180
+ </li>
181
+ <li class="micl-list-item-one">
182
+ <span class="micl-list-item__text">
183
+ <span class="micl-list-item__headline">Slovenia</span>
287
184
  </span>
288
185
  </li>
289
186
  </ul>
290
187
  </nav>
291
188
  </li>
292
189
  <li class="micl-list-item-one">
293
- <button popovertarget="mymenu10" tabindex="-1">
190
+ <button popovertarget="mymenu6" tabindex="-1">
294
191
  <span class="micl-list-item__text">
295
- <span class="micl-list-item__headline">South America</span>
192
+ <span class="micl-list-item__headline">Africa</span>
296
193
  </span>
297
194
  <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
298
195
  </button>
299
- <nav id="mymenu10" class="micl-menu" popover>
196
+ <nav id="mymenu6" class="micl-menu" popover>
300
197
  <ul class="micl-list">
301
198
  <li class="micl-list-item-one" tabindex="0">
302
199
  <span class="micl-list-item__text">
303
- <span class="micl-list-item__headline">Brazil</span>
200
+ <span class="micl-list-item__headline">Egypt</span>
304
201
  </span>
305
202
  </li>
306
203
  <li class="micl-list-item-one">
307
204
  <span class="micl-list-item__text">
308
- <span class="micl-list-item__headline">Peru</span>
205
+ <span class="micl-list-item__headline">Cameroon</span>
206
+ </span>
207
+ </li>
208
+ <li class="micl-list-item-one">
209
+ <span class="micl-list-item__text">
210
+ <span class="micl-list-item__headline">Botswana</span>
211
+ </span>
212
+ </li>
213
+ <li class="micl-list-item-one">
214
+ <span class="micl-list-item__text">
215
+ <span class="micl-list-item__headline">Ghana</span>
216
+ </span>
217
+ </li>
218
+ <li class="micl-list-item-one">
219
+ <span class="micl-list-item__text">
220
+ <span class="micl-list-item__headline">Niger</span>
221
+ </span>
222
+ </li>
223
+ </ul>
224
+ </nav>
225
+ </li>
226
+ <li class="micl-list-item-one">
227
+ <button popovertarget="mymenu7" tabindex="-1">
228
+ <span class="micl-list-item__text">
229
+ <span class="micl-list-item__headline">Asia</span>
230
+ </span>
231
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
232
+ </button>
233
+ <nav id="mymenu7" class="micl-menu" popover>
234
+ <ul class="micl-list">
235
+ <li class="micl-list-item-one" tabindex="0">
236
+ <span class="micl-list-item__text">
237
+ <span class="micl-list-item__headline">Bhutan</span>
238
+ </span>
239
+ </li>
240
+ <li class="micl-list-item-one">
241
+ <span class="micl-list-item__text">
242
+ <span class="micl-list-item__headline">India</span>
243
+ </span>
244
+ </li>
245
+ <li class="micl-list-item-one">
246
+ <span class="micl-list-item__text">
247
+ <span class="micl-list-item__headline">Jordan</span>
248
+ </span>
249
+ </li>
250
+ <li class="micl-list-item-one">
251
+ <span class="micl-list-item__text">
252
+ <span class="micl-list-item__headline">Vietnam</span>
253
+ </span>
254
+ </li>
255
+ <li class="micl-list-item-one">
256
+ <span class="micl-list-item__text">
257
+ <span class="micl-list-item__headline">Mongolia</span>
309
258
  </span>
310
259
  </li>
311
260
  </ul>
312
261
  </nav>
313
262
  </li>
263
+ <li class="micl-list-item-one">
264
+ <button popovertarget="mymenu8" tabindex="-1">
265
+ <span class="micl-list-item__text">
266
+ <span class="micl-list-item__headline">America</span>
267
+ </span>
268
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
269
+ </button>
270
+ <nav id="mymenu8" class="micl-menu" popover>
271
+ <ul class="micl-list">
272
+ <li class="micl-list-item-one" tabindex="0">
273
+ <button popovertarget="mymenu9" tabindex="-1">
274
+ <span class="micl-list-item__text">
275
+ <span class="micl-list-item__headline">North America</span>
276
+ </span>
277
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
278
+ </button>
279
+ <nav id="mymenu9" class="micl-menu" popover>
280
+ <ul class="micl-list">
281
+ <li class="micl-list-item-one" tabindex="0">
282
+ <span class="micl-list-item__text">
283
+ <span class="micl-list-item__headline">Mexico</span>
284
+ </span>
285
+ </li>
286
+ <li class="micl-list-item-one">
287
+ <span class="micl-list-item__text">
288
+ <span class="micl-list-item__headline">Canada</span>
289
+ </span>
290
+ </li>
291
+ <li class="micl-list-item-one">
292
+ <span class="micl-list-item__text">
293
+ <span class="micl-list-item__headline">USA</span>
294
+ </span>
295
+ </li>
296
+ </ul>
297
+ </nav>
298
+ </li>
299
+ <li class="micl-list-item-one">
300
+ <button popovertarget="mymenu10" tabindex="-1">
301
+ <span class="micl-list-item__text">
302
+ <span class="micl-list-item__headline">South America</span>
303
+ </span>
304
+ <span class="micl-list-item__icon material-symbols-outlined">arrow_right</span>
305
+ </button>
306
+ <nav id="mymenu10" class="micl-menu" popover>
307
+ <ul class="micl-list">
308
+ <li class="micl-list-item-one" tabindex="0">
309
+ <span class="micl-list-item__text">
310
+ <span class="micl-list-item__headline">Brazil</span>
311
+ </span>
312
+ </li>
313
+ <li class="micl-list-item-one">
314
+ <span class="micl-list-item__text">
315
+ <span class="micl-list-item__headline">Peru</span>
316
+ </span>
317
+ </li>
318
+ </ul>
319
+ </nav>
320
+ </li>
321
+ </ul>
322
+ </nav>
323
+ </li>
314
324
  </ul>
315
325
  </nav>
316
- </li>
317
- </ul>
318
- </nav>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ <div class="micl-pane__column">
331
+ <div class="micl-card-filled">
332
+ <div class="micl-card__headline-s">
333
+ <h2>Code example</h2>
334
+ </div>
335
+ <div class="micl-card__content docs-code">
336
+ <pre><code>
337
+ &lt;nav id="id0" class="micl-menu" popover&gt;
338
+ &lt;ul class="micl-list"&gt;
339
+ &lt;li class="micl-list-item-one" tabindex="0"&gt;
340
+ &lt;span class="micl-list-item__text"&gt;
341
+ &lt;span class="micl-list-item__headline"&gt;Home&lt;/span&gt;
342
+ &lt;/span&gt;
343
+ &lt;/li&gt;
344
+ &lt;li class="micl-list-item-one"&gt;
345
+ &lt;span class="micl-list-item__text"&gt;
346
+ &lt;span class="micl-list-item__headline"&gt;About&lt;/span&gt;
347
+ &lt;/span&gt;
348
+ &lt;/li&gt;
349
+ &lt;li class="micl-list-item-one micl-list-item--disabled"&gt;
350
+ &lt;span class="micl-list-item__text"&gt;
351
+ &lt;span class="micl-list-item__headline"&gt;Contact&lt;/span&gt;
352
+ &lt;/span&gt;
353
+ &lt;/li&gt;
354
+ &lt;/ul&gt;
355
+ &lt;/nav&gt;
356
+ </code></pre>
357
+ </div>
358
+ </div>
319
359
  </div>
320
360
  </div>
321
- </div>
322
- </div>
361
+ </section>
362
+ </main>
323
363
 
324
364
  <script src="micl.js"></script>
325
365
  <script src="docs.js"></script>