@moni-labs/moni-ui 0.4.4 → 0.4.6

package/src/components/moni-nav.ts

@@ -7,6 +7,7 @@
 
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 
 /**
@@ -341,9 +342,11 @@ export class MoniNav extends MoniElement {
 		return html`${scrim}<nav
 				class=${classes}
 				part="nav"
-				role=${isModalDrawer ? 'dialog' : undefined}
-				aria-modal=${isModalDrawer ? 'true' : undefined}
-				aria-expanded=${isModalDrawer ? (this.open ? 'true' : 'false') : undefined}
+				role=${ifDefined(isModalDrawer ? 'dialog' : undefined)}
+				aria-modal=${ifDefined(isModalDrawer ? 'true' : undefined)}
+				aria-expanded=${ifDefined(
+					isModalDrawer ? (this.open ? 'true' : 'false') : undefined
+				)}
 			>
 				<slot name="header"></slot>
 				<slot @slotchange=${this._propagateToItems}></slot>

package/src/components/moni-select-option.ts

@@ -108,6 +108,25 @@ export class MoniSelectOption extends MoniElement {
 	 * Cuando `selected=true`, se renderiza un icono de marca de verificación principal (leading checkmark) a través de `<moni-icon name="check">`
 	 * en lugar del slot del icono principal, según la especificación de opciones de Select de M3.
 	 */
