@moni-labs/moni-ui 0.2.0

package/src/components/moni-split-button.ts

@@ -0,0 +1,121 @@
+import { html, css } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Visual-only split button. Combines a primary action button and a dropdown menu trigger.
+ *
+ * Attributes:
+ *  - variant: filled (default) | tonal | outlined | elevated
+ *  - size:    small | medium (default) | large | extra
+ *  - gap:     custom gap space (e.g. "8px" or "1rem")
+ *
+ * Slots:
+ *  - leading-button:  The main action button
+ *  - trailing-button: The menu dropdown button
+ */
+@customElement('moni-split-button')
+export class MoniSplitButton extends MoniElement {
+	@property({ reflect: true })
+	variant: 'filled' | 'tonal' | 'outlined' | 'elevated' = 'filled';
+
+	@property({ reflect: true })
+	size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra' = 'medium';
+
+	@property()
+	gap = '';
+
+	@queryAssignedElements({ slot: 'leading-button', flatten: true })
+	private leadingElements!: HTMLElement[];
+
+	@queryAssignedElements({ slot: 'trailing-button', flatten: true })
+	private trailingElements!: HTMLElement[];
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: middle;
+			}
+
+			.wrapper {
+				display: inline-flex;
+				align-items: center;
+				gap: 0;
+				width: 100%;
+			}
+
+			::slotted(*:not(:first-child)) {
+				margin-inline-start: var(--moni-button-group-connected-gap, -0.0625rem);
+			}
+		`
+	];
+
+	protected override updated(changedProperties: Map<string | number | symbol, unknown>) {
+		super.updated(changedProperties);
+		if (changedProperties.has('variant') || changedProperties.has('size') || changedProperties.has('gap')) {
+			this.updateChildren();
+		}
+	}
+
+	private handleSlotChange() {
+		this.updateChildren();
+	}
+
+	private getGapValue(gap: string): string {
+		if (!gap) return '';
+		const preset = gap.toLowerCase();
+		if (preset === 'xs' || preset === 'xsmall') return '1.125rem';
+		if (preset === 's' || preset === 'small') return '0.75rem';
+		if (preset === 'm' || preset === 'medium') return '0.5rem';
+		if (preset === 'l' || preset === 'large') return '0.5rem';
+		if (preset === 'xl' || preset === 'xlarge') return '0.5rem';
+		return gap;
+	}
+
+	private updateChildren() {
+		const leading = this.leadingElements.find(
+			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
+		);
+		const trailing = this.trailingElements.find(
+			(el) => el.tagName.toLowerCase() === 'moni-button' || el.tagName.toLowerCase() === 'moni-icon-button'
+		);
+
+		const hasGap = !!this.gap;
+
+		if (leading) {
+			leading.setAttribute('shape', hasGap ? 'left-round' : 'left-round-flat');
+			leading.setAttribute('size', this.size);
+			leading.setAttribute('variant', this.variant);
+		}
+
+		if (trailing) {
+			trailing.setAttribute('shape', hasGap ? 'right-round' : 'right-round-flat');
+			trailing.setAttribute('size', this.size);
+			trailing.setAttribute('variant', this.variant);
+		}
+	}
+
+	override render() {
+		const resolvedGap = this.getGapValue(this.gap);
+		const inlineStyles = resolvedGap
+			? `gap: ${resolvedGap}; --moni-button-group-connected-gap: 0px;`
+			: '';
+		return html`
+			<div class="wrapper" style=${inlineStyles} part="wrapper">
+				<slot name="leading-button" @slotchange=${this.handleSlotChange}></slot>
+				<slot name="trailing-button" @slotchange=${this.handleSlotChange}></slot>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-split-button': MoniSplitButton;
+	}
+}
+
+export default MoniSplitButton;

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

@@ -0,0 +1,57 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-stepper.js';
+import './moni-step.js';
+import type { MoniStepper } from './moni-stepper.js';
+import type { MoniStep } from './moni-step.js';
+
+describe('moni-step vertical connectors (P2.2)', () => {
+	let stepper: MoniStepper;
+	let stepA: MoniStep;
+	let stepB: MoniStep;
+	let stepC: MoniStep;
+
+	beforeEach(() => {
+		stepper = document.createElement('moni-stepper') as MoniStepper;
+		stepA = document.createElement('moni-step') as MoniStep;
+		stepB = document.createElement('moni-step') as MoniStep;
+		stepC = document.createElement('moni-step') as MoniStep;
+		stepA.title = 'A';
+		stepB.title = 'B';
+		stepC.title = 'C';
+		stepper.appendChild(stepA);
+		stepper.appendChild(stepB);
+		stepper.appendChild(stepC);
+		stepper.orientation = 'vertical';
+		document.body.appendChild(stepper);
+	});
+
+	afterEach(() => {
+		stepper.remove();
+	});
+
+	it('vertical orientation propagates to host', async () => {
+		await stepper.updateComplete;
+		expect(stepper.getAttribute('orientation')).toBe('vertical');
+	});
+
+	it('three vertical steps render in document order', async () => {
+		await stepper.updateComplete;
+		await stepA.updateComplete;
+		const steps = Array.from(stepper.querySelectorAll('moni-step'));
+		expect(steps.length).toBe(3);
+		expect(steps[0]).toBe(stepA);
+		expect(steps[1]).toBe(stepB);
+		expect(steps[2]).toBe(stepC);
+	});
+
+	it('the last step has no connector (only :not(:last-child) have ::after)', async () => {
+		await stepper.updateComplete;
+		await stepC.updateComplete;
+		// The host :host(:not(:last-child))::after selector only applies
+		// to non-last steps. The last step should not have a visible connector
+		// pseudo-element. We can't easily read ::after in jsdom but we verify
+		// the last step exists and renders.
+		const lastDot = stepC.shadowRoot?.querySelector('.dot');
+		expect(lastDot).toBeTruthy();
+	});
+});

package/src/components/moni-step.ts

@@ -0,0 +1,155 @@
+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 step. Renders an icon/number, a title, and a description.
+ *
+ * Attributes:
+ *  - title:       step heading
+ *  - description: step secondary text
+ *  - active:      present → primary color highlight
+ *  - completed:   present → filled circle with check
+ *  - icon:        Material Symbols name (overrides the number)
+ *  - index:       numeric label (auto-set by parent stepper, optional)
+ */
+@customElement('moni-step')
+export class MoniStep extends MoniElement {
+	@property({ reflect: true }) title = '';
+	@property({ reflect: true }) description = '';
+	@property({ type: Boolean, reflect: true }) active = false;
+	@property({ type: Boolean, reflect: true }) completed = false;
+	@property({ reflect: true }) icon = '';
+	@property({ type: Number, reflect: true }) index = 0;
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				text-align: center;
+				gap: 0.5rem;
+				font-family: var(--font);
+				color: var(--on-surface-variant);
+				position: relative;
+				flex: 1;
+			}
+
+			:host(:not(:last-child))::after {
+				content: '';
+				position: absolute;
+				inset-inline-start: calc(50% + 1.25rem);
+				inset-inline-end: calc(-50% + 1.25rem);
+				inset-block-start: 1rem;
+				block-size: 0.0625rem;
+				background-color: var(--outline-variant);
+				z-index: 0;
+			}
+
+			:host-context(moni-stepper[orientation='vertical']) {
+				flex-direction: row;
+				align-items: flex-start;
+				text-align: start;
+				gap: 1rem;
+				min-block-size: 4rem;
+			}
+
+			/* Vertical connector. Geometry: the dot occupies y=0 to y=2rem at
+			   the top of the step (host is column flex with min-block-size 4rem).
+			   The connector runs from the BOTTOM of the current dot (y=2rem) to
+			   the BOTTOM of the current step (y=100%). This formula stays
+			   calibrated regardless of step height. */
+			:host-context(moni-stepper[orientation='vertical']):host(:not(:last-child))::after {
+				position: absolute;
+				inset-inline-start: calc(1rem - 0.03125rem);
+				inset-block-start: 2rem;
+				inset-inline-end: auto;
+				inline-size: 0.0625rem;
+				block-size: calc(100% - 2rem);
+				z-index: 0;
+				margin: 0;
+				background-color: var(--outline-variant);
+			}
+
+			.dot {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				inline-size: 2rem;
+				block-size: 2rem;
+				border-radius: 50%;
+				background-color: var(--surface-container);
+				color: var(--on-surface-variant);
+				font-size: 0.875rem;
+				font-weight: 500;
+				flex: none;
+				z-index: 1;
+			}
+
+			:host([active]) .dot {
+				background-color: var(--primary);
+				color: var(--on-primary);
+			}
+
+			:host([completed]) .dot {
+				background-color: var(--primary);
+				color: var(--on-primary);
+			}
+
+			:host([active]) .text {
+				color: var(--on-surface);
+			}
+
+			.text {
+				display: flex;
+				flex-direction: column;
+				min-inline-size: 0;
+				z-index: 1;
+			}
+			.title {
+				font-size: 0.875rem;
+				font-weight: 500;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+			.description {
+				font-size: 0.75rem;
+				opacity: 0.7;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		`
+	];
+
+	override render() {
+		const dot = this.completed
+			? html`<moni-icon name="check"></moni-icon>`
+			: this.icon
+				? html`<moni-icon name="${this.icon}"></moni-icon>`
+				: html`${this.index + 1}`;
+		return html`
+			<span class="dot" part="dot">${dot}</span>
+			<div class="text" part="text">
+				<span class="title" part="title"
+					><slot>${this.title}</slot></span
+				>
+				<span class="description" part="description"
+					>${this.description}</span
+				>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-step': MoniStep;
+	}
+}
+
+export default MoniStep;

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

