@aurodesignsystem/auro-formkit 4.0.1 → 5.0.0-rc-1002.1.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 (175) hide show
  1. package/CHANGELOG.md +193 -3
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  3. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  4. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  6. package/components/bibtemplate/dist/index.js +1184 -105
  7. package/components/bibtemplate/dist/registered.js +1184 -105
  8. package/components/checkbox/README.md +1 -1
  9. package/components/checkbox/demo/api.html +16 -10
  10. package/components/checkbox/demo/api.md +54 -19
  11. package/components/checkbox/demo/api.min.js +81 -45
  12. package/components/checkbox/demo/index.html +16 -10
  13. package/components/checkbox/demo/index.md +2 -2
  14. package/components/checkbox/demo/index.min.js +81 -45
  15. package/components/checkbox/demo/readme.html +16 -9
  16. package/components/checkbox/demo/readme.md +1 -1
  17. package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
  18. package/components/checkbox/dist/auro-checkbox.d.ts +10 -3
  19. package/components/checkbox/dist/index.js +80 -44
  20. package/components/checkbox/dist/registered.js +80 -44
  21. package/components/combobox/README.md +2 -0
  22. package/components/combobox/demo/api.html +16 -10
  23. package/components/combobox/demo/api.md +124 -7
  24. package/components/combobox/demo/api.min.js +4542 -1330
  25. package/components/combobox/demo/index.html +16 -10
  26. package/components/combobox/demo/index.md +108 -4
  27. package/components/combobox/demo/index.min.js +4542 -1330
  28. package/components/combobox/demo/readme.html +16 -9
  29. package/components/combobox/demo/readme.md +2 -0
  30. package/components/combobox/dist/auro-combobox.d.ts +81 -18
  31. package/components/combobox/dist/index.js +4588 -1520
  32. package/components/combobox/dist/registered.js +4588 -1520
  33. package/components/counter/demo/api.html +17 -10
  34. package/components/counter/demo/api.md +167 -21
  35. package/components/counter/demo/api.min.js +3621 -866
  36. package/components/counter/demo/index.html +17 -10
  37. package/components/counter/demo/index.md +191 -34
  38. package/components/counter/demo/index.min.js +3621 -866
  39. package/components/counter/demo/readme.html +16 -9
  40. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  41. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  42. package/components/counter/dist/auro-counter.d.ts +16 -0
  43. package/components/counter/dist/helptextVersion.d.ts +2 -0
  44. package/components/counter/dist/iconVersion.d.ts +1 -1
  45. package/components/counter/dist/index.js +3619 -864
  46. package/components/counter/dist/registered.js +3619 -864
  47. package/components/datepicker/README.md +2 -1
  48. package/components/datepicker/demo/api.html +16 -10
  49. package/components/datepicker/demo/api.md +80 -30
  50. package/components/datepicker/demo/api.min.js +14795 -10365
  51. package/components/datepicker/demo/index.html +16 -10
  52. package/components/datepicker/demo/index.md +96 -4
  53. package/components/datepicker/demo/index.min.js +14795 -10365
  54. package/components/datepicker/demo/readme.html +16 -9
  55. package/components/datepicker/demo/readme.md +2 -1
  56. package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
  57. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  58. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  59. package/components/datepicker/dist/index.js +14916 -10486
  60. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  61. package/components/datepicker/dist/registered.js +14916 -10486
  62. package/components/dropdown/demo/api.html +16 -10
  63. package/components/dropdown/demo/api.md +94 -262
  64. package/components/dropdown/demo/api.min.js +738 -259
  65. package/components/dropdown/demo/index.html +16 -10
  66. package/components/dropdown/demo/index.md +93 -266
  67. package/components/dropdown/demo/index.min.js +738 -259
  68. package/components/dropdown/demo/readme.html +16 -9
  69. package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
  70. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  71. package/components/dropdown/dist/index.js +710 -231
  72. package/components/dropdown/dist/registered.js +710 -231
  73. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  74. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  75. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  76. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  77. package/components/form/demo/api.html +16 -9
  78. package/components/form/demo/api.md +1 -1
  79. package/components/form/demo/api.min.js +3 -3
  80. package/components/form/demo/autocomplete.html +19 -3
  81. package/components/form/demo/index.html +16 -9
  82. package/components/form/demo/index.min.js +3 -3
  83. package/components/form/demo/readme.html +16 -9
  84. package/components/form/demo/working.html +19 -13
  85. package/components/form/dist/auro-form.d.ts +1 -1
  86. package/components/form/dist/index.js +2 -2
  87. package/components/form/dist/registered.js +2 -2
  88. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  89. package/components/helptext/dist/index.js +2 -4
  90. package/components/helptext/dist/registered.js +2 -4
  91. package/components/input/README.md +6 -2
  92. package/components/input/demo/api.html +16 -10
  93. package/components/input/demo/api.md +258 -144
  94. package/components/input/demo/api.min.js +1550 -497
  95. package/components/input/demo/index.html +17 -11
  96. package/components/input/demo/index.md +95 -27
  97. package/components/input/demo/index.min.js +1549 -496
  98. package/components/input/demo/readme.html +16 -9
  99. package/components/input/demo/readme.md +6 -2
  100. package/components/input/dist/auro-input.d.ts +139 -3
  101. package/components/input/dist/base-input.d.ts +80 -26
  102. package/components/input/dist/buttonVersion.d.ts +1 -1
  103. package/components/input/dist/iconVersion.d.ts +1 -1
  104. package/components/input/dist/index.js +1504 -451
  105. package/components/input/dist/registered.js +1504 -451
  106. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  107. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  108. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  109. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  110. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  111. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  112. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  113. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  114. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  115. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  116. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  117. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  118. package/components/layoutElement/dist/index.d.ts +2 -0
  119. package/components/layoutElement/dist/index.js +98 -0
  120. package/components/layoutElement/dist/registered.js +98 -0
  121. package/components/menu/demo/api.html +17 -10
  122. package/components/menu/demo/api.md +65 -8
  123. package/components/menu/demo/api.min.js +304 -65
  124. package/components/menu/demo/index.html +16 -10
  125. package/components/menu/demo/index.min.js +304 -65
  126. package/components/menu/demo/readme.html +16 -9
  127. package/components/menu/dist/auro-menu.d.ts +53 -7
  128. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  129. package/components/menu/dist/iconVersion.d.ts +1 -1
  130. package/components/menu/dist/index.js +289 -50
  131. package/components/menu/dist/registered.js +289 -50
  132. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  133. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  134. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  135. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  136. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  137. package/components/radio/demo/api.html +16 -10
  138. package/components/radio/demo/api.md +41 -9
  139. package/components/radio/demo/api.min.js +93 -95
  140. package/components/radio/demo/index.html +16 -10
  141. package/components/radio/demo/index.min.js +93 -95
  142. package/components/radio/demo/readme.html +16 -9
  143. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  144. package/components/radio/dist/auro-radio.d.ts +11 -12
  145. package/components/radio/dist/index.js +92 -94
  146. package/components/radio/dist/registered.js +92 -94
  147. package/components/select/README.md +1 -0
  148. package/components/select/demo/api.html +16 -10
  149. package/components/select/demo/api.js +0 -2
  150. package/components/select/demo/api.md +156 -114
  151. package/components/select/demo/api.min.js +3126 -657
  152. package/components/select/demo/index.html +17 -10
  153. package/components/select/demo/index.md +398 -62
  154. package/components/select/demo/index.min.js +3129 -648
  155. package/components/select/demo/readme.html +16 -9
  156. package/components/select/demo/readme.md +1 -0
  157. package/components/select/dist/auro-select.d.ts +173 -18
  158. package/components/select/dist/helptextVersion.d.ts +2 -0
  159. package/components/select/dist/index.js +3128 -791
  160. package/components/select/dist/registered.js +3128 -791
  161. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  162. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  163. package/package.json +33 -32
  164. package/packages/build-tools/src/postinstall.mjs +0 -12
  165. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  166. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  167. /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  168. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
  169. /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  170. /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  171. /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  172. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  173. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  174. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  175. /package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-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,38 +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
