@moni-labs/moni-ui 0.3.0 → 0.3.2

package/dist/components/moni-expansion.js

@@ -14,45 +14,45 @@ import { html, css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Material Design 3 Expansion panel component.
+ * Componente Material Design 3 Expansion panel (Panel de expansión).
  *
- * A lightweight wrapper around the native HTML `<details>` and `<summary>`
- * elements, styled according to M3 surface and elevation guidelines.
- * Expansion panels contain creation flows and allow lightweight editing of an element.
+ * Un envoltorio ligero alrededor de los elementos HTML nativos `<details>` y `<summary>`,
+ * estilizado de acuerdo con las pautas de superficie y elevación de M3.
+ * Los paneles de expansión contienen flujos de creación y permiten la edición ligera de un elemento.
  *
- * **Visual architecture:**
- * The component renders a `<details>` element with a `<summary>` that acts
- * as the expandable header. The default slot content is placed inside the
- * `<details>` tag (but outside the `<summary>`), naturally hiding and showing
- * based on the native behavior. An M3 `expand_more` icon is added via a CSS
- * `::after` pseudo-element and rotates when the panel is open.
+ * **Arquitectura visual:**
+ * El componente renderiza un elemento `<details>` con un `<summary>` que actúa
+ * como el encabezado expandible. El contenido del slot por defecto se coloca dentro de la
+ * etiqueta `<details>` (pero fuera del `<summary>`), ocultándose y mostrándose naturalmente
+ * según el comportamiento nativo. Se añade un icono `expand_more` de M3 mediante un
+ * pseudo-elemento CSS `::after` que rota cuando el panel está abierto.
  *
- * **Usage:**
- * Set the `title` attribute for a simple text header, or use the `summary`
- * slot to project custom rich content (like icons or secondary text) into the
- * header area.
+ * **Uso:**
+ * Establezca el atributo `title` para un encabezado de texto simple, o use el slot `summary`
+ * para proyectar contenido enriquecido personalizado (como iconos o texto secundario) en el
+ * área del encabezado.
  *
  * @example
  * ```html
- * <!-- Simple text title -->
- * <moni-expansion title="Advanced Settings">
- *   <p>Enable developer mode features here.</p>
+ * <!-- Título de texto simple -->
+ * <moni-expansion title="Configuración Avanzada">
+ *   <p>Habilite las características del modo de desarrollador aquí.</p>
  * </moni-expansion>
  *
- * <!-- Rich summary content via slot -->
+ * <!-- Contenido de resumen enriquecido a través de slot -->
  * <moni-expansion open>
  *   <div slot="summary" style="display: flex; gap: 8px;">
  *     <moni-icon>person</moni-icon>
- *     <span>Personal Information</span>
+ *     <span>Información Personal</span>
  *   </div>
  *   <form>
- *     <moni-text-field label="Name"></moni-text-field>
+ *     <moni-text-field label="Nombre"></moni-text-field>
  *   </form>
  * </moni-expansion>
  * ```
  *
- * @slot default - The content of the expansion panel body.
- * @slot summary - Custom header content (overrides the `title` attribute).
+ * @slot default - El contenido del cuerpo del panel de expansión.
+ * @slot summary - Contenido personalizado del encabezado (sobrescribe el atributo `title`).
  */
 let MoniExpansion = class MoniExpansion extends MoniElement {
     constructor() {
@@ -106,6 +106,16 @@ let MoniExpansion = class MoniExpansion extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el panel de expansión utilizando el elemento nativo `<details>`.
+     *
+     * El atributo `open` en
+     * `:host` impulsa la rotación de la flecha indicadora CSS (`::after` en `summary`).
+     *
+     * **Estructura de slots:**
+     * - `[slot="summary"]` — la fila de encabezado siempre visible (título, iconos).
+     * - Slot por defecto — la región de contenido colapsable.
+     */
     render() {
         return html `<details ?open=${this.open} part="expansion">
 			<summary part="summary">

package/dist/components/moni-fab-menu.d.ts

@@ -8,41 +8,41 @@ import { MoniElement } from './_base/index.js';
 import './moni-fab.js';
 import './moni-icon.js';
 /**
- * Material Design 3 FAB Menu component.
+ * Componente Material Design 3 FAB Menu (Menú FAB).
  *
- * A specialized container that combines a main `<moni-fab>` trigger with a
- * `<menu>` of secondary FABs. It allows multiple actions to be tucked away
- * behind a single primary Floating Action Button, reducing screen clutter.
+ * Un contenedor especializado que combina un disparador principal `<moni-fab>` con un
+ * `<menu>` de FABs secundarios. Permite ocultar múltiples acciones
+ * detrás de un solo Botón de Acción Flotante primario, reduciendo el desorden en la pantalla.
  *
- * **M3 spec reference:** `m3-docs/components/floating-action-buttons/specs.md` (FAB menus)
+ * **Referencia de la especificación M3:** `m3-docs/components/floating-action-buttons/specs.md` (Menús FAB)
  *
- * **Trigger and animation:**
- * The component wires the primary trigger FAB's `click` event to toggle its
- * internal `open` state. When `open=true`, the nested secondary FABs scale up
- * and fade in via CSS transitions. Consumers can also control the `open` state
- * programmatically by setting the attribute.
+ * **Disparador y animación:**
+ * El componente enlaza el evento `click` del FAB disparador principal para alternar su
+ * estado interno `open`. Cuando `open=true`, los FABs secundarios anidados se escalan
+ * y aparecen mediante transiciones CSS. Los consumidores también pueden controlar el estado `open`
+ * programáticamente estableciendo el atributo.
  *
- * **Focus management (Accessibility):**
- * - When the menu opens, focus automatically moves to the first focusable
- *   secondary item (or remains on the trigger if empty).
- * - While open, the `Tab` key cycles focus strictly within the menu items to
- *   prevent keyboard focus from escaping (focus trap).
- * - Pressing `Escape` or clicking anywhere outside the menu closes it and
- *   returns focus to the primary trigger FAB.
+ * **Gestión del foco (Accesibilidad):**
+ * - Cuando el menú se abre, el foco se mueve automáticamente al primer elemento secundario
+ *   enfocable (o permanece en el disparador si está vacío).
+ * - Mientras está abierto, la tecla `Tab` cicla el foco estrictamente dentro de los elementos del menú para
+ *   evitar que el foco del teclado escape (trampa de foco).
+ * - Presionar `Escape` o hacer clic en cualquier lugar fuera del menú lo cierra y
+ *   devuelve el foco al FAB disparador primario.
  *
  * @example
  * ```html
- * <!-- Bottom-trailing FAB menu opening upwards -->
+ * <!-- Menú FAB en la parte inferior derecha que se abre hacia arriba -->
  * <moni-fab-menu icon="add" color="tertiary" direction="up">
- *   <moni-fab size="small" icon="edit" label="Draft"></moni-fab>
- *   <moni-fab size="small" icon="photo_camera" label="Camera"></moni-fab>
+ *   <moni-fab size="small" icon="edit" label="Borrador"></moni-fab>
+ *   <moni-fab size="small" icon="photo_camera" label="Cámara"></moni-fab>
  * </moni-fab-menu>
  * ```
  *
- * @slot default - The secondary `<moni-fab>` elements that appear when open.
+ * @slot default - Los elementos `<moni-fab>` secundarios que aparecen cuando está abierto.
  *
- * @csspart trigger - The primary `<moni-fab>` trigger element.
- * @csspart menu    - The `<menu>` container holding the secondary items.
+ * @csspart trigger - El elemento disparador `<moni-fab>` primario.
+ * @csspart menu    - El contenedor `<menu>` que contiene los elementos secundarios.
  */
 export declare class MoniFabMenu extends MoniElement {
     open: boolean;
@@ -55,17 +55,55 @@ export declare class MoniFabMenu extends MoniElement {
     private _trigger;
     private _menu;
     private _previouslyFocused;
+    /**
+     * Wrapper estático para el manejador de clics globales.
+     * Conserva el contexto léxico `this` al ser inyectado/removido en `document`.
+     */
     private _onDocClick;
+    /**
+     * Wrapper estático para el manejador de teclado global.
+     * Facilita la limpieza del listener de Escape/Navegación al desmontar el componente.
+     */
     private _onDocKeydown;
+    /**
+     * Hook del ciclo de vida (Lit). Se ejecuta una sola vez tras el primer renderizado.
+     * Espera a que el Shadow DOM se materialice por completo y enlaza el evento nativo
+     * `click` directamente sobre el FAB (Floating Action Button) principal que acciona el menú.
+     */
     firstUpdated(): Promise<void>;
+    /**
+     * Limpieza rigurosa de memoria (Garbage Collection).
+     * Remueve absolutamente todos los listeners asíncronos (document y trigger local)
+     * para evitar colisiones de eventos fantasma y pérdidas de rendimiento (memory leaks).
+     */
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
+    /**
+     * Alterna explícitamente el estado `open` del menú.
+     * Se dispara exclusivamente al interactuar física o focalmente con el FAB principal.
+     */
     private _onTriggerClick;
     private _syncOpenState;
     private _handleDocClick;
     private _handleDocKeydown;
     private _firstFocusableMenuItem;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el speed-dial FAB como un FAB disparador + menú colapsable de FABs de acción.
+     *
+     * **Patrón Speed-dial:**
+     * El FAB disparador siempre es visible. Cuando `open=true`, los elementos de acción en
+     * el slot por defecto se revelan con una animación en cascada. Los elementos se colapsan
+     * de nuevo con una cascada invertida.
+     *
+     * **Dirección de cascada:**
+     * Cuando `placement='bottom'`, los elementos se expanden hacia arriba (índice 0 en la parte inferior).
+     * Cuando `placement='top'`, los elementos se expanden hacia abajo.
+     *
+     * **`aria-expanded`:**
+     * Se establece en el botón disparador para comunicar el estado abierto/cerrado a los lectores de pantalla.
+     * Cada FAB de acción en el slot lleva `aria-label` que el consumidor debe proporcionar.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/components/moni-fab-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"moni-fab-menu.d.ts","sourceRoot":"","sources":["../../src/components/moni-fab-menu.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AAGxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,WAAY,SAAQ,WAAW;IACC,IAAI,UAAS;IAC5B,IAAI,SAAS;IAE1C,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAa;IAEpE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAa;IAExC,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAQ;IAEnD,QAAQ,EACL,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,aAAa,CAAqB;IAElB,OAAO,CAAC,QAAQ,CAAW;IAC1B,OAAO,CAAC,KAAK,CAAe;IAEhD,OAAO,CAAC,kBAAkB,CAA4B;IACtD,OAAO,CAAC,WAAW,CAA8C;IACjE,OAAO,CAAC,aAAa,CAAmD;IAEzD,YAAY;IAQlB,oBAAoB;IAOpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOrD,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,uBAAuB;IAQ/B,OAAgB,MAAM,4BA8EpB;IAEO,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"moni-fab-menu.d.ts","sourceRoot":"","sources":["../../src/components/moni-fab-menu.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AAGxB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,qBACa,WAAY,SAAQ,WAAW;IACC,IAAI,UAAS;IAC5B,IAAI,SAAS;IAE1C,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAa;IAEpE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAa;IAExC,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAQ;IAEnD,QAAQ,EACL,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,aAAa,CAAqB;IAElB,OAAO,CAAC,QAAQ,CAAW;IAC1B,OAAO,CAAC,KAAK,CAAe;IAEhD,OAAO,CAAC,kBAAkB,CAA4B;IACtD;;;OAGG;IACH,OAAO,CAAC,WAAW,CAA8C;IACjE;;;OAGG;IACH,OAAO,CAAC,aAAa,CAAmD;IAExE;;;;OAIG;IACY,YAAY;IAQ3B;;;;OAIG;IACM,oBAAoB;IAOpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAOrD;;;OAGG;IACH,OAAO,CAAC,eAAe,CAErB;IAEF,OAAO,CAAC,cAAc;IA0BtB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,iBAAiB;IAQzB,OAAO,CAAC,uBAAuB;IAQ/B,OAAgB,MAAM,4BA8EpB;IAEF;;;;;;;;;;;;;;;OAeG;IACM,MAAM;CAef;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,eAAe,EAAE,WAAW,CAAC;KAC7B;CACD;AAED,eAAe,WAAW,CAAC"}

package/dist/components/moni-fab-menu.js

@@ -16,41 +16,41 @@ import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-fab.js';
 import './moni-icon.js';
 /**
- * Material Design 3 FAB Menu component.
+ * Componente Material Design 3 FAB Menu (Menú FAB).
  *
- * A specialized container that combines a main `<moni-fab>` trigger with a
- * `<menu>` of secondary FABs. It allows multiple actions to be tucked away
- * behind a single primary Floating Action Button, reducing screen clutter.
+ * Un contenedor especializado que combina un disparador principal `<moni-fab>` con un
+ * `<menu>` de FABs secundarios. Permite ocultar múltiples acciones
+ * detrás de un solo Botón de Acción Flotante primario, reduciendo el desorden en la pantalla.
  *
- * **M3 spec reference:** `m3-docs/components/floating-action-buttons/specs.md` (FAB menus)
+ * **Referencia de la especificación M3:** `m3-docs/components/floating-action-buttons/specs.md` (Menús FAB)
  *
- * **Trigger and animation:**
- * The component wires the primary trigger FAB's `click` event to toggle its
- * internal `open` state. When `open=true`, the nested secondary FABs scale up
- * and fade in via CSS transitions. Consumers can also control the `open` state
- * programmatically by setting the attribute.
+ * **Disparador y animación:**
+ * El componente enlaza el evento `click` del FAB disparador principal para alternar su
+ * estado interno `open`. Cuando `open=true`, los FABs secundarios anidados se escalan
+ * y aparecen mediante transiciones CSS. Los consumidores también pueden controlar el estado `open`
+ * programáticamente estableciendo el atributo.
  *
- * **Focus management (Accessibility):**
- * - When the menu opens, focus automatically moves to the first focusable
- *   secondary item (or remains on the trigger if empty).
- * - While open, the `Tab` key cycles focus strictly within the menu items to
- *   prevent keyboard focus from escaping (focus trap).
- * - Pressing `Escape` or clicking anywhere outside the menu closes it and
- *   returns focus to the primary trigger FAB.
+ * **Gestión del foco (Accesibilidad):**
+ * - Cuando el menú se abre, el foco se mueve automáticamente al primer elemento secundario
+ *   enfocable (o permanece en el disparador si está vacío).
+ * - Mientras está abierto, la tecla `Tab` cicla el foco estrictamente dentro de los elementos del menú para
+ *   evitar que el foco del teclado escape (trampa de foco).
+ * - Presionar `Escape` o hacer clic en cualquier lugar fuera del menú lo cierra y
+ *   devuelve el foco al FAB disparador primario.
  *
  * @example
  * ```html
- * <!-- Bottom-trailing FAB menu opening upwards -->
+ * <!-- Menú FAB en la parte inferior derecha que se abre hacia arriba -->
  * <moni-fab-menu icon="add" color="tertiary" direction="up">
- *   <moni-fab size="small" icon="edit" label="Draft"></moni-fab>
- *   <moni-fab size="small" icon="photo_camera" label="Camera"></moni-fab>
+ *   <moni-fab size="small" icon="edit" label="Borrador"></moni-fab>
+ *   <moni-fab size="small" icon="photo_camera" label="Cámara"></moni-fab>
  * </moni-fab-menu>
  * ```
  *
- * @slot default - The secondary `<moni-fab>` elements that appear when open.
+ * @slot default - Los elementos `<moni-fab>` secundarios que aparecen cuando está abierto.
  *
- * @csspart trigger - The primary `<moni-fab>` trigger element.
- * @csspart menu    - The `<menu>` container holding the secondary items.
+ * @csspart trigger - El elemento disparador `<moni-fab>` primario.
+ * @csspart menu    - El contenedor `<menu>` que contiene los elementos secundarios.
  */
 let MoniFabMenu = class MoniFabMenu extends MoniElement {
     constructor() {
@@ -63,19 +63,41 @@ let MoniFabMenu = class MoniFabMenu extends MoniElement {
         this.direction = 'up';
         this.position = 'bottom-trailing';
         this._previouslyFocused = null;
+        /**
+         * Wrapper estático para el manejador de clics globales.
+         * Conserva el contexto léxico `this` al ser inyectado/removido en `document`.
+         */
         this._onDocClick = (e) => this._handleDocClick(e);
+        /**
+         * Wrapper estático para el manejador de teclado global.
+         * Facilita la limpieza del listener de Escape/Navegación al desmontar el componente.
+         */
         this._onDocKeydown = (e) => this._handleDocKeydown(e);
+        /**
+         * Alterna explícitamente el estado `open` del menú.
+         * Se dispara exclusivamente al interactuar física o focalmente con el FAB principal.
+         */
         this._onTriggerClick = () => {
             this.open = !this.open;
         };
     }
+    /**
+     * Hook del ciclo de vida (Lit). Se ejecuta una sola vez tras el primer renderizado.
+     * Espera a que el Shadow DOM se materialice por completo y enlaza el evento nativo
+     * `click` directamente sobre el FAB (Floating Action Button) principal que acciona el menú.
+     */
     async firstUpdated() {
-        // Wait for all children to finish rendering before wiring listeners
+        // Esperar a que todos los hijos terminen de renderizarse antes de enlazar los detectores
         await this.updateComplete;
         if (this._trigger) {
             this._trigger.addEventListener('click', this._onTriggerClick);
         }
     }
+    /**
+     * Limpieza rigurosa de memoria (Garbage Collection).
+     * Remueve absolutamente todos los listeners asíncronos (document y trigger local)
+     * para evitar colisiones de eventos fantasma y pérdidas de rendimiento (memory leaks).
+     */
     disconnectedCallback() {
         super.disconnectedCallback();
         this._trigger?.removeEventListener('click', this._onTriggerClick);
@@ -90,11 +112,11 @@ let MoniFabMenu = class MoniFabMenu extends MoniElement {
     }
     _syncOpenState() {
         if (this.open) {
-            // Save current focus so we can restore it on close.
+            // Guarda el foco actual para poder restaurarlo al cerrar.
             this._previouslyFocused = this.getRootNode()
                 .activeElement;
-            // Move focus to the first focusable item in the menu, or the
-            // trigger as a fallback (per WAI-ARIA menu pattern).
+            // Mueve el foco al primer elemento enfocable en el menú, o al
+            // disparador como respaldo (según el patrón de menú WAI-ARIA).
             const first = this._firstFocusableMenuItem();
             if (first) {
                 first.focus();
@@ -102,12 +124,12 @@ let MoniFabMenu = class MoniFabMenu extends MoniElement {
             else {
                 this._trigger?.focus();
             }
-            // Install document listeners for click-outside and Escape.
+            // Instala detectores en el documento para clic fuera y Escape.
             document.addEventListener('click', this._onDocClick, true);
             document.addEventListener('keydown', this._onDocKeydown, true);
         }
         else {
-            // Restore focus to the trigger (or the previously focused element).
+            // Restaura el foco al disparador (o al elemento previamente enfocado).
             const restore = this._previouslyFocused ?? this._trigger;
             restore?.focus();
             this._previouslyFocused = null;
@@ -192,7 +214,7 @@ let MoniFabMenu = class MoniFabMenu extends MoniElement {
 				transform: scale(1);
 			}
 
-			/* Directional placement relative to the trigger */
+			/* Colocación direccional relativa al disparador */
 			:host([direction='up']) .fab-menu {
 				inset: auto auto calc(100% + 0.5rem) 0;
 				flex-direction: column-reverse;
@@ -216,9 +238,25 @@ let MoniFabMenu = class MoniFabMenu extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Renderiza el speed-dial FAB como un FAB disparador + menú colapsable de FABs de acción.
+     *
+     * **Patrón Speed-dial:**
+     * El FAB disparador siempre es visible. Cuando `open=true`, los elementos de acción en
+     * el slot por defecto se revelan con una animación en cascada. Los elementos se colapsan
+     * de nuevo con una cascada invertida.
+     *
+     * **Dirección de cascada:**
+     * Cuando `placement='bottom'`, los elementos se expanden hacia arriba (índice 0 en la parte inferior).
+     * Cuando `placement='top'`, los elementos se expanden hacia abajo.
+     *
+     * **`aria-expanded`:**
+     * Se establece en el botón disparador para comunicar el estado abierto/cerrado a los lectores de pantalla.
+     * Cada FAB de acción en el slot lleva `aria-label` que el consumidor debe proporcionar.
+     */
     render() {
         return html `<div class="wrap">
-			<!-- div role=menu allows any slotted content (not just <li>) -->
+			<!-- div role=menu permite cualquier contenido en el slot (no solo <li>) -->
 			<div class="fab-menu" role="menu" part="menu">
 				<slot></slot>
 			</div>

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

@@ -7,62 +7,120 @@
 import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 /**
- * Material Design 3 Floating Action Button (FAB) component.
+ * Componente Material Design 3 Floating Action Button (FAB).
  *
- * FABs represent the primary, or most common, action on a screen. They appear
- * in front of all screen content, typically as a circular shape with an icon in
- * its center.
+ * Los FABs representan la acción principal, o más común, en una pantalla. Aparecen
+ * frente a todo el contenido de la pantalla, típicamente como una forma circular con un icono en
+ * su centro.
  *
- * **M3 spec reference:** `m3-docs/components/floating-action-buttons/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/floating-action-buttons/specs.md`
  *
- * **M3 Expressive Updates & Deprecations (May 2025):**
- * - `size="small"` is **no longer recommended** by M3. Use `medium` (40dp or 56dp)
- *   or `large` (96dp). Deprecated in v0.3.1; will be removed in v1.0.
- * - `shape="circle"` is **not part of M3**. M3 FABs use a `rounded` shape with a
- *   16dp corner radius (which morphs to a `full` radius on hover/focus).
- *   Deprecated in v0.3.1; will be removed in v1.0.
- * - `color="surface"` is **no longer recommended**. Use `primary`, `secondary`,
- *   or `tertiary` to ensure proper color mapping to the M3 theme.
+ * **Actualizaciones y Deprecaciones de M3 Expressive (Mayo 2025):**
+ * - `size="small"` **ya no es recomendado** por M3. Use `medium` (40dp o 56dp)
+ *   o `large` (96dp). Deprecado en v0.3.1; se eliminará en v1.0.
+ * - `shape="circle"` **no es parte de M3**. Los FABs M3 usan una forma `rounded` (redondeada) con un
+ *   radio de esquina de 16dp (que se transforma a un radio `full` al pasar el cursor/enfocar).
+ *   Deprecado en v0.3.1; se eliminará en v1.0.
+ * - `color="surface"` **ya no es recomendado**. Use `primary`, `secondary`,
+ *   o `tertiary` para asegurar un mapeo de color adecuado al tema M3.
  *
- * **Extended FABs:**
- * When `extended` is true, the FAB displays a text label next to the icon.
- * Extended FABs are wider and are typically used when the action needs explicit
- * text to be clear. The `expanded` attribute forces the FAB to its full extended
- * width, useful for animating between standard and extended states on scroll.
+ * **FABs Extendidos:**
+ * Cuando `extended` es true, el FAB muestra una etiqueta de texto junto al icono.
+ * Los FABs extendidos son más anchos y se usan típicamente cuando la acción necesita texto explícito
+ * para ser clara. El atributo `expanded` fuerza al FAB a su ancho extendido completo,
+ * útil para animar entre los estados estándar y extendido al desplazarse.
  *
- * **Positioning:**
- * The `position` attribute applies predefined absolute/fixed positioning
- * (e.g. `bottom-trailing`), snapping the FAB to standard screen corners.
+ * **Posicionamiento:**
+ * El atributo `position` aplica un posicionamiento absoluto/fijo predefinido
+ * (ej. `bottom-trailing`), encajando el FAB en las esquinas estándar de la pantalla.
  *
  * @example
  * ```html
- * <!-- Standard primary FAB -->
+ * <!-- FAB primario estándar -->
  * <moni-fab icon="edit"></moni-fab>
  *
- * <!-- Extended tertiary FAB -->
- * <moni-fab color="tertiary" extended icon="add" label="New task"></moni-fab>
+ * <!-- FAB terciario extendido -->
+ * <moni-fab color="tertiary" extended icon="add" label="Nueva tarea"></moni-fab>
  *
- * <!-- Positioned FAB -->
+ * <!-- FAB posicionado -->
  * <moni-fab position="bottom-trailing" icon="navigation"></moni-fab>
  * ```
  *
- * @csspart button - The internal `<button>` element.
- * @csspart icon   - The container for the icon.
- * @csspart label  - The text label (only visible when extended).
+ * @csspart button - El elemento `<button>` interno.
+ * @csspart icon   - El contenedor para el icono.
+ * @csspart label  - La etiqueta de texto (solo visible cuando está extendido).
  */
 export declare class MoniFab extends MoniElement {
     private static _deprecationWarned;
+    /**
+     * Define las dimensiones del FAB.
+     * `small` está deprecado en M3 Expressive.
+     * @type {'small' | 'medium' | 'large'}
+     * @default 'medium'
+     */
     size: 'small' | 'medium' | 'large';
+    /**
+     * Mapeo de color semántico del FAB.
+     * `surface` está deprecado en M3.
+     * @type {'primary' | 'secondary' | 'tertiary' | 'surface'}
+     * @default 'primary'
+     */
     color: 'primary' | 'secondary' | 'tertiary' | 'surface';
+    /**
+     * Forma de las esquinas del FAB.
+     * `circle` está deprecado en M3 (los FABs deben ser cuadrados redondeados).
+     * @type {'rounded' | 'circle'}
+     * @default 'rounded'
+     */
     shape: 'rounded' | 'circle';
+    /**
+     * Alias heredado de `expanded`. Indica si el FAB muestra una etiqueta de texto.
+     * @type {boolean}
+     */
     extended: boolean;
+    /**
+     * Si es true, expande el FAB para mostrar su etiqueta de texto junto al icono.
+     * @type {boolean}
+     */
     expanded: boolean;
+    /**
+     * Deshabilita el FAB.
+     * @type {boolean}
+     */
     disabled: boolean;
+    /**
+     * Nombre del icono (Material Symbols) mostrado dentro del FAB.
+     * @type {string}
+     * @default 'add'
+     */
     icon: string;
+    /**
+     * Etiqueta de texto mostrada cuando el FAB se expande/extiende.
+     * @type {string}
+     */
     label: string;
+    /**
+     * Fija la posición del FAB relativa a los bordes de la pantalla.
+     * @type {'bottom-trailing' | 'bottom-leading' | 'top-trailing' | 'top-leading'}
+     * @default 'bottom-trailing'
+     */
     position: 'bottom-trailing' | 'bottom-leading' | 'top-trailing' | 'top-leading';
     connectedCallback(): void;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el botón FAB con su icono, etiqueta extendida opcional, y estado de carga.
+     *
+     * **Composición de clases:**
+     * - `'fab'` — estilos base del FAB (redondo, 56dp, elevado).
+     * - `this.size` (`'small'` = 40dp, `'large'` = 96dp, por defecto = 56dp).
+     * - `this.variant` — esquema de color (`'primary'`, `'secondary'`, `'tertiary'`, `'surface'`).
+     * - `'extended'` — se añade cuando se establece `label`; ensancha el FAB en forma de píldora
+     *   y revela el texto de la etiqueta con una transición CSS `max-width`.
+     *
+     * **Estado de carga:**
+     * Cuando `loading=true`, un spinner `<moni-progress>` reemplaza el icono. La etiqueta
+     * permanece visible para mantener el ancho del FAB extendido y prevenir saltos de diseño.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-fab.d.ts","sourceRoot":"","sources":["../../src/components/moni-fab.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,OAAQ,SAAQ,WAAW;IACvC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAS;IAG1C,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAa;IAEpE,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAa;IACI,QAAQ,UAAS;IACjB,QAAQ,UAAS;IACjB,QAAQ,UAAS;IAChC,IAAI,SAAS;IACb,KAAK,SAAM;IAExC,QAAQ,EACL,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,aAAa,CAAqB;IAE5B,iBAAiB,IAAI,IAAI;IAkBlC,OAAgB,MAAM,4BA6JpB;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-fab.d.ts","sourceRoot":"","sources":["../../src/components/moni-fab.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,qBACa,OAAQ,SAAQ,WAAW;IACvC,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAS;IAE1C;;;;;OAKG;IAEH,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9C;;;;;OAKG;IAEH,KAAK,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAa;IAEpE;;;;;OAKG;IAEH,KAAK,EAAE,SAAS,GAAG,QAAQ,CAAa;IAExC;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;;OAIG;IAC0B,IAAI,SAAS;IAE1C;;;OAGG;IAC0B,KAAK,SAAM;IAExC;;;;OAIG;IAEH,QAAQ,EACL,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GACd,aAAa,CAAqB;IAE5B,iBAAiB,IAAI,IAAI;IAkBlC,OAAgB,MAAM,4BA6JpB;IAEF;;;;;;;;;;;;;OAaG;IACM,MAAM;CAyBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,UAAU,EAAE,OAAO,CAAC;KACpB;CACD;AAED,eAAe,OAAO,CAAC"}