@oscarpalmer/oui 0.23.0 → 0.24.0

package/dist/js/floatable.d.mts

@@ -0,0 +1,59 @@
+//#region src/js/floatable.d.ts
+declare class Floatable {
+  #private;
+  anchor: HTMLElement;
+  content: HTMLElement;
+  options: FloatableOptions;
+  /**
+   * Is the _Floatable_ open?
+   */
+  get open(): boolean;
+  constructor(anchor: HTMLElement, content: HTMLElement, options: FloatableOptions, standalone: boolean);
+  /**
+   * Destroy the floatable, removing it from the DOM and cleaning up references
+   */
+  destroy(): void;
+  /**
+   * Hide the floatable
+   */
+  hide(): void;
+  /**
+   * Show the floatable
+   */
+  show(): void;
+  /**
+   * Update the position of the floatable, with an optional new position
+   *
+   * @param position Optional new position
+   */
+  update(position?: FloatablePosition): void;
+}
+type FloatableOptions = {
+  attribute?: string;
+  position: FloatablePosition;
+};
+type FloatablePosition = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
+type GetFloatableOptions = {
+  /**
+   * Open the _Floatable_ when created? _(defaults to `true`)_
+   */
+  open?: boolean;
+  /**
+   * Position of the _Floatable_ _(defaults to `below`)_
+   */
+  position?: FloatablePosition;
+};
+declare function createFloatable(anchor: HTMLElement, content: HTMLElement, options: FloatableOptions, standalone: boolean): Floatable;
+/**
+ * Create a _Floatable_ for an anchor and content element
+ *
+ * @param anchor Anchor element
+ * @param content Content element
+ * @param options _Floatable_ options
+ * @returns _Floatable_ instance
+ */
+declare function getFloatable(anchor: HTMLElement | SVGElement, content: HTMLElement | SVGElement, options?: GetFloatableOptions): Floatable;
+declare function removeFloatable(content: HTMLElement): void;
+declare const ATTRIBUTE_FLOATABLE = "oui-floatable";
+//#endregion
+export { ATTRIBUTE_FLOATABLE, Floatable, FloatableOptions, FloatablePosition, createFloatable, getFloatable, removeFloatable };

package/dist/js/floatable.mjs

