@schukai/monster 4.37.2 → 4.38.0

package/source/components/layout/utils/attach-tabs-hash-sync.mjs

@@ -1,6 +1,6 @@
 import {
-  parseBracketedKeyValueHash,
-  createBracketedKeyValueHash,
+	parseBracketedKeyValueHash,
+	createBracketedKeyValueHash,
 } from "../../../text/bracketed-key-value-hash.mjs";
 
 /**
@@ -13,154 +13,160 @@ import {
  * @param {string} allTabsKey    - Key for all tab IDs (default: "all")
  */
 export function attachTabsHashSync(
-    tabsEl,
-    selector = "tabs",
-    activeKey = "active",
-    allTabsKey = "all",
+	tabsEl,
+	selector = "tabs",
+	activeKey = "active",
+	allTabsKey = "all",
 ) {
-  if (!(tabsEl instanceof HTMLElement)) {
-    throw new TypeError("Expected a monster-tabs HTMLElement");
-  }
-
-  let lastKnownActiveTabId = null;
-  let lastKnownAllTabIds = [];
-
-  /**
-   * Reads active and all tab IDs from the URL hash.
-   * @returns {{activeTabId: string|null, allTabIds: string[]}}
-   */
-  function getTabStateFromHash() {
-    const hashObj = parseBracketedKeyValueHash(location.hash);
-    const tabsData = hashObj?.[selector] ?? {};
-    const activeTabId = tabsData[activeKey] ?? null;
-    const allTabIdsString = tabsData[allTabsKey] ?? "";
-    const allTabIds = allTabIdsString
-        .split(",")
-        .filter((id) => id.trim() !== "");
-    return { activeTabId, allTabIds };
-  }
-
-  /**
-   * Synchronizes tab state from hash on page load and hash changes.
-   */
-  function syncFromHash() {
-    const { activeTabId, allTabIds } = getTabStateFromHash();
-
-    // Sync active tab
-    if (activeTabId && activeTabId !== lastKnownActiveTabId) {
-      tabsEl.activeTab(activeTabId);
-      lastKnownActiveTabId = activeTabId;
-    }
-
-    // Sync all tabs (add/remove tabs based on hash)
-    const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
-
-    // Add tabs that are in hash but not in DOM
-    for (const tabId of allTabIds) {
-      if (!currentTabs.includes(tabId)) {
-        // You'll need a way to get the label and content for new tabs
-        // This is a placeholder. You might fetch it or have a default.
-        // For existing tabs in the HTML, we're just ensuring they are present.
-        // For truly new tabs from the hash, you'd need their content/label.
-        // For this example, we'll assume the initial HTML already has all potential tabs,
-        // and we're just making sure they are displayed if their IDs are in the hash.
-        // If you truly want to create new tabs from scratch based on the hash,
-        // you'd need more information in the hash or a lookup mechanism.
-        console.warn(
-            `Tab with ID '${tabId}' found in hash but not in DOM. Add logic to create it if necessary.`,
-        );
-      }
-    }
-
-    // Remove tabs that are in DOM but not in hash
-    for (const tabId of currentTabs) {
-      if (!allTabIds.includes(tabId)) {
-        tabsEl.removeTab(tabId);
-      }
-    }
-
-    lastKnownAllTabIds = allTabIds;
-  }
-
-  window.addEventListener("hashchange", syncFromHash);
-  syncFromHash(); // initial load
-
-  /**
-   * Writes the current active tab and all tab IDs to the URL hash.
-   * @param {string|null} activeTabId - The ID of the currently active tab.
-   * @param {string[]} allTabIds - An array of all current tab IDs.
-   */
-  function writeHash(activeTabId, allTabIds) {
-    const hashObj = parseBracketedKeyValueHash(location.hash);
-    hashObj[selector] = { ...(hashObj[selector] ?? {}) };
-
-    if (activeTabId) {
-      hashObj[selector][activeKey] = activeTabId;
-    } else {
-      delete hashObj[selector][activeKey];
-    }
-
-    if (allTabIds.length > 0) {
-      hashObj[selector][allTabsKey] = allTabIds.join(",");
-    } else {
-      delete hashObj[selector][allTabsKey];
-    }
-
-    const newHash = createBracketedKeyValueHash(hashObj);
-    if (location.hash !== newHash) {
-      history.replaceState(null, "", newHash);
-    }
-    lastKnownActiveTabId = activeTabId;
-    lastKnownAllTabIds = allTabIds;
-  }
-
-  // Listen for tab changes (active tab)
-  tabsEl.addEventListener("monster-tab-changed", (e) => {
-    if (e.target !== tabsEl) return; // Ignore bubbled events
-    const newActiveTabId = e.detail?.reference;
-    const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
-    writeHash(newActiveTabId, currentTabs);
-  });
-
-  // Listen for tab additions
-  const observer = new MutationObserver((mutationsList) => {
-    let tabsChanged = false;
-    for (const mutation of mutationsList) {
-      if (
-          mutation.type === "childList" &&
-          (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)
-      ) {
-        // Filter for actual tab elements
-        const hasTabNodes = Array.from(mutation.addedNodes).some(
-            (node) => node.nodeType === 1 && node.hasAttribute("data-monster-button-label")
-        ) || Array.from(mutation.removedNodes).some(
-            (node) => node.nodeType === 1 && node.hasAttribute("data-monster-button-label")
-        );
-
-        if (hasTabNodes) {
-          tabsChanged = true;
-          break;
-        }
-      }
-    }
-    if (tabsChanged) {
-      const currentActiveTabId = tabsEl.getActiveTab();
-      const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
-      // Only update hash if the list of tabs has actually changed
-      if (
-          currentTabs.length !== lastKnownAllTabIds.length ||
-          !currentTabs.every((id) => lastKnownAllTabIds.includes(id))
-      ) {
-        writeHash(currentActiveTabId, currentTabs);
-      }
-    }
-  });
-
-  // Observe the tabsEl for direct child additions/removals
-  observer.observe(tabsEl, { childList: true });
-
-  // Initial write of all existing tabs to the hash
-  const initialActiveTab = tabsEl.getActiveTab();
-  const initialTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
-  writeHash(initialActiveTab, initialTabs);
-}
+	if (!(tabsEl instanceof HTMLElement)) {
+		throw new TypeError("Expected a monster-tabs HTMLElement");
+	}
+
+	let lastKnownActiveTabId = null;
+	let lastKnownAllTabIds = [];
+
+	/**
+	 * Reads active and all tab IDs from the URL hash.
+	 * @returns {{activeTabId: string|null, allTabIds: string[]}}
+	 */
+	function getTabStateFromHash() {
+		const hashObj = parseBracketedKeyValueHash(location.hash);
+		const tabsData = hashObj?.[selector] ?? {};
+		const activeTabId = tabsData[activeKey] ?? null;
+		const allTabIdsString = tabsData[allTabsKey] ?? "";
+		const allTabIds = allTabIdsString
+			.split(",")
+			.filter((id) => id.trim() !== "");
+		return { activeTabId, allTabIds };
+	}
+
+	/**
+	 * Synchronizes tab state from hash on page load and hash changes.
+	 */
+	function syncFromHash() {
+		const { activeTabId, allTabIds } = getTabStateFromHash();
+
+		// Sync active tab
+		if (activeTabId && activeTabId !== lastKnownActiveTabId) {
+			tabsEl.activeTab(activeTabId);
+			lastKnownActiveTabId = activeTabId;
+		}
+
+		// Sync all tabs (add/remove tabs based on hash)
+		const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+
+		// Add tabs that are in hash but not in DOM
+		for (const tabId of allTabIds) {
+			if (!currentTabs.includes(tabId)) {
+				// You'll need a way to get the label and content for new tabs
+				// This is a placeholder. You might fetch it or have a default.
+				// For existing tabs in the HTML, we're just ensuring they are present.
+				// For truly new tabs from the hash, you'd need their content/label.
+				// For this example, we'll assume the initial HTML already has all potential tabs,
+				// and we're just making sure they are displayed if their IDs are in the hash.
+				// If you truly want to create new tabs from scratch based on the hash,
+				// you'd need more information in the hash or a lookup mechanism.
+				console.warn(
+					`Tab with ID '${tabId}' found in hash but not in DOM. Add logic to create it if necessary.`,
+				);
+			}
+		}
+
+		// Remove tabs that are in DOM but not in hash
+		for (const tabId of currentTabs) {
+			if (!allTabIds.includes(tabId)) {
+				tabsEl.removeTab(tabId);
+			}
+		}
+
+		lastKnownAllTabIds = allTabIds;
+	}
+
+	window.addEventListener("hashchange", syncFromHash);
+	syncFromHash(); // initial load
+
+	/**
+	 * Writes the current active tab and all tab IDs to the URL hash.
+	 * @param {string|null} activeTabId - The ID of the currently active tab.
+	 * @param {string[]} allTabIds - An array of all current tab IDs.
+	 */
+	function writeHash(activeTabId, allTabIds) {
+		const hashObj = parseBracketedKeyValueHash(location.hash);
+		hashObj[selector] = { ...(hashObj[selector] ?? {}) };
+
+		if (activeTabId) {
+			hashObj[selector][activeKey] = activeTabId;
+		} else {
+			delete hashObj[selector][activeKey];
+		}
+
+		if (allTabIds.length > 0) {
+			hashObj[selector][allTabsKey] = allTabIds.join(",");
+		} else {
+			delete hashObj[selector][allTabsKey];
+		}
+
+		const newHash = createBracketedKeyValueHash(hashObj);
+		if (location.hash !== newHash) {
+			history.replaceState(null, "", newHash);
+		}
+		lastKnownActiveTabId = activeTabId;
+		lastKnownAllTabIds = allTabIds;
+	}
+
+	// Listen for tab changes (active tab)
+	tabsEl.addEventListener("monster-tab-changed", (e) => {
+		if (e.target !== tabsEl) return; // Ignore bubbled events
+		const newActiveTabId = e.detail?.reference;
+		const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+		writeHash(newActiveTabId, currentTabs);
+	});
+
+	// Listen for tab additions
+	const observer = new MutationObserver((mutationsList) => {
+		let tabsChanged = false;
+		for (const mutation of mutationsList) {
+			if (
+				mutation.type === "childList" &&
+				(mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0)
+			) {
+				// Filter for actual tab elements
+				const hasTabNodes =
+					Array.from(mutation.addedNodes).some(
+						(node) =>
+							node.nodeType === 1 &&
+							node.hasAttribute("data-monster-button-label"),
+					) ||
+					Array.from(mutation.removedNodes).some(
+						(node) =>
+							node.nodeType === 1 &&
+							node.hasAttribute("data-monster-button-label"),
+					);
+
+				if (hasTabNodes) {
+					tabsChanged = true;
+					break;
+				}
+			}
+		}
+		if (tabsChanged) {
+			const currentActiveTabId = tabsEl.getActiveTab();
+			const currentTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+			// Only update hash if the list of tabs has actually changed
+			if (
+				currentTabs.length !== lastKnownAllTabIds.length ||
+				!currentTabs.every((id) => lastKnownAllTabIds.includes(id))
+			) {
+				writeHash(currentActiveTabId, currentTabs);
+			}
+		}
+	});
+
+	// Observe the tabsEl for direct child additions/removals
+	observer.observe(tabsEl, { childList: true });
+
+	// Initial write of all existing tabs to the hash
+	const initialActiveTab = tabsEl.getActiveTab();
+	const initialTabs = tabsEl.getTabs().map((tab) => tab.getAttribute("id"));
+	writeHash(initialActiveTab, initialTabs);
+}

