@oscarpalmer/oui 0.35.0 → 0.37.0

package/dist/css/tabs.css

@@ -0,0 +1,103 @@
+
+:where(oui-tabs) {
+  display: flex;
+}
+:where(oui-tabs[orientation=horizontal i]) {
+  flex-flow: column nowrap;
+}
+:where(oui-tabs[orientation=vertical i]) {
+  flex-flow: row nowrap;
+}
+
+:where([oui-tabs-content]) {
+  padding: 1em;
+  flex: 1;
+  background-color: var(--oui-absolute);
+}
+:where(oui-tabs[orientation=horizontal i] > [oui-tabs-content]) {
+  border-radius: 0 0 0.5em 0.5em;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125), inset 0 1px 2px -0.5px rgba(0, 0, 0, 0.05), inset 0 2px 4px -1px rgba(0, 0, 0, 0.05);
+}
+:where(oui-tabs[orientation=vertical i] > [oui-tabs-content]) {
+  border-radius: 0 0.5em 0.5em 0;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.125), inset 1px 1px 2px -0.5px rgba(0, 0, 0, 0.05), inset 2px 2px 4px -1px rgba(0, 0, 0, 0.05);
+}
+
+:where([oui-tabs-tab]) {
+  --oui-background-percentage: 25%;
+  --oui-background-value: var(--oui-gray-2);
+  --oui-foreground-percentage: 0%;
+  --oui-foreground-value: var(--oui-gray-8);
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-gray-6);
+  --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
+  --oui-shadow-percentage: 82.5%;
+  --oui-shadow-value: color-mix(
+  	in oklab,
+  	var(--oui-outline-value),
+  	transparent var(--oui-shadow-percentage)
+  );
+  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value), 0 4px 8px -2px var(--oui-shadow-value);
+  padding: 0.5em 0.75em;
+  display: inline-flex;
+  flex-flow: row wrap;
+  gap: 0.75em;
+  align-items: center;
+  border-radius: 0.25em;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  border: none;
+  color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  line-height: 1.25;
+  transition: 0.125s ease-in-out;
+  transition-property: background, outline, box-shadow, color;
+}
+:where([oui-tabs-tab]):focus-visible {
+  --oui-outline-percentage: 75%;
+}
+@media (hover: hover) {
+  :where([oui-tabs-tab]):not([disabled], [aria-disabled=true i]):hover {
+    --oui-background-percentage: 50%;
+    --oui-foreground-percentage: 25%;
+    --oui-shadow-percentage: 90%;
+  }
+}
+:where([oui-tabs-tab]):not([disabled], [aria-disabled=true i]):active {
+  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px 0 var(--oui-shadow-value), inset 0 2px 4px 0 var(--oui-shadow-value);
+}
+:where([oui-tabs-tab])[disabled], :where([oui-tabs-tab])[aria-disabled=true i] {
+  --oui-background-percentage: 80%;
+  --oui-foreground-percentage: 25%;
+  --oui-shadow-percentage: 92.5%;
+  font-style: italic;
+}
+:where([oui-tabs-tab]) {
+  --oui-background-value: var(--oui-blue-3);
+  --oui-foreground-value: var(--oui-blue-8);
+  --oui-outline-value: var(--oui-blue-6);
+  font-size: 0.875rem;
+  align-self: flex-end;
+}
+:where([oui-tabs-tab][aria-selected=true i]) {
+  --oui-background-percentage: 80%;
+  box-shadow: 0 0 0 1px var(--oui-shadow-value), inset 0 1px 2px -0.5px var(--oui-shadow-value), inset 0 2px 4px -1px var(--oui-shadow-value);
+}
+
+:where([oui-tabs-tablist]) {
+  display: flex;
+  gap: 0.5em;
+}
+:where([oui-tabs-tablist][aria-orientation=horizontal i]) {
+  flex-flow: row nowrap;
+}
+:where([oui-tabs-tablist][aria-orientation=horizontal i] > [oui-tabs-tab]) {
+  border-radius: 0.25em 0.25em 0 0;
+}
+:where([oui-tabs-tablist][aria-orientation=vertical i]) {
+  flex-flow: column nowrap;
+}
+:where([oui-tabs-tablist][aria-orientation=vertical i] > [oui-tabs-tab]) {
+  border-radius: 0.25em 0 0 0.25em;
+}
+
+

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

