@schukai/monster 3.114.7 → 3.115.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.115.1] - 2025-04-01
+
+### Bug Fixes
+
+- update test and monster.mjs [#303](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/303)
+
+
+
+## [3.115.0] - 2025-04-01
+
+### Add Features
+
+- new fetch-box control [#303](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/303)
+
+
+
 ## [3.114.7] - 2025-03-30
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"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.114.7"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"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.115.1"}

package/source/components/content/camera.mjs

@@ -69,7 +69,7 @@ const emptyHistoryStateElementSymbol = Symbol("emptyHistoryStateElement");
  *
  * @fragments /fragments/components/content/camera-capture/
  *
- * @example /examples/components/content/camera-capture/
+ * @example /examples/components/content/camera-capture-simple/
  *
  * @since 3.111.0
  * @copyright schukai GmbH

package/source/components/content/fetch-box.mjs

@@ -0,0 +1,339 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { isString } from "../../types/is.mjs";
+import { FetchBoxStyleSheet } from "./stylesheet/fetch-box.mjs";
+import { addErrorAttribute } from "../../dom/error.mjs";
+import { Formatter } from "../../text/formatter.mjs";
+
+export { FetchBox };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+export const fetchBoxElementSymbol = Symbol("fetchBoxElement");
+
+/**
+ * A FetchBox
+ *
+ * @fragments /fragments/components/content/fetch-box/
+ *
+ * @example /examples/components/content/fetch-box-simple
+ *
+ * @since 3.115.0
+ * @copyright schukai GmbH
+ * @summary A beautiful FetchBox that can make your life easier and also looks good. Its like a box, but it fetches data from a URL.
+ */
+class FetchBox extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/content/fetch-box@@instance",
+		);
+	}
+
+	/**
+	 *
+	 * @return {Components.Content.FetchBox
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		return this;
+	}
+
+	/**
+	 * Handles the component's connection to the DOM.
+	 * Determines the styling of the component based on its parent's tag name.
+	 * Fetches necessary data for the component.
+	 *
+	 * @return {void} This method does not return a value.
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+
+		const parent = this.parentElement;
+
+		if (parent) {
+			const blockLevelElements = [
+				"DIV",
+				"SECTION",
+				"ARTICLE",
+				"HEADER",
+				"FOOTER",
+				"MAIN",
+				"NAV",
+				"ASIDE",
+			];
+			const isBlockLevel = blockLevelElements.includes(parent.tagName);
+
+			if (isBlockLevel) {
+				this.style.display = "block";
+				this.style.width = "100%";
+				this.style.height = "100%";
+			} else {
+				this.style.display = "inline-flex";
+				this.style.height = "100%";
+			}
+		}
+
+		this.fetch();
+	}
+
+	/**
+	 * 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} classes CSS classes
+	 * @property {string} classes.default CSS class for the main template
+	 * @property {string} classes.loading CSS class for the loading template
+	 * @property {string} classes.error CSS class for the error template
+	 * @property {string} classes.empty CSS class for the empty template
+	 * @property {Object} fetch fetch options for the request
+	 * @property {string} fetch.redirect error, follow, manual
+	 * @property {string} fetch.method GET, POST, PUT, DELETE
+	 * @property {string} fetch.mode same-origin, cors, no-cors, navigate
+	 * @property {string} fetch.credentials omit, same-origin, include
+	 * @property {Object} fetch.headers
+	 * @property {string} fetch.headers.accept text/html, application/json
+	 * @property {string} fetch.headers.content-type application/json
+	 * @property {string} parameter value for the data url
+	 * @property {Object} formatter
+	 * @property {Object} formatter.marker
+	 * @property {string} formatter.marker.open marker for the url
+	 * @property {string} formatter.marker.close marker for the url
+	 * @property {string} url url to fetch
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			classes: {
+				default: "monster-fetch-box-default",
+				loading: "loading",
+				error: "error",
+				empty: "empty",
+			},
+			data: {},
+			url: null,
+			fetch: {
+				redirect: "error",
+				method: "GET",
+				mode: "same-origin",
+				credentials: "same-origin",
+				headers: {
+					accept: "text/html",
+				},
+			},
+
+			content: {
+				// <slot name="loading"></slot>
+				loading: `<div class="monster-skeleton-animated monster-skeleton-col-100"></div>`,
+				error: `<slot name="error"></slot>`,
+				empty: `<slot name="empty"></slot>`,
+			},
+			visible: "loading",
+			parameter: null,
+
+			formatter: {
+				marker: {
+					open: null,
+					close: null,
+				},
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-fetch-box";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [FetchBoxStyleSheet];
+	}
+
+	/**
+	 * load content from url
+	 */
+	fetch() {
+		try {
+			return loadContent
+				.call(this)
+				.then((obj) => {
+					if (obj.type !== "application/json") {
+						this.setOption("visible", "error");
+						throw new Error("not a json response");
+					}
+
+					try {
+						const content = obj.content;
+						if (!isString(content) || content === "") {
+							this.setOption("visible", "empty");
+							return;
+						}
+
+						const jsonContent = JSON.parse(content);
+						if (jsonContent === null) {
+							this.setOption("visible", "empty");
+							return;
+						}
+
+						this.setOption("data", jsonContent);
+						this.setOption("visible", "default");
+					} catch (e) {
+						this.setOption("visible", "error");
+						throw e;
+					}
+				})
+				.catch((e) => {
+					this.setOption("visible", "error");
+					addErrorAttribute(this, e);
+				});
+		} catch (e) {
+			addErrorAttribute(this, e);
+			this.setOption("visible", "error");
+			return Promise.reject(e);
+		}
+	}
+}
+
+/**
+ * @private
+ * @throws {Error} missing url
+ * @throws {Error} we won't be able to read the data
+ * @throws {Error} request failed
+ * @return {Promise}
+ */
+function loadContent() {
+	let url = this.getOption("url");
+
+	if (url instanceof URL) {
+		url = url.toString();
+	}
+
+	if (!isString(url) || url === "") {
+		throw new Error("missing url");
+	}
+
+	let p = this.getOption("parameter", null);
+	if (p === null) {
+		p = "";
+	}
+
+	const data = {
+		parameter: p,
+	};
+
+	const formatter = new Formatter(data);
+
+	if (this.getOption("formatter.marker.open")) {
+		const open = this.getOption("formatter.marker.open");
+		if (!isString(open)) {
+			throw new TypeError("open is not a string");
+		}
+
+		const close = this.getOption("formatter.marker.close");
+		if (close !== undefined && !isString(close)) {
+			throw new TypeError("close is not a string");
+		}
+
+		formatter.setMarker(open, close);
+	}
+
+	const formattedUrl = formatter.format(url);
+
+	const options = this.getOption("fetch", {});
+
+	return fetch(formattedUrl, options).then((response) => {
+		if (!response.ok) {
+			if (["error", "opaque", "opaqueredirect"].includes(response.type)) {
+				throw new Error(`we won't be able to read the data (${response.type})`);
+			}
+
+			const statusClass = String(response.status).charAt(0);
+			if (statusClass === "4") {
+				throw new Error(`client error ${response.statusText}`);
+			}
+			throw new Error(
+				`undefined status (${response.status} / ${response.statusText}) or type (${response.type})`,
+			);
+		}
+
+		return response.text().then((content) => ({
+			content,
+			type: response.headers.get("Content-Type"),
+		}));
+	});
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+	this[fetchBoxElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <div
+                    data-monster-attributes="class path:classes.default,
+				 data-monster-visible path:visible | equals:default | ?:true:false
+                 ">
+                <slot></slot>
+            </div>
+            <div
+                    data-monster-attributes="class path:classes.loading,
+				 data-monster-visible path:visible | equals:loading | ?:true:false"
+                    data-monster-replace="path:content.loading"></div>
+            <div
+                    data-monster-attributes="class path:classes.error,
+				 data-monster-visible path:visible | equals:error | ?:true:false"
+                    data-monster-replace="path:content.error"></div>
+            <div
+                    data-monster-attributes="class path:classes.empty,
+				 data-monster-visible path:visible | equals:empty | ?:true:false"
+                    data-monster-replace="path:content.empty"></div>
+        </div>`;
+}
+
+registerCustomElement(FetchBox);

package/source/components/content/style/fetch-box.pcss

@@ -0,0 +1,36 @@
+@import "../../style/control.pcss";
+@import "../../style/property.pcss";
+@import "../../style/skeleton.pcss";
+
+
+[data-monster-role="control"] {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    width: 100%;
+    min-height: 1rem;
+    min-width: 1rem;
+    box-sizing: border-box;
+}
+
+[data-monster-visible="false"] {
+    display: none;
+}
+
+[data-monster-visible="true"] {
+    height: 100%;
+}
+
+:host {
+    display: inline-block;;
+    min-width: 1rem;
+    min-height: 1rem;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.monster-skeleton-animated {
+    height: 100%;
+    min-height: 1rem;
+}
+

package/source/components/content/stylesheet/fetch-box.mjs

@@ -0,0 +1,38 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * 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";
+
+export { FetchBoxStyleSheet };
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const FetchBoxStyleSheet = new CSSStyleSheet();
+
+try {
+	FetchBoxStyleSheet.insertRule(
+		`
+@layer fetchbox { 
+[data-monster-role=control]{outline:none}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}[data-monster-role=control]{box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:1rem;min-width:1rem;width:100%}[data-monster-visible=false]{display:none}[data-monster-visible=true]{height:100%}:host{box-sizing:border-box;display:inline-block;height:100%;min-height:1rem;min-width:1rem}.monster-skeleton-animated{height:100%;min-height:1rem} 
+}`,
+		0,
+	);
+} catch (e) {
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
+}

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

@@ -1,26 +1,24 @@
-
-
-@define-mixin skeleton $width, $color:var(--monster-color-gray-3), $height:100% {
+@define-mixin skeleton $width, $color, $height:100% {
     --monster-skeleton-color: $color;
+    --monster-skeleton-color-50: rgba(from $color 255 255 255 / 0.5);
     --monster-skeleton-height: $height;
     --monster-skeleton-width: $width;
-    --monster-skeleton: linear-gradient(90deg, var(--monster-skeleton-color) 0, transparent var(--monster-skeleton-width));
+    --monster-skeleton: linear-gradient(
+            99deg,
+            var(--monster-skeleton-color) 0%,
+            var(--monster-skeleton-color-50) 40%,
+            transparent 70%
+    );
 
-    background-image:
-            var(--monster-skeleton);
+    background-image: var(--monster-skeleton);
 
-    background-size:
-            var(--monster-skeleton-width) var(--monster-skeleton-height);
+    background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
 
-    background-repeat:
-            no-repeat;
+    background-repeat: no-repeat;
 
-    background-position:
-            0 0;
+    background-position: 0 0;
 
     color: var(--monster-skeleton-color);
 
     min-height: 1px;
-
-
 }

package/source/components/style/skeleton.css

@@ -1,10 +1,10 @@
 /** generated from skeleton.pcss **/
 .monster-skeleton-col-10 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 10%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
@@ -19,21 +19,21 @@
 	min-height: 1px;
 }
 .monster-skeleton-col-20 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 20%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
 }
 .monster-skeleton-col-30 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 30%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
@@ -48,21 +48,21 @@
 	min-height: 1px;
 }
 .monster-skeleton-col-40 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 40%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
 }
 .monster-skeleton-col-50 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 50%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
@@ -77,21 +77,21 @@
 	min-height: 1px;
 }
 .monster-skeleton-col-60 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 60%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
 }
 .monster-skeleton-col-70 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 70%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
@@ -106,21 +106,21 @@
 	min-height: 1px;
 }
 .monster-skeleton-col-80 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 80%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
 }
 .monster-skeleton-col-90 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 90%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
@@ -135,31 +135,25 @@
 	min-height: 1px;
 }
 .monster-skeleton-col-100 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
+	--monster-skeleton-color: var(--monster-color-pink-2);
 	--monster-skeleton-height: 100%;
 	--monster-skeleton-width: 100%;
 	--monster-skeleton: linear-gradient(
-		90deg,
+		99deg,
 		var(--monster-skeleton-color) 0,
 		transparent var(--monster-skeleton-width)
 	);
 }
 .monster-skeleton-animated {
-	animation-duration: 2.25s;
-	animation-fill-mode: forwards;
-	animation-iteration-count: infinite;
-	animation-name: shimmer;
-	animation-timing-function: linear;
+	animation: shimmer 4.25s linear infinite forwards;
 	border-radius: 4px;
 }
 @keyframes shimmer {
-	0% {
-		filter: brightness(1);
+	0%,
+	to {
+		filter: brightness(0.81);
 	}
 	50% {
-		filter: brightness(1.5);
-	}
-	to {
-		filter: brightness(1);
+		filter: brightness(0.45);
 	}
 }