@aurodesignsystem-dev/auro-toast 0.0.0-pr102.0 → 0.0.0-pr106.0

package/demo/api.min.js

@@ -1,4 +1,17 @@
-import { A as AuroToast, a as AuroToaster } from './auro-toaster.min.js';
+import { A as AuroToast, a as AuroToaster, i as initBasicExample } from './basic.min.js';
+
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initDisableAutoHideExample() {
+  const btn = document.querySelector("#disableHideToastBtn");
+  const toast = document.querySelector("#disableHideToast");
+
+  btn.addEventListener("click", () => {
+    if (!toast.hasAttribute("visible")) {
+      toast.setAttribute("visible", true);
+    }
+  });
+}
 
 /* eslint-disable jsdoc/require-jsdoc */
 
@@ -59,6 +72,19 @@ function initVariantToastsExample() {
 
 /* eslint-disable jsdoc/require-jsdoc */
 
+function initCustomToastExample() {
+  const btn = document.querySelector("#customizedToastBtn");
+  const toast = document.querySelector("#customizedToast");
+
+  btn.addEventListener("click", () => {
+    if (!toast.hasAttribute("visible")) {
+      toast.setAttribute("visible", true);
+    }
+  });
+}
+
+/* eslint-disable jsdoc/require-jsdoc */
+
 function initVisibleExample() {
   const btn = document.querySelector("#visibleToastBtn");
   const toast = document.querySelector("#visibleToast");
@@ -70,6 +96,37 @@ function initVisibleExample() {
   });
 }
 
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initMultipleToastsExample() {
+  const btn = document.querySelector("#multiToastBtn-default");
+  const toast = document.querySelector("#multiToast-default");
+
+  btn.addEventListener("click", () => {
+    if (!toast.hasAttribute("visible")) {
+      toast.setAttribute("visible", true);
+    }
+  });
+
+  const btnTwo = document.querySelector("#multiToastBtn-error");
+  const toastTwo = document.querySelector("#multiToast-error");
+
+  btnTwo.addEventListener("click", () => {
+    if (!toastTwo.hasAttribute("visible")) {
+      toastTwo.setAttribute("visible", true);
+    }
+  });
+
+  const btnThree = document.querySelector("#multiToastBtn-success");
+  const toastThree = document.querySelector("#multiToast-success");
+
+  btnThree.addEventListener("click", () => {
+    if (!toastThree.hasAttribute("visible")) {
+      toastThree.setAttribute("visible", true);
+    }
+  });
+}
+
 AuroToast.register();
 AuroToaster.register();
 
