@moni-labs/moni-ui 0.3.0 → 0.3.2

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

@@ -6,78 +6,81 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Checkbox component.
+ * Componente Material Design 3 Checkbox.
  *
- * Checkboxes allow users to select one or more items from a set, or toggle
- * a single binary option. They are visual-only shells — the consumer is
- * responsible for wiring up form submission and validation logic.
+ * Los checkboxes permiten a los usuarios seleccionar uno o más elementos de un conjunto, o alternar
+ * una sola opción binaria. Son envolturas solo visuales — el consumidor es
+ * responsable de conectar la lógica de envío y validación del formulario.
  *
- * **Visual architecture (BeerCSS pattern):**
- * The native `<input type="checkbox">` occupies real layout space (16×16 minimum)
- * but is visually hidden via `opacity: 0`. A `<span>` sibling rendered after
- * the input holds two pseudo-elements:
- * - `::before` — the visible checkbox icon (Material Symbols ligature).
- * - `::after`  — the hover/focus state layer ripple ring.
+ * **Arquitectura visual (Patrón BeerCSS):**
+ * El `<input type="checkbox">` nativo ocupa espacio real en el diseño (mínimo 16×16)
+ * pero está oculto visualmente con `opacity: 0`. Un hermano `<span>` renderizado después
+ * del input contiene dos pseudo-elementos:
+ * - `::before` — el icono visible del checkbox (ligadura de Material Symbols).
+ * - `::after`  — el anillo de onda (ripple) de la capa de estado hover/focus.
  *
- * The `::before` content switches between:
- * - `'check_box_outline_blank'` (unchecked)
- * - `'check_box'` (checked)
- * - `'indeterminate_check_box'` (native indeterminate state)
+ * El contenido de `::before` cambia entre:
+ * - `'check_box_outline_blank'` (desmarcado)
+ * - `'check_box'` (marcado)
+ * - `'indeterminate_check_box'` (estado nativo indeterminado)
  *
- * **Form integration:**
- * Setting `name` and `value` passes them to the native `<input>` element,
- * enabling participation in HTML form submissions.
+ * **Integración de formulario:**
+ * Establecer `name` y `value` los pasa al elemento `<input>` nativo,
+ * permitiendo la participación en envíos de formularios HTML.
  *
- * @fires change - Bubbles and is composed. Fired when the checkbox is toggled.
- *                 The consumer can read `element.checked` for the new state.
+ * @fires moni-change - Burbujea y está compuesto. Se dispara cuando se alterna el checkbox.
+ *                      El consumidor puede leer `element.checked` para el nuevo estado.
  *
  * @example
  * ```html
- * <moni-checkbox label="Accept terms" name="terms" value="yes"></moni-checkbox>
+ * <moni-checkbox label="Aceptar términos" name="terms" value="yes"></moni-checkbox>
  *
  * <script>
- *   document.querySelector('moni-checkbox').addEventListener('change', (e) => {
+ *   document.querySelector('moni-checkbox').addEventListener('moni-change', (e) => {
  *     console.log('checked:', e.target.checked);
  *   });
  * </script>
  * ```
  *
