@oscarpalmer/oui 0.36.0 → 0.38.0

package/src/js/combobox/dom.combobox.ts

@@ -73,6 +73,7 @@ export function createComboboxButton(parameters: CreateListboxContentParameters)
 		},
 		property: {
 			textContent: multiple ? '' : (select.selectedOptions[0]?.textContent ?? ''),
+			type: 'button',
 		},
 	});
 
@@ -189,6 +190,9 @@ export function createComboboxSelectionItem(
 		data: {
 			option: option.id,
 		},
+		property: {
+			type: 'button',
+		},
 	});
 
 	const icon = createElement('span', {

package/src/js/combobox/index.ts

@@ -69,6 +69,20 @@ export class OuiComboboxElement extends HTMLElement {
 		setListboxFilter(this.#state, value);
 	}
 
+	/**
+	 * Form element associated with the combobox
+	 */
+	get form(): HTMLFormElement | null {
+		return this.#internals.form;
+	}
+
+	/**
+	 * Label elements associated with the combobox
+	 */
+	get labels(): NodeList {
+		return this.#internals.labels;
+	}
+
 	/**
 	 * Maximum number of selected options
 	 */
@@ -157,6 +171,20 @@ export class OuiComboboxElement extends HTMLElement {
 		return this.#state.type;
 	}
 
+	/**
+	 * Validation message for the combobox
+	 */
+	get validationMessage(): string {
+		return this.#internals.validationMessage;
+	}
+
+	/**
+	 * Validity state for the combobox
+	 */
+	get validity(): ValidityState {
+		return this.#internals.validity;
+	}
+
 	/**
 	 * Current value
 	 */
@@ -185,6 +213,13 @@ export class OuiComboboxElement extends HTMLElement {
 		setListboxValues(this.#state, values);
 	}
 
+	/**
+	 * Can the combobox be validated?
+	 */
+	get willValidate(): boolean {
+		return this.#internals.willValidate;
+	}
+
 	constructor() {
 		super();
 
@@ -215,6 +250,15 @@ export class OuiComboboxElement extends HTMLElement {
 		}
 	}
 
+	/**
+	 * Check if the combobox is valid
+	 *
+	 * @returns `true` if the combobox is valid, otherwise `false`
+	 */
+	checkValidity(): boolean {
+		return this.#internals.checkValidity();
+	}
+
 	/**
 	 * Clear all selected options
 	 */
@@ -244,7 +288,7 @@ export class OuiComboboxElement extends HTMLElement {
 		setListboxValues(this.#state, this.#state.values.initial);
 	}
 
-	formStateRestoreCallback(state: string | File | FormData, reason: unknown): void {
+	formStateRestoreCallback(state: unknown, reason: unknown): void {
 		if (reason !== 'restore') {
 			return;
 		}
@@ -262,6 +306,24 @@ export class OuiComboboxElement extends HTMLElement {
 		}
 	}
 
+	/**
+	 * Check if the combobox is valid and report any validation errors
+	 *
+	 * @returns `true` if the combobox is valid, otherwise `false`
+	 */
+	reportValidity(): boolean {
+		return this.#internals.reportValidity();
+	}
+
+	/**
+	 * Set a custom validation message for the combobox
+	 *
+	 * @param message Validation message
+	 */
+	setCustomValidity(message: string): void {
+		this.#internals.setValidity({customError: message !== ''}, message, this);
+	}
+
 	/**
 	 * Set combobox localizations for a specific language
 	 *

package/src/js/dialog.ts

@@ -199,7 +199,7 @@ function getState(element: HTMLDialogElement): OuiDialogState {
 				}
 			}),
 		],
-		modal: getAria(element, 'modal') === 'true' || element.matches(':modal'),
+		modal: getAria(element, 'modal') === true || element.matches(':modal'),
 	};
 
 	state.dialog = new OuiDialog(state);

package/src/js/floatable/floatable.embedded.ts

@@ -1,5 +1,5 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
-import {getAria} from '@oscarpalmer/toretto/aria';
+import {getAria, setAria} from '@oscarpalmer/toretto/aria';
 import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {on} from '@oscarpalmer/toretto/event';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
@@ -45,18 +45,7 @@ export class OuiFloatable {
 	constructor(state: OuiFloatableState, standalone: boolean) {
 		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);
 	}
 
 	/**
@@ -103,6 +92,21 @@ export class OuiFloatable {
 			setPosition(this.#state, position);
 		}
 	}
+
+	#initialize(state: OuiFloatableState, standalone: boolean): void {
+		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);
+	}
 }
 
 export type OuiFloatableOptions = {
@@ -220,7 +224,7 @@ export function getOnBeforeToggleListener(element: HTMLElement): RemovableEventL
 		event => {
 			const {newState, source} = event;
 
-			if (newState === 'open' && source != null && getAria(source, 'disabled') === 'true') {
+			if (newState === 'open' && source != null && getAria(source, 'disabled') === true) {
 				event.preventDefault();
 			}
 		},

package/src/js/focus-trap/focus-trap.embedded.ts

@@ -285,31 +285,23 @@ function onTab(event: KeyboardEvent): void {
 
 	const instance = instances.get(element);
 
-	if (instance == null) {
+	if (instance == null || dispatch(element, 'oui:focus-trap').defaultPrevented) {
 		return;
 	}
 
-	const dispatched = dispatch(element, 'focus-trap');
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			return;
-		}
-
-		if (!instance.disabled) {
-			event.preventDefault();
-		}
+	if (!instance.disabled) {
+		event.preventDefault();
+	}
 
-		const elements = getFocusable(element);
+	const elements = getFocusable(element);
 
-		const index = elements.indexOf(event.target as HTMLElement);
+	const index = elements.indexOf(event.target as HTMLElement);
 
-		if (index === -1 || elements.length === 0) {
-			tabToTrap(instance, elements, element);
-		} else {
-			tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
-		}
-	});
+	if (index === -1 || elements.length === 0) {
+		tabToTrap(instance, elements, element);
+	} else {
+		tabToElement(instance, elements, index, event.shiftKey ? -1 : 1);
+	}
 }
 
 export function removeFocusTrap(element: HTMLElement): void {

package/src/js/index.ts

@@ -1,6 +1,7 @@
 import './menu';
 import './toolbar';
 
+export * from './color-picker';
 export * from './combobox/index';
 export * from './dialog';
 export * from './floatable/floatable.standalone';
@@ -11,4 +12,5 @@ export * from './popover';
 export * from './resizable/resizable.standalone';
 export * from './sortable/sortable.standalone';
 export * from './splitter';
+export * from './tabs';
 export * from './tooltip';

package/src/js/internal/draggable.ts

@@ -258,7 +258,7 @@ function cancelDrag(item?: OuiDraggableItem): void {
 
 	item.state.options.drag.onCancel?.(globals, item);
 
-	dispatch(item.state.element, `${item.state.name}:cancel`, {
+	dispatch(item.state.element, `oui:${item.state.name}:cancel`, {
 		detail: {
 			element: item.state.options.getOrigin(),
 		},
@@ -406,35 +406,33 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 	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: {
-			element,
-			position: {...globals.original},
-		},
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			item.state.options.drag.onCancel?.(globals, item);
+	if (
+		dispatch(item.state.element, `oui:${item.state.name}:begin`, {
+			detail: {
+				element,
+				position: {...globals.original},
+			},
+		}).defaultPrevented
+	) {
+		item.state.options.drag.onCancel?.(globals, item);
 
-			reset();
+		reset();
 
-			return;
-		}
+		return;
+	}
 
-		const next = getNextPosition(item, position);
+	const next = getNextPosition(item, position);
 
-		setStyles(dragged, {
-			position: 'fixed',
-			inset: `${next.y}px auto auto ${next.x}px`,
-			transform: 'translate3d(0, 0, 0)',
-		});
+	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.options.drag.onBegin?.(event, globals, item, element, handle, next);
 
-		item.state.styling.set();
-		styleToggler.set();
-	});
+	item.state.styling.set();
+	styleToggler.set();
 }
 
 function onPointermove(event: MouseEvent | TouchEvent): void {
@@ -459,15 +457,13 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 		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: MouseEvent | TouchEvent): void {

package/src/js/internal/listbox/listbox.dom.ts

@@ -199,13 +199,14 @@ export function createListboxInput(
 			autocorrect: 'off',
 			autocomplete: 'off',
 			form: '',
+			inputmode: 'text',
 			spellcheck: 'false',
-			type: 'text',
 		},
 		property: {
 			id,
 			value,
 			role: isAutocomplete || listbox ? 'combobox' : 'searchbox',
+			type: 'text',
 		},
 	});
 

package/src/js/internal/listbox/listbox.form.ts

@@ -32,24 +32,38 @@ export function updateListboxForm<State extends OuiListboxState>(
 	updateListboxValidity(state);
 
 	if (emit ?? true) {
-		dispatch(state.host, 'change');
+		dispatch(state.host, 'oui:change');
 	}
 }
 
 export function updateListboxValidity(state: OuiListboxState): void {
-	if (state.autocomplete.none && !state.listbox) {
-		const valueMissing = state.required && state.filter.element.value.length === 0;
+	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(
-			state.localizations.global,
-			state.host,
+			localizations.global,
+			host,
 			'invalid',
-			state.localizations.component,
+			localizations.component,
 		);
 
-		state.internals.setValidity({valueMissing}, localize(localization, {}, []));
+		internals.setValidity({valueMissing}, localize(localization, {}, []));
 
-		state.internals.checkValidity();
+		internals.checkValidity();
 
 		return;
 	}
@@ -60,31 +74,27 @@ export function updateListboxValidity(state: OuiListboxState): void {
 	let parameters: unknown[] = [];
 
 	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];
 
 			break;
 		}
@@ -96,11 +106,11 @@ export function updateListboxValidity(state: OuiListboxState): void {
 	const localization =
 		key == null
 			? undefined
-			: getLocalization(state.localizations.global, state.host, key, state.localizations.component);
+			: getLocalization(localizations.global, host, key, localizations.component);
 
 	const message = localization == null ? undefined : localize(localization, data, parameters);
 
-	state.internals.setValidity(
+	internals.setValidity(
 		error == null
 			? {}
 			: {
@@ -109,7 +119,7 @@ export function updateListboxValidity(state: OuiListboxState): void {
 		message,
 	);
 
-	state.internals.checkValidity();
+	internals.checkValidity();
 }
 
 // #endregion

package/src/js/internal/listbox/listbox.state.ts

@@ -18,10 +18,10 @@ export function attachListbox<State extends OuiListboxState>(
 	states: OuiListboxStates<State>,
 	onAttach: (state: State) => void,
 ): void {
-	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);
 
@@ -73,7 +73,7 @@ export function initializeListboxState<State extends OuiListboxState>(
 	updateListboxValueLabel(state);
 
 	if (state.options.selected.length > 0) {
-		updateListboxPreview('none', state, state.options.selected[0]);
+		updateListboxPreview('none', state, state.options.selected[0], false);
 	}
 
 	return state;

package/src/js/internal/navigable.ts

@@ -1,6 +1,7 @@
 import {clamp} from '@oscarpalmer/atoms/number';
-import {getAria, setRole} from '@oscarpalmer/toretto/aria';
-import {dispatch, on} from '@oscarpalmer/toretto/event';
+import {getAria, setAria, setRole} from '@oscarpalmer/toretto/aria';
+import {getAttribute} from '@oscarpalmer/toretto/attribute';
+import {on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import type {AriaRole, RemovableEventListener} from '@oscarpalmer/toretto/models';
@@ -25,6 +26,16 @@ export class OuiNavigable {
 		this.options = options;
 
 		this.listeners = [
+			on(
+				element,
+				'click',
+				event => {
+					onClick(this, event);
+				},
+				{
+					passive: false,
+				},
+			),
 			on(element, 'focusin', event => {
 				onFocusin(this, event);
 			}),
@@ -40,7 +51,9 @@ export class OuiNavigable {
 			),
 		];
 
-		this.orientation = getOrientation(element, options);
+		this.orientation = options?.orientation ?? getNavigableOrientation(element, options.vertical);
+
+		setAria(element, 'orientation', this.orientation);
 
 		if (options.role != null) {
 			setRole(element, options.role);
@@ -57,6 +70,14 @@ export class OuiNavigable {
 		this.active.element = undefined;
 		this.element = undefined as never;
 	}
+
+	navigate(index: number, focus?: boolean): void {
+		const items = getItems(this.element, this.options.selector);
+
+		if (index >= 0 && index < items.length) {
+			onNavigate(this, index, items, focus ?? false);
+		}
+	}
 }
 
 type OuiNavigableActive = {
@@ -64,17 +85,25 @@ type OuiNavigableActive = {
 	index: number;
 };
 
+type OuiNavigableCallback<ReturnType> = (
+	event: KeyboardEvent,
+	navigable: OuiNavigable,
+) => ReturnType;
+
 export 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';
+export type OuiNavigableOrientation = 'horizontal' | 'vertical';
 
 // #endregion
 
@@ -88,15 +117,17 @@ export function getNavigable(element: HTMLElement, options: OuiNavigableOptions)
 	return new OuiNavigable(element, options);
 }
 
-function getOrientation(
+export function getNavigableOrientation(
 	element: HTMLElement,
-	options: OuiNavigableOptions,
+	vertical: boolean,
+	aria?: boolean,
 ): OuiNavigableOrientation {
-	const attribute = getAria(element, 'orientation');
+	const attribute =
+		(aria ?? true) ? getAria(element, 'orientation') : getAttribute(element, 'orientation');
 
 	return ORIENTATIONS.has(attribute as OuiNavigableOrientation)
 		? (attribute as OuiNavigableOrientation)
-		: options.vertical
+		: vertical
 			? ORIENTATION_VERTICAL
 			: ORIENTATION_HORIZONTAL;
 }
@@ -105,6 +136,39 @@ function isValidItem(element: Element): element is HTMLElement {
 	return 'disabled' in element ? element.disabled !== true : true;
 }
 
+function onClick(navigable: OuiNavigable, event: Event): void {
+	const item = findAncestor(event, navigable.options.selector) as HTMLElement;
+	const items = getItems(navigable.element, navigable.options.selector);
+
+	const index = items.indexOf(item);
+
+	if (index === -1) {
+		return;
+	}
+
+	if (index !== navigable.active.index) {
+		onNavigate(navigable, index, items, false);
+	}
+
+	navigable.options.onActivate?.(navigable);
+
+	item.focus();
+}
+
+function onNavigate(
+	navigable: OuiNavigable,
+	index: number,
+	items: HTMLElement[],
+	focus: boolean,
+): void {
+	navigable.active.element = items[index];
+	navigable.active.index = index;
+
+	updateNavigableFocus(navigable, focus, items);
+
+	navigable.options.onNavigation?.(navigable);
+}
+
 function onFocusin(navigable: OuiNavigable, event: FocusEvent): void {
 	const item = findAncestor(event, navigable.options.selector);
 
@@ -155,6 +219,8 @@ function onKeydown(navigable: OuiNavigable, event: KeyboardEvent): void {
 	}
 
 	if (mustActivate || shouldActivate) {
+		navigable.options.onActivate?.(navigable);
+
 		return;
 	}
 
@@ -165,6 +231,8 @@ function onKeydown(navigable: OuiNavigable, event: KeyboardEvent): void {
 		return;
 	}
 
+	event.preventDefault();
+
 	let index: number | undefined;
 
 	if (KEYS_ABSOLUTE.has(event.key)) {
@@ -188,14 +256,9 @@ function onKeydown(navigable: OuiNavigable, event: KeyboardEvent): void {
 		}
 	}
 
-	if (index == null || index === navigable.active.index) {
-		return;
+	if (index != null && index !== navigable.active.index) {
+		onNavigate(navigable, index, items, true);
 	}
-
-	navigable.active.element = items[index];
-	navigable.active.index = index;
-
-	updateNavigableFocus(navigable, true, items);
 }
 
 export function updateNavigableFocus(
@@ -219,10 +282,6 @@ export function updateNavigableFocus(
 	if (focus) {
 		navigable.active.element?.focus();
 	}
-
-	dispatch(navigable.active.element, 'navigable:change', {
-		detail: {...navigable.active},
-	});
 }
 
 // #endregion