@@ -81,10 +138,14 @@ function initExamples(initCount) {
 
   try {
     // javascript example function calls to be added here upon creation to test examples
-    initVisibleExample();
-    initVariantToastsExample();
+    initBasicExample();
+    initDisableAutoHideExample();
     initNoIconExample();
     initTimeTilHideExample();
+    initVariantToastsExample();
+    initCustomToastExample();
+    initVisibleExample();
+    initMultipleToastsExample();
   } catch (_err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/demo/{auro-toaster.min.js → basic.min.js}

@@ -230,7 +230,7 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
       </${this._renderTag}>
     `}renderLayout(){return this.renderLayoutDefault()}}
 
-class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, .25rem);line-height:1.8}
+class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends i$2{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
 `;class z extends m{constructor(){super(),this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}i$5`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
 `;var y=i$5`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
 `;var k=i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
@@ -262,9 +262,9 @@ var successIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=
 
 var closeIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"x-lg__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"x-lg__desc\">a large x</desc><path fill-rule=\"evenodd\" d=\"M16.51 17.26q-.255 0-.45-.15l-.09-.08-3.96-3.96-3.98 3.98-.1.08a.76.76 0 0 1-.43.14.75.75 0 0 1-.6-1.2l.08-.09 3.96-3.96-3.98-3.98-.08-.1a.746.746 0 0 1 .61-1.18q.255 0 .45.15l.1.08L12 10.95l3.98-3.98.1-.08a.76.76 0 0 1 .43-.14.75.75 0 0 1 .6 1.2l-.08.1-3.96 3.96 3.98 3.98.08.1a.746.746 0 0 1-.61 1.18z\" clip-rule=\"evenodd\"/></svg>"};
 
-var buttonVersion = '12.2.0';
+var buttonVersion = '12.3.0';
 
-var iconVersion = '9.1.0';
+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)}
 `;
@@ -284,13 +284,9 @@ const FADE_OUT_DURATION = 300;
 
 // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
 /**
- * The auro-toast element provides users a way to display short, temporary messages.
+ * The `auro-toast` element provides users a way to display short, temporary messages.
+ * @customElement auro-toast
  *
- * @attr {Boolean} visible - Sets state of toast to visible
- * @attr {String} variant - Component will render visually based on which variant value is set; currently supports `error`, `success`, `custom`
- * @attr {Boolean} noIcon - Removes icon from the toast UI
- * @attr {Boolean} disableAutoHide - Prevents the toast from auto-hiding on the default time.
- * @attr {Number} timeTilHide - Sets the time in milliseconds until the toast hides.
  * @csspart type-icon - Apply css to the toast type icon
  * @csspart close-button - Apply css to the toast close button
  * @fires onToastClose - Notifies that the toast has been closed
@@ -301,6 +297,10 @@ class AuroToast extends i$2 {
   constructor() {
     super();
 
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
     /**
      * @private
      */
@@ -382,25 +382,47 @@ class AuroToast extends i$2 {
   static get properties() {
     return {
       ...i$2.properties,
-      visible: {
+
+      /**
+       * Prevents the toast from auto-hiding on the default time.
+       */
+      disableAutoHide: {
         type: Boolean,
         reflect: true,
       },
-      variant: {
-        type: String,
-        reflect: true,
-      },
+
+      /**
+       * Removes icon from the toast UI.
+       */
       noIcon: {
         type: Boolean,
-      },
-      disableAutoHide: {
-        type: Boolean,
         reflect: true,
       },
+
+      /**
+       * Sets the time in milliseconds until the toast hides.
+       */
       timeTilHide: {
         type: Number,
         reflect: true,
       },
+
+      /**
+       * Component will render visually based on which variant value is set.
+       * @type {'error' | 'success' | 'custom'}
+       */
+      variant: {
+        type: String,
+        reflect: true,
+      },
+
+      /**
+       * Sets state of toast to visible
+       */
+      visible: {
+        type: Boolean,
+        reflect: true,
+      }
     };
   }
 
@@ -410,7 +432,7 @@ class AuroToast extends i$2 {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-toast"] - The name of element that you want to register to.
+   * @param {string} [name="auro-toast"] - The name of the element that you want to register.
    *
    * @example
    * AuroToast.register("custom-toast") // this will register this element to <custom-toast/>
@@ -597,7 +619,7 @@ class AuroToaster extends i$2 {
 
   /**
    * This will register this element with the browser.
-   * @param {string} [name="auro-toaster"] - The name of element that you want to register to.
+   * @param {string} [name="auro-toaster"] - The name of the element that you want to register.
    *
    * @example
    * AuroToaster.register("custom-toast") // this will register this element to <custom-toast/>
@@ -612,4 +634,17 @@ class AuroToaster extends i$2 {
   }
 }
 
-export { AuroToast as A, AuroToaster as a };
+/* eslint-disable jsdoc/require-jsdoc */
+
+function initBasicExample() {
+  const btn = document.querySelector("#basicToastBtn");
+  const toast = document.querySelector("#basicToast");
+
+  btn.addEventListener("click", () => {
+    if (!toast.hasAttribute("visible")) {
+      toast.setAttribute("visible", true);
+    }
+  });
+}
+
+export { AuroToast as A, AuroToaster as a, initBasicExample as i };

package/demo/index.js

@@ -3,11 +3,7 @@
 import { AuroToast, AuroToaster } from "../src/index";
 
 import { initBasicExample } from "../apiExamples/basic";
-import { initCustomExample } from "../apiExamples/customToast";
-import { initErrorExample } from "../apiExamples/error";
-import { initMultipleToastsExample } from "../apiExamples/multipleToasts";
-import { initSuccessExample } from "../apiExamples/success";
-
+import { initCustomExample } from "../apiExamples/custom";
 
 AuroToast.register(); // registering to `auro-toast`
 AuroToaster.register(); // registering to `auro-toaster`
@@ -21,9 +17,6 @@ export function initExamples(initCount) {
     // javascript example function calls to be added here upon creation to test examples
     initBasicExample();
     initCustomExample();
-    initErrorExample();
-    initSuccessExample();
-    initMultipleToastsExample();
   } catch (_err) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

package/demo/index.md

@@ -1,11 +1,11 @@
 <!--
-The index.md file is a compiled document. No edits should be made directly to this file.
-README.md is created by running `npm run build:docs`.
-This file is generated based on a template fetched from `./docs/partials/index.md`
+ THIS PAGE'S CONTENT SHOULD BE KEPT MINIMAL.
+ ONLY ADD EXAMPLES THAT ARE TRULY NECESSARY FOR THE INDEX PAGE — THE BASIC EXAMPLE IS USUALLY ENOUGH.
+ ALL OTHER EXAMPLES SHOULD GO IN THE API DOCUMENTATION.
 -->
 
-# Toast
-
+# Toast
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/description.md) -->
 <!-- The below content is automatically added from ./../docs/partials/description.md -->
 The `<auro-toast>` element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of sending an unobtrusive toast (or push) notification to your visitors.
@@ -13,8 +13,8 @@ The `<auro-toast>` element is a [HTML custom element](https://developer.mozilla.
 The `<auro-toaster>` wrapper-element is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of managing a series of notifications  at the bottom of the screen using the `<auro-toast>` element.
 <!-- AURO-GENERATED-CONTENT:END -->
 
-## Component use cases
-
+## Use Cases
+
 <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/useCases.md) -->
 <!-- The below content is automatically added from ./../docs/partials/useCases.md -->
 The `<auro-toast>` use cases include:
@@ -24,7 +24,7 @@ The `<auro-toast>` use cases include:
 * Sending any type of push notification
 <!-- AURO-GENERATED-CONTENT:END -->
 
-### The setup
+## The setup
 Triggering the toasts relies on setting the `visible` property to `true`. See the following example to see how this code is used in an example.
 
 ```js
