@aurodesignsystem-dev/auro-formkit 0.0.0-pr1318.3 → 0.0.0-pr1318.5

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 (38) 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 +52 -6
  6. package/components/combobox/demo/index.min.js +52 -6
  7. package/components/combobox/dist/auro-combobox.d.ts +1 -1
  8. package/components/combobox/dist/index.js +52 -6
  9. package/components/combobox/dist/registered.js +52 -6
  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 +32 -4
  15. package/components/datepicker/demo/index.min.js +32 -4
  16. package/components/datepicker/dist/index.js +32 -4
  17. package/components/datepicker/dist/registered.js +32 -4
  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.min.js +15 -1
  24. package/components/input/demo/index.min.js +15 -1
  25. package/components/input/dist/base-input.d.ts +9 -0
  26. package/components/input/dist/index.js +15 -1
  27. package/components/input/dist/registered.js +15 -1
  28. package/components/radio/demo/api.min.js +1 -1
  29. package/components/radio/demo/index.min.js +1 -1
  30. package/components/radio/dist/index.js +1 -1
  31. package/components/radio/dist/registered.js +1 -1
  32. package/components/select/demo/api.min.js +56 -11
  33. package/components/select/demo/index.min.js +56 -11
  34. package/components/select/dist/auro-select.d.ts +7 -0
  35. package/components/select/dist/index.js +56 -11
  36. package/components/select/dist/registered.js +56 -11
  37. package/custom-elements.json +83 -1
  38. package/package.json +9 -3
@@ -3345,7 +3345,7 @@ class AuroHelpText extends i {
3345
3345
  }
3346
3346
  }
3347
3347
 
3348
- var formkitVersion = '202602032229';
3348
+ var formkitVersion = '202602050140';
3349
3349
 
