@aurodesignsystem-dev/auro-formkit 0.0.0-pr1511.0 → 0.0.0-pr1512.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) 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 +119 -97
  7. package/components/combobox/demo/getting-started.min.js +119 -97
  8. package/components/combobox/demo/index.min.js +119 -97
  9. package/components/combobox/dist/index.js +118 -96
  10. package/components/combobox/dist/registered.js +118 -96
  11. package/components/counter/demo/customize.min.js +2 -3
  12. package/components/counter/demo/index.min.js +2 -3
  13. package/components/counter/dist/index.js +2 -3
  14. package/components/counter/dist/registered.js +2 -3
  15. package/components/datepicker/demo/customize.min.js +139 -98
  16. package/components/datepicker/demo/index.min.js +139 -98
  17. package/components/datepicker/dist/index.js +139 -98
  18. package/components/datepicker/dist/registered.js +139 -98
  19. package/components/dropdown/demo/customize.min.js +1 -2
  20. package/components/dropdown/demo/getting-started.min.js +1 -2
  21. package/components/dropdown/demo/index.min.js +1 -2
  22. package/components/dropdown/dist/index.js +1 -2
  23. package/components/dropdown/dist/registered.js +1 -2
  24. package/components/form/demo/customize.min.js +434 -426
  25. package/components/form/demo/getting-started.min.js +434 -426
  26. package/components/form/demo/index.min.js +434 -426
  27. package/components/form/demo/registerDemoDeps.min.js +434 -426
  28. package/components/input/demo/api.md +5 -5
  29. package/components/input/demo/customize.md +8 -8
  30. package/components/input/demo/customize.min.js +116 -93
  31. package/components/input/demo/getting-started.min.js +116 -93
  32. package/components/input/demo/index.min.js +116 -93
  33. package/components/input/dist/base-input.d.ts +33 -44
  34. package/components/input/dist/index.js +129 -94
  35. package/components/input/dist/registered.js +116 -93
  36. package/components/radio/demo/customize.min.js +1 -1
  37. package/components/radio/demo/getting-started.min.js +1 -1
  38. package/components/radio/demo/index.min.js +1 -1
  39. package/components/radio/dist/index.js +1 -1
  40. package/components/radio/dist/registered.js +1 -1
  41. package/components/select/demo/customize.min.js +55 -132
  42. package/components/select/demo/getting-started.min.js +55 -132
  43. package/components/select/demo/index.min.js +55 -132
  44. package/components/select/demo/keyboard-behavior.md +4 -18
  45. package/components/select/dist/auro-select.d.ts +8 -20
  46. package/components/select/dist/index.js +55 -132
  47. package/components/select/dist/registered.js +55 -132
  48. package/custom-elements.json +1942 -1728
  49. package/package.json +1 -1
@@ -959,24 +959,19 @@ const selectKeyboardStrategy = {
959
959
  },
960
960
 
