@moni-labs/moni-ui 0.3.0 → 0.3.2

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

@@ -6,64 +6,64 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Visual-only icon component using Material Symbols variable font.
+ * Componente de icono solo visual que utiliza la fuente variable Material Symbols.
  *
- * Renders a Material Symbols glyph by its ligature name. The icon font
- * must be loaded globally by the host document — it is not bundled with
- * the component. Add the font via the `@moni-labs/moni-ui/styles` stylesheet
- * or by including the Google Fonts CDN link.
+ * Renderiza un glifo de Material Symbols por el nombre de su ligadura. La fuente de iconos
+ * debe cargarse globalmente en el documento host — no viene empaquetada con
+ * el componente. Añada la fuente a través de la hoja de estilos `@moni-labs/moni-ui/styles`
+ * o incluyendo el enlace CDN de Google Fonts.
  *
- * **Font rendering:**
- * The icon uses `font-family: var(--font-icon)` which defaults to
- * `'Material Symbols Rounded'`. Override `--font-icon-override` in the
- * host document's `:root` to switch to a different icon set variant
- * (e.g. `'Material Symbols Outlined'` or `'Material Symbols Sharp'`).
+ * **Renderizado de fuentes:**
+ * El icono usa `font-family: var(--font-icon)` que por defecto es
+ * `'Material Symbols Rounded'`. Sobrescriba `--font-icon-override` en el
+ * `:root` del documento host para cambiar a una variante diferente del conjunto de iconos
+ * (ej. `'Material Symbols Outlined'` o `'Material Symbols Sharp'`).
  *
- * **Variable font settings:**
- * The default `font-variation-settings` is `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24`.
- * Setting the `filled` attribute switches to `'FILL' 1` for the solid icon variant.
+ * **Ajustes de fuente variable:**
+ * El valor por defecto de `font-variation-settings` es `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24`.
+ * Establecer el atributo `filled` cambia a `'FILL' 1` para la variante de icono sólido.
  *
- * **Color inheritance:**
- * The icon always inherits color from its parent via `color: inherit`, making it
- * automatically adapt to button variants, chip selected states, list item active
- * states, and other color-context containers.
+ * **Herencia de color:**
+ * El icono siempre hereda el color de su padre a través de `color: inherit`, haciéndolo
+ * adaptarse automáticamente a las variantes de botones, estados seleccionados de chips, estados
+ * activos de elementos de lista y otros contenedores de contexto de color.
  *
  * @example
  * ```html
- * <!-- Basic icon -->
+ * <!-- Icono básico -->
  * <moni-icon name="home"></moni-icon>
  *
- * <!-- Filled large icon -->
+ * <!-- Icono grande rellenado -->
  * <moni-icon name="favorite" size="large" filled></moni-icon>
  *
- * <!-- Custom SVG override via slot -->
+ * <!-- Sobrescritura de SVG personalizado a través de slot -->
  * <moni-icon>
  *   <svg slot="default" viewBox="0 0 24 24">...</svg>
  * </moni-icon>
  * ```
  *
- * @slot default - Fallback content when `name` is empty. Accepts `<svg>` or `<img>`
- *                 elements which are sized to 100% of the icon box.
+ * @slot default - Contenido de respaldo cuando `name` está vacío. Acepta elementos `<svg>` o `<img>`
+ *                 que se dimensionan al 100% de la caja del icono.
  *
