@aurodesignsystem-dev/auro-formkit 0.0.0-pr1510.2 → 0.0.0-pr1511.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 (128) hide show
  1. package/components/checkbox/demo/customize.js +22 -0
  2. package/components/checkbox/demo/customize.min.js +1 -1
  3. package/components/checkbox/demo/demo-support.js +1 -0
  4. package/components/checkbox/demo/getting-started.js +22 -0
  5. package/components/checkbox/demo/getting-started.min.js +1 -1
  6. package/components/checkbox/demo/index.js +8 -0
  7. package/components/checkbox/demo/index.min.js +1 -1
  8. package/components/checkbox/demo/styles.scss +1 -0
  9. package/components/checkbox/dist/index.js +1 -1
  10. package/components/checkbox/dist/registered.js +1 -1
  11. package/components/combobox/demo/customize.js +24 -0
  12. package/components/combobox/demo/customize.min.js +4 -3
  13. package/components/combobox/demo/demo-support.js +1 -0
  14. package/components/combobox/demo/getting-started.js +21 -0
  15. package/components/combobox/demo/getting-started.min.js +4 -3
  16. package/components/combobox/demo/index.js +23 -0
  17. package/components/combobox/demo/index.min.js +4 -3
  18. package/components/combobox/demo/styles.scss +1 -0
  19. package/components/combobox/dist/index.js +4 -3
  20. package/components/combobox/dist/registered.js +4 -3
  21. package/components/counter/demo/customize.js +21 -0
  22. package/components/counter/demo/customize.min.js +3 -2
  23. package/components/counter/demo/demo-support.js +1 -0
  24. package/components/counter/demo/index.js +21 -0
  25. package/components/counter/demo/index.min.js +3 -2
  26. package/components/counter/demo/styles.scss +1 -0
  27. package/components/counter/dist/index.js +3 -2
  28. package/components/counter/dist/registered.js +3 -2
  29. package/components/datepicker/demo/accessibility.md +1 -2
  30. package/components/datepicker/demo/api.md +62 -63
  31. package/components/datepicker/demo/customize.js +17 -0
  32. package/components/datepicker/demo/customize.md +1 -12
  33. package/components/datepicker/demo/customize.min.js +207 -601
  34. package/components/datepicker/demo/demo-support.js +1 -0
  35. package/components/datepicker/demo/index.js +23 -0
  36. package/components/datepicker/demo/index.min.js +207 -601
  37. package/components/datepicker/demo/styles.scss +1 -0
  38. package/components/datepicker/dist/index.js +207 -601
  39. package/components/datepicker/dist/registered.js +207 -601
  40. package/components/datepicker/dist/{auro-calendar-cell.d.ts → src/auro-calendar-cell.d.ts} +3 -14
  41. package/components/datepicker/dist/{auro-calendar.d.ts → src/auro-calendar.d.ts} +6 -90
  42. package/components/datepicker/dist/{auro-datepicker.d.ts → src/auro-datepicker.d.ts} +5 -78
  43. package/components/dropdown/demo/customize.js +9 -0
  44. package/components/dropdown/demo/customize.min.js +2 -1
  45. package/components/dropdown/demo/demo-support.js +1 -0
  46. package/components/dropdown/demo/getting-started.js +9 -0
  47. package/components/dropdown/demo/getting-started.min.js +2 -1
  48. package/components/dropdown/demo/index.js +16 -0
  49. package/components/dropdown/demo/index.min.js +2 -1
  50. package/components/dropdown/demo/styles.scss +1 -0
  51. package/components/dropdown/dist/index.js +2 -1
  52. package/components/dropdown/dist/registered.js +2 -1
  53. package/components/form/demo/customize.js +28 -0
  54. package/components/form/demo/customize.min.js +355 -670
  55. package/components/form/demo/demo-support.js +1 -0
  56. package/components/form/demo/getting-started.js +9 -0
  57. package/components/form/demo/getting-started.min.js +355 -670
  58. package/components/form/demo/index.js +5 -0
  59. package/components/form/demo/index.min.js +355 -670
  60. package/components/form/demo/registerDemoDeps.js +23 -0
  61. package/components/form/demo/registerDemoDeps.min.js +355 -670
  62. package/components/form/demo/styles.scss +1 -0
  63. package/components/input/demo/customize.js +25 -0
  64. package/components/input/demo/customize.min.js +1 -1
  65. package/components/input/demo/demo-support.js +1 -0
  66. package/components/input/demo/getting-started.js +8 -0
  67. package/components/input/demo/getting-started.min.js +1 -1
  68. package/components/input/demo/index.js +8 -0
  69. package/components/input/demo/index.min.js +1 -1
  70. package/components/input/demo/styles.css +974 -0
  71. package/components/input/demo/styles.scss +1 -0
  72. package/components/input/dist/index.js +1 -1
  73. package/components/input/dist/registered.js +1 -1
  74. package/components/menu/demo/demo-support.js +1 -0
  75. package/components/menu/demo/index.js +25 -0
  76. package/components/menu/demo/styles.scss +1 -0
  77. package/components/radio/demo/customize.js +22 -0
  78. package/components/radio/demo/customize.min.js +1 -1
  79. package/components/radio/demo/demo-support.js +1 -0
  80. package/components/radio/demo/getting-started.js +24 -0
  81. package/components/radio/demo/getting-started.min.js +1 -1
  82. package/components/radio/demo/index.js +8 -0
  83. package/components/radio/demo/index.min.js +1 -1
  84. package/components/radio/demo/styles.scss +1 -0
  85. package/components/radio/dist/index.js +1 -1
  86. package/components/radio/dist/registered.js +1 -1
  87. package/components/select/demo/customize.js +11 -0
  88. package/components/select/demo/customize.min.js +132 -55
  89. package/components/select/demo/demo-support.js +1 -0
  90. package/components/select/demo/getting-started.js +26 -0
  91. package/components/select/demo/getting-started.min.js +132 -55
  92. package/components/select/demo/index.js +11 -0
  93. package/components/select/demo/index.min.js +132 -55
  94. package/components/select/demo/keyboard-behavior.md +18 -4
  95. package/components/select/demo/styles.scss +1 -0
  96. package/components/select/dist/auro-select.d.ts +20 -8
  97. package/components/select/dist/index.js +132 -55
  98. package/components/select/dist/registered.js +132 -55
  99. package/custom-elements.json +25 -311
  100. package/package.json +2 -6
  101. package/components/datepicker/dist/blackoutUtils.d.ts +0 -43
  102. /package/components/datepicker/dist/{auro-calendar-month.d.ts → src/auro-calendar-month.d.ts} +0 -0
  103. /package/components/datepicker/dist/{buttonVersion.d.ts → src/buttonVersion.d.ts} +0 -0
  104. /package/components/datepicker/dist/{datepickerKeyboardStrategy.d.ts → src/datepickerKeyboardStrategy.d.ts} +0 -0
  105. /package/components/datepicker/dist/{iconVersion.d.ts → src/iconVersion.d.ts} +0 -0
  106. /package/components/datepicker/dist/{index.d.ts → src/index.d.ts} +0 -0
  107. /package/components/datepicker/dist/{popoverVersion.d.ts → src/popoverVersion.d.ts} +0 -0
  108. /package/components/datepicker/dist/{styles → src/styles}/classic/color-css.d.ts +0 -0
  109. /package/components/datepicker/dist/{styles → src/styles}/classic/style-css.d.ts +0 -0
  110. /package/components/datepicker/dist/{styles → src/styles}/color-calendar-css.d.ts +0 -0
  111. /package/components/datepicker/dist/{styles → src/styles}/color-cell-css.d.ts +0 -0
  112. /package/components/datepicker/dist/{styles → src/styles}/color-css.d.ts +0 -0
  113. /package/components/datepicker/dist/{styles → src/styles}/color-month-css.d.ts +0 -0
  114. /package/components/datepicker/dist/{styles → src/styles}/shapeSize-css.d.ts +0 -0
  115. /package/components/datepicker/dist/{styles → src/styles}/snowflake/color-css.d.ts +0 -0
  116. /package/components/datepicker/dist/{styles → src/styles}/snowflake/style-css.d.ts +0 -0
  117. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-cell-css.d.ts +0 -0
  118. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-css.d.ts +0 -0
  119. /package/components/datepicker/dist/{styles → src/styles}/style-auro-calendar-month-css.d.ts +0 -0
  120. /package/components/datepicker/dist/{styles → src/styles}/style-css.d.ts +0 -0
  121. /package/components/datepicker/dist/{styles → src/styles}/tokens-css.d.ts +0 -0
  122. /package/components/datepicker/dist/{utilities.d.ts → src/utilities.d.ts} +0 -0
  123. /package/components/datepicker/dist/{utilitiesCalendar.d.ts → src/utilitiesCalendar.d.ts} +0 -0
  124. /package/components/datepicker/dist/{utilitiesCalendarRender.d.ts → src/utilitiesCalendarRender.d.ts} +0 -0
  125. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/day.d.ts +0 -0
  126. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-calendar.d.ts +0 -0
  127. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker-cell.d.ts +0 -0
  128. /package/components/datepicker/dist/{vendor → src/vendor}/wc-range-datepicker/range-datepicker.d.ts +0 -0
