@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
@@ -916,24 +916,19 @@ const selectKeyboardStrategy = {
916
916
  },
917
917
 
918
918
  End(component, evt, ctx) {
919
+ if (!ctx.isExpanded) {
920
+ return;
921
+ }
919
922
  evt.preventDefault();
920
923
  evt.stopPropagation();
921
924
  // `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
922
925
  const lastOption = getEnabledOptions(component.menu).pop();
923
- if (!lastOption) {
924
- return;
926
+ if (lastOption) {
927
+ component.menu.updateActiveOption(lastOption);
925
928
  }
926
- if (!ctx.isExpanded) {
927
- component.dropdown.show();
928
- }
929
- component.menu.updateActiveOption(lastOption);
930
929
  },
931
930
 
932
931
  Enter(component, evt, ctx) {
933
- // Prevent the keypress from bubbling to parent containers (e.g., forms)
934
- // which could interpret Enter as a submit. Matches APG select-only combobox
935
- // and native <select> behavior: Enter opens the listbox when closed, selects
936
- // the active option when open — it does not submit a parent form.
937
932
  evt.preventDefault();
938
933
  evt.stopPropagation();
939
934
  if (!ctx.isExpanded) {
@@ -944,16 +939,15 @@ const selectKeyboardStrategy = {
944
939
  },
945
940
 
946
941
  Home(component, evt, ctx) {
942
+ if (!ctx.isExpanded) {
943
+ return;
944
+ }
947
945
  evt.preventDefault();
948
946
  evt.stopPropagation();
949
947
  const [firstOption] = getEnabledOptions(component.menu);
950
- if (!firstOption) {
951
- return;
948
+ if (firstOption) {
949
+ component.menu.updateActiveOption(firstOption);
952
950
  }
953
- if (!ctx.isExpanded) {
954
- component.dropdown.show();
955
- }
956
- component.menu.updateActiveOption(firstOption);
957
951
  },
958
952
 
959
953
  Tab(component, evt, ctx) {
@@ -4900,7 +4894,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
4900
4894
  }
4901
4895
  };
4902
4896
 
4903
- var formkitVersion$1 = '202606252142';
4897
+ var formkitVersion$1 = '202606252337';
4904
4898
 
4905
4899
  class AuroElement extends LitElement {
4906
4900
  static get properties() {
@@ -6172,7 +6166,6 @@ class AuroDropdown extends AuroElement {
6172
6166
  role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
6173
6167
  aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
6174
6168
  aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
6175
- aria-haspopup="${ifDefined(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
6176
6169
  aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
6177
6170
  aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
6178
6171
  @focusin="${this.handleFocusin}"
@@ -6922,7 +6915,7 @@ class AuroHelpText extends LitElement {
6922
6915
  }
6923
6916
  }
6924
6917
 
6925
- var formkitVersion = '202606252142';
6918
+ var formkitVersion = '202606252337';
6926
6919
 
6927
6920
  var styleCss = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
6928
6921
 
@@ -7254,6 +7247,14 @@ class AuroSelect extends AuroElement$1 {
7254
7247
  reflect: true
7255
7248
  },
7256
7249
 
7250
+ /**
7251
+ * @private
7252
+ */
7253
+ options: {
7254
+ type: Array,
7255
+ state: true
7256
+ },
7257
+
7257
7258
  /**
7258
7259
  * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
7259
7260
  * @type {HTMLElement|Array<HTMLElement>}
@@ -7541,68 +7542,16 @@ class AuroSelect extends AuroElement$1 {
7541
7542
  this.dropdown.dropdownWidth = this.customBibWidth;
7542
7543
  }
7543
7544
 
7544
- this._syncLabelText();
7545
+ // Pass label text to the dropdown bib for accessible dialog naming
7546
+ const labelElement = this.querySelector('span[slot="label"]');
7547
+ if (labelElement) {
7548
+ this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
7549
+ }
7545
7550
 
7546
7551
  // Exposes the CSS parts from the dropdown for styling
7547
7552
  this.dropdown.exposeCssParts();
7548
7553
  }
7549
7554
 
7550
- /**
7551
- * Reads the current label slot text and pushes it to the dropdown bib
7552
- * (for dialog naming) and the menu (for listbox aria-label). Safe to call
7553
- * before either child has been wired up — each branch self-guards.
7554
- * @private
7555
- */
7556
- _syncLabelText() {
7557
- const labelElement = this.querySelector('[slot="label"]');
7558
- const text = labelElement ? labelElement.textContent.trim() : '';
7559
- if (this.dropdown) {
7560
- this.dropdown.bibDialogLabel = text || undefined;
7561
- }
7562
- if (this.menu) {
7563
- if (text) {
7564
- this.menu.setAttribute('aria-label', text);
7565
- } else {
7566
- this.menu.removeAttribute('aria-label');
7567
- }
7568
- }
7569
- }
7570
-
7571
- /**
7572
- * Keeps the dialog/menu accessible names in sync when consumers mutate the
7573
- * label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
7574
- * insufficient — it doesn't fire when textContent of an already-assigned
7575
- * slotted node changes, which is the common case. We scope the observer to
7576
- * the label node itself (not the whole host subtree) so option-content
7577
- * mutations don't trigger label re-syncs, and re-target on `slotchange`
7578
- * when consumers add or replace the label element.
7579
- * @private
7580
- */
7581
- _observeLabelChanges() {
7582
- if (this._labelObserver) return;
7583
- this._labelObserver = new MutationObserver(() => this._syncLabelText());
7584
-
7585
- const retarget = () => {
7586
- this._labelObserver.disconnect();
7587
- const labelElement = this.querySelector('[slot="label"]');
7588
- if (labelElement) {
7589
- this._labelObserver.observe(labelElement, {
7590
- childList: true,
7591
- subtree: true,
7592
- characterData: true
7593
- });
7594
- }
7595
- this._syncLabelText();
7596
- };
7597
-
7598
- retarget();
7599
-
7600
- this._retargetLabelObserver = retarget;
7601
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
7602
- slot.addEventListener('slotchange', retarget);
7603
- });
7604
- }
7605
-
7606
7555
  /**
7607
7556
  * This will register this element with the browser.
7608
7557
  * @param {string} [name="auro-select"] - The name of element that you want to register to.
@@ -7753,7 +7702,11 @@ class AuroSelect extends AuroElement$1 {
7753
7702
  this.updateMenuShapeSize();
7754
7703
  this.setMenuValue(this.value);
7755
7704
 
7756
- this._syncLabelText();
7705
+ // Set accessible name on the menu for screen readers based on the label slot content
7706
+ const labelElement = this.querySelector('[slot="label"]');
7707
+ if (labelElement) {
7708
+ this.menu.setAttribute('aria-label', labelElement.textContent.trim());
7709
+ }
7757
7710
 
7758
7711
  if (this.multiSelect) {
7759
7712
  this.menu.multiSelect = this.multiSelect;
@@ -7765,21 +7718,8 @@ class AuroSelect extends AuroElement$1 {
7765
7718
  if (typeof this.menu.initItems === 'function') {
7766
7719
  this.menu.initItems();
7767
7720
  }
7721
+ this.options = this.menu.options;
7768
7722
  this.updateOptionPositions();
7769
- // renderNativeSelect reads this.menu.options, which the parent doesn't
7770
- // observe — request an update so the hidden native <option> list reflects
7771
- // the menu's options after initItems populates them.
7772
- this.requestUpdate();
7773
-
7774
- // Keep aria-setsize/aria-posinset (and the native <option> list) in sync
7775
- // when the menu re-initializes its items — e.g., slotchange, async/lazy
7776
- // loads, value-triggered re-init. Without this, stale set-size is
7777
- // announced and the native select goes stale after dynamic mutations.
7778
- this.menu.addEventListener('auroMenu-optionsChange', () => {
7779
- this.updateOptionPositions();
7780
- this.requestUpdate();
7781
- });
7782
-
7783
7723
  this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
7784
7724
 
7785
7725
  this.menu.addEventListener("auroMenu-selectValueFailure", () => {
@@ -7798,22 +7738,11 @@ class AuroSelect extends AuroElement$1 {
7798
7738
  this.dropdown.setActiveDescendant(this.optionActive);
7799
7739
  }
7800
7740
 
7801
- // Announce the active option for screen readers. Skip when the activated
7802
- // option is already selected: Enter triggers an auroMenu-selectedOption
7803
- // re-announce, and aria-selected on the active descendant otherwise
7804
- // conveys state without an explicit utterance.
7805
- if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
7741
+ // Announce the active option for screen readers
7742
+ if (this.optionActive) {
7806
7743
  const optionText = this.optionActive.textContent.trim();
7807
- const message = `${optionText}, not selected`;
7808
- if (this.dropdown.isPopoverVisible) {
7809
- announceToScreenReader(this._getAnnouncementRoot(), message);
7810
- } else {
7811
- // Typeahead-on-closed fires this event before `show()` flips
7812
- // isPopoverVisible. Defer so the announcement targets the bib's
7813
- // live region once the fullscreen <dialog> opens — otherwise it
7814
- // lands in the host root, which is inert under the active modal.
7815
- queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
7816
- }
7744
+ const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
7745
+ announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
7817
7746
  }
7818
7747
 
7819
7748
  if (this.dropdown.isPopoverVisible) {
@@ -7945,32 +7874,24 @@ class AuroSelect extends AuroElement$1 {
7945
7874
 
7946
7875
  this.typeaheadBuffer += key;
7947
7876
 
7948
- // Prefer the literal buffer as a prefix per WAI-ARIA APG ("focus moves to the
7949
- // next item with a name that starts with the string of characters typed").
7950
- // Only fall back to single-char cycling when the repeated buffer has no
7951
- // longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
7952
- // because no option starts with "aa".
7953
- let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7877
+ const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7954
7878
 
7955
- const isRepeatedChar = !match && this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7879
+ let match = null;
7956
7880
  if (isRepeatedChar) {
7957
7881
  const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
7958
7882
  if (matches.length) {
7959
7883
  const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
7960
7884
  match = matches[cycleIndex];
7961
7885
  }
7886
+ } else {
7887
+ match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7962
7888
  }
7963
7889
 
7964
- // Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
7965
7890
  if (match) {
7966
- // Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
7967
- // guard short-circuits and skips the firstActive/selected fallback —
7968
- // otherwise show() synchronously fires the handler, which writes
7969
- // aria-activedescendant once before we overwrite it.
7970
- this.menu.updateActiveOption(match);
7971
7891
  if (!this.dropdown.isPopoverVisible) {
7972
7892
  this.dropdown.show();
7973
7893
  }
7894
+ this.menu.updateActiveOption(match);
7974
7895
  }
7975
7896
  }
7976
7897
 
@@ -8087,16 +8008,6 @@ class AuroSelect extends AuroElement$1 {
8087
8008
  disconnectedCallback() {
8088
8009
  super.disconnectedCallback();
8089
8010
  this._clearTypeaheadBuffer();
8090
- if (this._labelObserver) {
8091
- this._labelObserver.disconnect();
8092
- this._labelObserver = null;
8093
- }
8094
- if (this._retargetLabelObserver && this.shadowRoot) {
8095
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
8096
- slot.removeEventListener('slotchange', this._retargetLabelObserver);
8097
- });
8098
- this._retargetLabelObserver = null;
8099
- }
8100
8011
  }
8101
8012
 
8102
8013
  // lifecycle runs only after the element's DOM has been updated the first time
@@ -8107,7 +8018,6 @@ class AuroSelect extends AuroElement$1 {
8107
8018
  this.configureDropdown();
8108
8019
  this.configureMenu();
8109
8020
  this.configureSelect();
8110
- this._observeLabelChanges();
8111
8021
  }
8112
8022
 
8113
8023
  setMenuValue(value) {
@@ -8244,8 +8154,21 @@ class AuroSelect extends AuroElement$1 {
8244
8154
  if (!selectedOption) return;
8245
8155
  const selectedValue = selectedOption.value;
8246
8156
 
8247
- if (this.value !== selectedValue) {
8248
- this.value = selectedValue;
8157
+ if (this.multiSelect) {
8158
+ const currentArray = this.menu.value || [];
8159
+
8160
+ if (!currentArray.includes(selectedValue)) {
8161
+ this.value = JSON.stringify([
8162
+ ...currentArray,
8163
+ selectedValue
8164
+ ]);
8165
+ }
8166
+ } else {
8167
+ const currentValue = this.value;
8168
+
8169
+ if (currentValue !== selectedValue) {
8170
+ this.value = selectedValue;
8171
+ }
8249
8172
  }
8250
8173
  }
8251
8174