@moni-labs/moni-ui 0.3.1 → 0.3.2

package/dist/components/moni-nav.js

@@ -14,56 +14,56 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } 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).
  */
 let MoniNav = class MoniNav extends MoniElement {
     constructor() {
@@ -73,6 +73,12 @@ let MoniNav = class MoniNav extends MoniElement {
         this.modal = false;
         this.open = true;
         this.layout = 'auto';
+        /**
+         * 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.
+         */
         this._propagateToItems = () => {
             const items = this.querySelectorAll('moni-nav-item');
             items.forEach(item => {
@@ -82,25 +88,55 @@ let MoniNav = class MoniNav extends MoniElement {
             });
         };
     }
+    /**
+     * 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() {
         super.connectedCallback();
         this._onKeydown = this._onKeydown.bind(this);
         document.addEventListener('keydown', this._onKeydown);
     }
+    /**
+     * 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() {
         super.disconnectedCallback();
         document.removeEventListener('keydown', this._onKeydown);
     }
+    /**
+     * 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.
+     */
     _onKeydown(e) {
         if (e.key === 'Escape' && this.modal && this.open) {
             this.open = false;
         }
     }
+    /**
+     * 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.
+     */
     _closeModal() {
         if (this.modal) {
             this.open = false;
         }
     }
+    /**
+     * 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) {
         if (changed.has('placement') ||
             changed.has('variant') ||
@@ -259,6 +295,29 @@ let MoniNav = class MoniNav extends MoniElement {
 			}
 		`,
     ]; }
+    /**
+     * 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() {
         const isModalDrawer = this.variant === 'drawer' && this.modal;
         const classes = [this.placement, this.variant === 'drawer' ? 'max' : '']

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

@@ -6,122 +6,166 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Progress Indicator component.
+ * Componente Material Design 3 Progress Indicator (Indicador de Progreso).
  *
- * Progress indicators express an unspecified wait time or display the length
- * of a process. They inform users about the status of ongoing processes such
- * as loading an app, submitting a form, or saving updates.
+ * Los indicadores de progreso expresan un tiempo de espera no especificado o muestran la duración
+ * de un proceso. Informan a los usuarios sobre el estado de procesos en curso, como
+ * cargar una aplicación, enviar un formulario o guardar actualizaciones.
  *
- * **M3 spec reference:** `m3-docs/components/progress-indicators/specs.md`
+ * **Referencia a la especificación M3:** `m3-docs/components/progress-indicators/specs.md`
  *
- * **Variants:**
- * - `linear` (default) — A horizontal bar that fills left-to-right.
- * - `circular` — A circular SVG stroke indicator.
- * - `wavy` — An animated wave bar (Moni extension; not in M3 spec).
- * - `circular-wavy` — Circular + wave combo (Moni extension).
+ * **Variantes:**
+ * - `linear` (por defecto) — Una barra horizontal que se llena de izquierda a derecha.
+ * - `circular` — Un indicador circular SVG de trazo (stroke).
+ * - `wavy` — Una barra de ondas animada (extensión de Moni; no en la especificación M3).
+ * - `circular-wavy` — Combinación de circular + ondas (extensión de Moni).
  *
- * **Shadow DOM compatibility note:**
- * BeerCSS's progress uses native `<progress>` pseudo-elements (`::before`,
- * `::after`, `::webkit-progress-value`) and `mask-image`, which are blocked
- * by the UA shadow root in Chrome/Firefox. This component uses a plain `<div>`
- * wrapper that replicates the visual rules exactly, and an `<svg>` element
- * for the circular variant using SVG stroke-dashoffset animation for superior
- * cross-browser support compared to `conic-gradient`.
+ * **Nota de compatibilidad con Shadow DOM:**
+ * El progreso de BeerCSS usa pseudo-elementos `<progress>` nativos (`::before`,
+ * `::after`, `::webkit-progress-value`) y `mask-image`, que son bloqueados
+ * por la raíz shadow del User Agent en Chrome/Firefox. Este componente usa un envoltorio
+ * `<div>` simple que replica las reglas visuales exactamente, y un elemento `<svg>`
+ * para la variante circular usando animación SVG stroke-dashoffset para un soporte
+ * superior entre navegadores comparado con `conic-gradient`.
  *
- * **Percentage computation:**
- * `_pct` is computed in `willUpdate()` as `(value / max) * 100`, clamped to
- * `[0, 100]`. When `indeterminate` is set, `_pct` is fixed at `50` to drive
- * the infinite loop animation.
+ * **Cálculo de porcentaje:**
+ * `_pct` se calcula en `willUpdate()` como `(value / max) * 100`, restringido a
+ * `[0, 100]`. Cuando `indeterminate` está establecido, `_pct` se fija en `50` para impulsar
+ * la animación de bucle infinito.
  *
  * @example
  * ```html
- * <!-- Determinate linear progress -->
+ * <!-- Progreso lineal determinado -->
  * <moni-progress value="65" max="100"></moni-progress>
  *
- * <!-- Indeterminate circular progress (loading spinner) -->
+ * <!-- Progreso circular indeterminado (spinner de carga) -->
  * <moni-progress variant="circular" indeterminate></moni-progress>
  * ```
  *
- * @csspart bar      - The outer container div.
- * @csspart fill     - The inner fill element (linear variant).
- * @csspart svg      - The SVG element (circular variant).
+ * @csspart bar      - El div contenedor exterior.
+ * @csspart fill     - El elemento de llenado interior (variante lineal).
+ * @csspart svg      - El elemento SVG (variante circular).
  */
 export declare class MoniProgress extends MoniElement {
     /**
-     * Current progress value.
+     * Valor de progreso actual.
      *
-     * Must be in the range `[0, max]`. Values outside this range are clamped
-     * during percentage computation in `willUpdate()`. Ignored when
-     * `indeterminate` is set.
+     * Debe estar en el rango `[0, max]`. Los valores fuera de este rango se restringen
+     * durante el cálculo del porcentaje en `willUpdate()`. Se ignora cuando
+     * `indeterminate` está establecido.
      *
      * @default 0
      */
     value: number;
     /**
-     * Maximum value of the progress range.
+     * Valor máximo del rango de progreso.
      *
-     * Defaults to `100` so `value` can be set as a percentage directly.
-     * For non-percentage ranges (e.g. steps), set `max` to the total step count
-     * and `value` to the current step.
+     * Por defecto es `100` para que el `value` pueda establecerse como porcentaje directamente.
+     * Para rangos que no son porcentajes (ej. pasos), establece `max` al recuento total de pasos
+     * y `value` al paso actual.
      *
      * @default 100
      */
     max: number;
     /**
-     * Visual variant of the progress indicator.
+     * Variante visual del indicador de progreso.
      *
-     * - `'linear'` (default) — Horizontal fill bar.
-     * - `'circular'` — SVG circle with stroke-dashoffset animation.
-     * - `'wavy'` — Animated wave bar.
-     * - `'circular-wavy'` — Combination of circular and wave.
+     * - `'linear'` (por defecto) — Barra de llenado horizontal.
+     * - `'circular'` — Círculo SVG con animación stroke-dashoffset.
+     * - `'wavy'` — Barra de ondas animada.
+     * - `'circular-wavy'` — Combinación de circular y ondas.
      *
      * @default 'linear'
      */
     variant: 'linear' | 'circular' | 'wavy' | 'circular-wavy';
     /**
-     * Visual size of the progress indicator.
+     * Tamaño visual del indicador de progreso.
      *
-     * - `'small'`  — Compact; suitable for inline or tight layouts.
-     * - `'medium'` — Standard M3 size (default).
-     * - `'large'`  — Prominent; for full-page loading states.
+     * - `'small'`  — Compacto; adecuado para diseños en línea o ajustados.
+     * - `'medium'` — Tamaño estándar M3 (por defecto).
+     * - `'large'`  — Prominente; para estados de carga a pantalla completa.
      *
      * @default 'medium'
      */
     size: 'small' | 'medium' | 'large';
     /**
-     * When `true`, the indicator animates in an infinite loop regardless of `value`.
+     * Cuando es `true`, el indicador se anima en un bucle infinito independientemente del `value`.
      *
-     * Use for operations where the completion percentage is unknown
-     * (e.g. network requests, file processing). When `indeterminate` is set,
-     * `_pct` is fixed at `50` to drive a continuous sweep animation.
+     * Úsalo para operaciones donde el porcentaje de finalización es desconocido
+     * (ej. peticiones de red, procesamiento de archivos). Cuando `indeterminate` está establecido,
+     * `_pct` se fija en `50` para impulsar una animación de barrido continuo.
      *
      * @default false
      */
     indeterminate: boolean;
     /**
-     * Computed fill percentage in the range `[0, 100]`.
+     * Porcentaje de llenado calculado en el rango `[0, 100]`.
      *
-     * Updated in `willUpdate()` whenever `value`, `max`, or `indeterminate` changes.
-     * Used directly in CSS custom property bindings and SVG stroke attributes.
+     * Actualizado en `willUpdate()` cada vez que cambia `value`, `max` o `indeterminate`.
+     * Usado directamente en vinculaciones de propiedades personalizadas de CSS y atributos de trazo (stroke) SVG.
      *
      * @internal
      */
     private _pct;
     /**
-     * Computes the fill percentage before each render.
+     * Hook de ciclo de vida de Lit. Calcula la fracción de llenado antes de pintar.
      *
-     * Recalculates `_pct` whenever `value`, `max`, or `indeterminate` changes.
-     * The `Math.max(1, max)` guard prevents division-by-zero when `max` is 0.
+     * A diferencia de los componentes nativos, necesitamos computar explícitamente el
+     * progreso como un número de 0 a 100 para inyectarlo en variables CSS (Lineal)
+     * o calcular el `stroke-dashoffset` (Circular).
      *
-     * @param changed - Map of property names to their previous values.
+     * Se usa `Math.max(1, this.max)` para evitar un NaN / Infinity por división entre cero.
+     *
+     * @param changed - Mapa de propiedades reactivas que detonaron la actualización.
      */
     willUpdate(changed: Map<string, unknown>): void;
     static styles: import("lit").CSSResult[];
+    /**
+     * Motor de Renderizado: Linear Progress Bar.
+     *
+     * Renderiza un contenedor horizontal clásico. Pasa el porcentaje computado
+     * como variable CSS `--_p` para que el navegador lo interpole usando `transform: scaleX`.
+     * Expone los atributos ARIA completos para lectores de pantalla.
+     */
     private _renderLinear;
+    /**
+     * Motor de Renderizado: Wavy Progress Bar (Estilo BeerCSS/Material You).
+     *
+     * Utiliza un `<svg>` con una animación de `clip-path` y ondas sinusoidales
+     * inyectadas directamente. Ajusta matemáticamente el ancho y la posición de la onda
+     * dependiendo de si está en modo indeterminado (infinito) o con un progreso específico (`_pct`).
+     */
     private _renderWavy;
+    /**
+     * Algoritmo de renderizado para el spinner circular.
+     * Utiliza la técnica de SVG `stroke-dasharray` y `stroke-dashoffset` para animar o
+     * fijar el arco de progreso sin utilizar gradientes CSS cónicos (mejor compatibilidad).
+     *
+     * Matemáticas del círculo:
+     * Perímetro = 2 * π * radio.
+     * Para r=20, Perímetro ≈ 125.66. El porcentaje vacío se resta para desplazar (offset) el trazo.
+     */
     private _renderCircular;
-    /** Unique ID per instance for SVG clipPath IDs */
+    /** ID único por instancia para los IDs de SVG clipPath */
     private readonly _instanceId;
+    /**
+     * Despacha el renderizado al sub-renderizador privado apropiado basado en `variant`.
+     *
+     * **¿Por qué sub-renderizadores separados?**
+     * Cada variante de progreso tiene una estructura DOM fundamentalmente diferente:
+     * - Lineal: un `<div>` con un `<div>` de llenado escalado por una propiedad personalizada CSS.
+     * - Wavy (Ondulado): un `<svg>` con un `<clipPath>` animado para la máscara de onda sinusoidal.
+     * - Circular: un `<svg>` con `stroke-dasharray`/`stroke-dashoffset` para el arco.
+     *
+     * Fusionar los tres en una sola plantilla crearía un marcado profundamente condicional;
+     * dividir en `_renderLinear()`, `_renderWavy()` y `_renderCircular()` mantiene
+     * cada variante auto-contenida y permite una exposición específica de `@csspart` por variante.
+     *
+     * **`_instanceId`:**
+     * Los IDs de `<clipPath>` SVG deben ser únicos por documento; `_instanceId` es un
+     * sufijo aleatorio generado una vez en el momento de la instanciación para evitar colisiones de IDs cuando
+     * hay múltiples elementos `<moni-progress>` en la misma página.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-progress.d.ts","sourceRoot":"","sources":["../../src/components/moni-progress.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC5C;;;;;;;;OAQG;IACwC,KAAK,SAAK;IAErD;;;;;;;;OAQG;IACwC,GAAG,SAAO;IAErD;;;;;;;;;OASG;IAEH,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,eAAe,CAAY;IAErE;;;;;;;;OAQG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C;;;;;;;;OAQG;IACyC,aAAa,UAAS;IAElE;;;;;;;OAOG;IACM,OAAO,CAAC,IAAI,CAAK;IAE1B;;;;;;;OAOG;IACM,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQjD,OAAgB,MAAM,4BA6HpB;IAEF,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,WAAW;IAyDnB,OAAO,CAAC,eAAe;IAoDvB,kDAAkD;IAClD,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0C;IAE7D,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"moni-progress.d.ts","sourceRoot":"","sources":["../../src/components/moni-progress.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC5C;;;;;;;;OAQG;IACwC,KAAK,SAAK;IAErD;;;;;;;;OAQG;IACwC,GAAG,SAAO;IAErD;;;;;;;;;OASG;IAEH,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,eAAe,CAAY;IAErE;;;;;;;;OAQG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C;;;;;;;;OAQG;IACyC,aAAa,UAAS;IAElE;;;;;;;OAOG;IACM,OAAO,CAAC,IAAI,CAAK;IAE1B;;;;;;;;;;OAUG;IACM,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAQjD,OAAgB,MAAM,4BA6HpB;IAEF;;;;;;OAMG;IACH,OAAO,CAAC,aAAa;IAiBrB;;;;;;OAMG;IACH,OAAO,CAAC,WAAW;IAyDnB;;;;;;;;OAQG;IACH,OAAO,CAAC,eAAe;IAoDvB,0DAA0D;IAC1D,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA0C;IAEtE;;;;;;;;;;;;;;;;;OAiBG;IACM,MAAM;CAYf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}