@aurodesignsystem-dev/auro-formkit 0.0.0-pr1507.0 → 0.0.0-pr1508.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/bibtemplate/dist/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- package/components/checkbox/demo/customize.html +1 -2
- 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/demo/customize.html +1 -2
- package/components/combobox/demo/customize.md +105 -137
- package/components/combobox/demo/customize.min.js +506 -568
- package/components/combobox/demo/getting-started.min.js +506 -564
- package/components/combobox/demo/index.min.js +506 -564
- package/components/combobox/demo/keyboard-behavior.md +2 -142
- package/components/combobox/demo/why-combobox.md +1 -1
- package/components/combobox/dist/auro-combobox.d.ts +30 -14
- package/components/combobox/dist/index.js +505 -563
- package/components/combobox/dist/registered.js +505 -563
- package/components/counter/demo/customize.min.js +26 -8
- package/components/counter/demo/index.min.js +26 -8
- package/components/counter/dist/index.js +26 -8
- package/components/counter/dist/registered.js +26 -8
- package/components/datepicker/demo/accessibility.md +2 -1
- package/components/datepicker/demo/api.md +65 -62
- package/components/datepicker/demo/customize.md +150 -39
- package/components/datepicker/demo/customize.min.js +988 -500
- package/components/datepicker/demo/index.min.js +988 -482
- 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} +80 -5
- package/components/datepicker/dist/blackoutUtils.d.ts +43 -0
- package/components/datepicker/dist/index.js +988 -482
- package/components/datepicker/dist/registered.js +988 -482
- package/components/dropdown/demo/customize.min.js +10 -1
- package/components/dropdown/demo/getting-started.min.js +10 -1
- package/components/dropdown/demo/index.min.js +10 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +1 -0
- package/components/dropdown/dist/index.js +10 -1
- package/components/dropdown/dist/registered.js +10 -1
- package/components/form/demo/customize.html +6 -6
- package/components/form/demo/customize.md +203 -51
- package/components/form/demo/customize.min.js +2357 -1419
- package/components/form/demo/getting-started.min.js +2285 -1419
- package/components/form/demo/index.min.js +2285 -1419
- package/components/form/demo/registerDemoDeps.min.js +1922 -1382
- package/components/form/dist/auro-form.d.ts +122 -4
- package/components/form/dist/index.js +363 -37
- package/components/form/dist/registered.js +363 -37
- package/components/input/demo/api.md +5 -5
- package/components/input/demo/customize.html +1 -2
- package/components/input/demo/customize.md +62 -61
- package/components/input/demo/customize.min.js +177 -241
- package/components/input/demo/getting-started.min.js +177 -241
- package/components/input/demo/index.min.js +177 -241
- package/components/input/dist/base-input.d.ts +34 -93
- package/components/input/dist/index.js +190 -242
- package/components/input/dist/registered.js +177 -241
- 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.html +1 -2
- package/components/select/demo/customize.md +86 -0
- package/components/select/demo/customize.min.js +202 -68
- package/components/select/demo/getting-started.min.js +204 -115
- package/components/select/demo/index.min.js +202 -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 +202 -68
- package/components/select/dist/registered.js +202 -68
- package/custom-elements.json +1035 -604
- 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 -19
- 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 -9
- 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 = '202607010100';
|
|
4898
4911
|
|
|
4899
4912
|
class AuroElement extends LitElement {
|
|
4900
4913
|
static get properties() {
|
|
@@ -5845,6 +5858,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5845
5858
|
};
|
|
5846
5859
|
this.addEventListener('keydown', this._bibTabHandler);
|
|
5847
5860
|
|
|
5861
|
+
// Suppress AuroFloatingUI's auto-hide-on-focus-loss while the
|
|
5862
|
+
// desktopModal trap owns focus management. Without this, the very
|
|
5863
|
+
// first focus move into the bib (from the RAF below) triggers
|
|
5864
|
+
// handleFocusLoss → hideBib, tearing down the trap before the
|
|
5865
|
+
// user can press Tab.
|
|
5866
|
+
this._priorNoHideOnFocusLoss = this.noHideOnThisFocusLoss;
|
|
5867
|
+
this.noHideOnThisFocusLoss = true;
|
|
5868
|
+
|
|
5848
5869
|
// Move initial focus into the bib content, matching FocusTrap behavior
|
|
5849
5870
|
requestAnimationFrame(() => {
|
|
5850
5871
|
const focusables = getFocusableElements(this.bibContent);
|
|
@@ -6158,6 +6179,7 @@ class AuroDropdown extends AuroElement {
|
|
|
6158
6179
|
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6159
6180
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6160
6181
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6182
|
+
aria-haspopup="${ifDefined(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
|
|
6161
6183
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6162
6184
|
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
6163
6185
|
@focusin="${this.handleFocusin}"
|
|
@@ -6284,7 +6306,7 @@ class AuroDropdown extends AuroElement {
|
|
|
6284
6306
|
|
|
6285
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)}`;
|
|
6286
6308
|
|
|
6287
|
-
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)}`;
|
|
6288
6310
|
|
|
6289
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)}`;
|
|
6290
6312
|
|
|
@@ -6907,7 +6929,7 @@ class AuroHelpText extends LitElement {
|
|
|
6907
6929
|
}
|
|
6908
6930
|
}
|
|
6909
6931
|
|
|
6910
|
-
var formkitVersion = '
|
|
6932
|
+
var formkitVersion = '202607010100';
|
|
6911
6933
|
|
|
6912
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}`;
|
|
6913
6935
|
|
|
@@ -7239,14 +7261,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7239
7261
|
reflect: true
|
|
7240
7262
|
},
|
|
7241
7263
|
|
|
7242
|
-
/**
|
|
7243
|
-
* @private
|
|
7244
|
-
*/
|
|
7245
|
-
options: {
|
|
7246
|
-
type: Array,
|
|
7247
|
-
state: true
|
|
7248
|
-
},
|
|
7249
|
-
|
|
7250
7264
|
/**
|
|
7251
7265
|
* Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
|
|
7252
7266
|
* @type {HTMLElement|Array<HTMLElement>}
|
|
@@ -7534,16 +7548,68 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7534
7548
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
7535
7549
|
}
|
|
7536
7550
|
|
|
7537
|
-
|
|
7538
|
-
const labelElement = this.querySelector('span[slot="label"]');
|
|
7539
|
-
if (labelElement) {
|
|
7540
|
-
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
7541
|
-
}
|
|
7551
|
+
this._syncLabelText();
|
|
7542
7552
|
|
|
7543
7553
|
// Exposes the CSS parts from the dropdown for styling
|
|
7544
7554
|
this.dropdown.exposeCssParts();
|
|
7545
7555
|
}
|
|
7546
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
|
+
|
|
7547
7613
|
/**
|
|
7548
7614
|
* This will register this element with the browser.
|
|
7549
7615
|
* @param {string} [name="auro-select"] - The name of element that you want to register to.
|
|
@@ -7694,11 +7760,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7694
7760
|
this.updateMenuShapeSize();
|
|
7695
7761
|
this.setMenuValue(this.value);
|
|
7696
7762
|
|
|
7697
|
-
|
|
7698
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7699
|
-
if (labelElement) {
|
|
7700
|
-
this.menu.setAttribute('aria-label', labelElement.textContent.trim());
|
|
7701
|
-
}
|
|
7763
|
+
this._syncLabelText();
|
|
7702
7764
|
|
|
7703
7765
|
if (this.multiSelect) {
|
|
7704
7766
|
this.menu.multiSelect = this.multiSelect;
|
|
@@ -7710,8 +7772,21 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7710
7772
|
if (typeof this.menu.initItems === 'function') {
|
|
7711
7773
|
this.menu.initItems();
|
|
7712
7774
|
}
|
|
7713
|
-
this.options = this.menu.options;
|
|
7714
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
|
+
|
|
7715
7790
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7716
7791
|
|
|
7717
7792
|
this.menu.addEventListener("auroMenu-selectValueFailure", () => {
|
|
@@ -7730,11 +7805,26 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7730
7805
|
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7731
7806
|
}
|
|
7732
7807
|
|
|
7733
|
-
//
|
|
7734
|
-
|
|
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')) {
|
|
7735
7817
|
const optionText = this.optionActive.textContent.trim();
|
|
7736
|
-
const
|
|
7737
|
-
|
|
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
|
+
}
|
|
7738
7828
|
}
|
|
7739
7829
|
|
|
7740
7830
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -7743,6 +7833,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7743
7833
|
});
|
|
7744
7834
|
|
|
7745
7835
|
this.menu.addEventListener('auroMenu-selectedOption', () => {
|
|
7836
|
+
const previousSelected = this.optionSelected;
|
|
7746
7837
|
|
|
7747
7838
|
// Update the displayed value
|
|
7748
7839
|
this.updateDisplayedValue();
|
|
@@ -7762,13 +7853,32 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7762
7853
|
this.dropdown.trigger.focus();
|
|
7763
7854
|
}
|
|
7764
7855
|
|
|
7765
|
-
//
|
|
7766
|
-
//
|
|
7767
|
-
|
|
7768
|
-
|
|
7769
|
-
|
|
7770
|
-
|
|
7771
|
-
|
|
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
|
+
}
|
|
7772
7882
|
});
|
|
7773
7883
|
}
|
|
7774
7884
|
|
|
@@ -7866,24 +7976,32 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7866
7976
|
|
|
7867
7977
|
this.typeaheadBuffer += key;
|
|
7868
7978
|
|
|
7869
|
-
|
|
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));
|
|
7870
7985
|
|
|
7871
|
-
|
|
7986
|
+
const isRepeatedChar = !match && this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
7872
7987
|
if (isRepeatedChar) {
|
|
7873
7988
|
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
7874
7989
|
if (matches.length) {
|
|
7875
7990
|
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
7876
7991
|
match = matches[cycleIndex];
|
|
7877
7992
|
}
|
|
7878
|
-
} else {
|
|
7879
|
-
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7880
7993
|
}
|
|
7881
7994
|
|
|
7995
|
+
// Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
|
|
7882
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);
|
|
7883
8002
|
if (!this.dropdown.isPopoverVisible) {
|
|
7884
8003
|
this.dropdown.show();
|
|
7885
8004
|
}
|
|
7886
|
-
this.menu.updateActiveOption(match);
|
|
7887
8005
|
}
|
|
7888
8006
|
}
|
|
7889
8007
|
|
|
@@ -8000,6 +8118,28 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8000
8118
|
disconnectedCallback() {
|
|
8001
8119
|
super.disconnectedCallback();
|
|
8002
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
|
+
}
|
|
8003
8143
|
}
|
|
8004
8144
|
|
|
8005
8145
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
@@ -8010,6 +8150,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8010
8150
|
this.configureDropdown();
|
|
8011
8151
|
this.configureMenu();
|
|
8012
8152
|
this.configureSelect();
|
|
8153
|
+
this._observeLabelChanges();
|
|
8013
8154
|
}
|
|
8014
8155
|
|
|
8015
8156
|
setMenuValue(value) {
|
|
@@ -8142,25 +8283,18 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8142
8283
|
* @private
|
|
8143
8284
|
*/
|
|
8144
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
|
+
|
|
8145
8292
|
const selectedOption = event.target.options[event.target.selectedIndex];
|
|
8146
8293
|
if (!selectedOption) return;
|
|
8147
8294
|
const selectedValue = selectedOption.value;
|
|
8148
8295
|
|
|
8149
|
-
if (this.
|
|
8150
|
-
|
|
8151
|
-
|
|
8152
|
-
if (!currentArray.includes(selectedValue)) {
|
|
8153
|
-
this.value = JSON.stringify([
|
|
8154
|
-
...currentArray,
|
|
8155
|
-
selectedValue
|
|
8156
|
-
]);
|
|
8157
|
-
}
|
|
8158
|
-
} else {
|
|
8159
|
-
const currentValue = this.value;
|
|
8160
|
-
|
|
8161
|
-
if (currentValue !== selectedValue) {
|
|
8162
|
-
this.value = selectedValue;
|
|
8163
|
-
}
|
|
8296
|
+
if (this.value !== selectedValue) {
|
|
8297
|
+
this.value = selectedValue;
|
|
8164
8298
|
}
|
|
8165
8299
|
}
|
|
8166
8300
|
|