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/select.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 Selects">
6
7
  <title>MICL Selects</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=check,confirmation_number,dark_mode,group,home,newspaper,person,settings&display=block">
9
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=dark_mode,home&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">
@@ -19,187 +20,266 @@
19
20
  .micl-list-item__thumbnail {
20
21
  height: 56px;
21
22
  }
23
+ .bigdot {
24
+ width: 24px;
25
+ min-width: 24px;
26
+ height: 24px;
27
+ border-radius: 100%;
28
+ }
22
29
  </style>
23
30
  </head>
24
- <body class="light">
25
- <div class="headline">
26
- <h1 class="md-sys-typescale-emphasized-display-small">Selects</h1>
27
- <div id="settings-placeholder"></div>
28
- </div>
29
-
30
- <div class="cards">
31
- <div class="micl-card-elevated">
32
- <div class="micl-card__content">
33
- <div class="micl-textfield-outlined">
34
- <label for="myselect1">Country</label>
35
- <select id="myselect1">
36
- <option class="micl-list-item-one" value=""></option>
37
- <option class="micl-list-item-one" value="AR">
38
- <span class="micl-list-item__text">Argentina</span>
39
- </option>
40
- <option class="micl-list-item-one" value="BO">
41
- <span class="micl-list-item__text">Bolivia</span>
42
- </option>
43
- <option class="micl-list-item-one" value="BR" disabled>
44
- <span class="micl-list-item__text">Brazil</span>
45
- </option>
46
- <option class="micl-list-item-one" value="CL">
47
- <span class="micl-list-item__text">Chile</span>
48
- </option>
49
- <option class="micl-list-item-one" value="CO">
50
- <span class="micl-list-item__text">Colombia</span>
51
- </option>
52
- <option class="micl-list-item-one" value="EC">
53
- <span class="micl-list-item__text">Ecuador</span>
54
- </option>
55
- </select>
56
- </div>
57
- <div class="micl-textfield-outlined">
58
- <label for="myselect2">Country</label>
59
- <select id="myselect2">
60
- <option class="micl-list-item-two" value="AR">
61
- <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
62
- </option>
63
- <option class="micl-list-item-two" value="BO">
64
- <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
65
- </option>
66
- <option selected class="micl-list-item-two" value="BR">
67
- <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
68
- </option>
69
- <option class="micl-list-item-two" value="CL" disabled>
70
- <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
71
- </option>
72
- <option class="micl-list-item-two" value="CO">
73
- <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
74
- </option>
75
- <option class="micl-list-item-two" value="EC">
76
- <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
77
- </option>
78
- </select>
79
- </div>
80
- <div class="micl-textfield-outlined">
81
- <label for="myselect3">Country</label>
82
- <select id="myselect3">
83
- <option class="micl-list-item-two" value=""></option>
84
- <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="AR">
85
- <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_Argentina.svg/330px-Flag_of_Argentina.svg.png)"></span>
86
- <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
87
- </option>
88
- <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="BO">
89
- <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Bandera_de_Bolivia_%28Estado%29.svg/330px-Bandera_de_Bolivia_%28Estado%29.svg.png)"></span>
90
- <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
91
- </option>
92
- <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="BR">
93
- <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/330px-Flag_of_Brazil.svg.png)"></span>
94
- <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
95
- </option>
96
- <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="CL">
97
- <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Flag_of_Chile.svg/330px-Flag_of_Chile.svg.png)"></span>
98
- <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
99
- </option>
100
- <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="CO" disabled>
101
- <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Colombia.svg/330px-Flag_of_Colombia.svg.png)"></span>
102
- <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
103
- </option>
104
- <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="EC">
105
- <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Flag_of_Ecuador.svg/330px-Flag_of_Ecuador.svg.png)"></span>
106
- <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
107
- </option>
108
- </select>
31
+ <body class="micl-window light">
32
+ <main class="micl-body micl-body--stacked-to-large">
33
+ <section class="micl-pane">
34
+ <header class="micl-appbar">
35
+ <a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
36
+ <span class="material-symbols-outlined" aria-hidden="true">home</span>
37
+ </a>
38
+ <div class="micl-appbar__headline micl-appbar__headline--center">
39
+ <h1>Selects</h1>
40
+ <p class="micl-appbar__subtitle">Showcasing MICL selects</p>
109
41
  </div>
