@aurodesignsystem/auro-formkit 5.9.4 → 5.11.0-rc-1426.1
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.
- package/CHANGELOG.md +167 -4
- package/README.md +133 -183
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +16 -0
- package/components/bibtemplate/dist/buttonVersion.d.ts +1 -1
- package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +38 -16
- package/components/bibtemplate/dist/registered.js +38 -16
- package/components/checkbox/demo/api.md +7 -0
- package/components/checkbox/demo/api.min.js +20 -17
- package/components/checkbox/demo/index.min.js +20 -17
- package/components/checkbox/demo/keyboardBehavior.md +0 -0
- package/components/checkbox/dist/auro-checkbox-group.d.ts +4 -3
- package/components/checkbox/dist/auro-checkbox.d.ts +2 -0
- package/components/checkbox/dist/index.js +11 -8
- package/components/checkbox/dist/registered.js +11 -8
- package/components/combobox/demo/api.js +2 -2
- package/components/combobox/demo/api.md +80 -0
- package/components/combobox/demo/api.min.js +2522 -949
- package/components/combobox/demo/index.min.js +2504 -945
- package/components/combobox/demo/keyboardBehavior.html +81 -0
- package/components/combobox/demo/keyboardBehavior.md +281 -0
- package/components/combobox/dist/auro-combobox.d.ts +51 -2
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +9 -0
- package/components/combobox/dist/index.js +2119 -691
- package/components/combobox/dist/registered.js +2119 -691
- package/components/counter/demo/api.md +1 -1
- package/components/counter/demo/api.min.js +1459 -606
- package/components/counter/demo/index.min.js +1459 -606
- package/components/counter/demo/keyboardBehavior.html +81 -0
- package/components/counter/demo/keyboardBehavior.md +127 -0
- package/components/counter/dist/auro-counter-button.d.ts +11 -2
- package/components/counter/dist/auro-counter.d.ts +26 -8
- package/components/counter/dist/buttonVersion.d.ts +1 -1
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +1417 -568
- package/components/counter/dist/keyboardStrategy.d.ts +4 -0
- package/components/counter/dist/registered.js +1417 -568
- package/components/datepicker/demo/api.md +111 -88
- package/components/datepicker/demo/api.min.js +1797 -859
- package/components/datepicker/demo/index.md +18 -12
- package/components/datepicker/demo/index.min.js +1797 -859
- package/components/datepicker/demo/keyboard-behavior.html +81 -0
- package/components/datepicker/demo/keyboardBehavior.md +19 -0
- package/components/datepicker/dist/auro-calendar.d.ts +6 -0
- package/components/datepicker/dist/auro-datepicker.d.ts +20 -16
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +1 -0
- package/components/datepicker/dist/iconVersion.d.ts +1 -1
- package/components/datepicker/dist/index.js +1620 -686
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +1620 -686
- package/components/dropdown/demo/api.md +44 -46
- package/components/dropdown/demo/api.min.js +1237 -535
- package/components/dropdown/demo/index.md +2 -2
- package/components/dropdown/demo/index.min.js +1237 -535
- package/components/dropdown/demo/keyboardBehavior.html +81 -0
- package/components/dropdown/demo/keyboardBehavior.md +77 -0
- package/components/dropdown/dist/auro-dropdown.d.ts +30 -4
- package/components/dropdown/dist/auro-dropdownBib.d.ts +61 -1
- package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +7 -0
- package/components/dropdown/dist/iconVersion.d.ts +1 -1
- package/components/dropdown/dist/index.js +1195 -497
- package/components/dropdown/dist/registered.js +1195 -497
- package/components/form/README.md +47 -2
- package/components/form/demo/api.js +2 -0
- package/components/form/demo/api.md +303 -30
- package/components/form/demo/api.min.js +70586 -72
- package/components/form/demo/index.html +0 -1
- package/components/form/demo/index.js +1 -0
- package/components/form/demo/index.md +1 -275
- package/components/form/demo/index.min.js +70585 -72
- package/components/form/demo/keyboardBehavior.md +0 -0
- package/components/form/demo/readme.md +47 -2
- package/components/form/demo/working.html +123 -32
- package/components/form/dist/auro-form.d.ts +106 -61
- package/components/form/dist/index.js +148 -62
- package/components/form/dist/registered.js +148 -62
- package/components/helptext/dist/auro-helptext.d.ts +1 -1
- package/components/helptext/dist/index.js +1 -1
- package/components/helptext/dist/registered.js +1 -1
- package/components/input/demo/api.md +6 -1
- package/components/input/demo/api.min.js +261 -162
- package/components/input/demo/index.min.js +261 -162
- package/components/input/demo/keyboardBehavior.md +0 -0
- package/components/input/dist/auro-input.d.ts +35 -0
- package/components/input/dist/base-input.d.ts +36 -18
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +164 -76
- package/components/input/dist/registered.js +164 -76
- package/components/menu/demo/api.md +5 -4
- package/components/menu/demo/api.min.js +233 -106
- package/components/menu/demo/index.min.js +233 -106
- package/components/menu/demo/keyboardBehavior.md +0 -0
- package/components/menu/dist/auro-menu.context.d.ts +15 -3
- package/components/menu/dist/auro-menu.d.ts +5 -12
- package/components/menu/dist/auro-menuoption.d.ts +2 -1
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +222 -95
- package/components/menu/dist/registered.js +222 -95
- package/components/radio/demo/api.min.js +14 -14
- package/components/radio/demo/index.min.js +14 -14
- package/components/radio/demo/keyboardBehavior.md +0 -0
- package/components/radio/dist/index.js +5 -5
- package/components/radio/dist/registered.js +5 -5
- package/components/select/demo/api.js +2 -0
- package/components/select/demo/api.md +333 -78
- package/components/select/demo/api.min.js +2029 -744
- package/components/select/demo/index.min.js +2017 -744
- package/components/select/demo/keyboardBehavior.html +81 -0
- package/components/select/demo/keyboardBehavior.md +245 -0
- package/components/select/dist/auro-select.d.ts +34 -0
- package/components/select/dist/index.js +1747 -605
- package/components/select/dist/registered.js +1747 -605
- package/components/select/dist/selectKeyboardStrategy.d.ts +11 -0
- package/custom-elements.json +18806 -0
- package/package.json +84 -39
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,175 @@
|
|
|
1
|
-
|
|
1
|
+
# [5.11.0-rc-1426.1](https://github.com/AlaskaAirlines/auro-formkit/compare/v5.10.0...v5.11.0-rc-1426.1) (2026-04-08)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* **a11y:** add comments to clarify handling of rapid successive announcements [#1368](https://github.com/AlaskaAirlines/auro-formkit/issues/1368) ([e3eece6](https://github.com/AlaskaAirlines/auro-formkit/commit/e3eece644cb2e3e8810a124c6f8dbf281f540947))
|
|
7
|
+
* **a11y:** change pendingClearTimeouts from Map to WeakMap to prevent stale text issues ([7724554](https://github.com/AlaskaAirlines/auro-formkit/commit/7724554158ff4dbe289594d663169b69d4cbd6ab))
|
|
8
|
+
* **a11y:** prevent stale announcements by clearing timeout before setting new text [#1368](https://github.com/AlaskaAirlines/auro-formkit/issues/1368) ([b771806](https://github.com/AlaskaAirlines/auro-formkit/commit/b77180609799a13e629102731f1954c6717f5622))
|
|
9
|
+
* **a11y:** update announcement handling to prevent stale text in live regions ([34990ff](https://github.com/AlaskaAirlines/auro-formkit/commit/34990ffe87951b54ce3ba2fa3cab04e2c06800fd))
|
|
10
|
+
* **a11y:** update comment to clarify use of WeakMap for pending clear timeouts ([2d2df19](https://github.com/AlaskaAirlines/auro-formkit/commit/2d2df193bd770ea3d8e9111ef0778cf71f3314b1))
|
|
11
|
+
* **combobox, dropdown:** enhance dropdown behavior for fullscreen and button interactions ([bc4ff17](https://github.com/AlaskaAirlines/auro-formkit/commit/bc4ff1790782617c06a01b9884a04e51a45763d6))
|
|
12
|
+
* **combobox, select:** improve Tab key behavior for accessibility in fullscreen and non-fullscreen modes ([f466745](https://github.com/AlaskaAirlines/auro-formkit/commit/f466745dcc6a251c68275356428f8d5f4d73b142))
|
|
13
|
+
* **combobox:** add check for activeInput in modal context to prevent errors AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([5962b37](https://github.com/AlaskaAirlines/auro-formkit/commit/5962b37b697717a97f0a2fbc86d0ffe1df5f090a))
|
|
14
|
+
* **combobox:** add comments to clarify event handling for Enter key [#1363](https://github.com/AlaskaAirlines/auro-formkit/issues/1363) ([f67bcad](https://github.com/AlaskaAirlines/auro-formkit/commit/f67bcadecd7d423ff5ff127868a64d3015075dee))
|
|
15
|
+
* **combobox:** add description for appearance property in JSDoc ([44ce771](https://github.com/AlaskaAirlines/auro-formkit/commit/44ce77134eea1a8b85a393dcea6050110e2b8652))
|
|
16
|
+
* **combobox:** add helper for input filtering AB[#1520589](https://github.com/AlaskaAirlines/auro-formkit/issues/1520589) ([1b00c00](https://github.com/AlaskaAirlines/auro-formkit/commit/1b00c008099bf50c8290aa77d6682b200d074f9e))
|
|
17
|
+
* **combobox:** clarify comments on Enter key behavior for clear button focus [#1363](https://github.com/AlaskaAirlines/auro-formkit/issues/1363) ([e0ec505](https://github.com/AlaskaAirlines/auro-formkit/commit/e0ec505ca950a032a63775cecfe4d6e1c377fd8a))
|
|
18
|
+
* **combobox:** enhance clear button functionality by ensuring Enter key activates the button without preventDefault ([a58ba6c](https://github.com/AlaskaAirlines/auro-formkit/commit/a58ba6c4602ad59dd8b22b8dd0ad95c482b4df68))
|
|
19
|
+
* **combobox:** ensure event propagation is stopped when showing bib [#1363](https://github.com/AlaskaAirlines/auro-formkit/issues/1363) ([ea4cd2d](https://github.com/AlaskaAirlines/auro-formkit/commit/ea4cd2dd3d4d4ed4282749ee2ae639ab8b6938af))
|
|
20
|
+
* **combobox:** ensure menu options are defined before filtering and updating active option ([c2c111e](https://github.com/AlaskaAirlines/auro-formkit/commit/c2c111ec4c4723c24f0860853ea39fff1b5f6cca))
|
|
21
|
+
* **combobox:** fix test by managing focus during fullscreen dialog transitions ([c40a1bf](https://github.com/AlaskaAirlines/auro-formkit/commit/c40a1bf5db2b4f651007477448a567379cb97182))
|
|
22
|
+
* **combobox:** handle trailing whitespace in filter AB[#1520589](https://github.com/AlaskaAirlines/auro-formkit/issues/1520589) ([286c9f2](https://github.com/AlaskaAirlines/auro-formkit/commit/286c9f281828c90b07c8f1b5d65c6756a9924c0e)), closes [AB#1516718](https://github.com/AB/issues/1516718)
|
|
23
|
+
* **combobox:** handle trailing whitespace in filter to prevent broken matching after cursor editing ([2fba3d8](https://github.com/AlaskaAirlines/auro-formkit/commit/2fba3d8cdf5271ce0f5c3f9e0d811e44ce279abb)), closes [AB#1516718](https://github.com/AB/issues/1516718)
|
|
24
|
+
* **combobox:** make label slot selector element-agnostic ([d2afe7e](https://github.com/AlaskaAirlines/auro-formkit/commit/d2afe7ede7ab7b3d048457d09498bf8372ce6a62))
|
|
25
|
+
* **combobox:** not to deselect on selecting pre-selected option in combobox ([430055c](https://github.com/AlaskaAirlines/auro-formkit/commit/430055c58b231d37a346b0912bfc4f6a49cb8ef3))
|
|
26
|
+
* **combobox:** preserve typed input in suggestion mode ([60917a6](https://github.com/AlaskaAirlines/auro-formkit/commit/60917a607ad32b2ce1053cb107c0ce472936b9ae))
|
|
27
|
+
* **combobox:** prevent ArrowUp and ArrowDown actions when clear button is focused AB[#1516624](https://github.com/AlaskaAirlines/auro-formkit/issues/1516624) ([8a3037d](https://github.com/AlaskaAirlines/auro-formkit/commit/8a3037d74201796caa5b0d039dc31fc078b1e4ea))
|
|
28
|
+
* **combobox:** prevent cursor from moving from arrow up/down keys ([2018c69](https://github.com/AlaskaAirlines/auro-formkit/commit/2018c691555fe58afc3ede644fff22b83c854816))
|
|
29
|
+
* **combobox:** prevent default behavior when clear button is focused ([6058438](https://github.com/AlaskaAirlines/auro-formkit/commit/60584386947acef6752feccd11e91cc0809fbe67))
|
|
30
|
+
* **combobox:** prevent fullscreen dialog from closing immediately after reopen ([ecf8998](https://github.com/AlaskaAirlines/auro-formkit/commit/ecf899836092af8f0ebb307fff2ea0bdaa52f114))
|
|
31
|
+
* **combobox:** refine Enter key handling to prevent native form-submit behavior ([6ce6c44](https://github.com/AlaskaAirlines/auro-formkit/commit/6ce6c44e0b126b5c423d6efed03a96ea9bf9df86))
|
|
32
|
+
* **combobox:** reset _inFullscreenTransition flag on disconnect ([27d18ad](https://github.com/AlaskaAirlines/auro-formkit/commit/27d18ade8c6586849ebbbb6c76a681313b9e1c92))
|
|
33
|
+
* **combobox:** restore focus to trigger input after closing fullscreen dialog ([0fbd4d5](https://github.com/AlaskaAirlines/auro-formkit/commit/0fbd4d53694cc117ee0fd7edc958c60c065906f1))
|
|
34
|
+
* **combobox:** set default active index on unselected combobox AB[#1516637](https://github.com/AlaskaAirlines/auro-formkit/issues/1516637) ([c5c4cc3](https://github.com/AlaskaAirlines/auro-formkit/commit/c5c4cc386a843ac95a7e8da547281431153d0a04))
|
|
35
|
+
* **combobox:** simplify event methods by removing ctx param AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([c1b1cf0](https://github.com/AlaskaAirlines/auro-formkit/commit/c1b1cf0258cc3423bd021b81ddf41615b2984803))
|
|
36
|
+
* **combobox:** suppress validation during fullscreen focus transition ([8fd9b95](https://github.com/AlaskaAirlines/auro-formkit/commit/8fd9b95cedfbaa357a0ba3394b6478177e00940d))
|
|
37
|
+
* **combobox:** update active option after available options are updated ([dba8921](https://github.com/AlaskaAirlines/auro-formkit/commit/dba8921643d724bfbdbc553c3ea23a60792848cb))
|
|
38
|
+
* **combobox:** update Enter key handling to ensure preventDefault is not called when clear button is focused ([72a6b94](https://github.com/AlaskaAirlines/auro-formkit/commit/72a6b9445863c36b86e37e262557fb3111576a2a))
|
|
39
|
+
* **combobox:** update test to manage focus during fullscreen dialog transitions ([c517b04](https://github.com/AlaskaAirlines/auro-formkit/commit/c517b046fc8dfc32160424ee232421f506a99c12))
|
|
40
|
+
* **combobox:** update value on input value change for suggestion combobox ([ac5de8b](https://github.com/AlaskaAirlines/auro-formkit/commit/ac5de8b011d7ff475382c16d274aa5fc4b525080))
|
|
41
|
+
* correct copy paste error during coding ([0c1d860](https://github.com/AlaskaAirlines/auro-formkit/commit/0c1d8602692de9ef79459442e3b6cca3ca5245de))
|
|
42
|
+
* correct focus movement when closing fullscreen bib ([fc4ec92](https://github.com/AlaskaAirlines/auro-formkit/commit/fc4ec924a58c0d0013012c41fb1748e5b4a27662))
|
|
43
|
+
* correct tabbing and enter key focus behavior AB[#1528762](https://github.com/AlaskaAirlines/auro-formkit/issues/1528762) ([1dfc120](https://github.com/AlaskaAirlines/auro-formkit/commit/1dfc120c9399ec58a84e8e08ef52410b64d0c5e8))
|
|
44
|
+
* **counter-group:** close fullscreen dialog with Tab key for improved accessibility ([ba54a38](https://github.com/AlaskaAirlines/auro-formkit/commit/ba54a381d211c5a2c35275237262b27e89c7ae18))
|
|
45
|
+
* **counter:** correct aria-valuetext binding in AuroCounter component [#1359](https://github.com/AlaskaAirlines/auro-formkit/issues/1359) ([95e0c42](https://github.com/AlaskaAirlines/auro-formkit/commit/95e0c420b5dc932290c03479af82da6f4d28ca0a))
|
|
46
|
+
* **counter:** update value handling and event triggering in counter components ([9595143](https://github.com/AlaskaAirlines/auro-formkit/commit/95951434e0554d12ff2849baa317da0f3e90daa9))
|
|
47
|
+
* **counter:** use ariaDescribedByElements to cross shadow DOM boundary for description AB[#1516615](https://github.com/AlaskaAirlines/auro-formkit/issues/1516615) ([709a752](https://github.com/AlaskaAirlines/auro-formkit/commit/709a7529f1d9a61796d4a7478640b49cb2ee803e))
|
|
48
|
+
* **counter:** voiceover to read raw number instead of percentage AB[#1443553](https://github.com/AlaskaAirlines/auro-formkit/issues/1443553) ([e275fe0](https://github.com/AlaskaAirlines/auro-formkit/commit/e275fe06c4e24ed77cbbcc0714dd1ae36e729d57))
|
|
49
|
+
* **datepicker:** accessibility and focus management for fullscreen dropdown ([5ec0cb9](https://github.com/AlaskaAirlines/auro-formkit/commit/5ec0cb9e6256633c4bc22e08c1af3c2e6f2db1c6))
|
|
50
|
+
* **datepicker:** close bib on focus loss, preserve fullscreen and tab order AB[#1528738](https://github.com/AlaskaAirlines/auro-formkit/issues/1528738) ([5b16ec0](https://github.com/AlaskaAirlines/auro-formkit/commit/5b16ec02e77599075ef1cd29655cbbf737e1cc3f))
|
|
51
|
+
* **datepicker:** close fullscreen dialog with Tab key for improved accessibility ([51742be](https://github.com/AlaskaAirlines/auro-formkit/commit/51742be661b9310d5854600c4e2feae3ae01916c))
|
|
52
|
+
* **datepicker:** disable pointer events for disabled calendar cells AB[#1494448](https://github.com/AlaskaAirlines/auro-formkit/issues/1494448) ([263c3eb](https://github.com/AlaskaAirlines/auro-formkit/commit/263c3eb742ae0552a8442c1ae9b7883ac3878082))
|
|
53
|
+
* **datepicker:** open bib with Enter key AB[#1518947](https://github.com/AlaskaAirlines/auro-formkit/issues/1518947) ([caaa971](https://github.com/AlaskaAirlines/auro-formkit/commit/caaa971e0dd27111aba7f15e87e84d2135ecb81a))
|
|
54
|
+
* **datepicker:** prevent clear button click/keypress from reopening bib ([da03331](https://github.com/AlaskaAirlines/auro-formkit/commit/da033315aaba86eccdca4ecf0031b062d2321bfa))
|
|
55
|
+
* **datepicker:** remove readonly attr on inputs AB[#1516622](https://github.com/AlaskaAirlines/auro-formkit/issues/1516622) ([018c61d](https://github.com/AlaskaAirlines/auro-formkit/commit/018c61d168f3e634ef59d56d8287b25a66a3237a))
|
|
56
|
+
* **datepicker:** synchronize focus-loss policy and update fullscreen state handling ([e69ec70](https://github.com/AlaskaAirlines/auro-formkit/commit/e69ec70bd87a76d78bfbdc0c16b13dab974d591d))
|
|
57
|
+
* **datepicker:** use double rAF for reliable close-button focus in fullscreen dialog ([54594df](https://github.com/AlaskaAirlines/auro-formkit/commit/54594df959af7379c5631ed9258c96f5a83eea99))
|
|
58
|
+
* **dialog:** reset dialog dimensions for custom styling ([6712bd2](https://github.com/AlaskaAirlines/auro-formkit/commit/6712bd2cdd2e65d127c3d30f8487d79c36b0885a))
|
|
59
|
+
* **docs:** remove extra quotation mark in auro-form tag [#1365](https://github.com/AlaskaAirlines/auro-formkit/issues/1365) ([a7ec80e](https://github.com/AlaskaAirlines/auro-formkit/commit/a7ec80ed008c334a054be2f4b880720f70b8e175))
|
|
60
|
+
* **dropdown, select:** handle tab key behavior across full-screen and desktop ([6db8d89](https://github.com/AlaskaAirlines/auro-formkit/commit/6db8d89866a35c4556513f7a83e430370bca3e9e))
|
|
61
|
+
* **dropdown:** add matchWidth attribute for consistent dropdown sizing ([4bbfb47](https://github.com/AlaskaAirlines/auro-formkit/commit/4bbfb47d2d63f4bbbd4c605e1b1d63e9ed96bdda))
|
|
62
|
+
* **dropdown:** address page scroll lock in mobile AB[#1490375](https://github.com/AlaskaAirlines/auro-formkit/issues/1490375) ([5fb0560](https://github.com/AlaskaAirlines/auro-formkit/commit/5fb0560c67e3c14b50cbc8ab191ea43d3ef6194b))
|
|
63
|
+
* **dropdown:** bind aria-disabled with disabled prop ([9915c1c](https://github.com/AlaskaAirlines/auro-formkit/commit/9915c1cdc6e59878eb97243f72b649554ad6e2d7))
|
|
64
|
+
* **dropdown:** change dialog position to relative for accurate placement ([8a31130](https://github.com/AlaskaAirlines/auro-formkit/commit/8a3113066bb26e126fb10a84b33fe2f42eb2fef6))
|
|
65
|
+
* **dropdown:** clean up comments and add context ([3a30695](https://github.com/AlaskaAirlines/auro-formkit/commit/3a30695f767d1d4ca6ceedf9040095eaff522c73))
|
|
66
|
+
* **dropdown:** comment on hasActiveDescendant in fullscreen mode AB[#1516632](https://github.com/AlaskaAirlines/auro-formkit/issues/1516632) ([eeed7bf](https://github.com/AlaskaAirlines/auro-formkit/commit/eeed7bf43d498f50aec2b4e1cdd0886efd4f0722))
|
|
67
|
+
* **dropdown:** enhance keyboard event handling for accessibility in modal dialogs ([37f7a0d](https://github.com/AlaskaAirlines/auro-formkit/commit/37f7a0d35d8f1d39a6ff3f20f62e8961811344e5))
|
|
68
|
+
* **dropdown:** ensure overflow style is restored after showing modal dialog [#1358](https://github.com/AlaskaAirlines/auro-formkit/issues/1358) ([2c40a29](https://github.com/AlaskaAirlines/auro-formkit/commit/2c40a29b73dae3ffad34a5c40566f0077b98b1b6))
|
|
69
|
+
* **dropdown:** enter in dialog selects highlighted option instead of closing bib AB[#1516632](https://github.com/AlaskaAirlines/auro-formkit/issues/1516632) ([046d876](https://github.com/AlaskaAirlines/auro-formkit/commit/046d876e19e26375306e76036e566d066d4921af))
|
|
70
|
+
* **dropdown:** expose dialogRole property on AuroDropdownBib to avoid shadow DOM piercing ([5a0e339](https://github.com/AlaskaAirlines/auro-formkit/commit/5a0e3393fbe4c0fa8a70b7a99f32d969bb37eaf2))
|
|
71
|
+
* **dropdown:** prevent layout containment on dropdown host for proper positioning ([5895d57](https://github.com/AlaskaAirlines/auro-formkit/commit/5895d5744579a54efeb53a46d070b0968f7dee41))
|
|
72
|
+
* **dropdown:** prevent page scroll and enhance backdrop behavior for fullscreen dialogs on mobile ([28d1b29](https://github.com/AlaskaAirlines/auro-formkit/commit/28d1b2976c8995e1fdcaa650d780127339ca3b16))
|
|
73
|
+
* **dropdown:** read breakpoint token lazily to fix fullscreen bib in WebKit ([330db3f](https://github.com/AlaskaAirlines/auro-formkit/commit/330db3fdda5cc20a95329bf19d7a89806ada59c0))
|
|
74
|
+
* **dropdown:** remove aria-hidden attribute from dialogLabel span since it is redundant with the CSS class [#1367](https://github.com/AlaskaAirlines/auro-formkit/issues/1367) ([3965829](https://github.com/AlaskaAirlines/auro-formkit/commit/396582977aaf0c75eeca34ca2b7643d9a7156623))
|
|
75
|
+
* **dropdown:** remove autoPlacement from right bib trigger description because they conflict ([10e6da3](https://github.com/AlaskaAirlines/auro-formkit/commit/10e6da3886037e828f263e4ac241d3d62b6b66f6))
|
|
76
|
+
* **dropdown:** replace popover API with dialog element for accessibility #AB1475605 ([cd58918](https://github.com/AlaskaAirlines/auro-formkit/commit/cd5891860f985933da09a8f1c0ae3f33f44e626a)), closes [#AB1475605](https://github.com/AlaskaAirlines/auro-formkit/issues/AB1475605)
|
|
77
|
+
* **dropdown:** reset hasActiveDescendant flag when closing dialog AB[#1516632](https://github.com/AlaskaAirlines/auro-formkit/issues/1516632) ([10180d7](https://github.com/AlaskaAirlines/auro-formkit/commit/10180d7e04cd12336de1d85cfcd9712e6caae1b8))
|
|
78
|
+
* **dropdowns:** make screenreader compatible in mobile desktop ([c57ca6f](https://github.com/AlaskaAirlines/auro-formkit/commit/c57ca6f016b58fbda8dd68db0103bbbe985a8430))
|
|
79
|
+
* **dropdown:** update hasActiveDescendant logic for fullscreen mode AB[#1516632](https://github.com/AlaskaAirlines/auro-formkit/issues/1516632) ([100e260](https://github.com/AlaskaAirlines/auro-formkit/commit/100e260261eb045ee42699efeeafaaf68008f44b))
|
|
80
|
+
* **dropdown:** use Popover API to escape container-query containment on desktop ([17faf77](https://github.com/AlaskaAirlines/auro-formkit/commit/17faf77c3778ae9b96e0b1db8b1c6637aaa0d6d4))
|
|
81
|
+
* ensure virtual keyboard retention in fullscreen dialogs for iOS Safari ([047229d](https://github.com/AlaskaAirlines/auro-formkit/commit/047229d3bd6827d692777a96a20181e1159c81af))
|
|
82
|
+
* **form:** correct _submitElements property casing for LitElement reactivity [#1366](https://github.com/AlaskaAirlines/auro-formkit/issues/1366) ([1ebbf19](https://github.com/AlaskaAirlines/auro-formkit/commit/1ebbf19c22cb380f0c881b2e0231ae2ceae50c7f))
|
|
83
|
+
* **input, combobox:** add autofocus to input and enable focus delegation for fullscreen dialogs ([4b4bb6e](https://github.com/AlaskaAirlines/auro-formkit/commit/4b4bb6e10575b267130b1913fc9ce38d6229097f))
|
|
84
|
+
* **input:** address credit card autofill validation issue AB[#1481792](https://github.com/AlaskaAirlines/auro-formkit/issues/1481792) ([4a80de0](https://github.com/AlaskaAirlines/auro-formkit/commit/4a80de0a7466744eafdceb7e98d6ef614099cb11))
|
|
85
|
+
* **input:** address credit card autofill validation issue AB[#1481792](https://github.com/AlaskaAirlines/auro-formkit/issues/1481792) ([1b2b2ae](https://github.com/AlaskaAirlines/auro-formkit/commit/1b2b2ae29a56e6139eab6922d0f84de2053c77f6))
|
|
86
|
+
* **keyboard:** add tests for Shift+Tab closing without selecting in combobox and select AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([1a29773](https://github.com/AlaskaAirlines/auro-formkit/commit/1a297739ba2031672b2b9029872460cd7c95e8ce))
|
|
87
|
+
* **keyboard:** clarify isModal and isPopover definitions in context AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([af0e613](https://github.com/AlaskaAirlines/auro-formkit/commit/af0e61395de51822cd29a4a549f1eb4f11825e90))
|
|
88
|
+
* **keyboard:** create options.dropdown param AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([6ac931b](https://github.com/AlaskaAirlines/auro-formkit/commit/6ac931b2569246ddb7bd36f2bca1f3597d1ef392))
|
|
89
|
+
* **keyboard:** ensure activeInput is a valid HTMLElement in createDisplayContext AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([ba69038](https://github.com/AlaskaAirlines/auro-formkit/commit/ba69038aead05f266ada2089cdd1a7fe31e86d36))
|
|
90
|
+
* **keyboard:** ensure handler is a function before invoking in applyKeyboardStrategy AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([bc346aa](https://github.com/AlaskaAirlines/auro-formkit/commit/bc346aa644c055f7551e5c801cb7435ceeb015bb))
|
|
91
|
+
* **keyboard:** guard shadowRoot access in Tab handler to prevent null reference AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([1cec59c](https://github.com/AlaskaAirlines/auro-formkit/commit/1cec59c83140191b71f77fe33f04c0d9066f814f))
|
|
92
|
+
* **keyboard:** handle Shift+Tab to close without selecting in select and combobox AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([f263413](https://github.com/AlaskaAirlines/auro-formkit/commit/f263413646337acd86b19ca3b78495ef03800fd6))
|
|
93
|
+
* **keyboard:** rename visibility context from isVisible to isExpanded AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([d16a67b](https://github.com/AlaskaAirlines/auro-formkit/commit/d16a67b8233ca914b23a57a12338bbde9a625559))
|
|
94
|
+
* **keyboard:** update ArrowUp and ArrowDown handlers to include ctx for clear button focus handling AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([014ad6e](https://github.com/AlaskaAirlines/auro-formkit/commit/014ad6e51e559255777290efaddf9e075a5e7b83))
|
|
95
|
+
* lint errors ([c8f5ea5](https://github.com/AlaskaAirlines/auro-formkit/commit/c8f5ea58fb77cbad130258bf25faba3baf802027))
|
|
96
|
+
* make clear button no longer bubble key events up to parent components ([88c7f94](https://github.com/AlaskaAirlines/auro-formkit/commit/88c7f947f3b8ec475d12f4e81b7b2fc79c6d9598))
|
|
97
|
+
* **menu:** add tests for aria-multiselectable attribute handling in multiSelect mode [#1361](https://github.com/AlaskaAirlines/auro-formkit/issues/1361) ([74d9025](https://github.com/AlaskaAirlines/auro-formkit/commit/74d9025b10b01cd6328f4d92527a691247b9cbbc))
|
|
98
|
+
* **menu:** always notify host on invalid value selection ([49f518f](https://github.com/AlaskaAirlines/auro-formkit/commit/49f518f391a84e7b80b7e60b9bcf265d2620d9a5))
|
|
99
|
+
* **menu:** correct display property and add overflow for improved layout AB[#1517195](https://github.com/AlaskaAirlines/auro-formkit/issues/1517195) ([2767824](https://github.com/AlaskaAirlines/auro-formkit/commit/27678244d0a81163aaa5af352c7af7024b27a6c8))
|
|
100
|
+
* **menu:** fix arrow key navigation on nested menu AB[#1523822](https://github.com/AlaskaAirlines/auro-formkit/issues/1523822) ([40af10b](https://github.com/AlaskaAirlines/auro-formkit/commit/40af10bad56c11c0631f817f207d98a33fde0513))
|
|
101
|
+
* **menuoption:** adjust padding for improved layout consistency AB[#1517195](https://github.com/AlaskaAirlines/auro-formkit/issues/1517195) ([4828c2b](https://github.com/AlaskaAirlines/auro-formkit/commit/4828c2ba12317cad926986ef3f0bc1121a406caa))
|
|
102
|
+
* **menuoption:** restore loose equality for key fallback to support framework remounts ([4efba20](https://github.com/AlaskaAirlines/auro-formkit/commit/4efba204534579e268b33cc361e3a629c7fa9706))
|
|
103
|
+
* **menu:** replace random ID generation with monotonic counter in auro-menuoption ([f07bc5f](https://github.com/AlaskaAirlines/auro-formkit/commit/f07bc5f24830369e62482806b61ac60225a4db87))
|
|
104
|
+
* **menu:** update aria-multiselectable attribute based on multiSelect property [#1361](https://github.com/AlaskaAirlines/auro-formkit/issues/1361) ([8a3fab0](https://github.com/AlaskaAirlines/auro-formkit/commit/8a3fab01f5a19f2b41d0d040e60a69f45840f85d))
|
|
105
|
+
* move shadowRootOptions from constructor mutation to static class field ([bef802b](https://github.com/AlaskaAirlines/auro-formkit/commit/bef802b91f38ff1147212e1b4e48f8f6a327bcc3))
|
|
106
|
+
* **releaseNotes:** clarify tab navigation behavior for counter-group dropdown ([17a0f78](https://github.com/AlaskaAirlines/auro-formkit/commit/17a0f78fafb04dbb7fff5b05f259158ec87d8a6c))
|
|
107
|
+
* **releaseNotes:** update keyboard interaction details and clarify dropdown behavior ([77454d7](https://github.com/AlaskaAirlines/auro-formkit/commit/77454d727903c6597c7bb711d60b79c70b0ba64c))
|
|
108
|
+
* **reset:** allow select to fully reset when function is called ([fa55e45](https://github.com/AlaskaAirlines/auro-formkit/commit/fa55e450e85721ad9f73ea42e4ca4a83547655ec))
|
|
109
|
+
* **scroll:** prevent double scroll bar on menu in max-height select ([606cd8a](https://github.com/AlaskaAirlines/auro-formkit/commit/606cd8aec7be5d989f39fa43a614454eaf20667e))
|
|
110
|
+
* **select, dropdown, combobox:** update Tab key behavior for accessibility compliance ([85ce2e0](https://github.com/AlaskaAirlines/auro-formkit/commit/85ce2e06866792d59a471a273fe8f411fdad255c))
|
|
111
|
+
* **select|combobox:** shift+tab moves active option to first non-disabled option AB[#1516650](https://github.com/AlaskaAirlines/auro-formkit/issues/1516650) ([545786a](https://github.com/AlaskaAirlines/auro-formkit/commit/545786a3c67098fb26a3e4533efcff582e95da10))
|
|
112
|
+
* **select:** activate the first enabled option with bib opening ([2d79ed0](https://github.com/AlaskaAirlines/auro-formkit/commit/2d79ed0cc271d7179cc8f6c9a41b16280238ade2))
|
|
113
|
+
* **select:** add Home/End key handlers ([931b697](https://github.com/AlaskaAirlines/auro-formkit/commit/931b697589d27423b2cfc02a76325beee080c8fa))
|
|
114
|
+
* **select:** check dropdown trigger exists ([0b7deba](https://github.com/AlaskaAirlines/auro-formkit/commit/0b7deba1f70b81ae1f7168b2ae922ee797557c1e))
|
|
115
|
+
* **select:** close bib with Enter on a already selected menuoption ([34aadc7](https://github.com/AlaskaAirlines/auro-formkit/commit/34aadc73f47d633dda0472b3a422667bd836964a))
|
|
116
|
+
* **select:** ensure dropdown trigger is focused only if it exists ([63c7088](https://github.com/AlaskaAirlines/auro-formkit/commit/63c708870a3295c1cf15132abcd2c0986e4a6923))
|
|
117
|
+
* **select:** not to allow deselect on single-select ([1a90410](https://github.com/AlaskaAirlines/auro-formkit/commit/1a90410e472fe330a07efd81d674723072b9367a))
|
|
118
|
+
* **select:** not to close bib with Enter on multiselect ([fcd6115](https://github.com/AlaskaAirlines/auro-formkit/commit/fcd6115b20c3c3443f55d7721f414eb1808bce00))
|
|
119
|
+
* **select:** preserve active option in the previouse state ([78c1f44](https://github.com/AlaskaAirlines/auro-formkit/commit/78c1f44db131ef0d05049ad2d9e4199e8c8cd476))
|
|
120
|
+
* **select:** prevent Enter keydown event to block form submitting ([1c6da70](https://github.com/AlaskaAirlines/auro-formkit/commit/1c6da7073c9f702830fca171673c0770a7a26b55))
|
|
121
|
+
* **select:** remove autoPlacement from right bib trigger because they conflict ([cb3c463](https://github.com/AlaskaAirlines/auro-formkit/commit/cb3c463fe711a8c6f8eae281c816c72d0b9086f3))
|
|
122
|
+
* **select:** restore focus to trigger after closing fullscreen dialog ([f95194c](https://github.com/AlaskaAirlines/auro-formkit/commit/f95194ca6ce2839a9eb3c1004abfec4c884dcf64))
|
|
123
|
+
* **select:** restore value after DOM remount AB[#1483855](https://github.com/AlaskaAirlines/auro-formkit/issues/1483855) ([eabf306](https://github.com/AlaskaAirlines/auro-formkit/commit/eabf306fabe982908ce851f44e5b52e2de938720))
|
|
124
|
+
* **select:** revert no-match guard and multiSelect init guard; add regression tests ([04509f9](https://github.com/AlaskaAirlines/auro-formkit/commit/04509f954aa2a28ac74b05770c5389030bdd3bfc)), closes [#set-invalid](https://github.com/AlaskaAirlines/auro-formkit/issues/set-invalid)
|
|
125
|
+
* **select:** scroll selected option into view when dropdown opens - rebase merge oversight ([d47e4fd](https://github.com/AlaskaAirlines/auro-formkit/commit/d47e4fd5eb5c22047385f02c3c289c9a8ed47450))
|
|
126
|
+
* **select:** select to handle keydown without floatingUI ([1312d5b](https://github.com/AlaskaAirlines/auro-formkit/commit/1312d5b6c698d7e51060553c901282e29ecaa6f0))
|
|
127
|
+
* **select:** set focus to dropdown trigger after hiding the bib ([d047ec1](https://github.com/AlaskaAirlines/auro-formkit/commit/d047ec1de7ab298c161bc2aaa267dca4fcda54fd))
|
|
128
|
+
* **select:** update Shift+Tab to select and move focus ([b932948](https://github.com/AlaskaAirlines/auro-formkit/commit/b932948eb0d828e617bd0b506af74ada45d41528))
|
|
129
|
+
* **story:** rename Checkbox story to Radio for consistency [#1364](https://github.com/AlaskaAirlines/auro-formkit/issues/1364) ([1efec71](https://github.com/AlaskaAirlines/auro-formkit/commit/1efec71d79e7680510da7d2f412b439b2615963e))
|
|
130
|
+
* **story:** update storybook helpers to use auro-radio-group for consistency [#1360](https://github.com/AlaskaAirlines/auro-formkit/issues/1360) ([e40f86c](https://github.com/AlaskaAirlines/auro-formkit/commit/e40f86c868b08c48d88c7b5458e318aac6c2d9f0))
|
|
131
|
+
* stringfy counter's aria-valuetext AB[#1443553](https://github.com/AlaskaAirlines/auro-formkit/issues/1443553) ([3a14172](https://github.com/AlaskaAirlines/auro-formkit/commit/3a14172df462688fcde66dcd99962378594bc159))
|
|
132
|
+
* **tests:** add Enter key propagation test and adjust timeout for screen reader announcements [#1363](https://github.com/AlaskaAirlines/auro-formkit/issues/1363) [#1361](https://github.com/AlaskaAirlines/auro-formkit/issues/1361) ([e7d9897](https://github.com/AlaskaAirlines/auro-formkit/commit/e7d98973006ab52ed396a1efeae0275762f53cab))
|
|
133
|
+
* **tests:** reenables desktop combobox suite, adds new keyboard tests ([1fa2cf2](https://github.com/AlaskaAirlines/auro-formkit/commit/1fa2cf263fff220bae031e93633ac87cf45975d8))
|
|
134
|
+
* **tests:** remove errant blank line AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([e8a28a7](https://github.com/AlaskaAirlines/auro-formkit/commit/e8a28a7acc640bf3bff28134c87784f6fa4dcfe3))
|
|
135
|
+
* **test:** update test desc for active-descendant state prop in dropdown AB[#1516632](https://github.com/AlaskaAirlines/auro-formkit/issues/1516632) ([1a6729e](https://github.com/AlaskaAirlines/auro-formkit/commit/1a6729e8898862650866f5e51784cdc5d61d775b))
|
|
136
|
+
* update @aurodesignsystem/auro-library to version 5.12.1 ([5d0ac24](https://github.com/AlaskaAirlines/auro-formkit/commit/5d0ac24f66559f4876d141a41d90d1f4a61667a0))
|
|
137
|
+
* update auro-library to guard against voiceover taps dismissing dialogs ([2268a3b](https://github.com/AlaskaAirlines/auro-formkit/commit/2268a3bd79ef710eb1aa96e0f21325c782211401))
|
|
7
138
|
|
|
8
|
-
### Changelog
|
|
9
139
|
|
|
10
|
-
|
|
140
|
+
### Features
|
|
141
|
+
|
|
142
|
+
* add focusCloseButton method for improved accessibility in fullscreen dialogs ([2cbc2e9](https://github.com/AlaskaAirlines/auro-formkit/commit/2cbc2e945f2492bb796ed3cd7e810fe12656d1ba))
|
|
143
|
+
* **combbobox:** handle alt and meta key with arrowup and down AB[#1528758](https://github.com/AlaskaAirlines/auro-formkit/issues/1528758) ([f48e02d](https://github.com/AlaskaAirlines/auro-formkit/commit/f48e02d54f8762f579a104815588fb7692d9b28d))
|
|
144
|
+
* **datepicker:** add label slots for a11y compliance AB[#1398255](https://github.com/AlaskaAirlines/auro-formkit/issues/1398255) ([7f8214e](https://github.com/AlaskaAirlines/auro-formkit/commit/7f8214e235b84d819adb58eed24b39e6c9cb159d))
|
|
145
|
+
* **dropdown:** add hasActiveDescendant prop to manage highlighted option selection AB[#1516632](https://github.com/AlaskaAirlines/auro-formkit/issues/1516632) ([c66ae1d](https://github.com/AlaskaAirlines/auro-formkit/commit/c66ae1d057ed30db0cd08b9d17f925f7e9c43525))
|
|
146
|
+
* **form:** implement Enter key submission for form elements and enhance validation logic AB[#1485830](https://github.com/AlaskaAirlines/auro-formkit/issues/1485830) ([9ddb54c](https://github.com/AlaskaAirlines/auro-formkit/commit/9ddb54c6d4a24591e4ed69ff9aca86df9a4924fa))
|
|
147
|
+
* **keyboard:** add keyboard strategy with display context & update combobox and select AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([41fdf8a](https://github.com/AlaskaAirlines/auro-formkit/commit/41fdf8a2fd81c6afea8f645829428ac83ecdd0c9))
|
|
148
|
+
* keyboardStrategy maps ([e084776](https://github.com/AlaskaAirlines/auro-formkit/commit/e084776222405978431a99e10ff7dcac31d403ad))
|
|
149
|
+
* move keyboard events into keyboardHandler and update testing ([bfffedb](https://github.com/AlaskaAirlines/auro-formkit/commit/bfffedbe09e01f64bd5aab0af3abec1a2da2c554))
|
|
150
|
+
* **select:** add functionality for activating option programmatically ([8afe40e](https://github.com/AlaskaAirlines/auro-formkit/commit/8afe40e889745820ff755f08fcd83caee55e47ec))
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
### Performance Improvements
|
|
154
|
+
|
|
155
|
+
* **combobox:** cleanup and correct keyboard behavior AB[#1528758](https://github.com/AlaskaAirlines/auro-formkit/issues/1528758) ([de2e575](https://github.com/AlaskaAirlines/auro-formkit/commit/de2e57561da17b081df924315ca00eb32969a153))
|
|
156
|
+
* **combobox:** improve scroll behavior for a11y support ([a45563f](https://github.com/AlaskaAirlines/auro-formkit/commit/a45563f4ac2bdd0b64ea32743b020d204896c8c5))
|
|
157
|
+
* **counter:** update to use new keyboardStrategy pattern ([aaec8f9](https://github.com/AlaskaAirlines/auro-formkit/commit/aaec8f9ef6bdebe5eb56dc50e55918e8170717cb))
|
|
158
|
+
* **dropdown:** remove disableFocusTrap prop ([a76b3be](https://github.com/AlaskaAirlines/auro-formkit/commit/a76b3be816e6daa8660d0fb03d5ede151f2822d0))
|
|
159
|
+
* **dropdown:** remove keyboardBridge ([66efa0f](https://github.com/AlaskaAirlines/auro-formkit/commit/66efa0f3043947ac248d8265ab7592555c838423))
|
|
160
|
+
* **scroll:** activated menuoption into view AB[#1489578](https://github.com/AlaskaAirlines/auro-formkit/issues/1489578) ([8787c53](https://github.com/AlaskaAirlines/auro-formkit/commit/8787c5346b1103ae83bab1249f6cf6d6a0b22ddd))
|
|
161
|
+
* **select:** scroll selected menuoption into view AB[#1489578](https://github.com/AlaskaAirlines/auro-formkit/issues/1489578) ([e581feb](https://github.com/AlaskaAirlines/auro-formkit/commit/e581febaaf9ef8eabe5ccd939609758d114ea376))
|
|
162
|
+
* **select:** update option selection handling to ensure compatibility with event detail structure ([975adf6](https://github.com/AlaskaAirlines/auro-formkit/commit/975adf68384b25d270c9fe70cd868fe3872ce5c4))
|
|
163
|
+
* use latest auro-library ([dba104e](https://github.com/AlaskaAirlines/auro-formkit/commit/dba104edb54defca8f02263640b0a1c18aac0326))
|
|
164
|
+
|
|
165
|
+
|
|
166
|
+
### Reverts
|
|
167
|
+
|
|
168
|
+
* **keyboard:** remove Shift+Tab examples from combobox and select AB[#1516718](https://github.com/AlaskaAirlines/auro-formkit/issues/1516718) ([8af917e](https://github.com/AlaskaAirlines/auro-formkit/commit/8af917e11d3fb899dc3720bac28a86e83031b388))
|
|
169
|
+
* Revert "fix(combobox): handle trailing whitespace in filter to prevent broken matching after cursor editing" ([8121ad1](https://github.com/AlaskaAirlines/auro-formkit/commit/8121ad16cdfb2afaa0e8a8a57115140f75d8de2b))
|
|
170
|
+
|
|
171
|
+
# Changelog
|
|
172
|
+
|
|
173
|
+
You can view a complete history of changes to this repository on the GitHub releases page:
|
|
11
174
|
|
|
12
175
|
https://github.com/AlaskaAirlines/auro-formkit/releases
|
package/README.md
CHANGED
|
@@ -3,21 +3,25 @@ The README.md file is a compiled document. No edits should be made directly to t
|
|
|
3
3
|
|
|
4
4
|
README.md is created by running `npm run build:docs:kit`.
|
|
5
5
|
|
|
6
|
+
This file is generated based on the template at
|
|
7
|
+
`./docs/templates/kitReadmeTemplate.md`
|
|
8
|
+
and compiled to `./README.md` each time the docs are compiled.
|
|
9
|
+
|
|
6
10
|
The following sections are editable by making changes to the following files:
|
|
7
11
|
|
|
8
12
|
| SECTION | DESCRIPTION | FILE LOCATION |
|
|
9
13
|
|------------------------|---------------------------------------------------|-------------------------------------|
|
|
10
|
-
| Description | Description of the
|
|
11
|
-
| Use Cases | Examples for when to use this
|
|
12
|
-
| Additional Information | For use to add any
|
|
13
|
-
|
|
|
14
|
-
-->
|
|
15
|
-
|
|
16
|
-
#
|
|
14
|
+
| Description | Description of the kit | `./docs/partials/description.md` |
|
|
15
|
+
| Use Cases | Examples for when to use this kit | `./docs/partials/useCases.md` |
|
|
16
|
+
| Additional Information | For use to add any kit specific information | `./docs/partials/readmeAddlInfo.md` |
|
|
17
|
+
| kit Example Code | HTML sample code of the kits use | `./apiExamples/basic.html` |
|
|
18
|
+
-->
|
|
19
|
+
|
|
20
|
+
# Formkit
|
|
17
21
|
|
|
18
22
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
19
|
-
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
20
|
-
|
|
23
|
+
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
24
|
+
|
|
21
25
|
## Description
|
|
22
26
|
|
|
23
27
|
`auro-formkit` is a collection of web components that can be used to build forms.
|
|
@@ -38,58 +42,73 @@ It is a monorepo that contains the following components:
|
|
|
38
42
|
- `auro-radio`
|
|
39
43
|
- `auro-radio-group`
|
|
40
44
|
- `auro-select`
|
|
41
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
42
|
-
|
|
43
|
-
##
|
|
45
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
46
|
+
|
|
47
|
+
## Use Cases
|
|
48
|
+
|
|
49
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
|
|
50
|
+
<!-- The below content is automatically added from ./docs/partials/useCases.md -->
|
|
51
|
+
|
|
52
|
+
### 1. User Accounts
|
|
53
|
+
- Sign up and login forms
|
|
54
|
+
- Email and password validation
|
|
55
|
+
|
|
56
|
+
### 2. Checkout & Payments
|
|
57
|
+
- Collect shipping and billing info
|
|
58
|
+
- Use autofill and validation to reduce errors
|
|
59
|
+
|
|
60
|
+
### 3. Booking & Scheduling
|
|
61
|
+
- Select dates and times
|
|
62
|
+
- Prevent invalid selections (like past dates)
|
|
63
|
+
|
|
64
|
+
### 4. Search & Filters
|
|
65
|
+
- Search inputs with suggestions
|
|
66
|
+
- Filters like price ranges or categories
|
|
67
|
+
|
|
68
|
+
### 5. File Uploads
|
|
69
|
+
- Upload images, documents, or media
|
|
70
|
+
- Restrict file types and allow multiple files
|
|
71
|
+
|
|
72
|
+
### 6. Feedback & Surveys
|
|
73
|
+
- Collect ratings, choices, and comments
|
|
74
|
+
- Require answers where needed
|
|
75
|
+
|
|
76
|
+
### 7. Calculators & Dynamic Forms
|
|
77
|
+
- Show real-time results (e.g., pricing, totals)
|
|
78
|
+
|
|
79
|
+
### 8. Multi-Step Forms
|
|
80
|
+
- Break long forms into smaller steps
|
|
81
|
+
|
|
82
|
+
### 9. Mobile-Friendly Input
|
|
83
|
+
- Use input types that trigger the right keyboard
|
|
84
|
+
|
|
85
|
+
### 10. Accessible Forms
|
|
86
|
+
- Proper labels and grouped inputs
|
|
87
|
+
- Built-in error handling
|
|
88
|
+
|
|
89
|
+
### 11. Built-in Validation
|
|
90
|
+
- Use HTML5 rules instead of custom JavaScript
|
|
91
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
92
|
+
|
|
93
|
+
## Getting Started
|
|
44
94
|
|
|
45
|
-
<!-- AURO-GENERATED-CONTENT:START (
|
|
95
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/kitInstall.md) -->
|
|
96
|
+
<!-- The below content is automatically added from ./docs/partials/kitInstall.md -->
|
|
46
97
|
[](https://github.com/AlaskaAirlines/auro-formkit/actions/workflows/testPublish.yml)
|
|
47
98
|
[](https://www.npmjs.com/package/@aurodesignsystem/auro-formkit)
|
|
48
99
|
[](https://www.apache.org/licenses/LICENSE-2.0)
|
|
49
100
|

|
|
50
101
|
|
|
102
|
+
#### NPM Installation
|
|
103
|
+
|
|
51
104
|
```shell
|
|
52
105
|
$ npm i @aurodesignsystem/auro-formkit
|
|
53
106
|
```
|
|
54
|
-
|
|
55
|
-
Installing as a direct, dev or peer dependency is up to the user installing the package. If you are unsure as to what type of dependency you should use, consider reading this [stack overflow](https://stackoverflow.com/questions/18875674/whats-the-difference-between-dependencies-devdependencies-and-peerdependencies) answer.
|
|
56
|
-
|
|
57
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
58
|
-
|
|
59
|
-
## Getting Started
|
|
60
|
-
|
|
107
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
61
108
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/gettingStarted.md) -->
|
|
62
|
-
<!-- The below content is automatically added from ./docs/partials/gettingStarted.md -->
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
### Usage
|
|
66
|
-
|
|
67
|
-
You can use Auro Formkit components in your project in two ways: automatic or custom registration.
|
|
68
|
-
|
|
69
|
-
#### Automatic Registration
|
|
70
|
-
|
|
71
|
-
For automatic registration, simply import the component:
|
|
72
|
-
|
|
73
|
-
```javascript
|
|
74
|
-
import "@aurodesignsystem/auro-formkit/auro-checkbox";
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
This will automatically register both the `<auro-checkbox>` and the included `<auro-checkbox-group>` component for use in your project. Note that not all Auro Formkit components have sub-components. Be sure to check the documentation for each component to understand its specific usage and registration requirements.
|
|
78
|
-
|
|
79
|
-
#### Custom Registration
|
|
80
|
-
|
|
81
|
-
If you prefer to register the component with a custom name, you can call the component class directly to create a custom registration:
|
|
82
|
-
|
|
83
|
-
```javascript
|
|
84
|
-
import { AuroCheckbox, AuroCheckboxGroup } from "@aurodesignsystem/auro-formkit/auro-checkbox/class";
|
|
85
|
-
|
|
86
|
-
AuroCheckbox.register('custom-checkbox');
|
|
87
|
-
AuroCheckbox.register('custom-checkbox-group');
|
|
88
|
-
```
|
|
89
|
-
|
|
90
|
-
This will register the component as `<custom-checkbox>` and `<custom-checkbox-group>`.
|
|
91
|
-
|
|
92
|
-
#### TypeScript Module Resolution
|
|
109
|
+
<!-- The below content is automatically added from ./docs/partials/gettingStarted.md -->
|
|
110
|
+
|
|
111
|
+
### TypeScript Module Resolution
|
|
93
112
|
|
|
94
113
|
When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
|
|
95
114
|
|
|
@@ -102,111 +121,47 @@ When using TypeScript set `moduleResolution` to `bundler`, add the following to
|
|
|
102
121
|
```
|
|
103
122
|
|
|
104
123
|
This configuration enables proper module resolution for the component's TypeScript files.
|
|
124
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
125
|
+
|
|
126
|
+
## Install from CDN
|
|
105
127
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
`index.html -> <head>`
|
|
111
|
-
|
|
112
|
-
```html
|
|
113
|
-
<script type="module">
|
|
114
|
-
import "@aurodesignsystem/auro-formkit/auro-checkbox";
|
|
115
|
-
</script>
|
|
116
|
-
```
|
|
128
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/bundleInstallDescription.md) -->
|
|
129
|
+
<!-- The below content is automatically added from ./docs/partials/bundleInstallDescription.md -->
|
|
130
|
+
In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
|
|
117
131
|
|
|
118
|
-
|
|
132
|
+
Each component is imported individually by its export path:
|
|
119
133
|
|
|
120
134
|
```html
|
|
121
|
-
<auro-checkbox
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
<auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>
|
|
129
|
-
Checkbox option two
|
|
130
|
-
</auro-checkbox>
|
|
131
|
-
</auro-checkbox-group>
|
|
132
|
-
```
|
|
133
|
-
|
|
134
|
-
By following these steps, you can easily integrate Auro Formkit components into your project.
|
|
135
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
136
|
-
|
|
137
|
-
### Design Token CSS Custom Property dependency
|
|
138
|
-
|
|
139
|
-
<!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
|
|
140
|
-
The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
|
|
141
|
-
|
|
142
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
143
|
-
|
|
144
|
-
## Development
|
|
145
|
-
|
|
146
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/developmentDescription.md) -->
|
|
147
|
-
<!-- The below content is automatically added from ./docs/partials/developmentDescription.md -->
|
|
148
|
-
|
|
149
|
-
### Filtering
|
|
150
|
-
|
|
151
|
-
Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
|
|
152
|
-
|
|
153
|
-
To only develop a single component, use the `--filter` flag:
|
|
154
|
-
|
|
155
|
-
```shell
|
|
156
|
-
npx turbo dev --filter=@aurodesignsystem/auro-input
|
|
157
|
-
```
|
|
158
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
159
|
-
|
|
160
|
-
### Start development environment
|
|
161
|
-
|
|
162
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/localhost.md) -->
|
|
163
|
-
<!-- The below content is automatically added from ./docs/partials/localhost.md -->
|
|
164
|
-
|
|
165
|
-
## Local Development
|
|
166
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
167
|
-
|
|
168
|
-
### Testing
|
|
169
|
-
|
|
170
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/testing.md) -->
|
|
171
|
-
<!-- The below content is automatically added from ./docs/partials/testing.md -->
|
|
172
|
-
```
|
|
173
|
-
npm run test
|
|
174
|
-
```
|
|
175
|
-
|
|
176
|
-
#### Port configuration
|
|
135
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-checkbox/+esm"></script>
|
|
136
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-input/+esm"></script>
|
|
137
|
+
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-select/+esm"></script>
|
|
138
|
+
```
|
|
139
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
140
|
+
|
|
141
|
+
## Additional Information
|
|
177
142
|
|
|
178
|
-
Turbo will attempt to test components in parallel which will lead to port conflicts.
|
|
179
|
-
|
|
180
|
-
Setting the `concurrency` to `1` will prevent Turbo from running tests in parallel:
|
|
181
|
-
|
|
182
|
-
```
|
|
183
|
-
"test": "turbo run test --concurrency=1",
|
|
184
|
-
```
|
|
185
|
-
|
|
186
|
-
`turbo.json`does not support `--concurrency` yet. See [this issue](https://github.com/vercel/turborepo/discussions/7493).
|
|
187
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
188
143
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
189
|
-
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
This monorepo is managed using [Turborepo](https://turborepo.org/).
|
|
194
|
-
|
|
195
|
-
### Managing dependencies
|
|
196
|
-
|
|
144
|
+
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
145
|
+
|
|
146
|
+
### Turborepo Overview
|
|
147
|
+
|
|
148
|
+
This monorepo is managed using [Turborepo](https://turborepo.org/).
|
|
149
|
+
|
|
150
|
+
### Managing dependencies
|
|
151
|
+
|
|
197
152
|
#### Best practices for dependency installation
|
|
198
153
|
|
|
199
154
|
When you install a dependency in a component or package in `auro-formkit`, you should install it directly in the package that uses it.
|
|
200
155
|
|
|
201
|
-
The package's `package.json` will have every dependency that it needs. This is true for both external and internal dependencies.
|
|
202
|
-
|
|
203
|
-
### Types of Dependencies by Source
|
|
204
|
-
|
|
156
|
+
The package's `package.json` will have every dependency that it needs. This is true for both external and internal dependencies.
|
|
157
|
+
|
|
158
|
+
### Types of Dependencies by Source
|
|
159
|
+
|
|
205
160
|
#### External Dependencies
|
|
206
161
|
- These are packages fetched from the `npm` registry (e.g., Lit, Rollup, Sass)
|
|
207
162
|
- Declared in `package.json` using exact versions or version ranges
|
|
208
|
-
- Installed in `node_modules` during `npm install` or `yarn install`
|
|
209
|
-
|
|
163
|
+
- Installed in `node_modules` during `npm install` or `yarn install`
|
|
164
|
+
|
|
210
165
|
#### Internal Dependencies
|
|
211
166
|
- These are packages from within the `auro-formkit` monorepo
|
|
212
167
|
- Allow sharing code between different packages in your repository
|
|
@@ -214,33 +169,19 @@ The package's `package.json` will have every dependency that it needs. This is t
|
|
|
214
169
|
- Must be declared in `package.json` just like external dependencies
|
|
215
170
|
- Use workspace protocols (e.g., `"workspace:*"` or `"workspace:^1.0.0"`)
|
|
216
171
|
|
|
217
|
-
### Types of Dependencies by Purpose
|
|
218
|
-
|
|
172
|
+
### Types of Dependencies by Purpose
|
|
173
|
+
|
|
219
174
|
#### Dependencies (`dependencies`)
|
|
220
175
|
- Required for the package to function in production
|
|
221
176
|
- Example:
|
|
222
177
|
```json
|
|
223
178
|
{
|
|
224
179
|
"dependencies": {
|
|
225
|
-
"lit
|
|
226
|
-
"@aurodesignsystem/input": "workspace:*" // Internal dependency
|
|
227
|
-
}
|
|
228
|
-
}
|
|
229
|
-
```
|
|
230
|
-
|
|
231
|
-
#### Peer Dependencies (`peerDependencies`)
|
|
232
|
-
- Packages that your library expects the consuming application to provide
|
|
233
|
-
- Common for plugins or UI component libraries
|
|
234
|
-
- Example:
|
|
235
|
-
```json
|
|
236
|
-
{
|
|
237
|
-
"peerDependencies": {
|
|
238
|
-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
239
|
-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
180
|
+
"lit": "^3.0.0"
|
|
240
181
|
}
|
|
241
182
|
}
|
|
242
|
-
```
|
|
243
|
-
|
|
183
|
+
```
|
|
184
|
+
|
|
244
185
|
### Development Dependencies (`devDependencies`)
|
|
245
186
|
- Only needed during development, testing, or building
|
|
246
187
|
- Not included in the production bundle
|
|
@@ -248,36 +189,30 @@ The package's `package.json` will have every dependency that it needs. This is t
|
|
|
248
189
|
```json
|
|
249
190
|
{
|
|
250
191
|
"devDependencies": {
|
|
251
|
-
"
|
|
252
|
-
"@
|
|
192
|
+
"@aurodesignsystem/auro-dropdown": "*",
|
|
193
|
+
"@aurodesignsystem/build-tools": "*",
|
|
194
|
+
"rollup": "^4.24.4"
|
|
253
195
|
}
|
|
254
196
|
}
|
|
255
|
-
```
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
### Example: Component Dependencies
|
|
256
200
|
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
Let's use `@auro-formki/combobox` as an example to illustrate these concepts:
|
|
201
|
+
Let's use `@aurodesignsystem/combobox` as an example to illustrate these concepts:
|
|
260
202
|
|
|
261
203
|
```json
|
|
262
204
|
{
|
|
263
205
|
"name": "@aurodesignsystem/combobox",
|
|
264
206
|
"dependencies": {
|
|
265
|
-
|
|
266
|
-
"@aurodesignsystem/auro-dropdown": "*", // Required UI component
|
|
267
|
-
"@aurodesignsystem/auro-input": "*", // Required UI component
|
|
268
|
-
|
|
269
|
-
// External dependencies
|
|
270
|
-
"@alaskaairux/icons": "^5.3.0", // Required UI component
|
|
271
|
-
"lit": "^3.2.1" // Framework
|
|
272
|
-
},
|
|
273
|
-
"peerDependencies": {
|
|
274
|
-
"@aurodesignsystem/design-tokens": "^4.12.1",
|
|
275
|
-
"@aurodesignsystem/webcorestylesheets": "^5.1.2"
|
|
207
|
+
"lit": "^3.2.1"
|
|
276
208
|
},
|
|
277
209
|
"devDependencies": {
|
|
210
|
+
// Internal component dependencies
|
|
211
|
+
"@aurodesignsystem/auro-dropdown": "*",
|
|
212
|
+
"@aurodesignsystem/auro-input": "*",
|
|
278
213
|
// Build utilities
|
|
279
214
|
"rollup": "^4.24.4",
|
|
280
|
-
"@aurodesignsystem/build-tools": "*"
|
|
215
|
+
"@aurodesignsystem/build-tools": "*"
|
|
281
216
|
}
|
|
282
217
|
}
|
|
283
218
|
```
|
|
@@ -286,7 +221,6 @@ This structure ensures that:
|
|
|
286
221
|
1. The package explicitly declares all its dependencies
|
|
287
222
|
2. Internal dependencies are properly tracked and versioned
|
|
288
223
|
3. Development tools are separated from production dependencies
|
|
289
|
-
4. Peer dependencies are clearly communicated to consumers
|
|
290
224
|
|
|
291
225
|
- External dependencies come from the `npm` registry.
|
|
292
226
|
|
|
@@ -302,8 +236,8 @@ This practice has several benefits:
|
|
|
302
236
|
|
|
303
237
|
- **Pruning unused dependencies:** When dependencies are installed in the packages that they are meant for, Turborepo can read your lockfile and remove dependencies that aren't used in the packages you need.
|
|
304
238
|
|
|
305
|
-
For more information, see the [Turborepo docs](https://turbo.build/repo/docs/crafting-your-repository/managing-dependencies).
|
|
306
|
-
|
|
239
|
+
For more information, see the [Turborepo docs](https://turbo.build/repo/docs/crafting-your-repository/managing-dependencies).
|
|
240
|
+
|
|
307
241
|
### Root `package.json`
|
|
308
242
|
|
|
309
243
|
The only dependencies that belong in the root `package.json` are **tools for managing the repository**.
|
|
@@ -311,4 +245,20 @@ The only dependencies that belong in the root `package.json` are **tools for man
|
|
|
311
245
|
Some examples of dependencies that make sense to install in the root are `turbo`, `husky`, or `stylelint`.
|
|
312
246
|
|
|
313
247
|
Conversely, dependencies Auro components rely on should be installed in their respective packages, such as `Lit`, `Rollup`, or other `auro-formkit` dependencies.
|
|
248
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
249
|
+
|
|
250
|
+
## Formkit Development
|
|
251
|
+
|
|
252
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/developmentDescription.md) -->
|
|
253
|
+
<!-- The below content is automatically added from ./docs/partials/developmentDescription.md -->
|
|
254
|
+
|
|
255
|
+
### Filtering
|
|
256
|
+
|
|
257
|
+
Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
|
|
258
|
+
|
|
259
|
+
To only develop a single component, use the `--filter` flag:
|
|
260
|
+
|
|
261
|
+
```shell
|
|
262
|
+
npx turbo dev --filter=@aurodesignsystem/auro-input
|
|
263
|
+
```
|
|
314
264
|
<!-- AURO-GENERATED-CONTENT:END -->
|