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

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 (146) 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 +74 -46
  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 +74 -46
  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 +73 -45
  18. package/components/checkbox/dist/registered.js +73 -45
  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 +3148 -929
  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 +3148 -929
  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 +2895 -816
  28. package/components/combobox/dist/registered.js +2895 -816
  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 +3413 -729
  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 +3413 -729
  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 -732
  42. package/components/counter/dist/registered.js +3416 -732
  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 +7096 -3260
  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 +7096 -3260
  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 +6810 -2974
  56. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  57. package/components/datepicker/dist/registered.js +6810 -2974
  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 +450 -261
  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 +450 -261
  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 +449 -260
  68. package/components/dropdown/dist/registered.js +449 -260
  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/auro-helptext.d.ts +0 -2
  79. package/components/helptext/dist/index.js +3 -5
  80. package/components/helptext/dist/registered.js +3 -5
  81. package/components/input/README.md +5 -2
  82. package/components/input/demo/api.html +16 -10
  83. package/components/input/demo/api.md +228 -130
  84. package/components/input/demo/api.min.js +908 -248
  85. package/components/input/demo/index.html +16 -10
  86. package/components/input/demo/index.md +48 -32
  87. package/components/input/demo/index.min.js +908 -248
  88. package/components/input/demo/readme.html +16 -9
  89. package/components/input/demo/readme.md +5 -2
  90. package/components/input/dist/auro-input.d.ts +3 -3
  91. package/components/input/dist/base-input.d.ts +38 -10
  92. package/components/input/dist/buttonVersion.d.ts +1 -1
  93. package/components/input/dist/iconVersion.d.ts +1 -1
  94. package/components/input/dist/index.js +907 -247
  95. package/components/input/dist/registered.js +907 -247
  96. package/components/layoutElement/dist/index.js +11 -8
  97. package/components/layoutElement/dist/registered.js +97 -0
  98. package/components/menu/demo/api.html +17 -10
  99. package/components/menu/demo/api.md +65 -8
  100. package/components/menu/demo/api.min.js +298 -63
  101. package/components/menu/demo/index.html +16 -10
  102. package/components/menu/demo/index.min.js +298 -63
  103. package/components/menu/demo/readme.html +16 -9
  104. package/components/menu/dist/auro-menu.d.ts +53 -7
  105. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  106. package/components/menu/dist/iconVersion.d.ts +1 -1
  107. package/components/menu/dist/index.js +283 -48
  108. package/components/menu/dist/registered.js +283 -48
  109. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  110. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  111. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  112. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  113. package/components/menu/dist/styles/shapeSize-css.d.ts +2 -0
  114. package/components/radio/demo/api.html +16 -10
  115. package/components/radio/demo/api.md +39 -9
  116. package/components/radio/demo/api.min.js +92 -96
  117. package/components/radio/demo/index.html +16 -10
  118. package/components/radio/demo/index.min.js +92 -96
  119. package/components/radio/demo/readme.html +16 -9
  120. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  121. package/components/radio/dist/auro-radio.d.ts +9 -12
  122. package/components/radio/dist/index.js +91 -95
  123. package/components/radio/dist/registered.js +91 -95
  124. package/components/select/demo/api.html +16 -10
  125. package/components/select/demo/api.js +0 -2
  126. package/components/select/demo/api.md +150 -121
  127. package/components/select/demo/api.min.js +2213 -693
  128. package/components/select/demo/index.html +17 -11
  129. package/components/select/demo/index.md +1066 -259
  130. package/components/select/demo/index.min.js +2214 -682
  131. package/components/select/demo/readme.html +16 -9
  132. package/components/select/dist/auro-select.d.ts +59 -21
  133. package/components/select/dist/index.js +2108 -716
  134. package/components/select/dist/registered.js +2108 -716
  135. package/package.json +31 -28
  136. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  137. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
  138. /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
  139. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  140. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  141. /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
  142. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  143. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  144. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  145. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{tokens-css.d.ts → default/color-menu-css.d.ts} +0 -0
package/components/counter/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-counter 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-counter</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-counter'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
 
@@ -50,5 +56,6 @@
50
56
  <!-- If additional elements are needed for the demo, add them here. -->
51
57
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
52
58
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
59
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/dist/auro-icon__bundled.js" type="module"></script>
53
60
  </body>
54
61
  </html>
package/components/counter/demo/index.md CHANGED
@@ -97,6 +97,88 @@ Adding a description provides additional context to users. The description appea
97
97
  <!-- AURO-GENERATED-CONTENT:END -->
98
98
  </auro-accordion>
99
99
 