@@ -0,0 +1,130 @@
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+//#region src/js/floatable.ts
+var Floatable = class {
+	anchor;
+	content;
+	options;
+	#destroyed = false;
+	/**
+	* Is the _Floatable_ open?
+	*/
+	get open() {
+		return this.content.checkVisibility();
+	}
+	constructor(anchor, content, options, standalone) {
+		this.anchor = anchor;
+		this.content = content;
+		this.options = options;
+		if (standalone) {
+			content.setAttribute(ATTRIBUTE_FLOATABLE, "");
+			content.popover = "manual";
+		}
+		const anchorName = getAnchorName(anchor);
+		anchor.style.anchorName = anchorName;
+		content.style.positionAnchor = anchorName;
+	}
+	/**
+	* Destroy the floatable, removing it from the DOM and cleaning up references
+	*/
+	destroy() {
+		if (this.#destroyed) return;
+		this.#destroyed = true;
+		removeFloatable(this.content);
+		this.anchor = null;
+		this.content = null;
+	}
+	/**
+	* Hide the floatable
+	*/
+	hide() {
+		if (!this.#destroyed) this.content.hidePopover();
+	}
+	/**
+	* Show the floatable
+	*/
+	show() {
+		if (!this.#destroyed) this.content.showPopover();
+	}
+	/**
+	* Update the position of the floatable, with an optional new position
+	*
+	* @param position Optional new position
+	*/
+	update(position) {
+		if (!this.#destroyed) setPosition(this, position);
+	}
+};
+function createFloatable(anchor, content, options, standalone) {
+	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) throw new TypeError("Anchor and content must be an HTMLElement or SVGElement.");
+	let floatable = instances.get(content);
+	if (floatable == null) {
+		floatable = new Floatable(anchor, content, options, standalone);
+		instances.set(content, floatable);
+	}
+	return floatable;
+}
+function getAnchorName(anchor) {
+	let { anchorName } = anchor.style;
+	if (anchorName.length > 0) return anchorName;
+	index += 1;
+	return `--oui-floatable-anchor-${index}`;
+}
+/**
+* Create a _Floatable_ for an anchor and content element
+*
+* @param anchor Anchor element
+* @param content Content element
+* @param options _Floatable_ options
+* @returns _Floatable_ instance
+*/
+function getFloatable(anchor, content, options) {
+	const { open, position } = getOptions(options);
+	const floatable = createFloatable(anchor, content, { position }, true);
+	floatable?.update(position);
+	if (open) floatable?.show();
+	return floatable;
+}
+function getOptions(input) {
+	const object = isPlainObject(input) ? input : {};
+	return {
+		open: typeof object.open === "boolean" ? object.open : true,
+		position: object.position != null && object.position in AREAS ? object.position : "below"
+	};
+}
+function getPosition(floatable, override) {
+	if (override != null && override in AREAS) return override;
+	if (floatable.options.attribute == null) return floatable.options.position;
+	const attribute = floatable.anchor.getAttribute(floatable.options.attribute) ?? "";
+	return attribute in AREAS ? attribute : floatable.options.position;
+}
+function removeFloatable(content) {
+	instances.get(content)?.destroy();
+	instances.delete(content);
+}
+function setPosition(floatable, override) {
+	const area = AREAS[getPosition(floatable, override)];
+	floatable.content.style.positionArea = area;
+	floatable.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+}
+const AREAS = {
+	above: "block-start",
+	"above-end": "start span-start",
+	"above-start": "start span-end",
+	below: "block-end",
+	"below-end": "end span-start",
+	"below-start": "end span-end",
+	end: "center end",
+	"end-bottom": "span-start end",
+	"end-top": "span-end end",
+	start: "center start",
+	"start-bottom": "span-start start",
+	"start-top": "span-end start"
+};
+const ATTRIBUTE_FLOATABLE = "oui-floatable";
+const ATTRIBUTE_POSITION = "oui-position";
+const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
+const instances = /* @__PURE__ */ new WeakMap();
+let index = 0;
+//#endregion
+export { ATTRIBUTE_FLOATABLE, Floatable, createFloatable, getFloatable, removeFloatable };

package/dist/js/index.d.mts

@@ -1,3 +1,4 @@
+import { getFloatable } from "./floatable.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { setTooltipDelay } from "./tooltip.mjs";
-export { OuiSplitterElement, setTooltipDelay };
+export { OuiSplitterElement, getFloatable, setTooltipDelay };

package/dist/js/index.mjs

@@ -1,7 +1,8 @@
+import { getFloatable } from "./floatable.mjs";
 import "./focus-trap/standalone.mjs";
 import "./movable.mjs";
 import "./popover.mjs";
 import "./sortable.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
 import { setTooltipDelay } from "./tooltip.mjs";
-export { OuiSplitterElement, setTooltipDelay };
+export { OuiSplitterElement, getFloatable, setTooltipDelay };

package/dist/js/internal/attributable.mjs

@@ -1,10 +1,11 @@
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/internal/attributable.ts
 function attributable(attribute, add, remove) {
 	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);
+			if (entry.type === "attributes" && isHTMLOrSVGElement(entry.target)) 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);
@@ -22,7 +23,7 @@ function attributable(attribute, add, remove) {
 	});
 }
 function handleAdded(attribute, nodes, add) {
-	const elements = [...nodes].filter((node) => node instanceof HTMLElement);
+	const elements = [...nodes].filter(isHTMLOrSVGElement);
 	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];
