@aurodesignsystem-dev/auro-formkit 0.0.0-pr1511.0 → 0.0.0-pr1512.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 +119 -97
- package/components/combobox/demo/getting-started.min.js +119 -97
- package/components/combobox/demo/index.min.js +119 -97
- package/components/combobox/dist/index.js +118 -96
- package/components/combobox/dist/registered.js +118 -96
- package/components/counter/demo/customize.min.js +2 -3
- package/components/counter/demo/index.min.js +2 -3
- package/components/counter/dist/index.js +2 -3
- package/components/counter/dist/registered.js +2 -3
- package/components/datepicker/demo/customize.min.js +139 -98
- package/components/datepicker/demo/index.min.js +139 -98
- package/components/datepicker/dist/index.js +139 -98
- package/components/datepicker/dist/registered.js +139 -98
- 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 +434 -426
- package/components/form/demo/getting-started.min.js +434 -426
- package/components/form/demo/index.min.js +434 -426
- package/components/form/demo/registerDemoDeps.min.js +434 -426
- package/components/input/demo/api.md +5 -5
- package/components/input/demo/customize.md +8 -8
- package/components/input/demo/customize.min.js +116 -93
- package/components/input/demo/getting-started.min.js +116 -93
- package/components/input/demo/index.min.js +116 -93
- package/components/input/dist/base-input.d.ts +33 -44
- package/components/input/dist/index.js +129 -94
- package/components/input/dist/registered.js +116 -93
- 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 +55 -132
- package/components/select/demo/getting-started.min.js +55 -132
- package/components/select/demo/index.min.js +55 -132
- 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 +55 -132
- package/components/select/dist/registered.js +55 -132
- package/custom-elements.json +1942 -1728
- package/package.json +1 -1
|
@@ -990,24 +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
|
-
|
|
1000
|
+
if (lastOption) {
|
|
1001
|
+
component.menu.updateActiveOption(lastOption);
|
|
999
1002
|
}
|
|
1000
|
-
if (!ctx.isExpanded) {
|
|
1001
|
-
component.dropdown.show();
|
|
1002
|
-
}
|
|
1003
|
-
component.menu.updateActiveOption(lastOption);
|
|
1004
1003
|
},
|
|
1005
1004
|
|
|
1006
1005
|
Enter(component, evt, ctx) {
|
|
1007
|
-
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
1008
|
-
// which could interpret Enter as a submit. Matches APG select-only combobox
|
|
1009
|
-
// and native <select> behavior: Enter opens the listbox when closed, selects
|
|
1010
|
-
// the active option when open — it does not submit a parent form.
|
|
1011
1006
|
evt.preventDefault();
|
|
1012
1007
|
evt.stopPropagation();
|
|
1013
1008
|
if (!ctx.isExpanded) {
|
|
@@ -1018,16 +1013,15 @@ const selectKeyboardStrategy = {
|
|
|
1018
1013
|
},
|
|
1019
1014
|
|
|
1020
1015
|
Home(component, evt, ctx) {
|
|
1016
|
+
if (!ctx.isExpanded) {
|
|
1017
|
+
return;
|
|
1018
|
+
}
|
|
1021
1019
|
evt.preventDefault();
|
|
1022
1020
|
evt.stopPropagation();
|
|
1023
1021
|
const [firstOption] = getEnabledOptions(component.menu);
|
|
1024
|
-
if (
|
|
1025
|
-
|
|
1026
|
-
}
|
|
1027
|
-
if (!ctx.isExpanded) {
|
|
1028
|
-
component.dropdown.show();
|
|
1022
|
+
if (firstOption) {
|
|
1023
|
+
component.menu.updateActiveOption(firstOption);
|
|
1029
1024
|
}
|
|
1030
|
-
component.menu.updateActiveOption(firstOption);
|
|
1031
1025
|
},
|
|
1032
1026
|
|
|
1033
1027
|
Tab(component, evt, ctx) {
|
|
@@ -4998,7 +4992,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4998
4992
|
}
|
|
4999
4993
|
};
|
|
5000
4994
|
|
|
5001
|
-
var formkitVersion$1 = '
|
|
4995
|
+
var formkitVersion$1 = '202606252337';
|
|
5002
4996
|
|
|
5003
4997
|
class AuroElement extends i$2 {
|
|
5004
4998
|
static get properties() {
|
|
@@ -6270,7 +6264,6 @@ class AuroDropdown extends AuroElement {
|
|
|
6270
6264
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6271
6265
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6272
6266
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6273
|
-
aria-haspopup="${o(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
|
|
6274
6267
|
aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6275
6268
|
aria-disabled="${o(this.disabled ? 'true' : undefined)}"
|
|
6276
6269
|
@focusin="${this.handleFocusin}"
|
|
@@ -7020,7 +7013,7 @@ class AuroHelpText extends i$2 {
|
|
|
7020
7013
|
}
|
|
7021
7014
|
}
|
|
7022
7015
|
|
|
7023
|
-
var formkitVersion = '
|
|
7016
|
+
var formkitVersion = '202606252337';
|
|
7024
7017
|
|
|
7025
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}`;
|
|
7026
7019
|
|
|
@@ -7352,6 +7345,14 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7352
7345
|
reflect: true
|
|
7353
7346
|
},
|
|
7354
7347
|
|
|
7348
|
+
/**
|
|
7349
|
+
* @private
|
|
7350
|
+
*/
|
|
7351
|
+
options: {
|
|
7352
|
+
type: Array,
|
|
7353
|
+
state: true
|
|
7354
|
+
},
|
|
7355
|
+
|
|
7355
7356
|
/**
|
|
7356
7357
|
* Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
|
|
7357
7358
|
* @type {HTMLElement|Array<HTMLElement>}
|
|
@@ -7639,68 +7640,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7639
7640
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
7640
7641
|
}
|
|
7641
7642
|
|
|
7642
|
-
|
|
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
|
+
}
|
|
7643
7648
|
|
|
7644
7649
|
// Exposes the CSS parts from the dropdown for styling
|
|
7645
7650
|
this.dropdown.exposeCssParts();
|
|
7646
7651
|
}
|
|
7647
7652
|
|
|
7648
|
-
/**
|
|
7649
|
-
* Reads the current label slot text and pushes it to the dropdown bib
|
|
7650
|
-
* (for dialog naming) and the menu (for listbox aria-label). Safe to call
|
|
7651
|
-
* before either child has been wired up — each branch self-guards.
|
|
7652
|
-
* @private
|
|
7653
|
-
*/
|
|
7654
|
-
_syncLabelText() {
|
|
7655
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7656
|
-
const text = labelElement ? labelElement.textContent.trim() : '';
|
|
7657
|
-
if (this.dropdown) {
|
|
7658
|
-
this.dropdown.bibDialogLabel = text || undefined;
|
|
7659
|
-
}
|
|
7660
|
-
if (this.menu) {
|
|
7661
|
-
if (text) {
|
|
7662
|
-
this.menu.setAttribute('aria-label', text);
|
|
7663
|
-
} else {
|
|
7664
|
-
this.menu.removeAttribute('aria-label');
|
|
7665
|
-
}
|
|
7666
|
-
}
|
|
7667
|
-
}
|
|
7668
|
-
|
|
7669
|
-
/**
|
|
7670
|
-
* Keeps the dialog/menu accessible names in sync when consumers mutate the
|
|
7671
|
-
* label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
|
|
7672
|
-
* insufficient — it doesn't fire when textContent of an already-assigned
|
|
7673
|
-
* slotted node changes, which is the common case. We scope the observer to
|
|
7674
|
-
* the label node itself (not the whole host subtree) so option-content
|
|
7675
|
-
* mutations don't trigger label re-syncs, and re-target on `slotchange`
|
|
7676
|
-
* when consumers add or replace the label element.
|
|
7677
|
-
* @private
|
|
7678
|
-
*/
|
|
7679
|
-
_observeLabelChanges() {
|
|
7680
|
-
if (this._labelObserver) return;
|
|
7681
|
-
this._labelObserver = new MutationObserver(() => this._syncLabelText());
|
|
7682
|
-
|
|
7683
|
-
const retarget = () => {
|
|
7684
|
-
this._labelObserver.disconnect();
|
|
7685
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7686
|
-
if (labelElement) {
|
|
7687
|
-
this._labelObserver.observe(labelElement, {
|
|
7688
|
-
childList: true,
|
|
7689
|
-
subtree: true,
|
|
7690
|
-
characterData: true
|
|
7691
|
-
});
|
|
7692
|
-
}
|
|
7693
|
-
this._syncLabelText();
|
|
7694
|
-
};
|
|
7695
|
-
|
|
7696
|
-
retarget();
|
|
7697
|
-
|
|
7698
|
-
this._retargetLabelObserver = retarget;
|
|
7699
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
7700
|
-
slot.addEventListener('slotchange', retarget);
|
|
7701
|
-
});
|
|
7702
|
-
}
|
|
7703
|
-
|
|
7704
7653
|
/**
|
|
7705
7654
|
* This will register this element with the browser.
|
|
7706
7655
|
* @param {string} [name="auro-select"] - The name of element that you want to register to.
|
|
@@ -7851,7 +7800,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7851
7800
|
this.updateMenuShapeSize();
|
|
7852
7801
|
this.setMenuValue(this.value);
|
|
7853
7802
|
|
|
7854
|
-
|
|
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
|
+
}
|
|
7855
7808
|
|
|
7856
7809
|
if (this.multiSelect) {
|
|
7857
7810
|
this.menu.multiSelect = this.multiSelect;
|
|
@@ -7863,21 +7816,8 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7863
7816
|
if (typeof this.menu.initItems === 'function') {
|
|
7864
7817
|
this.menu.initItems();
|
|
7865
7818
|
}
|
|
7819
|
+
this.options = this.menu.options;
|
|
7866
7820
|
this.updateOptionPositions();
|
|
7867
|
-
// renderNativeSelect reads this.menu.options, which the parent doesn't
|
|
7868
|
-
// observe — request an update so the hidden native <option> list reflects
|
|
7869
|
-
// the menu's options after initItems populates them.
|
|
7870
|
-
this.requestUpdate();
|
|
7871
|
-
|
|
7872
|
-
// Keep aria-setsize/aria-posinset (and the native <option> list) in sync
|
|
7873
|
-
// when the menu re-initializes its items — e.g., slotchange, async/lazy
|
|
7874
|
-
// loads, value-triggered re-init. Without this, stale set-size is
|
|
7875
|
-
// announced and the native select goes stale after dynamic mutations.
|
|
7876
|
-
this.menu.addEventListener('auroMenu-optionsChange', () => {
|
|
7877
|
-
this.updateOptionPositions();
|
|
7878
|
-
this.requestUpdate();
|
|
7879
|
-
});
|
|
7880
|
-
|
|
7881
7821
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7882
7822
|
|
|
7883
7823
|
this.menu.addEventListener("auroMenu-selectValueFailure", () => {
|
|
@@ -7896,22 +7836,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7896
7836
|
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7897
7837
|
}
|
|
7898
7838
|
|
|
7899
|
-
// Announce the active option for screen readers
|
|
7900
|
-
|
|
7901
|
-
// re-announce, and aria-selected on the active descendant otherwise
|
|
7902
|
-
// conveys state without an explicit utterance.
|
|
7903
|
-
if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
|
|
7839
|
+
// Announce the active option for screen readers
|
|
7840
|
+
if (this.optionActive) {
|
|
7904
7841
|
const optionText = this.optionActive.textContent.trim();
|
|
7905
|
-
const
|
|
7906
|
-
|
|
7907
|
-
announceToScreenReader(this._getAnnouncementRoot(), message);
|
|
7908
|
-
} else {
|
|
7909
|
-
// Typeahead-on-closed fires this event before `show()` flips
|
|
7910
|
-
// isPopoverVisible. Defer so the announcement targets the bib's
|
|
7911
|
-
// live region once the fullscreen <dialog> opens — otherwise it
|
|
7912
|
-
// lands in the host root, which is inert under the active modal.
|
|
7913
|
-
queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
|
|
7914
|
-
}
|
|
7842
|
+
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
7843
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
|
|
7915
7844
|
}
|
|
7916
7845
|
|
|
7917
7846
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -8043,32 +7972,24 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8043
7972
|
|
|
8044
7973
|
this.typeaheadBuffer += key;
|
|
8045
7974
|
|
|
8046
|
-
|
|
8047
|
-
// next item with a name that starts with the string of characters typed").
|
|
8048
|
-
// Only fall back to single-char cycling when the repeated buffer has no
|
|
8049
|
-
// longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
|
|
8050
|
-
// because no option starts with "aa".
|
|
8051
|
-
let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7975
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
8052
7976
|
|
|
8053
|
-
|
|
7977
|
+
let match = null;
|
|
8054
7978
|
if (isRepeatedChar) {
|
|
8055
7979
|
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
8056
7980
|
if (matches.length) {
|
|
8057
7981
|
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
8058
7982
|
match = matches[cycleIndex];
|
|
8059
7983
|
}
|
|
7984
|
+
} else {
|
|
7985
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
8060
7986
|
}
|
|
8061
7987
|
|
|
8062
|
-
// Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
|
|
8063
7988
|
if (match) {
|
|
8064
|
-
// Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
|
|
8065
|
-
// guard short-circuits and skips the firstActive/selected fallback —
|
|
8066
|
-
// otherwise show() synchronously fires the handler, which writes
|
|
8067
|
-
// aria-activedescendant once before we overwrite it.
|
|
8068
|
-
this.menu.updateActiveOption(match);
|
|
8069
7989
|
if (!this.dropdown.isPopoverVisible) {
|
|
8070
7990
|
this.dropdown.show();
|
|
8071
7991
|
}
|
|
7992
|
+
this.menu.updateActiveOption(match);
|
|
8072
7993
|
}
|
|
8073
7994
|
}
|
|
8074
7995
|
|
|
@@ -8185,16 +8106,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8185
8106
|
disconnectedCallback() {
|
|
8186
8107
|
super.disconnectedCallback();
|
|
8187
8108
|
this._clearTypeaheadBuffer();
|
|
8188
|
-
if (this._labelObserver) {
|
|
8189
|
-
this._labelObserver.disconnect();
|
|
8190
|
-
this._labelObserver = null;
|
|
8191
|
-
}
|
|
8192
|
-
if (this._retargetLabelObserver && this.shadowRoot) {
|
|
8193
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
8194
|
-
slot.removeEventListener('slotchange', this._retargetLabelObserver);
|
|
8195
|
-
});
|
|
8196
|
-
this._retargetLabelObserver = null;
|
|
8197
|
-
}
|
|
8198
8109
|
}
|
|
8199
8110
|
|
|
8200
8111
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
@@ -8205,7 +8116,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8205
8116
|
this.configureDropdown();
|
|
8206
8117
|
this.configureMenu();
|
|
8207
8118
|
this.configureSelect();
|
|
8208
|
-
this._observeLabelChanges();
|
|
8209
8119
|
}
|
|
8210
8120
|
|
|
8211
8121
|
setMenuValue(value) {
|
|
@@ -8342,8 +8252,21 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8342
8252
|
if (!selectedOption) return;
|
|
8343
8253
|
const selectedValue = selectedOption.value;
|
|
8344
8254
|
|
|
8345
|
-
if (this.
|
|
8346
|
-
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
|
+
}
|
|
8347
8270
|
}
|
|
8348
8271
|
}
|
|
8349
8272
|
|