@aurodesignsystem/auro-dialog 2.2.1 → 2.3.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 (8) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +12 -12
  3. package/demo/api.md +32 -32
  4. package/demo/api.min.js +260 -10
  5. package/demo/index.md +14 -14
  6. package/demo/index.min.js +260 -10
  7. package/dist/auro-dialog__bundled.js +260 -10
  8. package/package.json +2 -2
package/demo/index.min.js CHANGED
@@ -35,7 +35,7 @@ function initCustomExample() {
35
35
 
36
36
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
37
37
 
38
- class AuroLibraryRuntimeUtils {
38
+ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
39
39
 
40
40
  /* eslint-disable jsdoc/require-param */
41
41
 
@@ -96,7 +96,7 @@ class AuroLibraryRuntimeUtils {
96
96
 
97
97
  return elemTag === tag || elem.hasAttribute(tag);
98
98
  }
99
- }
99
+ };
100
100
 
101
101
  /**
102
102
  * @license
@@ -156,7 +156,7 @@ var tokensCss$3 = i$2`:host{--ds-auro-dialog-container-color: var(--ds-color-con
156
156
  // See LICENSE in the project root for license information.
157
157
 
158
158
 
159
- class AuroDependencyVersioning {
159
+ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
160
160
 
161
161
  /**
162
162
  * Generates a unique string to be used for child auro element naming.
@@ -190,7 +190,7 @@ class AuroDependencyVersioning {
190
190
 
191
191
  return tag;
192
192
  }
193
- }
193
+ };
194
194
 
195
195
  /**
196
196
  * @license
@@ -198,12 +198,192 @@ class AuroDependencyVersioning {
198
198
  * SPDX-License-Identifier: BSD-3-Clause
199
199
  */const to=t=>t??D;
200
200
 
201
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
202
+ // See LICENSE in the project root for license information.
203
+
204
+
205
+ class AuroDependencyVersioning {
206
+
207
+ /**
208
+ * Generates a unique string to be used for child auro element naming.
209
+ * @private
210
+ * @param {string} baseName - Defines the first part of the unique element name.
211
+ * @param {string} version - Version of the component that will be appended to the baseName.
212
+ * @returns {string} - Unique string to be used for naming.
213
+ */
214
+ generateElementName(baseName, version) {
215
+ let result = baseName;
216
+
217
+ result += '-';
218
+ result += version.replace(/[.]/g, '_');
219
+
220
+ return result;
221
+ }
222
+
223
+ /**
224
+ * Generates a unique string to be used for child auro element naming.
225
+ * @param {string} baseName - Defines the first part of the unique element name.
226
+ * @param {string} version - Version of the component that will be appended to the baseName.
227
+ * @returns {string} - Unique string to be used for naming.
228
+ */
229
+ generateTag(baseName, version, tagClass) {
230
+ const elementName = this.generateElementName(baseName, version);
231
+ const tag = er`${tr(elementName)}`;
232
+
233
+ if (!customElements.get(elementName)) {
234
+ customElements.define(elementName, class extends tagClass {});
235
+ }
236
+
237
+ return tag;
238
+ }
239
+ }
240
+
241
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
242
+ // See LICENSE in the project root for license information.
243
+
244
+ // ---------------------------------------------------------------------
245
+
246
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
247
+
248
+ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
249
+
250
+ /* eslint-disable jsdoc/require-param */
251
+
252
+ /**
253
+ * This will register a new custom element with the browser.
254
+ * @param {String} name - The name of the custom element.
255
+ * @param {Object} componentClass - The class to register as a custom element.
256
+ * @returns {void}
257
+ */
258
+ registerComponent(name, componentClass) {
259
+ if (!customElements.get(name)) {
260
+ customElements.define(name, class extends componentClass {});
261
+ }
262
+ }
263
+
264
+ /**
265
+ * Finds and returns the closest HTML Element based on a selector.
266
+ * @returns {void}
267
+ */
268
+ closestElement(
269
+ selector, // selector like in .closest()
270
+ base = this, // extra functionality to skip a parent
271
+ __Closest = (el, found = el && el.closest(selector)) =>
272
+ !el || el === document || el === window
273
+ ? null // standard .closest() returns null for non-found selectors also
274
+ : found
275
+ ? found // found a selector INside this element
276
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
277
+ ) {
278
+ return __Closest(base);
279
+ }
280
+ /* eslint-enable jsdoc/require-param */
281
+
282
+ /**
283
+ * 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.
284
+ * @param {Object} elem - The element to check.
285
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
286
+ * @returns {void}
287
+ */
288
+ handleComponentTagRename(elem, tagName) {
289
+ const tag = tagName.toLowerCase();
290
+ const elemTag = elem.tagName.toLowerCase();
291
+
292
+ if (elemTag !== tag) {
293
+ elem.setAttribute(tag, true);
294
+ }
295
+ }
296
+
297
+ /**
298
+ * Validates if an element is a specific Auro component.
299
+ * @param {Object} elem - The element to validate.
300
+ * @param {String} tagName - The name of the Auro component to check against.
301
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
302
+ */
303
+ elementMatch(elem, tagName) {
304
+ const tag = tagName.toLowerCase();
305
+ const elemTag = elem.tagName.toLowerCase();
306
+
307
+ return elemTag === tag || elem.hasAttribute(tag);
308
+ }
309
+ };
310
+
201
311
  var styleCss$2 = i$2`*,*: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}: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){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.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){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.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){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}: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}`;
