@schukai/monster 3.60.0 → 3.62.0

package/source/components/style/link.pcss

@@ -13,51 +13,36 @@ Note the order there is important (LVHA-order):
 @see https://developer.mozilla.org/en-US/docs/Web/CSS/:link?retiredLocale=de
 
  */
-
-
 a, a:link, a:visited, a:hover, a:active, a:focus {
-    color: var(--monster-color-primary-1);
+    color: var(--monster-color-secondary-1);
     text-decoration: none;
     outline: none;
-    background-image:
-            linear-gradient(
-                    to right,
-                    var(--monster-color-gradient-1),
-                    var(--monster-color-gradient-2),
-                    var(--monster-color-gradient-3)
-            );
-    background-size: 100% 1px, 0 3px;
-    background-position: 100% 100%, 0 100%;
-    background-repeat: no-repeat;
-    transition: background-size 400ms;
+    transition: color 300ms ease-in-out, text-decoration-color 300ms ease-in-out;
 }
 
+
+
 a:hover, a:active, a:focus {
-    outline: none;
-    background: linear-gradient(
-            to right,
-            var(--monster-color-gradient-1),
-            var(--monster-color-gradient-2),
-            var(--monster-color-gradient-3)
-    );
-    
-    background-clip: text;
-    color: transparent;
-    
-    
+    color: var(--monster-color-primary-2);
+    text-decoration: underline;
+    text-decoration-color: var(--monster-color-secondary-1 );
+    text-decoration-thickness: 1px; 
+    text-underline-offset: 2px;
 }
 
-
 a:focus {
-    outline: 1px dashed var(--monster-color-selection-4);
+    outline: 1px dashed var(--monster-color-selection-1);
     outline-offset: 2px;
 }
 
-@media (prefers-color-scheme: light) {
-
+@media (prefers-color-scheme: dark) {
+    
+    a, a:link, a:visited, a:hover, a:active, a:focus {
+        color: var(--monster-color-amber-2);
+        
+    }
+    
     a:focus {
-        outline: 1px dashed var(--monster-color-selection-3);
-        outline-offset: 2px;
+        outline: 1px dashed var(--monster-color-selection-4);
     }
-
-}
+}

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

@@ -37,6 +37,9 @@
     font-family: var(--monster-font-family);
 
     box-shadow: var(--monster-box-shadow-1);
+    
+    background-color: var(--monster-bg-color-primary-1);
+    color: var(--monster-color-primary-1);
 
     display: flex;
     align-items: center;

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

@@ -85,7 +85,6 @@
         border-width: var(--monster-border-width);
         border-radius: var(--monster-border-radius);
         border-style: var(--monster-border-style);
-        border-shadow: var(--monster-box-shadow-1);
         border-color: var(--monster-bg-color-primary-3);
     }
 
@@ -100,8 +99,8 @@
     }
 
     & option:hover {
-        background-color: var(--monster-bg-color-primary-3);
-        color: var(--monster-color-primary-3);
+        background-color: var(--monster-bg-color-primary-2);
+        color: var(--monster-color-primary-2);
     }
 
     & input,
@@ -109,9 +108,8 @@
     & textarea {
         border: 0;
         border-bottom-width: thin;
-        border-bottom-radius: var(--monster-border-radius);
+        border-radius: var(--monster-border-radius);
         border-bottom-style: var(--monster-border-style);
-        border-bottom-shadow: var(--monster-box-shadow-1);
         border-bottom-color: var(--monster-bg-color-primary-1);
     }
 
@@ -122,7 +120,6 @@
         border-width: thin;
         border-radius: var(--monster-border-radius);
         border-style: var(--monster-border-style);
-        border-shadow: var(--monster-box-shadow-1);
         border-color: var(--monster-bg-color-primary-2);
     }
 
@@ -158,7 +155,7 @@
         margin: 0;
         position: relative;
         padding: 2.5rem 2rem 2rem;
-        border: 2px solid var(--monster-bg-color-primary-3);
+        border: 1px dotted var(--monster-bg-color-primary-4);
 
         background-color: var(--monster-bg-color-primary-1);
         color: var(--monster-color-primary-1);
