@oscarpalmer/oui 0.38.0 → 0.40.0

package/dist/js/splitter.model-DOLNjLVS.d.mts

@@ -0,0 +1,57 @@
+import { StyleToggler } from "@oscarpalmer/toretto/style";
+//#region src/js/splitter/splitter.model.d.ts
+type GenericOuiSplitterElement = {
+  [SPLITTER_SYMBOL]: OuiSplitter;
+} & HTMLElement;
+type OuiSplitter = {
+  element: GenericOuiSplitterElement;
+  handle: HTMLSpanElement;
+  panels: HTMLElement[];
+  rectangle: DOMRect;
+  separator: HTMLDivElement;
+  types: OuiSplitterTypes;
+  values: OuiSplitterValues;
+  updateObserver(add: 0 | 1): void;
+  updateOrientation(): void;
+  updateValues(): void;
+};
+type OuiSplitterTypes = {
+  auto: boolean;
+  horizontal: boolean;
+};
+type OuiSplitterValues = {
+  max: number;
+  min: number;
+  now: OuiSplitterValuesNow;
+};
+type OuiSplitterValuesNow = {
+  current: number;
+  previous: number;
+};
+declare const SPLITTER_TAGNAME = "oui-splitter";
+declare const SPLITTER_ATTRIBUTE_ACTIVE: string;
+declare const SPLITTER_ATTRIBUTE_HANDLE: string;
+declare const SPLITTER_ATTRIBUTE_HORIZONTAL: string;
+declare const SPLITTER_ATTRIBUTE_MAX = "max";
+declare const SPLITTER_ATTRIBUTE_MIN = "min";
+declare const SPLITTER_ATTRIBUTE_SIZE = "size";
+declare const SPLITTER_ATTRIBUTE_TYPE = "type";
+declare const SPLITTER_ATTRIBUTE_SEPARATOR: string;
+declare const SPLITTER_KEYS_ABSOLUTE: Set<string>;
+declare const SPLITTER_KEYS_HORIZONTAL: Set<string>;
+declare const SPLITTER_KEYS_NEGATIVE: Set<string>;
+declare const SPLITTER_KEYS_VERTICAL: Set<string>;
+declare const SPLITTER_KEYS_ALL: Set<string>;
+declare const SPLITTER_MESSAGE: string;
+declare const SPLITTER_METHODS_CONNECT: readonly ["delete", "set"];
+declare const SPLITTER_METHODS_OBSERVE: readonly ["unobserve", "observe"];
+declare const SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE = .9;
+declare const SPLITTER_NAVIGATION_MAXIMUM_TOTAL = 100;
+declare const SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE = .1;
+declare const SPLITTER_NAVIGATION_MODIFIER = .05;
+declare const SPLITTER_SELECTOR_HANDLE: string;
+declare const SPLITTER_SYMBOL: unique symbol;
+declare const SPLITTER_VALUE_DECIMALS = 6;
+declare const splitterStyling: StyleToggler;
+//#endregion
+export { splitterStyling as A, SPLITTER_NAVIGATION_MAXIMUM_TOTAL as C, SPLITTER_SYMBOL as D, SPLITTER_SELECTOR_HANDLE as E, SPLITTER_TAGNAME as O, SPLITTER_NAVIGATION_MAXIMUM_PERCENTAGE as S, SPLITTER_NAVIGATION_MODIFIER as T, SPLITTER_KEYS_NEGATIVE as _, OuiSplitterValuesNow as a, SPLITTER_METHODS_CONNECT as b, SPLITTER_ATTRIBUTE_HORIZONTAL as c, SPLITTER_ATTRIBUTE_SEPARATOR as d, SPLITTER_ATTRIBUTE_SIZE as f, SPLITTER_KEYS_HORIZONTAL as g, SPLITTER_KEYS_ALL as h, OuiSplitterValues as i, SPLITTER_VALUE_DECIMALS as k, SPLITTER_ATTRIBUTE_MAX as l, SPLITTER_KEYS_ABSOLUTE as m, OuiSplitter as n, SPLITTER_ATTRIBUTE_ACTIVE as o, SPLITTER_ATTRIBUTE_TYPE as p, OuiSplitterTypes as r, SPLITTER_ATTRIBUTE_HANDLE as s, GenericOuiSplitterElement as t, SPLITTER_ATTRIBUTE_MIN as u, SPLITTER_KEYS_VERTICAL as v, SPLITTER_NAVIGATION_MINIMUM_PERCENTAGE as w, SPLITTER_METHODS_OBSERVE as x, SPLITTER_MESSAGE as y };

