@oscarpalmer/oui 0.24.0 → 0.26.0

package/dist/js/popover.mjs

@@ -1,64 +1,103 @@
-import { createFloatable, removeFloatable } from "./floatable.mjs";
+import { createEmbeddedFloatable, getOnBeforeToggleListener } from "./floatable/embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
-import { createFocusTrap, removeFocusTrap } from "./focus-trap/embedded.mjs";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { createFocusTrap } from "./focus-trap/embedded.mjs";
 import { on } from "@oscarpalmer/toretto/event";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/popover.ts
-var Popover = class {
-	element;
-	anchor;
-	floatable;
-	focusTrap;
-	listener;
-	constructor(element) {
-		this.element = element;
-		const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
-		if (!isHTMLOrSVGElement(anchor)) throw new Error(`No anchor found for popover with id '${element.id}'.`);
-		if (element.contains(anchor)) throw new Error("Popover content cannot contain its anchor.");
-		this.anchor = anchor;
-		this.floatable = createFloatable(this.anchor, element, options, false);
-		this.focusTrap = createFocusTrap(element, { noescape: true });
-		this.listener = on(element, EVENT_TOGGLE, (event) => {
-			if (event.newState === STATE_OPEN) {
-				ignoreFocus = false;
-				this.floatable?.update();
-				element.focus();
-			} else if (!ignoreFocus) this.anchor?.focus();
-		});
-		this.element.setAttribute(ATTRIBUTE_CONTENT, "");
-		this.floatable?.update();
+var OuiPopover = class {
+	#state;
+	/**
+	* Is the popover open?
+	*/
+	get open() {
+		return this.#state.content.checkVisibility();
+	}
+	constructor(state) {
+		this.#state = state;
+		this.#state.floatable.update();
+	}
+	/**
+	* Closes the popover
+	*/
+	hide() {
+		this.#state.floatable.hide();
 	}
-	destroy() {
-		this.focusTrap?.destroy();
-		removeFloatable(this.element);
-		removeFocusTrap(this.element);
-		this.element.removeAttribute(ATTRIBUTE_CONTENT);
-		this.anchor = null;
-		this.element = null;
+	/**
+	* Opens the popover
+	*/
+	show() {
+		this.#state.floatable.show();
 	}
 };
-function onAdd(element) {
-	if (!instances.has(element) && element.getAttribute(ATTRIBUTE) !== POPOVER_HINT && !element.hasAttribute("oui-floatable")) instances.set(element, new Popover(element));
+function addPopover(element) {
+	if (states.has(element) || element.hasAttribute("oui-floatable")) return;
+	const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+	if (isHTMLOrSVGElement(anchor)) states.set(element, getState(anchor, element));
+}
+function destroyPopover(state) {
+	state.floatable.destroy();
+	state.focusTrap?.destroy();
+	for (const listener of state.listeners) listener();
+	state.anchor = void 0;
+	state.content = void 0;
+	state.floatable = void 0;
+	state.focusTrap = void 0;
+	state.listeners = void 0;
+	state.popover = void 0;
+}
+/**
+* Get the _OuiPopover_ for an element
+*
+* @param element Element to get _OuiPopover_ for
+* @returns _OuiPopover_ instance
+*/
+function getPopover(element) {
+	return states.get(element)?.popover;
+}
+function getState(anchor, content) {
+	const state = {
+		anchor,
+		content,
+		floatable: createEmbeddedFloatable(anchor, content, options),
+		focusTrap: content.getAttribute(ARIA_MODAL) === TRUE ? createFocusTrap(content, { noescape: true }) : void 0,
+		listeners: [getOnBeforeToggleListener(content), on(content, EVENT_TOGGLE, (event) => {
+			if (event.newState === STATE_OPEN) {
+				ignoreFocus = false;
+				state.floatable?.update();
+				content.setAttribute(ATTRIBUTE_OPEN, "");
+				content.focus();
+			} else {
+				content.removeAttribute(ATTRIBUTE_OPEN);
+				if (!ignoreFocus) anchor?.focus();
+			}
+		})],
+		popover: void 0
+	};
+	state.popover = new OuiPopover(state);
+	return state;
 }
 function onPointerdown() {
 	ignoreFocus = true;
 }
-function onRemove(element) {
-	instances.get(element)?.destroy();
-	instances.delete(element);
+function removePopover(element) {
+	const state = states.get(element);
+	if (state == null) return;
+	destroyPopover(state);
+	states.delete(element);
 }
-const ATTRIBUTE = "popover";
-const ATTRIBUTE_CONTENT = "oui-popover-content";
+const ATTRIBUTE = "oui-popover";
+const ARIA_MODAL = "aria-modal";
+const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
 const EVENT_TOGGLE = "toggle";
-const POPOVER_HINT = "hint";
 const STATE_OPEN = "open";
-const instances = /* @__PURE__ */ new WeakMap();
+const TRUE = "true";
 const options = {
 	attribute: `${ATTRIBUTE}position`,
 	position: "below-start"
 };
+const states = /* @__PURE__ */ new WeakMap();
 let ignoreFocus = false;
 on(document, "pointerdown", onPointerdown, { capture: true });
-attributable(ATTRIBUTE, onAdd, onRemove);
+attributable(ATTRIBUTE, addPopover, removePopover);
 //#endregion
-export {};
+export { getPopover };

package/dist/js/sortable.d.mts

@@ -1,2 +1,2 @@
-import { c as Sortable } from "./movable-BKFgoaOl.mjs";
-export { Sortable };
+import { c as OuiSortable } from "./movable-dNqBctx3.mjs";
+export { OuiSortable };

package/dist/js/sortable.mjs

@@ -1,11 +1,11 @@
 import { attributable } from "./internal/attributable.mjs";
-import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { OuiDraggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
 import { getPosition } from "@oscarpalmer/toretto/event";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/sortable.ts
-var Sortable = class extends Draggable {
+var OuiSortable = class extends OuiDraggable {
 	connections;
 	origin;
 	get dragged() {
@@ -230,7 +230,7 @@ const INSERT_BEFORE = "beforebegin";
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_ITEM = `[${ATTRIBUTE}] > *`;
 const bound = {
-	constructor: Sortable,
+	constructor: OuiSortable,
 	property: "sortable"
 };
 const placeholder = {
@@ -242,4 +242,4 @@ const placeholder = {
 };
 attributable(ATTRIBUTE, addDraggable.bind(bound), removeDraggable.bind(bound));
 //#endregion
-export { Sortable };
+export { OuiSortable };

package/dist/js/splitter.mjs

@@ -1,6 +1,6 @@
+import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { clamp } from "@oscarpalmer/atoms/number";
-import { getPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
@@ -10,6 +10,50 @@ const ATTRIBUTE_MAX = "max";
 const ATTRIBUTE_MIN = "min";
 const ATTRIBUTE_SIZE = "size";
 const ATTRIBUTE_TYPE = "type";
+var OuiSplitter = class {
+	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}`;
+		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);
+		});
+	}
+};
 var OuiSplitterElement = class extends HTMLElement {
 	static observedAttributes = [
 		ATTRIBUTE_MAX,
@@ -45,8 +89,8 @@ var OuiSplitterElement = class extends HTMLElement {
 	constructor() {
 		super();
 		const panels = [...this.children].filter((child) => child instanceof HTMLElement);
-		if (panels.length !== 2) throw new Error(`${SELECTOR} must have exactly two panels.`);
-		this.#splitter = new Splitter(this, panels);
+		if (panels.length !== 2) throw new Error(MESSAGE);
+		this.#splitter = new OuiSplitter(this, panels);
 	}
 	connectedCallback() {
 		this.#splitter.updateConnections(1);
@@ -68,51 +112,6 @@ var OuiSplitterElement = class extends HTMLElement {
 		}
 	}
 };
-let index = 0;
-var Splitter = class {
-	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}`;
-		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");
@@ -269,6 +268,7 @@ const KEYS_ALL = new Set([
 	...KEYS_VERTICAL
 ]);
 const MAPPED_ELEMENTS = /* @__PURE__ */ new WeakMap();
+const MESSAGE = `<${SELECTOR}> must have exactly two panels.`;
 const METHODS_CONNECT = ["delete", "set"];
 const METHODS_OBSERVE = ["unobserve", "observe"];
 const NAVIGATION_MAXIMUM_PERCENTAGE = .9;
@@ -283,6 +283,7 @@ const STYLING_TOGGLER = toggleStyles(document.body, {
 	webkitUserSelect: "none"
 });
 const VALUE_DECIMALS = 6;
+let index = 0;
 let frame;
 let splitter;
 customElements.define(SELECTOR, OuiSplitterElement);

package/dist/js/toolbar.d.mts

@@ -0,0 +1 @@
+export { };

package/dist/js/toolbar.mjs

@@ -0,0 +1,107 @@
+import { attributable } from "./internal/attributable.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+//#region src/js/toolbar.ts
+var OuiToolbar = class {
+	#state;
+	constructor(state) {
+		this.#state = state;
+		updateFocus(this.#state, false);
+	}
+	destroy() {
+		for (const listener of this.#state.listeners) listener();
+		this.#state.active = void 0;
+		this.#state.element = void 0;
+		this.#state.listeners = void 0;
+	}
+};
+function addToolbar(element) {
+	if (!instances.has(element)) instances.set(element, new OuiToolbar(getState(element)));
+}
+function getItems(element) {
+	return [...element.querySelectorAll(SELECTOR)].filter(isValidItem);
+}
+function getOrientation(element) {
+	const attribute = element.getAttribute(ARIA_ORIENTATION);
+	return ORIENTATIONS.has(attribute) ? attribute : ORIENTATION_HORIZONTAL;
+}
+function getState(element) {
+	const state = {
+		element,
+		active: { index: 0 },
+		listeners: [on(element, EVENT_FOCUSIN, (event) => {
+			onFocusin(state, event);
+		}), on(element, EVENT_KEYDOWN, (event) => {
+			onKeydown(state, event);
+		}, { passive: false })],
+		orientation: getOrientation(element)
+	};
+	return state;
+}
+function isValidItem(element) {
+	return PROPERTY_DISABLED in element ? element.disabled !== true : true;
+}
+function onKeydown(state, event) {
+	if (!KEYS_ALL.has(event.key)) return;
+	const items = getItems(state.element);
+	if (items.length === 0) return;
+	let index;
+	if (KEYS_ABSOLUTE.has(event.key)) index = event.key === KEY_HOME ? 0 : items.length - 1;
+	else if (state.orientation === ORIENTATION_HORIZONTAL ? KEYS_HORIZONTAL.has(event.key) : KEYS_VERTICAL.has(event.key)) {
+		if (state.active.element instanceof HTMLSelectElement) event.preventDefault();
+		index = clamp(state.active.index + (KEYS_NEXT.has(event.key) ? 1 : -1), 0, items.length - 1, true);
+	}
+	if (index == null || index === state.active.index) return;
+	state.active.element = items[index];
+	state.active.index = index;
+	updateFocus(state, true, items);
+}
+function onFocusin(state, event) {
+	const item = findAncestor(event, SELECTOR);
+	if (!isHTMLOrSVGElement(item) || !isValidItem(item)) return;
+	const items = getItems(state.element);
+	const index = items.indexOf(item);
+	if (index === -1) return;
+	state.active.element = item;
+	state.active.index = index;
+	updateFocus(state, false, items);
+}
+function removeToolbar(element) {
+	instances.get(element)?.destroy();
+	instances.delete(element);
+}
+function updateFocus(state, focus, items) {
+	const updated = items ?? getItems(state.element);
+	const { length } = updated;
+	if (length === 0) return;
+	for (let index = 0; index < length; index += 1) updated[index].tabIndex = index === state.active.index ? 0 : -1;
+	state.active.element ??= updated[state.active.index];
+	if (focus) state.active.element?.focus();
+}
+const ARIA_ORIENTATION = "aria-orientation";
+const ATTRIBUTE = "oui-toolbar";
+const EVENT_KEYDOWN = "keydown";
+const EVENT_FOCUSIN = "focusin";
+const KEY_ARROW_DOWN = "ArrowDown";
+const KEY_ARROW_RIGHT = "ArrowRight";
+const KEY_END = "End";
+const KEY_HOME = "Home";
+const KEYS_ABSOLUTE = new Set([KEY_END, KEY_HOME]);
+const KEYS_HORIZONTAL = new Set([KEY_ARROW_RIGHT, "ArrowLeft"]);
+const KEYS_VERTICAL = new Set([KEY_ARROW_DOWN, "ArrowUp"]);
+const KEYS_ALL = new Set([
+	...KEYS_ABSOLUTE,
+	...KEYS_HORIZONTAL,
+	...KEYS_VERTICAL
+]);
+const KEYS_NEXT = new Set([KEY_ARROW_DOWN, KEY_ARROW_RIGHT]);
+const ORIENTATION_HORIZONTAL = "horizontal";
+const ORIENTATIONS = new Set([ORIENTATION_HORIZONTAL, "vertical"]);
+const PROPERTY_DISABLED = "disabled";
+const SELECTOR = `[${ATTRIBUTE}-item]`;
+const instances = /* @__PURE__ */ new WeakMap();
+attributable(ATTRIBUTE, addToolbar, removeToolbar);
+//#endregion
+export {};

package/dist/js/tooltip.d.mts

@@ -1,4 +1,30 @@
+import { n as OuiFloatable } from "./embedded-ai6cqURc.mjs";
+
 //#region src/js/tooltip.d.ts
+declare class OuiTooltip {
+  #private;
+  /**
+   * Is the tooltip open?
+   */
+  get open(): boolean;
+  constructor(state: OuiTooltipState);
+  /**
+   * Closes the tooltip
+   */
+  hide(): void;
+  /**
+   * Opens the tooltip
+   */
+  show(): void;
+}
+type OuiTooltipState = {
+  anchor: HTMLElement;
+  content: HTMLElement;
+  floatable: OuiFloatable;
+  timer?: number;
+  tooltip: OuiTooltip;
+};
+declare function getTooltip(element: HTMLElement): OuiTooltip | undefined;
 /**
  * Set the delay before showing the tooltip, in milliseconds
  *
@@ -7,4 +33,4 @@
  */
 declare function setTooltipDelay(value: number): void;
 //#endregion
-export { setTooltipDelay };
+export { type OuiTooltip, getTooltip, setTooltipDelay };

package/dist/js/tooltip.mjs

@@ -1,28 +1,34 @@
-import { Floatable } from "./floatable.mjs";
+import { createEmbeddedFloatable } from "./floatable/embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
+import { on } from "@oscarpalmer/toretto/event";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/tooltip.ts
-var Tooltip = class {
-	anchor;
-	content;
-	floatable;
-	timer;
-	constructor(anchor, content) {
-		this.anchor = anchor;
-		this.content = content;
-		instances.set(content, this);
-		anchor.insertAdjacentElement("afterend", content);
-		this.floatable = new Floatable(anchor, content, options, false);
-		this.floatable.update();
+var OuiTooltip = class {
+	#state;
+	/**
+	* Is the tooltip open?
+	*/
+	get open() {
+		return this.#state.content.checkVisibility();
+	}
+	constructor(state) {
+		this.#state = state;
+		state.floatable.update();
+	}
+	/**
+	* Closes the tooltip
+	*/
+	hide() {
+		this.#state.floatable.hide();
 	}
-	destroy() {
-		instances.delete(this.content);
-		this.anchor = null;
-		this.content = null;
+	/**
+	* Opens the tooltip
+	*/
+	show() {
+		this.#state.floatable.show();
 	}
 };
 function activate(event, focus) {
@@ -30,34 +36,50 @@ function activate(event, focus) {
 	const content = findAncestor(event, SELECTOR_CONTENT);
 	if (anchor == null && content == null) {
 		if (!focused) {
-			closeTooltip(active);
-			active = void 0;
+			closeTooltip(activeState);
+			activeState = void 0;
+			activeTooltip = void 0;
 		}
 		return;
 	}
-	const instance = instances.get(anchor ?? content);
-	if (instance == null || instance === active) return;
-	const shouldDelay = active == null;
-	closeTooltip(active);
-	active = instance;
+	const state = states.get(anchor ?? content);
+	if (state == null || state.tooltip === activeTooltip) return;
+	const shouldDelay = activeTooltip == null;
+	closeTooltip(activeState);
+	activeState = state;
+	activeTooltip = state.tooltip;
 	focused = focus;
-	instance.timer = setTimeout(() => {
-		instance.content.showPopover({ source: instance.anchor });
+	state.timer = setTimeout(() => {
+		state.content.showPopover({ source: state.anchor });
 		setTimeout(() => {
-			instance.floatable.update();
-			instance.content.setAttribute(ATTRIBUTE_CONTENT_ACTIVE, "");
+			state.floatable.update();
+			state.content.setAttribute(ATTRIBUTE_CONTENT_OPEN, "");
 		});
 	}, shouldDelay ? delay : 0);
 }
-function closeTooltip(instance) {
-	if (instance == null) return;
-	if (instance.timer != null) clearTimeout(instance.timer);
-	instance.content?.hidePopover();
-	instance.content?.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+function addTooltip(element) {
+	if (!states.has(element)) createTooltip(element);
+}
+function closeTooltip(state) {
+	if (state == null) return;
+	if (state.timer != null) clearTimeout(state.timer);
+	state.content?.hidePopover();
+	state.content?.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
 }
 function createTooltip(anchor) {
 	const content = getContent(anchor);
-	if (content != null) instances.set(anchor, new Tooltip(anchor, content));
+	if (content == null) return;
+	anchor.insertAdjacentElement("afterend", content);
+	states.set(anchor, getState(anchor, content));
+}
+function destroyTooltip(state) {
+	clearTimeout(state.timer);
+	state.content.remove();
+	state.floatable.destroy();
+	state.anchor = void 0;
+	state.content = void 0;
+	state.floatable = void 0;
+	state.tooltip = void 0;
 }
 function findElements(attribute) {
 	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
@@ -97,27 +119,40 @@ function getElements(anchor) {
 	paragraph.textContent = content;
 	return [paragraph];
 }
-function onAdd(element) {
-	if (!instances.has(element)) createTooltip(element);
+function getState(anchor, content) {
+	const state = {
+		anchor,
+		content,
+		floatable: createEmbeddedFloatable(anchor, content, options),
+		tooltip: null
+	};
+	state.tooltip = new OuiTooltip(state);
+	return state;
+}
+function getTooltip(element) {
+	return states.get(element)?.tooltip;
 }
 function onFocusin(event) {
 	activate(event, true);
 }
 function onFocusout() {
-	if (active == null) return;
+	if (activeTooltip == null) return;
 	if (focusTimer != null) clearTimeout(focusTimer);
 	focusTimer = setTimeout(() => {
-		if (active == null || document.activeElement == null || findAncestor(document.activeElement, SELECTOR) != null) return;
-		closeTooltip(active);
-		active = void 0;
+		if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, SELECTOR) != null) return;
+		closeTooltip(activeState);
+		activeState = void 0;
+		activeTooltip = void 0;
 	});
 }
 function onPointermove(event) {
 	activate(event, false);
 }
-function onRemove(element) {
-	instances.get(element)?.destroy();
-	instances.delete(element);
+function removeTooltip(element) {
+	const state = states.get(element);
+	if (state == null) return;
+	destroyTooltip(state);
+	states.delete(element);
 }
 /**
 * Set the delay before showing the tooltip, in milliseconds
@@ -136,21 +171,22 @@ const CONTENT_TAGNAME = "div";
 const EXPRESSION_WHITESPACE = /\s+/;
 const ATTRIBUTE = "oui-tooltip";
 const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
-const ATTRIBUTE_CONTENT_ACTIVE = `${ATTRIBUTE_CONTENT}-active`;
+const ATTRIBUTE_CONTENT_OPEN = `${ATTRIBUTE_CONTENT}-open`;
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
-const instances = /* @__PURE__ */ new WeakMap();
+const states = /* @__PURE__ */ new WeakMap();
 const options = {
 	attribute: `${ATTRIBUTE}-position`,
 	position: "above"
 };
 let delay = 500;
 let focused = false;
-let active;
+let activeState;
+let activeTooltip;
 let focusTimer;
 on(document, "focusin", onFocusin);
 on(document, "focusout", onFocusout);
 on(document, "pointermove", onPointermove);
-attributable(ATTRIBUTE, onAdd, onRemove);
+attributable(ATTRIBUTE, addTooltip, removeTooltip);
 //#endregion
-export { setTooltipDelay };
+export { getTooltip, setTooltipDelay };