@moni-labs/moni-ui 0.4.6 → 0.4.8

package/docs/components/morph-modal.md

@@ -65,6 +65,9 @@ Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses
 | `hide-target` | `hideTarget` | `boolean` | `false` | Si es true, oculta el elemento disparador (target) mientras el modal está abierto. |
 | `cover-target` | `coverTarget` | `boolean` | `false` | Si es true, fuerza al modal a cubrir visualmente la ubicación original del target antes de expandirse. |
 | `auto-size` | `autoSize` | `boolean` | `false` | Si es true, el modal calcula automáticamente su tamaño final basándose en el contenido interno (ignora expandedWidth y expandedHeight). |
+| `fullscreen` | `fullscreen` | `boolean` | `false` | Fuerza al modal expandido a ocupar todo el viewport. |
+| `responsive-fullscreen` | `responsiveFullscreen` | `boolean` | `false` | Activa fullscreen únicamente cuando el viewport no supera el breakpoint configurado. |
+| `fullscreen-breakpoint` | `fullscreenBreakpoint` | `number` | `600` | Ancho máximo del viewport, en píxeles, para aplicar responsive-fullscreen. |
 | `blur-content` | `blurContent` | `boolean` | `false` | Si es true, aplica un efecto de desenfoque (blur) al contenido durante la animación de entrada y salida. |
 | `debug` | `debug` | `boolean` | `false` | Muestra en consola el origen, geometría y estrategia usada por cada morph. |
 

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).

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,90 +1,90 @@
-{
-  "name": "@moni-labs/moni-ui",
-  "version": "0.4.6",
-  "private": false,
-  "type": "module",
-  "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "customElements": "custom-elements.json",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./web-components": {
-      "types": "./dist/web-components.d.ts",
-      "import": "./dist/web-components.js"
-    },
-    "./browser": "./dist/browser/moni-ui.min.js",
-    "./browser.css": "./dist/browser/moni-ui.min.css",
-    "./cdn/importmap": "./dist/cdn/importmap.json",
-    "./cdn/*": "./dist/cdn/components/moni-*.js",
-    "./styles": "./dist/styles/index.css",
-    "./styles/*": "./dist/styles/*",
-    "./components/*.ts": "./src/components/*.ts",
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
-    },
-    "./actions/*": {
-      "types": "./dist/actions/*.d.ts",
-      "import": "./dist/actions/*.js"
-    },
-    "./utils/*": {
-      "types": "./dist/utils/*.d.ts",
-      "import": "./dist/utils/*.js"
-    }
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "unpkg": "./dist/browser/moni-ui.iife.min.js",
-  "jsdelivr": "./dist/browser/moni-ui.iife.min.js",
-  "files": [
-    "dist",
-    "src",
-    "docs",
-    "custom-elements.json",
-    "README.md",
-    "package.json"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/moni-spa/moni-ui.git"
-  },
-  "bugs": {
-    "url": "https://github.com/moni-spa/moni-ui/issues"
-  },
-  "homepage": "https://github.com/moni-spa/moni-ui#readme",
-  "peerDependencies": {
-    "svelte": "^5.55.2",
-    "tailwindcss": "^4.2.2"
-  },
-  "dependencies": {
-    "@material/material-color-utilities": "^0.4.0",
-    "gsap": "^3.12.7",
-    "inputmask": "^5.0.9",
-    "lit": "^3.3.3"
-  },
-  "devDependencies": {
-    "@custom-elements-manifest/analyzer": "^0.11.0",
-    "@tailwindcss/vite": "^4.3.1",
-    "jsdom": "^29.1.1",
-    "lightningcss": "^1.33.0",
-    "typescript": "^6.0.3",
-    "vite": "^8.0.16",
-    "vitest": "^4.1.8"
-  },
-  "scripts": {
-    "build": "node scripts/build.js",
-    "docs": "node scripts/generate-docs.mjs",
-    "docs:capture": "node scripts/capture-docs.mjs",
-    "docs:all": "npm run build && npm run docs && npm run docs:capture",
-    "docs:check": "node scripts/generate-docs.mjs --check",
-    "analyze": "custom-elements-manifest analyze",
-    "test": "vitest run",
-    "test:verbose": "vitest run --reporter=verbose",
-    "test:watch": "vitest"
-  }
-}
+{
+  "name": "@moni-labs/moni-ui",
+	"version": "0.4.8",
+  "private": false,
+  "type": "module",
+  "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "customElements": "custom-elements.json",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./web-components": {
+      "types": "./dist/web-components.d.ts",
+      "import": "./dist/web-components.js"
+    },
+    "./browser": "./dist/browser/moni-ui.min.js",
+    "./browser.css": "./dist/browser/moni-ui.min.css",
+    "./cdn/importmap": "./dist/cdn/importmap.json",
+    "./cdn/*": "./dist/cdn/components/moni-*.js",
+    "./styles": "./dist/styles/index.css",
+    "./styles/*": "./dist/styles/*",
+    "./components/*.ts": "./src/components/*.ts",
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./actions/*": {
+      "types": "./dist/actions/*.d.ts",
+      "import": "./dist/actions/*.js"
+    },
+    "./utils/*": {
+      "types": "./dist/utils/*.d.ts",
+      "import": "./dist/utils/*.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "unpkg": "./dist/browser/moni-ui.iife.min.js",
+  "jsdelivr": "./dist/browser/moni-ui.iife.min.js",
+  "files": [
+    "dist",
+    "src",
+    "docs",
+    "custom-elements.json",
+    "README.md",
+    "package.json"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/moni-spa/moni-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/moni-spa/moni-ui/issues"
+  },
+  "homepage": "https://github.com/moni-spa/moni-ui#readme",
+  "peerDependencies": {
+    "svelte": "^5.55.2",
+    "tailwindcss": "^4.2.2"
+  },
+  "dependencies": {
+    "@material/material-color-utilities": "^0.4.0",
+    "gsap": "^3.12.7",
+    "inputmask": "^5.0.9",
+    "lit": "^3.3.3"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@tailwindcss/vite": "^4.3.1",
+    "jsdom": "^29.1.1",
+    "lightningcss": "^1.33.0",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.8"
+  },
+  "scripts": {
+    "build": "node scripts/build.js",
+    "docs": "node scripts/generate-docs.mjs",
+    "docs:capture": "node scripts/capture-docs.mjs",
+    "docs:all": "npm run build && npm run docs && npm run docs:capture",
+    "docs:check": "node scripts/generate-docs.mjs --check",
+    "analyze": "custom-elements-manifest analyze",
+    "test": "vitest run",
+    "test:verbose": "vitest run --reporter=verbose",
+    "test:watch": "vitest"
+  }
+}

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

@@ -117,6 +117,32 @@ describe('moni-morph-modal', () => {
 		expect(el.hasAttribute('open')).toBe(true);
 	});
 
+	it('ocupa todo el viewport cuando fullscreen está activo', async () => {
+		el.fullscreen = true;
+		await el.updateComplete;
+		const rect = (el as unknown as { _computeFinalRect: (target: DOMRect) => DOMRect })
+			._computeFinalRect(new DOMRect(24, 700, 56, 56));
+
+		expect(el.hasAttribute('fullscreen')).toBe(true);
+		expect(rect.x).toBe(0);
+		expect(rect.y).toBe(0);
+		expect(rect.width).toBe(window.innerWidth);
+		expect(rect.height).toBe(window.innerHeight);
+		expect(el.shadowRoot?.querySelector('.panel')?.classList.contains('fullscreen')).toBe(true);
+	});
+
+	it('aplica fullscreen responsive sólo bajo el breakpoint', () => {
+		el.responsiveFullscreen = true;
+		el.fullscreenBreakpoint = 600;
+		const usesFullscreen = () => (el as unknown as { _usesFullscreen: () => boolean })._usesFullscreen();
+
+		vi.stubGlobal('innerWidth', 480);
+		expect(usesFullscreen()).toBe(true);
+		vi.stubGlobal('innerWidth', 900);
+		expect(usesFullscreen()).toBe(false);
+		vi.unstubAllGlobals();
+	});
+
 	it('proyecta el contenido del slot por defecto', async () => {
 		const content = document.createElement('p');
 		content.textContent = 'Hello';

package/src/components/moni-morph-modal.ts

@@ -229,6 +229,18 @@ export class MoniMorphModal extends MoniElement {
 	@property({ type: Boolean, reflect: true, attribute: 'auto-size', converter: litBool })
 	autoSize = false;
 
+	/** Fuerza al modal expandido a ocupar todo el viewport. */
+	@property({ type: Boolean, reflect: true, converter: litBool })
+	fullscreen = false;
+
+	/** Activa fullscreen únicamente cuando el viewport no supera el breakpoint configurado. */
+	@property({ type: Boolean, reflect: true, attribute: 'responsive-fullscreen', converter: litBool })
+	responsiveFullscreen = false;
+
+	/** Ancho máximo del viewport, en píxeles, para aplicar responsive-fullscreen. */
+	@property({ type: Number, reflect: true, attribute: 'fullscreen-breakpoint' })
+	fullscreenBreakpoint = 600;
+
 	/**
 	 * Si es true, aplica un efecto de desenfoque (blur) al contenido durante la animación de entrada y salida.
 	 * @type {boolean}
@@ -1896,9 +1908,15 @@ export class MoniMorphModal extends MoniElement {
 		el.style.height = `${rect.height}px`;
 	}
 
+	private _usesFullscreen(): boolean {
+		if (this.fullscreen) return true;
+		return this.responsiveFullscreen && typeof window !== 'undefined' && window.innerWidth <= this.fullscreenBreakpoint;
+	}
+
 	private _computeFinalRect(targetRect: DOMRect, naturalSize?: { width: number; height: number }): DOMRect {
 		const vw = window.innerWidth;
 		const vh = window.innerHeight;
+		if (this._usesFullscreen()) return new DOMRect(0, 0, vw, vh);
 		const padding = 16;
 
 		let width = this.autoSize && naturalSize ? naturalSize.width : this._parseSize(this.expandedWidth, vw);
@@ -2082,6 +2100,19 @@ export class MoniMorphModal extends MoniElement {
 				z-index: var(--_z-index, 100);
 			}
 
+			.panel.fullscreen {
+				border-radius: 0;
+				box-shadow: none;
+			}
+
+			.panel.fullscreen header {
+				padding-block-start: max(1.25rem, env(safe-area-inset-top));
+			}
+
+			.panel.fullscreen footer {
+				padding-block-end: max(1.5rem, env(safe-area-inset-bottom));
+			}
+
 			.panel-inner {
 				display: flex;
 				flex-direction: column;
@@ -2191,6 +2222,7 @@ export class MoniMorphModal extends MoniElement {
 	override render() {
 		const visible = this._visible || this.open;
 		const headerEmpty = !this._hasHeader && !this.showCloseButton;
+		const fullscreen = this._usesFullscreen();
 		return html`
 			${this.hasBackdrop ? html`
 				<div
@@ -2199,7 +2231,7 @@ export class MoniMorphModal extends MoniElement {
 					style="${!this.modal ? 'background-color: transparent;' : ''}"
 				></div>
 			` : ''}
-			<div class="panel" part="panel">
+			<div class="panel ${fullscreen ? 'fullscreen' : ''}" part="panel">
 				<div class="panel-inner" part="panel-inner">
 					<header
 						class="${headerEmpty ? 'is-empty' : ''}"

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