@aurodesignsystem-dev/auro-toast 0.0.0-pr121.2 → 0.0.0-pr121.21

package/demo/basic.min.js

@@ -269,7 +269,7 @@ var iconVersion = '9.1.1';
 var colorCss = i$5`: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)}
 `;
 
-var styleCss$1 = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-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-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-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-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-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-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-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-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-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-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-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-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-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-weight:var(--wcss-heading-xs-weight, 450);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-weight:var(--wcss-heading-2xs-weight, 450);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-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-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-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-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-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-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-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([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 (576px <= width < 1024px){:host([visible]){min-width:33%;max-width:50%}}@media (width >= 1024px){: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%}
+var styleCss$1 = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-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-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-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-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-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-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-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-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-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-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-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-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-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-weight:var(--wcss-heading-xs-weight, 450);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-weight:var(--wcss-heading-2xs-weight, 450);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-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-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-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-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-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-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-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 (576px <= width < 1024px){:host([visible]){min-width:33%;max-width:50%}}@media (width >= 1024px){: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%}
 `;
 
 var tokensCss = i$5`: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)}
@@ -374,6 +374,14 @@ class AuroToast extends i$2 {
      * @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
@@ -407,6 +415,27 @@ class AuroToast extends i$2 {
         reflect: true,
       },
 
+      /**
+       * 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'}
@@ -447,11 +476,28 @@ class AuroToast extends i$2 {
     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);
   }
@@ -529,6 +575,71 @@ class AuroToast extends i$2 {
   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) {
@@ -536,8 +647,10 @@ class AuroToast extends i$2 {
       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
@@ -574,44 +687,42 @@ class AuroToast extends i$2 {
 
   render() {
     return u$2`
-      <div role="status">
-        ${
-          this.visible
-            ? u$2`
-          <div class="toastContainer">
-            ${
-              this.noIcon
-                ? undefined
-                : u$2`
-              <${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
-                ${this.variant === "custom" ? undefined : u$2`${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</span>
-            </${this.buttonTag}>
-          </div>
-        `
-            : undefined
-        }
-      </div>
+      ${
+        this.visible
+          ? u$2`
+        <div class="toastContainer">
+          ${
+            this.noIcon
+              ? undefined
+              : u$2`
+            <${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
+              ${this.variant === "custom" ? undefined : u$2`${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
+      }
     `;
   }
 }
 
-var styleCss = i$5`:host{position:fixed;z-index:var(--ds-depth-modal, 300);right:2%;bottom:2%;left:2%;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--ds-size-200, 1rem);pointer-events:none}@media (width >= 1024px){:host{right:1%;left:unset;width:100%}}
+var styleCss = i$5`.toaster-wrapper{position:fixed;z-index:var(--ds-depth-modal, 300);right:2%;bottom:2%;left:2%;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--ds-size-200, 1rem);pointer-events:none}@media (width >= 1024px){.toaster-wrapper{right:1%;left:unset;width:100%}}
 `;
 
 // Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
@@ -623,20 +734,165 @@ class AuroToaster extends i$2 {
     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.
+   * @param {string} [name="auro-toaster"] - The name of the element that you want to register to.
    *
    * @example
-   * AuroToaster.register("custom-toast") // this will register this element to <custom-toast/>
+   * 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 x$2`<slot role="status"></slot>`;
+    return x$2`
+      <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/demo/index.md

@@ -47,8 +47,12 @@ showToast = (toastID) => {
   <auro-button id="basicToastBtn">
     Show default notification
   </auro-button>
+  <!--
+  NOTE: The manually added style is NOT necessary for use,
+  Demo purposes ONLY!
+  -->
   <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
-    Default notification with no error type
+    Default notification with no error type.
   </auro-toast>
   <!-- AURO-GENERATED-CONTENT:END -->
 </div>
@@ -61,8 +65,12 @@ showToast = (toastID) => {
 <auro-button id="basicToastBtn">
   Show default notification
 </auro-button>
+<!--
+NOTE: The manually added style is NOT necessary for use,
+Demo purposes ONLY!
+-->
 <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
-  Default notification with no error type
+  Default notification with no error type.
 </auro-toast>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->