@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.
Files changed (71) hide show
  1. package/components/checkbox/demo/customize.html +1 -2
  2. package/components/checkbox/demo/customize.min.js +1 -1
  3. package/components/checkbox/demo/getting-started.min.js +1 -1
  4. package/components/checkbox/demo/index.min.js +1 -1
  5. package/components/checkbox/dist/index.js +1 -1
  6. package/components/checkbox/dist/registered.js +1 -1
  7. package/components/combobox/demo/customize.html +1 -2
  8. package/components/combobox/demo/customize.md +108 -132
  9. package/components/combobox/demo/customize.min.js +6 -6
  10. package/components/combobox/demo/getting-started.min.js +6 -6
  11. package/components/combobox/demo/index.min.js +6 -6
  12. package/components/combobox/dist/index.js +4 -4
  13. package/components/combobox/dist/registered.js +4 -4
  14. package/components/counter/demo/customize.min.js +2 -2
  15. package/components/counter/demo/index.min.js +2 -2
  16. package/components/counter/dist/index.js +2 -2
  17. package/components/counter/dist/registered.js +2 -2
  18. package/components/datepicker/demo/api.md +2 -2
  19. package/components/datepicker/demo/customize.js +2 -2
  20. package/components/datepicker/demo/customize.md +29 -74
  21. package/components/datepicker/demo/customize.min.js +10 -10
  22. package/components/datepicker/demo/index.min.js +8 -8
  23. package/components/datepicker/dist/index.js +8 -8
  24. package/components/datepicker/dist/registered.js +8 -8
  25. package/components/datepicker/dist/src/auro-datepicker.d.ts +2 -2
  26. package/components/dropdown/demo/customize.min.js +1 -1
  27. package/components/dropdown/demo/getting-started.min.js +1 -1
  28. package/components/dropdown/demo/index.min.js +1 -1
  29. package/components/dropdown/dist/index.js +1 -1
  30. package/components/dropdown/dist/registered.js +1 -1
  31. package/components/form/demo/customize.html +6 -6
  32. package/components/form/demo/customize.js +19 -0
  33. package/components/form/demo/customize.md +203 -51
  34. package/components/form/demo/customize.min.js +588 -83
  35. package/components/form/demo/getting-started.min.js +516 -83
  36. package/components/form/demo/index.min.js +516 -83
  37. package/components/form/demo/registerDemoDeps.min.js +153 -46
  38. package/components/form/dist/auro-form.d.ts +122 -4
  39. package/components/form/dist/index.js +363 -37
  40. package/components/form/dist/registered.js +363 -37
  41. package/components/input/demo/api.md +1 -1
  42. package/components/input/demo/customize.html +1 -2
  43. package/components/input/demo/customize.md +2 -2
  44. package/components/input/demo/customize.min.js +2 -2
  45. package/components/input/demo/getting-started.min.js +2 -2
  46. package/components/input/demo/index.md +2 -2
  47. package/components/input/demo/index.min.js +2 -2
  48. package/components/input/dist/auro-input.d.ts +1 -1
  49. package/components/input/dist/index.js +2 -2
  50. package/components/input/dist/registered.js +2 -2
  51. package/components/menu/demo/index.min.js +2 -2
  52. package/components/menu/dist/index.js +2 -2
  53. package/components/menu/dist/registered.js +2 -2
  54. package/components/radio/demo/customize.min.js +1 -1
  55. package/components/radio/demo/getting-started.min.js +1 -1
  56. package/components/radio/demo/index.min.js +1 -1
  57. package/components/radio/dist/index.js +1 -1
  58. package/components/radio/dist/registered.js +1 -1
  59. package/components/select/demo/api.md +1 -0
  60. package/components/select/demo/customize.html +1 -2
  61. package/components/select/demo/customize.md +71 -0
  62. package/components/select/demo/customize.min.js +135 -28
  63. package/components/select/demo/getting-started.min.js +135 -28
  64. package/components/select/demo/index.min.js +135 -28
  65. package/components/select/demo/keyboard-behavior.md +18 -0
  66. package/components/select/dist/auro-select.d.ts +38 -2
  67. package/components/select/dist/index.js +133 -26
  68. package/components/select/dist/registered.js +133 -26
  69. package/components/select/dist/selectUtils.d.ts +12 -0
  70. package/custom-elements.json +1654 -1441
  71. package/package.json +1 -1
