@moni-labs/moni-ui 0.4.6 → 0.4.7

package/docs/components/text-field.md

@@ -92,7 +92,7 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 | `variant` | `variant` | `'filled' \| 'outlined' \| 'underlined'` | `'filled'` | Variante visual del campo de texto. |
 | `size` | `size` | `'small' \| 'medium' \| 'large' \| 'extra'` | `'medium'` | Define las dimensiones del campo de texto. |
 | `shape` | `shape` | `'round' \| 'no-round'` | `'no-round'` | Forma del radio del borde (border-radius) del campo. |
-| `type` | `type` | `'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search'` | `'text'` | El tipo de input HTML nativo. |
+| `type` | `type` | `'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search' \| 'date' \| 'time' \| 'datetime-local' \| 'month' \| 'week' \| 'color'` | `'text'` | El tipo de input HTML nativo. |
 | `icon` | `icon` | `string` | `''` | Nombre del icono inicial (leading) (Material Symbols). |
 | `trailing-icon` | `trailingIcon` | `string` | `''` | Nombre del icono final (trailing) (Material Symbols). |
 | `prefix` | `prefix` | `string` | `''` | Prefijo de texto corto mostrado antes del valor del input. |
@@ -106,6 +106,16 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 | `disabled` | `disabled` | `boolean` | `false` | Deshabilita el campo de texto. |
 | `value` | `value` | `string` | `''` | El valor actual del input. |
 | `placeholder` | `placeholder` | `string` | `''` | Texto de marcador de posición (placeholder) mostrado cuando el input está vacío y la etiqueta es flotante. |
