@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.8 → 0.0.0-pr624.80

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 (143) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +1262 -81
  5. package/components/bibtemplate/dist/registered.js +1262 -81
  6. package/components/checkbox/README.md +1 -1
  7. package/components/checkbox/demo/api.html +16 -10
  8. package/components/checkbox/demo/api.md +49 -15
  9. package/components/checkbox/demo/api.min.js +73 -43
  10. package/components/checkbox/demo/index.html +16 -10
  11. package/components/checkbox/demo/index.md +2 -2
  12. package/components/checkbox/demo/index.min.js +73 -43
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/demo/readme.md +1 -1
  15. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  16. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  17. package/components/checkbox/dist/index.js +72 -42
  18. package/components/checkbox/dist/registered.js +72 -42
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +115 -8
  21. package/components/combobox/demo/api.min.js +3102 -921
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +6 -30
  24. package/components/combobox/demo/index.min.js +3102 -921
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/dist/auro-combobox.d.ts +44 -12
  27. package/components/combobox/dist/index.js +3080 -995
  28. package/components/combobox/dist/registered.js +3080 -995
  29. package/components/counter/demo/api.html +17 -10
  30. package/components/counter/demo/api.md +158 -21
  31. package/components/counter/demo/api.min.js +3416 -728
  32. package/components/counter/demo/index.html +17 -10
  33. package/components/counter/demo/index.md +185 -34
  34. package/components/counter/demo/index.min.js +3416 -728
  35. package/components/counter/demo/readme.html +16 -9
  36. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  37. package/components/counter/dist/auro-counter-group.d.ts +161 -11
  38. package/components/counter/dist/auro-counter.d.ts +16 -0
  39. package/components/counter/dist/helptextVersion.d.ts +2 -0
  40. package/components/counter/dist/iconVersion.d.ts +1 -1
  41. package/components/counter/dist/index.js +3416 -728
  42. package/components/counter/dist/registered.js +3416 -728
  43. package/components/datepicker/README.md +1 -1
  44. package/components/datepicker/demo/api.html +16 -10
  45. package/components/datepicker/demo/api.md +59 -28
  46. package/components/datepicker/demo/api.min.js +8486 -4644
  47. package/components/datepicker/demo/index.html +16 -10
  48. package/components/datepicker/demo/index.md +75 -8
  49. package/components/datepicker/demo/index.min.js +8486 -4644
  50. package/components/datepicker/demo/readme.html +16 -9
  51. package/components/datepicker/demo/readme.md +1 -1
  52. package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
  53. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  54. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  55. package/components/datepicker/dist/index.js +7033 -3191
  56. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  57. package/components/datepicker/dist/registered.js +7033 -3191
  58. package/components/dropdown/demo/api.html +16 -10
  59. package/components/dropdown/demo/api.md +82 -275
  60. package/components/dropdown/demo/api.min.js +451 -260
  61. package/components/dropdown/demo/index.html +16 -10
  62. package/components/dropdown/demo/index.md +92 -362
  63. package/components/dropdown/demo/index.min.js +451 -260
  64. package/components/dropdown/demo/readme.html +16 -9
  65. package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
  66. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  67. package/components/dropdown/dist/index.js +450 -259
  68. package/components/dropdown/dist/registered.js +450 -259
  69. package/components/form/demo/api.html +16 -9
  70. package/components/form/demo/api.min.js +2 -2
  71. package/components/form/demo/autocomplete.html +19 -3
  72. package/components/form/demo/index.html +16 -9
  73. package/components/form/demo/index.min.js +2 -2
  74. package/components/form/demo/readme.html +16 -9
  75. package/components/form/demo/working.html +19 -13
  76. package/components/form/dist/index.js +1 -1
  77. package/components/form/dist/registered.js +1 -1
  78. package/components/helptext/dist/index.js +2 -2
  79. package/components/helptext/dist/registered.js +2 -2
  80. package/components/input/README.md +5 -2
  81. package/components/input/demo/api.html +16 -10
  82. package/components/input/demo/api.md +228 -130
  83. package/components/input/demo/api.min.js +909 -247
  84. package/components/input/demo/index.html +16 -10
  85. package/components/input/demo/index.md +48 -32
  86. package/components/input/demo/index.min.js +909 -247
  87. package/components/input/demo/readme.html +16 -9
  88. package/components/input/demo/readme.md +5 -2
  89. package/components/input/dist/auro-input.d.ts +3 -3
  90. package/components/input/dist/base-input.d.ts +38 -10
  91. package/components/input/dist/buttonVersion.d.ts +1 -1
  92. package/components/input/dist/iconVersion.d.ts +1 -1
  93. package/components/input/dist/index.js +908 -246
  94. package/components/input/dist/registered.js +908 -246
  95. package/components/layoutElement/dist/index.js +13 -10
  96. package/components/menu/demo/api.html +32 -10
  97. package/components/menu/demo/api.md +69 -8
  98. package/components/menu/demo/api.min.js +239 -48
  99. package/components/menu/demo/index.html +16 -10
  100. package/components/menu/demo/index.min.js +239 -48
  101. package/components/menu/demo/readme.html +16 -9
  102. package/components/menu/dist/auro-menu.d.ts +41 -7
  103. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  104. package/components/menu/dist/iconVersion.d.ts +1 -1
  105. package/components/menu/dist/index.js +238 -47
  106. package/components/menu/dist/registered.js +238 -47
  107. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  108. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  109. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  110. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  111. package/components/radio/demo/api.html +16 -10
  112. package/components/radio/demo/api.md +39 -9
  113. package/components/radio/demo/api.min.js +91 -93
  114. package/components/radio/demo/index.html +16 -10
  115. package/components/radio/demo/index.min.js +91 -93
  116. package/components/radio/demo/readme.html +16 -9
  117. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  118. package/components/radio/dist/auro-radio.d.ts +9 -12
  119. package/components/radio/dist/index.js +90 -92
  120. package/components/radio/dist/registered.js +90 -92
  121. package/components/select/demo/api.html +16 -10
  122. package/components/select/demo/api.js +0 -2
  123. package/components/select/demo/api.md +150 -121
  124. package/components/select/demo/api.min.js +2184 -704
  125. package/components/select/demo/index.html +17 -11
  126. package/components/select/demo/index.md +1066 -259
  127. package/components/select/demo/index.min.js +2186 -694
  128. package/components/select/demo/readme.html +16 -9
  129. package/components/select/dist/auro-select.d.ts +59 -21
  130. package/components/select/dist/index.js +2107 -711
  131. package/components/select/dist/registered.js +2107 -711
  132. package/package.json +31 -28
  133. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  134. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
  135. /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
  136. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  137. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  138. /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
  139. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  140. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  141. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  142. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  143. /package/components/menu/dist/styles/{tokens-css.d.ts → default/color-menu-css.d.ts} +0 -0
