@aurodesignsystem-dev/auro-formkit 0.0.0-pr1514.12 → 0.0.0-pr1514.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/components/bibtemplate/dist/index.js +1 -1
  2. package/components/bibtemplate/dist/registered.js +1 -1
  3. package/components/checkbox/demo/customize.min.js +1 -1
  4. package/components/checkbox/demo/getting-started.min.js +1 -1
  5. package/components/checkbox/demo/index.min.js +1 -1
  6. package/components/checkbox/dist/index.js +1 -1
  7. package/components/checkbox/dist/registered.js +1 -1
  8. package/components/combobox/demo/customize.min.js +97 -121
  9. package/components/combobox/demo/getting-started.min.js +97 -121
  10. package/components/combobox/demo/index.min.js +97 -121
  11. package/components/combobox/dist/index.js +96 -120
  12. package/components/combobox/dist/registered.js +96 -120
  13. package/components/counter/demo/customize.min.js +3 -11
  14. package/components/counter/demo/index.min.js +3 -11
  15. package/components/counter/dist/index.js +3 -11
  16. package/components/counter/dist/registered.js +3 -11
  17. package/components/datepicker/demo/customize.min.js +137 -271
  18. package/components/datepicker/demo/index.min.js +137 -271
  19. package/components/datepicker/dist/auro-calendar-cell.d.ts +0 -6
  20. package/components/datepicker/dist/auro-calendar.d.ts +7 -26
  21. package/components/datepicker/dist/index.js +137 -271
  22. package/components/datepicker/dist/registered.js +137 -271
  23. package/components/dropdown/demo/customize.min.js +1 -2
  24. package/components/dropdown/demo/getting-started.min.js +1 -2
  25. package/components/dropdown/demo/index.min.js +1 -2
  26. package/components/dropdown/dist/index.js +1 -2
  27. package/components/dropdown/dist/registered.js +1 -2
  28. package/components/form/demo/customize.min.js +396 -709
  29. package/components/form/demo/getting-started.min.js +396 -709
  30. package/components/form/demo/index.min.js +396 -709
  31. package/components/form/demo/registerDemoDeps.min.js +396 -709
  32. package/components/input/demo/api.md +5 -5
  33. package/components/input/demo/customize.md +8 -8
  34. package/components/input/demo/customize.min.js +93 -116
  35. package/components/input/demo/getting-started.min.js +93 -116
  36. package/components/input/demo/index.min.js +93 -116
  37. package/components/input/dist/base-input.d.ts +44 -33
  38. package/components/input/dist/index.js +94 -129
  39. package/components/input/dist/registered.js +93 -116
  40. package/components/radio/demo/customize.min.js +1 -1
  41. package/components/radio/demo/getting-started.min.js +1 -1
  42. package/components/radio/demo/index.min.js +1 -1
  43. package/components/radio/dist/index.js +1 -1
  44. package/components/radio/dist/registered.js +1 -1
  45. package/components/select/demo/customize.md +0 -86
  46. package/components/select/demo/customize.min.js +63 -187
  47. package/components/select/demo/getting-started.min.js +110 -189
  48. package/components/select/demo/index.min.js +63 -187
  49. package/components/select/demo/keyboard-behavior.md +4 -18
  50. package/components/select/dist/auro-select.d.ts +8 -20
  51. package/components/select/dist/index.js +63 -187
  52. package/components/select/dist/registered.js +63 -187
  53. package/custom-elements.json +1791 -1997
  54. package/package.json +1 -1
@@ -916,28 +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;
925
- }
926
- // Pre-stash before show() so the auroDropdown-toggled handler's
927
- // `!optionActive` guard short-circuits the firstActive/selected fallback —
928
- // otherwise show() synchronously fires the handler and writes
929
- // aria-activedescendant once before we overwrite it.
930
- component.menu.updateActiveOption(lastOption);
931
- if (!ctx.isExpanded) {
932
- component.dropdown.show();
926
+ if (lastOption) {
927
+ component.menu.updateActiveOption(lastOption);
933
928
  }
934
929
  },