@@ -1,2 +1,2 @@
-import { C as COMBOBOX_TYPES, S as COMBOBOX_TAGNAME, _ as COMBOBOX_MESSAGE_LABEL, a as COMBOBOX_ATTRIBUTE_HEADER, b as COMBOBOX_SELECTOR_OPTION, c as COMBOBOX_ATTRIBUTE_MESSAGE, d as COMBOBOX_ATTRIBUTE_SELECTION, f as COMBOBOX_ATTRIBUTE_SELECTION_ITEM, g as COMBOBOX_KEYS_SELECTION, h as COMBOBOX_KEYS_NAVIGATION, i as COMBOBOX_ATTRIBUTE_FILTER_INPUT, l as COMBOBOX_ATTRIBUTE_OPTION, m as COMBOBOX_KEYS_ACTIVATION, n as COMBOBOX_ATTRIBUTE_CONTENT, o as COMBOBOX_ATTRIBUTE_HIDDEN, p as COMBOBOX_AUTOCOMPLETES, r as COMBOBOX_ATTRIBUTE_FILTER, s as COMBOBOX_ATTRIBUTE_LIST, t as COMBOBOX_ATTRIBUTE_ANCHOR, u as COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, v as COMBOBOX_MESSAGE_SELECT, w as comboboxScrollOptions, x as COMBOBOX_SELECTOR_SELECTION_ITEM, y as COMBOBOX_SELECTOR_ANCHOR } from "../constants.combobox-h_kyDegw.mjs";
-export { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_CONTENT, COMBOBOX_ATTRIBUTE_FILTER, COMBOBOX_ATTRIBUTE_FILTER_INPUT, COMBOBOX_ATTRIBUTE_HEADER, COMBOBOX_ATTRIBUTE_HIDDEN, COMBOBOX_ATTRIBUTE_LIST, COMBOBOX_ATTRIBUTE_MESSAGE, COMBOBOX_ATTRIBUTE_OPTION, COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_KEYS_ACTIVATION, COMBOBOX_KEYS_NAVIGATION, COMBOBOX_KEYS_SELECTION, COMBOBOX_MESSAGE_LABEL, COMBOBOX_MESSAGE_SELECT, COMBOBOX_SELECTOR_ANCHOR, COMBOBOX_SELECTOR_OPTION, COMBOBOX_SELECTOR_SELECTION_ITEM, COMBOBOX_TAGNAME, COMBOBOX_TYPES, comboboxScrollOptions };
+import { a as COMBOBOX_AUTOCOMPLETES, c as COMBOBOX_TAGNAME, d as selectorAnchor, f as selectorContent, i as COMBOBOX_ATTRIBUTE_SELECTION_ITEM, l as messageLabel, m as selectorSelectionItem, n as COMBOBOX_ATTRIBUTE_ANCHOR, o as COMBOBOX_MESSAGES, p as selectorOption, r as COMBOBOX_ATTRIBUTE_SELECTION, s as COMBOBOX_SELECTORS, t as COMBOBOX_ATTRIBUTES, u as messageSelect } from "../constants.combobox-DmRAMC64.mjs";
+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 };

package/dist/js/combobox/constants.combobox.mjs

@@ -1,15 +1,17 @@
 //#region src/js/combobox/constants.combobox.ts
 const COMBOBOX_TAGNAME = "oui-combobox";
 const COMBOBOX_ATTRIBUTE_ANCHOR = `${COMBOBOX_TAGNAME}-anchor`;
