@aurodesignsystem-dev/auro-toast 0.0.0-pr156.0 → 0.0.0-pr156.10

package/README.md

@@ -107,7 +107,6 @@ You can do this by importing only the component class and using the `register(na
 
 <pre class="language-js"><code class="language-js">// Import the class only
 import { AuroToast } from '@aurodesignsystem/auro-toast/class';
-​
 // Register with a custom name if desired
 AuroToast.register('custom-toast');</code></pre>
 

package/custom-elements.json

@@ -53,7 +53,7 @@
             {
               "kind": "method",
               "name": "_scheduleAutoHide",
-              "description": "(Re-)schedules the auto-hide timer based on current visible/disableAutoHide/\nvariant/timeTilHide values. Called from updated() on property changes and\nfrom connectedCallback() to re-arm auto-hide after a reconnect (e.g. the\nnode is re-parented elsewhere in the DOM), since updated() does not run\nagain on reconnect alone.",
+              "description": "(Re-)schedules the auto-hide timer based on current visible/disableAutoHide/\nvariant/timeTilHide values. Called from updated() on property changes and\nfrom connectedCallback() to re-arm auto-hide after a reconnect (e.g. the\nnode is re-parented elsewhere in the DOM), since updated() does not run\nagain on reconnect alone.\n\nRestarts the full countdown on every reconnect rather than resuming\nelapsed time -- this is intentional (AB#1646998): \"visible for N ms\"\nis scoped to a single connected mount, and connectedCallback() itself\nre-arms on every reconnect, so a resume-elapsed-time model would need\nits own persisted start time with no corresponding product ask.",
               "privacy": "private",
               "return": {
                 "type": {
@@ -235,7 +235,7 @@
             {
               "name": "toast-close",
               "type": {
-                "text": "{ visible: boolean }"
+                "text": "{ visible: boolean, id: string }"
               },
               "description": "Notifies that the toast has been closed"
             },

package/demo/api.min.js

@@ -538,7 +538,7 @@ const FADE_OUT_DURATION = 300;
  *
  * @csspart type-icon - Apply css to the toast type icon
  * @csspart close-button - Apply css to the toast close button
- * @fires onToastClose - **Deprecated**, use `toast-close` event instead.
+ * @event onToastClose - **Deprecated**, use `toast-close` event instead.
  * @event toast-close - Notifies that the toast has been closed
  */
 
@@ -734,6 +734,13 @@ class AuroToast extends i$2 {
     this.runtimeUtils.handleComponentTagRename(this, "auro-toast");
   }
 
+  /**
+   * Cancels any pending auto-hide/close timers when the toast leaves the DOM,
+   * so a stale timer from a previous connection cannot fire after the node
+   * has been removed or re-parented.
+   * @private
+   * @returns {void}
+   */
   disconnectedCallback() {
     super.disconnectedCallback();
     clearTimeout(this.fadeOutTimer);
@@ -821,13 +828,13 @@ class AuroToast extends i$2 {
      * Emits closed toast event.
      *
      * @event toast-close
-     * @type {{ visible: boolean }}
+     * @type {{ visible: boolean, id: string }}
      */
     this.dispatchEvent(
       new CustomEvent("toast-close", {
         bubbles: true,
         composed: true,
-        detail: { visible: false },
+        detail: { visible: false, id: this.id },
       }),
     );
   }
@@ -871,6 +878,15 @@ class AuroToast extends i$2 {
     super.connectedCallback();
     this.setOnClick();
 
+    // A disconnect during fade-out (see disconnectedCallback) cancels the
+    // pending close timer but leaves the "hidden" class on the container --
+    // there is no pending close left to finish it. Reconnecting must restore
+    // full visibility, otherwise the toast can get stuck rendered-but-hidden
+    // while `visible` is still true (e.g. if disableAutoHide was toggled on
+    // while detached, which prevents _scheduleAutoHide() below from ever
+    // re-arming a close).
+    this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden");
+
     // Re-arm auto-hide on reconnect (e.g. re-parenting the node elsewhere in
     // the DOM) -- updated() does not re-run just because connectedCallback()
     // fired again, since no reactive property changed as a result.
@@ -945,6 +961,17 @@ class AuroToast extends i$2 {
   updated(changedProperties) {
     if (changedProperties.has("visible")) {
       this.handleSlotContent();
+
+      // A toast element reused for a new message (e.g. a message queue
+      // recycling instances) can still have a closeTimer pending from an
+      // earlier close's fade-out -- nothing previously cleared it when
+      // visible flips back to true, so it could fire ~300ms later and close
+      // the freshly re-shown toast. Also restore visibility in case the
+      // earlier fade-out had already applied the "hidden" class.
+      if (this.visible) {
+        clearTimeout(this.closeTimer);
+        this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden");
+      }
     }
 
     // Keep the standalone role in sync if variant changes after connection.
@@ -969,13 +996,27 @@ class AuroToast extends i$2 {
    * from connectedCallback() to re-arm auto-hide after a reconnect (e.g. the
    * node is re-parented elsewhere in the DOM), since updated() does not run
    * again on reconnect alone.
+   *
+   * Restarts the full countdown on every reconnect rather than resuming
+   * elapsed time -- this is intentional (AB#1646998): "visible for N ms"
+   * is scoped to a single connected mount, and connectedCallback() itself
+   * re-arms on every reconnect, so a resume-elapsed-time model would need
+   * its own persisted start time with no corresponding product ask.
    * @private
    * @returns {void}
    */
   _scheduleAutoHide() {
-    // do not auto dismiss for error toasts or if disableAutoHide is set
-    if (this.visible && !this.disableAutoHide && this.variant !== "error") {
-      clearTimeout(this.fadeOutTimer);
+    // Unconditional so a pending timer never survives becoming ineligible
+    // (e.g. disableAutoHide toggled on mid-countdown) -- correctness should
+    // not depend on fadeOutToast()'s own guard re-checking eligibility.
+    clearTimeout(this.fadeOutTimer);
+
+    // do not auto dismiss for error toasts, if disableAutoHide is set, or
+    // while disconnected -- updated() can still run after disconnect (Lit's
+    // update cycle does not require an active connection), and arming a
+    // timer here would let it fire off-DOM, ahead of connectedCallback's own
+    // re-arm and hidden-class restoration on reconnect (AB#1646998).
+    if (this.isConnected && this.visible && !this.disableAutoHide && this.variant !== "error") {
       this.fadeOutTimer = setTimeout(() => {
         this.fadeOutToast();
       }, this.timeTilHide || DEFAULT_TIME_TIL_FADE_OUT);

package/demo/index.min.js

@@ -289,7 +289,7 @@ const FADE_OUT_DURATION = 300;
  *
  * @csspart type-icon - Apply css to the toast type icon
  * @csspart close-button - Apply css to the toast close button
- * @fires onToastClose - **Deprecated**, use `toast-close` event instead.
+ * @event onToastClose - **Deprecated**, use `toast-close` event instead.
  * @event toast-close - Notifies that the toast has been closed
  */
 
@@ -485,6 +485,13 @@ class AuroToast extends i$2 {
     this.runtimeUtils.handleComponentTagRename(this, "auro-toast");
   }
 
+  /**
+   * Cancels any pending auto-hide/close timers when the toast leaves the DOM,
+   * so a stale timer from a previous connection cannot fire after the node
+   * has been removed or re-parented.
+   * @private
+   * @returns {void}
+   */
   disconnectedCallback() {
     super.disconnectedCallback();
     clearTimeout(this.fadeOutTimer);
@@ -572,13 +579,13 @@ class AuroToast extends i$2 {
      * Emits closed toast event.
      *
      * @event toast-close
-     * @type {{ visible: boolean }}
+     * @type {{ visible: boolean, id: string }}
      */
     this.dispatchEvent(
       new CustomEvent("toast-close", {
         bubbles: true,
         composed: true,
-        detail: { visible: false },
+        detail: { visible: false, id: this.id },
       }),
     );
   }
@@ -622,6 +629,15 @@ class AuroToast extends i$2 {
     super.connectedCallback();
     this.setOnClick();
 
+    // A disconnect during fade-out (see disconnectedCallback) cancels the
+    // pending close timer but leaves the "hidden" class on the container --
+    // there is no pending close left to finish it. Reconnecting must restore
+    // full visibility, otherwise the toast can get stuck rendered-but-hidden
+    // while `visible` is still true (e.g. if disableAutoHide was toggled on
+    // while detached, which prevents _scheduleAutoHide() below from ever
+    // re-arming a close).
+    this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden");
+
     // Re-arm auto-hide on reconnect (e.g. re-parenting the node elsewhere in
     // the DOM) -- updated() does not re-run just because connectedCallback()
     // fired again, since no reactive property changed as a result.
@@ -696,6 +712,17 @@ class AuroToast extends i$2 {
   updated(changedProperties) {
     if (changedProperties.has("visible")) {
       this.handleSlotContent();
+
+      // A toast element reused for a new message (e.g. a message queue
+      // recycling instances) can still have a closeTimer pending from an
+      // earlier close's fade-out -- nothing previously cleared it when
+      // visible flips back to true, so it could fire ~300ms later and close
+      // the freshly re-shown toast. Also restore visibility in case the
+      // earlier fade-out had already applied the "hidden" class.
+      if (this.visible) {
+        clearTimeout(this.closeTimer);
+        this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden");
+      }
     }
 
     // Keep the standalone role in sync if variant changes after connection.
@@ -720,13 +747,27 @@ class AuroToast extends i$2 {
    * from connectedCallback() to re-arm auto-hide after a reconnect (e.g. the
    * node is re-parented elsewhere in the DOM), since updated() does not run
    * again on reconnect alone.
+   *
+   * Restarts the full countdown on every reconnect rather than resuming
+   * elapsed time -- this is intentional (AB#1646998): "visible for N ms"
+   * is scoped to a single connected mount, and connectedCallback() itself
+   * re-arms on every reconnect, so a resume-elapsed-time model would need
+   * its own persisted start time with no corresponding product ask.
    * @private
    * @returns {void}
    */
   _scheduleAutoHide() {
-    // do not auto dismiss for error toasts or if disableAutoHide is set
-    if (this.visible && !this.disableAutoHide && this.variant !== "error") {
-      clearTimeout(this.fadeOutTimer);
+    // Unconditional so a pending timer never survives becoming ineligible
+    // (e.g. disableAutoHide toggled on mid-countdown) -- correctness should
+    // not depend on fadeOutToast()'s own guard re-checking eligibility.
+    clearTimeout(this.fadeOutTimer);
+
+    // do not auto dismiss for error toasts, if disableAutoHide is set, or
+    // while disconnected -- updated() can still run after disconnect (Lit's
+    // update cycle does not require an active connection), and arming a
+    // timer here would let it fire off-DOM, ahead of connectedCallback's own
+    // re-arm and hidden-class restoration on reconnect (AB#1646998).
+    if (this.isConnected && this.visible && !this.disableAutoHide && this.variant !== "error") {
       this.fadeOutTimer = setTimeout(() => {
         this.fadeOutToast();
       }, this.timeTilHide || DEFAULT_TIME_TIL_FADE_OUT);

package/demo/readme.md

@@ -107,7 +107,6 @@ You can do this by importing only the component class and using the `register(na
 
 <pre class="language-js"><code class="language-js">// Import the class only
 import { AuroToast } from '@aurodesignsystem/auro-toast/class';
-​
 // Register with a custom name if desired
 AuroToast.register('custom-toast');</code></pre>
 

package/dist/{auro-toaster-BghWbuzd.js → auro-toaster-B1fChnda.js}

@@ -53,11 +53,11 @@ import{css as e,LitElement as t,html as s}from"lit";import{unsafeStatic as a,lit
           </span>
         </span>
       </${this._renderTag}>
-    `}renderLayout(){return this.renderLayoutDefault()}}class I{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,s=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,!0)}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}getSlotText(e,t){const s=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(s?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class F extends t{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(e){return e?"true":"false"}}const E=new Map,$=(e,t={})=>{const s=t.responseParser||(e=>e.text());return E.has(e)||E.set(e,fetch(e).then(s)),E.get(e)};var L=e`: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, .75rem))}:host{color:currentColor;vertical-align:middle;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;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
-`;class O extends F{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.onDark=!1,this.appearance="default"}static get properties(){return{...F.properties,onDark:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return L}async fetchIcon(e,t){let s="";return s="logos"===e?await $(`${this.uri}/${e}/${t}.svg`):await $(`${this.uri}/icons/${e}/${t}.svg`),(new DOMParser).parseFromString(s,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const e=await this.fetchIcon(this.category,this.name);if(e)this.svg=e;else if(!e){const e=this.name?.startsWith("tail-")?'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="min-width:100%;height:auto;fill:currentColor" viewBox="0 0 142 138" part="svg"><title id="tail-DEFAULT__title">Airplane tail default image with light gray color</title><path fill="url(#paint0_linear_9225_2069)" fill-rule="evenodd" d="M124.093 14.665a3.26 3.26 0 0 1 3.208 3.829L101.097 119.85c-.47 1.087-2.211 3.398-5.692 3.471l-.106.001-80.65.013A659230 659230 0 0 1 99.08 17.412c1.214-1.497 3.275-2.722 5.372-2.747z" clip-rule="evenodd"/><defs><linearGradient id="paint0_linear_9225_2069" x1="114.823" x2="60.061" y1="14.665" y2="123.335" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#707984"/><stop offset=".5" stop-color="#646E7B"/></linearGradient></defs></svg>':'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';this.svg=(new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}}}catch(e){this.svg=void 0}}}e`.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}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
+    `}renderLayout(){return this.renderLayoutDefault()}}class I{registerComponent(e,t){customElements.get(e)||customElements.define(e,class extends t{})}closestElement(e,t=this,s=(t,a=t&&t.closest(e))=>t&&t!==document&&t!==window?a||s(t.getRootNode().host):null){return s(t)}handleComponentTagRename(e,t){const s=t.toLowerCase();e.tagName.toLowerCase()!==s&&e.setAttribute(s,!0)}elementMatch(e,t){const s=t.toLowerCase();return e.tagName.toLowerCase()===s||e.hasAttribute(s)}getSlotText(e,t){const s=e.shadowRoot?.querySelector(`slot[name="${t}"]`);return(s?.assignedNodes({flatten:!0})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}class F extends t{static get properties(){return{hidden:{type:Boolean,reflect:!0},hiddenVisually:{type:Boolean,reflect:!0},hiddenAudible:{type:Boolean,reflect:!0}}}hideAudible(e){return e?"true":"false"}}const E=new Map,L=(e,t={})=>{const s=t.responseParser||(e=>e.text());return E.has(e)||E.set(e,fetch(e).then(s)),E.get(e)};var $=e`: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, .75rem))}:host{color:currentColor;vertical-align:middle;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;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
+`;class O extends F{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.onDark=!1,this.appearance="default"}static get properties(){return{...F.properties,onDark:{type:Boolean,reflect:!0},appearance:{type:String,reflect:!0},svg:{attribute:!1,reflect:!0}}}static get styles(){return $}async fetchIcon(e,t){let s="";return s="logos"===e?await L(`${this.uri}/${e}/${t}.svg`):await L(`${this.uri}/icons/${e}/${t}.svg`),(new DOMParser).parseFromString(s,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const e=await this.fetchIcon(this.category,this.name);if(e)this.svg=e;else if(!e){const e=this.name?.startsWith("tail-")?'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="min-width:100%;height:auto;fill:currentColor" viewBox="0 0 142 138" part="svg"><title id="tail-DEFAULT__title">Airplane tail default image with light gray color</title><path fill="url(#paint0_linear_9225_2069)" fill-rule="evenodd" d="M124.093 14.665a3.26 3.26 0 0 1 3.208 3.829L101.097 119.85c-.47 1.087-2.211 3.398-5.692 3.471l-.106.001-80.65.013A659230 659230 0 0 1 99.08 17.412c1.214-1.497 3.275-2.722 5.372-2.747z" clip-rule="evenodd"/><defs><linearGradient id="paint0_linear_9225_2069" x1="114.823" x2="60.061" y1="14.665" y2="123.335" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#707984"/><stop offset=".5" stop-color="#646E7B"/></linearGradient></defs></svg>':'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';this.svg=(new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}}}catch(e){this.svg=void 0}}}e`.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}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
 `;var D=e`: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)}
 `,W=e`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