- ## Common use with auro-label
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.
39
+ ## Layouts
40
+
41
+ ### Classic
42
42
 
43
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">
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">
67
47
  <div style="padding: var(--ds-size-150);">
68
48
  Lorem ipsum solar
69
49
  <br />
70
- <auro-button onclick="document.querySelector('#commonOnDark').hide()">
50
+ <auro-button onclick="document.querySelector('#classic').hide()">
71
51
  Dismiss Dropdown
72
52
  </auro-button>
73
53
  </div>
@@ -82,15 +62,15 @@ This first common example uses the default `auro-dropdown` element with the attr
82
62
  </div>
83
63
  <auro-accordion alignRight>
84
64
  <span slot="trigger">See code</span>
85
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/common.html) -->
86
- <!-- 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 -->
87
67
 
88
68
  ```html
89
- <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">
90
70
  <div style="padding: var(--ds-size-150);">
91
71
  Lorem ipsum solar
92
72
  <br />
93
- <auro-button onclick="document.querySelector('#common').hide()">
73
+ <auro-button onclick="document.querySelector('#classic').hide()">
94
74
  Dismiss Dropdown
95
75
  </auro-button>
96
76
  </div>
@@ -103,70 +83,21 @@ This first common example uses the default `auro-dropdown` element with the attr
103
83
  </auro-dropdown>
104
84
  ```
