@aurodesignsystem-dev/auro-formkit 0.0.0-pr1511.1 → 0.0.0-pr1513.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 (47) 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 +3 -4
  7. package/components/combobox/demo/getting-started.min.js +3 -4
  8. package/components/combobox/demo/index.min.js +3 -4
  9. package/components/combobox/dist/index.js +3 -4
  10. package/components/combobox/dist/registered.js +3 -4
  11. package/components/counter/demo/customize.min.js +2 -10
  12. package/components/counter/demo/index.min.js +2 -10
  13. package/components/counter/dist/index.js +2 -10
  14. package/components/counter/dist/registered.js +2 -10
  15. package/components/datepicker/demo/customize.min.js +17 -5
  16. package/components/datepicker/demo/index.min.js +17 -5
  17. package/components/datepicker/dist/auro-calendar.d.ts +1 -0
  18. package/components/datepicker/dist/index.js +17 -5
  19. package/components/datepicker/dist/registered.js +17 -5
  20. package/components/dropdown/demo/customize.min.js +1 -2
  21. package/components/dropdown/demo/getting-started.min.js +1 -2
  22. package/components/dropdown/demo/index.min.js +1 -2
  23. package/components/dropdown/dist/index.js +1 -2
  24. package/components/dropdown/dist/registered.js +1 -2
  25. package/components/form/demo/customize.min.js +87 -208
  26. package/components/form/demo/getting-started.min.js +87 -208
  27. package/components/form/demo/index.min.js +87 -208
  28. package/components/form/demo/registerDemoDeps.min.js +87 -208
  29. package/components/input/demo/customize.min.js +1 -1
  30. package/components/input/demo/getting-started.min.js +1 -1
  31. package/components/input/demo/index.min.js +1 -1
  32. package/components/input/dist/index.js +1 -1
  33. package/components/input/dist/registered.js +1 -1
  34. package/components/radio/demo/customize.min.js +1 -1
  35. package/components/radio/demo/getting-started.min.js +1 -1
  36. package/components/radio/demo/index.min.js +1 -1
  37. package/components/radio/dist/index.js +1 -1
  38. package/components/radio/dist/registered.js +1 -1
  39. package/components/select/demo/customize.min.js +62 -186
  40. package/components/select/demo/getting-started.min.js +62 -186
  41. package/components/select/demo/index.min.js +62 -186
  42. package/components/select/demo/keyboard-behavior.md +4 -18
  43. package/components/select/dist/auro-select.d.ts +8 -20
  44. package/components/select/dist/index.js +62 -186
  45. package/components/select/dist/registered.js +62 -186
  46. package/custom-elements.json +1503 -1489
  47. package/package.json +1 -1
@@ -12202,7 +12202,7 @@ class AuroHelpText extends LitElement {
12202
12202
  }
12203
12203
  }
12204
12204
 
12205
- var formkitVersion = '202606261928';
12205
+ var formkitVersion = '202606291440';
12206
12206
 
12207
12207
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12208
12208
  // See LICENSE in the project root for license information.
@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
1212
1212
  }
1213
1213
  }
1214
1214
 
1215
- var formkitVersion = '202606261928';
1215
+ var formkitVersion = '202606291440';
1216
1216
 
1217
1217
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1218
1218
  // See LICENSE in the project root for license information.
@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
1212
1212
  }
1213
1213
  }
1214
1214
 
1215
- var formkitVersion = '202606261928';
1215
+ var formkitVersion = '202606291440';
1216
1216
 
1217
1217
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1218
1218
  // See LICENSE in the project root for license information.
@@ -1212,7 +1212,7 @@ class AuroHelpText extends i$2 {
1212
1212
  }
1213
1213
  }
1214
1214
 
1215
- var formkitVersion = '202606261928';
1215
+ var formkitVersion = '202606291440';
1216
1216
 
1217
1217
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1218
1218
  // See LICENSE in the project root for license information.
@@ -1151,7 +1151,7 @@ class AuroHelpText extends LitElement {
1151
1151
  }
1152
1152
  }
1153
1153
 
1154
- var formkitVersion = '202606261928';
1154
+ var formkitVersion = '202606291440';
1155
1155
 
1156
1156
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1157
1157
  // See LICENSE in the project root for license information.
@@ -1151,7 +1151,7 @@ class AuroHelpText extends LitElement {
1151
1151
  }
1152
1152
  }
1153
1153
 
1154
- var formkitVersion = '202606261928';
1154
+ var formkitVersion = '202606291440';
1155
1155
 
1156
1156
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1157
1157
  // See LICENSE in the project root for license information.
