@aurodesignsystem/auro-dialog 2.2.1 → 2.3.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.
Files changed (8) hide show
  1. package/CHANGELOG.md +19 -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 +3 -3
package/dist/auro-dialog__bundled.js CHANGED
@@ -5,7 +5,7 @@
5
5
 
6
6
  /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
7
7
 
8
- class AuroLibraryRuntimeUtils {
8
+ let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
9
9
 
10
10
  /* eslint-disable jsdoc/require-param */
11
11
 
@@ -66,7 +66,7 @@ class AuroLibraryRuntimeUtils {
66
66
 
67
67
  return elemTag === tag || elem.hasAttribute(tag);
68
68
  }
69
- }
69
+ };
70
70
 
71
71
  /**
72
72
  * @license
@@ -126,7 +126,7 @@ var tokensCss$3 = i$2`:host{--ds-auro-dialog-container-color: var(--ds-color-con
126
126
  // See LICENSE in the project root for license information.
127
127
 
128
128
 
129
- class AuroDependencyVersioning {
129
+ let AuroDependencyVersioning$1 = class AuroDependencyVersioning {
130
130
 
131
131
  /**
132
132
  * Generates a unique string to be used for child auro element naming.
@@ -160,7 +160,7 @@ class AuroDependencyVersioning {
160
160
 
161
161
  return tag;
162
162
  }
163
- }
163
+ };
164
164
 
165
165
  /**
166
166
  * @license
@@ -168,12 +168,192 @@ class AuroDependencyVersioning {
168
168
  * SPDX-License-Identifier: BSD-3-Clause
169
169
  */const to=t=>t??D;
170
170
 
171
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
172
+ // See LICENSE in the project root for license information.
173
+
174
+
175
+ class AuroDependencyVersioning {
176
+
177
+ /**
178
+ * Generates a unique string to be used for child auro element naming.
179
+ * @private
180
+ * @param {string} baseName - Defines the first part of the unique element name.
181
+ * @param {string} version - Version of the component that will be appended to the baseName.
182
+ * @returns {string} - Unique string to be used for naming.
183
+ */
184
+ generateElementName(baseName, version) {
185
+ let result = baseName;
186
+
187
+ result += '-';
188
+ result += version.replace(/[.]/g, '_');
189
+
190
+ return result;
191
+ }
192
+
193
+ /**
194
+ * Generates a unique string to be used for child auro element naming.
195
+ * @param {string} baseName - Defines the first part of the unique element name.
196
+ * @param {string} version - Version of the component that will be appended to the baseName.
197
+ * @returns {string} - Unique string to be used for naming.
198
+ */
199
+ generateTag(baseName, version, tagClass) {
200
+ const elementName = this.generateElementName(baseName, version);
201
+ const tag = er`${tr(elementName)}`;
202
+
203
+ if (!customElements.get(elementName)) {
204
+ customElements.define(elementName, class extends tagClass {});
205
+ }
206
+
207
+ return tag;
208
+ }
209
+ }
210
+
211
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
212
+ // See LICENSE in the project root for license information.
213
+
214
+ // ---------------------------------------------------------------------
215
+
216
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
217
+
218
+ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
219
+
220
+ /* eslint-disable jsdoc/require-param */
221
+
222
+ /**
223
+ * This will register a new custom element with the browser.
224
+ * @param {String} name - The name of the custom element.
225
+ * @param {Object} componentClass - The class to register as a custom element.
226
+ * @returns {void}
227
+ */
228
+ registerComponent(name, componentClass) {
229
+ if (!customElements.get(name)) {
230
+ customElements.define(name, class extends componentClass {});
231
+ }
232
+ }
233
+
234
+ /**
235
+ * Finds and returns the closest HTML Element based on a selector.
236
+ * @returns {void}
237
+ */
238
+ closestElement(
239
+ selector, // selector like in .closest()
240
+ base = this, // extra functionality to skip a parent
241
+ __Closest = (el, found = el && el.closest(selector)) =>
242
+ !el || el === document || el === window
243
+ ? null // standard .closest() returns null for non-found selectors also
244
+ : found
245
+ ? found // found a selector INside this element
246
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
247
+ ) {
248
+ return __Closest(base);
249
+ }
250
+ /* eslint-enable jsdoc/require-param */
251
+
252
+ /**
253
+ * 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.
254
+ * @param {Object} elem - The element to check.
255
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
256
+ * @returns {void}
257
+ */
258
+ handleComponentTagRename(elem, tagName) {
259
+ const tag = tagName.toLowerCase();
260
+ const elemTag = elem.tagName.toLowerCase();
261
+
262
+ if (elemTag !== tag) {
263
+ elem.setAttribute(tag, true);
264
+ }
265
+ }
266
+
267
+ /**
268
+ * Validates if an element is a specific Auro component.
269
+ * @param {Object} elem - The element to validate.
270
+ * @param {String} tagName - The name of the Auro component to check against.
271
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
272
+ */
273
+ elementMatch(elem, tagName) {
274
+ const tag = tagName.toLowerCase();
275
+ const elemTag = elem.tagName.toLowerCase();
276
+
277
+ return elemTag === tag || elem.hasAttribute(tag);
278
+ }
279
+ };
280
+
171
281
  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}`;
172
282
 
173
283
  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}`;
