@aurodesignsystem/auro-formkit 4.0.2 → 5.0.0

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 (172) hide show
  1. package/CHANGELOG.md +193 -2
  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/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +52 -17
  10. package/components/checkbox/demo/api.min.js +66 -33
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.min.js +66 -33
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
  15. package/components/checkbox/dist/auro-checkbox.d.ts +8 -1
  16. package/components/checkbox/dist/index.js +65 -32
  17. package/components/checkbox/dist/registered.js +65 -32
  18. package/components/combobox/README.md +2 -0
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +124 -7
  21. package/components/combobox/demo/api.min.js +4542 -1330
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +108 -4
  24. package/components/combobox/demo/index.min.js +4542 -1330
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/demo/readme.md +2 -0
  27. package/components/combobox/dist/auro-combobox.d.ts +81 -18
  28. package/components/combobox/dist/index.js +4588 -1520
  29. package/components/combobox/dist/registered.js +4588 -1520
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +167 -21
  32. package/components/counter/demo/api.min.js +3621 -866
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +191 -34
  35. package/components/counter/demo/index.min.js +3621 -866
  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 +162 -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 +3619 -864
  43. package/components/counter/dist/registered.js +3619 -864
  44. package/components/datepicker/README.md +2 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +80 -30
  47. package/components/datepicker/demo/api.min.js +14795 -10365
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +96 -4
  50. package/components/datepicker/demo/index.min.js +14795 -10365
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +2 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
  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 +14916 -10486
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +14916 -10486
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +94 -262
  61. package/components/dropdown/demo/api.min.js +738 -259
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +93 -266
  64. package/components/dropdown/demo/index.min.js +738 -259
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +710 -231
  69. package/components/dropdown/dist/registered.js +710 -231
  70. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  71. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  72. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  73. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  74. package/components/form/demo/api.html +16 -9
  75. package/components/form/demo/api.md +1 -1
  76. package/components/form/demo/api.min.js +3 -3
  77. package/components/form/demo/autocomplete.html +19 -3
  78. package/components/form/demo/index.html +16 -9
  79. package/components/form/demo/index.min.js +3 -3
  80. package/components/form/demo/readme.html +16 -9
  81. package/components/form/demo/working.html +19 -13
  82. package/components/form/dist/auro-form.d.ts +1 -1
  83. package/components/form/dist/index.js +2 -2
  84. package/components/form/dist/registered.js +2 -2
  85. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  86. package/components/helptext/dist/index.js +2 -4
  87. package/components/helptext/dist/registered.js +2 -4
  88. package/components/input/README.md +6 -2
  89. package/components/input/demo/api.html +16 -10
  90. package/components/input/demo/api.md +258 -144
  91. package/components/input/demo/api.min.js +1550 -497
  92. package/components/input/demo/index.html +17 -11
  93. package/components/input/demo/index.md +95 -27
  94. package/components/input/demo/index.min.js +1549 -496
  95. package/components/input/demo/readme.html +16 -9
  96. package/components/input/demo/readme.md +6 -2
  97. package/components/input/dist/auro-input.d.ts +139 -3
  98. package/components/input/dist/base-input.d.ts +80 -26
  99. package/components/input/dist/buttonVersion.d.ts +1 -1
  100. package/components/input/dist/iconVersion.d.ts +1 -1
  101. package/components/input/dist/index.js +1504 -451
  102. package/components/input/dist/registered.js +1504 -451
  103. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  104. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  105. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  106. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  107. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  108. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  109. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  110. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  111. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  112. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  113. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  114. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  115. package/components/layoutElement/dist/index.d.ts +2 -0
  116. package/components/layoutElement/dist/index.js +98 -0
  117. package/components/layoutElement/dist/registered.js +98 -0
  118. package/components/menu/demo/api.html +17 -10
  119. package/components/menu/demo/api.md +65 -8
  120. package/components/menu/demo/api.min.js +304 -65
  121. package/components/menu/demo/index.html +16 -10
  122. package/components/menu/demo/index.min.js +304 -65
  123. package/components/menu/demo/readme.html +16 -9
  124. package/components/menu/dist/auro-menu.d.ts +53 -7
  125. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  126. package/components/menu/dist/iconVersion.d.ts +1 -1
  127. package/components/menu/dist/index.js +289 -50
  128. package/components/menu/dist/registered.js +289 -50
  129. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  130. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  131. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  132. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  133. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  134. package/components/radio/demo/api.html +16 -10
  135. package/components/radio/demo/api.md +41 -9
  136. package/components/radio/demo/api.min.js +93 -95
  137. package/components/radio/demo/index.html +16 -10
  138. package/components/radio/demo/index.min.js +93 -95
  139. package/components/radio/demo/readme.html +16 -9
  140. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  141. package/components/radio/dist/auro-radio.d.ts +11 -12
  142. package/components/radio/dist/index.js +92 -94
  143. package/components/radio/dist/registered.js +92 -94
  144. package/components/select/README.md +1 -0
  145. package/components/select/demo/api.html +16 -10
  146. package/components/select/demo/api.js +0 -2
  147. package/components/select/demo/api.md +156 -114
  148. package/components/select/demo/api.min.js +3126 -657
  149. package/components/select/demo/index.html +17 -10
  150. package/components/select/demo/index.md +398 -62
  151. package/components/select/demo/index.min.js +3129 -648
  152. package/components/select/demo/readme.html +16 -9
  153. package/components/select/demo/readme.md +1 -0
  154. package/components/select/dist/auro-select.d.ts +173 -18
  155. package/components/select/dist/helptextVersion.d.ts +2 -0
  156. package/components/select/dist/index.js +3128 -791
  157. package/components/select/dist/registered.js +3128 -791
  158. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  159. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  160. package/package.json +33 -32
  161. package/packages/build-tools/src/postinstall.mjs +0 -12
  162. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  163. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  164. /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  165. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
  166. /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  167. /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  168. /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  169. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  170. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  171. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  172. /package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-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