@@ -37,277 +37,33 @@ showToast = (toastID) => {
 };
 ```
 
-## Default push notifications
-
-The following demo illustrates the `default` notification using the `<auro-toast>` element. This push notification will automatically dismiss after five seconds. The user may also dismiss it manually. The toast is **NOT** removed from the DOM. The visible property is set to `false`, which will hide the toast on the UI.
-
-Also notice in this demo the use of the `noIcon` attribute. this attribute removes the use of the default `information` icon.
+## Example(s)
 
+### Basic
+
 <div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
-<!-- The below content is automatically added from ./../apiExamples/basic.html -->
-<!-- icon variant -->
-<auro-button id="basicToastBtn">
-  Show default notification
-</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
-  Default notification with no error type
-</auro-toast>
-<!-- no icon variant -->
-<auro-button id="basicToast-noIconBtn">
-  Show default notification with no icon
-</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast-noIcon" noIcon>
-  Default notification with no error type
-</auro-toast>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
+  <auro-button id="basicToastBtn">
+    Show default notification
+  </auro-button>
+  <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
+    Default notification with no error type
+  </auro-toast>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
 <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
 
 ```html
-<!-- icon variant -->
 <auro-button id="basicToastBtn">
   Show default notification
-</auro-button>
+</auro-button>
 <auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast">
   Default notification with no error type
 </auro-toast>
