@oscarpalmer/oui 0.35.0 → 0.36.0

package/dist/js/misc.listbox-BI-XsTOf.mjs

@@ -0,0 +1,197 @@
+import { getLocalizations, updateLocalizations } from "./l10n.mjs";
+import { b as updateListboxValueLabel, c as createListboxContent, n as filterListbox, 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 { getBooleanAriaValue } from "./internal/misc.mjs";
+import { processListboxKeydown } from "./internal/listbox/listbox.event.mjs";
+import { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME } from "./listbox/constants.listbox.mjs";
+import { on } from "@oscarpalmer/toretto/event";
+import { setAttribute, setAttributes } from "@oscarpalmer/toretto/attribute";
+import { findAncestor } from "@oscarpalmer/toretto/find";
+import { getData } from "@oscarpalmer/toretto/data";
+import { noop } from "@oscarpalmer/atoms/function";
+//#region src/js/listbox/event.listbox.ts
+function onListboxClick(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox);
+	if (listbox == null || state == null) return;
+	const option = findAncestor(event, LISTBOX_SELECTORS.option);
+	if (option == null) return;
+	if (state.disabled) state.filter.element.focus();
+	else if (state.readonly) updateListboxPreview("none", state, option, false);
+	else toggleListboxOption(state, option);
+}
+function onListboxEnter(state) {
+	if (!state.disabled && !state.readonly) toggleListboxOption(state, state.active);
+}
+function onListboxFilter(preview, state, _, active) {
+	updateListboxPreview(preview, state, active);
+}
+function onListboxInput(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox);
+	if (state?.filter.element === event.target) filterListbox(event.inputType, state);
+}
+function onListboxKeydown(event) {
+	const listbox = findAncestor(event, LISTBOX_TAGNAME);
+	const state = listboxStates.map.get(listbox);
+	if (state?.filter.element === event.target) processListboxKeydown(event, state);
+}
+function onListboxNavigation(preview, state, active) {
+	if (state.multiple || state.readonly) updateListboxPreview(preview, state, active);
+	else applyListboxSelection({
+		state,
+		option: active,
+		added: true,
+		selected: active == null ? [] : [active]
+	});
+}
+function onListboxToggle(state) {
+	state.filter.element.focus();
+}
+on(document, "click", onListboxClick);
+on(document, "input", onListboxInput);
+on(document, "keydown", onListboxKeydown, { passive: false });
+//#endregion
+//#region src/js/listbox/state.listbox.ts
+function createListboxState(element, internals) {
+	const select = element.querySelector("select");
+	if (select == null) throw new Error(LISTBOX_MESSAGES.select);
+	const label = element.querySelector(`label[for="${select.id}"]`);
+	if (label == null) throw new Error(LISTBOX_MESSAGES.label);
+	element.id = select.id;
+	setAttribute(element, "name", select.name === "" ? select.id : select.name);
+	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;
+	setAttributes(element, {
+		autocomplete: "none",
+		name: select.name === "" ? select.id : select.name
+	});
+	const id = getListboxId();
+	const labelId = label.id;
+	label.htmlFor = id;
+	label.id = `${id}_label`;
+	generateListboxIds(id, select);
+	const type = "select";
+	const content = createListboxContent({
+		element,
+		id,
+		label,
+		multiple,
+		select,
+		type,
+		attributes: LISTBOX_ATTRIBUTES,
+		autocomplete: listboxAutoComplete,
+		listbox: true
+	});
+	const { selected } = content.list.options;
+	const values = selected.length === 0 ? [""] : selected.map((option) => getData(option, "value", false) ?? "");
+	const state = {
+		disabled,
+		id,
+		internals,
+		message: content.message,
+		multiple,
+		readonly,
+		required,
+		select,
+		type,
+		active: selected[0],
+		attributes: LISTBOX_ATTRIBUTES,
+		autocomplete: listboxAutoComplete,
+		callbacks: listboxCallbacks,
+		content: content.element,
+		elements: [element, content.filter.element],
+		filter: {
+			element: content.filter.element,
+			value: ""
+		},
+		host: element,
+		label: {
+			id: labelId,
+			element: label
+		},
+		list: content.list.element,
+		listeners: [],
+		listbox: true,
+		localizations: {
+			component: {},
+			global: listboxLocalizations
+		},
+		name: element.name,
+		options: content.list.options,
+		values: {
+			current: values.slice(),
+			initial: values.slice(),
+			label: content.value
+		}
+	};
+	return initializeListboxState(state, listboxStates, onAttachListbox);
+}
+function onAttachListbox(state) {
+	const { content, select } = state;
+	select.hidden = true;
+	select.insertAdjacentElement("afterend", content);
+	select.remove();
+}
+function onDetachListbox(state) {
+	const { content, select } = state;
+	content.insertAdjacentElement("beforebegin", select);
+	content.remove();
+	select.hidden = false;
+}
+const listboxAutoComplete = {
+	both: false,
+	inline: false,
+	list: false,
+	none: true
+};
+const listboxCallbacks = {
+	data: {
+		onApply: noop,
+		onFilter: onListboxFilter,
+		onForm: noop,
+		onPreview: noop,
+		onToggle: onListboxToggle
+	},
+	keydown: {
+		onEnter: onListboxEnter,
+		onNavigation: onListboxNavigation,
+		onToggle: onListboxToggle
+	}
+};
+const listboxLocalizations = getLocalizations({
+	empty: "No results found",
+	input: "",
+	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: "",
+	results: (amount) => `${amount} results available`,
+	selected: (amount) => `${amount} selected`
+});
+const listboxStates = {
+	map: /* @__PURE__ */ new WeakMap(),
+	set: /* @__PURE__ */ new Set()
+};
+//#endregion
+//#region src/js/listbox/misc.listbox.ts
+function getListboxId() {
+	index += 1;
+	return `oui_listbox_${index}`;
+}
+function setListboxLocalizations(first, second) {
+	updateListboxLocalizations(listboxLocalizations, listboxLocalizations.values, first, second);
+}
+function updateListboxLocalizations(instance, destination, first, second) {
+	updateLocalizations(instance, typeof first === "string" ? { [first]: second } : first, destination, () => {
+		for (const state of listboxStates.set) {
+			updateListboxMessage(state);
+			updateListboxValueLabel(state);
+		}
+	});
+}
+let index = 0;
+//#endregion
+export { listboxLocalizations as a, onDetachListbox as c, onListboxNavigation as d, onListboxToggle as f, createListboxState as i, onListboxEnter as l, setListboxLocalizations as n, listboxStates as o, updateListboxLocalizations as r, onAttachListbox as s, getListboxId as t, onListboxFilter as u };