@@ -170,7 +167,7 @@
         & legend {
             position: absolute;
             top: 0;
-            right: 0px;
+            right: 0;
             padding: 0.1rem 2rem 0.2rem 0.5rem;
             max-width: 95%;
             text-align: right;
@@ -221,9 +218,9 @@
         & input,
         & select,
         & textarea {
-            background-color: var(--monster-bg-color-primary-2);
-            color: var(--monster-color-primary-2);
-            border-color: var(--monster-bg-color-primary-3);
+            background-color: var(--monster-bg-color-primary-1);
+            color: var(--monster-color-primary-1);
+            border-color: var(--monster-bg-color-primary-4);
         }
 
         & button:focus,
@@ -231,7 +228,6 @@
         & select:focus,
         & textarea:focus {
             outline: 1px dashed var(--monster-color-selection-3);
-            outline-offset: 2px;
         }        
         
     }

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

@@ -62,7 +62,6 @@
 }
 
 @define-mixin defaultFontProperty {
-    /** Fonts / Text / Typography **/
     --monster-font-family: -apple-system,
     BlinkMacSystemFont,
     "Quicksand",
@@ -70,10 +69,9 @@
     "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
     "Helvetica Neue", Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-
-
 }
 
+
 @define-mixin defaultDragAndDropProperty {
     --monster-dragger-width: 1px;    
     --monster-dragger-handle-width: 4px;
@@ -83,15 +81,15 @@
 @define-mixin defaultColorProperty {
 
     /** PRIMARY */
-    --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-gray-1);
-    --monster-color-primary-4: var(--monster-color-gray-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-3);
-    --monster-bg-color-primary-4: var(--monster-color-gray-6);
+    --monster-color-primary-1: var(--monster-color-cinnamon-6);
+    --monster-color-primary-2: var(--monster-color-cinnamon-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-cinnamon-1);
+    --monster-bg-color-primary-2: var(--monster-color-cinnamon-2);
+    --monster-bg-color-primary-3: var(--monster-color-cinnamon-3);
+    --monster-bg-color-primary-4: var(--monster-color-cinnamon-6);
 
     @media (prefers-color-scheme: dark) {
         --monster-color-primary-1: var(--monster-color-gray-1);

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

@@ -2,50 +2,51 @@
 
 @define-mixin h1 {
     font-size: 3rem;
-    line-height: 1;   
-    margin-bottom: 1.25rem;
+    line-height: 1.15;   
+    margin-bottom: 1.5rem;
     font-weight: normal;
 }
 
 @define-mixin h2 {
     font-size: 2.5rem;
-    line-height: calc(2px + 2ex + 2px);
-    margin-bottom: 1.25rem;
+    line-height: 1.2;
+    margin-bottom: 1.5rem;
     font-weight: normal;
 }
 
 @define-mixin h3 {
     font-size: 2rem;
-    line-height: calc(2px + 2ex + 2px);
+    line-height: 1.25;
     margin-bottom: 1.25rem;
     font-weight: normal;
 }
 
 @define-mixin h4 {
     font-size: 1.5rem;
-    line-height: calc(2px + 2ex + 2px);
+    line-height: 1.3;
     margin-bottom: 1.25rem;
     font-weight: normal;
 }
 
 @define-mixin h5 {
     font-size: 1.4rem;
-    line-height: calc(2px + 2ex + 2px);
+    line-height: 1.3;
     margin-bottom: 1.25rem;
     font-weight: bolder;
 }
 
 @define-mixin h6 {
     font-size: 1.3rem;
-    line-height: calc(2px + 2ex + 2px);
+    line-height: 1.3;
     margin-bottom: 1.25rem;
     font-weight: bold;
 }
  
 @define-mixin paragraph {
     font-size: 1rem;
-    line-height: 1.4;
+    line-height: 1.6;
     font-weight: normal;
+    text-align: justify;
 }
 
 

package/source/components/stylesheet/border.mjs

@@ -20,7 +20,7 @@ const BorderStyleSheet = new CSSStyleSheet();
 try {
   BorderStyleSheet.insertRule(`
 @layer border { 
-.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.monster-border-0{border-radius:0;border-style:none;border-width:0;border-shadow:none}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);border-shadow:var(--monster-box-shadow-1)}.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)} 
+.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/source/components/stylesheet/button.mjs

@@ -20,7 +20,7 @@ const ButtonStyleSheet = new CSSStyleSheet();
 try {
   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: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)}} 
+.monster-button-primary,button{align-items:center;background-color:var(--monster-bg-color-primary-1);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);color:var(--monster-color-primary-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-primary-1);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-primary-1);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-primary-1);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-primary-1);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{background-color:var(--monster-bg-color-primary-1);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-color-primary-1);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-bg-color-primary-1);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-color-primary-1);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-bg-color-primary-1);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-color-primary-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 + "");

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

@@ -20,7 +20,7 @@ const DataGridStyleSheet = new CSSStyleSheet();
 try {
   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} 
+.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;padding:.4rem;text-align:justify}.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.6;margin-bottom:.4rem;text-align:justify} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/source/components/stylesheet/form.mjs

@@ -20,7 +20,7 @@ const FormStyleSheet = new CSSStyleSheet();
 try {
   FormStyleSheet.insertRule(`
 @layer form { 
-.monster-form{accent-color:var(--monster-color-secondary-2);align-content:flex-start;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;position:relative}.monster-form label{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);display:grid}.monster-form label:has(input[type=radio]){display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}.monster-form label:has(input[type=radio]) input{margin-left:.4rem;margin-right:.4rem}.monster-form label:has(input[type=radio])~label:has(input[type=radio]){margin-top:.2rem}.monster-form label:has(input[type=checkbox]){display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}.monster-form label:has(input[type=checkbox]) input{margin-left:.4rem;margin-right:.4rem}.monster-form label:has(input[type=checkbox])~label:has(input[type=checkbox]){margin-top:.2rem}.monster-form label~fieldset,.monster-form label~label{margin-top:1rem}.monster-form button,.monster-form input,.monster-form select,.monster-form textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem}.monster-form button{background-color:var(--monster-bg-color-tertiary-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-1);border-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-primary-3)}.monster-form option:checked,.monster-form option:focus,.monster-form option:hover{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-form input,.monster-form select,.monster-form textarea{border:0;border-bottom-radius:var(--monster-border-radius);border-bottom-shadow:var(--monster-box-shadow-1);border-bottom:thin var(--monster-border-style) var(--monster-bg-color-primary-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:thin;border-shadow:var(--monster-box-shadow-1);border-color:var(--monster-bg-color-primary-2)}.monster-form button,.monster-form input:not([type=radio]):not([type=checkbox]),.monster-form label,.monster-form select,.monster-form textarea{width:100%}.monster-form label input:not([type=radio]):not([type=checkbox]),.monster-form label select,.monster-form label textarea,.monster-form label+input:not([type=radio]):not([type=checkbox]),.monster-form label+select,.monster-form label+textarea{margin-top:.2rem;width:100%}.monster-form fieldset{background-color:var(--monster-bg-color-primary-1);border:2px solid var(--monster-bg-color-primary-3);box-sizing:border-box;color:var(--monster-color-primary-1);margin:0;outline:none;padding:2.5rem 2rem 2rem;position:relative;width:100%}.monster-form fieldset legend{font-size:.8rem;max-width:95%;overflow:hidden;padding:.1rem 2rem .2rem .5rem;position:absolute;right:0;text-align:right;text-overflow:ellipsis;text-transform:uppercase;top:0;white-space:nowrap}.monster-form fieldset~fieldset{margin-top:1rem}.monster-form button{margin:.2rem 0}.monster-form button:first-of-type{margin-top:1rem}.monster-form button:last-of-type{margin-bottom:1rem}.monster-form input:focus-visible{outline:none}.monster-form button:focus,.monster-form input:focus,.monster-form select:focus,.monster-form textarea:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){.monster-form button,.monster-form input,.monster-form select,.monster-form textarea{background-color:var(--monster-bg-color-primary-2);border-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-2)}.monster-form button:focus,.monster-form input:focus,.monster-form select:focus,.monster-form textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}.monster-form button:hover,.monster-form input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),.monster-form select:hover,.monster-form textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s} 
+.monster-form{accent-color:var(--monster-color-secondary-2);align-content:flex-start;align-items:flex-start;box-sizing:border-box;display:flex;flex-direction:column;flex-wrap:nowrap;position:relative}.monster-form label{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);display:grid}.monster-form label:has(input[type=radio]){display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}.monster-form label:has(input[type=radio]) input{margin-left:.4rem;margin-right:.4rem}.monster-form label:has(input[type=radio])~label:has(input[type=radio]){margin-top:.2rem}.monster-form label:has(input[type=checkbox]){display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start}.monster-form label:has(input[type=checkbox]) input{margin-left:.4rem;margin-right:.4rem}.monster-form label:has(input[type=checkbox])~label:has(input[type=checkbox]){margin-top:.2rem}.monster-form label~fieldset,.monster-form label~label{margin-top:1rem}.monster-form button,.monster-form input,.monster-form select,.monster-form textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none;padding:.4rem .6rem}.monster-form button{background-color:var(--monster-bg-color-tertiary-1);border-color:var(--monster-bg-color-primary-3);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-1)}.monster-form option:checked,.monster-form option:focus{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-form option:hover{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-form input,.monster-form select,.monster-form textarea{border:0;border-bottom:thin var(--monster-border-style) var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-2);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:thin}.monster-form button,.monster-form input:not([type=radio]):not([type=checkbox]),.monster-form label,.monster-form select,.monster-form textarea{width:100%}.monster-form label input:not([type=radio]):not([type=checkbox]),.monster-form label select,.monster-form label textarea,.monster-form label+input:not([type=radio]):not([type=checkbox]),.monster-form label+select,.monster-form label+textarea{margin-top:.2rem;width:100%}.monster-form fieldset{background-color:var(--monster-bg-color-primary-1);border:1px dotted var(--monster-bg-color-primary-4);box-sizing:border-box;color:var(--monster-color-primary-1);margin:0;outline:none;padding:2.5rem 2rem 2rem;position:relative;width:100%}.monster-form fieldset legend{font-size:.8rem;max-width:95%;overflow:hidden;padding:.1rem 2rem .2rem .5rem;position:absolute;right:0;text-align:right;text-overflow:ellipsis;text-transform:uppercase;top:0;white-space:nowrap}.monster-form fieldset~fieldset{margin-top:1rem}.monster-form button{margin:.2rem 0}.monster-form button:first-of-type{margin-top:1rem}.monster-form button:last-of-type{margin-bottom:1rem}.monster-form input:focus-visible{outline:none}.monster-form button:focus,.monster-form input:focus,.monster-form select:focus,.monster-form textarea:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){.monster-form button,.monster-form input,.monster-form select,.monster-form textarea{background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-1)}.monster-form button:focus,.monster-form input:focus,.monster-form select:focus,.monster-form textarea:focus{outline:1px dashed var(--monster-color-selection-3)}}.monster-form button:hover,.monster-form input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),.monster-form select:hover,.monster-form textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/source/components/stylesheet/link.mjs