package/components/dropdown/demo/index.html CHANGED
@@ -16,18 +16,24 @@
16
16
  <head>
17
17
  <meta charset="UTF-8" />
18
18
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-dropdown custom element</title>
20
- <link
21
- rel="stylesheet"
22
- type="text/css"
23
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
- />
25
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
19
+ <title>Auro Web Component Demo | auro-dropdown</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-dropdown's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
27
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
- </head>
36
+ </head>
31
37
  <body class="auro-markdown">
32
38
  <main></main>
33
39
 
package/components/dropdown/demo/index.md CHANGED
@@ -36,135 +36,18 @@ To meet our accessibility requirement, all uses of `auro-dropdown` should have a
36
36
 
37
37
  Not including one of the above options will result in your UI being non-compliant with Alaska's accessibility policies.
38
38
 
39
- ## Classic Layouts
40
-
41
- This first common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `aria-label` attribute is used to define a string value that labels an interactive element.
42
-
43
- <div class="exampleWrapper">
44
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/common.html) -->
45
- <!-- The below content is automatically added from ./../apiExamples/common.html -->
46
- <auro-dropdown id="common" common aria-label="Label content for screen reader">
47
- <div style="padding: var(--ds-size-150);">
48
- Lorem ipsum solar
49
- <br />
50
- <auro-button onclick="document.querySelector('#common').hide()">
51
- Dismiss Dropdown
52
- </auro-button>
53
- </div>
54
- <span slot="helpText">
55
- Help text
56
- </span>
57
- <div slot="trigger">
58
- Trigger
59
- </div>
60
- </auro-dropdown>
61
- <!-- AURO-GENERATED-CONTENT:END -->
62
- </div>
63
- <div class="exampleWrapper--ondark" aria-hidden>
64
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommon.html) -->
65
- <!-- The below content is automatically added from ./../apiExamples/onDarkCommon.html -->
66
- <auro-dropdown onDark common id="commonOnDark" aria-label="Label content for screen reader">
67
- <div style="padding: var(--ds-size-150);">
68
- Lorem ipsum solar
69
- <br />
70
- <auro-button onclick="document.querySelector('#commonOnDark').hide()">
71
- Dismiss Dropdown
72
- </auro-button>
73
- </div>
74
- <span slot="helpText">
75
- Help text
76
- </span>
77
- <div slot="trigger">
78
- Trigger
79
- </div>
80
- </auro-dropdown>
81
- <!-- AURO-GENERATED-CONTENT:END -->
82
- </div>
83
-
84
- ## Emphasized Layouts
85
-
86
- <div class="exampleWrapper--ondark">
87
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
88
- <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
89
- <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" ondark>
90
- Lorem ipsum solar
91
- <div slot="trigger">
92
- Trigger
93
- </div>
94
- <span slot="helpText">
95
- Help text - Lorem ipsum solar lorem ipsum solar
96
- </span>
97
- </auro-dropdown>
98
- <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" ondark>
99
- Lorem ipsum solar
100
- <div slot="trigger">
101
- Trigger
102
- </div>
103
- <span slot="helpText">
104
- Help text - Lorem ipsum solar lorem ipsum solar
105
- </span>
106
- </auro-dropdown>
107
- <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" ondark>
108
- Lorem ipsum solar
109
- <div slot="trigger">
110
- Trigger
111
- </div>
112
- <span slot="helpText">
113
- Help text - Lorem ipsum solar lorem ipsum solar
114
- </span>
115
- </auro-dropdown>
116
- <!-- AURO-GENERATED-CONTENT:END -->
117
- </div>
39
+ ## Layouts
118
40
 
