@moni-labs/moni-ui 0.2.0

package/src/components/moni-chip.ts

@@ -0,0 +1,335 @@
+import { html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+import './moni-progress.js';
+
+/**
+ * Visual-only chip. Renders a native `<button>` styled per Material 3 Expressive.
+ *
+ * M3 spec (`m3-docs/components/chips/specs.md`) defines **4 variants**:
+ *  - **assist**     — smart/automated actions; outlined; `outline` 1dp stroke.
+ *  - **filter**     — filters for a collection; outlined; leading check when selected.
+ *  - **input**      — discrete user input; outlined; trailing remove icon.
+ *  - **suggestion** — product-generated suggestions; outlined; no icons.
+ *
+ * All variants share M3 measurements: 32dp height, 8dp corner, 18dp icon.
+ * Container height scales with `size` (`small` = 32dp = M3 default,
+ * `medium`/`large` are Moni extensions with larger touch targets).
+ *
+ * **A11y** — `assist` and `suggestion` use `var(--outline)` for the
+ * stroke to ensure 3:1 contrast (per `m3-docs/components/chips/accessibility.md`
+ * § *Showing chip interactivity*). `filter` and `input` use `outline-variant`
+ * for the resting state but show a clear `secondary-container` background
+ * when selected, passing contrast.
+ *
+ * Attributes:
+ *  - variant:   assist (default) | filter | input | suggestion
+ *               | outlined (alias for assist) | fill (alias for filter)
+ *  - size:      small (default, 32dp = M3) | medium | large
+ *  - shape:     round (default) | square | circle | no-round
+ *               | left-round | right-round | top-round | bottom-round
+ *  - selected:  present → background uses secondary-container (M3 filter/input)
+ *  - removable: present → adds a trailing ✕ icon (M3 input chip, visual only)
+ *  - disabled:  present → native disabled
+ *  - loading:   present → shows indeterminate circular progress
+ *  - icon:      Material Symbols name (leading icon)
+ */
+@customElement('moni-chip')
+export class MoniChip extends MoniElement {
+	@property({ reflect: true })
+	variant:
+		| 'assist'
+		| 'filter'
+		| 'input'
+		| 'suggestion'
+		| 'outlined'
+		| 'fill' = 'assist';
+	@property({ reflect: true })
+	size: 'small' | 'medium' | 'large' = 'small';
+	@property({ reflect: true })
+	shape:
+		| 'round'
+		| 'no-round'
+		| 'square'
+		| 'circle'
+		| 'left-round'
+		| 'right-round'
+		| 'top-round'
+		| 'bottom-round' = 'round';
+	@property({ type: Boolean, reflect: true }) selected = false;
+	@property({ type: Boolean, reflect: true }) removable = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+	@property({ type: Boolean, reflect: true }) loading = false;
+	@property({ reflect: true }) icon = '';
+
+	@state()
+	private _hasSlottedIcon = false;
+
+	private _handleSlotChange(e: Event) {
+		const slot = e.target as HTMLSlotElement;
+		this._hasSlottedIcon = slot.assignedNodes({ flatten: true }).length > 0;
+	}
+
+	/** Normalize legacy variant names to M3 spec. */
+	private get _variant(): 'assist' | 'filter' | 'input' | 'suggestion' {
+		if (this.variant === 'outlined') return 'assist';
+		if (this.variant === 'fill') return 'filter';
+		return this.variant as 'assist' | 'filter' | 'input' | 'suggestion';
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: inline-flex;
+				vertical-align: middle;
+				font-family: var(--font);
+				position: relative;
+				user-select: none;
+			}
+
+			.chip {
+				--_padding: 1rem; /* 16dp when no leading icon (M3 spec) */
+				--_size: 2rem;
+				--_round: calc(var(--_size) / 2);
+				--_icon-size: 1.125rem;
+				box-sizing: border-box;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				block-size: var(--_size);
+				min-inline-size: var(--_size);
+				font-size: 0.875rem;
+				font-weight: 500;
+				background-color: transparent;
+				border: 0.0625rem solid var(--outline);
+				color: var(--on-surface);
+				padding: 0 var(--_padding);
+				border-radius: 0.5rem;
+				transition:
+					transform var(--speed2),
+					background-color var(--speed2),
+					border-color var(--speed2),
+					border-radius var(--speed2),
+					padding var(--speed3);
+				user-select: none;
+				gap: 0.5rem;
+				line-height: normal;
+				letter-spacing: normal;
+				font-family: inherit;
+				cursor: pointer;
+				position: relative;
+				overflow: hidden;
+			}
+
+			.chip::after {
+				content: '';
+				position: absolute;
+				inset: 0;
+				background: currentColor;
+				opacity: 0;
+				transition: opacity var(--speed2);
+				border-radius: inherit;
+				pointer-events: none;
+			}
+
+			.chip.has-icon {
+				--_padding: 0.5rem; /* 8dp when a leading icon is present (M3 spec) */
+			}
+
+			.chip.medium {
+				--_size: 2.5rem;
+				--_padding: 0.75rem;
+				--_icon-size: 1.25rem;
+			}
+			.chip.medium.has-icon {
+				--_padding: 0.75rem;
+			}
+			.chip.large {
+				--_padding: 1rem;
+				--_size: 3rem;
+				--_icon-size: 1.5rem;
+			}
+
+			.chip:hover:not(:disabled)::after {
+				opacity: 0.08;
+			}
+
+			.chip:active:not(:disabled) {
+				transform: scale(0.97);
+			}
+
+			/* ─── M3 variant colors ─── */
+			/* Filter and input chips use outline-variant + on-surface-variant
+			   for the resting state (M3 spec). Assist and suggestion use
+			   outline + on-surface for 3:1 contrast (a11y). */
+			.chip.filter,
+			.chip.input {
+				border-color: var(--outline-variant);
+				color: var(--on-surface-variant);
+			}
+
+			.chip.suggestion {
+				border-color: var(--outline);
+				color: var(--on-surface-variant);
+			}
+
+			/* Selected state — M3 filter/input show a leading check and
+			   secondary-container background. */
+			.chip.selected {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+				border-color: transparent;
+			}
+
+			/* Filter without selection can have leading check on hover to
+			   indicate the action. */
+			.chip.filter.selected::before,
+			.chip.input.selected::before {
+				content: '\\e5ca';
+				font-family: var(--font-icon);
+				font-size: var(--_icon-size);
+				font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+				margin-inline-end: 0.25rem;
+				color: currentColor;
+			}
+
+			.chip.no-round {
+				border-radius: 0;
+			}
+			.chip.square {
+				border-radius: 0.25rem;
+			}
+			.chip.circle {
+				inline-size: var(--_size);
+				padding: 0;
+				aspect-ratio: 1;
+				border-radius: 50%;
+			}
+			.chip.left-round {
+				border-radius: var(--_round) 0 0 var(--_round) !important;
+			}
+			.chip.right-round {
+				border-radius: 0 var(--_round) var(--_round) 0 !important;
+			}
+			.chip.top-round {
+				border-radius: var(--_round) var(--_round) 0 0 !important;
+			}
+			.chip.bottom-round {
+				border-radius: 0 0 var(--_round) var(--_round) !important;
+			}
+
+			.chip:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+				pointer-events: none;
+			}
+
+			.chip:focus-visible {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.125rem;
+			}
+
+			.icon,
+			::slotted([slot='icon']) {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--_icon-size);
+				flex: none;
+				color: inherit;
+			}
+
+			.remove {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				font-size: var(--_icon-size);
+				opacity: 0.7;
+				margin-inline-start: 0.125rem;
+			}
+
+			.loading-spinner {
+				inline-size: var(--_icon-size);
+				block-size: var(--_icon-size);
+				color: currentColor;
+			}
+			.loading-spinner::part(progress) {
+				border-width: 0.1875rem;
+			}
+		`
+	];
+
+	override render() {
+		const variant = this._variant;
+		const hasIcon = Boolean(this.icon) || this._hasSlottedIcon;
+		const classes = [
+			'chip',
+			variant,
+			this.size,
+			this.shape,
+			this.selected ? 'selected' : '',
+			hasIcon ? 'has-icon' : ''
+		]
+			.filter(Boolean)
+			.join(' ');
+
+		if (this.loading) {
+			return html`<button
+				class=${classes}
+				part="chip"
+				type="button"
+				?disabled=${this.disabled}
+				aria-busy="true"
+			>
+				<moni-progress
+					class="loading-spinner"
+					part="loading"
+					variant="circular"
+					indeterminate
+					size="small"
+				></moni-progress>
+			</button>`;
+		}
+
+		// M3 input chips must always show a trailing remove icon.
+		const showRemove = this.removable || variant === 'input';
+
+		const iconEl = this.icon
+			? html`<span class="icon" part="icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></span>`
+			: html`<slot
+					name="icon"
+					part="icon"
+					class="icon"
+					@slotchange=${this._handleSlotChange}
+				></slot>`;
+
+		const removeEl = showRemove
+			? html`<span class="remove" part="remove" aria-hidden="true"
+					><moni-icon name="close"></moni-icon
+				></span>`
+			: nothing;
+
+		return html`<button
+			class=${classes}
+			part="chip"
+			type="button"
+			?disabled=${this.disabled}
+		>
+			${iconEl}
+			<span part="label"><slot></slot></span>
+			${removeEl}
+		</button>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-chip': MoniChip;
+	}
+}
+
+export default MoniChip;

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

@@ -0,0 +1,56 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-color-field.js';
+import type { MoniColorField } from './moni-color-field.js';
+
+describe('moni-color-field', () => {
+	let el: MoniColorField;
+
+	beforeEach(() => {
+		el = document.createElement('moni-color-field') as MoniColorField;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders a swatch and a text input', async () => {
+		await el.updateComplete;
+		const swatch = el.shadowRoot?.querySelector('.swatch');
+		const text = el.shadowRoot?.querySelector('input[type="text"]');
+		expect(swatch).toBeTruthy();
+		expect(text).toBeTruthy();
+	});
+
+	it('adds active class to the text input when value is set', async () => {
+		el.value = '#ff00aa';
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector('input[type="text"]');
+		expect(text?.classList.contains('active')).toBe(true);
+	});
+
+	it('forwards value to the text input', async () => {
+		el.value = '#123456';
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector(
+			'input[type="text"]'
+		) as HTMLInputElement;
+		expect(text.value).toBe('#123456');
+	});
+
+	it('keeps the text input readonly (so the label can be lifted via .active)', async () => {
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector(
+			'input[type="text"]'
+		) as HTMLInputElement;
+		expect(text.hasAttribute('readonly')).toBe(true);
+	});
+
+	it('renders label element adjacent to the text input for BeerCSS selector matching', async () => {
+		el.label = 'Pick a color';
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector('input[type="text"]');
+		const label = el.shadowRoot?.querySelector('label');
+		expect(text?.nextElementSibling).toBe(label);
+	});
+});

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

@@ -0,0 +1,135 @@
+import { html, css, 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';
+
+/**
+ * Visual-only color field. Renders a hidden `<input type="color">` plus a
+ * preview swatch and a read-only text display of the current value.
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, disabled, helper, error,
+ *    error-text, placeholder — see moni-text-field.
+ */
+@customElement('moni-color-field')
+export class MoniColorField extends MoniElement {
+	@property({ reflect: true }) name = '';
+	@property({ reflect: true }) label = '';
+	@property({ reflect: true }) variant: 'filled' | 'outlined' = 'outlined';
+	@property({ reflect: true })
+	size: 'small' | 'medium' | 'large' | 'extra' = 'medium';
+	@property({ reflect: true })
+	shape: 'round' | 'square' | 'no-round' = 'no-round';
+	@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 = '#6750a4';
+
+	@query('input[type="color"]') private _colorInput!: HTMLInputElement;
+	@query('input[type="text"]') private _textInput!: HTMLInputElement;
+
+	override updated(changed: Map<string, unknown>) {
+		if (changed.has('value')) {
+			if (this._colorInput) this._colorInput.value = this.value;
+			if (this._textInput) this._textInput.value = this.value;
+		}
+		if (changed.has('disabled')) {
+			if (this._colorInput) this._colorInput.disabled = this.disabled;
+			if (this._textInput) this._textInput.disabled = this.disabled;
+		}
+	}
+
+	static override styles = [
+		sharedStyles,
+		fieldStyles,
+		css`
+			.swatch {
+				inline-size: 1.5rem;
+				block-size: 1.5rem;
+				border-radius: 50%;
+				border: 0.0625rem solid var(--outline);
+				background-color: var(--_swatch, currentColor);
+				position: absolute;
+				inset: calc(50% - 0.75rem) auto auto 0.75rem;
+				pointer-events: none;
+				z-index: 1;
+			}
+			input[type='text'] {
+				padding-inline-start: 2.5rem !important;
+			}
+			input[type='color'] {
+				position: absolute;
+				inset: 0;
+				opacity: 0;
+				z-index: 2;
+				cursor: pointer;
+			}
+		`
+	];
+
+	override render() {
+		const isActive = Boolean(this.value);
+		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: true,
+			invalid: this.error,
+			round: this.shape === 'round',
+			square: this.shape === 'no-round'
+		};
+
+		return html`<div class=${classMap(fieldClasses)} part="field">
+			<span
+				class="swatch"
+				style="--_swatch: ${this.value};"
+				aria-hidden="true"
+			></span>
+			<input
+				type="color"
+				part="color"
+				.value=${this.value}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name ? `${this.name}-color` : undefined)}
+				tabindex="-1"
+			/>
+			<input
+				type="text"
+				part="text"
+				readonly
+				.value=${this.value}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name || undefined)}
+				class=${isActive ? 'active' : ''}
+			/>
+			${this.label
+				? html`<label
+						part="label"
+						class=${classMap({ active: isActive })}
+						>${this.label}</label
+					>`
+				: nothing}
+			${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-color-field': MoniColorField;
+	}
+}
+
+export default MoniColorField;