100
+ ### Counter with Help Text
101
+
102
+ Help text is supported with counters, and can be added by targetting the `helptext` slot.
103
+
104
+ <div class="exampleWrapper">
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-helptext.html) -->
106
+ <!-- The below content is automatically added from ./../apiExamples/counter-helptext.html -->
107
+ <auro-counter>
108
+ Adults
109
+ <span slot="helpText">This is help text for the counter</span>
110
+ </auro-counter>
111
+ <!-- AURO-GENERATED-CONTENT:END -->
112
+ </div>
113
+ <div class="exampleWrapper--ondark" aria-hidden>
114
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-helptext.html) -->
115
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-helptext.html -->
116
+ <auro-counter ondark>
117
+ Adults
118
+ <span slot="helpText">This is help text for the counter</span>
119
+ </auro-counter>
120
+ <!-- AURO-GENERATED-CONTENT:END -->
121
+ </div>
122
+ <auro-accordion alignRight>
123
+ <span slot="trigger">See code</span>
124
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-helptext.html) -->
125
+ <!-- The below code snippet is automatically added from ./../apiExamples/counter-helptext.html -->
126
+
127
+ ```html
128
+ <auro-counter>
129
+ Adults
130
+ <span slot="helpText">This is help text for the counter</span>
131
+ </auro-counter>
132
+ ```
133
+ <!-- AURO-GENERATED-CONTENT:END -->
134
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-helptext.html) -->
135
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-helptext.html -->
136
+ <auro-counter ondark>
137
+ Adults
138
+ <span slot="helpText">This is help text for the counter</span>
139
+ </auro-counter>
140
+ <!-- AURO-GENERATED-CONTENT:END -->
141
+ </auro-accordion>
142
+
143
+ ### Counter with Custom Error
144
+
145
+ A custom error can be set on the counter by adding the `error` attribute with the desired message.
146
+
147
+ <div class="exampleWrapper">
148
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
149
+ <!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
150
+ <auro-counter error="There is an error with the counter">
151
+ Adults
152
+ </auro-counter>
153
+ <!-- AURO-GENERATED-CONTENT:END -->
154
+ </div>
155
+ <div class="exampleWrapper--ondark" aria-hidden>
156
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
157
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
158
+ <auro-counter ondark error="There is an error with the counter">
159
+ Adults
160
+ </auro-counter>
161
+ <!-- AURO-GENERATED-CONTENT:END -->
162
+ </div>
163
+ <auro-accordion alignRight>
164
+ <span slot="trigger">See code</span>
165
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-error.html) -->
166
+ <!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
167
+
168
+ ```html
169
+ <auro-counter error="There is an error with the counter">
170
+ Adults
171
+ </auro-counter>
172
+ ```
173
+ <!-- AURO-GENERATED-CONTENT:END -->
174
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
175
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
176
+ <auro-counter ondark error="There is an error with the counter">
177
+ Adults
178
+ </auro-counter>
179
+ <!-- AURO-GENERATED-CONTENT:END -->
180
+ </auro-accordion>
181
+
100
182
  ### Basic Counter Group
101
183
 
102
184
  Counter groups allow you to manage multiple related counters together. This is useful when you need to collect multiple quantities that are related, such as different passenger types:
@@ -170,7 +252,9 @@ Counter groups allow you to manage multiple related counters together. This is u
170
252
 
171
253
  ### Dropdown Counter Group
172
254
 
173
- The dropdown mode provides a more compact interface, ideal for forms where space is limited. It collapses the counters into a dropdown that expands when clicked:
255
+ The dropdown mode provides a more compact interface, ideal for forms where space is limited. It collapses the counters into a dropdown that expands when clicked.
256
+
257
+ When using a dropdown, an additional layout, `snowflake`, is available for use:
174
258
 
175
259
  <div class="exampleWrapper">
176
260
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-basic.html) -->
@@ -206,39 +290,106 @@ The dropdown mode provides a more compact interface, ideal for forms where space
206
290
  </auro-counter-group>
207
291
  <!-- AURO-GENERATED-CONTENT:END -->
208
292
  </div>
293
+ <div class="exampleWrapper">
294
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
295
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
296
+ <!-- Example of counter-group properties -->
297
+ <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
298
+ <div slot="bib.fullscreen.headline">Group fullscreen label</div>
299
+ <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
300
+ <div slot="label">Snowflake Dropdown Group</div>
301
+ <div slot="helpText">Total must be between 2-10</div>
302
+ <auro-counter>
303
+ Counter 1
304
+ </auro-counter>
305
+ <auro-counter>
306
+ Counter 2
307
+ </auro-counter>
308
+ </auro-counter-group>
309
+ <!-- AURO-GENERATED-CONTENT:END -->
310
+ </div>
311
+ <div class="exampleWrapper--ondark">
312
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark-dropdown-snowflake.html) -->
313
+ <!-- The below content is automatically added from ./../apiExamples/onDark-dropdown-snowflake.html -->
314
+ <!-- Example of counter-group properties -->
315
+ <auro-counter-group max="10" min="2" isDropdown layout="snowflake" ondark>
316
+ <div slot="bib.fullscreen.headline">Group fullscreen label</div>
317
+ <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
318
+ <div slot="label">Snowflake Dropdown Group</div>
319
+ <div slot="helpText">Total must be between 2-10</div>
320
+ <auro-counter>
321
+ Counter 1
322
+ </auro-counter>
323
+ <auro-counter>
324
+ Counter 2
325
+ </auro-counter>
326
+ </auro-counter-group>
327
+ <!-- AURO-GENERATED-CONTENT:END -->
328
+ </div>
209
329
  <auro-accordion alignRight>
