@schukai/monster 3.52.0 → 3.53.0

package/source/components/form/select.mjs

@@ -349,8 +349,7 @@ class Select extends CustomControl {
 	 * @since 1.2.0
 	 * @throws {Error} unsupported type
 	 */
-	set value(value) {;
-
+	set value(value) {
 		const result = convertValueToSelection.call(this, value);
 		setSelection
 			.call(this, result.selection)
@@ -558,7 +557,7 @@ class Select extends CustomControl {
 	 * @since 3.27.0
 	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
 	 */
-	click() {;
+	click() {
 		if (this.getOption("disabled") === true) {
 			return;
 		}
@@ -572,7 +571,7 @@ class Select extends CustomControl {
 	 * @since 3.27.0
 	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
 	 */
-	focus(options) {;
+	focus(options) {
 		if (this.getOption("disabled") === true) {
 			return;
 		}
@@ -591,7 +590,7 @@ class Select extends CustomControl {
 	 * The Button.blur() method removes focus from the internal button element.
 	 * @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur
 	 */
-	blur() {;
+	blur() {
 		new Processing(() => {
 			gatherState.call(this);
 			blurFilter.call(this);
@@ -608,8 +607,7 @@ class Select extends CustomControl {
 	 * @param {string|URL} url URL to fetch the options
 	 * @return {Promise}
 	 */
-	fetch(url) {;
-
+	fetch(url) {
 		if (url instanceof URL) {
 			url = url.toString();
 		}
@@ -634,7 +632,7 @@ class Select extends CustomControl {
 	 */
 	connectedCallback() {
 		super.connectedCallback();
-		const document = getDocument();;
+		const document = getDocument();
 
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			// close on outside ui-events
@@ -656,7 +654,7 @@ class Select extends CustomControl {
 	 */
 	disconnectedCallback() {
 		super.disconnectedCallback();
-		const document = getDocument();;
+		const document = getDocument();
 
 		// close on outside ui-events
 		for (const [, type] of Object.entries(["click", "touch"])) {
@@ -676,8 +674,7 @@ class Select extends CustomControl {
 	 * @throws {Error} map is not iterable
 	 * @throws {Error} missing label configuration
 	 */
-	importOptions(data) {;
-
+	importOptions(data) {
 		const mappingOptions = this.getOption("mapping", {});
 		const selector = mappingOptions?.["selector"];
 		const labelTemplate = mappingOptions?.["labelTemplate"];
@@ -762,7 +759,7 @@ class Select extends CustomControl {
  * @private
  * @return {object}
  */
-function initOptionsFromArguments() {;
+function initOptionsFromArguments() {
 	const options = {};
 
 	const template = this.getAttribute("data-monster-selected-template");
@@ -792,8 +789,7 @@ function initOptionsFromArguments() {;
 /**
  * @private
  */
-function attachResizeObserver() {;
-
+function attachResizeObserver() {
 	// against flickering
 	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
@@ -814,7 +810,7 @@ function attachResizeObserver() {;
 	this[resizeObserverSymbol].observe(this.parentElement);
 }
 
-function disconnectResizeObserver() {;
+function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
 	}
@@ -848,8 +844,7 @@ function getSummaryTemplate() {
  * @return {void}
  * @private
  */
-function parseSlotsToOptions() {;
-
+function parseSlotsToOptions() {
 	let options = this.getOption("options");
 	if (!isIterable(options)) {
 		options = [];
@@ -928,7 +923,7 @@ function runAsOptionLengthChanged(targetLength) {
  * @param {*} value
  * @return {*}
  */
-function buildSelectionLabel(value) {;
+function buildSelectionLabel(value) {
 	const options = this.getOption("options");
 
 	for (let i = 0; i < options.length; i++) {
@@ -949,8 +944,7 @@ function buildSelectionLabel(value) {;
  * @return {string}
  * @throws {Error} no value found
  */
-function getSelectionLabel(value) {;
-
+function getSelectionLabel(value) {
 	const callback = this.getOption("formatter.selection");
 	if (isFunction(callback)) {
 		const label = callback.call(this, value);
@@ -968,8 +962,7 @@ function getSelectionLabel(value) {;
  * @private
  * @param {Event} event
  */
-function handleToggleKeyboardEvents(event) {;
-
+function handleToggleKeyboardEvents(event) {
 	switch (event?.["code"]) {
 		case "Escape":
 			toggle.call(this);
@@ -1007,8 +1000,7 @@ function initOptionObserver() {
 	);
 }
 
-function getDefaultTranslation() {;
-
+function getDefaultTranslation() {
 	const translation = new Translations("en").assignTranslations(
 		this.getOption("labels", {}),
 	);
@@ -1025,8 +1017,7 @@ function getDefaultTranslation() {;
  * @private
  * @returns {string|*}
  */
-function setSummaryAndControlText() {;
-
+function setSummaryAndControlText() {
 	const translations = getDefaultTranslation.call(this);
 	const selections = this.getOption("selection");
 
@@ -1091,8 +1082,7 @@ function getOptionElements() {
 /**
  * @private
  */
-function calcAndSetOptionsDimension() {;
-
+function calcAndSetOptionsDimension() {
 	const options = getOptionElements.call(this);
 	const container = this[optionsElementSymbol];
 	if (!(container instanceof HTMLElement && options instanceof NodeList)) {
@@ -1168,8 +1158,7 @@ function calcAndSetOptionsDimension() {;
  * @param {number} direction
  * @throws {Error} no shadow-root is defined
  */
-function activateCurrentOption(direction) {;
-
+function activateCurrentOption(direction) {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -1237,8 +1226,7 @@ function activateCurrentOption(direction) {;
 /**
  * @private
  */
-function filterOptions() {;
-
+function filterOptions() {
 	new Processing(() => {
 		let filterValue;
 
@@ -1285,8 +1273,7 @@ function filterOptions() {;
  * @private
  * @param {Event} event
  */
-function handleFilterKeyboardEvents(event) {;
-
+function handleFilterKeyboardEvents(event) {
 	const shiftKey = event?.["shiftKey"];
 
 	switch (event?.["code"]) {
@@ -1322,8 +1309,7 @@ function handleFilterKeyboardEvents(event) {;
 /**
  * @private
  */
-function filterFromRemote() {;
-
+function filterFromRemote() {
 	if (!(this[inlineFilterElementSymbol] instanceof HTMLElement)) {
 		return;
 	}
@@ -1347,8 +1333,7 @@ function filterFromRemote() {;
 			url = new Formatter({ filter: filterValue }).format(optionUrl);
 		}
 
-		this
-			.fetch(url)
+		this.fetch(url)
 			.then(() => {
 				checkOptionState.call(this);
 			})
@@ -1363,8 +1348,7 @@ function filterFromRemote() {;
  * @param {Event} event
  * @private
  */
-function handleOptionKeyboardEvents(event) {;
-
+function handleOptionKeyboardEvents(event) {
 	const shiftKey = event?.["shiftKey"];
 
 	switch (event?.["code"]) {
@@ -1410,8 +1394,7 @@ function handleOptionKeyboardEvents(event) {;
  * @private
  * @returns {string}
  */
-function getFilterMode() {;
-
+function getFilterMode() {
 	switch (this.getOption("filter.mode")) {
 		case FILTER_MODE_OPTIONS:
 			return FILTER_MODE_OPTIONS;
@@ -1425,8 +1408,7 @@ function getFilterMode() {;
 /**
  * @private
  */
-function blurFilter() {;
-
+function blurFilter() {
 	if (!(this[inlineFilterElementSymbol] instanceof HTMLElement)) {
 		return;
 	}
@@ -1446,8 +1428,7 @@ function blurFilter() {;
  * @private
  * @param focusOptions
  */
-function focusPopperFilter(focusOptions) {;
-
+function focusPopperFilter(focusOptions) {
 	this[popperFilterContainerElementSymbol].classList.remove("d-none");
 	this[popperFilterElementSymbol].classList.add("active");
 	this[inlineFilterElementSymbol].classList.remove("active");
@@ -1477,8 +1458,7 @@ function focusPopperFilter(focusOptions) {;
  * @private
  * @param focusOptions
  */
-function focusInlineFilter(focusOptions) {;
-
+function focusInlineFilter(focusOptions) {
 	const options = this.getOption("options");
 	if (
 		(!isArray(options) || options.length === 0) &&
@@ -1505,8 +1485,7 @@ function focusInlineFilter(focusOptions) {;
 /**
  * @private
  */
-function focusFilter(focusOptions) {;
-
+function focusFilter(focusOptions) {
 	if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
 		this[popperFilterContainerElementSymbol].classList.add("d-none");
 		this[inlineFilterElementSymbol].classList.add("d-none");
@@ -1526,8 +1505,7 @@ function focusFilter(focusOptions) {;
  * @throws {Error} no shadow-root is defined
  * @throws {Error} unsupported type
  */
-function gatherState() {;
-
+function gatherState() {
 	const type = this.getOption("type");
 	if (["radio", "checkbox"].indexOf(type) === -1) {
 		throw new Error("unsupported type");
@@ -1563,8 +1541,7 @@ function gatherState() {;
  * @throws {Error} no shadow-root is defined
  * @throws {Error} unsupported type
  */
-function clearSelection() {;
-
+function clearSelection() {
 	const type = this.getOption("type");
 	if (["radio", "checkbox"].indexOf(type) === -1) {
 		throw new Error("unsupported type");
@@ -1585,8 +1562,7 @@ function clearSelection() {;
 /**
  * @private
  */
-function areOptionsAvailableAndInit() {;
-
+function areOptionsAvailableAndInit() {
 	// prevent multiple calls
 	if (this[areOptionsAvailableAndInitSymbol] === undefined) {
 		this[areOptionsAvailableAndInitSymbol] = 0;
@@ -1676,8 +1652,7 @@ function areOptionsAvailableAndInit() {;
  * @private
  * @throws {Error} no shadow-root is defined
  */
-function checkOptionState() {;
-
+function checkOptionState() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -1709,7 +1684,7 @@ function checkOptionState() {;
  * @param {*} value
  * @return {Object}
  */
-function convertValueToSelection(value) {;
+function convertValueToSelection(value) {
 	const selection = [];
 
 	if (isString(value)) {
@@ -1752,8 +1727,7 @@ function convertValueToSelection(value) {;
  * @param {array} selection
  * @return {string}
  */
-function convertSelectionToValue(selection) {;
-
+function convertSelectionToValue(selection) {
 	const value = [];
 
 	if (isArray(selection)) {
@@ -1778,8 +1752,7 @@ function convertSelectionToValue(selection) {;
  * @return {Promise}
  * @throws {Error} no shadow-root is defined
  */
-function setSelection(selection) {;
-
+function setSelection(selection) {
 	if (isString(selection)) {
 		const result = convertValueToSelection.call(this, selection);
 		selection = result?.selection;
@@ -1837,8 +1810,7 @@ function setSelection(selection) {;
  * @throws {TypeError} the result cannot be parsed
  * @throws {TypeError} unsupported response
  */
-function fetchData(url) {;
-
+function fetchData(url) {
 	if (!url) url = this.getOption("url");
 	if (!url) return Promise.resolve();
 
@@ -1872,8 +1844,7 @@ function fetchData(url) {;
 /**
  * @private
  */
-function hide() {;
-
+function hide() {
 	this[popperElementSymbol].style.display = "none";
 	setStatusOrRemoveBadges.call(this, "status");
 	removeAttributeToken(this[controlElementSymbol], "class", "open");
@@ -1882,8 +1853,7 @@ function hide() {;
 /**
  * @private
  */
-function show() {;
-
+function show() {
 	if (this.getOption("disabled", undefined) === true) {
 		return;
 	}
@@ -2131,7 +2101,7 @@ function initEventhandler() {
  * @private
  * @return {Select}
  */
-function setStatusOrRemoveBadges(suggestion) {;
+function setStatusOrRemoveBadges(suggestion) {
 	setTimeout(() => {
 		const selection = this.getOption("selection");
 		const clearAllFlag =
@@ -2178,8 +2148,7 @@ function setStatusOrRemoveBadges(suggestion) {;
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -2218,8 +2187,7 @@ function initControlReferences() {;
 /**
  * @private
  */
-function updatePopper() {;
-
+function updatePopper() {
 	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
 		return;
 	}

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

@@ -21,9 +21,9 @@ nav[data-monster-role=nav] {
     margin-bottom: .75rem;
 
     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);
+    box-shadow: var(--monster-box-shadow-1);
     border-color: var(--monster-bg-color-primary-2);    
     
     flex-wrap: nowrap
@@ -37,7 +37,6 @@ nav[data-monster-role=nav] {
     width: 16px;
     min-height: 16px;
     order: 2;
-    width: 16px;
     height: 16px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
     flex-wrap: nowrap
@@ -61,15 +60,19 @@ nav[data-monster-role=nav] {
     padding: .375rem 0;
     margin-right: .75rem;
     font-size: 1rem;
-    display: flex;
-    color: var(--monster-btn-color, black);
-    background-color: var(--monster-btn-bg-color);
+    display: flex; 
     justify-content: center;
 
-    border-bottom-width: var(--monster-border-width);
-    border-bottom-radius: var(--monster-border-radius);
+    color: var(--monster-color-gray-6);
+    background-color: var(--monster-color-gray-1);
+    @media (prefers-color-scheme: dark) {
+        color: var(--monster-color-gray-1);
+        background-color: var(--monster-color-gray-6);
+    }
+
+    border-radius: var(--monster-border-radius);
     border-bottom-style: var(--monster-border-style);
-    border-bottom-shadow: var(--monster-box-shadow-1);
+    box-shadow: var(--monster-box-shadow-1);
     border-color: var(--monster-bg-color-primary-4);
 
     transition: color 0.8s;
@@ -80,10 +83,10 @@ nav[data-monster-role=nav] {
 }
 
 [data-monster-role=nav] button:not([disabled]):hover {
-    border-bottom-width: var(--monster-border-width);
-    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);
+    box-shadow: var(--monster-box-shadow-1);
     border-color: var(--monster-bg-color-secondary-3);
     color: var(--monster-bg-color-secondary-3);
 
@@ -91,16 +94,16 @@ nav[data-monster-role=nav] {
 
 [data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover,
 [data-monster-role=nav] button[data-monster-state=active] {
-    border-bottom-width: var(--monster-border-width);
-    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);
+    box-shadow: var(--monster-box-shadow-1);
     border-color: var(--monster-bg-color-secondary-3);
     color: var(--monster-bg-color-secondary-3);
 }
 
 [data-monster-role=nav] button[disabled] {
-    color: var(--monster-disabled-color, rgb(84, 84, 84));
+    color: var(--monster-color-primary-disabled-1);
+    background-color: var(--monster-bg-color-primary-disabled-1);
     cursor: not-allowed;
 }
 
@@ -132,10 +135,10 @@ nav[data-monster-role=nav] {
 ::slotted([slot]) {
 
     border-bottom-width: var(--monster-border-width);
-    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);
-
+    box-shadow: var(--monster-box-shadow-1);
+    
     border-color: var(--monster-bg-color-primary-4);
 
 }

package/source/components/form/stylesheet/action-button.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * 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";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { ActionButtonStyleSheet };
+export {ActionButtonStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { ActionButtonStyleSheet };
 const ActionButtonStyleSheet = new CSSStyleSheet();
 
 try {
-	ActionButtonStyleSheet.insertRule(
-		`
+  ActionButtonStyleSheet.insertRule(`
 @layer actionbutton { 
 :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}@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-color-gray-1:#f6f6f6;--monster-color-gray-2:#e2e2e2;--monster-color-gray-3:#8b8b8b;--monster-color-gray-4:#6f6f6f;--monster-color-gray-5:#3e3e3e;--monster-color-gray-6:#222;--monster-color-rose-1:#fff7f9;--monster-color-rose-2:#ffdce5;--monster-color-rose-3:#ff3b8d;--monster-color-rose-4:#db0072;--monster-color-rose-5:#800040;--monster-color-rose-6:#4c0023;--monster-color-raspberry-1:#fff8f8;--monster-color-raspberry-2:#ffdddf;--monster-color-raspberry-3:#ff426c;--monster-color-raspberry-4:#de0051;--monster-color-raspberry-5:#82002c;--monster-color-raspberry-6:#510018;--monster-color-red-1:#fff8f6;--monster-color-red-2:#ffddd8;--monster-color-red-3:#ff4647;--monster-color-red-4:#e0002b;--monster-color-red-5:#830014;--monster-color-red-6:#530003;--monster-color-orange-1:#fff8f5;--monster-color-orange-2:#ffded1;--monster-color-orange-3:#fd4d00;--monster-color-orange-4:#cd3c00;--monster-color-orange-5:#752100;--monster-color-orange-6:#401600;--monster-color-cinnamon-1:#fff8f3;--monster-color-cinnamon-2:#ffdfc6;--monster-color-cinnamon-3:#d57300;--monster-color-cinnamon-4:#ac5c00;--monster-color-cinnamon-5:#633300;--monster-color-cinnamon-6:#371d00;--monster-color-amber-1:#fff8ef;--monster-color-amber-2:#ffe0b2;--monster-color-amber-3:#b98300;--monster-color-amber-4:#926700;--monster-color-amber-5:#523800;--monster-color-amber-6:#302100;--monster-color-yellow-1:#fff9e5;--monster-color-yellow-2:#ffe53e;--monster-color-yellow-3:#9c8b00;--monster-color-yellow-4:#7d6f00;--monster-color-yellow-5:#463d00;--monster-color-yellow-6:#292300;--monster-color-lime-1:#f7ffac;--monster-color-lime-2:#d5f200;--monster-color-lime-3:#819300;--monster-color-lime-4:#677600;--monster-color-lime-5:#394100;--monster-color-lime-6:#222600;--monster-color-chartreuse-1:#e5ffc3;--monster-color-chartreuse-2:#98fb00;--monster-color-chartreuse-3:#5c9b00;--monster-color-chartreuse-4:#497c00;--monster-color-chartreuse-5:#264500;--monster-color-chartreuse-6:#182600;--monster-color-green-1:#e0ffd9;--monster-color-green-2:#72ff6c;--monster-color-green-3:#00a21f;--monster-color-green-4:#008217;--monster-color-green-5:#004908;--monster-color-green-6:#062800;--monster-color-emerald-1:#dcffe6;--monster-color-emerald-2:#5dffa2;--monster-color-emerald-3:#00a05a;--monster-color-emerald-4:#008147;--monster-color-emerald-5:#004825;--monster-color-emerald-6:#002812;--monster-color-aquamarine-1:#daffef;--monster-color-aquamarine-2:#42ffc6;--monster-color-aquamarine-3:#009f78;--monster-color-aquamarine-4:#007f5f;--monster-color-aquamarine-5:#004734;--monster-color-aquamarine-6:#00281b;--monster-color-teal-1:#d7fff7;--monster-color-teal-2:#00ffe4;--monster-color-teal-3:#009e8c;--monster-color-teal-4:#007c6e;--monster-color-teal-5:#00443c;--monster-color-teal-6:#002722;--monster-color-cyan-1:#c4fffe;--monster-color-cyan-2:#00fafb;--monster-color-cyan-3:#00999a;--monster-color-cyan-4:#007a7b;--monster-color-cyan-5:#004344;--monster-color-cyan-6:#002525;--monster-color-powder-1:#dafaff;--monster-color-powder-2:#8df0ff;--monster-color-powder-3:#0098a9;--monster-color-powder-4:#007987;--monster-color-powder-5:#004048;--monster-color-powder-6:#002227;--monster-color-sky-1:#e3f7ff;--monster-color-sky-2:#aee9ff;--monster-color-sky-3:#0094b4;--monster-color-sky-4:#007590;--monster-color-sky-5:#00404f;--monster-color-sky-6:#001f28;--monster-color-cerulean-1:#e8f6ff;--monster-color-cerulean-2:#b9e3ff;--monster-color-cerulean-3:#0092c5;--monster-color-cerulean-4:#00749d;--monster-color-cerulean-5:#003c54;--monster-color-cerulean-6:#001d2a;--monster-color-azure-1:#e8f2ff;--monster-color-azure-2:#c6e0ff;--monster-color-azure-3:#008fdb;--monster-color-azure-4:#0071af;--monster-color-azure-5:#003b5e;--monster-color-azure-6:#001c30;--monster-color-blue-1:#f0f4ff;--monster-color-blue-2:#d4e0ff;--monster-color-blue-3:#0089fc;--monster-color-blue-4:#006dca;--monster-color-blue-5:#00386d;--monster-color-blue-6:#001a39;--monster-color-indigo-1:#f3f3ff;--monster-color-indigo-2:#deddff;--monster-color-indigo-3:#657eff;--monster-color-indigo-4:#0061fc;--monster-color-indigo-5:#00328a;--monster-color-indigo-6:#001649;--monster-color-violet-1:#f7f1ff;--monster-color-violet-2:#e8daff;--monster-color-violet-3:#9b70ff;--monster-color-violet-4:#794aff;--monster-color-violet-5:#2d0fbf;--monster-color-violet-6:#0b0074;--monster-color-purple-1:#fdf4ff;--monster-color-purple-2:#f7d9ff;--monster-color-purple-3:#d150ff;--monster-color-purple-4:#b01fe3;--monster-color-purple-5:#660087;--monster-color-purple-6:#3a004f;--monster-color-magenta-1:#fff3fc;--monster-color-magenta-2:#ffd7f6;--monster-color-magenta-3:#f911e0;--monster-color-magenta-4:#ca00b6;--monster-color-magenta-5:#740068;--monster-color-magenta-6:#44003c;--monster-color-pink-1:#fff7fb;--monster-color-pink-2:#ffdcec;--monster-color-pink-3:#ff2fb2;--monster-color-pink-4:#d2008f;--monster-color-pink-5:#790051;--monster-color-pink-6:#4b0030}.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] div[data-monster-role=popper]{padding:2px}[data-monster-role=control] [data-monster-role=container] [data-monster-role=buttons]{display:flex;flex-direction:column}[data-monster-role=control] [data-monster-role=container] [data-monster-role=buttons] button{background:transparent;border:0}[data-monster-role=control] [data-monster-role=container] [data-monster-role=buttons] monster-message-state-button:not(:last-child){border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-color-primary-1)}[data-monster-role=control] [data-monster-role=container] [data-monster-role=buttons] monster-message-state-button:not(:last-child) ::part(button){border-bottom:var(--monster-border-width) var(--monster-border-style) var(--monster-color-primary-1)} 
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/form/stylesheet/api-button.mjs

@@ -1,3 +1,4 @@
+
 /**
  * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
  * Node module: @schukai/monster
@@ -5,10 +6,10 @@
  * 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";
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
 
-export { ApiButtonStyleSheet };
+export {ApiButtonStyleSheet}
 
 /**
  * @private
@@ -17,17 +18,10 @@ export { ApiButtonStyleSheet };
 const ApiButtonStyleSheet = new CSSStyleSheet();
 
 try {
-	ApiButtonStyleSheet.insertRule(
-		`
+  ApiButtonStyleSheet.insertRule(`
 @layer apibutton { 
  
-}`,
-		0,
-	);
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }