@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,83 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-card.js';
+import type { MoniCard } from './moni-card.js';
+
+describe('moni-card (P4.4 — recreated)', () => {
+	let el: MoniCard;
+
+	beforeEach(() => {
+		el = document.createElement('moni-card') as MoniCard;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders the three M3 variants: elevated (default), filled, outlined', async () => {
+		expect(el.variant).toBe('elevated');
+		await el.updateComplete;
+		expect(el.getAttribute('variant')).toBe('elevated');
+
+		el.variant = 'filled';
+		await el.updateComplete;
+		expect(el.getAttribute('variant')).toBe('filled');
+
+		el.variant = 'outlined';
+		await el.updateComplete;
+		expect(el.getAttribute('variant')).toBe('outlined');
+	});
+
+	it('renders media, body, and actions slots', async () => {
+		await el.updateComplete;
+		const media = el.shadowRoot?.querySelector('[part="media"]');
+		const body = el.shadowRoot?.querySelector('[part="body"]');
+		const actions = el.shadowRoot?.querySelector('[part="actions"]');
+		expect(media).toBeTruthy();
+		expect(body).toBeTruthy();
+		expect(actions).toBeTruthy();
+	});
+
+	it('reflects clickable, draggable, and disabled attributes', async () => {
+		el.clickable = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('clickable')).toBe(true);
+
+		el.draggable = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('draggable')).toBe(true);
+
+		el.disabled = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('disabled')).toBe(true);
+	});
+
+	it('supports slotted headings via the headline slot', async () => {
+		const heading = document.createElement('h3');
+		heading.setAttribute('slot', 'headline');
+		heading.textContent = 'Card title';
+		el.appendChild(heading);
+		await el.updateComplete;
+
+		const headlineSlot = el.shadowRoot?.querySelector(
+			'slot[name="headline"]'
+		) as HTMLSlotElement | null;
+		expect(headlineSlot).toBeTruthy();
+		const assigned = headlineSlot?.assignedNodes({ flatten: true }) ?? [];
+		const text = assigned.map((n) => n.textContent ?? '').join('').trim();
+		expect(text).toBe('Card title');
+	});
+
+	it('supports the default slot for primary content', async () => {
+		el.textContent = 'Body content';
+		await el.updateComplete;
+		// The default slot is inside the headline slot wrapper.
+		const defaultSlot = el.shadowRoot?.querySelector(
+			'slot:not([name])'
+		) as HTMLSlotElement | null;
+		expect(defaultSlot).toBeTruthy();
+		const assigned = defaultSlot?.assignedNodes({ flatten: true }) ?? [];
+		const text = assigned.map((n) => n.textContent ?? '').join('').trim();
+		expect(text).toBe('Body content');
+	});
+});

package/src/components/moni-card.ts