@@ -20,7 +20,7 @@ const LinkStyleSheet = new CSSStyleSheet();
 try {
   LinkStyleSheet.insertRule(`
 @layer link { 
-a,a:active,a:focus,a:hover,a:link,a:visited{background-image:linear-gradient(to right,var(--monster-color-gradient-1),var(--monster-color-gradient-2),var(--monster-color-gradient-3));background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,0 3px;color:var(--monster-color-primary-1);outline:none;text-decoration:none;transition:background-size .4s}a:active,a:focus,a:hover{background:linear-gradient(to right,var(--monster-color-gradient-1),var(--monster-color-gradient-2),var(--monster-color-gradient-3));-webkit-background-clip:text;background-clip:text;color:transparent;outline:none}a:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){a:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}} 
+a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-secondary-1);outline:none;text-decoration:none;transition:color .3s ease-in-out,text-decoration-color .3s ease-in-out}a:active,a:focus,a:hover{color:var(--monster-color-primary-2);text-decoration:underline;text-decoration-color:var(--monster-color-secondary-1 );text-decoration-thickness:1px;text-underline-offset:2px}a:focus{outline:1px dashed var(--monster-color-selection-1);outline-offset:2px}@media (prefers-color-scheme:dark){a,a:active,a:focus,a:hover,a:link,a:visited{color:var(--monster-color-amber-2)}a:focus{outline:1px dashed var(--monster-color-selection-4)}} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");

package/source/components/stylesheet/property.mjs

@@ -20,7 +20,7 @@ const PropertyStyleSheet = new CSSStyleSheet();
 try {
   PropertyStyleSheet.insertRule(`
 @layer property { 
-: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-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-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-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--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);--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);--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);--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);--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);--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);--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);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--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;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--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:1px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}@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);--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);--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);--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);--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);--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);--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);--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);--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)}} 
+: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-color-primary-1:var(--monster-color-cinnamon-6);--monster-color-primary-2:var(--monster-color-cinnamon-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-cinnamon-1);--monster-bg-color-primary-2:var(--monster-color-cinnamon-2);--monster-bg-color-primary-3:var(--monster-color-cinnamon-3);--monster-bg-color-primary-4:var(--monster-color-cinnamon-6);--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);--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);--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);--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);--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);--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);--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);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--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;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--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:1px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}@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);--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);--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);--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);--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);--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);--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);--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);--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)}} 
 }`, 0);
 } catch (e) {
   addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");