@aurodesignsystem/auro-accordion 5.0.2 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/demo/api.min.js CHANGED
@@ -63,7 +63,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
63
63
 
64
64
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
65
65
 
66
- let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
66
+ class AuroLibraryRuntimeUtils {
67
67
 
68
68
  /* eslint-disable jsdoc/require-param */
69
69
 
@@ -124,7 +124,7 @@ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
124
124
 
125
125
  return elemTag === tag || elem.hasAttribute(tag);
126
126
  }
127
- };
127
+ }
128
128
 
129
129
  // Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
130
130
  // See LICENSE in the project root for license information.
@@ -148,7 +148,7 @@ class AuroAccordionGroup extends r {
148
148
  /**
149
149
  * @private
150
150
  */
151
- this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
151
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
152
152
  }
153
153
 
154
154
  // This function is to define props used within the scope of this component
@@ -178,7 +178,7 @@ class AuroAccordionGroup extends r {
178
178
  *
179
179
  */
180
180
  static register(name = "auro-accordion-group") {
181
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroAccordionGroup);
181
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionGroup);
182
182
  }
183
183
 
184
184
  firstUpdated() {
@@ -250,9 +250,9 @@ class AuroAccordionGroup extends r {
250
250
  }
251
251
  }
252
252
 
253
- var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) 0;cursor:pointer;pointer-events:none}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host(.sm) .auro-button{padding:var(--ds-size-100, 0.5rem) 0}:host(.lg) .auro-button{padding:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) 0}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
253
+ var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .auroButton{all:unset;width:100%;padding:var(--ds-size-200, 1rem) var(--trigger-padding-right, 0) var(--ds-size-200, 1rem) var(--trigger-padding-left, 0);box-sizing:border-box;cursor:pointer;pointer-events:none}:host .auroButton:focus,:host .auroButton:focus-visible,:host .auroButton:focus-within{outline:0}:host .auroButton:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host(.sm) .auro-button{padding-top:var(--ds-size-150, 0.75rem);padding-bottom:var(--ds-size-150, 0.75rem)}:host(.lg) .auro-button{padding-top:var(--ds-size-250, 1.25rem);padding-bottom:var(--ds-size-250, 1.25rem)}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
254
254
 
255
- var styleCssAuroButton = 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}`;
255
+ var styleCssAuroButton = 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}`;
256
256
 
257
257
  /**
258
258
  * @license
@@ -264,7 +264,7 @@ var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transp
264
264
  // See LICENSE in the project root for license information.
265
265
 
266
266
 
267
- let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
267
+ class AuroDependencyVersioning {
268
268
 
269
269
  /**
270
270
  * Generates a unique string to be used for child auro element naming.
@@ -298,155 +298,15 @@ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
298
298
 
299
299
  return tag;
300
300
  }
301
- };
302
-
303
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
304
- // See LICENSE in the project root for license information.
305
-
306
- // ---------------------------------------------------------------------
307
-
308
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
309
-
310
- let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
311
-
312
- /* eslint-disable jsdoc/require-param */
313
-
314
- /**
315
- * This will register a new custom element with the browser.
316
- * @param {String} name - The name of the custom element.
317
- * @param {Object} componentClass - The class to register as a custom element.
318
- * @returns {void}
319
- */
320
- registerComponent(name, componentClass) {
321
- if (!customElements.get(name)) {
322
- customElements.define(name, class extends componentClass {});
323
- }
324
- }
325
-
326
- /**
327
- * Finds and returns the closest HTML Element based on a selector.
328
- * @returns {void}
329
- */
330
- closestElement(
331
- selector, // selector like in .closest()
332
- base = this, // extra functionality to skip a parent
333
- __Closest = (el, found = el && el.closest(selector)) =>
334
- !el || el === document || el === window
335
- ? null // standard .closest() returns null for non-found selectors also
336
- : found
337
- ? found // found a selector INside this element
338
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
339
- ) {
340
- return __Closest(base);
341
- }
342
- /* eslint-enable jsdoc/require-param */
343
-
344
- /**
345
- * 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.
346
- * @param {Object} elem - The element to check.
347
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
348
- * @returns {void}
349
- */
350
- handleComponentTagRename(elem, tagName) {
351
- const tag = tagName.toLowerCase();
352
- const elemTag = elem.tagName.toLowerCase();
353
-
354
- if (elemTag !== tag) {
355
- elem.setAttribute(tag, true);
356
- }
357
- }
358
-
359
- /**
360
- * Validates if an element is a specific Auro component.
361
- * @param {Object} elem - The element to validate.
362
- * @param {String} tagName - The name of the Auro component to check against.
363
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
364
- */
365
- elementMatch(elem, tagName) {
366
- const tag = tagName.toLowerCase();
367
- const elemTag = elem.tagName.toLowerCase();
368
-
369
- return elemTag === tag || elem.hasAttribute(tag);
370
- }
371
- };
372
-
373
- var colorCss$3 = 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}`;
374
-
375
- var tokensCss$3 = 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}`;
376
-
377
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
378
- // See LICENSE in the project root for license information.
379
-
380
- // ---------------------------------------------------------------------
381
-
382
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
383
-
384
- let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
385
-
386
- /* eslint-disable jsdoc/require-param */
387
-
388
- /**
389
- * This will register a new custom element with the browser.
390
- * @param {String} name - The name of the custom element.
391
- * @param {Object} componentClass - The class to register as a custom element.
392
- * @returns {void}
393
- */
394
- registerComponent(name, componentClass) {
395
- if (!customElements.get(name)) {
396
- customElements.define(name, class extends componentClass {});
397
- }
398
- }
399
-
400
- /**
401
- * Finds and returns the closest HTML Element based on a selector.
402
- * @returns {void}
403
- */
404
- closestElement(
405
- selector, // selector like in .closest()
406
- base = this, // extra functionality to skip a parent
407
- __Closest = (el, found = el && el.closest(selector)) =>
408
- !el || el === document || el === window
409
- ? null // standard .closest() returns null for non-found selectors also
410
- : found
411
- ? found // found a selector INside this element
412
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
413
- ) {
414
- return __Closest(base);
415
- }
416
- /* eslint-enable jsdoc/require-param */
417
-
418
- /**
419
- * 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.
420
- * @param {Object} elem - The element to check.
421
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
422
- * @returns {void}
423
- */
424
- handleComponentTagRename(elem, tagName) {
425
- const tag = tagName.toLowerCase();
426
- const elemTag = elem.tagName.toLowerCase();
427
-
428
- if (elemTag !== tag) {
429
- elem.setAttribute(tag, true);
430
- }
431
- }
301
+ }
432
302
 
433
- /**
434
- * Validates if an element is a specific Auro component.
435
- * @param {Object} elem - The element to validate.
436
- * @param {String} tagName - The name of the Auro component to check against.
437
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
438
- */
439
- elementMatch(elem, tagName) {
440
- const tag = tagName.toLowerCase();
441
- const elemTag = elem.tagName.toLowerCase();
303
+ var colorCss$3 = 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}`;
442
304
 
443
- return elemTag === tag || elem.hasAttribute(tag);
444
- }
445
- };
305
+ var tokensCss$3 = 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}`;
446
306
 