-`;class G extends O{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new I}static get properties(){return{...O.properties,ariaHidden:{type:String,reflect:!0},category:{type:String,reflect:!0},customColor:{type:Boolean,reflect:!0},customSvg:{type:Boolean},label:{type:Boolean,reflect:!0},name:{type:String,reflect:!0},variant:{type:String,reflect:!0}}}static get styles(){return[O.styles,D,L,W]}static register(e="auro-icon"){I.prototype.registerComponent(e,G)}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon")}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg")}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const e=this.svg.querySelector("desc");e&&(e.remove(),this.svg.removeAttribute("aria-labelledby"))}}render(){const e={labelWrapper:!0,util_displayHiddenVisually:!this.label};return s`
+`;class G extends O{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new I}static get properties(){return{...O.properties,ariaHidden:{type:String,reflect:!0},category:{type:String,reflect:!0},customColor:{type:Boolean,reflect:!0},customSvg:{type:Boolean},label:{type:Boolean,reflect:!0},name:{type:String,reflect:!0},variant:{type:String,reflect:!0}}}static get styles(){return[O.styles,D,$,W]}static register(e="auro-icon"){I.prototype.registerComponent(e,G)}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon")}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg")}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const e=this.svg.querySelector("desc");e&&(e.remove(),this.svg.removeAttribute("aria-labelledby"))}}render(){const e={labelWrapper:!0,util_displayHiddenVisually:!this.label};return s`
       <div class="componentWrapper">
         <div
           class="${i({svgWrapper:!0})}"