+| `required` | `required` | `boolean` | `false` | Marca el campo como obligatorio y lo integra en la validación del formulario. |
+| `readonly` | `readonly` | `boolean` | `false` | Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. |
+| `autocomplete` | `autocomplete` | `string` | `''` | Pista de autocompletado del navegador, por ejemplo `email` o `current-password`. |
+| `inputmode` | `inputmode` | `string` | `''` | Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`. |
+| `maxlength` | `maxlength` | `number \| null` | `null` | Máximo de caracteres aceptados. |
+| `minlength` | `minlength` | `number \| null` | `null` | Mínimo de caracteres aceptados. |
+| `min` | `min` | `string` | `''` | Valor mínimo para `number` y los tipos de fecha y hora. |
+| `max` | `max` | `string` | `''` | Valor máximo para `number` y los tipos de fecha y hora. |
+| `step` | `step` | `string` | `''` | Incremento para `number` y los tipos de fecha y hora. |
+| `pattern` | `pattern` | `string` | `''` | Expresión regular que debe cumplir el valor. |
 | `mask` | `mask` | `string` | `''` | Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `\|`, cuantificadores `{n,m}` y los tokens `9`, `a`, `*` y `K` (RUT). |
 | `mask-alias` | `maskAlias` | `string` | `''` | Alias integrado de Inputmask, por ejemplo `email`, `datetime`, `numeric`, `currency` o `ip`. |
 | `mask-options` | `maskOptions` | `InputmaskOptions` | `{}` | Opciones avanzadas de Inputmask. También acepta JSON mediante el atributo `mask-options`. |
@@ -131,6 +141,8 @@ Este componente no declara slots públicos.
 - `formatWithMask(value: string, metadata = false): string |` — Método público formatWithMask.
 - `setMaskedValue(value: string): void` — Método público setMaskedValue.
 - `removeMask(): void` — Método público removeMask.
+- `checkValidity(): boolean` — Método público checkValidity.
+- `reportValidity(): boolean` — Método público reportValidity.
 
 ## CSS Parts
 
@@ -216,6 +228,18 @@ El tipo de input HTML nativo.
 
 ![moni-text-field — type=search](../assets/moni-text-field/type--search.png)
 
+![moni-text-field — type=date](../assets/moni-text-field/type--date.png)
+
+![moni-text-field — type=time](../assets/moni-text-field/type--time.png)
+
+![moni-text-field — type=datetime-local](../assets/moni-text-field/type--datetime-local.png)
+
+![moni-text-field — type=month](../assets/moni-text-field/type--month.png)
+
+![moni-text-field — type=week](../assets/moni-text-field/type--week.png)
+
+![moni-text-field — type=color](../assets/moni-text-field/type--color.png)
+
 ### `icon`
 
 Nombre del icono inicial (leading) (Material Symbols).
@@ -301,6 +325,70 @@ Texto de marcador de posición (placeholder) mostrado cuando el input está vac
 
 ![moni-text-field — placeholder=default](../assets/moni-text-field/placeholder--default.png)
 
+### `required`
+
+Marca el campo como obligatorio y lo integra en la validación del formulario.
+
+![moni-text-field — required=false](../assets/moni-text-field/required--false.png)
+
+![moni-text-field — required=true](../assets/moni-text-field/required--true.png)
+
+### `readonly`
+
+Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`.
+
+![moni-text-field — readonly=false](../assets/moni-text-field/readonly--false.png)
+
+![moni-text-field — readonly=true](../assets/moni-text-field/readonly--true.png)
+
+### `autocomplete`
+
+Pista de autocompletado del navegador, por ejemplo `email` o `current-password`.
+
+![moni-text-field — autocomplete=default](../assets/moni-text-field/autocomplete--default.png)
+
+### `inputmode`
+
+Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`.
+
+![moni-text-field — inputmode=default](../assets/moni-text-field/inputmode--default.png)
+
+### `maxlength`
+
+Máximo de caracteres aceptados.
+
+![moni-text-field — maxlength=default](../assets/moni-text-field/maxlength--default.png)
+
+### `minlength`
+
+Mínimo de caracteres aceptados.
+
+![moni-text-field — minlength=default](../assets/moni-text-field/minlength--default.png)
+
+### `min`
+
+Valor mínimo para `number` y los tipos de fecha y hora.
+
+![moni-text-field — min=default](../assets/moni-text-field/min--default.png)
+
+### `max`
+
+Valor máximo para `number` y los tipos de fecha y hora.
+
+![moni-text-field — max=default](../assets/moni-text-field/max--default.png)
+
+### `step`
+
+Incremento para `number` y los tipos de fecha y hora.
+
+![moni-text-field — step=default](../assets/moni-text-field/step--default.png)
+
+### `pattern`
+
+Expresión regular que debe cumplir el valor.
+
+![moni-text-field — pattern=default](../assets/moni-text-field/pattern--default.png)
+
 ### `mask`
 
 Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `|`,

package/docs/components/textarea.md

@@ -97,6 +97,10 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 | `autosize` | `autosize` | `boolean` | `false` | Hace que el textarea crezca y se reduzca según su contenido. |
 | `max-rows` | `maxRows` | `number` | `0` | Número máximo de filas visibles cuando `autosize` está activo. Cero no impone límite. |
 | `maxlength` | `maxlength` | `number \| null` | `null` | Número máximo de caracteres permitidos en el área de texto. También habilita la visualización del contador de caracteres a menos que `noCounter` sea true. |
+| `required` | `required` | `boolean` | `false` | Marca el campo como obligatorio y lo integra en la validación del formulario. |
+| `readonly` | `readonly` | `boolean` | `false` | Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. |
+| `minlength` | `minlength` | `number \| null` | `null` | Mínimo de caracteres aceptados. |
+| `autocomplete` | `autocomplete` | `string` | `''` | Pista de autocompletado del navegador. |
 | `no-counter` | `noCounter` | `boolean` | `false` | Oculta la visualización del contador de caracteres cuando se establece `maxlength`. |
 | `loading` | `loading` | `boolean` | `false` | Si es true, muestra un indicador de carga (progreso circular) al final. |
 | `disabled` | `disabled` | `boolean` | `false` | Deshabilita el área de texto. |
@@ -116,7 +120,8 @@ No declara eventos propios.
 
 ## Métodos públicos
 
-No expone métodos públicos adicionales.
+- `checkValidity(): boolean` — Método público checkValidity.
+- `reportValidity(): boolean` — Método público reportValidity.
 
 ## CSS Parts
 
@@ -232,6 +237,34 @@ También habilita la visualización del contador de caracteres a menos que `noCo
 
 ![moni-textarea — maxlength=default](../assets/moni-textarea/maxlength--default.png)
 