@@ -256,6 +256,15 @@ export class AuroSelect extends AuroElement {
256
256
  reflect: boolean;
257
257
  attribute: boolean;
258
258
  };
259
+ /**
260
+ * Milliseconds of keyboard inactivity before the type-ahead buffer resets.
261
+ * Increase for users who type slowly.
262
+ * @default 500
263
+ */
264
+ typeaheadTimeoutMs: {
265
+ type: NumberConstructor;
266
+ reflect: boolean;
267
+ };
259
268
  /**
260
269
  * Specifies the `validityState` this element is in.
261
270
  */
@@ -325,6 +334,14 @@ export class AuroSelect extends AuroElement {
325
334
  * @private
326
335
  */
327
336
  private hasDisplayValueContent;
337
+ /**
338
+ * @private
339
+ */
340
+ private typeaheadBuffer;
341
+ /**
342
+ * @private
343
+ */
344
+ private _typeaheadTimeout;
328
345
  /**
329
346
  * @private
330
347
  * @returns {void} Internal defaults.
@@ -335,6 +352,7 @@ export class AuroSelect extends AuroElement {
335
352
  fullscreenBreakpoint: string | undefined;
336
353
  onDark: boolean | undefined;
337
354
  isPopoverVisible: any;
355
+ typeaheadTimeoutMs: number | undefined;
338
356
  shape: string | undefined;
339
357
  size: string | undefined;
340
358
  /**
@@ -421,15 +439,33 @@ export class AuroSelect extends AuroElement {
421
439
  * @param {number} index - Index of the option to make active.
422
440
  */
423
441
  updateActiveOption(index: number): void;
442
+ /**
443
+ * Returns the lowercase, trimmed text content of a menu option.
444
+ * @private
445
+ * @param {HTMLElement} option - The menu option element.
446
+ * @returns {string}
447
+ */
448
+ private _getOptionDisplayText;
449
+ /**
450
+ * Empties the type-ahead buffer and cancels any pending reset timeout.
451
+ * Called when focus leaves the component, when Escape closes the bib, and on disconnect
452
+ * so a stale buffer never bridges into a fresh interaction.
453
+ * @private
454
+ */
455
+ private _clearTypeaheadBuffer;
424
456
  /**
425
457
  * Updates the active option in the menu based on keyboard input.
458
+ *
459
+ * Implements the WAI-ARIA APG Listbox type-ahead pattern: accumulates printable
460
+ * keystrokes into a buffer that resets after `typeaheadTimeoutMs` of inactivity.
461
+ * A multi-character buffer matches the first option whose displayed text starts
462
+ * with the buffer; repeating a single character cycles through options that start
463
+ * with that character.
426
464
  * @private
427
465
  * @param {string} _key - The key pressed by the user.
428
466
  * @returns {void}
429
467
  */
430
468
  private updateActiveOptionBasedOnKey;
431
- sameLetterTimes: any;
432
- lastLetter: string | undefined;
433
469
  /**
434
470
  * Manages the visibility of the dropdown based on loading state changes.
435
471
  *
@@ -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
- component.updateActiveOptionBasedOnKey(evt.key);
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
- return;
980
+ } else {
981
+ component.dropdown.show();
951
982
  }
952
- component.dropdown.show();
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 = '202606171946';
4897
+ var formkitVersion$1 = '202606222118';
4866
4898
 
4867
4899
  class AuroElement extends LitElement {
4868
4900
  static get properties() {
@@ -6875,7 +6907,7 @@ class AuroHelpText extends LitElement {
6875
6907
  }
6876
6908
  }
6877
6909
 
6878
- var formkitVersion = '202606171946';
6910
+ var formkitVersion = '202606222118';
6879
6911
 
6880
6912
  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
6913
 
@@ -6980,6 +7012,16 @@ class AuroSelect extends AuroElement$1 {
6980
7012
  * @private
6981
7013
  */
6982
7014
  this.hasDisplayValueContent = false;
7015
+
7016
+ /**
7017
+ * @private
7018
+ */
7019
+ this.typeaheadBuffer = '';
7020
+
7021
+ /**
7022
+ * @private
7023
+ */
7024
+ this._typeaheadTimeout = null;
6983
7025
  }