@@ -78,7 +78,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{unsafeStatic as a,lit
     `}}var X='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error-stroke__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="error-stroke__desc">triangle with exclamation mark.</desc><path d="M12 15.34c-.41 0-.75-.34-.75-.75V9.33c0-.41.34-.75.75-.75s.75.34.75.75v5.26c0 .41-.34.75-.75.75m.87 1.62c0-.48-.39-.88-.88-.88s-.88.39-.88.88.39.88.88.88.88-.39.88-.88M11.98 4.5 3.5 18.97h16.99zm0-1.5c.5 0 1 .25 1.29.74l8.51 14.47c.59 1-.13 2.26-1.29 2.26H3.5c-1.16 0-1.88-1.26-1.29-2.26l8.48-14.47c.29-.49.79-.74 1.29-.74"/></svg>',j='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="information-stroke__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="information-stroke__desc">Important information indicator.</desc><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17m0 5.75a.75.75 0 0 1 .743.648l.007.102v6.25a.75.75 0 0 1-1.493.102l-.007-.102V10a.75.75 0 0 1 .75-.75M12 7a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5"/></svg>',P='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" 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/><path d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2m0 1.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17m-1.524 10.416 4.971-5.423a.75.75 0 0 1 1.175.927l-.07.087-5.5 6a.75.75 0 0 1-.996.098l-.086-.075-2.5-2.5a.75.75 0 0 1 .976-1.133l.084.073zl4.971-5.423z"/></svg>',V='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="x-lg__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="x-lg__desc">a large x</desc><path fill-rule="evenodd" d="M16.51 17.26q-.255 0-.45-.15l-.09-.08-3.96-3.96-3.98 3.98-.1.08a.76.76 0 0 1-.43.14.75.75 0 0 1-.6-1.2l.08-.09 3.96-3.96-3.98-3.98-.08-.1a.746.746 0 0 1 .61-1.18q.255 0 .45.15l.1.08L12 10.95l3.98-3.98.1-.08a.76.76 0 0 1 .43-.14.75.75 0 0 1 .6 1.2l-.08.1-3.96 3.96 3.98 3.98.08.1a.746.746 0 0 1-.61 1.18z" clip-rule="evenodd"/></svg>',J=e`:host([visible]){background-color:var(--ds-auro-toast-container-color);color:var(--ds-auro-toast-text-color)}:host([visible]) .typeIcon{color:var(--ds-auro-toast-icon-color)}:host([visible]) .closeButton:hover{background-color:var(--ds-auro-toast-close-button-hover-container-color)}:host([variant=error]){--ds-auro-toast-container-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-toast-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([variant=success]){--ds-auro-toast-container-color: var(--ds-basic-color-status-success-subtle, #d6eac7);--ds-auro-toast-icon-color: var(--ds-basic-color-status-success, #447a1f);--ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
 `,K=e`.body-default{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-variant-ligatures:none;font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-variant-ligatures:none;font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-sm-emphasized-font-size, .875rem);font-variant-ligatures:none;font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-xs-emphasized-font-size, .75rem);font-variant-ligatures:none;font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, .875rem)}.body-2xs,.body-2xs-emphasized{letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-emphasized-font-size, .625rem);font-variant-ligatures:none;font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-variant-ligatures:none;font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-variant-ligatures:none;font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-variant-ligatures:none;font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-variant-ligatures:none;font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-variant-ligatures:none;font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:inherit}:host([visible]){display:inline-block;min-width:100%;border-radius:var(--ds-size-100, .5rem);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15));pointer-events:auto}@media (width >= 576px){:host([visible]){min-width:200px;max-width:500px}}:host([visible]) .toastContainer{display:flex;flex-direction:row;align-items:flex-start;padding:var(--ds-size-200, 1rem) var(--ds-size-150, .75rem);gap:var(--ds-size-200, 1rem)}:host([visible]) .hidden{opacity:0;transition:visibility 0s .3s,opacity .3s ease-out;visibility:hidden}:host([visible]) [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([visible]) .message{flex:1}:host([visible]) .closeButton{border-radius:50%}
 `,Q=e`:host{--ds-auro-toast-close-button-hover-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-toast-container-color: var(--ds-advanced-color-shared-background-strong, #676767);--ds-auro-toast-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-toast-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}
-`;class Y extends t{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.closeDom=(new DOMParser).parseFromString(V,"text/html"),this.closeSvg=this.closeDom.body.firstChild,this.closeSvg.setAttribute("slot","svg"),this.successDom=(new DOMParser).parseFromString(P,"text/html"),this.successSvg=this.successDom.body.firstChild,this.successSvg.setAttribute("slot","svg"),this.errorDom=(new DOMParser).parseFromString(X,"text/html"),this.errorSvg=this.errorDom.body.firstChild,this.errorSvg.setAttribute("slot","svg"),this.infoDom=(new DOMParser).parseFromString(j,"text/html"),this.infoSvg=this.infoDom.body.firstChild,this.infoSvg.setAttribute("slot","svg");const e=new l;this.buttonTag=e.generateTag("auro-button","12.3.2",U),this.iconTag=e.generateTag("auro-icon","9.2.0",G),this.runtimeUtils=new c,this.fadeOutTimer=void 0,this.closeTimer=void 0,this._isStandalone=!1}static get properties(){return{...t.properties,disableAutoHide:{type:Boolean,reflect:!0,attribute:"disableautohide"},noIcon:{type:Boolean,reflect:!0,attribute:"noicon"},timeTilHide:{type:Number,reflect:!0,attribute:"timetilhide"},trigger:{type:String,reflect:!0},triggerElement:{type:Object,attribute:!1},variant:{type:String,reflect:!0},visible:{type:Boolean,reflect:!0}}}static get styles(){return[K,J,Q]}static register(e="auro-toast"){c.prototype.registerComponent(e,Y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-toast")}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.fadeOutTimer),clearTimeout(this.closeTimer)}_returnFocus(){const e=(this.trigger?document.getElementById(this.trigger):null)??this.triggerElement;e&&e.focus()}clickToClose(){this._returnFocus(),clearTimeout(this.fadeOutTimer),clearTimeout(this.closeTimer),this.closeToast()}fadeOutToast(){if(!this.disableAutoHide&&this.visible){const e=this.shadowRoot.querySelector(".toastContainer");e&&e.classList.add("hidden"),clearTimeout(this.closeTimer),this.closeTimer=setTimeout(()=>{this.closeToast()},300)}}closeToast(){this.visible&&(clearTimeout(this.fadeOutTimer),clearTimeout(this.closeTimer),this.visible=!1,this.dispatchEvent(new CustomEvent("onToastClose",{bubbles:!0,composed:!0,detail:this})),this.dispatchEvent(new CustomEvent("toast-close",{bubbles:!0,composed:!0,detail:{visible:!1}})))}setOnClick(){window.innerWidth<767&&(this.onclick=e=>{const t=this.shadowRoot?.querySelector('[part="close-button"]');t&&e.composedPath().includes(t)||this.fadeOutToast()})}getVariantIcon(){const e={success:this.successSvg,error:this.errorSvg,default:this.infoSvg};return e[this.variant]||e.default}connectedCallback(){super.connectedCallback(),this.setOnClick(),this._scheduleAutoHide();const e=new CustomEvent("toast-request-announce",{bubbles:!0,cancelable:!0,composed:!0}),t=this.dispatchEvent(e);this._isStandalone=t&&!this._hasAncestorLiveRegion(),this._syncStandaloneRole()}_syncStandaloneRole(){this._isStandalone?this.setAttribute("role","error"===this.variant?"alert":"status"):this.removeAttribute("role")}_hasAncestorLiveRegion(){let e=this.parentElement;for(;e;){if(["polite","assertive"].includes(e.getAttribute?.("aria-live"))||["alert","status","log"].includes(e.getAttribute?.("role")))return!0;e=e.parentElement??e.getRootNode()?.host??null}return!1}updated(e){e.has("visible")&&this.handleSlotContent(),e.has("variant")&&(clearTimeout(this.fadeOutTimer),clearTimeout(this.closeTimer),this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden"),this._syncStandaloneRole()),this._scheduleAutoHide()}_scheduleAutoHide(){this.visible&&!this.disableAutoHide&&"error"!==this.variant&&(clearTimeout(this.fadeOutTimer),this.fadeOutTimer=setTimeout(()=>{this.fadeOutToast()},this.timeTilHide||5e3))}handleSlotContent(){try{const e=this.querySelector('[slot="customSvg"]');if(e){const t=e.cloneNode(!0),s=this.shadowRoot.querySelector(".typeIcon");s&&(t.setAttribute("slot","svg"),s.appendChild(t))}}catch(e){console.error("handleSlotContent",e)}}render(){return r`
+`;class Y extends t{constructor(){super(),this._initializeDefaults()}_initializeDefaults(){this.closeDom=(new DOMParser).parseFromString(V,"text/html"),this.closeSvg=this.closeDom.body.firstChild,this.closeSvg.setAttribute("slot","svg"),this.successDom=(new DOMParser).parseFromString(P,"text/html"),this.successSvg=this.successDom.body.firstChild,this.successSvg.setAttribute("slot","svg"),this.errorDom=(new DOMParser).parseFromString(X,"text/html"),this.errorSvg=this.errorDom.body.firstChild,this.errorSvg.setAttribute("slot","svg"),this.infoDom=(new DOMParser).parseFromString(j,"text/html"),this.infoSvg=this.infoDom.body.firstChild,this.infoSvg.setAttribute("slot","svg");const e=new l;this.buttonTag=e.generateTag("auro-button","12.3.2",U),this.iconTag=e.generateTag("auro-icon","9.2.0",G),this.runtimeUtils=new c,this.fadeOutTimer=void 0,this.closeTimer=void 0,this._isStandalone=!1}static get properties(){return{...t.properties,disableAutoHide:{type:Boolean,reflect:!0,attribute:"disableautohide"},noIcon:{type:Boolean,reflect:!0,attribute:"noicon"},timeTilHide:{type:Number,reflect:!0,attribute:"timetilhide"},trigger:{type:String,reflect:!0},triggerElement:{type:Object,attribute:!1},variant:{type:String,reflect:!0},visible:{type:Boolean,reflect:!0}}}static get styles(){return[K,J,Q]}static register(e="auro-toast"){c.prototype.registerComponent(e,Y)}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-toast")}disconnectedCallback(){super.disconnectedCallback(),clearTimeout(this.fadeOutTimer),clearTimeout(this.closeTimer)}_returnFocus(){const e=(this.trigger?document.getElementById(this.trigger):null)??this.triggerElement;e&&e.focus()}clickToClose(){this._returnFocus(),clearTimeout(this.fadeOutTimer),clearTimeout(this.closeTimer),this.closeToast()}fadeOutToast(){if(!this.disableAutoHide&&this.visible){const e=this.shadowRoot.querySelector(".toastContainer");e&&e.classList.add("hidden"),clearTimeout(this.closeTimer),this.closeTimer=setTimeout(()=>{this.closeToast()},300)}}closeToast(){this.visible&&(clearTimeout(this.fadeOutTimer),clearTimeout(this.closeTimer),this.visible=!1,this.dispatchEvent(new CustomEvent("onToastClose",{bubbles:!0,composed:!0,detail:this})),this.dispatchEvent(new CustomEvent("toast-close",{bubbles:!0,composed:!0,detail:{visible:!1,id:this.id}})))}setOnClick(){window.innerWidth<767&&(this.onclick=e=>{const t=this.shadowRoot?.querySelector('[part="close-button"]');t&&e.composedPath().includes(t)||this.fadeOutToast()})}getVariantIcon(){const e={success:this.successSvg,error:this.errorSvg,default:this.infoSvg};return e[this.variant]||e.default}connectedCallback(){super.connectedCallback(),this.setOnClick(),this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden"),this._scheduleAutoHide();const e=new CustomEvent("toast-request-announce",{bubbles:!0,cancelable:!0,composed:!0}),t=this.dispatchEvent(e);this._isStandalone=t&&!this._hasAncestorLiveRegion(),this._syncStandaloneRole()}_syncStandaloneRole(){this._isStandalone?this.setAttribute("role","error"===this.variant?"alert":"status"):this.removeAttribute("role")}_hasAncestorLiveRegion(){let e=this.parentElement;for(;e;){if(["polite","assertive"].includes(e.getAttribute?.("aria-live"))||["alert","status","log"].includes(e.getAttribute?.("role")))return!0;e=e.parentElement??e.getRootNode()?.host??null}return!1}updated(e){e.has("visible")&&(this.handleSlotContent(),this.visible&&(clearTimeout(this.closeTimer),this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden"))),e.has("variant")&&(clearTimeout(this.fadeOutTimer),clearTimeout(this.closeTimer),this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden"),this._syncStandaloneRole()),this._scheduleAutoHide()}_scheduleAutoHide(){clearTimeout(this.fadeOutTimer),this.isConnected&&this.visible&&!this.disableAutoHide&&"error"!==this.variant&&(this.fadeOutTimer=setTimeout(()=>{this.fadeOutToast()},this.timeTilHide||5e3))}handleSlotContent(){try{const e=this.querySelector('[slot="customSvg"]');if(e){const t=e.cloneNode(!0),s=this.shadowRoot.querySelector(".typeIcon");s&&(t.setAttribute("slot","svg"),s.appendChild(t))}}catch(e){console.error("handleSlotContent",e)}}render(){return r`
       ${this.visible?r`
         <div class="toastContainer">
           ${this.noIcon?void 0:r`

package/dist/index.d.ts

@@ -108,7 +108,7 @@ Use the trigger attribute instead if you prefer a declarative approach. */
   "triggerElement"?: AuroToast['triggerElement'];
 
   /** Notifies that the toast has been closed */
-  "ontoast-close"?: (e: CustomEvent<{ visible: boolean }>) => void;
+  "ontoast-close"?: (e: CustomEvent<{ visible: boolean, id: string }>) => void;
   /** @deprecated Use `toast-close` event instead. - **Deprecated**, use `toast-close` event instead. */
   "ononToastClose"?: (e: CustomEvent<Object>) => void;
 }

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroToast,a as AuroToaster}from"./auro-toaster-BghWbuzd.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";
+export{A as AuroToast,a as AuroToaster}from"./auro-toaster-B1fChnda.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";

package/dist/registered.js

@@ -1 +1 @@
-import{A as i,a as t}from"./auro-toaster-BghWbuzd.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register(),t.register();
+import{A as i,a as t}from"./auro-toaster-B1fChnda.js";import"lit";import"lit/static-html.js";import"lit/directives/class-map.js";import"lit/directives/if-defined.js";i.register(),t.register();

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-toast",
-  "version": "0.0.0-pr156.0",
+  "version": "0.0.0-pr156.10",
   "description": "auro-toast HTML custom element",
   "repository": {
     "type": "git",
@@ -84,13 +84,11 @@
   "files": [
     "dist/**/*",
     "demo/**/*",
-    "src/**/*",
     "custom-elements.json",
     "CHANGELOG.md",
     "README.md",
     "LICENSE",
     "NOTICE"
   ],
-  "custom-elements": "custom-elements.json",
   "customElements": "custom-elements.json"
 }

package/src/auro-toast.js

@@ -1,538 +0,0 @@
-// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-/* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
-import { LitElement } from "lit";
-import { html } from "lit/static-html.js";
-
-import { AuroDependencyVersioning } from "@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs";
-import AuroLibraryRuntimeUtils from "@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs";
-import { AuroButton } from "@aurodesignsystem/auro-button/class";
-import { AuroIcon } from "@aurodesignsystem/auro-icon/class";
-
-// Icons
-import errorIcon from "@alaskaairux/icons/dist/icons/alert/error-stroke.mjs";
-import infoIcon from "@alaskaairux/icons/dist/icons/alert/information-stroke.mjs";
-import successIcon from "@alaskaairux/icons/dist/icons/interface/check-stroke.mjs";
-import closeIcon from "@alaskaairux/icons/dist/icons/interface/x-lg.mjs";
-
-import buttonVersion from "./buttonVersion.js";
-import iconVersion from "./iconVersion.js";
-
-import colorCss from "./styles/color.scss";
-import styleCss from "./styles/style.scss";
-import tokensCss from "./styles/tokens.scss";
-
-const DEFAULT_TIME_TIL_FADE_OUT = 5000;
-const FADE_OUT_DURATION = 300;
-
-// See https://git.io/JJ6SJ for "How to document your components using JSDoc"
-/**
- * The `auro-toast` element provides users a way to display short, temporary messages.
- * @customElement auro-toast
- *
- * @csspart type-icon - Apply css to the toast type icon
- * @csspart close-button - Apply css to the toast close button
- * @fires onToastClose - **Deprecated**, use `toast-close` event instead.
- * @event toast-close - Notifies that the toast has been closed
- */
-
-// build the component class
-export class AuroToast extends LitElement {
-  constructor() {
-    super();
-
-    this._initializeDefaults();
-  }
-
-  _initializeDefaults() {
-    /**
-     * @private
-     */
-    this.closeDom = new DOMParser().parseFromString(closeIcon.svg, "text/html");
-
-    /**
-     * @private
-     */
-    this.closeSvg = this.closeDom.body.firstChild;
-    this.closeSvg.setAttribute("slot", "svg");
-
-    /**
-     * @private
-     */
-    this.successDom = new DOMParser().parseFromString(
-      successIcon.svg,
-      "text/html",
-    );
-
-    /**
-     * @private
-     */
-    this.successSvg = this.successDom.body.firstChild;
-
-    this.successSvg.setAttribute("slot", "svg");
-
-    /**
-     * @private
-     */
-    this.errorDom = new DOMParser().parseFromString(errorIcon.svg, "text/html");
-
-    /**
-     * @private
-     */
-    this.errorSvg = this.errorDom.body.firstChild;
-    this.errorSvg.setAttribute("slot", "svg");
-
-    /**
-     * @private
-     */
-    this.infoDom = new DOMParser().parseFromString(infoIcon.svg, "text/html");
-
-    /**
-     * @private
-     */
-    this.infoSvg = this.infoDom.body.firstChild;
-    this.infoSvg.setAttribute("slot", "svg");
-
-    const versioning = new AuroDependencyVersioning();
-
-    /**
-     * @private
-     */
-    this.buttonTag = versioning.generateTag(
-      "auro-button",
-      buttonVersion,
-      AuroButton,
-    );
-
-    /**
-     * @private
-     */
-    this.iconTag = versioning.generateTag("auro-icon", iconVersion, AuroIcon);
-
-    /**
-     * @private
-     */
-    this.runtimeUtils = new AuroLibraryRuntimeUtils();
-
-    /**
-     * @private
-     */
-    this.fadeOutTimer = undefined;
-
-    /**
-     * @private
-     */
-    this.closeTimer = undefined;
-
-    /**
-     * True when the toast is not inside an auro-toaster and must manage its
-     * own live region announcement. Set once in connectedCallback.
-     * Default -- assumes toast is inside toaster.
-     * @private
-     */
-    this._isStandalone = false;
-  }
-
-  // This function is to define props used within the scope of this component
-  // Be sure to review  https://lit.dev/docs/components/properties/
-  // to understand how to use reflected attributes with your property settings.
-  static get properties() {
-    return {
-      ...LitElement.properties,
-
-      /**
-       * Prevents the toast from auto-hiding on the default time.
-       */
-      disableAutoHide: {
-        type: Boolean,
-        reflect: true,
-        attribute: "disableautohide",
-      },
-
-      /**
-       * Removes icon from the toast UI.
-       */
-      noIcon: {
-        type: Boolean,
-        reflect: true,
-        attribute: "noicon",
-      },
-
-      /**
-       * Sets the time in milliseconds until the toast hides.
-       */
-      timeTilHide: {
-        type: Number,
-        reflect: true,
-        attribute: "timetilhide",
-      },
-
-      /**
-       * The id of the element that triggered the toast.
-       * When the toast is manually closed, focus will return to this element.
-       * Takes precedence over the triggerElement property if both are set.
-       */
-      trigger: {
-        type: String,
-        reflect: true,
-      },
-
-      /**
-       * A direct reference to the element that triggered the toast.
-       * When the toast is manually closed, focus will return to this element.
-       * Use the trigger attribute instead if you prefer a declarative approach.
-       * @type {HTMLElement}
-       */
-      triggerElement: {
-        type: Object,
-        attribute: false,
-      },
-
-      /**
-       * Component will render visually based on which variant value is set.
-       * @type {'error' | 'success' | 'custom'}
-       */
-      variant: {
-        type: String,
-        reflect: true,
-      },
-
-      /**
-       * Sets state of toast to visible
-       */
-      visible: {
-        type: Boolean,
-        reflect: true,
-      }
-    };
-  }
-
-  static get styles() {
-    return [styleCss, colorCss, tokensCss];
-  }
-
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-toast"] - The name of the element that you want to register.
-   *
-   * @example
-   * AuroToast.register("custom-toast") // this will register this element to <custom-toast/>
-   *
-   */
-  static register(name = "auro-toast") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroToast);
-  }
-
-  firstUpdated() {
-    // Add the tag name as an attribute if it is different than the component name
-    this.runtimeUtils.handleComponentTagRename(this, "auro-toast");
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearTimeout(this.fadeOutTimer);
-    clearTimeout(this.closeTimer);
-  }
-
-  /**
-   * Returns focus to the trigger element when the toast is manually closed.
-   * Not called on auto-dismiss — moving focus during auto-dismiss would
-   * interrupt the AT user's current position in the page.
-   * @private
-   * @returns {void}
-   */
-  _returnFocus() {
-    const target = (this.trigger ? document.getElementById(this.trigger) : null) ??
-      this.triggerElement;
-
-    if (target) {
-      target.focus();
-    }
-  }
-
-  /**
-   * @private
-   * @returns {void}
-   */
-  clickToClose() {
-    this._returnFocus();
-    clearTimeout(this.fadeOutTimer);
-    clearTimeout(this.closeTimer);
-    this.closeToast();
-  }
-
-  /**
-   * @private
-   * @returns {void}
-   */
-  fadeOutToast() {
-    if (!this.disableAutoHide && this.visible) {
-      const toastContainer = this.shadowRoot.querySelector(".toastContainer");
-      if (toastContainer) {
-        toastContainer.classList.add("hidden");
-      }
-
-      clearTimeout(this.closeTimer);
-      this.closeTimer = setTimeout(() => {
-        this.closeToast();
-      }, FADE_OUT_DURATION);
-    }
-  }
-
-  /**
-   * @private
-   * @returns {void}
-   */
-  closeToast() {
-    // Guards against re-entry -- e.g. a close-button click on mobile widths
-    // both closes the toast directly and bubbles to the host's own onclick
-    // handler (see setOnClick()), which would otherwise schedule a second,
-    // untracked close via fadeOutToast().
-    if (!this.visible) {
-      return;
-    }
-
-    clearTimeout(this.fadeOutTimer);
-    clearTimeout(this.closeTimer);
-    this.visible = false;
-
-    /**
-     * Emits closed toast event.
-     *
-     * @deprecated Use `toast-close` event instead.
-     * @event onToastClose
-     * @type {Object}
-     */
-    this.dispatchEvent(
-      new CustomEvent("onToastClose", {
-        bubbles: true,
-        composed: true,
-        detail: this, // unchanged for backwards compatibility; use `toast-close` for the new `{ visible }` shape
-      }),
-    );
-
-    /**
-     * Emits closed toast event.
-     *
-     * @event toast-close
-     * @type {{ visible: boolean }}
-     */
-    this.dispatchEvent(
-      new CustomEvent("toast-close", {
-        bubbles: true,
-        composed: true,
-        detail: { visible: false },
-      }),
-    );
-  }
-
-  /**
-   * For mobile, set the onclick function so the toast can be dismissed if it is tapped on anywhere inside the toast.
-   * Ignores clicks on the close button -- clickToClose() already handles those, and re-running
-   * fadeOutToast() for the same click is what caused a double close (see AB#1643472).
-   * @private
-   * @returns {void}
-   */
-  setOnClick() {
-    const mobileBreakPoint = 767;
-    if (window.innerWidth < mobileBreakPoint) {
-      this.onclick = (event) => {
-        const closeButton = this.shadowRoot?.querySelector('[part="close-button"]');
-        if (closeButton && event.composedPath().includes(closeButton)) {
-          return;
-        }
-        this.fadeOutToast();
-      };
-    }
-  }
-
-  /**
-   * Determines which type icon to render based on the variant prop.
-   * @private
-   * @returns {HTMLElement} - The icon element to render.
-   */
-  getVariantIcon() {
-    const VARIANT_ICONS = {
-      success: this.successSvg,
-      error: this.errorSvg,
-      default: this.infoSvg,
-    };
-
-    return VARIANT_ICONS[this.variant] || VARIANT_ICONS.default;
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.setOnClick();
-
-    // Re-arm auto-hide on reconnect (e.g. re-parenting the node elsewhere in
-    // the DOM) -- updated() does not re-run just because connectedCallback()
-    // fired again, since no reactive property changed as a result.
-    this._scheduleAutoHide();
-
-    // Dispatch a cancelable event so auro-toaster can signal it will handle
-    // announcements. If nothing cancels the event the toast is standalone and
-    // must register its own live region on the host element — before
-    // any visibility change — so the AT has already observed it as a live
-    // region by the time content is rendered into the shadow DOM.
-    const event = new CustomEvent('toast-request-announce', {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-    });
-
-    // NOTE — reverse logic:
-    // dispatchEvent() returns TRUE when nobody called preventDefault(), which
-    // means no auro-toaster was listening — the toast is standalone and must
-    // own its live region. It returns FALSE when a toaster cancelled the event,
-    // signalling that the toaster's aria-live region will handle announcements.
-    const eventNotPrevented = this.dispatchEvent(event);
-
-    // Secondary check: even if no toaster answered the event, the toast may
-    // be inside another element that already owns a live region (e.g. a plain
-    // div[aria-live="polite"]). Setting a role on the host in that case would
-    // create a nested live region. aria-live="off" is intentionally excluded
-    // — it disables live region behavior and is not an active announcer.
-    this._isStandalone = eventNotPrevented && !this._hasAncestorLiveRegion();
-
-    this._syncStandaloneRole();
-  }
-
-  /**
-   * Sets or removes the live-region role on the host depending on whether
-   * the toast is standalone. Extracted so connectedCallback and updated()
-   * stay in sync without duplicating the logic.
-   * @private
-   * @returns {void}
-   */
-  _syncStandaloneRole() {
-    if (this._isStandalone) {
-      this.setAttribute('role', this.variant === 'error' ? 'alert' : 'status');
-    } else {
-      this.removeAttribute('role');
-    }
-  }
-
-  /**
-   * Walks the DOM ancestors (crossing shadow boundaries) looking for any
-   * active live region — either an aria-live="polite/assertive" attribute or
-   * an implicit live region role (alert, status, log).
-   * aria-live="off" is not considered active and is intentionally ignored.
-   * @private
-   * @returns {boolean}
-   */
-  _hasAncestorLiveRegion() {
-    let node = this.parentElement;
-    while (node) {
-      if (
-        ['polite', 'assertive'].includes(node.getAttribute?.('aria-live')) ||
-        ['alert', 'status', 'log'].includes(node.getAttribute?.('role'))
-      ) {
-        return true;
-      }
-      // Traverse up, crossing shadow DOM boundaries if needed
-      node = node.parentElement ?? node.getRootNode()?.host ?? null;
-    }
-    return false;
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has("visible")) {
-      this.handleSlotContent();
-    }
-
-    // Keep the standalone role in sync if variant changes after connection.
-    if (changedProperties.has("variant")) {
-      clearTimeout(this.fadeOutTimer);
-      clearTimeout(this.closeTimer);
-
-      // Cancelling a pending close mid-fade must also undo fadeOutToast()'s
-      // visual state, otherwise the toast is left invisible (via the
-      // "hidden" class) but still marked visible, with no close ever fired.
-      this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden");
-
-      this._syncStandaloneRole();
-    }
-
-    this._scheduleAutoHide();
-  }
-
-  /**
-   * (Re-)schedules the auto-hide timer based on current visible/disableAutoHide/
-   * variant/timeTilHide values. Called from updated() on property changes and
-   * from connectedCallback() to re-arm auto-hide after a reconnect (e.g. the
-   * node is re-parented elsewhere in the DOM), since updated() does not run
-   * again on reconnect alone.
-   * @private
-   * @returns {void}
-   */
-  _scheduleAutoHide() {
-    // do not auto dismiss for error toasts or if disableAutoHide is set
-    if (this.visible && !this.disableAutoHide && this.variant !== "error") {
-      clearTimeout(this.fadeOutTimer);
-      this.fadeOutTimer = setTimeout(() => {
-        this.fadeOutToast();
-      }, this.timeTilHide || DEFAULT_TIME_TIL_FADE_OUT);
-    }
-  }
-
-  /**
-   * Mirrors any defined custom type svg into the correct place in the template.
-   * @private
-   * @returns {void}
-   */
-  handleSlotContent() {
-    try {
-      const customSvg = this.querySelector(`[slot="customSvg"]`);
-
-      if (customSvg) {
-        const iconSvg = customSvg.cloneNode(true);
-        const typeIcon = this.shadowRoot.querySelector(".typeIcon");
-
-        if (typeIcon) {
-          iconSvg.setAttribute("slot", "svg");
-          typeIcon.appendChild(iconSvg);
-        }
-      }
-    } catch (error) {
-      console.error("handleSlotContent", error); // eslint-disable-line no-console
-    }
-  }
-
-  render() {
-    return html`
-      ${this.visible
-        ? html`
-        <div class="toastContainer">
-          ${this.noIcon
-            ? undefined
-            : html`
-            <${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
-              ${this.variant === "custom" ? undefined : html`${this.getVariantIcon()}`}
-            </${this.iconTag}>
-          `
-          }
-          <div class="message body-default"><slot></slot></div>
-          <${this.buttonTag}
-            variant="flat"
-            shape="circle"
-            size="xs"
-            appearance=${this.variant !== "error" && this.variant !== "success" ? "inverse" : this.appearance}
-            @click="${this.clickToClose}"
-            part="close-button"
-            class="closeButton">
-            <${this.iconTag} customColor customSvg>
-              ${this.closeSvg}
-            </${this.iconTag}>
-            <span slot="ariaLabel">Close this notification.</span>
-          </${this.buttonTag}>
-        </div>
-      `
-        : undefined
-      }
-    `;
-  }
-}