+	/*
+	 * Este `<li>` no declara `role="option"` ni `aria-selected`, aunque la ficha
+	 * del componente diga que sí.
+	 *
+	 * Hoy no afecta a nadie: `moni-select` proyecta a sus hijos en un
+	 * `<slot style="display:none">` y los usa sólo como fuente de datos —
+	 * redibuja la lista visible con sus propios `<li class="option-item">`—, así
+	 * que estos nodos no llegan al árbol de accesibilidad de Chrome (comprobado
+	 * con `Accessibility.getFullAXTree`: cero nodos). axe sí los reporta como
+	 * `listitem` porque no sigue el `display:none` a través del límite del slot.
+	 *
+	 * Añadir `role="option"` aquí empeora las cosas: exige un ancestro
+	 * `role="listbox"` y en el árbol aplanado queda el host sin rol entre medio,
+	 * con lo que aparece `aria-required-parent`. La corrección completa es marcar
+	 * como `listbox` los `<ul>` de las cinco rutas de render de `moni-select`
+	 * (desplegable, drilldown, submenu y hoja), mover `role="option"` al host y
+	 * dejar el `<li>` en `presentation`. Queda fuera de este cambio porque toca
+	 * el manejo de teclado del componente.
+	 */
 	override render() {
 		return html`<li
 			part="option"

package/src/components/moni-select.test.ts

@@ -406,3 +406,19 @@ describe('moni-select', () => {
 		expect(menu.classList.contains('open')).toBe(true);
 	});
 });
+
+describe('moni-select · nombre accesible', () => {
+	it('asocia la etiqueta con el input mediante for/id', async () => {
+		const el = document.createElement('moni-select') as MoniSelect;
+		el.label = 'Estado';
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		const input = el.shadowRoot?.querySelector('input');
+		const label = el.shadowRoot?.querySelector('label');
+		expect(input?.id).toBe('input');
+		expect(label?.getAttribute('for')).toBe('input');
+		expect(input?.nextElementSibling).toBe(label);
+		el.remove();
+	});
+})

package/src/components/moni-select.ts

@@ -1679,6 +1679,7 @@ export class MoniSelect extends MoniElement {
 		return html`<div class=${classMap(fieldClasses)} part="field">
 			${leading}
 			<input
+				id="input"
 				type="text"
 				part="input"
 				.value=${displayValue}
@@ -1693,6 +1694,7 @@ export class MoniSelect extends MoniElement {
 			/>
 			${this.label
 				? html`<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label

package/src/components/moni-side-sheet.test.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import './moni-side-sheet.js';
-import type { MoniSideSheet } from './moni-side-sheet.js';
+import { MoniSideSheet } from './moni-side-sheet.js';
 
 describe('moni-side-sheet', () => {
 	let el: MoniSideSheet;
@@ -41,6 +40,7 @@ describe('moni-side-sheet', () => {
 		await el.updateComplete;
 
 		const headline = el.shadowRoot?.querySelector('.headline') as HTMLHeadingElement;
+		const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
 		expect(headline.textContent?.trim()).toBe('Configuración');
 
 		let eventFired = false;
@@ -54,7 +54,38 @@ describe('moni-side-sheet', () => {
 
 		await el.updateComplete;
 		expect(el.open).toBe(false);
+		expect(eventFired).toBe(false);
+		expect(dialog.open).toBe(true);
+		dialog.dispatchEvent(new TransitionEvent('transitionend', { propertyName: 'transform' }));
 		expect(eventFired).toBe(true);
+		expect(dialog.matches(':not([open])')).toBe(true);
+	});
+
+	it('anima el cierre por Escape antes de cerrar el dialog nativo', async () => {
+		el.modal = true;
+		el.open = true;
+		await el.updateComplete;
+		const dialog = el.shadowRoot?.querySelector('dialog') as HTMLDialogElement;
+		const cancel = new Event('cancel', { cancelable: true });
+		dialog.dispatchEvent(cancel);
+		await el.updateComplete;
+
+		expect(cancel.defaultPrevented).toBe(true);
+		expect(el.open).toBe(false);
+		expect(dialog.open).toBe(true);
+		expect(dialog.classList.contains('opened')).toBe(false);
+	});
+
+	it('oculta explícitamente el dialog cuando no tiene open', () => {
+		const cssText = String(MoniSideSheet.styles).replace(/\s+/g, '');
+		expect(cssText).toContain('dialog:not([open]){display:none;');
+	});
+
+	it('anula el límite nativo de dialog y ocupa todo el alto dinámico', () => {
+		const cssText = String(MoniSideSheet.styles).replace(/\s+/g, '');
+		expect(cssText).toContain('block-size:100dvh;');
+		expect(cssText).toContain('max-block-size:100dvh;');
+		expect(cssText).toContain('inset-block:0;');
 	});
 
 	it('dispara el evento back cuando se hace clic en el botón de volver', async () => {
@@ -82,6 +113,12 @@ describe('moni-side-sheet', () => {
 		expect(dialog?.classList.contains('no-border')).toBe(true);
 	});
 
+	it('compensa los márgenes del modo detached sin desbordar el viewport', () => {
+		const cssText = String(MoniSideSheet.styles).replace(/\s+/g, '');
+		expect(cssText).toContain('inline-size:calc(100%-32px)');
+		expect(cssText).toContain('calc(100%-32px)');
+	});
+
 	it('renderiza el tirador (handle) y soporta el cierre por arrastre cuando withHandle es true', async () => {
 		el.withHandle = true;
 		el.open = true;

package/src/components/moni-side-sheet.ts

@@ -84,6 +84,25 @@ export class MoniSideSheet extends MoniElement {
 	private _sheetWidth = 0;
 	private _defaultWidth = 0;
 	private _justDragged = false;
+	private _closeTimer: ReturnType<typeof setTimeout> | undefined;
+	private _closing = false;
+
+	override disconnectedCallback() {
+		clearTimeout(this._closeTimer);
+		super.disconnectedCallback();
+	}
+
+	private _finishClose() {
+		if (!this._closing || this.open) return;
+		this._closing = false;
+		clearTimeout(this._closeTimer);
+		this._dialog.classList.remove('expanded');
+		if (this._dialog.open) {
+			if (typeof this._dialog.close === 'function') this._dialog.close();
+			else this._dialog.open = false;
+		}
+		this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+	}
 
 	private _getMaxWidthPx(): number {
 		const val = this.expandedWidth || '600px';
@@ -119,6 +138,8 @@ export class MoniSideSheet extends MoniElement {
 
 		if (changedProperties.has('open') && this._dialog) {
 			if (this.open) {
+				this._closing = false;
+				clearTimeout(this._closeTimer);
 				if (this.modal) {
 					if (!this._dialog.open) {
 						if (typeof this._dialog.showModal === 'function') {
@@ -141,23 +162,18 @@ export class MoniSideSheet extends MoniElement {
 				this._dialog.classList.add('opened');
 			} else {
 				if (this._dialog.open) {
+					this._closing = true;
 					this._dialog.classList.remove('opened');
 					const onTransitionEnd = (e: TransitionEvent) => {
-						if (e.target === this._dialog && (e.propertyName === 'transform' || e.propertyName === 'opacity')) {
+						if (e.target === this._dialog && e.propertyName === 'transform') {
 							this._dialog.removeEventListener('transitionend', onTransitionEnd);
-							if (!this.open && this._dialog.open) {
-								this._dialog.classList.remove('expanded');
-								this._dialog.close();
-							}
+							this._finishClose();
 						}
 					};
 					this._dialog.addEventListener('transitionend', onTransitionEnd);
-					// Fallback safety
-					setTimeout(() => {
-						if (!this.open && this._dialog.open) {
-							this._dialog.classList.remove('expanded');
-							this._dialog.close();
-						}
+					this._closeTimer = setTimeout(() => {
+						this._dialog.removeEventListener('transitionend', onTransitionEnd);
+						this._finishClose();
 					}, 350);
 				}
 			}
@@ -341,7 +357,11 @@ export class MoniSideSheet extends MoniElement {
 	 */
 	private _onCloseClick() {
 		this.open = false;
-		this.dispatchEvent(new CustomEvent('close', { bubbles: true, composed: true }));
+	}
+
+	private _onCancel(e: Event) {
+		e.preventDefault();
+		this._onCloseClick();
 	}
 
 	/**
@@ -381,9 +401,9 @@ export class MoniSideSheet extends MoniElement {
 				flex-direction: column;
 				border: none;
 				position: fixed;
-				top: 0;
-				bottom: 0;
-				block-size: 100vh;
+				inset-block: 0;
+				block-size: 100dvh;
+				max-block-size: 100dvh;
 				inline-size: 100%;
 				max-inline-size: var(--moni-side-sheet-max-width, 400px);
 				background-color: var(--surface);
@@ -404,6 +424,12 @@ export class MoniSideSheet extends MoniElement {
 				visibility: hidden;
 			}
 
+			/* Author-level display:flex overrides the browser's native
+			   dialog:not([open]) rule, so closed sheets must be hidden explicitly. */
+			dialog:not([open]) {
+				display: none;
+			}
+
 			dialog.dragging {
 				transition: none !important;
 			}
@@ -433,7 +459,13 @@ export class MoniSideSheet extends MoniElement {
 			dialog.detached {
 				top: 16px;
 				bottom: 16px;
-				block-size: calc(100vh - 32px);
+				block-size: calc(100dvh - 32px);
+				max-block-size: calc(100dvh - 32px);
+				inline-size: calc(100% - 32px);
+				max-inline-size: min(
+					var(--moni-side-sheet-max-width, 400px),
+					calc(100% - 32px)
+				);
 				border-radius: 1.75rem !important;
 				border: 1px solid var(--outline-variant);
 				box-shadow: var(--elevate1);
@@ -586,8 +618,8 @@ export class MoniSideSheet extends MoniElement {
 		return html`
 			<dialog
 				part="dialog"
-				?open=${this.open}
 				class=${classes}
+				@cancel=${this._onCancel}
 				@click=${this._onDialogClick}
 				@pointerdown=${this._onPointerDown}
 				@pointermove=${this._onPointerMove}

package/src/components/moni-snackbar.test.ts

@@ -59,6 +59,22 @@ describe('moni-snackbar', () => {
 		await el.updateComplete;
 		const action = el.shadowRoot?.querySelector('[part="action"]');
 		expect(action?.textContent).toBe('Undo');
+		expect(action?.tagName).toBe('BUTTON');
+	});
+
+	it('emite action y se cierra al activar la acción', async () => {
+		el.action = 'Undo';
+		el.active = true;
+		await el.updateComplete;
+		let received = false;
+		el.addEventListener('action', () => (received = true));
+
+		(el.shadowRoot?.querySelector('[part="action"]') as HTMLButtonElement).click();
+		await el.updateComplete;
+
+		expect(received).toBe(true);
+		expect(el.active).toBe(false);
+		expect(el.hasAttribute('active')).toBe(false);
 	});
 
 	it('max-lines es 2 por defecto (especificación M3)', async () => {

package/src/components/moni-snackbar.ts

@@ -178,12 +178,25 @@ export class MoniSnackbar extends MoniElement {
 			}
 
 			.action {
+				appearance: none;
+				border: 0;
+				background: transparent;
+				padding: 0.5rem;
+				margin: -0.5rem;
+				border-radius: 999px;
+				font: inherit;
 				font-weight: 500;
 				text-transform: uppercase;
 				font-size: 0.875rem;
 				letter-spacing: 0.05em;
 				color: var(--inverse-primary);
 				white-space: nowrap;
+				cursor: pointer;
+			}
+
+			.action:focus-visible {
+				outline: 2px solid currentColor;
+				outline-offset: 2px;
 			}
 
 			@media only screen and (min-width: 993px) {
@@ -194,6 +207,16 @@ export class MoniSnackbar extends MoniElement {
 		`
 	];
 
+	private handleAction() {
+		this.active = false;
+		this.dispatchEvent(
+			new CustomEvent('action', {
+				bubbles: true,
+				composed: true
+			})
+		);
+	}
+
 	/**
 	 * Renderiza el snackbar con su mensaje y el botón de acción opcional.
 	 *
@@ -215,7 +238,7 @@ export class MoniSnackbar extends MoniElement {
 			<slot name="icon"></slot>
 			<span class="max" part="text"><slot>${this.text}</slot></span>
 			${this.action
-				? html`<span class="action" part="action">${this.action}</span>`
+				? html`<button class="action" part="action" type="button" @click=${this.handleAction}>${this.action}</button>`
 				: ''}
 		</div>`;
 	}

package/src/components/moni-stepper.ts

@@ -108,6 +108,10 @@ export class MoniStepper extends MoniElement {
 				stepElement.orientation = this.orientation;
 				stepElement.completed = stepIndex < this.current;
 				stepElement.active = stepIndex === this.current;
+				// El <ol> proyecta hosts <moni-step>, no <li>. Sin un rol explícito
+				// el árbol aplanado deja una lista cuyos hijos no son elementos de
+				// lista, y los lectores de pantalla no anuncian "1 de N".
+				stepElement.setAttribute('role', 'listitem');
 			});
 		});
 	}

package/src/components/moni-text-field.test.ts

@@ -229,3 +229,28 @@ describe('moni-text-field', () => {
 		expect(MoniTextField.Inputmask.isValid('123-456', { mask: '999-999' })).toBe(true);
 	});
 });