6984
7026
 
6985
7027
  /**
@@ -6992,6 +7034,7 @@ class AuroSelect extends AuroElement$1 {
6992
7034
  this.fullscreenBreakpoint = 'sm';
6993
7035
  this.onDark = false;
6994
7036
  this.isPopoverVisible = false;
7037
+ this.typeaheadTimeoutMs = 500;
6995
7038
 
6996
7039
  // Layout Config
6997
7040
  this.layout = 'classic';
@@ -7295,6 +7338,16 @@ class AuroSelect extends AuroElement$1 {
7295
7338
  attribute: false
7296
7339
  },
7297
7340
 
7341
+ /**
7342
+ * Milliseconds of keyboard inactivity before the type-ahead buffer resets.
7343
+ * Increase for users who type slowly.
7344
+ * @default 500
7345
+ */
7346
+ typeaheadTimeoutMs: {
7347
+ type: Number,
7348
+ reflect: true
7349
+ },
7350
+
7298
7351
  /**
7299
7352
  * Specifies the `validityState` this element is in.
7300
7353
  */
@@ -7734,6 +7787,7 @@ class AuroSelect extends AuroElement$1 {
7734
7787
  this.addEventListener('blur', () => {
7735
7788
  this.validate();
7736
7789
  this.hasFocus = false;
7790
+ this._clearTypeaheadBuffer();
7737
7791
  });
7738
7792
  }
7739
7793
 
@@ -7747,41 +7801,89 @@ class AuroSelect extends AuroElement$1 {
7747
7801
  }
7748
7802
  }
7749
7803
 
7804
+ /**
7805
+ * Returns the lowercase, trimmed text content of a menu option.
7806
+ * @private
7807
+ * @param {HTMLElement} option - The menu option element.
7808
+ * @returns {string}
7809
+ */
7810
+ _getOptionDisplayText(option) {
7811
+ return (option.textContent || '').trim().toLowerCase();
7812
+ }
7813
+
7814
+ /**
7815
+ * Empties the type-ahead buffer and cancels any pending reset timeout.
7816
+ * Called when focus leaves the component, when Escape closes the bib, and on disconnect
7817
+ * so a stale buffer never bridges into a fresh interaction.
7818
+ * @private
7819
+ */
7820
+ _clearTypeaheadBuffer() {
7821
+ if (this._typeaheadTimeout) {
7822
+ clearTimeout(this._typeaheadTimeout);
7823
+ this._typeaheadTimeout = null;
7824
+ }
7825
+ this.typeaheadBuffer = '';
7826
+ }
7827
+
7750
7828
  /**
7751
7829
  * Updates the active option in the menu based on keyboard input.
7830
+ *
7831
+ * Implements the WAI-ARIA APG Listbox type-ahead pattern: accumulates printable
7832
+ * keystrokes into a buffer that resets after `typeaheadTimeoutMs` of inactivity.
7833
+ * A multi-character buffer matches the first option whose displayed text starts
7834
+ * with the buffer; repeating a single character cycles through options that start
7835
+ * with that character.
7752
7836
  * @private
7753
7837
  * @param {string} _key - The key pressed by the user.
7754
7838
  * @returns {void}
7755
7839
  */