202
312
 
203
313
  var colorCss$2 = i$2`[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}`;
204
314
 
205
315
  var tokensCss$2 = i$2`: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}`;
206
316
 
317
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
318
+ // See LICENSE in the project root for license information.
319
+
320
+ // ---------------------------------------------------------------------
321
+
322
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
323
+
324
+ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
325
+
326
+ /* eslint-disable jsdoc/require-param */
327
+
328
+ /**
329
+ * This will register a new custom element with the browser.
330
+ * @param {String} name - The name of the custom element.
331
+ * @param {Object} componentClass - The class to register as a custom element.
332
+ * @returns {void}
333
+ */
334
+ registerComponent(name, componentClass) {
335
+ if (!customElements.get(name)) {
336
+ customElements.define(name, class extends componentClass {});
337
+ }
338
+ }
339
+
340
+ /**
341
+ * Finds and returns the closest HTML Element based on a selector.
342
+ * @returns {void}
343
+ */
344
+ closestElement(
345
+ selector, // selector like in .closest()
346
+ base = this, // extra functionality to skip a parent
347
+ __Closest = (el, found = el && el.closest(selector)) =>
348
+ !el || el === document || el === window
349
+ ? null // standard .closest() returns null for non-found selectors also
350
+ : found
351
+ ? found // found a selector INside this element
352
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
353
+ ) {
354
+ return __Closest(base);
355
+ }
356
+ /* eslint-enable jsdoc/require-param */
357
+
358
+ /**
359
+ * 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.
360
+ * @param {Object} elem - The element to check.
361
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
362
+ * @returns {void}
363
+ */
364
+ handleComponentTagRename(elem, tagName) {
365
+ const tag = tagName.toLowerCase();
366
+ const elemTag = elem.tagName.toLowerCase();
367
+
368
+ if (elemTag !== tag) {
369
+ elem.setAttribute(tag, true);
370
+ }
371
+ }
372
+
373
+ /**
374
+ * Validates if an element is a specific Auro component.
375
+ * @param {Object} elem - The element to validate.
376
+ * @param {String} tagName - The name of the Auro component to check against.
377
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
378
+ */
379
+ elementMatch(elem, tagName) {
380
+ const tag = tagName.toLowerCase();
381
+ const elemTag = elem.tagName.toLowerCase();
382
+
383
+ return elemTag === tag || elem.hasAttribute(tag);
384
+ }
385
+ };
386
+
207
387
  var styleCss$1 = i$2`*,*: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}: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}}`;
208
388
 
209
389
  var colorCss$1 = i$2`: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}`;