-const COMBOBOX_ATTRIBUTE_CONTENT = `${COMBOBOX_TAGNAME}-content`;
-const COMBOBOX_ATTRIBUTE_FILTER = `${COMBOBOX_TAGNAME}-filter`;
-const COMBOBOX_ATTRIBUTE_FILTER_INPUT = `${COMBOBOX_ATTRIBUTE_FILTER}-input`;
-const COMBOBOX_ATTRIBUTE_HEADER = `${COMBOBOX_TAGNAME}-header`;
-const COMBOBOX_ATTRIBUTE_HIDDEN = `${COMBOBOX_TAGNAME}-hidden`;
-const COMBOBOX_ATTRIBUTE_LIST = `${COMBOBOX_TAGNAME}-list`;
-const COMBOBOX_ATTRIBUTE_MESSAGE = `${COMBOBOX_TAGNAME}-message`;
-const COMBOBOX_ATTRIBUTE_OPTION = `${COMBOBOX_TAGNAME}-option`;
-const COMBOBOX_ATTRIBUTE_OPTION_ACTIVE = `${COMBOBOX_TAGNAME}-option-active`;
+const attributeContent = `${COMBOBOX_TAGNAME}-content`;
+const attributeFilter = `${COMBOBOX_TAGNAME}-filter`;
+const attributeFilterInput = `${attributeFilter}-input`;
+const attributeGroup = `${COMBOBOX_TAGNAME}-group`;
+const attributeHeader = `${COMBOBOX_TAGNAME}-header`;
+const attributeHidden = `${COMBOBOX_TAGNAME}-hidden`;
+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([
@@ -18,29 +20,34 @@ const COMBOBOX_AUTOCOMPLETES = /* @__PURE__ */ new Set([
 	"list",
 	"none"
 ]);
-const COMBOBOX_KEYS_ACTIVATION = /* @__PURE__ */ new Set([
-	" ",
-	"Backspace",
-	"Delete",
-	"Enter"
-]);
-const COMBOBOX_KEYS_NAVIGATION = /* @__PURE__ */ new Set([
-	"ArrowDown",
-	"ArrowUp",
-	"PageDown",
-	"PageUp"
-]);
-const COMBOBOX_KEYS_SELECTION = /* @__PURE__ */ new Set(["ArrowRight", "End"]);
-const COMBOBOX_MESSAGE_LABEL = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
-const COMBOBOX_MESSAGE_SELECT = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
-const COMBOBOX_SELECTOR_ANCHOR = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
-const COMBOBOX_SELECTOR_SELECTION_ITEM = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
-const COMBOBOX_SELECTOR_OPTION = `[${COMBOBOX_ATTRIBUTE_OPTION}]`;
-const COMBOBOX_TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);
-const comboboxScrollOptions = {
-	behavior: "auto",
-	block: "nearest",
-	inline: "nearest"
+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,
+	content: attributeContent,
+	empty: attributeListEmpty,
+	filter: attributeFilter,
+	group: attributeGroup,
+	header: attributeHeader,
+	hidden: attributeHidden,
+	input: attributeFilterInput,
+	list: attributeList,
+	message: attributeMessage,
+	option: attributeOption
+};
+const COMBOBOX_MESSAGES = {
+	label: messageLabel,
+	select: messageSelect
+};
+const COMBOBOX_SELECTORS = {
+	anchor: selectorAnchor,
+	content: selectorContent,
+	selectionItem: selectorSelectionItem,
+	option: selectorOption
 };
 //#endregion
-export { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_CONTENT, COMBOBOX_ATTRIBUTE_FILTER, COMBOBOX_ATTRIBUTE_FILTER_INPUT, COMBOBOX_ATTRIBUTE_HEADER, COMBOBOX_ATTRIBUTE_HIDDEN, COMBOBOX_ATTRIBUTE_LIST, COMBOBOX_ATTRIBUTE_MESSAGE, COMBOBOX_ATTRIBUTE_OPTION, COMBOBOX_ATTRIBUTE_OPTION_ACTIVE, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_KEYS_ACTIVATION, COMBOBOX_KEYS_NAVIGATION, COMBOBOX_KEYS_SELECTION, COMBOBOX_MESSAGE_LABEL, COMBOBOX_MESSAGE_SELECT, COMBOBOX_SELECTOR_ANCHOR, COMBOBOX_SELECTOR_OPTION, COMBOBOX_SELECTOR_SELECTION_ITEM, COMBOBOX_TAGNAME, COMBOBOX_TYPES, comboboxScrollOptions };
+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 };

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