7756
7840
  updateActiveOptionBasedOnKey(_key) {
7841
+ // Ignore non-printable keys (Shift, ArrowDown, Tab, etc.)
7842
+ if (typeof _key !== 'string' || _key.length !== 1) {
7843
+ return;
7844
+ }
7757
7845
 
7758
- // Get a lowercase version of the key pressed
7759
- const key = _key.toLowerCase();
7760
-
7761
- // Calculate how many times the same letter has been pressed
7762
- this.sameLetterTimes = key === this.lastLetter ? this.sameLetterTimes + 1 : 0;
7846
+ // No selectable options to match against clear any stale buffer/timer so
7847
+ // Space stays a bib toggle and the next keystroke after fresh options load
7848
+ // starts cleanly. `getActiveOptions` excludes disabled, hidden, and static
7849
+ // options (e.g. `static nomatch` placeholders). Checked BEFORE mutating
7850
+ // the buffer.
7851
+ const options = getActiveOptions(this.menu);
7852
+ if (!options.length) {
7853
+ this._clearTypeaheadBuffer();
7854
+ return;
7855
+ }
7763
7856
 
7764
- // Set last letter for tracking
7765
- this.lastLetter = key;
7857
+ const key = _key.toLowerCase();
7766
7858
 
7767
- // Get all the options that start with the last letter pressed
7768
- const letterOptions = this.menu.options.filter((option) => {
7769
- const optionText = option.value || '';
7770
- return optionText.toLowerCase().startsWith(this.lastLetter);
7771
- });
7859
+ // Reset the buffer after a period of inactivity
7860
+ if (this._typeaheadTimeout) {
7861
+ clearTimeout(this._typeaheadTimeout);
7862
+ }
7863
+ this._typeaheadTimeout = setTimeout(() => {
7864
+ this._clearTypeaheadBuffer();
7865
+ }, this.typeaheadTimeoutMs);
7772
7866
 
7773
- // If we have options that match the letter pressed
7774
- if (letterOptions.length) {
7867
+ this.typeaheadBuffer += key;
7775
7868
 
7776
- // Show the dropdown if it is not already visible
7777
- this.dropdown.show();
7869
+ const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7778
7870
 
7779
- // Get the index we're after based on how many times the letter has been pressed and the length of the letterOptions array
7780
- const index = this.sameLetterTimes < letterOptions.length ? this.sameLetterTimes : this.sameLetterTimes % letterOptions.length;
7871
+ let match = null;
7872
+ if (isRepeatedChar) {
7873
+ const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
7874
+ if (matches.length) {
7875
+ const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
7876
+ match = matches[cycleIndex];
7877
+ }
7878
+ } else {
7879
+ match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7880
+ }
7781
7881
 
7782
- // Select the new option in the menu
7783
- const newOption = letterOptions[index];
7784
- this.menu.updateActiveOption(newOption);
7882
+ if (match) {
7883
+ if (!this.dropdown.isPopoverVisible) {
7884
+ this.dropdown.show();
7885
+ }
7886
+ this.menu.updateActiveOption(match);
7785
7887
  }
7786
7888
  }
7787
7889
 
@@ -7895,6 +7997,11 @@ class AuroSelect extends AuroElement$1 {
7895
7997
  }
7896
7998
  }
7897
7999
 
8000
+ disconnectedCallback() {
8001
+ super.disconnectedCallback();
8002
+ this._clearTypeaheadBuffer();
8003
+ }
8004
+
7898
8005
  // lifecycle runs only after the element's DOM has been updated the first time
7899
8006
  firstUpdated() {
7900
8007
  // 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
- component.updateActiveOptionBasedOnKey(evt.key);
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
- return;
980
+ } else {
981
+ component.dropdown.show();
951
982
  }
