@aurodesignsystem-dev/auro-formkit 0.0.0-pr1514.12 → 0.0.0-pr1514.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/bibtemplate/dist/index.js +1 -1
- package/components/bibtemplate/dist/registered.js +1 -1
- package/components/checkbox/demo/customize.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 +97 -121
- package/components/combobox/demo/getting-started.min.js +97 -121
- package/components/combobox/demo/index.min.js +97 -121
- package/components/combobox/dist/index.js +96 -120
- package/components/combobox/dist/registered.js +96 -120
- package/components/counter/demo/customize.min.js +3 -11
- package/components/counter/demo/index.min.js +3 -11
- package/components/counter/dist/index.js +3 -11
- package/components/counter/dist/registered.js +3 -11
- package/components/datepicker/demo/customize.min.js +137 -271
- package/components/datepicker/demo/index.min.js +137 -271
- package/components/datepicker/dist/auro-calendar-cell.d.ts +0 -6
- package/components/datepicker/dist/auro-calendar.d.ts +7 -26
- package/components/datepicker/dist/index.js +137 -271
- package/components/datepicker/dist/registered.js +137 -271
- 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 +396 -709
- package/components/form/demo/getting-started.min.js +396 -709
- package/components/form/demo/index.min.js +396 -709
- package/components/form/demo/registerDemoDeps.min.js +396 -709
- package/components/input/demo/api.md +5 -5
- package/components/input/demo/customize.md +8 -8
- package/components/input/demo/customize.min.js +93 -116
- package/components/input/demo/getting-started.min.js +93 -116
- package/components/input/demo/index.min.js +93 -116
- package/components/input/dist/base-input.d.ts +44 -33
- package/components/input/dist/index.js +94 -129
- package/components/input/dist/registered.js +93 -116
- 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.md +0 -86
- package/components/select/demo/customize.min.js +63 -187
- package/components/select/demo/getting-started.min.js +110 -189
- package/components/select/demo/index.min.js +63 -187
- 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 +63 -187
- package/components/select/dist/registered.js +63 -187
- package/custom-elements.json +1791 -1997
- package/package.json +1 -1
|
@@ -916,28 +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
|
-
|
|
925
|
-
}
|
|
926
|
-
// Pre-stash before show() so the auroDropdown-toggled handler's
|
|
927
|
-
// `!optionActive` guard short-circuits the firstActive/selected fallback —
|
|
928
|
-
// otherwise show() synchronously fires the handler and writes
|
|
929
|
-
// aria-activedescendant once before we overwrite it.
|
|
930
|
-
component.menu.updateActiveOption(lastOption);
|
|
931
|
-
if (!ctx.isExpanded) {
|
|
932
|
-
component.dropdown.show();
|
|
926
|
+
if (lastOption) {
|
|
927
|
+
component.menu.updateActiveOption(lastOption);
|
|
933
928
|
}
|
|
934
929
|
},
|
|
935
930
|
|
|
936
931
|
Enter(component, evt, ctx) {
|
|
937
|
-
// Prevent the keypress from bubbling to parent containers (e.g., forms)
|
|
938
|
-
// which could interpret Enter as a submit. Matches APG select-only combobox
|
|
939
|
-
// and native <select> behavior: Enter opens the listbox when closed, selects
|
|
940
|
-
// the active option when open — it does not submit a parent form.
|
|
941
932
|
evt.preventDefault();
|
|
942
933
|
evt.stopPropagation();
|
|
943
934
|
if (!ctx.isExpanded) {
|
|
@@ -948,16 +939,14 @@ const selectKeyboardStrategy = {
|
|
|
948
939
|
},
|
|
949
940
|
|
|
950
941
|
Home(component, evt, ctx) {
|
|
942
|
+
if (!ctx.isExpanded) {
|
|
943
|
+
return;
|
|
944
|
+
}
|
|
951
945
|
evt.preventDefault();
|
|
952
946
|
evt.stopPropagation();
|
|
953
947
|
const [firstOption] = getEnabledOptions(component.menu);
|
|
954
|
-
if (
|
|
955
|
-
|
|
956
|
-
}
|
|
957
|
-
// See End() for why this must run before show().
|
|
958
|
-
component.menu.updateActiveOption(firstOption);
|
|
959
|
-
if (!ctx.isExpanded) {
|
|
960
|
-
component.dropdown.show();
|
|
948
|
+
if (firstOption) {
|
|
949
|
+
component.menu.updateActiveOption(firstOption);
|
|
961
950
|
}
|
|
962
951
|
},
|
|
963
952
|
|
|
@@ -4905,7 +4894,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4905
4894
|
}
|
|
4906
4895
|
};
|
|
4907
4896
|
|
|
4908
|
-
var formkitVersion$1 = '
|
|
4897
|
+
var formkitVersion$1 = '202606291652';
|
|
4909
4898
|
|
|
4910
4899
|
class AuroElement extends LitElement {
|
|
4911
4900
|
static get properties() {
|
|
@@ -6177,7 +6166,6 @@ class AuroDropdown extends AuroElement {
|
|
|
6177
6166
|
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6178
6167
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6179
6168
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6180
|
-
aria-haspopup="${ifDefined(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
|
|
6181
6169
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6182
6170
|
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
6183
6171
|
@focusin="${this.handleFocusin}"
|
|
@@ -6304,7 +6292,7 @@ class AuroDropdown extends AuroElement {
|
|
|
6304
6292
|
|
|
6305
6293
|
var colorCss$1 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
|
|
6306
6294
|
|
|
6307
|
-
var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
|
|
6295
|
+
var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
|
|
6308
6296
|
|
|
6309
6297
|
var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
|
|
6310
6298
|
|
|
@@ -6927,7 +6915,7 @@ class AuroHelpText extends LitElement {
|
|
|
6927
6915
|
}
|
|
6928
6916
|
}
|
|
6929
6917
|
|
|
6930
|
-
var formkitVersion = '
|
|
6918
|
+
var formkitVersion = '202606291652';
|
|
6931
6919
|
|
|
6932
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}`;
|
|
6933
6921
|
|
|
@@ -7259,6 +7247,14 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7259
7247
|
reflect: true
|
|
7260
7248
|
},
|
|
7261
7249
|
|
|
7250
|
+
/**
|
|
7251
|
+
* @private
|
|
7252
|
+
*/
|
|
7253
|
+
options: {
|
|
7254
|
+
type: Array,
|
|
7255
|
+
state: true
|
|
7256
|
+
},
|
|
7257
|
+
|
|
7262
7258
|
/**
|
|
7263
7259
|
* Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
|
|
7264
7260
|
* @type {HTMLElement|Array<HTMLElement>}
|
|
@@ -7546,68 +7542,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7546
7542
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
7547
7543
|
}
|
|
7548
7544
|
|
|
7549
|
-
|
|
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
|
+
}
|
|
7550
7550
|
|
|
7551
7551
|
// Exposes the CSS parts from the dropdown for styling
|
|
7552
7552
|
this.dropdown.exposeCssParts();
|
|
7553
7553
|
}
|
|
7554
7554
|
|
|
7555
|
-
/**
|
|
7556
|
-
* Reads the current label slot text and pushes it to the dropdown bib
|
|
7557
|
-
* (for dialog naming) and the menu (for listbox aria-label). Safe to call
|
|
7558
|
-
* before either child has been wired up — each branch self-guards.
|
|
7559
|
-
* @private
|
|
7560
|
-
*/
|
|
7561
|
-
_syncLabelText() {
|
|
7562
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7563
|
-
const text = labelElement ? labelElement.textContent.trim() : '';
|
|
7564
|
-
if (this.dropdown) {
|
|
7565
|
-
this.dropdown.bibDialogLabel = text || undefined;
|
|
7566
|
-
}
|
|
7567
|
-
if (this.menu) {
|
|
7568
|
-
if (text) {
|
|
7569
|
-
this.menu.setAttribute('aria-label', text);
|
|
7570
|
-
} else {
|
|
7571
|
-
this.menu.removeAttribute('aria-label');
|
|
7572
|
-
}
|
|
7573
|
-
}
|
|
7574
|
-
}
|
|
7575
|
-
|
|
7576
|
-
/**
|
|
7577
|
-
* Keeps the dialog/menu accessible names in sync when consumers mutate the
|
|
7578
|
-
* label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
|
|
7579
|
-
* insufficient — it doesn't fire when textContent of an already-assigned
|
|
7580
|
-
* slotted node changes, which is the common case. We scope the observer to
|
|
7581
|
-
* the label node itself (not the whole host subtree) so option-content
|
|
7582
|
-
* mutations don't trigger label re-syncs, and re-target on `slotchange`
|
|
7583
|
-
* when consumers add or replace the label element.
|
|
7584
|
-
* @private
|
|
7585
|
-
*/
|
|
7586
|
-
_observeLabelChanges() {
|
|
7587
|
-
if (this._labelObserver) return;
|
|
7588
|
-
this._labelObserver = new MutationObserver(() => this._syncLabelText());
|
|
7589
|
-
|
|
7590
|
-
const retarget = () => {
|
|
7591
|
-
this._labelObserver.disconnect();
|
|
7592
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7593
|
-
if (labelElement) {
|
|
7594
|
-
this._labelObserver.observe(labelElement, {
|
|
7595
|
-
childList: true,
|
|
7596
|
-
subtree: true,
|
|
7597
|
-
characterData: true
|
|
7598
|
-
});
|
|
7599
|
-
}
|
|
7600
|
-
this._syncLabelText();
|
|
7601
|
-
};
|
|
7602
|
-
|
|
7603
|
-
retarget();
|
|
7604
|
-
|
|
7605
|
-
this._retargetLabelObserver = retarget;
|
|
7606
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
7607
|
-
slot.addEventListener('slotchange', retarget);
|
|
7608
|
-
});
|
|
7609
|
-
}
|
|
7610
|
-
|
|
7611
7555
|
/**
|
|
7612
7556
|
* This will register this element with the browser.
|
|
7613
7557
|
* @param {string} [name="auro-select"] - The name of element that you want to register to.
|
|
@@ -7758,7 +7702,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7758
7702
|
this.updateMenuShapeSize();
|
|
7759
7703
|
this.setMenuValue(this.value);
|
|
7760
7704
|
|
|
7761
|
-
|
|
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
|
+
}
|
|
7762
7710
|
|
|
7763
7711
|
if (this.multiSelect) {
|
|
7764
7712
|
this.menu.multiSelect = this.multiSelect;
|
|
@@ -7770,21 +7718,8 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7770
7718
|
if (typeof this.menu.initItems === 'function') {
|
|
7771
7719
|
this.menu.initItems();
|
|
7772
7720
|
}
|
|
7721
|
+
this.options = this.menu.options;
|
|
7773
7722
|
this.updateOptionPositions();
|
|
7774
|
-
// renderNativeSelect reads this.menu.options, which the parent doesn't
|
|
7775
|
-
// observe — request an update so the hidden native <option> list reflects
|
|
7776
|
-
// the menu's options after initItems populates them.
|
|
7777
|
-
this.requestUpdate();
|
|
7778
|
-
|
|
7779
|
-
// Keep aria-setsize/aria-posinset (and the native <option> list) in sync
|
|
7780
|
-
// when the menu re-initializes its items — e.g., slotchange, async/lazy
|
|
7781
|
-
// loads, value-triggered re-init. Without this, stale set-size is
|
|
7782
|
-
// announced and the native select goes stale after dynamic mutations.
|
|
7783
|
-
this.menu.addEventListener('auroMenu-optionsChange', () => {
|
|
7784
|
-
this.updateOptionPositions();
|
|
7785
|
-
this.requestUpdate();
|
|
7786
|
-
});
|
|
7787
|
-
|
|
7788
7723
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7789
7724
|
|
|
7790
7725
|
this.menu.addEventListener("auroMenu-selectValueFailure", () => {
|
|
@@ -7803,26 +7738,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7803
7738
|
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7804
7739
|
}
|
|
7805
7740
|
|
|
7806
|
-
//
|
|
7807
|
-
|
|
7808
|
-
// navigation back to the selection, or click in multiSelect — rely on
|
|
7809
|
-
// aria-activedescendant + aria-selected="true" to convey state per the
|
|
7810
|
-
// WAI-ARIA listbox pattern. This is intentional, not limited to the
|
|
7811
|
-
// initial activation on open: it also prevents a duplicate "X, selected"
|
|
7812
|
-
// when Enter on the active+selected option re-fires
|
|
7813
|
-
// auroMenu-selectedOption (see 03b289e39).
|
|
7814
|
-
if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
|
|
7741
|
+
// Announce the active option for screen readers
|
|
7742
|
+
if (this.optionActive) {
|
|
7815
7743
|
const optionText = this.optionActive.textContent.trim();
|
|
7816
|
-
const
|
|
7817
|
-
|
|
7818
|
-
announceToScreenReader(this._getAnnouncementRoot(), message);
|
|
7819
|
-
} else {
|
|
7820
|
-
// Typeahead-on-closed fires this event before `show()` flips
|
|
7821
|
-
// isPopoverVisible. Defer so the announcement targets the bib's
|
|
7822
|
-
// live region once the fullscreen <dialog> opens — otherwise it
|
|
7823
|
-
// lands in the host root, which is inert under the active modal.
|
|
7824
|
-
queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
|
|
7825
|
-
}
|
|
7744
|
+
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
7745
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
|
|
7826
7746
|
}
|
|
7827
7747
|
|
|
7828
7748
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -7831,7 +7751,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7831
7751
|
});
|
|
7832
7752
|
|
|
7833
7753
|
this.menu.addEventListener('auroMenu-selectedOption', () => {
|
|
7834
|
-
const previousSelected = this.optionSelected;
|
|
7835
7754
|
|
|
7836
7755
|
// Update the displayed value
|
|
7837
7756
|
this.updateDisplayedValue();
|
|
@@ -7851,32 +7770,13 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7851
7770
|
this.dropdown.trigger.focus();
|
|
7852
7771
|
}
|
|
7853
7772
|
|
|
7854
|
-
//
|
|
7855
|
-
//
|
|
7856
|
-
|
|
7857
|
-
|
|
7858
|
-
|
|
7859
|
-
|
|
7860
|
-
|
|
7861
|
-
const removed = prev.find((opt) => !nextSelected.includes(opt));
|
|
7862
|
-
const added = nextSelected.find((opt) => !prev.includes(opt));
|
|
7863
|
-
if (removed) {
|
|
7864
|
-
announcement = `${removed.textContent.trim()}, not selected`;
|
|
7865
|
-
} else if (added) {
|
|
7866
|
-
announcement = `${added.textContent.trim()}, selected`;
|
|
7867
|
-
}
|
|
7868
|
-
} else {
|
|
7869
|
-
announcement = `${this.menu.currentLabel}, selected`;
|
|
7870
|
-
}
|
|
7871
|
-
|
|
7872
|
-
// Delay so the utterance isn't overridden by VoiceOver's "collapsed"
|
|
7873
|
-
// announcement from aria-expanded when the dropdown closes.
|
|
7874
|
-
if (announcement) {
|
|
7875
|
-
const announcementDelay = 300;
|
|
7876
|
-
setTimeout(() => {
|
|
7877
|
-
announceToScreenReader(this._getAnnouncementRoot(), announcement);
|
|
7878
|
-
}, announcementDelay);
|
|
7879
|
-
}
|
|
7773
|
+
// Announce the selection after the dropdown closes so it isn't
|
|
7774
|
+
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
7775
|
+
const selectedValue = this.menu.currentLabel;
|
|
7776
|
+
const announcementDelay = 300;
|
|
7777
|
+
setTimeout(() => {
|
|
7778
|
+
announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
|
|
7779
|
+
}, announcementDelay);
|
|
7880
7780
|
});
|
|
7881
7781
|
}
|
|
7882
7782
|
|
|
@@ -7974,32 +7874,24 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7974
7874
|
|
|
7975
7875
|
this.typeaheadBuffer += key;
|
|
7976
7876
|
|
|
7977
|
-
|
|
7978
|
-
// next item with a name that starts with the string of characters typed").
|
|
7979
|
-
// Only fall back to single-char cycling when the repeated buffer has no
|
|
7980
|
-
// longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
|
|
7981
|
-
// because no option starts with "aa".
|
|
7982
|
-
let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7877
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
7983
7878
|
|
|
7984
|
-
|
|
7879
|
+
let match = null;
|
|
7985
7880
|
if (isRepeatedChar) {
|
|
7986
7881
|
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
7987
7882
|
if (matches.length) {
|
|
7988
7883
|
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
7989
7884
|
match = matches[cycleIndex];
|
|
7990
7885
|
}
|
|
7886
|
+
} else {
|
|
7887
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7991
7888
|
}
|
|
7992
7889
|
|
|
7993
|
-
// Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
|
|
7994
7890
|
if (match) {
|
|
7995
|
-
// Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
|
|
7996
|
-
// guard short-circuits and skips the firstActive/selected fallback —
|
|
7997
|
-
// otherwise show() synchronously fires the handler, which writes
|
|
7998
|
-
// aria-activedescendant once before we overwrite it.
|
|
7999
|
-
this.menu.updateActiveOption(match);
|
|
8000
7891
|
if (!this.dropdown.isPopoverVisible) {
|
|
8001
7892
|
this.dropdown.show();
|
|
8002
7893
|
}
|
|
7894
|
+
this.menu.updateActiveOption(match);
|
|
8003
7895
|
}
|
|
8004
7896
|
}
|
|
8005
7897
|
|
|
@@ -8116,28 +8008,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8116
8008
|
disconnectedCallback() {
|
|
8117
8009
|
super.disconnectedCallback();
|
|
8118
8010
|
this._clearTypeaheadBuffer();
|
|
8119
|
-
if (this._labelObserver) {
|
|
8120
|
-
this._labelObserver.disconnect();
|
|
8121
|
-
this._labelObserver = null;
|
|
8122
|
-
}
|
|
8123
|
-
if (this._retargetLabelObserver && this.shadowRoot) {
|
|
8124
|
-
this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
|
|
8125
|
-
slot.removeEventListener('slotchange', this._retargetLabelObserver);
|
|
8126
|
-
});
|
|
8127
|
-
this._retargetLabelObserver = null;
|
|
8128
|
-
}
|
|
8129
|
-
}
|
|
8130
|
-
|
|
8131
|
-
connectedCallback() {
|
|
8132
|
-
super.connectedCallback();
|
|
8133
|
-
// Regression guard: firstUpdated() fires once per instance, so the label
|
|
8134
|
-
// observer setup it triggers does NOT re-run on reconnect. After a
|
|
8135
|
-
// disconnect+reconnect (reparent, SPA route swap), runtime label mutations
|
|
8136
|
-
// would silently stop syncing menu aria-label / dropdown.bibDialogLabel
|
|
8137
|
-
// unless we re-wire the observer here.
|
|
8138
|
-
if (this.hasUpdated) {
|
|
8139
|
-
this._observeLabelChanges();
|
|
8140
|
-
}
|
|
8141
8011
|
}
|
|
8142
8012
|
|
|
8143
8013
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
@@ -8148,7 +8018,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8148
8018
|
this.configureDropdown();
|
|
8149
8019
|
this.configureMenu();
|
|
8150
8020
|
this.configureSelect();
|
|
8151
|
-
this._observeLabelChanges();
|
|
8152
8021
|
}
|
|
8153
8022
|
|
|
8154
8023
|
setMenuValue(value) {
|
|
@@ -8281,18 +8150,25 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8281
8150
|
* @private
|
|
8282
8151
|
*/
|
|
8283
8152
|
_handleNativeSelectChange(event) {
|
|
8284
|
-
// Hidden native <select> has no `multiple` attribute, so any change it fires
|
|
8285
|
-
// is a single raw value — applying it in multiSelect mode would collapse the
|
|
8286
|
-
// JSON-array `value` shape. Bfcache/autofill can reach this on a name-bearing
|
|
8287
|
-
// form control even with aria-hidden/tabindex=-1.
|
|
8288
|
-
if (this.multiSelect) return;
|
|
8289
|
-
|
|
8290
8153
|
const selectedOption = event.target.options[event.target.selectedIndex];
|
|
8291
8154
|
if (!selectedOption) return;
|
|
8292
8155
|
const selectedValue = selectedOption.value;
|
|
8293
8156
|
|
|
8294
|
-
if (this.
|
|
8295
|
-
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
|
+
}
|
|
8296
8172
|
}
|
|
8297
8173
|
}
|
|
8298
8174
|
|