@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,78 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-checkbox.js';
+import type { MoniCheckbox } from './moni-checkbox.js';
+
+describe('moni-checkbox', () => {
+	let el: MoniCheckbox;
+
+	beforeEach(() => {
+		el = document.createElement('moni-checkbox') as MoniCheckbox;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders an input and a visual span', async () => {
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector('input');
+		const span = el.shadowRoot?.querySelector('span');
+		expect(input).toBeTruthy();
+		expect(span).toBeTruthy();
+	});
+
+	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('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('renders a label span when label attribute is set', async () => {
+		el.label = 'Accept terms';
+		await el.updateComplete;
+		const span = el.shadowRoot?.querySelector('span');
+		expect(span?.textContent?.trim()).toBe('Accept terms');
+	});
+
+	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);
+
+		el.checked = false;
+		await el.updateComplete;
+		expect(el.hasAttribute('checked')).toBe(false);
+	});
+
+	it('reflects the disabled attribute', async () => {
+		el.disabled = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('disabled')).toBe(true);
+	});
+});

package/src/components/moni-checkbox.ts

@@ -0,0 +1,192 @@
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { live } from 'lit/directives/live.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Checkbox that faithfully ports BeerCSS's `.checkbox` styles.
+ *
+ * BeerCSS architecture:
+ *  - `.checkbox` is inline-flex, aligns items center
+ *  - `input` has width/height = --_size, opacity: 0  (occupies real space, no absolute!)
+ *  - `span::before` is the visible checkbox box (position: absolute, inset from the input)
+ *  - `span::after` is the ripple hover effect
+ *  - Content is set via CSS: "check_box_outline_blank" / "check_box" (Material Symbols font)
+ *
+ * Attributes:
+ *  - label:    text label
+ *  - checked:  present → input is checked
+ *  - disabled: present → input is disabled
+ *  - size:     small | medium (default) | large | extra
+ *  - name:     forwarded to input.name
+ *  - value:    forwarded to input.value
+ */
+@customElement('moni-checkbox')
+export class MoniCheckbox extends MoniElement {
+	@property({ reflect: true }) label = '';
+	@property({ type: Boolean, reflect: true }) checked = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+	@property({ reflect: true })
+	size: 'small' | 'medium' | 'large' | 'extra' = 'medium';
+	@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;
+		}
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				--_size: 1.5rem;
+				display: inline-flex;
+				font-family: var(--font);
+			}
+			:host([size='small'])  { --_size: 1rem; }
+			:host([size='large'])  { --_size: 2rem; }
+			:host([size='extra'])  { --_size: 2.5rem; }
+
+			/* BeerCSS .checkbox */
+			label {
+				inline-size: auto;
+				block-size: auto;
+				line-height: normal;
+				white-space: nowrap;
+				cursor: pointer;
+				display: inline-flex;
+				align-items: center;
+			}
+
+			/* BeerCSS: input has real size, opacity 0 — occupies real layout space */
+			input {
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				opacity: 0;
+				cursor: pointer;
+				flex: none;
+			}
+
+			/* BeerCSS: span wraps the visible indicator + label text */
+			span {
+				display: inline-flex;
+				align-items: center;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				position: relative;
+			}
+
+			/* BeerCSS: span::before = the checkbox icon (absolute, overlaid on input) */
+			span::before {
+				--_size: inherit;
+				content: 'check_box_outline_blank';
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				box-sizing: border-box;
+				margin: 0 auto;
+				outline: none;
+				color: var(--on-surface-variant);
+				position: absolute;
+				inset: auto auto auto calc(var(--_size) * -1);
+				border-radius: 50%;
+				user-select: none;
+				z-index: 1;
+				font-family: var(--font-icon);
+				font-size: var(--_size);
+				display: flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			/* Checked: filled checkbox icon */
+			input:checked + span::before {
+				content: 'check_box';
+				font-variation-settings: 'FILL' 1;
+				color: var(--primary);
+			}
+
+			/* Indeterminate */
+			input:indeterminate + span::before {
+				content: 'indeterminate_check_box';
+			}
+
+			/* BeerCSS: span::after = ripple/hover ring */
+			span::after {
+				--_size: inherit;
+				content: '';
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				box-sizing: border-box;
+				margin: 0 auto;
+				position: absolute;
+				inset: auto auto auto calc(var(--_size) * -1);
+				border-radius: 50%;
+				user-select: none;
+				transition: all var(--speed1);
+				background-color: currentColor;
+				box-shadow: 0 0 0 0 currentColor;
+				opacity: 0;
+			}
+
+			label:hover > input:not(:disabled) + span::after,
+			input:not(:disabled):focus + span::after {
+				box-shadow: 0 0 0 0.5rem currentColor;
+				opacity: 0.1;
+			}
+
+			/* BeerCSS: span:not(:empty) gets a small inline-start padding for the label */
+			span.has-label {
+				padding-inline-start: 0.25rem;
+			}
+
+			/* Disabled */
+			input:disabled + span {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+
+			/* Focus ring */
+			input:focus-visible + span::before {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.375rem;
+			}
+		`
+	];
+
+	private _onChange(e: Event) {
+		this.checked = (e.target as HTMLInputElement).checked;
+		this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+	}
+
+	override render() {
+		return html`<label part="checkbox">
+			<input
+				type="checkbox"
+				.checked=${live(this.checked)}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name || undefined)}
+				value=${ifDefined(this.value || undefined)}
+				@change=${this._onChange}
+			/>
+			<span class=${this.label ? 'has-label' : ''}>
+				${this.label
+					? html`${this.label}`
+					: html`<slot></slot>`}
+			</span>
+		</label>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-checkbox': MoniCheckbox;
+	}
+}
+
+export default MoniCheckbox;

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

