@aurodesignsystem-dev/auro-formkit 0.0.0-pr593.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (268) hide show
  1. package/CHANGELOG.md +5 -0
  2. package/LICENSE +201 -0
  3. package/NOTICE +2 -0
  4. package/README.md +314 -0
  5. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +39 -0
  6. package/components/bibtemplate/dist/headerVersion.d.ts +2 -0
  7. package/components/bibtemplate/dist/iconVersion.d.ts +2 -0
  8. package/components/bibtemplate/dist/index.d.ts +2 -0
  9. package/components/bibtemplate/dist/index.js +709 -0
  10. package/components/bibtemplate/dist/registered.js +709 -0
  11. package/components/bibtemplate/dist/styles/color-css.d.ts +2 -0
  12. package/components/bibtemplate/dist/styles/style-css.d.ts +2 -0
  13. package/components/bibtemplate/dist/styles/tokens-css.d.ts +2 -0
  14. package/components/checkbox/README.md +142 -0
  15. package/components/checkbox/demo/api.html +55 -0
  16. package/components/checkbox/demo/api.js +17 -0
  17. package/components/checkbox/demo/api.md +401 -0
  18. package/components/checkbox/demo/api.min.js +1833 -0
  19. package/components/checkbox/demo/index.html +51 -0
  20. package/components/checkbox/demo/index.js +8 -0
  21. package/components/checkbox/demo/index.md +327 -0
  22. package/components/checkbox/demo/index.min.js +1808 -0
  23. package/components/checkbox/demo/readme.html +50 -0
  24. package/components/checkbox/demo/readme.md +142 -0
  25. package/components/checkbox/dist/auro-checkbox-group.d.ts +166 -0
  26. package/components/checkbox/dist/auro-checkbox.d.ts +129 -0
  27. package/components/checkbox/dist/helptextVersion.d.ts +2 -0
  28. package/components/checkbox/dist/index.d.ts +3 -0
  29. package/components/checkbox/dist/index.js +1757 -0
  30. package/components/checkbox/dist/registered.js +1758 -0
  31. package/components/checkbox/dist/styles/auro-checkbox-css.d.ts +2 -0
  32. package/components/checkbox/dist/styles/auro-checkbox-group-css.d.ts +2 -0
  33. package/components/checkbox/dist/styles/color-css.d.ts +2 -0
  34. package/components/checkbox/dist/styles/colorGroup-css.d.ts +2 -0
  35. package/components/checkbox/dist/styles/tokens-css.d.ts +2 -0
  36. package/components/combobox/README.md +152 -0
  37. package/components/combobox/demo/api.html +57 -0
  38. package/components/combobox/demo/api.js +36 -0
  39. package/components/combobox/demo/api.md +1209 -0
  40. package/components/combobox/demo/api.min.js +15117 -0
  41. package/components/combobox/demo/index.html +56 -0
  42. package/components/combobox/demo/index.js +26 -0
  43. package/components/combobox/demo/index.md +621 -0
  44. package/components/combobox/demo/index.min.js +14971 -0
  45. package/components/combobox/demo/readme.html +50 -0
  46. package/components/combobox/demo/readme.md +152 -0
  47. package/components/combobox/dist/auro-combobox.d.ts +384 -0
  48. package/components/combobox/dist/bibtemplateVersion.d.ts +2 -0
  49. package/components/combobox/dist/dropdownVersion.d.ts +2 -0
  50. package/components/combobox/dist/index.d.ts +2 -0
  51. package/components/combobox/dist/index.js +13554 -0
  52. package/components/combobox/dist/inputVersion.d.ts +2 -0
  53. package/components/combobox/dist/registered.js +13556 -0
  54. package/components/combobox/dist/styles/style-css.d.ts +2 -0
  55. package/components/counter/README.md +146 -0
  56. package/components/counter/demo/api.html +54 -0
  57. package/components/counter/demo/api.js +20 -0
  58. package/components/counter/demo/api.md +584 -0
  59. package/components/counter/demo/api.min.js +7111 -0
  60. package/components/counter/demo/index.html +54 -0
  61. package/components/counter/demo/index.js +21 -0
  62. package/components/counter/demo/index.md +244 -0
  63. package/components/counter/demo/index.min.js +7075 -0
  64. package/components/counter/demo/readme.html +50 -0
  65. package/components/counter/demo/readme.md +146 -0
  66. package/components/counter/dist/auro-counter-button.d.ts +12 -0
  67. package/components/counter/dist/auro-counter-group.d.ts +235 -0
  68. package/components/counter/dist/auro-counter-wrapper.d.ts +22 -0
  69. package/components/counter/dist/auro-counter.d.ts +97 -0
  70. package/components/counter/dist/bibtemplateVersion.d.ts +2 -0
  71. package/components/counter/dist/dropdownVersion.d.ts +2 -0
  72. package/components/counter/dist/iconVersion.d.ts +2 -0
  73. package/components/counter/dist/index.d.ts +3 -0
  74. package/components/counter/dist/index.js +7018 -0
  75. package/components/counter/dist/registered.js +7019 -0
  76. package/components/counter/dist/styles/color-css.d.ts +2 -0
  77. package/components/counter/dist/styles/counter-button-color-css.d.ts +2 -0
  78. package/components/counter/dist/styles/counter-button-css.d.ts +2 -0
  79. package/components/counter/dist/styles/counter-group-css.d.ts +2 -0
  80. package/components/counter/dist/styles/counter-wrapper-color-css.d.ts +2 -0
  81. package/components/counter/dist/styles/counter-wrapper-css.d.ts +2 -0
  82. package/components/counter/dist/styles/style-css.d.ts +2 -0
  83. package/components/counter/dist/styles/tokens-css.d.ts +2 -0
  84. package/components/datepicker/README.md +140 -0
  85. package/components/datepicker/demo/api.html +57 -0
  86. package/components/datepicker/demo/api.js +35 -0
  87. package/components/datepicker/demo/api.md +1479 -0
  88. package/components/datepicker/demo/api.min.js +24534 -0
  89. package/components/datepicker/demo/index.html +56 -0
  90. package/components/datepicker/demo/index.js +19 -0
  91. package/components/datepicker/demo/index.md +112 -0
  92. package/components/datepicker/demo/index.min.js +24255 -0
  93. package/components/datepicker/demo/readme.html +50 -0
  94. package/components/datepicker/demo/readme.md +140 -0
  95. package/components/datepicker/dist/auro-calendar-cell.d.ts +163 -0
  96. package/components/datepicker/dist/auro-calendar-month.d.ts +20 -0
  97. package/components/datepicker/dist/auro-calendar.d.ts +133 -0
  98. package/components/datepicker/dist/auro-datepicker.d.ts +466 -0
  99. package/components/datepicker/dist/bibtemplateVersion.d.ts +2 -0
  100. package/components/datepicker/dist/buttonVersion.d.ts +2 -0
  101. package/components/datepicker/dist/dropdownVersion.d.ts +2 -0
  102. package/components/datepicker/dist/index.d.ts +2 -0
  103. package/components/datepicker/dist/index.js +24185 -0
  104. package/components/datepicker/dist/inputVersion.d.ts +2 -0
  105. package/components/datepicker/dist/popoverVersion.d.ts +2 -0
  106. package/components/datepicker/dist/registered.js +24185 -0
  107. package/components/datepicker/dist/styles/color-calendar-css.d.ts +2 -0
  108. package/components/datepicker/dist/styles/color-cell-css.d.ts +2 -0
  109. package/components/datepicker/dist/styles/color-css.d.ts +2 -0
  110. package/components/datepicker/dist/styles/color-month-css.d.ts +2 -0
  111. package/components/datepicker/dist/styles/style-auro-calendar-cell-css.d.ts +2 -0
  112. package/components/datepicker/dist/styles/style-auro-calendar-css.d.ts +2 -0
  113. package/components/datepicker/dist/styles/style-auro-calendar-month-css.d.ts +2 -0
  114. package/components/datepicker/dist/styles/style-css.d.ts +2 -0
  115. package/components/datepicker/dist/styles/tokens-css.d.ts +2 -0
  116. package/components/datepicker/dist/utilities.d.ts +78 -0
  117. package/components/datepicker/dist/utilitiesCalendar.d.ts +38 -0
  118. package/components/datepicker/dist/utilitiesCalendarRender.d.ts +50 -0
  119. package/components/datepicker/dist/vendor/wc-range-datepicker/day.d.ts +5 -0
  120. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-calendar.d.ts +60 -0
  121. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker-cell.d.ts +1 -0
  122. package/components/datepicker/dist/vendor/wc-range-datepicker/range-datepicker.d.ts +57 -0
  123. package/components/dropdown/README.md +144 -0
  124. package/components/dropdown/demo/api.html +57 -0
  125. package/components/dropdown/demo/api.js +21 -0
  126. package/components/dropdown/demo/api.md +1434 -0
  127. package/components/dropdown/demo/api.min.js +3826 -0
  128. package/components/dropdown/demo/index.html +55 -0
  129. package/components/dropdown/demo/index.js +19 -0
  130. package/components/dropdown/demo/index.md +510 -0
  131. package/components/dropdown/demo/index.min.js +3789 -0
  132. package/components/dropdown/demo/readme.html +50 -0
  133. package/components/dropdown/demo/readme.md +144 -0
  134. package/components/dropdown/dist/auro-dropdown.d.ts +406 -0
  135. package/components/dropdown/dist/auro-dropdownBib.d.ts +46 -0
  136. package/components/dropdown/dist/dropdownVersion.d.ts +2 -0
  137. package/components/dropdown/dist/helptextVersion.d.ts +2 -0
  138. package/components/dropdown/dist/iconVersion.d.ts +2 -0
  139. package/components/dropdown/dist/index.d.ts +2 -0
  140. package/components/dropdown/dist/index.js +3734 -0
  141. package/components/dropdown/dist/registered.js +3734 -0
  142. package/components/dropdown/dist/styles/bibColors-css.d.ts +2 -0
  143. package/components/dropdown/dist/styles/bibStyles-css.d.ts +2 -0
  144. package/components/dropdown/dist/styles/color-css.d.ts +2 -0
  145. package/components/dropdown/dist/styles/style-css.d.ts +2 -0
  146. package/components/dropdown/dist/styles/tokens-css.d.ts +2 -0
  147. package/components/form/README.md +142 -0
  148. package/components/form/demo/api.html +49 -0
  149. package/components/form/demo/api.js +3 -0
  150. package/components/form/demo/api.md +51 -0
  151. package/components/form/demo/api.min.js +638 -0
  152. package/components/form/demo/autocomplete.html +15 -0
  153. package/components/form/demo/index.html +50 -0
  154. package/components/form/demo/index.js +4 -0
  155. package/components/form/demo/index.md +403 -0
  156. package/components/form/demo/index.min.js +639 -0
  157. package/components/form/demo/readme.html +50 -0
  158. package/components/form/demo/readme.md +142 -0
  159. package/components/form/demo/registerDemoDeps.js +23 -0
  160. package/components/form/demo/working.html +118 -0
  161. package/components/form/dist/auro-form.d.ts +223 -0
  162. package/components/form/dist/index.d.ts +2 -0
  163. package/components/form/dist/index.js +614 -0
  164. package/components/form/dist/registered.d.ts +1 -0
  165. package/components/form/dist/registered.js +614 -0
  166. package/components/form/dist/styles/style-css.d.ts +2 -0
  167. package/components/helptext/dist/auro-helptext.d.ts +61 -0
  168. package/components/helptext/dist/index.d.ts +2 -0
  169. package/components/helptext/dist/index.js +209 -0
  170. package/components/helptext/dist/registered.js +209 -0
  171. package/components/helptext/dist/styles/color-css.d.ts +2 -0
  172. package/components/helptext/dist/styles/style-css.d.ts +2 -0
  173. package/components/helptext/dist/styles/tokens-css.d.ts +2 -0
  174. package/components/input/README.md +135 -0
  175. package/components/input/demo/api.html +42 -0
  176. package/components/input/demo/api.js +29 -0
  177. package/components/input/demo/api.md +1252 -0
  178. package/components/input/demo/api.min.js +7238 -0
  179. package/components/input/demo/index.html +43 -0
  180. package/components/input/demo/index.js +20 -0
  181. package/components/input/demo/index.md +202 -0
  182. package/components/input/demo/index.min.js +7157 -0
  183. package/components/input/demo/readme.html +50 -0
  184. package/components/input/demo/readme.md +135 -0
  185. package/components/input/dist/auro-input.d.ts +31 -0
  186. package/components/input/dist/base-input.d.ts +512 -0
  187. package/components/input/dist/buttonVersion.d.ts +2 -0
  188. package/components/input/dist/helptextVersion.d.ts +2 -0
  189. package/components/input/dist/i18n.d.ts +18 -0
  190. package/components/input/dist/iconVersion.d.ts +2 -0
  191. package/components/input/dist/index.d.ts +2 -0
  192. package/components/input/dist/index.js +7063 -0
  193. package/components/input/dist/registered.js +7063 -0
  194. package/components/input/dist/styles/borders-css.d.ts +2 -0
  195. package/components/input/dist/styles/color-css.d.ts +2 -0
  196. package/components/input/dist/styles/input-css.d.ts +2 -0
  197. package/components/input/dist/styles/label-css.d.ts +2 -0
  198. package/components/input/dist/styles/mixins-css.d.ts +2 -0
  199. package/components/input/dist/styles/notificationIcons-css.d.ts +2 -0
  200. package/components/input/dist/styles/style-css.d.ts +2 -0
  201. package/components/input/dist/styles/tokens-css.d.ts +2 -0
  202. package/components/input/dist/utilities.d.ts +25 -0
  203. package/components/menu/README.md +145 -0
  204. package/components/menu/demo/api.html +55 -0
  205. package/components/menu/demo/api.js +27 -0
  206. package/components/menu/demo/api.md +954 -0
  207. package/components/menu/demo/api.min.js +1538 -0
  208. package/components/menu/demo/index.html +52 -0
  209. package/components/menu/demo/index.js +28 -0
  210. package/components/menu/demo/index.md +61 -0
  211. package/components/menu/demo/index.min.js +1484 -0
  212. package/components/menu/demo/readme.html +50 -0
  213. package/components/menu/demo/readme.md +145 -0
  214. package/components/menu/dist/auro-menu-utils.d.ts +42 -0
  215. package/components/menu/dist/auro-menu.d.ts +205 -0
  216. package/components/menu/dist/auro-menuoption.d.ts +63 -0
  217. package/components/menu/dist/dropdownVersion.d.ts +2 -0
  218. package/components/menu/dist/iconVersion.d.ts +2 -0
  219. package/components/menu/dist/index.d.ts +4 -0
  220. package/components/menu/dist/index.js +1426 -0
  221. package/components/menu/dist/registered.js +1427 -0
  222. package/components/menu/dist/styles/color-menu-css.d.ts +2 -0
  223. package/components/menu/dist/styles/color-menuoption-css.d.ts +2 -0
  224. package/components/menu/dist/styles/style-menu-css.d.ts +2 -0
  225. package/components/menu/dist/styles/style-menuoption-css.d.ts +2 -0
  226. package/components/menu/dist/styles/tokens-css.d.ts +2 -0
  227. package/components/radio/README.md +137 -0
  228. package/components/radio/demo/api.html +53 -0
  229. package/components/radio/demo/api.js +19 -0
  230. package/components/radio/demo/api.md +562 -0
  231. package/components/radio/demo/api.min.js +1944 -0
  232. package/components/radio/demo/index.html +50 -0
  233. package/components/radio/demo/index.js +8 -0
  234. package/components/radio/demo/index.md +150 -0
  235. package/components/radio/demo/index.min.js +1901 -0
  236. package/components/radio/demo/readme.html +50 -0
  237. package/components/radio/demo/readme.md +137 -0
  238. package/components/radio/dist/auro-radio-group.d.ts +194 -0
  239. package/components/radio/dist/auro-radio.d.ts +144 -0
  240. package/components/radio/dist/helptextVersion.d.ts +2 -0
  241. package/components/radio/dist/index.d.ts +3 -0
  242. package/components/radio/dist/index.js +1850 -0
  243. package/components/radio/dist/registered.js +1851 -0
  244. package/components/radio/dist/styles/auro-radio-group-css.d.ts +2 -0
  245. package/components/radio/dist/styles/color-css.d.ts +2 -0
  246. package/components/radio/dist/styles/groupColor-css.d.ts +2 -0
  247. package/components/radio/dist/styles/style-css.d.ts +2 -0
  248. package/components/radio/dist/styles/tokens-css.d.ts +2 -0
  249. package/components/select/README.md +144 -0
  250. package/components/select/demo/api.html +71 -0
  251. package/components/select/demo/api.js +35 -0
  252. package/components/select/demo/api.md +1313 -0
  253. package/components/select/demo/api.min.js +7763 -0
  254. package/components/select/demo/index.html +66 -0
  255. package/components/select/demo/index.js +9 -0
  256. package/components/select/demo/index.md +815 -0
  257. package/components/select/demo/index.min.js +7651 -0
  258. package/components/select/demo/readme.html +50 -0
  259. package/components/select/demo/readme.md +144 -0
  260. package/components/select/dist/auro-select.d.ts +359 -0
  261. package/components/select/dist/bibtemplateVersion.d.ts +2 -0
  262. package/components/select/dist/dropdownVersion.d.ts +2 -0
  263. package/components/select/dist/index.d.ts +2 -0
  264. package/components/select/dist/index.js +6300 -0
  265. package/components/select/dist/registered.js +6300 -0
  266. package/components/select/dist/styles/style-css.d.ts +2 -0
  267. package/package.json +217 -0
  268. package/packages/build-tools/src/postinstall.mjs +12 -0
