@schukai/monster 3.52.1 → 3.53.0

package/source/components/host/host.mjs

@@ -179,8 +179,7 @@ class Host extends CustomElement {
 	 * @private
 	 * @fires Monster.Components.Host.Host#monster-host-disconnected
 	 */
-	disconnectedCallback() {;
-
+	disconnectedCallback() {
 		super.disconnectedCallback();
 		document.documentElement.style.overflowY = "";
 
@@ -212,8 +211,7 @@ class Host extends CustomElement {
 	 *
 	 * @return {Monster.Components.Host.Host}
 	 */
-	[assembleMethodSymbol]() {;
-
+	[assembleMethodSymbol]() {
 		this[promisesSymbol] = [];
 		this[promisesSymbol].push(windowReady);
 
@@ -253,8 +251,7 @@ class Host extends CustomElement {
 	 *
 	 * @return {Promise}
 	 */
-	onReady() {;
-
+	onReady() {
 		if (isIterable(this[promisesSymbol]) === false) {
 			this[promisesSymbol] = [];
 		}
@@ -356,7 +353,7 @@ class Host extends CustomElement {
 	 *
 	 * @param {string|Message} message
 	 */
-	pushNotification(message) {;
+	pushNotification(message) {
 		if (this[notifyElementSymbol] instanceof HTMLElement === false) {
 			throw new Error("There is no notify element defined.");
 		}
@@ -371,8 +368,7 @@ class Host extends CustomElement {
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -384,8 +380,7 @@ function initControlReferences() {;
 	);
 }
 
-function initTranslations() {;
-
+function initTranslations() {
 	if (isIterable(this[promisesSymbol]) === false) {
 		this[promisesSymbol] = [];
 	}
@@ -396,7 +391,7 @@ function initTranslations() {;
 /**
  * @private
  */
-function initEventHandler() {;
+function initEventHandler() {
 	return this;
 }
 

package/source/components/host/overlay.mjs

@@ -200,7 +200,7 @@ class Overlay extends CustomElement {
 	 * @fires Monster.Components.Host.Overlay.event:monster-overlay-before-close
 	 * @fires Monster.Components.Host.Overlay.event:monster-overlay-closed
 	 */
-	open() {;
+	open() {
 		fireCustomEvent(this, "monster-overlay-before-open", {});
 
 		this[overlayElementSymbol].classList.remove("hide-empty");
@@ -218,7 +218,7 @@ class Overlay extends CustomElement {
 	/**
 	 * @returns {Monster.Components.Host.Overlay}
 	 */
-	close() {;
+	close() {
 		fireCustomEvent(this, "monster-overlay-before-close", {});
 		setTimeout(() => {
 			this[overlayElementSymbol].classList.remove("open");
@@ -250,8 +250,7 @@ class Overlay extends CustomElement {
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -268,8 +267,7 @@ function initControlReferences() {;
 /**
  * @private
  */
-function initEventHandler() {;
-
+function initEventHandler() {
 	/**
 	 * @param {Event} event
 	 */

package/source/components/host/viewer.mjs

@@ -279,8 +279,7 @@ function blobToText(blob) {
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -291,7 +290,7 @@ function initControlReferences() {;
 /**
  * @private
  */
-function initEventHandler() {;
+function initEventHandler() {
 	return this;
 }
 

package/source/components/notify/message.mjs

@@ -145,7 +145,7 @@ class Message extends CustomElement {
 	 * @return {Monster.Components.Notify.Message}
 	 */
 	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();;
+		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
 		initEventhandler.call(this);
 		return this;
@@ -170,7 +170,7 @@ class Message extends CustomElement {
 	/**
 	 *
 	 */
-	[initMethodSymbol]() {;
+	[initMethodSymbol]() {
 		super[initMethodSymbol]();
 	}
 
@@ -178,7 +178,7 @@ class Message extends CustomElement {
 	 * @return {void}
 	 */
 	connectedCallback() {
-		super.connectedCallback();;
+		super.connectedCallback();
 
 		if (this.getOption("features.disappear") === true) {
 			startFadeout.call(this);
@@ -191,7 +191,7 @@ class Message extends CustomElement {
 	 */
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		stopFadeout.call(this);;
+		stopFadeout.call(this);
 
 		if (this.getOption("features.disappear") === true) {
 			this.removeEventListener(
@@ -209,7 +209,7 @@ class Message extends CustomElement {
 /**
  * @private
  */
-function startFadeout() {;
+function startFadeout() {
 	if (!this?.[timerSymbol]) {
 		this[timerSymbol] = setTimeout(() => {
 			removeSelf.call(this);
@@ -217,8 +217,7 @@ function startFadeout() {;
 	}
 }
 
-function removeSelf() {;
-
+function removeSelf() {
 	stopFadeout();
 	this.classList.add("fadeout");
 
@@ -230,7 +229,7 @@ function removeSelf() {;
 /**
  * @private
  */
-function stopFadeout() {;
+function stopFadeout() {
 	if (this?.[timerSymbol]) {
 		clearTimeout(this[timerSymbol]);
 		this[timerSymbol] = undefined;
@@ -243,7 +242,7 @@ function stopFadeout() {;
  * @private
  * @return {object}
  */
-function initOptionsFromArguments() {;
+function initOptionsFromArguments() {
 	const options = {};
 
 	const timeout = this.getAttribute(ATTRIBUTE_PREFIX + "timeout");
@@ -266,8 +265,7 @@ function initOptionsFromArguments() {;
  * @return {Message}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -283,8 +281,7 @@ function initControlReferences() {;
 /**
  * @private
  */
-function initEventhandler() {;
-
+function initEventhandler() {
 	/**
 	 * @param {Event} event
 	 */

package/source/components/notify/notify.mjs

@@ -123,7 +123,7 @@ class Notify extends CustomElement {
 	 * @return {Notify}
 	 */
 	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();;
+		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
 
 		if (this[containerElementSymbol]) {
@@ -156,8 +156,7 @@ class Notify extends CustomElement {
 	 * @param {Monster.Components.Notify.Massage|String} message
 	 * @return {Monster.Components.Notify.Notify}
 	 */
-	push(message) {;
-
+	push(message) {
 		let messageElement = message;
 		if (!(message instanceof Message)) {
 			const text = validateString(message);
@@ -193,7 +192,7 @@ class Notify extends CustomElement {
  * @private
  * @return {object}
  */
-function initOptionsFromArguments() {;
+function initOptionsFromArguments() {
 	const options = {};
 
 	return options;
@@ -204,8 +203,7 @@ function initOptionsFromArguments() {;
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}

package/source/components/state/log/entry.mjs

@@ -20,7 +20,7 @@ export { Entry };
  */
 class Entry extends Base {
 	constructor({ title, message, user, date } = {}) {
-		super();;
+		super();
 
 		/**
 		 * - attachInternalObserver

package/source/components/state/log.mjs

@@ -107,7 +107,7 @@ class Log extends CustomElement {
 		});
 	}
 
-	connectedCallback() {;
+	connectedCallback() {
 		super.connectedCallback();
 
 		const slottedElements = getSlottedElements.call(this);
@@ -121,15 +121,13 @@ class Log extends CustomElement {
 	 *
 	 * @return {Log}
 	 */
-	clear() {;
-
+	clear() {
 		this[logElementSymbol].innerHTML = "";
 		this[emptyStateElementSymbol].style.display = "block";
 		return this;
 	}
 
-	addEntry(entry) {;
-
+	addEntry(entry) {
 		validateInstance(entry, Entry);
 
 		const entries = this.getOption("entries");
@@ -147,8 +145,7 @@ class Log extends CustomElement {
 	 * @param {string} message
 	 * @return {Log}
 	 */
-	addMessage(message, date) {;
-
+	addMessage(message, date) {
 		if (!date) {
 			date = new Date();
 		}
@@ -184,8 +181,7 @@ class Log extends CustomElement {
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -201,8 +197,7 @@ function initControlReferences() {;
 /**
  * @private
  */
-function initEventHandler() {;
-
+function initEventHandler() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}

package/source/components/style/icons.pcss

@@ -0,0 +1,110 @@
+
+@import "mixin/icon.pcss";
+
+@mixin icon info {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-info-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
+}
+
+@mixin icon positiv {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
+}
+
+@mixin icon negativ {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+}
+
+@mixin icon warning {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
+}
+
+@mixin icon neutral {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
+}
+
+@mixin icon question {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-question-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/%3E%3C/svg%3E");
+}
+
+@mixin icon plus {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
+}
+
+@mixin icon dash {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
+}
+
+@mixin icon gear {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-gear' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z'/%3E%3C/svg%3E");
+}
+
+@mixin icon home {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-house' viewBox='0 0 16 16'%3E%3Cpath d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z'/%3E%3C/svg%3E");
+}
+
+@mixin icon counterclockwise {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-counterclockwise' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E");
+}
+
+@for $i from 2 to 3 {
+
+.monster-icon-success-$i:before {
+    background-color: var(--monster-color-success-$i);
+    color: var(--monster-bg-color-success-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-warning-$i:before {
+    background-color: var(--monster-color-warning-$i);
+    color: var(--monster-bg-color-warning-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-error-$i:before {
+    background-color: var(--monster-color-error-$i);
+    color: var(--monster-bg-color-error-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-error-$i:before, .monster-icon-warning-$i:before, .monster-icon-success-$i:before {
+    content: "";
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+
+}
+}
+
+@for $i from 1 to 4 by 3 {
+
+.monster-icon-success-$i:before {
+    background-color: var(--monster-bg-color-success-$i);
+    color: var(--monster-color-success-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-warning-$i:before {
+    background-color: var(--monster-bg-color-warning-$i);
+    color: var(--monster-color-warning-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-error-$i:before {
+    background-color: var(--monster-bg-color-error-$i);
+    color: var(--monster-color-error-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-error-$i:before, .monster-icon-warning-$i:before, .monster-icon-success-$i:before {
+    content: "";
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+
+}
+}

package/source/components/style/mixin/icon.pcss

@@ -0,0 +1,43 @@
+@define-mixin icon $name {
+
+    @for $i from 1 to 4 {
+
+        .monster-icon-primary-$(i)-$(name)::before {
+        background-color: var(--monster-color-primary-$i);
+        color: var(--monster-bg-color-primary-$i);
+    }
+
+    .monster-icon-secondary-$(i)-$(name)::before {
+    background-color: var(--monster-color-secondary-$i);
+    color: var(--monster-bg-color-secondary-$i);
+    }
+
+    .monster-icon-tertiary-$(i)-$(name)::before {
+    background-color: var(--monster-color-tertiary-$i);
+    color: var(--monster-bg-color-tertiary-$i);
+    }
+
+    .monster-icon-secondary-$(i)-$(name)::before {
+    background-color: var(--monster-color-secondary-$i);
+    color: var(--monster-bg-color-secondary-$i);
+    }
+
+
+    .monster-icon-primary-$(i)-$(name)::before,
+    .monster-icon-secondary-$(i)-$(name)::before,
+    .monster-icon-tertiary-$(i)-$(name)::before {
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    @mixin-content;
+    }
+
+
+
+
+    }
+}