@@ -916,19 +916,24 @@ const selectKeyboardStrategy = {
916
916
  },
917
917
 
918
918
  End(component, evt, ctx) {
919
- if (!ctx.isExpanded) {
920
- return;
921
- }
922
919
  evt.preventDefault();
923
920
  evt.stopPropagation();
924
921
  // `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
925
922
  const lastOption = getEnabledOptions(component.menu).pop();
926
- if (lastOption) {
927
- component.menu.updateActiveOption(lastOption);
923
+ if (!lastOption) {
924
+ return;
928
925
  }
926
+ if (!ctx.isExpanded) {
927
+ component.dropdown.show();
928
+ }
929
+ component.menu.updateActiveOption(lastOption);
929
930
  },
930
931
 
931
932
  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.
932
937
  evt.preventDefault();
933
938
  evt.stopPropagation();
934
939
  if (!ctx.isExpanded) {
@@ -939,15 +944,16 @@ const selectKeyboardStrategy = {
939
944
  },
940
945
 
941
946
  Home(component, evt, ctx) {
942
- if (!ctx.isExpanded) {
943
- return;
944
- }
945
947
  evt.preventDefault();
946
948
  evt.stopPropagation();
947
949
  const [firstOption] = getEnabledOptions(component.menu);
948
- if (firstOption) {
949
- component.menu.updateActiveOption(firstOption);
950
+ if (!firstOption) {
951
+ return;
950
952
  }
953
+ if (!ctx.isExpanded) {
954
+ component.dropdown.show();
955
+ }
956
+ component.menu.updateActiveOption(firstOption);
951
957
  },
952
958
 
953
959
  Tab(component, evt, ctx) {
@@ -4894,7 +4900,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
4894
4900
  }
4895
4901
  };
4896
4902
 
4897
- var formkitVersion$1 = '202606252132';
4903
+ var formkitVersion$1 = '202606252142';
4898
4904
 
4899
4905
  class AuroElement extends LitElement {
4900
4906
  static get properties() {
@@ -6166,6 +6172,7 @@ class AuroDropdown extends AuroElement {
6166
6172
  role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
6167
6173
  aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
6168
6174
  aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
6175
+ aria-haspopup="${ifDefined(this.a11yRole === 'combobox' ? 'listbox' : undefined)}"
6169
6176
  aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
6170
6177
  aria-disabled="${ifDefined(this.disabled ? 'true' : undefined)}"
6171
6178
  @focusin="${this.handleFocusin}"
@@ -6915,7 +6922,7 @@ class AuroHelpText extends LitElement {
6915
6922
  }
6916
6923
  }
6917
6924
 
6918
- var formkitVersion = '202606252132';
6925
+ var formkitVersion = '202606252142';
6919
6926
 
6920
6927
  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}`;
6921
6928
 
@@ -7247,14 +7254,6 @@ class AuroSelect extends AuroElement$1 {
7247
7254
  reflect: true
7248
7255
  },
7249
7256
 
7250
- /**
7251
- * @private
7252
- */
7253
- options: {
7254
- type: Array,
7255
- state: true
7256
- },
7257
-
7258
7257
  /**
7259
7258
  * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
7260
7259
  * @type {HTMLElement|Array<HTMLElement>}
@@ -7542,16 +7541,68 @@ class AuroSelect extends AuroElement$1 {
7542
7541
  this.dropdown.dropdownWidth = this.customBibWidth;
7543
7542
  }
7544
7543
 
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
- }
7544
+ this._syncLabelText();
7550
7545
 
7551
7546
  // Exposes the CSS parts from the dropdown for styling
7552
7547
  this.dropdown.exposeCssParts();
7553
7548
  }
7554
7549
 
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
+
7555
7606
  /**
7556
7607
  * This will register this element with the browser.
7557
7608
  * @param {string} [name="auro-select"] - The name of element that you want to register to.
@@ -7702,11 +7753,7 @@ class AuroSelect extends AuroElement$1 {
7702
7753
  this.updateMenuShapeSize();
7703
7754
  this.setMenuValue(this.value);
7704
7755
 
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
- }
7756
+ this._syncLabelText();
7710
7757
 
7711
7758
  if (this.multiSelect) {
7712
7759
  this.menu.multiSelect = this.multiSelect;
@@ -7718,8 +7765,21 @@ class AuroSelect extends AuroElement$1 {
7718
7765
  if (typeof this.menu.initItems === 'function') {
7719
7766
  this.menu.initItems();
7720
7767
  }
7721
- this.options = this.menu.options;
7722
7768
  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
+
7723
7783
  this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
7724
7784
 
7725
7785
  this.menu.addEventListener("auroMenu-selectValueFailure", () => {
@@ -7738,11 +7798,22 @@ class AuroSelect extends AuroElement$1 {
7738
7798
  this.dropdown.setActiveDescendant(this.optionActive);
7739
7799
  }
7740
7800
 
7741
- // Announce the active option for screen readers
7742
- if (this.optionActive) {
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')) {
7743
7806
  const optionText = this.optionActive.textContent.trim();
7744
- const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
7745
- announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
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
+ }
7746
7817
  }
7747
7818
 
7748
7819
  if (this.dropdown.isPopoverVisible) {
@@ -7874,24 +7945,32 @@ class AuroSelect extends AuroElement$1 {
7874
7945
 
7875
7946
  this.typeaheadBuffer += key;
7876
7947
 
7877
- const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
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));
7878
7954
 
7879
- let match = null;
7955
+ const isRepeatedChar = !match && this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7880
7956
  if (isRepeatedChar) {
7881
7957
  const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
7882
7958
  if (matches.length) {
7883
7959
  const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
7884
7960
  match = matches[cycleIndex];
7885
7961
  }
7886
- } else {
7887
- match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7888
7962
  }
7889
7963
 
7964
+ // Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
7890
7965
  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);
7891
7971
  if (!this.dropdown.isPopoverVisible) {
7892
7972
  this.dropdown.show();
7893
7973
  }
7894
- this.menu.updateActiveOption(match);
7895
7974
  }
7896
7975
  }
7897
7976
 
@@ -8008,6 +8087,16 @@ class AuroSelect extends AuroElement$1 {
8008
8087
  disconnectedCallback() {
8009
8088
  super.disconnectedCallback();
8010
8089
  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
+ }
8011
8100
  }
8012
8101
 
8013
8102
  // lifecycle runs only after the element's DOM has been updated the first time
@@ -8018,6 +8107,7 @@ class AuroSelect extends AuroElement$1 {
8018
8107
  this.configureDropdown();
8019
8108
  this.configureMenu();
8020
8109
  this.configureSelect();
8110
+ this._observeLabelChanges();
8021
8111
  }
8022
8112
 
8023
8113
  setMenuValue(value) {
@@ -8154,21 +8244,8 @@ class AuroSelect extends AuroElement$1 {
8154
8244
  if (!selectedOption) return;
8155
8245
  const selectedValue = selectedOption.value;
8156
8246
 
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
- }
8247
+ if (this.value !== selectedValue) {
8248
+ this.value = selectedValue;
8172
8249
  }
8173
8250
  }
8174
8251