@oscarpalmer/oui 0.36.0 → 0.38.0

package/src/js/listbox/index.ts

@@ -63,6 +63,20 @@ export class OuiListboxElement extends HTMLElement {
 		setListboxFilter(this.#state, value);
 	}
 
+	/**
+	 * Form element associated with the listbox
+	 */
+	get form(): HTMLFormElement | null {
+		return this.#internals.form;
+	}
+
+	/**
+	 * Label elements associated with the listbox
+	 */
+	get labels(): NodeList {
+		return this.#internals.labels;
+	}
+
 	/**
 	 * Maximum number of selected options
 	 */
@@ -144,6 +158,20 @@ export class OuiListboxElement extends HTMLElement {
 		return this.#state.options.selected.slice();
 	}
 
+	/**
+	 * Validation message for the listbox
+	 */
+	get validationMessage(): string {
+		return this.#internals.validationMessage;
+	}
+
+	/**
+	 * Validity state for the listbox
+	 */
+	get validity(): ValidityState {
+		return this.#internals.validity;
+	}
+
 	/**
 	 * Current value
 	 */
@@ -172,6 +200,13 @@ export class OuiListboxElement extends HTMLElement {
 		setListboxValues(this.#state, values);
 	}
 
+	/**
+	 * Can the listbox be validated?
+	 */
+	get willValidate(): boolean {
+		return this.#internals.willValidate;
+	}
+
 	constructor() {
 		super();
 
@@ -202,6 +237,15 @@ export class OuiListboxElement extends HTMLElement {
 		}
 	}
 
+	/**
+	 * Check if the listbox is valid
+	 *
+	 * @returns `true` if the listbox is valid, otherwise `false`
+	 */
+	checkValidity(): boolean {
+		return this.#internals.checkValidity();
+	}
+
 	/**
 	 * Clear all selected options
 	 */
@@ -249,6 +293,24 @@ export class OuiListboxElement extends HTMLElement {
 		}
 	}
 
+	/**
+	 * Check if the listbox is valid and report any validation errors
+	 *
+	 * @returns `true` if the listbox is valid, otherwise `false`
+	 */
+	reportValidity(): boolean {
+		return this.#internals.reportValidity();
+	}
+
+	/**
+	 * Set a custom validation message for the listbox
+	 *
+	 * @param message Validation message
+	 */
+	setCustomValidity(message: string): void {
+		this.#internals.setValidity({customError: message !== ''}, message, this);
+	}
+
 	/**
 	 * Set listbox localizations for a specific language
 	 *

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

@@ -43,8 +43,6 @@ export function createListboxState(
 
 	element.id = select.id;
 
-	setAttribute(element, 'name', select.name === '' ? select.id : select.name);
-
 	const disabled = getBooleanAriaValue(element, 'disabled') || select.disabled;
 	const multiple = element.multiple || select.multiple;
 	const readonly = getBooleanAriaValue(element, 'readonly');

package/src/js/movable/movable.embedded.ts

@@ -199,20 +199,18 @@ function onEnd(
 		setOffset(state, container);
 	}
 
-	const dispatched = dispatch(state.element, 'movable:end', {
-		detail: {
-			from: {...globals.original},
-			to: getEventPosition(event),
-		},
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			onCancel(globals, item);
-		}
+	if (
+		dispatch(state.element, 'oui:movable:end', {
+			detail: {
+				from: {...globals.original},
+				to: getEventPosition(event),
+			},
+		}).defaultPrevented
+	) {
+		onCancel(globals, item);
+	}
 
-		reset();
-	});
+	reset();
 }
 
 function onMove(

package/src/js/popover.ts

@@ -125,7 +125,7 @@ function getState(anchor: HTMLElement, content: HTMLElement): OuiPopoverState {
 		content,
 		floatable: createEmbeddedFloatable(anchor, content, options),
 		focusTrap:
-			getAria(content, 'modal') === 'true'
+			getAria(content, 'modal') === true
 				? createFocusTrap(content, {
 						noescape: true,
 					})

package/src/js/resizable/resizable.embedded.ts

@@ -101,7 +101,7 @@ function cancelResize(item?: OuiResizableItem): void {
 
 	resetResizable();
 
-	dispatch(item.state.element, 'resizable:cancel');
+	dispatch(item.state.element, 'oui:resizable:cancel');
 }
 
 /**
@@ -289,19 +289,15 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 		event.preventDefault();
 	}
 
-	const dispatched = dispatch(element!, 'resizable:begin');
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			return;
-		}
+	if (dispatch(element!, 'oui:resizable:begin').defaultPrevented) {
+		return;
+	}
 
-		current = stored;
-		start = position;
+	current = stored;
+	start = position;
 
-		current.state.styles.set();
-		styleToggler.set();
-	});
+	current.state.styles.set();
+	styleToggler.set();
 }
 
 function onPointermove(event: MouseEvent | TouchEvent): void {
@@ -320,41 +316,31 @@ function onPointermove(event: MouseEvent | TouchEvent): void {
 
 	getAndSetDimensions(current.state.element, current.state.options, {height, width});
 
-	const dispatched = dispatch(current.state.element, 'resizable:resize', {
-		detail: {
-			height,
-			width,
-		},
-	});
-
-	setTimeout(() => {
-		if (dispatched.defaultPrevented) {
-			cancelResize(current);
-		}
-	});
+	if (
+		dispatch(current.state.element, 'oui:resizable:resize', {
+			detail: {
+				height,
+				width,
+			},
+		}).defaultPrevented
+	) {
+		cancelResize(current);
+	}
 }
 
 function onPointerup(): void {
-	if (current == null) {
+	if (current == null || dispatch(current.state.element, 'oui:resizable:end').defaultPrevented) {
+		cancelResize(current);
+
 		return;
 	}
 
-	const dispatched = dispatch(current.state.element, 'resizable:end');
-
-	setTimeout(() => {
-		if (current == null || dispatched.defaultPrevented) {
-			cancelResize(current);
+	const {height, width} = current.state.element.getBoundingClientRect();
 
-			return;
-		}
-
-		const {height, width} = current.state.element.getBoundingClientRect();
+	current.state.height = height;
+	current.state.width = width;
 
-		current.state.height = height;
-		current.state.width = width;
-
-		resetResizable();
-	});
+	resetResizable();
 }
 
 function removeResizable(element: HTMLElement): void {

package/src/js/splitter.ts

@@ -3,6 +3,7 @@ import {round} from '@oscarpalmer/atoms/math';
 import {clamp} from '@oscarpalmer/atoms/number';
 import {setAria} from '@oscarpalmer/toretto/aria';
 import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
+import {createElement} from '@oscarpalmer/toretto/create';
 import {getEventPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {setStyle, toggleStyles} from '@oscarpalmer/toretto/style';
@@ -238,28 +239,30 @@ type OuiSplitterValuesNow = {
 // #region Functions
 
 function createHandle(): HTMLSpanElement {
-	const handle = document.createElement('span');
-
-	setAria(handle, 'hidden', 'true');
-	setAttribute(handle, ATTRIBUTE_HANDLE, '');
-
-	return handle;
+	return createElement('span', {
+		aria: {
+			hidden: true,
+		},
+		attribute: {
+			[ATTRIBUTE_HANDLE]: '',
+		},
+	});
 }
 
 function createSeparator(splitter: OuiSplitter): HTMLDivElement {
-	const separator = document.createElement('div');
-
-	separator.role = 'separator';
-	separator.tabIndex = 0;
-
-	setAria(separator, {
-		controls: splitter.element.id,
-		label: 'Resize panels',
+	return createElement('div', {
+		aria: {
+			controls: splitter.element.id,
+			label: 'Resize panels',
+		},
+		attribute: {
+			[ATTRIBUTE_SEPARATOR]: '',
+		},
+		property: {
+			role: 'separator',
+			tabIndex: 0,
+		},
 	});
-
-	setAttribute(separator, ATTRIBUTE_SEPARATOR, '');
-
-	return separator;
 }
 
 function getContained(min: number, value: number, max: number): number {