@oscarpalmer/oui 0.26.1 → 0.28.0

package/dist/js/tooltip.mjs

@@ -1,4 +1,4 @@
-import { createEmbeddedFloatable } from "./floatable/embedded.mjs";
+import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { isNullableOrWhitespace } from "@oscarpalmer/atoms/is";
@@ -12,7 +12,7 @@ var OuiTooltip = class {
 	* Is the tooltip open?
 	*/
 	get open() {
-		return this.#state.content.checkVisibility();
+		return this === activeTooltip && content.checkVisibility();
 	}
 	/**
 	* Open or close the tooltip
@@ -39,52 +39,50 @@ var OuiTooltip = class {
 	}
 };
 function activate(event, focus) {
-	const anchor = findAncestor(event, SELECTOR);
-	const content = findAncestor(event, SELECTOR_CONTENT);
-	if (anchor == null && content == null) {
+	const targetAnchor = findAncestor(event, SELECTOR);
+	const targetContent = findAncestor(event, SELECTOR_CONTENT);
+	if (targetAnchor == null && targetContent == null) {
 		if (!focused) {
-			closeTooltip(activeState);
+			closeTooltip(true, activeState);
 			activeState = void 0;
 			activeTooltip = void 0;
 		}
 		return;
 	}
-	const state = states.get(anchor ?? content);
+	const state = states.get(targetAnchor ?? targetContent);
 	if (state == null || state.tooltip === activeTooltip) return;
 	const shouldDelay = activeTooltip == null;
-	closeTooltip(activeState);
+	closeTooltip(false, activeState);
 	activeState = state;
 	activeTooltip = state.tooltip;
 	focused = focus;
 	state.timer = setTimeout(() => {
-		state.content.showPopover({ source: state.anchor });
+		content.innerHTML = "";
+		content.append(...state.elements);
+		state.floatable.show();
 		setTimeout(() => {
 			state.floatable.update();
-			state.content.setAttribute(ATTRIBUTE_CONTENT_OPEN, "");
 		});
 	}, shouldDelay ? delay : 0);
 }
 function addTooltip(element) {
 	if (!states.has(element)) createTooltip(element);
 }
-function closeTooltip(state) {
+function closeTooltip(clear, state) {
 	if (state == null) return;
 	if (state.timer != null) clearTimeout(state.timer);
-	state.content?.hidePopover();
-	state.content?.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+	if (clear) content?.hidePopover();
 }
 function createTooltip(anchor) {
-	const content = getContent(anchor);
-	if (content == null) return;
-	anchor.insertAdjacentElement("afterend", content);
-	states.set(anchor, getState(anchor, content));
+	const elements = getElements(anchor);
+	if (elements == null) return;
+	states.set(anchor, getState(anchor, elements));
 }
 function destroyTooltip(state) {
 	clearTimeout(state.timer);
-	state.content.remove();
 	state.floatable.destroy();
 	state.anchor = void 0;
-	state.content = void 0;
+	state.elements = void 0;
 	state.floatable = void 0;
 	state.tooltip = void 0;
 }
@@ -102,34 +100,31 @@ function findElements(attribute) {
 	}
 	return elements;
 }
-function getContent(anchor) {
-	const elements = getElements(anchor);
-	if (elements == null) return;
+function getContent() {
 	const content = createElement(CONTENT_TAGNAME, {
 		popover: "hint",
 		role: "tooltip",
 		tabIndex: -1
 	});
 	content.setAttribute(ATTRIBUTE_CONTENT, "");
-	content.append(...elements);
 	return content;
 }
 function getElements(anchor) {
 	let elements = findElements(anchor.getAttribute(ARIA_LABELLEDBY));
-	if (elements.length > 0) return elements.map((element) => element.cloneNode(true));
+	if (elements.length > 0) return elements;
 	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;
+	if (elements.length > 0) return elements;
+	let text = anchor.getAttribute(ARIA_LABEL);
+	if (isNullableOrWhitespace(text)) text = anchor.getAttribute(ARIA_DESCRIPTION);
+	if (isNullableOrWhitespace(text)) return;
 	const paragraph = document.createElement("p");
-	paragraph.textContent = content;
+	paragraph.textContent = text;
 	return [paragraph];
 }
-function getState(anchor, content) {
+function getState(anchor, elements) {
 	const state = {
 		anchor,
-		content,
+		elements,
 		floatable: createEmbeddedFloatable(anchor, content, options),
 		tooltip: null
 	};
@@ -153,7 +148,7 @@ function onFocusout() {
 	if (focusTimer != null) clearTimeout(focusTimer);
 	focusTimer = setTimeout(() => {
 		if (activeTooltip == null || document.activeElement == null || findAncestor(document.activeElement, SELECTOR) != null) return;
-		closeTooltip(activeState);
+		closeTooltip(true, activeState);
 		activeState = void 0;
 		activeTooltip = void 0;
 	});
@@ -161,6 +156,10 @@ function onFocusout() {
 function onPointermove(event) {
 	activate(event, false);
 }
+function onToggle(event) {
+	if (event.newState === "open") content.setAttribute(ATTRIBUTE_CONTENT_OPEN, "");
+	else content.removeAttribute(ATTRIBUTE_CONTENT_OPEN);
+}
 function removeTooltip(element) {
 	const state = states.get(element);
 	if (state == null) return;
@@ -187,16 +186,20 @@ const ATTRIBUTE_CONTENT = `${ATTRIBUTE}-content`;
 const ATTRIBUTE_CONTENT_OPEN = `${ATTRIBUTE_CONTENT}-open`;
 const SELECTOR = `[${ATTRIBUTE}]`;
 const SELECTOR_CONTENT = `[${ATTRIBUTE_CONTENT}]`;
+const content = getContent();
 const states = /* @__PURE__ */ new WeakMap();
 const options = {
 	attribute: `${ATTRIBUTE}-position`,
-	position: "above"
+	position: "above",
+	reusable: true
 };
 let delay = 500;
 let focused = false;
 let activeState;
 let activeTooltip;
 let focusTimer;
+document.body.append(content);
+on(content, "toggle", onToggle);
 on(document, "focusin", onFocusin);
 on(document, "focusout", onFocusout);
 on(document, "pointermove", onPointermove);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.26.1",
+	"version": "0.28.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -38,24 +38,28 @@
 			"default": "./dist/js/dialog.mjs"
 		},
 		"./floatable": {
-			"types": "./dist/js/floatable/standalone.d.mts",
-			"default": "./dist/js/floatable/standalone.mjs"
+			"types": "./dist/js/floatable/floatable.standalone.d.mts",
+			"default": "./dist/js/floatable/floatable.standalone.mjs"
 		},
 		"./focus-trap": {
-			"types": "./dist/js/focus-trap/standalone.d.mts",
-			"default": "./dist/js/focus-trap/standalone.mjs"
+			"types": "./dist/js/focus-trap/focus-trap.standalone.d.mts",
+			"default": "./dist/js/focus-trap/focus-trap.standalone.mjs"
 		},
 		"./movable": {
-			"types": "./dist/js/movable.d.mts",
-			"default": "./dist/js/movable.mjs"
+			"types": "./dist/js/movable/movable.standalone.d.mts",
+			"default": "./dist/js/movable/movable.standalone.mjs"
 		},
 		"./popover": {
 			"types": "./dist/js/popover.d.mts",
 			"default": "./dist/js/popover.mjs"
 		},
+		"./resizable": {
+			"types": "./dist/js/resizable/resizable.standalone.d.mts",
+			"default": "./dist/js/resizable/resizable.standalone.mjs"
+		},
 		"./sortable": {
-			"types": "./dist/js/sortable.d.mts",
-			"default": "./dist/js/sortable.mjs"
+			"types": "./dist/js/sortable/sortable.standalone.d.mts",
+			"default": "./dist/js/sortable/sortable.standalone.mjs"
 		},
 		"./splitter": {
 			"types": "./dist/js/splitter.d.mts",
@@ -86,7 +90,7 @@
 		"@oscarpalmer/toretto": "^0.46"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.70",
+		"@oxlint/plugins": "^1.72",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",
@@ -95,7 +99,7 @@
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
 		"sass": "^1.101",
-		"stylelint": "^17.13",
+		"stylelint": "^17.14",
 		"stylelint-config-standard-scss": "^17",
 		"tsdown": "^0.22",
 		"typescript": "^6",

package/src/css/floatable.scss

@@ -36,6 +36,15 @@
 	transition-delay: 0.125s;
 }
 
+:where([oui-dialog]) {
+	position: relative;
+}
+
+:where([oui-dialog-resizer]) {
+	position: absolute;
+	inset: auto 0 0 auto;
+}
+
 :where([oui-popover], [oui-tooltip-content]) {
 	@include mixins.floatable;
 }
