@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

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 (254) hide show
  1. package/components/checkbox/README.md +11 -27
  2. package/components/checkbox/demo/accessibility.html +49 -0
  3. package/components/checkbox/demo/accessibility.md +44 -0
  4. package/components/checkbox/demo/api.html +17 -25
  5. package/components/checkbox/demo/api.md +40 -416
  6. package/components/checkbox/demo/api.min.js +5 -4
  7. package/components/checkbox/demo/customize.html +52 -0
  8. package/components/checkbox/demo/customize.md +361 -0
  9. package/components/checkbox/demo/demo-support.js +60 -0
  10. package/components/checkbox/demo/design.html +52 -0
  11. package/components/checkbox/demo/design.md +149 -0
  12. package/components/checkbox/demo/getting-started.html +52 -0
  13. package/components/checkbox/demo/getting-started.md +261 -0
  14. package/components/checkbox/demo/index.html +17 -20
  15. package/components/checkbox/demo/index.md +144 -29
  16. package/components/checkbox/demo/index.min.js +5 -4
  17. package/components/checkbox/demo/keyboard-behavior.html +49 -0
  18. package/components/checkbox/demo/keyboard-behavior.md +0 -3
  19. package/components/checkbox/demo/layout.md +30 -0
  20. package/components/checkbox/demo/readme.html +10 -17
  21. package/components/checkbox/demo/readme.md +11 -27
  22. package/components/checkbox/demo/styles.css +974 -0
  23. package/components/checkbox/demo/voiceover.html +49 -0
  24. package/components/checkbox/demo/voiceover.md +37 -0
  25. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  26. package/components/checkbox/dist/index.js +5 -4
  27. package/components/checkbox/dist/registered.js +5 -4
  28. package/components/combobox/README.md +8 -29
  29. package/components/combobox/demo/accessibility.html +2 -20
  30. package/components/combobox/demo/accessibility.md +1 -1
  31. package/components/combobox/demo/api.html +5 -52
  32. package/components/combobox/demo/api.md +53 -2261
  33. package/components/combobox/demo/api.min.js +15 -12
  34. package/components/combobox/demo/customize.html +53 -0
  35. package/components/combobox/demo/customize.js +24 -0
  36. package/components/combobox/demo/customize.md +1249 -0
  37. package/components/combobox/demo/customize.min.js +18132 -0
  38. package/components/combobox/demo/demo-support.js +60 -0
  39. package/components/combobox/demo/design.html +2 -43
  40. package/components/combobox/demo/design.md +4 -4
  41. package/components/combobox/demo/getting-started.html +53 -0
  42. package/components/combobox/demo/{install.js → getting-started.js} +2 -5
  43. package/components/combobox/demo/getting-started.md +397 -0
  44. package/components/combobox/demo/{install.min.js → getting-started.min.js} +14 -38
  45. package/components/combobox/demo/index.html +4 -47
  46. package/components/combobox/demo/index.md +3 -569
  47. package/components/combobox/demo/index.min.js +15 -12
  48. package/components/combobox/demo/keyboard-behavior.html +2 -20
  49. package/components/combobox/demo/keyboard-behavior.md +2 -2
  50. package/components/combobox/demo/layout.md +2 -2
  51. package/components/combobox/demo/readme.html +2 -43
  52. package/components/combobox/demo/readme.md +8 -29
  53. package/components/combobox/demo/styles.css +98 -105
  54. package/components/combobox/demo/voiceover.html +2 -20
  55. package/components/combobox/demo/voiceover.md +1 -1
  56. package/components/combobox/dist/index.js +12 -10
  57. package/components/combobox/dist/registered.js +12 -10
  58. package/components/counter/README.md +21 -51
  59. package/components/counter/demo/accessibility.html +49 -0
  60. package/components/counter/demo/accessibility.md +34 -0
  61. package/components/counter/demo/api.html +12 -20
  62. package/components/counter/demo/api.md +49 -1299
  63. package/components/counter/demo/api.min.js +6 -6
  64. package/components/counter/demo/customize.html +53 -0
  65. package/components/counter/demo/customize.md +650 -0
  66. package/components/counter/demo/demo-support.js +60 -0
  67. package/components/counter/demo/design.html +52 -0
  68. package/components/counter/demo/design.md +192 -0
  69. package/components/counter/demo/getting-started.html +54 -0
  70. package/components/counter/demo/getting-started.md +332 -0
  71. package/components/counter/demo/index.html +14 -19
  72. package/components/counter/demo/index.md +113 -47
  73. package/components/counter/demo/index.min.js +6 -6
  74. package/components/counter/demo/keyboard-behavior.html +49 -0
  75. package/components/counter/demo/keyboard-behavior.md +1 -1
  76. package/components/counter/demo/keyboardBehavior.html +7 -39
  77. package/components/counter/demo/layout.md +10 -0
  78. package/components/counter/demo/readme.html +11 -15
  79. package/components/counter/demo/readme.md +21 -51
  80. package/components/counter/demo/styles.css +974 -0
  81. package/components/counter/demo/voiceover.html +51 -0
  82. package/components/counter/demo/voiceover.md +80 -0
  83. package/components/counter/dist/index.js +6 -6
  84. package/components/counter/dist/registered.js +6 -6
  85. package/components/datepicker/README.md +10 -24
  86. package/components/datepicker/demo/accessibility.html +50 -0
  87. package/components/datepicker/demo/accessibility.md +64 -0
  88. package/components/datepicker/demo/api.md +69 -1739
  89. package/components/datepicker/demo/api.min.js +14 -14
  90. package/components/datepicker/demo/customize.html +53 -0
  91. package/components/datepicker/demo/customize.md +723 -0
  92. package/components/datepicker/demo/demo-support.js +60 -0
  93. package/components/{select/demo/layout.html → datepicker/demo/design.html} +7 -47
  94. package/components/datepicker/demo/design.md +158 -0
  95. package/components/datepicker/demo/getting-started.html +53 -0
  96. package/components/datepicker/demo/getting-started.md +237 -0
  97. package/components/datepicker/demo/index.html +14 -34
  98. package/components/datepicker/demo/index.md +160 -103
  99. package/components/datepicker/demo/index.min.js +14 -14
  100. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  101. package/components/datepicker/demo/layout.md +92 -0
  102. package/components/datepicker/demo/readme.md +10 -24
  103. package/components/datepicker/demo/styles.css +974 -0
  104. package/components/{dropdown/demo/keyboardBehavior.html → datepicker/demo/voiceover.html} +14 -36
  105. package/components/datepicker/demo/voiceover.md +98 -0
  106. package/components/datepicker/dist/index.js +14 -14
  107. package/components/datepicker/dist/registered.js +14 -14
  108. package/components/dropdown/README.md +0 -25
  109. package/components/dropdown/demo/accessibility.html +49 -0
  110. package/components/dropdown/demo/accessibility.md +45 -0
  111. package/components/dropdown/demo/api.html +10 -19
  112. package/components/dropdown/demo/api.md +40 -1364
  113. package/components/dropdown/demo/api.min.js +2 -2
  114. package/components/dropdown/demo/customize.html +54 -0
  115. package/components/dropdown/demo/customize.md +780 -0
  116. package/components/dropdown/demo/demo-support.js +60 -0
  117. package/components/dropdown/demo/design.html +52 -0
  118. package/components/dropdown/demo/design.md +186 -0
  119. package/components/dropdown/demo/getting-started.html +54 -0
  120. package/components/dropdown/demo/getting-started.md +317 -0
  121. package/components/dropdown/demo/index.html +12 -20
  122. package/components/dropdown/demo/index.md +70 -225
  123. package/components/dropdown/demo/index.min.js +2 -2
  124. package/components/dropdown/demo/keyboard-behavior.html +49 -0
  125. package/components/dropdown/demo/keyboard-behavior.md +4 -8
  126. package/components/dropdown/demo/layout.md +21 -0
  127. package/components/dropdown/demo/readme.html +7 -20
  128. package/components/dropdown/demo/readme.md +0 -25
  129. package/components/dropdown/demo/styles.css +974 -0
  130. package/components/dropdown/demo/voiceover.html +51 -0
  131. package/components/dropdown/demo/voiceover.md +63 -0
  132. package/components/dropdown/dist/index.js +2 -2
  133. package/components/dropdown/dist/registered.js +2 -2
  134. package/components/form/README.md +9 -13
  135. package/components/form/demo/accessibility.html +51 -0
  136. package/components/form/demo/accessibility.md +23 -0
  137. package/components/form/demo/api.html +11 -14
  138. package/components/form/demo/api.md +14 -290
  139. package/components/form/demo/api.min.js +53 -50
  140. package/components/form/demo/customize.html +54 -0
  141. package/components/form/demo/customize.md +246 -0
  142. package/components/form/demo/demo-support.js +60 -0
  143. package/components/form/demo/getting-started.html +54 -0
  144. package/components/form/demo/getting-started.md +291 -0
  145. package/components/form/demo/index.html +12 -14
  146. package/components/form/demo/index.md +66 -96
  147. package/components/form/demo/index.min.js +53 -50
  148. package/components/form/demo/keyboard-behavior.html +51 -0
  149. package/components/form/demo/readme.html +12 -17
  150. package/components/form/demo/readme.md +9 -13
  151. package/components/form/demo/styles.css +974 -0
  152. package/components/form/demo/voiceover.html +51 -0
  153. package/components/form/demo/voiceover.md +36 -0
  154. package/components/helptext/dist/index.js +1 -1
  155. package/components/helptext/dist/registered.js +1 -1
  156. package/components/input/README.md +17 -28
  157. package/components/input/demo/accessibility.html +38 -0
  158. package/components/input/demo/accessibility.md +69 -0
  159. package/components/input/demo/api.html +17 -22
  160. package/components/input/demo/api.js +4 -23
  161. package/components/input/demo/api.md +67 -1267
  162. package/components/input/demo/api.min.js +6 -98
  163. package/components/input/demo/customize.html +54 -0
  164. package/components/input/demo/customize.js +25 -0
  165. package/components/input/demo/customize.md +1372 -0
  166. package/components/input/demo/customize.min.js +7431 -0
  167. package/components/input/demo/demo-support.js +60 -0
  168. package/components/input/demo/design.html +39 -0
  169. package/components/input/demo/design.md +224 -0
  170. package/components/input/demo/getting-started.html +53 -0
  171. package/components/input/demo/getting-started.js +8 -0
  172. package/components/input/demo/getting-started.md +312 -0
  173. package/components/input/demo/getting-started.min.js +7369 -0
  174. package/components/input/demo/index.html +16 -22
  175. package/components/input/demo/index.js +0 -11
  176. package/components/input/demo/index.md +171 -139
  177. package/components/input/demo/index.min.js +6 -18
  178. package/components/input/demo/keyboard-behavior.html +38 -0
  179. package/components/input/demo/layout.md +77 -0
  180. package/components/input/demo/readme.md +17 -28
  181. package/components/input/demo/styles.css +974 -0
  182. package/components/input/demo/voiceover.html +38 -0
  183. package/components/input/demo/voiceover.md +70 -0
  184. package/components/input/dist/base-input.d.ts +1 -0
  185. package/components/input/dist/index.js +6 -6
  186. package/components/input/dist/registered.js +6 -6
  187. package/components/menu/README.md +1 -5
  188. package/components/menu/demo/api.md +43 -43
  189. package/components/menu/demo/api.min.js +2 -2
  190. package/components/menu/demo/index.md +1 -1
  191. package/components/menu/demo/index.min.js +2 -2
  192. package/components/menu/demo/readme.md +1 -5
  193. package/components/menu/dist/index.js +2 -2
  194. package/components/menu/dist/registered.js +2 -2
  195. package/components/radio/README.md +9 -22
  196. package/components/radio/demo/accessibility.html +51 -0
  197. package/components/radio/demo/accessibility.md +44 -0
  198. package/components/radio/demo/api.html +13 -20
  199. package/components/radio/demo/api.md +44 -589
  200. package/components/radio/demo/api.min.js +3 -3
  201. package/components/radio/demo/customize.html +53 -0
  202. package/components/radio/demo/customize.md +368 -0
  203. package/components/radio/demo/demo-support.js +60 -0
  204. package/components/radio/demo/design.html +52 -0
  205. package/components/radio/demo/design.md +143 -0
  206. package/components/radio/demo/getting-started.html +54 -0
  207. package/components/radio/demo/getting-started.md +296 -0
  208. package/components/radio/demo/index.html +16 -19
  209. package/components/radio/demo/index.md +110 -45
  210. package/components/radio/demo/index.min.js +3 -3
  211. package/components/radio/demo/keyboard-behavior.html +51 -0
  212. package/components/radio/demo/layout.md +30 -0
  213. package/components/radio/demo/readme.html +11 -17
  214. package/components/radio/demo/readme.md +9 -22
  215. package/components/radio/demo/styles.css +974 -0
  216. package/components/radio/demo/voiceover.html +51 -0
  217. package/components/radio/demo/voiceover.md +43 -0
  218. package/components/radio/dist/index.js +3 -3
  219. package/components/radio/dist/registered.js +3 -3
  220. package/components/select/README.md +7 -4
  221. package/components/select/demo/accessibility.html +5 -21
  222. package/components/select/demo/accessibility.md +1 -1
  223. package/components/select/demo/api.html +3 -48
  224. package/components/select/demo/api.md +52 -2342
  225. package/components/select/demo/customize.html +54 -0
  226. package/components/select/demo/customize.js +11 -0
  227. package/components/select/demo/customize.md +1049 -0
  228. package/components/select/demo/{api.min.js → customize.min.js} +12 -113
  229. package/components/select/demo/demo-support.js +60 -0
  230. package/components/select/demo/design.html +3 -44
  231. package/components/select/demo/design.md +2 -2
  232. package/components/select/demo/getting-started.html +5 -76
  233. package/components/select/demo/getting-started.js +20 -3
  234. package/components/select/demo/getting-started.md +97 -705
  235. package/components/select/demo/getting-started.min.js +58 -9
  236. package/components/select/demo/index.html +4 -43
  237. package/components/select/demo/index.js +5 -3
  238. package/components/select/demo/index.md +2 -2
  239. package/components/select/demo/index.min.js +14 -9
  240. package/components/select/demo/keyboard-behavior.html +6 -47
  241. package/components/select/demo/keyboard-behavior.md +5 -6
  242. package/components/select/demo/keyboardBehavior.html +4 -46
  243. package/components/select/demo/readme.html +3 -44
  244. package/components/select/demo/readme.md +7 -4
  245. package/components/select/demo/styles.css +57 -109
  246. package/components/select/demo/voiceover.html +3 -30
  247. package/components/select/dist/index.js +5 -5
  248. package/components/select/dist/registered.js +5 -5
  249. package/custom-elements.json +249 -246
  250. package/package.json +3 -3
  251. package/components/combobox/demo/install.html +0 -94
  252. package/components/combobox/demo/install.md +0 -98
  253. package/components/select/demo/api.js +0 -39
  254. package/components/select/demo/install.md +0 -92
