@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,149 @@
+import { html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+
+/**
+ * Visual-only text field. Renders the `.field` family of BeerCSS helpers
+ * with a native `<input>`.
+ *
+ * This component is **visual-only**: it does NOT listen to `@input` to
+ * sync the `value` attribute back from the underlying input. Consumers
+ * either use form submission or wire their own change handling.
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, type, icon, trailing-icon,
+ *    prefix, suffix, helper, error, error-text, disabled, placeholder — see below.
+ *  - loading:   present → shows indeterminate circular progress
+ */
+@customElement('moni-text-field')
+export class MoniTextField extends MoniElement {
+	@property({ reflect: true }) name = '';
+	@property({ reflect: true }) label = '';
+	@property({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';
+	@property({ reflect: true })
+	size: 'small' | 'medium' | 'large' | 'extra' = 'medium';
+	@property({ reflect: true })
+	shape: 'round' | 'square' | 'no-round' = 'no-round';
+	@property({ reflect: true })
+	type:
+		| 'text'
+		| 'password'
+		| 'email'
+		| 'number'
+		| 'tel'
+		| 'url'
+		| 'search' = 'text';
+	@property({ reflect: true }) icon = '';
+	@property({ reflect: true, attribute: 'trailing-icon' }) trailingIcon = '';
+	@property({ reflect: true }) prefix = '';
+	@property({ reflect: true }) suffix = '';
+	@property({ reflect: true }) helper = '';
+	@property({ reflect: true, attribute: 'error-text' }) errorText = '';
+	@property({ type: Boolean, reflect: true }) error = false;
+	@property({ type: Boolean, reflect: true }) loading = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+	@property({ reflect: true }) value = '';
+	@property({ reflect: true }) placeholder = '';
+
+	@query('input') private _input!: HTMLInputElement;
+
+	override updated(changed: Map<string, unknown>) {
+		if (this._input) {
+			if (changed.has('value')) this._input.value = this.value;
+			if (changed.has('disabled')) this._input.disabled = this.disabled;
+		}
+	}
+
+	static override styles = [sharedStyles, fieldStyles];
+
+	override render() {
+		const hasLeading = Boolean(this.icon) || Boolean(this.prefix);
+		const hasTrailing =
+			Boolean(this.trailingIcon) || Boolean(this.suffix);
+		const isActive = Boolean(this.value) || Boolean(this.placeholder);
+		const fieldClasses = {
+			field: true,
+			label: Boolean(this.label),
+			fill: this.variant === 'filled',
+			border: this.variant === 'outlined',
+			small: this.size === 'small',
+			large: this.size === 'large',
+			extra: this.size === 'extra',
+			prefix: hasLeading,
+			suffix: hasTrailing,
+			invalid: this.error,
+			round: this.shape === 'round',
+			square: this.shape === 'no-round'
+		};
+		const placeholder = this.placeholder || (this.label ? ' ' : '');
+
+		const leading = this.icon
+			? html`<i class="leading-icon" part="leading-icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></i>`
+			: this.prefix
+				? html`<span class="leading-icon" part="prefix"
+						>${this.prefix}</span
+					>`
+				: nothing;
+
+		const trailing = this.loading
+			? html`<i class="trailing-icon" part="trailing-icon"
+					><moni-progress
+						variant="circular"
+						indeterminate
+						size="small"
+						style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
+					></moni-progress
+				></i>`
+			: this.trailingIcon
+				? html`<i class="trailing-icon" part="trailing-icon"
+						><moni-icon name="${this.trailingIcon}"></moni-icon
+					></i>`
+				: this.suffix
+					? html`<span class="trailing-icon" part="suffix"
+							>${this.suffix}</span
+						>`
+					: nothing;
+
+		return html`<div class=${classMap(fieldClasses)} part="field">
+			${leading}
+			<input
+				part="input"
+				type=${this.type}
+				placeholder=${placeholder}
+				?disabled=${this.disabled}
+				.value=${this.value}
+				name=${ifDefined(this.name || undefined)}
+				class=${isActive ? 'active' : ''}
+			/>
+			${this.label
+				? html`<label
+						part="label"
+						class=${classMap({ active: isActive })}
+						>${this.label}</label
+					>`
+				: nothing}
+			${trailing}
+			${this.error
+				? html`<output part="helper" class="invalid"
+						>${this.errorText || this.helper}</output
+					>`
+				: this.helper
+					? html`<output part="helper">${this.helper}</output>`
+					: nothing}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-text-field': MoniTextField;
+	}
+}
+
+export default MoniTextField;

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

@@ -0,0 +1,147 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-textarea.js';
+import type { MoniTextarea } from './moni-textarea.js';
+
+describe('moni-textarea', () => {
+	let el: MoniTextarea;
+
+	beforeEach(() => {
+		el = document.createElement('moni-textarea') as MoniTextarea;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders a field wrapper and a textarea', async () => {
+		await el.updateComplete;
+		const field = el.shadowRoot?.querySelector('.field');
+		const textarea = el.shadowRoot?.querySelector('textarea');
+		expect(field).toBeTruthy();
+		expect(textarea).toBeTruthy();
+	});
+
+	it('renders a leading icon when icon attribute is set', async () => {
+		el.icon = 'edit';
+		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', 'send');
+		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 = '~';
+		await el.updateComplete;
+		const leading = el.shadowRoot?.querySelector('.leading-icon');
+		expect(leading?.textContent?.trim()).toBe('~');
+	});
+
+	it('renders suffix text when suffix attribute is set', async () => {
+		el.suffix = 'chars';
+		await el.updateComplete;
+		const trailing = el.shadowRoot?.querySelector('.trailing-icon');
+		expect(trailing?.textContent?.trim()).toBe('chars');
+	});
+
+	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('forwards rows attribute to the textarea', async () => {
+		el.rows = 5;
+		await el.updateComplete;
+		const textarea = el.shadowRoot?.querySelector(
+			'textarea'
+		) as HTMLTextAreaElement;
+		expect(textarea.rows).toBe(5);
+	});
+
+	it('forwards value to the textarea', async () => {
+		el.value = 'multi\nline\ntext';
+		await el.updateComplete;
+		const textarea = el.shadowRoot?.querySelector(
+			'textarea'
+		) as HTMLTextAreaElement;
+		expect(textarea.value).toBe('multi\nline\ntext');
+	});
+
+	it('adds active class to textarea when value is set', async () => {
+		el.value = 'content';
+		await el.updateComplete;
+		const textarea = el.shadowRoot?.querySelector('textarea');
+		expect(textarea?.classList.contains('active')).toBe(true);
+	});
+
+	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);
+	});
+
+	// ─── P3.3: maxlength + character counter ───
+
+	it('does not render a counter by default', async () => {
+		await el.updateComplete;
+		const counter = el.shadowRoot?.querySelector('.counter');
+		expect(counter).toBeFalsy();
+	});
+
+	it('renders a counter when maxlength is set', async () => {
+		el.maxlength = 100;
+		await el.updateComplete;
+		const counter = el.shadowRoot?.querySelector('.counter');
+		expect(counter).toBeTruthy();
+	});
+
+	it('counter shows value.length / maxlength', async () => {
+		el.maxlength = 100;
+		el.value = 'Hello';
+		await el.updateComplete;
+		const counter = el.shadowRoot?.querySelector('.counter');
+		expect(counter?.textContent?.trim()).toBe('5 / 100');
+	});
+
+	it('no-counter suppresses the counter even when maxlength is set', async () => {
+		el.maxlength = 100;
+		el.noCounter = true;
+		await el.updateComplete;
+		const counter = el.shadowRoot?.querySelector('.counter');
+		expect(counter).toBeFalsy();
+	});
+
+	it('forwards maxlength to the inner textarea as maxLength', async () => {
+		el.maxlength = 50;
+		await el.updateComplete;
+		const textarea = el.shadowRoot?.querySelector(
+			'textarea'
+		) as HTMLTextAreaElement;
+		expect(textarea.maxLength).toBe(50);
+	});
+});

package/src/components/moni-textarea.ts

@@ -0,0 +1,176 @@
+import { html, nothing } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { MoniElement, sharedStyles, fieldStyles } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+
+/**
+ * Visual-only textarea. Same field shell as moni-text-field but renders a
+ * `<textarea>`. Visual-only: no `@input` listener.
+ *
+ * M3 spec (`m3-docs/components/text-fields/specs.md`): the textarea supports
+ * both **filled** and **outlined** variants. When `maxlength` is set, a
+ * character counter is shown next to the supporting text
+ * (`{value.length} / {maxlength}`).
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, disabled, helper, error,
+ *    error-text, placeholder — see moni-text-field.
+ *  - icon:           leading Material Symbols name
+ *  - trailing-icon:  trailing Material Symbols name
+ *  - prefix:         short text rendered before the input (e.g. "https://")
+ *  - suffix:         short text rendered after the input (e.g. ".com")
+ *  - loading:        present → shows indeterminate circular progress
+ *  - rows:           native textarea rows attribute (default 3)
+ *  - maxlength:      when set, displays a character counter
+ *                    (auto-shown; can be hidden via `no-counter`)
+ *  - no-counter:     suppress the character counter even when maxlength is set
+ */
+@customElement('moni-textarea')
+export class MoniTextarea extends MoniElement {
+	@property({ reflect: true }) name = '';
+	@property({ reflect: true }) label = '';
+	@property({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';
+	@property({ reflect: true })
+	size: 'small' | 'medium' | 'large' | 'extra' = 'medium';
+	@property({ reflect: true })
+	shape: 'round' | 'square' | 'no-round' = 'no-round';
+	@property({ reflect: true }) icon = '';
+	@property({ reflect: true, attribute: 'trailing-icon' }) trailingIcon = '';
+	@property({ reflect: true }) prefix = '';
+	@property({ reflect: true }) suffix = '';
+	@property({ type: Number, reflect: true }) rows = 3;
+	@property({ type: Number, reflect: true }) maxlength: number | null = null;
+	@property({ type: Boolean, reflect: true, attribute: 'no-counter' })
+	noCounter = false;
+	@property({ type: Boolean, reflect: true }) loading = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+	@property({ reflect: true }) helper = '';
+	@property({ reflect: true, attribute: 'error-text' }) errorText = '';
+	@property({ type: Boolean, reflect: true }) error = false;
+	@property({ reflect: true }) value = '';
+	@property({ reflect: true }) placeholder = '';
+
+	@query('textarea') private _input!: HTMLTextAreaElement;
+
+	override updated(changed: Map<string, unknown>) {
+		if (this._input) {
+			if (changed.has('value')) this._input.value = this.value;
+			if (changed.has('disabled')) this._input.disabled = this.disabled;
+			if (changed.has('maxlength') && this.maxlength != null) {
+				this._input.maxLength = this.maxlength;
+			}
+		}
+	}
+
+	static override styles = [sharedStyles, fieldStyles];
+
+	override render() {
+		const hasLeading = Boolean(this.icon) || Boolean(this.prefix);
+		const hasTrailing =
+			Boolean(this.trailingIcon) ||
+			Boolean(this.suffix) ||
+			this.loading;
+		const isActive = Boolean(this.value) || Boolean(this.placeholder);
+		const showCounter =
+			!this.noCounter && this.maxlength != null && this.maxlength > 0;
+		const fieldClasses = {
+			field: true,
+			label: Boolean(this.label),
+			fill: this.variant === 'filled',
+			border: this.variant === 'outlined',
+			small: this.size === 'small',
+			large: this.size === 'large',
+			extra: this.size === 'extra',
+			prefix: hasLeading,
+			suffix: hasTrailing,
+			invalid: this.error,
+			round: this.shape === 'round',
+			square: this.shape === 'no-round'
+		};
+		const placeholder = this.placeholder || (this.label ? ' ' : '');
+
+		const leading = this.icon
+			? html`<i class="leading-icon" part="leading-icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></i>`
+			: this.prefix
+				? html`<span class="leading-icon" part="prefix"
+						>${this.prefix}</span
+					>`
+				: nothing;
+
+		const trailing = this.loading
+			? html`<i class="trailing-icon" part="trailing-icon"
+					><moni-progress
+						variant="circular"
+						indeterminate
+						size="small"
+						style="inline-size: 1.25rem; block-size: 1.25rem; color: currentColor;"
+					></moni-progress
+				></i>`
+			: this.trailingIcon
+				? html`<i class="trailing-icon" part="trailing-icon"
+						><moni-icon name="${this.trailingIcon}"></moni-icon
+					></i>`
+				: this.suffix
+					? html`<span class="trailing-icon" part="suffix"
+							>${this.suffix}</span
+						>`
+					: nothing;
+
+		// M3 spec: supporting text on the left, character counter on the right.
+		const counter = showCounter
+			? html`<output part="counter" class="counter"
+						>${this.value.length} / ${this.maxlength}</output
+					>`
+			: nothing;
+		const helperText = this.error
+			? html`<output part="helper" class="invalid"
+						>${this.errorText || this.helper}</output
+					>`
+			: this.helper
+				? html`<output part="helper">${this.helper}</output>`
+				: nothing;
+		const hasFooter = helperText || counter;
+
+		return html`<div class=${classMap(fieldClasses)} part="field">
+			${leading}
+			<textarea
+				part="input"
+				rows=${this.rows}
+				maxlength=${ifDefined(this.maxlength ?? undefined)}
+				placeholder=${placeholder}
+				?disabled=${this.disabled}
+				.value=${this.value}
+				name=${ifDefined(this.name || undefined)}
+				class=${isActive ? 'active' : ''}
+			></textarea>
+			${this.label
+				? html`<label
+						part="label"
+						class=${classMap({ active: isActive })}
+						>${this.label}</label
+					>`
+				: nothing}
+			${trailing}
+			${hasFooter
+				? html`<div class="footer" part="footer">
+						${helperText}
+						<div class="spacer"></div>
+						${counter}
+					</div>`
+				: nothing}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-textarea': MoniTextarea;
+	}
+}
+
+export default MoniTextarea;

package/src/components/moni-time-picker.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-time-picker.js';
+import type { MoniTimePicker } from './moni-time-picker.js';
+
+describe('moni-time-picker', () => {
+	let el: MoniTimePicker;
+
+	beforeEach(() => {
+		el = document.createElement('moni-time-picker') as MoniTimePicker;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('initializes with default values', async () => {
+		await el.updateComplete;
+		expect(el.value).toBe('00:00');
+		expect(el.mode).toBe('dial');
+		expect(el.use24Hour).toBe(false);
+	});
+
+	it('parses input value correctly', async () => {
+		el.value = '14:45';
+		await el.updateComplete;
+		// Since use24Hour is false, PM is set
+		expect(el.value).toBe('14:45');
+	});
+
+	it('toggles mode', async () => {
+		await el.updateComplete;
+		const toggleBtn = el.shadowRoot?.querySelector('.mode-toggle-btn') as HTMLButtonElement;
+		expect(toggleBtn).toBeTruthy();
+
+		toggleBtn.click();
+		await el.updateComplete;
+		expect(el.mode).toBe('input');
+
+		toggleBtn.click();
+		await el.updateComplete;
+		expect(el.mode).toBe('dial');
+	});
+
+	it('allows typing time in input mode', async () => {
+		el.mode = 'input';
+		el.use24Hour = true;
+		await el.updateComplete;
+
+		const inputs = el.shadowRoot?.querySelectorAll('.display-box input') as NodeListOf<HTMLInputElement>;
+		expect(inputs.length).toBe(2);
+
+		inputs[0].value = '10';
+		inputs[0].dispatchEvent(new Event('change'));
+		inputs[1].value = '15';
+		inputs[1].dispatchEvent(new Event('change'));
+
+		await el.updateComplete;
+		expect(el.value).toBe('10:15');
+	});
+});