@@ -0,0 +1,203 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Material 3 Card (`m3-docs/components/cards/specs.md`).
+ *
+ * Cards display content and actions on a single subject. Three variants:
+ *  - **elevated**: surface-container-low background + elevation 1 shadow.
+ *    Default for collections where the card needs separation from a
+ *    patterned background.
+ *  - **filled**: surface-container-highest background, no shadow.
+ *    Lowest emphasis; use when cards sit directly on the background.
+ *  - **outlined**: surface background + outline-variant 1dp stroke.
+ *    Highest emphasis without shadow; good on solid color backgrounds.
+ *
+ * M3 measurements:
+ *  - Container corner radius: **12dp**.
+ *  - Left/right padding: **16dp**.
+ *  - Padding between cards in a collection: max **8dp**.
+ *  - Headline text alignment: **start**.
+ *
+ * Slots:
+ *  - media:        image or video at the top of the card.
+ *  - default:      primary content (headline, subhead, supporting text).
+ *  - headline:     shortcut for the H3-equivalent title (semantic).
+ *  - subhead:      secondary title slot.
+ *  - supporting:   supporting text slot.
+ *  - actions:      action buttons row at the bottom of the card.
+ *
+ * Attributes:
+ *  - variant: elevated (default) | filled | outlined
+ *  - clickable: present → apply hover/focus/pressed state layers
+ *  - draggable:  present → apply dragged state elevation (3)
+ *  - disabled:   present → reduced opacity + cursor not-allowed
+ */
+@customElement('moni-card')
+export class MoniCard extends MoniElement {
+	@property({ reflect: true })
+	variant: 'elevated' | 'filled' | 'outlined' = 'elevated';
+	@property({ type: Boolean, reflect: true }) clickable = false;
+	@property({ type: Boolean, reflect: true }) draggable = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+				/* M3 spec: 12dp corner, 16dp padding, 8dp max between cards. */
+				border-radius: 0.75rem;
+				color: var(--on-surface);
+				position: relative;
+				overflow: hidden;
+				transition:
+					box-shadow var(--speed2),
+					background-color var(--speed2),
+					border-color var(--speed2);
+			}
+
+			/* Elevated variant: surface-container-low + elevation 1. */
+			:host([variant='elevated']) {
+				background-color: var(--surface-container-low);
+				box-shadow: var(--elevate1);
+			}
+
+			/* Filled variant: surface-container-highest, no shadow. */
+			:host([variant='filled']) {
+				background-color: var(--surface-container-highest);
+			}
+
+			/* Outlined variant: surface + outline-variant 1dp. */
+			:host([variant='outlined']) {
+				background-color: var(--surface);
+				border: 0.0625rem solid var(--outline-variant);
+			}
+
+			/* Clickable cards expose hover/focus/pressed state layers. */
+			:host([clickable]) {
+				cursor: pointer;
+			}
+			:host([clickable]:hover) {
+				box-shadow: var(--elevate2);
+			}
+			:host([clickable]:focus-visible) {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.125rem;
+			}
+			:host([clickable]:active) {
+				box-shadow: var(--elevate1);
+			}
+
+			/* Draggable cards show elevation 3 when picked up. */
+			:host([draggable]) {
+				cursor: grab;
+			}
+			:host([draggable]:active) {
+				cursor: grabbing;
+				box-shadow: var(--elevate3);
+			}
+
+			/* Disabled state. */
+			:host([disabled]) {
+				opacity: 0.38;
+				pointer-events: none;
+				cursor: not-allowed;
+			}
+
+			/* ─── Card slots layout ─── */
+			.media {
+				display: block;
+				margin-block-end: 1rem;
+			}
+			.media[hidden] {
+				display: none;
+			}
+
+			.body {
+				padding: 0 1rem;
+				display: flex;
+				flex-direction: column;
+				gap: 0.5rem;
+			}
+
+			.headline {
+				font-size: 1.25rem;
+				line-height: 1.75rem;
+				font-weight: 400;
+				letter-spacing: 0;
+				color: var(--on-surface);
+				margin: 0;
+				padding: 0;
+			}
+			.subhead {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 500;
+				letter-spacing: 0.007em;
+				color: var(--on-surface-variant);
+				margin: 0;
+				padding: 0;
+			}
+			.supporting {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 400;
+				letter-spacing: 0.014em;
+				color: var(--on-surface-variant);
+				margin: 0;
+				padding: 0;
+			}
+
+			.actions {
+				display: flex;
+				gap: 0.5rem;
+				padding: 0.75rem 1rem 1rem;
+			}
+			.actions[hidden] {
+				display: none;
+			}
+
+			/* Ensure slotted headings inherit our typography reset
+			   (margin/padding/font-size) so consumers can use semantic
+			   h1..h6 without breaking the visual rhythm. */
+			::slotted(:is(h1, h2, h3, h4, h5, h6)) {
+				margin: 0;
+				padding: 0;
+				font-size: inherit;
+				font-weight: inherit;
+				line-height: inherit;
+				letter-spacing: inherit;
+				color: inherit;
+			}
+		`
+	];
+
+	override render() {
+		return html`
+			<div class="media" part="media">
+				<slot name="media"></slot>
+			</div>
+			<div class="body" part="body">
+				<slot name="headline">
+					<slot></slot>
+				</slot>
+				<slot name="subhead"></slot>
+				<slot name="supporting"></slot>
+			</div>
+			<div class="actions" part="actions">
+				<slot name="actions"></slot>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-card': MoniCard;
+	}
+}
+
+export default MoniCard;

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

