@schukai/monster 3.55.0 → 3.55.1

package/source/components/form/tabs.mjs

@@ -4,52 +4,55 @@
  * This file is licensed under the AGPLv3 License.
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
-import {instanceSymbol} from "../../constants.mjs";
-import {createPopper} from "@popperjs/core";
-import {extend} from "../../data/extend.mjs";
-import {Pathfinder} from "../../data/pathfinder.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { createPopper } from "@popperjs/core";
+import { extend } from "../../data/extend.mjs";
+import { Pathfinder } from "../../data/pathfinder.mjs";
 import {
-    addAttributeToken,
-    addToObjectLink,
-    hasObjectLink,
+	addAttributeToken,
+	addToObjectLink,
+	hasObjectLink,
 } from "../../dom/attributes.mjs";
 import {
-    ATTRIBUTE_ERRORMESSAGE,
-    ATTRIBUTE_PREFIX,
-    ATTRIBUTE_ROLE,
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_PREFIX,
+	ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    getSlottedElements,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent, fireCustomEvent} from "../../dom/events.mjs";
-import {getDocument} from "../../dom/util.mjs";
-import {random} from "../../math/random.mjs";
-import {getGlobal} from "../../types/global.mjs";
-import {ID} from "../../types/id.mjs";
-import {isArray, isString} from "../../types/is.mjs";
-import {TokenList} from "../../types/tokenlist.mjs";
-import {clone} from "../../util/clone.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {Processing} from "../../util/processing.mjs";
 import {
-    ATTRIBUTE_BUTTON_LABEL,
-    ATTRIBUTE_FORM_RELOAD,
-    ATTRIBUTE_FORM_URL,
-    STYLE_DISPLAY_MODE_BLOCK,
+	findTargetElementFromEvent,
+	fireCustomEvent,
+} from "../../dom/events.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { random } from "../../math/random.mjs";
+import { getGlobal } from "../../types/global.mjs";
+import { ID } from "../../types/id.mjs";
+import { isArray, isString } from "../../types/is.mjs";
+import { TokenList } from "../../types/tokenlist.mjs";
+import { clone } from "../../util/clone.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { Processing } from "../../util/processing.mjs";
+import {
+	ATTRIBUTE_BUTTON_LABEL,
+	ATTRIBUTE_FORM_RELOAD,
+	ATTRIBUTE_FORM_URL,
+	STYLE_DISPLAY_MODE_BLOCK,
 } from "./constants.mjs";
 
-import {TabsStyleSheet} from "./stylesheet/tabs.mjs";
-import {loadAndAssignContent} from "./util/fetch.mjs";
-import {ThemeStyleSheet} from "../stylesheet/theme.mjs";
+import { TabsStyleSheet } from "./stylesheet/tabs.mjs";
+import { loadAndAssignContent } from "./util/fetch.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import {
-    popperInstanceSymbol,
-    setEventListenersModifiers,
+	popperInstanceSymbol,
+	setEventListenersModifiers,
 } from "./util/popper.mjs";
 
