@oscarpalmer/oui 0.18.0 → 0.20.0

package/src/css/table.scss

@@ -6,13 +6,13 @@
 		background-color: var(--oui-absolute);
 	}
 
-	:where(&-wrapper) {
+	:where(&_wrapper) {
 		max-height: 32em;
 		overflow: auto;
+		overscroll-behavior: contain;
 		border: 1px solid var(--oui-gray-3);
-		border-radius: .25em;
+		border-radius: 0.25em;
 		position: relative;
-		overscroll-behavior-y: none;
 	}
 
 	:where(& caption) {
@@ -20,10 +20,10 @@
 		align-content: center;
 		background-color: var(--oui-gray-1);
 		border: solid var(--oui-gray-3);
-		border-width: 0 0 1px 0;
-		font-size: .875rem;
+		border-width: 0 0 1px;
+		font-size: 0.875rem;
 		text-align: left;
-		text-indent: .5rem;
+		text-indent: 0.5rem;
 		position: sticky;
 		top: 0;
 		z-index: 2;
@@ -50,7 +50,7 @@
 			height: 4px;
 			background-image: linear-gradient(
 				to var(--oui-shadow-direction),
-				rgba(0, 0, 0, 0.1),
+				rgb(0 0 0 / 10%),
 				transparent
 			);
 			position: absolute;
@@ -58,13 +58,13 @@
 	}
 
 	:where(& th, & td) {
-		padding: .5em .625rem;
+		padding: 0.5em 0.625rem;
 	}
 
 	:where(& thead th) {
-		font-size: .75rem;
+		font-size: 0.75rem;
 		font-weight: bold;
-		letter-spacing: .1em;
+		letter-spacing: 0.1em;
 		text-align: left;
 		text-transform: uppercase;
 		top: 0;
@@ -73,7 +73,7 @@
 			--oui-shadow-direction: bottom;
 
 			border-top: 1px solid var(--oui-gray-3);
-			inset: 100% 0 0 0;
+			inset: 100%;
 		}
 	}
 
@@ -88,7 +88,7 @@
 			--oui-shadow-direction: top;
 
 			border-bottom: 1px solid var(--oui-gray-3);
-			inset: -4px 0 0 0;
+			inset: -4px;
 		}
 	}
 

package/src/css/tooltip.scss

@@ -1,6 +1,27 @@
 @use 'mixins.scss' as mixins;
 
