@oscarpalmer/oui 0.38.0 → 0.40.0

package/dist/js/combobox.constants-DZVkMP5g.d.mts

@@ -0,0 +1,19 @@
+import { r as OuiListboxAutoCompleteType, t as OuiListboxAttributes } from "./listbox.model-CuBOj4qe.mjs";
+//#region src/js/combobox/combobox.constants.d.ts
+declare const COMBOBOX_TAGNAME = "oui-combobox";
+declare const COMBOBOX_ATTRIBUTE_ANCHOR: string;
+declare const COMBOBOX_ATTRIBUTE_SELECTION: string;
+declare const COMBOBOX_ATTRIBUTE_SELECTION_ITEM: string;
+declare const COMBOBOX_AUTOCOMPLETES: Set<OuiListboxAutoCompleteType>;
+declare const COMBOBOX_SYMBOL: unique symbol;
+declare const comboboxAttributes: OuiListboxAttributes;
+declare const messageLabel: string;
+declare const messageSelect: string;
+declare const comboboxMessages: Record<string, string>;
+declare const selectorAnchor: string;
+declare const selectorContent: string;
+declare const selectorOption: string;
+declare const selectorSelectionItem: string;
+declare const comboboxSelectors: Record<string, string>;
+//#endregion
+export { COMBOBOX_SYMBOL as a, comboboxMessages as c, messageSelect as d, selectorAnchor as f, selectorSelectionItem as h, COMBOBOX_AUTOCOMPLETES as i, comboboxSelectors as l, selectorOption as m, COMBOBOX_ATTRIBUTE_SELECTION as n, COMBOBOX_TAGNAME as o, selectorContent as p, COMBOBOX_ATTRIBUTE_SELECTION_ITEM as r, comboboxAttributes as s, COMBOBOX_ATTRIBUTE_ANCHOR as t, messageLabel as u };

package/dist/js/combobox.misc-C1tPZZDi.d.mts