@@ -31,7 +32,7 @@ function handleAdded(attribute, nodes, add) {
 	}
 }
 function handleRemoved(nodes, remove) {
-	const elements = [...nodes].filter((node) => node instanceof HTMLElement);
+	const elements = [...nodes].filter(isHTMLOrSVGElement);
 	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
 		const element = elements[index];

package/dist/js/popover.mjs

@@ -1,6 +1,7 @@
+import { createFloatable, removeFloatable } from "./floatable.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { createFocusTrap, removeFocusTrap } from "./focus-trap/embedded.mjs";
-import { createFloatable, removeFloatable } from "./internal/floatable.mjs";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { on } from "@oscarpalmer/toretto/event";
 //#region src/js/popover.ts
 var Popover = class {
@@ -11,8 +12,11 @@ var Popover = class {
 	listener;
 	constructor(element) {
 		this.element = element;
-		this.anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
-		this.floatable = createFloatable(this.anchor, element, options);
+		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) {
@@ -34,7 +38,7 @@ var Popover = class {
 	}
 };
 function onAdd(element) {
-	if (!instances.has(element) && element.getAttribute(ATTRIBUTE) !== POPOVER_HINT) instances.set(element, new Popover(element));
+	if (!instances.has(element) && element.getAttribute(ATTRIBUTE) !== POPOVER_HINT && !element.hasAttribute("oui-floatable")) instances.set(element, new Popover(element));
 }
 function onPointerdown() {
 	ignoreFocus = true;
@@ -50,7 +54,7 @@ const POPOVER_HINT = "hint";
 const STATE_OPEN = "open";
 const instances = /* @__PURE__ */ new WeakMap();
 const options = {
-	attribute: "position",
+	attribute: `${ATTRIBUTE}position`,
 	position: "below-start"
 };
 let ignoreFocus = false;

package/dist/js/sortable.mjs

@@ -1,5 +1,6 @@
 import { attributable } from "./internal/attributable.mjs";
 import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { getPosition } from "@oscarpalmer/toretto/event";
 import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
@@ -177,12 +178,13 @@ function setPlaceholder(state, sortable, origin) {
 			parent: sortable.element,
 			placeholder: element,
 			create: (value) => {
-				if (!(value instanceof HTMLElement)) return;
-				placeholder.drag.custom = value;
-				updatePlaceholder(sortable, value);
+				if (!isHTMLOrSVGElement(value)) return;
+				const element = value;
+				placeholder.drag.custom = element;
+				updatePlaceholder(sortable, element);
 				state.element = {
-					rectangle: value.getBoundingClientRect(),
-					node: value
+					rectangle: element.getBoundingClientRect(),
+					node: element
 				};
 			}
 		}

package/dist/js/splitter.mjs

@@ -1,24 +1,28 @@
+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";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 import { round } from "@oscarpalmer/atoms/math";
 //#region src/js/splitter.ts
+const ATTRIBUTE_MAX = "max";
+const ATTRIBUTE_MIN = "min";
+const ATTRIBUTE_SIZE = "size";
+const ATTRIBUTE_TYPE = "type";
 var OuiSplitterElement = class extends HTMLElement {
 	static observedAttributes = [
-		"max",
-		"min",
-		"size",
-		"type"
+		ATTRIBUTE_MAX,
+		ATTRIBUTE_MIN,
+		ATTRIBUTE_SIZE,
+		ATTRIBUTE_TYPE
 	];
 	#splitter;
 	get max() {
 		return this.#splitter.values.max;
 	}
 	set max(value) {
-		this.setAttribute("max", String(value));
+		this.setAttribute(ATTRIBUTE_MAX, String(value));
 	}
 	get min() {
 		return this.#splitter.values.min;
@@ -52,12 +56,12 @@ var OuiSplitterElement = class extends HTMLElement {
 	}
 	attributeChangedCallback(name) {
 		switch (name) {
-			case "max":
-			case "min":
-			case "size":
+			case ATTRIBUTE_MAX:
+			case ATTRIBUTE_MIN:
+			case ATTRIBUTE_SIZE:
 				this.#splitter.updateValues();
 				break;
-			case "type":
+			case ATTRIBUTE_TYPE:
 				this.#splitter.updateOrientation();
 				break;
 			default: break;
@@ -157,14 +161,14 @@ function getValue(element, name, defaultValue) {
 }
 function getValues(element) {
 	const values = {
-		max: getValue(element, "max", NAVIGATION_MAXIMUM_PERCENTAGE),
-		min: getValue(element, "min", NAVIGATION_MINIMUM_PERCENTAGE),
+		max: getValue(element, ATTRIBUTE_MAX, NAVIGATION_MAXIMUM_PERCENTAGE),
+		min: getValue(element, ATTRIBUTE_MIN, NAVIGATION_MINIMUM_PERCENTAGE),
 		now: {
 			current: .5,
 			previous: .5
 		}
 	};
-	const value = getContained(values.min, getValue(element, "size", values.now.current), values.max);
+	const value = getContained(values.min, getValue(element, ATTRIBUTE_SIZE, values.now.current), values.max);
 	values.now.current = value;
 	values.now.previous = value;
 	return values;

package/dist/js/tooltip.d.mts

@@ -1,4 +1,10 @@
 //#region src/js/tooltip.d.ts
+/**
+ * Set the delay before showing the tooltip, in milliseconds
+ *
+ * _(Default delay is half a second, or 500 milliseconds)_
+ * @param value Delay in milliseconds
+ */
 declare function setTooltipDelay(value: number): void;
 //#endregion
 export { setTooltipDelay };

package/dist/js/tooltip.mjs

@@ -1,9 +1,10 @@
+import { Floatable } from "./floatable.mjs";
 import { attributable } from "./internal/attributable.mjs";
-import { Floatable } from "./internal/floatable.mjs";
+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";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
 //#region src/js/tooltip.ts
 var Tooltip = class {
 	anchor;
@@ -15,7 +16,7 @@ var Tooltip = class {
 		this.content = content;
 		instances.set(content, this);
 		anchor.insertAdjacentElement("afterend", content);
-		this.floatable = new Floatable(anchor, content, options);
+		this.floatable = new Floatable(anchor, content, options, false);
 		this.floatable.update();
 	}
 	destroy() {
@@ -51,8 +52,8 @@ function activate(event, focus) {
 function closeTooltip(instance) {
 	if (instance == null) return;
 	if (instance.timer != null) clearTimeout(instance.timer);
-	instance.content.hidePopover();
-	instance.content.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+	instance.content?.hidePopover();
+	instance.content?.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
 }
 function createTooltip(anchor) {
 	const content = getContent(anchor);
@@ -64,7 +65,7 @@ function findElements(attribute) {
 	for (const id of ids) {
 		if (isNullableOrWhitespace(id)) continue;
 		const element = document.querySelector(`#${id}`);
-		if (element instanceof HTMLElement) {
+		if (isHTMLOrSVGElement(element)) {
 			const cloned = element.cloneNode(true);
 			cloned.hidden = false;
 			elements.push(cloned);
@@ -118,6 +119,12 @@ function onRemove(element) {
 	instances.get(element)?.destroy();
 	instances.delete(element);
 }
+/**
+* Set the delay before showing the tooltip, in milliseconds
+*
+* _(Default delay is half a second, or 500 milliseconds)_
+* @param value Delay in milliseconds
+*/
 function setTooltipDelay(value) {
 	if (typeof value === "number" && !Number.isNaN(value) && value >= 0) delay = value;
 }
@@ -134,7 +141,7 @@ const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
 const instances = /* @__PURE__ */ new WeakMap();
 const options = {
-	attribute: "oui-tooltip-position",
+	attribute: `${ATTRIBUTE}-position`,
 	position: "above"
 };
 let delay = 500;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.23.0",
+	"version": "0.24.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",

package/src/js/floatable.ts

@@ -0,0 +1,237 @@
+import {isPlainObject} from '@oscarpalmer/atoms/is';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+
+export class Floatable {
+	#destroyed = false;
+
+	/**
+	 * Is the _Floatable_ open?
+	 */
+	get open(): boolean {
+		return this.content.checkVisibility();
+	}
+
+	constructor(
+		public anchor: HTMLElement,
+		public content: HTMLElement,
+		public options: FloatableOptions,
+		standalone: boolean,
+	) {
+		if (standalone) {
+			content.setAttribute(ATTRIBUTE_FLOATABLE, '');
+
+			content.popover = 'manual';
+		}
+
+		const anchorName = getAnchorName(anchor);
+
+		anchor.style.anchorName = anchorName;
+		content.style.positionAnchor = anchorName;
+	}
+
+	/**
+	 * Destroy the floatable, removing it from the DOM and cleaning up references
+	 */
+	destroy(): void {
+		if (this.#destroyed) {
+			return;
+		}
+
+		this.#destroyed = true;
+
+		removeFloatable(this.content);
+
+		this.anchor = null as never;
+		this.content = null as never;
+	}
+
+	/**
+	 * Hide the floatable
+	 */
+	hide(): void {
+		if (!this.#destroyed) {
+			this.content.hidePopover();
+		}
+	}
+
+	/**
+	 * Show the floatable
+	 */
+	show(): void {
+		if (!this.#destroyed) {
+			this.content.showPopover();
+		}
+	}
+
+	/**
+	 * Update the position of the floatable, with an optional new position
+	 *
+	 * @param position Optional new position
+	 */
+	update(position?: FloatablePosition): void {
+		if (!this.#destroyed) {
+			setPosition(this, position);
+		}
+	}
+}
+
+export type FloatableOptions = {
+	attribute?: string;
+	position: FloatablePosition;
+};
+
+export type FloatablePosition =
+	| 'above'
+	| 'above-end'
+	| 'above-start'
+	| 'below'
+	| 'below-end'
+	| 'below-start'
+	| 'end'
+	| 'end-bottom'
+	| 'end-top'
+	| 'start'
+	| 'start-bottom'
+	| 'start-top';
+
+type GetFloatableOptions = {
+	/**
+	 * Open the _Floatable_ when created? _(defaults to `true`)_
+	 */
+	open?: boolean;
+	/**
+	 * Position of the _Floatable_ _(defaults to `below`)_
+	 */
+	position?: FloatablePosition;
+};
+
+export function createFloatable(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: FloatableOptions,
+	standalone: boolean,
+): Floatable {
+	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) {
+		throw new TypeError('Anchor and content must be an HTMLElement or SVGElement.');
+	}
+
+	let floatable = instances.get(content);
+
+	if (floatable == null) {
+		floatable = new Floatable(anchor, content, options, standalone);
+
+		instances.set(content, floatable);
+	}
+
+	return floatable;
+}
+
+function getAnchorName(anchor: HTMLElement): string {
+	let {anchorName} = anchor.style;
+
+	if (anchorName.length > 0) {
+		return anchorName;
+	}
+
+	index += 1;
+
+	return `--oui-floatable-anchor-${index}`;
+}
+
+/**
+ * Create a _Floatable_ for an anchor and content element
+ *
+ * @param anchor Anchor element
+ * @param content Content element
+ * @param options _Floatable_ options
+ * @returns _Floatable_ instance
+ */
+export function getFloatable(
+	anchor: HTMLElement | SVGElement,
+	content: HTMLElement | SVGElement,
+	options?: GetFloatableOptions,
+): Floatable {
+	const {open, position} = getOptions(options);
+
+	const floatable = createFloatable(
+		anchor as HTMLElement,
+		content as HTMLElement,
+		{
+			position,
+		},
+		true,
+	);
+
+	floatable?.update(position);
+
+	if (open) {
+		floatable?.show();
+	}
+
+	return floatable;
+}
+
+function getOptions(input?: GetFloatableOptions): Required<GetFloatableOptions> {
+	const object = isPlainObject(input) ? input : {};
+
+	return {
+		open: typeof object.open === 'boolean' ? object.open : true,
+		position: object.position != null && object.position in AREAS ? object.position : 'below',
+	};
+}
+
+function getPosition(floatable: Floatable, override?: FloatablePosition): FloatablePosition {
+	if (override != null && override in AREAS) {
+		return override;
+	}
+
+	if (floatable.options.attribute == null) {
+		return floatable.options.position;
+	}
+
+	const attribute = floatable.anchor.getAttribute(floatable.options.attribute) ?? '';
+
+	return attribute in AREAS ? (attribute as FloatablePosition) : floatable.options.position;
+}
+
+export function removeFloatable(content: HTMLElement): void {
+	instances.get(content)?.destroy();
+	instances.delete(content);
+}
+
+function setPosition(floatable: Floatable, override?: FloatablePosition): void {
+	const position = getPosition(floatable, override);
+
+	const area = AREAS[position];
+
+	floatable.content.style.positionArea = area;
+
+	floatable.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+}
+
+const AREAS: Record<FloatablePosition, string> = {
+	above: 'block-start',
+	'above-end': 'start span-start',
+	'above-start': 'start span-end',
+	below: 'block-end',
+	'below-end': 'end span-start',
+	'below-start': 'end span-end',
+	end: 'center end',
+	'end-bottom': 'span-start end',
+	'end-top': 'span-end end',
+	start: 'center start',
+	'start-bottom': 'span-start start',
+	'start-top': 'span-end start',
+};
+
+export const ATTRIBUTE_FLOATABLE = 'oui-floatable';
+
+const ATTRIBUTE_POSITION = 'oui-position';
+
+const POSITIONS = Object.fromEntries(
+	Object.entries(AREAS).map(([position, area]) => [area, position]),
+) as Record<string, FloatablePosition>;
+
+const instances = new WeakMap<HTMLElement, Floatable>();
+
+let index = 0;

package/src/js/index.ts

@@ -3,5 +3,6 @@ import './movable';
 import './popover';
 import './sortable';
 
+export {getFloatable} from './floatable'
 export * from './splitter';
-export * from './tooltip';
+export {setTooltipDelay} from './tooltip';

package/src/js/internal/attributable.ts

@@ -1,3 +1,5 @@
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+
 export function attributable(
 	attribute: string,
 	add: (element: HTMLElement) => void,
@@ -9,7 +11,7 @@ export function attributable(
 		for (let index = 0; index < length; index += 1) {
 			const entry = entries[index];
 
-			if (entry.type === 'attributes' && entry.target instanceof HTMLElement) {
+			if (entry.type === 'attributes' && isHTMLOrSVGElement(entry.target)) {
 				if (entry.target.hasAttribute(attribute)) {
 					handleAdded(attribute, [entry.target], add);
 				} else {
@@ -39,7 +41,7 @@ function handleAdded(
 	nodes: Node[] | NodeList,
 	add: (element: HTMLElement) => void,
 ): void {
-	const elements = [...nodes].filter(node => node instanceof HTMLElement) as HTMLElement[];
+	const elements = [...nodes].filter(isHTMLOrSVGElement) as HTMLElement[];
 
 	const {length} = elements;
 
@@ -57,7 +59,7 @@ function handleAdded(
 }
 
 function handleRemoved(nodes: Node[] | NodeList, remove: (element: HTMLElement) => void): void {
-	const elements = [...nodes].filter(node => node instanceof HTMLElement) as HTMLElement[];
+	const elements = [...nodes].filter(isHTMLOrSVGElement) as HTMLElement[];
 
 	const {length} = elements;
 

package/src/js/popover.ts

@@ -1,13 +1,15 @@
 import {on} from '@oscarpalmer/toretto/event';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {createFocusTrap, removeFocusTrap, type FocusTrap} from './focus-trap/embedded';
-import {attributable} from './internal/attributable';
 import {
+	ATTRIBUTE_FLOATABLE,
 	createFloatable,
 	removeFloatable,
 	type Floatable,
 	type FloatableOptions,
-} from './internal/floatable';
+} from './floatable';
+import {createFocusTrap, removeFocusTrap, type FocusTrap} from './focus-trap/embedded';
+import {attributable} from './internal/attributable';
 
 class Popover {
 	anchor: HTMLElement | null;
@@ -16,9 +18,19 @@ class Popover {
 	listener: RemovableEventListener;
 
 	constructor(public element: HTMLElement) {
-		this.anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+		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 as HTMLElement;
 
-		this.floatable = createFloatable(this.anchor as HTMLElement, element, options);
+		this.floatable = createFloatable(this.anchor, element, options, false);
 
 		this.focusTrap = createFocusTrap(element, {
 			noescape: true,
@@ -55,7 +67,11 @@ class Popover {
 }
 
 function onAdd(element: HTMLElement): void {
-	if (!instances.has(element) && element.getAttribute(ATTRIBUTE) !== POPOVER_HINT) {
+	if (
+		!instances.has(element) &&
+		element.getAttribute(ATTRIBUTE) !== POPOVER_HINT &&
+		!element.hasAttribute(ATTRIBUTE_FLOATABLE)
+	) {
 		instances.set(element, new Popover(element));
 	}
 }
@@ -83,7 +99,7 @@ const STATE_OPEN = 'open';
 const instances = new WeakMap<HTMLElement, Popover>();
 
 const options: FloatableOptions = {
-	attribute: 'position',
+	attribute: `${ATTRIBUTE}position`,
 	position: 'below-start',
 };
 

package/src/js/sortable.ts

@@ -2,6 +2,7 @@ import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
 import {createElement} from '@oscarpalmer/toretto/create';
 import {getPosition} from '@oscarpalmer/toretto/event';
 import {findAncestor, getElementFromPosition} from '@oscarpalmer/toretto/find';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {attributable} from './internal/attributable';
 import {
 	addDraggable,
@@ -333,17 +334,19 @@ function setPlaceholder(state: DraggableState, sortable: Sortable, origin: HTMLE
 			parent: sortable.element,
 			placeholder: element,
 			create: (value: unknown) => {
-				if (!(value instanceof HTMLElement)) {
+				if (!isHTMLOrSVGElement(value)) {
 					return;
 				}
 
-				placeholder.drag.custom = value;
+				const element = value as HTMLElement;
 
-				updatePlaceholder(sortable, value);
+				placeholder.drag.custom = element;
+
+				updatePlaceholder(sortable, element);
 
 				state.element = {
-					rectangle: value.getBoundingClientRect(),
-					node: value,
+					rectangle: element.getBoundingClientRect(),
+					node: element,
 				};
 			},
 		},

package/src/js/splitter.ts

@@ -12,8 +12,21 @@ declare global {
 	}
 }
 
+const ATTRIBUTE_MAX = 'max';
+
+const ATTRIBUTE_MIN = 'min';
+
+const ATTRIBUTE_SIZE = 'size';
+
+const ATTRIBUTE_TYPE = 'type';
+
 export class OuiSplitterElement extends HTMLElement {
-	static readonly observedAttributes = ['max', 'min', 'size', 'type'];
+	static readonly observedAttributes = [
+		ATTRIBUTE_MAX,
+		ATTRIBUTE_MIN,
+		ATTRIBUTE_SIZE,
+		ATTRIBUTE_TYPE,
+	];
 
 	readonly #splitter: Splitter;
 
@@ -24,7 +37,7 @@ export class OuiSplitterElement extends HTMLElement {
 	}
 
 	set max(value: number) {
-		this.setAttribute('max', String(value));
+		this.setAttribute(ATTRIBUTE_MAX, String(value));
 	}
 
 	get min(): number {
@@ -77,13 +90,13 @@ export class OuiSplitterElement extends HTMLElement {
 
 	attributeChangedCallback(name: string): void {
 		switch (name) {
-			case 'max':
-			case 'min':
-			case 'size':
+			case ATTRIBUTE_MAX:
+			case ATTRIBUTE_MIN:
+			case ATTRIBUTE_SIZE:
 				this.#splitter.updateValues();
 				break;
 
-			case 'type':
+			case ATTRIBUTE_TYPE:
 				this.#splitter.updateOrientation();
 				break;
 
@@ -271,15 +284,19 @@ function getValue(element: HTMLElement, name: string, defaultValue: number): num
 
 function getValues(element: OuiSplitterElement): Values {
 	const values: Values = {
-		max: getValue(element, 'max', NAVIGATION_MAXIMUM_PERCENTAGE),
-		min: getValue(element, 'min', NAVIGATION_MINIMUM_PERCENTAGE),
+		max: getValue(element, ATTRIBUTE_MAX, NAVIGATION_MAXIMUM_PERCENTAGE),
+		min: getValue(element, ATTRIBUTE_MIN, NAVIGATION_MINIMUM_PERCENTAGE),
 		now: {
 			current: 0.5,
 			previous: 0.5,
 		},
 	};
 
-	const value = getContained(values.min, getValue(element, 'size', values.now.current), values.max);
+	const value = getContained(
+		values.min,
+		getValue(element, ATTRIBUTE_SIZE, values.now.current),
+		values.max,
+	);
 
 	values.now.current = value;
 	values.now.previous = value;

package/src/js/tooltip.ts

@@ -2,8 +2,9 @@ import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 import {createElement} from '@oscarpalmer/toretto/create';
 import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import {attributable} from './internal/attributable';
-import {Floatable, type FloatableOptions} from './internal/floatable';
+import {Floatable, type FloatableOptions} from './floatable';
 
 class Tooltip {
 	floatable: Floatable;
@@ -18,7 +19,7 @@ class Tooltip {
 
 		anchor.insertAdjacentElement('afterend', content);
 
-		this.floatable = new Floatable(anchor, content, options);
+		this.floatable = new Floatable(anchor, content, options, false);
 
 		this.floatable.update();
 	}
@@ -61,7 +62,7 @@ function activate(event: Event, focus: boolean): void {
 	instance.timer = setTimeout(
 		() => {
 			instance.content.showPopover({
-				source: instance.anchor,
+				source: instance.anchor as HTMLElement,
 			});
 
 			setTimeout(() => {
@@ -83,8 +84,8 @@ function closeTooltip(instance?: Tooltip): void {
 		clearTimeout(instance.timer);
 	}
 
-	instance.content.hidePopover();
-	instance.content.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+	instance.content?.hidePopover();
+	instance.content?.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
 }
 
 function createTooltip(anchor: HTMLElement): void {
@@ -106,7 +107,7 @@ function findElements(attribute: string | null): HTMLElement[] {
 
 		const element = document.querySelector(`#${id}`);
 
-		if (element instanceof HTMLElement) {
+		if (isHTMLOrSVGElement(element)) {
 			const cloned = element.cloneNode(true) as HTMLElement;
 
 			cloned.hidden = false;
@@ -212,6 +213,12 @@ function onRemove(element: HTMLElement): void {
 	instances.delete(element);
 }
 
+/**
+ * Set the delay before showing the tooltip, in milliseconds
+ *
+ * _(Default delay is half a second, or 500 milliseconds)_
+ * @param value Delay in milliseconds
+ */
 export function setTooltipDelay(value: number): void {
 	if (typeof value === 'number' && !Number.isNaN(value) && value >= 0) {
 		delay = value;
@@ -243,7 +250,7 @@ const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
 const instances = new WeakMap<HTMLElement, Tooltip>();
 
 const options: FloatableOptions = {
-	attribute: 'oui-tooltip-position',
+	attribute: `${ATTRIBUTE}-position`,
 	position: 'above',
 };
 

package/dist/js/internal/floatable.d.mts

@@ -1,18 +0,0 @@
-//#region src/js/internal/floatable.d.ts
-declare class Floatable {
-  anchor: HTMLElement;
-  content: HTMLElement;
-  options: FloatableOptions;
-  constructor(anchor: HTMLElement, content: HTMLElement, options: FloatableOptions);
-  destroy(): void;
-  update(): void;
-}
-type FloatableOptions = {
-  attribute: string;
-  position: FloatablePosition;
-};
-type FloatablePosition = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
-declare function createFloatable(anchor: HTMLElement | null, content: HTMLElement, options: FloatableOptions): Floatable | undefined;
-declare function removeFloatable(content: HTMLElement): void;
-//#endregion
-export { Floatable, FloatableOptions, FloatablePosition, createFloatable, removeFloatable };

package/dist/js/internal/floatable.mjs

@@ -1,67 +0,0 @@
-//#region src/js/internal/floatable.ts
-var Floatable = class {
-	anchor;
-	content;
-	options;
-	constructor(anchor, content, options) {
-		this.anchor = anchor;
-		this.content = content;
-		this.options = options;
-		const anchorName = getAnchorName(anchor);
-		anchor.style.anchorName = anchorName;
-		content.style.positionAnchor = anchorName;
-	}
-	destroy() {
-		this.anchor = null;
-		this.content = null;
-	}
-	update() {
-		setPosition(this);
-	}
-};
-function createFloatable(anchor, content, options) {
-	if (anchor == null) return;
-	let floatable = instances.get(content);
-	if (floatable == null) {
-		floatable = new Floatable(anchor, content, options);
-		instances.set(content, floatable);
-	}
-	return floatable;
-}
-function getAnchorName(anchor) {
-	let { anchorName } = anchor.style;
-	if (anchorName.length > 0) return anchorName;
-	index += 1;
-	return `--oui-floatable-anchor-${index}`;
-}
-function removeFloatable(content) {
-	instances.get(content)?.destroy();
-	instances.delete(content);
-}
-function setPosition(floatable) {
-	let position = floatable.anchor.getAttribute(floatable.options.attribute) ?? floatable.options.position;
-	if (AREAS[position] == null) position = floatable.options.position;
-	const area = AREAS[position];
-	floatable.content.style.positionArea = area;
-	floatable.content.setAttribute(ATTRIBUTE, POSITIONS[area]);
-}
-const AREAS = {
-	above: "block-start",
-	"above-end": "start span-start",
-	"above-start": "start span-end",
-	below: "block-end",
-	"below-end": "end span-start",
-	"below-start": "end span-end",
-	end: "center end",
-	"end-bottom": "span-start end",
-	"end-top": "span-end end",
-	start: "center start",
-	"start-bottom": "span-start start",
-	"start-top": "span-end start"
-};
-const ATTRIBUTE = "oui-position";
-const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
-const instances = /* @__PURE__ */ new WeakMap();
-let index = 0;
-//#endregion
-export { Floatable, createFloatable, removeFloatable };

package/src/js/internal/floatable.ts

@@ -1,118 +0,0 @@
-export class Floatable {
-	constructor(
-		public anchor: HTMLElement,
-		public content: HTMLElement,
-		public options: FloatableOptions,
-	) {
-		const anchorName = getAnchorName(anchor);
-
-		anchor.style.anchorName = anchorName;
-		content.style.positionAnchor = anchorName;
-	}
-
-	destroy(): void {
-		this.anchor = null as never;
-		this.content = null as never;
-	}
-
-	update(): void {
-		setPosition(this);
-	}
-}
-
-export type FloatableOptions = {
-	attribute: string;
-	position: FloatablePosition;
-};
-
-export type FloatablePosition =
-	| 'above'
-	| 'above-end'
-	| 'above-start'
-	| 'below'
-	| 'below-end'
-	| 'below-start'
-	| 'end'
-	| 'end-bottom'
-	| 'end-top'
-	| 'start'
-	| 'start-bottom'
-	| 'start-top';
-
-export function createFloatable(
-	anchor: HTMLElement | null,
-	content: HTMLElement,
-	options: FloatableOptions,
-): Floatable | undefined {
-	if (anchor == null) {
-		return;
-	}
-
-	let floatable = instances.get(content);
-
-	if (floatable == null) {
-		floatable = new Floatable(anchor, content, options);
-
-		instances.set(content, floatable);
-	}
-
-	return floatable;
-}
-
-function getAnchorName(anchor: HTMLElement): string {
-	let {anchorName} = anchor.style;
-
-	if (anchorName.length > 0) {
-		return anchorName;
-	}
-
-	index += 1;
-
-	return `--oui-floatable-anchor-${index}`;
-}
-
-export function removeFloatable(content: HTMLElement): void {
-	instances.get(content)?.destroy();
-	instances.delete(content);
-}
-
-function setPosition(floatable: Floatable): void {
-	let position: FloatablePosition =
-		(floatable.anchor.getAttribute(floatable.options.attribute) as FloatablePosition) ??
-		floatable.options.position;
-
-	if (AREAS[position] == null) {
-		position = floatable.options.position;
-	}
-
-	const area = AREAS[position];
-
-	floatable.content.style.positionArea = area;
-
-	floatable.content.setAttribute(ATTRIBUTE, POSITIONS[area]);
-}
-
-const AREAS: Record<FloatablePosition, string> = {
-	above: 'block-start',
-	'above-end': 'start span-start',
-	'above-start': 'start span-end',
-	below: 'block-end',
-	'below-end': 'end span-start',
-	'below-start': 'end span-end',
-	end: 'center end',
-	'end-bottom': 'span-start end',
-	'end-top': 'span-end end',
-	start: 'center start',
-	'start-bottom': 'span-start start',
-	'start-top': 'span-end start',
-};
-
-const ATTRIBUTE = 'oui-position';
-
-const POSITIONS = Object.fromEntries(
-	Object.entries(AREAS).map(([position, area]) => [area, position]),
-) as Record<string, FloatablePosition>;
-
-const instances = new WeakMap<HTMLElement, Floatable>();
-
-let index = 0;