@schukai/monster 3.95.2 → 3.96.1

package/source/components/layout/width-toggle.mjs

@@ -59,7 +59,7 @@ const MODE_WIDE = "wide";
  *
  * @fragments /fragments/components/layout/width-toggle/
  *
- * @example /examples/components/layout/width-toggle-simple
+ * @example /examples/components/layout/width-toggle-simple Toggle Width
  *
  * @since 3.57.0
  * @copyright schukai GmbH

package/source/components/navigation/table-of-content.mjs

@@ -73,7 +73,7 @@ const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler");
  *
  * @fragments /fragments/components/form/table-of-content
  *
- * @example /examples/components/form/table-of-content-simple
+ * @example /examples/components/form/table-of-content-simple Table of content
  *
  * @since 3.65.0
  * @copyright schukai GmbH

package/source/components/notify/message.mjs

@@ -70,7 +70,7 @@ const removeEventHandlerSymbol = Symbol("removeEventHandler");
  *
  * @fragments /fragments/components/notify/message
  *
- * @example /examples/components/notify/message-simple
+ * @example /examples/components/notify/message-simple Message
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
  *
@@ -108,21 +108,17 @@ class Message extends CustomElement {
 	 * @property {string} content The content of the message
 	 */
 	get defaults() {
-		return Object.assign(
-			{},
-			super.defaults,
-			{
-				timeout: 6000,
-				features: {
-					close: true,
-					disappear: true,
-				},
-				content: "<slot></slot>",
-				templates: {
-					main: getTemplate(),
-				},
+		return Object.assign({}, super.defaults, {
+			timeout: 6000,
+			features: {
+				close: true,
+				disappear: true,
 			},
-		);
+			content: "<slot></slot>",
+			templates: {
+				main: getTemplate(),
+			},
+		});
 	}
 
 	/**

package/source/components/notify/notify.mjs

@@ -49,8 +49,8 @@ const queueSymbol = Symbol("queue");
  *
  * @fragments /fragments/components/notify/notify
  *
- * @example /examples/components/notify/notify-simple
- * @example /examples/components/notify/notify-inline
+ * @example /examples/components/notify/notify-simple Notify
+ * @example /examples/components/notify/notify-inline Inline Notify
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
  *
@@ -73,20 +73,16 @@ class Notify extends CustomElement {
 	 * @property {string} classes.control The control class of the notify element.
 	 */
 	get defaults() {
-		return Object.assign(
-			{},
-			super.defaults,
-			{
-				orientation: "left top",
-				templates: {
-					main: getTemplate(),
-				},
-				classes: {
-					container: "",
-					control: "center"
-				}
+		return Object.assign({}, super.defaults, {
+			orientation: "left top",
+			templates: {
+				main: getTemplate(),
 			},
-		);
+			classes: {
+				container: "",
+				control: "center",
+			},
+		});
 	}
 
 	/**

package/source/components/notify/stylesheet/notify.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {NotifyStyleSheet}
+export { NotifyStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {NotifyStyleSheet}
 const NotifyStyleSheet = new CSSStyleSheet();
 
 try {
-  NotifyStyleSheet.insertRule(`
+	NotifyStyleSheet.insertRule(
+		`
 @layer notify { 
 .block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=control]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;margin:0;max-height:100vH;pointer-events:none;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:25rem;z-index:var(--monster-z-index-modal-overlay)}div[data-monster-role=control]:not(.inline){position:absolute}div[data-monster-role=control].inline{--monster-message-border-shadow:none}[data-monster-role=control][data-monster-orientation*=left]{left:0;right:auto}[data-monster-role=control][data-monster-orientation*=right]{left:auto;right:0}[data-monster-role=control][data-monster-orientation*=center]{left:50%;transform:translate(-50%)}[data-monster-role=control][data-monster-orientation*=bottom]{align-items:flex-end;bottom:0}[data-monster-role=control][data-monster-orientation*=top]{align-items:flex-start;top:0}[data-monster-role=container]{width:100%}[data-monster-role=message]{background-clip:padding-box;background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-message-border-color,rgba(0,0,0,.1));border-radius:var(--monster-message-border-radius,.25rem);border-style:var(--monster-message-border-style,solid);border-width:var(--monster-message-border-width,1px);box-shadow:var(--monster-message-border-shadow,0 .5rem 1rem rgba(0,0,0,.15));color:var(--monster-color-primary-1);display:flex;font-size:.875rem;margin:var(--monster-message-margin-top,15px) var(--monster-message-margin-right,5px) var(--monster-message-margin-bottom,0) var(--monster-message-margin-left,0);max-height:200px;max-width:100%;overflow:hidden;padding:var(--monster-message-padding-top,5px) var(--monster-message-padding-right,5px) var(--monster-message-padding-bottom,5px) var(--monster-message-padding-left,5px);pointer-events:auto;position:relative;text-overflow:ellipsis;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:100%}[data-monster-role=message]:first-child{margin-top:0}[data-monster-role=message].fadeout{border:0;margin-bottom:0;margin-top:0;max-height:0;padding-bottom:0;padding-top:0;transition:all .2s cubic-bezier(1,-.04,0,1.03)} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

package/source/components/state/log.mjs

@@ -12,20 +12,20 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol} from "../../constants.mjs";
+import { instanceSymbol } from "../../constants.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    getSlottedElements,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {LogStyleSheet} from "./stylesheet/log.mjs";
-import {Entry} from "./log/entry.mjs";
-import {validateInstance, validateString} from "../../types/validate.mjs";
+import { LogStyleSheet } from "./stylesheet/log.mjs";
+import { Entry } from "./log/entry.mjs";
+import { validateInstance, validateString } from "../../types/validate.mjs";
 import "./state.mjs";
-import {getWindow} from "../../dom/util.mjs";
+import { getWindow } from "../../dom/util.mjs";
 
-export {Log};
+export { Log };
 
 /**
  * @private
@@ -44,7 +44,7 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
  *
  * @fragments /fragments/components/state/log
  *
- * @example /examples/components/state/log-simple
+ * @example /examples/components/state/log-simple Log
  *
  * @issue https://localhost.alvine.dev:8444/development/issues/closed/270.html
  *
@@ -53,146 +53,146 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
  * @summary The log entry is a single entry in the log.
  **/
 class Log extends CustomElement {
-    /**
-     * @return {void}
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-    }
-
-    /**
-     * This method is called by the `instanceof` operator.
-     * @return {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/state/log@@instance");
-    }
-
-    /**
-     * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-     *
-     * The individual configuration values can be found in the table.
-     *
-     * @property {Object} templates Template definitions
-     * @property {string} templates.main Main template
-     * @property {Object} labels Labels
-     * @property {string} labels.nothingToReport Label for empty state
-     * @property {Object} classes Classes
-     * @property {string} classes.direction Direction of the log: ascending or descending
-     * @property {number} updateFrequency Update frequency in milliseconds for the timestamp
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-
-            labels: {
-                nothingToReport: "There is nothing to report yet.",
-            },
-
-            features: {
-                direction: "ascending",
-            },
-
-            updateFrequency: 10000,
-
-            entries: [],
-
-            timestamp: 0,
-        });
-    }
-
-    /**
-     * @return {void}
-     */
-    connectedCallback() {
-        super.connectedCallback();
-
-        const slottedElements = getSlottedElements.call(this);
-        if (slottedElements.size > 0) {
-            this[emptyStateElementSymbol].style.display = "none";
-        }
-    }
-
-    /**
-     * Clear the log
-     *
-     * @return {Log}
-     */
-    clear() {
-        this[logElementSymbol].setOption("entries", []);
-        return this;
-    }
-
-    /**
-     * Add an entry to the log
-     * @param {Entry} entry
-     * @return {Log}
-     */
-    addEntry(entry) {
-        validateInstance(entry, Entry);
-
-        if (entry.date === undefined || entry.date === null) {
-            entry.date = new Date();
-        }
-
-        const entries = this.getOption("entries");
-        if (this.getOption("features.direction") === "ascending") {
-            entries.unshift(entry);
-        } else {
-            entries.push(entry);
-        }
-
-        /** this field is not used, but triggers a change event */
-        this.setOption("length", entries.length - 1);
-
-        return this;
-    }
-
-    /**
-     * Add a log message
-     *
-     * @param {string} message
-     * @param {Date} date
-     * @return {Log}
-     * @throws {TypeError} message is not a string
-     */
-    addMessage(message, date) {
-        if (!date) {
-            date = new Date();
-        }
-
-        validateString(message);
-
-        this.addEntry(
-            new Entry({
-                message: message,
-                date: date,
-            }),
-        );
-
-        return this;
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-log";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [LogStyleSheet];
-    }
+	/**
+	 * @return {void}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/state/log@@instance");
+	}
+
+	/**
+	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} labels Labels
+	 * @property {string} labels.nothingToReport Label for empty state
+	 * @property {Object} classes Classes
+	 * @property {string} classes.direction Direction of the log: ascending or descending
+	 * @property {number} updateFrequency Update frequency in milliseconds for the timestamp
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			labels: {
+				nothingToReport: "There is nothing to report yet.",
+			},
+
+			features: {
+				direction: "ascending",
+			},
+
+			updateFrequency: 10000,
+
+			entries: [],
+
+			timestamp: 0,
+		});
+	}
+
+	/**
+	 * @return {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+
+		const slottedElements = getSlottedElements.call(this);
+		if (slottedElements.size > 0) {
+			this[emptyStateElementSymbol].style.display = "none";
+		}
+	}
+
+	/**
+	 * Clear the log
+	 *
+	 * @return {Log}
+	 */
+	clear() {
+		this[logElementSymbol].setOption("entries", []);
+		return this;
+	}
+
+	/**
+	 * Add an entry to the log
+	 * @param {Entry} entry
+	 * @return {Log}
+	 */
+	addEntry(entry) {
+		validateInstance(entry, Entry);
+
+		if (entry.date === undefined || entry.date === null) {
+			entry.date = new Date();
+		}
+
+		const entries = this.getOption("entries");
+		if (this.getOption("features.direction") === "ascending") {
+			entries.unshift(entry);
+		} else {
+			entries.push(entry);
+		}
+
+		/** this field is not used, but triggers a change event */
+		this.setOption("length", entries.length - 1);
+
+		return this;
+	}
+
+	/**
+	 * Add a log message
+	 *
+	 * @param {string} message
+	 * @param {Date} date
+	 * @return {Log}
+	 * @throws {TypeError} message is not a string
+	 */
+	addMessage(message, date) {
+		if (!date) {
+			date = new Date();
+		}
+
+		validateString(message);
+
+		this.addEntry(
+			new Entry({
+				message: message,
+				date: date,
+			}),
+		);
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-log";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [LogStyleSheet];
+	}
 }
 
 /**
@@ -201,44 +201,44 @@ class Log extends CustomElement {
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    this[logElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=control]",
-    );
-    this[emptyStateElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=empty-state]",
-    );
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[logElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+	this[emptyStateElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=empty-state]",
+	);
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    this.shadowRoot.addEventListener("slotchange", (event) => {
-        const slottedElements = getSlottedElements.call(this);
-
-        if (slottedElements.size > 0) {
-            this[emptyStateElementSymbol].style.display = "none";
-        } else {
-            this[emptyStateElementSymbol].style.display = "block";
-        }
-    });
-
-    setInterval(() => {
-        getWindow().requestAnimationFrame(() => {
-            const timestamp = (new Date()).toTimeString();
-            this.setOption("timestamp", timestamp);
-        });
-    }, this.getOption("updateFrequency"));
-
-    return this;
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this.shadowRoot.addEventListener("slotchange", (event) => {
+		const slottedElements = getSlottedElements.call(this);
+
+		if (slottedElements.size > 0) {
+			this[emptyStateElementSymbol].style.display = "none";
+		} else {
+			this[emptyStateElementSymbol].style.display = "block";
+		}
+	});
+
+	setInterval(() => {
+		getWindow().requestAnimationFrame(() => {
+			const timestamp = new Date().toTimeString();
+			this.setOption("timestamp", timestamp);
+		});
+	}, this.getOption("updateFrequency"));
+
+	return this;
 }
 
 /**
@@ -246,8 +246,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <template id="entry">
             <li data-monster-role="entry">
         <span data-monster-replace="path:entry.user"

package/source/components/state/state.mjs

@@ -27,7 +27,7 @@ export { State };
  *
  * @fragments /fragments/components/state/state
  *
- * @example /examples/components/state/state-simple
+ * @example /examples/components/state/state-simple State
  *
  * @since 1.5.0
  * @copyright schukai GmbH

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

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {LogStyleSheet}
+export { LogStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {LogStyleSheet}
 const LogStyleSheet = new CSSStyleSheet();
 
 try {
-  LogStyleSheet.insertRule(`
+	LogStyleSheet.insertRule(
+		`
 @layer log { 
 [data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=entries]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;position:relative}[data-monster-role=entries] ul{list-style-type:none;margin:0;padding:0 0 0 1.8rem;width:100%}[data-monster-role=entries] ul:before{border-left:1px dotted var(--monster-bg-color-primary-3);bottom:0;content:\"\";display:block;height:100%;left:1rem;position:absolute;top:0;width:2px}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);margin:0;padding:.35rem .3rem;position:relative}:is([data-monster-role=entries] ul li) .title{font-stretch:expanded;font-weight:bolder}:is([data-monster-role=entries] ul li) .title:before{content:\"—\";font-weight:400;margin-right:.3rem}[data-monster-role=entries] ul li:before{background:var(--monster-bg-color-primary-3);border:1px solid var(--monster-color-primary-2);border-radius:50%;box-sizing:border-box;content:\"\";height:6px;left:calc(-1rem + 1.25px);position:absolute;top:.85rem;width:6px} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

package/source/components/style/theme.css

@@ -36,7 +36,7 @@
 	color: var(--monster-color-selection-1);
 }
 .monster-border-color-1 {
-	border-color: var(--monster-color-border-1);
+	border-color: var(--monster-color-primary-4);
 }
 .monster-color-neutral-1 {
 	color: var(--monster-color-primary-1);
@@ -119,7 +119,7 @@
 	color: var(--monster-color-selection-2);
 }
 .monster-border-color-2 {
-	border-color: var(--monster-color-border-2);
+	border-color: var(--monster-color-primary-3);
 }
 .monster-color-neutral-2 {
 	color: var(--monster-color-primary-2);
@@ -202,7 +202,7 @@
 	color: var(--monster-color-selection-3);
 }
 .monster-border-color-3 {
-	border-color: var(--monster-color-border-3);
+	border-color: var(--monster-color-primary-2);
 }
 .monster-color-neutral-3 {
 	color: var(--monster-color-primary-3);
@@ -285,7 +285,7 @@
 	color: var(--monster-color-selection-4);
 }
 .monster-border-color-4 {
-	border-color: var(--monster-color-border-4);
+	border-color: var(--monster-color-primary-1);
 }
 .monster-color-neutral-4 {
 	color: var(--monster-color-primary-4);

package/source/data/datasource/server/restapi.mjs

@@ -18,7 +18,7 @@ import { diff } from "../../diff.mjs";
 import { Server } from "../server.mjs";
 import { WriteError } from "./restapi/writeerror.mjs";
 import { DataFetchError } from "./restapi/data-fetch-error.mjs";
-import {clone} from "../../../util/clone.mjs";
+import { clone } from "../../../util/clone.mjs";
 
 export { RestAPI };
 
@@ -176,7 +176,7 @@ class RestAPI extends Server {
 	 * @return {RestAPI}
 	 */
 	getClone() {
-		const api =  new RestAPI();
+		const api = new RestAPI();
 
 		const read = clone(this[internalSymbol].getRealSubject()["options"].read);
 		const write = clone(this[internalSymbol].getRealSubject()["options"].write);
@@ -185,7 +185,6 @@ class RestAPI extends Server {
 		api.setOption("write", write);
 
 		return api;
-
 	}
 }