@aurodesignsystem-dev/auro-toast 0.0.0-pr147.13 → 0.0.0-pr147.15

package/package.json

@@ -7,7 +7,7 @@
     "================================================================================"
   ],
   "name": "@aurodesignsystem-dev/auro-toast",
-  "version": "0.0.0-pr147.13",
+  "version": "0.0.0-pr147.15",
   "description": "auro-toast HTML custom element",
   "repository": {
     "type": "git",
@@ -84,6 +84,7 @@
   "files": [
     "dist/**/*",
     "demo/**/*",
+    "src/**/*",
     "custom-elements.json",
     "CHANGELOG.md",
     "README.md",

package/src/auro-toast.js

@@ -0,0 +1,485 @@
+// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+/* eslint-disable lit/binding-positions, lit/no-invalid-html, max-lines */
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+
+import { AuroDependencyVersioning } from "@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs";
+import AuroLibraryRuntimeUtils from "@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs";
+import { AuroButton } from "@aurodesignsystem/auro-button/class";
+import { AuroIcon } from "@aurodesignsystem/auro-icon/class";
+
+// Icons
+import errorIcon from "@alaskaairux/icons/dist/icons/alert/error-stroke.mjs";
+import infoIcon from "@alaskaairux/icons/dist/icons/alert/information-stroke.mjs";
+import successIcon from "@alaskaairux/icons/dist/icons/interface/check-stroke.mjs";
+import closeIcon from "@alaskaairux/icons/dist/icons/interface/x-lg.mjs";
+
+import buttonVersion from "./buttonVersion.js";
+import iconVersion from "./iconVersion.js";
+
+import colorCss from "./styles/color.scss";
+import styleCss from "./styles/style.scss";
+import tokensCss from "./styles/tokens.scss";
+
+const DEFAULT_TIME_TIL_FADE_OUT = 5000;
+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.
+ * @customElement auro-toast
+ *
+ * @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.
+ * @event toast-close - Notifies that the toast has been closed
+ */
+
+// build the component class
+export class AuroToast extends LitElement {
+  constructor() {
+    super();
+
+    this._initializeDefaults();
+  }
+
+  _initializeDefaults() {
+    /**
+     * @private
+     */
+    this.closeDom = new DOMParser().parseFromString(closeIcon.svg, "text/html");
+
+    /**
+     * @private
+     */
+    this.closeSvg = this.closeDom.body.firstChild;
+    this.closeSvg.setAttribute("slot", "svg");
+
+    /**
+     * @private
+     */
+    this.successDom = new DOMParser().parseFromString(
+      successIcon.svg,
+      "text/html",
+    );
+
+    /**
+     * @private
+     */
+    this.successSvg = this.successDom.body.firstChild;
+
+    this.successSvg.setAttribute("slot", "svg");
+
+    /**
+     * @private
+     */
+    this.errorDom = new DOMParser().parseFromString(errorIcon.svg, "text/html");
+
+    /**
+     * @private
+     */
+    this.errorSvg = this.errorDom.body.firstChild;
+    this.errorSvg.setAttribute("slot", "svg");
+
+    /**
+     * @private
+     */
+    this.infoDom = new DOMParser().parseFromString(infoIcon.svg, "text/html");
+
+    /**
+     * @private
+     */
+    this.infoSvg = this.infoDom.body.firstChild;
+    this.infoSvg.setAttribute("slot", "svg");
+
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.buttonTag = versioning.generateTag(
+      "auro-button",
+      buttonVersion,
+      AuroButton,
+    );
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag("auro-icon", iconVersion, AuroIcon);
+
+    /**
+     * @private
+     */
+    this.runtimeUtils = new AuroLibraryRuntimeUtils();
+
+    /**
+     * @private
+     */
+    this.fadeOutTimer = undefined;
+
+    /**
+     * True when the toast is not inside an auro-toaster and must manage its
+     * own live region announcement. Set once in connectedCallback.
+     * Default -- assumes toast is inside toaster.
+     * @private
+     */
+    this._isStandalone = false;
+  }
+
+  // This function is to define props used within the scope of this component
+  // Be sure to review  https://lit.dev/docs/components/properties/
+  // to understand how to use reflected attributes with your property settings.
+  static get properties() {
+    return {
+      ...LitElement.properties,
+
+      /**
+       * Prevents the toast from auto-hiding on the default time.
+       */
+      disableAutoHide: {
+        type: Boolean,
+        reflect: true,
+        attribute: "disableautohide",
+      },
+
+      /**
+       * Removes icon from the toast UI.
+       */
+      noIcon: {
+        type: Boolean,
+        reflect: true,
+        attribute: "noicon",
+      },
+
+      /**
+       * Sets the time in milliseconds until the toast hides.
+       */
+      timeTilHide: {
+        type: Number,
+        reflect: true,
+        attribute: "timetilhide",
+      },
+
+      /**
+       * The id of the element that triggered the toast.
+       * When the toast is manually closed, focus will return to this element.
+       * Takes precedence over the triggerElement property if both are set.
+       */
+      trigger: {
+        type: String,
+        reflect: true,
+      },
+
+      /**
+       * A direct reference to the element that triggered the toast.
+       * When the toast is manually closed, focus will return to this element.
+       * Use the trigger attribute instead if you prefer a declarative approach.
+       * @type {HTMLElement}
+       */
+      triggerElement: {
+        type: Object,
+        attribute: false,
+      },
+
+      /**
+       * Component will render visually based on which variant value is set.
+       * @type {'error' | 'success' | 'custom'}
+       */
+      variant: {
+        type: String,
+        reflect: true,
+      },
+
+      /**
+       * Sets state of toast to visible
+       */
+      visible: {
+        type: Boolean,
+        reflect: true,
+      }
+    };
+  }
+
+  static get styles() {
+    return [styleCss, colorCss, tokensCss];
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @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/>
+   *
+   */
+  static register(name = "auro-toast") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroToast);
+  }
+
+  firstUpdated() {
+    // Add the tag name as an attribute if it is different than the component name
+    this.runtimeUtils.handleComponentTagRename(this, "auro-toast");
+  }
+
+  /**
+   * Returns focus to the trigger element when the toast is manually closed.
+   * Not called on auto-dismiss — moving focus during auto-dismiss would
+   * interrupt the AT user's current position in the page.
+   * @private
+   * @returns {void}
+   */
+  _returnFocus() {
+    const target = (this.trigger ? document.getElementById(this.trigger) : null) ??
+      this.triggerElement;
+
+    if (target) {
+      target.focus();
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  clickToClose() {
+    this._returnFocus();
+    this.closeToast();
+    clearTimeout(this.fadeOutTimer);
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  fadeOutToast() {
+    if (!this.disableAutoHide) {
+      const toastContainer = this.shadowRoot.querySelector(".toastContainer");
+      if (toastContainer) {
+        toastContainer.classList.add("hidden");
+      }
+
+      setTimeout(() => {
+        this.closeToast();
+      }, FADE_OUT_DURATION);
+    }
+  }
+
+  /**
+   * @private
+   * @returns {void}
+   */
+  closeToast() {
+    clearTimeout(this.fadeOutTimer);
+    this.visible = false;
+
+    /**
+     * Emits closed toast event.
+     *
+     * @deprecated Use `toast-close` event instead.
+     * @event onToastClose
+     * @type {Object}
+     */
+    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 },
+      }),
+    );
+  }
+
+  /**
+   * For mobile, set the onclick function so the toast can be dismissed if it is tapped on anywhere inside the toast.
+   * @private
+   * @returns {void}
+   */
+  setOnClick() {
+    const mobileBreakPoint = 767;
+    if (window.innerWidth < mobileBreakPoint) {
+      this.onclick = () => {
+        this.fadeOutToast();
+      };
+    }
+  }
+
+  /**
+   * Determines which type icon to render based on the variant prop.
+   * @private
+   * @returns {HTMLElement} - The icon element to render.
+   */
+  getVariantIcon() {
+    const VARIANT_ICONS = {
+      success: this.successSvg,
+      error: this.errorSvg,
+      default: this.infoSvg,
+    };
+
+    return VARIANT_ICONS[this.variant] || VARIANT_ICONS.default;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setOnClick();
+
+    // Dispatch a cancelable event so auro-toaster can signal it will handle
+    // announcements. If nothing cancels the event the toast is standalone and
+    // must register its own live region on the host element — before
+    // any visibility change — so the AT has already observed it as a live
+    // region by the time content is rendered into the shadow DOM.
+    const event = new CustomEvent('toast-request-announce', {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    });
+
+    // NOTE — reverse logic:
+    // dispatchEvent() returns TRUE when nobody called preventDefault(), which
+    // means no auro-toaster was listening — the toast is standalone and must
+    // own its live region. It returns FALSE when a toaster cancelled the event,
+    // signalling that the toaster's aria-live region will handle announcements.
+    const eventNotPrevented = this.dispatchEvent(event);
+
+    // Secondary check: even if no toaster answered the event, the toast may
+    // be inside another element that already owns a live region (e.g. a plain
+    // div[aria-live="polite"]). Setting a role on the host in that case would
+    // create a nested live region. aria-live="off" is intentionally excluded
+    // — it disables live region behavior and is not an active announcer.
+    this._isStandalone = eventNotPrevented && !this._hasAncestorLiveRegion();
+
+    this._syncStandaloneRole();
+  }
+
+  /**
+   * Sets or removes the live-region role on the host depending on whether
+   * the toast is standalone. Extracted so connectedCallback and updated()
+   * stay in sync without duplicating the logic.
+   * @private
+   * @returns {void}
+   */
+  _syncStandaloneRole() {
+    if (this._isStandalone) {
+      this.setAttribute('role', this.variant === 'error' ? 'alert' : 'status');
+    } else {
+      this.removeAttribute('role');
+    }
+  }
+
+  /**
+   * Walks the DOM ancestors (crossing shadow boundaries) looking for any
+   * active live region — either an aria-live="polite/assertive" attribute or
+   * an implicit live region role (alert, status, log).
+   * aria-live="off" is not considered active and is intentionally ignored.
+   * @private
+   * @returns {boolean}
+   */
+  _hasAncestorLiveRegion() {
+    let node = this.parentElement;
+    while (node) {
+      if (
+        ['polite', 'assertive'].includes(node.getAttribute?.('aria-live')) ||
+        ['alert', 'status', 'log'].includes(node.getAttribute?.('role'))
+      ) {
+        return true;
+      }
+      // Traverse up, crossing shadow DOM boundaries if needed
+      node = node.parentElement ?? node.getRootNode()?.host ?? null;
+    }
+    return false;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has("visible")) {
+      this.handleSlotContent();
+    }
+
+    // Keep the standalone role in sync if variant changes after connection.
+    if (changedProperties.has("variant")) {
+      clearTimeout(this.fadeOutTimer);
+      this._syncStandaloneRole();
+    }
+
+    // do not auto dismiss for error toasts or if disableAutoHide is set
+    if (this.visible && !this.disableAutoHide && this.variant !== "error") {
+      clearTimeout(this.fadeOutTimer);
+      this.fadeOutTimer = setTimeout(() => {
+        this.fadeOutToast();
+      }, this.timeTilHide || DEFAULT_TIME_TIL_FADE_OUT);
+    }
+  }
+
+  /**
+   * Mirrors any defined custom type svg into the correct place in the template.
+   * @private
+   * @returns {void}
+   */
+  handleSlotContent() {
+    try {
+      const customSvg = this.querySelector(`[slot="customSvg"]`);
+
+      if (customSvg) {
+        const iconSvg = customSvg.cloneNode(true);
+        const typeIcon = this.shadowRoot.querySelector(".typeIcon");
+
+        if (typeIcon) {
+          iconSvg.setAttribute("slot", "svg");
+          typeIcon.appendChild(iconSvg);
+        }
+      }
+    } catch (error) {
+      console.error("handleSlotContent", error); // eslint-disable-line no-console
+    }
+  }
+
+  render() {
+    return html`
+      ${this.visible
+        ? html`
+        <div class="toastContainer">
+          ${this.noIcon
+            ? undefined
+            : html`
+            <${this.iconTag} customColor customSvg class="typeIcon body-default" part="type-icon">
+              ${this.variant === "custom" ? undefined : html`${this.getVariantIcon()}`}
+            </${this.iconTag}>
+          `
+          }
+          <div class="message body-default"><slot></slot></div>
+          <${this.buttonTag}
+            variant="flat"
+            shape="circle"
+            size="xs"
+            appearance=${this.variant !== "error" && this.variant !== "success" ? "inverse" : this.appearance}
+            @click="${this.clickToClose}"
+            part="close-button"
+            class="closeButton">
+            <${this.iconTag} customColor customSvg>
+              ${this.closeSvg}
+            </${this.iconTag}>
+            <span slot="ariaLabel">Close this notification.</span>
+          </${this.buttonTag}>
+        </div>
+      `
+        : undefined
+      }
+    `;
+  }
+}

