@oscarpalmer/oui 0.24.0 → 0.26.0

package/dist/css/{tooltip.css → floatable.css}

@@ -1,4 +1,62 @@
 
+: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]) {
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
+  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]) {
+  --margin-bottom: 0.5em;
+  --margin-left: 0.5em;
+  --margin-right: 0.5em;
+  --margin-top: 0.5em;
+  inset-block: var(--margin-top) var(--margin-bottom);
+  inset-inline: var(--margin-left) var(--margin-right);
+}
+:where([oui-popover], [oui-tooltip-content])[oui-position$=bottom] {
+  --margin-bottom: 0;
+}
+:where([oui-popover], [oui-tooltip-content])[oui-position$=end] {
+  --margin-right: 0;
+}
+:where([oui-popover], [oui-tooltip-content])[oui-position$=start] {
+  --margin-left: 0;
+}
+:where([oui-popover], [oui-tooltip-content])[oui-position$=top] {
+  --margin-top: 0;
+}
+
+:where([oui-popover]) {
+  padding: 1rem;
+  background-color: var(--oui-absolute);
+  border-radius: 0.25rem;
+}
+
 :where([oui-tooltip]:is(abbr,
 b,
 cite,
@@ -25,27 +83,6 @@ var)) {
   cursor: help;
 }
 
-:where([oui-tooltip-content]) {
-  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px rgba(0, 0, 0, 0.05), 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.05), 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 8px 16px -4px rgba(0, 0, 0, 0.05), 0 16px 32px -8px rgba(0, 0, 0, 0.05), 0 32px 64px -16px rgba(0, 0, 0, 0.05), 0 64px 128px -32px rgba(0, 0, 0, 0.05);
-  --margin-bottom: 0.5em;
-  --margin-left: 0.5em;
-  --margin-right: 0.5em;
-  --margin-top: 0.5em;
-  inset-block: var(--margin-top) var(--margin-bottom);
-  inset-inline: var(--margin-left) var(--margin-right);
-}
-:where([oui-tooltip-content])[oui-position$=bottom] {
-  --margin-bottom: 0;
-}
-:where([oui-tooltip-content])[oui-position$=end] {
-  --margin-right: 0;
-}
-:where([oui-tooltip-content])[oui-position$=start] {
-  --margin-left: 0;
-}
-:where([oui-tooltip-content])[oui-position$=top] {
-  --margin-top: 0;
-}
 :where([oui-tooltip-content]) {
   max-width: 48ch;
   padding: 0.75em 1em;
@@ -55,8 +92,6 @@ var)) {
   border-radius: 0.25rem;
   font-size: 0.875rem;
   pointer-events: none;
-  transition: opacity 0.125s ease-in-out 0s;
-  transition-behavior: allow-discrete;
 }
 :where([oui-tooltip-content])::after {
   content: "";
@@ -84,7 +119,7 @@ var)) {
   inset: 0 0 0 calc(100% - 0.5em);
 }
 