-export {Tabs};
+export { Tabs };
 
 /**
  * @private
@@ -169,289 +172,288 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * @fires Monster.Components.Form.event:monster-fetched
  */
 class Tabs extends CustomElement {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     * @since 2.1.0
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/form/tabs");
-    }
-
-    /**
-     * 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} labels
-     * @property {string} labels.new-tab-label="New Tab"
-     * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
-     * @property {String} fetch.redirect=error
-     * @property {String} fetch.method=GET
-     * @property {String} fetch.mode=same-origin
-     * @property {String} fetch.credentials=same-origin
-     * @property {Object} fetch.headers={"accept":"text/html"}}
-     * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
-     * @property {string} popper.placement=bottom PopperJS placement
-     * @property {Object[]} modifiers={name:offset} PopperJS placement
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-            labels: {
-                "new-tab-label": "New Tab",
-            },
-            buttons: {
-                standard: [],
-                popper: [],
-            },
-            fetch: {
-                redirect: "error",
-                method: "GET",
-                mode: "same-origin",
-                credentials: "same-origin",
-                headers: {
-                    accept: "text/html",
-                },
-            },
-
-            classes: {
-                button: "monster-theme-primary-1",
-            },
-
-            popper: {
-                placement: "bottom",
-                modifiers: [
-                    {
-                        name: "offset",
-                        options: {
-                            offset: [0, 2],
-                        },
-                    },
-
-                    {
-                        name: "eventListeners",
-                        enabled: false,
-                    },
-                ],
-            },
-        });
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-
-        this[dimensionsSymbol] = new Pathfinder({data: {}});
-        
-        initEventHandler.call(this);
-
-        // setup structure
-        initTabButtons.call(this).then(() => {
-            initPopperSwitch.call(this);
-            initPopper.call(this);
-            attachResizeObserver.call(this);
-            attachTabChangeObserver.call(this);
-        });
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     *
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [TabsStyleSheet, ThemeStyleSheet];
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-tabs";
-    }
-
-    /**
-     * This method is called by the dom and should not be called directly.
-     *
-     * @return {void}
-     */
-    connectedCallback() {
-        super.connectedCallback();
-
-        const document = getDocument();
-
-        for (const [, type] of Object.entries(["click", "touch"])) {
-            // close on outside ui-events
-            document.addEventListener(type, this[closeEventHandler]);
-        }
-    }
-
-    /**
-     * This method is called by the dom and should not be called directly.
-     *
-     * @return {void}
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-
-        const document = getDocument();
-
-        // close on outside ui-events
-        for (const [, type] of Object.entries(["click", "touch"])) {
-            document.removeEventListener(type, this[closeEventHandler]);
-        }
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/form/tabs");
+	}
+
+	/**
+	 * 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} labels
+	 * @property {string} labels.new-tab-label="New Tab"
+	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
+	 * @property {String} fetch.redirect=error
+	 * @property {String} fetch.method=GET
+	 * @property {String} fetch.mode=same-origin
+	 * @property {String} fetch.credentials=same-origin
+	 * @property {Object} fetch.headers={"accept":"text/html"}}
+	 * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
+	 * @property {string} popper.placement=bottom PopperJS placement
+	 * @property {Object[]} modifiers={name:offset} PopperJS placement
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: {
+				"new-tab-label": "New Tab",
+			},
+			buttons: {
+				standard: [],
+				popper: [],
+			},
+			fetch: {
+				redirect: "error",
+				method: "GET",
+				mode: "same-origin",
+				credentials: "same-origin",
+				headers: {
+					accept: "text/html",
+				},
+			},
+
+			classes: {
+				button: "monster-theme-primary-1",
+			},
+
+			popper: {
+				placement: "bottom",
+				modifiers: [
+					{
+						name: "offset",
+						options: {
+							offset: [0, 2],
+						},
+					},
+
+					{
+						name: "eventListeners",
+						enabled: false,
+					},
+				],
+			},
+		});
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+
+		this[dimensionsSymbol] = new Pathfinder({ data: {} });
+
+		initEventHandler.call(this);
+
+		// setup structure
+		initTabButtons.call(this).then(() => {
+			initPopperSwitch.call(this);
+			initPopper.call(this);
+			attachResizeObserver.call(this);
+			attachTabChangeObserver.call(this);
+		});
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [TabsStyleSheet, ThemeStyleSheet];
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-tabs";
+	}
+
+	/**
+	 * This method is called by the dom and should not be called directly.
+	 *
+	 * @return {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+
+		const document = getDocument();
+
+		for (const [, type] of Object.entries(["click", "touch"])) {
+			// close on outside ui-events
+			document.addEventListener(type, this[closeEventHandler]);
+		}
+	}
+
+	/**
+	 * This method is called by the dom and should not be called directly.
+	 *
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+
+		const document = getDocument();
+
+		// close on outside ui-events
+		for (const [, type] of Object.entries(["click", "touch"])) {
+			document.removeEventListener(type, this[closeEventHandler]);
+		}
+	}
 }
 
 /**
  * @private
  */
 function initPopperSwitch() {
-    const nodes = getSlottedElements.call(this, `[${ATTRIBUTE_ROLE}="switch"]`); // null ↦ only unnamed slots
-    let switchButton;
-    if (nodes.size === 0) {
-        switchButton = document.createElement("button");
-        switchButton.setAttribute(ATTRIBUTE_ROLE, "switch");
-        switchButton.setAttribute("part", "switch");
-        switchButton.classList.add("hidden");
-        switchButton.innerHTML =
-            '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>';
-        this[navElementSymbol].prepend(switchButton);
-    } else {
-        switchButton = nodes.next();
-    }
-
-    /**
-     * @param {Event} event
-     */
-    this[popperSwitchEventHandler] = (event) => {
-        const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "switch");
-
-        if (element instanceof HTMLButtonElement) {
-            togglePopper.call(this);
-        }
-    };
-
-    for (const type of ["click", "touch"]) {
-        switchButton.addEventListener(type, this[popperSwitchEventHandler]);
-    }
-
-    this[switchElementSymbol] = switchButton;
+	const nodes = getSlottedElements.call(this, `[${ATTRIBUTE_ROLE}="switch"]`); // null ↦ only unnamed slots
+	let switchButton;
+	if (nodes.size === 0) {
+		switchButton = document.createElement("button");
+		switchButton.setAttribute(ATTRIBUTE_ROLE, "switch");
+		switchButton.setAttribute("part", "switch");
+		switchButton.classList.add("hidden");
+		switchButton.innerHTML =
+			'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>';
+		this[navElementSymbol].prepend(switchButton);
+	} else {
+		switchButton = nodes.next();
+	}
+
+	/**
+	 * @param {Event} event
+	 */
+	this[popperSwitchEventHandler] = (event) => {
+		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "switch");
+
+		if (element instanceof HTMLButtonElement) {
+			togglePopper.call(this);
+		}
+	};
+
+	for (const type of ["click", "touch"]) {
+		switchButton.addEventListener(type, this[popperSwitchEventHandler]);
+	}
+
+	this[switchElementSymbol] = switchButton;
 }
 
 /**
  * @private
  */
 function hidePopper() {
-    if (!this[popperInstanceSymbol]) {
-        return;
-    }
+	if (!this[popperInstanceSymbol]) {
+		return;
+	}
 
-    this[popperElementSymbol].style.display = "none";
-    // performance https://popper.js.org/docs/v2/tutorial/#performance
-    setEventListenersModifiers.call(this, false);
+	this[popperElementSymbol].style.display = "none";
+	// performance https://popper.js.org/docs/v2/tutorial/#performance
+	setEventListenersModifiers.call(this, false);
 }
 
 /**
  * @private
  */
 function showPopper() {
-    if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
-        return;
-    }
-
-    this[popperElementSymbol].style.visibility = "hidden";
-    this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
-    // performance https://popper.js.org/docs/v2/tutorial/#performance
-    setEventListenersModifiers.call(this, true);
-
-    this[popperInstanceSymbol].update();
-
-    new Processing(() => {
-        this[popperElementSymbol].style.removeProperty("visibility");
-    })
-        .run(undefined)
-        .then(() => {
-        })
-        .catch((e) => {
-            addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-        });
+	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		return;
+	}
+
+	this[popperElementSymbol].style.visibility = "hidden";
+	this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+	// performance https://popper.js.org/docs/v2/tutorial/#performance
+	setEventListenersModifiers.call(this, true);
+
+	this[popperInstanceSymbol].update();
+
+	new Processing(() => {
+		this[popperElementSymbol].style.removeProperty("visibility");
+	})
+		.run(undefined)
+		.then(() => {})
+		.catch((e) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		});
 }
 
 /**
  * @private
  */
 function togglePopper() {
-    if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
-        hidePopper.call(this);
-    } else {
-        showPopper.call(this);
-    }
+	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		hidePopper.call(this);
+	} else {
+		showPopper.call(this);
+	}
 }
 
 /**
  * @private
  */
 function attachResizeObserver() {
-    // against flickering
-    this[resizeObserverSymbol] = new ResizeObserver((entries) => {
-        if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
-            try {
-                this[timerCallbackSymbol].touch();
-                return;
-            } catch (e) {
-                delete this[timerCallbackSymbol];
-            }
-        }
-
-        this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-            this[dimensionsSymbol].setVia("data.calculated", false);
-            checkAndRearrangeButtons.call(this);
-        });
-    });
-
-    this[resizeObserverSymbol].observe(this[navElementSymbol]);
+	// against flickering
+	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[timerCallbackSymbol];
+			}
+		}
+
+		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+			this[dimensionsSymbol].setVia("data.calculated", false);
+			checkAndRearrangeButtons.call(this);
+		});
+	});
+
+	this[resizeObserverSymbol].observe(this[navElementSymbol]);
 }
 
 /**
  * @private
  */
 function attachTabChangeObserver() {
-    // against flickering
-    new MutationObserver((mutations) => {
-        let runUpdate = false;
-
-        for (const mutation of mutations) {
-            if (mutation.type === "childList") {
-                if (
-                    mutation.addedNodes.length > 0 ||
-                    mutation.removedNodes.length > 0
-                ) {
-                    runUpdate = true;
-                    break;
-                }
-            }
-        }
-
-        if (runUpdate === true) {
-            this[dimensionsSymbol].setVia("data.calculated", false);
-            initTabButtons.call(this);
-        }
-    }).observe(this, {
-        childList: true,
-    });
+	// against flickering
+	new MutationObserver((mutations) => {
+		let runUpdate = false;
+
+		for (const mutation of mutations) {
+			if (mutation.type === "childList") {
+				if (
+					mutation.addedNodes.length > 0 ||
+					mutation.removedNodes.length > 0
+				) {
+					runUpdate = true;
+					break;
+				}
+			}
+		}
+
+		if (runUpdate === true) {
+			this[dimensionsSymbol].setVia("data.calculated", false);
+			initTabButtons.call(this);
+		}
+	}).observe(this, {
+		childList: true,
+	});
 }
 
 /**
@@ -461,216 +463,211 @@ function attachTabChangeObserver() {
  * @see {@link  Plugins}
  */
 function initPopper() {
-    const self = this;
-
-    const options = extend({}, self.getOption("popper"));
-
-    self[popperInstanceSymbol] = createPopper(
-        self[switchElementSymbol],
-        self[popperElementSymbol],
-        options,
-    );
-
-    const observer1 = new MutationObserver(function (mutations) {
-        let runUpdate = false;
-
-        for (const mutation of mutations) {
-            if (mutation.type === "childList") {
-                if (
-                    mutation.addedNodes.length > 0 ||
-                    mutation.removedNodes.length > 0
-                ) {
-                    runUpdate = true;
-                    break;
-                }
-            }
-        }
-
-        if (runUpdate === true) {
-            self[popperInstanceSymbol].update();
-        }
-    });
-
-    observer1.observe(self[popperNavElementSymbol], {
-        childList: true,
-        subtree: true,
-    });
-
-    return self;
+	const self = this;
+
+	const options = extend({}, self.getOption("popper"));
+
+	self[popperInstanceSymbol] = createPopper(
+		self[switchElementSymbol],
+		self[popperElementSymbol],
+		options,
+	);
+
+	const observer1 = new MutationObserver(function (mutations) {
+		let runUpdate = false;
+
+		for (const mutation of mutations) {
+			if (mutation.type === "childList") {
+				if (
+					mutation.addedNodes.length > 0 ||
+					mutation.removedNodes.length > 0
+				) {
+					runUpdate = true;
+					break;
+				}
+			}
+		}
+
+		if (runUpdate === true) {
+			self[popperInstanceSymbol].update();
+		}
+	});
+
+	observer1.observe(self[popperNavElementSymbol], {
+		childList: true,
+		subtree: true,
+	});
+
+	return self;
 }
 
 /**
  * @private
  * @param {HTMLElement} element
  */