952
- component.dropdown.show();
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 = '202606171946';
4897
+ var formkitVersion$1 = '202606222118';
4866
4898
 
4867
4899
  class AuroElement extends LitElement {
4868
4900
  static get properties() {
@@ -6875,7 +6907,7 @@ class AuroHelpText extends LitElement {
6875
6907
  }
6876
6908
  }
6877
6909
 
6878
- var formkitVersion = '202606171946';
6910
+ var formkitVersion = '202606222118';
6879
6911
 
6880
6912
  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
6913
 
@@ -6980,6 +7012,16 @@ class AuroSelect extends AuroElement$1 {
6980
7012
  * @private
6981
7013
  */
6982
7014
  this.hasDisplayValueContent = false;
7015
+
7016
+ /**
7017
+ * @private
7018
+ */
7019
+ this.typeaheadBuffer = '';
7020
+
7021
+ /**
7022
+ * @private
7023
+ */
7024
+ this._typeaheadTimeout = null;
6983
7025
  }
6984
7026
 
6985
7027
  /**
@@ -6992,6 +7034,7 @@ class AuroSelect extends AuroElement$1 {
6992
7034
  this.fullscreenBreakpoint = 'sm';
6993
7035
  this.onDark = false;
6994
7036
  this.isPopoverVisible = false;
7037
+ this.typeaheadTimeoutMs = 500;
6995
7038
 
6996
7039
  // Layout Config
6997
7040
  this.layout = 'classic';
@@ -7295,6 +7338,16 @@ class AuroSelect extends AuroElement$1 {
7295
7338
  attribute: false
7296
7339
  },
7297
7340
 
7341
+ /**
7342
+ * Milliseconds of keyboard inactivity before the type-ahead buffer resets.
7343
+ * Increase for users who type slowly.
7344
+ * @default 500
7345
+ */
7346
+ typeaheadTimeoutMs: {
7347
+ type: Number,
7348
+ reflect: true
7349
+ },
7350
+
7298
7351
  /**
7299
7352
  * Specifies the `validityState` this element is in.
7300
7353
  */
@@ -7734,6 +7787,7 @@ class AuroSelect extends AuroElement$1 {
7734
7787
  this.addEventListener('blur', () => {
7735
7788
  this.validate();
7736
7789
  this.hasFocus = false;
7790
+ this._clearTypeaheadBuffer();
7737
7791
  });
7738
7792
  }
7739
7793
 
@@ -7747,41 +7801,89 @@ class AuroSelect extends AuroElement$1 {
7747
7801
  }
7748
7802
  }
7749
7803
 
7804
+ /**
7805
+ * Returns the lowercase, trimmed text content of a menu option.
7806
+ * @private
7807
+ * @param {HTMLElement} option - The menu option element.
7808
+ * @returns {string}
7809
+ */
7810
+ _getOptionDisplayText(option) {
7811
+ return (option.textContent || '').trim().toLowerCase();
7812
+ }
7813
+
7814
+ /**
7815
+ * Empties the type-ahead buffer and cancels any pending reset timeout.
7816
+ * Called when focus leaves the component, when Escape closes the bib, and on disconnect
7817
+ * so a stale buffer never bridges into a fresh interaction.
7818
+ * @private
7819
+ */
7820
+ _clearTypeaheadBuffer() {
7821
+ if (this._typeaheadTimeout) {
7822
+ clearTimeout(this._typeaheadTimeout);
7823
+ this._typeaheadTimeout = null;
7824
+ }
7825
+ this.typeaheadBuffer = '';
7826
+ }
7827
+
7750
7828
  /**
7751
7829
  * Updates the active option in the menu based on keyboard input.
7830
+ *
7831
+ * Implements the WAI-ARIA APG Listbox type-ahead pattern: accumulates printable
7832
+ * keystrokes into a buffer that resets after `typeaheadTimeoutMs` of inactivity.
7833
+ * A multi-character buffer matches the first option whose displayed text starts
7834
+ * with the buffer; repeating a single character cycles through options that start
7835
+ * with that character.
7752
7836
  * @private
7753
7837
  * @param {string} _key - The key pressed by the user.
7754
7838
  * @returns {void}
7755
7839
  */
