@aurodesignsystem-dev/auro-formkit 0.0.0-pr811.0 → 0.0.0-pr815.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 (43) hide show
  1. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +60 -96
  3. package/components/bibtemplate/dist/registered.js +60 -96
  4. package/components/combobox/demo/api.min.js +187 -124
  5. package/components/combobox/demo/index.md +2 -4
  6. package/components/combobox/demo/index.min.js +187 -124
  7. package/components/combobox/dist/auro-combobox.d.ts +8 -2
  8. package/components/combobox/dist/index.js +174 -118
  9. package/components/combobox/dist/registered.js +174 -118
  10. package/components/counter/demo/api.min.js +90 -124
  11. package/components/counter/demo/index.min.js +90 -124
  12. package/components/counter/dist/index.js +90 -124
  13. package/components/counter/dist/registered.js +90 -124
  14. package/components/datepicker/demo/api.min.js +187 -135
  15. package/components/datepicker/demo/index.min.js +187 -135
  16. package/components/datepicker/dist/index.js +187 -135
  17. package/components/datepicker/dist/registered.js +187 -135
  18. package/components/dropdown/demo/api.min.js +2 -2
  19. package/components/dropdown/demo/index.min.js +2 -2
  20. package/components/dropdown/dist/index.js +2 -2
  21. package/components/dropdown/dist/registered.js +2 -2
  22. package/components/input/demo/api.md +2 -5
  23. package/components/input/demo/api.min.js +91 -10
  24. package/components/input/demo/index.md +2 -2
  25. package/components/input/demo/index.min.js +91 -10
  26. package/components/input/dist/auro-input.d.ts +24 -0
  27. package/components/input/dist/base-input.d.ts +8 -2
  28. package/components/input/dist/index.js +91 -10
  29. package/components/input/dist/registered.js +91 -10
  30. package/components/menu/demo/api.min.js +9 -2
  31. package/components/menu/demo/index.min.js +9 -2
  32. package/components/menu/dist/index.js +9 -2
  33. package/components/menu/dist/registered.js +9 -2
  34. package/components/select/demo/api.md +1 -3
  35. package/components/select/demo/api.min.js +122 -134
  36. package/components/select/demo/index.min.js +122 -134
  37. package/components/select/dist/auro-select.d.ts +11 -5
  38. package/components/select/dist/index.js +109 -128
  39. package/components/select/dist/registered.js +109 -128
  40. package/package.json +1 -1
  41. package/components/input/dist/styles/default/input-css.d.ts +0 -2
  42. package/components/input/dist/styles/default/label-css.d.ts +0 -2
  43. package/components/input/dist/styles/input-css.d.ts +0 -2