@@ -77,8 +86,6 @@
 :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;

package/src/css/form.scss

@@ -173,9 +173,9 @@
 
 	:where(
 		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-				:user-invalid:not([aria-invalid='false' i]),
-				[aria-invalid='true' i]
-			)
+			:user-invalid:not([aria-invalid='false' i]),
+			[aria-invalid='true' i]
+		)
 	) {
 		@include invalid;
 
@@ -201,9 +201,9 @@
 
 	:where(
 		&.oui-validate:not([disabled], [readonly], [aria-disabled='true' i]):is(
-				:user-valid:not([aria-invalid='true' i]),
-				[aria-invalid='false' i]
-			)
+			:user-valid:not([aria-invalid='true' i]),
+			[aria-invalid='false' i]
+		)
 	) {
 		@include valid;
 

package/src/css/message.scss

@@ -24,6 +24,7 @@
 	}
 
 	:where(& h2, & h3, & h4, & h5, & h6) {
+		color: var(--oui-foreground, var(--oui-gray-10));
 		font-size: 1em;
 		font-weight: bold;
 	}

package/src/css/reset.scss

@@ -123,6 +123,7 @@
 
 :where(dialog) {
 	display: none !important;
+	overflow: visible;
 	overscroll-behavior: contain;
 	border: none;
 	color: currentcolor;

package/src/js/dialog.ts

@@ -1,7 +1,11 @@
 import {on} from '@oscarpalmer/toretto/event';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
-import {getOnBeforeToggleListener} from './floatable/embedded';
+import {getOnBeforeToggleListener} from './floatable/floatable.embedded';
 import {attributable} from './internal/attributable';
+import {ATTRIBUTE_MOVABLE_HANDLE} from './movable/movable.embedded';
+import {createMovable, type OuiMovable} from './movable/movable.standalone';
+import {createResizable, RESIZABLE_ATTRIBUTE_HANDLE} from './resizable/resizable.embedded';
+import type {OuiResizable} from './resizable/resizable.standalone';
 
 // #region Types
 
@@ -79,6 +83,8 @@ type OuiDialogState = {
 	element: HTMLDialogElement;
 	listeners: RemovableEventListener[];
 	modal: boolean;
+	movable?: OuiMovable;
+	resizable?: OuiResizable;
 };
 
 // #endregion
@@ -105,9 +111,14 @@ function destroyDialog(state: OuiDialogState): void {
 		listener();
 	}
 
+	state.movable?.destroy();
+	state.resizable?.destroy();
+
 	state.dialog = undefined as never;
 	state.element = undefined as never;
 	state.listeners = undefined as never;
+	state.movable = undefined;
+	state.resizable = undefined;
 }
 
 /**
@@ -120,6 +131,34 @@ function getDialog(element: HTMLDialogElement): OuiDialog | undefined {
 	return states.get(element)?.dialog;
 }
 
+function getMovable(element: HTMLDialogElement): OuiMovable | undefined {
+	const handles = element.querySelectorAll(SELECTOR_MOVER);
+
+	if (handles.length === 0) {
+		return;
+	}
+
+	for (const handle of handles) {
+		handle.setAttribute(ATTRIBUTE_MOVABLE_HANDLE, '');
+	}
+
+	return createMovable(element, {
+		container: element.getAttribute(ATTRIBUTE_CONTAINER) ?? undefined,
+	});
+}
+
+function getResizable(element: HTMLDialogElement): OuiResizable | undefined {
+	const handle = element.querySelector(SELECTOR_RESIZER);
+
+	if (handle == null) {
+		return;
+	}
+
+	handle.setAttribute(RESIZABLE_ATTRIBUTE_HANDLE, '');
+
+	return createResizable(element);
+}
+
 function getState(element: HTMLDialogElement): OuiDialogState {
 	const state: OuiDialogState = {
 		element,
@@ -136,9 +175,21 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 
 					element.setAttribute(ARIA_MODAL, String(modal));
 					element.setAttribute(ATTRIBUTE_OPEN, '');
+
+					element.focus();
+
+					setTimeout(() => {
+						state.resizable?.set();
+					}, 500);
 				} else {
 					element.removeAttribute(ATTRIBUTE_OPEN);
 					element.setAttribute(ARIA_MODAL, String(state.modal));
+
+					element.style.inset = '';
+					element.style.position = '';
+					element.style.transform = '';
+
+					state.resizable?.reset();
 				}
 			}),
 		],
@@ -147,6 +198,9 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 
 	state.dialog = new OuiDialog(state);
 
+	state.movable = getMovable(element);
+	state.resizable = getResizable(element);
+
 	return state;
 }
 
@@ -170,6 +224,8 @@ const ARIA_MODAL = 'aria-modal';
 
 const ATTRIBUTE = 'oui-dialog';
 
+const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
+
 const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
 
 const COMMAND_SHOW_MODAL = 'show-modal';
@@ -178,8 +234,12 @@ const EVENT_TOGGLE = 'toggle';
 
 const MESSAGE = 'The element must be an instance of HTMLDialogElement';
 
+const SELECTOR_MOVER = `[${ATTRIBUTE}-mover]`;
+
 const SELECTOR_MODAL = ':modal';
 
+const SELECTOR_RESIZER = `[${ATTRIBUTE}-resizer]`;
+
 const TRUE = 'true';
 
 const states = new WeakMap<HTMLElement, OuiDialogState>();

package/src/js/floatable/{embedded.ts → floatable.embedded.ts}

@@ -5,7 +5,7 @@ import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
 
 // #region Types
 
-type CreateOuiFloatableOptions = {
+export type CreateOuiFloatableOptions = {
 	/**
 	 * Open the floatable when created? _(defaults to `true`)_
 	 */