- * @cssproperty --font-icon-override - Overrides the icon font family at the
- *                                     document level. Set on `:root`.
+ * @cssproperty --font-icon-override - Sobrescribe la familia de fuentes de iconos a
+ *                                     nivel del documento. Establecer en `:root`.
  */
 export declare class MoniIcon extends MoniElement {
     /**
-     * Material Symbols ligature name for the icon to render.
+     * Nombre de la ligadura de Material Symbols para el icono a renderizar.
      *
-     * Use the name exactly as shown on https://fonts.google.com/icons
-     * (e.g. `'home'`, `'settings'`, `'arrow_forward'`).
-     * When empty, the default slot is rendered instead.
+     * Utilice el nombre exactamente como se muestra en https://fonts.google.com/icons
+     * (ej. `'home'`, `'settings'`, `'arrow_forward'`).
+     * Cuando está vacío, se renderiza el slot por defecto en su lugar.
      *
      * @default ''
      */
     name: string;
     /**
-     * Size of the icon bounding box.
+     * Tamaño de la caja delimitadora del icono.
      *
-     * Maps to the `--_size` custom property:
-     * | Value      | Size     |
+     * Se mapea a la propiedad personalizada `--_size`:
+     * | Valor      | Tamaño   |
      * |------------|----------|
      * | `'tiny'`   | 1rem     |
      * | `'small'`  | 1.25rem  |
@@ -75,17 +75,22 @@ export declare class MoniIcon extends MoniElement {
      */
     size: 'tiny' | 'small' | 'medium' | 'large' | 'extra';
     /**
-     * When `true`, switches to the filled variant of the icon by setting
+     * Cuando es `true`, cambia a la variante rellenada (filled) del icono estableciendo
      * `font-variation-settings: 'FILL' 1`.
      *
-     * This works only with variable icon fonts that include the `FILL` axis
-     * (all Material Symbols variants do). It has no effect if a different
-     * icon font is loaded that does not support `FILL`.
+     * Esto funciona solo con fuentes de iconos variables que incluyen el eje `FILL`
+     * (todas las variantes de Material Symbols lo hacen). No tiene efecto si se carga
+     * una fuente de iconos diferente que no soporte `FILL`.
      *
      * @default false
      */
     filled: boolean;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el ícono utilizando la fuente de variables Material Symbols.
+     * Si no se provee un `name`, el `<slot>` actúa como fallback permitiendo
+     * inyectar un SVG personalizado directamente.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-icon.d.ts","sourceRoot":"","sources":["../../src/components/moni-icon.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,QAAS,SAAQ,WAAW;IACxC;;;;;;;;OAQG;IAC0B,IAAI,SAAM;IAEvC;;;;;;;;;;;;;OAaG;IAEH,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAEjE;;;;;;;;;OASG;IACyC,MAAM,UAAS;IAE3D,OAAgB,MAAM,4BAyDpB;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-icon.d.ts","sourceRoot":"","sources":["../../src/components/moni-icon.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,QAAS,SAAQ,WAAW;IACxC;;;;;;;;OAQG;IAC0B,IAAI,SAAM;IAEvC;;;;;;;;;;;;;OAaG;IAEH,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAEjE;;;;;;;;;OASG;IACyC,MAAM,UAAS;IAE3D,OAAgB,MAAM,4BAyDpB;IAEF;;;;OAIG;IACM,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-icon.js

@@ -14,66 +14,66 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Visual-only icon component using Material Symbols variable font.
+ * Componente de icono solo visual que utiliza la fuente variable Material Symbols.
  *
- * Renders a Material Symbols glyph by its ligature name. The icon font
- * must be loaded globally by the host document — it is not bundled with
- * the component. Add the font via the `@moni-labs/moni-ui/styles` stylesheet
- * or by including the Google Fonts CDN link.
+ * Renderiza un glifo de Material Symbols por el nombre de su ligadura. La fuente de iconos
+ * debe cargarse globalmente en el documento host — no viene empaquetada con
+ * el componente. Añada la fuente a través de la hoja de estilos `@moni-labs/moni-ui/styles`
+ * o incluyendo el enlace CDN de Google Fonts.
  *
- * **Font rendering:**
- * The icon uses `font-family: var(--font-icon)` which defaults to
- * `'Material Symbols Rounded'`. Override `--font-icon-override` in the
- * host document's `:root` to switch to a different icon set variant
- * (e.g. `'Material Symbols Outlined'` or `'Material Symbols Sharp'`).
+ * **Renderizado de fuentes:**
+ * El icono usa `font-family: var(--font-icon)` que por defecto es
+ * `'Material Symbols Rounded'`. Sobrescriba `--font-icon-override` en el
+ * `:root` del documento host para cambiar a una variante diferente del conjunto de iconos
+ * (ej. `'Material Symbols Outlined'` o `'Material Symbols Sharp'`).
  *
- * **Variable font settings:**
- * The default `font-variation-settings` is `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24`.
- * Setting the `filled` attribute switches to `'FILL' 1` for the solid icon variant.
+ * **Ajustes de fuente variable:**
+ * El valor por defecto de `font-variation-settings` es `'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24`.
+ * Establecer el atributo `filled` cambia a `'FILL' 1` para la variante de icono sólido.
  *
- * **Color inheritance:**
- * The icon always inherits color from its parent via `color: inherit`, making it
- * automatically adapt to button variants, chip selected states, list item active
- * states, and other color-context containers.
+ * **Herencia de color:**
+ * El icono siempre hereda el color de su padre a través de `color: inherit`, haciéndolo
+ * adaptarse automáticamente a las variantes de botones, estados seleccionados de chips, estados
+ * activos de elementos de lista y otros contenedores de contexto de color.
  *
  * @example
  * ```html
- * <!-- Basic icon -->
+ * <!-- Icono básico -->
  * <moni-icon name="home"></moni-icon>
  *
- * <!-- Filled large icon -->
+ * <!-- Icono grande rellenado -->
  * <moni-icon name="favorite" size="large" filled></moni-icon>
  *
- * <!-- Custom SVG override via slot -->
+ * <!-- Sobrescritura de SVG personalizado a través de slot -->
  * <moni-icon>
  *   <svg slot="default" viewBox="0 0 24 24">...</svg>
  * </moni-icon>
  * ```
  *
- * @slot default - Fallback content when `name` is empty. Accepts `<svg>` or `<img>`
- *                 elements which are sized to 100% of the icon box.
+ * @slot default - Contenido de respaldo cuando `name` está vacío. Acepta elementos `<svg>` o `<img>`
+ *                 que se dimensionan al 100% de la caja del icono.
  *
- * @cssproperty --font-icon-override - Overrides the icon font family at the
- *                                     document level. Set on `:root`.
+ * @cssproperty --font-icon-override - Sobrescribe la familia de fuentes de iconos a
+ *                                     nivel del documento. Establecer en `:root`.
  */
 let MoniIcon = class MoniIcon extends MoniElement {
     constructor() {
         super(...arguments);
         /**
-         * Material Symbols ligature name for the icon to render.
+         * Nombre de la ligadura de Material Symbols para el icono a renderizar.
          *
-         * Use the name exactly as shown on https://fonts.google.com/icons
-         * (e.g. `'home'`, `'settings'`, `'arrow_forward'`).
-         * When empty, the default slot is rendered instead.
+         * Utilice el nombre exactamente como se muestra en https://fonts.google.com/icons
+         * (ej. `'home'`, `'settings'`, `'arrow_forward'`).
+         * Cuando está vacío, se renderiza el slot por defecto en su lugar.
          *
          * @default ''
          */
         this.name = '';
         /**
-         * Size of the icon bounding box.
+         * Tamaño de la caja delimitadora del icono.
          *
-         * Maps to the `--_size` custom property:
-         * | Value      | Size     |
+         * Se mapea a la propiedad personalizada `--_size`:
+         * | Valor      | Tamaño   |
          * |------------|----------|
          * | `'tiny'`   | 1rem     |
          * | `'small'`  | 1.25rem  |
@@ -85,12 +85,12 @@ let MoniIcon = class MoniIcon extends MoniElement {
          */
         this.size = 'medium';
         /**
-         * When `true`, switches to the filled variant of the icon by setting
+         * Cuando es `true`, cambia a la variante rellenada (filled) del icono estableciendo
          * `font-variation-settings: 'FILL' 1`.
          *
-         * This works only with variable icon fonts that include the `FILL` axis
-         * (all Material Symbols variants do). It has no effect if a different
-         * icon font is loaded that does not support `FILL`.
+         * Esto funciona solo con fuentes de iconos variables que incluyen el eje `FILL`
+         * (todas las variantes de Material Symbols lo hacen). No tiene efecto si se carga
+         * una fuente de iconos diferente que no soporte `FILL`.
          *
          * @default false
          */
@@ -120,9 +120,9 @@ let MoniIcon = class MoniIcon extends MoniElement {
 				line-height: 1;
 				inline-size: var(--_size);
 				block-size: var(--_size);
-				/* Explicit inherit so the icon glyph picks up color from
-				   whatever consumer wraps it (button variants, chip selected
-				   state, list-item active, etc.). */
+				/* Herencia explícita para que el glifo del icono tome el color de
+				   cualquier consumidor que lo envuelva (variantes de botones, estado
+				   seleccionado de chip, activo de list-item, etc.). */
 				color: inherit;
 			}
 
@@ -154,6 +154,11 @@ let MoniIcon = class MoniIcon extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el ícono utilizando la fuente de variables Material Symbols.
+     * Si no se provee un `name`, el `<slot>` actúa como fallback permitiendo
+     * inyectar un SVG personalizado directamente.
+     */
     render() {
         return html `<slot>${this.name}</slot>`;
     }

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

@@ -7,60 +7,60 @@
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 List Item component.
+ * Componente Material Design 3 List Item (Elemento de Lista).
  *
- * A single row within a `<moni-list>`. List items display a headline and
- * optional supporting text, metadata, icons, or avatars.
+ * Una sola fila dentro de un `<moni-list>`. Los elementos de lista muestran un titular y
+ * opcionalmente texto de soporte, metadatos, iconos o avatares.
  *
- * **M3 spec reference:** `m3-docs/components/lists/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/lists/specs.md`
  *
- * **Line configurations:**
- * The `lines` attribute configures the layout and minimum height of the item:
- * - `lines="1"` (default) — 56dp min height. Only the headline slot is shown.
- * - `lines="2"` — 72dp min height. Shows headline and supporting text.
- * - `lines="3"` — 88dp min height. Shows headline, supporting text, and meta text.
+ * **Configuraciones de línea:**
+ * El atributo `lines` configura el diseño y la altura mínima del elemento:
+ * - `lines="1"` (por defecto) — altura mínima de 56dp. Solo se muestra el slot del titular.
+ * - `lines="2"` — altura mínima de 72dp. Muestra el titular y el texto de soporte.
+ * - `lines="3"` — altura mínima de 88dp. Muestra el titular, el texto de soporte y el texto meta.
  *
- * **Interactive behavior:**
- * By default, items render as `<button>` elements, gaining the M3 state layer
- * (hover, focus, and press ripple effects).
- * If the `href` attribute is provided, the item internally renders as an `<a>`
- * element, allowing native link routing and interactions while preserving the
- * list item styling.
+ * **Comportamiento interactivo:**
+ * Por defecto, los elementos se renderizan como elementos `<button>`, adquiriendo la capa de estado de M3
+ * (efectos de ondulación de hover, focus y press).
+ * Si se proporciona el atributo `href`, el elemento se renderiza internamente como un elemento `<a>`,
+ * permitiendo enrutamiento de enlaces nativos e interacciones mientras se preserva el
+ * estilo del elemento de lista.
  *
- * **Visual elements:**
- * - `icon` (attribute) — Material Symbol name for the leading icon (24dp).
- * - `avatar` (attribute) — URL for a leading circular image (40dp).
- * - `trailing-icon` (attribute) — Material Symbol name for the trailing icon.
+ * **Elementos visuales:**
+ * - `icon` (atributo) — Nombre de Material Symbol para el icono inicial (24dp).
+ * - `avatar` (atributo) — URL para una imagen circular inicial (40dp).
+ * - `trailing-icon` (atributo) — Nombre de Material Symbol para el icono final.
  *
  * @example
  * ```html
- * <!-- 1-line item with icon -->
+ * <!-- Elemento de 1 línea con icono -->
  * <moni-list-item icon="inbox">
- *   Inbox
+ *   Bandeja de entrada
  * </moni-list-item>
  *
- * <!-- 2-line item with avatar and trailing meta -->
+ * <!-- Elemento de 2 líneas con avatar y meta final -->
  * <moni-list-item lines="2" avatar="/user.jpg">
  *   Ali Connors
- *   <span slot="supporting">Brunch this weekend?</span>
+ *   <span slot="supporting">¿Brunch este fin de semana?</span>
  *   <span slot="trailing-meta">10 min</span>
  * </moni-list-item>
  *
- * <!-- Link item -->
+ * <!-- Elemento de enlace -->
  * <moni-list-item href="/settings" icon="settings">
- *   Settings
+ *   Ajustes
  * </moni-list-item>
  * ```
  *
- * @slot default       - Headline text (Line 1).
- * @slot supporting    - Supporting text (Line 2, requires `lines>=2`).
- * @slot meta          - Additional meta text (Line 3, requires `lines=3`).
- * @slot trailing-meta - Small text displayed on the far right edge.
+ * @slot default       - Texto del titular (Línea 1).
+ * @slot supporting    - Texto de soporte (Línea 2, requiere `lines>=2`).
+ * @slot meta          - Texto meta adicional (Línea 3, requiere `lines=3`).
+ * @slot trailing-meta - Texto pequeño mostrado en el borde derecho lejano.
  *
- * @csspart item          - The outer `<button>` or `<a>` container.
- * @csspart leading-icon  - Container for the leading icon/avatar.
- * @csspart text          - Container for the multi-line text block.
- * @csspart trailing-icon - Container for the trailing icon.
+ * @csspart item          - El contenedor externo `<button>` o `<a>`.
+ * @csspart leading-icon  - Contenedor para el icono/avatar inicial.
+ * @csspart text          - Contenedor para el bloque de texto multilínea.
+ * @csspart trailing-icon - Contenedor para el icono final.
  */
 export declare class MoniListItem extends MoniElement {
     lines: 1 | 2 | 3;
@@ -71,6 +71,19 @@ export declare class MoniListItem extends MoniElement {
     disabled: boolean;
     href: string;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el diseño de 3 zonas del elemento de lista: medios iniciales, contenido y elemento final.
+     *
+     * **Anatomía del elemento de lista M3:**
+     * - Zona inicial: avatar, icono o miniatura (`[slot="leading"]`).
+     * - Zona de contenido: `overline` opcional (etiqueta pequeña en mayúsculas), `title` (texto primario),
+     *   y `description` (texto secundario/de soporte). Cada uno se renderiza condicionalmente
+     *   solo cuando el atributo correspondiente no está vacío para evitar nodos DOM vacíos.
+     * - Zona final: metadatos, botón de icono, o radio/checkbox (`[slot="trailing"]`).
+     *
+     * Un `<slot>` vacío se renderiza en la zona de contenido como respaldo para que los consumidores
+     * puedan proyectar texto sin formato o marcado complejo directamente en el elemento.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-list-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-list-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBACa,YAAa,SAAQ,WAAW;IAE5C,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IACQ,IAAI,SAAM;IACV,MAAM,SAAM;IAEzC,YAAY,SAAM;IAC0B,MAAM,UAAS;IACf,QAAQ,UAAS;IAChC,IAAI,SAAM;IAEvC,OAAgB,MAAM,4BAoHpB;IAEO,MAAM;CA+Cf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"moni-list-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-list-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBACa,YAAa,SAAQ,WAAW;IAE5C,KAAK,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAK;IACQ,IAAI,SAAM;IACV,MAAM,SAAM;IAEzC,YAAY,SAAM;IAC0B,MAAM,UAAS;IACf,QAAQ,UAAS;IAChC,IAAI,SAAM;IAEvC,OAAgB,MAAM,4BA2HpB;IAEF;;;;;;;;;;;;OAYG;IACM,MAAM;CA+Cf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,gBAAgB,EAAE,YAAY,CAAC;KAC/B;CACD;AAED,eAAe,YAAY,CAAC"}

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

@@ -15,60 +15,60 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 List Item component.
+ * Componente Material Design 3 List Item (Elemento de Lista).
  *
- * A single row within a `<moni-list>`. List items display a headline and
- * optional supporting text, metadata, icons, or avatars.
+ * Una sola fila dentro de un `<moni-list>`. Los elementos de lista muestran un titular y
+ * opcionalmente texto de soporte, metadatos, iconos o avatares.
  *
- * **M3 spec reference:** `m3-docs/components/lists/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/lists/specs.md`
  *
- * **Line configurations:**
- * The `lines` attribute configures the layout and minimum height of the item:
- * - `lines="1"` (default) — 56dp min height. Only the headline slot is shown.
- * - `lines="2"` — 72dp min height. Shows headline and supporting text.
- * - `lines="3"` — 88dp min height. Shows headline, supporting text, and meta text.
+ * **Configuraciones de línea:**
+ * El atributo `lines` configura el diseño y la altura mínima del elemento:
+ * - `lines="1"` (por defecto) — altura mínima de 56dp. Solo se muestra el slot del titular.
+ * - `lines="2"` — altura mínima de 72dp. Muestra el titular y el texto de soporte.
+ * - `lines="3"` — altura mínima de 88dp. Muestra el titular, el texto de soporte y el texto meta.
  *
- * **Interactive behavior:**
- * By default, items render as `<button>` elements, gaining the M3 state layer
- * (hover, focus, and press ripple effects).
- * If the `href` attribute is provided, the item internally renders as an `<a>`
- * element, allowing native link routing and interactions while preserving the
- * list item styling.
+ * **Comportamiento interactivo:**
+ * Por defecto, los elementos se renderizan como elementos `<button>`, adquiriendo la capa de estado de M3
+ * (efectos de ondulación de hover, focus y press).
+ * Si se proporciona el atributo `href`, el elemento se renderiza internamente como un elemento `<a>`,
+ * permitiendo enrutamiento de enlaces nativos e interacciones mientras se preserva el
+ * estilo del elemento de lista.
  *
- * **Visual elements:**
- * - `icon` (attribute) — Material Symbol name for the leading icon (24dp).
- * - `avatar` (attribute) — URL for a leading circular image (40dp).
- * - `trailing-icon` (attribute) — Material Symbol name for the trailing icon.
+ * **Elementos visuales:**
+ * - `icon` (atributo) — Nombre de Material Symbol para el icono inicial (24dp).
+ * - `avatar` (atributo) — URL para una imagen circular inicial (40dp).
+ * - `trailing-icon` (atributo) — Nombre de Material Symbol para el icono final.
  *
  * @example
  * ```html
- * <!-- 1-line item with icon -->
+ * <!-- Elemento de 1 línea con icono -->
  * <moni-list-item icon="inbox">
- *   Inbox
+ *   Bandeja de entrada
  * </moni-list-item>
  *
- * <!-- 2-line item with avatar and trailing meta -->
+ * <!-- Elemento de 2 líneas con avatar y meta final -->
  * <moni-list-item lines="2" avatar="/user.jpg">
  *   Ali Connors
- *   <span slot="supporting">Brunch this weekend?</span>
+ *   <span slot="supporting">¿Brunch este fin de semana?</span>
  *   <span slot="trailing-meta">10 min</span>
  * </moni-list-item>
  *
- * <!-- Link item -->
+ * <!-- Elemento de enlace -->
  * <moni-list-item href="/settings" icon="settings">
- *   Settings
+ *   Ajustes
  * </moni-list-item>
  * ```
  *
- * @slot default       - Headline text (Line 1).
- * @slot supporting    - Supporting text (Line 2, requires `lines>=2`).
- * @slot meta          - Additional meta text (Line 3, requires `lines=3`).
- * @slot trailing-meta - Small text displayed on the far right edge.
+ * @slot default       - Texto del titular (Línea 1).
+ * @slot supporting    - Texto de soporte (Línea 2, requiere `lines>=2`).
+ * @slot meta          - Texto meta adicional (Línea 3, requiere `lines=3`).
+ * @slot trailing-meta - Texto pequeño mostrado en el borde derecho lejano.
  *
- * @csspart item          - The outer `<button>` or `<a>` container.
- * @csspart leading-icon  - Container for the leading icon/avatar.
- * @csspart text          - Container for the multi-line text block.
- * @csspart trailing-icon - Container for the trailing icon.
+ * @csspart item          - El contenedor externo `<button>` o `<a>`.
+ * @csspart leading-icon  - Contenedor para el icono/avatar inicial.
+ * @csspart text          - Contenedor para el bloque de texto multilínea.
+ * @csspart trailing-icon - Contenedor para el icono final.
  */
 let MoniListItem = class MoniListItem extends MoniElement {
     constructor() {
@@ -85,18 +85,25 @@ let MoniListItem = class MoniListItem extends MoniElement {
         sharedStyles,
         css `
 			:host {
+				display: block;
+				color: var(--on-surface);
+				background-color: transparent;
+				position: relative;
+				font-family: var(--font);
+				transition: background-color var(--speed2);
+			}
+
+			.row {
 				display: flex;
 				align-items: center;
 				gap: 1rem;
 				padding: 0.5rem 1rem;
 				min-block-size: 3.5rem;
-				color: var(--on-surface);
-				background-color: transparent;
+				box-sizing: border-box;
+				color: inherit;
 				text-decoration: none;
 				cursor: pointer;
-				position: relative;
-				font-family: var(--font);
-				transition: background-color var(--speed2);
+				width: 100%;
 			}
 
 			:host([active]) {
@@ -114,10 +121,10 @@ let MoniListItem = class MoniListItem extends MoniElement {
 				border-block-end: 0.0625rem solid var(--outline-variant);
 			}
 
-			:host([lines='2']) {
+			:host([lines='2']) .row {
 				min-block-size: 4.5rem;
 			}
-			:host([lines='3']) {
+			:host([lines='3']) .row {
 				min-block-size: 5.5rem;
 			}
 
@@ -198,6 +205,19 @@ let MoniListItem = class MoniListItem extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el diseño de 3 zonas del elemento de lista: medios iniciales, contenido y elemento final.
+     *
+     * **Anatomía del elemento de lista M3:**
+     * - Zona inicial: avatar, icono o miniatura (`[slot="leading"]`).
+     * - Zona de contenido: `overline` opcional (etiqueta pequeña en mayúsculas), `title` (texto primario),
+     *   y `description` (texto secundario/de soporte). Cada uno se renderiza condicionalmente
+     *   solo cuando el atributo correspondiente no está vacío para evitar nodos DOM vacíos.
+     * - Zona final: metadatos, botón de icono, o radio/checkbox (`[slot="trailing"]`).
+     *
+     * Un `<slot>` vacío se renderiza en la zona de contenido como respaldo para que los consumidores
+     * puedan proyectar texto sin formato o marcado complejo directamente en el elemento.
+     */
     render() {
         const leading = this.avatar
             ? html `<span
@@ -239,7 +259,7 @@ let MoniListItem = class MoniListItem extends MoniElement {
 					href=${this.href}
 					>${inner}</a
 				>`
-            : inner;
+            : html `<div class="row" part="row">${inner}</div>`;
     }
 };
 __decorate([