@aurodesignsystem-dev/auro-formkit 0.0.0-pr593.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 (268) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +314 -0
  5. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +39 -0
  6. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  7. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  8. package/components/bibtemplate/dist/index.d.ts +2 -0
  9. package/components/bibtemplate/dist/index.js +709 -0
  10. package/components/bibtemplate/dist/registered.js +709 -0
  11. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  12. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  13. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  14. package/components/checkbox/README.md +142 -0
  15. package/components/checkbox/demo/api.html +55 -0
  16. package/components/checkbox/demo/api.js +17 -0
  17. package/components/checkbox/demo/api.md +401 -0
  18. package/components/checkbox/demo/api.min.js +1833 -0
  19. package/components/checkbox/demo/index.html +51 -0
  20. package/components/checkbox/demo/index.js +8 -0
  21. package/components/checkbox/demo/index.md +327 -0
  22. package/components/checkbox/demo/index.min.js +1808 -0
  23. package/components/checkbox/demo/readme.html +50 -0
  24. package/components/checkbox/demo/readme.md +142 -0
  25. package/components/checkbox/dist/auro-checkbox-group.d.ts +166 -0
  26. package/components/checkbox/dist/auro-checkbox.d.ts +129 -0
  27. package/components/checkbox/dist/helptextVersion.d.ts +2 -0
  28. package/components/checkbox/dist/index.d.ts +3 -0
  29. package/components/checkbox/dist/index.js +1757 -0
  30. package/components/checkbox/dist/registered.js +1758 -0
  31. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  32. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  33. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  34. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  35. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  36. package/components/combobox/README.md +152 -0
  37. package/components/combobox/demo/api.html +57 -0
  38. package/components/combobox/demo/api.js +36 -0
  39. package/components/combobox/demo/api.md +1209 -0
  40. package/components/combobox/demo/api.min.js +15117 -0
  41. package/components/combobox/demo/index.html +56 -0
  42. package/components/combobox/demo/index.js +26 -0
  43. package/components/combobox/demo/index.md +621 -0
  44. package/components/combobox/demo/index.min.js +14971 -0
  45. package/components/combobox/demo/readme.html +50 -0
  46. package/components/combobox/demo/readme.md +152 -0
  47. package/components/combobox/dist/auro-combobox.d.ts +384 -0
  48. package/components/combobox/dist/bibtemplateVersion.d.ts +2 -0
  49. package/components/combobox/dist/dropdownVersion.d.ts +2 -0
  50. package/components/combobox/dist/index.d.ts +2 -0
  51. package/components/combobox/dist/index.js +13554 -0
  52. package/components/combobox/dist/inputVersion.d.ts +2 -0
  53. package/components/combobox/dist/registered.js +13556 -0
  54. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  55. package/components/counter/README.md +146 -0
  56. package/components/counter/demo/api.html +54 -0
  57. package/components/counter/demo/api.js +20 -0
  58. package/components/counter/demo/api.md +584 -0
  59. package/components/counter/demo/api.min.js +7111 -0
  60. package/components/counter/demo/index.html +54 -0
  61. package/components/counter/demo/index.js +21 -0
  62. package/components/counter/demo/index.md +244 -0
  63. package/components/counter/demo/index.min.js +7075 -0
  64. package/components/counter/demo/readme.html +50 -0
  65. package/components/counter/demo/readme.md +146 -0
  66. package/components/counter/dist/auro-counter-button.d.ts +12 -0
  67. package/components/counter/dist/auro-counter-group.d.ts +235 -0
  68. package/components/counter/dist/auro-counter-wrapper.d.ts +22 -0
  69. package/components/counter/dist/auro-counter.d.ts +97 -0
  70. package/components/counter/dist/bibtemplateVersion.d.ts +2 -0
  71. package/components/counter/dist/dropdownVersion.d.ts +2 -0
  72. package/components/counter/dist/iconVersion.d.ts +2 -0
  73. package/components/counter/dist/index.d.ts +3 -0
  74. package/components/counter/dist/index.js +7018 -0
  75. package/components/counter/dist/registered.js +7019 -0
  76. package/components/counter/dist/styles/color-css.d.ts +2 -0
  77. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  78. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  79. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  80. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  81. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  82. package/components/counter/dist/styles/style-css.d.ts +2 -0
  83. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  84. package/components/datepicker/README.md +140 -0
  85. package/components/datepicker/demo/api.html +57 -0
  86. package/components/datepicker/demo/api.js +35 -0
  87. package/components/datepicker/demo/api.md +1479 -0
  88. package/components/datepicker/demo/api.min.js +24534 -0
  89. package/components/datepicker/demo/index.html +56 -0
  90. package/components/datepicker/demo/index.js +19 -0
  91. package/components/datepicker/demo/index.md +112 -0
  92. package/components/datepicker/demo/index.min.js +24255 -0
  93. package/components/datepicker/demo/readme.html +50 -0
  94. package/components/datepicker/demo/readme.md +140 -0
  95. package/components/datepicker/dist/auro-calendar-cell.d.ts +163 -0
  96. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  97. package/components/datepicker/dist/auro-calendar.d.ts +133 -0
  98. package/components/datepicker/dist/auro-datepicker.d.ts +466 -0
  99. package/components/datepicker/dist/bibtemplateVersion.d.ts +2 -0
  100. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  101. package/components/datepicker/dist/dropdownVersion.d.ts +2 -0
  102. package/components/datepicker/dist/index.d.ts +2 -0
  103. package/components/datepicker/dist/index.js +24185 -0
  104. package/components/datepicker/dist/inputVersion.d.ts +2 -0
  105. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  106. package/components/datepicker/dist/registered.js +24185 -0
  107. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  108. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  109. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  110. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  111. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  112. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  113. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  114. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  115. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  116. package/components/datepicker/dist/utilities.d.ts +78 -0
  117. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  118. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  119. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  120. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  121. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  122. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  123. package/components/dropdown/README.md +144 -0
  124. package/components/dropdown/demo/api.html +57 -0
  125. package/components/dropdown/demo/api.js +21 -0
  126. package/components/dropdown/demo/api.md +1434 -0
  127. package/components/dropdown/demo/api.min.js +3826 -0
  128. package/components/dropdown/demo/index.html +55 -0
  129. package/components/dropdown/demo/index.js +19 -0
  130. package/components/dropdown/demo/index.md +510 -0
  131. package/components/dropdown/demo/index.min.js +3789 -0
  132. package/components/dropdown/demo/readme.html +50 -0
  133. package/components/dropdown/demo/readme.md +144 -0
  134. package/components/dropdown/dist/auro-dropdown.d.ts +406 -0
  135. package/components/dropdown/dist/auro-dropdownBib.d.ts +46 -0
  136. package/components/dropdown/dist/dropdownVersion.d.ts +2 -0
  137. package/components/dropdown/dist/helptextVersion.d.ts +2 -0
  138. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  139. package/components/dropdown/dist/index.d.ts +2 -0
  140. package/components/dropdown/dist/index.js +3734 -0
  141. package/components/dropdown/dist/registered.js +3734 -0
  142. package/components/dropdown/dist/styles/bibColors-css.d.ts +2 -0
  143. package/components/dropdown/dist/styles/bibStyles-css.d.ts +2 -0
  144. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  145. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  146. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  147. package/components/form/README.md +142 -0
  148. package/components/form/demo/api.html +49 -0
  149. package/components/form/demo/api.js +3 -0
  150. package/components/form/demo/api.md +51 -0
  151. package/components/form/demo/api.min.js +638 -0
  152. package/components/form/demo/autocomplete.html +15 -0
  153. package/components/form/demo/index.html +50 -0
  154. package/components/form/demo/index.js +4 -0
  155. package/components/form/demo/index.md +403 -0
  156. package/components/form/demo/index.min.js +639 -0
  157. package/components/form/demo/readme.html +50 -0
  158. package/components/form/demo/readme.md +142 -0
  159. package/components/form/demo/registerDemoDeps.js +23 -0
  160. package/components/form/demo/working.html +118 -0
  161. package/components/form/dist/auro-form.d.ts +223 -0
  162. package/components/form/dist/index.d.ts +2 -0
  163. package/components/form/dist/index.js +614 -0
  164. package/components/form/dist/registered.d.ts +1 -0
  165. package/components/form/dist/registered.js +614 -0
  166. package/components/form/dist/styles/style-css.d.ts +2 -0
  167. package/components/helptext/dist/auro-helptext.d.ts +61 -0
  168. package/components/helptext/dist/index.d.ts +2 -0
  169. package/components/helptext/dist/index.js +209 -0
  170. package/components/helptext/dist/registered.js +209 -0
  171. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  172. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  173. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  174. package/components/input/README.md +135 -0
  175. package/components/input/demo/api.html +42 -0
  176. package/components/input/demo/api.js +29 -0
  177. package/components/input/demo/api.md +1252 -0
  178. package/components/input/demo/api.min.js +7238 -0
  179. package/components/input/demo/index.html +43 -0
  180. package/components/input/demo/index.js +20 -0
  181. package/components/input/demo/index.md +202 -0
  182. package/components/input/demo/index.min.js +7157 -0
  183. package/components/input/demo/readme.html +50 -0
  184. package/components/input/demo/readme.md +135 -0
  185. package/components/input/dist/auro-input.d.ts +31 -0
  186. package/components/input/dist/base-input.d.ts +512 -0
  187. package/components/input/dist/buttonVersion.d.ts +2 -0
  188. package/components/input/dist/helptextVersion.d.ts +2 -0
  189. package/components/input/dist/i18n.d.ts +18 -0
  190. package/components/input/dist/iconVersion.d.ts +2 -0
  191. package/components/input/dist/index.d.ts +2 -0
  192. package/components/input/dist/index.js +7063 -0
  193. package/components/input/dist/registered.js +7063 -0
  194. package/components/input/dist/styles/borders-css.d.ts +2 -0
  195. package/components/input/dist/styles/color-css.d.ts +2 -0
  196. package/components/input/dist/styles/input-css.d.ts +2 -0
  197. package/components/input/dist/styles/label-css.d.ts +2 -0
  198. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  199. package/components/input/dist/styles/notificationIcons-css.d.ts +2 -0
  200. package/components/input/dist/styles/style-css.d.ts +2 -0
  201. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  202. package/components/input/dist/utilities.d.ts +25 -0
  203. package/components/menu/README.md +145 -0
  204. package/components/menu/demo/api.html +55 -0
  205. package/components/menu/demo/api.js +27 -0
  206. package/components/menu/demo/api.md +954 -0
  207. package/components/menu/demo/api.min.js +1538 -0
  208. package/components/menu/demo/index.html +52 -0
  209. package/components/menu/demo/index.js +28 -0
  210. package/components/menu/demo/index.md +61 -0
  211. package/components/menu/demo/index.min.js +1484 -0
  212. package/components/menu/demo/readme.html +50 -0
  213. package/components/menu/demo/readme.md +145 -0
  214. package/components/menu/dist/auro-menu-utils.d.ts +42 -0
  215. package/components/menu/dist/auro-menu.d.ts +205 -0
  216. package/components/menu/dist/auro-menuoption.d.ts +63 -0
  217. package/components/menu/dist/dropdownVersion.d.ts +2 -0
  218. package/components/menu/dist/iconVersion.d.ts +2 -0
  219. package/components/menu/dist/index.d.ts +4 -0
  220. package/components/menu/dist/index.js +1426 -0
  221. package/components/menu/dist/registered.js +1427 -0
  222. package/components/menu/dist/styles/color-menu-css.d.ts +2 -0
  223. package/components/menu/dist/styles/color-menuoption-css.d.ts +2 -0
  224. package/components/menu/dist/styles/style-menu-css.d.ts +2 -0
  225. package/components/menu/dist/styles/style-menuoption-css.d.ts +2 -0
  226. package/components/menu/dist/styles/tokens-css.d.ts +2 -0
  227. package/components/radio/README.md +137 -0
  228. package/components/radio/demo/api.html +53 -0
  229. package/components/radio/demo/api.js +19 -0
  230. package/components/radio/demo/api.md +562 -0
  231. package/components/radio/demo/api.min.js +1944 -0
  232. package/components/radio/demo/index.html +50 -0
  233. package/components/radio/demo/index.js +8 -0
  234. package/components/radio/demo/index.md +150 -0
  235. package/components/radio/demo/index.min.js +1901 -0
  236. package/components/radio/demo/readme.html +50 -0
  237. package/components/radio/demo/readme.md +137 -0
  238. package/components/radio/dist/auro-radio-group.d.ts +194 -0
  239. package/components/radio/dist/auro-radio.d.ts +144 -0
  240. package/components/radio/dist/helptextVersion.d.ts +2 -0
  241. package/components/radio/dist/index.d.ts +3 -0
  242. package/components/radio/dist/index.js +1850 -0
  243. package/components/radio/dist/registered.js +1851 -0
  244. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  245. package/components/radio/dist/styles/color-css.d.ts +2 -0
  246. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  247. package/components/radio/dist/styles/style-css.d.ts +2 -0
  248. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  249. package/components/select/README.md +144 -0
  250. package/components/select/demo/api.html +71 -0
  251. package/components/select/demo/api.js +35 -0
  252. package/components/select/demo/api.md +1313 -0
  253. package/components/select/demo/api.min.js +7763 -0
  254. package/components/select/demo/index.html +66 -0
  255. package/components/select/demo/index.js +9 -0
  256. package/components/select/demo/index.md +815 -0
  257. package/components/select/demo/index.min.js +7651 -0
  258. package/components/select/demo/readme.html +50 -0
  259. package/components/select/demo/readme.md +144 -0
  260. package/components/select/dist/auro-select.d.ts +359 -0
  261. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  262. package/components/select/dist/dropdownVersion.d.ts +2 -0
  263. package/components/select/dist/index.d.ts +2 -0
  264. package/components/select/dist/index.js +6300 -0
  265. package/components/select/dist/registered.js +6300 -0
  266. package/components/select/dist/styles/style-css.d.ts +2 -0
  267. package/package.json +217 -0
  268. package/packages/build-tools/src/postinstall.mjs +12 -0
