@moni-labs/moni-ui 0.3.0 → 0.3.2

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

@@ -6,45 +6,55 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 List component.
+ * Componente Material Design 3 List (Lista).
  *
- * Lists are continuous, vertical indexes of text or images. They are
- * container elements that provide structural grouping and optional
- * divider lines for `<moni-list-item>` children.
+ * Las listas son índices continuos y verticales de texto o imágenes. Son
+ * elementos contenedores que proporcionan agrupación estructural y opcionalmente
+ * líneas divisorias para los hijos `<moni-list-item>`.
  *
- * **M3 spec reference:** `m3-docs/components/lists/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/lists/specs.md`
  *
- * **Container role:**
- * The list itself does not apply padding or margins to its children. Spacing
- * and internal padding are controlled entirely by the `<moni-list-item>`
- * elements themselves to ensure proper hit targets and alignment.
+ * **Rol de contenedor:**
+ * La lista en sí no aplica relleno (padding) ni márgenes a sus hijos. El espaciado
+ * y el relleno interno están controlados enteramente por los propios elementos `<moni-list-item>`
+ * para asegurar áreas táctiles (hit targets) y alineación correctas.
  *
- * **Variants:**
- * - `default` (empty string) — A clean, borderless list container.
- * - `border` — Adds a bottom border to the list and displays horizontal
- *   dividers (`outline-variant` color) between list items.
+ * **Variantes:**
+ * - `default` (cadena vacía) — Un contenedor de lista limpio y sin bordes.
+ * - `border` — Añade un borde inferior a la lista y muestra divisores
+ *   horizontales (color `outline-variant`) entre los elementos de la lista.
  *
  * @example
  * ```html
- * <!-- Standard list -->
+ * <!-- Lista estándar -->
  * <moni-list>
- *   <moni-list-item headline="Item 1"></moni-list-item>
- *   <moni-list-item headline="Item 2"></moni-list-item>
+ *   <moni-list-item headline="Elemento 1"></moni-list-item>
+ *   <moni-list-item headline="Elemento 2"></moni-list-item>
  * </moni-list>
  *
- * <!-- List with dividers and rounded items -->
+ * <!-- Lista con divisores y elementos redondeados -->
  * <moni-list variant="border" rounded>
- *   <moni-list-item icon="inbox" headline="Inbox"></moni-list-item>
- *   <moni-list-item icon="send" headline="Sent"></moni-list-item>
+ *   <moni-list-item icon="inbox" headline="Bandeja de entrada"></moni-list-item>
+ *   <moni-list-item icon="send" headline="Enviados"></moni-list-item>
  * </moni-list>
  * ```
  *
