@moni-labs/moni-ui 0.2.0

package/src/components/moni-ripple.ts

@@ -0,0 +1,146 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Visual-only ripple decoration.
+ *
+ * To trigger a ripple at a specific point, set the `x` and `y` attributes
+ * and toggle the `active` attribute. The visual scale-in animation will
+ * run for `duration` ms and then the element becomes hidden.
+ *
+ * Attributes:
+ *  - x, y:        origin in px (0..100, %)
+ *  - active:      present → visible
+ *  - speed:       fast | normal (default) | slow
+ *  - color:       primary (default) | secondary | surface
+ */
+@customElement('moni-ripple')
+export class MoniRipple extends MoniElement {
+	@property({ type: Number, reflect: true }) x = 50;
+	@property({ type: Number, reflect: true }) y = 50;
+	@property({ type: Boolean, reflect: true }) active = false;
+	@property({ reflect: true })
+	speed: 'fast' | 'normal' | 'slow' = 'normal';
+	@property({ reflect: true })
+	color: 'primary' | 'secondary' | 'surface' = 'primary';
+
+	private _target: HTMLElement | null = null;
+	private _timeoutId: any = null;
+
+	override connectedCallback() {
+		super.connectedCallback();
+		this._target = this.parentElement;
+		if (this._target) {
+			const style = getComputedStyle(this._target);
+			if (style.position === 'static') {
+				this._target.style.position = 'relative';
+			}
+			this._target.addEventListener('pointerdown', this._onPointerDown);
+		}
+	}
+
+	override disconnectedCallback() {
+		if (this._target) {
+			this._target.removeEventListener('pointerdown', this._onPointerDown);
+		}
+		if (this._timeoutId) {
+			clearTimeout(this._timeoutId);
+		}
+		super.disconnectedCallback();
+	}
+
+	private _onPointerDown = (e: PointerEvent) => {
+		if (!this._target) return;
+		const rect = this._target.getBoundingClientRect();
+		const xPx = e.clientX - rect.left;
+		const yPx = e.clientY - rect.top;
+		this.x = (xPx / rect.width) * 100;
+		this.y = (yPx / rect.height) * 100;
+
+		if (this._timeoutId) {
+			clearTimeout(this._timeoutId);
+			this.active = false;
+		}
+
+		requestAnimationFrame(() => {
+			this.active = true;
+			const duration = this.speed === 'fast' ? 300 : this.speed === 'slow' ? 1200 : 600;
+			this._timeoutId = setTimeout(() => {
+				this.active = false;
+				this._timeoutId = null;
+			}, duration);
+		});
+	};
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				position: absolute;
+				inset: 0;
+				border-radius: inherit;
+				pointer-events: none;
+				overflow: hidden;
+				--_dur: 600ms;
+				color: var(--primary);
+				z-index: 1;
+			}
+			:host([speed='fast']) {
+				--_dur: 300ms;
+			}
+			:host([speed='slow']) {
+				--_dur: 1200ms;
+			}
+
+			.ripple {
+				position: absolute;
+				inline-size: 200%;
+				aspect-ratio: 1;
+				border-radius: 50%;
+				translate: -50% -50%;
+				opacity: 0;
+				pointer-events: none;
+				background-color: currentColor;
+				inset-block-start: var(--_y, 50%);
+				inset-inline-start: var(--_x, 50%);
+				scale: 0;
+				transition: opacity var(--_dur) ease, scale 0s var(--_dur);
+			}
+
+			:host([color='primary']) {
+				color: var(--primary);
+			}
+			:host([color='secondary']) {
+				color: var(--secondary);
+			}
+			:host([color='surface']) {
+				color: var(--surface-variant);
+			}
+
+			:host([active]) .ripple {
+				opacity: 0.25;
+				scale: 1;
+				transition: scale var(--_dur) cubic-bezier(0.2, 0, 0, 1),
+					opacity var(--_dur) ease;
+			}
+		`
+	];
+
+	override render() {
+		return html`<span
+			class="ripple"
+			part="ripple"
+			style="--_x: ${this.x}%; --_y: ${this.y}%;"
+		></span>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-ripple': MoniRipple;
+	}
+}
+
+export default MoniRipple;