174
284
 
175
285
  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}`;
176
286
 
287
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
288
+ // See LICENSE in the project root for license information.
289
+
290
+ // ---------------------------------------------------------------------
291
+
292
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
293
+
294
+ let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
295
+
296
+ /* eslint-disable jsdoc/require-param */
297
+
298
+ /**
299
+ * This will register a new custom element with the browser.
300
+ * @param {String} name - The name of the custom element.
301
+ * @param {Object} componentClass - The class to register as a custom element.
302
+ * @returns {void}
303
+ */
304
+ registerComponent(name, componentClass) {
305
+ if (!customElements.get(name)) {
306
+ customElements.define(name, class extends componentClass {});
307
+ }
308
+ }
309
+
310
+ /**
311
+ * Finds and returns the closest HTML Element based on a selector.
312
+ * @returns {void}
313
+ */
314
+ closestElement(
315
+ selector, // selector like in .closest()
316
+ base = this, // extra functionality to skip a parent
317
+ __Closest = (el, found = el && el.closest(selector)) =>
318
+ !el || el === document || el === window
319
+ ? null // standard .closest() returns null for non-found selectors also
320
+ : found
321
+ ? found // found a selector INside this element
322
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
323
+ ) {
324
+ return __Closest(base);
325
+ }
326
+ /* eslint-enable jsdoc/require-param */
327
+
328
+ /**
329
+ * 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.
330
+ * @param {Object} elem - The element to check.
331
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
332
+ * @returns {void}
333
+ */
334
+ handleComponentTagRename(elem, tagName) {
335
+ const tag = tagName.toLowerCase();
336
+ const elemTag = elem.tagName.toLowerCase();
337
+
338
+ if (elemTag !== tag) {
339
+ elem.setAttribute(tag, true);
340
+ }
341
+ }
342
+
343
+ /**
344
+ * Validates if an element is a specific Auro component.
345
+ * @param {Object} elem - The element to validate.
346
+ * @param {String} tagName - The name of the Auro component to check against.
347
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
348
+ */
349
+ elementMatch(elem, tagName) {
350
+ const tag = tagName.toLowerCase();
351
+ const elemTag = elem.tagName.toLowerCase();
352
+
353
+ return elemTag === tag || elem.hasAttribute(tag);
354
+ }
355
+ };
356
+
177
357
  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}}`;
178
358
 
179
359
  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}`;
@@ -225,7 +405,7 @@ class AuroLoader extends h {
225
405
  /**
226
406
  * @private
227
407
  */
228
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
408
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
229
409
 
230
410
  this.orbit = false;
231
411
  this.ringworm = false;
@@ -272,7 +452,7 @@ class AuroLoader extends h {
272
452
  *
273
453
  */
274
454
  static register(name = "auro-loader") {
275
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
455
+ AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
276
456
  }
277
457
 
278
458
  firstUpdated() {
@@ -472,7 +652,7 @@ class AuroButton extends h {
472
652
  *
473
653
  */
474
654
  static register(name = "auro-button") {
475
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
655
+ AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
476
656
  }
477
657
 
478
658
  /**
@@ -710,6 +890,76 @@ var tokensCss = i$2`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-defa
710
890
 
