@aurodesignsystem-dev/auro-formkit 0.0.0-pr1540.0 → 0.0.0-pr1541.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.min.js +22 -4
- package/components/combobox/demo/getting-started.min.js +22 -4
- package/components/combobox/demo/index.min.js +22 -4
- package/components/combobox/dist/index.js +3 -3
- package/components/combobox/dist/registered.js +3 -3
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/customize.min.js +3 -3
- package/components/datepicker/demo/index.min.js +3 -3
- package/components/datepicker/dist/index.js +3 -3
- package/components/datepicker/dist/registered.js +3 -3
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.min.js +34 -16
- package/components/form/demo/getting-started.min.js +34 -16
- package/components/form/demo/index.min.js +34 -16
- package/components/form/demo/registerDemoDeps.min.js +34 -16
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/accessibility.md +9 -4
- package/components/menu/demo/api.md +3 -2
- package/components/menu/demo/css-only.md +26 -19
- package/components/menu/demo/customize.md +306 -46
- package/components/menu/demo/design.md +1 -1
- package/components/menu/demo/getting-started.md +143 -6
- package/components/menu/demo/index.min.js +144 -1
- package/components/menu/demo/keyboard-behavior.md +77 -4
- package/components/menu/demo/voiceover.md +12 -9
- package/components/menu/demo/why-menu.md +8 -9
- package/components/menu/dist/auro-menu.d.ts +1 -1
- package/components/menu/dist/auro-menuoption.d.ts +11 -0
- package/components/menu/dist/index.js +19 -1
- package/components/menu/dist/registered.js +19 -1
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/accessibility.md +5 -0
- package/components/select/demo/customize.md +2 -2
- package/components/select/demo/customize.min.js +23 -5
- package/components/select/demo/design.md +10 -10
- package/components/select/demo/getting-started.min.js +23 -5
- package/components/select/demo/index.md +1 -1
- package/components/select/demo/index.min.js +23 -5
- package/components/select/demo/keyboard-behavior.md +63 -68
- package/components/select/demo/voiceover.md +28 -15
- package/components/select/dist/index.js +4 -4
- package/components/select/dist/registered.js +4 -4
- package/custom-elements.json +1795 -1770
- package/package.json +1 -1
|
@@ -31,19 +31,22 @@
|
|
|
31
31
|
<auro-header level="2" id="keyEvents">Key Events</auro-header>
|
|
32
32
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/keyboard-behavior/keyEvents.md) -->
|
|
33
33
|
<!-- The below content is automatically added from ./../docs/partials/keyboard-behavior/keyEvents.md -->
|
|
34
|
+
<div class="note">
|
|
35
|
+
<p><strong>Note:</strong> The "Focused element" column below indicates the initial <code>event.target</code> — the element that has DOM focus when the key is pressed. The select's keyboard strategy listener is attached once to the <code><auro-select></code> host; it receives events via composed bubbling regardless of display mode. When the bib is displayed as a fullscreen dialog (see <code>fullscreenBreakpoint</code>), focus moves to the dialog's close button rather than remaining on the trigger, but keydown events still bubble across the shadow-root boundary up to the host listener, and <code>aria-activedescendant</code> continues to track the active option. An "active option" is one that is not <code>disabled</code>, <code>hidden</code>, or <code>static</code> — these are always skipped during navigation and type-ahead matching.</p>
|
|
36
|
+
</div>
|
|
34
37
|
<table>
|
|
35
38
|
<thead>
|
|
36
39
|
<tr>
|
|
37
40
|
<th>Key</th>
|
|
38
41
|
<th>Modifier</th>
|
|
39
42
|
<th>Current State</th>
|
|
40
|
-
<th>
|
|
43
|
+
<th>Focused element</th>
|
|
41
44
|
<th>Behavior</th>
|
|
42
45
|
</tr>
|
|
43
46
|
</thead>
|
|
44
47
|
<tbody>
|
|
45
48
|
<tr>
|
|
46
|
-
<td rowspan="
|
|
49
|
+
<td rowspan="6">ArrowDown</td>
|
|
47
50
|
<td rowspan="2">-</td>
|
|
48
51
|
<td>Collapsed</td>
|
|
49
52
|
<td>Trigger element</td>
|
|
@@ -53,25 +56,7 @@
|
|
|
53
56
|
<td>Expanded</td>
|
|
54
57
|
<td>Trigger element</td>
|
|
55
58
|
<td>
|
|
56
|
-
Advances the <code>
|
|
57
|
-
</td>
|
|
58
|
-
</tr>
|
|
59
|
-
<tr>
|
|
60
|
-
<td rowspan="2">Meta (Command / Windows key)</td>
|
|
61
|
-
<td>Collapsed</td>
|
|
62
|
-
<td>Trigger element</td>
|
|
63
|
-
<td>
|
|
64
|
-
Opens the bib.
|
|
65
|
-
<div class="note">
|
|
66
|
-
<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
|
|
67
|
-
</div>
|
|
68
|
-
</td>
|
|
69
|
-
</tr>
|
|
70
|
-
<tr>
|
|
71
|
-
<td>Expanded</td>
|
|
72
|
-
<td>Trigger element</td>
|
|
73
|
-
<td>
|
|
74
|
-
Advances the <code>focused</code> option to the last enabled option in the list.
|
|
59
|
+
Advances the <code>active</code> option to the next active option in the list. If the current <code>active</code> option is the last active option, the active state wraps to the first active option.
|
|
75
60
|
</td>
|
|
76
61
|
</tr>
|
|
77
62
|
<tr>
|
|
@@ -84,7 +69,7 @@
|
|
|
84
69
|
<td>Expanded</td>
|
|
85
70
|
<td>Trigger element</td>
|
|
86
71
|
<td>
|
|
87
|
-
Advances the <code>
|
|
72
|
+
Advances the <code>active</code> option to the last active option in the list.
|
|
88
73
|
</td>
|
|
89
74
|
</tr>
|
|
90
75
|
<tr>
|
|
@@ -94,7 +79,7 @@
|
|
|
94
79
|
<td>
|
|
95
80
|
Opens the bib.
|
|
96
81
|
<div class="note">
|
|
97
|
-
<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>
|
|
82
|
+
<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Alt</code> instead.
|
|
98
83
|
</div>
|
|
99
84
|
</td>
|
|
100
85
|
</tr>
|
|
@@ -102,11 +87,11 @@
|
|
|
102
87
|
<td>Expanded</td>
|
|
103
88
|
<td>Trigger element</td>
|
|
104
89
|
<td>
|
|
105
|
-
Advances the <code>
|
|
90
|
+
Advances the <code>active</code> option to the last active option in the list.
|
|
106
91
|
</td>
|
|
107
92
|
</tr>
|
|
108
93
|
<tr>
|
|
109
|
-
<td rowspan="
|
|
94
|
+
<td rowspan="6">ArrowUp</td>
|
|
110
95
|
<td rowspan="2">-</td>
|
|
111
96
|
<td>Collapsed</td>
|
|
112
97
|
<td>Trigger element</td>
|
|
@@ -116,25 +101,7 @@
|
|
|
116
101
|
<td>Expanded</td>
|
|
117
102
|
<td>Trigger element</td>
|
|
118
103
|
<td>
|
|
119
|
-
Advances the <code>
|
|
120
|
-
</td>
|
|
121
|
-
</tr>
|
|
122
|
-
<tr>
|
|
123
|
-
<td rowspan="2">Meta (Command / Windows key)</td>
|
|
124
|
-
<td>Collapsed</td>
|
|
125
|
-
<td>Trigger element</td>
|
|
126
|
-
<td>
|
|
127
|
-
Opens the bib.
|
|
128
|
-
<div class="note">
|
|
129
|
-
<strong>Note:</strong> On Windows, <code>Meta</code> + arrow key combinations are reserved by the operating system for window management. Windows users should use <code>Control</code> or <code>Alt</code> instead.
|
|
130
|
-
</div>
|
|
131
|
-
</td>
|
|
132
|
-
</tr>
|
|
133
|
-
<tr>
|
|
134
|
-
<td>Expanded</td>
|
|
135
|
-
<td>Trigger element</td>
|
|
136
|
-
<td>
|
|
137
|
-
Advances the <code>focused</code> option to the first enabled option in the list.
|
|
104
|
+
Advances the <code>active</code> option to the previous active option in the list. If the current <code>active</code> option is the first active option, the active state wraps to the last active option.
|
|
138
105
|
</td>
|
|
139
106
|
</tr>
|
|
140
107
|
<tr>
|
|
@@ -147,7 +114,7 @@
|
|
|
147
114
|
<td>Expanded</td>
|
|
148
115
|
<td>Trigger element</td>
|
|
149
116
|
<td>
|
|
150
|
-
Advances the <code>
|
|
117
|
+
Advances the <code>active</code> option to the first active option in the list.
|
|
151
118
|
</td>
|
|
152
119
|
</tr>
|
|
153
120
|
<tr>
|
|
@@ -157,7 +124,7 @@
|
|
|
157
124
|
<td>
|
|
158
125
|
Opens the bib.
|
|
159
126
|
<div class="note">
|
|
160
|
-
<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>
|
|
127
|
+
<strong>Note:</strong> On macOS, <code>Control</code> + arrow key combinations are reserved by the operating system for Mission Control and Application Windows. macOS users should use <code>Alt</code> instead.
|
|
161
128
|
</div>
|
|
162
129
|
</td>
|
|
163
130
|
</tr>
|
|
@@ -165,7 +132,7 @@
|
|
|
165
132
|
<td>Expanded</td>
|
|
166
133
|
<td>Trigger element</td>
|
|
167
134
|
<td>
|
|
168
|
-
Advances the <code>
|
|
135
|
+
Advances the <code>active</code> option to the first active option in the list.
|
|
169
136
|
</td>
|
|
170
137
|
</tr>
|
|
171
138
|
<tr>
|
|
@@ -174,34 +141,58 @@
|
|
|
174
141
|
<td>Collapsed</td>
|
|
175
142
|
<td>Trigger element</td>
|
|
176
143
|
<td>
|
|
177
|
-
Opens the bib and advances the <code>
|
|
144
|
+
Opens the bib and advances the <code>active</code> option to the last active option in the list.
|
|
178
145
|
</td>
|
|
179
146
|
</tr>
|
|
180
147
|
<tr>
|
|
181
148
|
<td>Expanded</td>
|
|
182
149
|
<td>Trigger element</td>
|
|
183
150
|
<td>
|
|
184
|
-
Advances the <code>
|
|
151
|
+
Advances the <code>active</code> option to the last active option in the list.
|
|
185
152
|
</td>
|
|
186
153
|
</tr>
|
|
187
154
|
<tr>
|
|
188
|
-
<td rowspan="
|
|
189
|
-
<td rowspan="
|
|
155
|
+
<td rowspan="3">Enter</td>
|
|
156
|
+
<td rowspan="3">-</td>
|
|
157
|
+
<td>Collapsed</td>
|
|
158
|
+
<td>Trigger element</td>
|
|
159
|
+
<td>Opens the bib. Bubbling is stopped so that a parent form does not treat Enter as a submit.</td>
|
|
160
|
+
</tr>
|
|
161
|
+
<tr>
|
|
162
|
+
<td>Expanded, without <code>multiSelect</code></td>
|
|
163
|
+
<td>Trigger element</td>
|
|
190
164
|
<td>
|
|
191
|
-
|
|
165
|
+
The current <code>active</code> option is selected, and the bib closes.
|
|
192
166
|
</td>
|
|
167
|
+
</tr>
|
|
168
|
+
<tr>
|
|
169
|
+
<td>Expanded, with <code>multiSelect</code></td>
|
|
193
170
|
<td>Trigger element</td>
|
|
194
171
|
<td>
|
|
195
|
-
The current <code>
|
|
172
|
+
The current <code>active</code> option is toggled; the bib stays open so additional options can be selected.
|
|
196
173
|
</td>
|
|
197
174
|
</tr>
|
|
198
175
|
<tr>
|
|
176
|
+
<td rowspan="3">Escape</td>
|
|
177
|
+
<td rowspan="3">-</td>
|
|
178
|
+
<td>Collapsed</td>
|
|
179
|
+
<td>Trigger element</td>
|
|
199
180
|
<td>
|
|
200
|
-
|
|
181
|
+
Clears the type-ahead buffer. No other change; the event is allowed to bubble so an ancestor dialog or drawer may still handle it.
|
|
201
182
|
</td>
|
|
183
|
+
</tr>
|
|
184
|
+
<tr>
|
|
185
|
+
<td>Expanded</td>
|
|
202
186
|
<td>Trigger element</td>
|
|
203
187
|
<td>
|
|
204
|
-
|
|
188
|
+
Clears the type-ahead buffer and closes the bib. Bubbling is stopped so that an ancestor dialog, drawer, or popup does not also close.
|
|
189
|
+
</td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<td>Expanded, fullscreen bib</td>
|
|
193
|
+
<td>Close button</td>
|
|
194
|
+
<td>
|
|
195
|
+
The Escape keydown bubbles from the close button to the select's keyboard strategy, which clears the type-ahead buffer and calls <code>dropdown.hide()</code> — the same handler as the popover case. The native <code><dialog></code> <code>cancel</code> → <code>auro-bib-cancel</code> path is a fallback that closes the bib if the strategy did not run. Focus is restored to the trigger on close.
|
|
205
196
|
</td>
|
|
206
197
|
</tr>
|
|
207
198
|
<tr>
|
|
@@ -210,14 +201,14 @@
|
|
|
210
201
|
<td>Collapsed</td>
|
|
211
202
|
<td>Trigger element</td>
|
|
212
203
|
<td>
|
|
213
|
-
Opens the bib and advances the <code>
|
|
204
|
+
Opens the bib and advances the <code>active</code> option to the first active option in the list.
|
|
214
205
|
</td>
|
|
215
206
|
</tr>
|
|
216
207
|
<tr>
|
|
217
208
|
<td>Expanded</td>
|
|
218
209
|
<td>Trigger element</td>
|
|
219
210
|
<td>
|
|
220
|
-
Advances the <code>
|
|
211
|
+
Advances the <code>active</code> option to the first active option in the list.
|
|
221
212
|
</td>
|
|
222
213
|
</tr>
|
|
223
214
|
<tr>
|
|
@@ -226,9 +217,9 @@
|
|
|
226
217
|
<td>Expanded</td>
|
|
227
218
|
<td>Trigger element</td>
|
|
228
219
|
<td>
|
|
229
|
-
The
|
|
220
|
+
The bib closes. If there is an <code>active</code> option, it is selected first in single-select, or toggled in <code>multiSelect</code>. If no option is active, focus simply moves on without a selection change.
|
|
230
221
|
<div class="note">
|
|
231
|
-
<strong>Note:</strong> the
|
|
222
|
+
<strong>Note:</strong> <code>Tab</code> does not <code>preventDefault</code>, so the browser continues to move focus to the next element in the tabindex sequence after the selection is applied.
|
|
232
223
|
</div>
|
|
233
224
|
</td>
|
|
234
225
|
</tr>
|
|
@@ -237,19 +228,23 @@
|
|
|
237
228
|
<td>Expanded</td>
|
|
238
229
|
<td>Trigger element</td>
|
|
239
230
|
<td>
|
|
240
|
-
|
|
241
|
-
<div class="note">
|
|
242
|
-
<strong>Note:</strong> the page will also navigate to the previous focusable element in the tabindex sequence.
|
|
243
|
-
</div>
|
|
231
|
+
Same behavior as <code>Tab</code>: the bib closes and any <code>active</code> option is selected (single-select) or toggled (<code>multiSelect</code>). The strategy does not read <code>shiftKey</code>; only the browser's own focus traversal reverses direction, moving focus to the previous element in the tabindex sequence.
|
|
244
232
|
</td>
|
|
245
233
|
</tr>
|
|
246
234
|
<tr>
|
|
247
|
-
<td>Space</td>
|
|
248
|
-
<td>-</td>
|
|
249
|
-
<td>Collapsed or Expanded</td>
|
|
235
|
+
<td rowspan="2">Space</td>
|
|
236
|
+
<td rowspan="2">-</td>
|
|
237
|
+
<td>Collapsed or Expanded, type-ahead buffer active</td>
|
|
238
|
+
<td>Trigger element</td>
|
|
239
|
+
<td>
|
|
240
|
+
Extends the type-ahead buffer with a space character. The <code>active</code> option advances if the buffer matches an active option; the bib state is unchanged. See the <a href="customize.html#typeAhead">Type-Ahead</a> section on the Customize page.
|
|
241
|
+
</td>
|
|
242
|
+
</tr>
|
|
243
|
+
<tr>
|
|
244
|
+
<td>Collapsed or Expanded, type-ahead buffer empty</td>
|
|
250
245
|
<td>Trigger element</td>
|
|
251
246
|
<td>
|
|
252
|
-
|
|
247
|
+
Toggles the bib — opens it when collapsed and closes it when expanded. No selection change occurs.
|
|
253
248
|
</td>
|
|
254
249
|
</tr>
|
|
255
250
|
<tr>
|
|
@@ -258,7 +253,7 @@
|
|
|
258
253
|
<td>Collapsed or Expanded</td>
|
|
259
254
|
<td>Trigger element</td>
|
|
260
255
|
<td>
|
|
261
|
-
Extends the type-ahead buffer. When the buffer matches an
|
|
256
|
+
Extends the type-ahead buffer. When the buffer matches an active option's displayed text, the <code>active</code> option advances to that option and the bib opens if it was collapsed. A keystroke that does not match any option leaves the bib state unchanged. Repeated keystrokes within <code>typeaheadTimeoutMs</code> (default 500 ms) extend the buffer; pressing the same character repeatedly cycles through matching options. Keys chorded with <code>Ctrl</code>, <code>Meta</code>, or <code>Alt</code> are ignored so browser and OS shortcuts do not leak into the buffer. See the <a href="customize.html#typeAhead">Type-Ahead</a> section on the Customize page.
|
|
262
257
|
</td>
|
|
263
258
|
</tr>
|
|
264
259
|
</tbody>
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</tr>
|
|
28
28
|
<tr>
|
|
29
29
|
<td>Invalid</td>
|
|
30
|
-
<td
|
|
30
|
+
<td>The trigger itself does not carry <code>aria-invalid</code>; the invalid state is announced through the alert-role Help Text (see <a href="#voiceOverStateInvalid">Invalid</a> below), not as a state hint on focus.</td>
|
|
31
31
|
</tr>
|
|
32
32
|
<tr>
|
|
33
33
|
<td>Disabled</td>
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
<p>Key characteristics across both platforms:</p>
|
|
96
96
|
<ul>
|
|
97
97
|
<li>The <code>label</code> is always read first.</li>
|
|
98
|
-
<li>The
|
|
98
|
+
<li>The trigger <strong>role</strong> is announced as <em>"combo box"</em> in both single-select and multi-select modes. The role does not change between large and small viewports — the fullscreen dialog on mobile wraps the same trigger, it does not remap the trigger's role to <em>"pop-up button"</em>, <em>"button"</em>, or <em>"list box"</em>. In multi-select mode, <code>aria-multiselectable="true"</code> is applied to the internal <code><auro-menu></code> (the listbox), not to the trigger.</li>
|
|
99
99
|
<li><code>disabled</code> options are announced as <em>"dimmed"</em> and cannot be selected.</li>
|
|
100
100
|
</ul>
|
|
101
101
|
<auro-header level="2" id="voiceOverStates">Impact of State</auro-header>
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
<li><strong>Focus</strong></li>
|
|
117
117
|
<li><strong>Open | Expand</strong></li>
|
|
118
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>"
|
|
119
|
+
<li><strong>Selecting an option:</strong> Double-tap toggles the focused option's selection — announces <em>"selected"</em> or <em>"not selected"</em>.</li>
|
|
120
120
|
<li><strong>Close | Collapse:</strong> Collapses the list, announces the expanded state change.</li>
|
|
121
121
|
</ol>
|
|
122
122
|
<auro-header level="4" id="voiceOverStateMultiSelectSmallVP">Small Viewport Multi-select</auro-header>
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
<li><strong>Focus</strong></li>
|
|
126
126
|
<li><strong>Open | Expand</strong></li>
|
|
127
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>"
|
|
128
|
+
<li><strong>Selecting an option:</strong> Double-tap toggles the focused option's selection — announces <em>"selected"</em> or <em>"not selected"</em>.</li>
|
|
129
129
|
<li><strong>Close | Collapse:</strong> Collapses the list, announces the expanded state change.</li>
|
|
130
130
|
</ol>
|
|
131
131
|
<p>Key differences from single-select:</p>
|
|
@@ -139,9 +139,9 @@
|
|
|
139
139
|
</thead>
|
|
140
140
|
<tbody>
|
|
141
141
|
<tr>
|
|
142
|
-
<td>
|
|
143
|
-
<td>
|
|
144
|
-
<td>
|
|
142
|
+
<td>Trigger role</td>
|
|
143
|
+
<td>combo box</td>
|
|
144
|
+
<td>combo box (with <code>aria-multiselectable="true"</code> on the internal listbox)</td>
|
|
145
145
|
</tr>
|
|
146
146
|
<tr>
|
|
147
147
|
<td>Interaction model</td>
|
|
@@ -153,31 +153,44 @@
|
|
|
153
153
|
<td>
|
|
154
154
|
<p>Current selected value</p>
|
|
155
155
|
<div class="note">
|
|
156
|
-
<strong>On focus:</strong> Announces "[component label], [current value or 'no selection'],
|
|
156
|
+
<strong>On focus:</strong> Announces "[component label], [current value or 'no selection'], combo box"
|
|
157
157
|
</div>
|
|
158
158
|
</td>
|
|
159
159
|
<td>
|
|
160
160
|
<p>Each option's selected state individually</p>
|
|
161
161
|
<div class="note">
|
|
162
|
-
<strong>On focus:</strong> Announces "[component label], [[{option label, 'selected'}, {option label, 'selected'}] or 'no selection'],
|
|
162
|
+
<strong>On focus:</strong> Announces "[component label], [[{option label, 'selected'}, {option label, 'selected'}] or 'no selection'], combo box"
|
|
163
163
|
</div>
|
|
164
164
|
<div class="note">
|
|
165
|
-
<strong>On selection change:</strong> Announces "[option label], ['selected' | '
|
|
165
|
+
<strong>On selection change:</strong> Announces "[option label], ['selected' | 'not selected']"
|
|
166
166
|
</div>
|
|
167
167
|
</td>
|
|
168
168
|
</tr>
|
|
169
169
|
<tr>
|
|
170
170
|
<td>Space key</td>
|
|
171
171
|
<td>Opens/closes picker</td>
|
|
172
|
-
<td>
|
|
172
|
+
<td>Opens/closes picker — <strong>Enter</strong> toggles the active option's selection. Space does not toggle selection in multi-select.</td>
|
|
173
173
|
</tr>
|
|
174
174
|
</tbody>
|
|
175
175
|
</table>
|
|
176
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><auro-select multiSelect></code> in favor of checkboxes or other patterns that make multi-selection more discoverable.</div>
|
|
177
177
|
<auro-header level="3" id="voiceOverStateInvalid">Invalid</auro-header>
|
|
178
|
-
<p>When an <code><auro-select></code>
|
|
178
|
+
<p>When an <code><auro-select></code> becomes invalid the following occurs:</p>
|
|
179
179
|
<ul>
|
|
180
|
-
<li
|
|
181
|
-
<li>
|
|
180
|
+
<li>The Help Text region renders the error message with <code>role="alert"</code> and <code>aria-live="assertive"</code>, so VoiceOver announces the error message immediately when the state transitions to invalid — the announcement does not wait for the next focus.</li>
|
|
181
|
+
<li>On subsequent focus of the trigger, the help text's error content is read as part of the description, following the label / value / role announcement.</li>
|
|
182
182
|
</ul>
|
|
183
|
-
<
|
|
183
|
+
<div class="note"><strong>Note:</strong> the trigger itself does not set <code>aria-invalid</code>, so VoiceOver does not include the words <em>"invalid data"</em> (macOS) or <em>"invalid entry"</em> (iOS) as part of the trigger's own announcement. The invalid state is conveyed entirely through the alert-role help text.</div>
|
|
184
|
+
<p>Example: when the select becomes invalid, VoiceOver announces the error message (e.g., <em>"Please select a country"</em>) via the assertive alert. On the next focus of the trigger, VoiceOver announces something like <em>"Country, no selection, combo box, Please select a country"</em>.</p>
|
|
185
|
+
<auro-header level="2" id="voiceOverImplementation">How the Announcements Are Wired</auro-header>
|
|
186
|
+
<p>The following implementation details are relevant when debugging or verifying VoiceOver behavior in <code><auro-select></code>:</p>
|
|
187
|
+
<auro-header level="3" id="voiceOverImplActiveDescendant">Active option (aria-activedescendant)</auro-header>
|
|
188
|
+
<p>Focus remains on the trigger while the bib is open; the currently active option is exposed via <code>aria-activedescendant</code>. Because the trigger and the option live in different shadow roots, the code sets <code>trigger.ariaActiveDescendantElement</code> (the IDL/property form) rather than the string attribute alone — this is what allows VoiceOver to announce the active option's label and state across the shadow boundary.</p>
|
|
189
|
+
<auro-header level="3" id="voiceOverImplSetSize">Position in list (aria-setsize / aria-posinset)</auro-header>
|
|
190
|
+
<p>Each option is stamped with <code>aria-setsize</code> (total count of navigable options) and <code>aria-posinset</code> (its 1-based position). Stamping runs on initial menu configuration and again whenever <code>auroMenu-optionsChange</code> fires (options added, removed, or otherwise re-initialized), so VoiceOver's <em>"N of M"</em> announcement stays accurate across dynamic option lists. A pure <code>value</code> change does not re-stamp on its own — it only updates selection state — unless it triggers a menu re-initialization in an empty/deferred-match path.</p>
|
|
191
|
+
<auro-header level="3" id="voiceOverImplLiveRegion">Live region routing</auro-header>
|
|
192
|
+
<p>Selection-change announcements (single-select confirmation and multi-select toggle wording) are written into an <code>aria-live="polite"</code> span that lives in the host component's shadow root by default. In fullscreen mode the trigger becomes <code>inert</code> and everything outside the <code><dialog></code> is hidden from assistive tech — so the live region is routed into the bib's shadow root instead, ensuring the announcement is reachable while the dialog is open.</p>
|
|
193
|
+
<auro-header level="3" id="voiceOverImplDebounce">Announcement timing</auro-header>
|
|
194
|
+
<p>Selection announcements are delayed briefly (~300ms) so the option's <em>"selected"</em> / <em>"not selected"</em> announcement is not overridden by the <em>"collapsed"</em> announcement that follows when the bib closes.</p>
|
|
195
|
+
<auro-header level="3" id="voiceOverImplFullscreen">Fullscreen focus and inert</auro-header>
|
|
196
|
+
<p>When the fullscreen dialog opens, focus moves to the dialog's <strong>Close</strong> button and the trigger is marked <code>inert</code> so screen readers cannot reach it — the user is effectively inside the dialog until it closes, at which point focus returns to the trigger and <code>inert</code> is removed.</p>
|
|
@@ -883,7 +883,7 @@ const selectKeyboardStrategy = {
|
|
|
883
883
|
ArrowDown(component, evt, ctx) {
|
|
884
884
|
evt.preventDefault();
|
|
885
885
|
if (ctx.isExpanded) {
|
|
886
|
-
if (evt.altKey || evt.ctrlKey
|
|
886
|
+
if (evt.altKey || evt.ctrlKey) {
|
|
887
887
|
// navigate to last enabled option
|
|
888
888
|
selectKeyboardStrategy.End(component, evt, ctx);
|
|
889
889
|
} else {
|
|
@@ -897,7 +897,7 @@ const selectKeyboardStrategy = {
|
|
|
897
897
|
ArrowUp(component, evt, ctx) {
|
|
898
898
|
evt.preventDefault();
|
|
899
899
|
if (ctx.isExpanded) {
|
|
900
|
-
if (evt.altKey || evt.ctrlKey
|
|
900
|
+
if (evt.altKey || evt.ctrlKey) {
|
|
901
901
|
// navigate to first enabled option
|
|
902
902
|
selectKeyboardStrategy.Home(component, evt, ctx);
|
|
903
903
|
} else {
|
|
@@ -4928,7 +4928,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4928
4928
|
}
|
|
4929
4929
|
};
|
|
4930
4930
|
|
|
4931
|
-
var formkitVersion$1 = '
|
|
4931
|
+
var formkitVersion$1 = '202607072227';
|
|
4932
4932
|
|
|
4933
4933
|
class AuroElement extends LitElement {
|
|
4934
4934
|
static get properties() {
|
|
@@ -6967,7 +6967,7 @@ class AuroHelpText extends LitElement {
|
|
|
6967
6967
|
}
|
|
6968
6968
|
}
|
|
6969
6969
|
|
|
6970
|
-
var formkitVersion = '
|
|
6970
|
+
var formkitVersion = '202607072227';
|
|
6971
6971
|
|
|
6972
6972
|
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);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-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, 300);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, 300);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}`;
|
|
6973
6973
|
|
|
@@ -883,7 +883,7 @@ const selectKeyboardStrategy = {
|
|
|
883
883
|
ArrowDown(component, evt, ctx) {
|
|
884
884
|
evt.preventDefault();
|
|
885
885
|
if (ctx.isExpanded) {
|
|
886
|
-
if (evt.altKey || evt.ctrlKey
|
|
886
|
+
if (evt.altKey || evt.ctrlKey) {
|
|
887
887
|
// navigate to last enabled option
|
|
888
888
|
selectKeyboardStrategy.End(component, evt, ctx);
|
|
889
889
|
} else {
|
|
@@ -897,7 +897,7 @@ const selectKeyboardStrategy = {
|
|
|
897
897
|
ArrowUp(component, evt, ctx) {
|
|
898
898
|
evt.preventDefault();
|
|
899
899
|
if (ctx.isExpanded) {
|
|
900
|
-
if (evt.altKey || evt.ctrlKey
|
|
900
|
+
if (evt.altKey || evt.ctrlKey) {
|
|
901
901
|
// navigate to first enabled option
|
|
902
902
|
selectKeyboardStrategy.Home(component, evt, ctx);
|
|
903
903
|
} else {
|
|
@@ -4928,7 +4928,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4928
4928
|
}
|
|
4929
4929
|
};
|
|
4930
4930
|
|
|
4931
|
-
var formkitVersion$1 = '
|
|
4931
|
+
var formkitVersion$1 = '202607072227';
|
|
4932
4932
|
|
|
4933
4933
|
class AuroElement extends LitElement {
|
|
4934
4934
|
static get properties() {
|
|
@@ -6967,7 +6967,7 @@ class AuroHelpText extends LitElement {
|
|
|
6967
6967
|
}
|
|
6968
6968
|
}
|
|
6969
6969
|
|
|
6970
|
-
var formkitVersion = '
|
|
6970
|
+
var formkitVersion = '202607072227';
|
|
6971
6971
|
|
|
6972
6972
|
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);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-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, 300);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, 300);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}`;
|
|
6973
6973
|
|