@moni-labs/moni-ui 0.4.3 → 0.4.5

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

@@ -59,6 +59,17 @@ import { MoniElement, sharedStyles } from './_base/index.js';
  */
 @customElement('moni-button-group')
 export class MoniButtonGroup extends MoniElement {
+	private readonly _activeObserver = new MutationObserver(() => this.updateSelectionNeighbors());
+
+	override connectedCallback() {
+		super.connectedCallback();
+		this._activeObserver.observe(this, { subtree: true, attributes: true, attributeFilter: ['active'] });
+	}
+
+	override disconnectedCallback() {
+		this._activeObserver.disconnect();
+		super.disconnectedCallback();
+	}
 	/**
 	 * Variante visual del grupo de botones.
 	 * - `standard`: Los elementos se espacian normalmente.
@@ -84,6 +95,18 @@ export class MoniButtonGroup extends MoniElement {
 	@property({ type: Boolean, reflect: true })
 	multi = false;
 
+	/** Impide que el grupo quede sin selección. */
+	@property({ type: Boolean, reflect: true, attribute: 'selection-required' })
+	selectionRequired = false;
+
+	/** Forma base común de los botones. La selección invierte round ↔ square. */
+	@property({ reflect: true })
+	shape: 'round' | 'square' = 'round';
+
+	/** Controla si los botones conservan su ancho intrínseco o llenan la superficie. */
+	@property({ reflect: true })
+	resizing: 'fixed' | 'flexible' = 'fixed';
+
 	/**
 	 * Espacio CSS personalizado entre botones (ej., '1rem').
 	 * Solo se aplica cuando la variante es 'standard'.
@@ -124,12 +147,18 @@ export class MoniButtonGroup extends MoniElement {
 				display: inline-flex;
 				align-items: center;
 				vertical-align: middle;
+				max-inline-size: 100%;
+			}
+			:host([variant='connected']),
+			:host([resizing='flexible']) {
+				inline-size: 100%;
 			}
 
 			.group-container {
 				display: inline-flex;
 				align-items: center;
 				width: 100%;
+				flex-wrap: nowrap;
 			}
 
 			slot {
@@ -159,6 +188,71 @@ export class MoniButtonGroup extends MoniElement {
 			:host([variant='connected']) .group-container {
 				gap: 0.125rem; /* 2dp */
 			}
