@aurodesignsystem-dev/auro-toast 0.0.0-pr147.2 → 0.0.0-pr147.20

package/custom-elements.json

@@ -224,14 +224,14 @@
             {
               "name": "toast-close",
               "type": {
-                "text": "{ visible: boolean }"
+                "text": "{ visible: boolean, id: string }"
               },
               "description": "Notifies that the toast has been closed"
             },
             {
               "name": "onToastClose",
               "type": {
-                "text": "{ visible: boolean }"
+                "text": "Object"
               },
               "description": "**Deprecated**, use `toast-close` event instead.",
               "deprecated": "Use `toast-close` event instead."

package/demo/api.min.js

@@ -785,13 +785,13 @@ class AuroToast extends i$2 {
      *
      * @deprecated Use `toast-close` event instead.
      * @event onToastClose
-     * @type {{ visible: boolean }}
+     * @type {Object}
      */
     this.dispatchEvent(
       new CustomEvent("onToastClose", {
         bubbles: true,
         composed: true,
-        detail: { visible: this.visible },
+        detail: this, // unchanged for backwards compatibility; use `toast-close` for the new `{ visible }` shape
       }),
     );
 
@@ -799,13 +799,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: this.visible },
+        detail: { visible: false, id: this.id },
       }),
     );
   }

package/demo/index.min.js

@@ -536,13 +536,13 @@ class AuroToast extends i$2 {
      *
      * @deprecated Use `toast-close` event instead.
      * @event onToastClose
-     * @type {{ visible: boolean }}
+     * @type {Object}
      */
     this.dispatchEvent(
       new CustomEvent("onToastClose", {
         bubbles: true,
         composed: true,
-        detail: { visible: this.visible },
+        detail: this, // unchanged for backwards compatibility; use `toast-close` for the new `{ visible }` shape
       }),
     );
 
@@ -550,13 +550,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: this.visible },
+        detail: { visible: false, id: this.id },
       }),
     );
   }

package/dist/{auro-toaster-J1vx9GDk.js → auro-toaster-CkJ5BuKj.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._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")}_returnFocus(){const e=(this.trigger?document.getElementById(this.trigger):null)??this.triggerElement;e&&e.focus()}clickToClose(){this._returnFocus(),this.closeToast(),clearTimeout(this.fadeOutTimer)}fadeOutToast(){if(!this.disableAutoHide){const e=this.shadowRoot.querySelector(".toastContainer");e&&e.classList.add("hidden"),setTimeout(()=>{this.closeToast()},300)}}closeToast(){clearTimeout(this.fadeOutTimer),this.visible=!1,this.dispatchEvent(new CustomEvent("onToastClose",{bubbles:!0,composed:!0,detail:{visible:this.visible}})),this.dispatchEvent(new CustomEvent("toast-close",{bubbles:!0,composed:!0,detail:{visible:this.visible}}))}setOnClick(){window.innerWidth<767&&(this.onclick=()=>{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();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),this._syncStandaloneRole()),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._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")}_returnFocus(){const e=(this.trigger?document.getElementById(this.trigger):null)??this.triggerElement;e&&e.focus()}clickToClose(){this._returnFocus(),this.closeToast(),clearTimeout(this.fadeOutTimer)}fadeOutToast(){if(!this.disableAutoHide){const e=this.shadowRoot.querySelector(".toastContainer");e&&e.classList.add("hidden"),setTimeout(()=>{this.closeToast()},300)}}closeToast(){clearTimeout(this.fadeOutTimer),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=()=>{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();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),this._syncStandaloneRole()),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,9 +108,9 @@ 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<{ visible: boolean }>) => void;
+  "ononToastClose"?: (e: CustomEvent<Object>) => void;
 }
 
 

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroToast,a as AuroToaster}from"./auro-toaster-J1vx9GDk.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-CkJ5BuKj.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-J1vx9GDk.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-CkJ5BuKj.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-pr147.2",
+  "version": "0.0.0-pr147.20",
   "description": "auro-toast HTML custom element",
   "repository": {
     "type": "git",
@@ -84,12 +84,13 @@
   "files": [
     "dist/**/*",
     "demo/**/*",
+    "src/**/*",
     "custom-elements.json",
     "CHANGELOG.md",
     "README.md",
     "LICENSE",
     "NOTICE"
   ],
-  "custom-elements": "./custom-elements.json",
+  "custom-elements": "custom-elements.json",
   "customElements": "custom-elements.json"
 }

package/src/auro-toast.js

@@ -0,0 +1,485 @@
+// 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;
+
+    /**
+     * 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");
+  }
+
+  /**
+   * 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();
+    this.closeToast();
+    clearTimeout(this.fadeOutTimer);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  fadeOutToast() {
+    if (!this.disableAutoHide) {
+      const toastContainer = this.shadowRoot.querySelector(".toastContainer");
+      if (toastContainer) {
+        toastContainer.classList.add("hidden");
+      }
+
+      setTimeout(() => {
+        this.closeToast();
+      }, FADE_OUT_DURATION);
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  closeToast() {
+    clearTimeout(this.fadeOutTimer);
+    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, id: string }}
+     */
+    this.dispatchEvent(
+      new CustomEvent("toast-close", {
+        bubbles: true,
+        composed: true,
+        detail: { visible: false, id: this.id },
+      }),
+    );
+  }
+
+  /**
+   * For mobile, set the onclick function so the toast can be dismissed if it is tapped on anywhere inside the toast.
+   * @private
+   * @returns {void}
+   */
+  setOnClick() {
+    const mobileBreakPoint = 767;
+    if (window.innerWidth < mobileBreakPoint) {
+      this.onclick = () => {
+        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();
+
+    // 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);
+      this._syncStandaloneRole();
+    }
+
+    // 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

@@ -0,0 +1,175 @@
+// 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

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

package/src/iconVersion.js

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

package/src/index.js

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

package/src/registered.js

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

package/src/styles/color.scss

@@ -0,0 +1,34 @@
+// 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

@@ -0,0 +1,27 @@
+// 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

@@ -0,0 +1,61 @@
+// 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

@@ -0,0 +1,8 @@
+@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});
+}