@oscarpalmer/oui 0.37.0 → 0.39.0

package/dist/js/listbox/index.mjs

@@ -1,7 +1,7 @@
-import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-BWd0PCy7.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, O as setListboxRequired, T as setListboxLimit, a as setListboxValue, o as setListboxValues, w as setListboxFilter } from "../listbox.data-DQ7-x2uY.mjs";
 import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
 import { LISTBOX_TAGNAME } from "./constants.listbox.mjs";
-import { c as onDetachListbox, i as createListboxState, n as setListboxLocalizations, o as listboxStates, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-BI-XsTOf.mjs";
+import { c as onDetachListbox, i as createListboxState, n as setListboxLocalizations, o as listboxStates, r as updateListboxLocalizations, s as onAttachListbox } from "../misc.listbox-DKB-j0UK.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/listbox/index.ts
@@ -41,6 +41,18 @@ var OuiListboxElement = class extends HTMLElement {
 		setListboxFilter(this.#state, value);
 	}
 	/**
+	* Form element associated with the listbox
+	*/
+	get form() {
+		return this.#internals.form;
+	}
+	/**
+	* Label elements associated with the listbox
+	*/
+	get labels() {
+		return this.#internals.labels;
+	}
+	/**
 	* Maximum number of selected options
 	*/
 	get max() {
@@ -107,6 +119,18 @@ var OuiListboxElement = class extends HTMLElement {
 		return this.#state.options.selected.slice();
 	}
 	/**
+	* Validation message for the listbox
+	*/
+	get validationMessage() {
+		return this.#internals.validationMessage;
+	}
+	/**
+	* Validity state for the listbox
+	*/
+	get validity() {
+		return this.#internals.validity;
+	}
+	/**
 	* Current value
 	*/
 	get value() {
@@ -130,6 +154,12 @@ var OuiListboxElement = class extends HTMLElement {
 	set values(values) {
 		setListboxValues(this.#state, values);
 	}
+	/**
+	* Can the listbox be validated?
+	*/
+	get willValidate() {
+		return this.#internals.willValidate;
+	}
 	constructor() {
 		super();
 		this.#internals = this.attachInternals();
@@ -148,6 +178,14 @@ var OuiListboxElement = class extends HTMLElement {
 		}
 	}
 	/**
+	* Check if the listbox is valid
+	*
+	* @returns `true` if the listbox is valid, otherwise `false`
+	*/
+	checkValidity() {
+		return this.#internals.checkValidity();
+	}
+	/**
 	* Clear all selected options
 	*/
 	clear() {
@@ -173,6 +211,22 @@ var OuiListboxElement = class extends HTMLElement {
 		if (this.#state == null) this.#restored = parsed;
 		else setListboxValues(this.#state, parsed);
 	}
+	/**
+	* Check if the listbox is valid and report any validation errors
+	*
+	* @returns `true` if the listbox is valid, otherwise `false`
+	*/
+	reportValidity() {
+		return this.#internals.reportValidity();
+	}
+	/**
+	* Set a custom validation message for the listbox
+	*
+	* @param message Validation message
+	*/
+	setCustomValidity(message) {
+		this.#internals.setValidity({ customError: message !== "" }, message, this);
+	}
 	setLocalizations(first, second) {
 		updateListboxLocalizations(this.#state.localizations.global, this.#state.localizations.component, first, second);
 	}

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

@@ -1,2 +1,2 @@
-import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-gnoJhrTr.mjs";
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-mZMuYOxg.mjs";
 export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

package/dist/js/listbox/misc.listbox.mjs

@@ -1,2 +1,2 @@
-import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-BI-XsTOf.mjs";
+import { n as setListboxLocalizations, r as updateListboxLocalizations, t as getListboxId } from "../misc.listbox-DKB-j0UK.mjs";
 export { getListboxId, setListboxLocalizations, updateListboxLocalizations };

package/dist/js/listbox/state.listbox.d.mts

@@ -1,11 +1,10 @@
 import { t as OuiLocalizations } from "../l10n-Bn-7RcwR.mjs";
-import { l as OuiListboxState, o as OuiListboxLocalizations, u as OuiListboxStates } from "../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState, o as OuiListboxLocalizations, u as OuiListboxStates } from "../listbox.model-BHPA7GM4.mjs";
 import { OuiListboxElement } from "./index.mjs";
 //#region src/js/listbox/state.listbox.d.ts
-declare function createListboxState(element: OuiListboxElement, internals: ElementInternals): OuiListboxState;
-declare function onAttachListbox(state: OuiListboxState): void;
-declare function onDetachListbox(state: OuiListboxState): void;
-declare const listboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
-declare const listboxStates: OuiListboxStates;
-//#endregion
-export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };
+export declare function createListboxState(element: OuiListboxElement, internals: ElementInternals): OuiListboxState;
+export declare function onAttachListbox(state: OuiListboxState): void;
+export declare function onDetachListbox(state: OuiListboxState): void;
+export declare const listboxLocalizations: OuiLocalizations<OuiListboxLocalizations>;
+export declare const listboxStates: OuiListboxStates;
+//#endregion

package/dist/js/listbox/state.listbox.mjs

@@ -1,2 +1,2 @@
-import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-BI-XsTOf.mjs";
+import { a as listboxLocalizations, c as onDetachListbox, i as createListboxState, o as listboxStates, s as onAttachListbox } from "../misc.listbox-DKB-j0UK.mjs";
 export { createListboxState, listboxLocalizations, listboxStates, onAttachListbox, onDetachListbox };

package/dist/js/{listbox.data-BWd0PCy7.mjs → listbox.data-DQ7-x2uY.mjs}

@@ -5,8 +5,8 @@ import { setAria } from "@oscarpalmer/toretto/aria";
 import { dispatch } from "@oscarpalmer/toretto/event";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { getString } from "@oscarpalmer/atoms/string";
-import { getData } from "@oscarpalmer/toretto/data";
 import { createElement, setAria as setAria$1, setAttribute as setAttribute$1 } from "@oscarpalmer/toretto";
+import { getData as getData$1 } from "@oscarpalmer/toretto/data";
 //#region src/js/internal/listbox/listbox.misc.ts
 function generateListboxIds(prefix, select) {
 	const elements = [...select.children].flatMap((child) => child instanceof HTMLOptGroupElement ? [child, ...[...child.children].filter((groupChild) => groupChild instanceof HTMLOptionElement)] : child instanceof HTMLOptionElement ? [child] : []);
@@ -134,13 +134,14 @@ function createListboxInput(parameters, value) {
 			autocorrect: "off",
 			autocomplete: "off",
 			form: "",
-			spellcheck: "false",
-			type: "text"
+			inputmode: "text",
+			spellcheck: "false"
 		},
 		property: {
 			id,
 			value,
-			role: isAutocomplete || listbox ? "combobox" : "searchbox"
+			role: isAutocomplete || listbox ? "combobox" : "searchbox",
+			type: "text"
 		}
 	});
 	if (isAutocomplete || listbox) setAria$1(input, "expanded", listbox);
@@ -299,7 +300,7 @@ function applyListboxSelection(parameters) {
 		const option = state.options.all[index];
 		setAria(option, "selected", (state.type === "select" || !state.autocomplete.none) && (selected ?? state.options.selected).includes(option));
 	}
-	const values = parameters.values ?? (state.autocomplete.none && !state.listbox ? [state.filter.element.value] : (selected ?? state.options.selected).map((option) => getData(option, "value", false) ?? ""));
+	const values = parameters.values ?? (state.autocomplete.none && !state.listbox ? [state.filter.element.value] : (selected ?? state.options.selected).map((option) => getData$1(option, "value", false) ?? ""));
 	if (values.length === 0) values.push("");
 	if (selected != null) state.options.selected = selected;
 	if (!(values.length === state.values.current.length ? values.some((value) => !state.values.current.includes(value)) : true)) return;
@@ -330,7 +331,7 @@ function filterListboxOption(state, value, textContent) {
 	let match;
 	for (let index = 0; index < length; index += 1) {
 		const option = state.options.all[index];
-		if ((filterTextContent ? option.textContent : getData(option, "value", false) ?? "").toLocaleLowerCase() === filter) {
+		if ((filterTextContent ? option.textContent : getData$1(option, "value", false) ?? "").toLocaleLowerCase() === filter) {
 			match = option;
 			break;
 		}
@@ -384,7 +385,7 @@ function setListboxValues(state, value, emit) {
 	const selected = [];
 	for (let index = 0; index < length; index += 1) {
 		const option = state.options.all[index];
-		if (values.includes(getData(option, "value", false)?.toLocaleLowerCase() ?? "")) selected.push(option);
+		if (values.includes(getData$1(option, "value", false)?.toLocaleLowerCase() ?? "")) selected.push(option);
 	}
 	applyListboxSelection({
 		emit,

package/dist/js/{listbox.model-CRReGOmu.d.mts → listbox.model-BHPA7GM4.d.mts}

@@ -17,7 +17,7 @@ type OuiListboxAttributes = {
 type OuiListboxAutoComplete = Record<OuiListboxAutoCompleteType, boolean> & {
   value?: OuiListboxAutoCompleteType;
 };
-type OuiListboxAutoCompleteType = 'both' | 'inline' | 'list' | 'none';
+type OuiListboxAutoCompleteType = "both" | "inline" | "list" | "none";
 type OuiListboxCallbacks<State extends OuiListboxState = OuiListboxState> = {
   data: OuiListboxCallbacksData<State>;
   keydown: OuiListboxCallbacksKeydown<State>;
@@ -79,7 +79,7 @@ type OuiListboxOptions = {
   all: HTMLElement[];
   selected: HTMLElement[];
 };
-type OuiListboxPreview = 'none' | 'set' | 'typed';
+type OuiListboxPreview = "none" | "set" | "typed";
 type OuiListboxState = {
   active?: HTMLElement;
   attributes: OuiListboxAttributes;
@@ -115,7 +115,7 @@ type OuiListboxStates<State extends OuiListboxState = OuiListboxState> = {
   map: WeakMap<HTMLElement, State>;
   set: Set<State>;
 };
-type OuiListboxType = 'autocomplete' | 'select';
+type OuiListboxType = "autocomplete" | "select";
 type OuiListboxValues = {
   current: string[];
   initial: string[];

package/dist/js/menu.mjs

@@ -121,7 +121,7 @@ function onDeactivate(_, navigable) {
 }
 function onPreventNavigation(_, navigable) {
 	const instance = menubars.get(navigable.element) ?? menus.get(navigable.element);
-	return findAncestor(instance?.element.parentElement, SELECTORS) != null;
+	return instance == null ? false : findAncestor(instance.element.parentElement, SELECTORS) != null;
 }
 function onShouldActivate(event, navigable) {
 	let activate = false;

package/dist/js/{misc.listbox-BI-XsTOf.mjs → misc.listbox-DKB-j0UK.mjs}

@@ -1,14 +1,14 @@
 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 { 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-DQ7-x2uY.mjs";
+import { initializeListboxState } from "./internal/listbox/listbox.state.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 { setAttributes } from "@oscarpalmer/toretto/attribute";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import { getData } from "@oscarpalmer/toretto/data";
 import { noop } from "@oscarpalmer/atoms/function";
+import { getData } from "@oscarpalmer/toretto/data";
 //#region src/js/listbox/event.listbox.ts
 function onListboxClick(event) {
 	const listbox = findAncestor(event, LISTBOX_TAGNAME);
@@ -59,7 +59,6 @@ function createListboxState(element, internals) {
 	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");

package/dist/js/{misc.listbox-gnoJhrTr.d.mts → misc.listbox-mZMuYOxg.d.mts}

@@ -1,5 +1,5 @@
 import { t as OuiLocalizations } from "./l10n-Bn-7RcwR.mjs";
-import { o as OuiListboxLocalizations } from "./listbox.model-CRReGOmu.mjs";
+import { o as OuiListboxLocalizations } from "./listbox.model-BHPA7GM4.mjs";
 //#region src/js/listbox/misc.listbox.d.ts
 declare function getListboxId(): string;
 /**

package/dist/js/movable/movable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-a6w0J1OD.mjs";
+import { g as createMovable, h as OuiMovable, m as ATTRIBUTE_MOVABLE_HANDLE, p as ATTRIBUTE_MOVABLE } from "../draggable-B5-70SZm.mjs";
 export { ATTRIBUTE_MOVABLE, ATTRIBUTE_MOVABLE_HANDLE, OuiMovable, createMovable };

package/dist/js/movable/movable.standalone.d.mts

@@ -1,2 +1,2 @@
-import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-a6w0J1OD.mjs";
+import { g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "../draggable-B5-70SZm.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiMovableOptions, type OuiMovable, createMovable };

package/dist/js/popover.d.mts

@@ -1,5 +1,5 @@
-import { r as OuiFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
-import { i as OuiFocusTrap } from "./focus-trap.embedded-DR8NpZfr.mjs";
+import { r as OuiFloatable } from "./floatable.embedded-DQYkXt8X.mjs";
+import { i as OuiFocusTrap } from "./focus-trap.embedded-CjyFQYow.mjs";
 import { RemovableEventListener } from "@oscarpalmer/toretto/models";
 //#region src/js/popover.d.ts
 declare class OuiPopover {

package/dist/js/popover.mjs

@@ -74,7 +74,7 @@ function getState(anchor, content) {
 		anchor,
 		content,
 		floatable: createEmbeddedFloatable(anchor, content, options),
-		focusTrap: getAria(content, "modal") === "true" ? createFocusTrap(content, { noescape: true }) : void 0,
+		focusTrap: getAria(content, "modal") === true ? createFocusTrap(content, { noescape: true }) : void 0,
 		listeners: [getOnBeforeToggleListener(content), on(content, "toggle", (event) => {
 			const expanded = event.newState === "open";
 			if (expanded) {

package/dist/js/resizable/resizable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { a as createResizable, i as RESIZABLE_ATTRIBUTE_HANDLE, n as OuiResizable, r as RESIZABLE_ATTRIBUTE, t as CreateOuiResizableOptions } from "../resizable.embedded-3qoR0Bjm.mjs";
+import { a as createResizable, i as RESIZABLE_ATTRIBUTE_HANDLE, n as OuiResizable, r as RESIZABLE_ATTRIBUTE, t as CreateOuiResizableOptions } from "../resizable.embedded-dvhdfQgt.mjs";
 export { CreateOuiResizableOptions, OuiResizable, RESIZABLE_ATTRIBUTE, RESIZABLE_ATTRIBUTE_HANDLE, createResizable };

package/dist/js/resizable/resizable.embedded.mjs

@@ -6,7 +6,7 @@ import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { getNumber } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import supportsTouch from "@oscarpalmer/toretto/touch";
+import { supportsTouch } from "@oscarpalmer/toretto/touch";
 //#region src/js/resizable/resizable.embedded.ts
 var OuiResizable = class {
 	#state;

package/dist/js/resizable/resizable.standalone.d.mts

@@ -1,2 +1,2 @@
-import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.embedded-3qoR0Bjm.mjs";
+import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "../resizable.embedded-dvhdfQgt.mjs";
 export { type CreateOuiResizableOptions, type OuiResizable, createResizable as createOuiResizable };

package/dist/js/{resizable.embedded-3qoR0Bjm.d.mts → resizable.embedded-dvhdfQgt.d.mts}

@@ -29,6 +29,6 @@ type OuiResizableState = {
  */
 declare function createResizable(element: HTMLElement, options?: CreateOuiResizableOptions): OuiResizable;
 declare const RESIZABLE_ATTRIBUTE = "oui-resizable";
-declare const RESIZABLE_ATTRIBUTE_HANDLE = "oui-resizable-handle";
+declare const RESIZABLE_ATTRIBUTE_HANDLE: string;
 //#endregion
 export { createResizable as a, RESIZABLE_ATTRIBUTE_HANDLE as i, OuiResizable as n, RESIZABLE_ATTRIBUTE as r, CreateOuiResizableOptions as t };

package/dist/js/sortable/sortable.embedded.d.mts

@@ -1,2 +1,2 @@
-import { d as OuiSortable, f as createSortable } from "../draggable-a6w0J1OD.mjs";
+import { d as OuiSortable, f as createSortable } from "../draggable-B5-70SZm.mjs";
 export { OuiSortable, createSortable };

package/dist/js/sortable/sortable.standalone.d.mts

@@ -1,2 +1,2 @@
-import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-a6w0J1OD.mjs";
+import { d as OuiSortable, f as createSortable, t as CreateOuiDraggableOptions } from "../draggable-B5-70SZm.mjs";
 export { type CreateOuiDraggableOptions as CreateOuiSortableOptions, type OuiSortable, createSortable };

package/dist/js/splitter.d.mts

@@ -4,7 +4,7 @@ declare global {
     [TAGNAME]: OuiSplitterElement;
   }
 }
-declare class OuiSplitterElement extends HTMLElement {
+export declare class OuiSplitterElement extends HTMLElement {
   #private;
   static readonly observedAttributes: string[];
   /**
@@ -45,5 +45,4 @@ declare class OuiSplitterElement extends HTMLElement {
   attributeChangedCallback(name: string): void;
 }
 declare const TAGNAME = "oui-splitter";
-//#endregion
-export { OuiSplitterElement };
+//#endregion

package/dist/js/splitter.mjs

@@ -5,9 +5,9 @@ import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { setStyle, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } from "@oscarpalmer/atoms/number";
 import { findAncestor } from "@oscarpalmer/toretto/find";
-import supportsTouch from "@oscarpalmer/toretto/touch";
-import { createElement } from "@oscarpalmer/toretto/create";
+import { supportsTouch } from "@oscarpalmer/toretto/touch";
 import { round } from "@oscarpalmer/atoms/math";
+import { createElement } from "@oscarpalmer/toretto/create";
 //#region src/js/splitter.ts
 const ATTRIBUTE_MAX = "max";
 const ATTRIBUTE_MIN = "min";

package/dist/js/{state.combobox-4xq0FPCF.mjs → state.combobox-BWDFHwoi.mjs}

@@ -1,19 +1,19 @@
 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 { getAttributeValue, getBooleanAriaValue } from "./internal/misc.mjs";
+import { LISTBOX_KEYS_ACTIVATION, 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-DQ7-x2uY.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";
+import { findAncestor, getData } from "@oscarpalmer/toretto";
+import { getData as getData$1 } from "@oscarpalmer/toretto/data";
 //#region src/js/combobox/misc.combobox.ts
 function getComboboxAutoComplete(element, select) {
 	let value;
@@ -81,7 +81,7 @@ function onComboboxClickDocument(event) {
 	}
 	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));
+		const option = state.options.selected.find((option) => option.id === getData(selection, "option", false));
 		if (state.disabled) state.anchor.element.focus();
 		else if (state.readonly) updateComboboxTabindices(state, option);
 		else toggleListboxOption(state, option);
@@ -136,7 +136,7 @@ function onComboboxKeydown(event) {
 	else processListboxKeydown(event, state);
 }
 function onComboboxKeydownSelection(event, state, item) {
-	if (LISTBOX_KEYS.activation.has(event.key)) {
+	if (LISTBOX_KEYS_ACTIVATION.has(event.key)) {
 		event.preventDefault();
 		onComboboxRemoveSelection(state, item);
 		return;
@@ -173,7 +173,7 @@ function onComboboxPreview(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));
+	const option = state.options.selected.find((option) => option.id === getData(item, "option", false));
 	if (option != null) toggleListboxOption(state, option);
 }
 function onComboboxNavigation(preview, state, active) {
@@ -242,7 +242,7 @@ function createComboboxState(element, internals) {
 	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 values = selected.length === 0 ? [""] : selected.map((option) => getData$1(option, "value", false) ?? "");
 	const state = {
 		autocomplete,
 		disabled,

package/dist/js/tabs.d.mts

@@ -4,12 +4,12 @@ declare global {
     [TAGNAME]: OuiTabsElement;
   }
 }
-declare class OuiTabsEvent extends Event {
+export declare class OuiTabsEvent extends Event {
   oldIndex: number;
   newIndex: number;
-  constructor(name: 'oui:beforechange' | 'oui:change', oldIndex: number, newIndex: number, cancelable: boolean);
+  constructor(name: "oui:beforechange" | "oui:change", oldIndex: number, newIndex: number, cancelable: boolean);
 }
-declare class OuiTabsElement extends HTMLElement {
+export declare class OuiTabsElement extends HTMLElement {
   #private;
   static observedAttributes: string[];
   get active(): number;
@@ -21,5 +21,4 @@ declare class OuiTabsElement extends HTMLElement {
   disconnectedCallback(): void;
 }
 declare const TAGNAME = "oui-tabs";
-//#endregion
-export { OuiTabsElement, OuiTabsEvent };
+//#endregion

package/dist/js/tabs.mjs

@@ -67,7 +67,7 @@ function attachTabs(state) {
 	}
 }
 function createContent(prefix, panels, active) {
-	const content = createElement("div", { attribute: { [ATTRIBUTE_CONTENT]: "" } });
+	const content = createElement("div", { attribute: { [`${TAGNAME}-content`]: "" } });
 	const { length } = panels;
 	const hidden = [];
 	const roles = [];
@@ -93,7 +93,7 @@ function createTab(prefix, index, panel, label, selected) {
 			selected,
 			controls: panel.id
 		},
-		attribute: { [ATTRIBUTE_TAB]: "" },
+		attribute: { [`${TAGNAME}-tab`]: "" },
 		property: {
 			id: `${prefix}_tab_${index}`,
 			role: "tab",
@@ -105,7 +105,7 @@ function createTab(prefix, index, panel, label, selected) {
 }
 function createTabList(prefix, panels, labels, active) {
 	const element = createElement("div", {
-		attribute: { [ATTRIBUTE_TABLIST]: "" },
+		attribute: { [`${TAGNAME}-tablist`]: "" },
 		property: { role: "tablist" }
 	});
 	const { length } = panels;
@@ -226,14 +226,11 @@ function setActive(state, value) {
 	}
 }
 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}]`;
+const SELECTOR_TAB = `[${TAGNAME}-tab]`;
 let index = 0;
 customElements.define(TAGNAME, OuiTabsElement);
 //#endregion

package/dist/js/tooltip.d.mts

@@ -1,4 +1,4 @@
-import { r as OuiFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
+import { r as OuiFloatable } from "./floatable.embedded-DQYkXt8X.mjs";
 //#region src/js/tooltip.d.ts
 declare class OuiTooltip {
   #private;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@oscarpalmer/oui",
-	"version": "0.37.0",
+	"version": "0.39.0",
 	"description": "Styles, components, and utilities for building websites and applications.",
 	"keywords": [
 		"css",
@@ -22,8 +22,7 @@
 		"url": "git+https://github.com/oscarpalmer/oui.git"
 	},
 	"files": [
-		"dist",
-		"src"
+		"dist"
 	],
 	"type": "module",
 	"module": "dist/js/index.mjs",
@@ -90,34 +89,37 @@
 		"build": "vp run clean && vp pack && vp run css:build",
 		"clean": "rm -rf ./dist && rm -rf ./postcss",
 		"css:build": "vp run postcss:build && vpx sass ./postcss:./dist/css --no-source-map",
-		"css:watch": "vpx sass ./postcss:./dist/css --no-source-map --watch",
-		"postcss:build": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
-		"postcss:watch": "vpx postcss ./src/css/*.scss -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
+		"css:watch": "concurrently \"vpx sass ./postcss:./demo/public/assets/css --no-source-map --watch\" \"vpx sass ./demo/app/css/styles.scss:./demo/public/assets/css/styles.css --no-source-map --watch\"",
+		"postcss:build": "vpx postcss ./src/css/**/*.scss --base ./src/css -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss",
+		"postcss:watch": "vpx postcss ./src/css/**/*.scss --base ./src/css -d ./postcss -u autoprefixer postcss-input-range --parser postcss-scss --watch",
 		"test": "vpx vitest --coverage",
 		"tsdown": "vpx tsdown -c ./tsdown.config.ts --watch",
-		"watch": "vp run clean && concurrently \"php -S localhost:3000\" \"vp run postcss:watch\" \"vp run css:watch\" \"vp run tsdown\""
+		"watch": "concurrently \"cd ./demo/public && php -qS localhost:4567 \" \"vp run postcss:watch\" \"vp run css:watch\" \"vp run tsdown\""
 	},
 	"dependencies": {
-		"@oscarpalmer/atoms": "^0.188.1",
-		"@oscarpalmer/toretto": "^0.51"
+		"@oscarpalmer/atoms": "^0.216",
+		"@oscarpalmer/toretto": "^0.56"
 	},
 	"devDependencies": {
-		"@oxlint/plugins": "^1.78",
-		"@vitest/coverage-istanbul": "^4.1",
-		"autoprefixer": "^10.5",
+		"@vitest/coverage-istanbul": "5.0.1",
+		"autoprefixer": "^10.6",
 		"concurrently": "^10",
-		"jsdom": "^30",
-		"postcss-cli": "^11",
+		"jsdom": "^30.1",
+		"postcss-cli": "^12",
 		"postcss-input-range": "^6",
 		"postcss-scss": "^4",
-		"sass": "^1.102",
-		"stylelint": "^17.14",
+		"sass": "^1.105",
+		"stylelint": "^17.16",
 		"stylelint-config-standard-scss": "^17",
-		"tsdown": "^0.22",
-		"typescript": "^6",
-		"vite": "npm:@voidzero-dev/vite-plus-core@latest",
-		"vite-plus": "latest",
-		"vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+		"tsdown": "^0.23",
+		"typescript": "^7",
+		"vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
+		"vite-plus": "1.0.0",
+		"vitest": "5.0.1"
 	},
-	"packageManager": "npm@11.12.1"
+	"packageManager": "npm@11.12.1",
+	"overrides": {
+		"vite": "npm:@voidzero-dev/vite-plus-core@1.0.0",
+		"vitest": "5.0.1"
+	}
 }

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

@@ -1,26 +0,0 @@
-import { r as OuiListboxAutoCompleteType, t as OuiListboxAttributes } from "./listbox.model-CRReGOmu.mjs";
-//#region src/js/combobox/constants.combobox.d.ts
-declare const COMBOBOX_TAGNAME = "oui-combobox";
-declare const COMBOBOX_ATTRIBUTE_ANCHOR = "oui-combobox-anchor";
-declare const COMBOBOX_ATTRIBUTE_SELECTION = "oui-combobox-selection";
-declare const COMBOBOX_ATTRIBUTE_SELECTION_ITEM = "oui-combobox-selection-item";
-declare const COMBOBOX_AUTOCOMPLETES: Set<OuiListboxAutoCompleteType>;
-declare const messageLabel = "<oui-combobox> must contain a <label> element for the <select> element";
-declare const messageSelect = "<oui-combobox> must contain a valid <select> element";
-declare const selectorAnchor = "[oui-combobox-anchor]";
-declare const selectorContent = "[oui-combobox-content]";
-declare const selectorOption = "[oui-combobox-option]";
-declare const selectorSelectionItem = "[oui-combobox-selection-item]";
-declare const COMBOBOX_ATTRIBUTES: OuiListboxAttributes;
-declare const COMBOBOX_MESSAGES: {
-  label: string;
-  select: string;
-};
-declare const COMBOBOX_SELECTORS: {
-  anchor: string;
-  content: string;
-  selectionItem: string;
-  option: string;
-};
-//#endregion
-export { COMBOBOX_AUTOCOMPLETES as a, COMBOBOX_TAGNAME as c, selectorAnchor as d, selectorContent as f, COMBOBOX_ATTRIBUTE_SELECTION_ITEM as i, messageLabel as l, selectorSelectionItem as m, COMBOBOX_ATTRIBUTE_ANCHOR as n, COMBOBOX_MESSAGES as o, selectorOption as p, COMBOBOX_ATTRIBUTE_SELECTION as r, COMBOBOX_SELECTORS as s, COMBOBOX_ATTRIBUTES as t, messageSelect as u };

package/dist/js/constants.listbox-DRsXUxd3.d.mts

@@ -1,14 +0,0 @@
-import { t as OuiListboxAttributes } from "./listbox.model-CRReGOmu.mjs";
-//#region src/js/listbox/constants.listbox.d.ts
-declare const LISTBOX_TAGNAME = "oui-listbox";
-declare const LISTBOX_ATTRIBUTES: OuiListboxAttributes;
-declare const LISTBOX_MESSAGES: {
-  label: string;
-  select: string;
-};
-declare const LISTBOX_SELECTORS: {
-  filter: string;
-  option: string;
-};
-//#endregion
-export { LISTBOX_TAGNAME as i, LISTBOX_MESSAGES as n, LISTBOX_SELECTORS as r, LISTBOX_ATTRIBUTES as t };

package/src/css/a11y.scss

@@ -1,13 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins' as mixins;
-
-.oui-vh {
-	:where(&) {
-		position: absolute !important;
-	}
-
-	:where(&:not(:active, :focus, :focus-within)) {
-		@include mixins.visually-hidden;
-	}
-}