@moni-labs/moni-ui 0.3.0 → 0.3.2

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

@@ -1 +1 @@
-{"version":3,"file":"moni-slider.d.ts","sourceRoot":"","sources":["../../src/components/moni-slider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,UAAW,SAAQ,WAAW;IACb,IAAI,SAAM;IACV,GAAG,SAAO;IACV,GAAG,SAAS;IACZ,IAAI,SAAM;IAEvC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACmB,SAAS,SAAM;IAErE,kBAAkB,EAAE,KAAK,GAAG,QAAQ,CAAS;IAE7C,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAGrB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,KAAK,UAAS;IACd,SAAS,UAAS;IACK,UAAU,UAAS;IAEtF,8EAA8E;IACrE,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;IAElC,IACI,KAAK,IACI,MAAM,CADgB;IACnC,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAsB;IAEzC,IACI,QAAQ,IACI,MAAM,CADmB;IACzC,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAyB;IAE/C,OAAO,CAAC,IAAI;IAOZ,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,SAAS;IAUjB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAsBvB,OAAgB,MAAM,4BA0MpB;IAEO,MAAM;CAkDf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"moni-slider.d.ts","sourceRoot":"","sources":["../../src/components/moni-slider.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,UAAW,SAAQ,WAAW;IAC1C;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;;OAIG;IAC0B,GAAG,SAAO;IAEvC;;;;OAIG;IAC0B,GAAG,SAAS;IAEzC;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAEH,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IAEnC;;;OAGG;IACmD,SAAS,SAAM;IAErE;;;;OAIG;IAEH,kBAAkB,EAAE,KAAK,GAAG,QAAQ,CAAS;IAE7C;;;;OAIG;IAEH,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAEjE;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,KAAK,UAAS;IAE1D;;;OAGG;IACyC,SAAS,UAAS;IAE9D;;;OAGG;IACgE,UAAU,UAAS;IAEtF,iGAAiG;IACxF,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAQ;IAElC;;;OAGG;IACH,IACI,KAAK,IAKI,MAAM,CALgB;IACnC;;;OAGG;IACH,IAAI,KAAK,CAAC,CAAC,EAAE,MAAM,EAAsB;IAEzC;;;OAGG;IACH,IACI,QAAQ,IAII,MAAM,CAJmB;IACzC;;OAEG;IACH,IAAI,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAyB;IAE/C;;;OAGG;IACH,OAAO,CAAC,IAAI;IAQZ;;;;OAIG;IACH,OAAO,CAAC,QAAQ;IAWhB;;;OAGG;IACH,OAAO,CAAC,SAAS;IAUjB;;;;;;OAMG;IACH,OAAO,CAAC,eAAe;IAsBvB,OAAgB,MAAM,4BA0MpB;IAEF;;;;;;;;;;;;;;;;;;;;;;;;;;OA0BG;IACM,MAAM;CAkDf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}

package/dist/components/moni-slider.js

@@ -16,90 +16,170 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Slider component.
+ * Componente Material Design 3 Slider (Control deslizante).
  *
- * Sliders allow users to select a single value or a range of values from a
- * continuous or discrete scale.
+ * Los sliders permiten a los usuarios seleccionar un solo valor o un rango de valores
+ * desde una escala continua o discreta.
  *
- * **M3 spec reference:** `m3-docs/components/sliders/specs.md`
+ * **Referencia a la especificación M3:** `m3-docs/components/sliders/specs.md`
  *
- * **Slider modes:**
- * - **Continuous** (default) — Smooth drag between `min` and `max`. Use when
- *   the exact value does not need to be defined by the user (e.g. volume).
- * - **Discrete** — Set `step` to snap to discrete intervals. Tick marks
- *   appear via the native `<datalist>` element in Chrome/Edge. Firefox does
- *   not render datalist ticks for range inputs.
- * - **Range** (`range` attribute) — Two thumbs that define a minimum and
- *   maximum value within the slider's extent.
- * - **Vertical** (`vertical` attribute) — 90° rotated slider.
+ * **Modos de Slider:**
+ * - **Continuo (Continuous)** (por defecto) — Arrastre suave entre `min` y `max`. Úsalo cuando
+ *   no sea necesario que el usuario defina un valor exacto (ej. volumen).
+ * - **Discreto (Discrete)** — Configura `step` para ajustarse a intervalos discretos. Las marcas
+ *   (tick marks) aparecen a través del elemento nativo `<datalist>` en Chrome/Edge. Firefox no
+ *   renderiza marcas de datalist para inputs de tipo rango.
+ * - **Rango (Range)** (atributo `range`) — Dos controles (thumbs) que definen un valor mínimo y
+ *   máximo dentro de la extensión del slider.
+ * - **Vertical** (atributo `vertical`) — Slider rotado 90°.
  *
- * **Value label tooltip:**
- * When `indicator` is set, the current value is displayed in a tooltip above
- * (or below, via `indicator-placement`) the active thumb during focus/drag.
+ * **Tooltip indicador de valor (Value label tooltip):**
+ * Cuando se configura `indicator`, el valor actual se muestra en un tooltip por encima
+ * (o por debajo, a través de `indicator-placement`) del control activo durante el foco/arrastre.
  *
- * **Tick marks:**
- * - `ticks` attribute: adds datalist with marks at `min` and `max` only.
- * - `tick-interval` attribute: generates datalist options at every N units
- *   between `min` and `max`, creating visible tick marks at those positions.
+ * **Marcas (Tick marks):**
+ * - Atributo `ticks`: agrega datalist con marcas solo en `min` y `max`.
+ * - Atributo `tick-interval`: genera opciones de datalist cada N unidades
+ *   entre `min` y `max`, creando marcas visibles en esas posiciones.
  *
- * **Internal state management:**
- * Uses `@state()` for `_value` and `_valueHigh` so the fill track width and
- * tooltip position update reactively on every drag `input` event without
- * waiting for the `change` event.
+ * **Manejo del estado interno:**
+ * Usa `@state()` para `_value` y `_valueHigh` de modo que el ancho de la pista de llenado y
+ * la posición del tooltip se actualicen de forma reactiva en cada evento `input` de arrastre sin
+ * esperar al evento `change`.
  *
- * @fires change - Bubbles and is composed. Fired when dragging ends and the
- *                 value is committed. Read `element.value` for the new value.
- * @fires input  - Fired on every drag step. Read `element.value` for the
- *                 live value during drag.
+ * @fires change - Burbujea y está compuesto. Se dispara cuando termina el arrastre y el
+ *                 valor se confirma. Lee `element.value` para el nuevo valor.
+ * @fires input  - Se dispara en cada paso del arrastre. Lee `element.value` para el
+ *                 valor en vivo durante el arrastre.
  *
  * @example
  * ```html
- * <!-- Continuous slider -->
+ * <!-- Slider continuo -->
  * <moni-slider name="volume" min="0" max="100" value="60"></moni-slider>
  *
- * <!-- Discrete slider with ticks every 10 units -->
+ * <!-- Slider discreto con marcas cada 10 unidades -->
  * <moni-slider step="10" tick-interval="10" indicator></moni-slider>
  *
- * <!-- Range slider -->
+ * <!-- Slider de rango -->
  * <moni-slider range min="0" max="100" value="20" value-high="80"></moni-slider>
  * ```
  *
- * @csspart slider    - The outer slider container.
- * @csspart track     - The track background.
- * @csspart fill      - The filled portion of the track.
- * @csspart indicator - The value label tooltip.
+ * @csspart slider    - El contenedor exterior del slider.
+ * @csspart track     - El fondo de la pista.
+ * @csspart fill      - La porción llena de la pista.
+ * @csspart indicator - El tooltip de la etiqueta de valor.
  */
 let MoniSlider = class MoniSlider extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Nombre del input del slider, usado en el envío de formularios.
+         * @type {string}
+         */
         this.name = '';
+        /**
+         * Valor mínimo del slider.
+         * @type {string}
+         * @default '0'
+         */
         this.min = '0';
+        /**
+         * Valor máximo del slider.
+         * @type {string}
+         * @default '100'
+         */
         this.max = '100';
+        /**
+         * Granularidad del slider. Debe ser un número positivo.
+         * @type {string}
+         */
         this.step = '';
+        /**
+         * Anula (overrides) el intervalo predeterminado de las marcas cuando `ticks` es verdadero.
+         * @type {number | null}
+         */
         this.tickInterval = null;
+        /**
+         * Nombre del icono (Material Symbols) mostrado dentro del control (thumb) del slider.
+         * @type {string}
+         */
         this.insetIcon = '';
+        /**
+         * Ubicación del tooltip indicador de valor.
+         * @type {'top' | 'bottom'}
+         * @default 'top'
+         */
         this.indicatorPlacement = 'top';
+        /**
+         * Grosor/tamaño de la pista y el control (thumb) del slider.
+         * @type {'tiny' | 'small' | 'medium' | 'large' | 'extra'}
+         * @default 'medium'
+         */
         this.size = 'medium';
-        // Boolean attributes
+        /**
+         * Habilita el modo de rango (dos controles: `value` y `valueEnd`).
+         * @type {boolean}
+         */
         this.range = false;
+        /**
+         * Deshabilita el slider.
+         * @type {boolean}
+         */
         this.disabled = false;
+        /**
+         * Renderiza marcas (tick marks) a lo largo de la pista en cada intervalo de paso.
+         * @type {boolean}
+         */
         this.ticks = false;
+        /**
+         * Muestra un indicador de tooltip mostrando el(los) valor(es) actual(es) mientras se arrastra.
+         * @type {boolean}
+         */
         this.indicator = false;
+        /**
+         * Renderiza el slider de forma vertical en lugar de horizontal.
+         * @type {boolean}
+         */
         this.isVertical = false;
-        /** Internal reactive state — triggers CSS var updates on every input event */
+        /** Estado reactivo interno — dispara actualizaciones de variables CSS en cada evento de input */
         this._value = '50';
         this._valueEnd = '75';
     }