package/src/components/moni-segmented-button.test.ts

@@ -0,0 +1,99 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-segmented-button.js';
+import './moni-button-segment.js';
+import type { MoniSegmentedButton } from './moni-segmented-button.js';
+import type { MoniButtonSegment } from './moni-button-segment.js';
+
+describe('moni-segmented-button', () => {
+	let group: MoniSegmentedButton;
+
+	beforeEach(() => {
+		group = document.createElement('moni-segmented-button') as MoniSegmentedButton;
+		document.body.appendChild(group);
+	});
+
+	afterEach(() => {
+		group.remove();
+	});
+
+	it('sets positioning shape properties on child segments', async () => {
+		const seg1 = document.createElement('moni-button-segment') as MoniButtonSegment;
+		const seg2 = document.createElement('moni-button-segment') as MoniButtonSegment;
+		const seg3 = document.createElement('moni-button-segment') as MoniButtonSegment;
+		group.appendChild(seg1);
+		group.appendChild(seg2);
+		group.appendChild(seg3);
+
+		await group.updateComplete;
+		await seg1.updateComplete;
+		await seg2.updateComplete;
+		await seg3.updateComplete;
+
+		expect(seg1.position).toBe('first');
+		expect(seg2.position).toBe('middle');
+		expect(seg3.position).toBe('last');
+	});
+
+	it('preserves positioning first/last when gap is set', async () => {
+		group.gap = 'small';
+		const seg1 = document.createElement('moni-button-segment') as MoniButtonSegment;
+		const seg2 = document.createElement('moni-button-segment') as MoniButtonSegment;
+		group.appendChild(seg1);
+		group.appendChild(seg2);
+
+		await group.updateComplete;
+		await seg1.updateComplete;
+		await seg2.updateComplete;
+
+		expect(seg1.position).toBe('first');
+		expect(seg2.position).toBe('last');
+	});
+
+	it('manages checked state when clicked in single select mode', async () => {
+		const seg1 = document.createElement('moni-button-segment') as MoniButtonSegment;
+		seg1.value = 'one';
+		const seg2 = document.createElement('moni-button-segment') as MoniButtonSegment;
+		seg2.value = 'two';
+		group.appendChild(seg1);
+		group.appendChild(seg2);
+
+		await group.updateComplete;
+		await seg1.updateComplete;
+		await seg2.updateComplete;
+
+		seg1.click();
+		await seg1.updateComplete;
+		expect(seg1.checked).toBe(true);
+		expect(group.value).toBe('one');
+
+		seg2.click();
+		await seg1.updateComplete;
+		await seg2.updateComplete;
+		expect(seg1.checked).toBe(false);
+		expect(seg2.checked).toBe(true);
+		expect(group.value).toBe('two');
+	});
+
+	it('manages checked state when clicked in multi select mode', async () => {
+		group.multi = true;
+		const seg1 = document.createElement('moni-button-segment') as MoniButtonSegment;
+		seg1.value = 'one';
+		const seg2 = document.createElement('moni-button-segment') as MoniButtonSegment;
+		seg2.value = 'two';
+		group.appendChild(seg1);
+		group.appendChild(seg2);
+
+		await group.updateComplete;
+		await seg1.updateComplete;
+		await seg2.updateComplete;
+
+		seg1.click();
+		seg2.click();
+		await seg1.updateComplete;
+		await seg2.updateComplete;
+
+		expect(seg1.checked).toBe(true);
+		expect(seg2.checked).toBe(true);
+		expect(group.value).toBe('one,two');
+	});
+});

package/src/components/moni-segmented-button.ts