119
- ## Snowflake Layouts
120
-
121
- <div class="exampleWrapper--ondark">
122
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
123
- <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
124
- <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" ondark>
125
- Lorem ipsum solar
126
- <div slot="trigger">
127
- Trigger
128
- </div>
129
- <span slot="helpText">
130
- Help text - Lorem ipsum solar lorem ipsum solar
131
- </span>
132
- </auro-dropdown>
133
- <!-- AURO-GENERATED-CONTENT:END -->
134
- </div>
135
-
136
- ## Common use with auro-label
137
-
138
- This first common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `aria-label` attribute is used to define a string value that labels an interactive element.
41
+ ### Classic
139
42
 
140
43
  <div class="exampleWrapper">
141
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/common.html) -->
142
- <!-- The below content is automatically added from ./../apiExamples/common.html -->
143
- <auro-dropdown id="common" common aria-label="Label content for screen reader">
144
- <div style="padding: var(--ds-size-150);">
145
- Lorem ipsum solar
146
- <br />
147
- <auro-button onclick="document.querySelector('#common').hide()">
148
- Dismiss Dropdown
149
- </auro-button>
150
- </div>
151
- <span slot="helpText">
152
- Help text
153
- </span>
154
- <div slot="trigger">
155
- Trigger
156
- </div>
157
- </auro-dropdown>
158
- <!-- AURO-GENERATED-CONTENT:END -->
159
- </div>
160
- <div class="exampleWrapper--ondark" aria-hidden>
161
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommon.html) -->
162
- <!-- The below content is automatically added from ./../apiExamples/onDarkCommon.html -->
163
- <auro-dropdown onDark common id="commonOnDark" aria-label="Label content for screen reader">
44
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
45
+ <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
46
+ <auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
164
47
  <div style="padding: var(--ds-size-150);">
165
48
  Lorem ipsum solar
166
49
  <br />
167
- <auro-button onclick="document.querySelector('#commonOnDark').hide()">
50
+ <auro-button onclick="document.querySelector('#classic').hide()">
168
51
  Dismiss Dropdown
169
52
  </auro-button>
170
53
  </div>
@@ -179,15 +62,15 @@ This first common example uses the default `auro-dropdown` element with the attr
179
62
  </div>
180
63
  <auro-accordion alignRight>
181
64
  <span slot="trigger">See code</span>
182
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/common.html) -->
183
- <!-- The below code snippet is automatically added from ./../apiExamples/common.html -->
65
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/basic.html) -->
66
+ <!-- The below code snippet is automatically added from ./../apiExamples/classic/basic.html -->
184
67
 
