@moni-labs/moni-ui 0.3.0 → 0.3.2

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

@@ -7,49 +7,49 @@
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Navigation Item component.
+ * Componente Material Design 3 Navigation Item (Elemento de Navegación).
  *
- * A single destination item within a `<moni-nav>` container. Renders as an
- * accessible `<a>` element with an icon, label, and M3 state layer.
+ * Un elemento de destino individual dentro de un contenedor `<moni-nav>`. Se renderiza como un
+ * elemento `<a>` accesible con un icono, etiqueta y capa de estado M3.
  *
- * **M3 spec references:**
- * - Navigation bar item: `m3-docs/components/navigation-bar/specs.md`
- * - Navigation rail item: `m3-docs/components/navigation-rail/specs.md`
- * - Navigation drawer item: `m3-docs/components/navigation-drawer/specs.md`
+ * **Referencias a la especificación M3:**
+ * - Elemento de barra de navegación: `m3-docs/components/navigation-bar/specs.md`
+ * - Elemento de riel de navegación: `m3-docs/components/navigation-rail/specs.md`
+ * - Elemento de cajón de navegación: `m3-docs/components/navigation-drawer/specs.md`
  *
- * **Layout adaptation:**
- * The `placement`, `variant`, and `layout` properties are forwarded from
- * the parent `<moni-nav>` (typically via attribute binding in the parent's
- * render method). The nav item uses these to conditionally render:
- * - Icon + label below (navigation bar).
- * - Icon only + horizontal label (rail).
- * - Icon + full label (drawer).
+ * **Adaptación de diseño:**
+ * Las propiedades `placement`, `variant` y `layout` son retransmitidas desde
+ * el padre `<moni-nav>` (típicamente a través de vinculación de atributos en el
+ * método render del padre). El elemento de navegación las usa para renderizar condicionalmente:
+ * - Icono + etiqueta abajo (barra de navegación).
+ * - Solo icono + etiqueta horizontal (riel).
+ * - Icono + etiqueta completa (cajón).
  *
- * **Responsive behavior:**
- * Uses `window.matchMedia('(min-width: 601px)')` to detect medium screens
- * and stores the result in `_isMediumScreen`. This drives automatic layout
- * switching between bar and rail styles.
+ * **Comportamiento responsivo:**
+ * Usa `window.matchMedia('(min-width: 601px)')` para detectar pantallas medianas
+ * y almacena el resultado en `_isMediumScreen`. Esto impulsa el cambio de diseño
+ * automático entre estilos de barra y riel.
  *
- * **Active state:**
- * The `active` attribute applies the M3 active indicator: a pill-shaped
- * `secondary-container` background behind the icon and a darker label color.
+ * **Estado activo:**
+ * El atributo `active` aplica el indicador activo M3: un fondo `secondary-container`
+ * en forma de píldora detrás del icono y un color de etiqueta más oscuro.
  *
  * @example
  * ```html
  * <moni-nav placement="bottom">
- *   <moni-nav-item href="/" icon="home" label="Home" active></moni-nav-item>
- *   <moni-nav-item href="/search" icon="search" label="Search"></moni-nav-item>
- *   <moni-nav-item href="/profile" icon="person" label="Profile">
- *     <moni-badge value="3"></moni-badge>  <!-- notification badge -->
+ *   <moni-nav-item href="/" icon="home" label="Inicio" active></moni-nav-item>
+ *   <moni-nav-item href="/search" icon="search" label="Buscar"></moni-nav-item>
+ *   <moni-nav-item href="/profile" icon="person" label="Perfil">
+ *     <moni-badge value="3"></moni-badge>  <!-- insignia de notificación -->
  *   </moni-nav-item>
  * </moni-nav>
  * ```
  *
- * @slot default - Additional content slotted after the icon (e.g. `<moni-badge>`).
+ * @slot default - Contenido adicional colocado después del icono (ej. `<moni-badge>`).
  *