package/components/counter/demo/index.html ADDED
@@ -0,0 +1,54 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/index.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
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">
27
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
+ <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>
31
+ <body class="auro-markdown">
32
+ <main></main>
33
+
34
+ <script type="module">
35
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
36
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
37
+ fetch('./index.md')
38
+ .then((response) => response.text())
39
+ .then((text) => {
40
+ const rawHtml = marked.parse(text);
41
+ document.querySelector('main').innerHTML = rawHtml;
42
+ Prism.highlightAll();
43
+ })
44
+ </script>
45
+ <script type="module">
46
+ import { initExamples } from "./index.min.js";
47
+
48
+ initExamples();
49
+ </script>
50
+ <!-- If additional elements are needed for the demo, add them here. -->
51
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
52
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
53
+ </body>
54
+ </html>
package/components/counter/demo/index.js ADDED
@@ -0,0 +1,21 @@
1
+ /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
2
+ import { AuroCounter } from '../src/auro-counter.js';
3
+ import { AuroCounterGroup } from '../src/auro-counter-group.js';
4
+
5
+ AuroCounter.register();
6
+ AuroCounterGroup.register();
7
+ AuroCounterGroup.register('custom-counter-group');
8
+ AuroCounter.register('custom-counter');
9
+
10
+ export function initExamples(initialCount = 0) {
11
+ try {
12
+
13
+ } catch (err) {
14
+ if (initialCount <= 20) {
15
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
16
+ setTimeout(() => {
17
+ initExamples(initialCount + 1);
18
+ }, 100);
19
+ }
20
+ }
21
+ }
package/components/counter/demo/index.md ADDED
@@ -0,0 +1,244 @@
1
+ <!--
2
+ The index.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ index.md is created by running `npm run build:markdownDocs`.
5
+
6
+ This file is generated based on a template fetched from `./docs/partials/index.md`
7
+ -->
8
+
9
+ # Counter
10
+
11
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
12
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
13
+ The `auro-counter` component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the `auro-counter-group` to facilitate a collection of counters to add passenger types to a flight.
14
+ <!-- AURO-GENERATED-CONTENT:END -->
15
+
16
+ ## Examples
17
+
18
+ ### Basic Counter
19
+
20
+ The counter component provides a simple interface for incrementing or decrementing numeric values. It displays a label with increment/decrement buttons and the current value. This is the most basic implementation of a standalone counter:
21
+
22
+ <div class="exampleWrapper">
23
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
24
+ <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
25
+ <auro-counter>
26
+ Adults
27
+ </auro-counter>
28
+ <!-- AURO-GENERATED-CONTENT:END -->
29
+ </div>
30
+ <div class="exampleWrapper--ondark" aria-hidden>
31
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
32
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
33
+ <auro-counter onDark>
34
+ Adults
35
+ </auro-counter>
36
+ <!-- AURO-GENERATED-CONTENT:END -->
37
+ </div>
38
+ <auro-accordion alignRight>
39
+ <span slot="trigger">See code</span>
40
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-standalone.html) -->
41
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic-standalone.html -->
42
+
43
+ ```html
44
+ <auro-counter>
45
+ Adults
46
+ </auro-counter>
47
+ ```
48
+ <!-- AURO-GENERATED-CONTENT:END -->
49
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDark.html) -->
50
+ <!-- The below content is automatically added from ./../apiExamples/onDark.html -->
51
+ <auro-counter onDark>
52
+ Adults
53
+ </auro-counter>
54
+ <!-- AURO-GENERATED-CONTENT:END -->
55
+ </auro-accordion>
56
+
57
+ ### Counter with Description
58
+
59
+ Adding a description provides additional context to users. The description appears below the main label and is useful for displaying important information or requirements:
60
+
61
+ <div class="exampleWrapper">
62
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-description.html) -->
63
+ <!-- The below content is automatically added from ./../apiExamples/basic-description.html -->
64
+ <auro-counter>
65
+ Adults
66
+ <span slot="description">18 years or older</span>
67
+ </auro-counter>
68
+ <!-- AURO-GENERATED-CONTENT:END -->
69
+ </div>
70
+ <div class="exampleWrapper--ondark" aria-hidden>
71
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDescription.html) -->
72
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDescription.html -->
73
+ <auro-counter onDark>
74
+ Adults
75
+ <span slot="description">18 years or older</span>
76
+ </auro-counter>
77
+ <!-- AURO-GENERATED-CONTENT:END -->
78
+ </div>
79
+ <auro-accordion alignRight>
80
+ <span slot="trigger">See code</span>
81
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic-description.html) -->
82
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic-description.html -->
83
+
84
+ ```html
85
+ <auro-counter>
86
+ Adults
87
+ <span slot="description">18 years or older</span>
88
+ </auro-counter>
89
+ ```
90
+ <!-- AURO-GENERATED-CONTENT:END -->
91
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDescription.html) -->
92
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDescription.html -->
93
+ <auro-counter onDark>
94
+ Adults
95
+ <span slot="description">18 years or older</span>
96
+ </auro-counter>
97
+ <!-- AURO-GENERATED-CONTENT:END -->
98
+ </auro-accordion>
99
+
100
+ ### Basic Counter Group
101
+
102
+ 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:
103
+
104
+ <div class="exampleWrapper">
105
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
106
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
107
+ <auro-counter-group>
108
+ <auro-counter>
109
+ Short label
110
+ </auro-counter>
111
+ <auro-counter>
112
+ Another short label
113
+ </auro-counter>
114
+ <auro-counter>
115
+ This is an example of the wrapping behavior for a long label
116
+ </auro-counter>
117
+ </auro-counter-group>
118
+ <!-- AURO-GENERATED-CONTENT:END -->
119
+ </div>
120
+ <div class="exampleWrapper--ondark" aria-hidden>
121
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
122
+ <!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
123
+ <auro-counter-group onDark>
124
+ <auro-counter>
125
+ Short label
126
+ </auro-counter>
127
+ <auro-counter>
128
+ Another short label
129
+ </auro-counter>
130
+ <auro-counter>
131
+ This is an example of the wrapping behavior for a long label
132
+ </auro-counter>
133
+ </auro-counter-group>
134
+ <!-- AURO-GENERATED-CONTENT:END -->
135
+ </div>
136
+ <auro-accordion alignRight>
137
+ <span slot="trigger">See code</span>
138
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
139
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
140
+
141
+ ```html
142
+ <auro-counter-group>
143
+ <auro-counter>
144
+ Short label
145
+ </auro-counter>
146
+ <auro-counter>
147
+ Another short label
148
+ </auro-counter>
149
+ <auro-counter>
150
+ This is an example of the wrapping behavior for a long label
151
+ </auro-counter>
152
+ </auro-counter-group>
153
+ ```
154
+ <!-- AURO-GENERATED-CONTENT:END -->
155
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkGroup.html) -->
156
+ <!-- The below content is automatically added from ./../apiExamples/onDarkGroup.html -->
157
+ <auro-counter-group onDark>
158
+ <auro-counter>
159
+ Short label
160
+ </auro-counter>
161
+ <auro-counter>
162
+ Another short label
163
+ </auro-counter>
164
+ <auro-counter>
165
+ This is an example of the wrapping behavior for a long label
166
+ </auro-counter>
167
+ </auro-counter-group>
168
+ <!-- AURO-GENERATED-CONTENT:END -->
169
+ </auro-accordion>
170
+
171
+ ### Dropdown Counter Group
172
+
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:
174
+
175
+ <div class="exampleWrapper">
176
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-basic.html) -->
177
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-basic.html -->
178
+ <auro-counter-group isDropdown>
179
+ <div slot="bib.fullscreen.headline">Passengers</div>
180
+ <div slot="label">Passengers</div>
181
+ <auro-counter>
182
+ Adults
183
+ <span slot="description">18 years or older</span>
184
+ </auro-counter>
185
+ <auro-counter>
186
+ Children
187
+ <span slot="description">2-17 years</span>
188
+ </auro-counter>
189
+ </auro-counter-group>
190
+ <!-- AURO-GENERATED-CONTENT:END -->
191
+ </div>
192
+ <div class="exampleWrapper--ondark" aria-hidden>
193
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/onDarkDropdown.html) -->
194
+ <!-- The below content is automatically added from ./../apiExamples/onDarkDropdown.html -->
195
+ <auro-counter-group onDark isDropdown>
196
+ <div slot="bib.fullscreen.headline">Passengers</div>
197
+ <div slot="label">Passengers</div>
198
+ <auro-counter>
199
+ Adults
200
+ <span slot="description">18 years or older</span>
201
+ </auro-counter>
202
+ <auro-counter>
203
+ Children
204
+ <span slot="description">2-17 years</span>
205
+ </auro-counter>
206
+ </auro-counter-group>
207
+ <!-- AURO-GENERATED-CONTENT:END -->
208
+ </div>
209
+ <auro-accordion alignRight>
210
+ <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 -->
244
+ </auro-accordion>