@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
|
@@ -959,24 +959,19 @@ const selectKeyboardStrategy = {
|
|
|
959
959
|
},
|
|
960
960
|
|
|
961
961
|
End(component, evt, ctx) {
|
|
962
|
+
if (!ctx.isExpanded) {
|
|
963
|
+
return;
|
|
964
|
+
}
|
|
962
965
|
evt.preventDefault();
|
|
963
966
|
evt.stopPropagation();
|
|
964
967
|
// `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
|
|
965
968
|
const lastOption = getEnabledOptions(component.menu).pop();
|
|
966
|
-
if (
|
|
967
|
-
|
|
969
|
+
if (lastOption) {
|
|
970
|
+
component.menu.updateActiveOption(lastOption);
|
|
968
971
|
}
|
|
969
|
-
if (!ctx.isExpanded) {
|
|
970
|
-
component.dropdown.show();
|
|
971
|
-
}
|
|
972
|
-
component.menu.updateActiveOption(lastOption);
|
|
973
972
|
},
|
|
974
973
|
|
|
975
974
|
Enter(component, evt, ctx) {
|
|
976
|
-
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
977
|
-
// which could interpret Enter as a submit. Matches APG select-only combobox
|
|
978
|
-
// and native <select> behavior: Enter opens the listbox when closed, selects
|
|
979
|
-
// the active option when open — it does not submit a parent form.
|
|
980
975
|
evt.preventDefault();
|
|
981
976
|
evt.stopPropagation();
|
|
982
977
|
if (!ctx.isExpanded) {
|
|
@@ -987,16 +982,15 @@ const selectKeyboardStrategy = {
|
|
|
987
982
|
},
|
|
988
983
|
|
|
989
984
|
Home(component, evt, ctx) {
|
|
985
|
+
if (!ctx.isExpanded) {
|
|
986
|
+
return;
|
|
987
|
+
}
|
|
990
988
|
evt.preventDefault();
|
|
991
989
|
evt.stopPropagation();
|
|
992
990
|
const [firstOption] = getEnabledOptions(component.menu);
|
|
993
|
-
if (
|
|
994
|
-
|
|
995
|
-
}
|
|
996
|
-
if (!ctx.isExpanded) {
|
|
997
|
-
component.dropdown.show();
|
|
991
|
+
if (firstOption) {
|
|
992
|
+
component.menu.updateActiveOption(firstOption);
|
|
998
993
|
}
|
|
999
|
-
component.menu.updateActiveOption(firstOption);
|
|
1000
994
|
},
|
|
1001
995
|
|
|
1002
996
|
Tab(component, evt, ctx) {
|
|
@@ -4967,7 +4961,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4967
4961
|
}
|
|
4968
4962
|
};
|
|
4969
4963
|
|
|
4970
|
-
var formkitVersion$1 = '
|
|
4964
|
+
var formkitVersion$1 = '202606252337';
|
|
4971
4965
|
|
|
4972
4966
|
class AuroElement extends i$2 {
|
|
4973
4967
|
static get properties() {
|
|
@@ -6239,7 +6233,6 @@ class AuroDropdown extends AuroElement {
|
|
|
6239
6233
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6240
6234
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6241
6235
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6242
|
-
aria-haspopup="${o(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
|
|
6243
6236
|
aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6244
6237
|
aria-disabled="${o(this.disabled ? 'true' : undefined)}"
|
|
6245
6238
|
@focusin="${this.handleFocusin}"
|
|
@@ -6989,7 +6982,7 @@ class AuroHelpText extends i$2 {
|
|
|
6989
6982
|
}
|
|
6990
6983
|
}
|
|
6991
6984
|
|
|
6992
|
-
var formkitVersion = '
|
|
6985
|
+
var formkitVersion = '202606252337';
|
|
6993
6986
|
|
|
6994
6987
|
var styleCss$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
6995
6988
|
|
|
@@ -7321,6 +7314,14 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7321
7314
|
reflect: true
|
|
7322
7315
|
},
|
|
7323
7316
|
|
|
7317
|
+
/**
|
|
7318
|
+
* @private
|
|
7319
|
+
*/
|
|
7320
|
+
options: {
|
|
7321
|
+
type: Array,
|
|
7322
|
+
state: true
|
|
7323
|
+
},
|
|
7324
|
+
|
|
7324
7325
|
/**
|
|
7325
7326
|
* Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
|
|
7326
7327
|
* @type {HTMLElement|Array<HTMLElement>}
|
|
@@ -7608,68 +7609,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7608
7609
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
7609
7610
|
}
|
|
7610
7611
|
|
|
7611
|
-
|
|
7612
|
+
// Pass label text to the dropdown bib for accessible dialog naming
|
|
7613
|
+
const labelElement = this.querySelector('span[slot="label"]');
|
|
7614
|
+
if (labelElement) {
|
|
7615
|
+
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
7616
|
+
}
|
|
7612
7617
|
|
|
7613
7618
|
// Exposes the CSS parts from the dropdown for styling
|
|
7614
7619
|
this.dropdown.exposeCssParts();
|
|
7615
7620
|
}
|
|
7616
7621
|
|
|
7617
|
-
/**
|
|
7618
|
-
* Reads the current label slot text and pushes it to the dropdown bib
|
|
7619
|
-
* (for dialog naming) and the menu (for listbox aria-label). Safe to call
|
|
7620
|
-
* before either child has been wired up — each branch self-guards.
|
|
7621
|
-
* @private
|
|
7622
|
-
*/
|
|
7623
|
-
_syncLabelText() {
|
|
7624
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7625
|
-
const text = labelElement ? labelElement.textContent.trim() : '';
|
|
7626
|
-
if (this.dropdown) {
|
|
7627
|
-
this.dropdown.bibDialogLabel = text || undefined;
|
|
7628
|
-
}
|
|
7629
|
-
if (this.menu) {
|
|
7630
|
-
if (text) {
|
|
7631
|
-
this.menu.setAttribute('aria-label', text);
|
|
7632
|
-
} else {
|
|
7633
|
-
this.menu.removeAttribute('aria-label');
|
|
7634
|
-
}
|
|
7635
|
-
}
|
|
7636
|
-
}
|
|
7637
|
-
|
|
7638
|
-
/**
|
|
7639
|
-
* Keeps the dialog/menu accessible names in sync when consumers mutate the
|
|
7640
|
-
* label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
|
|
7641
|
-
* insufficient — it doesn't fire when textContent of an already-assigned
|
|
7642
|
-
* slotted node changes, which is the common case. We scope the observer to
|
|
7643
|
-
* the label node itself (not the whole host subtree) so option-content
|
|
7644
|
-
* mutations don't trigger label re-syncs, and re-target on `slotchange`
|
|
7645
|
-
* when consumers add or replace the label element.
|
|
7646
|
-
* @private
|
|
7647
|
-
*/
|
|
7648
|
-
_observeLabelChanges() {
|
|
7649
|
-
if (this._labelObserver) return;
|
|
7650
|
-
this._labelObserver = new MutationObserver(() => this._syncLabelText());
|
|
7651
|
-
|
|
7652
|
-
const retarget = () => {
|
|
7653
|
-
this._labelObserver.disconnect();
|
|
7654
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7655
|
-
if (labelElement) {
|
|
7656
|
-
this._labelObserver.observe(labelElement, {
|
|
7657
|
-
childList: true,
|
|
7658
|
-
subtree: true,
|
|
7659
|
-
characterData: true
|
|
7660
|
-
});
|
|
7661
|
-
}
|
|
7662
|
-
this._syncLabelText();
|
|
7663
|
-
};
|
|
7664
|
-
|
|
7665
|
-
retarget();
|
|
7666
|
-
|
|
7667
|
-
this._retargetLabelObserver = retarget;
|
|
7668
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
7669
|
-
slot.addEventListener('slotchange', retarget);
|
|
7670
|
-
});
|
|
7671
|
-
}
|
|
7672
|
-
|
|
7673
7622
|
/**
|
|
7674
7623
|
* This will register this element with the browser.
|
|
7675
7624
|
* @param {string} [name="auro-select"] - The name of element that you want to register to.
|
|
@@ -7820,7 +7769,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7820
7769
|
this.updateMenuShapeSize();
|
|
7821
7770
|
this.setMenuValue(this.value);
|
|
7822
7771
|
|
|
7823
|
-
|
|
7772
|
+
// Set accessible name on the menu for screen readers based on the label slot content
|
|
7773
|
+
const labelElement = this.querySelector('[slot="label"]');
|
|
7774
|
+
if (labelElement) {
|
|
7775
|
+
this.menu.setAttribute('aria-label', labelElement.textContent.trim());
|
|
7776
|
+
}
|
|
7824
7777
|
|
|
7825
7778
|
if (this.multiSelect) {
|
|
7826
7779
|
this.menu.multiSelect = this.multiSelect;
|
|
@@ -7832,21 +7785,8 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7832
7785
|
if (typeof this.menu.initItems === 'function') {
|
|
7833
7786
|
this.menu.initItems();
|
|
7834
7787
|
}
|
|
7788
|
+
this.options = this.menu.options;
|
|
7835
7789
|
this.updateOptionPositions();
|
|
7836
|
-
// renderNativeSelect reads this.menu.options, which the parent doesn't
|
|
7837
|
-
// observe — request an update so the hidden native <option> list reflects
|
|
7838
|
-
// the menu's options after initItems populates them.
|
|
7839
|
-
this.requestUpdate();
|
|
7840
|
-
|
|
7841
|
-
// Keep aria-setsize/aria-posinset (and the native <option> list) in sync
|
|
7842
|
-
// when the menu re-initializes its items — e.g., slotchange, async/lazy
|
|
7843
|
-
// loads, value-triggered re-init. Without this, stale set-size is
|
|
7844
|
-
// announced and the native select goes stale after dynamic mutations.
|
|
7845
|
-
this.menu.addEventListener('auroMenu-optionsChange', () => {
|
|
7846
|
-
this.updateOptionPositions();
|
|
7847
|
-
this.requestUpdate();
|
|
7848
|
-
});
|
|
7849
|
-
|
|
7850
7790
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7851
7791
|
|
|
7852
7792
|
this.menu.addEventListener("auroMenu-selectValueFailure", () => {
|
|
@@ -7865,22 +7805,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7865
7805
|
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7866
7806
|
}
|
|
7867
7807
|
|
|
7868
|
-
// Announce the active option for screen readers
|
|
7869
|
-
|
|
7870
|
-
// re-announce, and aria-selected on the active descendant otherwise
|
|
7871
|
-
// conveys state without an explicit utterance.
|
|
7872
|
-
if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
|
|
7808
|
+
// Announce the active option for screen readers
|
|
7809
|
+
if (this.optionActive) {
|
|
7873
7810
|
const optionText = this.optionActive.textContent.trim();
|
|
7874
|
-
const
|
|
7875
|
-
|
|
7876
|
-
announceToScreenReader(this._getAnnouncementRoot(), message);
|
|
7877
|
-
} else {
|
|
7878
|
-
// Typeahead-on-closed fires this event before `show()` flips
|
|
7879
|
-
// isPopoverVisible. Defer so the announcement targets the bib's
|
|
7880
|
-
// live region once the fullscreen <dialog> opens — otherwise it
|
|
7881
|
-
// lands in the host root, which is inert under the active modal.
|
|
7882
|
-
queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
|
|
7883
|
-
}
|
|
7811
|
+
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
7812
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
|
|
7884
7813
|
}
|
|
7885
7814
|
|
|
7886
7815
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -8012,32 +7941,24 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8012
7941
|
|
|
8013
7942
|
this.typeaheadBuffer += key;
|
|
8014
7943
|
|
|
8015
|
-
|
|
8016
|
-
// next item with a name that starts with the string of characters typed").
|
|
8017
|
-
// Only fall back to single-char cycling when the repeated buffer has no
|
|
8018
|
-
// longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
|
|
8019
|
-
// because no option starts with "aa".
|
|
8020
|
-
let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7944
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
8021
7945
|
|
|
8022
|
-
|
|
7946
|
+
let match = null;
|
|
8023
7947
|
if (isRepeatedChar) {
|
|
8024
7948
|
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
8025
7949
|
if (matches.length) {
|
|
8026
7950
|
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
8027
7951
|
match = matches[cycleIndex];
|
|
8028
7952
|
}
|
|
7953
|
+
} else {
|
|
7954
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
8029
7955
|
}
|
|
8030
7956
|
|
|
8031
|
-
// Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
|
|
8032
7957
|
if (match) {
|
|
8033
|
-
// Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
|
|
8034
|
-
// guard short-circuits and skips the firstActive/selected fallback —
|
|
8035
|
-
// otherwise show() synchronously fires the handler, which writes
|
|
8036
|
-
// aria-activedescendant once before we overwrite it.
|
|
8037
|
-
this.menu.updateActiveOption(match);
|
|
8038
7958
|
if (!this.dropdown.isPopoverVisible) {
|
|
8039
7959
|
this.dropdown.show();
|
|
8040
7960
|
}
|
|
7961
|
+
this.menu.updateActiveOption(match);
|
|
8041
7962
|
}
|
|
8042
7963
|
}
|
|
8043
7964
|
|
|
@@ -8154,16 +8075,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8154
8075
|
disconnectedCallback() {
|
|
8155
8076
|
super.disconnectedCallback();
|
|
8156
8077
|
this._clearTypeaheadBuffer();
|
|
8157
|
-
if (this._labelObserver) {
|
|
8158
|
-
this._labelObserver.disconnect();
|
|
8159
|
-
this._labelObserver = null;
|
|
8160
|
-
}
|
|
8161
|
-
if (this._retargetLabelObserver && this.shadowRoot) {
|
|
8162
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
8163
|
-
slot.removeEventListener('slotchange', this._retargetLabelObserver);
|
|
8164
|
-
});
|
|
8165
|
-
this._retargetLabelObserver = null;
|
|
8166
|
-
}
|
|
8167
8078
|
}
|
|
8168
8079
|
|
|
8169
8080
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
@@ -8174,7 +8085,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8174
8085
|
this.configureDropdown();
|
|
8175
8086
|
this.configureMenu();
|
|
8176
8087
|
this.configureSelect();
|
|
8177
|
-
this._observeLabelChanges();
|
|
8178
8088
|
}
|
|
8179
8089
|
|
|
8180
8090
|
setMenuValue(value) {
|
|
@@ -8311,8 +8221,21 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8311
8221
|
if (!selectedOption) return;
|
|
8312
8222
|
const selectedValue = selectedOption.value;
|
|
8313
8223
|
|
|
8314
|
-
if (this.
|
|
8315
|
-
this.value
|
|
8224
|
+
if (this.multiSelect) {
|
|
8225
|
+
const currentArray = this.menu.value || [];
|
|
8226
|
+
|
|
8227
|
+
if (!currentArray.includes(selectedValue)) {
|
|
8228
|
+
this.value = JSON.stringify([
|
|
8229
|
+
...currentArray,
|
|
8230
|
+
selectedValue
|
|
8231
|
+
]);
|
|
8232
|
+
}
|
|
8233
|
+
} else {
|
|
8234
|
+
const currentValue = this.value;
|
|
8235
|
+
|
|
8236
|
+
if (currentValue !== selectedValue) {
|
|
8237
|
+
this.value = selectedValue;
|
|
8238
|
+
}
|
|
8316
8239
|
}
|
|
8317
8240
|
}
|
|
8318
8241
|
|