@oscarpalmer/oui 0.16.0 → 0.18.0

package/dist/js/oui.full.js

@@ -0,0 +1,1596 @@
+function attributable(attribute, add, remove) {
+    const observer = new MutationObserver(entries => {
+        const { length } = entries;
+        for (let index = 0; index < length; index += 1) {
+            const entry = entries[index];
+            if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
+                if (entry.target.hasAttribute(attribute)) {
+                    handleAdded(attribute, [entry.target], add);
+                }
+                else {
+                    handleRemoved([entry.target], remove);
+                }
+            }
+            else if (entry.type === 'childList') {
+                handleAdded(attribute, entry.addedNodes, add);
+                handleRemoved(entry.removedNodes, remove);
+            }
+        }
+    });
+    observer.observe(document, {
+        attributeFilter: [attribute],
+        attributes: true,
+        childList: true,
+        subtree: true,
+    });
+    requestAnimationFrame(() => {
+        handleAdded(attribute, document.querySelectorAll(`[${attribute}]`), add);
+    });
+}
+function handleAdded(attribute, nodes, add) {
+    const elements = [...nodes].filter(node => node instanceof HTMLElement);
+    const { length } = elements;
+    for (let index = 0; index < length; index += 1) {
+        const element = elements[index];
+        if (element.hasAttribute(attribute)) {
+            add(element);
+        }
+    }
+}
+function handleRemoved(nodes, remove) {
+    const elements = [...nodes].filter(node => node instanceof HTMLElement);
+    const { length } = elements;
+    for (let index = 0; index < length; index += 1) {
+        remove(elements[index]);
+    }
+}
+
+function isNumber(value) {
+	return typeof value === "number" && !Number.isNaN(value);
+}
+function isPlainObject(value) {
+	if (value === null || typeof value !== "object") return false;
+	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
+}
+
+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 isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+function isHTMLOrSVGElement(value) {
+	return value instanceof HTMLElement || value instanceof SVGElement;
+}
+
+function compact(array, strict) {
+	if (!Array.isArray(array)) return [];
+	const { length } = array;
+	const compacted = [];
+	for (let index = 0; index < length; index += 1) {
+		const item = array[index];
+		if (item != null) compacted.push(item);
+	}
+	return compacted;
+}
+
+function getString(value) {
+	if (typeof value === "string") return value;
+	if (value == null) return "";
+	if (typeof value !== "object") return String(value);
+	const asString = String(value.valueOf?.() ?? value);
+	return asString.startsWith("[object ") ? JSON.stringify(value) : asString;
+}
+function join(value, delimiter) {
+	return compact(value).map(getString).join(delimiter );
+}
+function words(value) {
+	return typeof value === "string" ? value.match(EXPRESSION_WORDS) ?? [] : [];
+}
+var EXPRESSION_WORDS = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
+
+function camelCase(value) {
+	return toCase(value, "");
+}
+function capitalize(value) {
+	if (typeof value !== "string" || value.length === 0) return "";
+	return value.length === 1 ? value.toLocaleUpperCase() : `${value.charAt(0).toLocaleUpperCase()}${value.slice(1).toLocaleLowerCase()}`;
+}
+function toCase(value, delimiter, capitalizeAny, capitalizeFirst) {
+	if (typeof value !== "string") return "";
+	if (value.length < 1) return value;
+	const parts = words(value);
+	const partsLength = parts.length;
+	const result = [];
+	for (let partIndex = 0; partIndex < partsLength; partIndex += 1) {
+		const items = parts[partIndex].replace(EXPRESSION_ACRONYM, (full, one, two, three) => three === "s" ? full : `${one}-${two}${three}`).replace(EXPRESSION_CAMEL_CASE, "$1-$2").split("-");
+		const itemsLength = items.length;
+		const partResult = [];
+		let itemCount = 0;
+		for (let itemIndex = 0; itemIndex < itemsLength; itemIndex += 1) {
+			const item = items[itemIndex];
+			if (item.length === 0) continue;
+			if (itemCount === 0 && partIndex === 0 && true) partResult.push(item.toLocaleLowerCase());
+			else partResult.push(capitalize(item));
+			itemCount += 1;
+		}
+		result.push(join(partResult, delimiter));
+	}
+	return join(result, delimiter);
+}
+var EXPRESSION_CAMEL_CASE = /(\p{Ll})(\p{Lu})/gu;
+var EXPRESSION_ACRONYM = /(\p{Lu}*)(\p{Lu})(\p{Ll}+)/gu;
+
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+function getStyleValue(element, property, computed) {
+	const name = camelCase(property);
+	return computed ? getComputedStyle(element)[name] : element.style[name];
+}
+
+function isNullableOrWhitespace(value) {
+	return value == null || EXPRESSION_WHITESPACE$1.test(getString(value));
+}
+var EXPRESSION_WHITESPACE$1 = /^\s*$/;
+
+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 >= CALCULATION_TOTAL) {
+				const median = values.sort().slice(2, -2).reduce((first, second) => first + second, 0) / (values.length - CALCULATION_TRIM);
+				resolve(median);
+			} else requestAnimationFrame(step);
+		}
+		requestAnimationFrame(step);
+	});
+}
+function noop() {}
+var CALCULATION_TOTAL = 10;
+var CALCULATION_TRIM = 4;
+calculate().then((value) => {
+});
+
+function createEventOptions(options) {
+	return {
+		capture: getBoolean(options?.capture),
+		once: getBoolean(options?.once),
+		passive: getBoolean(options?.passive, true),
+		signal: options?.signal
+	};
+}
+function getPosition(event) {
+	let x;
+	let y;
+	if (event instanceof MouseEvent) {
+		x = event.clientX;
+		y = event.clientY;
+	} else if (event instanceof TouchEvent) {
+		x = event.touches[0]?.clientX;
+		y = event.touches[0]?.clientY;
+	}
+	return typeof x === "number" && typeof y === "number" ? {
+		x,
+		y
+	} : void 0;
+}
+function on(target, type, listener, options) {
+	if (!isEventTarget(target) || typeof type !== "string" || typeof listener !== "function") return noop;
+	const extended = createEventOptions(options);
+	target.addEventListener(type, listener, extended);
+	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;
+}
+
+function getFocusable(parent) {
+	return getValidElements(parent, FILTERS_FOCUSABLE);
+}
+function getItem(element, tabbable) {
+	return {
+		element,
+		tabIndex: TABINDEX_DEFAULT
+	};
+}
+function getValidElements(parent, filters, tabbable) {
+	if (!(parent instanceof Element)) return [];
+	const elements = [...parent.querySelectorAll(SELECTOR_FULL$1)];
+	const items = [];
+	let { length } = elements;
+	for (let index = 0; index < length; index += 1) {
+		const item = getItem(elements[index]);
+		if (!filters.some((filter) => filter(item))) items.push(item);
+	}
+	return items.map((item) => item.element);
+}
+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 = 0; index < length; index += 1) {
+				const child = children[index];
+				if (child instanceof HTMLLegendElement) return parent.matches(SELECTOR_FIELDSET_DISABLED) || !child.contains(element);
+			}
+			return true;
+		}
+		parent = parent.parentElement;
+	}
+	return false;
+}
+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});
+}
+function isSummarised(item) {
+	return item.element instanceof HTMLDetailsElement && [...item.element.children].some((child) => EXPRESSION_SUMMARY.test(child.tagName));
+}
+var ATTRIBUTE_INERT = "inert";
+var EXPRESSION_DISABLEABLE = /^(button|input|select|textarea)$/i;
+var EXPRESSION_SUMMARY = /^summary$/i;
+var EXPRESSION_TRUEISH = /^(|true)$/i;
+var FILTERS_FOCUSABLE = [
+	isDisabled$1,
+	isInert,
+	isHidden,
+	isSummarised
+];
+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$1 = [
+	"[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_DEFAULT = -1;
+
+class FocusTrap {
+    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 = undefined;
+    }
+    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) {
+    const focusTrap = FOCUSTRAPS_ALL.get(findAncestor(event.target, ATTRIBUTE_SELECTOR));
+    lastTarget = focusTrap == null ? undefined : event.target;
+}
+function onKeydown$1(event) {
+    switch (event.key) {
+        case 'Escape':
+            onEscape(event);
+            break;
+        case 'Tab':
+            onTab(event);
+            break;
+        default:
+            return;
+    }
+}
+function onPointerdown$1(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 = elements.indexOf(event.target);
+    if (index === -1 || elements.length === 0) {
+        tabToTrap(focusTrap, elements, element);
+    }
+    else {
+        tabToElement(focusTrap, elements, index, 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, modifier) {
+    const { length } = elements;
+    const next = clamp(index + modifier, 0, length - 1, true);
+    if (focusTrap.disabled) {
+        if ((index === length - 1 && next === 0) ||
+            (index === 0 && next === length - 1)) {
+            lastTarget = undefined;
+            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) {
+    if (focusTrap.disabled) {
+        lastTarget = undefined;
+        focusTrap.enable();
+    }
+    else {
+        const next = elements.length === 0 ? element : elements.at(index ?? 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 = new WeakMap();
+const FOCUSTRAPS_DISABLED = new Set();
+let lastTarget;
+//
+on(document, 'focusin', onFocusIn, EVENT_OPTIONS);
+on(document, 'keydown', onKeydown$1, EVENT_OPTIONS);
+on(document, 'mousedown', onPointerdown$1, EVENT_OPTIONS);
+on(document, 'touchstart', onPointerdown$1, EVENT_OPTIONS);
+
+function removeFocusTraps(element) {
+    FOCUSTRAPS_ALL.get(element)?.destroy();
+    FOCUSTRAPS_ALL.delete(element);
+}
+attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTraps);
+
+class Floatable {
+    options;
+    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 = undefined;
+        this.options.content = undefined;
+    }
+    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 = state.order.indexOf(this);
+                if (index > -1) {
+                    state.order.splice(index, 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 = state.order.findIndex(floatable => floatable.options.anchor === element ||
+        floatable.options.content === element);
+    if (index === -1 || index === state.order.length - 1) {
+        return;
+    }
+    while (index < state.order.length - 1) {
+        void state.order.pop()?.toggle(false, true);
+    }
+}
+function closeAll() {
+    const state = getState();
+    const floatables = [...(state?.active ?? [])];
+    state?.active.clear();
+    for (const floatable of floatables) {
+        void floatable.toggle(false, true);
+    }
+}
+function closeNonInteractive(state) {
+    for (const floatable of state.active) {
+        if (!floatable.options.interactive) {
+            void 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$1, '');
+    }
+    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$1(event) {
+    const related = findAncestor(event.target, SELECTOR_ALL);
+    if (!(related instanceof HTMLElement)) {
+        closeAll();
+    }
+    else if (related.hasAttribute(ATTRIBUTE_CONTENT$1)) {
+        closeAbove(related);
+    }
+    else if (!isDisabled(related)) {
+        toggle$1(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$2);
+    if (!(related instanceof HTMLElement)) {
+        return;
+    }
+    closeAbove(related);
+    const floatable = state.mapped.get(related);
+    if (floatable != null) {
+        void floatable.toggle(false);
+    }
+}
+function stop(floatable) {
+    if (floatable.frame != null) {
+        cancelAnimationFrame(floatable.frame);
+    }
+    floatable.frame = undefined;
+}
+function toggle$1(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$2);
+    if (content == null) {
+        closeAll();
+    }
+    else {
+        closeAbove(content);
+    }
+    void 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.inset = `${top}px auto auto ${left}px`;
+        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$1 = '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$1}]`;
+const SELECTOR_CONTENT$2 = `[${ATTRIBUTE_CONTENT$1}]`;
+//
+if (window._oscarpalmer_oui_floatable == null) {
+    Object.defineProperty(window, '_oscarpalmer_oui_floatable', {
+        enumerable: false,
+        value: {
+            active: new Set(),
+            mapped: new Map(),
+            order: [],
+        },
+        writable: false,
+    });
+    on(document, 'keydown', event => {
+        onKeyDown(event);
+    });
+    on(document, 'click', event => {
+        onClick$1(event);
+    });
+}
+
+let index$2 = 0;
+class OuiPopoverElement extends HTMLElement {
+    #floatable;
+    #focusTrap;
+    constructor() {
+        super();
+        const content = this.querySelector(SELECTOR_CONTENT$1);
+        const toggle = 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 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$2}`);
+        }
+        toggle.setAttribute('aria-controls', content.id);
+        toggle.setAttribute('aria-haspopup', 'dialog');
+        this.#floatable = new Floatable({
+            content,
+            anchor: toggle,
+            defaultPosition: 'below-start',
+            interactive: true,
+            positionAttribute: 'position',
+            preferAbove: false,
+            onAfter: (active) => {
+                if (active) {
+                    focus(content);
+                }
+                else if (!this.#floatable.ignoreFocus) {
+                    toggle.focus();
+                }
+            },
+        });
+        this.#focusTrap = createFocusTrap(content, {
+            noescape: true,
+        });
+        POPOVERS.set(toggle, 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 = new Map();
+const SELECTOR$2 = 'oui-popover';
+const SELECTOR_CONTENT$1 = `:scope > [${SELECTOR$2}-content]`;
+const SELECTOR_TOGGLE = `:scope > [${SELECTOR$2}-toggle]`;
+//
+customElements.define(SELECTOR$2, OuiPopoverElement);
+
+function round(value, decimals) {
+	if (typeof value !== "number") return NaN;
+	const mod = 10 ** decimals;
+	return Math.round((value + Number.EPSILON) * mod) / mod;
+}
+
+function setElementValues(element, first, second, callback) {
+	if (!isHTMLOrSVGElement(element)) return;
+	if (isPlainObject(first)) {
+		const entries = Object.entries(first);
+		const { length } = entries;
+		for (let index = 0; index < length; index += 1) {
+			const [key, value] = entries[index];
+			callback(element, key, value);
+		}
+	} else if (typeof first === "string") callback(element, first, second);
+}
+function updateElementValue(element, key, value, set, remove, json) {
+	if (isNullableOrWhitespace(value)) remove.call(element, key);
+	else set.call(element, key, String(value));
+}
+
+function getStyles(element, properties, computed) {
+	const styles = {};
+	if (!(isHTMLOrSVGElement(element) && Array.isArray(properties))) return styles;
+	const { length } = properties;
+	for (let index = 0; index < length; index += 1) {
+		const property = properties[index];
+		if (typeof property === "string") styles[property] = getStyleValue(element, property, computed === true);
+	}
+	return styles;
+}
+function setStyles(element, styles) {
+	setElementValues(element, styles, null, updateStyleProperty);
+}
+function toggleStyles(element, styles) {
+	function toggle(set) {
+		hasSet = set;
+		let next;
+		if (set) {
+			values = getStyles(element, keys);
+			next = styles;
+		} else {
+			next = { ...values };
+			values = {};
+			for (const key of keys) values[key] = void 0;
+		}
+		setStyles(element, next);
+	}
+	const keys = Object.keys(styles);
+	let hasSet = false;
+	let values = {};
+	return {
+		set() {
+			if (!hasSet) toggle(true);
+		},
+		remove() {
+			if (hasSet) toggle(false);
+		}
+	};
+}
+function updateStyleProperty(element, key, value) {
+	updateElementValue(element, key, value, function(property, value$1) {
+		this.style[property] = value$1;
+	}, function(property) {
+		this.style[property] = "";
+	});
+}
+
+function getSupport() {
+	if (window == null || navigator == null) return false;
+	if ("matchMedia" in window) {
+		const media = matchMedia?.("(pointer: coarse)");
+		if (typeof media?.matches === "boolean" && media.matches) return true;
+	}
+	if ("ontouchstart" in window) return true;
+	if (typeof navigator.maxTouchPoints === "number" && navigator.maxTouchPoints > 0) return true;
+	if (typeof navigator.msMaxTouchPoints === "number" && navigator.msMaxTouchPoints > 0) return true;
+	return false;
+}
+var touch_default = (() => {
+	let support = getSupport();
+	const instance = Object.create({
+		get() {
+			return support;
+		},
+		update() {
+			support = getSupport();
+			return support;
+		}
+	});
+	Object.defineProperty(instance, "value", { get() {
+		return support;
+	} });
+	return instance;
+})();
+
+class OuiSplitterElement extends HTMLElement {
+    static observedAttributes = ['max', 'min', 'size', 'type'];
+    #splitter;
+    // Getters and setters
+    get max() {
+        return this.#splitter.values.max;
+    }
+    set max(value) {
+        this.setAttribute('max', String(value));
+    }
+    get min() {
+        return this.#splitter.values.min;
+    }
+    set min(value) {
+        this.setAttribute('min', String(value));
+    }
+    get size() {
+        return this.#splitter.values.now.current;
+    }
+    set size(value) {
+        this.setAttribute('size', String(value));
+    }
+    get type() {
+        return this.getAttribute('type') ?? 'vertical';
+    }
+    set type(value) {
+        this.setAttribute('type', value);
+    }
+    // Constructor
+    constructor() {
+        super();
+        const panels = [...this.children].filter(child => child instanceof HTMLElement);
+        if (panels.length !== 2) {
+            throw new Error(`${SELECTOR$1} must have exactly two panels.`);
+        }
+        this.#splitter = new Splitter(this, panels);
+    }
+    // Methods
+    connectedCallback() {
+        this.#splitter.updateConnections(1);
+    }
+    disconnectedCallback() {
+        this.#splitter.updateConnections(0);
+    }
+    attributeChangedCallback(name) {
+        switch (name) {
+            case 'max':
+            case 'min':
+            case 'size':
+                this.#splitter.updateValues();
+                break;
+            case 'type':
+                this.#splitter.updateOrientation();
+                break;
+        }
+    }
+}
+let index$1 = 0;
+class Splitter {
+    element;
+    handle;
+    panels;
+    rectangle;
+    separator;
+    types;
+    values;
+    constructor(element, panels) {
+        this.element = element;
+        this.panels = panels;
+        if (isNullableOrWhitespace(element.id)) {
+            element.id = `oui_splitter_${++index$1}`;
+        }
+        this.values = getValues(element);
+        this.handle = createHandle();
+        this.rectangle = element.getBoundingClientRect();
+        this.separator = createSeparator(this);
+        this.separator.append(this.handle);
+        panels[0].insertAdjacentElement('afterend', this.separator);
+        this.updateOrientation();
+        this.updateValues();
+    }
+    updateConnections(add) {
+        const method = METHODS_CONNECT[add];
+        MAPPED_ELEMENTS[method](this.element, this);
+        MAPPED_ELEMENTS[method](this.handle, this);
+        MAPPED_ELEMENTS[method](this.separator, this);
+        if (this.types.auto) {
+            RESIZE_OBSERVER[METHODS_OBSERVE[add]](this.element);
+        }
+    }
+    updateOrientation() {
+        this.types = getTypes(this);
+        if (this.types.auto) {
+            RESIZE_OBSERVER.observe(this.element);
+        }
+        else {
+            RESIZE_OBSERVER.unobserve(this.element);
+        }
+        if (this.types.horizontal) {
+            this.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
+        }
+        else {
+            this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+        }
+        setAriaOrientation(this);
+    }
+    updateValues() {
+        this.values = getValues(this.element);
+        requestAnimationFrame(() => {
+            setSize(this, this.values.now.current);
+            setAriaValue(this);
+        });
+    }
+}
+//
+function createHandle() {
+    const handle = document.createElement('span');
+    handle.setAttribute('aria-hidden', 'true');
+    handle.setAttribute(ATTRIBUTE_HANDLE, '');
+    return handle;
+}
+function createSeparator(splitter) {
+    const separator = document.createElement('div');
+    separator.role = 'separator';
+    separator.tabIndex = 0;
+    separator.setAttribute('aria-controls', splitter.element.id);
+    separator.setAttribute('aria-label', 'Resize panels');
+    separator.setAttribute(ATTRIBUTE_SEPARATOR, '');
+    return separator;
+}
+function getContained(min, value, max) {
+    return round(clamp(value, min, max), VALUE_DECIMALS);
+}
+function getSize(splitter, value) {
+    const { height, left, top, width } = splitter.rectangle;
+    const offset = value - (splitter.types.horizontal ? top : left);
+    const fraction = offset / (splitter.types.horizontal ? height : width);
+    return getContained(splitter.values.min, fraction, splitter.values.max);
+}
+function getTypes(splitter, width, height) {
+    const type = splitter.element.getAttribute('type')?.trim() ?? '';
+    if (type === 'horizontal') {
+        return {
+            auto: false,
+            horizontal: true,
+        };
+    }
+    if (type === 'auto') {
+        return {
+            auto: true,
+            horizontal: (height ?? splitter.rectangle.height) >
+                (width ?? splitter.rectangle.width),
+        };
+    }
+    return {
+        auto: false,
+        horizontal: false,
+    };
+}
+function getValue(element, name, defaultValue) {
+    const value = element.getAttribute(name);
+    if (isNullableOrWhitespace(value)) {
+        return defaultValue;
+    }
+    const parsed = Number.parseFloat(value);
+    if (Number.isNaN(parsed)) {
+        return defaultValue;
+    }
+    if (parsed < 0) {
+        return defaultValue;
+    }
+    return parsed > 1 ? parsed / NAVIGATION_MAXIMUM_TOTAL : parsed;
+}
+function getValues(element) {
+    const values = {
+        max: getValue(element, 'max', NAVIGATION_MAXIMUM_PERCENTAGE),
+        min: getValue(element, 'min', NAVIGATION_MINIMUM_PERCENTAGE),
+        now: {
+            current: 0.5,
+            previous: 0.5,
+        },
+    };
+    const value = getContained(values.min, getValue(element, 'size', values.now.current), values.max);
+    values.now.current = value;
+    values.now.previous = value;
+    return values;
+}
+function onEnd(reset) {
+    if (splitter == null) {
+        return;
+    }
+    splitter.handle.removeAttribute(ATTRIBUTE_ACTIVE);
+    splitter.separator.removeAttribute(ATTRIBUTE_ACTIVE);
+    if (reset) {
+        setSize(splitter, splitter.values.now.previous);
+    }
+    else {
+        splitter.values.now.previous = splitter.values.now.current;
+    }
+    splitter = undefined;
+    STYLING_TOGGLER.remove();
+}
+function onKeydown(event) {
+    switch (true) {
+        case KEYS_ALL.has(event.key):
+            onNavigate(event);
+            break;
+        case event.key === 'Escape':
+            onEnd(true);
+            break;
+    }
+}
+function onNavigate(event) {
+    const splitter = MAPPED_ELEMENTS.get(findAncestor(event.target, '[oui-splitter-separator]'));
+    if (splitter == null) {
+        return;
+    }
+    const { types, values } = splitter;
+    if (KEYS_ABSOLUTE.has(event.key)) {
+        setSize(splitter, event.key === 'End' ? values.max : values.min, true);
+        return;
+    }
+    if ((types.horizontal && !KEYS_HORIZONTAL.has(event.key)) ||
+        !(types.horizontal || KEYS_VERTICAL.has(event.key))) {
+        return;
+    }
+    const offset = KEYS_NEGATIVE.has(event.key) ? -1 : 1;
+    setSize(splitter, getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max), true);
+}
+function onObservation(entries) {
+    if (frame != null) {
+        cancelAnimationFrame(frame);
+    }
+    frame = requestAnimationFrame(() => {
+        for (const entry of entries) {
+            const splitter = MAPPED_ELEMENTS.get(entry.target);
+            if (splitter == null) {
+                return;
+            }
+            splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
+            if (splitter.types.horizontal) {
+                splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
+            }
+            else {
+                splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
+            }
+            setAriaOrientation(splitter);
+        }
+        frame = undefined;
+    });
+}
+function onPointerdown(event) {
+    if ((event.type === 'mousedown' && touch_default.value) ||
+        (event.type === 'touchstart' && !touch_default.value)) {
+        return;
+    }
+    splitter = MAPPED_ELEMENTS.get(findAncestor(event.target, SELECTOR_HANDLE));
+    if (splitter == null) {
+        return;
+    }
+    if (touch_default.value) {
+        event.preventDefault();
+    }
+    splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, '');
+    splitter.separator.setAttribute(ATTRIBUTE_ACTIVE, '');
+    splitter.rectangle = splitter.element.getBoundingClientRect();
+    STYLING_TOGGLER.set();
+}
+function onPointermove(event) {
+    if (splitter == null) {
+        return;
+    }
+    const position = getPosition(event);
+    if (position != null) {
+        splitter.values.now.current = getSize(splitter, splitter.types.horizontal ? position.y : position.x);
+        setSize(splitter, splitter.values.now.current);
+    }
+}
+function onPointerup() {
+    if (splitter != null) {
+        onEnd(false);
+    }
+}
+function setAriaOrientation(splitter) {
+    splitter.separator.setAttribute('aria-orientation', splitter.types.horizontal ? 'horizontal' : 'vertical');
+}
+function setAriaValue(splitter) {
+    splitter.separator.setAttribute('aria-valuemax', String(splitter.values.max));
+    splitter.separator.setAttribute('aria-valuemin', String(splitter.values.min));
+    splitter.separator.setAttribute('aria-valuenow', String(splitter.values.now.current));
+}
+function setSize(splitter, size, previous) {
+    splitter.values.now.current = size;
+    if (previous) {
+        splitter.values.now.previous = size;
+    }
+    splitter.element.style.setProperty('--oui-splitter-size', `${size}`);
+    setAriaValue(splitter);
+}
+//
+const SELECTOR$1 = 'oui-splitter';
+const ATTRIBUTE_ACTIVE = `${SELECTOR$1}-active`;
+const ATTRIBUTE_HANDLE = `${SELECTOR$1}-handle`;
+const ATTRIBUTE_HORIZONTAL = `${SELECTOR$1}-horizontal`;
+const ATTRIBUTE_SEPARATOR = `${SELECTOR$1}-separator`;
+const KEYS_ABSOLUTE = new Set(['End', 'Home']);
+const KEYS_HORIZONTAL = new Set(['ArrowDown', 'ArrowUp']);
+const KEYS_NEGATIVE = new Set(['ArrowLeft', 'ArrowUp']);
+const KEYS_VERTICAL = new Set(['ArrowLeft', 'ArrowRight']);
+const KEYS_ALL = new Set([
+    ...KEYS_ABSOLUTE,
+    ...KEYS_HORIZONTAL,
+    ...KEYS_VERTICAL,
+]);
+const MAPPED_ELEMENTS = new WeakMap();
+const METHODS_CONNECT = ['delete', 'set'];
+const METHODS_OBSERVE = ['unobserve', 'observe'];
+const NAVIGATION_MAXIMUM_PERCENTAGE = 0.9;
+const NAVIGATION_MAXIMUM_TOTAL = 100;
+const NAVIGATION_MINIMUM_PERCENTAGE = 0.1;
+const NAVIGATION_MODIFIER = 0.05;
+const RESIZE_OBSERVER = new ResizeObserver(onObservation);
+const SELECTOR_HANDLE = `[${ATTRIBUTE_HANDLE}]`;
+const STYLING_TOGGLER = toggleStyles(document.body, {
+    touchAction: 'none',
+    userSelect: 'none',
+    webkitUserSelect: 'none',
+});
+const VALUE_DECIMALS = 6;
+let frame;
+let splitter;
+//
+customElements.define(SELECTOR$1, OuiSplitterElement);
+on(document, 'keydown', onKeydown);
+on(document, 'mousedown', onPointerdown);
+on(document, 'pointermove', onPointermove);
+on(document, 'pointerup', onPointerup);
+on(document, 'touchcancel', onPointerup, { passive: false });
+on(document, 'touchstart', onPointerdown, { passive: false });
+
+class Tooltip {
+    attributes;
+    floatable;
+    timer;
+    constructor(anchor, content) {
+        this.attributes = content.attributes;
+        this.floatable = new Floatable({
+            anchor,
+            content: content.element,
+            defaultPosition: 'vertical',
+            interactive: false,
+            preferAbove: true,
+            positionAttribute: ATTRIBUTE_POSITION,
+        });
+        anchor.insertAdjacentElement('afterend', content.element);
+        TOOLTIPS_ALL.set(content.element, this);
+    }
+    destroy() {
+        const { attributes, floatable } = this;
+        TOOLTIPS_ACTIVE.delete(this);
+        TOOLTIPS_ALL.delete(floatable.options.anchor);
+        TOOLTIPS_ALL.delete(floatable.options.content);
+        reset(floatable.options.anchor, attributes);
+        floatable.options.content.remove();
+        floatable.destroy();
+        this.attributes = undefined;
+        this.floatable = undefined;
+    }
+}
+function addTooltip(anchor) {
+    if (TOOLTIPS_ALL.has(anchor)) {
+        return;
+    }
+    const content = getContent(anchor);
+    if (content != null) {
+        TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, content));
+    }
+}
+function closeTooltips(next) {
+    const tooltips = [...TOOLTIPS_ACTIVE];
+    for (const active of tooltips) {
+        if (active === next) {
+            continue;
+        }
+        if (active.timer != null) {
+            clearTimeout(active.timer);
+        }
+        active.floatable.options.content.removeAttribute('oui-tooltip-content-active');
+        requestAnimationFrame(() => {
+            active.timer = setTimeout(() => {
+                TOOLTIPS_ACTIVE.delete(active);
+                active.floatable.toggle(false);
+            }, delay);
+        });
+    }
+}
+function getContent(anchor) {
+    const attributes = {
+        ariaDescribedby: anchor.getAttribute('aria-describedby'),
+        ariaLabelledBy: anchor.getAttribute('aria-labelledby'),
+    };
+    const wrapper = getWrapper(anchor);
+    const labelledElements = getElements(attributes.ariaLabelledBy);
+    if (labelledElements.length > 0) {
+        anchor.setAttribute('aria-labelledby', wrapper.id);
+        for (const element of labelledElements) {
+            wrapper.append(element);
+        }
+        return {
+            attributes,
+            element: wrapper,
+        };
+    }
+    const describedElements = getElements(attributes.ariaDescribedby);
+    if (describedElements.length > 0) {
+        anchor.setAttribute('aria-describedby', wrapper.id);
+        for (const element of describedElements) {
+            wrapper.append(element);
+        }
+        return {
+            attributes,
+            element: wrapper,
+        };
+    }
+    let content = anchor.getAttribute('aria-label');
+    if (isNullableOrWhitespace(content)) {
+        content = anchor.getAttribute('aria-description');
+    }
+    if (isNullableOrWhitespace(content)) {
+        return;
+    }
+    const paragraph = document.createElement('p');
+    paragraph.textContent = content;
+    wrapper.append(paragraph);
+    return {
+        attributes,
+        element: wrapper,
+    };
+}
+function getElements(attribute) {
+    const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
+    const elements = [];
+    for (const id of ids) {
+        if (isNullableOrWhitespace(id)) {
+            continue;
+        }
+        const element = document.querySelector(`#${id}`);
+        if (element instanceof HTMLElement) {
+            const cloned = element.cloneNode(true);
+            cloned.hidden = false;
+            elements.push(cloned);
+        }
+    }
+    return elements;
+}
+function getWrapper(anchor) {
+    const wrapper = document.createElement('div');
+    wrapper.setAttribute(ATTRIBUTE_CONTENT, '');
+    wrapper.className = anchor.getAttribute(ATTRIBUTE_CLASS) ?? '';
+    wrapper.hidden = true;
+    wrapper.id = `${SELECTOR}-${++index}`;
+    wrapper.role = 'tooltip';
+    wrapper.tabIndex = -1;
+    return wrapper;
+}
+function onActivate(event) {
+    onToggle(event, true);
+}
+function onClick(event) {
+    if (findAncestor(event.target, SELECTOR_CONTENT) != null) {
+        event.stopPropagation();
+    }
+}
+function onDeactivate(event) {
+    onToggle(event, false);
+}
+function onToggle(event, activate) {
+    if (toggle != null) {
+        cancelAnimationFrame(toggle);
+    }
+    toggle = requestAnimationFrame(() => {
+        toggle = undefined;
+        const element = findAncestor(event.target, SELECTOR_FULL);
+        const tooltip = TOOLTIPS_ALL.get(element);
+        if (TOOLTIPS_ACTIVE.size > 0) {
+            closeTooltips(tooltip);
+        }
+        if (tooltip == null ||
+            tooltip.floatable.options.content.hasAttribute('oui-tooltip-content-active') === activate) {
+            return;
+        }
+        if (activate) {
+            if (tooltip.timer != null) {
+                clearTimeout(tooltip.timer);
+            }
+            TOOLTIPS_ACTIVE.add(tooltip);
+            tooltip.floatable.toggle(true);
+            requestAnimationFrame(() => {
+                tooltip.floatable.options.content.setAttribute('oui-tooltip-content-active', '');
+            });
+            return;
+        }
+        tooltip.floatable.options.content.removeAttribute('oui-tooltip-content-active');
+        tooltip.timer ??= setTimeout(() => {
+            TOOLTIPS_ACTIVE.delete(tooltip);
+            tooltip.floatable.toggle(false);
+        }, delay);
+    });
+}
+function removeTooltip(element) {
+    if (!element.hasAttribute(ATTRIBUTE_CONTENT)) {
+        TOOLTIPS_ALL.get(element)?.destroy();
+    }
+}
+function reset(anchor, attributes) {
+    if (attributes.ariaDescribedby == null) {
+        anchor.removeAttribute('aria-describedby');
+    }
+    else {
+        anchor.setAttribute('aria-describedby', attributes.ariaDescribedby);
+    }
+}
+function setDelay(value) {
+    delay = typeof value === 'number' && value >= 0 ? value : delay;
+}
+//
+const SELECTOR = 'oui-tooltip';
+const ATTRIBUTE_CLASS = `${SELECTOR}-class`;
+const ATTRIBUTE_CONTENT = `${SELECTOR}-content`;
+const ATTRIBUTE_POSITION = `${SELECTOR}-position`;
+const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const SELECTOR_FULL = `[${SELECTOR}], [${ATTRIBUTE_CONTENT}]`;
+const EXPRESSION_WHITESPACE = /\s+/;
+const TOOLTIPS_ACTIVE = new Set();
+const TOOLTIPS_ALL = new WeakMap();
+let delay = 250;
+let index = 0;
+let toggle;
+//
+attributable(SELECTOR, addTooltip, removeTooltip);
+on(document, 'click', onClick, { capture: true });
+on(document, 'focusin', onActivate);
+on(document, 'focusout', onDeactivate);
+on(document, 'mousemove', onActivate);
+on(document, 'touchstart', onActivate);
+
+export { OuiPopoverElement, OuiSplitterElement, setDelay };