@aurodesignsystem-dev/auro-formkit 0.0.0-pr1539.2 → 0.0.0-pr1540.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 +3 -3
- package/components/combobox/demo/getting-started.min.js +3 -3
- package/components/combobox/demo/index.min.js +3 -3
- 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 +15 -15
- package/components/form/demo/getting-started.min.js +15 -15
- package/components/form/demo/index.min.js +15 -15
- package/components/form/demo/registerDemoDeps.min.js +15 -15
- 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 +0 -5
- package/components/menu/demo/voiceover.md +6 -9
- 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 +0 -5
- package/components/select/demo/customize.min.js +4 -4
- package/components/select/demo/getting-started.min.js +4 -4
- package/components/select/demo/index.min.js +4 -4
- package/components/select/demo/keyboard-behavior.md +40 -4
- package/components/select/demo/voiceover.md +15 -28
- package/components/select/dist/index.js +4 -4
- package/components/select/dist/registered.js +4 -4
- package/custom-elements.json +1 -1
- package/package.json +1 -1
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
</thead>
|
|
44
44
|
<tbody>
|
|
45
45
|
<tr>
|
|
46
|
-
<td rowspan="
|
|
46
|
+
<td rowspan="8">ArrowDown</td>
|
|
47
47
|
<td rowspan="2">-</td>
|
|
48
48
|
<td>Collapsed</td>
|
|
49
49
|
<td>Trigger element</td>
|
|
@@ -57,6 +57,24 @@
|
|
|
57
57
|
</td>
|
|
58
58
|
</tr>
|
|
59
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.
|
|
75
|
+
</td>
|
|
76
|
+
</tr>
|
|
77
|
+
<tr>
|
|
60
78
|
<td rowspan="2">Alt (Option)</td>
|
|
61
79
|
<td>Collapsed</td>
|
|
62
80
|
<td>Trigger element</td>
|
|
@@ -76,7 +94,7 @@
|
|
|
76
94
|
<td>
|
|
77
95
|
Opens the bib.
|
|
78
96
|
<div class="note">
|
|
79
|
-
<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.
|
|
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>Meta</code> or <code>Alt</code> instead.
|
|
80
98
|
</div>
|
|
81
99
|
</td>
|
|
82
100
|
</tr>
|
|
@@ -88,7 +106,7 @@
|
|
|
88
106
|
</td>
|
|
89
107
|
</tr>
|
|
90
108
|
<tr>
|
|
91
|
-
<td rowspan="
|
|
109
|
+
<td rowspan="8">ArrowUp</td>
|
|
92
110
|
<td rowspan="2">-</td>
|
|
93
111
|
<td>Collapsed</td>
|
|
94
112
|
<td>Trigger element</td>
|
|
@@ -102,6 +120,24 @@
|
|
|
102
120
|
</td>
|
|
103
121
|
</tr>
|
|
104
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.
|
|
138
|
+
</td>
|
|
139
|
+
</tr>
|
|
140
|
+
<tr>
|
|
105
141
|
<td rowspan="2">Alt (Option)</td>
|
|
106
142
|
<td>Collapsed</td>
|
|
107
143
|
<td>Trigger element</td>
|
|
@@ -121,7 +157,7 @@
|
|
|
121
157
|
<td>
|
|
122
158
|
Opens the bib.
|
|
123
159
|
<div class="note">
|
|
124
|
-
<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.
|
|
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>Meta</code> or <code>Alt</code> instead.
|
|
125
161
|
</div>
|
|
126
162
|
</td>
|
|
127
163
|
</tr>
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
</tr>
|
|
28
28
|
<tr>
|
|
29
29
|
<td>Invalid</td>
|
|
30
|
-
<td>
|
|
30
|
+
<td><em>"invalid data"</em></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 component <strong>role</strong> is announced as <em>"pop-up button"</em> (macOS) or <em>"button"</em> (iOS).</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>"unselected"</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>"unselected"</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>Role</td>
|
|
143
|
+
<td>pop-up button</td>
|
|
144
|
+
<td>list box</td>
|
|
145
145
|
</tr>
|
|
146
146
|
<tr>
|
|
147
147
|
<td>Interaction model</td>
|
|
@@ -153,44 +153,31 @@
|
|
|
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'], pop-up button"
|
|
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'], list 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' | 'unselected']"
|
|
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>Toggles selection</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> is invalid the following occurs:</p>
|
|
179
179
|
<ul>
|
|
180
|
-
<li>
|
|
181
|
-
<li>
|
|
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
182
|
</ul>
|
|
183
|
-
<
|
|
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>
|
|
183
|
+
<p>Example: when focusing on an invalid <code><auro-select></code> the VoiceOver announces something like <em>"Country, invalid data, combo box, Please select a country"</em>.</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 || evt.metaKey) {
|
|
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 || evt.metaKey) {
|
|
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 = '202607072023';
|
|
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 = '202607072023';
|
|
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 || evt.metaKey) {
|
|
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 || evt.metaKey) {
|
|
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 = '202607072023';
|
|
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 = '202607072023';
|
|
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
|
|
package/custom-elements.json
CHANGED
|
@@ -20416,7 +20416,7 @@
|
|
|
20416
20416
|
"type": {
|
|
20417
20417
|
"text": "object"
|
|
20418
20418
|
},
|
|
20419
|
-
"default": "{ ArrowDown(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey) { // navigate to last enabled option selectKeyboardStrategy.End(component, evt, ctx); } else { navigateArrow(component, 'down', { ctx }); } } else { component.dropdown.show(); } }, ArrowUp(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey) { // navigate to first enabled option selectKeyboardStrategy.Home(component, evt, ctx); } else { navigateArrow(component, 'up', { ctx }); } } else { component.dropdown.show(); } }, Escape(component, evt, ctx) { // Always clear the type-ahead buffer — Escape is a universal cancel. // Safe to call when the buffer is empty. // eslint-disable-next-line no-underscore-dangle if (typeof component._clearTypeaheadBuffer === 'function') { // eslint-disable-next-line no-underscore-dangle component._clearTypeaheadBuffer(); } if (!ctx.isExpanded) { return; } // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups evt.stopPropagation(); component.dropdown.hide(); }, End(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); // `pop()` is safe here: getActiveOptions returns a fresh filtered array. // Uses \"active\" (not \"enabled\") so hidden and static rows — which a screen // reader must not announce as focused — are skipped. const lastOption = getActiveOptions(component.menu).pop(); if (!lastOption) { return; } // Pre-stash before show() so the auroDropdown-toggled handler's // `!optionActive` guard short-circuits the firstActive/selected fallback — // otherwise show() synchronously fires the handler and writes // aria-activedescendant once before we overwrite it. component.menu.updateActiveOption(lastOption); if (!ctx.isExpanded) { component.dropdown.show(); } }, Enter(component, evt, ctx) { // Prevent the keypress from bubbling to parent containers (e.g., forms) // which could interpret Enter as a submit. Matches APG select-only combobox // and native <select> behavior: Enter opens the listbox when closed, selects // the active option when open — it does not submit a parent form. evt.preventDefault(); evt.stopPropagation(); if (!ctx.isExpanded) { component.dropdown.show(); return; } component.menu.makeSelection(); }, Home(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); const [firstOption] = getActiveOptions(component.menu); if (!firstOption) { return; } // See End() for why this must run before show(). component.menu.updateActiveOption(firstOption); if (!ctx.isExpanded) { component.dropdown.show(); } }, Tab(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive) { component.menu.makeSelection(); } component.dropdown.hide(); }, default(component, evt, ctx) { // Ignore keys chorded with Ctrl/Meta/Alt so browser/OS shortcuts // (Cmd+C, Ctrl+V, Alt+X, Cmd+Space, …) don't leak into typeahead // or toggle the bib. Native <select> ignores modified keys. // ArrowUp/ArrowDown handle modifier+arrow explicitly above; this // guard only affects the default (printable/Space) branch. if (evt.ctrlKey || evt.metaKey || evt.altKey) { return; } // Space resolves to either typeahead-buffer extension or bib toggle // depending on whether a type-ahead buffer is active. Mirrors native // <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space // is a search character (e.g. \"San Francisco\"); otherwise it toggles. if (evt.key === ' ') { evt.preventDefault(); evt.stopPropagation(); if (component.typeaheadBuffer && component.typeaheadBuffer.length > 0) { component.updateActiveOptionBasedOnKey(evt.key); return; } if (ctx.isExpanded) { component.dropdown.hide(); } else { component.dropdown.show(); } return; } component.updateActiveOptionBasedOnKey(evt.key); }, }"
|
|
20419
|
+
"default": "{ ArrowDown(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey || evt.metaKey) { // navigate to last enabled option selectKeyboardStrategy.End(component, evt, ctx); } else { navigateArrow(component, 'down', { ctx }); } } else { component.dropdown.show(); } }, ArrowUp(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey || evt.metaKey) { // navigate to first enabled option selectKeyboardStrategy.Home(component, evt, ctx); } else { navigateArrow(component, 'up', { ctx }); } } else { component.dropdown.show(); } }, Escape(component, evt, ctx) { // Always clear the type-ahead buffer — Escape is a universal cancel. // Safe to call when the buffer is empty. // eslint-disable-next-line no-underscore-dangle if (typeof component._clearTypeaheadBuffer === 'function') { // eslint-disable-next-line no-underscore-dangle component._clearTypeaheadBuffer(); } if (!ctx.isExpanded) { return; } // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups evt.stopPropagation(); component.dropdown.hide(); }, End(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); // `pop()` is safe here: getActiveOptions returns a fresh filtered array. // Uses \"active\" (not \"enabled\") so hidden and static rows — which a screen // reader must not announce as focused — are skipped. const lastOption = getActiveOptions(component.menu).pop(); if (!lastOption) { return; } // Pre-stash before show() so the auroDropdown-toggled handler's // `!optionActive` guard short-circuits the firstActive/selected fallback — // otherwise show() synchronously fires the handler and writes // aria-activedescendant once before we overwrite it. component.menu.updateActiveOption(lastOption); if (!ctx.isExpanded) { component.dropdown.show(); } }, Enter(component, evt, ctx) { // Prevent the keypress from bubbling to parent containers (e.g., forms) // which could interpret Enter as a submit. Matches APG select-only combobox // and native <select> behavior: Enter opens the listbox when closed, selects // the active option when open — it does not submit a parent form. evt.preventDefault(); evt.stopPropagation(); if (!ctx.isExpanded) { component.dropdown.show(); return; } component.menu.makeSelection(); }, Home(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); const [firstOption] = getActiveOptions(component.menu); if (!firstOption) { return; } // See End() for why this must run before show(). component.menu.updateActiveOption(firstOption); if (!ctx.isExpanded) { component.dropdown.show(); } }, Tab(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive) { component.menu.makeSelection(); } component.dropdown.hide(); }, default(component, evt, ctx) { // Ignore keys chorded with Ctrl/Meta/Alt so browser/OS shortcuts // (Cmd+C, Ctrl+V, Alt+X, Cmd+Space, …) don't leak into typeahead // or toggle the bib. Native <select> ignores modified keys. // ArrowUp/ArrowDown handle modifier+arrow explicitly above; this // guard only affects the default (printable/Space) branch. if (evt.ctrlKey || evt.metaKey || evt.altKey) { return; } // Space resolves to either typeahead-buffer extension or bib toggle // depending on whether a type-ahead buffer is active. Mirrors native // <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space // is a search character (e.g. \"San Francisco\"); otherwise it toggles. if (evt.key === ' ') { evt.preventDefault(); evt.stopPropagation(); if (component.typeaheadBuffer && component.typeaheadBuffer.length > 0) { component.updateActiveOptionBasedOnKey(evt.key); return; } if (ctx.isExpanded) { component.dropdown.hide(); } else { component.dropdown.show(); } return; } component.updateActiveOptionBasedOnKey(evt.key); }, }"
|
|
20420
20420
|
}
|
|
20421
20421
|
],
|
|
20422
20422
|
"exports": [
|
package/package.json
CHANGED