+
+describe('moni-text-field · nombre accesible', () => {
+	/*
+	 * El <label> y el <input> son hermanos dentro del mismo shadow root: sin
+	 * `for`/`id` no hay asociación y el lector de pantalla anuncia el campo sin
+	 * nombre. La adyacencia no se puede cambiar porque `field-styles` la usa
+	 * (`:focus + label`) para elevar la etiqueta, así que la unión va por id.
+	 */
+	it('asocia la etiqueta con el input mediante for/id', async () => {
+		const el = document.createElement('moni-text-field') as HTMLElement & {
+			label: string;
+			updateComplete: Promise<unknown>;
+		};
+		el.label = 'Correo';
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		const input = el.shadowRoot?.querySelector('input');
+		const label = el.shadowRoot?.querySelector('label');
+		expect(input?.id).toBe('input');
+		expect(label?.getAttribute('for')).toBe('input');
+		expect(input?.nextElementSibling).toBe(label);
+		el.remove();
+	});
+})

package/src/components/moni-text-field.ts

@@ -494,6 +494,7 @@ export class MoniTextField extends MoniElement {
 		return html`<div class=${classMap(fieldClasses)} part="field">
 			${leading}
 			<input
+				id="input"
 				part="input"
 				type=${this.type}
 				placeholder=${placeholder}
@@ -506,6 +507,7 @@ export class MoniTextField extends MoniElement {
 			/>
 			${this.label
 				? html`<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label

package/src/components/moni-textarea.test.ts

@@ -171,3 +171,19 @@ describe('moni-textarea', () => {
 		expect(textarea.style.blockSize).toBe('');
 	});
 });
