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

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

@@ -37,19 +37,33 @@ export function updateListboxForm<State extends OuiListboxState>(
 }
 
 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);
 

package/src/js/internal/navigable.ts

@@ -231,6 +231,8 @@ function onKeydown(navigable: OuiNavigable, event: KeyboardEvent): void {
 		return;
 	}
 
+	event.preventDefault();
+
 	let index: number | undefined;
 
 	if (KEYS_ABSOLUTE.has(event.key)) {

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/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/tabs.ts

@@ -144,7 +144,7 @@ function attachTabs(state: OuiTabsState): void {
 function createContent(prefix: string, panels: HTMLElement[], active: number): OuiTabsContent {
 	const content = createElement('div', {
 		attribute: {
-			[ATTRIBUTE_CONTENT]: '',
+			[`${TAGNAME}-content`]: '',
 		},
 	});
 
@@ -189,7 +189,7 @@ function createTab(
 			controls: panel.id,
 		},
 		attribute: {
-			[ATTRIBUTE_TAB]: '',
+			[`${TAGNAME}-tab`]: '',
 		},
 		property: {
 			id: `${prefix}_tab_${index}`,
@@ -209,7 +209,7 @@ function createTabList(
 ): OuiTabsTabList {
 	const element = createElement('div', {
 		attribute: {
-			[ATTRIBUTE_TABLIST]: '',
+			[`${TAGNAME}-tablist`]: '',
 		},
 		property: {
 			role: 'tablist',
@@ -420,21 +420,15 @@ function setActive(state: OuiTabsState | undefined, value: unknown): void {
 
 const TAGNAME = 'oui-tabs';
 
-const ATTRIBUTE_CONTENT = `${TAGNAME}-content`;
-
 const ATTRIBUTE_PANEL = `${TAGNAME}-panel`;
 
-const ATTRIBUTE_TAB = `${TAGNAME}-tab`;
-
-const ATTRIBUTE_TABLIST = `${TAGNAME}-tablist`;
-
 const MESSAGE_EMPTY = `<${TAGNAME}> must contain at least one [${ATTRIBUTE_PANEL}] child element`;
 
 const MESSAGE_INVALID = `A [${ATTRIBUTE_PANEL}] child element of <${TAGNAME}> must have a valid 'aria-label' or 'aria-labelledby' attribute`;
 
 const SELECTOR_PANEL = `:scope > [${ATTRIBUTE_PANEL}]`;
 
-const SELECTOR_TAB = `[${ATTRIBUTE_TAB}]`;
+const SELECTOR_TAB = `[${TAGNAME}-tab]`;
 
 let index = 0;