@schukai/monster 3.93.0 → 3.94.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.94.1] - 2024-12-22
+
+### Bug Fixes
+
+- **log:** optimize layout [#270](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/270)
+
+
+
+## [3.94.0] - 2024-12-22
+
+### Add Features
+
+- **log:** auto update timestamp [#270](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/270)
+
+
+
 ## [3.93.0] - 2024-12-22
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.93.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.94.1"}

package/source/components/state/log.mjs

@@ -12,19 +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 {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";
 
-export { Log };
+export {Log};
 
 /**
  * @private
@@ -45,133 +46,148 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
  *
  * @example /examples/components/state/log-simple
  *
+ * @issue https://localhost.alvine.dev:8444/development/issues/closed/270.html
+ *
  * @since 3.74.0
  * @copyright schukai GmbH
  * @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
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			labels: {
-				nothingToReport: "There is nothing to report yet.",
-			},
-
-			entries: [],
-		});
-	}
-
-	/**
-	 * @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].innerHTML = "";
-		this[emptyStateElementSymbol].style.display = "block";
-		return this;
-	}
-
-	/**
-	 * Add an entry to the log
-	 * @param {Entry} entry
-	 * @return {Log}
-	 */
-	addEntry(entry) {
-		validateInstance(entry, Entry);
-
-		const entries = this.getOption("entries");
-		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 {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.",
+            },
+
+            classes: {
+                direction: "vertical",
+            },
+
+            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].innerHTML = "";
+        this[emptyStateElementSymbol].style.display = "block";
+        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");
+        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];
+    }
 }
 
 /**
@@ -180,37 +196,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";
-		}
-	});
-
-	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;
 }
 
 /**
@@ -218,41 +241,43 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `<template id="entry">
-    <li data-monster-role="entry">
+    // language=HTML
+    return `
+        <template id="entry">
+            <li data-monster-role="entry">
         <span data-monster-replace="path:entry.user"
               data-monster-attributes="class path:entry.user | ?:user:hidden"></span>
-        <span data-monster-replace="path:entry.title"
-              data-monster-attributes="class path:entry.title | ?:title:hidden"></span>
-        <span data-monster-replace="path:entry.message"
-              data-monster-attributes="class path:entry.message | ?:message:hidden"></span>
-        <span data-monster-replace="path:entry.date | time-ago" data-monster-attributes="title path:entry.date | datetime"></span>
-        
-    </li>
-</template>
-
-<div part="control" data-monster-role="control">
-    <div data-monster-role="empty-state" data-monster-attributes="class path:entries | has-entries | ?:hidden:">
-        <monster-state>
-            <div part="visual">
-                <svg width="4rem" height="4rem" viewBox="0 -12 512.00032 512"
-                     xmlns="http://www.w3.org/2000/svg">
-                    <path d="m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0"/>
-                    <path d="m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0"/>
-                    <path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0"/>
-                </svg>
+                <span data-monster-replace="path:entry.title"
+                      data-monster-attributes="class path:entry.title | ?:title:hidden"></span>
+                <span data-monster-replace="path:entry.message"
+                      data-monster-attributes="class path:entry.message | ?:message:hidden"></span>
+                <span data-monster-replace="path:entry.date | time-ago"
+                      data-monster-attributes="title path:entry.date | datetime"></span>
+
+            </li>
+        </template>
+
+        <div part="control" data-monster-role="control">
+            <div data-monster-role="empty-state" data-monster-attributes="class path:entries | has-entries | ?:hidden:">
+                <monster-state>
+                    <div part="visual">
+                        <svg width="4rem" height="4rem" viewBox="0 -12 512.00032 512"
+                             xmlns="http://www.w3.org/2000/svg">
+                            <path d="m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0"/>
+                            <path d="m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0"/>
+                            <path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0"/>
+                        </svg>
+                    </div>
+                    <div part="content" data-monster-replace="path:labels.nothingToReport">
+                        There is nothing to report yet.
+                    </div>
+                </monster-state>
             </div>
-            <div part="content" data-monster-replace="path:labels.nothingToReport">
-                There is nothing to report yet.
+            <div data-monster-role="entries">
+                <ul data-monster-insert="entry path:entries">
+                </ul>
             </div>
-        </monster-state>
-    </div>
-    <div data-monster-role="entries">
-        <ul data-monster-insert="entry path:entries">
-        </ul>
-    </div>
-</div>
+        </div>
     `;
 }
 

package/source/components/state/style/log.pcss

@@ -8,55 +8,73 @@
 @import "../../style/mixin/hover.pcss";
 
 [data-monster-role=entries] {
-
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    position: relative;
 
     & ul {
         list-style-type: none;
         margin: 0;
-        padding: 0 0 0 1.8rem;
-        position: relative;
-        top: 0
+        padding: 0 0 0 1.8rem; /* Abstand links behalten */
+        width: 100%; /* Flex-Container-Anpassung */
     }
 
     & ul:before {
         content: "";
         display: block;
-        width: 0;
+        width: 2px;
         height: 100%;
-        border: 1px dashed var(--monster-color-primary-2);
+
+        border-left-color: var(--monster-bg-color-primary-3);
+        border-left-style: dotted;
+        border-left-width: 1px;
         position: absolute;
-        top: 0;
         left: 1rem;
-    }
-
-    .title {
-        font-weight: bold;
+        bottom: 0;
+        top: 0;
     }
 
     & ul li {
         margin: 0;
-        position: relative;
-        padding: 0.1rem 0.3rem;
+        padding: 0.35rem 0.3rem;
         color: var(--monster-color-primary-1);
         background-color: var(--monster-bg-color-primary-1);
-        border-radius: 5px;
-    }
+
+        position: relative;
 
 
+        & .message {
+
+        }
+
+        & .title {
+            font-stretch: expanded;
+            font-weight: bolder;
+        }
+
+        & .title:before {
+            content: "—";
+            font-weight: normal;
+            margin-right: 0.3rem;
+        }
+
+    }
+
     & ul li:before {
         content: "";
-        display: block;
-        width: 5px;
-        height: 5px;
+        width: 6px;
+        height: 6px;
+        box-sizing: border-box;
         border-radius: 50%;
         background: var(--monster-bg-color-primary-3);
         border: 1px solid var(--monster-color-primary-2);
         position: absolute;
-        left: -0.9rem;
-        top: 0.6rem;
+        left: calc(-1rem + (5px / 4));
+        top: 0.85rem;
     }
-
-
-
-
-}
+}

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

@@ -24,7 +24,7 @@ const LogStyleSheet = new CSSStyleSheet();
 try {
   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] ul{list-style-type:none;margin:0;padding:0 0 0 1.8rem;position:relative;top:0}[data-monster-role=entries] ul:before{border:1px dashed var(--monster-color-primary-2);content:\"\";display:block;height:100%;left:1rem;position:absolute;top:0;width:0}[data-monster-role=entries] .title{font-weight:700}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-1);border-radius:5px;color:var(--monster-color-primary-1);margin:0;padding:.1rem .3rem;position:relative}[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%;content:\"\";display:block;height:5px;left:-.9rem;position:absolute;top:.6rem;width:5px} 
+[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);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/source/types/validate.mjs

@@ -185,6 +185,7 @@ function validateObject(value) {
  * ```
  *
  * @param {*} value
+ * @param {object} instance
  * @return {*}
  * @license AGPLv3
  * @since 1.5.0