@moni-labs/moni-ui 0.2.0

package/src/components/moni-switch.ts

@@ -0,0 +1,237 @@
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+
+/**
+ * Switch styled per Material Design 3 specs.
+ *
+ * M3 measurements (`m3-docs/components/switch/specs.md`):
+ *  - Track: 52dp × 32dp, 2dp outline, full corner radius
+ *  - Handle (thumb): 16dp unselected, 24dp selected, 28dp pressed
+ *  - State layer: 40dp circular ripple on hover/focus/pressed
+ *  - Icon (optional): 16dp on selected and/or unselected handle
+ *
+ * Attributes:
+ *  - label:    text label (displayed to the right of the switch)
+ *  - checked:  present
+ *  - disabled: present
+ *  - icon:     present → renders check/close icons inside the thumb
+ *  - name:     forwarded to input.name
+ *  - value:    forwarded to input.value
+ */
+@customElement('moni-switch')
+export class MoniSwitch extends MoniElement {
+	@property({ reflect: true }) label = '';
+	@property({ type: Boolean, reflect: true }) checked = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+	@property({ type: Boolean, reflect: true }) icon = false;
+	@property({ reflect: true }) name = '';
+	@property({ reflect: true }) value = '';
+
+	@query('input') private _input!: HTMLInputElement;
+
+	override updated(changed: Map<string, unknown>) {
+		if (this._input) {
+			if (changed.has('checked')) this._input.checked = this.checked;
+			if (changed.has('disabled')) this._input.disabled = this.disabled;
+		}
+	}
+
+	private _onChange(e: Event) {
+		this.checked = (e.target as HTMLInputElement).checked;
+		this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: inline-flex;
+				font-family: var(--font);
+			}
+
+			.switch {
+				--_thumb: 1rem; /* 16dp unselected (M3) */
+				--_track-w: 3.25rem; /* 52dp */
+				--_track-h: 2rem; /* 32dp */
+				inline-size: auto;
+				block-size: auto;
+				line-height: normal;
+				white-space: nowrap;
+				cursor: pointer;
+				display: inline-flex;
+				align-items: center;
+				direction: ltr;
+			}
+
+			/* Input hit area: 52dp × 32dp track */
+			.switch > input {
+				inline-size: var(--_track-w);
+				block-size: var(--_track-h);
+				opacity: 0;
+				cursor: pointer;
+				flex: none;
+			}
+
+			/* Text label span */
+			.switch > span {
+				display: inline-flex;
+				align-items: center;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				position: relative;
+			}
+
+			/* Track */
+			.switch > span::after {
+				content: "";
+				position: absolute;
+				inset: 50% auto auto 0;
+				background-color: var(--surface-container-highest);
+				border: 0.125rem solid var(--outline);
+				box-sizing: border-box;
+				inline-size: var(--_track-w);
+				block-size: var(--_track-h);
+				border-radius: var(--_track-h);
+				/* Shift the track to sit behind the input (input is to the left) */
+				transform: translate(calc(-1 * var(--_track-w)), -50%);
+				pointer-events: none;
+				transition: background-color var(--speed2), border-color var(--speed2);
+			}
+
+			/* Thumb (handle) */
+			.switch > span::before,
+			.switch.icon > span > i {
+				position: absolute;
+				inset: 50% auto auto 0;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 50%;
+				transition: all var(--speed2);
+				font-size: calc(var(--_thumb) - 0.25rem);
+				user-select: none;
+				min-inline-size: var(--_thumb);
+				min-block-size: var(--_thumb);
+				content: "";
+				color: var(--on-surface-variant);
+				background-color: var(--outline);
+				/* Unchecked: 16dp thumb sits 2dp from track start */
+				transform: translate(calc(-1 * var(--_track-w) + 0.25rem), -50%);
+				z-index: 2;
+				pointer-events: none;
+			}
+
+			/* Icon mode uses a 24dp thumb at rest */
+			.switch.icon > span > i {
+				--_thumb: 1.5rem;
+				transform: translate(calc(-1 * var(--_track-w) + 0.25rem), -50%);
+				font-family: var(--font-icon);
+			}
+
+			/* 40dp circular state layer behind the thumb on hover/focus */
+			.switch > span::before,
+			.switch.icon > span > i {
+				box-shadow: 0 0 0 0 transparent;
+			}
+			.switch > input:not(:disabled):is(:focus, :hover) + span::before,
+			.switch.icon > input:not(:disabled):is(:focus, :hover) + span > i {
+				box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--on-surface) 8%, transparent);
+			}
+			.switch > input:not(:disabled):is(:focus, :hover):checked + span::before,
+			.switch.icon > input:not(:disabled):is(:focus, :hover):checked + span > i {
+				box-shadow: 0 0 0 0.5rem color-mix(in srgb, var(--primary) 12%, transparent);
+			}
+
+			/* Checked: track fills with primary */
+			.switch > input:checked + span::after {
+				border: none;
+				background-color: var(--primary);
+			}
+
+			/* Checked: thumb grows to 24dp and slides right */
+			.switch > input:checked + span::before {
+				--_thumb: 1.5rem;
+				content: "";
+				color: var(--primary);
+				background-color: var(--on-primary);
+				transform: translate(calc(-1.75rem), -50%);
+			}
+
+			/* Checked icon mode: show check icon */
+			.switch.icon > input:checked + span > i {
+				content: "check";
+				color: var(--primary);
+				background-color: var(--on-primary);
+				transform: translate(-1.75rem, -50%);
+				font-family: var(--font-icon);
+			}
+
+			/* Active (pressed) states: 28dp thumb */
+			.switch > input:active:not(:disabled) + span::before,
+			.switch.icon > input:active:not(:disabled) + span > i {
+				--_thumb: 1.75rem;
+				transform: translate(calc(-1 * var(--_track-w) + 0.25rem), -50%);
+			}
+
+			.switch > input:active:checked:not(:disabled) + span::before,
+			.switch.icon > input:active:checked:not(:disabled) + span > i {
+				--_thumb: 1.75rem;
+				transform: translate(-1.625rem, -50%);
+			}
+
+			/* Icon mode: toggle visibility of close/check icons */
+			.icon > input:checked + span > i:first-child,
+			.icon > span > i:last-child {
+				opacity: 0;
+			}
+
+			.icon > input:checked + span > i:last-child,
+			.icon > span > i:first-child {
+				opacity: 1;
+			}
+
+			/* Disabled */
+			.switch > input:disabled + span {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
+			/* Focus outline on the track */
+			.switch > :focus-visible + span::after {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.25rem;
+			}
+		`
+	];
+
+	override render() {
+		return html`<label class=${this.icon ? 'switch icon' : 'switch'} part="switch">
+			<input
+				type="checkbox"
+				role="switch"
+				.checked=${this.checked}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name || undefined)}
+				value=${ifDefined(this.value || undefined)}
+				@change=${this._onChange}
+			/>
+			<span>
+				${this.icon ? html`<i>close</i><i>check</i>` : ''}
+				${this.label
+					? html`<span class="label" part="label">&nbsp;${this.label}</span>`
+					: html`<slot></slot>`}
+			</span>
+		</label>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-switch': MoniSwitch;
+	}
+}
+
+export default MoniSwitch;

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