7756
7840
  updateActiveOptionBasedOnKey(_key) {
7841
+ // Ignore non-printable keys (Shift, ArrowDown, Tab, etc.)
7842
+ if (typeof _key !== 'string' || _key.length !== 1) {
7843
+ return;
7844
+ }
7757
7845
 
7758
- // Get a lowercase version of the key pressed
7759
- const key = _key.toLowerCase();
7760
-
7761
- // Calculate how many times the same letter has been pressed
7762
- this.sameLetterTimes = key === this.lastLetter ? this.sameLetterTimes + 1 : 0;
7846
+ // No selectable options to match against clear any stale buffer/timer so
7847
+ // Space stays a bib toggle and the next keystroke after fresh options load
7848
+ // starts cleanly. `getActiveOptions` excludes disabled, hidden, and static
7849
+ // options (e.g. `static nomatch` placeholders). Checked BEFORE mutating
7850
+ // the buffer.
7851
+ const options = getActiveOptions(this.menu);
7852
+ if (!options.length) {
7853
+ this._clearTypeaheadBuffer();
7854
+ return;
7855
+ }
7763
7856
 
7764
- // Set last letter for tracking
7765
- this.lastLetter = key;
7857
+ const key = _key.toLowerCase();
7766
7858
 
7767
- // Get all the options that start with the last letter pressed
7768
- const letterOptions = this.menu.options.filter((option) => {
7769
- const optionText = option.value || '';
7770
- return optionText.toLowerCase().startsWith(this.lastLetter);
7771
- });
7859
+ // Reset the buffer after a period of inactivity
7860
+ if (this._typeaheadTimeout) {
7861
+ clearTimeout(this._typeaheadTimeout);
7862
+ }
7863
+ this._typeaheadTimeout = setTimeout(() => {
7864
+ this._clearTypeaheadBuffer();
7865
+ }, this.typeaheadTimeoutMs);
7772
7866
 
7773
- // If we have options that match the letter pressed
7774
- if (letterOptions.length) {
7867
+ this.typeaheadBuffer += key;
7775
7868
 
7776
- // Show the dropdown if it is not already visible
7777
- this.dropdown.show();
7869
+ const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7778
7870
 
7779
- // Get the index we're after based on how many times the letter has been pressed and the length of the letterOptions array
7780
- const index = this.sameLetterTimes < letterOptions.length ? this.sameLetterTimes : this.sameLetterTimes % letterOptions.length;
7871
+ let match = null;
7872
+ if (isRepeatedChar) {
7873
+ const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
7874
+ if (matches.length) {
7875
+ const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
7876
+ match = matches[cycleIndex];
7877
+ }
7878
+ } else {
7879
+ match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7880
+ }
7781
7881
 
7782
- // Select the new option in the menu
7783
- const newOption = letterOptions[index];
7784
- this.menu.updateActiveOption(newOption);
7882
+ if (match) {
7883
+ if (!this.dropdown.isPopoverVisible) {
7884
+ this.dropdown.show();
7885
+ }
7886
+ this.menu.updateActiveOption(match);
7785
7887
  }
7786
7888
  }
7787
7889
 
@@ -7895,6 +7997,11 @@ class AuroSelect extends AuroElement$1 {
7895
7997
  }
7896
7998
  }
7897
7999
 
8000
+ disconnectedCallback() {
8001
+ super.disconnectedCallback();
8002
+ this._clearTypeaheadBuffer();
8003
+ }
8004
+
7898
8005
  // lifecycle runs only after the element's DOM has been updated the first time
7899
8006
  firstUpdated() {
7900
8007
  // 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>;