@@ -0,0 +1,22 @@
+import { c as OuiLocalizations } from "./l10n.model-D6a9frgl.mjs";
+import { n as OuiListboxAutoComplete, o as OuiListboxLocalizations } from "./listbox.model-CuBOj4qe.mjs";
+//#region src/js/combobox/combobox.misc.d.ts
+declare function getComboboxAutoComplete(element: HTMLElement, select: boolean): OuiListboxAutoComplete;
+declare function getComboboxId(): string;
+declare function hasTextSelection(element: HTMLElement): element is HTMLInputElement;
+/**
+ * Set combobox localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+declare function setComboboxLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
+/**
+ * Set combobox localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+declare function setComboboxLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
+declare function updateComboboxLocalizations(instance: OuiLocalizations<OuiListboxLocalizations>, destination: Record<string, Partial<OuiListboxLocalizations>>, first: string | Record<string, Partial<OuiListboxLocalizations>>, second?: Partial<OuiListboxLocalizations>): void;
+//#endregion
+export { updateComboboxLocalizations as a, setComboboxLocalizations as i, getComboboxId as n, hasTextSelection as r, getComboboxAutoComplete as t };

package/dist/js/{combobox/models.combobox.d.mts → combobox.model-oDV06XCN.d.mts}

@@ -1,6 +1,6 @@
-import { d as OuiListboxType, l as OuiListboxState } from "../listbox.model-CRReGOmu.mjs";
-import { r as OuiFloatable } from "../floatable.embedded-Bct4U5Dm.mjs";
-//#region src/js/combobox/models.combobox.d.ts
+import { c as OuiFloatable } from "./floatable.model-DXsQgoU7.mjs";
+import { f as OuiListboxType, l as OuiListboxState } from "./listbox.model-CuBOj4qe.mjs";
+//#region src/js/combobox/combobox.model.d.ts
 type OuiComboboxAnchor = {
   container?: HTMLElement;
   element: HTMLElement;
@@ -30,15 +30,15 @@ type OuiComboboxSelectionItem = {
   button: HTMLButtonElement;
   element: HTMLElement;
 };
-type OuiComboboxState = {
+type OuiComboboxState = OuiListboxState<{
   anchor: OuiComboboxAnchor;
   floatable: OuiFloatable;
   selection?: OuiComboboxSelection;
   type: OuiListboxType;
-} & OuiListboxState;
+}>;
 type OuiComboboxValues = {
   current: string[];
   initial: string[];
 };
 //#endregion
-export { OuiComboboxAnchor, OuiComboboxFilter, OuiComboboxGroup, OuiComboboxLabel, OuiComboboxOptions, OuiComboboxSelection, OuiComboboxSelectionItem, OuiComboboxState, OuiComboboxValues };
+export { OuiComboboxOptions as a, OuiComboboxState as c, OuiComboboxLabel as i, OuiComboboxValues as l, OuiComboboxFilter as n, OuiComboboxSelection as o, OuiComboboxGroup as r, OuiComboboxSelectionItem as s, OuiComboboxAnchor as t };

package/dist/js/{state.combobox-Qm3FWzYW.mjs → combobox.state-BfJ3Hxg8.mjs}

@@ -1,20 +1,20 @@
 import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
-import { getLocalizations, updateLocalizations } from "./l10n.mjs";
-import { LISTBOX_KEYS, 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-C7CRa5Ya.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 { createLocalizations, updateLocalizations } from "./l10n/index.mjs";
 import { getAttributeValue, getBooleanAriaValue } from "./internal/misc.mjs";
-import { createComboboxAnchor, createComboboxContent, updateComboboxAutocomplete, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices } from "./combobox/dom.combobox.mjs";
+import { LISTBOX_KEYS_ACTIVATION, LISTBOX_TYPES } from "./internal/listbox/listbox.constants.mjs";
+import { b as updateListboxValueLabel, i as filterListboxOptions, n as filterListbox, o as setListboxValues, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-BQyZGKgr.mjs";
+import { initializeListboxState } from "./internal/listbox/listbox.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, updateComboboxSelectionItems, updateComboboxTabindices } from "./combobox/combobox.dom.mjs";
 import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
-import { clamp } from "@oscarpalmer/atoms/number";
 import { setAria } from "@oscarpalmer/toretto/aria";
 import { setAttributes } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
-import { getData } from "@oscarpalmer/toretto/data";
-import { findAncestor, getData as getData$1 } from "@oscarpalmer/toretto";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { clamp } from "@oscarpalmer/atoms/number";
 import { noop } from "@oscarpalmer/atoms/function";
-//#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";
@@ -39,7 +39,7 @@ function setComboboxLocalizations(first, second) {
 }
 function updateComboboxLocalizations(instance, destination, first, second) {
 	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
-		for (const state of comboboxStates.set) {
+		for (const state of comboboxes) {
 			updateListboxMessage(state);
 			updateListboxValueLabel(state);
 			updateComboboxSelectionItems(state);
@@ -48,60 +48,63 @@ function updateComboboxLocalizations(instance, destination, 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);
+	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 toggleListboxOption(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$1(selection, "option", false));
-		if (state.disabled) state.anchor.element.focus();
-		else if (state.readonly) updateComboboxTabindices(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 toggleListboxOption(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 toggleListboxOption(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) applyListboxSelection({
 		state,
 		added: false,
 		emit: (emit ?? true) && update
@@ -111,9 +114,10 @@ function onComboboxFilter(preview, state, update, active, emit) {
 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);
+		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 = filterListboxOption(state, component.filter.element.value, true);
 		applyListboxSelection({
 			option,
 			state,
@@ -124,31 +128,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) filterListbox(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);
 }
 function onComboboxKeydownSelection(event, state, item) {
-	if (LISTBOX_KEYS.activation.has(event.key)) {
+	if (LISTBOX_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 +167,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 +177,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$1(item, "option", false));
+	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) toggleListboxOption(state, option);
 }
 function onComboboxNavigation(preview, state, active) {
 	updateListboxPreview(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 : "";
+	toggleListboxOption(state, filterListboxOptions(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,12 +214,12 @@ 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 == null || 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 == null) throw new Error(comboboxMessages.label);
 	element.id = select.id;
 	const disabled = getBooleanAriaValue(element, "disabled") || select.disabled;
 	const multiple = element.multiple || select.multiple;
@@ -236,18 +244,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(option, "value", false) ?? "");
-	const state = {
+	state.component = {
 		autocomplete,
 		disabled,
 		id,
-		internals,
 		multiple,
 		readonly,
 		required,
@@ -258,7 +265,7 @@ function createComboboxState(element, internals) {
 			container: anchor.container,
 			element: anchor.element
 		},
-		attributes: COMBOBOX_ATTRIBUTES,
+		attributes: comboboxAttributes,
 		callbacks: comboboxCallbacks,
 		content: content.element,
 		elements: [
@@ -297,34 +304,44 @@ function createComboboxState(element, internals) {
 			label: content.value
 		}
 	};
-	return initializeListboxState(state, comboboxStates, onAttachCombobox);
+	return initializeListboxState(state, comboboxes, onAttachCombobox);
+}
+function initializeCombobox(element, state) {
+	element.tabIndex = -1;
+	createComponentState(element, state);
+	if (state.form.restored != null) {
+		setListboxValues(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 +364,7 @@ const comboboxCallbacks = {
 		skipNavigation: skipComboboxNavigation
 	}
 };
-const comboboxLocalizations = getLocalizations({
+const comboboxLocalizations = createLocalizations({
 	empty: "No results found",
 	input: "Please enter a value",
 	invalid: "Please select an option from the list",
@@ -357,9 +374,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, 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, 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/constants.listbox-C5Ap6Ag_.d.mts

@@ -0,0 +1,9 @@
+import { t as OuiListboxAttributes } from "./listbox.model-CuBOj4qe.mjs";
+//#region src/js/listbox/constants.listbox.d.ts
+declare const LISTBOX_TAGNAME = "oui-listbox";
+declare const LISTBOX_SYMBOL: unique symbol;
+declare const listboxAttributes: OuiListboxAttributes;
+declare const listboxMessages: Record<string, string>;
+declare const listboxSelectors: Record<string, string>;
+//#endregion
+export { listboxSelectors as a, listboxMessages as i, LISTBOX_TAGNAME as n, listboxAttributes as r, LISTBOX_SYMBOL as t };

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-DX2mndMh.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-DX2mndMh.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-DX2mndMh.d.mts

@@ -0,0 +1,45 @@
+import { u as OuiMovable } from "./movable.model-BHaK_mKw.mjs";
+import { n as OuiResizable } from "./resizable.model-BwzJcTVJ.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<HTMLElement, 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-Bct4U5Dm.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-MeTyXjFn.mjs";
+export { createEmbeddedFloatable, createFloatable, getOnBeforeToggleListener, removeFloatable };