@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,90 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-progress.js';
+import type { MoniProgress } from './moni-progress.js';
+
+describe('moni-progress', () => {
+	let el: MoniProgress;
+
+	beforeEach(() => {
+		el = document.createElement('moni-progress') as MoniProgress;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders a progress bar container', async () => {
+		await el.updateComplete;
+		const progress = el.shadowRoot?.querySelector('[role="progressbar"]');
+		expect(progress).toBeTruthy();
+	});
+
+	it('applies the indeterminate class to the progress bar container', async () => {
+		el.indeterminate = true;
+		await el.updateComplete;
+		const progress = el.shadowRoot?.querySelector('[role="progressbar"]');
+		expect(progress?.classList.contains('indeterminate')).toBe(true);
+	});
+
+	it('does not apply the indeterminate class by default', async () => {
+		await el.updateComplete;
+		const progress = el.shadowRoot?.querySelector('[role="progressbar"]');
+		expect(progress?.classList.contains('indeterminate')).toBe(false);
+	});
+
+	it('forwards value and max via aria attributes on progressbar', async () => {
+		el.value = 42;
+		el.max = 100;
+		await el.updateComplete;
+		const progress = el.shadowRoot?.querySelector(
+			'[role="progressbar"]'
+		) as HTMLElement;
+		expect(progress.getAttribute('aria-valuenow')).toBe('42');
+		expect(progress.getAttribute('aria-valuemax')).toBe('100');
+	});
+
+	it('clamps the rendered percentage between 0 and 100', async () => {
+		el.value = 150;
+		el.max = 100;
+		await el.updateComplete;
+		const style = el.shadowRoot
+			?.querySelector('[role="progressbar"]')
+			?.getAttribute('style');
+		expect(style).toContain('--_p: 100');
+
+		el.value = -10;
+		await el.updateComplete;
+		const style2 = el.shadowRoot
+			?.querySelector('[role="progressbar"]')
+			?.getAttribute('style');
+		expect(style2).toContain('--_p: 0');
+	});
+
+	it('renders the progress-circular container for circular variant', async () => {
+		el.variant = 'circular';
+		await el.updateComplete;
+		const progress = el.shadowRoot?.querySelector('[role="progressbar"]');
+		expect(progress?.classList.contains('progress-circular')).toBe(true);
+	});
+
+	it('renders circle wavy for circular-wavy variant', async () => {
+		el.variant = 'circular-wavy';
+		await el.updateComplete;
+		const progress = el.shadowRoot?.querySelector('[role="progressbar"]');
+		expect(progress?.classList.contains('progress-circular')).toBe(true);
+	});
+
+	it('renders progress-wavy container for wavy variant', async () => {
+		el.variant = 'wavy';
+		await el.updateComplete;
+		const progress = el.shadowRoot?.querySelector('[role="progressbar"]');
+		expect(progress?.classList.contains('progress-wavy')).toBe(true);
+	});
+
+	it('reflects the size attribute', async () => {
+		el.size = 'large';
+		await el.updateComplete;
+		expect(el.getAttribute('size')).toBe('large');
+	});
+});

package/src/components/moni-progress.ts

