@oscarpalmer/oui 0.22.1 → 0.23.0

package/dist/js/tooltip.mjs

@@ -2,75 +2,61 @@ import { attributable } from "./internal/attributable.mjs";
 import { Floatable } from "./internal/floatable.mjs";
 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 {
-	elements;
+	anchor;
+	content;
 	floatable;
-	constructor(anchor, elements) {
-		const content = getContent();
-		this.elements = elements;
-		this.floatable = new Floatable({
-			anchor,
-			content,
-			defaultPosition: "above",
-			interactive: false,
-			positionAttribute: ATTRIBUTE_POSITION,
-			reusable: true,
-			onAfter: (active) => {
-				if (active) {
-					content.innerHTML = "";
-					content.append(...this.elements);
-				}
-				if (active || TOOLTIPS_ACTIVE.size > 0) return;
-				content.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
-				contentTimer = setTimeout(() => {
-					content.innerHTML = "";
-					content.remove();
-				}, delayClose);
-			}
-		});
+	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);
+		this.floatable.update();
 	}
 	destroy() {
-		const { floatable } = this;
-		TOOLTIPS_ACTIVE.delete(this);
-		TOOLTIPS_PENDING.delete(this);
-		TOOLTIPS_ALL.delete(floatable.options.anchor);
-		TOOLTIPS_ALL.delete(floatable.options.content);
-		floatable.destroy();
-		this.elements = [];
-		this.floatable = void 0;
+		instances.delete(this.content);
+		this.anchor = null;
+		this.content = null;
 	}
 };
