@moni-labs/moni-ui 0.4.4 → 0.4.6

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

@@ -54,3 +54,74 @@ describe('moni-color-field', () => {
 		expect(text?.nextElementSibling).toBe(label);
 	});
 });
+
+describe('moni-color-field · asociación de etiqueta y formulario', () => {
+	it('asocia la etiqueta con el input mediante for/id', async () => {
+		const el = document.createElement('moni-color-field') as MoniColorField;
+		el.label = 'Color principal';
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		const label = el.shadowRoot?.querySelector('label');
+		const text = el.shadowRoot?.querySelector('input[type="text"]');
+		expect(label?.getAttribute('for')).toBe('input');
+		expect(text?.id).toBe('input');
+		el.remove();
+	});
+
+	/*
+	 * jsdom expone `setFormValue` pero no lo conecta a `FormData`, así que aquí
+	 * sólo se comprueba que el elemento participa del formulario y que publica su
+	 * valor. El envío real se verifica en navegador.
+	 */
+	it('se declara form-associated y publica su valor', async () => {
+		const ctor = customElements.get('moni-color-field') as unknown as {
+			formAssociated?: boolean;
+		};
+		expect(ctor.formAssociated).toBe(true);
+
+		const published: unknown[] = [];
+		const originalAttach = HTMLElement.prototype.attachInternals;
+		HTMLElement.prototype.attachInternals = function attachInternalsSpy(this: HTMLElement) {
+			const internals = originalAttach.call(this);
+			const setFormValue = internals.setFormValue.bind(internals);
+			internals.setFormValue = (value) => {
+				published.push(value);
+				setFormValue(value);
+			};
+			return internals;
+		};
+		const spied = document.createElement('moni-color-field') as MoniColorField;
+		HTMLElement.prototype.attachInternals = originalAttach;
+
+		spied.value = '#765a1f';
+		document.body.appendChild(spied);
+		await spied.updateComplete;
+
+		expect(published).toContain('#765a1f');
+		spied.remove();
+	});
+
+	it('propaga la elección del selector nativo y emite moni-change', async () => {
+		const el = document.createElement('moni-color-field') as MoniColorField;
+		el.name = 'c';
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		let emitted: string | undefined;
+		el.addEventListener('moni-change', (event) => {
+			emitted = (event as CustomEvent<{ value: string }>).detail.value;
+		});
+
+		const colorInput = el.shadowRoot?.querySelector(
+			'input[type="color"]'
+		) as HTMLInputElement;
+		colorInput.value = '#00ff88';
+		colorInput.dispatchEvent(new Event('change', { bubbles: true }));
+		await el.updateComplete;
+
+		expect(el.value).toBe('#00ff88');
+		expect(emitted).toBe('#00ff88');
+		el.remove();
+	});
+});

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

