@umbraco-ui/uui 2.0.0 → 2.0.1

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

@@ -1,118 +1,92 @@
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
+import { UUIToastNotificationEvent } from "../toast-notification/UUIToastNotificationEvent.js";
 import "../toast-notification/toast-notification.js";
-import { LitElement, html, css } from "lit";
+import { LitElement, css, html } 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`
+//#region src/components/toast-notification-container/toast-notification-container.element.ts
+/**
+* @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.
+*/
+var UUIToastNotificationContainerElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		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");
+			existingModals.filter((modal) => !this._toasts.includes(modal)).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);
+			});
+			this._toasts.filter((modal) => !existingModals.includes(modal)).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> `;
+	}
+	static {
+		this.styles = [css`
       :host {
         position: absolute;
         overflow: hidden;
@@ -140,13 +114,15 @@ _UUIToastNotificationContainerElement.styles = [
       :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
+__decorate([property({
+	type: Number,
+	reflect: true,
+	attribute: "auto-close"
+})], UUIToastNotificationContainerElement.prototype, "_autoClose", void 0);
+//#endregion
+export { UUIToastNotificationContainerElement };
+
+//# sourceMappingURL=toast-notification-container.element.js.map

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

@@ -1 +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":";;;;;;;;;;;;;AAYO,MAAM,wCAAN,MAAM,8CAA6C,WAAW;AAAA,EAA9D,cAAA;AAAA,UAAA,GAAA,SAAA;AAQL,SAAQ,aAA4B;AASpC,SAAQ,kBAAkB;AAK1B,SAAO,iBAAiB,MAAM;AAC5B,WAAK,kBAAkB;AACvB,WAAK,SAAS,QAAQ,CAAA,OAAM,GAAG,gBAAgB;AAAA,IACjD;AAIA,SAAO,kBAAkB,MAAM;AAE7B,UAAI,KAAK,QAAQ,2BAA2B,MAAM,OAAO;AACvD,aAAK,kBAAkB;AACvB,aAAK,SAAS,QAAQ,CAAA,OAAM,GAAG,iBAAiB;AAAA,MAClD;AAAA,IACF;AAkCA,SAAiB,gBAAgB,CAAC,MAAiC;AACjE,WAAK,YAAY,EAAE,MAAM;AAAA,IAC3B;AAEA,SAAQ,UAAyC,CAAA;AAEjD,SAAiB,gBAAgB,CAAC,UAAe;AAC/C,YAAM,iBAAiB,CAAC,GAAG,KAAK,OAAO;AAEvC,WAAK,UAAU,MAAM,OAClB,iBAAiB,EAAE,SAAS,KAAA,CAAM,EAClC;AAAA,QACC,CAAC,MAAY,EAAE,aAAa;AAAA,MAAA;AAGhC,YAAM,YAAY,eAAe;AAAA,QAC/B,CAAA,UAAS,CAAC,KAAK,QAAQ,SAAS,KAAK;AAAA,MAAA;AAEvC,gBAAU,QAAQ,CAAA,UAAS;AACzB,cAAM;AAAA,UACJ,0BAA0B;AAAA,UAC1B,KAAK;AAAA,QAAA;AAEP,cAAM,oBAAoB,cAAc,KAAK,cAAc;AAC3D,cAAM,oBAAoB,cAAc,KAAK,eAAe;AAC5D,cAAM,oBAAoB,SAAS,KAAK,cAAc;AACtD,cAAM,oBAAoB,QAAQ,KAAK,eAAe;AAAA,MACxD,CAAC;AAED,YAAM,YAAY,KAAK,QAAQ;AAAA,QAC7B,CAAA,UAAS,CAAC,eAAe,SAAS,KAAK;AAAA,MAAA;AAEzC,gBAAU,QAAQ,CAAA,UAAS;AACzB,cAAM;AAAA,UACJ,0BAA0B;AAAA,UAC1B,KAAK;AAAA,QAAA;AAGP,cAAM,iBAAiB,cAAc,KAAK,cAAc;AACxD,cAAM,iBAAiB,cAAc,KAAK,eAAe;AACzD,cAAM,iBAAiB,SAAS,KAAK,cAAc;AACnD,cAAM,iBAAiB,QAAQ,KAAK,eAAe;AAEnD,YAAI,KAAK,YAAY;AACnB,gBAAM,YAAY,KAAK;AAAA,QACzB;AACA,YAAI,KAAK,oBAAoB,MAAM;AACjC,gBAAM,eAAA;AAAA,QACR;AACA,cAAM,OAAO;AAAA,MACf,CAAC;AAAA,IACH;AAAA,EAAA;AAAA,EA/GA,IAAW,YAA2B;AACpC,WAAO,KAAK;AAAA,EACd;AAAA,EACA,IAAW,UAAU,OAAsB;AACzC,SAAK,aAAa;AAClB,SAAK,SAAS,QAAQ,CAAA,OAAO,GAAG,YAAY,KAAM;AAAA,EACpD;AAAA;AAAA;AAAA;AAAA;AAAA,EA0BO,YAAY,OAAqC;AACtD,QAAI,CAAC,OAAO;AACV,YAAM,OAAO,KAAK,QAAQ,GAAG,EAAE;AAC/B,UAAI,CAAC,KAAM;AACX,cAAQ;AAAA,IACV,WAAW,CAAC,KAAK,QAAQ,SAAS,KAAK,GAAG;AACxC,cAAQ;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAEF;AAAA,IACF;AACA,UAAM,OAAA;AAAA,EACR;AAAA;AAAA;AAAA;AAAA;AAAA,EAMO,WAAW,OAAqC;AACrD,UAAM,SAAS,SAAS,KAAK,QAAQ,GAAG,EAAE;AAC1C,QAAI,QAAQ;AACV,aAAO,OAAO;AAAA,IAChB;AAAA,EACF;AAAA,EAuDA,SAAS;AACP,WAAO,0BAA0B,KAAK,aAAa;AAAA,EACrD;AAiCF;AA/BE,sCAAyB,SAAS;AAAA,EAChC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA/HG,IAAM,uCAAN;AAQG,gBAAA;AAAA,EADP,SAAS,EAAE,MAAM,QAAQ,SAAS,MAAM,WAAW,cAAc;AAAA,GAPvD,qCAQH,WAAA,YAAA;"}
+{"version":3,"file":"toast-notification-container.element.js","names":[],"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"],"mappings":";;;;;;;;;;;;;AAYA,IAAa,uCAAb,cAA0D,WAAW;;;oBAQ/B;yBASV;8BAKI;GAC5B,KAAK,kBAAkB;GACvB,KAAK,SAAS,SAAQ,OAAM,GAAG,eAAe,CAAC;EACjD;+BAI+B;GAE7B,IAAI,KAAK,QAAQ,2BAA2B,MAAM,OAAO;IACvD,KAAK,kBAAkB;IACvB,KAAK,SAAS,SAAQ,OAAM,GAAG,gBAAgB,CAAC;GAClD;EACF;wBAkCkC,MAAiC;GACjE,KAAK,YAAY,EAAE,MAAM;EAC3B;iBAEiD,CAAC;wBAEhB,UAAe;GAC/C,MAAM,iBAAiB,CAAC,GAAG,KAAK,OAAO;GAEvC,KAAK,UAAU,MAAM,OAClB,iBAAiB,EAAE,SAAS,KAAK,CAAC,CAAC,CACnC,QACE,MAAY,EAAE,aAAa,wBAC9B;GAKF,eAHiC,QAC/B,UAAS,CAAC,KAAK,QAAQ,SAAS,KAAK,CAEvC,CAAA,CAAU,SAAQ,UAAS;IACzB,MAAM,oBACJ,0BAA0B,QAC1B,KAAK,aACP;IACA,MAAM,oBAAoB,cAAc,KAAK,cAAc;IAC3D,MAAM,oBAAoB,cAAc,KAAK,eAAe;IAC5D,MAAM,oBAAoB,SAAS,KAAK,cAAc;IACtD,MAAM,oBAAoB,QAAQ,KAAK,eAAe;GACxD,CAAC;GAKD,KAHuB,QAAQ,QAC7B,UAAS,CAAC,eAAe,SAAS,KAAK,CAEzC,CAAA,CAAU,SAAQ,UAAS;IACzB,MAAM,iBACJ,0BAA0B,QAC1B,KAAK,aACP;IAEA,MAAM,iBAAiB,cAAc,KAAK,cAAc;IACxD,MAAM,iBAAiB,cAAc,KAAK,eAAe;IACzD,MAAM,iBAAiB,SAAS,KAAK,cAAc;IACnD,MAAM,iBAAiB,QAAQ,KAAK,eAAe;IAEnD,IAAI,KAAK,YACP,MAAM,YAAY,KAAK;IAEzB,IAAI,KAAK,oBAAoB,MAC3B,MAAM,eAAe;IAEvB,MAAM,OAAO;GACf,CAAC;EACH;;CA/GA,IAAW,YAA2B;EACpC,OAAO,KAAK;CACd;CACA,IAAW,UAAU,OAAsB;EACzC,KAAK,aAAa;EAClB,KAAK,SAAS,SAAQ,OAAO,GAAG,YAAY,KAAM;CACpD;;;;;CA0BA,YAAmB,OAAqC;EACtD,IAAI,CAAC,OAAO;GACV,MAAM,OAAO,KAAK,QAAQ,GAAG,EAAE;GAC/B,IAAI,CAAC,MAAM;GACX,QAAQ;EACV,OAAO,IAAI,CAAC,KAAK,QAAQ,SAAS,KAAK,GAAG;GACxC,QAAQ,KACN,sBACA,OACA,kFACA,IACF;GACA;EACF;EACA,MAAM,OAAO;CACf;;;;;CAMA,WAAkB,OAAqC;EACrD,MAAM,SAAS,SAAS,KAAK,QAAQ,GAAG,EAAE;EAC1C,IAAI,QACF,OAAO,OAAO;CAElB;CAuDA,SAAS;EACP,OAAO,IAAI,sBAAsB,KAAK,cAAc;CACtD;;gBAEkC,CAChC,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BL;;AACF;YAtJG,SAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAa,CAAC,CAAA,GAAA,qCAAA,WAAA,cAAA,KAAA,CAAA"}

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

@@ -1,11 +1,8 @@
 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
+//#region src/components/toast-notification-container/toast-notification-container.ts
+defineElement("uui-toast-notification-container", UUIToastNotificationContainerElement);
+//#endregion
+export { UUIToastNotificationContainerElement };
+
+//# sourceMappingURL=toast-notification-container.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"toast-notification-container.js","names":[],"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';\n"],"mappings":";;;AAGA,cACE,oCACA,oCACF"}

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

@@ -5,4 +5,3 @@ declare global {
     }
 }
 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.js

@@ -1,26 +1,26 @@
-import { LitElement, html, css } from "lit";
-import { property, state } from "lit/decorators.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
 import { UUITextStyles } from "../../styles/uui-text.styles.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 _UUIToastNotificationLayoutElement = class _UUIToastNotificationLayoutElement extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.headline = "";
-    this._headlineSlotHasContent = false;
-    this._headlineSlotChanged = (e) => {
-      this._headlineSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
-    };
-  }
-  render() {
-    return html`
+import { LitElement, css, html } from "lit";
+import { property, state } from "lit/decorators.js";
+//#region src/components/toast-notification-layout/toast-notification-layout.element.ts
+/**
+*  @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
+*/
+var UUIToastNotificationLayoutElement = class extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.headline = "";
+		this._headlineSlotHasContent = false;
+		this._headlineSlotChanged = (e) => {
+			this._headlineSlotHasContent = e.target.assignedNodes({ flatten: true }).length > 0;
+		};
+	}
+	render() {
+		return html`
       <div id="message" class="uui-text">
         <h5
           style=${this._headlineSlotHasContent || this.headline && this.headline !== "" ? "" : "display: none"}>
@@ -31,11 +31,9 @@ const _UUIToastNotificationLayoutElement = class _UUIToastNotificationLayoutElem
         <slot id="actions" name="actions"></slot>
       </div>
     `;
-  }
-};
-_UUIToastNotificationLayoutElement.styles = [
-  UUITextStyles,
-  css`
+	}
+	static {
+		this.styles = [UUITextStyles, css`
       #message {
         margin-bottom: calc(var(--uui-size-space-1) * -1);
       }
