@oscarpalmer/oui 0.26.0 → 0.27.0

package/dist/css/floatable.css

@@ -86,8 +86,6 @@ var)) {
 :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/dist/css/message.css

@@ -19,6 +19,7 @@
   line-height: 1.25;
 }
 :where(.oui-message h2, .oui-message h3, .oui-message h4, .oui-message h5, .oui-message h6) {
+  color: var(--oui-foreground, var(--oui-gray-10));
   font-size: 1em;
   font-weight: bold;
 }

package/dist/css/reset.css

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

package/dist/js/dialog.d.mts

@@ -1,3 +1,4 @@
+import { h as OuiMovable } from "./draggable-zszaW1qS.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 
 //#region src/js/dialog.d.ts
@@ -7,6 +8,10 @@ declare class OuiDialog {
    * Is the dialog open?
    */
   get open(): boolean;
+  /**
+   * Open or close the dialog
+   */
+  set open(value: boolean);
   constructor(state: OuiDialogState);
   /**
    * Closes the dialog by request
@@ -26,6 +31,7 @@ type OuiDialogState = {
   element: HTMLDialogElement;
   listeners: RemovableEventListener[];
   modal: boolean;
+  movable?: OuiMovable;
 };
 /**
  * Get the _OuiDialog_ for an element

package/dist/js/dialog.mjs

@@ -1,5 +1,7 @@
-import { getOnBeforeToggleListener } from "./floatable/embedded.mjs";
+import { getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
 import { attributable } from "./internal/attributable.mjs";
+import { ATTRIBUTE_MOVABLE_HANDLE, createMovable } from "./movable/movable.embedded.mjs";
+import "./movable/movable.standalone.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 //#region src/js/dialog.ts
 var OuiDialog = class {
@@ -10,6 +12,13 @@ var OuiDialog = class {
 	get open() {
 		return this.#state.element.open;
 	}
+	/**
+	* Open or close the dialog
+	*/
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
 	constructor(state) {
 		this.#state = state;
 	}
@@ -52,6 +61,12 @@ function destroyDialog(state) {
 function getDialog(element) {
 	return states.get(element)?.dialog;
 }
+function getMovable(element) {
+	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) ?? void 0 });
+}
 function getState(element) {
 	const state = {
 		element,
@@ -62,14 +77,19 @@ function getState(element) {
 				const modal = source instanceof HTMLButtonElement && source.command === COMMAND_SHOW_MODAL || element.matches(SELECTOR_MODAL);
 				element.setAttribute(ARIA_MODAL, String(modal));
 				element.setAttribute(ATTRIBUTE_OPEN, "");
+				element.focus();
 			} else {
 				element.removeAttribute(ATTRIBUTE_OPEN);
 				element.setAttribute(ARIA_MODAL, String(state.modal));
+				element.style.inset = "";
+				element.style.position = "";
+				element.style.transform = "";
 			}
 		})],
 		modal: element.getAttribute(ARIA_MODAL) === TRUE
 	};
 	state.dialog = new OuiDialog(state);
