@aurodesignsystem-dev/auro-formkit 0.0.0-pr1318.0 → 0.0.0-pr1318.10

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 (40) hide show
  1. package/components/checkbox/demo/api.min.js +1 -1
  2. package/components/checkbox/demo/index.min.js +1 -1
  3. package/components/checkbox/dist/index.js +1 -1
  4. package/components/checkbox/dist/registered.js +1 -1
  5. package/components/combobox/demo/api.min.js +63 -7
  6. package/components/combobox/demo/index.min.js +63 -7
  7. package/components/combobox/dist/auro-combobox.d.ts +1 -1
  8. package/components/combobox/dist/index.js +63 -7
  9. package/components/combobox/dist/registered.js +63 -7
  10. package/components/counter/demo/api.min.js +17 -3
  11. package/components/counter/demo/index.min.js +17 -3
  12. package/components/counter/dist/index.js +17 -3
  13. package/components/counter/dist/registered.js +17 -3
  14. package/components/datepicker/demo/api.min.js +43 -5
  15. package/components/datepicker/demo/index.min.js +43 -5
  16. package/components/datepicker/dist/index.js +43 -5
  17. package/components/datepicker/dist/registered.js +43 -5
  18. package/components/dropdown/demo/api.min.js +16 -2
  19. package/components/dropdown/demo/index.min.js +16 -2
  20. package/components/dropdown/dist/auro-dropdown.d.ts +9 -0
  21. package/components/dropdown/dist/index.js +16 -2
  22. package/components/dropdown/dist/registered.js +16 -2
  23. package/components/input/demo/api.md +5 -3
  24. package/components/input/demo/api.min.js +26 -2
  25. package/components/input/demo/index.min.js +26 -2
  26. package/components/input/dist/auro-input.d.ts +1 -0
  27. package/components/input/dist/base-input.d.ts +10 -0
  28. package/components/input/dist/index.js +26 -2
  29. package/components/input/dist/registered.js +26 -2
  30. package/components/radio/demo/api.min.js +1 -1
  31. package/components/radio/demo/index.min.js +1 -1
  32. package/components/radio/dist/index.js +1 -1
  33. package/components/radio/dist/registered.js +1 -1
  34. package/components/select/demo/api.min.js +56 -11
  35. package/components/select/demo/index.min.js +56 -11
  36. package/components/select/dist/auro-select.d.ts +7 -0
  37. package/components/select/dist/index.js +56 -11
  38. package/components/select/dist/registered.js +56 -11
  39. package/custom-elements.json +92 -5
  40. package/package.json +9 -3
package/components/select/demo/api.min.js CHANGED
@@ -4481,7 +4481,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
4481
4481
  }
4482
4482
  };
4483
4483
 
4484
- var formkitVersion$1 = '202602031735';
4484
+ var formkitVersion$1 = '202602112105';
4485
4485
 
