@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
@@ -4461,6 +4461,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
4461
4461
  // See LICENSE in the project root for license information.
4462
4462
 
4463
4463
 
4464
+
4464
4465
  /*
4465
4466
  * @slot - Default slot for the popover content.
4466
4467
  * @slot helpText - Defines the content of the helpText.
@@ -4964,6 +4965,13 @@ class AuroDropdown extends AuroElement$2 {
4964
4965
 
4965
4966
  // Add the tag name as an attribute if it is different than the component name
4966
4967
  this.runtimeUtils.handleComponentTagRename(this, 'auro-dropdown');
4968
+
4969
+ this.trigger.addEventListener('click', () => {
4970
+ this.dispatchEvent(new CustomEvent('auroDropdown-triggerClick', {
4971
+ bubbles: true,
4972
+ composed: true
4973
+ }));
4974
+ });
4967
4975
  }
4968
4976
 
4969
4977
  /**
@@ -5036,64 +5044,6 @@ class AuroDropdown extends AuroElement$2 {
5036
5044
  this.hasFocus = false;
5037
5045
  }
5038
5046
 
5039
- /**
5040
- * Determines if the element or any children are focusable.
5041
- * @private
5042
- * @param {HTMLElement} element - Element to check.
5043
- * @returns {Boolean} - True if the element or any children are focusable.
5044
- */
5045
- containsFocusableElement(element) {
5046
- this.showTriggerBorders = true;
5047
-
5048
- const nodes = [
5049
- element,
5050
- ...element.children
5051
- ];
5052
-
5053
- const focusableElements = [
5054
- 'a',
5055
- 'auro-hyperlink',
5056
- 'button',
5057
- 'auro-button',
5058
- 'input',
5059
- 'auro-input',
5060
- ];
5061
-
5062
- const focusableElementsThatNeedBorders = ['auro-input'];
5063
-
5064
- const result = nodes.some((node) => {
5065
- const tagName = node.tagName.toLowerCase();
5066
-
5067
- if (node.tabIndex > -1) {
5068
- return true;
5069
- }
5070
-
5071
- if (focusableElements.includes(tagName)) {
5072
- if ((tagName === 'a' || tagName === 'auro-hyperlink' || node.hasAttribute('auro-hyperlink')) && node.hasAttribute('href')) {
5073
- return true;
5074
- }
5075
- if (!node.hasAttribute('disabled')) {
5076
- return true;
5077
- }
5078
- }
5079
-
5080
- if (focusableElements.some((focusableElement) => focusableElement.startsWith('auro-') && (focusableElement === tagName || node.hasAttribute(focusableElement)))) {
5081
- return true;
5082
- }
5083
-
5084
- return false;
5085
- });
5086
-
5087
- if (result) {
5088
- this.showTriggerBorders = !nodes.some((node) => {
5089
- const tagName = node.tagName.toLowerCase();
5090
- return focusableElements.includes(tagName) && !focusableElementsThatNeedBorders.includes(tagName);
5091
- });
5092
- }
5093
-
5094
- return result;
5095
- }
5096
-
5097
5047
  /**
5098
5048
  * Creates and dispatches a duplicate focus event on the trigger element.
5099
5049
  * @private
@@ -5205,7 +5155,7 @@ class AuroDropdown extends AuroElement$2 {
5205
5155
  if (triggerContentNodes) {
5206
5156
 
5207
5157
  // See if any of them are focusable elements
5208
- this.triggerContentFocusable = triggerContentNodes.some((node) => this.containsFocusableElement(node));
5158
+ this.triggerContentFocusable = triggerContentNodes.some((node) => getFocusableElements(node).length > 0);
5209
5159
 
5210
5160
  // If any of them are focusable elements
5211
5161
  if (this.triggerContentFocusable) {
@@ -5277,7 +5227,7 @@ class AuroDropdown extends AuroElement$2 {
5277
5227
  <div
5278
5228
  id="trigger"
5279
5229
  class="${classMap(this.commonWrapperClasses)}" part="wrapper"
5280
- tabindex="${this.tabIndex}"
5230
+ tabindex="${ifDefined(this.triggerContentFocusable ? undefined : this.tabIndex)}"
5281
5231
  role="${ifDefined(this.triggerContentFocusable ? undefined : this.a11yRole)}"
5282
5232
  aria-expanded="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
5283
5233
  aria-controls="${ifDefined(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
@@ -7250,7 +7200,7 @@ class AuroBibtemplate extends LitElement {
7250
7200
  /**
7251
7201
  * @private
7252
7202
  */
7253
- this.buttonTag = versioning.generateTag('auro-formkit-input-button', buttonVersion, AuroButton);
7203
+ this.buttonTag = versioning.generateTag('auro-formkit-bibtemplate-button', buttonVersion, AuroButton);
7254
7204
  }