package/dist/js/misc.listbox-gnoJhrTr.d.mts

@@ -0,0 +1,20 @@
+import { t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
+import { o as OuiListboxLocalizations } from "./listbox.model-CRReGOmu.mjs";
+//#region src/js/listbox/misc.listbox.d.ts
+declare function getListboxId(): string;
+/**
+ * Set listbox localizations for a specific language
+ *
+ * @param language Language code
+ * @param localizations Localizations for language
+ */
+declare function setListboxLocalizations(language: string, localizations: Partial<OuiListboxLocalizations>): void;
+/**
+ * Set listbox localizations for one or more languages
+ *
+ * @param localizations Localizations for one or more languages
+ */
+declare function setListboxLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
+declare function updateListboxLocalizations(instance: OuiLocalizations<OuiListboxLocalizations>, destination: Record<string, Partial<OuiListboxLocalizations>>, first: string | Record<string, Partial<OuiListboxLocalizations>>, second?: Partial<OuiListboxLocalizations>): void;
+//#endregion
+export { setListboxLocalizations as n, updateListboxLocalizations as r, getListboxId as t };

package/dist/js/sortable/sortable.embedded.mjs

@@ -98,8 +98,10 @@ function onEnd(event, globals, item, reset) {
 	};
 	const target = getElementFromPosition(position)[0];
 	let element = findAncestor(target, SELECTOR_ITEM);
-	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
-	else element = element.nextElementSibling;
+	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) {
+		if (getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION) === "after") element = element.previousElementSibling;
+		else element = element.nextElementSibling;
+	}
 	let insert = "insert";
 	let toInstance;
 	let toState;

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.35.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]) {