@oscarpalmer/oui 0.39.0 → 0.41.0

package/dist/js/{state.combobox-BWDFHwoi.mjs → combobox.state-AstCICiH.mjs}

@@ -1,20 +1,20 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
-import { getLocalizations, updateLocalizations } from "./l10n.mjs";
+import { createDefaultLocalizations, createLocalizations } from "./internal/l10n/index.mjs";
 import { getAttributeValue, getBooleanAriaValue } from "./internal/misc.mjs";
-import { LISTBOX_KEYS_ACTIVATION, LISTBOX_TYPES } from "./internal/listbox/listbox.constants.mjs";
-import { b as updateListboxValueLabel, i as filterListboxOptions, n as filterListbox, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-DQ7-x2uY.mjs";
-import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
-import { COMBOBOX_ATTRIBUTES, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_MESSAGES, COMBOBOX_SELECTORS, COMBOBOX_TAGNAME } from "./combobox/constants.combobox.mjs";
-import { createComboboxAnchor, createComboboxContent, updateComboboxAutocomplete, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices } from "./combobox/dom.combobox.mjs";
-import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
+import { OPTION_LIST_KEYS_ACTIVATION, OPTION_LIST_TYPES } from "./internal/option-list/option-list.constants.mjs";
+import { i as filterOptionListOptions, n as filterOptionList, o as setOptionListValues, r as filterOptionListOption, s as toggleOptionListOption, t as applyOptionListSelection, x as generateOptionListIds, y as updateOptionListPreview } from "./option-list.data-CgMyUwPc.mjs";
+import { initializeOptionListState } from "./internal/option-list/option-list.state.mjs";
+import { COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_SYMBOL, COMBOBOX_TAGNAME, comboboxAttributes, comboboxMessages, comboboxSelectors } from "./combobox/combobox.constants.mjs";
+import { createComboboxAnchor, createComboboxContent, updateComboboxAutocomplete, updateComboboxSelection, updateComboboxTabindices } from "./combobox/combobox.dom.mjs";
+import { processOptionListKeydown } from "./internal/option-list/option-list.event.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { noop } from "@oscarpalmer/atoms/function";
-import { findAncestor, getData } from "@oscarpalmer/toretto";
-import { getData as getData$1 } from "@oscarpalmer/toretto/data";
-//#region src/js/combobox/misc.combobox.ts
+import { getData } from "@oscarpalmer/toretto/data";
+//#region src/js/combobox/combobox.misc.ts
 function getComboboxAutoComplete(element, select) {
 	let value;
 	if (select) value = "list";
@@ -35,86 +35,82 @@ function hasTextSelection(element) {
 	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
 }
 function setComboboxLocalizations(first, second) {
-	updateComboboxLocalizations(comboboxLocalizations, comboboxLocalizations.values, first, second);
-}
-function updateComboboxLocalizations(instance, destination, first, second) {
-	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
-		for (const state of comboboxStates.set) {
-			updateListboxMessage(state);
-			updateListboxValueLabel(state);
-			updateComboboxSelectionItems(state);
-		}
-	});
+	if (second === true) comboboxLocalizations.setDefaults(first);
+	else comboboxLocalizations.setLanguages(first, second);
 }
 let index = 0;
 //#endregion