package/src/auro-toaster.js

@@ -1,175 +0,0 @@
-// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-import { html, LitElement } from "lit";
-import AuroLibraryRuntimeUtils from "@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs";
-import styleCss from "./styles/style-toaster.scss";
-
-export class AuroToaster extends LitElement {
-  static get styles() {
-    return [styleCss];
-  }
-
-  constructor() {
-    super();
-    // Initialised in the constructor so they survive disconnect/reconnect.
-    // If these were in connectedCallback, a reconnected toaster would forget
-    // which error toasts it had already announced and could re-announce them.
-    this._assertiveResetTimer = undefined;
-    this._announcedErrorToasts = new WeakSet();
-
-    // Cancel the standalone live region request from any child toast — the
-    // toaster's own aria-live region handles all announcements.
-    // Calling preventDefault() causes dispatchEvent() on the toast to return
-    // false, which the toast reads as "a toaster is present — do not set a
-    // standalone live region role on the host element."
-    this._onToastRequestAnnounce = (e) => e.preventDefault();
-  }
-
-  /**
-   * This will register this element with the browser.
-   * @param {string} [name="auro-toaster"] - The name of the element that you want to register to.
-   *
-   * @example
-   * AuroToaster.register("custom-toaster") // this will register this element to <custom-toaster/>
-   *
-   */
-  static register(name = "auro-toaster") {
-    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroToaster);
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener('toast-request-announce', this._onToastRequestAnnounce);
-
-    /**
-     * @private
-     *
-     * Observes toast attribute changes to determine when we should temporarily
-     * switch the live region from "polite" → "assertive".
-     *
-     * Supported trigger paths:
-     * 1. Normal path:
-     *    - A toast becomes visible
-     *    - AND it is already an error toast
-     * 2. Defensive fallback (unsupported but possible misuse):
-     *    - A visible toast has its variant changed to "error"
-     *
-     * Note:
-     * Toasts are not intended to mutate while visible. This fallback exists
-     * only to preserve accessibility behavior if that contract is violated.
-     */
-    this._observer = new MutationObserver((mutations) => {
-      for (const mutation of mutations) {
-        const target = mutation.target;
-
-        // Only react to auro-toast elements (including versioned tags like
-        // auro-toast_1_2_3). Explicitly ignore auro-toaster itself.
-        if (!/^auro-toast(_|$)/u.test(target.localName ?? '')) continue;
-
-        const isVisible = target.hasAttribute?.('visible');
-        const isError = target.getAttribute?.('variant') === 'error';
-
-        // ---------------------------------------------------------------------
-        // Case 1: supported behavior
-        // A toast becomes visible AND is already an error toast
-        // ---------------------------------------------------------------------
-        const becameVisible =
-          mutation.attributeName === 'visible' &&
-          isVisible &&
-          isError;
-
-        // ---------------------------------------------------------------------
-        // Case 2: defensive fallback
-        // A toast is already visible and its variant is changed to "error"
-        // (unsupported usage pattern, but we handle it safely for a11y)
-        // ---------------------------------------------------------------------
-        const becameErrorWhileVisible =
-          mutation.attributeName === 'variant' &&
-          mutation.oldValue !== 'error' &&
-          isVisible &&
-          isError;
-
-        if (becameVisible || becameErrorWhileVisible) {
-          this._setAssertiveTemporarily();
-        }
-      }
-    });
-
-    this._observer.observe(this, {
-      subtree: true,
-
-      // REQUIRED: without this, attribute changes will not trigger the observer
-      attributes: true,
-
-      // We only care about these two attributes for performance and clarity
-      attributeFilter: ['visible', 'variant'],
-
-      // REQUIRED for detecting transitions (e.g. non-error → error)
-      attributeOldValue: true,
-    });
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._observer?.disconnect();
-    clearTimeout(this._assertiveResetTimer);
-    this.removeEventListener('toast-request-announce', this._onToastRequestAnnounce);
-
-    // Reset the live region to polite so a reconnected toaster does not
-    // inherit a stale assertive state left behind by a cleared timer.
-    const liveRegion = this.shadowRoot?.querySelector('[aria-live]');
-    if (liveRegion) {
-      liveRegion.setAttribute('aria-live', 'polite');
-    }
-  }
-
-  /**
-   * Temporarily sets the live region to assertive so the error toast
-   * interrupts the screen reader, then resets to polite after 3 seconds.
-   * This ensures subsequent polite toasts don't keep interrupting the user,
-   * even if the error toast remains visible (errors are never auto-dismissed).
-   * @private
-   */
-  _setAssertiveTemporarily() {
-    const liveRegion = this.shadowRoot?.querySelector('[aria-live]');
-    if (!liveRegion) return;
-
-    clearTimeout(this._assertiveResetTimer);
-    liveRegion.setAttribute('aria-live', 'assertive');
-
-    this._assertiveResetTimer = setTimeout(() => {
-      liveRegion.setAttribute('aria-live', 'polite');
-    }, 3000);
-  }
-
-  render() {
-    return html`
-      <div class="toaster-wrapper" aria-live="polite" aria-atomic="false">
-        <slot @slotchange="${this._onSlotChange}"></slot>
-      </div>
-    `;
-  }
-
-  /**
-   * Handles slot changes — checks if a newly slotted error toast
-   * is already visible at the time it is added to the toaster.
-   * @private
-   */
-  _onSlotChange(e) {
-    const newErrorToast = e.target.assignedElements({ flatten: true })
-      .find(el =>
-        /^auro-toast(_|$)/u.test(el.localName ?? '') &&
-        el.getAttribute('variant') === 'error' &&
-        el.hasAttribute('visible') &&
-        !this._announcedErrorToasts.has(el)
-      );
-
-    if (newErrorToast) {
-      this._announcedErrorToasts.add(newErrorToast);
-      this._setAssertiveTemporarily();
-    }
-  }
-}