+    /**
+     * El valor primario actual del slider (o el límite inferior en modo de rango).
+     * @type {string}
+     */
     get value() { return this._value; }
+    /**
+     * Intercepta asignaciones imperativas (`element.value = "X"`) para actualizar
+     * el estado interno de Lit, garantizando reactividad instantánea del DOM.
+     */
     set value(v) { this._value = v; }
+    /**
+     * El valor límite superior actual (solo usado cuando `range` es verdadero).
+     * @type {string}
+     */
     get valueEnd() { return this._valueEnd; }
+    /**
+     * Setter reactivo para el límite superior (usado exclusivamente en modo `range`).
+     */
     set valueEnd(v) { this._valueEnd = v; }
+    /**
+     * Calcula el porcentaje de llenado de la barra (0-100) basándose en el valor actual,
+     * el mínimo y el máximo. Se utiliza intensivamente para definir variables CSS (como `--_pct`).
+     */
     _pct(v) {
         const min = parseFloat(this.min) || 0;
         const max = parseFloat(this.max) || 100;
         const val = parseFloat(v) || 0;
+        // Math.max/min asegura que no desborde si por alguna razón val > max o val < min
         return Math.max(0, Math.min(100, ((val - min) / (max - min)) * 100));
     }
+    /**
+     * Maneja el evento nativo "input" de los inputs type="range" subyacentes.
+     * Se dispara contínuamente mientras el usuario arrastra el slider.
+     * Actualiza el estado reactivo inmediatamente para que la UI responda en tiempo real (60fps).
+     */
     _onInput(e, index) {
         const target = e.target;
         if (index === 0) {
@@ -108,8 +188,13 @@ let MoniSlider = class MoniSlider extends MoniElement {
         else {
             this._valueEnd = target.value;
         }
+        // Redisparamos el evento hacia afuera para que los frameworks (React/Vue/Angular) puedan atraparlo
         this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
     }
+    /**
+     * Maneja el evento nativo "change", que se dispara solo cuando el usuario SUELTA el slider
+     * (al terminar la interacción). Útil para peticiones HTTP pesadas o validaciones finales.
+     */
     _onChange(e, index) {
         const target = e.target;
         if (index === 0) {
@@ -121,11 +206,11 @@ let MoniSlider = class MoniSlider extends MoniElement {
         this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
     }
     /**
-     * Render a `<datalist>` element with tick options. When `tick-interval`
-     * is set, generates options at every N units between min and max.
-     * Otherwise, if `ticks` is set, just min and max.
-     * Browsers that support datalist ticks for range (Chrome, Edge) will
-     * render visual marks; Firefox ignores them.
+     * Renderiza un elemento `<datalist>` con opciones de marcas. Cuando se establece
+     * `tick-interval`, genera opciones cada N unidades entre el mínimo y el máximo.
+     * De lo contrario, si se establece `ticks`, solo mínimo y máximo.
+     * Los navegadores que soportan marcas de datalist para inputs de rango (Chrome, Edge)
+     * renderizarán marcas visuales; Firefox las ignora.
      */
     _renderDatalist() {
         if (this.tickInterval != null && this.tickInterval > 0) {
@@ -351,6 +436,33 @@ let MoniSlider = class MoniSlider extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Ensambla la estructura del Shadow DOM del slider.
+     *
+     * **Cálculo de la pista llena:**
+     * `pct` y `pctEnd` son valores porcentuales (0–100) derivados de
+     * `_pct(value)`. Se inyectan como propiedades CSS personalizadas `--_start` y `--_end`
+     * en el contenedor `.slider`. El pseudo-elemento CSS `::before`
+     * utiliza estos valores en un `clip-path: polygon(...)` para renderizar la parte
+     * no llena de la pista, mientras que el `<span>` renderiza la parte llena.
+     *
+     * **Modo Rango (`range=true`):**
+     * - Se renderizan dos elementos `<input type="range">` (uno para el límite inferior,
+     *   otro para el límite superior).
+     * - El CSS los superpone absolutamente para que los controles (thumbs) compartan la misma línea de pista.
+     * - `--_start` equivale al porcentaje del control inferior; `--_end` equivale a `100 - pctEnd`.
+     *
+     * **Tooltip indicador:**
+     * Los elementos tooltip `.tooltip-1` / `.tooltip-2` están posicionados absolutamente
+     * utilizando `inset-inline-start: ${pct}%` de modo que siguen al control activo
+     * por encima (o por debajo) a medida que el usuario arrastra. La visibilidad se controla
+     * puramente a través de selectores CSS `:focus` — no se requiere JavaScript.
+     *
+     * **Datalist de marcas (Tick datalist):**
+     * `_renderDatalist()` emite un `<datalist id="ticks">` solo cuando `ticks` o
+     * `tick-interval` está establecido. Chrome/Edge renderizan marcas nativas en inputs de rango
+     * que referencian un datalist a través del atributo `list`; Firefox lo ignora.
+     */
     render() {
         const pct = this._pct(this._value);
         const pctEnd = this._pct(this._valueEnd);

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

@@ -7,97 +7,107 @@
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Snackbar component.
+ * Componente Material Design 3 Snackbar (Barra de notificaciones).
  *
- * Snackbars provide brief messages about app processes at the bottom of the
- * screen. They disappear automatically and do not require user action,
- * but may contain a single optional action.
+ * Los snackbars proporcionan mensajes breves sobre los procesos de la aplicación en la parte
+ * inferior de la pantalla. Desaparecen automáticamente y no requieren acción del usuario,
+ * pero pueden contener una única acción opcional.
  *
- * **M3 spec reference:** `m3-docs/components/snackbar/specs.md`
+ * **Referencia a la especificación M3:** `m3-docs/components/snackbar/specs.md`
  *
- * **Positioning model:**
- * The snackbar uses `position: fixed` so it renders in the viewport
- * regardless of which element it is placed in the DOM. The host element
- * displays as `block` rather than `contents` to ensure `position: fixed`
- * inside the shadow root anchors to the viewport (not to a stacking context
- * created by a transformed ancestor).
+ * **Modelo de posicionamiento:**
+ * El snackbar utiliza `position: fixed` para que se renderice en la ventana gráfica (viewport)
+ * independientemente del elemento en el que esté ubicado en el DOM. El elemento host
+ * se muestra como `block` en lugar de `contents` para asegurar que `position: fixed`
+ * dentro del shadow root se ancle a la ventana gráfica (no a un contexto de apilamiento
+ * creado por un ancestro transformado).
  *
- * **Show/hide mechanism:**
- * Visibility is controlled by `:host([active]) .snackbar` via CSS
- * `opacity`, `visibility`, and `transform`. This mirrors BeerCSS's
- * `.snackbar.active` pattern and allows CSS transition animations.
+ * **Mecanismo de mostrar/ocultar:**
+ * La visibilidad es controlada por `:host([active]) .snackbar` a través de CSS
+ * `opacity`, `visibility`, y `transform`. Esto imita el patrón `.snackbar.active`
+ * de BeerCSS y permite animaciones de transición CSS.
  *
- * **M3 text truncation:**
- * The message text is clamped to `maxLines` lines with `-webkit-line-clamp`.
- * The M3 spec requires a maximum of 2 lines; consumers can override this
- * via the `max-lines` attribute.
+ * **Truncamiento de texto M3:**
+ * El texto del mensaje se limita a `maxLines` líneas con `-webkit-line-clamp`.
+ * La especificación M3 requiere un máximo de 2 líneas; los consumidores pueden
+ * anular esto a través del atributo `max-lines`.
  *
  * @example
  * ```ts
  * const snackbar = document.querySelector('moni-snackbar') as MoniSnackbar;
  *
- * // Show for 3 seconds
- * snackbar.text = 'Item deleted';
- * snackbar.action = 'Undo';
+ * // Mostrar por 3 segundos
+ * snackbar.text = 'Elemento eliminado';
+ * snackbar.action = 'Deshacer';
  * snackbar.active = true;
  * setTimeout(() => { snackbar.active = false; }, 3000);
  * ```
  *
- * @slot default - Additional content placed inside the snackbar container.
+ * @slot default - Contenido adicional colocado dentro del contenedor del snackbar.
  *
- * @csspart snackbar - The inner snackbar container element.
- * @csspart text     - The message text element.
- * @csspart action   - The action button element.
+ * @csspart snackbar - El elemento contenedor interno del snackbar.
+ * @csspart text     - El elemento del texto del mensaje.
+ * @csspart action   - El elemento del botón de acción.
  */
 export declare class MoniSnackbar extends MoniElement {
     /**
-     * The main message text displayed in the snackbar.
+     * El texto del mensaje principal mostrado en el snackbar.
      *
-     * Clamped to `maxLines` lines. Long messages are truncated with `…`.
-     * Per M3 spec, keep messages short and informative (under 60 characters).
+     * Limitado a `maxLines` líneas. Los mensajes largos se truncan con `…`.
+     * Según la especificación M3, mantenga los mensajes cortos e informativos (menos de 60 caracteres).
      *
      * @default ''
      */
     text: string;
     /**
-     * Label for the optional action button.
+     * Etiqueta para el botón de acción opcional.
      *
-     * When non-empty, renders a text button on the trailing edge of the snackbar.
-     * The component dispatches a `'action'` event when the action is clicked.
-     * This is a visual-only label — the consumer handles the action logic.
+     * Cuando no está vacía, renderiza un botón de texto en el borde posterior (trailing) del snackbar.
+     * El componente despacha un evento `'action'` cuando se hace clic en la acción.
+     * Esta es una etiqueta puramente visual — el consumidor maneja la lógica de la acción.
      *
      * @default ''
      */
     action: string;
     /**
-     * Vertical placement of the snackbar on the screen.
+     * Ubicación vertical del snackbar en la pantalla.
      *
-     * - `'bottom'` (default) — Fixed 6rem from the bottom, centered horizontally.
-     * - `'top'` — Fixed 6rem from the top, centered horizontally.
+     * - `'bottom'` (por defecto) — Fijo a 6rem desde la parte inferior, centrado horizontalmente.
+     * - `'top'` — Fijo a 6rem desde la parte superior, centrado horizontalmente.
      *
      * @default 'bottom'
      */
     placement: 'bottom' | 'top';
     /**
-     * When `true`, the snackbar is visible.
+     * Cuando es `true`, el snackbar es visible.
      *
-     * Toggle this attribute to show/hide the snackbar. The CSS transition
-     * handles the fade-in/slide-up animation automatically.
-     * Consumers are responsible for implementing the auto-dismiss timer.
+     * Alterne este atributo para mostrar/ocultar el snackbar. La transición CSS
+     * maneja la animación de desvanecimiento/deslizamiento hacia arriba (fade-in/slide-up) automáticamente.
+     * Los consumidores son responsables de implementar el temporizador de cierre automático.
      *
      * @default false
      */
     active: boolean;
     /**
-     * Maximum number of lines of message text before it is clamped.
+     * Número máximo de líneas del texto del mensaje antes de que sea limitado (clamped).
      *
-     * Uses `-webkit-line-clamp` with `display: -webkit-box` for cross-browser
-     * multi-line truncation. The M3 spec recommends a maximum of 2 lines.
+     * Utiliza `-webkit-line-clamp` con `display: -webkit-box` para truncamiento multilínea
+     * compatible en varios navegadores. La especificación M3 recomienda un máximo de 2 líneas.
      *
      * @default 2
      */
     maxLines: number;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el snackbar con su mensaje y el botón de acción opcional.
+     *
+     * El contenedor del snackbar utiliza `aria-live="polite"` para que los lectores
+     * de pantalla anuncien el mensaje sin interrumpir el flujo de lectura actual del usuario.
+     * Cuando se establece `action`, se renderiza un `<span>` como botón de acción según
+     * la especificación del Snackbar de M3.
+     * El atributo `placement` se asigna a una clase CSS que controla `inset-block-end`
+     * (snackbar inferior) vs `inset-block-start` (snackbar superior).
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-snackbar.d.ts","sourceRoot":"","sources":["../../src/components/moni-snackbar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC5C;;;;;;;OAOG;IAC0B,IAAI,SAAM;IAEvC;;;;;;;;OAQG;IAC0B,MAAM,SAAM;IAEzC;;;;;;;OAOG;IAEH,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAY;IAEvC;;;;;;;;OAQG;IACyC,MAAM,UAAS;IAE3D;;;;;;;OAOG;IAEH,QAAQ,SAAK;IAEb,OAAgB,MAAM,4BAmFpB;IAEO,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"moni-snackbar.d.ts","sourceRoot":"","sources":["../../src/components/moni-snackbar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC5C;;;;;;;OAOG;IAC0B,IAAI,SAAM;IAEvC;;;;;;;;OAQG;IAC0B,MAAM,SAAM;IAEzC;;;;;;;OAOG;IAEH,SAAS,EAAE,QAAQ,GAAG,KAAK,CAAY;IAEvC;;;;;;;;OAQG;IACyC,MAAM,UAAS;IAE3D;;;;;;;OAOG;IAEH,QAAQ,SAAK;IAEb,OAAgB,MAAM,4BAmFpB;IAEF;;;;;;;;;OASG;IACM,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}

package/dist/components/moni-snackbar.js

@@ -15,94 +15,94 @@ import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Snackbar component.
+ * Componente Material Design 3 Snackbar (Barra de notificaciones).
  *
- * Snackbars provide brief messages about app processes at the bottom of the
- * screen. They disappear automatically and do not require user action,
- * but may contain a single optional action.
+ * Los snackbars proporcionan mensajes breves sobre los procesos de la aplicación en la parte
+ * inferior de la pantalla. Desaparecen automáticamente y no requieren acción del usuario,
+ * pero pueden contener una única acción opcional.
  *
- * **M3 spec reference:** `m3-docs/components/snackbar/specs.md`
+ * **Referencia a la especificación M3:** `m3-docs/components/snackbar/specs.md`
  *
- * **Positioning model:**
- * The snackbar uses `position: fixed` so it renders in the viewport
- * regardless of which element it is placed in the DOM. The host element
- * displays as `block` rather than `contents` to ensure `position: fixed`
- * inside the shadow root anchors to the viewport (not to a stacking context
- * created by a transformed ancestor).
+ * **Modelo de posicionamiento:**
+ * El snackbar utiliza `position: fixed` para que se renderice en la ventana gráfica (viewport)
+ * independientemente del elemento en el que esté ubicado en el DOM. El elemento host
+ * se muestra como `block` en lugar de `contents` para asegurar que `position: fixed`
+ * dentro del shadow root se ancle a la ventana gráfica (no a un contexto de apilamiento
+ * creado por un ancestro transformado).
  *
- * **Show/hide mechanism:**
- * Visibility is controlled by `:host([active]) .snackbar` via CSS
- * `opacity`, `visibility`, and `transform`. This mirrors BeerCSS's
- * `.snackbar.active` pattern and allows CSS transition animations.
+ * **Mecanismo de mostrar/ocultar:**
+ * La visibilidad es controlada por `:host([active]) .snackbar` a través de CSS
+ * `opacity`, `visibility`, y `transform`. Esto imita el patrón `.snackbar.active`
+ * de BeerCSS y permite animaciones de transición CSS.
  *
- * **M3 text truncation:**
- * The message text is clamped to `maxLines` lines with `-webkit-line-clamp`.
- * The M3 spec requires a maximum of 2 lines; consumers can override this
- * via the `max-lines` attribute.
+ * **Truncamiento de texto M3:**
+ * El texto del mensaje se limita a `maxLines` líneas con `-webkit-line-clamp`.
+ * La especificación M3 requiere un máximo de 2 líneas; los consumidores pueden
+ * anular esto a través del atributo `max-lines`.
  *
  * @example
  * ```ts
  * const snackbar = document.querySelector('moni-snackbar') as MoniSnackbar;
  *
- * // Show for 3 seconds
- * snackbar.text = 'Item deleted';
- * snackbar.action = 'Undo';
+ * // Mostrar por 3 segundos
+ * snackbar.text = 'Elemento eliminado';
+ * snackbar.action = 'Deshacer';
  * snackbar.active = true;
  * setTimeout(() => { snackbar.active = false; }, 3000);
  * ```
  *
- * @slot default - Additional content placed inside the snackbar container.
+ * @slot default - Contenido adicional colocado dentro del contenedor del snackbar.
  *
- * @csspart snackbar - The inner snackbar container element.
- * @csspart text     - The message text element.
- * @csspart action   - The action button element.
+ * @csspart snackbar - El elemento contenedor interno del snackbar.
+ * @csspart text     - El elemento del texto del mensaje.
+ * @csspart action   - El elemento del botón de acción.
  */
 let MoniSnackbar = class MoniSnackbar extends MoniElement {
     constructor() {
         super(...arguments);
         /**
-         * The main message text displayed in the snackbar.
+         * El texto del mensaje principal mostrado en el snackbar.
          *
-         * Clamped to `maxLines` lines. Long messages are truncated with `…`.
-         * Per M3 spec, keep messages short and informative (under 60 characters).
+         * Limitado a `maxLines` líneas. Los mensajes largos se truncan con `…`.
+         * Según la especificación M3, mantenga los mensajes cortos e informativos (menos de 60 caracteres).
          *
          * @default ''
          */
         this.text = '';
         /**
-         * Label for the optional action button.
+         * Etiqueta para el botón de acción opcional.
          *
-         * When non-empty, renders a text button on the trailing edge of the snackbar.
-         * The component dispatches a `'action'` event when the action is clicked.
-         * This is a visual-only label — the consumer handles the action logic.
+         * Cuando no está vacía, renderiza un botón de texto en el borde posterior (trailing) del snackbar.
+         * El componente despacha un evento `'action'` cuando se hace clic en la acción.
+         * Esta es una etiqueta puramente visual — el consumidor maneja la lógica de la acción.
          *
          * @default ''
          */
         this.action = '';
         /**
-         * Vertical placement of the snackbar on the screen.
+         * Ubicación vertical del snackbar en la pantalla.
          *
-         * - `'bottom'` (default) — Fixed 6rem from the bottom, centered horizontally.
-         * - `'top'` — Fixed 6rem from the top, centered horizontally.
+         * - `'bottom'` (por defecto) — Fijo a 6rem desde la parte inferior, centrado horizontalmente.
+         * - `'top'` — Fijo a 6rem desde la parte superior, centrado horizontalmente.
          *
          * @default 'bottom'
          */
         this.placement = 'bottom';
         /**
-         * When `true`, the snackbar is visible.
+         * Cuando es `true`, el snackbar es visible.
          *
-         * Toggle this attribute to show/hide the snackbar. The CSS transition
-         * handles the fade-in/slide-up animation automatically.
-         * Consumers are responsible for implementing the auto-dismiss timer.
+         * Alterne este atributo para mostrar/ocultar el snackbar. La transición CSS
+         * maneja la animación de desvanecimiento/deslizamiento hacia arriba (fade-in/slide-up) automáticamente.
+         * Los consumidores son responsables de implementar el temporizador de cierre automático.
          *
          * @default false
          */
         this.active = false;
         /**
-         * Maximum number of lines of message text before it is clamped.
+         * Número máximo de líneas del texto del mensaje antes de que sea limitado (clamped).
          *
-         * Uses `-webkit-line-clamp` with `display: -webkit-box` for cross-browser
-         * multi-line truncation. The M3 spec recommends a maximum of 2 lines.
+         * Utiliza `-webkit-line-clamp` con `display: -webkit-box` para truncamiento multilínea
+         * compatible en varios navegadores. La especificación M3 recomienda un máximo de 2 líneas.
          *
          * @default 2
          */
@@ -192,6 +192,16 @@ let MoniSnackbar = class MoniSnackbar extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el snackbar con su mensaje y el botón de acción opcional.
+     *
+     * El contenedor del snackbar utiliza `aria-live="polite"` para que los lectores
+     * de pantalla anuncien el mensaje sin interrumpir el flujo de lectura actual del usuario.
+     * Cuando se establece `action`, se renderiza un `<span>` como botón de acción según
+     * la especificación del Snackbar de M3.
+     * El atributo `placement` se asigna a una clase CSS que controla `inset-block-end`
+     * (snackbar inferior) vs `inset-block-start` (snackbar superior).
+     */
     render() {
         return html `<div
 			class="snackbar ${this.placement}"