110
- </div>
111
- </div>
42
+ <div id="settings-placeholder" class="micl-appbar__trailing"></div>
43
+ </header>
112
44
 
113
- <div class="micl-card-outlined">
114
- <div class="micl-card__content" style="padding-block-end:32px">
115
- <div class="micl-textfield-filled">
116
- <label for="myselect4">Country</label>
117
- <select id="myselect4">
118
- <option class="micl-list-item-one" value=""></option>
119
- <option class="micl-list-item-one" value="AR">
120
- <span class="micl-list-item__text">Argentina</span>
121
- </option>
122
- <option class="micl-list-item-one" value="BO">
123
- <span class="micl-list-item__text">Bolivia</span>
124
- </option>
125
- <option class="micl-list-item-one" value="BR" disabled>
126
- <span class="micl-list-item__text">Brazil</span>
127
- </option>
128
- <option class="micl-list-item-one" value="CL">
129
- <span class="micl-list-item__text">Chile</span>
130
- </option>
131
- <option class="micl-list-item-one" value="CO">
132
- <span class="micl-list-item__text">Colombia</span>
133
- </option>
134
- <option class="micl-list-item-one" value="EC">
135
- <span class="micl-list-item__text">Ecuador</span>
136
- </option>
137
- </select>
138
- </div>
139
- <div class="micl-textfield-filled">
140
- <label for="myselect5">Country</label>
141
- <select id="myselect5" disabled>
142
- <option class="micl-list-item-one" value=""></option>
143
- <option class="micl-list-item-one" value="AR">
144
- <span class="micl-list-item__text">Argentina</span>
145
- </option>
146
- <option class="micl-list-item-one" value="BO">
147
- <span class="micl-list-item__text">Bolivia</span>
148
- </option>
149
- <option class="micl-list-item-one" value="BR" disabled>
150
- <span class="micl-list-item__text">Brazil</span>
151
- </option>
152
- <option class="micl-list-item-one" value="CL">
153
- <span class="micl-list-item__text">Chile</span>
154
- </option>
155
- <option class="micl-list-item-one" value="CO">
156
- <span class="micl-list-item__text">Colombia</span>
157
- </option>
158
- <option class="micl-list-item-one" value="EC">
159
- <span class="micl-list-item__text">Ecuador</span>
160
- </option>
161
- </select>
45
+ <div class="micl-pane__columns micl-pane__columns--stacked-to-expanded">
46
+ <div class="micl-pane__column">
47
+ <div class="micl-card-elevated">
48
+ <div class="micl-card__content">
49
+ <div class="micl-textfield-outlined">
50
+ <label for="myselect1">Country</label>
51
+ <select id="myselect1">
52
+ <option class="micl-list-item-one" value=""></option>
53
+ <option class="micl-list-item-one" value="AR">
54
+ <span class="micl-list-item__text">Argentina</span>
55
+ </option>
56
+ <option class="micl-list-item-one" value="BO">
57
+ <span class="micl-list-item__text">Bolivia</span>
58
+ </option>
59
+ <option class="micl-list-item-one" value="BR" disabled>
60
+ <span class="micl-list-item__text">Brazil</span>
61
+ </option>
62
+ <option class="micl-list-item-one" value="CL">
63
+ <span class="micl-list-item__text">Chile</span>
64
+ </option>
65
+ <option class="micl-list-item-one" value="CO">
66
+ <span class="micl-list-item__text">Colombia</span>
67
+ </option>
68
+ <option class="micl-list-item-one" value="EC">
69
+ <span class="micl-list-item__text">Ecuador</span>
70
+ </option>
71
+ </select>
72
+ </div>
73
+ <div class="micl-textfield-outlined">
74
+ <label for="myselect2">Country</label>
75
+ <select id="myselect2">
76
+ <option class="micl-list-item-two" value="AR">
77
+ <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
78
+ </option>
79
+ <option class="micl-list-item-two" value="BO">
80
+ <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
81
+ </option>
82
+ <option selected class="micl-list-item-two" value="BR">
83
+ <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
84
+ </option>
85
+ <option class="micl-list-item-two" value="CL" disabled>
86
+ <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
87
+ </option>
88
+ <option class="micl-list-item-two" value="CO">
89
+ <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
90
+ </option>
91
+ <option class="micl-list-item-two" value="EC">
92
+ <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
93
+ </option>
94
+ </select>
95
+ </div>
96
+ <div class="micl-textfield-outlined">
97
+ <label for="myselect3">Country</label>
98
+ <select id="myselect3">
99
+ <option class="micl-list-item-two" value=""></option>
100
+ <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="AR">
101
+ <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Flag_of_Argentina.svg/330px-Flag_of_Argentina.svg.png)"></span>
102
+ <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
103
+ </option>
104
+ <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="BO">
105
+ <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b3/Bandera_de_Bolivia_%28Estado%29.svg/330px-Bandera_de_Bolivia_%28Estado%29.svg.png)"></span>
106
+ <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
107
+ </option>
108
+ <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="BR">
109
+ <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/en/thumb/0/05/Flag_of_Brazil.svg/330px-Flag_of_Brazil.svg.png)"></span>
110
+ <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
111
+ </option>
112
+ <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="CL">
113
+ <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/78/Flag_of_Chile.svg/330px-Flag_of_Chile.svg.png)"></span>
114
+ <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
115
+ </option>
116
+ <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="CO" disabled>
117
+ <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Flag_of_Colombia.svg/330px-Flag_of_Colombia.svg.png)"></span>
118
+ <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
119
+ </option>
120
+ <option class="micl-list-item-two" style="--md-sys-list-item-thumbnail-aspect-ratio:1.594" value="EC">
121
+ <span class="micl-list-item__thumbnail" style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Flag_of_Ecuador.svg/330px-Flag_of_Ecuador.svg.png)"></span>
122
+ <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
123
+ </option>
124
+ </select>
125
+ </div>
126
+ </div>
127
+ </div>
162
128
  </div>