package/src/components/moni-context-menu.test.ts

@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-context-menu.js';
+import type { MoniContextMenu } from './moni-context-menu.js';
+
+describe('moni-context-menu (P3.5 — flip)', () => {
+	let parent: HTMLElement;
+	let el: MoniContextMenu;
+
+	beforeEach(() => {
+		parent = document.createElement('div');
+		el = document.createElement('moni-context-menu') as MoniContextMenu;
+		parent.appendChild(el);
+		document.body.appendChild(parent);
+	});
+
+	afterEach(() => {
+		parent.remove();
+	});
+
+	it('renders a <moni-menu> in the shadow DOM', async () => {
+		await el.updateComplete;
+		const menu = el.shadowRoot?.querySelector('moni-menu');
+		expect(menu).toBeTruthy();
+	});
+
+	it('reflects placement=bottom (default)', async () => {
+		await el.updateComplete;
+		expect(el.placement).toBe('bottom');
+		const menu = el.shadowRoot?.querySelector('moni-menu');
+		expect(menu?.getAttribute('placement')).toBe('bottom');
+	});
+
+	it('reflects placement changes on the inner menu', async () => {
+		el.placement = 'top';
+		await el.updateComplete;
+		const menu = el.shadowRoot?.querySelector('moni-menu');
+		expect(menu?.getAttribute('placement')).toBe('top');
+	});
+
+	it('reflects the flip attribute on the host', async () => {
+		el.flip = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('flip')).toBe(true);
+	});
+
+	it('opens the menu on right-click on the parent', async () => {
+		await el.updateComplete;
+		const menu = el.shadowRoot?.querySelector(
+			'moni-menu'
+		) as HTMLElement | null;
+		expect(menu?.hasAttribute('active')).toBe(false);
+
+		const evt = new MouseEvent('contextmenu', {
+			bubbles: true,
+			clientX: 50,
+			clientY: 75
+		});
+		parent.dispatchEvent(evt);
+		await el.updateComplete;
+		expect(menu?.hasAttribute('active')).toBe(true);
+	});
+
+	it('closes the menu on document click', async () => {
+		await el.updateComplete;
+		const menu = el.shadowRoot?.querySelector(
+			'moni-menu'
+		) as HTMLElement | null;
+		parent.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, clientX: 10, clientY: 10 }));
+		await el.updateComplete;
+		expect(menu?.hasAttribute('active')).toBe(true);
+
+		document.body.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+		await el.updateComplete;
+		expect(menu?.hasAttribute('active')).toBe(false);
+	});
+
+	it('closes the menu on Escape', async () => {
+		await el.updateComplete;
+		const menu = el.shadowRoot?.querySelector(
+			'moni-menu'
+		) as HTMLElement | null;
+		parent.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, clientX: 10, clientY: 10 }));
+		await el.updateComplete;
+		expect(menu?.hasAttribute('active')).toBe(true);
+
+		document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
+		await el.updateComplete;
+		expect(menu?.hasAttribute('active')).toBe(false);
+	});
+
+	it('does not call showPopover (visual-only; no Popover API)', async () => {
+		// Sanity: the component is visual-only. The moni-menu inside handles
+		// the active attribute via CSS visibility/opacity. No native popover
+		// toggling.
+		await el.updateComplete;
+		const menu = el.shadowRoot?.querySelector('moni-menu');
+		expect(menu?.hasAttribute('popover')).toBe(false);
+	});
+});