@oscarpalmer/oui 0.39.0 → 0.41.0

package/dist/js/color-picker.constants-BZgXQr5o.d.mts

@@ -0,0 +1,177 @@
+import { p as OuiLocalizations, u as OuiDefaultLocalizations } from "./l10n.model-D1E1u35L.mjs";
+import { c as OuiFloatable } from "./floatable.model-DXsQgoU7.mjs";
+import { Color, HSLAColor, HSLColor, HWBAColor, HWBColor, RGBAColor, RGBColor } from "@oscarpalmer/atoms/color";
+import { RemovableEventListener } from "@oscarpalmer/toretto/models";
+//#region src/js/color-picker/color-picker.model.d.ts
+type GenericOuiColorPickerElement = {
+  [COLOR_PICKER_SYMBOL]: OuiColorPickerState;
+  get value(): string;
+  set value(value: string);
+} & HTMLElement;
+type OuiColorPickerAnchor = {
+  copy?: OuiColorPickerCopy;
+  toggle?: HTMLButtonElement;
+  container: HTMLDivElement;
+  input: HTMLInputElement;
+};
+type OuiColorPickerColor = {
+  foreground: string;
+  value: Color;
+};
+type OuiColorPickerContent = {
+  element: HTMLDivElement;
+  hue: OuiColorPickerContentHue;
+  opacity?: OuiColorPickerContentOpacity;
+  output?: OuiColorPickerContentOutput;
+  well: OuiColorPickerContentWell;
+};
+type OuiColorPickerContentHue = {
+  container: HTMLDivElement;
+  input: HTMLInputElement;
+  label: HTMLLabelElement;
+  knob: HTMLSpanElement;
+  track: HTMLDivElement;
+};
+type OuiColorPickerContentOpacity = {
+  container: HTMLDivElement;
+  input: HTMLInputElement;
+  label: HTMLLabelElement;
+  range: HTMLInputElement;
+};
+type OuiColorPickerContentOutput = {
+  container: HTMLDivElement;
+  copy?: OuiColorPickerCopy;
+  inputs: HTMLInputElement[];
+  items: HTMLDivElement[];
+  toggle?: HTMLSelectElement;
+};
+type OuiColorPickerContentWell = {
+  element: HTMLDivElement;
+  knob: HTMLSpanElement;
+  label: HTMLSpanElement;
+};
+type OuiColorPickerCopy = {
+  button: HTMLButtonElement;
+  timer?: number;
+};
+type OuiColorPickerCreateParameters = {
+  alpha: boolean;
+  color: Color;
+  copy: boolean;
+  id: string;
+  inline: boolean;
+  input: HTMLInputElement;
+  output: OuiColorPickerOutputType;
+};
+declare class OuiColorPickerEvent extends Event {
+  readonly valid: boolean;
+  readonly value: OuiColorPickerEventValue;
+  constructor(type: OuiColorPickerEventType, color: Color, valid: boolean);
+}
+type OuiColorPickerEventType = "oui:change" | "oui:input";
+type OuiColorPickerEventValue = {
+  hex: string;
+  hexa: string;
+  hsl: HSLColor;
+  hsla: HSLAColor;
+  hwb: HWBColor;
+  hwba: HWBAColor;
+  rgb: RGBColor;
+  rgba: RGBAColor;
+};
+type OuiColorPickerLabel = {
+  element: HTMLLabelElement;
+  id: string;
+};
+type OuiColorPickerLocalizations = {
+  blackness: string;
+  blue: string;
+  copy: string;
+  green: string;
+  hex: string;
+  hsl: string;
+  hue: string;
+  hwb: string;
+  invalid: string;
+  lightness: string;
+  opacity: string;
+  output: string;
+  red: string;
+  rgb: string;
+  saturation: string;
+  toggle: string;
+  wellLabel: string;
+  wellValue: string | ((lightness: number, saturation: number) => string);
+  whiteness: string;
+};
+type OuiColorPickerMovement = {
+  parameters?: OuiColorPickerMovementParameters;
+};
+type OuiColorPickerMovementParameters = {
+  rectangle: DOMRect;
+  state: OuiColorPickerState;
+  value: string;
+};
+type OuiColorPickerOutputColor = "hsl" | "hwb" | "rgb";
+type OuiColorPickerOutputColorProperty = "blackness" | "blue" | "green" | "hue" | "lightness" | "red" | "saturation" | "whiteness";
+type OuiColorPickerOutputType = "all" | "none" | OuiColorPickerOutputColor;
+type OuiColorPickerState = {
+  component: OuiColorPickerStateComponent;
+  form: OuiColorPickerStateForm;
+};
+type OuiColorPickerStateComponent = {
+  alpha: boolean;
+  anchor: OuiColorPickerAnchor;
+  color: OuiColorPickerColor;
+  copy: boolean;
+  content: OuiColorPickerContent;
+  disabled: boolean;
+  floatable?: OuiFloatable;
+  host: GenericOuiColorPickerElement;
+  id: string;
+  inline: boolean;
+  input: HTMLInputElement;
+  label: OuiColorPickerLabel;
+  listeners: RemovableEventListener[];
+  localizations: OuiLocalizations<OuiColorPickerLocalizations>;
+  output: OuiColorPickerOutputType;
+  readonly: boolean;
+  required: boolean;
+  style: HTMLStyleElement;
+  value: OuiColorPickerValue;
+};
+type OuiColorPickerStateForm = {
+  internals: ElementInternals;
+  restored?: string;
+};
+type OuiColorPickerValue = {
+  current: string;
+  initial: string;
+};
+type OuiColorPickerValueType = "hex" | "hexa" | "hsl" | "hsla" | "hwb" | "hwba" | "rgb" | "rgba";
+//#endregion
+//#region src/js/color-picker/color-picker.constants.d.ts
+declare const COLOR_PICKER_TAGNAME = "oui-color-picker";
+declare const COLOR_PICKER_ATTRIBUTE_COPY: string;
+declare const COLOR_PICKER_ATTRIBUTE_COPY_ERROR: string;
+declare const COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS: string;
+declare const COLOR_PICKER_ATTRIBUTE_INPUT: string;
+declare const COLOR_PICKER_ATTRIBUTE_OPACITY: string;
+declare const COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT: string;
+declare const COLOR_PICKER_ATTRIBUTE_WELL: string;
+declare const COLOR_PICKER_ATTRIBUTE_WELL_KNOB: string;
+declare const COLOR_PICKER_EXPRESSION_HEX_PREFIX: RegExp;
+declare const COLOR_PICKER_INPUT_TYPES: Set<string>;
+declare const COLOR_PICKER_KEYS: Set<string>;
+declare const COLOR_PICKER_MESSAGE_INPUT: string;
+declare const COLOR_PICKER_MESSAGE_LABEL: string;
+declare const COLOR_PICKER_OUTPUTS: Set<OuiColorPickerOutputType>;
+declare const COLOR_PICKER_SELECTOR_COPY: string;
+declare const COLOR_PICKER_SELECTOR_INPUT: string;
+declare const COLOR_PICKER_SELECTOR_OUTPUT_INPUT: string;
+declare const COLOR_PICKER_SELECTOR_WELL: string;
+declare const COLOR_PICKER_SELECTOR_WELL_KNOB: string;
+declare const COLOR_PICKER_SYMBOL: unique symbol;
+declare const colorPickerLocalizations: OuiDefaultLocalizations<OuiColorPickerLocalizations>;
+//#endregion
+export { OuiColorPickerContentWell as A, OuiColorPickerState as B, GenericOuiColorPickerElement as C, OuiColorPickerContentHue as D, OuiColorPickerContent as E, OuiColorPickerMovement as F, OuiColorPickerValueType as H, OuiColorPickerMovementParameters as I, OuiColorPickerOutputColor as L, OuiColorPickerCreateParameters as M, OuiColorPickerEvent as N, OuiColorPickerContentOpacity as O, OuiColorPickerLocalizations as P, OuiColorPickerOutputColorProperty as R, colorPickerLocalizations as S, OuiColorPickerColor as T, OuiColorPickerStateComponent as V, COLOR_PICKER_SELECTOR_OUTPUT_INPUT as _, COLOR_PICKER_ATTRIBUTE_OPACITY as a, COLOR_PICKER_SYMBOL as b, COLOR_PICKER_ATTRIBUTE_WELL_KNOB as c, COLOR_PICKER_KEYS as d, COLOR_PICKER_MESSAGE_INPUT as f, COLOR_PICKER_SELECTOR_INPUT as g, COLOR_PICKER_SELECTOR_COPY as h, COLOR_PICKER_ATTRIBUTE_INPUT as i, OuiColorPickerCopy as j, OuiColorPickerContentOutput as k, COLOR_PICKER_EXPRESSION_HEX_PREFIX as l, COLOR_PICKER_OUTPUTS as m, COLOR_PICKER_ATTRIBUTE_COPY_ERROR as n, COLOR_PICKER_ATTRIBUTE_OUTPUT_INPUT as o, COLOR_PICKER_MESSAGE_LABEL as p, COLOR_PICKER_ATTRIBUTE_COPY_SUCCESS as r, COLOR_PICKER_ATTRIBUTE_WELL as s, COLOR_PICKER_ATTRIBUTE_COPY as t, COLOR_PICKER_INPUT_TYPES as u, COLOR_PICKER_SELECTOR_WELL as v, OuiColorPickerAnchor as w, COLOR_PICKER_TAGNAME as x, COLOR_PICKER_SELECTOR_WELL_KNOB as y, OuiColorPickerOutputType as z };