-:where([oui-tooltip-content][oui-tooltip-content-active]) {
+:where([oui-tooltip-content][oui-tooltip-content-open]) {
   opacity: 1;
   pointer-events: all;
 }

package/dist/css/reset.css

@@ -124,6 +124,23 @@ summary) {
   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/dist/js/dialog.d.mts

@@ -0,0 +1,38 @@
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+
+//#region src/js/dialog.d.ts
+declare class OuiDialog {
+  #private;
+  /**
+   * Is the dialog open?
+   */
+  get open(): boolean;
+  constructor(state: OuiDialogState);
+  /**
+   * Closes the dialog by request
+   */
+  hide(request: true, value?: string): void;
+  /**
+   * Closes the dialog
+   */
+  hide(value?: string): void;
+  /**
+   * Opens the dialog
+   */
+  show(modal?: boolean): void;
+}
+type OuiDialogState = {
+  dialog: OuiDialog;
+  element: HTMLDialogElement;
+  listeners: RemovableEventListener[];
+  modal: boolean;
+};
+/**
+ * Get the _OuiDialog_ for an element
+ *
+ * @param element Element to get _OuiDialog_ for
+ * @returns _OuiDialog_ instance
+ */
+declare function getDialog(element: HTMLDialogElement): OuiDialog | undefined;
+//#endregion
+export { type OuiDialog, getDialog };

package/dist/js/dialog.mjs

@@ -0,0 +1,92 @@
+import { getOnBeforeToggleListener } from "./floatable/embedded.mjs";
+import { attributable } from "./internal/attributable.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+//#region src/js/dialog.ts
+var OuiDialog = class {
+	#state;
+	/**
+	* Is the dialog open?
+	*/
+	get open() {
+		return this.#state.element.open;
+	}
+	constructor(state) {
+		this.#state = state;
+	}
+	hide(first, second) {
+		if (!this.#state.element.open) return;
+		if (first === true) this.#state.element.requestClose(typeof second === "string" ? second : void 0);
+		else this.#state.element.close(typeof first === "string" ? first : void 0);
+	}
+	/**
+	* Opens the dialog
+	*/
+	show(modal) {
+		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();
+	}
+};
+function addDialog(element) {
+	if (!(element instanceof HTMLDialogElement)) throw new TypeError(MESSAGE);
+	if (!states.has(element)) states.set(element, getState(element));
+}
+function destroyDialog(state) {
+	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 = void 0;
+	state.element = void 0;
+	state.listeners = void 0;
+}
+/**
+* Get the _OuiDialog_ for an element
+*
+* @param element Element to get _OuiDialog_ for
+* @returns _OuiDialog_ instance
+*/
+function getDialog(element) {
+	return states.get(element)?.dialog;
+}
+function getState(element) {
+	const state = {
+		element,
+		dialog: void 0,
+		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) {
+	const state = states.get(element);
+	if (state == null) return;
+	destroyDialog(state);
+	states.delete(element);
+}
+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 = /* @__PURE__ */ new WeakMap();
+attributable(ATTRIBUTE, addDialog, removeDialog);
+//#endregion
+export { getDialog };

package/dist/js/embedded-CHK82Uh5.d.mts

@@ -0,0 +1,76 @@
+//#region src/js/focus-trap/embedded.d.ts
+declare class OuiFocusTrap {
+  #private;
+  /**
+   * Is focused maintained within the _FocusTrap_ when clicking outside of it?
+   */
+  get contain(): boolean;
+  /**
+   * Should focus be maintained within the _FocusTrap_ when clicking outside of it?
+   */
+  set contain(value: boolean);
+  /**
+   * Is the _FocusTrap_ disabled?
+   */
+  get disabled(): boolean;
+  /**
+   * Should the _FocusTrap_ be disabled?
+   */
+  set disabled(value: boolean);
+  /**
+   * Is focus allowed to escape when pressing _Escape_ within the _FocusTrap_?
+   */
+  get noescape(): boolean;
+  /**
+   * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+   */
+  set noescape(value: boolean);
+  constructor(state: OuiFocusTrapState);
+  /**
+   * Destroys the _FocusTrap_
+   */
+  destroy(): void;
+  /**
+   * Disables the _FocusTrap_
+   */
+  disable(): void;
+  /**
+   * Enables the _FocusTrap_
+   */
+  enable(): void;
+  /**
+   * Focuses the _FocusTrap_
+   *
+   * @param last When `true`, focuses the last focusable element within the _FocusTrap_ instead of the first
+   */
+  focus(last: boolean): void;
+}
+type OuiFocusTrapOptions = {
+  /**
+   * Should focus be maintained within the _FocusTrap_ when clicking outside of it?
+   */
+  contain?: boolean;
+  /**
+   * Should the _FocusTrap_ allow focus to escape when pressing _Escape_?
+   */
+  noescape?: boolean;
+};
+type OuiFocusTrapState = {
+  disabled: boolean;
+  element: HTMLElement;
+  options: Required<OuiFocusTrapOptions>;
+};
+/**
+ * Creates _(or retrieves)_ a _FocusTrap_ for an element
+ *
+ * @param element Element to trap focus within
+ * @param options _FocusTrap_ options
+ * @returns _FocusTrap_ instance
+ */
+declare function createFocusTrap(element: HTMLElement, options?: OuiFocusTrapOptions): OuiFocusTrap;
+declare function removeFocusTrap(element: HTMLElement): void;
+declare const ATTRIBUTE_FOCUSTRAP = "oui-focus-trap";
+declare const ATTRIBUTE_FOCUSTRAP_CONTAIN = "oui-focus-trap-contain";
+declare const ATTRIBUTE_FOCUSTRAP_NOESCAPE = "oui-focus-trap-noescape";
+//#endregion
+export { createFocusTrap as a, OuiFocusTrap as i, ATTRIBUTE_FOCUSTRAP_CONTAIN as n, removeFocusTrap as o, ATTRIBUTE_FOCUSTRAP_NOESCAPE as r, ATTRIBUTE_FOCUSTRAP as t };

package/dist/js/embedded-ai6cqURc.d.mts

@@ -0,0 +1,68 @@
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+
+//#region src/js/floatable/embedded.d.ts
+type CreateOuiFloatableOptions = {
+  /**
+   * Open the _OuiFloatable_ when created? _(defaults to `true`)_
+   */
+  open?: boolean;
+  /**
+   * Position of the _OuiFloatable_ _(defaults to `below`)_
+   */
+  position?: OuiFloatablePosition;
+};
+declare class OuiFloatable {
+  #private;
+  /**
+   * Is the _OuiFloatable_ open?
+   */
+  get open(): boolean;
+  /**
+   * Open or close the _OuiFloatable_
+   */
+  set open(value: boolean);
+  constructor(state: OuiFloatableState, standalone: boolean);
+  /**
+   * Destroy the _OuiFloatable_, removing it from the DOM and cleaning up references
+   */
+  destroy(): void;
+  /**
+   * Closes the _OuiFloatable_
+   */
+  hide(): void;
+  /**
+   * Opens the _OuiFloatable_
+   */
+  show(): void;
+  /**
+   * Update the position of the _OuiFloatable_, with an optional new position
+   *
+   * @param position Optional new position
+   */
+  update(position?: OuiFloatablePosition): void;
+}
+type OuiFloatableOptions = {
+  attribute?: string;
+  position: OuiFloatablePosition;
+};
+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;
+};
+declare function createEmbeddedFloatable(anchor: HTMLElement, content: HTMLElement, options: OuiFloatableOptions): OuiFloatable;
+/**
+ * Create a _OuiFloatable_ for an anchor and content element
+ *
+ * @param anchor Anchor element
+ * @param content Content element
+ * @param options _OuiFloatable_ options
+ * @returns _OuiFloatable_ instance
+ */
+declare function createFloatable(anchor: HTMLElement, content: HTMLElement, options?: CreateOuiFloatableOptions): OuiFloatable;
+declare function getOnBeforeToggleListener(element: HTMLElement): RemovableEventListener;
+declare function removeFloatable(content: HTMLElement): void;
+declare const ATTRIBUTE_FLOATABLE = "oui-floatable";
+//#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 };

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

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

package/dist/js/floatable/embedded.mjs

@@ -0,0 +1,157 @@
+import { on } from "@oscarpalmer/toretto/event";
+import { isPlainObject } from "@oscarpalmer/atoms/is";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
+//#region src/js/floatable/embedded.ts
+var OuiFloatable = class {
+	#destroyed = false;
+	#state;
+	/**
+	* Is the _OuiFloatable_ open?
+	*/
+	get open() {
+		return this.#state.content.checkVisibility();
+	}
+	/**
+	* Open or close the _OuiFloatable_
+	*/
+	set open(value) {
+		if (value === true) this.show();
+		else if (value === false) this.hide();
+	}
+	constructor(state, standalone) {
+		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() {
+		if (this.#destroyed) return;
+		this.#destroyed = true;
+		removeFloatable(this.#state.content);
+		this.#state.anchor = null;
+		this.#state.content = null;
+	}
+	/**
+	* Closes the _OuiFloatable_
+	*/
+	hide() {
+		if (!this.#destroyed && this.open) this.#state.content.hidePopover();
+	}
+	/**
+	* Opens the _OuiFloatable_
+	*/
+	show() {
+		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) {
+		if (!this.#destroyed) setPosition(this.#state, position);
+	}
+};
+function getAnchorName(anchor) {
+	let { anchorName } = anchor.style;
+	if (anchorName.length > 0) return anchorName;
+	index += 1;
+	return `--oui-floatable-anchor-${index}`;
+}
+function createEmbeddedFloatable(anchor, content, options) {
+	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
+*/
+function createFloatable(anchor, content, options) {
+	const { open, position } = getOptions(options);
+	const floatable = createInstance(anchor, content, { position }, 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);
+	if (floatable == null) {
+		floatable = new OuiFloatable(getState(anchor, content, options), standalone);
+		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();
+	}, { passive: false });
+}
+function getOptions(input) {
+	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$1(state, override) {
+	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 : options.position;
+}
+function getState(anchor, content, options) {
+	return {
+		anchor,
+		content,
+		options
+	};
+}
+function removeFloatable(content) {
+	instances.get(content)?.destroy();
+	instances.delete(content);
+}
+function setPosition(state, override) {
+	const area = AREAS[getPosition$1(state, override)];
+	state.content.style.positionArea = area;
+	state.content.setAttribute(ATTRIBUTE_POSITION, POSITIONS[area]);
+}
+const AREAS = {
+	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";
+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]));
+const STATE_OPEN = "open";
+const TRUE = "true";
+const instances = /* @__PURE__ */ new WeakMap();
+let index = 0;
+//#endregion
+export { ATTRIBUTE_FLOATABLE, OuiFloatable, createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };

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

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

package/dist/js/floatable/standalone.mjs

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

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

@@ -1,26 +1,2 @@
-//#region src/js/focus-trap/embedded.d.ts
-declare class FocusTrap {
-  disabled: boolean;
-  connected: boolean;
-  element: HTMLElement;
-  embedded: boolean;
-  get contain(): boolean;
-  get noescape(): boolean;
-  constructor(element: HTMLElement, options?: Options);
-  connect(): void;
-  destroy(): void;
-  disable(): void;
-  disconnect(): void;
-  enable(): void;
-  focus(last: boolean): void;
-}
-type Options = {
-  noescape: boolean;
-};
-declare function createFocusTrap(element: HTMLElement, options?: Options): FocusTrap;
-declare function removeFocusTrap(element: HTMLElement): void;
-declare const FOCUS_TRAP_SELECTOR = "oui-focus-trap";
-declare const FOCUS_TRAP_CONTAIN = "oui-focus-trap-contain";
-declare const FOCUS_TRAP_NOESCAPE = "oui-focus-trap-noescape";
-//#endregion
-export { FOCUS_TRAP_CONTAIN, FOCUS_TRAP_NOESCAPE, FOCUS_TRAP_SELECTOR, FocusTrap, createFocusTrap, removeFocusTrap };
+import { a as createFocusTrap, i as OuiFocusTrap, n as ATTRIBUTE_FOCUSTRAP_CONTAIN, o as removeFocusTrap, r as ATTRIBUTE_FOCUSTRAP_NOESCAPE, t as ATTRIBUTE_FOCUSTRAP } from "../embedded-CHK82Uh5.mjs";
+export { ATTRIBUTE_FOCUSTRAP, ATTRIBUTE_FOCUSTRAP_CONTAIN, ATTRIBUTE_FOCUSTRAP_NOESCAPE, OuiFocusTrap, createFocusTrap, removeFocusTrap };