-function show(element) {
-    const self = this;
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    const reference = element.getAttribute(`${ATTRIBUTE_PREFIX}tab-reference`);
-    
-   
-    
-
-    const nodes = getSlottedElements.call(this);
-    for (const node of nodes) {
-        const id = node.getAttribute("id");
-
-        if (id === reference) {
-            node.classList.add("active");
-
-            // get all data- from button and filter out data-monster-attributes and data-monster-insert
-            const data = {};
-            const mask = ["data-monster-attributes", 
-                "data-monster-insert-reference", 
-                "data-monster-state",
-                "data-monster-button-label",
-                "data-monster-objectlink",
-                "data-monster-role"];
-            
-            for (const [, attr] of Object.entries(node.attributes)) {
-                if (attr.name.startsWith("data-") && mask.indexOf(attr.name) === -1) {
-                    data[attr.name] = attr.value;
-                }
-            }
-            
-            if (node.hasAttribute(ATTRIBUTE_FORM_URL)) {
-                const url = node.getAttribute(ATTRIBUTE_FORM_URL);
-
-                if (
-                    !node.hasAttribute(ATTRIBUTE_FORM_RELOAD) ||
-                    node.getAttribute(ATTRIBUTE_FORM_RELOAD).toLowerCase() === "onshow"
-                ) {
-                    node.removeAttribute(ATTRIBUTE_FORM_URL);
-                }
-
-                const options = this.getOption("fetch", {});
-                const filter = undefined;
-                loadAndAssignContent(node, url, options, filter)
-                    .then(() => {
-                        fireCustomEvent(self, "monster-tab-changed", {
-                            reference,
-                        });
-                    })
-                    .catch((e) => {
-                        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-                    });
-            } else {
-                fireCustomEvent(self, "monster-tab-changed", {
-                    reference,
-                    data
-                });
-            }
-        } else {
-            node.classList.remove("active");
-        }
-    }
-
-    const standardButtons = this.getOption("buttons.standard");
-    for (const index in standardButtons) {
-        const button = standardButtons[index];
-        const state = button["reference"] === reference ? "active" : "inactive";
-        this.setOption(`buttons.standard.${index}.state`, state);
-    }
-
-    const popperButton = this.getOption("buttons.popper");
-    for (const index in popperButton) {
-        const button = popperButton[index];
-        const state = button["reference"] === reference ? "active" : "inactive";
-        this.setOption(`buttons.popper.${index}.state`, state);
-    }
-
-    hidePopper.call(this);
+function show(element) {;
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	const reference = element.getAttribute(`${ATTRIBUTE_PREFIX}tab-reference`);
+
+	const nodes = getSlottedElements.call(this);
+	for (const node of nodes) {
+		const id = node.getAttribute("id");
+
+		if (id === reference) {
+			node.classList.add("active");
+
+			// get all data- from button and filter out data-monster-attributes and data-monster-insert
+			const data = {};
+			const mask = [
+				"data-monster-attributes",
+				"data-monster-insert-reference",
+				"data-monster-state",
+				"data-monster-button-label",
+				"data-monster-objectlink",
+				"data-monster-role",
+			];
+
+			for (const [, attr] of Object.entries(node.attributes)) {
+				if (attr.name.startsWith("data-") && mask.indexOf(attr.name) === -1) {
+					data[attr.name] = attr.value;
+				}
+			}
+
+			if (node.hasAttribute(ATTRIBUTE_FORM_URL)) {
+				const url = node.getAttribute(ATTRIBUTE_FORM_URL);
+
+				if (
+					!node.hasAttribute(ATTRIBUTE_FORM_RELOAD) ||
+					node.getAttribute(ATTRIBUTE_FORM_RELOAD).toLowerCase() === "onshow"
+				) {
+					node.removeAttribute(ATTRIBUTE_FORM_URL);
+				}
+
+				const options = this.getOption("fetch", {});
+				const filter = undefined;
+				loadAndAssignContent(node, url, options, filter)
+					.then(() => {
+						fireCustomEvent(this, "monster-tab-changed", {
+							reference,
+						});
+					})
+					.catch((e) => {
+						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+					});
+			} else {
+				fireCustomEvent(this, "monster-tab-changed", {
+					reference,
+					data,
+				});
+			}
+		} else {
+			node.classList.remove("active");
+		}
+	}
+
+	const standardButtons = this.getOption("buttons.standard");
+	for (const index in standardButtons) {
+		const button = standardButtons[index];
+		const state = button["reference"] === reference ? "active" : "inactive";
+		this.setOption(`buttons.standard.${index}.state`, state);
+	}
+
+	const popperButton = this.getOption("buttons.popper");
+	for (const index in popperButton) {
+		const button = popperButton[index];
+		const state = button["reference"] === reference ? "active" : "inactive";
+		this.setOption(`buttons.popper.${index}.state`, state);
+	}
+
+	hidePopper.call(this);
 }
 
 /**
  * @private
  */
-function initEventHandler() {
-    
-    const self=this;
-    
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    /**
-     * @param {Event} event
-     */
-    this[changeTabEventHandler] = (event) => {
-        const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
-
-        if (element instanceof HTMLButtonElement && element.disabled !== true) {
-            show.call(this, element);
-        }
-    };
-
-    /**
-     * event:monster-tab-remove
-     * @event Monster.Components.Form.event:monster-tab-remove
-     */
-
-    /**
-     * @param {Event} event
-     * @fires Monster.Components.Form.event:monster-tab-remove
-     */
-    this[removeTabEventHandler] = (event) => {
-        
-        const element = findTargetElementFromEvent(
-            event,
-            ATTRIBUTE_ROLE,
-            "remove-tab",
-        );
-
-        if (element instanceof HTMLElement) {
-            const button = findTargetElementFromEvent(
-                event,
-                ATTRIBUTE_ROLE,
-                "button",
-            );
-
-            if (button instanceof HTMLButtonElement && button.disabled !== true) {
-                const reference = button.getAttribute(
-                    `${ATTRIBUTE_PREFIX}tab-reference`,
-                );
-                if (reference) {
-                    const container = this.querySelector(`[id=${reference}]`);
-                    if (container instanceof HTMLElement) {
-                        container.remove();
-                        initTabButtons.call(this);
-                        fireCustomEvent(self, "monster-tab-remove", {
-                            reference,
-                        });
-                    }
-                }
-            }
-        }
-    };
-
-    this[navElementSymbol].addEventListener("touch", this[changeTabEventHandler]);
-    this[navElementSymbol].addEventListener("click", this[changeTabEventHandler]);
-
-    this[navElementSymbol].addEventListener("touch", this[removeTabEventHandler]);
-    this[navElementSymbol].addEventListener("click", this[removeTabEventHandler]);
-
-    /**
-     * @param {Event} event
-     */
-    this[closeEventHandler] = (event) => {
-        const path = event.composedPath();
-
-        for (const [, element] of Object.entries(path)) {
-            if (element === this) {
-                return;
-            }
-        }
-
-        hidePopper.call(this);
-    };
-
-    return this;
+function initEventHandler() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	/**
+	 * @param {Event} event
+	 */
+	this[changeTabEventHandler] = (event) => {
+		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
+
+		if (element instanceof HTMLButtonElement && element.disabled !== true) {
+			show.call(this, element);
+		}
+	};
+
+	/**
+	 * event:monster-tab-remove
+	 * @event Monster.Components.Form.event:monster-tab-remove
+	 */
+
+	/**
+	 * @param {Event} event
+	 * @fires Monster.Components.Form.event:monster-tab-remove
+	 */
+	this[removeTabEventHandler] = (event) => {
+		const element = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"remove-tab",
+		);
+
+		if (element instanceof HTMLElement) {
+			const button = findTargetElementFromEvent(
+				event,
+				ATTRIBUTE_ROLE,
+				"button",
+			);
+
+			if (button instanceof HTMLButtonElement && button.disabled !== true) {
+				const reference = button.getAttribute(
+					`${ATTRIBUTE_PREFIX}tab-reference`,
+				);
+				if (reference) {
+					const container = this.querySelector(`[id=${reference}]`);
+					if (container instanceof HTMLElement) {
+						container.remove();
+						initTabButtons.call(this);
+						fireCustomEvent(this, "monster-tab-remove", {
+							reference,
+						});
+					}
+				}
+			}
+		}
+	};
+
+	this[navElementSymbol].addEventListener("touch", this[changeTabEventHandler]);
+	this[navElementSymbol].addEventListener("click", this[changeTabEventHandler]);
+
+	this[navElementSymbol].addEventListener("touch", this[removeTabEventHandler]);
+	this[navElementSymbol].addEventListener("click", this[removeTabEventHandler]);
+
+	/**
+	 * @param {Event} event
+	 */
+	this[closeEventHandler] = (event) => {
+		const path = event.composedPath();
+
+		for (const [, element] of Object.entries(path)) {
+			if (element === this) {
+				return;
+			}
+		}
+
+		hidePopper.call(this);
+	};
+
+	return this;
 }
 
 /**
@@ -678,37 +675,37 @@ function initEventHandler() {
  * @param observedNode
  */
 function attachTabMutationObserver(observedNode) {
-    const self = this;
-
-    if (hasObjectLink(observedNode, mutationObserverSymbol)) {
-        return;
-    }
-
-    /**
-     * this construct monitors a node whether it is disabled or modified
-     * @type {MutationObserver}
-     */
-    const observer = new MutationObserver(function (mutations) {
-        if (isArray(mutations)) {
-            const mutation = mutations.pop();
-            if (mutation instanceof MutationRecord) {
-                initTabButtons.call(self);
-            }
-        }
-    });
-
-    observer.observe(observedNode, {
-        childList: false,
-        attributes: true,
-        subtree: false,
-        attributeFilter: [
-            "disabled",
-            ATTRIBUTE_BUTTON_LABEL,
-            `${ATTRIBUTE_PREFIX}button-icon`,
-        ],
-    });
-
-    addToObjectLink(observedNode, mutationObserverSymbol, observer);
+	const self = this;
+
+	if (hasObjectLink(observedNode, mutationObserverSymbol)) {
+		return;
+	}
+
+	/**
+	 * this construct monitors a node whether it is disabled or modified
+	 * @type {MutationObserver}
+	 */
+	const observer = new MutationObserver(function (mutations) {
+		if (isArray(mutations)) {
+			const mutation = mutations.pop();
+			if (mutation instanceof MutationRecord) {
+				initTabButtons.call(self);
+			}
+		}
+	});
+
+	observer.observe(observedNode, {
+		childList: false,
+		attributes: true,
+		subtree: false,
+		attributeFilter: [
+			"disabled",
+			ATTRIBUTE_BUTTON_LABEL,
+			`${ATTRIBUTE_PREFIX}button-icon`,
+		],
+	});
+
+	addToObjectLink(observedNode, mutationObserverSymbol, observer);
 }
 
 /**
@@ -717,22 +714,22 @@ function attachTabMutationObserver(observedNode) {
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    this[controlElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=control]`,
-    );
-    this[navElementSymbol] = this.shadowRoot.querySelector(
-        `nav[${ATTRIBUTE_ROLE}=nav]`,
-    );
-    this[popperElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=popper]`,
-    );
-    this[popperNavElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=popper-nav]`,
-    );
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=control]`,
+	);
+	this[navElementSymbol] = this.shadowRoot.querySelector(
+		`nav[${ATTRIBUTE_ROLE}=nav]`,
+	);
+	this[popperElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=popper]`,
+	);
+	this[popperNavElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=popper-nav]`,
+	);
 }
 
 /**
@@ -742,102 +739,101 @@ function initControlReferences() {
  *
  */
 function initTabButtons() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    let activeReference;
