@oscarpalmer/oui 0.22.1 → 0.23.0

package/dist/css/popover.css

@@ -1,34 +1,30 @@
 
 :where([oui-popover-content]) {
   box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
-  --margin-left: 0;
-  --margin-top: 0;
-  margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
-  pointer-events: all !important;
+  --margin-bottom: 0.5em;
+  --margin-left: 0.5em;
+  --margin-right: 0.5em;
+  --margin-top: 0.5em;
+  inset-block: var(--margin-top) var(--margin-bottom);
+  inset-inline: var(--margin-left) var(--margin-right);
 }
-:where([oui-popover-content])[oui-position^=above] {
-  margin: 0 0 0.5em;
+:where([oui-popover-content])[oui-position$=bottom] {
+  --margin-bottom: 0;
 }
-:where([oui-popover-content])[oui-position^=below] {
-  margin: 0.5em 0 0;
+:where([oui-popover-content])[oui-position$=end] {
+  --margin-right: 0;
 }
-:where([oui-popover-content])[oui-position^=end] {
-  margin: 0 0 0 0.5em;
+:where([oui-popover-content])[oui-position$=start] {
+  --margin-left: 0;
 }
-:where([oui-popover-content])[oui-position^=start] {
-  margin: 0 0.5em 0 0;
+:where([oui-popover-content])[oui-position$=top] {
+  --margin-top: 0;
 }
 :where([oui-popover-content]) {
   padding: 1rem;
-  overscroll-behavior: contain;
   background-color: var(--oui-absolute);
+  border: none;
   border-radius: 0.25rem;
 }
-:where([oui-popover-content]):focus {
-  outline: none;
-}
-:where([oui-popover-content]) * {
-  overscroll-behavior: contain;
-}
 
 

package/dist/css/reset.css

@@ -367,6 +367,14 @@ summary) {
 /**
  * Attributes
  */
+:where([aria-busy=true i]) {
+  cursor: progress;
+}
+
+:where([aria-controls]) {
+  cursor: pointer;
+}
+
 :where([disabled], [aria-disabled=true i]) {
   cursor: default;
 }
@@ -375,12 +383,16 @@ summary) {
   display: none !important;
 }
 
-:where([aria-busy=true i]) {
-  cursor: progress;
+:where([popover]) {
+  display: none !important;
+  overflow: visible;
+  overscroll-behavior: contain;
+  border: none;
+  color: currentcolor;
 }
 
-:where([aria-controls]) {
-  cursor: pointer;
+:where([popover]:popover-open) {
+  display: inherit !important;
 }
 
 /**

package/dist/css/tooltip.css

@@ -27,62 +27,66 @@ var)) {
 
 :where([oui-tooltip-content]) {
   box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
-  --margin-left: 0;
-  --margin-top: 0;
-  margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
-  pointer-events: all !important;
+  --margin-bottom: 0.5em;
+  --margin-left: 0.5em;
+  --margin-right: 0.5em;
+  --margin-top: 0.5em;
+  inset-block: var(--margin-top) var(--margin-bottom);
+  inset-inline: var(--margin-left) var(--margin-right);
 }
-:where([oui-tooltip-content])[oui-position^=above] {
-  margin: 0 0 0.5em;
+:where([oui-tooltip-content])[oui-position$=bottom] {
+  --margin-bottom: 0;
 }
-:where([oui-tooltip-content])[oui-position^=below] {
-  margin: 0.5em 0 0;
+:where([oui-tooltip-content])[oui-position$=end] {
+  --margin-right: 0;
 }
-:where([oui-tooltip-content])[oui-position^=end] {
-  margin: 0 0 0 0.5em;
+:where([oui-tooltip-content])[oui-position$=start] {
+  --margin-left: 0;
 }
-:where([oui-tooltip-content])[oui-position^=start] {
-  margin: 0 0.5em 0 0;
+:where([oui-tooltip-content])[oui-position$=top] {
+  --margin-top: 0;
 }
 :where([oui-tooltip-content]) {
   max-width: 48ch;
   padding: 0.75em 1em;
+  overflow: visible;
   opacity: 0;
   background-color: var(--oui-absolute);
   border-radius: 0.25rem;
   font-size: 0.875rem;
   pointer-events: none;
-  transition: opacity 0.125s ease-in-out;
+  transition: opacity 0.125s ease-in-out 0s;
+  transition-behavior: allow-discrete;
 }
 :where([oui-tooltip-content])::after {
   content: "";
-  opacity: 0;
+  display: block;
   position: absolute;
 }
 :where([oui-tooltip-content])[oui-position^=above]::after, :where([oui-tooltip-content])[oui-position^=below]::after, :where([oui-tooltip-content])[oui-position^=bottom]::after, :where([oui-tooltip-content])[oui-position^=top]::after {
   width: 100%;
-  height: 0.5em;
+  height: 1em;
 }
 :where([oui-tooltip-content])[oui-position^=above]::after, :where([oui-tooltip-content])[oui-position^=top]::after {
-  inset: 100% 0 0;
+  inset: calc(100% - 0.5em) 0 0;
 }
 :where([oui-tooltip-content])[oui-position^=below]::after, :where([oui-tooltip-content])[oui-position^=bottom]::after {
   inset: -0.5em 0 0;
 }
 :where([oui-tooltip-content])[oui-position^=end]::after, :where([oui-tooltip-content])[oui-position^=left]::after, :where([oui-tooltip-content])[oui-position^=right]::after, :where([oui-tooltip-content])[oui-position^=start]::after {
-  width: 0.5em;
+  width: 1em;
   height: 100%;
 }
 :where([oui-tooltip-content])[oui-position^=end]::after, :where([oui-tooltip-content])[oui-position^=right]::after {
   inset: 0 0 0 -0.5em;
 }
 :where([oui-tooltip-content])[oui-position^=left]::after, :where([oui-tooltip-content])[oui-position^=start]::after {
-  inset: 0 0 0 100%;
+  inset: 0 0 0 calc(100% - 0.5em);
 }
 
 :where([oui-tooltip-content][oui-tooltip-content-active]) {
   opacity: 1;
-  pointer-events: auto;
+  pointer-events: all;
 }
 
 

package/dist/js/focus-trap/embedded.d.mts

@@ -18,9 +18,9 @@ type Options = {
   noescape: boolean;
 };
 declare function createFocusTrap(element: HTMLElement, options?: Options): FocusTrap;
+declare function removeFocusTrap(element: HTMLElement): void;
 declare const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
 declare const FOCUS_TRAP_CONTAIN = "oui-focus-trap-contain";
 declare const FOCUS_TRAP_NOESCAPE = "oui-focus-trap-noescape";
-declare const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap>;
 //#endregion
-export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };
+export { FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap, removeFocusTrap };

package/dist/js/focus-trap/embedded.mjs

@@ -96,6 +96,10 @@ function onTab(event) {
 	if (index === -1 || elements.length === 0) tabToTrap(focusTrap, elements, element);
 	else tabToElement(focusTrap, elements, index, event.shiftKey ? -1 : 1);
 }
+function removeFocusTrap(element) {
+	FOCUSTRAPS_ALL.get(element)?.destroy();
+	FOCUSTRAPS_ALL.delete(element);
+}
 function setConnected(focusTrap, value) {
 	if (!focusTrap.embedded || focusTrap.connected === value) return;
 	focusTrap.connected = value;
@@ -149,4 +153,4 @@ on(document, "keydown", onKeydown, EVENT_OPTIONS);
 on(document, "mousedown", onPointerdown, EVENT_OPTIONS);
 on(document, "touchstart", onPointerdown, EVENT_OPTIONS);
 //#endregion
-export { FOCUSTRAPS_ALL, FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap };
+export { FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap, removeFocusTrap };

package/dist/js/focus-trap/standalone.mjs

@@ -1,10 +1,6 @@
 import { attributable } from "../internal/attributable.mjs";
-import { FOCUSTRAPS_ALL, FOCUS_TRAP_SELECTOR, createFocusTrap } from "./embedded.mjs";
+import { FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTrap } from "./embedded.mjs";
 //#region src/js/focus-trap/standalone.ts
-function removeFocusTraps(element) {
-	FOCUSTRAPS_ALL.get(element)?.destroy();
-	FOCUSTRAPS_ALL.delete(element);
-}
-attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTraps);
+attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTrap);
 //#endregion
 export {};

package/dist/js/index.d.mts

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

package/dist/js/index.mjs

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

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

@@ -1,26 +1,18 @@
 //#region src/js/internal/floatable.d.ts
 declare class Floatable {
-  readonly options: Options;
-  active: boolean;
-  disabled: boolean;
-  frame: DOMHighResTimeStamp | undefined;
-  ignoreFocus: boolean;
-  constructor(options: Options);
-  destroy(): void;
-  disable(): void;
-  enable(): void;
-  toggle(active: boolean, ignoreFocus?: boolean): void;
-}
-type Options = {
   anchor: HTMLElement;
   content: HTMLElement;
-  defaultPosition: Position;
-  interactive: boolean;
-  positionAttribute: string;
-  reusable: boolean;
-  onAfter?: (active: boolean) => void;
+  options: FloatableOptions;
+  constructor(anchor: HTMLElement, content: HTMLElement, options: FloatableOptions);
+  destroy(): void;
+  update(): void;
+}
+type FloatableOptions = {
+  attribute: string;
+  position: FloatablePosition;
 };
-type Position = 'above' | 'above-end' | 'above-start' | 'below' | 'below-end' | 'below-start' | 'end' | 'end-bottom' | 'end-top' | 'start' | 'start-bottom' | 'start-top';
-declare function deactivate(floatable: Floatable): void;
+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, deactivate };
+export { Floatable, FloatableOptions, FloatablePosition, createFloatable, removeFloatable };

package/dist/js/internal/floatable.mjs

@@ -1,149 +1,49 @@
-import { on } from "@oscarpalmer/toretto/event";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 //#region src/js/internal/floatable.ts
 var Floatable = class {
+	anchor;
+	content;
 	options;
-	active = false;
-	disabled = false;
-	frame;
-	ignoreFocus = false;
-	constructor(options) {
+	constructor(anchor, content, options) {
+		this.anchor = anchor;
+		this.content = content;
 		this.options = options;
-		initialize(this);
+		const anchorName = getAnchorName(anchor);
+		anchor.style.anchorName = anchorName;
+		content.style.positionAnchor = anchorName;
 	}
 	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 = void 0;
-		this.options.content = void 0;
+		this.anchor = null;
+		this.content = null;
 	}
-	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);
+	update() {
+		setPosition(this);
 	}
 };
-function activate(floatable) {
-	floatable.active = true;
-	document.body.append(floatable.options.content);
-	floatable.options.content.hidden = false;
-	setPosition(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) state.order.pop()?.toggle(false, true);
-}
-function closeAll() {
-	const state = getState();
-	const floatables = [...state?.active ?? []];
-	state?.active.clear();
-	for (const floatable of floatables) floatable.toggle(false, true);
-}
-function closeNonInteractive(state) {
-	for (const floatable of state.active) if (!floatable.options.interactive) floatable.toggle(false);
-}
-function deactivate(floatable) {
-	floatable.active = false;
-	if (!floatable.options.reusable) {
-		floatable.options.content.hidden = true;
-		floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
+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);
 	}
-	floatable.options.onAfter?.(false);
+	return floatable;
 }
-function getAnchorName() {
+function getAnchorName(anchor) {
+	let { anchorName } = anchor.style;
+	if (anchorName.length > 0) return anchorName;
 	index += 1;
 	return `--oui-floatable-anchor-${index}`;
 }
-function getState() {
-	return window._oscarpalmer_oui_floatable;
-}
-function initialize(floatable) {
-	const { anchor, content, interactive } = floatable.options;
-	if (interactive) {
-		anchor.setAttribute(ATTRIBUTE_ANCHOR, "");
-		content.setAttribute(ATTRIBUTE_CONTENT, "");
-	}
-	let anchorName = anchor.style.anchorName;
-	if (anchorName.length === 0) anchorName = getAnchorName();
-	anchor.style.anchorName = anchorName;
-	content.style.position = "absolute";
-	content.style.positionAnchor = anchorName;
-	content.style.positionTry = "normal flip-start";
-	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, 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, SELECTOR_CONTENT);
-	if (!(related instanceof HTMLElement)) return;
-	closeAbove(related);
-	const floatable = state.mapped.get(related);
-	if (floatable != null) floatable.toggle(false);
+function removeFloatable(content) {
+	instances.get(content)?.destroy();
+	instances.delete(content);
 }
 function setPosition(floatable) {
-	let position = floatable.options.anchor.getAttribute(floatable.options.positionAttribute) ?? floatable.options.defaultPosition;
-	if (AREAS[position] == null) position = floatable.options.defaultPosition;
+	let position = floatable.anchor.getAttribute(floatable.options.attribute) ?? floatable.options.position;
+	if (AREAS[position] == null) position = floatable.options.position;
 	const area = AREAS[position];
-	floatable.options.content.style.positionArea = area;
-	floatable.options.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
-	floatable.options.onAfter?.(true);
-}
-function stop(floatable) {
-	if (floatable.frame != null) cancelAnimationFrame(floatable.frame);
-	floatable.frame = void 0;
-}
-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);
-	if (content == null) closeAll();
-	else closeAbove(content);
-	floatable.toggle(!active);
+	floatable.content.style.positionArea = area;
+	floatable.content.setAttribute(ATTRIBUTE, POSITIONS[area]);
 }
 const AREAS = {
 	above: "block-start",
@@ -159,30 +59,9 @@ const AREAS = {
 	"start-bottom": "span-start start",
 	"start-top": "span-end start"
 };
-const ATTRIBUTE_ANCHOR = "oui-floatable-anchor";
-const ATTRIBUTE_CONTENT = "oui-floatable-content";
-const ATTRIBUTE_POSITION = "oui-position";
-const INSERT_AFTEREND = "afterend";
+const ATTRIBUTE = "oui-position";
 const POSITIONS = Object.fromEntries(Object.entries(AREAS).map(([position, area]) => [area, position]));
-const SELECTOR_ALL = `[${ATTRIBUTE_ANCHOR}], [${ATTRIBUTE_CONTENT}]`;
-const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const instances = /* @__PURE__ */ new WeakMap();
 let index = 0;
-if (window._oscarpalmer_oui_floatable == null) {
-	Object.defineProperty(window, "_oscarpalmer_oui_floatable", {
-		enumerable: false,
-		value: {
-			active: /* @__PURE__ */ new Set(),
-			mapped: /* @__PURE__ */ new Map(),
-			order: []
-		},
-		writable: false
-	});
-	on(document, "keydown", (event) => {
-		onKeyDown(event);
-	});
-	on(document, "click", (event) => {
-		onClick(event);
-	});
-}
 //#endregion
-export { Floatable, deactivate };
+export { Floatable, createFloatable, removeFloatable };

package/dist/js/popover.d.mts

@@ -1,20 +1 @@
-//#region src/js/popover.d.ts
-declare global {
-  interface HTMLElementTagNameMap {
-    'oui-popover': OuiPopoverElement;
-  }
-}
-declare class OuiPopoverElement extends HTMLElement {
-  #private;
-  constructor();
-  close(): void;
-  connectedCallback(): void;
-  disconnectedCallback(): void;
-  hidePopover(): void;
-  open(): void;
-  showPopover(): void;
-  toggle(): void;
-  togglePopover(options?: boolean): boolean;
-}
-//#endregion
-export { OuiPopoverElement };
+export { };

package/dist/js/popover.mjs

@@ -1,89 +1,60 @@
-import { createFocusTrap } from "./focus-trap/embedded.mjs";
-import { Floatable } from "./internal/floatable.mjs";
-import { getFocusable } from "@oscarpalmer/toretto/focusable";
-import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { attributable } from "./internal/attributable.mjs";
+import { createFocusTrap, removeFocusTrap } from "./focus-trap/embedded.mjs";
+import { createFloatable, removeFloatable } from "./internal/floatable.mjs";
+import { on } from "@oscarpalmer/toretto/event";
 //#region src/js/popover.ts
-let index = 0;
-var OuiPopoverElement = class 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",
-			reusable: false,
-			onAfter: (active) => {
-				if (active) focus(content);
-				else if (!this.#floatable.ignoreFocus) toggle.focus();
-			}
+var Popover = class {
+	element;
+	anchor;
+	floatable;
+	focusTrap;
+	listener;
+	constructor(element) {
+		this.element = element;
+		this.anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
+		this.floatable = createFloatable(this.anchor, element, options);
+		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.#focusTrap = createFocusTrap(content, { noescape: true });
-		POPOVERS.set(toggle, this.#floatable);
-		POPOVERS.set(content, this.#floatable);
+		this.element.setAttribute(ATTRIBUTE_CONTENT, "");
+		this.floatable?.update();
 	}
-	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;
+	destroy() {
+		this.focusTrap?.destroy();
+		removeFloatable(this.element);
+		removeFocusTrap(this.element);
+		this.element.removeAttribute(ATTRIBUTE_CONTENT);
+		this.anchor = null;
+		this.element = null;
 	}
 };
-function focus(content) {
-	let target = getFocusable(content)[0];
-	if (!(target instanceof HTMLElement)) target = content;
-	requestAnimationFrame(() => {
-		target.focus();
-	});
+function onAdd(element) {
+	if (!instances.has(element) && element.getAttribute(ATTRIBUTE) !== POPOVER_HINT) instances.set(element, new Popover(element));
+}
+function onPointerdown() {
+	ignoreFocus = true;
 }
-const ATTRIBUTE_ID_PREFIX = "oui_popover_content_";
-const POPOVERS = /* @__PURE__ */ new Map();
-const SELECTOR = "oui-popover";
-const SELECTOR_CONTENT = `:scope > [${SELECTOR}-content]`;
-const SELECTOR_TOGGLE = `:scope > [${SELECTOR}-toggle]`;
-customElements.define(SELECTOR, OuiPopoverElement);
+function onRemove(element) {
+	instances.get(element)?.destroy();
+	instances.delete(element);
+}
+const ATTRIBUTE = "popover";
+const ATTRIBUTE_CONTENT = "oui-popover-content";
+const EVENT_TOGGLE = "toggle";
+const POPOVER_HINT = "hint";
+const STATE_OPEN = "open";
+const instances = /* @__PURE__ */ new WeakMap();
+const options = {
+	attribute: "position",
+	position: "below-start"
+};
+let ignoreFocus = false;
+on(document, "pointerdown", onPointerdown, { capture: true });
+attributable(ATTRIBUTE, onAdd, onRemove);
 //#endregion
-export { OuiPopoverElement };
+export {};

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
 //#region src/js/tooltip.d.ts
-declare function setTooltipDelay(open?: number, close?: number): void;
+declare function setTooltipDelay(value: number): void;
 //#endregion
 export { setTooltipDelay };