4486
4486
  class AuroElement extends i$3 {
4487
4487
  static get properties() {
@@ -4768,6 +4768,20 @@ class AuroDropdown extends AuroElement {
4768
4768
  }
4769
4769
  }
4770
4770
 
4771
+ /**
4772
+ * Sets the active descendant element for accessibility.
4773
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
4774
+ * This function is used in components that contain `auro-dropdown` to set the active descendant.
4775
+ * @private
4776
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
4777
+ * @returns {void}
4778
+ */
4779
+ setActiveDescendant(element) {
4780
+ if (this.trigger) {
4781
+ this.trigger.ariaActiveDescendantElement = element;
4782
+ }
4783
+ }
4784
+
4771
4785
  // function to define props used within the scope of this component
4772
4786
  static get properties() {
4773
4787
  return {
@@ -5411,7 +5425,7 @@ class AuroDropdown extends AuroElement {
5411
5425
  tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
5412
5426
  role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
5413
5427
  aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
5414
- aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
5428
+ aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
5415
5429
  aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
5416
5430
  @focusin="${this.handleFocusin}"
5417
5431
  @blur="${this.handleFocusOut}">
@@ -6138,7 +6152,7 @@ class AuroHelpText extends i$3 {
6138
6152
  }
6139
6153
  }
6140
6154
 
6141
- var formkitVersion = '202602031735';
6155
+ var formkitVersion = '202602112105';
6142
6156
 
6143
6157
  var styleCss$2 = i$6`.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);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-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, 450);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, 450);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}`;
6144
6158
 
@@ -6475,6 +6489,15 @@ class AuroSelect extends AuroElement$1 {
6475
6489
  type: Object
6476
6490
  },
6477
6491
 
6492
+ /**
6493
+ * Specifies the current active/highlighted `auro-menuoption`.
6494
+ * @type {HTMLElement}
6495
+ * @private
6496
+ */
6497
+ optionActive: {
6498
+ type: Object
6499
+ },
6500
+
6478
6501
  /**
6479
6502
  * Define custom placeholder text.
6480
6503
  */
@@ -6657,10 +6680,17 @@ class AuroSelect extends AuroElement$1 {
6657
6680
  */
6658
6681
  configureDropdown() {
6659
6682
  this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
6683
+ this.dropdown.a11yRole = 'combobox';
6660
6684
 
6661
6685
  this.dropdown.addEventListener('auroDropdown-toggled', () => {
6662
6686
  this.isPopoverVisible = this.dropdown.isPopoverVisible;
6663
6687
 
6688
+ // Clear aria-activedescendant when dropdown closes
6689
+ if (!this.dropdown.isPopoverVisible) {
6690
+ this.dropdown.setActiveDescendant(null);
6691
+ this.optionActive = null;
6692
+ }
6693
+
6664
6694
  if (this.dropdown.isPopoverVisible) {
6665
6695
  this.updateMenuShapeSize();
6666
6696
  // wait til the bib gets fully rendered
@@ -6797,6 +6827,13 @@ class AuroSelect extends AuroElement$1 {
6797
6827
  */
6798
6828
  configureMenu() {
6799
6829
  this.menu = this.querySelector('auro-menu, [auro-menu]');
6830
+
6831
+ const labelElement = this.querySelector('span[slot="label"]');
6832
+
6833
+ if (labelElement) {
6834
+ this.menu.setAttribute('aria-label', labelElement.textContent);
6835
+ }
6836
+
6800
6837
  this.defaultMenuSize = this.menu.getAttribute('size');
6801
6838
  this.defaultMenuShape = this.menu.getAttribute('shape');
6802
6839
 
@@ -6816,8 +6853,15 @@ class AuroSelect extends AuroElement$1 {
6816
6853
  }
6817
6854
 
6818
6855
  this.options = this.menu.options;
6819
- this.menu.setAttribute('aria-hidden', 'true');
6820
6856
  this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
6857
+
6858
+ this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
6859
+ this.optionActive = evt.detail;
6860
+
6861
+ if (this.dropdown) {
6862
+ this.dropdown.setActiveDescendant(this.optionActive);
6863
+ }
6864
+ });
6821
6865
  this.menu.addEventListener('auroMenu-selectedOption', (event) => {
6822
6866
 
6823
6867
  // Update the displayed value
@@ -7282,7 +7326,6 @@ class AuroSelect extends AuroElement$1 {
7282
7326
  </div>
7283
7327
  <${this.dropdownTag}
7284
7328
  appearance="${this.onDark ? 'inverse' : this.appearance}"
7285
- a11yRole="select"
7286
7329
  ?autoPlacement="${this.autoPlacement}"
7287
7330
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
7288
7331
  ?matchWidth="${this.matchWidth}"
@@ -7297,13 +7340,13 @@ class AuroSelect extends AuroElement$1 {
7297
7340
  part="dropdown"
7298
7341
  shape="${this.shape}"
7299
7342
  size="${this.size}">
7300
- <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
7343
+ <div slot="trigger" aria-haspopup="listbox" id="triggerFocus" class="triggerContent">
7301
7344
  <div class="accents left">
7302
7345
  <slot name="typeIcon"></slot>
7303
7346
  </div>
7304
7347
  <div class="mainContent">
7305
7348
  <div class="${e$2(valueContainerClasses)}">
7306
- <label class="${e$2(this.commonLabelClasses)}">
7349
+ <label id="dropdownLabel" class="${e$2(this.commonLabelClasses)}">
7307
7350
  <slot name="label"></slot>
7308
7351
  ${this.required ? undefined : u$4`<slot name="optionalLabel"> (optional)</slot>`}
7309
7352
  </label>
@@ -7362,6 +7405,7 @@ class AuroSelect extends AuroElement$1 {
7362
7405
  </div>
7363
7406
  <${this.dropdownTag}
7364
7407
  appearance="${this.onDark ? 'inverse' : this.appearance}"
7408
+ a11yRole="combobox"
7365
7409
  ?autoPlacement="${this.autoPlacement}"
7366
7410
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
7367
7411
  ?matchWidth="${this.matchWidth}"
@@ -7375,13 +7419,13 @@ class AuroSelect extends AuroElement$1 {
7375
7419
  part="dropdown"
7376
7420
  shape="${this.shape}"
7377
7421
  size="${this.size}">
7378
- <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
7422
+ <div slot="trigger" aria-haspopup="listbox" id="triggerFocus" class="triggerContent">
7379
7423
  <div class="accents left">
7380
7424
  <slot name="typeIcon"></slot>
7381
7425
  </div>
7382
7426
  <div class="mainContent">
7383
7427
  <div class="${e$2(valueContainerClasses)}">
7384
- <label class="${e$2(this.commonLabelClasses)}">
7428
+ <label id="dropdownLabel" class="${e$2(this.commonLabelClasses)}">
7385
7429
  <slot name="label"></slot>
7386
7430
  ${this.required ? undefined : u$4`<slot name="optionalLabel"> (optional)</slot>`}
7387
7431
  </label>
@@ -7446,6 +7490,7 @@ class AuroSelect extends AuroElement$1 {
7446
7490
  </div>
7447
7491
  <${this.dropdownTag}
7448
7492
  appearance="${this.onDark ? 'inverse' : this.appearance}"
7493
+ a11yRole="combobox"
7449
7494
  ?autoPlacement="${this.autoPlacement}"
7450
7495
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
7451
7496
  ?matchWidth="${!this.flexMenuWidth}"
@@ -7459,13 +7504,13 @@ class AuroSelect extends AuroElement$1 {
7459
7504
  part="dropdown"
7460
7505
  shape="${this.shape}"
7461
7506
  size="${this.size}">
7462
- <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
7507
+ <div slot="trigger" aria-haspopup="listbox" id="triggerFocus" class="triggerContent">
7463
7508
  <div class="accents left">
7464
7509
  <slot name="typeIcon"></slot>
7465
7510
  </div>
7466
7511
  <div class="mainContent">
7467
7512
  <div class="${e$2(valueContainerClasses)}">
7468
- <label class="${e$2(this.commonLabelClasses)}">
7513
+ <label id="dropdownLabel" class="${e$2(this.commonLabelClasses)}">
7469
7514
  <slot name="label"></slot>
7470
7515
  ${this.required ? undefined : u$4`<slot name="optionalLabel"> (optional)</slot>`}
7471
7516
  </label>
package/components/select/demo/index.min.js CHANGED
@@ -4420,7 +4420,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
4420
4420
  }
4421
4421
  };
4422
4422
 
4423
- var formkitVersion$1 = '202602031735';
4423
+ var formkitVersion$1 = '202602112105';
4424
4424
 
4425
4425
  class AuroElement extends i$3 {
4426
4426
  static get properties() {
@@ -4707,6 +4707,20 @@ class AuroDropdown extends AuroElement {
4707
4707
  }
4708
4708
  }
4709
4709
 
4710
+ /**
4711
+ * Sets the active descendant element for accessibility.
4712
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
4713
+ * This function is used in components that contain `auro-dropdown` to set the active descendant.
4714
+ * @private
4715
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
4716
+ * @returns {void}
4717
+ */
4718
+ setActiveDescendant(element) {
4719
+ if (this.trigger) {
4720
+ this.trigger.ariaActiveDescendantElement = element;
4721
+ }
4722
+ }
4723
+
4710
4724
  // function to define props used within the scope of this component
4711
4725
  static get properties() {
4712
4726
  return {
@@ -5350,7 +5364,7 @@ class AuroDropdown extends AuroElement {
5350
5364
  tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
5351
5365
  role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
5352
5366
  aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
5353
- aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
5367
+ aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
5354
5368
  aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
5355
5369
  @focusin="${this.handleFocusin}"
5356
5370
  @blur="${this.handleFocusOut}">
@@ -6077,7 +6091,7 @@ class AuroHelpText extends i$3 {
6077
6091
  }
6078
6092
  }
6079
6093
 
6080
- var formkitVersion = '202602031735';
6094
+ var formkitVersion = '202602112105';
6081
6095
 
6082
6096
  var styleCss$2 = i$6`.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);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-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, 450);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, 450);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}`;
6083
6097
 
@@ -6414,6 +6428,15 @@ class AuroSelect extends AuroElement$1 {
6414
6428
  type: Object
6415
6429
  },
6416
6430
 
6431
+ /**
6432
+ * Specifies the current active/highlighted `auro-menuoption`.
6433
+ * @type {HTMLElement}
6434
+ * @private
6435
+ */
6436
+ optionActive: {
6437
+ type: Object
6438
+ },
6439
+
6417
6440
  /**
6418
6441
  * Define custom placeholder text.
6419
6442
  */
@@ -6596,10 +6619,17 @@ class AuroSelect extends AuroElement$1 {
6596
6619
  */
6597
6620
  configureDropdown() {
6598
6621
  this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
6622
+ this.dropdown.a11yRole = 'combobox';
6599
6623
 
6600
6624
  this.dropdown.addEventListener('auroDropdown-toggled', () => {
6601
6625
  this.isPopoverVisible = this.dropdown.isPopoverVisible;
6602
6626
 
6627
+ // Clear aria-activedescendant when dropdown closes
6628
+ if (!this.dropdown.isPopoverVisible) {
6629
+ this.dropdown.setActiveDescendant(null);
6630
+ this.optionActive = null;
6631
+ }
6632
+
6603
6633
  if (this.dropdown.isPopoverVisible) {
6604
6634
  this.updateMenuShapeSize();
6605
6635
  // wait til the bib gets fully rendered
@@ -6736,6 +6766,13 @@ class AuroSelect extends AuroElement$1 {
6736
6766
  */
6737
6767
  configureMenu() {
6738
6768
  this.menu = this.querySelector('auro-menu, [auro-menu]');
6769
+
6770
+ const labelElement = this.querySelector('span[slot="label"]');
6771
+
6772
+ if (labelElement) {
6773
+ this.menu.setAttribute('aria-label', labelElement.textContent);
6774
+ }
6775
+
6739
6776
  this.defaultMenuSize = this.menu.getAttribute('size');
6740
6777
  this.defaultMenuShape = this.menu.getAttribute('shape');
6741
6778
 
@@ -6755,8 +6792,15 @@ class AuroSelect extends AuroElement$1 {
6755
6792
  }
6756
6793
 
6757
6794
  this.options = this.menu.options;
6758
- this.menu.setAttribute('aria-hidden', 'true');
6759
6795
  this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
6796
+
6797
+ this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
6798
+ this.optionActive = evt.detail;
6799
+
6800
+ if (this.dropdown) {
6801
+ this.dropdown.setActiveDescendant(this.optionActive);
6802
+ }
6803
+ });
6760
6804
  this.menu.addEventListener('auroMenu-selectedOption', (event) => {
6761
6805
 
6762
6806
  // Update the displayed value
@@ -7221,7 +7265,6 @@ class AuroSelect extends AuroElement$1 {
7221
7265
  </div>
7222
7266
  <${this.dropdownTag}
7223
7267
  appearance="${this.onDark ? 'inverse' : this.appearance}"
7224
- a11yRole="select"
7225
7268
  ?autoPlacement="${this.autoPlacement}"
7226
7269
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
7227
7270
  ?matchWidth="${this.matchWidth}"
@@ -7236,13 +7279,13 @@ class AuroSelect extends AuroElement$1 {
7236
7279
  part="dropdown"
7237
7280
  shape="${this.shape}"
7238
7281
  size="${this.size}">
7239
- <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
7282
+ <div slot="trigger" aria-haspopup="listbox" id="triggerFocus" class="triggerContent">
7240
7283
  <div class="accents left">
7241
7284
  <slot name="typeIcon"></slot>
7242
7285
  </div>
7243
7286
  <div class="mainContent">
7244
7287
  <div class="${e$2(valueContainerClasses)}">
7245
- <label class="${e$2(this.commonLabelClasses)}">
7288
+ <label id="dropdownLabel" class="${e$2(this.commonLabelClasses)}">
7246
7289
  <slot name="label"></slot>
7247
7290
  ${this.required ? undefined : u$4`<slot name="optionalLabel"> (optional)</slot>`}
7248
7291
  </label>
@@ -7301,6 +7344,7 @@ class AuroSelect extends AuroElement$1 {
7301
7344
  </div>
7302
7345
  <${this.dropdownTag}
7303
7346
  appearance="${this.onDark ? 'inverse' : this.appearance}"
7347
+ a11yRole="combobox"
7304
7348
  ?autoPlacement="${this.autoPlacement}"
7305
7349
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
7306
7350
  ?matchWidth="${this.matchWidth}"
@@ -7314,13 +7358,13 @@ class AuroSelect extends AuroElement$1 {
7314
7358
  part="dropdown"
7315
7359
  shape="${this.shape}"
7316
7360
  size="${this.size}">
7317
- <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
7361
+ <div slot="trigger" aria-haspopup="listbox" id="triggerFocus" class="triggerContent">
7318
7362
  <div class="accents left">
7319
7363
  <slot name="typeIcon"></slot>
7320
7364
  </div>
7321
7365
  <div class="mainContent">
7322
7366
  <div class="${e$2(valueContainerClasses)}">
7323
- <label class="${e$2(this.commonLabelClasses)}">
7367
+ <label id="dropdownLabel" class="${e$2(this.commonLabelClasses)}">
7324
7368
  <slot name="label"></slot>
7325
7369
  ${this.required ? undefined : u$4`<slot name="optionalLabel"> (optional)</slot>`}
7326
7370
  </label>
@@ -7385,6 +7429,7 @@ class AuroSelect extends AuroElement$1 {
7385
7429
  </div>
7386
7430
  <${this.dropdownTag}
7387
7431
  appearance="${this.onDark ? 'inverse' : this.appearance}"
7432
+ a11yRole="combobox"
7388
7433
  ?autoPlacement="${this.autoPlacement}"
7389
7434
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
7390
7435
  ?matchWidth="${!this.flexMenuWidth}"
@@ -7398,13 +7443,13 @@ class AuroSelect extends AuroElement$1 {
7398
7443
  part="dropdown"
7399
7444
  shape="${this.shape}"
7400
7445
  size="${this.size}">
7401
- <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
7446
+ <div slot="trigger" aria-haspopup="listbox" id="triggerFocus" class="triggerContent">
7402
7447
  <div class="accents left">
7403
7448
  <slot name="typeIcon"></slot>
7404
7449
  </div>
7405
7450
  <div class="mainContent">
7406
7451
  <div class="${e$2(valueContainerClasses)}">
7407
- <label class="${e$2(this.commonLabelClasses)}">
7452
+ <label id="dropdownLabel" class="${e$2(this.commonLabelClasses)}">
7408
7453
  <slot name="label"></slot>
7409
7454
  ${this.required ? undefined : u$4`<slot name="optionalLabel"> (optional)</slot>`}
7410
7455
  </label>
package/components/select/dist/auro-select.d.ts CHANGED
@@ -192,6 +192,12 @@ export class AuroSelect extends AuroElement {
192
192
  * @type {HTMLElement|Array<HTMLElement>}
193
193
  */
194
194
  optionSelected: HTMLElement | Array<HTMLElement>;
195
+ /**
196
+ * Specifies the current active/highlighted `auro-menuoption`.
197
+ * @type {HTMLElement}
198
+ * @private
199
+ */
200
+ optionActive: HTMLElement;
195
201
  /**
196
202
  * Define custom placeholder text.
197
203
  */
@@ -369,6 +375,7 @@ export class AuroSelect extends AuroElement {
369
375
  */
370
376
  private configureDropdown;
371
377
  dropdown: any;
378
+ optionActive: any;
372
379
  bibtemplate: any;
373
380
  /**
374
381
  * Updates the displayed value in an Auro dropdown component based on optionSelected.
package/components/select/dist/index.js CHANGED
@@ -4357,7 +4357,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
4357
4357
  }
4358
4358
  };
4359
4359
 
4360
- var formkitVersion$1 = '202602031735';
4360
+ var formkitVersion$1 = '202602112105';
4361
4361
 
4362
4362
  class AuroElement extends LitElement {
4363
4363
  static get properties() {
@@ -4644,6 +4644,20 @@ class AuroDropdown extends AuroElement {
4644
4644
  }
4645
4645
  }
4646
4646
 
4647
+ /**
4648
+ * Sets the active descendant element for accessibility.
4649
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
4650
+ * This function is used in components that contain `auro-dropdown` to set the active descendant.
4651
+ * @private
4652
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
4653
+ * @returns {void}
4654
+ */
4655
+ setActiveDescendant(element) {
4656
+ if (this.trigger) {
4657
+ this.trigger.ariaActiveDescendantElement = element;
4658
+ }
4659
+ }
4660
+
4647
4661
  // function to define props used within the scope of this component
4648
4662
  static get properties() {
4649
4663
  return {
@@ -5287,7 +5301,7 @@ class AuroDropdown extends AuroElement {
5287
5301
  tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
5288
5302
  role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
5289
5303
  aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
5290
- aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
5304
+ aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
5291
5305
  aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
5292
5306
  @focusin="${this.handleFocusin}"
5293
5307
  @blur="${this.handleFocusOut}">
@@ -6014,7 +6028,7 @@ class AuroHelpText extends LitElement {
6014
6028
  }
6015
6029
  }
6016
6030
 
6017
- var formkitVersion = '202602031735';
6031
+ var formkitVersion = '202602112105';
6018
6032
 
6019
6033
  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);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-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, 450);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, 450);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}`;
6020
6034
 
@@ -6351,6 +6365,15 @@ class AuroSelect extends AuroElement$1 {
6351
6365
  type: Object
6352
6366
  },
6353
6367
 
6368
+ /**
6369
+ * Specifies the current active/highlighted `auro-menuoption`.
6370
+ * @type {HTMLElement}
6371
+ * @private
6372
+ */
6373
+ optionActive: {
6374
+ type: Object
6375
+ },
6376
+
6354
6377
  /**
6355
6378
  * Define custom placeholder text.
6356
6379
  */
@@ -6533,10 +6556,17 @@ class AuroSelect extends AuroElement$1 {
6533
6556
  */
6534
6557
  configureDropdown() {
6535
6558
  this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
6559
+ this.dropdown.a11yRole = 'combobox';
6536
6560
 
6537
6561
  this.dropdown.addEventListener('auroDropdown-toggled', () => {
6538
6562
  this.isPopoverVisible = this.dropdown.isPopoverVisible;
6539
6563
 
6564
+ // Clear aria-activedescendant when dropdown closes
6565
+ if (!this.dropdown.isPopoverVisible) {
6566
+ this.dropdown.setActiveDescendant(null);
6567
+ this.optionActive = null;
6568
+ }
6569
+
6540
6570
  if (this.dropdown.isPopoverVisible) {
6541
6571
  this.updateMenuShapeSize();
6542
6572
  // wait til the bib gets fully rendered
@@ -6673,6 +6703,13 @@ class AuroSelect extends AuroElement$1 {
6673
6703
  */
6674
6704
  configureMenu() {
6675
6705
  this.menu = this.querySelector('auro-menu, [auro-menu]');
6706
+
6707
+ const labelElement = this.querySelector('span[slot="label"]');
6708
+
6709
+ if (labelElement) {
6710
+ this.menu.setAttribute('aria-label', labelElement.textContent);
6711
+ }
6712
+
6676
6713
  this.defaultMenuSize = this.menu.getAttribute('size');
6677
6714
  this.defaultMenuShape = this.menu.getAttribute('shape');
6678
6715
 
@@ -6692,8 +6729,15 @@ class AuroSelect extends AuroElement$1 {
6692
6729
  }
6693
6730
 
6694
6731
  this.options = this.menu.options;
6695
- this.menu.setAttribute('aria-hidden', 'true');
6696
6732
  this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
6733
+
6734
+ this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
6735
+ this.optionActive = evt.detail;
6736
+
6737
+ if (this.dropdown) {
6738
+ this.dropdown.setActiveDescendant(this.optionActive);
6739
+ }
6740
+ });
6697
6741
  this.menu.addEventListener('auroMenu-selectedOption', (event) => {
6698
6742
 
6699
6743
  // Update the displayed value
@@ -7158,7 +7202,6 @@ class AuroSelect extends AuroElement$1 {
7158
7202
  </div>
7159
7203
  <${this.dropdownTag}
7160
7204
  appearance="${this.onDark ? 'inverse' : this.appearance}"
7161
- a11yRole="select"
7162
7205
  ?autoPlacement="${this.autoPlacement}"
7163
7206
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
7164
7207
  ?matchWidth="${this.matchWidth}"
@@ -7173,13 +7216,13 @@ class AuroSelect extends AuroElement$1 {
7173
7216
  part="dropdown"
7174
7217
  shape="${this.shape}"
7175
7218
  size="${this.size}">
7176
- <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
7219
+ <div slot="trigger" aria-haspopup="listbox" id="triggerFocus" class="triggerContent">
7177
7220
  <div class="accents left">
7178
7221
  <slot name="typeIcon"></slot>
7179
7222
  </div>
7180
7223
  <div class="mainContent">
7181
7224
  <div class="${classMap(valueContainerClasses)}">
7182
- <label class="${classMap(this.commonLabelClasses)}">
7225
+ <label id="dropdownLabel" class="${classMap(this.commonLabelClasses)}">
7183
7226
  <slot name="label"></slot>
7184
7227
  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
7185
7228
  </label>
@@ -7238,6 +7281,7 @@ class AuroSelect extends AuroElement$1 {
7238
7281
  </div>
7239
7282
  <${this.dropdownTag}
7240
7283
  appearance="${this.onDark ? 'inverse' : this.appearance}"
7284
+ a11yRole="combobox"
7241
7285
  ?autoPlacement="${this.autoPlacement}"
7242
7286
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
7243
7287
  ?matchWidth="${this.matchWidth}"
@@ -7251,13 +7295,13 @@ class AuroSelect extends AuroElement$1 {
7251
7295
  part="dropdown"
7252
7296
  shape="${this.shape}"
7253
7297
  size="${this.size}">
7254
- <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
7298
+ <div slot="trigger" aria-haspopup="listbox" id="triggerFocus" class="triggerContent">
7255
7299
  <div class="accents left">
7256
7300
  <slot name="typeIcon"></slot>
7257
7301
  </div>
7258
7302
  <div class="mainContent">
7259
7303
  <div class="${classMap(valueContainerClasses)}">
7260
- <label class="${classMap(this.commonLabelClasses)}">
7304
+ <label id="dropdownLabel" class="${classMap(this.commonLabelClasses)}">
7261
7305
  <slot name="label"></slot>
7262
7306
  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
7263
7307
  </label>
@@ -7322,6 +7366,7 @@ class AuroSelect extends AuroElement$1 {
7322
7366
  </div>
7323
7367
  <${this.dropdownTag}
7324
7368
  appearance="${this.onDark ? 'inverse' : this.appearance}"
7369
+ a11yRole="combobox"
7325
7370
  ?autoPlacement="${this.autoPlacement}"
7326
7371
  ?error="${this.validity !== undefined && this.validity !== 'valid'}"
7327
7372
  ?matchWidth="${!this.flexMenuWidth}"
@@ -7335,13 +7380,13 @@ class AuroSelect extends AuroElement$1 {
7335
7380
  part="dropdown"
7336
7381
  shape="${this.shape}"
7337
7382
  size="${this.size}">
7338
- <div slot="trigger" aria-haspopup="true" id="triggerFocus" class="triggerContent">
7383
+ <div slot="trigger" aria-haspopup="listbox" id="triggerFocus" class="triggerContent">
7339
7384
  <div class="accents left">
7340
7385
  <slot name="typeIcon"></slot>
7341
7386
  </div>
7342
7387
  <div class="mainContent">
7343
7388
  <div class="${classMap(valueContainerClasses)}">
7344
- <label class="${classMap(this.commonLabelClasses)}">
7389
+ <label id="dropdownLabel" class="${classMap(this.commonLabelClasses)}">
7345
7390
  <slot name="label"></slot>
7346
7391
  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
7347
7392
  </label>