@moni-labs/moni-ui 0.3.0 → 0.3.2

package/dist/components/moni-typography.js

@@ -16,58 +16,77 @@ import { customElement, property } from 'lit/decorators.js';
 import { unsafeStatic, html as staticHtml } from 'lit/static-html.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 /**
- * Material Design 3 Typography component.
+ * Componente Material Design 3 Typography (Tipografía).
  *
- * A specialized text component that enforces the M3 type scale. It ensures
- * typography is consistent, accessible, and correctly styled across the
- * application without requiring manual CSS classes.
+ * Un componente de texto especializado que aplica la escala tipográfica M3. Asegura
+ * que la tipografía sea consistente, accesible y correctamente estilizada en toda la
+ * aplicación sin requerir clases CSS manuales.
  *
- * **M3 spec reference:** `m3-docs/components/typography/specs.md`
+ * **Categorías de Escala Tipográfica:**
+ * - `display`: El texto más grande en la pantalla, reservado para texto corto e importante
+ *   o números. Funciona mejor en pantallas grandes. (Renderiza `<h1>` por defecto).
+ * - `headline`: Texto de alto énfasis para encabezados primarios de página/sección.
+ *   (Renderiza `<h2>` por defecto).
+ * - `title`: Texto de énfasis medio utilizado para encabezados de diálogos o títulos
+ *   de sección más pequeños. (Renderiza `<h3>` por defecto).
+ * - `body`: Texto de párrafo estándar utilizado para contenido largo.
+ *   (Renderiza `<p>` por defecto).
+ * - `label`: Texto pequeño y utilitario usado para botones, leyendas y elementos
+ *   de formulario. (Renderiza `<label>` por defecto).
  *
- * **Type Scale Categories:**
- * - `display`: The largest text on the screen, reserved for short, important
- *   text or numerals. Works best on large screens. (Renders `<h1>` by default).
- * - `headline`: High-emphasis text for primary page/section headers.
- *   (Renders `<h2>` by default).
- * - `title`: Medium-emphasis text used for dialog headers or smaller section
- *   titles. (Renders `<h3>` by default).
- * - `body`: Standard paragraph text used for long-form content.
- *   (Renders `<p>` by default).
- * - `label`: Small, utilitarian text used for buttons, captions, and form
- *   elements. (Renders `<label>` by default).
+ * Cada categoría soporta tres tamaños: `large`, `medium` y `small`.
  *
- * Each category supports three sizes: `large`, `medium`, and `small`.
+ * **Etiquetas Semánticas:**
+ * El componente selecciona automáticamente una etiqueta semántica HTML apropiada basada en
+ * la variante. Puedes sobrescribir esto explícitamente configurando el atributo `as`
+ * (ej., para renderizar un estilo `headline` pero usando una etiqueta `<span>` por razones
+ * de SEO o estructurales).
  *
- * **Semantic Tags:**
- * The component automatically selects an appropriate HTML semantic tag based on
- * the variant. You can explicitly override this by setting the `as` attribute
- * (e.g., to render a `headline` style but using a `<span>` tag for SEO or
- * structural reasons).
+ * @element moni-typography
  *
  * @example
  * ```html
- * <!-- Renders an <h1> with display-large styles -->
- * <moni-typography variant="display" size="large">Hero Text</moni-typography>
+ * <!-- Renderiza un <h1> con estilos display-large -->
+ * <moni-typography variant="display" size="large">Texto Héroe</moni-typography>
  *
- * <!-- Renders a <p> with body-medium styles -->
- * <moni-typography variant="body">Standard paragraph text.</moni-typography>
+ * <!-- Renderiza un <p> con estilos body-medium -->
+ * <moni-typography variant="body">Texto de párrafo estándar.</moni-typography>
  *
- * <!-- Overriding the semantic tag -->
- * <moni-typography variant="title" as="span">Inline title</moni-typography>
+ * <!-- Sobrescribiendo la etiqueta semántica -->
+ * <moni-typography variant="title" as="span">Título en línea</moni-typography>
  * ```
  *
