@schukai/monster 4.137.8 → 4.138.0

package/source/components/style/data-grid.css

@@ -1,12 +1,12 @@
 /** generated from data-grid.pcss **/
 .monster-data-grid-container {
-	background-color: var(--monster-bg-color-primary-2);
-	box-sizing: border-box;
-	color: var(--monster-color-primary-2);
 	display: block;
+	width: 100%;
 	overflow-x: auto;
+	background-color: var(--monster-bg-color-primary-2);
+	color: var(--monster-color-primary-2);
 	padding: 20px;
-	width: 100%;
+	box-sizing: border-box;
 }
 .monster-data-grid-container > div {
 	display: grid;
@@ -16,14 +16,14 @@
 }
 .monster-data-grid-container .col-1,
 .monster-data-grid-container .col-2 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-2 {
 	grid-column: 2;
@@ -33,14 +33,14 @@
 }
 .monster-data-grid-container .col-3,
 .monster-data-grid-container .col-4 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-4 {
 	grid-column: 4;
@@ -50,14 +50,14 @@
 }
 .monster-data-grid-container .col-5,
 .monster-data-grid-container .col-6 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-6 {
 	grid-column: 6;
@@ -67,14 +67,14 @@
 }
 .monster-data-grid-container .col-7,
 .monster-data-grid-container .col-8 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-8 {
 	grid-column: 8;
@@ -84,14 +84,14 @@
 }
 .monster-data-grid-container .col-10,
 .monster-data-grid-container .col-9 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-10 {
 	grid-column: 10;
@@ -101,14 +101,14 @@
 }
 .monster-data-grid-container .col-11,
 .monster-data-grid-container .col-12 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-12 {
 	grid-column: 12;
@@ -118,14 +118,14 @@
 }
 .monster-data-grid-container .col-13,
 .monster-data-grid-container .col-14 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-14 {
 	grid-column: 14;
@@ -135,14 +135,14 @@
 }
 .monster-data-grid-container .col-15,
 .monster-data-grid-container .col-16 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-16 {
 	grid-column: 16;
@@ -152,14 +152,14 @@
 }
 .monster-data-grid-container .col-17,
 .monster-data-grid-container .col-18 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-18 {
 	grid-column: 18;
@@ -169,14 +169,14 @@
 }
 .monster-data-grid-container .col-19,
 .monster-data-grid-container .col-20 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-20 {
 	grid-column: 20;
@@ -186,14 +186,14 @@
 }
 .monster-data-grid-container .col-21,
 .monster-data-grid-container .col-22 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-22 {
 	grid-column: 22;
@@ -203,14 +203,14 @@
 }
 .monster-data-grid-container .col-23,
 .monster-data-grid-container .col-24 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-24 {
 	grid-column: 24;
@@ -220,14 +220,14 @@
 }
 .monster-data-grid-container .col-25,
 .monster-data-grid-container .col-26 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-26 {
 	grid-column: 26;
@@ -237,14 +237,14 @@
 }
 .monster-data-grid-container .col-27,
 .monster-data-grid-container .col-28 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-28 {
 	grid-column: 28;
@@ -254,14 +254,14 @@
 }
 .monster-data-grid-container .col-29,
 .monster-data-grid-container .col-30 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-30 {
 	grid-column: 30;
@@ -271,14 +271,14 @@
 }
 .monster-data-grid-container .col-31,
 .monster-data-grid-container .col-32 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-32 {
 	grid-column: 32;
@@ -288,14 +288,14 @@
 }
 .monster-data-grid-container .col-33,
 .monster-data-grid-container .col-34 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-34 {
 	grid-column: 34;
@@ -305,14 +305,14 @@
 }
 .monster-data-grid-container .col-35,
 .monster-data-grid-container .col-36 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-36 {
 	grid-column: 36;
@@ -322,14 +322,14 @@
 }
 .monster-data-grid-container .col-37,
 .monster-data-grid-container .col-38 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-38 {
 	grid-column: 38;
@@ -339,14 +339,14 @@
 }
 .monster-data-grid-container .col-39,
 .monster-data-grid-container .col-40 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-40 {
 	grid-column: 40;
@@ -356,14 +356,14 @@
 }
 .monster-data-grid-container .col-41,
 .monster-data-grid-container .col-42 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-42 {
 	grid-column: 42;
@@ -373,14 +373,14 @@
 }
 .monster-data-grid-container .col-43,
 .monster-data-grid-container .col-44 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-44 {
 	grid-column: 44;
@@ -390,14 +390,14 @@
 }
 .monster-data-grid-container .col-45,
 .monster-data-grid-container .col-46 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-46 {
 	grid-column: 46;
@@ -407,14 +407,14 @@
 }
 .monster-data-grid-container .col-47,
 .monster-data-grid-container .col-48 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-48 {
 	grid-column: 48;
@@ -424,14 +424,14 @@
 }
 .monster-data-grid-container .col-49,
 .monster-data-grid-container .col-50 {
+	color: var(--monster-color-primary-1);
 	background-color: var(--monster-bg-color-primary-1);
 	border: none;
-	color: var(--monster-color-primary-1);
+	padding: 0.4rem;
 	display: flex;
 	font-size: 1rem;
-	font-weight: 400;
 	line-height: 1.6;
-	padding: .4rem;
+	font-weight: 400;
 }
 .monster-data-grid-container .col-50 {
 	grid-column: 50;
@@ -440,9 +440,9 @@
 	grid-column: 1 / -1;
 }
 .monster-data-grid-container .header {
-	font-size: 1rem;
 	font-weight: 600;
-	font-weight: 400;
+	margin-bottom: 0.4rem;
+	font-size: 1rem;
 	line-height: 1.6;
-	margin-bottom: .4rem;
+	font-weight: 400;
 }

