@schukai/monster 4.137.8 → 4.138.0

package/source/components/style/button.css

@@ -5,177 +5,181 @@ 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), sans-serif;
+	width: -webkit-fill-available;
+	width: -moz-available;
+	width: stretch;
 	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;
+	vertical-align: middle;
+	cursor: pointer;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	vertical-align: middle;
-	width: -webkit-fill-available;
-	width: -moz-available;
-	width: stretch;
+	border-width: var(--monster-border-width);
+	border-radius: var(--monster-border-radius);
+	border-style: var(--monster-border-style);
+	box-shadow: var(--monster-box-shadow-1);
+	padding: 0.375rem 0.75rem;
+	outline: none;
+	background-position: 50%;
+	position: relative;
+	overflow: hidden;
+	font-family: var(--monster-font-family), sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.4rem;
 }
 .monster-button-primary {
+	color: var(--monster-color-primary-4);
 	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-width: var(--monster-border-width);
 	border-radius: var(--monster-border-radius);
 	border-style: var(--monster-border-style);
-	border-width: var(--monster-border-width);
 	color: var(--monster-color-secondary-4);
+	background-color: var(--monster-bg-color-secondary-4);
+	border-color: var(--monster-bg-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), sans-serif;
+	width: -webkit-fill-available;
+	width: -moz-available;
+	width: stretch;
 	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;
+	vertical-align: middle;
+	cursor: pointer;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	vertical-align: middle;
-	width: -webkit-fill-available;
-	width: -moz-available;
-	width: stretch;
+	box-shadow: var(--monster-box-shadow-1);
+	padding: 0.375rem 0.75rem;
+	outline: none;
+	background-position: 50%;
+	position: relative;
+	overflow: hidden;
+	font-family: var(--monster-font-family), sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.4rem;
 }
 .monster-button-tertiary {
-	background-color: var(--monster-bg-color-tertiary-4);
-	border-color: var(--monster-bg-color-tertiary-4);
+	border-width: var(--monster-border-width);
 	border-radius: var(--monster-border-radius);
 	border-style: var(--monster-border-style);
-	border-width: var(--monster-border-width);
 	color: var(--monster-color-tertiary-4);
+	background-color: var(--monster-bg-color-tertiary-4);
+	border-color: var(--monster-bg-color-tertiary-4);
 }
 .monster-button-outline-primary {
-	background-color: var(--monster-color-primary-4);
-	border-color: var(--monster-bg-color-primary-4);
+	border-width: var(--monster-border-width);
 	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);
+	background-color: var(--monster-color-primary-4);
+	border-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), sans-serif;
+	width: -webkit-fill-available;
+	width: -moz-available;
+	width: stretch;
 	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;
+	vertical-align: middle;
+	cursor: pointer;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	vertical-align: middle;
-	width: -webkit-fill-available;
-	width: -moz-available;
-	width: stretch;
+	box-shadow: var(--monster-box-shadow-1);
+	padding: 0.375rem 0.75rem;
+	outline: none;
+	background-position: 50%;
+	position: relative;
+	overflow: hidden;
+	font-family: var(--monster-font-family), sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.4rem;
 }
 .monster-button-outline-secondary {
-	background-color: var(--monster-color-secondary-4);
-	border-color: var(--monster-bg-color-secondary-4);
+	border-width: var(--monster-border-width);
 	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);
+	background-color: var(--monster-color-secondary-4);
+	border-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), sans-serif;
+	width: -webkit-fill-available;
+	width: -moz-available;
+	width: stretch;
 	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;
+	vertical-align: middle;
+	cursor: pointer;
 	-webkit-user-select: none;
 	-moz-user-select: none;
 	user-select: none;