@@ -56,16 +54,12 @@ _UUIToastNotificationLayoutElement.styles = [
         margin-top: var(--uui-size-space-4);
         margin-bottom: calc(var(--uui-size-space-2) * -1);
       }
-    `
-];
-let UUIToastNotificationLayoutElement = _UUIToastNotificationLayoutElement;
-__decorateClass([
-  property({ type: String })
-], UUIToastNotificationLayoutElement.prototype, "headline");
-__decorateClass([
-  state()
-], UUIToastNotificationLayoutElement.prototype, "_headlineSlotHasContent");
-export {
-  UUIToastNotificationLayoutElement
+    `];
+	}
 };
-//# sourceMappingURL=toast-notification-layout.element.js.map
+__decorate([property({ type: String })], UUIToastNotificationLayoutElement.prototype, "headline", void 0);
+__decorate([state()], UUIToastNotificationLayoutElement.prototype, "_headlineSlotHasContent", void 0);
+//#endregion
+export { UUIToastNotificationLayoutElement };
+
+//# sourceMappingURL=toast-notification-layout.element.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toast-notification-layout.element.js","sources":["../../../src/components/toast-notification-layout/toast-notification-layout.element.ts"],"sourcesContent":["import { UUITextStyles } from '../../styles/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\n/**\n *  @element uui-toast-notification-layout\n *  @description - Component for setting the layout for a toast notification, to be used within toast-notification.\n *  @slot - for content\n *  @slot headline - for headline\n *  @slot actions - for actions\n */\nexport class UUIToastNotificationLayoutElement extends LitElement {\n  /**\n   * Headline for this notification, can also be set via the 'headline' slot.\n   * @attr\n   * @default\n   */\n  @property({ type: String })\n  headline: string = '';\n\n  @state()\n  private _headlineSlotHasContent = false;\n\n  private readonly _headlineSlotChanged = (e: Event) => {\n    this._headlineSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  render() {\n    return html`\n      <div id=\"message\" class=\"uui-text\">\n        <h5\n          style=${this._headlineSlotHasContent ||\n          (this.headline && this.headline !== '')\n            ? ''\n            : 'display: none'}>\n          ${this.headline}\n          <slot name=\"headline\" @slotchange=${this._headlineSlotChanged}></slot>\n        </h5>\n        <slot></slot>\n        <slot id=\"actions\" name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      #message {\n        margin-bottom: calc(var(--uui-size-space-1) * -1);\n      }\n      #message::after {\n        content: '';\n        display: block;\n        clear: both;\n      }\n      #actions {\n        /*\n        display: flex;\n        width: 100%;\n        justify-content: flex-end;\n        */\n        display: block;\n        float: right;\n\n        margin-top: var(--uui-size-space-4);\n        margin-bottom: calc(var(--uui-size-space-2) * -1);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAWO,MAAM,qCAAN,MAAM,2CAA0C,WAAW;AAAA,EAA3D,cAAA;AAAA,UAAA,GAAA,SAAA;AAOL,SAAA,WAAmB;AAGnB,SAAQ,0BAA0B;AAElC,SAAiB,uBAAuB,CAAC,MAAa;AACpD,WAAK,0BACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAA,CAAM,EAAE,SAAS;AAAA,IAC5E;AAAA,EAAA;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,kBAGO,KAAK,2BACZ,KAAK,YAAY,KAAK,aAAa,KAChC,KACA,eAAe;AAAA,YACjB,KAAK,QAAQ;AAAA,8CACqB,KAAK,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMrE;AA2BF;AAzBE,mCAAyB,SAAS;AAAA,EAChC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AApCG,IAAM,oCAAN;AAOL,gBAAA;AAAA,EADC,SAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GANf,kCAOX,WAAA,UAAA;AAGQ,gBAAA;AAAA,EADP,MAAA;AAAM,GATI,kCAUH,WAAA,yBAAA;"}
+{"version":3,"file":"toast-notification-layout.element.js","names":[],"sources":["../../../src/components/toast-notification-layout/toast-notification-layout.element.ts"],"sourcesContent":["import { UUITextStyles } from '../../styles/index.js';\nimport { css, html, LitElement } from 'lit';\nimport { property, state } from 'lit/decorators.js';\n\n/**\n *  @element uui-toast-notification-layout\n *  @description - Component for setting the layout for a toast notification, to be used within toast-notification.\n *  @slot - for content\n *  @slot headline - for headline\n *  @slot actions - for actions\n */\nexport class UUIToastNotificationLayoutElement extends LitElement {\n  /**\n   * Headline for this notification, can also be set via the 'headline' slot.\n   * @attr\n   * @default\n   */\n  @property({ type: String })\n  headline: string = '';\n\n  @state()\n  private _headlineSlotHasContent = false;\n\n  private readonly _headlineSlotChanged = (e: Event) => {\n    this._headlineSlotHasContent =\n      (e.target as HTMLSlotElement).assignedNodes({ flatten: true }).length > 0;\n  };\n\n  render() {\n    return html`\n      <div id=\"message\" class=\"uui-text\">\n        <h5\n          style=${this._headlineSlotHasContent ||\n          (this.headline && this.headline !== '')\n            ? ''\n            : 'display: none'}>\n          ${this.headline}\n          <slot name=\"headline\" @slotchange=${this._headlineSlotChanged}></slot>\n        </h5>\n        <slot></slot>\n        <slot id=\"actions\" name=\"actions\"></slot>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    UUITextStyles,\n    css`\n      #message {\n        margin-bottom: calc(var(--uui-size-space-1) * -1);\n      }\n      #message::after {\n        content: '';\n        display: block;\n        clear: both;\n      }\n      #actions {\n        /*\n        display: flex;\n        width: 100%;\n        justify-content: flex-end;\n        */\n        display: block;\n        float: right;\n\n        margin-top: var(--uui-size-space-4);\n        margin-bottom: calc(var(--uui-size-space-2) * -1);\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;AAWA,IAAa,oCAAb,cAAuD,WAAW;;;kBAO7C;iCAGe;+BAEO,MAAa;GACpD,KAAK,0BACF,EAAE,OAA2B,cAAc,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC,SAAS;EAC5E;;CAEA,SAAS;EACP,OAAO,IAAI;;;kBAGG,KAAK,2BACZ,KAAK,YAAY,KAAK,aAAa,KAChC,KACA,gBAAgB;YAClB,KAAK,SAAS;8CACoB,KAAK,qBAAqB;;;;;;CAMtE;;gBAEkC,CAChC,eACA,GAAG;;;;;;;;;;;;;;;;;;;;;KAsBL;;AACF;YArDG,SAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,kCAAA,WAAA,YAAA,KAAA,CAAA;YAGzB,MAAM,CAAA,GAAA,kCAAA,WAAA,2BAAA,KAAA,CAAA"}

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

@@ -1,11 +1,8 @@
 import { defineElement } from "../../internal/registration/index.js";
 import { UUIToastNotificationLayoutElement } from "./toast-notification-layout.element.js";
-defineElement(
-  "uui-toast-notification-layout",
-  UUIToastNotificationLayoutElement
-);
-export {
-  UUIToastNotificationLayoutElement,
-  UUIToastNotificationLayoutElement as default
-};
-//# sourceMappingURL=toast-notification-layout.js.map
+//#region src/components/toast-notification-layout/toast-notification-layout.ts
+defineElement("uui-toast-notification-layout", UUIToastNotificationLayoutElement);
+//#endregion
+export { UUIToastNotificationLayoutElement };
+
+//# sourceMappingURL=toast-notification-layout.js.map

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

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

package/dist/components/toggle/toggle.d.ts

@@ -5,4 +5,3 @@ declare global {
     }
 }
 export * from './toggle.element.js';