-function addTooltip(anchor) {
-	if (TOOLTIPS_ALL.has(anchor)) return;
-	const elements = getElements(anchor);
-	if (elements != null) TOOLTIPS_ALL.set(anchor, new Tooltip(anchor, elements));
-}
-function closeTooltips(current) {
-	const pending = [...TOOLTIPS_PENDING];
-	for (const item of pending) {
-		if (item === current) continue;
-		TOOLTIPS_PENDING.delete(item);
-	}
-	const active = [...TOOLTIPS_ACTIVE];
-	for (const item of active) {
-		if (item === current) continue;
-		TOOLTIPS_ACTIVE.delete(item);
-		item.floatable.toggle(false);
+function activate(event, focus) {
+	const anchor = findAncestor(event, SELECTOR);
+	const content = findAncestor(event, SELECTOR_CONTENT);
+	if (anchor == null && content == null) {
+		if (!focused) {
+			closeTooltip(active);
+			active = void 0;
+		}
+		return;
 	}
+	const instance = instances.get(anchor ?? content);
+	if (instance == null || instance === active) return;
+	const shouldDelay = active == null;
+	closeTooltip(active);
+	active = instance;
+	focused = focus;
+	instance.timer = setTimeout(() => {
+		instance.content.showPopover({ source: instance.anchor });
+		setTimeout(() => {
+			instance.floatable.update();
+			instance.content.setAttribute(ATTRIBUTE_CONTENT_ACTIVE, "");
+		});
+	}, shouldDelay ? delay : 0);
 }
-function getElements(anchor) {
-	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
-	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
-	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
-	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
-	let content = anchor.getAttribute(ARIA_LABEL);
-	if (isNullableOrWhitespace(content)) content = anchor.getAttribute(ARIA_DESCRIPTION);
-	if (isNullableOrWhitespace(content)) return;
-	const paragraph = document.createElement("p");
-	paragraph.textContent = content;
-	return [paragraph];
+function closeTooltip(instance) {
+	if (instance == null) return;
+	if (instance.timer != null) clearTimeout(instance.timer);
+	instance.content.hidePopover();
+	instance.content.removeAttribute(ATTRIBUTE_CONTENT_ACTIVE);
+}
+function createTooltip(anchor) {
+	const content = getContent(anchor);
+	if (content != null) instances.set(anchor, new Tooltip(anchor, content));
 }
 function findElements(attribute) {
 	const ids = attribute?.split(EXPRESSION_WHITESPACE) ?? [];
@@ -86,89 +72,78 @@ function findElements(attribute) {
 	}
 	return elements;
 }
-function getContent() {
-	if (contentElement != null) return contentElement;
-	contentElement = document.createElement("div");
-	contentElement.setAttribute(ATTRIBUTE_CONTENT, "");
-	contentElement.role = "tooltip";
-	contentElement.tabIndex = -1;
-	return contentElement;
-}
-function onActivate(event) {
-	onToggle(event, true);
+function getContent(anchor) {
+	const elements = getElements(anchor);
+	if (elements == null) return;
+	const content = createElement(CONTENT_TAGNAME, {
+		popover: "hint",
+		role: "tooltip",
+		tabIndex: -1
+	});
+	content.setAttribute(ATTRIBUTE_CONTENT, "");
+	content.append(...elements);
+	return content;
 }
-function onChange() {
-	if (TOOLTIPS_ACTIVE.size === 0) return;
+function getElements(anchor) {
+	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
+	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
+	elements = findElements(anchor.getAttribute(ARIA_DESCRIBEDBY));
+	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
+	let content = anchor.getAttribute(ARIA_LABEL);
+	if (isNullableOrWhitespace(content)) content = anchor.getAttribute(ARIA_DESCRIPTION);
+	if (isNullableOrWhitespace(content)) return;
+	const paragraph = document.createElement("p");
+	paragraph.textContent = content;
+	return [paragraph];
 }
-function onClick(event) {
-	if (findAncestor(event, SELECTOR_CONTENT) != null) event.stopPropagation();
+function onAdd(element) {
+	if (!instances.has(element)) createTooltip(element);
 }
-function onDeactivate(event) {
-	onToggle(event, false);
+function onFocusin(event) {
+	activate(event, true);
 }
-function onToggle(event, activate) {
-	if (toggle != null) cancelAnimationFrame(toggle);
-	if (findAncestor(event, SELECTOR_CONTENT) != null) {
-		if (contentTimer != null) clearTimeout(contentTimer);
-		return;
-	}
-	toggle = requestAnimationFrame(() => {
-		toggle = void 0;
-		const element = findAncestor(event, SELECTOR);
-		const tooltip = TOOLTIPS_ALL.get(element);
-		if (TOOLTIPS_ACTIVE.size > 0 || TOOLTIPS_PENDING.size > 0) closeTooltips(tooltip);
-		if (tooltip == null || tooltip.floatable.active === activate) return;
-		if (activate) {
-			clearTimeout(contentTimer);
-			TOOLTIPS_PENDING.add(tooltip);
-			contentTimer = setTimeout(() => {
-				TOOLTIPS_ACTIVE.add(tooltip);
-				TOOLTIPS_PENDING.delete(tooltip);
-				tooltip.floatable.options.content.style.positionAnchor = tooltip.floatable.options.anchor.style.anchorName;
-				tooltip.floatable.toggle(true);
-				setTimeout(() => {
-					tooltip.floatable.options.content.setAttribute(ATTRIBUTE_CONTENT_ACTIVE, "");
-				});
-			}, delayOpen);
-			return;
-		}
-		TOOLTIPS_ACTIVE.delete(tooltip);
-		tooltip.floatable.toggle(false);
+function onFocusout() {
+	if (active == 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;
 	});
 }
-function removeTooltip(element) {
-	if (!element.hasAttribute(ATTRIBUTE_CONTENT)) TOOLTIPS_ALL.get(element)?.destroy();
+function onPointermove(event) {
+	activate(event, false);
+}
+function onRemove(element) {
+	instances.get(element)?.destroy();
+	instances.delete(element);
 }
-function setTooltipDelay(open, close) {
-	delayClose = typeof close === "number" && close >= 0 ? close : delayClose;
-	delayOpen = typeof open === "number" && open >= 0 ? open : delayOpen;
+function setTooltipDelay(value) {
+	if (typeof value === "number" && !Number.isNaN(value) && value >= 0) delay = value;
 }
 const ARIA_DESCRIBEDBY = "aria-describedby";
 const ARIA_DESCRIPTION = "aria-description";
 const ARIA_LABEL = "aria-label";
 const ARIA_LABELLEDBY = "aria-labelledby";
+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_POSITION = `${ATTRIBUTE}-position`;
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
-const EXPRESSION_WHITESPACE = /\s+/;
-const TOOLTIPS_ACTIVE = /* @__PURE__ */ new Set();
-const TOOLTIPS_ALL = /* @__PURE__ */ new WeakMap();
-const TOOLTIPS_PENDING = /* @__PURE__ */ new Set();
-let contentElement;
-let contentTimer;
-let delayClose = 250;
-let delayOpen = 500;
-let toggle;
-attributable(ATTRIBUTE, addTooltip, removeTooltip);
-on(document, "click", onClick, { capture: true });
-on(document, "focusin", onActivate);
-on(document, "focusout", onDeactivate);
-on(document, "mousemove", onActivate);
-on(window, "resize", onChange);
-on(document, "scroll", onChange);
-on(document, "touchstart", onActivate);
+const instances = /* @__PURE__ */ new WeakMap();
+const options = {
+	attribute: "oui-tooltip-position",
+	position: "above"
+};
+let delay = 500;
+let focused = false;
+let active;
+let focusTimer;
+on(document, "focusin", onFocusin);
+on(document, "focusout", onFocusout);
+on(document, "pointermove", onPointermove);
+attributable(ATTRIBUTE, onAdd, onRemove);
 //#endregion
 export { setTooltipDelay };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.22.1",
+	"version": "0.23.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -70,11 +70,11 @@
 		"watch": "vp run clean && concurrently \"php -S localhost:3000\" \"vp run postcss:watch\" \"vp run css:watch\" \"vp run tsdown\""
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.187.2",
+		"@oscarpalmer/atoms": "^0.188.1",
 		"@oscarpalmer/toretto": "^0.46"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.68",
+		"@oxlint/plugins": "^1.69",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",
@@ -82,8 +82,8 @@
 		"postcss-cli": "^11",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
-		"sass": "^1.100",
-		"stylelint": "^17.12",
+		"sass": "^1.101",
+		"stylelint": "^17.13",
 		"stylelint-config-standard-scss": "^17",
 		"tsdown": "^0.22",
 		"typescript": "^6",
@@ -92,4 +92,4 @@
 		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
 	},
 	"packageManager": "npm@11.12.1"
-}
+}

package/src/css/mixins.scss

@@ -54,26 +54,28 @@
 @mixin floatable() {
 	@include shadow-overlay;
 
-	--margin-left: 0;
-	--margin-top: 0;
+	--margin-bottom: 0.5em;
+	--margin-left: 0.5em;
+	--margin-right: 0.5em;
+	--margin-top: 0.5em;
 
-	margin: var(--margin-top, 0) 0 0 var(--margin-left, 0);
-	pointer-events: all !important;
+	inset-block: var(--margin-top) var(--margin-bottom);
+	inset-inline: var(--margin-left) var(--margin-right);
 
-	&[oui-position^='above'] {
-		margin: 0 0 0.5em;
+	&[oui-position$='bottom'] {
+		--margin-bottom: 0;
 	}
 
-	&[oui-position^='below'] {
-		margin: 0.5em 0 0;
+	&[oui-position$='end'] {
+		--margin-right: 0;
 	}
 
-	&[oui-position^='end'] {
-		margin: 0 0 0 0.5em;
+	&[oui-position$='start'] {
+		--margin-left: 0;
 	}
 
-	&[oui-position^='start'] {
-		margin: 0 0.5em 0 0;
+	&[oui-position$='top'] {
+		--margin-top: 0;
 	}
 }
 

package/src/css/popover.scss

@@ -4,15 +4,7 @@
 	@include mixins.floatable;
 
 	padding: 1rem;
-	overscroll-behavior: contain;
 	background-color: var(--oui-absolute);
+	border: none;
 	border-radius: 0.25rem;
-
-	&:focus {
-		outline: none;
-	}
-
-	* {
-		overscroll-behavior: contain;
-	}
 }

package/src/css/reset.scss

@@ -353,6 +353,14 @@
  * Attributes
  */
 
+:where([aria-busy='true' i]) {
+	cursor: progress;
+}
+
+:where([aria-controls]) {
+	cursor: pointer;
+}
+
 :where([disabled], [aria-disabled='true' i]) {
 	cursor: default;
 }
@@ -361,12 +369,16 @@
 	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/src/css/tooltip.scss

@@ -33,16 +33,18 @@
 
 	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;
 
 	&::after {
 		content: '';
-		opacity: 0;
+		display: block;
 		position: absolute;
 	}
 
@@ -52,14 +54,14 @@
 	&[oui-position^='top'] {
 		&::after {
 			width: 100%;
-			height: 0.5em;
+			height: 1em;
 		}
 	}
 
 	&[oui-position^='above'],
 	&[oui-position^='top'] {
 		&::after {
-			inset: 100% 0 0;
+			inset: calc(100% - 0.5em) 0 0;
 		}
 	}
 
@@ -75,7 +77,7 @@
 	&[oui-position^='right'],
 	&[oui-position^='start'] {
 		&::after {
-			width: 0.5em;
+			width: 1em;
 			height: 100%;
 		}
 	}
@@ -90,12 +92,12 @@
 	&[oui-position^='left'],
 	&[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/src/js/focus-trap/embedded.ts

@@ -179,6 +179,11 @@ function onTab(event: KeyboardEvent): void {
 	}
 }
 
+export function removeFocusTrap(element: HTMLElement): void {
+	FOCUSTRAPS_ALL.get(element)?.destroy();
+	FOCUSTRAPS_ALL.delete(element);
+}
+
 function setConnected(focusTrap: FocusTrap, value: boolean): void {
 	if (!focusTrap.embedded || focusTrap.connected === value) {
 		return;
@@ -262,7 +267,7 @@ export const FOCUS_TRAP_CONTAIN = `${FOCUS_TRAP_SELECTOR}-contain`;
 
 export const FOCUS_TRAP_NOESCAPE = `${FOCUS_TRAP_SELECTOR}-noescape`;
 
-export const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap> = new WeakMap();
+const FOCUSTRAPS_ALL: WeakMap<HTMLElement, FocusTrap> = new WeakMap();
 
 const FOCUSTRAPS_DISABLED: Set<FocusTrap> = new Set();
 

package/src/js/focus-trap/standalone.ts

@@ -1,9 +1,4 @@
 import {attributable} from '../internal/attributable';
-import {createFocusTrap, FOCUS_TRAP_SELECTOR, FOCUSTRAPS_ALL} from './embedded';
+import {createFocusTrap, FOCUS_TRAP_SELECTOR, removeFocusTrap} from './embedded';
 
-function removeFocusTraps(element: HTMLElement): void {
-	FOCUSTRAPS_ALL.get(element)?.destroy();
-	FOCUSTRAPS_ALL.delete(element);
-}
-
-attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTraps);
+attributable(FOCUS_TRAP_SELECTOR, createFocusTrap, removeFocusTrap);

package/src/js/index.ts

@@ -1,6 +1,7 @@
 import './focus-trap/standalone';
 import './movable';
-export * from './popover';
+import './popover';
 import './sortable';
+
 export * from './splitter';
 export * from './tooltip';