@aurodesignsystem-dev/auro-formkit 0.0.0-pr1522.3 → 0.0.0-pr1524.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.
Files changed (46) hide show
  1. package/components/checkbox/demo/customize.min.js +1 -1
  2. package/components/checkbox/demo/getting-started.min.js +1 -1
  3. package/components/checkbox/demo/index.min.js +1 -1
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/customize.min.js +79 -24
  7. package/components/combobox/demo/getting-started.min.js +79 -24
  8. package/components/combobox/demo/index.min.js +79 -24
  9. package/components/combobox/dist/auro-combobox.d.ts +10 -0
  10. package/components/combobox/dist/index.js +79 -24
  11. package/components/combobox/dist/registered.js +79 -24
  12. package/components/counter/demo/customize.min.js +2 -2
  13. package/components/counter/demo/index.min.js +2 -2
  14. package/components/counter/dist/index.js +2 -2
  15. package/components/counter/dist/registered.js +2 -2
  16. package/components/datepicker/demo/customize.min.js +19 -21
  17. package/components/datepicker/demo/index.min.js +19 -21
  18. package/components/datepicker/dist/index.js +19 -21
  19. package/components/datepicker/dist/registered.js +19 -21
  20. package/components/dropdown/demo/customize.min.js +1 -1
  21. package/components/dropdown/demo/getting-started.min.js +1 -1
  22. package/components/dropdown/demo/index.min.js +1 -1
  23. package/components/dropdown/dist/index.js +1 -1
  24. package/components/dropdown/dist/registered.js +1 -1
  25. package/components/form/demo/customize.min.js +179 -82
  26. package/components/form/demo/getting-started.min.js +179 -82
  27. package/components/form/demo/index.min.js +179 -82
  28. package/components/form/demo/registerDemoDeps.min.js +179 -82
  29. package/components/input/demo/customize.min.js +17 -19
  30. package/components/input/demo/getting-started.min.js +17 -19
  31. package/components/input/demo/index.min.js +17 -19
  32. package/components/input/dist/index.js +17 -19
  33. package/components/input/dist/registered.js +17 -19
  34. package/components/radio/demo/customize.min.js +1 -1
  35. package/components/radio/demo/getting-started.min.js +1 -1
  36. package/components/radio/demo/index.min.js +1 -1
  37. package/components/radio/dist/index.js +1 -1
  38. package/components/radio/dist/registered.js +1 -1
  39. package/components/select/demo/customize.min.js +62 -16
  40. package/components/select/demo/getting-started.min.js +62 -16
  41. package/components/select/demo/index.min.js +62 -16
  42. package/components/select/dist/auro-select.d.ts +6 -0
  43. package/components/select/dist/index.js +62 -16
  44. package/components/select/dist/registered.js +62 -16
  45. package/custom-elements.json +16 -2
  46. package/package.json +1 -1
