@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/form/demo/customize.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/customize.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-form | Customize</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-form'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('./customize.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>
package/components/form/demo/customize.md ADDED
@@ -0,0 +1,246 @@
1
+ <auro-header level="1" id="overview">Form - Customize</auro-header>
2
+ <div class="contentWrapper">
3
+ <nav>
4
+ <auro-nav anchorNavContent=".scrollWrapper">
5
+ <span slot="mobileToggleCollapsed">View More</span>
6
+ <span slot="mobileToggleExpanded">View Less</span>
7
+ <auro-anchorlink fluid href="#layout">Layout</auro-anchorlink>
8
+ <auro-anchorlink fluid href="#columnLayout" class="level2 body-xs">Column Layout</auro-anchorlink>
9
+ <auro-anchorlink fluid href="#complexForm" class="level2 body-xs">Complex Form</auro-anchorlink>
10
+ </auro-nav>
11
+ </nav>
12
+ <div class="mainContent">
13
+ <div class="scrollWrapper">
14
+ <section>
15
+ <auro-header level="2" id="layout">Layout</auro-header>
16
+ <p>The <code>auro-form</code> component does not enforce any layout on its children. Use standard CSS techniques to arrange form elements as needed.</p>
17
+ <auro-header level="3" id="columnLayout">Column Layout</auro-header>
18
+ <p>Use CSS Grid or Flexbox to arrange form elements in columns.</p>
19
+ <div class="exampleWrapper">
20
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/column-layout.html) -->
21
+ <!-- The below content is automatically added from ./../apiExamples/column-layout.html -->
22
+ <style>
23
+ .columned-form {
24
+ display: grid;
25
+ grid-template-columns: 1fr 1fr;
26
+ gap: 1rem;
27
+ }
28
+
29
+ .columned-form div {
30
+ display: flex;
31
+ flex-direction: column;
32
+ padding: 1rem;
33
+ gap: 1rem;
34
+ }
35
+
36
+ .controls {
37
+ display: flex;
38
+ justify-content: flex-end;
39
+ margin-top: 1rem;
40
+ }
41
+ </style>
42
+ <auro-form>
43
+ <div class="columned-form">
44
+ <div>
45
+ <auro-input id="search-box" name="searchBox" required>
46
+ <span slot="label">Search flights</span>
47
+ </auro-input>
48
+ <auro-input id="last-name" name="lastName" required>
49
+ <span slot="label">Last Name</span>
50
+ </auro-input>
51
+ </div>
52
+ <div>
53
+ <div class="datepickerBlock">
54
+ <h4>Pick a date range</h4>
55
+ <auro-datepicker id="date-range" name="dateRange" required range>
56
+ <span slot="fromLabel">Start</span>
57
+ <span slot="toLabel">End</span>
58
+ <span slot="bib.fullscreen.fromLabel">Start</span>
59
+ <span slot="bib.fullscreen.toLabel">End</span>
60
+ </auro-datepicker>
61
+ </div>
62
+ <div class="controls">
63
+ <auro-button type="submit">Submit</auro-button>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </auro-form>
68
+ <!-- AURO-GENERATED-CONTENT:END -->
69
+ </div>
70
+ <auro-accordion alignRight>
71
+ <span slot="trigger">See code</span>
72
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/column-layout.html) -->
73
+ <!-- The below code snippet is automatically added from ./../apiExamples/column-layout.html -->
74
+ <pre class="language-html"><code class="language-html">&lt;style&gt;
75
+ .columned-form {
76
+ display: grid;
77
+ grid-template-columns: 1fr 1fr;
78
+ gap: 1rem;
79
+ }
80
+ ​
81
+ .columned-form div {
82
+ display: flex;
83
+ flex-direction: column;
84
+ padding: 1rem;
85
+ gap: 1rem;
86
+ }
87
+ ​
88
+ .controls {
89
+ display: flex;
90
+ justify-content: flex-end;
91
+ margin-top: 1rem;
92
+ }
93
+ &lt;/style&gt;
94
+ &lt;auro-form&gt;
95
+ &lt;div class="columned-form"&gt;
96
+ &lt;div&gt;
97
+ &lt;auro-input id="search-box" name="searchBox" required&gt;
98
+ &lt;span slot="label"&gt;Search flights&lt;/span&gt;
99
+ &lt;/auro-input&gt;
100
+ &lt;auro-input id="last-name" name="lastName" required&gt;
101
+ &lt;span slot="label"&gt;Last Name&lt;/span&gt;
102
+ &lt;/auro-input&gt;
103
+ &lt;/div&gt;
104
+ &lt;div&gt;
105
+ &lt;div class="datepickerBlock"&gt;
106
+ &lt;h4&gt;Pick a date range&lt;/h4&gt;
107
+ &lt;auro-datepicker id="date-range" name="dateRange" required range&gt;
108
+ &lt;span slot="fromLabel"&gt;Start&lt;/span&gt;
109
+ &lt;span slot="toLabel"&gt;End&lt;/span&gt;
110
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Start&lt;/span&gt;
111
+ &lt;span slot="bib.fullscreen.toLabel"&gt;End&lt;/span&gt;
112
+ &lt;/auro-datepicker&gt;
113
+ &lt;/div&gt;
114
+ &lt;div class="controls"&gt;
115
+ &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
116
+ &lt;/div&gt;
117
+ &lt;/div&gt;
118
+ &lt;/div&gt;
119
+ &lt;/auro-form&gt;</code></pre>
120
+ <!-- AURO-GENERATED-CONTENT:END -->
121
+ </auro-accordion>
122
+ <auro-header level="3" id="complexForm">Complex Form</auro-header>
123
+ <p>A more complex form layout with multiple element types, nested containers, and a submit/cancel button group.</p>
124
+ <div class="exampleWrapper">
125
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/complex.html) -->
126
+ <!-- The below content is automatically added from ./../apiExamples/complex.html -->
127
+ <style>
128
+ .submitBlock {
129
+ margin-top: 1rem;
130
+ display: flex;
131
+ justify-content: flex-end;
132
+ gap: 1rem;
133
+ }
134
+ .datepickerBlock {
135
+ margin-top: 1rem;
136
+ }
137
+ .complex-form {
138
+ display: block;
139
+ padding: 1rem;
140
+ border: 1px solid #2a2a2a;
141
+ border-radius: 1rem;
142
+ }
143
+ </style>
144
+ <auro-form class="complex-form">
145
+ <auro-input id="first-name" name="firstName" required>
146
+ <span slot="label">First Name</span>
147
+ </auro-input>
148
+ <br />
149
+ <auro-input id="last-name" name="lastName" required>
150
+ <span slot="label">Last Name</span>
151
+ </auro-input>
152
+ <br />
153
+ <auro-input id="occupation" name="occupation" required>
154
+ <span slot="label">Occupation</span>
155
+ </auro-input>
156
+ <br />
157
+ <auro-input-two id="cool-fact" name="coolFact" required>
158
+ <span slot="label">Cool Fact</span>
159
+ </auro-input-two>
160
+ <div class="datepickerBlock">
161
+ <h4>Pick a cool date</h4>
162
+ <auro-datepicker id="date-example" name="dateExample" required>
163
+ <span slot="fromLabel">Choose a date</span>
164
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
165
+ </auro-datepicker>
166
+ </div>
167
+ <div class="datepickerBlock">
168
+ <h4>Pick a date range</h4>
169
+ <auro-datepicker id="date-range" name="dateRange" required range>
170
+ <span slot="fromLabel">Start</span>
171
+ <span slot="toLabel">End</span>
172
+ <span slot="bib.fullscreen.fromLabel">Start</span>
173
+ <span slot="bib.fullscreen.toLabel">End</span>
174
+ </auro-datepicker>
175
+ </div>
176
+ <div class="submitBlock">
177
+ <auro-button type="reset">Reset</auro-button>
178
+ <auro-button type="submit">Submit</auro-button>
179
+ </div>
180
+ </auro-form>
181
+ <!-- AURO-GENERATED-CONTENT:END -->
182
+ </div>
183
+ <auro-accordion alignRight>
184
+ <span slot="trigger">See code</span>
185
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/complex.html) -->
186
+ <!-- The below code snippet is automatically added from ./../apiExamples/complex.html -->
187
+ <pre class="language-html"><code class="language-html">&lt;style&gt;
188
+ .submitBlock {
189
+ margin-top: 1rem;
190
+ display: flex;
191
+ justify-content: flex-end;
192
+ gap: 1rem;
193
+ }
194
+ .datepickerBlock {
195
+ margin-top: 1rem;
196
+ }
197
+ .complex-form {
198
+ display: block;
199
+ padding: 1rem;
200
+ border: 1px solid #2a2a2a;
201
+ border-radius: 1rem;
202
+ }
203
+ &lt;/style&gt;
204
+ &lt;auro-form class="complex-form"&gt;
205
+ &lt;auro-input id="first-name" name="firstName" required&gt;
206
+ &lt;span slot="label"&gt;First Name&lt;/span&gt;
207
+ &lt;/auro-input&gt;
208
+ &lt;br /&gt;
209
+ &lt;auro-input id="last-name" name="lastName" required&gt;
210
+ &lt;span slot="label"&gt;Last Name&lt;/span&gt;
211
+ &lt;/auro-input&gt;
212
+ &lt;br /&gt;
213
+ &lt;auro-input id="occupation" name="occupation" required&gt;
214
+ &lt;span slot="label"&gt;Occupation&lt;/span&gt;
215
+ &lt;/auro-input&gt;
216
+ &lt;br /&gt;
217
+ &lt;auro-input-two id="cool-fact" name="coolFact" required&gt;
218
+ &lt;span slot="label"&gt;Cool Fact&lt;/span&gt;
219
+ &lt;/auro-input-two&gt;
220
+ &lt;div class="datepickerBlock"&gt;
221
+ &lt;h4&gt;Pick a cool date&lt;/h4&gt;
222
+ &lt;auro-datepicker id="date-example" name="dateExample" required&gt;
223
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
224
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
225
+ &lt;/auro-datepicker&gt;
226
+ &lt;/div&gt;
227
+ &lt;div class="datepickerBlock"&gt;
228
+ &lt;h4&gt;Pick a date range&lt;/h4&gt;
229
+ &lt;auro-datepicker id="date-range" name="dateRange" required range&gt;
230
+ &lt;span slot="fromLabel"&gt;Start&lt;/span&gt;
231
+ &lt;span slot="toLabel"&gt;End&lt;/span&gt;
232
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Start&lt;/span&gt;
233
+ &lt;span slot="bib.fullscreen.toLabel"&gt;End&lt;/span&gt;
234
+ &lt;/auro-datepicker&gt;
235
+ &lt;/div&gt;
236
+ &lt;div class="submitBlock"&gt;
237
+ &lt;auro-button type="reset"&gt;Reset&lt;/auro-button&gt;
238
+ &lt;auro-button type="submit"&gt;Submit&lt;/auro-button&gt;
239
+ &lt;/div&gt;
240
+ &lt;/auro-form&gt;</code></pre>
241
+ <!-- AURO-GENERATED-CONTENT:END -->
242
+ </auro-accordion>
243
+ </section>
244
+ </div>
245
+ </div>
246
+ </div>
package/components/form/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/form/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-form | 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-form'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>