- * @csspart checkbox - The outer `<label>` element.
+ * @csspart checkbox - El elemento exterior `<label>`.
  */
 export declare class MoniCheckbox extends MoniElement {
+    static formAssociated: boolean;
+    private _internals;
+    constructor();
     /**
-     * Text label displayed to the right of the checkbox icon.
+     * Texto de la etiqueta mostrado a la derecha del icono del checkbox.
      *
-     * When non-empty, the label is rendered as a text node inside the `<span>`.
-     * When empty, the default slot is rendered instead, allowing slotted HTML.
+     * Cuando no está vacío, la etiqueta se renderiza como un nodo de texto dentro del `<span>`.
+     * Cuando está vacío, el slot por defecto se renderiza en su lugar, permitiendo HTML en el slot.
      *
      * @default ''
      */
     label: string;
     /**
-     * Whether the checkbox is currently checked.
+     * Si el checkbox está actualmente marcado.
      *
-     * Reflected as an attribute so CSS attribute selectors and external state
-     * readers can observe the checked state without accessing the JS property.
-     * Synced to the native input via `updated()`.
+     * Reflejado como un atributo para que los selectores de atributos CSS y los lectores
+     * de estado externos puedan observar el estado marcado sin acceder a la propiedad JS.
+     * Sincronizado con el input nativo a través de `updated()`.
      *
      * @default false
      */
     checked: boolean;
     /**
-     * When `true`, the native input is disabled: the checkbox is not interactive
-     * and renders at 50% opacity.
+     * Cuando es `true`, el input nativo se deshabilita: el checkbox no es interactivo
+     * y se renderiza con opacidad del 50%.
      *
      * @default false
      */
     disabled: boolean;
     /**
-     * Visual size of the checkbox icon.
+     * Tamaño visual del icono del checkbox.
      *
-     * Maps to the `--_size` custom property which controls both the invisible
-     * input's hit area and the visible `::before` icon size.
+     * Se mapea a la propiedad personalizada `--_size` que controla tanto el área de impacto
+     * del input invisible como el tamaño del icono visible `::before`.
      *
-     * | Value      | `--_size` |
+     * | Valor      | `--_size` |
      * |------------|-----------|
      * | `'small'`  | 1rem      |
      * | `'medium'` | 1.5rem    |
@@ -88,30 +91,30 @@ export declare class MoniCheckbox extends MoniElement {
      */
     size: 'small' | 'medium' | 'large' | 'extra';
     /**
-     * Forwarded to the native `<input name>` attribute.
-     * Required for grouping checkboxes within a form.
+     * Reenviado al atributo `<input name>` nativo.
+     * Requerido para agrupar checkboxes dentro de un formulario.
      *
      * @default ''
      */
     name: string;
     /**
-     * Forwarded to the native `<input value>` attribute.
-     * The value submitted in a form when this checkbox is checked.
+     * Reenviado al atributo `<input value>` nativo.
+     * El valor enviado en un formulario cuando este checkbox está marcado.
      *
      * @default ''
      */
     value: string;
-    /** Direct reference to the native input element for programmatic access. */
+    /** Referencia directa al elemento input nativo para acceso programático. */
     private _input;
     /**
-     * Syncs `checked` and `disabled` back to the native input element after
-     * Lit's render cycle, ensuring the DOM stays in sync with component state.
+     * Sincroniza `checked` y `disabled` de vuelta al elemento input nativo después
+     * del ciclo de renderizado de Lit, asegurando que el DOM se mantenga sincronizado con el estado del componente.
      *
-     * This is necessary because Lit's `.property=${value}` binding updates the
-     * DOM property, but the `live()` directive and direct property assignment
-     * are more reliable for boolean inputs across browser implementations.
+     * Esto es necesario porque el enlace `.property=${value}` de Lit actualiza la
+     * propiedad DOM, pero la directiva `live()` y la asignación directa de propiedad
+     * son más fiables para entradas booleanas en diferentes implementaciones de navegadores.
      *
-     * @param changed - Map of changed property names to their previous values.
+     * @param changed - Mapa de nombres de propiedades cambiadas a sus valores anteriores.
      */
     updated(changed: Map<string, unknown>): void;
     static styles: import("lit").CSSResult[];

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

@@ -1 +1 @@
-{"version":3,"file":"moni-checkbox.d.ts","sourceRoot":"","sources":["../../src/components/moni-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC5C;;;;;;;OAOG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;OAQG;IACyC,OAAO,UAAS;IAE5D;;;;;OAKG;IACyC,QAAQ,UAAS;IAE7D;;;;;;;;;;;;;;OAcG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD;;;;;OAKG;IAC0B,IAAI,SAAM;IAEvC;;;;;OAKG;IAC0B,KAAK,SAAM;IAExC,4EAA4E;IAC5D,OAAO,CAAC,MAAM,CAAoB;IAElD;;;;;;;;;OASG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAO9C,OAAgB,MAAM,4BAoHpB;IAEF;;;;;;;;OAQG;IACH,OAAO,CAAC,SAAS;IAKjB;;;;;;;OAOG;IACM,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"moni-checkbox.d.ts","sourceRoot":"","sources":["../../src/components/moni-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAMH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAG7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBACa,YAAa,SAAQ,WAAW;IAC5C,MAAM,CAAC,cAAc,UAAQ;IAC7B,OAAO,CAAC,UAAU,CAAmB;;IAOrC;;;;;;;OAOG;IAC0B,KAAK,SAAM;IAExC;;;;;;;;OAQG;IACyC,OAAO,UAAS;IAE5D;;;;;OAKG;IACyC,QAAQ,UAAS;IAE7D;;;;;;;;;;;;;;OAcG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAExD;;;;;OAKG;IAC0B,IAAI,SAAM;IAEvC;;;;;OAKG;IAC0B,KAAK,SAAM;IAExC,4EAA4E;IAC5D,OAAO,CAAC,MAAM,CAAoB;IAElD;;;;;;;;;OASG;IACM,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C,OAAgB,MAAM,4BAoHpB;IAEF;;;;;;;;OAQG;IACH,OAAO,CAAC,SAAS;IAOjB;;;;;;;OAOG;IACM,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,YAAY,CAAC;KAC9B;CACD;AAED,eAAe,YAAY,CAAC"}

package/dist/components/moni-checkbox.js

@@ -15,81 +15,83 @@ import { customElement, property, query } from 'lit/decorators.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
+import { emitMoniEvent } from '../utils/event-emitter.js';
 /**
- * Material Design 3 Checkbox component.
+ * Componente Material Design 3 Checkbox.
  *
- * Checkboxes allow users to select one or more items from a set, or toggle
- * a single binary option. They are visual-only shells — the consumer is
- * responsible for wiring up form submission and validation logic.
+ * Los checkboxes permiten a los usuarios seleccionar uno o más elementos de un conjunto, o alternar
+ * una sola opción binaria. Son envolturas solo visuales — el consumidor es
+ * responsable de conectar la lógica de envío y validación del formulario.
  *
- * **Visual architecture (BeerCSS pattern):**
- * The native `<input type="checkbox">` occupies real layout space (16×16 minimum)
- * but is visually hidden via `opacity: 0`. A `<span>` sibling rendered after
- * the input holds two pseudo-elements:
- * - `::before` — the visible checkbox icon (Material Symbols ligature).
- * - `::after`  — the hover/focus state layer ripple ring.
+ * **Arquitectura visual (Patrón BeerCSS):**
+ * El `<input type="checkbox">` nativo ocupa espacio real en el diseño (mínimo 16×16)
+ * pero está oculto visualmente con `opacity: 0`. Un hermano `<span>` renderizado después
+ * del input contiene dos pseudo-elementos:
+ * - `::before` — el icono visible del checkbox (ligadura de Material Symbols).
+ * - `::after`  — el anillo de onda (ripple) de la capa de estado hover/focus.
  *
- * The `::before` content switches between:
- * - `'check_box_outline_blank'` (unchecked)
- * - `'check_box'` (checked)
- * - `'indeterminate_check_box'` (native indeterminate state)
+ * El contenido de `::before` cambia entre:
+ * - `'check_box_outline_blank'` (desmarcado)
+ * - `'check_box'` (marcado)
+ * - `'indeterminate_check_box'` (estado nativo indeterminado)
  *
- * **Form integration:**
- * Setting `name` and `value` passes them to the native `<input>` element,
- * enabling participation in HTML form submissions.
+ * **Integración de formulario:**
+ * Establecer `name` y `value` los pasa al elemento `<input>` nativo,
+ * permitiendo la participación en envíos de formularios HTML.
  *
- * @fires change - Bubbles and is composed. Fired when the checkbox is toggled.
- *                 The consumer can read `element.checked` for the new state.
+ * @fires moni-change - Burbujea y está compuesto. Se dispara cuando se alterna el checkbox.
+ *                      El consumidor puede leer `element.checked` para el nuevo estado.
  *
  * @example
  * ```html
- * <moni-checkbox label="Accept terms" name="terms" value="yes"></moni-checkbox>
+ * <moni-checkbox label="Aceptar términos" name="terms" value="yes"></moni-checkbox>
  *
  * <script>
- *   document.querySelector('moni-checkbox').addEventListener('change', (e) => {
+ *   document.querySelector('moni-checkbox').addEventListener('moni-change', (e) => {
  *     console.log('checked:', e.target.checked);
  *   });
  * </script>
  * ```
  *
- * @csspart checkbox - The outer `<label>` element.
+ * @csspart checkbox - El elemento exterior `<label>`.
  */
 let MoniCheckbox = class MoniCheckbox extends MoniElement {
+    static { this.formAssociated = true; }
     constructor() {
-        super(...arguments);
+        super();
         /**
-         * Text label displayed to the right of the checkbox icon.
+         * Texto de la etiqueta mostrado a la derecha del icono del checkbox.
          *
-         * When non-empty, the label is rendered as a text node inside the `<span>`.
-         * When empty, the default slot is rendered instead, allowing slotted HTML.
+         * Cuando no está vacío, la etiqueta se renderiza como un nodo de texto dentro del `<span>`.
+         * Cuando está vacío, el slot por defecto se renderiza en su lugar, permitiendo HTML en el slot.
          *
          * @default ''
          */
         this.label = '';
         /**
-         * Whether the checkbox is currently checked.
+         * Si el checkbox está actualmente marcado.
          *
-         * Reflected as an attribute so CSS attribute selectors and external state
-         * readers can observe the checked state without accessing the JS property.
-         * Synced to the native input via `updated()`.
+         * Reflejado como un atributo para que los selectores de atributos CSS y los lectores
+         * de estado externos puedan observar el estado marcado sin acceder a la propiedad JS.
+         * Sincronizado con el input nativo a través de `updated()`.
          *
          * @default false
          */
         this.checked = false;
         /**
-         * When `true`, the native input is disabled: the checkbox is not interactive
-         * and renders at 50% opacity.
+         * Cuando es `true`, el input nativo se deshabilita: el checkbox no es interactivo
+         * y se renderiza con opacidad del 50%.
          *
          * @default false
          */
         this.disabled = false;
         /**
-         * Visual size of the checkbox icon.
+         * Tamaño visual del icono del checkbox.
          *
-         * Maps to the `--_size` custom property which controls both the invisible
-         * input's hit area and the visible `::before` icon size.
+         * Se mapea a la propiedad personalizada `--_size` que controla tanto el área de impacto
+         * del input invisible como el tamaño del icono visible `::before`.
          *
-         * | Value      | `--_size` |
+         * | Valor      | `--_size` |
          * |------------|-----------|
          * | `'small'`  | 1rem      |
          * | `'medium'` | 1.5rem    |
@@ -100,34 +102,37 @@ let MoniCheckbox = class MoniCheckbox extends MoniElement {
          */
         this.size = 'medium';
         /**
-         * Forwarded to the native `<input name>` attribute.
-         * Required for grouping checkboxes within a form.
+         * Reenviado al atributo `<input name>` nativo.
+         * Requerido para agrupar checkboxes dentro de un formulario.
          *
          * @default ''
          */
         this.name = '';
         /**
-         * Forwarded to the native `<input value>` attribute.
-         * The value submitted in a form when this checkbox is checked.
+         * Reenviado al atributo `<input value>` nativo.
+         * El valor enviado en un formulario cuando este checkbox está marcado.
          *
          * @default ''
          */
         this.value = '';
+        this._internals = this.attachInternals();
     }
     /**
-     * Syncs `checked` and `disabled` back to the native input element after
-     * Lit's render cycle, ensuring the DOM stays in sync with component state.
+     * Sincroniza `checked` y `disabled` de vuelta al elemento input nativo después
+     * del ciclo de renderizado de Lit, asegurando que el DOM se mantenga sincronizado con el estado del componente.
      *
-     * This is necessary because Lit's `.property=${value}` binding updates the
-     * DOM property, but the `live()` directive and direct property assignment
-     * are more reliable for boolean inputs across browser implementations.
+     * Esto es necesario porque el enlace `.property=${value}` de Lit actualiza la
+     * propiedad DOM, pero la directiva `live()` y la asignación directa de propiedad
+     * son más fiables para entradas booleanas en diferentes implementaciones de navegadores.
      *
-     * @param changed - Map of changed property names to their previous values.
+     * @param changed - Mapa de nombres de propiedades cambiadas a sus valores anteriores.
      */
     updated(changed) {
         if (this._input) {
-            if (changed.has('checked'))
+            if (changed.has('checked')) {
                 this._input.checked = this.checked;
+                this._internals?.setFormValue?.(this.checked ? (this.value || 'on') : null);
+            }
             if (changed.has('disabled'))
                 this._input.disabled = this.disabled;
         }
@@ -260,7 +265,9 @@ let MoniCheckbox = class MoniCheckbox extends MoniElement {
      */
     _onChange(e) {
         this.checked = e.target.checked;
-        this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+        emitMoniEvent(this, 'moni-change', {
+            detail: { value: this.checked, originalEvent: e }
+        });
     }
     /**
      * Renders the accessible checkbox label structure.

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

@@ -8,70 +8,137 @@ import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 import './moni-progress.js';
 /**
- * Material Design 3 Chip component.
+ * Componente Material Design 3 Chip.
  *
- * Chips are compact, interactive elements that represent actions, filters,
- * attributes, or user inputs. They are visual-only shells — the consumer
- * owns all state management (selection, removal, active filter state).
+ * Los chips (fichas) son elementos compactos e interactivos que representan acciones, filtros,
+ * atributos o entradas de usuario. Son contenedores solo visuales — el consumidor
+ * es dueño de todo el manejo del estado (selección, eliminación, estado de filtro activo).
  *
- * **M3 spec reference:** `m3-docs/components/chips/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/chips/specs.md`
  *
- * **Variants:**
- * - `assist` (default) — Smart or suggested actions. Uses `var(--outline)` border
- *   to ensure 3:1 contrast per the M3 accessibility spec. Alias: `outlined`.
- * - `filter` — Filters for a content collection. Shows a leading checkmark when
- *   `selected`. Alias: `fill`.
- * - `input` — Represents discrete user input (tags, tokens). Adds a trailing
- *   remove icon when `removable`.
- * - `suggestion` — Product-generated suggestions. Outlined, no icons.
+ * **Variantes:**
+ * - `assist` (por defecto) — Acciones inteligentes o sugeridas. Usa borde `var(--outline)`
+ *   para asegurar un contraste de 3:1 según la especificación de accesibilidad de M3. Alias: `outlined`.
+ * - `filter` — Filtros para una colección de contenido. Muestra una marca de verificación al principio cuando
+ *   está `selected`. Alias: `fill`.
+ * - `input` — Representa una entrada de usuario discreta (etiquetas, tokens). Añade un icono de
+ *   eliminación al final cuando es `removable`.
+ * - `suggestion` — Sugerencias generadas por el producto. Con contorno, sin iconos.
  *
- * **M3 measurements:**
- * - Default height: 32dp (`small` size = M3 spec baseline).
- * - Corner radius: 8dp.
- * - Icon size: 18dp.
- * - `medium` and `large` sizes are Moni extensions with larger touch targets.
+ * **Medidas M3:**
+ * - Altura por defecto: 32dp (tamaño `small` = línea base de la especificación M3).
+ * - Radio de esquina: 8dp.
+ * - Tamaño de icono: 18dp.
+ * - Los tamaños `medium` y `large` son extensiones de Moni con áreas táctiles más grandes.
  *
- * **Accessibility:**
- * `assist` and `suggestion` chips use `var(--outline)` for their stroke to
- * guarantee 3:1 contrast against the surface background at rest.
- * `filter` and `input` use `outline-variant` at rest but achieve contrast
- * through the `secondary-container` fill when selected.
+ * **Accesibilidad:**
+ * Los chips `assist` y `suggestion` usan `var(--outline)` para su trazo para
+ * garantizar un contraste de 3:1 contra el fondo de la superficie en reposo.
+ * `filter` e `input` usan `outline-variant` en reposo pero logran contraste
+ * a través del relleno `secondary-container` cuando se seleccionan.
  *
- * @fires remove - Bubbles and is composed. Fired when the trailing remove
- *                 icon is clicked on an `input` chip with `removable`.
+ * @fires remove - Burbujea y está compuesto. Se dispara cuando el icono de eliminación
+ *                 final se hace clic en un chip `input` con `removable`.
  *
  * @example
  * ```html
- * <!-- Filter chip with selected state -->
+ * <!-- Chip de filtro con estado seleccionado -->
  * <moni-chip variant="filter" selected>Technology</moni-chip>
  *
- * <!-- Input chip (tag/token) -->
+ * <!-- Chip de entrada (etiqueta/token) -->
  * <moni-chip variant="input" removable icon="label">TypeScript</moni-chip>
  *
- * <!-- Assist chip with icon -->
+ * <!-- Chip de asistencia con icono -->
  * <moni-chip icon="directions_car">Get directions</moni-chip>
  * ```
  *
- * @slot default   - The chip label text.
- * @slot icon      - Override for the leading icon (alternative to the `icon` attribute).
+ * @slot default   - El texto de la etiqueta del chip.
+ * @slot icon      - Anula el icono inicial (alternativa al atributo `icon`).
  *
- * @csspart chip   - The inner `<button>` element.
- * @csspart label  - The label `<span>` element.
+ * @csspart chip   - El elemento interno `<button>`.
+ * @csspart label  - El elemento `<span>` de la etiqueta.
  */
 export declare class MoniChip extends MoniElement {
+    /**
+     * Variante visual del chip.
+     * @type {'assist' | 'filter' | 'input' | 'suggestion' | 'outlined' | 'fill'}
+     * @default 'assist'
+     */
     variant: 'assist' | 'filter' | 'input' | 'suggestion' | 'outlined' | 'fill';
+    /**
+     * Define las dimensiones del chip.
+     * @type {'small' | 'medium' | 'large'}
+     * @default 'small'
+     */
     size: 'small' | 'medium' | 'large';
+    /**
+     * Forma del radio del borde del chip.
+     * @type {'round' | 'no-round' | 'square' | 'circle' | 'left-round' | 'right-round' | 'top-round' | 'bottom-round'}
+     * @default 'round'
+     */
     shape: 'round' | 'no-round' | 'square' | 'circle' | 'left-round' | 'right-round' | 'top-round' | 'bottom-round';
+    /**
+     * Si es true, marca el chip como seleccionado (útil para chips de filtro).
+     * @type {boolean}
+     */
     selected: boolean;
+    /**
+     * Si es true, muestra un icono de cierre al final para permitir la eliminación.
+     * @type {boolean}
+     */
     removable: boolean;
+    /**
+     * Deshabilita el chip.
+     * @type {boolean}
+     */
     disabled: boolean;
+    /**
+     * Si es true, muestra un indicador de carga dentro del chip.
+     * @type {boolean}
+     */
     loading: boolean;
+    /**
+     * Nombre del icono inicial (Material Symbols).
+     * @type {string}
+     */
     icon: string;
     private _hasSlottedIcon;
+    /**
+     * Manejador del slot interno de icono (Slot Change).
+     * Determina si el desarrollador proporcionó un icono dinámicamente vía Light DOM
+     * (`<moni-icon slot="icon">`), permitiendo que el componente ajuste
+     * sus márgenes internos (`padding`) y espaciados dinámicamente.
+     */
     private _handleSlotChange;
-    /** Normalize legacy variant names to M3 spec. */
+    /**
+     * Manejador de clics en el icono de remover.
+     * Detiene la propagación para no disparar el clic del chip y emite un evento custom 'remove'.
+     */
+    private _handleRemoveClick;
+    /** Normaliza los nombres de variantes heredadas a la especificación M3. */
     private get _variant();
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el elemento `<button>` del chip con su lista de clases calculada.
+     *
+     * **Normalización de variantes:**
+     * `_variant` mapea nombres de alias heredados (`'outlined'` → `'assist'`, `'fill'` → `'filter'`)
+     * a nombres de variantes canónicas de M3 antes de inyectarlos como clases CSS.
+     *
+     * **Ruta rápida de carga:**
+     * Cuando `loading=true`, se devuelve temprano un botón mínimo con solo un indicador de carga
+     * (sin slot de icono, sin etiqueta, sin botón de eliminación) con `aria-busy="true"`.
+     *
+     * **Lógica del botón de eliminación:**
+     * `showRemove` es `true` cuando:
+     * - `variant='input'` (Especificación M3: los chips de entrada siempre tienen un icono de cierre al final), o
+     * - `removable=true` se establece explícitamente.
+     *
+     * **Resolución de icono:**
+     * Si se establece el atributo `icon`, se renderiza un `<moni-icon>`. De lo contrario, se usa el
+     * slot nombrado `icon`, con `_hasSlottedIcon` rastreando si se proyectó contenido en el slot
+     * (usado para añadir condicionalmente los ajustes de relleno `has-icon`).
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-chip.d.ts","sourceRoot":"","sources":["../../src/components/moni-chip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,QAAS,SAAQ,WAAW;IAExC,OAAO,EACJ,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,UAAU,GACV,MAAM,CAAY;IAErB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAE7C,KAAK,EACF,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,WAAW,GACX,cAAc,CAAW;IACgB,QAAQ,UAAS;IACjB,SAAS,UAAS;IAClB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAC/B,IAAI,SAAM;IAGvC,OAAO,CAAC,eAAe,CAAS;IAEhC,OAAO,CAAC,iBAAiB;IAKzB,iDAAiD;IACjD,OAAO,KAAK,QAAQ,GAInB;IAED,OAAgB,MAAM,4BAqLpB;IAEO,MAAM;CA+Df;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"moni-chip.d.ts","sourceRoot":"","sources":["../../src/components/moni-chip.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,qBACa,QAAS,SAAQ,WAAW;IACxC;;;;OAIG;IAEH,OAAO,EACJ,QAAQ,GACR,QAAQ,GACR,OAAO,GACP,YAAY,GACZ,UAAU,GACV,MAAM,CAAY;IAErB;;;;OAIG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAW;IAE7C;;;;OAIG;IAEH,KAAK,EACF,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,WAAW,GACX,cAAc,CAAW;IAE5B;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,SAAS,UAAS;IAE9D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IAC0B,IAAI,SAAM;IAGvC,OAAO,CAAC,eAAe,CAAS;IAEhC;;;;;OAKG;IACH,OAAO,CAAC,iBAAiB;IAKzB;;;OAGG;IACH,OAAO,CAAC,kBAAkB;IAK1B,2EAA2E;IAC3E,OAAO,KAAK,QAAQ,GAInB;IAED,OAAgB,MAAM,4BAqLpB;IAEF;;;;;;;;;;;;;;;;;;;;OAoBG;IACM,MAAM;CA+Df;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}