@aurodesignsystem-dev/auro-formkit 0.0.0-pr802.0 → 0.0.0-pr806.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/components/bibtemplate/dist/index.js +1 -1
  2. package/components/bibtemplate/dist/registered.js +1 -1
  3. package/components/checkbox/demo/api.md +2 -1
  4. package/components/checkbox/demo/api.min.js +8 -1
  5. package/components/checkbox/demo/index.min.js +8 -1
  6. package/components/checkbox/dist/index.js +8 -1
  7. package/components/checkbox/dist/registered.js +8 -1
  8. package/components/combobox/demo/api.md +2 -0
  9. package/components/combobox/demo/api.min.js +87 -73
  10. package/components/combobox/demo/index.min.js +87 -73
  11. package/components/combobox/dist/auro-combobox.d.ts +2 -4
  12. package/components/combobox/dist/index.js +86 -72
  13. package/components/combobox/dist/registered.js +86 -72
  14. package/components/counter/demo/api.md +2 -0
  15. package/components/counter/demo/api.min.js +31 -61
  16. package/components/counter/demo/index.min.js +31 -61
  17. package/components/counter/dist/auro-counter-group.d.ts +10 -0
  18. package/components/counter/dist/index.js +31 -61
  19. package/components/counter/dist/registered.js +31 -61
  20. package/components/datepicker/README.md +1 -1
  21. package/components/datepicker/demo/api.md +41 -19
  22. package/components/datepicker/demo/api.min.js +341 -188
  23. package/components/datepicker/demo/index.md +4 -4
  24. package/components/datepicker/demo/index.min.js +341 -188
  25. package/components/datepicker/demo/readme.md +1 -1
  26. package/components/datepicker/dist/auro-datepicker.d.ts +73 -12
  27. package/components/datepicker/dist/index.js +341 -188
  28. package/components/datepicker/dist/registered.js +341 -188
  29. package/components/datepicker/dist/styles/classic/style-css.d.ts +2 -0
  30. package/components/dropdown/demo/api.md +1 -1
  31. package/components/dropdown/demo/api.min.js +10 -60
  32. package/components/dropdown/demo/index.min.js +10 -60
  33. package/components/dropdown/dist/auro-dropdown.d.ts +0 -7
  34. package/components/dropdown/dist/index.js +10 -60
  35. package/components/dropdown/dist/registered.js +10 -60
  36. package/components/input/demo/api.min.js +75 -9
  37. package/components/input/demo/index.min.js +75 -9
  38. package/components/input/dist/auro-input.d.ts +24 -0
  39. package/components/input/dist/index.js +75 -9
  40. package/components/input/dist/registered.js +75 -9
  41. package/components/menu/demo/api.min.js +1 -1
  42. package/components/menu/demo/index.min.js +1 -1
  43. package/components/menu/dist/index.js +1 -1
  44. package/components/menu/dist/registered.js +1 -1
  45. package/components/radio/demo/api.min.js +1 -1
  46. package/components/radio/demo/index.min.js +1 -1
  47. package/components/radio/dist/index.js +1 -1
  48. package/components/radio/dist/registered.js +1 -1
  49. package/components/select/demo/api.md +46 -64
  50. package/components/select/demo/api.min.js +61 -76
  51. package/components/select/demo/index.md +1057 -137
  52. package/components/select/demo/index.min.js +61 -76
  53. package/components/select/dist/auro-select.d.ts +22 -5
  54. package/components/select/dist/index.js +60 -75
  55. package/components/select/dist/registered.js +60 -75
  56. package/package.json +2 -2
  57. /package/components/datepicker/dist/styles/{default → classic}/color-css.d.ts +0 -0
