@schukai/monster 4.34.1 → 4.35.0

package/source/components/layout/tabs.mjs

@@ -17,24 +17,24 @@ 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,
+  findTargetElementFromEvent,
+  fireCustomEvent,
 } from "../../dom/events.mjs";
 import { getDocument, getWindow } from "../../dom/util.mjs";
 import { random } from "../../math/random.mjs";
@@ -46,18 +46,18 @@ 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 "../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,
+  popperInstanceSymbol,
+  setEventListenersModifiers,
 } from "../form/util/popper.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 
@@ -161,315 +161,319 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * @summary This CustomControl creates a tab element with a variety of options.
  */
 class Tabs extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	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} features
-	 * @property {number} features.openDelay=500 Open delay in milliseconds
-	 * @property {string} features.removeBehavior="auto" Remove behavior, auto (default), next, previous and none
-	 * @property {boolean} features.openFirst=true Open the first 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: getTranslations(),
-			buttons: {
-				standard: [],
-				popper: [],
-			},
-			fetch: {
-				redirect: "error",
-				method: "GET",
-				mode: "same-origin",
-				credentials: "same-origin",
-				headers: {
-					accept: "text/html",
-				},
-			},
-
-			features: {
-				openDelay: null,
-				removeBehavior: "auto",
-				openFirst: true,
-			},
-
-			classes: {
-				button: "monster-theme-primary-1",
-				popper: "monster-theme-primary-1",
-				navigation: "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];
-	}
-
-	/**
-	 * This method is called internal and should not be called directly.
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-tabs";
-	}
-
-	/**
-	 * This method is called internal and should not be called directly.
-	 * @param tabId
-	 * @returns {Tabs}
-	 */
-	removeTab(tabId) {
-		const tabs = this.getTabs();
-		for (const tab of tabs) {
-			if ((tab.getAttribute("id") === tabId || tab.getAttribute("data-monster-name") === tabId) && tab.hasAttribute("data-monster-removable")) {
-				tab.remove();
-				initTabButtons.call(this);
-				return this;
-			}
-		}
-		return this;
-	}
-
-	/**
-	 * This method is called internal and should not be called directly.
-	 * @returns {[]}
-	 */
-	getTabs() {
-		const nodes = getSlottedElements.call(this);
-		const tabs = [];
-		for (const node of nodes) {
-			if (node instanceof HTMLElement) {
-				tabs.push(node);
-			}
-		}
-		return tabs;
-	}
-
-	/**
-	 * This method is called internal and should not be called directly.
-	 * @param content
-	 * @param active
-	 * @param label
-	 * @param tabId
-	 * @param removable
-	 * @returns {Tabs}
-	 */
-	addTab(content,  {
-		active    = false,
-		label     = null,
-		tabId     = null,
-		removable = true
-	} = {}  ) {
-		const tab = document.createElement("div");
-		if (!isString(label) || label.trim() === "") {
-			label = this.getOption("labels.new-tab-label");
-		}
-		tab.setAttribute("data-monster-button-label" ,label);
-
-		if (!isString(tabId) || tabId.trim() === "") {
-			let thisID = this.getAttribute("id");
-			if (!thisID) {
-				thisID = new ID("tab").toString();
-			}
-
-			tabId = new ID(thisID).toString();
-		}
-
-		// check if id is already used
-		const existingTabs = this.getTabs();
-		for (const existingTab of existingTabs) {
-			if (existingTab.getAttribute("id") === tabId || existingTab.getAttribute("data-monster-name") === tabId) {
-				throw new Error(`Tab with id "${tabId}" already exists.`);
-			}
-		}
-
-
-		tab.setAttribute("id", tabId);
-
-		if (active === true) {
-			tab.classList.add("active");
-		}
-
-		tab.setAttribute(ATTRIBUTE_ROLE, "tab");
-
-		if(removable === true) {
-			tab.setAttribute("data-monster-removable", "true");
-		}
-
-		if(content instanceof HTMLElement) {
-			tab.appendChild(content);
-		} else if (isString(content)) {
-			tab.innerHTML = content;
-		}
-
-		this.appendChild(tab);
-		return this
-	}
-
-	/**
-	 * A function that activates a tab based on the provided name.
-	 *
-	 * The tabs have to be named with the `data-monster-name` attribute.
-	 *
-	 * @param {type} idOrName - the name or id of the tab to activate
-	 * @return {Tabs} - The current instance
-	 */
-	activeTab(idOrName) {
-		let found = false;
-
-		getSlottedElements.call(this).forEach((node) => {
-			if (found === true) {
-				return;
-			}
-
-			if (node.getAttribute("data-monster-name") === idOrName) {
-				const tabControl = this.shadowRoot.querySelector(
-					`[data-monster-tab-reference="${node.getAttribute("id")}"]`,
-				);
-
-				if (tabControl) {
-					tabControl.click();
-					found = true;
-				}
-			}
-
-			if (node.getAttribute("id") === idOrName) {
-				const tabControl = this.shadowRoot.querySelector(
-					`[data-monster-tab-reference="${node.getAttribute("id")}"]`,
-				);
-
-				if (tabControl) {
-					tabControl.click();
-					found = true;
-				}
-			}
-		});
-
-		return this;
-	}
-
-	/**
-	 * A function that returns the name or id of the currently active tab.
-	 *
-	 * The tabs have to be named with the `data-monster-name` attribute.
-	 *
-	 * @return {string|null}
-	 */
-	getActiveTab() {
-		const nodes = getSlottedElements.call(this);
-		for (const node of nodes) {
-			if (node.matches(".active") === true) {
-				if (node.hasAttribute("data-monster-name")) {
-					return node.getAttribute("data-monster-name");
-				}
-
-				return node.getAttribute("id");
-			}
-		}
-		return null;
-	}
-
-	/**
-	 * 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.
+   * @return {symbol}
+   */
+  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} features
+   * @property {number} features.openDelay=500 Open delay in milliseconds
+   * @property {string} features.removeBehavior="auto" Remove behavior, auto (default), next, previous and none
+   * @property {boolean} features.openFirst=true Open the first 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: getTranslations(),
+      buttons: {
+        standard: [],
+        popper: [],
+      },
+      fetch: {
+        redirect: "error",
+        method: "GET",
+        mode: "same-origin",
+        credentials: "same-origin",
+        headers: {
+          accept: "text/html",
+        },
+      },
+
+      features: {
+        openDelay: null,
+        removeBehavior: "auto",
+        openFirst: true,
+      },
+
+      classes: {
+        button: "monster-theme-primary-1",
+        popper: "monster-theme-primary-1",
+        navigation: "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];
+  }
+
+  /**
+   * This method is called internal and should not be called directly.
+   *
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-tabs";
+  }
+
+  /**
+   * This method is called internal and should not be called directly.
+   * @param tabId
+   * @returns {Tabs}
+   */
+  removeTab(tabId) {
+    const tabs = this.getTabs();
+    for (const tab of tabs) {
+      if (
+        (tab.getAttribute("id") === tabId ||
+          tab.getAttribute("data-monster-name") === tabId) &&
+        tab.hasAttribute("data-monster-removable")
+      ) {
+        tab.remove();
+        initTabButtons.call(this);
+        return this;
+      }
+    }
+    return this;
+  }
+
+  /**
+   * This method is called internal and should not be called directly.
+   * @returns {[]}
+   */
+  getTabs() {
+    const nodes = getSlottedElements.call(this);
+    const tabs = [];
+    for (const node of nodes) {
+      if (node instanceof HTMLElement) {
+        tabs.push(node);
+      }
+    }
+    return tabs;
+  }
+
+  /**
+   * This method is called internal and should not be called directly.
+   * @param content
+   * @param active
+   * @param label
+   * @param tabId
+   * @param removable
+   * @returns {Tabs}
+   */
+  addTab(
+    content,
+    { active = false, label = null, tabId = null, removable = true } = {},
+  ) {
+    const tab = document.createElement("div");
+    if (!isString(label) || label.trim() === "") {
+      label = this.getOption("labels.new-tab-label");
+    }
+    tab.setAttribute("data-monster-button-label", label);
+
+    if (!isString(tabId) || tabId.trim() === "") {
+      let thisID = this.getAttribute("id");
+      if (!thisID) {
+        thisID = new ID("tab").toString();
+      }
+
+      tabId = new ID(thisID).toString();
+    }
+
+    // check if id is already used
+    const existingTabs = this.getTabs();
+    for (const existingTab of existingTabs) {
+      if (
+        existingTab.getAttribute("id") === tabId ||
+        existingTab.getAttribute("data-monster-name") === tabId
+      ) {
+        throw new Error(`Tab with id "${tabId}" already exists.`);
+      }
+    }
+
+    tab.setAttribute("id", tabId);
+
+    if (active === true) {
+      tab.classList.add("active");
+    }
+
+    tab.setAttribute(ATTRIBUTE_ROLE, "tab");
+
+    if (removable === true) {
+      tab.setAttribute("data-monster-removable", "true");
+    }
+
+    if (content instanceof HTMLElement) {
+      tab.appendChild(content);
+    } else if (isString(content)) {
+      tab.innerHTML = content;
+    }
+
+    this.appendChild(tab);
+    return this;
+  }
+
+  /**
+   * A function that activates a tab based on the provided name.
+   *
+   * The tabs have to be named with the `data-monster-name` attribute.
+   *
+   * @param {type} idOrName - the name or id of the tab to activate
+   * @return {Tabs} - The current instance
+   */
+  activeTab(idOrName) {
+    let found = false;
+
+    getSlottedElements.call(this).forEach((node) => {
+      if (found === true) {
+        return;
+      }
+
+      if (node.getAttribute("data-monster-name") === idOrName) {
+        const tabControl = this.shadowRoot.querySelector(
+          `[data-monster-tab-reference="${node.getAttribute("id")}"]`,
+        );
+
+        if (tabControl) {
+          tabControl.click();
+          found = true;
+        }
+      }
+
+      if (node.getAttribute("id") === idOrName) {
+        const tabControl = this.shadowRoot.querySelector(
+          `[data-monster-tab-reference="${node.getAttribute("id")}"]`,
+        );
+
+        if (tabControl) {
+          tabControl.click();
+          found = true;
+        }
+      }
+    });
+
+    return this;
+  }
+
+  /**
+   * A function that returns the name or id of the currently active tab.
+   *
+   * The tabs have to be named with the `data-monster-name` attribute.
+   *
+   * @return {string|null}
+   */
+  getActiveTab() {
+    const nodes = getSlottedElements.call(this);
+    for (const node of nodes) {
+      if (node.matches(".active") === true) {
+        if (node.hasAttribute("data-monster-name")) {
+          return node.getAttribute("data-monster-name");
+        }
+
+        return node.getAttribute("id");
+      }
+    }
+    return null;
+  }
+
+  /**
+   * 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]);
+    }
+  }
 }
 
 /**
@@ -477,188 +481,188 @@ class Tabs extends CustomElement {
  * @returns {object}
  */
 function getTranslations() {
-	const locale = getLocaleOfDocument();
-	switch (locale.language) {
-		case "de":
-			return {
-				"new-tab-label": "Neuer Tab",
-			};
-		case "fr":
-			return {
-				"new-tab-label": "Nouvel Onglet",
-			};
-		case "sp":
-			return {
-				"new-tab-label": "Nueva Pestaña",
-			};
-		case "it":
-			return {
-				"new-tab-label": "Nuova Scheda",
-			};
-		case "pl":
-			return {
-				"new-tab-label": "Nowa Karta",
-			};
-		case "no":
-			return {
-				"new-tab-label": "Ny Fane",
-			};
-		case "dk":
-			return {
-				"new-tab-label": "Ny Fane",
-			};
-		case "sw":
-			return {
-				"new-tab-label": "Ny Flik",
-			};
-		default:
-		case "en":
-			return {
-				"new-tab-label": "New Tab",
-			};
-	}
+  const locale = getLocaleOfDocument();
+  switch (locale.language) {
+    case "de":
+      return {
+        "new-tab-label": "Neuer Tab",
+      };
+    case "fr":
+      return {
+        "new-tab-label": "Nouvel Onglet",
+      };
+    case "sp":
+      return {
+        "new-tab-label": "Nueva Pestaña",
+      };
+    case "it":
+      return {
+        "new-tab-label": "Nuova Scheda",
+      };
+    case "pl":
+      return {
+        "new-tab-label": "Nowa Karta",
+      };
+    case "no":
+      return {
+        "new-tab-label": "Ny Fane",
+      };
+    case "dk":
+      return {
+        "new-tab-label": "Ny Fane",
+      };
+    case "sw":
+      return {
+        "new-tab-label": "Ny Flik",
+      };
+    default:
+    case "en":
+      return {
+        "new-tab-label": "New Tab",
+      };
+  }
 }
 
 /**
  * @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;
+  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;
-	}
+  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,
+  });
 }
 
 /**
@@ -667,41 +671,41 @@ function attachTabChangeObserver() {
  * @external "external:createPopper"
  */
 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;
 }
 
 /**
@@ -709,226 +713,230 @@ 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");
-
-			const openDelay = Number.parseInt(
-				this.getOption("features.openDelay"),
-				10,
-			);
-
-			if (!Number.isNaN(openDelay) && openDelay > 0) {
-				node.style.visibility = "hidden";
-
-				setTimeout(() => {
-					node.style.visibility = "visible";
-				}, openDelay);
-			}
-
-			// 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);
+  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");
+
+      fireCustomEvent(this, "monster-tab-change", {
+        reference,
+      });
+
+      const openDelay = Number.parseInt(
+        this.getOption("features.openDelay"),
+        10,
+      );
+
+      if (!Number.isNaN(openDelay) && openDelay > 0) {
+        node.style.visibility = "hidden";
+
+        setTimeout(() => {
+          node.style.visibility = "visible";
+        }, openDelay);
+      }
+
+      // 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
-	 * @fires 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`,
-				);
-
-				let doChange = false;
-				let nextName = null;
-				let previousName = null;
-
-				const btn = this.getOption("buttons");
-				for (let i = 0; i < btn.standard.length; i++) {
-					if (btn.standard[i].reference === reference) {
-						if (btn.standard[i].state === "active") {
-							doChange = i;
-							if (i < btn.standard.length - 1) {
-								nextName = btn.standard[i + 1]?.reference;
-							}
-							if (i > 0) {
-								previousName = btn.standard[i - 1]?.reference;
-							}
-						}
-						break;
-					}
-				}
-
-				if (reference) {
-					const container = this.querySelector(`[id=${reference}]`);
-					if (container instanceof HTMLElement) {
-						if (doChange) {
-							switch (this.getOption("features.removeBehavior")) {
-								case "auto":
-									if (nextName !== null) {
-										self.activeTab(nextName);
-									} else {
-										if (previousName !== null) {
-											self.activeTab(previousName);
-										}
-									}
-									break;
-								case "next":
-									if (nextName !== null) {
-										self.activeTab(nextName);
-									}
-									break;
-								case "previous":
-									if (previousName !== null) {
-										self.activeTab(previousName);
-									}
-									break;
-
-								default: // and "none"
-									break;
-							}
-						}
-
-						container.remove();
-						initTabButtons.call(this);
-						fireCustomEvent(this, "monster-tab-remove", {
-							reference,
-						});
-					}
-				}
-			}
-		}
-	};
-
-	/**
-	 * @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[closeEventHandler] = (event) => {
-		const path = event.composedPath();
-
-		for (const [, element] of Object.entries(path)) {
-			if (element === this) {
-				return;
-			}
-		}
-
-		hidePopper.call(this);
-	};
-
-	// the order is important, because the remove must be before the change
-	this[navElementSymbol].addEventListener("touch", this[removeTabEventHandler]);
-	this[navElementSymbol].addEventListener("click", this[removeTabEventHandler]);
-
-	this[navElementSymbol].addEventListener("touch", this[changeTabEventHandler]);
-	this[navElementSymbol].addEventListener("click", this[changeTabEventHandler]);
-
-	return this;
+  const self = this;
+
+  if (!this.shadowRoot) {
+    throw new Error("no shadow-root is defined");
+  }
+
+  /**
+   * @param {Event} event
+   * @fires 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`,
+        );
+
+        let doChange = false;
+        let nextName = null;
+        let previousName = null;
+
+        const btn = this.getOption("buttons");
+        for (let i = 0; i < btn.standard.length; i++) {
+          if (btn.standard[i].reference === reference) {
+            if (btn.standard[i].state === "active") {
+              doChange = i;
+              if (i < btn.standard.length - 1) {
+                nextName = btn.standard[i + 1]?.reference;
+              }
+              if (i > 0) {
+                previousName = btn.standard[i - 1]?.reference;
+              }
+            }
+            break;
+          }
+        }
+
+        if (reference) {
+          const container = this.querySelector(`[id=${reference}]`);
+          if (container instanceof HTMLElement) {
+            if (doChange) {
+              switch (this.getOption("features.removeBehavior")) {
+                case "auto":
+                  if (nextName !== null) {
+                    self.activeTab(nextName);
+                  } else {
+                    if (previousName !== null) {
+                      self.activeTab(previousName);
+                    }
+                  }
+                  break;
+                case "next":
+                  if (nextName !== null) {
+                    self.activeTab(nextName);
+                  }
+                  break;
+                case "previous":
+                  if (previousName !== null) {
+                    self.activeTab(previousName);
+                  }
+                  break;
+
+                default: // and "none"
+                  break;
+              }
+            }
+
+            container.remove();
+            initTabButtons.call(this);
+            fireCustomEvent(this, "monster-tab-remove", {
+              reference,
+            });
+          }
+        }
+      }
+    }
+  };
+
+  /**
+   * @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[closeEventHandler] = (event) => {
+    const path = event.composedPath();
+
+    for (const [, element] of Object.entries(path)) {
+      if (element === this) {
+        return;
+      }
+    }
+
+    hidePopper.call(this);
+  };
+
+  // the order is important, because the remove must be before the change
+  this[navElementSymbol].addEventListener("touch", this[removeTabEventHandler]);
+  this[navElementSymbol].addEventListener("click", this[removeTabEventHandler]);
+
+  this[navElementSymbol].addEventListener("touch", this[changeTabEventHandler]);
+  this[navElementSymbol].addEventListener("click", this[changeTabEventHandler]);
+
+  return this;
 }
 
 /**
@@ -936,37 +944,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);
 }
 
 /**
@@ -975,22 +983,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]`,
+  );
 }
 
 /**
@@ -1000,110 +1008,110 @@ 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" alt="this is an 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 && this.getOption("features.openFirst") === true) {
-			const firstButton = this.getOption("buttons.standard").find(
-				(button) => button.disabled !== true,
-			);
-			if (firstButton) {
-				activeReference = firstButton.reference;
-			}
-		}
-
-		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" alt="this is an 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 && this.getOption("features.openFirst") === true) {
+      const firstButton = this.getOption("buttons.standard").find(
+        (button) => button.disabled !== true,
+      );
+      if (firstButton) {
+        activeReference = firstButton.reference;
+      }
+    }
+
+    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);
 }
 
 /**
@@ -1111,29 +1119,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,
+    });
+  });
 }
 
 /**
@@ -1142,17 +1150,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;
 }
 
 /**
@@ -1161,18 +1169,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"])
+  );
 }
 
 /**
@@ -1180,40 +1188,40 @@ function calcBoxWidth(node) {
  * @return {Object}
  */
 function rearrangeButtons() {
-	getWindow().requestAnimationFrame(() => {
-		const standardButtons = [];
-		const popperButtons = [];
-		let sum = 0;
-		const space = this[dimensionsSymbol].getVia("data.space");
-
-		if (space <= 0) {
-			return;
-		}
-
-		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");
-			}
-		}
-	});
+  getWindow().requestAnimationFrame(() => {
+    const standardButtons = [];
+    const popperButtons = [];
+    let sum = 0;
+    const space = this[dimensionsSymbol].getVia("data.space");
+
+    if (space <= 0) {
+      return;
+    }
+
+    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");
+      }
+    }
+  });
 }
 
 /**
@@ -1221,53 +1229,53 @@ 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.setOption("buttons.standard", clone(buttons));
-
-	getWindow().requestAnimationFrame(() => {
-		this[dimensionsSymbol].setVia("data.calculated", true);
-	});
+  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.setOption("buttons.standard", clone(buttons));
+
+  getWindow().requestAnimationFrame(() => {
+    this[dimensionsSymbol].setVia("data.calculated", true);
+  });
 }
 
 /**
@@ -1276,34 +1284,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;
 }
 
 /**
@@ -1311,8 +1319,8 @@ function getButtonLabel(node) {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
         <template id="buttons">
             <button part="button"
                     tabindex="0"