-export { UUIToggleElement as default } from './toggle.element.js';

package/dist/components/toggle/toggle.element.js

@@ -1,58 +1,45 @@
-import { UUIBooleanInputElement } from "../boolean-input/boolean-input.element.js";
-import "../boolean-input/UUIBooleanInputEvent.js";
-import "../icon-registry-essential/svgs/iconAdd.js";
-import "../icon-registry-essential/svgs/iconAlert.js";
-import "../icon-registry-essential/svgs/iconAttachment.js";
-import "../icon-registry-essential/svgs/iconCalendar.js";
+import { UUIHorizontalShakeAnimationValue, UUIHorizontalShakeKeyframes } from "../../internal/animations/uui-shake.js";
 import { iconCheck } from "../icon-registry-essential/svgs/iconCheck.js";
-import "../icon-registry-essential/svgs/iconClipboard.js";
-import "../icon-registry-essential/svgs/iconCode.js";
-import "../icon-registry-essential/svgs/iconColorPicker.js";
-import "../icon-registry-essential/svgs/iconCopy.js";
-import "../icon-registry-essential/svgs/iconDelete.js";
-import "../icon-registry-essential/svgs/iconDocument.js";
-import "../icon-registry-essential/svgs/iconDownload.js";
-import "../icon-registry-essential/svgs/iconDrag.js";
-import "../icon-registry-essential/svgs/iconEdit.js";
-import "../icon-registry-essential/svgs/iconFavorite.js";
-import "../icon-registry-essential/svgs/iconFolder.js";
-import "../icon-registry-essential/svgs/iconForbidden.js";
-import "../icon-registry-essential/svgs/iconInfo.js";
-import "../icon-registry-essential/svgs/iconLink.js";
-import "../icon-registry-essential/svgs/iconLock.js";
-import "../icon-registry-essential/svgs/iconPause.js";
-import "../icon-registry-essential/svgs/iconPicture.js";
-import "../icon-registry-essential/svgs/iconPlay.js";
 import { iconRemove } from "../icon-registry-essential/svgs/iconRemove.js";
