@schukai/monster 4.148.8 → 4.149.0

package/source/components/state/stylesheet/state.mjs

@@ -25,7 +25,13 @@ try {
 	StateStyleSheet.insertRule(
 		`
 @layer state {
-.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-0{border-width:0;border-radius:0;border-style: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-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.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-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.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)}[data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}div{text-align:center}::slotted(:empty:not(img)){display:none}slot{display:flex;flex-direction:column;justify-content:center;align-items:center}::slotted(svg[slot=visual]){height:40vmin;width:auto;min-height:200px}::slotted(h1){font-size:3rem;line-height:1.15;margin:4rem 0 1.5rem;font-weight:400;text-align:center}::slotted(h2){font-size:2.5rem;line-height:1.2;margin:4rem 0 1.5rem;font-weight:400;text-align:center}::slotted(h3){font-size:2rem;line-height:1.25;margin:4rem 0 1.25rem;font-weight:400;text-align:center}::slotted(h4){font-size:1.5rem;line-height:1.3;margin:4rem 0 1.25rem;font-weight:400;text-align:center}::slotted(h5){font-size:1.4rem;line-height:1.3;margin:4rem 0 1.25rem;font-weight:bolder;text-align:center}::slotted(h6){font-size:1.3rem;line-height:1.3;margin:4rem 0 1.25rem;font-weight:700;text-align:center}::slotted(p){text-align:center;font-size:1rem;line-height:1.6;font-weight:400;text-align:justify}::slotted(button[slot=action]){width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;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:.375rem .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:.4rem;background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}::slotted(button[slot=action]:hover){transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}::slotted(*){flex-grow:1}slot[name=action]{flex-direction:row;align-content:center;padding:2rem 1rem;-moz-column-gap:1rem;column-gap:1rem;place-content:center space-evenly;display:flex;justify-content:space-between;align-items:stretch}@media (max-width:480px){slot[name=action]{flex-direction:column;-moz-column-gap:0;column-gap:0;row-gap:1rem;padding:1rem 0}}
+.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.monster-border-0{border-width:0;border-radius:0;border-style: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-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.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-width:var(--monster-border-width);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style)}.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)}[data-monster-role=control]{outline:none;width:100%;box-sizing:border-box}[data-monster-role=control].flex{display:flex;flex-direction:row;align-items:center}:host{display:block;box-sizing:border-box}div{text-align:center}::slotted(:empty:not(img)){display:none}slot{display:flex;flex-direction:column;justify-content:center;align-items:center}::slotted(svg[slot=visual]){height:40vmin;width:auto;min-height:200px}::slotted([part=visual]),::slotted([slot=visual]){fill:currentColor}::slotted(h1){font-size:3rem;line-height:1.15;margin:4rem 0 1.5rem;font-weight:400;text-align:center}::slotted(h2){font-size:2.5rem;line-height:1.2;margin:4rem 0 1.5rem;font-weight:400;text-align:center}::slotted(h3){font-size:2rem;line-height:1.25;margin:4rem 0 1.25rem;font-weight:400;text-align:center}::slotted(h4){font-size:1.5rem;line-height:1.3;margin:4rem 0 1.25rem;font-weight:400;text-align:center}::slotted(h5){font-size:1.4rem;line-height:1.3;margin:4rem 0 1.25rem;font-weight:bolder;text-align:center}::slotted(h6){font-size:1.3rem;line-height:1.3;margin:4rem 0 1.25rem;font-weight:700;text-align:center}::slotted(p){text-align:center;font-size:1rem;line-height:1.6;font-weight:400;text-align:justify}::slotted(button[slot=action]){width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
+        --monster-button-border-radius,var(--monster-border-radius)
+    );border-style:var(--monster-button-border-style,var(--monster-border-style));box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
+        --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
+    );padding:var(
+        --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.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:var(--monster-button-justify-content,center);gap:.4rem;background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}::slotted(button[slot=action]:hover){transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}::slotted(*){flex-grow:1}slot[name=action]{flex-direction:row;align-content:center;padding:2rem 1rem;-moz-column-gap:1rem;column-gap:1rem;place-content:center space-evenly;display:flex;justify-content:space-between;align-items:stretch}@media (max-width:480px){slot[name=action]{flex-direction:column;-moz-column-gap:0;column-gap:0;row-gap:1rem;padding:1rem 0}}
 }`,
 		0,
 	);

package/source/components/style/button.css

@@ -1,206 +1,62 @@
 /** generated from button.pcss **/
-button {
-	background-color: var(--monster-bg-color-primary-1);
-	color: var(--monster-color-primary-1);
-}
-.monster-button-primary,
-button {
-	width: -webkit-fill-available;
-	width: -moz-available;
-	width: stretch;
-	font-size: 1rem;
-	font-weight: 400;
-	line-height: 1.5;
-	text-align: center;
-	text-decoration: none;
-	vertical-align: middle;
-	cursor: pointer;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-	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);
-}
-.monster-button-secondary {
-	border-width: var(--monster-border-width);
-	border-radius: var(--monster-border-radius);
-	border-style: var(--monster-border-style);
-	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 {
-	width: -webkit-fill-available;
-	width: -moz-available;
-	width: stretch;
-	font-size: 1rem;
-	font-weight: 400;
-	line-height: 1.5;
-	text-align: center;
-	text-decoration: none;
-	vertical-align: middle;
-	cursor: pointer;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-	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 {
-	border-width: var(--monster-border-width);
-	border-radius: var(--monster-border-radius);
-	border-style: var(--monster-border-style);
-	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 {
-	border-width: var(--monster-border-width);
-	border-radius: var(--monster-border-radius);
-	border-style: var(--monster-border-style);
-	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 {
-	width: -webkit-fill-available;
-	width: -moz-available;
-	width: stretch;
-	font-size: 1rem;
-	font-weight: 400;
-	line-height: 1.5;
-	text-align: center;
-	text-decoration: none;
-	vertical-align: middle;
-	cursor: pointer;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-	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 {
-	border-width: var(--monster-border-width);
-	border-radius: var(--monster-border-radius);
-	border-style: var(--monster-border-style);
-	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 {
-	width: -webkit-fill-available;
-	width: -moz-available;
-	width: stretch;
-	font-size: 1rem;
-	font-weight: 400;
-	line-height: 1.5;
-	text-align: center;
-	text-decoration: none;
-	vertical-align: middle;
-	cursor: pointer;
-	-webkit-user-select: none;
-	-moz-user-select: none;
-	user-select: none;
-	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);
-}
-button:disabled {
-	cursor: not-allowed;
-}
-button:active {
-	transition:
-		background 0.8s,
-		color 0.25s 0.0833333333s;
-	box-shadow: var(--monster-box-shadow-2);
-	z-index: var(--monster-z-index-outline);
-}
-.monster-button-bar,
-.monster-button-group {
-	display: flex;
-	justify-content: space-between;
-	align-content: center;
-	flex-wrap: nowrap;
-	flex-direction: row;
-	align-items: stretch;
-}
-.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);
-	}
-}
+button{background-color:var(
+        --monster-button-background-color,var(--monster-bg-color-primary-1)
+    );color:var(--monster-button-color,var(--monster-color-primary-1))}.monster-button-primary,button{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
+        --monster-button-border-radius,var(--monster-border-radius)
+    );border-style:var(--monster-button-border-style,var(--monster-border-style));box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
+        --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
+    );padding:var(
+        --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.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:var(--monster-button-justify-content,center);gap:.4rem}.monster-button-primary{color:var(--monster-button-color,var(--monster-color-primary-4));background-color:var(
+        --monster-button-background-color,var(--monster-bg-color-primary-4)
+    );border-color:var(
+        --monster-button-border-color,var(--monster-bg-color-primary-4)
+    )}.monster-button-secondary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
+        --monster-button-border-radius,var(--monster-border-radius)
+    );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-color-secondary-4));background-color:var(
+        --monster-button-background-color,var(--monster-bg-color-secondary-4)
+    );border-color:var(
+        --monster-button-border-color,var(--monster-bg-color-secondary-4)
+    )}.monster-button-secondary,.monster-button-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
+        --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
+    );padding:var(
+        --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.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:var(--monster-button-justify-content,center);gap:.4rem}.monster-button-tertiary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
+        --monster-button-border-radius,var(--monster-border-radius)
+    );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-color-tertiary-4));background-color:var(
+        --monster-button-background-color,var(--monster-bg-color-tertiary-4)
+    );border-color:var(
+        --monster-button-border-color,var(--monster-bg-color-tertiary-4)
+    )}.monster-button-destructive{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
+        --monster-button-border-radius,var(--monster-border-radius)
+    );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-color-destructive-1));background-color:var(
+        --monster-button-background-color,var(--monster-bg-color-destructive-1)
+    );border-color:var(
+        --monster-button-border-color,var(--monster-bg-color-destructive-1)
+    )}.monster-button-destructive,.monster-button-outline-primary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
+        --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
+    );padding:var(
+        --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.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:var(--monster-button-justify-content,center);gap:.4rem}.monster-button-outline-primary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
+        --monster-button-border-radius,var(--monster-border-radius)
+    );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-bg-color-primary-4));background-color:var(
+        --monster-button-background-color,var(--monster-color-primary-4)
+    );border-color:var(
+        --monster-button-border-color,var(--monster-bg-color-primary-4)
+    )}.monster-button-outline-secondary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
+        --monster-button-border-radius,var(--monster-border-radius)
+    );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-bg-color-secondary-4));background-color:var(
+        --monster-button-background-color,var(--monster-color-secondary-4)
+    );border-color:var(
+        --monster-button-border-color,var(--monster-bg-color-secondary-4)
+    )}.monster-button-outline-secondary,.monster-button-outline-tertiary{width:-webkit-fill-available;width:-moz-available;width:stretch;font-size:1rem;font-weight:400;line-height:1.5;text-align:var(--monster-button-text-align,center);text-decoration:none;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;box-shadow:var(--monster-button-box-shadow,var(--monster-box-shadow-1));min-height:var(
+        --monster-button-min-block-size,var(--monster-control-min-block-size,auto)
+    );padding:var(
+        --monster-button-padding,var(--monster-control-padding-block,.375rem) var(--monster-control-padding-inline,.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:var(--monster-button-justify-content,center);gap:.4rem}.monster-button-outline-tertiary{border-width:var(--monster-button-border-width,var(--monster-border-width));border-radius:var(
+        --monster-button-border-radius,var(--monster-border-radius)
+    );border-style:var(--monster-button-border-style,var(--monster-border-style));color:var(--monster-button-color,var(--monster-bg-color-tertiary-4));background-color:var(
+        --monster-button-background-color,var(--monster-color-tertiary-4)
+    );border-color:var(
+        --monster-button-border-color,var(--monster-bg-color-tertiary-4)
+    )}button:hover{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2)}button:disabled{cursor:not-allowed}button:active{transition:background .8s,color .25s .0833333333s;box-shadow:var(--monster-box-shadow-2);z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{display:flex;justify-content:space-between;align-content:center;flex-wrap:nowrap;flex-direction:row;align-items:stretch}.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-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px);z-index:var(--monster-z-index-outline)}

