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

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

@@ -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

@@ -821,13 +821,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 },
       }),
     );
   }

package/demo/index.min.js

@@ -572,13 +572,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 },
       }),
     );
   }

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-Cl6LVy6n.js}

@@ -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._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`
       ${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-Cl6LVy6n.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-Cl6LVy6n.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.2",
   "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});
-}