package/components/form/demo/index.html ADDED
@@ -0,0 +1,50 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/index.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Generator | auro-form custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
27
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
+ </head>
30
+ <body class="auro-markdown">
31
+ <main></main>
32
+
33
+ <script type="module">
34
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
35
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
36
+ fetch('./index.md')
37
+ .then((response) => response.text())
38
+ .then((text) => {
39
+ const rawHtml = marked.parse(text);
40
+ document.querySelector('main').innerHTML = rawHtml;
41
+ Prism.highlightAll();
42
+ });
43
+ </script>
44
+ <script type="module" data-demo-script="true" src="./registerDemoDeps.js"></script>
45
+ <script type="module" data-demo-script="true" src="./index.min.js"></script>
46
+
47
+ <!-- If additional elements are needed for the demo, add them here. -->
48
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
49
+ </body>
50
+ </html>
package/components/form/demo/index.js ADDED
@@ -0,0 +1,4 @@
1
+ import { AuroForm } from '../src/auro-form.js';
2
+
3
+ AuroForm.register();
4
+ AuroForm.register('custom-form');
package/components/form/demo/index.md ADDED
@@ -0,0 +1,403 @@
1
+ <!--
2
+ The index.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ index.md is created by running `npm run build:markdownDocs`.
5
+
6
+ This file is generated based on a template fetched from `./docs/partials/index.md`
7
+ -->
8
+
9
+ # Form
10
+
11
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
12
+ <!-- The below content is automatically added from ./../docs/partials/description.md -->
13
+ `<auro-form>` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) designed to
14
+ serve as the base logic for all auro-constructed forms.
15
+
16
+ It automatically "scrapes" its inner content for any auro form elements, and surfaces
17
+ them (along with events) to the parent form element as a JSON object.
18
+ <!-- AURO-GENERATED-CONTENT:END -->
19
+
20
+ ## Form value generation
21
+
22
+ Auro form exists to make a developer's life easier through surfacing all Auro form elements in a given form as a single
23
+ JSON object.
24
+ The most common use case the Auro team identified when building Form was the need to collect form data in
25
+ a structured way.
26
+
27
+ The following is required on each Auro form element in a form for it to be collected automatically:
28
+
29
+ 1. It **must** have a `name` attribute. This is required if vanilla HTML forms, and we follow the same pattern.
30
+ 2. It **must** be an Auro form element. See the section on custom elements for more information.
31
+
32
+ That being said, we do _not_ require form elements to be direct children of `auro-form`.
33
+ They can be nested within other elements for styling, such as a `div`, `span` or `fieldset`.
34
+
35
+ ### Form data structure
36
+
37
+ In a correctly registered scenario, `auro-form`
38
+ will automatically recognize the auro form elements and collect data from each on the form's `value` key as a JSON object.
39
+
40
+ Each element will be added using the element's `name` attribute as the key, and the element's `value` as the value.
41
+
42
+ A real-world example of this might be:
43
+
44
+ ```json
45
+ {
46
+ "hotelCity": "New York",
47
+ "dates": ["2022-01-01", "2022-01-15"],
48
+ "numberOfGuests": 2
49
+ }
50
+ ```
51
+
52
+ If your project uses TypeScript, consider using a type like this to represent the form data:
53
+
54
+ ```typescript
55
+ // Generic type for form values
56
+ type AuroFormValue<T> = T | null;
57
+
58
+ // Example types
59
+ type AuroInputValue = AuroFormValue<string | number>;
60
+ type AuroDatePickerValue = AuroFormValue<string[]>;
61
+
62
+ // This is the type returned from the `AuroForm.value` getter
63
+ interface AuroFormState {
64
+ // value varies based on form element
65
+ hotelCity: AuroInputValue;
66
+ dates: AuroDatePickerValue;
67
+ numberOfGuests: AuroInputValue;
68
+ }
69
+ ```
70
+
71
+ ## Accessing form data
72
+
73
+ As Auro components are designed to be framework-agnostic, data can be retrieved using simple vanilla JavaScript patterns.
74
+ If you have ever worked with a standard HTML5 form, you are already equipped to work with Auro forms!
75
+
76
+ Once you have a reference to the form element (React ref, querySelector, etc.),
77
+ you can access the form data using the following methods:
78
+
79
+ **Data keys + get methods**:
80
+ - `.value` - Getter which returns the current form data as a JSON object.
81
+ - `.validity` - Returns the current validity state of the form (`valid` or `invalid`).
82
+
83
+ **Extra information**:
84
+ - `.isInitialState` - Returns a boolean indicating if the form is in its initial state.
85
+
86
+ **Events**
87
+ - `input` - Fires when the form state changes.
88
+ - `reset` - Fires when the form is reset.
89
+ - `submit` - Fires when the form is submitted.
90
+
91
+ **Advanced features**:
92
+ - `.formState` - This is the internal form state. It includes extra `required` and `validity` information for each form element.
93
+ This key is not required for normal form usage, but can add additional context for more complex forms.
94
+
95
+ ## Important note for custom elements
96
+
97
+ This **only applies to custom-named elements**.
98
+
99
+ When consuming custom-named Auro form elements (like `auro-input` registered as `my-custom-input`),
100
+ these elements _must_ be registered BEFORE auro-form due to rendering order limitations.
101
+ Auro form elements are automatically recognized based on their tag name (e.g. `auro-input`) or special auro attributes
102
+ which are only assigned during the initial render.
103
+
104
+ For example, the following is correct:
105
+
106
+ ```javascript
107
+ import {AuroInput} from '@aurodesignsystem/auro-input';
108
+ import {AuroForm} from '@aurodesignsystem/auro-form';
109
+
110
+ AuroInput.register('my-custom-input'); // adds an internal identifier auro-form uses to recognize the custom element
111
+ AuroForm.register(); // render looks for said identifier
112
+ ```
113
+
114
+ The following is NOT correct and will result in forms not working as expected:
115
+
116
+ ```javascript
117
+ import {AuroInput} from '@aurodesignsystem/auro-input';
118
+ import {AuroForm} from '@aurodesignsystem/auro-form';
119
+
120
+ AuroForm.register(); // forms start rendering, looking for auro inputs, or custom-named inputs
121
+ AuroInput.register('my-custom-input'); // too late, form has already rendered and did not find the custom element
122
+ ```
123
+
124
+ ## Examples
125
+
126
+ ### Basic Form
127
+ The most basic form implementation requires an `auro-input` and an optional auro button with `type="submit"`.
128
+
129
+ By default, Auro Form connects a `submit` event to all `type="submit"` buttons within the form.
130
+
131
+ <div class="exampleWrapper">
132
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
133
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
134
+ <auro-form>
135
+ <auro-input id="search-box" name="searchBox" required>
136
+ <span slot="label">Search flights</span>
137
+ </auro-input>
138
+ <auro-button type="submit">Submit</auro-button>
139
+ </auro-form>
140
+ <!-- AURO-GENERATED-CONTENT:END -->
141
+ </div>
142
+ <auro-accordion alignRight>
143
+ <span slot="trigger">See code</span>
144
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
145
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
146
+
147
+ ```html
148
+ <auro-form>
149
+ <auro-input id="search-box" name="searchBox" required>
150
+ <span slot="label">Search flights</span>
151
+ </auro-input>
152
+ <auro-button type="submit">Submit</auro-button>
153
+ </auro-form>
154
+ ```
155
+ <!-- AURO-GENERATED-CONTENT:END -->
156
+ </auro-accordion>
157
+
158
+ ### Form with column layout
159
+ Auro Form is designed to be completely unstyled by default, allowing developers to use divs, structural elements, or
160
+ custom CSS to style the form.
161
+
162
+ This example shows that you can use advanced layouts with Auro Form, such as a column layout.
163
+
164
+ <div class="exampleWrapper">
165
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/column-layout.html) -->
166
+ <!-- The below content is automatically added from ./../apiExamples/column-layout.html -->
167
+ <style>
168
+ .columned-form {
169
+ display: grid;
170
+ grid-template-columns: 1fr 1fr;
171
+ gap: 1rem;
172
+ }
173
+
174
+ .columned-form div {
175
+ display: flex;
176
+ flex-direction: column;
177
+ padding: 1rem;
178
+ }
179
+
180
+ .controls {
181
+ display: flex;
182
+ justify-content: flex-end;
183
+ margin-top: 1rem;
184
+ }
185
+ </style>
186
+ <auro-form>
187
+ <div class="columned-form">
188
+ <div>
189
+ <auro-input id="search-box" name="searchBox" required>
190
+ <span slot="label">Search flights</span>
191
+ </auro-input>
192
+ <auro-input id="last-name" name="lastName" required>
193
+ <span slot="label">Last Name</span>
194
+ </auro-input>
195
+ </div>
196
+ <div>
197
+ <div class="datepickerBlock">
198
+ <h4>Pick a date range</h4>
199
+ <auro-datepicker id="date-range" name="dateRange" required range>
200
+ <span slot="fromLabel">Start</span>
201
+ <span slot="toLabel">End</span>
202
+ <span slot="bib.fullscreen.dateLabel">Choose a range</span>
203
+ </auro-datepicker>
204
+ </div>
205
+ <div class="controls">
206
+ <auro-button type="submit">Submit</auro-button>
207
+ </div>
208
+ </div>
209
+ </div>
210
+ </auro-form>
211
+ <!-- AURO-GENERATED-CONTENT:END -->
212
+ </div>
213
+ <auro-accordion alignRight>
214
+ <span slot="trigger">See code</span>
215
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/column-layout.html) -->
216
+ <!-- The below code snippet is automatically added from ./../apiExamples/column-layout.html -->
217
+
218
+ ```html
219
+ <style>
220
+ .columned-form {
221
+ display: grid;
222
+ grid-template-columns: 1fr 1fr;
223
+ gap: 1rem;
224
+ }
225
+
226
+ .columned-form div {
227
+ display: flex;
228
+ flex-direction: column;
229
+ padding: 1rem;
230
+ }
231
+
232
+ .controls {
233
+ display: flex;
234
+ justify-content: flex-end;
235
+ margin-top: 1rem;
236
+ }
237
+ </style>
238
+ <auro-form>
239
+ <div class="columned-form">
240
+ <div>
241
+ <auro-input id="search-box" name="searchBox" required>
242
+ <span slot="label">Search flights</span>
243
+ </auro-input>
244
+ <auro-input id="last-name" name="lastName" required>
245
+ <span slot="label">Last Name</span>
246
+ </auro-input>
247
+ </div>
248
+ <div>
249
+ <div class="datepickerBlock">
250
+ <h4>Pick a date range</h4>
251
+ <auro-datepicker id="date-range" name="dateRange" required range>
252
+ <span slot="fromLabel">Start</span>
253
+ <span slot="toLabel">End</span>
254
+ <span slot="bib.fullscreen.dateLabel">Choose a range</span>
255
+ </auro-datepicker>
256
+ </div>
257
+ <div class="controls">
258
+ <auro-button type="submit">Submit</auro-button>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </auro-form>
263
+ ```
264
+ <!-- AURO-GENERATED-CONTENT:END -->
265
+ </auro-accordion>
266
+
267
+ ### Complex form
268
+ Finally, a more complex form example with multiple form elements, including a date picker and a select element.
269
+
270
+ <div class="exampleWrapper">
271
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/complex.html) -->
272
+ <!-- The below content is automatically added from ./../apiExamples/complex.html -->
273
+ <style>
274
+ .submitBlock {
275
+ margin-top: 1rem;
276
+ display: flex;
277
+ justify-content: flex-end;
278
+ gap: 1rem;
279
+ }
280
+
281
+ .datepickerBlock {
282
+ margin-top: 1rem;
283
+ }
284
+
285
+ .complex-form {
286
+ display: block;
287
+ width: 100%;
288
+ padding: 1rem;
289
+ border: 1px solid #2a2a2a;
290
+ border-radius: 1rem;
291
+ }
292
+ </style>
293
+ <h2>auro-form testing</h2>
294
+ <auro-form class="complex-form">
295
+ <auro-input id="first-name" name="firstName" required>
296
+ <span slot="label">First Name</span>
297
+ </auro-input>
298
+ <div>
299
+ <auro-input id="last-name" name="lastName" required>
300
+ <span slot="label">Last Name</span>
301
+ </auro-input>
302
+ </div>
303
+ <div>
304
+ <div>
305
+ <auro-input id="occupation" name="occupation" required>
306
+ <span slot="label">Occupation</span>
307
+ </auro-input>
308
+ </div>
309
+ </div>
310
+ <auro-input-two id="cool-fact" name="coolFact" required>
311
+ <span slot="label">Cool Fact</span>
312
+ </auro-input-two>
313
+ <div class="datepickerBlock">
314
+ <h4>Pick a cool date</h4>
315
+ <auro-datepicker id="date-example" name="dateExample" required>
316
+ <span slot="fromLabel">Choose a date</span>
317
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
318
+ </auro-datepicker>
319
+ </div>
320
+ <div class="datepickerBlock">
321
+ <h4>Pick a date range</h4>
322
+ <auro-datepicker id="date-range" name="dateRange" required range>
323
+ <span slot="fromLabel">Start</span>
324
+ <span slot="toLabel">End</span>
325
+ <span slot="bib.fullscreen.dateLabel">Choose a range</span>
326
+ </auro-datepicker>
327
+ </div>
328
+ <div class="submitBlock">
329
+ <auro-button type="reset">Reset</auro-button>
330
+ <auro-button type="submit">Submit</auro-button>
331
+ </div>
332
+ </auro-form>
333
+ <!-- AURO-GENERATED-CONTENT:END -->
334
+ </div>
335
+ <auro-accordion alignRight>
336
+ <span slot="trigger">See code</span>
337
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/complex.html) -->
338
+ <!-- The below code snippet is automatically added from ./../apiExamples/complex.html -->
339
+
340
+ ```html
341
+ <style>
342
+ .submitBlock {
343
+ margin-top: 1rem;
344
+ display: flex;
345
+ justify-content: flex-end;
346
+ gap: 1rem;
347
+ }
348
+
349
+ .datepickerBlock {
350
+ margin-top: 1rem;
351
+ }
352
+
353
+ .complex-form {
354
+ display: block;
355
+ width: 100%;
356
+ padding: 1rem;
357
+ border: 1px solid #2a2a2a;
358
+ border-radius: 1rem;
359
+ }
360
+ </style>
361
+ <h2>auro-form testing</h2>
362
+ <auro-form class="complex-form">
363
+ <auro-input id="first-name" name="firstName" required>
364
+ <span slot="label">First Name</span>
365
+ </auro-input>
366
+ <div>
367
+ <auro-input id="last-name" name="lastName" required>
368
+ <span slot="label">Last Name</span>
369
+ </auro-input>
370
+ </div>
371
+ <div>
372
+ <div>
373
+ <auro-input id="occupation" name="occupation" required>
374
+ <span slot="label">Occupation</span>
375
+ </auro-input>
376
+ </div>
377
+ </div>
378
+ <auro-input-two id="cool-fact" name="coolFact" required>
379
+ <span slot="label">Cool Fact</span>
380
+ </auro-input-two>
381
+ <div class="datepickerBlock">
382
+ <h4>Pick a cool date</h4>
383
+ <auro-datepicker id="date-example" name="dateExample" required>
384
+ <span slot="fromLabel">Choose a date</span>
385
+ <span slot="bib.fullscreen.dateLabel">Choose a date</span>
386
+ </auro-datepicker>
387
+ </div>
388
+ <div class="datepickerBlock">
389
+ <h4>Pick a date range</h4>
390
+ <auro-datepicker id="date-range" name="dateRange" required range>
391
+ <span slot="fromLabel">Start</span>
392
+ <span slot="toLabel">End</span>
393
+ <span slot="bib.fullscreen.dateLabel">Choose a range</span>
394
+ </auro-datepicker>
395
+ </div>
396
+ <div class="submitBlock">
397
+ <auro-button type="reset">Reset</auro-button>
398
+ <auro-button type="submit">Submit</auro-button>
399
+ </div>
400
+ </auro-form>
401
+ ```
402
+ <!-- AURO-GENERATED-CONTENT:END -->
403
+ </auro-accordion>