-//#region src/js/combobox/event.combobox.ts
+//#region src/js/combobox/combobox.event.ts
 function onComboboxActivation(state) {
-	state.floatable.show();
+	state.component.floatable.show();
 }
 function onComboboxApply(state, option, _, added, selected) {
 	updateComboboxSelection(state, option, added, selected);
 }
 function onComboboxClickContent(event, state) {
 	if (state == null) return;
-	if (state.disabled) return;
-	const option = findAncestor(event, COMBOBOX_SELECTORS.option);
-	if (!(option instanceof HTMLElement)) state.filter.element.focus();
-	else if (state.readonly) onComboboxPreview("set", state, option);
-	else toggleListboxOption(state, option);
+	const { disabled, filter, readonly } = state.component;
+	if (disabled) return;
+	const option = findAncestor(event, comboboxSelectors.option);
+	if (!(option instanceof HTMLElement)) filter.element.focus();
+	else if (readonly) onComboboxPreview("set", state, option);
+	else toggleOptionListOption(state, option);
 }
 function onComboboxClickDocument(event) {
 	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
-	const state = comboboxStates.map.get(combobox);
+	const state = combobox?.[COMBOBOX_SYMBOL];
 	if (combobox == null || state == null) return;
-	if (findAncestor(event, COMBOBOX_SELECTORS.content) != null) {
+	if (findAncestor(event, comboboxSelectors.content) != null) {
 		onComboboxClickContent(event, state);
 		return;
 	}
+	const { disabled, floatable, options, readonly } = state.component;
 	const label = findAncestor(event, "label");
 	if (label != null) {
-		if (label === state.label.element && combobox.type === "select") {
-			state.anchor.element.focus();
-			if (!state.disabled) state.floatable.show();
+		if (label === state.component.label.element && combobox.type === "select") {
+			state.component.anchor.element.focus();
+			if (!disabled) floatable.show();
 		}
 		return;
 	}
 	const selection = findAncestor(event, `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`);
 	if (selection != null) {
-		const option = state.options.selected.find((option) => option.id === getData(selection, "option", false));
-		if (state.disabled) state.anchor.element.focus();
-		else if (state.readonly) updateComboboxTabindices(state, option);
-		else toggleListboxOption(state, option);
+		const option = options.selected.find((option) => option.id === getData(selection, "option", false));
+		if (disabled) state.component.anchor.element.focus();
+		else if (readonly) updateComboboxTabindices(state, option);
+		else toggleOptionListOption(state, option);
 		return;
 	}
-	if (findAncestor(event, COMBOBOX_SELECTORS.anchor) != null && !state.disabled) {
-		state.floatable.show();
+	if (findAncestor(event, comboboxSelectors.anchor) != null && !disabled) {
+		floatable.show();
 		return;
 	}
 }
 function onComboboxEnter(state) {
-	if (state.disabled || state.readonly) return;
-	if (hasTextSelection(state.anchor.element)) onComboboxSelection(state, true);
-	else toggleListboxOption(state, state.active);
+	const { active, anchor, disabled, readonly } = state.component;
+	if (disabled || readonly) return;
+	if (hasTextSelection(anchor.element)) onComboboxSelection(state, true);
+	else toggleOptionListOption(state, active);
 }
 function onComboboxEscape(state) {
-	state.floatable.hide();
+	state.component.floatable.hide();
 }
 function onComboboxFilter(preview, state, update, active, emit) {
-	if (state.autocomplete.none) applyListboxSelection({
+	if (state.component.autocomplete.none) applyOptionListSelection({
 		state,
 		added: false,
 		emit: (emit ?? true) && update
 	});
-	else updateListboxPreview(preview, state, active);
+	else updateOptionListPreview(preview, state, active);
 }
 function onComboboxFocusout(event) {
 	setTimeout(() => {
 		const combobox = findAncestor(event, COMBOBOX_TAGNAME);
-		const state = comboboxStates.map.get(combobox);
-		if (combobox == null || state == null || state.disabled || state.readonly || state.type === "select" || state.host === document.activeElement || state.host.contains(document.activeElement)) return;
-		const option = filterListboxOption(state, state.filter.element.value, true);
-		applyListboxSelection({
+		const state = combobox?.[COMBOBOX_SYMBOL];
+		const component = state?.component;
+		if (combobox == null || state == null || component == null || component.disabled || component.readonly || component.type === "select" || component.host === document.activeElement || component.host.contains(document.activeElement)) return;
+		const option = filterOptionListOption(state, component.filter.element.value, true);
+		applyOptionListSelection({
 			option,
 			state,
 			added: false,
@@ -124,31 +120,32 @@ function onComboboxFocusout(event) {
 }
 function onComboboxInput(event) {
 	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
-	const state = comboboxStates.map.get(combobox);
-	if (combobox != null && state != null && event.target === state.filter.element) filterListbox(event.inputType, state);
+	const state = combobox?.[COMBOBOX_SYMBOL];
+	if (combobox != null && state != null && event.target === state.component.filter.element) filterOptionList(event.inputType, state);
 }
 function onComboboxKeydown(event) {
 	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
-	const state = comboboxStates.map.get(combobox);
+	const state = combobox?.[COMBOBOX_SYMBOL];
 	if (combobox == null || state == null) return;
-	const item = findAncestor(event, COMBOBOX_SELECTORS.selectionItem);
+	const item = findAncestor(event, comboboxSelectors.selectionItem);
 	if (item instanceof HTMLElement) onComboboxKeydownSelection(event, state, item);
-	else processListboxKeydown(event, state);
+	else processOptionListKeydown(event, state);
 }
 function onComboboxKeydownSelection(event, state, item) {
-	if (LISTBOX_KEYS_ACTIVATION.has(event.key)) {
+	if (OPTION_LIST_KEYS_ACTIVATION.has(event.key)) {
 		event.preventDefault();
 		onComboboxRemoveSelection(state, item);
 		return;
 	}
-	if (state.disabled || state.selection == null) return;
-	const { length } = state.selection.items;
-	const index = state.selection.items.findIndex((selection) => selection.button === item);
+	const { anchor, disabled, selection } = state.component;
+	if (disabled || selection == null) return;
+	const { length } = selection.items;
+	const index = selection.items.findIndex((selected) => selected.button === item);
 	let next;
 	switch (event.key) {
 		case "ArrowDown":
-			state.anchor.element.focus();
-			state.anchor.element.click();
+			anchor.element.focus();
+			anchor.element.click();
 			return;
 		case "ArrowRight":
 		case "ArrowLeft":
@@ -162,7 +159,7 @@ function onComboboxKeydownSelection(event, state, item) {
 	if (next == null) return;
 	event.preventDefault();
 	for (let index = 0; index < length; index += 1) {
-		const { button } = state.selection.items[index];
+		const { button } = selection.items[index];
 		const selected = index === next;
 		button.tabIndex = selected ? 0 : -1;
 		if (selected) button.focus();
@@ -172,33 +169,36 @@ function onComboboxPreview(preview, state, active) {
 	updateComboboxAutocomplete(preview, state, active);
 }
 function onComboboxRemoveSelection(state, item) {
-	if (state.disabled || state.readonly) return;
-	const option = state.options.selected.find((option) => option.id === getData(item, "option", false));
-	if (option != null) toggleListboxOption(state, option);
+	const { disabled, options, readonly } = state.component;
+	if (disabled || readonly) return;
+	const option = options.selected.find((option) => option.id === getData(item, "option", false));
+	if (option != null) toggleOptionListOption(state, option);
 }
 function onComboboxNavigation(preview, state, active) {
-	updateListboxPreview(preview, state, active);
+	updateOptionListPreview(preview, state, active);
 }
 function onComboboxSelection(state, hasSelection) {
-	if (!(hasSelection ?? hasTextSelection(state.anchor.element))) return;
-	state.filter.value = state.anchor.element === state.filter.element ? state.filter.element.value : "";
-	toggleListboxOption(state, filterListboxOptions(state) ?? state.active);
+	const { active, anchor, filter } = state.component;
+	if (!(hasSelection ?? hasTextSelection(anchor.element))) return;
+	filter.value = anchor.element === filter.element ? filter.element.value : "";
+	toggleOptionListOption(state, filterOptionListOptions(state) ?? active);
 }
 function onComboboxTab(state) {
 	setTimeout(() => {
-		if (state.host === document.activeElement) return;
-		if (state.selection?.container.contains(document.activeElement) || !state.host.contains(document.activeElement)) state.floatable.hide();
+		const { floatable, host, selection } = state.component;
+		if (host === document.activeElement) return;
+		if (selection?.container.contains(document.activeElement) || !host.contains(document.activeElement)) floatable.hide();
 	});
 }
 function onComboboxToggle(state) {
-	if (!state.multiple) state.floatable.hide();
+	if (!state.component.multiple) state.component.floatable.hide();
 }
 function preventComboboxActivation(state) {
-	return state.floatable.open;
+	return state.component.floatable.open;
 }
 function skipComboboxNavigation(state) {
-	if (state.floatable.open) return false;
-	state.floatable.show();
+	if (state.component.floatable.open) return false;
+	state.component.floatable.show();
 	return true;
 }
 on(document, "click", onComboboxClickDocument);
@@ -206,19 +206,19 @@ on(document, "focusout", onComboboxFocusout);
 on(document, "input", onComboboxInput, { passive: false });
 on(document, "keydown", onComboboxKeydown, { passive: false });
 //#endregion
-//#region src/js/combobox/state.combobox.ts
-function createComboboxState(element, internals) {
+//#region src/js/combobox/combobox.state.ts
+function createComponentState(element, state) {
 	const select = element.querySelector("select");
-	if (select == null || select.id === "") throw new Error(COMBOBOX_MESSAGES.select);
+	if (!(select instanceof HTMLSelectElement) || select.id === "") throw new Error(comboboxMessages.select);
 	const label = element.querySelector(`label[for="${select.id}"]`);
-	if (label == null) throw new Error(COMBOBOX_MESSAGES.label);
+	if (!(label instanceof HTMLLabelElement)) throw new Error(comboboxMessages.label);
 	element.id = select.id;
 	const disabled = getBooleanAriaValue(element, "disabled") || select.disabled;
 	const multiple = element.multiple || select.multiple;
 	const readonly = getBooleanAriaValue(element, "readonly");
 	const required = getBooleanAriaValue(element, "required") || select.required;
 	const id = getComboboxId();
-	const type = multiple ? "select" : getAttributeValue(element, "type", LISTBOX_TYPES, "select");
+	const type = multiple ? "select" : getAttributeValue(element, "type", OPTION_LIST_TYPES, "select");
 	const autocomplete = getComboboxAutoComplete(element, type === "select");
 	setAttributes(element, {
 		autocomplete: autocomplete.value,
@@ -227,7 +227,7 @@ function createComboboxState(element, internals) {
 	const labelId = label.id;
 	label.htmlFor = id;
 	label.id = `${id}_label`;
-	generateListboxIds(id, select);
+	generateOptionListIds(id, select);
 	const parameters = {
 		autocomplete,
 		element,
@@ -236,18 +236,17 @@ function createComboboxState(element, internals) {
 		multiple,
 		select,
 		type,
-		attributes: COMBOBOX_ATTRIBUTES,
+		attributes: comboboxAttributes,
 		listbox: false
 	};
 	const anchor = createComboboxAnchor(parameters);
 	const content = createComboboxContent(parameters);
 	const { selected } = content.list.options;
-	const values = selected.length === 0 ? [""] : selected.map((option) => getData$1(option, "value", false) ?? "");
-	const state = {
+	const values = selected.length === 0 ? [""] : selected.map((option) => getData(option, "value", false) ?? "");
+	state.component = {
 		autocomplete,
 		disabled,
 		id,
-		internals,
 		multiple,
 		readonly,
 		required,
@@ -258,7 +257,7 @@ function createComboboxState(element, internals) {
 			container: anchor.container,
 			element: anchor.element
 		},
-		attributes: COMBOBOX_ATTRIBUTES,
+		attributes: comboboxAttributes,
 		callbacks: comboboxCallbacks,
 		content: content.element,
 		elements: [
@@ -280,10 +279,7 @@ function createComboboxState(element, internals) {
 		list: content.list.element,
 		listbox: false,
 		listeners: [],
-		localizations: {
-			component: {},
-			global: comboboxLocalizations
-		},
+		localizations: createLocalizations(comboboxLocalizations),
 		message: content.message,
 		name: element.name,
 		options: {
@@ -297,34 +293,44 @@ function createComboboxState(element, internals) {
 			label: content.value
 		}
 	};
-	return initializeListboxState(state, comboboxStates, onAttachCombobox);
+	return initializeOptionListState(state, comboboxes, onAttachCombobox);
+}
+function initializeCombobox(element, state) {
+	element.tabIndex = -1;
+	createComponentState(element, state);
+	if (state.form.restored != null) {
+		setOptionListValues(state, state.form.restored);
+		state.form.restored = void 0;
+	}
 }
 function onAttachCombobox(state) {
-	const { anchor, content, filter, select } = state;
+	const { component } = state;
+	const { anchor, content, filter, listeners, select } = component;
 	select.hidden = true;
 	select.insertAdjacentElement("afterend", anchor.container ?? anchor.element);
 	(anchor.container ?? anchor.element).insertAdjacentElement("afterend", content);
 	select.remove();
-	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
+	const floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
 		position: "below-start",
 		reusable: false
 	});
-	state.floatable.update();
-	state.listeners.push(on(content, "toggle", () => {
-		setAria(anchor.element, "expanded", state.floatable.open);
-		setAria(filter.element, "activedescendant", state.floatable.open ? state.active?.id : void 0);
-		if (state.floatable.open) filter.element.focus();
+	floatable.update();
+	listeners.push(on(content, "toggle", () => {
+		setAria(anchor.element, "expanded", floatable.open);
+		setAria(filter.element, "activedescendant", floatable.open ? component.active?.id : void 0);
+		if (floatable.open) filter.element.focus();
 	}));
+	component.floatable = floatable;
 }
 function onDetachCombobox(state) {
-	const { content, floatable, label, select } = state;
+	const { content, floatable, label, select } = state.component;
 	floatable.destroy();
-	const anchor = state.anchor.container ?? state.anchor.element;
+	const anchor = state.component.anchor.container ?? state.component.anchor.element;
 	anchor.insertAdjacentElement("beforebegin", select);
 	anchor.remove();
 	content.remove();
 	label.element.htmlFor = select.id;
-	label.element.id = state.label.id;
+	label.element.id = state.component.label.id;
 	select.hidden = false;
 }
 const comboboxCallbacks = {
@@ -347,7 +353,7 @@ const comboboxCallbacks = {
 		skipNavigation: skipComboboxNavigation
 	}
 };
-const comboboxLocalizations = getLocalizations({
+const comboboxLocalizations = createDefaultLocalizations({
 	empty: "No results found",
 	input: "Please enter a value",
 	invalid: "Please select an option from the list",
@@ -357,9 +363,6 @@ const comboboxLocalizations = getLocalizations({
 	results: (amount) => `${amount} results available`,
 	selected: (amount) => `${amount} selected`
 });
-const comboboxStates = {
-	map: /* @__PURE__ */ new WeakMap(),
-	set: /* @__PURE__ */ new Set()
-};
+const comboboxes = /* @__PURE__ */ new Set();
 //#endregion
-export { skipComboboxNavigation as C, setComboboxLocalizations as D, hasTextSelection as E, updateComboboxLocalizations as O, preventComboboxActivation as S, getComboboxId as T, onComboboxPreview as _, onDetachCombobox as a, onComboboxTab as b, onComboboxClickContent as c, onComboboxFilter as d, onComboboxFocusout as f, onComboboxNavigation as g, onComboboxKeydownSelection as h, onAttachCombobox as i, onComboboxEnter as l, onComboboxKeydown as m, comboboxStates as n, onComboboxActivation as o, onComboboxInput as p, createComboboxState as r, onComboboxApply as s, comboboxLocalizations as t, onComboboxEscape as u, onComboboxRemoveSelection as v, getComboboxAutoComplete as w, onComboboxToggle as x, onComboboxSelection as y };
+export { skipComboboxNavigation as C, setComboboxLocalizations as D, hasTextSelection as E, preventComboboxActivation as S, getComboboxId as T, onComboboxPreview as _, onDetachCombobox as a, onComboboxTab as b, onComboboxClickContent as c, onComboboxFilter as d, onComboboxFocusout as f, onComboboxNavigation as g, onComboboxKeydownSelection as h, onAttachCombobox as i, onComboboxEnter as l, onComboboxKeydown as m, comboboxes as n, onComboboxActivation as o, onComboboxInput as p, initializeCombobox as r, onComboboxApply as s, comboboxLocalizations as t, onComboboxEscape as u, onComboboxRemoveSelection as v, getComboboxAutoComplete as w, onComboboxToggle as x, onComboboxSelection as y };

package/dist/js/dialog/dialog.model.d.mts

@@ -0,0 +1,2 @@
+import { a as DIALOG_SELECTOR_MOVER, c as OuiDialog, i as DIALOG_MESSAGE, l as OuiDialogState, n as DIALOG_ATTRIBUTE_CONTAINER, o as DIALOG_SELECTOR_RESIZER, r as DIALOG_ATTRIBUTE_OPEN, s as DIALOG_SYMBOL, t as DIALOG_ATTRIBUTE, u as dialogs } from "../dialog.model-HVzYWoDo.mjs";
+export { DIALOG_ATTRIBUTE, DIALOG_ATTRIBUTE_CONTAINER, DIALOG_ATTRIBUTE_OPEN, DIALOG_MESSAGE, DIALOG_SELECTOR_MOVER, DIALOG_SELECTOR_RESIZER, DIALOG_SYMBOL, OuiDialog, OuiDialogState, dialogs };

package/dist/js/dialog/dialog.model.mjs

@@ -0,0 +1,11 @@
+//#region src/js/dialog/dialog.model.ts
+const DIALOG_ATTRIBUTE = "oui-dialog";
+const DIALOG_ATTRIBUTE_CONTAINER = `${DIALOG_ATTRIBUTE}-container`;
+const DIALOG_ATTRIBUTE_OPEN = `${DIALOG_ATTRIBUTE}-open`;
+const DIALOG_MESSAGE = "The element must be an instance of HTMLDialogElement";
+const DIALOG_SELECTOR_MOVER = `[${DIALOG_ATTRIBUTE}-mover]`;
+const DIALOG_SELECTOR_RESIZER = `[${DIALOG_ATTRIBUTE}-resizer]`;
+const DIALOG_SYMBOL = Symbol(DIALOG_ATTRIBUTE);
+const dialogs = /* @__PURE__ */ new WeakMap();
+//#endregion
+export { DIALOG_ATTRIBUTE, DIALOG_ATTRIBUTE_CONTAINER, DIALOG_ATTRIBUTE_OPEN, DIALOG_MESSAGE, DIALOG_SELECTOR_MOVER, DIALOG_SELECTOR_RESIZER, DIALOG_SYMBOL, dialogs };

package/dist/js/dialog/index.d.mts

@@ -0,0 +1,12 @@
+import { c as OuiDialog, l as OuiDialogState } from "../dialog.model-HVzYWoDo.mjs";
+//#region src/js/dialog/index.d.ts
+declare function OuiDialog(this: OuiDialog, state: OuiDialogState): void;
+/**
+ * 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/index.mjs

@@ -0,0 +1,123 @@
+import { getOnBeforeToggleListener } from "../floatable/floatable.embedded.mjs";
+import { attributable } from "../internal/attributable.mjs";
+import { MOVABLE_ATTRIBUTE_HANDLE } from "../movable/movable.model.mjs";
+import { createMovable } from "../movable/movable.embedded.mjs";
+import "../movable/movable.standalone.mjs";
+import { RESIZABLE_ATTRIBUTE_HANDLE } from "../resizable/resizable.model.mjs";
+import { createResizable } from "../resizable/resizable.embedded.mjs";
+import { DIALOG_ATTRIBUTE, DIALOG_ATTRIBUTE_CONTAINER, DIALOG_ATTRIBUTE_OPEN, DIALOG_MESSAGE, DIALOG_SELECTOR_MOVER, DIALOG_SELECTOR_RESIZER, DIALOG_SYMBOL, dialogs } from "./dialog.model.mjs";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
+import { setStyles } from "@oscarpalmer/toretto/style";
+//#region src/js/dialog/index.ts
+function OuiDialog(state) {
+	this[DIALOG_SYMBOL] = state;
+}
+OuiDialog.prototype.hide = hideDialog;
+OuiDialog.prototype.show = showDialog;
+Object.defineProperties(OuiDialog.prototype, { open: {
+	enumerable: true,
+	get: getOpen,
+	set: setOpen
+} });
+function addDialog(element) {
+	if (!(element instanceof HTMLDialogElement)) throw new TypeError(DIALOG_MESSAGE);
+	if (!dialogs.has(element)) dialogs.set(element, getState(element));
+}
+function destroyDialog(state) {
+	state.element.close();
+	setAria(state.element, "modal", state.modal);
+	state.element.removeAttribute(DIALOG_ATTRIBUTE_OPEN);
+	for (const listener of state.listeners) listener();
+	state.movable?.destroy();
+	state.resizable?.destroy();
+	state.dialog = void 0;
+	state.element = void 0;
+	state.listeners = void 0;
+	state.movable = void 0;
+	state.resizable = void 0;
+}
+/**
+* Get the _OuiDialog_ for an element
+*
+* @param element Element to get _OuiDialog_ for
+* @returns _OuiDialog_ instance
+*/
+function getDialog(element) {
+	return dialogs.get(element)?.dialog;
+}
+function getMovable(element) {
+	const handles = element.querySelectorAll(DIALOG_SELECTOR_MOVER);
+	if (handles.length === 0) return;
+	for (const handle of handles) setAttribute(handle, MOVABLE_ATTRIBUTE_HANDLE, "");
+	return createMovable(element, { container: getAttribute(element, DIALOG_ATTRIBUTE_CONTAINER) });
+}
+function getOpen() {
+	return this[DIALOG_SYMBOL].element.open;
+}
+function getResizable(element) {
+	const handle = element.querySelector(DIALOG_SELECTOR_RESIZER);
+	if (handle == null) return;
+	setAttribute(handle, RESIZABLE_ATTRIBUTE_HANDLE, "");
+	return createResizable(element);
+}
+function getState(element) {
+	const state = {
+		element,
+		dialog: void 0,
+		listeners: [getOnBeforeToggleListener(element), on(element, "toggle", (event) => {
+			const { source } = event;
+			if (element.open) {
+				const modal = source instanceof HTMLButtonElement && source.command === "show-modal" || element.matches(":modal");
+				setAria(element, "modal", modal);
+				setAttribute(element, DIALOG_ATTRIBUTE_OPEN, "");
+				element.focus();
+				setTimeout(() => {
+					state.resizable?.set();
+				}, 500);
+			} else {
+				setAttribute(element, DIALOG_ATTRIBUTE_OPEN);
+				setAria(element, "modal", state.modal);
+				setStyles(element, {
+					inset: "",
+					position: "",
+					transform: ""
+				});
+				state.resizable?.reset();
+			}
+		})],
+		modal: getAria(element, "modal") === true || element.matches(":modal")
+	};
+	state.dialog = new OuiDialog(state);
+	state.movable = getMovable(element);
+	state.resizable = getResizable(element);
+	return state;
+}
+function hideDialog(first, second) {
+	const { element } = this[DIALOG_SYMBOL];
+	if (!element.open) return;
+	if (first === true) element.requestClose(typeof second === "string" ? second : void 0);
+	else element.close(typeof first === "string" ? first : void 0);
+}
+function removeDialog(element) {
+	const state = dialogs.get(element);
+	if (state == null) return;
+	destroyDialog(state);
+	dialogs.delete(element);
+}
+function setOpen(value) {
+	if (value === true) this.show();
+	else if (value === false) this.hide();
+}
+function showDialog(value) {
+	const { element } = this[DIALOG_SYMBOL];
+	if (element == null || element.open) return;
+	const isModal = value !== false;
+	setAria(element, "modal", isModal);
+	if (isModal) element.showModal();
+	else element.show();
+}
+attributable(DIALOG_ATTRIBUTE, addDialog, removeDialog);
+//#endregion
+export { getDialog };

package/dist/js/dialog.model-HVzYWoDo.d.mts

@@ -0,0 +1,45 @@
+import { u as OuiMovable } from "./movable.model-D9nnPWKk.mjs";
+import { n as OuiResizable } from "./resizable.model-YEtcC9li.mjs";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+//#region src/js/dialog/dialog.model.d.ts
+type OuiDialog = {
+  [DIALOG_SYMBOL]: OuiDialogState;
+  /**
+   * Is the dialog open?
+   */
+  get open(): boolean;
+  /**
+   * Open or close the dialog
+   */
+  set open(value: boolean);
+  /**
+   * 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;
+  movable?: OuiMovable;
+  resizable?: OuiResizable;
+};
+declare const DIALOG_ATTRIBUTE = "oui-dialog";
+declare const DIALOG_ATTRIBUTE_CONTAINER: string;
+declare const DIALOG_ATTRIBUTE_OPEN: string;
+declare const DIALOG_MESSAGE = "The element must be an instance of HTMLDialogElement";
+declare const DIALOG_SELECTOR_MOVER: string;
+declare const DIALOG_SELECTOR_RESIZER: string;
+declare const DIALOG_SYMBOL: unique symbol;
+declare const dialogs: WeakMap<Element, OuiDialogState>;
+//#endregion
+export { DIALOG_SELECTOR_MOVER as a, OuiDialog as c, DIALOG_MESSAGE as i, OuiDialogState as l, DIALOG_ATTRIBUTE_CONTAINER as n, DIALOG_SELECTOR_RESIZER as o, DIALOG_ATTRIBUTE_OPEN as r, DIALOG_SYMBOL as s, DIALOG_ATTRIBUTE as t, dialogs as u };

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

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