package/source/components/style/floating-ui.css

@@ -1,28 +1,28 @@
 /** generated from floating-ui.pcss **/
 div[data-monster-role="popper"] {
-	align-content: center;
+	box-sizing: border-box;
+	display: none;
+	opacity: 1;
+	padding: 1.1em;
+	max-width: var(--monster-popper-max-width, calc(100vw - 2rem));
+	max-height: var(--monster-popper-max-height, calc(100vh - 2rem));
+	z-index: var(--monster-z-index-modal);
 	background: var(--monster-bg-color-primary-1);
-	border-color: var(--monster-bg-color-primary-4);
+	color: var(--monster-color-primary-1);
 	border-radius: var(--monster-border-radius);
-	border-style: var(--monster-border-style);
 	border-width: var(--monster-border-width);
+	border-style: var(--monster-border-style);
+	border-color: var(--monster-bg-color-primary-4);
 	box-shadow: var(--monster-box-shadow-1);
-	box-sizing: border-box;
-	color: var(--monster-color-primary-1);
-	display: none;
 	justify-content: space-between;
-	left: 0;
-	max-height: var(--monster-popper-max-height, calc(100vh - 2rem));
-	max-width: var(--monster-popper-max-width, calc(100vw - 2rem));
-	opacity: 1;
-	padding: 1.1em;
+	align-content: center;
+	width: -moz-max-content;
+	width: max-content;
 	position: absolute;
 	top: 0;
-	transition: opacity var(--monster-popper-fade-duration, .14s)
+	left: 0;
+	transition: opacity var(--monster-popper-fade-duration, 0.14s)
 		var(--monster-popper-fade-timing, cubic-bezier(0.2, 0, 0, 1));
-	width: -moz-max-content;
-	width: max-content;
-	z-index: var(--monster-z-index-modal);
 }
 div[data-monster-role="popper"][data-monster-appearance="opening"] {
 	opacity: 0;
@@ -36,26 +36,26 @@ div[data-monster-role="popper"][data-monster-appearance="open"] {
 	}
 }
 div[data-monster-role="popper"] > [part="content"] {
-	max-height: var(--monster-popper-content-max-height, calc(100vh - 4.2rem));
-	max-width: 100%;
 	overflow: auto;
+	max-width: 100%;
+	max-height: var(--monster-popper-content-max-height, calc(100vh - 4.2rem));
 }
 div[data-monster-role="popper"]
 	> [part="content"][data-monster-overflow-mode="horizontal"] {
-	clip-path: none;
 	overflow-x: auto;
 	overflow-y: visible;
+	clip-path: none;
 }
 div[data-monster-role="popper"]
 	> [part="content"][data-monster-overflow-mode="visible"] {
+	overflow: visible;
 	clip-path: none;
-	max-height: none;
 	max-width: none;
-	overflow: visible;
+	max-height: none;
 }
 div[data-monster-role="popper"] div[data-monster-role="arrow"] {
-	background: var(--monster-bg-color-primary-1);
-	height: calc(
+	position: absolute;
+	width: calc(
 		max(
 			var(--monster-popper-witharrrow-distance),
 			-1 *
@@ -63,9 +63,7 @@ div[data-monster-role="popper"] div[data-monster-role="arrow"] {
 		) *
 		2
 	);
-	pointer-events: none;
-	position: absolute;
-	width: calc(
+	height: calc(
 		max(
 			var(--monster-popper-witharrrow-distance),
 			-1 *
@@ -74,4 +72,6 @@ div[data-monster-role="popper"] div[data-monster-role="arrow"] {
 		2
 	);
 	z-index: -1;
+	pointer-events: none;
+	background: var(--monster-bg-color-primary-1);
 }

package/source/components/style/form.css

@@ -5,40 +5,42 @@ progress,
 select,
 textarea {
 	accent-color: var(--monster-color-secondary-2);
-	background-color: var(--monster-bg-color-primary-1);
-	border-color: var(--monster-theme-control-border-color);
-	border-radius: var(--monster-theme-control-border-radius);
-	border-style: var(--monster-theme-control-border-style);
-	border-width: var(--monster-theme-control-border-width);
 	box-sizing: border-box;
 	color: var(--monster-color-primary-1);
+	background-color: var(--monster-bg-color-primary-1);
 	font-family: inherit;
 	font-size: 100%;
 	margin: 0;
 	outline: none;
+	border-width: var(--monster-theme-control-border-width);
+	border-radius: var(--monster-theme-control-border-radius);
+	border-style: var(--monster-theme-control-border-style);
+	border-color: var(--monster-theme-control-border-color);
 }
 input,
 select,
 textarea {
+	padding: 0.4rem 0.6rem;
 	height: -moz-fit-content;
 	height: fit-content;
-	padding: .4rem .6rem;
 }
 textarea {
-	min-height: 6rem;
 	resize: vertical;
+	min-height: 6rem;
 }
 input[type="color"] {
-	height: 2rem;
+	padding: 0.1rem;
 	margin: 0;
-	padding: .1rem;
+	height: 2rem;
 	width: 2rem;
 }
 input:hover:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
 select:hover,
 textarea:hover {
+	transition:
+		background 0.8s,
+		color 0.25s 0.0833333333s;
 	box-shadow: var(--monster-box-shadow-2);
-	transition: background .8s, color .25s .0833333333s;
 }
 input:focus,
 select:focus,

package/source/components/style/host.css

@@ -1,15 +1,15 @@
 /** generated from host.pcss **/
 :host([disabled]),
 :host([disabled]) * {
+	color: var(--monster-color-primary-3, inherit);
 	background-color: var(--monster-bg-color-primary-3, inherit);
 	border-color: var(--monster-color-primary-3, inherit);
-	color: var(--monster-color-primary-3, inherit);
 }
 :disabled {
+	color: var(--monster-color-primary-3, inherit);
 	background-color: var(--monster-bg-color-primary-3, inherit);
 	border-color: var(--monster-color-primary-3, inherit);
-	color: var(--monster-color-primary-3, inherit);
 	cursor: not-allowed;
-	opacity: 0.55;
 	pointer-events: none;
+	opacity: 0.55;
 }