- * @csspart item   - The outer `<a>` element.
- * @csspart icon   - The icon container.
- * @csspart label  - The label text element.
+ * @csspart item   - El elemento exterior `<a>`.
+ * @csspart icon   - El contenedor del icono.
+ * @csspart label  - El elemento de texto de la etiqueta.
  */
 export declare class MoniNavItem extends MoniElement {
     href: string;
@@ -62,11 +62,41 @@ export declare class MoniNavItem extends MoniElement {
     layout: string;
     private _isMediumScreen;
     private _query;
+    /**
+     * Hook de inicialización (Lit).
+     * Vincula un listener de `MediaQueryList` nativo para poder reaccionar en tiempo real
+     * cuando la pantalla cruza el breakpoint de 600px, adaptando la disposición
+     * (horizontal vs vertical) del ícono y la etiqueta automáticamente.
+     */
     connectedCallback(): void;
+    /**
+     * Hook de destrucción (Lit).
+     * Desvincula rigurosamente el listener del `matchMedia` para
+     * prevenir fugas de memoria (memory leaks).
+     */
     disconnectedCallback(): void;
+    /**
+     * Callback asíncrono disparado nativamente por el navegador cuando
+     * cambian las condiciones del Media Query.
+     * Actualiza el estado reactivo `_isMediumScreen` lo que fuerza a Lit a re-renderizar.
+     */
     private _handleQueryChange;
     get computedLayout(): 'vertical' | 'horizontal';
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el elemento de navegación como un `<a>` o `<button>` con ranura de icono, etiqueta y badge (insignia).
+     *
+     * **Indicador activo:**
+     * La barra de navegación M3 usa un indicador en forma de píldora detrás del icono del
+     * elemento activo. Esto se implementa como el pseudo-elemento `::before` en
+     * `.item` que crece de `0` a `64px` de ancho usando una transición CSS.
+     * La clase `active` en `.item` activa la transición y también establece
+     * `aria-current="page"` para lectores de pantalla.
+     *
+     * **Ranura para badge (insignia):**
+     * `[slot="badge"]` se renderiza posicionado absolutamente sobre la esquina superior final del icono.
+     * Los consumidores colocan un `<moni-badge>` aquí para cuentas de notificaciones.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-nav-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-nav-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBACa,WAAY,SAAQ,WAAW;IACd,IAAI,SAAO;IACX,MAAM,SAAM;IACZ,IAAI,SAAM;IACV,KAAK,SAAM;IACI,MAAM,UAAS;IAC9B,SAAS,SAAS;IAClB,OAAO,SAAU;IACjB,MAAM,SAAU;IAG7C,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,MAAM,CAEN;IAEC,iBAAiB;IAQjB,oBAAoB;IAO7B,OAAO,CAAC,kBAAkB,CAExB;IAEF,IAAI,cAAc,IAAI,UAAU,GAAG,YAAY,CAQ9C;IAED,OAAgB,MAAM,4BAmIpB;IAEO,MAAM;CAqCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"moni-nav-item.d.ts","sourceRoot":"","sources":["../../src/components/moni-nav-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,qBACa,WAAY,SAAQ,WAAW;IACd,IAAI,SAAO;IACX,MAAM,SAAM;IACZ,IAAI,SAAM;IACV,KAAK,SAAM;IACI,MAAM,UAAS;IAC9B,SAAS,SAAS;IAClB,OAAO,SAAU;IACjB,MAAM,SAAU;IAG7C,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,MAAM,CAEN;IAER;;;;;OAKG;IACM,iBAAiB;IAQ1B;;;;OAIG;IACM,oBAAoB;IAO7B;;;;OAIG;IACH,OAAO,CAAC,kBAAkB,CAExB;IAEF,IAAI,cAAc,IAAI,UAAU,GAAG,YAAY,CAQ9C;IAED,OAAgB,MAAM,4BAmIpB;IAEF;;;;;;;;;;;;;OAaG;IACM,MAAM;CAqCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD;AAED,eAAe,WAAW,CAAC"}

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

@@ -16,49 +16,49 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Navigation Item component.
+ * Componente Material Design 3 Navigation Item (Elemento de Navegación).
  *
- * A single destination item within a `<moni-nav>` container. Renders as an
- * accessible `<a>` element with an icon, label, and M3 state layer.
+ * Un elemento de destino individual dentro de un contenedor `<moni-nav>`. Se renderiza como un
+ * elemento `<a>` accesible con un icono, etiqueta y capa de estado M3.
  *
- * **M3 spec references:**
- * - Navigation bar item: `m3-docs/components/navigation-bar/specs.md`
- * - Navigation rail item: `m3-docs/components/navigation-rail/specs.md`
- * - Navigation drawer item: `m3-docs/components/navigation-drawer/specs.md`
+ * **Referencias a la especificación M3:**
+ * - Elemento de barra de navegación: `m3-docs/components/navigation-bar/specs.md`
+ * - Elemento de riel de navegación: `m3-docs/components/navigation-rail/specs.md`
+ * - Elemento de cajón de navegación: `m3-docs/components/navigation-drawer/specs.md`
  *
- * **Layout adaptation:**
- * The `placement`, `variant`, and `layout` properties are forwarded from
- * the parent `<moni-nav>` (typically via attribute binding in the parent's
- * render method). The nav item uses these to conditionally render:
- * - Icon + label below (navigation bar).
- * - Icon only + horizontal label (rail).
- * - Icon + full label (drawer).
+ * **Adaptación de diseño:**
+ * Las propiedades `placement`, `variant` y `layout` son retransmitidas desde
+ * el padre `<moni-nav>` (típicamente a través de vinculación de atributos en el
+ * método render del padre). El elemento de navegación las usa para renderizar condicionalmente:
+ * - Icono + etiqueta abajo (barra de navegación).
+ * - Solo icono + etiqueta horizontal (riel).
+ * - Icono + etiqueta completa (cajón).
  *
- * **Responsive behavior:**
- * Uses `window.matchMedia('(min-width: 601px)')` to detect medium screens
- * and stores the result in `_isMediumScreen`. This drives automatic layout
- * switching between bar and rail styles.
+ * **Comportamiento responsivo:**
+ * Usa `window.matchMedia('(min-width: 601px)')` para detectar pantallas medianas
+ * y almacena el resultado en `_isMediumScreen`. Esto impulsa el cambio de diseño
+ * automático entre estilos de barra y riel.
  *
- * **Active state:**
- * The `active` attribute applies the M3 active indicator: a pill-shaped
- * `secondary-container` background behind the icon and a darker label color.
+ * **Estado activo:**
+ * El atributo `active` aplica el indicador activo M3: un fondo `secondary-container`
+ * en forma de píldora detrás del icono y un color de etiqueta más oscuro.
  *
  * @example
  * ```html
  * <moni-nav placement="bottom">
- *   <moni-nav-item href="/" icon="home" label="Home" active></moni-nav-item>
- *   <moni-nav-item href="/search" icon="search" label="Search"></moni-nav-item>
- *   <moni-nav-item href="/profile" icon="person" label="Profile">
- *     <moni-badge value="3"></moni-badge>  <!-- notification badge -->
+ *   <moni-nav-item href="/" icon="home" label="Inicio" active></moni-nav-item>
+ *   <moni-nav-item href="/search" icon="search" label="Buscar"></moni-nav-item>
+ *   <moni-nav-item href="/profile" icon="person" label="Perfil">
+ *     <moni-badge value="3"></moni-badge>  <!-- insignia de notificación -->
  *   </moni-nav-item>
  * </moni-nav>
  * ```
  *
- * @slot default - Additional content slotted after the icon (e.g. `<moni-badge>`).
+ * @slot default - Contenido adicional colocado después del icono (ej. `<moni-badge>`).
  *
- * @csspart item   - The outer `<a>` element.
- * @csspart icon   - The icon container.
- * @csspart label  - The label text element.
+ * @csspart item   - El elemento exterior `<a>`.
+ * @csspart icon   - El contenedor del icono.
+ * @csspart label  - El elemento de texto de la etiqueta.
  */
 let MoniNavItem = class MoniNavItem extends MoniElement {
     constructor() {
@@ -75,10 +75,21 @@ let MoniNavItem = class MoniNavItem extends MoniElement {
         this._query = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
             ? window.matchMedia('(min-width: 601px)')
             : null;
+        /**
+         * Callback asíncrono disparado nativamente por el navegador cuando
+         * cambian las condiciones del Media Query.
+         * Actualiza el estado reactivo `_isMediumScreen` lo que fuerza a Lit a re-renderizar.
+         */
         this._handleQueryChange = (e) => {
             this._isMediumScreen = e.matches;
         };
     }
+    /**
+     * Hook de inicialización (Lit).
+     * Vincula un listener de `MediaQueryList` nativo para poder reaccionar en tiempo real
+     * cuando la pantalla cruza el breakpoint de 600px, adaptando la disposición
+     * (horizontal vs vertical) del ícono y la etiqueta automáticamente.
+     */
     connectedCallback() {
         super.connectedCallback();
         if (this._query) {
@@ -86,6 +97,11 @@ let MoniNavItem = class MoniNavItem extends MoniElement {
             this._isMediumScreen = this._query.matches;
         }
     }
+    /**
+     * Hook de destrucción (Lit).
+     * Desvincula rigurosamente el listener del `matchMedia` para
+     * prevenir fugas de memoria (memory leaks).
+     */
     disconnectedCallback() {
         super.disconnectedCallback();
         if (this._query) {
@@ -233,6 +249,20 @@ let MoniNavItem = class MoniNavItem extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el elemento de navegación como un `<a>` o `<button>` con ranura de icono, etiqueta y badge (insignia).
+     *
+     * **Indicador activo:**
+     * La barra de navegación M3 usa un indicador en forma de píldora detrás del icono del
+     * elemento activo. Esto se implementa como el pseudo-elemento `::before` en
+     * `.item` que crece de `0` a `64px` de ancho usando una transición CSS.
+     * La clase `active` en `.item` activa la transición y también establece
+     * `aria-current="page"` para lectores de pantalla.
+     *
+     * **Ranura para badge (insignia):**
+     * `[slot="badge"]` se renderiza posicionado absolutamente sobre la esquina superior final del icono.
+     * Los consumidores colocan un `<moni-badge>` aquí para cuentas de notificaciones.
+     */
     render() {
         const isHorizontal = this.computedLayout === 'horizontal';
         const iconEl = html `

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

@@ -6,56 +6,56 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Navigation container component.
+ * Componente contenedor de Navegación Material Design 3.
  *
- * `<moni-nav>` is the container that wraps `<moni-nav-item>` elements and
- * controls the M3 navigation pattern: navigation bar, navigation rail, or
- * navigation drawer.
+ * `<moni-nav>` es el contenedor que envuelve los elementos `<moni-nav-item>` y
+ * controla el patrón de navegación M3: barra de navegación, riel de navegación o
+ * cajón de navegación.
  *
- * **M3 spec references:**
- * - Navigation bar: `m3-docs/components/navigation-bar/specs.md`
- * - Navigation rail: `m3-docs/components/navigation-rail/specs.md`
- * - Navigation drawer: `m3-docs/components/navigation-drawer/specs.md`
+ * **Referencias a la especificación M3:**
+ * - Barra de navegación: `m3-docs/components/navigation-bar/specs.md`
+ * - Riel de navegación: `m3-docs/components/navigation-rail/specs.md`
+ * - Cajón de navegación: `m3-docs/components/navigation-drawer/specs.md`
  *
- * **Navigation patterns:**
- * - **Navigation bar** (`placement="bottom"`) — Horizontal bar of icon+label
- *   items at the bottom of the screen. Best for 3–5 top-level destinations.
- * - **Navigation rail** (`variant="rail"`) — Vertical rail of icon+label items
- *   on the side of the screen. Best for medium/expanded breakpoints.
- * - **Standard drawer** (`variant="drawer"`) — Always-visible vertical panel
- *   with full text labels. No scrim. Best for large screens.
- * - **Modal drawer** (`variant="drawer" modal`) — Overlay drawer with scrim.
- *   Opened/closed via the `open` property. Traps keyboard focus while open.
- *   Closes on `Escape` key press.
+ * **Patrones de navegación:**
+ * - **Barra de navegación** (`placement="bottom"`) — Barra horizontal de elementos de icono+etiqueta
+ *   en la parte inferior de la pantalla. Ideal para 3–5 destinos de nivel superior.
+ * - **Riel de navegación** (`variant="rail"`) — Riel vertical de elementos de icono+etiqueta
+ *   en el lateral de la pantalla. Ideal para puntos de interrupción medianos/expandidos.
+ * - **Cajón estándar** (`variant="drawer"`) — Panel vertical siempre visible
+ *   con etiquetas de texto completo. Sin atenuación (scrim). Ideal para pantallas grandes.
+ * - **Cajón modal** (`variant="drawer" modal`) — Cajón superpuesto con atenuación (scrim).
+ *   Se abre/cierra a través de la propiedad `open`. Atrapa el foco del teclado mientras está abierto.
+ *   Se cierra al presionar la tecla `Escape`.
  *
- * **Keyboard handling:**
- * When `modal=true`, the component adds a global `keydown` listener in
- * `connectedCallback` that closes the drawer on `Escape`. The listener is
- * removed in `disconnectedCallback`.
+ * **Manejo del teclado:**
+ * Cuando `modal=true`, el componente añade un listener global de `keydown` en
+ * `connectedCallback` que cierra el cajón con `Escape`. El listener se
+ * elimina en `disconnectedCallback`.
  *
  * @example
  * ```html
- * <!-- Bottom navigation bar -->
+ * <!-- Barra de navegación inferior -->
  * <moni-nav placement="bottom">
- *   <moni-nav-item icon="home" label="Home" active></moni-nav-item>
- *   <moni-nav-item icon="search" label="Search"></moni-nav-item>
- *   <moni-nav-item icon="person" label="Profile"></moni-nav-item>
+ *   <moni-nav-item icon="home" label="Inicio" active></moni-nav-item>
+ *   <moni-nav-item icon="search" label="Buscar"></moni-nav-item>
+ *   <moni-nav-item icon="person" label="Perfil"></moni-nav-item>
  * </moni-nav>
  *
- * <!-- Modal navigation drawer -->
+ * <!-- Cajón de navegación modal -->
  * <moni-nav variant="drawer" modal open placement="left">
- *   <h3 slot="header">My App</h3>
- *   <moni-nav-item icon="home" label="Home" active></moni-nav-item>
- *   <moni-nav-item icon="settings" label="Settings"></moni-nav-item>
+ *   <h3 slot="header">Mi App</h3>
+ *   <moni-nav-item icon="home" label="Inicio" active></moni-nav-item>
+ *   <moni-nav-item icon="settings" label="Ajustes"></moni-nav-item>
  * </moni-nav>
  * ```
  *
- * @slot default - `<moni-nav-item>` children.
- * @slot header  - Content above the nav items (drawer variant only).
- * @slot footer  - Content below the nav items (drawer variant only).
+ * @slot default - Hijos `<moni-nav-item>`.
+ * @slot header  - Contenido encima de los elementos de navegación (solo variante drawer).
+ * @slot footer  - Contenido debajo de los elementos de navegación (solo variante drawer).
  *
- * @csspart nav     - The inner `<nav>` element.
- * @csspart scrim   - The backdrop scrim (modal drawer only).
+ * @csspart nav     - El elemento `<nav>` interior.
+ * @csspart scrim   - El atenuador de fondo (scrim) (solo cajón modal).
  */
 export declare class MoniNav extends MoniElement {
     placement: 'top' | 'bottom' | 'left' | 'right';
@@ -63,13 +63,72 @@ export declare class MoniNav extends MoniElement {
     modal: boolean;
     open: boolean;
     layout: 'vertical' | 'horizontal' | 'auto';
+    /**
+     * Hook de inicialización (Lit).
+     * Vincula el listener global para teclado, asegurando que `_onKeydown` mantenga
+     * el contexto correcto de `this` al ser disparado por el documento.
+     */
     connectedCallback(): void;
+    /**
+     * Hook de destrucción (Lit).
+     * Remueve el listener de teclado global para evitar fugas de memoria (memory leaks)
+     * cuando el componente de navegación es retirado del DOM.
+     */
     disconnectedCallback(): void;
+    /**
+     * Manejador global de eventos de teclado.
+     * Implementa el patrón de accesibilidad estándar: Si el drawer es modal y está abierto,
+     * presionar la tecla Escape forzará su cierre inmediato.
+     */
     private _onKeydown;
+    /**
+     * Función de cierre rápido invocada típicamente al hacer clic en el backdrop/scrim.
+     * Modifica directamente la propiedad `open` a false si la navegación opera en modo modal.
+     */
     private _closeModal;
+    /**
+     * Propaga los cambios estructurales a todos los hijos `<moni-nav-item>` insertados en la ranura.
+     *
+     * Cuando `placement`, `variant`, `layout`, `modal` o `open` cambian en el
+     * `<moni-nav>` padre, los elementos hijos `<moni-nav-item>` también deben actualizar su estado
+     * de diseño calculado (layout) y de apertura. Esto se hace imperativamente a través de `_propagateToItems()` en lugar
+     * de a través de la API de Contexto de Lit para evitar la sobrecarga del Proveedor de Contexto para una simple
+     * relación padre→hijo.
+     *
+     * @param changed - Mapa de los nombres de las propiedades reactivas que desencadenaron este ciclo de actualización.
+     */
     updated(changed: Map<string, unknown>): void;
+    /**
+     * Patrón de inyección de propiedades "Top-Down" sin usar Context API.
+     * Pasa las variables arquitectónicas (`placement`, `variant`, `layout`) a los `moni-nav-item`
+     * hijos para que ellos puedan adaptar su CSS (ej: ocultar la etiqueta en la variante 'rail').
+     * Se lanza al inicializar o cada vez que cambia una prop en el contenedor.
+     */
     private _propagateToItems;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el contenedor de navegación con su superposición opcional de atenuación (scrim).
+     *
+     * **Composición de clases:**
+     * - `this.placement` (`'left'`, `'right'`, `'bottom'`) — posiciona el cajón
+     *   o la barra de navegación inferior contra el borde correcto de la ventana gráfica.
+     * - `'max'` — agregado cuando `variant='drawer'`; expande la navegación a toda altura
+     *   y ancho según la especificación M3 Navigation Drawer.
+     *
+     * **Atenuación de cajón modal (Modal drawer scrim):**
+     * `isModalDrawer` es `true` cuando `variant='drawer'` Y `modal=true`. En este
+     * caso, se renderiza un div `.scrim` detrás del cajón como una superposición
+     * de hacer-clic-para-descartar. La atenuación tiene `aria-hidden="true"` ya que es puramente visual.
+     *
+     * **Atributo `[open]`:**
+     * La vinculación `?open=${this.open}` agrega/elimina el atributo `open` en el
+     * elemento `<nav>`. Los selectores de atributo CSS `[open]` impulsan la transición
+     * de deslizamiento hacia adentro/afuera, manteniendo la animación completamente en CSS (no se requiere GSAP para este componente).
+     *
+     * **Punto de referencia ARIA (ARIA landmark):**
+     * El elemento `<nav>` se usa directamente (no un `<div role="navigation">`) para
+     * proporcionar un punto de referencia ARIA implícito al que pueden saltar los lectores de pantalla.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-nav.d.ts","sourceRoot":"","sources":["../../src/components/moni-nav.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,OAAQ,SAAQ,WAAW;IAEvC,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAS;IAEvD,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAU;IACQ,KAAK,UAAS;IACd,IAAI,UAAQ;IAExD,MAAM,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAU;IAE3C,iBAAiB;IAMjB,oBAAoB;IAK7B,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,WAAW;IAMV,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAY9C,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAgB,MAAM,4BAoJpB;IAEO,MAAM;CAyBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"moni-nav.d.ts","sourceRoot":"","sources":["../../src/components/moni-nav.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,qBACa,OAAQ,SAAQ,WAAW;IAEvC,SAAS,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAS;IAEvD,OAAO,EAAE,MAAM,GAAG,QAAQ,CAAU;IACQ,KAAK,UAAS;IACd,IAAI,UAAQ;IAExD,MAAM,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAU;IAEpD;;;;OAIG;IACM,iBAAiB;IAM1B;;;;OAIG;IACM,oBAAoB;IAK7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAMlB;;;OAGG;IACH,OAAO,CAAC,WAAW;IAMnB;;;;;;;;;;OAUG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAY9C;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB,CAOvB;IAEF,OAAgB,MAAM,4BAoJpB;IAEF;;;;;;;;;;;;;;;;;;;;;;OAsBG;IACM,MAAM;CAyBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD;AAED,eAAe,OAAO,CAAC"}