185
68
  ```html
186
- <auro-dropdown id="common" common aria-label="Label content for screen reader">
69
+ <auro-dropdown id="classic" layout="classic" shape="classic" size="lg" chevron aria-label="Label content for screen reader">
187
70
  <div style="padding: var(--ds-size-150);">
188
71
  Lorem ipsum solar
189
72
  <br />
190
- <auro-button onclick="document.querySelector('#common').hide()">
73
+ <auro-button onclick="document.querySelector('#classic').hide()">
191
74
  Dismiss Dropdown
192
75
  </auro-button>
193
76
  </div>
@@ -200,70 +83,21 @@ This first common example uses the default `auro-dropdown` element with the attr
200
83
  </auro-dropdown>
201
84
  ```
202
85
  <!-- AURO-GENERATED-CONTENT:END -->
203
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommon.html) -->
204
- <!-- The below content is automatically added from ./../apiExamples/onDarkCommon.html -->
205
- <auro-dropdown onDark common id="commonOnDark" aria-label="Label content for screen reader">
206
- <div style="padding: var(--ds-size-150);">
207
- Lorem ipsum solar
208
- <br />
209
- <auro-button onclick="document.querySelector('#commonOnDark').hide()">
210
- Dismiss Dropdown
211
- </auro-button>
212
- </div>
213
- <span slot="helpText">
214
- Help text
215
- </span>
216
- <div slot="trigger">
217
- Trigger
218
- </div>
219
- </auro-dropdown>
220
- <!-- AURO-GENERATED-CONTENT:END -->
221
86
  </auro-accordion>
222
-
223
- ## Common use using the label content slot
224
-
225
- This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the `slot` content container to define a string value that labels the interactive element.
226
-
227
- <div class="exampleWrapper">
228
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/commonSlot.html) -->
229
- <!-- The below content is automatically added from ./../apiExamples/commonSlot.html -->
230
- <auro-dropdown id="commonSlot" common>
231
- <div style="padding: var(--ds-size-150);">
232
- Lorem ipsum solar
233
- <br />
234
- <auro-button onclick="document.querySelector('#commonSlot').hide()">
235
- Dismiss Dropdown
236
- </auro-button>
237
- </div>
238
- <span slot="helpText">
239
- Help text
240
- </span>
241
- <span slot="label">
242
- Element label (default text will be read by screen reader)
243
- </span>
244
- <div slot="trigger">
245
- Trigger
246
- </div>
247
- </auro-dropdown>
248
- <!-- AURO-GENERATED-CONTENT:END -->
249
- </div>
250
- <div class="exampleWrapper--ondark" aria-hidden>
251
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommonSlot.html) -->
252
- <!-- The below content is automatically added from ./../apiExamples/onDarkCommonSlot.html -->
253
- <auro-dropdown onDark common id="commonSlotOnDark">
87
+ <div class="exampleWrapper--ondark">
88
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic-ondark.html) -->
89
+ <!-- The below content is automatically added from ./../apiExamples/classic/basic-ondark.html -->
90
+ <auro-dropdown onDark layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
254
91
  <div style="padding: var(--ds-size-150);">
255
92
  Lorem ipsum solar
256
93
  <br />
257
- <auro-button onclick="document.querySelector('#commonSlotOnDark').hide()">
94
+ <auro-button onclick="document.querySelector('#classicOnDark').hide()">
258
95
  Dismiss Dropdown
259
96
  </auro-button>
260
97
  </div>
261
98
  <span slot="helpText">
262
99
  Help text
263
100
  </span>
264
- <span slot="label">
265
- Element label (default text will be read by screen reader)
266
- </span>
267
101
  <div slot="trigger">
268
102
  Trigger
269
103
  </div>
@@ -272,238 +106,135 @@ This common example uses the default `auro-dropdown` element with the attributes
272
106
  </div>
273
107
  <auro-accordion alignRight>
274
108
  <span slot="trigger">See code</span>
275
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/commonSlot.html) -->
276
- <!-- The below code snippet is automatically added from ./../apiExamples/commonSlot.html -->
109
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/classic/basic-ondark.html) -->
110
+ <!-- The below code snippet is automatically added from ./../apiExamples/classic/basic-ondark.html -->
277
111
 
