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

package/README.md

@@ -49,9 +49,7 @@ 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)
 
-```shell
-$ npm i @aurodesignsystem/auro-toast
-```
+<pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-toast</code></pre>
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -63,9 +61,7 @@ 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) -->
 
-```js
-import "@aurodesignsystem/auro-toast";
-```
+<pre class="language-js"><code class="language-js">import "@aurodesignsystem/auro-toast";</code></pre>
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -74,9 +70,7 @@ import "@aurodesignsystem/auro-toast";
 <!-- 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.
 
-```html
-<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-toast@latest/+esm"></script>
-```
+<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>
 
 <!-- AURO-GENERATED-CONTENT:END -->
 
@@ -85,18 +79,16 @@ 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 -->
 
-```html
-<auro-button id="basicToastBtn">
+<pre class="language-html"><code class="language-html">&lt;auro-button id="basicToastBtn"&gt;
   Show default notification
-</auro-button>
-<!--
+&lt;/auro-button&gt;
+&lt;!--
 NOTE: The manually added style is NOT necessary for use,
 Demo purposes ONLY!
--->
-<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
+--&gt;
+&lt;auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast"&gt;
   Default notification with no error type.
-</auro-toast>
-```
+&lt;/auro-toast&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 
 ## Custom Component Registration for Version Management
@@ -113,39 +105,35 @@ 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 -->
 
-```js
-// Import the class only
+<pre class="language-js"><code class="language-js">// Import the class only
 import { AuroToast } from '@aurodesignsystem/auro-toast/class';
-
+​
 // Register with a custom name if desired
-AuroToast.register('custom-toast');
-```
+AuroToast.register('custom-toast');</code></pre>
 
 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 -->
 
-```html
-<auro-button id="customToastBtn">
+<pre class="language-html"><code class="language-html">&lt;auro-button id="customToastBtn"&gt;
   Show default notification
-</auro-button>
-<custom-toast style="display: block; margin: 0.5rem 0;" id="customToast">
+&lt;/auro-button&gt;
+&lt;custom-toast style="display: block; margin: 0.5rem 0;" id="customToast"&gt;
   Default notification with no error type.
-</custom-toast>
-```
+&lt;/custom-toast&gt;</code></pre>
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>

package/custom-elements.json

