@moni-labs/moni-ui 0.3.0 → 0.3.2

package/dist/components/moni-dialog.js

@@ -13,121 +13,137 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
+import { emitMoniEvent } from '../utils/event-emitter.js';
 /**
- * Material Design 3 Dialog component.
+ * Componente Material Design 3 Dialog (Diálogo).
  *
- * Dialogs inform users about a task and can contain critical information,
- * require decisions, or involve multiple tasks. They interrupt the user's
- * workflow and should be used sparingly.
+ * Los diálogos informan a los usuarios sobre una tarea y pueden contener información crítica,
+ * requerir decisiones o implicar múltiples tareas. Interrumpen el flujo de trabajo del
+ * usuario y deben usarse con moderación.
  *
- * **M3 spec reference:** `m3-docs/components/dialogs/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/dialogs/specs.md`
  *
- * **Implementation note — native `<dialog>` element:**
- * This component wraps the native `<dialog>` HTML element. Opening and closing
- * are controlled via the `open` attribute (and its JS property). The component
- * syncs `open` changes to the native `<dialog>` in `updated()`:
- * - `modal=true` → calls `dialog.showModal()` (blocks focus, adds backdrop).
- * - `modal=false` → calls `dialog.show()` (non-blocking, no backdrop).
- * - `open=false` → calls `dialog.close()`.
+ * **Nota de implementación — elemento nativo `<dialog>`:**
+ * Este componente envuelve el elemento HTML nativo `<dialog>`. La apertura y cierre
+ * se controlan mediante el atributo `open` (y su propiedad JS). El componente
+ * sincroniza los cambios de `open` al `<dialog>` nativo en `updated()`:
+ * - `modal=true` → llama a `dialog.showModal()` (bloquea el foco, añade fondo oscuro).
+ * - `modal=false` → llama a `dialog.show()` (no bloquea, sin fondo oscuro).
+ * - `open=false` → llama a `dialog.close()`.
  *
- * **Placement (`side` attribute):**
- * - `center` (default) — Centered in the viewport. Standard M3 dialog.
- * - `top`, `right`, `bottom`, `left` — Edge-anchored panels (side sheet pattern).
- * - `max` — Full-screen dialog for complex flows.
+ * **Colocación (atributo `side`):**
+ * - `center` (por defecto) — Centrado en la ventana gráfica. Diálogo M3 estándar.
+ * - `top`, `right`, `bottom`, `left` — Paneles anclados a los bordes (patrón side sheet).
+ * - `max` — Diálogo a pantalla completa para flujos complejos.
  *
  * @example
  * ```html
- * <!-- Basic modal dialog -->
- * <moni-dialog open modal title="Delete item?" size="small">
- *   <p>This action cannot be undone.</p>
+ * <!-- Diálogo modal básico -->
+ * <moni-dialog open modal title="Eliminar elemento?" size="small">
+ *   <p>Esta acción no se puede deshacer.</p>
  *   <div slot="footer">
- *     <moni-button variant="text">Cancel</moni-button>
- *     <moni-button>Delete</moni-button>
+ *     <moni-button variant="text">Cancelar</moni-button>
+ *     <moni-button>Eliminar</moni-button>
  *   </div>
  * </moni-dialog>
  * ```
  *
- * @slot default - The dialog body content.
- * @slot header  - Custom header content (overrides `title` attribute).
- * @slot footer  - Action buttons row at the bottom of the dialog.
+ * @slot default - El contenido del cuerpo del diálogo.
+ * @slot header  - Contenido personalizado del encabezado (sobrescribe el atributo `title`).
+ * @slot footer  - Fila de botones de acción en la parte inferior del diálogo.
  *
- * @csspart dialog - The native `<dialog>` element.
- * @csspart header - The header container.
- * @csspart body   - The body content wrapper.
- * @csspart footer - The footer actions wrapper.
+ * @csspart dialog - El elemento `<dialog>` nativo.
+ * @csspart header - El contenedor del encabezado.
+ * @csspart body   - El envoltorio del contenido del cuerpo.
+ * @csspart footer - El envoltorio de acciones del pie de página.
  */
 let MoniDialog = class MoniDialog extends MoniElement {
     constructor() {
         super(...arguments);
         /**
-         * Controls the open/closed state of the dialog.
+         * Controla el estado abierto/cerrado del diálogo.
          *
-         * When set to `true`, the component calls `dialog.showModal()` (if `modal`)
-         * or `dialog.show()`. When set to `false`, calls `dialog.close()`.
-         * Reflected as an HTML attribute for CSS and external state readers.
+         * Cuando se establece en `true`, el componente llama a `dialog.showModal()` (si `modal`)
+         * o `dialog.show()`. Cuando se establece en `false`, llama a `dialog.close()`.
+         * Reflejado como un atributo HTML para CSS y lectores de estado externos.
          *
          * @default false
          */
         this.open = false;
         /**
-         * When `true`, opens the dialog as a modal using `<dialog>.showModal()`.
+         * Cuando es `true`, abre el diálogo como un modal usando `<dialog>.showModal()`.
          *
-         * Modal dialogs:
-         * - Block keyboard focus from leaving the dialog.
-         * - Render a `::backdrop` scrim over the rest of the page.
-         * - Can be closed by pressing `Escape` (native browser behavior).
+         * Diálogos modales:
+         * - Bloquean que el foco del teclado salga del diálogo.
+         * - Renderizan una capa `::backdrop` sobre el resto de la página.
+         * - Se pueden cerrar presionando `Escape` (comportamiento nativo del navegador).
          *
-         * When `false`, uses `<dialog>.show()` which is non-blocking (no focus trap
-         * and no backdrop).
+         * Cuando es `false`, usa `<dialog>.show()` que no es bloqueante (sin trampa de foco
+         * y sin capa de fondo).
          *
          * @default false
          */
         this.modal = false;
         /**
-         * Placement of the dialog within the viewport.
+         * Colocación del diálogo dentro de la ventana gráfica.
          *
-         * - `'center'` (default) — Centered. Standard M3 dialog placement.
-         * - `'top'`    — Anchored to the top edge (drawer from top).
-         * - `'right'`  — Anchored to the right edge (side sheet pattern).
-         * - `'bottom'` — Anchored to the bottom edge (bottom sheet alternative).
-         * - `'left'`   — Anchored to the left edge (navigation drawer pattern).
-         * - `'max'`    — Full-screen (covers the entire viewport).
+         * - `'center'` (por defecto) — Centrado. Colocación de diálogo M3 estándar.
+         * - `'top'`    — Anclado al borde superior (cajón desde arriba).
+         * - `'right'`  — Anclado al borde derecho (patrón de hoja lateral).
+         * - `'bottom'` — Anclado al borde inferior (alternativa de hoja inferior).
+         * - `'left'`   — Anclado al borde izquierdo (patrón de cajón de navegación).
+         * - `'max'`    — Pantalla completa (cubre toda la ventana gráfica).
          *
          * @default 'center'
          */
         this.side = 'center';
         /**
-         * Size of the dialog container.
+         * Tamaño del contenedor del diálogo.
          *
-         * - `'small'`  — Narrow dialog; ideal for simple confirmations.
-         * - `'medium'` — Standard dialog width (default).
-         * - `'large'`  — Wide dialog; for forms or complex content.
+         * - `'small'`  — Diálogo estrecho; ideal para confirmaciones simples.
+         * - `'medium'` — Ancho de diálogo estándar (por defecto).
+         * - `'large'`  — Diálogo ancho; para formularios o contenido complejo.
          *
          * @default 'medium'
          */
         this.size = 'medium';
         /**
-         * Text displayed in the dialog header area.
+         * Texto mostrado en el área del encabezado del diálogo.
          *
-         * When non-empty, renders as a styled heading inside the header container.
-         * The `header` slot takes precedence over this attribute when both are present.
+         * Cuando no está vacío, se renderiza como un encabezado estilizado dentro del contenedor del encabezado.
+         * El slot `header` tiene prioridad sobre este atributo cuando ambos están presentes.
          *
          * @default ''
          */
         this.title = '';
     }
+    willUpdate(changed) {
+        if (changed.has('open') && this.open !== changed.get('open')) {
+            const isOpening = this.open;
+            const eventName = isOpening ? 'moni-request-open' : 'moni-request-close';
+            const allowed = emitMoniEvent(this, eventName, { cancelable: true });
+            if (!allowed) {
+                this.open = !isOpening;
+            }
+        }
+    }
     /**
-     * Syncs the `open` and `modal` state to the native `<dialog>` element.
+     * Hook de ciclo de vida de Lit. Sincroniza el estado declarativo (`open`, `modal`)
+     * con la API imperativa del elemento `<dialog>` nativo de HTML5.
+     *
+     * - `showModal()`: Bloquea el resto del DOM (Inert), atrapa el foco del teclado (Focus Trap)
+     *   y renderiza el seudoelemento `::backdrop`.
+     * - `show()`: Permite interacción con el fondo (Non-modal).
      *
-     * Called by Lit after every render cycle where tracked properties change.
-     * Avoids calling `showModal()` or `show()` if the dialog is already open
-     * (prevents the `InvalidStateError` DOMException).
+     * IMPORTANTE: Previene la excepción `InvalidStateError` validando si el
+     * diálogo ya está abierto antes de llamar a `show()` o `showModal()`.
      *
-     * @param changed - Map of changed property names to their previous values.
+     * @param changed - Mapa de propiedades reactivas modificadas.
      */
     updated(changed) {
         if (changed.has('open') && this._dialog) {
             if (this.open) {
+                emitMoniEvent(this, 'moni-open');
                 if (this.modal) {
                     if (!this._dialog.open) {
                         this._dialog.showModal();
@@ -140,12 +156,23 @@ let MoniDialog = class MoniDialog extends MoniElement {
                 }
             }
             else {
+                emitMoniEvent(this, 'moni-close');
                 if (this._dialog.open) {
                     this._dialog.close();
                 }
             }
         }
     }
+    _onTransitionEnd(e) {
+        if (e.target === this._dialog && e.propertyName === 'transform') {
+            if (this.open) {
+                emitMoniEvent(this, 'moni-opened');
+            }
+            else {
+                emitMoniEvent(this, 'moni-closed');
+            }
+        }
+    }
     static { this.styles = [
         sharedStyles,
         css `
@@ -307,6 +334,25 @@ let MoniDialog = class MoniDialog extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el elemento `<dialog>` nativo con la estructura semántica de slots del diálogo.
+     *
+     * **¿Por qué `<dialog>`?**
+     * El elemento nativo `<dialog>` proporciona captura de foco, renderizado de fondo (backdrop)
+     * y semántica modal accesible sin JavaScript. El enlace `?open` de Lit
+     * alterna el atributo de forma imperativa, mientras que `updated()` llama a `.show()` /
+     * `.showModal()` / `.close()` para conducir la pila de abrir/cerrar nativa del navegador.
+     *
+     * **Estructura de slots:**
+     * - `[slot="header"]` — se repliega al valor del atributo `title`.
+     * - Slot por defecto — la región de contenido principal del diálogo.
+     * - `[slot="footer"]` — botones de acción (típicamente elementos `<moni-button>`).
+     *
+     * **Composición de `classes`:**
+     * `side`, `size`, y `modal` (si `modal=true`) se unen como clases CSS.
+     * `side` posiciona el diálogo en `start`, `end`, `top`, o `bottom`; usado
+     * para diálogos de panel lateral. `size` controla max-width/height.
+     */
     render() {
         const classes = [this.side, this.size, this.modal ? 'modal' : '']
             .filter(Boolean)
@@ -314,6 +360,7 @@ let MoniDialog = class MoniDialog extends MoniElement {
         return html `<dialog
 			part="dialog"
 			class=${classes}
+			@transitionend=${this._onTransitionEnd}
 		>
 			<header part="header">
 				<slot name="header">${this.title}</slot>

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

@@ -6,57 +6,69 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Divider component.
+ * Componente Material Design 3 Divider (Separador).
  *
- * A thin horizontal (or vertical) rule used to visually separate content
- * sections within lists, layouts, and cards.
+ * Una regla delgada horizontal (o vertical) utilizada para separar visualmente secciones
+ * de contenido dentro de listas, diseños y tarjetas.
  *
- * **M3 spec reference:** `m3-docs/components/divider/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/divider/specs.md`
  *
- * **M3 measurements:**
- * - Thickness: 1dp (`0.0625rem`).
- * - Color: `outline-variant` — subtle on all surface backgrounds.
- * - Inset variants align the line with list content:
- *   - `leading` — 16dp margin from the leading edge (aligns with icon text).
- *   - `middle`  — 16dp margin on both edges.
- *   - `none`    — full-bleed (no margin).
+ * **Medidas M3:**
+ * - Grosor: 1dp (`0.0625rem`).
+ * - Color: `outline-variant` — sutil en todos los fondos de superficie.
+ * - Las variantes insertadas (inset) alinean la línea con el contenido de la lista:
+ *   - `leading` — margen de 16dp desde el borde inicial (se alinea con el texto del icono).
+ *   - `middle`  — margen de 16dp en ambos bordes.
+ *   - `none`    — sangría completa (sin margen).
  *
- * **Vertical usage:**
- * While not yet exposed as an attribute, the `[vertical]` CSS attribute selector
- * is supported. Set `vertical` as an HTML attribute to render a 1dp-wide
- * vertical divider that stretches to match its flex container's cross-axis.
+ * **Uso vertical:**
+ * Aunque todavía no se expone como un atributo, el selector de atributos CSS `[vertical]`
+ * está soportado. Establezca `vertical` como un atributo HTML para renderizar un separador
+ * vertical de 1dp de ancho que se estira para coincidir con el eje transversal de su contenedor flex.
  *
  * @example
  * ```html
- * <!-- Full-bleed divider between sections -->
+ * <!-- Separador de sangría completa entre secciones -->
  * <moni-divider inset="none"></moni-divider>
  *
- * <!-- Leading-inset divider in a list (aligns with list item text) -->
+ * <!-- Separador de inserción inicial en una lista (se alinea con el texto del elemento de lista) -->
  * <moni-divider></moni-divider>
  *
- * <!-- Vertical divider inside a flex container -->
+ * <!-- Separador vertical dentro de un contenedor flex -->
  * <div style="display:flex; height: 3rem; align-items:center; gap: 1rem;">
- *   <span>Section A</span>
+ *   <span>Sección A</span>
  *   <moni-divider vertical></moni-divider>
- *   <span>Section B</span>
+ *   <span>Sección B</span>
  * </div>
  * ```
  */
 export declare class MoniDivider extends MoniElement {
     /**
-     * Controls the horizontal margin on the divider line.
+     * Controla el margen horizontal en la línea del separador.
      *
-     * - `'leading'` (default) — 16dp margin from the leading (start) edge only.
-     *   Use in lists to align the divider with the primary text of list items.
-     * - `'middle'`  — 16dp margin on both the leading and trailing edges.
-     *   Use to separate sections where full-bleed would be too visually heavy.
-     * - `'none'`    — No margin; the line spans the full parent width.
-     *   Use as a section separator or between cards.
+     * - `'leading'` (por defecto) — Margen de 16dp solo desde el borde inicial (inicio).
+     *   Usar en listas para alinear el separador con el texto principal de los elementos de la lista.
+     * - `'middle'`  — Margen de 16dp tanto en el borde inicial como en el final.
+     *   Usar para separar secciones donde una sangría completa sería visualmente demasiado pesada.
+     * - `'none'`    — Sin margen; la línea abarca todo el ancho del padre.
+     *   Usar como separador de secciones o entre tarjetas.
      *
      * @default 'leading'
      */
     inset: 'leading' | 'middle' | 'none';
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza un paso a través de slot transparente.
+     *
+     * `moni-divider` es un componente impulsado puramente por CSS — la línea visual es
+     * renderizada por el elemento `:host` en sí (a través de `background-color` y
+     * `block-size: 0.0625rem`). No se necesitan elementos internos.
+     *
+     * El `<slot>` vacío se incluye para que los consumidores puedan insertar etiquetas de texto
+     * o iconos entre secciones (ej. `<moni-divider>O</moni-divider>`).
+     * El contenido renderizado en el slot no tiene estilo visual de este componente; el consumidor
+     * debe aplicar estilo a los elementos del slot directamente.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-divider.d.ts","sourceRoot":"","sources":["../../src/components/moni-divider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,WAAY,SAAQ,WAAW;IAC3C;;;;;;;;;;;OAWG;IAEH,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAa;IAEjD,OAAgB,MAAM,4BAkCpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"moni-divider.d.ts","sourceRoot":"","sources":["../../src/components/moni-divider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,WAAY,SAAQ,WAAW;IAC3C;;;;;;;;;;;OAWG;IAEH,KAAK,EAAE,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAa;IAEjD,OAAgB,MAAM,4BAkCpB;IAEF;;;;;;;;;;;OAWG;IACM,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,cAAc,EAAE,WAAW,CAAC;KAC5B;CACD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/moni-divider.js

@@ -14,39 +14,39 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Material Design 3 Divider component.
+ * Componente Material Design 3 Divider (Separador).
  *
- * A thin horizontal (or vertical) rule used to visually separate content
- * sections within lists, layouts, and cards.
+ * Una regla delgada horizontal (o vertical) utilizada para separar visualmente secciones
+ * de contenido dentro de listas, diseños y tarjetas.
  *
- * **M3 spec reference:** `m3-docs/components/divider/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/divider/specs.md`
  *
- * **M3 measurements:**
- * - Thickness: 1dp (`0.0625rem`).
- * - Color: `outline-variant` — subtle on all surface backgrounds.
- * - Inset variants align the line with list content:
- *   - `leading` — 16dp margin from the leading edge (aligns with icon text).
- *   - `middle`  — 16dp margin on both edges.
- *   - `none`    — full-bleed (no margin).
+ * **Medidas M3:**
+ * - Grosor: 1dp (`0.0625rem`).
+ * - Color: `outline-variant` — sutil en todos los fondos de superficie.
+ * - Las variantes insertadas (inset) alinean la línea con el contenido de la lista:
+ *   - `leading` — margen de 16dp desde el borde inicial (se alinea con el texto del icono).
+ *   - `middle`  — margen de 16dp en ambos bordes.
+ *   - `none`    — sangría completa (sin margen).
  *
- * **Vertical usage:**
- * While not yet exposed as an attribute, the `[vertical]` CSS attribute selector
- * is supported. Set `vertical` as an HTML attribute to render a 1dp-wide
- * vertical divider that stretches to match its flex container's cross-axis.
+ * **Uso vertical:**
+ * Aunque todavía no se expone como un atributo, el selector de atributos CSS `[vertical]`
+ * está soportado. Establezca `vertical` como un atributo HTML para renderizar un separador
+ * vertical de 1dp de ancho que se estira para coincidir con el eje transversal de su contenedor flex.
  *
  * @example
  * ```html
- * <!-- Full-bleed divider between sections -->
+ * <!-- Separador de sangría completa entre secciones -->
  * <moni-divider inset="none"></moni-divider>
  *
- * <!-- Leading-inset divider in a list (aligns with list item text) -->
+ * <!-- Separador de inserción inicial en una lista (se alinea con el texto del elemento de lista) -->
  * <moni-divider></moni-divider>
  *
- * <!-- Vertical divider inside a flex container -->
+ * <!-- Separador vertical dentro de un contenedor flex -->
  * <div style="display:flex; height: 3rem; align-items:center; gap: 1rem;">
- *   <span>Section A</span>
+ *   <span>Sección A</span>
  *   <moni-divider vertical></moni-divider>
- *   <span>Section B</span>
+ *   <span>Sección B</span>
  * </div>
  * ```
  */
@@ -54,14 +54,14 @@ let MoniDivider = class MoniDivider extends MoniElement {
     constructor() {
         super(...arguments);
         /**
-         * Controls the horizontal margin on the divider line.
+         * Controla el margen horizontal en la línea del separador.
          *
-         * - `'leading'` (default) — 16dp margin from the leading (start) edge only.
-         *   Use in lists to align the divider with the primary text of list items.
-         * - `'middle'`  — 16dp margin on both the leading and trailing edges.
-         *   Use to separate sections where full-bleed would be too visually heavy.
-         * - `'none'`    — No margin; the line spans the full parent width.
-         *   Use as a section separator or between cards.
+         * - `'leading'` (por defecto) — Margen de 16dp solo desde el borde inicial (inicio).
+         *   Usar en listas para alinear el separador con el texto principal de los elementos de la lista.
+         * - `'middle'`  — Margen de 16dp tanto en el borde inicial como en el final.
+         *   Usar para separar secciones donde una sangría completa sería visualmente demasiado pesada.
+         * - `'none'`    — Sin margen; la línea abarca todo el ancho del padre.
+         *   Usar como separador de secciones o entre tarjetas.
          *
          * @default 'leading'
          */
@@ -73,7 +73,7 @@ let MoniDivider = class MoniDivider extends MoniElement {
 			:host {
 				display: block;
 				font-family: var(--font);
-				/* M3 spec: 1dp thick, on-surface-variant for subtle separation. */
+				/* Especificación M3: grosor de 1dp, on-surface-variant para una separación sutil. */
 				block-size: 0.0625rem;
 				min-inline-size: 0;
 				background-color: var(--outline-variant);
@@ -81,7 +81,7 @@ let MoniDivider = class MoniDivider extends MoniElement {
 				margin: 0;
 			}
 
-			/* Inset variants. M3 spec: 16dp from the leading edge. */
+			/* Variantes de inserción. Especificación M3: 16dp desde el borde inicial. */
 			:host([inset='leading']) {
 				margin-inline-start: 1rem;
 				margin-inline-end: 0;
@@ -93,7 +93,7 @@ let MoniDivider = class MoniDivider extends MoniElement {
 				margin-inline: 0;
 			}
 
-			/* Vertical divider (M3 spec also defines vertical usage). */
+			/* Separador vertical (la especificación M3 también define el uso vertical). */
 			:host([vertical]) {
 				inline-size: 0.0625rem;
 				block-size: auto;
@@ -102,6 +102,18 @@ let MoniDivider = class MoniDivider extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza un paso a través de slot transparente.
+     *
+     * `moni-divider` es un componente impulsado puramente por CSS — la línea visual es
+     * renderizada por el elemento `:host` en sí (a través de `background-color` y
+     * `block-size: 0.0625rem`). No se necesitan elementos internos.
+     *
+     * El `<slot>` vacío se incluye para que los consumidores puedan insertar etiquetas de texto
+     * o iconos entre secciones (ej. `<moni-divider>O</moni-divider>`).
+     * El contenido renderizado en el slot no tiene estilo visual de este componente; el consumidor
+     * debe aplicar estilo a los elementos del slot directamente.
+     */
     render() {
         return html `<slot></slot>`;
     }

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

@@ -6,50 +6,60 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Expansion panel component.
+ * Componente Material Design 3 Expansion panel (Panel de expansión).
  *
- * A lightweight wrapper around the native HTML `<details>` and `<summary>`
- * elements, styled according to M3 surface and elevation guidelines.
- * Expansion panels contain creation flows and allow lightweight editing of an element.
+ * Un envoltorio ligero alrededor de los elementos HTML nativos `<details>` y `<summary>`,
+ * estilizado de acuerdo con las pautas de superficie y elevación de M3.
+ * Los paneles de expansión contienen flujos de creación y permiten la edición ligera de un elemento.
  *
- * **Visual architecture:**
- * The component renders a `<details>` element with a `<summary>` that acts
- * as the expandable header. The default slot content is placed inside the
- * `<details>` tag (but outside the `<summary>`), naturally hiding and showing
- * based on the native behavior. An M3 `expand_more` icon is added via a CSS
- * `::after` pseudo-element and rotates when the panel is open.
+ * **Arquitectura visual:**
+ * El componente renderiza un elemento `<details>` con un `<summary>` que actúa
+ * como el encabezado expandible. El contenido del slot por defecto se coloca dentro de la
+ * etiqueta `<details>` (pero fuera del `<summary>`), ocultándose y mostrándose naturalmente
+ * según el comportamiento nativo. Se añade un icono `expand_more` de M3 mediante un
+ * pseudo-elemento CSS `::after` que rota cuando el panel está abierto.
  *
- * **Usage:**
- * Set the `title` attribute for a simple text header, or use the `summary`
- * slot to project custom rich content (like icons or secondary text) into the
- * header area.
+ * **Uso:**
+ * Establezca el atributo `title` para un encabezado de texto simple, o use el slot `summary`
+ * para proyectar contenido enriquecido personalizado (como iconos o texto secundario) en el
+ * área del encabezado.
  *
  * @example
  * ```html
- * <!-- Simple text title -->
- * <moni-expansion title="Advanced Settings">
- *   <p>Enable developer mode features here.</p>
+ * <!-- Título de texto simple -->
+ * <moni-expansion title="Configuración Avanzada">
+ *   <p>Habilite las características del modo de desarrollador aquí.</p>
  * </moni-expansion>
  *
- * <!-- Rich summary content via slot -->
+ * <!-- Contenido de resumen enriquecido a través de slot -->
  * <moni-expansion open>
  *   <div slot="summary" style="display: flex; gap: 8px;">
  *     <moni-icon>person</moni-icon>
- *     <span>Personal Information</span>
+ *     <span>Información Personal</span>
  *   </div>
  *   <form>
- *     <moni-text-field label="Name"></moni-text-field>
+ *     <moni-text-field label="Nombre"></moni-text-field>
  *   </form>
  * </moni-expansion>
  * ```
  *
- * @slot default - The content of the expansion panel body.
- * @slot summary - Custom header content (overrides the `title` attribute).
+ * @slot default - El contenido del cuerpo del panel de expansión.
+ * @slot summary - Contenido personalizado del encabezado (sobrescribe el atributo `title`).
  */
 export declare class MoniExpansion extends MoniElement {
     open: boolean;
     title: string;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el panel de expansión utilizando el elemento nativo `<details>`.
+     *
+     * El atributo `open` en
+     * `:host` impulsa la rotación de la flecha indicadora CSS (`::after` en `summary`).
+     *
+     * **Estructura de slots:**
+     * - `[slot="summary"]` — la fila de encabezado siempre visible (título, iconos).
+     * - Slot por defecto — la región de contenido colapsable.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-expansion.d.ts","sourceRoot":"","sources":["../../src/components/moni-expansion.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,aAAc,SAAQ,WAAW;IACD,IAAI,UAAS;IAC5B,KAAK,SAAM;IAExC,OAAgB,MAAM,4BA6CpB;IAEO,MAAM;CAUf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"moni-expansion.d.ts","sourceRoot":"","sources":["../../src/components/moni-expansion.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,aAAc,SAAQ,WAAW;IACD,IAAI,UAAS;IAC5B,KAAK,SAAM;IAExC,OAAgB,MAAM,4BA6CpB;IAEF;;;;;;;;;OASG;IACM,MAAM;CAUf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,aAAa,CAAC;KAChC;CACD;AAED,eAAe,aAAa,CAAC"}