278
112
  ```html
279
- <auro-dropdown id="commonSlot" common>
113
+ <auro-dropdown onDark layout="classic" shape="classic" size="lg" id="classicOnDark" chevron aria-label="Label content for screen reader">
280
114
  <div style="padding: var(--ds-size-150);">
281
115
  Lorem ipsum solar
282
116
  <br />
283
- <auro-button onclick="document.querySelector('#commonSlot').hide()">
117
+ <auro-button onclick="document.querySelector('#classicOnDark').hide()">
284
118
  Dismiss Dropdown
285
119
  </auro-button>
286
120
  </div>
287
121
  <span slot="helpText">
288
122
  Help text
289
123
  </span>
290
- <span slot="label">
291
- Element label (default text will be read by screen reader)
292
- </span>
293
124
  <div slot="trigger">
294
125
  Trigger
295
126
  </div>
296
127
  </auro-dropdown>
297
128
  ```
298
129
  <!-- AURO-GENERATED-CONTENT:END -->
299
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommonSlot.html) -->
300
- <!-- The below content is automatically added from ./../apiExamples/onDarkCommonSlot.html -->
301
- <auro-dropdown onDark common id="commonSlotOnDark">
302
- <div style="padding: var(--ds-size-150);">
303
- Lorem ipsum solar
304
- <br />
305
- <auro-button onclick="document.querySelector('#commonSlotOnDark').hide()">
306
- Dismiss Dropdown
307
- </auro-button>
308
- </div>
309
- <span slot="helpText">
310
- Help text
311
- </span>
312
- <span slot="label">
313
- Element label (default text will be read by screen reader)
314
- </span>
315
- <div slot="trigger">
316
- Trigger
317
- </div>
318
- </auro-dropdown>
319
- <!-- AURO-GENERATED-CONTENT:END -->
320
130
  </auro-accordion>
321
131
 
322
- ## Common use with popover content wider than the trigger
132
+ ### Emphasized
323
133
 
324
- This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally the trigger is full width of the containing element and the popover content is set to a width wider than the trigger.
134
+ Only supports `ondark`.
325
135
 
326
- <div class="exampleWrapper">
327
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/widerPopover.html) -->
328
- <!-- The below content is automatically added from ./../apiExamples/widerPopover.html -->
329
- <div style="width: 250px;">
330
- <auro-dropdown common aria-label="Label content for screen reader">
331
- <div style="padding: var(--ds-size-150); width: 500px;">
332
- This is special content.
333
- </div>
334
- <span slot="helpText">
335
- Help text
336
- </span>
337
- <div slot="trigger">
338
- Trigger
339
- </div>
340
- </auro-dropdown>
341
- </div>
342
- <!-- AURO-GENERATED-CONTENT:END -->
343
- </div>
344
- <auro-accordion alignRight>
345
- <span slot="trigger">See code</span>
346
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/widerPopover.html) -->
347
- <!-- The below code snippet is automatically added from ./../apiExamples/widerPopover.html -->
348
-
349
- ```html
350
- <div style="width: 250px;">
351
- <auro-dropdown common aria-label="Label content for screen reader">
352
- <div style="padding: var(--ds-size-150); width: 500px;">
353
- This is special content.
136
+ <div class="exampleWrapper--ondark">
137
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
138
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
139
+ <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" ondark>
140
+ Lorem ipsum solar
141
+ <div slot="trigger">
142
+ Trigger
354
143
  </div>
355
144
  <span slot="helpText">
356
- Help text
145
+ Help text - Lorem ipsum solar lorem ipsum solar
357
146
  </span>
147
+ </auro-dropdown>
148
+ <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" ondark>
149
+ Lorem ipsum solar
358
150
  <div slot="trigger">
359
151
  Trigger
360
152
  </div>
361
- </auro-dropdown>
362
- </div>
363
- ```
364
- <!-- AURO-GENERATED-CONTENT:END -->
365
- </auro-accordion>
366
-
367
- ## Common use with popover width matching the trigger
368
-
369
- This common example uses the default `auro-dropdown` element with the attributes of `bordered` `rounded` `inset` `toggle` and `chevron`. Additionally `matchWidth` attribute is used to make the popover match the width of the trigger.
370
-
371
- <div class="exampleWrapper">
372
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/commonMatchWidth.html) -->
373
- <!-- The below content is automatically added from ./../apiExamples/commonMatchWidth.html -->
374
- <auro-dropdown id="common" common fluid matchWidth aria-label="Label content for screen reader">
375
- <div style="padding: var(--ds-size-150);">
376
- Lorem ipsum solar
377
- <br />
378
- <auro-button onclick="document.querySelector('#common').hide()">
379
- Dismiss Dropdown
380
- </auro-button>
381
- </div>
382
153
  <span slot="helpText">