@@ -1,110 +1,27 @@
-import { D as OuiComboboxAutoCompleteType, E as OuiComboboxAutoComplete, F as OuiComboboxSelectionItem, I as OuiComboboxState, L as OuiComboboxType, N as OuiComboboxPreview, P as OuiComboboxSelection, k as OuiComboboxGroup } from "../constants.combobox-h_kyDegw.mjs";
+import { c as OuiListboxPreview } from "../listbox.model-CRReGOmu.mjs";
+import { CreateListboxContent, CreateListboxContentParameters } from "../internal/listbox/listbox.dom.mjs";
+import { OuiComboboxSelection, OuiComboboxSelectionItem, OuiComboboxState } from "./models.combobox.mjs";
 //#region src/js/combobox/dom.combobox.d.ts
 type CreateAnchor = {
   container?: HTMLElement;
   element: HTMLElement;
   selection?: OuiComboboxSelection;
 };
-type CreatAnchorParameters = {
-  autocomplete: OuiComboboxAutoComplete;
-  id: string;
-  label: HTMLLabelElement;
-  multiple: boolean;
-  select: HTMLSelectElement;
-  type: OuiComboboxType;
-};
-type CreateContent = {
-  element: HTMLElement;
-  filter?: CreateFilter;
-  list: CreateList;
-  message: HTMLElement;
-};
-type CreateContentParameters = {
-  autocomplete: OuiComboboxAutoComplete;
-  id: string;
-  label: HTMLLabelElement;
-  multiple: boolean;
-  select: HTMLSelectElement;
-  type: OuiComboboxType;
-};
-type CreateFilter = {
-  container: HTMLElement;
-  element: HTMLInputElement;
-};
-type CreateFilterParameters = {
-  autocomplete: OuiComboboxAutoCompleteType;
-  id: string;
-  label: HTMLLabelElement;
-  type: OuiComboboxType;
-};
-type CreateGroupParameters = {
-  autocomplete: OuiComboboxAutoComplete;
-  group: HTMLOptGroupElement;
-  groupOptions: HTMLOptionElement[];
-  selected: HTMLElement[];
-};
-type CreateInputParameters = {
-  autocomplete: OuiComboboxAutoCompleteType;
-  id: string;
-  label: HTMLLabelElement;
-  type: OuiComboboxType;
-  value: string;
-};
-type CreateList = {
-  element: HTMLElement;
-  groups?: OuiComboboxGroup[];
-  options: HTMLElement[];
-  selected: HTMLElement[];
-};
-type CreateListParameters = {
-  autocomplete: OuiComboboxAutoComplete;
-  id: string;
-  label: HTMLLabelElement;
-  multiple: boolean;
-  select: HTMLSelectElement;
-};
-type CreateOptionParameters = {
-  autocomplete: OuiComboboxAutoComplete;
-  group?: string;
-  index: number;
-  option: HTMLOptionElement;
-};
-type CreateOptionsParameters = {
-  autocomplete: OuiComboboxAutoComplete;
-  group?: string;
-  list: HTMLElement;
-  options: HTMLOptionElement[];
-  selected: HTMLElement[];
-};
 type CreateSelectionItemsParameters = {
   container: HTMLElement;
   items: OuiComboboxSelectionItem[];
   options: HTMLElement[];
   state?: OuiComboboxState;
 };
-declare function createComboboxAnchor(parameters: CreatAnchorParameters): CreateAnchor;
-declare function createComboboxButton(parameters: CreatAnchorParameters): CreateAnchor;
-declare function createComboboxContent(parameters: CreateContentParameters): CreateContent;
-declare function createComboboxFilter(parameters: CreateFilterParameters): CreateFilter | undefined;
-declare function createComboboxGroup(parameters: CreateGroupParameters): OuiComboboxGroup;
-declare function createComboboxHeader(group: HTMLOptGroupElement): HTMLElement;
-declare function createComboboxInput(parameters: CreateInputParameters): HTMLInputElement;
-declare function createComboboxList(parameters: CreateListParameters): CreateList;
-declare function createComboboxMessage(): HTMLElement;
-declare function createComboboxOption(parameters: CreateOptionParameters): HTMLElement;
-declare function createComboboxOptions(parameters: CreateOptionsParameters): HTMLElement[];
+declare function createComboboxAnchor(parameters: CreateListboxContentParameters): CreateAnchor;
+declare function createComboboxButton(parameters: CreateListboxContentParameters): CreateAnchor;
+declare function createComboboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
 declare function createComboboxSelection(id: string, select: HTMLSelectElement): OuiComboboxSelection;
 declare function createComboboxSelectionItem(option: HTMLElement, state?: OuiComboboxState): OuiComboboxSelectionItem;
 declare function createComboboxSelectionItems(parameters: CreateSelectionItemsParameters): void;
