@moni-labs/moni-ui 0.4.4 → 0.4.6

package/docs/components/tooltip.md

@@ -0,0 +1,184 @@
+# Tooltip
+
+Componente Material Design 3 Tooltip (Información sobre herramientas).
+
+Los tooltips proporcionan etiquetas de texto contextual o contenido enriquecido que aparecen cuando
+los usuarios pasan el cursor por encima, enfocan o tocan un elemento. Muestran información
+complementaria que ayuda a los usuarios a entender los elementos de la interfaz sin
+ocupar permanentemente espacio en la pantalla.
+
+**Referencia a la especificación M3:** `m3-docs/components/tooltips/specs.md`
+
+**Tipos:**
+- **Plain** (por defecto) — Etiqueta solo de texto para descripciones simples (máx. 1 línea).
+- **Rich** (atributo `rich`) — Contenido HTML que incluye texto formateado,
+  enlaces e iconos. Los tooltips enriquecidos pueden contener múltiples líneas y enlaces de acción.
+
+**Ubicaciones (Placements):**
+- `top` (por defecto), `top-start`, `top-end`
+- `bottom`, `bottom-start`, `bottom-end`
+
+**Mecanismo de activación (Trigger):**
+El tooltip usa `position: absolute` dentro del elemento padre. El padre
+debe tener `position: relative` (establecido automáticamente vía `connectedCallback`).
+Los eventos hover/focus en el padre activan los selectores CSS `:hover` y
+`:focus-within` del tooltip, los cuales impulsan la transición de mostrar/ocultar.
+
+**Accesibilidad:**
+- El tooltip tiene `role="tooltip"`.
+- Para accesibilidad por teclado, el padre debe tener `aria-describedby`
+  apuntando al atributo `id` del tooltip. El componente expone un
+  getter `tooltipId` para este propósito.
+- La tecla `Escape` cierra los tooltips enriquecidos.
+
+- Tag: `moni-tooltip`
+- Clase: `MoniTooltip`
+- Fuente: `src/components/moni-tooltip.ts`
+
+## Cuándo usarlo
+
+Usa `moni-tooltip` cuando la interfaz necesite el patrón que describe este componente. Antes de elegirlo, revisa sus estados, contenido permitido y comportamiento accesible; las capturas del final muestran el resultado real de cada variante.
+
+## Uso básico
+
+```html
+<!-- Tooltip simple (Plain) -->
+<button aria-describedby="save-tip">
+  Guardar
+  <moni-tooltip id="save-tip" text="Ctrl+S"></moni-tooltip>
+</button>
+
+<!-- Tooltip enriquecido (Rich) -->
+<button>
+  Filtrar
+  <moni-tooltip rich position="bottom">
+    <strong>Filtrar por fecha</strong>
+    <p>Selecciona un rango de fechas para filtrar resultados.</p>
+  </moni-tooltip>
+</button>
+```
+
+## Ejemplo práctico con Tailwind CSS v4
+
+Tailwind controla composición, ancho, espaciado y responsividad alrededor del Web Component. Moni UI conserva el aspecto interno mediante Shadow DOM y design tokens.
+
+```html
+<div class="mx-auto flex w-full max-w-md flex-col gap-4 p-6">
+  <moni-tooltip><moni-button icon="info" aria-label="Más información"></moni-button></moni-tooltip>
+</div>
+```
+
+No necesitas un plugin de Tailwind. En tu CSS v4 importa ambas capas una sola vez:
+
+```css
+@import "tailwindcss";
+@import "@moni-labs/moni-ui/styles";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses selectores Tailwind para asumir acceso al DOM interno; personaliza únicamente con los CSS Parts y Custom Properties públicos enumerados más abajo.
+
+## Recomendaciones
+
+- Usa `moni-tooltip` para su propósito semántico; no lo sustituyas por un `div` estilizado.
+- Aplica Tailwind al layout exterior. Para el interior del Shadow DOM usa las variables CSS y `::part()` documentados.
+- Prueba los estados claro, oscuro, foco por teclado, deshabilitado y viewport móvil antes de publicar.
+
+## Propiedades y atributos
+
+| Atributo | Propiedad | Tipo | Default | Descripción |
+|---|---|---|---|---|
+| `text` | `text` | `string` | `''` | Contenido de texto simple para mostrar. Utilizado cuando `rich` es falso. |
+| `position` | `position` | `'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'right'` | `'top'` | Ubicación preferida relativa al ancla/activador. |
+| `rotate-with-target` | `rotateWithTarget` | `boolean` | `false` | Si está activo, el tooltip conserva el ángulo visual del trigger. |
+| `size` | `size` | `'' \| 'small' \| 'medium' \| 'large'` | `''` | Mapeo de tamaño opcional (usado por hojas de estilo internas para escalar fuente/relleno). |
+| `rich` | `rich` | `boolean` | `false` | Si es true, cambia al modo de Tooltip Enriquecido (permite HTML/componentes en el slot por defecto). |
+
+## Slots
+
+- `default`: Contenido enriquecido para el cuerpo del tooltip (solo usado cuando `rich=true`).
+
+## Eventos
+
+No declara eventos propios.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+- `tooltip`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--_anchor-name`
+- `--_space`
+- `--_tooltip-origin-x`
+- `--_tooltip-origin-y`
+- `--_tooltip-target-rotation`
+- `--font`
+- `--inverse-on-surface`
+- `--inverse-surface`
+- `--speed2`
+
+## Referencia visual por variable
+
+Cada imagen se genera con el componente real: cambia solo la variable indicada y mantiene estable el resto del escenario. Úsala para comparar estados, no como sustituto de la API.
+
+### `text`
+
+Contenido de texto simple para mostrar. Utilizado cuando `rich` es falso.
+
+![moni-tooltip — text=default](../assets/moni-tooltip/text--default.png)
+
+### `position`
+
+Ubicación preferida relativa al ancla/activador.
+
+![moni-tooltip — position=top](../assets/moni-tooltip/position--top.png)
+
+![moni-tooltip — position=top-start](../assets/moni-tooltip/position--top-start.png)
+
+![moni-tooltip — position=top-end](../assets/moni-tooltip/position--top-end.png)
+
+![moni-tooltip — position=bottom](../assets/moni-tooltip/position--bottom.png)
+
+![moni-tooltip — position=bottom-start](../assets/moni-tooltip/position--bottom-start.png)
+
+![moni-tooltip — position=bottom-end](../assets/moni-tooltip/position--bottom-end.png)
+
+![moni-tooltip — position=left](../assets/moni-tooltip/position--left.png)
+
+![moni-tooltip — position=right](../assets/moni-tooltip/position--right.png)
+
+### `rotate-with-target`
+
+Si está activo, el tooltip conserva el ángulo visual del trigger.
+
+![moni-tooltip — rotate-with-target=false](../assets/moni-tooltip/rotateWithTarget--false.png)
+
+![moni-tooltip — rotate-with-target=true](../assets/moni-tooltip/rotateWithTarget--true.png)
+
+### `size`
+
+Mapeo de tamaño opcional (usado por hojas de estilo internas para escalar fuente/relleno).
+
+![moni-tooltip — size=](../assets/moni-tooltip/size--empty.png)
+
+![moni-tooltip — size=small](../assets/moni-tooltip/size--small.png)
+
+![moni-tooltip — size=medium](../assets/moni-tooltip/size--medium.png)
+
+![moni-tooltip — size=large](../assets/moni-tooltip/size--large.png)
+
+### `rich`
+
+Si es true, cambia al modo de Tooltip Enriquecido (permite HTML/componentes en el slot por defecto).
+
+![moni-tooltip — rich=false](../assets/moni-tooltip/rich--false.png)
+
+![moni-tooltip — rich=true](../assets/moni-tooltip/rich--true.png)

package/docs/components/typography.md

@@ -0,0 +1,148 @@
+# Typography
+
+Componente Material Design 3 Typography (Tipografía).
+
+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.
+
+**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).
+
+Cada categoría soporta tres tamaños: `large`, `medium` y `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).
+
+- Tag: `moni-typography`
+- Clase: `MoniTypography`
+- Fuente: `src/components/moni-typography.ts`
+
+## Cuándo usarlo
+
+Usa `moni-typography` cuando la interfaz necesite el patrón que describe este componente. Antes de elegirlo, revisa sus estados, contenido permitido y comportamiento accesible; las capturas del final muestran el resultado real de cada variante.
+
+## Uso básico
+
+```html
+<!-- Renderiza un <h1> con estilos display-large -->
+<moni-typography variant="display" size="large">Texto Héroe</moni-typography>
+
+<!-- Renderiza un <p> con estilos body-medium -->
+<moni-typography variant="body">Texto de párrafo estándar.</moni-typography>
+
+<!-- Sobrescribiendo la etiqueta semántica -->
+<moni-typography variant="title" as="span">Título en línea</moni-typography>
+```
+
+## Ejemplo práctico con Tailwind CSS v4
+
+Tailwind controla composición, ancho, espaciado y responsividad alrededor del Web Component. Moni UI conserva el aspecto interno mediante Shadow DOM y design tokens.
+
+```html
+<div class="mx-auto flex w-full max-w-md flex-col gap-4 p-6">
+  <moni-typography></moni-typography>
+</div>
+```
+
+No necesitas un plugin de Tailwind. En tu CSS v4 importa ambas capas una sola vez:
+
+```css
+@import "tailwindcss";
+@import "@moni-labs/moni-ui/styles";
+
+@theme {
+  --font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Las utilities aplicadas directamente al tag afectan su caja anfitriona. No uses selectores Tailwind para asumir acceso al DOM interno; personaliza únicamente con los CSS Parts y Custom Properties públicos enumerados más abajo.
+
+## Recomendaciones
+
+- Usa `moni-typography` para su propósito semántico; no lo sustituyas por un `div` estilizado.
+- Aplica Tailwind al layout exterior. Para el interior del Shadow DOM usa las variables CSS y `::part()` documentados.
+- Prueba los estados claro, oscuro, foco por teclado, deshabilitado y viewport móvil antes de publicar.
+
+## Propiedades y atributos
+
+| Atributo | Propiedad | Tipo | Default | Descripción |
+|---|---|---|---|---|
+| `variant` | `variant` | `'display' \| 'headline' \| 'title' \| 'body' \| 'label'` | `'body'` | 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. |
+| `size` | `size` | `'large' \| 'medium' \| 'small'` | `'medium'` | El tamaño dentro de la categoría de variante elegida. |
+| `as` | `as` | `string \| null` | `null` | Sobrescribe la etiqueta semántica HTML por defecto (ej. 'h1', 'p', 'span')  que se asigna automáticamente basándose en la variante (`variant`). |
+| `text` | `text` | `string` | `''` | Contenido de texto simple opcional. Típicamente usarías el slot por defecto en su lugar. |
+
+## Slots
+
+- `default`: El contenido de texto a mostrar.
+
+## Eventos
+
+No declara eventos propios.
+
+## Métodos públicos
+
+No expone métodos públicos adicionales.
+
+## CSS Parts
+
+- `text`: Parte interna personalizable.
+
+## CSS Custom Properties consumidas
+
+- `--font`
+
+## Referencia visual por variable
+
+Cada imagen se genera con el componente real: cambia solo la variable indicada y mantiene estable el resto del escenario. Úsala para comparar estados, no como sustituto de la API.
+
+### `variant`
+
+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.
+
+![moni-typography — variant=display](../assets/moni-typography/variant--display.png)
+
+![moni-typography — variant=headline](../assets/moni-typography/variant--headline.png)
+
+![moni-typography — variant=title](../assets/moni-typography/variant--title.png)
+
+![moni-typography — variant=body](../assets/moni-typography/variant--body.png)
+
+![moni-typography — variant=label](../assets/moni-typography/variant--label.png)
+
+### `size`
+
+El tamaño dentro de la categoría de variante elegida.
+
+![moni-typography — size=large](../assets/moni-typography/size--large.png)
+
+![moni-typography — size=medium](../assets/moni-typography/size--medium.png)
+
+![moni-typography — size=small](../assets/moni-typography/size--small.png)
+
+### `as`
+
+Sobrescribe la etiqueta semántica HTML por defecto (ej. 'h1', 'p', 'span') 
+que se asigna automáticamente basándose en la variante (`variant`).
+
+![moni-typography — as=default](../assets/moni-typography/as--default.png)
+
+### `text`
+
+Contenido de texto simple opcional. Típicamente usarías el slot por defecto en su lugar.
+
+![moni-typography — text=default](../assets/moni-typography/text--default.png)

package/docs/llms.txt

@@ -0,0 +1,53 @@
+# @moni-labs/moni-ui — índice para LLM
+
+Biblioteca de 49 Web Components Material Design 3 Expressive. Importa `@moni-labs/moni-ui` y `@moni-labs/moni-ui/styles`. Consulta una ficha antes de generar markup.
+
+- moni-app-bar: docs/components/app-bar.md — Componente Material Design 3 App Bar.
+- moni-badge: docs/components/badge.md — Componente Material Design 3 Badge.
+- moni-bottom-sheet: docs/components/bottom-sheet.md — Componente Material Design 3 Bottom Sheet.
+- moni-button: docs/components/button.md — Componente Material Design 3 Button.
+- moni-button-group: docs/components/button-group.md — Componente Material Design 3 Button Group.
+- moni-button-segment: docs/components/button-segment.md — Componente Material Design 3 Segmented Button (Heredado).
+- moni-card: docs/components/card.md — Componente Material Design 3 Card.
+- moni-carousel: docs/components/carousel.md — Componente Material Design 3 Expressive Carousel.
+- moni-checkbox: docs/components/checkbox.md — Componente Material Design 3 Checkbox.
+- moni-chip: docs/components/chip.md — Componente Material Design 3 Chip.
+- moni-color-field: docs/components/color-field.md — Componente Material Design 3 Color Field (Campo de Color).
+- moni-context-menu: docs/components/context-menu.md — Componente Material Design 3 Context Menu (Menú Contextual).
+- moni-dialog: docs/components/dialog.md — Componente Material Design 3 Dialog (Diálogo).
+- moni-divider: docs/components/divider.md — Componente Material Design 3 Divider (Separador).
+- moni-expansion: docs/components/expansion.md — Componente Material Design 3 Expansion panel (Panel de expansión).
+- moni-fab: docs/components/fab.md — Material 3 Expressive floating action button.
+- moni-fab-menu: docs/components/fab-menu.md — Accessible Material 3 Expressive FAB menu / speed dial.
+- moni-file-field: docs/components/file-field.md — Componente Material Design 3 File Field (Campo de Archivo).
+- moni-icon: docs/components/icon.md — Componente de icono solo visual que utiliza la fuente variable Material Symbols.
+- moni-list: docs/components/list.md — Componente Material Design 3 List (Lista).
+- moni-list-item: docs/components/list-item.md — Componente Material Design 3 List Item (Elemento de Lista).
+- moni-loading-indicator: docs/components/loading-indicator.md — Componente Material Design 3 Loading Indicator (Indicador de carga).
+- moni-menu: docs/components/menu.md — Componente Material Design 3 Menu (Menú).
+- moni-menu-item: docs/components/menu-item.md — Componente Material Design 3 Menu Item (Elemento de Menú).
+- moni-morph-modal: docs/components/morph-modal.md — Componente moni-morph-modal de Moni UI.
+- moni-nav: docs/components/nav.md — Componente contenedor de Navegación Material Design 3.
+- moni-nav-item: docs/components/nav-item.md — Componente Material Design 3 Navigation Item (Elemento de Navegación).
+- moni-progress: docs/components/progress.md — Material 3 Expressive progress indicator.
+- moni-radio: docs/components/radio.md — Componente Material Design 3 Radio Button (Botón de Opción).
+- moni-ripple: docs/components/ripple.md — Componente de decoración de onda (ripple) puramente visual.
+- moni-segmented-button: docs/components/segmented-button.md — Componente Material Design 3 Segmented Button (Botón Segmentado) (Heredado).
+- moni-select: docs/components/select.md — Componente Material Design 3 Select (Menú Desplegable).
+- moni-select-option: docs/components/select-option.md — Componente Material Design 3 Select Option (Opción de Selección).
+- moni-shape: docs/components/shape.md — Material 3 Expressive shape with built-in polygon morphing.
+- moni-side-sheet: docs/components/side-sheet.md — Componente Material Design 3 Side Sheet (Hoja o panel lateral).
+- moni-slider: docs/components/slider.md — Componente Material Design 3 Slider (Control deslizante).
+- moni-snackbar: docs/components/snackbar.md — Componente Material Design 3 Snackbar (Barra de notificaciones).
+- moni-split-button: docs/components/split-button.md — Componente Material Design 3 Split Button (Botón dividido).
+- moni-step: docs/components/step.md — Componente Material Design 3 Step (Paso).
+- moni-stepper: docs/components/stepper.md — Componente Material Design 3 Stepper (Pasos/Progresión).
+- moni-switch: docs/components/switch.md — Componente Material Design 3 Switch (Interruptor).
+- moni-tab: docs/components/tab.md — Componente Material Design 3 Tab (Pestaña).
+- moni-tabs: docs/components/tabs.md — Componente Material Design 3 Tabs container (Contenedor de pestañas).
+- moni-text-field: docs/components/text-field.md — Componente Material Design 3 Text Field (Campo de texto).
+- moni-textarea: docs/components/textarea.md — Componente Material Design 3 Textarea (Área de texto).
+- moni-time-picker: docs/components/time-picker.md — Componente Material Design 3 Time Picker (Selector de hora).
+- moni-toolbar: docs/components/toolbar.md — Componente Material Design 3 Top App Bar (Barra de herramientas superior).
+- moni-tooltip: docs/components/tooltip.md — Componente Material Design 3 Tooltip (Información sobre herramientas).
+- moni-typography: docs/components/typography.md — Componente Material Design 3 Typography (Tipografía).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moni-labs/moni-ui",
-  "version": "0.4.4",
+  "version": "0.4.6",
   "private": false,
   "type": "module",
   "description": "Design system unificado para Moni — Material Design 3 Expressive, mobile-first.",
@@ -44,6 +44,7 @@
   "files": [
     "dist",
     "src",
+    "docs",
     "custom-elements.json",
     "README.md",
     "package.json"
@@ -77,6 +78,10 @@
   },
   "scripts": {
     "build": "node scripts/build.js",
+    "docs": "node scripts/generate-docs.mjs",
+    "docs:capture": "node scripts/capture-docs.mjs",
+    "docs:all": "npm run build && npm run docs && npm run docs:capture",
+    "docs:check": "node scripts/generate-docs.mjs --check",
     "analyze": "custom-elements-manifest analyze",
     "test": "vitest run",
     "test:verbose": "vitest run --reporter=verbose",

package/src/components/index.test.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import './index.js';
+
+const publicElements = [
+	'moni-app-bar', 'moni-badge', 'moni-bottom-sheet', 'moni-button',
+	'moni-button-group', 'moni-button-segment', 'moni-card', 'moni-carousel',
+	'moni-checkbox', 'moni-chip', 'moni-color-field', 'moni-context-menu',
+	'moni-dialog', 'moni-divider', 'moni-expansion', 'moni-fab', 'moni-fab-menu',
+	'moni-file-field', 'moni-icon', 'moni-list', 'moni-list-item',
+	'moni-loading-indicator', 'moni-menu', 'moni-menu-item', 'moni-morph-modal',
+	'moni-nav', 'moni-nav-item', 'moni-progress', 'moni-radio', 'moni-ripple',
+	'moni-segmented-button', 'moni-select', 'moni-select-option', 'moni-shape',
+	'moni-side-sheet', 'moni-slider', 'moni-snackbar', 'moni-split-button',
+	'moni-step', 'moni-stepper', 'moni-switch', 'moni-tab', 'moni-tabs',
+	'moni-text-field', 'moni-textarea', 'moni-time-picker', 'moni-toolbar',
+	'moni-tooltip', 'moni-typography'
+] as const;
+
+describe('full component entry', () => {
+	it('registers every documented public custom element', () => {
+		expect(publicElements).toHaveLength(49);
+		for (const tag of publicElements) expect(customElements.get(tag), tag).toBeDefined();
+	});
+});

package/src/components/index.ts

@@ -8,18 +8,24 @@
 // Auto-registra todos los Web Components de Moni UI.
 // Importar este archivo define cada elemento personalizado <moni-*>.
 
+export { MoniAppBar } from './moni-app-bar.js';
 export { MoniBadge } from './moni-badge.js';
 export { MoniBottomSheet } from './moni-bottom-sheet.js';
 export { MoniButton } from './moni-button.js';
+export { MoniCard } from './moni-card.js';
 export { MoniCheckbox } from './moni-checkbox.js';
 export { MoniChip } from './moni-chip.js';
 export { MoniColorField } from './moni-color-field.js';
 export { MoniContextMenu } from './moni-context-menu.js';
 export { MoniDialog } from './moni-dialog.js';
+export { MoniDivider } from './moni-divider.js';
 export { MoniExpansion } from './moni-expansion.js';
 export { MoniFab } from './moni-fab.js';
 export { MoniFabMenu } from './moni-fab-menu.js';
 export { MoniFileField } from './moni-file-field.js';
+export { MoniIcon } from './moni-icon.js';
+export { MoniList } from './moni-list.js';
+export { MoniListItem } from './moni-list-item.js';
 export { MoniMenu } from './moni-menu.js';
 export { MoniMenuItem } from './moni-menu-item.js';
 export { MoniNav } from './moni-nav.js';
@@ -39,8 +45,10 @@ export { MoniTabs } from './moni-tabs.js';
 export { MoniTextarea } from './moni-textarea.js';
 export { MoniTextField } from './moni-text-field.js';
 export { MoniTimePicker } from './moni-time-picker.js';
+export { MoniToolbar } from './moni-toolbar.js';
 export { MoniSideSheet } from './moni-side-sheet.js';
 export { MoniTooltip } from './moni-tooltip.js';
+export { MoniTypography } from './moni-typography.js';
 export { MoniButtonGroup } from './moni-button-group.js';
 export { MoniSplitButton } from './moni-split-button.js';
 export { MoniButtonSegment } from './moni-button-segment.js';
@@ -49,4 +57,3 @@ export { MoniLoadingIndicator } from './moni-loading-indicator.js';
 export { MoniMorphModal } from './moni-morph-modal.js';
 export { MoniCarousel } from './moni-carousel.js';
 export { MoniShape } from './moni-shape.js';
-

package/src/components/moni-button-group.test.ts

@@ -155,7 +155,7 @@ describe('moni-button-group', () => {
 			.map((style: any) => style?.cssText ?? '')
 			.join(' ');
 		expect(cssText).toContain("[variant='connected']) ::slotted(moni-button)");
-		expect(cssText).toContain('flex: 1 1 0');
+		expect(cssText).toContain('flex: var(--_moni-group-flex-grow, 1) 1 0');
 		expect(cssText).toContain('--moni-button-inline-size: 100%');
 	});
 
@@ -198,6 +198,20 @@ describe('moni-button-group', () => {
 		expect(buttons[1].getAttribute('data-group-adjacent-selected')).toBe('shared');
 	});
 
+	it('expande toda la superficie del activo en modo flexible y reduce los demás por igual', async () => {
+		group.resizing = 'flexible';
+		const buttons = Array.from({ length: 3 }, () => document.createElement('moni-button') as MoniButton);
+		group.append(...buttons);
+		await group.updateComplete;
+		buttons[0].active = true;
+		await buttons[0].updateComplete;
+		await new Promise((resolve) => setTimeout(resolve, 0));
+
+		expect(buttons[0].style.getPropertyValue('--_moni-group-flex-grow')).toBe('1.24');
+		expect(buttons[1].style.getPropertyValue('--_moni-group-flex-grow')).toBe('0.88');
+		expect(buttons[2].style.getPropertyValue('--_moni-group-flex-grow')).toBe('0.88');
+	});
+
 	it('renderiza role="group" en el contenedor por defecto (accesibilidad M3)', async () => {
 		await group.updateComplete;
 		const container = group.shadowRoot?.querySelector('[part="container"]');

package/src/components/moni-button-group.ts

@@ -191,9 +191,11 @@ export class MoniButtonGroup extends MoniElement {
 			:host([variant='connected']) ::slotted(moni-button),
 			:host([variant='connected']) ::slotted(moni-icon-button),
 			:host([resizing='flexible']) ::slotted(moni-button) {
-				flex: 1 1 0;
+				flex: var(--_moni-group-flex-grow, 1) 1 0;
+				transition: flex-grow 450ms cubic-bezier(0.2, 0, 0, 1);
 			}
-			:host([variant='connected']) ::slotted(moni-button) {
+			:host([variant='connected']) ::slotted(moni-button),
+			:host([variant='standard'][resizing='flexible']) ::slotted(moni-button) {
 				--moni-button-inline-size: 100%;
 				min-inline-size: 0;
 			}
@@ -261,7 +263,7 @@ export class MoniButtonGroup extends MoniElement {
 	 */
 	protected override updated(changedProperties: Map<string | number | symbol, unknown>) {
 		super.updated(changedProperties);
-		if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap') || changedProperties.has('shape')) {
+		if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap') || changedProperties.has('shape') || changedProperties.has('resizing')) {
 			this.updateChildren();
 		}
 	}
@@ -286,7 +288,10 @@ export class MoniButtonGroup extends MoniElement {
 	 * selections remain visually balanced instead of collapsing one neighbour. */
 	private updateSelectionNeighbors() {
 		const buttons = this.getButtons();
-		buttons.forEach((button) => button.removeAttribute('data-group-adjacent-selected'));
+		buttons.forEach((button) => {
+			button.removeAttribute('data-group-adjacent-selected');
+			button.style.removeProperty('--_moni-group-flex-grow');
+		});
 		if (this.variant !== 'standard') return;
 
 		const selected = buttons.filter((button) => button.hasAttribute('active'));
@@ -294,6 +299,16 @@ export class MoniButtonGroup extends MoniElement {
 		const unselected = buttons.filter((button) => !button.hasAttribute('active'));
 		const weight = unselected.length === 1 ? 'sole' : 'shared';
 		unselected.forEach((button) => button.setAttribute('data-group-adjacent-selected', weight));
+
+		if (this.resizing === 'flexible' && unselected.length > 0) {
+			const activeWeight = 1.24;
+			const inactiveWeight = Math.max(
+				0.6,
+				(buttons.length - selected.length * activeWeight) / unselected.length
+			);
+			selected.forEach((button) => button.style.setProperty('--_moni-group-flex-grow', String(activeWeight)));
+			unselected.forEach((button) => button.style.setProperty('--_moni-group-flex-grow', String(inactiveWeight)));
+		}
 	}
 
 	private getGapValue(gap: string): string {

package/src/components/moni-button.test.ts

@@ -1,6 +1,5 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import './moni-button.js';
-import type { MoniButton } from './moni-button.js';
+import { MoniButton } from './moni-button.js';
 
 describe('moni-button', () => {
 	let el: MoniButton;
@@ -151,6 +150,13 @@ describe('moni-button', () => {
 		expect(button.disabled).toBe(true);
 	});
 
+	it('usa la altura visual del tamaño como ancho de los botones circle', () => {
+		const cssText = String(MoniButton.styles).replace(/\s+/g, '');
+		expect(cssText).toContain(
+			'inline-size:var(--moni-button-height,var(--_button-visual-height))'
+		);
+	});
+
 	it('registra una advertencia de obsolescencia cuando se usa size="extra" (usar size="xlarge" según M3)', async () => {
 		(el.constructor as any)._deprecationWarned = false;
 		const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});

package/src/components/moni-button.ts

@@ -286,8 +286,8 @@ export class MoniButton extends MoniElement {
 			.button.circle {
 				padding: 0 !important;
 				border-radius: 50%;
-				inline-size: var(--moni-button-height, 3.5rem);
-				min-inline-size: var(--moni-button-height, 3.5rem);
+				inline-size: var(--moni-button-height, var(--_button-visual-height));
+				min-inline-size: var(--moni-button-height, var(--_button-visual-height));
 				aspect-ratio: 1;
 			}
 			.button.round.icon-only {

package/src/components/moni-carousel.test.ts

@@ -195,6 +195,20 @@ describe('moni-carousel', () => {
 		testEl.remove();
 	});
 
+	it('normaliza propiedades numéricas asignadas como strings por frameworks', async () => {
+		const testEl = document.createElement('moni-carousel') as MoniCarousel;
+		(testEl as unknown as { gap: string }).gap = '12';
+		(testEl as unknown as { padding: string }).padding = '8';
+		document.body.appendChild(testEl);
+		await testEl.updateComplete;
+
+		expect(testEl.gap).toBe(12);
+		expect(testEl.padding).toBe(8);
+		expect(testEl.itemSize).toBe(testEl.computedLayout.largeItemWidth + 12);
+
+		testEl.remove();
+	});
+
 	it('proporciona suficiente ancho de desplazamiento para alcanzar el último elemento (regresión de Firefox)', async () => {
 		const testEl = document.createElement('moni-carousel') as MoniCarousel;
 		testEl.items = Array.from({ length: 10 }, (_, i) => ({
@@ -235,4 +249,4 @@ describe('moni-carousel', () => {
 
 		testEl.remove();
 	});
-});
+});

package/src/components/moni-carousel.ts

@@ -5,7 +5,7 @@
  * @contributors Moni Labs & Contributors
  */
 
-import { html, css } from 'lit';
+import { html, css, type PropertyValues } from 'lit';
 import { customElement, property, query, state, queryAll } from 'lit/decorators.js';
 import { MoniElement, sharedStyles } from './_base/index.js';
 import { emitMoniEvent } from '../utils/event-emitter.js';
@@ -84,6 +84,23 @@ export interface CarouselItem {
  */
 @customElement('moni-carousel')
 export class MoniCarousel extends MoniElement {
+	protected override willUpdate(changedProperties: PropertyValues<this>) {
+		super.willUpdate(changedProperties);
+		// Frameworks commonly assign static custom-element attributes as string
+		// properties, bypassing Lit's attribute converter. Normalize before the
+		// layout math so `184 + "12"` never becomes the coordinate `18412`.
+		const numericProperties = [
+			'largeWidth', 'mediumWidth', 'smallWidth', 'gap', 'padding',
+			'borderRadius', 'autoplayInterval'
+		] as const;
+		for (const key of numericProperties) {
+			const value = this[key] as unknown;
+			if (typeof value !== 'string') continue;
+			const normalized = Number(value);
+			if (Number.isFinite(normalized)) this[key] = normalized;
+		}
+	}
+
 	/**
 	 * Array de elementos a mostrar en el carrusel.
 	 * Cada elemento requiere al menos `title` e `img`. El opcional `href` renderiza la tarjeta como un enlace.
@@ -1935,4 +1952,4 @@ declare global {
 	interface HTMLElementTagNameMap {
 		'moni-carousel': MoniCarousel;
 	}
-}
+}