105
85
  <!-- AURO-GENERATED-CONTENT:END -->
106
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommon.html) -->
107
- <!-- The below content is automatically added from ./../apiExamples/onDarkCommon.html -->
108
- <auro-dropdown onDark common id="commonOnDark" aria-label="Label content for screen reader">
109
- <div style="padding: var(--ds-size-150);">
110
- Lorem ipsum solar
111
- <br />
112
- <auro-button onclick="document.querySelector('#commonOnDark').hide()">
113
- Dismiss Dropdown
114
- </auro-button>
115
- </div>
116
- <span slot="helpText">
117
- Help text
118
- </span>
119
- <div slot="trigger">
120
- Trigger
121
- </div>
122
- </auro-dropdown>
123
- <!-- AURO-GENERATED-CONTENT:END -->
124
86
  </auro-accordion>
125
-
126
- ## Common use using the label content slot
127
-
128
- 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.
129
-
130
- <div class="exampleWrapper">
131
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/commonSlot.html) -->
132
- <!-- The below content is automatically added from ./../apiExamples/commonSlot.html -->
133
- <auro-dropdown id="commonSlot" common>
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">
134
91
  <div style="padding: var(--ds-size-150);">
135
92
  Lorem ipsum solar
136
93
  <br />
137
- <auro-button onclick="document.querySelector('#commonSlot').hide()">
94
+ <auro-button onclick="document.querySelector('#classicOnDark').hide()">
138
95
  Dismiss Dropdown
139
96
  </auro-button>
140
97
  </div>
141
98
  <span slot="helpText">
142
99
  Help text
143
100
  </span>
144
- <span slot="label">
145
- Element label (default text will be read by screen reader)
146
- </span>
147
- <div slot="trigger">
148
- Trigger
149
- </div>
150
- </auro-dropdown>
151
- <!-- AURO-GENERATED-CONTENT:END -->
152
- </div>
153
- <div class="exampleWrapper--ondark" aria-hidden>
154
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommonSlot.html) -->
155
- <!-- The below content is automatically added from ./../apiExamples/onDarkCommonSlot.html -->
156
- <auro-dropdown onDark common id="commonSlotOnDark">
157
- <div style="padding: var(--ds-size-150);">
158
- Lorem ipsum solar
159
- <br />
160
- <auro-button onclick="document.querySelector('#commonSlotOnDark').hide()">
161
- Dismiss Dropdown
162
- </auro-button>
163
- </div>
164
- <span slot="helpText">
165
- Help text
166
- </span>
167
- <span slot="label">
168
- Element label (default text will be read by screen reader)
169
- </span>
170
101
  <div slot="trigger">
171
102
  Trigger
172
103
  </div>
@@ -175,238 +106,135 @@ This common example uses the default `auro-dropdown` element with the attributes
175
106
  </div>
176
107
  <auro-accordion alignRight>
177
108
  <span slot="trigger">See code</span>
178
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/commonSlot.html) -->
179
- <!-- 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 -->
180
111
 
181
112
  ```html
182
- <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">
183
114
  <div style="padding: var(--ds-size-150);">
184
115
  Lorem ipsum solar
185
116
  <br />
186
- <auro-button onclick="document.querySelector('#commonSlot').hide()">
117
+ <auro-button onclick="document.querySelector('#classicOnDark').hide()">
187
118
  Dismiss Dropdown
188
119
  </auro-button>
189
120
  </div>
190
121
  <span slot="helpText">
191
122
  Help text
192
123
  </span>
193
- <span slot="label">
194
- Element label (default text will be read by screen reader)
195
- </span>
196
124
  <div slot="trigger">
197
125
  Trigger
198
126
  </div>
199
127
  </auro-dropdown>
200
128
  ```
201
129
  <!-- AURO-GENERATED-CONTENT:END -->