447
307
  var styleCss$2 = 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}}`;
448
308
 
449
- var colorCss$2 = 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}`;
309
+ var colorCss$2 = 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}`;
450
310
 
451
311
  var tokensCss$2 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
452
312
 
@@ -454,25 +314,6 @@ var tokensCss$2 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-
454
314
  // See LICENSE in the project root for license information.
455
315
 
456
316
 
457
- // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
458
- /**
459
- * The auro-loader element is an easy to use animated loader component.
460
- *
461
- * @attr {Boolean} pulse - sets loader type
462
- * @attr {Boolean} ringworm - sets loader type
463
- * @attr {Boolean} laser - sets loader type
464
- * @attr {Boolean} orbit - sets loader type
465
- * @attr {Boolean} white - sets color of loader to white
466
- * @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
467
- * @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
468
- * @attr {Boolean} xs - sets size to extra small
469
- * @attr {Boolean} sm - sets size to small
470
- * @attr {Boolean} md - sets size to medium
471
- * @attr {Boolean} lg - sets size to large
472
- * @csspart element - apply style to adjust speed of animation
473
- */
474
-
475
- // build the component class
476
317
  class AuroLoader extends r {
477
318
  constructor() {
478
319
  super();
@@ -495,7 +336,7 @@ class AuroLoader extends r {
495
336
  /**
496
337
  * @private
497
338
  */
498
- this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
339
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
499
340
 
500
341
  this.orbit = false;
501
342
  this.ringworm = false;
@@ -506,19 +347,35 @@ class AuroLoader extends r {
506
347
  // function to define props used within the scope of this component
507
348
  static get properties() {
508
349
  return {
509
- pulse: {
350
+
351
+ /**
352
+ * Sets loader to laser type.
353
+ */
354
+ laser: {
510
355
  type: Boolean,
511
356
  reflect: true
512
357
  },
358
+
359
+ /**
360
+ * Sets loader to orbit type.
361
+ */
513
362
  orbit: {
514
363
  type: Boolean,
515
364
  reflect: true
516
365
  },
517
- ringworm: {
366
+
367
+ /**
368
+ * Sets loader to pulse type.
369
+ */
370
+ pulse: {
518
371
  type: Boolean,
519
372
  reflect: true
520
373
  },
521
- laser: {
374
+
375
+ /**
376
+ * Sets loader to ringworm type.
377
+ */
378
+ ringworm: {
522
379
  type: Boolean,
523
380
  reflect: true
524
381
  }
@@ -542,7 +399,7 @@ class AuroLoader extends r {
542
399
  *
543
400
  */
544
401
  static register(name = "auro-loader") {
545
- AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
402
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
546
403
  }
547
404
 
548
405
  firstUpdated() {
@@ -592,17 +449,19 @@ class AuroLoader extends r {
592
449
  }
593
450
  }
594
451
 
595
- var loaderVersion = '4.0.0';
452
+ var loaderVersion = '5.0.0';
596
453
 
454
+ /* eslint-disable max-lines */
597
455
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
598
456
  // See LICENSE in the project root for license information.
599
457
 
600
458
 
601
459
  /**
602
460
  * @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
603
- * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
461
+ * @attr {Boolean} disabled - If set to true, button will become disabled and not allow for interactions
604
462
  * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
605
463
  * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
464
+ * @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.
606
465
  * @attr {Boolean} onDark - Set value for on-dark version of auro-button
607
466
  * @attr {Boolean} rounded - If set to true, the button will have a rounded shape
608
467
  * @attr {Boolean} slim - Set value for slim version of auro-button
@@ -654,6 +513,7 @@ class AuroButton extends r {
654
513
  this.rounded = false;
655
514
  this.slim = false;
656
515
  this.fluid = false;
516
+ this.loadingText = this.loadingText || 'Loading...';
657
517
 
658
518
  // Support for HTML5 forms
659
519
  if (typeof this.attachInternals === 'function') {
@@ -668,7 +528,7 @@ class AuroButton extends r {
668
528
  /**
669
529
  * Generate unique names for dependency components.
670
530
  */
671
- const versioning = new AuroDependencyVersioning$1();
531
+ const versioning = new AuroDependencyVersioning();
672
532
 
673
533
  /**
674
534
  * @private
@@ -714,6 +574,9 @@ class AuroButton extends r {
714
574
  type: Boolean,
715
575
  reflect: true
716
576
  },
577
+ loadingText: {
578
+ type: String
579
+ },
717
580
  onDark: {
718
581
  type: Boolean,
719
582
  reflect: true
@@ -767,7 +630,7 @@ class AuroButton extends r {
767
630
  *
768
631
  */
769
632
  static register(name = "auro-button") {
770
- AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
633
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
771
634
  }
772
635
 
773
636
  /**
@@ -809,12 +672,22 @@ class AuroButton extends r {
809
672
  this.notifyReady();
810
673
  }
811
674
 
675
+ /**
676
+ * Submits the form that this button is associated with.
677
+ * @private
678
+ * @returns {void}
679
+ */
812
680
  surfaceSubmitEvent() {
813
681
  if (this.form) {
814
682
  this.form.requestSubmit();
815
683
  }
816
684
  }
817
685
 
686
+ /**
687
+ * Returns the form element that this button is associated with.
688
+ * @private
689
+ * @returns {HTMLFormElement|null}
690
+ */
818
691
  get form() {
819
692
  return this.internals ? this.internals.form : null;
820
693
  }
@@ -834,7 +707,7 @@ class AuroButton extends r {
834
707
  return u`