383
- Help text
154
+ Help text - Lorem ipsum solar lorem ipsum solar
384
155
  </span>
156
+ </auro-dropdown>
157
+ <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" ondark>
158
+ Lorem ipsum solar
385
159
  <div slot="trigger">
386
160
  Trigger
387
161
  </div>
162
+ <span slot="helpText">
163
+ Help text - Lorem ipsum solar lorem ipsum solar
164
+ </span>
388
165
  </auro-dropdown>
389
166
  <!-- AURO-GENERATED-CONTENT:END -->
390
- </div>
167
+ </div>
391
168
  <auro-accordion alignRight>
392
169
  <span slot="trigger">See code</span>
393
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/commonMatchWidth.html) -->
394
- <!-- The below code snippet is automatically added from ./../apiExamples/commonMatchWidth.html -->
170
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
171
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
395
172
 
396
173
  ```html
397
- <auro-dropdown id="common" common fluid matchWidth aria-label="Label content for screen reader">
398
- <div style="padding: var(--ds-size-150);">
399
- Lorem ipsum solar
400
- <br />
401
- <auro-button onclick="document.querySelector('#common').hide()">
402
- Dismiss Dropdown
403
- </auro-button>
174
+ <auro-dropdown aria-label="custom label" shape="pill" size="xl" layout="emphasized" style="width: 249px;" ondark>
175
+ Lorem ipsum solar
176
+ <div slot="trigger">
177
+ Trigger
404
178
  </div>
405
179
  <span slot="helpText">
406
- Help text
180
+ Help text - Lorem ipsum solar lorem ipsum solar
181
+ </span>
182
+ </auro-dropdown>
183
+ <auro-dropdown aria-label="custom label" shape="pill-left" size="xl" layout="emphasized" style="width: 249px;" ondark>
184
+ Lorem ipsum solar
185
+ <div slot="trigger">
186
+ Trigger
187
+ </div>
188
+ <span slot="helpText">
189
+ Help text - Lorem ipsum solar lorem ipsum solar
407
190
  </span>
191
+ </auro-dropdown>
192
+ <auro-dropdown aria-label="custom label" shape="pill-right" size="xl" layout="emphasized" style="width: 249px;" ondark>
193
+ Lorem ipsum solar
408
194
  <div slot="trigger">
409
195
  Trigger
410
196
  </div>
197
+ <span slot="helpText">
198
+ Help text - Lorem ipsum solar lorem ipsum solar
199
+ </span>
411
200
  </auro-dropdown>
412
201
  ```
413
202
  <!-- AURO-GENERATED-CONTENT:END -->
414
203
  </auro-accordion>
415
204
 
416
- ## Common use with its width matching the trigger
205
+ ### Snowflake
417
206
 
418
- To make the dropdown to be just big as the trigger's content, style the `auro-dropdown` width `display: inline-block`.
207
+ Only supports `ondark`.
419
208
 
420
- <div class="exampleWrapper">
421
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inline.html) -->
422
- <!-- The below content is automatically added from ./../apiExamples/inline.html -->
423
- <table style="text-align: center;">
424
- <thead>
425
- <tr>
426
- <td>Icon Only</td>
427
- <td>Text Only</td>
428
- <td>Text with Icon</td>
429
- </tr>
430
- </thead>
431
- <tr>
432
- <td>
433
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
434
- Icon Only Dropdown
435
- <div slot="trigger">
436
- <auro-icon category="interface" name="arrow-down"></auro-icon>
437
- </div>
438
- </auro-dropdown>
439
- </td>
440
- <td>
441
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
442
- Text Only Dropdown
443
- <div slot="trigger">
444
- Trigger Text
445
- </div>
446
- </auro-dropdown>
447
- </td>
448
- <td>
449
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
450
- Icon and Text Dropdown
451
- <div slot="trigger">
452
- <div style="white-space:nowrap">
453
- Trigger Text
454
- <auro-icon category="interface" name="arrow-down"></auro-icon>
455
- </div>
456
- </div>
457
- </auro-dropdown>
458
- </td>
459
- </tr>
460
- </table>
209
+ <div class="exampleWrapper--ondark">
210
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
211
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
212
+ <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" ondark>
213
+ Lorem ipsum solar
214
+ <div slot="trigger">
215
+ Trigger
216
+ </div>
217
+ <span slot="helpText">
218
+ Help text - Lorem ipsum solar lorem ipsum solar
219
+ </span>
220
+ </auro-dropdown>
461
221
  <!-- AURO-GENERATED-CONTENT:END -->