@@ -71,6 +77,7 @@
71
77
 
72
78
  | Name | Description |
73
79
  |---------------------------|--------------------------------------------------|
80
+ | `ariaLabel.bib.close` | Sets aria-label on close button in fullscreen bib |
74
81
  | `bib.fullscreen.footer` | Defines the footer to display at the bottom of fullscreen bib. Only used when `isDropdown` is true. |
75
82
  | `bib.fullscreen.headline` | Defines the headline to display above menu-options. Only used when `isDropdown` is true. Required. |
76
83
  | [default](#default) | Slot for counter elements. |
@@ -290,6 +297,7 @@ counter.addEventListener('input', (event) => {
290
297
  <!-- The below content is automatically added from ./../apiExamples/dropdown-value-text.html -->
291
298
  <div style="max-width: 350px;">
292
299
  <auro-counter-group isDropdown>
300
+ <span slot="ariaLabel.bib.close">Close Popup</span>
293
301
  <span slot="bib.fullscreen.headline">Passengers</span>
294
302
  <div slot="valueText">Custom value text</div>
295
303
  <div slot="label"></div>
@@ -317,6 +325,7 @@ counter.addEventListener('input', (event) => {
317
325
  ```html
318
326
  <div style="max-width: 350px;">
319
327
  <auro-counter-group isDropdown>
328
+ <span slot="ariaLabel.bib.close">Close Popup</span>
320
329
  <span slot="bib.fullscreen.headline">Passengers</span>
321
330
  <div slot="valueText">Custom value text</div>
322
331
  <div slot="label"></div>
@@ -338,6 +347,135 @@ counter.addEventListener('input', (event) => {
338
347
  <!-- AURO-GENERATED-CONTENT:END -->
339
348
  </auro-accordion>
340
349
 
350
+ ### Counter with Custom Error
351
+
352
+ A custom error can be set on the counter by adding the `error` attribute the desired message.
353
+
354
+ <div class="exampleWrapper">
355
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/counter-error.html) -->
356
+ <!-- The below content is automatically added from ./../apiExamples/counter-error.html -->
357
+ <auro-counter error="There is an error with the counter">
358
+ Adults
359
+ </auro-counter>
360
+ <!-- AURO-GENERATED-CONTENT:END -->
361
+ </div>
362
+ <div class="exampleWrapper--ondark" aria-hidden>
363
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
364
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
365
+ <auro-counter ondark error="There is an error with the counter">
366
+ Adults
367
+ </auro-counter>
368
+ <!-- AURO-GENERATED-CONTENT:END -->
369
+ </div>
370
+ <auro-accordion alignRight>
371
+ <span slot="trigger">See code</span>
372
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/counter-error.html) -->
373
+ <!-- The below code snippet is automatically added from ./../apiExamples/counter-error.html -->
374
+
375
+ ```html
376
+ <auro-counter error="There is an error with the counter">
377
+ Adults
378
+ </auro-counter>
379
+ ```
380
+ <!-- AURO-GENERATED-CONTENT:END -->
381
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/ondark-counter-error.html) -->
382
+ <!-- The below content is automatically added from ./../apiExamples/ondark-counter-error.html -->
383
+ <auro-counter ondark error="There is an error with the counter">
384
+ Adults
385
+ </auro-counter>
386
+ <!-- AURO-GENERATED-CONTENT:END -->
387
+ </auro-accordion>
388
+
389
+ ### Counter Dropdown with Errored Counters
390
+
391
+ A counter dropdown with counters in an errored state will display the errors for each errored counter by default
392
+
393
+ <div class="exampleWrapper">
394
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-basic.html) -->
395
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-error-basic.html -->
396
+ <auro-counter-group isDropdown>
397
+ <span slot="ariaLabel.bib.close">Close Popup</span>
398
+ <div slot="bib.fullscreen.headline">Passengers</div>
399
+ <div slot="label">Passengers</div>
400
+ <auro-counter error="Cannot have less than 1 adult passenger">
401
+ Adults
402
+ <span slot="description">18 years or older</span>
403
+ </auro-counter>
404
+ <auro-counter error="Cannot have more than 2 child passengers">
405
+ Children
406
+ <span slot="description">2-17 years</span>
407
+ </auro-counter>
408
+ </auro-counter-group>
409
+ <!-- AURO-GENERATED-CONTENT:END -->
410
+ </div>
411
+ <auro-accordion alignRight>
412
+ <span slot="trigger">See code</span>
413
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-basic.html) -->
414
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-basic.html -->
415
+
416
+ ```html
417
+ <auro-counter-group isDropdown>
418
+ <span slot="ariaLabel.bib.close">Close Popup</span>
419
+ <div slot="bib.fullscreen.headline">Passengers</div>
420
+ <div slot="label">Passengers</div>
421
+ <auro-counter error="Cannot have less than 1 adult passenger">
422
+ Adults
423
+ <span slot="description">18 years or older</span>
424
+ </auro-counter>
425
+ <auro-counter error="Cannot have more than 2 child passengers">
426
+ Children
427
+ <span slot="description">2-17 years</span>
428
+ </auro-counter>
429
+ </auro-counter-group>
430
+ ```
431
+ <!-- AURO-GENERATED-CONTENT:END -->
432
+ </auro-accordion>
433
+
434
+ ### Counter Dropdown with Custom Error
435
+
436
+ The error message for a dropdown counter with errored counters can also be overridden with the `error` attribute.
437
+
438
+ <div class="exampleWrapper">
439
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-error-custom.html) -->
440
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-error-custom.html -->
441
+ <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
442
+ <span slot="ariaLabel.bib.close">Close Popup</span>
443
+ <div slot="bib.fullscreen.headline">Passengers</div>
444
+ <div slot="label">Passengers</div>
445
+ <auro-counter error="Cannot have less than 1 adult passenger">
446
+ Adults
447
+ <span slot="description">18 years or older</span>
448
+ </auro-counter>
449
+ <auro-counter error="Cannot have more than 2 child passengers">
450
+ Children
451
+ <span slot="description">2-17 years</span>
452
+ </auro-counter>
453
+ </auro-counter-group>
454
+ <!-- AURO-GENERATED-CONTENT:END -->
455
+ </div>
456
+ <auro-accordion alignRight>
457
+ <span slot="trigger">See code</span>
458
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-error-custom.html) -->
459
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-error-custom.html -->
460
+
461
+ ```html
462
+ <auro-counter-group error="Please select the appropriate number of passengers" isDropdown>
463
+ <span slot="ariaLabel.bib.close">Close Popup</span>
464
+ <div slot="bib.fullscreen.headline">Passengers</div>
465
+ <div slot="label">Passengers</div>
466
+ <auro-counter error="Cannot have less than 1 adult passenger">
467
+ Adults
468
+ <span slot="description">18 years or older</span>
469
+ </auro-counter>
470
+ <auro-counter error="Cannot have more than 2 child passengers">
471
+ Children
472
+ <span slot="description">2-17 years</span>
473
+ </auro-counter>
474
+ </auro-counter-group>
475
+ ```
476
+ <!-- AURO-GENERATED-CONTENT:END -->
477
+ </auro-accordion>
478
+
341
479
  ### Group Max/Min
342
480
 
343
481
  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 +564,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
426
564
  <div style="width: 350px">
427
565
  <auro-counter-group isDropdown offset="20" placement="bottom-end">
428
566
  <div slot="bib.fullscreen.headline">Passengers</div>
429
- <div slot="label">bottome-end bib with 20px offset</div>
567
+ <span slot="label">Label</span>
568
+ <span slot="helpText">bottom-end bib with 20px offset</span>
430
569
  <auro-counter>
431
570
  Adults
432
571
  <span slot="description">18 years or older</span>
@@ -438,7 +577,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
438
577
  </auro-counter-group>
439
578
  <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
440
579
  <div slot="bib.fullscreen.headline">Passengers</div>
441
- <div slot="label">bottome-end bib with 20px offset and noFlip</div>
580
+ <span slot="label">Label</span>
581
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
442
582
  <auro-counter>
443
583
  Adults
444
584
  <span slot="description">18 years or older</span>
@@ -450,7 +590,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
450
590
  </auro-counter-group>
451
591
  <auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
452
592
  <div slot="bib.fullscreen.headline">Passengers</div>
453
- <div slot="label">right bib with 20px offset, noFlip and autoPlacement</div>
593
+ <span slot="label">Label</span>
594
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
454
595
  <auro-counter>
455
596
  Adults
456
597
  <span slot="description">18 years or older</span>
@@ -472,7 +613,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
472
613
  <div style="width: 350px">
473
614
  <auro-counter-group isDropdown offset="20" placement="bottom-end">
474
615
  <div slot="bib.fullscreen.headline">Passengers</div>
475
- <div slot="label">bottome-end bib with 20px offset</div>
616
+ <span slot="label">Label</span>
617
+ <span slot="helpText">bottom-end bib with 20px offset</span>
476
618
  <auro-counter>
477
619
  Adults
478
620
  <span slot="description">18 years or older</span>
@@ -484,7 +626,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
484
626
  </auro-counter-group>
485
627
  <auro-counter-group isDropdown offset="20" placement="bottom-end" noFlip>
486
628
  <div slot="bib.fullscreen.headline">Passengers</div>
487
- <div slot="label">bottome-end bib with 20px offset and noFlip</div>
629
+ <span slot="label">Label</span>
630
+ <span slot="helpText">bottom-end bib with 20px offset and noFlip</span>
488
631
  <auro-counter>
489
632
  Adults
490
633
  <span slot="description">18 years or older</span>
@@ -496,7 +639,8 @@ The bib position can be customized with `placement`, `offset`, `flip`, `autoPlac
496
639
  </auro-counter-group>
497
640
  <auro-counter-group isDropdown offset="20" placement="right" noFlip autoPlacement>
498
641
  <div slot="bib.fullscreen.headline">Passengers</div>
499
- <div slot="label">right bib with 20px offset, noFlip and autoPlacement</div>
642
+ <span slot="label">Label</span>
643
+ <span slot="helpText">right bib with 20px offset, noFlip and autoPlacement</span>
500
644
  <auro-counter>
501
645
  Adults
502
646
  <span slot="description">18 years or older</span>
@@ -527,6 +671,7 @@ You can also set `bib.fullscreen.footer` slot to add any additional options on f
527
671
  <!-- The below content is automatically added from ./../apiExamples/dropdown-mobile-properties.html -->
528
672
  <div style="max-width: 350px;">
529
673
  <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
674
+ <span slot="ariaLabel.bib.close">Close Popup</span>
530
675
  <span slot="label">Passengers</span>
531
676
  <span slot="bib.fullscreen.headline">Passengers</span>
532
677
  <div slot="helpText">This is help text</div>
@@ -558,6 +703,7 @@ You can also set `bib.fullscreen.footer` slot to add any additional options on f
558
703
  ```html
559
704
  <div style="max-width: 350px;">
560
705
  <auro-counter-group id="dropdownCouterExample" isDropdown fullscreenBreakpoint="lg">
706
+ <span slot="ariaLabel.bib.close">Close Popup</span>
561
707
  <span slot="label">Passengers</span>
562
708
  <span slot="bib.fullscreen.headline">Passengers</span>
563
709
  <div slot="helpText">This is help text</div>