835
708
  <button
836
709
  part="button"
837
- aria-label="${o(this.arialabel ? this.arialabel : undefined)}"
710
+ aria-label="${o(this.loading ? this.loadingText : this.arialabel || undefined)}"
838
711
  aria-labelledby="${o(this.arialabelledby ? this.arialabelledby : undefined)}"
839
712
  aria-expanded="${o(this.ariaexpanded)}"
840
713
  ?autofocus="${this.autofocus}"
@@ -896,47 +769,7 @@ class AuroAccordionButton extends AuroButton {
896
769
  *
897
770
  */
898
771
  static register(name = "auro-accordion-button") {
899
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroAccordionButton);
900
- }
901
- }
902
-
903
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
904
- // See LICENSE in the project root for license information.
905
-
906
-
907
- class AuroDependencyVersioning {
908
-
909
- /**
910
- * Generates a unique string to be used for child auro element naming.
911
- * @private
912
- * @param {string} baseName - Defines the first part of the unique element name.
913
- * @param {string} version - Version of the component that will be appended to the baseName.
914
- * @returns {string} - Unique string to be used for naming.
915
- */
916
- generateElementName(baseName, version) {
917
- let result = baseName;
918
-
919
- result += '-';
920
- result += version.replace(/[.]/g, '_');
921
-
922
- return result;
923
- }
924
-
925
- /**
926
- * Generates a unique string to be used for child auro element naming.
927
- * @param {string} baseName - Defines the first part of the unique element name.
928
- * @param {string} version - Version of the component that will be appended to the baseName.
929
- * @returns {string} - Unique string to be used for naming.
930
- */
931
- generateTag(baseName, version, tagClass) {
932
- const elementName = this.generateElementName(baseName, version);
933
- const tag = i$1`${s(elementName)}`;
934
-
935
- if (!customElements.get(elementName)) {
936
- customElements.define(elementName, class extends tagClass {});
937
- }
938
-
939
- return tag;
772
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionButton);
940
773
  }
941
774
  }
942
775
 
@@ -1006,7 +839,7 @@ const cacheFetch = (uri, options = {}) => {
1006
839
  return _fetchMap.get(uri);
1007
840
  };
1008
841
 
1009
- 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}`;
842
+ 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}`;
1010
843
 
1011
844
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1012
845
  // See LICENSE in the project root for license information.
@@ -1014,7 +847,6 @@ var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
1014
847
 
1015
848
  // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
1016
849
  /**
1017
- * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
1018
850
  * @slot - Hidden from visibility, used for a11y if icon description is needed
1019
851
  */
1020
852
 
@@ -1029,6 +861,10 @@ class BaseIcon extends AuroElement {
1029
861
  static get properties() {
1030
862
  return {
1031
863
  ...super.properties,
864
+
865
+ /**
866
+ * Set value for on-dark version of auro-icon.
867
+ */
1032
868
  onDark: {
1033
869
  type: Boolean,
1034
870
  reflect: true
@@ -1087,81 +923,11 @@ class BaseIcon extends AuroElement {
1087
923
  }
1088
924
  }
1089
925
 
1090
- var tokensCss$1 = i$5`:host{--ds-auro-icon-color:var(--ds-color-icon-primary-default, #676767);--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
1091
-
1092
- var colorCss$1 = 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)}`;
1093
-
1094
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
1095
- // See LICENSE in the project root for license information.
1096
-
1097
- // ---------------------------------------------------------------------
1098
-
1099
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
1100
-
1101
- class AuroLibraryRuntimeUtils {
1102
-
1103
- /* eslint-disable jsdoc/require-param */
1104
-
1105
- /**
1106
- * This will register a new custom element with the browser.
1107
- * @param {String} name - The name of the custom element.
1108
- * @param {Object} componentClass - The class to register as a custom element.
1109
- * @returns {void}
1110
- */
1111
- registerComponent(name, componentClass) {
1112
- if (!customElements.get(name)) {
1113
- customElements.define(name, class extends componentClass {});
1114
- }
1115
- }
1116
-
1117
- /**
1118
- * Finds and returns the closest HTML Element based on a selector.
1119
- * @returns {void}
1120
- */
1121
- closestElement(
1122
- selector, // selector like in .closest()
1123
- base = this, // extra functionality to skip a parent
1124
- __Closest = (el, found = el && el.closest(selector)) =>
1125
- !el || el === document || el === window
1126
- ? null // standard .closest() returns null for non-found selectors also
1127
- : found
1128
- ? found // found a selector INside this element
1129
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
1130
- ) {
1131
- return __Closest(base);
1132
- }
1133
- /* eslint-enable jsdoc/require-param */
1134
-
1135
- /**
1136
- * 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.
1137
- * @param {Object} elem - The element to check.
1138
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
1139
- * @returns {void}
1140
- */
1141
- handleComponentTagRename(elem, tagName) {
1142
- const tag = tagName.toLowerCase();
1143
- const elemTag = elem.tagName.toLowerCase();
1144
-
1145
- if (elemTag !== tag) {
1146
- elem.setAttribute(tag, true);
1147
- }
1148
- }
926
+ var tokensCss$1 = 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)}`;
1149
927
 
1150
- /**
1151
- * Validates if an element is a specific Auro component.
1152
- * @param {Object} elem - The element to validate.
1153
- * @param {String} tagName - The name of the Auro component to check against.
1154
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
1155
- */
1156
- elementMatch(elem, tagName) {
1157
- const tag = tagName.toLowerCase();
1158
- const elemTag = elem.tagName.toLowerCase();
928
+ var colorCss$1 = 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)}`;
1159
929
 
1160
- return elemTag === tag || elem.hasAttribute(tag);
1161
- }
1162
- }
1163
-
1164
- // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
930
+ // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1165
931
  // See LICENSE in the project root for license information.