@@ -0,0 +1,54 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-tabs.js';
+import './moni-tab.js';
+import type { MoniTabs } from './moni-tabs.js';
+import type { MoniTab } from './moni-tab.js';
+
+describe('moni-tab indicator-size', () => {
+	let tabs: MoniTabs;
+	let tab: MoniTab;
+
+	beforeEach(() => {
+		tabs = document.createElement('moni-tabs') as MoniTabs;
+		tab = document.createElement('moni-tab') as MoniTab;
+		tab.label = 'Home';
+		tab.active = true;
+		tabs.appendChild(tab);
+		document.body.appendChild(tabs);
+	});
+
+	afterEach(() => {
+		tabs.remove();
+	});
+
+	it('reflects indicatorSize on the host', async () => {
+		tabs.indicatorSize = 'min';
+		await tabs.updateComplete;
+		expect(tabs.getAttribute('indicator-size')).toBe('min');
+	});
+
+	it('reflects indicatorSize="max" on the host', async () => {
+		tabs.indicatorSize = 'max';
+		await tabs.updateComplete;
+		expect(tabs.getAttribute('indicator-size')).toBe('max');
+	});
+
+	it('reflects indicatorSize="default" on the host', async () => {
+		tabs.indicatorSize = 'default';
+		await tabs.updateComplete;
+		expect(tabs.getAttribute('indicator-size')).toBe('default');
+	});
+
+	it('vertical orientation is reflected on the tabs host', async () => {
+		tabs.vertical = true;
+		await tabs.updateComplete;
+		expect(tabs.hasAttribute('vertical')).toBe(true);
+	});
+
+	it('tab active state reflects aria-selected=true', async () => {
+		tab.active = true;
+		await tab.updateComplete;
+		const a = tab.shadowRoot?.querySelector('a');
+		expect(a?.getAttribute('aria-selected')).toBe('true');
+	});
+});

package/src/components/moni-tab.ts

