@schukai/monster 3.52.0 → 3.53.0

package/source/components/style/icons.pcss

@@ -0,0 +1,110 @@
+
+@import "mixin/icon.pcss";
+
+@mixin icon info {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-info-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/%3E%3C/svg%3E");
+}
+
+@mixin icon positiv {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
+}
+
+@mixin icon negativ {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+}
+
+@mixin icon warning {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
+}
+
+@mixin icon neutral {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
+}
+
+@mixin icon question {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-question-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286zm1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94z'/%3E%3C/svg%3E");
+}
+
+@mixin icon plus {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
+}
+
+@mixin icon dash {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z'/%3E%3C/svg%3E");
+}
+
+@mixin icon gear {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-gear' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z'/%3E%3Cpath d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z'/%3E%3C/svg%3E");
+}
+
+@mixin icon home {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-house' viewBox='0 0 16 16'%3E%3Cpath d='M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L2 8.207V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5V8.207l.646.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.707 1.5ZM13 7.207V13.5a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5V7.207l5-5 5 5Z'/%3E%3C/svg%3E");
+}
+
+@mixin icon counterclockwise {
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-counterclockwise' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z'/%3E%3C/svg%3E");
+}
+
+@for $i from 2 to 3 {
+
+.monster-icon-success-$i:before {
+    background-color: var(--monster-color-success-$i);
+    color: var(--monster-bg-color-success-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-warning-$i:before {
+    background-color: var(--monster-color-warning-$i);
+    color: var(--monster-bg-color-warning-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-error-$i:before {
+    background-color: var(--monster-color-error-$i);
+    color: var(--monster-bg-color-error-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-error-$i:before, .monster-icon-warning-$i:before, .monster-icon-success-$i:before {
+    content: "";
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+
+}
+}
+
+@for $i from 1 to 4 by 3 {
+
+.monster-icon-success-$i:before {
+    background-color: var(--monster-bg-color-success-$i);
+    color: var(--monster-color-success-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-check-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-warning-$i:before {
+    background-color: var(--monster-bg-color-warning-$i);
+    color: var(--monster-color-warning-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-exclamation-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-error-$i:before {
+    background-color: var(--monster-bg-color-error-$i);
+    color: var(--monster-color-error-$i);
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
+}
+
+.monster-icon-error-$i:before, .monster-icon-warning-$i:before, .monster-icon-success-$i:before {
+    content: "";
+    display: inline-block;
+    height: 1em;
+    width: 1em;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+
+}
+}

package/source/components/style/link.pcss

@@ -19,7 +19,7 @@ a, a:link, a:visited, a:hover, a:active, a:focus {
     color: var(--monster-color-primary-1);
     text-decoration: none;
     outline: none;
-    background:
+    background-image:
             linear-gradient(
                     to right,
                     var(--monster-color-gradient-1),

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

@@ -29,8 +29,6 @@
     padding: .375rem .75rem;
     outline: none;
 
-    display: inline-block;
-
     background-position: center;
 
     position: relative;

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

@@ -0,0 +1,43 @@
+@define-mixin icon $name {
+
+    @for $i from 1 to 4 {
+
+        .monster-icon-primary-$(i)-$(name)::before {
+        background-color: var(--monster-color-primary-$i);
+        color: var(--monster-bg-color-primary-$i);
+    }
+
+    .monster-icon-secondary-$(i)-$(name)::before {
+    background-color: var(--monster-color-secondary-$i);
+    color: var(--monster-bg-color-secondary-$i);
+    }
+
+    .monster-icon-tertiary-$(i)-$(name)::before {
+    background-color: var(--monster-color-tertiary-$i);
+    color: var(--monster-bg-color-tertiary-$i);
+    }
+
+    .monster-icon-secondary-$(i)-$(name)::before {
+    background-color: var(--monster-color-secondary-$i);
+    color: var(--monster-bg-color-secondary-$i);
+    }
+
+
+    .monster-icon-primary-$(i)-$(name)::before,
+    .monster-icon-secondary-$(i)-$(name)::before,
+    .monster-icon-tertiary-$(i)-$(name)::before {
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: contain;
+    @mixin-content;
+    }
+
+
+
+
+    }
+}

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

@@ -6,6 +6,10 @@
     --monster-text-shadow: none;
 }
 
+@define-mixin defaultBoxProperty {
+    --monster-box-shadow-1: 12px 12px 2px 1px var(--monster-color-gray-6);
+}
+
 @define-mixin defaultSpaceProperty {
     --monster-space-0: 0;
     --monster-space-1: 2px;

package/source/components/stylesheet/badge.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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 { BadgeStyleSheet };
+export {BadgeStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { BadgeStyleSheet };
 const BadgeStyleSheet = new CSSStyleSheet();
 
 try {
-	BadgeStyleSheet.insertRule(
-		`
+  BadgeStyleSheet.insertRule(`
 @layer badge { 
 .monster-badge-primary{padding:.25em .4em}.monster-badge-primary,.monster-badge-primary-pill{background-color:var(--monster-bg-color-primary-4);border-radius:.25rem;color:var(--monster-color-primary-4);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-primary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-secondary{padding:.25em .4em}.monster-badge-secondary,.monster-badge-secondary-pill{background-color:var(--monster-bg-color-secondary-3);border-radius:.25rem;color:var(--monster-color-secondary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-secondary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-tertiary{padding:.25em .4em}.monster-badge-tertiary,.monster-badge-tertiary-pill{background-color:var(--monster-bg-color-tertiary-3);border-radius:.25rem;color:var(--monster-color-tertiary-3);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-tertiary-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-destructive{padding:.25em .4em}.monster-badge-destructive,.monster-badge-destructive-pill{background-color:var(--monster-bg-color-destructive-1);border-radius:.25rem;color:var(--monster-color-destructive-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-destructive-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-success{padding:.25em .4em}.monster-badge-success,.monster-badge-success-pill{background-color:var(--monster-bg-color-success-1);border-radius:.25rem;color:var(--monster-color-success-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-success-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-warning{padding:.25em .4em}.monster-badge-warning,.monster-badge-warning-pill{background-color:var(--monster-bg-color-warning-1);border-radius:.25rem;color:var(--monster-color-warning-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-warning-pill{border-radius:10rem;padding:.25em .6em}.monster-badge-error{padding:.25em .4em}.monster-badge-error,.monster-badge-error-pill{background-color:var(--monster-bg-color-error-1);border-radius:.25rem;color:var(--monster-color-error-1);display:inline-block;font-size:75%;font-weight:700;line-height:1;text-align:center;text-decoration:none;vertical-align:baseline;white-space:nowrap}.monster-badge-error-pill{border-radius:10rem;padding:.25em .6em} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/stylesheet/border.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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 { BorderStyleSheet };
+export {BorderStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { BorderStyleSheet };
 const BorderStyleSheet = new CSSStyleSheet();
 
 try {
-	BorderStyleSheet.insertRule(
-		`
+  BorderStyleSheet.insertRule(`
 @layer border { 
 .monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-shadow:none;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-shadow:var(--monster-box-shadow-1);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-shadow:var(--monster-box-shadow-1);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)} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/stylesheet/button.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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 { ButtonStyleSheet };
+export {ButtonStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { ButtonStyleSheet };
 const ButtonStyleSheet = new CSSStyleSheet();
 
 try {
-	ButtonStyleSheet.insertRule(
-		`
+  ButtonStyleSheet.insertRule(`
 @layer button { 
-.monster-button-primary,button{align-items:center;background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:inline-block;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:inline-block;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:inline-block;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:inline-block;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}} 
-}`,
-		0,
-	);
+.monster-button-primary,button{align-items:center;background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/stylesheet/card.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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 { CardStyleSheet };
+export {CardStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { CardStyleSheet };
 const CardStyleSheet = new CSSStyleSheet();
 
 try {
-	CardStyleSheet.insertRule(
-		`
+  CardStyleSheet.insertRule(`
 @layer card { 
 .cards{grid-gap:22px;display:grid;grid-template-columns:repeat(4,1fr)}.cards .card{border-shadow:var(--monster-box-shadow-1);align-content:stretch;align-items:stretch;background-color:var(--monster-bg-color-primary-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;overflow:hidden}.cards .card img{display:block;margin-left:0;-o-object-fit:scale-down;object-fit:scale-down;overflow:hidden;padding:0;width:101%}.cards .card img:hover{box-shadow:var(--monster-box-shadow-2);transform:scale(1.05);transition:background .8s,color .25s .0833333333s}.cards .card h1,.cards .card h2,.cards .card h3,.cards .card h4,.cards .card h5,.cards .card h6,.cards .card p{margin:0;padding-left:1rem;padding-right:1rem}.cards .card h1:last-child,.cards .card h2:last-child,.cards .card h3:last-child,.cards .card h4:last-child,.cards .card h5:last-child,.cards .card h6:last-child,.cards .card p:last-child{padding-bottom:1rem}.cards .card h1:first-child,.cards .card h2:first-child,.cards .card h3:first-child,.cards .card h4:first-child,.cards .card h5:first-child,.cards .card h6:first-child,.cards .card p:first-child{padding-top:1rem}:is(.cards .card) img+h1,:is(.cards .card) img+h2,:is(.cards .card) img+h3,:is(.cards .card) img+h4,:is(.cards .card) img+h5,:is(.cards .card) img+h6,:is(.cards .card) img+p{padding-top:1rem}:is(.cards .card) h1+img,:is(.cards .card) h2+img,:is(.cards .card) h3+img,:is(.cards .card) h4+img,:is(.cards .card) h5+img,:is(.cards .card) h6+img,:is(.cards .card) p+img{padding-bottom:1rem}:is(.cards .card) h1+p,:is(.cards .card) h2+p,:is(.cards .card) h3+p,:is(.cards .card) h4+p,:is(.cards .card) h5+p,:is(.cards .card) h6+p,:is(.cards .card) p+p{padding-top:1rem}:is(.cards .card) .button+h1,:is(.cards .card) .button+h2,:is(.cards .card) .button+h3,:is(.cards .card) .button+h4,:is(.cards .card) .button+h5,:is(.cards .card) .button+h6,:is(.cards .card) .button+p,:is(.cards .card) button+h1,:is(.cards .card) button+h2,:is(.cards .card) button+h3,:is(.cards .card) button+h4,:is(.cards .card) button+h5,:is(.cards .card) button+h6,:is(.cards .card) button+p{padding-bottom:1rem}:is(.cards .card) h1+.button,:is(.cards .card) h1+button,:is(.cards .card) h2+.button,:is(.cards .card) h2+button,:is(.cards .card) h3+.button,:is(.cards .card) h3+button,:is(.cards .card) h4+.button,:is(.cards .card) h4+button,:is(.cards .card) h5+.button,:is(.cards .card) h5+button,:is(.cards .card) h6+.button,:is(.cards .card) h6+button,:is(.cards .card) p+.button,:is(.cards .card) p+button{margin-top:1rem}.cards .card .button,.cards .card button{border-left:none;border-right:none}.cards .card .button:first-child,.cards .card button:first-child{border-top:none}.cards .card .button:last-child,.cards .card button:last-child{border-bottom:none}:is(.cards .card button:last-child,.cards .card .button:last-child):hover{box-shadow:var(--monster-box-shadow-2);transform:scale(1.05);transition:background .8s,color .25s .0833333333s}.cards .card.card:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s;z-index:var(--monster-z-index-outline)} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/stylesheet/color.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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 { ColorStyleSheet };
+export {ColorStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { ColorStyleSheet };
 const ColorStyleSheet = new CSSStyleSheet();
 
 try {
-	ColorStyleSheet.insertRule(
-		`
+  ColorStyleSheet.insertRule(`
 @layer color { 
 :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} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/stylesheet/common.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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 { CommonStyleSheet };
+export {CommonStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { CommonStyleSheet };
 const CommonStyleSheet = new CSSStyleSheet();
 
 try {
-	CommonStyleSheet.insertRule(
-		`
+  CommonStyleSheet.insertRule(`
 @layer common { 
-a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}*{box-sizing:border-box;font-family:var(--monster-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif)}.visible{tvisibility:visible!important}.invisible{visibility:hidden!important}.hidden{display:none!important}.inline{display:inline!important}.block{display:block!important}.flex{display:flex!important}[data-monster-role=control]{outline:none}div[data-monster-role=popper]{background-color:#fff;border:var(--monster-border-width,1px) solid var(--monster-border-color,#000);box-sizing:border-box;display:none;padding:0;z-index:10}:host([disabled]){background-color:var(--monster-disabled-background-color,hsla(0,0%,94%,.3));border-color:var(--monster-disabled-border-color,hsla(0,0%,46%,.3));color:var(--monster-disabled-color,#545454)}:host([disabled]) *{border-color:var(--monster-disabled-border-color,hsla(0,0%,46%,.3));color:var(--monster-disabled-color,#545454)}:disabled{background-color:var(--monster-disabled-background-color,hsla(0,0%,94%,.3));border-color:var(--monster-disabled-border-color,hsla(0,0%,46%,.3));color:var(--monster-disabled-color,#545454);cursor:not-allowed;opacity:.55;pointer-events:none}input:focus-visible{outline:none} 
-}`,
-		0,
-	);
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:baseline}*{box-sizing:border-box;font-family:var(--monster-font-family,-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,Oxygen-Sans,Ubuntu,Cantarell,\"Helvetica Neue\",sans-serif)}.visible{tvisibility:visible!important}.invisible{visibility:hidden!important}.hidden{display:none!important}.inline{display:inline!important}.block{display:block!important}.flex{display:flex!important}[data-monster-role=control]{outline:none}div[data-monster-role=popper]{background-color:#fff;border:var(--monster-border-width,1px) solid var(--monster-color-primary-1);box-sizing:border-box;display:none;padding:0;z-index:10}:host([disabled]){background-color:var(--monster-bg-color-primary-disabled-1);border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46%,.3));color:var(--monster-color-primary-disabled-1)}:host([disabled]) *{background-color:var(--monster-bg-color-primary-disabled-1);border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46%,.3));color:var(--monster-color-primary-disabled-1)}:disabled{background-color:var(--monster-bg-color-primary-disabled-1);border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46%,.3));color:var(--monster-color-primary-disabled-1);cursor:not-allowed;opacity:.55;pointer-events:none}input:focus-visible{outline:none} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/stylesheet/control.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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 { ControlStyleSheet };
+export {ControlStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { ControlStyleSheet };
 const ControlStyleSheet = new CSSStyleSheet();
 
 try {
-	ControlStyleSheet.insertRule(
-		`
+  ControlStyleSheet.insertRule(`
 @layer control { 
 [data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/stylesheet/data-grid.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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 { DataGridStyleSheet };
+export {DataGridStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { DataGridStyleSheet };
 const DataGridStyleSheet = new CSSStyleSheet();
 
 try {
-	DataGridStyleSheet.insertRule(
-		`
+  DataGridStyleSheet.insertRule(`
 @layer datagrid { 
 .monster-data-grid-container{background-color:var(--monster-bg-color-primary-2);box-sizing:border-box;color:var(--monster-color-primary-2);display:block;overflow-x:auto;padding:20px;width:100%}.monster-data-grid-container>div{display:grid}.monster-data-grid-container .col-1{grid-column:1}.monster-data-grid-container .col-1,.monster-data-grid-container .col-2{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-2{grid-column:2}.monster-data-grid-container .col-3{grid-column:3}.monster-data-grid-container .col-3,.monster-data-grid-container .col-4{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-4{grid-column:4}.monster-data-grid-container .col-5{grid-column:5}.monster-data-grid-container .col-5,.monster-data-grid-container .col-6{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-6{grid-column:6}.monster-data-grid-container .col-7{grid-column:7}.monster-data-grid-container .col-7,.monster-data-grid-container .col-8{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-8{grid-column:8}.monster-data-grid-container .col-9{grid-column:9}.monster-data-grid-container .col-10,.monster-data-grid-container .col-9{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-10{grid-column:10}.monster-data-grid-container .col-11{grid-column:11}.monster-data-grid-container .col-11,.monster-data-grid-container .col-12{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-12{grid-column:12}.monster-data-grid-container .col-13{grid-column:13}.monster-data-grid-container .col-13,.monster-data-grid-container .col-14{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-14{grid-column:14}.monster-data-grid-container .col-15{grid-column:15}.monster-data-grid-container .col-15,.monster-data-grid-container .col-16{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-16{grid-column:16}.monster-data-grid-container .col-17{grid-column:17}.monster-data-grid-container .col-17,.monster-data-grid-container .col-18{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-18{grid-column:18}.monster-data-grid-container .col-19{grid-column:19}.monster-data-grid-container .col-19,.monster-data-grid-container .col-20{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-20{grid-column:20}.monster-data-grid-container .col-21{grid-column:21}.monster-data-grid-container .col-21,.monster-data-grid-container .col-22{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-22{grid-column:22}.monster-data-grid-container .col-23{grid-column:23}.monster-data-grid-container .col-23,.monster-data-grid-container .col-24{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-24{grid-column:24}.monster-data-grid-container .col-25{grid-column:25}.monster-data-grid-container .col-25,.monster-data-grid-container .col-26{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-26{grid-column:26}.monster-data-grid-container .col-27{grid-column:27}.monster-data-grid-container .col-27,.monster-data-grid-container .col-28{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-28{grid-column:28}.monster-data-grid-container .col-29{grid-column:29}.monster-data-grid-container .col-29,.monster-data-grid-container .col-30{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-30{grid-column:30}.monster-data-grid-container .col-31{grid-column:31}.monster-data-grid-container .col-31,.monster-data-grid-container .col-32{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-32{grid-column:32}.monster-data-grid-container .col-33{grid-column:33}.monster-data-grid-container .col-33,.monster-data-grid-container .col-34{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-34{grid-column:34}.monster-data-grid-container .col-35{grid-column:35}.monster-data-grid-container .col-35,.monster-data-grid-container .col-36{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-36{grid-column:36}.monster-data-grid-container .col-37{grid-column:37}.monster-data-grid-container .col-37,.monster-data-grid-container .col-38{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-38{grid-column:38}.monster-data-grid-container .col-39{grid-column:39}.monster-data-grid-container .col-39,.monster-data-grid-container .col-40{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-40{grid-column:40}.monster-data-grid-container .col-41{grid-column:41}.monster-data-grid-container .col-41,.monster-data-grid-container .col-42{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-42{grid-column:42}.monster-data-grid-container .col-43{grid-column:43}.monster-data-grid-container .col-43,.monster-data-grid-container .col-44{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-44{grid-column:44}.monster-data-grid-container .col-45{grid-column:45}.monster-data-grid-container .col-45,.monster-data-grid-container .col-46{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-46{grid-column:46}.monster-data-grid-container .col-47{grid-column:47}.monster-data-grid-container .col-47,.monster-data-grid-container .col-48{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-48{grid-column:48}.monster-data-grid-container .col-49{grid-column:49}.monster-data-grid-container .col-49,.monster-data-grid-container .col-50{background-color:var(--monster-bg-color-primary-1);border:none;color:var(--monster-color-primary-1);display:flex;font-size:1rem;font-weight:400;line-height:1.4;padding:.4rem}.monster-data-grid-container .col-50{grid-column:50}.monster-data-grid-container .col-start-end{grid-column:1/-1}.monster-data-grid-container .header{font-size:1rem;font-weight:600;font-weight:400;line-height:1.4;margin-bottom:.4rem} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/stylesheet/display.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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 { DisplayStyleSheet };
+export {DisplayStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { DisplayStyleSheet };
 const DisplayStyleSheet = new CSSStyleSheet();
 
 try {
-	DisplayStyleSheet.insertRule(
-		`
+  DisplayStyleSheet.insertRule(`
 @layer display { 
 .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} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }