@aurodesignsystem-dev/auro-formkit 0.0.0-pr1510.2 → 0.0.0-pr1511.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.js +22 -0
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/demo-support.js +1 -0
- package/components/checkbox/demo/getting-started.js +22 -0
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.js +8 -0
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/styles.scss +1 -0
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.js +24 -0
- package/components/combobox/demo/customize.min.js +4 -3
- package/components/combobox/demo/demo-support.js +1 -0
- package/components/combobox/demo/getting-started.js +21 -0
- package/components/combobox/demo/getting-started.min.js +4 -3
- package/components/combobox/demo/index.js +23 -0
- package/components/combobox/demo/index.min.js +4 -3
- package/components/combobox/demo/styles.scss +1 -0
- package/components/combobox/dist/index.js +4 -3
- package/components/combobox/dist/registered.js +4 -3
- package/components/counter/demo/customize.js +21 -0
- package/components/counter/demo/customize.min.js +3 -2
- package/components/counter/demo/demo-support.js +1 -0
- package/components/counter/demo/index.js +21 -0
- package/components/counter/demo/index.min.js +3 -2
- package/components/counter/demo/styles.scss +1 -0
- package/components/counter/dist/index.js +3 -2
- package/components/counter/dist/registered.js +3 -2
- package/components/datepicker/demo/accessibility.md +1 -2
- package/components/datepicker/demo/api.md +62 -63
- package/components/datepicker/demo/customize.js +17 -0
- package/components/datepicker/demo/customize.md +1 -12
- package/components/datepicker/demo/customize.min.js +207 -601
- package/components/datepicker/demo/demo-support.js +1 -0
- package/components/datepicker/demo/index.js +23 -0
- package/components/datepicker/demo/index.min.js +207 -601
- package/components/datepicker/demo/styles.scss +1 -0
- package/components/datepicker/dist/index.js +207 -601
- package/components/datepicker/dist/registered.js +207 -601
- package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +3 -14
- package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +6 -90
- package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +5 -78
- package/components/dropdown/demo/customize.js +9 -0
- package/components/dropdown/demo/customize.min.js +2 -1
- package/components/dropdown/demo/demo-support.js +1 -0
- package/components/dropdown/demo/getting-started.js +9 -0
- package/components/dropdown/demo/getting-started.min.js +2 -1
- package/components/dropdown/demo/index.js +16 -0
- package/components/dropdown/demo/index.min.js +2 -1
- package/components/dropdown/demo/styles.scss +1 -0
- package/components/dropdown/dist/index.js +2 -1
- package/components/dropdown/dist/registered.js +2 -1
- package/components/form/demo/customize.js +28 -0
- package/components/form/demo/customize.min.js +355 -670
- package/components/form/demo/demo-support.js +1 -0
- package/components/form/demo/getting-started.js +9 -0
- package/components/form/demo/getting-started.min.js +355 -670
- package/components/form/demo/index.js +5 -0
- package/components/form/demo/index.min.js +355 -670
- package/components/form/demo/registerDemoDeps.js +23 -0
- package/components/form/demo/registerDemoDeps.min.js +355 -670
- package/components/form/demo/styles.scss +1 -0
- package/components/input/demo/customize.js +25 -0
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/demo-support.js +1 -0
- package/components/input/demo/getting-started.js +8 -0
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.js +8 -0
- package/components/input/demo/index.min.js +1 -1
- package/components/input/demo/styles.css +974 -0
- package/components/input/demo/styles.scss +1 -0
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/demo-support.js +1 -0
- package/components/menu/demo/index.js +25 -0
- package/components/menu/demo/styles.scss +1 -0
- package/components/radio/demo/customize.js +22 -0
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/demo-support.js +1 -0
- package/components/radio/demo/getting-started.js +24 -0
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.js +8 -0
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/styles.scss +1 -0
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/customize.js +11 -0
- package/components/select/demo/customize.min.js +132 -55
- package/components/select/demo/demo-support.js +1 -0
- package/components/select/demo/getting-started.js +26 -0
- package/components/select/demo/getting-started.min.js +132 -55
- package/components/select/demo/index.js +11 -0
- package/components/select/demo/index.min.js +132 -55
- package/components/select/demo/keyboard-behavior.md +18 -4
- package/components/select/demo/styles.scss +1 -0
- package/components/select/dist/auro-select.d.ts +20 -8
- package/components/select/dist/index.js +132 -55
- package/components/select/dist/registered.js +132 -55
- package/custom-elements.json +25 -311
- package/package.json +2 -6
- package/components/datepicker/dist/blackoutUtils.d.ts +0 -43
- /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
- /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
- /package/components/datepicker/dist/{iconVersion.d.ts → src/iconVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
- /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
- /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
- /package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +0 -0
- /package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +0 -0
- /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
- /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +0 -0
|
@@ -916,19 +916,24 @@ const selectKeyboardStrategy = {
|
|
|
916
916
|
},
|
|
917
917
|
|
|
918
918
|
End(component, evt, ctx) {
|
|
919
|
-
if (!ctx.isExpanded) {
|
|
920
|
-
return;
|
|
921
|
-
}
|
|
922
919
|
evt.preventDefault();
|
|
923
920
|
evt.stopPropagation();
|
|
924
921
|
// `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
|
|
925
922
|
const lastOption = getEnabledOptions(component.menu).pop();
|
|
926
|
-
if (lastOption) {
|
|
927
|
-
|
|
923
|
+
if (!lastOption) {
|
|
924
|
+
return;
|
|
928
925
|
}
|
|
926
|
+
if (!ctx.isExpanded) {
|
|
927
|
+
component.dropdown.show();
|
|
928
|
+
}
|
|
929
|
+
component.menu.updateActiveOption(lastOption);
|
|
929
930
|
},
|
|
930
931
|
|
|
931
932
|
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.
|
|
932
937
|
evt.preventDefault();
|
|
933
938
|
evt.stopPropagation();
|
|
934
939
|
if (!ctx.isExpanded) {
|
|
@@ -939,15 +944,16 @@ const selectKeyboardStrategy = {
|
|
|
939
944
|
},
|
|
940
945
|
|
|
941
946
|
Home(component, evt, ctx) {
|
|
942
|
-
if (!ctx.isExpanded) {
|
|
943
|
-
return;
|
|
944
|
-
}
|
|
945
947
|
evt.preventDefault();
|
|
946
948
|
evt.stopPropagation();
|
|
947
949
|
const [firstOption] = getEnabledOptions(component.menu);
|
|
948
|
-
if (firstOption) {
|
|
949
|
-
|
|
950
|
+
if (!firstOption) {
|
|
951
|
+
return;
|
|
950
952
|
}
|
|
953
|
+
if (!ctx.isExpanded) {
|
|
954
|
+
component.dropdown.show();
|
|
955
|
+
}
|
|
956
|
+
component.menu.updateActiveOption(firstOption);
|
|
951
957
|
},
|
|
952
958
|
|
|
953
959
|
Tab(component, evt, ctx) {
|
|
@@ -4894,7 +4900,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4894
4900
|
}
|
|
4895
4901
|
};
|
|
4896
4902
|
|
|
4897
|
-
var formkitVersion$1 = '
|
|
4903
|
+
var formkitVersion$1 = '202606252142';
|
|
4898
4904
|
|
|
4899
4905
|
class AuroElement extends LitElement {
|
|
4900
4906
|
static get properties() {
|
|
@@ -6166,6 +6172,7 @@ class AuroDropdown extends AuroElement {
|
|
|
6166
6172
|
role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
6167
6173
|
aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
6168
6174
|
aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
6175
|
+
aria-haspopup="${ifDefined(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
|
|
6169
6176
|
aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
6170
6177
|
aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
|
|
6171
6178
|
@focusin="${this.handleFocusin}"
|
|
@@ -6915,7 +6922,7 @@ class AuroHelpText extends LitElement {
|
|
|
6915
6922
|
}
|
|
6916
6923
|
}
|
|
6917
6924
|
|
|
6918
|
-
var formkitVersion = '
|
|
6925
|
+
var formkitVersion = '202606252142';
|
|
6919
6926
|
|
|
6920
6927
|
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}`;
|
|
6921
6928
|
|
|
@@ -7247,14 +7254,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7247
7254
|
reflect: true
|
|
7248
7255
|
},
|
|
7249
7256
|
|
|
7250
|
-
/**
|
|
7251
|
-
* @private
|
|
7252
|
-
*/
|
|
7253
|
-
options: {
|
|
7254
|
-
type: Array,
|
|
7255
|
-
state: true
|
|
7256
|
-
},
|
|
7257
|
-
|
|
7258
7257
|
/**
|
|
7259
7258
|
* Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
|
|
7260
7259
|
* @type {HTMLElement|Array<HTMLElement>}
|
|
@@ -7542,16 +7541,68 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7542
7541
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
7543
7542
|
}
|
|
7544
7543
|
|
|
7545
|
-
|
|
7546
|
-
const labelElement = this.querySelector('span[slot="label"]');
|
|
7547
|
-
if (labelElement) {
|
|
7548
|
-
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
7549
|
-
}
|
|
7544
|
+
this._syncLabelText();
|
|
7550
7545
|
|
|
7551
7546
|
// Exposes the CSS parts from the dropdown for styling
|
|
7552
7547
|
this.dropdown.exposeCssParts();
|
|
7553
7548
|
}
|
|
7554
7549
|
|
|
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
|
+
|
|
7555
7606
|
/**
|
|
7556
7607
|
* This will register this element with the browser.
|
|
7557
7608
|
* @param {string} [name="auro-select"] - The name of element that you want to register to.
|
|
@@ -7702,11 +7753,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7702
7753
|
this.updateMenuShapeSize();
|
|
7703
7754
|
this.setMenuValue(this.value);
|
|
7704
7755
|
|
|
7705
|
-
|
|
7706
|
-
const labelElement = this.querySelector('[slot="label"]');
|
|
7707
|
-
if (labelElement) {
|
|
7708
|
-
this.menu.setAttribute('aria-label', labelElement.textContent.trim());
|
|
7709
|
-
}
|
|
7756
|
+
this._syncLabelText();
|
|
7710
7757
|
|
|
7711
7758
|
if (this.multiSelect) {
|
|
7712
7759
|
this.menu.multiSelect = this.multiSelect;
|
|
@@ -7718,8 +7765,21 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7718
7765
|
if (typeof this.menu.initItems === 'function') {
|
|
7719
7766
|
this.menu.initItems();
|
|
7720
7767
|
}
|
|
7721
|
-
this.options = this.menu.options;
|
|
7722
7768
|
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
|
+
|
|
7723
7783
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7724
7784
|
|
|
7725
7785
|
this.menu.addEventListener("auroMenu-selectValueFailure", () => {
|
|
@@ -7738,11 +7798,22 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7738
7798
|
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7739
7799
|
}
|
|
7740
7800
|
|
|
7741
|
-
// Announce the active option for screen readers
|
|
7742
|
-
|
|
7801
|
+
// Announce the active option for screen readers. Skip when the activated
|
|
7802
|
+
// option is already selected: Enter triggers an auroMenu-selectedOption
|
|
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')) {
|
|
7743
7806
|
const optionText = this.optionActive.textContent.trim();
|
|
7744
|
-
const
|
|
7745
|
-
|
|
7807
|
+
const message = `${optionText}, not selected`;
|
|
7808
|
+
if (this.dropdown.isPopoverVisible) {
|
|
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
|
+
}
|
|
7746
7817
|
}
|
|
7747
7818
|
|
|
7748
7819
|
if (this.dropdown.isPopoverVisible) {
|
|
@@ -7874,24 +7945,32 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7874
7945
|
|
|
7875
7946
|
this.typeaheadBuffer += key;
|
|
7876
7947
|
|
|
7877
|
-
|
|
7948
|
+
// Prefer the literal buffer as a prefix per WAI-ARIA APG ("focus moves to the
|
|
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));
|
|
7878
7954
|
|
|
7879
|
-
|
|
7955
|
+
const isRepeatedChar = !match && this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
7880
7956
|
if (isRepeatedChar) {
|
|
7881
7957
|
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
7882
7958
|
if (matches.length) {
|
|
7883
7959
|
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
7884
7960
|
match = matches[cycleIndex];
|
|
7885
7961
|
}
|
|
7886
|
-
} else {
|
|
7887
|
-
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7888
7962
|
}
|
|
7889
7963
|
|
|
7964
|
+
// Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
|
|
7890
7965
|
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);
|
|
7891
7971
|
if (!this.dropdown.isPopoverVisible) {
|
|
7892
7972
|
this.dropdown.show();
|
|
7893
7973
|
}
|
|
7894
|
-
this.menu.updateActiveOption(match);
|
|
7895
7974
|
}
|
|
7896
7975
|
}
|
|
7897
7976
|
|
|
@@ -8008,6 +8087,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8008
8087
|
disconnectedCallback() {
|
|
8009
8088
|
super.disconnectedCallback();
|
|
8010
8089
|
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
|
+
}
|
|
8011
8100
|
}
|
|
8012
8101
|
|
|
8013
8102
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
@@ -8018,6 +8107,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8018
8107
|
this.configureDropdown();
|
|
8019
8108
|
this.configureMenu();
|
|
8020
8109
|
this.configureSelect();
|
|
8110
|
+
this._observeLabelChanges();
|
|
8021
8111
|
}
|
|
8022
8112
|
|
|
8023
8113
|
setMenuValue(value) {
|
|
@@ -8154,21 +8244,8 @@ class AuroSelect extends AuroElement$1 {
|
|
|
8154
8244
|
if (!selectedOption) return;
|
|
8155
8245
|
const selectedValue = selectedOption.value;
|
|
8156
8246
|
|
|
8157
|
-
if (this.
|
|
8158
|
-
|
|
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
|
-
}
|
|
8247
|
+
if (this.value !== selectedValue) {
|
|
8248
|
+
this.value = selectedValue;
|
|
8172
8249
|
}
|
|
8173
8250
|
}
|
|
8174
8251
|
|