@oscarpalmer/oui 0.28.0 → 0.29.0

package/src/js/popover.ts

@@ -1,3 +1,5 @@
+import {getAria, setAria} from '@oscarpalmer/toretto/aria';
+import {setAttribute} from '@oscarpalmer/toretto/attribute';
 import {on} from '@oscarpalmer/toretto/event';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
 import type {RemovableEventListener} from '@oscarpalmer/toretto/models';
@@ -34,6 +36,8 @@ class OuiPopover {
 	constructor(state: OuiPopoverState) {
 		this.#state = state;
 
+		initialize(state);
+
 		this.#state.floatable.update();
 	}
 
@@ -93,6 +97,18 @@ function destroyPopover(state: OuiPopoverState): void {
 	state.popover = undefined as never;
 }
 
+function getId(element: HTMLElement, value?: string): string {
+	let {id} = element;
+
+	if (id == null || id.trim().length === 0) {
+		id = value == null ? `oui_popover_${++index}` : `${value}_toggle`;
+
+		element.id = id;
+	}
+
+	return id;
+}
+
 /**
  * Get the _OuiPopover_ for an element
  *
@@ -109,29 +125,30 @@ function getState(anchor: HTMLElement, content: HTMLElement): OuiPopoverState {
 		content,
 		floatable: createEmbeddedFloatable(anchor, content, options),
 		focusTrap:
-			content.getAttribute(ARIA_MODAL) === TRUE
+			getAria(content, 'modal') === 'true'
 				? createFocusTrap(content, {
 						noescape: true,
 					})
 				: undefined,
 		listeners: [
 			getOnBeforeToggleListener(content),
-			on(content, EVENT_TOGGLE, event => {
-				if (event.newState === STATE_OPEN) {
+			on(content, 'toggle', event => {
+				const expanded = event.newState === 'open';
+
+				if (expanded) {
 					ignoreFocus = false;
 
 					state.floatable?.update();
 
-					content.setAttribute(ATTRIBUTE_OPEN, '');
-
 					content.focus();
 				} else {
-					content.removeAttribute(ATTRIBUTE_OPEN);
-
 					if (!ignoreFocus) {
 						anchor?.focus();
 					}
 				}
+
+				setAria(anchor, 'expanded', expanded);
+				setAttribute(content, ATTRIBUTE_OPEN, expanded ? '' : undefined);
 			}),
 		],
 		popover: undefined as never,
@@ -142,6 +159,21 @@ function getState(anchor: HTMLElement, content: HTMLElement): OuiPopoverState {
 	return state;
 }
 
+function initialize(state: OuiPopoverState): void {
+	const id = getId(state.content);
+
+	setAria(state.anchor, {
+		controls: id,
+		expanded: 'false',
+	});
+
+	const label = getAria(state.content, 'label') ?? getAria(state.content, 'labelledby');
+
+	if (label == null) {
+		setAria(state.content, 'labelledby', getId(state.anchor, id));
+	}
+}
+
 function onPointerdown(): void {
 	ignoreFocus = true;
 }
@@ -164,16 +196,8 @@ function removePopover(element: HTMLElement): void {
 
 const ATTRIBUTE = 'oui-popover';
 
-const ARIA_MODAL = 'aria-modal';
-
 const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
 
-const EVENT_TOGGLE = 'toggle';
-
-const STATE_OPEN = 'open';
-
-const TRUE = 'true';
-
 const options: OuiFloatableOptions = {
 	attribute: `${ATTRIBUTE}position`,
 	position: 'below-start',
@@ -184,6 +208,8 @@ const states = new WeakMap<HTMLElement, OuiPopoverState>();
 
 let ignoreFocus = false;
 
+let index = 0;
+
 // #endregion
 
 // #region Initialization

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

@@ -1,10 +1,11 @@
 import {isPlainObject} from '@oscarpalmer/atoms/is';
 import type {EventPosition} from '@oscarpalmer/atoms/models';
 import {getNumber} from '@oscarpalmer/atoms/number';
+import {getAttribute, setAttribute} from '@oscarpalmer/toretto/attribute';
 import {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
-import {toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
+import {setStyles, toggleStyles, type StyleToggler} from '@oscarpalmer/toretto/style';
 import supportsTouch from '@oscarpalmer/toretto/touch';
 import {attributable} from '../internal/attributable';
 
@@ -38,8 +39,10 @@ export class OuiResizable {
 	}
 
 	reset(): void {
-		this.#state.element.style.height = '';
-		this.#state.element.style.width = '';
+		setStyles(this.#state.element, {
+			height: '',
+			width: '',
+		});
 	}
 }
 
@@ -134,8 +137,10 @@ function getAndSetDimensions(
 	}
 
 	if (element.checkVisibility()) {
-		element.style.height = `${height}px`;
-		element.style.width = `${width}px`;
+		setStyles(element, {
+			height: `${height}px`,
+			width: `${width}px`,
+		});
 	}
 
 	return [width, height];
@@ -186,7 +191,7 @@ function getState(
 	handle: HTMLElement,
 	input?: CreateOuiResizableOptions,
 ): OuiResizableState {
-	element.setAttribute(RESIZABLE_ATTRIBUTE, '');
+	setAttribute(element, RESIZABLE_ATTRIBUTE, '');
 
 	const options = getValidOptions(element, input);
 
@@ -211,11 +216,11 @@ function getValidOptions(
 	return {
 		...getRestrictions(
 			input == null
-				? (element.getAttribute(ATTRIBUTE_MAXIMUM) ??
+				? (getAttribute(element, ATTRIBUTE_MAXIMUM) ??
 						getProperties(element, 'maxWidth', 'maxHeight'))
 				: [original.maximumWidth, original.maximumHeight],
 			input == null
-				? (element.getAttribute(ATTRIBUTE_MINIMUM) ??
+				? (getAttribute(element, ATTRIBUTE_MINIMUM) ??
 						getProperties(element, 'minWidth', 'minHeight'))
 				: [original.minimumWidth, original.minimumHeight],
 		),
@@ -244,8 +249,10 @@ function onKeydown(event: KeyboardEvent): void {
 		return;
 	}
 
-	current.state.element.style.height = `${current.state.height}px`;
-	current.state.element.style.width = `${current.state.width}px`;
+	setStyles(current.state.element, {
+		height: `${current.state.height}px`,
+		width: `${current.state.width}px`,
+	});
 
 	resetResizable();
 }

package/src/js/sortable/sortable.embedded.ts

@@ -1,8 +1,10 @@
 import type {EventPosition, PlainObject} from '@oscarpalmer/atoms/models';
+import {getAttribute, setAttribute, setAttributes} from '@oscarpalmer/toretto/attribute';
 import {createElement} from '@oscarpalmer/toretto/create';
 import {getPosition} from '@oscarpalmer/toretto/event';
 import {findAncestor, getElementFromPosition} from '@oscarpalmer/toretto/find';
 import {isHTMLOrSVGElement} from '@oscarpalmer/toretto/is';
+import {setStyle} from '@oscarpalmer/toretto/style';
 import {attributable} from '../internal/attributable';
 import {
 	addDraggable,
@@ -50,7 +52,7 @@ export class OuiSortable extends OuiDraggable<OuiSortableState> {
 					(getDraggableStates(element)?.sortable as OuiDraggableState & OuiSortableState)?.origin,
 			},
 			{
-				connections: element.getAttribute(ATTRIBUTE_CONNECTIONS),
+				connections: getAttribute(element, ATTRIBUTE_CONNECTIONS),
 			},
 		);
 	}
@@ -67,7 +69,7 @@ type OuiSortablePlaceholderDrag = {
 };
 
 type OuiSortableState = {
-	connections: string | null;
+	connections: string | null | undefined;
 	origin?: HTMLElement;
 };
 
@@ -166,10 +168,11 @@ function getOriginalPosition(
 function getPositionPlaceholder(item: OuiDraggableItem<OuiSortableState>): HTMLElement {
 	placeholder.position ??= createElement('div');
 
-	placeholder.position.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, '');
+	setAttribute(placeholder.position, ATTRIBUTE_PLACEHOLDER_POSITION, '');
 
 	if (item.state.origin != null) {
-		placeholder.position.style.setProperty(
+		setStyle(
+			placeholder.position,
 			'--placeholder-height',
 			`${item.state.origin.getBoundingClientRect().height}px`,
 		);
@@ -188,9 +191,9 @@ function onBegin(
 
 	setPlaceholder(globals, item, element);
 
-	element.setAttribute(ATTRIBUTE_ORIGIN, '');
+	setAttribute(element, ATTRIBUTE_ORIGIN, '');
 
-	document.body.setAttribute(ATTRIBUTE_ACTIVE, '');
+	setAttribute(document.body, ATTRIBUTE_ACTIVE, '');
 }
 
 function onCancel(_: OuiDraggableGlobals, item: OuiDraggableItem<OuiSortableState>): void {
@@ -218,7 +221,7 @@ function onEnd(
 	let element = findAncestor(target, SELECTOR_ITEM) as HTMLElement;
 
 	if (element?.hasAttribute(ATTRIBUTE_PLACEHOLDER_POSITION)) {
-		const position = element.getAttribute(ATTRIBUTE_PLACEHOLDER_POSITION);
+		const position = getAttribute(element, ATTRIBUTE_PLACEHOLDER_POSITION);
 
 		if (position === 'after') {
 			element = element.previousElementSibling as HTMLElement;
@@ -344,7 +347,7 @@ function onMove(
 			toElement.insertAdjacentElement(INSERT_AFTER, placeholder);
 		}
 
-		placeholder.setAttribute(ATTRIBUTE_PLACEHOLDER_POSITION, place);
+		setAttribute(placeholder, ATTRIBUTE_PLACEHOLDER_POSITION, place);
 	} else {
 		placeholder.remove();
 	}
@@ -417,9 +420,8 @@ function setPlaceholder(
 }
 
 function updatePlaceholder(item: OuiDraggableItem<OuiSortableState>, element: HTMLElement): void {
-	element.style.position = 'fixed';
-
-	element.setAttribute(ATTRIBUTE_PLACEHOLDER_DRAG, '');
+	setAttribute(element, ATTRIBUTE_PLACEHOLDER_DRAG, '');
+	setStyle(element, 'position', 'fixed');
 
 	const state = getDraggableStates(item.state.element)?.sortable;
 
@@ -427,17 +429,10 @@ function updatePlaceholder(item: OuiDraggableItem<OuiSortableState>, element: HT
 		return;
 	}
 
-	if (state.horizontal) {
-		element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
-	} else {
-		element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-	}
-
-	if (state.vertical) {
-		element.setAttribute(ATTRIBUTE_VERTICAL, '');
-	} else {
-		element.removeAttribute(ATTRIBUTE_VERTICAL);
-	}
+	setAttributes(element, {
+		[ATTRIBUTE_HORIZONTAL]: state.horizontal ? '' : undefined,
+		[ATTRIBUTE_VERTICAL]: state.vertical ? '' : undefined,
+	});
 }
 
 function validatePosition(

package/src/js/splitter.ts

@@ -1,9 +1,11 @@
 import {isNullableOrWhitespace} from '@oscarpalmer/atoms/is';
 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 {getPosition, on} from '@oscarpalmer/toretto/event';
 import {findAncestor} from '@oscarpalmer/toretto/find';
-import {type StyleToggler, toggleStyles} from '@oscarpalmer/toretto/style';
+import {setStyle, type StyleToggler, toggleStyles} from '@oscarpalmer/toretto/style';
 import supportsTouch from '@oscarpalmer/toretto/touch';
 
 declare global {
@@ -78,11 +80,7 @@ class OuiSplitter {
 			RESIZE_OBSERVER.unobserve(this.element);
 		}
 
-		if (this.types.horizontal) {
-			this.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
-		} else {
-			this.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-		}
+		setAttribute(this.element, ATTRIBUTE_HORIZONTAL, this.types.horizontal ? '' : undefined);
 
 		setAriaOrientation(this);
 	}
@@ -120,7 +118,9 @@ export class OuiSplitterElement extends HTMLElement {
 	 * Maximum size for the first panel
 	 */
 	set max(value: number) {
-		this.setAttribute(ATTRIBUTE_MAX, String(value));
+		if (typeof value === 'number') {
+			setAttribute(this, ATTRIBUTE_MAX, value.toString());
+		}
 	}
 
 	/**
@@ -134,7 +134,9 @@ export class OuiSplitterElement extends HTMLElement {
 	 * Minimum size for the first panel
 	 */
 	set min(value: number) {
-		this.setAttribute(ATTRIBUTE_MIN, String(value));
+		if (typeof value === 'number') {
+			setAttribute(this, ATTRIBUTE_MIN, value.toString());
+		}
 	}
 
 	/**
@@ -148,21 +150,23 @@ export class OuiSplitterElement extends HTMLElement {
 	 * Current size for the first panel
 	 */
 	set size(value: number) {
-		this.setAttribute(ATTRIBUTE_SIZE, String(value));
+		if (typeof value === 'number') {
+			setAttribute(this, ATTRIBUTE_SIZE, value.toString());
+		}
 	}
 
 	/**
 	 * Orientation of the splitter
 	 */
 	get type(): string {
-		return this.getAttribute(ATTRIBUTE_TYPE) ?? 'vertical';
+		return getAttribute(this, ATTRIBUTE_TYPE) ?? 'vertical';
 	}
 
 	/**
 	 * Orientation of the splitter
 	 */
 	set type(value: string) {
-		this.setAttribute(ATTRIBUTE_TYPE, value);
+		setAttribute(this, ATTRIBUTE_TYPE, value);
 	}
 
 	// Constructor
@@ -170,7 +174,7 @@ export class OuiSplitterElement extends HTMLElement {
 	constructor() {
 		super();
 
-		const panels = [...this.children].filter(child => child instanceof HTMLElement);
+		const panels = [...this.children].filter(child => child instanceof Element) as HTMLElement[];
 
 		if (panels.length !== 2) {
 			throw new Error(MESSAGE);
@@ -228,8 +232,8 @@ type OuiSplitterValuesNow = {
 function createHandle(): HTMLSpanElement {
 	const handle = document.createElement('span');
 
-	handle.setAttribute('aria-hidden', 'true');
-	handle.setAttribute(ATTRIBUTE_HANDLE, '');
+	setAria(handle, 'hidden', 'true');
+	setAttribute(handle, ATTRIBUTE_HANDLE, '');
 
 	return handle;
 }
@@ -240,9 +244,12 @@ function createSeparator(splitter: OuiSplitter): HTMLDivElement {
 	separator.role = 'separator';
 	separator.tabIndex = 0;
 
-	separator.setAttribute('aria-controls', splitter.element.id);
-	separator.setAttribute('aria-label', 'Resize panels');
-	separator.setAttribute(ATTRIBUTE_SEPARATOR, '');
+	setAria(separator, {
+		controls: splitter.element.id,
+		label: 'Resize panels',
+	});
+
+	setAttribute(separator, ATTRIBUTE_SEPARATOR, '');
 
 	return separator;
 }
@@ -262,7 +269,7 @@ function getSize(splitter: OuiSplitter, value: number): number {
 }
 
 function getTypes(splitter: OuiSplitter, width?: number, height?: number): OuiSplitterTypes {
-	const type = splitter.element.getAttribute('type')?.trim() ?? '';
+	const type = getAttribute(splitter.element, 'type');
 
 	if (type === 'horizontal') {
 		return {
@@ -285,7 +292,7 @@ function getTypes(splitter: OuiSplitter, width?: number, height?: number): OuiSp
 }
 
 function getValue(element: HTMLElement, name: string, defaultValue: number): number {
-	const value = element.getAttribute(name);
+	const value = getAttribute(element, name);
 
 	if (isNullableOrWhitespace(value)) {
 		return defaultValue;
@@ -408,11 +415,11 @@ function onObservation(entries: ResizeObserverEntry[]): void {
 
 			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
 
-			if (splitter.types.horizontal) {
-				splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
-			} else {
-				splitter.element.removeAttribute(ATTRIBUTE_HORIZONTAL);
-			}
+			setAttribute(
+				splitter.element,
+				ATTRIBUTE_HORIZONTAL,
+				splitter.types.horizontal ? '' : undefined,
+			);
 
 			setAriaOrientation(splitter);
 		}
@@ -436,8 +443,8 @@ function onPointerdown(event: Event): void {
 		event.preventDefault();
 	}
 
-	splitter.handle.setAttribute(ATTRIBUTE_ACTIVE, '');
-	splitter.separator.setAttribute(ATTRIBUTE_ACTIVE, '');
+	setAttribute(splitter.handle, ATTRIBUTE_ACTIVE, '');
+	setAttribute(splitter.separator, ATTRIBUTE_ACTIVE, '');
 
 	splitter.rectangle = splitter.element.getBoundingClientRect();
 
@@ -468,17 +475,15 @@ function onPointerup(): void {
 }
 
 function setAriaOrientation(splitter: OuiSplitter): void {
-	splitter.separator.setAttribute(
-		'aria-orientation',
-		splitter.types.horizontal ? 'horizontal' : 'vertical',
-	);
+	setAria(splitter.separator, 'orientation', splitter.types.horizontal ? 'horizontal' : 'vertical');
 }
 
 function setAriaValue(splitter: OuiSplitter): void {
-	splitter.separator.setAttribute('aria-valuemax', String(splitter.values.max));
-	splitter.separator.setAttribute('aria-valuemin', String(splitter.values.min));
-
-	splitter.separator.setAttribute('aria-valuenow', String(splitter.values.now.current));
+	setAria(splitter.separator, {
+		valuemax: splitter.values.max,
+		valuemin: splitter.values.min,
+		valuenow: splitter.values.now.current,
+	});
 }
 
 function setSize(splitter: OuiSplitter, size: number, previous?: boolean): void {
@@ -488,7 +493,7 @@ function setSize(splitter: OuiSplitter, size: number, previous?: boolean): void
 		splitter.values.now.previous = size;
 	}
 
-	splitter.element.style.setProperty('--oui-splitter-size', `${size}`);
+	setStyle(splitter.element, '--oui-splitter-size', `${size}`);
 
 	setAriaValue(splitter);
 }