+	state.movable = getMovable(element);
 	return state;
 }
 function removeDialog(element) {
@@ -80,10 +100,12 @@ function removeDialog(element) {
 }
 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";
 const EVENT_TOGGLE = "toggle";
 const MESSAGE = "The element must be an instance of HTMLDialogElement";
+const SELECTOR_MOVER = `[${ATTRIBUTE}-mover]`;
 const SELECTOR_MODAL = ":modal";
 const TRUE = "true";
 const states = /* @__PURE__ */ new WeakMap();

package/dist/js/draggable-zszaW1qS.d.mts

@@ -0,0 +1,155 @@
+import { StyleToggler } from "@oscarpalmer/toretto/style";
+import { EventPosition, PlainObject } from "@oscarpalmer/atoms/models";
+
+//#region src/js/movable/movable.embedded.d.ts
+declare class OuiMovable extends OuiDraggable<OuiMovableState> {
+  #private;
+  constructor(element: HTMLElement, options?: CreateOuiDraggableOptions);
+  /**
+   * Destroys the _Movable_
+   */
+  destroy(): void;
+}
+type OuiMovableState = {
+  hasHandles?: boolean;
+  moved: boolean;
+  offset?: Partial<EventPosition>;
+  style: OuiMovableStyle;
+};
+type OuiMovableStyle = {
+  inset: string;
+  position: string;
+};
+/**
+ * Creates _(or retrieves)_ a _OuiMovable_ instance for an element
+ *
+ * @param element Element to make movable
+ * @returns _OuiMovable_ instance
+ */
+declare function createMovable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiMovable;
+declare const ATTRIBUTE_MOVABLE = "oui-movable";
+declare const ATTRIBUTE_MOVABLE_HANDLE = "oui-movable-handle";
+//#endregion
+//#region src/js/sortable/sortable.embedded.d.ts
+declare class OuiSortable extends OuiDraggable<OuiSortableState> {
+  constructor(element: HTMLElement, options?: CreateOuiDraggableOptions);
+}
+type OuiSortableState = {
+  connections: string | null;
+  origin?: HTMLElement;
+};
+/**
+ * Creates _(or retrieves)_ a _OuiSortable_ instance for an element
+ *
+ * @param element Element to make sortable
+ * @returns _OuiSortable_ instance
+ */
+declare function createSortable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiSortable;
+//#endregion
+//#region src/js/internal/draggable.d.ts
+type CreateOuiDraggableOptions = {
+  /**
+   * Container to hold the draggable element and restrict its movement within. Can be `body`, `document`, `window`, a _CSS_ selector, or an element. _(If not provided, the draggable element will not have any constraints)_
+   */
+  container?: string | HTMLElement;
+  /**
+   * Direction in which the element can be dragged. _(If not provided, the element can be dragged in any direction)_
+   */
+  direction?: OuiDraggableDirection;
+};
+type OuiDraggableDirection = 'horizontal' | 'vertical' | 'x' | 'y';
+declare abstract class OuiDraggable<ExtraState extends PlainObject = PlainObject> {
+  #private;
+  get element(): HTMLElement;
+  constructor(name: keyof OuiDraggableStates, event: string, attribute: string, element: HTMLElement, options: OuiDraggableOptions<ExtraState>, extras: ExtraState);
+  destroy(): void;
+}
+type OuiDragBegin<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
+type OuiDragCancel<State extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<State>) => void;
+type OuiDragEnd<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, reset: () => void) => void;
+type OuiDragMove<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, position: OuiDragMovePosition) => PlainObject | undefined;
+type OuiDragMovePosition = {
+  calculated: EventPosition;
+  original: EventPosition;
+};
+type OuiDraggableBound<Property extends keyof OuiDraggableInstances = keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property] = OuiDraggableInstances[Property]> = {
+  constructor: new (element: HTMLElement, options?: CreateOuiDraggableOptions) => Instance;
+  property: Property;
+};
+type OuiDraggableGlobals = {
+  container?: DOMRect;
+  element?: OuiDraggableGlobalsElement;
+  instances: WeakMap<HTMLElement, OuiDraggableInstances>;
+  offset?: EventPosition;
+  original?: EventPosition;
+  states: WeakMap<HTMLElement, OuiDraggableStates>;
+};
+type OuiDraggableGlobalsElement = {
+  node: HTMLElement;
+  rectangle: DOMRect;
+};
+type OuiDraggableInstances = {
+  movable?: OuiMovable;
+  sortable?: OuiSortable;
+};
+type OuiDraggableItem<ExtraState extends PlainObject = PlainObject> = {
+  instance: OuiDraggable<ExtraState>;
+  state: OuiDraggableState & ExtraState;
+};
+type OuiDraggableOptions<ExtraState extends PlainObject = PlainObject> = {
+  container: OuiDraggableOptionsContainer<ExtraState>;
+  direction: OuiDraggableOptionsDirection<ExtraState>;
+  drag: OuiDraggableOptionsDrag<ExtraState>;
+  input?: CreateOuiDraggableOptions;
+  position: OuiDraggableOptionsPosition<ExtraState>;
+  getDragged(): HTMLElement;
+  getOrigin(): HTMLElement | undefined;
+};
+type OuiDraggableOptionsContainer<ExtraState extends PlainObject = PlainObject> = {
+  attribute: string;
+  map: Map<HTMLElement, Set<OuiDraggable>>;
+  onDestroy?: OuiDraggableOptionsContainerOnDestroy<ExtraState>;
+  onInitialize?: OuiDraggableOptionsContainerOnInitialize;
+};
+type OuiDraggableOptionsContainerOnDestroy<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>, container: HTMLElement, empty: boolean) => void;
+type OuiDraggableOptionsContainerOnInitialize<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
+type OuiDraggableOptionsDirection<ExtraState extends PlainObject = PlainObject> = {
+  attribute: string;
+  onAfter?: OuiDraggableOptionsDirectionOnAfter<ExtraState>;
+};
+type OuiDraggableOptionsDirectionOnAfter<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
+type OuiDraggableOptionsDrag<ExtraState extends PlainObject = PlainObject> = {
+  onBegin: OuiDragBegin<ExtraState>;
+  onCancel: OuiDragCancel<ExtraState>;
+  onEnd: OuiDragEnd<ExtraState>;
+  onMove: OuiDragMove<ExtraState>;
+};
+type OuiDraggableOptionsPosition<ExtraState extends PlainObject = PlainObject> = {
+  getOffset: OuiDraggableOptionsPositionGetOffset<ExtraState>;
+  getOriginal: OuiDraggableOptionsPositionGetOriginal<ExtraState>;
+};
+type OuiDraggableOptionsPositionGetOffset<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, element: HTMLElement, position: EventPosition) => EventPosition;
+type OuiDraggableOptionsPositionGetOriginal<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, position: EventPosition) => EventPosition;
+type OuiDraggableState = {
+  attribute: string;
+  container?: HTMLElement;
+  element: HTMLElement;
+  event: string;
+  hasHandles?: boolean;
+  horizontal: boolean;
+  options: OuiDraggableOptions;
+  styling: StyleToggler;
+  vertical: boolean;
+};
+type OuiDraggableStates = {
+  movable?: OuiDraggableState;
+  sortable?: OuiDraggableState;
+};
+declare function addDraggable<Property extends keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property]>(this: OuiDraggableBound<Property, Instance>, element: HTMLElement, options?: CreateOuiDraggableOptions): Instance;
+declare function getDraggableStates(element: HTMLElement): OuiDraggableStates | undefined;
+declare function removeDraggable<Property extends keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property]>(this: {
+  constructor: new (element: HTMLElement) => Instance;
+  property: Property;
+}, element: HTMLElement): void;
+//#endregion
+export { OuiDraggableGlobals as a, addDraggable as c, OuiSortable as d, createSortable as f, createMovable as g, OuiMovable as h, OuiDraggableBound as i, getDraggableStates as l, ATTRIBUTE_MOVABLE_HANDLE as m, OuiDragMovePosition as n, OuiDraggableItem as o, ATTRIBUTE_MOVABLE as p, OuiDraggable as r, OuiDraggableState as s, CreateOuiDraggableOptions as t, removeDraggable as u };

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

