@moni-labs/moni-ui 0.2.0

package/src/components/moni-nav-item.ts

@@ -0,0 +1,243 @@
+import { html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+
+/**
+ * Visual-only navigation item. Renders an `<a>` styled with the BeerCSS
+ * nav link helper.
+ *
+ * Attributes:
+ *  - href:     link target
+ *  - target:   link target
+ *  - icon:     Material Symbols name
+ *  - label:    link text
+ *  - active:   present → active style
+ */
+@customElement('moni-nav-item')
+export class MoniNavItem extends MoniElement {
+	@property({ reflect: true }) href = '#';
+	@property({ reflect: true }) target = '';
+	@property({ reflect: true }) icon = '';
+	@property({ reflect: true }) label = '';
+	@property({ type: Boolean, reflect: true }) active = false;
+	@property({ reflect: true }) placement = 'top';
+	@property({ reflect: true }) variant = 'rail';
+	@property({ reflect: true }) layout = 'auto';
+
+	@state()
+	private _isMediumScreen = false;
+
+	private _query = typeof window !== 'undefined' && typeof window.matchMedia === 'function'
+		? window.matchMedia('(min-width: 601px)')
+		: null;
+
+	override connectedCallback() {
+		super.connectedCallback();
+		if (this._query) {
+			this._query.addEventListener('change', this._handleQueryChange);
+			this._isMediumScreen = this._query.matches;
+		}
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		if (this._query) {
+			this._query.removeEventListener('change', this._handleQueryChange);
+		}
+	}
+
+	private _handleQueryChange = (e: MediaQueryListEvent) => {
+		this._isMediumScreen = e.matches;
+	};
+
+	get computedLayout(): 'vertical' | 'horizontal' {
+		if (this.placement === 'left' || this.placement === 'right') {
+			return this.variant === 'drawer' ? 'horizontal' : 'vertical';
+		}
+		if (this.layout === 'auto') {
+			return this._isMediumScreen ? 'horizontal' : 'vertical';
+		}
+		return this.layout as 'vertical' | 'horizontal';
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: inline-flex;
+				font-family: var(--font);
+				inline-size: 100%;
+				justify-content: center;
+				box-sizing: border-box;
+			}
+
+			a {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				text-decoration: none;
+				color: var(--on-surface-variant);
+				cursor: pointer;
+				inline-size: 100%;
+				transition: background-color var(--speed2), color var(--speed2);
+				outline: none;
+				position: relative;
+				box-sizing: border-box;
+			}
+
+			/* ─── State Layers (Hover/Focus/Active) ─── */
+			a:hover:not(.active) .active-indicator {
+				background-color: var(--surface-container-high, rgba(0, 0, 0, 0.08));
+			}
+
+			/* ─── Vertical Layout Styles ─── */
+			a[data-layout='vertical'] {
+				flex-direction: column;
+				gap: 0.25rem; /* 4dp space between icon and label */
+				padding: 0.5rem 0;
+				min-block-size: 4rem; /* 64dp height */
+			}
+
+			a[data-layout='vertical'] .active-indicator {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				min-inline-size: 3.5rem; /* 56px */
+				block-size: 2rem; /* 32px */
+				border-radius: 1rem; /* fully rounded */
+				transition: background-color var(--speed2), color var(--speed2);
+			}
+
+			a[data-layout='vertical'].active .active-indicator {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+
+			a[data-layout='vertical'] .label {
+				font-size: 0.75rem; /* 12dp label size */
+				font-weight: 500;
+				transition: color var(--speed2);
+				color: var(--on-surface-variant);
+				text-align: center;
+			}
+
+			a[data-layout='vertical'].active .label {
+				color: var(--secondary);
+				font-weight: 600;
+			}
+
+			/* ─── Horizontal Layout Styles ─── */
+			a[data-layout='horizontal'] {
+				flex-direction: row;
+				padding: 0.5rem 0.75rem;
+				min-block-size: 4rem; /* 64dp height */
+			}
+
+			a[data-layout='horizontal'] .active-indicator {
+				display: inline-flex;
+				align-items: center;
+				gap: 0.5rem; /* 8dp gap between icon and label */
+				padding: 0.375rem 1rem;
+				border-radius: 1.25rem; /* fully rounded */
+				transition: background-color var(--speed2), color var(--speed2);
+				min-block-size: 2rem;
+				box-sizing: border-box;
+			}
+
+			a[data-layout='horizontal'].active .active-indicator {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+
+			a[data-layout='horizontal'] .label {
+				font-size: 0.875rem; /* 14dp label size */
+				font-weight: 500;
+				color: var(--on-surface-variant);
+				transition: color var(--speed2);
+			}
+
+			a[data-layout='horizontal'].active .label {
+				color: var(--on-secondary-container);
+				font-weight: 600;
+			}
+
+			/* Drawer variant specific tweaks */
+			:host([variant='drawer']) a[data-layout='horizontal'] {
+				justify-content: flex-start;
+				padding: 0.5rem 1rem;
+			}
+			:host([variant='drawer']) a[data-layout='horizontal'] .active-indicator {
+				width: 100%;
+				background-color: transparent;
+			}
+			:host([variant='drawer']) a[data-layout='horizontal'].active .active-indicator {
+				background-color: var(--secondary-container);
+			}
+
+			/* Icon Sizes and Helpers */
+			.icon-container {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				inline-size: 1.5rem;
+				block-size: 1.5rem;
+			}
+
+			.icon-container moni-icon,
+			.icon-container ::slotted(moni-icon),
+			.icon-container i {
+				font-size: 1.5rem; /* 24dp */
+				inline-size: 1.5rem;
+				block-size: 1.5rem;
+			}
+		`
+	];
+
+	override render() {
+		const isHorizontal = this.computedLayout === 'horizontal';
+
+		const iconEl = html`
+			<div class="icon-container" part="icon">
+				${this.icon
+					? html`<moni-icon name="${this.icon}"></moni-icon>`
+					: html`<slot name="icon"></slot>`}
+			</div>
+		`;
+
+		const labelEl = html`
+			<span class="label" part="label"><slot>${this.label}</slot></span>
+		`;
+
+		return html`<a
+			href=${this.href || '#'}
+			target=${ifDefined(this.target || undefined)}
+			class=${this.active ? 'active' : ''}
+			data-layout=${this.computedLayout}
+			part="item"
+		>
+			${isHorizontal
+				? html`
+					<div class="active-indicator" part="indicator">
+						${iconEl}
+						${labelEl}
+					</div>
+				`
+				: html`
+					<div class="active-indicator" part="indicator">
+						${iconEl}
+					</div>
+					${labelEl}
+				`}
+		</a>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-nav-item': MoniNavItem;
+	}
+}
+
+export default MoniNavItem;

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

@@ -0,0 +1,139 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-nav.js';
+import './moni-nav-item.js';
+import type { MoniNav } from './moni-nav.js';
+import type { MoniNavItem } from './moni-nav-item.js';
+
+describe('moni-nav / moni-nav-item', () => {
+	let el: MoniNav;
+
+	beforeEach(() => {
+		el = document.createElement('moni-nav') as MoniNav;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders a <nav> with a slot', async () => {
+		await el.updateComplete;
+		const nav = el.shadowRoot?.querySelector('nav');
+		const slot = el.shadowRoot?.querySelector('slot');
+		expect(nav).toBeTruthy();
+		expect(slot).toBeTruthy();
+	});
+
+	it('applies the placement class to the nav', async () => {
+		el.placement = 'bottom';
+		await el.updateComplete;
+		const nav = el.shadowRoot?.querySelector('nav');
+		expect(nav?.classList.contains('bottom')).toBe(true);
+	});
+
+	it('applies the variant class (rail/drawer)', async () => {
+		el.placement = 'left';
+		el.variant = 'drawer';
+		await el.updateComplete;
+		const nav = el.shadowRoot?.querySelector('nav');
+		expect(nav?.classList.contains('left')).toBe(true);
+		expect(nav?.classList.contains('max')).toBe(true);
+	});
+
+	it('reflects the placement attribute', async () => {
+		el.placement = 'right';
+		await el.updateComplete;
+		expect(el.getAttribute('placement')).toBe('right');
+	});
+
+	it('reflects the variant attribute', async () => {
+		el.variant = 'rail';
+		await el.updateComplete;
+		expect(el.getAttribute('variant')).toBe('rail');
+	});
+
+	it('forwards icon, label and active to nav-item', async () => {
+		const item = document.createElement('moni-nav-item') as MoniNavItem;
+		item.icon = 'home';
+		item.label = 'Home';
+		item.active = true;
+		el.appendChild(item);
+		await item.updateComplete;
+		expect(item.getAttribute('icon')).toBe('home');
+		expect(item.getAttribute('label')).toBe('Home');
+		expect(item.hasAttribute('active')).toBe(true);
+
+		const a = item.shadowRoot?.querySelector('a');
+		expect(a?.classList.contains('active')).toBe(true);
+		expect(a?.querySelector('moni-icon')).toBeTruthy();
+	});
+
+	it('forwards href and target to the inner <a>', async () => {
+		const item = document.createElement('moni-nav-item') as MoniNavItem;
+		item.href = '/home';
+		item.target = '_blank';
+		el.appendChild(item);
+		await item.updateComplete;
+		const a = item.shadowRoot?.querySelector('a');
+		expect(a?.getAttribute('href')).toBe('/home');
+		expect(a?.getAttribute('target')).toBe('_blank');
+	});
+
+	it('propagates layout property to items and sets computed layout', async () => {
+		const item = document.createElement('moni-nav-item') as MoniNavItem;
+		el.appendChild(item);
+		el.layout = 'horizontal';
+		await el.updateComplete;
+		await item.updateComplete;
+
+		expect(item.getAttribute('layout')).toBe('horizontal');
+		expect(item.computedLayout).toBe('horizontal');
+
+		const a = item.shadowRoot?.querySelector('a');
+		expect(a?.getAttribute('data-layout')).toBe('horizontal');
+	});
+
+	it('modal drawer renders a scrim and dialog semantics', async () => {
+		el.placement = 'left';
+		el.variant = 'drawer';
+		el.modal = true;
+		await el.updateComplete;
+
+		const scrim = el.shadowRoot?.querySelector('[part="scrim"]');
+		expect(scrim).toBeTruthy();
+
+		const nav = el.shadowRoot?.querySelector('nav');
+		expect(nav?.getAttribute('role')).toBe('dialog');
+		expect(nav?.getAttribute('aria-modal')).toBe('true');
+		expect(nav?.getAttribute('aria-expanded')).toBe('true');
+	});
+
+	it('modal drawer closes when the scrim is clicked', async () => {
+		el.placement = 'left';
+		el.variant = 'drawer';
+		el.modal = true;
+		el.open = true;
+		await el.updateComplete;
+
+		const scrim = el.shadowRoot?.querySelector('[part="scrim"]') as HTMLElement;
+		scrim.click();
+		await el.updateComplete;
+
+		expect(el.open).toBe(false);
+		const nav = el.shadowRoot?.querySelector('nav');
+		expect(nav?.getAttribute('aria-expanded')).toBe('false');
+	});
+
+	it('modal drawer closes on Escape key', async () => {
+		el.placement = 'left';
+		el.variant = 'drawer';
+		el.modal = true;
+		el.open = true;
+		await el.updateComplete;
+
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+		await el.updateComplete;
+
+		expect(el.open).toBe(false);
+	});
+});

package/src/components/moni-nav.ts

@@ -0,0 +1,266 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Visual-only navigation. Renders a `<nav>` styled with BeerCSS helpers.
+ *
+ * M3 navigation patterns (`m3-docs/components/navigation-*`):
+ *  - Navigation bar: placement="bottom"
+ *  - Navigation rail: placement="left|right" variant="rail"
+ *  - Navigation drawer: placement="left|right" variant="drawer"
+ *    * Standard drawer: always visible, no scrim (default)
+ *    * Modal drawer: `modal` toggles open/closed, renders a scrim and
+ *      traps focus while open. See `m3-docs/components/navigation-drawer/specs.md`.
+ *
+ * Attributes:
+ *  - placement: top (default) | bottom | left | right
+ *  - variant:   rail | drawer
+ *  - modal:     present → drawer is modal (requires variant="drawer")
+ *  - open:      present → modal drawer is open (default true)
+ *  - layout:    vertical | horizontal | auto (default)
+ *
+ * Slots:
+ *  - default: <moni-nav-item> children
+ *  - header:  content above nav items (drawer only)
+ *  - footer:  content below nav items (drawer only)
+ */
+@customElement('moni-nav')
+export class MoniNav extends MoniElement {
+	@property({ reflect: true })
+	placement: 'top' | 'bottom' | 'left' | 'right' = 'top';
+	@property({ reflect: true })
+	variant: 'rail' | 'drawer' = 'rail';
+	@property({ type: Boolean, reflect: true }) modal = false;
+	@property({ type: Boolean, reflect: true }) open = true;
+	@property({ reflect: true })
+	layout: 'vertical' | 'horizontal' | 'auto' = 'auto';
+
+	override connectedCallback() {
+		super.connectedCallback();
+		this._onKeydown = this._onKeydown.bind(this);
+		document.addEventListener('keydown', this._onKeydown);
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		document.removeEventListener('keydown', this._onKeydown);
+	}
+
+	private _onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape' && this.modal && this.open) {
+			this.open = false;
+		}
+	}
+
+	private _closeModal() {
+		if (this.modal) {
+			this.open = false;
+		}
+	}
+
+	override updated(changed: Map<string, unknown>) {
+		if (
+			changed.has('placement') ||
+			changed.has('variant') ||
+			changed.has('layout') ||
+			changed.has('modal') ||
+			changed.has('open')
+		) {
+			this._propagateToItems();
+		}
+	}
+
+	private _propagateToItems = () => {
+		const items = this.querySelectorAll('moni-nav-item');
+		items.forEach(item => {
+			item.setAttribute('placement', this.placement);
+			item.setAttribute('variant', this.variant);
+			item.setAttribute('layout', this.layout);
+		});
+	};
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				/* Block so the host establishes a layout context for fixed
+				   descendants. The inner <nav> still handles all positioning. */
+				display: block;
+				font-family: var(--font);
+				inline-size: 100%;
+			}
+
+			nav {
+				display: flex;
+				gap: 0.5rem;
+				padding: 0 1rem;
+				background-color: var(--surface-container);
+				color: var(--on-surface);
+				align-items: center;
+				box-sizing: border-box;
+			}
+
+			:host([placement='top']) nav,
+			:host([placement='bottom']) nav {
+				flex-direction: row;
+				justify-content: space-around;
+				inline-size: 100%;
+			}
+
+			:host([placement='bottom']) nav {
+				position: fixed;
+				inset-block-end: 0;
+				inset-inline: 0;
+				z-index: 100;
+				background-color: var(--surface-container);
+				min-block-size: 4rem; /* 64dp flexible nav bar */
+				padding-block-end: env(safe-area-inset-bottom, 0px);
+			}
+
+			:host([placement='top']) nav {
+				position: sticky;
+				inset-block-start: 0;
+				z-index: 100;
+				background-color: var(--surface-container);
+				min-block-size: 4rem; /* 64dp flexible nav bar */
+			}
+
+			:host([placement='left']) nav,
+			:host([placement='right']) nav {
+				flex-direction: column;
+				block-size: 100dvh;
+				padding-block: 1rem;
+			}
+
+			:host([placement='left'][variant='rail']) nav,
+			:host([placement='right'][variant='rail']) nav {
+				min-inline-size: 6rem;
+			}
+
+			:host([placement='left'][variant='drawer']) nav,
+			:host([placement='right'][variant='drawer']) nav {
+				min-inline-size: 16rem;
+			}
+
+			:host([placement='left']) nav {
+				position: fixed;
+				inset-inline-start: 0;
+				inset-block: 0;
+				z-index: 100;
+			}
+
+			:host([placement='right']) nav {
+				position: fixed;
+				inset-inline-end: 0;
+				inset-block: 0;
+				z-index: 100;
+			}
+
+			/* Modal drawer scrim/backdrop */
+			.scrim {
+				display: none;
+				position: fixed;
+				inset: 0;
+				z-index: 99;
+				background-color: var(--scrim);
+				opacity: 0;
+				transition: opacity var(--speed2);
+			}
+
+			:host([variant='drawer'][modal]) .scrim {
+				display: block;
+			}
+
+			:host([variant='drawer'][modal][open]) .scrim {
+				opacity: 1;
+			}
+
+			/* Modal drawer closed state slides off-screen */
+			:host([placement='left'][variant='drawer'][modal]:not([open])) nav {
+				transform: translateX(-100%);
+			}
+			:host([placement='right'][variant='drawer'][modal]:not([open])) nav {
+				transform: translateX(100%);
+			}
+
+			:host([variant='drawer'][modal]) nav {
+				transition: transform var(--speed3) cubic-bezier(0.2, 0, 0, 1);
+			}
+
+			/* Nav items inside horizontal placements stretch to fill. */
+			:host([placement='top']) ::slotted(moni-nav-item),
+			:host([placement='bottom']) ::slotted(moni-nav-item) {
+				flex: 1;
+				min-inline-size: 0;
+			}
+
+			/* Slots header/footer in vertical nav */
+			:host([placement='left']) ::slotted([slot='header']),
+			:host([placement='right']) ::slotted([slot='header']) {
+				padding-block: 1rem;
+				inline-size: 100%;
+			}
+			:host([placement='left']) ::slotted([slot='footer']),
+			:host([placement='right']) ::slotted([slot='footer']) {
+				margin-block-start: auto;
+				padding-block: 1rem;
+				inline-size: 100%;
+			}
+
+			@media only screen and (max-width: 600px) {
+				nav {
+					position: fixed !important;
+					inset-block-end: 0 !important;
+					inset-inline: 0 !important;
+					z-index: 100 !important;
+					background-color: var(--surface-container) !important;
+					min-block-size: 4rem !important;
+					padding-block-end: env(safe-area-inset-bottom, 0px) !important;
+					flex-direction: row !important;
+					justify-content: space-around !important;
+					block-size: auto !important;
+					inline-size: 100% !important;
+				}
+				::slotted(moni-nav-item) {
+					flex: 1 !important;
+					min-inline-size: 0 !important;
+				}
+			}
+		`,
+	];
+
+	override render() {
+		const isModalDrawer = this.variant === 'drawer' && this.modal;
+		const classes = [this.placement, this.variant === 'drawer' ? 'max' : '']
+			.filter(Boolean)
+			.join(' ');
+		const scrim = isModalDrawer
+			? html`<div
+					class="scrim"
+					part="scrim"
+					@click=${this._closeModal}
+					aria-hidden="true"
+				></div>`
+			: '';
+		return html`${scrim}<nav
+				class=${classes}
+				part="nav"
+				role=${isModalDrawer ? 'dialog' : undefined}
+				aria-modal=${isModalDrawer ? 'true' : undefined}
+				aria-expanded=${isModalDrawer ? (this.open ? 'true' : 'false') : undefined}
+			>
+				<slot name="header"></slot>
+				<slot @slotchange=${this._propagateToItems}></slot>
+				<slot name="footer"></slot>
+			</nav>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-nav': MoniNav;
+	}
+}
+
+export default MoniNav;