@oscarpalmer/oui 0.34.0 → 0.36.0

package/dist/js/state.combobox-4xq0FPCF.mjs

@@ -0,0 +1,365 @@
+import { createEmbeddedFloatable } from "./floatable/floatable.embedded.mjs";
+import { getLocalizations, updateLocalizations } from "./l10n.mjs";
+import { LISTBOX_KEYS, LISTBOX_TYPES } from "./internal/listbox/listbox.constants.mjs";
+import { b as updateListboxValueLabel, i as filterListboxOptions, n as filterListbox, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection, v as updateListboxMessage, x as generateListboxIds, y as updateListboxPreview } from "./listbox.data-BWd0PCy7.mjs";
+import { initializeListboxState } from "./internal/listbox/listbox.state.mjs";
+import { COMBOBOX_ATTRIBUTES, COMBOBOX_ATTRIBUTE_SELECTION_ITEM, COMBOBOX_AUTOCOMPLETES, COMBOBOX_MESSAGES, COMBOBOX_SELECTORS, COMBOBOX_TAGNAME } from "./combobox/constants.combobox.mjs";
+import { getAttributeValue, getBooleanAriaValue } from "./internal/misc.mjs";
+import { createComboboxAnchor, createComboboxContent, updateComboboxAutocomplete, updateComboboxSelection, updateComboboxSelectionItems, updateComboboxTabindices } from "./combobox/dom.combobox.mjs";
+import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
+import { setAria } from "@oscarpalmer/toretto/aria";
+import { on } from "@oscarpalmer/toretto/event";
+import { setAttributes } from "@oscarpalmer/toretto/attribute";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { getData } from "@oscarpalmer/toretto/data";
+import { findAncestor, getData as getData$1 } from "@oscarpalmer/toretto";
+import { noop } from "@oscarpalmer/atoms/function";
+//#region src/js/combobox/misc.combobox.ts
+function getComboboxAutoComplete(element, select) {
+	let value;
+	if (select) value = "list";
+	else value = getAttributeValue(element, "autocomplete", COMBOBOX_AUTOCOMPLETES, "none");
+	return {
+		value,
+		both: value === "both",
+		inline: value === "inline",
+		list: value === "list",
+		none: value === "none"
+	};
+}
+function getComboboxId() {
+	index += 1;
+	return `oui_combobox_${index}`;
+}
+function hasTextSelection(element) {
+	return element instanceof HTMLInputElement && element.selectionStart !== element.selectionEnd;
+}
+function setComboboxLocalizations(first, second) {
+	updateComboboxLocalizations(comboboxLocalizations, comboboxLocalizations.values, first, second);
+}
+function updateComboboxLocalizations(instance, destination, first, second) {
+	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
+		for (const state of comboboxStates.set) {
+			updateListboxMessage(state);
+			updateListboxValueLabel(state);
+			updateComboboxSelectionItems(state);
+		}
+	});
+}
+let index = 0;
+//#endregion
+//#region src/js/combobox/event.combobox.ts
+function onComboboxActivation(state) {
+	state.floatable.show();
+}
+function onComboboxApply(state, option, _, added, selected) {
+	updateComboboxSelection(state, option, added, selected);
+}
+function onComboboxClickContent(event, state) {
+	if (state == null) return;
+	if (state.disabled) return;
+	const option = findAncestor(event, COMBOBOX_SELECTORS.option);
+	if (!(option instanceof HTMLElement)) state.filter.element.focus();
+	else if (state.readonly) onComboboxPreview("set", state, option);
+	else toggleListboxOption(state, option);
+}
+function onComboboxClickDocument(event) {
+	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
+	const state = comboboxStates.map.get(combobox);
+	if (combobox == null || state == null) return;
+	if (findAncestor(event, COMBOBOX_SELECTORS.content) != null) {
+		onComboboxClickContent(event, state);
+		return;
+	}
+	const label = findAncestor(event, "label");
+	if (label != null) {
+		if (label === state.label.element && combobox.type === "select") {
+			state.anchor.element.focus();
+			if (!state.disabled) state.floatable.show();
+		}
+		return;
+	}
+	const selection = findAncestor(event, `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`);
+	if (selection != null) {
+		const option = state.options.selected.find((option) => option.id === getData$1(selection, "option", false));
+		if (state.disabled) state.anchor.element.focus();
+		else if (state.readonly) updateComboboxTabindices(state, option);
+		else toggleListboxOption(state, option);
+		return;
+	}
+	if (findAncestor(event, COMBOBOX_SELECTORS.anchor) != null && !state.disabled) {
+		state.floatable.show();
+		return;
+	}
+}
+function onComboboxEnter(state) {
+	if (state.disabled || state.readonly) return;
+	if (hasTextSelection(state.anchor.element)) onComboboxSelection(state, true);
+	else toggleListboxOption(state, state.active);
+}
+function onComboboxEscape(state) {
+	state.floatable.hide();
+}
+function onComboboxFilter(preview, state, update, active, emit) {
+	if (state.autocomplete.none) applyListboxSelection({
+		state,
+		added: false,
+		emit: (emit ?? true) && update
+	});
+	else updateListboxPreview(preview, state, active);
+}
+function onComboboxFocusout(event) {
+	setTimeout(() => {
+		const combobox = findAncestor(event, COMBOBOX_TAGNAME);
+		const state = comboboxStates.map.get(combobox);
+		if (combobox == null || state == null || state.disabled || state.readonly || state.type === "select" || state.host === document.activeElement || state.host.contains(document.activeElement)) return;
+		const option = filterListboxOption(state, state.filter.element.value, true);
+		applyListboxSelection({
+			option,
+			state,
+			added: false,
+			selected: option == null ? [] : [option]
+		});
+	});
+}
+function onComboboxInput(event) {
+	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
+	const state = comboboxStates.map.get(combobox);
+	if (combobox != null && state != null && event.target === state.filter.element) filterListbox(event.inputType, state);
+}
+function onComboboxKeydown(event) {
+	const combobox = findAncestor(event, COMBOBOX_TAGNAME);
+	const state = comboboxStates.map.get(combobox);
+	if (combobox == null || state == null) return;
+	const item = findAncestor(event, COMBOBOX_SELECTORS.selectionItem);
+	if (item instanceof HTMLElement) onComboboxKeydownSelection(event, state, item);
+	else processListboxKeydown(event, state);
+}
+function onComboboxKeydownSelection(event, state, item) {
+	if (LISTBOX_KEYS.activation.has(event.key)) {
+		event.preventDefault();
+		onComboboxRemoveSelection(state, item);
+		return;
+	}
+	if (state.disabled || state.selection == null) return;
+	const { length } = state.selection.items;
+	const index = state.selection.items.findIndex((selection) => selection.button === item);
+	let next;
+	switch (event.key) {
+		case "ArrowDown":
+			state.anchor.element.focus();
+			state.anchor.element.click();
+			return;
+		case "ArrowRight":
+		case "ArrowLeft":
+			next = clamp(index + (event.key === "ArrowRight" ? 1 : -1), 0, length - 1, true);
+			break;
+		case "End":
+			next = length - 1;
+			break;
+		case "Home": next = 0;
+	}
+	if (next == null) return;
+	event.preventDefault();
+	for (let index = 0; index < length; index += 1) {
+		const { button } = state.selection.items[index];
+		const selected = index === next;
+		button.tabIndex = selected ? 0 : -1;
+		if (selected) button.focus();
+	}
+}
+function onComboboxPreview(preview, state, active) {
+	updateComboboxAutocomplete(preview, state, active);
+}
+function onComboboxRemoveSelection(state, item) {
+	if (state.disabled || state.readonly) return;
+	const option = state.options.selected.find((option) => option.id === getData$1(item, "option", false));
+	if (option != null) toggleListboxOption(state, option);
+}
+function onComboboxNavigation(preview, state, active) {
+	updateListboxPreview(preview, state, active);
+}
+function onComboboxSelection(state, hasSelection) {
+	if (!(hasSelection ?? hasTextSelection(state.anchor.element))) return;
+	state.filter.value = state.anchor.element === state.filter.element ? state.filter.element.value : "";
+	toggleListboxOption(state, filterListboxOptions(state) ?? state.active);
+}
+function onComboboxTab(state) {
+	setTimeout(() => {
+		if (state.host === document.activeElement) return;
+		if (state.selection?.container.contains(document.activeElement) || !state.host.contains(document.activeElement)) state.floatable.hide();
+	});
+}
+function onComboboxToggle(state) {
+	if (!state.multiple) state.floatable.hide();
+}
+function preventComboboxActivation(state) {
+	return state.floatable.open;
+}
+function skipComboboxNavigation(state) {
+	if (state.floatable.open) return false;
+	state.floatable.show();
+	return true;
+}
+on(document, "click", onComboboxClickDocument);
+on(document, "focusout", onComboboxFocusout);
+on(document, "input", onComboboxInput, { passive: false });
+on(document, "keydown", onComboboxKeydown, { passive: false });
+//#endregion
+//#region src/js/combobox/state.combobox.ts
+function createComboboxState(element, internals) {
+	const select = element.querySelector("select");
+	if (select == null || select.id === "") throw new Error(COMBOBOX_MESSAGES.select);
+	const label = element.querySelector(`label[for="${select.id}"]`);
+	if (label == null) throw new Error(COMBOBOX_MESSAGES.label);
+	element.id = select.id;
+	const disabled = getBooleanAriaValue(element, "disabled") || select.disabled;
+	const multiple = element.multiple || select.multiple;
+	const readonly = getBooleanAriaValue(element, "readonly");
+	const required = getBooleanAriaValue(element, "required") || select.required;
+	const id = getComboboxId();
+	const type = multiple ? "select" : getAttributeValue(element, "type", LISTBOX_TYPES, "select");
+	const autocomplete = getComboboxAutoComplete(element, type === "select");
+	setAttributes(element, {
+		autocomplete: autocomplete.value,
+		name: select.name === "" ? select.id : select.name
+	});
+	const labelId = label.id;
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+	generateListboxIds(id, select);
+	const parameters = {
+		autocomplete,
+		element,
+		id,
+		label,
+		multiple,
+		select,
+		type,
+		attributes: COMBOBOX_ATTRIBUTES,
+		listbox: false
+	};
+	const anchor = createComboboxAnchor(parameters);
+	const content = createComboboxContent(parameters);
+	const { selected } = content.list.options;
+	const values = selected.length === 0 ? [""] : selected.map((option) => getData(option, "value", false) ?? "");
+	const state = {
+		autocomplete,
+		disabled,
+		id,
+		internals,
+		multiple,
+		readonly,
+		required,
+		select,
+		type,
+		active: selected[0],
+		anchor: {
+			container: anchor.container,
+			element: anchor.element
+		},
+		attributes: COMBOBOX_ATTRIBUTES,
+		callbacks: comboboxCallbacks,
+		content: content.element,
+		elements: [
+			element,
+			anchor.element,
+			content.filter?.element
+		],
+		filter: {
+			element: content.filter?.element ?? anchor.element,
+			value: ""
+		},
+		floatable: void 0,
+		groups: content.list.groups,
+		host: element,
+		label: {
+			element: label,
+			id: labelId
+		},
+		list: content.list.element,
+		listbox: false,
+		listeners: [],
+		localizations: {
+			component: {},
+			global: comboboxLocalizations
+		},
+		message: content.message,
+		name: element.name,
+		options: {
+			selected,
+			all: content.list.options.all
+		},
+		selection: anchor.selection,
+		values: {
+			current: values.slice(),
+			initial: values.slice(),
+			label: content.value
+		}
+	};
+	return initializeListboxState(state, comboboxStates, onAttachCombobox);
+}
+function onAttachCombobox(state) {
+	const { anchor, content, filter, select } = state;
+	select.hidden = true;
+	select.insertAdjacentElement("afterend", anchor.container ?? anchor.element);
+	(anchor.container ?? anchor.element).insertAdjacentElement("afterend", content);
+	select.remove();
+	state.floatable = createEmbeddedFloatable(anchor.container ?? anchor.element, content, {
+		position: "below-start",
+		reusable: false
+	});
+	state.floatable.update();
+	state.listeners.push(on(content, "toggle", () => {
+		setAria(anchor.element, "expanded", state.floatable.open);
+		setAria(filter.element, "activedescendant", state.floatable.open ? state.active?.id : void 0);
+		if (state.floatable.open) filter.element.focus();
+	}));
+}
+function onDetachCombobox(state) {
+	const { content, floatable, label, select } = state;
+	floatable.destroy();
+	const anchor = state.anchor.container ?? state.anchor.element;
+	anchor.insertAdjacentElement("beforebegin", select);
+	anchor.remove();
+	content.remove();
+	label.element.htmlFor = select.id;
+	label.element.id = state.label.id;
+	select.hidden = false;
+}
+const comboboxCallbacks = {
+	data: {
+		onApply: onComboboxApply,
+		onFilter: onComboboxFilter,
+		onForm: noop,
+		onPreview: onComboboxPreview,
+		onToggle: onComboboxToggle
+	},
+	keydown: {
+		onActivation: onComboboxActivation,
+		onEnter: onComboboxEnter,
+		onEscape: onComboboxEscape,
+		onNavigation: onComboboxNavigation,
+		onSelection: onComboboxSelection,
+		onTab: onComboboxTab,
+		onToggle: onComboboxToggle,
+		preventActivation: preventComboboxActivation,
+		skipNavigation: skipComboboxNavigation
+	}
+};
+const comboboxLocalizations = getLocalizations({
+	empty: "No results found",
+	input: "Please enter a value",
+	invalid: "Please select an option from the list",
+	max: (max) => `Please select fewer options (maximum is ${max})`,
+	min: (min) => `Please select more options (minimum is ${min})`,
+	remove: (label) => `Remove ${label}`,
+	results: (amount) => `${amount} results available`,
+	selected: (amount) => `${amount} selected`
+});
+const comboboxStates = {
+	map: /* @__PURE__ */ new WeakMap(),
+	set: /* @__PURE__ */ new Set()
+};
+//#endregion
+export { skipComboboxNavigation as C, setComboboxLocalizations as D, hasTextSelection as E, updateComboboxLocalizations as O, preventComboboxActivation as S, getComboboxId as T, onComboboxPreview as _, onDetachCombobox as a, onComboboxTab as b, onComboboxClickContent as c, onComboboxFilter as d, onComboboxFocusout as f, onComboboxNavigation as g, onComboboxKeydownSelection as h, onAttachCombobox as i, onComboboxEnter as l, onComboboxKeydown as m, comboboxStates as n, onComboboxActivation as o, onComboboxInput as p, createComboboxState as r, onComboboxApply as s, comboboxLocalizations as t, onComboboxEscape as u, onComboboxRemoveSelection as v, getComboboxAutoComplete as w, onComboboxToggle as x, onComboboxSelection as y };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.34.0",
+	"version": "0.36.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -49,6 +49,10 @@
 			"types": "./dist/js/focus-trap/focus-trap.standalone.d.mts",
 			"default": "./dist/js/focus-trap/focus-trap.standalone.mjs"
 		},
