@schukai/monster 4.137.9 → 4.139.0

package/source/components/form/control-bar.mjs

@@ -0,0 +1,1437 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { Pathfinder } from "../../data/pathfinder.mjs";
+import {
+	addAttributeToken,
+	removeAttributeToken,
+} from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {
+	assembleMethodSymbol,
+	getSlottedElements,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {
+	CustomElement,
+	attributeObserverSymbol,
+} from "../../dom/customelement.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { getGlobal } from "../../types/global.mjs";
+import { ID } from "../../types/id.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
+import { ControlBarStyleSheet } from "./stylesheet/control-bar.mjs";
+import { positionPopper } from "./util/floating-ui.mjs";
+import { convertToPixels } from "../../dom/dimension.mjs";
+import { addErrorAttribute } from "../../dom/error.mjs";
+import { Processing } from "../../util/processing.mjs";
+export { ControlBar };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("windowResizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const dimensionsSymbol = Symbol("dimensions");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlBarSlotElementSymbol = Symbol("controlBarSlotElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperSlotElementSymbol = Symbol("popperSlotElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const controlBarElementSymbol = Symbol("controlBarElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperElementSymbol = Symbol("popperElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const closeEventHandler = Symbol("closeEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperSwitchEventHandler = Symbol("popperSwitchEventHandler");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperNavElementSymbol = Symbol("popperNavElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const mutationObserverSymbol = Symbol("mutationObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const switchElementSymbol = Symbol("switchElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const layoutStateSymbol = Symbol("layoutState");
+const layoutFrameSymbol = Symbol("layoutFrame");
+const layoutTokenSymbol = Symbol("layoutToken");
+const observedLayoutNodesSignatureSymbol = Symbol(
+	"observedLayoutNodesSignature",
+);
+
+/**
+ * @private
+ * @type {WeakMap<HTMLElement, number>}
+ */
+const layoutNodeIds = new WeakMap();
+let layoutNodeId = 0;
+
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
+
+/**
+ * @private
+ * @type {string}
+ */
+const ATTRIBUTE_LAYOUT_ALIGNMENT = "data-monster-layout-alignment";
+
+/**
+ * A control bar control.
+ *
+ * @fragments /fragments/components/form/control-bar/
+ *
+ * @example /examples/components/form/control-bar-simple Control bar
+ *
+ * @copyright Volker Schukai
+ * @summary A responsive control bar that groups multiple controls and moves overflowed controls into a menu.
+ * @fires monster-fetched
+ */
+class ControlBar extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/form/control-bar@@instance");
+	}
+
+	/**
+	 * 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 {Object} popper FloatingUI popper configuration
+	 * @property {string} popper.placement=top Placement of the popper
+	 * @property {Array<string>} popper.middleware Middleware for the popper
+	 */
+	get defaults() {
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: {},
+			layout: {
+				alignment: "left",
+			},
+			popper: {
+				placement: "left",
+				middleware: ["flip", "shift", "offset:5"],
+			},
+		});
+
+		initDefaultsFromAttributes.call(this, obj);
+
+		return obj;
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		this[dimensionsSymbol] = new Pathfinder({ data: {} });
+		this[layoutStateSymbol] = {
+			scheduled: false,
+			running: false,
+			needsMeasure: true,
+			needsLayout: true,
+			needsObserve: true,
+			suppressSlotChange: false,
+			suppressMutation: false,
+		};
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+
+		// setup structure
+		initControlBar.call(this);
+		initPopperSwitch.call(this);
+		applyLayoutAlignment.call(this);
+		this.attachObserver(
+			new Observer(() => {
+				applyLayoutAlignment.call(this);
+			}),
+		);
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ControlBarStyleSheet];
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-control-bar";
+	}
+
+	/**
+	 * 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]);
+		}
+
+		scheduleLayout.call(this, { measure: true, layout: true, observe: true });
+	}
+
+	/**
+	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+	 *
+	 * @return {string[]}
+	 */
+	static get observedAttributes() {
+		const attributes = super.observedAttributes;
+		attributes.push(ATTRIBUTE_POPPER_POSITION);
+		return attributes;
+	}
+
+	/**
+	 * 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]);
+		}
+
+		if (typeof this[layoutFrameSymbol] === "number") {
+			cancelAnimationFrame(this[layoutFrameSymbol]);
+		}
+		delete this[layoutFrameSymbol];
+		this[layoutTokenSymbol] = (this[layoutTokenSymbol] || 0) + 1;
+
+		disconnectResizeObserver.call(this);
+		if (this[mutationObserverSymbol]) {
+			this[mutationObserverSymbol].disconnect();
+		}
+	}
+
+	/**
+	 * Close the slotted dialog.
+	 * @return {ControlBar}
+	 */
+	hideDialog() {
+		hide.call(this);
+		return this;
+	}
+
+	/**
+	 * Open the slotted dialog.
+	 * @return {ControlBar}
+	 */
+	showDialog() {
+		show.call(this);
+		return this;
+	}
+
+	/**
+	 * Toggle the slotted dialog.
+	 * @return {ControlBar}
+	 */
+	toggleDialog() {
+		toggle.call(this);
+		return this;
+	}
+}
+
+/**
+ * @private
+ * @param obj
+ * @return {*}
+ */
+function initDefaultsFromAttributes(obj) {
+	if (this.hasAttribute(ATTRIBUTE_POPPER_POSITION)) {
+		obj.popper.placement = this.getAttribute(ATTRIBUTE_POPPER_POSITION);
+	}
+
+	return obj;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isElementTrulyVisible(element) {
+	if (!(element instanceof HTMLElement)) {
+		return false;
+	}
+	const computedStyle = getComputedStyle(element);
+	return (
+		computedStyle.display !== "none" &&
+		computedStyle.visibility !== "hidden" &&
+		computedStyle.opacity !== "0" &&
+		element.offsetWidth > 0 &&
+		element.offsetHeight > 0
+	);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isElementSelfHidden(element) {
+	if (!(element instanceof HTMLElement)) {
+		return true;
+	}
+
+	const computedStyle = getComputedStyle(element);
+	return (
+		element.hidden === true ||
+		element.hasAttribute("hidden") ||
+		computedStyle.display === "none" ||
+		computedStyle.visibility === "hidden"
+	);
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {
+	const self = this;
+
+	const mutationCallback = (mutationList) => {
+		if (self[layoutStateSymbol]?.suppressMutation) {
+			return;
+		}
+
+		let needsRecalc = false;
+		for (const mutation of mutationList) {
+			if (mutation.type === "attributes") {
+				const target = mutation.target;
+				if (target instanceof HTMLElement) {
+					const ref = target.getAttribute("data-monster-reference");
+					if (ref) {
+						if (!isElementTrulyVisible(target)) {
+							self[dimensionsSymbol].setVia(`data.item.${ref}`, 0);
+						}
+						needsRecalc = true;
+					}
+				}
+			}
+		}
+		if (needsRecalc) {
+			scheduleLayout.call(self, { measure: true, layout: true });
+		}
+	};
+
+	/**
+	 * @param {Event} event
+	 */
+	self[closeEventHandler] = (event) => {
+		const path = event.composedPath();
+		for (const element of path) {
+			if (element === self) return;
+		}
+		hide.call(self);
+	};
+
+	if (self[controlBarSlotElementSymbol]) {
+		self[controlBarSlotElementSymbol].addEventListener("slotchange", () => {
+			if (self[layoutStateSymbol]?.suppressSlotChange) {
+				return;
+			}
+			scheduleLayout.call(self, {
+				measure: true,
+				layout: true,
+				observe: true,
+			});
+		});
+	}
+
+	if (self[popperElementSymbol]) {
+		self[popperElementSymbol].addEventListener("slotchange", () => {
+			if (self[layoutStateSymbol]?.suppressSlotChange) {
+				return;
+			}
+			scheduleLayout.call(self, {
+				measure: true,
+				layout: true,
+				observe: true,
+			});
+		});
+	}
+
+	self[attributeObserverSymbol][ATTRIBUTE_POPPER_POSITION] = function (value) {
+		self.setOption("popper.placement", value);
+		updatePopper.call(self);
+	};
+
+	self[resizeObserverSymbol] = new ResizeObserver(() => {
+		scheduleLayout.call(self, { measure: true, layout: true });
+	});
+	self[mutationObserverSymbol] = new MutationObserver(mutationCallback);
+
+	initSlotChangedHandler.call(self);
+}
+
+function initSlotChangedHandler() {
+	this[controlBarElementSymbol].addEventListener("slotchange", () => {
+		if (this[layoutStateSymbol]?.suppressSlotChange) {
+			return;
+		}
+		scheduleLayout.call(this, { observe: true });
+	});
+}
+
+function scheduleLayout(options = {}) {
+	if (!this[layoutStateSymbol]) {
+		return;
+	}
+
+	const state = this[layoutStateSymbol];
+	state.needsMeasure = state.needsMeasure || options.measure === true;
+	state.needsLayout = state.needsLayout || options.layout === true;
+	state.needsObserve = state.needsObserve || options.observe === true;
+
+	if (state.scheduled || state.running) {
+		return;
+	}
+
+	scheduleLayoutFrame.call(this);
+}
+
+function scheduleLayoutFrame() {
+	const state = this[layoutStateSymbol];
+	if (!state || state.scheduled || state.running) {
+		return;
+	}
+
+	state.scheduled = true;
+	const token = (this[layoutTokenSymbol] || 0) + 1;
+	this[layoutTokenSymbol] = token;
+	this[layoutFrameSymbol] = requestAnimationFrame(() => {
+		if (this[layoutTokenSymbol] !== token) {
+			return;
+		}
+		delete this[layoutFrameSymbol];
+		runLayout.call(this);
+	});
+}
+
+function runLayout() {
+	const state = this[layoutStateSymbol];
+	if (!state) {
+		return;
+	}
+
+	state.scheduled = false;
+	if (!this.isConnected) {
+		return;
+	}
+
+	if (state.running) {
+		return;
+	}
+
+	const needsObserve = state.needsObserve;
+	const needsMeasure = state.needsMeasure;
+	const needsLayout = state.needsLayout;
+
+	state.needsObserve = false;
+	state.needsMeasure = false;
+	state.needsLayout = false;
+	state.running = true;
+
+	new Processing(() => {
+		if (needsObserve) {
+			updateResizeObserverObservation.call(this);
+		}
+
+		if (needsMeasure) {
+			try {
+				calculateControlBarDimensions.call(this);
+			} catch (error) {
+				addErrorAttribute(
+					this,
+					error?.message || "An error occurred while calculating dimensions",
+				);
+			}
+		}
+
+		if (needsLayout) {
+			try {
+				rearrangeItems.call(this);
+			} catch (error) {
+				addErrorAttribute(
+					this,
+					error?.message || "An error occurred while rearranging the items",
+				);
+			}
+		}
+
+		return updatePopper.call(this);
+	})
+		.run()
+		.catch((error) => {
+			addErrorAttribute(
+				this,
+				error?.message ||
+					"An error occurred while running the control bar layout",
+			);
+		})
+		.finally(() => {
+			state.running = false;
+			if (state.needsObserve || state.needsMeasure || state.needsLayout) {
+				scheduleLayoutFrame.call(this);
+			}
+		});
+}
+
+/**
+ * @private
+ * @return {Object}
+ */
+function rearrangeItems() {
+	let space = 0;
+	try {
+		space = this[dimensionsSymbol].getVia("data.space");
+	} catch {}
+
+	const itemReferences = this[dimensionsSymbol].getVia(
+		"data.itemReferences",
+		[],
+	);
+	const hasItems = itemReferences.length > 0;
+
+	const itemEntries = [];
+
+	for (const ref of itemReferences) {
+		let elements = getSlottedElements.call(
+			this,
+			'[data-monster-reference="' + ref + '"]',
+			null,
+		); // null ↦ o
+		if (elements.size === 0) {
+			elements = getSlottedElements.call(
+				this,
+				'[data-monster-reference="' + ref + '"]',
+				"popper",
+			); // null ↦ o
+		}
+
+		const nextValue = elements.values().next();
+		if (!nextValue) {
+			continue;
+		}
+
+		const element = nextValue?.value;
+		if (!(element instanceof HTMLElement)) {
+			continue;
+		}
+
+		let itemWidth = 0;
+		try {
+			itemWidth = this[dimensionsSymbol].getVia(`data.item.${ref}`);
+		} catch (e) {
+			// If the path does not exist, pathfinder throws an error.
+			// In this case, we assume the width is 0.
+			// This can happen for items that have never been visible.
+		}
+		itemEntries.push({
+			element,
+			width: itemWidth,
+			hidden: isElementSelfHidden(element),
+		});
+	}
+
+	const switchWidth = this[dimensionsSymbol].getVia("data.switchWidth") || 2;
+
+	const layoutItems = (availableSpace) => {
+		if (availableSpace < 0) {
+			availableSpace = 0;
+		}
+		let sum = 0;
+		const visibleItemsInMainSlot = [];
+		const itemsToMoveToPopper = [];
+
+		for (const entry of itemEntries) {
+			if (entry.hidden) {
+				visibleItemsInMainSlot.push(entry.element);
+				continue;
+			}
+
+			if (sum + entry.width > availableSpace) {
+				itemsToMoveToPopper.push(entry.element);
+			} else {
+				sum += entry.width;
+				visibleItemsInMainSlot.push(entry.element);
+			}
+		}
+
+		return { visibleItemsInMainSlot, itemsToMoveToPopper };
+	};
+
+	let layout = layoutItems(space);
+	if (layout.itemsToMoveToPopper.length > 0) {
+		layout = layoutItems(space - switchWidth);
+	}
+
+	const shouldShowSwitch =
+		layout.itemsToMoveToPopper.length > 0 && hasItems;
+
+	suppressLayoutFeedback.call(this);
+
+	for (const item of layout.itemsToMoveToPopper) {
+		if (item.getAttribute("slot") !== "popper") {
+			item.setAttribute("slot", "popper");
+		}
+	}
+
+	for (const item of layout.visibleItemsInMainSlot) {
+		if (item.hasAttribute("slot")) {
+			item.removeAttribute("slot");
+		}
+	}
+
+	setSwitchVisible.call(this, shouldShowSwitch);
+	updateControlSizing.call(this, layout, shouldShowSwitch);
+	updateJoinedBorders.call(this, layout, shouldShowSwitch);
+	if (!shouldShowSwitch) {
+		hide.call(this);
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement} node
+ * @return {number}
+ */
+function calcBoxWidth(node) {
+	const dim = getGlobal()?.getComputedStyle(node);
+	if (dim === null) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "no computed style");
+		throw new Error("no computed style");
+	}
+	const bounding = node.getBoundingClientRect();
+
+	return (
+		getComputedCssPixels(dim["border-left-width"]) +
+		getComputedCssPixels(dim["padding-left"]) +
+		getComputedCssPixels(dim["margin-left"]) +
+		bounding["width"] +
+		getComputedCssPixels(dim["border-right-width"]) +
+		getComputedCssPixels(dim["margin-right"]) +
+		getComputedCssPixels(dim["padding-right"])
+	);
+}
+
+/**
+ * @private
+ * @param {string} value
+ * @return {number}
+ */
+function getComputedCssPixels(value) {
+	if (typeof value !== "string" || value === "") {
+		return 0;
+	}
+
+	if (value.endsWith("px")) {
+		return parseFloat(value) || 0;
+	}
+
+	try {
+		return convertToPixels(value);
+	} catch {
+		return 0;
+	}
+}
+
+/**
+ * @private
+ * @param {Object} layout
+ * @param {boolean} shouldShowSwitch
+ * @return {void}
+ */
+function updateControlSizing(layout, shouldShowSwitch) {
+	const mainItems = [...layout.visibleItemsInMainSlot];
+	if (
+		shouldShowSwitch &&
+		this[popperNavElementSymbol] instanceof HTMLElement
+	) {
+		mainItems.push(this[popperNavElementSymbol]);
+	}
+
+	const controlItems = [
+		...mainItems,
+		...layout.itemsToMoveToPopper,
+	];
+	for (const element of controlItems) {
+		applyControlSizing.call(this, element);
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {void}
+ */
+function applyControlSizing(element) {
+	setStylePropertyIfChanged(element, "boxSizing", "border-box");
+	setStylePropertyIfChanged(
+		element,
+		"height",
+		"var(--monster-control-bar-height)",
+	);
+	setStylePropertyIfChanged(
+		element,
+		"minHeight",
+		"var(--monster-control-bar-height)",
+	);
+	if (isWrapperElement(element)) {
+		setStylePropertyIfChanged(element, "display", "flex");
+		setStylePropertyIfChanged(element, "alignItems", "stretch");
+	}
+
+	for (const control of getContainedControlElements(element)) {
+		setStylePropertyIfChanged(control, "display", "flex");
+		setStylePropertyIfChanged(control, "boxSizing", "border-box");
+		setStylePropertyIfChanged(control, "height", "100%");
+		setStylePropertyIfChanged(control, "minHeight", "0px");
+		if (control.tagName === "MONSTER-INPUT-GROUP") {
+			setStylePropertyIfChanged(control, "flex", "1 1 auto");
+		}
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {boolean}
+ */
+function isWrapperElement(element) {
+	return ["DIV", "FORM", "SECTION"].includes(element.tagName);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @return {HTMLElement[]}
+ */
+function getContainedControlElements(element) {
+	if (!isWrapperElement(element)) {
+		return [];
+	}
+
+	return Array.from(
+		element.querySelectorAll(
+			[
+				"monster-input-group",
+				"monster-select",
+				"monster-button",
+				"monster-state-button",
+				"monster-message-state-button",
+				"monster-action-button",
+				"monster-api-button",
+				"monster-confirm-button",
+			].join(","),
+		),
+	).filter((control) => control instanceof HTMLElement);
+}
+
+/**
+ * @private
+ * @param {Object} layout
+ * @param {boolean} shouldShowSwitch
+ * @return {void}
+ */
+function updateJoinedBorders(layout, shouldShowSwitch) {
+	const mainItems = [...layout.visibleItemsInMainSlot];
+	if (
+		shouldShowSwitch &&
+		this[popperNavElementSymbol] instanceof HTMLElement &&
+		this[switchElementSymbol] instanceof HTMLElement
+	) {
+		mainItems.push(this[popperNavElementSymbol]);
+	}
+
+	const marginLeftByElement = new Map();
+	const marginTopByElement = new Map();
+
+	collectInlineJoinedBorders.call(this, mainItems, marginLeftByElement);
+	collectBlockJoinedBorders.call(
+		this,
+		layout.itemsToMoveToPopper,
+		marginTopByElement,
+	);
+	applyJoinedBorderOffsets.call(this, marginLeftByElement, marginTopByElement);
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} elements
+ * @param {Map<HTMLElement, string>} marginLeftByElement
+ * @return {void}
+ */
+function collectInlineJoinedBorders(elements, marginLeftByElement) {
+	for (let i = 1; i < elements.length; i++) {
+		const previous = elements[i - 1];
+		const current = elements[i];
+		const overlap = getBorderOverlap(
+			getVisualBorderWidth.call(this, previous, "right"),
+			getVisualBorderWidth.call(this, current, "left"),
+		);
+
+		if (overlap > 0) {
+			marginLeftByElement.set(current, `${-1 * overlap}px`);
+		}
+	}
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} elements
+ * @param {Map<HTMLElement, string>} marginTopByElement
+ * @return {void}
+ */
+function collectBlockJoinedBorders(elements, marginTopByElement) {
+	for (let i = 1; i < elements.length; i++) {
+		const previous = elements[i - 1];
+		const current = elements[i];
+		const overlap = getBorderOverlap(
+			getVisualBorderWidth.call(this, previous, "bottom"),
+			getVisualBorderWidth.call(this, current, "top"),
+		);
+
+		if (overlap > 0) {
+			marginTopByElement.set(current, `${-1 * overlap}px`);
+		}
+	}
+}
+
+/**
+ * @private
+ * @param {Map<HTMLElement, string>} marginLeftByElement
+ * @param {Map<HTMLElement, string>} marginTopByElement
+ * @return {void}
+ */
+function applyJoinedBorderOffsets(marginLeftByElement, marginTopByElement) {
+	for (const element of getJoinedBorderOffsetElements.call(this)) {
+		setStylePropertyIfChanged(
+			element,
+			"marginLeft",
+			marginLeftByElement.get(element) || "",
+		);
+		setStylePropertyIfChanged(
+			element,
+			"marginTop",
+			marginTopByElement.get(element) || "",
+		);
+	}
+}
+
+/**
+ * @private
+ * @return {HTMLElement[]}
+ */
+function getJoinedBorderOffsetElements() {
+	const elements = Array.from(this.children).filter(
+		(element) => element instanceof HTMLElement,
+	);
+	if (this[popperNavElementSymbol] instanceof HTMLElement) {
+		elements.push(this[popperNavElementSymbol]);
+	}
+
+	return elements;
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {"marginLeft"|"marginTop"} property
+ * @param {string} value
+ * @return {void}
+ */
+function setStylePropertyIfChanged(element, property, value) {
+	if (element.style[property] !== value) {
+		element.style[property] = value;
+	}
+}
+
+/**
+ * @private
+ * @param {number} previousBorderWidth
+ * @param {number} currentBorderWidth
+ * @return {number}
+ */
+function getBorderOverlap(previousBorderWidth, currentBorderWidth) {
+	return Math.min(previousBorderWidth, currentBorderWidth);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {"top"|"right"|"bottom"|"left"} side
+ * @return {number}
+ */
+function getVisualBorderWidth(element, side) {
+	const visualElement = getVisualBorderElement.call(this, element, side);
+	const computedStyle = getComputedStyle(visualElement);
+	const value = computedStyle.getPropertyValue(`border-${side}-width`);
+
+	return getComputedCssPixels(value);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {"top"|"right"|"bottom"|"left"} side
+ * @return {HTMLElement}
+ */
+function getVisualBorderElement(element, side) {
+	if (element === this[popperNavElementSymbol]) {
+		return this[switchElementSymbol] || element;
+	}
+
+	const selector = [
+		"button",
+		"input",
+		"select",
+		"textarea",
+		"monster-input-group",
+		"monster-select",
+		"[data-monster-role=control]",
+	].join(",");
+	if (element.shadowRoot instanceof ShadowRoot) {
+		return element.shadowRoot.querySelector(selector) || element;
+	}
+
+	const candidates = Array.from(element.querySelectorAll(selector)).filter(
+		(candidate) => candidate instanceof HTMLElement,
+	);
+	if (candidates.length === 0) {
+		return element;
+	}
+
+	if (side === "right" || side === "bottom") {
+		return candidates[candidates.length - 1];
+	}
+
+	return candidates[0];
+}
+
+/**
+ * @private
+ * @return {Object}
+ */
+function calculateControlBarDimensions() {
+	if (!(this.parentElement instanceof HTMLElement)) {
+		this[dimensionsSymbol].setVia("data.space", 0);
+		this[dimensionsSymbol].setVia("data.visible", false);
+		this[dimensionsSymbol].setVia("data.calculated", true);
+		this[dimensionsSymbol].setVia("data.itemReferences", []);
+		return;
+	}
+
+	const computedStyle = getComputedStyle(this.parentElement);
+
+	if (computedStyle === null) {
+		throw new Error("no computed style");
+	}
+
+	let width = this.parentElement.clientWidth;
+	if (computedStyle.getPropertyValue("box-sizing") !== "border-box") {
+		width = computedStyle.getPropertyValue("width");
+
+		const pixel = getComputedCssPixels(width);
+
+		this[dimensionsSymbol].setVia("data.space", pixel);
+	} else {
+		let borderWidth = getComputedStyle(this).getPropertyValue(
+			"--monster-border-width",
+		);
+		if (borderWidth === null || borderWidth === "") {
+			borderWidth = "0px";
+		}
+
+		const borderWidthWithoutUnit = getComputedCssPixels(borderWidth);
+
+		// space to be allocated
+		this[dimensionsSymbol].setVia(
+			"data.space",
+			width - 2 * borderWidthWithoutUnit,
+		);
+	}
+
+	this[dimensionsSymbol].setVia("data.visible", !(width === 0));
+
+	const itemReferences = [];
+
+	// Get all direct controls, regardless of their current slot.
+	const combinedItems = Array.from(this.children).filter(
+		(item, index, self) => {
+			if (!(item instanceof HTMLElement)) {
+				return false;
+			}
+			if (item.slot && item.slot !== "popper") {
+				return false;
+			}
+			// Filter out duplicates based on data-monster-reference if present, or element itself
+			return (
+				self.findIndex((other) => {
+					if (!(other instanceof HTMLElement)) {
+						return false;
+					}
+					const itemReference = item.dataset.monsterReference;
+					const otherReference = other.dataset.monsterReference;
+					if (itemReference && otherReference) {
+						return itemReference === otherReference;
+					}
+					return other === item;
+				}) === index
+			);
+		},
+	);
+
+	for (const item of combinedItems) {
+		if (!(item instanceof HTMLElement)) {
+			continue;
+		}
+
+		if (!item.hasAttribute("data-monster-reference")) {
+			item.setAttribute("data-monster-reference", new ID("ctrl").toString());
+		}
+
+		const ref = item.getAttribute("data-monster-reference");
+		if (ref === null) continue;
+
+		itemReferences.push(ref);
+
+		// Only calculate width for visible items. Assume invisible ones
+		// (e.g. in popper) have their width calculated previously and stored.
+		if (isElementTrulyVisible(item)) {
+			this[dimensionsSymbol].setVia(
+				`data.item.${ref}`,
+				calcBoxWidth.call(this, item),
+			);
+		}
+	}
+
+	if (this[switchElementSymbol]) {
+		this[dimensionsSymbol].setVia(
+			"data.switchWidth",
+			this[switchElementSymbol].offsetWidth,
+		);
+	}
+
+	this[dimensionsSymbol].setVia("data.calculated", true);
+	this[dimensionsSymbol].setVia("data.itemReferences", itemReferences);
+}
+
+/**
+ * @private
+ */
+function updateResizeObserverObservation() {
+	const observedNodes = getLayoutObservedNodes.call(this);
+	const signature = getLayoutObservedNodesSignature(observedNodes);
+	if (this[observedLayoutNodesSignatureSymbol] === signature) {
+		return;
+	}
+	this[observedLayoutNodesSignatureSymbol] = signature;
+
+	this[resizeObserverSymbol].disconnect();
+	if (this[mutationObserverSymbol]) {
+		this[mutationObserverSymbol].disconnect();
+	}
+
+	observedNodes.forEach((node) => {
+		this[resizeObserverSymbol].observe(node);
+		if (node !== this.parentElement && this[mutationObserverSymbol]) {
+			this[mutationObserverSymbol].observe(node, {
+				attributes: true,
+				attributeFilter: ["style", "class", "hidden"],
+			});
+		}
+	});
+}
+
+/**
+ * @private
+ * @return {HTMLElement[]}
+ */
+function getLayoutObservedNodes() {
+	const observedNodes = [];
+	Array.from(this.children).forEach((node) => {
+		if (node instanceof HTMLElement) {
+			observedNodes.push(node);
+		}
+	});
+
+	let parent = this.parentNode;
+	while (!(parent instanceof HTMLElement) && parent !== null) {
+		parent = parent.parentNode;
+	}
+
+	if (parent instanceof HTMLElement) {
+		observedNodes.push(parent);
+	}
+
+	return observedNodes;
+}
+
+/**
+ * @private
+ * @param {HTMLElement[]} nodes
+ * @return {string}
+ */
+function getLayoutObservedNodesSignature(nodes) {
+	return nodes.map(getLayoutNodeId).join("|");
+}
+
+/**
+ * @private
+ * @param {HTMLElement} node
+ * @return {number}
+ */
+function getLayoutNodeId(node) {
+	let id = layoutNodeIds.get(node);
+	if (id === undefined) {
+		id = ++layoutNodeId;
+		layoutNodeIds.set(node, id);
+	}
+	return id;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function suppressLayoutFeedback() {
+	const state = this[layoutStateSymbol];
+	if (!state) {
+		return;
+	}
+
+	state.suppressSlotChange = true;
+	state.suppressMutation = true;
+	queueMicrotask(() => {
+		state.suppressSlotChange = false;
+		state.suppressMutation = false;
+	});
+}
+
+/**
+ * @private
+ * @param {boolean} visible
+ * @return {void}
+ */
+function setSwitchVisible(visible) {
+	if (!(this[switchElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	if (visible) {
+		if (this[switchElementSymbol].hasAttribute("hidden")) {
+			this[switchElementSymbol].removeAttribute("hidden");
+		}
+		if (this[switchElementSymbol].classList.contains("hidden")) {
+			this[switchElementSymbol].classList.remove("hidden");
+		}
+		return;
+	}
+
+	if (!this[switchElementSymbol].hasAttribute("hidden")) {
+		this[switchElementSymbol].setAttribute("hidden", "");
+	}
+	if (!this[switchElementSymbol].classList.contains("hidden")) {
+		this[switchElementSymbol].classList.add("hidden");
+	}
+}
+
+/**
+ * @private
+ */
+function disconnectResizeObserver() {
+	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+		this[resizeObserverSymbol].disconnect();
+	}
+	this[observedLayoutNodesSignatureSymbol] = null;
+}
+
+/**
+ * @private
+ */
+function toggle() {
+	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		hide.call(this);
+	} else {
+		show.call(this);
+	}
+}
+
+/**
+ * @private
+ */
+function hide() {
+	this[popperElementSymbol].style.display = "none";
+	removeAttributeToken(this[controlElementSymbol], "class", "open");
+}
+
+/**
+ * @private
+ * @this PopperButton
+ */
+function show() {
+	if (this.getOption("disabled", false) === true) {
+		return;
+	}
+
+	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		return;
+	}
+
+	this[popperElementSymbol].style.visibility = "hidden";
+	this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+
+	addAttributeToken(this[controlElementSymbol], "class", "open");
+
+	updatePopper.call(this);
+}
+
+/**
+ * @private
+ */
+function updatePopper() {
+	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+		return;
+	}
+
+	if (this.getOption("disabled", false) === true) {
+		return;
+	}
+
+	positionPopper.call(
+		this,
+		this[switchElementSymbol],
+		this[popperElementSymbol],
+		this.getOption("popper", {}),
+	);
+}
+
+/**
+ * @private
+ */
+function applyLayoutAlignment() {
+	if (!(this[controlBarElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	const alignment = this.getOption("layout.alignment", "left");
+
+	if (alignment === "right") {
+		this[controlBarElementSymbol].setAttribute(
+			ATTRIBUTE_LAYOUT_ALIGNMENT,
+			"right",
+		);
+		return;
+	}
+
+	this[controlBarElementSymbol].setAttribute(ATTRIBUTE_LAYOUT_ALIGNMENT, "left");
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=control]`,
+	);
+	this[controlBarElementSymbol] =
+		this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}=control-bar]`) ||
+		this.shadowRoot.querySelector(`[${ATTRIBUTE_ROLE}=button-bar]`);
+	this[popperElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=popper]`,
+	);
+	this[popperNavElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=popper-nav]`,
+	);
+	this[switchElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=switch]`,
+	);
+
+	this[controlBarSlotElementSymbol] = null;
+	if (this[controlBarElementSymbol])
+		this[controlBarSlotElementSymbol] =
+			this[controlBarElementSymbol].querySelector(`slot`);
+	this[popperSlotElementSymbol] = null;
+	if (this[popperElementSymbol])
+		this[popperSlotElementSymbol] =
+			this[popperElementSymbol].querySelector(`slot`);
+}
+
+/**
+ * @private
+ * @return {Promise<unknown>}
+ * @throws {Error} no shadow-root is defined
+ *
+ */
+function initControlBar() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	scheduleLayout.call(this, { measure: true, layout: true, observe: true });
+}
+
+/**
+ * @private
+ */
+function initPopperSwitch() {
+	/**
+	 * @param {Event} event
+	 */
+	this[popperSwitchEventHandler] = (event) => {
+		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "switch");
+
+		if (element instanceof HTMLButtonElement) {
+			toggle.call(this);
+		}
+	};
+
+	for (const type of ["click", "touch"]) {
+		this[switchElementSymbol].addEventListener(
+			type,
+			this[popperSwitchEventHandler],
+		);
+	}
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <div data-monster-role="control-bar">
+                <slot></slot>
+                <div part="popper-nav" data-monster-role="popper-nav"
+                     tabindex="-1">
+                    <button part="popper-switch" data-monster-role="switch"
+                            class="monster-button-outline-tertiary hidden" hidden>
+                        <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>
+                    </button>
+                </div>
+            </div>
+            <div data-monster-role="popper">
+                <slot name="popper"></slot>
+            </div>
+        </div>`;
+}
+
+registerCustomElement(ControlBar);