@moni-labs/moni-ui 0.4.5 → 0.4.6

package/docs/components/bottom-sheet.md

@@ -134,8 +134,6 @@ Controla el estado abierto/cerrado del bottom sheet.
 Cuando se establece en `true`, llama a `dialog.showModal()` o `dialog.show()`
 dependiendo de la propiedad `modal`. Cuando se establece en `false`, llama a `dialog.close()`.
 
-![moni-bottom-sheet — open=false](../assets/moni-bottom-sheet/open--false.png)
-
 ![moni-bottom-sheet — open=true](../assets/moni-bottom-sheet/open--true.png)
 
 ### `size`

package/docs/components/button.md

@@ -275,9 +275,3 @@ Tipo nativo del botón (cuando se renderiza como un `<button>`).
 Si está establecido, renderiza el botón como un elemento `<a>` con esta URL.
 
 ![moni-button — href=default](../assets/moni-button/href--default.png)
-
-### `target`
-
-Atributo target para los botones tipo enlace.
-
-![moni-button — target=default](../assets/moni-button/target--default.png)

package/docs/components/dialog.md

@@ -128,8 +128,6 @@ Cuando se establece en `true`, el componente llama a `dialog.showModal()` (si `m
 o `dialog.show()`. Cuando se establece en `false`, llama a `dialog.close()`.
 Reflejado como un atributo HTML para CSS y lectores de estado externos.
 
-![moni-dialog — open=false](../assets/moni-dialog/open--false.png)
-
 ![moni-dialog — open=true](../assets/moni-dialog/open--true.png)
 
 ### `modal`

package/docs/components/menu.md

@@ -153,8 +153,6 @@ Deshabilita el ajuste de texto dentro del menú.
 
 Controla si el menú está visible.
 
-![moni-menu — active=false](../assets/moni-menu/active--false.png)
-
 ![moni-menu — active=true](../assets/moni-menu/active--true.png)
 
 ### `space`

package/docs/components/morph-modal.md

@@ -125,20 +125,11 @@ No declara eventos propios.
 
 Cada imagen se genera con el componente real: cambia solo la variable indicada y mantiene estable el resto del escenario. Úsala para comparar estados, no como sustituto de la API.
 
-### `target`
-
-Selector del elemento disparador desde el cual transformarse (ej. '#fab' o '.my-button').
-Si se omite, el modal aún puede activarse programáticamente estableciendo `open = true`.
-
-![moni-morph-modal — target=default](../assets/moni-morph-modal/target--default.png)
-
 ### `open`
 
 Controla el estado abierto/cerrado del modal.
 Puede establecerse directamente, o se gestiona internamente cuando se hace clic en el elemento `target`.
 
-![moni-morph-modal — open=false](../assets/moni-morph-modal/open--false.png)
-
 ![moni-morph-modal — open=true](../assets/moni-morph-modal/open--true.png)
 
 ### `modal`
@@ -167,22 +158,6 @@ La altura del modal cuando está completamente expandido.
 
 ![moni-morph-modal — expanded-height=default](../assets/moni-morph-modal/expandedHeight--default.png)
 
-### `close-on-click-outside`
-
-Si es true, hacer clic fuera del modal lo cerrará.
-
-![moni-morph-modal — close-on-click-outside=false](../assets/moni-morph-modal/closeOnClickOutside--false.png)
-
-![moni-morph-modal — close-on-click-outside=true](../assets/moni-morph-modal/closeOnClickOutside--true.png)
-
-### `close-on-esc`
-
-Si es true, presionar la tecla Escape cerrará el modal.
-
-![moni-morph-modal — close-on-esc=false](../assets/moni-morph-modal/closeOnEsc--false.png)
-
-![moni-morph-modal — close-on-esc=true](../assets/moni-morph-modal/closeOnEsc--true.png)
-
 ### `show-close-button`
 
 Si es true, muestra un botón de icono de cierre por defecto en el encabezado.
@@ -191,20 +166,6 @@ Si es true, muestra un botón de icono de cierre por defecto en el encabezado.
 
 ![moni-morph-modal — show-close-button=true](../assets/moni-morph-modal/showCloseButton--true.png)
 
-### `morph-label`
-
-Si es true, intenta fundir/transformar una etiqueta del disparador hacia el encabezado del modal.
-
-![moni-morph-modal — morph-label=false](../assets/moni-morph-modal/morphLabel--false.png)
-
-![moni-morph-modal — morph-label=true](../assets/moni-morph-modal/morphLabel--true.png)
-
-### `morph-label-selector`
-
-Un selector CSS personalizado utilizado para encontrar el elemento de etiqueta específico dentro del target a transformar.
-
-![moni-morph-modal — morph-label-selector=default](../assets/moni-morph-modal/morphLabelSelector--default.png)
-
 ### `has-backdrop`
 
 Si es true, renderiza un fondo atenuado detrás del modal.
@@ -213,22 +174,6 @@ Si es true, renderiza un fondo atenuado detrás del modal.
 
 ![moni-morph-modal — has-backdrop=true](../assets/moni-morph-modal/hasBackdrop--true.png)
 
-### `hide-target`
-
-Si es true, oculta el elemento disparador (target) mientras el modal está abierto.
-
-![moni-morph-modal — hide-target=false](../assets/moni-morph-modal/hideTarget--false.png)
-
-![moni-morph-modal — hide-target=true](../assets/moni-morph-modal/hideTarget--true.png)
-
-### `cover-target`
-
-Si es true, fuerza al modal a cubrir visualmente la ubicación original del target antes de expandirse.
-
-![moni-morph-modal — cover-target=false](../assets/moni-morph-modal/coverTarget--false.png)
-
-![moni-morph-modal — cover-target=true](../assets/moni-morph-modal/coverTarget--true.png)
-
 ### `auto-size`
 
 Si es true, el modal calcula automáticamente su tamaño final basándose en el contenido interno (ignora expandedWidth y expandedHeight).
@@ -236,19 +181,3 @@ Si es true, el modal calcula automáticamente su tamaño final basándose en el
 ![moni-morph-modal — auto-size=false](../assets/moni-morph-modal/autoSize--false.png)
 
 ![moni-morph-modal — auto-size=true](../assets/moni-morph-modal/autoSize--true.png)
-
-### `blur-content`
-
-Si es true, aplica un efecto de desenfoque (blur) al contenido durante la animación de entrada y salida.
-
-![moni-morph-modal — blur-content=false](../assets/moni-morph-modal/blurContent--false.png)
-
-![moni-morph-modal — blur-content=true](../assets/moni-morph-modal/blurContent--true.png)
-
-### `debug`
-
-Muestra en consola el origen, geometría y estrategia usada por cada morph.
-
-![moni-morph-modal — debug=false](../assets/moni-morph-modal/debug--false.png)
-
-![moni-morph-modal — debug=true](../assets/moni-morph-modal/debug--true.png)

package/docs/components/nav-item.md

@@ -130,12 +130,6 @@ Define `href`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el
 
 ![moni-nav-item — href=default](../assets/moni-nav-item/href--default.png)
 
-### `target`
-
-Define `target`. Conserva el tipo indicado y usa la propiedad JavaScript cuando el valor no sea una cadena.
-
-![moni-nav-item — target=default](../assets/moni-nav-item/target--default.png)
-
 ### `icon`
 
 Nombre de Material Symbol mostrado por el componente.

package/docs/components/side-sheet.md

@@ -141,8 +141,6 @@ Cada imagen se genera con el componente real: cambia solo la variable indicada y
 
 Controla si la superficie superpuesta está abierta.
 
-![moni-side-sheet — open=false](../assets/moni-side-sheet/open--false.png)
-
 ![moni-side-sheet — open=true](../assets/moni-side-sheet/open--true.png)
 
 ### `modal`

package/docs/components/snackbar.md

@@ -155,8 +155,6 @@ Alterne este atributo para mostrar/ocultar el snackbar. La transición CSS
 maneja la animación de desvanecimiento/deslizamiento hacia arriba (fade-in/slide-up) automáticamente.
 Los consumidores son responsables de implementar el temporizador de cierre automático.
 
-![moni-snackbar — active=false](../assets/moni-snackbar/active--false.png)
-
 ![moni-snackbar — active=true](../assets/moni-snackbar/active--true.png)
 
 ### `max-lines`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moni-labs/moni-ui",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "private": false,
   "type": "module",
   "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",

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-morph-modal.ts

@@ -109,7 +109,7 @@ interface MorphElements {
  *
  * @slot default - El contenido del cuerpo principal del modal.
  * @slot header  - Contenido de encabezado personalizado (sobrescribe el atributo `title`).
- * @slot actions - Botones de acción mostrados en la parte inferior derecha.
+ * @slot footer  - Botones de acción mostrados en la parte inferior derecha.
  */
 
 const litBool = {

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();
+	});
+})