@@ -0,0 +1,116 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-stepper.js';
+import './moni-step.js';
+import type { MoniStepper } from './moni-stepper.js';
+import type { MoniStep } from './moni-step.js';
+
+describe('moni-stepper / moni-step', () => {
+	let el: MoniStepper;
+
+	beforeEach(() => {
+		el = document.createElement('moni-stepper') as MoniStepper;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders an <ol> with a slot', async () => {
+		await el.updateComplete;
+		const ol = el.shadowRoot?.querySelector('ol');
+		const slot = el.shadowRoot?.querySelector('slot');
+		expect(ol).toBeTruthy();
+		expect(slot).toBeTruthy();
+	});
+
+	it('reflects the orientation attribute', async () => {
+		el.orientation = 'vertical';
+		await el.updateComplete;
+		expect(el.getAttribute('orientation')).toBe('vertical');
+	});
+
+	it('reflects the current attribute as a number', async () => {
+		el.current = 2;
+		await el.updateComplete;
+		expect(el.getAttribute('current')).toBe('2');
+	});
+
+	it('propagates current to children: sets active on the matching step', async () => {
+		const step1 = document.createElement('moni-step') as MoniStep;
+		step1.title = 'One';
+		const step2 = document.createElement('moni-step') as MoniStep;
+		step2.title = 'Two';
+		const step3 = document.createElement('moni-step') as MoniStep;
+		step3.title = 'Three';
+		el.appendChild(step1);
+		el.appendChild(step2);
+		el.appendChild(step3);
+
+		el.current = 1;
+		await el.updateComplete;
+		await step1.updateComplete;
+		await step2.updateComplete;
+		await step3.updateComplete;
+
+		expect(step1.completed).toBe(true);
+		expect(step1.active).toBe(false);
+		expect(step2.active).toBe(true);
+		expect(step2.completed).toBe(false);
+		expect(step3.active).toBe(false);
+		expect(step3.completed).toBe(false);
+	});
+
+	it('sets index on each child from its position', async () => {
+		const s1 = document.createElement('moni-step') as MoniStep;
+		const s2 = document.createElement('moni-step') as MoniStep;
+		const s3 = document.createElement('moni-step') as MoniStep;
+		el.appendChild(s1);
+		el.appendChild(s2);
+		el.appendChild(s3);
+		el.current = 0;
+		await el.updateComplete;
+		await Promise.all([s1.updateComplete, s2.updateComplete, s3.updateComplete]);
+
+		expect(s1.index).toBe(0);
+		expect(s2.index).toBe(1);
+		expect(s3.index).toBe(2);
+	});
+
+	it('marks all previous steps as completed', async () => {
+		const s1 = document.createElement('moni-step') as MoniStep;
+		const s2 = document.createElement('moni-step') as MoniStep;
+		const s3 = document.createElement('moni-step') as MoniStep;
+		const s4 = document.createElement('moni-step') as MoniStep;
+		el.appendChild(s1);
+		el.appendChild(s2);
+		el.appendChild(s3);
+		el.appendChild(s4);
+		el.current = 2;
+		await el.updateComplete;
+		await Promise.all([
+			s1.updateComplete,
+			s2.updateComplete,
+			s3.updateComplete,
+			s4.updateComplete
+		]);
+
+		expect(s1.completed).toBe(true);
+		expect(s2.completed).toBe(true);
+		expect(s3.completed).toBe(false);
+		expect(s3.active).toBe(true);
+		expect(s4.completed).toBe(false);
+		expect(s4.active).toBe(false);
+	});
+
+	it('re-syncs when a step is added dynamically (slotchange)', async () => {
+		el.current = 0;
+		await el.updateComplete;
+		const s1 = document.createElement('moni-step') as MoniStep;
+		el.appendChild(s1);
+		await el.updateComplete;
+		await s1.updateComplete;
+		expect(s1.index).toBe(0);
+		expect(s1.active).toBe(true);
+	});
+});

package/src/components/moni-stepper.ts

@@ -0,0 +1,100 @@
+import { html, css } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import type { MoniStep } from './moni-step.js';
+
+/**
+ * Visual-only stepper. Wraps a list of <moni-step> children, propagates the
+ * `current` index to each child, and styles the connectors between them.
+ *
+ * Attributes:
+ *  - orientation: horizontal (default) | vertical
+ *  - current:     zero-based index of the active step
+ */
+@customElement('moni-stepper')
+export class MoniStepper extends MoniElement {
+	@property({ reflect: true })
+	orientation: 'horizontal' | 'vertical' = 'horizontal';
+	@property({ type: Number, reflect: true }) current = 0;
+
+	@queryAssignedElements({ selector: 'moni-step' })
+	private _steps!: MoniStep[];
+
+	override updated(changed: Map<string, unknown>) {
+		if (
+			changed.has('current') ||
+			changed.has('orientation') ||
+			changed.size === 0
+		) {
+			this._syncSteps();
+		}
+	}
+
+	/**
+	 * Propagate the `current` index to each child <moni-step>:
+	 *  - sets `index` from the child's position
+	 *  - sets `completed` on every step before `current`
+	 *  - sets `active` on the step at `current`
+	 *
+	 * Deferred to a microtask so that slotted children are guaranteed
+	 * to have finished their first update cycle before we write to them.
+	 */
+	private _syncSteps() {
+		Promise.resolve().then(() => {
+			let steps = this._steps || [];
+			if (steps.length === 0) {
+				steps = Array.from(this.querySelectorAll('moni-step')) as MoniStep[];
+			}
+			steps.forEach((step, i) => {
+				step.index = i;
+				step.completed = i < this.current;
+				step.active = i === this.current;
+			});
+		});
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			.list {
+				display: flex;
+				gap: 0.5rem;
+				padding: 0;
+				margin: 0;
+				list-style: none;
+			}
+			:host([orientation='vertical']) .list {
+				flex-direction: column;
+			}
+
+			::slotted(*) {
+				flex: 1;
+				min-inline-size: 0;
+			}
+		`
+	];
+
+	override render() {
+		return html`<ol class="list" part="stepper">
+			<slot @slotchange=${this._onSlotChange}></slot>
+		</ol>`;
+	}
+
+	private _onSlotChange = () => {
+		// Steps may have been added/removed; re-sync.
+		this._syncSteps();
+	};
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-stepper': MoniStepper;
+	}
+}
+
+export default MoniStepper;

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

@@ -0,0 +1,117 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-switch.js';
+import type { MoniSwitch } from './moni-switch.js';
+
+describe('moni-switch', () => {
+	let el: MoniSwitch;
+
+	beforeEach(() => {
+		el = document.createElement('moni-switch') as MoniSwitch;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders an input and a span containing track/thumb pseudo-elements', async () => {
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector('input');
+		const span = el.shadowRoot?.querySelector('span');
+		expect(input).toBeTruthy();
+		expect(span).toBeTruthy();
+	});
+
+	it('input has role=switch', async () => {
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector(
+			'input'
+		) as HTMLInputElement;
+		expect(input.getAttribute('role')).toBe('switch');
+	});
+
+	it('input is contained in the label (for click handling)', async () => {
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector(
+			'input'
+		) as HTMLInputElement;
+		const label = el.shadowRoot?.querySelector('label');
+		expect(label?.contains(input)).toBe(true);
+	});
+
+	it('forwards checked state to the input', async () => {
+		el.checked = true;
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector(
+			'input'
+		) as HTMLInputElement;
+		expect(input.checked).toBe(true);
+
+		el.checked = false;
+		await el.updateComplete;
+		expect(input.checked).toBe(false);
+	});
+
+	it('renders a label span when label attribute is set', async () => {
+		el.label = 'Wi-Fi';
+		await el.updateComplete;
+		const label = el.shadowRoot?.querySelector('.label');
+		expect(label?.textContent?.trim()).toBe('Wi-Fi');
+	});
+
+	it('forwards disabled to the input', async () => {
+		el.disabled = true;
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector(
+			'input'
+		) as HTMLInputElement;
+		expect(input.disabled).toBe(true);
+	});
+
+	it('reflects the checked attribute', async () => {
+		el.checked = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('checked')).toBe(true);
+	});
+
+	it('renders close and check icons when icon=true', async () => {
+		el.icon = true;
+		await el.updateComplete;
+		const icons = el.shadowRoot?.querySelectorAll('span > i');
+		expect(icons).toBeTruthy();
+		expect(icons?.length).toBe(2);
+		expect(icons?.[0].textContent).toBe('close');
+		expect(icons?.[1].textContent).toBe('check');
+	});
+
+	it('does not render a thumb icon when icon=false', async () => {
+		el.icon = false;
+		await el.updateComplete;
+		const icons = el.shadowRoot?.querySelectorAll('span > i');
+		expect(icons?.length).toBe(0);
+	});
+
+	it('forwards name to the input', async () => {
+		el.name = 'wifi';
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector(
+			'input'
+		) as HTMLInputElement;
+		expect(input.name).toBe('wifi');
+	});
+
+	it('forwards value to the input', async () => {
+		el.value = 'on';
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector(
+			'input'
+		) as HTMLInputElement;
+		expect(input.value).toBe('on');
+	});
+
+	it('input is rendered inside the switch label', async () => {
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector('input');
+		expect(input).toBeTruthy();
+	});
+});