129
+ <div class="micl-pane__column">
130
+ <div class="micl-card-outlined">
131
+ <div class="micl-card__content" style="padding-block-end:32px">
132
+ <div class="micl-textfield-filled">
133
+ <label for="myselect4">Country</label>
134
+ <select id="myselect4">
135
+ <option class="micl-list-item-one" value=""></option>
136
+ <option class="micl-list-item-one" value="AR">
137
+ <span class="micl-list-item__text">Argentina</span>
138
+ </option>
139
+ <option class="micl-list-item-one" value="BO">
140
+ <span class="micl-list-item__text">Bolivia</span>
141
+ </option>
142
+ <option class="micl-list-item-one" value="BR" disabled>
143
+ <span class="micl-list-item__text">Brazil</span>
144
+ </option>
145
+ <hr class="micl-divider">
146
+ <option class="micl-list-item-one" selected value="CL">
147
+ <span class="micl-list-item__text">Chile</span>
148
+ </option>
149
+ <option class="micl-list-item-one" value="CO">
150
+ <span class="micl-list-item__text">Colombia</span>
151
+ </option>
152
+ <option class="micl-list-item-one" value="EC">
153
+ <span class="micl-list-item__text">Ecuador</span>
154
+ </option>
155
+ </select>
156
+ </div>
157
+ <div class="micl-textfield-filled">
158
+ <label for="myselect5">Country</label>
159
+ <select id="myselect5">
160
+ <option class="micl-list-item-one" value=""></option>
161
+ <option class="micl-list-item-one" value="AR">
162
+ <span class="micl-list-item__text">Argentina</span>
163
+ <span class="bigdot" style="background-color:teal"></span>
164
+ </option>
165
+ <option class="micl-list-item-one" value="BO">
166
+ <span class="micl-list-item__text">Bolivia</span>
167
+ <span class="bigdot" style="background-color:yellow"></span>
168
+ </option>
169
+ <option class="micl-list-item-one" value="BR">
170
+ <span class="micl-list-item__text">Brazil</span>
171
+ <span class="bigdot" style="background-color:burlywood"></span>
172
+ </option>
173
+ <hr class="micl-divider">
174
+ <option class="micl-list-item-one" value="CL">
175
+ <span class="micl-list-item__text">Chile</span>
176
+ <span class="bigdot" style="background-color:coral"></span>
177
+ </option>
178
+ <option class="micl-list-item-one" value="CO">
179
+ <span class="micl-list-item__text">Colombia</span>
180
+ <span class="bigdot" style="background-color:darkkhaki"></span>
181
+ </option>
182
+ <hr class="micl-divider">
183
+ <option class="micl-list-item-one" value="EC">
184
+ <span class="micl-list-item__text">Ecuador</span>
185
+ <span class="bigdot" style="background-color:darkviolet"></span>
186
+ </option>
187
+ </select>
188
+ </div>
189
+ <div class="micl-textfield-filled">
190
+ <label for="myselect6">Country</label>
191
+ <select id="myselect6" disabled>
192
+ <option class="micl-list-item-one" value=""></option>
193
+ <option class="micl-list-item-one" value="AR">
194
+ <span class="micl-list-item__text">Argentina</span>
195
+ </option>
196
+ <option class="micl-list-item-one" value="BO">
197
+ <span class="micl-list-item__text">Bolivia</span>
198
+ </option>
199
+ <option class="micl-list-item-one" value="BR" disabled>
200
+ <span class="micl-list-item__text">Brazil</span>
201
+ </option>
202
+ <option class="micl-list-item-one" value="CL">
203
+ <span class="micl-list-item__text">Chile</span>
204
+ </option>
205
+ <option class="micl-list-item-one" value="CO">
206
+ <span class="micl-list-item__text">Colombia</span>
207
+ </option>
208
+ <option class="micl-list-item-one" value="EC">
209
+ <span class="micl-list-item__text">Ecuador</span>
210
+ </option>
211
+ </select>
212
+ </div>
163
213
 
