@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/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>