3350
3350
  class AuroElement extends i {
3351
3351
  static get properties() {
@@ -3632,6 +3632,20 @@ class AuroDropdown extends AuroElement {
3632
3632
  }
3633
3633
  }
3634
3634
 
3635
+ /**
3636
+ * Sets the active descendant element for accessibility.
3637
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
3638
+ * This function is used in components that contain `auro-dropdown` to set the active descendant.
3639
+ * @private
3640
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
3641
+ * @returns {void}
3642
+ */
3643
+ setActiveDescendant(element) {
3644
+ if (this.trigger) {
3645
+ this.trigger.ariaActiveDescendantElement = element;
3646
+ }
3647
+ }
3648
+
3635
3649
  // function to define props used within the scope of this component
3636
3650
  static get properties() {
3637
3651
  return {
@@ -4275,7 +4289,7 @@ class AuroDropdown extends AuroElement {
4275
4289
  tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
4276
4290
  role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
4277
4291
  aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
4278
- aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
4292
+ aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
4279
4293
  aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
4280
4294
  @focusin="${this.handleFocusin}"
4281
4295
  @blur="${this.handleFocusOut}">
@@ -341,6 +341,15 @@ export class AuroDropdown extends AuroElement {
341
341
  * If not, trigger element will get focus.
342
342
  */
343
343
  focus(): void;
344
+ /**
345
+ * Sets the active descendant element for accessibility.
346
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
347
+ * This function is used in components that contain `auro-dropdown` to set the active descendant.
348
+ * @private
349
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
350
+ * @returns {void}
351
+ */
352
+ private setActiveDescendant;
344
353
  /**
345
354
  * Accessor for reusing the focusable entity query string.
346
355
  * @private
@@ -3254,7 +3254,7 @@ class AuroHelpText extends LitElement {
3254
3254
  }
3255
3255
  }
3256
3256
 
3257
- var formkitVersion = '202602032229';
3257
+ var formkitVersion = '202602050140';
3258
3258
 
3259
3259
  class AuroElement extends LitElement {
3260
3260
  static get properties() {
@@ -3541,6 +3541,20 @@ class AuroDropdown extends AuroElement {
3541
3541
  }
3542
3542
  }
3543
3543
 
3544
+ /**
3545
+ * Sets the active descendant element for accessibility.
3546
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
3547
+ * This function is used in components that contain `auro-dropdown` to set the active descendant.
3548
+ * @private
3549
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
3550
+ * @returns {void}
3551
+ */
3552
+ setActiveDescendant(element) {
3553
+ if (this.trigger) {
3554
+ this.trigger.ariaActiveDescendantElement = element;
3555
+ }
3556
+ }
3557
+
3544
3558
  // function to define props used within the scope of this component
3545
3559
  static get properties() {
3546
3560
  return {
@@ -4184,7 +4198,7 @@ class AuroDropdown extends AuroElement {
4184
4198
  tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
4185
4199
  role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
4186
4200
  aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
4187
- aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
4201
+ aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
4188
4202
  aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
4189
4203
  @focusin="${this.handleFocusin}"
4190
4204
  @blur="${this.handleFocusOut}">
@@ -3254,7 +3254,7 @@ class AuroHelpText extends LitElement {
3254
3254
  }
3255
3255
  }
3256
3256
 
3257
- var formkitVersion = '202602032229';
3257
+ var formkitVersion = '202602050140';
3258
3258
 
3259
3259
  class AuroElement extends LitElement {
3260
3260
  static get properties() {
@@ -3541,6 +3541,20 @@ class AuroDropdown extends AuroElement {
3541
3541
  }
3542
3542
  }
3543
3543
 
3544
+ /**
3545
+ * Sets the active descendant element for accessibility.
3546
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
3547
+ * This function is used in components that contain `auro-dropdown` to set the active descendant.
3548
+ * @private
3549
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
3550
+ * @returns {void}
3551
+ */
3552
+ setActiveDescendant(element) {
3553
+ if (this.trigger) {
3554
+ this.trigger.ariaActiveDescendantElement = element;
3555
+ }
3556
+ }
3557
+
3544
3558
  // function to define props used within the scope of this component
3545
3559
  static get properties() {
3546
3560
  return {
@@ -4184,7 +4198,7 @@ class AuroDropdown extends AuroElement {
4184
4198
  tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
4185
4199
  role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
4186
4200
  aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
4187
- aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
4201
+ aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : `${this.dropdownId}-floater-bib`)}"
4188
4202
  aria-labelledby="${ifDefined(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
4189
4203
  @focusin="${this.handleFocusin}"
4190
4204
  @blur="${this.handleFocusOut}">
@@ -6076,6 +6076,20 @@ class BaseInput extends AuroElement {
6076
6076
  return activeEl;
6077
6077
  }
6078
6078
 
6079
+ /**
6080
+ * Sets the active descendant element for accessibility.
6081
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
6082
+ * This function is used in components that contain `auro-input` to set the active descendant.
6083
+ * @private
6084
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
6085
+ * @returns {void}
6086
+ */
6087
+ setActiveDescendant(element) {
6088
+ if (this.inputElement) {
6089
+ this.inputElement.ariaActiveDescendantElement = element;
6090
+ }
6091
+ }
6092
+
6079
6093
  /**
6080
6094
  * Validates value.
6081
6095
  * @param {boolean} [force=false] - Whether to force validation.
@@ -6697,7 +6711,7 @@ class AuroHelpText extends i$3 {
6697
6711
  }
6698
6712
  }
6699
6713
 
6700
- var formkitVersion = '202602032229';
6714
+ var formkitVersion = '202602050140';
6701
6715
 
6702
6716
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
6703
6717
  // See LICENSE in the project root for license information.
@@ -6001,6 +6001,20 @@ class BaseInput extends AuroElement {
6001
6001
  return activeEl;
6002
6002
  }
6003
6003
 
6004
+ /**
6005
+ * Sets the active descendant element for accessibility.
6006
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
6007
+ * This function is used in components that contain `auro-input` to set the active descendant.
6008
+ * @private
6009
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
6010
+ * @returns {void}
6011
+ */
6012
+ setActiveDescendant(element) {
6013
+ if (this.inputElement) {
6014
+ this.inputElement.ariaActiveDescendantElement = element;
6015
+ }
6016
+ }
6017
+
6004
6018
  /**
6005
6019
  * Validates value.
6006
6020
  * @param {boolean} [force=false] - Whether to force validation.
@@ -6622,7 +6636,7 @@ class AuroHelpText extends i$3 {
6622
6636
  }
6623
6637
  }
6624
6638
 
6625
- var formkitVersion = '202602032229';
6639
+ var formkitVersion = '202602050140';
6626
6640
 
6627
6641
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
6628
6642
  // See LICENSE in the project root for license information.
@@ -515,6 +515,15 @@ export default class BaseInput extends AuroElement {
515
515
  * @returns {Object}
516
516
  */
517
517
  private getActiveElement;
518
+ /**
519
+ * Sets the active descendant element for accessibility.
520
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
521
+ * This function is used in components that contain `auro-input` to set the active descendant.
522
+ * @private
523
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
524
+ * @returns {void}
525
+ */
526
+ private setActiveDescendant;
518
527
  /**
519
528
  * Validates value.
520
529
  * @param {boolean} [force=false] - Whether to force validation.
@@ -5942,6 +5942,20 @@ class BaseInput extends AuroElement {
5942
5942
  return activeEl;
5943
5943
  }
5944
5944
 
5945
+ /**
5946
+ * Sets the active descendant element for accessibility.
5947
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
5948
+ * This function is used in components that contain `auro-input` to set the active descendant.
5949
+ * @private
5950
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
5951
+ * @returns {void}
5952
+ */
5953
+ setActiveDescendant(element) {
5954
+ if (this.inputElement) {
5955
+ this.inputElement.ariaActiveDescendantElement = element;
5956
+ }
5957
+ }
5958
+
5945
5959
  /**
5946
5960
  * Validates value.
5947
5961
  * @param {boolean} [force=false] - Whether to force validation.
@@ -6563,7 +6577,7 @@ class AuroHelpText extends LitElement {
6563
6577
  }
6564
6578
  }
6565
6579
 
6566
- var formkitVersion = '202602032229';
6580
+ var formkitVersion = '202602050140';
6567
6581
 
6568
6582
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
6569
6583
  // See LICENSE in the project root for license information.
@@ -5942,6 +5942,20 @@ class BaseInput extends AuroElement {
5942
5942
  return activeEl;
5943
5943
  }
5944
5944
 
5945
+ /**
5946
+ * Sets the active descendant element for accessibility.
5947
+ * Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
5948
+ * This function is used in components that contain `auro-input` to set the active descendant.
5949
+ * @private
5950
+ * @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
5951
+ * @returns {void}
5952
+ */
5953
+ setActiveDescendant(element) {
5954
+ if (this.inputElement) {
5955
+ this.inputElement.ariaActiveDescendantElement = element;
5956
+ }
5957
+ }
5958
+
5945
5959
  /**
5946
5960
  * Validates value.
5947
5961
  * @param {boolean} [force=false] - Whether to force validation.
@@ -6563,7 +6577,7 @@ class AuroHelpText extends LitElement {
6563
6577
  }
6564
6578
  }
6565
6579
 
6566
- var formkitVersion = '202602032229';
6580
+ var formkitVersion = '202602050140';
6567
6581
 
6568
6582
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
6569
6583
  // See LICENSE in the project root for license information.
@@ -1645,7 +1645,7 @@ class AuroHelpText extends i$2 {
1645
1645
  }
1646
1646
  }
1647
1647
 
1648
- var formkitVersion = '202602032229';
1648
+ var formkitVersion = '202602050140';
1649
1649
 
1650
1650
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1651
1651
  // See LICENSE in the project root for license information.
@@ -1620,7 +1620,7 @@ class AuroHelpText extends i$2 {
1620
1620
  }
1621
1621
  }
1622
1622
 
1623
- var formkitVersion = '202602032229';
1623
+ var formkitVersion = '202602050140';
1624
1624
 
1625
1625
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1626
1626
  // See LICENSE in the project root for license information.
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
1573
1573
  }
1574
1574
  }
1575
1575
 
1576
- var formkitVersion = '202602032229';
1576
+ var formkitVersion = '202602050140';
1577
1577
 
1578
1578
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1579
1579
  // See LICENSE in the project root for license information.
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
1573
1573
  }
1574
1574
  }
1575
1575
 
1576
- var formkitVersion = '202602032229';
1576
+ var formkitVersion = '202602050140';
1577
1577
 
1578
1578
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1579
1579
  // See LICENSE in the project root for license information.
@@ -4481,7 +4481,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
4481
4481
  }
4482
4482
  };
4483
4483
 
4484
- var formkitVersion$1 = '202602032229';
4484
+ var formkitVersion$1 = '202602050140';
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 = '202602032229';
6155
+ var formkitVersion = '202602050140';
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>