@moni-labs/moni-ui 0.2.0

package/src/components/moni-list-item.test.ts

@@ -0,0 +1,114 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-list-item.js';
+import type { MoniListItem } from './moni-list-item.js';
+
+describe('moni-list-item (P5.3 — recreated)', () => {
+	let el: MoniListItem;
+
+	beforeEach(() => {
+		el = document.createElement('moni-list-item') as MoniListItem;
+		el.textContent = 'Item headline';
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('defaults to lines=1', async () => {
+		await el.updateComplete;
+		expect(el.lines).toBe(1);
+		expect(el.getAttribute('lines')).toBe('1');
+	});
+
+	it('renders the headline slot', async () => {
+		await el.updateComplete;
+		const headline = el.shadowRoot?.querySelector('[part="headline"]');
+		expect(headline).toBeTruthy();
+		const slot = headline?.querySelector('slot') as HTMLSlotElement | null;
+		const assigned = slot?.assignedNodes({ flatten: true }) ?? [];
+		const text = assigned.map((n) => n.textContent ?? '').join('').trim();
+		expect(text).toBe('Item headline');
+	});
+
+	it('does not render supporting/meta slots when lines=1', async () => {
+		await el.updateComplete;
+		const supporting = el.shadowRoot?.querySelector('[part="supporting"]');
+		const meta = el.shadowRoot?.querySelector('[part="meta"]');
+		expect(supporting).toBeFalsy();
+		expect(meta).toBeFalsy();
+	});
+
+	it('renders supporting slot when lines=2', async () => {
+		el.lines = 2;
+		const sup = document.createElement('span');
+		sup.setAttribute('slot', 'supporting');
+		sup.textContent = 'Supporting text';
+		el.appendChild(sup);
+		await el.updateComplete;
+		const supporting = el.shadowRoot?.querySelector('[part="supporting"]');
+		expect(supporting).toBeTruthy();
+	});
+
+	it('renders meta slot when lines=3', async () => {
+		el.lines = 3;
+		const sup = document.createElement('span');
+		sup.setAttribute('slot', 'supporting');
+		sup.textContent = 'Line 2';
+		el.appendChild(sup);
+		const meta = document.createElement('span');
+		meta.setAttribute('slot', 'meta');
+		meta.textContent = 'Line 3';
+		el.appendChild(meta);
+		await el.updateComplete;
+		const supporting = el.shadowRoot?.querySelector('[part="supporting"]');
+		const metaEl = el.shadowRoot?.querySelector('[part="meta"]');
+		expect(supporting).toBeTruthy();
+		expect(metaEl).toBeTruthy();
+	});
+
+	it('reflects active and disabled attributes', async () => {
+		el.active = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('active')).toBe(true);
+
+		el.disabled = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('disabled')).toBe(true);
+	});
+
+	it('renders an avatar when the avatar attribute is set', async () => {
+		el.avatar = 'https://example.com/avatar.png';
+		await el.updateComplete;
+		const avatar = el.shadowRoot?.querySelector('[part="avatar"]');
+		expect(avatar).toBeTruthy();
+	});
+
+	it('renders a leading icon when the icon attribute is set', async () => {
+		el.icon = 'home';
+		await el.updateComplete;
+		const leading = el.shadowRoot?.querySelector('[part="leading"]');
+		expect(leading).toBeTruthy();
+		const moniIcon = leading?.querySelector('moni-icon');
+		expect(moniIcon?.getAttribute('name')).toBe('home');
+	});
+
+	it('renders a trailing icon when the trailing-icon attribute is set', async () => {
+		el.setAttribute('trailing-icon', 'more_vert');
+		await el.updateComplete;
+		const trailing = el.shadowRoot?.querySelector('[part="trailing"]');
+		expect(trailing).toBeTruthy();
+	});
+
+	it('renders an <a> wrapper when href is set, otherwise the row is inline', async () => {
+		await el.updateComplete;
+		let row = el.shadowRoot?.querySelector('a');
+		expect(row).toBeFalsy();
+
+		el.href = '/profile';
+		await el.updateComplete;
+		row = el.shadowRoot?.querySelector('a');
+		expect(row).toBeTruthy();
+		expect(row?.getAttribute('href')).toBe('/profile');
+	});
+});

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

