@oscarpalmer/oui 0.24.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.24.0",
+	"version": "0.26.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -33,6 +33,14 @@
 			"types": "./dist/js/index.d.mts",
 			"default": "./dist/js/index.mjs"
 		},
+		"./dialog": {
+			"types": "./dist/js/dialog.d.mts",
+			"default": "./dist/js/dialog.mjs"
+		},
+		"./floatable": {
+			"types": "./dist/js/floatable/standalone.d.mts",
+			"default": "./dist/js/floatable/standalone.mjs"
+		},
 		"./focus-trap": {
 			"types": "./dist/js/focus-trap/standalone.d.mts",
 			"default": "./dist/js/focus-trap/standalone.mjs"
@@ -53,6 +61,10 @@
 			"types": "./dist/js/splitter.d.mts",
 			"default": "./dist/js/splitter.mjs"
 		},
+		"./toolbar": {
+			"types": "./dist/js/toolbar.d.mts",
+			"default": "./dist/js/toolbar.mjs"
+		},
 		"./tooltip": {
 			"types": "./dist/js/tooltip.d.mts",
 			"default": "./dist/js/tooltip.mjs"
@@ -74,7 +86,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;

package/src/js/dialog.ts

@@ -0,0 +1,188 @@
+import {on} from '@oscarpalmer/toretto/event';
+import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+import {getOnBeforeToggleListener} from './floatable/embedded';
+import {attributable} from './internal/attributable';
+
+// #region Types
+
+class OuiDialog {
+	readonly #state: OuiDialogState;
+
+	/**
+	 * Is the dialog open?
+	 */
+	get open(): boolean {
+		return this.#state.element.open;
+	}
+
+	constructor(state: OuiDialogState) {
+		this.#state = state;
+	}
+
+	/**
+	 * Closes the dialog by request
+	 */
+	hide(request: true, value?: string): void;
+
+	/**
+	 * Closes the dialog
+	 */
+	hide(value?: string): void;
+
+	hide(first?: string | boolean, second?: string): void {
+		if (!this.#state.element.open) {
+			return;
+		}
+
+		if (first === true) {
+			this.#state.element.requestClose(typeof second === 'string' ? second : undefined);
+		} else {
+			this.#state.element.close(typeof first === 'string' ? first : undefined);
+		}
+	}
+
+	/**
+	 * Opens the dialog
+	 */
+	show(modal?: boolean): void {
+		const {element} = this.#state;
+
+		if (element == null || element.open) {
+			return;
+		}
+
+		const isModal = modal !== false;
+
+		element.setAttribute(ARIA_MODAL, String(isModal));
+
+		if (isModal) {
+			element.showModal();
+		} else {
+			element.show();
+		}
+	}
+}
+
+type OuiDialogState = {
+	dialog: OuiDialog;
+	element: HTMLDialogElement;
+	listeners: RemovableEventListener[];
+	modal: boolean;
+};
+
+// #endregion
+
+// #region Functions
+
+function addDialog(element: HTMLElement): void {
+	if (!(element instanceof HTMLDialogElement)) {
+		throw new TypeError(MESSAGE);
+	}
+
+	if (!states.has(element)) {
+		states.set(element, getState(element));
+	}
+}
+
+function destroyDialog(state: OuiDialogState): void {
+	state.element.close();
+
+	state.element.setAttribute(ARIA_MODAL, String(state.modal));
+	state.element.removeAttribute(ATTRIBUTE_OPEN);
+
+	for (const listener of state.listeners) {
+		listener();
+	}
+
+	state.dialog = undefined as never;
+	state.element = undefined as never;
+	state.listeners = undefined as never;
+}
+
+/**
+ * Get the _OuiDialog_ for an element
+ *
+ * @param element Element to get _OuiDialog_ for
+ * @returns _OuiDialog_ instance
+ */
+function getDialog(element: HTMLDialogElement): OuiDialog | undefined {
+	return states.get(element)?.dialog;
+}
+
+function getState(element: HTMLDialogElement): OuiDialogState {
+	const state: OuiDialogState = {
+		element,
+		dialog: undefined as never,
+		listeners: [
+			getOnBeforeToggleListener(element),
+			on(element, EVENT_TOGGLE, event => {
+				const {source} = event;
+
+				if (element.open) {
+					const modal =
+						(source instanceof HTMLButtonElement && source.command === COMMAND_SHOW_MODAL) ||
+						element.matches(SELECTOR_MODAL);
+
+					element.setAttribute(ARIA_MODAL, String(modal));
+					element.setAttribute(ATTRIBUTE_OPEN, '');
+				} else {
+					element.removeAttribute(ATTRIBUTE_OPEN);
+					element.setAttribute(ARIA_MODAL, String(state.modal));
+				}
+			}),
+		],
+		modal: element.getAttribute(ARIA_MODAL) === TRUE,
+	};
+
+	state.dialog = new OuiDialog(state);
+
+	return state;
+}
+
+function removeDialog(element: HTMLElement): void {
+	const state = states.get(element);
+
+	if (state == null) {
+		return;
+	}
+
+	destroyDialog(state);
+
+	states.delete(element);
+}
+
+// #endregion
+
+// #region Variables
+
+const ARIA_MODAL = 'aria-modal';
+
+const ATTRIBUTE = 'oui-dialog';
+
+const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
+
+const COMMAND_SHOW_MODAL = 'show-modal';
+
+const EVENT_TOGGLE = 'toggle';
+
+const MESSAGE = 'The element must be an instance of HTMLDialogElement';
+
+const SELECTOR_MODAL = ':modal';
+
+const TRUE = 'true';
+
+const states = new WeakMap<HTMLElement, OuiDialogState>();
+
+// #endregion
+
+// #region Initialization
+
+attributable(ATTRIBUTE, addDialog, removeDialog);
+
+// #endregion
+
+// #region Exports
+
+export {getDialog, type OuiDialog};
+
+// #endregion

package/src/js/floatable/embedded.ts

@@ -0,0 +1,323 @@
+import {isPlainObject} from '@oscarpalmer/atoms/is';
+import {on} from '@oscarpalmer/toretto/event';
+import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
+
+// #region Types
+
+type CreateOuiFloatableOptions = {
+	/**
+	 * Open the _OuiFloatable_ when created? _(defaults to `true`)_
+	 */
+	open?: boolean;
+	/**
+	 * Position of the _OuiFloatable_ _(defaults to `below`)_
+	 */
+	position?: OuiFloatablePosition;
+};
+
+export class OuiFloatable {
+	#destroyed = false;
+
+	readonly #state: OuiFloatableState;
+
+	/**
+	 * Is the _OuiFloatable_ open?
+	 */
+	get open(): boolean {
+		return this.#state.content.checkVisibility();
+	}
+
+	/**
+	 * Open or close the _OuiFloatable_
+	 */
+	set open(value: boolean) {
+		if (value === true) {
+			this.show();
+		} else if (value === false) {
+			this.hide();
+		}
+	}
+
+	constructor(state: OuiFloatableState, standalone: boolean) {
+		this.#state = state;
+
+		const {anchor, content} = state;
+
+		if (standalone) {
+			content.setAttribute(ATTRIBUTE_FLOATABLE, '');
+
+			content.popover = 'manual';
+		}
+
+		const anchorName = getAnchorName(anchor);
+
+		anchor.style.anchorName = anchorName;
+		content.style.positionAnchor = anchorName;
+	}
+
+	/**
+	 * Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+	 */
+	destroy(): void {
+		if (this.#destroyed) {
+			return;
+		}
+
+		this.#destroyed = true;
+
+		removeFloatable(this.#state.content);
+
+		this.#state.anchor = null as never;
+		this.#state.content = null as never;
+	}
+
+	/**
+	 * Closes the _OuiFloatable_
+	 */
+	hide(): void {
+		if (!this.#destroyed && this.open) {
+			this.#state.content.hidePopover();
+		}
+	}
+
+	/**
+	 * Opens the _OuiFloatable_
+	 */
+	show(): void {
+		if (!this.#destroyed && !this.open) {
+			this.#state.content.showPopover();
+		}
+	}
+
+	/**
+	 * Update the position of the _OuiFloatable_, with an optional new position
+	 *
+	 * @param position Optional new position
+	 */
+	update(position?: OuiFloatablePosition): void {
+		if (!this.#destroyed) {
+			setPosition(this.#state, position);
+		}
+	}
+}
+
+export type OuiFloatableOptions = {
+	attribute?: string;
+	position: OuiFloatablePosition;
+};
+
+export type OuiFloatablePosition =
+	| 'above'
+	| 'above-end'
+	| 'above-start'
+	| 'below'
+	| 'below-end'
+	| 'below-start'
+	| 'end'
+	| 'end-bottom'
+	| 'end-top'
+	| 'start'
+	| 'start-bottom'
+	| 'start-top';
+
+type OuiFloatableState = {
+	anchor: HTMLElement;
+	content: HTMLElement;
+	options: OuiFloatableOptions;
+};
+
+// #endregion
+
+// #region Functions
+
+function getAnchorName(anchor: HTMLElement): string {
+	let {anchorName} = anchor.style;
+
+	if (anchorName.length > 0) {
+		return anchorName;
+	}
+
+	index += 1;
+
+	return `--oui-floatable-anchor-${index}`;
+}
+
+export function createEmbeddedFloatable(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: OuiFloatableOptions,
+): OuiFloatable {
+	return createInstance(anchor, content, options, false);
+}
+
+/**
+ * Create a _OuiFloatable_ for an anchor and content element
+ *
+ * @param anchor Anchor element
+ * @param content Content element
+ * @param options _OuiFloatable_ options
+ * @returns _OuiFloatable_ instance
+ */
+export function createFloatable(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options?: CreateOuiFloatableOptions,
+): OuiFloatable {
+	const {open, position} = getOptions(options);
+
+	const floatable = createInstance(
+		anchor,
+		content,
+		{
+			position,
+		},
+		true,
+	);
+
+	floatable?.update(position);
+
+	if (open) {
+		floatable?.show();
+	}
+
+	return floatable;
+}
+
+function createInstance(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: OuiFloatableOptions,
+	standalone: boolean,
+): OuiFloatable {
+	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) {
+		throw new TypeError(MESSAGE);
+	}
+
+	let floatable = instances.get(content);
+
+	if (floatable == null) {
+		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
+
+		instances.set(content, floatable);
+	}
+
+	return floatable;
+}
+
+export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener {
+	return on(
+		element,
+		EVENT_BEFORE,
+		event => {
+			const {newState, source} = event;
+
+			if (newState === STATE_OPEN && source?.getAttribute(ARIA_DISABLED) === TRUE) {
+				event.preventDefault();
+			}
+		},
+		{
+			passive: false,
+		},
+	);
+}
+
+function getOptions(input?: CreateOuiFloatableOptions): Required<CreateOuiFloatableOptions> {
+	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(
+	state: OuiFloatableState,
+	override?: OuiFloatablePosition,
+): OuiFloatablePosition {
+	if (override != null && override in AREAS) {
+		return override;
+	}
+
+	const {anchor, options} = state;
+
+	if (options.attribute == null) {
+		return options.position;
+	}
+
+	const attribute = anchor.getAttribute(options.attribute) ?? '';
+
+	return attribute in AREAS ? (attribute as OuiFloatablePosition) : options.position;
+}
+
+function getState(
+	anchor: HTMLElement,
+	content: HTMLElement,
+	options: OuiFloatableOptions,
+): OuiFloatableState {
+	const state: OuiFloatableState = {
+		anchor,
+		content,
+		options,
+	};
+
+	return state;
+}
+
+export function removeFloatable(content: HTMLElement): void {
+	instances.get(content)?.destroy();
+	instances.delete(content);
+}
+
+function setPosition(state: OuiFloatableState, override?: OuiFloatablePosition): void {
+	const position = getPosition(state, override);
+
+	const area = AREAS[position];
+
+	state.content.style.positionArea = area;
+
+	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+}
+
+// #endregion
+
+// #region Variables
+
+const AREAS: Record<OuiFloatablePosition, 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 ARIA_DISABLED = 'aria-disabled';
+
+export const ATTRIBUTE_FLOATABLE = 'oui-floatable';
+
+const ATTRIBUTE_POSITION = 'oui-position';
+
+const EVENT_BEFORE = 'beforetoggle';
+
+const MESSAGE = 'Anchor and content must be an HTMLElement or SVGElement';
+
+const POSITIONS = Object.fromEntries(
+	Object.entries(AREAS).map(([position, area]) => [area, position]),
+) as Record<string, OuiFloatablePosition>;
+
+const STATE_OPEN = 'open';
+
+const TRUE = 'true';
+
+const instances = new WeakMap<HTMLElement, OuiFloatable>();
+
+let index = 0;
+
+// #endregion

package/src/js/floatable/standalone.ts

@@ -0,0 +1 @@
+export {createFloatable, type OuiFloatable, type OuiFloatablePosition} from './embedded';