package/dist/js/{tabs.d.mts → tabs/index.d.mts}

@@ -1,25 +1,24 @@
-//#region src/js/tabs.d.ts
+import { a as OuiTabsState, c as TABS_SYMBOL, r as OuiTabsEvent } from "../tabs.model-DRBX_JtI.mjs";
+//#region src/js/tabs/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
     [TAGNAME]: OuiTabsElement;
   }
 }
-declare class OuiTabsEvent extends Event {
-  oldIndex: number;
-  newIndex: number;
-  constructor(name: 'oui:beforechange' | 'oui:change', oldIndex: number, newIndex: number, cancelable: boolean);
+export interface OuiTabsElement {
+  [TABS_SYMBOL]: OuiTabsState;
 }
-declare class OuiTabsElement extends HTMLElement {
-  #private;
+export declare class OuiTabsElement extends HTMLElement {
   static observedAttributes: string[];
   get active(): number;
   set active(value: number);
   get panel(): HTMLElement;
   get tab(): HTMLButtonElement;
+  constructor();
   attributeChangedCallback(name: string, _: string | null, value: string | null): void;
   connectedCallback(): void;
   disconnectedCallback(): void;
 }
 declare const TAGNAME = "oui-tabs";
 //#endregion
-export { OuiTabsElement, OuiTabsEvent };
+export { OuiTabsEvent };

package/dist/js/{tabs.mjs → tabs/index.mjs}

@@ -1,69 +1,65 @@
-import { OuiNavigable, getNavigableOrientation } from "./internal/navigable.mjs";
+import { NAVIGABLE_SYMBOL } from "../internal/navigable/navigable.model.mjs";
+import { getNavigable, getNavigableOrientation } from "../internal/navigable/index.mjs";
+import { OuiTabsEvent, TABS_SYMBOL } from "./tabs.model.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { createElement } from "@oscarpalmer/toretto/create";
-//#region src/js/tabs.ts
-var OuiTabsEvent = class extends Event {
-	oldIndex;
-	newIndex;
-	constructor(name, oldIndex, newIndex, cancelable) {
-		super(name, {
-			cancelable,
-			bubbles: true,
-			composed: true
-		});
-		this.oldIndex = oldIndex;
-		this.newIndex = newIndex;
-	}
-};
+//#region src/js/tabs/index.ts
 var OuiTabsElement = class extends HTMLElement {
 	static observedAttributes = ["active"];
-	#state;
 	get active() {
-		return this.#state?.active ?? 0;
+		return this[TABS_SYMBOL].component?.active ?? 0;
 	}
 	set active(value) {
-		setActive(this.#state, value);
+		setActive(this[TABS_SYMBOL], value);
 	}
 	get panel() {
-		return this.#state?.panels.elements[this.active];
+		return this[TABS_SYMBOL].component?.panels.elements[this.active];
 	}
 	get tab() {
-		return this.#state?.tabList.tabs[this.active];
+		return this[TABS_SYMBOL].component?.tabList.tabs[this.active];
+	}
+	constructor() {
+		super();
+		this[TABS_SYMBOL] = { component: null };
 	}
 	attributeChangedCallback(name, _, value) {
 		switch (name) {
-			case "active": setActive(this.#state, value);
+			case "active": setActive(this[TABS_SYMBOL], value);
 		}
 	}
 	connectedCallback() {
-		if (this.#state == null) this.#state = initializeTabs(this);
-		else attachTabs(this.#state);
+		const state = this[TABS_SYMBOL];
+		if (state.component == null) initializeTabs(this, state);
+		else attachTabs(state);
 	}
 	disconnectedCallback() {
-		if (this.#state != null) detachTabs(this.#state);
+		const state = this[TABS_SYMBOL];
+		if (state.component != null) detachTabs(state);
 	}
 };
 function attachTabs(state) {
-	state.navigable = new OuiNavigable(state.tabList.element, {
-		orientation: state.orientation,
+	const { component } = state;
+	const { content, orientation, panels, tabList } = component;
+	component.navigable = getNavigable(tabList.element, {
+		orientation,
 		selector: SELECTOR_TAB,
 		vertical: false,
 		onActivate: (navigable) => {
-			const index = state.tabList.tabs.indexOf(navigable.active.element);
-			if (index > -1 && index !== state.active) onActivate(state, index);
+			const index = tabList.tabs.indexOf(navigable[NAVIGABLE_SYMBOL].active.element);
+			if (index > -1 && index !== component.active) onActivate(state, index);
 		}
 	});
-	const { length } = state.panels.elements;
+	const { length } = panels.elements;
 	for (let index = 0; index < length; index += 1) {
-		const panel = state.panels.elements[index];
-		panel.hidden = index !== state.active;
+		const panel = panels.elements[index];
+		panel.hidden = index !== component.active;
 		panel.role = "tabpanel";
 		if (index === 0) {
-			panel.insertAdjacentElement("beforebegin", state.tabList.element);
-			panel.insertAdjacentElement("beforebegin", state.content);
+			panel.insertAdjacentElement("beforebegin", tabList.element);
+			panel.insertAdjacentElement("beforebegin", content);
 		}
-		state.content.append(panel);
+		content.append(panel);
 	}
 }
 function createContent(prefix, panels, active) {
@@ -121,16 +117,17 @@ function createTabList(prefix, panels, labels, active) {
 	};
 }
 function detachTabs(state) {
-	state.navigable?.destroy();
-	const { length } = state.panels.elements;
+	const { content, navigable, panels, tabList } = state.component;
+	navigable?.destroy();
+	const { length } = panels.elements;
 	for (let index = 0; index < length; index += 1) {
-		const panel = state.panels.elements[index];
-		panel.hidden = state.panels.hidden[index];
-		panel.role = state.panels.roles[index];
-		state.content.before(panel);
+		const panel = panels.elements[index];
+		panel.hidden = panels.hidden[index];
+		panel.role = panels.roles[index];
+		content.before(panel);
 	}
-	state.tabList.element.remove();
-	state.content.remove();
+	tabList.element.remove();
+	content.remove();
 }
 function getActive(element, max) {
 	const attribute = getAttribute(element, "active");
@@ -171,7 +168,7 @@ function getLabels(panels) {
 	}
 	return labels;
 }
-function initializeTabs(element) {
+function initializeTabs(element, state) {
 	const panels = [...element.querySelectorAll(SELECTOR_PANEL)];
 	if (panels.length === 0) throw new Error(MESSAGE_EMPTY);
 	const labels = getLabels(panels);
@@ -183,7 +180,7 @@ function initializeTabs(element) {
 	const orientation = getNavigableOrientation(element, false, false);
 	const content = createContent(id, panels, active);
 	const tabList = createTabList(id, panels, labels, active);
-	const state = {
+	state.component = {
 		active,
 		id,
 		orientation,
@@ -193,35 +190,38 @@ function initializeTabs(element) {
 		panels: content.panels
 	};
 	attachTabs(state);
-	return state;
 }
 function onActivate(state, next) {
-	const current = state.active;
+	const { component } = state;
+	const { host, panels, tabList } = component;
+	const current = component.active;
 	const event = new OuiTabsEvent("oui:beforechange", current, next, true);
-	state.host.dispatchEvent(event);
+	host.dispatchEvent(event);
 	if (event.defaultPrevented) return;
-	state.active = next;
-	const { length } = state.panels.elements;
+	component.active = next;
+	const { length } = panels.elements;
 	for (let index = 0; index < length; index += 1) {
-		const panel = state.panels.elements[index];
+		const panel = panels.elements[index];
 		panel.hidden = index !== next;
-		setAria(state.tabList.tabs[index], "selected", index === next);
+		setAria(tabList.tabs[index], "selected", index === next);
 	}
-	setAttribute(state.host, "active", next);
-	state.host.dispatchEvent(new OuiTabsEvent("oui:change", current, next, false));
+	setAttribute(host, "active", next);
+	host.dispatchEvent(new OuiTabsEvent("oui:change", current, next, false));
 }
 function setActive(state, value) {
-	if (state == null) return;
-	const max = state.panels.elements.length - 1;
+	const { component } = state;
+	if (component == null) return;
+	const { active, host, navigable, panels } = component;
+	const max = panels.elements.length - 1;
 	let index;
 	if (typeof value === "number" && !Number.isNaN(value) && value >= 0) index = value > max ? max : value;
 	else if (typeof value === "string") {
 		const parsed = Number.parseInt(value, 10);
 		if (!Number.isNaN(parsed) && parsed >= 0) index = parsed > max ? max : parsed;
 	}
-	if (index == null) setAttribute(state.host, "active", state.active);
-	else if (index !== state.active) {
-		state.navigable?.navigate(index, false);
+	if (index == null) setAttribute(host, "active", active);
+	else if (index !== active) {
+		navigable?.navigate(index, false);
 		onActivate(state, index);
 	}
 }

package/dist/js/tabs/tabs.model.d.mts

@@ -0,0 +1,2 @@
+import { a as OuiTabsState, c as TABS_SYMBOL, i as OuiTabsPanels, l as TABS_TAGNAME, n as OuiTabsContent, o as OuiTabsStateComponent, r as OuiTabsEvent, s as OuiTabsTabList, t as GenericOuiTabsElement } from "../tabs.model-DRBX_JtI.mjs";
+export { GenericOuiTabsElement, OuiTabsContent, OuiTabsEvent, OuiTabsPanels, OuiTabsState, OuiTabsStateComponent, OuiTabsTabList, TABS_SYMBOL, TABS_TAGNAME };

package/dist/js/tabs/tabs.model.mjs

@@ -0,0 +1,18 @@
+//#region src/js/tabs/tabs.model.ts
+var OuiTabsEvent = class extends Event {
+	oldIndex;
+	newIndex;
+	constructor(name, oldIndex, newIndex, cancelable) {
+		super(name, {
+			cancelable,
+			bubbles: true,
+			composed: true
+		});
+		this.oldIndex = oldIndex;
+		this.newIndex = newIndex;
+	}
+};
+const TABS_TAGNAME = "oui-tabs";
+const TABS_SYMBOL = Symbol(TABS_TAGNAME);
+//#endregion
+export { OuiTabsEvent, TABS_SYMBOL, TABS_TAGNAME };

package/dist/js/tabs.model-DRBX_JtI.d.mts

@@ -0,0 +1,40 @@
+import { d as OuiNavigable, h as OuiNavigableOrientation } from "./navigable.model-BPOM8DZk.mjs";
+//#region src/js/tabs/tabs.model.d.ts
+type GenericOuiTabsElement = {
+  [TABS_SYMBOL]: OuiTabsState;
+} & HTMLElement;
+declare class OuiTabsEvent extends Event {
+  oldIndex: number;
+  newIndex: number;
+  constructor(name: "oui:beforechange" | "oui:change", oldIndex: number, newIndex: number, cancelable: boolean);
+}
+type OuiTabsContent = {
+  element: HTMLDivElement;
+  panels: OuiTabsPanels;
+};
+type OuiTabsPanels = {
+  elements: HTMLElement[];
+  hidden: Array<boolean | "until-found">;
+  roles: Array<string | null>;
+};
+type OuiTabsState = {
+  component: OuiTabsStateComponent;
+};
+type OuiTabsStateComponent = {
+  active: number;
+  content: HTMLDivElement;
+  host: GenericOuiTabsElement;
+  id: string;
+  navigable?: OuiNavigable;
+  orientation: OuiNavigableOrientation;
+  panels: OuiTabsPanels;
+  tabList: OuiTabsTabList;
+};
+type OuiTabsTabList = {
+  element: HTMLDivElement;
+  tabs: HTMLButtonElement[];
+};
+declare const TABS_TAGNAME = "oui-tabs";
+declare const TABS_SYMBOL: unique symbol;
+//#endregion
+export { OuiTabsState as a, TABS_SYMBOL as c, OuiTabsPanels as i, TABS_TAGNAME as l, OuiTabsContent as n, OuiTabsStateComponent as o, OuiTabsEvent as r, OuiTabsTabList as s, GenericOuiTabsElement as t };

package/dist/js/toolbar/index.mjs

@@ -0,0 +1,27 @@
+import { attributable } from "../internal/attributable.mjs";
+import { getNavigable, updateNavigableFocus } from "../internal/navigable/index.mjs";
+import { TOOLBAR_ATTRIBUTE, TOOLBAR_SELECTOR, TOOLBAR_SYMBOL, toolbars } from "./toolbar.model.mjs";
+//#region src/js/toolbar/index.ts
+function OuiToolbar(navigable) {
+	this[TOOLBAR_SYMBOL] = navigable;
+	updateNavigableFocus(navigable, false);
+}
+OuiToolbar.prototype.destroy = destroyToolbar;
+function addToolbar(element) {
+	if (!toolbars.has(element)) toolbars.set(element, new OuiToolbar(getNavigable(element, {
+		role: "toolbar",
+		selector: TOOLBAR_SELECTOR,
+		vertical: false
+	})));
+}
+function destroyToolbar() {
+	this[TOOLBAR_SYMBOL].destroy();
+	this[TOOLBAR_SYMBOL] = void 0;
+}
+function removeToolbar(element) {
+	toolbars.get(element)?.destroy();
+	toolbars.delete(element);
+}
+attributable(TOOLBAR_ATTRIBUTE, addToolbar, removeToolbar);
+//#endregion
+export {};

package/dist/js/toolbar/toolbar.model.d.mts

@@ -0,0 +1,11 @@
+import { d as OuiNavigable } from "../navigable.model-BPOM8DZk.mjs";
+//#region src/js/toolbar/toolbar.model.d.ts
+export type OuiToolbar = {
+  [TOOLBAR_SYMBOL]: OuiNavigable;
+  destroy(): void;
+};
+export declare const TOOLBAR_ATTRIBUTE = "oui-toolbar";
+export declare const TOOLBAR_SYMBOL: unique symbol;
+export declare const TOOLBAR_SELECTOR: string;
+export declare const toolbars: WeakMap<HTMLElement, OuiToolbar>;
+//#endregion

package/dist/js/toolbar/toolbar.model.mjs

@@ -0,0 +1,7 @@
+//#region src/js/toolbar/toolbar.model.ts
+const TOOLBAR_ATTRIBUTE = "oui-toolbar";
+const TOOLBAR_SYMBOL = Symbol(TOOLBAR_ATTRIBUTE);
+const TOOLBAR_SELECTOR = `[${TOOLBAR_ATTRIBUTE}-item]`;
+const toolbars = /* @__PURE__ */ new WeakMap();
+//#endregion
+export { TOOLBAR_ATTRIBUTE, TOOLBAR_SELECTOR, TOOLBAR_SYMBOL, toolbars };

package/dist/js/tooltip/index.d.mts

@@ -0,0 +1,19 @@
+import { n as OuiTooltipState, t as OuiTooltip } from "../tooltip.model-DRkY_BsL.mjs";
+//#region src/js/tooltip/index.d.ts
+declare function OuiTooltip(this: OuiTooltip, state: OuiTooltipState): void;
+/**
+ * Get the _OuiTooltip_ for an element
+ *
+ * @param element Element to get _OuiTooltip_ for
+ * @returns _OuiTooltip_ instance
+ */
+export declare function getTooltip(element: HTMLElement): OuiTooltip | undefined;
+/**
+ * Set the delay before showing the tooltip, in milliseconds
+ *
+ * _(Default delay is half a second, or 500 milliseconds)_
+ * @param value Delay in milliseconds
+ */
+export declare function setTooltipDelay(value: number): void;
+//#endregion
+export type { OuiTooltip };

package/dist/js/{tooltip.mjs → tooltip/index.mjs}

@@ -1,91 +1,71 @@
-import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
-import { attributable } from "./internal/attributable.mjs";
+import { createEmbeddedFloatable } from "../floatable/floatable.embedded.mjs";
+import { attributable } from "../internal/attributable.mjs";
+import { EXPRESSION_WHITESPACE } from "../internal/misc.mjs";
+import { TOOLTIP_ATTRIBUTE, TOOLTIP_ATTRIBUTE_CONTENT, TOOLTIP_ATTRIBUTE_CONTENT_OPEN, TOOLTIP_SELECTOR, TOOLTIP_SELECTOR_CONTENT, TOOLTIP_SYMBOL, tooltipFloatableOptions, tooltips } from "./tooltip.model.mjs";
 import { getAria } from "@oscarpalmer/toretto/aria";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { createElement } from "@oscarpalmer/toretto/create";
 import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
-//#region src/js/tooltip.ts
-var OuiTooltip = class {
-	#state;
-	/**
-	* Is the tooltip open?
-	*/
-	get open() {
-		return this === activeTooltip && content.checkVisibility();
-	}
-	/**
-	* Open or close the tooltip
-	*/
-	set open(value) {
-		if (value === true) this.show();
-		else if (value === false) this.hide();
-	}
-	constructor(state) {
-		this.#state = state;
-		state.floatable.update();
-	}
-	/**
-	* Closes the tooltip
-	*/
-	hide() {
-		this.#state.floatable.hide();
-	}
-	/**
-	* Opens the tooltip
-	*/
-	show() {
-		this.#state.floatable.show();
-	}
-};
+import { createElement } from "@oscarpalmer/toretto/create";
+//#region src/js/tooltip/index.ts
+function OuiTooltip(state) {
+	this[TOOLTIP_SYMBOL] = state;
+	state.floatable.update();
+}
+OuiTooltip.prototype.hide = hideTooltip;
+OuiTooltip.prototype.show = showTooltip;
+Object.defineProperties(OuiTooltip.prototype, { open: {
+	enumerable: true,
+	get: getOpen,
+	set: setOpen
+} });
 function activate(event, focus) {
-	const targetAnchor = findAncestor(event, SELECTOR);
-	const targetContent = findAncestor(event, SELECTOR_CONTENT);
+	const targetAnchor = findAncestor(event, TOOLTIP_SELECTOR);
+	const targetContent = findAncestor(event, TOOLTIP_SELECTOR_CONTENT);
 	if (targetAnchor == null && targetContent == null) {
 		if (!focused) {
-			closeTooltip(true, activeState);
-			activeState = void 0;
+			closeTooltip(true, activeTooltip);
 			activeTooltip = void 0;
 		}
 		return;
 	}
-	const state = states.get(targetAnchor ?? targetContent);
-	if (state == null || state.tooltip === activeTooltip) return;
+	const targetTooltip = tooltips.get(targetAnchor ?? targetContent);
+	if (targetTooltip == null || targetTooltip === activeTooltip) return;
 	const shouldDelay = activeTooltip == null;
-	closeTooltip(false, activeState);
-	activeState = state;
-	activeTooltip = state.tooltip;
+	closeTooltip(false, activeTooltip);
+	activeTooltip = targetTooltip;
 	focused = focus;
-	state.timer = setTimeout(() => {
+	const targetState = targetTooltip[TOOLTIP_SYMBOL];
+	targetState.timer = setTimeout(() => {
 		content.innerHTML = "";
-		content.append(...state.elements);
-		state.floatable.show();
+		content.append(...targetState.elements);
+		targetState.floatable.show();
 		setTimeout(() => {
-			state.floatable.update();
+			targetState.floatable.update();
 		});
 	}, shouldDelay ? delay : 0);
 }
 function addTooltip(element) {
-	if (!states.has(element)) createTooltip(element);
+	if (!tooltips.has(element)) createTooltip(element);
 }
-function closeTooltip(clear, state) {
-	if (state == null) return;
+function closeTooltip(clear, tooltip) {
+	if (tooltip == null) return;
+	const state = tooltip[TOOLTIP_SYMBOL];
 	if (state.timer != null) clearTimeout(state.timer);
 	if (clear) content?.hidePopover();
 }
 function createTooltip(anchor) {
 	const elements = getElements(anchor);
-	if (elements == null) return;
-	states.set(anchor, getState(anchor, elements));
+	if (elements != null) tooltips.set(anchor, new OuiTooltip(getState(anchor, elements)));
 }
-function destroyTooltip(state) {
+function destroyTooltip(tooltip) {
+	const state = tooltip[TOOLTIP_SYMBOL];
 	clearTimeout(state.timer);
 	state.floatable.destroy();
 	state.anchor = void 0;
 	state.elements = void 0;
 	state.floatable = void 0;
-	state.tooltip = void 0;
 }
 function findElements(attribute) {
 	if (attribute == null) return;
@@ -105,7 +85,7 @@ function findElements(attribute) {
 function getContent() {
 	return createElement("div", {
 		attribute: {
-			[ATTRIBUTE_CONTENT]: "",
+			[TOOLTIP_ATTRIBUTE_CONTENT]: "",
 			popover: "hint"
 		},
 		property: {
@@ -123,15 +103,15 @@ function getElements(anchor) {
 	if (isNullableOrWhitespace(textContent)) return;
 	return [createElement("p", { property: { textContent } })];
 }
+function getOpen() {
+	return this === activeTooltip && content.checkVisibility();
+}
 function getState(anchor, elements) {
-	const state = {
+	return {
 		anchor,
 		elements,
-		floatable: createEmbeddedFloatable(anchor, content, options),
-		tooltip: null
+		floatable: createEmbeddedFloatable(anchor, content, tooltipFloatableOptions)
 	};
-	state.tooltip = new OuiTooltip(state);
-	return state;
 }
 /**
 * Get the _OuiTooltip_ for an element
@@ -140,7 +120,10 @@ function getState(anchor, elements) {
 * @returns _OuiTooltip_ instance
 */
 function getTooltip(element) {
-	return states.get(element)?.tooltip;
+	return tooltips.get(element);
+}
+function hideTooltip() {
+	this[TOOLTIP_SYMBOL].floatable.hide();
 }
 function onFocusin(event) {
 	activate(event, true);
@@ -149,9 +132,8 @@ function onFocusout() {
 	if (activeTooltip == null) return;
 	if (focusTimer != null) clearTimeout(focusTimer);
 	focusTimer = setTimeout(() => {
-		if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, SELECTOR) != null) return;
-		closeTooltip(true, activeState);
-		activeState = void 0;
+		if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, TOOLTIP_SELECTOR) != null) return;
+		closeTooltip(true, activeTooltip);
 		activeTooltip = void 0;
 	});
 }
@@ -159,13 +141,12 @@ function onPointermove(event) {
 	activate(event, false);
 }
 function onToggle(event) {
-	setAttribute(content, ATTRIBUTE_CONTENT_OPEN, event.newState === "open" ? "" : void 0);
+	setAttribute(content, TOOLTIP_ATTRIBUTE_CONTENT_OPEN, event.newState === "open" ? "" : void 0);
 }
 function removeTooltip(element) {
-	const state = states.get(element);
-	if (state == null) return;
-	destroyTooltip(state);
-	states.delete(element);
+	const tooltip = tooltips.get(element);
+	if (tooltip != null) destroyTooltip(tooltip);
+	tooltips.delete(element);
 }
 /**
 * Set the delay before showing the tooltip, in milliseconds
@@ -176,22 +157,16 @@ function removeTooltip(element) {
 function setTooltipDelay(value) {
 	if (typeof value === "number" && !Number.isNaN(value) && value >= 0) delay = value;
 }
-const EXPRESSION_WHITESPACE = /\s+/;
-const ATTRIBUTE = "oui-tooltip";
-const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
-const ATTRIBUTE_CONTENT_OPEN = `${ATTRIBUTE_CONTENT}-open`;
-const SELECTOR = `[${ATTRIBUTE}]`;
-const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+function setOpen(value) {
+	if (value === true) this.show();
+	else if (value === false) this.hide();
+}
+function showTooltip() {
+	this[TOOLTIP_SYMBOL].floatable.show();
+}
 const content = getContent();
-const states = /* @__PURE__ */ new WeakMap();
-const options = {
-	attribute: `${ATTRIBUTE}-position`,
-	position: "above",
-	reusable: true
-};
 let delay = 500;
 let focused = false;
-let activeState;
 let activeTooltip;
 let focusTimer;
 document.body.append(content);
@@ -199,6 +174,6 @@ on(content, "toggle", onToggle);
 on(document, "focusin", onFocusin);
 on(document, "focusout", onFocusout);
 on(document, "pointermove", onPointermove);
-attributable(ATTRIBUTE, addTooltip, removeTooltip);
+attributable(TOOLTIP_ATTRIBUTE, addTooltip, removeTooltip);
 //#endregion
 export { getTooltip, setTooltipDelay };

package/dist/js/tooltip/tooltip.model.d.mts

@@ -0,0 +1,2 @@
+import { a as TOOLTIP_ATTRIBUTE_CONTENT_OPEN, c as TOOLTIP_SYMBOL, i as TOOLTIP_ATTRIBUTE_CONTENT, l as tooltipFloatableOptions, n as OuiTooltipState, o as TOOLTIP_SELECTOR, r as TOOLTIP_ATTRIBUTE, s as TOOLTIP_SELECTOR_CONTENT, t as OuiTooltip, u as tooltips } from "../tooltip.model-DRkY_BsL.mjs";
+export { OuiTooltip, OuiTooltipState, TOOLTIP_ATTRIBUTE, TOOLTIP_ATTRIBUTE_CONTENT, TOOLTIP_ATTRIBUTE_CONTENT_OPEN, TOOLTIP_SELECTOR, TOOLTIP_SELECTOR_CONTENT, TOOLTIP_SYMBOL, tooltipFloatableOptions, tooltips };