@@ -0,0 +1,168 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-chip.js';
+import type { MoniChip } from './moni-chip.js';
+
+describe('moni-chip', () => {
+	let el: MoniChip;
+
+	beforeEach(() => {
+		el = document.createElement('moni-chip') as MoniChip;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders a native <button>', async () => {
+		await el.updateComplete;
+		const button = el.shadowRoot?.querySelector('button');
+		expect(button).toBeTruthy();
+		expect(button?.getAttribute('type')).toBe('button');
+	});
+
+	it('defaults to variant=assist and size=small (M3 spec)', async () => {
+		await el.updateComplete;
+		expect(el.variant).toBe('assist');
+		expect(el.size).toBe('small');
+		expect(el.getAttribute('variant')).toBe('assist');
+	});
+
+	it('accepts all 4 M3 variants (assist, filter, input, suggestion)', async () => {
+		const variants: Array<'assist' | 'filter' | 'input' | 'suggestion'> = [
+			'assist',
+			'filter',
+			'input',
+			'suggestion'
+		];
+		for (const v of variants) {
+			el.variant = v;
+			await el.updateComplete;
+			expect(el.getAttribute('variant')).toBe(v);
+			const button = el.shadowRoot?.querySelector('button');
+			expect(button?.classList.contains(v)).toBe(true);
+		}
+	});
+
+	it('aliases outlined → assist for backward compat', async () => {
+		el.variant = 'outlined';
+		await el.updateComplete;
+		const button = el.shadowRoot?.querySelector('button');
+		expect(button?.classList.contains('assist')).toBe(true);
+		expect(button?.classList.contains('outlined')).toBe(false);
+	});
+
+	it('aliases fill → filter for backward compat', async () => {
+		el.variant = 'fill';
+		await el.updateComplete;
+		const button = el.shadowRoot?.querySelector('button');
+		expect(button?.classList.contains('filter')).toBe(true);
+		expect(button?.classList.contains('fill')).toBe(false);
+	});
+
+	it('selected chip applies the selected class', async () => {
+		el.selected = true;
+		await el.updateComplete;
+		const button = el.shadowRoot?.querySelector('button');
+		expect(button?.classList.contains('selected')).toBe(true);
+	});
+
+	it('input variant always shows the trailing remove icon (M3 spec)', async () => {
+		el.variant = 'input';
+		el.textContent = 'Tag';
+		await el.updateComplete;
+		const remove = el.shadowRoot?.querySelector('[part="remove"]');
+		expect(remove).toBeTruthy();
+	});
+
+	it('removable=true forces the trailing remove icon on any variant', async () => {
+		el.variant = 'assist';
+		el.removable = true;
+		el.textContent = 'Tag';
+		await el.updateComplete;
+		const remove = el.shadowRoot?.querySelector('[part="remove"]');
+		expect(remove).toBeTruthy();
+	});
+
+	it('assist and suggestion chips do NOT show remove icon by default', async () => {
+		for (const v of ['assist', 'suggestion'] as const) {
+			el.variant = v;
+			el.removable = false;
+			el.textContent = 'Tag';
+			await el.updateComplete;
+			const remove = el.shadowRoot?.querySelector('[part="remove"]');
+			expect(remove).toBeFalsy();
+		}
+	});
+
+	it('icon attribute renders a leading moni-icon', async () => {
+		el.icon = 'add';
+		el.textContent = 'Add';
+		await el.updateComplete;
+		const icon = el.shadowRoot?.querySelector('moni-icon');
+		expect(icon).toBeTruthy();
+		expect(icon?.getAttribute('name')).toBe('add');
+	});
+
+	it('size=medium sets medium class on the button', async () => {
+		el.size = 'medium';
+		await el.updateComplete;
+		const button = el.shadowRoot?.querySelector('button');
+		expect(button?.classList.contains('medium')).toBe(true);
+	});
+
+	it('size=large sets large class on the button', async () => {
+		el.size = 'large';
+		await el.updateComplete;
+		const button = el.shadowRoot?.querySelector('button');
+		expect(button?.classList.contains('large')).toBe(true);
+	});
+
+	it('shape=square sets square class (M3 button morph target)', async () => {
+		el.shape = 'square';
+		await el.updateComplete;
+		const button = el.shadowRoot?.querySelector('button');
+		expect(button?.classList.contains('square')).toBe(true);
+	});
+
+	it('disabled disables the inner button', async () => {
+		el.disabled = true;
+		await el.updateComplete;
+		const button = el.shadowRoot?.querySelector(
+			'button'
+		) as HTMLButtonElement;
+		expect(button.disabled).toBe(true);
+	});
+
+	it('loading shows moni-progress and sets aria-busy', async () => {
+		el.loading = true;
+		await el.updateComplete;
+		const progress = el.shadowRoot?.querySelector('moni-progress');
+		const button = el.shadowRoot?.querySelector('button');
+		expect(progress).toBeTruthy();
+		expect(button?.getAttribute('aria-busy')).toBe('true');
+	});
+
+	it('renders the default slot content inside [part=label]', async () => {
+		el.textContent = 'Hello chip';
+		await el.updateComplete;
+		const label = el.shadowRoot?.querySelector('[part="label"]');
+		expect(label).toBeTruthy();
+		const slot = label?.querySelector('slot') as HTMLSlotElement | null;
+		const assigned = slot?.assignedNodes({ flatten: true }) ?? [];
+		const text = assigned.map((n) => n.textContent ?? '').join('').trim();
+		expect(text).toBe('Hello chip');
+	});
+
+	it('applies has-icon class only when a leading icon is present', async () => {
+		el.textContent = 'Filter';
+		await el.updateComplete;
+		let button = el.shadowRoot?.querySelector('button');
+		expect(button?.classList.contains('has-icon')).toBe(false);
+
+		el.icon = 'check';
+		await el.updateComplete;
+		button = el.shadowRoot?.querySelector('button');
+		expect(button?.classList.contains('has-icon')).toBe(true);
+	});
+});