@@ -0,0 +1,2 @@
+import { a as OuiFloatableOptions, c as createFloatable, i as OuiFloatable, l as getOnBeforeToggleListener, n as CreateOuiFloatableOptions, o as OuiFloatablePosition, r as FLOATABLE_STATE_OPEN, s as createEmbeddedFloatable, t as ATTRIBUTE_FLOATABLE, u as removeFloatable } from "../floatable.embedded-YxGwzgbE.mjs";
+export { ATTRIBUTE_FLOATABLE, CreateOuiFloatableOptions, FLOATABLE_STATE_OPEN, OuiFloatable, OuiFloatableOptions, OuiFloatablePosition, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

package/dist/js/floatable/{embedded.mjs → floatable.embedded.mjs}

@@ -1,18 +1,18 @@
 import { on } from "@oscarpalmer/toretto/event";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-//#region src/js/floatable/embedded.ts
+//#region src/js/floatable/floatable.embedded.ts
 var OuiFloatable = class {
 	#destroyed = false;
 	#state;
 	/**
-	* Is the _OuiFloatable_ open?
+	* Is the floatable open?
 	*/
 	get open() {
 		return this.#state.content.checkVisibility();
 	}
 	/**
-	* Open or close the _OuiFloatable_
+	* Open or close the floatable
 	*/
 	set open(value) {
 		if (value === true) this.show();
@@ -25,12 +25,11 @@ var OuiFloatable = class {
 			content.setAttribute(ATTRIBUTE_FLOATABLE, "");
 			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;
 	}
 	/**
-	* Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+	* Destroy the floatable, removing it from the DOM and cleaning up references
 	*/
 	destroy() {
 		if (this.#destroyed) return;
@@ -40,19 +39,19 @@ var OuiFloatable = class {
 		this.#state.content = null;
 	}
 	/**
-	* Closes the _OuiFloatable_
+	* Closes the floatable
 	*/
 	hide() {
 		if (!this.#destroyed && this.open) this.#state.content.hidePopover();
 	}
 	/**
-	* Opens the _OuiFloatable_
+	* Opens the floatable
 	*/
 	show() {
 		if (!this.#destroyed && !this.open) this.#state.content.showPopover();
 	}
 	/**
-	* Update the position of the _OuiFloatable_, with an optional new position
+	* Update the position of the floatable, with an optional new position
 	*
 	* @param position Optional new position
 	*/
@@ -79,24 +78,27 @@ function createEmbeddedFloatable(anchor, content, options) {
 */
 function createFloatable(anchor, content, options) {
 	const { open, position } = getOptions(options);
-	const floatable = createInstance(anchor, content, { position }, true);
+	const floatable = createInstance(anchor, content, {
+		position,
+		reusable: false
+	}, true);
 	floatable?.update(position);
 	if (open) floatable?.show();
 	return floatable;
 }
 function createInstance(anchor, content, options, standalone) {
 	if (!isHTMLOrSVGElement(anchor) || !isHTMLOrSVGElement(content)) throw new TypeError(MESSAGE);
-	let floatable = instances.get(content);
+	let floatable = options.reusable ? void 0 : 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;
 }
 function getOnBeforeToggleListener(element) {
 	return on(element, EVENT_BEFORE, (event) => {
 		const { newState, source } = event;
-		if (newState === STATE_OPEN && source?.getAttribute(ARIA_DISABLED) === TRUE) event.preventDefault();
+		if (newState === "open" && source?.getAttribute(ARIA_DISABLED) === TRUE) event.preventDefault();
 	}, { passive: false });
 }
 function getOptions(input) {
@@ -117,6 +119,7 @@ function getState(anchor, content, options) {
 	return {
 		anchor,
 		content,
+		name: getAnchorName(anchor),
 		options
 	};
 }
@@ -125,7 +128,9 @@ function removeFloatable(content) {
 	instances.delete(content);
 }
 function setPosition(state, override) {
-	const area = AREAS[getPosition$1(state, override)];
+	const position = getPosition$1(state, override);
+	const area = AREAS[position];
+	state.content.style.positionAnchor = state.name;
 	state.content.style.positionArea = area;
 	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
 }
@@ -147,11 +152,11 @@ const ARIA_DISABLED = "aria-disabled";
 const ATTRIBUTE_FLOATABLE = "oui-floatable";
 const ATTRIBUTE_POSITION = "oui-position";
 const EVENT_BEFORE = "beforetoggle";
+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]));
-const STATE_OPEN = "open";
 const TRUE = "true";
 const instances = /* @__PURE__ */ new WeakMap();
 let index = 0;
 //#endregion
-export { ATTRIBUTE_FLOATABLE, OuiFloatable, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };
+export { ATTRIBUTE_FLOATABLE, FLOATABLE_STATE_OPEN, OuiFloatable, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

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

@@ -0,0 +1,2 @@
+import { c as createFloatable, i as OuiFloatable, n as CreateOuiFloatableOptions, o as OuiFloatablePosition } from "../floatable.embedded-YxGwzgbE.mjs";
+export { type CreateOuiFloatableOptions, type OuiFloatable, type OuiFloatablePosition, createFloatable };

package/dist/js/floatable/floatable.standalone.mjs

@@ -0,0 +1,2 @@
+import { createFloatable } from "./floatable.embedded.mjs";
+export { createFloatable };

package/dist/js/{embedded-ai6cqURc.d.mts → floatable.embedded-YxGwzgbE.d.mts}

@@ -1,41 +1,41 @@
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 
-//#region src/js/floatable/embedded.d.ts
+//#region src/js/floatable/floatable.embedded.d.ts
 type CreateOuiFloatableOptions = {
   /**
-   * Open the _OuiFloatable_ when created? _(defaults to `true`)_
+   * Open the floatable when created? _(defaults to `true`)_
    */
   open?: boolean;
   /**
-   * Position of the _OuiFloatable_ _(defaults to `below`)_
+   * Position of the floatable _(defaults to `below`)_
    */
   position?: OuiFloatablePosition;
 };
 declare class OuiFloatable {
   #private;
   /**
-   * Is the _OuiFloatable_ open?
+   * Is the floatable open?
    */
   get open(): boolean;
   /**
-   * Open or close the _OuiFloatable_
+   * Open or close the floatable
    */
   set open(value: boolean);
   constructor(state: OuiFloatableState, standalone: boolean);
   /**
-   * Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+   * Destroy the floatable, removing it from the DOM and cleaning up references
    */
   destroy(): void;
   /**
-   * Closes the _OuiFloatable_
+   * Closes the floatable
    */
   hide(): void;
   /**
-   * Opens the _OuiFloatable_
+   * Opens the floatable
    */
   show(): void;
   /**
-   * Update the position of the _OuiFloatable_, with an optional new position
+   * Update the position of the floatable, with an optional new position
    *
    * @param position Optional new position
    */
@@ -44,11 +44,13 @@ declare class OuiFloatable {
 type OuiFloatableOptions = {
   attribute?: string;
   position: OuiFloatablePosition;
+  reusable: boolean;
 };
 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;
+  name: string;
   options: OuiFloatableOptions;
 };
 declare function createEmbeddedFloatable(anchor: HTMLElement, content: HTMLElement, options: OuiFloatableOptions): OuiFloatable;
@@ -64,5 +66,6 @@ declare function createFloatable(anchor: HTMLElement, content: HTMLElement, opti
 declare function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener;
 declare function removeFloatable(content: HTMLElement): void;
 declare const ATTRIBUTE_FLOATABLE = "oui-floatable";
+declare const FLOATABLE_STATE_OPEN = "open";
 //#endregion
-export { createEmbeddedFloatable as a, removeFloatable as c, OuiFloatablePosition as i, OuiFloatable as n, createFloatable as o, OuiFloatableOptions as r, getOnBeforeToggleListener as s, ATTRIBUTE_FLOATABLE as t };
+export { OuiFloatableOptions as a, createFloatable as c, OuiFloatable as i, getOnBeforeToggleListener as l, CreateOuiFloatableOptions as n, OuiFloatablePosition as o, FLOATABLE_STATE_OPEN as r, createEmbeddedFloatable as s, ATTRIBUTE_FLOATABLE as t, removeFloatable as u };

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

@@ -0,0 +1,2 @@
+import { a as OuiFocusTrapOptions, i as OuiFocusTrap, n as ATTRIBUTE_FOCUSTRAP_CONTAIN, o as createFocusTrap, r as ATTRIBUTE_FOCUSTRAP_NOESCAPE, s as removeFocusTrap, t as ATTRIBUTE_FOCUSTRAP } from "../focus-trap.embedded-DR8NpZfr.mjs";
+export { ATTRIBUTE_FOCUSTRAP, ATTRIBUTE_FOCUSTRAP_CONTAIN, ATTRIBUTE_FOCUSTRAP_NOESCAPE, OuiFocusTrap, OuiFocusTrapOptions, createFocusTrap, removeFocusTrap };

package/dist/js/focus-trap/{embedded.mjs → focus-trap.embedded.mjs}

@@ -1,48 +1,49 @@
+import { attributable } from "../internal/attributable.mjs";
 import { on } from "@oscarpalmer/toretto/event";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
-//#region src/js/focus-trap/embedded.ts
+//#region src/js/focus-trap/focus-trap.embedded.ts
 var OuiFocusTrap = class {
 	#destroyed = false;
 	#tabIndex;
 	#state;
 	/**
-	* 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() {
 		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) {
 		if (value === true) this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN, "");
 		else if (value === false) this.#state.element.removeAttribute(ATTRIBUTE_FOCUSTRAP_CONTAIN);
 	}
 	/**
-	* Is the _FocusTrap_ disabled?
+	* Is the _focus trap_ disabled?
 	*/
 	get disabled() {
 		return this.#state.disabled;
 	}
 	/**
-	* Should the _FocusTrap_ be disabled?
+	* Should the _focus trap_ be disabled?
 	*/
 	set disabled(value) {
 		if (value === true) this.disable();
 		else if (value === false) this.enable();
 	}
 	/**
-	* 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() {
 		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) {
 		if (value === true) this.#state.element.setAttribute(ATTRIBUTE_FOCUSTRAP_NOESCAPE, "");
@@ -58,7 +59,7 @@ var OuiFocusTrap = class {
 		states.set(this, state);
 	}
 	/**
-	* Destroys the _FocusTrap_
+	* Destroys the _focus trap_
 	*/
 	destroy() {
 		if (this.#destroyed) return;
@@ -73,32 +74,32 @@ var OuiFocusTrap = class {
 		this.#state.element = void 0;
 	}
 	/**
-	* Disables the _FocusTrap_
+	* Disables the _focus trap_
 	*/
 	disable() {
 		if (!this.#destroyed && !(this.disabled || this.#state.options.noescape)) setDisabled(this, this.#state, true);
 	}
 	/**
-	* Enables the _FocusTrap_
+	* Enables the _focus trap_
 	*/
 	enable() {
 		if (!this.#destroyed && this.disabled) setDisabled(this, this.#state, false);
 	}
 	/**
-	* 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) {
 		if (!this.#destroyed && !this.disabled) tabToTrap(this, getFocusable(this.#state.element), this.#state.element, last ? -1 : 0);
 	}
 };
 /**
-* 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
 */
 function createFocusTrap(element, options) {
 	if (!isHTMLOrSVGElement(element)) throw new TypeError(MESSAGE);
@@ -226,6 +227,7 @@ const disabled = /* @__PURE__ */ new Set();
 const instances = /* @__PURE__ */ new WeakMap();
 const states = /* @__PURE__ */ new WeakMap();
 let lastTarget;
+attributable(ATTRIBUTE_FOCUSTRAP, createFocusTrap, removeFocusTrap);
 on(document, "focusin", onFocusIn, EVENT_OPTIONS);
 on(document, "keydown", onKeydown, EVENT_OPTIONS);
 on(document, "mousedown", onPointerdown, EVENT_OPTIONS);

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

@@ -0,0 +1,2 @@
+import { a as OuiFocusTrapOptions, i as OuiFocusTrap, o as createFocusTrap } from "../focus-trap.embedded-DR8NpZfr.mjs";
+export { type OuiFocusTrap, type OuiFocusTrapOptions, createFocusTrap };

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

@@ -0,0 +1,2 @@
+import { createFocusTrap } from "./focus-trap.embedded.mjs";
+export { createFocusTrap };