7255
7205
 
7256
7206
  static get styles() {
@@ -7577,7 +7527,7 @@ class AuroHelpText extends LitElement {
7577
7527
 
7578
7528
  var helpTextVersion = '1.0.0';
7579
7529
 
7580
- 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}[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}`;
7530
+ 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.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}`;
7581
7531
 
7582
7532
  // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
7583
7533
  // See LICENSE in the project root for license information.
@@ -7999,11 +7949,31 @@ class AuroSelect extends AuroElement$3 {
7999
7949
  get commonLabelClasses() {
8000
7950
  return {
8001
7951
  'is-disabled': this.disabled,
8002
- 'withValue': this.placeholder || (this.value && this.value.length > 0), // eslint-disable-line no-extra-parens
8003
- 'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
7952
+ 'withValue': this.hasValue,
7953
+ 'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
7954
+ [this.labelFontClass]: true
8004
7955
  };
8005
7956
  }
8006
7957
 
7958
+ /**
7959
+ * Returns the font class for the label based on state.
7960
+ * @returns {string} - Returns the font class for the label.
7961
+ * @private
7962
+ */
7963
+ get labelFontClass() {
7964
+ if (this.hasValue) return 'body-xs';
7965
+ return 'body-default';
7966
+ }
7967
+
7968
+ /**
7969
+ * Whether or not the component has a value.
7970
+ * @returns {boolean} - Returns true if the component has a value or placeholder.
7971
+ * @private
7972
+ */
7973
+ get hasValue() {
7974
+ return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
7975
+ }
7976
+
8007
7977
  /**
8008
7978
  * Returns classmap configuration for wrapper elements in each layout.
8009
7979
  * @private
@@ -8322,6 +8292,26 @@ class AuroSelect extends AuroElement$3 {
8322
8292
  }
8323
8293
  }
8324
8294
 
8295
+ /**
8296
+ * Hides the dropdown bib if its open.
8297
+ * @returns {void}
8298
+ */
8299
+ hideBib() {
8300
+ if (this.dropdown && this.dropdown.isPopoverVisible) {
8301
+ this.dropdown.hide();
8302
+ }
8303
+ }
8304
+
8305
+ /**
8306
+ * Shows the dropdown bib if there are options to show.
8307
+ * @returns {void}
8308
+ */
8309
+ showBib() {
8310
+ if (this.dropdown && !this.dropdown.isPopoverVisible) {
8311
+ this.dropdown.show();
8312
+ }
8313
+ }
8314
+
8325
8315
  /**
8326
8316
  * Function to support @focusin event.
8327
8317
  * @private
@@ -8487,16 +8477,6 @@ class AuroSelect extends AuroElement$3 {
8487
8477
  this.validation.reset(this);
8488
8478
  }
8489
8479
 
8490
- /**
8491
- * Hide dropdownbib.
8492
- * @private
8493
- */
8494
- hideBib() {
8495
- if (this.dropdown) {
8496
- this.dropdown.hide();
8497
- }
8498
- }
8499
-
8500
8480
  /**
8501
8481
  * Validates value.
8502
8482
  * @param {boolean} [force=false] - Whether to force validation.
@@ -8816,6 +8796,11 @@ class AuroSelect extends AuroElement$3 {
8816
8796
  'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
8817
8797
  };
8818
8798
 
8799
+ const valueClasses = {
8800
+ 'value': true,
8801
+ 'body-default': true
8802
+ };
8803
+
8819
8804
  return html`
8820
8805
  <div
8821
8806
  class="${classMap(this.commonWrapperClasses)}"
@@ -8848,7 +8833,7 @@ class AuroSelect extends AuroElement$3 {
8848
8833
  <slot name="label"></slot>
8849
8834
  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
8850
8835
  </label>
8851
- <div class="value" id="value"></div>
8836
+ <div class="${classMap(valueClasses)}" id="value"></div>
8852
8837
  <div id="placeholder" class="${classMap(placeholderClass)}">
8853
8838
  ${this.placeholder}
8854
8839
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr802.0",
3
+ "version": "0.0.0-pr806.0",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
6
6
  "bugs": {
@@ -63,7 +63,7 @@
63
63
  "devDependencies": {
64
64
  "@aurodesignsystem/design-tokens": "^8.2.1",
65
65
  "@aurodesignsystem/eslint-config": "^1.3.5",
66
- "@aurodesignsystem/webcorestylesheets": "^10.0.0",
66
+ "@aurodesignsystem/webcorestylesheets": "^10.0.1",
67
67
  "@commitlint/cli": "^19.8.1",
68
68
  "@commitlint/config-conventional": "^19.8.1",
69
69
  "@open-wc/testing": "^4.0.0",