@oscarpalmer/oui 0.37.0 → 0.39.0

package/dist/js/index.mjs

@@ -5,12 +5,15 @@ 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 { OuiColorPickerEvent } from "./color-picker/models.color-picker.mjs";
+import { d as setColorPickerLocalizations } from "./event.color-picker-BEpq0Adu.mjs";
+import { OuiColorPickerElement } from "./color-picker/index.mjs";
+import { D as setComboboxLocalizations } from "./state.combobox-BWDFHwoi.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-DKB-j0UK.mjs";
 import { OuiListboxElement } from "./listbox/index.mjs";
 import { getPopover } from "./popover.mjs";
 import "./resizable/resizable.standalone.mjs";
@@ -19,4 +22,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/attributable.d.mts

@@ -1,4 +1,3 @@
 //#region src/js/internal/attributable.d.ts
-declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
-//#endregion
-export { attributable };
+export declare function attributable(attribute: string, add: (element: HTMLElement) => void, remove: (element: HTMLElement) => void): void;
+//#endregion

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

@@ -1,2 +1,2 @@
-import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-a6w0J1OD.mjs";
+import { a as OuiDraggableGlobals, c as addDraggable, i as OuiDraggableBound, l as getDraggableStates, n as OuiDragMovePosition, o as OuiDraggableItem, r as OuiDraggable, s as OuiDraggableState, t as CreateOuiDraggableOptions, u as removeDraggable } from "../draggable-B5-70SZm.mjs";
 export { CreateOuiDraggableOptions, OuiDragMovePosition, OuiDraggable, OuiDraggableBound, OuiDraggableGlobals, OuiDraggableItem, OuiDraggableState, addDraggable, getDraggableStates, removeDraggable };

package/dist/js/internal/draggable.mjs