@@ -4599,6 +4599,7 @@ let AuroElement$3 = class AuroElement extends i$2 {
4599
4599
  // See LICENSE in the project root for license information.
4600
4600
 
4601
4601
 
4602
+
4602
4603
  /*
4603
4604
  * @slot - Default slot for the popover content.
4604
4605
  * @slot helpText - Defines the content of the helpText.
@@ -5102,6 +5103,13 @@ class AuroDropdown extends AuroElement$3 {
5102
5103
 
5103
5104
  // Add the tag name as an attribute if it is different than the component name
5104
5105
  this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
5106
+
5107
+ this.trigger.addEventListener('click', () => {
5108
+ this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
5109
+ bubbles: true,
5110
+ composed: true
5111
+ }));
5112
+ });
5105
5113
  }
5106
5114
 
5107
5115
  /**
@@ -5174,64 +5182,6 @@ class AuroDropdown extends AuroElement$3 {
5174
5182
  this.hasFocus = false;
5175
5183
  }
5176
5184
 
5177
- /**
5178
- * Determines if the element or any children are focusable.
5179
- * @private
5180
- * @param {HTMLElement} element - Element to check.
5181
- * @returns {Boolean} - True if the element or any children are focusable.
5182
- */
5183
- containsFocusableElement(element) {
5184
- this.showTriggerBorders = true;
5185
-
5186
- const nodes = [
5187
- element,
5188
- ...element.children
5189
- ];
5190
-
5191
- const focusableElements = [
5192
- 'a',
5193
- 'auro-hyperlink',
5194
- 'button',
5195
- 'auro-button',
5196
- 'input',
5197
- 'auro-input',
5198
- ];
5199
-
5200
- const focusableElementsThatNeedBorders = ['auro-input'];
5201
-
5202
- const result = nodes.some((node) => {
5203
- const tagName = node.tagName.toLowerCase();
5204
-
5205
- if (node.tabIndex > -1) {
5206
- return true;
5207
- }
5208
-
5209
- if (focusableElements.includes(tagName)) {
5210
- if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
5211
- return true;
5212
- }
5213
- if (!node.hasAttribute('disabled')) {
5214
- return true;
5215
- }
5216
- }
5217
-
5218
- if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
5219
- return true;
5220
- }
5221
-
5222
- return false;
5223
- });
5224
-
5225
- if (result) {
5226
- this.showTriggerBorders = !nodes.some((node) => {
5227
- const tagName = node.tagName.toLowerCase();
5228
- return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
5229
- });
5230
- }
5231
-
5232
- return result;
5233
- }
5234
-
5235
5185
  /**
5236
5186
  * Creates and dispatches a duplicate focus event on the trigger element.
5237
5187
  * @private
@@ -5343,7 +5293,7 @@ class AuroDropdown extends AuroElement$3 {
5343
5293
  if (triggerContentNodes) {
5344
5294
 
5345
5295
  // See if any of them are focusable elements
5346
- this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
5296
+ this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
5347
5297
 
5348
5298
  // If any of them are focusable elements
5349
5299
  if (this.triggerContentFocusable) {
@@ -5415,7 +5365,7 @@ class AuroDropdown extends AuroElement$3 {
5415
5365
  <div
5416
5366
  id="trigger"
5417
5367
  class="${e(this.commonWrapperClasses)}" part="wrapper"
5418
- tabindex="${this.tabIndex}"
5368
+ tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
5419
5369
  role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
5420
5370
  aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
5421
5371
  aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
@@ -7388,7 +7338,7 @@ class AuroBibtemplate extends i$2 {
7388
7338
  /**
7389
7339
  * @private
7390
7340
  */
7391
- this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
7341
+ this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
7392
7342
  }
7393
7343
 
