@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
|
@@ -916,24 +916,19 @@ const selectKeyboardStrategy = {
|
|
|
916
916
|
},
|
|
917
917
|
|
|
918
918
|
End(component, evt, ctx) {
|
|
919
|
+
if (!ctx.isExpanded) {
|
|
920
|
+
return;
|
|
921
|
+
}
|
|
919
922
|
evt.preventDefault();
|
|
920
923
|
evt.stopPropagation();
|
|
921
924
|
// `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
|
|
922
925
|
const lastOption = getEnabledOptions(component.menu).pop();
|
|
923
|
-
if (
|
|
924
|
-
|
|
926
|
+
if (lastOption) {
|
|
927
|
+
component.menu.updateActiveOption(lastOption);
|
|
925
928
|
}
|
|
926
|
-
if (!ctx.isExpanded) {
|
|
927
|
-
component.dropdown.show();
|
|
928
|
-
}
|
|
929
|
-
component.menu.updateActiveOption(lastOption);
|
|
930
929
|
},
|
|
931
930
|
|
|
932
931
|
Enter(component, evt, ctx) {
|
|
933
|
-
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
934
|
-
// which could interpret Enter as a submit. Matches APG select-only combobox
|
|
935
|
-
// and native <select> behavior: Enter opens the listbox when closed, selects
|
|
936
|
-
// the active option when open — it does not submit a parent form.
|
|
937
932
|
evt.preventDefault();
|
|
938
933
|
evt.stopPropagation();
|
|
939
934
|
if (!ctx.isExpanded) {
|
|
@@ -944,16 +939,15 @@ const selectKeyboardStrategy = {
|
|
|
944
939
|
},
|
|
945
940
|
|
|
946
941
|
Home(component, evt, ctx) {
|
|
942
|
+
if (!ctx.isExpanded) {
|
|
943
|
+
return;
|
|
944
|
+
}
|
|
947
945
|
evt.preventDefault();
|
|
948
946
|
evt.stopPropagation();
|
|
949
947
|
const [firstOption] = getEnabledOptions(component.menu);
|
|
950
|
-
if (
|
|
951
|
-
|
|
948
|
+
if (firstOption) {
|
|
949
|
+
component.menu.updateActiveOption(firstOption);
|
|
952
950
|
}
|
|
953
|
-
if (!ctx.isExpanded) {
|
|
954
|
-
component.dropdown.show();
|
|
955
|
-
}
|
|
956
|
-
component.menu.updateActiveOption(firstOption);
|
|
957
951
|
},
|
|
958
952
|
|
|
959
953
|
Tab(component, evt, ctx) {
|
|
@@ -4900,7 +4894,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4900
4894
|
}
|
|
4901
4895
|
};
|
|
4902
4896
|
|
|
4903
|
-
var formkitVersion$1 = '
|
|
4897
|
+
var formkitVersion$1 = '202606252337';
|
|
4904
4898
|
|
|
4905
4899
|
class AuroElement extends LitElement {
|
|
4906
4900
|
static get properties() {
|
|
@@ -6172,7 +6166,6 @@ class AuroDropdown extends AuroElement {
|
|
|
6172
6166
|
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6173
6167
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6174
6168
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6175
|
-
aria-haspopup="${ifDefined(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
|
|
6176
6169
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6177
6170
|
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
6178
6171
|
@focusin="${this.handleFocusin}"
|
|
@@ -6922,7 +6915,7 @@ class AuroHelpText extends LitElement {
|
|
|
6922
6915
|
}
|
|
6923
6916
|
}
|
|
6924
6917
|
|
|
6925
|
-
var formkitVersion = '
|
|
6918
|
+
var formkitVersion = '202606252337';
|
|
6926
6919
|
|
|
6927
6920
|
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
6928
6921
|
|
|
@@ -7254,6 +7247,14 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7254
7247
|
reflect: true
|
|
7255
7248
|
},
|
|
7256
7249
|
|
|
7250
|
+
/**
|
|
7251
|
+
* @private
|
|
7252
|
+
*/
|
|
7253
|
+
options: {
|
|
7254
|
+
type: Array,
|
|
7255
|
+
state: true
|
|
7256
|
+
},
|
|
7257
|
+
|
|
7257
7258
|
/**
|
|
7258
7259
|
* Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
|
|
7259
7260
|
* @type {HTMLElement|Array<HTMLElement>}
|
|
@@ -7541,68 +7542,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7541
7542
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
7542
7543
|
}
|
|
7543
7544
|
|
|
7544
|
-
|
|
7545
|
+
// Pass label text to the dropdown bib for accessible dialog naming
|
|
7546
|
+
const labelElement = this.querySelector('span[slot="label"]');
|
|
7547
|
+
if (labelElement) {
|
|
7548
|
+
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
7549
|
+
}
|
|
7545
7550
|
|
|
7546
7551
|
// Exposes the CSS parts from the dropdown for styling
|
|
7547
7552
|
this.dropdown.exposeCssParts();
|
|
7548
7553
|
}
|
|
7549
7554
|
|
|
7550
|
-
/**
|
|
7551
|
-
* Reads the current label slot text and pushes it to the dropdown bib
|
|
7552
|
-
* (for dialog naming) and the menu (for listbox aria-label). Safe to call
|
|
7553
|
-
* before either child has been wired up — each branch self-guards.
|
|
7554
|
-
* @private
|
|
7555
|
-
*/
|
|
7556
|
-
_syncLabelText() {
|
|
7557
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7558
|
-
const text = labelElement ? labelElement.textContent.trim() : '';
|
|
7559
|
-
if (this.dropdown) {
|
|
7560
|
-
this.dropdown.bibDialogLabel = text || undefined;
|
|
7561
|
-
}
|
|
7562
|
-
if (this.menu) {
|
|
7563
|
-
if (text) {
|
|
7564
|
-
this.menu.setAttribute('aria-label', text);
|
|
7565
|
-
} else {
|
|
7566
|
-
this.menu.removeAttribute('aria-label');
|
|
7567
|
-
}
|
|
7568
|
-
}
|
|
7569
|
-
}
|
|
7570
|
-
|
|
7571
|
-
/**
|
|
7572
|
-
* Keeps the dialog/menu accessible names in sync when consumers mutate the
|
|
7573
|
-
* label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
|
|
7574
|
-
* insufficient — it doesn't fire when textContent of an already-assigned
|
|
7575
|
-
* slotted node changes, which is the common case. We scope the observer to
|
|
7576
|
-
* the label node itself (not the whole host subtree) so option-content
|
|
7577
|
-
* mutations don't trigger label re-syncs, and re-target on `slotchange`
|
|
7578
|
-
* when consumers add or replace the label element.
|
|
7579
|
-
* @private
|
|
7580
|
-
*/
|
|
7581
|
-
_observeLabelChanges() {
|
|
7582
|
-
if (this._labelObserver) return;
|
|
7583
|
-
this._labelObserver = new MutationObserver(() => this._syncLabelText());
|
|
7584
|
-
|
|
7585
|
-
const retarget = () => {
|
|
7586
|
-
this._labelObserver.disconnect();
|
|
7587
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7588
|
-
if (labelElement) {
|
|
7589
|
-
this._labelObserver.observe(labelElement, {
|
|
7590
|
-
childList: true,
|
|
7591
|
-
subtree: true,
|
|
7592
|
-
characterData: true
|
|
7593
|
-
});
|
|
7594
|
-
}
|
|
7595
|
-
this._syncLabelText();
|
|
7596
|
-
};
|
|
7597
|
-
|
|
7598
|
-
retarget();
|
|
7599
|
-
|
|
7600
|
-
this._retargetLabelObserver = retarget;
|
|
7601
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
7602
|
-
slot.addEventListener('slotchange', retarget);
|
|
7603
|
-
});
|
|
7604
|
-
}
|
|
7605
|
-
|
|
7606
7555
|
/**
|
|
7607
7556
|
* This will register this element with the browser.
|
|
7608
7557
|
* @param {string} [name="auro-select"] - The name of element that you want to register to.
|
|
@@ -7753,7 +7702,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7753
7702
|
this.updateMenuShapeSize();
|
|
7754
7703
|
this.setMenuValue(this.value);
|
|
7755
7704
|
|
|
7756
|
-
|
|
7705
|
+
// Set accessible name on the menu for screen readers based on the label slot content
|
|
7706
|
+
const labelElement = this.querySelector('[slot="label"]');
|
|
7707
|
+
if (labelElement) {
|
|
7708
|
+
this.menu.setAttribute('aria-label', labelElement.textContent.trim());
|
|
7709
|
+
}
|
|
7757
7710
|
|
|
7758
7711
|
if (this.multiSelect) {
|
|
7759
7712
|
this.menu.multiSelect = this.multiSelect;
|
|
@@ -7765,21 +7718,8 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7765
7718
|
if (typeof this.menu.initItems === 'function') {
|
|
7766
7719
|
this.menu.initItems();
|
|
7767
7720
|
}
|
|
7721
|
+
this.options = this.menu.options;
|
|
7768
7722
|
this.updateOptionPositions();
|
|
7769
|
-
// renderNativeSelect reads this.menu.options, which the parent doesn't
|
|
7770
|
-
// observe — request an update so the hidden native <option> list reflects
|
|
7771
|
-
// the menu's options after initItems populates them.
|
|
7772
|
-
this.requestUpdate();
|
|
7773
|
-
|
|
7774
|
-
// Keep aria-setsize/aria-posinset (and the native <option> list) in sync
|
|
7775
|
-
// when the menu re-initializes its items — e.g., slotchange, async/lazy
|
|
7776
|
-
// loads, value-triggered re-init. Without this, stale set-size is
|
|
7777
|
-
// announced and the native select goes stale after dynamic mutations.
|
|
7778
|
-
this.menu.addEventListener('auroMenu-optionsChange', () => {
|
|
7779
|
-
this.updateOptionPositions();
|
|
7780
|
-
this.requestUpdate();
|
|
7781
|
-
});
|
|
7782
|
-
|
|
7783
7723
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7784
7724
|
|
|
7785
7725
|
this.menu.addEventListener("auroMenu-selectValueFailure", () => {
|
|
@@ -7798,22 +7738,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7798
7738
|
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7799
7739
|
}
|
|
7800
7740
|
|
|
7801
|
-
// Announce the active option for screen readers
|
|
7802
|
-
|
|
7803
|
-
// re-announce, and aria-selected on the active descendant otherwise
|
|
7804
|
-
// conveys state without an explicit utterance.
|
|
7805
|
-
if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
|
|
7741
|
+
// Announce the active option for screen readers
|
|
7742
|
+
if (this.optionActive) {
|
|
7806
7743
|
const optionText = this.optionActive.textContent.trim();
|
|
7807
|
-
const
|
|
7808
|
-
|
|
7809
|
-
announceToScreenReader(this._getAnnouncementRoot(), message);
|
|
7810
|
-
} else {
|
|
7811
|
-
// Typeahead-on-closed fires this event before `show()` flips
|
|
7812
|
-
// isPopoverVisible. Defer so the announcement targets the bib's
|
|
7813
|
-
// live region once the fullscreen <dialog> opens — otherwise it
|
|
7814
|
-
// lands in the host root, which is inert under the active modal.
|
|
7815
|
-
queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
|
|
7816
|
-
}
|
|
7744
|
+
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
7745
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
|
|
7817
7746
|
}
|
|
7818
7747
|
|
|
7819
7748
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -7945,32 +7874,24 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7945
7874
|
|
|
7946
7875
|
this.typeaheadBuffer += key;
|
|
7947
7876
|
|
|
7948
|
-
|
|
7949
|
-
// next item with a name that starts with the string of characters typed").
|
|
7950
|
-
// Only fall back to single-char cycling when the repeated buffer has no
|
|
7951
|
-
// longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
|
|
7952
|
-
// because no option starts with "aa".
|
|
7953
|
-
let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7877
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
7954
7878
|
|
|
7955
|
-
|
|
7879
|
+
let match = null;
|
|
7956
7880
|
if (isRepeatedChar) {
|
|
7957
7881
|
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
7958
7882
|
if (matches.length) {
|
|
7959
7883
|
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
7960
7884
|
match = matches[cycleIndex];
|
|
7961
7885
|
}
|
|
7886
|
+
} else {
|
|
7887
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7962
7888
|
}
|
|
7963
7889
|
|
|
7964
|
-
// Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
|
|
7965
7890
|
if (match) {
|
|
7966
|
-
// Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
|
|
7967
|
-
// guard short-circuits and skips the firstActive/selected fallback —
|
|
7968
|
-
// otherwise show() synchronously fires the handler, which writes
|
|
7969
|
-
// aria-activedescendant once before we overwrite it.
|
|
7970
|
-
this.menu.updateActiveOption(match);
|
|
7971
7891
|
if (!this.dropdown.isPopoverVisible) {
|
|
7972
7892
|
this.dropdown.show();
|
|
7973
7893
|
}
|
|
7894
|
+
this.menu.updateActiveOption(match);
|
|
7974
7895
|
}
|
|
7975
7896
|
}
|
|
7976
7897
|
|
|
@@ -8087,16 +8008,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8087
8008
|
disconnectedCallback() {
|
|
8088
8009
|
super.disconnectedCallback();
|
|
8089
8010
|
this._clearTypeaheadBuffer();
|
|
8090
|
-
if (this._labelObserver) {
|
|
8091
|
-
this._labelObserver.disconnect();
|
|
8092
|
-
this._labelObserver = null;
|
|
8093
|
-
}
|
|
8094
|
-
if (this._retargetLabelObserver && this.shadowRoot) {
|
|
8095
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
8096
|
-
slot.removeEventListener('slotchange', this._retargetLabelObserver);
|
|
8097
|
-
});
|
|
8098
|
-
this._retargetLabelObserver = null;
|
|
8099
|
-
}
|
|
8100
8011
|
}
|
|
8101
8012
|
|
|
8102
8013
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
@@ -8107,7 +8018,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8107
8018
|
this.configureDropdown();
|
|
8108
8019
|
this.configureMenu();
|
|
8109
8020
|
this.configureSelect();
|
|
8110
|
-
this._observeLabelChanges();
|
|
8111
8021
|
}
|
|
8112
8022
|
|
|
8113
8023
|
setMenuValue(value) {
|
|
@@ -8244,8 +8154,21 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8244
8154
|
if (!selectedOption) return;
|
|
8245
8155
|
const selectedValue = selectedOption.value;
|
|
8246
8156
|
|
|
8247
|
-
if (this.
|
|
8248
|
-
this.value
|
|
8157
|
+
if (this.multiSelect) {
|
|
8158
|
+
const currentArray = this.menu.value || [];
|
|
8159
|
+
|
|
8160
|
+
if (!currentArray.includes(selectedValue)) {
|
|
8161
|
+
this.value = JSON.stringify([
|
|
8162
|
+
...currentArray,
|
|
8163
|
+
selectedValue
|
|
8164
|
+
]);
|
|
8165
|
+
}
|
|
8166
|
+
} else {
|
|
8167
|
+
const currentValue = this.value;
|
|
8168
|
+
|
|
8169
|
+
if (currentValue !== selectedValue) {
|
|
8170
|
+
this.value = selectedValue;
|
|
8171
|
+
}
|
|
8249
8172
|
}
|
|
8250
8173
|
}
|
|
8251
8174
|
|