@oscarpalmer/oui 0.36.0 → 0.38.0

package/dist/js/combobox/dom.combobox.mjs

@@ -1,10 +1,10 @@
 import { getLocalization, localize } from "../l10n.mjs";
-import { _ as createListboxValueLabel, f as createListboxInput, l as createListboxFilter, m as createListboxMessage, p as createListboxList } from "../listbox.data-BWd0PCy7.mjs";
+import { _ as createListboxValueLabel, f as createListboxInput, l as createListboxFilter, m as createListboxMessage, p as createListboxList } from "../listbox.data-C7CRa5Ya.mjs";
 import { COMBOBOX_ATTRIBUTE_ANCHOR, COMBOBOX_ATTRIBUTE_SELECTION, COMBOBOX_ATTRIBUTE_SELECTION_ITEM } from "./constants.combobox.mjs";
 import { setAria } from "@oscarpalmer/toretto/aria";
 import { setAttribute } from "@oscarpalmer/toretto/attribute";
-import { getData } from "@oscarpalmer/toretto/data";
 import { createElement } from "@oscarpalmer/toretto/create";
+import { getData } from "@oscarpalmer/toretto/data";
 //#region src/js/combobox/dom.combobox.ts
 function createComboboxAnchor(parameters) {
 	const { select } = parameters;
@@ -29,7 +29,10 @@ function createComboboxButton(parameters) {
 			haspopup: "listbox",
 			labelledby: `${label.id} ${id}_value`
 		},
-		property: { textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? "" }
+		property: {
+			textContent: multiple ? "" : select.selectedOptions[0]?.textContent ?? "",
+			type: "button"
+		}
 	});
 	if (!multiple) return { element };
 	const container = createElement("div");
@@ -101,7 +104,8 @@ function createComboboxSelectionItem(option, state) {
 			[COMBOBOX_ATTRIBUTE_SELECTION_ITEM]: "",
 			tabindex: -1
 		},
