@moni-labs/moni-ui 0.2.0

package/src/components/moni-bottom-sheet.ts

@@ -0,0 +1,425 @@
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Visual-only bottom sheet. Renders a `<dialog>` that the consumer opens
+ * by calling `dialog.showModal()` from the light DOM. The `open` attribute
+ * mirrors that state.
+ *
+ * Attributes:
+ *  - open:  present → visibility on
+ *  - size:  small | medium (default) | large | auto
+ *  - modal: present → backdrop rendered
+ *  - title: heading text
+ *
+ * Slots:
+ *  - handle:  grab handle
+ *  - default: body
+ *  - footer:  action buttons
+ */
+@customElement('moni-bottom-sheet')
+export class MoniBottomSheet extends MoniElement {
+	@property({ type: Boolean, reflect: true }) open = false;
+	@property({ reflect: true })
+	size: 'small' | 'medium' | 'large' | 'auto' = 'medium';
+	@property({ type: Boolean, reflect: true }) modal = true;
+	@property({ reflect: true }) title = '';
+	@property({ reflect: true })
+	positioning: 'body' | 'fixed' | 'absolute' | 'static' = 'fixed';
+	@property({ reflect: true, attribute: 'expanded-height' })
+	expandedHeight = '85%';
+	@property({ reflect: true, attribute: 'max-width' })
+	maxWidth = '';
+
+	private _originalParent: Node | null = null;
+	private _originalSibling: Node | null = null;
+
+	@query('dialog') private _dialog!: HTMLDialogElement;
+
+	private _isDragging = false;
+	private _startY = 0;
+	private _currentTranslationY = 0;
+	private _sheetHeight = 0;
+	private _defaultHeight = 0;
+	private _justDragged = false;
+
+	private _getMaxHeightPx(): number {
+		const val = this.expandedHeight || '85%';
+		if (val.endsWith('%')) {
+			return window.innerHeight * (parseFloat(val) / 100);
+		}
+		if (val.endsWith('vh')) {
+			return window.innerHeight * (parseFloat(val) / 100);
+		}
+		if (val.endsWith('px')) {
+			return parseFloat(val);
+		}
+		return window.innerHeight * 0.85;
+	}
+
+	private _onPointerDown(e: PointerEvent) {
+		const target = e.target as HTMLElement;
+		if (!target.closest('.handle') && !target.closest('header')) return;
+
+		this._isDragging = true;
+		this._startY = e.clientY;
+		this._sheetHeight = this._dialog.getBoundingClientRect().height;
+		this._currentTranslationY = 0;
+
+		const isExpanded = this._dialog.classList.contains('expanded');
+		if (!isExpanded) {
+			this._defaultHeight = this._sheetHeight;
+		}
+
+		target.setPointerCapture(e.pointerId);
+		this._dialog.classList.add('dragging');
+	}
+
+	private _onPointerMove(e: PointerEvent) {
+		if (!this._isDragging) return;
+
+		const deltaY = e.clientY - this._startY;
+		const isExpanded = this._dialog.classList.contains('expanded');
+		const maxHeight = this._getMaxHeightPx();
+
+		if (isExpanded) {
+			if (deltaY > 0) {
+				// Dragging down from expanded: shrink height
+				const newHeight = this._sheetHeight - deltaY;
+				this._dialog.style.transform = '';
+				this._dialog.style.height = `${Math.max(0, newHeight)}px`;
+			} else {
+				// Pulling up from expanded: resistance
+				const newHeight = this._sheetHeight - deltaY * 0.2;
+				this._dialog.style.transform = '';
+				this._dialog.style.height = `${Math.min(maxHeight, newHeight)}px`;
+			}
+		} else {
+			if (deltaY > 0) {
+				// Dragging down from normal: translate down
+				this._currentTranslationY = deltaY;
+				this._dialog.style.transform = `translateY(${deltaY}px)`;
+				this._dialog.style.height = '';
+			} else {
+				// Dragging up from normal: grow height
+				const newHeight = this._sheetHeight - deltaY;
+				this._dialog.style.transform = '';
+				this._dialog.style.height = `${Math.min(maxHeight, newHeight)}px`;
+			}
+		}
+	}
+
+	private _onPointerUp(e: PointerEvent) {
+		if (!this._isDragging) return;
+
+		const target = e.target as HTMLElement;
+		target.releasePointerCapture(e.pointerId);
+		this._isDragging = false;
+		this._dialog.classList.remove('dragging');
+
+		const deltaY = e.clientY - this._startY;
+		if (Math.abs(deltaY) > 5) {
+			this._justDragged = true;
+			setTimeout(() => {
+				this._justDragged = false;
+			}, 50);
+		}
+		const isExpanded = this._dialog.classList.contains('expanded');
+		const maxHeight = this._getMaxHeightPx();
+
+		if (isExpanded) {
+			const finalHeight = this._sheetHeight - deltaY;
+			if (finalHeight < this._defaultHeight - 80) {
+				// Close completely
+				this._dialog.classList.remove('expanded');
+				this._dialog.style.transform = 'translateY(100%)';
+				this._dialog.style.height = '';
+				
+				const onTransitionEnd = () => {
+					this._dialog.removeEventListener('transitionend', onTransitionEnd);
+					this._dialog.style.transform = '';
+					this._dialog.style.height = '';
+					this.open = false;
+					this.dispatchEvent(new CustomEvent('close'));
+				};
+				this._dialog.addEventListener('transitionend', onTransitionEnd);
+				setTimeout(() => {
+					if (this.open) onTransitionEnd();
+				}, 300);
+			} else if (finalHeight < (maxHeight + this._defaultHeight) / 2) {
+				// Collapse back to normal height
+				this._dialog.classList.remove('expanded');
+				this._dialog.style.transform = '';
+				this._dialog.style.height = '';
+			} else {
+				// Snap back to expanded
+				this._dialog.style.transform = '';
+				this._dialog.style.height = '';
+			}
+		} else {
+			if (deltaY < 0) {
+				// Dragged up
+				const finalHeight = this._sheetHeight - deltaY;
+				const threshold = (maxHeight + this._sheetHeight) / 2;
+				if (finalHeight > threshold || -deltaY > 80) {
+					// Snap to expanded
+					this._dialog.classList.add('expanded');
+					this._dialog.style.transform = '';
+					this._dialog.style.height = '';
+				} else {
+					// Revert to normal
+					this._dialog.style.transform = '';
+					this._dialog.style.height = '';
+				}
+			} else {
+				// Dragged down
+				const threshold = Math.min(150, this._sheetHeight * 0.4);
+				if (this._currentTranslationY > threshold) {
+					this._dialog.style.transform = 'translateY(100%)';
+					this._dialog.style.height = '';
+					
+					const onTransitionEnd = () => {
+						this._dialog.removeEventListener('transitionend', onTransitionEnd);
+						this._dialog.style.transform = '';
+						this._dialog.style.height = '';
+						this.open = false;
+						this.dispatchEvent(new CustomEvent('close'));
+					};
+					this._dialog.addEventListener('transitionend', onTransitionEnd);
+					setTimeout(() => {
+						if (this.open) onTransitionEnd();
+					}, 300);
+				} else {
+					this._dialog.style.transform = '';
+					this._dialog.style.height = '';
+				}
+			}
+		}
+	}
+
+	private _onPointerCancel(e: PointerEvent) {
+		if (!this._isDragging) return;
+
+		const target = e.target as HTMLElement;
+		target.releasePointerCapture(e.pointerId);
+		this._isDragging = false;
+		this._dialog.classList.remove('dragging');
+		this._dialog.style.transform = '';
+		this._dialog.style.height = '';
+	}
+
+	private _onDialogClick(e: MouseEvent) {
+		if (this._justDragged) {
+			this._justDragged = false;
+			return;
+		}
+		if (!this.modal) return;
+		// Click on backdrop targets the dialog element itself. Clicks on children target the children.
+		if (e.target !== this._dialog) return;
+
+		this._dialog.style.transform = 'translateY(100%)';
+		this._dialog.style.height = '';
+
+		const onTransitionEnd = () => {
+			this._dialog.removeEventListener('transitionend', onTransitionEnd);
+			this._dialog.style.transform = '';
+			this._dialog.style.height = '';
+			this.open = false;
+			this.dispatchEvent(new CustomEvent('close'));
+		};
+		this._dialog.addEventListener('transitionend', onTransitionEnd);
+		setTimeout(() => {
+			if (this.open) onTransitionEnd();
+		}, 300);
+	}
+
+	override updated(changed: Map<string, unknown>) {
+		super.updated(changed);
+		if (changed.has('expandedHeight')) {
+			this.style.setProperty('--moni-bottom-sheet-expanded-height', this.expandedHeight);
+		}
+		if (changed.has('maxWidth')) {
+			this.style.setProperty('--moni-bottom-sheet-max-width', this.maxWidth || '100%');
+		}
+		if (changed.has('open')) {
+			if (this.open) {
+				if (this.positioning === 'body' && this.parentNode !== document.body) {
+					this._originalParent = this.parentNode;
+					this._originalSibling = this.nextSibling;
+					document.body.appendChild(this);
+				}
+			} else {
+				if (this._dialog) {
+					this._dialog.classList.remove('expanded');
+				}
+				if (this.positioning === 'body' && this._originalParent && this.parentNode === document.body) {
+					this._originalParent.insertBefore(this, this._originalSibling);
+					this._originalParent = null;
+					this._originalSibling = null;
+				}
+			}
+		}
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this.parentNode === document.body && this.positioning === 'body' && this._originalParent) {
+			this._originalParent.insertBefore(this, this._originalSibling);
+		}
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: contents;
+			}
+
+			dialog {
+				--_padding: 1rem;
+				display: block;
+				visibility: hidden;
+				border: none;
+				opacity: 0;
+				box-shadow: var(--elevate3);
+				color: var(--on-surface);
+				background-color: var(--surface);
+				padding: var(--_padding);
+				z-index: 100;
+				inline-size: 100%;
+				max-inline-size: var(--moni-bottom-sheet-max-width, 100%);
+				margin-inline: auto;
+				block-size: auto;
+				max-block-size: var(--moni-bottom-sheet-expanded-height, 85%);
+				min-inline-size: auto;
+				border-radius: 1.75rem 1.75rem 0 0;
+				overflow-y: auto;
+				transition:
+					transform var(--speed3),
+					height var(--speed3),
+					opacity var(--speed3);
+				transform: translateY(100%);
+				outline: none;
+			}
+
+			dialog[open] {
+				visibility: visible;
+				opacity: 1;
+				transform: translateY(0);
+			}
+
+			dialog.fixed {
+				position: fixed;
+				inset: auto 0 0 0;
+			}
+
+			dialog.absolute {
+				position: absolute;
+				inset: auto 0 0 0;
+			}
+
+			dialog.static {
+				position: relative;
+				inset: auto;
+				transform: none !important;
+				opacity: 1 !important;
+				visibility: visible !important;
+				display: none;
+			}
+			dialog.static[open] {
+				display: block;
+			}
+
+			dialog.dragging {
+				transition: none !important;
+			}
+
+			dialog.small {
+				block-size: 16rem;
+			}
+			dialog.medium {
+				block-size: 24rem;
+			}
+			dialog.large {
+				block-size: 32rem;
+			}
+			dialog.auto {
+				block-size: auto;
+			}
+
+			dialog.expanded {
+				block-size: var(--moni-bottom-sheet-expanded-height, 85%) !important;
+			}
+
+			header,
+			footer {
+				display: grid;
+				align-content: center;
+				border-radius: 0;
+				padding: 0;
+			}
+			header {
+				min-block-size: 3rem;
+				padding-block-start: 0.5rem;
+				cursor: grab;
+				touch-action: none;
+				user-select: none;
+			}
+			header:active {
+				cursor: grabbing;
+			}
+			footer {
+				min-block-size: 3.5rem;
+			}
+
+			/* M3 spec: the drag handle is a 4dp tall x 32dp wide pill at
+			   the top center of the sheet. Color is on-surface-variant with
+			   40% opacity for reduced emphasis. */
+			.handle {
+				inline-size: 2rem;
+				block-size: 0.25rem;
+				background: var(--on-surface-variant);
+				opacity: 0.4;
+				border-radius: 999px;
+				margin: 0.5rem auto 1rem;
+				cursor: grab;
+				touch-action: none;
+			}
+			.handle:active {
+				cursor: grabbing;
+			}
+		`
+	];
+
+	override render() {
+		const posClass = this.positioning === 'body' ? 'fixed' : this.positioning;
+		const dialogClasses = `${this.size} ${posClass}`;
+
+		return html`<dialog
+			part="dialog"
+			?open=${this.open}
+			class=${dialogClasses}
+			@click=${this._onDialogClick}
+			@pointerdown=${this._onPointerDown}
+			@pointermove=${this._onPointerMove}
+			@pointerup=${this._onPointerUp}
+			@pointercancel=${this._onPointerCancel}
+		>
+			<div class="handle" aria-hidden="true"></div>
+			<header part="header">
+				<slot name="handle">${this.title}</slot>
+			</header>
+			<div part="content"><slot></slot></div>
+			<footer part="footer"><slot name="footer"></slot></footer>
+		</dialog>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-bottom-sheet': MoniBottomSheet;
+	}
+}
+
+export default MoniBottomSheet;

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