1166
932
 
1167
933
 
@@ -1169,6 +935,7 @@ class AuroIcon extends BaseIcon {
1169
935
  constructor() {
1170
936
  super();
1171
937
 
938
+ this.variant = undefined;
1172
939
  this.privateDefaults();
1173
940
  }
1174
941
 
@@ -1178,20 +945,6 @@ class AuroIcon extends BaseIcon {
1178
945
  * @returns {void}
1179
946
  */
1180
947
  privateDefaults() {
1181
- this.accent = false;
1182
- this.customColor = false;
1183
- this.customSvg = false;
1184
- this.disabled = false;
1185
- this.emphasis = false;
1186
- this.error = false;
1187
- this.info = false;
1188
- this.label = false;
1189
- this.primary = false;
1190
- this.secondary = false;
1191
- this.subtle = false;
1192
- this.success = false;
1193
- this.tertiary = false;
1194
- this.warning = false;
1195
948
  this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
1196
949
  this.runtimeUtils = new AuroLibraryRuntimeUtils();
1197
950
  }
@@ -1201,14 +954,6 @@ class AuroIcon extends BaseIcon {
1201
954
  return {
1202
955
  ...super.properties,
1203
956
 
1204
- /**
1205
- * Sets the icon to use the accent style.
1206
- */
1207
- accent: {
1208
- type: Boolean,
1209
- reflect: true
1210
- },
1211
-
1212
957
  /**
1213
958
  * Set aria-hidden value. Default is `true`. Option is `false`.
1214
959
  */
@@ -1239,38 +984,6 @@ class AuroIcon extends BaseIcon {
1239
984
  type: Boolean
1240
985
  },
1241
986
 
1242
- /**
1243
- * Sets the icon to use the disabled style.
1244
- */
1245
- disabled: {
1246
- type: Boolean,
1247
- reflect: true
1248
- },
1249
-
1250
- /**
1251
- * Sets the icon to use the emphasis style.
1252
- */
1253
- emphasis: {
1254
- type: Boolean,
1255
- reflect: true
1256
- },
1257
-
1258
- /**
1259
- * Sets the icon to use the error style.
1260
- */
1261
- error: {
1262
- type: Boolean,
1263
- reflect: true
1264
- },
1265
-
1266
- /**
1267
- * Sets the icon to use the info style.
1268
- */
1269
- info: {
1270
- type: Boolean,
1271
- reflect: true
1272
- },
1273
-
1274
987
  /**
1275
988
  * Exposes content in slot as icon label.
1276
989
  */
@@ -1288,50 +1001,10 @@ class AuroIcon extends BaseIcon {
1288
1001
  },
1289
1002
 
1290
1003
  /**
1291
- * DEPRECATED: Sets the icon to use the baseline primary icon style.
1292
- */
1293
- primary: {
1294
- type: Boolean,
1295
- reflect: true
1296
- },
1297
-
1298
- /**
1299
- * Sets the icon to use the secondary style.
1300
- */
1301
- secondary: {
1302
- type: Boolean,
1303
- reflect: true
1304
- },
1305
-
1306
- /**
1307
- * Sets the icon to use the subtle style.
1004
+ * 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`.
1308
1005
  */
1309
- subtle: {
1310
- type: Boolean,
1311
- reflect: true
1312
- },
1313
-
1314
- /**
1315
- * Sets the icon to use the success style.
1316
- */
1317
- success: {
1318
- type: Boolean,
1319
- reflect: true
1320
- },
1321
-
1322
- /**
1323
- * Sets the icon to use the tertiary style.
1324
- */
1325
- tertiary: {
1326
- type: Boolean,
1327
- reflect: true
1328
- },
1329
-
1330
- /**
1331
- * Sets the icon to use the warning style.
1332
- */
1333
- warning: {
1334
- type: Boolean,
1006
+ variant: {
1007
+ type: String,
1335
1008
  reflect: true
1336
1009
  }
1337
1010
  };
@@ -1421,17 +1094,17 @@ class AuroIcon extends BaseIcon {
1421
1094
  }
1422
1095
  }
1423
1096
 
1424
- var iconVersion = '7.0.1';
1097
+ var iconVersion = '8.0.1';
1425
1098
 
1426
1099
  var chevronUp = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-up__desc\" class=\"ico_squareLarge\" 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/><desc id=\"chevron-up__desc\">Directional indicator; up.</desc><path d=\"m17.603 14.343-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 9.957l-4.47 4.47a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.085 4.823-4.823a1 1 0 0 1 1.414 0l4.823 4.823a.75.75 0 0 1 .073.977\"/></svg>"};
1427
1100
 
1428
1101
  var chevronDown = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-down__desc\" class=\"ico_squareLarge\" 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/><desc id=\"chevron-down__desc\">Directional indicator; down.</desc><path d=\"m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
1429
1102
 
1430
- var styleCss = i$5`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size:var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
1103
+ var styleCss = i$5`:host{interpolate-size:allow-keywords;--webkit-fill:-webkit-fill-available}:host .trigger{position:relative;cursor:pointer;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size:var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-100, 0.5rem)}:host([chevron=right]) .contentWrapper{padding-left:var(--ds-size-400, 2rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host([grouped][chevron=right]:not([alignright])) .trigger{width:var(--webkit-fill, 100%);--trigger-padding-right:var(--ds-size-200, $ds-size-200)}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;--trigger-padding-left:var(--ds-size-200, $ds-size-200)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis][variant=lg]) .trigger,:host([emphasis][variant=lg]) .contentWrapper{padding-left:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
1431
1104
 
1432
- var colorCss = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8);--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e)}:host(:hover){--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-hover-default, #525252)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-color-border-active-default, #0074c8)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-color-border-subtle-default, #f0f7fd)}`;
1105
+ var colorCss = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host(:focus){--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color:var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color:var(--ds-basic-color-border-subtle, #dddddd)}`;
1433
1106
 
1434
- var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-color-icon-ui-secondary-default-default, #7e7e7e)}`;
1107
+ var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color:transparent;--ds-auro-accordion-group-border-color:var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color:transparent;--ds-auro-accordion-trigger-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a)}`;
1435
1108
 
1436
1109
  // Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1437
1110
  // See LICENSE in the project root for license information.
@@ -1482,7 +1155,7 @@ class AuroAccordion extends r {
1482
1155
  /**
1483
1156
  * @private
1484
1157
  */
1485
- this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
1158
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
1486
1159
 
1487
1160
  this.expanded = false;
1488
1161
  }
@@ -1539,7 +1212,7 @@ class AuroAccordion extends r {
1539
1212
  */
1540
1213
  static register(name = "auro-accordion") {
1541
1214
  const nameGroup = `${name}-group`;
1542
- AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroAccordion);
1215
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
1543
1216
  AuroAccordionGroup.register(nameGroup);
1544
1217
  }
1545
1218