-declare function setComboboxDisabled(state: OuiComboboxState, value: boolean): void;
-declare function setComboboxReadonly(state: OuiComboboxState, value: boolean): void;
-declare function setComboboxRequired(state: OuiComboboxState, value: boolean): void;
 declare function updateComboboxTabindices(state: OuiComboboxState, active?: HTMLElement): void;
-declare function updateComboboxAnchor(state: OuiComboboxState): void;
-declare function updateComboboxAutocomplete(preview: OuiComboboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
-declare function updateComboboxMessage(state: OuiComboboxState, visible: number): void;
-declare function updateComboboxPreview(preview: OuiComboboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
+declare function updateComboboxAutocomplete(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
 declare function updateComboboxSelection(state: OuiComboboxState, active: HTMLElement | undefined, added: boolean, selected?: HTMLElement[]): void;
 declare function updateComboboxSelectionItems(state: OuiComboboxState): void;
 //#endregion
-export { createComboboxAnchor, createComboboxButton, createComboboxContent, createComboboxFilter, createComboboxGroup, createComboboxHeader, createComboboxInput, createComboboxList, createComboboxMessage, createComboboxOption, createComboboxOptions, createComboboxSelection, createComboboxSelectionItem, createComboboxSelectionItems, setComboboxDisabled, setComboboxReadonly, setComboboxRequired, updateComboboxAnchor, updateComboboxAutocomplete, updateComboboxMessage, updateComboboxPreview, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices };
+export { createComboboxAnchor, createComboboxButton, createComboboxContent, createComboboxSelection, createComboboxSelectionItem, createComboboxSelectionItems, updateComboboxAutocomplete, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices };

package/dist/js/combobox/dom.combobox.mjs

@@ -1,2 +1,204 @@
-import { A as updateComboboxTabindices, C as setComboboxRequired, D as updateComboboxPreview, E as updateComboboxMessage, O as updateComboboxSelection, S as setComboboxReadonly, T as updateComboboxAutocomplete, _ as createComboboxOptions, b as createComboboxSelectionItems, c as createComboboxButton, d as createComboboxGroup, f as createComboboxHeader, g as createComboboxOption, h as createComboboxMessage, k as updateComboboxSelectionItems, l as createComboboxContent, m as createComboboxList, p as createComboboxInput, s as createComboboxAnchor, u as createComboboxFilter, v as createComboboxSelection, w as updateComboboxAnchor, x as setComboboxDisabled, y as createComboboxSelectionItem } from "../data.combobox-B8HMkDOh.mjs";
-export { createComboboxAnchor, createComboboxButton, createComboboxContent, createComboboxFilter, createComboboxGroup, createComboboxHeader, createComboboxInput, createComboboxList, createComboboxMessage, createComboboxOption, createComboboxOptions, createComboboxSelection, createComboboxSelectionItem, createComboboxSelectionItems, setComboboxDisabled, setComboboxReadonly, setComboboxRequired, updateComboboxAnchor, updateComboboxAutocomplete, updateComboboxMessage, updateComboboxPreview, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices };
+import { getLocalization, localize } from "../l10n.mjs";
+import { _ as createListboxValueLabel, f as createListboxInput, l as createListboxFilter, m as createListboxMessage, p as createListboxList } from "../listbox.data-BWd0PCy7.mjs";
+import { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM } from "./constants.combobox.mjs";
+import { setAria } from "@oscarpalmer/toretto/aria";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
+import { getData } from "@oscarpalmer/toretto/data";
+import { createElement } from "@oscarpalmer/toretto/create";
+//#region src/js/combobox/dom.combobox.ts
+function createComboboxAnchor(parameters) {
+	const { select } = parameters;
+	let container;
+	let element;
+	let selection;
+	if (parameters.type === "autocomplete") element = createListboxInput(parameters, select.selectedOptions[0]?.textContent ?? "");
+	else ({container, element, selection} = createComboboxButton(parameters));
+	setAttribute(container ?? element, COMBOBOX_ATTRIBUTE_ANCHOR, "");
+	return {
+		container,
+		element,
+		selection
+	};
+}
+function createComboboxButton(parameters) {
+	const { id, label, multiple, select } = parameters;
+	const element = createElement("button", {
+		aria: {
+			controls: `${id}_content`,
+			expanded: false,
+			haspopup: "listbox",
+			labelledby: `${label.id} ${id}_value`
+		},
+		property: { textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? "" }
+	});
+	if (!multiple) return { element };
+	const container = createElement("div");
+	const selection = createComboboxSelection(id, select);
+	container.append(selection.container, element);
+	return {
+		container,
+		element,
+		selection
+	};
+}
+function createComboboxContent(parameters) {
+	const { id, label } = parameters;
+	const element = createElement("div", {
+		aria: { labelledby: label.id },
+		attribute: {
+			[parameters.attributes.content]: "",
+			popover: ""
+		},
+		property: {
+			id: `${id}_content`,
+			tabIndex: -1
+		}
+	});
+	const filter = createListboxFilter(parameters);
+	const list = createListboxList(parameters);
+	const message = createListboxMessage(parameters.attributes.message);
+	const value = createListboxValueLabel(parameters.id);
+	if (filter != null) element.append(filter.container);
+	element.append(list.element, message, value);
+	return {
+		element,
+		filter,
+		list,
+		message,
+		value
+	};
+}
+function createComboboxSelection(id, select) {
+	const container = createElement("ul", {
+		attribute: { [COMBOBOX_ATTRIBUTE_SELECTION]: "" },
+		property: { id: `${id}_selection` }
+	});
+	const options = [...select.selectedOptions];
+	const items = [];
+	createComboboxSelectionItems({
+		container,
+		items,
+		options
+	});
+	const { button } = items[0] ?? {};
+	if (button != null) button.tabIndex = 0;
+	return {
+		items,
+		container
+	};
+}
+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 button = createElement("button", {
+		aria: { label: localize(localization, {
+			label: optionLabel,
+			value: optionValue
+		}, [optionLabel, optionValue]) },
+		attribute: {
+			[COMBOBOX_ATTRIBUTE_SELECTION_ITEM]: "",
+			tabindex: -1
+		},
+		data: { option: option.id }
+	});
+	const icon = createElement("span", {
+		aria: { hidden: true },
+		property: { innerHTML: "×" }
+	});
+	const label = createElement("span", { property: { textContent: option.textContent } });
+	button.append(icon, label);
+	element.append(button);
+	return {
+		button,
+		element
+	};
+}
+function createComboboxSelectionItems(parameters) {
+	const { container, items, options, state } = parameters;
+	const { length } = options;
+	for (let index = 0; index < length; index += 1) {
+		const option = options[index];
+		const item = createComboboxSelectionItem(option, state);
+		container.append(item.element);
+		items.push(item);
+	}
+}
+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);
+	if (next == null) return;
+	const { length } = state.selection.items;
+	for (let index = 0; index < length; index += 1) {
+		const item = state.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 contentLength = content.length;
+		const filterLength = state.filter.element.value.length;
+		if (preview === "set" || preview === "typed") {
+			state.anchor.element.value = content;
+			state.anchor.element.setSelectionRange(preview === "typed" ? filterLength : contentLength, contentLength);
+		}
+	} else state.anchor.element.textContent = content;
+}
+function updateComboboxSelection(state, active, added, selected) {
+	if (state.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);
+	}
+	if (added) {
+		createComboboxSelectionItems({
+			options,
+			state,
+			container: state.selection.container,
+			items: state.selection.items
+		});
+		return;
+	}
+	let current = state.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();
+		return;
+	}
+	const { length } = state.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];
+		button.tabIndex = index === current ? 0 : -1;
+	}
+	state.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;
+	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));
+		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]));
+	}
+}
+//#endregion
+export { createComboboxAnchor, createComboboxButton, createComboboxContent, createComboboxSelection, createComboboxSelectionItem, createComboboxSelectionItems, updateComboboxAutocomplete, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices };

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