package/src/buttonVersion.js

@@ -1 +0,0 @@
-export default "12.3.2";

package/src/iconVersion.js

@@ -1 +0,0 @@
-export default "9.2.0";

package/src/index.js

@@ -1,4 +0,0 @@
-import { AuroToast } from "./auro-toast.js";
-import { AuroToaster } from "./auro-toaster.js";
-
-export { AuroToast, AuroToaster };

package/src/registered.js

@@ -1,5 +0,0 @@
-import { AuroToast } from "./auro-toast.js";
-import { AuroToaster } from "./auro-toaster.js";
-
-AuroToast.register();
-AuroToaster.register();

package/src/styles/color.scss

@@ -1,34 +0,0 @@
-// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-// Import Auro tokens
-@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-
-:host([visible]) {
-  background-color: var(--ds-auro-toast-container-color);
-  color: var(--ds-auro-toast-text-color);
-
-  .typeIcon {
-    color: var(--ds-auro-toast-icon-color);
-  }
-
-  .closeButton {
-    &:hover {
-      background-color: var(--ds-auro-toast-close-button-hover-container-color);
-    }
-  }
-}
-
-:host([variant='error']) {
-  --ds-auro-toast-container-color: var(--ds-basic-color-status-error-subtle, #{v.$ds-basic-color-status-error-subtle});
-  --ds-auro-toast-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
-  --ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-}
-
-:host([variant='success']) {
-  --ds-auro-toast-container-color: var(--ds-basic-color-status-success-subtle, #{v.$ds-basic-color-status-success-subtle});
-  --ds-auro-toast-icon-color: var(--ds-basic-color-status-success, #{v.$ds-basic-color-status-success});
-  --ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
-}

package/src/styles/style-toaster.scss

@@ -1,27 +0,0 @@
-// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-// Import Auro tokens
-@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
-
-// container styles - defines the look of the outer custom component
-.toaster-wrapper {
-  position: fixed;
-  z-index: var(--ds-depth-modal, vac.$ds-depth-modal);
-  right: 2%;
-  bottom: 2%;
-  left: 2%;
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: flex-end;
-  gap: var(--ds-size-200, vac.$ds-size-200);
-  pointer-events: none;
-
-  @media (width >= #{vac.$ds-grid-breakpoint-lg}) {
-    right: 1%;
-    left: unset;
-    width: 100%;
-  }
-}

package/src/styles/style.scss

@@ -1,61 +0,0 @@
-// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
-// See LICENSE in the project root for license information.
-
-// ---------------------------------------------------------------------
-
-// Import Auro tokens
-@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
-
-@use '@aurodesignsystem/webcorestylesheets/dist/bundled/type/classes.alaska.min.css';
-
-// display: inherit keeps the host in the accessibility tree when not visible.
-// display: none removes it entirely from the accessibility tree —
-//
-// This is used to prevent visual artifacts from toasts that remain in the DOM
-// after hiding.
-:host {
-  display: inherit;
-}
-
-:host([visible]) {
-  display: inline-block;
-  min-width: 100%;
-  border-radius: var(--ds-size-100, vac.$ds-size-100);
-  box-shadow: var(--ds-elevation-200, vac.$ds-elevation-200);
-  pointer-events: auto;
-
-  // Phones (< sm) keep the full-width sizing from the base rule above.
-  // From the sm breakpoint up, use fixed pixel bounds so the toast is sized
-  // consistently across tablet and desktop widths instead of shrinking to a
-  // small fraction of the available space.
-  @media (width >= #{vac.$ds-grid-breakpoint-sm}) {
-    min-width: 200px;
-    max-width: 500px;
-  }
-
-  .toastContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: flex-start;
-    padding: var(--ds-size-200, vac.$ds-size-200) var(--ds-size-150, vac.$ds-size-150);
-    gap: var(--ds-size-200, vac.$ds-size-200);
-  }
-
-  .hidden {
-    opacity: 0;
-    transition: visibility 0s 300ms, opacity 300ms ease-out;
-    visibility: hidden;
-  }
-
-  [auro-icon] {
-    --ds-auro-icon-size: var(--ds-size-300, #{vac.$ds-size-300});
-  }
-
-  .message {
-    flex: 1;
-  }
-
-  .closeButton {
-    border-radius: 50%;
-  }
-}

package/src/styles/tokens.scss

@@ -1,8 +0,0 @@
-@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
-
-:host {
-  --ds-auro-toast-close-button-hover-container-color: var(--ds-advanced-color-button-tertiary-background-hover, #{v.$ds-advanced-color-button-tertiary-background-hover});
-  --ds-auro-toast-container-color: var(--ds-advanced-color-shared-background-strong, #{v.$ds-advanced-color-shared-background-strong});
-  --ds-auro-toast-icon-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
-  --ds-auro-toast-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
-}