@aurodesignsystem-dev/auro-formkit 0.0.0-pr1448.0 → 0.0.0-pr1451.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.
Files changed (163) hide show
  1. package/components/checkbox/demo/api.md +201 -221
  2. package/components/checkbox/demo/api.min.js +1 -1
  3. package/components/checkbox/demo/index.md +21 -23
  4. package/components/checkbox/demo/index.min.js +1 -1
  5. package/components/checkbox/demo/keyboard-behavior.md +39 -0
  6. package/components/checkbox/demo/readme.md +23 -35
  7. package/components/checkbox/dist/auro-checkbox-group.d.ts +6 -6
  8. package/components/checkbox/dist/auro-checkbox.d.ts +8 -8
  9. package/components/checkbox/dist/index.js +1 -1
  10. package/components/checkbox/dist/registered.js +1 -1
  11. package/components/combobox/README.md +13 -3
  12. package/components/combobox/demo/accessibility.html +57 -0
  13. package/components/combobox/demo/accessibility.md +77 -0
  14. package/components/combobox/demo/api.html +24 -0
  15. package/components/combobox/demo/api.md +1613 -1685
  16. package/components/combobox/demo/api.min.js +15 -21
  17. package/components/combobox/demo/design.html +83 -0
  18. package/components/combobox/demo/design.md +283 -0
  19. package/components/combobox/demo/index.html +49 -16
  20. package/components/combobox/demo/index.js +3 -2
  21. package/components/combobox/demo/index.md +861 -185
  22. package/components/combobox/demo/index.min.js +41 -22
  23. package/components/combobox/demo/install.html +84 -0
  24. package/components/combobox/demo/install.js +24 -0
  25. package/components/combobox/demo/install.md +100 -0
  26. package/components/combobox/demo/install.min.js +17991 -0
  27. package/components/combobox/demo/{keyboardBehavior.html → keyboard-behavior.html} +2 -1
  28. package/components/combobox/demo/keyboard-behavior.md +276 -0
  29. package/components/combobox/demo/layout.md +112 -0
  30. package/components/combobox/demo/readme.html +25 -1
  31. package/components/combobox/demo/readme.md +50 -52
  32. package/components/combobox/demo/styles.css +141 -0
  33. package/components/combobox/demo/voiceover.html +66 -0
  34. package/components/combobox/demo/voiceover.md +118 -0
  35. package/components/combobox/dist/auro-combobox.d.ts +36 -36
  36. package/components/combobox/dist/index.js +12 -17
  37. package/components/combobox/dist/registered.js +12 -17
  38. package/components/counter/demo/api.md +751 -819
  39. package/components/counter/demo/api.min.js +2 -2
  40. package/components/counter/demo/index.md +35 -39
  41. package/components/counter/demo/index.min.js +2 -2
  42. package/components/counter/demo/keyboard-behavior.md +127 -0
  43. package/components/counter/demo/readme.md +39 -51
  44. package/components/counter/dist/auro-counter-group.d.ts +2 -2
  45. package/components/counter/dist/auro-counter.d.ts +10 -10
  46. package/components/counter/dist/index.js +2 -2
  47. package/components/counter/dist/registered.js +2 -2
  48. package/components/datepicker/demo/api.md +827 -931
  49. package/components/datepicker/demo/api.min.js +4 -4
  50. package/components/datepicker/demo/index.md +79 -87
  51. package/components/datepicker/demo/index.min.js +4 -4
  52. package/components/datepicker/demo/keyboard-behavior.md +19 -0
  53. package/components/datepicker/demo/readme.md +19 -31
  54. package/components/datepicker/dist/index.js +4 -4
  55. package/components/datepicker/dist/registered.js +4 -4
  56. package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +2 -2
  57. package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +13 -13
  58. package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +4 -4
  59. package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +3 -3
  60. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +2 -2
  61. package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +1 -1
  62. package/components/dropdown/demo/api.md +795 -851
  63. package/components/dropdown/demo/api.min.js +1 -1
  64. package/components/dropdown/demo/index.md +145 -155
  65. package/components/dropdown/demo/index.min.js +1 -1
  66. package/components/dropdown/demo/keyboard-behavior.md +72 -0
  67. package/components/dropdown/demo/readme.md +39 -51
  68. package/components/dropdown/dist/auro-dropdown.d.ts +22 -22
  69. package/components/dropdown/dist/auro-dropdownBib.d.ts +3 -3
  70. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +1 -1
  71. package/components/dropdown/dist/index.js +1 -1
  72. package/components/dropdown/dist/registered.js +1 -1
  73. package/components/form/demo/api.md +173 -179
  74. package/components/form/demo/api.min.js +27 -33
  75. package/components/form/demo/index.md +27 -33
  76. package/components/form/demo/index.min.js +27 -33
  77. package/components/form/demo/keyboard-behavior.md +38 -0
  78. package/components/form/demo/readme.md +14 -28
  79. package/components/input/demo/api.md +572 -664
  80. package/components/input/demo/api.min.js +2 -2
  81. package/components/input/demo/index.md +93 -99
  82. package/components/input/demo/index.min.js +2 -2
  83. package/components/input/demo/keyboard-behavior.md +25 -0
  84. package/components/input/demo/readme.md +17 -29
  85. package/components/input/dist/auro-input.d.ts +1 -1
  86. package/components/input/dist/base-input.d.ts +29 -29
  87. package/components/input/dist/index.js +2 -2
  88. package/components/input/dist/registered.js +2 -2
  89. package/components/menu/demo/api.md +745 -789
  90. package/components/menu/demo/api.min.js +3 -4
  91. package/components/menu/demo/index.md +35 -37
  92. package/components/menu/demo/index.min.js +3 -4
  93. package/components/menu/demo/keyboard-behavior.md +18 -0
  94. package/components/menu/demo/readme.md +23 -35
  95. package/components/menu/dist/auro-menu-utils.d.ts +1 -1
  96. package/components/menu/dist/auro-menu.context.d.ts +3 -3
  97. package/components/menu/dist/auro-menu.d.ts +5 -5
  98. package/components/menu/dist/auro-menuoption.d.ts +6 -6
  99. package/components/menu/dist/index.js +3 -4
  100. package/components/menu/dist/registered.js +3 -4
  101. package/components/radio/demo/api.md +318 -350
  102. package/components/radio/demo/api.min.js +1 -1
  103. package/components/radio/demo/index.md +25 -29
  104. package/components/radio/demo/index.min.js +1 -1
  105. package/components/radio/demo/keyboard-behavior.md +72 -0
  106. package/components/radio/demo/readme.md +21 -33
  107. package/components/radio/dist/auro-radio-group.d.ts +9 -9
  108. package/components/radio/dist/auro-radio.d.ts +8 -8
  109. package/components/radio/dist/index.js +1 -1
  110. package/components/radio/dist/registered.js +1 -1
  111. package/components/select/README.md +12 -1
  112. package/components/select/demo/accessibility.html +65 -0
  113. package/components/select/demo/accessibility.md +76 -0
  114. package/components/select/demo/api.md +1713 -1793
  115. package/components/select/demo/api.min.js +5 -6
  116. package/components/select/demo/index.html +247 -37
  117. package/components/select/demo/index.md +225 -345
  118. package/components/select/demo/index.min.js +5 -6
  119. package/components/select/demo/keyboard-behavior.md +39 -0
  120. package/components/select/demo/layout.html +59 -0
  121. package/components/select/demo/layout.md +299 -0
  122. package/components/select/demo/readme.md +45 -46
  123. package/components/select/demo/voiceover.html +65 -0
  124. package/components/select/demo/voiceover.md +183 -0
  125. package/components/select/dist/auro-select.d.ts +11 -11
  126. package/components/select/dist/index.js +2 -2
  127. package/components/select/dist/registered.js +2 -2
  128. package/custom-elements.json +13 -11
  129. package/package.json +26 -26
  130. package/components/checkbox/demo/keyboardBehavior.md +0 -0
  131. package/components/combobox/demo/keyboardBehavior.md +0 -281
  132. package/components/counter/demo/keyboardBehavior.md +0 -127
  133. package/components/datepicker/demo/keyboardBehavior.md +0 -19
  134. package/components/dropdown/demo/keyboardBehavior.md +0 -77
  135. package/components/form/demo/keyboardBehavior.md +0 -0
  136. package/components/input/demo/keyboardBehavior.md +0 -0
  137. package/components/menu/demo/keyboardBehavior.md +0 -0
  138. package/components/radio/demo/keyboardBehavior.md +0 -0
  139. package/components/select/demo/keyboardBehavior.md +0 -245
  140. /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
  141. /package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +0 -0
  142. /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
  143. /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
  144. /package/components/datepicker/dist/{iconVersion.d.ts → src/iconVersion.d.ts} +0 -0
  145. /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
  146. /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
  147. /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
  148. /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
  149. /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
  150. /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
  151. /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
  152. /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
  153. /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
  154. /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
  155. /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
  156. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
  157. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
  158. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
  159. /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
  160. /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
  161. /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
  162. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
  163. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