-		data: { option: option.id }
+		data: { option: option.id },
+		property: { type: "button" }
 	});
 	const icon = createElement("span", {
 		aria: { hidden: true },

package/dist/js/combobox/event.combobox.mjs

@@ -1,2 +1,2 @@
-import { C as skipComboboxNavigation, S as preventComboboxActivation, _ as onComboboxPreview, b as onComboboxTab, c as onComboboxClickContent, d as onComboboxFilter, f as onComboboxFocusout, g as onComboboxNavigation, h as onComboboxKeydownSelection, l as onComboboxEnter, m as onComboboxKeydown, o as onComboboxActivation, p as onComboboxInput, s as onComboboxApply, u as onComboboxEscape, v as onComboboxRemoveSelection, x as onComboboxToggle, y as onComboboxSelection } from "../state.combobox-4xq0FPCF.mjs";
+import { C as skipComboboxNavigation, S as preventComboboxActivation, _ as onComboboxPreview, b as onComboboxTab, c as onComboboxClickContent, d as onComboboxFilter, f as onComboboxFocusout, g as onComboboxNavigation, h as onComboboxKeydownSelection, l as onComboboxEnter, m as onComboboxKeydown, o as onComboboxActivation, p as onComboboxInput, s as onComboboxApply, u as onComboboxEscape, v as onComboboxRemoveSelection, x as onComboboxToggle, y as onComboboxSelection } from "../state.combobox-Qm3FWzYW.mjs";
 export { onComboboxActivation, onComboboxApply, onComboboxClickContent, onComboboxEnter, onComboboxEscape, onComboboxFilter, onComboboxFocusout, onComboboxInput, onComboboxKeydown, onComboboxKeydownSelection, onComboboxNavigation, onComboboxPreview, onComboboxRemoveSelection, onComboboxSelection, onComboboxTab, onComboboxToggle, preventComboboxActivation, skipComboboxNavigation };

package/dist/js/combobox/index.d.mts

@@ -1,2 +1,2 @@
-import { a as setComboboxLocalizations, t as OuiComboboxElement } from "../index-EfkUSals.mjs";
+import { a as setComboboxLocalizations, t as OuiComboboxElement } from "../index-DJdFlTLm.mjs";
 export { OuiComboboxElement, setComboboxLocalizations };

package/dist/js/combobox/index.mjs

@@ -1,8 +1,8 @@
 import { updateLocalizations } from "../l10n.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-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-C7CRa5Ya.mjs";
 import { attachListbox, detachListbox } from "../internal/listbox/listbox.state.mjs";
 import { COMBOBOX_TAGNAME } from "./constants.combobox.mjs";
-import { D as setComboboxLocalizations, a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState } from "../state.combobox-4xq0FPCF.mjs";
+import { D as setComboboxLocalizations, a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState } from "../state.combobox-Qm3FWzYW.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 import { parse } from "@oscarpalmer/atoms/string";
 //#region src/js/combobox/index.ts
@@ -42,6 +42,18 @@ var OuiComboboxElement = class extends HTMLElement {
 		setListboxFilter(this.#state, value);
 	}
 	/**
+	* Form element associated with the combobox
+	*/
+	get form() {
+		return this.#internals.form;
+	}
+	/**
+	* Label elements associated with the combobox
+	*/
+	get labels() {
+		return this.#internals.labels;
+	}
+	/**
 	* Maximum number of selected options
 	*/
 	get max() {
@@ -114,6 +126,18 @@ var OuiComboboxElement = class extends HTMLElement {
 		return this.#state.type;
 	}
 	/**
+	* Validation message for the combobox
+	*/
+	get validationMessage() {
+		return this.#internals.validationMessage;
+	}
+	/**
+	* Validity state for the combobox
+	*/
+	get validity() {
+		return this.#internals.validity;
+	}
+	/**
 	* Current value
 	*/
 	get value() {
@@ -137,6 +161,12 @@ var OuiComboboxElement = class extends HTMLElement {
 	set values(values) {
 		setListboxValues(this.#state, values);
 	}
+	/**
+	* Can the combobox be validated?
+	*/
+	get willValidate() {
+		return this.#internals.willValidate;
+	}
 	constructor() {
 		super();
 		this.#internals = this.attachInternals();
@@ -155,6 +185,14 @@ var OuiComboboxElement = class extends HTMLElement {
 		}
 	}
 	/**
+	* Check if the combobox is valid
+	*
+	* @returns `true` if the combobox is valid, otherwise `false`
+	*/
+	checkValidity() {
+		return this.#internals.checkValidity();
+	}
+	/**
 	* Clear all selected options
 	*/
 	clear() {
@@ -180,6 +218,22 @@ var OuiComboboxElement = class extends HTMLElement {
 		if (this.#state == null) this.#restored = parsed;
 		else setListboxValues(this.#state, parsed);
 	}
+	/**
+	* Check if the combobox is valid and report any validation errors
+	*
+	* @returns `true` if the combobox is valid, otherwise `false`
+	*/
+	reportValidity() {
+		return this.#internals.reportValidity();
+	}
+	/**
+	* Set a custom validation message for the combobox
+	*
+	* @param message Validation message
+	*/
+	setCustomValidity(message) {
+		this.#internals.setValidity({ customError: message !== "" }, message, this);
+	}
 	setLocalizations(first, second) {
 		updateLocalizations(this.#state.localizations.global, typeof first === "string" ? { [first]: second } : first, this.#state.localizations.component);
 	}

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

@@ -1,2 +1,2 @@
-import { a as setComboboxLocalizations, i as hasTextSelection, n as getComboboxAutoComplete, o as updateComboboxLocalizations, r as getComboboxId } from "../index-EfkUSals.mjs";
+import { a as setComboboxLocalizations, i as hasTextSelection, n as getComboboxAutoComplete, o as updateComboboxLocalizations, r as getComboboxId } from "../index-DJdFlTLm.mjs";
 export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations, updateComboboxLocalizations };

package/dist/js/combobox/misc.combobox.mjs

@@ -1,2 +1,2 @@
-import { D as setComboboxLocalizations, E as hasTextSelection, O as updateComboboxLocalizations, T as getComboboxId, w as getComboboxAutoComplete } from "../state.combobox-4xq0FPCF.mjs";
+import { D as setComboboxLocalizations, E as hasTextSelection, O as updateComboboxLocalizations, T as getComboboxId, w as getComboboxAutoComplete } from "../state.combobox-Qm3FWzYW.mjs";
 export { getComboboxAutoComplete, getComboboxId, hasTextSelection, setComboboxLocalizations, updateComboboxLocalizations };

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

@@ -1,7 +1,7 @@
 import { t as OuiLocalizations } from "../l10n-Bn-7RcwR.mjs";
 import { o as OuiListboxLocalizations, u as OuiListboxStates } from "../listbox.model-CRReGOmu.mjs";
 import { OuiComboboxState } from "./models.combobox.mjs";
-import { t as OuiComboboxElement } from "../index-EfkUSals.mjs";
+import { t as OuiComboboxElement } from "../index-DJdFlTLm.mjs";
 //#region src/js/combobox/state.combobox.d.ts
 declare function createComboboxState(element: OuiComboboxElement, internals: ElementInternals): OuiComboboxState;
 declare function onAttachCombobox(state: OuiComboboxState): void;

package/dist/js/combobox/state.combobox.mjs

@@ -1,2 +1,2 @@
-import { a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState, t as comboboxLocalizations } from "../state.combobox-4xq0FPCF.mjs";
+import { a as onDetachCombobox, i as onAttachCombobox, n as comboboxStates, r as createComboboxState, t as comboboxLocalizations } from "../state.combobox-Qm3FWzYW.mjs";
 export { comboboxLocalizations, comboboxStates, createComboboxState, onAttachCombobox, onDetachCombobox };

package/dist/js/dialog.mjs

@@ -4,8 +4,8 @@ import { ATTRIBUTE_MOVABLE_HANDLE, createMovable } from "./movable/movable.embed
 import "./movable/movable.standalone.mjs";
 import { RESIZABLE_ATTRIBUTE_HANDLE, createResizable } from "./resizable/resizable.embedded.mjs";
 import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { on } from "@oscarpalmer/toretto/event";
 import { setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/dialog.ts
 var OuiDialog = class {
@@ -106,7 +106,7 @@ function getState(element) {
 				state.resizable?.reset();
 			}
 		})],
-		modal: getAria(element, "modal") === "true" || element.matches(":modal")
+		modal: getAria(element, "modal") === true || element.matches(":modal")
 	};
 	state.dialog = new OuiDialog(state);
 	state.movable = getMovable(element);

package/dist/js/floatable/floatable.embedded.mjs

@@ -1,9 +1,9 @@
 import { getAria } from "@oscarpalmer/toretto/aria";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { on } from "@oscarpalmer/toretto/event";
+import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyle, setStyles } from "@oscarpalmer/toretto/style";
 //#region src/js/floatable/floatable.embedded.ts
 var OuiFloatable = class {
 	#destroyed = false;
@@ -23,13 +23,7 @@ var OuiFloatable = class {
 	}
 	constructor(state, standalone) {
 		this.#state = state;
-		const { anchor, content } = state;
-		if (standalone) {
-			setAttribute(content, ATTRIBUTE_FLOATABLE, "");
-			content.popover = "manual";
-		} else content.popover ??= "auto";
-		setStyle(anchor, "anchorName", state.name);
-		setStyle(content, "positionAnchor", state.name);
+		this.#initialize(state, standalone);
 	}
 	/**
 	* Destroy the floatable, removing it from the DOM and cleaning up references
@@ -61,6 +55,15 @@ var OuiFloatable = class {
 	update(position) {
 		if (!this.#destroyed) setPosition(this.#state, position);
 	}
+	#initialize(state, standalone) {
+		const { anchor, content } = state;
+		if (standalone) {
+			setAttribute(content, ATTRIBUTE_FLOATABLE, "");
+			content.popover = "manual";
+		} else content.popover ??= "auto";
+		setStyle(anchor, "anchorName", state.name);
+		setStyle(content, "positionAnchor", state.name);
+	}
 };
 function getAnchorName(anchor) {
 	let { anchorName } = anchor.style;
@@ -101,7 +104,7 @@ function createInstance(anchor, content, options, standalone) {
 function getOnBeforeToggleListener(element) {
 	return on(element, "beforetoggle", (event) => {
 		const { newState, source } = event;
-		if (newState === "open" && source != null && getAria(source, "disabled") === "true") event.preventDefault();
+		if (newState === "open" && source != null && getAria(source, "disabled") === true) event.preventDefault();
 	}, { passive: false });
 }
 function getOptions(input) {

package/dist/js/focus-trap/focus-trap.embedded.mjs

@@ -1,10 +1,10 @@
 import { attributable } from "../internal/attributable.mjs";
+import { clamp } from "@oscarpalmer/atoms/number";
+import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { dispatch, on } from "@oscarpalmer/toretto/event";
+import { findAncestor } from "@oscarpalmer/toretto/find";
 import { isPlainObject } from "@oscarpalmer/atoms/is";
-import { setAttribute } from "@oscarpalmer/toretto/attribute";
 import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { clamp } from "@oscarpalmer/atoms/number";
-import { findAncestor } from "@oscarpalmer/toretto/find";
 import { getFocusable } from "@oscarpalmer/toretto/focusable";
 //#region src/js/focus-trap/focus-trap.embedded.ts
 var OuiFocusTrap = class {
@@ -171,16 +171,12 @@ function onPointerdown(event) {
 function onTab(event) {
 	const element = findAncestor(event, SELECTOR);
 	const instance = instances.get(element);
-	if (instance == null) return;
-	const dispatched = dispatch(element, "focus-trap");
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) return;
-		if (!instance.disabled) event.preventDefault();
-		const elements = getFocusable(element);
-		const index = elements.indexOf(event.target);
-		if (index === -1 || elements.length === 0) tabToTrap(instance, elements, element);
-		else tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
-	});
+	if (instance == null || dispatch(element, "oui:focus-trap").defaultPrevented) return;
+	if (!instance.disabled) event.preventDefault();
+	const elements = getFocusable(element);
+	const index = elements.indexOf(event.target);
+	if (index === -1 || elements.length === 0) tabToTrap(instance, elements, element);
+	else tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
 }
 function removeFocusTrap(element) {
 	instances.get(element)?.destroy();

package/dist/js/{index-EfkUSals.d.mts → index-DJdFlTLm.d.mts}

@@ -46,6 +46,14 @@ declare class OuiComboboxElement extends HTMLElement {
    * Set the filter value
    */
   set filter(value: string);
+  /**
+   * Form element associated with the combobox
+   */
+  get form(): HTMLFormElement | null;
+  /**
+   * Label elements associated with the combobox
+   */
+  get labels(): NodeList;
   /**
    * Maximum number of selected options
    */
@@ -94,6 +102,14 @@ declare class OuiComboboxElement extends HTMLElement {
    * Type of combobox
    */
   get type(): OuiListboxType;
+  /**
+   * Validation message for the combobox
+   */
+  get validationMessage(): string;
+  /**
+   * Validity state for the combobox
+   */
+  get validity(): ValidityState;
   /**
    * Current value
    */
@@ -110,8 +126,18 @@ declare class OuiComboboxElement extends HTMLElement {
    * Set the values
    */
   set values(values: unknown[]);
+  /**
+   * Can the combobox be validated?
+   */
+  get willValidate(): boolean;
   constructor();
   attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Check if the combobox is valid
+   *
+   * @returns `true` if the combobox is valid, otherwise `false`
+   */
+  checkValidity(): boolean;
   /**
    * Clear all selected options
    */
@@ -120,7 +146,19 @@ declare class OuiComboboxElement extends HTMLElement {
   disconnectedCallback(): void;
   formDisabledCallback(disabled: boolean): void;
   formResetCallback(): void;
-  formStateRestoreCallback(state: string | File | FormData, reason: unknown): void;
+  formStateRestoreCallback(state: unknown, reason: unknown): void;
+  /**
+   * Check if the combobox is valid and report any validation errors
+   *
+   * @returns `true` if the combobox is valid, otherwise `false`
+   */
+  reportValidity(): boolean;
+  /**
+   * Set a custom validation message for the combobox
+   *
+   * @param message Validation message
+   */
+  setCustomValidity(message: string): void;
   /**
    * Set combobox localizations for a specific language
    *

package/dist/js/index.d.mts

@@ -1,5 +1,6 @@
+import { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations } from "./color-picker.mjs";
 import { a as OuiFloatablePosition, n as CreateOuiFloatableOptions, r as OuiFloatable, s as createFloatable } from "./floatable.embedded-Bct4U5Dm.mjs";
-import { a as setComboboxLocalizations, t as OuiComboboxElement } from "./index-EfkUSals.mjs";
+import { a as setComboboxLocalizations, t as OuiComboboxElement } from "./index-DJdFlTLm.mjs";
 import { d as OuiSortable, f as createSortable, g as createMovable, h as OuiMovable, t as CreateOuiDraggableOptions } from "./draggable-a6w0J1OD.mjs";
 import "./movable/movable.standalone.mjs";
 import { a as createResizable, n as OuiResizable, t as CreateOuiResizableOptions } from "./resizable.embedded-3qoR0Bjm.mjs";
@@ -12,5 +13,6 @@ import { OuiListboxElement } from "./listbox/index.mjs";
 import { OuiPopover, getPopover } from "./popover.mjs";
 import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
+import { OuiTabsElement, OuiTabsEvent } from "./tabs.mjs";
 import { OuiTooltip, getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };
+export { type CreateOuiFloatableOptions, type CreateOuiDraggableOptions as CreateOuiMovableOptions, type CreateOuiDraggableOptions as CreateOuiSortableOptions, type CreateOuiResizableOptions, OuiColorPickerElement, OuiColorPickerEvent, OuiComboboxElement, type OuiDialog, type OuiFloatable, type OuiFloatablePosition, type OuiFocusTrap, type OuiFocusTrapOptions, OuiListboxElement, type OuiMovable, type OuiPopover, type OuiResizable, type OuiSortable, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, type OuiTooltip, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setColorPickerLocalizations, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };

package/dist/js/index.mjs

@@ -1,21 +1,23 @@
 import { createFloatable } from "./floatable/floatable.embedded.mjs";
+import { OuiColorPickerElement, OuiColorPickerEvent, setColorPickerLocalizations } from "./color-picker.mjs";
 import { createMovable } from "./movable/movable.embedded.mjs";
 import "./movable/movable.standalone.mjs";
 import { createResizable } from "./resizable/resizable.embedded.mjs";
 import { getDialog } from "./dialog.mjs";
 import "./menu.mjs";
 import "./toolbar.mjs";
-import { D as setComboboxLocalizations } from "./state.combobox-4xq0FPCF.mjs";
+import { D as setComboboxLocalizations } from "./state.combobox-Qm3FWzYW.mjs";
 import { OuiComboboxElement } from "./combobox/index.mjs";
 import "./floatable/floatable.standalone.mjs";
 import { createFocusTrap } from "./focus-trap/focus-trap.embedded.mjs";
 import "./focus-trap/focus-trap.standalone.mjs";
-import { n as setListboxLocalizations } from "./misc.listbox-BI-XsTOf.mjs";
+import { n as setListboxLocalizations } from "./misc.listbox-Cyz2CRDy.mjs";
 import { OuiListboxElement } from "./listbox/index.mjs";
 import { getPopover } from "./popover.mjs";
 import "./resizable/resizable.standalone.mjs";
 import { createSortable } from "./sortable/sortable.embedded.mjs";
 import "./sortable/sortable.standalone.mjs";
 import { OuiSplitterElement } from "./splitter.mjs";
+import { OuiTabsElement, OuiTabsEvent } from "./tabs.mjs";
 import { getTooltip, setTooltipDelay } from "./tooltip.mjs";
-export { OuiComboboxElement, OuiListboxElement, OuiSplitterElement, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };
+export { OuiColorPickerElement, OuiColorPickerEvent, OuiComboboxElement, OuiListboxElement, OuiSplitterElement, OuiTabsElement, OuiTabsEvent, createFloatable, createFocusTrap, createMovable, createResizable as createOuiResizable, createSortable, getDialog, getPopover, getTooltip, setColorPickerLocalizations, setComboboxLocalizations, setListboxLocalizations, setTooltipDelay };

package/dist/js/internal/draggable.mjs

@@ -1,10 +1,10 @@
-import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } from "@oscarpalmer/atoms/number";
+import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
+import { dispatch, getEventPosition, on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import supportsTouch from "@oscarpalmer/toretto/touch";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/internal/draggable.ts
 var OuiDraggable = class {
 	#destroyed = false;
@@ -54,7 +54,7 @@ function addDraggable(element, options) {
 function cancelDrag(item) {
 	if (item == null) return;
 	item.state.options.drag.onCancel?.(globals, item);
-	dispatch(item.state.element, `${item.state.name}:cancel`, { detail: { element: item.state.options.getOrigin() } });
+	dispatch(item.state.element, `oui:${item.state.name}:cancel`, { detail: { element: item.state.options.getOrigin() } });
 	reset();
 }
 function destroyInstance(instance, state) {
@@ -130,26 +130,23 @@ function onPointerdown(event) {
 	};
 	globals.offset = item.state.options.position.getOffset(globals, item, element, position);
 	globals.original = item.state.options.position.getOriginal(globals, item, position);
-	const dispatched = dispatch(item.state.element, `${item.state.name}:begin`, { detail: {
+	if (dispatch(item.state.element, `oui:${item.state.name}:begin`, { detail: {
 		element,
 		position: { ...globals.original }
-	} });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			item.state.options.drag.onCancel?.(globals, item);
-			reset();
-			return;
-		}
-		const next = getNextPosition(item, position);
-		setStyles(dragged, {
-			position: "fixed",
-			inset: `${next.y}px auto auto ${next.x}px`,
-			transform: "translate3d(0, 0, 0)"
-		});
-		item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
-		item.state.styling.set();
-		styleToggler.set();
+	} }).defaultPrevented) {
+		item.state.options.drag.onCancel?.(globals, item);
+		reset();
+		return;
+	}
+	const next = getNextPosition(item, position);
+	setStyles(dragged, {
+		position: "fixed",
+		inset: `${next.y}px auto auto ${next.x}px`,
+		transform: "translate3d(0, 0, 0)"
 	});
+	item.state.options.drag.onBegin?.(event, globals, item, element, handle, next);
+	item.state.styling.set();
+	styleToggler.set();
 }
 function onPointermove(event) {
 	if (current == null) return;
@@ -161,10 +158,7 @@ function onPointermove(event) {
 		calculated: next,
 		original: position
 	});
-	const dispatched = dispatch(current.state.element, `${current.state.name}:move`, { detail });
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) cancelDrag(current);
-	});
+	if (dispatch(current.state.element, `oui:${current.state.name}:move`, { detail }).defaultPrevented) cancelDrag(current);
 }
 function onPointerup(event) {
 	current?.state.options.drag.onEnd?.(event, globals, current, reset);

package/dist/js/internal/listbox/listbox.data.mjs

@@ -1,2 +1,2 @@
-import { a as setListboxValue, i as filterListboxOptions, n as filterListbox, o as setListboxValues, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection } from "../../listbox.data-BWd0PCy7.mjs";
+import { a as setListboxValue, i as filterListboxOptions, n as filterListbox, o as setListboxValues, r as filterListboxOption, s as toggleListboxOption, t as applyListboxSelection } from "../../listbox.data-C7CRa5Ya.mjs";
 export { applyListboxSelection, filterListbox, filterListboxOption, filterListboxOptions, setListboxValue, setListboxValues, toggleListboxOption };

package/dist/js/internal/listbox/listbox.dom.mjs

@@ -1,2 +1,2 @@
-import { _ as createListboxValueLabel, b as updateListboxValueLabel, c as createListboxContent, d as createListboxHeader, f as createListboxInput, g as createListboxOptions, h as createListboxOption, l as createListboxFilter, m as createListboxMessage, p as createListboxList, u as createListboxGroup, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-BWd0PCy7.mjs";
+import { _ as createListboxValueLabel, b as updateListboxValueLabel, c as createListboxContent, d as createListboxHeader, f as createListboxInput, g as createListboxOptions, h as createListboxOption, l as createListboxFilter, m as createListboxMessage, p as createListboxList, u as createListboxGroup, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-C7CRa5Ya.mjs";
 export { createListboxContent, createListboxFilter, createListboxGroup, createListboxHeader, createListboxInput, createListboxList, createListboxMessage, createListboxOption, createListboxOptions, createListboxValueLabel, updateListboxMessage, updateListboxPreview, updateListboxValueLabel };

package/dist/js/internal/listbox/listbox.event.mjs

@@ -1,5 +1,5 @@
 import { LISTBOX_KEYS } from "./listbox.constants.mjs";
-import { S as getListboxVisibleOptions } from "../../listbox.data-BWd0PCy7.mjs";
+import { S as getListboxVisibleOptions } from "../../listbox.data-C7CRa5Ya.mjs";
 import { clamp } from "@oscarpalmer/atoms/number";
 //#region src/js/internal/listbox/listbox.event.ts
 function processListboxKeydown(event, state) {

package/dist/js/internal/listbox/listbox.form.mjs

@@ -12,14 +12,15 @@ function updateListboxForm(state, values, emit) {
 	state.internals.setFormValue(value, JSON.stringify(values));
 	state.callbacks.data.onForm(state);
 	updateListboxValidity(state);
-	if (emit ?? true) dispatch(state.host, "change");
+	if (emit ?? true) dispatch(state.host, "oui:change");
 }
 function updateListboxValidity(state) {
-	if (state.autocomplete.none && !state.listbox) {
-		const valueMissing = state.required && state.filter.element.value.length === 0;
-		const localization = getLocalization(state.localizations.global, state.host, "invalid", state.localizations.component);
-		state.internals.setValidity({ valueMissing }, localize(localization, {}, []));
-		state.internals.checkValidity();
+	const { autocomplete, filter, host, internals, listbox, localizations, max, min, multiple, options, required } = state;
+	if (autocomplete.none && !listbox) {
+		const valueMissing = required && filter.element.value.length === 0;
+		const localization = getLocalization(localizations.global, host, "invalid", localizations.component);
+		internals.setValidity({ valueMissing }, localize(localization, {}, []));
+		internals.checkValidity();
 		return;
 	}
 	let data = {};
@@ -27,26 +28,26 @@ function updateListboxValidity(state) {
 	let key;
 	let parameters = [];
 	switch (true) {
-		case state.required && state.options.selected.length === 0:
+		case required && options.selected.length === 0:
 			error = "badInput";
 			key = "input";
 			break;
-		case state.multiple && typeof state.max === "number" && state.options.selected.length > state.max:
-			data = { amount: state.max };
+		case multiple && typeof max === "number" && options.selected.length > max:
+			data = { amount: max };
 			error = "rangeOverflow";
 			key = "max";
-			parameters = [state.max];
+			parameters = [max];
 			break;
-		case state.multiple && typeof state.min === "number" && state.options.selected.length < state.min:
-			data = { amount: state.min };
+		case multiple && typeof min === "number" && options.selected.length < min:
+			data = { amount: min };
 			error = "rangeUnderflow";
 			key = "min";
-			parameters = [state.min];
+			parameters = [min];
 	}
-	const localization = key == null ? void 0 : getLocalization(state.localizations.global, state.host, key, state.localizations.component);
+	const localization = key == null ? void 0 : getLocalization(localizations.global, host, key, localizations.component);
 	const message = localization == null ? void 0 : localize(localization, data, parameters);
-	state.internals.setValidity(error == null ? {} : { [error]: true }, message);
-	state.internals.checkValidity();
+	internals.setValidity(error == null ? {} : { [error]: true }, message);
+	internals.checkValidity();
 }
 //#endregion
 export { updateListboxForm, updateListboxValidity };

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

@@ -1,2 +1,2 @@
-import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, S as getListboxVisibleOptions, T as setListboxLimit, w as setListboxFilter, x as generateListboxIds } from "../../listbox.data-BWd0PCy7.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, S as getListboxVisibleOptions, T as setListboxLimit, w as setListboxFilter, x as generateListboxIds } from "../../listbox.data-C7CRa5Ya.mjs";
 export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };

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

@@ -1,11 +1,11 @@
 import { updateListboxForm } from "./listbox.form.mjs";
-import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, T as setListboxLimit, b as updateListboxValueLabel, i as filterListboxOptions, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-BWd0PCy7.mjs";
+import { C as setListboxDisabled, D as setListboxReadonly, E as setListboxMultiple, O as setListboxRequired, T as setListboxLimit, b as updateListboxValueLabel, i as filterListboxOptions, v as updateListboxMessage, y as updateListboxPreview } from "../../listbox.data-C7CRa5Ya.mjs";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
 //#region src/js/internal/listbox/listbox.state.ts
 function attachListbox(state, states, onAttach) {
-	const { filter, host, label } = state;
+	const { filter, host, id, label } = state;
 	label.element.htmlFor = filter.element.id;
-	label.element.id = `${state.id}_label`;
+	label.element.id = `${id}_label`;
 	onAttach(state);
 	states.map.set(host, state);
 	states.set.add(state);
@@ -33,7 +33,7 @@ function initializeListboxState(state, states, onAttach) {
 	updateListboxForm(state, state.values.current, false);
 	updateListboxMessage(state);
 	updateListboxValueLabel(state);
-	if (state.options.selected.length > 0) updateListboxPreview("none", state, state.options.selected[0]);
+	if (state.options.selected.length > 0) updateListboxPreview("none", state, state.options.selected[0], false);
 	return state;
 }
 //#endregion

package/dist/js/internal/navigable.d.mts

@@ -8,24 +8,30 @@ declare class OuiNavigable {
   orientation: OuiNavigableOrientation;
   constructor(element: HTMLElement, options: OuiNavigableOptions);
   destroy(): void;
+  navigate(index: number, focus?: boolean): void;
 }
 type OuiNavigableActive = {
   element?: HTMLElement;
   index: number;
 };
+type OuiNavigableCallback<ReturnType> = (event: KeyboardEvent, navigable: OuiNavigable) => ReturnType;
 type OuiNavigableOptions = {
+  orientation?: OuiNavigableOrientation;
   role?: AriaRole;
   selector: string;
   vertical: boolean;
-  onDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => void;
-  onPreventNavigation?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
-  onShouldActivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean;
-  onShouldDeactivate?: (event: KeyboardEvent, navigable: OuiNavigable) => boolean | undefined;
+  onActivate?: (navigable: OuiNavigable) => void;
+  onDeactivate?: OuiNavigableCallback<void>;
+  onNavigation?: (navigable: OuiNavigable) => void;
+  onPreventNavigation?: OuiNavigableCallback<boolean>;
+  onShouldActivate?: OuiNavigableCallback<boolean>;
+  onShouldDeactivate?: OuiNavigableCallback<boolean | undefined>;
 };
 type OuiNavigableOrientation = 'horizontal' | 'vertical';
 declare function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable;
+declare function getNavigableOrientation(element: HTMLElement, vertical: boolean, aria?: boolean): OuiNavigableOrientation;
 declare function updateNavigableFocus(navigable: OuiNavigable, focus: boolean, items?: HTMLElement[]): void;
 declare const NAVIGABLE_KEYS_HORIZONTAL: Set<string>;
 declare const NAVIGABLE_KEYS_VERTICAL: Set<string>;
 //#endregion
-export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, OuiNavigableOptions, getNavigable, updateNavigableFocus };
+export { NAVIGABLE_KEYS_HORIZONTAL, NAVIGABLE_KEYS_VERTICAL, OuiNavigable, OuiNavigableOptions, OuiNavigableOrientation, getNavigable, getNavigableOrientation, updateNavigableFocus };