164
- <dialog id="mydialog" class="micl-dialog" style="width:300px" closedby="any" popover>
165
- <div class="micl-dialog__headline">
166
- <h2>Select a country</h2>
167
- <span class="micl-dialog__supporting-text">Select a country from the pick list below and click <b>Save</b></span>
168
- </div>
169
- <div class="micl-dialog__content">
170
- <div class="micl-textfield-outlined" style="margin:8px">
171
- <label for="myselect5">Country</label>
172
- <select id="myselect5">
173
- <option class="micl-list-item-two" value="AR">
174
- <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
175
- </option>
176
- <option class="micl-list-item-two" value="BO">
177
- <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
178
- </option>
179
- <option selected class="micl-list-item-two" value="BR">
180
- <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
181
- </option>
182
- <option class="micl-list-item-two" value="CL" disabled>
183
- <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
184
- </option>
185
- <option class="micl-list-item-two" value="CO">
186
- <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
187
- </option>
188
- <option class="micl-list-item-two" value="EC">
189
- <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
190
- </option>
191
- </select>
214
+ <dialog id="mydialog" class="micl-dialog" style="width:300px" closedby="any" popover>
215
+ <div class="micl-dialog__headline">
216
+ <h2>Select a country</h2>
217
+ <span class="micl-dialog__supporting-text">Select a country from the pick list below and click <b>Save</b></span>
218
+ </div>
219
+ <div class="micl-dialog__content">
220
+ <div class="micl-textfield-outlined" style="margin:8px">
221
+ <label for="myselect7">Country</label>
222
+ <select id="myselect7">
223
+ <option class="micl-list-item-two" value="AR">
224
+ <span class="micl-list-item__text" aria-description="Country code: AR">Argentina</span>
225
+ </option>
226
+ <option class="micl-list-item-two" value="BO">
227
+ <span class="micl-list-item__text" aria-description="Country code: BO">Bolivia</span>
228
+ </option>
229
+ <option selected class="micl-list-item-two" value="BR">
230
+ <span class="micl-list-item__text" aria-description="Country code: BR">Brazil</span>
231
+ </option>
232
+ <option class="micl-list-item-two" value="CL" disabled>
233
+ <span class="micl-list-item__text" aria-description="Country code: CL">Chile</span>
234
+ </option>
235
+ <option class="micl-list-item-two" value="CO">
236
+ <span class="micl-list-item__text" aria-description="Country code: CO">Colombia</span>
237
+ </option>
238
+ <option class="micl-list-item-two" value="EC">
239
+ <span class="micl-list-item__text" aria-description="Country code: EC">Ecuador</span>
240
+ </option>
241
+ </select>
242
+ </div>
243
+ </div>
244
+ <div class="micl-dialog__actions">
245
+ <button type="button" class="micl-button-text-s" popovertarget="mydialog">Cancel</button>
246
+ <button type="button" class="micl-button-text-s">Save</button>
247
+ </div>
248
+ </dialog>
249
+ <button type="button" class="micl-button-elevated-m" popovertarget="mydialog">Open Dialog with Select</button>
192
250
  </div>
