@oscarpalmer/oui 0.17.0 → 0.18.0

package/dist/js/popover.full.js

@@ -0,0 +1,822 @@
+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 !== "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);
+}
+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)];
+	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 = [
+	"[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;
+
+function isEventTarget(value) {
+	return typeof value === "object" && value != null && typeof value.addEventListener === "function" && typeof value.removeEventListener === "function" && typeof value.dispatchEvent === "function";
+}
+
+function getBoolean(value, defaultValue) {
+	return typeof value === "boolean" ? value : defaultValue ?? false;
+}
+
+function clamp(value, minimum, maximum, loop) {
+	if (![
+		value,
+		minimum,
+		maximum
+	].every(isNumber)) return NaN;
+	if (value < minimum) return maximum ;
+	return value > maximum ? minimum  : value;
+}
+
+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 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;
+}
+
+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, '');
+    }
+    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) {
+        void floatable.toggle(false);
+    }
+}
+function stop(floatable) {
+    if (floatable.frame != null) {
+        cancelAnimationFrame(floatable.frame);
+    }
+    floatable.frame = undefined;
+}
+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);
+    }
+    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 = '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: new Set(),
+            mapped: new Map(),
+            order: [],
+        },
+        writable: false,
+    });
+    on(document, 'keydown', event => {
+        onKeyDown(event);
+    });
+    on(document, 'click', event => {
+        onClick(event);
+    });
+}
+
+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(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 = 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);
+    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, EVENT_OPTIONS);
+on(document, 'mousedown', onPointerdown, EVENT_OPTIONS);
+on(document, 'touchstart', onPointerdown, EVENT_OPTIONS);
+
+let index = 0;
+class OuiPopoverElement extends HTMLElement {
+    #floatable;
+    #focusTrap;
+    constructor() {
+        super();
+        const content = this.querySelector(SELECTOR_CONTENT);
+        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}`);
+        }
+        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 = 'oui-popover';
+const SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
+const SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
+//
+customElements.define(SELECTOR, OuiPopoverElement);
+
+export { OuiPopoverElement };