@@ -0,0 +1,133 @@
+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 tab. Renders an `<a>` styled with the BeerCSS `.tabs > a`
+ * helper.
+ *
+ * Attributes:
+ *  - active: present → active style
+ *  - icon:   Material Symbols name
+ *  - label:  tab text
+ *  - href:   link target
+ */
+@customElement('moni-tab')
+export class MoniTab extends MoniElement {
+	@property({ type: Boolean, reflect: true }) active = false;
+	@property({ reflect: true }) icon = '';
+	@property({ reflect: true }) label = '';
+	@property({ reflect: true }) href = '#';
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: inline-flex;
+				font-family: var(--font);
+			}
+
+			:host-context(moni-tabs[vertical]) {
+				display: flex;
+				inline-size: 100%;
+			}
+
+			a {
+				position: relative;
+				display: flex;
+				font-size: 0.875rem;
+				font-weight: 500;
+				color: var(--on-surface-variant);
+				padding: 0.5rem 1rem;
+				text-align: center;
+				min-block-size: 3rem;
+				inline-size: 100%;
+				gap: 0.25rem;
+				text-decoration: none;
+				align-items: center;
+				justify-content: center;
+				cursor: pointer;
+				transition: color var(--speed2);
+			}
+
+			:host-context(moni-tabs[vertical]) a {
+				flex-direction: column;
+				gap: 0.25rem;
+				min-block-size: 4.5rem;
+				border-inline-end: 0.125rem solid transparent;
+				border-block-end: none;
+			}
+
+			a:hover {
+				color: var(--primary);
+			}
+
+			a.active,
+			a.active > * {
+				color: var(--primary);
+			}
+
+			a.active::before {
+				content: '';
+				position: absolute;
+				inset: auto 0 0 0;
+				/* M3 Expressive: indicator thickness 3dp. */
+				block-size: 0.1875rem;
+				/* M3 Expressive default: full tab width. */
+				border-radius: 0.75rem;
+				background-color: var(--primary);
+			}
+
+			:host-context(moni-tabs[vertical]) a.active::before {
+				inset: 0 0 0 auto;
+				inline-size: 0.1875rem;
+				block-size: auto;
+			}
+
+			/* M3 indicator-size='min': 24dp tall (centered on tab) with
+			   8dp top/bottom radius — matches M3 spec § Indicator anatomy. */
+			:host-context(moni-tabs[indicator-size='min']) a.active::before {
+				margin: 0 auto;
+				max-inline-size: min(100%, 4rem);
+				block-size: 1.5rem;
+				border-radius: 0.5rem;
+			}
+
+			:host-context(moni-tabs[vertical][indicator-size='min'])
+				a.active::before {
+				margin: auto 0;
+				max-block-size: 4rem;
+				max-inline-size: 0.1875rem;
+				border-radius: 0.5rem;
+			}
+
+			/* M3 indicator-size='max': full tab height, no rounding. */
+			:host-context(moni-tabs[indicator-size='max']) a.active::before {
+				border-radius: 0;
+			}
+		`
+	];
+
+	override render() {
+		return html`<a
+			href=${this.href || '#'}
+			class=${this.active ? 'active' : ''}
+			part="tab"
+			aria-selected=${this.active}
+		>
+			${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>
+		</a>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-tab': MoniTab;
+	}
+}
+
+export default MoniTab;

package/src/components/moni-tabs.ts

@@ -0,0 +1,92 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Visual-only tab bar. Renders a `<nav>` styled with the BeerCSS `.tabs`
+ * helper.
+ *
+ * Attributes:
+ *  - mode:      primary (default) | secondary
+ *  - scrollable: present → overflow-x: auto
+ *  - align:     default (space-around) | left | center | right
+ *  - indicator: default (full) | min | max
+ *  - vertical:  present → icon above label
+ *
+ * Slots:
+ *  - default: <moni-tab> children
+ */
+@customElement('moni-tabs')
+export class MoniTabs extends MoniElement {
+	@property({ reflect: true })
+	mode: 'primary' | 'secondary' = 'primary';
+	@property({ type: Boolean, reflect: true }) scrollable = false;
+	@property({ type: Boolean, reflect: true }) vertical = false;
+	@property({ reflect: true })
+	align: 'default' | 'left' | 'center' | 'right' = 'default';
+	@property({ reflect: true, attribute: 'indicator-size' })
+	indicatorSize: 'default' | 'min' | 'max' = 'default';
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			nav {
+				display: flex;
+				white-space: nowrap;
+				border-block-end: 0.0625rem solid var(--surface-variant);
+				border-radius: 0;
+				overflow-x: auto;
+			}
+
+			nav.left-align {
+				justify-content: flex-start;
+			}
+			nav.center-align {
+				justify-content: center;
+			}
+			nav.right-align {
+				justify-content: flex-end;
+			}
+			:host(:not([align])) nav,
+			nav:not(.left-align):not(.center-align):not(.right-align) {
+				justify-content: space-around;
+			}
+
+			:host([vertical]) nav {
+				flex-direction: column;
+				border-block-end: none;
+				border-inline-end: 0.0625rem solid var(--surface-variant);
+				overflow-x: visible;
+				overflow-y: auto;
+			}
+		`
+	];
+
+	override render() {
+		const classes = [
+			'tabs',
+			this.align === 'default' ? '' : `${this.align}-align`,
+			this.indicatorSize === 'default' ? '' : this.indicatorSize,
+			this.mode,
+			this.vertical ? 'vertical' : ''
+		]
+			.filter(Boolean)
+			.join(' ');
+		return html`<nav class=${classes} part="tabs">
+			<slot></slot>
+		</nav>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-tabs': MoniTabs;
+	}
+}
+
+export default MoniTabs;

