@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,87 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-menu.js';
+import type { MoniMenu } from './moni-menu.js';
+
+describe('moni-menu (P3.2 — flip attribute)', () => {
+	let el: MoniMenu;
+
+	beforeEach(() => {
+		el = document.createElement('moni-menu') as MoniMenu;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('defaults to placement=bottom and flip=false', async () => {
+		await el.updateComplete;
+		expect(el.placement).toBe('bottom');
+		expect(el.flip).toBe(false);
+	});
+
+	it('reflects flip attribute on the host', async () => {
+		el.flip = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('flip')).toBe(true);
+	});
+
+	it('renders the placement class on the inner <menu>', async () => {
+		el.placement = 'top';
+		await el.updateComplete;
+		const menu = el.shadowRoot?.querySelector('menu');
+		expect(menu?.classList.contains('top')).toBe(true);
+	});
+
+	it('reflects active as a class on the <menu>', async () => {
+		el.active = true;
+		await el.updateComplete;
+		const menu = el.shadowRoot?.querySelector('menu');
+		expect(menu?.classList.contains('active')).toBe(true);
+
+		el.active = false;
+		await el.updateComplete;
+		expect(menu?.classList.contains('active')).toBe(false);
+	});
+
+	it('reflects all 6 placements (bottom/top/left/right/min/max)', async () => {
+		const placements: Array<'bottom' | 'top' | 'left' | 'right' | 'min' | 'max'> = [
+			'bottom',
+			'top',
+			'left',
+			'right',
+			'min',
+			'max'
+		];
+		for (const p of placements) {
+			el.placement = p;
+			await el.updateComplete;
+			const menu = el.shadowRoot?.querySelector('menu');
+			expect(menu?.classList.contains(p)).toBe(true);
+		}
+	});
+
+	it('space variants (no-space/space/small-space/medium-space/large-space/extra-space) apply a gap class', async () => {
+		const spaces = [
+			'no-space',
+			'space',
+			'small-space',
+			'medium-space',
+			'large-space',
+			'extra-space'
+		] as const;
+		for (const sp of spaces) {
+			el.space = sp;
+			await el.updateComplete;
+			const menu = el.shadowRoot?.querySelector('menu');
+			expect(menu?.classList.contains(sp)).toBe(true);
+		}
+	});
+
+	it('no-wrap attribute forwards to a no-wrap class', async () => {
+		el.noWrap = true;
+		await el.updateComplete;
+		const menu = el.shadowRoot?.querySelector('menu');
+		expect(menu?.classList.contains('no-wrap')).toBe(true);
+	});
+});

package/src/components/moni-menu.ts

@@ -0,0 +1,287 @@
+import { html, css } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Menu that faithfully ports BeerCSS's `menu` styles.
+ *
+ * BeerCSS uses a plain `<menu>` with class `.active` toggled by JS —
+ * NO Popover API. The menu positions itself as `position: absolute`
+ * relative to the nearest positioned ancestor.
+ *
+ * Shadow DOM note: we keep :host as `display: contents` so the inner
+ * `<menu>` can position relative to the consumer's layout context.
+ * The consumer must have `position: relative` on the trigger's wrapper.
+ *
+ * **M3 spec** (`m3-docs/components/menus/guidelines.md`): menus should
+ * auto-flip to the opposite side when there isn't enough viewport space
+ * in the requested placement.
+ *
+ * **Flip implementation** (P4.3):
+ *  - Modern browsers (Chrome 125+, Edge 125+, Safari 18+): uses CSS
+ *    `@position-try-fallback` (Baseline 2024) when `flip` is set.
+ *  - Older browsers (Firefox, Safari < 18): JS polyfill. After the menu
+ *    becomes active, we measure the inner `<menu>` rect; if it overflows
+ *    the viewport on the requested side, we set `_resolvedPlacement`
+ *    to the opposite side and the CSS picks up the change.
+ *
+ * Attributes:
+ *  - placement:  bottom (default) | top | left | right | min | max
+ *  - no-wrap:    present
+ *  - space:      no-space | space | small-space | medium-space | large-space | extra-space
+ *  - active:     present → menu is visible
+ *  - flip:       present → enable auto-flip when there is no viewport space
+ *                (works on all browsers; CSS-native when supported)
+ *
+ * Slots:
+ *  - default: menu items (moni-menu-item or li elements)
+ */
+@customElement('moni-menu')
+export class MoniMenu extends MoniElement {
+	@property({ reflect: true })
+	placement: 'bottom' | 'top' | 'left' | 'right' | 'min' | 'max' = 'bottom';
+	@property({ type: Boolean, reflect: true, attribute: 'no-wrap' }) noWrap = false;
+	@property({ type: Boolean, reflect: true }) active = false;
+	@property({ reflect: true })
+	space:
+		| 'no-space'
+		| 'space'
+		| 'small-space'
+		| 'medium-space'
+		| 'large-space'
+		| 'extra-space' = 'no-space';
+	@property({ type: Boolean, reflect: true }) flip = false;
+
+	@state() private _resolvedPlacement:
+		| 'bottom'
+		| 'top'
+		| 'left'
+		| 'right'
+		| 'min'
+		| 'max' = 'bottom';
+
+	@query('menu') private _menuEl?: HTMLElement;
+
+	override updated(changed: Map<string, unknown>) {
+		super.updated(changed);
+		if (changed.has('active') && this.active && this.flip) {
+			// JS polyfill for browsers without @position-try-fallback.
+			// Wait one frame so the menu is laid out, then measure.
+			this.updateComplete.then(() => this._maybeFlip());
+		}
+	}
+
+	private _maybeFlip() {
+		const menu = this._menuEl;
+		if (!menu || !this.flip) return;
+		const rect = menu.getBoundingClientRect();
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		const overflowsBottom = rect.bottom > vh;
+		const overflowsTop = rect.top < 0;
+		const overflowsRight = rect.right > vw;
+		const overflowsLeft = rect.left < 0;
+		if (this.placement === 'bottom' && overflowsBottom) {
+			this._resolvedPlacement = 'top';
+		} else if (this.placement === 'top' && overflowsTop) {
+			this._resolvedPlacement = 'bottom';
+		} else if (this.placement === 'right' && overflowsRight) {
+			this._resolvedPlacement = 'left';
+		} else if (this.placement === 'left' && overflowsLeft) {
+			this._resolvedPlacement = 'right';
+		} else {
+			this._resolvedPlacement = this.placement;
+		}
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: contents;
+				font-family: var(--font);
+			}
+
+			/* BeerCSS menu — faithful port */
+			menu {
+				opacity: 0;
+				visibility: hidden;
+				position: absolute;
+				box-shadow: var(--elevate2);
+				background-color: var(--surface-container);
+				z-index: 13;
+				inset: auto auto 0 0;
+				inline-size: 100%;
+				max-block-size: 50vh;
+				max-inline-size: none !important;
+				overflow-x: hidden;
+				overflow-y: auto;
+				font-size: 0.875rem;
+				font-weight: normal;
+				text-transform: none;
+				color: var(--on-surface);
+				line-height: normal;
+				text-align: start;
+				border-radius: 1rem;
+				transform: scale(0.8) translateY(120%);
+				transition: all var(--speed2) var(--speed2), opacity var(--speed2);
+				justify-content: flex-start;
+				padding: 0.25rem;
+				display: flex;
+				flex-direction: column;
+				gap: 0.125rem;
+				margin: 0;
+				list-style: none;
+			}
+
+			/* BeerCSS: active class shows the menu */
+			menu.active {
+				opacity: 1;
+				visibility: visible;
+				transform: scale(1) translateY(100%);
+				transition: all var(--speed2), background-color 0s;
+			}
+
+			/* Placement: top */
+			menu.top {
+				transform: scale(0.8) translateY(-120%);
+			}
+			menu.top.active {
+				transform: scale(1) translateY(-100%);
+			}
+
+			/* Placement: left / right */
+			menu.right {
+				inset: auto auto 0 0;
+			}
+			menu.left {
+				inset: auto 0 0 auto;
+			}
+
+			/* Placement: min (fixed-size dropdown) */
+			menu.min {
+				inset: 0 0 auto 0;
+				transform: scale(0.8);
+			}
+			menu.min.active {
+				transform: scale(1);
+			}
+
+			/* Placement: max (full screen overlay) */
+			menu.max {
+				position: fixed;
+				inset: 0;
+				block-size: 100%;
+				max-block-size: none;
+				min-block-size: auto;
+				z-index: 100;
+				transform: scale(0.8);
+				border-radius: 0;
+			}
+			menu.max.active {
+				transform: scale(1);
+			}
+
+			menu.no-wrap {
+				inline-size: max-content !important;
+				white-space: nowrap !important;
+			}
+
+			/* Space variants */
+			menu.no-space   { gap: 0; }
+			menu.space      { gap: 0.25rem; }
+			menu.small-space { gap: 0.25rem; }
+			menu.medium-space { gap: 0.375rem; }
+			menu.large-space  { gap: 0.5rem; }
+			menu.extra-space  { gap: 0.625rem; }
+
+			/* Slotted items */
+			::slotted(li),
+			::slotted(moni-menu-item) {
+				list-style: none;
+				display: flex;
+				align-items: center;
+				align-self: normal;
+				text-align: start;
+				gap: 1rem;
+				padding: 0.5rem 1rem;
+				min-block-size: 2.75rem;
+				cursor: pointer;
+				border-radius: 0.25rem;
+				transition: border-radius var(--speed2);
+			}
+
+			/* M3 spec: auto-flip when there is no space in the requested
+			   placement. Uses CSS anchor positioning + position-try-fallback
+			   (Baseline 2024, Chrome 125+, Edge 125+, Safari TP).
+
+			   The consumer must:
+			     1. Set anchor-name="--moni-menu-anchor" on the trigger.
+			     2. Ensure the menu can be reached via position-anchor.
+
+			   When the menu's default placement would overflow, the
+			   browser uses the first matching @position-try fallback. */
+			@supports (anchor-name: --moni-menu-anchor) {
+				:host([flip]) menu {
+					position-anchor: --moni-menu-anchor;
+					position-area: block-end;
+					inset: auto;
+					inline-size: max-content;
+					max-inline-size: 20rem;
+					position-try-fallbacks:
+						flip-block,
+						flip-inline,
+						flip-block flip-inline;
+				}
+				:host([flip][placement='top']) menu {
+					position-area: block-start;
+					position-try-fallbacks:
+						flip-block,
+						flip-inline,
+						flip-block flip-inline;
+				}
+				:host([flip][placement='right']) menu {
+					position-area: inline-end;
+					position-try-fallbacks:
+						flip-inline,
+						flip-block,
+						flip-inline flip-block;
+				}
+				:host([flip][placement='left']) menu {
+					position-area: inline-start;
+					position-try-fallbacks:
+						flip-inline,
+						flip-block,
+						flip-inline flip-block;
+				}
+			}
+		`
+	];
+
+	override render() {
+		const effectivePlacement = this.active && this.flip
+			? this._resolvedPlacement
+			: this.placement;
+		const classes = [
+			effectivePlacement,
+			this.space,
+			this.noWrap ? 'no-wrap' : '',
+			this.active ? 'active' : ''
+		].filter(Boolean).join(' ');
+
+		return html`<menu
+			class=${classes}
+			part="menu"
+		>
+			<slot></slot>
+		</menu>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-menu': MoniMenu;
+	}
+}
+
+export default MoniMenu;

