@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.9 → 0.0.0-pr624.90

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 (149) 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/headerVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/index.js +1241 -94
  6. package/components/bibtemplate/dist/registered.js +1241 -94
  7. package/components/checkbox/README.md +1 -1
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +49 -15
  10. package/components/checkbox/demo/api.min.js +74 -46
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.md +2 -2
  13. package/components/checkbox/demo/index.min.js +74 -46
  14. package/components/checkbox/demo/readme.html +16 -9
  15. package/components/checkbox/demo/readme.md +1 -1
  16. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  17. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  18. package/components/checkbox/dist/index.js +73 -45
  19. package/components/checkbox/dist/registered.js +73 -45
  20. package/components/combobox/demo/api.html +16 -10
  21. package/components/combobox/demo/api.md +115 -8
  22. package/components/combobox/demo/api.min.js +3305 -1002
  23. package/components/combobox/demo/index.html +16 -10
  24. package/components/combobox/demo/index.md +8 -34
  25. package/components/combobox/demo/index.min.js +3305 -1002
  26. package/components/combobox/demo/readme.html +16 -9
  27. package/components/combobox/dist/auro-combobox.d.ts +57 -14
  28. package/components/combobox/dist/index.js +2992 -836
  29. package/components/combobox/dist/registered.js +2992 -836
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +158 -21
  32. package/components/counter/demo/api.min.js +3417 -765
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +185 -34
  35. package/components/counter/demo/index.min.js +3417 -765
  36. package/components/counter/demo/readme.html +16 -9
  37. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  38. package/components/counter/dist/auro-counter-group.d.ts +161 -11
  39. package/components/counter/dist/auro-counter.d.ts +16 -0
  40. package/components/counter/dist/helptextVersion.d.ts +2 -0
  41. package/components/counter/dist/iconVersion.d.ts +1 -1
  42. package/components/counter/dist/index.js +3420 -768
  43. package/components/counter/dist/registered.js +3420 -768
  44. package/components/datepicker/README.md +1 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +59 -28
  47. package/components/datepicker/demo/api.min.js +11956 -8070
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +75 -8
  50. package/components/datepicker/demo/index.min.js +11956 -8070
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +1 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
  54. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  55. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  56. package/components/datepicker/dist/index.js +13802 -9916
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +13802 -9916
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +82 -275
  61. package/components/dropdown/demo/api.min.js +450 -261
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +92 -362
  64. package/components/dropdown/demo/index.min.js +450 -261
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +449 -260
  69. package/components/dropdown/dist/registered.js +449 -260
  70. package/components/form/demo/api.html +16 -9
  71. package/components/form/demo/api.md +1 -1
  72. package/components/form/demo/api.min.js +3 -3
  73. package/components/form/demo/autocomplete.html +19 -3
  74. package/components/form/demo/index.html +16 -9
  75. package/components/form/demo/index.min.js +3 -3
  76. package/components/form/demo/readme.html +16 -9
  77. package/components/form/demo/working.html +19 -13
  78. package/components/form/dist/auro-form.d.ts +1 -1
  79. package/components/form/dist/index.js +2 -2
  80. package/components/form/dist/registered.js +2 -2
  81. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  82. package/components/helptext/dist/index.js +3 -5
  83. package/components/helptext/dist/registered.js +3 -5
  84. package/components/input/README.md +5 -2
  85. package/components/input/demo/api.html +16 -10
  86. package/components/input/demo/api.md +226 -132
  87. package/components/input/demo/api.min.js +1034 -297
  88. package/components/input/demo/index.html +16 -10
  89. package/components/input/demo/index.md +48 -32
  90. package/components/input/demo/index.min.js +1048 -311
  91. package/components/input/demo/readme.html +16 -9
  92. package/components/input/demo/readme.md +5 -2
  93. package/components/input/dist/auro-input.d.ts +24 -0
  94. package/components/input/dist/base-input.d.ts +45 -11
  95. package/components/input/dist/buttonVersion.d.ts +1 -1
  96. package/components/input/dist/iconVersion.d.ts +1 -1
  97. package/components/input/dist/index.js +1047 -310
  98. package/components/input/dist/registered.js +1047 -310
  99. package/components/layoutElement/dist/index.js +11 -8
  100. package/components/layoutElement/dist/registered.js +97 -0
  101. package/components/menu/demo/api.html +17 -10
  102. package/components/menu/demo/api.md +65 -8
  103. package/components/menu/demo/api.min.js +305 -63
  104. package/components/menu/demo/index.html +16 -10
  105. package/components/menu/demo/index.min.js +305 -63
  106. package/components/menu/demo/readme.html +16 -9
  107. package/components/menu/dist/auro-menu.d.ts +53 -7
  108. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  109. package/components/menu/dist/iconVersion.d.ts +1 -1
  110. package/components/menu/dist/index.js +290 -48
  111. package/components/menu/dist/registered.js +290 -48
  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 +149 -122
  127. package/components/select/demo/api.min.js +2283 -736
  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 +2284 -725
  131. package/components/select/demo/readme.html +16 -9
  132. package/components/select/dist/auro-select.d.ts +74 -25
  133. package/components/select/dist/index.js +2165 -753
  134. package/components/select/dist/registered.js +2165 -753
  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/{input/dist/styles/default/input-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/default/label-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  144. /package/components/{input/dist/styles/input-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  145. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  148. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  149. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-css.d.ts} +0 -0
package/components/counter/demo/api.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/api.md CHANGED
@@ -8,6 +8,7 @@
8
8
  | Property | Attribute | Type | Default | Description |
9
9
  |------------|------------|-----------|-------------|--------------------------------------------------|
10
10
  | [disabled](#disabled) | `disabled` | `boolean` | false | Indicates if the counter is disabled. |
11
+ | [error](#error) | `error` | `string` | | Error state and message.<br />True if set, value is the error message. |
11
12
  | [max](#max) | `max` | `number` | 9 | The maximum value for the counter. |
12
13
  | [min](#min) | `min` | `number` | 0 | The minimum value for the counter. |
13
14
  | [onDark](#onDark) | `onDark` | `boolean` | false | If declared, the counter will be rendered with onDark styles. |
@@ -39,26 +40,31 @@
39
40
 
40
41
  ## Properties
41
42
 
42
- | Property | Attribute | Type | Default | Description |
43
- |---------------------------|---------------------------|-----------|----------------|--------------------------------------------------|
44
- | [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
45
- | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
46
- | [isDropdown](#isDropdown) | `isDropdown` | `boolean` | false | Indicates if the counter group is displayed as a dropdown. |
47
- | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
48
- | [max](#max) | `max` | `number` | "undefined" | The maximum value allowed for the whole group of counters. |
49
- | [min](#min) | `min` | `number` | "undefined" | The minimum value allowed for the whole group of counters. |
50
- | [noFlip](#noFlip) | `noFlip` | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
51
- | [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
52
- | [onDark](#onDark) | `onDark` | `boolean` | false | If declared, counters and dropdown will be rendered with onDark styles. |
53
- | [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end" |
54
- | [total](#total) | `total` | `number` | "undefined" | The total value of the counters. |
55
- | [validity](#validity) | `validity` | `string` | "undefined" | Reflects the validity state. |
56
- | [value](#value) | `value` | `object` | "undefined" | The current individual values of the nested counters. |
43
+ | Property | Attribute | Type | Default | Description |
44
+ |---------------------------|---------------------------|--------------------------|----------------|--------------------------------------------------|
45
+ | [autoPlacement](#autoPlacement) | `autoPlacement` | `boolean` | "false" | If declared, bib's position will be automatically calculated where to appear. |
46
+ | [error](#error) | `error` | `string` | | The current error message to display when the component is invalid. |
47
+ | [fullscreenBreakpoint](#fullscreenBreakpoint) | `fullscreenBreakpoint` | `string` | "sm" | Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)<br />at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.<br /><br />When expanded, the dropdown will automatically display in fullscreen mode<br />if the screen size is equal to or smaller than the selected breakpoint. |
48
+ | [isDropdown](#isDropdown) | `isDropdown` | `boolean` | false | Indicates if the counter group is displayed as a dropdown. |
49
+ | [largeFullscreenHeadline](#largeFullscreenHeadline) | `largeFullscreenHeadline` | `boolean` | false | If declared, make bib.fullscreen.headline in HeadingDisplay.<br />Otherwise, Heading 600. |
50
+ | [layout](#layout) | | `'classic'\|'snowflake'` | | Determines the layout style of the counter group when it is a dropdown. Options are 'classic' or 'snowflake'. Default is 'classic'. |
51
+ | [matchWidth](#matchWidth) | `matchWidth` | `boolean` | false | If declared, the dropdown will expand to the width of its parent container.<br />Otherwise, the dropdown width will be determined by its content. |
52
+ | [max](#max) | `max` | `number` | "undefined" | The maximum value allowed for the whole group of counters. |
53
+ | [min](#min) | `min` | `number` | "undefined" | The minimum value allowed for the whole group of counters. |
54
+ | [noFlip](#noFlip) | `noFlip` | `boolean` | "false" | If declared, the bib will NOT flip to an alternate position<br />when there isn't enough space in the specified `placement`. |
55
+ | [offset](#offset) | `offset` | `number` | "0" | Gap between the trigger element and bib. |
56
+ | [onDark](#onDark) | `onDark` | `boolean` | false | If declared, counters and dropdown will be rendered with onDark styles. |
57
+ | [placement](#placement) | `placement` | `string` | "bottom-start" | Position where the bib should appear relative to the trigger.<br />Accepted values:<br />"top" \| "right" \| "bottom" \| "left" \|<br />"bottom-start" \| "top-start" \| "top-end" \|<br />"right-start" \| "right-end" \| "bottom-end" \|<br />"left-start" \| "left-end". |
58
+ | [total](#total) | `total` | `number` | "undefined" | The total value of the counters. |
59
+ | [validity](#validity) | `validity` | `string` | "undefined" | Reflects the validity state. |
60
+ | [value](#value) | `value` | `object` | "undefined" | The current individual values of the nested counters. |
57
61
 
58
62
  ## Methods
59
63
 
60
64
  | Method | Type | Description |
61
65
  |------------|----------------------------------------|--------------------------------------------------|
66
+ | [hideBib](#hideBib) | `(): void` | Hides the dropdown bib if its open. |
67
+ | [showBib](#showBib) | `(): void` | Shows the dropdown bib if there are options to show. |
62
68
  | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
63
69
 
64
70
  ## Events
@@ -338,6 +344,131 @@ counter.addEventListener('input', (event) => {
338
344
  <!-- AURO-GENERATED-CONTENT:END -->
339
345
  </auro-accordion>
340
346
 
347
+ ### Counter with Custom Error
348
+
349
+ A custom error can be set on the counter by adding the `error` attribute the desired message.
350
+
351
+ <div class="exampleWrapper">
352
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
353
+ <!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
354
+ <auro-counter error="There is an error with the counter">
355
+ Adults
356
+ </auro-counter>
357
+ <!-- AURO-GENERATED-CONTENT:END -->
358
+ </div>
359
+ <div class="exampleWrapper--ondark" aria-hidden>
360
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
361
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
362
+ <auro-counter ondark error="There is an error with the counter">
363
+ Adults
364
+ </auro-counter>
365
+ <!-- AURO-GENERATED-CONTENT:END -->
366
+ </div>
367
+ <auro-accordion alignRight>
368
+ <span slot="trigger">See code</span>
369
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-error.html) -->
370
+ <!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
371
+
372
+ ```html
373
+ <auro-counter error="There is an error with the counter">
374
+ Adults
375
+ </auro-counter>
376
+ ```
377
+ <!-- AURO-GENERATED-CONTENT:END -->
378
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
379
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
380
+ <auro-counter ondark error="There is an error with the counter">
381
+ Adults
382
+ </auro-counter>
383
+ <!-- AURO-GENERATED-CONTENT:END -->
384
+ </auro-accordion>
385
+
386
+ ### Counter Dropdown with Errored Counters
387
+
388
+ A counter dropdown with counters in an errored state will display the errors for each errored counter by default
389
+
390
+ <div class="exampleWrapper">
391
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-basic.html) -->
392
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-error-basic.html -->
393
+ <auro-counter-group isDropdown>
394
+ <div slot="bib.fullscreen.headline">Passengers</div>
395
+ <div slot="label">Passengers</div>
396
+ <auro-counter error="Cannot have less than 1 adult passenger">
397
+ Adults
398
+ <span slot="description">18 years or older</span>
399
+ </auro-counter>
400
+ <auro-counter error="Cannot have more than 2 child passengers">
401
+ Children
402
+ <span slot="description">2-17 years</span>
403
+ </auro-counter>
404
+ </auro-counter-group>
405
+ <!-- AURO-GENERATED-CONTENT:END -->
406
+ </div>
407
+ <auro-accordion alignRight>
408
+ <span slot="trigger">See code</span>
409
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-basic.html) -->
410
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-basic.html -->
411
+
412
+ ```html
413
+ <auro-counter-group isDropdown>
414
+ <div slot="bib.fullscreen.headline">Passengers</div>
415
+ <div slot="label">Passengers</div>
416
+ <auro-counter error="Cannot have less than 1 adult passenger">
417
+ Adults
418
+ <span slot="description">18 years or older</span>
419
+ </auro-counter>
420
+ <auro-counter error="Cannot have more than 2 child passengers">
421
+ Children
422
+ <span slot="description">2-17 years</span>
423
+ </auro-counter>
424
+ </auro-counter-group>
425
+ ```
426
+ <!-- AURO-GENERATED-CONTENT:END -->
427
+ </auro-accordion>
428
+
429
+ ### Counter Dropdown with Custom Error
430
+
431
+ The error message for a dropdown counter with errored counters can also be overridden with the `error` attribute.
432
+
433
+ <div class="exampleWrapper">
434
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-custom.html) -->
435
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-error-custom.html -->
436
+ <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
437
+ <div slot="bib.fullscreen.headline">Passengers</div>
438
+ <div slot="label">Passengers</div>
439
+ <auro-counter error="Cannot have less than 1 adult passenger">
440
+ Adults
441
+ <span slot="description">18 years or older</span>
442
+ </auro-counter>
443
+ <auro-counter error="Cannot have more than 2 child passengers">
444
+ Children
445
+ <span slot="description">2-17 years</span>
446
+ </auro-counter>
447
+ </auro-counter-group>
448
+ <!-- AURO-GENERATED-CONTENT:END -->
449
+ </div>
450
+ <auro-accordion alignRight>
451
+ <span slot="trigger">See code</span>
452
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-custom.html) -->
453
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-custom.html -->
454
+
455
+ ```html
456
+ <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
457
+ <div slot="bib.fullscreen.headline">Passengers</div>
458
+ <div slot="label">Passengers</div>
459
+ <auro-counter error="Cannot have less than 1 adult passenger">
460
+ Adults
461
+ <span slot="description">18 years or older</span>
462
+ </auro-counter>
463
+ <auro-counter error="Cannot have more than 2 child passengers">
464
+ Children
465
+ <span slot="description">2-17 years</span>
466
+ </auro-counter>
467
+ </auro-counter-group>
468
+ ```
469
+ <!-- AURO-GENERATED-CONTENT:END -->
470
+ </auro-accordion>
471
+
341
472
  ### Group Max/Min
342
473
 
343
474
  The group counter max or min property sets the value for all counters in the group. If a counter has a max value set, the group max attribute will override it. All increment buttons as a result will be disabled to prevent the group of counters from exceeding the group max.
@@ -426,7 +557,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
426
557
  <div style="width: 350px">
427
558
  <auro-counter-group isDropdown offset="20" placement="bottom-end">
428
559
  <div slot="bib.fullscreen.headline">Passengers</div>
429
- <div slot="label">bottome-end bib with 20px offset</div>
560
+ <span slot="label">Label</span>
561
+ <span slot="helpText">bottom-end bib with 20px offset</span>
430
562
  <auro-counter>
431
563
  Adults
432
564
  <span slot="description">18 years or older</span>
@@ -438,7 +570,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
438
570
  </auro-counter-group>
439
571
  <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
440
572
  <div slot="bib.fullscreen.headline">Passengers</div>
441
- <div slot="label">bottome-end bib with 20px offset and noFlip</div>
573
+ <span slot="label">Label</span>
574
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
442
575
  <auro-counter>
443
576
  Adults
444
577
  <span slot="description">18 years or older</span>
@@ -450,7 +583,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
450
583
  </auro-counter-group>
451
584
  <auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
452
585
  <div slot="bib.fullscreen.headline">Passengers</div>
453
- <div slot="label">right bib with 20px offset, noFlip and autoPlacement</div>
586
+ <span slot="label">Label</span>
587
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
454
588
  <auro-counter>
455
589
  Adults
456
590
  <span slot="description">18 years or older</span>
@@ -472,7 +606,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
472
606
  <div style="width: 350px">
473
607
  <auro-counter-group isDropdown offset="20" placement="bottom-end">
474
608
  <div slot="bib.fullscreen.headline">Passengers</div>
475
- <div slot="label">bottome-end bib with 20px offset</div>
609
+ <span slot="label">Label</span>
610
+ <span slot="helpText">bottom-end bib with 20px offset</span>
476
611
  <auro-counter>
477
612
  Adults
478
613
  <span slot="description">18 years or older</span>
@@ -484,7 +619,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
484
619
  </auro-counter-group>
485
620
  <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
486
621
  <div slot="bib.fullscreen.headline">Passengers</div>
487
- <div slot="label">bottome-end bib with 20px offset and noFlip</div>
622
+ <span slot="label">Label</span>
623
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
488
624
  <auro-counter>
489
625
  Adults
490
626
  <span slot="description">18 years or older</span>
@@ -496,7 +632,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
496
632
  </auro-counter-group>
497
633
  <auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
498
634
  <div slot="bib.fullscreen.headline">Passengers</div>
499
- <div slot="label">right bib with 20px offset, noFlip and autoPlacement</div>
635
+ <span slot="label">Label</span>
636
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
500
637
  <auro-counter>
501
638
  Adults
502
639
  <span slot="description">18 years or older</span>