@schukai/monster 3.51.4 → 3.52.0

package/source/components/state/state.mjs

@@ -0,0 +1,131 @@
+/**
+ * Copyright 2022 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { StateStyleSheet } from "./stylesheet/state.mjs";
+
+export { State };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+export const stateElementSymbol = Symbol("state");
+
+/**
+ * States tell users that there’s a state. that s it!
+ *
+ * <img src="./images/state.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * You can create this control either by specifying the HTML tag <monster-state />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-state');` method.
+ *
+ * ```html
+ * <monster-state></monster-state>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import {State} from '@schukai/component-state/source/state.js';
+ * document.createElement('monster-state');
+ * ```
+ *
+ * @externalExample ../../../example/components/state/state.mjs
+ * @startuml state.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- State
+ * @enduml
+ *
+ * @since 1.5.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.State
+ * @summary States tell users that there’s a state. that s it!
+ */
+class State extends CustomControl {
+	/**
+	 *
+	 * @return {Monster.Components.State.State}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-state/state");
+	}
+
+	/**
+	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} content
+	 * @property {string} content.visual Visual content
+	 * @property {string} content.content Content
+	 * @property {string} content.action Action
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			content: {
+				visual: '<slot name="visual"></slot>',
+				content: "<slot></slot>",
+				action: '<slot name="action"></slot>',
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-state";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [StateStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div part="control">
+            <div part="visual" data-monster-replace="path:content.visual"></div>
+            <div part="content" data-monster-replace="path:content.content"></div>
+            <div part="action" data-monster-replace="path:content.action"></div>
+        </div>
+    `;
+}
+
+registerCustomElement(State);

package/source/components/state/style/log.pcss

@@ -0,0 +1,111 @@
+@import "../../style/control.pcss";
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/control.pcss";
+@import "../../style/mixin/media.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/mixin/hover.pcss";
+
+[data-monster-role=entries] {
+    overflow: hidden;
+    padding: 10px 0 40px 60px;
+
+    & ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        position: relative;
+        top: 0
+    }
+
+    & ul:last-of-type {
+        top: 2rem;
+    }
+
+    & ul:before {
+        content: "";
+        display: block;
+        width: 0;
+        height: 100%;
+        border: 1px dashed var(--monster-color-primary-2);
+        position: absolute;
+        top: 0;
+        left: 30px
+    }
+
+    & ul li {
+        margin: 20px 60px 60px;
+        position: relative;
+        padding: 10px 20px;
+        color: var(--monster-color-primary-2);
+        background-color: var(--monster-bg-color-primary-2);
+        border-radius: 5px;
+    }
+
+
+    & ul li > span {
+        content: "";
+        display: block;
+        width: 0;
+        height: 100%;
+        border: 1px solid var(--monster-color-primary-2);
+        position: absolute;
+        top: 0;
+        left: -30px
+    }
+
+    & ul li > span:before, & ul li > span:after {
+        content: "";
+        display: block;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background: var(--monster-bg-color-primary-2);
+        border: 2px solid var(--monster-color-primary-2);
+        position: absolute;
+        left: -7.5px
+    }
+
+    & ul li > span:before {
+        top: -10px
+    }
+
+    & ul li > span:after {
+        top: 95%
+    }
+
+    & .title {
+        text-transform: uppercase;
+        margin-bottom: 5px
+    }
+
+    & .message:first-letter {
+    }
+
+    & .user {
+        margin-top: 10px;
+        font-style: italic;
+        text-align: right;
+        margin-right: 20px;
+        font-size: 0.8rem;
+    }
+
+    & .datetime span {
+        position: absolute;
+        left: -100px;
+        color: var(--monster-color-primary-1);
+        background-color: var(--monster-bg-color-primary-1);
+        font-size: 0.5rem;
+    }
+
+    & .datetime span:first-child {
+        top: -16px
+    }
+
+    & .datetime span:last-child {
+        top: 94%
+    }
+
+
+}

package/source/components/state/style/state.pcss

@@ -0,0 +1,113 @@
+@import "../../style/display.pcss";
+@import "../../style/border.pcss";
+@import "../../style/control.pcss";
+@import "../../style/mixin/media.pcss";
+@import "../../style/mixin/typography.pcss";
+@import "../../style/mixin/button.pcss";
+@import "../../style/mixin/hover.pcss";
+
+div {
+    text-align: center;
+}
+
+::slotted(:empty:not(img)) {
+    display: none;
+}
+
+slot {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+}
+
+slot[name=visual] {
+}
+
+::slotted(svg[slot=visual]) {
+    height: 40vmin;
+    width: auto;
+    min-height: 200px;
+}
+
+::slotted(h1) {
+    @mixin h1;
+    text-align: center;
+}
+
+::slotted(h2) {
+    @mixin h2;
+    text-align: center;
+}
+
+::slotted(h3) {
+    @mixin h3;
+    text-align: center;
+}
+
+::slotted(h4) {
+    @mixin h4;
+    text-align: center;
+}
+
+::slotted(h5) {
+    @mixin h5;
+    text-align: center;
+}
+
+::slotted(h6) {
+    @mixin h6;
+    text-align: center;
+}
+
+::slotted(p) {
+    text-align: center;
+    @mixin paragraph;
+}
+
+::slotted(button[slot=action]) {
+    @mixin button;
+}
+
+/**
+ here as separate mixin, because nested don't work with slotted
+ https://github.com/postcss/postcss-nested/issues/148
+ */
+::slotted(button[slot=action]:hover) {
+    @mixin box-hover;
+}
+
+::slotted(*) {
+    flex-grow: 1;
+}
+
+slot[name=action] {
+    flex-direction: row;
+    align-content: center;
+    padding: 2rem 1rem;
+    column-gap: 1rem;
+
+    place-content: center space-evenly;
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+}
+
+
+/*
+the rule below don't work in chrome nor firefox
+@custom-media --viewport-medium (min-width: 768px);
+Therefore I use the media query below 
+*/
+@mixin viewport0 {
+    slot[name=action] {
+        flex-direction: column;
+        column-gap: 0;
+        row-gap: 1rem;
+        padding: 1rem 0;
+    }
+}
+
+
+

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+
+export { LogStyleSheet };
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const LogStyleSheet = new CSSStyleSheet();
+
+try {
+	LogStyleSheet.insertRule(
+		`
+@layer log { 
+[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}.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-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-shadow:none;border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=entries]{overflow:hidden;padding:10px 0 40px 60px}[data-monster-role=entries] ul{list-style-type:none;margin:0;padding:0;position:relative;top:0}[data-monster-role=entries] ul:last-of-type{top:2rem}[data-monster-role=entries] ul:before{border:1px dashed var(--monster-color-primary-2);content:\"\";display:block;height:100%;left:30px;position:absolute;top:0;width:0}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-2);border-radius:5px;color:var(--monster-color-primary-2);margin:20px 60px 60px;padding:10px 20px;position:relative}[data-monster-role=entries] ul li>span{border:1px solid var(--monster-color-primary-2);content:\"\";display:block;height:100%;left:-30px;position:absolute;top:0;width:0}[data-monster-role=entries] ul li>span:after,[data-monster-role=entries] ul li>span:before{background:var(--monster-bg-color-primary-2);border:2px solid var(--monster-color-primary-2);border-radius:50%;content:\"\";display:block;height:10px;left:-7.5px;position:absolute;width:10px}[data-monster-role=entries] ul li>span:before{top:-10px}[data-monster-role=entries] ul li>span:after{top:95%}[data-monster-role=entries] .title{margin-bottom:5px;text-transform:uppercase}[data-monster-role=entries] .user{font-size:.8rem;font-style:italic;margin-right:20px;margin-top:10px;text-align:right}[data-monster-role=entries] .datetime span{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);font-size:.5rem;left:-100px;position:absolute}[data-monster-role=entries] .datetime span:first-child{top:-16px}[data-monster-role=entries] .datetime span:last-child{top:94%} 
+}`,
+		0,
+	);
+} catch (e) {
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
+}

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
+
+export { StateStyleSheet };
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const StateStyleSheet = new CSSStyleSheet();
+
+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-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-shadow:none;border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-shadow:var(--monster-box-shadow-1);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}div{text-align:center}::slotted(:empty:not(img)){display:none}slot{align-items:center;display:flex;flex-direction:column;justify-content:center}::slotted(svg[slot=visual]){height:40vmin;min-height:200px;width:auto}::slotted(h1){font-size:3rem;font-weight:400;line-height:1;margin-bottom:1.25rem;text-align:center}::slotted(h2){font-size:2.5rem;font-weight:400;line-height:calc(4px + 2ex);margin-bottom:1.25rem;text-align:center}::slotted(h3){font-size:2rem;font-weight:400;line-height:calc(4px + 2ex);margin-bottom:1.25rem;text-align:center}::slotted(h4){font-size:1.5rem;font-weight:400;line-height:calc(4px + 2ex);margin-bottom:1.25rem;text-align:center}::slotted(h5){font-size:1.4rem;font-weight:bolder;line-height:calc(4px + 2ex);margin-bottom:1.25rem;text-align:center}::slotted(h6){font-size:1.3rem;font-weight:700;line-height:calc(4px + 2ex);margin-bottom:1.25rem;text-align:center}::slotted(p){font-size:1rem;font-weight:400;line-height:1.4;text-align:center}::slotted(button[slot=action]){align-items:center;background-position:50%;border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:inline-block;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}::slotted(button[slot=action]:hover){box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}::slotted(*){flex-grow:1}slot[name=action]{align-content:center;align-items:stretch;-moz-column-gap:1rem;column-gap:1rem;display:flex;flex-direction:row;padding:2rem 1rem;place-content:center space-evenly;justify-content:space-between}@media (max-width:480px){slot[name=action]{-moz-column-gap:0;column-gap:0;flex-direction:column;padding:1rem 0;row-gap:1rem}} 
+}`,
+		0,
+	);
+} catch (e) {
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
+}

package/source/components/style/badge.pcss

@@ -0,0 +1,92 @@
+@import "mixin/badge.pcss";
+
+.monster-badge-primary {
+    @mixin badge;
+    color: var(--monster-color-primary-4);
+    background-color: var(--monster-bg-color-primary-4);
+}
+
+.monster-badge-primary-pill {
+    @mixin badge;
+    @mixin pill;
+    color: var(--monster-color-primary-4);
+    background-color: var(--monster-bg-color-primary-4);
+}
+
+.monster-badge-secondary {
+    @mixin badge;
+    background-color: var(--monster-bg-color-secondary-3);
+    color: var(--monster-color-secondary-3);
+}
+
+.monster-badge-secondary-pill {
+    @mixin badge;
+    @mixin pill;
+    background-color: var(--monster-bg-color-secondary-3);
+    color: var(--monster-color-secondary-3);
+}
+
+.monster-badge-tertiary {
+    @mixin badge;
+    background-color: var(--monster-bg-color-tertiary-3);
+    color: var(--monster-color-tertiary-3);
+}
+
+.monster-badge-tertiary-pill {
+    @mixin badge;
+    @mixin pill;
+    background-color: var(--monster-bg-color-tertiary-3);
+    color: var(--monster-color-tertiary-3);
+}
+
+.monster-badge-destructive {
+    @mixin badge;
+    background-color: var(--monster-bg-color-destructive-1);
+    color: var(--monster-color-destructive-1);
+}
+
+.monster-badge-destructive-pill {
+    @mixin badge;
+    @mixin pill;
+    background-color: var(--monster-bg-color-destructive-1);
+    color: var(--monster-color-destructive-1);
+}
+
+.monster-badge-success {
+    @mixin badge;
+    background-color: var(--monster-bg-color-success-1);
+    color: var(--monster-color-success-1);
+}
+
+.monster-badge-success-pill {
+    @mixin badge;
+    @mixin pill;
+    background-color: var(--monster-bg-color-success-1);
+    color: var(--monster-color-success-1);
+}
+
+.monster-badge-warning {
+    @mixin badge;
+    background-color: var(--monster-bg-color-warning-1);
+    color: var(--monster-color-warning-1);
+}
+
+.monster-badge-warning-pill {
+    @mixin badge;
+    @mixin pill;
+    background-color: var(--monster-bg-color-warning-1);
+    color: var(--monster-color-warning-1);
+}
+
+.monster-badge-error {
+    @mixin badge;
+    background-color: var(--monster-bg-color-error-1);
+    color: var(--monster-color-error-1);
+}
+
+.monster-badge-error-pill {
+    @mixin badge;
+    @mixin pill;
+    background-color: var(--monster-bg-color-error-1);
+    color: var(--monster-color-error-1);
+}

package/source/components/style/border.pcss

@@ -0,0 +1,77 @@
+.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);
+    border-shadow: var(--monster-box-shadow-1);
+}
+
+.monster-border-0 {
+    border-width: 0;
+    border-radius: 0;
+    border-style: none;
+    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-width: var(--monster-border-width);
+    border-radius: var(--monster-border-radius);
+    border-style: var(--monster-border-style);
+    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-width: var(--monster-border-width);
+    border-radius: var(--monster-border-radius);
+    border-style: var(--monster-border-style);
+    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);
+}
+

package/source/components/style/button.pcss

@@ -0,0 +1,105 @@
+@import "mixin/button.pcss";
+@import "mixin/hover.pcss";
+
+button {
+    @mixin button;
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+.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);
+}
+
+button:hover {
+    @mixin box-hover;
+}
+
+button:active {
+    @mixin box-hover;
+    z-index: var(--monster-z-index-outline);
+}
+
+.monster-button-bar {
+    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;
+    display: flex;
+    align-content: center;
+    align-items: stretch;
+    flex-direction: row;
+    gap: 0;
+    justify-content: space-between;
+    margin: 1rem 0;
+    flex-wrap: nowrap;
+    
+    & > *:not(:last-child) {
+        margin-right: calc( -1 * var(--monster-border-width));
+    }
+    
+    & *: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);
+    }
+
+}
+
+