@moni-labs/moni-ui 0.4.6 → 0.4.7

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-21T21:03:00.175Z",
   "componentCount": 49,
   "components": [
     {
@@ -3826,6 +3826,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 +3981,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 +5284,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 +5294,13 @@
             "number",
             "tel",
             "url",
-            "search"
+            "search",
+            "date",
+            "time",
+            "datetime-local",
+            "month",
+            "week",
+            "color"
           ],
           "reflect": true
         },
@@ -5395,6 +5421,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 +5594,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 +5802,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 +5911,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": [

package/docs/components/select.md

@@ -96,6 +96,7 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 | `size` | `size` | `'small' \| 'medium' \| 'large' \| 'extra'` | `'medium'` | Define las dimensiones del campo select. |
 | `shape` | `shape` | `'round' \| 'square' \| 'no-round'` | `'no-round'` | Forma (radio de borde) del campo. |
 | `disabled` | `disabled` | `boolean` | `false` | Deshabilita el campo select. |
+| `required` | `required` | `boolean` | `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. |
 | `loading` | `loading` | `boolean` | `false` | Si es verdadero, muestra un indicador de carga (progreso lineal). |
 | `helper` | `helper` | `string` | `''` | Texto de ayuda mostrado debajo del campo. |
 | `error-text` | `errorText` | `string` | `''` | Texto de error mostrado debajo del campo cuando `error` es true. Reemplaza al texto de ayuda. |
@@ -122,7 +123,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
 
@@ -205,6 +207,18 @@ Deshabilita el campo select.
 
 ![moni-select — disabled=true](../assets/moni-select/disabled--true.png)
 
+### `required`
+
+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.
+
+![moni-select — required=false](../assets/moni-select/required--false.png)
+
+![moni-select — required=true](../assets/moni-select/required--true.png)
+
 ### `loading`
 
 Si es verdadero, muestra un indicador de carga (progreso lineal).