@aurodesignsystem/auro-formkit 2.2.1 → 3.0.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 (137) hide show
  1. package/CHANGELOG.md +49 -0
  2. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  3. package/components/bibtemplate/dist/index.js +18 -178
  4. package/components/bibtemplate/dist/registered.js +18 -178
  5. package/components/checkbox/README.md +1 -1
  6. package/components/checkbox/demo/api.html +2 -1
  7. package/components/checkbox/demo/api.md +129 -58
  8. package/components/checkbox/demo/api.min.js +41 -8
  9. package/components/checkbox/demo/index.html +2 -1
  10. package/components/checkbox/demo/index.md +116 -50
  11. package/components/checkbox/demo/index.min.js +41 -8
  12. package/components/checkbox/demo/readme.html +2 -1
  13. package/components/checkbox/demo/readme.md +1 -1
  14. package/components/checkbox/dist/auro-checkbox-group.d.ts +8 -0
  15. package/components/checkbox/dist/auro-checkbox.d.ts +8 -0
  16. package/components/checkbox/dist/index.js +41 -8
  17. package/components/checkbox/dist/registered.js +41 -8
  18. package/components/combobox/README.md +1 -1
  19. package/components/combobox/demo/api.html +2 -1
  20. package/components/combobox/demo/api.md +102 -1
  21. package/components/combobox/demo/api.min.js +238 -988
  22. package/components/combobox/demo/index.html +2 -4
  23. package/components/combobox/demo/index.md +32 -0
  24. package/components/combobox/demo/index.min.js +238 -988
  25. package/components/combobox/demo/readme.html +2 -1
  26. package/components/combobox/demo/readme.md +1 -1
  27. package/components/combobox/dist/auro-combobox.d.ts +8 -0
  28. package/components/combobox/dist/index.js +196 -786
  29. package/components/combobox/dist/registered.js +196 -786
  30. package/components/counter/README.md +1 -1
  31. package/components/counter/demo/api.html +2 -1
  32. package/components/counter/demo/api.md +29 -10
  33. package/components/counter/demo/api.min.js +187 -785
  34. package/components/counter/demo/index.html +2 -1
  35. package/components/counter/demo/index.md +104 -8
  36. package/components/counter/demo/index.min.js +187 -785
  37. package/components/counter/demo/readme.html +2 -1
  38. package/components/counter/demo/readme.md +1 -1
  39. package/components/counter/dist/auro-counter-group.d.ts +10 -2
  40. package/components/counter/dist/auro-counter.d.ts +1 -0
  41. package/components/counter/dist/iconVersion.d.ts +1 -1
  42. package/components/counter/dist/index.js +187 -785
  43. package/components/counter/dist/registered.js +187 -785
  44. package/components/datepicker/README.md +1 -1
  45. package/components/datepicker/demo/api.html +2 -4
  46. package/components/datepicker/demo/api.md +15 -14
  47. package/components/datepicker/demo/api.min.js +286 -1036
  48. package/components/datepicker/demo/index.html +2 -4
  49. package/components/datepicker/demo/index.md +38 -0
  50. package/components/datepicker/demo/index.min.js +286 -1036
  51. package/components/datepicker/demo/readme.html +2 -1
  52. package/components/datepicker/demo/readme.md +1 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +8 -0
  54. package/components/datepicker/dist/index.js +286 -1036
  55. package/components/datepicker/dist/registered.js +286 -1036
  56. package/components/dropdown/README.md +1 -1
  57. package/components/dropdown/demo/api.html +2 -1
  58. package/components/dropdown/demo/api.md +173 -82
  59. package/components/dropdown/demo/api.min.js +41 -183
  60. package/components/dropdown/demo/index.html +2 -1
  61. package/components/dropdown/demo/index.md +86 -4
  62. package/components/dropdown/demo/index.min.js +41 -183
  63. package/components/dropdown/demo/readme.html +2 -1
  64. package/components/dropdown/demo/readme.md +1 -1
  65. package/components/dropdown/dist/auro-dropdown.d.ts +8 -0
  66. package/components/dropdown/dist/auro-dropdownBib.d.ts +2 -2
  67. package/components/dropdown/dist/index.js +41 -183
  68. package/components/dropdown/dist/registered.js +41 -183
  69. package/components/form/README.md +1 -1
  70. package/components/form/demo/api.html +2 -1
  71. package/components/form/demo/api.min.js +1 -1
  72. package/components/form/demo/index.html +2 -1
  73. package/components/form/demo/index.min.js +1 -1
  74. package/components/form/demo/readme.html +2 -1
  75. package/components/form/demo/readme.md +1 -1
  76. package/components/form/demo/working.html +2 -1
  77. package/components/form/dist/index.js +1 -1
  78. package/components/form/dist/registered.js +1 -1
  79. package/components/helptext/dist/auro-helptext.d.ts +8 -0
  80. package/components/helptext/dist/index.js +11 -2
  81. package/components/helptext/dist/registered.js +11 -2
  82. package/components/input/README.md +1 -1
  83. package/components/input/demo/api.html +2 -1
  84. package/components/input/demo/api.js +2 -0
  85. package/components/input/demo/api.md +108 -18
  86. package/components/input/demo/api.min.js +117 -402
  87. package/components/input/demo/index.html +2 -1
  88. package/components/input/demo/index.md +30 -0
  89. package/components/input/demo/index.min.js +103 -402
  90. package/components/input/demo/readme.html +2 -1
  91. package/components/input/demo/readme.md +1 -1
  92. package/components/input/dist/base-input.d.ts +8 -0
  93. package/components/input/dist/buttonVersion.d.ts +1 -1
  94. package/components/input/dist/iconVersion.d.ts +1 -1
  95. package/components/input/dist/index.js +103 -402
  96. package/components/input/dist/registered.js +103 -402
  97. package/components/menu/README.md +1 -1
  98. package/components/menu/demo/api.html +2 -1
  99. package/components/menu/demo/api.md +6 -2
  100. package/components/menu/demo/api.min.js +23 -183
  101. package/components/menu/demo/index.html +2 -1
  102. package/components/menu/demo/index.min.js +23 -183
  103. package/components/menu/demo/readme.html +2 -1
  104. package/components/menu/demo/readme.md +1 -1
  105. package/components/menu/dist/iconVersion.d.ts +1 -1
  106. package/components/menu/dist/index.js +23 -183
  107. package/components/menu/dist/registered.js +23 -183
  108. package/components/radio/README.md +1 -1
  109. package/components/radio/demo/api.html +2 -1
  110. package/components/radio/demo/api.md +160 -56
  111. package/components/radio/demo/api.min.js +35 -8
  112. package/components/radio/demo/index.html +2 -1
  113. package/components/radio/demo/index.md +43 -12
  114. package/components/radio/demo/index.min.js +35 -8
  115. package/components/radio/demo/readme.html +2 -1
  116. package/components/radio/demo/readme.md +1 -1
  117. package/components/radio/dist/auro-radio-group.d.ts +6 -0
  118. package/components/radio/dist/auro-radio.d.ts +6 -0
  119. package/components/radio/dist/index.js +35 -8
  120. package/components/radio/dist/registered.js +35 -8
  121. package/components/select/README.md +1 -1
  122. package/components/select/demo/api.html +2 -1
  123. package/components/select/demo/api.js +0 -2
  124. package/components/select/demo/api.md +112 -35
  125. package/components/select/demo/api.min.js +116 -589
  126. package/components/select/demo/index.html +2 -1
  127. package/components/select/demo/index.md +100 -0
  128. package/components/select/demo/index.min.js +116 -576
  129. package/components/select/demo/readme.html +2 -1
  130. package/components/select/demo/readme.md +1 -1
  131. package/components/select/dist/auro-select.d.ts +8 -0
  132. package/components/select/dist/index.js +91 -391
  133. package/components/select/dist/registered.js +91 -391
  134. package/package.json +23 -23
  135. package/components/counter/dist/styles/counter-button-tokens-css.d.ts +0 -2
  136. package/components/select/dist/styles/color-css.d.ts +0 -2
  137. package/components/select/dist/styles/tokens-css.d.ts +0 -2
@@ -31,11 +31,11 @@ const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{c
31
31
  */
32
32
  const a=Symbol.for(""),o$1=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
33
33
 
34
- var styleButtonTokenCss = i$5`:host{--ds-auro-counter-control-ui-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-border-hover: var(--ds-color-ui-bkg-hover-default, rgba(0, 0, 0, 0.06));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03))}`;
34
+ var tokensCss$7 = i$5`:host{--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-counter-divider-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15))}`;
35
35
 
36
- var styleButtonColorCss = i$5`.auroButton{border-color:unset;background-color:var(--ds-auro-counter-control-ui-bkg);color:var(--ds-auro-button-text-color);-webkit-tap-highlight-color:var(--ds-auro-button-tap-color)}@media(hover: hover){.auroButton:active:not(:disabled),.auroButton:hover:not(:disabled){background-color:var(--ds-auro-counter-control-ui-hover)}}`;
36
+ var styleButtonColorCss = i$5`.auroButton{border-color:unset;background-color:var(--ds-auro-counter-control-background-color);-webkit-tap-highlight-color:var(--ds-auro-button-tap-color)}@media(hover: hover){.auroButton:active:not(:disabled),.auroButton:hover:not(:disabled){--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1))}}:host([onDark]) .auroButton{--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05))}@media(hover: hover){:host([onDark]) .auroButton:active:not(:disabled),:host([onDark]) .auroButton:hover:not(:disabled){--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}}`;
37
37
 
38
- var styleButtonCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.contentWrapper{display:flex;align-items:center}.contentWrapper span{display:block;height:var(--ds-size-300, 1.5rem)}.auroButton{position:relative;display:inline-flex;overflow:visible;width:calc(var(--ds-size-50, 0.25rem) + var(--ds-size-400, 2rem));height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));flex-direction:row;align-items:center;justify-content:center;padding:var(--ds-auro-counter-control-padding);border:none;border-radius:var(--ds-auro-counter-control-border-radius);margin:0;cursor:pointer;gap:var(--ds-size-100, 0.5rem);line-height:unset;touch-action:manipulation;-webkit-touch-callout:none;user-select:none;white-space:nowrap}.auroButton:active .contentWrapper{transform:scale(0.95)}.auroButton:disabled{cursor:not-allowed;transform:unset}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline:none;transform:unset}`;
38
+ var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.contentWrapper{display:flex;align-items:center}.contentWrapper span{display:block;height:var(--ds-size-300, 1.5rem)}.auroButton{position:relative;display:inline-flex;overflow:visible;width:calc(var(--ds-size-50, 0.25rem) + var(--ds-size-400, 2rem));height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));flex-direction:row;align-items:center;justify-content:center;padding:var(--ds-auro-counter-control-padding);border:none;border-radius:var(--ds-auro-counter-control-border-radius);margin:0;cursor:pointer;gap:var(--ds-size-100, 0.5rem);line-height:unset;touch-action:manipulation;-webkit-touch-callout:none;user-select:none;white-space:nowrap}.auroButton:active .contentWrapper{transform:scale(0.95)}.auroButton:disabled{cursor:not-allowed;transform:unset}.auroButton:focus-visible:not(.auroButton:focus-visible:disabled){outline:none;transform:unset}`;
39
39
 
