@moni-labs/moni-ui 0.3.0 → 0.3.2

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

@@ -8,76 +8,154 @@ import { MoniElement } from './_base/index.js';
 import './moni-icon.js';
 import './moni-progress.js';
 /**
- * Material Design 3 Button component.
+ * Componente Material Design 3 Button.
  *
- * Buttons allow users to take actions and make choices with a single tap.
- * This component provides all M3 button variants, sizes, and shape morphing
- * capabilities (e.g. morphing to a pill shape on press or toggle).
+ * Los botones permiten a los usuarios realizar acciones y hacer elecciones con un solo toque.
+ * Este componente proporciona todas las variantes de botones de M3, tamaños y capacidades
+ * de transformación de formas (ej. cambiar a una forma de píldora al presionar o alternar).
  *
- * **M3 spec reference:** `m3-docs/components/buttons/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/buttons/specs.md`
  *
- * **Variants:**
- * - `filled` (default) — High emphasis. Use for primary actions.
- * - `tonal` — Medium emphasis. Secondary actions that still need to stand out.
- * - `elevated` — Medium emphasis with shadow. Used when sitting on patterned backgrounds.
- * - `outlined` — Medium emphasis, no fill. Secondary or tertiary actions.
- * - `text` — Low emphasis. Tertiary actions (e.g. dialog cancel button).
+ * **Variantes:**
+ * - `filled` (por defecto) — Énfasis alto. Úsalo para acciones principales.
+ * - `tonal` — Énfasis medio. Acciones secundarias que aún necesitan destacar.
+ * - `elevated` — Énfasis medio con sombra. Úsalo al sentarse sobre fondos con patrones.
+ * - `outlined` — Énfasis medio, sin relleno. Acciones secundarias o terciarias.
+ * - `text` — Énfasis bajo. Acciones terciarias (ej. botón de cancelar diálogo).
  *
- * **Shape morphing (M3 Expressive feature):**
- * - On press (active state): Round and square buttons morph to a slightly squarer
- *   "pressed" shape with specific M3 corner radii (e.g. XS/S 8dp, M 12dp).
- * - On toggle (`active` attribute): The resting shape flips (e.g. round ↔ square).
+ * **Transformación de forma (Característica M3 Expressive):**
+ * - Al presionar (estado activo): Los botones redondos y cuadrados se transforman a una forma
+ *   "presionada" ligeramente más cuadrada con radios de esquina específicos de M3 (ej. XS/S 8dp, M 12dp).
+ * - Al alternar (atributo `active`): La forma de reposo se invierte (ej. redondo ↔ cuadrado).
  *
- * **Rendering as a link:**
- * When the `href` attribute is provided, the component internally renders as
- * an `<a>` element instead of a `<button>`, allowing native routing and
- * middle-click (open in new tab) behaviors while maintaining button visuals.
+ * **Renderizando como un enlace:**
+ * Cuando se proporciona el atributo `href`, el componente se renderiza internamente como
+ * un elemento `<a>` en lugar de un `<button>`, permitiendo enrutamiento nativo y comportamientos
+ * de clic central (abrir en nueva pestaña) mientras mantiene los visuales del botón.
  *
  * @example
  * ```html
- * <!-- Primary filled button -->
- * <moni-button icon="add">Create new</moni-button>
+ * <!-- Botón primario relleno -->
+ * <moni-button icon="add">Crear nuevo</moni-button>
  *
- * <!-- Outlined button -->
- * <moni-button variant="outlined">Cancel</moni-button>
+ * <!-- Botón contorneado -->
+ * <moni-button variant="outlined">Cancelar</moni-button>
  *
- * <!-- Toggle button (toggles active state on click) -->
- * <moni-button icon="favorite" active>Like</moni-button>
+ * <!-- Botón de alternar (alterna estado activo al hacer clic) -->
+ * <moni-button icon="favorite" active>Me gusta</moni-button>
  *
- * <!-- Link button -->
- * <moni-button href="/settings" icon="settings">Settings</moni-button>
+ * <!-- Botón enlace -->
+ * <moni-button href="/settings" icon="settings">Ajustes</moni-button>
  * ```
  *
- * @slot default       - The button label text.
- * @slot icon          - Optional override for the leading icon.
- * @slot icon-trailing - Optional override for the trailing icon.
+ * @slot default       - El texto de la etiqueta del botón.
+ * @slot icon          - Sobrescritura opcional para el icono inicial (leading).
+ * @slot icon-trailing - Sobrescritura opcional para el icono final (trailing).
  *
- * @csspart button     - The inner `<button>` or `<a>` element.
- * @csspart icon       - The leading icon container.
- * @csspart label      - The label container.
- * @csspart trailing-icon - The trailing icon container.
+ * @csspart button     - El elemento interno `<button>` o `<a>`.
+ * @csspart icon       - El contenedor del icono inicial.
+ * @csspart label      - El contenedor de la etiqueta.
+ * @csspart trailing-icon - El contenedor del icono final.
  */
 export declare class MoniButton extends MoniElement {
     private static _deprecationWarned;
-    variant: 'filled' | 'tonal' | 'outlined' | 'text' | 'fill' | 'elevated';
     /**
-     * M3 Expressive sizes: xsmall, small, medium, large, xlarge.
-     * `extra` is a Moni legacy alias for `xlarge`, deprecated in v0.3.1; will
-     * be removed in v1.0. See `m3-docs/components/buttons/overview.md` § Sizes.
+     * Variante visual del botón.
+     * @type {'filled' | 'tonal' | 'outlined' | 'text' | 'fill' | 'elevated'}
+     * @default 'filled'
+     */
+    variant: 'filled' | 'tonal' | 'outlined' | 'text' | 'fill' | 'elevated' | 'error';
+    /**
+     * Tamaños de M3 Expressive: xsmall, small, medium, large, xlarge.
+     * `extra` es un alias heredado de Moni para `xlarge`, obsoleto en v0.3.1; se
+     * eliminará en v1.0. Ver `m3-docs/components/buttons/overview.md` § Sizes.
+     * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+     * @default 'medium'
      */
     size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra';
+    /**
+     * Forma de las esquinas del botón.
+     * @type {'round' | 'no-round' | 'square' | 'circle' | 'left-round' | 'right-round' | 'top-round' | 'bottom-round' | 'left-round-flat' | 'right-round-flat' | 'top-round-flat' | 'bottom-round-flat' | 'inner-round'}
+     * @default 'round'
+     */
     shape: 'round' | 'no-round' | 'square' | 'circle' | 'left-round' | 'right-round' | 'top-round' | 'bottom-round' | 'left-round-flat' | 'right-round-flat' | 'top-round-flat' | 'bottom-round-flat' | 'inner-round';
+    /**
+     * Deshabilita el botón.
+     * @type {boolean}
+     */
     disabled: boolean;
+    /**
+     * Si es verdadero, muestra un indicador de carga y deshabilita el botón.
+     * @type {boolean}
+     */
     loading: boolean;
+    /**
+     * Si es verdadero, establece el botón a un estado activo/seleccionado.
+     * @type {boolean}
+     */
     active: boolean;
+    /**
+     * Nombre del icono inicial (Material Symbols).
+     * @type {string}
+     */
     icon: string;
+    /**
+     * Nombre del icono final (Material Symbols).
+     * @type {string}
+     */
     iconTrailing: string;
+    /**
+     * Tipo nativo del botón (cuando se renderiza como un `<button>`).
+     * @type {'button' | 'submit' | 'reset'}
+     * @default 'button'
+     */
     type: 'button' | 'submit' | 'reset';
+    /**
+     * Si está establecido, renderiza el botón como un elemento `<a>` con esta URL.
+     * @type {string}
+     */
     href: string;
+    /**
+     * Atributo target para los botones tipo enlace.
+     * @type {string}
+     */
     target: string;
     connectedCallback(): void;
     static styles: import("lit").CSSResult[];
+    /**
+     * Intercepta los clicks en botones tipo enlace (`href="..."`).
+     * Si el botón está desactivado (`disabled`), previene agresivamente
+     * tanto la navegación por defecto del navegador como la burbuja de eventos.
+     */
     private handleLinkClick;
+    /**
+     * Assembles the button's Shadow DOM structure for each Lit render cycle.
+     *
+     * **Variant → CSS class mapping:**
+     * | `variant`    | CSS class     | Visual result               |
+     * |--------------|---------------|-----------------------------|
+     * | `'filled'`   | `''` (empty)  | Primary filled button       |
+     * | `'outlined'` | `'border'`    | Outlined/stroked button     |
+     * | `'tonal'`    | `'fill'`      | Secondary container fill    |
+     * | `'text'`     | `'transparent'` | Ghost/text button         |
+     * | `'elevated'` | `'elevated'`  | Tonal surface + shadow      |
+     *
+     * **Shape morphing:**
+     * When `active=true`, the button inverts its corner-radius shape to create
+     * a micro-animation where clicking "morphs" the shape (round → square, etc.).
+     * This is used in toggle-button patterns (e.g., a nav-item that morphs to
+     * indicate the current page).
+     *
+     * **Icon resolution priority:**
+     * 1. `loading=true` → renders a `<moni-progress>` spinner (hides label at 50% opacity).
+     * 2. `icon` attribute → renders a `<moni-icon>` in the leading icon slot.
+     * 3. Otherwise → renders the `icon` named slot for slotted content.
+     *
+     * **Link vs. button:**
+     * When `href` is set, the root element is an `<a>` tag (with disabled click
+     * guard) for proper browser navigation semantics. Otherwise it's a `<button>`
+     * with `type="button"` to prevent accidental form submission.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-button.d.ts","sourceRoot":"","sources":["../../src/components/moni-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,UAAW,SAAQ,WAAW;IAC1C,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAS;IAG1C,OAAO,EACJ,QAAQ,GACR,OAAO,GACP,UAAU,GACV,MAAM,GACN,MAAM,GACN,UAAU,CAAY;IACzB;;;;OAIG;IAEH,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9E,KAAK,EACF,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,mBAAmB,GACnB,aAAa,CAAW;IACiB,QAAQ,UAAS;IACjB,OAAO,UAAS;IAChB,MAAM,UAAS;IAC9B,IAAI,SAAM;IACkB,YAAY,SAAM;IAE3E,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAClB,IAAI,SAAM;IACV,MAAM,SAAM;IAEhC,iBAAiB,IAAI,IAAI;IAalC,OAAgB,MAAM,4BA6fpB;IAEF,OAAO,CAAC,eAAe;IAOd,MAAM;CAiFf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}
+{"version":3,"file":"moni-button.d.ts","sourceRoot":"","sources":["../../src/components/moni-button.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAC7D,OAAO,gBAAgB,CAAC;AACxB,OAAO,oBAAoB,CAAC;AAE5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiDG;AACH,qBACa,UAAW,SAAQ,WAAW;IAC1C,OAAO,CAAC,MAAM,CAAC,kBAAkB,CAAS;IAE1C;;;;OAIG;IAEH,OAAO,EACJ,QAAQ,GACR,OAAO,GACP,UAAU,GACV,MAAM,GACN,MAAM,GACN,UAAU,GACV,OAAO,CAAY;IAEtB;;;;;;OAMG;IAEH,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE9E;;;;OAIG;IAEH,KAAK,EACF,OAAO,GACP,UAAU,GACV,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,aAAa,GACb,WAAW,GACX,cAAc,GACd,iBAAiB,GACjB,kBAAkB,GAClB,gBAAgB,GAChB,mBAAmB,GACnB,aAAa,CAAW;IAE3B;;;OAGG;IACyC,QAAQ,UAAS;IAE7D;;;OAGG;IACyC,OAAO,UAAS;IAE5D;;;OAGG;IACyC,MAAM,UAAS;IAE3D;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IACsD,YAAY,SAAM;IAE3E;;;;OAIG;IAEH,IAAI,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAY;IAE/C;;;OAGG;IAC0B,IAAI,SAAM;IAEvC;;;OAGG;IAC0B,MAAM,SAAM;IAEhC,iBAAiB,IAAI,IAAI;IAalC,OAAgB,MAAM,4BAugBpB;IAEF;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAOvB;;;;;;;;;;;;;;;;;;;;;;;;;;;OA2BG;IACM,MAAM;CAkFf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,aAAa,EAAE,UAAU,CAAC;KAC1B;CACD;AAED,eAAe,UAAU,CAAC"}

package/dist/components/moni-button.js

@@ -18,73 +18,118 @@ import { MoniElement, sharedStyles } from './_base/index.js';
 import './moni-icon.js';
 import './moni-progress.js';
 /**
- * Material Design 3 Button component.
+ * Componente Material Design 3 Button.
  *
- * Buttons allow users to take actions and make choices with a single tap.
- * This component provides all M3 button variants, sizes, and shape morphing
- * capabilities (e.g. morphing to a pill shape on press or toggle).
+ * Los botones permiten a los usuarios realizar acciones y hacer elecciones con un solo toque.
+ * Este componente proporciona todas las variantes de botones de M3, tamaños y capacidades
+ * de transformación de formas (ej. cambiar a una forma de píldora al presionar o alternar).
  *
- * **M3 spec reference:** `m3-docs/components/buttons/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/buttons/specs.md`
  *
- * **Variants:**
- * - `filled` (default) — High emphasis. Use for primary actions.
- * - `tonal` — Medium emphasis. Secondary actions that still need to stand out.
- * - `elevated` — Medium emphasis with shadow. Used when sitting on patterned backgrounds.
- * - `outlined` — Medium emphasis, no fill. Secondary or tertiary actions.
- * - `text` — Low emphasis. Tertiary actions (e.g. dialog cancel button).
+ * **Variantes:**
+ * - `filled` (por defecto) — Énfasis alto. Úsalo para acciones principales.
+ * - `tonal` — Énfasis medio. Acciones secundarias que aún necesitan destacar.
+ * - `elevated` — Énfasis medio con sombra. Úsalo al sentarse sobre fondos con patrones.
+ * - `outlined` — Énfasis medio, sin relleno. Acciones secundarias o terciarias.
+ * - `text` — Énfasis bajo. Acciones terciarias (ej. botón de cancelar diálogo).
  *
- * **Shape morphing (M3 Expressive feature):**
- * - On press (active state): Round and square buttons morph to a slightly squarer
- *   "pressed" shape with specific M3 corner radii (e.g. XS/S 8dp, M 12dp).
- * - On toggle (`active` attribute): The resting shape flips (e.g. round ↔ square).
+ * **Transformación de forma (Característica M3 Expressive):**
+ * - Al presionar (estado activo): Los botones redondos y cuadrados se transforman a una forma
+ *   "presionada" ligeramente más cuadrada con radios de esquina específicos de M3 (ej. XS/S 8dp, M 12dp).
+ * - Al alternar (atributo `active`): La forma de reposo se invierte (ej. redondo ↔ cuadrado).
  *
- * **Rendering as a link:**
- * When the `href` attribute is provided, the component internally renders as
- * an `<a>` element instead of a `<button>`, allowing native routing and
- * middle-click (open in new tab) behaviors while maintaining button visuals.
+ * **Renderizando como un enlace:**
+ * Cuando se proporciona el atributo `href`, el componente se renderiza internamente como
+ * un elemento `<a>` en lugar de un `<button>`, permitiendo enrutamiento nativo y comportamientos
+ * de clic central (abrir en nueva pestaña) mientras mantiene los visuales del botón.
  *
  * @example
  * ```html
- * <!-- Primary filled button -->
- * <moni-button icon="add">Create new</moni-button>
+ * <!-- Botón primario relleno -->
+ * <moni-button icon="add">Crear nuevo</moni-button>
  *
- * <!-- Outlined button -->
- * <moni-button variant="outlined">Cancel</moni-button>
+ * <!-- Botón contorneado -->
+ * <moni-button variant="outlined">Cancelar</moni-button>
  *
- * <!-- Toggle button (toggles active state on click) -->
- * <moni-button icon="favorite" active>Like</moni-button>
+ * <!-- Botón de alternar (alterna estado activo al hacer clic) -->
+ * <moni-button icon="favorite" active>Me gusta</moni-button>
  *
- * <!-- Link button -->
- * <moni-button href="/settings" icon="settings">Settings</moni-button>
+ * <!-- Botón enlace -->
+ * <moni-button href="/settings" icon="settings">Ajustes</moni-button>
  * ```
  *
- * @slot default       - The button label text.
- * @slot icon          - Optional override for the leading icon.
- * @slot icon-trailing - Optional override for the trailing icon.
+ * @slot default       - El texto de la etiqueta del botón.
+ * @slot icon          - Sobrescritura opcional para el icono inicial (leading).
+ * @slot icon-trailing - Sobrescritura opcional para el icono final (trailing).
  *
- * @csspart button     - The inner `<button>` or `<a>` element.
- * @csspart icon       - The leading icon container.
- * @csspart label      - The label container.
- * @csspart trailing-icon - The trailing icon container.
+ * @csspart button     - El elemento interno `<button>` o `<a>`.
+ * @csspart icon       - El contenedor del icono inicial.
+ * @csspart label      - El contenedor de la etiqueta.
+ * @csspart trailing-icon - El contenedor del icono final.
  */
 let MoniButton = class MoniButton extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * Variante visual del botón.
+         * @type {'filled' | 'tonal' | 'outlined' | 'text' | 'fill' | 'elevated'}
+         * @default 'filled'
+         */
         this.variant = 'filled';
         /**
-         * M3 Expressive sizes: xsmall, small, medium, large, xlarge.
-         * `extra` is a Moni legacy alias for `xlarge`, deprecated in v0.3.1; will
-         * be removed in v1.0. See `m3-docs/components/buttons/overview.md` § Sizes.
+         * Tamaños de M3 Expressive: xsmall, small, medium, large, xlarge.
+         * `extra` es un alias heredado de Moni para `xlarge`, obsoleto en v0.3.1; se
+         * eliminará en v1.0. Ver `m3-docs/components/buttons/overview.md` § Sizes.
+         * @type {'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra'}
+         * @default 'medium'
          */
         this.size = 'medium';
+        /**
+         * Forma de las esquinas del botón.
+         * @type {'round' | 'no-round' | 'square' | 'circle' | 'left-round' | 'right-round' | 'top-round' | 'bottom-round' | 'left-round-flat' | 'right-round-flat' | 'top-round-flat' | 'bottom-round-flat' | 'inner-round'}
+         * @default 'round'
+         */
         this.shape = 'round';
+        /**
+         * Deshabilita el botón.
+         * @type {boolean}
+         */
         this.disabled = false;
+        /**
+         * Si es verdadero, muestra un indicador de carga y deshabilita el botón.
+         * @type {boolean}
+         */
         this.loading = false;
+        /**
+         * Si es verdadero, establece el botón a un estado activo/seleccionado.
+         * @type {boolean}
+         */
         this.active = false;
+        /**
+         * Nombre del icono inicial (Material Symbols).
+         * @type {string}
+         */
         this.icon = '';
+        /**
+         * Nombre del icono final (Material Symbols).
+         * @type {string}
+         */
         this.iconTrailing = '';
+        /**
+         * Tipo nativo del botón (cuando se renderiza como un `<button>`).
+         * @type {'button' | 'submit' | 'reset'}
+         * @default 'button'
+         */
         this.type = 'button';
+        /**
+         * Si está establecido, renderiza el botón como un elemento `<a>` con esta URL.
+         * @type {string}
+         */
         this.href = '';
+        /**
+         * Atributo target para los botones tipo enlace.
+         * @type {string}
+         */
         this.target = '';
     }
     static { MoniButton_1 = this; }
