feat: new split-screen #171

source/components/form/style/tabs.pcss → source/components/layout/style/tabs.pcss

@@ -27,9 +27,6 @@ nav[data-monster-role=nav] {
     border-bottom-style: var(--monster-border-style);
     box-shadow: var(--monster-box-shadow-1);
     border-color: var(--monster-bg-color-primary-2);    
-    
-    flex-wrap: nowrap;
-    
 }
 
 [data-monster-role=nav] button .remove-tab {

source/components/layout/stylesheet/split-screen.mjs

+
+/**
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import {addAttributeToken} from "../../../dom/attributes.mjs";
+import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+
+export {SplitScreenStyleSheet}
+
+/**
+ * @private
+ * @type {CSSStyleSheet}
+ */
+const SplitScreenStyleSheet = new CSSStyleSheet();
+
+try {
+  SplitScreenStyleSheet.insertRule(`
+@layer splitscreen { 
+[data-monster-role=split-screen]{box-sizing:border-box;display:flex;flex-direction:row;height:auto;margin:0;padding:0;width:100%}[data-monster-role=split-screen] .panel{flex-grow:1;overflow:auto}[data-monster-role=split-screen] [data-monster-role=dragger]{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);height:auto;position:relative;width:var(--monster-border-width)}[data-monster-role=split-screen] [data-monster-role=dragger] [data-monster-role=handle]{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:pointer;height:120px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:5px;z-index:var(--monster-z-index-outline)}.horizontal[data-monster-role=split-screen]{flex-direction:column}.horizontal[data-monster-role=split-screen] [data-monster-role=dragger]{height:var(--monster-border-width);width:100%}.horizontal[data-monster-role=split-screen] [data-monster-role=dragger] [data-monster-role=handle]{height:5px;width:120px} 
+}`, 0);
+} catch (e) {
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+}

source/components/layout/tabs.mjs

+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+import { 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,
+} from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_PREFIX,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {
+	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,
+} from "../form/constants.mjs";
+
+import { TabsStyleSheet } from "./stylesheet/tabs.mjs";
+import { loadAndAssignContent } from "../form/util/fetch.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
+import {
+	popperInstanceSymbol,
+	setEventListenersModifiers,
+} from "../form/util/popper.mjs";
+
+export { Tabs };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperElementSymbol = Symbol("popperElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperNavElementSymbol = Symbol("popperNavElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const navElementSymbol = Symbol("navElement");
+/**
+ * @private
+ * @type {symbol}
+ */
+const switchElementSymbol = Symbol("switchElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const changeTabEventHandler = Symbol("changeTabEventHandler");
+/**
+ * @private
+ * @type {symbol}
+ */
+const removeTabEventHandler = Symbol("removeTabEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperSwitchEventHandler = Symbol("popperSwitchEventHandler");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const closeEventHandler = Symbol("closeEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const mutationObserverSymbol = Symbol("mutationObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dimensionsSymbol = Symbol("dimensions");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const timerCallbackSymbol = Symbol("timerCallback");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * This CustomControl creates a tab element with a variety of options.
+ *
+ * <img src="./images/tabs.png">
+ *
+ * You can create this control either by specifying the HTML tag `<monster-tabs />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-tabs');` method.
+ *
+ * ```html
+ * <monster-tabs></monster-tabs>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import {Tabs} from '@schukai/monster/components/layout/tabs.mjs';
+ * document.createElement('monster-tabs');
+ * ```
+ *
+ * @example <caption>Create a simple tab control</caption>
+ * <monster-tabs>
+ *     <div id="tab1">Tab 1</div>
+ *     <div id="tab2">Tab 2</div>
+ * </monster-tabs>
+ *
+ * @startuml tabs.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- Tabs
+ * @enduml
+ *
+ * @since 1.10.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Layout
+ * @summary A configurable tab control
+ * @fires Monster.Components.Layout.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/layout/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: "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");
+		const classList = this.getOption("classes.button");
+		if (classList) {
+			switchButton.classList.add(classList);
+		}
+		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;
+	}
+
+	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);
+		});
+}
+
+/**
+ * @private
+ */
+function togglePopper() {
+	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]);
+}
+
+/**
+ * @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,
+	});
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @external "external:createPopper"
+ * @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;
+}
+
+/**
+ * @private
+ * @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");
+
+			// 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() {
+	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.Layout.event:monster-tab-remove
+	 */
+
+	/**
+	 * @param {Event} event
+	 * @fires Monster.Components.Layout.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;
+}
+
+/**
+ * @private
+ * @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);
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @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]`,
+	);
+}
+
+/**
+ * @private
+ * @return {Promise<unknown>}
+ * @throws {Error} no shadow-root is defined
+ *
+ */
+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();
+	});
+}
+
+function checkAndRearrangeButtons() {
+	if (this[dimensionsSymbol].getVia("data.calculated", false) !== true) {
+		calculateNavigationButtonsDimensions.call(this);
+	}
+
+	rearrangeButtons.call(this);
+}
+
+/**
+ * @private
+ * @return {Promise<unknown>}
+ */
+function adjustButtonVisibility() {
+	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;
+
+			// in drawing
+			if (defCount !== domCount) return;
+
+			observer.disconnect();
+
+			checkAndRearrangeButtons.call(self);
+
+			resolve();
+		});
+
+		observer.observe(self[navElementSymbol], {
+			attributes: true,
+		});
+	});
+}
+
+/**
+ * @private
+ * @param {string} value
+ * @return {number}
+ */
+function getDimValue(value) {
+	if ([undefined, null].indexOf(value) !== -1) {
+		return 0;
+	}
+
+	const valueAsInt = parseInt(value, 10);
+
+	if (isNaN(valueAsInt)) {
+		return 0;
+	}
+
+	return valueAsInt;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} node
+ * @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"])
+	);
+}
+
+/**
+ * @private
+ * @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");
+		}
+	}
+}
+
+/**
+ * @private
+ * @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));
+}
+
+/**
+ * @private
+ * @param {HTMLElement} node
+ * @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;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// 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
+                    data-monster-replace="path:buttons.label"></span><span part="remove-tab"
+                                                                           data-monster-attributes="class path:buttons.remove | ?:remove-tab:hidden "
+                                                                           data-monster-role="remove-tab"
+                                                                           tabindex="-1"></span></button>
+        </template>
+        <div data-monster-role="control" part="control">
+            <nav data-monster-role="nav" part="nav"
+                 data-monster-attributes="data-monster-marker path:marker"
+                 data-monster-insert="buttons path:buttons.standard">
+                <slot name="start" class="invisible"></slot>
+                <div data-monster-role="popper" part="popper" tabindex="-1"
+					 data-monster-attributes="class path:classes.popper">
+                    <div data-popper-arrow></div>
+
+
+                    <div part="popper-nav" data-monster-role="popper-nav"
+                         data-monster-insert="buttons path:buttons.popper"
+                         tabindex="-1"></div>
+                </div>
+                <slot name="popper" class="invisible"></slot>
+                <slot name="end" class="invisible"></slot>
+            </nav>
+            <slot data-monster-role="slot" class="invisible"></slot>
+        </div>`;
+}
+
+registerCustomElement(Tabs);