@@ -0,0 +1,65 @@
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/voiceover.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-select | VoiceOver</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ <style>
37
+ table {
38
+ --ds-color-container-secondary-default: transparent;
39
+ }
40
+
41
+ tr:not(:last-of-type) {
42
+ border-bottom: 1px solid var(--ds-color-border-tertiary-default);
43
+ }
44
+ </style>
45
+ </head>
46
+ <body class="auro-markdown">
47
+ <main></main>
48
+
49
+ <script type="module">
50
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
51
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
52
+ fetch('./voiceover.md')
53
+ .then((response) => response.text())
54
+ .then((text) => {
55
+ const rawHtml = marked.parse(text);
56
+ document.querySelector('main').innerHTML = rawHtml;
57
+ Prism.highlightAll();
58
+ });
59
+ </script>
60
+
61
+ <!-- If additional elements are needed for the demo, add them here. -->
62
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
63
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
64
+ </body>
65
+ </html>
@@ -0,0 +1,183 @@
1
+ <auro-header level="1" id="overview">Select - VoiceOver Behavior</auro-header>
2
+ <p>This page documents the VoiceOver experience when using the <code>&lt;auro-select&gt;</code> component. It covers announcements, gestures, and workflows for both large and small viewports.</p>
3
+ <auro-header level="2" id="voiceOverInteractiveAnnouncements">Interactive Announcements</auro-header>
4
+ <auro-header level="3" id="voiceOverFocusAnnouncement">Focus</auro-header>
5
+ <p>When focus is given to the component trigger the following is announced:</p>
6
+ <ol>
7
+ <li><strong>Label:</strong> <code>label</code> slot content</li>
8
+ <li><strong>Current value:</strong> [current value or <em>"no selection"</em>]</li>
9
+ <li><strong>Role:</strong> <em>"combo box"</em></li>
10
+ <li>
11
+ <strong>State hints:</strong>
12
+ <table class="compressed body-xs">
13
+ <thead>
14
+ <tr>
15
+ <th>State</th>
16
+ <th>What gets announced</th>
17
+ </tr>
18
+ </thead>
19
+ <tbody>
20
+ <tr>
21
+ <td>Expanded</td>
22
+ <td><em>"collapsed"</em> or <em>"expanded"</em></td>
23
+ </tr>
24
+ <tr>
25
+ <td>Required</td>
26
+ <td><em>"required"</em></td>
27
+ </tr>
28
+ <tr>
29
+ <td>Invalid</td>
30
+ <td><em>"invalid data"</em></td>
31
+ </tr>
32
+ <tr>
33
+ <td>Disabled</td>
34
+ <td><em>"dimmed"</em></td>
35
+ </tr>
36
+ <tr>
37
+ <td>autocomplete</td>
38
+ <td><em>"has auto complete"</em></td>
39
+ </tr>
40
+ </tbody>
41
+ </table>
42
+ </li>
43
+ <li><strong>Additional description:</strong> <code>helptext</code> slot content if present (after a brief pause)</li>
44
+ </ol>
45
+ <auro-header level="3" id="voiceOverNavigateAnnouncement">Navigating Options</auro-header>
46
+ <p>Announces each option <em>"[option label], [<em>"selected"</em> if <code>selected</code>], [<em>"dimmed"</em> if <code>disabled</code>]"</em> as you move.</p>
47
+ <p>3 finger swipe gesture may be used to scroll the option list.</p>
48
+ <auro-header level="3" id="voiceOverCloseGesture">Close Gesture</auro-header>
49
+ <p>The component may be <strong>closed</strong> | <strong>collapsed</strong> using a gesture.</p>
50
+ <ul>
51
+ <li><strong>iOS VoiceOver:</strong> The two-finger <em>"scrub"</em> (zigzag / a <em>"Z"</em> shape) gesture acts as the <em>'Escape'</em> key, commonly used to dismiss modal views.</li>
52
+ <li>
53
+ <strong>Android TalkBack:</strong> users typically swipe down then left (an <em>"L"</em> gesture) or use the back gesture to go back/close.<br />
54
+ <div class="note">
55
+ <strong>How to Perform Android back/close gesture:</strong> Swipe inwards from either the left or right edge of the screen, typically from the middle-edge, to go to the previous screen.
56
+ </div>
57
+ </li>
58
+ </ul>
59
+ <auro-header level="3" id="voiceOverCollapseAnnouncement">Closed | Collapsed Announcements</auro-header>
60
+ <p>When the component is <strong>closed</strong> | <strong>collapsed</strong> announces the <strong>expanded</strong> state change.</p>
61
+ <auro-header level="2" id="voiceOverLargeVPAnnouncements">Large Viewport Workflow</auro-header>
62
+ <p>Examples: large tablet, typical size or larger desktop browser window</p>
63
+ <ol>
64
+ <li><strong>Focus</strong></li>
65
+ <li>
66
+ <strong>Open | Expand:</strong> When the component is <strong>opened</strong> | <strong>expanded</strong> announces the active option <em>"[option label], ['selected' if <code>selected</code>]"</em>.
67
+ <div class="note">
68
+ <strong>Note:</strong> <code>disabled</code> options can not be <strong>active</strong>, this state would never be included in this announcement.
69
+ </div>
70
+ </li>
71
+ <li><strong>Navigate options</strong></li>
72
+ <li>
73
+ <strong>Select an option:</strong> Collapses the list, announces the <strong>expanded</strong> state change.
74
+ <p>~OR~</p>
75
+ <strong>Close | Collapse without selecting an option:</strong> Collapses the list, announces the <strong>expanded</strong> state change.
76
+ </li>
77
+ </ol>
78
+ <auro-header level="2" id="voiceOverSmallVPAnnouncements">Small Viewport Workflow</auro-header>
79
+ <p>Examples: mobile phone, very small desktop browser window</p>
80
+ <ol>
81
+ <li><strong>Focus</strong></li>
82
+ <li>
83
+ <strong>Open | Expand:</strong> Focus is moved to the fullscreen modal dialog <strong>Close</strong> button, announces the active option <em>"[option label], [<em>'selected'</em> if <code>selected</code>]"</em>.
84
+ <div class="note">
85
+ <strong>Note:</strong> <code>disabled</code> options can not be <strong>active</strong>, this state would never be included in this announcement.
86
+ </div>
87
+ </li>
88
+ <li><strong>Navigate options</strong></li>
89
+ <li>
90
+ <strong>Select option:</strong> Closes the fullscreen modal dialog, announces the <strong>expanded</strong> state change.
91
+ <p>~OR~</p>
92
+ <strong>Close | Collapse without selecting an option:</strong> Closes the fullscreen modal dialog, announces the <strong>expanded</strong> state change.
93
+ </li>
94
+ </ol>
95
+ <p>Key characteristics across both platforms:</p>
96
+ <ul>
97
+ <li>The <code>label</code> is always read first.</li>
98
+ <li>The component <strong>role</strong> is announced as <em>"pop-up button"</em> (macOS) or <em>"button"</em> (iOS).</li>
99
+ <li><code>disabled</code> options are announced as <em>"dimmed"</em> and cannot be selected.</li>
100
+ </ul>
101
+ <auro-header level="2" id="voiceOverStates">Impact of State</auro-header>
102
+ <auro-header level="3" id="voiceOverStateDisabled">Disabled</auro-header>
103
+ <p><strong>What VoiceOver does:</strong></p>
104
+ <ul>
105
+ <li>Focuses the element and announces it (e.g., <em>"[label], dimmed, combo box"</em> on macOS / <em>"[label], dimmed"</em> on iOS).</li>
106
+ <li>The word <strong>"dimmed"</strong> is VoiceOver's way of indicating disabled.</li>
107
+ <li>The element remains in the focus order (Tab still reaches it).</li>
108
+ <li>The user cannot interact with it — the option list can not be expanded, and no selection can be made.</li>
109
+ </ul>
110
+ <p>Key distinction from <code>aria-hidden</code>: A disabled element is <em>reachable but not operable</em>. If you want VoiceOver to skip it entirely, you would need <code>aria-hidden="true"</code> or <code>tabindex="-1"</code>, but that is generally not recommended for disabled controls — users benefit from knowing the field exists and why it may be unavailable.</p>
111
+ <p>This is consistent across NVDA and JAWS as well, though the announcement wording differs (e.g., NVDA says <em>"unavailable"</em>).</p>
112
+ <auro-header level="3" id="voiceOverStateMultiSelect">Multi Select</auro-header>
113
+ <auro-header level="4" id="voiceOverStateMultiSelectLargeVP">Large Viewport Multi-select</auro-header>
114
+ <p>Examples: large tablet, typical size or larger desktop browser window</p>
115
+ <ol>
116
+ <li><strong>Focus</strong></li>
117
+ <li><strong>Open | Expand</strong></li>
118
+ <li><strong>Navigate Options:</strong> Moves through options; announces each option name plus <em>"selected"</em> or nothing.</li>
119
+ <li><strong>Selecting an option:</strong> Double-tap toggles the focused option's selection — announces <em>"selected"</em> or <em>"unselected"</em>.</li>
120
+ <li><strong>Close | Collapse:</strong> Collapses the list, announces the expanded state change.</li>
121
+ </ol>
122
+ <auro-header level="4" id="voiceOverStateMultiSelectSmallVP">Small Viewport Multi-select</auro-header>
123
+ <p>Examples: mobile phone, very small desktop browser window</p>
124
+ <ol>
125
+ <li><strong>Focus</strong></li>
126
+ <li><strong>Open | Expand</strong></li>
127
+ <li><strong>Navigate Options:</strong> Moves through options; announces each option name plus <em>"selected"</em> or nothing.</li>
128
+ <li><strong>Selecting an option:</strong> Double-tap toggles the focused option's selection — announces <em>"selected"</em> or <em>"unselected"</em>.</li>
129
+ <li><strong>Close | Collapse:</strong> Collapses the list, announces the expanded state change.</li>
130
+ </ol>
131
+ <p>Key differences from single-select:</p>
132
+ <table>
133
+ <thead>
134
+ <tr>
135
+ <th></th>
136
+ <th>Single</th>
137
+ <th>Multi</th>
138
+ </tr>
139
+ </thead>
140
+ <tbody>
141
+ <tr>
142
+ <td>Role</td>
143
+ <td>pop-up button</td>
144
+ <td>list box</td>
145
+ </tr>
146
+ <tr>
147
+ <td>Interaction model</td>
148
+ <td>Open → pick → auto close</td>
149
+ <td>Open → toggle items → manually close</td>
150
+ </tr>
151
+ <tr>
152
+ <td>Value announcement</td>
153
+ <td>
154
+ <p>Current selected value</p>
155
+ <div class="note">
156
+ <strong>On focus:</strong> Announces "[component label], [current value or 'no selection'], pop-up button"
157
+ </div>
158
+ </td>
159
+ <td>
160
+ <p>Each option's selected state individually</p>
161
+ <div class="note">
162
+ <strong>On focus:</strong> Announces "[component label], [[{option label, 'selected'}, {option label, 'selected'}] or 'no selection'], list box"
163
+ </div>
164
+ <div class="note">
165
+ <strong>On selection change:</strong> Announces "[option label], ['selected' | 'unselected']"
166
+ </div>
167
+ </td>
168
+ </tr>
169
+ <tr>
170
+ <td>Space key</td>
171
+ <td>Opens/closes picker</td>
172
+ <td>Toggles selection</td>
173
+ </tr>
174
+ </tbody>
175
+ </table>
176
+ <div class="note"><strong>Important caveat:</strong> Multi-select is notoriously difficult for all users, including screen reader users — WCAG and usability research generally recommend avoiding <code>&lt;auro-select multiSelect&gt;</code> in favor of checkboxes or other patterns that make multi-selection more discoverable.</div>
177
+ <auro-header level="3" id="voiceOverStateInvalid">Invalid</auro-header>
178
+ <p>When an <code>&lt;auro-select&gt;</code> is invalid the following occurs:</p>
179
+ <ul>
180
+ <li><code>Focus</code> — VoiceOver announces <em>"invalid data"</em> (macOS) or <em>"invalid entry"</em> (iOS) after the element's label.</li>
181
+ <li>The Help Text will render the error message and it will be included in the VoiceOver focus announcement.</li>
182
+ </ul>
183
+ <p>Example: when focusing on an invalid <code>&lt;auro-select&gt;</code> the VoiceOver announces something like <em>"Country, invalid data, combo box, Please select a country"</em>.</p>
@@ -330,13 +330,13 @@ export class AuroSelect extends AuroElement {
330
330
  * @returns {void} Internal defaults.
331
331
  */
332
332
  private _initializeDefaults;
333
- appearance: string;
333
+ appearance: string | undefined;
334
334
  value: any;
335
- fullscreenBreakpoint: string;
336
- onDark: boolean;
335
+ fullscreenBreakpoint: string | undefined;
336
+ onDark: boolean | undefined;
337
337
  isPopoverVisible: any;
338
- shape: string;
339
- size: string;
338
+ shape: string | undefined;
339
+ size: string | undefined;
340
340
  /**
341
341
  * Formatted value based on `multiSelect` state.
342
342
  * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
@@ -404,9 +404,9 @@ export class AuroSelect extends AuroElement {
404
404
  * @returns {void}
405
405
  */
406
406
  private configureMenu;
407
- menu: Element;
408
- defaultMenuSize: string;
409
- defaultMenuShape: string;
407
+ menu: Element | null | undefined;
408
+ defaultMenuSize: string | null | undefined;
409
+ defaultMenuShape: string | null | undefined;
410
410
  options: any;
411
411
  optionSelected: any;
412
412
  /**
@@ -415,7 +415,7 @@ export class AuroSelect extends AuroElement {
415
415
  * @returns {void}
416
416
  */
417
417
  private configureSelect;
418
- nativeSelect: HTMLSelectElement;
418
+ nativeSelect: HTMLSelectElement | null | undefined;
419
419
  /**
420
420
  * Updates the active option in the menu.
421
421
  * @param {number} index - Index of the option to make active.
@@ -429,7 +429,7 @@ export class AuroSelect extends AuroElement {
429
429
  */
430
430
  private updateActiveOptionBasedOnKey;
431
431
  sameLetterTimes: any;
432
- lastLetter: string;
432
+ lastLetter: string | undefined;
433
433
  /**
434
434
  * Manages the visibility of the dropdown based on loading state changes.
435
435
  *
@@ -461,7 +461,7 @@ export class AuroSelect extends AuroElement {
461
461
  * @return {void}
462
462
  */
463
463
  private handleFocusin;
464
- touched: boolean;
464
+ touched: boolean | undefined;
465
465
  /**
466
466
  * Watch for slot changes and recalculate the menuoptions.
467
467
  * @private
@@ -5128,7 +5128,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
5128
5128
  }
5129
5129
  };
5130
5130
 
5131
- var formkitVersion$1 = '202604231640';
5131
+ var formkitVersion$1 = '202604232250';
5132
5132
 
5133
5133
  class AuroElement extends LitElement {
5134
5134
  static get properties() {
@@ -6881,7 +6881,7 @@ class AuroHelpText extends LitElement {
6881
6881
  }
6882
6882
  }
6883
6883
 
6884
- var formkitVersion = '202604231640';
6884
+ var formkitVersion = '202604232250';
6885
6885
 
6886
6886
  var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
6887
6887
 
@@ -5128,7 +5128,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
5128
5128
  }
5129
5129
  };
5130
5130
 
5131
- var formkitVersion$1 = '202604231640';
5131
+ var formkitVersion$1 = '202604232250';
5132
5132
 
5133
5133
  class AuroElement extends LitElement {
5134
5134
  static get properties() {
@@ -6881,7 +6881,7 @@ class AuroHelpText extends LitElement {
6881
6881
  }
6882
6882
  }
6883
6883
 
6884
- var formkitVersion = '202604231640';
6884
+ var formkitVersion = '202604232250';
6885
6885
 
6886
6886
  var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
6887
6887
 
@@ -15326,6 +15326,18 @@
15326
15326
  "module": "components/layoutElement/src/auroElement.js"
15327
15327
  }
15328
15328
  },
15329
+ {
15330
+ "kind": "field",
15331
+ "name": "value",
15332
+ "privacy": "public",
15333
+ "type": {
15334
+ "text": "string"
15335
+ },
15336
+ "description": "The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.",
15337
+ "default": "undefined",
15338
+ "attribute": "value",
15339
+ "reflects": true
15340
+ },
15329
15341
  {
15330
15342
  "kind": "field",
15331
15343
  "name": "optionSelected",
@@ -15465,17 +15477,6 @@
15465
15477
  "description": "Available menu options.",
15466
15478
  "readonly": true
15467
15479
  },
15468
- {
15469
- "kind": "field",
15470
- "name": "value",
15471
- "privacy": "public",
15472
- "type": {
15473
- "text": "string"
15474
- },
15475
- "description": "The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.",
15476
- "attribute": "value",
15477
- "reflects": true
15478
- },
15479
15480
  {
15480
15481
  "kind": "field",
15481
15482
  "name": "componentHasFocus",
@@ -15728,6 +15729,7 @@
15728
15729
  "text": "string"
15729
15730
  },
15730
15731
  "description": "The value of the selected option. In multi-select mode, this is a JSON stringified array of selected option values.",
15732
+ "default": "undefined",
15731
15733
  "fieldName": "value"
15732
15734
  },
15733
15735
  {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr1448.0",
3
+ "version": "0.0.0-pr1451.1",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
6
6
  "bugs": {
@@ -15,7 +15,7 @@
15
15
  "engines": {
16
16
  "node": ">=20"
17
17
  },
18
- "packageManager": "npm@11.12.1",
18
+ "packageManager": "npm@11.13.0",
19
19
  "publishConfig": {
20
20
  "access": "public",
21
21
  "provenance": true
@@ -83,7 +83,7 @@
83
83
  "@rollup/rollup-linux-x64-gnu": "*"
84
84
  },
85
85
  "devDependencies": {
86
- "@aurodesignsystem/auro-accordion": "^6.1.2",
86
+ "@aurodesignsystem/auro-accordion": "^6.1.3",
87
87
  "@aurodesignsystem/auro-button": "^12.3.2",
88
88
  "@aurodesignsystem/auro-dialog": "^4.1.1",
89
89
  "@aurodesignsystem/auro-drawer": "^5.1.2",
@@ -98,40 +98,40 @@
98
98
  "@aurodesignsystem/utils": "*",
99
99
  "@aurodesignsystem/version": "*",
100
100
  "@aurodesignsystem/webcorestylesheets": "^10.1.4",
101
- "@chromatic-com/storybook": "^5.1.1",
101
+ "@chromatic-com/storybook": "^5.1.2",
102
102
  "@commitlint/cli": "^20.5.0",
103
103
  "@commitlint/config-conventional": "^20.5.0",
104
104
  "@custom-elements-manifest/analyzer": "^0.11.0",
105
- "@eslint/compat": "^2.0.4",
105
+ "@eslint/compat": "^2.0.5",
106
106
  "@open-wc/testing": "^4.0.0",
107
107
  "@semantic-release/changelog": "^6.0.3",
108
108
  "@semantic-release/git": "^10.0.1",
109
109
  "@semantic-release/npm": "^13.1.5",
110
- "@storybook/addon-a11y": "^10.3.4",
110
+ "@storybook/addon-a11y": "^10.3.5",
111
111
  "@storybook/addon-designs": "^11.1.3",
112
- "@storybook/addon-docs": "^10.3.4",
113
- "@storybook/addon-themes": "^10.3.4",
114
- "@storybook/addon-vitest": "^10.3.4",
115
- "@storybook/web-components": "^10.3.4",
116
- "@storybook/web-components-vite": "^10.3.4",
112
+ "@storybook/addon-docs": "^10.3.5",
113
+ "@storybook/addon-themes": "^10.3.5",
114
+ "@storybook/addon-vitest": "^10.3.5",
115
+ "@storybook/web-components": "^10.3.5",
116
+ "@storybook/web-components-vite": "^10.3.5",
117
117
  "@types/chai": "^5.2.3",
118
118
  "@types/mocha": "^10.0.10",
119
- "@vitest/browser-playwright": "^4.1.2",
120
- "@vitest/coverage-v8": "^4.1.2",
121
- "@wc-toolkit/storybook-helpers": "10.0.0",
119
+ "@vitest/browser-playwright": "^4.1.5",
120
+ "@vitest/coverage-v8": "^4.1.5",
121
+ "@wc-toolkit/storybook-helpers": "10.3.0",
122
122
  "@web/dev-server": "^0.4.6",
123
123
  "@web/dev-server-hmr": "^0.4.1",
124
124
  "@web/test-runner": "^0.20.2",
125
- "autoprefixer": "^10.4.27",
125
+ "autoprefixer": "^10.5.0",
126
126
  "babel-loader": "^10.1.1",
127
127
  "compression": "^1.8.1",
128
128
  "concat": "^1.0.3",
129
129
  "concurrently": "^9.2.1",
130
130
  "copyfiles": "^2.4.1",
131
131
  "core-js": "^3.49.0",
132
- "eslint": "^10.2.0",
132
+ "eslint": "^10.2.1",
133
133
  "eslint-plugin-jsdoc": "^62.9.0",
134
- "eslint-plugin-storybook": "^10.3.4",
134
+ "eslint-plugin-storybook": "^10.3.5",
135
135
  "husky": "^9.1.7",
136
136
  "lodash": "^4.18.1",
137
137
  "markdown-magic": "^4.8.0",
@@ -139,26 +139,26 @@
139
139
  "nodemon": "^3.1.14",
140
140
  "npm-run-all": "^4.1.5",
141
141
  "playwright": "^1.59.1",
142
- "postcss": "^8.5.8",
142
+ "postcss": "^8.5.10",
143
143
  "postcss-custom-properties": "^15.0.1",
144
- "postcss-discard-comments": "^7.0.6",
145
- "prettier": "^3.8.1",
144
+ "postcss-discard-comments": "^7.0.7",
145
+ "prettier": "^3.8.3",
146
146
  "remark-gfm": "^4.0.1",
147
147
  "sass": "^1.99.0",
148
148
  "semantic-release": "^25.0.3",
149
149
  "shadow-dom-testing-library": "^1.13.1",
150
- "storybook": "^10.3.4",
151
- "storybook-addon-pseudo-states": "^10.3.4",
150
+ "storybook": "^10.3.5",
151
+ "storybook-addon-pseudo-states": "^10.3.5",
152
152
  "storybook-addon-tag-badges": "^3.1.0",
153
- "stylelint": "^17.6.0",
153
+ "stylelint": "^17.8.0",
154
154
  "stylelint-config-idiomatic-order": "^10.0.0",
155
155
  "stylelint-config-standard": "^40.0.0",
156
156
  "stylelint-config-standard-scss": "^17.0.0",
157
157
  "stylelint-order": "^8.1.1",
158
158
  "stylelint-scss": "^7.0.0",
159
- "turbo": "^2.9.4",
160
- "typescript": "^5.9.3",
161
- "vitest": "^4.1.2",
159
+ "turbo": "^2.9.6",
160
+ "typescript": "^6.0.3",
161
+ "vitest": "^4.1.5",
162
162
  "whatwg-fetch": "^3.6.20",
163
163
  "yaml-lint": "^1.7.0"
164
164
  },
File without changes