711
891
  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)}`;
712
892
 
893
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
894
+ // See LICENSE in the project root for license information.
895
+
896
+ // ---------------------------------------------------------------------
897
+
898
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
899
+
900
+ class AuroLibraryRuntimeUtils {
901
+
902
+ /* eslint-disable jsdoc/require-param */
903
+
904
+ /**
905
+ * This will register a new custom element with the browser.
906
+ * @param {String} name - The name of the custom element.
907
+ * @param {Object} componentClass - The class to register as a custom element.
908
+ * @returns {void}
909
+ */
910
+ registerComponent(name, componentClass) {
911
+ if (!customElements.get(name)) {
912
+ customElements.define(name, class extends componentClass {});
913
+ }
914
+ }
915
+
916
+ /**
917
+ * Finds and returns the closest HTML Element based on a selector.
918
+ * @returns {void}
919
+ */
920
+ closestElement(
921
+ selector, // selector like in .closest()
922
+ base = this, // extra functionality to skip a parent
923
+ __Closest = (el, found = el && el.closest(selector)) =>
924
+ !el || el === document || el === window
925
+ ? null // standard .closest() returns null for non-found selectors also
926
+ : found
927
+ ? found // found a selector INside this element
928
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
929
+ ) {
930
+ return __Closest(base);
931
+ }
932
+ /* eslint-enable jsdoc/require-param */
933
+
934
+ /**
935
+ * 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.
936
+ * @param {Object} elem - The element to check.
937
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
938
+ * @returns {void}
939
+ */
940
+ handleComponentTagRename(elem, tagName) {
941
+ const tag = tagName.toLowerCase();
942
+ const elemTag = elem.tagName.toLowerCase();
943
+
944
+ if (elemTag !== tag) {
945
+ elem.setAttribute(tag, true);
946
+ }
947
+ }
948
+
949
+ /**
950
+ * Validates if an element is a specific Auro component.
951
+ * @param {Object} elem - The element to validate.
952
+ * @param {String} tagName - The name of the Auro component to check against.
953
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
954
+ */
955
+ elementMatch(elem, tagName) {
956
+ const tag = tagName.toLowerCase();
957
+ const elemTag = elem.tagName.toLowerCase();
958
+
959
+ return elemTag === tag || elem.hasAttribute(tag);
960
+ }
961
+ }
962
+
713
963
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
714
964
  // See LICENSE in the project root for license information.
715
965
 
@@ -949,7 +1199,7 @@ class ComponentBase extends h {
949
1199
  this.modal = false;
950
1200
  this.unformatted = false;
951
1201
 
952
- const versioning = new AuroDependencyVersioning();
1202
+ const versioning = new AuroDependencyVersioning$1();
953
1203
 
954
1204
  /**
955
1205
  * @private
@@ -965,7 +1215,7 @@ class ComponentBase extends h {
965
1215
  /**
966
1216
  * @private
967
1217
  */
968
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
1218
+ this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
969
1219
  }
970
1220
 
971
1221
  static get properties() {
@@ -1223,7 +1473,7 @@ class AuroDialog extends ComponentBase {
1223
1473
  *
1224
1474
  */
1225
1475
  static register(name = "auro-dialog") {
1226
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDialog);
1476
+ AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroDialog);
1227
1477
  }
1228
1478
  }
1229
1479
 
package/package.json CHANGED
@@ -7,7 +7,7 @@
7
7
  "================================================================================"
8
8
  ],
9
9
  "name": "@aurodesignsystem/auro-dialog",
10
- "version": "2.2.1",
10
+ "version": "2.3.1",
11
11
  "description": "auro-dialog HTML custom element",
12
12
  "repository": {
13
13
  "type": "git",
@@ -17,12 +17,12 @@
17
17
  "main": "index.js",
18
18
  "license": "Apache-2.0",
19
19
  "engines": {
20
- "node": "^18.x || ^20.x"
20
+ "node": "^20.x || ^22.x "
21
21
  },
22
22
  "dependencies": {
23
23
  "@aurodesignsystem/auro-button": "^8.1.0",
24
24
  "@aurodesignsystem/auro-icon": "^6.0.1",
25
- "@aurodesignsystem/auro-library": "^2.10.1",
25
+ "@aurodesignsystem/auro-library": "^3.0.2",
26
26
  "chalk": "^5.3.0",
27
27
  "lit": "^3.2.1"
28
28
  },