@@ -50,10 +50,8 @@ export class OuiFloatable {
 			content.popover = 'manual';
 		}
 
-		const anchorName = getAnchorName(anchor);
-
-		anchor.style.anchorName = anchorName;
-		content.style.positionAnchor = anchorName;
+		anchor.style.anchorName = state.name;
+		content.style.positionAnchor = state.name;
 	}
 
 	/**
@@ -105,6 +103,7 @@ export class OuiFloatable {
 export type OuiFloatableOptions = {
 	attribute?: string;
 	position: OuiFloatablePosition;
+	reusable: boolean;
 };
 
 export type OuiFloatablePosition =
@@ -124,6 +123,7 @@ export type OuiFloatablePosition =
 type OuiFloatableState = {
 	anchor: HTMLElement;
 	content: HTMLElement;
+	name: string;
 	options: OuiFloatableOptions;
 };
 
@@ -171,6 +171,7 @@ export function createFloatable(
 		content,
 		{
 			position,
+			reusable: false,
 		},
 		true,
 	);
@@ -194,12 +195,14 @@ function createInstance(
 		throw new TypeError(MESSAGE);
 	}
 
-	let floatable = instances.get(content);
+	let floatable = options.reusable ? undefined : instances.get(content);
 
 	if (floatable == null) {
 		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
 
-		instances.set(content, floatable);
+		if (!options.reusable) {
+			instances.set(content, floatable);
+		}
 	}
 
 	return floatable;
@@ -212,7 +215,7 @@ export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventL
 		event => {
 			const {newState, source} = event;
 
-			if (newState === STATE_OPEN && source?.getAttribute(ARIA_DISABLED) === TRUE) {
+			if (newState === FLOATABLE_STATE_OPEN && source?.getAttribute(ARIA_DISABLED) === TRUE) {
 				event.preventDefault();
 			}
 		},
@@ -255,9 +258,12 @@ function getState(
 	content: HTMLElement,
 	options: OuiFloatableOptions,
 ): OuiFloatableState {
+	const name = getAnchorName(anchor);
+
 	const state: OuiFloatableState = {
 		anchor,
 		content,
+		name,
 		options,
 	};
 
@@ -266,6 +272,7 @@ function getState(
 
 export function removeFloatable(content: HTMLElement): void {
 	instances.get(content)?.destroy();
+
 	instances.delete(content);
 }
 
@@ -274,6 +281,7 @@ function setPosition(state: OuiFloatableState, override?: OuiFloatablePosition):
 
 	const area = AREAS[position];
 
+	state.content.style.positionAnchor = state.name;
 	state.content.style.positionArea = area;
 
 	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
@@ -306,14 +314,14 @@ const ATTRIBUTE_POSITION = 'oui-position';
 
 const EVENT_BEFORE = 'beforetoggle';
 
+export const FLOATABLE_STATE_OPEN = 'open';
+
 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>();

package/src/js/floatable/floatable.standalone.ts

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

package/src/js/focus-trap/{embedded.ts → focus-trap.embedded.ts}

@@ -4,6 +4,7 @@ import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {getFocusable} from '@oscarpalmer/toretto/focusable';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {attributable} from '../internal/attributable';
 
 // #region Types
 
@@ -14,14 +15,14 @@ export class OuiFocusTrap {
 	readonly #state: OuiFocusTrapState;
 
 	/**
-	 * Is focused maintained within the _FocusTrap_ when clicking outside of it?
+	 * Is focused maintained within the _focus trap_ when clicking outside of it?
 	 */
 	get contain(): boolean {
 		return this.#state.element.hasAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
 	}
 
 	/**
-	 * Should focus be maintained within the _FocusTrap_ when clicking outside of it?
+	 * Should focus be maintained within the _focus trap_ when clicking outside of it?
 	 */
 	set contain(value: boolean) {
 		if (value === true) {
@@ -32,14 +33,14 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Is the _FocusTrap_ disabled?
+	 * Is the _focus trap_ disabled?
 	 */
 	get disabled(): boolean {
 		return this.#state.disabled;
 	}
 
 	/**
-	 * Should the _FocusTrap_ be disabled?
+	 * Should the _focus trap_ be disabled?
 	 */
 	set disabled(value: boolean) {
 		if (value === true) {
@@ -50,14 +51,14 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Is focus allowed to escape when pressing _Escape_ within the _FocusTrap_?
+	 * Is focus allowed to escape when pressing _Escape_ within the _focus trap_?
 	 */
 	get noescape(): boolean {
 		return this.#state.element.hasAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE);
 	}
 
 	/**
-	 * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+	 * Should the _focus trap_ allow focus to escape when pressing _Escape_?
 	 */
 	set noescape(value: boolean) {
 		if (value === true) {
@@ -82,7 +83,7 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Destroys the _FocusTrap_
+	 * Destroys the _focus trap_
 	 */
 	destroy(): void {
 		if (this.#destroyed) {
@@ -105,7 +106,7 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Disables the _FocusTrap_
+	 * Disables the _focus trap_
 	 */
 	disable(): void {
 		if (!this.#destroyed && !(this.disabled || this.#state.options.noescape)) {
@@ -114,7 +115,7 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Enables the _FocusTrap_
+	 * Enables the _focus trap_
 	 */
 	enable(): void {
 		if (!this.#destroyed && this.disabled) {
@@ -123,9 +124,9 @@ export class OuiFocusTrap {
 	}
 
 	/**
-	 * Focuses the _FocusTrap_
+	 * Focuses the _focus trap_
 	 *
-	 * @param last When `true`, focuses the last focusable element within the _FocusTrap_ instead of the first
+	 * @param last When `true`, focuses the last focusable element within the _focus trap_ instead of the first
 	 */
 	focus(last: boolean): void {
 		if (!this.#destroyed && !this.disabled) {
@@ -134,13 +135,13 @@ export class OuiFocusTrap {
 	}
 }
 
-type OuiFocusTrapOptions = {
+export type OuiFocusTrapOptions = {
 	/**
-	 * Should focus be maintained within the _FocusTrap_ when clicking outside of it?
+	 * Should focus be maintained within the _focus trap_ when clicking outside of it?
 	 */
 	contain?: boolean;
 	/**
-	 * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+	 * Should the _focus trap_ allow focus to escape when pressing _Escape_?
 	 */
 	noescape?: boolean;
 };
@@ -156,11 +157,11 @@ type OuiFocusTrapState = {
 // #region Functions
 
 /**
- * Creates _(or retrieves)_ a _FocusTrap_ for an element
+ * Creates _(or retrieves)_ a _focus trap_ for an element
  *
  * @param element Element to trap focus within
- * @param options _FocusTrap_ options
- * @returns _FocusTrap_ instance
+ * @param options _Focus trap_ options
+ * @returns _Focus trap_ instance
  */
 export function createFocusTrap(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrap {
 	if (!isHTMLOrSVGElement(element)) {
@@ -399,6 +400,8 @@ let lastTarget: HTMLElement | undefined;
 
 // #region Initialization
 
+attributable(ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap);
+
 on(document, 'focusin', onFocusIn, EVENT_OPTIONS);
 on(document, 'keydown', onKeydown, EVENT_OPTIONS);
 on(document, 'mousedown', onPointerdown, EVENT_OPTIONS);

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

@@ -0,0 +1 @@
+export {createFocusTrap, type OuiFocusTrap, type OuiFocusTrapOptions} from './focus-trap.embedded';