package/src/components/moni-morph-modal.test.ts

@@ -0,0 +1,286 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import './moni-morph-modal.js';
+import type { MoniMorphModal } from './moni-morph-modal.js';
+
+vi.mock('gsap', () => {
+	return {
+		gsap: {
+			registerPlugin: vi.fn(),
+			set: vi.fn(),
+			fromTo: vi.fn(
+				(_target: unknown, _from: object, to: { onComplete?: () => void }) => {
+					if (to.onComplete) to.onComplete();
+					return { then: vi.fn((cb: () => void) => cb()) };
+				}
+			),
+			to: vi.fn((_target: unknown, config: { onComplete?: () => void }) => {
+				if (config.onComplete) config.onComplete();
+				return { then: vi.fn((cb: () => void) => cb()) };
+			})
+		}
+	};
+});
+
+vi.mock('gsap/Flip', () => {
+	return {
+		Flip: {
+			getState: vi.fn(() => ({})),
+			from: vi.fn(
+				(_state: unknown, config: { onComplete?: () => void }) => {
+					if (config.onComplete) config.onComplete();
+					return {};
+				}
+			)
+		}
+	};
+});
+
+async function waitForRaf() {
+	await new Promise((resolve) => requestAnimationFrame(resolve));
+	await new Promise((resolve) => requestAnimationFrame(resolve));
+}
+
+describe('moni-morph-modal', () => {
+	let el: MoniMorphModal;
+	let target: HTMLButtonElement;
+	let originalMatchMedia: typeof window.matchMedia;
+
+	beforeEach(() => {
+		originalMatchMedia = window.matchMedia;
+		window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+			matches: query === '(prefers-reduced-motion: reduce)' ? false : false,
+			media: query,
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn()
+		})) as unknown as typeof window.matchMedia;
+
+		target = document.createElement('button');
+		target.id = 'test-target';
+		target.textContent = 'Open';
+		document.body.appendChild(target);
+
+		el = document.createElement('moni-morph-modal') as MoniMorphModal;
+		el.target = '#test-target';
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		window.matchMedia = originalMatchMedia;
+		el.remove();
+		target.remove();
+	});
+
+	it('registers the custom element', () => {
+		expect(customElements.get('moni-morph-modal')).toBeTruthy();
+	});
+
+	it('renders a panel and a backdrop in shadow root', async () => {
+		await el.updateComplete;
+		const panel = el.shadowRoot?.querySelector('.panel');
+		const backdrop = el.shadowRoot?.querySelector('.backdrop');
+		expect(panel).toBeTruthy();
+		expect(backdrop).toBeTruthy();
+	});
+
+	it('reflects the target attribute', async () => {
+		await el.updateComplete;
+		expect(el.getAttribute('target')).toBe('#test-target');
+	});
+
+	it('reflects the open attribute', async () => {
+		el.open = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('open')).toBe(true);
+	});
+
+	it('projects the default slot content', async () => {
+		const content = document.createElement('p');
+		content.textContent = 'Hello';
+		el.appendChild(content);
+		await el.updateComplete;
+		const body = el.shadowRoot?.querySelector('.body');
+		expect(body).toBeTruthy();
+		const slot = body?.querySelector('slot');
+		expect(slot).toBeTruthy();
+	});
+
+	it('projects the header slot content', async () => {
+		const header = document.createElement('div');
+		header.setAttribute('slot', 'header');
+		header.textContent = 'Title';
+		el.appendChild(header);
+		await el.updateComplete;
+		const headerSlot = el.shadowRoot?.querySelector('slot[name="header"]');
+		expect(headerSlot).toBeTruthy();
+	});
+
+	it('projects the footer slot content', async () => {
+		const footer = document.createElement('div');
+		footer.setAttribute('slot', 'footer');
+		footer.textContent = 'Actions';
+		el.appendChild(footer);
+		await el.updateComplete;
+		const footerSlot = el.shadowRoot?.querySelector('slot[name="footer"]');
+		expect(footerSlot).toBeTruthy();
+	});
+
+	it('shows the close button when show-close-button is true', async () => {
+		el.showCloseButton = true;
+		await el.updateComplete;
+		const closeBtn = el.shadowRoot?.querySelector('.close-btn');
+		expect(closeBtn).toBeTruthy();
+	});
+
+	it('toggles open state when show() and hide() are called', async () => {
+		expect(el.open).toBe(false);
+		el.show();
+		await waitForRaf();
+		expect(el.open).toBe(true);
+		el.hide();
+		await waitForRaf();
+		expect(el.open).toBe(false);
+	});
+
+	it('toggles open state when toggle() is called', async () => {
+		el.toggle();
+		await waitForRaf();
+		expect(el.open).toBe(true);
+		el.toggle();
+		await waitForRaf();
+		expect(el.open).toBe(false);
+	});
+
+	it('warns when target is not found', () => {
+		const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+		const modal = document.createElement('moni-morph-modal') as MoniMorphModal;
+		modal.target = '#missing-target';
+		document.body.appendChild(modal);
+		const call = warnSpy.mock.calls.find((c) =>
+			String(c[0]).includes('[moni-morph-modal]')
+		);
+		expect(call).toBeTruthy();
+		modal.remove();
+		warnSpy.mockRestore();
+	});
+
+	it('supports recursive declaration of nested morph modals', async () => {
+		const innerTarget = document.createElement('button');
+		innerTarget.id = 'inner-target';
+		el.appendChild(innerTarget);
+
+		const innerModal = document.createElement('moni-morph-modal') as MoniMorphModal;
+		innerModal.target = '#inner-target';
+		el.appendChild(innerModal);
+
+		await el.updateComplete;
+		await innerModal.updateComplete;
+
+		expect(innerModal.target).toBe('#inner-target');
+		innerModal.show();
+		await waitForRaf();
+		expect(innerModal.open).toBe(true);
+
+		innerModal.remove();
+		innerTarget.remove();
+	});
+
+	it('does not create morph elements by default', async () => {
+		el.show();
+		await waitForRaf();
+		expect(el.shadowRoot?.querySelector('.morph-text')).toBeFalsy();
+		expect(el.shadowRoot?.querySelector('.morph-icon')).toBeFalsy();
+	});
+
+	it('creates and cleans up morph-text when morph-label is true', async () => {
+		(el as unknown as { _hasHeader: boolean })._hasHeader = true;
+		el.morphLabel = true;
+		await el.updateComplete;
+
+		const createSpy = vi.spyOn(
+			el as unknown as { _createMorphText: (text: string, source: Element) => HTMLElement },
+			'_createMorphText'
+		);
+		el.show();
+		await waitForRaf();
+
+		expect(createSpy).toHaveBeenCalled();
+		expect(el.shadowRoot?.querySelector('.morph-text')).toBeFalsy();
+		createSpy.mockRestore();
+	});
+
+	it('uses trigger-label slot content when provided', async () => {
+		const triggerLabel = document.createElement('span');
+		triggerLabel.setAttribute('slot', 'trigger-label');
+		triggerLabel.textContent = 'Custom label';
+		el.appendChild(triggerLabel);
+
+		(el as unknown as { _hasHeader: boolean })._hasHeader = true;
+		(el as unknown as { _hasTriggerLabel: boolean })._hasTriggerLabel = true;
+
+		el.morphLabel = true;
+		await el.updateComplete;
+
+		const getNodes = vi.spyOn(
+			el as unknown as { _getTriggerLabelNodes: () => Node[] },
+			'_getTriggerLabelNodes'
+		);
+		el.show();
+		await waitForRaf();
+
+		expect(getNodes).toHaveReturned();
+		const returned = getNodes.mock.results[0]?.value as Node[] | undefined;
+		expect(returned?.length).toBeGreaterThan(0);
+		getNodes.mockRestore();
+	});
+
+	it('runs label FLIP on close when morph-label is true', async () => {
+		(el as unknown as { _hasHeader: boolean })._hasHeader = true;
+		el.morphLabel = true;
+		await el.updateComplete;
+
+		el.show();
+		await waitForRaf();
+		expect(el.open).toBe(true);
+
+		const closeSpy = vi.spyOn(
+			el as unknown as { _animateLabelClose: () => void },
+			'_animateLabelClose'
+		);
+		el.hide();
+		await waitForRaf();
+
+		expect(closeSpy).toHaveBeenCalled();
+		closeSpy.mockRestore();
+	});
+
+	it('does not create morph elements when reduced motion is preferred', async () => {
+		(el as unknown as { _hasHeader: boolean })._hasHeader = true;
+		el.morphLabel = true;
+		await el.updateComplete;
+
+		window.matchMedia = vi.fn().mockReturnValue({
+			matches: true,
+			media: '(prefers-reduced-motion: reduce)',
+			onchange: null,
+			addListener: vi.fn(),
+			removeListener: vi.fn(),
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			dispatchEvent: vi.fn()
+		} as unknown as MediaQueryList);
+
+		const createSpy = vi.spyOn(
+			el as unknown as { _createMorphText: (text: string, source: Element) => HTMLElement },
+			'_createMorphText'
+		);
+		el.show();
+		await waitForRaf();
+
+		expect(createSpy).not.toHaveBeenCalled();
+		createSpy.mockRestore();
+	});
+});