@@ -0,0 +1,458 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/auro-toast.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The `auro-toast` element provides users a way to display short, temporary messages.",
+          "name": "AuroToast",
+          "cssParts": [
+            {
+              "description": "Apply css to the toast close button",
+              "name": "close-button"
+            },
+            {
+              "description": "Apply css to the toast type icon",
+              "name": "type-icon"
+            }
+          ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "_hasAncestorLiveRegion",
+              "description": "Walks the DOM ancestors (crossing shadow boundaries) looking for any\nactive live region — either an aria-live=\"polite/assertive\" attribute or\nan implicit live region role (alert, status, log).\naria-live=\"off\" is not considered active and is intentionally ignored.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_initializeDefaults",
+              "type": {
+                "text": "_initializeDefaults() => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_returnFocus",
+              "description": "Returns focus to the trigger element when the toast is manually closed.\nNot called on auto-dismiss — moving focus during auto-dismiss would\ninterrupt the AT user's current position in the page.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_scheduleAutoHide",
+              "description": "(Re-)schedules the auto-hide timer based on current visible/disableAutoHide/\nvariant/timeTilHide values. Called from updated() on property changes and\nfrom connectedCallback() to re-arm auto-hide after a reconnect (e.g. the\nnode is re-parented elsewhere in the DOM), since updated() does not run\nagain on reconnect alone.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncStandaloneRole",
+              "description": "Sets or removes the live-region role on the host depending on whether\nthe toast is standalone. Extracted so connectedCallback and updated()\nstay in sync without duplicating the logic.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "clickToClose",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "closeToast",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "disableAutoHide",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Prevents the toast from auto-hiding on the default time.",
+              "attribute": "disableautohide",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "fadeOutToast",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "getVariantIcon",
+              "description": "Determines which type icon to render based on the variant prop.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleSlotContent",
+              "description": "Mirrors any defined custom type svg into the correct place in the template.",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "noIcon",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Removes icon from the toast UI.",
+              "attribute": "noicon",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "register",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "name",
+                  "default": "\"auro-toast\"",
+                  "description": "The name of the element that you want to register.",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "This will register this element with the browser.",
+              "type": {
+                "text": "register(name?: string = \"auro-toast\") => void"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "setOnClick",
+              "description": "For mobile, set the onclick function so the toast can be dismissed if it is tapped on anywhere inside the toast.\nIgnores clicks on the close button -- clickToClose() already handles those, and re-running\nfadeOutToast() for the same click is what caused a double close (see AB#1643472).",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "timeTilHide",
+              "privacy": "public",
+              "type": {
+                "text": "number"
+              },
+              "description": "Sets the time in milliseconds until the toast hides.",
+              "attribute": "timetilhide",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "trigger",
+              "privacy": "public",
+              "type": {
+                "text": "string"
+              },
+              "description": "The id of the element that triggered the toast.\nWhen the toast is manually closed, focus will return to this element.\nTakes precedence over the triggerElement property if both are set.",
+              "attribute": "trigger",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "triggerElement",
+              "privacy": "public",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "description": "A direct reference to the element that triggered the toast.\nWhen the toast is manually closed, focus will return to this element.\nUse the trigger attribute instead if you prefer a declarative approach."
+            },
+            {
+              "kind": "field",
+              "name": "variant",
+              "privacy": "public",
+              "type": {
+                "text": "'error' | 'success' | 'custom'"
+              },
+              "description": "Component will render visually based on which variant value is set.",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "visible",
+              "privacy": "public",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Sets state of toast to visible",
+              "attribute": "visible",
+              "reflects": true
+            }
+          ],
+          "events": [
+            {
+              "name": "toast-close",
+              "type": {
+                "text": "{ visible: boolean }"
+              },
+              "description": "Notifies that the toast has been closed"
+            },
+            {
+              "name": "onToastClose",
+              "type": {
+                "text": "Object"
+              },
+              "description": "**Deprecated**, use `toast-close` event instead.",
+              "deprecated": "Use `toast-close` event instead."
+            }
+          ],
+          "attributes": [
+            {
+              "name": "disableautohide",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Prevents the toast from auto-hiding on the default time.",
+              "fieldName": "disableAutoHide"
+            },
+            {
+              "name": "noicon",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Removes icon from the toast UI.",
+              "fieldName": "noIcon"
+            },
+            {
+              "name": "timetilhide",
+              "type": {
+                "text": "number"
+              },
+              "description": "Sets the time in milliseconds until the toast hides.",
+              "fieldName": "timeTilHide"
+            },
+            {
+              "name": "trigger",
+              "type": {
+                "text": "string"
+              },
+              "description": "The id of the element that triggered the toast.\nWhen the toast is manually closed, focus will return to this element.\nTakes precedence over the triggerElement property if both are set.",
+              "fieldName": "trigger"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "'error' | 'success' | 'custom'"
+              },
+              "description": "Component will render visually based on which variant value is set.",
+              "fieldName": "variant"
+            },
+            {
+              "name": "visible",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Sets state of toast to visible",
+              "fieldName": "visible"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "auro-toast",
+          "customElement": true,
+          "modulePath": "src/auro-toast.js"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AuroToast",
+          "declaration": {
+            "name": "AuroToast",
+            "module": "src/auro-toast.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/auro-toaster.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "AuroToaster",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_announcedErrorToasts",
+              "default": "new WeakSet()"
+            },
+            {
+              "kind": "field",
+              "name": "_assertiveResetTimer",
+              "default": "undefined"
+            },
+            {
+              "kind": "method",
+              "name": "_onSlotChange",
+              "parameters": [
+                {
+                  "name": "e"
+                }
+              ],
+              "description": "Handles slot changes — checks if a newly slotted error toast\nis already visible at the time it is added to the toaster.",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_onToastRequestAnnounce"
+            },
+            {
+              "kind": "method",
+              "name": "_setAssertiveTemporarily",
+              "description": "Temporarily sets the live region to assertive so the error toast\ninterrupts the screen reader, then resets to polite after 3 seconds.\nThis ensures subsequent polite toasts don't keep interrupting the user,\neven if the error toast remains visible (errors are never auto-dismissed).",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "register",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "name",
+                  "default": "\"auro-toaster\"",
+                  "description": "The name of the element that you want to register to.",
+                  "optional": true,
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "This will register this element with the browser."
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "customElement": true,
+          "modulePath": "src/auro-toaster.js"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AuroToaster",
+          "declaration": {
+            "name": "AuroToaster",
+            "module": "src/auro-toaster.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/buttonVersion.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "12.3.2",
+            "module": "src/buttonVersion.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/iconVersion.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "9.2.0",
+            "module": "src/iconVersion.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.js",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "AuroToast",
+          "declaration": {
+            "name": "AuroToast",
+            "module": "src/index.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "AuroToaster",
+          "declaration": {
+            "name": "AuroToaster",
+            "module": "src/index.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/registered.js",
+      "declarations": [],
+      "exports": []
+    }
+  ]
+}

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,9 +25,10 @@ The `auro-toast` element provides users a way to display short, temporary messag
 
 ### Events
 
-| Name         | Description                             |
-| ------------ | --------------------------------------- |
-| onToastClose | Notifies that the toast has been closed |
+| Name         | Description                                      |
+| ------------ | ------------------------------------------------ |
+| toast-close  | Notifies that the toast has been closed          |
+| onToastClose | **Deprecated**, use `toast-close` event instead. |
 
 ### CSS Shadow Parts
 
@@ -513,7 +514,7 @@ export function initDynamicToastsExample() {
       console.log("Toast added:", toastId);
 ​
       // optional cleanup if your component doesn't auto-remove itself
-      toast.addEventListener("onToastClose", () =&gt; {
+      toast.addEventListener("toast-close", () =&gt; {
         activeToasts.delete(toastId);
       });
     });