@aurodesignsystem-dev/auro-toast 0.0.0-pr121.19 → 0.0.0-pr121.20

package/README.md

@@ -93,7 +93,7 @@ In cases where the project is not able to process JS assets, there are pre-proce
 NOTE: The manually added style is NOT necessary for use,
 Demo purposes ONLY!
 -->
-<auro-toast  style="display: block; margin: 0.5rem 0;" id="basicToast">
+<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
   Default notification with no error type.
 </auro-toast>
 ```

package/demo/api.md

@@ -49,7 +49,7 @@ The `auro-toast` element provides users a way to display short, temporary messag
   NOTE: The manually added style is NOT necessary for use,
   Demo purposes ONLY!
   -->
-  <auro-toast  style="display: block; margin: 0.5rem 0;" id="basicToast">
+  <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
     Default notification with no error type.
   </auro-toast>
   <!-- AURO-GENERATED-CONTENT:END -->
@@ -67,7 +67,7 @@ The `auro-toast` element provides users a way to display short, temporary messag
 NOTE: The manually added style is NOT necessary for use,
 Demo purposes ONLY!
 -->
-<auro-toast  style="display: block; margin: 0.5rem 0;" id="basicToast">
+<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
   Default notification with no error type.
 </auro-toast>
 ```
@@ -530,7 +530,7 @@ When dynamically injecting `auro-toast` elements at runtime, the consumer is res
 
 The required pattern is a persistent container — a `div` or equivalent — with `aria-live="polite"` or `aria-live="assertive"`* that remains in the DOM at all times. Your application logic then injects `auro-toast` elements into this container at runtime as notifications occur.
 
-**Warning:** Never apply `display: none` to the live region container. Doing so removes it from the accessibility tree entirely, which prevents screen readers from registering the live region. Any toast announcements will be silently lost, resulting in a critical accessibility violation.
+**Warning:** Avoid applying `display: none` to a live region while it is in use. This removes it from the accessibility tree, preventing screen readers from detecting updates. Any announcements triggered during that time will be lost.
 
 `auro-toast` automatically detects any ancestor live region at connection time. When one is found, it defers to that region and does not add its own role, preventing nested live regions.
 

package/demo/basic.min.js

@@ -768,24 +768,53 @@ class AuroToaster extends i$2 {
 
     /**
      * @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.
      */
-    // Only react to visible attribute changes on error toasts.
-     // Other mutations (polite toasts appearing, etc.) should not
-    // override a timed assertive reset already in progress.
     this._observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         const target = mutation.target;
 
-        // Only react to auro-toast elements, not other children that may also
-        // use a "visible" attribute. The regex matches auro-toast and versioned
-        // tag names (e.g. auro-toast_9_2_1) but intentionally excludes
-        // auro-toaster, which shares the same prefix.
+        // 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 isErrorToast = target.getAttribute?.('variant') === 'error';
-        const becameVisible = target.hasAttribute?.('visible');
-
-        if (isErrorToast && becameVisible) {
+        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();
         }
       }
@@ -793,7 +822,15 @@ class AuroToaster extends i$2 {
 
     this._observer.observe(this, {
       subtree: true,
-      attributeFilter: ['visible'],
+
+      // 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,
     });
   }
 

package/demo/index.md

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

package/dist/{auro-toaster-jZvkUugt.js → auro-toaster-C16e0fNp.js}

@@ -103,7 +103,7 @@ import{css as e,LitElement as t,html as s}from"lit";import{unsafeStatic as a,lit
         </div>
       `:void 0}
     `}}var Z=e`.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%}}
-`;class ee extends t{static get styles(){return[Z]}constructor(){super(),this._assertiveResetTimer=void 0,this._announcedErrorToasts=new WeakSet,this._onToastRequestAnnounce=e=>e.preventDefault()}static register(e="auro-toaster"){c.prototype.registerComponent(e,ee)}connectedCallback(){super.connectedCallback(),this.addEventListener("toast-request-announce",this._onToastRequestAnnounce),this._observer=new MutationObserver(e=>{for(const t of e){const e=t.target;if(!/^auro-toast(_|$)/u.test(e.localName??""))continue;const s="error"===e.getAttribute?.("variant"),a=e.hasAttribute?.("visible");s&&a&&this._setAssertiveTemporarily()}}),this._observer.observe(this,{subtree:!0,attributeFilter:["visible"]})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect(),clearTimeout(this._assertiveResetTimer),this.removeEventListener("toast-request-announce",this._onToastRequestAnnounce);const e=this.shadowRoot?.querySelector("[aria-live]");e&&e.setAttribute("aria-live","polite")}_setAssertiveTemporarily(){const e=this.shadowRoot?.querySelector("[aria-live]");e&&(clearTimeout(this._assertiveResetTimer),e.setAttribute("aria-live","assertive"),this._assertiveResetTimer=setTimeout(()=>{e.setAttribute("aria-live","polite")},3e3))}render(){return s`
+`;class ee extends t{static get styles(){return[Z]}constructor(){super(),this._assertiveResetTimer=void 0,this._announcedErrorToasts=new WeakSet,this._onToastRequestAnnounce=e=>e.preventDefault()}static register(e="auro-toaster"){c.prototype.registerComponent(e,ee)}connectedCallback(){super.connectedCallback(),this.addEventListener("toast-request-announce",this._onToastRequestAnnounce),this._observer=new MutationObserver(e=>{for(const t of e){const e=t.target;if(!/^auro-toast(_|$)/u.test(e.localName??""))continue;const s=e.hasAttribute?.("visible"),a="error"===e.getAttribute?.("variant"),o="visible"===t.attributeName&&s&&a,r="variant"===t.attributeName&&"error"!==t.oldValue&&s&&a;(o||r)&&this._setAssertiveTemporarily()}}),this._observer.observe(this,{subtree:!0,attributes:!0,attributeFilter:["visible","variant"],attributeOldValue:!0})}disconnectedCallback(){super.disconnectedCallback(),this._observer?.disconnect(),clearTimeout(this._assertiveResetTimer),this.removeEventListener("toast-request-announce",this._onToastRequestAnnounce);const e=this.shadowRoot?.querySelector("[aria-live]");e&&e.setAttribute("aria-live","polite")}_setAssertiveTemporarily(){const e=this.shadowRoot?.querySelector("[aria-live]");e&&(clearTimeout(this._assertiveResetTimer),e.setAttribute("aria-live","assertive"),this._assertiveResetTimer=setTimeout(()=>{e.setAttribute("aria-live","polite")},3e3))}render(){return s`
       <div class="toaster-wrapper" aria-live="polite" aria-atomic="false">
         <slot @slotchange="${this._onSlotChange}"></slot>
       </div>

package/dist/index.js

@@ -1 +1 @@
-export{A as AuroToast,a as AuroToaster}from"./auro-toaster-jZvkUugt.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-C16e0fNp.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-jZvkUugt.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-C16e0fNp.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-pr121.19",
+  "version": "0.0.0-pr121.20",
   "description": "auro-toast HTML custom element",
   "repository": {
     "type": "git",