package/source/components/notify/stylesheet/message.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 {MessageStyleSheet}
+export { MessageStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {MessageStyleSheet}
 const MessageStyleSheet = new CSSStyleSheet();
 
 try {
-  MessageStyleSheet.insertRule(`
+	MessageStyleSheet.insertRule(
+		`
 @layer message { 
 :where(html){line-height:1.15;-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,pre,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%}body,html{min-height:calc(100vh - 40px)}body{box-sizing:border-box;margin:0;padding:0;word-break:break-word}body:focus-visible{outline:none}:focus-visible{outline:none}.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)}:after,:before,:root{--monster-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030;--monster-gradient-tangerine-1:#e5b875;--monster-gradient-tangerine-2:#d9a362;--monster-gradient-tangerine-3:#c08a4e;--monster-gradient-tangerine-4:#a7713b;--monster-gradient-tangerine-5:#8f5a28;--monster-gradient-tangerine-6:#360505;--monster-color-seashell-1:#f7f5ef;--monster-color-seashell-2:#e5e2d9;--monster-color-seashell-3:#cbc6b3;--monster-color-seashell-4:#a19d8a;--monster-color-seashell-5:#7a7566;--monster-color-seashell-6:#514d3f}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}[data-monster-role=control]{box-sizing:border-box;outline:none}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}[data-monster-role=message]{align-items:center;display:flex;flex-direction:row;position:relative;width:100%}[data-monster-role=control]{align-items:center;background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);display:flex;justify-content:space-between;padding:8px;width:100%}[data-monster-role=content]{flex-grow:2;@mixins paragraph}[data-monster-role=control] [data-monster-role=close]{cursor:pointer;height:16px;position:absolute;right:-10px;top:-5px;width:16px;z-index:var(--monster-z-index-modal-overlay)}[data-monster-role=control] [data-monster-role=close]:before{background-color:var(--monster-color-primary-1);content:\"\";display:block;height:100%;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6.669 4.795a31 31 0 0 0-1.418.428.24.24 0 0 0-.164.195c-.277 2.079.363 3.595 1.126 4.594a5.4 5.4 0 0 0 1.144 1.117c.173.122.326.21.446.266q.09.043.147.059l.05.013.05-.013q.057-.017.147-.059a3 3 0 0 0 .447-.266 5.4 5.4 0 0 0 1.143-1.117c.764-.998 1.404-2.515 1.127-4.594a.24.24 0 0 0-.164-.195c-.326-.106-.875-.28-1.419-.427-.555-.151-1.065-.263-1.331-.263-.265 0-.776.112-1.331.262zm-.133-.515C7.079 4.133 7.655 4 8 4s.922.133 1.464.28c.555.15 1.115.328 1.444.435a.77.77 0 0 1 .522.631c.298 2.239-.394 3.898-1.233 4.995a5.9 5.9 0 0 1-1.258 1.227 3.5 3.5 0 0 1-.524.312c-.14.066-.291.12-.415.12s-.274-.054-.414-.12a3.5 3.5 0 0 1-.525-.312 5.9 5.9 0 0 1-1.258-1.227c-.839-1.097-1.53-2.756-1.232-4.995a.77.77 0 0 1 .522-.631 32 32 0 0 1 1.443-.435'/%3E%3Cpath d='M7.5 9.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m.05-3.002a.453.453 0 1 1 .9 0L8.275 8.25a.277.277 0 0 1-.55 0z'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M6.669 4.795a31 31 0 0 0-1.418.428.24.24 0 0 0-.164.195c-.277 2.079.363 3.595 1.126 4.594a5.4 5.4 0 0 0 1.144 1.117c.173.122.326.21.446.266q.09.043.147.059l.05.013.05-.013q.057-.017.147-.059a3 3 0 0 0 .447-.266 5.4 5.4 0 0 0 1.143-1.117c.764-.998 1.404-2.515 1.127-4.594a.24.24 0 0 0-.164-.195c-.326-.106-.875-.28-1.419-.427-.555-.151-1.065-.263-1.331-.263-.265 0-.776.112-1.331.262zm-.133-.515C7.079 4.133 7.655 4 8 4s.922.133 1.464.28c.555.15 1.115.328 1.444.435a.77.77 0 0 1 .522.631c.298 2.239-.394 3.898-1.233 4.995a5.9 5.9 0 0 1-1.258 1.227 3.5 3.5 0 0 1-.524.312c-.14.066-.291.12-.415.12s-.274-.054-.414-.12a3.5 3.5 0 0 1-.525-.312 5.9 5.9 0 0 1-1.258-1.227c-.839-1.097-1.53-2.756-1.232-4.995a.77.77 0 0 1 .522-.631 32 32 0 0 1 1.443-.435'/%3E%3Cpath d='M7.5 9.5a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0m.05-3.002a.453.453 0 1 1 .9 0L8.275 8.25a.277.277 0 0 1-.55 0z'/%3E%3C/svg%3E\");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;width:100%} 
-}`, 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

@@ -125,7 +125,7 @@ class Log extends CustomElement {
 	 * @return {Log}
 	 */
 	clear() {
-		this[logElementSymbol].setOption("entries", []);
+		this.setOption("entries", []);
 		return this;
 	}
 

package/source/dom/customelement.mjs

@@ -1031,8 +1031,10 @@ function getOptionsFromScriptTag() {
  * @return {object}
  */
 function getOptionsFromAttributes() {
-
-	if(this.hasAttribute(ATTRIBUTE_DISABLED) && this.getAttribute(ATTRIBUTE_DISABLED) !== null) {
+	if (
+		this.hasAttribute(ATTRIBUTE_DISABLED) &&
+		this.getAttribute(ATTRIBUTE_DISABLED) !== null
+	) {
 		this.setOption(ATTRIBUTE_DISABLED, true);
 	} else {
 		this.setOption(ATTRIBUTE_DISABLED, undefined);

package/source/dom/error.mjs

@@ -25,11 +25,11 @@ export { resetErrorAttribute, addErrorAttribute, removeErrorAttribute };
  * @return {HTMLElement}
  */
 function resetErrorAttribute(element) {
-  validateInstance(element, HTMLElement);
-  if (element.hasAttribute(ATTRIBUTE_ERRORMESSAGE)) {
-    element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
-  }
-  return element;
+	validateInstance(element, HTMLElement);
+	if (element.hasAttribute(ATTRIBUTE_ERRORMESSAGE)) {
+		element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+	}
+	return element;
 }
 
 /**
@@ -43,45 +43,45 @@ function resetErrorAttribute(element) {
  * @return {HTMLElement}
  */
 function addErrorAttribute(element, message) {
-  validateInstance(element, HTMLElement);
+	validateInstance(element, HTMLElement);
 
-  if (message instanceof Error) {
-    message = message.message;
-  }
+	if (message instanceof Error) {
+		message = message.message;
+	}
 
-  if (typeof message !== "string") {
-    if (typeof message === "object" && message !== null) {
-      if (typeof message.toString === "function") {
-        message = message.toString();
-      } else {
-        message = JSON.stringify(message);
-      }
-    } else {
-      message = String(message);
-    }
-  }
+	if (typeof message !== "string") {
+		if (typeof message === "object" && message !== null) {
+			if (typeof message.toString === "function") {
+				message = message.toString();
+			} else {
+				message = JSON.stringify(message);
+			}
+		} else {
+			message = String(message);
+		}
+	}
 
-  validateString(message);
+	validateString(message);
 
-  if (!element.hasAttribute(ATTRIBUTE_ERRORMESSAGE)) {
-    element.setAttribute(ATTRIBUTE_ERRORMESSAGE, message);
-    return element;
-  }
+	if (!element.hasAttribute(ATTRIBUTE_ERRORMESSAGE)) {
+		element.setAttribute(ATTRIBUTE_ERRORMESSAGE, message);
+		return element;
+	}
 
-  const current = element.getAttribute(ATTRIBUTE_ERRORMESSAGE);
-  const list = current.split("::");
+	const current = element.getAttribute(ATTRIBUTE_ERRORMESSAGE);
+	const list = current.split("::");
 
-  for (let i = 0; i < list.length; i++) {
-    if (list[i] === message) {
-      return element;
-    }
-  }
+	for (let i = 0; i < list.length; i++) {
+		if (list[i] === message) {
+			return element;
+		}
+	}
 
-  list.push(message);
+	list.push(message);
 
-  element.setAttribute(ATTRIBUTE_ERRORMESSAGE, list.join("::"));
+	element.setAttribute(ATTRIBUTE_ERRORMESSAGE, list.join("::"));
 
-  return element;
+	return element;
 }
 
 /**
@@ -95,20 +95,20 @@ function addErrorAttribute(element, message) {
  * @return {HTMLElement}
  */
 function removeErrorAttribute(element, message) {
-  validateInstance(element, HTMLElement);
-  validateString(message);
+	validateInstance(element, HTMLElement);
+	validateString(message);
 
-  if (!element.hasAttribute(ATTRIBUTE_ERRORMESSAGE)) {
-    return element;
-  }
+	if (!element.hasAttribute(ATTRIBUTE_ERRORMESSAGE)) {
+		return element;
+	}
 
-  const current = element.getAttribute(ATTRIBUTE_ERRORMESSAGE);
-  const list = current.split("::");
-  const newList = list.filter(function (token) {
-    return token !== message;
-  });
+	const current = element.getAttribute(ATTRIBUTE_ERRORMESSAGE);
+	const list = current.split("::");
+	const newList = list.filter(function (token) {
+		return token !== message;
+	});
 
-  element.setAttribute(ATTRIBUTE_ERRORMESSAGE, newList.join("::"));
+	element.setAttribute(ATTRIBUTE_ERRORMESSAGE, newList.join("::"));
 
-  return element;
+	return element;
 }

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.37.1");
+	monsterVersion = new Version("4.37.2");
 
 	return monsterVersion;
 }

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.37.1")
+        monsterVersion = new Version("4.37.2")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.37.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Sa 19. Jul 19:26:49 CEST 2025</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.37.2</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 21. Jul 18:16:57 CEST 2025</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>