@@ -1,17 +1,23 @@
-import { I as OuiComboboxState } from "../constants.combobox-h_kyDegw.mjs";
+import { c as OuiListboxPreview } from "../listbox.model-CRReGOmu.mjs";
+import { OuiComboboxState } from "./models.combobox.mjs";
 //#region src/js/combobox/event.combobox.d.ts
-declare function onComboboxClickContent(event: PointerEvent, content: HTMLElement): void;
-declare function onComboboxClickDocument(event: PointerEvent): void;
+declare function onComboboxActivation(state: OuiComboboxState): void;
+declare function onComboboxApply(state: OuiComboboxState, option: HTMLElement | undefined, _: string[], added: boolean, selected?: HTMLElement[]): void;
+declare function onComboboxClickContent(event: PointerEvent, state: OuiComboboxState): void;
 declare function onComboboxEnter(state: OuiComboboxState): void;
 declare function onComboboxEscape(state: OuiComboboxState): void;
-declare function onComboboxFilter(type: InputEvent['inputType'], state: OuiComboboxState, manual?: boolean, emit?: boolean): void;
-declare function onComboboxFocusout(state: OuiComboboxState): void;
+declare function onComboboxFilter(preview: OuiListboxPreview, state: OuiComboboxState, update: boolean, active?: HTMLElement, emit?: boolean): void;
+declare function onComboboxFocusout(event: FocusEvent): void;
 declare function onComboboxInput(event: InputEvent): void;
 declare function onComboboxKeydown(event: KeyboardEvent): void;
 declare function onComboboxKeydownSelection(event: KeyboardEvent, state: OuiComboboxState, item: HTMLElement): void;