+
+describe('moni-textarea · nombre accesible', () => {
+	it('asocia la etiqueta con el textarea mediante for/id', async () => {
+		const el = document.createElement('moni-textarea') as MoniTextarea;
+		el.label = 'Comentario';
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		const control = el.shadowRoot?.querySelector('textarea');
+		const label = el.shadowRoot?.querySelector('label');
+		expect(control?.id).toBe('input');
+		expect(label?.getAttribute('for')).toBe('input');
+		expect(control?.nextElementSibling).toBe(label);
+		el.remove();
+	});
+})

package/src/components/moni-textarea.ts

@@ -357,6 +357,7 @@ export class MoniTextarea extends MoniElement {
 		return html`<div class=${classMap(fieldClasses)} part="field">
 			${leading}
 			<textarea
+				id="input"
 				part="input"
 				rows=${this.rows}
 				maxlength=${ifDefined(this.maxlength ?? undefined)}
@@ -369,6 +370,7 @@ export class MoniTextarea extends MoniElement {
 			></textarea>
 			${this.label
 				? html`<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label

package/src/components/moni-toolbar.test.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-import './moni-toolbar.js';
-import type { MoniToolbar } from './moni-toolbar.js';
+import { MoniToolbar } from './moni-toolbar.js';
 
 describe('moni-toolbar (P5.4 — recreated)', () => {
 	let el: MoniToolbar;
@@ -90,4 +89,8 @@ describe('moni-toolbar (P5.4 — recreated)', () => {
 		const assigned = slot?.assignedNodes({ flatten: true }) ?? [];
 		expect(assigned.length).toBeGreaterThan(0);
 	});
-});
+
+	it('usa un z-index local que no atraviesa overlays modales', () => {
+		expect(String(MoniToolbar.styles).replace(/\s+/g, '')).toContain('z-index:var(--z-index-toolbar,10)');
+	});
+});