961
961
  End(component, evt, ctx) {
962
+ if (!ctx.isExpanded) {
963
+ return;
964
+ }
962
965
  evt.preventDefault();
963
966
  evt.stopPropagation();
964
967
  // `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
965
968
  const lastOption = getEnabledOptions(component.menu).pop();
966
- if (!lastOption) {
967
- return;
969
+ if (lastOption) {
970
+ component.menu.updateActiveOption(lastOption);
968
971
  }
969
- if (!ctx.isExpanded) {
970
- component.dropdown.show();
971
- }
972
- component.menu.updateActiveOption(lastOption);
973
972
  },
974
973
 
975
974
  Enter(component, evt, ctx) {
976
- // Prevent the keypress from bubbling to parent containers (e.g., forms)
977
- // which could interpret Enter as a submit. Matches APG select-only combobox
978
- // and native <select> behavior: Enter opens the listbox when closed, selects
979
- // the active option when open — it does not submit a parent form.
980
975
  evt.preventDefault();
981
976
  evt.stopPropagation();
982
977
  if (!ctx.isExpanded) {
@@ -987,16 +982,15 @@ const selectKeyboardStrategy = {
987
982
  },
988
983
 
989
984
  Home(component, evt, ctx) {
985
+ if (!ctx.isExpanded) {
986
+ return;
987
+ }
990
988
  evt.preventDefault();
991
989
  evt.stopPropagation();
992
990
  const [firstOption] = getEnabledOptions(component.menu);
993
- if (!firstOption) {
994
- return;
995
- }
996
- if (!ctx.isExpanded) {
997
- component.dropdown.show();
991
+ if (firstOption) {
992
+ component.menu.updateActiveOption(firstOption);
998
993
  }
999
- component.menu.updateActiveOption(firstOption);
1000
994
  },
1001
995
 
1002
996
  Tab(component, evt, ctx) {
@@ -4967,7 +4961,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
4967
4961
  }
4968
4962
  };
4969
4963
 
4970
- var formkitVersion$1 = '202606252142';
4964
+ var formkitVersion$1 = '202606252337';
4971
4965
 
4972
4966
  class AuroElement extends i$2 {
4973
4967
  static get properties() {
@@ -6239,7 +6233,6 @@ class AuroDropdown extends AuroElement {
6239
6233
  role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
6240
6234
  aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
6241
6235
  aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
6242
- aria-haspopup="${o(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
6243
6236
  aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
6244
6237
  aria-disabled="${o(this.disabled ? 'true' : undefined)}"
6245
6238
  @focusin="${this.handleFocusin}"
@@ -6989,7 +6982,7 @@ class AuroHelpText extends i$2 {
6989
6982
  }
6990
6983
  }
6991
6984
 
6992
- var formkitVersion = '202606252142';
6985
+ var formkitVersion = '202606252337';
6993
6986
 
6994
6987
  var styleCss$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
6995
6988
 
@@ -7321,6 +7314,14 @@ class AuroSelect extends AuroElement$1 {
7321
7314
  reflect: true
7322
7315
  },
7323
7316
 
7317
+ /**
7318
+ * @private
7319
+ */
7320
+ options: {
7321
+ type: Array,
7322
+ state: true
7323
+ },
7324
+
7324
7325
  /**
7325
7326
  * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
7326
7327
  * @type {HTMLElement|Array<HTMLElement>}
@@ -7608,68 +7609,16 @@ class AuroSelect extends AuroElement$1 {
7608
7609
  this.dropdown.dropdownWidth = this.customBibWidth;
7609
7610
  }
7610
7611
 
7611
- this._syncLabelText();
7612
+ // Pass label text to the dropdown bib for accessible dialog naming
7613
+ const labelElement = this.querySelector('span[slot="label"]');
7614
+ if (labelElement) {
7615
+ this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
7616
+ }
7612
7617
 
7613
7618
  // Exposes the CSS parts from the dropdown for styling
7614
7619
  this.dropdown.exposeCssParts();
7615
7620
  }
7616
7621
 
7617
- /**
7618
- * Reads the current label slot text and pushes it to the dropdown bib
7619
- * (for dialog naming) and the menu (for listbox aria-label). Safe to call
7620
- * before either child has been wired up — each branch self-guards.
7621
- * @private
7622
- */
7623
- _syncLabelText() {
7624
- const labelElement = this.querySelector('[slot="label"]');
7625
- const text = labelElement ? labelElement.textContent.trim() : '';
7626
- if (this.dropdown) {
7627
- this.dropdown.bibDialogLabel = text || undefined;
7628
- }
7629
- if (this.menu) {
7630
- if (text) {
7631
- this.menu.setAttribute('aria-label', text);
7632
- } else {
7633
- this.menu.removeAttribute('aria-label');
7634
- }
7635
- }
7636
- }
7637
-
7638
- /**
7639
- * Keeps the dialog/menu accessible names in sync when consumers mutate the
7640
- * label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
7641
- * insufficient — it doesn't fire when textContent of an already-assigned
7642
- * slotted node changes, which is the common case. We scope the observer to
7643
- * the label node itself (not the whole host subtree) so option-content
7644
- * mutations don't trigger label re-syncs, and re-target on `slotchange`
7645
- * when consumers add or replace the label element.
7646
- * @private
7647
- */
7648
- _observeLabelChanges() {
7649
- if (this._labelObserver) return;
7650
- this._labelObserver = new MutationObserver(() => this._syncLabelText());
7651
-
7652
- const retarget = () => {
7653
- this._labelObserver.disconnect();
7654
- const labelElement = this.querySelector('[slot="label"]');
7655
- if (labelElement) {
7656
- this._labelObserver.observe(labelElement, {
7657
- childList: true,
7658
- subtree: true,
7659
- characterData: true
7660
- });
7661
- }
7662
- this._syncLabelText();
7663
- };
7664
-
7665
- retarget();
7666
-
7667
- this._retargetLabelObserver = retarget;
7668
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
7669
- slot.addEventListener('slotchange', retarget);
7670
- });
7671
- }
7672
-
7673
7622
  /**
7674
7623
  * This will register this element with the browser.
7675
7624
  * @param {string} [name="auro-select"] - The name of element that you want to register to.
@@ -7820,7 +7769,11 @@ class AuroSelect extends AuroElement$1 {
7820
7769
  this.updateMenuShapeSize();
7821
7770
  this.setMenuValue(this.value);
7822
7771
 
7823
- this._syncLabelText();
7772
+ // Set accessible name on the menu for screen readers based on the label slot content
7773
+ const labelElement = this.querySelector('[slot="label"]');
7774
+ if (labelElement) {
7775
+ this.menu.setAttribute('aria-label', labelElement.textContent.trim());
7776
+ }
7824
7777
 
7825
7778
  if (this.multiSelect) {
7826
7779
  this.menu.multiSelect = this.multiSelect;
@@ -7832,21 +7785,8 @@ class AuroSelect extends AuroElement$1 {
7832
7785
  if (typeof this.menu.initItems === 'function') {
7833
7786
  this.menu.initItems();
7834
7787
  }
7788
+ this.options = this.menu.options;
7835
7789
  this.updateOptionPositions();
7836
- // renderNativeSelect reads this.menu.options, which the parent doesn't
7837
- // observe — request an update so the hidden native <option> list reflects
7838
- // the menu's options after initItems populates them.
7839
- this.requestUpdate();
7840
-
7841
- // Keep aria-setsize/aria-posinset (and the native <option> list) in sync
7842
- // when the menu re-initializes its items — e.g., slotchange, async/lazy
7843
- // loads, value-triggered re-init. Without this, stale set-size is
7844
- // announced and the native select goes stale after dynamic mutations.
7845
- this.menu.addEventListener('auroMenu-optionsChange', () => {
7846
- this.updateOptionPositions();
7847
- this.requestUpdate();
7848
- });
7849
-
7850
7790
  this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
7851
7791
 
7852
7792
  this.menu.addEventListener("auroMenu-selectValueFailure", () => {
@@ -7865,22 +7805,11 @@ class AuroSelect extends AuroElement$1 {
7865
7805
  this.dropdown.setActiveDescendant(this.optionActive);
7866
7806
  }
7867
7807
 
7868
- // Announce the active option for screen readers. Skip when the activated
7869
- // option is already selected: Enter triggers an auroMenu-selectedOption
7870
- // re-announce, and aria-selected on the active descendant otherwise
7871
- // conveys state without an explicit utterance.
7872
- if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
7808
+ // Announce the active option for screen readers
7809
+ if (this.optionActive) {
7873
7810
  const optionText = this.optionActive.textContent.trim();
7874
- const message = `${optionText}, not selected`;
7875
- if (this.dropdown.isPopoverVisible) {
7876
- announceToScreenReader(this._getAnnouncementRoot(), message);
7877
- } else {
7878
- // Typeahead-on-closed fires this event before `show()` flips
7879
- // isPopoverVisible. Defer so the announcement targets the bib's
7880
- // live region once the fullscreen <dialog> opens — otherwise it
7881
- // lands in the host root, which is inert under the active modal.
7882
- queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
7883
- }
7811
+ const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
7812
+ announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
7884
7813
  }
7885
7814
 
7886
7815
  if (this.dropdown.isPopoverVisible) {
@@ -8012,32 +7941,24 @@ class AuroSelect extends AuroElement$1 {
8012
7941
 
8013
7942
  this.typeaheadBuffer += key;
8014
7943
 
8015
- // Prefer the literal buffer as a prefix per WAI-ARIA APG ("focus moves to the
8016
- // next item with a name that starts with the string of characters typed").
8017
- // Only fall back to single-char cycling when the repeated buffer has no
8018
- // longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
8019
- // because no option starts with "aa".
8020
- let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7944
+ const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
8021
7945
 
8022
- const isRepeatedChar = !match && this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7946
+ let match = null;
8023
7947
  if (isRepeatedChar) {
8024
7948
  const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
8025
7949
  if (matches.length) {
8026
7950
  const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
8027
7951
  match = matches[cycleIndex];
8028
7952
  }
7953
+ } else {
7954
+ match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
8029
7955
  }
8030
7956
 
8031
- // Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
8032
7957
  if (match) {
8033
- // Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
8034
- // guard short-circuits and skips the firstActive/selected fallback —
8035
- // otherwise show() synchronously fires the handler, which writes
8036
- // aria-activedescendant once before we overwrite it.
8037
- this.menu.updateActiveOption(match);
8038
7958
  if (!this.dropdown.isPopoverVisible) {
8039
7959
  this.dropdown.show();
8040
7960
  }
7961
+ this.menu.updateActiveOption(match);
8041
7962
  }
8042
7963
  }
8043
7964
 
@@ -8154,16 +8075,6 @@ class AuroSelect extends AuroElement$1 {
8154
8075
  disconnectedCallback() {
8155
8076
  super.disconnectedCallback();
8156
8077
  this._clearTypeaheadBuffer();
8157
- if (this._labelObserver) {
8158
- this._labelObserver.disconnect();
8159
- this._labelObserver = null;
8160
- }
8161
- if (this._retargetLabelObserver && this.shadowRoot) {
8162
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
8163
- slot.removeEventListener('slotchange', this._retargetLabelObserver);
8164
- });
8165
- this._retargetLabelObserver = null;
8166
- }
8167
8078
  }
8168
8079
 
8169
8080
  // lifecycle runs only after the element's DOM has been updated the first time
@@ -8174,7 +8085,6 @@ class AuroSelect extends AuroElement$1 {
8174
8085
  this.configureDropdown();
8175
8086
  this.configureMenu();
8176
8087
  this.configureSelect();
8177
- this._observeLabelChanges();
8178
8088
  }
8179
8089
 
8180
8090
  setMenuValue(value) {
@@ -8311,8 +8221,21 @@ class AuroSelect extends AuroElement$1 {
8311
8221
  if (!selectedOption) return;
8312
8222
  const selectedValue = selectedOption.value;
8313
8223
 
8314
- if (this.value !== selectedValue) {
8315
- this.value = selectedValue;
8224
+ if (this.multiSelect) {
8225
+ const currentArray = this.menu.value || [];
8226
+
8227
+ if (!currentArray.includes(selectedValue)) {
8228
+ this.value = JSON.stringify([
8229
+ ...currentArray,
8230
+ selectedValue
8231
+ ]);
8232
+ }
8233
+ } else {
8234
+ const currentValue = this.value;
8235
+
8236
+ if (currentValue !== selectedValue) {
8237
+ this.value = selectedValue;
8238
+ }
8316
8239
  }
8317
8240
  }
8318
8241