@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
@@ -990,24 +990,19 @@ const selectKeyboardStrategy = {
990
990
  },
991
991
 
992
992
  End(component, evt, ctx) {
993
+ if (!ctx.isExpanded) {
994
+ return;
995
+ }
993
996
  evt.preventDefault();
994
997
  evt.stopPropagation();
995
998
  // `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
996
999
  const lastOption = getEnabledOptions(component.menu).pop();
997
- if (!lastOption) {
998
- return;
1000
+ if (lastOption) {
1001
+ component.menu.updateActiveOption(lastOption);
999
1002
  }
1000
- if (!ctx.isExpanded) {
1001
- component.dropdown.show();
1002
- }
1003
- component.menu.updateActiveOption(lastOption);
1004
1003
  },
1005
1004
 
1006
1005
  Enter(component, evt, ctx) {
1007
- // Prevent the keypress from bubbling to parent containers (e.g., forms)
1008
- // which could interpret Enter as a submit. Matches APG select-only combobox
1009
- // and native <select> behavior: Enter opens the listbox when closed, selects
1010
- // the active option when open — it does not submit a parent form.
1011
1006
  evt.preventDefault();
1012
1007
  evt.stopPropagation();
1013
1008
  if (!ctx.isExpanded) {
@@ -1018,16 +1013,15 @@ const selectKeyboardStrategy = {
1018
1013
  },
1019
1014
 
1020
1015
  Home(component, evt, ctx) {
1016
+ if (!ctx.isExpanded) {
1017
+ return;
1018
+ }
1021
1019
  evt.preventDefault();
1022
1020
  evt.stopPropagation();
1023
1021
  const [firstOption] = getEnabledOptions(component.menu);
1024
- if (!firstOption) {
1025
- return;
1026
- }
1027
- if (!ctx.isExpanded) {
1028
- component.dropdown.show();
1022
+ if (firstOption) {
1023
+ component.menu.updateActiveOption(firstOption);
1029
1024
  }
1030
- component.menu.updateActiveOption(firstOption);
1031
1025
  },
1032
1026
 
1033
1027
  Tab(component, evt, ctx) {
@@ -4998,7 +4992,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
4998
4992
  }
4999
4993
  };
5000
4994
 
5001
- var formkitVersion$1 = '202606252142';
4995
+ var formkitVersion$1 = '202606252337';
5002
4996
 
5003
4997
  class AuroElement extends i$2 {
5004
4998
  static get properties() {
@@ -6270,7 +6264,6 @@ class AuroDropdown extends AuroElement {
6270
6264
  role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
6271
6265
  aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
6272
6266
  aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
6273
- aria-haspopup="${o(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
6274
6267
  aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
6275
6268
  aria-disabled="${o(this.disabled ? 'true' : undefined)}"
6276
6269
  @focusin="${this.handleFocusin}"
@@ -7020,7 +7013,7 @@ class AuroHelpText extends i$2 {
7020
7013
  }
7021
7014
  }
7022
7015
 
7023
- var formkitVersion = '202606252142';
7016
+ var formkitVersion = '202606252337';
7024
7017
 
7025
7018
  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}`;
7026
7019
 
@@ -7352,6 +7345,14 @@ class AuroSelect extends AuroElement$1 {
7352
7345
  reflect: true
7353
7346
  },
7354
7347
 
7348
+ /**
7349
+ * @private
7350
+ */
7351
+ options: {
7352
+ type: Array,
7353
+ state: true
7354
+ },
7355
+
7355
7356
  /**
7356
7357
  * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
7357
7358
  * @type {HTMLElement|Array<HTMLElement>}
@@ -7639,68 +7640,16 @@ class AuroSelect extends AuroElement$1 {
7639
7640
  this.dropdown.dropdownWidth = this.customBibWidth;
7640
7641
  }
7641
7642
 
7642
- this._syncLabelText();
7643
+ // Pass label text to the dropdown bib for accessible dialog naming
7644
+ const labelElement = this.querySelector('span[slot="label"]');
7645
+ if (labelElement) {
7646
+ this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
7647
+ }
7643
7648
 
7644
7649
  // Exposes the CSS parts from the dropdown for styling
7645
7650
  this.dropdown.exposeCssParts();
7646
7651
  }
7647
7652
 
7648
- /**
7649
- * Reads the current label slot text and pushes it to the dropdown bib
7650
- * (for dialog naming) and the menu (for listbox aria-label). Safe to call
7651
- * before either child has been wired up — each branch self-guards.
7652
- * @private
7653
- */
7654
- _syncLabelText() {
7655
- const labelElement = this.querySelector('[slot="label"]');
7656
- const text = labelElement ? labelElement.textContent.trim() : '';
7657
- if (this.dropdown) {
7658
- this.dropdown.bibDialogLabel = text || undefined;
7659
- }
7660
- if (this.menu) {
7661
- if (text) {
7662
- this.menu.setAttribute('aria-label', text);
7663
- } else {
7664
- this.menu.removeAttribute('aria-label');
7665
- }
7666
- }
7667
- }
7668
-
7669
- /**
7670
- * Keeps the dialog/menu accessible names in sync when consumers mutate the
7671
- * label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
7672
- * insufficient — it doesn't fire when textContent of an already-assigned
7673
- * slotted node changes, which is the common case. We scope the observer to
7674
- * the label node itself (not the whole host subtree) so option-content
7675
- * mutations don't trigger label re-syncs, and re-target on `slotchange`
7676
- * when consumers add or replace the label element.
7677
- * @private
7678
- */
7679
- _observeLabelChanges() {
7680
- if (this._labelObserver) return;
7681
- this._labelObserver = new MutationObserver(() => this._syncLabelText());
7682
-
7683
- const retarget = () => {
7684
- this._labelObserver.disconnect();
7685
- const labelElement = this.querySelector('[slot="label"]');
7686
- if (labelElement) {
7687
- this._labelObserver.observe(labelElement, {
7688
- childList: true,
7689
- subtree: true,
7690
- characterData: true
7691
- });
7692
- }
7693
- this._syncLabelText();
7694
- };
7695
-
7696
- retarget();
7697
-
7698
- this._retargetLabelObserver = retarget;
7699
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
7700
- slot.addEventListener('slotchange', retarget);
7701
- });
7702
- }
7703
-
7704
7653
  /**
7705
7654
  * This will register this element with the browser.
7706
7655
  * @param {string} [name="auro-select"] - The name of element that you want to register to.
@@ -7851,7 +7800,11 @@ class AuroSelect extends AuroElement$1 {
7851
7800
  this.updateMenuShapeSize();
7852
7801
  this.setMenuValue(this.value);
7853
7802
 
7854
- this._syncLabelText();
7803
+ // Set accessible name on the menu for screen readers based on the label slot content
7804
+ const labelElement = this.querySelector('[slot="label"]');
7805
+ if (labelElement) {
7806
+ this.menu.setAttribute('aria-label', labelElement.textContent.trim());
7807
+ }
7855
7808
 
7856
7809
  if (this.multiSelect) {
7857
7810
  this.menu.multiSelect = this.multiSelect;
@@ -7863,21 +7816,8 @@ class AuroSelect extends AuroElement$1 {
7863
7816
  if (typeof this.menu.initItems === 'function') {
7864
7817
  this.menu.initItems();
7865
7818
  }
7819
+ this.options = this.menu.options;
7866
7820
  this.updateOptionPositions();
7867
- // renderNativeSelect reads this.menu.options, which the parent doesn't
7868
- // observe — request an update so the hidden native <option> list reflects
7869
- // the menu's options after initItems populates them.
7870
- this.requestUpdate();
7871
-
7872
- // Keep aria-setsize/aria-posinset (and the native <option> list) in sync
7873
- // when the menu re-initializes its items — e.g., slotchange, async/lazy
7874
- // loads, value-triggered re-init. Without this, stale set-size is
7875
- // announced and the native select goes stale after dynamic mutations.
7876
- this.menu.addEventListener('auroMenu-optionsChange', () => {
7877
- this.updateOptionPositions();
7878
- this.requestUpdate();
7879
- });
7880
-
7881
7821
  this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
7882
7822
 
7883
7823
  this.menu.addEventListener("auroMenu-selectValueFailure", () => {
@@ -7896,22 +7836,11 @@ class AuroSelect extends AuroElement$1 {
7896
7836
  this.dropdown.setActiveDescendant(this.optionActive);
7897
7837
  }
7898
7838
 
7899
- // Announce the active option for screen readers. Skip when the activated
7900
- // option is already selected: Enter triggers an auroMenu-selectedOption
7901
- // re-announce, and aria-selected on the active descendant otherwise
7902
- // conveys state without an explicit utterance.
7903
- if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
7839
+ // Announce the active option for screen readers
7840
+ if (this.optionActive) {
7904
7841
  const optionText = this.optionActive.textContent.trim();
7905
- const message = `${optionText}, not selected`;
7906
- if (this.dropdown.isPopoverVisible) {
7907
- announceToScreenReader(this._getAnnouncementRoot(), message);
7908
- } else {
7909
- // Typeahead-on-closed fires this event before `show()` flips
7910
- // isPopoverVisible. Defer so the announcement targets the bib's
7911
- // live region once the fullscreen <dialog> opens — otherwise it
7912
- // lands in the host root, which is inert under the active modal.
7913
- queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
7914
- }
7842
+ const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
7843
+ announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
7915
7844
  }
7916
7845
 
7917
7846
  if (this.dropdown.isPopoverVisible) {
@@ -8043,32 +7972,24 @@ class AuroSelect extends AuroElement$1 {
8043
7972
 
8044
7973
  this.typeaheadBuffer += key;
8045
7974
 
8046
- // Prefer the literal buffer as a prefix per WAI-ARIA APG ("focus moves to the
8047
- // next item with a name that starts with the string of characters typed").
8048
- // Only fall back to single-char cycling when the repeated buffer has no
8049
- // longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
8050
- // because no option starts with "aa".
8051
- let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7975
+ const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
8052
7976
 
8053
- const isRepeatedChar = !match && this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7977
+ let match = null;
8054
7978
  if (isRepeatedChar) {
8055
7979
  const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
8056
7980
  if (matches.length) {
8057
7981
  const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
8058
7982
  match = matches[cycleIndex];
8059
7983
  }
7984
+ } else {
7985
+ match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
8060
7986
  }
8061
7987
 
8062
- // Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
8063
7988
  if (match) {
8064
- // Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
8065
- // guard short-circuits and skips the firstActive/selected fallback —
8066
- // otherwise show() synchronously fires the handler, which writes
8067
- // aria-activedescendant once before we overwrite it.
8068
- this.menu.updateActiveOption(match);
8069
7989
  if (!this.dropdown.isPopoverVisible) {
8070
7990
  this.dropdown.show();
8071
7991
  }
7992
+ this.menu.updateActiveOption(match);
8072
7993
  }
8073
7994
  }
8074
7995
 
@@ -8185,16 +8106,6 @@ class AuroSelect extends AuroElement$1 {
8185
8106
  disconnectedCallback() {
8186
8107
  super.disconnectedCallback();
8187
8108
  this._clearTypeaheadBuffer();
8188
- if (this._labelObserver) {
8189
- this._labelObserver.disconnect();
8190
- this._labelObserver = null;
8191
- }
8192
- if (this._retargetLabelObserver && this.shadowRoot) {
8193
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
8194
- slot.removeEventListener('slotchange', this._retargetLabelObserver);
8195
- });
8196
- this._retargetLabelObserver = null;
8197
- }
8198
8109
  }
8199
8110
 
8200
8111
  // lifecycle runs only after the element's DOM has been updated the first time
@@ -8205,7 +8116,6 @@ class AuroSelect extends AuroElement$1 {
8205
8116
  this.configureDropdown();
8206
8117
  this.configureMenu();
8207
8118
  this.configureSelect();
8208
- this._observeLabelChanges();
8209
8119
  }
8210
8120
 
8211
8121
  setMenuValue(value) {
@@ -8342,8 +8252,21 @@ class AuroSelect extends AuroElement$1 {
8342
8252
  if (!selectedOption) return;
8343
8253
  const selectedValue = selectedOption.value;
8344
8254
 
8345
- if (this.value !== selectedValue) {
8346
- this.value = selectedValue;
8255
+ if (this.multiSelect) {
8256
+ const currentArray = this.menu.value || [];
8257
+
8258
+ if (!currentArray.includes(selectedValue)) {
8259
+ this.value = JSON.stringify([
8260
+ ...currentArray,
8261
+ selectedValue
8262
+ ]);
8263
+ }
8264
+ } else {
8265
+ const currentValue = this.value;
8266
+
8267
+ if (currentValue !== selectedValue) {
8268
+ this.value = selectedValue;
8269
+ }
8347
8270
  }
8348
8271
  }
8349
8272