@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.
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +52 -6
- package/components/combobox/demo/index.min.js +52 -6
- package/components/combobox/dist/auro-combobox.d.ts +1 -1
- package/components/combobox/dist/index.js +52 -6
- package/components/combobox/dist/registered.js +52 -6
- package/components/counter/demo/api.min.js +17 -3
- package/components/counter/demo/index.min.js +17 -3
- package/components/counter/dist/index.js +17 -3
- package/components/counter/dist/registered.js +17 -3
- package/components/datepicker/demo/api.min.js +32 -4
- package/components/datepicker/demo/index.min.js +32 -4
- package/components/datepicker/dist/index.js +32 -4
- package/components/datepicker/dist/registered.js +32 -4
- package/components/dropdown/demo/api.min.js +16 -2
- package/components/dropdown/demo/index.min.js +16 -2
- package/components/dropdown/dist/auro-dropdown.d.ts +9 -0
- package/components/dropdown/dist/index.js +16 -2
- package/components/dropdown/dist/registered.js +16 -2
- package/components/input/demo/api.min.js +15 -1
- package/components/input/demo/index.min.js +15 -1
- package/components/input/dist/base-input.d.ts +9 -0
- package/components/input/dist/index.js +15 -1
- package/components/input/dist/registered.js +15 -1
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.min.js +56 -11
- package/components/select/demo/index.min.js +56 -11
- package/components/select/dist/auro-select.d.ts +7 -0
- package/components/select/dist/index.js +56 -11
- package/components/select/dist/registered.js +56 -11
- package/custom-elements.json +83 -1
- package/package.json +9 -3
|
@@ -4420,7 +4420,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
4420
4420
|
}
|
|
4421
4421
|
};
|
|
4422
4422
|
|
|
4423
|
-
var formkitVersion$1 = '
|
|
4423
|
+
var formkitVersion$1 = '202602050140';
|
|
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 = '
|
|
6094
|
+
var formkitVersion = '202602050140';
|
|
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="
|
|
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="
|
|
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="
|
|
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>
|
|
@@ -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.
|
|
@@ -4357,7 +4357,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4357
4357
|
}
|
|
4358
4358
|
};
|
|
4359
4359
|
|
|
4360
|
-
var formkitVersion$1 = '
|
|
4360
|
+
var formkitVersion$1 = '202602050140';
|
|
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 = '
|
|
6031
|
+
var formkitVersion = '202602050140';
|
|
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="
|
|
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="
|
|
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="
|
|
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>
|
|
@@ -4357,7 +4357,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4357
4357
|
}
|
|
4358
4358
|
};
|
|
4359
4359
|
|
|
4360
|
-
var formkitVersion$1 = '
|
|
4360
|
+
var formkitVersion$1 = '202602050140';
|
|
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 = '
|
|
6031
|
+
var formkitVersion = '202602050140';
|
|
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="
|
|
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="
|
|
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="
|
|
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>
|