935
930
 
936
931
  Enter(component, evt, ctx) {
937
- // Prevent the keypress from bubbling to parent containers (e.g., forms)
938
- // which could interpret Enter as a submit. Matches APG select-only combobox
939
- // and native <select> behavior: Enter opens the listbox when closed, selects
940
- // the active option when open — it does not submit a parent form.
941
932
  evt.preventDefault();
942
933
  evt.stopPropagation();
943
934
  if (!ctx.isExpanded) {
@@ -948,16 +939,14 @@ const selectKeyboardStrategy = {
948
939
  },
949
940
 
950
941
  Home(component, evt, ctx) {
942
+ if (!ctx.isExpanded) {
943
+ return;
944
+ }
951
945
  evt.preventDefault();
952
946
  evt.stopPropagation();
953
947
  const [firstOption] = getEnabledOptions(component.menu);
954
- if (!firstOption) {
955
- return;
956
- }
957
- // See End() for why this must run before show().
958
- component.menu.updateActiveOption(firstOption);
959
- if (!ctx.isExpanded) {
960
- component.dropdown.show();
948
+ if (firstOption) {
949
+ component.menu.updateActiveOption(firstOption);
961
950
  }
962
951
  },
963
952
 
@@ -4905,7 +4894,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
4905
4894
  }
4906
4895
  };
4907
4896
 
4908
- var formkitVersion$1 = '202606292048';
4897
+ var formkitVersion$1 = '202606291652';
4909
4898
 
4910
4899
  class AuroElement extends LitElement {
4911
4900
  static get properties() {
@@ -6177,7 +6166,6 @@ class AuroDropdown extends AuroElement {
6177
6166
  role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
6178
6167
  aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
6179
6168
  aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
6180
- aria-haspopup="${ifDefined(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
6181
6169
  aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
6182
6170
  aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
6183
6171
  @focusin="${this.handleFocusin}"
@@ -6304,7 +6292,7 @@ class AuroDropdown extends AuroElement {
6304
6292
 
6305
6293
  var colorCss$1 = css`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
6306
6294
 
6307
- var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{padding:var(--ds-size-200, 1rem)}`;
6295
+ var styleCss$2 = css`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column;padding:var(--ds-size-200, 1rem);padding-top:var(--ds-size-400, 2rem);padding-bottom:0}#headerContainer .titleRow{display:flex;flex-direction:row;justify-content:space-between;gap:var(--ds-size-100, 0.5rem)}#headerContainer .header{max-width:calc(100vw - var(--ds-size-900, 4.5rem));padding-top:var(--ds-size-200, 1rem)}#headerContainer .subheader{width:100%}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
6308
6296
 
6309
6297
  var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
6310
6298
 
@@ -6927,7 +6915,7 @@ class AuroHelpText extends LitElement {
6927
6915
  }
6928
6916
  }
6929
6917
 
6930
- var formkitVersion = '202606292048';
6918
+ var formkitVersion = '202606291652';
6931
6919
 
6932
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}`;
6933
6921
 
@@ -7259,6 +7247,14 @@ class AuroSelect extends AuroElement$1 {
7259
7247
  reflect: true
7260
7248
  },
7261
7249
 
7250
+ /**
7251
+ * @private
7252
+ */
7253
+ options: {
7254
+ type: Array,
7255
+ state: true
7256
+ },
7257
+
7262
7258
  /**
7263
7259
  * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
7264
7260
  * @type {HTMLElement|Array<HTMLElement>}
@@ -7546,68 +7542,16 @@ class AuroSelect extends AuroElement$1 {
7546
7542
  this.dropdown.dropdownWidth = this.customBibWidth;
7547
7543
  }
7548
7544
 
7549
- 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
+ }
7550
7550
 
7551
7551
  // Exposes the CSS parts from the dropdown for styling
7552
7552
  this.dropdown.exposeCssParts();
7553
7553
  }
7554
7554
 
7555
- /**
7556
- * Reads the current label slot text and pushes it to the dropdown bib
7557
- * (for dialog naming) and the menu (for listbox aria-label). Safe to call
7558
- * before either child has been wired up — each branch self-guards.
7559
- * @private
7560
- */
7561
- _syncLabelText() {
7562
- const labelElement = this.querySelector('[slot="label"]');
7563
- const text = labelElement ? labelElement.textContent.trim() : '';
7564
- if (this.dropdown) {
7565
- this.dropdown.bibDialogLabel = text || undefined;
7566
- }
7567
- if (this.menu) {
7568
- if (text) {
7569
- this.menu.setAttribute('aria-label', text);
7570
- } else {
7571
- this.menu.removeAttribute('aria-label');
7572
- }
7573
- }
7574
- }
7575
-
7576
- /**
7577
- * Keeps the dialog/menu accessible names in sync when consumers mutate the
7578
- * label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
7579
- * insufficient — it doesn't fire when textContent of an already-assigned
7580
- * slotted node changes, which is the common case. We scope the observer to
7581
- * the label node itself (not the whole host subtree) so option-content
7582
- * mutations don't trigger label re-syncs, and re-target on `slotchange`
7583
- * when consumers add or replace the label element.
7584
- * @private
7585
- */
7586
- _observeLabelChanges() {
7587
- if (this._labelObserver) return;
7588
- this._labelObserver = new MutationObserver(() => this._syncLabelText());
7589
-
7590
- const retarget = () => {
7591
- this._labelObserver.disconnect();
7592
- const labelElement = this.querySelector('[slot="label"]');
7593
- if (labelElement) {
7594
- this._labelObserver.observe(labelElement, {
7595
- childList: true,
7596
- subtree: true,
7597
- characterData: true
7598
- });
7599
- }
7600
- this._syncLabelText();
7601
- };
7602
-
7603
- retarget();
7604
-
7605
- this._retargetLabelObserver = retarget;
7606
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
7607
- slot.addEventListener('slotchange', retarget);
7608
- });
7609
- }
7610
-
7611
7555
  /**
7612
7556
  * This will register this element with the browser.
7613
7557
  * @param {string} [name="auro-select"] - The name of element that you want to register to.
@@ -7758,7 +7702,11 @@ class AuroSelect extends AuroElement$1 {
7758
7702
  this.updateMenuShapeSize();
7759
7703
  this.setMenuValue(this.value);
7760
7704
 
7761
- 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
+ }
7762
7710
 
7763
7711
  if (this.multiSelect) {
7764
7712
  this.menu.multiSelect = this.multiSelect;
@@ -7770,21 +7718,8 @@ class AuroSelect extends AuroElement$1 {
7770
7718
  if (typeof this.menu.initItems === 'function') {
7771
7719
  this.menu.initItems();
7772
7720
  }
7721
+ this.options = this.menu.options;
7773
7722
  this.updateOptionPositions();
7774
- // renderNativeSelect reads this.menu.options, which the parent doesn't
7775
- // observe — request an update so the hidden native <option> list reflects
7776
- // the menu's options after initItems populates them.
7777
- this.requestUpdate();
7778
-
7779
- // Keep aria-setsize/aria-posinset (and the native <option> list) in sync
7780
- // when the menu re-initializes its items — e.g., slotchange, async/lazy
7781
- // loads, value-triggered re-init. Without this, stale set-size is
7782
- // announced and the native select goes stale after dynamic mutations.
7783
- this.menu.addEventListener('auroMenu-optionsChange', () => {
7784
- this.updateOptionPositions();
7785
- this.requestUpdate();
7786
- });
7787
-
7788
7723
  this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
7789
7724
 
7790
7725
  this.menu.addEventListener("auroMenu-selectValueFailure", () => {
@@ -7803,26 +7738,11 @@ class AuroSelect extends AuroElement$1 {
7803
7738
  this.dropdown.setActiveDescendant(this.optionActive);
7804
7739
  }
7805
7740
 
7806
- // Live-region announce only for [not selected] options. For activations
7807
- // on an already-selected option — auto-activation on bib open, arrow
7808
- // navigation back to the selection, or click in multiSelect — rely on
7809
- // aria-activedescendant + aria-selected="true" to convey state per the
7810
- // WAI-ARIA listbox pattern. This is intentional, not limited to the
7811
- // initial activation on open: it also prevents a duplicate "X, selected"
7812
- // when Enter on the active+selected option re-fires
7813
- // auroMenu-selectedOption (see 03b289e39).
7814
- if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
7741
+ // Announce the active option for screen readers
7742
+ if (this.optionActive) {
7815
7743
  const optionText = this.optionActive.textContent.trim();
7816
- const message = `${optionText}, not selected`;
7817
- if (this.dropdown.isPopoverVisible) {
7818
- announceToScreenReader(this._getAnnouncementRoot(), message);
7819
- } else {
7820
- // Typeahead-on-closed fires this event before `show()` flips
7821
- // isPopoverVisible. Defer so the announcement targets the bib's
7822
- // live region once the fullscreen <dialog> opens — otherwise it
7823
- // lands in the host root, which is inert under the active modal.
7824
- queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
7825
- }
7744
+ const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
7745
+ announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
7826
7746
  }
7827
7747
 
7828
7748
  if (this.dropdown.isPopoverVisible) {
@@ -7831,7 +7751,6 @@ class AuroSelect extends AuroElement$1 {
7831
7751
  });
7832
7752
 
7833
7753
  this.menu.addEventListener('auroMenu-selectedOption', () => {
7834
- const previousSelected = this.optionSelected;
7835
7754
 
7836
7755
  // Update the displayed value
7837
7756
  this.updateDisplayedValue();
@@ -7851,32 +7770,13 @@ class AuroSelect extends AuroElement$1 {
7851
7770
  this.dropdown.trigger.focus();
7852
7771
  }
7853
7772
 
7854
- // Describe the actual change. In multiSelect, currentLabel is the
7855
- // concatenated remaining list — announcing "{list}, selected" after a
7856
- // deselect would falsely claim every remaining label was just added.
7857
- // Diff previous vs next to recover the toggled option.
7858
- let announcement = '';
7859
- if (this.multiSelect) {
7860
- const prev = Array.isArray(previousSelected) ? previousSelected : [];
7861
- const removed = prev.find((opt) => !nextSelected.includes(opt));
7862
- const added = nextSelected.find((opt) => !prev.includes(opt));
7863
- if (removed) {
7864
- announcement = `${removed.textContent.trim()}, not selected`;
7865
- } else if (added) {
7866
- announcement = `${added.textContent.trim()}, selected`;
7867
- }
7868
- } else {
7869
- announcement = `${this.menu.currentLabel}, selected`;
7870
- }
7871
-
7872
- // Delay so the utterance isn't overridden by VoiceOver's "collapsed"
7873
- // announcement from aria-expanded when the dropdown closes.
7874
- if (announcement) {
7875
- const announcementDelay = 300;
7876
- setTimeout(() => {
7877
- announceToScreenReader(this._getAnnouncementRoot(), announcement);
7878
- }, announcementDelay);
7879
- }
7773
+ // Announce the selection after the dropdown closes so it isn't
7774
+ // overridden by VoiceOver's "collapsed" announcement from aria-expanded.
7775
+ const selectedValue = this.menu.currentLabel;
7776
+ const announcementDelay = 300;
7777
+ setTimeout(() => {
7778
+ announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
7779
+ }, announcementDelay);
7880
7780
  });
7881
7781
  }
7882
7782
 
@@ -7974,32 +7874,24 @@ class AuroSelect extends AuroElement$1 {
7974
7874
 
7975
7875
  this.typeaheadBuffer += key;
7976
7876
 
7977
- // Prefer the literal buffer as a prefix per WAI-ARIA APG ("focus moves to the
7978
- // next item with a name that starts with the string of characters typed").
7979
- // Only fall back to single-char cycling when the repeated buffer has no
7980
- // longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
7981
- // because no option starts with "aa".
7982
- let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7877
+ const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7983
7878
 
7984
- const isRepeatedChar = !match && this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7879
+ let match = null;
7985
7880
  if (isRepeatedChar) {
7986
7881
  const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
7987
7882
  if (matches.length) {
7988
7883
  const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
7989
7884
  match = matches[cycleIndex];
7990
7885
  }
7886
+ } else {
7887
+ match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7991
7888
  }
7992
7889
 
7993
- // Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
7994
7890
  if (match) {
7995
- // Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
7996
- // guard short-circuits and skips the firstActive/selected fallback —
7997
- // otherwise show() synchronously fires the handler, which writes
7998
- // aria-activedescendant once before we overwrite it.
7999
- this.menu.updateActiveOption(match);
8000
7891
  if (!this.dropdown.isPopoverVisible) {
8001
7892
  this.dropdown.show();
8002
7893
  }
7894
+ this.menu.updateActiveOption(match);
8003
7895
  }
8004
7896
  }
8005
7897
 
@@ -8116,28 +8008,6 @@ class AuroSelect extends AuroElement$1 {
8116
8008
  disconnectedCallback() {
8117
8009
  super.disconnectedCallback();
8118
8010
  this._clearTypeaheadBuffer();
8119
- if (this._labelObserver) {
8120
- this._labelObserver.disconnect();
8121
- this._labelObserver = null;
8122
- }
8123
- if (this._retargetLabelObserver && this.shadowRoot) {
8124
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
8125
- slot.removeEventListener('slotchange', this._retargetLabelObserver);
8126
- });
8127
- this._retargetLabelObserver = null;
8128
- }
8129
- }
8130
-
8131
- connectedCallback() {
8132
- super.connectedCallback();
8133
- // Regression guard: firstUpdated() fires once per instance, so the label
8134
- // observer setup it triggers does NOT re-run on reconnect. After a
8135
- // disconnect+reconnect (reparent, SPA route swap), runtime label mutations
8136
- // would silently stop syncing menu aria-label / dropdown.bibDialogLabel
8137
- // unless we re-wire the observer here.
8138
- if (this.hasUpdated) {
8139
- this._observeLabelChanges();
8140
- }
8141
8011
  }
8142
8012
 
8143
8013
  // lifecycle runs only after the element's DOM has been updated the first time
@@ -8148,7 +8018,6 @@ class AuroSelect extends AuroElement$1 {
8148
8018
  this.configureDropdown();
8149
8019
  this.configureMenu();
8150
8020
  this.configureSelect();
8151
- this._observeLabelChanges();
8152
8021
  }
8153
8022
 
8154
8023
  setMenuValue(value) {
@@ -8281,18 +8150,25 @@ class AuroSelect extends AuroElement$1 {
8281
8150
  * @private
8282
8151
  */
8283
8152
  _handleNativeSelectChange(event) {
8284
- // Hidden native <select> has no `multiple` attribute, so any change it fires
8285
- // is a single raw value — applying it in multiSelect mode would collapse the
8286
- // JSON-array `value` shape. Bfcache/autofill can reach this on a name-bearing
8287
- // form control even with aria-hidden/tabindex=-1.
8288
- if (this.multiSelect) return;
8289
-
8290
8153
  const selectedOption = event.target.options[event.target.selectedIndex];
8291
8154
  if (!selectedOption) return;
8292
8155
  const selectedValue = selectedOption.value;
8293
8156
 
8294
- if (this.value !== selectedValue) {
8295
- 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
+ }
8296
8172
  }
8297
8173
  }
8298
8174