-:where([oui-tooltip]:is(abbr, b, cite, dfn, code, em, i, kbd, mark, q, samp, small, span, strong, sub, sup, time, var)) {
+:where(
+	[oui-tooltip]:is(
+		abbr,
+		b,
+		cite,
+		dfn,
+		code,
+		em,
+		i,
+		kbd,
+		mark,
+		q,
+		samp,
+		small,
+		span,
+		strong,
+		sub,
+		sup,
+		time,
+		var
+	)
+) {
 	text-decoration: underline dotted;
 	text-decoration-skip-ink: auto;
 	text-underline-offset: 0.25em;
@@ -8,7 +29,7 @@
 }
 
 :where([oui-tooltip-content]) {
-	@include mixins.shadowOverlay;
+	@include mixins.floatable;
 
 	max-width: 48ch;
 	padding: 0.75em 1em;
@@ -16,11 +37,65 @@
 	background-color: var(--oui-absolute);
 	border-radius: 0.25rem;
 	font-size: 0.875rem;
-	transition: opacity .125s ease-in-out;
+	transition: opacity 0.125s ease-in-out;
 	transition-delay: 0s;
+
+	&::after {
+		content: '';
+		opacity: 0;
+		position: absolute;
+	}
+
+	&[position^='above'],
+	&[position^='below'],
+	&[position^='bottom'],
+	&[position^='top'] {
+		&::after {
+			width: 100%;
+			height: 0.5rem;
+		}
+	}
+
+	&[position^='above'],
+	&[position^='top'] {
+		&::after {
+			inset: 100% 0 0;
+		}
+	}
+
+	&[position^='below'],
+	&[position^='bottom'] {
+		&::after {
+			inset: -5rem 0 0;
+		}
+	}
+
+	&[position^='end'],
+	&[position^='left'],
+	&[position^='right'],
+	&[position^='start'] {
+		&::after {
+			width: 0.5rem;
+			height: 100%;
+		}
+	}
+
+	&[position^='end'],
+	&[position^='right'] {
+		&::after {
+			inset: 0 0 0 -0.5rem;
+		}
+	}
+
+	&[position^='left'],
+	&[position^='start'] {
+		&::after {
+			inset: 0 0 0 100%;
+		}
+	}
 }
 
 :where([oui-tooltip-content][oui-tooltip-content-active]) {
 	opacity: 1;
-	transition-delay: .25s;
+	transition-delay: 0.25s;
 }

package/src/js/attributable.ts

@@ -39,9 +39,7 @@ function handleAdded(
 	nodes: Node[] | NodeList,
 	add: (element: HTMLElement) => void,
 ): void {
-	const elements = [...nodes].filter(
-		node => node instanceof HTMLElement,
-	) as HTMLElement[];
+	const elements = [...nodes].filter(node => node instanceof HTMLElement) as HTMLElement[];
 
 	const {length} = elements;
 
@@ -51,20 +49,25 @@ function handleAdded(
 		if (element.hasAttribute(attribute)) {
 			add(element);
 		}
+
+		if (element.hasChildNodes()) {
+			handleAdded(attribute, element.childNodes, add);
+		}
 	}
 }
 
-function handleRemoved(
-	nodes: Node[] | NodeList,
-	remove: (element: HTMLElement) => void,
-): void {
-	const elements = [...nodes].filter(
-		node => node instanceof HTMLElement,
-	) as HTMLElement[];
+function handleRemoved(nodes: Node[] | NodeList, remove: (element: HTMLElement) => void): void {
+	const elements = [...nodes].filter(node => node instanceof HTMLElement) as HTMLElement[];
 
 	const {length} = elements;
 
 	for (let index = 0; index < length; index += 1) {
-		remove(elements[index]);
+		const element = elements[index];
+
+		remove(element);
+
+		if (element.hasChildNodes()) {
+			handleRemoved(element.childNodes, remove);
+		}
 	}
 }

package/src/js/floatable.ts

@@ -91,7 +91,6 @@ export class Floatable {
 }
 
 type FloatableWindow = Window & {
-	// biome-ignore lint/style/useNamingConvention: Non-standard name to avoid conflicts
 	_oscarpalmer_oui_floatable: State;
 };
 
@@ -151,9 +150,7 @@ function closeAbove(element: HTMLElement): void {
 	}
 
 	const index = state.order.findIndex(
-		floatable =>
-			floatable.options.anchor === element ||
-			floatable.options.content === element,
+		floatable => floatable.options.anchor === element || floatable.options.content === element,
 	);
 
 	if (index === -1 || index === state.order.length - 1) {
@@ -190,95 +187,162 @@ export function deactivate(floatable: Floatable): void {
 
 	floatable.options.content.hidden = true;
 
-	floatable.options.anchor.insertAdjacentElement(
-		INSERT_AFTEREND,
-		floatable.options.content,
-	);
+	floatable.options.anchor.insertAdjacentElement(INSERT_AFTEREND, floatable.options.content);
 
 	floatable.options.onAfter?.(false);
 }
 
+function getAttribute(
+	position: Position,
+	anchor: DOMRect,
+	top: number,
+	left: number,
+): Position | undefined {
+	switch (position) {
+		case 'horizontal':
+		case 'horizontal-bottom':
+		case 'horizontal-top':
+			return position.replace('horizontal', left >= anchor.right ? 'right' : 'left') as Position;
+
+		case 'vertical':
+		case 'vertical-end':
+		case 'vertical-start':
+			return position.replace('vertical', top >= anchor.bottom ? 'bottom' : 'top') as Position;
+
+		default:
+			break;
+	}
+}
+
+function getMargin(): number {
+	try {
+		const fontsize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+		if (Number.isNaN(fontsize)) {
+			return 5;
+		}
+
+		const margin = fontsize / 2;
+
+		return margin < 5 ? 5 : margin;
+	} catch {
+		return 5;
+	}
+}
+
 function getState(): State {
 	return (window as unknown as FloatableWindow)._oscarpalmer_oui_floatable;
 }
 
-function getX(anchor: DOMRect, content: DOMRect, position: Position): number {
-	if (position.endsWith(POSITION_SUFFIX_END)) {
-		const end = anchor.right - content.width;
+function getX(anchor: DOMRect, content: DOMRect, position: Position, margin: number): number {
+	if (position === 'above' || position === 'below' || position === 'vertical') {
+		const center = anchor.left + anchor.width / 2;
+		const width = content.width / 2;
 
-		return end < 0 ? 0 : end;
-	}
+		if (center + width + margin >= document.body.clientWidth) {
+			return document.body.clientWidth - content.width - margin / 2;
+		}
 
-	if (position.endsWith(POSITION_SUFFIX_START)) {
-		const start = anchor.left;
+		if (center - width - margin <= 0) {
+			return margin / 2;
+		}
 
-		return start + content.width > window.innerWidth
-			? window.innerWidth - content.width
-			: start;
+		return center - width;
 	}
 
-	if (position.startsWith(POSITION_END)) {
+	if (position.startsWith('end')) {
 		return anchor.right;
 	}
 
-	if (position.startsWith(POSITION_START)) {
+	if (position.startsWith('start')) {
 		return anchor.left - content.width;
 	}
 
-	if (position.startsWith(POSITION_HORIZONTAL)) {
-		if (anchor.right + content.width <= window.innerWidth) {
-			return anchor.right;
+	if (position.endsWith('end')) {
+		return anchor.right - content.width - margin <= 0 ? margin / 2 : anchor.right - content.width;
+	}
+
+	if (position.endsWith('start')) {
+		if (anchor.left + content.width + margin >= document.body.clientWidth) {
+			return document.body.clientWidth - content.width - margin / 2;
 		}
 
-		return anchor.left - content.width;
+		return anchor.left - margin <= 0 ? margin / 2 : anchor.left;
+	}
+
+	if (!position.startsWith('horizontal')) {
+		return 0;
 	}
 
-	const left = anchor.left + (anchor.width - content.width) / 2;
+	if (anchor.right + content.width + margin >= document.body.clientWidth) {
+		return anchor.left - content.width;
+	}
 
-	return left < 0 ? 0 : left;
+	return anchor.right;
 }
 
 function getY(
 	anchor: DOMRect,
 	content: DOMRect,
 	position: Position,
+	margin: number,
 	preferAbove: boolean,
 ): number {
-	if (position.startsWith(POSITION_ABOVE)) {
+	if (position === 'end' || position === 'start' || position === 'horizontal') {
+		const center = anchor.top + anchor.height / 2;
+		const height = content.height / 2;
+
+		if (center + height + margin >= document.body.clientHeight) {
+			return document.body.clientHeight - content.height - margin / 2;
+		}
+
+		if (center - height - margin <= 0) {
+			return margin / 2;
+		}
+
+		return center - height;
+	}
+
+	if (position.startsWith('above')) {
 		return anchor.top - content.height;
 	}
 
-	if (position.startsWith(POSITION_BELOW)) {
+	if (position.startsWith('below')) {
 		return anchor.bottom;
 	}
 
-	if (position.endsWith(POSITION_BOTTOM)) {
-		const bottom = anchor.bottom - content.height;
-
-		return bottom < 0 ? 0 : bottom;
+	if (position.endsWith('bottom')) {
+		return anchor.bottom - content.height - margin <= 0
+			? margin / 2
+			: anchor.bottom - content.height;
 	}
 
-	if (position.endsWith(POSITION_TOP)) {
-		const top = anchor.top;
-
-		return top + content.height > window.innerHeight
-			? window.innerHeight - content.height
-			: top;
+	if (position.endsWith('top')) {
+		return anchor.top + content.height + margin >= document.body.clientHeight
+			? document.body.clientHeight - content.height - margin
+			: anchor.top;
 	}
 
-	if (position.startsWith(POSITION_VERTICAL)) {
-		if (preferAbove && anchor.top - content.height >= 0) {
-			return anchor.top - content.height;
-		}
+	if (!position.startsWith('vertical')) {
+		return 0;
+	}
 
-		if (anchor.bottom + content.height <= document.body.clientHeight) {
+	if (preferAbove) {
+		if (
+			anchor.top - content.height - margin <= 0 &&
+			anchor.bottom + content.height + margin <= document.body.clientHeight
+		) {
 			return anchor.bottom;
 		}
 
 		return anchor.top - content.height;
 	}
 
-	return anchor.top + (anchor.height - content.height) / 2;
+	if (anchor.bottom + content.height + margin >= document.body.clientHeight) {
+		return anchor.top - content.height;
+	}
+
+	return anchor.bottom;
 }
 
 function initialize(floatable: Floatable): void {
@@ -308,7 +372,7 @@ function isDisabled(element: HTMLElement): boolean {
 }
 
 function onClick(event: PointerEvent): void {
-	const related = findAncestor(event.target as never, SELECTOR_ALL);
+	const related = findAncestor(event, SELECTOR_ALL);
 
 	if (!(related instanceof HTMLElement)) {
 		closeAll();
@@ -332,7 +396,7 @@ function onKeyDown(event: KeyboardEvent): void {
 
 	closeNonInteractive(state);
 
-	const related = findAncestor(event.target as never, SELECTOR_CONTENT);
+	const related = findAncestor(event, SELECTOR_CONTENT);
 
 	if (!(related instanceof HTMLElement)) {
 		return;
@@ -347,6 +411,22 @@ function onKeyDown(event: KeyboardEvent): void {
 	}
 }
 
+function setAttribute(
+	position: Position,
+	anchor: DOMRect,
+	floater: HTMLElement,
+	top: number,
+	left: number,
+): void {
+	let actual: Position | undefined;
+
+	if (/^(horizontal|vertical)/.test(position)) {
+		actual = getAttribute(position, anchor, top, left);
+	}
+
+	floater.setAttribute('position', actual ?? position);
+}
+
 function stop(floatable: Floatable): void {
 	if (floatable.frame != null) {
 		cancelAnimationFrame(floatable.frame);
@@ -386,6 +466,8 @@ function updatePosition(floatable: Floatable): void {
 		position = floatable.options.defaultPosition;
 	}
 
+	const margin = getMargin();
+
 	let previousAnchor: DOMRect;
 	let previousContent: DOMRect;
 
@@ -399,12 +481,8 @@ function updatePosition(floatable: Floatable): void {
 		if (calculated) {
 			if (previousAnchor != null && previousContent != null) {
 				if (
-					PROPERTIES.every(
-						property => anchor[property] === previousAnchor[property],
-					) &&
-					PROPERTIES.every(
-						property => content[property] === previousContent[property],
-					)
+					PROPERTIES.every(property => anchor[property] === previousAnchor[property]) &&
+					PROPERTIES.every(property => content[property] === previousContent[property])
 				) {
 					floatable.frame = requestAnimationFrame(run);
 
@@ -422,8 +500,10 @@ function updatePosition(floatable: Floatable): void {
 		previousAnchor = anchor;
 		previousContent = content;
 
-		const left = getX(anchor, content, position);
-		const top = getY(anchor, content, position, floatable.options.preferAbove);
+		const left = getX(anchor, content, position, margin);
+		const top = getY(anchor, content, position, margin, floatable.options.preferAbove);
+
+		setAttribute(position, anchor, floatable.options.content, top, left);
 
 		if (top + content.height > window.innerHeight) {
 			floatable.options.content.style.height = `${window.innerHeight - top}px`;
@@ -460,26 +540,6 @@ const ATTRIBUTE_CONTENT = 'oui-floatable-content';
 
 const INSERT_AFTEREND = 'afterend';
 
-const POSITION_ABOVE = 'above';
-
-const POSITION_BELOW = 'below';
-
-const POSITION_BOTTOM = 'bottom';
-
-const POSITION_END = 'end';
-
-const POSITION_HORIZONTAL = 'horizontal';
-
-const POSITION_START = 'start';
-
-const POSITION_SUFFIX_END = '-end';
-
-const POSITION_SUFFIX_START = '-start';
-
-const POSITION_TOP = 'top';
-
-const POSITION_VERTICAL = 'vertical';
-
 const POSITIONS: Set<Position> = new Set([
 	'above',
 	'above-end',

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, ATTRIBUTE_SELECTOR) as HTMLElement;
 
 	let focusTrap = FOCUSTRAPS_ALL.get(element);
 
@@ -118,12 +112,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,
-	);
+	const focusTrap = FOCUSTRAPS_ALL.get(findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement);
 
 	lastTarget = focusTrap == null ? undefined : (event.target as HTMLElement);
 }
@@ -144,15 +133,8 @@ function onKeydown(event: KeyboardEvent): void {
 }
 
 function onPointerdown(event: MouseEvent | TouchEvent): void {
-	const lastFocusTrap = findAncestor(
-		lastTarget as HTMLElement,
-		ATTRIBUTE_SELECTOR,
-	) as HTMLElement;
-
-	const nextFocusTrap = findAncestor(
-		event.target as HTMLElement,
-		ATTRIBUTE_SELECTOR,
-	) as HTMLElement;
+	const lastFocusTrap = findAncestor(lastTarget as HTMLElement, ATTRIBUTE_SELECTOR) as HTMLElement;
+	const nextFocusTrap = findAncestor(event, ATTRIBUTE_SELECTOR) as HTMLElement;
 
 	if (lastFocusTrap != null && nextFocusTrap !== lastFocusTrap) {
 		if (FOCUSTRAPS_ALL.get(lastFocusTrap)?.contain ?? false) {
@@ -174,10 +156,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, ATTRIBUTE_SELECTOR) as HTMLElement;
 
 	const focusTrap = FOCUSTRAPS_ALL.get(element);
 
@@ -228,10 +207,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();