@aurodesignsystem-dev/auro-formkit 0.0.0-pr1505.0 → 0.0.0-pr1505.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/checkbox/demo/customize.html +1 -2
- 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.html +1 -2
- package/components/combobox/demo/customize.md +108 -132
- package/components/combobox/demo/customize.min.js +6 -6
- package/components/combobox/demo/getting-started.min.js +6 -6
- package/components/combobox/demo/index.min.js +6 -6
- package/components/combobox/dist/index.js +4 -4
- package/components/combobox/dist/registered.js +4 -4
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/api.md +2 -2
- package/components/datepicker/demo/customize.js +2 -2
- package/components/datepicker/demo/customize.md +29 -74
- package/components/datepicker/demo/customize.min.js +10 -10
- package/components/datepicker/demo/index.min.js +8 -8
- package/components/datepicker/dist/index.js +8 -8
- package/components/datepicker/dist/registered.js +8 -8
- package/components/datepicker/dist/src/auro-datepicker.d.ts +2 -2
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/customize.html +6 -6
- package/components/form/demo/customize.js +19 -0
- package/components/form/demo/customize.md +203 -51
- package/components/form/demo/customize.min.js +588 -83
- package/components/form/demo/getting-started.min.js +516 -83
- package/components/form/demo/index.min.js +516 -83
- package/components/form/demo/registerDemoDeps.min.js +153 -46
- package/components/form/dist/auro-form.d.ts +122 -4
- package/components/form/dist/index.js +363 -37
- package/components/form/dist/registered.js +363 -37
- package/components/input/demo/api.md +1 -1
- package/components/input/demo/customize.html +1 -2
- package/components/input/demo/customize.md +2 -2
- package/components/input/demo/customize.min.js +2 -2
- package/components/input/demo/getting-started.min.js +2 -2
- package/components/input/demo/index.md +2 -2
- package/components/input/demo/index.min.js +2 -2
- package/components/input/dist/auro-input.d.ts +1 -1
- package/components/input/dist/index.js +2 -2
- package/components/input/dist/registered.js +2 -2
- package/components/menu/demo/index.min.js +2 -2
- package/components/menu/dist/index.js +2 -2
- package/components/menu/dist/registered.js +2 -2
- 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/api.md +1 -0
- package/components/select/demo/customize.html +1 -2
- package/components/select/demo/customize.md +71 -0
- package/components/select/demo/customize.min.js +135 -28
- package/components/select/demo/getting-started.min.js +135 -28
- package/components/select/demo/index.min.js +135 -28
- package/components/select/demo/keyboard-behavior.md +18 -0
- package/components/select/dist/auro-select.d.ts +38 -2
- package/components/select/dist/index.js +133 -26
- package/components/select/dist/registered.js +133 -26
- package/components/select/dist/selectUtils.d.ts +12 -0
- package/custom-elements.json +1654 -1441
- package/package.json +1 -1
|
@@ -924,6 +924,21 @@ function getEnabledOptions(menu) {
|
|
|
924
924
|
return (menu?.options || []).filter((option) => !option.disabled);
|
|
925
925
|
}
|
|
926
926
|
|
|
927
|
+
/**
|
|
928
|
+
* Returns the active (selectable + visible) options for type-ahead navigation.
|
|
929
|
+
*
|
|
930
|
+
* Uses auro-menuoption's `isActive` getter, which excludes disabled, hidden,
|
|
931
|
+
* and static options (e.g. `static nomatch` placeholders) so the type-ahead
|
|
932
|
+
* cursor never lands on a non-actionable item. Same empty-safe handling as
|
|
933
|
+
* `getEnabledOptions`.
|
|
934
|
+
*
|
|
935
|
+
* @param {HTMLElement | null | undefined} menu - The auro-menu element.
|
|
936
|
+
* @returns {Array<HTMLElement>} Active options, empty array when none.
|
|
937
|
+
*/
|
|
938
|
+
function getActiveOptions(menu) {
|
|
939
|
+
return (menu?.options || []).filter((option) => option.isActive);
|
|
940
|
+
}
|
|
941
|
+
|
|
927
942
|
/* eslint-disable new-cap */
|
|
928
943
|
|
|
929
944
|
const selectKeyboardStrategy = {
|
|
@@ -956,6 +971,14 @@ const selectKeyboardStrategy = {
|
|
|
956
971
|
},
|
|
957
972
|
|
|
958
973
|
Escape(component, evt, ctx) {
|
|
974
|
+
// Always clear the type-ahead buffer — Escape is a universal cancel.
|
|
975
|
+
// Safe to call when the buffer is empty.
|
|
976
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
977
|
+
if (typeof component._clearTypeaheadBuffer === 'function') {
|
|
978
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
979
|
+
component._clearTypeaheadBuffer();
|
|
980
|
+
}
|
|
981
|
+
|
|
959
982
|
if (!ctx.isExpanded) {
|
|
960
983
|
return;
|
|
961
984
|
}
|
|
@@ -1015,16 +1038,25 @@ const selectKeyboardStrategy = {
|
|
|
1015
1038
|
},
|
|
1016
1039
|
|
|
1017
1040
|
default(component, evt, ctx) {
|
|
1018
|
-
|
|
1041
|
+
// Space resolves to either typeahead-buffer extension or bib toggle
|
|
1042
|
+
// depending on whether a type-ahead buffer is active. Mirrors native
|
|
1043
|
+
// <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space
|
|
1044
|
+
// is a search character (e.g. "San Francisco"); otherwise it toggles.
|
|
1019
1045
|
if (evt.key === ' ') {
|
|
1020
1046
|
evt.preventDefault();
|
|
1021
1047
|
evt.stopPropagation();
|
|
1048
|
+
if (component.typeaheadBuffer && component.typeaheadBuffer.length > 0) {
|
|
1049
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
1050
|
+
return;
|
|
1051
|
+
}
|
|
1022
1052
|
if (ctx.isExpanded) {
|
|
1023
1053
|
component.dropdown.hide();
|
|
1024
|
-
|
|
1054
|
+
} else {
|
|
1055
|
+
component.dropdown.show();
|
|
1025
1056
|
}
|
|
1026
|
-
|
|
1057
|
+
return;
|
|
1027
1058
|
}
|
|
1059
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
1028
1060
|
},
|
|
1029
1061
|
};
|
|
1030
1062
|
|
|
@@ -4960,7 +4992,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4960
4992
|
}
|
|
4961
4993
|
};
|
|
4962
4994
|
|
|
4963
|
-
var formkitVersion$1 = '
|
|
4995
|
+
var formkitVersion$1 = '202606222118';
|
|
4964
4996
|
|
|
4965
4997
|
class AuroElement extends i$2 {
|
|
4966
4998
|
static get properties() {
|
|
@@ -6973,7 +7005,7 @@ class AuroHelpText extends i$2 {
|
|
|
6973
7005
|
}
|
|
6974
7006
|
}
|
|
6975
7007
|
|
|
6976
|
-
var formkitVersion = '
|
|
7008
|
+
var formkitVersion = '202606222118';
|
|
6977
7009
|
|
|
6978
7010
|
var styleCss$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
6979
7011
|
|
|
@@ -7078,6 +7110,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7078
7110
|
* @private
|
|
7079
7111
|
*/
|
|
7080
7112
|
this.hasDisplayValueContent = false;
|
|
7113
|
+
|
|
7114
|
+
/**
|
|
7115
|
+
* @private
|
|
7116
|
+
*/
|
|
7117
|
+
this.typeaheadBuffer = '';
|
|
7118
|
+
|
|
7119
|
+
/**
|
|
7120
|
+
* @private
|
|
7121
|
+
*/
|
|
7122
|
+
this._typeaheadTimeout = null;
|
|
7081
7123
|
}
|
|
7082
7124
|
|
|
7083
7125
|
/**
|
|
@@ -7090,6 +7132,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7090
7132
|
this.fullscreenBreakpoint = 'sm';
|
|
7091
7133
|
this.onDark = false;
|
|
7092
7134
|
this.isPopoverVisible = false;
|
|
7135
|
+
this.typeaheadTimeoutMs = 500;
|
|
7093
7136
|
|
|
7094
7137
|
// Layout Config
|
|
7095
7138
|
this.layout = 'classic';
|
|
@@ -7393,6 +7436,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7393
7436
|
attribute: false
|
|
7394
7437
|
},
|
|
7395
7438
|
|
|
7439
|
+
/**
|
|
7440
|
+
* Milliseconds of keyboard inactivity before the type-ahead buffer resets.
|
|
7441
|
+
* Increase for users who type slowly.
|
|
7442
|
+
* @default 500
|
|
7443
|
+
*/
|
|
7444
|
+
typeaheadTimeoutMs: {
|
|
7445
|
+
type: Number,
|
|
7446
|
+
reflect: true
|
|
7447
|
+
},
|
|
7448
|
+
|
|
7396
7449
|
/**
|
|
7397
7450
|
* Specifies the `validityState` this element is in.
|
|
7398
7451
|
*/
|
|
@@ -7832,6 +7885,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7832
7885
|
this.addEventListener('blur', () => {
|
|
7833
7886
|
this.validate();
|
|
7834
7887
|
this.hasFocus = false;
|
|
7888
|
+
this._clearTypeaheadBuffer();
|
|
7835
7889
|
});
|
|
7836
7890
|
}
|
|
7837
7891
|
|
|
@@ -7845,41 +7899,89 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7845
7899
|
}
|
|
7846
7900
|
}
|
|
7847
7901
|
|
|
7902
|
+
/**
|
|
7903
|
+
* Returns the lowercase, trimmed text content of a menu option.
|
|
7904
|
+
* @private
|
|
7905
|
+
* @param {HTMLElement} option - The menu option element.
|
|
7906
|
+
* @returns {string}
|
|
7907
|
+
*/
|
|
7908
|
+
_getOptionDisplayText(option) {
|
|
7909
|
+
return (option.textContent || '').trim().toLowerCase();
|
|
7910
|
+
}
|
|
7911
|
+
|
|
7912
|
+
/**
|
|
7913
|
+
* Empties the type-ahead buffer and cancels any pending reset timeout.
|
|
7914
|
+
* Called when focus leaves the component, when Escape closes the bib, and on disconnect
|
|
7915
|
+
* so a stale buffer never bridges into a fresh interaction.
|
|
7916
|
+
* @private
|
|
7917
|
+
*/
|
|
7918
|
+
_clearTypeaheadBuffer() {
|
|
7919
|
+
if (this._typeaheadTimeout) {
|
|
7920
|
+
clearTimeout(this._typeaheadTimeout);
|
|
7921
|
+
this._typeaheadTimeout = null;
|
|
7922
|
+
}
|
|
7923
|
+
this.typeaheadBuffer = '';
|
|
7924
|
+
}
|
|
7925
|
+
|
|
7848
7926
|
/**
|
|
7849
7927
|
* Updates the active option in the menu based on keyboard input.
|
|
7928
|
+
*
|
|
7929
|
+
* Implements the WAI-ARIA APG Listbox type-ahead pattern: accumulates printable
|
|
7930
|
+
* keystrokes into a buffer that resets after `typeaheadTimeoutMs` of inactivity.
|
|
7931
|
+
* A multi-character buffer matches the first option whose displayed text starts
|
|
7932
|
+
* with the buffer; repeating a single character cycles through options that start
|
|
7933
|
+
* with that character.
|
|
7850
7934
|
* @private
|
|
7851
7935
|
* @param {string} _key - The key pressed by the user.
|
|
7852
7936
|
* @returns {void}
|
|
7853
7937
|
*/
|
|
7854
7938
|
updateActiveOptionBasedOnKey(_key) {
|
|
7939
|
+
// Ignore non-printable keys (Shift, ArrowDown, Tab, etc.)
|
|
7940
|
+
if (typeof _key !== 'string' || _key.length !== 1) {
|
|
7941
|
+
return;
|
|
7942
|
+
}
|
|
7855
7943
|
|
|
7856
|
-
//
|
|
7857
|
-
|
|
7858
|
-
|
|
7859
|
-
//
|
|
7860
|
-
|
|
7944
|
+
// No selectable options to match against — clear any stale buffer/timer so
|
|
7945
|
+
// Space stays a bib toggle and the next keystroke after fresh options load
|
|
7946
|
+
// starts cleanly. `getActiveOptions` excludes disabled, hidden, and static
|
|
7947
|
+
// options (e.g. `static nomatch` placeholders). Checked BEFORE mutating
|
|
7948
|
+
// the buffer.
|
|
7949
|
+
const options = getActiveOptions(this.menu);
|
|
7950
|
+
if (!options.length) {
|
|
7951
|
+
this._clearTypeaheadBuffer();
|
|
7952
|
+
return;
|
|
7953
|
+
}
|
|
7861
7954
|
|
|
7862
|
-
|
|
7863
|
-
this.lastLetter = key;
|
|
7955
|
+
const key = _key.toLowerCase();
|
|
7864
7956
|
|
|
7865
|
-
//
|
|
7866
|
-
|
|
7867
|
-
|
|
7868
|
-
|
|
7869
|
-
|
|
7957
|
+
// Reset the buffer after a period of inactivity
|
|
7958
|
+
if (this._typeaheadTimeout) {
|
|
7959
|
+
clearTimeout(this._typeaheadTimeout);
|
|
7960
|
+
}
|
|
7961
|
+
this._typeaheadTimeout = setTimeout(() => {
|
|
7962
|
+
this._clearTypeaheadBuffer();
|
|
7963
|
+
}, this.typeaheadTimeoutMs);
|
|
7870
7964
|
|
|
7871
|
-
|
|
7872
|
-
if (letterOptions.length) {
|
|
7965
|
+
this.typeaheadBuffer += key;
|
|
7873
7966
|
|
|
7874
|
-
|
|
7875
|
-
this.dropdown.show();
|
|
7967
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
7876
7968
|
|
|
7877
|
-
|
|
7878
|
-
|
|
7969
|
+
let match = null;
|
|
7970
|
+
if (isRepeatedChar) {
|
|
7971
|
+
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
7972
|
+
if (matches.length) {
|
|
7973
|
+
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
7974
|
+
match = matches[cycleIndex];
|
|
7975
|
+
}
|
|
7976
|
+
} else {
|
|
7977
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7978
|
+
}
|
|
7879
7979
|
|
|
7880
|
-
|
|
7881
|
-
|
|
7882
|
-
|
|
7980
|
+
if (match) {
|
|
7981
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
7982
|
+
this.dropdown.show();
|
|
7983
|
+
}
|
|
7984
|
+
this.menu.updateActiveOption(match);
|
|
7883
7985
|
}
|
|
7884
7986
|
}
|
|
7885
7987
|
|
|
@@ -7993,6 +8095,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7993
8095
|
}
|
|
7994
8096
|
}
|
|
7995
8097
|
|
|
8098
|
+
disconnectedCallback() {
|
|
8099
|
+
super.disconnectedCallback();
|
|
8100
|
+
this._clearTypeaheadBuffer();
|
|
8101
|
+
}
|
|
8102
|
+
|
|
7996
8103
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
7997
8104
|
firstUpdated() {
|
|
7998
8105
|
// Add the tag name as an attribute if it is different than the component name
|
|
@@ -8830,8 +8937,8 @@ class AuroMenu extends AuroElement$1 {
|
|
|
8830
8937
|
// Malformed JSON (e.g. a literal string that happens to start with "[") falls back
|
|
8831
8938
|
// to a single-item array rather than throwing during render.
|
|
8832
8939
|
try {
|
|
8833
|
-
|
|
8834
|
-
return
|
|
8940
|
+
// any valid JSON starting with `[` ALWAYS parses to an array
|
|
8941
|
+
return JSON.parse(this.value);
|
|
8835
8942
|
} catch {
|
|
8836
8943
|
return [this.value];
|
|
8837
8944
|
}
|
|
@@ -893,6 +893,21 @@ function getEnabledOptions(menu) {
|
|
|
893
893
|
return (menu?.options || []).filter((option) => !option.disabled);
|
|
894
894
|
}
|
|
895
895
|
|
|
896
|
+
/**
|
|
897
|
+
* Returns the active (selectable + visible) options for type-ahead navigation.
|
|
898
|
+
*
|
|
899
|
+
* Uses auro-menuoption's `isActive` getter, which excludes disabled, hidden,
|
|
900
|
+
* and static options (e.g. `static nomatch` placeholders) so the type-ahead
|
|
901
|
+
* cursor never lands on a non-actionable item. Same empty-safe handling as
|
|
902
|
+
* `getEnabledOptions`.
|
|
903
|
+
*
|
|
904
|
+
* @param {HTMLElement | null | undefined} menu - The auro-menu element.
|
|
905
|
+
* @returns {Array<HTMLElement>} Active options, empty array when none.
|
|
906
|
+
*/
|
|
907
|
+
function getActiveOptions(menu) {
|
|
908
|
+
return (menu?.options || []).filter((option) => option.isActive);
|
|
909
|
+
}
|
|
910
|
+
|
|
896
911
|
/* eslint-disable new-cap */
|
|
897
912
|
|
|
898
913
|
const selectKeyboardStrategy = {
|
|
@@ -925,6 +940,14 @@ const selectKeyboardStrategy = {
|
|
|
925
940
|
},
|
|
926
941
|
|
|
927
942
|
Escape(component, evt, ctx) {
|
|
943
|
+
// Always clear the type-ahead buffer — Escape is a universal cancel.
|
|
944
|
+
// Safe to call when the buffer is empty.
|
|
945
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
946
|
+
if (typeof component._clearTypeaheadBuffer === 'function') {
|
|
947
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
948
|
+
component._clearTypeaheadBuffer();
|
|
949
|
+
}
|
|
950
|
+
|
|
928
951
|
if (!ctx.isExpanded) {
|
|
929
952
|
return;
|
|
930
953
|
}
|
|
@@ -984,16 +1007,25 @@ const selectKeyboardStrategy = {
|
|
|
984
1007
|
},
|
|
985
1008
|
|
|
986
1009
|
default(component, evt, ctx) {
|
|
987
|
-
|
|
1010
|
+
// Space resolves to either typeahead-buffer extension or bib toggle
|
|
1011
|
+
// depending on whether a type-ahead buffer is active. Mirrors native
|
|
1012
|
+
// <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space
|
|
1013
|
+
// is a search character (e.g. "San Francisco"); otherwise it toggles.
|
|
988
1014
|
if (evt.key === ' ') {
|
|
989
1015
|
evt.preventDefault();
|
|
990
1016
|
evt.stopPropagation();
|
|
1017
|
+
if (component.typeaheadBuffer && component.typeaheadBuffer.length > 0) {
|
|
1018
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
1019
|
+
return;
|
|
1020
|
+
}
|
|
991
1021
|
if (ctx.isExpanded) {
|
|
992
1022
|
component.dropdown.hide();
|
|
993
|
-
|
|
1023
|
+
} else {
|
|
1024
|
+
component.dropdown.show();
|
|
994
1025
|
}
|
|
995
|
-
|
|
1026
|
+
return;
|
|
996
1027
|
}
|
|
1028
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
997
1029
|
},
|
|
998
1030
|
};
|
|
999
1031
|
|
|
@@ -4929,7 +4961,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
|
|
|
4929
4961
|
}
|
|
4930
4962
|
};
|
|
4931
4963
|
|
|
4932
|
-
var formkitVersion$1 = '
|
|
4964
|
+
var formkitVersion$1 = '202606222118';
|
|
4933
4965
|
|
|
4934
4966
|
class AuroElement extends i$2 {
|
|
4935
4967
|
static get properties() {
|
|
@@ -6942,7 +6974,7 @@ class AuroHelpText extends i$2 {
|
|
|
6942
6974
|
}
|
|
6943
6975
|
}
|
|
6944
6976
|
|
|
6945
|
-
var formkitVersion = '
|
|
6977
|
+
var formkitVersion = '202606222118';
|
|
6946
6978
|
|
|
6947
6979
|
var styleCss$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
6948
6980
|
|
|
@@ -7047,6 +7079,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7047
7079
|
* @private
|
|
7048
7080
|
*/
|
|
7049
7081
|
this.hasDisplayValueContent = false;
|
|
7082
|
+
|
|
7083
|
+
/**
|
|
7084
|
+
* @private
|
|
7085
|
+
*/
|
|
7086
|
+
this.typeaheadBuffer = '';
|
|
7087
|
+
|
|
7088
|
+
/**
|
|
7089
|
+
* @private
|
|
7090
|
+
*/
|
|
7091
|
+
this._typeaheadTimeout = null;
|
|
7050
7092
|
}
|
|
7051
7093
|
|
|
7052
7094
|
/**
|
|
@@ -7059,6 +7101,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7059
7101
|
this.fullscreenBreakpoint = 'sm';
|
|
7060
7102
|
this.onDark = false;
|
|
7061
7103
|
this.isPopoverVisible = false;
|
|
7104
|
+
this.typeaheadTimeoutMs = 500;
|
|
7062
7105
|
|
|
7063
7106
|
// Layout Config
|
|
7064
7107
|
this.layout = 'classic';
|
|
@@ -7362,6 +7405,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7362
7405
|
attribute: false
|
|
7363
7406
|
},
|
|
7364
7407
|
|
|
7408
|
+
/**
|
|
7409
|
+
* Milliseconds of keyboard inactivity before the type-ahead buffer resets.
|
|
7410
|
+
* Increase for users who type slowly.
|
|
7411
|
+
* @default 500
|
|
7412
|
+
*/
|
|
7413
|
+
typeaheadTimeoutMs: {
|
|
7414
|
+
type: Number,
|
|
7415
|
+
reflect: true
|
|
7416
|
+
},
|
|
7417
|
+
|
|
7365
7418
|
/**
|
|
7366
7419
|
* Specifies the `validityState` this element is in.
|
|
7367
7420
|
*/
|
|
@@ -7801,6 +7854,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7801
7854
|
this.addEventListener('blur', () => {
|
|
7802
7855
|
this.validate();
|
|
7803
7856
|
this.hasFocus = false;
|
|
7857
|
+
this._clearTypeaheadBuffer();
|
|
7804
7858
|
});
|
|
7805
7859
|
}
|
|
7806
7860
|
|
|
@@ -7814,41 +7868,89 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7814
7868
|
}
|
|
7815
7869
|
}
|
|
7816
7870
|
|
|
7871
|
+
/**
|
|
7872
|
+
* Returns the lowercase, trimmed text content of a menu option.
|
|
7873
|
+
* @private
|
|
7874
|
+
* @param {HTMLElement} option - The menu option element.
|
|
7875
|
+
* @returns {string}
|
|
7876
|
+
*/
|
|
7877
|
+
_getOptionDisplayText(option) {
|
|
7878
|
+
return (option.textContent || '').trim().toLowerCase();
|
|
7879
|
+
}
|
|
7880
|
+
|
|
7881
|
+
/**
|
|
7882
|
+
* Empties the type-ahead buffer and cancels any pending reset timeout.
|
|
7883
|
+
* Called when focus leaves the component, when Escape closes the bib, and on disconnect
|
|
7884
|
+
* so a stale buffer never bridges into a fresh interaction.
|
|
7885
|
+
* @private
|
|
7886
|
+
*/
|
|
7887
|
+
_clearTypeaheadBuffer() {
|
|
7888
|
+
if (this._typeaheadTimeout) {
|
|
7889
|
+
clearTimeout(this._typeaheadTimeout);
|
|
7890
|
+
this._typeaheadTimeout = null;
|
|
7891
|
+
}
|
|
7892
|
+
this.typeaheadBuffer = '';
|
|
7893
|
+
}
|
|
7894
|
+
|
|
7817
7895
|
/**
|
|
7818
7896
|
* Updates the active option in the menu based on keyboard input.
|
|
7897
|
+
*
|
|
7898
|
+
* Implements the WAI-ARIA APG Listbox type-ahead pattern: accumulates printable
|
|
7899
|
+
* keystrokes into a buffer that resets after `typeaheadTimeoutMs` of inactivity.
|
|
7900
|
+
* A multi-character buffer matches the first option whose displayed text starts
|
|
7901
|
+
* with the buffer; repeating a single character cycles through options that start
|
|
7902
|
+
* with that character.
|
|
7819
7903
|
* @private
|
|
7820
7904
|
* @param {string} _key - The key pressed by the user.
|
|
7821
7905
|
* @returns {void}
|
|
7822
7906
|
*/
|
|
7823
7907
|
updateActiveOptionBasedOnKey(_key) {
|
|
7908
|
+
// Ignore non-printable keys (Shift, ArrowDown, Tab, etc.)
|
|
7909
|
+
if (typeof _key !== 'string' || _key.length !== 1) {
|
|
7910
|
+
return;
|
|
7911
|
+
}
|
|
7824
7912
|
|
|
7825
|
-
//
|
|
7826
|
-
|
|
7827
|
-
|
|
7828
|
-
//
|
|
7829
|
-
|
|
7913
|
+
// No selectable options to match against — clear any stale buffer/timer so
|
|
7914
|
+
// Space stays a bib toggle and the next keystroke after fresh options load
|
|
7915
|
+
// starts cleanly. `getActiveOptions` excludes disabled, hidden, and static
|
|
7916
|
+
// options (e.g. `static nomatch` placeholders). Checked BEFORE mutating
|
|
7917
|
+
// the buffer.
|
|
7918
|
+
const options = getActiveOptions(this.menu);
|
|
7919
|
+
if (!options.length) {
|
|
7920
|
+
this._clearTypeaheadBuffer();
|
|
7921
|
+
return;
|
|
7922
|
+
}
|
|
7830
7923
|
|
|
7831
|
-
|
|
7832
|
-
this.lastLetter = key;
|
|
7924
|
+
const key = _key.toLowerCase();
|
|
7833
7925
|
|
|
7834
|
-
//
|
|
7835
|
-
|
|
7836
|
-
|
|
7837
|
-
|
|
7838
|
-
|
|
7926
|
+
// Reset the buffer after a period of inactivity
|
|
7927
|
+
if (this._typeaheadTimeout) {
|
|
7928
|
+
clearTimeout(this._typeaheadTimeout);
|
|
7929
|
+
}
|
|
7930
|
+
this._typeaheadTimeout = setTimeout(() => {
|
|
7931
|
+
this._clearTypeaheadBuffer();
|
|
7932
|
+
}, this.typeaheadTimeoutMs);
|
|
7839
7933
|
|
|
7840
|
-
|
|
7841
|
-
if (letterOptions.length) {
|
|
7934
|
+
this.typeaheadBuffer += key;
|
|
7842
7935
|
|
|
7843
|
-
|
|
7844
|
-
this.dropdown.show();
|
|
7936
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
7845
7937
|
|
|
7846
|
-
|
|
7847
|
-
|
|
7938
|
+
let match = null;
|
|
7939
|
+
if (isRepeatedChar) {
|
|
7940
|
+
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
7941
|
+
if (matches.length) {
|
|
7942
|
+
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
7943
|
+
match = matches[cycleIndex];
|
|
7944
|
+
}
|
|
7945
|
+
} else {
|
|
7946
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7947
|
+
}
|
|
7848
7948
|
|
|
7849
|
-
|
|
7850
|
-
|
|
7851
|
-
|
|
7949
|
+
if (match) {
|
|
7950
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
7951
|
+
this.dropdown.show();
|
|
7952
|
+
}
|
|
7953
|
+
this.menu.updateActiveOption(match);
|
|
7852
7954
|
}
|
|
7853
7955
|
}
|
|
7854
7956
|
|
|
@@ -7962,6 +8064,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7962
8064
|
}
|
|
7963
8065
|
}
|
|
7964
8066
|
|
|
8067
|
+
disconnectedCallback() {
|
|
8068
|
+
super.disconnectedCallback();
|
|
8069
|
+
this._clearTypeaheadBuffer();
|
|
8070
|
+
}
|
|
8071
|
+
|
|
7965
8072
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
7966
8073
|
firstUpdated() {
|
|
7967
8074
|
// Add the tag name as an attribute if it is different than the component name
|
|
@@ -8799,8 +8906,8 @@ class AuroMenu extends AuroElement$1 {
|
|
|
8799
8906
|
// Malformed JSON (e.g. a literal string that happens to start with "[") falls back
|
|
8800
8907
|
// to a single-item array rather than throwing during render.
|
|
8801
8908
|
try {
|
|
8802
|
-
|
|
8803
|
-
return
|
|
8909
|
+
// any valid JSON starting with `[` ALWAYS parses to an array
|
|
8910
|
+
return JSON.parse(this.value);
|
|
8804
8911
|
} catch {
|
|
8805
8912
|
return [this.value];
|
|
8806
8913
|
}
|
|
@@ -229,6 +229,24 @@
|
|
|
229
229
|
</div>
|
|
230
230
|
</td>
|
|
231
231
|
</tr>
|
|
232
|
+
<tr>
|
|
233
|
+
<td>Space</td>
|
|
234
|
+
<td>-</td>
|
|
235
|
+
<td>Collapsed or Expanded</td>
|
|
236
|
+
<td>Trigger element</td>
|
|
237
|
+
<td>
|
|
238
|
+
When the type-ahead buffer is empty, Space behaves as documented in the inherited Space row below. While the buffer is active, Space extends the buffer instead — the <code>focused</code> option advances if the buffer matches an enabled option, and the bib state is unchanged. See the <a href="customize.html#typeAhead">Type-Ahead</a> section on the Customize page.
|
|
239
|
+
</td>
|
|
240
|
+
</tr>
|
|
241
|
+
<tr>
|
|
242
|
+
<td>Any printable character (other than Space)</td>
|
|
243
|
+
<td>-</td>
|
|
244
|
+
<td>Collapsed or Expanded</td>
|
|
245
|
+
<td>Trigger element</td>
|
|
246
|
+
<td>
|
|
247
|
+
Extends the type-ahead buffer. When the buffer matches an enabled option's displayed text, the <code>focused</code> option advances to that option and the bib opens if it was collapsed. A keystroke that does not match any option leaves the bib state unchanged. Repeated keystrokes within <code>typeaheadTimeoutMs</code> extend the buffer; pressing the same character repeatedly cycles through matching options. See the <a href="customize.html#typeAhead">Type-Ahead</a> section on the Customize page.
|
|
248
|
+
</td>
|
|
249
|
+
</tr>
|
|
232
250
|
</tbody>
|
|
233
251
|
</table>
|
|
234
252
|
<!-- AURO-GENERATED-CONTENT:END -->
|