202
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkCommonSlot.html) -->
203
- <!-- The below content is automatically added from ./../apiExamples/onDarkCommonSlot.html -->
204
- <auro-dropdown onDark common id="commonSlotOnDark">
205
- <div style="padding: var(--ds-size-150);">
206
- Lorem ipsum solar
207
- <br />
208
- <auro-button onclick="document.querySelector('#commonSlotOnDark').hide()">
209
- Dismiss Dropdown
210
- </auro-button>
211
- </div>
212
- <span slot="helpText">
213
- Help text
214
- </span>
215
- <span slot="label">
216
- Element label (default text will be read by screen reader)
217
- </span>
218
- <div slot="trigger">
219
- Trigger
220
- </div>
221
- </auro-dropdown>
222
- <!-- AURO-GENERATED-CONTENT:END -->
223
130
  </auro-accordion>
224
131
 
225
- ## Common use with popover content wider than the trigger
132
+ ### Emphasized
226
133
 
227
- 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`.
228
135
 
229
- <div class="exampleWrapper">
230
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/widerPopover.html) -->
231
- <!-- The below content is automatically added from ./../apiExamples/widerPopover.html -->
232
- <div style="width: 250px;">
233
- <auro-dropdown common aria-label="Label content for screen reader">
234
- <div style="padding: var(--ds-size-150); width: 500px;">
235
- This is special content.
236
- </div>
237
- <span slot="helpText">
238
- Help text
239
- </span>
240
- <div slot="trigger">
241
- Trigger
242
- </div>
243
- </auro-dropdown>
244
- </div>
245
- <!-- AURO-GENERATED-CONTENT:END -->
246
- </div>
247
- <auro-accordion alignRight>
248
- <span slot="trigger">See code</span>
249
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/widerPopover.html) -->
250
- <!-- The below code snippet is automatically added from ./../apiExamples/widerPopover.html -->
251
-
252
- ```html
253
- <div style="width: 250px;">
254
- <auro-dropdown common aria-label="Label content for screen reader">
255
- <div style="padding: var(--ds-size-150); width: 500px;">
256
- 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
257
143
  </div>
258
144
  <span slot="helpText">
259
- Help text
145
+ Help text - Lorem ipsum solar lorem ipsum solar
260
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
261
150
  <div slot="trigger">
262
151
  Trigger
263
152
  </div>
264
- </auro-dropdown>
265
- </div>
266
- ```
267
- <!-- AURO-GENERATED-CONTENT:END -->
268
- </auro-accordion>
269
-
270
- ## Common use with popover width matching the trigger
271
-
272
- 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.
273
-
274
- <div class="exampleWrapper">
275
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/commonMatchWidth.html) -->
276
- <!-- The below content is automatically added from ./../apiExamples/commonMatchWidth.html -->
277
- <auro-dropdown id="common" common fluid matchWidth aria-label="Label content for screen reader">
278
- <div style="padding: var(--ds-size-150);">
279
- Lorem ipsum solar
280
- <br />
281
- <auro-button onclick="document.querySelector('#common').hide()">
282
- Dismiss Dropdown
283
- </auro-button>
284
- </div>
285
153
  <span slot="helpText">
286
- Help text
154
+ Help text - Lorem ipsum solar lorem ipsum solar
287
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
288
159
  <div slot="trigger">
289
160
  Trigger
290
161
  </div>
162
+ <span slot="helpText">
163
+ Help text - Lorem ipsum solar lorem ipsum solar
164
+ </span>
291
165
  </auro-dropdown>
292
166
  <!-- AURO-GENERATED-CONTENT:END -->
293
- </div>
167
+ </div>
294
168
  <auro-accordion alignRight>
295
169
  <span slot="trigger">See code</span>
296
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/commonMatchWidth.html) -->
297
- <!-- 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 -->
298
172
 
299
173
  ```html
300
- <auro-dropdown id="common" common fluid matchWidth aria-label="Label content for screen reader">
301
- <div style="padding: var(--ds-size-150);">
302
- Lorem ipsum solar
303
- <br />
304
- <auro-button onclick="document.querySelector('#common').hide()">
305
- Dismiss Dropdown
306
- </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
307
178
  </div>
308
179
  <span slot="helpText">
309
- Help text
180
+ Help text - Lorem ipsum solar lorem ipsum solar
310
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
311
185
  <div slot="trigger">
312
186
  Trigger
313
187
  </div>
188
+ <span slot="helpText">
189
+ Help text - Lorem ipsum solar lorem ipsum solar
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
194
+ <div slot="trigger">
195
+ Trigger
196
+ </div>
197
+ <span slot="helpText">
198
+ Help text - Lorem ipsum solar lorem ipsum solar
199
+ </span>
314
200
  </auro-dropdown>
315
201
  ```
316
202
  <!-- AURO-GENERATED-CONTENT:END -->
317
203
  </auro-accordion>
318
204
 
319
- ## Common use with its width matching the trigger
205
+ ### Snowflake
320
206
 
321
- 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`.
322
208
 
