@oscarpalmer/oui 0.18.0 → 0.19.0

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

@@ -70,10 +70,7 @@ type Options = {
 
 //
 
-export function createFocusTrap(
-	element: HTMLElement,
-	options?: Options,
-): FocusTrap {
+export function createFocusTrap(element: HTMLElement, options?: Options): FocusTrap {
 	let focusTrap = FOCUSTRAPS_ALL.get(element);
 
 	if (focusTrap == null) {
@@ -86,10 +83,7 @@ export function createFocusTrap(
 }
 
 function onEscape(event: KeyboardEvent): void {
-	let element = findAncestor(
-		event.target as HTMLElement,
-		ATTRIBUTE_SELECTOR,
-	) as HTMLElement;
+	let element = findAncestor(event.target as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement;
 
 	let focusTrap = FOCUSTRAPS_ALL.get(element);
 
@@ -119,10 +113,7 @@ function onEscape(event: KeyboardEvent): void {
 
 function onFocusIn(event: Event): void {
 	const focusTrap = FOCUSTRAPS_ALL.get(
-		findAncestor(
-			event.target as HTMLElement,
-			ATTRIBUTE_SELECTOR,
-		) as HTMLElement,
+		findAncestor(event.target as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement,
 	);
 
 	lastTarget = focusTrap == null ? undefined : (event.target as HTMLElement);
@@ -144,10 +135,7 @@ function onKeydown(event: KeyboardEvent): void {
 }
 
 function onPointerdown(event: MouseEvent | TouchEvent): void {
-	const lastFocusTrap = findAncestor(
-		lastTarget as HTMLElement,
-		ATTRIBUTE_SELECTOR,
-	) as HTMLElement;
+	const lastFocusTrap = findAncestor(lastTarget as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement;
 
 	const nextFocusTrap = findAncestor(
 		event.target as HTMLElement,
@@ -174,10 +162,7 @@ function onPointerdown(event: MouseEvent | TouchEvent): void {
 }
 
 function onTab(event: KeyboardEvent): void {
-	const element = findAncestor(
-		event.target as HTMLElement,
-		ATTRIBUTE_SELECTOR,
-	) as HTMLElement;
+	const element = findAncestor(event.target as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement;
 
 	const focusTrap = FOCUSTRAPS_ALL.get(element);
 
@@ -228,10 +213,7 @@ function tabToElement(
 	const next = clamp(index + modifier, 0, length - 1, true);
 
 	if (focusTrap.disabled) {
-		if (
-			(index === length - 1 && next === 0) ||
-			(index === 0 && next === length - 1)
-		) {
+		if ((index === length - 1 && next === 0) || (index === 0 && next === length - 1)) {
 			lastTarget = undefined;
 
 			focusTrap.enable();

package/src/js/popover.ts

@@ -84,7 +84,7 @@ export class OuiPopoverElement extends HTMLElement {
 		this.#focusTrap.disconnect();
 	}
 
-	hidePopover(): void {
+	override hidePopover(): void {
 		if (this.#floatable.active && this.isConnected) {
 			this.#floatable.toggle(false);
 		}
@@ -94,7 +94,7 @@ export class OuiPopoverElement extends HTMLElement {
 		this.showPopover();
 	}
 
-	showPopover(): void {
+	override showPopover(): void {
 		if (!this.#floatable.active && this.isConnected) {
 			this.#floatable.toggle(true);
 		}
@@ -104,7 +104,7 @@ export class OuiPopoverElement extends HTMLElement {
 		this.togglePopover();
 	}
 
-	togglePopover(options?: boolean): boolean {
+	override togglePopover(options?: boolean): boolean {
 		if (typeof options === 'boolean') {
 			if (options === true) {
 				this.showPopover();

package/src/js/splitter.ts

@@ -57,9 +57,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 HTMLElement);
 
 		if (panels.length !== 2) {
 			throw new Error(`${SELECTOR} must have exactly two panels.`);
@@ -242,9 +240,7 @@ function getTypes(splitter: Splitter, width?: number, height?: number): Types {
 	if (type === 'auto') {
 		return {
 			auto: true,
-			horizontal:
-				(height ?? splitter.rectangle.height) >
-				(width ?? splitter.rectangle.width),
+			horizontal: (height ?? splitter.rectangle.height) > (width ?? splitter.rectangle.width),
 		};
 	}
 
@@ -254,11 +250,7 @@ function getTypes(splitter: Splitter, width?: number, height?: number): Types {
 	};
 }
 
-function getValue(
-	element: HTMLElement,
-	name: string,
-	defaultValue: number,
-): number {
+function getValue(element: HTMLElement, name: string, defaultValue: number): number {
 	const value = element.getAttribute(name);
 
 	if (isNullableOrWhitespace(value)) {
@@ -288,11 +280,7 @@ function getValues(element: OuiSplitterElement): Values {
 		},
 	};
 
-	const value = getContained(
-		values.min,
-		getValue(element, 'size', values.now.current),
-		values.max,
-	);
+	const value = getContained(values.min, getValue(element, 'size', values.now.current), values.max);
 
 	values.now.current = value;
 	values.now.previous = value;
@@ -336,10 +324,7 @@ function onKeydown(event: KeyboardEvent): void {
 
 function onNavigate(event: KeyboardEvent): void {
 	const splitter = MAPPED_ELEMENTS.get(
-		findAncestor(
-			event.target as never,
-			'[oui-splitter-separator]',
-		) as HTMLSpanElement,
+		findAncestor(event.target as never, '[oui-splitter-separator]') as HTMLSpanElement,
 	);
 
 	if (splitter == null) {
@@ -365,11 +350,7 @@ function onNavigate(event: KeyboardEvent): void {
 
 	setSize(
 		splitter,
-		getContained(
-			values.min,
-			values.now.current + offset * NAVIGATION_MODIFIER,
-			values.max,
-		),
+		getContained(values.min, values.now.current + offset * NAVIGATION_MODIFIER, values.max),
 		true,
 	);
 }
@@ -387,11 +368,7 @@ function onObservation(entries: ResizeObserverEntry[]): void {
 				return;
 			}
 
-			splitter.types = getTypes(
-				splitter,
-				entry.contentRect.width,
-				entry.contentRect.height,
-			);
+			splitter.types = getTypes(splitter, entry.contentRect.width, entry.contentRect.height);
 
 			if (splitter.types.horizontal) {
 				splitter.element.setAttribute(ATTRIBUTE_HORIZONTAL, '');
@@ -468,10 +445,7 @@ function setAriaValue(splitter: Splitter): 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),
-	);
+	splitter.separator.setAttribute('aria-valuenow', String(splitter.values.now.current));
 }
 
 function setSize(splitter: Splitter, size: number, previous?: boolean): void {
@@ -506,11 +480,7 @@ const KEYS_NEGATIVE: Set<string> = new Set(['ArrowLeft', 'ArrowUp']);
 
 const KEYS_VERTICAL: Set<string> = new Set(['ArrowLeft', 'ArrowRight']);
 
-const KEYS_ALL: Set<string> = new Set([
-	...KEYS_ABSOLUTE,
-	...KEYS_HORIZONTAL,
-	...KEYS_VERTICAL,
-]);
+const KEYS_ALL: Set<string> = new Set([...KEYS_ABSOLUTE, ...KEYS_HORIZONTAL, ...KEYS_VERTICAL]);
 
 const MAPPED_ELEMENTS: WeakMap<HTMLElement, Splitter> = new WeakMap();
 

package/src/js/tooltip.ts

@@ -79,9 +79,7 @@ function closeTooltips(next: Tooltip | undefined): void {
 			clearTimeout(active.timer);
 		}
 
-		active.floatable.options.content.removeAttribute(
-			'oui-tooltip-content-active',
-		);
+		active.floatable.options.content.removeAttribute('oui-tooltip-content-active');
 
 		requestAnimationFrame(() => {
 			active.timer = setTimeout(() => {
@@ -211,10 +209,7 @@ function onToggle(event: Event, activate: boolean): void {
 	toggle = requestAnimationFrame(() => {
 		toggle = undefined;
 
-		const element = findAncestor(
-			event.target as HTMLElement,
-			SELECTOR_FULL,
-		) as HTMLElement;
+		const element = findAncestor(event.target as HTMLElement, SELECTOR_FULL) as HTMLElement;
 
 		const tooltip = TOOLTIPS_ALL.get(element);
 
@@ -224,9 +219,7 @@ function onToggle(event: Event, activate: boolean): void {
 
 		if (
 			tooltip == null ||
-			tooltip.floatable.options.content.hasAttribute(
-				'oui-tooltip-content-active',
-			) === activate
+			tooltip.floatable.options.content.hasAttribute('oui-tooltip-content-active') === activate
 		) {
 			return;
 		}
@@ -240,18 +233,13 @@ function onToggle(event: Event, activate: boolean): void {
 			tooltip.floatable.toggle(true);
 
 			requestAnimationFrame(() => {
-				tooltip.floatable.options.content.setAttribute(
-					'oui-tooltip-content-active',
-					'',
-				);
+				tooltip.floatable.options.content.setAttribute('oui-tooltip-content-active', '');
 			});
 
 			return;
 		}
 
-		tooltip.floatable.options.content.removeAttribute(
-			'oui-tooltip-content-active',
-		);
+		tooltip.floatable.options.content.removeAttribute('oui-tooltip-content-active');
 
 		tooltip.timer ??= setTimeout(() => {
 			TOOLTIPS_ACTIVE.delete(tooltip);

package/dist/css/value.css

@@ -1 +0,0 @@
-