- * @slot default - The text content to display.
+ * @slot default - El contenido de texto a mostrar.
+ * @csspart text - El elemento semántico interno (ej., h1, p, span) que envuelve el texto.
  */
 let MoniTypography = class MoniTypography extends MoniElement {
     constructor() {
         super(...arguments);
+        /**
+         * La categoría de la escala tipográfica M3 a aplicar.
+         * Dicta la lógica base de font-family, line-height, weight, y letter-spacing.
+         * @type {'display' | 'headline' | 'title' | 'body' | 'label'}
+         */
         this.variant = 'body';
+        /**
+         * El tamaño dentro de la categoría de variante elegida.
+         * @type {'large' | 'medium' | 'small'}
+         */
         this.size = 'medium';
+        /**
+         * Sobrescribe la etiqueta semántica HTML por defecto (ej. 'h1', 'p', 'span')
+         * que se asigna automáticamente basándose en la variante (`variant`).
+         * @type {string | null}
+         */
         this.as = null;
+        /**
+         * Contenido de texto simple opcional. Típicamente usarías el slot por defecto en su lugar.
+         * @type {string}
+         */
         this.text = '';
     }
     static { MoniTypography_1 = this; }
-    /** Default semantic tag for each variant per M3 spec. */
+    /** Etiqueta semántica por defecto para cada variante según la especificación M3. */
     static _tagFor(variant) {
         switch (variant) {
             case 'display':
@@ -82,11 +101,30 @@ let MoniTypography = class MoniTypography extends MoniElement {
                 return 'label';
         }
     }
+    /**
+     * Renderiza el elemento tipográfico con una etiqueta HTML seleccionada dinámicamente.
+     *
+     * **Selección dinámica de etiquetas:**
+     * `_tagFor(variant)` infiere el elemento HTML semántico de la variante de tipografía
+     * (ej. `'display-large'` → `<h1>`, `'body-medium'` → `<p>`).
+     * El atributo `as` sobrescribe esta inferencia para contextos semánticos personalizados
+     * (ej. usar `as="div"` cuando la tipografía está dentro de un `<dl>`).
+     *
+     * **¿Por qué `staticHtml` + `unsafeStatic`?**
+     * Lit 3 no permite expresiones dinámicas en posiciones de nombres de etiquetas
+     * (`<${tag}>` lanzaría un error de plantilla). `staticHtml` es un template tag
+     * provisto por Lit que sí permite la interpolación estática de etiquetas, y `unsafeStatic`
+     * envuelve el string para marcarlo como de confianza (sin riesgo XSS ya que `tag` proviene de
+     * un enum controlado vía `_tagFor()`).
+     *
+     * El string `cls` (`variant + size`) mapea directamente a clases de utilidad
+     * de tipografía (ej. `'display large'`).
+     */
     render() {
         const cls = `${this.variant} ${this.size}`;
         const tag = this.as ?? MoniTypography_1._tagFor(this.variant);
-        // Render the dynamic tag with `unsafeStatic` so we don't hit the
-        // "Bindings in tag names are not supported" error from lit 3.
+        // Renderiza la etiqueta dinámica con `unsafeStatic` para evitar el error
+        // "Bindings in tag names are not supported" de lit 3.
         const tagStatic = unsafeStatic(tag);
         return staticHtml `<${tagStatic}
 			class=${cls}

package/dist/styles/tokens.css

@@ -94,7 +94,7 @@
 	--radius-full: 9999px;
 
 	/* ─── Card radius (overridable per card via --moni-radius-card) ─── */
-	--radius-card: var(--moni-radius-card, var(--radius-md, 0.75rem));
+	--radius-card: var(--moni-radius-card, 1.5rem);
 
 	/* ─── List dividers (overridable per list via --moni-list-divider) ─── */
 	--moni-list-divider: var(--moni-list-divider-fallback, 0);
@@ -120,12 +120,12 @@
 	--duration-emphasized: 500ms;
 	--duration-long: 800ms;
 
-	/* ─── Elevación / sombras M3 ─── */
-	--shadow-1: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
-	--shadow-2: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
-	--shadow-3: 0px 1px 3px 0px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
-	--shadow-4: 0px 2px 3px 0px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
-	--shadow-5: 0px 4px 4px 0px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
+	/* ─── Elevación / sombras M3 & Minimalist ─── */
+	--shadow-1: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+	--shadow-2: 0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.02);
+	--shadow-3: 0 4px 8px -2px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.02);
+	--shadow-4: 0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -4px rgba(0, 0, 0, 0.02);
+	--shadow-5: 0 12px 24px -8px rgba(0, 0, 0, 0.05), 0 8px 16px -8px rgba(0, 0, 0, 0.03);
 
 	/* ─── Grain opacity ─── */
 	--moni-grain-opacity: var(--moni-grain-opacity, 0.03);

package/dist/types/events.d.ts

@@ -0,0 +1,17 @@
+export interface MoniEventDetail<T = unknown> {
+    value?: T;
+    /** Índice del elemento (para listas/colecciones) */
+    index?: number;
+    /** Elementos múltiples (para slots o selecciones múltiples) */
+    items?: any[];
+    /** Nodos del DOM asociados (para slots) */
+    nodes?: Node[];
+    /** Evento nativo original que disparó la acción */
+    originalEvent?: Event;
+    /** El elemento asociado al evento */
+    item?: T;
+    /** Referencia física al DOM node */
+    card?: HTMLElement | null;
+}
+export type MoniEvent<T = unknown> = CustomEvent<MoniEventDetail<T>>;
+//# sourceMappingURL=events.d.ts.map

package/dist/types/events.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/types/events.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe,CAAC,CAAC,GAAG,OAAO;IAC1C,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+DAA+D;IAC/D,KAAK,CAAC,EAAE,GAAG,EAAE,CAAC;IACd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,mDAAmD;IACnD,aAAa,CAAC,EAAE,KAAK,CAAC;IACtB,qCAAqC;IACrC,IAAI,CAAC,EAAE,CAAC,CAAC;IACT,oCAAoC;IACpC,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAC3B;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,GAAG,OAAO,IAAI,WAAW,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC"}

package/dist/types/events.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/event-emitter.d.ts

@@ -0,0 +1,13 @@
+import type { MoniEventDetail } from '../types/events';
+export interface EventEmitterOptions<T> {
+    detail?: MoniEventDetail<T>;
+    bubbles?: boolean;
+    composed?: boolean;
+    cancelable?: boolean;
+}
+/**
+ * Helper para emitir Custom Events estandarizados en la librería moni-ui.
+ * Asegura que los eventos crucen el Shadow DOM por defecto y unifican el `detail`.
+ */
+export declare function emitMoniEvent<T>(element: HTMLElement, eventName: string, options?: EventEmitterOptions<T>): boolean;
+//# sourceMappingURL=event-emitter.d.ts.map

package/dist/utils/event-emitter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"event-emitter.d.ts","sourceRoot":"","sources":["../../src/utils/event-emitter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD,MAAM,WAAW,mBAAmB,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,CAAC,EAC7B,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,GAC/B,OAAO,CAQT"}

package/dist/utils/event-emitter.js

@@ -0,0 +1,13 @@
+/**
+ * Helper para emitir Custom Events estandarizados en la librería moni-ui.
+ * Asegura que los eventos crucen el Shadow DOM por defecto y unifican el `detail`.
+ */
+export function emitMoniEvent(element, eventName, options) {
+    const event = new CustomEvent(eventName, {
+        bubbles: options?.bubbles ?? true,
+        composed: options?.composed ?? true,
+        cancelable: options?.cancelable ?? false,
+        detail: options?.detail ?? {},
+    });
+    return element.dispatchEvent(event);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moni-labs/moni-ui",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "private": false,
   "type": "module",
   "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",
@@ -17,6 +17,7 @@
       "import": "./dist/web-components.js"
     },
     "./styles": "./dist/styles/index.css",
+    "./styles/*": "./dist/styles/*",
     "./components/*.ts": "./src/components/*.ts",
     "./components/*": {
       "types": "./dist/components/*.d.ts",

package/src/components/_base/moni-element.ts

@@ -23,19 +23,25 @@ import { LitElement } from 'lit';
  * internal CSS class names (`.button`, `.field`, `.slider`, etc.) do not leak
  * into or collide with the consumer's global stylesheet.
  *
+ * **Global Events Architecture:**
+ * Provides base events to all components automatically:
+ * - \`moni-enter-viewport\` / \`moni-leave-viewport\` via IntersectionObserver
+ * - \`moni-resize\` via ResizeObserver
+ * - \`slot-click\` via delegated event listener on the host
+ *
  * **Extension contract:**
  * Every subclass must:
  *  1. Be decorated with `@customElement('moni-<name>')`.
- *  2. Define `static override styles = [sharedStyles, css`...`]`.
+ *  2. Define `static override styles = [sharedStyles, css\`...\`]`.
  *  3. Implement `override render(): TemplateResult`.
  *
- * Subclasses MUST NOT add behavior (event handling, timers, fetch calls) that
- * is not directly related to rendering the shadow DOM. See CONTRIBUTING.md
- * for the full component authoring guide.
- *
  * @see {@link https://lit.dev/docs/components/overview/ Lit component overview}
  */
 export class MoniElement extends LitElement {
+	private _globalIntersectionObserver?: IntersectionObserver;
+	private _globalResizeObserver?: ResizeObserver;
+	private _isBaseInViewport = false;
+
 	/**
 	 * Returns the component's render root.
 	 *
@@ -43,15 +49,73 @@ export class MoniElement extends LitElement {
 	 * shadow root (`{ mode: 'open' }`). Open mode allows external tools (browser
 	 * devtools, testing frameworks) to traverse the shadow tree.
 	 *
-	 * This override exists explicitly to document the shadow root mode and to
-	 * provide a hook for subclasses that may need to change the root in the future
-	 * (e.g. to support `adoptedStyleSheets` in a specific environment).
-	 *
 	 * @returns The shadow root that Lit will render templates into.
 	 */
 	protected override createRenderRoot() {
 		return super.createRenderRoot();
 	}
+
+	override connectedCallback() {
+		super.connectedCallback();
+		
+		// 1. Intersection Observer for all components (Visibility Events)
+		if (typeof IntersectionObserver !== 'undefined') {
+			this._globalIntersectionObserver = new IntersectionObserver((entries) => {
+				entries.forEach((entry) => {
+					if (entry.isIntersecting !== this._isBaseInViewport) {
+						this._isBaseInViewport = entry.isIntersecting;
+						this.dispatchEvent(new CustomEvent(
+							this._isBaseInViewport ? 'moni-enter-viewport' : 'moni-leave-viewport',
+							{ bubbles: true, composed: true, detail: { element: this } }
+						));
+					}
+				});
+			}, { threshold: [0, 1] });
+			this._globalIntersectionObserver.observe(this);
+		}
+
+		// 2. Resize Observer for all components (Layout Events)
+		if (typeof ResizeObserver !== 'undefined') {
+			this._globalResizeObserver = new ResizeObserver((entries) => {
+				entries.forEach((entry) => {
+					this.dispatchEvent(new CustomEvent('moni-resize', {
+						bubbles: true,
+						composed: true,
+						detail: { contentRect: entry.contentRect, element: this }
+					}));
+				});
+			});
+			this._globalResizeObserver.observe(this);
+		}
+
+		// 3. Global Slot Click Delegation
+		this.addEventListener('click', this._handleGlobalSlotClick);
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		// Rigorous memory leak prevention
+		this._globalIntersectionObserver?.disconnect();
+		this._globalResizeObserver?.disconnect();
+		this.removeEventListener('click', this._handleGlobalSlotClick);
+	}
+
+	/**
+	 * Manejador global para detectar clicks provenientes de cualquier slot de la librería
+	 */
+	private _handleGlobalSlotClick = (e: Event) => {
+		const path = e.composedPath();
+		const slotEl = path.find(node => node instanceof HTMLSlotElement) as HTMLSlotElement | undefined;
+		
+		if (slotEl) {
+			const slotName = slotEl.name || 'default';
+			this.dispatchEvent(new CustomEvent('slot-click', {
+				bubbles: true,
+				composed: true,
+				detail: { originalEvent: e, slotName, originalTarget: e.target }
+			}));
+		}
+	}
 }
 
 export default MoniElement;

package/src/components/index.ts

@@ -5,8 +5,8 @@
  * @contributors Moni Labs & Contributors
  */
 
-// Auto-register all Moni UI Web Components.
-// Importing this file defines every <moni-*> custom element.
+// Auto-registra todos los Web Components de Moni UI.
+// Importar este archivo define cada elemento personalizado <moni-*>.
 
 export { MoniBadge } from './moni-badge.js';
 export { MoniBottomSheet } from './moni-bottom-sheet.js';

package/src/components/loading-shapes.ts

@@ -5,6 +5,25 @@
  * @contributors Moni Labs & Contributors
  */
 
+/**
+ * Una colección de formas poligonales utilizadas para animaciones de indicadores de carga.
+ * 
+ * Cada forma se define mediante una serie de coordenadas basadas en porcentajes que crean
+ * trazados complejos (ej., '4-sided-cookie', 'oval', 'pentagon', 'pill', 'soft-burst', 'sunny').
+ * Estos polígonos se utilizan principalmente junto con `clip-path` de CSS y GSAP
+ * (o librerías de animación similares) para transformarse suavemente entre diferentes estados.
+ * 
+ * @example
+ * ```ts
+ * import { loadingIndicatorPolygons } from './loading-shapes';
+ * 
+ * const path = loadingIndicatorPolygons['soft-burst'];
+ * element.style.clipPath = `polygon(${path})`;
+ * ```
+ * 
+ * @constant
+ * @type {Record<string, string>}
+ */
 export const loadingIndicatorPolygons = {
 	'4-sided-cookie': '63.83% 2.22%, 65.10% 1.70%, 66.36% 1.26%, 67.62% 0.89%, 68.88% 0.58%, 70.14% 0.34%, 71.39% 0.16%, 72.63% 0.05%, 73.86% 0.00%, 75.08% 0.01%, 76.28% 0.08%, 77.48% 0.21%, 78.66% 0.40%, 79.82% 0.63%, 80.97% 0.93%, 82.09% 1.27%, 83.20% 1.67%, 84.28% 2.11%, 85.34% 2.60%, 86.37% 3.14%, 87.38% 3.72%, 88.36% 4.35%, 89.31% 5.02%, 90.23% 5.73%, 91.12% 6.48%, 91.98% 7.26%, 92.80% 8.09%, 93.58% 8.94%, 94.32% 9.83%, 95.03% 10.76%, 95.70% 11.71%, 96.32% 12.69%, 96.90% 13.70%, 97.43% 14.74%, 97.92% 15.80%, 98.36% 16.88%, 98.76% 17.99%, 99.10% 19.12%, 99.38% 20.26%, 99.62% 21.43%, 99.80% 22.61%, 99.92% 23.80%, 99.99% 25.01%, 100.00% 26.23%, 99.94% 27.47%, 99.83% 28.71%, 99.65% 29.95%, 99.40% 31.21%, 99.09% 32.47%, 98.71% 33.73%, 98.26% 35.00%, 97.75% 36.25%, 97.26% 37.36%, 96.78% 38.47%, 96.30% 39.59%, 95.83% 40.72%, 95.42% 41.87%, 95.06% 43.03%, 94.76% 44.21%, 94.52% 45.40%, 94.33% 46.59%, 94.20% 47.79%, 94.12% 48.99%, 94.11% 50.19%, 94.14% 51.40%, 94.24% 52.60%, 94.39% 53.80%, 94.59% 54.99%, 94.85% 56.17%, 95.17% 57.34%, 95.55% 58.50%, 95.98% 59.65%, 96.45% 60.77%, 96.94% 61.89%, 97.42% 63.00%, 97.92% 64.15%, 98.41% 65.41%, 98.84% 66.68%, 99.20% 67.94%, 99.49% 69.20%, 99.71% 70.45%, 99.87% 71.70%, 99.97% 72.93%, 100.00% 74.16%, 99.97% 75.38%, 99.89% 76.58%, 99.75% 77.78%, 99.55% 78.95%, 99.30% 80.11%, 98.99% 81.25%, 98.63% 82.37%, 98.23% 83.47%, 97.77% 84.55%, 97.27% 85.60%, 96.72% 86.63%, 96.12% 87.63%, 95.49% 88.60%, 94.81% 89.55%, 94.09% 90.46%, 93.33% 91.34%, 92.54% 92.19%, 91.70% 93.00%, 90.84% 93.77%, 89.94% 94.51%, 89.01% 95.20%, 88.05% 95.86%, 87.06% 96.47%, 86.04% 97.04%, 85.00% 97.56%, 83.93% 98.04%, 82.84% 98.47%, 81.73% 98.85%, 80.60% 99.17%, 79.45% 99.45%, 78.28% 99.67%, 77.09% 99.84%, 75.89% 99.95%, 74.68% 100.00%, 73.46% 99.99%, 72.23% 99.92%, 70.98% 99.79%, 69.73% 99.59%, 68.48% 99.33%, 67.22% 99.00%, 65.95% 98.60%, 64.69% 98.14%, 63.47% 97.63%, 62.36% 97.14%, 61.25% 96.66%, 60.13% 96.18%, 58.99% 95.72%, 57.84% 95.32%, 56.67% 94.98%, 55.49% 94.70%, 54.31% 94.47%, 53.11% 94.29%, 51.91% 94.18%, 50.71% 94.11%, 49.50% 94.11%, 48.30% 94.16%, 47.10% 94.27%, 45.90% 94.43%, 44.71% 94.65%, 43.53% 94.93%, 42.36% 95.26%, 41.21% 95.65%, 40.07% 96.09%, 38.95% 96.58%, 37.84% 97.06%, 36.72% 97.54%, 35.54% 98.05%, 34.27% 98.53%, 33.01% 98.94%, 31.74% 99.28%, 30.49% 99.55%, 29.24% 99.76%, 27.99% 99.90%, 26.76% 99.98%, 25.53% 100.00%, 24.32% 99.96%, 23.12% 99.86%, 21.93% 99.70%, 20.76% 99.49%, 19.60% 99.23%, 18.47% 98.91%, 17.35% 98.54%, 16.26% 98.12%, 15.19% 97.65%, 14.14% 97.13%, 13.12% 96.57%, 12.12% 95.97%, 11.16% 95.32%, 10.22% 94.63%, 9.32% 93.90%, 8.45% 93.14%, 7.61% 92.33%, 6.81% 91.49%, 6.04% 90.62%, 5.32% 89.71%, 4.63% 88.77%, 3.99% 87.80%, 3.38% 86.81%, 2.83% 85.78%, 2.31% 84.74%, 1.85% 83.66%, 1.43% 82.57%, 1.07% 81.45%, 0.75% 80.31%, 0.49% 79.16%, 0.28% 77.98%, 0.13% 76.80%, 0.04% 75.59%, 0.00% 74.38%, 0.02% 73.15%, 0.11% 71.92%, 0.26% 70.67%, 0.47% 69.42%, 0.75% 68.16%, 1.09% 66.90%, 1.51% 65.64%, 1.99% 64.37%, 2.49% 63.19%, 2.98% 62.08%, 3.46% 60.97%, 3.94% 59.85%, 4.38% 58.71%, 4.77% 57.55%, 5.09% 56.38%, 5.37% 55.20%, 5.58% 54.01%, 5.74% 52.81%, 5.84% 51.61%, 5.89% 50.41%, 5.88% 49.20%, 5.82% 48.00%, 5.70% 46.80%, 5.52% 45.61%, 5.28% 44.42%, 4.99% 43.24%, 4.65% 42.07%, 4.25% 40.92%, 3.79% 39.78%, 3.30% 38.67%, 2.82% 37.56%, 2.34% 36.45%, 1.82% 35.22%, 1.36% 33.95%, 0.97% 32.69%, 0.65% 31.43%, 0.39% 30.18%, 0.20% 28.93%, 0.07% 27.68%, 0.01% 26.45%, 0.01% 25.23%, 0.06% 24.02%, 0.17% 22.82%, 0.34% 21.64%, 0.57% 20.47%, 0.85% 19.32%, 1.18% 18.19%, 1.56% 17.08%, 2.00% 15.99%, 2.48% 14.92%, 3.00% 13.88%, 3.57% 12.87%, 4.19% 11.88%, 4.85% 10.92%, 5.55% 9.99%, 6.29% 9.10%, 7.06% 8.23%, 7.88% 7.41%, 8.72% 6.61%, 9.61% 5.86%, 10.52% 5.14%, 11.47% 4.47%, 12.44% 3.83%, 13.45% 3.24%, 14.48% 2.69%, 15.53% 2.19%, 16.61% 1.74%, 17.71% 1.34%, 18.83% 0.98%, 19.98% 0.68%, 21.14% 0.43%, 22.31% 0.24%, 23.50% 0.10%, 24.71% 0.02%, 25.93% 0.00%, 27.16% 0.04%, 28.39% 0.14%, 29.64% 0.30%, 30.89% 0.53%, 32.15% 0.83%, 33.41% 1.19%, 34.68% 1.62%, 35.94% 2.12%, 37.08% 2.61%, 38.20% 3.10%, 39.31% 3.58%, 40.43% 4.06%, 41.58% 4.48%, 42.74% 4.85%, 43.91% 5.17%, 45.10% 5.43%, 46.29% 5.63%, 47.49% 5.77%, 48.69% 5.86%, 49.89% 5.90%, 51.10% 5.87%, 52.30% 5.79%, 53.50% 5.66%, 54.69% 5.47%, 55.88% 5.22%, 57.05% 4.91%, 58.21% 4.55%, 59.36% 4.14%, 60.49% 3.67%, 61.61% 3.18%, 62.72% 2.70%, 63.83% 2.22%',
 	'9-sided-cookie': '61.39% 5.18%, 62.25% 5.81%, 63.15% 6.37%, 64.08% 6.88%, 65.04% 7.33%, 66.03% 7.71%, 67.04% 8.02%, 68.07% 8.27%, 69.11% 8.45%, 70.17% 8.57%, 71.18% 8.61%, 72.43% 8.63%, 73.38% 8.68%, 74.46% 8.80%, 75.52% 9.00%, 76.56% 9.26%, 77.57% 9.59%, 78.55% 9.98%, 79.50% 10.44%, 80.42% 10.95%, 81.30% 11.52%, 82.14% 12.14%, 82.93% 12.81%, 83.69% 13.54%, 84.39% 14.31%, 85.05% 15.13%, 85.65% 15.99%, 86.20% 16.89%, 86.69% 17.84%, 87.12% 18.81%, 87.49% 19.83%, 87.79% 20.87%, 87.99% 21.78%, 88.22% 23.01%, 88.46% 24.01%, 88.76% 25.02%, 89.14% 26.02%, 89.57% 26.98%, 90.07% 27.91%, 90.63% 28.81%, 91.24% 29.67%, 91.91% 30.49%, 92.64% 31.27%, 93.40% 31.98%, 94.34% 32.79%, 95.02% 33.41%, 95.78% 34.19%, 96.48% 35.02%, 97.12% 35.88%, 97.70% 36.77%, 98.21% 37.69%, 98.66% 38.65%, 99.05% 39.62%, 99.37% 40.62%, 99.63% 41.63%, 99.82% 42.66%, 99.94% 43.70%, 100.00% 44.74%, 99.99% 45.79%, 99.91% 46.84%, 99.76% 47.88%, 99.54% 48.92%, 99.26% 49.95%, 98.90% 50.97%, 98.47% 51.97%, 98.04% 52.81%, 97.43% 53.91%, 96.96% 54.80%, 96.53% 55.77%, 96.16% 56.77%, 95.86% 57.78%, 95.63% 58.81%, 95.46% 59.86%, 95.36% 60.91%, 95.34% 61.97%, 95.38% 63.03%, 95.49% 64.09%, 95.68% 65.27%, 95.82% 66.19%, 95.91% 67.28%, 95.93% 68.36%, 95.88% 69.43%, 95.76% 70.49%, 95.57% 71.53%, 95.32% 72.55%, 95.00% 73.55%, 94.61% 74.53%, 94.17% 75.47%, 93.66% 76.39%, 93.10% 77.27%, 92.48% 78.11%, 91.81% 78.92%, 91.09% 79.68%, 90.31% 80.39%, 89.48% 81.06%, 88.61% 81.68%, 87.69% 82.23%, 86.73% 82.74%, 85.81% 83.14%, 84.74% 83.55%, 83.75% 83.94%, 82.78% 84.40%, 81.85% 84.91%, 80.96% 85.49%, 80.11% 86.11%, 79.30% 86.80%, 78.54% 87.53%, 77.83% 88.31%, 77.17% 89.14%, 76.56% 90.02%, 75.97% 90.98%, 75.43% 91.87%, 74.84% 92.73%, 74.17% 93.59%, 73.45% 94.38%, 72.69% 95.13%, 71.89% 95.82%, 71.04% 96.45%, 70.16% 97.02%, 69.25% 97.53%, 68.30% 97.99%, 67.34% 98.38%, 66.34% 98.71%, 65.33% 98.97%, 64.30% 99.17%, 63.26% 99.30%, 62.21% 99.37%, 61.15% 99.37%, 60.08% 99.29%, 59.02% 99.15%, 57.96% 98.93%, 56.92% 98.65%, 55.99% 98.34%, 54.89% 97.96%, 53.86% 97.67%, 52.82% 97.46%, 51.77% 97.31%, 50.72% 97.23%, 49.66% 97.21%, 48.61% 97.27%, 47.55% 97.39%, 46.51% 97.59%, 45.48% 97.85%, 44.51% 98.16%, 43.35% 98.56%, 42.42% 98.84%, 41.36% 99.08%, 40.30% 99.25%, 39.24% 99.35%, 38.18% 99.38%, 37.12% 99.34%, 36.07% 99.23%, 35.04% 99.05%, 34.02% 98.81%, 33.02% 98.50%, 32.04% 98.13%, 31.09% 97.70%, 30.17% 97.21%, 29.27% 96.66%, 28.42% 96.05%, 27.60% 95.38%, 26.82% 94.66%, 26.08% 93.88%, 25.40% 93.04%, 24.76% 92.16%, 24.27% 91.38%, 23.64% 90.33%, 23.06% 89.45%, 22.42% 88.60%, 21.72% 87.80%, 20.98% 87.05%, 20.19% 86.35%, 19.35% 85.70%, 18.47% 85.11%, 17.56% 84.58%, 16.60% 84.10%, 15.67% 83.70%, 14.49% 83.26%, 13.63% 82.90%, 12.65% 82.42%, 11.72% 81.88%, 10.83% 81.29%, 9.98% 80.64%, 9.19% 79.94%, 8.45% 79.20%, 7.75% 78.41%, 7.12% 77.58%, 6.53% 76.71%, 6.01% 75.81%, 5.54% 74.87%, 5.14% 73.91%, 4.80% 72.92%, 4.52% 71.90%, 4.30% 70.87%, 4.16% 69.82%, 4.08% 68.75%, 4.08% 67.67%, 4.15% 66.59%, 4.26% 65.66%, 4.47% 64.41%, 4.59% 63.41%, 4.66% 62.35%, 4.66% 61.29%, 4.59% 60.23%, 4.44% 59.18%, 4.24% 58.15%, 3.96% 57.13%, 3.62% 56.12%, 3.21% 55.14%, 2.73% 54.19%, 2.14% 53.14%, 1.71% 52.32%, 1.25% 51.33%, 0.87% 50.32%, 0.55% 49.29%, 0.31% 48.25%, 0.14% 47.21%, 0.04% 46.16%, 0.00% 45.11%, 0.03% 44.07%, 0.13% 43.03%, 0.30% 42.00%, 0.53% 40.98%, 0.83% 39.98%, 1.19% 38.99%, 1.62% 38.03%, 2.11% 37.10%, 2.67% 36.19%, 3.28% 35.32%, 3.96% 34.48%, 4.70% 33.69%, 5.41% 33.02%, 6.33% 32.22%, 7.09% 31.54%, 7.84% 30.78%, 8.53% 29.97%, 9.16% 29.12%, 9.74% 28.24%, 10.26% 27.32%, 10.72% 26.37%, 11.11% 25.38%, 11.45% 24.37%, 11.71% 23.34%, 11.94% 22.20%, 12.13% 21.24%, 12.40% 20.20%, 12.75% 19.17%, 13.15% 18.18%, 13.62% 17.23%, 14.15% 16.31%, 14.73% 15.43%, 15.37% 14.60%, 16.06% 13.81%, 16.80% 13.07%, 17.58% 12.37%, 18.40% 11.73%, 19.27% 11.14%, 20.17% 10.61%, 21.11% 10.14%, 22.08% 9.72%, 23.08% 9.37%, 24.11% 9.09%, 25.16% 8.87%, 26.24% 8.72%, 27.27% 8.64%, 28.33% 8.62%, 29.45% 8.59%, 30.51% 8.50%, 31.56% 8.34%, 32.60% 8.12%, 33.62% 7.83%, 34.61% 7.47%, 35.58% 7.05%, 36.52% 6.56%, 37.43% 6.02%, 38.31% 5.41%, 39.15% 4.75%, 39.15% 4.75%, 40.04% 4.03%, 40.85% 3.44%, 41.76% 2.86%, 42.71% 2.35%, 43.68% 1.90%, 44.67% 1.52%, 45.68% 1.21%, 46.70% 0.96%, 47.73% 0.78%, 48.77% 0.67%, 49.81% 0.62%, 50.86% 0.65%, 51.90% 0.73%, 52.94% 0.89%, 53.96% 1.11%, 54.98% 1.40%, 55.97% 1.76%, 56.95% 2.18%, 57.90% 2.67%, 58.83% 3.23%, 59.73% 3.85%, 60.46% 4.43%',

package/src/components/moni-app-bar.test.ts

@@ -14,14 +14,14 @@ describe('moni-app-bar (P4.5 — recreated)', () => {
 		el.remove();
 	});
 
-	it('defaults to placement=top, variant=standard, size=default', async () => {
+	it('por defecto es placement=top, variant=standard, size=default', async () => {
 		await el.updateComplete;
 		expect(el.placement).toBe('top');
 		expect(el.variant).toBe('standard');
 		expect(el.size).toBe('default');
 	});
 
-	it('reflects the title attribute', async () => {
+	it('refleja el atributo title', async () => {
 		el.title = 'My App';
 		await el.updateComplete;
 		expect(el.title).toBe('My App');
@@ -29,10 +29,10 @@ describe('moni-app-bar (P4.5 — recreated)', () => {
 		expect(title?.textContent?.trim()).toBe('My App');
 	});
 
-	it('reflects the subtitle (visible only with size=prominent)', async () => {
+	it('refleja el subtitle (visible solo con size=prominent)', async () => {
 		el.subtitle = 'Subtitle here';
 		await el.updateComplete;
-		// Without prominent size, subtitle is hidden.
+		// Sin el tamaño prominent, el subtítulo está oculto.
 		let subtitle = el.shadowRoot?.querySelector('[part="subtitle"]');
 		expect(subtitle).toBeFalsy();
 
@@ -42,25 +42,25 @@ describe('moni-app-bar (P4.5 — recreated)', () => {
 		expect(subtitle?.textContent?.trim()).toBe('Subtitle here');
 	});
 
-	it('switches between top and bottom placement', async () => {
+	it('cambia entre la ubicación top y bottom', async () => {
 		el.placement = 'bottom';
 		await el.updateComplete;
 		expect(el.getAttribute('placement')).toBe('bottom');
 	});
 
-	it('switches between standard and floating variant', async () => {
+	it('cambia entre la variante standard y floating', async () => {
 		el.variant = 'floating';
 		await el.updateComplete;
 		expect(el.getAttribute('variant')).toBe('floating');
 	});
 
-	it('reflects elevated attribute (used when content scrolls under it)', async () => {
+	it('refleja el atributo elevated (usado cuando el contenido se desplaza debajo)', async () => {
 		el.elevated = true;
 		await el.updateComplete;
 		expect(el.hasAttribute('elevated')).toBe(true);
 	});
 
-	it('renders leading, trailing, fab, and actions slots', async () => {
+	it('renderiza los slots leading, trailing, fab y actions', async () => {
 		await el.updateComplete;
 		const leadingSlot = el.shadowRoot?.querySelector(
 			'slot[name="leading"]'
@@ -76,11 +76,11 @@ describe('moni-app-bar (P4.5 — recreated)', () => {
 		expect(fabSlot).toBeTruthy();
 	});
 
-	it('renders a default slot for extra content (e.g. tabs)', async () => {
+	it('renderiza un slot por defecto para contenido extra (ej. tabs)', async () => {
 		await el.updateComplete;
 		const defaultSlot = el.shadowRoot?.querySelector(
 			'slot:not([name])'
 		) as HTMLSlotElement | null;
-		expect(defaultSlot).toBeFalsy(); // No default slot currently
+		expect(defaultSlot).toBeFalsy(); // Actualmente no hay slot por defecto
 	});
 });