package/source/components/style/button.pcss

@@ -3,50 +3,102 @@
 
 button {
     @mixin button;
-    background-color: var(--monster-bg-color-primary-1);
-    color: var(--monster-color-primary-1);
+    background-color: var(
+        --monster-button-background-color,
+        var(--monster-bg-color-primary-1)
+    );
+    color: var(--monster-button-color, var(--monster-color-primary-1));
 }
 
 .monster-button-primary {
     @mixin button;
-    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-button-color, var(--monster-color-primary-4));
+    background-color: var(
+        --monster-button-background-color,
+        var(--monster-bg-color-primary-4)
+    );
+    border-color: var(
+        --monster-button-border-color,
+        var(--monster-bg-color-primary-4)
+    );
 }
 
 .monster-button-secondary {
     @mixin button;
-    color: var(--monster-color-secondary-4);
-    background-color: var(--monster-bg-color-secondary-4);
-    border-color: var(--monster-bg-color-secondary-4);
+    color: var(--monster-button-color, var(--monster-color-secondary-4));
+    background-color: var(
+        --monster-button-background-color,
+        var(--monster-bg-color-secondary-4)
+    );
+    border-color: var(
+        --monster-button-border-color,
+        var(--monster-bg-color-secondary-4)
+    );
 }
 
 .monster-button-tertiary {
     @mixin button;
-    color: var(--monster-color-tertiary-4);
-    background-color: var(--monster-bg-color-tertiary-4);
-    border-color: var(--monster-bg-color-tertiary-4);
+    color: var(--monster-button-color, var(--monster-color-tertiary-4));
+    background-color: var(
+        --monster-button-background-color,
+        var(--monster-bg-color-tertiary-4)
+    );
+    border-color: var(
+        --monster-button-border-color,
+        var(--monster-bg-color-tertiary-4)
+    );
+}
+
+.monster-button-destructive {
+    @mixin button;
+    color: var(--monster-button-color, var(--monster-color-destructive-1));
+    background-color: var(
+        --monster-button-background-color,
+        var(--monster-bg-color-destructive-1)
+    );
+    border-color: var(
+        --monster-button-border-color,
+        var(--monster-bg-color-destructive-1)
+    );
 }
 
 .monster-button-outline-primary {
     @mixin button;
-    color: var(--monster-bg-color-primary-4);
-    background-color: var(--monster-color-primary-4);
-    border-color: var(--monster-bg-color-primary-4);
+    color: var(--monster-button-color, var(--monster-bg-color-primary-4));
+    background-color: var(
+        --monster-button-background-color,
+        var(--monster-color-primary-4)
+    );
+    border-color: var(
+        --monster-button-border-color,
+        var(--monster-bg-color-primary-4)
+    );
 }
 
 .monster-button-outline-secondary {
     @mixin button;
-    color: var(--monster-bg-color-secondary-4);
-    background-color: var(--monster-color-secondary-4);
-    border-color: var(--monster-bg-color-secondary-4);
+    color: var(--monster-button-color, var(--monster-bg-color-secondary-4));
+    background-color: var(
+        --monster-button-background-color,
+        var(--monster-color-secondary-4)
+    );
+    border-color: var(
+        --monster-button-border-color,
+        var(--monster-bg-color-secondary-4)
+    );
 }
 
 .monster-button-outline-tertiary {
     @mixin button;
-    color: var(--monster-bg-color-tertiary-4);
-    background-color: var(--monster-color-tertiary-4);
-    border-color: var(--monster-bg-color-tertiary-4);
+    color: var(--monster-button-color, var(--monster-bg-color-tertiary-4));
+    background-color: var(
+        --monster-button-background-color,
+        var(--monster-color-tertiary-4)
+    );
+    border-color: var(
+        --monster-button-border-color,
+        var(--monster-bg-color-tertiary-4)
+    );
 }
 
 button:hover {
@@ -92,19 +144,11 @@ button:active {
     
 }
 
-button:focus {
-    outline: 1px dashed var(--monster-color-selection-4);
-    outline-offset: 2px;
+button:focus-visible {
+    outline:
+        var(--monster-focus-ring-width, 2px)
+        var(--monster-focus-ring-style, solid)
+        var(--monster-focus-ring-color, currentColor);
+    outline-offset: var(--monster-focus-ring-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);
-    }
-
-}
-

package/source/components/style/common.css

@@ -1,171 +1,2 @@
 /** generated from common.pcss **/
-a,
-abbr,
-acronym,
-address,
-applet,
-article,
-aside,
-audio,
-b,
-big,
-blockquote,
-body,
-canvas,
-caption,
-center,
-cite,
-code,
-dd,
-del,
-details,
-dfn,
-div,
-dl,
-dt,
-em,
-embed,
-fieldset,
-figcaption,
-figure,
-footer,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-header,
-hgroup,
-html,
-i,
-iframe,
-img,
-ins,
-kbd,
-label,
-legend,
-li,
-mark,
-menu,
-nav,
-object,
-ol,
-output,
-p,
-pre,
-q,
-ruby,
-s,
-samp,
-section,
-small,
-span,
-strike,
-strong,
-sub,
-summary,
-sup,
-table,
-tbody,
-td,
-tfoot,
-th,
-thead,
-time,
-tr,
-tt,
-u,
-ul,
-var,
-video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font-size: 100%;
-	font: inherit;
-	vertical-align: baseline;
-}
-* {
-	box-sizing: border-box;
-	font-family: var(
-		--monster-font-family,
-		-apple-system,
-		BlinkMacSystemFont,
-		"Segoe UI",
-		Roboto,
-		Oxygen-Sans,
-		Ubuntu,
-		Cantarell,
-		"Helvetica Neue",
-		sans-serif
-	);
-}
-.visible {
-	tvisibility: visible !important;
-}
-.invisible {
-	visibility: hidden !important;
-}
-.hidden {
-	display: none !important;
-}
-.inline {
-	display: inline !important;
-}
-.block {
-	display: block !important;
-}
-.flex {
-	display: flex !important;
-}
-[data-monster-role="control"] {
-	outline: none;
-}
-div[data-monster-role="popper"] {
-	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]) {
-	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]) * {
-	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 {
-	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;
-	pointer-events: none;
-	opacity: 0.55;
-}
-input:focus-visible {
-	outline: none;
-}
-body:focus-visible {
-	outline: none;
-}
-:focus-visible {
-	outline: none;
-}
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}*{box-sizing:border-box;font-family:var(--monster-font-family,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif)}.visible{tvisibility:visible!important}.invisible{visibility:hidden!important}.hidden{display:none!important}.inline{display:inline!important}.block{display:block!important}.flex{display:flex!important}[data-monster-role=control]{outline:none}div[data-monster-role=popper]{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]){border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46.3%,.3));color:var(--monster-color-primary-disabled-1);background-color:var(--monster-bg-color-primary-disabled-1);cursor:not-allowed}:host([disabled]) *{border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46.3%,.3));color:var(--monster-color-primary-disabled-1);background-color:var(--monster-bg-color-primary-disabled-1);cursor:not-allowed}:disabled{border-color:var(--monster-color-primary-disabled-1,hsla(0,0%,46.3%,.3));color:var(--monster-color-primary-disabled-1);background-color:var(--monster-bg-color-primary-disabled-1);cursor:not-allowed;pointer-events:none;opacity:.55}:focus-visible{outline:var(--monster-focus-ring-width,2px) var(--monster-focus-ring-style,solid) var(--monster-focus-ring-color,currentColor);outline-offset:var(--monster-focus-ring-offset,2px)}

package/source/components/style/common.pcss

@@ -100,14 +100,10 @@ div[data-monster-role=popper] {
     opacity: .55;
 }
 
-input:focus-visible {
-    outline: none;
-}
-
-body:focus-visible {
-    outline: none;
-}
-
 :focus-visible {
-    outline: none;
+    outline:
+        var(--monster-focus-ring-width, 2px)
+        var(--monster-focus-ring-style, solid)
+        var(--monster-focus-ring-color, currentColor);
+    outline-offset: var(--monster-focus-ring-offset, 2px);
 }