@oscarpalmer/oui 0.37.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 {

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";
@@ -14,4 +15,4 @@ 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, OuiTabsElement, OuiTabsEvent, 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,16 +1,17 @@
 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";
@@ -19,4 +20,4 @@ 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, OuiTabsElement, OuiTabsEvent, 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;

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

@@ -15,11 +15,12 @@ function updateListboxForm(state, values, emit) {
 	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);

package/dist/js/internal/navigable.mjs

@@ -1,9 +1,9 @@
+import { clamp } from "@oscarpalmer/atoms/number";
 import { getAria, setAria, setRole } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
-import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
-import { clamp } from "@oscarpalmer/atoms/number";
+import { on } from "@oscarpalmer/toretto/event";
 import { findAncestor } from "@oscarpalmer/toretto/find";
+import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 //#region src/js/internal/navigable.ts
 var OuiNavigable = class {
 	active = { index: 0 };
@@ -97,6 +97,7 @@ function onKeydown(navigable, event) {
 	const items = getItems(navigable.element, navigable.options.selector);
 	const { length } = items;
 	if (length === 0) return;
+	event.preventDefault();
 	let index;
 	if (KEYS_ABSOLUTE.has(event.key)) index = event.key === "Home" ? 0 : items.length - 1;
 	else {

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

@@ -1,2 +1,2 @@
-import { d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../misc.listbox-BI-XsTOf.mjs";
+import { d as onListboxNavigation, f as onListboxToggle, l as onListboxEnter, u as onListboxFilter } from "../misc.listbox-Cyz2CRDy.mjs";
 export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

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

@@ -27,6 +27,14 @@ declare class OuiListboxElement extends HTMLElement {
    * Set the filter value
    */
   set filter(value: string);
+  /**
+   * Form element associated with the listbox
+   */
+  get form(): HTMLFormElement | null;
+  /**
+   * Label elements associated with the listbox
+   */
+  get labels(): NodeList;
   /**
    * Maximum number of selected options
    */
@@ -71,6 +79,14 @@ declare class OuiListboxElement extends HTMLElement {
    * Selected options
    */
   get selected(): HTMLElement[];
+  /**
+   * Validation message for the listbox
+   */
+  get validationMessage(): string;
+  /**
+   * Validity state for the listbox
+   */
+  get validity(): ValidityState;
   /**
    * Current value
    */
@@ -87,8 +103,18 @@ declare class OuiListboxElement extends HTMLElement {
    * Set the values
    */
   set values(values: unknown[]);
+  /**
+   * Can the listbox be validated?
+   */
+  get willValidate(): boolean;
   constructor();
   attributeChangedCallback(name: string, _: string | null, value: string | null): void;
+  /**
+   * Check if the listbox is valid
+   *
+   * @returns `true` if the listbox is valid, otherwise `false`
+   */
+  checkValidity(): boolean;
   /**
    * Clear all selected options
    */
@@ -98,6 +124,18 @@ declare class OuiListboxElement extends HTMLElement {
   formDisabledCallback(disabled: boolean): void;
   formResetCallback(): void;
   formStateRestoreCallback(state: string | File | FormData, reason: unknown): void;
+  /**
+   * Check if the listbox is valid and report any validation errors
+   *
+   * @returns `true` if the listbox is valid, otherwise `false`
+   */
+  reportValidity(): boolean;
+  /**
+   * Set a custom validation message for the listbox
+   *
+   * @param message Validation message
+   */
+  setCustomValidity(message: string): void;
   /**
    * Set listbox localizations for a specific language
    *