@moni-labs/moni-ui 0.4.6 → 0.4.8

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":"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"}
+{"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 }
         });
@@ -429,6 +501,16 @@ let MoniTextField = 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' : ''}
@@ -517,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;CAqGf;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; }
@@ -319,8 +364,12 @@ let MoniTextarea = 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' : ''}
@@ -384,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);

package/docs/api.json

@@ -1,6 +1,6 @@
 {
   "package": "@moni-labs/moni-ui",
-  "generatedAt": "2026-08-21T19:54:17.603Z",
+  "generatedAt": "2026-08-21T22:33:56.605Z",
   "componentCount": 49,
   "components": [
     {
@@ -2998,6 +2998,33 @@
           "options": [],
           "reflect": true
         },
+        {
+          "name": "fullscreen",
+          "attribute": "fullscreen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Fuerza al modal expandido a ocupar todo el viewport.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "responsiveFullscreen",
+          "attribute": "responsive-fullscreen",
+          "type": "boolean",
+          "default": "false",
+          "description": "Activa fullscreen únicamente cuando el viewport no supera el breakpoint configurado.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "fullscreenBreakpoint",
+          "attribute": "fullscreen-breakpoint",
+          "type": "number",
+          "default": "600",
+          "description": "Ancho máximo del viewport, en píxeles, para aplicar responsive-fullscreen.",
+          "options": [],
+          "reflect": true
+        },
         {
           "name": "blurContent",
           "attribute": "blur-content",
@@ -3826,6 +3853,15 @@
           "options": [],
           "reflect": true
         },
+        {
+          "name": "required",
+          "attribute": "required",
+          "type": "boolean",
+          "default": "false",
+          "description": "Obliga a elegir una opción antes de enviar el formulario.\n\nEl `<input>` visible es de sólo lectura, así que la validación nativa no\nse aplica sobre él: la restricción se declara en el host con\n`ElementInternals.setValidity`, que es lo que mira el formulario.",
+          "options": [],
+          "reflect": true
+        },
         {
           "name": "loading",
           "attribute": "loading",
@@ -3972,7 +4008,18 @@
           "reflect": true
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "signature": "checkValidity(): boolean",
+          "description": "Método público checkValidity."
+        },
+        {
+          "name": "reportValidity",
+          "signature": "reportValidity(): boolean",
+          "description": "Método público reportValidity."
+        }
+      ],
       "events": [],
       "slots": [
         {
@@ -5264,7 +5311,7 @@
         {
           "name": "type",
           "attribute": "type",
-          "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'",
           "description": "El tipo de input HTML nativo.",
           "options": [
@@ -5274,7 +5321,13 @@
             "number",
             "tel",
             "url",
-            "search"
+            "search",
+            "date",
+            "time",
+            "datetime-local",
+            "month",
+            "week",
+            "color"
           ],
           "reflect": true
         },
@@ -5395,6 +5448,96 @@
           "options": [],
           "reflect": true
         },
+        {
+          "name": "required",
+          "attribute": "required",
+          "type": "boolean",
+          "default": "false",
+          "description": "Marca el campo como obligatorio y lo integra en la validación del formulario.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "type": "boolean",
+          "default": "false",
+          "description": "Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "autocomplete",
+          "attribute": "autocomplete",
+          "type": "string",
+          "default": "''",
+          "description": "Pista de autocompletado del navegador, por ejemplo `email` o `current-password`.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "inputmode",
+          "attribute": "inputmode",
+          "type": "string",
+          "default": "''",
+          "description": "Teclado virtual a mostrar en móvil, por ejemplo `numeric` o `tel`.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "maxlength",
+          "attribute": "maxlength",
+          "type": "number | null",
+          "default": "null",
+          "description": "Máximo de caracteres aceptados.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "minlength",
+          "attribute": "minlength",
+          "type": "number | null",
+          "default": "null",
+          "description": "Mínimo de caracteres aceptados.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "min",
+          "attribute": "min",
+          "type": "string",
+          "default": "''",
+          "description": "Valor mínimo para `number` y los tipos de fecha y hora.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "max",
+          "attribute": "max",
+          "type": "string",
+          "default": "''",
+          "description": "Valor máximo para `number` y los tipos de fecha y hora.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "step",
+          "attribute": "step",
+          "type": "string",
+          "default": "''",
+          "description": "Incremento para `number` y los tipos de fecha y hora.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "pattern",
+          "attribute": "pattern",
+          "type": "string",
+          "default": "''",
+          "description": "Expresión regular que debe cumplir el valor.",
+          "options": [],
+          "reflect": true
+        },
         {
           "name": "mask",
           "attribute": "mask",
@@ -5478,6 +5621,16 @@
           "name": "removeMask",
           "signature": "removeMask(): void",
           "description": "Método público removeMask."
+        },
+        {
+          "name": "checkValidity",
+          "signature": "checkValidity(): boolean",
+          "description": "Método público checkValidity."
+        },
+        {
+          "name": "reportValidity",
+          "signature": "reportValidity(): boolean",
+          "description": "Método público reportValidity."
         }
       ],
       "events": [
@@ -5676,6 +5829,42 @@
           "options": [],
           "reflect": true
         },
+        {
+          "name": "required",
+          "attribute": "required",
+          "type": "boolean",
+          "default": "false",
+          "description": "Marca el campo como obligatorio y lo integra en la validación del formulario.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "readonly",
+          "attribute": "readonly",
+          "type": "boolean",
+          "default": "false",
+          "description": "Impide editar el valor sin sacarlo del envío ni atenuarlo como `disabled`.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "minlength",
+          "attribute": "minlength",
+          "type": "number | null",
+          "default": "null",
+          "description": "Mínimo de caracteres aceptados.",
+          "options": [],
+          "reflect": true
+        },
+        {
+          "name": "autocomplete",
+          "attribute": "autocomplete",
+          "type": "string",
+          "default": "''",
+          "description": "Pista de autocompletado del navegador.",
+          "options": [],
+          "reflect": true
+        },
         {
           "name": "noCounter",
           "attribute": "no-counter",
@@ -5749,7 +5938,18 @@
           "reflect": true
         }
       ],
-      "methods": [],
+      "methods": [
+        {
+          "name": "checkValidity",
+          "signature": "checkValidity(): boolean",
+          "description": "Método público checkValidity."
+        },
+        {
+          "name": "reportValidity",
+          "signature": "reportValidity(): boolean",
+          "description": "Método público reportValidity."
+        }
+      ],
       "events": [],
       "slots": [],
       "cssParts": [