@@ -959,28 +959,19 @@ const selectKeyboardStrategy = {
959
959
  },
960
960
 
961
961
  End(component, evt, ctx) {
962
+ if (!ctx.isExpanded) {
963
+ return;
964
+ }
962
965
  evt.preventDefault();
963
966
  evt.stopPropagation();
964
967
  // `pop()` is safe here: getEnabledOptions returns a fresh filtered array.
965
968
  const lastOption = getEnabledOptions(component.menu).pop();
966
- if (!lastOption) {
967
- return;
968
- }
969
- // Pre-stash before show() so the auroDropdown-toggled handler's
970
- // `!optionActive` guard short-circuits the firstActive/selected fallback —
971
- // otherwise show() synchronously fires the handler and writes
972
- // aria-activedescendant once before we overwrite it.
973
- component.menu.updateActiveOption(lastOption);
974
- if (!ctx.isExpanded) {
975
- component.dropdown.show();
969
+ if (lastOption) {
970
+ component.menu.updateActiveOption(lastOption);
976
971
  }
977
972
  },
978
973
 
979
974
  Enter(component, evt, ctx) {
980
- // Prevent the keypress from bubbling to parent containers (e.g., forms)
981
- // which could interpret Enter as a submit. Matches APG select-only combobox
982
- // and native <select> behavior: Enter opens the listbox when closed, selects
983
- // the active option when open — it does not submit a parent form.
984
975
  evt.preventDefault();
985
976
  evt.stopPropagation();
986
977
  if (!ctx.isExpanded) {
@@ -991,16 +982,14 @@ const selectKeyboardStrategy = {
991
982
  },
992
983
 
993
984
  Home(component, evt, ctx) {
985
+ if (!ctx.isExpanded) {
986
+ return;
987
+ }
994
988
  evt.preventDefault();
995
989
  evt.stopPropagation();
996
990
  const [firstOption] = getEnabledOptions(component.menu);
997
- if (!firstOption) {
998
- return;
999
- }
1000
- // See End() for why this must run before show().
1001
- component.menu.updateActiveOption(firstOption);
1002
- if (!ctx.isExpanded) {
1003
- component.dropdown.show();
991
+ if (firstOption) {
992
+ component.menu.updateActiveOption(firstOption);
1004
993
  }
1005
994
  },
1006
995
 
@@ -4972,7 +4961,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$2 {
4972
4961
  }
4973
4962
  };
4974
4963
 
4975
- var formkitVersion$1 = '202606261928';
4964
+ var formkitVersion$1 = '202606291440';
4976
4965
 
4977
4966
  class AuroElement extends i$2 {
4978
4967
  static get properties() {
@@ -6244,7 +6233,6 @@ class AuroDropdown extends AuroElement {
6244
6233
  role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
6245
6234
  aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
6246
6235
  aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
6247
- aria-haspopup="${o(this.a11yRole === 'combobox' && !this.triggerContentFocusable ? 'listbox' : undefined)}"
6248
6236
  aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
6249
6237
  aria-disabled="${o(this.disabled ? 'true' : undefined)}"
6250
6238
  @focusin="${this.handleFocusin}"
@@ -6994,7 +6982,7 @@ class AuroHelpText extends i$2 {
6994
6982
  }
6995
6983
  }
6996
6984
 
6997
- var formkitVersion = '202606261928';
6985
+ var formkitVersion = '202606291440';
6998
6986
 
6999
6987
  var styleCss$2 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7000
6988
 
@@ -7326,6 +7314,14 @@ class AuroSelect extends AuroElement$1 {
7326
7314
  reflect: true
7327
7315
  },
7328
7316
 
7317
+ /**
7318
+ * @private
7319
+ */
7320
+ options: {
7321
+ type: Array,
7322
+ state: true
7323
+ },
7324
+
7329
7325
  /**
7330
7326
  * Specifies the current selected menuOption. Default type is `HTMLElement`, changing to `Array<HTMLElement>` when `multiSelect` is true.
7331
7327
  * @type {HTMLElement|Array<HTMLElement>}
@@ -7613,68 +7609,16 @@ class AuroSelect extends AuroElement$1 {
7613
7609
  this.dropdown.dropdownWidth = this.customBibWidth;
7614
7610
  }
7615
7611
 
7616
- this._syncLabelText();
7612
+ // Pass label text to the dropdown bib for accessible dialog naming
7613
+ const labelElement = this.querySelector('span[slot="label"]');
7614
+ if (labelElement) {
7615
+ this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
7616
+ }
7617
7617
 
7618
7618
  // Exposes the CSS parts from the dropdown for styling
7619
7619
  this.dropdown.exposeCssParts();
7620
7620
  }
7621
7621
 
7622
- /**
7623
- * Reads the current label slot text and pushes it to the dropdown bib
7624
- * (for dialog naming) and the menu (for listbox aria-label). Safe to call
7625
- * before either child has been wired up — each branch self-guards.
7626
- * @private
7627
- */
7628
- _syncLabelText() {
7629
- const labelElement = this.querySelector('[slot="label"]');
7630
- const text = labelElement ? labelElement.textContent.trim() : '';
7631
- if (this.dropdown) {
7632
- this.dropdown.bibDialogLabel = text || undefined;
7633
- }
7634
- if (this.menu) {
7635
- if (text) {
7636
- this.menu.setAttribute('aria-label', text);
7637
- } else {
7638
- this.menu.removeAttribute('aria-label');
7639
- }
7640
- }
7641
- }
7642
-
7643
- /**
7644
- * Keeps the dialog/menu accessible names in sync when consumers mutate the
7645
- * label slot at runtime (e.g., i18n locale swap). `slotchange` alone is
7646
- * insufficient — it doesn't fire when textContent of an already-assigned
7647
- * slotted node changes, which is the common case. We scope the observer to
7648
- * the label node itself (not the whole host subtree) so option-content
7649
- * mutations don't trigger label re-syncs, and re-target on `slotchange`
7650
- * when consumers add or replace the label element.
7651
- * @private
7652
- */
7653
- _observeLabelChanges() {
7654
- if (this._labelObserver) return;
7655
- this._labelObserver = new MutationObserver(() => this._syncLabelText());
7656
-
7657
- const retarget = () => {
7658
- this._labelObserver.disconnect();
7659
- const labelElement = this.querySelector('[slot="label"]');
7660
- if (labelElement) {
7661
- this._labelObserver.observe(labelElement, {
7662
- childList: true,
7663
- subtree: true,
7664
- characterData: true
7665
- });
7666
- }
7667
- this._syncLabelText();
7668
- };
7669
-
7670
- retarget();
7671
-
7672
- this._retargetLabelObserver = retarget;
7673
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
7674
- slot.addEventListener('slotchange', retarget);
7675
- });
7676
- }
7677
-
7678
7622
  /**
7679
7623
  * This will register this element with the browser.
7680
7624
  * @param {string} [name="auro-select"] - The name of element that you want to register to.
@@ -7825,7 +7769,11 @@ class AuroSelect extends AuroElement$1 {
7825
7769
  this.updateMenuShapeSize();
7826
7770
  this.setMenuValue(this.value);
7827
7771
 
7828
- this._syncLabelText();
7772
+ // Set accessible name on the menu for screen readers based on the label slot content
7773
+ const labelElement = this.querySelector('[slot="label"]');
7774
+ if (labelElement) {
7775
+ this.menu.setAttribute('aria-label', labelElement.textContent.trim());
7776
+ }
7829
7777
 
7830
7778
  if (this.multiSelect) {
7831
7779
  this.menu.multiSelect = this.multiSelect;
@@ -7837,21 +7785,8 @@ class AuroSelect extends AuroElement$1 {
7837
7785
  if (typeof this.menu.initItems === 'function') {
7838
7786
  this.menu.initItems();
7839
7787
  }
7788
+ this.options = this.menu.options;
7840
7789
  this.updateOptionPositions();
7841
- // renderNativeSelect reads this.menu.options, which the parent doesn't
7842
- // observe — request an update so the hidden native <option> list reflects
7843
- // the menu's options after initItems populates them.
7844
- this.requestUpdate();
7845
-
7846
- // Keep aria-setsize/aria-posinset (and the native <option> list) in sync
7847
- // when the menu re-initializes its items — e.g., slotchange, async/lazy
7848
- // loads, value-triggered re-init. Without this, stale set-size is
7849
- // announced and the native select goes stale after dynamic mutations.
7850
- this.menu.addEventListener('auroMenu-optionsChange', () => {
7851
- this.updateOptionPositions();
7852
- this.requestUpdate();
7853
- });
7854
-
7855
7790
  this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
7856
7791
 
7857
7792
  this.menu.addEventListener("auroMenu-selectValueFailure", () => {
@@ -7870,26 +7805,11 @@ class AuroSelect extends AuroElement$1 {
7870
7805
  this.dropdown.setActiveDescendant(this.optionActive);
7871
7806
  }
7872
7807
 
7873
- // Live-region announce only for [not selected] options. For activations
7874
- // on an already-selected option — auto-activation on bib open, arrow
7875
- // navigation back to the selection, or click in multiSelect — rely on
7876
- // aria-activedescendant + aria-selected="true" to convey state per the
7877
- // WAI-ARIA listbox pattern. This is intentional, not limited to the
7878
- // initial activation on open: it also prevents a duplicate "X, selected"
7879
- // when Enter on the active+selected option re-fires
7880
- // auroMenu-selectedOption (see 03b289e39).
7881
- if (this.optionActive && !this.optionActive.hasAttribute('selected')) {
7808
+ // Announce the active option for screen readers
7809
+ if (this.optionActive) {
7882
7810
  const optionText = this.optionActive.textContent.trim();
7883
- const message = `${optionText}, not selected`;
7884
- if (this.dropdown.isPopoverVisible) {
7885
- announceToScreenReader(this._getAnnouncementRoot(), message);
7886
- } else {
7887
- // Typeahead-on-closed fires this event before `show()` flips
7888
- // isPopoverVisible. Defer so the announcement targets the bib's
7889
- // live region once the fullscreen <dialog> opens — otherwise it
7890
- // lands in the host root, which is inert under the active modal.
7891
- queueMicrotask(() => announceToScreenReader(this._getAnnouncementRoot(), message));
7892
- }
7811
+ const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
7812
+ announceToScreenReader(this._getAnnouncementRoot(), `${optionText}${selectedState}`);
7893
7813
  }
7894
7814
 
7895
7815
  if (this.dropdown.isPopoverVisible) {
@@ -7898,7 +7818,6 @@ class AuroSelect extends AuroElement$1 {
7898
7818
  });
7899
7819
 
7900
7820
  this.menu.addEventListener('auroMenu-selectedOption', () => {
7901
- const previousSelected = this.optionSelected;
7902
7821
 
7903
7822
  // Update the displayed value
7904
7823
  this.updateDisplayedValue();
@@ -7918,32 +7837,13 @@ class AuroSelect extends AuroElement$1 {
7918
7837
  this.dropdown.trigger.focus();
7919
7838
  }
7920
7839
 
7921
- // Describe the actual change. In multiSelect, currentLabel is the
7922
- // concatenated remaining list — announcing "{list}, selected" after a
7923
- // deselect would falsely claim every remaining label was just added.
7924
- // Diff previous vs next to recover the toggled option.
7925
- let announcement = '';
7926
- if (this.multiSelect) {
7927
- const prev = Array.isArray(previousSelected) ? previousSelected : [];
7928
- const removed = prev.find((opt) => !nextSelected.includes(opt));
7929
- const added = nextSelected.find((opt) => !prev.includes(opt));
7930
- if (removed) {
7931
- announcement = `${removed.textContent.trim()}, not selected`;
7932
- } else if (added) {
7933
- announcement = `${added.textContent.trim()}, selected`;
7934
- }
7935
- } else {
7936
- announcement = `${this.menu.currentLabel}, selected`;
7937
- }
7938
-
7939
- // Delay so the utterance isn't overridden by VoiceOver's "collapsed"
7940
- // announcement from aria-expanded when the dropdown closes.
7941
- if (announcement) {
7942
- const announcementDelay = 300;
7943
- setTimeout(() => {
7944
- announceToScreenReader(this._getAnnouncementRoot(), announcement);
7945
- }, announcementDelay);
7946
- }
7840
+ // Announce the selection after the dropdown closes so it isn't
7841
+ // overridden by VoiceOver's "collapsed" announcement from aria-expanded.
7842
+ const selectedValue = this.menu.currentLabel;
7843
+ const announcementDelay = 300;
7844
+ setTimeout(() => {
7845
+ announceToScreenReader(this._getAnnouncementRoot(), `${selectedValue}, selected`);
7846
+ }, announcementDelay);
7947
7847
  });
7948
7848
  }
7949
7849
 
@@ -8041,32 +7941,24 @@ class AuroSelect extends AuroElement$1 {
8041
7941
 
8042
7942
  this.typeaheadBuffer += key;
8043
7943
 
8044
- // Prefer the literal buffer as a prefix per WAI-ARIA APG ("focus moves to the
8045
- // next item with a name that starts with the string of characters typed").
8046
- // Only fall back to single-char cycling when the repeated buffer has no
8047
- // longer prefix match — e.g. "aa" cycles through ["Apple", "Apricot"] only
8048
- // because no option starts with "aa".
8049
- let match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
7944
+ const isRepeatedChar = this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
8050
7945
 
8051
- const isRepeatedChar = !match && this.typeaheadBuffer.length > 1 && new Set(this.typeaheadBuffer).size === 1;
7946
+ let match = null;
8052
7947
  if (isRepeatedChar) {
8053
7948
  const matches = options.filter((option) => this._getOptionDisplayText(option).startsWith(key));
8054
7949
  if (matches.length) {
8055
7950
  const cycleIndex = (this.typeaheadBuffer.length - 1) % matches.length;
8056
7951
  match = matches[cycleIndex];
8057
7952
  }
7953
+ } else {
7954
+ match = options.find((option) => this._getOptionDisplayText(option).startsWith(this.typeaheadBuffer));
8058
7955
  }
8059
7956
 
8060
- // Intentional: no-match leaves the bib closed (deviates from APG / some native <select>).
8061
7957
  if (match) {
8062
- // Pre-stash the match so the auroDropdown-toggled handler's `!optionActive`
8063
- // guard short-circuits and skips the firstActive/selected fallback —
8064
- // otherwise show() synchronously fires the handler, which writes
8065
- // aria-activedescendant once before we overwrite it.
8066
- this.menu.updateActiveOption(match);
8067
7958
  if (!this.dropdown.isPopoverVisible) {
8068
7959
  this.dropdown.show();
8069
7960
  }
7961
+ this.menu.updateActiveOption(match);
8070
7962
  }
8071
7963
  }
8072
7964
 
@@ -8183,28 +8075,6 @@ class AuroSelect extends AuroElement$1 {
8183
8075
  disconnectedCallback() {
8184
8076
  super.disconnectedCallback();
8185
8077
  this._clearTypeaheadBuffer();
8186
- if (this._labelObserver) {
8187
- this._labelObserver.disconnect();
8188
- this._labelObserver = null;
8189
- }
8190
- if (this._retargetLabelObserver && this.shadowRoot) {
8191
- this.shadowRoot.querySelectorAll('slot[name="label"]').forEach((slot) => {
8192
- slot.removeEventListener('slotchange', this._retargetLabelObserver);
8193
- });
8194
- this._retargetLabelObserver = null;
8195
- }
8196
- }
8197
-
8198
- connectedCallback() {
8199
- super.connectedCallback();
8200
- // Regression guard: firstUpdated() fires once per instance, so the label
8201
- // observer setup it triggers does NOT re-run on reconnect. After a
8202
- // disconnect+reconnect (reparent, SPA route swap), runtime label mutations
8203
- // would silently stop syncing menu aria-label / dropdown.bibDialogLabel
8204
- // unless we re-wire the observer here.
8205
- if (this.hasUpdated) {
8206
- this._observeLabelChanges();
8207
- }
8208
8078
  }
8209
8079
 
8210
8080
  // lifecycle runs only after the element's DOM has been updated the first time
@@ -8215,7 +8085,6 @@ class AuroSelect extends AuroElement$1 {
8215
8085
  this.configureDropdown();
8216
8086
  this.configureMenu();
8217
8087
  this.configureSelect();
8218
- this._observeLabelChanges();
8219
8088
  }
8220
8089
 
8221
8090
  setMenuValue(value) {
@@ -8348,18 +8217,25 @@ class AuroSelect extends AuroElement$1 {
8348
8217
  * @private
8349
8218
  */
8350
8219
  _handleNativeSelectChange(event) {
8351
- // Hidden native <select> has no `multiple` attribute, so any change it fires
8352
- // is a single raw value — applying it in multiSelect mode would collapse the
8353
- // JSON-array `value` shape. Bfcache/autofill can reach this on a name-bearing
8354
- // form control even with aria-hidden/tabindex=-1.
8355
- if (this.multiSelect) return;
8356
-
8357
8220
  const selectedOption = event.target.options[event.target.selectedIndex];
8358
8221
  if (!selectedOption) return;
8359
8222
  const selectedValue = selectedOption.value;
8360
8223
 
8361
- if (this.value !== selectedValue) {
8362
- this.value = selectedValue;
8224
+ if (this.multiSelect) {
8225
+ const currentArray = this.menu.value || [];
8226
+
8227
+ if (!currentArray.includes(selectedValue)) {
8228
+ this.value = JSON.stringify([
8229
+ ...currentArray,
8230
+ selectedValue
8231
+ ]);
8232
+ }
8233
+ } else {
8234
+ const currentValue = this.value;
8235
+
8236
+ if (currentValue !== selectedValue) {
8237
+ this.value = selectedValue;
8238
+ }
8363
8239
  }
8364
8240
  }
8365
8241