210
330
  <span slot="trigger">See code</span>
211
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-basic.html) -->
212
- <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-basic.html -->
213
-
214
- ```html
215
- <auro-counter-group isDropdown>
216
- <div slot="bib.fullscreen.headline">Passengers</div>
217
- <div slot="label">Passengers</div>
218
- <auro-counter>
219
- Adults
220
- <span slot="description">18 years or older</span>
221
- </auro-counter>
222
- <auro-counter>
223
- Children
224
- <span slot="description">2-17 years</span>
225
- </auro-counter>
226
- </auro-counter-group>
227
- ```
228
- <!-- AURO-GENERATED-CONTENT:END -->
229
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDropdown.html) -->
230
- <!-- The below content is automatically added from ./../apiExamples/onDarkDropdown.html -->
231
- <auro-counter-group onDark isDropdown>
232
- <div slot="bib.fullscreen.headline">Passengers</div>
233
- <div slot="label">Passengers</div>
234
- <auro-counter>
235
- Adults
236
- <span slot="description">18 years or older</span>
237
- </auro-counter>
238
- <auro-counter>
239
- Children
240
- <span slot="description">2-17 years</span>
241
- </auro-counter>
242
- </auro-counter-group>
243
- <!-- AURO-GENERATED-CONTENT:END -->
331
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-basic.html) -->
332
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-basic.html -->
333
+ ```html
334
+ <auro-counter-group isDropdown>
335
+ <div slot="bib.fullscreen.headline">Passengers</div>
336
+ <div slot="label">Passengers</div>
337
+ <auro-counter>
338
+ Adults
339
+ <span slot="description">18 years or older</span>
340
+ </auro-counter>
341
+ <auro-counter>
342
+ Children
343
+ <span slot="description">2-17 years</span>
344
+ </auro-counter>
345
+ </auro-counter-group>
346
+ ```
347
+ <!-- AURO-GENERATED-CONTENT:END -->
348
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDropdown.html) -->
349
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDropdown.html -->
350
+ <auro-counter-group onDark isDropdown>
351
+ <div slot="bib.fullscreen.headline">Passengers</div>
352
+ <div slot="label">Passengers</div>
353
+ <auro-counter>
354
+ Adults
355
+ <span slot="description">18 years or older</span>
356
+ </auro-counter>
357
+ <auro-counter>
358
+ Children
359
+ <span slot="description">2-17 years</span>
360
+ </auro-counter>
361
+ </auro-counter-group>
362
+ <!-- AURO-GENERATED-CONTENT:END -->
363
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
364
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
365
+ <!-- Example of counter-group properties -->
366
+ <auro-counter-group max="10" min="2" isDropdown layout="snowflake">
367
+ <div slot="bib.fullscreen.headline">Group fullscreen label</div>
368
+ <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
369
+ <div slot="label">Snowflake Dropdown Group</div>
370
+ <div slot="helpText">Total must be between 2-10</div>
371
+ <auro-counter>
372
+ Counter 1
373
+ </auro-counter>
374
+ <auro-counter>
375
+ Counter 2
376
+ </auro-counter>
377
+ </auro-counter-group>
378
+ <!-- AURO-GENERATED-CONTENT:END -->
379
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark-dropdown-snowflake.html) -->
380
+ <!-- The below content is automatically added from ./../apiExamples/onDark-dropdown-snowflake.html -->
381
+ <!-- Example of counter-group properties -->
382
+ <auro-counter-group max="10" min="2" isDropdown layout="snowflake" ondark>
383
+ <div slot="bib.fullscreen.headline">Group fullscreen label</div>
384
+ <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
385
+ <div slot="label">Snowflake Dropdown Group</div>
386
+ <div slot="helpText">Total must be between 2-10</div>
387
+ <auro-counter>
388
+ Counter 1
389
+ </auro-counter>
390
+ <auro-counter>
391
+ Counter 2
392
+ </auro-counter>
393
+ </auro-counter-group>
394
+ <!-- AURO-GENERATED-CONTENT:END -->
244
395
  </auro-accordion>