@@ -0,0 +1,220 @@
+import { html, css } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import { MoniButtonSegment } from './moni-button-segment.js';
+
+/**
+ * A form-associated group of selectable segmented buttons.
+ *
+ * @deprecated since v0.3.0 — `moni-segmented-button` is **no longer
+ * recommended** by Material Design 3 Expressive. Use
+ * `moni-button-group[variant="connected"]` instead, which has the same
+ * functionality with an updated visual design. See
+ * `m3-docs/components/segmented-buttons/overview.md` § M3 Expressive update.
+ *
+ * This component continues to work for backward compatibility but will be
+ * removed in v1.0. A deprecation warning is logged to the console when the
+ * element is connected to the DOM.
+ *
+ * Attributes:
+ *  - name:       Name of the control in forms
+ *  - multi:      Whether multiple options can be selected
+ *  - hide-check: Hides checkmarks on all child segments
+ *  - gap:        Custom gap space (e.g. "8px" or "1rem")
+ */
+@customElement('moni-segmented-button')
+export class MoniSegmentedButton extends MoniElement {
+	static formAssociated = true;
+
+	private static _deprecationWarned = false;
+
+	@property({ reflect: true })
+	name = '';
+
+	@property({ type: Boolean, reflect: true })
+	multi = false;
+
+	@property({ reflect: true })
+	size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'extra' = 'medium';
+
+	@property({ type: Boolean, reflect: true, attribute: 'hide-check' })
+	hideCheck = false;
+
+	@property()
+	gap = '';
+
+	@queryAssignedElements({ flatten: true })
+	private slottedSegments!: HTMLElement[];
+
+	private internals: ElementInternals;
+
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		// Log a deprecation warning once per page to avoid console spam when
+		// many segmented buttons are instantiated.
+		if (!MoniSegmentedButton._deprecationWarned) {
+			MoniSegmentedButton._deprecationWarned = true;
+			console.warn(
+				'[moni-ui] <moni-segmented-button> is deprecated since v0.3.0. ' +
+					'Material Design 3 Expressive no longer recommends segmented buttons. ' +
+					'Use <moni-button-group variant="connected"> instead. ' +
+					'See m3-docs/components/segmented-buttons/overview.md § M3 Expressive update.'
+			);
+		}
+	}
+
+	get form() {
+		return this.internals.form;
+	}
+
+	get type() {
+		return 'segmented-button';
+	}
+
+	get value(): string {
+		const selected = this.segments
+			.filter((s) => s.checked)
+			.map((s) => s.value);
+		return this.multi ? selected.join(',') : (selected[0] || '');
+	}
+
+	private get segments(): MoniButtonSegment[] {
+		return this.slottedSegments.filter(
+			(el): el is MoniButtonSegment => el.tagName.toLowerCase() === 'moni-button-segment'
+		);
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: inline-flex;
+				align-items: center;
+				vertical-align: middle;
+			}
+
+			.group {
+				display: inline-flex;
+				align-items: center;
+				position: relative;
+				width: 100%;
+			}
+
+			::slotted(moni-button-segment) {
+				flex: 1;
+			}
+		`
+	];
+
+	protected override updated(changedProperties: Map<string | number | symbol, unknown>) {
+		super.updated(changedProperties);
+		if (changedProperties.has('hideCheck') || changedProperties.has('size') || changedProperties.has('gap')) {
+			this.updateChildren();
+		}
+		this.updateFormValue();
+	}
+
+	private handleSlotChange() {
+		this.updateChildren();
+		this.updateFormValue();
+	}
+
+	private getGapValue(gap: string): string {
+		if (!gap) return '';
+		const preset = gap.toLowerCase();
+		if (preset === 'xs' || preset === 'xsmall') return '1.125rem';
+		if (preset === 's' || preset === 'small') return '0.75rem';
+		if (preset === 'm' || preset === 'medium') return '0.5rem';
+		if (preset === 'l' || preset === 'large') return '0.5rem';
+		if (preset === 'xl' || preset === 'xlarge') return '0.5rem';
+		return gap;
+	}
+
+	private updateChildren() {
+		const segments = this.segments;
+		const len = segments.length;
+
+		segments.forEach((seg, index) => {
+			seg.hideCheck = this.hideCheck;
+			seg.size = this.size;
+
+			if (len === 1) {
+				seg.position = 'solo';
+			} else if (index === 0) {
+				seg.position = 'first';
+			} else if (index === len - 1) {
+				seg.position = 'last';
+			} else {
+				seg.position = 'middle';
+			}
+		});
+	}
+
+	private updateFormValue() {
+		if (typeof this.internals.setFormValue === 'function') {
+			this.internals.setFormValue(this.value);
+		}
+	}
+
+	private handleClick(e: Event) {
+		const target = e.target as HTMLElement;
+		const clickedSegment = target.closest('moni-button-segment') as MoniButtonSegment | null;
+
+		if (!clickedSegment || clickedSegment.disabled) {
+			return;
+		}
+
+		const segments = this.segments;
+
+		if (this.multi) {
+			clickedSegment.checked = !clickedSegment.checked;
+		} else {
+			segments.forEach((seg) => {
+				if (seg === clickedSegment) {
+					seg.checked = !seg.checked;
+				} else {
+					seg.checked = false;
+				}
+			});
+		}
+
+		this.updateFormValue();
+
+		this.dispatchEvent(
+			new CustomEvent('change', {
+				bubbles: true,
+				composed: true,
+				detail: {
+					value: this.value,
+					segment: clickedSegment,
+					checked: clickedSegment.checked
+				}
+			})
+		);
+	}
+
+	override render() {
+		const resolvedGap = this.getGapValue(this.gap);
+		const inlineStyles = resolvedGap
+			? `gap: ${resolvedGap}; --moni-button-segment-gap: 0px;`
+			: '';
+		return html`
+			<div class="group" style=${inlineStyles} part="group" @click=${this.handleClick}>
+				<slot @slotchange=${this.handleSlotChange}></slot>
+			</div>
+		`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-segmented-button': MoniSegmentedButton;
+	}
+}
+
+export default MoniSegmentedButton;

package/src/components/moni-select-option.ts

@@ -0,0 +1,85 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Option item for custom moni-select dropdown.
+ *
+ * Attributes:
+ *  - value:    string value of the option
+ *  - label:    text label (uses textContent or slot if empty)
+ *  - group:    subcategory group/category name
+ *  - selected: present -> active highlight state
+ *  - disabled: present -> disabled
+ */
+@customElement('moni-select-option')
+export class MoniSelectOption extends MoniElement {
+	@property({ reflect: true }) value = '';
+	@property({ reflect: true }) label = '';
+	@property({ reflect: true }) group = '';
+	@property({ type: Boolean, reflect: true }) selected = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			li {
+				all: unset;
+				box-sizing: border-box;
+				position: relative;
+				display: flex;
+				align-items: center;
+				text-align: start;
+				justify-content: flex-start;
+				white-space: nowrap;
+				gap: 1rem;
+				padding: 0.5rem 1rem;
+				min-block-size: 2.5rem;
+				flex: 1;
+				margin: 0 !important;
+				cursor: pointer;
+				border-radius: 0.25rem;
+				color: var(--on-surface);
+				font-size: 0.875rem;
+				transition: background-color var(--speed2), border-radius var(--speed2);
+			}
+
+			li:hover {
+				background-color: var(--active);
+			}
+			li.selected {
+				background-color: var(--tertiary-container);
+				color: var(--on-tertiary-container);
+			}
+			li:is(.selected, :active) {
+				border-radius: 0.75rem;
+			}
+			:host([disabled]) li {
+				opacity: 0.5;
+				pointer-events: none;
+			}
+		`
+	];
+
+	override render() {
+		return html`<li
+			part="option"
+			class="${this.selected ? 'selected' : ''}"
+		>
+			<span part="label"><slot>${this.label || this.value}</slot></span>
+		</li>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-select-option': MoniSelectOption;
+	}
+}
+
+export default MoniSelectOption;