package/src/auro-toaster.js

@@ -0,0 +1,175 @@
+// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+import { html, LitElement } from "lit";
+import AuroLibraryRuntimeUtils from "@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs";
+import styleCss from "./styles/style-toaster.scss";
+
+export class AuroToaster extends LitElement {
+  static get styles() {
+    return [styleCss];
+  }
+
+  constructor() {
+    super();
+    // Initialised in the constructor so they survive disconnect/reconnect.
+    // If these were in connectedCallback, a reconnected toaster would forget
+    // which error toasts it had already announced and could re-announce them.
+    this._assertiveResetTimer = undefined;
+    this._announcedErrorToasts = new WeakSet();
+
+    // Cancel the standalone live region request from any child toast — the
+    // toaster's own aria-live region handles all announcements.
+    // Calling preventDefault() causes dispatchEvent() on the toast to return
+    // false, which the toast reads as "a toaster is present — do not set a
+    // standalone live region role on the host element."
+    this._onToastRequestAnnounce = (e) => e.preventDefault();
+  }
+
+  /**
+   * This will register this element with the browser.
+   * @param {string} [name="auro-toaster"] - The name of the element that you want to register to.
+   *
+   * @example
+   * AuroToaster.register("custom-toaster") // this will register this element to <custom-toaster/>
+   *
+   */
+  static register(name = "auro-toaster") {
+    AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroToaster);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('toast-request-announce', this._onToastRequestAnnounce);
+
+    /**
+     * @private
+     *
+     * Observes toast attribute changes to determine when we should temporarily
+     * switch the live region from "polite" → "assertive".
+     *
+     * Supported trigger paths:
+     * 1. Normal path:
+     *    - A toast becomes visible
+     *    - AND it is already an error toast
+     * 2. Defensive fallback (unsupported but possible misuse):
+     *    - A visible toast has its variant changed to "error"
+     *
+     * Note:
+     * Toasts are not intended to mutate while visible. This fallback exists
+     * only to preserve accessibility behavior if that contract is violated.
+     */
+    this._observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        const target = mutation.target;
+
+        // Only react to auro-toast elements (including versioned tags like
+        // auro-toast_1_2_3). Explicitly ignore auro-toaster itself.
+        if (!/^auro-toast(_|$)/u.test(target.localName ?? '')) continue;
+
+        const isVisible = target.hasAttribute?.('visible');
+        const isError = target.getAttribute?.('variant') === 'error';
+
+        // ---------------------------------------------------------------------
+        // Case 1: supported behavior
+        // A toast becomes visible AND is already an error toast
+        // ---------------------------------------------------------------------
+        const becameVisible =
+          mutation.attributeName === 'visible' &&
+          isVisible &&
+          isError;
+
+        // ---------------------------------------------------------------------
+        // Case 2: defensive fallback
+        // A toast is already visible and its variant is changed to "error"
+        // (unsupported usage pattern, but we handle it safely for a11y)
+        // ---------------------------------------------------------------------
+        const becameErrorWhileVisible =
+          mutation.attributeName === 'variant' &&
+          mutation.oldValue !== 'error' &&
+          isVisible &&
+          isError;
+
+        if (becameVisible || becameErrorWhileVisible) {
+          this._setAssertiveTemporarily();
+        }
+      }
+    });
+
+    this._observer.observe(this, {
+      subtree: true,
+
+      // REQUIRED: without this, attribute changes will not trigger the observer
+      attributes: true,
+
+      // We only care about these two attributes for performance and clarity
+      attributeFilter: ['visible', 'variant'],
+
+      // REQUIRED for detecting transitions (e.g. non-error → error)
+      attributeOldValue: true,
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._observer?.disconnect();
+    clearTimeout(this._assertiveResetTimer);
+    this.removeEventListener('toast-request-announce', this._onToastRequestAnnounce);
+
+    // Reset the live region to polite so a reconnected toaster does not
+    // inherit a stale assertive state left behind by a cleared timer.
+    const liveRegion = this.shadowRoot?.querySelector('[aria-live]');
+    if (liveRegion) {
+      liveRegion.setAttribute('aria-live', 'polite');
+    }
+  }
+
+  /**
+   * Temporarily sets the live region to assertive so the error toast
+   * interrupts the screen reader, then resets to polite after 3 seconds.
+   * This ensures subsequent polite toasts don't keep interrupting the user,
+   * even if the error toast remains visible (errors are never auto-dismissed).
+   * @private
+   */
+  _setAssertiveTemporarily() {
+    const liveRegion = this.shadowRoot?.querySelector('[aria-live]');
+    if (!liveRegion) return;
+
+    clearTimeout(this._assertiveResetTimer);
+    liveRegion.setAttribute('aria-live', 'assertive');
+
+    this._assertiveResetTimer = setTimeout(() => {
+      liveRegion.setAttribute('aria-live', 'polite');
+    }, 3000);
+  }
+
+  render() {
+    return html`
+      <div class="toaster-wrapper" aria-live="polite" aria-atomic="false">
+        <slot @slotchange="${this._onSlotChange}"></slot>
+      </div>
+    `;
+  }
+
+  /**
+   * Handles slot changes — checks if a newly slotted error toast
+   * is already visible at the time it is added to the toaster.
+   * @private
+   */
+  _onSlotChange(e) {
+    const newErrorToast = e.target.assignedElements({ flatten: true })
+      .find(el =>
+        /^auro-toast(_|$)/u.test(el.localName ?? '') &&
+        el.getAttribute('variant') === 'error' &&
+        el.hasAttribute('visible') &&
+        !this._announcedErrorToasts.has(el)
+      );
+
+    if (newErrorToast) {
+      this._announcedErrorToasts.add(newErrorToast);
+      this._setAssertiveTemporarily();
+    }
+  }
+}