323
- <div class="exampleWrapper">
324
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/inline.html) -->
325
- <!-- The below content is automatically added from ./../apiExamples/inline.html -->
326
- <table style="text-align: center;">
327
- <thead>
328
- <tr>
329
- <td>Icon Only</td>
330
- <td>Text Only</td>
331
- <td>Text with Icon</td>
332
- </tr>
333
- </thead>
334
- <tr>
335
- <td>
336
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
337
- Icon Only Dropdown
338
- <div slot="trigger">
339
- <auro-icon category="interface" name="arrow-down"></auro-icon>
340
- </div>
341
- </auro-dropdown>
342
- </td>
343
- <td>
344
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
345
- Text Only Dropdown
346
- <div slot="trigger">
347
- Trigger Text
348
- </div>
349
- </auro-dropdown>
350
- </td>
351
- <td>
352
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
353
- Icon and Text Dropdown
354
- <div slot="trigger">
355
- <div style="white-space:nowrap">
356
- Trigger Text
357
- <auro-icon category="interface" name="arrow-down"></auro-icon>
358
- </div>
359
- </div>
360
- </auro-dropdown>
361
- </td>
362
- </tr>
363
- </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>
364
221
  <!-- AURO-GENERATED-CONTENT:END -->
365
- </div>
222
+ </div>
366
223
  <auro-accordion alignRight>
367
224
  <span slot="trigger">See code</span>
368
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/inline.html) -->
369
- <!-- 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 -->
370
227
 
371
228
  ```html
372
- <table style="text-align: center;">
373
- <thead>
374
- <tr>
375
- <td>Icon Only</td>
376
- <td>Text Only</td>
377
- <td>Text with Icon</td>
378
- </tr>
379
- </thead>
380
- <tr>
381
- <td>
382
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
383
- Icon Only Dropdown
384
- <div slot="trigger">
385
- <auro-icon category="interface" name="arrow-down"></auro-icon>
386
- </div>
387
- </auro-dropdown>
388
- </td>
389
- <td>
390
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
391
- Text Only Dropdown
392
- <div slot="trigger">
393
- Trigger Text
394
- </div>
395
- </auro-dropdown>
396
- </td>
397
- <td>
398
- <auro-dropdown aria-div="custom div" inset style="display: inline-block;">
399
- Icon and Text Dropdown
400
- <div slot="trigger">
401
- <div style="white-space:nowrap">
402
- Trigger Text
403
- <auro-icon category="interface" name="arrow-down"></auro-icon>
404
- </div>
405
- </div>
406
- </auro-dropdown>
407
- </td>
408
- </tr>
409
- </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>
410
238
  ```
411
239
  <!-- AURO-GENERATED-CONTENT:END -->
412
240
  </auro-accordion>
@@ -419,7 +247,7 @@ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` e
419
247
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/fullscreen.html) -->
420
248
  <!-- The below content is automatically added from ./../apiExamples/fullscreen.html -->
421
249
  <h3>Never fullscreen</h3>
422
- <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">
423
251
  <div style="padding: var(--ds-size-150);">
424
252
  Lorem ipsum solar
425
253
  <br />
@@ -435,7 +263,7 @@ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` e
435
263
  </div>
436
264
  </auro-dropdown>
437
265
  <h3>Always fullscreen</h3>
438
- <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">
439
267
  <div style="padding: var(--ds-size-150);">
440
268
  Lorem ipsum solar
441
269
  <br />
@@ -459,7 +287,7 @@ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` e
459
287
 
460
288
  ```html
461
289
  <h3>Never fullscreen</h3>
462
- <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">
463
291
  <div style="padding: var(--ds-size-150);">
464
292
  Lorem ipsum solar
465
293
  <br />
@@ -475,7 +303,7 @@ dropdown supports `xs`, `sm`, `md`, `lg`, `xl` and `disabled`, with `disabled` e
475
303
  </div>
476
304
  </auro-dropdown>
477
305
  <h3>Always fullscreen</h3>
478
- <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">
479
307
  <div style="padding: var(--ds-size-150);">
480
308
  Lorem ipsum solar
481
309
  <br />
@@ -505,6 +333,5 @@ The dropdown can be opened with the following actions:
505
333
  The dropdown can be closed with the following actions:
506
334
 
507
335
  1. Clicking anywhere in the view outside of the dropdown.
508
- 1. Clicking on the trigger when the `toggle` attribute is used.
509
336
  1. Using the `esc` key.
510
337
  1. Programmatically via another control in the UI calling the `hide()` method (see api).