+			:host([variant='connected']) ::slotted(moni-button),
+			:host([variant='connected']) ::slotted(moni-icon-button),
+			:host([resizing='flexible']) ::slotted(moni-button) {
+				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='standard'][resizing='flexible']) ::slotted(moni-button) {
+				--moni-button-inline-size: 100%;
+				min-inline-size: 0;
+			}
+			:host([variant='connected'][size='xsmall']) ::slotted(moni-button),
+			:host([variant='connected'][size='xsmall']) ::slotted(moni-icon-button),
+			:host([variant='connected'][size='small']) ::slotted(moni-button),
+			:host([variant='connected'][size='small']) ::slotted(moni-icon-button) {
+				min-inline-size: 3rem;
+			}
+
+			/* M3 Expressive selection emphasis. Increasing the button's internal
+			 * space (instead of scaling the host) keeps labels and icons crisp and
+			 * lets the existing padding transition transfer width smoothly. */
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 1.25rem;
+			}
+			:host([variant='standard'][size='small']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 1.75rem;
+			}
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 2.375rem;
+			}
+			:host([variant='standard'][size='large']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 4rem;
+			}
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[active]),
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-pressed]),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-pressed]) {
+				--moni-button-padding: 0 5.25rem;
+			}
+
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 .5rem; }
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 .75rem; }
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 1.25rem; }
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 2.75rem; }
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-adjacent-pressed]),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-adjacent-pressed]) { --moni-button-padding: 0 3.75rem; }
+
+			/* A selected standard button borrows space from its immediate
+			 * neighbours, keeping the group's outside footprint stable. */
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 .5rem; }
+			:host([variant='standard'][size='xsmall']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 .25rem; }
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 .625rem; }
+			:host([variant='standard'][size='small']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 .25rem; }
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 1.0625rem; }
+			:host([variant='standard'][size='medium']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 .625rem; }
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 2.5rem; }
+			:host([variant='standard'][size='large']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 2rem; }
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-adjacent-selected='shared']),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-adjacent-selected='shared']) { --moni-button-padding: 0 3.375rem; }
+			:host([variant='standard'][size='xlarge']) ::slotted(moni-button[data-group-adjacent-selected='sole']),
+			:host([variant='standard'][size='extra']) ::slotted(moni-button[data-group-adjacent-selected='sole']) { --moni-button-padding: 0 2.75rem; }
 		`
 	];
 
@@ -169,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')) {
+		if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap') || changedProperties.has('shape') || changedProperties.has('resizing')) {
 			this.updateChildren();
 		}
 	}
@@ -183,6 +277,40 @@ export class MoniButtonGroup extends MoniElement {
 		this.updateChildren();
 	}
 
+	private getButtons() {
+		return (this.slottedButtons ?? []).filter(
+			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
+		);
+	}
+
+	/** Keeps selection emphasis inside the group's original visual footprint.
+	 * The selected width is funded evenly by every unselected button so edge
+	 * selections remain visually balanced instead of collapsing one neighbour. */
+	private updateSelectionNeighbors() {
+		const buttons = this.getButtons();
+		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'));
+		if (selected.length === 0) return;
+		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 {
 		if (!gap) return '';
 		const preset = gap.toLowerCase();
@@ -202,9 +330,7 @@ export class MoniButtonGroup extends MoniElement {
 	 * correspondiente (`left-round-flat`, `inner-round`, etc.) para formar una cápsula unificada.
 	 */
 	private updateChildren() {
-		const buttons = this.slottedButtons.filter(
-			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
-		);
+		const buttons = this.getButtons();
 
 		const normalizedGap = this.gap.trim().toLowerCase();
 		const hasConnectedGap = !['0', '0px', '0rem', '0em'].includes(normalizedGap);
@@ -214,7 +340,9 @@ export class MoniButtonGroup extends MoniElement {
 			btn.setAttribute('size', this.size);
 
 			// Propagate shape for connected variant
-			if (this.variant === 'connected') {
+			if (this.variant === 'connected' && this.shape === 'square') {
+				btn.setAttribute('shape', 'square');
+			} else if (this.variant === 'connected') {
 				if (hasConnectedGap) {
 					if (buttons.length === 1) {
 						btn.setAttribute('shape', 'round');
@@ -237,13 +365,10 @@ export class MoniButtonGroup extends MoniElement {
 					}
 				}
 			} else {
-				// Standard variant: buttons retain their own shapes or default round
-				const currentShape = btn.getAttribute('shape');
-				if (!currentShape || ['left-round-flat', 'right-round-flat', 'no-round', 'left-round', 'right-round', 'inner-round'].includes(currentShape)) {
-					btn.setAttribute('shape', 'round');
-				}
+				btn.setAttribute('shape', this.shape);
 			}
 		});
+		this.updateSelectionNeighbors();
 	}
 
 	/**
@@ -258,25 +383,13 @@ export class MoniButtonGroup extends MoniElement {
 		const button = target.closest('moni-button, moni-icon-button') as HTMLElement;
 		if (!button || button.hasAttribute('disabled')) return;
 
-		const buttons = this.slottedButtons.filter(
-			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
-		);
+		const buttons = this.getButtons();
 		const index = buttons.indexOf(button);
 		if (index === -1) return;
 
-		const prev = buttons[index - 1];
-		const next = buttons[index + 1];
-
-		if (prev) {
-			prev.style.transition = 'transform 200ms cubic-bezier(0.2, 0, 0, 1)';
-			prev.style.transform = 'translateX(-6px) scaleX(0.92)';
-			prev.style.transformOrigin = 'right center';
-		}
-		if (next) {
-			next.style.transition = 'transform 200ms cubic-bezier(0.2, 0, 0, 1)';
-			next.style.transform = 'translateX(6px) scaleX(0.92)';
-			next.style.transformOrigin = 'left center';
-		}
+		button.setAttribute('data-group-pressed', '');
+		buttons[index - 1]?.setAttribute('data-group-adjacent-pressed', '');
+		buttons[index + 1]?.setAttribute('data-group-adjacent-pressed', '');
 	}
 
 	/**
@@ -285,12 +398,10 @@ export class MoniButtonGroup extends MoniElement {
 	 * a su estado nativo neutro.
 	 */
 	private handlePointerUp() {
-		const buttons = this.slottedButtons.filter(
-			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
-		);
+		const buttons = this.getButtons();
 		buttons.forEach((btn) => {
-			btn.style.transform = '';
-			btn.style.transformOrigin = '';
+			btn.removeAttribute('data-group-pressed');
+			btn.removeAttribute('data-group-adjacent-pressed');
 		});
 	}
 
@@ -307,9 +418,7 @@ export class MoniButtonGroup extends MoniElement {
 			return;
 		}
 
-		const buttons = this.slottedButtons.filter(
-			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
-		);
+		const buttons = this.getButtons();
 
 		if (!this.multi) {
 			buttons.forEach((btn) => {
@@ -322,6 +431,8 @@ export class MoniButtonGroup extends MoniElement {
 
 		// Toggle clicked button active state
 		const wasActive = clickedButton.hasAttribute('active');
+		const activeCount = buttons.filter((btn) => btn.hasAttribute('active')).length;
+		if (wasActive && this.selectionRequired && activeCount <= 1) return;
 		if (wasActive) {
 			clickedButton.removeAttribute('active');
 			(clickedButton as any).active = false;

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

@@ -203,6 +203,7 @@ export class MoniButton extends MoniElement {
 			.button {
 				box-sizing: var(--moni-button-box-sizing, border-box);
 				display: inline-flex;
+				inline-size: var(--moni-button-inline-size, auto);
 				--_button-visual-height: 3.5rem;
 				align-items: center;
 				justify-content: center;
@@ -285,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;
 	}
-}
+}

package/src/components/moni-context-menu.test.ts

@@ -60,6 +60,22 @@ describe('moni-context-menu (P3.5 — flip)', () => {
 		expect(menu?.hasAttribute('active')).toBe(true);
 	});
 
+	it('reserva ancho para la superficie y limita la coordenada al viewport', async () => {
+		await el.updateComplete;
+		parent.dispatchEvent(new MouseEvent('contextmenu', {
+			bubbles: true,
+			clientX: window.innerWidth + 500,
+			clientY: 75
+		}));
+		await el.updateComplete;
+
+		const menu = el.shadowRoot?.querySelector('moni-menu');
+		const host = el.shadowRoot?.querySelector('.menu-host') as HTMLElement;
+		const x = Number(host.style.getPropertyValue('--_x').replace('px', ''));
+		expect(menu?.hasAttribute('no-wrap')).toBe(true);
+		expect(x).toBeLessThanOrEqual(window.innerWidth - 192 - 8);
+	});
+
 	it('cierra el menú al hacer clic en el documento', async () => {
 		await el.updateComplete;
 		const menu = el.shadowRoot?.querySelector(

package/src/components/moni-context-menu.ts

@@ -117,7 +117,12 @@ export class MoniContextMenu extends MoniElement {
 		e.preventDefault();
 		if (this._target) {
 			const rect = this._target.getBoundingClientRect();
-			this._x = e.clientX - rect.left;
+			const menuWidth = Math.min(192, window.innerWidth - 16);
+			const globalX = Math.min(
+				Math.max(8, e.clientX),
+				window.innerWidth - menuWidth - 8
+			);
+			this._x = globalX - rect.left;
 			this._y = e.clientY - rect.top;
 		} else {
 			this._x = e.clientX;
@@ -136,7 +141,6 @@ export class MoniContextMenu extends MoniElement {
 	 * colisiona con el borde del Viewport, invirtiendo top/bottom o left/right.
 	 */
 	private _maybeFlip() {
-		if (!this.flip) return;
 		const menu = this._menuEl?.shadowRoot?.querySelector('menu') as HTMLElement | null;
 		if (!menu) return;
 		const rect = menu.getBoundingClientRect();
@@ -144,6 +148,11 @@ export class MoniContextMenu extends MoniElement {
 		const vh = window.innerHeight;
 		const overflowsBottom = rect.bottom > vh;
 		const overflowsRight = rect.right > vw;
+		// Context menus must always remain horizontally reachable, regardless of
+		// whether placement flipping was requested.
+		if (overflowsRight) this._x = Math.max(8, this._x - (rect.right - vw) - 8);
+		if (rect.left < 8) this._x += 8 - rect.left;
+		if (!this.flip) return;
 		if (this.placement === 'bottom' && overflowsBottom) {
 			this._resolvedPlacement = 'top';
 		} else if (this.placement === 'top' && rect.top < 0) {
@@ -188,6 +197,8 @@ export class MoniContextMenu extends MoniElement {
 				position: absolute;
 				inset-inline-start: var(--_x, 0);
 				inset-block-start: var(--_y, 0);
+				inline-size: min(12rem, calc(100vw - 1rem));
+				min-inline-size: min(12rem, calc(100vw - 1rem));
 				z-index: 200;
 			}
 		`