-import "../icon-registry-essential/svgs/iconSearch.js";
-import "../icon-registry-essential/svgs/iconSee.js";
-import "../icon-registry-essential/svgs/iconSettings.js";
-import "../icon-registry-essential/svgs/iconSubtract.js";
-import "../icon-registry-essential/svgs/iconSync.js";
-import "../icon-registry-essential/svgs/iconUnlock.js";
-import "../icon-registry-essential/svgs/iconUnsee.js";
-import "../icon-registry-essential/svgs/iconWand.js";
-import "../icon-registry-essential/svgs/iconWrong.js";
-import { html, css } from "lit";
-import { UUIHorizontalShakeKeyframes, UUIHorizontalShakeAnimationValue } from "../../internal/animations/uui-shake.js";
-const _UUIToggleElement = class _UUIToggleElement extends UUIBooleanInputElement {
-  constructor() {
-    super("switch");
-  }
-  renderCheckbox() {
-    return html`
+import "../icon-registry-essential/svgs/index.js";
+import { UUIBooleanInputElement } from "../boolean-input/boolean-input.element.js";
+import "../boolean-input/boolean-input.js";
+import { css, html } from "lit";
+//#region src/components/toggle/toggle.element.ts
+/**
+*  Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.
+*  @element uui-toggle
+*  @fires UUIBooleanInputEvent#change- fires when the element is begin checked by a user action
+*  @cssprop --uui-toggle-size - Define the toggle size.
+*  @cssprop --uui-toggle-switch-width - Define the slider width.
+*  @cssprop --uui-toggle-background-color - Set the toggle background color
+*  @cssprop --uui-toggle-border-color - Set the toggle border color
+*  @cssprop --uui-toggle-border-color-hover - Set the toggle background color when hovered
+*  @cssprop --uui-toggle-background-color-hover - Set the toggle background color when hovered
+*  @cssprop --uui-toggle-border-color-focus - Set the toggle background color when focused
+*  @cssprop --uui-toggle-background-color-focus - Set the toggle background color when focused
+*  @extends UUIBooleanInputElement
+*/
+var UUIToggleElement = class extends UUIBooleanInputElement {
+	static {
+		this.formAssociated = true;
+	}
+	constructor() {
+		super("switch");
+	}
+	renderCheckbox() {
+		return html`
       <div id="toggle">
         <div id="icon-checked">${iconCheck}</div>
         <div id="icon-unchecked">${iconRemove}</div>
       </div>
     `;
-  }
-};
-_UUIToggleElement.formAssociated = true;
-_UUIToggleElement.styles = [
-  ...UUIBooleanInputElement.styles,
-  UUIHorizontalShakeKeyframes,
-  css`
+	}
+	static {
+		this.styles = [
+			...UUIBooleanInputElement.styles,
+			UUIHorizontalShakeKeyframes,
+			css`
       :host {
         --uui-toggle-size: 18px;
         --uui-toggle-switch-width: calc(2 * var(--uui-toggle-size));
@@ -173,7 +160,8 @@ _UUIToggleElement.styles = [
       }
 
       input:focus-visible ~ #toggle {
-        outline: 2px solid var(--uui-color-focus);
+        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid
+          var(--uui-color-focus);
       }
 
       :host(:not([disabled], [readonly])) label:active #toggle::after {
@@ -208,9 +196,10 @@ _UUIToggleElement.styles = [
         border: 1px solid var(--uui-color-invalid-standalone);
       }
     `
-];
-let UUIToggleElement = _UUIToggleElement;
-export {
-  UUIToggleElement
+		];
+	}
 };