@@ -519,7 +519,7 @@ const {
519
519
 
520
520
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
521
521
 
522
- let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
522
+ let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
523
523
 
524
524
  /* eslint-disable jsdoc/require-param */
525
525
 
@@ -589,7 +589,7 @@ let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
589
589
  class AuroFormValidation {
590
590
 
591
591
  constructor() {
592
- this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
592
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
593
593
  }
594
594
 
595
595
  /**
@@ -4148,11 +4148,11 @@ var shapeSizeCss = css`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic
4148
4148
 
4149
4149
  var colorCss$1$1 = css`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([ondark])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([ondark])) .wrapper:focus-within,:host(:not([ondark])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([onDark])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([ondark])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]) .label{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark]) .wrapper:focus-within,:host([onDark]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([onDark][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([ondark][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}`;
4150
4150
 
4151
- var styleCss$1$2 = css`:host{position:relative;display:block}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
4151
+ var styleCss$1$2 = css`:host{position:relative;display:block}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;box-sizing:border-box;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
4152
4152
 
4153
4153
  var classicColorCss = css``;
4154
4154
 
4155
- var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) .label{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-size-default, 1rem);transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
4155
+ var classicLayoutCss = css`:host([layout*=classic]){position:relative;max-width:100%}:host([layout*=classic]) #bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}:host([layout*=classic]) label{transition:font-size .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:normal}:host([layout*=classic]) .wrapper{display:flex;box-sizing:border-box;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-dropdown-trigger-outline-color)}@media(hover: hover){:host([layout*=classic]) .wrapper:hover{cursor:pointer}}:host([layout*=classic]) .triggerContentWrapper{overflow:hidden;flex:1;justify-content:start;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) #showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;padding-right:var(--ds-size-150, 0.75rem)}:host([layout*=classic]) #showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem)}:host([layout*=classic]) #showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}`;
4156
4156
 
4157
4157
  var styleEmphasizedCss = css`.layout-emphasized .chevron,.layout-emphasized-left .chevron,.layout-emphasized-right .chevron{margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{width:calc(100% - var(--ds-size-300, 1.5rem));margin-right:var(--ds-size-300, 1.5rem)}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{width:calc(100% - var(--ds-size-600, 3rem));margin-right:var(--ds-size-300, 1.5rem)}`;
4158
4158
 
@@ -4171,7 +4171,7 @@ var tokensCss$4 = css`:host{--ds-auro-helptext-color: var(--ds-basic-color-texti
4171
4171
 
4172
4172
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
4173
4173
 
4174
- let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
4174
+ let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
4175
4175
 
4176
4176
  /* eslint-disable jsdoc/require-param */
4177
4177
 
@@ -4250,7 +4250,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
4250
4250
  this.onDark = false;
4251
4251
  this.hasTextContent = false;
4252
4252
 
4253
- AuroLibraryRuntimeUtils$5.prototype.handleComponentTagRename(this, 'auro-helptext');
4253
+ AuroLibraryRuntimeUtils$4.prototype.handleComponentTagRename(this, 'auro-helptext');
4254
4254
  }
4255
4255
 
4256
4256
  static get styles() {
@@ -4306,7 +4306,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
4306
4306
  *
4307
4307
  */
4308
4308
  static register(name = "auro-helptext") {
4309
- AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroHelpText);
4309
+ AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHelpText);
4310
4310
  }
4311
4311
 