+### `required`
+
+Marca el campo como obligatorio y lo integra en la validación del formulario.
+
+![moni-textarea — required=false](../assets/moni-textarea/required--false.png)
+
+![moni-textarea — required=true](../assets/moni-textarea/required--true.png)
+
+### `readonly`
+
+Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`.
+
+![moni-textarea — readonly=false](../assets/moni-textarea/readonly--false.png)
+
+![moni-textarea — readonly=true](../assets/moni-textarea/readonly--true.png)
+
+### `minlength`
+
+Mínimo de caracteres aceptados.
+
+![moni-textarea — minlength=default](../assets/moni-textarea/minlength--default.png)
+
+### `autocomplete`
+
+Pista de autocompletado del navegador.
+
+![moni-textarea — autocomplete=default](../assets/moni-textarea/autocomplete--default.png)
+
 ### `no-counter`
 
 Oculta la visualización del contador de caracteres cuando se establece `maxlength`.

package/package.json

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

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

@@ -266,6 +266,7 @@ export class MoniColorField extends MoniElement {
 				.value=${this.value}
 				?disabled=${this.disabled}
 				tabindex="-1"
+				aria-label=${ifDefined(this.label || undefined)}
 				@input=${this._onColorInput}
 				@change=${this._onColorChange}
 			/>

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

@@ -422,3 +422,37 @@ describe('moni-select · nombre accesible', () => {
 		el.remove();
 	});
 })
+
+describe('moni-select · required', () => {
+	/*
+	 * Su input visible es readonly y por tanto queda fuera de la validación de
+	 * restricciones, así que `required` se declara en el host.
+	 */
+	it('declara valueMissing mientras no haya valor', async () => {
+		// Igual que en text-field: jsdom no expone checkValidity() aquí.
+		const calls: Array<Record<string, unknown>> = [];
+		const originalAttach = HTMLElement.prototype.attachInternals;
+		HTMLElement.prototype.attachInternals = function spy(this: HTMLElement) {
+			const internals = originalAttach.call(this);
+			const setValidity = internals.setValidity.bind(internals);
+			internals.setValidity = ((flags, message, anchor) => {
+				calls.push({ valueMissing: flags?.valueMissing === true });
+				return setValidity(flags, message, anchor);
+			}) as typeof internals.setValidity;
+			return internals;
+		};
+		const el = document.createElement('moni-select') as MoniSelect;
+		HTMLElement.prototype.attachInternals = originalAttach;
+
+		el.required = true;
+		document.body.appendChild(el);
+		await el.updateComplete;
+		expect(calls.some((c) => c.valueMissing === true)).toBe(true);
+
+		calls.length = 0;
+		el.value = 'uno';
+		await el.updateComplete;
+		expect(calls.at(-1)).toEqual({ valueMissing: false });
+		el.remove();
+	});
+})

package/src/components/moni-select.ts

@@ -158,6 +158,15 @@ export class MoniSelect extends MoniElement {
 	 */
 	@property({ type: Boolean, reflect: true }) disabled = false;
 
+	/**
+	 * Obliga a elegir una opción antes de enviar el formulario.
+	 *
+	 * El `<input>` visible es de sólo lectura, así que la validación nativa no
+	 * se aplica sobre él: la restricción se declara en el host con
+	 * `ElementInternals.setValidity`, que es lo que mira el formulario.
+	 */
+	@property({ type: Boolean, reflect: true }) required = false;
+
 	/**
 	 * Si es verdadero, muestra un indicador de carga (progreso lineal).
 	 * @type {boolean}
@@ -281,6 +290,50 @@ export class MoniSelect extends MoniElement {
 
 	@query('slot') private _slot!: HTMLSlotElement;
 	@query('input') private _input!: HTMLInputElement;
+
+	/**
+	 * Declara la validez del host según `required`.
+	 *
+	 * No se puede delegar en el `<input>` interno porque es `readonly`, y un
+	 * campo de sólo lectura queda excluido de la validación de restricciones. El
+	 * ancla sigue siendo ese input para que el navegador tenga dónde mostrar el
+	 * mensaje y a dónde llevar el foco.
+	 */
+/**
+	 * API de validación equivalente a la de un control nativo.
+	 *
+	 * Los elementos form-associated participan en la validación del formulario,
+	 * pero no reciben estos miembros automáticamente: hay que exponerlos para que
+	 * un `moni-select` se pueda interrogar igual que un `<input>`.
+	 */
+	get validity(): ValidityState {
+		return this._internals.validity;
+	}
+
+	get validationMessage(): string {
+		return this._internals.validationMessage;
+	}
+
+	checkValidity(): boolean {
+		return this._internals.checkValidity();
+	}
+
+	reportValidity(): boolean {
+		return this._internals.reportValidity();
+	}
+
+	private _syncValidity() {
+		if (!this._internals?.setValidity) return;
+		if (this.required && !this.value) {
+			this._internals.setValidity(
+				{ valueMissing: true },
+				'Selecciona una opción.',
+				this._input ?? undefined
+			);
+			return;
+		}
+		this._internals.setValidity({});
+	}
 	@query('.dropdown-menu') private _menu?: HTMLElement;
 
 	static override styles = [
@@ -664,6 +717,7 @@ export class MoniSelect extends MoniElement {
 		if (changedProperties.has('value')) {
 			this._internals?.setFormValue?.(this.value);
 		}
+		this._syncValidity();
 		if (
 			changedProperties.has('_open') ||
 			changedProperties.has('_drilldownPath') ||

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

@@ -254,3 +254,81 @@ describe('moni-text-field · nombre accesible', () => {
 		el.remove();
 	});
 })
+
+describe('moni-text-field · restricciones nativas', () => {
+	/*
+	 * El componente sólo reenviaba type/placeholder/disabled/value/name, así que
+	 * cualquier campo con `required` o `autocomplete` tenía que renunciar a
+	 * moni-ui y usar un input nativo.
+	 */
+	it('reenvía las restricciones al input interno', async () => {
+		const el = document.createElement('moni-text-field') as HTMLElement & {
+			updateComplete: Promise<unknown>;
+			[key: string]: unknown;
+		};
+		Object.assign(el, {
+			label: 'Correo',
+			type: 'email',
+			required: true,
+			autocomplete: 'email',
+			maxlength: 40,
+			minlength: 5,
+			pattern: '.+@.+',
+			inputmode: 'email'
+		});
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		const input = el.shadowRoot?.querySelector('input') as HTMLInputElement;
+		expect(input.required).toBe(true);
+		expect(input.getAttribute('autocomplete')).toBe('email');
+		expect(input.maxLength).toBe(40);
+		expect(input.minLength).toBe(5);
+		expect(input.getAttribute('pattern')).toBe('.+@.+');
+		expect(input.getAttribute('inputmode')).toBe('email');
+		el.remove();
+	});
+
+	it('acepta los tipos de fecha y hora', async () => {
+		const el = document.createElement('moni-text-field') as HTMLElement & {
+			type: string;
+			updateComplete: Promise<unknown>;
+		};
+		el.type = 'date';
+		document.body.appendChild(el);
+		await el.updateComplete;
+		expect(el.shadowRoot?.querySelector('input')?.getAttribute('type')).toBe('date');
+		el.remove();
+	});
+
+	it('publica la validez en el host para que el formulario la vea', async () => {
+		// jsdom no implementa checkValidity() en custom elements form-associated,
+		// así que se observa la llamada a setValidity. El bloqueo real del envío
+		// se verifica en navegador.
+		const calls: Array<Record<string, unknown>> = [];
+		const originalAttach = HTMLElement.prototype.attachInternals;
+		HTMLElement.prototype.attachInternals = function spy(this: HTMLElement) {
+			const internals = originalAttach.call(this);
+			const setValidity = internals.setValidity.bind(internals);
+			internals.setValidity = ((flags, message, anchor) => {
+				// ValidityState expone sus flags como getters del prototipo, así que un
+				// spread devolvería {}: hay que leerlas uña a uña.
+				calls.push({ valueMissing: flags?.valueMissing === true });
+				return setValidity(flags, message, anchor);
+			}) as typeof internals.setValidity;
+			return internals;
+		};
+		const el = document.createElement('moni-text-field') as HTMLElement & {
+			required: boolean;
+			updateComplete: Promise<unknown>;
+		};
+		HTMLElement.prototype.attachInternals = originalAttach;
+
+		el.required = true;
+		document.body.appendChild(el);
+		await el.updateComplete;
+
+		expect(calls.some((c) => c.valueMissing === true)).toBe(true);
+		el.remove();
+	});
+})

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

@@ -114,7 +114,7 @@ export class MoniTextField extends MoniElement {
 
 	/**
 	 * El tipo de input HTML nativo.
-	 * @type {'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search'}
+	 * @type {'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color'}
 	 * @default 'text'
 	 */
 	@property({ reflect: true })
@@ -125,7 +125,13 @@ export class MoniTextField extends MoniElement {
 		| 'number'
 		| 'tel'
 		| 'url'
-		| 'search' = 'text';
+		| 'search'
+		| 'date'
+		| 'time'
+		| 'datetime-local'
+		| 'month'
+		| 'week'
+		| 'color' = 'text';
 
 	/**
 	 * Nombre del icono inicial (leading) (Material Symbols).
@@ -202,6 +208,50 @@ export class MoniTextField extends MoniElement {
 	 */
 	@property({ reflect: true }) placeholder = '';
 
+	/*
+	 * Restricciones nativas.
+	 *
+	 * Antes ninguna de estas llegaba al `<input>` interno: el componente sólo
+	 * reenviaba `type`, `placeholder`, `disabled`, `value` y `name`. Eso dejaba
+	 * fuera el autocompletado de contraseñas, el teclado correcto en móvil, el
+	 * límite de caracteres y toda la validación de restricciones, así que cada
+	 * consumidor que necesitaba una de ellas tenía que renunciar al componente y
+	 * usar un input nativo.
+	 *
+	 * Se reflejan al host además de reenviarse para que `[required]` y compañía
+	 * puedan usarse como selectores CSS desde fuera.
+	 */
+
+	/** Marca el campo como obligatorio y lo integra en la validación del formulario. */
+	@property({ type: Boolean, reflect: true }) required = false;
+
+	/** Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. */
+	@property({ type: Boolean, reflect: true }) readonly = false;
+
+	/** Pista de autocompletado del navegador, por ejemplo `email` o `current-password`. */
+	@property({ reflect: true }) autocomplete = '';
+
+	/** Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`. */
+	@property({ reflect: true }) inputmode = '';
+
+	/** Máximo de caracteres aceptados. */
+	@property({ type: Number, reflect: true }) maxlength: number | null = null;
+
+	/** Mínimo de caracteres aceptados. */
+	@property({ type: Number, reflect: true }) minlength: number | null = null;
+
+	/** Valor mínimo para `number` y los tipos de fecha y hora. */
+	@property({ reflect: true }) min = '';
+
+	/** Valor máximo para `number` y los tipos de fecha y hora. */
+	@property({ reflect: true }) max = '';
+
+	/** Incremento para `number` y los tipos de fecha y hora. */
+	@property({ reflect: true }) step = '';
+
+	/** Expresión regular que debe cumplir el valor. */
+	@property({ reflect: true }) pattern = '';
+
 	/**
 	 * Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `|`,
 	 * cuantificadores `{n,m}` y los tokens `9`, `a`, `*` y `K` (RUT).
@@ -334,11 +384,58 @@ export class MoniTextField extends MoniElement {
 			}
 			if (changed.has('disabled')) this._input.disabled = this.disabled;
 		}
+		this._syncValidity();
+	}
+
+	/**
+	 * Copia la validez del `<input>` interno al host.
+	 *
+	 * Reenviar `required` o `pattern` no basta: el navegador valida el
+	 * formulario mirando los controles asociados a él, y el que aquí participa
+	 * es el host, no el input del Shadow DOM. Sin este puente el campo se
+	 * pintaría como obligatorio pero el envío no se detendría.
+	 *
+	 * El tercer argumento ancla el globo de validación al input real, para que
+	 * el navegador tenga dónde mostrarlo y a dónde mover el foco.
+	 */
+/**
+	 * API de validación equivalente a la de un control nativo.
+	 *
+	 * Los elementos form-associated participan en la validación del formulario,
+	 * pero no reciben estos miembros automáticamente: hay que exponerlos para que
+	 * un `moni-text-field` se pueda interrogar igual que un `<input>`.
+	 */
+	get validity(): ValidityState {
+		return this._internals.validity;
+	}
+
+	get validationMessage(): string {
+		return this._internals.validationMessage;
+	}
+
+	checkValidity(): boolean {
+		return this._internals.checkValidity();
+	}
+
+	reportValidity(): boolean {
+		return this._internals.reportValidity();
+	}
+
+	private _syncValidity() {
+		if (!this._input || !this._internals?.setValidity) return;
+		this._internals.setValidity(
+			this._input.validity,
+			this._input.validationMessage,
+			this._input
+		);
 	}
 
 	private _handleInput(e: Event) {
 		const target = e.target as HTMLInputElement;
 		this.value = target.value;
+		// Al teclear, `value` no siempre cambia de referencia (máscaras), así que
+		// la validez se refresca aquí y no sólo desde `updated()`.
+		this._syncValidity();
 		emitMoniEvent(this, 'moni-input', {
 			detail: { value: this.value, unmaskedValue: this.unmaskedValue, originalEvent: e }
 		});
@@ -499,6 +596,16 @@ export class MoniTextField extends MoniElement {
 				type=${this.type}
 				placeholder=${placeholder}
 				?disabled=${this.disabled}
+				?required=${this.required}
+				?readonly=${this.readonly}
+				autocomplete=${ifDefined(this.autocomplete || undefined)}
+				inputmode=${ifDefined(this.inputmode || undefined)}
+				maxlength=${ifDefined(this.maxlength ?? undefined)}
+				minlength=${ifDefined(this.minlength ?? undefined)}
+				min=${ifDefined(this.min || undefined)}
+				max=${ifDefined(this.max || undefined)}
+				step=${ifDefined(this.step || undefined)}
+				pattern=${ifDefined(this.pattern || undefined)}
 				.value=${this.value}
 				name=${ifDefined(this.name || undefined)}
 				class=${isActive ? 'active' : ''}

package/src/components/moni-textarea.ts

@@ -148,6 +148,24 @@ export class MoniTextarea extends MoniElement {
 	 */
 	@property({ type: Number, reflect: true }) maxlength: number | null = null;
 
+	/*
+	 * Restricciones nativas. Antes sólo `maxlength` llegaba al `<textarea>`
+	 * interno, así que un campo obligatorio o de sólo lectura obligaba a
+	 * abandonar el componente y usar un control nativo.
+	 */
+
+	/** Marca el campo como obligatorio y lo integra en la validación del formulario. */
+	@property({ type: Boolean, reflect: true }) required = false;
+
+	/** Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. */
+	@property({ type: Boolean, reflect: true }) readonly = false;
+
+	/** Mínimo de caracteres aceptados. */
+	@property({ type: Number, reflect: true }) minlength: number | null = null;
+
+	/** Pista de autocompletado del navegador. */
+	@property({ reflect: true }) autocomplete = '';
+
 	/**
 	 * Oculta la visualización del contador de caracteres cuando se establece `maxlength`.
 	 * @type {boolean}
@@ -266,6 +284,46 @@ export class MoniTextarea extends MoniElement {
 				changed.has('maxRows')
 			) this._resizeTextarea();
 		}
+		this._syncValidity();
+	}
+
+	/**
+	 * Copia la validez del `<textarea>` interno al host.
+	 *
+	 * El navegador valida mirando los controles asociados al formulario, y el
+	 * que participa es el host, no el control del Shadow DOM: sin este puente
+	 * `required` se pintaría pero no detendría el envío.
+	 */
+/**
+	 * API de validación equivalente a la de un control nativo.
+	 *
+	 * Los elementos form-associated participan en la validación del formulario,
+	 * pero no reciben estos miembros automáticamente: hay que exponerlos para que
+	 * un `moni-textarea` se pueda interrogar igual que un `<input>`.
+	 */
+	get validity(): ValidityState {
+		return this._internals.validity;
+	}
+
+	get validationMessage(): string {
+		return this._internals.validationMessage;
+	}
+
+	checkValidity(): boolean {
+		return this._internals.checkValidity();
+	}
+
+	reportValidity(): boolean {
+		return this._internals.reportValidity();
+	}
+
+	private _syncValidity() {
+		if (!this._input || !this._internals?.setValidity) return;
+		this._internals.setValidity(
+			this._input.validity,
+			this._input.validationMessage,
+			this._input
+		);
 	}
 
 	static override styles = [sharedStyles, fieldStyles, css`
@@ -361,8 +419,12 @@ export class MoniTextarea extends MoniElement {
 				part="input"
 				rows=${this.rows}
 				maxlength=${ifDefined(this.maxlength ?? undefined)}
+				minlength=${ifDefined(this.minlength ?? undefined)}
 				placeholder=${placeholder}
 				?disabled=${this.disabled}
+				?required=${this.required}
+				?readonly=${this.readonly}
+				autocomplete=${ifDefined(this.autocomplete || undefined)}
 				.value=${this.value}
 				name=${ifDefined(this.name || undefined)}
 				class=${isActive ? 'active' : ''}