@@ -4,7 +4,7 @@ import { isHTMLOrSVGElement } from "@oscarpalmer/toretto/is";
 import { setStyle, setStyles, toggleStyles } from "@oscarpalmer/toretto/style";
 import { clamp } 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/internal/draggable.ts
 var OuiDraggable = class {
 	#destroyed = false;

package/dist/js/internal/listbox/listbox.constants.d.mts

@@ -1,11 +1,8 @@
-import { d as OuiListboxType } from "../../listbox.model-CRReGOmu.mjs";
+import { d as OuiListboxType } from "../../listbox.model-BHPA7GM4.mjs";
 //#region src/js/internal/listbox/listbox.constants.d.ts
-declare const LISTBOX_KEYS: {
-  activation: Set<string>;
-  navigation: Set<string>;
-  selection: Set<string>;
-};
-declare const LISTBOX_TYPES: Set<OuiListboxType>;
-declare const listboxScrollOptions: ScrollIntoViewOptions;
-//#endregion
-export { LISTBOX_KEYS, LISTBOX_TYPES, listboxScrollOptions };
+export declare const LISTBOX_KEYS_ACTIVATION: Set<string>;
+export declare const LISTBOX_KEYS_NAVIGATION: Set<string>;
+export declare const LISTBOX_KEYS_SELECTION: Set<string>;
+export declare const LISTBOX_TYPES: Set<OuiListboxType>;
+export declare const listboxScrollOptions: ScrollIntoViewOptions;
+//#endregion

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

@@ -1,18 +1,17 @@
-const LISTBOX_KEYS = {
-	activation: /* @__PURE__ */ new Set([
-		" ",
-		"Backspace",
-		"Delete",
-		"Enter"
-	]),
-	navigation: /* @__PURE__ */ new Set([
-		"ArrowDown",
-		"ArrowUp",
-		"PageDown",
-		"PageUp"
-	]),
-	selection: /* @__PURE__ */ new Set(["ArrowRight", "End"])
-};
+//#region src/js/internal/listbox/listbox.constants.ts
+const LISTBOX_KEYS_ACTIVATION = /* @__PURE__ */ new Set([
+	" ",
+	"Backspace",
+	"Delete",
+	"Enter"
+]);
+const LISTBOX_KEYS_NAVIGATION = /* @__PURE__ */ new Set([
+	"ArrowDown",
+	"ArrowUp",
+	"PageDown",
+	"PageUp"
+]);
+const LISTBOX_KEYS_SELECTION = /* @__PURE__ */ new Set(["ArrowRight", "End"]);
 const LISTBOX_TYPES = /* @__PURE__ */ new Set(["autocomplete", "select"]);
 const listboxScrollOptions = {
 	behavior: "auto",
@@ -20,4 +19,4 @@ const listboxScrollOptions = {
 	inline: "nearest"
 };
 //#endregion
-export { LISTBOX_KEYS, LISTBOX_TYPES, listboxScrollOptions };
+export { LISTBOX_KEYS_ACTIVATION, LISTBOX_KEYS_NAVIGATION, LISTBOX_KEYS_SELECTION, LISTBOX_TYPES, listboxScrollOptions };

package/dist/js/internal/listbox/listbox.data.d.mts

@@ -1,4 +1,4 @@
-import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState } from "../../listbox.model-BHPA7GM4.mjs";
 //#region src/js/internal/listbox/listbox.data.d.ts
 type ApplySelectionParameters<State extends OuiListboxState = OuiListboxState> = {
   added: boolean;
@@ -9,12 +9,11 @@ type ApplySelectionParameters<State extends OuiListboxState = OuiListboxState> =
   state: State;
   values?: string[];
 };
-declare function applyListboxSelection<State extends OuiListboxState>(parameters: ApplySelectionParameters<State>): void;
-declare function filterListbox(type: InputEvent['inputType'], state: OuiListboxState): void;
-declare function filterListboxOption(state: OuiListboxState, value: unknown, textContent?: boolean): HTMLElement | undefined;
-declare function filterListboxOptions(state: OuiListboxState): HTMLElement | undefined;
-declare function setListboxValue<State extends OuiListboxState>(state: State, value: unknown, emit?: boolean): void;
-declare function setListboxValues<State extends OuiListboxState>(state: State, value: unknown[], emit?: boolean): void;
-declare function toggleListboxOption<State extends OuiListboxState>(state: State, option?: HTMLElement): void;
-//#endregion
-export { applyListboxSelection, filterListbox, filterListboxOption, filterListboxOptions, setListboxValue, setListboxValues, toggleListboxOption };
+export declare function applyListboxSelection<State extends OuiListboxState>(parameters: ApplySelectionParameters<State>): void;
+export declare function filterListbox(type: InputEvent["inputType"], state: OuiListboxState): void;
+export declare function filterListboxOption(state: OuiListboxState, value: unknown, textContent?: boolean): HTMLElement | undefined;
+export declare function filterListboxOptions(state: OuiListboxState): HTMLElement | undefined;
+export declare function setListboxValue<State extends OuiListboxState>(state: State, value: unknown, emit?: boolean): void;
+export declare function setListboxValues<State extends OuiListboxState>(state: State, value: unknown[], emit?: boolean): void;
+export declare function toggleListboxOption<State extends OuiListboxState>(state: State, option?: HTMLElement): void;
+//#endregion

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-DQ7-x2uY.mjs";
 export { applyListboxSelection, filterListbox, filterListboxOption, filterListboxOptions, setListboxValue, setListboxValues, toggleListboxOption };

package/dist/js/internal/listbox/listbox.dom.d.mts

@@ -1,13 +1,13 @@
-import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, l as OuiListboxState, n as OuiListboxAutoComplete, s as OuiListboxOptions, t as OuiListboxAttributes } from "../../listbox.model-CRReGOmu.mjs";
+import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, l as OuiListboxState, n as OuiListboxAutoComplete, s as OuiListboxOptions, t as OuiListboxAttributes } from "../../listbox.model-BHPA7GM4.mjs";
 //#region src/js/internal/listbox/listbox.dom.d.ts
