@oscarpalmer/oui 0.17.0 → 0.19.0

package/dist/js/popover.full.js

@@ -0,0 +1,760 @@
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+function getString(value) {
+	if (typeof value === "string") return value;
+	if (value == null) return "";
+	if (typeof value === "function") return getString(value());
+	if (typeof value !== "object") return String(value);
+	const asString = String(value.valueOf?.() ?? value);
+	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
+}
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE.test(getString(value));
+}
+var EXPRESSION_WHITESPACE = /^\s*$/;
+function getFocusable(parent) {
+	return getValidElements(parent, FILTERS_FOCUSABLE, false);
+}
+function getItem(element, tabbable) {
+	return {
+		element,
+		tabIndex: tabbable ? getTabIndex(element) : TABINDEX_DEFAULT
+	};
+}
+function getTabIndex(element) {
+	const tabIndex = element?.tabIndex ?? TABINDEX_DEFAULT;
+	if (tabIndex < TABINDEX_BASE && (EXPRESSION_SPECIAL_TABINDEX.test(element.tagName) || isEditable(element)) && !hasTabIndex(element)) return TABINDEX_BASE;
+	return tabIndex;
+}
+function getValidElements(parent, filters, tabbable) {
+	if (!(parent instanceof Element)) return [];
+	const elements = [...parent.querySelectorAll(SELECTOR_FULL)];
+	const items = [];
+	let { length } = elements;
+	for (let index$1 = 0; index$1 < length; index$1 += 1) {
+		const item = getItem(elements[index$1], tabbable);
+		if (!filters.some((filter) => filter(item))) items.push(item);
+	}
+	if (!tabbable) return items.map((item) => item.element);
+	const indiced = [];
+	const zeroed = [];
+	length = items.length;
+	for (let index$1 = 0; index$1 < length; index$1 += 1) {
+		const item = items[index$1];
+		if (item.tabIndex === TABINDEX_BASE) zeroed.push(item.element);
+		else indiced[item.tabIndex] = [...indiced[item.tabIndex] ?? [], item.element];
+	}
+	return [...indiced.flat(), ...zeroed];
+}
+function hasTabIndex(element) {
+	return !Number.isNaN(Number.parseInt(element.getAttribute(ATTRIBUTE_TABINDEX), 10));
+}
+function isDisabled$1(item) {
+	if (EXPRESSION_DISABLEABLE.test(item.element.tagName) && isDisabledFromFieldset(item.element)) return true;
+	return item.element.disabled ?? false;
+}
+function isDisabledFromFieldset(element) {
+	let parent = element.parentElement;
+	while (parent != null) {
+		if (parent instanceof HTMLFieldSetElement && parent.disabled) {
+			const children = Array.from(parent.children);
+			const { length } = children;
+			for (let index$1 = 0; index$1 < length; index$1 += 1) {
+				const child = children[index$1];
+				if (child instanceof HTMLLegendElement) return parent.matches(SELECTOR_FIELDSET_DISABLED) || !child.contains(element);
+			}
+			return true;
+		}
+		parent = parent.parentElement;
+	}
+	return false;
+}
+function isEditable(element) {
+	return EXPRESSION_TRUEISH.test(element.getAttribute(ATTRIBUTE_CONTENTEDITABLE));
+}
+function isHidden(item) {
+	if ((item.element.hidden ?? false) || item.element instanceof HTMLInputElement && item.element.type === STYLE_HIDDEN) return true;
+	if ((item.element.matches(SELECTOR_SUMMARY_FIRST) ? item.element.parentElement : item.element)?.matches(SELECTOR_DETAILS_CLOSED_CHILDREN) ?? false) return true;
+	const style = getComputedStyle(item.element);
+	if (style.display === STYLE_NONE || style.visibility === STYLE_HIDDEN) return true;
+	const { height, width } = item.element.getBoundingClientRect();
+	return height === 0 && width === 0;
+}
+function isInert(item) {
+	return (item.element.inert ?? false) || EXPRESSION_TRUEISH.test(item.element.getAttribute(ATTRIBUTE_INERT)) || item.element.parentElement != null && isInert({
+		element: item.element.parentElement,
+		tabIndex: TABINDEX_DEFAULT
+	});
+}
+function isSummarised(item) {
+	return item.element instanceof HTMLDetailsElement && [...item.element.children].some((child) => EXPRESSION_SUMMARY.test(child.tagName));
+}
+var ATTRIBUTE_CONTENTEDITABLE = "contenteditable";
+var ATTRIBUTE_INERT = "inert";
+var ATTRIBUTE_TABINDEX = "tabindex";
+var EXPRESSION_DISABLEABLE = /^(button|input|select|textarea)$/i;
+var EXPRESSION_SPECIAL_TABINDEX = /^(audio|details|video)$/i;
+var EXPRESSION_SUMMARY = /^summary$/i;
+var EXPRESSION_TRUEISH = /^(|true)$/i;
+var FILTERS_FOCUSABLE = [
+	isDisabled$1,
+	isInert,
+	isHidden,
+	isSummarised
+];
+[...FILTERS_FOCUSABLE];
+var SELECTOR_DETAILS_CLOSED_CHILDREN = "details:not([open]) *";
+var SELECTOR_FIELDSET_DISABLED = "fieldset[disabled] *";
+var SELECTOR_SUMMARY_FIRST = "details > summary:first-of-type";
+var SELECTOR_FULL = [
+	"[contenteditable]:not([contenteditable=\"false\"])",
+	"[tabindex]:not(slot)",
+	"a[href]",
+	"audio[controls]",
+	"button",
+	"details",
+	SELECTOR_SUMMARY_FIRST,
+	"input",
+	"select",
+	"textarea",
+	"video[controls]"
+].map((selector) => `${selector}:not([inert])`).join(",");
+var STYLE_HIDDEN = "hidden";
+var STYLE_NONE = "none";
+var TABINDEX_BASE = 0;
+var TABINDEX_DEFAULT = -1;
+function noop() {}
+function calculate() {
+	return new Promise((resolve) => {
+		const values = [];
+		let last;
+		function step(now) {
+			if (last != null) values.push(now - last);
+			last = now;
+			if (values.length >= TOTAL) resolve(values.sort().slice(TRIM_PART, -TRIM_PART).reduce((first, second) => first + second, 0) / (values.length - TRIM_TOTAL));
+			else requestAnimationFrame(step);
+		}
+		requestAnimationFrame(step);
+	});
+}
+var TOTAL = 10;
+var TRIM_PART = 2;
+var TRIM_TOTAL = 4;
+await calculate();
+function clamp(value, minimum, maximum, loop) {
+	if (![
+		value,
+		minimum,
+		maximum
+	].every(isNumber)) return NaN;
+	if (value < minimum) return loop === true ? maximum : minimum;
+	return value > maximum ? loop === true ? minimum : maximum : value;
+}
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+function addDelegatedHandler(doc, type, name, passive) {
+	if (DELEGATED.has(name)) return;
+	DELEGATED.add(name);
+	doc.addEventListener(type, passive ? HANDLER_PASSIVE : HANDLER_ACTIVE, { passive });
+}
+function addDelegatedListener(target, type, name, listener, passive) {
+	target[name] ??= /* @__PURE__ */ new Set();
+	target[name].add(listener);
+	addDelegatedHandler(document, type, name, passive);
+	return () => {
+		removeDelegatedListener(target, name, listener);
+	};
+}
+function delegatedEventHandler(event) {
+	const key = `${EVENT_PREFIX}${event.type}${this ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+	const items = event.composedPath();
+	const { length } = items;
+	let target = items[0];
+	Object.defineProperties(event, {
+		currentTarget: {
+			configurable: true,
+			get() {
+				return target;
+			}
+		},
+		target: {
+			configurable: true,
+			value: target
+		}
+	});
+	for (let index$1 = 0; index$1 < length; index$1 += 1) {
+		const item = items[index$1];
+		const listeners = item[key];
+		if (item.disabled || listeners == null) continue;
+		target = item;
+		for (const listener of listeners) {
+			listener.call(item, event);
+			if (event.cancelBubble) return;
+		}
+	}
+}
+function getDelegatedName(target, type, options) {
+	if (isEventTarget(target) && EVENT_TYPES.has(type) && !options.capture && !options.once && options.signal == null) return `${EVENT_PREFIX}${type}${options.passive ? EVENT_SUFFIX_PASSIVE : EVENT_SUFFIX_ACTIVE}`;
+}
+function removeDelegatedListener(target, name, listener) {
+	const handlers = target[name];
+	if (handlers == null || !handlers.has(listener)) return false;
+	handlers.delete(listener);
+	if (handlers.size === 0) target[name] = void 0;
+	return true;
+}
+var DELEGATED = /* @__PURE__ */ new Set();
+var EVENT_PREFIX = "@";
+var EVENT_SUFFIX_ACTIVE = ":active";
+var EVENT_SUFFIX_PASSIVE = ":passive";
+var EVENT_TYPES = new Set([
+	"beforeinput",
+	"click",
+	"dblclick",
+	"contextmenu",
+	"focusin",
+	"focusout",
+	"input",
+	"keydown",
+	"keyup",
+	"mousedown",
+	"mousemove",
+	"mouseout",
+	"mouseover",
+	"mouseup",
+	"pointerdown",
+	"pointermove",
+	"pointerout",
+	"pointerover",
+	"pointerup",
+	"touchend",
+	"touchmove",
+	"touchstart"
+]);
+var HANDLER_ACTIVE = delegatedEventHandler.bind(false);
+var HANDLER_PASSIVE = delegatedEventHandler.bind(true);
+function createEventOptions(options) {
+	return {
+		capture: getBoolean(options?.capture),
+		once: getBoolean(options?.once),
+		passive: getBoolean(options?.passive, true),
+		signal: options?.signal instanceof AbortSignal ? options.signal : void 0
+	};
+}
+function on(target, type, listener, options) {
+	if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
+	const extended = createEventOptions(options);
+	const delegated = getDelegatedName(target, type, extended);
+	if (delegated != null) return addDelegatedListener(target, type, delegated, listener, extended.passive);
+	target.addEventListener(type, listener, extended);
+	if (extended.once) return noop;
+	return () => {
+		target.removeEventListener(type, listener, extended);
+	};
+}
+function findAncestor(origin, selector) {
+	if (!(origin instanceof Element) || selector == null) return null;
+	if (typeof selector === "string") {
+		if (origin.matches?.(selector)) return origin;
+		return origin.closest(selector);
+	}
+	if (typeof selector !== "function") return null;
+	if (selector(origin)) return origin;
+	let parent = origin.parentElement;
+	while (parent != null && !selector(parent)) {
+		if (parent === document.body) return null;
+		parent = parent.parentElement;
+	}
+	return parent;
+}
+var Floatable = class {
+	active = false;
+	disabled = false;
+	frame;
+	ignoreFocus = false;
+	constructor(options) {
+		this.options = options;
+		initialize(this);
+	}
+	destroy() {
+		stop(this);
+		const state = getState();
+		state?.active.delete(this);
+		state?.mapped.delete(this.options.anchor);
+		state?.mapped.delete(this.options.content);
+		this.options.anchor = void 0;
+		this.options.content = void 0;
+	}
+	disable() {
+		if (this.disabled) return;
+		this.disabled = true;
+		stop(this);
+		getState()?.active.delete(this);
+	}
+	enable() {
+		if (!this.disabled) return;
+		this.disabled = false;
+		initialize(this);
+	}
+	toggle(active, ignoreFocus) {
+		if (this.disabled || this.active === active) return;
+		const state = getState();
+		if (state == null) return;
+		this.ignoreFocus = !active && (ignoreFocus ?? false);
+		stop(this);
+		if (active) state.active.add(this);
+		else state.active.delete(this);
+		if (this.options.interactive) if (active) state.order.push(this);
+		else {
+			const index$1 = state.order.indexOf(this);
+			if (index$1 > -1) state.order.splice(index$1, 1);
+		}
+		if (active) activate(this);
+		else deactivate(this);
+	}
+};
+function activate(floatable) {
+	floatable.active = true;
+	document.body.append(floatable.options.content);
+	floatable.options.content.hidden = false;
+	updatePosition(floatable);
+}
+function closeAbove(element) {
+	const state = getState();
+	if (state == null) return;
+	const index$1 = state.order.findIndex((floatable) => floatable.options.anchor === element || floatable.options.content === element);
+	if (index$1 === -1 || index$1 === state.order.length - 1) return;
+	while (index$1 < state.order.length - 1) state.order.pop()?.toggle(false, true);
+}
+function closeAll() {
+	const state = getState();
+	const floatables = [...state?.active ?? []];
+	state?.active.clear();
+	for (const floatable of floatables) floatable.toggle(false, true);
+}
+function closeNonInteractive(state) {
+	for (const floatable of state.active) if (!floatable.options.interactive) floatable.toggle(false);
+}
+function deactivate(floatable) {
+	floatable.active = false;
+	floatable.options.content.hidden = true;
+	floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
+	floatable.options.onAfter?.(false);
+}
+function getState() {
+	return window._oscarpalmer_oui_floatable;
+}
+function getX(anchor, content, position) {
+	if (position.endsWith(POSITION_SUFFIX_END)) {
+		const end = anchor.right - content.width;
+		return end < 0 ? 0 : end;
+	}
+	if (position.endsWith(POSITION_SUFFIX_START)) {
+		const start = anchor.left;
+		return start + content.width > window.innerWidth ? window.innerWidth - content.width : start;
+	}
+	if (position.startsWith(POSITION_END)) return anchor.right;
+	if (position.startsWith(POSITION_START)) return anchor.left - content.width;
+	if (position.startsWith(POSITION_HORIZONTAL)) {
+		if (anchor.right + content.width <= window.innerWidth) return anchor.right;
+		return anchor.left - content.width;
+	}
+	const left = anchor.left + (anchor.width - content.width) / 2;
+	return left < 0 ? 0 : left;
+}
+function getY(anchor, content, position, preferAbove) {
+	if (position.startsWith(POSITION_ABOVE)) return anchor.top - content.height;
+	if (position.startsWith(POSITION_BELOW)) return anchor.bottom;
+	if (position.endsWith(POSITION_BOTTOM)) {
+		const bottom = anchor.bottom - content.height;
+		return bottom < 0 ? 0 : bottom;
+	}
+	if (position.endsWith(POSITION_TOP)) {
+		const top = anchor.top;
+		return top + content.height > window.innerHeight ? window.innerHeight - content.height : top;
+	}
+	if (position.startsWith(POSITION_VERTICAL)) {
+		if (preferAbove && anchor.top - content.height >= 0) return anchor.top - content.height;
+		if (anchor.bottom + content.height <= document.body.clientHeight) return anchor.bottom;
+		return anchor.top - content.height;
+	}
+	return anchor.top + (anchor.height - content.height) / 2;
+}
+function initialize(floatable) {
+	const { anchor, content, interactive } = floatable.options;
+	if (interactive) {
+		anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
+		content.setAttribute(ATTRIBUTE_CONTENT, "");
+	}
+	content.style.position = "fixed";
+	content.style.inset = "0 auto auto 0";
+	content.style.zIndex = "10";
+	const state = getState();
+	state?.mapped.set(anchor, floatable);
+	state?.mapped.set(content, floatable);
+}
+function isDisabled(element) {
+	return element.disabled || element.readOnly || element.getAttribute("aria-disabled") === "true";
+}
+function onClick(event) {
+	const related = findAncestor(event.target, SELECTOR_ALL);
+	if (!(related instanceof HTMLElement)) closeAll();
+	else if (related.hasAttribute(ATTRIBUTE_CONTENT)) closeAbove(related);
+	else if (!isDisabled(related)) toggle(related);
+}
+function onKeyDown(event) {
+	if (event.key !== "Escape") return;
+	const state = getState();
+	if (state == null || state.active.size === 0) return;
+	closeNonInteractive(state);
+	const related = findAncestor(event.target, SELECTOR_CONTENT$1);
+	if (!(related instanceof HTMLElement)) return;
+	closeAbove(related);
+	const floatable = state.mapped.get(related);
+	if (floatable != null) floatable.toggle(false);
+}
+function stop(floatable) {
+	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
+	floatable.frame = void 0;
+}
+function toggle(anchor) {
+	const floatable = getState()?.mapped.get(anchor);
+	if (floatable == null) {
+		closeAll();
+		return;
+	}
+	const active = Boolean(floatable.active);
+	const content = findAncestor(floatable.options.anchor, SELECTOR_CONTENT$1);
+	if (content == null) closeAll();
+	else closeAbove(content);
+	floatable.toggle(!active);
+}
+function updatePosition(floatable) {
+	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute)?.trim() ?? floatable.options.defaultPosition;
+	if (!POSITIONS.has(position)) position = floatable.options.defaultPosition;
+	let previousAnchor;
+	let previousContent;
+	let calculated = false;
+	let runOnAfter = false;
+	function run() {
+		const anchor = floatable.options.anchor.getBoundingClientRect();
+		const content = floatable.options.content.getBoundingClientRect();
+		if (calculated) {
+			if (previousAnchor != null && previousContent != null) {
+				if (PROPERTIES.every((property) => anchor[property] === previousAnchor[property]) && PROPERTIES.every((property) => content[property] === previousContent[property])) {
+					floatable.frame = requestAnimationFrame(run);
+					return;
+				}
+			}
+		} else calculated = true;
+		update(anchor, content);
+	}
+	function update(anchor, content) {
+		previousAnchor = anchor;
+		previousContent = content;
+		const left = getX(anchor, content, position);
+		const top = getY(anchor, content, position, floatable.options.preferAbove);
+		if (top + content.height > window.innerHeight) floatable.options.content.style.height = `${window.innerHeight - top}px`;
+		else floatable.options.content.style.height = "";
+		if (left + content.width > window.innerWidth) floatable.options.content.style.width = `${window.innerWidth - left}px`;
+		else floatable.options.content.style.width = "";
+		floatable.options.content.style.transform = `translate3d(${left}px, ${top}px, 0)`;
+		floatable.frame = requestAnimationFrame(run);
+		if (!runOnAfter) {
+			runOnAfter = true;
+			floatable.options.onAfter?.(true);
+		}
+	}
+	floatable.frame = requestAnimationFrame(run);
+}
+const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
+const ATTRIBUTE_CONTENT = "oui-floatable-content";
+const INSERT_AFTEREND = "afterend";
+const POSITION_ABOVE = "above";
+const POSITION_BELOW = "below";
+const POSITION_BOTTOM = "bottom";
+const POSITION_END = "end";
+const POSITION_HORIZONTAL = "horizontal";
+const POSITION_START = "start";
+const POSITION_SUFFIX_END = "-end";
+const POSITION_SUFFIX_START = "-start";
+const POSITION_TOP = "top";
+const POSITION_VERTICAL = "vertical";
+const POSITIONS = new Set([
+	"above",
+	"above-end",
+	"above-start",
+	"below",
+	"below-end",
+	"below-start",
+	"end",
+	"end-bottom",
+	"end-top",
+	"horizontal",
+	"horizontal-bottom",
+	"horizontal-top",
+	"start",
+	"start-bottom",
+	"start-top",
+	"vertical",
+	"vertical-end",
+	"vertical-start"
+]);
+const PROPERTIES = [
+	"bottom",
+	"left",
+	"right",
+	"top"
+];
+const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_CONTENT$1 = `[${ATTRIBUTE_CONTENT}]`;
+if (window._oscarpalmer_oui_floatable == null) {
+	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
+		enumerable: false,
+		value: {
+			active: /* @__PURE__ */ new Set(),
+			mapped: /* @__PURE__ */ new Map(),
+			order: []
+		},
+		writable: false
+	});
+	on(document, "keydown", (event) => {
+		onKeyDown(event);
+	});
+	on(document, "click", (event) => {
+		onClick(event);
+	});
+}
+var FocusTrap = class {
+	disabled = false;
+	connected = true;
+	element;
+	embedded;
+	get contain() {
+		return this.element.hasAttribute(FOCUS_TRAP_CONTAIN);
+	}
+	get noescape() {
+		return this.element.hasAttribute(FOCUS_TRAP_NOESCAPE);
+	}
+	constructor(element, options) {
+		this.element = element;
+		this.embedded = options != null;
+		element.setAttribute("tabindex", "-1");
+		if (options != null) element.setAttribute(FOCUS_TRAP_SELECTOR, "");
+		if (options?.noescape) element.setAttribute(FOCUS_TRAP_NOESCAPE, "");
+	}
+	connect() {
+		setConnected(this, true);
+	}
+	destroy() {
+		this.element = void 0;
+	}
+	disable() {
+		if (!(this.disabled || this.noescape)) setDisabled(this, true);
+	}
+	disconnect() {
+		setConnected(this, false);
+	}
+	enable() {
+		if (this.disabled) setDisabled(this, false);
+	}
+	focus(last) {
+		tabToTrap(this, getFocusable(this.element), this.element, last ? -1 : 0);
+	}
+};
+function createFocusTrap(element, options) {
+	let focusTrap = FOCUSTRAPS_ALL.get(element);
+	if (focusTrap == null) {
+		focusTrap = new FocusTrap(element, options);
+		FOCUSTRAPS_ALL.set(element, focusTrap);
+	}
+	return focusTrap;
+}
+function onEscape(event) {
+	let element = findAncestor(event.target, ATTRIBUTE_SELECTOR);
+	let focusTrap = FOCUSTRAPS_ALL.get(element);
+	if (element == null || focusTrap == null) return;
+	while (focusTrap.disabled) {
+		element = findAncestor(focusTrap.element.parentElement, ATTRIBUTE_SELECTOR);
+		focusTrap = FOCUSTRAPS_ALL.get(element);
+		if (element == null || focusTrap == null) return;
+		if (!focusTrap.disabled) break;
+	}
+	focusTrap?.disable();
+}
+function onFocusIn(event) {
+	lastTarget = FOCUSTRAPS_ALL.get(findAncestor(event.target, ATTRIBUTE_SELECTOR)) == null ? void 0 : event.target;
+}
+function onKeydown(event) {
+	switch (event.key) {
+		case "Escape":
+			onEscape(event);
+			break;
+		case "Tab":
+			onTab(event);
+			break;
+		default: return;
+	}
+}
+function onPointerdown(event) {
+	const lastFocusTrap = findAncestor(lastTarget, ATTRIBUTE_SELECTOR);
+	const nextFocusTrap = findAncestor(event.target, ATTRIBUTE_SELECTOR);
+	if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
+		if (FOCUSTRAPS_ALL.get(lastFocusTrap)?.contain ?? false) {
+			event.preventDefault();
+			lastTarget?.focus();
+		}
+	}
+	if (FOCUSTRAPS_DISABLED.size === 0) return;
+	for (const focusTrap of FOCUSTRAPS_DISABLED) if (focusTrap.element !== nextFocusTrap) focusTrap.enable();
+}
+function onTab(event) {
+	const element = findAncestor(event.target, ATTRIBUTE_SELECTOR);
+	const focusTrap = FOCUSTRAPS_ALL.get(element);
+	if (focusTrap == null) return;
+	if (!focusTrap.disabled) event.preventDefault();
+	const elements = getFocusable(element);
+	const index$1 = elements.indexOf(event.target);
+	if (index$1 === -1 || elements.length === 0) tabToTrap(focusTrap, elements, element);
+	else tabToElement(focusTrap, elements, index$1, event.shiftKey ? -1 : 1);
+}
+function setConnected(focusTrap, value) {
+	if (!focusTrap.embedded || focusTrap.connected === value) return;
+	focusTrap.connected = value;
+}
+function setDisabled(focusTrap, value) {
+	focusTrap.disabled = value;
+	if (value) FOCUSTRAPS_DISABLED.add(focusTrap);
+	else FOCUSTRAPS_DISABLED.delete(focusTrap);
+}
+function tabToElement(focusTrap, elements, index$1, modifier) {
+	const { length } = elements;
+	const next = clamp(index$1 + modifier, 0, length - 1, true);
+	if (focusTrap.disabled) {
+		if (index$1 === length - 1 && next === 0 || index$1 === 0 && next === length - 1) {
+			lastTarget = void 0;
+			focusTrap.enable();
+		}
+		return;
+	}
+	const element = elements[next];
+	const elementFocusTrap = FOCUSTRAPS_ALL.get(element);
+	if (elementFocusTrap != null) elementFocusTrap.focus(modifier === -1);
+	else {
+		elements[next].focus();
+		lastTarget = elements[next];
+	}
+}
+function tabToTrap(focusTrap, elements, element, index$1) {
+	if (focusTrap.disabled) {
+		lastTarget = void 0;
+		focusTrap.enable();
+	} else {
+		const next = elements.length === 0 ? element : elements.at(index$1 ?? 0);
+		next.focus();
+		lastTarget = next;
+	}
+}
+const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
+const ATTRIBUTE_SELECTOR = `[${FOCUS_TRAP_SELECTOR}]`;
+const EVENT_OPTIONS = {
+	capture: true,
+	passive: false
+};
+const FOCUS_TRAP_CONTAIN = `${FOCUS_TRAP_SELECTOR}-contain`;
+const FOCUS_TRAP_NOESCAPE = `${FOCUS_TRAP_SELECTOR}-noescape`;
+const FOCUSTRAPS_ALL = /* @__PURE__ */ new WeakMap();
+const FOCUSTRAPS_DISABLED = /* @__PURE__ */ new Set();
+let lastTarget;
+on(document, "focusin", onFocusIn, EVENT_OPTIONS);
+on(document, "keydown", onKeydown, EVENT_OPTIONS);
+on(document, "mousedown", onPointerdown, EVENT_OPTIONS);
+on(document, "touchstart", onPointerdown, EVENT_OPTIONS);
+let index = 0;
+var OuiPopoverElement = class extends HTMLElement {
+	#floatable;
+	#focusTrap;
+	constructor() {
+		super();
+		const content = this.querySelector(SELECTOR_CONTENT);
+		const toggle$1 = this.querySelector(SELECTOR_TOGGLE);
+		if (!(content instanceof HTMLElement)) throw new Error("A oui-popover must have a direct child element with the [oui-popover-content]-attribute");
+		if (!(toggle$1 instanceof HTMLButtonElement)) throw new Error("A oui-popover must have a direct child element with the [oui-popover-toggle]-attribute and be a button");
+		content.hidden = true;
+		content.setAttribute("role", "dialog");
+		content.setAttribute("aria-modal", "true");
+		if (isNullableOrWhitespace(content.id)) content.setAttribute("id", `${ATTRIBUTE_ID_PREFIX}_${++index}`);
+		toggle$1.setAttribute("aria-controls", content.id);
+		toggle$1.setAttribute("aria-haspopup", "dialog");
+		this.#floatable = new Floatable({
+			content,
+			anchor: toggle$1,
+			defaultPosition: "below-start",
+			interactive: true,
+			positionAttribute: "position",
+			preferAbove: false,
+			onAfter: (active) => {
+				if (active) focus(content);
+				else if (!this.#floatable.ignoreFocus) toggle$1.focus();
+			}
+		});
+		this.#focusTrap = createFocusTrap(content, { noescape: true });
+		POPOVERS.set(toggle$1, this.#floatable);
+		POPOVERS.set(content, this.#floatable);
+	}
+	close() {
+		this.hidePopover();
+	}
+	connectedCallback() {
+		this.#floatable.enable();
+		this.#focusTrap.connect();
+	}
+	disconnectedCallback() {
+		this.#floatable.disable();
+		this.#focusTrap.disconnect();
+	}
+	hidePopover() {
+		if (this.#floatable.active && this.isConnected) this.#floatable.toggle(false);
+	}
+	open() {
+		this.showPopover();
+	}
+	showPopover() {
+		if (!this.#floatable.active && this.isConnected) this.#floatable.toggle(true);
+	}
+	toggle() {
+		this.togglePopover();
+	}
+	togglePopover(options) {
+		if (typeof options === "boolean") {
+			if (options === true) this.showPopover();
+			else this.hidePopover();
+			return options;
+		}
+		if (this.#floatable.active) {
+			this.hidePopover();
+			return false;
+		}
+		this.showPopover();
+		return true;
+	}
+};
+function focus(content) {
+	let target = getFocusable(content)[0];
+	if (!(target instanceof HTMLElement)) target = content;
+	requestAnimationFrame(() => {
+		target.focus();
+	});
+}
+const ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
+const POPOVERS = /* @__PURE__ */ new Map();
+const SELECTOR = "oui-popover";
+const SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
+const SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
+customElements.define(SELECTOR, OuiPopoverElement);
+export { OuiPopoverElement };