-
-    const dimensionsCalculated = this[dimensionsSymbol].getVia(
-        "data.calculated",
-        false,
-    );
-
-    const buttons = [];
-    const nodes = getSlottedElements.call(this, undefined, null); // null ↦ only unnamed slots
-
-    for (const node of nodes) {
-        if (!(node instanceof HTMLElement)) continue;
-        let label = getButtonLabel.call(this, node);
-
-        let reference;
-        if (node.hasAttribute("id")) {
-            reference = node.getAttribute("id");
-        }
-
-        let disabled;
-        if (node.hasAttribute("disabled") || node.disabled === true) {
-            disabled = true;
-        }
-
-        if (!reference) {
-            reference = new ID("tab").toString();
-            node.setAttribute("id", reference);
-        }
-
-        if (node.hasAttribute(`${ATTRIBUTE_PREFIX}button-icon`)) {
-            label = `<span part="label">${label}</span><img part="icon" src="${node.getAttribute(
-                `${ATTRIBUTE_PREFIX}button-icon`,
-            )}">`;
-        }
-
-        let remove = false;
-        if (node.hasAttribute(`${ATTRIBUTE_PREFIX}removable`)) {
-            remove = true;
-        }
-
-        if (node.matches(".active") === true && disabled !== true) {
-            node.classList.remove("active");
-            activeReference = reference;
-        }
-
-        const state = "";
-        const classes = dimensionsCalculated ? "" : "invisible";
-
-        buttons.push({
-            reference,
-            label,
-            state,
-            class: classes,
-            disabled,
-            remove,
-        });
-
-        attachTabMutationObserver.call(this, node);
-    }
-
-    this.setOption("buttons.standard", clone(buttons));
-    this.setOption("buttons.popper", []);
-    this.setOption("marker", random());
-
-    return adjustButtonVisibility.call(this).then(() => {
-        if (activeReference) {
-            return new Processing(() => {
-                const button = this.shadowRoot.querySelector(
-                    `[${ATTRIBUTE_PREFIX}tab-reference="${activeReference}"]`,
-                );
-                if (button instanceof HTMLButtonElement && button.disabled !== true) {
-                    show.call(this, button);
-                }
-            })
-                .run(undefined)
-                .then(() => {
-                })
-                .catch((e) => {
-                    addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-                });
-        }
-
-        return Promise.resolve();
-    });
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	let activeReference;
+
+	const dimensionsCalculated = this[dimensionsSymbol].getVia(
+		"data.calculated",
+		false,
+	);
+
+	const buttons = [];
+	const nodes = getSlottedElements.call(this, undefined, null); // null ↦ only unnamed slots
+
+	for (const node of nodes) {
+		if (!(node instanceof HTMLElement)) continue;
+		let label = getButtonLabel.call(this, node);
+
+		let reference;
+		if (node.hasAttribute("id")) {
+			reference = node.getAttribute("id");
+		}
+
+		let disabled;
+		if (node.hasAttribute("disabled") || node.disabled === true) {
+			disabled = true;
+		}
+
+		if (!reference) {
+			reference = new ID("tab").toString();
+			node.setAttribute("id", reference);
+		}
+
+		if (node.hasAttribute(`${ATTRIBUTE_PREFIX}button-icon`)) {
+			label = `<span part="label">${label}</span><img part="icon" src="${node.getAttribute(
+				`${ATTRIBUTE_PREFIX}button-icon`,
+			)}">`;
+		}
+
+		let remove = false;
+		if (node.hasAttribute(`${ATTRIBUTE_PREFIX}removable`)) {
+			remove = true;
+		}
+
+		if (node.matches(".active") === true && disabled !== true) {
+			node.classList.remove("active");
+			activeReference = reference;
+		}
+
+		const state = "";
+		const classes = dimensionsCalculated ? "" : "invisible";
+
+		buttons.push({
+			reference,
+			label,
+			state,
+			class: classes,
+			disabled,
+			remove,
+		});
+
+		attachTabMutationObserver.call(this, node);
+	}
+
+	this.setOption("buttons.standard", clone(buttons));
+	this.setOption("buttons.popper", []);
+	this.setOption("marker", random());
+
+	return adjustButtonVisibility.call(this).then(() => {
+		if (activeReference) {
+			return new Processing(() => {
+				const button = this.shadowRoot.querySelector(
+					`[${ATTRIBUTE_PREFIX}tab-reference="${activeReference}"]`,
+				);
+				if (button instanceof HTMLButtonElement && button.disabled !== true) {
+					show.call(this, button);
+				}
+			})
+				.run(undefined)
+				.then(() => {})
+				.catch((e) => {
+					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+				});
+		}
+
+		return Promise.resolve();
+	});
 }
 
 function checkAndRearrangeButtons() {
-    if (this[dimensionsSymbol].getVia("data.calculated", false) !== true) {
-        calculateNavigationButtonsDimensions.call(this);
-    }
+	if (this[dimensionsSymbol].getVia("data.calculated", false) !== true) {
+		calculateNavigationButtonsDimensions.call(this);
+	}
 
-    rearrangeButtons.call(this);
+	rearrangeButtons.call(this);
 }
 
 /**
@@ -845,29 +841,29 @@ function checkAndRearrangeButtons() {
  * @return {Promise<unknown>}
  */
 function adjustButtonVisibility() {
-    const self = this;
+	const self = this;
 
-    return new Promise((resolve) => {
-        const observer = new MutationObserver(function (mutations) {
-            const defCount = self.getOption("buttons.standard").length;
-            const domCount = self[navElementSymbol].querySelectorAll(
-                'button[data-monster-role="button"]',
-            ).length;
+	return new Promise((resolve) => {
+		const observer = new MutationObserver(function (mutations) {
+			const defCount = self.getOption("buttons.standard").length;
+			const domCount = self[navElementSymbol].querySelectorAll(
+				'button[data-monster-role="button"]',
+			).length;
 
-            // in drawing
-            if (defCount !== domCount) return;
+			// in drawing
+			if (defCount !== domCount) return;
 
-            observer.disconnect();
+			observer.disconnect();
 
-            checkAndRearrangeButtons.call(self);
+			checkAndRearrangeButtons.call(self);
 
-            resolve();
-        });
+			resolve();
+		});
 
-        observer.observe(self[navElementSymbol], {
-            attributes: true,
-        });
-    });
+		observer.observe(self[navElementSymbol], {
+			attributes: true,
+		});
+	});
 }
 
 /**
@@ -876,17 +872,17 @@ function adjustButtonVisibility() {
  * @return {number}
  */
 function getDimValue(value) {
-    if ([undefined, null].indexOf(value) !== -1) {
-        return 0;
-    }
+	if ([undefined, null].indexOf(value) !== -1) {
+		return 0;
+	}
 
-    const valueAsInt = parseInt(value, 10);
+	const valueAsInt = parseInt(value, 10);
 
-    if (isNaN(valueAsInt)) {
-        return 0;
-    }
+	if (isNaN(valueAsInt)) {
+		return 0;
+	}
 
-    return valueAsInt;
+	return valueAsInt;
 }
 
 /**
@@ -895,18 +891,18 @@ function getDimValue(value) {
  * @return {number}
  */
 function calcBoxWidth(node) {
-    const dim = getGlobal("window").getComputedStyle(node);
-    const bounding = node.getBoundingClientRect();
-
-    return (
-        getDimValue(dim["border-left-width"]) +
-        getDimValue(dim["padding-left"]) +
-        getDimValue(dim["margin-left"]) +
-        getDimValue(bounding["width"]) +
-        getDimValue(dim["border-right-width"]) +
-        getDimValue(dim["margin-right"]) +
-        getDimValue(dim["padding-left"])
-    );
+	const dim = getGlobal("window").getComputedStyle(node);
+	const bounding = node.getBoundingClientRect();
+
+	return (
+		getDimValue(dim["border-left-width"]) +
+		getDimValue(dim["padding-left"]) +
+		getDimValue(dim["margin-left"]) +
+		getDimValue(bounding["width"]) +
+		getDimValue(dim["border-right-width"]) +
+		getDimValue(dim["margin-right"]) +
+		getDimValue(dim["padding-left"])
+	);
 }
 
 /**
@@ -914,35 +910,35 @@ function calcBoxWidth(node) {
  * @return {Object}
  */
 function rearrangeButtons() {
-    const standardButtons = [];
-    const popperButtons = [];
-
-    let sum = 0;
-    const space = this[dimensionsSymbol].getVia("data.space");
-
-    const buttons = this.getOption("buttons.standard");
-    for (const [, button] of buttons.entries()) {
-        const ref = button?.reference;
-
-        sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
-
-        if (sum > space) {
-            popperButtons.push(clone(button));
-        } else {
-            standardButtons.push(clone(button));
-        }
-    }
-
-    this.setOption("buttons.standard", standardButtons);
-    this.setOption("buttons.popper", popperButtons);
-
-    if (this[switchElementSymbol]) {
-        if (popperButtons.length > 0) {
-            this[switchElementSymbol].classList.remove("hidden");
-        } else {
-            this[switchElementSymbol].classList.add("hidden");
-        }
-    }
+	const standardButtons = [];
+	const popperButtons = [];
+
+	let sum = 0;
+	const space = this[dimensionsSymbol].getVia("data.space");
+
+	const buttons = this.getOption("buttons.standard");
+	for (const [, button] of buttons.entries()) {
+		const ref = button?.reference;
+
+		sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+
+		if (sum > space) {
+			popperButtons.push(clone(button));
+		} else {
+			standardButtons.push(clone(button));
+		}
+	}
+
+	this.setOption("buttons.standard", standardButtons);
+	this.setOption("buttons.popper", popperButtons);
+
+	if (this[switchElementSymbol]) {
+		if (popperButtons.length > 0) {
+			this[switchElementSymbol].classList.remove("hidden");
+		} else {
+			this[switchElementSymbol].classList.add("hidden");
+		}
+	}
 }
 
 /**
@@ -950,50 +946,50 @@ function rearrangeButtons() {
  * @return {Object}
  */
 function calculateNavigationButtonsDimensions() {
-    const width = this[navElementSymbol].getBoundingClientRect().width;
-
-    let startEndWidth = 0;
-
-    getSlottedElements.call(this, undefined, "start").forEach((node) => {
-        startEndWidth += calcBoxWidth.call(this, node);
-    });
-
-    getSlottedElements.call(this, undefined, "end").forEach((node) => {
-        startEndWidth += calcBoxWidth.call(this, node);
-    });
-
-    this[dimensionsSymbol].setVia("data.space", width - startEndWidth - 2);
-    this[dimensionsSymbol].setVia("data.visible", !(width === 0));
-
-    const buttons = this.getOption("buttons.standard").concat(
-        this.getOption("buttons.popper"),
-    );
-
-    for (const [i, button] of buttons.entries()) {
-        const ref = button?.reference;
-        const element = this[navElementSymbol].querySelector(
-            `:scope > [${ATTRIBUTE_PREFIX}tab-reference="${ref}"]`,
-        );
-        if (!(element instanceof HTMLButtonElement)) continue;
-
-        this[dimensionsSymbol].setVia(
-            `data.button.${ref}`,
-            calcBoxWidth.call(this, element),
-        );
-        button["class"] = new TokenList(button["class"])
-            .remove("invisible")
-            .toString();
-    }
-
-    const slots = this[controlElementSymbol].querySelectorAll(
-        `nav[${ATTRIBUTE_PREFIX}role=nav] > slot.invisible, slot[${ATTRIBUTE_PREFIX}role=slot].invisible`,
-    );
-    for (const [, slot] of slots.entries()) {
-        slot.classList.remove("invisible");
-    }
-
-    this[dimensionsSymbol].setVia("data.calculated", true);
-    this.setOption("buttons.standard", clone(buttons));
+	const width = this[navElementSymbol].getBoundingClientRect().width;
+
+	let startEndWidth = 0;
+
+	getSlottedElements.call(this, undefined, "start").forEach((node) => {
+		startEndWidth += calcBoxWidth.call(this, node);
+	});
+
+	getSlottedElements.call(this, undefined, "end").forEach((node) => {
+		startEndWidth += calcBoxWidth.call(this, node);
+	});
+
+	this[dimensionsSymbol].setVia("data.space", width - startEndWidth - 2);
+	this[dimensionsSymbol].setVia("data.visible", !(width === 0));
+
+	const buttons = this.getOption("buttons.standard").concat(
+		this.getOption("buttons.popper"),
+	);
+
+	for (const [i, button] of buttons.entries()) {
+		const ref = button?.reference;
+		const element = this[navElementSymbol].querySelector(
+			`:scope > [${ATTRIBUTE_PREFIX}tab-reference="${ref}"]`,
+		);
+		if (!(element instanceof HTMLButtonElement)) continue;
+
+		this[dimensionsSymbol].setVia(
+			`data.button.${ref}`,
+			calcBoxWidth.call(this, element),
+		);
+		button["class"] = new TokenList(button["class"])
+			.remove("invisible")
+			.toString();
+	}
+
+	const slots = this[controlElementSymbol].querySelectorAll(
+		`nav[${ATTRIBUTE_PREFIX}role=nav] > slot.invisible, slot[${ATTRIBUTE_PREFIX}role=slot].invisible`,
+	);
+	for (const [, slot] of slots.entries()) {
+		slot.classList.remove("invisible");
+	}
+
+	this[dimensionsSymbol].setVia("data.calculated", true);
+	this.setOption("buttons.standard", clone(buttons));
 }
 
 /**
@@ -1002,34 +998,34 @@ function calculateNavigationButtonsDimensions() {
  * @return {string}
  */
 function getButtonLabel(node) {
-    let label;
-    let setLabel = false;
-    if (node.hasAttribute(ATTRIBUTE_BUTTON_LABEL)) {
-        label = node.getAttribute(ATTRIBUTE_BUTTON_LABEL);
-    } else {
-        label = node.innerText;
-        setLabel = true;
-    }
-
-    if (!isString(label)) {
-        label = "";
-    }
-
-    label = label.trim();
-
-    if (label === "") {
-        label = this.getOption("labels.new-tab-label", "New Tab");
-    }
-
-    if (label.length > 100) {
-        label = `${label.substring(0, 99)}…`;
-    }
-
-    if (setLabel === true) {
-        node.setAttribute(ATTRIBUTE_BUTTON_LABEL, label);
-    }
-
-    return label;
+	let label;
+	let setLabel = false;
+	if (node.hasAttribute(ATTRIBUTE_BUTTON_LABEL)) {
+		label = node.getAttribute(ATTRIBUTE_BUTTON_LABEL);
+	} else {
+		label = node.innerText;
+		setLabel = true;
+	}
+
+	if (!isString(label)) {
+		label = "";
+	}
+
+	label = label.trim();
+
+	if (label === "") {
+		label = this.getOption("labels.new-tab-label", "New Tab");
+	}
+
+	if (label.length > 100) {
+		label = `${label.substring(0, 99)}…`;
+	}
+
+	if (setLabel === true) {
+		node.setAttribute(ATTRIBUTE_BUTTON_LABEL, label);
+	}
+
+	return label;
 }
 
 /**
@@ -1037,8 +1033,8 @@ function getButtonLabel(node) {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <template id="buttons">
             <button part="button"
                     data-monster-role="button"