@@ -0,0 +1,238 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+
+// Mock ResizeObserver globally for jsdom environment before component imports
+globalThis.ResizeObserver = class {
+	observe = vi.fn();
+	unobserve = vi.fn();
+	disconnect = vi.fn();
+};
+
+import './moni-carousel.js';
+import type { MoniCarousel } from './moni-carousel.js';
+
+
+describe('moni-carousel', () => {
+	let el: MoniCarousel;
+
+	beforeEach(async () => {
+		el = document.createElement('moni-carousel') as MoniCarousel;
+		el.items = [
+			{ title: 'Item 1', img: 'https://picsum.photos/200' },
+			{ title: 'Item 2', img: 'https://picsum.photos/200' },
+			{ title: 'Item 3', img: 'https://picsum.photos/200' }
+		];
+		document.body.appendChild(el);
+		await el.updateComplete;
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders container, viewport and scroll-container', async () => {
+		await el.updateComplete;
+		const container = el.shadowRoot?.querySelector('.carousel-container');
+		const viewport = el.shadowRoot?.querySelector('.carousel-viewport');
+		const scrollContainer = el.shadowRoot?.querySelector('.scroll-container');
+
+		expect(container).toBeTruthy();
+		expect(viewport).toBeTruthy();
+		expect(scrollContainer).toBeTruthy();
+	});
+
+	it('renders the correct number of cards and snap-items', async () => {
+		await el.updateComplete;
+		const cards = el.shadowRoot?.querySelectorAll('.card');
+		const snapItems = el.shadowRoot?.querySelectorAll('.snap-item');
+
+		expect(cards?.length).toBe(3);
+		expect(snapItems?.length).toBe(3);
+	});
+
+	it('renders the header title and show-all button when set', async () => {
+		el.headerText = 'Recent Highlights';
+		el.showAll = true;
+		el.showAllText = 'View All';
+		await el.updateComplete;
+
+		const header = el.shadowRoot?.querySelector('.carousel-header');
+		const title = header?.querySelector('h3');
+		const showAllLink = header?.querySelector('.show-all-link');
+
+		expect(header).toBeTruthy();
+		expect(title?.textContent?.trim()).toBe('Recent Highlights');
+		expect(showAllLink?.textContent?.trim()).toBe('View All');
+	});
+
+	it('renders card links when href is specified in items', async () => {
+		const testEl = document.createElement('moni-carousel') as MoniCarousel;
+		testEl.items = [
+			{ title: 'Link Item', img: 'https://picsum.photos/200', href: 'https://moni.com', target: '_blank' }
+		];
+		document.body.appendChild(testEl);
+		await testEl.updateComplete;
+
+		const card = testEl.shadowRoot?.querySelector('.card');
+		const anchor = card?.querySelector('a');
+
+		expect(anchor).toBeTruthy();
+		expect(anchor?.getAttribute('href')).toBe('https://moni.com');
+		expect(anchor?.getAttribute('target')).toBe('_blank');
+
+		testEl.remove();
+	});
+
+	it('dispatches item-click event when card is clicked', async () => {
+		await el.updateComplete;
+		const card = el.shadowRoot?.querySelector('.card') as HTMLElement;
+		expect(card).toBeTruthy();
+
+		const clickSpy = vi.fn();
+		el.addEventListener('item-click', clickSpy);
+
+		card.click();
+
+		expect(clickSpy).toHaveBeenCalledOnce();
+		const eventDetail = clickSpy.mock.calls[0][0].detail;
+		expect(eventDetail.index).toBe(0);
+		expect(eventDetail.item.title).toBe('Item 1');
+	});
+
+	it('dispatches show-all-click event when show-all link is clicked', async () => {
+		el.showAll = true;
+		await el.updateComplete;
+		const showAllLink = el.shadowRoot?.querySelector('.show-all-link') as HTMLElement;
+		expect(showAllLink).toBeTruthy();
+
+		const clickSpy = vi.fn();
+		el.addEventListener('show-all-click', clickSpy);
+
+		showAllLink.click();
+
+		expect(clickSpy).toHaveBeenCalledOnce();
+	});
+
+	it('updates snap padding based on layout type', async () => {
+		el.layout = 'hero';
+		await el.updateComplete;
+		let containerStyle = el.shadowRoot?.querySelector('.carousel-container')?.getAttribute('style');
+		expect(containerStyle?.includes('--carousel-right-padding')).toBe(true);
+
+		el.layout = 'uncontained';
+		await el.updateComplete;
+		containerStyle = el.shadowRoot?.querySelector('.carousel-container')?.getAttribute('style');
+		expect(containerStyle?.includes('--carousel-right-padding')).toBe(true);
+	});
+
+	it('renders slotted images as items', async () => {
+		const testEl = document.createElement('moni-carousel') as MoniCarousel;
+		const img1 = document.createElement('img');
+		img1.src = 'https://picsum.photos/200?1';
+		img1.title = 'Slotted 1';
+		const img2 = document.createElement('img');
+		img2.src = 'https://picsum.photos/200?2';
+		img2.title = 'Slotted 2';
+
+		testEl.appendChild(img1);
+		testEl.appendChild(img2);
+		document.body.appendChild(testEl);
+
+		const slot = testEl.shadowRoot?.querySelector('slot:not([name])');
+		slot?.dispatchEvent(new Event('slotchange'));
+
+		await new Promise(r => setTimeout(r, 50));
+		await testEl.updateComplete;
+
+		const cards = testEl.shadowRoot?.querySelectorAll('.card');
+		expect(cards?.length).toBe(2);
+
+		const title = cards?.[0]?.querySelector('.card-title');
+		expect(title?.textContent?.trim()).toBe('Slotted 1');
+
+		testEl.remove();
+	});
+
+	it('renders slotted show-all button and dispatches click event', async () => {
+		const testEl = document.createElement('moni-carousel') as MoniCarousel;
+		const btn = document.createElement('button');
+		btn.setAttribute('slot', 'show-all');
+		btn.textContent = 'Custom Show All';
+
+		testEl.appendChild(btn);
+		document.body.appendChild(testEl);
+		await testEl.updateComplete;
+
+		const slot = testEl.shadowRoot?.querySelector('slot[name="show-all"]');
+		slot?.dispatchEvent(new Event('slotchange'));
+		
+		await new Promise(r => setTimeout(r, 50));
+		await testEl.updateComplete;
+
+		const header = testEl.shadowRoot?.querySelector('.carousel-header');
+		expect(header).toBeTruthy();
+
+		const clickSpy = vi.fn();
+		testEl.addEventListener('show-all-click', clickSpy);
+
+		btn.click();
+		expect(clickSpy).toHaveBeenCalledOnce();
+
+		testEl.remove();
+	});
+
+	it('hides navigation buttons when hideNav is true', async () => {
+		const testEl = document.createElement('moni-carousel') as MoniCarousel;
+		testEl.hideNav = true;
+		document.body.appendChild(testEl);
+		await testEl.updateComplete;
+
+		const prevBtn = testEl.shadowRoot?.querySelector('.nav-button.prev');
+		const nextBtn = testEl.shadowRoot?.querySelector('.nav-button.next');
+
+		expect(prevBtn).toBeNull();
+		expect(nextBtn).toBeNull();
+
+		testEl.remove();
+	});
+
+	it('provides enough scroll width to reach the last item (Firefox regression)', async () => {
+		const testEl = document.createElement('moni-carousel') as MoniCarousel;
+		testEl.items = Array.from({ length: 10 }, (_, i) => ({
+			title: `Item ${i}`,
+			img: 'https://picsum.photos/200'
+		}));
+		document.body.appendChild(testEl);
+		await testEl.updateComplete;
+
+		Object.defineProperty(testEl, '_containerWidth', {
+			value: 360,
+			configurable: true
+		});
+		await testEl.updateComplete;
+		await new Promise((r) => setTimeout(r, 50));
+
+		const containerStyle =
+			testEl.shadowRoot?.querySelector('.carousel-container')?.getAttribute('style') ?? '';
+		const itemSize = (testEl as any).itemSize as number;
+		const N = testEl.items.length;
+
+		const trackWidthMatch = containerStyle.match(/--carousel-track-width:\s*(\d+(?:\.\d+)?)px/);
+		const rightPaddingMatch = containerStyle.match(/--carousel-right-padding:\s*(\d+(?:\.\d+)?)px/);
+		const paddingLeftMatch = containerStyle.match(/--carousel-padding:\s*(\d+(?:\.\d+)?)px/);
+
+		expect(trackWidthMatch).not.toBeNull();
+		expect(rightPaddingMatch).not.toBeNull();
+
+		const trackWidth = parseFloat(trackWidthMatch![1]);
+		const rightPadding = parseFloat(rightPaddingMatch![1]);
+		const paddingLeft = paddingLeftMatch ? parseFloat(paddingLeftMatch[1]) : 16;
+
+		const expectedScrollWidth = trackWidth + paddingLeft + rightPadding;
+		const clientWidth = 360;
+		const lastSnapPoint = (N - 1) * itemSize;
+
+		expect(expectedScrollWidth - clientWidth).toBeGreaterThanOrEqual(lastSnapPoint);
+
+		testEl.remove();
+	});
+});