@aurodesignsystem-dev/auro-formkit 0.0.0-pr1456.1 → 0.0.0-pr1457.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 (281) hide show
  1. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +10 -10
  3. package/components/bibtemplate/dist/registered.js +10 -10
  4. package/components/checkbox/README.md +26 -56
  5. package/components/checkbox/demo/accessibility.html +48 -0
  6. package/components/checkbox/demo/accessibility.md +44 -0
  7. package/components/checkbox/demo/api.html +17 -26
  8. package/components/checkbox/demo/api.md +0 -396
  9. package/components/checkbox/demo/api.min.js +2 -2106
  10. package/components/checkbox/demo/customize.html +51 -0
  11. package/components/checkbox/demo/customize.md +361 -0
  12. package/components/checkbox/demo/demo-support.js +60 -0
  13. package/components/checkbox/demo/demo-support.min.js +55732 -0
  14. package/components/checkbox/demo/design.html +51 -0
  15. package/components/checkbox/demo/design.md +149 -0
  16. package/components/checkbox/demo/getting-started.html +51 -0
  17. package/components/checkbox/demo/getting-started.md +261 -0
  18. package/components/checkbox/demo/index.html +17 -21
  19. package/components/checkbox/demo/index.md +158 -45
  20. package/components/checkbox/demo/index.min.js +2 -3
  21. package/components/checkbox/demo/install.md +82 -0
  22. package/components/checkbox/demo/keyboard-behavior.html +48 -0
  23. package/components/checkbox/demo/readme.html +10 -18
  24. package/components/checkbox/demo/readme.md +26 -56
  25. package/components/checkbox/demo/styles.min.css +1 -0
  26. package/components/checkbox/demo/styles.scss +1 -0
  27. package/components/checkbox/demo/voiceover.html +48 -0
  28. package/components/checkbox/demo/voiceover.md +37 -0
  29. package/components/checkbox/dist/auro-checkbox-group.d.ts +6 -6
  30. package/components/checkbox/dist/auro-checkbox.d.ts +8 -9
  31. package/components/checkbox/dist/index.js +2 -3
  32. package/components/checkbox/dist/registered.js +2 -3
  33. package/components/combobox/README.md +41 -66
  34. package/components/combobox/demo/accessibility.html +50 -0
  35. package/components/combobox/demo/accessibility.md +77 -0
  36. package/components/combobox/demo/api.html +8 -20
  37. package/components/combobox/demo/api.md +54 -2334
  38. package/components/combobox/demo/api.min.js +3 -17971
  39. package/components/combobox/demo/customize.html +52 -0
  40. package/components/combobox/demo/customize.js +24 -0
  41. package/components/combobox/demo/customize.md +1249 -0
  42. package/components/combobox/demo/customize.min.js +177 -0
  43. package/components/combobox/demo/demo-support.js +60 -0
  44. package/components/combobox/demo/demo-support.min.js +55732 -0
  45. package/components/combobox/demo/design.html +53 -0
  46. package/components/combobox/demo/design.md +283 -0
  47. package/components/combobox/demo/getting-started.html +52 -0
  48. package/components/combobox/demo/getting-started.js +21 -0
  49. package/components/combobox/demo/getting-started.md +397 -0
  50. package/components/combobox/demo/getting-started.min.js +12 -0
  51. package/components/combobox/demo/index.html +16 -22
  52. package/components/combobox/demo/index.js +3 -2
  53. package/components/combobox/demo/index.md +298 -188
  54. package/components/combobox/demo/index.min.js +13 -17956
  55. package/components/combobox/demo/install.md +77 -0
  56. package/components/combobox/demo/{keyboardBehavior.html → keyboard-behavior.html} +5 -11
  57. package/components/combobox/demo/keyboard-behavior.md +276 -0
  58. package/components/combobox/demo/readme.html +5 -11
  59. package/components/combobox/demo/readme.md +41 -66
  60. package/components/combobox/demo/registered.min.js +18095 -0
  61. package/components/combobox/demo/styles.css +974 -0
  62. package/components/combobox/demo/styles.min.css +1 -0
  63. package/components/combobox/demo/styles.scss +1 -0
  64. package/components/combobox/demo/swap-value.min.js +16 -0
  65. package/components/combobox/demo/voiceover.html +59 -0
  66. package/components/combobox/demo/voiceover.md +118 -0
  67. package/components/combobox/dist/auro-combobox.d.ts +35 -35
  68. package/components/combobox/dist/index.js +183 -46
  69. package/components/combobox/dist/registered.js +183 -46
  70. package/components/counter/README.md +37 -55
  71. package/components/counter/demo/api.md +745 -813
  72. package/components/counter/demo/api.min.js +182 -44
  73. package/components/counter/demo/index.md +28 -32
  74. package/components/counter/demo/index.min.js +182 -44
  75. package/components/counter/demo/keyboard-behavior.md +127 -0
  76. package/components/counter/demo/readme.md +37 -55
  77. package/components/counter/dist/auro-counter-group.d.ts +2 -2
  78. package/components/counter/dist/auro-counter.d.ts +10 -10
  79. package/components/counter/dist/index.js +181 -43
  80. package/components/counter/dist/registered.js +181 -43
  81. package/components/datepicker/README.md +23 -51
  82. package/components/datepicker/demo/accessibility.html +50 -0
  83. package/components/datepicker/demo/accessibility.md +64 -0
  84. package/components/datepicker/demo/api.md +0 -1774
  85. package/components/datepicker/demo/api.min.js +2 -24475
  86. package/components/datepicker/demo/auro-datepicker.min.js +24613 -0
  87. package/components/datepicker/demo/customize.html +52 -0
  88. package/components/datepicker/demo/customize.md +723 -0
  89. package/components/datepicker/demo/demo-support.js +60 -0
  90. package/components/datepicker/demo/demo-support.min.js +55732 -0
  91. package/components/datepicker/demo/design.html +54 -0
  92. package/components/datepicker/demo/design.md +158 -0
  93. package/components/datepicker/demo/getting-started.html +52 -0
  94. package/components/datepicker/demo/getting-started.md +237 -0
  95. package/components/datepicker/demo/index.html +14 -35
  96. package/components/datepicker/demo/index.md +201 -152
  97. package/components/datepicker/demo/index.min.js +1 -24474
  98. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  99. package/components/datepicker/demo/readme.md +23 -51
  100. package/components/datepicker/demo/styles.min.css +1 -0
  101. package/components/datepicker/demo/styles.scss +1 -0
  102. package/components/datepicker/demo/voiceover.html +59 -0
  103. package/components/datepicker/demo/voiceover.md +98 -0
  104. package/components/datepicker/dist/index.js +194 -57
  105. package/components/datepicker/dist/registered.js +194 -57
  106. package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +2 -2
  107. package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +13 -13
  108. package/components/datepicker/dist/src/iconVersion.d.ts +2 -0
  109. package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +4 -4
  110. package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +3 -3
  111. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +2 -2
  112. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +1 -1
  113. package/components/dropdown/README.md +35 -53
  114. package/components/dropdown/demo/api.md +717 -773
  115. package/components/dropdown/demo/api.min.js +161 -23
  116. package/components/dropdown/demo/index.md +120 -130
  117. package/components/dropdown/demo/index.min.js +161 -23
  118. package/components/dropdown/demo/{keyboardBehavior.md → keyboard-behavior.md} +52 -57
  119. package/components/dropdown/demo/readme.md +35 -53
  120. package/components/dropdown/dist/auro-dropdown.d.ts +22 -22
  121. package/components/dropdown/dist/auro-dropdownBib.d.ts +3 -3
  122. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +1 -1
  123. package/components/dropdown/dist/iconVersion.d.ts +1 -1
  124. package/components/dropdown/dist/index.js +160 -22
  125. package/components/dropdown/dist/registered.js +160 -22
  126. package/components/form/README.md +14 -34
  127. package/components/form/demo/api.md +156 -162
  128. package/components/form/demo/api.min.js +756 -208
  129. package/components/form/demo/index.md +27 -33
  130. package/components/form/demo/index.min.js +756 -208
  131. package/components/form/demo/keyboard-behavior.md +38 -0
  132. package/components/form/demo/readme.md +14 -34
  133. package/components/input/README.md +28 -53
  134. package/components/input/demo/accessibility.html +37 -0
  135. package/components/input/demo/accessibility.md +69 -0
  136. package/components/input/demo/api.html +17 -23
  137. package/components/input/demo/api.js +4 -23
  138. package/components/input/demo/api.md +67 -1359
  139. package/components/input/demo/api.min.js +1 -7453
  140. package/components/input/demo/auro-input.min.js +7362 -0
  141. package/components/input/demo/customize.html +53 -0
  142. package/components/input/demo/customize.js +25 -0
  143. package/components/input/demo/customize.md +1372 -0
  144. package/components/input/demo/customize.min.js +71 -0
  145. package/components/input/demo/demo-support.js +60 -0
  146. package/components/input/demo/demo-support.min.js +55732 -0
  147. package/components/input/demo/design.html +38 -0
  148. package/components/input/demo/design.md +224 -0
  149. package/components/input/demo/getting-started.html +52 -0
  150. package/components/input/demo/getting-started.js +8 -0
  151. package/components/input/demo/getting-started.md +312 -0
  152. package/components/input/demo/getting-started.min.js +9 -0
  153. package/components/input/demo/index.html +16 -23
  154. package/components/input/demo/index.js +0 -11
  155. package/components/input/demo/index.md +180 -154
  156. package/components/input/demo/index.min.js +1 -7373
  157. package/components/input/demo/keyboard-behavior.html +37 -0
  158. package/components/input/demo/readme.md +28 -53
  159. package/components/input/demo/styles.css +974 -0
  160. package/components/input/demo/styles.min.css +1 -0
  161. package/components/input/demo/styles.scss +1 -0
  162. package/components/input/demo/voiceover.html +37 -0
  163. package/components/input/demo/voiceover.md +70 -0
  164. package/components/input/dist/auro-input.d.ts +1 -1
  165. package/components/input/dist/base-input.d.ts +29 -30
  166. package/components/input/dist/iconVersion.d.ts +1 -1
  167. package/components/input/dist/index.js +10 -11
  168. package/components/input/dist/registered.js +10 -11
  169. package/components/menu/README.md +24 -42
  170. package/components/menu/demo/api.md +785 -829
  171. package/components/menu/demo/api.min.js +7 -7
  172. package/components/menu/demo/index.md +33 -35
  173. package/components/menu/demo/index.min.js +7 -7
  174. package/components/menu/demo/keyboard-behavior.md +18 -0
  175. package/components/menu/demo/readme.md +24 -42
  176. package/components/menu/dist/auro-menu-utils.d.ts +1 -1
  177. package/components/menu/dist/auro-menu.context.d.ts +3 -3
  178. package/components/menu/dist/auro-menu.d.ts +4 -4
  179. package/components/menu/dist/auro-menuoption.d.ts +6 -6
  180. package/components/menu/dist/index.js +6 -6
  181. package/components/menu/dist/registered.js +6 -6
  182. package/components/radio/README.md +22 -49
  183. package/components/radio/demo/accessibility.html +51 -0
  184. package/components/radio/demo/accessibility.md +44 -0
  185. package/components/radio/demo/api.html +13 -20
  186. package/components/radio/demo/api.md +44 -621
  187. package/components/radio/demo/api.min.js +1 -1
  188. package/components/radio/demo/customize.html +53 -0
  189. package/components/radio/demo/customize.md +368 -0
  190. package/components/radio/demo/demo-support.js +60 -0
  191. package/components/radio/demo/design.html +52 -0
  192. package/components/radio/demo/design.md +143 -0
  193. package/components/radio/demo/getting-started.html +54 -0
  194. package/components/radio/demo/getting-started.md +296 -0
  195. package/components/radio/demo/index.html +16 -19
  196. package/components/radio/demo/index.md +124 -63
  197. package/components/radio/demo/index.min.js +1 -1
  198. package/components/radio/demo/keyboard-behavior.html +51 -0
  199. package/components/radio/demo/keyboard-behavior.md +72 -0
  200. package/components/radio/demo/layout.md +30 -0
  201. package/components/radio/demo/readme.html +11 -17
  202. package/components/radio/demo/readme.md +22 -49
  203. package/components/radio/demo/styles.css +974 -0
  204. package/components/radio/demo/voiceover.html +51 -0
  205. package/components/radio/demo/voiceover.md +43 -0
  206. package/components/radio/dist/auro-radio-group.d.ts +9 -9
  207. package/components/radio/dist/auro-radio.d.ts +8 -8
  208. package/components/radio/dist/index.js +1 -1
  209. package/components/radio/dist/registered.js +1 -1
  210. package/components/select/README.md +50 -68
  211. package/components/select/demo/accessibility.html +50 -0
  212. package/components/select/demo/accessibility.md +76 -0
  213. package/components/select/demo/api.html +5 -17
  214. package/components/select/demo/api.md +52 -2422
  215. package/components/select/demo/customize.html +52 -0
  216. package/components/select/demo/customize.js +11 -0
  217. package/components/select/demo/customize.md +1049 -0
  218. package/components/select/demo/customize.min.js +12 -0
  219. package/components/select/demo/demo-support.js +60 -0
  220. package/components/select/demo/demo-support.min.js +55732 -0
  221. package/components/select/demo/design.html +51 -0
  222. package/components/select/demo/design.md +391 -0
  223. package/components/select/demo/getting-started.html +52 -0
  224. package/components/select/demo/getting-started.js +26 -0
  225. package/components/select/demo/getting-started.md +412 -0
  226. package/components/select/demo/getting-started.min.js +56 -0
  227. package/components/select/demo/index.html +18 -35
  228. package/components/select/demo/index.js +5 -3
  229. package/components/select/demo/index.md +165 -345
  230. package/components/select/demo/index.min.js +6 -10484
  231. package/components/select/demo/install.md +95 -0
  232. package/components/select/demo/keyboard-behavior.html +8 -39
  233. package/components/select/demo/keyboard-behavior.md +249 -0
  234. package/components/select/demo/keyboardBehavior.html +5 -38
  235. package/components/select/demo/layout.html +51 -0
  236. package/components/select/demo/readme.html +5 -13
  237. package/components/select/demo/readme.md +50 -68
  238. package/components/select/demo/{api.min.js → registered.min.js} +179 -151
  239. package/components/select/demo/styles.min.css +1 -0
  240. package/components/select/demo/styles.scss +1 -0
  241. package/components/select/demo/voiceover.html +48 -0
  242. package/components/select/demo/voiceover.md +183 -0
  243. package/components/select/dist/auro-select.d.ts +11 -11
  244. package/components/select/dist/index.js +171 -33
  245. package/components/select/dist/registered.js +171 -33
  246. package/custom-elements.json +1491 -1494
  247. package/package.json +37 -30
  248. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  249. package/components/combobox/demo/keyboardBehavior.md +0 -281
  250. package/components/counter/demo/keyboardBehavior.md +0 -127
  251. package/components/datepicker/demo/keyboardBehavior.md +0 -19
  252. package/components/datepicker/dist/iconVersion.d.ts +0 -2
  253. package/components/form/demo/keyboardBehavior.md +0 -0
  254. package/components/input/demo/keyboardBehavior.md +0 -0
  255. package/components/menu/demo/keyboardBehavior.md +0 -0
  256. package/components/radio/demo/keyboardBehavior.md +0 -0
  257. package/components/select/demo/api.js +0 -39
  258. package/components/select/demo/keyboardBehavior.md +0 -245
  259. /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
  260. /package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +0 -0
  261. /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
  262. /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
  263. /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
  264. /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
  265. /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
  266. /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
  267. /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
  268. /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
  269. /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
  270. /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
  271. /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
  272. /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
  273. /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
  274. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
  275. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
  276. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
  277. /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
  278. /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
  279. /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
  280. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
  281. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