@@ -0,0 +1,222 @@
+import { html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+
+/**
+ * Material 3 List Item (`m3-docs/components/lists/specs.md`).
+ *
+ * One row in a `<moni-list>`. Supports up to 3 lines of text:
+ *  - line 1: headline (required).
+ *  - line 2: supporting text (optional).
+ *  - line 3: trailing meta text (optional).
+ *
+ * Plus optional leading/trailing icons or avatars.
+ *
+ * M3 measurements:
+ *  - Min height: 56dp (1-line), 72dp (2-line), 88dp (3-line).
+ *  - Horizontal padding: 16dp.
+ *  - Vertical padding: 8dp top/bottom (so 1-line is 56dp tall).
+ *  - Leading icon/avatar size: 24dp.
+ *
+ * Attributes:
+ *  - lines: 1 (default) | 2 | 3
+ *  - icon:   Material Symbols name (leading icon)
+ *  - avatar: URL for a leading image
+ *  - trailing-icon: Material Symbols name (trailing icon)
+ *  - active:   present → background uses secondary-container
+ *  - disabled: present → opacity 38%, cursor not-allowed
+ *  - href:     present → renders as <a>; otherwise <button>
+ *
+ * Slots:
+ *  - default:   headline (line 1)
+ *  - supporting:line 2 text
+ *  - meta:      line 3 text
+ *  - trailing-meta: trailing small text (right side)
+ */
+@customElement('moni-list-item')
+export class MoniListItem extends MoniElement {
+	@property({ reflect: true })
+	lines: 1 | 2 | 3 = 1;
+	@property({ reflect: true }) icon = '';
+	@property({ reflect: true }) avatar = '';
+	@property({ reflect: true, attribute: 'trailing-icon' })
+	trailingIcon = '';
+	@property({ type: Boolean, reflect: true }) active = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+	@property({ reflect: true }) href = '';
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: flex;
+				align-items: center;
+				gap: 1rem;
+				padding: 0.5rem 1rem;
+				min-block-size: 3.5rem;
+				color: var(--on-surface);
+				background-color: transparent;
+				text-decoration: none;
+				cursor: pointer;
+				position: relative;
+				font-family: var(--font);
+				transition: background-color var(--speed2);
+			}
+
+			:host([active]) {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+
+			:host([disabled]) {
+				opacity: 0.38;
+				pointer-events: none;
+				cursor: not-allowed;
+			}
+
+			:host(:not(:last-child)) {
+				border-block-end: 0.0625rem solid var(--outline-variant);
+			}
+
+			:host([lines='2']) {
+				min-block-size: 4.5rem;
+			}
+			:host([lines='3']) {
+				min-block-size: 5.5rem;
+			}
+
+			.leading,
+			.trailing {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				flex: none;
+			}
+
+			.leading-icon {
+				font-size: 1.5rem;
+				color: var(--on-surface-variant);
+			}
+			:host([active]) .leading-icon {
+				color: var(--on-secondary-container);
+			}
+
+			.avatar {
+				inline-size: 2.5rem;
+				block-size: 2.5rem;
+				border-radius: 50%;
+				background-color: var(--surface-container);
+				background-size: cover;
+				background-position: center;
+			}
+
+			.text {
+				flex: auto;
+				min-inline-size: 0;
+				display: flex;
+				flex-direction: column;
+				gap: 0.125rem;
+			}
+
+			.headline {
+				font-size: 1rem;
+				line-height: 1.5rem;
+				font-weight: 500;
+				color: inherit;
+				margin: 0;
+				padding: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			.supporting,
+			.meta {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 400;
+				color: var(--on-surface-variant);
+				margin: 0;
+				padding: 0;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			:host([active]) .supporting,
+			:host([active]) .meta {
+				color: var(--on-secondary-container);
+			}
+
+			.trailing-meta {
+				font-size: 0.75rem;
+				color: var(--on-surface-variant);
+				white-space: nowrap;
+			}
+
+			.trailing-icon {
+				font-size: 1.5rem;
+				color: var(--on-surface-variant);
+			}
+			:host([active]) .trailing-icon {
+				color: var(--on-secondary-container);
+			}
+		`
+	];
+
+	override render() {
+		const leading = this.avatar
+			? html`<span
+					class="avatar"
+					part="avatar"
+					style="background-image: url('${this.avatar}');"
+				></span>`
+			: this.icon
+				? html`<span class="leading leading-icon" part="leading">
+						<moni-icon name="${this.icon}"></moni-icon>
+					</span>`
+				: html`<slot name="leading"></slot>`;
+
+		const trailing = this.trailingIcon
+			? html`<span class="trailing trailing-icon" part="trailing">
+					<moni-icon name="${this.trailingIcon}"></moni-icon>
+				</span>`
+			: html`<slot name="trailing"></slot>`;
+
+		const supporting = this.lines >= 2
+			? html`<span class="supporting" part="supporting"
+					><slot name="supporting"></slot
+				></span>`
+			: nothing;
+		const meta = this.lines >= 3
+			? html`<span class="meta" part="meta"><slot name="meta"></slot></span>`
+			: nothing;
+
+		const inner = html`
+			${leading}
+			<div class="text" part="text">
+				<span class="headline" part="headline"><slot></slot></span>
+				${supporting} ${meta}
+			</div>
+			${trailing}
+			<slot name="trailing-meta"></slot>
+		`;
+
+		return this.href
+			? html`<a
+					class="row"
+					part="row"
+					href=${this.href}
+					>${inner}</a
+				>`
+			: inner;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-list-item': MoniListItem;
+	}
+}
+
+export default MoniListItem;

package/src/components/moni-list.ts

@@ -0,0 +1,59 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Material 3 List (`m3-docs/components/lists/specs.md`).
+ *
+ * A list is a continuous vertical index of text and images. The
+ * container itself is purely structural (no padding); spacing and
+ * dividers are controlled by `<moni-list-item>` children.
+ *
+ * Two visual variants:
+ *  - **default**: 8dp top/bottom padding between items (handled by items).
+ *  - **border**:  dividers drawn between items.
+ *
+ * Attributes:
+ *  - variant: '' (default) | border
+ *  - rounded: when set, items use a 4dp corner radius.
+ *
+ * Slots:
+ *  - default: <moni-list-item> children.
+ */
+@customElement('moni-list')
+export class MoniList extends MoniElement {
+	@property({ reflect: true }) variant: '' | 'border' = '';
+	@property({ type: Boolean, reflect: true }) rounded = false;
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+				color: var(--on-surface);
+				padding: 0;
+				margin: 0;
+			}
+			:host([variant='border']) {
+				border-block-end: 0.0625rem solid var(--outline-variant);
+			}
+
+			::slotted(moni-list-item) {
+				display: block;
+			}
+		`
+	];
+
+	override render() {
+		return html`<slot></slot>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-list': MoniList;
+	}
+}
+
+export default MoniList;

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

@@ -0,0 +1,41 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-loading-indicator.js';
+import type { MoniLoadingIndicator } from './moni-loading-indicator.js';
+
+describe('moni-loading-indicator', () => {
+	let el: MoniLoadingIndicator;
+
+	beforeEach(() => {
+		el = document.createElement('moni-loading-indicator') as MoniLoadingIndicator;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders a container with active indicator', async () => {
+		await el.updateComplete;
+		const container = el.shadowRoot?.querySelector('.container');
+		const activeIndicator = el.shadowRoot?.querySelector('.active-indicator');
+		expect(container).toBeTruthy();
+		expect(activeIndicator).toBeTruthy();
+	});
+
+	it('reflects and respects the variant attribute', async () => {
+		expect(el.variant).toBe('uncontained');
+		el.variant = 'contained';
+		await el.updateComplete;
+		expect(el.getAttribute('variant')).toBe('contained');
+
+		el.variant = 'uncontained';
+		await el.updateComplete;
+		expect(el.getAttribute('variant')).toBe('uncontained');
+	});
+
+	it('has progressbar role and min/max values set', () => {
+		expect(el.getAttribute('role')).toBe('progressbar');
+		expect(el.ariaValueMin).toBe('0');
+		expect(el.ariaValueMax).toBe('100');
+	});
+});

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

@@ -0,0 +1,188 @@
+import { html, css, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import { loadingIndicatorPolygons } from './loading-shapes.js';
+
+/**
+ * Shape-shifting indeterminate loading indicator based on Material 3 Expressive spec.
+ *
+ * Attributes:
+ *  - variant: 'uncontained' (default) | 'contained'
+ *
+ * CSS custom properties for customization:
+ *  - --moni-loading-indicator-size: Size of the active indicator (default: 2.375rem)
+ *  - --moni-loading-indicator-active-color: Active indicator color in uncontained mode (default: var(--primary))
+ *  - --moni-loading-indicator-contained-active-color: Active indicator color in contained mode (default: var(--on-primary-container))
+ *  - --moni-loading-indicator-contained-container-color: Background color of container in contained mode (default: var(--secondary-container))
+ *  - --moni-loading-indicator-container-shape: Border radius of container in contained mode (default: 9999px)
+ *  - --moni-loading-indicator-container-size: Container size (default: 3rem)
+ */
+@customElement('moni-loading-indicator')
+export class MoniLoadingIndicator extends MoniElement {
+	@property({ reflect: true })
+	variant: 'uncontained' | 'contained' = 'uncontained';
+
+	@query('.container') private _container?: HTMLElement;
+
+	override connectedCallback() {
+		super.connectedCallback();
+		this.ariaValueMin = this.ariaValueMin || '0';
+		this.ariaValueMax = this.ariaValueMax || '100';
+		this.role = this.role || 'progressbar';
+		this._toggleAnimation(true);
+	}
+
+	override disconnectedCallback() {
+		super.disconnectedCallback();
+		this._toggleAnimation(false);
+	}
+
+	protected override firstUpdated() {
+		this._toggleAnimation(true);
+	}
+
+	private _toggleAnimation(enable: boolean) {
+		if (this._container) {
+			this._container.classList.toggle('animate', enable);
+		}
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: inline-block;
+				aspect-ratio: 1 / 1;
+				contain: strict;
+				vertical-align: middle;
+			}
+
+			:host([variant='uncontained']) {
+				width: var(--moni-loading-indicator-size, 2.375rem);
+			}
+
+			:host([variant='contained']) {
+				width: var(--moni-loading-indicator-container-size, 3rem);
+			}
+
+			:host([variant='uncontained']) .active-indicator {
+				background-color: var(--moni-loading-indicator-active-color, var(--primary));
+			}
+
+			:host([variant='contained']) .active-indicator {
+				background-color: var(--moni-loading-indicator-contained-active-color, var(--on-primary-container));
+			}
+
+			:host([variant='contained']) .container {
+				background-color: var(--moni-loading-indicator-contained-container-color, var(--secondary-container));
+			}
+
+			.container {
+				width: 100%;
+				height: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: var(--moni-loading-indicator-container-shape, 9999px);
+				box-sizing: border-box;
+			}
+
+			.active-indicator {
+				margin: auto;
+				aspect-ratio: 1 / 1;
+				width: calc(var(--moni-loading-indicator-size, 2.375rem) * 0.842);
+				transform-origin: center;
+				transition: clip-path 500ms cubic-bezier(0.2, 0, 0, 1);
+				will-change: transform, clip-path;
+				--_polygon-soft-burst: polygon(${unsafeCSS(loadingIndicatorPolygons['soft-burst'])});
+				--_polygon-9-sided-cookie: polygon(${unsafeCSS(loadingIndicatorPolygons['9-sided-cookie'])});
+				--_polygon-pentagon: polygon(${unsafeCSS(loadingIndicatorPolygons['pentagon'])});
+				--_polygon-pill: polygon(${unsafeCSS(loadingIndicatorPolygons['pill'])});
+				--_polygon-sunny: polygon(${unsafeCSS(loadingIndicatorPolygons['sunny'])});
+				--_polygon-4-sided-cookie: polygon(${unsafeCSS(loadingIndicatorPolygons['4-sided-cookie'])});
+				--_polygon-oval: polygon(${unsafeCSS(loadingIndicatorPolygons['oval'])});
+			}
+
+			.container.animate .active-indicator-wrapper {
+				animation: rotate-outer 4666ms linear infinite;
+				transform-origin: center;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				will-change: transform;
+			}
+
+			@keyframes rotate-outer {
+				0% {
+					transform: rotate(0deg);
+				}
+				100% {
+					transform: rotate(360deg);
+				}
+			}
+
+			.container.animate .active-indicator {
+				animation: rotate-inner 4666ms cubic-bezier(0.34, 0.88, 0.34, 1) infinite;
+			}
+
+			@keyframes rotate-inner {
+				0% {
+					clip-path: var(--_polygon-soft-burst);
+					transform: rotate(0deg);
+				}
+				14% {
+					clip-path: var(--_polygon-9-sided-cookie);
+					transform: rotate(154deg) scale(1);
+				}
+				29% {
+					clip-path: var(--_polygon-pentagon);
+					transform: rotate(309deg) scale(1);
+				}
+				43% {
+					clip-path: var(--_polygon-pill);
+					transform: rotate(463deg) scale(1);
+				}
+				57% {
+					clip-path: var(--_polygon-sunny);
+					transform: rotate(617deg) scale(1);
+				}
+				71% {
+					clip-path: var(--_polygon-4-sided-cookie);
+					transform: rotate(771deg) scale(1);
+				}
+				83% {
+					clip-path: var(--_polygon-oval);
+					transform: rotate(926deg) scale(1);
+				}
+				100% {
+					clip-path: var(--_polygon-soft-burst);
+					transform: rotate(1080deg) scale(1);
+				}
+			}
+
+			@media (forced-colors: active) {
+				.active-indicator {
+					background-color: CanvasText !important;
+				}
+			}
+		`
+	];
+
+	override render() {
+		return html`
+			<div class="container animate" aria-hidden="true">
+				<div class="active-indicator-wrapper">
+					<div class="active-indicator"></div>
+				</div>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-loading-indicator': MoniLoadingIndicator;
+	}
+}
+
+export default MoniLoadingIndicator;

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

@@ -0,0 +1,85 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+
+/**
+ * Visual-only menu item. Renders an `<li>` styled with the BeerCSS
+ * `menu > li` rule.
+ *
+ * Attributes:
+ *  - active:    present → tertiary-container highlight
+ *  - disabled:  present
+ *  - icon:      Material Symbols name
+ *  - label:     item text
+ */
+@customElement('moni-menu-item')
+export class MoniMenuItem extends MoniElement {
+	@property({ type: Boolean, reflect: true }) active = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+	@property({ reflect: true }) icon = '';
+	@property({ reflect: true }) label = '';
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			li {
+				all: unset;
+				box-sizing: border-box;
+				position: relative;
+				display: flex;
+				align-items: center;
+				text-align: start;
+				justify-content: flex-start;
+				white-space: nowrap;
+				gap: 1rem;
+				padding: 0.5rem 1rem;
+				min-block-size: 2.75rem;
+				flex: 1;
+				margin: 0 !important;
+				cursor: pointer;
+				border-radius: 0.25rem;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				transition: border-radius var(--speed2);
+			}
+
+			li:hover {
+				background-color: var(--active);
+			}
+			li.active {
+				background-color: var(--tertiary-container);
+				color: var(--on-tertiary-container);
+			}
+			li:is(.active, :active) {
+				border-radius: 0.75rem;
+			}
+			:host([disabled]) li {
+				opacity: 0.5;
+				pointer-events: none;
+			}
+		`
+	];
+
+	override render() {
+		return html`<li part="item">
+			${this.icon
+				? html`<moni-icon name="${this.icon}" part="icon"></moni-icon>`
+				: html`<slot name="icon"></slot>`}
+			<span part="label"><slot>${this.label}</slot></span>
+		</li>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-menu-item': MoniMenuItem;
+	}
+}
+
+export default MoniMenuItem;