@@ -0,0 +1,148 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-button.js';
+import './moni-button-group.js';
+import type { MoniButtonGroup } from './moni-button-group.js';
+import type { MoniButton } from './moni-button.js';
+
+describe('moni-button-group', () => {
+	let group: MoniButtonGroup;
+
+	beforeEach(() => {
+		group = document.createElement('moni-button-group') as MoniButtonGroup;
+		document.body.appendChild(group);
+	});
+
+	afterEach(() => {
+		group.remove();
+	});
+
+	it('propagates size to children buttons', async () => {
+		group.size = 'large';
+		const btn1 = document.createElement('moni-button') as MoniButton;
+		const btn2 = document.createElement('moni-button') as MoniButton;
+		group.appendChild(btn1);
+		group.appendChild(btn2);
+
+		await group.updateComplete;
+		await btn1.updateComplete;
+		await btn2.updateComplete;
+
+		expect(btn1.getAttribute('size')).toBe('large');
+		expect(btn2.getAttribute('size')).toBe('large');
+	});
+
+	it('sets appropriate shapes for connected variant', async () => {
+		group.variant = 'connected';
+		const btn1 = document.createElement('moni-button') as MoniButton;
+		const btn2 = document.createElement('moni-button') as MoniButton;
+		const btn3 = document.createElement('moni-button') as MoniButton;
+		group.appendChild(btn1);
+		group.appendChild(btn2);
+		group.appendChild(btn3);
+
+		await group.updateComplete;
+		await btn1.updateComplete;
+		await btn2.updateComplete;
+		await btn3.updateComplete;
+
+		expect(btn1.getAttribute('shape')).toBe('left-round-flat');
+		expect(btn2.getAttribute('shape')).toBe('no-round');
+		expect(btn3.getAttribute('shape')).toBe('right-round-flat');
+	});
+
+	it('uses round shapes for connected variant when gap is set', async () => {
+		group.variant = 'connected';
+		group.gap = '8px';
+		const btn1 = document.createElement('moni-button') as MoniButton;
+		const btn2 = document.createElement('moni-button') as MoniButton;
+		group.appendChild(btn1);
+		group.appendChild(btn2);
+
+		await group.updateComplete;
+		await btn1.updateComplete;
+		await btn2.updateComplete;
+
+		expect(btn1.getAttribute('shape')).toBe('left-round');
+		expect(btn2.getAttribute('shape')).toBe('right-round');
+	});
+
+	it('manages active toggles in single-select mode (multi=false)', async () => {
+		const btn1 = document.createElement('moni-button') as MoniButton;
+		const btn2 = document.createElement('moni-button') as MoniButton;
+		group.appendChild(btn1);
+		group.appendChild(btn2);
+
+		await group.updateComplete;
+		await btn1.updateComplete;
+		await btn2.updateComplete;
+
+		// Click btn1
+		btn1.click();
+		await btn1.updateComplete;
+		await btn2.updateComplete;
+		expect(btn1.active).toBe(true);
+		expect(btn2.active).toBe(false);
+
+		// Click btn2
+		btn2.click();
+		await btn1.updateComplete;
+		await btn2.updateComplete;
+		expect(btn1.active).toBe(false);
+		expect(btn2.active).toBe(true);
+	});
+
+	it('manages active toggles in multi-select mode (multi=true)', async () => {
+		group.multi = true;
+		const btn1 = document.createElement('moni-button') as MoniButton;
+		const btn2 = document.createElement('moni-button') as MoniButton;
+		group.appendChild(btn1);
+		group.appendChild(btn2);
+
+		await group.updateComplete;
+		await btn1.updateComplete;
+		await btn2.updateComplete;
+
+		btn1.click();
+		btn2.click();
+		await btn1.updateComplete;
+		await btn2.updateComplete;
+		expect(btn1.active).toBe(true);
+		expect(btn2.active).toBe(true);
+	});
+
+	it('renders role="group" on the container by default (M3 a11y)', async () => {
+		await group.updateComplete;
+		const container = group.shadowRoot?.querySelector('[part="container"]');
+		expect(container?.getAttribute('role')).toBe('group');
+	});
+
+	it('supports role="toolbar" override for app-action groups', async () => {
+		group.role = 'toolbar';
+		await group.updateComplete;
+		const container = group.shadowRoot?.querySelector('[part="container"]');
+		expect(container?.getAttribute('role')).toBe('toolbar');
+	});
+
+	it('forwards aria-label to the container', async () => {
+		group.label = 'Text formatting';
+		await group.updateComplete;
+		const container = group.shadowRoot?.querySelector('[part="container"]');
+		expect(container?.getAttribute('aria-label')).toBe('Text formatting');
+	});
+
+	it('forwards aria-labelledby to the container', async () => {
+		group.labelledBy = 'group-title';
+		await group.updateComplete;
+		const container = group.shadowRoot?.querySelector('[part="container"]');
+		expect(container?.getAttribute('aria-labelledby')).toBe('group-title');
+	});
+
+	it('does not emit aria-label when label is empty (M3 a11y cleanliness)', async () => {
+		await group.updateComplete;
+		const container = group.shadowRoot?.querySelector('[part="container"]');
+		// aria-label attribute should be either absent or empty string;
+		// using `nothing` in lit removes the attribute entirely.
+		const aria = container?.getAttribute('aria-label');
+		expect(aria === null || aria === '').toBe(true);
+	});
+});