@aurodesignsystem-dev/auro-toast 0.0.0-pr147.9 → 0.0.0-pr149.0

package/README.md

@@ -49,7 +49,9 @@ The `<auro-toast>` use cases include:
 [![License](https://img.shields.io/npm/l/@aurodesignsystem/auro-toast?color=blue&style=for-the-badge)](https://www.apache.org/licenses/LICENSE-2.0)
 ![ESM supported](https://img.shields.io/badge/ESM-compatible-FFE900?style=for-the-badge)
 
-<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-toast</code></pre>
+```shell
+$ npm i @aurodesignsystem/auro-toast
+```
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -61,7 +63,9 @@ Defining the dependency within each project that is using the `<auro-toast>` com
 <!-- AURO-GENERATED-CONTENT:END -->
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/componentImport.md) -->
 
-<pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-toast";</code></pre>
+```js
+import "@aurodesignsystem/auro-toast";
+```
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -70,7 +74,9 @@ Defining the dependency within each project that is using the `<auro-toast>` com
 <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/auro-templates/main/templates/default/partials/usage/bundleInstallDescription.md) -->
 In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
 
-<pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"&gt;&lt;/script&gt;</code></pre>
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"></script>
+```
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -79,16 +85,18 @@ In cases where the project is not able to process JS assets, there are pre-proce
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
 
-<pre class="language-html"><code class="language-html">&lt;auro-button id="basicToastBtn"&gt;
+```html
+<auro-button id="basicToastBtn">
   Show default notification
-&lt;/auro-button&gt;
-&lt;!--
+</auro-button>
+<!--
 NOTE: The manually added style is NOT necessary for use,
 Demo purposes ONLY!
---&gt;
-&lt;auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast"&gt;
+-->
+<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
   Default notification with no error type.
-&lt;/auro-toast&gt;</code></pre>
+</auro-toast>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Custom Component Registration for Version Management
@@ -105,35 +113,39 @@ You can do this by importing only the component class and using the `register(na
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
 <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
 
-<pre class="language-js"><code class="language-js">// Import the class only
+```js
+// Import the class only
 import { AuroToast } from '@aurodesignsystem/auro-toast/class';
 
 // Register with a custom name if desired
-AuroToast.register('custom-toast');</code></pre>
+AuroToast.register('custom-toast');
+```
 
 This will create a new custom element `<custom-toast>` that behaves exactly like `<auro-toast>`, allowing both to coexist on the same page without interfering with each other.
 <!-- AURO-GENERATED-CONTENT:END -->
 <div class="exampleWrapper exampleWrapper--flex">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
-<!-- The below content is automatically added from ./apiExamples/custom.html -->
-<auro-button id="customToastBtn">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./apiExamples/custom.html) -->
+  <!-- The below content is automatically added from ./apiExamples/custom.html -->
+  <auro-button id="customToastBtn">
     Show default notification
-</auro-button>
-<custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
+  </auro-button>
+  <custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
     Default notification with no error type.
-</custom-toast>
-<!-- AURO-GENERATED-CONTENT:END -->
+  </custom-toast>
+  <!-- AURO-GENERATED-CONTENT:END -->
 </div>
 <auro-accordion alignRight>
-<span slot="trigger">See code</span>
+  <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/custom.html) -->
 <!-- The below code snippet is automatically added from ./apiExamples/custom.html -->
 
-<pre class="language-html"><code class="language-html">&lt;auro-button id="customToastBtn"&gt;
+```html
+<auro-button id="customToastBtn">
   Show default notification
-&lt;/auro-button&gt;
-&lt;custom-toast style="display: block; margin: 0.5rem 0;" id="customToast"&gt;
+</auro-button>
+<custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
   Default notification with no error type.
-&lt;/custom-toast&gt;</code></pre>
+</custom-toast>
+```
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

package/demo/api.md

@@ -9,9 +9,9 @@ The `auro-toast` element provides users a way to display short, temporary messag
 
 | Properties      | Attributes      | Modifiers | Type                             | Default | Description                                                                                                                                                                                                     |
 | --------------- | --------------- | --------- | -------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| disableAutoHide | disableautohide |           | boolean                          |         | Prevents the toast from auto-hiding on the default time.                                                                                                                                                        |
-| noIcon          | noicon          |           | boolean                          |         | Removes icon from the toast UI.                                                                                                                                                                                 |
-| timeTilHide     | timetilhide     |           | number                           |         | Sets the time in milliseconds until the toast hides.                                                                                                                                                            |
+| disableAutoHide | disableAutoHide |           | boolean                          |         | Prevents the toast from auto-hiding on the default time.                                                                                                                                                        |
+| noIcon          | noIcon          |           | boolean                          |         | Removes icon from the toast UI.                                                                                                                                                                                 |
+| timeTilHide     | timeTilHide     |           | number                           |         | Sets the time in milliseconds until the toast hides.                                                                                                                                                            |
 | trigger         | trigger         |           | string                           |         | The id of the element that triggered the toast.<br>When the toast is manually closed, focus will return to this element.<br>Takes precedence over the triggerElement property if both are set.                  |
 | triggerElement  |                 |           | HTMLElement                      |         | A direct reference to the element that triggered the toast.<br>When the toast is manually closed, focus will return to this element.<br>Use the trigger attribute instead if you prefer a declarative approach. |
 | variant         | variant         |           | `error` \| `success` \| `custom` |         | Component will render visually based on which variant value is set.                                                                                                                                             |
@@ -25,10 +25,9 @@ The `auro-toast` element provides users a way to display short, temporary messag
 
 ### Events
 
-| Name         | Description                                                                                                                                            |
-| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| toast-close  | Notifies that the toast has been closed. `detail` is `{ visible: false }`.                                                                             |
-| onToastClose | **Deprecated**, use `toast-close` event instead. Note: `detail` is the toast element, not `{ visible }` — the two events do not share a payload shape. |
+| Name         | Description                             |
+| ------------ | --------------------------------------- |
+| onToastClose | Notifies that the toast has been closed |
 
 ### CSS Shadow Parts
 
@@ -514,7 +513,7 @@ export function initDynamicToastsExample() {
       console.log("Toast added:", toastId);
 ​
       // optional cleanup if your component doesn't auto-remove itself
-      toast.addEventListener("toast-close", () =&gt; {
+      toast.addEventListener("onToastClose", () =&gt; {
         activeToasts.delete(toastId);
       });
     });

package/demo/api.min.js

@@ -182,7 +182,7 @@ function initDynamicToastsExample() {
       console.log("Toast added:", toastId);
 
       // optional cleanup if your component doesn't auto-remove itself
-      toast.addEventListener("toast-close", () => {
+      toast.addEventListener("onToastClose", () => {
         activeToasts.delete(toastId);
       });
     });
@@ -538,8 +538,7 @@ const FADE_OUT_DURATION = 300;
  *
  * @csspart type-icon - Apply css to the toast type icon
  * @csspart close-button - Apply css to the toast close button
- * @fires onToastClose - **Deprecated**, use `toast-close` event instead. Note: `detail` is the toast element, not `{ visible }` — the two events do not share a payload shape.
- * @event toast-close - Notifies that the toast has been closed. `detail` is `{ visible: false }`.
+ * @fires onToastClose - Notifies that the toast has been closed
  */
 
 // build the component class
@@ -625,11 +624,6 @@ class AuroToast extends i$2 {
      */
     this.fadeOutTimer = undefined;
 
-    /**
-     * @private
-     */
-    this.fadeOutCompleteTimer = undefined;
-
     /**
      * True when the toast is not inside an auro-toaster and must manage its
      * own live region announcement. Set once in connectedCallback.
@@ -652,7 +646,6 @@ class AuroToast extends i$2 {
       disableAutoHide: {
         type: Boolean,
         reflect: true,
-        attribute: "disableautohide",
       },
 
       /**
@@ -661,7 +654,6 @@ class AuroToast extends i$2 {
       noIcon: {
         type: Boolean,
         reflect: true,
-        attribute: "noicon",
       },
 
       /**
@@ -670,7 +662,6 @@ class AuroToast extends i$2 {
       timeTilHide: {
         type: Number,
         reflect: true,
-        attribute: "timetilhide",
       },
 
       /**
@@ -757,6 +748,7 @@ class AuroToast extends i$2 {
   clickToClose() {
     this._returnFocus();
     this.closeToast();
+    clearTimeout(this.fadeOutTimer);
   }
 
   /**
@@ -764,37 +756,16 @@ class AuroToast extends i$2 {
    * @returns {void}
    */
   fadeOutToast() {
-    // Guards against arming a redundant completion timer: when this fires
-    // after the toast is already closed (e.g. the mobile tap-to-dismiss
-    // handler runs after the close button's own click already closed it),
-    // or auto-hide is disabled.
-    if (!this.visible || this.disableAutoHide) {
-      return;
-    }
+    if (!this.disableAutoHide) {
+      const toastContainer = this.shadowRoot.querySelector(".toastContainer");
+      if (toastContainer) {
+        toastContainer.classList.add("hidden");
+      }
 
-    const toastContainer = this.shadowRoot.querySelector(".toastContainer");
-    if (toastContainer) {
-      toastContainer.classList.add("hidden");
+      setTimeout(() => {
+        this.closeToast();
+      }, FADE_OUT_DURATION);
     }
-
-    clearTimeout(this.fadeOutCompleteTimer);
-    this.fadeOutCompleteTimer = setTimeout(() => {
-      this.closeToast();
-    }, FADE_OUT_DURATION);
-  }
-
-  /**
-   * Cancels an in-progress fade-out, if any, and restores the toast's
-   * visibility. Without this, interrupting a fade (e.g. escalating to
-   * variant="error" mid-fade) would clear the pending close but leave the
-   * "hidden" CSS class in place, permanently hiding a toast that remains
-   * open.
-   * @private
-   * @returns {void}
-   */
-  _cancelFadeOut() {
-    clearTimeout(this.fadeOutCompleteTimer);
-    this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden");
   }
 
   /**
@@ -803,42 +774,20 @@ class AuroToast extends i$2 {
    */
   closeToast() {
     clearTimeout(this.fadeOutTimer);
-    clearTimeout(this.fadeOutCompleteTimer);
-
-    // Idempotent: a close already in flight (e.g. the close button clicked
-    // while the auto-hide fade-out is in progress) must not dispatch twice.
-    if (!this.visible) {
-      return;
-    }
-
     this.visible = false;
 
     /**
      * Emits closed toast event.
      *
-     * @deprecated Use `toast-close` event instead.
      * @event onToastClose
-     * @type {Object}
+     * @type {object}
+     * @property {boolean} false - Sets visibility value for the toast element.
      */
     this.dispatchEvent(
       new CustomEvent("onToastClose", {
         bubbles: true,
         composed: true,
-        detail: this, // unchanged for backwards compatibility; use `toast-close` for the new `{ visible }` shape
-      }),
-    );
-
-    /**
-     * Emits closed toast event.
-     *
-     * @event toast-close
-     * @type {{ visible: boolean }}
-     */
-    this.dispatchEvent(
-      new CustomEvent("toast-close", {
-        bubbles: true,
-        composed: true,
-        detail: { visible: false },
+        detail: this,
       }),
     );
   }
@@ -876,14 +825,6 @@ class AuroToast extends i$2 {
     super.connectedCallback();
     this.setOnClick();
 
-    // On a reconnect (hasUpdated is false on the initial connection, which
-    // Lit's own first-update cycle already handles), force updated() to
-    // re-run so a visible toast's auto-hide timer — cleared by
-    // disconnectedCallback() — gets re-armed instead of being lost forever.
-    if (this.hasUpdated && this.visible) {
-      this.requestUpdate();
-    }
-
     // 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
@@ -912,12 +853,6 @@ class AuroToast extends i$2 {
     this._syncStandaloneRole();
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearTimeout(this.fadeOutTimer);
-    clearTimeout(this.fadeOutCompleteTimer);
-  }
-
   /**
    * Sets or removes the live-region role on the host depending on whether
    * the toast is standalone. Extracted so connectedCallback and updated()
@@ -967,20 +902,7 @@ class AuroToast extends i$2 {
       this._syncStandaloneRole();
     }
 
-    // Cancel an in-flight fade-out when the toast becomes ineligible for
-    // auto-dismiss (escalated to variant="error", or disableAutoHide set) —
-    // a stale completion timer must not auto-close a now-persistent toast.
-    if (
-      (changedProperties.has("variant") || changedProperties.has("disableAutoHide")) &&
-      (this.variant === "error" || this.disableAutoHide)
-    ) {
-      this._cancelFadeOut();
-    }
-
     // do not auto dismiss for error toasts or if disableAutoHide is set
-    // Note: intentionally does not clear fadeOutCompleteTimer — this block
-    // re-runs on every update while visible, and clearing it here would
-    // cancel an in-flight fade-out on any unrelated property change.
     if (this.visible && !this.disableAutoHide && this.variant !== "error") {
       clearTimeout(this.fadeOutTimer);
       this.fadeOutTimer = setTimeout(() => {
@@ -1014,12 +936,14 @@ class AuroToast extends i$2 {
 
   render() {
     return u$2`
-      ${this.visible
-        ? u$2`
+      ${
+        this.visible
+          ? u$2`
         <div class="toastContainer">
-          ${this.noIcon
-            ? undefined
-            : u$2`
+          ${
+            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}>
@@ -1041,7 +965,7 @@ class AuroToast extends i$2 {
           </${this.buttonTag}>
         </div>
       `
-        : undefined
+          : undefined
       }
     `;
   }

package/demo/index.min.js

@@ -289,8 +289,7 @@ const FADE_OUT_DURATION = 300;
  *
  * @csspart type-icon - Apply css to the toast type icon
  * @csspart close-button - Apply css to the toast close button
- * @fires onToastClose - **Deprecated**, use `toast-close` event instead. Note: `detail` is the toast element, not `{ visible }` — the two events do not share a payload shape.
- * @event toast-close - Notifies that the toast has been closed. `detail` is `{ visible: false }`.
+ * @fires onToastClose - Notifies that the toast has been closed
  */
 
 // build the component class
@@ -376,11 +375,6 @@ class AuroToast extends i$2 {
      */
     this.fadeOutTimer = undefined;
 
-    /**
-     * @private
-     */
-    this.fadeOutCompleteTimer = undefined;
-
     /**
      * True when the toast is not inside an auro-toaster and must manage its
      * own live region announcement. Set once in connectedCallback.
@@ -403,7 +397,6 @@ class AuroToast extends i$2 {
       disableAutoHide: {
         type: Boolean,
         reflect: true,
-        attribute: "disableautohide",
       },
 
       /**
@@ -412,7 +405,6 @@ class AuroToast extends i$2 {
       noIcon: {
         type: Boolean,
         reflect: true,
-        attribute: "noicon",
       },
 
       /**
@@ -421,7 +413,6 @@ class AuroToast extends i$2 {
       timeTilHide: {
         type: Number,
         reflect: true,
-        attribute: "timetilhide",
       },
 
       /**
@@ -508,6 +499,7 @@ class AuroToast extends i$2 {
   clickToClose() {
     this._returnFocus();
     this.closeToast();
+    clearTimeout(this.fadeOutTimer);
   }
 
   /**
@@ -515,37 +507,16 @@ class AuroToast extends i$2 {
    * @returns {void}
    */
   fadeOutToast() {
-    // Guards against arming a redundant completion timer: when this fires
-    // after the toast is already closed (e.g. the mobile tap-to-dismiss
-    // handler runs after the close button's own click already closed it),
-    // or auto-hide is disabled.
-    if (!this.visible || this.disableAutoHide) {
-      return;
-    }
+    if (!this.disableAutoHide) {
+      const toastContainer = this.shadowRoot.querySelector(".toastContainer");
+      if (toastContainer) {
+        toastContainer.classList.add("hidden");
+      }
 
-    const toastContainer = this.shadowRoot.querySelector(".toastContainer");
-    if (toastContainer) {
-      toastContainer.classList.add("hidden");
+      setTimeout(() => {
+        this.closeToast();
+      }, FADE_OUT_DURATION);
     }
-
-    clearTimeout(this.fadeOutCompleteTimer);
-    this.fadeOutCompleteTimer = setTimeout(() => {
-      this.closeToast();
-    }, FADE_OUT_DURATION);
-  }
-
-  /**
-   * Cancels an in-progress fade-out, if any, and restores the toast's
-   * visibility. Without this, interrupting a fade (e.g. escalating to
-   * variant="error" mid-fade) would clear the pending close but leave the
-   * "hidden" CSS class in place, permanently hiding a toast that remains
-   * open.
-   * @private
-   * @returns {void}
-   */
-  _cancelFadeOut() {
-    clearTimeout(this.fadeOutCompleteTimer);
-    this.shadowRoot?.querySelector(".toastContainer")?.classList.remove("hidden");
   }
 
   /**
@@ -554,42 +525,20 @@ class AuroToast extends i$2 {
    */
   closeToast() {
     clearTimeout(this.fadeOutTimer);
-    clearTimeout(this.fadeOutCompleteTimer);
-
-    // Idempotent: a close already in flight (e.g. the close button clicked
-    // while the auto-hide fade-out is in progress) must not dispatch twice.
-    if (!this.visible) {
-      return;
-    }
-
     this.visible = false;
 
     /**
      * Emits closed toast event.
      *
-     * @deprecated Use `toast-close` event instead.
      * @event onToastClose
-     * @type {Object}
+     * @type {object}
+     * @property {boolean} false - Sets visibility value for the toast element.
      */
     this.dispatchEvent(
       new CustomEvent("onToastClose", {
         bubbles: true,
         composed: true,
-        detail: this, // unchanged for backwards compatibility; use `toast-close` for the new `{ visible }` shape
-      }),
-    );
-
-    /**
-     * Emits closed toast event.
-     *
-     * @event toast-close
-     * @type {{ visible: boolean }}
-     */
-    this.dispatchEvent(
-      new CustomEvent("toast-close", {
-        bubbles: true,
-        composed: true,
-        detail: { visible: false },
+        detail: this,
       }),
     );
   }
@@ -627,14 +576,6 @@ class AuroToast extends i$2 {
     super.connectedCallback();
     this.setOnClick();
 
-    // On a reconnect (hasUpdated is false on the initial connection, which
-    // Lit's own first-update cycle already handles), force updated() to
-    // re-run so a visible toast's auto-hide timer — cleared by
-    // disconnectedCallback() — gets re-armed instead of being lost forever.
-    if (this.hasUpdated && this.visible) {
-      this.requestUpdate();
-    }
-
     // 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
@@ -663,12 +604,6 @@ class AuroToast extends i$2 {
     this._syncStandaloneRole();
   }
 
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    clearTimeout(this.fadeOutTimer);
-    clearTimeout(this.fadeOutCompleteTimer);
-  }
-
   /**
    * Sets or removes the live-region role on the host depending on whether
    * the toast is standalone. Extracted so connectedCallback and updated()
@@ -718,20 +653,7 @@ class AuroToast extends i$2 {
       this._syncStandaloneRole();
     }
 
-    // Cancel an in-flight fade-out when the toast becomes ineligible for
-    // auto-dismiss (escalated to variant="error", or disableAutoHide set) —
-    // a stale completion timer must not auto-close a now-persistent toast.
-    if (
-      (changedProperties.has("variant") || changedProperties.has("disableAutoHide")) &&
-      (this.variant === "error" || this.disableAutoHide)
-    ) {
-      this._cancelFadeOut();
-    }
-
     // do not auto dismiss for error toasts or if disableAutoHide is set
-    // Note: intentionally does not clear fadeOutCompleteTimer — this block
-    // re-runs on every update while visible, and clearing it here would
-    // cancel an in-flight fade-out on any unrelated property change.
     if (this.visible && !this.disableAutoHide && this.variant !== "error") {
       clearTimeout(this.fadeOutTimer);
       this.fadeOutTimer = setTimeout(() => {
@@ -765,12 +687,14 @@ class AuroToast extends i$2 {
 
   render() {
     return u$2`
-      ${this.visible
-        ? u$2`
+      ${
+        this.visible
+          ? u$2`
         <div class="toastContainer">
-          ${this.noIcon
-            ? undefined
-            : u$2`
+          ${
+            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}>
@@ -792,7 +716,7 @@ class AuroToast extends i$2 {
           </${this.buttonTag}>
         </div>
       `
-        : undefined
+          : undefined
       }
     `;
   }