-type CreateListboxContent = {
+export type CreateListboxContent = {
   element: HTMLDivElement;
   filter?: CreateListboxFilter;
   list: CreateListboxList;
   message: HTMLDivElement;
   value: HTMLSpanElement;
 };
-type CreateListboxContentParameters = {
+export type CreateListboxContentParameters = {
   attributes: OuiListboxAttributes;
   autocomplete: OuiListboxAutoComplete;
   element: HTMLElement;
@@ -18,7 +18,7 @@ type CreateListboxContentParameters = {
   select: HTMLSelectElement;
   type: OuiListboxType;
 };
-type CreateListboxFilter = {
+export type CreateListboxFilter = {
   container: HTMLElement;
   element: HTMLInputElement;
 };
@@ -29,7 +29,7 @@ type CreateListboxGroupParameters = {
   selected: HTMLElement[];
   type: OuiListboxType;
 };
-type CreateListboxList = {
+export type CreateListboxList = {
   element: HTMLUListElement;
   groups?: OuiListboxGroup[];
   options: OuiListboxOptions;
@@ -49,18 +49,17 @@ type CreateListboxOptionsParameters = {
   selected: HTMLElement[];
   type: OuiListboxType;
 };
-declare function createListboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
-declare function createListboxFilter(parameters: CreateListboxContentParameters): CreateListboxFilter | undefined;
-declare function createListboxGroup(parameters: CreateListboxGroupParameters): OuiListboxGroup;
-declare function createListboxHeader(parameters: CreateListboxGroupParameters, group: HTMLOptGroupElement): HTMLElement;
-declare function createListboxInput(parameters: CreateListboxContentParameters, value: string): HTMLInputElement;
-declare function createListboxList(parameters: CreateListboxContentParameters): CreateListboxList;
-declare function createListboxMessage(attribute: string): HTMLDivElement;
-declare function createListboxOption(parameters: CreateListboxOptionParameters): HTMLElement;
-declare function createListboxOptions(parameters: CreateListboxOptionsParameters): HTMLElement[];
-declare function createListboxValueLabel(id: string): HTMLSpanElement;
-declare function updateListboxMessage(state: OuiListboxState): void;
-declare function updateListboxPreview<State extends OuiListboxState>(preview: OuiListboxPreview, state: State, active?: HTMLElement, scroll?: boolean): void;
-declare function updateListboxValueLabel<State extends OuiListboxState>(state: State): void;
-//#endregion
-export { CreateListboxContent, CreateListboxContentParameters, CreateListboxFilter, CreateListboxList, createListboxContent, createListboxFilter, createListboxGroup, createListboxHeader, createListboxInput, createListboxList, createListboxMessage, createListboxOption, createListboxOptions, createListboxValueLabel, updateListboxMessage, updateListboxPreview, updateListboxValueLabel };
+export declare function createListboxContent(parameters: CreateListboxContentParameters): CreateListboxContent;
+export declare function createListboxFilter(parameters: CreateListboxContentParameters): CreateListboxFilter | undefined;
+export declare function createListboxGroup(parameters: CreateListboxGroupParameters): OuiListboxGroup;
+export declare function createListboxHeader(parameters: CreateListboxGroupParameters, group: HTMLOptGroupElement): HTMLElement;
+export declare function createListboxInput(parameters: CreateListboxContentParameters, value: string): HTMLInputElement;
+export declare function createListboxList(parameters: CreateListboxContentParameters): CreateListboxList;
+export declare function createListboxMessage(attribute: string): HTMLDivElement;
+export declare function createListboxOption(parameters: CreateListboxOptionParameters): HTMLElement;
+export declare function createListboxOptions(parameters: CreateListboxOptionsParameters): HTMLElement[];
+export declare function createListboxValueLabel(id: string): HTMLSpanElement;
+export declare function updateListboxMessage(state: OuiListboxState): void;
+export declare function updateListboxPreview<State extends OuiListboxState>(preview: OuiListboxPreview, state: State, active?: HTMLElement, scroll?: boolean): void;
+export declare function updateListboxValueLabel<State extends OuiListboxState>(state: State): void;
+//#endregion

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-DQ7-x2uY.mjs";
 export { createListboxContent, createListboxFilter, createListboxGroup, createListboxHeader, createListboxInput, createListboxList, createListboxMessage, createListboxOption, createListboxOptions, createListboxValueLabel, updateListboxMessage, updateListboxPreview, updateListboxValueLabel };

package/dist/js/internal/listbox/listbox.event.d.mts

@@ -1,5 +1,4 @@
-import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState } from "../../listbox.model-BHPA7GM4.mjs";
 //#region src/js/internal/listbox/listbox.event.d.ts
-declare function processListboxKeydown<State extends OuiListboxState>(event: KeyboardEvent, state: State): void;
-//#endregion
-export { processListboxKeydown };
+export declare function processListboxKeydown<State extends OuiListboxState>(event: KeyboardEvent, state: State): void;
+//#endregion

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 { LISTBOX_KEYS_NAVIGATION, LISTBOX_KEYS_SELECTION } from "./listbox.constants.mjs";
+import { S as getListboxVisibleOptions } from "../../listbox.data-DQ7-x2uY.mjs";
 import { clamp } from "@oscarpalmer/atoms/number";
 //#region src/js/internal/listbox/listbox.event.ts
 function processListboxKeydown(event, state) {
@@ -20,10 +20,10 @@ function processListboxKeydown(event, state) {
 			preventDefault = false;
 			state.callbacks.keydown.onEscape?.(state);
 			break;
-		case !isSelect && LISTBOX_KEYS.selection.has(event.key):
+		case !isSelect && LISTBOX_KEYS_SELECTION.has(event.key):
 			if (!ignore) state.callbacks.keydown.onSelection?.(state);
 			break;
-		case LISTBOX_KEYS.navigation.has(event.key):
+		case LISTBOX_KEYS_NAVIGATION.has(event.key):
 			if (!state.disabled) onNavigation(event, state);
 			break;
 		default:

package/dist/js/internal/listbox/listbox.form.d.mts

@@ -1,6 +1,5 @@
-import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState } from "../../listbox.model-BHPA7GM4.mjs";
 //#region src/js/internal/listbox/listbox.form.d.ts
-declare function updateListboxForm<State extends OuiListboxState>(state: State, values: string[], emit?: boolean): void;
-declare function updateListboxValidity(state: OuiListboxState): void;
-//#endregion
-export { updateListboxForm, updateListboxValidity };
+export declare function updateListboxForm<State extends OuiListboxState>(state: State, values: string[], emit?: boolean): void;
+export declare function updateListboxValidity(state: OuiListboxState): void;
+//#endregion

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.d.mts

@@ -1,12 +1,11 @@
-import { l as OuiListboxState } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState } from "../../listbox.model-BHPA7GM4.mjs";
 //#region src/js/internal/listbox/listbox.misc.d.ts
-declare function generateListboxIds(prefix: string, select: HTMLSelectElement): void;
-declare function getListboxVisibleOptions(state: OuiListboxState): HTMLElement[];
-declare function setListboxDisabled<State extends OuiListboxState>(state: State, value: boolean): void;
-declare function setListboxFilter<State extends OuiListboxState>(state: State, value: unknown): void;
-declare function setListboxLimit<State extends OuiListboxState>(type: 'max' | 'min', state: State, value?: unknown): void;
-declare function setListboxMultiple(element: HTMLElement, value: boolean): void;
-declare function setListboxReadonly<State extends OuiListboxState>(state: State, value: boolean): void;
-declare function setListboxRequired<State extends OuiListboxState>(state: State, value: boolean): void;
-//#endregion
-export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };
+export declare function generateListboxIds(prefix: string, select: HTMLSelectElement): void;
+export declare function getListboxVisibleOptions(state: OuiListboxState): HTMLElement[];
+export declare function setListboxDisabled<State extends OuiListboxState>(state: State, value: boolean): void;
+export declare function setListboxFilter<State extends OuiListboxState>(state: State, value: unknown): void;
+export declare function setListboxLimit<State extends OuiListboxState>(type: "max" | "min", state: State, value?: unknown): void;
+export declare function setListboxMultiple(element: HTMLElement, value: boolean): void;
+export declare function setListboxReadonly<State extends OuiListboxState>(state: State, value: boolean): void;
+export declare function setListboxRequired<State extends OuiListboxState>(state: State, value: boolean): void;
+//#endregion

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-DQ7-x2uY.mjs";
 export { generateListboxIds, getListboxVisibleOptions, setListboxDisabled, setListboxFilter, setListboxLimit, setListboxMultiple, setListboxReadonly, setListboxRequired };

package/dist/js/internal/listbox/listbox.model.d.mts

@@ -1,2 +1,2 @@
-import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, i as OuiListboxCallbacks, l as OuiListboxState, n as OuiListboxAutoComplete, o as OuiListboxLocalizations, r as OuiListboxAutoCompleteType, s as OuiListboxOptions, t as OuiListboxAttributes, u as OuiListboxStates } from "../../listbox.model-CRReGOmu.mjs";
+import { a as OuiListboxGroup, c as OuiListboxPreview, d as OuiListboxType, i as OuiListboxCallbacks, l as OuiListboxState, n as OuiListboxAutoComplete, o as OuiListboxLocalizations, r as OuiListboxAutoCompleteType, s as OuiListboxOptions, t as OuiListboxAttributes, u as OuiListboxStates } from "../../listbox.model-BHPA7GM4.mjs";
 export { OuiListboxAttributes, OuiListboxAutoComplete, OuiListboxAutoCompleteType, OuiListboxCallbacks, OuiListboxGroup, OuiListboxLocalizations, OuiListboxOptions, OuiListboxPreview, OuiListboxState, OuiListboxStates, OuiListboxType };

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

@@ -1,7 +1,6 @@
-import { l as OuiListboxState, u as OuiListboxStates } from "../../listbox.model-CRReGOmu.mjs";
+import { l as OuiListboxState, u as OuiListboxStates } from "../../listbox.model-BHPA7GM4.mjs";
 //#region src/js/internal/listbox/listbox.state.d.ts
-declare function attachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): void;
-declare function detachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onDetach: (state: State) => void): void;
-declare function initializeListboxState<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): State;
-//#endregion
-export { attachListbox, detachListbox, initializeListboxState };
+export declare function attachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): void;
+export declare function detachListbox<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onDetach: (state: State) => void): void;
+export declare function initializeListboxState<State extends OuiListboxState>(state: State, states: OuiListboxStates<State>, onAttach: (state: State) => void): State;
+//#endregion

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-DQ7-x2uY.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/misc.d.mts