@@ -0,0 +1,322 @@
+import { html, css, svg, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Progress indicator that faithfully ports BeerCSS's progress styles.
+ *
+ * BeerCSS uses the native <progress> element with `::after`, `::before` and
+ * `mask-image` pseudo-elements. Those don't work inside Shadow DOM because:
+ *  - `<progress>` native pseudo-elements (::webkit-progress-value, ::after)
+ *    are blocked by the UA shadow root in Chrome/Firefox within a custom shadow.
+ *  - `mask-image` on those pseudo-elements doesn't apply at all in shadows.
+ *
+ * Solution: use a plain <div> wrapper that replicates BeerCSS's visual rules
+ * exactly, and an SVG for the circular variant (matching BeerCSS's conic-gradient
+ * approach but with SVG stroke for better cross-browser support).
+ *
+ * Attributes:
+ *  - value:         0..max (omit for indeterminate)
+ *  - max:           upper bound (default 100)
+ *  - variant:       linear (default) | circular | wavy | circular-wavy
+ *  - size:          small | medium (default) | large
+ *  - indeterminate: present → infinite animation
+ */
+@customElement('moni-progress')
+export class MoniProgress extends MoniElement {
+	@property({ type: Number, reflect: true }) value = 0;
+	@property({ type: Number, reflect: true }) max = 100;
+	@property({ reflect: true })
+	variant: 'linear' | 'circular' | 'wavy' | 'circular-wavy' = 'linear';
+	@property({ reflect: true })
+	size: 'small' | 'medium' | 'large' = 'medium';
+	@property({ type: Boolean, reflect: true }) indeterminate = false;
+
+	/** Computed fill percentage (0-100) used in styles/SVG */
+	@state() private _pct = 0;
+
+	override willUpdate(changed: Map<string, unknown>) {
+		if (changed.has('value') || changed.has('max') || changed.has('indeterminate')) {
+			this._pct = this.indeterminate
+				? 50
+				: Math.max(0, Math.min(100, (this.value / Math.max(1, this.max)) * 100));
+		}
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			/* ─── Keyframes — identical to BeerCSS ─── */
+			@keyframes to-linear-progress {
+				0% { inset-inline-start: -50%; inline-size: 50%; }
+				25% { inset-inline-start: 30%; inline-size: 60%; }
+				100% { inset-inline-start: 110%; inline-size: 10%; }
+			}
+
+			@keyframes to-rotate {
+				0%   { transform: rotate(0deg); }
+				100% { transform: rotate(360deg); }
+			}
+
+			:host {
+				--_size: 0.25rem;
+				--_circular-size: 2.5rem;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				inline-size: 100%;
+				color: var(--primary);
+			}
+
+			:host([variant='circular']),
+			:host([variant='circular-wavy']) {
+				inline-size: var(--_circular-size);
+				block-size: var(--_circular-size);
+			}
+
+			:host([size='small']) { --_size: 0.25rem; --_circular-size: 1.5rem; }
+			:host([size='large']) { --_size: 0.45rem; --_circular-size: 3.5rem; }
+
+			/* ─── Linear / Wavy wrapper ─── */
+			.progress-linear {
+				position: relative;
+				inline-size: 100%;
+				block-size: var(--_size);
+				background-color: var(--active);
+				border-radius: 1rem;
+				overflow: hidden;
+			}
+
+			.progress-linear > .value {
+				position: absolute;
+				inset-block: 0;
+				inset-inline-start: 0;
+				inline-size: calc(var(--_p, 0) * 1%);
+				background-color: currentColor;
+				border-radius: inherit;
+				transition: inline-size var(--speed2) ease;
+			}
+
+			/* Indeterminate linear: sliding bar via absolute animation */
+			.progress-linear.indeterminate > .value {
+				inline-size: 50%;
+				animation: to-linear-progress 3.2s ease infinite;
+				transition: none;
+			}
+
+			/* ─── Wavy ─── */
+			.progress-wavy {
+				position: relative;
+				inline-size: 100%;
+				block-size: calc(var(--_size) * 2);
+				background: none;
+				overflow: visible;
+			}
+
+			/* Wavy uses an SVG filter for the wave shape */
+			.progress-wavy > svg {
+				position: absolute;
+				inset: 0;
+				inline-size: 100%;
+				block-size: 100%;
+			}
+
+			/* ─── Circular: SVG ─── */
+			.progress-circular {
+				inline-size: var(--_circular-size);
+				block-size: var(--_circular-size);
+				position: relative;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+			}
+
+			.progress-circular > svg {
+				inline-size: 100%;
+				block-size: 100%;
+				transform: rotate(-90deg);
+			}
+
+			.progress-circular.indeterminate {
+				animation: to-rotate 1s linear infinite;
+			}
+
+			.progress-circular .track {
+				fill: none;
+				stroke: var(--active);
+				stroke-width: 4;
+			}
+
+			.progress-circular .value {
+				fill: none;
+				stroke: currentColor;
+				stroke-width: 4;
+				stroke-linecap: round;
+				transition: stroke-dashoffset var(--speed2) ease;
+			}
+
+			/* Indeterminate circular: large visible arc that rotates */
+			.progress-circular.indeterminate .value {
+				stroke-dasharray: 80 100;
+				transition: none;
+			}
+
+			/* ─── part exposure ─── */
+			.progress-linear,
+			.progress-wavy,
+			.progress-circular {
+				flex: none;
+			}
+		`
+	];
+
+	private _renderLinear() {
+		const isIndet = this.indeterminate;
+		return html`
+			<div
+				class="progress-linear${isIndet ? ' indeterminate' : ''}"
+				part="progress"
+				role="progressbar"
+				aria-valuenow=${isIndet ? nothing : this.value}
+				aria-valuemin="0"
+				aria-valuemax=${this.max}
+				style="--_p: ${this._pct};"
+			>
+				<div class="value"></div>
+			</div>
+		`;
+	}
+
+	private _renderWavy() {
+		// BeerCSS wavy uses an SVG mask. We replicate with an SVG clipPath wave.
+		const isIndet = this.indeterminate;
+		const w = 200;
+		const h = 8;
+		const fill = this.indeterminate ? 50 : this._pct;
+		const trackW = (w * 1).toFixed(1);
+		const fillW = ((w * fill) / 100).toFixed(1);
+		return html`
+			<div
+				class="progress-wavy"
+				part="progress"
+				role="progressbar"
+				aria-valuenow=${isIndet ? nothing : this.value}
+				aria-valuemin="0"
+				aria-valuemax=${this.max}
+				style="--_p: ${this._pct};"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 ${w} ${h}"
+					preserveAspectRatio="none"
+					aria-hidden="true"
+				>
+					<!-- Track wave (background) -->
+					<path
+						d="M0,4 Q5,0 10,4 Q15,8 20,4 Q25,0 30,4 Q35,8 40,4 Q45,0 50,4 Q55,8 60,4 Q65,0 70,4 Q75,8 80,4 Q85,0 90,4 Q95,8 100,4 Q105,0 110,4 Q115,8 120,4 Q125,0 130,4 Q135,8 140,4 Q145,0 150,4 Q155,8 160,4 Q165,0 170,4 Q175,8 180,4 Q185,0 190,4 Q195,8 200,4"
+						fill="none"
+						stroke="var(--active)"
+						stroke-width="3"
+					/>
+					<!-- Value wave (fill) — clipped to fill width -->
+					<clipPath id="wavy-clip-${this._instanceId}">
+						<rect x="0" y="0" width="${isIndet ? trackW : fillW}" height="${h}">
+							${isIndet
+								? svg`<animate
+										attributeName="x"
+										from="-${w}"
+										to="${w}"
+										dur="3.2s"
+										repeatCount="indefinite"
+									/>`
+								: nothing}
+						</rect>
+					</clipPath>
+					<path
+						d="M0,4 Q5,0 10,4 Q15,8 20,4 Q25,0 30,4 Q35,8 40,4 Q45,0 50,4 Q55,8 60,4 Q65,0 70,4 Q75,8 80,4 Q85,0 90,4 Q95,8 100,4 Q105,0 110,4 Q115,8 120,4 Q125,0 130,4 Q135,8 140,4 Q145,0 150,4 Q155,8 160,4 Q165,0 170,4 Q175,8 180,4 Q185,0 190,4 Q195,8 200,4"
+						fill="none"
+						stroke="currentColor"
+						stroke-width="3"
+						clip-path="url(#wavy-clip-${this._instanceId})"
+					/>
+				</svg>
+			</div>
+		`;
+	}
+
+	private _renderCircular(withWavy = false) {
+		const isIndet = this.indeterminate;
+		// SVG circle math: r=20, circumference = 2π*20 ≈ 125.66
+		const r = 20;
+		const circ = 2 * Math.PI * r;
+		const dashOffset = isIndet
+			? circ * 0.5  // show ~50% arc for indeterminate
+			: circ * (1 - this._pct / 100);
+
+		return html`
+			<div
+				class="progress-circular${isIndet ? ' indeterminate' : ''}"
+				part="progress"
+				role="progressbar"
+				aria-valuenow=${isIndet ? nothing : this.value}
+				aria-valuemin="0"
+				aria-valuemax=${this.max}
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 48 48"
+					aria-hidden="true"
+				>
+					${withWavy
+						? svg`
+							<!-- Circular wavy uses a scalloped clip path to emulate BeerCSS wavy-circle mask -->
+							<defs>
+								<clipPath id="wavy-circle-clip-${this._instanceId}">
+									<path d="M24,4 Q28,2 32,4 Q36,2 40,4 Q44,6 44,10 Q46,14 44,18 Q46,22 44,26 Q46,30 44,34 Q44,38 40,40 Q36,44 32,44 Q28,46 24,44 Q20,46 16,44 Q12,44 8,40 Q4,38 4,34 Q2,30 4,26 Q2,22 4,18 Q2,14 4,10 Q4,6 8,4 Q12,2 16,4 Q20,2 24,4Z"/>
+								</clipPath>
+							</defs>
+							<circle class="track" cx="24" cy="24" r="${r}" clip-path="url(#wavy-circle-clip-${this._instanceId})"/>
+							<circle
+								class="value"
+								cx="24" cy="24" r="${r}"
+								stroke-dasharray="${isIndet ? `${circ * 0.5} ${circ * 0.5}` : `${circ - dashOffset} ${dashOffset}`}"
+								stroke-dashoffset="0"
+								clip-path="url(#wavy-circle-clip-${this._instanceId})"
+							/>`
+						: svg`
+							<circle class="track" cx="24" cy="24" r="${r}"/>
+							<circle
+								class="value"
+								cx="24" cy="24" r="${r}"
+								stroke-dasharray="${isIndet ? `${circ * 0.5} ${circ * 0.5}` : `${circ - dashOffset} ${dashOffset}`}"
+								stroke-dashoffset="0"
+							/>`}
+				</svg>
+			</div>
+		`;
+	}
+
+	/** Unique ID per instance for SVG clipPath IDs */
+	private readonly _instanceId = Math.random().toString(36).slice(2, 8);
+
+	override render() {
+		switch (this.variant) {
+			case 'circular':
+				return this._renderCircular(false);
+			case 'circular-wavy':
+				return this._renderCircular(true);
+			case 'wavy':
+				return this._renderWavy();
+			default:
+				return this._renderLinear();
+		}
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-progress': MoniProgress;
+	}
+}
+
+export default MoniProgress;

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

@@ -0,0 +1,86 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-radio.js';
+import type { MoniRadio } from './moni-radio.js';
+
+describe('moni-radio', () => {
+	let el: MoniRadio;
+
+	beforeEach(() => {
+		el = document.createElement('moni-radio') as MoniRadio;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders an input and a span for visual styling', 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 = 'Option A';
+		await el.updateComplete;
+		const span = el.shadowRoot?.querySelector('span');
+		expect(span?.textContent?.trim()).toBe('Option A');
+	});
+
+	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('forwards name to the input', async () => {
+		el.name = 'group1';
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector(
+			'input'
+		) as HTMLInputElement;
+		expect(input.name).toBe('group1');
+	});
+
+	it('forwards value to the input', async () => {
+		el.value = 'a';
+		await el.updateComplete;
+		const input = el.shadowRoot?.querySelector(
+			'input'
+		) as HTMLInputElement;
+		expect(input.value).toBe('a');
+	});
+});

package/src/components/moni-radio.ts

@@ -0,0 +1,196 @@
+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';
+
+/**
+ * Radio that faithfully ports BeerCSS's `.radio` styles.
+ *
+ * BeerCSS architecture:
+ *  - `.radio` is inline-flex, aligns items center
+ *  - `input` has width/height = --_size, opacity: 0  (real layout space, not absolute)
+ *  - `span::before` shows "radio_button_unchecked" / "radio_button_checked" via Material Symbols font
+ *  - `span::after` is the ripple hover effect
+ *
+ * Attributes:
+ *  - label:    text label
+ *  - checked:  present
+ *  - disabled: present
+ *  - size:     small | medium (default) | large | extra
+ *  - name:     forwarded to input.name (group radios by name)
+ *  - value:    forwarded to input.value
+ */
+@customElement('moni-radio')
+export class MoniRadio 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 .radio */
+			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 */
+			input {
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				opacity: 0;
+				cursor: pointer;
+				flex: none;
+			}
+
+			/* BeerCSS: span wraps visible indicator + label */
+			span {
+				display: inline-flex;
+				align-items: center;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				position: relative;
+			}
+
+			/* BeerCSS: span::before = radio icon (overlaid on input via negative inset) */
+			span::before {
+				--_size: inherit;
+				content: 'radio_button_unchecked';
+				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 radio icon */
+			input:checked + span::before {
+				content: 'radio_button_checked';
+				color: var(--primary);
+			}
+
+			/* BeerCSS: span::after = hover ripple */
+			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;
+			}
+
+			/* Label padding */
+			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;
+		if (this.checked && this.name) {
+			const root = this.getRootNode() as Document | ShadowRoot;
+			if (root) {
+				const siblings = root.querySelectorAll(`moni-radio[name="${this.name}"]`);
+				siblings.forEach((sibling) => {
+					if (sibling !== this && sibling instanceof MoniRadio) {
+						sibling.checked = false;
+					}
+				});
+			}
+		}
+		this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+	}
+
+	override render() {
+		return html`<label part="radio">
+			<input
+				type="radio"
+				.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-radio': MoniRadio;
+	}
+}
+
+export default MoniRadio;