-<!-- no icon variant -->
-<auro-button id="basicToast-noIconBtn">
-  Show default notification with no icon
-</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" id="basicToast-noIcon" noIcon>
-  Default notification with no error type
-</auro-toast>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Single notification
-
-Aside from the `default` notification, the `<auro-toast>` supports multiple variations, `success` and `error`. See below for more information on these variants.
-
-### Error notification
-
-The error push notification using the `<auro-toast>` element will **NOT** automatically dismiss itself. The user **MUST** dismiss the notification manually. When the notification is dismissed, it is not removed from the DOM. The `visible` property is set to `false`, which hides the notification from the UI.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/error.html) -->
-<!-- The below content is automatically added from ./../apiExamples/error.html -->
-<auro-button id="errorToastBtn">Show error notification</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast"> Unable to add lap infant. Please try again  </auro-toast>
-<auro-button id="errorToast-noIconBtn">Show error notification with no icon</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast-noIcon" noIcon> Unable to add lap infant. Please try again  </auro-toast>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/error.html -->
-
-```html
-<auro-button id="errorToastBtn">Show error notification</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast"> Unable to add lap infant. Please try again  </auro-toast>
-<auro-button id="errorToast-noIconBtn">Show error notification with no icon</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" variant="error" id="errorToast-noIcon" noIcon> Unable to add lap infant. Please try again  </auro-toast>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-### Success notification
-
-The success push notification using the `<auro-toast>` element will automatically dismiss after five seconds if the user does not manually dismiss it. In this case, the notification is not removed from the DOM. The `visible` property is set to `false`, which hides the notification from the UI.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/success.html) -->
-<!-- The below content is automatically added from ./../apiExamples/success.html -->
-<auro-button id="successToastBtn">Show success toast</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast"> Successfully added lap infant  </auro-toast>
-<auro-button id="successToast-noIconBtn">Show success toast with no icon</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast-noIcon" noIcon> Successfully added lap infant  </auro-toast>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/success.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/success.html -->
-
-```html
-<auro-button id="successToastBtn">Show success toast</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast"> Successfully added lap infant  </auro-toast>
-<auro-button id="successToast-noIconBtn">Show success toast with no icon</auro-button>
-<auro-toast style="display: block; margin: 0.5rem 0;" variant="success" id="successToast-noIcon" noIcon> Successfully added lap infant  </auro-toast>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Multiple toasts
-
-The multi-notification use case requires the use of the `<auro-toaster>` component. Toaster will render the toasts
-at the bottom right of a page.
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multipleToasts.html) -->
-<!-- The below content is automatically added from ./../apiExamples/multipleToasts.html -->
-<auro-button id="multiToastBtn-default">Show default toast</auro-button>
-<auro-button id="multiToastBtn-error">Show error toast</auro-button>
-<auro-button id="multiToastBtn-success">Show success toast</auro-button>
-<auro-toaster>
-  <auro-toast id="multiToast-default">Default toast</auro-toast>
-  <auro-toast id="multiToast-error" variant="error">Unable to add lap infant. Please try again</auro-toast>
-  <auro-toast id="multiToast-success" variant="success">Successfully added lap infant</auro-toast>
-</auro-toaster>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multipleToasts.html) -->
-<!-- The below code snippet is automatically added from ./../apiExamples/multipleToasts.html -->
-
-```html
-<auro-button id="multiToastBtn-default">Show default toast</auro-button>
-<auro-button id="multiToastBtn-error">Show error toast</auro-button>
-<auro-button id="multiToastBtn-success">Show success toast</auro-button>
-<auro-toaster>
-  <auro-toast id="multiToast-default">Default toast</auro-toast>
-  <auro-toast id="multiToast-error" variant="error">Unable to add lap infant. Please try again</auro-toast>
-  <auro-toast id="multiToast-success" variant="success">Successfully added lap infant</auro-toast>
-</auro-toaster>
-```
-<!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Dynamic toasts
-
-If you choose to implement push notifications dynamically, the following is an example of how to implement dynamic `<auro-toast>` elements using Vue.
-
-```js
-import { v4 as uuidv4 } from 'uuid';
-
-interface ToastEvent {
-  variant: string,
-  message: string
-}
-
-interface Toast {
-  id: string
-  variant: string,
-  message: string,
-  visible: boolean
-}
-
-const toasts = ref<Array<Toast>>([]);
-
-// Function that adds toasts to the toasts array, which will trigger the toast to be visible
-handleToastEvent(e: ToastEvent) {
-  toast.id = uuidv4();
-  toast.visible = true;
-  toast.variant = e.variant;
-  toast.message = e.message
-  toasts.value.push(toast);
-}
-
-// Function that removes the toast from the DOM
-handleOnToastClose(event) {
-  // In event.detail comes the ID of the auro-toast that was closed (visible was set to false)
-  const id = event.detail.id;
-  toasts.value = toasts.filter((t) => t.id !== id)
-}
-```
-
-The following example is for the HTML template.
-
-```html
-<auro-toaster>
-  <auro-toast
-    v-for="(toast, i) in toasts"
-    :id="toast.id"
-    :visible="toast.visible"
-    :variant="toast.variant"
-    @on-toast-close="handleOnToastClose">
-  </auro-toast>
-<auro-toaster>
-```
-
-## Customizing Toast Notifications
-
-The toast notification can be customized in several ways.
-
-- By applying the `variant="custom"` attribute value, you may pass in custom svg to use in place of the defaults assigned to the other variants.
-- You may recolor the toast notification using the tier 3 theme tokens.
-- You may disable the auto hide behavior of the toast by applying the `disableAutoHide` attribute.
-- You may programmatically show the toast by applying the `visible` attribute. (e.g. if you want the toast to show on load)
-
-<div class="exampleWrapper">
-<!-- AURO-GENERATED-CONTENT:START (FILE:src=../apiExamples/customToast.html) -->
-<!-- The below content is automatically added from ../apiExamples/customToast.html -->
-<!-- icon variant -->
-<auro-button id="customizedToastBtn">
-  Show customized notification
-</auro-button>
-<auro-toast
-  id="customizedToast"
-  variant="custom"
-  visible
-  disableAutoHide
-  style="--ds-auro-toast-container-color: var(--ds-color-background-info-default); --ds-auro-toast-text-color: var(--ds-color-text-primary-default);">
-  Did you know you can create a price alert for this route?
-  <br />
-  <auro-button variant="tertiary">Create Alert</auro-button>
-  <svg slot="customSvg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
-</auro-toast>
-<!-- AURO-GENERATED-CONTENT:END -->
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-<!-- AURO-GENERATED-CONTENT:START (CODE:src=../apiExamples/customToast.html) -->
-<!-- The below code snippet is automatically added from ../apiExamples/customToast.html -->
-
-```html
-<!-- icon variant -->
-<auro-button id="customizedToastBtn">
-  Show customized notification
-</auro-button>
-<auro-toast
-  id="customizedToast"
-  variant="custom"
-  visible
-  disableAutoHide
-  style="--ds-auro-toast-container-color: var(--ds-color-background-info-default); --ds-auro-toast-text-color: var(--ds-color-text-primary-default);">
-  Did you know you can create a price alert for this route?
-  <br />
-  <auro-button variant="tertiary">Create Alert</auro-button>
-  <svg slot="customSvg" aria-labelledby="pin-trip-filled__desc" class="ico_squareLarge" role="img" viewBox="0 0 24 24" style="min-width: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); height: var(--auro-size-lg, var(--ds-size-300, 1.5rem)); fill: currentcolor;"><title></title><desc id="pin-trip-filled__desc">drop pin with circles.</desc><path d="M10.045 3.345a.75.75 0 0 1 .785-.714l.05.003a.75.75 0 0 1-.082 1.498l-.04-.002a.75.75 0 0 1-.713-.785m-1.217.22a.75.75 0 0 1-.357 1l-.034.016a.75.75 0 0 1-.655-1.35l.047-.022a.75.75 0 0 1 .999.357m3.949.186a.75.75 0 0 1 1.012-.318l.045.023a.75.75 0 0 1-.703 1.326l-.035-.019a.75.75 0 0 1-.319-1.012M6.508 5.057a.75.75 0 0 1 .2 1.041l-.01.017a.75.75 0 1 1-1.246-.836l.014-.022a.75.75 0 0 1 1.042-.2m8.577.22a.75.75 0 0 1 1.038.218l.028.044a.75.75 0 0 1-1.264.808l-.02-.032a.75.75 0 0 1 .218-1.038m6.02 7.014c0-2.789-2.44-4.88-4.88-4.88s-4.881 2.091-4.881 4.88q0 2.559 4.11 8.496l.199.285.055.068a.697.697 0 0 0 1.088-.068q4.31-6.16 4.309-8.781m-6.275 0a1.394 1.394 0 1 1 2.789 0 1.394 1.394 0 0 1-2.789 0M4.635 10.704a1.74 1.74 0 1 0 0-3.48 1.74 1.74 0 0 0 0 3.48"></path></svg>
-</auro-toast>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
-</auro-accordion>
-
-## Recommended Use and Version Control
-
-There are two important parts of every Auro component. The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the <a href="#install">install</a> section, the class is imported and the `auro-toast` custom element is defined automatically.
-
-To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our `AuroToast.register(name)` method and pass in a unique name.
-
-```js
-import { AuroToast } from '@aurodesignsystem/auro-toast/class'
-
-AuroToast.register('custom-toast');
-```
-
-This will create a new custom element that you can use in your HTML that will function identically to the `auro-toast` element.
-
-<div class="exampleWrapper">
-  <custom-toast variant="error" visible>Salutations World!</custom-toast>
-</div>
-<auro-accordion alignRight>
-  <span slot="trigger">See code</span>
-
-```html
-  <custom-toast variant="error" visible>Salutations World!</custom-toast>
-```
-
 </auro-accordion>