@schukai/monster 3.114.7 → 3.115.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [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.0"}

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,345 @@
+/**
+ * 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,31 @@
+/**
+ * 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,165 +1,2 @@
 /** generated from skeleton.pcss **/
-.monster-skeleton-col-10 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 10%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		var(--monster-skeleton-color) 0,
-		transparent var(--monster-skeleton-width)
-	);
-}
-.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-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 20%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		var(--monster-skeleton-color) 0,
-		transparent var(--monster-skeleton-width)
-	);
-}
-.monster-skeleton-col-30 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 30%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		var(--monster-skeleton-color) 0,
-		transparent var(--monster-skeleton-width)
-	);
-}
-.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-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 40%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		var(--monster-skeleton-color) 0,
-		transparent var(--monster-skeleton-width)
-	);
-}
-.monster-skeleton-col-50 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 50%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		var(--monster-skeleton-color) 0,
-		transparent var(--monster-skeleton-width)
-	);
-}
-.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-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 60%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		var(--monster-skeleton-color) 0,
-		transparent var(--monster-skeleton-width)
-	);
-}
-.monster-skeleton-col-70 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 70%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		var(--monster-skeleton-color) 0,
-		transparent var(--monster-skeleton-width)
-	);
-}
-.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-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 80%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		var(--monster-skeleton-color) 0,
-		transparent var(--monster-skeleton-width)
-	);
-}
-.monster-skeleton-col-90 {
-	--monster-skeleton-color: var(--monster-color-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 90%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		var(--monster-skeleton-color) 0,
-		transparent var(--monster-skeleton-width)
-	);
-}
-.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-gray-3);
-	--monster-skeleton-height: 100%;
-	--monster-skeleton-width: 100%;
-	--monster-skeleton: linear-gradient(
-		90deg,
-		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;
-	border-radius: 4px;
-}
-@keyframes shimmer {
-	0% {
-		filter: brightness(1);
-	}
-	50% {
-		filter: brightness(1.5);
-	}
-	to {
-		filter: brightness(1);
-	}
-}
+.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}

package/source/components/style/skeleton.pcss

@@ -2,27 +2,21 @@
 
 @for $i from 10 to 100 by 10 {
     .monster-skeleton-col-$(i) {
-        @mixin skeleton $(i)%;
-    }    
+        @mixin skeleton $(i)%, var(--monster-color-pink-2);
+    }
 }
 
 .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%, 100% {
+        filter: brightness(0.81);
     }
     50% {
-        filter: brightness(1.5);
-    }
-    100% {
-        filter: brightness(1);
+        filter: brightness(0.45);
     }
 }

package/source/components/stylesheet/mixin/skeleton.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 { SkeletonStyleSheet };
+export {SkeletonStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { SkeletonStyleSheet };
 const SkeletonStyleSheet = new CSSStyleSheet();
 
 try {
-	SkeletonStyleSheet.insertRule(
-		`
+  SkeletonStyleSheet.insertRule(`
 @layer skeleton { 
  
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/stylesheet/skeleton.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 { SkeletonStyleSheet };
+export {SkeletonStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { SkeletonStyleSheet };
 const SkeletonStyleSheet = new CSSStyleSheet();
 
 try {
-	SkeletonStyleSheet.insertRule(
-		`
+  SkeletonStyleSheet.insertRule(`
 @layer skeleton { 
-.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(90deg,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;border-radius:4px}@keyframes shimmer{0%{filter:brightness(1)}50%{filter:brightness(1.5)}to{filter:brightness(1)}} 
-}`,
-		0,
-	);
+.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.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-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }