@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
|
@@ -990,28 +990,19 @@ const selectKeyboardStrategy = {
|
|
|
990
990
|
},
|
|
991
991
|
|
|
992
992
|
End(component, evt, ctx) {
|
|
993
|
+
if (!ctx.isExpanded) {
|
|
994
|
+
return;
|
|
995
|
+
}
|
|
993
996
|
evt.preventDefault();
|
|
994
997
|
evt.stopPropagation();
|
|
995
998
|
// `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
|
|
996
999
|
const lastOption = getEnabledOptions(component.menu).pop();
|
|
997
|
-
if (
|
|
998
|
-
|
|
999
|
-
}
|
|
1000
|
-
// Pre-stash before show() so the auroDropdown-toggled handler's
|
|
1001
|
-
// `!optionActive` guard short-circuits the firstActive/selected fallback —
|
|
1002
|
-
// otherwise show() synchronously fires the handler and writes
|
|
1003
|
-
// aria-activedescendant once before we overwrite it.
|
|
1004
|
-
component.menu.updateActiveOption(lastOption);
|
|
1005
|
-
if (!ctx.isExpanded) {
|
|
1006
|
-
component.dropdown.show();
|
|
1000
|
+
if (lastOption) {
|
|
1001
|
+
component.menu.updateActiveOption(lastOption);
|
|
1007
1002
|
}
|
|
1008
1003
|
},
|
|
1009
1004
|
|
|
1010
1005
|
Enter(component, evt, ctx) {
|
|
1011
|
-
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
1012
|
-
// which could interpret Enter as a submit. Matches APG select-only combobox
|
|
1013
|
-
// and native <select> behavior: Enter opens the listbox when closed, selects
|
|
1014
|
-
// the active option when open — it does not submit a parent form.
|
|
1015
1006
|
evt.preventDefault();
|
|
1016
1007
|
evt.stopPropagation();
|
|
1017
1008
|
if (!ctx.isExpanded) {
|
|
@@ -1022,16 +1013,14 @@ const selectKeyboardStrategy = {
|
|
|
1022
1013
|
},
|
|
1023
1014
|
|
|
1024
1015
|
Home(component, evt, ctx) {
|
|
1016
|
+
if (!ctx.isExpanded) {
|
|
1017
|
+
return;
|
|
1018
|
+
}
|
|
1025
1019
|
evt.preventDefault();
|
|
1026
1020
|
evt.stopPropagation();
|
|
1027
1021
|
const [firstOption] = getEnabledOptions(component.menu);
|
|
1028
|
-
if (
|
|
1029
|
-
|
|
1030
|
-
}
|
|
1031
|
-
// See End() for why this must run before show().
|
|
1032
|
-
component.menu.updateActiveOption(firstOption);
|
|
1033
|
-
if (!ctx.isExpanded) {
|
|
1034
|
-
component.dropdown.show();
|
|
1022
|
+
if (firstOption) {
|
|
1023
|
+
component.menu.updateActiveOption(firstOption);
|
|
1035
1024
|
}
|
|
1036
1025
|
},
|
|
1037
1026
|
|
|
@@ -5003,7 +4992,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
5003
4992
|
}
|
|
5004
4993
|
};
|
|
5005
4994
|
|
|
5006
|
-
var formkitVersion$1 = '
|
|
4995
|
+
var formkitVersion$1 = '202606291440';
|
|
5007
4996
|
|
|
5008
4997
|
class AuroElement extends i$2 {
|
|
5009
4998
|
static get properties() {
|
|
@@ -6275,7 +6264,6 @@ class AuroDropdown extends AuroElement {
|
|
|
6275
6264
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6276
6265
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6277
6266
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6278
|
-
aria-haspopup="${o(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
|
|
6279
6267
|
aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6280
6268
|
aria-disabled="${o(this.disabled ? 'true' : undefined)}"
|
|
6281
6269
|
@focusin="${this.handleFocusin}"
|
|
@@ -7025,7 +7013,7 @@ class AuroHelpText extends i$2 {
|
|
|
7025
7013
|
}
|
|
7026
7014
|
}
|
|
7027
7015
|
|
|
7028
|
-
var formkitVersion = '
|
|
7016
|
+
var formkitVersion = '202606291440';
|
|
7029
7017
|
|
|
7030
7018
|
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}`;
|
|
7031
7019
|
|
|
@@ -7357,6 +7345,14 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7357
7345
|
reflect: true
|
|
7358
7346
|
},
|
|
7359
7347
|
|
|
7348
|
+
/**
|
|
7349
|
+
* @private
|
|
7350
|
+
*/
|
|
7351
|
+
options: {
|
|
7352
|
+
type: Array,
|
|
7353
|
+
state: true
|
|
7354
|
+
},
|
|
7355
|
+
|
|
7360
7356
|
/**
|
|
7361
7357
|
* Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
|
|
7362
7358
|
* @type {HTMLElement|Array<HTMLElement>}
|
|
@@ -7644,68 +7640,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7644
7640
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
7645
7641
|
}
|
|
7646
7642
|
|
|
7647
|
-
|
|
7643
|
+
// Pass label text to the dropdown bib for accessible dialog naming
|
|
7644
|
+
const labelElement = this.querySelector('span[slot="label"]');
|
|
7645
|
+
if (labelElement) {
|
|
7646
|
+
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
7647
|
+
}
|
|
7648
7648
|
|
|
7649
7649
|
// Exposes the CSS parts from the dropdown for styling
|
|
7650
7650
|
this.dropdown.exposeCssParts();
|
|
7651
7651
|
}
|
|
7652
7652
|
|
|
7653
|
-
/**
|
|
7654
|
-
* Reads the current label slot text and pushes it to the dropdown bib
|
|
7655
|
-
* (for dialog naming) and the menu (for listbox aria-label). Safe to call
|
|
7656
|
-
* before either child has been wired up — each branch self-guards.
|
|
7657
|
-
* @private
|
|
7658
|
-
*/
|
|
7659
|
-
_syncLabelText() {
|
|
7660
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7661
|
-
const text = labelElement ? labelElement.textContent.trim() : '';
|
|
7662
|
-
if (this.dropdown) {
|
|
7663
|
-
this.dropdown.bibDialogLabel = text || undefined;
|
|
7664
|
-
}
|
|
7665
|
-
if (this.menu) {
|
|
7666
|
-
if (text) {
|
|
7667
|
-
this.menu.setAttribute('aria-label', text);
|
|
7668
|
-
} else {
|
|
7669
|
-
this.menu.removeAttribute('aria-label');
|
|
7670
|
-
}
|
|
7671
|
-
}
|
|
7672
|
-
}
|
|
7673
|
-
|
|
7674
|
-
/**
|
|
7675
|
-
* Keeps the dialog/menu accessible names in sync when consumers mutate the
|
|
7676
|
-
* label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
|
|
7677
|
-
* insufficient — it doesn't fire when textContent of an already-assigned
|
|
7678
|
-
* slotted node changes, which is the common case. We scope the observer to
|
|
7679
|
-
* the label node itself (not the whole host subtree) so option-content
|
|
7680
|
-
* mutations don't trigger label re-syncs, and re-target on `slotchange`
|
|
7681
|
-
* when consumers add or replace the label element.
|
|
7682
|
-
* @private
|
|
7683
|
-
*/
|
|
7684
|
-
_observeLabelChanges() {
|
|
7685
|
-
if (this._labelObserver) return;
|
|
7686
|
-
this._labelObserver = new MutationObserver(() => this._syncLabelText());
|
|
7687
|
-
|
|
7688
|
-
const retarget = () => {
|
|
7689
|
-
this._labelObserver.disconnect();
|
|
7690
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7691
|
-
if (labelElement) {
|
|
7692
|
-
this._labelObserver.observe(labelElement, {
|
|
7693
|
-
childList: true,
|
|
7694
|
-
subtree: true,
|
|
7695
|
-
characterData: true
|
|
7696
|
-
});
|
|
7697
|
-
}
|
|
7698
|
-
this._syncLabelText();
|
|
7699
|
-
};
|
|
7700
|
-
|
|
7701
|
-
retarget();
|
|
7702
|
-
|
|
7703
|
-
this._retargetLabelObserver = retarget;
|
|
7704
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
7705
|
-
slot.addEventListener('slotchange', retarget);
|
|
7706
|
-
});
|
|
7707
|
-
}
|
|
7708
|
-
|
|
7709
7653
|
/**
|
|
7710
7654
|
* This will register this element with the browser.
|
|
7711
7655
|
* @param {string} [name="auro-select"] - The name of element that you want to register to.
|
|
@@ -7856,7 +7800,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7856
7800
|
this.updateMenuShapeSize();
|
|
7857
7801
|
this.setMenuValue(this.value);
|
|
7858
7802
|
|
|
7859
|
-
|
|
7803
|
+
// Set accessible name on the menu for screen readers based on the label slot content
|
|
7804
|
+
const labelElement = this.querySelector('[slot="label"]');
|
|
7805
|
+
if (labelElement) {
|
|
7806
|
+
this.menu.setAttribute('aria-label', labelElement.textContent.trim());
|
|
7807
|
+
}
|
|
7860
7808
|
|
|
7861
7809
|
if (this.multiSelect) {
|
|
7862
7810
|
this.menu.multiSelect = this.multiSelect;
|
|
@@ -7868,21 +7816,8 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7868
7816
|
if (typeof this.menu.initItems === 'function') {
|
|
7869
7817
|
this.menu.initItems();
|
|
7870
7818
|
}
|
|
7819
|
+
this.options = this.menu.options;
|
|
7871
7820
|
this.updateOptionPositions();
|
|
7872
|
-
// renderNativeSelect reads this.menu.options, which the parent doesn't
|
|
7873
|
-
// observe — request an update so the hidden native <option> list reflects
|
|
7874
|
-
// the menu's options after initItems populates them.
|
|
7875
|
-
this.requestUpdate();
|
|
7876
|
-
|
|
7877
|
-
// Keep aria-setsize/aria-posinset (and the native <option> list) in sync
|
|
7878
|
-
// when the menu re-initializes its items — e.g., slotchange, async/lazy
|
|
7879
|
-
// loads, value-triggered re-init. Without this, stale set-size is
|
|
7880
|
-
// announced and the native select goes stale after dynamic mutations.
|
|
7881
|
-
this.menu.addEventListener('auroMenu-optionsChange', () => {
|
|
7882
|
-
this.updateOptionPositions();
|
|
7883
|
-
this.requestUpdate();
|
|
7884
|
-
});
|
|
7885
|
-
|
|
7886
7821
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7887
7822
|
|
|
7888
7823
|
this.menu.addEventListener("auroMenu-selectValueFailure", () => {
|
|
@@ -7901,26 +7836,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7901
7836
|
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7902
7837
|
}
|
|
7903
7838
|
|
|
7904
|
-
//
|
|
7905
|
-
|
|
7906
|
-
// navigation back to the selection, or click in multiSelect — rely on
|
|
7907
|
-
// aria-activedescendant + aria-selected="true" to convey state per the
|
|
7908
|
-
// WAI-ARIA listbox pattern. This is intentional, not limited to the
|
|
7909
|
-
// initial activation on open: it also prevents a duplicate "X, selected"
|
|
7910
|
-
// when Enter on the active+selected option re-fires
|
|
7911
|
-
// auroMenu-selectedOption (see 03b289e39).
|
|
7912
|
-
if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
|
|
7839
|
+
// Announce the active option for screen readers
|
|
7840
|
+
if (this.optionActive) {
|
|
7913
7841
|
const optionText = this.optionActive.textContent.trim();
|
|
7914
|
-
const
|
|
7915
|
-
|
|
7916
|
-
announceToScreenReader(this._getAnnouncementRoot(), message);
|
|
7917
|
-
} else {
|
|
7918
|
-
// Typeahead-on-closed fires this event before `show()` flips
|
|
7919
|
-
// isPopoverVisible. Defer so the announcement targets the bib's
|
|
7920
|
-
// live region once the fullscreen <dialog> opens — otherwise it
|
|
7921
|
-
// lands in the host root, which is inert under the active modal.
|
|
7922
|
-
queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
|
|
7923
|
-
}
|
|
7842
|
+
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
7843
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
|
|
7924
7844
|
}
|
|
7925
7845
|
|
|
7926
7846
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -7929,7 +7849,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7929
7849
|
});
|
|
7930
7850
|
|
|
7931
7851
|
this.menu.addEventListener('auroMenu-selectedOption', () => {
|
|
7932
|
-
const previousSelected = this.optionSelected;
|
|
7933
7852
|
|
|
7934
7853
|
// Update the displayed value
|
|
7935
7854
|
this.updateDisplayedValue();
|
|
@@ -7949,32 +7868,13 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7949
7868
|
this.dropdown.trigger.focus();
|
|
7950
7869
|
}
|
|
7951
7870
|
|
|
7952
|
-
//
|
|
7953
|
-
//
|
|
7954
|
-
|
|
7955
|
-
|
|
7956
|
-
|
|
7957
|
-
|
|
7958
|
-
|
|
7959
|
-
const removed = prev.find((opt) => !nextSelected.includes(opt));
|
|
7960
|
-
const added = nextSelected.find((opt) => !prev.includes(opt));
|
|
7961
|
-
if (removed) {
|
|
7962
|
-
announcement = `${removed.textContent.trim()}, not selected`;
|
|
7963
|
-
} else if (added) {
|
|
7964
|
-
announcement = `${added.textContent.trim()}, selected`;
|
|
7965
|
-
}
|
|
7966
|
-
} else {
|
|
7967
|
-
announcement = `${this.menu.currentLabel}, selected`;
|
|
7968
|
-
}
|
|
7969
|
-
|
|
7970
|
-
// Delay so the utterance isn't overridden by VoiceOver's "collapsed"
|
|
7971
|
-
// announcement from aria-expanded when the dropdown closes.
|
|
7972
|
-
if (announcement) {
|
|
7973
|
-
const announcementDelay = 300;
|
|
7974
|
-
setTimeout(() => {
|
|
7975
|
-
announceToScreenReader(this._getAnnouncementRoot(), announcement);
|
|
7976
|
-
}, announcementDelay);
|
|
7977
|
-
}
|
|
7871
|
+
// Announce the selection after the dropdown closes so it isn't
|
|
7872
|
+
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
7873
|
+
const selectedValue = this.menu.currentLabel;
|
|
7874
|
+
const announcementDelay = 300;
|
|
7875
|
+
setTimeout(() => {
|
|
7876
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
|
|
7877
|
+
}, announcementDelay);
|
|
7978
7878
|
});
|
|
7979
7879
|
}
|
|
7980
7880
|
|
|
@@ -8072,32 +7972,24 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8072
7972
|
|
|
8073
7973
|
this.typeaheadBuffer += key;
|
|
8074
7974
|
|
|
8075
|
-
|
|
8076
|
-
// next item with a name that starts with the string of characters typed").
|
|
8077
|
-
// Only fall back to single-char cycling when the repeated buffer has no
|
|
8078
|
-
// longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
|
|
8079
|
-
// because no option starts with "aa".
|
|
8080
|
-
let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7975
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
8081
7976
|
|
|
8082
|
-
|
|
7977
|
+
let match = null;
|
|
8083
7978
|
if (isRepeatedChar) {
|
|
8084
7979
|
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
8085
7980
|
if (matches.length) {
|
|
8086
7981
|
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
8087
7982
|
match = matches[cycleIndex];
|
|
8088
7983
|
}
|
|
7984
|
+
} else {
|
|
7985
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
8089
7986
|
}
|
|
8090
7987
|
|
|
8091
|
-
// Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
|
|
8092
7988
|
if (match) {
|
|
8093
|
-
// Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
|
|
8094
|
-
// guard short-circuits and skips the firstActive/selected fallback —
|
|
8095
|
-
// otherwise show() synchronously fires the handler, which writes
|
|
8096
|
-
// aria-activedescendant once before we overwrite it.
|
|
8097
|
-
this.menu.updateActiveOption(match);
|
|
8098
7989
|
if (!this.dropdown.isPopoverVisible) {
|
|
8099
7990
|
this.dropdown.show();
|
|
8100
7991
|
}
|
|
7992
|
+
this.menu.updateActiveOption(match);
|
|
8101
7993
|
}
|
|
8102
7994
|
}
|
|
8103
7995
|
|
|
@@ -8214,28 +8106,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8214
8106
|
disconnectedCallback() {
|
|
8215
8107
|
super.disconnectedCallback();
|
|
8216
8108
|
this._clearTypeaheadBuffer();
|
|
8217
|
-
if (this._labelObserver) {
|
|
8218
|
-
this._labelObserver.disconnect();
|
|
8219
|
-
this._labelObserver = null;
|
|
8220
|
-
}
|
|
8221
|
-
if (this._retargetLabelObserver && this.shadowRoot) {
|
|
8222
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
8223
|
-
slot.removeEventListener('slotchange', this._retargetLabelObserver);
|
|
8224
|
-
});
|
|
8225
|
-
this._retargetLabelObserver = null;
|
|
8226
|
-
}
|
|
8227
|
-
}
|
|
8228
|
-
|
|
8229
|
-
connectedCallback() {
|
|
8230
|
-
super.connectedCallback();
|
|
8231
|
-
// Regression guard: firstUpdated() fires once per instance, so the label
|
|
8232
|
-
// observer setup it triggers does NOT re-run on reconnect. After a
|
|
8233
|
-
// disconnect+reconnect (reparent, SPA route swap), runtime label mutations
|
|
8234
|
-
// would silently stop syncing menu aria-label / dropdown.bibDialogLabel
|
|
8235
|
-
// unless we re-wire the observer here.
|
|
8236
|
-
if (this.hasUpdated) {
|
|
8237
|
-
this._observeLabelChanges();
|
|
8238
|
-
}
|
|
8239
8109
|
}
|
|
8240
8110
|
|
|
8241
8111
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
@@ -8246,7 +8116,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8246
8116
|
this.configureDropdown();
|
|
8247
8117
|
this.configureMenu();
|
|
8248
8118
|
this.configureSelect();
|
|
8249
|
-
this._observeLabelChanges();
|
|
8250
8119
|
}
|
|
8251
8120
|
|
|
8252
8121
|
setMenuValue(value) {
|
|
@@ -8379,18 +8248,25 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8379
8248
|
* @private
|
|
8380
8249
|
*/
|
|
8381
8250
|
_handleNativeSelectChange(event) {
|
|
8382
|
-
// Hidden native <select> has no `multiple` attribute, so any change it fires
|
|
8383
|
-
// is a single raw value — applying it in multiSelect mode would collapse the
|
|
8384
|
-
// JSON-array `value` shape. Bfcache/autofill can reach this on a name-bearing
|
|
8385
|
-
// form control even with aria-hidden/tabindex=-1.
|
|
8386
|
-
if (this.multiSelect) return;
|
|
8387
|
-
|
|
8388
8251
|
const selectedOption = event.target.options[event.target.selectedIndex];
|
|
8389
8252
|
if (!selectedOption) return;
|
|
8390
8253
|
const selectedValue = selectedOption.value;
|
|
8391
8254
|
|
|
8392
|
-
if (this.
|
|
8393
|
-
this.value
|
|
8255
|
+
if (this.multiSelect) {
|
|
8256
|
+
const currentArray = this.menu.value || [];
|
|
8257
|
+
|
|
8258
|
+
if (!currentArray.includes(selectedValue)) {
|
|
8259
|
+
this.value = JSON.stringify([
|
|
8260
|
+
...currentArray,
|
|
8261
|
+
selectedValue
|
|
8262
|
+
]);
|
|
8263
|
+
}
|
|
8264
|
+
} else {
|
|
8265
|
+
const currentValue = this.value;
|
|
8266
|
+
|
|
8267
|
+
if (currentValue !== selectedValue) {
|
|
8268
|
+
this.value = selectedValue;
|
|
8269
|
+
}
|
|
8394
8270
|
}
|
|
8395
8271
|
}
|
|
8396
8272
|
|