-	vertical-align: middle;
-	width: -webkit-fill-available;
-	width: -moz-available;
-	width: stretch;
+	border-width: var(--monster-border-width);
+	border-radius: var(--monster-border-radius);
+	border-style: var(--monster-border-style);
+	box-shadow: var(--monster-box-shadow-1);
+	padding: 0.375rem 0.75rem;
+	outline: none;
+	background-position: 50%;
+	position: relative;
+	overflow: hidden;
+	font-family: var(--monster-font-family), sans-serif;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.4rem;
+	color: var(--monster-bg-color-tertiary-4);
+	background-color: var(--monster-color-tertiary-4);
+	border-color: var(--monster-bg-color-tertiary-4);
 }
 button:hover {
+	transition:
+		background 0.8s,
+		color 0.25s 0.0833333333s;
 	box-shadow: var(--monster-box-shadow-2);
-	transition: background .8s, color .25s .0833333333s;
 }
 button:disabled {
 	cursor: not-allowed;
 }
 button:active {
+	transition:
+		background 0.8s,
+		color 0.25s 0.0833333333s;
 	box-shadow: var(--monster-box-shadow-2);
-	transition: background .8s, color .25s .0833333333s;
 	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;
+	align-content: center;
+	flex-wrap: nowrap;
+	flex-direction: row;
+	align-items: stretch;
 }
 .monster-button-group {
 	box-sizing: border-box;

package/source/components/style/card.css

@@ -5,34 +5,36 @@
 	grid-gap: 22px;
 }
 .cards .card {
-	align-content: stretch;
-	align-items: stretch;
+	display: flex;
 	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;
+	box-sizing: border-box;
+	align-items: stretch;
 	flex-direction: column;
-	flex-wrap: nowrap;
 	justify-content: space-between;
+	align-content: stretch;
+	flex-wrap: nowrap;
+	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);
 	overflow: hidden;
 }
 :is(.cards .card) img {
-	display: block;
-	margin-left: 0;
 	-o-object-fit: scale-down;
 	object-fit: scale-down;
-	overflow: hidden;
+	display: block;
 	padding: 0;
+	margin-left: 0;
 	width: 101%;
+	overflow: hidden;
 }
 :is(:is(.cards .card) img):hover {
+	transition:
+		background 0.8s,
+		color 0.25s 0.0833333333s;
 	box-shadow: var(--monster-box-shadow-2);
 	transform: scale(1.05);
-	transition: background .8s, color .25s .0833333333s;
 }
 :is(.cards .card) h1,
 :is(.cards .card) h2,
@@ -42,8 +44,8 @@
 :is(.cards .card) h6,
 :is(.cards .card) p {
 	margin: 0;
-	padding-left: 1rem;
 	padding-right: 1rem;
+	padding-left: 1rem;
 }
 :is(.cards .card) h1:last-child,
 :is(.cards .card) h2:last-child,
@@ -139,12 +141,16 @@
 		:is(.cards .card) button:last-child,
 		:is(.cards .card) .button:last-child
 	):hover {
+	transition:
+		background 0.8s,
+		color 0.25s 0.0833333333s;
 	box-shadow: var(--monster-box-shadow-2);
 	transform: scale(1.05);
-	transition: background .8s, color .25s .0833333333s;
 }
 .card:is(.cards .card):hover {
+	transition:
+		background 0.8s,
+		color 0.25s 0.0833333333s;
 	box-shadow: var(--monster-box-shadow-2);
-	transition: background .8s, color .25s .0833333333s;
 	z-index: var(--monster-z-index-outline);
 }

package/source/components/style/common.css

@@ -80,11 +80,11 @@ u,
 ul,
 var,
 video {
+	margin: 0;
+	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
-	margin: 0;
-	padding: 0;
 	vertical-align: baseline;
 }
 * {
@@ -124,32 +124,41 @@ video {
 	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;
+	border: var(--monster-border-width, 1px) solid var(--monster-color-primary-1);
 	padding: 0;
 	z-index: 10;
+	background-color: #fff;
 }
 :host([disabled]) {
-	background-color: var(--monster-bg-color-primary-disabled-1);
-	border-color: var(--monster-color-primary-disabled-1, hsla(0, 0%, 46.3%, 0.3));
+	border-color: var(
+		--monster-color-primary-disabled-1,
+		hsla(0, 0%, 46.3%, 0.3)
+	);
 	color: var(--monster-color-primary-disabled-1);
+	background-color: var(--monster-bg-color-primary-disabled-1);
 	cursor: not-allowed;
 }
 :host([disabled]) * {
-	background-color: var(--monster-bg-color-primary-disabled-1);
-	border-color: var(--monster-color-primary-disabled-1, hsla(0, 0%, 46.3%, 0.3));
+	border-color: var(
+		--monster-color-primary-disabled-1,
+		hsla(0, 0%, 46.3%, 0.3)
+	);
 	color: var(--monster-color-primary-disabled-1);
+	background-color: var(--monster-bg-color-primary-disabled-1);
 	cursor: not-allowed;
 }
 :disabled {
-	background-color: var(--monster-bg-color-primary-disabled-1);
-	border-color: var(--monster-color-primary-disabled-1, hsla(0, 0%, 46.3%, 0.3));
+	border-color: var(
+		--monster-color-primary-disabled-1,
+		hsla(0, 0%, 46.3%, 0.3)
+	);
 	color: var(--monster-color-primary-disabled-1);
+	background-color: var(--monster-bg-color-primary-disabled-1);
 	cursor: not-allowed;
-	opacity: 0.55;
 	pointer-events: none;
+	opacity: 0.55;
 }
 input:focus-visible {
 	outline: none;

package/source/components/style/control.css

@@ -1,15 +1,15 @@
 /** generated from control.pcss **/
 [data-monster-role="control"] {
-	box-sizing: border-box;
 	outline: none;
 	width: 100%;
+	box-sizing: border-box;
 }
 [data-monster-role="control"].flex {
-	align-items: center;
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 }
 :host {
-	box-sizing: border-box;
 	display: block;
+	box-sizing: border-box;
 }