@moni-labs/moni-ui 0.4.5 → 0.4.7

package/dist/components/moni-select.js

@@ -111,6 +111,14 @@ let MoniSelect = class MoniSelect extends MoniElement {
          * @type {boolean}
          */
         this.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.
+         */
+        this.required = false;
         /**
          * Si es verdadero, muestra un indicador de carga (progreso lineal).
          * @type {boolean}
@@ -256,6 +264,42 @@ let MoniSelect = class MoniSelect extends MoniElement {
         };
         this._internals = this.attachInternals();
     }
+    /**
+     * 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() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    _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({});
+    }
     static { this.styles = [
         sharedStyles,
         fieldStyles,
@@ -634,6 +678,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
         if (changedProperties.has('value')) {
             this._internals?.setFormValue?.(this.value);
         }
+        this._syncValidity();
         if (changedProperties.has('_open') ||
             changedProperties.has('_drilldownPath') ||
             changedProperties.has('_searchQuery') ||
@@ -1535,6 +1580,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
         return html `<div class=${classMap(fieldClasses)} part="field">
 			${leading}
 			<input
+				id="input"
 				type="text"
 				part="input"
 				.value=${displayValue}
@@ -1549,6 +1595,7 @@ let MoniSelect = class MoniSelect extends MoniElement {
 			/>
 			${this.label
             ? html `<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label
@@ -1622,6 +1669,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], MoniSelect.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniSelect.prototype, "required", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], MoniSelect.prototype, "loading", void 0);

package/dist/components/moni-stepper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-stepper.d.ts","sourceRoot":"","sources":["../../src/components/moni-stepper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,WAAY,SAAQ,WAAW;IAE3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACX,OAAO,SAAK;IAGvD,OAAO,CAAC,MAAM,CAAc;IAE5B;;;;OAIG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,UAAU;IAgBlB,OAAgB,MAAM,4BAyBpB;IAEF;;;;;;;;;;;;OAYG;IACM,MAAM;IAMf;;;;OAIG;IACH,OAAO,CAAC,aAAa,CAGnB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"moni-stepper.d.ts","sourceRoot":"","sources":["../../src/components/moni-stepper.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,WAAY,SAAQ,WAAW;IAE3C,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IACX,OAAO,SAAK;IAGvD,OAAO,CAAC,MAAM,CAAc;IAE5B;;;;OAIG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACH,OAAO,CAAC,UAAU;IAoBlB,OAAgB,MAAM,4BAyBpB;IAEF;;;;;;;;;;;;OAYG;IACM,MAAM;IAMf;;;;OAIG;IACH,OAAO,CAAC,aAAa,CAGnB;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/moni-stepper.js

@@ -114,6 +114,10 @@ let MoniStepper = 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/dist/components/moni-text-field.d.ts

@@ -93,10 +93,10 @@ export declare class MoniTextField extends MoniElement {
     shape: 'round' | 'no-round';
     /**
      * 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'
      */
-    type: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
+    type: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'month' | 'week' | 'color';
     /**
      * Nombre del icono inicial (leading) (Material Symbols).
      * @type {string}
@@ -158,6 +158,26 @@ export declare class MoniTextField extends MoniElement {
      * @type {string}
      */
     placeholder: string;
+    /** Marca el campo como obligatorio y lo integra en la validación del formulario. */
+    required: boolean;
+    /** Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. */
+    readonly: boolean;
+    /** Pista de autocompletado del navegador, por ejemplo `email` o `current-password`. */
+    autocomplete: string;
+    /** Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`. */
+    inputmode: string;
+    /** Máximo de caracteres aceptados. */
+    maxlength: number | null;
+    /** Mínimo de caracteres aceptados. */
+    minlength: number | null;
+    /** Valor mínimo para `number` y los tipos de fecha y hora. */
+    min: string;
+    /** Valor máximo para `number` y los tipos de fecha y hora. */
+    max: string;
+    /** Incremento para `number` y los tipos de fecha y hora. */
+    step: string;
+    /** Expresión regular que debe cumplir el valor. */
+    pattern: string;
     /**
      * Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `|`,
      * cuantificadores `{n,m}` y los tokens `9`, `a`, `*` y `K` (RUT).
@@ -203,6 +223,29 @@ export declare class MoniTextField extends MoniElement {
      * @param changed - Mapa de los nombres de propiedades a sus valores anteriores que causaron esta actualización.
      */
     updated(changed: Map<string, unknown>): void;
+    /**
+     * 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;
+    get validationMessage(): string;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    private _syncValidity;
     private _handleInput;
     private _handleChange;
     disconnectedCallback(): void;

package/dist/components/moni-text-field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-text-field.d.ts","sourceRoot":"","sources":["../../src/components/moni-text-field.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,SAAS,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACrF,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAE1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,qBACa,aAAc,SAAQ,WAAW;IAC7C,MAAM,CAAC,cAAc,UAAQ;IAC7B,yFAAyF;IACzF,MAAM,CAAC,QAAQ,CAAC,SAAS,mBAAa;IACtC,OAAO,CAAC,UAAU,CAAmB;;IAOrC;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;;OAIG;IAEH,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,YAAY,CAAY;IAEzD;;;;OAIG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD;;;;OAIG;IAEH,KAAK,EAAE,OAAO,GAAG,UAAU,CAAc;IAEzC;;;;OAIG;IAEH,IAAI,EACD,MAAM,GACN,UAAU,GACV,OAAO,GACP,QAAQ,GACR,KAAK,GACL,KAAK,GACL,QAAQ,CAAU;IAErB;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IACsD,YAAY,SAAM;IAE3E;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;OAGG;IAC0B,MAAM,SAAM;IAEzC,8DAA8D;IACA,gBAAgB,SAAM;IAEpF,2CAA2C;IACoB,iBAAiB,SAAsB;IAE7F,OAAO,CAAC,cAAc,CAAS;IAExC;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IACmD,SAAS,SAAM;IAErE;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;OAGG;IAC0B,WAAW,SAAM;IAE9C;;;;OAIG;IAC0B,IAAI,SAAM;IAEvC,mGAAmG;IAC7C,SAAS,SAAM;IAErE,gGAAgG;IAWhG,WAAW,EAAE,gBAAgB,CAAM;IAEnC,sEAAsE;IACtE,IAAI,aAAa,IAAI,MAAM,CAE1B;IAEe,OAAO,CAAC,MAAM,CAAoB;IAClD,OAAO,CAAC,aAAa,CAAC,CAAoB;IAE1C,gEAAgE;IAChE,IAAI,iBAAiB,IAAI,iBAAiB,GAAG,SAAS,CAErD;IAED,uDAAuD;IACvD,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IACjC,UAAU,CAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,CAAC,EAAE,OAAO,GAAG,iBAAiB,GAAG,SAAS;IAQxF,YAAY,IAAI,MAAM;IAItB,cAAc,IAAI,OAAO;IAIzB,cAAc,IAAI,OAAO;IAIzB,WAAW,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO;IAIpC,eAAe,IAAI,OAAO;IAI1B,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,UAAQ,GAAG,MAAM,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE;IAI9F,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAUnC,UAAU,IAAI,IAAI;IAKlB,OAAO,CAAC,cAAc;IAoBtB;;;;;;;;;;;;OAYG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAgB9C,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,aAAa;IAQZ,oBAAoB;IAM7B,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,uBAAuB;IAK/B,OAAgB,MAAM,4BAiCnB;IAEH;;;;;;;;;;;;;;;;;;;;;OAqBG;IACM,MAAM;CA+Ff;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,iBAAiB,EAAE,aAAa,CAAC;KACjC;CACD;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"moni-text-field.d.ts","sourceRoot":"","sources":["../../src/components/moni-text-field.ts"],"names":[],"mappings":"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"}

package/dist/components/moni-text-field.js

@@ -104,7 +104,7 @@ let MoniTextField = class MoniTextField extends MoniElement {
         this.shape = 'no-round';
         /**
          * 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'
          */
         this.type = 'text';
@@ -169,6 +169,39 @@ let MoniTextField = class MoniTextField extends MoniElement {
          * @type {string}
          */
         this.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. */
+        this.required = false;
+        /** Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. */
+        this.readonly = false;
+        /** Pista de autocompletado del navegador, por ejemplo `email` o `current-password`. */
+        this.autocomplete = '';
+        /** Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`. */
+        this.inputmode = '';
+        /** Máximo de caracteres aceptados. */
+        this.maxlength = null;
+        /** Mínimo de caracteres aceptados. */
+        this.minlength = null;
+        /** Valor mínimo para `number` y los tipos de fecha y hora. */
+        this.min = '';
+        /** Valor máximo para `number` y los tipos de fecha y hora. */
+        this.max = '';
+        /** Incremento para `number` y los tipos de fecha y hora. */
+        this.step = '';
+        /** Expresión regular que debe cumplir el valor. */
+        this.pattern = '';
         /**
          * Patrón Inputmask. Admite opcionales `[]`, grupos `()`, alternadores `|`,
          * cuantificadores `{n,m}` y los tokens `9`, `a`, `*` y `K` (RUT).
@@ -274,10 +307,49 @@ let MoniTextField = 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() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    _syncValidity() {
+        if (!this._input || !this._internals?.setValidity)
+            return;
+        this._internals.setValidity(this._input.validity, this._input.validationMessage, this._input);
     }
     _handleInput(e) {
         const target = e.target;
         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 }
         });
@@ -424,10 +496,21 @@ let MoniTextField = class MoniTextField extends MoniElement {
         return html `<div class=${classMap(fieldClasses)} part="field">
 			${leading}
 			<input
+				id="input"
 				part="input"
 				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' : ''}
@@ -436,6 +519,7 @@ let MoniTextField = class MoniTextField extends MoniElement {
 			/>
 			${this.label
             ? html `<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label
@@ -515,6 +599,36 @@ __decorate([
 __decorate([
     property({ reflect: true })
 ], MoniTextField.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextField.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextField.prototype, "readonly", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "autocomplete", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "inputmode", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], MoniTextField.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], MoniTextField.prototype, "minlength", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "min", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "max", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "step", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextField.prototype, "pattern", void 0);
 __decorate([
     property({ reflect: true })
 ], MoniTextField.prototype, "mask", void 0);

package/dist/components/moni-textarea.d.ts

@@ -121,6 +121,14 @@ export declare class MoniTextarea extends MoniElement {
      * @type {number | null}
      */
     maxlength: number | null;
+    /** Marca el campo como obligatorio y lo integra en la validación del formulario. */
+    required: boolean;
+    /** Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. */
+    readonly: boolean;
+    /** Mínimo de caracteres aceptados. */
+    minlength: number | null;
+    /** Pista de autocompletado del navegador. */
+    autocomplete: string;
     /**
      * Oculta la visualización del contador de caracteres cuando se establece `maxlength`.
      * @type {boolean}
@@ -170,6 +178,25 @@ export declare class MoniTextarea extends MoniElement {
     private _handleInput;
     private _resizeTextarea;
     updated(changed: Map<string, unknown>): void;
+    /**
+     * 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;
+    get validationMessage(): string;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    private _syncValidity;
     static styles: import("lit").CSSResult[];
     /**
      * Renderiza el campo del área de texto con etiqueta, iconos de prefijo/sufijo y contador de caracteres.

package/dist/components/moni-textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-textarea.d.ts","sourceRoot":"","sources":["../../src/components/moni-textarea.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC5C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;;IAOrC;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;;OAIG;IAC0B,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvE;;;;OAIG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD;;;;OAIG;IAEH,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAc;IAEpD;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IACsD,YAAY,SAAM;IAE3E;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IACwC,IAAI,SAAK;IAEpD,mEAAmE;IACvB,QAAQ,UAAS;IAE7D,4FAA4F;IAC1B,OAAO,SAAK;IAE9E;;;;OAIG;IACwC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3E;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IACmD,SAAS,SAAM;IAErE;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;OAGG;IAC0B,WAAW,SAAM;IAE3B,OAAO,CAAC,MAAM,CAAuB;IACxD,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEhC,iBAAiB;IAKjB,oBAAoB;IAMpB,YAAY;IAKrB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAyBd,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAmB9C,OAAgB,MAAM,4BAEnB;IAEH;;;;;;;;;;;;OAYG;IACM,MAAM;CAmGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"moni-textarea.d.ts","sourceRoot":"","sources":["../../src/components/moni-textarea.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EAAE,WAAW,EAA6B,MAAM,kBAAkB,CAAC;AAC1E,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC5C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;;IAOrC;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;;OAIG;IAC0B,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAY;IAEvE;;;;OAIG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD;;;;OAIG;IAEH,KAAK,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,CAAc;IAEpD;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IACsD,YAAY,SAAM;IAE3E;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IACwC,IAAI,SAAK;IAEpD,mEAAmE;IACvB,QAAQ,UAAS;IAE7D,4FAA4F;IAC1B,OAAO,SAAK;IAE9E;;;;OAIG;IACwC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAQ3E,oFAAoF;IACxC,QAAQ,UAAS;IAE7D,iFAAiF;IACrC,QAAQ,UAAS;IAE7D,sCAAsC;IACK,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAE3E,6CAA6C;IAChB,YAAY,SAAM;IAE/C;;;OAGG;IAEH,SAAS,UAAS;IAElB;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IAC0B,MAAM,SAAM;IAEzC;;;;OAIG;IACmD,SAAS,SAAM;IAErE;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;OAGG;IAC0B,WAAW,SAAM;IAE3B,OAAO,CAAC,MAAM,CAAuB;IACxD,OAAO,CAAC,eAAe,CAAC,CAAiB;IAEhC,iBAAiB;IAKjB,oBAAoB;IAMpB,YAAY;IAKrB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,eAAe;IAyBd,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAoB9C;;;;;;OAMG;IACJ;;;;;;WAMI;IACH,IAAI,QAAQ,IAAI,aAAa,CAE5B;IAED,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,OAAO,CAAC,aAAa;IASrB,OAAgB,MAAM,4BAEnB;IAEH;;;;;;;;;;;;OAYG;IACM,MAAM;CAyGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}

package/dist/components/moni-textarea.js

@@ -131,6 +131,19 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
          * @type {number | null}
          */
         this.maxlength = 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. */
+        this.required = false;
+        /** Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`. */
+        this.readonly = false;
+        /** Mínimo de caracteres aceptados. */
+        this.minlength = null;
+        /** Pista de autocompletado del navegador. */
+        this.autocomplete = '';
         /**
          * Oculta la visualización del contador de caracteres cuando se establece `maxlength`.
          * @type {boolean}
@@ -232,6 +245,38 @@ let MoniTextarea = 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() {
+        return this._internals.validity;
+    }
+    get validationMessage() {
+        return this._internals.validationMessage;
+    }
+    checkValidity() {
+        return this._internals.checkValidity();
+    }
+    reportValidity() {
+        return this._internals.reportValidity();
+    }
+    _syncValidity() {
+        if (!this._input || !this._internals?.setValidity)
+            return;
+        this._internals.setValidity(this._input.validity, this._input.validationMessage, this._input);
     }
     static { this.styles = [sharedStyles, fieldStyles, css `
 		:host([autosize]) textarea { resize: none; }
@@ -315,11 +360,16 @@ let MoniTextarea = 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)}
+				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' : ''}
@@ -327,6 +377,7 @@ let MoniTextarea = class MoniTextarea extends MoniElement {
 			></textarea>
 			${this.label
             ? html `<label
+						for="input"
 						part="label"
 						class=${classMap({ active: isActive })}
 						>${this.label}</label
@@ -382,6 +433,18 @@ __decorate([
 __decorate([
     property({ type: Number, reflect: true })
 ], MoniTextarea.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextarea.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], MoniTextarea.prototype, "readonly", void 0);
+__decorate([
+    property({ type: Number, reflect: true })
+], MoniTextarea.prototype, "minlength", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTextarea.prototype, "autocomplete", void 0);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'no-counter' })
 ], MoniTextarea.prototype, "noCounter", void 0);