@@ -255,7 +435,7 @@ class AuroLoader extends h {
255
435
  /**
256
436
  * @private
257
437
  */
258
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
438
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
259
439
 
260
440
  this.orbit = false;
261
441
  this.ringworm = false;
@@ -302,7 +482,7 @@ class AuroLoader extends h {
302
482
  *
303
483
  */
304
484
  static register(name = "auro-loader") {
305
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
485
+ AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
306
486
  }
307
487
 
308
488
  firstUpdated() {
@@ -502,7 +682,7 @@ class AuroButton extends h {
502
682
  *
503
683
  */
504
684
  static register(name = "auro-button") {
505
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
685
+ AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
506
686
  }
507
687
 
508
688
  /**
@@ -740,6 +920,76 @@ var tokensCss = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-defa
740
920
 
741
921
  var colorCss = i$2`: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)}`;
742
922
 
923
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
924
+ // See LICENSE in the project root for license information.
925
+
926
+ // ---------------------------------------------------------------------
927
+
928
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
929
+
930
+ class AuroLibraryRuntimeUtils {
931
+
932
+ /* eslint-disable jsdoc/require-param */
933
+
934
+ /**
935
+ * This will register a new custom element with the browser.
936
+ * @param {String} name - The name of the custom element.
937
+ * @param {Object} componentClass - The class to register as a custom element.
938
+ * @returns {void}
939
+ */
940
+ registerComponent(name, componentClass) {
941
+ if (!customElements.get(name)) {
942
+ customElements.define(name, class extends componentClass {});
943
+ }
944
+ }
945
+
946
+ /**
947
+ * Finds and returns the closest HTML Element based on a selector.
948
+ * @returns {void}
949
+ */
950
+ closestElement(
951
+ selector, // selector like in .closest()
952
+ base = this, // extra functionality to skip a parent
953
+ __Closest = (el, found = el && el.closest(selector)) =>
954
+ !el || el === document || el === window
955
+ ? null // standard .closest() returns null for non-found selectors also
956
+ : found
957
+ ? found // found a selector INside this element
958
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
959
+ ) {
960
+ return __Closest(base);
961
+ }
962
+ /* eslint-enable jsdoc/require-param */
963
+
964
+ /**
965
+ * 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.
966
+ * @param {Object} elem - The element to check.
967
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
968
+ * @returns {void}
969
+ */
970
+ handleComponentTagRename(elem, tagName) {
971
+ const tag = tagName.toLowerCase();
972
+ const elemTag = elem.tagName.toLowerCase();
973
+
974
+ if (elemTag !== tag) {
975
+ elem.setAttribute(tag, true);
976
+ }
977
+ }
978
+
979
+ /**
980
+ * Validates if an element is a specific Auro component.
981
+ * @param {Object} elem - The element to validate.
982
+ * @param {String} tagName - The name of the Auro component to check against.
983
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
984
+ */
985
+ elementMatch(elem, tagName) {
986
+ const tag = tagName.toLowerCase();
987
+ const elemTag = elem.tagName.toLowerCase();
988
+
989
+ return elemTag === tag || elem.hasAttribute(tag);
990
+ }
991
+ }
992
+
743
993
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
744
994
  // See LICENSE in the project root for license information.
745
995
 
@@ -979,7 +1229,7 @@ class ComponentBase extends h {
979
1229
  this.modal = false;
980
1230
  this.unformatted = false;
981
1231
 
982
- const versioning = new AuroDependencyVersioning();
1232
+ const versioning = new AuroDependencyVersioning$1();
983
1233
 
984
1234
  /**
985
1235
  * @private
@@ -995,7 +1245,7 @@ class ComponentBase extends h {
995
1245
  /**
996
1246
  * @private
997
1247
  */
998
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
1248
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
999
1249
  }
1000
1250
 
1001
1251
  static get properties() {
@@ -1253,7 +1503,7 @@ class AuroDialog extends ComponentBase {
1253
1503
  *
1254
1504
  */
1255
1505
  static register(name = "auro-dialog") {
1256
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDialog);
1506
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroDialog);
1257
1507
  }
1258
1508
  }
1259
1509