package/dist/js/color-picker.misc-BIS3R6jk.d.mts

@@ -0,0 +1,31 @@
+import { B as OuiColorPickerState, C as GenericOuiColorPickerElement, H as OuiColorPickerValueType, P as OuiColorPickerLocalizations, z as OuiColorPickerOutputType } from "./color-picker.constants-BZgXQr5o.mjs";
+//#region src/js/color-picker/color-picker.misc.d.ts
+declare function getColorPickerId(): string;
+declare function getColorPickerOutput(element: GenericOuiColorPickerElement): OuiColorPickerOutputType;
+declare function getColorPickerValueType(state: OuiColorPickerState, value: unknown): OuiColorPickerValueType | undefined;
+/**
+ * Set localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+declare function setColorPickerLocalizations(language: string, localizations: Partial<OuiColorPickerLocalizations>): void;
+/**
+ * Set default localizations
+ *
+ * @param localizations Default localizations
+ */
+declare function setColorPickerLocalizations(localizations: Partial<OuiColorPickerLocalizations>, defaults: true): void;
+/**
+ * Set localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+declare function setColorPickerLocalizations(localizations: Record<string, Partial<OuiColorPickerLocalizations>>): void;
+declare function setColorPickerDisabled(state: OuiColorPickerState, type: "disabled" | "readonly", value: boolean): void;
+declare function setColorPickerRequired(state: OuiColorPickerState, value: boolean): void;
+declare function setColorPickerValue<Type extends OuiColorPickerValueType>(state: OuiColorPickerState, value: unknown, type?: Type): void;
+declare function setColorPickerValues(state: OuiColorPickerState, focus: boolean, input?: string): void;
+declare function updateColorPickerLabels(state: OuiColorPickerState): void;
+//#endregion
+export { setColorPickerLocalizations as a, setColorPickerValues as c, setColorPickerDisabled as i, updateColorPickerLabels as l, getColorPickerOutput as n, setColorPickerRequired as o, getColorPickerValueType as r, setColorPickerValue as s, getColorPickerId as t };

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

@@ -0,0 +1,2 @@
+import { a as COMBOBOX_SYMBOL, c as comboboxMessages, d as messageSelect, f as selectorAnchor, h as selectorSelectionItem, i as COMBOBOX_AUTOCOMPLETES, l as comboboxSelectors, m as selectorOption, n as COMBOBOX_ATTRIBUTE_SELECTION, o as COMBOBOX_TAGNAME, p as selectorContent, r as COMBOBOX_ATTRIBUTE_SELECTION_ITEM, s as comboboxAttributes, t as COMBOBOX_ATTRIBUTE_ANCHOR, u as messageLabel } from "../combobox.constants-Hb3bqqQJ.mjs";
+export { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_SYMBOL, COMBOBOX_TAGNAME, comboboxAttributes, comboboxMessages, comboboxSelectors, messageLabel, messageSelect, selectorAnchor, selectorContent, selectorOption, selectorSelectionItem };

package/dist/js/combobox/{constants.combobox.mjs → combobox.constants.mjs}

@@ -1,6 +1,15 @@
-//#region src/js/combobox/constants.combobox.ts
+//#region src/js/combobox/combobox.constants.ts
 const COMBOBOX_TAGNAME = "oui-combobox";
 const COMBOBOX_ATTRIBUTE_ANCHOR = `${COMBOBOX_TAGNAME}-anchor`;
+const COMBOBOX_ATTRIBUTE_SELECTION = `${COMBOBOX_TAGNAME}-selection`;
+const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = `${COMBOBOX_TAGNAME}-selection-item`;
+const COMBOBOX_AUTOCOMPLETES = /* @__PURE__ */ new Set([
+	"both",
+	"inline",
+	"list",
+	"none"
+]);
+const COMBOBOX_SYMBOL = Symbol(COMBOBOX_TAGNAME);
 const attributeContent = `${COMBOBOX_TAGNAME}-content`;
 const attributeFilter = `${COMBOBOX_TAGNAME}-filter`;
 const attributeFilterInput = `${attributeFilter}-input`;
