@oscarpalmer/oui 0.35.0 → 0.36.0

package/dist/css/combobox.css

@@ -110,7 +110,7 @@
   background-color: var(--oui-yellow-0);
   border-radius: 0.25em 0.25em 0 0;
   position: relative;
-  z-index: 1;
+  z-index: 2;
 }
 
 :where([oui-combobox-filter-input]) {

package/dist/css/listbox.css

@@ -0,0 +1,152 @@
+@charset "UTF-8";
+/*! https://github.com/oscarpalmer/oui */
+
+:where(oui-listbox, [oui-listbox-content]) {
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+:where([oui-listbox-content]) {
+  flex: 1;
+  background-color: var(--oui-absolute);
+  border: 1px solid var(--oui-gray-3);
+  border-radius: 0.5em;
+}
+
+:where([oui-listbox-filter], [oui-listbox-header])::after {
+  content: "";
+  width: 100%;
+  height: 0.25em;
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.125), transparent);
+  position: absolute;
+  bottom: -0.25em;
+  left: 0;
+}
+
+:where([oui-listbox-filter]) {
+  padding: 1em;
+  background-color: var(--oui-yellow-0);
+  border-radius: 0.5em 0.5em 0 0;
+  position: relative;
+  z-index: 2;
+}
+
+:where([oui-listbox-filter-input]) {
+  --oui-background-percentage: 0%;
+  --oui-foreground-percentage: 0%;
+  --oui-outline-percentage: 100%;
+  --oui-outline-value: var(--oui-blue-6);
+  outline: 4px solid color-mix(in oklab, var(--oui-outline-value), transparent var(--oui-outline-percentage));
+  outline-offset: 0;
+  transition: 0.125s ease-in-out;
+  align-content: center;
+  background-color: color-mix(in oklab, var(--oui-background-value), transparent var(--oui-background-percentage));
+  border: 1px solid var(--oui-border-value, var(--oui-gray-3));
+  box-shadow: inset 0 2px 4px -1px var(--oui-gray-3);
+  color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  -webkit-text-fill-color: color-mix(in oklab, var(--oui-foreground-value, inherit), transparent var(--oui-foreground-percentage));
+  --oui-background-value: var(--oui-absolute);
+  width: 100%;
+  padding: 0.5em 0.75em;
+  border-radius: 0.25em;
+  position: relative;
+}
+:where([oui-listbox-filter-input]:not([disabled], [readonly], [aria-disabled=true i]):focus) {
+  --oui-border-value: var(--oui-blue-5);
+  --oui-foreground-value: inherit;
+  --oui-outline-percentage: 75%;
+  --oui-outline-value: var(--oui-blue-6);
+}
+@media (hover: hover) {
+  :where([oui-listbox-filter-input]:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):hover) {
+    --oui-border-value: var(--oui-blue-4);
+    --oui-foreground-percentage: 0%;
+    --oui-foreground-value: inherit;
+    --oui-outline-percentage: 90%;
+    --oui-outline-value: var(--oui-blue-6);
+  }
+}
+:where([oui-listbox-filter-input]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i])) {
+  --oui-foreground-percentage: 25%;
+  font-style: italic;
+}
+:where([oui-listbox-filter-input]:is([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]):focus) {
+  --oui-outline-percentage: 75%;
+}
+:where([oui-listbox-filter-input]:is([disabled], [aria-disabled=true i])) {
+  --oui-background-percentage: 50%;
+}
+
+:where([oui-listbox-header]) {
+  padding: 0.5em 1em;
+  background-color: var(--oui-gray-0);
+  font-size: 0.75em;
+  font-weight: bold;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+:where([oui-listbox-hidden]) {
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  clip-path: inset(50%) !important;
+  overflow: hidden !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+  position: absolute;
+}
+
+:where([oui-listbox-list]) {
+  height: -moz-fit-content;
+  height: fit-content;
+  max-height: max(25vh, 32rem);
+  flex: 1;
+  overflow: auto;
+  border-radius: 0 0 0.5em 0.5em;
+  position: relative;
+}
+
+:where([oui-listbox-list-empty]) {
+  display: none;
+}
+
+:where([oui-listbox-message]) {
+  padding: 1em;
+  flex: 1;
+  align-content: center;
+  text-align: center;
+  font-style: italic;
+}
+
+:where([oui-listbox-option]) {
+  padding: 0.5em 0.75em;
+  outline: 4px solid transparent;
+  outline-offset: -4px;
+  line-height: 1.25;
+  cursor: pointer;
+  transition: 0.125s ease-in-out;
+}
+:where([oui-listbox-option][aria-selected=true i]) {
+  background-color: var(--oui-blue-3);
+  color: var(--oui-blue-9);
+}
+:where(oui-listbox[multiple] [oui-listbox-option][aria-selected=true i])::before {
+  content: "✓";
+  margin: 0 0.75em 0 0;
+}
+@media (hover: hover) {
+  :where(:where(oui-listbox:not([disabled], [readonly], [aria-disabled=true i], [aria-readonly=true i]) [oui-listbox-option]):hover) {
+    background-color: var(--oui-blue-1);
+    color: var(--oui-blue-8);
+  }
+}
+
+:where(oui-listbox:focus-within [oui-listbox-option-active]) {
+  background-color: var(--oui-blue-1);
+  outline-color: var(--oui-blue-4);
+  color: var(--oui-blue-8);
+}
+
+

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 };