40
40
  /**
41
41
  * @license
@@ -60,7 +60,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
60
60
  // See LICENSE in the project root for license information.
61
61
 
62
62
 
63
- let AuroDependencyVersioning$3 = class AuroDependencyVersioning {
63
+ let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
64
64
 
65
65
  /**
66
66
  * Generates a unique string to be used for child auro element naming.
@@ -103,7 +103,7 @@ let AuroDependencyVersioning$3 = class AuroDependencyVersioning {
103
103
 
104
104
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
105
105
 
106
- let AuroLibraryRuntimeUtils$7 = class AuroLibraryRuntimeUtils {
106
+ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
107
107
 
108
108
  /* eslint-disable jsdoc/require-param */
109
109
 
@@ -166,111 +166,22 @@ let AuroLibraryRuntimeUtils$7 = class AuroLibraryRuntimeUtils {
166
166
  }
167
167
  };
168
168
 
169
- var styleCss$9 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
170
-
171
- var colorCss$8 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color:var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color:var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color:var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color:var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color:var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color:var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color:var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color:var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color:var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color:var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color:var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color:var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color:var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color:var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color:var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color:var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color:var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image:var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
172
-
173
- var tokensCss$7 = i$5`:host{--ds-auro-button-border-color:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color:var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image:var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color:var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color:var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color:transparent}`;
169
+ var styleCss$9 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-basic-text-body-default-font-family, AS Circular);font-size:var(--ds-basic-text-body-default-font-size, 16px);font-weight:var(--ds-basic-text-body-default-font-weight, Book);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible{outline:none}.auro-button:focus-visible:not([variant=flat]){outline-style:solid;outline-width:var(--ds-size-50, 0.25rem);outline-offset:calc(var(--ds-size-50, 0.25rem)*-1)}.auro-button:focus-visible:not([variant=flat]):not([variant=secondary]):not([variant=tertiary]){outline-width:calc(var(--ds-size-50, 0.25rem) - 1px)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-basic-text-body-sm-font-size, 14px);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon),.auro-button--iconOnly ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}.auro-button--iconOnly:not(.auro-button--rounded):focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]){outline-width:1px;outline-offset:-2px}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon),.auro-button--iconOnlySlim ::slotted([auro-icon]){--ds-auro-icon-size:calc(var(--ds-size-200, $ds-size-200) + var(--ds-size-50, $ds-size-50))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out,outline 0ms,outline-offset 0ms}.auro-button--rounded ::slotted(auro-icon),.auro-button--rounded ::slotted([auro-icon]){--ds-auro-icon-size:var(--ds-size-300, $ds-size-300)}.auro-button--rounded:focus-visible:not([variant=flat]):after{border-radius:100px}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
174
170
 
175
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
176
- // See LICENSE in the project root for license information.
177
-
178
- // ---------------------------------------------------------------------
171
+ var colorCss$8 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-hover, #00274a)}.auro-button:not([ondark]):disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text, #01426a)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-hover, #00274a)}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text, #01426a)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color:transparent}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color:transparent;--ds-auro-button-container-image:transparent;--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color:var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color:transparent;--ds-auro-button-text-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color:var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image:var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}`;
179
172
 
180
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
181
-
182
- let AuroLibraryRuntimeUtils$6 = class AuroLibraryRuntimeUtils {
183
-
184
- /* eslint-disable jsdoc/require-param */
185
-
186
- /**
187
- * This will register a new custom element with the browser.
188
- * @param {String} name - The name of the custom element.
189
- * @param {Object} componentClass - The class to register as a custom element.
190
- * @returns {void}
191
- */
192
- registerComponent(name, componentClass) {
193
- if (!customElements.get(name)) {
194
- customElements.define(name, class extends componentClass {});
195
- }
196
- }
197
-
198
- /**
199
- * Finds and returns the closest HTML Element based on a selector.
200
- * @returns {void}
201
- */
202
- closestElement(
203
- selector, // selector like in .closest()
204
- base = this, // extra functionality to skip a parent
205
- __Closest = (el, found = el && el.closest(selector)) =>
206
- !el || el === document || el === window
207
- ? null // standard .closest() returns null for non-found selectors also
208
- : found
209
- ? found // found a selector INside this element
210
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
211
- ) {
212
- return __Closest(base);
213
- }
214
- /* eslint-enable jsdoc/require-param */
215
-
216
- /**
217
- * 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.
218
- * @param {Object} elem - The element to check.
219
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
220
- * @returns {void}
221
- */
222
- handleComponentTagRename(elem, tagName) {
223
- const tag = tagName.toLowerCase();
224
- const elemTag = elem.tagName.toLowerCase();
225
-
226
- if (elemTag !== tag) {
227
- elem.setAttribute(tag, true);
228
- }
229
- }
230
-
231
- /**
232
- * Validates if an element is a specific Auro component.
233
- * @param {Object} elem - The element to validate.
234
- * @param {String} tagName - The name of the Auro component to check against.
235
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
236
- */
237
- elementMatch(elem, tagName) {
238
- const tag = tagName.toLowerCase();
239
- const elemTag = elem.tagName.toLowerCase();
240
-
241
- return elemTag === tag || elem.hasAttribute(tag);
242
- }
243
- };
173
+ var tokensCss$6 = i$5`:host{--ds-auro-button-border-color:var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color:var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image:var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color:var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-tap-color:transparent}`;
244
174
 