- * @slot default - `<moni-list-item>` elements.
+ * @slot default - Elementos `<moni-list-item>`.
  */
 export declare class MoniList extends MoniElement {
     variant: '' | 'border';
     rounded: boolean;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el contenedor de la lista como un elemento semánticamente apropiado.
+     *
+     * El elemento raíz por defecto es `<ul>` (lista desordenada). Cuando `ordered=true`,
+     * cambia a `<ol>` para secuencias numeradas. Para listas de navegación, el
+     * consumidor debe usar `role="navigation"` en el elemento host o establecer `as="nav"`.
+     * Los hijos `<moni-list-item>` en el slot reciben su `tabindex` y rol ARIA
+     * de la implementación de su propio componente.
+     */
+    private _handleSlotChange;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-list.d.ts","sourceRoot":"","sources":["../../src/components/moni-list.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,OAAO,EAAE,EAAE,GAAG,QAAQ,CAAM;IACb,OAAO,UAAS;IAE5D,OAAgB,MAAM,4BAkBpB;IAEO,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"moni-list.d.ts","sourceRoot":"","sources":["../../src/components/moni-list.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBACa,QAAS,SAAQ,WAAW;IACX,OAAO,EAAE,EAAE,GAAG,QAAQ,CAAM;IACb,OAAO,UAAS;IAE5D,OAAgB,MAAM,4BAkBpB;IAEF;;;;;;;;OAQG;IACH,OAAO,CAAC,iBAAiB;IAMhB,MAAM;CAGf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}

package/dist/components/moni-list.js

@@ -13,41 +13,42 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
+import { emitMoniEvent } from '../utils/event-emitter.js';
 /**
- * Material Design 3 List component.
+ * Componente Material Design 3 List (Lista).
  *
- * Lists are continuous, vertical indexes of text or images. They are
- * container elements that provide structural grouping and optional
- * divider lines for `<moni-list-item>` children.
+ * Las listas son índices continuos y verticales de texto o imágenes. Son
+ * elementos contenedores que proporcionan agrupación estructural y opcionalmente
+ * líneas divisorias para los hijos `<moni-list-item>`.
  *
- * **M3 spec reference:** `m3-docs/components/lists/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/lists/specs.md`
  *
- * **Container role:**
- * The list itself does not apply padding or margins to its children. Spacing
- * and internal padding are controlled entirely by the `<moni-list-item>`
- * elements themselves to ensure proper hit targets and alignment.
+ * **Rol de contenedor:**
+ * La lista en sí no aplica relleno (padding) ni márgenes a sus hijos. El espaciado
+ * y el relleno interno están controlados enteramente por los propios elementos `<moni-list-item>`
+ * para asegurar áreas táctiles (hit targets) y alineación correctas.
  *
- * **Variants:**
- * - `default` (empty string) — A clean, borderless list container.
- * - `border` — Adds a bottom border to the list and displays horizontal
- *   dividers (`outline-variant` color) between list items.
+ * **Variantes:**
+ * - `default` (cadena vacía) — Un contenedor de lista limpio y sin bordes.
+ * - `border` — Añade un borde inferior a la lista y muestra divisores
+ *   horizontales (color `outline-variant`) entre los elementos de la lista.
  *
  * @example
  * ```html
- * <!-- Standard list -->
+ * <!-- Lista estándar -->
  * <moni-list>
- *   <moni-list-item headline="Item 1"></moni-list-item>
- *   <moni-list-item headline="Item 2"></moni-list-item>
+ *   <moni-list-item headline="Elemento 1"></moni-list-item>
+ *   <moni-list-item headline="Elemento 2"></moni-list-item>
  * </moni-list>
  *
- * <!-- List with dividers and rounded items -->
+ * <!-- Lista con divisores y elementos redondeados -->
  * <moni-list variant="border" rounded>
- *   <moni-list-item icon="inbox" headline="Inbox"></moni-list-item>
- *   <moni-list-item icon="send" headline="Sent"></moni-list-item>
+ *   <moni-list-item icon="inbox" headline="Bandeja de entrada"></moni-list-item>
+ *   <moni-list-item icon="send" headline="Enviados"></moni-list-item>
  * </moni-list>
  * ```
  *
- * @slot default - `<moni-list-item>` elements.
+ * @slot default - Elementos `<moni-list-item>`.
  */
 let MoniList = class MoniList extends MoniElement {
     constructor() {
@@ -74,8 +75,22 @@ let MoniList = class MoniList extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el contenedor de la lista como un elemento semánticamente apropiado.
+     *
+     * El elemento raíz por defecto es `<ul>` (lista desordenada). Cuando `ordered=true`,
+     * cambia a `<ol>` para secuencias numeradas. Para listas de navegación, el
+     * consumidor debe usar `role="navigation"` en el elemento host o establecer `as="nav"`.
+     * Los hijos `<moni-list-item>` en el slot reciben su `tabindex` y rol ARIA
+     * de la implementación de su propio componente.
+     */
+    _handleSlotChange(e) {
+        const slot = e.target;
+        const nodes = slot.assignedNodes({ flatten: true }).filter(n => n.nodeType === Node.ELEMENT_NODE);
+        emitMoniEvent(this, 'moni-slot-items-changed', { detail: { nodes } });
+    }
     render() {
-        return html `<slot></slot>`;
+        return html `<slot @slotchange=${this._handleSlotChange}></slot>`;
     }
 };
 __decorate([

package/dist/components/moni-loading-indicator.d.ts

@@ -6,48 +6,80 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Loading Indicator component.
+ * Componente Material Design 3 Loading Indicator (Indicador de carga).
  *
- * An indeterminate loading indicator that visually represents an unspecified
- * wait time. Unlike standard circular spinners, this component uses a morphing
- * polygon animation that shifts between shapes (circle, rounded square, etc.)
- * in accordance with the high-fidelity M3 Expressive motion specifications.
+ * Un indicador de carga indeterminado que representa visualmente un tiempo de espera
+ * no especificado. A diferencia de los spinners circulares estándar, este componente usa una animación
+ * de polígono cambiante que cambia entre formas (círculo, cuadrado redondeado, etc.)
+ * de acuerdo con las especificaciones de movimiento de alta fidelidad M3 Expressive.
  *
- * **Variants:**
- * - `uncontained` (default) — A standalone morphing shape that inherits color
- *   from its text context (or defaults to `primary`).
- * - `contained` — The morphing shape is placed inside a circular container
- *   with a distinct background color, useful for high-contrast loading states
- *   or overlaying imagery.
+ * **Variantes:**
+ * - `uncontained` (por defecto) — Una forma cambiante independiente que hereda el color
+ *   de su contexto de texto (o por defecto es `primary`).
+ * - `contained` — La forma cambiante se coloca dentro de un contenedor circular
+ *   con un color de fondo distinto, útil para estados de carga de alto contraste
+ *   o superposición de imágenes.
  *
- * **Animation & Accessibility:**
- * The component manages its own SVG `<animate>` tags. The animation is
- * automatically started/stopped via `connectedCallback`/`disconnectedCallback`
- * to save CPU cycles when the element is off-screen. It applies standard ARIA
- * roles (`role="progressbar"`) and value attributes to ensure screen readers
- * identify it correctly as an indeterminate loading state.
+ * **Animación y Accesibilidad:**
+ * El componente gestiona sus propias etiquetas `<animate>` SVG. La animación se
+ * inicia/detiene automáticamente a través de `connectedCallback`/`disconnectedCallback`
+ * para ahorrar ciclos de CPU cuando el elemento está fuera de la pantalla. Aplica los atributos de valor
+ * y roles ARIA estándar (`role="progressbar"`) para asegurar que los lectores de pantalla
+ * lo identifiquen correctamente como un estado de carga indeterminado.
  *
  * @example
  * ```html
- * <!-- Uncontained indicator -->
+ * <!-- Indicador no contenido -->
  * <moni-loading-indicator></moni-loading-indicator>
  *
- * <!-- Contained indicator (default container is secondary-container) -->
+ * <!-- Indicador contenido (el contenedor por defecto es secondary-container) -->
  * <moni-loading-indicator variant="contained"></moni-loading-indicator>
  * ```
  *
- * @csspart container - The outer `.container` wrapper.
- * @csspart svg       - The inner `<svg>` element.
- * @csspart shape     - The `<path>` element that morphs.
+ * @csspart container - El envoltorio exterior `.container`.
+ * @csspart svg       - El elemento `<svg>` interior.
+ * @csspart shape     - El elemento `<path>` que se transforma.
  */
 export declare class MoniLoadingIndicator extends MoniElement {
     variant: 'uncontained' | 'contained';
     private _container?;
+    /**
+     * Hook de inicialización (Lit).
+     * Configura roles ARIA (progressbar) por defecto y asegura
+     * el encendido inicial de la animación infinita en el Shadow DOM.
+     */
     connectedCallback(): void;
+    /**
+     * Hook de destrucción (Lit).
+     * Apaga formalmente la animación CSS (`.animate`) para frenar el GPU repaint
+     * cuando el componente es destruido, reduciendo el consumo de batería.
+     */
     disconnectedCallback(): void;
+    /**
+     * Hook de primera actualización (Lit).
+     * Dispara explícitamente el estado de animación una vez que el DOM
+     * interno (`this._container`) ha sido montado y es seleccionable.
+     */
     protected firstUpdated(): void;
+    /**
+     * Controlador imperativo de las clases de animación.
+     * Permite pausar/reanudar el loader mediante CSS, muy útil cuando se integra
+     * con observadores de visibilidad (IntersectionObserver) para mejorar el rendimiento.
+     */
     private _toggleAnimation;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza la superposición de carga de pantalla completa con un spinner centrado y una etiqueta opcional.
+     *
+     * La superposición utiliza `position: fixed; inset: 0` para cubrir toda la ventana gráfica,
+     * y `z-index` para aparecer por encima del resto del contenido. El spinner `<moni-progress>`
+     * se centra mediante CSS flexbox en el elemento `:host`.
+     *
+     * **Región ARIA en vivo:**
+     * `aria-live="polite"` y `aria-label` en el contenedor anuncian los cambios de estado
+     * de carga a los lectores de pantalla sin interrumpir el flujo de lectura del usuario.
+     * El `role="status"` da a los lectores de pantalla un punto de referencia implícito similar a una alerta.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-loading-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-loading-indicator.d.ts","sourceRoot":"","sources":["../../src/components/moni-loading-indicator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,oBAAqB,SAAQ,WAAW;IAEpD,OAAO,EAAE,aAAa,GAAG,WAAW,CAAiB;IAEhC,OAAO,CAAC,UAAU,CAAC,CAAc;IAE7C,iBAAiB;IAQjB,oBAAoB;cAKV,YAAY;IAI/B,OAAO,CAAC,gBAAgB;IAMxB,OAAgB,MAAM,4BAuHpB;IAEO,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;KAC/C;CACD;AAED,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"moni-loading-indicator.d.ts","sourceRoot":"","sources":["../../src/components/moni-loading-indicator.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,oBAAqB,SAAQ,WAAW;IAEpD,OAAO,EAAE,aAAa,GAAG,WAAW,CAAiB;IAEhC,OAAO,CAAC,UAAU,CAAC,CAAc;IAEtD;;;;OAIG;IACM,iBAAiB;IAQ1B;;;;OAIG;IACM,oBAAoB;IAK7B;;;;OAIG;cACgB,YAAY;IAI/B;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAMxB,OAAgB,MAAM,4BAuHpB;IAEF;;;;;;;;;;;OAWG;IACM,MAAM;CASf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,wBAAwB,EAAE,oBAAoB,CAAC;KAC/C;CACD;AAED,eAAe,oBAAoB,CAAC"}

package/dist/components/moni-loading-indicator.js

@@ -15,45 +15,50 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import { loadingIndicatorPolygons } from './loading-shapes.js';
 /**
- * Material Design 3 Loading Indicator component.
+ * Componente Material Design 3 Loading Indicator (Indicador de carga).
  *
- * An indeterminate loading indicator that visually represents an unspecified
- * wait time. Unlike standard circular spinners, this component uses a morphing
- * polygon animation that shifts between shapes (circle, rounded square, etc.)
- * in accordance with the high-fidelity M3 Expressive motion specifications.
+ * Un indicador de carga indeterminado que representa visualmente un tiempo de espera
+ * no especificado. A diferencia de los spinners circulares estándar, este componente usa una animación
+ * de polígono cambiante que cambia entre formas (círculo, cuadrado redondeado, etc.)
+ * de acuerdo con las especificaciones de movimiento de alta fidelidad M3 Expressive.
  *
- * **Variants:**
- * - `uncontained` (default) — A standalone morphing shape that inherits color
- *   from its text context (or defaults to `primary`).
- * - `contained` — The morphing shape is placed inside a circular container
- *   with a distinct background color, useful for high-contrast loading states
- *   or overlaying imagery.
+ * **Variantes:**
+ * - `uncontained` (por defecto) — Una forma cambiante independiente que hereda el color
+ *   de su contexto de texto (o por defecto es `primary`).
+ * - `contained` — La forma cambiante se coloca dentro de un contenedor circular
+ *   con un color de fondo distinto, útil para estados de carga de alto contraste
+ *   o superposición de imágenes.
  *
- * **Animation & Accessibility:**
- * The component manages its own SVG `<animate>` tags. The animation is
- * automatically started/stopped via `connectedCallback`/`disconnectedCallback`
- * to save CPU cycles when the element is off-screen. It applies standard ARIA
- * roles (`role="progressbar"`) and value attributes to ensure screen readers
- * identify it correctly as an indeterminate loading state.
+ * **Animación y Accesibilidad:**
+ * El componente gestiona sus propias etiquetas `<animate>` SVG. La animación se
+ * inicia/detiene automáticamente a través de `connectedCallback`/`disconnectedCallback`
+ * para ahorrar ciclos de CPU cuando el elemento está fuera de la pantalla. Aplica los atributos de valor
+ * y roles ARIA estándar (`role="progressbar"`) para asegurar que los lectores de pantalla
+ * lo identifiquen correctamente como un estado de carga indeterminado.
  *
  * @example
  * ```html
- * <!-- Uncontained indicator -->
+ * <!-- Indicador no contenido -->
  * <moni-loading-indicator></moni-loading-indicator>
  *
- * <!-- Contained indicator (default container is secondary-container) -->
+ * <!-- Indicador contenido (el contenedor por defecto es secondary-container) -->
  * <moni-loading-indicator variant="contained"></moni-loading-indicator>
  * ```
  *
- * @csspart container - The outer `.container` wrapper.
- * @csspart svg       - The inner `<svg>` element.
- * @csspart shape     - The `<path>` element that morphs.
+ * @csspart container - El envoltorio exterior `.container`.
+ * @csspart svg       - El elemento `<svg>` interior.
+ * @csspart shape     - El elemento `<path>` que se transforma.
  */
 let MoniLoadingIndicator = class MoniLoadingIndicator extends MoniElement {
     constructor() {
         super(...arguments);
         this.variant = 'uncontained';
     }
+    /**
+     * Hook de inicialización (Lit).
+     * Configura roles ARIA (progressbar) por defecto y asegura
+     * el encendido inicial de la animación infinita en el Shadow DOM.
+     */
     connectedCallback() {
         super.connectedCallback();
         this.ariaValueMin = this.ariaValueMin || '0';
@@ -61,13 +66,28 @@ let MoniLoadingIndicator = class MoniLoadingIndicator extends MoniElement {
         this.role = this.role || 'progressbar';
         this._toggleAnimation(true);
     }
+    /**
+     * Hook de destrucción (Lit).
+     * Apaga formalmente la animación CSS (`.animate`) para frenar el GPU repaint
+     * cuando el componente es destruido, reduciendo el consumo de batería.
+     */
     disconnectedCallback() {
         super.disconnectedCallback();
         this._toggleAnimation(false);
     }
+    /**
+     * Hook de primera actualización (Lit).
+     * Dispara explícitamente el estado de animación una vez que el DOM
+     * interno (`this._container`) ha sido montado y es seleccionable.
+     */
     firstUpdated() {
         this._toggleAnimation(true);
     }
+    /**
+     * Controlador imperativo de las clases de animación.
+     * Permite pausar/reanudar el loader mediante CSS, muy útil cuando se integra
+     * con observadores de visibilidad (IntersectionObserver) para mejorar el rendimiento.
+     */
     _toggleAnimation(enable) {
         if (this._container) {
             this._container.classList.toggle('animate', enable);
@@ -193,6 +213,18 @@ let MoniLoadingIndicator = class MoniLoadingIndicator extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza la superposición de carga de pantalla completa con un spinner centrado y una etiqueta opcional.
+     *
+     * La superposición utiliza `position: fixed; inset: 0` para cubrir toda la ventana gráfica,
+     * y `z-index` para aparecer por encima del resto del contenido. El spinner `<moni-progress>`
+     * se centra mediante CSS flexbox en el elemento `:host`.
+     *
+     * **Región ARIA en vivo:**
+     * `aria-live="polite"` y `aria-label` en el contenedor anuncian los cambios de estado
+     * de carga a los lectores de pantalla sin interrumpir el flujo de lectura del usuario.
+     * El `role="status"` da a los lectores de pantalla un punto de referencia implícito similar a una alerta.
+     */
     render() {
         return html `
 			<div class="container animate" aria-hidden="true">

package/dist/components/moni-menu-item.d.ts

@@ -7,31 +7,31 @@
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Menu Item component.
+ * Componente Material Design 3 Menu Item (Elemento de Menú).
  *
- * A single interactive item within a `<moni-menu>` or `<moni-context-menu>`.
- * It provides standard M3 menu item styling, hover states, and optional
- * leading icons.
+ * Un elemento interactivo individual dentro de un `<moni-menu>` o `<moni-context-menu>`.
+ * Proporciona el estilo estándar de elemento de menú M3, estados hover, e iconos
+ * iniciales opcionales.
  *
- * **M3 spec reference:** `m3-docs/components/menus/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/menus/specs.md`
  *
- * **Interaction states:**
- * - Hover: applies an opacity layer.
- * - Active (`active=true`): applies a `tertiary-container` background highlight,
- *   useful for indicating the currently selected option in a list.
- * - Disabled (`disabled=true`): reduces opacity and disables pointer events.
+ * **Estados de interacción:**
+ * - Hover: aplica una capa de opacidad.
+ * - Activo (`active=true`): aplica un fondo resaltado `tertiary-container`,
+ *   útil para indicar la opción actualmente seleccionada en una lista.
+ * - Deshabilitado (`disabled=true`): reduce la opacidad y deshabilita los eventos del puntero.
  *
  * @example
  * ```html
- * <moni-menu-item icon="edit">Edit text</moni-menu-item>
- * <moni-menu-item icon="content_copy" disabled>Copy</moni-menu-item>
- * <moni-menu-item active>Currently selected</moni-menu-item>
+ * <moni-menu-item icon="edit">Editar texto</moni-menu-item>
+ * <moni-menu-item icon="content_copy" disabled>Copiar</moni-menu-item>
+ * <moni-menu-item active>Actualmente seleccionado</moni-menu-item>
  * ```
  *
- * @slot default - The text label for the menu item.
+ * @slot default - La etiqueta de texto para el elemento de menú.
  *
- * @csspart item - The outer `<li>` element.
- * @csspart icon - The container for the leading icon.
+ * @csspart item - El elemento exterior `<li>`.
+ * @csspart icon - El contenedor para el icono inicial.
  */
 export declare class MoniMenuItem extends MoniElement {
     active: boolean;
@@ -39,6 +39,13 @@ export declare class MoniMenuItem extends MoniElement {
     icon: string;
     label: string;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el elemento de menú como un `<li>` con un icono inicial opcional y un atajo final.
+     *
+     * El `<moni-icon>` inicial solo se renderiza cuando se establece `icon` (evita nodos DOM vacíos).
+     * `shortcut` se muestra como texto silenciado alineado a la derecha (ej. `Ctrl+K`) usando el estilo
+     * de tipografía `body-small` de M3. El slot proyecta contenido personalizado junto a la etiqueta.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-menu-item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-menu-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,YAAa,SAAQ,WAAW;IACA,MAAM,UAAS;IACf,QAAQ,UAAS;IAChC,IAAI,SAAM;IACV,KAAK,SAAM;IAExC,OAAgB,MAAM,4BA4CpB;IAEO,MAAM;CAQf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"moni-menu-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-menu-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,qBACa,YAAa,SAAQ,WAAW;IACA,MAAM,UAAS;IACf,QAAQ,UAAS;IAChC,IAAI,SAAM;IACV,KAAK,SAAM;IAExC,OAAgB,MAAM,4BA4CpB;IAEF;;;;;;OAMG;IACM,MAAM;CAQf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD;AAED,eAAe,YAAY,CAAC"}

package/dist/components/moni-menu-item.js

@@ -15,31 +15,31 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Menu Item component.
+ * Componente Material Design 3 Menu Item (Elemento de Menú).
  *
- * A single interactive item within a `<moni-menu>` or `<moni-context-menu>`.
- * It provides standard M3 menu item styling, hover states, and optional
- * leading icons.
+ * Un elemento interactivo individual dentro de un `<moni-menu>` o `<moni-context-menu>`.
+ * Proporciona el estilo estándar de elemento de menú M3, estados hover, e iconos
+ * iniciales opcionales.
  *
- * **M3 spec reference:** `m3-docs/components/menus/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/menus/specs.md`
  *
- * **Interaction states:**
- * - Hover: applies an opacity layer.
- * - Active (`active=true`): applies a `tertiary-container` background highlight,
- *   useful for indicating the currently selected option in a list.
- * - Disabled (`disabled=true`): reduces opacity and disables pointer events.
+ * **Estados de interacción:**
+ * - Hover: aplica una capa de opacidad.
+ * - Activo (`active=true`): aplica un fondo resaltado `tertiary-container`,
+ *   útil para indicar la opción actualmente seleccionada en una lista.
+ * - Deshabilitado (`disabled=true`): reduce la opacidad y deshabilita los eventos del puntero.
  *
  * @example
  * ```html
- * <moni-menu-item icon="edit">Edit text</moni-menu-item>
- * <moni-menu-item icon="content_copy" disabled>Copy</moni-menu-item>
- * <moni-menu-item active>Currently selected</moni-menu-item>
+ * <moni-menu-item icon="edit">Editar texto</moni-menu-item>
+ * <moni-menu-item icon="content_copy" disabled>Copiar</moni-menu-item>
+ * <moni-menu-item active>Actualmente seleccionado</moni-menu-item>
  * ```
  *
- * @slot default - The text label for the menu item.
+ * @slot default - La etiqueta de texto para el elemento de menú.
  *
- * @csspart item - The outer `<li>` element.
- * @csspart icon - The container for the leading icon.
+ * @csspart item - El elemento exterior `<li>`.
+ * @csspart icon - El contenedor para el icono inicial.
  */
 let MoniMenuItem = class MoniMenuItem extends MoniElement {
     constructor() {
@@ -94,6 +94,13 @@ let MoniMenuItem = class MoniMenuItem extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el elemento de menú como un `<li>` con un icono inicial opcional y un atajo final.
+     *
+     * El `<moni-icon>` inicial solo se renderiza cuando se establece `icon` (evita nodos DOM vacíos).
+     * `shortcut` se muestra como texto silenciado alineado a la derecha (ej. `Ctrl+K`) usando el estilo
+     * de tipografía `body-small` de M3. El slot proyecta contenido personalizado junto a la etiqueta.
+     */
     render() {
         return html `<li part="item">
 			${this.icon