@schukai/monster 4.145.2 → 4.146.0

package/test/cases/components/layout/tabs.mjs

@@ -1,15 +1,14 @@
-import {getGlobal} from "../../../../source/types/global.mjs";
-import * as chai from 'chai';
-import {chaiDom} from "../../../util/chai-dom.mjs";
-import {initJSDOM} from "../../../util/jsdom.mjs";
-import {ResizeObserverMock} from "../../../util/resize-observer.mjs";
+import { getGlobal } from "../../../../source/types/global.mjs";
+import * as chai from "chai";
+import { chaiDom } from "../../../util/chai-dom.mjs";
+import { initJSDOM } from "../../../util/jsdom.mjs";
+import { ResizeObserverMock } from "../../../util/resize-observer.mjs";
 
 let expect = chai.expect;
 chai.use(chaiDom);
 
 const global = getGlobal();
 
-
 // language=html
 let html1 = `
     <monster-tabs id="mytabs">
@@ -145,7 +144,8 @@ let htmlNoDerivedLabel = `
     </monster-tabs>
 `;
 
-const svgTabIcon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 15H1z'/%3E%3C/svg%3E";
+const svgTabIcon =
+	"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M8 1 15 15H1z'/%3E%3C/svg%3E";
 const pngTabIcon = "data:image/png;base64,iVBORw0KGgo=";
 
 // language=html
@@ -180,7 +180,7 @@ let VerticalTabs;
 let restoreBoundingClientRect = null;
 let restoreResizeObserver = null;
 
-function waitForCondition(check, {timeout = 4000, interval = 10} = {}) {
+function waitForCondition(check, { timeout = 4000, interval = 10 } = {}) {
 	const startedAt = Date.now();
 
 	return new Promise((resolve, reject) => {
@@ -196,7 +196,7 @@ function waitForCondition(check, {timeout = 4000, interval = 10} = {}) {
 			}
 
 			if (Date.now() - startedAt > timeout) {
-				reject(new Error('condition timed out'));
+				reject(new Error("condition timed out"));
 				return;
 			}
 
@@ -207,39 +207,129 @@ function waitForCondition(check, {timeout = 4000, interval = 10} = {}) {
 	});
 }
 
-describe('Tabs', function () {
+function createRect({ width, height = 40, x = 0, y = 0 }) {
+	return {
+		width,
+		height,
+		top: y,
+		left: x,
+		right: x + width,
+		bottom: y + height,
+		x,
+		y,
+	};
+}
+
+function installOverflowTabGeometryMock({
+	navWidth = 480,
+	switchWidth = 44,
+} = {}) {
+	const originalGetBoundingClientRect =
+		global.HTMLElement.prototype.getBoundingClientRect;
+
+	global.HTMLElement.prototype.getBoundingClientRect = function () {
+		const role = this.getAttribute?.("data-monster-role");
+		const label = this.textContent?.trim() || "";
+
+		if (role === "nav") {
+			return createRect({ width: navWidth });
+		}
 
-    before(function (done) {
-        initJSDOM().then(() => {
+		if (role === "button") {
+			return createRect({ width: Math.max(70, label.length * 11) });
+		}
 
-            import("element-internals-polyfill").catch(e => done(e));
-            
-            let promises = []
+		if (role === "switch") {
+			return createRect({ width: switchWidth });
+		}
 
-            if (!global['crypto']) {
-                promises.push(import("@peculiar/webcrypto").then((m) => {
-                    const Crypto = m['Crypto'];
-                    global['crypto'] = new Crypto();
-                }));
-            }
+		return originalGetBoundingClientRect.call(this);
+	};
 
-            promises.push(import("../../../../source/components/layout/tabs.mjs").then((m) => {
-                Tabs = m['Tabs'];
-            }))
-            promises.push(import("../../../../source/components/layout/vertical-tabs.mjs").then((m) => {
-                VerticalTabs = m['VerticalTabs'];
-            }))
+	return () => {
+		global.HTMLElement.prototype.getBoundingClientRect =
+			originalGetBoundingClientRect;
+	};
+}
 
-            Promise.all(promises).then(()=>{
-                done();
-            }).catch(e => done(e))
+function createDragEvent(type, reference) {
+	const event = new Event(type, {
+		bubbles: true,
+		cancelable: true,
+		composed: true,
+	});
+	event.dataTransfer = {
+		effectAllowed: "",
+		dropEffect: "",
+		setData(format, value) {
+			this[format] = value;
+		},
+		getData(format) {
+			return this[format] || "";
+		},
+	};
+	if (reference) {
+		event.dataTransfer.setData("text/plain", reference);
+	}
+	return event;
+}
+
+function dragTab(tabs, sourceReference, targetReference) {
+	const sourceButton = tabs.shadowRoot.querySelector(
+		`button[part=button][data-monster-tab-reference="${sourceReference}"]`,
+	);
+	const targetButton = tabs.shadowRoot.querySelector(
+		`button[part=button][data-monster-tab-reference="${targetReference}"]`,
+	);
+
+	expect(sourceButton).to.not.equal(null);
+	expect(targetButton).to.not.equal(null);
+
+	sourceButton.dispatchEvent(createDragEvent("dragstart", sourceReference));
+	targetButton.dispatchEvent(createDragEvent("dragover", sourceReference));
+	targetButton.dispatchEvent(createDragEvent("drop", sourceReference));
+	sourceButton.dispatchEvent(createDragEvent("dragend", sourceReference));
+}
 
-        });
-    })
+describe("Tabs", function () {
+	before(function (done) {
+		initJSDOM().then(() => {
+			import("element-internals-polyfill").catch((e) => done(e));
 
-    describe('document.createElement()', function () {
+			let promises = [];
 
-        afterEach(() => {
+			if (!global["crypto"]) {
+				promises.push(
+					import("@peculiar/webcrypto").then((m) => {
+						const Crypto = m["Crypto"];
+						global["crypto"] = new Crypto();
+					}),
+				);
+			}
+
+			promises.push(
+				import("../../../../source/components/layout/tabs.mjs").then((m) => {
+					Tabs = m["Tabs"];
+				}),
+			);
+			promises.push(
+				import("../../../../source/components/layout/vertical-tabs.mjs").then(
+					(m) => {
+						VerticalTabs = m["VerticalTabs"];
+					},
+				),
+			);
+
+			Promise.all(promises)
+				.then(() => {
+					done();
+				})
+				.catch((e) => done(e));
+		});
+	});
+
+	describe("document.createElement()", function () {
+		afterEach(() => {
 			if (restoreBoundingClientRect instanceof Function) {
 				restoreBoundingClientRect();
 				restoreBoundingClientRect = null;
@@ -248,136 +338,147 @@ describe('Tabs', function () {
 				restoreResizeObserver();
 				restoreResizeObserver = null;
 			}
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = "";
-        })
-
-        it('should have buttons and tabs', function (done) {
-
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = html1;
-
-            setTimeout(() => {
-                try {
-                    const tabs = document.getElementById('mytabs')
-                    expect(tabs).is.instanceof(Tabs);
-
-                    setTimeout(() => {
-                        let nav = tabs.shadowRoot.querySelector('nav');
-                        const buttons = tabs.shadowRoot.querySelectorAll('button[part=button]');
-                        expect(buttons[0]).is.instanceof(HTMLButtonElement);
-                        expect(nav.hasChildNodes()).to.be.true;
-                        expect(buttons.length).to.be.equal(4);
-                        done();
-                    }, 100)
-
-                } catch (e) {
-                    return done(e);
-                }
-
-            }, 0)
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = "";
+		});
 
+		it("should have buttons and tabs", function (done) {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
 
-        });
+			setTimeout(() => {
+				try {
+					const tabs = document.getElementById("mytabs");
+					expect(tabs).is.instanceof(Tabs);
 
-		it('should shorten label from content when no explicit label is provided', function (done) {
+					setTimeout(() => {
+						let nav = tabs.shadowRoot.querySelector("nav");
+						const buttons = tabs.shadowRoot.querySelectorAll(
+							"button[part=button]",
+						);
+						expect(buttons[0]).is.instanceof(HTMLButtonElement);
+						expect(nav.hasChildNodes()).to.be.true;
+						expect(buttons.length).to.be.equal(4);
+						done();
+					}, 100);
+				} catch (e) {
+					return done(e);
+				}
+			}, 0);
+		});
 
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = html1;
+		it("should shorten label from content when no explicit label is provided", function (done) {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
 
 			setTimeout(() => {
 				try {
-					const tabs = document.getElementById('mytabs');
+					const tabs = document.getElementById("mytabs");
 					expect(tabs).is.instanceof(Tabs);
 
 					setTimeout(() => {
 						const thirdTab = tabs.children[2];
 						expect(thirdTab).to.not.equal(undefined);
-						const reference = thirdTab.getAttribute('id');
+						const reference = thirdTab.getAttribute("id");
 						expect(reference).to.not.equal(null);
 						const button = tabs.shadowRoot.querySelector(
 							`button[part=button][data-monster-tab-reference="${reference}"]`,
 						);
 						expect(button).to.not.equal(null);
-						const labelSpan = button.querySelector('span[data-monster-replace]');
+						const labelSpan = button.querySelector(
+							"span[data-monster-replace]",
+						);
 						expect(labelSpan).to.not.equal(null);
-						expect(labelSpan.textContent.trim()).to.equal('Das ist tab…');
+						expect(labelSpan.textContent.trim()).to.equal("Das ist tab…");
 						done();
 					}, 100);
 				} catch (e) {
 					return done(e);
-                }
-            }, 0);
-        });
-
-		it('should open the first tab by default when no tab is predefined as active', function (done) {
+				}
+			}, 0);
+		});
 
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = html1;
+		it("should open the first tab by default when no tab is predefined as active", function (done) {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
 
 			setTimeout(() => {
 				try {
-					const tabs = document.getElementById('mytabs');
+					const tabs = document.getElementById("mytabs");
 					expect(tabs).is.instanceof(Tabs);
 
 					setTimeout(() => {
-						expect(tabs.children[0].classList.contains('active')).to.equal(true);
-						expect(tabs.children[1].classList.contains('active')).to.equal(false);
-						expect(tabs.getActiveTab()).to.equal(tabs.children[0].getAttribute('id'));
+						expect(tabs.children[0].classList.contains("active")).to.equal(
+							true,
+						);
+						expect(tabs.children[1].classList.contains("active")).to.equal(
+							false,
+						);
+						expect(tabs.getActiveTab()).to.equal(
+							tabs.children[0].getAttribute("id"),
+						);
 						done();
 					}, 100);
 				} catch (e) {
 					return done(e);
-                }
-            }, 0);
-        });
-
-		it('should keep a predefined active tab instead of opening the first tab', function (done) {
+				}
+			}, 0);
+		});
 
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = htmlActiveSecond;
+		it("should keep a predefined active tab instead of opening the first tab", function (done) {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = htmlActiveSecond;
 
 			setTimeout(() => {
 				try {
-					const tabs = document.getElementById('mytabs');
+					const tabs = document.getElementById("mytabs");
 					expect(tabs).is.instanceof(Tabs);
 
 					setTimeout(() => {
-						expect(tabs.children[0].classList.contains('active')).to.equal(false);
-						expect(tabs.children[1].classList.contains('active')).to.equal(true);
-						expect(tabs.getActiveTab()).to.equal(tabs.children[1].getAttribute('id'));
+						expect(tabs.children[0].classList.contains("active")).to.equal(
+							false,
+						);
+						expect(tabs.children[1].classList.contains("active")).to.equal(
+							true,
+						);
+						expect(tabs.getActiveTab()).to.equal(
+							tabs.children[1].getAttribute("id"),
+						);
 						done();
 					}, 100);
 				} catch (e) {
 					return done(e);
-                }
-            }, 0);
-        });
-
-		it('should configure flip and shift middleware for the overflow popper', function (done) {
+				}
+			}, 0);
+		});
 
-            let mocks = document.getElementById('mocks');
-            mocks.innerHTML = html1;
+		it("should configure flip and shift middleware for the overflow popper", function (done) {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = html1;
 
 			setTimeout(() => {
 				try {
-					const tabs = document.getElementById('mytabs');
+					const tabs = document.getElementById("mytabs");
 					expect(tabs).is.instanceof(Tabs);
 
-					const modifiers = tabs.getOption('popper.modifiers');
-					expect(modifiers.some((entry) => entry?.name === 'flip')).to.equal(true);
-					expect(modifiers.some((entry) => entry?.name === 'shift')).to.equal(true);
+					const modifiers = tabs.getOption("popper.modifiers");
+					expect(modifiers.some((entry) => entry?.name === "flip")).to.equal(
+						true,
+					);
+					expect(modifiers.some((entry) => entry?.name === "shift")).to.equal(
+						true,
+					);
 					done();
 				} catch (e) {
 					return done(e);
-                }
-            }, 0);
-        });
+				}
+			}, 0);
+		});
 
-		it('should move overflowing tabs into the popper without losing them', function (done) {
+		it("should move overflowing tabs into the popper without losing them", function (done) {
 			this.timeout(5000);
 
-            let mocks = document.getElementById('mocks');
+			let mocks = document.getElementById("mocks");
 			const OriginalResizeObserver = window.ResizeObserver;
 			const originalGlobalResizeObserver = global.ResizeObserver;
 			class TrackingResizeObserver extends ResizeObserverMock {
@@ -398,54 +499,17 @@ describe('Tabs', function () {
 				window.ResizeObserver = OriginalResizeObserver;
 				global.ResizeObserver = originalGlobalResizeObserver;
 			};
-			const originalGetBoundingClientRect =
-				global.HTMLElement.prototype.getBoundingClientRect;
-			restoreBoundingClientRect = () => {
-				global.HTMLElement.prototype.getBoundingClientRect =
-					originalGetBoundingClientRect;
-			};
-			global.HTMLElement.prototype.getBoundingClientRect = function () {
-				const role = this.getAttribute?.('data-monster-role');
-				const label = this.textContent?.trim() || '';
-
-				if (role === 'nav') {
-					return {
-						width: 480,
-						height: 40,
-						top: 0,
-						left: 0,
-						right: 480,
-						bottom: 40,
-						x: 0,
-						y: 0,
-					};
-				}
+			restoreBoundingClientRect = installOverflowTabGeometryMock();
 
-				if (role === 'button') {
-					return {
-						width: Math.max(70, label.length * 11),
-						height: 40,
-						top: 0,
-						left: 0,
-						right: 0,
-						bottom: 40,
-						x: 0,
-						y: 0,
-					};
-				}
-
-				return originalGetBoundingClientRect.call(this);
-			};
-
-            mocks.innerHTML = htmlOverflow;
+			mocks.innerHTML = htmlOverflow;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('overflow-tabs');
+				const tabs = document.getElementById("overflow-tabs");
 				const switchButton = tabs?.shadowRoot?.querySelector(
 					'[data-monster-role="switch"]',
 				);
-				const standardButtons = tabs?.getOption?.('buttons.standard') || [];
-				const popperButtons = tabs?.getOption?.('buttons.popper') || [];
+				const standardButtons = tabs?.getOption?.("buttons.standard") || [];
+				const popperButtons = tabs?.getOption?.("buttons.popper") || [];
 
 				return (
 					tabs instanceof Tabs &&
@@ -453,406 +517,751 @@ describe('Tabs', function () {
 					standardButtons.length > 0 &&
 					popperButtons.length > 0 &&
 					standardButtons.length + popperButtons.length === 11 &&
-					switchButton.classList.contains('hidden') === false
+					switchButton.classList.contains("hidden") === false
 				);
-			}).then(() => {
-				try {
-					const tabs = document.getElementById('overflow-tabs');
-					expect(tabs).is.instanceof(Tabs);
-					const switchButton = tabs.shadowRoot.querySelector(
-						'[data-monster-role="switch"]',
-					);
-					let standardButtons = tabs.getOption('buttons.standard');
-					let popperButtons = tabs.getOption('buttons.popper');
+			})
+				.then(() => {
+					let tabs;
+					let originalSetOption;
+					try {
+						tabs = document.getElementById("overflow-tabs");
+						expect(tabs).is.instanceof(Tabs);
+						const switchButton = tabs.shadowRoot.querySelector(
+							'[data-monster-role="switch"]',
+						);
+						let standardButtons = tabs.getOption("buttons.standard");
+						let popperButtons = tabs.getOption("buttons.popper");
+
+						expect(switchButton).to.not.equal(null);
+						expect(standardButtons.length).to.be.greaterThan(0);
+						expect(popperButtons.length).to.be.greaterThan(0);
+						expect(standardButtons.length + popperButtons.length).to.equal(11);
+						expect(switchButton.classList.contains("hidden")).to.equal(false);
+
+						const resizeObserver = TrackingResizeObserver.instances.find(
+							(observer) =>
+								observer.elements.includes(
+									tabs.shadowRoot.querySelector('[data-monster-role="nav"]'),
+								),
+						);
+						expect(resizeObserver).to.not.equal(undefined);
+
+						originalSetOption = tabs.setOption.bind(tabs);
+						let resetAllTabsDuringResize = false;
+						tabs.setOption = function (path, value) {
+							if (
+								path === "buttons" &&
+								value?.standard?.length === 11 &&
+								value?.popper?.length === 0
+							) {
+								resetAllTabsDuringResize = true;
+							}
+							return originalSetOption(path, value);
+						};
+
+						resizeObserver.triggerResize([]);
 
-					expect(switchButton).to.not.equal(null);
-					expect(standardButtons.length).to.be.greaterThan(0);
-					expect(popperButtons.length).to.be.greaterThan(0);
-					expect(standardButtons.length + popperButtons.length).to.equal(11);
-					expect(switchButton.classList.contains('hidden')).to.equal(false);
+						return waitForCondition(() => {
+							return TrackingResizeObserver.callbackCount > 0;
+						})
+							.then(() => {
+								return new Promise((resolve) => setTimeout(resolve, 260));
+							})
+							.then(() => {
+								return new Promise((resolve) => requestAnimationFrame(resolve));
+							})
+							.then(() => {
+								tabs.setOption = originalSetOption;
+								expect(resetAllTabsDuringResize).to.equal(false);
+								standardButtons = tabs.getOption("buttons.standard");
+								popperButtons = tabs.getOption("buttons.popper");
+								expect(standardButtons.length).to.be.greaterThan(0);
+								expect(popperButtons.length).to.be.greaterThan(0);
+								expect(standardButtons.length + popperButtons.length).to.equal(
+									11,
+								);
+								expect(
+									new Set(
+										standardButtons
+											.concat(popperButtons)
+											.map((button) => button.reference),
+									).size,
+								).to.equal(11);
+							})
+							.then(() => {
+								restoreBoundingClientRect();
+								restoreBoundingClientRect = null;
+								restoreResizeObserver();
+								restoreResizeObserver = null;
+								done();
+							});
+					} catch (e) {
+						if (tabs && originalSetOption) {
+							tabs.setOption = originalSetOption;
+						}
+						restoreBoundingClientRect();
+						restoreBoundingClientRect = null;
+						restoreResizeObserver();
+						restoreResizeObserver = null;
+						return done(e);
+					}
+				})
+				.catch((e) => {
+					const tabs = document.getElementById("overflow-tabs");
+					if (tabs && Object.prototype.hasOwnProperty.call(tabs, "setOption")) {
+						delete tabs.setOption;
+					}
+					if (restoreBoundingClientRect instanceof Function) {
+						restoreBoundingClientRect();
+						restoreBoundingClientRect = null;
+					}
+					if (restoreResizeObserver instanceof Function) {
+						restoreResizeObserver();
+						restoreResizeObserver = null;
+					}
+					done(e);
+				});
+		});
 
-					const resizeObserver = TrackingResizeObserver.instances.find(
-						(observer) => observer.elements.includes(tabs.shadowRoot.querySelector('[data-monster-role="nav"]')),
+		it("should preserve the overflow split and recalculate widths while rebuilding tab buttons", async function () {
+			this.timeout(5000);
+
+			const mocks = document.getElementById("mocks");
+			restoreBoundingClientRect = installOverflowTabGeometryMock();
+
+			let tabs;
+			let originalSetOption;
+
+			try {
+				mocks.innerHTML = htmlOverflow;
+
+				await waitForCondition(() => {
+					tabs = document.getElementById("overflow-tabs");
+					const standardButtons = tabs?.getOption?.("buttons.standard") || [];
+					const popperButtons = tabs?.getOption?.("buttons.popper") || [];
+
+					return (
+						tabs instanceof Tabs &&
+						standardButtons.length > 0 &&
+						popperButtons.length > 0 &&
+						standardButtons.length + popperButtons.length === 11
 					);
-					expect(resizeObserver).to.not.equal(undefined);
-					resizeObserver.triggerResize([]);
+				});
 
-					return waitForCondition(() => {
-						return (
-							TrackingResizeObserver.callbackCount > 0 &&
-							tabs.getOption('buttons.standard').length === 11 &&
-							tabs.getOption('buttons.popper').length === 0
-						);
-					}).then(() => {
-						return waitForCondition(() => {
-							standardButtons = tabs.getOption('buttons.standard');
-							popperButtons = tabs.getOption('buttons.popper');
+				const initialPopperCount = tabs.getOption("buttons.popper").length;
+				const standardReference = tabs.getOption(
+					"buttons.standard.0.reference",
+				);
+				const panel = document.getElementById(standardReference);
+				expect(panel).to.not.equal(null);
+
+				originalSetOption = tabs.setOption.bind(tabs);
+				let resetAllTabsDuringRebuild = false;
+				tabs.setOption = function (path, value) {
+					if (
+						path === "buttons" &&
+						value?.standard?.length === 11 &&
+						value?.popper?.length === 0
+					) {
+						resetAllTabsDuringRebuild = true;
+					}
+					return originalSetOption(path, value);
+				};
+
+				panel.setAttribute(
+					"data-monster-button-label",
+					"Aktualisierte sehr lange Tab Beschriftung mit viel mehr Platzbedarf",
+				);
+
+				await waitForCondition(() => {
+					return tabs
+						.getOption("buttons.standard", [])
+						.concat(tabs.getOption("buttons.popper", []))
+						.some((button) => {
 							return (
-								standardButtons.length > 0 &&
-								popperButtons.length > 0 &&
-								standardButtons.length + popperButtons.length === 11 &&
-								new Set(
-									standardButtons
-										.concat(popperButtons)
-										.map((button) => button.reference),
-								).size === 11
+								button.reference === standardReference &&
+								button.label.includes("Aktualisierte")
 							);
 						});
-					}).then(() => {
-						restoreBoundingClientRect();
-						restoreBoundingClientRect = null;
-						restoreResizeObserver();
-						restoreResizeObserver = null;
-						done();
-					});
-				} catch (e) {
-					restoreBoundingClientRect();
-					restoreBoundingClientRect = null;
-					restoreResizeObserver();
-					restoreResizeObserver = null;
-					return done(e);
-                }
-			}).catch((e) => {
-				if (restoreBoundingClientRect instanceof Function) {
-					restoreBoundingClientRect();
-					restoreBoundingClientRect = null;
-				}
-				if (restoreResizeObserver instanceof Function) {
-					restoreResizeObserver();
-					restoreResizeObserver = null;
+				});
+				await waitForCondition(() => {
+					return tabs.getOption("buttons.popper").length > initialPopperCount;
+				});
+
+				tabs.setOption = originalSetOption;
+				expect(resetAllTabsDuringRebuild).to.equal(false);
+				expect(tabs.getOption("buttons.popper").length).to.be.greaterThan(0);
+				expect(
+					tabs
+						.getOption("buttons.standard")
+						.concat(tabs.getOption("buttons.popper")).length,
+				).to.equal(11);
+			} finally {
+				if (tabs && originalSetOption) {
+					tabs.setOption = originalSetOption;
 				}
-				done(e);
-			});
-        });
+				restoreBoundingClientRect();
+				restoreBoundingClientRect = null;
+			}
+		});
 
-		it('should ignore unavailable panels when creating tabs and buttons', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should ignore unavailable panels when creating tabs and buttons", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlAvailability;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('availability-tabs');
+				const tabs = document.getElementById("availability-tabs");
 				return (
 					tabs instanceof Tabs &&
-					tabs.shadowRoot.querySelectorAll('button[part=button]').length === 2 &&
-					tabs.getActiveTab() === 'overview'
+					tabs.shadowRoot.querySelectorAll("button[part=button]").length ===
+						2 &&
+					tabs.getActiveTab() === "overview"
 				);
-			}).then(() => {
-				try {
-					const tabs = document.getElementById('availability-tabs');
-					const vacation = document.getElementById('vacation-panel');
-					const buttons = tabs.shadowRoot.querySelectorAll('button[part=button]');
-
-					expect(tabs.getTabs().length).to.equal(2);
-					expect(tabs.getTabs().includes(vacation)).to.equal(false);
-					expect(tabs.shadowRoot.querySelector(
-						`button[part=button][data-monster-tab-reference="${vacation.getAttribute('id')}"]`,
-					)).to.equal(null);
-					expect(buttons[0].textContent.trim()).to.equal('Overview');
-					expect(buttons[1].textContent.trim()).to.equal('Details');
-					expect(tabs.getActiveTab()).to.equal('overview');
-					done();
-				} catch (e) {
-					done(e);
-				}
-			}).catch(done);
+			})
+				.then(() => {
+					try {
+						const tabs = document.getElementById("availability-tabs");
+						const vacation = document.getElementById("vacation-panel");
+						const buttons = tabs.shadowRoot.querySelectorAll(
+							"button[part=button]",
+						);
+
+						expect(tabs.getTabs().length).to.equal(2);
+						expect(tabs.getTabs().includes(vacation)).to.equal(false);
+						expect(
+							tabs.shadowRoot.querySelector(
+								`button[part=button][data-monster-tab-reference="${vacation.getAttribute("id")}"]`,
+							),
+						).to.equal(null);
+						expect(buttons[0].textContent.trim()).to.equal("Overview");
+						expect(buttons[1].textContent.trim()).to.equal("Details");
+						expect(tabs.getActiveTab()).to.equal("overview");
+						done();
+					} catch (e) {
+						done(e);
+					}
+				})
+				.catch(done);
 		});
 
-		it('should ignore unavailable tabs in activeTab and rebuild when they become available', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should ignore unavailable tabs in activeTab and rebuild when they become available", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlAvailability;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('availability-tabs');
-				return tabs instanceof Tabs && tabs.getActiveTab() === 'overview';
-			}).then(() => {
-				const tabs = document.getElementById('availability-tabs');
-				const vacation = document.getElementById('vacation-panel');
-				let availabilityEvent = null;
-				tabs.addEventListener('monster-tab-availability-changed', (event) => {
-					availabilityEvent = event;
-				});
+				const tabs = document.getElementById("availability-tabs");
+				return tabs instanceof Tabs && tabs.getActiveTab() === "overview";
+			})
+				.then(() => {
+					const tabs = document.getElementById("availability-tabs");
+					const vacation = document.getElementById("vacation-panel");
+					let availabilityEvent = null;
+					tabs.addEventListener("monster-tab-availability-changed", (event) => {
+						availabilityEvent = event;
+					});
 
-				tabs.activeTab('vacation');
-				expect(tabs.getActiveTab()).to.equal('overview');
+					tabs.activeTab("vacation");
+					expect(tabs.getActiveTab()).to.equal("overview");
 
-				vacation.setAttribute('data-monster-tab-available', 'true');
+					vacation.setAttribute("data-monster-tab-available", "true");
 
-				return waitForCondition(() => {
-					return tabs.shadowRoot.querySelectorAll('button[part=button]').length === 3;
-				}).then(() => {
-					try {
-						expect(availabilityEvent).to.not.equal(null);
-						expect(availabilityEvent.detail.name).to.equal('vacation');
-						expect(availabilityEvent.detail.available).to.equal(true);
+					return waitForCondition(() => {
+						return (
+							tabs.shadowRoot.querySelectorAll("button[part=button]").length ===
+							3
+						);
+					}).then(() => {
+						try {
+							expect(availabilityEvent).to.not.equal(null);
+							expect(availabilityEvent.detail.name).to.equal("vacation");
+							expect(availabilityEvent.detail.available).to.equal(true);
 
-						tabs.activeTab('vacation');
-						expect(tabs.getActiveTab()).to.equal('vacation');
-						done();
-					} catch (e) {
-						done(e);
-					}
-				}, 100);
-			}).catch(done);
+							tabs.activeTab("vacation");
+							expect(tabs.getActiveTab()).to.equal("vacation");
+							done();
+						} catch (e) {
+							done(e);
+						}
+					}, 100);
+				})
+				.catch(done);
 		});
 
-		it('should fallback when the active tab becomes unavailable', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should fallback when the active tab becomes unavailable", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlActiveUnavailable;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('fallback-tabs');
-				return tabs instanceof Tabs && tabs.getActiveTab() === 'second';
-			}).then(() => {
-				const tabs = document.getElementById('fallback-tabs');
-				const activePanel = document.getElementById('second-panel');
-				activePanel.setAttribute('data-monster-tab-available', 'false');
-
-				return waitForCondition(() => tabs.getActiveTab() === 'first').then(() => {
-					try {
-						expect(activePanel.classList.contains('active')).to.equal(false);
-						expect(tabs.shadowRoot.querySelectorAll('button[part=button]').length).to.equal(2);
-						done();
-					} catch (e) {
-						done(e);
-					}
-				});
-			}).catch(done);
+				const tabs = document.getElementById("fallback-tabs");
+				return tabs instanceof Tabs && tabs.getActiveTab() === "second";
+			})
+				.then(() => {
+					const tabs = document.getElementById("fallback-tabs");
+					const activePanel = document.getElementById("second-panel");
+					activePanel.setAttribute("data-monster-tab-available", "false");
+
+					return waitForCondition(() => tabs.getActiveTab() === "first").then(
+						() => {
+							try {
+								expect(activePanel.classList.contains("active")).to.equal(
+									false,
+								);
+								expect(
+									tabs.shadowRoot.querySelectorAll("button[part=button]")
+										.length,
+								).to.equal(2);
+								done();
+							} catch (e) {
+								done(e);
+							}
+						},
+					);
+				})
+				.catch(done);
 		});
 
-		it('should fallback when the active tab is removed directly', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should fallback when the active tab is removed directly", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlRemoveFallback;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('remove-fallback-tabs');
+				const tabs = document.getElementById("remove-fallback-tabs");
 				return (
 					tabs instanceof Tabs &&
-					tabs.getActiveTab() === 'second' &&
-					tabs.shadowRoot.querySelectorAll('button[part=button]').length === 3
+					tabs.getActiveTab() === "second" &&
+					tabs.shadowRoot.querySelectorAll("button[part=button]").length === 3
 				);
-			}).then(() => {
-				const tabs = document.getElementById('remove-fallback-tabs');
-				setTimeout(() => {
-					document.getElementById('remove-second-panel').remove();
-
-					waitForCondition(() => tabs.getActiveTab() === 'first').then(() => {
-						try {
-							expect(tabs.shadowRoot.querySelectorAll('button[part=button]').length).to.equal(2);
-							done();
-						} catch (e) {
-							done(e);
-						}
-					}).catch(done);
-				});
-			}).catch(done);
+			})
+				.then(() => {
+					const tabs = document.getElementById("remove-fallback-tabs");
+					setTimeout(() => {
+						document.getElementById("remove-second-panel").remove();
+
+						waitForCondition(() => tabs.getActiveTab() === "first")
+							.then(() => {
+								try {
+									expect(
+										tabs.shadowRoot.querySelectorAll("button[part=button]")
+											.length,
+									).to.equal(2);
+									done();
+								} catch (e) {
+									done(e);
+								}
+							})
+							.catch(done);
+					});
+				})
+				.catch(done);
 		});
 
-		it('should keep disabled tabs visible but not activatable', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should keep disabled tabs visible but not activatable", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlDisabled;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('disabled-tabs');
-				const disabledPanel = document.getElementById('disabled-panel');
+				const tabs = document.getElementById("disabled-tabs");
+				const disabledPanel = document.getElementById("disabled-panel");
 				const disabledButton = tabs?.shadowRoot?.querySelector(
-					`button[part=button][data-monster-tab-reference="${disabledPanel?.getAttribute('id')}"]`,
+					`button[part=button][data-monster-tab-reference="${disabledPanel?.getAttribute("id")}"]`,
 				);
 				return (
 					tabs instanceof Tabs &&
 					disabledButton instanceof HTMLButtonElement &&
-					tabs.getActiveTab() === 'enabled'
+					tabs.getActiveTab() === "enabled"
 				);
-			}).then(() => {
-				try {
-					const tabs = document.getElementById('disabled-tabs');
-					const disabledPanel = document.getElementById('disabled-panel');
-					const disabledButton = tabs.shadowRoot.querySelector(
-						`button[part=button][data-monster-tab-reference="${disabledPanel.getAttribute('id')}"]`,
-					);
+			})
+				.then(() => {
+					try {
+						const tabs = document.getElementById("disabled-tabs");
+						const disabledPanel = document.getElementById("disabled-panel");
+						const disabledButton = tabs.shadowRoot.querySelector(
+							`button[part=button][data-monster-tab-reference="${disabledPanel.getAttribute("id")}"]`,
+						);
 
-					expect(disabledButton.disabled).to.equal(true);
-					expect(disabledButton.getAttribute('title')).to.equal('Only available for employees');
-					tabs.activeTab('disabled');
-					expect(tabs.getActiveTab()).to.equal('enabled');
-					done();
-				} catch (e) {
-					done(e);
-				}
-			}).catch(done);
+						expect(disabledButton.disabled).to.equal(true);
+						expect(disabledButton.getAttribute("title")).to.equal(
+							"Only available for employees",
+						);
+						tabs.activeTab("disabled");
+						expect(tabs.getActiveTab()).to.equal("enabled");
+						done();
+					} catch (e) {
+						done(e);
+					}
+				})
+				.catch(done);
 		});
 
-		it('should expose refresh, sync, hide and show APIs', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should expose refresh, sync, hide and show APIs", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlAvailability;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('availability-tabs');
-				return tabs instanceof Tabs && tabs.shadowRoot.querySelectorAll('button[part=button]').length === 2;
-			}).then(() => {
-				const tabs = document.getElementById('availability-tabs');
-
-				tabs.showTab('vacation');
-				return tabs.refreshTabs().then((result) => {
-					expect(result).to.equal(tabs);
-					expect(tabs.getTabs().length).to.equal(3);
-
-					tabs.hideTab('vacation');
-					return tabs.syncTabs();
-				}).then((result) => {
-					try {
-						expect(result).to.equal(tabs);
-						expect(tabs.getTabs().length).to.equal(2);
-						expect(document.getElementById('vacation-panel').getAttribute('data-monster-tab-available')).to.equal('false');
-						done();
-					} catch (e) {
-						done(e);
-					}
-				});
-			}).catch(done);
+				const tabs = document.getElementById("availability-tabs");
+				return (
+					tabs instanceof Tabs &&
+					tabs.shadowRoot.querySelectorAll("button[part=button]").length === 2
+				);
+			})
+				.then(() => {
+					const tabs = document.getElementById("availability-tabs");
+
+					tabs.showTab("vacation");
+					return tabs
+						.refreshTabs()
+						.then((result) => {
+							expect(result).to.equal(tabs);
+							expect(tabs.getTabs().length).to.equal(3);
+
+							tabs.hideTab("vacation");
+							return tabs.syncTabs();
+						})
+						.then((result) => {
+							try {
+								expect(result).to.equal(tabs);
+								expect(tabs.getTabs().length).to.equal(2);
+								expect(
+									document
+										.getElementById("vacation-panel")
+										.getAttribute("data-monster-tab-available"),
+								).to.equal("false");
+								done();
+							} catch (e) {
+								done(e);
+							}
+						});
+				})
+				.catch(done);
 		});
 
-		it('should not derive labels from content when disabled by option', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should not derive labels from content when disabled by option", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlNoDerivedLabel;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('label-tabs');
-				return tabs instanceof Tabs && tabs.shadowRoot.querySelector('button[part=button]') !== null;
-			}).then(() => {
-				try {
-					const tabs = document.getElementById('label-tabs');
-					const button = tabs.shadowRoot.querySelector('button[part=button]');
-					expect(button.textContent.trim()).to.equal('New Tab');
-					expect(document.getElementById('content-panel').hasAttribute('data-monster-button-label')).to.equal(false);
-					done();
-				} catch (e) {
-					done(e);
-				}
-			}).catch(done);
+				const tabs = document.getElementById("label-tabs");
+				return (
+					tabs instanceof Tabs &&
+					tabs.shadowRoot.querySelector("button[part=button]") !== null
+				);
+			})
+				.then(() => {
+					try {
+						const tabs = document.getElementById("label-tabs");
+						const button = tabs.shadowRoot.querySelector("button[part=button]");
+						expect(button.textContent.trim()).to.equal("New Tab");
+						expect(
+							document
+								.getElementById("content-panel")
+								.hasAttribute("data-monster-button-label"),
+						).to.equal(false);
+						done();
+					} catch (e) {
+						done(e);
+					}
+				})
+				.catch(done);
 		});
 
-		it('should render SVG tab icons as theme-aware masks by default', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should render SVG tab icons as theme-aware masks by default", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlIconModes;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('icon-mode-tabs');
-				return tabs instanceof Tabs && tabs.shadowRoot.querySelectorAll('button[part=button]').length === 4;
-			}).then(() => {
-				try {
-					const tabs = document.getElementById('icon-mode-tabs');
-					const getIcon = (reference) => tabs.shadowRoot.querySelector(
-						`button[part=button][data-monster-tab-reference="${reference}"] [part=icon]`,
-					);
-
-					const autoSvgIcon = getIcon('auto-svg-panel');
-					expect(autoSvgIcon.tagName).to.equal('SPAN');
-					expect(autoSvgIcon.getAttribute('data-monster-icon-mode')).to.equal('mask');
-					expect(autoSvgIcon.getAttribute('aria-hidden')).to.equal('true');
-					expect(autoSvgIcon.getAttribute('style')).to.contain('--monster-tab-icon-mask-image');
-
-					const imageSvgIcon = getIcon('image-svg-panel');
-					expect(imageSvgIcon.tagName).to.equal('IMG');
-					expect(imageSvgIcon.getAttribute('data-monster-icon-mode')).to.equal('image');
-					expect(imageSvgIcon.getAttribute('src')).to.equal(svgTabIcon);
+				const tabs = document.getElementById("icon-mode-tabs");
+				return (
+					tabs instanceof Tabs &&
+					tabs.shadowRoot.querySelectorAll("button[part=button]").length === 4
+				);
+			})
+				.then(() => {
+					try {
+						const tabs = document.getElementById("icon-mode-tabs");
+						const getIcon = (reference) =>
+							tabs.shadowRoot.querySelector(
+								`button[part=button][data-monster-tab-reference="${reference}"] [part=icon]`,
+							);
 
-					const autoRasterIcon = getIcon('auto-raster-panel');
-					expect(autoRasterIcon.tagName).to.equal('IMG');
-					expect(autoRasterIcon.getAttribute('data-monster-icon-mode')).to.equal('image');
-					expect(autoRasterIcon.getAttribute('src')).to.equal(pngTabIcon);
+						const autoSvgIcon = getIcon("auto-svg-panel");
+						expect(autoSvgIcon.tagName).to.equal("SPAN");
+						expect(autoSvgIcon.getAttribute("data-monster-icon-mode")).to.equal(
+							"mask",
+						);
+						expect(autoSvgIcon.getAttribute("aria-hidden")).to.equal("true");
+						expect(autoSvgIcon.getAttribute("style")).to.contain(
+							"--monster-tab-icon-mask-image",
+						);
 
-					const maskRasterIcon = getIcon('mask-raster-panel');
-					expect(maskRasterIcon.tagName).to.equal('SPAN');
-					expect(maskRasterIcon.getAttribute('data-monster-icon-mode')).to.equal('mask');
-					expect(maskRasterIcon.getAttribute('style')).to.contain('--monster-tab-icon-mask-image');
+						const imageSvgIcon = getIcon("image-svg-panel");
+						expect(imageSvgIcon.tagName).to.equal("IMG");
+						expect(
+							imageSvgIcon.getAttribute("data-monster-icon-mode"),
+						).to.equal("image");
+						expect(imageSvgIcon.getAttribute("src")).to.equal(svgTabIcon);
+
+						const autoRasterIcon = getIcon("auto-raster-panel");
+						expect(autoRasterIcon.tagName).to.equal("IMG");
+						expect(
+							autoRasterIcon.getAttribute("data-monster-icon-mode"),
+						).to.equal("image");
+						expect(autoRasterIcon.getAttribute("src")).to.equal(pngTabIcon);
+
+						const maskRasterIcon = getIcon("mask-raster-panel");
+						expect(maskRasterIcon.tagName).to.equal("SPAN");
+						expect(
+							maskRasterIcon.getAttribute("data-monster-icon-mode"),
+						).to.equal("mask");
+						expect(maskRasterIcon.getAttribute("style")).to.contain(
+							"--monster-tab-icon-mask-image",
+						);
 
-					done();
-				} catch (e) {
-					done(e);
-				}
-			}).catch(done);
+						done();
+					} catch (e) {
+						done(e);
+					}
+				})
+				.catch(done);
 		});
 
-		it('should update tab icon mode when the icon mode attribute changes', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should update tab icon mode when the icon mode attribute changes", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlIconModes;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('icon-mode-tabs');
-				return tabs instanceof Tabs && tabs.shadowRoot.querySelectorAll('button[part=button]').length === 4;
-			}).then(() => {
-				const tabs = document.getElementById('icon-mode-tabs');
-				const panel = document.getElementById('image-svg-panel');
-				panel.setAttribute('data-monster-button-icon-mode', 'mask');
-
-				return waitForCondition(() => {
-					const icon = tabs.shadowRoot.querySelector(
-						'button[part=button][data-monster-tab-reference="image-svg-panel"] [part=icon]',
-					);
-					return icon?.tagName === 'SPAN' && icon.getAttribute('data-monster-icon-mode') === 'mask';
-				});
-			}).then(() => {
-				done();
-			}).catch(done);
+				const tabs = document.getElementById("icon-mode-tabs");
+				return (
+					tabs instanceof Tabs &&
+					tabs.shadowRoot.querySelectorAll("button[part=button]").length === 4
+				);
+			})
+				.then(() => {
+					const tabs = document.getElementById("icon-mode-tabs");
+					const panel = document.getElementById("image-svg-panel");
+					panel.setAttribute("data-monster-button-icon-mode", "mask");
+
+					return waitForCondition(() => {
+						const icon = tabs.shadowRoot.querySelector(
+							'button[part=button][data-monster-tab-reference="image-svg-panel"] [part=icon]',
+						);
+						return (
+							icon?.tagName === "SPAN" &&
+							icon.getAttribute("data-monster-icon-mode") === "mask"
+						);
+					});
+				})
+				.then(() => {
+					done();
+				})
+				.catch(done);
 		});
 
-		it('should render vertical tab SVG icons as theme-aware masks by default', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should render vertical tab SVG icons as theme-aware masks by default", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlVerticalIconModes;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('vertical-icon-mode-tabs');
-				return tabs instanceof VerticalTabs && tabs.shadowRoot.querySelector('button[part=button] [part=icon]') !== null;
-			}).then(() => {
-				try {
-					const tabs = document.getElementById('vertical-icon-mode-tabs');
-					const icon = tabs.shadowRoot.querySelector(
-						'button[part=button][data-monster-tab-reference="vertical-auto-svg-panel"] [part=icon]',
-					);
-					expect(icon.tagName).to.equal('SPAN');
-					expect(icon.getAttribute('data-monster-icon-mode')).to.equal('mask');
-					expect(icon.getAttribute('style')).to.contain('--monster-tab-icon-mask-image');
-					done();
-				} catch (e) {
-					done(e);
-				}
-			}).catch(done);
+				const tabs = document.getElementById("vertical-icon-mode-tabs");
+				return (
+					tabs instanceof VerticalTabs &&
+					tabs.shadowRoot.querySelector("button[part=button] [part=icon]") !==
+						null
+				);
+			})
+				.then(() => {
+					try {
+						const tabs = document.getElementById("vertical-icon-mode-tabs");
+						const icon = tabs.shadowRoot.querySelector(
+							'button[part=button][data-monster-tab-reference="vertical-auto-svg-panel"] [part=icon]',
+						);
+						expect(icon.tagName).to.equal("SPAN");
+						expect(icon.getAttribute("data-monster-icon-mode")).to.equal(
+							"mask",
+						);
+						expect(icon.getAttribute("style")).to.contain(
+							"--monster-tab-icon-mask-image",
+						);
+						done();
+					} catch (e) {
+						done(e);
+					}
+				})
+				.catch(done);
 		});
 
-		it('should include stable names and metadata in tab events and buttons', function (done) {
-			let mocks = document.getElementById('mocks');
+		it("should include stable names and metadata in tab events and buttons", function (done) {
+			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = htmlMetadata;
 
 			waitForCondition(() => {
-				const tabs = document.getElementById('metadata-tabs');
-				return tabs instanceof Tabs && tabs.shadowRoot.querySelector('button[part=button]') !== null;
-			}).then(() => {
-				try {
-					const tabs = document.getElementById('metadata-tabs');
-					const button = tabs.shadowRoot.querySelector('button[part=button]');
-					let changedEvent = null;
-					tabs.addEventListener('monster-tab-changed', (event) => {
-						changedEvent = event;
-					});
+				const tabs = document.getElementById("metadata-tabs");
+				return (
+					tabs instanceof Tabs &&
+					tabs.shadowRoot.querySelector("button[part=button]") !== null
+				);
+			})
+				.then(() => {
+					try {
+						const tabs = document.getElementById("metadata-tabs");
+						const button = tabs.shadowRoot.querySelector("button[part=button]");
+						let changedEvent = null;
+						tabs.addEventListener("monster-tab-changed", (event) => {
+							changedEvent = event;
+						});
 
-					expect(button.getAttribute('data-monster-tab-name')).to.equal('metadata');
-					expect(button.getAttribute('data-monster-tab-kind')).to.equal('profile');
-					expect(button.getAttribute('data-monster-tab-priority')).to.equal('10');
-					expect(button.getAttribute('data-monster-tab-group')).to.equal('main');
+						expect(button.getAttribute("data-monster-tab-name")).to.equal(
+							"metadata",
+						);
+						expect(button.getAttribute("data-monster-tab-kind")).to.equal(
+							"profile",
+						);
+						expect(button.getAttribute("data-monster-tab-priority")).to.equal(
+							"10",
+						);
+						expect(button.getAttribute("data-monster-tab-group")).to.equal(
+							"main",
+						);
 
-					tabs.activeTab('metadata');
-					expect(changedEvent).to.not.equal(null);
-					expect(changedEvent.detail.name).to.equal('metadata');
-					expect(changedEvent.detail.tab).to.equal('metadata');
-					expect(changedEvent.detail.metadata.kind).to.equal('profile');
-					done();
-				} catch (e) {
-					done(e);
-				}
-			}).catch(done);
+						tabs.activeTab("metadata");
+						expect(changedEvent).to.not.equal(null);
+						expect(changedEvent.detail.name).to.equal("metadata");
+						expect(changedEvent.detail.tab).to.equal("metadata");
+						expect(changedEvent.detail.metadata.kind).to.equal("profile");
+						done();
+					} catch (e) {
+						done(e);
+					}
+				})
+				.catch(done);
 		});
 
-    });
+		it("should reorder tabs by drag and drop without persisting by default", function (done) {
+			let mocks = document.getElementById("mocks");
+			mocks.innerHTML = `
+				<monster-host id="tab-host"></monster-host>
+			`;
+			const host = document.getElementById("tab-host");
+			let savedConfig = null;
+			host.hasConfig = () => Promise.resolve(false);
+			host.getConfig = () => Promise.resolve([]);
+			host.setConfig = (key, value) => {
+				savedConfig = { key, value };
+				return Promise.resolve(value);
+			};
+			host.innerHTML = `
+				<monster-tabs id="reorder-tabs">
+					<div id="first-tab" data-monster-name="first" data-monster-button-label="First">First</div>
+					<div id="second-tab" data-monster-name="second" data-monster-button-label="Second">Second</div>
+					<div id="third-tab" data-monster-name="third" data-monster-button-label="Third">Third</div>
+				</monster-tabs>
+			`;
 
+			waitForCondition(() => {
+				const tabs = document.getElementById("reorder-tabs");
+				return (
+					tabs instanceof Tabs &&
+					tabs.shadowRoot.querySelectorAll(
+						'button[part=button][draggable="true"]',
+					).length === 3
+				);
+			})
+				.then(() => {
+					const tabs = document.getElementById("reorder-tabs");
+					let orderEvent = null;
+					tabs.addEventListener("monster-tab-order-changed", (event) => {
+						orderEvent = event;
+					});
+
+					dragTab(tabs, "first-tab", "third-tab");
 
+					return waitForCondition(() => {
+						return (
+							Array.from(tabs.children)
+								.map((node) => node.id)
+								.join(",") === "second-tab,third-tab,first-tab" &&
+							orderEvent !== null
+						);
+					}).then(() => {
+						try {
+							expect(savedConfig).to.equal(null);
+							expect(orderEvent.detail.order).to.deep.equal([
+								"second",
+								"third",
+								"first",
+							]);
+							expect(tabs.getOption("features.order.persist")).to.equal(false);
+							done();
+						} catch (e) {
+							done(e);
+						}
+					});
+				})
+				.catch(done);
+		});
+
+		it("should persist and restore tab order when configured", function (done) {
+			let mocks = document.getElementById("mocks");
+			const saved = new Map();
+			mocks.innerHTML = `
+				<monster-host id="persistent-tab-host"></monster-host>
+			`;
+			const host = document.getElementById("persistent-tab-host");
+			host.hasConfig = (key) => Promise.resolve(saved.has(key));
+			host.getConfig = (key) => Promise.resolve(saved.get(key));
+			host.setConfig = (key, value) => {
+				saved.set(key, value);
+				return Promise.resolve(value);
+			};
+			host.innerHTML = `
+				<monster-tabs id="persistent-tabs" data-monster-options='{"features":{"order":{"persist":true}},"config":{"instanceKey":"workspace.tabs"}}'>
+					<div id="persist-first" data-monster-name="first" data-monster-button-label="First">First</div>
+					<div id="persist-second" data-monster-name="second" data-monster-button-label="Second">Second</div>
+					<div id="persist-third" data-monster-name="third" data-monster-button-label="Third">Third</div>
+				</monster-tabs>
+			`;
+
+			waitForCondition(() => {
+				const tabs = document.getElementById("persistent-tabs");
+				return (
+					tabs instanceof Tabs &&
+					tabs.shadowRoot.querySelectorAll("button[part=button]").length === 3
+				);
+			})
+				.then(() => {
+					const tabs = document.getElementById("persistent-tabs");
+					dragTab(tabs, "persist-first", "persist-third");
+
+					return waitForCondition(() => saved.size === 1)
+						.then(() => {
+							const [key, value] = Array.from(saved.entries())[0];
+							expect(key).to.equal("tab_order_tabs_workspace_tabs");
+							expect(value).to.deep.equal(["second", "third", "first"]);
+
+							host.innerHTML = `
+						<monster-tabs id="persistent-tabs-reloaded" data-monster-options='{"features":{"order":{"persist":true}},"config":{"instanceKey":"workspace.tabs"}}'>
+							<div id="reload-first" data-monster-name="first" data-monster-button-label="First">First</div>
+							<div id="reload-second" data-monster-name="second" data-monster-button-label="Second">Second</div>
+							<div id="reload-third" data-monster-name="third" data-monster-button-label="Third">Third</div>
+						</monster-tabs>
+					`;
+
+							return waitForCondition(() => {
+								const reloaded = document.getElementById(
+									"persistent-tabs-reloaded",
+								);
+								return (
+									reloaded instanceof Tabs &&
+									Array.from(reloaded.children)
+										.map((node) => node.id)
+										.join(",") === "reload-second,reload-third,reload-first"
+								);
+							});
+						})
+						.then(() => {
+							done();
+						});
+				})
+				.catch(done);
+		});
+	});
 });