7394
7344
  static get styles() {
@@ -7715,7 +7665,7 @@ class AuroHelpText extends i$2 {
7715
7665
 
7716
7666
  var helpTextVersion = '1.0.0';
7717
7667
 
7718
- var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}[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)}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}.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,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{font-size:var(--ds-text-body-size-xs);line-height:20px}: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;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-size:12px;font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-size:16px;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-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]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7668
+ var styleCss$3 = i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5)}.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.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.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, 1)}.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.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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)}:host{display:inline-block}: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,:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) [auro-dropdown] label.withValue{line-height:20px}:host([layout*=emphasized]) [auro-dropdown] label.withValue{line-height:20px}: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;font-weight:450;letter-spacing:0;line-height:24px;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) label.withValue{font-weight:450;letter-spacing:0;line-height:16px}:host([layout*=classic]) .value{height:auto;font-weight:450;letter-spacing:0;line-height:24px}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-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]{--ds-auro-select-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
7719
7669
 
7720
7670
  // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
7721
7671
  // See LICENSE in the project root for license information.
@@ -8137,11 +8087,31 @@ class AuroSelect extends AuroElement$4 {
8137
8087
  get commonLabelClasses() {
8138
8088
  return {
8139
8089
  'is-disabled': this.disabled,
8140
- 'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
8141
- 'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
8090
+ 'withValue': this.hasValue,
8091
+ 'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
8092
+ [this.labelFontClass]: true
8142
8093
  };
8143
8094
  }
8144
8095
 
8096
+ /**
8097
+ * Returns the font class for the label based on state.
8098
+ * @returns {string} - Returns the font class for the label.
8099
+ * @private
8100
+ */
8101
+ get labelFontClass() {
8102
+ if (this.hasValue) return 'body-xs';
8103
+ return 'body-default';
8104
+ }
8105
+
8106
+ /**
8107
+ * Whether or not the component has a value.
8108
+ * @returns {boolean} - Returns true if the component has a value or placeholder.
8109
+ * @private
8110
+ */
8111
+ get hasValue() {
8112
+ return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
8113
+ }
8114
+
8145
8115
  /**
8146
8116
  * Returns classmap configuration for wrapper elements in each layout.
8147
8117
  * @private
@@ -8460,6 +8430,26 @@ class AuroSelect extends AuroElement$4 {
8460
8430
  }
8461
8431
  }
8462
8432
 
8433
+ /**
8434
+ * Hides the dropdown bib if its open.
8435
+ * @returns {void}
8436
+ */
8437
+ hideBib() {
8438
+ if (this.dropdown && this.dropdown.isPopoverVisible) {
8439
+ this.dropdown.hide();
8440
+ }
8441
+ }
8442
+
8443
+ /**
8444
+ * Shows the dropdown bib if there are options to show.
8445
+ * @returns {void}
8446
+ */
8447
+ showBib() {
8448
+ if (this.dropdown && !this.dropdown.isPopoverVisible) {
8449
+ this.dropdown.show();
8450
+ }
8451
+ }
8452
+
8463
8453
  /**
8464
8454
  * Function to support @focusin event.
8465
8455
  * @private
@@ -8625,16 +8615,6 @@ class AuroSelect extends AuroElement$4 {
8625
8615
  this.validation.reset(this);
8626
8616
  }
8627
8617
 
8628
- /**
8629
- * Hide dropdownbib.
8630
- * @private
8631
- */
8632
- hideBib() {
8633
- if (this.dropdown) {
8634
- this.dropdown.hide();
8635
- }
8636
- }
8637
-
8638
8618
  /**
8639
8619
  * Validates value.
8640
8620
  * @param {boolean} [force=false] - Whether to force validation.
@@ -8954,6 +8934,11 @@ class AuroSelect extends AuroElement$4 {
8954
8934
  'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
8955
8935
  };
8956
8936
 
8937
+ const valueClasses = {
8938
+ 'value': true,
8939
+ 'body-default': true
8940
+ };
8941
+
8957
8942
  return u`
8958
8943
  <div
8959
8944
  class="${e(this.commonWrapperClasses)}"
@@ -8986,7 +8971,7 @@ class AuroSelect extends AuroElement$4 {
8986
8971
  <slot name="label"></slot>
8987
8972
  ${this.required ? undefined : u`<slot name="optionalLabel"> (optional)</slot>`}
8988
8973
  </label>
8989
- <div class="value" id="value"></div>
8974
+ <div class="${e(valueClasses)}" id="value"></div>
8990
8975
  <div id="placeholder" class="${e(placeholderClass)}">
8991
8976
  ${this.placeholder}
8992
8977
  </div>
@@ -10412,7 +10397,7 @@ class AuroMenuOption extends AuroElement$4 {
10412
10397
 
10413
10398
  svg.setAttribute('slot', 'svg');
10414
10399
 
10415
- return u`<${this.iconTag} customColor customSvg slot="icon">${svg}</${this.iconTag}>`;
10400
+ return u`<${this.iconTag} customColor customSvg>${svg}</${this.iconTag}>`;
10416
10401
  }
10417
10402
 
10418
10403
  /**