+		"./listbox": {
+			"types": "./dist/js/listbox/index.d.mts",
+			"default": "./dist/js/listbox/index.mjs"
+		},
 		"./movable": {
 			"types": "./dist/js/movable/movable.standalone.d.mts",
 			"default": "./dist/js/movable/movable.standalone.mjs"
@@ -95,10 +99,10 @@
 	},
 	"dependencies": {
 		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.50.1"
+		"@oscarpalmer/toretto": "^0.51"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.77",
+		"@oxlint/plugins": "^1.78",
 		"@vitest/coverage-istanbul": "^4.1",
 		"autoprefixer": "^10.5",
 		"concurrently": "^10",

package/src/css/combobox.scss

@@ -95,7 +95,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/src/css/listbox.scss

@@ -0,0 +1,149 @@
+/*! https://github.com/oscarpalmer/oui */
+
+@use './mixins.scss' as mixins;
+
+: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, rgb(0 0 0 / 12.5%), 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;
+}
+
+[oui-listbox-filter-input] {
+	:where(&) {
+		@include mixins.input;
+
+		--oui-background-value: var(--oui-absolute);
+
+		width: 100%;
+		padding: 0.5em 0.75em;
+		border-radius: 0.25em;
+		position: relative;
+	}
+
+	:where(&:not([disabled], [readonly], [aria-disabled='true' i]):focus) {
+		@include mixins.input-focus;
+	}
+
+	@media (hover: hover) {
+		:where(
+			&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):hover
+		) {
+			@include mixins.input-hover;
+		}
+	}
+
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])) {
+		--oui-foreground-percentage: 25%;
+
+		font-style: italic;
+	}
+
+	:where(&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]):focus) {
+		--oui-outline-percentage: 75%;
+	}
+
+	:where(&:is([disabled], [aria-disabled='true' i])) {
+		--oui-background-percentage: 50%;
+	}
+}
+
+:where([oui-listbox-header]) {
+	padding: 0.5em calc(0.75em / 0.75);
+	background-color: var(--oui-gray-0);
+	font-size: 0.75em;
+	font-weight: bold;
+	position: sticky;
+	top: 0;
+	z-index: 1;
+}
+
+:where([oui-listbox-hidden]) {
+	@include mixins.visually-hidden;
+
+	position: absolute;
+}
+
+:where([oui-listbox-list]) {
+	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;
+}
+
+[oui-listbox-option] {
+	:where(&) {
+		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(&[aria-selected='true' i]) {
+		background-color: var(--oui-blue-3);
+		color: var(--oui-blue-9);
+	}
+
+	:where(oui-listbox[multiple] &[aria-selected='true' i])::before {
+		content: '✓';
+		margin: 0 0.75em 0 0;
+	}
+
+	:where(
+		oui-listbox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) &
+	) {
+		@media (hover: hover) {
+			:where(&: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/src/js/combobox/constants.combobox.ts

@@ -1,4 +1,7 @@
-import type {OuiComboboxAutoCompleteType, OuiComboboxType} from './models.combobox';
+import type {
+	OuiListboxAttributes,
+	OuiListboxAutoCompleteType,
+} from '../internal/listbox/listbox.model';
 
 // #region Variables
 
@@ -6,57 +9,75 @@ export const COMBOBOX_TAGNAME = 'oui-combobox';
 
 export const COMBOBOX_ATTRIBUTE_ANCHOR = `${COMBOBOX_TAGNAME}-anchor`;
 
-export const COMBOBOX_ATTRIBUTE_CONTENT = `${COMBOBOX_TAGNAME}-content`;
+const attributeContent = `${COMBOBOX_TAGNAME}-content`;
 
-export const COMBOBOX_ATTRIBUTE_FILTER = `${COMBOBOX_TAGNAME}-filter`;
+const attributeFilter = `${COMBOBOX_TAGNAME}-filter`;
 
-export const COMBOBOX_ATTRIBUTE_FILTER_INPUT = `${COMBOBOX_ATTRIBUTE_FILTER}-input`;
+const attributeFilterInput = `${attributeFilter}-input`;
 
-export const COMBOBOX_ATTRIBUTE_HEADER = `${COMBOBOX_TAGNAME}-header`;
+const attributeGroup = `${COMBOBOX_TAGNAME}-group`;
 
-export const COMBOBOX_ATTRIBUTE_HIDDEN = `${COMBOBOX_TAGNAME}-hidden`;
+const attributeHeader = `${COMBOBOX_TAGNAME}-header`;
 
-export const COMBOBOX_ATTRIBUTE_LIST = `${COMBOBOX_TAGNAME}-list`;
+const attributeHidden = `${COMBOBOX_TAGNAME}-hidden`;
 
-export const COMBOBOX_ATTRIBUTE_MESSAGE = `${COMBOBOX_TAGNAME}-message`;
+const attributeList = `${COMBOBOX_TAGNAME}-list`;
 
-export const COMBOBOX_ATTRIBUTE_OPTION = `${COMBOBOX_TAGNAME}-option`;
+const attributeListEmpty = `${attributeList}-empty`;
 
-export const COMBOBOX_ATTRIBUTE_OPTION_ACTIVE = `${COMBOBOX_TAGNAME}-option-active`;
+const attributeMessage = `${COMBOBOX_TAGNAME}-message`;
+
+const attributeOption = `${COMBOBOX_TAGNAME}-option`;
+
+const attributeOptionActive = `${COMBOBOX_TAGNAME}-option-active`;
 
 export const COMBOBOX_ATTRIBUTE_SELECTION = `${COMBOBOX_TAGNAME}-selection`;
 
 export const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = `${COMBOBOX_TAGNAME}-selection-item`;
 
-export const COMBOBOX_AUTOCOMPLETES = new Set<OuiComboboxAutoCompleteType>([
+export const COMBOBOX_AUTOCOMPLETES = new Set<OuiListboxAutoCompleteType>([
 	'both',
 	'inline',
 	'list',
 	'none',
 ]);
 
-export const COMBOBOX_KEYS_ACTIVATION = new Set([' ', 'Backspace', 'Delete', 'Enter']);
-
-export const COMBOBOX_KEYS_NAVIGATION = new Set(['ArrowDown', 'ArrowUp', 'PageDown', 'PageUp']);
+export const messageLabel = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
 
-export const COMBOBOX_KEYS_SELECTION = new Set(['ArrowRight', 'End']);
+export const messageSelect = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
 
-export const COMBOBOX_MESSAGE_LABEL = `<${COMBOBOX_TAGNAME}> must contain a <label> element for the <select> element`;
+export const selectorAnchor = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
 
-export const COMBOBOX_MESSAGE_SELECT = `<${COMBOBOX_TAGNAME}> must contain a valid <select> element`;
+export const selectorContent = `[${attributeContent}]`;
 
-export const COMBOBOX_SELECTOR_ANCHOR = `[${COMBOBOX_ATTRIBUTE_ANCHOR}]`;
+export const selectorOption = `[${attributeOption}]`;
 
-export const COMBOBOX_SELECTOR_SELECTION_ITEM = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
+export const selectorSelectionItem = `[${COMBOBOX_ATTRIBUTE_SELECTION_ITEM}]`;
 
-export const COMBOBOX_SELECTOR_OPTION = `[${COMBOBOX_ATTRIBUTE_OPTION}]`;
+export const COMBOBOX_ATTRIBUTES: OuiListboxAttributes = {
+	active: attributeOptionActive,
+	content: attributeContent,
+	empty: attributeListEmpty,
+	filter: attributeFilter,
+	group: attributeGroup,
+	header: attributeHeader,
+	hidden: attributeHidden,
+	input: attributeFilterInput,
+	list: attributeList,
+	message: attributeMessage,
+	option: attributeOption,
+};
 
-export const COMBOBOX_TYPES = new Set<OuiComboboxType>(['autocomplete', 'select']);
+export const COMBOBOX_MESSAGES = {
+	label: messageLabel,
+	select: messageSelect,
+};
 
-export const comboboxScrollOptions: ScrollIntoViewOptions = {
-	behavior: 'auto',
-	block: 'nearest',
-	inline: 'nearest',
+export const COMBOBOX_SELECTORS = {
+	anchor: selectorAnchor,
+	content: selectorContent,
+	selectionItem: selectorSelectionItem,
+	option: selectorOption,
 };
 
 // #endregion