package/src/buttonVersion.js

@@ -0,0 +1 @@
+export default "12.3.2";

package/src/iconVersion.js

@@ -0,0 +1 @@
+export default "9.2.0";

package/src/index.js

@@ -0,0 +1,4 @@
+import { AuroToast } from "./auro-toast.js";
+import { AuroToaster } from "./auro-toaster.js";
+
+export { AuroToast, AuroToaster };

package/src/registered.js

@@ -0,0 +1,5 @@
+import { AuroToast } from "./auro-toast.js";
+import { AuroToaster } from "./auro-toaster.js";
+
+AuroToast.register();
+AuroToaster.register();

package/src/styles/color.scss

@@ -0,0 +1,34 @@
+// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Import Auro tokens
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
+
+:host([visible]) {
+  background-color: var(--ds-auro-toast-container-color);
+  color: var(--ds-auro-toast-text-color);
+
+  .typeIcon {
+    color: var(--ds-auro-toast-icon-color);
+  }
+
+  .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, #{v.$ds-basic-color-status-error-subtle});
+  --ds-auro-toast-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
+  --ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+}
+
+:host([variant='success']) {
+  --ds-auro-toast-container-color: var(--ds-basic-color-status-success-subtle, #{v.$ds-basic-color-status-success-subtle});
+  --ds-auro-toast-icon-color: var(--ds-basic-color-status-success, #{v.$ds-basic-color-status-success});
+  --ds-auro-toast-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
+}

package/src/styles/style-toaster.scss

@@ -0,0 +1,27 @@
+// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Import Auro tokens
+@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
+
+// container styles - defines the look of the outer custom component
+.toaster-wrapper {
+  position: fixed;
+  z-index: var(--ds-depth-modal, vac.$ds-depth-modal);
+  right: 2%;
+  bottom: 2%;
+  left: 2%;
+  display: flex;
+  flex-direction: column-reverse;
+  align-items: flex-end;
+  gap: var(--ds-size-200, vac.$ds-size-200);
+  pointer-events: none;
+
+  @media (width >= #{vac.$ds-grid-breakpoint-lg}) {
+    right: 1%;
+    left: unset;
+    width: 100%;
+  }
+}

package/src/styles/style.scss

@@ -0,0 +1,61 @@
+// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// See LICENSE in the project root for license information.
+
+// ---------------------------------------------------------------------
+
+// Import Auro tokens
+@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as vac;
+
+@use '@aurodesignsystem/webcorestylesheets/dist/bundled/type/classes.alaska.min.css';
+
+// display: inherit keeps the host in the accessibility tree when not visible.
+// display: none removes it entirely from the accessibility tree —
+//
+// This is used to prevent visual artifacts from toasts that remain in the DOM
+// after hiding.
+:host {
+  display: inherit;
+}
+
+:host([visible]) {
+  display: inline-block;
+  min-width: 100%;
+  border-radius: var(--ds-size-100, vac.$ds-size-100);
+  box-shadow: var(--ds-elevation-200, vac.$ds-elevation-200);
+  pointer-events: auto;
+
+  // Phones (< sm) keep the full-width sizing from the base rule above.
+  // From the sm breakpoint up, use fixed pixel bounds so the toast is sized
+  // consistently across tablet and desktop widths instead of shrinking to a
+  // small fraction of the available space.
+  @media (width >= #{vac.$ds-grid-breakpoint-sm}) {
+    min-width: 200px;
+    max-width: 500px;
+  }
+
+  .toastContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    padding: var(--ds-size-200, vac.$ds-size-200) var(--ds-size-150, vac.$ds-size-150);
+    gap: var(--ds-size-200, vac.$ds-size-200);
+  }
+
+  .hidden {
+    opacity: 0;
+    transition: visibility 0s 300ms, opacity 300ms ease-out;
+    visibility: hidden;
+  }
+
+  [auro-icon] {
+    --ds-auro-icon-size: var(--ds-size-300, #{vac.$ds-size-300});
+  }
+
+  .message {
+    flex: 1;
+  }
+
+  .closeButton {
+    border-radius: 50%;
+  }
+}

package/src/styles/tokens.scss

@@ -0,0 +1,8 @@
+@use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
+
+:host {
+  --ds-auro-toast-close-button-hover-container-color: var(--ds-advanced-color-button-tertiary-background-hover, #{v.$ds-advanced-color-button-tertiary-background-hover});
+  --ds-auro-toast-container-color: var(--ds-advanced-color-shared-background-strong, #{v.$ds-advanced-color-shared-background-strong});
+  --ds-auro-toast-icon-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
+  --ds-auro-toast-text-color: var(--ds-basic-color-texticon-inverse, #{v.$ds-basic-color-texticon-inverse});
+}