462
- </div>
222
+ </div>
463
223
  <auro-accordion alignRight>
464
224
  <span slot="trigger">See code</span>
465
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inline.html) -->
466
- <!-- The below code snippet is automatically added from ./../apiExamples/inline.html -->
225
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
226
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
467
227
 
468
228
  ```html
469
- <table style="text-align: center;">
470
- <thead>
471
- <tr>
472
- <td>Icon Only</td>
473
- <td>Text Only</td>
474
- <td>Text with Icon</td>
475
- </tr>
476
- </thead>
477
- <tr>
478
- <td>
479
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
480
- Icon Only Dropdown
481
- <div slot="trigger">
482
- <auro-icon category="interface" name="arrow-down"></auro-icon>
483
- </div>
484
- </auro-dropdown>
485
- </td>
486
- <td>
487
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
488
- Text Only Dropdown
489
- <div slot="trigger">
490
- Trigger Text
491
- </div>
492
- </auro-dropdown>
493
- </td>
494
- <td>
495
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
496
- Icon and Text Dropdown
497
- <div slot="trigger">
498
- <div style="white-space:nowrap">
499
- Trigger Text
500
- <auro-icon category="interface" name="arrow-down"></auro-icon>
501
- </div>
502
- </div>
503
- </auro-dropdown>
504
- </td>
505
- </tr>
506
- </table>
229
+ <auro-dropdown aria-label="custom label" shape="snowflake" size="lg" layout="snowflake" style="width: 249px;" ondark>
230
+ Lorem ipsum solar
231
+ <div slot="trigger">
232
+ Trigger
233
+ </div>
234
+ <span slot="helpText">
235
+ Help text - Lorem ipsum solar lorem ipsum solar
236
+ </span>
237
+ </auro-dropdown>
507
238
  ```
508
239
  <!-- AURO-GENERATED-CONTENT:END -->
509
240
  </auro-accordion>
@@ -516,7 +247,7 @@ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` e
516
247
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen.html) -->
517
248
  <!-- The below content is automatically added from ./../apiExamples/fullscreen.html -->
518
249
  <h3>Never fullscreen</h3>
519
- <auro-dropdown id="common-never-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
250
+ <auro-dropdown id="common-never-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
520
251
  <div style="padding: var(--ds-size-150);">
521
252
  Lorem ipsum solar
522
253
  <br />
@@ -532,7 +263,7 @@ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` e
532
263
  </div>
533
264
  </auro-dropdown>
534
265
  <h3>Always fullscreen</h3>
535
- <auro-dropdown id="common-always-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
266
+ <auro-dropdown id="common-always-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
536
267
  <div style="padding: var(--ds-size-150);">
537
268
  Lorem ipsum solar
538
269
  <br />
@@ -556,7 +287,7 @@ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` e
556
287
 
557
288
  ```html
558
289
  <h3>Never fullscreen</h3>
559
- <auro-dropdown id="common-never-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
290
+ <auro-dropdown id="common-never-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="disabled">
560
291
  <div style="padding: var(--ds-size-150);">
561
292
  Lorem ipsum solar
562
293
  <br />
@@ -572,7 +303,7 @@ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` e
572
303
  </div>
573
304
  </auro-dropdown>
574
305
  <h3>Always fullscreen</h3>
575
- <auro-dropdown id="common-always-fullscreen" common aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
306
+ <auro-dropdown id="common-always-fullscreen" layout="classic" shape="classic" size="lg" aria-label="Label content for screen reader" fullscreenBreakpoint="xl">
576
307
  <div style="padding: var(--ds-size-150);">
577
308
  Lorem ipsum solar
578
309
  <br />
@@ -602,6 +333,5 @@ The dropdown can be opened with the following actions:
602
333
  The dropdown can be closed with the following actions:
603
334
 
604
335
  1. Clicking anywhere in the view outside of the dropdown.
605
- 1. Clicking on the trigger when the `toggle` attribute is used.
606
336
  1. Using the `esc` key.
607
337
  1. Programmatically via another control in the UI calling the `hide()` method (see api).