193
251
  </div>
194
- <div class="micl-dialog__actions">
195
- <button type="button" class="micl-button-text-s" popovertarget="mydialog">Cancel</button>
196
- <button type="button" class="micl-button-text-s">Save</button>
197
- </div>
198
- </dialog>
199
- <button type="button" class="micl-button-elevated-m" popovertarget="mydialog">Open Dialog with Select</button>
252
+ </div>
253
+ </div>
254
+ </section>
255
+ <section class="micl-pane">
256
+ <div class="micl-card-filled">
257
+ <div class="micl-card__headline-s">
258
+ <h2>Code example</h2>
259
+ </div>
260
+ <div class="micl-card__content docs-code">
261
+ <pre><code>
262
+ &lt;div class="micl-textfield-outlined"&gt;
263
+ &lt;label for="myselect"&gt;Country&lt;/label&gt;
264
+ &lt;select id="myselect"&gt;
265
+ &lt;option class="micl-list-item-one" value=""&gt;&lt;/option&gt;
266
+ &lt;option class="micl-list-item-one" value="AR"&gt;
267
+ &lt;span class="micl-list-item__text"&gt;Argentina&lt;/span&gt;
268
+ &lt;/option&gt;
269
+ &lt;option class="micl-list-item-one" value="BO"&gt;
270
+ &lt;span class="micl-list-item__text"&gt;Bolivia&lt;/span&gt;
271
+ &lt;/option&gt;
272
+ &lt;hr class="micl-divider"&gt;
273
+ &lt;option class="micl-list-item-one" value="BR" disabled&gt;
274
+ &lt;span class="micl-list-item__text"&gt;Brazil&lt;/span&gt;
275
+ &lt;/option&gt;
276
+ &lt;/select&gt;
277
+ &lt;/div&gt;
278
+ </code></pre>
279
+ </div>
200
280
  </div>
201
- </div>
202
- </div>
281
+ </section>
282
+ </main>
203
283
 
204
284
  <script src="micl.js"></script>
205
285
  <script src="docs.js"></script>