@@ -179,7 +224,7 @@ let MoniButton = class MoniButton extends MoniElement {
 			/* Square keeps horizontal padding (like a normal button) but
 			   drops border-radius. Only the circle removes all padding. */
 			.button.circle {
-				padding: 0;
+				padding: 0 !important;
 				border-radius: 50%;
 				inline-size: 2.5rem;
 				aspect-ratio: 1;
@@ -510,6 +555,16 @@ let MoniButton = class MoniButton extends MoniElement {
 				color: var(--primary);
 				box-shadow: var(--elevate1);
 			}
+			.button.error {
+				background-color: var(--error);
+				color: var(--on-error);
+			}
+			.button.error:hover:not(:disabled) {
+				background-image: linear-gradient(color-mix(in srgb, currentColor 8%, transparent), color-mix(in srgb, currentColor 8%, transparent));
+			}
+			.button.error:focus-visible {
+				outline-color: var(--error);
+			}
 
 			/* Disabled / active */
 			.button:disabled,
@@ -610,12 +665,45 @@ let MoniButton = class MoniButton extends MoniElement {
 			}
 		`
     ]; }
+    /**
+     * Intercepta los clicks en botones tipo enlace (`href="..."`).
+     * Si el botón está desactivado (`disabled`), previene agresivamente
+     * tanto la navegación por defecto del navegador como la burbuja de eventos.
+     */
     handleLinkClick(e) {
         if (this.disabled) {
             e.preventDefault();
             e.stopPropagation();
         }
     }
+    /**
+     * Assembles the button's Shadow DOM structure for each Lit render cycle.
+     *
+     * **Variant → CSS class mapping:**
+     * | `variant`    | CSS class     | Visual result               |
+     * |--------------|---------------|-----------------------------|
+     * | `'filled'`   | `''` (empty)  | Primary filled button       |
+     * | `'outlined'` | `'border'`    | Outlined/stroked button     |
+     * | `'tonal'`    | `'fill'`      | Secondary container fill    |
+     * | `'text'`     | `'transparent'` | Ghost/text button         |
+     * | `'elevated'` | `'elevated'`  | Tonal surface + shadow      |
+     *
+     * **Shape morphing:**
+     * When `active=true`, the button inverts its corner-radius shape to create
+     * a micro-animation where clicking "morphs" the shape (round → square, etc.).
+     * This is used in toggle-button patterns (e.g., a nav-item that morphs to
+     * indicate the current page).
+     *
+     * **Icon resolution priority:**
+     * 1. `loading=true` → renders a `<moni-progress>` spinner (hides label at 50% opacity).
+     * 2. `icon` attribute → renders a `<moni-icon>` in the leading icon slot.
+     * 3. Otherwise → renders the `icon` named slot for slotted content.
+     *
+     * **Link vs. button:**
+     * When `href` is set, the root element is an `<a>` tag (with disabled click
+     * guard) for proper browser navigation semantics. Otherwise it's a `<button>`
+     * with `type="button"` to prevent accidental form submission.
+     */
     render() {
         let variantClass = '';
         if (this.variant === 'outlined')
@@ -626,6 +714,8 @@ let MoniButton = class MoniButton extends MoniElement {
             variantClass = 'transparent';
         else if (this.variant === 'elevated')
             variantClass = 'elevated';
+        else if (this.variant === 'error')
+            variantClass = 'error';
         let activeShape = this.shape;
         if (this.active) {
             if (this.shape === 'round')

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

@@ -6,97 +6,115 @@
  */
 import { MoniElement } from './_base/index.js';
 /**
- * Material Design 3 Card component.
+ * Componente Material Design 3 Card.
  *
- * Cards display content and actions about a single subject. They are
- * container surfaces that group related information together, making it
- * easy for users to scan and interact with collections of related data.
+ * Las tarjetas muestran contenido y acciones sobre un solo sujeto. Son
+ * superficies contenedoras que agrupan información relacionada junta, haciendo
+ * fácil para los usuarios escanear e interactuar con colecciones de datos relacionados.
  *
- * **M3 spec reference:** `m3-docs/components/cards/specs.md`
+ * **Referencia de la especificación M3:** `m3-docs/components/cards/specs.md`
  *
- * **Variants:**
- * - `elevated` (default) — `surface-container-low` background + `--elevate1` shadow.
- *   Best for collections where the card needs visual separation from a
- *   patterned or colored background. Gains shadow on hover/drag.
- * - `filled` — `surface-container-highest` background, no shadow.
- *   Lowest emphasis; use when cards sit directly on the main background surface.
- * - `outlined` — `surface` background + 1dp `outline-variant` stroke.
- *   Highest structural emphasis without casting a shadow. Best on solid backgrounds.
+ * **Variantes:**
+ * - `elevated` (por defecto) — Fondo `surface-container-low` + sombra `--elevate1`.
+ *   Mejor para colecciones donde la tarjeta necesita separación visual de un
+ *   fondo con patrones o de color. Gana sombra al pasar el ratón/arrastrar.
+ * - `filled` — Fondo `surface-container-highest`, sin sombra.
+ *   Énfasis más bajo; úsalo cuando las tarjetas se asientan directamente sobre la superficie del fondo principal.
+ * - `outlined` — Fondo `surface` + trazo `outline-variant` 1dp.
+ *   Énfasis estructural más alto sin proyectar una sombra. Mejor en fondos sólidos.
  *
- * **M3 measurements:**
- * - Container corner radius: 12dp.
- * - Horizontal content padding: 16dp.
- * - Gap between cards in a collection: max 8dp.
- * - Headline text alignment: start.
+ * **Medidas M3:**
+ * - Radio de esquina del contenedor: 12dp.
+ * - Relleno de contenido horizontal: 16dp.
+ * - Espacio entre tarjetas en una colección: máx. 8dp.
+ * - Alineación de texto del titular: inicio.
  *
- * **Interactive cards:**
- * When `clickable=true`, the card renders M3 state layer overlays on hover,
- * focus, and press via the `::before` pseudo-element. The consumer must handle
- * the `click` event to implement navigation or selection logic.
+ * **Tarjetas interactivas:**
+ * Cuando `clickable=true`, la tarjeta renderiza capas de estado M3 (hover,
+ * focus, press) a través del pseudo-elemento `::before`. El consumidor debe manejar
+ * el evento `click` para implementar la lógica de navegación o selección.
  *
  * @example
  * ```html
  * <moni-card variant="outlined" clickable>
- *   <img slot="media" src="photo.jpg" alt="Card image" />
- *   <h3 slot="headline">Card Title</h3>
- *   <p slot="supporting">Supporting text that describes the card topic.</p>
+ *   <img slot="media" src="photo.jpg" alt="Imagen de la tarjeta" />
+ *   <h3 slot="headline">Título de Tarjeta</h3>
+ *   <p slot="supporting">Texto de soporte que describe el tema de la tarjeta.</p>
  *   <div slot="actions">
- *     <moni-button variant="text">Cancel</moni-button>
- *     <moni-button>Confirm</moni-button>
+ *     <moni-button variant="text">Cancelar</moni-button>
+ *     <moni-button>Confirmar</moni-button>
  *   </div>
  * </moni-card>
  * ```
  *
- * @slot media      - An image, video, or icon at the top of the card.
- * @slot default    - Primary body content (replaces all named slots if used).
- * @slot headline   - H3-equivalent title text.
- * @slot subhead    - Secondary title below the headline.
- * @slot supporting - Descriptive supporting body text.
- * @slot actions    - Action buttons row at the bottom of the card.
+ * @slot media      - Una imagen, video, o icono en la parte superior de la tarjeta.
+ * @slot default    - Contenido del cuerpo principal (reemplaza todos los slots con nombre si se usa).
+ * @slot headline   - Texto de título equivalente a H3.
+ * @slot subhead    - Título secundario debajo del titular.
+ * @slot supporting - Texto de soporte descriptivo del cuerpo.
+ * @slot actions    - Fila de botones de acción en la parte inferior de la tarjeta.
  *
- * @csspart card    - The outer card container.
- * @csspart media   - The media area wrapper.
- * @csspart content - The content wrapper.
- * @csspart actions - The actions row wrapper.
+ * @csspart card    - El contenedor exterior de la tarjeta.
+ * @csspart media   - El contenedor del área de medios.
+ * @csspart content - El contenedor de contenido.
+ * @csspart actions - El contenedor de la fila de acciones.
  */
 export declare class MoniCard extends MoniElement {
     /**
-     * Visual variant of the card.
+     * Variante visual de la tarjeta.
      *
-     * - `'elevated'` (default) — Surface-low background + elevation shadow.
-     * - `'filled'` — Surface-highest background, no shadow.
-     * - `'outlined'` — Surface background + outline-variant stroke.
+     * - `'elevated'` (por defecto) — Fondo Surface-low + sombra de elevación.
+     * - `'filled'` — Fondo Surface-highest, sin sombra.
+     * - `'outlined'` — Fondo Surface + trazo outline-variant.
      *
      * @default 'elevated'
      */
     variant: 'elevated' | 'filled' | 'outlined';
     /**
-     * When `true`, applies M3 state layer overlays (hover, focus, pressed)
-     * to communicate interactivity. The card background shifts slightly on hover.
+     * Cuando es `true`, aplica capas de estado M3 (hover, focus, pressed)
+     * para comunicar interactividad. El fondo de la tarjeta cambia ligeramente en hover.
      *
-     * Use when the card itself is a clickable navigation or selection target.
+     * Úsalo cuando la tarjeta en sí es un objetivo de navegación o selección clicable.
      *
      * @default false
      */
     clickable: boolean;
     /**
-     * When `true`, applies `--elevate3` box-shadow to simulate the M3 "dragged"
-     * state as specified in the M3 card interaction spec.
+     * Cuando es `true`, aplica box-shadow `--elevate3` para simular el estado "arrastrado"
+     * M3 según lo especificado en la especificación de interacción de tarjetas M3.
      *
-     * Consumers should toggle this attribute based on the drag state of the card
-     * (e.g. via a drag-and-drop library callback).
+     * Los consumidores deben alternar este atributo basado en el estado de arrastre de la tarjeta
+     * (ej. a través de un callback de biblioteca drag-and-drop).
      *
      * @default false
      */
     draggable: boolean;
     /**
-     * When `true`, the card renders at 50% opacity with `cursor: not-allowed`,
-     * signaling that the card and its actions are unavailable.
+     * Cuando es `true`, la tarjeta se renderiza con opacidad del 50% con `cursor: not-allowed`,
+     * indicando que la tarjeta y sus acciones no están disponibles.
      *
      * @default false
      */
     disabled: boolean;
     static styles: import("lit").CSSResult[];
+    /**
+     * Renderiza el contenedor de la tarjeta como un `<section>` con envoltorio interactivo opcional.
+     *
+     * **¿Por qué `<section>`?**
+     * Las tarjetas representan una unidad distintiva y cohesiva de contenido. Usar `<section>` da
+     * a los lectores de pantalla un punto de referencia ARIA implícito para que puedan navegar entre tarjetas.
+     *
+     * **Tarjetas interactivas (`clickable=true`):**
+     * Cuando es `clickable`, toda la superficie de la tarjeta se convierte en un `<button>` que envuelve
+     * all slots, giving the card keyboard focus and `click` semantics. A
+     * `<moni-ripple>` is rendered as the first child to provide the M3 touch feedback.
+     *
+     * **Slot zones:**
+     * - `[slot="media"]` — image or video area at the card's leading edge.
+     * - `[slot="header"]` — title and supporting text row.
+     * - Default slot — the card's main content body.
+     * - `[slot="footer"]` — action buttons row at the trailing edge.
+     */
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

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

@@ -1 +1 @@
-{"version":3,"file":"moni-card.d.ts","sourceRoot":"","sources":["../../src/components/moni-card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,QAAS,SAAQ,WAAW;IACxC;;;;;;;;OAQG;IAEH,OAAO,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAc;IAEzD;;;;;;;OAOG;IACyC,SAAS,UAAS;IAE9D;;;;;;;;OAQG;IACyC,SAAS,UAAS;IAE9D;;;;;OAKG;IACyC,QAAQ,UAAS;IAE7D,OAAgB,MAAM,4BAmIpB;IAEO,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"moni-card.d.ts","sourceRoot":"","sources":["../../src/components/moni-card.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,EAAE,WAAW,EAAgB,MAAM,kBAAkB,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,QAAS,SAAQ,WAAW;IACxC;;;;;;;;OAQG;IAEH,OAAO,EAAE,UAAU,GAAG,QAAQ,GAAG,UAAU,CAAc;IAEzD;;;;;;;OAOG;IACyC,SAAS,UAAS;IAE9D;;;;;;;;OAQG;IACyC,SAAS,UAAS;IAE9D;;;;;OAKG;IACyC,QAAQ,UAAS;IAI7D,OAAgB,MAAM,4BAmIpB;IAEF;;;;;;;;;;;;;;;;;OAiBG;IACM,MAAM;CAiBf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD;AAED,eAAe,QAAQ,CAAC"}