4312
4312
  updated() {
@@ -5369,7 +5369,7 @@ var tokenCss = css`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
5369
5369
 
5370
5370
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
5371
5371
 
5372
- let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
5372
+ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
5373
5373
 
5374
5374
  /* eslint-disable jsdoc/require-param */
5375
5375
 
@@ -5952,7 +5952,7 @@ var shapeSize = css`.shape-rounded-xl{min-height:68px;max-height:68px;border-sty
5952
5952
 
5953
5953
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
5954
5954
 
5955
- let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
5955
+ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
5956
5956
 
5957
5957
  /* eslint-disable jsdoc/require-param */
5958
5958
 
@@ -6047,7 +6047,7 @@ class AuroLoader extends LitElement {
6047
6047
  /**
6048
6048
  * @private
6049
6049
  */
6050
- this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
6050
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
6051
6051
 
6052
6052
  this.orbit = false;
6053
6053
  this.ringworm = false;
@@ -6110,7 +6110,7 @@ class AuroLoader extends LitElement {
6110
6110
  *
6111
6111
  */
6112
6112
  static register(name = "auro-loader") {
6113
- AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
6113
+ AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
6114
6114
  }
6115
6115
 
6116
6116
  firstUpdated() {
@@ -6390,7 +6390,7 @@ class AuroButton extends AuroElement$1 {
6390
6390
  *
6391
6391
  */
6392
6392
  static register(name = "auro-button") {
6393
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
6393
+ AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
6394
6394
  }
6395
6395
 
6396
6396
  /**
@@ -6727,7 +6727,7 @@ var colorCss$4 = css`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
6727
6727
 
6728
6728
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
6729
6729
 
6730
- let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
6730
+ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
6731
6731
 
6732
6732
  /* eslint-disable jsdoc/require-param */
6733
6733
 
@@ -6809,7 +6809,7 @@ class AuroIcon extends BaseIcon {
6809
6809
  */
6810
6810
  privateDefaults() {
6811
6811
  this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
6812
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
6812
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
6813
6813
  }
6814
6814
 
6815
6815
  // function to define props used within the scope of this component
@@ -6891,7 +6891,7 @@ class AuroIcon extends BaseIcon {
6891
6891
  *
6892
6892
  */
6893
6893
  static register(name = "auro-icon") {
6894
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroIcon);
6894
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroIcon);
6895
6895
  }
6896
6896
 
6897
6897
  connectedCallback() {
@@ -6963,77 +6963,7 @@ class AuroIcon extends BaseIcon {
6963
6963
 
6964
6964
  var iconVersion = '8.1.0';
6965
6965
 
6966
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
6967
- // See LICENSE in the project root for license information.
6968
-
6969
- // ---------------------------------------------------------------------
6970
-
6971
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
6972
-
6973
- let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
6974
-
6975
- /* eslint-disable jsdoc/require-param */
6976
-
6977
- /**
6978
- * This will register a new custom element with the browser.
6979
- * @param {String} name - The name of the custom element.
6980
- * @param {Object} componentClass - The class to register as a custom element.
6981
- * @returns {void}
6982
- */
6983
- registerComponent(name, componentClass) {
6984
- if (!customElements.get(name)) {
6985
- customElements.define(name, class extends componentClass {});
6986
- }
6987
- }
6988
-
6989
- /**
6990
- * Finds and returns the closest HTML Element based on a selector.
6991
- * @returns {void}
6992
- */
6993
- closestElement(
6994
- selector, // selector like in .closest()
6995
- base = this, // extra functionality to skip a parent
6996
- __Closest = (el, found = el && el.closest(selector)) =>
6997
- !el || el === document || el === window
6998
- ? null // standard .closest() returns null for non-found selectors also
6999
- : found
7000
- ? found // found a selector INside this element
7001
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
7002
- ) {
7003
- return __Closest(base);
7004
- }
7005
- /* eslint-enable jsdoc/require-param */
7006
-
7007
- /**
7008
- * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
7009
- * @param {Object} elem - The element to check.
7010
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
7011
- * @returns {void}
7012
- */
7013
- handleComponentTagRename(elem, tagName) {
7014
- const tag = tagName.toLowerCase();
7015
- const elemTag = elem.tagName.toLowerCase();
7016
-
7017
- if (elemTag !== tag) {
7018
- elem.setAttribute(tag, true);
7019
- }
7020
- }
7021
-
7022
- /**
7023
- * Validates if an element is a specific Auro component.
7024
- * @param {Object} elem - The element to validate.
7025
- * @param {String} tagName - The name of the Auro component to check against.
7026
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
7027
- */
7028
- elementMatch(elem, tagName) {
7029
- const tag = tagName.toLowerCase();
7030
- const elemTag = elem.tagName.toLowerCase();
7031
-
7032
- return elemTag === tag || elem.hasAttribute(tag);
7033
- }
7034
- };
7035
-
7036
- var styleCss$5 = css`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
6966
+ var styleCss$5 = css`.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-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-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-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)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
7037
6967
 
7038
6968
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
7039
6969
  // See LICENSE in the project root for license information.
@@ -7043,13 +6973,12 @@ var styleCss$5 = css`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-head
7043
6973
  * The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
7044
6974
  *
7045
6975
  * @attr {Boolean} no-margin-block - if declared, margin-block will be set to `0`
7046
- * @attr {String} level - Determines heading level for HTML element. Options are `1` - `6`
7047
- * @attr {String} display - Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`.
7048
6976
  * @attr {String} color - Allows user to pass in CSS custom property or direct hex value to change the color of the header
6977
+ * @attr {String} display - Determines the visual appearance of the header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`.
6978
+ * @attr {String} level - Determines the semantic heading level of the HTML element. Options are `1` - `6`
7049
6979
  * @attr {String} margin - Specify the margin(s) to be altered. Options are `top`, `bottom`, or `both`.
7050
6980
  * @attr {String} size - Specify size of margin adjustment, either `none`, `25`, `50`, `100`, `150`, `200`, `300`, `400`, `600` or `800`.
7051
6981
  */
7052
-
7053
6982
  /* eslint complexity: ["error", 21] */
7054
6983
 
7055
6984
  // build the component class
@@ -7062,7 +6991,7 @@ class AuroHeader extends LitElement {
7062
6991
  /**
7063
6992
  * @private
7064
6993
  */
7065
- this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
6994
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
7066
6995
  }
7067
6996
 
7068
6997
  // function to define props used within the scope of this component
@@ -7083,6 +7012,22 @@ class AuroHeader extends LitElement {
7083
7012
  return [styleCss$5];
7084
7013
  }
7085
7014
 
7015
+ /**
7016
+ * Mapping of display values to their corresponding CSS classes
7017
+ * @private
7018
+ */
7019
+ static get displayClassMap() {
7020
+ return {
7021
+ 'display': 'heading-xl',
7022
+ '800': 'heading-xl',
7023
+ '700': 'heading-lg',
7024
+ '600': 'heading-md',
7025
+ '500': 'heading-sm',
7026
+ '400': 'heading-xs',
7027
+ '300': 'heading-2xs'
7028
+ };
7029
+ }
7030
+
7086
7031
  /**
7087
7032
  * This will register this element with the browser.
7088
7033
  * @param {string} [name="auro-header"] - The name of element that you want to register to.
@@ -7092,7 +7037,7 @@ class AuroHeader extends LitElement {
7092
7037
  *
7093
7038
  */
7094
7039
  static register(name = "auro-header") {
7095
- AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroHeader);
7040
+ AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroHeader);
7096
7041
  }
7097
7042
 
7098
7043
  firstUpdated() {
@@ -7159,23 +7104,42 @@ class AuroHeader extends LitElement {
7159
7104
  this.display = 'display';
7160
7105
  }
7161
7106
 
7162
- switch (level) {
7163
- case '2': return html$1`<h2 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h2>`;
7164
- case '3': return html$1`<h3 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h3>`;
7165
- case '4': return html$1`<h4 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h4>`;
7166
- case '5': return html$1`<h5 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h5>`;
7167
- case '6': return html$1`<h6 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h6>`;
7168
- default: return html$1`<h1 class="heading heading--${this.display} ${this.spacingDecision(this.size)}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></h1>`;
7107
+ const headingLevel = level || '1';
7108
+ const spacingClasses = this.spacingDecision(this.size);
7109
+
7110
+ // Get the CSS class based on the display prop
7111
+ const headingClass = AuroHeader.displayClassMap[this.display];
7112
+
7113
+ const classObject = {
7114
+ 'heading': true,
7115
+ [`heading--${this.display}`]: true,
7116
+ [headingClass]: true
7117
+ };
7118
+
7119
+ // Add spacing classes to the class object if they exist
7120
+ if (spacingClasses) {
7121
+ const spacingClassArray = spacingClasses.split(' ');
7122
+ spacingClassArray.forEach(cls => {
7123
+ if (cls.trim()) {
7124
+ classObject[cls.trim()] = true;
7125
+ }
7126
+ });
7169
7127
  }
7128
+
7129
+ const headerClasses = classMap(classObject);
7130
+
7131
+ // unsafeStatic dynamically creates tag names at runtime
7132
+ const tag = unsafeStatic(`h${headingLevel}`);
7133
+ return html`<${tag} class="${headerClasses}" style="color: ${ifDefined(this.color ? this.color : undefined)}"><slot></slot></${tag}>`;
7170
7134
  }
7135
+
7171
7136
  // function that renders the HTML and CSS into the scope of the component
7172
-
7173
7137
  render() {
7174
7138
  return this.template(this.level);
7175
7139
  }
7176
7140
  }
7177
7141
 
7178
- var headerVersion = '4.0.1';
7142
+ var headerVersion = '4.0.2';
7179
7143
 
7180
7144
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
7181
7145
  // See LICENSE in the project root for license information.
@@ -7188,7 +7152,7 @@ class AuroBibtemplate extends LitElement {
7188
7152
 
7189
7153
  this.large = false;
7190
7154
 
7191
- AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
7155
+ AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
7192
7156
 
7193
7157
  const versioning = new AuroDependencyVersioning();
7194
7158
 
@@ -7240,7 +7204,7 @@ class AuroBibtemplate extends LitElement {
7240
7204
  *
7241
7205
  */
7242
7206
  static register(name = "auro-bibtemplate") {
7243
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroBibtemplate);
7207
+ AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
7244
7208
  }
7245
7209
 
7246
7210
  /**
@@ -7530,7 +7494,7 @@ class AuroHelpText extends LitElement {
7530
7494
 
7531
7495
  var helpTextVersion = '1.0.0';
7532
7496
 
7533
- 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{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{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}`;
7497
+ 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*=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}: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}`;
7534
7498
 
7535
7499
  // Copyright (c) 2021 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
7536
7500
  // See LICENSE in the project root for license information.
@@ -7566,11 +7530,6 @@ class AuroSelect extends AuroElement$3 {
7566
7530
 
7567
7531
  this.matchWidth = false;
7568
7532
 
7569
- // Layout Config
7570
- this.layout = 'snowflake';
7571
- this.shape = 'snowflake';
7572
- this.size = 'xl';
7573
-
7574
7533
  // floaterConfig
7575
7534
  this.placement = 'bottom-start';
7576
7535
  this.offset = 0;
@@ -7579,10 +7538,6 @@ class AuroSelect extends AuroElement$3 {
7579
7538
 
7580
7539
  this.forceDisplayValue = false;
7581
7540
 
7582
- this.layout = 'classic';
7583
- this.shape = 'classic';
7584
- this.size = 'xl';
7585
-
7586
7541
  /**
7587
7542
  * @private
7588
7543
  */
@@ -7598,7 +7553,7 @@ class AuroSelect extends AuroElement$3 {
7598
7553
  /**
7599
7554
  * @private
7600
7555
  */
7601
- this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
7556
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
7602
7557
 
7603
7558
  /**
7604
7559
  * Generate unique names for dependency components.
@@ -7648,6 +7603,11 @@ class AuroSelect extends AuroElement$3 {
7648
7603
  this.fullscreenBreakpoint = 'sm';
7649
7604
  this.onDark = false;
7650
7605
  this.isPopoverVisible = false;
7606
+
7607
+ // Layout Config
7608
+ this.layout = 'classic';
7609
+ this.shape = 'classic';
7610
+ this.size = 'lg';
7651
7611
  }
7652
7612
 
7653
7613
  // This function is to define props used within the scope of this component
@@ -7953,7 +7913,8 @@ class AuroSelect extends AuroElement$3 {
7953
7913
  const obj = {
7954
7914
  'is-disabled': this.disabled,
7955
7915
  'withValue': false,
7956
- 'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0
7916
+ 'util_displayHiddenVisually': this.hasDisplayValueContent && !this.hasFocus && this.value && this.value.length > 0,
7917
+ [this.labelFontClass]: true
7957
7918
  };
7958
7919
 
7959
7920
  if (this.placeholder) {
@@ -7969,14 +7930,32 @@ class AuroSelect extends AuroElement$3 {
7969
7930
  }
7970
7931
 
7971
7932
  /**
7972
- * Returns classmap configuration for wrapper elements in each layout.
7933
+ * Returns the label font class based on layout and selection state.
7973
7934
  * @private
7974
- * @returns {object} - Returns classmap.
7935
+ * @returns {string} - The font class for the label.
7975
7936
  */
7976
- get commonWrapperClasses() {
7977
- return {
7978
- 'wrapper': true
7979
- };
7937
+ get labelFontClass() {
7938
+ const isSelected = this.hasValue;
7939
+
7940
+ if (this.layout.startsWith('emphasized')) {
7941
+ return isSelected ? 'body-sm' : 'accent-xl';
7942
+ }
7943
+
7944
+ if (this.layout === 'snowflake') {
7945
+ return isSelected ? 'body-xs' : 'body-lg';
7946
+ }
7947
+
7948
+ // classic layout (default)
7949
+ return isSelected ? 'body-xs' : 'body-default';
7950
+ }
7951
+
7952
+ /**
7953
+ * Whether or not the component has a value.
7954
+ * @returns {boolean} - Returns true if the component has a value or placeholder.
7955
+ * @private
7956
+ */
7957
+ get hasValue() {
7958
+ return this.placeholder || (this.value && this.value.length > 0); // eslint-disable-line no-extra-parens
7980
7959
  }
7981
7960
 
7982
7961
  /**
@@ -8026,7 +8005,7 @@ class AuroSelect extends AuroElement$3 {
8026
8005
  *
8027
8006
  */
8028
8007
  static register(name = "auro-select") {
8029
- AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroSelect);
8008
+ AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroSelect);
8030
8009
  }
8031
8010
 
8032
8011
  /**
@@ -8132,7 +8111,7 @@ class AuroSelect extends AuroElement$3 {
8132
8111
 
8133
8112
  this.menu.addEventListener('auroMenu-selectValueReset', () => {
8134
8113
  this.optionSelected = this.menu.optionSelected;
8135
- this.validation.validate(this);
8114
+ this.validate(this);
8136
8115
  });
8137
8116
 
8138
8117
  this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
@@ -8216,7 +8195,7 @@ class AuroSelect extends AuroElement$3 {
8216
8195
  this.addEventListener('focusin', this.handleFocusin);
8217
8196
 
8218
8197
  this.addEventListener('blur', () => {
8219
- this.validation.validate(this);
8198
+ this.validate();
8220
8199
  this.hasFocus = false;
8221
8200
  });
8222
8201
  }
@@ -8430,7 +8409,7 @@ class AuroSelect extends AuroElement$3 {
8430
8409
  }
8431
8410
 
8432
8411
  this._updateNativeSelect();
8433
- this.validation.validate(this);
8412
+ this.validate();
8434
8413
 
8435
8414
  // LEGACY EVENT
8436
8415
  this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
@@ -8638,7 +8617,6 @@ class AuroSelect extends AuroElement$3 {
8638
8617
 
8639
8618
  return html`
8640
8619
  <div
8641
- class="${classMap(this.commonWrapperClasses)}"
8642
8620
  part="wrapper">
8643
8621
  <div id="slotHolder" aria-hidden="true">
8644
8622
  <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
@@ -8717,7 +8695,6 @@ class AuroSelect extends AuroElement$3 {
8717
8695
 
8718
8696
  return html`
8719
8697
  <div
8720
- class="${classMap(this.commonWrapperClasses)}"
8721
8698
  part="wrapper">
8722
8699
  <div id="slotHolder" aria-hidden="true">
8723
8700
  <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
@@ -8794,9 +8771,13 @@ class AuroSelect extends AuroElement$3 {
8794
8771
  'util_displayHiddenVisually': (this.forceDisplayValue || !(this.dropdown && this.dropdown.isPopoverVisible)) && this.hasDisplayValueContent
8795
8772
  };
8796
8773
 
8774
+ const valueClasses = {
8775
+ 'value': true,
8776
+ 'body-default': true
8777
+ };
8778
+
8797
8779
  return html`
8798
8780
  <div
8799
- class="${classMap(this.commonWrapperClasses)}"
8800
8781
  part="wrapper">
8801
8782
  <div id="slotHolder" aria-hidden="true">
8802
8783
  <slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
@@ -8826,7 +8807,7 @@ class AuroSelect extends AuroElement$3 {
8826
8807
  <slot name="label"></slot>
8827
8808
  ${this.required ? undefined : html`<slot name="optionalLabel"> (optional)</slot>`}
8828
8809
  </label>
8829
- <div class="value" id="value"></div>
8810
+ <div class="${classMap(valueClasses)}" id="value"></div>
8830
8811
  <div id="placeholder" class="${classMap(placeholderClass)}">
8831
8812
  ${this.placeholder}
8832
8813
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr811.0",
3
+ "version": "0.0.0-pr815.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": {
@@ -1,2 +0,0 @@
1
- declare const _default: import("lit").CSSResult;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("lit").CSSResult;
2
- export default _default;
@@ -1,2 +0,0 @@
1
- declare const _default: import("lit").CSSResult;
2
- export default _default;