package/components/combobox/demo/design.html ADDED
@@ -0,0 +1,53 @@
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-combobox | 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-combobox'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="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
37
+ </head>
38
+ <body class="auro-markdown">
39
+ <main></main>
40
+
41
+ <script type="module">
42
+ import { renderPage } from './demo-support.js';
43
+ await renderPage('./design.md');
44
+ </script>
45
+
46
+ <!-- If additional elements are needed for the demo, add them here. -->
47
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
49
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
50
+
51
+ <script src="./index.min.js" data-demo-script="true" type="module"></script>
52
+ </body>
53
+ </html>
package/components/combobox/demo/design.md ADDED
@@ -0,0 +1,283 @@
1
+ <auro-header level="1" id="overview">Combobox - Design</auro-header>
2
+ <div class="contentWrapper">
3
+ <div class="mainContent">
4
+ <div class="scrollWrapper">
5
+ <auro-header level="3" id="anatomy">Component Anatomy</auro-header>
6
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/layout/layout.md) -->
7
+ <!-- The below content is automatically added from ./../docs/partials/layout/layout.md -->
8
+ <p>The component consists of the following elements:</p>
9
+ <ul>
10
+ <li>
11
+ <strong>trigger:</strong> shows the component label, current value and will render to reflect state of the component (e.g. <code>focus</code>, <code>hover</code>, <code>disabled</code>, <code>valid</code>, <code>invalid</code>), and a flag marking instances that are required. The trigger includes a text input that allows the user to type and filter the available options.
12
+ </li>
13
+ <li>
14
+ <strong>options list:</strong> a list of options that may be selected which are rendered in an element which can be expanded/collapsed by interacting with the trigger. The list is filtered based on user input.
15
+ </li>
16
+ <li>
17
+ <strong>help text:</strong> descriptive text rendered below the trigger intended to help clarify the intended use of the component instance and any current validation error with instructions to resolve those errors.
18
+ </li>
19
+ </ul>
20
+ <auro-header level="4" id="trigger">Trigger</auro-header>
21
+ <p>The trigger includes the component label, a flag marking the component optional/required and the current value. This label is required in order to ensure correct behavior when a guest is using accessibility tools such as screen readers and VoiceOver utilities. The invalid state will also announce to accessibility tools when applied.</p>
22
+ <p>The optional/required flag content may be customized.</p>
23
+ <p>When rendering the value of a selected option, the text content of the option will render in the input field.</p>
24
+ <p>The trigger is a focusable element and will visually respond to common UI states - <strong>Hover</strong> <em>(:hover)</em>, <strong>Focus</strong> <em>(:focus / :focus-visible)</em>, <strong>Disabled</strong> <em>(:disabled)</em>. The component does not have a visual response to the <strong>Active</strong> <em>(:active)</em> state.</p>
25
+ <auro-header level="4" id="options">List Options</auro-header>
26
+ <p>The component will render a list of options that may be selected. Options are filtered as the user types in the input. Each option may be in one of the following states when rendered:</p>
27
+ <ul>
28
+ <li>
29
+ <code>selected</code> - One option may be selected at a time and identifies the current value of the component.
30
+ </li>
31
+ <li>
32
+ <code>active</code> - One option may be active at a time. The active option indicates the item that will become selected if the user chooses.
33
+ </li>
34
+ <li>
35
+ <code>disabled</code> - One or more options may be disabled. Disabled options are not interactive and cannot be marked as active or selected.
36
+ </li>
37
+ </ul>
38
+ <auro-header level="4" id="helpText">Help Text</auro-header>
39
+ <p>Help text is not required. However, consideration should be given to how users will understand the full context of the component instance, particularly users reliant on accessibility tools like screen readers. In certain cases, a component label alone may be confusing.</p>
40
+ <p>If the component fails validation, the help text will change to show a validation help message instead of the default help text.</p>
41
+ <auro-header level="3" id="helpText">Colors</auro-header>
42
+ <auro-header level="4" id="defaultColor">Default Color</auro-header>
43
+ <p>When the component is used on a light background.</p>
44
+ <div class="exampleWrapper">
45
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
46
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
47
+ <auro-combobox>
48
+ <span slot="ariaLabel.bib.close">Close combobox</span>
49
+ <span slot="ariaLabel.input.clear">Clear All</span>
50
+ <span slot="bib.fullscreen.headline">Bib Header</span>
51
+ <span slot="label">Name</span>
52
+ <auro-menu>
53
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
54
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
55
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
56
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
57
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
58
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
59
+ </auro-menu>
60
+ </auro-combobox>
61
+ <!-- AURO-GENERATED-CONTENT:END -->
62
+ </div>
63
+ <auro-accordion alignRight>
64
+ <span slot="trigger">See code</span>
65
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
66
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
67
+ <pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
68
+ &lt;span slot="ariaLabel.bib.close"&gt;Close combobox&lt;/span&gt;
69
+ &lt;span slot="ariaLabel.input.clear"&gt;Clear All&lt;/span&gt;
70
+ &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
71
+ &lt;span slot="label"&gt;Name&lt;/span&gt;
72
+ &lt;auro-menu&gt;
73
+ &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
74
+ &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
75
+ &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
76
+ &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
77
+ &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
78
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
79
+ &lt;/auro-menu&gt;
80
+ &lt;/auro-combobox&gt;</code></pre>
81
+ <!-- AURO-GENERATED-CONTENT:END -->
82
+ </auro-accordion>
83
+ <auro-header level="4" id="inverseColor">Inverse Color</auro-header>
84
+ <p>When the component is used on a darker background, set `appearance="inverse"` to invert the component colors for proper contrast and visibility.</p>
85
+ <div class="exampleWrapper--ondark">
86
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
87
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
88
+ <auro-combobox appearance="inverse">
89
+ <span slot="bib.fullscreen.headline">Bib Header</span>
90
+ <span slot="label">Inverse Appearance</span>
91
+ <auro-menu>
92
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
93
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
94
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
95
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
96
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
97
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
98
+ </auro-menu>
99
+ </auro-combobox>
100
+ <!-- AURO-GENERATED-CONTENT:END -->
101
+ </div>
102
+ <auro-accordion alignRight>
103
+ <span slot="trigger">See code</span>
104
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
105
+ <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
106
+ <pre class="language-html"><code class="language-html">&lt;auro-combobox appearance="inverse"&gt;
107
+ &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
108
+ &lt;span slot="label"&gt;Inverse Appearance&lt;/span&gt;
109
+ &lt;auro-menu&gt;
110
+ &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
111
+ &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
112
+ &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
113
+ &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
114
+ &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
115
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
116
+ &lt;/auro-menu&gt;
117
+ &lt;/auro-combobox&gt;</code></pre>
118
+ <!-- AURO-GENERATED-CONTENT:END -->
119
+ </auro-accordion>
120
+ <!-- AURO-GENERATED-CONTENT:END -->
121
+ <auro-header level="3" id="shapeSizeLayout">Shape | Size | Layout Support</auro-header>
122
+ <p>The `auro-combobox` component supports the `shape`, `size` and `layout` feature set. The component defaults to the `layout="classic"`, `shape="classic"` and `size="lg"`.</p>
123
+ <auro-header level="4" id="classicLayout">Classic Layout</auro-header>
124
+ <p>The `classic` layout is default for `auro-combobox`. No customization is needed to achieve this look.</p>
125
+ <div class="exampleWrapper">
126
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
127
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
128
+ <auro-combobox>
129
+ <span slot="ariaLabel.bib.close">Close combobox</span>
130
+ <span slot="ariaLabel.input.clear">Clear All</span>
131
+ <span slot="bib.fullscreen.headline">Bib Header</span>
132
+ <span slot="label">Name</span>
133
+ <auro-menu>
134
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
135
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
136
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
137
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
138
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
139
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
140
+ </auro-menu>
141
+ </auro-combobox>
142
+ <!-- AURO-GENERATED-CONTENT:END -->
143
+ </div>
144
+ <auro-accordion alignRight>
145
+ <span slot="trigger">See code</span>
146
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
147
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
148
+ <pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
149
+ &lt;span slot="ariaLabel.bib.close"&gt;Close combobox&lt;/span&gt;
150
+ &lt;span slot="ariaLabel.input.clear"&gt;Clear All&lt;/span&gt;
151
+ &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
152
+ &lt;span slot="label"&gt;Name&lt;/span&gt;
153
+ &lt;auro-menu&gt;
154
+ &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
155
+ &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
156
+ &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
157
+ &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
158
+ &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
159
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
160
+ &lt;/auro-menu&gt;
161
+ &lt;/auro-combobox&gt;</code></pre>
162
+ <!-- AURO-GENERATED-CONTENT:END -->
163
+ </auro-accordion>
164
+ <auro-header level="4" id="emphasizedLayout">Emphasized Layout</auro-header>
165
+ <p>The `emphasized` layout is only supported on light backgrounds.</p>
166
+ <p>The <code>emphasized</code> layout supports the following shapes:</p>
167
+ <ul>
168
+ <li><code>pill</code></li>
169
+ <li><code>pill-left</code></li>
170
+ <li><code>pill-right</code></li>
171
+ </ul>
172
+ <p>The <code>emphasized</code> layout supports the following sizes:</p>
173
+ <ul>
174
+ <li><code>xl</code></li>
175
+ </ul>
176
+ <div class="exampleWrapper">
177
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
178
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
179
+ <auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required style="width: 249px;">
180
+ <span slot="ariaLabel.bib.close">Close combobox</span>
181
+ <span slot="ariaLabel.input.clear">Clear All</span>
182
+ <span slot="bib.fullscreen.headline">Bib Header</span>
183
+ <span slot="label">Name</span>
184
+ <auro-menu>
185
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
186
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
187
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
188
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
189
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
190
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
191
+ </auro-menu>
192
+ <span slot="helpText">
193
+ Help text - Lorem ipsum solar lorem ipsum solar
194
+ </span>
195
+ <span slot="displayValue">
196
+ <div>
197
+ <div class="mainText">Apples</div>
198
+ <div class="subText">Fruit</div>
199
+ </div>
200
+ </span>
201
+ </auro-combobox>
202
+ <!-- AURO-GENERATED-CONTENT:END -->
203
+ </div>
204
+ <auro-accordion alignRight>
205
+ <span slot="trigger">See code</span>
206
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
207
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
208
+ <pre class="language-html"><code class="language-html">&lt;auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required style="width: 249px;"&gt;
209
+ &lt;span slot="ariaLabel.bib.close"&gt;Close combobox&lt;/span&gt;
210
+ &lt;span slot="ariaLabel.input.clear"&gt;Clear All&lt;/span&gt;
211
+ &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
212
+ &lt;span slot="label"&gt;Name&lt;/span&gt;
213
+ &lt;auro-menu&gt;
214
+ &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
215
+ &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
216
+ &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
217
+ &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
218
+ &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
219
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
220
+ &lt;/auro-menu&gt;
221
+ &lt;span slot="helpText"&gt;
222
+ Help text - Lorem ipsum solar lorem ipsum solar
223
+ &lt;/span&gt;
224
+ &lt;span slot="displayValue"&gt;
225
+ &lt;div&gt;
226
+ &lt;div class="mainText"&gt;Apples&lt;/div&gt;
227
+ &lt;div class="subText"&gt;Fruit&lt;/div&gt;
228
+ &lt;/div&gt;
229
+ &lt;/span&gt;
230
+ &lt;/auro-combobox&gt;</code></pre>
231
+ <!-- AURO-GENERATED-CONTENT:END -->
232
+ </auro-accordion>
233
+ <auro-header level="4" id="snowflakeLayout">Snowflake Layout</auro-header>
234
+ <p>The `snowflake` 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>
235
+ <p>The `snowflake` layout is only expected to be used on dark backgrounds, in conjunction with `appearance="inverse"`.</p>
236
+ <div class="exampleWrapper--ondark">
237
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
238
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
239
+ <auro-combobox layout="snowflake" shape="snowflake" size="lg" placeholder="Placeholder content" required appearance="inverse" style="width: 249px;">
240
+ <span slot="ariaLabel.bib.close">Close combobox</span>
241
+ <span slot="ariaLabel.input.clear">Clear All</span>
242
+ <span slot="bib.fullscreen.headline">Bib Header</span>
243
+ <span slot="label">Name</span>
244
+ <auro-menu>
245
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
246
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
247
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
248
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
249
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
250
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
251
+ </auro-menu>
252
+ <span slot="helpText">
253
+ Help text - Lorem ipsum solar lorem ipsum solar
254
+ </span>
255
+ </auro-combobox>
256
+ <!-- AURO-GENERATED-CONTENT:END -->
257
+ </div>
258
+ <auro-accordion alignRight>
259
+ <span slot="trigger">See code</span>
260
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/snowflake/basic.html) -->
261
+ <!-- The below code snippet is automatically added from ./../apiExamples/snowflake/basic.html -->
262
+ <pre class="language-html"><code class="language-html">&lt;auro-combobox layout="snowflake" shape="snowflake" size="lg" placeholder="Placeholder content" required appearance="inverse" style="width: 249px;"&gt;
263
+ &lt;span slot="ariaLabel.bib.close"&gt;Close combobox&lt;/span&gt;
264
+ &lt;span slot="ariaLabel.input.clear"&gt;Clear All&lt;/span&gt;
265
+ &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
266
+ &lt;span slot="label"&gt;Name&lt;/span&gt;
267
+ &lt;auro-menu&gt;
268
+ &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
269
+ &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
270
+ &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
271
+ &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
272
+ &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
273
+ &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
274
+ &lt;/auro-menu&gt;
275
+ &lt;span slot="helpText"&gt;
276
+ Help text - Lorem ipsum solar lorem ipsum solar
277
+ &lt;/span&gt;
278
+ &lt;/auro-combobox&gt;</code></pre>
279
+ <!-- AURO-GENERATED-CONTENT:END -->
280
+ </auro-accordion>
281
+ </div>
282
+ </div>
283
+ </div>
package/components/combobox/demo/getting-started.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/getting-started.md
7
+
8
+ ----------------------- DO NOT EDIT -----------------------------
9
+
10
+ -->
11
+
12
+ <!DOCTYPE html>
13
+ <html lang="en">
14
+ <head>
15
+ <meta charset="UTF-8" />
16
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17
+ <title>Auro Web Component Demo | auro-combobox | Getting Started</title>
18
+
19
+ <!-- highlight.js Stylesheet -->
20
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
21
+
22
+ <!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
23
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
24
+
25
+ <!-- Design Token Alaska Theme -->
26
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
27
+
28
+ <!-- Webcore Stylesheet Alaska Theme -->
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
30
+
31
+ <!-- Demo Specific Styles -->
32
+ <link rel="stylesheet" type="text/css" href="./styles.min.css" />
33
+ </head>
34
+ <body class="auro-markdown">
35
+ <main></main>
36
+
37
+ <!-- If additional elements are needed for the demo, add them here. -->
38
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
39
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
40
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
41
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
42
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
43
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
44
+ <script type="module">
45
+ import { renderPage } from './demo-support.js';
46
+ await renderPage('./getting-started.md');
47
+ import { initExamples } from "./getting-started.min.js";
48
+ initExamples();
49
+ </script>
50
+ <script src="./getting-started.min.js" data-demo-script="true" type="module"></script>
51
+ </body>
52
+ </html>
package/components/combobox/demo/getting-started.js ADDED
@@ -0,0 +1,21 @@
1
+ /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
2
+
3
+ import { AuroCombobox } from '../src/auro-combobox.js';
4
+ import '../../menu/src/registered.js';
5
+
6
+ AuroCombobox.register();
7
+ AuroCombobox.register('custom-combobox');
8
+
9
+ export function initExamples(initCount) {
10
+ initCount = initCount || 0;
11
+
12
+ try {
13
+ // Add any example initialization code here.
14
+ } catch (err) {
15
+ if (initCount <= 20) {
16
+ setTimeout(() => {
17
+ initExamples(initCount + 1);
18
+ }, 100);
19
+ }
20
+ }
21
+ }