package/components/counter/demo/demo-support.js ADDED
@@ -0,0 +1,60 @@
1
+ import {unified} from 'https://esm.sh/unified';
2
+ import remarkParse from 'https://esm.sh/remark-parse';
3
+ import remarkGfm from 'https://esm.sh/remark-gfm';
4
+ import remarkRehype from 'https://esm.sh/remark-rehype';
5
+ import rehypeRaw from 'https://esm.sh/rehype-raw';
6
+ import rehypeHighlight from 'https://esm.sh/rehype-highlight';
7
+ import rehypeStringify from 'https://esm.sh/rehype-stringify';
8
+
9
+ export async function renderPage(mdPath) {
10
+ const response = await fetch(mdPath);
11
+ const text = await response.text();
12
+ const result = await unified()
13
+ .use(remarkParse)
14
+ .use(remarkGfm)
15
+ .use(remarkRehype, { allowDangerousHtml: true })
16
+ .use(rehypeRaw)
17
+ .use(rehypeHighlight)
18
+ .use(rehypeStringify)
19
+ .process(text);
20
+
21
+ document.querySelector('main').innerHTML = String(result);
22
+ addCopyButtons();
23
+ }
24
+
25
+ function addCopyButtons() {
26
+ document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
27
+ const pre = code.parentElement;
28
+ const wrapper = document.createElement('div');
29
+ wrapper.className = 'pre-wrapper';
30
+ pre.parentNode.insertBefore(wrapper, pre);
31
+ wrapper.appendChild(pre);
32
+ const btn = document.createElement('button');
33
+ btn.className = 'copy-btn';
34
+ btn.textContent = 'Copy';
35
+ btn.addEventListener('click', () => {
36
+ const raw = code.textContent;
37
+ const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
38
+ navigator.clipboard.writeText(text).then(() => {
39
+ btn.textContent = 'Copied!';
40
+ setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
41
+ });
42
+ });
43
+ wrapper.appendChild(btn);
44
+ });
45
+ }
46
+
47
+ export function openAccordion(id) {
48
+ document.querySelectorAll('auro-accordion').forEach((accordion) => {
49
+ accordion.removeAttribute('expanded');
50
+ });
51
+ const target = document.getElementById(id);
52
+ if (target) {
53
+ target.setAttribute('expanded', '');
54
+ setTimeout(() => {
55
+ target.scrollIntoView({ behavior: 'smooth', block: 'start' });
56
+ }, 550);
57
+ }
58
+ }
59
+
60
+ window.openAccordion = openAccordion;
package/components/counter/demo/design.html ADDED
@@ -0,0 +1,52 @@
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/design.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 Demo | auro-counter | Design</title>
20
+
21
+ <!-- highlight.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.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 -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import { renderPage } from './demo-support.js';
42
+ await renderPage('./design.md');
43
+ </script>
44
+
45
+ <!-- If additional elements are needed for the demo, add them here. -->
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
49
+
50
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
51
+ </body>
52
+ </html>
package/components/counter/demo/design.md ADDED
@@ -0,0 +1,192 @@
1
+ <auro-header level="1" id="overview">Counter - Design</auro-header>
2
+ <div class="contentWrapper">
3
+ <div class="mainContent">
4
+ <div class="scrollWrapper">
5
+ <section>
6
+ <auro-header level="2" id="anatomy">Anatomy</auro-header>
7
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/layout/layout.md) -->
8
+ <!-- The below content is automatically added from ./../docs/partials/layout/layout.md -->
9
+ The counter component consists of the following key elements:
10
+
11
+ - **Counter Label** — The main label text (default slot) identifying what is being counted
12
+ - **Description** — Optional supplementary text below the label (description slot)
13
+ - **Increment Button** — Increases the counter value by 1
14
+ - **Decrement Button** — Decreases the counter value by 1
15
+ - **Value Display** — Shows the current numeric value
16
+ - **Help Text** — Optional guidance text below the counter (helpText slot)
17
+
18
+ In a **counter group**, multiple counters are rendered together. When used with the `isDropdown` attribute, the group appears as a collapsible dropdown with a trigger element showing a label and summary of values.
19
+ <!-- AURO-GENERATED-CONTENT:END -->
20
+ </section>
21
+ <section>
22
+ <auro-header level="2" id="defaultLayout">Standalone Counter</auro-header>
23
+ <div class="exampleWrapper">
24
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
25
+ <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
26
+ <auro-counter>
27
+ Adults
28
+ </auro-counter>
29
+ <!-- AURO-GENERATED-CONTENT:END -->
30
+ </div>
31
+ </section>
32
+ <section>
33
+ <auro-header level="2" id="groupLayout">Counter Group</auro-header>
34
+ <div class="exampleWrapper">
35
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
36
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
37
+ <auro-counter-group>
38
+ <auro-counter>
39
+ Short label
40
+ </auro-counter>
41
+ <auro-counter>
42
+ Another short label
43
+ </auro-counter>
44
+ <auro-counter>
45
+ This is an example of the wrapping behavior for a long label
46
+ </auro-counter>
47
+ </auro-counter-group>
48
+ <!-- AURO-GENERATED-CONTENT:END -->
49
+ </div>
50
+ </section>
51
+ <section>
52
+ <auro-header level="2" id="dropdownLayout">Dropdown Counter</auro-header>
53
+ <div class="exampleWrapper">
54
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
55
+ <!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
56
+ <auro-counter-group isDropdown>
57
+ <span slot="ariaLabel.bib.close">Close Popup</span>
58
+ <span slot="bib.fullscreen.headline">Passengers</span>
59
+ <div slot="label">Passengers</div>
60
+ <auro-counter>
61
+ Adults
62
+ <span slot="description">18 years or older</span>
63
+ </auro-counter>
64
+ <auro-counter>
65
+ Children
66
+ <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
67
+ </auro-counter>
68
+ <auro-counter>
69
+ Lap Infants
70
+ <span slot="description">Under 2 years</span>
71
+ </auro-counter>
72
+ </auro-counter-group>
73
+ <!-- AURO-GENERATED-CONTENT:END -->
74
+ </div>
75
+ </section>
76
+ <section>
77
+ <auro-header level="2" id="colors">Colors</auro-header>
78
+ <auro-header level="3" id="defaultColor">Default Color</auro-header>
79
+ <div class="exampleWrapper">
80
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic-standalone.html) -->
81
+ <!-- The below content is automatically added from ./../apiExamples/basic-standalone.html -->
82
+ <auro-counter>
83
+ Adults
84
+ </auro-counter>
85
+ <!-- AURO-GENERATED-CONTENT:END -->
86
+ </div>
87
+ <auro-header level="3" id="inverseColor">Inverse Color</auro-header>
88
+ <div class="exampleWrapper--ondark" aria-hidden>
89
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
90
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
91
+ <auro-counter appearance="inverse">
92
+ Adults
93
+ </auro-counter>
94
+ <!-- AURO-GENERATED-CONTENT:END -->
95
+ </div>
96
+ </section>
97
+ <section>
98
+ <auro-header level="2" id="shapeSizeLayout">Shape | Size | Layout Support</auro-header>
99
+ <p>The <code>auro-counter-group</code> component supports the <code>shape</code>, <code>size</code> and <code>layout</code> feature set. The component defaults to <code>layout="classic"</code>, <code>shape="classic"</code> and <code>size="lg"</code>.</p>
100
+ <auro-header level="3" id="classicLayout">Classic Layout</auro-header>
101
+ <p>The <code>classic</code> layout is default for <code>auro-counter-group</code>. No customization is needed to achieve this look.</p>
102
+ <div class="exampleWrapper">
103
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown.html) -->
104
+ <!-- The below content is automatically added from ./../apiExamples/dropdown.html -->
105
+ <auro-counter-group isDropdown>
106
+ <span slot="ariaLabel.bib.close">Close Popup</span>
107
+ <span slot="bib.fullscreen.headline">Passengers</span>
108
+ <div slot="label">Passengers</div>
109
+ <auro-counter>
110
+ Adults
111
+ <span slot="description">18 years or older</span>
112
+ </auro-counter>
113
+ <auro-counter>
114
+ Children
115
+ <span slot="description">Under 17 years old. Restrictions apply if traveling without an adult.</span>
116
+ </auro-counter>
117
+ <auro-counter>
118
+ Lap Infants
119
+ <span slot="description">Under 2 years</span>
120
+ </auro-counter>
121
+ </auro-counter-group>
122
+ <!-- AURO-GENERATED-CONTENT:END -->
123
+ </div>
124
+ <auro-accordion alignRight>
125
+ <span slot="trigger">See code</span>
126
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown.html) -->
127
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown.html -->
128
+ <pre class="language-html"><code class="language-html">&lt;auro-counter-group isDropdown&gt;
129
+ &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
130
+ &lt;span slot="bib.fullscreen.headline"&gt;Passengers&lt;/span&gt;
131
+ &lt;div slot="label"&gt;Passengers&lt;/div&gt;
132
+ &lt;auro-counter&gt;
133
+ Adults
134
+ &lt;span slot="description"&gt;18 years or older&lt;/span&gt;
135
+ &lt;/auro-counter&gt;
136
+ &lt;auro-counter&gt;
137
+ Children
138
+ &lt;span slot="description"&gt;Under 17 years old. Restrictions apply if traveling without an adult.&lt;/span&gt;
139
+ &lt;/auro-counter&gt;
140
+ &lt;auro-counter&gt;
141
+ Lap Infants
142
+ &lt;span slot="description"&gt;Under 2 years&lt;/span&gt;
143
+ &lt;/auro-counter&gt;
144
+ &lt;/auro-counter-group&gt;</code></pre>
145
+ <!-- AURO-GENERATED-CONTENT:END -->
146
+ </auro-accordion>
147
+ <auro-header level="3" id="snowflakeLayout">Snowflake Layout</auro-header>
148
+ <p>The <code>snowflake</code> layout is a unique, one off layout that does not follow the normal pattern. There is only one way to use snowflake as shown in the following example.</p>
149
+ <p>The <code>snowflake</code> layout is only expected to be used on dark backgrounds, in conjunction with <code>appearance="inverse"</code>.</p>
150
+ <div class="exampleWrapper--ondark">
151
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/dropdown-snowflake.html) -->
152
+ <!-- The below content is automatically added from ./../apiExamples/dropdown-snowflake.html -->
153
+ <!-- Example of counter-group properties -->
154
+ <auro-counter-group max="10" min="2" isDropdown layout="snowflake" shape="snowflake" appearance="inverse">
155
+ <span slot="ariaLabel.bib.close">Close Popup</span>
156
+ <div slot="bib.fullscreen.headline">Group fullscreen label</div>
157
+ <auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor></auro-icon>
158
+ <div slot="label">Snowflake Dropdown Group</div>
159
+ <div slot="helpText">Total must be between 2-10</div>
160
+ <auro-counter>
161
+ Counter 1
162
+ </auro-counter>
163
+ <auro-counter>
164
+ Counter 2
165
+ </auro-counter>
166
+ </auro-counter-group>
167
+ <!-- AURO-GENERATED-CONTENT:END -->
168
+ </div>
169
+ <auro-accordion alignRight>
170
+ <span slot="trigger">See code</span>
171
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/dropdown-snowflake.html) -->
172
+ <!-- The below code snippet is automatically added from ./../apiExamples/dropdown-snowflake.html -->
173
+ <pre class="language-html"><code class="language-html">&lt;!-- Example of counter-group properties --&gt;
174
+ &lt;auro-counter-group max="10" min="2" isDropdown layout="snowflake" shape="snowflake" appearance="inverse"&gt;
175
+ &lt;span slot="ariaLabel.bib.close"&gt;Close Popup&lt;/span&gt;
176
+ &lt;div slot="bib.fullscreen.headline"&gt;Group fullscreen label&lt;/div&gt;
177
+ &lt;auro-icon slot="typeIcon" category="interface" name="account-stroke" customColor&gt;&lt;/auro-icon&gt;
178
+ &lt;div slot="label"&gt;Snowflake Dropdown Group&lt;/div&gt;
179
+ &lt;div slot="helpText"&gt;Total must be between 2-10&lt;/div&gt;
180
+ &lt;auro-counter&gt;
181
+ Counter 1
182
+ &lt;/auro-counter&gt;
183
+ &lt;auro-counter&gt;
184
+ Counter 2
185
+ &lt;/auro-counter&gt;
186
+ &lt;/auro-counter-group&gt;</code></pre>
187
+ <!-- AURO-GENERATED-CONTENT:END -->
188
+ </auro-accordion>
189
+ </section>
190
+ </div>
191
+ </div>
192
+ </div>
package/components/counter/demo/getting-started.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/getting-started.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 Demo | auro-counter | Getting Started</title>
20
+
21
+ <!-- highlight.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.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 -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
36
+ </head>
37
+ <body class="auro-markdown">
38
+ <main></main>
39
+
40
+ <script type="module">
41
+ import { renderPage } from './demo-support.js';
42
+ await renderPage('./getting-started.md');
43
+ </script>
44
+
45
+ <!-- If additional elements are needed for the demo, add them here. -->
46
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
49
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
50
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
51
+
52
+ <script src="./api.min.js" data-demo-script="true" type="module"></script>
53
+ </body>
54
+ </html>