-declare function onComboboxNavigation(event: KeyboardEvent, state: OuiComboboxState): void;
+declare function onComboboxPreview(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
 declare function onComboboxRemoveSelection(state: OuiComboboxState, item: HTMLElement): void;
-declare function onComboboxSelection(state: OuiComboboxState): void;
+declare function onComboboxNavigation(preview: OuiListboxPreview, state: OuiComboboxState, active?: HTMLElement): void;
+declare function onComboboxSelection(state: OuiComboboxState, hasSelection?: boolean): void;
 declare function onComboboxTab(state: OuiComboboxState): void;
+declare function onComboboxToggle(state: OuiComboboxState): void;
+declare function preventComboboxActivation(state: OuiComboboxState): boolean;
+declare function skipComboboxNavigation(state: OuiComboboxState): boolean;
 //#endregion
-export { onComboboxClickContent, onComboboxClickDocument, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab };
+export { onComboboxActivation, onComboboxApply, onComboboxClickContent, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxPreview, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab, onComboboxToggle, preventComboboxActivation, skipComboboxNavigation };

package/dist/js/combobox/event.combobox.mjs

@@ -1,2 +1,2 @@
-import { B as onComboboxEnter, G as onComboboxKeydown, H as onComboboxFilter, J as onComboboxRemoveSelection, K as onComboboxKeydownSelection, R as onComboboxClickContent, U as onComboboxFocusout, V as onComboboxEscape, W as onComboboxInput, X as onComboboxTab, Y as onComboboxSelection, q as onComboboxNavigation, z as onComboboxClickDocument } from "../data.combobox-B8HMkDOh.mjs";
-export { onComboboxClickContent, onComboboxClickDocument, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab };
+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-4xq0FPCF.mjs";
+export { onComboboxActivation, onComboboxApply, onComboboxClickContent, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxPreview, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab, onComboboxToggle, preventComboboxActivation, skipComboboxNavigation };

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

@@ -1,2 +1,2 @@
-import { Y as setComboboxLocalizations, z as OuiComboboxElement } from "../constants.combobox-h_kyDegw.mjs";
+import { a as setComboboxLocalizations, t as OuiComboboxElement } from "../index-EfkUSals.mjs";
 export { OuiComboboxElement, setComboboxLocalizations };