package/src/components/moni-toolbar.ts

@@ -65,7 +65,9 @@ export class MoniToolbar extends MoniElement {
 			:host {
 				display: block;
 				position: relative;
-				z-index: var(--z-index-toolbar, 1000);
+				/* Participate in the local surface stack. A four-digit default
+				   allowed toolbars to paint above modal sheets and dialogs. */
+				z-index: var(--z-index-toolbar, 10);
 			}
 
 			.container {
@@ -159,4 +161,4 @@ declare global {
 	}
 }
 
-export default MoniToolbar;
+export default MoniToolbar;

package/src/components/moni-tooltip.test.ts

@@ -22,6 +22,8 @@ describe('moni-tooltip (P3.1)', () => {
 		await el.updateComplete;
 		const tip = el.shadowRoot?.querySelector('[role="tooltip"]');
 		expect(tip).toBeTruthy();
+		expect(tip?.classList.contains('js-positioned')).toBe(true);
+		expect((tip as HTMLElement).style.getPropertyValue('--_tooltip-origin-x')).not.toBe('');
 	});
 
 	it('refleja el texto en el host', async () => {
@@ -35,14 +37,16 @@ describe('moni-tooltip (P3.1)', () => {
 		expect(tip?.classList.contains('top')).toBe(true);
 	});
 
-	it('acepta los 6 posicionamientos M3 (top/top-start/top-end/bottom/bottom-start/bottom-end)', async () => {
-		const positions: Array<'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end'> = [
+	it('acepta los 8 posicionamientos disponibles', async () => {
+		const positions: Array<'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'> = [
 			'top',
 			'top-start',
 			'top-end',
 			'bottom',
 			'bottom-start',
-			'bottom-end'
+			'bottom-end',
+			'left',
+			'right'
 		];
 		for (const pos of positions) {
 			el.position = pos;
@@ -58,6 +62,21 @@ describe('moni-tooltip (P3.1)', () => {
 		expect(el.hasAttribute('rich')).toBe(false);
 	});
 
+	it('rota con el target solo cuando rotate-with-target está activo', async () => {
+		await el.updateComplete;
+		const tip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement;
+		parent.style.transform = 'matrix(0.996195, 0.087156, -0.087156, 0.996195, 0, 0)';
+		parent.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+		expect(tip.style.getPropertyValue('--_tooltip-target-rotation')).toBe('0deg');
+
+		parent.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
+		el.rotateWithTarget = true;
+		await el.updateComplete;
+		parent.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+		expect(Number.parseFloat(tip.style.getPropertyValue('--_tooltip-target-rotation'))).toBeCloseTo(5, 1);
+		expect(el.hasAttribute('rotate-with-target')).toBe(true);
+	});
+
 	it('rich=true habilita el modo de contenido enriquecido (atributo rich reflejado)', async () => {
 		el.rich = true;
 		await el.updateComplete;
@@ -79,6 +98,61 @@ describe('moni-tooltip (P3.1)', () => {
 		expect(tip?.classList.contains('visible')).toBe(false);
 	});
 
+	it('centra matemáticamente el tooltip sobre el trigger', async () => {
+		await el.updateComplete;
+		const tip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement;
+		parent.getBoundingClientRect = () => new DOMRect(500, 300, 160, 48);
+		Object.defineProperty(tip, 'offsetWidth', { configurable: true, value: 112 });
+		Object.defineProperty(tip, 'offsetHeight', { configurable: true, value: 36 });
+
+		parent.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+
+		expect(tip.style.left).toBe('524px');
+		expect(tip.style.top).toBe('256px');
+		expect(tip.classList.contains('js-positioned')).toBe(true);
+		expect(tip.style.transformOrigin).toBe('center');
+		expect(tip.style.getPropertyValue('--_tooltip-origin-x')).toBe('0px');
+		expect(tip.style.getPropertyValue('--_tooltip-origin-y')).toBe('50px');
+	});
+
+	it('posiciona left y right desde el borde del trigger', async () => {
+		await el.updateComplete;
+		const tip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement;
+		parent.getBoundingClientRect = () => new DOMRect(500, 300, 160, 48);
+		Object.defineProperty(tip, 'offsetWidth', { configurable: true, value: 112 });
+		Object.defineProperty(tip, 'offsetHeight', { configurable: true, value: 36 });
+
+		el.position = 'left';
+		await el.updateComplete;
+		parent.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+		expect(tip.style.left).toBe('380px');
+		expect(tip.style.top).toBe('306px');
+		expect(tip.style.getPropertyValue('--_tooltip-origin-x')).toBe('144px');
+		expect(tip.style.getPropertyValue('--_tooltip-origin-y')).toBe('0px');
+
+		parent.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
+		el.position = 'right';
+		await el.updateComplete;
+		parent.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+		expect(tip.style.left).toBe('668px');
+		expect(tip.style.getPropertyValue('--_tooltip-origin-x')).toBe('-144px');
+	});
+
+	it('sigue al trigger cuando cambia de posición durante scroll', async () => {
+		await el.updateComplete;
+		const tip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement;
+		let top = 300;
+		parent.getBoundingClientRect = () => new DOMRect(500, top, 160, 48);
+		Object.defineProperty(tip, 'offsetWidth', { configurable: true, value: 112 });
+		Object.defineProperty(tip, 'offsetHeight', { configurable: true, value: 36 });
+		parent.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
+		expect(tip.style.top).toBe('256px');
+
+		top = 180;
+		document.dispatchEvent(new Event('scroll'));
+		expect(tip.style.top).toBe('136px');
+	});
+
 	it('muestra el tooltip en focusin y lo oculta en focusout', async () => {
 		await el.updateComplete;
 		const tip = el.shadowRoot?.querySelector('.tooltip') as HTMLElement;