package/src/components/moni-text-field.test.ts

@@ -0,0 +1,115 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-text-field.js';
+import type { MoniTextField } from './moni-text-field.js';
+
+describe('moni-text-field', () => {
+	let el: MoniTextField;
+
+	beforeEach(() => {
+		el = document.createElement('moni-text-field') as MoniTextField;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders a field wrapper and an input', async () => {
+		await el.updateComplete;
+		const field = el.shadowRoot?.querySelector('.field');
+		const input = el.shadowRoot?.querySelector('input');
+		expect(field).toBeTruthy();
+		expect(input).toBeTruthy();
+	});
+
+	it('renders a leading icon when icon attribute is set', async () => {
+		el.icon = 'search';
+		await el.updateComplete;
+		const leading = el.shadowRoot?.querySelector('.leading-icon');
+		expect(leading).toBeTruthy();
+	});
+
+	it('renders a trailing icon when trailing-icon attribute is set', async () => {
+		el.setAttribute('trailing-icon', 'close');
+		await el.updateComplete;
+		const trailing = el.shadowRoot?.querySelector('.trailing-icon');
+		expect(trailing).toBeTruthy();
+	});
+
+	it('renders prefix text when prefix attribute is set', async () => {
+		el.prefix = 'https://';
+		await el.updateComplete;
+		const leading = el.shadowRoot?.querySelector('.leading-icon');
+		expect(leading?.textContent?.trim()).toBe('https://');
+	});
+
+	it('renders suffix text when suffix attribute is set', async () => {
+		el.suffix = '.com';
+		await el.updateComplete;
+		const trailing = el.shadowRoot?.querySelector('.trailing-icon');
+		expect(trailing?.textContent?.trim()).toBe('.com');
+	});
+
+	it('applies square class on the field wrapper for shape=no-round', async () => {
+		el.shape = 'no-round';
+		await el.updateComplete;
+		const field = el.shadowRoot?.querySelector('.field');
+		expect(field?.classList.contains('square')).toBe(true);
+	});
+
+	it('applies round class on the field wrapper for shape=round', async () => {
+		el.shape = 'round';
+		await el.updateComplete;
+		const field = el.shadowRoot?.querySelector('.field');
+		expect(field?.classList.contains('round')).toBe(true);
+	});
+
+	it('does not apply shape class on the field wrapper for shape=square', async () => {
+		el.shape = 'square';
+		await el.updateComplete;
+		const field = el.shadowRoot?.querySelector('.field');
+		expect(field?.classList.contains('square')).toBe(false);
+		expect(field?.classList.contains('round')).toBe(false);
+	});
+
+	it('shows the loading spinner when loading is true', async () => {
+		el.loading = true;
+		await el.updateComplete;
+		const trailing = el.shadowRoot?.querySelector('.trailing-icon');
+		const progress = trailing?.querySelector('moni-progress');
+		expect(progress).toBeTruthy();
+	});
+
+	it('does not render a leading icon by default', async () => {
+		await el.updateComplete;
+		const leading = el.shadowRoot?.querySelector('.leading-icon');
+		expect(leading).toBeFalsy();
+	});
+
+	it('forwards value to the input', async () => {
+		el.value = 'hello world';
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector(
+			'input'
+		) as HTMLInputElement;
+		expect(input.value).toBe('hello world');
+	});
+
+	it('adds active class to input when value is set', async () => {
+		el.value = 'something';
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector('input');
+		expect(input?.classList.contains('active')).toBe(true);
+	});
+
+	it('renders label and toggles active class based on value', async () => {
+		el.label = 'Email';
+		await el.updateComplete;
+		const label = el.shadowRoot?.querySelector('label');
+		expect(label?.textContent?.trim()).toBe('Email');
+
+		el.value = 'a@b.com';
+		await el.updateComplete;
+		expect(label?.classList.contains('active')).toBe(true);
+	});
+});