@oscarpalmer/oui 0.35.0 → 0.37.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/dist/js/tabs.d.mts

@@ -0,0 +1,25 @@
+//#region src/js/tabs.d.ts
+declare global {
+  interface HTMLElementTagNameMap {
+    [TAGNAME]: OuiTabsElement;
+  }
+}
+declare class OuiTabsEvent extends Event {
+  oldIndex: number;
+  newIndex: number;
+  constructor(name: 'oui:beforechange' | 'oui:change', oldIndex: number, newIndex: number, cancelable: boolean);
+}
+declare class OuiTabsElement extends HTMLElement {
+  #private;
+  static observedAttributes: string[];
+  get active(): number;
+  set active(value: number);
+  get panel(): HTMLElement;
+  get tab(): HTMLButtonElement;
+  attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+}
+declare const TAGNAME = "oui-tabs";
+//#endregion
+export { OuiTabsElement, OuiTabsEvent };

package/dist/js/tabs.mjs

@@ -0,0 +1,240 @@
+import { OuiNavigable, getNavigableOrientation } from "./internal/navigable.mjs";
+import { getAria, setAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { createElement } from "@oscarpalmer/toretto/create";
+//#region src/js/tabs.ts
+var OuiTabsEvent = class extends Event {
+	oldIndex;
+	newIndex;
+	constructor(name, oldIndex, newIndex, cancelable) {
+		super(name, {
+			cancelable,
+			bubbles: true,
+			composed: true
+		});
+		this.oldIndex = oldIndex;
+		this.newIndex = newIndex;
+	}
+};
+var OuiTabsElement = class extends HTMLElement {
+	static observedAttributes = ["active"];
+	#state;
+	get active() {
+		return this.#state?.active ?? 0;
+	}
+	set active(value) {
+		setActive(this.#state, value);
+	}
+	get panel() {
+		return this.#state?.panels.elements[this.active];
+	}
+	get tab() {
+		return this.#state?.tabList.tabs[this.active];
+	}
+	attributeChangedCallback(name, _, value) {
+		switch (name) {
+			case "active": setActive(this.#state, value);
+		}
+	}
+	connectedCallback() {
+		if (this.#state == null) this.#state = initializeTabs(this);
+		else attachTabs(this.#state);
+	}
+	disconnectedCallback() {
+		if (this.#state != null) detachTabs(this.#state);
+	}
+};
+function attachTabs(state) {
+	state.navigable = new OuiNavigable(state.tabList.element, {
+		orientation: state.orientation,
+		selector: SELECTOR_TAB,
+		vertical: false,
+		onActivate: (navigable) => {
+			const index = state.tabList.tabs.indexOf(navigable.active.element);
+			if (index > -1 && index !== state.active) onActivate(state, index);
+		}
+	});
+	const { length } = state.panels.elements;
+	for (let index = 0; index < length; index += 1) {
+		const panel = state.panels.elements[index];
+		panel.hidden = index !== state.active;
+		panel.role = "tabpanel";
+		if (index === 0) {
+			panel.insertAdjacentElement("beforebegin", state.tabList.element);
+			panel.insertAdjacentElement("beforebegin", state.content);
+		}
+		state.content.append(panel);
+	}
+}
+function createContent(prefix, panels, active) {
+	const content = createElement("div", { attribute: { [ATTRIBUTE_CONTENT]: "" } });
+	const { length } = panels;
+	const hidden = [];
+	const roles = [];
+	for (let index = 0; index < length; index += 1) {
+		const panel = panels[index];
+		hidden.push(panel.hidden);
+		roles.push(panel.role);
+		panel.hidden = index !== active;
+		if (panel.id === "") panel.id = `${prefix}_panel_${index}`;
+	}
+	return {
+		element: content,
+		panels: {
+			hidden,
+			roles,
+			elements: panels
+		}
+	};
+}
+function createTab(prefix, index, panel, label, selected) {
+	return createElement("button", {
+		aria: {
+			selected,
+			controls: panel.id
+		},
+		attribute: { [ATTRIBUTE_TAB]: "" },
+		property: {
+			id: `${prefix}_tab_${index}`,
+			role: "tab",
+			tabIndex: selected ? 0 : -1,
+			textContent: label,
+			type: "button"
+		}
+	});
+}
+function createTabList(prefix, panels, labels, active) {
+	const element = createElement("div", {
+		attribute: { [ATTRIBUTE_TABLIST]: "" },
+		property: { role: "tablist" }
+	});
+	const { length } = panels;
+	const tabs = [];
+	for (let index = 0; index < length; index += 1) {
+		const tab = createTab(prefix, index, panels[index], labels[index], index === active);
+		element.append(tab);
+		tabs.push(tab);
+	}
+	return {
+		element,
+		tabs
+	};
+}
+function detachTabs(state) {
+	state.navigable?.destroy();
+	const { length } = state.panels.elements;
+	for (let index = 0; index < length; index += 1) {
+		const panel = state.panels.elements[index];
+		panel.hidden = state.panels.hidden[index];
+		panel.role = state.panels.roles[index];
+		state.content.before(panel);
+	}
+	state.tabList.element.remove();
+	state.content.remove();
+}
+function getActive(element, max) {
+	const attribute = getAttribute(element, "active");
+	let index = 0;
+	if (attribute != null) {
+		const value = Number.parseInt(attribute, 10);
+		if (!Number.isNaN(value) && value >= 0) index = value > max ? max : value;
+	}
+	return index;
+}
+function getId() {
+	index += 1;
+	return `oui_tabs_${index}`;
+}
+function getLabels(panels) {
+	const labels = [];
+	const { length } = panels;
+	for (let index = 0; index < length; index += 1) {
+		const panel = panels[index];
+		const labelledBy = getAria(panel, "labelledby");
+		if (typeof labelledBy === "string" && labelledBy.trim().length > 0) {
+			const label = [];
+			const selectors = labelledBy.split(/\s+/);
+			for (const selector of selectors) {
+				const element = document.getElementById(selector);
+				if (element == null) return;
+				label.push(element.textContent);
+			}
+			labels.push(label.join(" "));
+			continue;
+		}
+		const label = getAria(panel, "label");
+		if (typeof label === "string" && label.trim().length > 0) {
+			labels.push(label);
+			continue;
+		}
+		return;
+	}
+	return labels;
+}
+function initializeTabs(element) {
+	const panels = [...element.querySelectorAll(SELECTOR_PANEL)];
+	if (panels.length === 0) throw new Error(MESSAGE_EMPTY);
+	const labels = getLabels(panels);
+	if (labels == null) throw new Error(MESSAGE_INVALID);
+	let id;
+	if (element.id === "") id = getId();
+	else id = element.id;
+	const active = getActive(element, panels.length - 1);
+	const orientation = getNavigableOrientation(element, false, false);
+	const content = createContent(id, panels, active);
+	const tabList = createTabList(id, panels, labels, active);
+	const state = {
+		active,
+		id,
+		orientation,
+		tabList,
+		content: content.element,
+		host: element,
+		panels: content.panels
+	};
+	attachTabs(state);
+	return state;
+}
+function onActivate(state, next) {
+	const current = state.active;
+	const event = new OuiTabsEvent("oui:beforechange", current, next, true);
+	state.host.dispatchEvent(event);
+	if (event.defaultPrevented) return;
+	state.active = next;
+	const { length } = state.panels.elements;
+	for (let index = 0; index < length; index += 1) {
+		const panel = state.panels.elements[index];
+		panel.hidden = index !== next;
+		setAria(state.tabList.tabs[index], "selected", index === next);
+	}
+	setAttribute(state.host, "active", next);
+	state.host.dispatchEvent(new OuiTabsEvent("oui:change", current, next, false));
+}
+function setActive(state, value) {
+	if (state == null) return;
+	const max = state.panels.elements.length - 1;
+	let index;
+	if (typeof value === "number" && !Number.isNaN(value) && value >= 0) index = value > max ? max : value;
+	else if (typeof value === "string") {
+		const parsed = Number.parseInt(value, 10);
+		if (!Number.isNaN(parsed) && parsed >= 0) index = parsed > max ? max : parsed;
+	}
+	if (index == null) setAttribute(state.host, "active", state.active);
+	else if (index !== state.active) {
+		state.navigable?.navigate(index, false);
+		onActivate(state, index);
+	}
+}
+const TAGNAME = "oui-tabs";
+const ATTRIBUTE_CONTENT = `${TAGNAME}-content`;
+const ATTRIBUTE_PANEL = `${TAGNAME}-panel`;
+const ATTRIBUTE_TAB = `${TAGNAME}-tab`;
+const ATTRIBUTE_TABLIST = `${TAGNAME}-tablist`;
+const MESSAGE_EMPTY = `<${TAGNAME}> must contain at least one [${ATTRIBUTE_PANEL}] child element`;
+const MESSAGE_INVALID = `A [${ATTRIBUTE_PANEL}] child element of <${TAGNAME}> must have a valid 'aria-label' or 'aria-labelledby' attribute`;
+const SELECTOR_PANEL = `:scope > [${ATTRIBUTE_PANEL}]`;
+const SELECTOR_TAB = `[${ATTRIBUTE_TAB}]`;
+let index = 0;
+customElements.define(TAGNAME, OuiTabsElement);
+//#endregion
+export { OuiTabsElement, OuiTabsEvent };

package/dist/js/tooltip.mjs

@@ -103,24 +103,25 @@ function findElements(attribute) {
 	return elements;
 }
 function getContent() {
-	const content = createElement("div", {
-		popover: "hint",
-		role: "tooltip",
-		tabIndex: -1
+	return createElement("div", {
+		attribute: {
+			[ATTRIBUTE_CONTENT]: "",
+			popover: "hint"
+		},
+		property: {
+			role: "tooltip",
+			tabIndex: -1
+		}
 	});
-	setAttribute(content, ATTRIBUTE_CONTENT, "");
-	return content;
 }
 function getElements(anchor) {
 	let elements = findElements(getAria(anchor, "labelledby"));
 	if (elements == null || elements.length === 0) elements = findElements(getAria(anchor, "describedby"));
 	if (elements != null && elements.length > 0) return elements;
-	let text = getAria(anchor, "label");
-	if (isNullableOrWhitespace(text)) text = getAria(anchor, "description");
-	if (isNullableOrWhitespace(text)) return;
-	const paragraph = document.createElement("p");
-	paragraph.textContent = text;
-	return [paragraph];
+	let textContent = getAria(anchor, "label");
+	if (isNullableOrWhitespace(textContent)) textContent = getAria(anchor, "description");
+	if (isNullableOrWhitespace(textContent)) return;
+	return [createElement("p", { property: { textContent } })];
 }
 function getState(anchor, elements) {
 	const state = {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.35.0",
+	"version": "0.37.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",