@@ -861,9 +861,6 @@ function navigateArrow(component, direction, options = {}) {
861
861
  * @param {HTMLElement | null | undefined} menu - The auro-menu element.
862
862
  * @returns {Array<HTMLElement>} Non-disabled options, empty array when none.
863
863
  */
864
- function getEnabledOptions(menu) {
865
- return (menu?.options || []).filter((option) => !option.disabled);
866
- }
867
864
 
868
865
  /**
869
866
  * Returns the active (selectable + visible) options for type-ahead navigation.
@@ -933,8 +930,10 @@ const selectKeyboardStrategy = {
933
930
  End(component, evt, ctx) {
934
931
  evt.preventDefault();
935
932
  evt.stopPropagation();
936
- // `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
937
- const lastOption = getEnabledOptions(component.menu).pop();
933
+ // `pop()` is safe here: getActiveOptions returns a fresh filtered array.
934
+ // Uses "active" (not "enabled") so hidden and static rows — which a screen
935
+ // reader must not announce as focused — are skipped.
936
+ const lastOption = getActiveOptions(component.menu).pop();
938
937
  if (!lastOption) {
939
938
  return;
940
939
  }
@@ -965,7 +964,7 @@ const selectKeyboardStrategy = {
965
964
  Home(component, evt, ctx) {
966
965
  evt.preventDefault();
967
966
  evt.stopPropagation();
968
- const [firstOption] = getEnabledOptions(component.menu);
967
+ const [firstOption] = getActiveOptions(component.menu);
969
968
  if (!firstOption) {
970
969
  return;
971
970
  }
@@ -990,6 +989,15 @@ const selectKeyboardStrategy = {
990
989
  },
991
990
 
992
991
  default(component, evt, ctx) {
992
+ // Ignore keys chorded with Ctrl/Meta/Alt so browser/OS shortcuts
993
+ // (Cmd+C, Ctrl+V, Alt+X, Cmd+Space, …) don't leak into typeahead
994
+ // or toggle the bib. Native <select> ignores modified keys.
995
+ // ArrowUp/ArrowDown handle modifier+arrow explicitly above; this
996
+ // guard only affects the default (printable/Space) branch.
997
+ if (evt.ctrlKey || evt.metaKey || evt.altKey) {
998
+ return;
999
+ }
1000
+
993
1001
  // Space resolves to either typeahead-buffer extension or bib toggle
994
1002
  // depending on whether a type-ahead buffer is active. Mirrors native
995
1003
  // <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space
@@ -4920,7 +4928,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
4920
4928
  }
4921
4929
  };
4922
4930
 
4923
- var formkitVersion$1 = '202607012103';
4931
+ var formkitVersion$1 = '202607022214';
4924
4932
 
4925
4933
  class AuroElement extends LitElement {
4926
4934
  static get properties() {
@@ -6959,7 +6967,7 @@ class AuroHelpText extends LitElement {
6959
6967
  }
6960
6968
  }
6961
6969
 
6962
- var formkitVersion = '202607012103';
6970
+ var formkitVersion = '202607022214';
6963
6971
 
6964
6972
  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}`;
6965
6973
 
@@ -7523,8 +7531,11 @@ class AuroSelect extends AuroElement$1 {
7523
7531
  } else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
7524
7532
  this.menu.updateActiveOption(this.optionSelected[0]);
7525
7533
  } else {
7526
- // If no activeOption has yet to be set, then make the first enabled option active by default
7527
- const [firstActive] = getEnabledOptions(this.menu);
7534
+ // If no activeOption has yet to be set, make the first active option
7535
+ // (non-disabled, non-hidden, non-static) active by default. "Active" —
7536
+ // not just "enabled" — so hidden rows and static placeholders never
7537
+ // land in aria-activedescendant on open.
7538
+ const [firstActive] = getActiveOptions(this.menu);
7528
7539
  this.menu.updateActiveOption(firstActive);
7529
7540
  }
7530
7541
  }
@@ -7770,6 +7781,12 @@ class AuroSelect extends AuroElement$1 {
7770
7781
 
7771
7782
  /**
7772
7783
  * Binds all behavior needed to the menu after rendering.
7784
+ *
7785
+ * The `<auro-menu>` reference is captured once and not re-targeted on
7786
+ * `slotchange`. Runtime option mutations are covered via
7787
+ * `auroMenu-optionsChange`, so swap options inside the menu freely; do not
7788
+ * swap the `<auro-menu>` element itself under a live select — remount the
7789
+ * parent `<auro-select>` instead.
7773
7790
  * @private
7774
7791
  * @returns {void}
7775
7792
  */
@@ -7828,6 +7845,15 @@ class AuroSelect extends AuroElement$1 {
7828
7845
  if (this.menu.optionSelected !== undefined) {
7829
7846
  return;
7830
7847
  }
7848
+ // Skip when the select is already cleared (valueless click with no
7849
+ // prior selection): value/optionSelected are already empty and there
7850
+ // is no stale trigger text to refresh, so updateDisplayedValue would
7851
+ // just churn the DOM and request a needless dropdown re-render.
7852
+ const hasStaleState = this.value !== undefined ||
7853
+ (this.multiSelect ? this.optionSelected?.length > 0 : this.optionSelected !== undefined);
7854
+ if (!hasStaleState) {
7855
+ return;
7856
+ }
7831
7857
  this.value = undefined;
7832
7858
  this.optionSelected = this.multiSelect ? [] : undefined;
7833
7859
  // The trigger label is rendered imperatively into #value, so a property
@@ -7857,10 +7883,15 @@ class AuroSelect extends AuroElement$1 {
7857
7883
  if (this.dropdown.isPopoverVisible) {
7858
7884
  announceToScreenReader(this._getAnnouncementRoot(), message);
7859
7885
  } else {
7860
- // Typeahead-on-closed fires this event before `show()` flips
7861
- // isPopoverVisible. Defer so the announcement targets the bib's
7862
- // live region once the fullscreen <dialog> opens otherwise it
7863
- // lands in the host root, which is inert under the active modal.
7886
+ // Typeahead-on-closed calls updateActiveOption() before show(), so
7887
+ // this handler runs with isPopoverVisible still false. queueMicrotask
7888
+ // is safe because show() showBib() flips isPopoverVisible and
7889
+ // dialog.showModal() both run synchronously in the same task; the
7890
+ // microtask queue only drains once _handleTypeahead unwinds, by
7891
+ // which point _getAnnouncementRoot() resolves to the bib's shadow
7892
+ // root inside the now-open modal. Do NOT switch to auroDropdown-toggled
7893
+ // — it fires before showModal(), landing the announcement in the
7894
+ // host root while the dialog is still not-yet-modal.
7864
7895
  queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
7865
7896
  }
7866
7897
  }
@@ -8254,6 +8285,13 @@ class AuroSelect extends AuroElement$1 {
8254
8285
  }
8255
8286
 
8256
8287
  if (changedProperties.has('value')) {
8288
+ // A value change ends the current interaction — whether it came from a
8289
+ // user commit, programmatic assignment, or reset(). Clear the buffer so
8290
+ // a stale prefix does not concatenate onto the next keystroke while the
8291
+ // host still has focus (the blur listener would otherwise be the only
8292
+ // focus-retained clear point, and hideBib() below does not blur).
8293
+ this._clearTypeaheadBuffer();
8294
+
8257
8295
  this.setMenuValue(this.value);
8258
8296
 
8259
8297
  this._updateNativeSelect();
@@ -8309,6 +8347,9 @@ class AuroSelect extends AuroElement$1 {
8309
8347
  * @returns {void}
8310
8348
  */
8311
8349
  reset() {
8350
+ // Defense-in-depth: updated()'s value-change branch also clears, but
8351
+ // reset-to-same-value (e.g. undefined → undefined) skips that path.
8352
+ this._clearTypeaheadBuffer();
8312
8353
  this.menu.reset();
8313
8354
  this.validation.reset(this);
8314
8355
  }
@@ -8331,8 +8372,13 @@ class AuroSelect extends AuroElement$1 {
8331
8372
  // Hidden native <select> has no `multiple` attribute, so any change it fires
8332
8373
  // is a single raw value — applying it in multiSelect mode would collapse the
8333
8374
  // JSON-array `value` shape. Bfcache/autofill can reach this on a name-bearing
8334
- // form control even with aria-hidden/tabindex=-1.
8335
- if (this.multiSelect) return;
8375
+ // form control even with aria-hidden/tabindex=-1, so revert to the expected
8376
+ // mirror (formattedValue[0]) rather than letting the native select drift and
8377
+ // silently submit the autofilled scalar under `name`.
8378
+ if (this.multiSelect) {
8379
+ this._updateNativeSelect();
8380
+ return;
8381
+ }
8336
8382
 
8337
8383
  const selectedOption = event.target.options[event.target.selectedIndex];
8338
8384
  if (!selectedOption) return;
@@ -1306,6 +1306,20 @@
1306
1306
  {
1307
1307
  "kind": "method",
1308
1308
  "name": "handleMenuOptions",
1309
+ "parameters": [
1310
+ {
1311
+ "name": "{ preferComboboxValue = false }",
1312
+ "default": "{}"
1313
+ },
1314
+ {
1315
+ "description": "Optional flag bag.",
1316
+ "name": "options",
1317
+ "optional": true,
1318
+ "type": {
1319
+ "text": "@param {boolean} [options.preferComboboxValue=false] - When true,\n * handleMenuOptions matches the selected option against `this.value`\n * first instead of `this.input.value`. Needed on mount and re-mount\n * because under `persistInput` the consumer's typedValue prop can drift\n * from the framework value (Svelte `{#key}` re-mount after a swap, or\n * SPA preselect after route change) and the old input-first match would\n * then pick the stale text. Only handleSlotChange passes this; typing\n * and clearing paths keep the input-first match so user clears aren't\n * undone.\n * "
1320
+ }
1321
+ }
1322
+ ],
1309
1323
  "description": "Processes hidden state of all menu options and determines if there are any available options not hidden.",
1310
1324
  "privacy": "private",
1311
1325
  "return": {
@@ -19114,7 +19128,7 @@
19114
19128
  {
19115
19129
  "kind": "method",
19116
19130
  "name": "configureMenu",
19117
- "description": "Binds all behavior needed to the menu after rendering.",
19131
+ "description": "Binds all behavior needed to the menu after rendering.\n\nThe `<auro-menu>` reference is captured once and not re-targeted on\n`slotchange`. Runtime option mutations are covered via\n`auroMenu-optionsChange`, so swap options inside the menu freely; do not\nswap the `<auro-menu>` element itself under a live select — remount the\nparent `<auro-select>` instead.",
19118
19132
  "privacy": "private",
19119
19133
  "return": {
19120
19134
  "type": {
@@ -20318,7 +20332,7 @@
20318
20332
  "type": {
20319
20333
  "text": "object"
20320
20334
  },
20321
- "default": "{ ArrowDown(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey || evt.metaKey) { // navigate to last enabled option selectKeyboardStrategy.End(component, evt, ctx); } else { navigateArrow(component, 'down', { ctx }); } } else { component.dropdown.show(); } }, ArrowUp(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey || evt.metaKey) { // navigate to first enabled option selectKeyboardStrategy.Home(component, evt, ctx); } else { navigateArrow(component, 'up', { ctx }); } } else { component.dropdown.show(); } }, Escape(component, evt, ctx) { // Always clear the type-ahead buffer — Escape is a universal cancel. // Safe to call when the buffer is empty. // eslint-disable-next-line no-underscore-dangle if (typeof component._clearTypeaheadBuffer === 'function') { // eslint-disable-next-line no-underscore-dangle component._clearTypeaheadBuffer(); } if (!ctx.isExpanded) { return; } // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups evt.stopPropagation(); component.dropdown.hide(); }, End(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); // `pop()` is safe here: getEnabledOptions returns a fresh filtered array. const lastOption = getEnabledOptions(component.menu).pop(); if (!lastOption) { return; } // Pre-stash before show() so the auroDropdown-toggled handler's // `!optionActive` guard short-circuits the firstActive/selected fallback — // otherwise show() synchronously fires the handler and writes // aria-activedescendant once before we overwrite it. component.menu.updateActiveOption(lastOption); if (!ctx.isExpanded) { component.dropdown.show(); } }, Enter(component, evt, ctx) { // Prevent the keypress from bubbling to parent containers (e.g., forms) // which could interpret Enter as a submit. Matches APG select-only combobox // and native <select> behavior: Enter opens the listbox when closed, selects // the active option when open — it does not submit a parent form. evt.preventDefault(); evt.stopPropagation(); if (!ctx.isExpanded) { component.dropdown.show(); return; } component.menu.makeSelection(); }, Home(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); const [firstOption] = getEnabledOptions(component.menu); if (!firstOption) { return; } // See End() for why this must run before show(). component.menu.updateActiveOption(firstOption); if (!ctx.isExpanded) { component.dropdown.show(); } }, Tab(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive) { component.menu.makeSelection(); } component.dropdown.hide(); }, default(component, evt, ctx) { // Space resolves to either typeahead-buffer extension or bib toggle // depending on whether a type-ahead buffer is active. Mirrors native // <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space // is a search character (e.g. \"San Francisco\"); otherwise it toggles. if (evt.key === ' ') { evt.preventDefault(); evt.stopPropagation(); if (component.typeaheadBuffer && component.typeaheadBuffer.length > 0) { component.updateActiveOptionBasedOnKey(evt.key); return; } if (ctx.isExpanded) { component.dropdown.hide(); } else { component.dropdown.show(); } return; } component.updateActiveOptionBasedOnKey(evt.key); }, }"
20335
+ "default": "{ ArrowDown(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey || evt.metaKey) { // navigate to last enabled option selectKeyboardStrategy.End(component, evt, ctx); } else { navigateArrow(component, 'down', { ctx }); } } else { component.dropdown.show(); } }, ArrowUp(component, evt, ctx) { evt.preventDefault(); if (ctx.isExpanded) { if (evt.altKey || evt.ctrlKey || evt.metaKey) { // navigate to first enabled option selectKeyboardStrategy.Home(component, evt, ctx); } else { navigateArrow(component, 'up', { ctx }); } } else { component.dropdown.show(); } }, Escape(component, evt, ctx) { // Always clear the type-ahead buffer — Escape is a universal cancel. // Safe to call when the buffer is empty. // eslint-disable-next-line no-underscore-dangle if (typeof component._clearTypeaheadBuffer === 'function') { // eslint-disable-next-line no-underscore-dangle component._clearTypeaheadBuffer(); } if (!ctx.isExpanded) { return; } // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups evt.stopPropagation(); component.dropdown.hide(); }, End(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); // `pop()` is safe here: getActiveOptions returns a fresh filtered array. // Uses \"active\" (not \"enabled\") so hidden and static rows — which a screen // reader must not announce as focused — are skipped. const lastOption = getActiveOptions(component.menu).pop(); if (!lastOption) { return; } // Pre-stash before show() so the auroDropdown-toggled handler's // `!optionActive` guard short-circuits the firstActive/selected fallback — // otherwise show() synchronously fires the handler and writes // aria-activedescendant once before we overwrite it. component.menu.updateActiveOption(lastOption); if (!ctx.isExpanded) { component.dropdown.show(); } }, Enter(component, evt, ctx) { // Prevent the keypress from bubbling to parent containers (e.g., forms) // which could interpret Enter as a submit. Matches APG select-only combobox // and native <select> behavior: Enter opens the listbox when closed, selects // the active option when open — it does not submit a parent form. evt.preventDefault(); evt.stopPropagation(); if (!ctx.isExpanded) { component.dropdown.show(); return; } component.menu.makeSelection(); }, Home(component, evt, ctx) { evt.preventDefault(); evt.stopPropagation(); const [firstOption] = getActiveOptions(component.menu); if (!firstOption) { return; } // See End() for why this must run before show(). component.menu.updateActiveOption(firstOption); if (!ctx.isExpanded) { component.dropdown.show(); } }, Tab(component, evt, ctx) { if (!ctx.isExpanded) { return; } // Tab selects the focused option and closes the popup per the // WAI-ARIA APG select-only combobox / listbox pattern. if (component.optionActive) { component.menu.makeSelection(); } component.dropdown.hide(); }, default(component, evt, ctx) { // Ignore keys chorded with Ctrl/Meta/Alt so browser/OS shortcuts // (Cmd+C, Ctrl+V, Alt+X, Cmd+Space, …) don't leak into typeahead // or toggle the bib. Native <select> ignores modified keys. // ArrowUp/ArrowDown handle modifier+arrow explicitly above; this // guard only affects the default (printable/Space) branch. if (evt.ctrlKey || evt.metaKey || evt.altKey) { return; } // Space resolves to either typeahead-buffer extension or bib toggle // depending on whether a type-ahead buffer is active. Mirrors native // <select> and the WAI-ARIA APG Listbox guidance: mid-typeahead space // is a search character (e.g. \"San Francisco\"); otherwise it toggles. if (evt.key === ' ') { evt.preventDefault(); evt.stopPropagation(); if (component.typeaheadBuffer && component.typeaheadBuffer.length > 0) { component.updateActiveOptionBasedOnKey(evt.key); return; } if (ctx.isExpanded) { component.dropdown.hide(); } else { component.dropdown.show(); } return; } component.updateActiveOptionBasedOnKey(evt.key); }, }"
20322
20336
  }
20323
20337
  ],
20324
20338
  "exports": [
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr1522.3",
3
+ "version": "0.0.0-pr1524.1",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
6
6
  "bugs": {