@@ -10,6 +10,7 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
+import { emitMoniEvent } from '../utils/event-emitter.js';
 
 /**
  * Componente Material Design 3 Color Field (Campo de Color).
@@ -45,6 +46,11 @@ import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
  * ></moni-color-field>
  * ```
  *
+ * @fires moni-input  - Burbujea y está compuesto. Se emite mientras se arrastra
+ *                      en el selector nativo. `detail.value` trae el hexadecimal.
+ * @fires moni-change - Burbujea y está compuesto. Se emite al confirmar el color.
+ *                      `detail.value` trae el hexadecimal.
+ *
  * @csspart field       - El contenedor div exterior `.field`.
  * @csspart swatch      - El elemento de vista previa de color circular.
  * @csspart input-color - El `<input type="color">` nativo, visualmente oculto.
@@ -53,6 +59,20 @@ import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
  */
 @customElement('moni-color-field')
 export class MoniColorField extends MoniElement {
+	/*
+	 * Los `<input>` internos viven en el Shadow DOM, así que no participan en el
+	 * formulario del documento por mucho que lleven `name`: el valor nunca
+	 * llegaba al envío. La asociación se hace con `ElementInternals`, igual que
+	 * en `moni-text-field`.
+	 */
+	static formAssociated = true;
+	private _internals: ElementInternals;
+
+	constructor() {
+		super();
+		this._internals = this.attachInternals();
+	}
+
 	/**
 	 * El nombre del input, enviado con los datos del formulario.
 	 * @type {string}
@@ -138,6 +158,32 @@ export class MoniColorField extends MoniElement {
 			if (this._colorInput) this._colorInput.disabled = this.disabled;
 			if (this._textInput) this._textInput.disabled = this.disabled;
 		}
+		// Sin condicionar a `changed`: el valor por defecto también tiene que
+		// viajar en el envío aunque nadie haya tocado el campo.
+		this._internals?.setFormValue?.(this.value);
+	}
+
+	/**
+	 * Propaga la elección del selector nativo.
+	 *
+	 * El `<input type="color">` interno no tenía ningún manejador, así que
+	 * `this.value` nunca cambiaba: la muestra y el texto seguían mostrando el
+	 * color anterior y el componente no informaba la elección ni por evento ni
+	 * por formulario. Emite los mismos eventos que `moni-text-field` para que el
+	 * consumidor no tenga que distinguir entre campos.
+	 */
+	private _onColorInput(event: Event) {
+		const target = event.target as HTMLInputElement;
+		this.value = target.value;
+		this._internals?.setFormValue?.(this.value);
+		emitMoniEvent(this, 'moni-input', { detail: { value: this.value, originalEvent: event } });
+	}
+
+	private _onColorChange(event: Event) {
+		const target = event.target as HTMLInputElement;
+		this.value = target.value;
+		this._internals?.setFormValue?.(this.value);
+		emitMoniEvent(this, 'moni-change', { detail: { value: this.value, originalEvent: event } });
 	}
 
 	static override styles = [
@@ -219,10 +265,12 @@ export class MoniColorField extends MoniElement {
 				part="color"
 				.value=${this.value}
 				?disabled=${this.disabled}
-				name=${ifDefined(this.name ? `${this.name}-color` : undefined)}
 				tabindex="-1"
+				@input=${this._onColorInput}
+				@change=${this._onColorChange}
 			/>
 			<input
+				id="input"
 				type="text"
 				part="text"
 				readonly
@@ -233,6 +281,7 @@ export class MoniColorField extends MoniElement {
 			/>
 			${this.label
 				? html`<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label

package/src/components/moni-context-menu.test.ts

@@ -60,6 +60,22 @@ describe('moni-context-menu (P3.5 — flip)', () => {
 		expect(menu?.hasAttribute('active')).toBe(true);
 	});
 
+	it('reserva ancho para la superficie y limita la coordenada al viewport', async () => {
+		await el.updateComplete;
+		parent.dispatchEvent(new MouseEvent('contextmenu', {
+			bubbles: true,
+			clientX: window.innerWidth + 500,
+			clientY: 75
+		}));
+		await el.updateComplete;
+
+		const menu = el.shadowRoot?.querySelector('moni-menu');
+		const host = el.shadowRoot?.querySelector('.menu-host') as HTMLElement;
+		const x = Number(host.style.getPropertyValue('--_x').replace('px', ''));
+		expect(menu?.hasAttribute('no-wrap')).toBe(true);
+		expect(x).toBeLessThanOrEqual(window.innerWidth - 192 - 8);
+	});
+
 	it('cierra el menú al hacer clic en el documento', async () => {
 		await el.updateComplete;
 		const menu = el.shadowRoot?.querySelector(

package/src/components/moni-context-menu.ts

@@ -117,7 +117,12 @@ export class MoniContextMenu extends MoniElement {
 		e.preventDefault();
 		if (this._target) {
 			const rect = this._target.getBoundingClientRect();
-			this._x = e.clientX - rect.left;
+			const menuWidth = Math.min(192, window.innerWidth - 16);
+			const globalX = Math.min(
+				Math.max(8, e.clientX),
+				window.innerWidth - menuWidth - 8
+			);
+			this._x = globalX - rect.left;
 			this._y = e.clientY - rect.top;
 		} else {
 			this._x = e.clientX;
@@ -136,7 +141,6 @@ export class MoniContextMenu extends MoniElement {
 	 * colisiona con el borde del Viewport, invirtiendo top/bottom o left/right.
 	 */
 	private _maybeFlip() {
-		if (!this.flip) return;
 		const menu = this._menuEl?.shadowRoot?.querySelector('menu') as HTMLElement | null;
 		if (!menu) return;
 		const rect = menu.getBoundingClientRect();
@@ -144,6 +148,11 @@ export class MoniContextMenu extends MoniElement {
 		const vh = window.innerHeight;
 		const overflowsBottom = rect.bottom > vh;
 		const overflowsRight = rect.right > vw;
+		// Context menus must always remain horizontally reachable, regardless of
+		// whether placement flipping was requested.
+		if (overflowsRight) this._x = Math.max(8, this._x - (rect.right - vw) - 8);
+		if (rect.left < 8) this._x += 8 - rect.left;
+		if (!this.flip) return;
 		if (this.placement === 'bottom' && overflowsBottom) {
 			this._resolvedPlacement = 'top';
 		} else if (this.placement === 'top' && rect.top < 0) {
@@ -188,6 +197,8 @@ export class MoniContextMenu extends MoniElement {
 				position: absolute;
 				inset-inline-start: var(--_x, 0);
 				inset-block-start: var(--_y, 0);
+				inline-size: min(12rem, calc(100vw - 1rem));
+				min-inline-size: min(12rem, calc(100vw - 1rem));
 				z-index: 200;
 			}
 		`
@@ -218,6 +229,7 @@ export class MoniContextMenu extends MoniElement {
 		>
 			<moni-menu
 				placement=${effectivePlacement}
+				no-wrap
 				?active=${this._open}
 			>
 				<slot></slot>

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

@@ -71,11 +71,13 @@ describe('moni-file-field', () => {
 		expect(trailing).toBeTruthy();
 	});
 
-	it('usa button-label como placeholder cuando no hay valor', async () => {
+	it('muestra button-label como valor visible y mantiene el label elevado', async () => {
 		await el.updateComplete;
 		const text = el.shadowRoot?.querySelector(
 			'input[type="text"]'
 		) as HTMLInputElement;
-		expect(text.placeholder).toBe('Choose file');
+		expect(text.placeholder).toBe('');
+		expect(text.value).toBe('Choose file');
+		expect(text.classList.contains('active')).toBe(true);
 	});
 });

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

@@ -214,7 +214,10 @@ export class MoniFileField extends MoniElement {
 	 * se muestra en su lugar el atributo `label` o un marcador de posición genérico.
 	 */
 	override render() {
-		const isActive = Boolean(this.value);
+		// The picker action is meaningful visible content, not a placeholder.
+		// Keep the label lifted so it cannot collide with buttonLabel.
+		const displayValue = this.value || this.buttonLabel;
+		const isActive = Boolean(displayValue);
 		const hasLeading = Boolean(this.icon);
 		const hasTrailing = Boolean(this.trailingIcon);
 		const fieldClasses = {
@@ -250,8 +253,8 @@ export class MoniFileField extends MoniElement {
 				type="text"
 				part="display"
 				readonly
-				placeholder=${this.buttonLabel}
-				.value=${this.value}
+				placeholder=""
+				.value=${displayValue}
 				?disabled=${this.disabled}
 				name=${ifDefined(this.name ? `${this.name}-display` : undefined)}
 				class=${isActive ? 'active' : ''}

package/src/components/moni-morph-modal.test.ts

@@ -1,12 +1,31 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { gsap } from 'gsap';
 import './moni-morph-modal.js';
+import './moni-fab.js';
+import './moni-fab-menu.js';
 import type { MoniMorphModal } from './moni-morph-modal.js';
 
 vi.mock('gsap', () => {
 	return {
 		gsap: {
 			registerPlugin: vi.fn(),
+			utils: {
+				interpolate: vi.fn((_start: unknown, end: unknown) => end)
+			},
 			set: vi.fn(),
+			timeline: vi.fn((config: { onComplete?: () => void } = {}) => {
+				const timeline = {
+					addLabel: vi.fn(() => timeline),
+					to: vi.fn((target: Record<string, unknown>, vars: Record<string, unknown>) => {
+						if (typeof vars.onStart === 'function') (vars.onStart as () => void)();
+						if (typeof vars.progress === 'number') target.progress = vars.progress;
+						if (typeof vars.onUpdate === 'function') (vars.onUpdate as () => void)();
+						return timeline;
+					})
+				};
+				queueMicrotask(() => config.onComplete?.());
+				return timeline;
+			}),
 			fromTo: vi.fn(
 				(_target: unknown, _from: object, to: { onComplete?: () => void }) => {
 					if (to.onComplete) to.onComplete();
@@ -61,6 +80,7 @@ describe('moni-morph-modal', () => {
 		target = document.createElement('button');
 		target.id = 'test-target';
 		target.textContent = 'Open';
+		target.getBoundingClientRect = () => new DOMRect(24, 700, 56, 56);
 		document.body.appendChild(target);
 
 		el = document.createElement('moni-morph-modal') as MoniMorphModal;
@@ -145,6 +165,156 @@ describe('moni-morph-modal', () => {
 		expect(el.open).toBe(false);
 	});
 
+	it('desenfoca el contenido mientras desaparece al cerrar', async () => {
+		el.show();
+		await waitForRaf();
+		vi.mocked(gsap.fromTo).mockClear();
+
+		el.hide();
+		await waitForRaf();
+
+		expect(gsap.fromTo).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.objectContaining({ opacity: 1, filter: 'blur(0px)' }),
+			expect.objectContaining({ opacity: 0, filter: 'blur(6px)' })
+		);
+	});
+
+	it('recalcula la posición actual del origen al cerrar', async () => {
+		el.show();
+		await waitForRaf();
+		target.getBoundingClientRect = () => new DOMRect(310, 420, 64, 48);
+
+		el.hide();
+		await waitForRaf();
+
+		const panel = el.shadowRoot?.querySelector('.panel') as HTMLElement;
+		expect(gsap.set).toHaveBeenCalledWith(
+			panel,
+			expect.objectContaining({ x: 310, y: 420 })
+		);
+		expect(panel.style.width).toBe('64px');
+		expect(panel.style.height).toBe('48px');
+	});
+
+	it('desaparece con escala y opacidad cuando el origen ya no existe', async () => {
+		el.show();
+		await waitForRaf();
+		target.remove();
+		vi.mocked(gsap.to).mockClear();
+
+		el.hide();
+		await waitForRaf();
+
+		expect(gsap.to).toHaveBeenCalledWith(
+			expect.anything(),
+			expect.objectContaining({ autoAlpha: 0, scale: 0.92 })
+		);
+		expect(el.open).toBe(false);
+	});
+
+	it('captura la superficie interna real de un FAB para el morph', async () => {
+		const fab = document.createElement('moni-fab');
+		document.body.appendChild(fab);
+		await (fab as HTMLElement & { updateComplete: Promise<unknown> }).updateComplete;
+		const button = fab.shadowRoot?.querySelector('button') as HTMLButtonElement;
+		button.style.backgroundColor = 'rgb(103, 80, 164)';
+		button.style.borderRadius = '20px';
+		button.style.boxShadow = 'rgba(0, 0, 0, 0.2) 0px 2px 6px';
+		button.getBoundingClientRect = () => new DOMRect(280, 640, 56, 56);
+
+		const state = (el as unknown as {
+			_getTargetState: (target: HTMLElement) => {
+				rect: DOMRect;
+				backgroundColor: string;
+				borderRadius: string;
+				boxShadow: string;
+			};
+		})._getTargetState(fab);
+
+		expect(state.rect.x).toBe(280);
+		expect(state.rect.width).toBe(56);
+		expect(state.backgroundColor).toBe('rgb(103, 80, 164)');
+		expect(state.borderRadius).toBe('20px');
+		expect(state.boxShadow).toContain('2px 6px');
+		fab.remove();
+	});
+
+	it('captura todo el contenido compuesto del trigger interno de un FAB Menu', async () => {
+		const menu = document.createElement('moni-fab-menu') as HTMLElement & {
+			icon: string;
+			updateComplete: Promise<unknown>;
+		};
+		menu.icon = 'add';
+		document.body.appendChild(menu);
+		await menu.updateComplete;
+		const trigger = menu.shadowRoot?.querySelector('.trigger') as HTMLElement & { updateComplete: Promise<unknown> };
+		await trigger.updateComplete;
+
+		const visual = (el as unknown as {
+			_resolveVisualTarget: (target: HTMLElement) => HTMLElement;
+		})._resolveVisualTarget(menu);
+		visual.getBoundingClientRect = () => new DOMRect(20, 30, 56, 56);
+		const snapshot = (el as unknown as {
+			_createTargetSnapshot: (target: HTMLElement, rect: DOMRect) => HTMLElement;
+		})._createTargetSnapshot(visual, visual.getBoundingClientRect());
+
+		expect(snapshot.textContent).toContain('add');
+		expect(snapshot.style.width).toBe('56px');
+		expect(snapshot.querySelectorAll('*').length).toBeGreaterThan(1);
+		expect((snapshot.firstElementChild as HTMLElement).style.backgroundColor).toBe('transparent');
+		expect((snapshot.firstElementChild as HTMLElement).style.transform).toBe('none');
+		expect((snapshot.firstElementChild as HTMLElement).style.whiteSpace).toBe('nowrap');
+		menu.remove();
+	});
+
+	it('carga inmediatamente las imágenes incluidas en el snapshot', () => {
+		const card = document.createElement('button');
+		const image = document.createElement('img');
+		image.loading = 'lazy';
+		image.src = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"/>';
+		card.appendChild(image);
+		const snapshot = (el as unknown as {
+			_createTargetSnapshot: (target: HTMLElement, rect: DOMRect) => HTMLElement;
+		})._createTargetSnapshot(card, new DOMRect(0, 0, 240, 140));
+
+		expect(snapshot.querySelector('img')?.loading).toBe('eager');
+		expect(snapshot.querySelector('img')?.decoding).toBe('sync');
+	});
+
+	it('descompone rotación y escala del transform vivo del target', () => {
+		const transformed = document.createElement('button');
+		transformed.style.transform = 'matrix(1.195128, 0.104587, -0.104587, 1.195128, 80, 0)';
+		document.body.appendChild(transformed);
+		const state = (el as unknown as {
+			_readTransformState: (target: HTMLElement) => { rotation: number; scaleX: number; scaleY: number };
+		})._readTransformState(transformed);
+
+		expect(state.rotation).toBeCloseTo(5, 1);
+		expect(state.scaleX).toBeCloseTo(1.2, 1);
+		expect(state.scaleY).toBeCloseTo(1.2, 1);
+		transformed.remove();
+	});
+
+	it('convierte coordenadas del viewport al canvas transformado', () => {
+		const canvas = document.createElement('div');
+		canvas.className = 'lab-canvas';
+		canvas.style.transform = 'scale(0.5)';
+		canvas.getBoundingClientRect = () => new DOMRect(10, 20, 200, 300);
+		document.body.appendChild(canvas);
+		canvas.appendChild(el);
+
+		const local = (el as unknown as {
+			_toPanelCoordinateRect: (rect: DOMRect) => DOMRect;
+		})._toPanelCoordinateRect(new DOMRect(60, 70, 20, 30));
+
+		expect(local.x).toBe(100);
+		expect(local.y).toBe(100);
+		expect(local.width).toBe(40);
+		expect(local.height).toBe(60);
+		canvas.remove();
+	});
+
 	it('alterna el estado open cuando se llama a toggle()', async () => {
 		el.toggle();
 		await waitForRaf();
@@ -238,7 +408,7 @@ describe('moni-morph-modal', () => {
 		getNodes.mockRestore();
 	});
 
-	it('ejecuta la animación FLIP de label al cerrar cuando morph-label es true', async () => {
+	it('no ejecuta el morph de texto legado al cerrar cuando morph-label es true', async () => {
 		(el as unknown as { _hasHeader: boolean })._hasHeader = true;
 		el.morphLabel = true;
 		await el.updateComplete;
@@ -254,7 +424,8 @@ describe('moni-morph-modal', () => {
 		el.hide();
 		await waitForRaf();
 
-		expect(closeSpy).toHaveBeenCalled();
+		expect(closeSpy).not.toHaveBeenCalled();
+		expect(el.shadowRoot?.querySelector('.morph-text, .morph-icon, .morph-target-snapshot')).toBeNull();
 		closeSpy.mockRestore();
 	});