@@ -11,23 +20,8 @@ const attributeList = `${COMBOBOX_TAGNAME}-list`;
 const attributeListEmpty = `${attributeList}-empty`;
 const attributeMessage = `${COMBOBOX_TAGNAME}-message`;
 const attributeOption = `${COMBOBOX_TAGNAME}-option`;
-const attributeOptionActive = `${COMBOBOX_TAGNAME}-option-active`;
-const COMBOBOX_ATTRIBUTE_SELECTION = `${COMBOBOX_TAGNAME}-selection`;
-const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = `${COMBOBOX_TAGNAME}-selection-item`;
-const COMBOBOX_AUTOCOMPLETES = /* @__PURE__ */ new Set([
-	"both",
-	"inline",
-	"list",
-	"none"
-]);
-const messageLabel = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
-const messageSelect = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
-const selectorAnchor = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
-const selectorContent = `[${attributeContent}]`;
-const selectorOption = `[${attributeOption}]`;
-const selectorSelectionItem = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
-const COMBOBOX_ATTRIBUTES = {
-	active: attributeOptionActive,
+const comboboxAttributes = {
+	active: `${COMBOBOX_TAGNAME}-option-active`,
 	content: attributeContent,
 	empty: attributeListEmpty,
 	filter: attributeFilter,
@@ -39,15 +33,21 @@ const COMBOBOX_ATTRIBUTES = {
 	message: attributeMessage,
 	option: attributeOption
 };
-const COMBOBOX_MESSAGES = {
+const messageLabel = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
+const messageSelect = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
+const comboboxMessages = {
 	label: messageLabel,
 	select: messageSelect
 };
-const COMBOBOX_SELECTORS = {
+const selectorAnchor = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
+const selectorContent = `[${attributeContent}]`;
+const selectorOption = `[${attributeOption}]`;
+const selectorSelectionItem = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
+const comboboxSelectors = {
 	anchor: selectorAnchor,
 	content: selectorContent,
 	selectionItem: selectorSelectionItem,
 	option: selectorOption
 };
 //#endregion
-export { COMBOBOX_ATTRIBUTES, COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_MESSAGES, COMBOBOX_SELECTORS, COMBOBOX_TAGNAME, messageLabel, messageSelect, selectorAnchor, selectorContent, selectorOption, selectorSelectionItem };
+export { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_SYMBOL, COMBOBOX_TAGNAME, comboboxAttributes, comboboxMessages, comboboxSelectors, messageLabel, messageSelect, selectorAnchor, selectorContent, selectorOption, selectorSelectionItem };

package/dist/js/combobox/combobox.dom.d.mts

@@ -0,0 +1,25 @@
+import { h as OptionListPreview, n as CreateOptionListContentParameters, t as CreateOptionListContent } from "../option-list.model-CCPUlPeX.mjs";
+import { c as OuiComboboxSelectionItem, l as OuiComboboxState, s as OuiComboboxSelection } from "../combobox.model-gjEI2VqZ.mjs";
+//#region src/js/combobox/combobox.dom.d.ts
+type CreateAnchor = {
+  container?: Element;
+  element: HTMLElement;
+  selection?: OuiComboboxSelection;
+};
+type CreateSelectionItemsParameters = {
+  container: Element;
+  items: OuiComboboxSelectionItem[];
+  options: Element[];
+  state?: OuiComboboxState;
+};
+export declare function createComboboxAnchor(parameters: CreateOptionListContentParameters): CreateAnchor;
+export declare function createComboboxButton(parameters: CreateOptionListContentParameters): CreateAnchor;
+export declare function createComboboxContent(parameters: CreateOptionListContentParameters): CreateOptionListContent;
+export declare function createComboboxSelection(id: string, select: HTMLSelectElement): OuiComboboxSelection;
+export declare function createComboboxSelectionItem(option: Element, state?: OuiComboboxState): OuiComboboxSelectionItem;
+export declare function createComboboxSelectionItems(parameters: CreateSelectionItemsParameters): void;
+export declare function updateComboboxTabindices(state: OuiComboboxState, active?: Element): void;
+export declare function updateComboboxAutocomplete(preview: OptionListPreview, state: OuiComboboxState, active?: Element): void;
+export declare function updateComboboxSelection(state: OuiComboboxState, active: Element | undefined, added: boolean, selected?: Element[]): void;
+export declare function updateComboboxSelectionItems(state: OuiComboboxState): void;
+//#endregion

package/dist/js/combobox/{dom.combobox.mjs → combobox.dom.mjs}

@@ -1,17 +1,16 @@
-import { getLocalization, localize } from "../l10n.mjs";
-import { _ as createListboxValueLabel, f as createListboxInput, l as createListboxFilter, m as createListboxMessage, p as createListboxList } from "../listbox.data-DQ7-x2uY.mjs";
-import { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM } from "./constants.combobox.mjs";
+import { _ as createOptionListValueLabel, f as createOptionListInput, l as createOptionListFilter, m as createOptionListMessage, p as createOptionListList } from "../option-list.data-CgMyUwPc.mjs";
+import { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM } from "./combobox.constants.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { createElement } from "@oscarpalmer/toretto/create";
 import { getData } from "@oscarpalmer/toretto/data";
-//#region src/js/combobox/dom.combobox.ts
+//#region src/js/combobox/combobox.dom.ts
 function createComboboxAnchor(parameters) {
 	const { select } = parameters;
 	let container;
 	let element;
 	let selection;
-	if (parameters.type === "autocomplete") element = createListboxInput(parameters, select.selectedOptions[0]?.textContent ?? "");
+	if (parameters.type === "autocomplete") element = createOptionListInput(parameters, select.selectedOptions[0]?.textContent ?? "");
 	else ({container, element, selection} = createComboboxButton(parameters));
 	setAttribute(container ?? element, COMBOBOX_ATTRIBUTE_ANCHOR, "");
 	return {
@@ -57,10 +56,10 @@ function createComboboxContent(parameters) {
 			tabIndex: -1
 		}
 	});
-	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 {
@@ -94,12 +93,12 @@ function createComboboxSelectionItem(option, state) {
 	const optionLabel = option.textContent;
 	const optionValue = getData(option, "value", false) ?? "";
 	const element = createElement("li");
-	const localization = state == null ? option.textContent : getLocalization(state.localizations.global, state.host, "remove", state.localizations.component);
+	const localization = state == null ? option.textContent : state.component.localizations.localize("remove", {
+		arguments: [optionLabel, optionValue],
+		element: state.component.host
+	});
 	const button = createElement("button", {
-		aria: { label: localize(localization, {
-			label: optionLabel,
-			value: optionValue
-		}, [optionLabel, optionValue]) },
+		aria: { label: localization },
 		attribute: {
 			[COMBOBOX_ATTRIBUTE_SELECTION_ITEM]: "",
 			tabindex: -1
@@ -133,78 +132,81 @@ function createComboboxSelectionItems(parameters) {
 	}
 }
 function updateComboboxTabindices(state, active) {
-	if (active == null || state.selection == null) return;
-	const next = state.selection.items.find((item) => getData(item.button, "option", false) === active.id);
+	const { selection } = state.component;
+	if (active == null || selection == null) return;
+	const next = selection.items.find((item) => getData(item.button, "option", false) === active.id);
 	if (next == null) return;
-	const { length } = state.selection.items;
+	const { length } = selection.items;
 	for (let index = 0; index < length; index += 1) {
-		const item = state.selection.items[index];
+		const item = selection.items[index];
 		item.button.tabIndex = item === next ? 0 : -1;
 	}
 	next.button.focus();
 }
 function updateComboboxAutocomplete(preview, state, active) {
-	if (state.multiple) return;
-	const content = active?.textContent ?? state.filter.element.value;
-	if (preview === "typed" && !content.toLocaleLowerCase().startsWith(state.filter.element.value.toLocaleLowerCase())) return;
-	if (state.anchor.element instanceof HTMLInputElement) {
+	const { anchor, filter, multiple } = state.component;
+	if (multiple) return;
+	const content = active?.textContent ?? filter.element.value;
+	if (preview === "typed" && !content.toLocaleLowerCase().startsWith(filter.element.value.toLocaleLowerCase())) return;
+	if (anchor.element instanceof HTMLInputElement) {
 		const contentLength = content.length;
-		const filterLength = state.filter.element.value.length;
+		const filterLength = filter.element.value.length;
 		if (preview === "set" || preview === "typed") {
-			state.anchor.element.value = content;
-			state.anchor.element.setSelectionRange(preview === "typed" ? filterLength : contentLength, contentLength);
+			anchor.element.value = content;
+			anchor.element.setSelectionRange(preview === "typed" ? filterLength : contentLength, contentLength);
 		}
-	} else state.anchor.element.textContent = content;
+	} else anchor.element.textContent = content;
 }
 function updateComboboxSelection(state, active, added, selected) {
-	if (state.selection == null) return;
+	const { anchor, selection } = state.component;
+	if (selection == null) return;
 	let options = active == null ? [] : [active];
 	if (added && selected != null) {
 		options = selected;
-		const { length } = state.selection.items;
-		for (let index = 0; index < length; index += 1) state.selection.items[index].element.remove();
-		state.selection.items.splice(0);
+		const { length } = selection.items;
+		for (let index = 0; index < length; index += 1) selection.items[index].element.remove();
+		selection.items.splice(0);
 	}
 	if (added) {
 		createComboboxSelectionItems({
 			options,
 			state,
-			container: state.selection.container,
-			items: state.selection.items
+			container: selection.container,
+			items: selection.items
 		});
 		return;
 	}
-	let current = state.selection.items.findIndex((item) => getData(item.button, "option", false) === active?.id);
+	let current = selection.items.findIndex((item) => getData(item.button, "option", false) === active?.id);
 	if (current === -1) return;
-	state.selection.items[current].element.remove();
-	state.selection.items.splice(current, 1);
-	if (state.selection.items.length === 0) {
-		state.anchor.element.focus();
+	selection.items[current].element.remove();
+	selection.items.splice(current, 1);
+	if (selection.items.length === 0) {
+		anchor.element.focus();
 		return;
 	}
-	const { length } = state.selection.items;
+	const { length } = selection.items;
 	if (current < 0) current = 0;
 	else if (current >= length) current = length - 1;
 	for (let index = 0; index < length; index += 1) {
-		const { button } = state.selection.items[index];
+		const { button } = selection.items[index];
 		button.tabIndex = index === current ? 0 : -1;
 	}
-	state.selection.items[current].button.focus();
+	selection.items[current].button.focus();
 }
 function updateComboboxSelectionItems(state) {
-	if (state.selection == null) return;
-	const localization = getLocalization(state.localizations.global, state.host, "remove", state.localizations.component);
-	const { length } = state.selection.items;
+	const { host, localizations, options, selection } = state.component;
+	if (selection == null) return;
+	const { length } = selection.items;
 	for (let index = 0; index < length; index += 1) {
-		const item = state.selection.items[index];
-		const option = state.options.selected.find((option) => option.id === getData(item.button, "option", false));
+		const item = selection.items[index];
+		const option = options.selected.find((option) => option.id === getData(item.button, "option", false));
 		if (option == null) continue;
 		const optionLabel = option.textContent;
 		const optionValue = getData(option, "value", false) ?? "";
-		setAria(item.button, "label", localize(localization, {
-			label: optionLabel,
-			value: optionValue
-		}, [optionLabel, optionValue]));
+		setAria(item.button, "label", localizations.localize("remove", {
+			arguments: [optionLabel, optionValue],
+			element: host
+		}));
 	}
 }
 //#endregion

package/dist/js/combobox/{event.combobox.d.mts → combobox.event.d.mts}

@@ -1,19 +1,19 @@
-import { c as OuiListboxPreview } from "../listbox.model-BHPA7GM4.mjs";
-import { OuiComboboxState } from "./models.combobox.mjs";
-//#region src/js/combobox/event.combobox.d.ts
+import { h as OptionListPreview } from "../option-list.model-CCPUlPeX.mjs";
+import { l as OuiComboboxState } from "../combobox.model-gjEI2VqZ.mjs";
+//#region src/js/combobox/combobox.event.d.ts
 export declare function onComboboxActivation(state: OuiComboboxState): void;
-export declare function onComboboxApply(state: OuiComboboxState, option: HTMLElement | undefined, _: string[], added: boolean, selected?: HTMLElement[]): void;
+export declare function onComboboxApply(state: OuiComboboxState, option: Element | undefined, _: string[], added: boolean, selected?: Element[]): void;
 export declare function onComboboxClickContent(event: PointerEvent, state: OuiComboboxState): void;
 export declare function onComboboxEnter(state: OuiComboboxState): void;
 export declare function onComboboxEscape(state: OuiComboboxState): void;
-export declare function onComboboxFilter(preview: OuiListboxPreview, state: OuiComboboxState, update: boolean, active?: HTMLElement, emit?: boolean): void;
+export declare function onComboboxFilter(preview: OptionListPreview, state: OuiComboboxState, update: boolean, active?: Element, emit?: boolean): void;
 export declare function onComboboxFocusout(event: FocusEvent): void;
 export declare function onComboboxInput(event: InputEvent): void;
 export declare function onComboboxKeydown(event: KeyboardEvent): void;
-export declare function onComboboxKeydownSelection(event: KeyboardEvent, state: OuiComboboxState, item: HTMLElement): void;
-export declare function onComboboxPreview(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
-export declare function onComboboxRemoveSelection(state: OuiComboboxState, item: HTMLElement): void;
-export declare function onComboboxNavigation(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
+export declare function onComboboxKeydownSelection(event: KeyboardEvent, state: OuiComboboxState, item: Element): void;
+export declare function onComboboxPreview(preview: OptionListPreview, state: OuiComboboxState, active?: Element): void;
+export declare function onComboboxRemoveSelection(state: OuiComboboxState, item: Element): void;
+export declare function onComboboxNavigation(preview: OptionListPreview, state: OuiComboboxState, active?: Element): void;
 export declare function onComboboxSelection(state: OuiComboboxState, hasSelection?: boolean): void;
 export declare function onComboboxTab(state: OuiComboboxState): void;
 export declare function onComboboxToggle(state: OuiComboboxState): void;

package/dist/js/combobox/{event.combobox.mjs → combobox.event.mjs}

@@ -1,2 +1,2 @@
-import { C as skipComboboxNavigation, S as preventComboboxActivation, _ as onComboboxPreview, b as onComboboxTab, c as onComboboxClickContent, d as onComboboxFilter, f as onComboboxFocusout, g as onComboboxNavigation, h as onComboboxKeydownSelection, l as onComboboxEnter, m as onComboboxKeydown, o as onComboboxActivation, p as onComboboxInput, s as onComboboxApply, u as onComboboxEscape, v as onComboboxRemoveSelection, x as onComboboxToggle, y as onComboboxSelection } from "../state.combobox-BWDFHwoi.mjs";
+import { C as skipComboboxNavigation, S as preventComboboxActivation, _ as onComboboxPreview, b as onComboboxTab, c as onComboboxClickContent, d as onComboboxFilter, f as onComboboxFocusout, g as onComboboxNavigation, h as onComboboxKeydownSelection, l as onComboboxEnter, m as onComboboxKeydown, o as onComboboxActivation, p as onComboboxInput, s as onComboboxApply, u as onComboboxEscape, v as onComboboxRemoveSelection, x as onComboboxToggle, y as onComboboxSelection } from "../combobox.state-AstCICiH.mjs";
 export { onComboboxActivation, onComboboxApply, onComboboxClickContent, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxPreview, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab, onComboboxToggle, preventComboboxActivation, skipComboboxNavigation };

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

@@ -0,0 +1,2 @@
+import { i as setComboboxLocalizations, n as getComboboxId, r as hasTextSelection, t as getComboboxAutoComplete } from "../combobox.misc-DRDFk6X8.mjs";
+export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations };

package/dist/js/combobox/combobox.misc.mjs

@@ -0,0 +1,2 @@
+import { D as setComboboxLocalizations, E as hasTextSelection, T as getComboboxId, w as getComboboxAutoComplete } from "../combobox.state-AstCICiH.mjs";
+export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations };

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

@@ -0,0 +1,2 @@
+import { a as OuiComboboxLocalizations, c as OuiComboboxSelectionItem, d as OuiComboboxValues, i as OuiComboboxLabel, l as OuiComboboxState, n as OuiComboboxFilter, o as OuiComboboxOptions, r as OuiComboboxGroup, s as OuiComboboxSelection, t as OuiComboboxAnchor, u as OuiComboboxStateExtras } from "../combobox.model-gjEI2VqZ.mjs";
+export { OuiComboboxAnchor, OuiComboboxFilter, OuiComboboxGroup, OuiComboboxLabel, OuiComboboxLocalizations, OuiComboboxOptions, OuiComboboxSelection, OuiComboboxSelectionItem, OuiComboboxState, OuiComboboxStateExtras, OuiComboboxValues };

package/dist/js/combobox/combobox.state.d.mts

@@ -0,0 +1,9 @@
+import { u as OuiDefaultLocalizations } from "../l10n.model-D1E1u35L.mjs";
+import { a as OuiComboboxLocalizations, l as OuiComboboxState } from "../combobox.model-gjEI2VqZ.mjs";
+//#region src/js/combobox/combobox.state.d.ts
+export declare function initializeCombobox(element: HTMLElement, state: OuiComboboxState): void;
+export declare function onAttachCombobox(state: OuiComboboxState): void;
+export declare function onDetachCombobox(state: OuiComboboxState): void;
+export declare const comboboxLocalizations: OuiDefaultLocalizations<OuiComboboxLocalizations>;
+export declare const comboboxes: Set<OuiComboboxState>;
+//#endregion

package/dist/js/combobox/combobox.state.mjs

@@ -0,0 +1,2 @@
+import { a as onDetachCombobox, i as onAttachCombobox, n as comboboxes, r as initializeCombobox, t as comboboxLocalizations } from "../combobox.state-AstCICiH.mjs";
+export { comboboxLocalizations, comboboxes, initializeCombobox, onAttachCombobox, onDetachCombobox };