@aurodesignsystem-dev/auro-formkit 0.0.0-pr1508.0 → 0.0.0-pr1508.2
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/bibtemplate/dist/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- package/components/checkbox/demo/customize.min.js +8 -6
- package/components/checkbox/demo/getting-started.min.js +8 -6
- package/components/checkbox/demo/index.min.js +8 -6
- package/components/checkbox/dist/index.js +8 -6
- package/components/checkbox/dist/registered.js +8 -6
- package/components/combobox/README.md +1 -1
- package/components/combobox/demo/customize.md +2 -10
- package/components/combobox/demo/customize.min.js +386 -305
- package/components/combobox/demo/getting-started.min.js +386 -301
- package/components/combobox/demo/index.md +1 -1
- package/components/combobox/demo/index.min.js +386 -301
- package/components/combobox/demo/keyboard-behavior.md +2 -142
- package/components/combobox/demo/readme.md +1 -1
- package/components/combobox/demo/why-combobox.md +2 -2
- package/components/combobox/dist/auro-combobox.d.ts +23 -16
- package/components/combobox/dist/index.js +385 -300
- package/components/combobox/dist/registered.js +385 -300
- package/components/counter/demo/customize.min.js +18 -8
- package/components/counter/demo/index.min.js +18 -8
- package/components/counter/dist/index.js +18 -8
- package/components/counter/dist/registered.js +18 -8
- package/components/datepicker/demo/accessibility.md +2 -1
- package/components/datepicker/demo/api.md +63 -62
- package/components/datepicker/demo/customize.md +12 -1
- package/components/datepicker/demo/customize.min.js +932 -335
- package/components/datepicker/demo/index.min.js +932 -335
- package/components/datepicker/dist/{src/auro-calendar-cell.d.ts → auro-calendar-cell.d.ts} +20 -3
- package/components/datepicker/dist/{src/auro-calendar.d.ts → auro-calendar.d.ts} +121 -7
- package/components/datepicker/dist/{src/auro-datepicker.d.ts → auro-datepicker.d.ts} +78 -5
- package/components/datepicker/dist/blackoutUtils.d.ts +43 -0
- package/components/datepicker/dist/index.js +932 -335
- package/components/datepicker/dist/registered.js +932 -335
- package/components/dropdown/demo/customize.min.js +2 -1
- package/components/dropdown/demo/getting-started.min.js +2 -1
- package/components/dropdown/demo/index.min.js +2 -1
- package/components/dropdown/dist/index.js +2 -1
- package/components/dropdown/dist/registered.js +2 -1
- package/components/form/demo/customize.min.js +1690 -826
- package/components/form/demo/getting-started.min.js +1690 -826
- package/components/form/demo/index.min.js +1690 -826
- package/components/form/demo/registerDemoDeps.min.js +1690 -826
- package/components/input/demo/api.md +5 -5
- package/components/input/demo/customize.md +8 -8
- package/components/input/demo/customize.min.js +137 -95
- package/components/input/demo/getting-started.min.js +137 -95
- package/components/input/demo/index.min.js +137 -95
- package/components/input/dist/base-input.d.ts +33 -44
- package/components/input/dist/index.js +150 -96
- package/components/input/dist/registered.js +137 -95
- package/components/radio/demo/customize.min.js +8 -6
- package/components/radio/demo/getting-started.min.js +8 -6
- package/components/radio/demo/index.min.js +8 -6
- package/components/radio/dist/index.js +8 -6
- package/components/radio/dist/registered.js +8 -6
- package/components/select/demo/customize.md +86 -0
- package/components/select/demo/customize.min.js +194 -68
- package/components/select/demo/getting-started.min.js +196 -115
- package/components/select/demo/index.min.js +194 -68
- package/components/select/demo/keyboard-behavior.md +18 -4
- package/components/select/dist/auro-select.d.ts +20 -8
- package/components/select/dist/index.js +194 -68
- package/components/select/dist/registered.js +194 -68
- package/custom-elements.json +2365 -1819
- package/package.json +6 -2
- package/components/checkbox/demo/customize.js +0 -22
- package/components/checkbox/demo/demo-support.js +0 -1
- package/components/checkbox/demo/getting-started.js +0 -22
- package/components/checkbox/demo/index.js +0 -8
- package/components/checkbox/demo/styles.scss +0 -1
- package/components/combobox/demo/customize.js +0 -24
- package/components/combobox/demo/demo-support.js +0 -1
- package/components/combobox/demo/getting-started.js +0 -21
- package/components/combobox/demo/index.js +0 -23
- package/components/combobox/demo/styles.scss +0 -1
- package/components/counter/demo/customize.js +0 -21
- package/components/counter/demo/demo-support.js +0 -1
- package/components/counter/demo/index.js +0 -21
- package/components/counter/demo/styles.scss +0 -1
- package/components/datepicker/demo/customize.js +0 -17
- package/components/datepicker/demo/demo-support.js +0 -1
- package/components/datepicker/demo/index.js +0 -23
- package/components/datepicker/demo/styles.scss +0 -1
- package/components/dropdown/demo/customize.js +0 -9
- package/components/dropdown/demo/demo-support.js +0 -1
- package/components/dropdown/demo/getting-started.js +0 -9
- package/components/dropdown/demo/index.js +0 -16
- package/components/dropdown/demo/styles.scss +0 -1
- package/components/form/demo/customize.js +0 -28
- package/components/form/demo/demo-support.js +0 -1
- package/components/form/demo/getting-started.js +0 -9
- package/components/form/demo/index.js +0 -5
- package/components/form/demo/registerDemoDeps.js +0 -23
- package/components/form/demo/styles.scss +0 -1
- package/components/input/demo/customize.js +0 -25
- package/components/input/demo/demo-support.js +0 -1
- package/components/input/demo/getting-started.js +0 -8
- package/components/input/demo/index.js +0 -8
- package/components/input/demo/styles.css +0 -974
- package/components/input/demo/styles.scss +0 -1
- package/components/menu/demo/demo-support.js +0 -1
- package/components/menu/demo/index.js +0 -25
- package/components/menu/demo/styles.scss +0 -1
- package/components/radio/demo/customize.js +0 -22
- package/components/radio/demo/demo-support.js +0 -1
- package/components/radio/demo/getting-started.js +0 -24
- package/components/radio/demo/index.js +0 -8
- package/components/radio/demo/styles.scss +0 -1
- package/components/select/demo/customize.js +0 -11
- package/components/select/demo/demo-support.js +0 -1
- package/components/select/demo/getting-started.js +0 -26
- package/components/select/demo/index.js +0 -11
- package/components/select/demo/styles.scss +0 -1
- /package/components/datepicker/dist/{src/auro-calendar-month.d.ts → auro-calendar-month.d.ts} +0 -0
- /package/components/datepicker/dist/{src/buttonVersion.d.ts → buttonVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{src/datepickerKeyboardStrategy.d.ts → datepickerKeyboardStrategy.d.ts} +0 -0
- /package/components/datepicker/dist/{src/iconVersion.d.ts → iconVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{src/index.d.ts → index.d.ts} +0 -0
- /package/components/datepicker/dist/{src/popoverVersion.d.ts → popoverVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/classic/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/classic/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/color-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/color-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/color-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/shapeSize-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/snowflake/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/snowflake/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/style-auro-calendar-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/styles → styles}/tokens-css.d.ts +0 -0
- /package/components/datepicker/dist/{src/utilities.d.ts → utilities.d.ts} +0 -0
- /package/components/datepicker/dist/{src/utilitiesCalendar.d.ts → utilitiesCalendar.d.ts} +0 -0
- /package/components/datepicker/dist/{src/utilitiesCalendarRender.d.ts → utilitiesCalendarRender.d.ts} +0 -0
- /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/day.d.ts +0 -0
- /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -0
- /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
- /package/components/datepicker/dist/{src/vendor → vendor}/wc-range-datepicker/range-datepicker.d.ts +0 -0
|
@@ -516,15 +516,17 @@ class AuroFormValidation {
|
|
|
516
516
|
);
|
|
517
517
|
}
|
|
518
518
|
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
519
|
+
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
520
|
+
|
|
521
|
+
// If there is a second input in the elem and that value is undefined or an empty string set hasValue to false.
|
|
522
|
+
// Skip for combobox: its second auro-input is the fullscreen-bib mirror of the same value, not an independent
|
|
523
|
+
// field (datepicker is the intended consumer — start/end are independently required).
|
|
524
|
+
if (this.auroInputElements?.length === 2 && !isCombobox) {
|
|
525
|
+
if (!this.auroInputElements[1].value || this.auroInputElements[1].value.length === 0) {
|
|
522
526
|
hasValue = false;
|
|
523
527
|
}
|
|
524
528
|
}
|
|
525
529
|
|
|
526
|
-
const isCombobox = this.runtimeUtils.elementMatch(elem, 'auro-combobox');
|
|
527
|
-
|
|
528
530
|
if (isCombobox) {
|
|
529
531
|
|
|
530
532
|
if (!elem.persistInput || elem.behavior === "filter") {
|
|
@@ -916,19 +918,28 @@ const selectKeyboardStrategy = {
|
|
|
916
918
|
},
|
|
917
919
|
|
|
918
920
|
End(component, evt, ctx) {
|
|
919
|
-
if (!ctx.isExpanded) {
|
|
920
|
-
return;
|
|
921
|
-
}
|
|
922
921
|
evt.preventDefault();
|
|
923
922
|
evt.stopPropagation();
|
|
924
923
|
// `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
|
|
925
924
|
const lastOption = getEnabledOptions(component.menu).pop();
|
|
926
|
-
if (lastOption) {
|
|
927
|
-
|
|
925
|
+
if (!lastOption) {
|
|
926
|
+
return;
|
|
927
|
+
}
|
|
928
|
+
// Pre-stash before show() so the auroDropdown-toggled handler's
|
|
929
|
+
// `!optionActive` guard short-circuits the firstActive/selected fallback —
|
|
930
|
+
// otherwise show() synchronously fires the handler and writes
|
|
931
|
+
// aria-activedescendant once before we overwrite it.
|
|
932
|
+
component.menu.updateActiveOption(lastOption);
|
|
933
|
+
if (!ctx.isExpanded) {
|
|
934
|
+
component.dropdown.show();
|
|
928
935
|
}
|
|
929
936
|
},
|
|
930
937
|
|
|
931
938
|
Enter(component, evt, ctx) {
|
|
939
|
+
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
940
|
+
// which could interpret Enter as a submit. Matches APG select-only combobox
|
|
941
|
+
// and native <select> behavior: Enter opens the listbox when closed, selects
|
|
942
|
+
// the active option when open — it does not submit a parent form.
|
|
932
943
|
evt.preventDefault();
|
|
933
944
|
evt.stopPropagation();
|
|
934
945
|
if (!ctx.isExpanded) {
|
|
@@ -939,14 +950,16 @@ const selectKeyboardStrategy = {
|
|
|
939
950
|
},
|
|
940
951
|
|
|
941
952
|
Home(component, evt, ctx) {
|
|
942
|
-
if (!ctx.isExpanded) {
|
|
943
|
-
return;
|
|
944
|
-
}
|
|
945
953
|
evt.preventDefault();
|
|
946
954
|
evt.stopPropagation();
|
|
947
955
|
const [firstOption] = getEnabledOptions(component.menu);
|
|
948
|
-
if (firstOption) {
|
|
949
|
-
|
|
956
|
+
if (!firstOption) {
|
|
957
|
+
return;
|
|
958
|
+
}
|
|
959
|
+
// See End() for why this must run before show().
|
|
960
|
+
component.menu.updateActiveOption(firstOption);
|
|
961
|
+
if (!ctx.isExpanded) {
|
|
962
|
+
component.dropdown.show();
|
|
950
963
|
}
|
|
951
964
|
},
|
|
952
965
|
|
|
@@ -4894,7 +4907,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4894
4907
|
}
|
|
4895
4908
|
};
|
|
4896
4909
|
|
|
4897
|
-
var formkitVersion$1 = '
|
|
4910
|
+
var formkitVersion$1 = '202607010104';
|
|
4898
4911
|
|
|
4899
4912
|
class AuroElement extends LitElement {
|
|
4900
4913
|
static get properties() {
|
|
@@ -6166,6 +6179,7 @@ class AuroDropdown extends AuroElement {
|
|
|
6166
6179
|
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6167
6180
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6168
6181
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6182
|
+
aria-haspopup="${ifDefined(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
|
|
6169
6183
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6170
6184
|
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
6171
6185
|
@focusin="${this.handleFocusin}"
|
|
@@ -6292,7 +6306,7 @@ class AuroDropdown extends AuroElement {
|
|
|
6292
6306
|
|
|
6293
6307
|
var colorCss$1 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
|
|
6294
6308
|
|
|
6295
|
-
var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1
|
|
6309
|
+
var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
|
|
6296
6310
|
|
|
6297
6311
|
var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
|
|
6298
6312
|
|
|
@@ -6915,7 +6929,7 @@ class AuroHelpText extends LitElement {
|
|
|
6915
6929
|
}
|
|
6916
6930
|
}
|
|
6917
6931
|
|
|
6918
|
-
var formkitVersion = '
|
|
6932
|
+
var formkitVersion = '202607010104';
|
|
6919
6933
|
|
|
6920
6934
|
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}`;
|
|
6921
6935
|
|
|
@@ -7247,14 +7261,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7247
7261
|
reflect: true
|
|
7248
7262
|
},
|
|
7249
7263
|
|
|
7250
|
-
/**
|
|
7251
|
-
* @private
|
|
7252
|
-
*/
|
|
7253
|
-
options: {
|
|
7254
|
-
type: Array,
|
|
7255
|
-
state: true
|
|
7256
|
-
},
|
|
7257
|
-
|
|
7258
7264
|
/**
|
|
7259
7265
|
* Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
|
|
7260
7266
|
* @type {HTMLElement|Array<HTMLElement>}
|
|
@@ -7542,16 +7548,68 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7542
7548
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
7543
7549
|
}
|
|
7544
7550
|
|
|
7545
|
-
|
|
7546
|
-
const labelElement = this.querySelector('span[slot="label"]');
|
|
7547
|
-
if (labelElement) {
|
|
7548
|
-
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
7549
|
-
}
|
|
7551
|
+
this._syncLabelText();
|
|
7550
7552
|
|
|
7551
7553
|
// Exposes the CSS parts from the dropdown for styling
|
|
7552
7554
|
this.dropdown.exposeCssParts();
|
|
7553
7555
|
}
|
|
7554
7556
|
|
|
7557
|
+
/**
|
|
7558
|
+
* Reads the current label slot text and pushes it to the dropdown bib
|
|
7559
|
+
* (for dialog naming) and the menu (for listbox aria-label). Safe to call
|
|
7560
|
+
* before either child has been wired up — each branch self-guards.
|
|
7561
|
+
* @private
|
|
7562
|
+
*/
|
|
7563
|
+
_syncLabelText() {
|
|
7564
|
+
const labelElement = this.querySelector('[slot="label"]');
|
|
7565
|
+
const text = labelElement ? labelElement.textContent.trim() : '';
|
|
7566
|
+
if (this.dropdown) {
|
|
7567
|
+
this.dropdown.bibDialogLabel = text || undefined;
|
|
7568
|
+
}
|
|
7569
|
+
if (this.menu) {
|
|
7570
|
+
if (text) {
|
|
7571
|
+
this.menu.setAttribute('aria-label', text);
|
|
7572
|
+
} else {
|
|
7573
|
+
this.menu.removeAttribute('aria-label');
|
|
7574
|
+
}
|
|
7575
|
+
}
|
|
7576
|
+
}
|
|
7577
|
+
|
|
7578
|
+
/**
|
|
7579
|
+
* Keeps the dialog/menu accessible names in sync when consumers mutate the
|
|
7580
|
+
* label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
|
|
7581
|
+
* insufficient — it doesn't fire when textContent of an already-assigned
|
|
7582
|
+
* slotted node changes, which is the common case. We scope the observer to
|
|
7583
|
+
* the label node itself (not the whole host subtree) so option-content
|
|
7584
|
+
* mutations don't trigger label re-syncs, and re-target on `slotchange`
|
|
7585
|
+
* when consumers add or replace the label element.
|
|
7586
|
+
* @private
|
|
7587
|
+
*/
|
|
7588
|
+
_observeLabelChanges() {
|
|
7589
|
+
if (this._labelObserver) return;
|
|
7590
|
+
this._labelObserver = new MutationObserver(() => this._syncLabelText());
|
|
7591
|
+
|
|
7592
|
+
const retarget = () => {
|
|
7593
|
+
this._labelObserver.disconnect();
|
|
7594
|
+
const labelElement = this.querySelector('[slot="label"]');
|
|
7595
|
+
if (labelElement) {
|
|
7596
|
+
this._labelObserver.observe(labelElement, {
|
|
7597
|
+
childList: true,
|
|
7598
|
+
subtree: true,
|
|
7599
|
+
characterData: true
|
|
7600
|
+
});
|
|
7601
|
+
}
|
|
7602
|
+
this._syncLabelText();
|
|
7603
|
+
};
|
|
7604
|
+
|
|
7605
|
+
retarget();
|
|
7606
|
+
|
|
7607
|
+
this._retargetLabelObserver = retarget;
|
|
7608
|
+
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
7609
|
+
slot.addEventListener('slotchange', retarget);
|
|
7610
|
+
});
|
|
7611
|
+
}
|
|
7612
|
+
|
|
7555
7613
|
/**
|
|
7556
7614
|
* This will register this element with the browser.
|
|
7557
7615
|
* @param {string} [name="auro-select"] - The name of element that you want to register to.
|
|
@@ -7702,11 +7760,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7702
7760
|
this.updateMenuShapeSize();
|
|
7703
7761
|
this.setMenuValue(this.value);
|
|
7704
7762
|
|
|
7705
|
-
|
|
7706
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7707
|
-
if (labelElement) {
|
|
7708
|
-
this.menu.setAttribute('aria-label', labelElement.textContent.trim());
|
|
7709
|
-
}
|
|
7763
|
+
this._syncLabelText();
|
|
7710
7764
|
|
|
7711
7765
|
if (this.multiSelect) {
|
|
7712
7766
|
this.menu.multiSelect = this.multiSelect;
|
|
@@ -7718,8 +7772,21 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7718
7772
|
if (typeof this.menu.initItems === 'function') {
|
|
7719
7773
|
this.menu.initItems();
|
|
7720
7774
|
}
|
|
7721
|
-
this.options = this.menu.options;
|
|
7722
7775
|
this.updateOptionPositions();
|
|
7776
|
+
// renderNativeSelect reads this.menu.options, which the parent doesn't
|
|
7777
|
+
// observe — request an update so the hidden native <option> list reflects
|
|
7778
|
+
// the menu's options after initItems populates them.
|
|
7779
|
+
this.requestUpdate();
|
|
7780
|
+
|
|
7781
|
+
// Keep aria-setsize/aria-posinset (and the native <option> list) in sync
|
|
7782
|
+
// when the menu re-initializes its items — e.g., slotchange, async/lazy
|
|
7783
|
+
// loads, value-triggered re-init. Without this, stale set-size is
|
|
7784
|
+
// announced and the native select goes stale after dynamic mutations.
|
|
7785
|
+
this.menu.addEventListener('auroMenu-optionsChange', () => {
|
|
7786
|
+
this.updateOptionPositions();
|
|
7787
|
+
this.requestUpdate();
|
|
7788
|
+
});
|
|
7789
|
+
|
|
7723
7790
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7724
7791
|
|
|
7725
7792
|
this.menu.addEventListener("auroMenu-selectValueFailure", () => {
|
|
@@ -7738,11 +7805,26 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7738
7805
|
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7739
7806
|
}
|
|
7740
7807
|
|
|
7741
|
-
//
|
|
7742
|
-
|
|
7808
|
+
// Live-region announce only for [not selected] options. For activations
|
|
7809
|
+
// on an already-selected option — auto-activation on bib open, arrow
|
|
7810
|
+
// navigation back to the selection, or click in multiSelect — rely on
|
|
7811
|
+
// aria-activedescendant + aria-selected="true" to convey state per the
|
|
7812
|
+
// WAI-ARIA listbox pattern. This is intentional, not limited to the
|
|
7813
|
+
// initial activation on open: it also prevents a duplicate "X, selected"
|
|
7814
|
+
// when Enter on the active+selected option re-fires
|
|
7815
|
+
// auroMenu-selectedOption (see 03b289e39).
|
|
7816
|
+
if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
|
|
7743
7817
|
const optionText = this.optionActive.textContent.trim();
|
|
7744
|
-
const
|
|
7745
|
-
|
|
7818
|
+
const message = `${optionText}, not selected`;
|
|
7819
|
+
if (this.dropdown.isPopoverVisible) {
|
|
7820
|
+
announceToScreenReader(this._getAnnouncementRoot(), message);
|
|
7821
|
+
} else {
|
|
7822
|
+
// Typeahead-on-closed fires this event before `show()` flips
|
|
7823
|
+
// isPopoverVisible. Defer so the announcement targets the bib's
|
|
7824
|
+
// live region once the fullscreen <dialog> opens — otherwise it
|
|
7825
|
+
// lands in the host root, which is inert under the active modal.
|
|
7826
|
+
queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
|
|
7827
|
+
}
|
|
7746
7828
|
}
|
|
7747
7829
|
|
|
7748
7830
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -7751,6 +7833,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7751
7833
|
});
|
|
7752
7834
|
|
|
7753
7835
|
this.menu.addEventListener('auroMenu-selectedOption', () => {
|
|
7836
|
+
const previousSelected = this.optionSelected;
|
|
7754
7837
|
|
|
7755
7838
|
// Update the displayed value
|
|
7756
7839
|
this.updateDisplayedValue();
|
|
@@ -7770,13 +7853,32 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7770
7853
|
this.dropdown.trigger.focus();
|
|
7771
7854
|
}
|
|
7772
7855
|
|
|
7773
|
-
//
|
|
7774
|
-
//
|
|
7775
|
-
|
|
7776
|
-
|
|
7777
|
-
|
|
7778
|
-
|
|
7779
|
-
|
|
7856
|
+
// Describe the actual change. In multiSelect, currentLabel is the
|
|
7857
|
+
// concatenated remaining list — announcing "{list}, selected" after a
|
|
7858
|
+
// deselect would falsely claim every remaining label was just added.
|
|
7859
|
+
// Diff previous vs next to recover the toggled option.
|
|
7860
|
+
let announcement = '';
|
|
7861
|
+
if (this.multiSelect) {
|
|
7862
|
+
const prev = Array.isArray(previousSelected) ? previousSelected : [];
|
|
7863
|
+
const removed = prev.find((opt) => !nextSelected.includes(opt));
|
|
7864
|
+
const added = nextSelected.find((opt) => !prev.includes(opt));
|
|
7865
|
+
if (removed) {
|
|
7866
|
+
announcement = `${removed.textContent.trim()}, not selected`;
|
|
7867
|
+
} else if (added) {
|
|
7868
|
+
announcement = `${added.textContent.trim()}, selected`;
|
|
7869
|
+
}
|
|
7870
|
+
} else {
|
|
7871
|
+
announcement = `${this.menu.currentLabel}, selected`;
|
|
7872
|
+
}
|
|
7873
|
+
|
|
7874
|
+
// Delay so the utterance isn't overridden by VoiceOver's "collapsed"
|
|
7875
|
+
// announcement from aria-expanded when the dropdown closes.
|
|
7876
|
+
if (announcement) {
|
|
7877
|
+
const announcementDelay = 300;
|
|
7878
|
+
setTimeout(() => {
|
|
7879
|
+
announceToScreenReader(this._getAnnouncementRoot(), announcement);
|
|
7880
|
+
}, announcementDelay);
|
|
7881
|
+
}
|
|
7780
7882
|
});
|
|
7781
7883
|
}
|
|
7782
7884
|
|
|
@@ -7874,24 +7976,32 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7874
7976
|
|
|
7875
7977
|
this.typeaheadBuffer += key;
|
|
7876
7978
|
|
|
7877
|
-
|
|
7979
|
+
// Prefer the literal buffer as a prefix per WAI-ARIA APG ("focus moves to the
|
|
7980
|
+
// next item with a name that starts with the string of characters typed").
|
|
7981
|
+
// Only fall back to single-char cycling when the repeated buffer has no
|
|
7982
|
+
// longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
|
|
7983
|
+
// because no option starts with "aa".
|
|
7984
|
+
let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7878
7985
|
|
|
7879
|
-
|
|
7986
|
+
const isRepeatedChar = !match && this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
7880
7987
|
if (isRepeatedChar) {
|
|
7881
7988
|
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
7882
7989
|
if (matches.length) {
|
|
7883
7990
|
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
7884
7991
|
match = matches[cycleIndex];
|
|
7885
7992
|
}
|
|
7886
|
-
} else {
|
|
7887
|
-
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7888
7993
|
}
|
|
7889
7994
|
|
|
7995
|
+
// Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
|
|
7890
7996
|
if (match) {
|
|
7997
|
+
// Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
|
|
7998
|
+
// guard short-circuits and skips the firstActive/selected fallback —
|
|
7999
|
+
// otherwise show() synchronously fires the handler, which writes
|
|
8000
|
+
// aria-activedescendant once before we overwrite it.
|
|
8001
|
+
this.menu.updateActiveOption(match);
|
|
7891
8002
|
if (!this.dropdown.isPopoverVisible) {
|
|
7892
8003
|
this.dropdown.show();
|
|
7893
8004
|
}
|
|
7894
|
-
this.menu.updateActiveOption(match);
|
|
7895
8005
|
}
|
|
7896
8006
|
}
|
|
7897
8007
|
|
|
@@ -8008,6 +8118,28 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8008
8118
|
disconnectedCallback() {
|
|
8009
8119
|
super.disconnectedCallback();
|
|
8010
8120
|
this._clearTypeaheadBuffer();
|
|
8121
|
+
if (this._labelObserver) {
|
|
8122
|
+
this._labelObserver.disconnect();
|
|
8123
|
+
this._labelObserver = null;
|
|
8124
|
+
}
|
|
8125
|
+
if (this._retargetLabelObserver && this.shadowRoot) {
|
|
8126
|
+
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
8127
|
+
slot.removeEventListener('slotchange', this._retargetLabelObserver);
|
|
8128
|
+
});
|
|
8129
|
+
this._retargetLabelObserver = null;
|
|
8130
|
+
}
|
|
8131
|
+
}
|
|
8132
|
+
|
|
8133
|
+
connectedCallback() {
|
|
8134
|
+
super.connectedCallback();
|
|
8135
|
+
// Regression guard: firstUpdated() fires once per instance, so the label
|
|
8136
|
+
// observer setup it triggers does NOT re-run on reconnect. After a
|
|
8137
|
+
// disconnect+reconnect (reparent, SPA route swap), runtime label mutations
|
|
8138
|
+
// would silently stop syncing menu aria-label / dropdown.bibDialogLabel
|
|
8139
|
+
// unless we re-wire the observer here.
|
|
8140
|
+
if (this.hasUpdated) {
|
|
8141
|
+
this._observeLabelChanges();
|
|
8142
|
+
}
|
|
8011
8143
|
}
|
|
8012
8144
|
|
|
8013
8145
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
@@ -8018,6 +8150,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8018
8150
|
this.configureDropdown();
|
|
8019
8151
|
this.configureMenu();
|
|
8020
8152
|
this.configureSelect();
|
|
8153
|
+
this._observeLabelChanges();
|
|
8021
8154
|
}
|
|
8022
8155
|
|
|
8023
8156
|
setMenuValue(value) {
|
|
@@ -8150,25 +8283,18 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8150
8283
|
* @private
|
|
8151
8284
|
*/
|
|
8152
8285
|
_handleNativeSelectChange(event) {
|
|
8286
|
+
// Hidden native <select> has no `multiple` attribute, so any change it fires
|
|
8287
|
+
// is a single raw value — applying it in multiSelect mode would collapse the
|
|
8288
|
+
// JSON-array `value` shape. Bfcache/autofill can reach this on a name-bearing
|
|
8289
|
+
// form control even with aria-hidden/tabindex=-1.
|
|
8290
|
+
if (this.multiSelect) return;
|
|
8291
|
+
|
|
8153
8292
|
const selectedOption = event.target.options[event.target.selectedIndex];
|
|
8154
8293
|
if (!selectedOption) return;
|
|
8155
8294
|
const selectedValue = selectedOption.value;
|
|
8156
8295
|
|
|
8157
|
-
if (this.
|
|
8158
|
-
|
|
8159
|
-
|
|
8160
|
-
if (!currentArray.includes(selectedValue)) {
|
|
8161
|
-
this.value = JSON.stringify([
|
|
8162
|
-
...currentArray,
|
|
8163
|
-
selectedValue
|
|
8164
|
-
]);
|
|
8165
|
-
}
|
|
8166
|
-
} else {
|
|
8167
|
-
const currentValue = this.value;
|
|
8168
|
-
|
|
8169
|
-
if (currentValue !== selectedValue) {
|
|
8170
|
-
this.value = selectedValue;
|
|
8171
|
-
}
|
|
8296
|
+
if (this.value !== selectedValue) {
|
|
8297
|
+
this.value = selectedValue;
|
|
8172
8298
|
}
|
|
8173
8299
|
}
|
|
8174
8300
|
|