245
175
  var styleCss$8 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.75rem;--margin-lg:1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin)*6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs)*6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm)*6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md)*6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg)*6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}100%{left:110%}}:host>.no-animation{display:none}@media(prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
246
176
 
247
- var colorCss$7 = i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color:var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color:var(--ds-color-utility-neutral-inverse, #ccd2db)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
177
+ var colorCss$7 = i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
248
178
 
249
- var tokensCss$6 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
179
+ var tokensCss$5 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
250
180
 
251
181
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
252
182
  // See LICENSE in the project root for license information.
253
183
 
254
184
 
255
- // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
256
- /**
257
- * The auro-loader element is an easy to use animated loader component.
258
- *
259
- * @attr {Boolean} pulse - sets loader type
260
- * @attr {Boolean} ringworm - sets loader type
261
- * @attr {Boolean} laser - sets loader type
262
- * @attr {Boolean} orbit - sets loader type
263
- * @attr {Boolean} white - sets color of loader to white
264
- * @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
265
- * @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
266
- * @attr {Boolean} xs - sets size to extra small
267
- * @attr {Boolean} sm - sets size to small
268
- * @attr {Boolean} md - sets size to medium
269
- * @attr {Boolean} lg - sets size to large
270
- * @csspart element - apply style to adjust speed of animation
271
- */
272
-
273
- // build the component class
274
185
  class AuroLoader extends r {
275
186
  constructor() {
276
187
  super();
@@ -293,7 +204,7 @@ class AuroLoader extends r {
293
204
  /**
294
205
  * @private
295
206
  */
296
- this.runtimeUtils = new AuroLibraryRuntimeUtils$6();
207
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
297
208
 
298
209
  this.orbit = false;
299
210
  this.ringworm = false;
@@ -304,19 +215,35 @@ class AuroLoader extends r {
304
215
  // function to define props used within the scope of this component
305
216
  static get properties() {
306
217
  return {
307
- pulse: {
218
+
219
+ /**
220
+ * Sets loader to laser type.
221
+ */
222
+ laser: {
308
223
  type: Boolean,
309
224
  reflect: true
310
225
  },
226
+
227
+ /**
228
+ * Sets loader to orbit type.
229
+ */
311
230
  orbit: {
312
231
  type: Boolean,
313
232
  reflect: true
314
233
  },
315
- ringworm: {
234
+
235
+ /**
236
+ * Sets loader to pulse type.
237
+ */
238
+ pulse: {
316
239
  type: Boolean,
317
240
  reflect: true
318
241
  },
319
- laser: {
242
+
243
+ /**
244
+ * Sets loader to ringworm type.
245
+ */
246
+ ringworm: {
320
247
  type: Boolean,
321
248
  reflect: true
322
249
  }
@@ -327,7 +254,7 @@ class AuroLoader extends r {
327
254
  return [
328
255
  i$5`${styleCss$8}`,
329
256
  i$5`${colorCss$7}`,
330
- i$5`${tokensCss$6}`
257
+ i$5`${tokensCss$5}`
331
258
  ];
332
259
  }
333
260
 
@@ -340,7 +267,7 @@ class AuroLoader extends r {
340
267
  *
341
268
  */
342
269
  static register(name = "auro-loader") {
343
- AuroLibraryRuntimeUtils$6.prototype.registerComponent(name, AuroLoader);
270
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroLoader);
344
271
  }
345
272
 
346
273
  firstUpdated() {
@@ -390,23 +317,26 @@ class AuroLoader extends r {
390
317
  }
391
318
  }
392
319
 
393
- var loaderVersion = '4.0.0';
320
+ var loaderVersion = '5.0.0';
394
321
 
322
+ /* eslint-disable max-lines */
395
323
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
396
324
  // See LICENSE in the project root for license information.
397
325
 
398
326
 
399
327
  /**
400
328
  * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user
401
- * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
329
+ * @attr {Boolean} disabled - If set to true, button will become disabled and not allow for interactions
402
330
  * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
403
331
  * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
332
+ * @attr {String} loadingText - Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
404
333
  * @attr {Boolean} onDark - Set value for on-dark version of auro-button
405
334
  * @attr {Boolean} rounded - If set to true, the button will have a rounded shape
406
335
  * @attr {Boolean} slim - Set value for slim version of auro-button
407
336
  * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
408
337
  * @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead.
409
338
  * @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.
339
+ * @attr {Boolean} ariaexpanded - Populates the `aria-expanded` attribute that indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. This is an optional attribute for buttons.
410
340
  * @attr {String} id - Set the unique ID of an element.
411
341
  * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
412
342
  * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
@@ -451,6 +381,7 @@ class AuroButton extends r {
451
381
  this.rounded = false;
452
382
  this.slim = false;
453
383
  this.fluid = false;
384
+ this.loadingText = this.loadingText || 'Loading...';
454
385
 
455
386
  // Support for HTML5 forms
456
387
  if (typeof this.attachInternals === 'function') {
@@ -465,7 +396,7 @@ class AuroButton extends r {
465
396
  /**
466
397
  * Generate unique names for dependency components.
467
398
  */
468
- const versioning = new AuroDependencyVersioning$3();
399
+ const versioning = new AuroDependencyVersioning$2();
469
400
 
470
401
  /**
471
402
  * @private
@@ -475,7 +406,7 @@ class AuroButton extends r {
475
406
 
476
407
  static get styles() {
477
408
  return [
478
- tokensCss$7,
409
+ tokensCss$6,
479
410
  styleCss$9,
480
411
  colorCss$8
481
412
  ];
@@ -511,6 +442,9 @@ class AuroButton extends r {
511
442
  type: Boolean,
512
443
  reflect: true
513
444
  },
445
+ loadingText: {
446
+ type: String
447
+ },
514
448
  onDark: {
515
449
  type: Boolean,
516
450
  reflect: true
@@ -531,6 +465,10 @@ class AuroButton extends r {
531
465
  type: String,
532
466
  reflect: true
533
467
  },
468
+ ariaexpanded: {
469
+ type: Boolean,
470
+ reflect: true
471
+ },
534
472
  title: {
535
473
  type: String,
536
474
  reflect: true
@@ -560,7 +498,7 @@ class AuroButton extends r {
560
498
  *
561
499
  */
562
500
  static register(name = "auro-button") {
563
- AuroLibraryRuntimeUtils$7.prototype.registerComponent(name, AuroButton);
501
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
564
502
  }
565
503
 
566
504
  /**
@@ -602,12 +540,22 @@ class AuroButton extends r {
602
540
  this.notifyReady();
603
541
  }
604
542
 
543
+ /**
544
+ * Submits the form that this button is associated with.
545
+ * @private
546
+ * @returns {void}
547
+ */
605
548
  surfaceSubmitEvent() {
606
549
  if (this.form) {
607
550
  this.form.requestSubmit();
608
551
  }
609
552
  }
610
553
 
554
+ /**
555
+ * Returns the form element that this button is associated with.
556
+ * @private
557
+ * @returns {HTMLFormElement|null}
558
+ */
611
559
  get form() {
612
560
  return this.internals ? this.internals.form : null;
613
561
  }
@@ -627,8 +575,9 @@ class AuroButton extends r {
627
575
  return u`
628
576
  <button
629
577
  part="button"
630
- aria-label="${o(this.arialabel ? this.arialabel : undefined)}"
578
+ aria-label="${o(this.loading ? this.loadingText : this.arialabel || undefined)}"
631
579
  aria-labelledby="${o(this.arialabelledby ? this.arialabelledby : undefined)}"
580
+ aria-expanded="${o(this.ariaexpanded)}"
632
581
  ?autofocus="${this.autofocus}"
633
582
  class="${e(classes)}"
634
583
  ?disabled="${this.disabled || this.loading}"
@@ -656,76 +605,6 @@ class AuroButton extends r {
656
605
  }
657
606
  }
658
607
 
659
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
660
- // See LICENSE in the project root for license information.
661
-
662
- // ---------------------------------------------------------------------
663
-
664
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
665
-
666
- let AuroLibraryRuntimeUtils$5 = class AuroLibraryRuntimeUtils {
667
-
668
- /* eslint-disable jsdoc/require-param */
669
-
670
- /**
671
- * This will register a new custom element with the browser.
672
- * @param {String} name - The name of the custom element.
673
- * @param {Object} componentClass - The class to register as a custom element.
674
- * @returns {void}
675
- */
676
- registerComponent(name, componentClass) {
677
- if (!customElements.get(name)) {
678
- customElements.define(name, class extends componentClass {});
679
- }
680
- }
681
-
682
- /**
683
- * Finds and returns the closest HTML Element based on a selector.
684
- * @returns {void}
685
- */
686
- closestElement(
687
- selector, // selector like in .closest()
688
- base = this, // extra functionality to skip a parent
689
- __Closest = (el, found = el && el.closest(selector)) =>
690
- !el || el === document || el === window
691
- ? null // standard .closest() returns null for non-found selectors also
692
- : found
693
- ? found // found a selector INside this element
694
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
695
- ) {
696
- return __Closest(base);
697
- }
698
- /* eslint-enable jsdoc/require-param */
699
-
700
- /**
701
- * 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.
702
- * @param {Object} elem - The element to check.
703
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
704
- * @returns {void}
705
- */
706
- handleComponentTagRename(elem, tagName) {
707
- const tag = tagName.toLowerCase();
708
- const elemTag = elem.tagName.toLowerCase();
709
-
710
- if (elemTag !== tag) {
711
- elem.setAttribute(tag, true);
712
- }
713
- }
714
-
715
- /**
716
- * Validates if an element is a specific Auro component.
717
- * @param {Object} elem - The element to validate.
718
- * @param {String} tagName - The name of the Auro component to check against.
719
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
720
- */
721
- elementMatch(elem, tagName) {
722
- const tag = tagName.toLowerCase();
723
- const elemTag = elem.tagName.toLowerCase();
724
-
725
- return elemTag === tag || elem.hasAttribute(tag);
726
- }
727
- };
728
-
729
608
  // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
730
609
  // See LICENSE in the project root for license information.
731
610
 
@@ -737,7 +616,7 @@ class AuroCounterButton extends AuroButton {
737
616
  return [
738
617
  styleButtonCss,
739
618
  styleButtonColorCss,
740
- styleButtonTokenCss
619
+ tokensCss$7
741
620
  ];
742
621
  }
743
622
 
@@ -750,7 +629,7 @@ class AuroCounterButton extends AuroButton {
750
629
  *
751
630
  */
752
631
  static register(name = "auro-counter-button") {
753
- AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterButton);
632
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroCounterButton);
754
633
  }
755
634
  }
756
635
 
@@ -760,46 +639,6 @@ if (!customElements.get("auro-counter-button")) {
760
639
  customElements.define("auro-counter-button", AuroCounterButton);
761
640
  }
762
641
 
763
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
764
- // See LICENSE in the project root for license information.
765
-
766
-
767
- let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
768
-
769
- /**
770
- * Generates a unique string to be used for child auro element naming.
771
- * @private
772
- * @param {string} baseName - Defines the first part of the unique element name.
773
- * @param {string} version - Version of the component that will be appended to the baseName.
774
- * @returns {string} - Unique string to be used for naming.
775
- */
776
- generateElementName(baseName, version) {
777
- let result = baseName;
778
-
779
- result += '-';
780
- result += version.replace(/[.]/g, '_');
781
-
782
- return result;
783
- }
784
-
785
- /**
786
- * Generates a unique string to be used for child auro element naming.
787
- * @param {string} baseName - Defines the first part of the unique element name.
788
- * @param {string} version - Version of the component that will be appended to the baseName.
789
- * @returns {string} - Unique string to be used for naming.
790
- */
791
- generateTag(baseName, version, tagClass) {
792
- const elementName = this.generateElementName(baseName, version);
793
- const tag = i$1`${s(elementName)}`;
794
-
795
- if (!customElements.get(elementName)) {
796
- customElements.define(elementName, class extends tagClass {});
797
- }
798
-
799
- return tag;
800
- }
801
- };
802
-
803
642
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
804
643
  // See LICENSE in the project root for license information.
805
644
 
@@ -866,7 +705,7 @@ const cacheFetch$2 = (uri, options = {}) => {
866
705
  return _fetchMap$2.get(uri);
867
706
  };
868
707
 
869
- var styleCss$7 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
708
+ var styleCss$7 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
870
709
 
871
710
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
872
711
  // See LICENSE in the project root for license information.
@@ -874,7 +713,6 @@ var styleCss$7 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
874
713
 
875
714
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
876
715
  /**
877
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
878
716
  * @slot - Hidden from visibility, used for a11y if icon description is needed
879
717
  */
880
718
 
@@ -889,6 +727,10 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$2 {
889
727
  static get properties() {
890
728
  return {
891
729
  ...super.properties,
730
+
731
+ /**
732
+ * Set value for on-dark version of auro-icon.
733
+ */
892
734
  onDark: {
893
735
  type: Boolean,
894
736
  reflect: true
@@ -947,81 +789,11 @@ let BaseIcon$2 = class BaseIcon extends AuroElement$2 {
947
789
  }
948
790
  };
949
791
 
950
- var tokensCss$5 = i$5`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-default, #676767);--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
951
-
952
- var colorCss$6 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
953
-
954
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
955
- // See LICENSE in the project root for license information.
956
-
957
- // ---------------------------------------------------------------------
958
-
959
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
960
-
961
- let AuroLibraryRuntimeUtils$4 = class AuroLibraryRuntimeUtils {
792
+ var tokensCss$4 = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
962
793
 
963
- /* eslint-disable jsdoc/require-param */
794
+ var colorCss$6 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=fareOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-emerald, #139142)}:host(:not([onDark])[variant=fareOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=fareOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
964
795
 
965
- /**
966
- * This will register a new custom element with the browser.
967
- * @param {String} name - The name of the custom element.
968
- * @param {Object} componentClass - The class to register as a custom element.
969
- * @returns {void}
970
- */
971
- registerComponent(name, componentClass) {
972
- if (!customElements.get(name)) {
973
- customElements.define(name, class extends componentClass {});
974
- }
975
- }
976
-
977
- /**
978
- * Finds and returns the closest HTML Element based on a selector.
979
- * @returns {void}
980
- */
981
- closestElement(
982
- selector, // selector like in .closest()
983
- base = this, // extra functionality to skip a parent
984
- __Closest = (el, found = el && el.closest(selector)) =>
985
- !el || el === document || el === window
986
- ? null // standard .closest() returns null for non-found selectors also
987
- : found
988
- ? found // found a selector INside this element
989
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
990
- ) {
991
- return __Closest(base);
992
- }
993
- /* eslint-enable jsdoc/require-param */
994
-
995
- /**
996
- * 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.
997
- * @param {Object} elem - The element to check.
998
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
999
- * @returns {void}
1000
- */
1001
- handleComponentTagRename(elem, tagName) {
1002
- const tag = tagName.toLowerCase();
1003
- const elemTag = elem.tagName.toLowerCase();
1004
-
1005
- if (elemTag !== tag) {
1006
- elem.setAttribute(tag, true);
1007
- }
1008
- }
1009
-
1010
- /**
1011
- * Validates if an element is a specific Auro component.
1012
- * @param {Object} elem - The element to validate.
1013
- * @param {String} tagName - The name of the Auro component to check against.
1014
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
1015
- */
1016
- elementMatch(elem, tagName) {
1017
- const tag = tagName.toLowerCase();
1018
- const elemTag = elem.tagName.toLowerCase();
1019
-
1020
- return elemTag === tag || elem.hasAttribute(tag);
1021
- }
1022
- };
1023
-
1024
- // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
796
+ // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1025
797
  // See LICENSE in the project root for license information.
1026
798
 
1027
799
 
@@ -1029,6 +801,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
1029
801
  constructor() {
1030
802
  super();
1031
803
 
804
+ this.variant = undefined;
1032
805
  this.privateDefaults();
1033
806
  }
1034
807
 
@@ -1038,22 +811,8 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
1038
811
  * @returns {void}
1039
812
  */
1040
813
  privateDefaults() {
1041
- this.accent = false;
1042
- this.customColor = false;
1043
- this.customSvg = false;
1044
- this.disabled = false;
1045
- this.emphasis = false;
1046
- this.error = false;
1047
- this.info = false;
1048
- this.label = false;
1049
- this.primary = false;
1050
- this.secondary = false;
1051
- this.subtle = false;
1052
- this.success = false;
1053
- this.tertiary = false;
1054
- this.warning = false;
1055
814
  this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
1056
- this.runtimeUtils = new AuroLibraryRuntimeUtils$4();
815
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
1057
816
  }
1058
817
 
1059
818
  // function to define props used within the scope of this component
@@ -1061,14 +820,6 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
1061
820
  return {
1062
821
  ...super.properties,
1063
822
 
1064
- /**
1065
- * Sets the icon to use the accent style.
1066
- */
1067
- accent: {
1068
- type: Boolean,
1069
- reflect: true
1070
- },
1071
-
1072
823
  /**
1073
824
  * Set aria-hidden value. Default is `true`. Option is `false`.
1074
825
  */
@@ -1099,38 +850,6 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
1099
850
  type: Boolean
1100
851
  },
1101
852
 
1102
- /**
1103
- * Sets the icon to use the disabled style.
1104
- */
1105
- disabled: {
1106
- type: Boolean,
1107
- reflect: true
1108
- },
1109
-
1110
- /**
1111
- * Sets the icon to use the emphasis style.
1112
- */
1113
- emphasis: {
1114
- type: Boolean,
1115
- reflect: true
1116
- },
1117
-
1118
- /**
1119
- * Sets the icon to use the error style.
1120
- */
1121
- error: {
1122
- type: Boolean,
1123
- reflect: true
1124
- },
1125
-
1126
- /**
1127
- * Sets the icon to use the info style.
1128
- */
1129
- info: {
1130
- type: Boolean,
1131
- reflect: true
1132
- },
1133
-
1134
853
  /**
1135
854
  * Exposes content in slot as icon label.
1136
855
  */
@@ -1148,50 +867,10 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
1148
867
  },
1149
868
 
1150
869
  /**
1151
- * DEPRECATED: Sets the icon to use the baseline primary icon style.
1152
- */
1153
- primary: {
1154
- type: Boolean,
1155
- reflect: true
1156
- },
1157
-
1158
- /**
1159
- * Sets the icon to use the secondary style.
870
+ * The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `fareOneWorldEmerald`, `fareOneWorldSapphire`, `fareOneWorldRuby`.
1160
871
  */
1161
- secondary: {
1162
- type: Boolean,
1163
- reflect: true
1164
- },
1165
-
1166
- /**
1167
- * Sets the icon to use the subtle style.
1168
- */
1169
- subtle: {
1170
- type: Boolean,
1171
- reflect: true
1172
- },
1173
-
1174
- /**
1175
- * Sets the icon to use the success style.
1176
- */
1177
- success: {
1178
- type: Boolean,
1179
- reflect: true
1180
- },
1181
-
1182
- /**
1183
- * Sets the icon to use the tertiary style.
1184
- */
1185
- tertiary: {
1186
- type: Boolean,
1187
- reflect: true
1188
- },
1189
-
1190
- /**
1191
- * Sets the icon to use the warning style.
1192
- */
1193
- warning: {
1194
- type: Boolean,
872
+ variant: {
873
+ type: String,
1195
874
  reflect: true
1196
875
  }
1197
876
  };
@@ -1200,7 +879,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
1200
879
  static get styles() {
1201
880
  return [
1202
881
  super.styles,
1203
- i$5`${tokensCss$5}`,
882
+ i$5`${tokensCss$4}`,
1204
883
  i$5`${styleCss$7}`,
1205
884
  i$5`${colorCss$6}`
1206
885
  ];
@@ -1215,7 +894,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
1215
894
  *
1216
895
  */
1217
896
  static register(name = "auro-icon") {
1218
- AuroLibraryRuntimeUtils$4.prototype.registerComponent(name, AuroIcon);
897
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroIcon);
1219
898
  }
1220
899
 
1221
900
  connectedCallback() {
@@ -1281,7 +960,7 @@ let AuroIcon$2 = class AuroIcon extends BaseIcon$2 {
1281
960
  }
1282
961
  };
1283
962
 
1284
- var iconVersion$2 = '7.0.1';
963
+ var iconVersion$2 = '8.0.1';
1285
964
 
1286
965
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1287
966
  // See LICENSE in the project root for license information.
@@ -1289,7 +968,7 @@ var iconVersion$2 = '7.0.1';
1289
968
 
1290
969
  class AuroFormValidation {
1291
970
  constructor() {
1292
- this.runtimeUtils = new AuroLibraryRuntimeUtils$5();
971
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
1293
972
  }
1294
973
 
1295
974
  /**
@@ -1621,11 +1300,9 @@ var plusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width"
1621
1300
 
1622
1301
  var minusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"minus-lg","category":"interface","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><path d=\"M5.75 12.75h12.5a.75.75 0 1 0 0-1.5H5.75a.75.75 0 1 0 0 1.5\"/></svg>"};
1623
1302
 
1624
- var tokensCss$4 = i$5`:host{--ds-auro-counter-text-default: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-counter-text-secondary: var(--ds-color-text-secondary-default, #525252);--ds-auro-counter-text-disabled: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-counter-control-ui-active: var(--ds-color-ui-active-default, #054687);--ds-auro-counter-control-ui-hover: var(--ds-color-ui-hover-default, #054687);--ds-auro-counter-control-ui-disabled: var(--ds-color-ui-disabled-default, rgba(0, 116, 200, 0.2));--ds-auro-counter-control-ui-bkg: var(--ds-color-ui-bkg-default-default, rgba(0, 0, 0, 0.03));--ds-auro-counter-control-line-height: var(--ds-text-body-size-sm, 0.875rem);--ds-auro-counter-icon-color-default: var(--ds-color-ui-default-default, #0074c8);--ds-auro-counter-control-border-active: var(--ds-color-border-active-default, #0074c8)}`;
1303
+ var colorCss$5 = i$5`.label{color:var(--ds-auro-counter-label-text-color)}[name=description]::slotted(*){color:var(--ds-auro-counter-description-text-color)}.controlIcon{color:var(--ds-auro-counter-icon-color)}.quantityWrapper{background-color:var(--ds-auro-counter-control-background-color);color:var(--ds-auro-counter-quantity-text-color)}:host::part(counterControl):focus-visible{outline-color:var(--ds-auro-counter-control-border-color)}[disabled],:host([disabled]){--ds-auro-counter-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}[onDark],:host([onDark]){--ds-auro-counter-description-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-counter-control-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-counter-control-background-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-counter-icon-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}[onDark][disabled],:host([onDark][disabled]){--ds-auro-counter-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-counter-quantity-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-counter-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
1625
1304
 
1626
- var colorCss$5 = i$5`.counter{color:var(--ds-auro-counter-text-default)}[name=description]::slotted(*){color:var(--ds-auro-counter-text-secondary)}.controlIcon{color:var(--ds-auro-counter-icon-color-default)}.quantityWrapper{background-color:var(--ds-auro-counter-control-ui-bkg)}:host::part(counterControl):focus-visible{outline-color:var(--ds-auro-counter-control-border-active)}[disabled] .controlIcon,:host([disabled]) .controlIcon{color:var(--ds-auro-counter-control-ui-disabled)}[disabled] label,[disabled] [name=description]::slotted(*),[disabled]::part(counterControl),:host([disabled]) label,:host([disabled]) [name=description]::slotted(*),:host([disabled])::part(counterControl){color:var(--ds-auro-counter-text-disabled)}`;
1627
-
1628
- var styleCss$6 = i$5`.counter{display:flex;align-items:center;justify-content:space-between;column-gap:var(--ds-size-150, 0.75rem)}.content{display:flex;flex-flow:column}[name=description]::slotted(*){display:block;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}.quantityWrapper{width:var(--ds-size-400, 2rem);height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));align-content:center;cursor:default;font-size:var(--ds-size-250, 1.25rem);text-align:center}:host{position:relative}:host::part(counterControl){display:flex;border-radius:var(--ds-size-500, 2.5rem);line-height:0;touch-action:manipulation}:host::part(counterControl):focus-visible{outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem)}:host::part(controlMinus){--ds-auro-counter-control-border-radius: var(--ds-size-500, 2.5rem) 0 0 var(--ds-size-500, 2.5rem);--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem)}:host::part(controlPlus){--ds-auro-counter-control-border-radius: 0 var(--ds-size-500, 2.5rem) var(--ds-size-500, 2.5rem) 0;--ds-auro-counter-control-padding: var(--ds-size-50, 0.25rem) var(--ds-size-100, 0.5rem) var(--ds-size-50, 0.25rem) var(--ds-size-50, 0.25rem)}auro-counter-button{display:flex}`;
1305
+ var styleCss$6 = i$5`.counter{display:flex;align-items:center;justify-content:space-between;column-gap:var(--ds-size-150, 0.75rem)}.content{display:flex;flex-flow:column}[name=description]::slotted(*){display:block;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}.quantityWrapper{width:var(--ds-size-400, 2rem);height:calc(var(--ds-size-25, 0.125rem) + var(--ds-size-400, 2rem));align-content:center;cursor:default;font-size:var(--ds-size-250, 1.25rem);text-align:center}:host{position:relative}:host::part(counterControl){display:flex;border-radius:var(--ds-size-500, 2.5rem);line-height:0;touch-action:manipulation}:host::part(counterControl):focus-visible{outline-offset:0;outline-style:solid;outline-width:var(--ds-size-25, 0.125rem)}:host::part(controlMinus){--ds-auro-counter-control-border-radius: var(--ds-size-500, $ds-size-500) 0 0 var(--ds-size-500, $ds-size-500);--ds-auro-counter-control-padding: var(--ds-size-50, $ds-size-50) var(--ds-size-50, $ds-size-50) var(--ds-size-50, $ds-size-50) var(--ds-size-100, $ds-size-100)}:host::part(controlPlus){--ds-auro-counter-control-border-radius: 0 var(--ds-size-500, $ds-size-500) var(--ds-size-500, $ds-size-500) 0;--ds-auro-counter-control-padding: var(--ds-size-50, $ds-size-50) var(--ds-size-100, $ds-size-100) var(--ds-size-50, $ds-size-50) var(--ds-size-50, $ds-size-50)}auro-counter-button{display:flex}`;
1629
1306
 
1630
1307
  /* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
1631
1308
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
@@ -1653,6 +1330,7 @@ class AuroCounter extends r {
1653
1330
  this.disableMin = false;
1654
1331
  this.max = 9;
1655
1332
  this.min = 0;
1333
+ this.onDark = false;
1656
1334
  this.validity = undefined;
1657
1335
  this.value = undefined;
1658
1336
 
@@ -1750,6 +1428,14 @@ class AuroCounter extends r {
1750
1428
  reflect: true,
1751
1429
  },
1752
1430
 
1431
+ /**
1432
+ * If declared, the counter will be rendered with onDark styles.
1433
+ */
1434
+ onDark: {
1435
+ type: Boolean,
1436
+ reflect: true
1437
+ },
1438
+
1753
1439
  /**
1754
1440
  * The validity state of the counter.
1755
1441
  */
@@ -1774,12 +1460,12 @@ class AuroCounter extends r {
1774
1460
  * AuroCounter.register("custom-counter") // registers <custom-counter/>
1775
1461
  */
1776
1462
  static register(name = "auro-counter") {
1777
- AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounter);
1463
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroCounter);
1778
1464
  }
1779
1465
 
1780
1466
  static get styles() {
1781
1467
  return [
1782
- tokensCss$4,
1468
+ tokensCss$7,
1783
1469
  colorCss$5,
1784
1470
  styleCss$6
1785
1471
  ];
@@ -1924,6 +1610,7 @@ class AuroCounter extends r {
1924
1610
  tabindex="-1"
1925
1611
  part="controlMinus"
1926
1612
  @click="${() => this.decrement()}"
1613
+ ?onDark="${this.onDark}"
1927
1614
  ?disabled="${this.disabled || this.disableMin || this.isIncrementDisabled(this.min)}"
1928
1615
  >
1929
1616
  <${this.iconTag} class="controlIcon" slot="icon" customSvg> ${IconUtil.generateSvgHtml(minusIcon)} </${this.iconTag}>
@@ -1939,6 +1626,7 @@ class AuroCounter extends r {
1939
1626
  tabindex="-1"
1940
1627
  part="controlPlus"
1941
1628
  @click="${() => this.increment()}"
1629
+ ?onDark="${this.onDark}"
1942
1630
  ?disabled="${this.disabled || this.disableMax || this.isIncrementDisabled(this.max)}"
1943
1631
  >
1944
1632
  <${this.iconTag} class="controlIcon" slot="icon" customSvg> ${IconUtil.generateSvgHtml(plusIcon)} </${this.iconTag}>
@@ -1958,7 +1646,7 @@ var styleCss$5 = i$5`:host{position:relative;display:block}[slot=trigger],::slot
1958
1646
 
1959
1647
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
1960
1648
 
1961
- let AuroLibraryRuntimeUtils$2$1 = class AuroLibraryRuntimeUtils {
1649
+ let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
1962
1650
 
1963
1651
  /* eslint-disable jsdoc/require-param */
1964
1652
 
@@ -4259,7 +3947,7 @@ const cacheFetch$1 = (uri, options = {}) => {
4259
3947
  return _fetchMap$1.get(uri);
4260
3948
  };
4261
3949
 
4262
- var styleCss$3$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
3950
+ var styleCss$3$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
4263
3951
 
4264
3952
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4265
3953
  // See LICENSE in the project root for license information.
@@ -4267,7 +3955,6 @@ var styleCss$3$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}
4267
3955
 
4268
3956
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
4269
3957
  /**
4270
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
4271
3958
  * @slot - Hidden from visibility, used for a11y if icon description is needed
4272
3959
  */
4273
3960
 
@@ -4282,6 +3969,10 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
4282
3969
  static get properties() {
4283
3970
  return {
4284
3971
  ...super.properties,
3972
+
3973
+ /**
3974
+ * Set value for on-dark version of auro-icon.
3975
+ */
4285
3976
  onDark: {
4286
3977
  type: Boolean,
4287
3978
  reflect: true
@@ -4330,91 +4021,21 @@ let BaseIcon$1 = class BaseIcon extends AuroElement$1 {
4330
4021
  const svg = await this.fetchIcon(this.category, this.name);
4331
4022
 
4332
4023
  if (svg) {
4333
- this.svg = svg;
4334
- } else if (!svg) {
4335
- const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html');
4336
-
4337
- this.svg = penDOM.body.firstChild;
4338
- }
4339
- }
4340
- }
4341
- };
4342
-
4343
- var tokensCss$2 = i$5`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-default, #676767);--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
4344
-
4345
- var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
4346
-
4347
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
4348
- // See LICENSE in the project root for license information.
4349
-
4350
- // ---------------------------------------------------------------------
4351
-
4352
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
4353
-
4354
- let AuroLibraryRuntimeUtils$1$1 = class AuroLibraryRuntimeUtils {
4355
-
4356
- /* eslint-disable jsdoc/require-param */
4357
-
4358
- /**
4359
- * This will register a new custom element with the browser.
4360
- * @param {String} name - The name of the custom element.
4361
- * @param {Object} componentClass - The class to register as a custom element.
4362
- * @returns {void}
4363
- */
4364
- registerComponent(name, componentClass) {
4365
- if (!customElements.get(name)) {
4366
- customElements.define(name, class extends componentClass {});
4367
- }
4368
- }
4369
-
4370
- /**
4371
- * Finds and returns the closest HTML Element based on a selector.
4372
- * @returns {void}
4373
- */
4374
- closestElement(
4375
- selector, // selector like in .closest()
4376
- base = this, // extra functionality to skip a parent
4377
- __Closest = (el, found = el && el.closest(selector)) =>
4378
- !el || el === document || el === window
4379
- ? null // standard .closest() returns null for non-found selectors also
4380
- : found
4381
- ? found // found a selector INside this element
4382
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
4383
- ) {
4384
- return __Closest(base);
4385
- }
4386
- /* eslint-enable jsdoc/require-param */
4387
-
4388
- /**
4389
- * 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.
4390
- * @param {Object} elem - The element to check.
4391
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
4392
- * @returns {void}
4393
- */
4394
- handleComponentTagRename(elem, tagName) {
4395
- const tag = tagName.toLowerCase();
4396
- const elemTag = elem.tagName.toLowerCase();
4397
-
4398
- if (elemTag !== tag) {
4399
- elem.setAttribute(tag, true);
4400
- }
4401
- }
4402
-
4403
- /**
4404
- * Validates if an element is a specific Auro component.
4405
- * @param {Object} elem - The element to validate.
4406
- * @param {String} tagName - The name of the Auro component to check against.
4407
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
4408
- */
4409
- elementMatch(elem, tagName) {
4410
- const tag = tagName.toLowerCase();
4411
- const elemTag = elem.tagName.toLowerCase();
4024
+ this.svg = svg;
4025
+ } else if (!svg) {
4026
+ const penDOM = new DOMParser().parseFromString(error$1.svg, 'text/html');
4412
4027
 
4413
- return elemTag === tag || elem.hasAttribute(tag);
4028
+ this.svg = penDOM.body.firstChild;
4029
+ }
4030
+ }
4414
4031
  }
4415
4032
  };
4416
4033
 
4417
- // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4034
+ var tokensCss$2 = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
4035
+
4036
+ var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=fareOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-emerald, #139142)}:host(:not([onDark])[variant=fareOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=fareOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
4037
+
4038
+ // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4418
4039
  // See LICENSE in the project root for license information.
4419
4040
 
4420
4041
 
@@ -4422,6 +4043,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
4422
4043
  constructor() {
4423
4044
  super();
4424
4045
 
4046
+ this.variant = undefined;
4425
4047
  this.privateDefaults();
4426
4048
  }
4427
4049
 
@@ -4431,20 +4053,6 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
4431
4053
  * @returns {void}
4432
4054
  */
4433
4055
  privateDefaults() {
4434
- this.accent = false;
4435
- this.customColor = false;
4436
- this.customSvg = false;
4437
- this.disabled = false;
4438
- this.emphasis = false;
4439
- this.error = false;
4440
- this.info = false;
4441
- this.label = false;
4442
- this.primary = false;
4443
- this.secondary = false;
4444
- this.subtle = false;
4445
- this.success = false;
4446
- this.tertiary = false;
4447
- this.warning = false;
4448
4056
  this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
4449
4057
  this.runtimeUtils = new AuroLibraryRuntimeUtils$1$1();
4450
4058
  }
@@ -4454,14 +4062,6 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
4454
4062
  return {
4455
4063
  ...super.properties,
4456
4064
 
4457
- /**
4458
- * Sets the icon to use the accent style.
4459
- */
4460
- accent: {
4461
- type: Boolean,
4462
- reflect: true
4463
- },
4464
-
4465
4065
  /**
4466
4066
  * Set aria-hidden value. Default is `true`. Option is `false`.
4467
4067
  */
@@ -4492,38 +4092,6 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
4492
4092
  type: Boolean
4493
4093
  },
4494
4094
 
4495
- /**
4496
- * Sets the icon to use the disabled style.
4497
- */
4498
- disabled: {
4499
- type: Boolean,
4500
- reflect: true
4501
- },
4502
-
4503
- /**
4504
- * Sets the icon to use the emphasis style.
4505
- */
4506
- emphasis: {
4507
- type: Boolean,
4508
- reflect: true
4509
- },
4510
-
4511
- /**
4512
- * Sets the icon to use the error style.
4513
- */
4514
- error: {
4515
- type: Boolean,
4516
- reflect: true
4517
- },
4518
-
4519
- /**
4520
- * Sets the icon to use the info style.
4521
- */
4522
- info: {
4523
- type: Boolean,
4524
- reflect: true
4525
- },
4526
-
4527
4095
  /**
4528
4096
  * Exposes content in slot as icon label.
4529
4097
  */
@@ -4541,50 +4109,10 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
4541
4109
  },
4542
4110
 
4543
4111
  /**
4544
- * DEPRECATED: Sets the icon to use the baseline primary icon style.
4545
- */
4546
- primary: {
4547
- type: Boolean,
4548
- reflect: true
4549
- },
4550
-
4551
- /**
4552
- * Sets the icon to use the secondary style.
4553
- */
4554
- secondary: {
4555
- type: Boolean,
4556
- reflect: true
4557
- },
4558
-
4559
- /**
4560
- * Sets the icon to use the subtle style.
4561
- */
4562
- subtle: {
4563
- type: Boolean,
4564
- reflect: true
4565
- },
4566
-
4567
- /**
4568
- * Sets the icon to use the success style.
4569
- */
4570
- success: {
4571
- type: Boolean,
4572
- reflect: true
4573
- },
4574
-
4575
- /**
4576
- * Sets the icon to use the tertiary style.
4577
- */
4578
- tertiary: {
4579
- type: Boolean,
4580
- reflect: true
4581
- },
4582
-
4583
- /**
4584
- * Sets the icon to use the warning style.
4112
+ * The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `fareOneWorldEmerald`, `fareOneWorldSapphire`, `fareOneWorldRuby`.
4585
4113
  */
4586
- warning: {
4587
- type: Boolean,
4114
+ variant: {
4115
+ type: String,
4588
4116
  reflect: true
4589
4117
  }
4590
4118
  };
@@ -4680,7 +4208,7 @@ var styleCss$2$1 = i$5`:host{position:absolute;z-index:var(--depth-tooltip, 400)
4680
4208
 
4681
4209
  var colorCss$2$1 = i$5`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
4682
4210
 
4683
- var tokensCss$1 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-color-text-secondary-default, #525252);--ds-auro-dropdown-popover-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-popover-border-color: transparent;--ds-auro-dropdown-popover-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-color-container-primary-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-color-text-primary-default, #2a2a2a)}`;
4211
+ var tokensCss$1 = i$5`:host{--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: transparent;--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
4684
4212
 
4685
4213
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4686
4214
  // See LICENSE in the project root for license information.
@@ -4710,7 +4238,7 @@ class AuroDropdownBib extends r {
4710
4238
  */
4711
4239
  this._mobileBreakpointValue = undefined;
4712
4240
 
4713
- AuroLibraryRuntimeUtils$2$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
4241
+ AuroLibraryRuntimeUtils$1$1.prototype.handleComponentTagRename(this, 'auro-dropdownbib');
4714
4242
  }
4715
4243
 
4716
4244
  static get styles() {
@@ -4803,13 +4331,13 @@ var dropdownVersion$1 = '3.0.0';
4803
4331
 
4804
4332
  var styleCss$1$1 = i$5`:host{position:relative;display:inline-block;max-width:100%}:host([fluid]){display:block}#bibSizer{position:absolute;z-index:-1;opacity:0;pointer-events:none}.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}.label[hasTrigger=false]{font-size:var(--ds-text-body-size-default, 1rem)}.trigger{position:relative;display:flex;align-items:center}.trigger[showBorder]{border-width:1px;border-style:solid;cursor:pointer;outline-style:solid;outline-width:1px}@media(hover: hover){.trigger:hover{cursor:pointer}}.triggerContentWrapper{overflow:hidden;flex:1;text-overflow:ellipsis;white-space:nowrap}#showStateIcon{display:flex;overflow:hidden;height:100%;align-items:center;margin-left:var(--ds-size-100, 0.5rem)}#showStateIcon [auro-icon]{height:var(--ds-size-300, 1.5rem);line-height:var(--ds-size-300, 1.5rem)}#showStateIcon[data-expanded=true] [auro-icon]{transform:rotate(-180deg)}:host([matchwidth]) #bibSizer{width:100%}:host([disabled]){pointer-events:none}:host([inset]) .trigger{padding:var(--ds-size-150, 0.75rem) var(--ds-size-200, 1rem)}:host([common]) .trigger,:host([inset][bordered]) .trigger{padding:var(--ds-size-200, 1rem) var(--ds-size-150, 0.75rem)}:host([inset][bordered][labeled]) .trigger{padding:var(--ds-size-100, 0.5rem) var(--ds-size-150, 0.75rem)}:host([common]) .trigger,:host([rounded]) .trigger{border-radius:var(--ds-border-radius, 0.375rem)}`;
4805
4333
 
4806
- var colorCss$1$1 = i$5`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-active-default, #0074c8)}.trigger:focus-within:not(:active){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5);--ds-auro-dropdown-trigger-outline-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.trigger:hover{--ds-auro-dropdown-trigger-container-color: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03))}:host([disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-color-text-ui-disabled-default, #adadad);--ds-auro-dropdown-label-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-primary-default, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-focus-default, #2c67b5)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-error-default, #cc1816)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger:active{--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}:host([error]) .trigger:active{box-shadow:none;outline:none}:host([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-color-border-ui-disabled-default, #adadad)}`;
4334
+ var colorCss$1$1 = i$5`.label{color:var(--ds-auro-dropdown-label-text-color)}.trigger{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-container-color);color:var(--ds-auro-dropdown-trigger-text-color);outline-color:var(--ds-auro-dropdown-trigger-outline-color)}.trigger:focus-within,.trigger: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([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)}:host([common]),:host([bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67)}:host([common]) .trigger:active,:host([common]) .trigger:focus-within,:host([bordered]) .trigger:active,:host([bordered]) .trigger:focus-within{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([error]) .trigger:focus-within,:host([error]) .trigger: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([disabled][common]),:host([disabled][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host([onDark]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark]):focus-within,:host([onDark]):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)}:host([onDark][common]),:host([onDark][bordered]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([onDark][common]) .trigger:focus-within,:host([onDark][common]) .trigger:active,:host([onDark][bordered]) .trigger:focus-within,:host([onDark][bordered]) .trigger: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][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}:host([onDark][error]) .trigger{outline:solid 1px var(--ds-auro-dropdown-trigger-border-color)}:host([onDark][error]) .trigger:focus-within,:host([onDark][error]) .trigger: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][common]),:host([onDark][disabled][bordered]){--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}`;
4807
4335
 
4808
- var colorCss$4 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-color-text-error-default, #cc1816)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
4336
+ var colorCss$4 = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
4809
4337
 
4810
4338
  var styleCss$4 = i$5`.helptext-wrapper{display:none;font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-size-200, 1rem)}:host([large]) .helptext-wrapper{font-size:var(--ds-text-body-size-default, 1rem)}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
4811
4339
 
4812
- var tokensCss$3 = i$5`:host{--ds-auro-helptext-color: var(--ds-color-text-tertiary-default, #6a717c)}`;
4340
+ var tokensCss$3 = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
4813
4341
 
4814
4342
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
4815
4343
  // See LICENSE in the project root for license information.
@@ -4818,7 +4346,7 @@ var tokensCss$3 = i$5`:host{--ds-auro-helptext-color: var(--ds-color-text-tertia
4818
4346
 
4819
4347
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
4820
4348
 
4821
- let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
4349
+ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
4822
4350
 
4823
4351
  /* eslint-disable jsdoc/require-param */
4824
4352
 
@@ -4896,9 +4424,10 @@ class AuroHelpText extends r {
4896
4424
  super();
4897
4425
 
4898
4426
  this.error = false;
4427
+ this.onDark = false;
4899
4428
  this.hasTextContent = false;
4900
4429
 
4901
- AuroLibraryRuntimeUtils$3.prototype.handleComponentTagRename(this, 'auro-helptext');
4430
+ AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-helptext');
4902
4431
  }
4903
4432
 
4904
4433
  static get styles() {
@@ -4934,6 +4463,14 @@ class AuroHelpText extends r {
4934
4463
  type: Boolean,
4935
4464
  reflect: true,
4936
4465
  },
4466
+
4467
+ /**
4468
+ * If declared, will apply onDark styles.
4469
+ */
4470
+ onDark: {
4471
+ type: Boolean,
4472
+ reflect: true
4473
+ }
4937
4474
  };
4938
4475
  }
4939
4476
 
@@ -4946,7 +4483,7 @@ class AuroHelpText extends r {
4946
4483
  *
4947
4484
  */
4948
4485
  static register(name = "auro-helptext") {
4949
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroHelpText);
4486
+ AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroHelpText);
4950
4487
  }
4951
4488
 
4952
4489
  updated() {
@@ -5065,6 +4602,7 @@ class AuroDropdown extends r {
5065
4602
  this.tabIndex = 0;
5066
4603
  this.noToggle = false;
5067
4604
  this.labeled = true;
4605
+ this.onDark = false;
5068
4606
 
5069
4607
  // floaterConfig
5070
4608
  this.placement = 'bottom-start';
@@ -5085,7 +4623,7 @@ class AuroDropdown extends r {
5085
4623
  /**
5086
4624
  * @private
5087
4625
  */
5088
- this.runtimeUtils = new AuroLibraryRuntimeUtils$2$1();
4626
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$1$1();
5089
4627
 
5090
4628
  /**
5091
4629
  * @private
@@ -5321,6 +4859,14 @@ class AuroDropdown extends r {
5321
4859
  reflect: true
5322
4860
  },
5323
4861
 
4862
+ /**
4863
+ * If declared, onDark styles will be applied.
4864
+ */
4865
+ onDark: {
4866
+ type: Boolean,
4867
+ reflect: true
4868
+ },
4869
+
5324
4870
  onSlotChange: {
5325
4871
  type: Function,
5326
4872
  reflect: false
@@ -5374,7 +4920,7 @@ class AuroDropdown extends r {
5374
4920
  *
5375
4921
  */
5376
4922
  static register(name = "auro-dropdown") {
5377
- AuroLibraryRuntimeUtils$2$1.prototype.registerComponent(name, AuroDropdown);
4923
+ AuroLibraryRuntimeUtils$1$1.prototype.registerComponent(name, AuroDropdown);
5378
4924
  }
5379
4925
 
5380
4926
  connectedCallback() {
@@ -5691,14 +5237,14 @@ class AuroDropdown extends r {
5691
5237
  <${this.iconTag}
5692
5238
  category="interface"
5693
5239
  name="chevron-down"
5694
- customColor
5695
- ?disabled=${this.disabled}
5240
+ ?onDark="${this.onDark}"
5241
+ variant="${this.disabled ? 'disabled' : 'muted'}">
5696
5242
  >
5697
5243
  </${this.iconTag}>
5698
5244
  </div>
5699
5245
  ` : undefined }
5700
5246
  </div>
5701
- <${this.helpTextTag} part="helpText" ?error="${this.error}">
5247
+ <${this.helpTextTag} part="helpText" ?onDark=${this.onDark} ?error="${this.error}">
5702
5248
  <slot name="helpText"></slot>
5703
5249
  </${this.helpTextTag}>
5704
5250
  <div class="slotContent">
@@ -5723,9 +5269,9 @@ var dropdownVersion = '3.0.0';
5723
5269
 
5724
5270
  var colorCss$1 = i$5`#headerContainer{box-shadow:var(--ds-auro-dropdownbib-header-boxshadow-color)}#footerContainer{background-color:var(--ds-auro-dropdownbib-footer-container-color)}`;
5725
5271
 
5726
- var styleCss$2 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, $ds-size-500)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
5272
+ var styleCss$2 = i$5`#bibTemplate{display:flex;overflow:hidden;height:100%;max-height:100%;flex-direction:column}#headerContainer{display:flex;flex-direction:column}#header{display:flex;width:100%;min-height:var(--ds-size-1000, 5rem);box-sizing:border-box;align-items:end;padding-top:var(--ds-size-400, 2rem);padding-right:var(--ds-size-700, 3.5rem);padding-left:var(--ds-size-200, 1rem);pointer-events:none}#subheader{width:100%}#subheader ::slotted([auro-input]){padding:0 var(--ds-size-200, 1rem)}#closeButton{position:absolute;top:var(--ds-size-400, 2rem);right:var(--ds-size-200, 1rem);border:none;background-color:transparent;cursor:pointer}#closeButton [auro-icon]{--ds-auro-icon-size: var(--ds-size-500, 2.5rem)}#bodyContainer{position:relative;overflow:auto;flex:1 1 100%}:host([isfullscreen]) #bibTemplate{max-height:100dvh}:host([isfullscreen]) #bodyContainer{margin-top:var(--ds-size-100, 0.5rem)}#footerContainer{position:absolute;right:0;bottom:0;left:0;padding:var(--ds-size-200, 1rem)}`;
5727
5273
 
5728
- var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-color-container-primary-default, #ffffff)}`;
5274
+ var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-footer-container-color: var(--ds-basic-color-surface-default, #ffffff)}`;
5729
5275
 
5730
5276
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
5731
5277
  // See LICENSE in the project root for license information.
@@ -5734,7 +5280,7 @@ var tokenCss = i$5`:host{--ds-auro-dropdownbib-header-boxshadow-color: var(--ds-
5734
5280
 
5735
5281
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
5736
5282
 
5737
- let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
5283
+ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
5738
5284
 
5739
5285
  /* eslint-disable jsdoc/require-param */
5740
5286
 
@@ -5903,7 +5449,7 @@ const cacheFetch = (uri, options = {}) => {
5903
5449
  return _fetchMap.get(uri);
5904
5450
  };
5905
5451
 
5906
- var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
5452
+ var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem) !important;width:var(--ds-auro-icon-size, 1.5rem) !important;height:var(--ds-auro-icon-size, 1.5rem) !important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
5907
5453
 
5908
5454
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
5909
5455
  // See LICENSE in the project root for license information.
@@ -5911,7 +5457,6 @@ var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
5911
5457
 
5912
5458
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
5913
5459
  /**
5914
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
5915
5460
  * @slot - Hidden from visibility, used for a11y if icon description is needed
5916
5461
  */
5917
5462
 
@@ -5926,6 +5471,10 @@ class BaseIcon extends AuroElement {
5926
5471
  static get properties() {
5927
5472
  return {
5928
5473
  ...super.properties,
5474
+
5475
+ /**
5476
+ * Set value for on-dark version of auro-icon.
5477
+ */
5929
5478
  onDark: {
5930
5479
  type: Boolean,
5931
5480
  reflect: true
@@ -5984,81 +5533,11 @@ class BaseIcon extends AuroElement {
5984
5533
  }
5985
5534
  }
5986
5535
 
5987
- var tokensCss = i$5`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-default, #676767);--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
5988
-
5989
- var colorCss$2 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color:var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color:var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color:var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color:var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color:var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color:var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color:var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color:var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color:var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color:var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color:var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color:var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color:var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color:var(--ds-color-icon-warning-inverse, #f2c153)}`;
5990
-
5991
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
5992
- // See LICENSE in the project root for license information.
5993
-
5994
- // ---------------------------------------------------------------------
5995
-
5996
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
5997
-
5998
- let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
5999
-
6000
- /* eslint-disable jsdoc/require-param */
6001
-
6002
- /**
6003
- * This will register a new custom element with the browser.
6004
- * @param {String} name - The name of the custom element.
6005
- * @param {Object} componentClass - The class to register as a custom element.
6006
- * @returns {void}
6007
- */
6008
- registerComponent(name, componentClass) {
6009
- if (!customElements.get(name)) {
6010
- customElements.define(name, class extends componentClass {});
6011
- }
6012
- }
6013
-
6014
- /**
6015
- * Finds and returns the closest HTML Element based on a selector.
6016
- * @returns {void}
6017
- */
6018
- closestElement(
6019
- selector, // selector like in .closest()
6020
- base = this, // extra functionality to skip a parent
6021
- __Closest = (el, found = el && el.closest(selector)) =>
6022
- !el || el === document || el === window
6023
- ? null // standard .closest() returns null for non-found selectors also
6024
- : found
6025
- ? found // found a selector INside this element
6026
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
6027
- ) {
6028
- return __Closest(base);
6029
- }
6030
- /* eslint-enable jsdoc/require-param */
6031
-
6032
- /**
6033
- * 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.
6034
- * @param {Object} elem - The element to check.
6035
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
6036
- * @returns {void}
6037
- */
6038
- handleComponentTagRename(elem, tagName) {
6039
- const tag = tagName.toLowerCase();
6040
- const elemTag = elem.tagName.toLowerCase();
6041
-
6042
- if (elemTag !== tag) {
6043
- elem.setAttribute(tag, true);
6044
- }
6045
- }
5536
+ var tokensCss = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
6046
5537
 
6047
- /**
6048
- * Validates if an element is a specific Auro component.
6049
- * @param {Object} elem - The element to validate.
6050
- * @param {String} tagName - The name of the Auro component to check against.
6051
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
6052
- */
6053
- elementMatch(elem, tagName) {
6054
- const tag = tagName.toLowerCase();
6055
- const elemTag = elem.tagName.toLowerCase();
6056
-
6057
- return elemTag === tag || elem.hasAttribute(tag);
6058
- }
6059
- };
5538
+ var colorCss$2 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=fareOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-emerald, #139142)}:host(:not([onDark])[variant=fareOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=fareOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-fare-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}`;
6060
5539
 
6061
- // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
5540
+ // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
6062
5541
  // See LICENSE in the project root for license information.
6063
5542
 
6064
5543
 
@@ -6066,6 +5545,7 @@ class AuroIcon extends BaseIcon {
6066
5545
  constructor() {
6067
5546
  super();
6068
5547
 
5548
+ this.variant = undefined;
6069
5549
  this.privateDefaults();
6070
5550
  }
6071
5551
 
@@ -6075,20 +5555,6 @@ class AuroIcon extends BaseIcon {
6075
5555
  * @returns {void}
6076
5556
  */
6077
5557
  privateDefaults() {
6078
- this.accent = false;
6079
- this.customColor = false;
6080
- this.customSvg = false;
6081
- this.disabled = false;
6082
- this.emphasis = false;
6083
- this.error = false;
6084
- this.info = false;
6085
- this.label = false;
6086
- this.primary = false;
6087
- this.secondary = false;
6088
- this.subtle = false;
6089
- this.success = false;
6090
- this.tertiary = false;
6091
- this.warning = false;
6092
5558
  this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
6093
5559
  this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
6094
5560
  }
@@ -6098,14 +5564,6 @@ class AuroIcon extends BaseIcon {
6098
5564
  return {
6099
5565
  ...super.properties,
6100
5566
 
6101
- /**
6102
- * Sets the icon to use the accent style.
6103
- */
6104
- accent: {
6105
- type: Boolean,
6106
- reflect: true
6107
- },
6108
-
6109
5567
  /**
6110
5568
  * Set aria-hidden value. Default is `true`. Option is `false`.
6111
5569
  */
@@ -6136,38 +5594,6 @@ class AuroIcon extends BaseIcon {
6136
5594
  type: Boolean
6137
5595
  },
6138
5596
 
6139
- /**
6140
- * Sets the icon to use the disabled style.
6141
- */
6142
- disabled: {
6143
- type: Boolean,
6144
- reflect: true
6145
- },
6146
-
6147
- /**
6148
- * Sets the icon to use the emphasis style.
6149
- */
6150
- emphasis: {
6151
- type: Boolean,
6152
- reflect: true
6153
- },
6154
-
6155
- /**
6156
- * Sets the icon to use the error style.
6157
- */
6158
- error: {
6159
- type: Boolean,
6160
- reflect: true
6161
- },
6162
-
6163
- /**
6164
- * Sets the icon to use the info style.
6165
- */
6166
- info: {
6167
- type: Boolean,
6168
- reflect: true
6169
- },
6170
-
6171
5597
  /**
6172
5598
  * Exposes content in slot as icon label.
6173
5599
  */
@@ -6185,50 +5611,10 @@ class AuroIcon extends BaseIcon {
6185
5611
  },
6186
5612
 
6187
5613
  /**
6188
- * DEPRECATED: Sets the icon to use the baseline primary icon style.
6189
- */
6190
- primary: {
6191
- type: Boolean,
6192
- reflect: true
6193
- },
6194
-
6195
- /**
6196
- * Sets the icon to use the secondary style.
6197
- */
6198
- secondary: {
6199
- type: Boolean,
6200
- reflect: true
6201
- },
6202
-
6203
- /**
6204
- * Sets the icon to use the subtle style.
6205
- */
6206
- subtle: {
6207
- type: Boolean,
6208
- reflect: true
6209
- },
6210
-
6211
- /**
6212
- * Sets the icon to use the success style.
6213
- */
6214
- success: {
6215
- type: Boolean,
6216
- reflect: true
6217
- },
6218
-
6219
- /**
6220
- * Sets the icon to use the tertiary style.
6221
- */
6222
- tertiary: {
6223
- type: Boolean,
6224
- reflect: true
6225
- },
6226
-
6227
- /**
6228
- * Sets the icon to use the warning style.
5614
+ * The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `fareOneWorldEmerald`, `fareOneWorldSapphire`, `fareOneWorldRuby`.
6229
5615
  */
6230
- warning: {
6231
- type: Boolean,
5616
+ variant: {
5617
+ type: String,
6232
5618
  reflect: true
6233
5619
  }
6234
5620
  };
@@ -6318,7 +5704,7 @@ class AuroIcon extends BaseIcon {
6318
5704
  }
6319
5705
  }
6320
5706
 
6321
- var iconVersion = '7.0.1';
5707
+ var iconVersion = '8.0.1';
6322
5708
 
6323
5709
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
6324
5710
  // See LICENSE in the project root for license information.
@@ -6543,7 +5929,7 @@ class AuroBibtemplate extends r {
6543
5929
  constructor() {
6544
5930
  super();
6545
5931
 
6546
- AuroLibraryRuntimeUtils$2.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
5932
+ AuroLibraryRuntimeUtils$1.prototype.handleComponentTagRename(this, 'auro-bibtemplate');
6547
5933
 
6548
5934
  const versioning = new AuroDependencyVersioning();
6549
5935
  this.iconTag = versioning.generateTag('auro-formkit-bibtemplate-icon', iconVersion, AuroIcon);
@@ -6582,7 +5968,7 @@ class AuroBibtemplate extends r {
6582
5968
  *
6583
5969
  */
6584
5970
  static register(name = "auro-bibtemplate") {
6585
- AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroBibtemplate);
5971
+ AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroBibtemplate);
6586
5972
  }
6587
5973
 
6588
5974
  /**
@@ -6656,7 +6042,7 @@ var bibTemplateVersion = '1.0.0';
6656
6042
 
6657
6043
  var styleCss = i$5`.wrapper{display:flex;flex-direction:column;gap:var(--ds-size-300, 1.5rem)}.wrapper ::slotted(*:not(:first-child)){padding-top:var(--ds-size-300, 1.5rem);border-top-width:1px;border-top-style:solid}:host([isindropdown]) .wrapper{padding:var(--ds-size-300, 1.5rem)}`;
6658
6044
 
6659
- var colorCss = i$5`:host ::slotted(*:not(:first-child)){border-color:var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12))}`;
6045
+ var colorCss = i$5`:host ::slotted(*:not(:first-child)){border-color:var(--ds-auro-counter-divider-color)}`;
6660
6046
 
6661
6047
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
6662
6048
  // See LICENSE in the project root for license information.
@@ -6677,7 +6063,8 @@ class AuroCounterWrapper extends r {
6677
6063
  static get styles() {
6678
6064
  return [
6679
6065
  colorCss,
6680
- styleCss
6066
+ styleCss,
6067
+ tokensCss$7
6681
6068
  ];
6682
6069
  }
6683
6070
 
@@ -6688,7 +6075,7 @@ class AuroCounterWrapper extends r {
6688
6075
  * AuroCounterWrapper.register("custom-counter-wrapper") // registers <custom-counter-wrapper/>
6689
6076
  */
6690
6077
  static register(name = "auro-counter-wrapper") {
6691
- AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterWrapper);
6078
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroCounterWrapper);
6692
6079
  }
6693
6080
 
6694
6081
  // function that renders the HTML and CSS into the scope of the component
@@ -6728,6 +6115,7 @@ class AuroCounterGroup extends r {
6728
6115
  this.isDropdown = false;
6729
6116
  this.max = undefined;
6730
6117
  this.min = undefined;
6118
+ this.onDark = false;
6731
6119
  this.total = undefined;
6732
6120
  this.validity = undefined;
6733
6121
  this.value = undefined;
@@ -6825,7 +6213,7 @@ class AuroCounterGroup extends r {
6825
6213
 
6826
6214
  /**
6827
6215
  * If declared, make bib.fullscreen.headline in HeadingDisplay.
6828
- * Otherwise, Heading 600
6216
+ * Otherwise, Heading 600.
6829
6217
  */
6830
6218
  largeFullscreenHeadline: {
6831
6219
  type: Boolean,
@@ -6851,6 +6239,14 @@ class AuroCounterGroup extends r {
6851
6239
  reflect: true
6852
6240
  },
6853
6241
 
6242
+ /**
6243
+ * If declared, counters and dropdown will be rendered with onDark styles.
6244
+ */
6245
+ onDark: {
6246
+ type: Boolean,
6247
+ reflect: true
6248
+ },
6249
+
6854
6250
  /**
6855
6251
  * Position where the bib should appear relative to the trigger.
6856
6252
  * Accepted values:
@@ -6962,6 +6358,7 @@ class AuroCounterGroup extends r {
6962
6358
  configureCounters() {
6963
6359
  this.counters = this.querySelectorAll("auro-counter, [auro-counter]");
6964
6360
  this.counters.forEach((counter) => {
6361
+ counter.onDark = this.onDark;
6965
6362
  counter.addEventListener("input", () => this.updateValue());
6966
6363
  });
6967
6364
  }
@@ -7011,11 +6408,11 @@ class AuroCounterGroup extends r {
7011
6408
  }
7012
6409
 
7013
6410
  /**
7014
- * @private
7015
6411
  * This sets up a close event listener and moves any slotted `bib.fullscreen.headline` and `bib.fullscreen.footer` content into the bibtemplate.
6412
+ * @private
7016
6413
  */
7017
6414
  configureBibtemplate() {
7018
- this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$); // eslint-disable-line no-underscore-dangle
6415
+ this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
7019
6416
  this.bibtemplate.addEventListener('close-click', () => {
7020
6417
  if (this.dropdown.isPopoverVisible) {
7021
6418
  this.dropdown.hide();
@@ -7112,6 +6509,10 @@ class AuroCounterGroup extends r {
7112
6509
  }
7113
6510
  );
7114
6511
  }
6512
+
6513
+ if (changedProperties.has("onDark") && !this.isDropdown) {
6514
+ this.configureCounters();
6515
+ }
7115
6516
  }
7116
6517
 
7117
6518
  /**
@@ -7121,7 +6522,7 @@ class AuroCounterGroup extends r {
7121
6522
  * AuroCounterGroup.register("custom-counter-group") // registers <custom-counter-group/>
7122
6523
  */
7123
6524
  static register(name = "auro-counter-group") {
7124
- AuroLibraryRuntimeUtils$5.prototype.registerComponent(name, AuroCounterGroup);
6525
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroCounterGroup);
7125
6526
  }
7126
6527
 
7127
6528
  // function that renders the HTML and CSS into the scope of the component
@@ -7132,6 +6533,7 @@ class AuroCounterGroup extends r {
7132
6533
  .fullscreenBreakpoint="${this.fullscreenBreakpoint}"
7133
6534
  .placement="${this.placement}"
7134
6535
  .offset="${this.offset}"
6536
+ ?onDark="${this.onDark}"
7135
6537
  ?autoPlacement="${this.autoPlacement}"
7136
6538
  ?noFlip="${this.noFlip}">
7137
6539
  <div slot="trigger"><slot name="valueText">