@@ -218,6 +229,7 @@ export class MoniContextMenu extends MoniElement {
 		>
 			<moni-menu
 				placement=${effectivePlacement}
+				no-wrap
 				?active=${this._open}
 			>
 				<slot></slot>

package/src/components/moni-file-field.test.ts

@@ -71,11 +71,13 @@ describe('moni-file-field', () => {
 		expect(trailing).toBeTruthy();
 	});
 
-	it('usa button-label como placeholder cuando no hay valor', async () => {
+	it('muestra button-label como valor visible y mantiene el label elevado', async () => {
 		await el.updateComplete;
 		const text = el.shadowRoot?.querySelector(
 			'input[type="text"]'
 		) as HTMLInputElement;
-		expect(text.placeholder).toBe('Choose file');
+		expect(text.placeholder).toBe('');
+		expect(text.value).toBe('Choose file');
+		expect(text.classList.contains('active')).toBe(true);
 	});
 });

package/src/components/moni-file-field.ts

@@ -214,7 +214,10 @@ export class MoniFileField extends MoniElement {
 	 * se muestra en su lugar el atributo `label` o un marcador de posición genérico.
 	 */
 	override render() {
-		const isActive = Boolean(this.value);
+		// The picker action is meaningful visible content, not a placeholder.
+		// Keep the label lifted so it cannot collide with buttonLabel.
+		const displayValue = this.value || this.buttonLabel;
+		const isActive = Boolean(displayValue);
 		const hasLeading = Boolean(this.icon);
 		const hasTrailing = Boolean(this.trailingIcon);
 		const fieldClasses = {
@@ -250,8 +253,8 @@ export class MoniFileField extends MoniElement {
 				type="text"
 				part="display"
 				readonly
-				placeholder=${this.buttonLabel}
-				.value=${this.value}
+				placeholder=""
+				.value=${displayValue}
 				?disabled=${this.disabled}
 				name=${ifDefined(this.name ? `${this.name}-display` : undefined)}
 				class=${isActive ? 'active' : ''}

package/src/components/moni-loading-indicator.test.ts

@@ -57,4 +57,13 @@ describe('moni-loading-indicator', () => {
 		expect(cssText).toContain('prefers-reduced-motion: reduce');
 		expect(cssText).toContain('animation: none');
 	});
+
+	it('permite que el indicador contained crezca fuera de su superficie', () => {
+		const cssText = ((el.constructor as typeof HTMLElement & { styles: unknown[] }).styles)
+			.map((style: any) => style?.cssText ?? '')
+			.join(' ');
+		expect(cssText).not.toContain('contain: strict');
+		expect(cssText).toContain('contain: layout style');
+		expect(cssText).toContain('overflow: visible');
+	});
 });

package/src/components/moni-loading-indicator.ts

@@ -101,7 +101,11 @@ export class MoniLoadingIndicator extends MoniElement {
 			:host {
 				display: inline-block;
 				aspect-ratio: 1 / 1;
-				contain: strict;
+				/* Paint containment clipped oversized morphs in the contained
+				 * variant. Keep layout/style isolation while allowing the active
+				 * indicator to animate beyond the container surface. */
+				contain: layout style;
+				overflow: visible;
 				vertical-align: middle;
 			}
 
@@ -133,6 +137,19 @@ export class MoniLoadingIndicator extends MoniElement {
 				justify-content: center;
 				border-radius: var(--moni-loading-indicator-container-shape, 9999px);
 				box-sizing: border-box;
+				overflow: visible;
+			}
+
+			.active-indicator-wrapper {
+				overflow: visible;
+			}
+
+			.active-indicator-scale {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				overflow: visible;
+				transform-origin: center;
 			}
 
 			.active-indicator {
@@ -243,7 +260,9 @@ export class MoniLoadingIndicator extends MoniElement {
 		return html`
 			<div class="container animate" aria-hidden="true">
 				<div class="active-indicator-wrapper">
-					<div class="active-indicator"></div>
+					<div class="active-indicator-scale">
+						<div class="active-indicator"></div>
+					</div>
 				</div>
 			</div>
 		`;