@schukai/monster 3.54.0 → 3.55.0

package/source/components/form/tabs.mjs

@@ -4,51 +4,52 @@
  * 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 } 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 {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,
+    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 {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
@@ -168,283 +169,289 @@ 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/component-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",
-				},
-			},
-			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: {} });
-		// change and remove Tabs
-		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];
-	}
-
-	/**
-	 * 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,
+    });
 }
 
 /**
@@ -454,42 +461,42 @@ 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;
 }
 
 /**
@@ -497,132 +504,173 @@ function initPopper() {
  * @param {HTMLElement} element
  */
 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");
-
-			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(() => {})
-					.catch((e) => {
-						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-					});
-			}
-		} 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);
+    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);
 }
 
 /**
  * @private
  */
 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);
-		}
-	};
-
-	/**
-	 * @param {Event} event
-	 */
-	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);
-					}
-				}
-			}
-		}
-	};
-
-	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;
+    
+    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;
 }
 
 /**
@@ -630,37 +678,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);
 }
 
 /**
@@ -669,22 +717,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]`,
+    );
 }
 
 /**
@@ -694,101 +742,102 @@ 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);
 }
 
 /**
@@ -796,29 +845,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,
+        });
+    });
 }
 
 /**
@@ -827,17 +876,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;
 }
 
 /**
@@ -846,18 +895,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"])
+    );
 }
 
 /**
@@ -865,35 +914,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");
+        }
+    }
 }
 
 /**
@@ -901,50 +950,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));
 }
 
 /**
@@ -953,34 +1002,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;
 }
 
 /**
@@ -988,12 +1037,13 @@ function getButtonLabel(node) {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <template id="buttons">
             <button part="button"
                     data-monster-role="button"
                     data-monster-attributes="
+                    class path:classes.button,
                     data-monster-state path:buttons.state,
                     disabled path:buttons.disabled | if:true,                    
                     data-monster-tab-reference path:buttons.reference"><span