@@ -1,6 +1,6 @@
 import { AnyAriaBooleanAttribute } from "@oscarpalmer/toretto/models";
 //#region src/js/internal/misc.d.ts
-declare function getAttributeValue<Value>(element: HTMLElement, attribute: string, possible: Set<Value>, defaultValue: Value): Value;
-declare function getBooleanAriaValue(element: HTMLElement, attribute: AnyAriaBooleanAttribute): boolean;
-//#endregion
-export { getAttributeValue, getBooleanAriaValue };
+export declare function copyValue(value: string, onSuccess?: () => void, onError?: () => void): void;
+export declare function getAttributeValue<Value>(element: HTMLElement, attribute: string, possible: Set<Value>, defaultValue: Value): Value;
+export declare function getBooleanAriaValue(element: HTMLElement, attribute: AnyAriaBooleanAttribute): boolean;
+//#endregion

package/dist/js/internal/misc.mjs

@@ -1,6 +1,14 @@
 import { getAria } from "@oscarpalmer/toretto/aria";
 import { getAttribute } from "@oscarpalmer/toretto/attribute";
+import { noop } from "@oscarpalmer/atoms/function";
 //#region src/js/internal/misc.ts
+function copyValue(value, onSuccess, onError) {
+	try {
+		navigator.clipboard.writeText(value).then(onSuccess ?? noop, onError ?? noop);
+	} catch {
+		onError?.();
+	}
+}
 function getAttributeValue(element, attribute, possible, defaultValue) {
 	const value = getAttribute(element, attribute);
 	return possible.has(value) ? value : defaultValue;
@@ -10,4 +18,4 @@ function getBooleanAriaValue(element, attribute) {
 	return value === true || value === "true";
 }
 //#endregion
-export { getAttributeValue, getBooleanAriaValue };
+export { copyValue, getAttributeValue, getBooleanAriaValue };

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

@@ -1,6 +1,6 @@
 import { AriaRole, RemovableEventListener } from "@oscarpalmer/toretto/models";
 //#region src/js/internal/navigable.d.ts
-declare class OuiNavigable {
+export declare class OuiNavigable {
   active: OuiNavigableActive;
   element: HTMLElement;
   listeners: RemovableEventListener[];
@@ -15,7 +15,7 @@ type OuiNavigableActive = {
   index: number;
 };
 type OuiNavigableCallback<ReturnType> = (event: KeyboardEvent, navigable: OuiNavigable) => ReturnType;
-type OuiNavigableOptions = {
+export type OuiNavigableOptions = {
   orientation?: OuiNavigableOrientation;
   role?: AriaRole;
   selector: string;
@@ -27,11 +27,10 @@ type OuiNavigableOptions = {
   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, OuiNavigableOrientation, getNavigable, getNavigableOrientation, updateNavigableFocus };
+export type OuiNavigableOrientation = "horizontal" | "vertical";
+export declare function getNavigable(element: HTMLElement, options: OuiNavigableOptions): OuiNavigable;
+export declare function getNavigableOrientation(element: HTMLElement, vertical: boolean, aria?: boolean): OuiNavigableOrientation;
+export declare function updateNavigableFocus(navigable: OuiNavigable, focus: boolean, items?: HTMLElement[]): void;
+export declare const NAVIGABLE_KEYS_HORIZONTAL: Set<string>;
+export declare const NAVIGABLE_KEYS_VERTICAL: Set<string>;
+//#endregion

package/dist/js/internal/navigable.mjs

@@ -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/constants.listbox.d.mts

@@ -1,2 +1,2 @@
-import { i as LISTBOX_TAGNAME, n as LISTBOX_MESSAGES, r as LISTBOX_SELECTORS, t as LISTBOX_ATTRIBUTES } from "../constants.listbox-DRsXUxd3.mjs";
+import { i as LISTBOX_TAGNAME, n as LISTBOX_MESSAGES, r as LISTBOX_SELECTORS, t as LISTBOX_ATTRIBUTES } from "../constants.listbox-DGnX32kv.mjs";
 export { LISTBOX_ATTRIBUTES, LISTBOX_MESSAGES, LISTBOX_SELECTORS, LISTBOX_TAGNAME };

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

@@ -1,8 +1,7 @@
-import { c as OuiListboxPreview, l as OuiListboxState } from "../listbox.model-CRReGOmu.mjs";
+import { c as OuiListboxPreview, l as OuiListboxState } from "../listbox.model-BHPA7GM4.mjs";
 //#region src/js/listbox/event.listbox.d.ts
-declare function onListboxEnter(state: OuiListboxState): void;
-declare function onListboxFilter(preview: OuiListboxPreview, state: OuiListboxState, _: boolean, active?: HTMLElement): void;
-declare function onListboxNavigation(preview: OuiListboxPreview, state: OuiListboxState, active?: HTMLElement): void;
-declare function onListboxToggle(state: OuiListboxState): void;
-//#endregion
-export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };
+export declare function onListboxEnter(state: OuiListboxState): void;
+export declare function onListboxFilter(preview: OuiListboxPreview, state: OuiListboxState, _: boolean, active?: HTMLElement): void;
+export declare function onListboxNavigation(preview: OuiListboxPreview, state: OuiListboxState, active?: HTMLElement): void;
+export declare function onListboxToggle(state: OuiListboxState): void;
+//#endregion

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-DKB-j0UK.mjs";
 export { onListboxEnter, onListboxFilter, onListboxNavigation, onListboxToggle };

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

@@ -1,13 +1,13 @@
-import { o as OuiListboxLocalizations } from "../listbox.model-CRReGOmu.mjs";
-import { i as LISTBOX_TAGNAME } from "../constants.listbox-DRsXUxd3.mjs";
-import { n as setListboxLocalizations } from "../misc.listbox-gnoJhrTr.mjs";
+import { o as OuiListboxLocalizations } from "../listbox.model-BHPA7GM4.mjs";
+import { i as LISTBOX_TAGNAME } from "../constants.listbox-DGnX32kv.mjs";
+import { n as setListboxLocalizations } from "../misc.listbox-mZMuYOxg.mjs";
 //#region src/js/listbox/index.d.ts
 declare global {
   interface HTMLElementTagNameMap {
     [LISTBOX_TAGNAME]: OuiListboxElement;
   }
 }
-declare class OuiListboxElement extends HTMLElement {
+export declare class OuiListboxElement extends HTMLElement {
   #private;
   static formAssociated: boolean;
   static observedAttributes: string[];
@@ -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
    *
@@ -113,4 +151,4 @@ declare class OuiListboxElement extends HTMLElement {
   setLocalizations(localizations: Record<string, Partial<OuiListboxLocalizations>>): void;
 }
 //#endregion
-export { OuiListboxElement, setListboxLocalizations };
+export { setListboxLocalizations };