@oscarpalmer/oui 0.23.1 → 0.25.0

package/dist/js/popover.mjs

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

package/dist/js/sortable.mjs

@@ -1,6 +1,7 @@
 import { attributable } from "./internal/attributable.mjs";
 import { Draggable, addDraggable, removeDraggable } from "./internal/draggable.mjs";
 import { getPosition } from "@oscarpalmer/toretto/event";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { findAncestor, getElementFromPosition } from "@oscarpalmer/toretto/find";
 import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/sortable.ts
@@ -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 { clamp } from "@oscarpalmer/atoms/number";
 import { getPosition, on } from "@oscarpalmer/toretto/event";
+import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
+import { clamp } from "@oscarpalmer/atoms/number";
 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,36 @@
+import { n as OuiFloatable } from "./embedded-84gxpReS.mjs";
+
 //#region src/js/tooltip.d.ts
+declare class OuiTooltip {
+  #private;
+  /**
+   * Is the tooltip open?
+   */
+  get open(): boolean;
+  constructor(state: OuiTooltipState);
+  /**
+   * Closes the tooltip
+   */
+  hide(): void;
+  /**
+   * Opens the tooltip
+   */
+  show(): void;
+}
+type OuiTooltipState = {
+  anchor: HTMLElement;
+  content: HTMLElement;
+  floatable: OuiFloatable;
+  timer?: number;
+  tooltip: OuiTooltip;
+};
+declare function getTooltip(element: HTMLElement): OuiTooltip | undefined;
+/**
+ * Set the delay before showing the tooltip, in milliseconds
+ *
+ * _(Default delay is half a second, or 500 milliseconds)_
+ * @param value Delay in milliseconds
+ */
 declare function setTooltipDelay(value: number): void;
 //#endregion
-export { setTooltipDelay };
+export { type OuiTooltip, getTooltip, setTooltipDelay };

package/dist/js/tooltip.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.23.1",
+	"version": "0.25.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -74,7 +74,7 @@
 		"@oscarpalmer/toretto": "^0.46"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.69",
+		"@oxlint/plugins": "^1.70",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",

package/src/css/{tooltip.scss → floatable.scss}

@@ -1,5 +1,51 @@
 @use 'mixins.scss' as mixins;
 
+:where([oui-dialog], [oui-popover], [oui-tooltip-content]),
+:where([oui-dialog])::backdrop {
+	opacity: 0;
+	transition: 0.125s ease-in-out;
+	transition-property: opacity, scale;
+}
+
+:where([oui-dialog], [oui-popover], [oui-tooltip-content]) {
+	@include mixins.shadow-overlay;
+
+	background-color: var(--oui-absolute);
+	scale: 0.9;
+}
+
+:where([oui-dialog]:focus, [oui-popover]:focus, [oui-tooltip-content]:focus) {
+	outline: none;
+}
+
+:where(
+	[oui-dialog][oui-dialog-open],
+	[oui-popover][oui-popover-open],
+	[oui-tooltip-content][oui-tooltip-content-open]
+),
+:where([oui-dialog][oui-dialog-open])::backdrop {
+	opacity: 1;
+}
+
+:where(
+	[oui-dialog][oui-dialog-open],
+	[oui-popover][oui-popover-open],
+	[oui-tooltip-content][oui-tooltip-content-open]
+) {
+	scale: 1;
+	transition-delay: 0.125s;
+}
+
+:where([oui-popover], [oui-tooltip-content]) {
+	@include mixins.floatable;
+}
+
+:where([oui-popover]) {
+	padding: 1rem;
+	background-color: var(--oui-absolute);
+	border-radius: 0.25rem;
+}
+
 :where(
 	[oui-tooltip]:is(
 		abbr,
@@ -29,8 +75,6 @@
 }
 
 :where([oui-tooltip-content]) {
-	@include mixins.floatable;
-
 	max-width: 48ch;
 	padding: 0.75em 1em;
 	overflow: visible;
@@ -39,8 +83,6 @@
 	border-radius: 0.25rem;
 	font-size: 0.875rem;
 	pointer-events: none;
-	transition: opacity 0.125s ease-in-out 0s;
-	transition-behavior: allow-discrete;
 
 	&::after {
 		content: '';
@@ -97,7 +139,7 @@
 	}
 }
 
-:where([oui-tooltip-content][oui-tooltip-content-active]) {
+:where([oui-tooltip-content][oui-tooltip-content-open]) {
 	opacity: 1;
 	pointer-events: all;
 }

package/src/css/mixins.scss

@@ -52,8 +52,6 @@
 }
 
 @mixin floatable() {
-	@include shadow-overlay;
-
 	--margin-bottom: 0.5em;
 	--margin-left: 0.5em;
 	--margin-right: 0.5em;

package/src/css/reset.scss

@@ -121,6 +121,23 @@
 	display: list-item;
 }
 
+:where(dialog) {
+	display: none !important;
+	overscroll-behavior: contain;
+	border: none;
+	color: currentcolor;
+}
+
+:where([oui-dialog][aria-modal='true' i]) {
+	position: fixed;
+	inset: 50% auto auto 50%;
+	transform: translate3d(-50%, -50%, 0);
+}
+
+:where(dialog[open]) {
+	display: inherit !important;
+}
+
 :where(dl, ol, ul) :where(dl, ol, ul) {
 	/** Remove the margin on nested lists in Chrome, Edge, and Safari [SE] */
 	margin: 0;