-//# sourceMappingURL=toggle.element.js.map
+//#endregion
+export { UUIToggleElement };
+
+//# sourceMappingURL=toggle.element.js.map

package/dist/components/toggle/toggle.element.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.element.js","sources":["../../../src/components/toggle/toggle.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';\nimport {\n  iconCheck,\n  iconRemove,\n} from '../icon-registry-essential/svgs/index.js';\nimport { css, html } from 'lit';\n\n/**\n *  Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.\n *  @element uui-toggle\n *  @fires UUIBooleanInputEvent#change- fires when the element is begin checked by a user action\n *  @cssprop --uui-toggle-size - Define the toggle size.\n *  @cssprop --uui-toggle-switch-width - Define the slider width.\n *  @cssprop --uui-toggle-background-color - Set the toggle background color\n *  @cssprop --uui-toggle-border-color - Set the toggle border color\n *  @cssprop --uui-toggle-border-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-background-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-border-color-focus - Set the toggle background color when focused\n *  @cssprop --uui-toggle-background-color-focus - Set the toggle background color when focused\n *  @extends UUIBooleanInputElement\n */\nexport class UUIToggleElement extends UUIBooleanInputElement {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  constructor() {\n    super('switch');\n  }\n\n  renderCheckbox() {\n    return html`\n      <div id=\"toggle\">\n        <div id=\"icon-checked\">${iconCheck}</div>\n        <div id=\"icon-unchecked\">${iconRemove}</div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUIBooleanInputElement.styles,\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        --uui-toggle-size: 18px;\n        --uui-toggle-switch-width: calc(2 * var(--uui-toggle-size));\n      }\n\n      #toggle {\n        position: relative;\n        grid-area: 'input';\n        display: flex;\n        align-items: center;\n\n        flex-shrink: 0;\n\n        width: var(--uui-toggle-switch-width);\n        height: var(--uui-toggle-size);\n        border-radius: 100px;\n\n        background-color: var(\n          --uui-toggle-background-color,\n          var(--uui-color-divider-standalone)\n        );\n        border: 1px solid\n          var(--uui-toggle-border-color, var(--uui-color-border-standalone));\n        font-size: calc(var(--uui-toggle-size) * 0.6);\n\n        transition:\n          background-color 60ms,\n          border-color 60ms;\n      }\n\n      label:hover input:not([disabled]) ~ #toggle {\n        border-color: var(\n          --uui-toggle-border-color-hover,\n          var(--uui-color-border-emphasis)\n        );\n        background-color: var(\n          --uui-toggle-background-color-hover,\n          var(--uui-color-divider)\n        );\n      }\n\n      label:focus #toggle {\n        border-color: var(\n          --uui-toggle-border-color-focus,\n          var(--uui-color-focus)\n        );\n        background-color: var(\n          --uui-toggle-background-color-focus,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n\n      input:checked ~ #toggle {\n        background-color: var(--uui-color-selected);\n      }\n      input:checked ~ #toggle::after {\n        border-color: var(--uui-color-selected-standalone);\n      }\n\n      label:hover input:checked:not([disabled]) ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      label:focus input:checked ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      #icon-checked,\n      #icon-unchecked {\n        position: absolute;\n        vertical-align: middle;\n        width: 1em;\n        height: 1em;\n        line-height: 0;\n        transition: color 120ms;\n        svg {\n          stroke-width: 2.5;\n        }\n      }\n\n      #icon-checked {\n        margin-left: -0.45em;\n        left: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      #icon-unchecked {\n        margin-right: -0.5em;\n        right: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      input:checked ~ #toggle #icon-checked {\n        color: var(--uui-color-selected-contrast);\n      }\n\n      #toggle::after {\n        content: '';\n        position: absolute;\n        top: 1px;\n        left: 1px;\n        width: calc(var(--uui-toggle-size) - 2px);\n        height: calc(var(--uui-toggle-size) - 2px);\n        border-radius: 100px;\n        background-color: var(--uui-color-selected-contrast);\n        border: 1px solid var(--uui-color-border-standalone);\n        box-sizing: border-box;\n        transition:\n          width 120ms ease,\n          left 120ms ease,\n          transform 120ms ease,\n          background-color 120ms;\n      }\n\n      input:checked ~ #toggle::after {\n        left: calc(100% - 2px);\n        transform: translateX(-100%);\n      }\n\n      input:focus-visible ~ #toggle {\n        outline: 2px solid var(--uui-color-focus);\n      }\n\n      :host(:not([disabled], [readonly])) label:active #toggle::after {\n        /** Stretch when mouse down */\n        width: calc(1.06 * var(--uui-toggle-size));\n      }\n\n      :host([disabled]) #toggle {\n        background-color: var(--uui-color-disabled-standalone);\n      }\n      :host([disabled]) input:checked ~ #toggle {\n        background-color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) #toggle::after {\n        background-color: var(--uui-color-disabled);\n      }\n      :host([disabled]) #toggle #icon-unchecked {\n        color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) label:active #toggle {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n      :host([disabled]) input:checked #toggle #icon-checked {\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host(:not([pristine]):invalid) #toggle,\n      :host(:not([pristine]):invalid) label:hover #toggle,\n      /* polyfill support */\n      :host(:not([pristine])[internals-invalid]) #toggle,\n      :host(:not([pristine])[internals-invalid]) label:hover #toggle {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBO,MAAM,oBAAN,MAAM,0BAAyB,uBAAuB;AAAA,EAO3D,cAAc;AACZ,UAAM,QAAQ;AAAA,EAChB;AAAA,EAEA,iBAAiB;AACf,WAAO;AAAA;AAAA,iCAEsB,SAAS;AAAA,mCACP,UAAU;AAAA;AAAA;AAAA,EAG3C;AAkKF;AA/KE,kBAAgB,iBAAiB;AAejC,kBAAyB,SAAS;AAAA,EAChC,GAAG,uBAAuB;AAAA,EAC1B;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBA8IiB,gCAAgC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AArK9C,IAAM,mBAAN;"}
+{"version":3,"file":"toggle.element.js","names":[],"sources":["../../../src/components/toggle/toggle.element.ts"],"sourcesContent":["import {\n  UUIHorizontalShakeAnimationValue,\n  UUIHorizontalShakeKeyframes,\n} from '../../internal/animations/index.js';\nimport { UUIBooleanInputElement } from '../boolean-input/boolean-input.js';\nimport {\n  iconCheck,\n  iconRemove,\n} from '../icon-registry-essential/svgs/index.js';\nimport { css, html } from 'lit';\n\n/**\n *  Umbraco Toggle-switch, toggles between off/on. Technically a checkbox.\n *  @element uui-toggle\n *  @fires UUIBooleanInputEvent#change- fires when the element is begin checked by a user action\n *  @cssprop --uui-toggle-size - Define the toggle size.\n *  @cssprop --uui-toggle-switch-width - Define the slider width.\n *  @cssprop --uui-toggle-background-color - Set the toggle background color\n *  @cssprop --uui-toggle-border-color - Set the toggle border color\n *  @cssprop --uui-toggle-border-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-background-color-hover - Set the toggle background color when hovered\n *  @cssprop --uui-toggle-border-color-focus - Set the toggle background color when focused\n *  @cssprop --uui-toggle-background-color-focus - Set the toggle background color when focused\n *  @extends UUIBooleanInputElement\n */\nexport class UUIToggleElement extends UUIBooleanInputElement {\n  /**\n   * This is a static class field indicating that the element is can be used inside a native form and participate in its events. It may require a polyfill, check support here https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals.  Read more about form controls here https://web.dev/more-capable-form-controls/\n   * @type {boolean}\n   */\n  static readonly formAssociated = true;\n\n  constructor() {\n    super('switch');\n  }\n\n  renderCheckbox() {\n    return html`\n      <div id=\"toggle\">\n        <div id=\"icon-checked\">${iconCheck}</div>\n        <div id=\"icon-unchecked\">${iconRemove}</div>\n      </div>\n    `;\n  }\n\n  static override readonly styles = [\n    ...UUIBooleanInputElement.styles,\n    UUIHorizontalShakeKeyframes,\n    css`\n      :host {\n        --uui-toggle-size: 18px;\n        --uui-toggle-switch-width: calc(2 * var(--uui-toggle-size));\n      }\n\n      #toggle {\n        position: relative;\n        grid-area: 'input';\n        display: flex;\n        align-items: center;\n\n        flex-shrink: 0;\n\n        width: var(--uui-toggle-switch-width);\n        height: var(--uui-toggle-size);\n        border-radius: 100px;\n\n        background-color: var(\n          --uui-toggle-background-color,\n          var(--uui-color-divider-standalone)\n        );\n        border: 1px solid\n          var(--uui-toggle-border-color, var(--uui-color-border-standalone));\n        font-size: calc(var(--uui-toggle-size) * 0.6);\n\n        transition:\n          background-color 60ms,\n          border-color 60ms;\n      }\n\n      label:hover input:not([disabled]) ~ #toggle {\n        border-color: var(\n          --uui-toggle-border-color-hover,\n          var(--uui-color-border-emphasis)\n        );\n        background-color: var(\n          --uui-toggle-background-color-hover,\n          var(--uui-color-divider)\n        );\n      }\n\n      label:focus #toggle {\n        border-color: var(\n          --uui-toggle-border-color-focus,\n          var(--uui-color-focus)\n        );\n        background-color: var(\n          --uui-toggle-background-color-focus,\n          var(--uui-color-surface-emphasis)\n        );\n      }\n\n      input:checked ~ #toggle {\n        background-color: var(--uui-color-selected);\n      }\n      input:checked ~ #toggle::after {\n        border-color: var(--uui-color-selected-standalone);\n      }\n\n      label:hover input:checked:not([disabled]) ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      label:focus input:checked ~ #toggle {\n        background-color: var(--uui-color-selected-emphasis);\n      }\n\n      #icon-checked,\n      #icon-unchecked {\n        position: absolute;\n        vertical-align: middle;\n        width: 1em;\n        height: 1em;\n        line-height: 0;\n        transition: color 120ms;\n        svg {\n          stroke-width: 2.5;\n        }\n      }\n\n      #icon-checked {\n        margin-left: -0.45em;\n        left: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      #icon-unchecked {\n        margin-right: -0.5em;\n        right: calc((var(--uui-toggle-size) + 1px) * 0.5);\n        color: var(--uui-color-interactive);\n      }\n\n      input:checked ~ #toggle #icon-checked {\n        color: var(--uui-color-selected-contrast);\n      }\n\n      #toggle::after {\n        content: '';\n        position: absolute;\n        top: 1px;\n        left: 1px;\n        width: calc(var(--uui-toggle-size) - 2px);\n        height: calc(var(--uui-toggle-size) - 2px);\n        border-radius: 100px;\n        background-color: var(--uui-color-selected-contrast);\n        border: 1px solid var(--uui-color-border-standalone);\n        box-sizing: border-box;\n        transition:\n          width 120ms ease,\n          left 120ms ease,\n          transform 120ms ease,\n          background-color 120ms;\n      }\n\n      input:checked ~ #toggle::after {\n        left: calc(100% - 2px);\n        transform: translateX(-100%);\n      }\n\n      input:focus-visible ~ #toggle {\n        outline: calc(2px * var(--uui-show-focus-outline, 1)) solid\n          var(--uui-color-focus);\n      }\n\n      :host(:not([disabled], [readonly])) label:active #toggle::after {\n        /** Stretch when mouse down */\n        width: calc(1.06 * var(--uui-toggle-size));\n      }\n\n      :host([disabled]) #toggle {\n        background-color: var(--uui-color-disabled-standalone);\n      }\n      :host([disabled]) input:checked ~ #toggle {\n        background-color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) #toggle::after {\n        background-color: var(--uui-color-disabled);\n      }\n      :host([disabled]) #toggle #icon-unchecked {\n        color: var(--uui-color-disabled-contrast);\n      }\n      :host([disabled]) label:active #toggle {\n        animation: ${UUIHorizontalShakeAnimationValue};\n      }\n      :host([disabled]) input:checked #toggle #icon-checked {\n        color: var(--uui-color-disabled-contrast);\n      }\n\n      :host(:not([pristine]):invalid) #toggle,\n      :host(:not([pristine]):invalid) label:hover #toggle,\n      /* polyfill support */\n      :host(:not([pristine])[internals-invalid]) #toggle,\n      :host(:not([pristine])[internals-invalid]) label:hover #toggle {\n        border: 1px solid var(--uui-color-invalid-standalone);\n      }\n    `,\n  ];\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAyBA,IAAa,mBAAb,cAAsC,uBAAuB;;wBAK1B;;CAEjC,cAAc;EACZ,MAAM,QAAQ;CAChB;CAEA,iBAAiB;EACf,OAAO,IAAI;;iCAEkB,UAAU;mCACR,WAAW;;;CAG5C;;gBAEkC;GAChC,GAAG,uBAAuB;GAC1B;GACA,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBA+Ic,iCAAiC;;;;;;;;;;;;;;EAcpD;;AACF"}