@schukai/monster 4.145.2 → 4.146.0

package/source/components/layout/tabs.mjs

@@ -35,7 +35,11 @@ import {
 	findTargetElementFromEvent,
 	fireCustomEvent,
 } from "../../dom/events.mjs";
-import { getDocument, getWindow } from "../../dom/util.mjs";
+import {
+	findElementWithSelectorUpwards,
+	getDocument,
+	getWindow,
+} from "../../dom/util.mjs";
 import { random } from "../../math/random.mjs";
 import { getGlobal } from "../../types/global.mjs";
 import { ID } from "../../types/id.mjs";
@@ -60,6 +64,7 @@ import {
 	setEventListenersModifiers,
 } from "../form/util/popper.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import { generateComponentConfigKey } from "../host/util.mjs";
 
 export { Tabs };
 
@@ -86,6 +91,12 @@ const controlElementSymbol = Symbol("controlElement");
  * @type {symbol}
  */
 const navElementSymbol = Symbol("navElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const measurementNavElementSymbol = Symbol("measurementNavElement");
 /**
  * @private
  * @type {symbol}
@@ -103,6 +114,30 @@ const changeTabEventHandler = Symbol("changeTabEventHandler");
  */
 const removeTabEventHandler = Symbol("removeTabEventHandler");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const dragStartEventHandler = Symbol("dragStartEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dragOverEventHandler = Symbol("dragOverEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dropEventHandler = Symbol("dropEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dragEndEventHandler = Symbol("dragEndEventHandler");
+
 /**
  * @private
  * @type {symbol}
@@ -154,6 +189,42 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  */
 const activeReferenceSymbol = Symbol("activeReference");
 
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const draggingReferenceSymbol = Symbol("draggingReference");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const suppressOrderConfigSaveSymbol = Symbol("suppressOrderConfigSave");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const rearrangeFrameSymbol = Symbol("rearrangeFrame");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const buttonCollectionsSignatureSymbol = Symbol("buttonCollectionsSignature");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const layoutSignatureHistorySymbol = Symbol("layoutSignatureHistory");
+
+const LAYOUT_SWITCH_HYSTERESIS = 16;
+const LAYOUT_OSCILLATION_HISTORY_LIMIT = 4;
+const LAYOUT_OSCILLATION_TIME_WINDOW_MS = 1000;
+
 /**
  * A Tabs Control
  *
@@ -197,6 +268,11 @@ class Tabs extends CustomElement {
 	 * @property {string} features.removeBehavior Remove behavior, auto, next, previous and none
 	 * @property {boolean} features.openFirst Open the first tab when no active tab is set
 	 * @property {boolean} features.deriveLabelFromContent=true Generate labels from panel text when no `data-monster-button-label` is set
+	 * @property {Object} features.order Tab ordering features
+	 * @property {boolean} features.order.drag=true Allow tab headers to be reordered by drag and drop
+	 * @property {boolean} features.order.persist=false Persist reordered tabs through the host config manager
+	 * @property {Object} config Host configuration options
+	 * @property {string} config.instanceKey Stable config identity for persisted tab order
 	 *
 	 * Tab panels can use `data-monster-name` as stable public identity, while
 	 * DOM ids remain the internal button reference. `data-monster-tab-available`
@@ -250,6 +326,14 @@ class Tabs extends CustomElement {
 				removeBehavior: "auto",
 				openFirst: true,
 				deriveLabelFromContent: true,
+				order: {
+					drag: true,
+					persist: false,
+				},
+			},
+
+			config: {
+				instanceKey: null,
 			},
 
 			classes: {
@@ -305,11 +389,22 @@ class Tabs extends CustomElement {
 		attachTabChangeObserver.call(this);
 
 		// setup structure
-		initTabButtons.call(this).then(() => {
-			initPopperSwitch.call(this);
-			initPopper.call(this);
-			attachResizeObserver.call(this);
-		});
+		const initTabs =
+			isTabOrderPersistenceEnabled.call(this) === true
+				? initTabOrderFromHostConfig
+						.call(this)
+						.then(() => initTabButtons.call(this))
+				: initTabButtons.call(this);
+
+		initTabs
+			.then(() => {
+				initPopperSwitch.call(this);
+				initPopper.call(this);
+				attachResizeObserver.call(this);
+			})
+			.catch((e) => {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+			});
 	}
 
 	/**
@@ -553,6 +648,26 @@ class Tabs extends CustomElement {
 
 		this[popperInstanceSymbol]?.destroy();
 		this[tabListMutationObserverSymbol]?.disconnect();
+		this[resizeObserverSymbol]?.disconnect();
+		this[navElementSymbol]?.removeEventListener(
+			"dragstart",
+			this[dragStartEventHandler],
+		);
+		this[navElementSymbol]?.removeEventListener(
+			"dragover",
+			this[dragOverEventHandler],
+		);
+		this[navElementSymbol]?.removeEventListener("drop", this[dropEventHandler]);
+		this[navElementSymbol]?.removeEventListener(
+			"dragend",
+			this[dragEndEventHandler],
+		);
+		if (this[rearrangeFrameSymbol] !== undefined) {
+			getWindow().cancelAnimationFrame(this[rearrangeFrameSymbol]);
+			delete this[rearrangeFrameSymbol];
+		}
+		this[measurementNavElementSymbol]?.remove();
+		delete this[measurementNavElementSymbol];
 	}
 }
 
@@ -1233,6 +1348,93 @@ function initEventHandler() {
 	this[navElementSymbol].addEventListener("touch", this[changeTabEventHandler]);
 	this[navElementSymbol].addEventListener("click", this[changeTabEventHandler]);
 
+	this[dragStartEventHandler] = (event) => {
+		if (isTabDragEnabled.call(this) !== true) {
+			return;
+		}
+
+		const button = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
+		if (!(button instanceof HTMLButtonElement) || button.disabled === true) {
+			return;
+		}
+
+		const reference = button.getAttribute(`${ATTRIBUTE_PREFIX}tab-reference`);
+		if (!reference) {
+			return;
+		}
+
+		this[draggingReferenceSymbol] = reference;
+		button.setAttribute("data-monster-dragging", "true");
+		event.dataTransfer?.setData("text/plain", reference);
+		if (event.dataTransfer) {
+			event.dataTransfer.effectAllowed = "move";
+		}
+	};
+
+	this[dragOverEventHandler] = (event) => {
+		if (isTabDragEnabled.call(this) !== true) {
+			return;
+		}
+
+		const button = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
+		if (
+			!(button instanceof HTMLButtonElement) ||
+			button.disabled === true ||
+			!this[draggingReferenceSymbol]
+		) {
+			return;
+		}
+
+		event.preventDefault();
+		if (event.dataTransfer) {
+			event.dataTransfer.dropEffect = "move";
+		}
+	};
+
+	this[dropEventHandler] = (event) => {
+		if (isTabDragEnabled.call(this) !== true) {
+			return;
+		}
+
+		const button = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "button");
+		if (!(button instanceof HTMLButtonElement) || button.disabled === true) {
+			return;
+		}
+
+		const sourceReference = this[draggingReferenceSymbol];
+		const targetReference = button.getAttribute(
+			`${ATTRIBUTE_PREFIX}tab-reference`,
+		);
+		if (
+			!sourceReference ||
+			!targetReference ||
+			sourceReference === targetReference
+		) {
+			return;
+		}
+
+		event.preventDefault();
+		reorderTabPanels.call(this, sourceReference, targetReference);
+		clearDraggingButton.call(this);
+		delete this[draggingReferenceSymbol];
+	};
+
+	this[dragEndEventHandler] = () => {
+		clearDraggingButton.call(this);
+		delete this[draggingReferenceSymbol];
+	};
+
+	this[navElementSymbol].addEventListener(
+		"dragstart",
+		this[dragStartEventHandler],
+	);
+	this[navElementSymbol].addEventListener(
+		"dragover",
+		this[dragOverEventHandler],
+	);
+	this[navElementSymbol].addEventListener("drop", this[dropEventHandler]);
+	this[navElementSymbol].addEventListener("dragend", this[dragEndEventHandler]);
+
 	return this;
 }
 
@@ -1327,6 +1529,8 @@ function initTabButtons() {
 		throw new Error("no shadow-root is defined");
 	}
 
+	resetLayoutSignatureHistory.call(this);
+
 	let activeReference;
 	let invalidActive = false;
 	const previousActiveReference = this[activeReferenceSymbol] || null;
@@ -1399,6 +1603,7 @@ function initTabButtons() {
 			state,
 			class: classes,
 			disabled,
+			draggable: isTabDragEnabled.call(this) === true && disabled !== true,
 			title: disabled === true ? disabledReason : null,
 			"aria-label": disabled === true ? disabledReason : null,
 			remove,
@@ -1408,8 +1613,11 @@ function initTabButtons() {
 		});
 	}
 
-	setButtonCollections.call(this, buttons, []);
+	const { standardButtons, popperButtons } =
+		splitButtonsByCurrentPopperReferences.call(this, buttons);
+	setButtonCollections.call(this, standardButtons, popperButtons);
 	this.setOption("marker", random());
+	this[dimensionsSymbol].setVia("data.calculated", false);
 
 	return adjustButtonVisibility.call(this).then(() => {
 		if (
@@ -1491,7 +1699,9 @@ function adjustButtonVisibility() {
 		const runIfRendered = () => {
 			if (resolved === true) return;
 
-			const defCount = self.getOption("buttons.standard").length;
+			const defCount =
+				self.getOption("buttons.standard").length +
+				self.getOption("buttons.popper").length;
 			const domCount = self[navElementSymbol].querySelectorAll(
 				'button[data-monster-role="button"][data-monster-tab-reference]',
 			).length;
@@ -1529,7 +1739,7 @@ function getDimValue(value) {
 		return 0;
 	}
 
-	const valueAsInt = parseInt(value, 10);
+	const valueAsInt = parseFloat(value);
 
 	if (isNaN(valueAsInt)) {
 		return 0;
@@ -1554,7 +1764,7 @@ function calcBoxWidth(node) {
 		getDimValue(bounding["width"]) +
 		getDimValue(dim["border-right-width"]) +
 		getDimValue(dim["margin-right"]) +
-		getDimValue(dim["padding-left"])
+		getDimValue(dim["padding-right"])
 	);
 }
 
@@ -1563,10 +1773,13 @@ function calcBoxWidth(node) {
  * @return {Object}
  */
 function rearrangeButtons() {
-	getWindow().requestAnimationFrame(() => {
-		const standardButtons = [];
-		const popperButtons = [];
-		let sum = 0;
+	if (this[rearrangeFrameSymbol] !== undefined) {
+		return;
+	}
+
+	this[rearrangeFrameSymbol] = getWindow().requestAnimationFrame(() => {
+		delete this[rearrangeFrameSymbol];
+
 		const space = this[dimensionsSymbol].getVia("data.space");
 
 		if (space <= 0) {
@@ -1576,16 +1789,30 @@ function rearrangeButtons() {
 		const buttons = this.getOption("buttons.standard").concat(
 			this.getOption("buttons.popper"),
 		);
-		for (const [, button] of buttons.entries()) {
-			const ref = button?.reference;
-
-			sum += resolveButtonWidth.call(this, ref);
+		const widths = buttons.map((button) =>
+			resolveButtonWidth.call(this, button?.reference),
+		);
+		const switchWidth = resolveSwitchWidth.call(this);
+		const switchCurrentlyVisible =
+			this[switchElementSymbol] instanceof HTMLElement &&
+			!this[switchElementSymbol].classList.contains("hidden");
+		const { standardButtons, popperButtons } = resolveOverflowButtonLayout({
+			buttons,
+			widths,
+			space,
+			switchWidth,
+			switchCurrentlyVisible,
+		});
 
-			if (sum > space) {
-				popperButtons.push(clone(button));
-			} else {
-				standardButtons.push(clone(button));
-			}
+		if (
+			shouldSuppressOscillatingTabLayout.call(
+				this,
+				space,
+				standardButtons,
+				popperButtons,
+			)
+		) {
+			return;
 		}
 
 		setButtonCollections.call(this, standardButtons, popperButtons);
@@ -1594,6 +1821,74 @@ function rearrangeButtons() {
 	});
 }
 
+/**
+ * @private
+ * @param {Object} options
+ * @param {Object[]} options.buttons
+ * @param {number[]} options.widths
+ * @param {number} options.space
+ * @param {number} options.switchWidth
+ * @param {boolean} options.switchCurrentlyVisible
+ * @return {{standardButtons: Object[], popperButtons: Object[]}}
+ */
+function resolveOverflowButtonLayout({
+	buttons,
+	widths,
+	space,
+	switchWidth,
+	switchCurrentlyVisible,
+}) {
+	let layout;
+	if (switchCurrentlyVisible) {
+		layout = fitButtonsIntoSpace(
+			buttons,
+			widths,
+			space - switchWidth - LAYOUT_SWITCH_HYSTERESIS,
+		);
+		if (layout.popperButtons.length === 0) {
+			layout = fitButtonsIntoSpace(buttons, widths, space);
+		}
+		return layout;
+	}
+
+	layout = fitButtonsIntoSpace(
+		buttons,
+		widths,
+		space - LAYOUT_SWITCH_HYSTERESIS,
+	);
+	if (layout.popperButtons.length > 0) {
+		return fitButtonsIntoSpace(buttons, widths, space - switchWidth);
+	}
+
+	return fitButtonsIntoSpace(buttons, widths, space);
+}
+
+/**
+ * @private
+ * @param {Object[]} buttons
+ * @param {number[]} widths
+ * @param {number} availableSpace
+ * @return {{standardButtons: Object[], popperButtons: Object[]}}
+ */
+function fitButtonsIntoSpace(buttons, widths, availableSpace) {
+	let sum = 0;
+	const standardButtons = [];
+	const popperButtons = [];
+	const boundedSpace = Math.max(0, availableSpace);
+
+	for (const [index, button] of buttons.entries()) {
+		const width = widths[index];
+		if (popperButtons.length > 0 || sum + width > boundedSpace) {
+			popperButtons.push(clone(button));
+		} else {
+			sum += width;
+			standardButtons.push(clone(button));
+		}
+	}
+
+	return { standardButtons, popperButtons };
+}
+
 /**
  * @private
  */
@@ -1625,11 +1920,135 @@ function resolveButtonWidth(ref) {
 		return 0;
 	}
 
-	width = calcBoxWidth.call(this, element);
-	this[dimensionsSymbol].setVia(`data.button.${ref}`, width);
+	width = measureButtonWidth.call(this, element);
+	if (width > 0) {
+		this[dimensionsSymbol].setVia(`data.button.${ref}`, width);
+	}
 	return width;
 }
 
+/**
+ * @private
+ * @param {boolean} force
+ * @return {number}
+ */
+function resolveSwitchWidth(force = false) {
+	let width = this[dimensionsSymbol].getVia("data.switchWidth", 0);
+	if (force !== true && width > 0) {
+		return width;
+	}
+
+	if (!(this[switchElementSymbol] instanceof HTMLElement)) {
+		return 0;
+	}
+
+	width = measureElementWidthInNavigation.call(
+		this,
+		this[switchElementSymbol],
+		{
+			removeHiddenClass: true,
+		},
+	);
+	this[dimensionsSymbol].setVia("data.switchWidth", width);
+	return width;
+}
+
+/**
+ * @private
+ * @param {HTMLButtonElement} element
+ * @return {number}
+ */
+function measureButtonWidth(element) {
+	if (
+		element.closest(`[${ATTRIBUTE_ROLE}=popper-nav]`) instanceof HTMLElement
+	) {
+		return measureButtonWidthInNavigation.call(this, element);
+	}
+
+	const width = calcBoxWidth.call(this, element);
+	if (width > 0) {
+		return width;
+	}
+
+	return measureButtonWidthInNavigation.call(this, element);
+}
+
+/**
+ * @private
+ * @param {HTMLButtonElement} element
+ * @return {number}
+ */
+function measureButtonWidthInNavigation(element) {
+	return measureElementWidthInNavigation.call(this, element);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {{removeHiddenClass?: boolean}} options
+ * @return {number}
+ */
+function measureElementWidthInNavigation(element, options = {}) {
+	const measurementNav = ensureMeasurementNav.call(this);
+	const cloneElement = element.cloneNode(true);
+	prepareMeasurementElement(cloneElement, options);
+
+	measurementNav.appendChild(cloneElement);
+	const width = calcBoxWidth.call(this, cloneElement);
+	cloneElement.remove();
+
+	return width;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {{removeHiddenClass?: boolean}} options
+ * @return {void}
+ */
+function prepareMeasurementElement(element, options = {}) {
+	element.setAttribute("aria-hidden", "true");
+	element.setAttribute("tabindex", "-1");
+	element.removeAttribute("data-monster-tab-reference");
+	element.removeAttribute("id");
+	element.dataset.monsterMeasurement = "true";
+
+	if (options.removeHiddenClass === true) {
+		element.classList.remove("hidden");
+	}
+
+	element.style.position = "";
+	element.style.visibility = "";
+	element.style.pointerEvents = "";
+	element.style.inset = "";
+}
+
+/**
+ * @private
+ * @return {HTMLElement}
+ */
+function ensureMeasurementNav() {
+	if (this[measurementNavElementSymbol] instanceof HTMLElement) {
+		return this[measurementNavElementSymbol];
+	}
+
+	const nav = getDocument().createElement("nav");
+	nav.setAttribute(ATTRIBUTE_ROLE, "nav");
+	nav.setAttribute("aria-hidden", "true");
+	nav.dataset.monsterMeasurement = "true";
+	nav.style.position = "absolute";
+	nav.style.visibility = "hidden";
+	nav.style.pointerEvents = "none";
+	nav.style.inset = "0 auto auto 0";
+	nav.style.width = "max-content";
+	nav.style.height = "auto";
+	nav.style.overflow = "visible";
+
+	this[controlElementSymbol].appendChild(nav);
+	this[measurementNavElementSymbol] = nav;
+	return nav;
+}
+
 /**
  * Keep the main navigation and popper navigation models in sync with one update.
  *
@@ -1641,12 +2060,302 @@ function resolveButtonWidth(ref) {
  * @param {Object[]} popperButtons
  */
 function setButtonCollections(standardButtons, popperButtons) {
+	const signature = getButtonCollectionsSignature(
+		standardButtons,
+		popperButtons,
+	);
+	if (this[buttonCollectionsSignatureSymbol] === signature) {
+		return;
+	}
+
+	const currentSignature = getButtonCollectionsSignature(
+		this.getOption("buttons.standard", []),
+		this.getOption("buttons.popper", []),
+	);
+	if (currentSignature === signature) {
+		this[buttonCollectionsSignatureSymbol] = signature;
+		return;
+	}
+
+	this[buttonCollectionsSignatureSymbol] = signature;
 	this.setOption("buttons", {
 		standard: clone(standardButtons),
 		popper: clone(popperButtons),
 	});
 }
 
+/**
+ * @private
+ * @param {Object[]} standardButtons
+ * @param {Object[]} popperButtons
+ * @return {string}
+ */
+function getButtonCollectionsSignature(standardButtons, popperButtons) {
+	return JSON.stringify({
+		standard: standardButtons.map(getButtonSignature),
+		popper: popperButtons.map(getButtonSignature),
+	});
+}
+
+/**
+ * @private
+ * @param {Object} button
+ * @return {Object}
+ */
+function getButtonSignature(button) {
+	return {
+		reference: button?.reference,
+		name: button?.name,
+		tab: button?.tab,
+		label: button?.label,
+		error: button?.error,
+		state: button?.state,
+		class: button?.class,
+		disabled: button?.disabled,
+		draggable: button?.draggable,
+		title: button?.title,
+		"aria-label": button?.["aria-label"],
+		remove: button?.remove,
+		kind: button?.kind,
+		priority: button?.priority,
+		group: button?.group,
+	};
+}
+
+/**
+ * @private
+ * @param {Object[]} buttons
+ * @return {{standardButtons: Object[], popperButtons: Object[]}}
+ */
+function splitButtonsByCurrentPopperReferences(buttons) {
+	const popperReferences = new Set(
+		this.getOption("buttons.popper", []).map((button) => button.reference),
+	);
+	const standardButtons = [];
+	const popperButtons = [];
+	for (const button of buttons) {
+		if (popperReferences.has(button.reference)) {
+			popperButtons.push(button);
+		} else {
+			standardButtons.push(button);
+		}
+	}
+
+	return { standardButtons, popperButtons };
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function isTabDragEnabled() {
+	return this.getOption("features.order.drag") !== false;
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function isTabOrderPersistenceEnabled() {
+	return this.getOption("features.order.persist") === true;
+}
+
+/**
+ * @private
+ * @return {boolean}
+ */
+function hasConfigIdentity() {
+	return (
+		(isString(this.id) && this.id.trim() !== "") ||
+		(isString(this.getOption("config.instanceKey")) &&
+			this.getOption("config.instanceKey").trim() !== "")
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTabOrderConfigKey() {
+	return generateComponentConfigKey("tabs", this?.id, "tab_order", {
+		instanceKey: this.getOption("config.instanceKey"),
+	});
+}
+
+/**
+ * @private
+ * @return {HTMLElement|null}
+ */
+function getHostElement() {
+	return findElementWithSelectorUpwards(this, "monster-host");
+}
+
+/**
+ * @private
+ * @return {string[]}
+ */
+function getCurrentTabOrder() {
+	return getAllTabPanels
+		.call(this)
+		.map((node) => getTabPublicReference(node))
+		.filter((reference) => isString(reference) && reference.trim() !== "");
+}
+
+/**
+ * @private
+ * @return {Promise}
+ */
+function initTabOrderFromHostConfig() {
+	if (isTabOrderPersistenceEnabled.call(this) !== true) {
+		return Promise.resolve();
+	}
+
+	const host = getHostElement.call(this);
+	if (!(host && hasConfigIdentity.call(this))) {
+		return Promise.resolve();
+	}
+
+	const configKey = getTabOrderConfigKey.call(this);
+	return host
+		.hasConfig(configKey)
+		.then((hasConfig) => {
+			if (hasConfig !== true) {
+				return null;
+			}
+			return host.getConfig(configKey);
+		})
+		.then((order) => {
+			if (!isArray(order)) {
+				return;
+			}
+			this[suppressOrderConfigSaveSymbol] = true;
+			applyTabOrder.call(this, order);
+			this[suppressOrderConfigSaveSymbol] = false;
+		})
+		.catch((error) => {
+			this[suppressOrderConfigSaveSymbol] = false;
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+		});
+}
+
+/**
+ * @private
+ * @param {string[]} order
+ * @return {void}
+ */
+function applyTabOrder(order) {
+	const panels = getAllTabPanels.call(this);
+	const panelsByReference = new Map();
+	for (const panel of panels) {
+		panelsByReference.set(getTabReference(panel), panel);
+		const name = getTabName(panel);
+		if (name) {
+			panelsByReference.set(name, panel);
+		}
+	}
+
+	const appended = new Set();
+	for (const reference of order) {
+		const panel = panelsByReference.get(reference);
+		if (panel instanceof HTMLElement && appended.has(panel) !== true) {
+			this.appendChild(panel);
+			appended.add(panel);
+		}
+	}
+
+	for (const panel of panels) {
+		if (appended.has(panel) !== true) {
+			this.appendChild(panel);
+		}
+	}
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function saveTabOrderConfig() {
+	if (
+		isTabOrderPersistenceEnabled.call(this) !== true ||
+		this[suppressOrderConfigSaveSymbol] === true
+	) {
+		return;
+	}
+
+	const host = getHostElement.call(this);
+	if (!(host && hasConfigIdentity.call(this))) {
+		return;
+	}
+
+	try {
+		host.setConfig(
+			getTabOrderConfigKey.call(this),
+			getCurrentTabOrder.call(this),
+		);
+	} catch (error) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+	}
+}
+
+/**
+ * @private
+ * @param {string} sourceReference
+ * @param {string} targetReference
+ * @return {void}
+ */
+function reorderTabPanels(sourceReference, targetReference) {
+	const sourcePanel = findTabPanel.call(this, sourceReference, {
+		availableOnly: true,
+	});
+	const targetPanel = findTabPanel.call(this, targetReference, {
+		availableOnly: true,
+	});
+
+	if (
+		!(sourcePanel instanceof HTMLElement) ||
+		!(targetPanel instanceof HTMLElement) ||
+		sourcePanel === targetPanel
+	) {
+		return;
+	}
+
+	const panels = getAllTabPanels.call(this);
+	const sourceIndex = panels.indexOf(sourcePanel);
+	const targetIndex = panels.indexOf(targetPanel);
+
+	if (sourceIndex < targetIndex) {
+		targetPanel.after(sourcePanel);
+	} else {
+		targetPanel.before(sourcePanel);
+	}
+
+	this[dimensionsSymbol].setVia("data.calculated", false);
+	initTabButtons
+		.call(this)
+		.then(() => {
+			saveTabOrderConfig.call(this);
+			fireCustomEvent(this, "monster-tab-order-changed", {
+				order: getCurrentTabOrder.call(this),
+				source: getTabEventDetail(sourcePanel),
+				target: getTabEventDetail(targetPanel),
+			});
+		})
+		.catch((error) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+		});
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function clearDraggingButton() {
+	const buttons = this.shadowRoot.querySelectorAll("[data-monster-dragging]");
+	for (const button of buttons) {
+		button.removeAttribute("data-monster-dragging");
+	}
+}
+
 /**
  * @private
  * @return {Object}
@@ -1676,10 +2385,10 @@ function calculateNavigationButtonsDimensions() {
 		const element = findButtonElement.call(this, ref);
 		if (!(element instanceof HTMLButtonElement)) continue;
 
-		this[dimensionsSymbol].setVia(
-			`data.button.${ref}`,
-			calcBoxWidth.call(this, element),
-		);
+		const width = measureButtonWidth.call(this, element);
+		if (width > 0) {
+			this[dimensionsSymbol].setVia(`data.button.${ref}`, width);
+		}
 		button["class"] = new TokenList(button["class"])
 			.remove("invisible")
 			.toString();
@@ -1692,13 +2401,81 @@ function calculateNavigationButtonsDimensions() {
 		slot.classList.remove("invisible");
 	}
 
-	setButtonCollections.call(this, buttons, []);
+	const { standardButtons, popperButtons } =
+		splitButtonsByCurrentPopperReferences.call(this, buttons);
+
+	resolveSwitchWidth.call(this, true);
+	setButtonCollections.call(this, standardButtons, popperButtons);
 
 	getWindow().requestAnimationFrame(() => {
 		this[dimensionsSymbol].setVia("data.calculated", true);
 	});
 }
 
+/**
+ * @private
+ * @param {number} space
+ * @param {Object[]} standardButtons
+ * @param {Object[]} popperButtons
+ * @return {boolean}
+ */
+function shouldSuppressOscillatingTabLayout(
+	space,
+	standardButtons,
+	popperButtons,
+) {
+	const signature = [
+		Math.round(space),
+		standardButtons.map((button) => button.reference).join(","),
+		popperButtons.map((button) => button.reference).join(","),
+	].join("|");
+
+	const history = this[layoutSignatureHistorySymbol] || [];
+	history.push({
+		signature,
+		time: performanceNow(),
+	});
+	while (history.length > LAYOUT_OSCILLATION_HISTORY_LIMIT) {
+		history.shift();
+	}
+	this[layoutSignatureHistorySymbol] = history;
+
+	if (history.length < LAYOUT_OSCILLATION_HISTORY_LIMIT) {
+		return false;
+	}
+
+	const [first, second, third, fourth] = history;
+	if (fourth.time - first.time > LAYOUT_OSCILLATION_TIME_WINDOW_MS) {
+		return false;
+	}
+
+	return (
+		first.signature !== second.signature &&
+		first.signature === third.signature &&
+		second.signature === fourth.signature
+	);
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function resetLayoutSignatureHistory() {
+	delete this[layoutSignatureHistorySymbol];
+}
+
+/**
+ * @private
+ * @return {number}
+ */
+function performanceNow() {
+	const globalObject = getGlobal();
+	if (globalObject?.performance?.now instanceof Function) {
+		return globalObject.performance.now();
+	}
+	return Date.now();
+}
+
 /**
  * @private
  * @param {string} ref
@@ -1899,6 +2676,7 @@ function getTemplate() {
                     data-monster-attributes="
                     class path:classes.button,
                     data-monster-state path:buttons.state,
+                    draggable path:buttons.draggable | if:true,
                     disabled path:buttons.disabled | if:true,
                     title path:buttons.title,
                     aria-label path:buttons.aria-label,