@oscarpalmer/oui 0.40.0 → 0.41.0

package/dist/js/{listbox.data-BQyZGKgr.mjs → option-list.data-CgMyUwPc.mjs}

@@ -1,6 +1,5 @@
-import { getLocalization, localize } from "./l10n/index.mjs";
-import { listboxScrollOptions } from "./internal/listbox/listbox.constants.mjs";
-import { updateListboxForm, updateListboxValidity } from "./internal/listbox/listbox.form.mjs";
+import { optionListScrollOptions } from "./internal/option-list/option-list.constants.mjs";
+import { updateOptionListForm, updateOptionListValidity } from "./internal/option-list/option-list.form.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { dispatch } from "@oscarpalmer/toretto/event";
@@ -8,8 +7,8 @@ import { filter } from "@oscarpalmer/atoms/array/filter";
 import { createElement } from "@oscarpalmer/toretto/create";
 import { getString } from "@oscarpalmer/atoms/string";
 import { getData } from "@oscarpalmer/toretto/data";
-//#region src/js/internal/listbox/listbox.misc.ts
-function generateListboxIds(prefix, select) {
+//#region src/js/internal/option-list/option-list.misc.ts
+function generateOptionListIds(prefix, select) {
 	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...filter([...child.children], (groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
 	const { length } = elements;
 	for (let index = 0; index < length; index += 1) {
@@ -17,31 +16,31 @@ function generateListboxIds(prefix, select) {
 		if (element.id === "") element.id = `${prefix}${element instanceof HTMLOptGroupElement ? "_group_" : "_option_"}${index}`;
 	}
 }
-function getListboxVisibleOptions(state) {
+function getOptionListVisibleOptions(state) {
 	return state.component.options.all.filter((option) => !option.hidden);
 }
-function setListboxDisabled(state, value) {
+function setOptionListDisabled(state, value) {
 	state.component.filter.element.readOnly = state.component.readonly || value;
 	setProperties("disabled", state, value);
 }
-function setListboxFilter(state, value) {
+function setOptionListFilter(state, value) {
 	if (typeof value !== "string") return;
 	const { filter } = state.component;
 	const type = value.length < filter.element.value.length ? "deleteContentBackward" : "insertText";
 	filter.element.value = value;
-	filterListbox(type, state);
+	filterOptionList(type, state);
 }
-function setListboxLimit(type, state, value) {
+function setOptionListLimit(type, state, value) {
 	const { component } = state;
 	let actual = value;
 	if (typeof actual === "string") actual = Number.parseInt(actual, 10);
 	if (typeof actual === "number" && !Number.isNaN(actual) && actual >= 0 ? actual !== component[type] : actual == null) {
 		component[type] = actual;
 		setAttribute(component.host, type, actual);
-		updateListboxValidity(state);
+		updateOptionListValidity(state);
 	}
 }
-function setListboxMultiple(element, value) {
+function setOptionListMultiple(element, value) {
 	if (value) element.setAttribute("multiple", "");
 	else element.removeAttribute("multiple");
 }
@@ -56,23 +55,23 @@ function setProperties(key, state, value) {
 		setAria(element, key, key !== "readonly" || !(element instanceof HTMLButtonElement) ? value : void 0);
 	}
 }
-function setListboxReadonly(state, value) {
+function setOptionListReadonly(state, value) {
 	const { disabled, filter } = state.component;
 	filter.element.readOnly = disabled || value;
 	setProperties("readonly", state, value);
 }
-function setListboxRequired(state, value) {
+function setOptionListRequired(state, value) {
 	setProperties("required", state, value);
-	updateListboxValidity(state);
+	updateOptionListValidity(state);
 }
 //#endregion
-//#region src/js/internal/listbox/listbox.dom.ts
-function createListboxContent(parameters) {
+//#region src/js/internal/option-list/option-list.dom.ts
+function createOptionListContent(parameters) {
 	const element = createElement("div", { attribute: { [parameters.attributes.content]: "" } });
-	const filter = createListboxFilter(parameters);
-	const list = createListboxList(parameters);
-	const message = createListboxMessage(parameters.attributes.message);
-	const value = createListboxValueLabel(parameters.id);
+	const filter = createOptionListFilter(parameters);
+	const list = createOptionListList(parameters);
+	const message = createOptionListMessage(parameters.attributes.message);
+	const value = createOptionListValueLabel(parameters.id);
 	if (filter != null) element.append(filter.container);
 	element.append(list.element, message, value);
 	return {
@@ -83,10 +82,10 @@ function createListboxContent(parameters) {
 		value
 	};
 }
-function createListboxFilter(parameters) {
+function createOptionListFilter(parameters) {
 	if (parameters.type === "autocomplete") return;
 	const container = createElement("div", { attribute: { [parameters.attributes.filter]: "" } });
-	const element = createListboxInput(parameters, "");
+	const element = createOptionListInput(parameters, "");
 	setAttribute(element, parameters.attributes.input, "");
 	container.append(element);
 	return {
@@ -94,19 +93,19 @@ function createListboxFilter(parameters) {
 		element
 	};
 }
-function createListboxGroup(parameters) {
+function createOptionListGroup(parameters) {
 	const { group, groupOptions, selected, type } = parameters;
 	const element = createElement("li", {
 		aria: { label: group.label },
 		property: { role: "group" }
 	});
 	const list = createElement("ul", { property: { role: "none" } });
-	const header = createListboxHeader(parameters, group);
+	const header = createOptionListHeader(parameters, group);
 	element.append(header, list);
 	return {
 		element,
 		header,
-		options: createListboxOptions({
+		options: createOptionListOptions({
 			list,
 			selected,
 			type,
@@ -116,7 +115,7 @@ function createListboxGroup(parameters) {
 		})
 	};
 }
-function createListboxHeader(parameters, group) {
+function createOptionListHeader(parameters, group) {
 	return createElement("div", {
 		aria: { hidden: true },
 		attribute: { [parameters.original.attributes.header]: "" },
@@ -126,7 +125,7 @@ function createListboxHeader(parameters, group) {
 		}
 	});
 }
-function createListboxInput(parameters, value) {
+function createOptionListInput(parameters, value) {
 	const { autocomplete, id, label, listbox, type } = parameters;
 	const isAutocomplete = type === "autocomplete";
 	const input = createElement("input", {
@@ -153,7 +152,7 @@ function createListboxInput(parameters, value) {
 	if (isAutocomplete || listbox) setAria(input, "expanded", listbox);
 	return input;
 }
-function createListboxList(parameters) {
+function createOptionListList(parameters) {
 	const { attributes, id, label, multiple, select, type } = parameters;
 	const element = createElement("ul", {
 		aria: {
@@ -177,7 +176,7 @@ function createListboxList(parameters) {
 	for (let childIndex = 0; childIndex < childrenLength; childIndex += 1) {
 		const child = children[childIndex];
 		if (child instanceof HTMLOptionElement) {
-			const option = createListboxOption({
+			const option = createOptionListOption({
 				type,
 				option: child,
 				original: parameters,
@@ -189,7 +188,7 @@ function createListboxList(parameters) {
 			continue;
 		}
 		if (!(child instanceof HTMLOptGroupElement)) continue;
-		const group = createListboxGroup({
+		const group = createOptionListGroup({
 			selected,
 			type,
 			group: child,
@@ -210,7 +209,7 @@ function createListboxList(parameters) {
 		}
 	};
 }
-function createListboxMessage(attribute) {
+function createOptionListMessage(attribute) {
 	return createElement("div", {
 		aria: { live: "polite" },
 		attribute: { [attribute]: "" },
@@ -220,7 +219,7 @@ function createListboxMessage(attribute) {
 		}
 	});
 }
-function createListboxOption(parameters) {
+function createOptionListOption(parameters) {
 	const { group, option, original } = parameters;
 	return createElement("li", {
 		aria: { selected: (parameters.type === "select" || !original.autocomplete.none) && option.selected },
@@ -236,12 +235,12 @@ function createListboxOption(parameters) {
 		}
 	});
 }
-function createListboxOptions(parameters) {
+function createOptionListOptions(parameters) {
 	const { group, list, options, original, selected, type } = parameters;
 	const items = [];
 	for (let index = 0; index < options.length; index += 1) {
 		const option = options[index];
-		const item = createListboxOption({
+		const item = createOptionListOption({
 			group,
 			index,
 			option,
@@ -254,30 +253,30 @@ function createListboxOptions(parameters) {
 	}
 	return items;
 }
-function createListboxValueLabel(id) {
+function createOptionListValueLabel(id) {
 	return createElement("span", { property: {
 		hidden: true,
 		id: `${id}_value`
 	} });
 }
-function updateListboxMessage(state) {
+function updateOptionListMessage(state) {
 	const { attributes, host, localizations, message } = state.component;
-	const visible = getListboxVisibleOptions(state).length;
+	const visible = getOptionListVisibleOptions(state).length;
 	setAttribute(message, attributes.hidden, visible > 0 ? "" : void 0);
-	let data = {};
 	let parameters = [];
 	let key;
 	if (visible === 0) key = "empty";
 	else {
-		data = { amount: visible };
 		key = "results";
 		parameters = [visible];
 	}
-	const localization = getLocalization(localizations.global, host, key, localizations.component);
-	message.textContent = localize(localization, data, parameters);
+	message.textContent = localizations.localize(key, {
+		arguments: parameters,
+		element: host
+	});
 	message.hidden = false;
 }
-function updateListboxPreview(preview, state, active, scroll) {
+function updateOptionListPreview(preview, state, active, scroll) {
 	const { attributes, callbacks, content, filter, options } = state.component;
 	const { length } = options.all;
 	for (let index = 0; index < length; index += 1) {
@@ -286,22 +285,22 @@ function updateListboxPreview(preview, state, active, scroll) {
 	}
 	state.component.active = active;
 	setAria(filter.element, "activedescendant", content.checkVisibility() ? active?.id : void 0);
-	if (scroll ?? true) active?.scrollIntoView(listboxScrollOptions);
+	if (scroll ?? true) active?.scrollIntoView(optionListScrollOptions);
 	if (preview !== "none") callbacks.data.onPreview(preview, state, active);
 }
-function updateListboxValueLabel(state) {
+function updateOptionListValueLabel(state) {
 	const { autocomplete, filter, listbox, localizations, host, options, multiple, values } = state.component;
 	let label;
-	if (multiple) {
-		const localization = getLocalization(localizations.global, host, "selected", localizations.component);
-		const { length } = options.selected;
-		label = localize(localization, { amount: length }, [length]);
-	} else label = autocomplete.none && !listbox ? filter.element.value : options.selected[0]?.textContent ?? "";
+	if (multiple) label = localizations.localize("selected", {
+		arguments: [options.selected.length],
+		element: host
+	});
+	else label = autocomplete.none && !listbox ? filter.element.value : options.selected[0]?.textContent ?? "";
 	values.label.textContent = label;
 }
 //#endregion
-//#region src/js/internal/listbox/listbox.data.ts
-function applyListboxSelection(parameters) {
+//#region src/js/internal/option-list/option-list.data.ts
+function applyOptionListSelection(parameters) {
 	const { added, emit, option, scroll, selected, state } = parameters;
 	const { component } = state;
 	const { autocomplete, callbacks, filter, listbox, options, type } = component;
@@ -314,17 +313,17 @@ function applyListboxSelection(parameters) {
 	if (values.length === 0) values.push("");
 	if (selected != null) options.selected = selected;
 	if (!(values.length === component.values.current.length ? values.some((value) => !component.values.current.includes(value)) : true)) return;
-	updateListboxForm(state, values, emit);
-	updateListboxMessage(state);
-	updateListboxPreview("set", state, option, scroll);
-	updateListboxValueLabel(state);
+	updateOptionListForm(state, values, emit);
+	updateOptionListMessage(state);
+	updateOptionListPreview("set", state, option, scroll);
+	updateOptionListValueLabel(state);
 	callbacks.data.onApply(state, option, values, added, selected, emit);
 }
-function filterListbox(type, state) {
+function filterOptionList(type, state) {
 	const { callbacks, disabled, filter, host, readonly } = state.component;
 	if (disabled || readonly) return;
 	const update = filter.element.value !== filter.value;
-	const option = filterListboxOptions(state);
+	const option = filterOptionListOptions(state);
 	let preview;
 	if (type.includes("delete")) preview = "none";
 	else if (type.includes("insert")) preview = "typed";
@@ -334,11 +333,11 @@ function filterListbox(type, state) {
 		dispatch(host, "input");
 	}
 }
-function filterListboxOption(state, value, textContent) {
+function filterOptionListOption(state, value, textContent) {
 	const { options } = state.component;
 	const filterTextContent = textContent ?? false;
 	const filter = getString(value).toLocaleLowerCase();
-	filterListboxOptions(state);
+	filterOptionListOptions(state);
 	const { length } = options.all;
 	let match;
 	for (let index = 0; index < length; index += 1) {
@@ -350,7 +349,7 @@ function filterListboxOption(state, value, textContent) {
 	}
 	return match;
 }
-function filterListboxOptions(state) {
+function filterOptionListOptions(state) {
 	function filterOptions(options) {
 		const { length } = options;
 		let count = 0;
@@ -376,24 +375,24 @@ function filterListboxOptions(state) {
 		}
 	}
 	setAttribute(list, attributes.empty, visible.length === 0 ? "" : void 0);
-	updateListboxMessage(state);
+	updateOptionListMessage(state);
 	return active != null && visible.includes(active) ? active : visible[0];
 }
-function setListboxValue(state, value, emit) {
+function setOptionListValue(state, value, emit) {
 	const { autocomplete, listbox } = state.component;
 	if (autocomplete.none && !listbox) {
-		setListboxFilter(state, getString(value));
+		setOptionListFilter(state, getString(value));
 		return;
 	}
-	if (filterListboxOption(state, value) != null) setListboxValues(state, [value], emit);
+	if (filterOptionListOption(state, value) != null) setOptionListValues(state, [value], emit);
 }
-function setListboxValues(state, value, emit) {
+function setOptionListValues(state, value, emit) {
 	if (!Array.isArray(value)) return;
 	const { autocomplete, listbox, multiple, options } = state.component;
 	const values = (multiple ? value : value.slice(0, 1)).map((value) => getString(value).toLocaleLowerCase());
 	if (values.length === 0) values.push("");
 	if (autocomplete.none && !listbox) {
-		setListboxValue(state, values[0], emit);
+		setOptionListValue(state, values[0], emit);
 		return;
 	}
 	const { length } = options.all;
@@ -402,7 +401,7 @@ function setListboxValues(state, value, emit) {
 		const option = options.all[index];
 		if (values.includes(getData(option, "value", false)?.toLocaleLowerCase() ?? "")) selected.push(option);
 	}
-	applyListboxSelection({
+	applyOptionListSelection({
 		emit,
 		selected,
 		state,
@@ -411,7 +410,7 @@ function setListboxValues(state, value, emit) {
 		values: autocomplete.none && !listbox ? values : void 0
 	});
 }
-function toggleListboxOption(state, option) {
+function toggleOptionListOption(state, option) {
 	const { autocomplete, callbacks, listbox, multiple, options } = state.component;
 	if (option == null || !multiple && options.selected.includes(option)) {
 		callbacks.data.onToggle(state);
@@ -428,7 +427,7 @@ function toggleListboxOption(state, option) {
 		}
 	} else selected.splice(0, selected.length, option);
 	const values = autocomplete.none && !listbox && option != null ? [option.textContent] : void 0;
-	applyListboxSelection({
+	applyOptionListSelection({
 		added,
 		option,
 		selected,
@@ -439,4 +438,4 @@ function toggleListboxOption(state, option) {
 	callbacks.data.onToggle(state);
 }
 //#endregion
-export { setListboxDisabled as C, setListboxReadonly as D, setListboxMultiple as E, setListboxRequired as O, getListboxVisibleOptions as S, setListboxLimit as T, createListboxValueLabel as _, setListboxValue as a, updateListboxValueLabel as b, createListboxContent as c, createListboxHeader as d, createListboxInput as f, createListboxOptions as g, createListboxOption as h, filterListboxOptions as i, createListboxFilter as l, createListboxMessage as m, filterListbox as n, setListboxValues as o, createListboxList as p, filterListboxOption as r, toggleListboxOption as s, applyListboxSelection as t, createListboxGroup as u, updateListboxMessage as v, setListboxFilter as w, generateListboxIds as x, updateListboxPreview as y };
+export { setOptionListDisabled as C, setOptionListReadonly as D, setOptionListMultiple as E, setOptionListRequired as O, getOptionListVisibleOptions as S, setOptionListLimit as T, createOptionListValueLabel as _, setOptionListValue as a, updateOptionListValueLabel as b, createOptionListContent as c, createOptionListHeader as d, createOptionListInput as f, createOptionListOptions as g, createOptionListOption as h, filterOptionListOptions as i, createOptionListFilter as l, createOptionListMessage as m, filterOptionList as n, setOptionListValues as o, createOptionListList as p, filterOptionListOption as r, toggleOptionListOption as s, applyOptionListSelection as t, createOptionListGroup as u, updateOptionListMessage as v, setOptionListFilter as w, generateOptionListIds as x, updateOptionListPreview as y };

package/dist/js/option-list.model-CCPUlPeX.d.mts

@@ -0,0 +1,169 @@
+import { _ as OuiLocalizationsValues, p as OuiLocalizations } from "./l10n.model-D1E1u35L.mjs";
+import { PlainObject } from "@oscarpalmer/atoms/models";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+//#region src/js/internal/option-list/option-list.model.d.ts
+type CreateOptionListContent = {
+  element: HTMLDivElement;
+  filter?: CreateOptionListFilter;
+  list: CreateOptionListList;
+  message: HTMLDivElement;
+  value: HTMLSpanElement;
+};
+type CreateOptionListContentParameters = {
+  attributes: OptionListAttributes;
+  autocomplete: OptionListAutoComplete;
+  element: Element;
+  id: string;
+  label: HTMLLabelElement;
+  listbox: boolean;
+  multiple: boolean;
+  select: HTMLSelectElement;
+  type: OptionListType;
+};
+type CreateOptionListFilter = {
+  container: Element;
+  element: HTMLInputElement;
+};
+type CreateOptionListGroupParameters = {
+  group: HTMLOptGroupElement;
+  groupOptions: HTMLOptionElement[];
+  original: CreateOptionListContentParameters;
+  selected: Element[];
+  type: OptionListType;
+};
+type CreateOptionListList = {
+  element: HTMLUListElement;
+  groups?: OptionListGroup[];
+  options: OptionListOptions;
+};
+type CreateOptionListOptionParameters = {
+  group?: string;
+  index: number;
+  option: HTMLOptionElement;
+  original: CreateOptionListContentParameters;
+  type: OptionListType;
+};
+type CreateOptionListOptionsParameters = {
+  group?: string;
+  list: Element;
+  options: HTMLOptionElement[];
+  original: CreateOptionListContentParameters;
+  selected: Element[];
+  type: OptionListType;
+};
+type OptionListAttributes = {
+  active: string;
+  content: string;
+  empty: string;
+  filter: string;
+  group: string;
+  header: string;
+  hidden: string;
+  input: string;
+  list: string;
+  message: string;
+  option: string;
+};
+type OptionListAutoComplete = Record<OptionListAutoCompleteType, boolean> & {
+  value?: OptionListAutoCompleteType;
+};
+type OptionListAutoCompleteType = "both" | "inline" | "list" | "none";
+type OptionListCallbacks<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  data: OptionListCallbacksData<State, Localizations>;
+  keydown: OptionListCallbacksKeydown<State, Localizations>;
+};
+type OptionListCallbacksData<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  onApply: OptionListCallbacksDataOnApply<State, Localizations>;
+  onFilter: OptionListCallbacksDataOnFilter<State, Localizations>;
+  onForm: (state: OptionListState<State, Localizations>) => void;
+  onPreview: OptionListCallbacksDataOnPreview<State, Localizations>;
+  onToggle: (state: OptionListState<State, Localizations>) => void;
+};
+type OptionListCallbacksDataOnApply<State extends PlainObject, Localizations extends OuiLocalizationsValues> = (state: OptionListState<State, Localizations>, option: Element | undefined, values: string[], added: boolean, selected?: Element[], emit?: boolean) => void;
+type OptionListCallbacksDataOnFilter<State extends PlainObject, Localizations extends OuiLocalizationsValues> = (preview: OptionListPreview, state: OptionListState<State, Localizations>, update: boolean, active?: Element, emit?: boolean) => void;
+type OptionListCallbacksDataOnPreview<State extends PlainObject, Localizations extends OuiLocalizationsValues> = (preview: OptionListPreview, state: OptionListState<State, Localizations>, active?: Element) => void;
+type OptionListCallbacksKeydown<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  onActivation?: (state: OptionListState<State, Localizations>) => void;
+  onEnter?: (state: OptionListState<State, Localizations>) => void;
+  onEscape?: (state: OptionListState<State, Localizations>) => void;
+  onNavigation: OptionListCallbacksDataOnNavigation<State, Localizations>;
+  onSelection?: (state: OptionListState<State, Localizations>) => void;
+  onTab?: (state: OptionListState<State, Localizations>) => void;
+  onToggle?: (state: OptionListState<State, Localizations>) => void;
+  preventActivation?: (state: OptionListState<State, Localizations>) => boolean;
+  skipNavigation?: (state: OptionListState<State, Localizations>) => boolean;
+};
+type OptionListCallbacksDataOnNavigation<State extends PlainObject, Localizations extends OuiLocalizationsValues> = (preview: OptionListPreview, state: OptionListState<State, Localizations>, active?: HTMLElement) => void;
+type OptionListFilter = {
+  element: HTMLInputElement;
+  value: string;
+};
+type OptionListGroup = {
+  element: HTMLElement;
+  header: HTMLElement;
+  options: HTMLElement[];
+};
+type OptionListLabel = {
+  element: HTMLLabelElement;
+  id: string;
+};
+type OptionListLocalizationValues = {
+  empty: string | (() => string);
+  input: string | (() => string);
+  invalid: string | (() => string);
+  max: string | ((max: number) => string);
+  min: string | ((min: number) => string);
+  remove: string | ((label: string, value: string) => string);
+  results: string | ((amount: number) => string);
+  selected: string | ((amount: number) => string);
+};
+type OptionListOptions = {
+  all: HTMLElement[];
+  selected: HTMLElement[];
+};
+type OptionListPreview = "none" | "set" | "typed";
+type OptionListState<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  component: OptionListStateComponent<State, Localizations>;
+  form: OptionListStateForm;
+};
+type OptionListStateComponent<State extends PlainObject, Localizations extends OuiLocalizationsValues> = {
+  active?: HTMLElement;
+  attributes: OptionListAttributes;
+  autocomplete: OptionListAutoComplete;
+  callbacks: OptionListCallbacks<State, Localizations>;
+  content: HTMLDivElement;
+  disabled: boolean;
+  elements: Array<Element | undefined>;
+  filter: OptionListFilter;
+  groups?: OptionListGroup[];
+  host: Element;
+  id: string;
+  label: OptionListLabel;
+  list: HTMLUListElement;
+  listbox: boolean;
+  listeners: RemovableEventListener[];
+  localizations: OuiLocalizations<OptionListLocalizationValues & Localizations>;
+  max?: number;
+  min?: number;
+  message: HTMLElement;
+  multiple: boolean;
+  name: string;
+  options: OptionListOptions;
+  readonly: boolean;
+  required: boolean;
+  select: HTMLSelectElement;
+  type: OptionListType;
+  values: OptionListValues;
+} & State;
+type OptionListStateForm = {
+  internals: ElementInternals;
+  restored?: unknown[];
+};
+type OptionListType = "autocomplete" | "select";
+type OptionListValues = {
+  current: string[];
+  initial: string[];
+  label: Element;
+};
+//#endregion
+export { OptionListType as _, CreateOptionListList as a, OptionListAttributes as c, OptionListCallbacks as d, OptionListGroup as f, OptionListState as g, OptionListPreview as h, CreateOptionListGroupParameters as i, OptionListAutoComplete as l, OptionListOptions as m, CreateOptionListContentParameters as n, CreateOptionListOptionParameters as o, OptionListLocalizationValues as p, CreateOptionListFilter as r, CreateOptionListOptionsParameters as s, CreateOptionListContent as t, OptionListAutoCompleteType as u };

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

@@ -1,4 +1,4 @@
-import { n as OuiPopoverState, t as OuiPopover } from "../popover.model-ubKNG612.mjs";
+import { n as OuiPopoverState, t as OuiPopover } from "../popover.model-DiLdz0Hc.mjs";
 //#region src/js/popover/index.d.ts
 declare function OuiPopover(this: OuiPopover, state: OuiPopoverState): void;
 /**
@@ -7,6 +7,6 @@ declare function OuiPopover(this: OuiPopover, state: OuiPopoverState): void;
  * @param element Element to get _OuiPopover_ for
  * @returns _OuiPopover_ instance
  */
-export declare function getPopover(element: HTMLElement): OuiPopover | undefined;
+export declare function getPopover(element: Element): OuiPopover | undefined;
 //#endregion
 export type { OuiPopover };

package/dist/js/popover/index.mjs

@@ -23,7 +23,7 @@ Object.defineProperties(OuiPopover.prototype, { open: {
 function addPopover(element) {
 	if (popovers.has(element) || element.hasAttribute("oui-floatable")) return;
 	const anchor = element.ownerDocument.querySelector(`[popovertarget="${element.id}"]`);
-	if (isHTMLOrSVGElement(anchor)) popovers.set(element, getState(anchor, element));
+	if (isHTMLOrSVGElement(anchor) && isHTMLOrSVGElement(element)) popovers.set(element, getState(anchor, element));
 }
 function destroyPopover(state) {
 	state.floatable.destroy();

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

@@ -1,2 +1,2 @@
-import { a as POPOVER_SYMBOL, i as POPOVER_ATTRIBUTE_OPEN, n as OuiPopoverState, o as popoverFloatableOptions, r as POPOVER_ATTRIBUTE, s as popovers, t as OuiPopover } from "../popover.model-ubKNG612.mjs";
+import { a as POPOVER_SYMBOL, i as POPOVER_ATTRIBUTE_OPEN, n as OuiPopoverState, o as popoverFloatableOptions, r as POPOVER_ATTRIBUTE, s as popovers, t as OuiPopover } from "../popover.model-DiLdz0Hc.mjs";
 export { OuiPopover, OuiPopoverState, POPOVER_ATTRIBUTE, POPOVER_ATTRIBUTE_OPEN, POPOVER_SYMBOL, popoverFloatableOptions, popovers };

package/dist/js/{popover.model-ubKNG612.d.mts → popover.model-DiLdz0Hc.d.mts}

@@ -1,5 +1,5 @@
 import { c as OuiFloatable, l as OuiFloatableOptions } from "./floatable.model-DXsQgoU7.mjs";
-import { c as OuiFocusTrap } from "./focus-trap.model-BeX6UYlw.mjs";
+import { c as OuiFocusTrap } from "./focus-trap.model-CpltX5B5.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 //#region src/js/popover/popover.model.d.ts
 type OuiPopover = {
@@ -22,8 +22,8 @@ type OuiPopover = {
   show(): void;
 };
 type OuiPopoverState = {
-  anchor: HTMLElement;
-  content: HTMLElement;
+  anchor: Element;
+  content: Element;
   floatable: OuiFloatable;
   focusTrap?: OuiFocusTrap;
   listeners: RemovableEventListener[];
@@ -33,6 +33,6 @@ declare const POPOVER_ATTRIBUTE = "oui-popover";
 declare const POPOVER_ATTRIBUTE_OPEN: string;
 declare const POPOVER_SYMBOL: unique symbol;
 declare const popoverFloatableOptions: OuiFloatableOptions;
-declare const popovers: WeakMap<HTMLElement, OuiPopoverState>;
+declare const popovers: WeakMap<Element, OuiPopoverState>;
 //#endregion
 export { POPOVER_SYMBOL as a, POPOVER_ATTRIBUTE_OPEN as i, OuiPopoverState as n, popoverFloatableOptions as o, POPOVER_ATTRIBUTE as r, popovers as s, OuiPopover as t };

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

@@ -1,2 +1,2 @@
-import { t as createResizable } from "../resizable.embedded-Bf1qBUdt.mjs";
+import { t as createResizable } from "../resizable.embedded-BemH-7Re.mjs";
 export { createResizable };

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

@@ -1,2 +1,2 @@
-import { _ as resizableItems, a as RESIZABLE_ATTRIBUTE, c as RESIZABLE_ATTRIBUTE_MINIMUM, d as RESIZABLE_MESSAGE_HEIGHT, f as RESIZABLE_MESSAGE_WIDTH, g as RESIZABLE_SYMBOL, h as RESIZABLE_SELECTOR_HANDLE_SCOPED, i as OuiResizableState, l as RESIZABLE_MESSAGE_ELEMENT, m as RESIZABLE_SELECTOR_HANDLE, n as OuiResizable, o as RESIZABLE_ATTRIBUTE_HANDLE, p as RESIZABLE_SELECTOR, r as OuiResizableItem, s as RESIZABLE_ATTRIBUTE_MAXIMUM, t as CreateOuiResizableOptions, u as RESIZABLE_MESSAGE_HANDLE, v as resizableStyles } from "../resizable.model-BwzJcTVJ.mjs";
+import { _ as resizableItems, a as RESIZABLE_ATTRIBUTE, c as RESIZABLE_ATTRIBUTE_MINIMUM, d as RESIZABLE_MESSAGE_HEIGHT, f as RESIZABLE_MESSAGE_WIDTH, g as RESIZABLE_SYMBOL, h as RESIZABLE_SELECTOR_HANDLE_SCOPED, i as OuiResizableState, l as RESIZABLE_MESSAGE_ELEMENT, m as RESIZABLE_SELECTOR_HANDLE, n as OuiResizable, o as RESIZABLE_ATTRIBUTE_HANDLE, p as RESIZABLE_SELECTOR, r as OuiResizableItem, s as RESIZABLE_ATTRIBUTE_MAXIMUM, t as CreateOuiResizableOptions, u as RESIZABLE_MESSAGE_HANDLE, v as resizableStyles } from "../resizable.model-YEtcC9li.mjs";
 export { CreateOuiResizableOptions, OuiResizable, OuiResizableItem, OuiResizableState, RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_HANDLE, RESIZABLE_ATTRIBUTE_MAXIMUM, RESIZABLE_ATTRIBUTE_MINIMUM, RESIZABLE_MESSAGE_ELEMENT, RESIZABLE_MESSAGE_HANDLE, RESIZABLE_MESSAGE_HEIGHT, RESIZABLE_MESSAGE_WIDTH, RESIZABLE_SELECTOR, RESIZABLE_SELECTOR_HANDLE, RESIZABLE_SELECTOR_HANDLE_SCOPED, RESIZABLE_SYMBOL, resizableItems, resizableStyles };

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

@@ -1,3 +1,3 @@
-import { n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.model-BwzJcTVJ.mjs";
-import { t as createResizable } from "../resizable.embedded-Bf1qBUdt.mjs";
+import { n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.model-YEtcC9li.mjs";
+import { t as createResizable } from "../resizable.embedded-BemH-7Re.mjs";
 export { type CreateOuiResizableOptions, type OuiResizable, createResizable as createOuiResizable };

package/dist/js/{resizable.embedded-Bf1qBUdt.d.mts → resizable.embedded-BemH-7Re.d.mts}

@@ -1,4 +1,4 @@
-import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-BwzJcTVJ.mjs";
+import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.model-YEtcC9li.mjs";
 //#region src/js/resizable/resizable.embedded.d.ts
 /**
  * Creates _(or retrieves)_ a _OuiResizable_ instance for an element
@@ -6,6 +6,6 @@ import { n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.m
  * @param element Element to make resizable
  * @returns _OuiResizable_ instance
  */
-declare function createResizable(element: HTMLElement, options?: CreateOuiResizableOptions): OuiResizable;
+declare function createResizable(element: Element, options?: CreateOuiResizableOptions): OuiResizable;
 //#endregion
 export { createResizable as t };

package/dist/js/{resizable.model-BwzJcTVJ.d.mts → resizable.model-YEtcC9li.d.mts}

@@ -17,8 +17,8 @@ type OuiResizableItem = {
   state: OuiResizableState;
 };
 type OuiResizableState = {
-  element: HTMLElement;
-  handle: HTMLElement;
+  element: Element;
+  handle: Element;
   height: number;
   options: Required<CreateOuiResizableOptions>;
   styles: StyleToggler;
@@ -36,7 +36,7 @@ declare const RESIZABLE_SELECTOR: string;
 declare const RESIZABLE_SELECTOR_HANDLE: string;
 declare const RESIZABLE_SELECTOR_HANDLE_SCOPED: string;
 declare const RESIZABLE_SYMBOL: unique symbol;
-declare const resizableItems: WeakMap<HTMLElement, OuiResizableItem>;
+declare const resizableItems: WeakMap<Element, OuiResizableItem>;
 declare const resizableStyles: {
   touchAction: string;
   userSelect: string;