@aurodesignsystem-dev/auro-formkit 0.0.0-pr1511.1 → 0.0.0-pr1513.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 -4
- package/components/combobox/demo/getting-started.min.js +3 -4
- package/components/combobox/demo/index.min.js +3 -4
- package/components/combobox/dist/index.js +3 -4
- package/components/combobox/dist/registered.js +3 -4
- package/components/counter/demo/customize.min.js +2 -10
- package/components/counter/demo/index.min.js +2 -10
- package/components/counter/dist/index.js +2 -10
- package/components/counter/dist/registered.js +2 -10
- package/components/datepicker/demo/customize.min.js +17 -5
- package/components/datepicker/demo/index.min.js +17 -5
- package/components/datepicker/dist/auro-calendar.d.ts +1 -0
- package/components/datepicker/dist/index.js +17 -5
- package/components/datepicker/dist/registered.js +17 -5
- package/components/dropdown/demo/customize.min.js +1 -2
- package/components/dropdown/demo/getting-started.min.js +1 -2
- package/components/dropdown/demo/index.min.js +1 -2
- package/components/dropdown/dist/index.js +1 -2
- package/components/dropdown/dist/registered.js +1 -2
- package/components/form/demo/customize.min.js +87 -208
- package/components/form/demo/getting-started.min.js +87 -208
- package/components/form/demo/index.min.js +87 -208
- package/components/form/demo/registerDemoDeps.min.js +87 -208
- 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/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/customize.min.js +62 -186
- package/components/select/demo/getting-started.min.js +62 -186
- package/components/select/demo/index.min.js +62 -186
- package/components/select/demo/keyboard-behavior.md +4 -18
- package/components/select/dist/auro-select.d.ts +8 -20
- package/components/select/dist/index.js +62 -186
- package/components/select/dist/registered.js +62 -186
- package/custom-elements.json +1503 -1489
- package/package.json +1 -1
|
@@ -12202,7 +12202,7 @@ class AuroHelpText extends LitElement {
|
|
|
12202
12202
|
}
|
|
12203
12203
|
}
|
|
12204
12204
|
|
|
12205
|
-
var formkitVersion = '
|
|
12205
|
+
var formkitVersion = '202606291440';
|
|
12206
12206
|
|
|
12207
12207
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12208
12208
|
// See LICENSE in the project root for license information.
|
|
@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
|
|
|
1212
1212
|
}
|
|
1213
1213
|
}
|
|
1214
1214
|
|
|
1215
|
-
var formkitVersion = '
|
|
1215
|
+
var formkitVersion = '202606291440';
|
|
1216
1216
|
|
|
1217
1217
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1218
1218
|
// See LICENSE in the project root for license information.
|
|
@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
|
|
|
1212
1212
|
}
|
|
1213
1213
|
}
|
|
1214
1214
|
|
|
1215
|
-
var formkitVersion = '
|
|
1215
|
+
var formkitVersion = '202606291440';
|
|
1216
1216
|
|
|
1217
1217
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1218
1218
|
// See LICENSE in the project root for license information.
|
|
@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
|
|
|
1212
1212
|
}
|
|
1213
1213
|
}
|
|
1214
1214
|
|
|
1215
|
-
var formkitVersion = '
|
|
1215
|
+
var formkitVersion = '202606291440';
|
|
1216
1216
|
|
|
1217
1217
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1218
1218
|
// See LICENSE in the project root for license information.
|
|
@@ -1151,7 +1151,7 @@ class AuroHelpText extends LitElement {
|
|
|
1151
1151
|
}
|
|
1152
1152
|
}
|
|
1153
1153
|
|
|
1154
|
-
var formkitVersion = '
|
|
1154
|
+
var formkitVersion = '202606291440';
|
|
1155
1155
|
|
|
1156
1156
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1157
1157
|
// See LICENSE in the project root for license information.
|
|
@@ -1151,7 +1151,7 @@ class AuroHelpText extends LitElement {
|
|
|
1151
1151
|
}
|
|
1152
1152
|
}
|
|
1153
1153
|
|
|
1154
|
-
var formkitVersion = '
|
|
1154
|
+
var formkitVersion = '202606291440';
|
|
1155
1155
|
|
|
1156
1156
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1157
1157
|
// See LICENSE in the project root for license information.
|
|
@@ -959,28 +959,19 @@ const selectKeyboardStrategy = {
|
|
|
959
959
|
},
|
|
960
960
|
|
|
961
961
|
End(component, evt, ctx) {
|
|
962
|
+
if (!ctx.isExpanded) {
|
|
963
|
+
return;
|
|
964
|
+
}
|
|
962
965
|
evt.preventDefault();
|
|
963
966
|
evt.stopPropagation();
|
|
964
967
|
// `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
|
|
965
968
|
const lastOption = getEnabledOptions(component.menu).pop();
|
|
966
|
-
if (
|
|
967
|
-
|
|
968
|
-
}
|
|
969
|
-
// Pre-stash before show() so the auroDropdown-toggled handler's
|
|
970
|
-
// `!optionActive` guard short-circuits the firstActive/selected fallback —
|
|
971
|
-
// otherwise show() synchronously fires the handler and writes
|
|
972
|
-
// aria-activedescendant once before we overwrite it.
|
|
973
|
-
component.menu.updateActiveOption(lastOption);
|
|
974
|
-
if (!ctx.isExpanded) {
|
|
975
|
-
component.dropdown.show();
|
|
969
|
+
if (lastOption) {
|
|
970
|
+
component.menu.updateActiveOption(lastOption);
|
|
976
971
|
}
|
|
977
972
|
},
|
|
978
973
|
|
|
979
974
|
Enter(component, evt, ctx) {
|
|
980
|
-
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
981
|
-
// which could interpret Enter as a submit. Matches APG select-only combobox
|
|
982
|
-
// and native <select> behavior: Enter opens the listbox when closed, selects
|
|
983
|
-
// the active option when open — it does not submit a parent form.
|
|
984
975
|
evt.preventDefault();
|
|
985
976
|
evt.stopPropagation();
|
|
986
977
|
if (!ctx.isExpanded) {
|
|
@@ -991,16 +982,14 @@ const selectKeyboardStrategy = {
|
|
|
991
982
|
},
|
|
992
983
|
|
|
993
984
|
Home(component, evt, ctx) {
|
|
985
|
+
if (!ctx.isExpanded) {
|
|
986
|
+
return;
|
|
987
|
+
}
|
|
994
988
|
evt.preventDefault();
|
|
995
989
|
evt.stopPropagation();
|
|
996
990
|
const [firstOption] = getEnabledOptions(component.menu);
|
|
997
|
-
if (
|
|
998
|
-
|
|
999
|
-
}
|
|
1000
|
-
// See End() for why this must run before show().
|
|
1001
|
-
component.menu.updateActiveOption(firstOption);
|
|
1002
|
-
if (!ctx.isExpanded) {
|
|
1003
|
-
component.dropdown.show();
|
|
991
|
+
if (firstOption) {
|
|
992
|
+
component.menu.updateActiveOption(firstOption);
|
|
1004
993
|
}
|
|
1005
994
|
},
|
|
1006
995
|
|
|
@@ -4972,7 +4961,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4972
4961
|
}
|
|
4973
4962
|
};
|
|
4974
4963
|
|
|
4975
|
-
var formkitVersion$1 = '
|
|
4964
|
+
var formkitVersion$1 = '202606291440';
|
|
4976
4965
|
|
|
4977
4966
|
class AuroElement extends i$2 {
|
|
4978
4967
|
static get properties() {
|
|
@@ -6244,7 +6233,6 @@ class AuroDropdown extends AuroElement {
|
|
|
6244
6233
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6245
6234
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6246
6235
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6247
|
-
aria-haspopup="${o(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
|
|
6248
6236
|
aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6249
6237
|
aria-disabled="${o(this.disabled ? 'true' : undefined)}"
|
|
6250
6238
|
@focusin="${this.handleFocusin}"
|
|
@@ -6994,7 +6982,7 @@ class AuroHelpText extends i$2 {
|
|
|
6994
6982
|
}
|
|
6995
6983
|
}
|
|
6996
6984
|
|
|
6997
|
-
var formkitVersion = '
|
|
6985
|
+
var formkitVersion = '202606291440';
|
|
6998
6986
|
|
|
6999
6987
|
var styleCss$2 = i$5`.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}`;
|
|
7000
6988
|
|
|
@@ -7326,6 +7314,14 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7326
7314
|
reflect: true
|
|
7327
7315
|
},
|
|
7328
7316
|
|
|
7317
|
+
/**
|
|
7318
|
+
* @private
|
|
7319
|
+
*/
|
|
7320
|
+
options: {
|
|
7321
|
+
type: Array,
|
|
7322
|
+
state: true
|
|
7323
|
+
},
|
|
7324
|
+
|
|
7329
7325
|
/**
|
|
7330
7326
|
* Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
|
|
7331
7327
|
* @type {HTMLElement|Array<HTMLElement>}
|
|
@@ -7613,68 +7609,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7613
7609
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
7614
7610
|
}
|
|
7615
7611
|
|
|
7616
|
-
|
|
7612
|
+
// Pass label text to the dropdown bib for accessible dialog naming
|
|
7613
|
+
const labelElement = this.querySelector('span[slot="label"]');
|
|
7614
|
+
if (labelElement) {
|
|
7615
|
+
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
7616
|
+
}
|
|
7617
7617
|
|
|
7618
7618
|
// Exposes the CSS parts from the dropdown for styling
|
|
7619
7619
|
this.dropdown.exposeCssParts();
|
|
7620
7620
|
}
|
|
7621
7621
|
|
|
7622
|
-
/**
|
|
7623
|
-
* Reads the current label slot text and pushes it to the dropdown bib
|
|
7624
|
-
* (for dialog naming) and the menu (for listbox aria-label). Safe to call
|
|
7625
|
-
* before either child has been wired up — each branch self-guards.
|
|
7626
|
-
* @private
|
|
7627
|
-
*/
|
|
7628
|
-
_syncLabelText() {
|
|
7629
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7630
|
-
const text = labelElement ? labelElement.textContent.trim() : '';
|
|
7631
|
-
if (this.dropdown) {
|
|
7632
|
-
this.dropdown.bibDialogLabel = text || undefined;
|
|
7633
|
-
}
|
|
7634
|
-
if (this.menu) {
|
|
7635
|
-
if (text) {
|
|
7636
|
-
this.menu.setAttribute('aria-label', text);
|
|
7637
|
-
} else {
|
|
7638
|
-
this.menu.removeAttribute('aria-label');
|
|
7639
|
-
}
|
|
7640
|
-
}
|
|
7641
|
-
}
|
|
7642
|
-
|
|
7643
|
-
/**
|
|
7644
|
-
* Keeps the dialog/menu accessible names in sync when consumers mutate the
|
|
7645
|
-
* label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
|
|
7646
|
-
* insufficient — it doesn't fire when textContent of an already-assigned
|
|
7647
|
-
* slotted node changes, which is the common case. We scope the observer to
|
|
7648
|
-
* the label node itself (not the whole host subtree) so option-content
|
|
7649
|
-
* mutations don't trigger label re-syncs, and re-target on `slotchange`
|
|
7650
|
-
* when consumers add or replace the label element.
|
|
7651
|
-
* @private
|
|
7652
|
-
*/
|
|
7653
|
-
_observeLabelChanges() {
|
|
7654
|
-
if (this._labelObserver) return;
|
|
7655
|
-
this._labelObserver = new MutationObserver(() => this._syncLabelText());
|
|
7656
|
-
|
|
7657
|
-
const retarget = () => {
|
|
7658
|
-
this._labelObserver.disconnect();
|
|
7659
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7660
|
-
if (labelElement) {
|
|
7661
|
-
this._labelObserver.observe(labelElement, {
|
|
7662
|
-
childList: true,
|
|
7663
|
-
subtree: true,
|
|
7664
|
-
characterData: true
|
|
7665
|
-
});
|
|
7666
|
-
}
|
|
7667
|
-
this._syncLabelText();
|
|
7668
|
-
};
|
|
7669
|
-
|
|
7670
|
-
retarget();
|
|
7671
|
-
|
|
7672
|
-
this._retargetLabelObserver = retarget;
|
|
7673
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
7674
|
-
slot.addEventListener('slotchange', retarget);
|
|
7675
|
-
});
|
|
7676
|
-
}
|
|
7677
|
-
|
|
7678
7622
|
/**
|
|
7679
7623
|
* This will register this element with the browser.
|
|
7680
7624
|
* @param {string} [name="auro-select"] - The name of element that you want to register to.
|
|
@@ -7825,7 +7769,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7825
7769
|
this.updateMenuShapeSize();
|
|
7826
7770
|
this.setMenuValue(this.value);
|
|
7827
7771
|
|
|
7828
|
-
|
|
7772
|
+
// Set accessible name on the menu for screen readers based on the label slot content
|
|
7773
|
+
const labelElement = this.querySelector('[slot="label"]');
|
|
7774
|
+
if (labelElement) {
|
|
7775
|
+
this.menu.setAttribute('aria-label', labelElement.textContent.trim());
|
|
7776
|
+
}
|
|
7829
7777
|
|
|
7830
7778
|
if (this.multiSelect) {
|
|
7831
7779
|
this.menu.multiSelect = this.multiSelect;
|
|
@@ -7837,21 +7785,8 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7837
7785
|
if (typeof this.menu.initItems === 'function') {
|
|
7838
7786
|
this.menu.initItems();
|
|
7839
7787
|
}
|
|
7788
|
+
this.options = this.menu.options;
|
|
7840
7789
|
this.updateOptionPositions();
|
|
7841
|
-
// renderNativeSelect reads this.menu.options, which the parent doesn't
|
|
7842
|
-
// observe — request an update so the hidden native <option> list reflects
|
|
7843
|
-
// the menu's options after initItems populates them.
|
|
7844
|
-
this.requestUpdate();
|
|
7845
|
-
|
|
7846
|
-
// Keep aria-setsize/aria-posinset (and the native <option> list) in sync
|
|
7847
|
-
// when the menu re-initializes its items — e.g., slotchange, async/lazy
|
|
7848
|
-
// loads, value-triggered re-init. Without this, stale set-size is
|
|
7849
|
-
// announced and the native select goes stale after dynamic mutations.
|
|
7850
|
-
this.menu.addEventListener('auroMenu-optionsChange', () => {
|
|
7851
|
-
this.updateOptionPositions();
|
|
7852
|
-
this.requestUpdate();
|
|
7853
|
-
});
|
|
7854
|
-
|
|
7855
7790
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7856
7791
|
|
|
7857
7792
|
this.menu.addEventListener("auroMenu-selectValueFailure", () => {
|
|
@@ -7870,26 +7805,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7870
7805
|
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7871
7806
|
}
|
|
7872
7807
|
|
|
7873
|
-
//
|
|
7874
|
-
|
|
7875
|
-
// navigation back to the selection, or click in multiSelect — rely on
|
|
7876
|
-
// aria-activedescendant + aria-selected="true" to convey state per the
|
|
7877
|
-
// WAI-ARIA listbox pattern. This is intentional, not limited to the
|
|
7878
|
-
// initial activation on open: it also prevents a duplicate "X, selected"
|
|
7879
|
-
// when Enter on the active+selected option re-fires
|
|
7880
|
-
// auroMenu-selectedOption (see 03b289e39).
|
|
7881
|
-
if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
|
|
7808
|
+
// Announce the active option for screen readers
|
|
7809
|
+
if (this.optionActive) {
|
|
7882
7810
|
const optionText = this.optionActive.textContent.trim();
|
|
7883
|
-
const
|
|
7884
|
-
|
|
7885
|
-
announceToScreenReader(this._getAnnouncementRoot(), message);
|
|
7886
|
-
} else {
|
|
7887
|
-
// Typeahead-on-closed fires this event before `show()` flips
|
|
7888
|
-
// isPopoverVisible. Defer so the announcement targets the bib's
|
|
7889
|
-
// live region once the fullscreen <dialog> opens — otherwise it
|
|
7890
|
-
// lands in the host root, which is inert under the active modal.
|
|
7891
|
-
queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
|
|
7892
|
-
}
|
|
7811
|
+
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
7812
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
|
|
7893
7813
|
}
|
|
7894
7814
|
|
|
7895
7815
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -7898,7 +7818,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7898
7818
|
});
|
|
7899
7819
|
|
|
7900
7820
|
this.menu.addEventListener('auroMenu-selectedOption', () => {
|
|
7901
|
-
const previousSelected = this.optionSelected;
|
|
7902
7821
|
|
|
7903
7822
|
// Update the displayed value
|
|
7904
7823
|
this.updateDisplayedValue();
|
|
@@ -7918,32 +7837,13 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7918
7837
|
this.dropdown.trigger.focus();
|
|
7919
7838
|
}
|
|
7920
7839
|
|
|
7921
|
-
//
|
|
7922
|
-
//
|
|
7923
|
-
|
|
7924
|
-
|
|
7925
|
-
|
|
7926
|
-
|
|
7927
|
-
|
|
7928
|
-
const removed = prev.find((opt) => !nextSelected.includes(opt));
|
|
7929
|
-
const added = nextSelected.find((opt) => !prev.includes(opt));
|
|
7930
|
-
if (removed) {
|
|
7931
|
-
announcement = `${removed.textContent.trim()}, not selected`;
|
|
7932
|
-
} else if (added) {
|
|
7933
|
-
announcement = `${added.textContent.trim()}, selected`;
|
|
7934
|
-
}
|
|
7935
|
-
} else {
|
|
7936
|
-
announcement = `${this.menu.currentLabel}, selected`;
|
|
7937
|
-
}
|
|
7938
|
-
|
|
7939
|
-
// Delay so the utterance isn't overridden by VoiceOver's "collapsed"
|
|
7940
|
-
// announcement from aria-expanded when the dropdown closes.
|
|
7941
|
-
if (announcement) {
|
|
7942
|
-
const announcementDelay = 300;
|
|
7943
|
-
setTimeout(() => {
|
|
7944
|
-
announceToScreenReader(this._getAnnouncementRoot(), announcement);
|
|
7945
|
-
}, announcementDelay);
|
|
7946
|
-
}
|
|
7840
|
+
// Announce the selection after the dropdown closes so it isn't
|
|
7841
|
+
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
7842
|
+
const selectedValue = this.menu.currentLabel;
|
|
7843
|
+
const announcementDelay = 300;
|
|
7844
|
+
setTimeout(() => {
|
|
7845
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
|
|
7846
|
+
}, announcementDelay);
|
|
7947
7847
|
});
|
|
7948
7848
|
}
|
|
7949
7849
|
|
|
@@ -8041,32 +7941,24 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8041
7941
|
|
|
8042
7942
|
this.typeaheadBuffer += key;
|
|
8043
7943
|
|
|
8044
|
-
|
|
8045
|
-
// next item with a name that starts with the string of characters typed").
|
|
8046
|
-
// Only fall back to single-char cycling when the repeated buffer has no
|
|
8047
|
-
// longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
|
|
8048
|
-
// because no option starts with "aa".
|
|
8049
|
-
let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7944
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
8050
7945
|
|
|
8051
|
-
|
|
7946
|
+
let match = null;
|
|
8052
7947
|
if (isRepeatedChar) {
|
|
8053
7948
|
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
8054
7949
|
if (matches.length) {
|
|
8055
7950
|
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
8056
7951
|
match = matches[cycleIndex];
|
|
8057
7952
|
}
|
|
7953
|
+
} else {
|
|
7954
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
8058
7955
|
}
|
|
8059
7956
|
|
|
8060
|
-
// Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
|
|
8061
7957
|
if (match) {
|
|
8062
|
-
// Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
|
|
8063
|
-
// guard short-circuits and skips the firstActive/selected fallback —
|
|
8064
|
-
// otherwise show() synchronously fires the handler, which writes
|
|
8065
|
-
// aria-activedescendant once before we overwrite it.
|
|
8066
|
-
this.menu.updateActiveOption(match);
|
|
8067
7958
|
if (!this.dropdown.isPopoverVisible) {
|
|
8068
7959
|
this.dropdown.show();
|
|
8069
7960
|
}
|
|
7961
|
+
this.menu.updateActiveOption(match);
|
|
8070
7962
|
}
|
|
8071
7963
|
}
|
|
8072
7964
|
|
|
@@ -8183,28 +8075,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8183
8075
|
disconnectedCallback() {
|
|
8184
8076
|
super.disconnectedCallback();
|
|
8185
8077
|
this._clearTypeaheadBuffer();
|
|
8186
|
-
if (this._labelObserver) {
|
|
8187
|
-
this._labelObserver.disconnect();
|
|
8188
|
-
this._labelObserver = null;
|
|
8189
|
-
}
|
|
8190
|
-
if (this._retargetLabelObserver && this.shadowRoot) {
|
|
8191
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
8192
|
-
slot.removeEventListener('slotchange', this._retargetLabelObserver);
|
|
8193
|
-
});
|
|
8194
|
-
this._retargetLabelObserver = null;
|
|
8195
|
-
}
|
|
8196
|
-
}
|
|
8197
|
-
|
|
8198
|
-
connectedCallback() {
|
|
8199
|
-
super.connectedCallback();
|
|
8200
|
-
// Regression guard: firstUpdated() fires once per instance, so the label
|
|
8201
|
-
// observer setup it triggers does NOT re-run on reconnect. After a
|
|
8202
|
-
// disconnect+reconnect (reparent, SPA route swap), runtime label mutations
|
|
8203
|
-
// would silently stop syncing menu aria-label / dropdown.bibDialogLabel
|
|
8204
|
-
// unless we re-wire the observer here.
|
|
8205
|
-
if (this.hasUpdated) {
|
|
8206
|
-
this._observeLabelChanges();
|
|
8207
|
-
}
|
|
8208
8078
|
}
|
|
8209
8079
|
|
|
8210
8080
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
@@ -8215,7 +8085,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8215
8085
|
this.configureDropdown();
|
|
8216
8086
|
this.configureMenu();
|
|
8217
8087
|
this.configureSelect();
|
|
8218
|
-
this._observeLabelChanges();
|
|
8219
8088
|
}
|
|
8220
8089
|
|
|
8221
8090
|
setMenuValue(value) {
|
|
@@ -8348,18 +8217,25 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8348
8217
|
* @private
|
|
8349
8218
|
*/
|
|
8350
8219
|
_handleNativeSelectChange(event) {
|
|
8351
|
-
// Hidden native <select> has no `multiple` attribute, so any change it fires
|
|
8352
|
-
// is a single raw value — applying it in multiSelect mode would collapse the
|
|
8353
|
-
// JSON-array `value` shape. Bfcache/autofill can reach this on a name-bearing
|
|
8354
|
-
// form control even with aria-hidden/tabindex=-1.
|
|
8355
|
-
if (this.multiSelect) return;
|
|
8356
|
-
|
|
8357
8220
|
const selectedOption = event.target.options[event.target.selectedIndex];
|
|
8358
8221
|
if (!selectedOption) return;
|
|
8359
8222
|
const selectedValue = selectedOption.value;
|
|
8360
8223
|
|
|
8361
|
-
if (this.
|
|
8362
|
-
this.value
|
|
8224
|
+
if (this.multiSelect) {
|
|
8225
|
+
const currentArray = this.menu.value || [];
|
|
8226
|
+
|
|
8227
|
+
if (!currentArray.includes(selectedValue)) {
|
|
8228
|
+
this.value = JSON.stringify([
|
|
8229
|
+
...currentArray,
|
|
8230
|
+
selectedValue
|
|
8231
|
+
]);
|
|
8232
|
+
}
|
|
8233
|
+
} else {
|
|
8234
|
+
const currentValue = this.value;
|
|
8235
|
+
|
|
8236
|
+
if (currentValue !== selectedValue) {
|
|
8237
|
+
this.value = selectedValue;
|
|
8238
|
+
}
|
|
8363
8239
|
}
|
|
8364
8240
|
}
|
|
8365
8241
|
|