@aurodesignsystem-dev/auro-formkit 0.0.0-pr1478.0 → 0.0.0-pr1478.1
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 +14 -23
- package/components/combobox/demo/getting-started.min.js +14 -23
- package/components/combobox/demo/index.min.js +14 -23
- package/components/combobox/dist/index.js +12 -21
- package/components/combobox/dist/registered.js +12 -21
- package/components/counter/demo/customize.min.js +10 -2
- package/components/counter/demo/index.min.js +10 -2
- package/components/counter/dist/index.js +10 -2
- package/components/counter/dist/registered.js +10 -2
- package/components/datepicker/demo/api.md +2 -0
- package/components/datepicker/demo/customize.js +0 -2
- package/components/datepicker/demo/customize.md +138 -38
- package/components/datepicker/demo/customize.min.js +17 -23
- package/components/datepicker/demo/index.min.js +17 -5
- package/components/datepicker/dist/index.js +17 -5
- package/components/datepicker/dist/registered.js +17 -5
- package/components/datepicker/dist/src/auro-datepicker.d.ts +2 -0
- package/components/dropdown/demo/customize.min.js +9 -1
- package/components/dropdown/demo/getting-started.min.js +9 -1
- package/components/dropdown/demo/index.min.js +9 -1
- package/components/dropdown/dist/auro-dropdown.d.ts +1 -0
- package/components/dropdown/dist/index.js +9 -1
- package/components/dropdown/dist/registered.js +9 -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 +620 -96
- package/components/form/demo/getting-started.min.js +548 -96
- package/components/form/demo/index.min.js +548 -96
- package/components/form/demo/registerDemoDeps.min.js +185 -59
- 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/customize.html +1 -2
- package/components/input/demo/customize.md +54 -53
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- 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 +143 -28
- package/components/select/demo/getting-started.min.js +143 -28
- package/components/select/demo/index.min.js +143 -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 +141 -26
- package/components/select/dist/registered.js +141 -26
- package/components/select/dist/selectUtils.d.ts +12 -0
- package/custom-elements.json +1641 -1420
- package/package.json +1 -1
|
@@ -850,6 +850,21 @@ function getEnabledOptions(menu) {
|
|
|
850
850
|
return (menu?.options || []).filter((option) => !option.disabled);
|
|
851
851
|
}
|
|
852
852
|
|
|
853
|
+
/**
|
|
854
|
+
* Returns the active (selectable + visible) options for type-ahead navigation.
|
|
855
|
+
*
|
|
856
|
+
* Uses auro-menuoption's `isActive` getter, which excludes disabled, hidden,
|
|
857
|
+
* and static options (e.g. `static nomatch` placeholders) so the type-ahead
|
|
858
|
+
* cursor never lands on a non-actionable item. Same empty-safe handling as
|
|
859
|
+
* `getEnabledOptions`.
|
|
860
|
+
*
|
|
861
|
+
* @param {HTMLElement | null | undefined} menu - The auro-menu element.
|
|
862
|
+
* @returns {Array<HTMLElement>} Active options, empty array when none.
|
|
863
|
+
*/
|
|
864
|
+
function getActiveOptions(menu) {
|
|
865
|
+
return (menu?.options || []).filter((option) => option.isActive);
|
|
866
|
+
}
|
|
867
|
+
|
|
853
868
|
/* eslint-disable new-cap */
|
|
854
869
|
|
|
855
870
|
const selectKeyboardStrategy = {
|
|
@@ -882,6 +897,14 @@ const selectKeyboardStrategy = {
|
|
|
882
897
|
},
|
|
883
898
|
|
|
884
899
|
Escape(component, evt, ctx) {
|
|
900
|
+
// Always clear the type-ahead buffer — Escape is a universal cancel.
|
|
901
|
+
// Safe to call when the buffer is empty.
|
|
902
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
903
|
+
if (typeof component._clearTypeaheadBuffer === 'function') {
|
|
904
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
905
|
+
component._clearTypeaheadBuffer();
|
|
906
|
+
}
|
|
907
|
+
|
|
885
908
|
if (!ctx.isExpanded) {
|
|
886
909
|
return;
|
|
887
910
|
}
|
|
@@ -941,16 +964,25 @@ const selectKeyboardStrategy = {
|
|
|
941
964
|
},
|
|
942
965
|
|
|
943
966
|
default(component, evt, ctx) {
|
|
944
|
-
|
|
967
|
+
// Space resolves to either typeahead-buffer extension or bib toggle
|
|
968
|
+
// depending on whether a type-ahead buffer is active. Mirrors native
|
|
969
|
+
// <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space
|
|
970
|
+
// is a search character (e.g. "San Francisco"); otherwise it toggles.
|
|
945
971
|
if (evt.key === ' ') {
|
|
946
972
|
evt.preventDefault();
|
|
947
973
|
evt.stopPropagation();
|
|
974
|
+
if (component.typeaheadBuffer && component.typeaheadBuffer.length > 0) {
|
|
975
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
976
|
+
return;
|
|
977
|
+
}
|
|
948
978
|
if (ctx.isExpanded) {
|
|
949
979
|
component.dropdown.hide();
|
|
950
|
-
|
|
980
|
+
} else {
|
|
981
|
+
component.dropdown.show();
|
|
951
982
|
}
|
|
952
|
-
|
|
983
|
+
return;
|
|
953
984
|
}
|
|
985
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
954
986
|
},
|
|
955
987
|
};
|
|
956
988
|
|
|
@@ -4862,7 +4894,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4862
4894
|
}
|
|
4863
4895
|
};
|
|
4864
4896
|
|
|
4865
|
-
var formkitVersion$1 = '
|
|
4897
|
+
var formkitVersion$1 = '202606231828';
|
|
4866
4898
|
|
|
4867
4899
|
class AuroElement extends LitElement {
|
|
4868
4900
|
static get properties() {
|
|
@@ -5813,6 +5845,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5813
5845
|
};
|
|
5814
5846
|
this.addEventListener('keydown', this._bibTabHandler);
|
|
5815
5847
|
|
|
5848
|
+
// Suppress AuroFloatingUI's auto-hide-on-focus-loss while the
|
|
5849
|
+
// desktopModal trap owns focus management. Without this, the very
|
|
5850
|
+
// first focus move into the bib (from the RAF below) triggers
|
|
5851
|
+
// handleFocusLoss → hideBib, tearing down the trap before the
|
|
5852
|
+
// user can press Tab.
|
|
5853
|
+
this._priorNoHideOnFocusLoss = this.noHideOnThisFocusLoss;
|
|
5854
|
+
this.noHideOnThisFocusLoss = true;
|
|
5855
|
+
|
|
5816
5856
|
// Move initial focus into the bib content, matching FocusTrap behavior
|
|
5817
5857
|
requestAnimationFrame(() => {
|
|
5818
5858
|
const focusables = getFocusableElements(this.bibContent);
|
|
@@ -6875,7 +6915,7 @@ class AuroHelpText extends LitElement {
|
|
|
6875
6915
|
}
|
|
6876
6916
|
}
|
|
6877
6917
|
|
|
6878
|
-
var formkitVersion = '
|
|
6918
|
+
var formkitVersion = '202606231828';
|
|
6879
6919
|
|
|
6880
6920
|
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
6881
6921
|
|
|
@@ -6980,6 +7020,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6980
7020
|
* @private
|
|
6981
7021
|
*/
|
|
6982
7022
|
this.hasDisplayValueContent = false;
|
|
7023
|
+
|
|
7024
|
+
/**
|
|
7025
|
+
* @private
|
|
7026
|
+
*/
|
|
7027
|
+
this.typeaheadBuffer = '';
|
|
7028
|
+
|
|
7029
|
+
/**
|
|
7030
|
+
* @private
|
|
7031
|
+
*/
|
|
7032
|
+
this._typeaheadTimeout = null;
|
|
6983
7033
|
}
|
|
6984
7034
|
|
|
6985
7035
|
/**
|
|
@@ -6992,6 +7042,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6992
7042
|
this.fullscreenBreakpoint = 'sm';
|
|
6993
7043
|
this.onDark = false;
|
|
6994
7044
|
this.isPopoverVisible = false;
|
|
7045
|
+
this.typeaheadTimeoutMs = 500;
|
|
6995
7046
|
|
|
6996
7047
|
// Layout Config
|
|
6997
7048
|
this.layout = 'classic';
|
|
@@ -7295,6 +7346,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7295
7346
|
attribute: false
|
|
7296
7347
|
},
|
|
7297
7348
|
|
|
7349
|
+
/**
|
|
7350
|
+
* Milliseconds of keyboard inactivity before the type-ahead buffer resets.
|
|
7351
|
+
* Increase for users who type slowly.
|
|
7352
|
+
* @default 500
|
|
7353
|
+
*/
|
|
7354
|
+
typeaheadTimeoutMs: {
|
|
7355
|
+
type: Number,
|
|
7356
|
+
reflect: true
|
|
7357
|
+
},
|
|
7358
|
+
|
|
7298
7359
|
/**
|
|
7299
7360
|
* Specifies the `validityState` this element is in.
|
|
7300
7361
|
*/
|
|
@@ -7734,6 +7795,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7734
7795
|
this.addEventListener('blur', () => {
|
|
7735
7796
|
this.validate();
|
|
7736
7797
|
this.hasFocus = false;
|
|
7798
|
+
this._clearTypeaheadBuffer();
|
|
7737
7799
|
});
|
|
7738
7800
|
}
|
|
7739
7801
|
|
|
@@ -7747,41 +7809,89 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7747
7809
|
}
|
|
7748
7810
|
}
|
|
7749
7811
|
|
|
7812
|
+
/**
|
|
7813
|
+
* Returns the lowercase, trimmed text content of a menu option.
|
|
7814
|
+
* @private
|
|
7815
|
+
* @param {HTMLElement} option - The menu option element.
|
|
7816
|
+
* @returns {string}
|
|
7817
|
+
*/
|
|
7818
|
+
_getOptionDisplayText(option) {
|
|
7819
|
+
return (option.textContent || '').trim().toLowerCase();
|
|
7820
|
+
}
|
|
7821
|
+
|
|
7822
|
+
/**
|
|
7823
|
+
* Empties the type-ahead buffer and cancels any pending reset timeout.
|
|
7824
|
+
* Called when focus leaves the component, when Escape closes the bib, and on disconnect
|
|
7825
|
+
* so a stale buffer never bridges into a fresh interaction.
|
|
7826
|
+
* @private
|
|
7827
|
+
*/
|
|
7828
|
+
_clearTypeaheadBuffer() {
|
|
7829
|
+
if (this._typeaheadTimeout) {
|
|
7830
|
+
clearTimeout(this._typeaheadTimeout);
|
|
7831
|
+
this._typeaheadTimeout = null;
|
|
7832
|
+
}
|
|
7833
|
+
this.typeaheadBuffer = '';
|
|
7834
|
+
}
|
|
7835
|
+
|
|
7750
7836
|
/**
|
|
7751
7837
|
* Updates the active option in the menu based on keyboard input.
|
|
7838
|
+
*
|
|
7839
|
+
* Implements the WAI-ARIA APG Listbox type-ahead pattern: accumulates printable
|
|
7840
|
+
* keystrokes into a buffer that resets after `typeaheadTimeoutMs` of inactivity.
|
|
7841
|
+
* A multi-character buffer matches the first option whose displayed text starts
|
|
7842
|
+
* with the buffer; repeating a single character cycles through options that start
|
|
7843
|
+
* with that character.
|
|
7752
7844
|
* @private
|
|
7753
7845
|
* @param {string} _key - The key pressed by the user.
|
|
7754
7846
|
* @returns {void}
|
|
7755
7847
|
*/
|
|
7756
7848
|
updateActiveOptionBasedOnKey(_key) {
|
|
7849
|
+
// Ignore non-printable keys (Shift, ArrowDown, Tab, etc.)
|
|
7850
|
+
if (typeof _key !== 'string' || _key.length !== 1) {
|
|
7851
|
+
return;
|
|
7852
|
+
}
|
|
7757
7853
|
|
|
7758
|
-
//
|
|
7759
|
-
|
|
7760
|
-
|
|
7761
|
-
//
|
|
7762
|
-
|
|
7854
|
+
// No selectable options to match against — clear any stale buffer/timer so
|
|
7855
|
+
// Space stays a bib toggle and the next keystroke after fresh options load
|
|
7856
|
+
// starts cleanly. `getActiveOptions` excludes disabled, hidden, and static
|
|
7857
|
+
// options (e.g. `static nomatch` placeholders). Checked BEFORE mutating
|
|
7858
|
+
// the buffer.
|
|
7859
|
+
const options = getActiveOptions(this.menu);
|
|
7860
|
+
if (!options.length) {
|
|
7861
|
+
this._clearTypeaheadBuffer();
|
|
7862
|
+
return;
|
|
7863
|
+
}
|
|
7763
7864
|
|
|
7764
|
-
|
|
7765
|
-
this.lastLetter = key;
|
|
7865
|
+
const key = _key.toLowerCase();
|
|
7766
7866
|
|
|
7767
|
-
//
|
|
7768
|
-
|
|
7769
|
-
|
|
7770
|
-
|
|
7771
|
-
|
|
7867
|
+
// Reset the buffer after a period of inactivity
|
|
7868
|
+
if (this._typeaheadTimeout) {
|
|
7869
|
+
clearTimeout(this._typeaheadTimeout);
|
|
7870
|
+
}
|
|
7871
|
+
this._typeaheadTimeout = setTimeout(() => {
|
|
7872
|
+
this._clearTypeaheadBuffer();
|
|
7873
|
+
}, this.typeaheadTimeoutMs);
|
|
7772
7874
|
|
|
7773
|
-
|
|
7774
|
-
if (letterOptions.length) {
|
|
7875
|
+
this.typeaheadBuffer += key;
|
|
7775
7876
|
|
|
7776
|
-
|
|
7777
|
-
this.dropdown.show();
|
|
7877
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
7778
7878
|
|
|
7779
|
-
|
|
7780
|
-
|
|
7879
|
+
let match = null;
|
|
7880
|
+
if (isRepeatedChar) {
|
|
7881
|
+
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
7882
|
+
if (matches.length) {
|
|
7883
|
+
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
7884
|
+
match = matches[cycleIndex];
|
|
7885
|
+
}
|
|
7886
|
+
} else {
|
|
7887
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7888
|
+
}
|
|
7781
7889
|
|
|
7782
|
-
|
|
7783
|
-
|
|
7784
|
-
|
|
7890
|
+
if (match) {
|
|
7891
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
7892
|
+
this.dropdown.show();
|
|
7893
|
+
}
|
|
7894
|
+
this.menu.updateActiveOption(match);
|
|
7785
7895
|
}
|
|
7786
7896
|
}
|
|
7787
7897
|
|
|
@@ -7895,6 +8005,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7895
8005
|
}
|
|
7896
8006
|
}
|
|
7897
8007
|
|
|
8008
|
+
disconnectedCallback() {
|
|
8009
|
+
super.disconnectedCallback();
|
|
8010
|
+
this._clearTypeaheadBuffer();
|
|
8011
|
+
}
|
|
8012
|
+
|
|
7898
8013
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
7899
8014
|
firstUpdated() {
|
|
7900
8015
|
// Add the tag name as an attribute if it is different than the component name
|
|
@@ -850,6 +850,21 @@ function getEnabledOptions(menu) {
|
|
|
850
850
|
return (menu?.options || []).filter((option) => !option.disabled);
|
|
851
851
|
}
|
|
852
852
|
|
|
853
|
+
/**
|
|
854
|
+
* Returns the active (selectable + visible) options for type-ahead navigation.
|
|
855
|
+
*
|
|
856
|
+
* Uses auro-menuoption's `isActive` getter, which excludes disabled, hidden,
|
|
857
|
+
* and static options (e.g. `static nomatch` placeholders) so the type-ahead
|
|
858
|
+
* cursor never lands on a non-actionable item. Same empty-safe handling as
|
|
859
|
+
* `getEnabledOptions`.
|
|
860
|
+
*
|
|
861
|
+
* @param {HTMLElement | null | undefined} menu - The auro-menu element.
|
|
862
|
+
* @returns {Array<HTMLElement>} Active options, empty array when none.
|
|
863
|
+
*/
|
|
864
|
+
function getActiveOptions(menu) {
|
|
865
|
+
return (menu?.options || []).filter((option) => option.isActive);
|
|
866
|
+
}
|
|
867
|
+
|
|
853
868
|
/* eslint-disable new-cap */
|
|
854
869
|
|
|
855
870
|
const selectKeyboardStrategy = {
|
|
@@ -882,6 +897,14 @@ const selectKeyboardStrategy = {
|
|
|
882
897
|
},
|
|
883
898
|
|
|
884
899
|
Escape(component, evt, ctx) {
|
|
900
|
+
// Always clear the type-ahead buffer — Escape is a universal cancel.
|
|
901
|
+
// Safe to call when the buffer is empty.
|
|
902
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
903
|
+
if (typeof component._clearTypeaheadBuffer === 'function') {
|
|
904
|
+
// eslint-disable-next-line no-underscore-dangle
|
|
905
|
+
component._clearTypeaheadBuffer();
|
|
906
|
+
}
|
|
907
|
+
|
|
885
908
|
if (!ctx.isExpanded) {
|
|
886
909
|
return;
|
|
887
910
|
}
|
|
@@ -941,16 +964,25 @@ const selectKeyboardStrategy = {
|
|
|
941
964
|
},
|
|
942
965
|
|
|
943
966
|
default(component, evt, ctx) {
|
|
944
|
-
|
|
967
|
+
// Space resolves to either typeahead-buffer extension or bib toggle
|
|
968
|
+
// depending on whether a type-ahead buffer is active. Mirrors native
|
|
969
|
+
// <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space
|
|
970
|
+
// is a search character (e.g. "San Francisco"); otherwise it toggles.
|
|
945
971
|
if (evt.key === ' ') {
|
|
946
972
|
evt.preventDefault();
|
|
947
973
|
evt.stopPropagation();
|
|
974
|
+
if (component.typeaheadBuffer && component.typeaheadBuffer.length > 0) {
|
|
975
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
976
|
+
return;
|
|
977
|
+
}
|
|
948
978
|
if (ctx.isExpanded) {
|
|
949
979
|
component.dropdown.hide();
|
|
950
|
-
|
|
980
|
+
} else {
|
|
981
|
+
component.dropdown.show();
|
|
951
982
|
}
|
|
952
|
-
|
|
983
|
+
return;
|
|
953
984
|
}
|
|
985
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
954
986
|
},
|
|
955
987
|
};
|
|
956
988
|
|
|
@@ -4862,7 +4894,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4862
4894
|
}
|
|
4863
4895
|
};
|
|
4864
4896
|
|
|
4865
|
-
var formkitVersion$1 = '
|
|
4897
|
+
var formkitVersion$1 = '202606231828';
|
|
4866
4898
|
|
|
4867
4899
|
class AuroElement extends LitElement {
|
|
4868
4900
|
static get properties() {
|
|
@@ -5813,6 +5845,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5813
5845
|
};
|
|
5814
5846
|
this.addEventListener('keydown', this._bibTabHandler);
|
|
5815
5847
|
|
|
5848
|
+
// Suppress AuroFloatingUI's auto-hide-on-focus-loss while the
|
|
5849
|
+
// desktopModal trap owns focus management. Without this, the very
|
|
5850
|
+
// first focus move into the bib (from the RAF below) triggers
|
|
5851
|
+
// handleFocusLoss → hideBib, tearing down the trap before the
|
|
5852
|
+
// user can press Tab.
|
|
5853
|
+
this._priorNoHideOnFocusLoss = this.noHideOnThisFocusLoss;
|
|
5854
|
+
this.noHideOnThisFocusLoss = true;
|
|
5855
|
+
|
|
5816
5856
|
// Move initial focus into the bib content, matching FocusTrap behavior
|
|
5817
5857
|
requestAnimationFrame(() => {
|
|
5818
5858
|
const focusables = getFocusableElements(this.bibContent);
|
|
@@ -6875,7 +6915,7 @@ class AuroHelpText extends LitElement {
|
|
|
6875
6915
|
}
|
|
6876
6916
|
}
|
|
6877
6917
|
|
|
6878
|
-
var formkitVersion = '
|
|
6918
|
+
var formkitVersion = '202606231828';
|
|
6879
6919
|
|
|
6880
6920
|
var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
6881
6921
|
|
|
@@ -6980,6 +7020,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6980
7020
|
* @private
|
|
6981
7021
|
*/
|
|
6982
7022
|
this.hasDisplayValueContent = false;
|
|
7023
|
+
|
|
7024
|
+
/**
|
|
7025
|
+
* @private
|
|
7026
|
+
*/
|
|
7027
|
+
this.typeaheadBuffer = '';
|
|
7028
|
+
|
|
7029
|
+
/**
|
|
7030
|
+
* @private
|
|
7031
|
+
*/
|
|
7032
|
+
this._typeaheadTimeout = null;
|
|
6983
7033
|
}
|
|
6984
7034
|
|
|
6985
7035
|
/**
|
|
@@ -6992,6 +7042,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6992
7042
|
this.fullscreenBreakpoint = 'sm';
|
|
6993
7043
|
this.onDark = false;
|
|
6994
7044
|
this.isPopoverVisible = false;
|
|
7045
|
+
this.typeaheadTimeoutMs = 500;
|
|
6995
7046
|
|
|
6996
7047
|
// Layout Config
|
|
6997
7048
|
this.layout = 'classic';
|
|
@@ -7295,6 +7346,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7295
7346
|
attribute: false
|
|
7296
7347
|
},
|
|
7297
7348
|
|
|
7349
|
+
/**
|
|
7350
|
+
* Milliseconds of keyboard inactivity before the type-ahead buffer resets.
|
|
7351
|
+
* Increase for users who type slowly.
|
|
7352
|
+
* @default 500
|
|
7353
|
+
*/
|
|
7354
|
+
typeaheadTimeoutMs: {
|
|
7355
|
+
type: Number,
|
|
7356
|
+
reflect: true
|
|
7357
|
+
},
|
|
7358
|
+
|
|
7298
7359
|
/**
|
|
7299
7360
|
* Specifies the `validityState` this element is in.
|
|
7300
7361
|
*/
|
|
@@ -7734,6 +7795,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7734
7795
|
this.addEventListener('blur', () => {
|
|
7735
7796
|
this.validate();
|
|
7736
7797
|
this.hasFocus = false;
|
|
7798
|
+
this._clearTypeaheadBuffer();
|
|
7737
7799
|
});
|
|
7738
7800
|
}
|
|
7739
7801
|
|
|
@@ -7747,41 +7809,89 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7747
7809
|
}
|
|
7748
7810
|
}
|
|
7749
7811
|
|
|
7812
|
+
/**
|
|
7813
|
+
* Returns the lowercase, trimmed text content of a menu option.
|
|
7814
|
+
* @private
|
|
7815
|
+
* @param {HTMLElement} option - The menu option element.
|
|
7816
|
+
* @returns {string}
|
|
7817
|
+
*/
|
|
7818
|
+
_getOptionDisplayText(option) {
|
|
7819
|
+
return (option.textContent || '').trim().toLowerCase();
|
|
7820
|
+
}
|
|
7821
|
+
|
|
7822
|
+
/**
|
|
7823
|
+
* Empties the type-ahead buffer and cancels any pending reset timeout.
|
|
7824
|
+
* Called when focus leaves the component, when Escape closes the bib, and on disconnect
|
|
7825
|
+
* so a stale buffer never bridges into a fresh interaction.
|
|
7826
|
+
* @private
|
|
7827
|
+
*/
|
|
7828
|
+
_clearTypeaheadBuffer() {
|
|
7829
|
+
if (this._typeaheadTimeout) {
|
|
7830
|
+
clearTimeout(this._typeaheadTimeout);
|
|
7831
|
+
this._typeaheadTimeout = null;
|
|
7832
|
+
}
|
|
7833
|
+
this.typeaheadBuffer = '';
|
|
7834
|
+
}
|
|
7835
|
+
|
|
7750
7836
|
/**
|
|
7751
7837
|
* Updates the active option in the menu based on keyboard input.
|
|
7838
|
+
*
|
|
7839
|
+
* Implements the WAI-ARIA APG Listbox type-ahead pattern: accumulates printable
|
|
7840
|
+
* keystrokes into a buffer that resets after `typeaheadTimeoutMs` of inactivity.
|
|
7841
|
+
* A multi-character buffer matches the first option whose displayed text starts
|
|
7842
|
+
* with the buffer; repeating a single character cycles through options that start
|
|
7843
|
+
* with that character.
|
|
7752
7844
|
* @private
|
|
7753
7845
|
* @param {string} _key - The key pressed by the user.
|
|
7754
7846
|
* @returns {void}
|
|
7755
7847
|
*/
|
|
7756
7848
|
updateActiveOptionBasedOnKey(_key) {
|
|
7849
|
+
// Ignore non-printable keys (Shift, ArrowDown, Tab, etc.)
|
|
7850
|
+
if (typeof _key !== 'string' || _key.length !== 1) {
|
|
7851
|
+
return;
|
|
7852
|
+
}
|
|
7757
7853
|
|
|
7758
|
-
//
|
|
7759
|
-
|
|
7760
|
-
|
|
7761
|
-
//
|
|
7762
|
-
|
|
7854
|
+
// No selectable options to match against — clear any stale buffer/timer so
|
|
7855
|
+
// Space stays a bib toggle and the next keystroke after fresh options load
|
|
7856
|
+
// starts cleanly. `getActiveOptions` excludes disabled, hidden, and static
|
|
7857
|
+
// options (e.g. `static nomatch` placeholders). Checked BEFORE mutating
|
|
7858
|
+
// the buffer.
|
|
7859
|
+
const options = getActiveOptions(this.menu);
|
|
7860
|
+
if (!options.length) {
|
|
7861
|
+
this._clearTypeaheadBuffer();
|
|
7862
|
+
return;
|
|
7863
|
+
}
|
|
7763
7864
|
|
|
7764
|
-
|
|
7765
|
-
this.lastLetter = key;
|
|
7865
|
+
const key = _key.toLowerCase();
|
|
7766
7866
|
|
|
7767
|
-
//
|
|
7768
|
-
|
|
7769
|
-
|
|
7770
|
-
|
|
7771
|
-
|
|
7867
|
+
// Reset the buffer after a period of inactivity
|
|
7868
|
+
if (this._typeaheadTimeout) {
|
|
7869
|
+
clearTimeout(this._typeaheadTimeout);
|
|
7870
|
+
}
|
|
7871
|
+
this._typeaheadTimeout = setTimeout(() => {
|
|
7872
|
+
this._clearTypeaheadBuffer();
|
|
7873
|
+
}, this.typeaheadTimeoutMs);
|
|
7772
7874
|
|
|
7773
|
-
|
|
7774
|
-
if (letterOptions.length) {
|
|
7875
|
+
this.typeaheadBuffer += key;
|
|
7775
7876
|
|
|
7776
|
-
|
|
7777
|
-
this.dropdown.show();
|
|
7877
|
+
const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
|
|
7778
7878
|
|
|
7779
|
-
|
|
7780
|
-
|
|
7879
|
+
let match = null;
|
|
7880
|
+
if (isRepeatedChar) {
|
|
7881
|
+
const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
|
|
7882
|
+
if (matches.length) {
|
|
7883
|
+
const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
|
|
7884
|
+
match = matches[cycleIndex];
|
|
7885
|
+
}
|
|
7886
|
+
} else {
|
|
7887
|
+
match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
|
|
7888
|
+
}
|
|
7781
7889
|
|
|
7782
|
-
|
|
7783
|
-
|
|
7784
|
-
|
|
7890
|
+
if (match) {
|
|
7891
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
7892
|
+
this.dropdown.show();
|
|
7893
|
+
}
|
|
7894
|
+
this.menu.updateActiveOption(match);
|
|
7785
7895
|
}
|
|
7786
7896
|
}
|
|
7787
7897
|
|
|
@@ -7895,6 +8005,11 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7895
8005
|
}
|
|
7896
8006
|
}
|
|
7897
8007
|
|
|
8008
|
+
disconnectedCallback() {
|
|
8009
|
+
super.disconnectedCallback();
|
|
8010
|
+
this._clearTypeaheadBuffer();
|
|
8011
|
+
}
|
|
8012
|
+
|
|
7898
8013
|
// lifecycle runs only after the element's DOM has been updated the first time
|
|
7899
8014
|
firstUpdated() {
|
|
7900
8015
|
// Add the tag name as an attribute if it is different than the component name
|
|
@@ -10,3 +10,15 @@
|
|
|
10
10
|
* @returns {Array<HTMLElement>} Non-disabled options, empty array when none.
|
|
11
11
|
*/
|
|
12
12
|
export function getEnabledOptions(menu: HTMLElement | null | undefined): Array<HTMLElement>;
|
|
13
|
+
/**
|
|
14
|
+
* Returns the active (selectable + visible) options for type-ahead navigation.
|
|
15
|
+
*
|
|
16
|
+
* Uses auro-menuoption's `isActive` getter, which excludes disabled, hidden,
|
|
17
|
+
* and static options (e.g. `static nomatch` placeholders) so the type-ahead
|
|
18
|
+
* cursor never lands on a non-actionable item. Same empty-safe handling as
|
|
19
|
+
* `getEnabledOptions`.
|
|
20
|
+
*
|
|
21
|
+
* @param {HTMLElement | null | undefined} menu - The auro-menu element.
|
|
22
|
+
* @returns {Array<HTMLElement>} Active options, empty array when none.
|
|
23
|
+
*/
|
|
24
|
+
export function getActiveOptions(menu: HTMLElement | null | undefined): Array<HTMLElement>;
|