@umbraco-ui/uui 1.17.0 → 2.0.0-alpha.1

package/dist/components/toast-notification/toast-notification.element.js

@@ -0,0 +1,312 @@
+import { LitElement, html, css } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { UUIToastNotificationEvent } from "./UUIToastNotificationEvent.js";
+import "../button/button.js";
+import "../icon/icon.js";
+import { UUITimer } from "../../internal/utils/Timer.js";
+import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
+import { UUITextStyles } from "../../styles/uui-text.styles.js";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const _UUIToastNotificationElement = class _UUIToastNotificationElement extends LitElement {
+  constructor() {
+    super();
+    this.color = "";
+    this._autoClose = null;
+    this._onOpenTimerComplete = () => {
+      if (this._open) {
+        this.open = false;
+      }
+    };
+    this._timer = null;
+    this._pauseTimer = false;
+    this.isOpen = false;
+    this._open = false;
+    this._animate = false;
+    this._requestAnimationUpdate = 0;
+    this.addEventListener("keyup", (event) => {
+      if (event.key === "Escape") {
+        this.open = false;
+      }
+    });
+  }
+  get autoClose() {
+    return this._autoClose;
+  }
+  set autoClose(value) {
+    this._autoClose = value;
+    if (value === null) {
+      this._timer?.destroy();
+      this._timer = null;
+    } else {
+      if (this._timer === null) {
+        this._timer = new UUITimer(this._onOpenTimerComplete, value);
+      } else {
+        this._timer.setDuration(value);
+      }
+      if (this._pauseTimer === false && this.isOpen === true && this._animate === false) {
+        this._timer.start();
+      }
+    }
+  }
+  /**
+   * Pause the auto close timer.
+   */
+  pauseAutoClose() {
+    this._pauseTimer = true;
+    if (this._timer !== null) {
+      this._timer.pause();
+    }
+  }
+  /**
+   * Resume the auto close timer.
+   */
+  resumeAutoClose() {
+    this._pauseTimer = false;
+    if (this._timer !== null && this.isOpen === true && this._animate === false) {
+      this._timer.restart();
+    }
+  }
+  get open() {
+    return this._open;
+  }
+  set open(value) {
+    if (value === true) {
+      this._makeOpen();
+    } else {
+      this._makeClose();
+    }
+  }
+  _getAnimationDuration() {
+    return Number.parseInt(
+      getComputedStyle(this).getPropertyValue(
+        "--uui-toast-notification-animation-duration"
+      ),
+      10
+    ) || 480;
+  }
+  _makeOpen() {
+    if (this._open === true) {
+      return;
+    }
+    this._open = true;
+    this.updateComplete.then(() => {
+      if (this._open !== true) {
+        return;
+      }
+      cancelAnimationFrame(this._requestAnimationUpdate);
+      this._requestAnimationUpdate = requestAnimationFrame(() => {
+        clearTimeout(this._animationTimeout);
+        this.isOpen = true;
+        this.setAttribute("is-open", "");
+        this.style.height = this._toastEl.getBoundingClientRect().height + "px";
+        this._animate = true;
+        this.dispatchEvent(
+          new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENING)
+        );
+        this._animationTimeout = globalThis.setTimeout(() => {
+          if (this.isOpen === true) {
+            this.style.height = "auto";
+            this._animate = false;
+            if (this._pauseTimer === false) {
+              this._timer?.start();
+            }
+            this.dispatchEvent(
+              new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED)
+            );
+          }
+        }, this._getAnimationDuration());
+      });
+    });
+  }
+  _makeClose() {
+    if (this._open === false) {
+      return;
+    }
+    const event = new UUIToastNotificationEvent(
+      UUIToastNotificationEvent.CLOSING,
+      { cancelable: true }
+    );
+    this.dispatchEvent(event);
+    if (event.defaultPrevented === true) {
+      return;
+    }
+    this._open = false;
+    this._timer?.pause();
+    cancelAnimationFrame(this._requestAnimationUpdate);
+    if (this.isOpen === true) {
+      this._requestAnimationUpdate = requestAnimationFrame(() => {
+        clearTimeout(this._animationTimeout);
+        this.isOpen = false;
+        this.removeAttribute("is-open");
+        this.style.height = this._toastEl.getBoundingClientRect().height + "px";
+        this._animate = true;
+        requestAnimationFrame(() => {
+          this.style.height = "0";
+        });
+        this._animationTimeout = globalThis.setTimeout(() => {
+          if (this.isOpen === false) {
+            this._animate = false;
+            this.dispatchEvent(
+              new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSED)
+            );
+            this.remove();
+          }
+        }, this._getAnimationDuration());
+      });
+    }
+  }
+  render() {
+    return html`
+      <div id="toast" class=${this._animate ? "animate" : ""}>
+        <div>
+          <div id="close">
+            <uui-button
+              .label=${"close"}
+              .color=${this.color}
+              .look=${this.color ? "primary" : "default"}
+              @click=${() => this.open = false}>
+              <uui-icon
+                name="remove"
+                .fallback=${iconRemove.strings[0]}></uui-icon>
+            </uui-button>
+          </div>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+};
+_UUIToastNotificationElement.styles = [
+  UUITextStyles,
+  css`
+      :host {
+        --uui-toast-notification-margin: var(--uui-size-space-2);
+
+        position: relative;
+        display: block;
+        width: 100%;
+        max-width: 400px;
+        margin: 0 var(--uui-toast-notification-margin);
+        box-sizing: border-box;
+
+        height: 0;
+        pointer-events: none;
+
+        transition: height
+          var(--uui-toast-notification-animation-duration, 480ms) ease-in-out;
+      }
+      :host([is-open]) {
+        pointer-events: all;
+        transition-timing-function: cubic-bezier(
+          0.19,
+          1,
+          0.22,
+          1
+        ); /* easeOutExpo */
+      }
+
+      #toast {
+        position: relative;
+        display: block;
+        padding: calc(var(--uui-toast-notification-margin) * 0.5) 0;
+        width: 100%;
+        max-width: 400px;
+      }
+      #toast.animate {
+        position: absolute;
+      }
+
+      #toast > div {
+        position: relative;
+        display: block;
+
+        box-sizing: border-box;
+        box-shadow: var(--uui-shadow-depth-1);
+        background-color: var(--uui-color-surface);
+        padding: var(--uui-size-layout-1);
+        padding-right: var(--uui-size-layout-1);
+        padding-left: var(--uui-size-layout-3);
+        border-radius: var(--uui-border-radius-3);
+
+        opacity: 0;
+        transition: opacity
+          var(--uui-toast-notification-animation-duration, 480ms);
+      }
+      :host([is-open]) #toast > div {
+        opacity: 1;
+      }
+
+      #close {
+        float: right;
+        margin-top: -6px;
+        margin-left: var(--uui-size-space-1);
+        margin-bottom: -4px;
+      }
+
+      #close > uui-button {
+        --uui-button-border-radius: 50px 50px 50px 50px;
+        --uui-button-padding-left-factor: 1.5;
+        --uui-button-padding-right-factor: 1.5;
+      }
+
+      :host #toast > div {
+        background-color: var(--uui-color-surface);
+        color: var(--uui-color-text);
+        border-color: var(--uui-color-surface);
+      }
+      :host([color='default']) #toast > div {
+        background-color: var(--uui-color-default);
+        color: var(--uui-color-default-contrast);
+        border-color: var(--uui-color-default-standalone);
+      }
+      :host([color='positive']) #toast > div {
+        background-color: var(--uui-color-positive);
+        color: var(--uui-color-positive-contrast);
+        border-color: var(--uui-color-positive-standalone);
+      }
+      :host([color='warning']) #toast > div {
+        background-color: var(--uui-color-warning);
+        color: var(--uui-color-warning-contrast);
+        border-color: var(--uui-color-warning-standalone);
+      }
+      :host([color='danger']) #toast > div {
+        background-color: var(--uui-color-danger);
+        color: var(--uui-color-danger-contrast);
+        border-color: var(--uui-color-danger-standalone);
+      }
+      :host([color='invalid']) #toast > div {
+        background-color: var(--uui-color-invalid);
+        color: var(--uui-color-invalid-contrast);
+        border-color: var(--uui-color-invalid-standalone);
+      }
+    `
+];
+let UUIToastNotificationElement = _UUIToastNotificationElement;
+__decorateClass([
+  property({ reflect: true })
+], UUIToastNotificationElement.prototype, "color", 2);
+__decorateClass([
+  property({ type: Number })
+], UUIToastNotificationElement.prototype, "autoClose", 1);
+__decorateClass([
+  query("#toast")
+], UUIToastNotificationElement.prototype, "_toastEl", 2);
+__decorateClass([
+  state()
+], UUIToastNotificationElement.prototype, "_animate", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIToastNotificationElement.prototype, "open", 1);
+export {
+  UUIToastNotificationElement
+};
+//# sourceMappingURL=toast-notification.element.js.map

package/dist/components/toast-notification/toast-notification.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification.element.js","sources":["../../../src/components/toast-notification/toast-notification.element.ts"],"sourcesContent":["import { UUITimer } from '../../internal/utils/index.js';\nimport { UUITextStyles } from '../../styles/index.js';\nimport { iconRemove } from '../icon-registry-essential/svgs/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\n\nimport { UUIToastNotificationEvent } from './UUIToastNotificationEvent.js';\nimport type { UUIInterfaceColor } from '../../internal/index.js';\n\nimport '../button/button.js';\nimport '../icon/icon.js';\n\n/**\n *  @element uui-toast-notification\n *  @fires {UUIToastNotificationEvent} opening - fires when the toast is starting to open\n *  @fires {UUIToastNotificationEvent} opened - fires when the toast is open after the open-animation\n *  @fires {UUIToastNotificationEvent} closing - fires when the toast is starting to close\n *  @fires {UUIToastNotificationEvent} closed - fires when the toast is closed\n *  @description - Component for displaying a toast notification, preferably used in toast-notification-container.\n *  @slot - slot for dialog layout/content\n */\nexport class UUIToastNotificationElement extends LitElement {\n  /**\n   * Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.\n   * @type {UUIInterfaceColor}\n   * @attr\n   * @default \"\"\n   */\n  @property({ reflect: true })\n  color: UUIInterfaceColor = '';\n\n  private _autoClose: number | null = null;\n  /**\n   * Set an auto-close timer.\n   * @type number\n   * @attr\n   * @default null\n   */\n  @property({ type: Number })\n  public get autoClose(): number | null {\n    return this._autoClose;\n  }\n  public set autoClose(value: number | null) {\n    this._autoClose = value;\n    if (value === null) {\n      this._timer?.destroy();\n      this._timer = null;\n    } else {\n      if (this._timer === null) {\n        this._timer = new UUITimer(this._onOpenTimerComplete, value);\n      } else {\n        this._timer.setDuration(value);\n      }\n      if (\n        this._pauseTimer === false &&\n        this.isOpen === true &&\n        this._animate === false\n      ) {\n        this._timer.start();\n      }\n    }\n  }\n\n  /**\n   * Pause the auto close timer.\n   */\n  public pauseAutoClose() {\n    this._pauseTimer = true;\n    if (this._timer !== null) {\n      this._timer.pause();\n    }\n  }\n  /**\n   * Resume the auto close timer.\n   */\n  public resumeAutoClose() {\n    this._pauseTimer = false;\n    if (\n      this._timer !== null &&\n      this.isOpen === true &&\n      this._animate === false\n    ) {\n      this._timer.restart();\n    }\n  }\n\n  private readonly _onOpenTimerComplete = () => {\n    if (this._open) {\n      this.open = false;\n    }\n  };\n\n  @query('#toast')\n  private readonly _toastEl!: HTMLElement;\n  private _timer: UUITimer | null = null;\n  private _pauseTimer: boolean = false;\n\n  protected isOpen = false;\n  private _open = false;\n\n  @state()\n  private _animate = false;\n  private _animationTimeout?: number;\n\n  /**\n   * define if this toast should open or close.\n   * @type boolean\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public get open() {\n    return this._open;\n  }\n  public set open(value: boolean) {\n    if (value === true) {\n      this._makeOpen();\n    } else {\n      this._makeClose();\n    }\n  }\n\n  constructor() {\n    super();\n    this.addEventListener('keyup', (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        this.open = false;\n      }\n    });\n  }\n\n  private _getAnimationDuration(): number {\n    return (\n      Number.parseInt(\n        getComputedStyle(this).getPropertyValue(\n          '--uui-toast-notification-animation-duration',\n        ),\n        10,\n      ) || 480\n    );\n  }\n\n  private _requestAnimationUpdate = 0;\n  private _makeOpen() {\n    if (this._open === true) {\n      return;\n    }\n    this._open = true;\n    this.updateComplete.then(() => {\n      if (this._open !== true) {\n        return;\n      }\n      cancelAnimationFrame(this._requestAnimationUpdate);\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = true;\n        this.setAttribute('is-open', '');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        this.dispatchEvent(\n          new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENING),\n        );\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === true) {\n            this.style.height = 'auto';\n            this._animate = false;\n            if (this._pauseTimer === false) {\n              this._timer?.start();\n            }\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.OPENED),\n            );\n          }\n        }, this._getAnimationDuration());\n      });\n    });\n  }\n  private _makeClose() {\n    if (this._open === false) {\n      return;\n    }\n\n    const event = new UUIToastNotificationEvent(\n      UUIToastNotificationEvent.CLOSING,\n      { cancelable: true },\n    );\n    this.dispatchEvent(event);\n\n    if (event.defaultPrevented === true) {\n      return;\n    }\n\n    this._open = false;\n    this._timer?.pause();\n    cancelAnimationFrame(this._requestAnimationUpdate); // do cancel though isOpen wasn't set jet.\n    if (this.isOpen === true) {\n      this._requestAnimationUpdate = requestAnimationFrame(() => {\n        clearTimeout(this._animationTimeout as number);\n        this.isOpen = false;\n        this.removeAttribute('is-open');\n\n        this.style.height = this._toastEl.getBoundingClientRect().height + 'px';\n        this._animate = true;\n\n        requestAnimationFrame(() => {\n          // Dont overwrite the height instantly, but instead wait one frame to ensure animate is set before setting the goal of the animation.\n          this.style.height = '0';\n        });\n\n        this._animationTimeout = globalThis.setTimeout(() => {\n          if (this.isOpen === false) {\n            this._animate = false;\n\n            this.dispatchEvent(\n              new UUIToastNotificationEvent(UUIToastNotificationEvent.CLOSED),\n            );\n            this.remove();\n          }\n        }, this._getAnimationDuration());\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <div id=\"toast\" class=${this._animate ? 'animate' : ''}>\n        <div>\n          <div id=\"close\">\n            <uui-button\n              .label=${'close'}\n              .color=${this.color}\n              .look=${this.color ? 'primary' : 'default'}\n              @click=${() => (this.open = false)}>\n              <uui-icon\n                name=\"remove\"\n                .fallback=${iconRemove.strings[0]}></uui-icon>\n            </uui-button>\n          </div>\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      :host {\n        --uui-toast-notification-margin: var(--uui-size-space-2);\n\n        position: relative;\n        display: block;\n        width: 100%;\n        max-width: 400px;\n        margin: 0 var(--uui-toast-notification-margin);\n        box-sizing: border-box;\n\n        height: 0;\n        pointer-events: none;\n\n        transition: height\n          var(--uui-toast-notification-animation-duration, 480ms) ease-in-out;\n      }\n      :host([is-open]) {\n        pointer-events: all;\n        transition-timing-function: cubic-bezier(\n          0.19,\n          1,\n          0.22,\n          1\n        ); /* easeOutExpo */\n      }\n\n      #toast {\n        position: relative;\n        display: block;\n        padding: calc(var(--uui-toast-notification-margin) * 0.5) 0;\n        width: 100%;\n        max-width: 400px;\n      }\n      #toast.animate {\n        position: absolute;\n      }\n\n      #toast > div {\n        position: relative;\n        display: block;\n\n        box-sizing: border-box;\n        box-shadow: var(--uui-shadow-depth-1);\n        background-color: var(--uui-color-surface);\n        padding: var(--uui-size-layout-1);\n        padding-right: var(--uui-size-layout-1);\n        padding-left: var(--uui-size-layout-3);\n        border-radius: var(--uui-border-radius-3);\n\n        opacity: 0;\n        transition: opacity\n          var(--uui-toast-notification-animation-duration, 480ms);\n      }\n      :host([is-open]) #toast > div {\n        opacity: 1;\n      }\n\n      #close {\n        float: right;\n        margin-top: -6px;\n        margin-left: var(--uui-size-space-1);\n        margin-bottom: -4px;\n      }\n\n      #close > uui-button {\n        --uui-button-border-radius: 50px 50px 50px 50px;\n        --uui-button-padding-left-factor: 1.5;\n        --uui-button-padding-right-factor: 1.5;\n      }\n\n      :host #toast > div {\n        background-color: var(--uui-color-surface);\n        color: var(--uui-color-text);\n        border-color: var(--uui-color-surface);\n      }\n      :host([color='default']) #toast > div {\n        background-color: var(--uui-color-default);\n        color: var(--uui-color-default-contrast);\n        border-color: var(--uui-color-default-standalone);\n      }\n      :host([color='positive']) #toast > div {\n        background-color: var(--uui-color-positive);\n        color: var(--uui-color-positive-contrast);\n        border-color: var(--uui-color-positive-standalone);\n      }\n      :host([color='warning']) #toast > div {\n        background-color: var(--uui-color-warning);\n        color: var(--uui-color-warning-contrast);\n        border-color: var(--uui-color-warning-standalone);\n      }\n      :host([color='danger']) #toast > div {\n        background-color: var(--uui-color-danger);\n        color: var(--uui-color-danger-contrast);\n        border-color: var(--uui-color-danger-standalone);\n      }\n      :host([color='invalid']) #toast > div {\n        background-color: var(--uui-color-invalid);\n        color: var(--uui-color-invalid-contrast);\n        border-color: var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/toast-notification/toast-notification.js

@@ -0,0 +1,10 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIToastNotificationElement } from "./toast-notification.element.js";
+import { UUIToastNotificationEvent } from "./UUIToastNotificationEvent.js";
+defineElement("uui-toast-notification", UUIToastNotificationElement);
+export {
+  UUIToastNotificationElement,
+  UUIToastNotificationEvent,
+  UUIToastNotificationElement as default
+};
+//# sourceMappingURL=toast-notification.js.map

package/dist/components/toast-notification/toast-notification.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification.js","sources":["../../../src/components/toast-notification/toast-notification.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIToastNotificationElement } from './toast-notification.element.js';\n\ndefineElement('uui-toast-notification', UUIToastNotificationElement);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-toast-notification': UUIToastNotificationElement;\n  }\n}\n\nexport * from './toast-notification.element.js';\nexport * from './UUIToastNotificationEvent.js';\nexport { UUIToastNotificationElement as default } from './toast-notification.element.js';\n"],"names":[],"mappings":";;;AAGA,cAAc,0BAA0B,2BAA2B;"}

package/dist/components/toast-notification-container/toast-notification-container.d.ts

@@ -0,0 +1,8 @@
+import { UUIToastNotificationContainerElement } from './toast-notification-container.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-toast-notification-container': UUIToastNotificationContainerElement;
+    }
+}
+export * from './toast-notification-container.element.js';
+export { UUIToastNotificationContainerElement as default } from './toast-notification-container.element.js';

package/dist/components/toast-notification-container/toast-notification-container.element.d.ts

@@ -0,0 +1,44 @@
+import type { UUIToastNotificationElement } from '../toast-notification/toast-notification.js';
+import { LitElement } from 'lit';
+/**
+ * @element uui-toast-notification-container
+ * @slot - slot for toast layout/content
+ * @attr {boolean} [bottom-up] - set the toast container to grow from bottom to top.
+ * @attr {boolean} [left-align] - set the toast container to align to the left.
+ * @attr {number} [auto-close] - set the auto close timer for all toasts in the container.
+ */
+export declare class UUIToastNotificationContainerElement extends LitElement {
+    /**
+     * Set an auto-close timer, the timer will be paused on mouse-hover.
+     * @type number | null
+     * @attr
+     * @default null
+     */
+    private _autoClose;
+    get autoClose(): number | null;
+    set autoClose(value: number | null);
+    private _autoClosePause;
+    /**
+     * pause all auto close timer, including later coming.
+     */
+    pauseAutoClose: () => void;
+    /**
+     * resume the auto close timers.
+     */
+    resumeAutoClose: () => void;
+    /**
+     * Instantly remove a toast element.
+     * @param  {UUIToastNotificationElement} toast The toast element to remove
+     */
+    removeToast(toast?: UUIToastNotificationElement): void;
+    /**
+     * Close a toast element, this will animate out and then be removed.
+     * @param  {UUIToastNotificationElement} toast The toast element to close and remove
+     */
+    closeToast(modal?: UUIToastNotificationElement): void;
+    private readonly onToastClosed;
+    private _toasts;
+    private readonly onSlotChanged;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}

package/dist/components/toast-notification-container/toast-notification-container.element.js

@@ -0,0 +1,152 @@
+import "../toast-notification/toast-notification.js";
+import { LitElement, html, css } from "lit";
+import { property } from "lit/decorators.js";
+import { UUIToastNotificationEvent } from "../toast-notification/UUIToastNotificationEvent.js";
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(target, key, result) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const _UUIToastNotificationContainerElement = class _UUIToastNotificationContainerElement extends LitElement {
+  constructor() {
+    super(...arguments);
+    this._autoClose = null;
+    this._autoClosePause = false;
+    this.pauseAutoClose = () => {
+      this._autoClosePause = true;
+      this._toasts?.forEach((el) => el.pauseAutoClose());
+    };
+    this.resumeAutoClose = () => {
+      if (this.matches(":focus-within:not(:focus)") === false) {
+        this._autoClosePause = false;
+        this._toasts?.forEach((el) => el.resumeAutoClose());
+      }
+    };
+    this.onToastClosed = (e) => {
+      this.removeToast(e.target);
+    };
+    this._toasts = [];
+    this.onSlotChanged = (event) => {
+      const existingModals = [...this._toasts];
+      this._toasts = event.target.assignedElements({ flatten: true }).filter(
+        (e) => e.nodeName === "UUI-TOAST-NOTIFICATION"
+      );
+      const oldToasts = existingModals.filter(
+        (modal) => !this._toasts.includes(modal)
+      );
+      oldToasts.forEach((toast) => {
+        toast.removeEventListener(
+          UUIToastNotificationEvent.CLOSED,
+          this.onToastClosed
+        );
+        toast.removeEventListener("mouseenter", this.pauseAutoClose);
+        toast.removeEventListener("mouseleave", this.resumeAutoClose);
+        toast.removeEventListener("focus", this.pauseAutoClose);
+        toast.removeEventListener("blur", this.resumeAutoClose);
+      });
+      const newToasts = this._toasts.filter(
+        (modal) => !existingModals.includes(modal)
+      );
+      newToasts.forEach((toast) => {
+        toast.addEventListener(
+          UUIToastNotificationEvent.CLOSED,
+          this.onToastClosed
+        );
+        toast.addEventListener("mouseenter", this.pauseAutoClose);
+        toast.addEventListener("mouseleave", this.resumeAutoClose);
+        toast.addEventListener("focus", this.pauseAutoClose);
+        toast.addEventListener("blur", this.resumeAutoClose);
+        if (this._autoClose) {
+          toast.autoClose = this._autoClose;
+        }
+        if (this._autoClosePause === true) {
+          toast.pauseAutoClose();
+        }
+        toast.open = true;
+      });
+    };
+  }
+  get autoClose() {
+    return this._autoClose;
+  }
+  set autoClose(value) {
+    this._autoClose = value;
+    this._toasts?.forEach((el) => el.autoClose = value);
+  }
+  /**
+   * Instantly remove a toast element.
+   * @param  {UUIToastNotificationElement} toast The toast element to remove
+   */
+  removeToast(toast) {
+    if (!toast) {
+      const last = this._toasts.at(-1);
+      if (!last) return;
+      toast = last;
+    } else if (!this._toasts.includes(toast)) {
+      console.warn(
+        "Toast-notification",
+        toast,
+        "could not be removed as it is not a child of this toast-notification-container",
+        this
+      );
+      return;
+    }
+    toast.remove();
+  }
+  /**
+   * Close a toast element, this will animate out and then be removed.
+   * @param  {UUIToastNotificationElement} toast The toast element to close and remove
+   */
+  closeToast(modal) {
+    const _modal = modal ?? this._toasts.at(-1);
+    if (_modal) {
+      _modal.open = false;
+    }
+  }
+  render() {
+    return html` <slot @slotchange=${this.onSlotChanged}></slot> `;
+  }
+};
+_UUIToastNotificationContainerElement.styles = [
+  css`
+      :host {
+        position: absolute;
+        overflow: hidden;
+        max-width: 100%;
+        height: 100%;
+
+        pointer-events: none;
+        box-sizing: border-box;
+      }
+
+      slot {
+        display: flex;
+        flex-direction: column;
+        align-items: end;
+
+        height: 100%;
+        box-sizing: border-box;
+
+        padding-top: var(--uui-size-space-1);
+        padding-bottom: var(--uui-size-space-1);
+      }
+      :host([bottom-up]) slot {
+        justify-content: end;
+      }
+      :host([left-align]) slot {
+        align-items: start;
+      }
+    `
+];
+let UUIToastNotificationContainerElement = _UUIToastNotificationContainerElement;
+__decorateClass([
+  property({ type: Number, reflect: true, attribute: "auto-close" })
+], UUIToastNotificationContainerElement.prototype, "_autoClose");
+export {
+  UUIToastNotificationContainerElement
+};
+//# sourceMappingURL=toast-notification-container.element.js.map

package/dist/components/toast-notification-container/toast-notification-container.element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification-container.element.js","sources":["../../../src/components/toast-notification-container/toast-notification-container.element.ts"],"sourcesContent":["import type { UUIToastNotificationElement } from '../toast-notification/toast-notification.js';\nimport { UUIToastNotificationEvent } from '../toast-notification/toast-notification.js';\nimport { css, html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\n\n/**\n * @element uui-toast-notification-container\n * @slot - slot for toast layout/content\n * @attr {boolean} [bottom-up] - set the toast container to grow from bottom to top.\n * @attr {boolean} [left-align] - set the toast container to align to the left.\n * @attr {number} [auto-close] - set the auto close timer for all toasts in the container.\n */\nexport class UUIToastNotificationContainerElement extends LitElement {\n  /**\n   * Set an auto-close timer, the timer will be paused on mouse-hover.\n   * @type number | null\n   * @attr\n   * @default null\n   */\n  @property({ type: Number, reflect: true, attribute: 'auto-close' })\n  private _autoClose: number | null = null;\n  public get autoClose(): number | null {\n    return this._autoClose;\n  }\n  public set autoClose(value: number | null) {\n    this._autoClose = value;\n    this._toasts?.forEach(el => (el.autoClose = value));\n  }\n\n  private _autoClosePause = false;\n\n  /**\n   * pause all auto close timer, including later coming.\n   */\n  public pauseAutoClose = () => {\n    this._autoClosePause = true;\n    this._toasts?.forEach(el => el.pauseAutoClose());\n  };\n  /**\n   * resume the auto close timers.\n   */\n  public resumeAutoClose = () => {\n    // Only reset autoClose if we have it and if one of the children does not have focus.\n    if (this.matches(':focus-within:not(:focus)') === false) {\n      this._autoClosePause = false;\n      this._toasts?.forEach(el => el.resumeAutoClose());\n    }\n  };\n\n  /**\n   * Instantly remove a toast element.\n   * @param  {UUIToastNotificationElement} toast The toast element to remove\n   */\n  public removeToast(toast?: UUIToastNotificationElement) {\n    if (!toast) {\n      const last = this._toasts.at(-1);\n      if (!last) return;\n      toast = last;\n    } else if (!this._toasts.includes(toast)) {\n      console.warn(\n        'Toast-notification',\n        toast,\n        'could not be removed as it is not a child of this toast-notification-container',\n        this,\n      );\n      return;\n    }\n    toast.remove();\n  }\n\n  /**\n   * Close a toast element, this will animate out and then be removed.\n   * @param  {UUIToastNotificationElement} toast The toast element to close and remove\n   */\n  public closeToast(modal?: UUIToastNotificationElement) {\n    const _modal = modal ?? this._toasts.at(-1);\n    if (_modal) {\n      _modal.open = false;\n    }\n  }\n\n  private readonly onToastClosed = (e: UUIToastNotificationEvent) => {\n    this.removeToast(e.target);\n  };\n\n  private _toasts: UUIToastNotificationElement[] = [];\n\n  private readonly onSlotChanged = (event: any) => {\n    const existingModals = [...this._toasts];\n\n    this._toasts = event.target\n      .assignedElements({ flatten: true })\n      .filter(\n        (e: Node) => e.nodeName === 'UUI-TOAST-NOTIFICATION',\n      ) as UUIToastNotificationElement[];\n\n    const oldToasts = existingModals.filter(\n      modal => !this._toasts.includes(modal),\n    );\n    oldToasts.forEach(toast => {\n      toast.removeEventListener(\n        UUIToastNotificationEvent.CLOSED,\n        this.onToastClosed as any,\n      );\n      toast.removeEventListener('mouseenter', this.pauseAutoClose);\n      toast.removeEventListener('mouseleave', this.resumeAutoClose);\n      toast.removeEventListener('focus', this.pauseAutoClose);\n      toast.removeEventListener('blur', this.resumeAutoClose);\n    });\n\n    const newToasts = this._toasts.filter(\n      modal => !existingModals.includes(modal),\n    );\n    newToasts.forEach(toast => {\n      toast.addEventListener(\n        UUIToastNotificationEvent.CLOSED,\n        this.onToastClosed as any,\n      );\n\n      toast.addEventListener('mouseenter', this.pauseAutoClose);\n      toast.addEventListener('mouseleave', this.resumeAutoClose);\n      toast.addEventListener('focus', this.pauseAutoClose);\n      toast.addEventListener('blur', this.resumeAutoClose);\n\n      if (this._autoClose) {\n        toast.autoClose = this._autoClose;\n      }\n      if (this._autoClosePause === true) {\n        toast.pauseAutoClose();\n      }\n      toast.open = true;\n    });\n  };\n\n  render() {\n    return html` <slot @slotchange=${this.onSlotChanged}></slot> `;\n  }\n\n  static override readonly styles = [\n    css`\n      :host {\n        position: absolute;\n        overflow: hidden;\n        max-width: 100%;\n        height: 100%;\n\n        pointer-events: none;\n        box-sizing: border-box;\n      }\n\n      slot {\n        display: flex;\n        flex-direction: column;\n        align-items: end;\n\n        height: 100%;\n        box-sizing: border-box;\n\n        padding-top: var(--uui-size-space-1);\n        padding-bottom: var(--uui-size-space-1);\n      }\n      :host([bottom-up]) slot {\n        justify-content: end;\n      }\n      :host([left-align]) slot {\n        align-items: start;\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/toast-notification-container/toast-notification-container.js

@@ -0,0 +1,11 @@
+import { defineElement } from "../../internal/registration/index.js";
+import { UUIToastNotificationContainerElement } from "./toast-notification-container.element.js";
+defineElement(
+  "uui-toast-notification-container",
+  UUIToastNotificationContainerElement
+);
+export {
+  UUIToastNotificationContainerElement,
+  UUIToastNotificationContainerElement as default
+};
+//# sourceMappingURL=toast-notification-container.js.map

package/dist/components/toast-notification-container/toast-notification-container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-notification-container.js","sources":["../../../src/components/toast-notification-container/toast-notification-container.ts"],"sourcesContent":["import { defineElement } from '../../internal/registration/index.js';\nimport { UUIToastNotificationContainerElement } from './toast-notification-container.element.js';\n\ndefineElement(\n  'uui-toast-notification-container',\n  UUIToastNotificationContainerElement,\n);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uui-toast-notification-container': UUIToastNotificationContainerElement;\n  }\n}\n\nexport * from './toast-notification-container.element.js';\nexport { UUIToastNotificationContainerElement as default } from './toast-notification-container.element.js';\n"],"names":[],"mappings":";;AAGA;AAAA,EACE;AAAA,EACA;AACF;"}

package/dist/components/toast-notification-layout/toast-notification-layout.d.ts

@@ -0,0 +1,8 @@
+import { UUIToastNotificationLayoutElement } from './toast-notification-layout.element.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-toast-notification-layout': UUIToastNotificationLayoutElement;
+    }
+}
+export * from './toast-notification-layout.element.js';
+export { UUIToastNotificationLayoutElement as default } from './toast-notification-layout.element.js';

package/dist/components/toast-notification-layout/toast-notification-layout.element.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+/**
+ *  @element uui-toast-notification-layout
+ *  @description - Component for setting the layout for a toast notification, to be used within toast-notification.
+ *  @slot - for content
+ *  @slot headline - for headline
+ *  @slot actions - for actions
+ */
+export declare class UUIToastNotificationLayoutElement extends LitElement {
+    /**
+     * Headline for this notification, can also be set via the 'headline' slot.
+     * @attr
+     * @default
+     */
+    headline: string;
+    private _headlineSlotHasContent;
+    private readonly _headlineSlotChanged;
+    render(): import("lit-html").TemplateResult<1>;
+    static readonly styles: import("lit").CSSResult[];
+}