@moni-labs/moni-ui 0.2.0

package/src/components/moni-slider.ts

@@ -0,0 +1,387 @@
+import { html, css, nothing } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+
+/**
+ * Slider that faithfully ports BeerCSS's `.slider` styles.
+ *
+ * Fixes:
+ *  - Uses @state() for internal reactive values so CSS vars update on every input
+ *  - Track visual (span) and tooltip positions update immediately on drag
+ *
+ * M3 spec (`m3-docs/components/sliders/specs.md`):
+ *  - Continuous slider: smooth drag between min/max.
+ *  - Discrete slider: snap to `step` intervals; tick marks visible.
+ *  - Tick marks: in Chrome/Edge, native `<datalist>` ticks render at every
+ *    option value. In Firefox, the datalist ticks are not rendered for
+ *    range inputs; consumers can use `tick-interval` to manually generate
+ *    a visual fallback if needed (P3.4 — outside the scope of this release).
+ *  - State layer: hover/focus state uses CSS `::before` overlay at 0.08/0.12
+ *    opacity per M3 (handled by `interaction-styles.ts`).
+ *
+ * Attributes:
+ *  - name, min, max, step, value, disabled
+ *  - size:       tiny | small | medium (default) | large | extra
+ *  - vertical:   present → rotated
+ *  - range:      present → two thumbs
+ *  - ticks:      present → datalist with min/max marks
+ *  - tick-interval: number — when set, generates datalist options every
+ *                    N units between min and max. Overrides `ticks`.
+ *  - indicator:  present → show value tooltip on focus
+ *  - indicator-placement: top (default) | bottom
+ *  - inset-icon: Material Symbols name inside the colored track
+ */
+@customElement('moni-slider')
+export class MoniSlider extends MoniElement {
+	@property({ reflect: true }) name = '';
+	@property({ reflect: true }) min = '0';
+	@property({ reflect: true }) max = '100';
+	@property({ reflect: true }) step = '';
+	@property({ type: Number, reflect: true, attribute: 'tick-interval' })
+	tickInterval: number | null = null;
+	@property({ reflect: true, attribute: 'inset-icon' }) insetIcon = '';
+	@property({ reflect: true, attribute: 'indicator-placement' })
+	indicatorPlacement: 'top' | 'bottom' = 'top';
+	@property({ reflect: true })
+	size: 'tiny' | 'small' | 'medium' | 'large' | 'extra' = 'medium';
+
+	// Boolean attributes
+	@property({ type: Boolean, reflect: true }) range = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+	@property({ type: Boolean, reflect: true }) ticks = false;
+	@property({ type: Boolean, reflect: true }) indicator = false;
+	@property({ type: Boolean, reflect: true, attribute: 'vertical' }) isVertical = false;
+
+	/** Internal reactive state — triggers CSS var updates on every input event */
+	@state() private _value = '50';
+	@state() private _valueEnd = '75';
+
+	@property({ reflect: true })
+	get value() { return this._value; }
+	set value(v: string) { this._value = v; }
+
+	@property({ reflect: true, attribute: 'value-end' })
+	get valueEnd() { return this._valueEnd; }
+	set valueEnd(v: string) { this._valueEnd = v; }
+
+	private _pct(v: string) {
+		const min = parseFloat(this.min) || 0;
+		const max = parseFloat(this.max) || 100;
+		const val = parseFloat(v) || 0;
+		return Math.max(0, Math.min(100, ((val - min) / (max - min)) * 100));
+	}
+
+	private _onInput(e: Event, index: number) {
+		const target = e.target as HTMLInputElement;
+		if (index === 0) {
+			this._value = target.value;
+		} else {
+			this._valueEnd = target.value;
+		}
+		this.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+	}
+
+	private _onChange(e: Event, index: number) {
+		const target = e.target as HTMLInputElement;
+		if (index === 0) {
+			this._value = target.value;
+		} else {
+			this._valueEnd = target.value;
+		}
+		this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
+	}
+
+	/**
+	 * Render a `<datalist>` element with tick options. When `tick-interval`
+	 * is set, generates options at every N units between min and max.
+	 * Otherwise, if `ticks` is set, just min and max.
+	 * Browsers that support datalist ticks for range (Chrome, Edge) will
+	 * render visual marks; Firefox ignores them.
+	 */
+	private _renderDatalist() {
+		if (this.tickInterval != null && this.tickInterval > 0) {
+			const min = parseFloat(this.min) || 0;
+			const max = parseFloat(this.max) || 100;
+			const step = this.tickInterval;
+			const options: number[] = [];
+			for (let v = min; v <= max; v += step) {
+				options.push(Math.round(v * 1000) / 1000);
+			}
+			return html`<datalist id="ticks">
+				${options.map((v) => html`<option value=${v}></option>`)}
+			</datalist>`;
+		}
+		if (this.ticks) {
+			return html`<datalist id="ticks">
+				<option value=${this.min}></option>
+				<option value=${this.max}></option>
+			</datalist>`;
+		}
+		return nothing;
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			/* BeerCSS .slider.vertical */
+			:host([vertical]) {
+				display: inline-block;
+				inline-size: var(--_thumb, 2.5rem);
+				block-size: var(--moni-slider-height, 150px);
+				vertical-align: middle;
+				position: relative;
+			}
+
+			:host([vertical]) .slider {
+				margin: 0.5rem auto !important;
+				padding: 50% 0;
+				transform: rotate(-90deg);
+				inline-size: 100%;
+			}
+
+			/* BeerCSS .slider */
+			.slider {
+				--_start: 0%;
+				--_end: 0%;
+				--_track: 1rem;
+				--_thumb: max(2.5rem, calc(var(--_track, 0) + 0.5rem));
+				display: flex;
+				align-items: center !important;
+				inline-size: auto;
+				block-size: var(--_thumb);
+				flex: none;
+				direction: ltr;
+				margin: 0 1.25rem;
+				color: var(--primary);
+				position: relative;
+			}
+
+			.slider.tiny  { --_track: 1rem; }
+			.slider.small { --_track: 1.5rem; }
+			.slider.medium { --_track: 2.5rem; }
+			.slider.large { --_track: 3.5rem; }
+			.slider.extra { --_track: 6rem; }
+
+			/* BeerCSS: track background via ::before */
+			.slider::before {
+				content: "";
+				position: absolute;
+				inline-size: 100%;
+				block-size: var(--_track);
+				border-radius: 1rem;
+				background: var(--active);
+				clip-path: polygon(
+					calc(var(--_start, 0) - 0.5rem) 0, 0 0, 0 100%,
+					calc(var(--_start, 0) - 0.5rem) 100%, calc(var(--_start, 0) - 0.5rem) 0,
+					calc(100% - var(--_end, 0) + 0.5rem) 0, 100% 0, 100% 100%,
+					calc(100% - var(--_end, 0) + 0.5rem) 100%, calc(100% - var(--_end, 0) + 0.5rem) 0
+				);
+			}
+
+			/* BeerCSS: colored fill span */
+			.slider > span:not([class]) {
+				position: absolute;
+				block-size: var(--_track);
+				border-radius: 1rem 0 0 1rem;
+				background: currentColor;
+				color: currentColor;
+				z-index: 0;
+				inset: calc(50% - (var(--_track, 0) / 2))
+					calc(var(--_end) + 0.5rem) auto var(--_start);
+			}
+
+			.slider > input[type='range'] + input[type='range'] ~ span:not([class]) {
+				border-radius: 0;
+				inset: calc(50% - (var(--_track, 0) / 2))
+					calc(var(--_end) + 0.5rem) auto
+					calc(var(--_start) + 0.5rem);
+			}
+
+			/* BeerCSS slider inputs */
+			.slider > input {
+				appearance: none;
+				box-shadow: none;
+				border: none;
+				outline: none;
+				pointer-events: none;
+				inline-size: 100%;
+				block-size: var(--_track);
+				background: none;
+				z-index: 1;
+				padding: 0;
+				margin: 0;
+				touch-action: none;
+			}
+
+			.slider > input:only-of-type {
+				pointer-events: all;
+			}
+
+			.slider > input ~ input {
+				position: absolute;
+			}
+
+			/* BeerCSS thumb styles */
+			.slider > input::-webkit-slider-thumb {
+				appearance: none;
+				box-shadow: none;
+				border: none;
+				outline: none;
+				pointer-events: all;
+				block-size: var(--_thumb);
+				inline-size: 0.25rem;
+				border-radius: 0.25rem;
+				background: currentColor;
+				cursor: grab;
+				margin: 0;
+				z-index: 1;
+			}
+			.slider > input::-webkit-slider-thumb:active { cursor: grabbing; }
+
+			.slider > input::-moz-range-thumb {
+				appearance: none;
+				box-shadow: none;
+				border: none;
+				outline: none;
+				pointer-events: all;
+				block-size: 2.75rem;
+				inline-size: 0.25rem;
+				border-radius: 0.25rem;
+				background: var(--primary);
+				cursor: grab;
+				margin: 0;
+			}
+
+			.slider > input:not(:disabled):is(:focus)::-webkit-slider-thumb {
+				transform: scaleX(0.6);
+			}
+
+			.slider > input:disabled { cursor: not-allowed; }
+			.slider > input:disabled::-webkit-slider-thumb { background: var(--outline); cursor: not-allowed; }
+			.slider > input:disabled::-moz-range-thumb { background: var(--outline); cursor: not-allowed; }
+			.slider > input:disabled ~ span:not([class]) { background: var(--outline); }
+
+			.slider:has(> [disabled]) { opacity: 0.62; }
+
+			/* Focus visible outline */
+			.slider > input:focus-visible::-webkit-slider-thumb {
+				outline: 0.1875rem solid var(--primary);
+				outline-offset: 0.25rem;
+			}
+			.slider > input:focus-visible::-moz-range-thumb {
+				outline: 0.1875rem solid var(--primary);
+				outline-offset: 0.25rem;
+			}
+
+			/* Inset icon */
+			.slider > span > i {
+				position: absolute;
+				block-size: auto;
+				inset: 0 auto 0 0.5rem;
+				color: var(--inverse-primary);
+				z-index: 1;
+			}
+			.slider:not(.medium, .large, .extra) > span > i { display: none; }
+
+			/* Value indicator tooltip */
+			.slider > .tooltip {
+				visibility: hidden;
+				opacity: 0;
+				border-radius: 2rem;
+				transition: top var(--speed2) ease, opacity var(--speed2) ease;
+				transform: translate(-50%, -25%);
+				padding: 0.75rem 1rem;
+				position: absolute;
+				background-color: var(--inverse-surface);
+				color: var(--inverse-on-surface);
+				font-size: 0.75rem;
+				font-weight: 500;
+				z-index: 2;
+				white-space: nowrap;
+			}
+
+			.slider > .tooltip.bottom {
+				transform: translate(-50%, 25%);
+			}
+
+			/* BeerCSS: tooltip shows on :focus of the input */
+			.slider > input:first-of-type:focus ~ .tooltip-1,
+			.slider > input:nth-of-type(2):focus ~ .tooltip-2 {
+				inset-block: -1rem auto;
+				opacity: 1;
+				visibility: visible;
+			}
+
+			.slider > input:first-of-type:focus ~ .tooltip-1.bottom,
+			.slider > input:nth-of-type(2):focus ~ .tooltip-2.bottom {
+				inset-block: auto -1rem;
+			}
+		`
+	];
+
+	override render() {
+		const pct = this._pct(this._value);
+		const pctEnd = this._pct(this._valueEnd);
+
+		const start = this.range ? pct : 0;
+		const end = this.range ? 100 - pctEnd : 100 - pct;
+
+		const rangeInput = (i: number, val: string) => html`
+			<input
+				part="control"
+				type="range"
+				min=${this.min}
+				max=${this.max}
+				step=${ifDefined(this.step || undefined)}
+				list=${ifDefined(this.ticks ? 'ticks' : undefined)}
+				?disabled=${this.disabled}
+				.value=${val}
+				name=${i === 0 ? ifDefined(this.name || undefined) : nothing}
+				@input=${(e: Event) => this._onInput(e, i)}
+				@change=${(e: Event) => this._onChange(e, i)}
+			/>
+		`;
+
+		const inset =
+			this.insetIcon && ['medium', 'large', 'extra'].includes(this.size)
+				? html`<i><moni-icon name="${this.insetIcon}"></moni-icon></i>`
+				: '';
+
+		const tooltip1 = this.indicator
+			? html`<div class="tooltip tooltip-1 ${this.indicatorPlacement}" style="inset-inline-start: ${pct}%;">${this._value}</div>`
+			: nothing;
+
+		const tooltip2 = this.indicator && this.range
+			? html`<div class="tooltip tooltip-2 ${this.indicatorPlacement}" style="inset-inline-start: ${pctEnd}%;">${this._valueEnd}</div>`
+			: nothing;
+
+		return html`<div
+			class="slider ${this.size}${this.isVertical ? ' vertical' : ''}"
+			part="root"
+			style="--_start: ${start}%; --_end: ${end}%;"
+		>
+			${this._renderDatalist()}
+			${this.range
+				? html`${rangeInput(0, this._value)}${rangeInput(1, this._valueEnd)}`
+				: rangeInput(0, this._value)}
+			<span>${inset}</span>
+			${tooltip1}
+			${tooltip2}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-slider': MoniSlider;
+	}
+}
+
+export default MoniSlider;

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

@@ -0,0 +1,82 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-snackbar.js';
+import type { MoniSnackbar } from './moni-snackbar.js';
+
+describe('moni-snackbar', () => {
+	let el: MoniSnackbar;
+
+	beforeEach(() => {
+		el = document.createElement('moni-snackbar') as MoniSnackbar;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders a div with role=status and aria-live=polite (M3 spec)', async () => {
+		await el.updateComplete;
+		const snack = el.shadowRoot?.querySelector('[part="snackbar"]');
+		expect(snack?.getAttribute('role')).toBe('status');
+		expect(snack?.getAttribute('aria-live')).toBe('polite');
+	});
+
+	it('reflects the active attribute on the host', async () => {
+		el.active = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('active')).toBe(true);
+
+		el.active = false;
+		await el.updateComplete;
+		expect(el.hasAttribute('active')).toBe(false);
+	});
+
+	it('reflects placement=bottom (default) and placement=top', async () => {
+		await el.updateComplete;
+		const snack = el.shadowRoot?.querySelector('[part="snackbar"]');
+		expect(snack?.classList.contains('bottom')).toBe(true);
+
+		el.placement = 'top';
+		await el.updateComplete;
+		const snack2 = el.shadowRoot?.querySelector('[part="snackbar"]');
+		expect(snack2?.classList.contains('top')).toBe(true);
+	});
+
+	it('renders the text in the [part=text] span', async () => {
+		el.text = 'File saved successfully';
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector('[part="text"]');
+		expect(text).toBeTruthy();
+		const slot = text?.querySelector('slot') as HTMLSlotElement | null;
+		const assigned = slot?.assignedNodes({ flatten: true }) ?? [];
+		const t = assigned.map((n) => n.textContent ?? '').join('').trim();
+		expect(t).toBe('File saved successfully');
+	});
+
+	it('renders the action label when set', async () => {
+		el.text = 'Item deleted';
+		el.action = 'Undo';
+		await el.updateComplete;
+		const action = el.shadowRoot?.querySelector('[part="action"]');
+		expect(action?.textContent).toBe('Undo');
+	});
+
+	it('max-lines defaults to 2 (M3 spec)', async () => {
+		await el.updateComplete;
+		expect(el.maxLines).toBe(2);
+		expect(el.getAttribute('max-lines')).toBe('2');
+	});
+
+	it('max-lines can be customized via attribute', async () => {
+		el.maxLines = 3;
+		await el.updateComplete;
+		expect(el.getAttribute('max-lines')).toBe('3');
+	});
+
+	it('max-lines is forwarded to the inner element as a CSS custom property', async () => {
+		el.maxLines = 4;
+		await el.updateComplete;
+		const snack = el.shadowRoot?.querySelector('[part="snackbar"]') as HTMLElement;
+		expect(snack.style.getPropertyValue('--_max-lines')).toBe('4');
+	});
+});

package/src/components/moni-snackbar.ts

@@ -0,0 +1,146 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+
+/**
+ * Snackbar that faithfully ports BeerCSS's `.snackbar` styles.
+ *
+ * BeerCSS uses `.snackbar` with `position: fixed; inset: auto auto 6rem 50%;`
+ * and `.snackbar.active` / `.snackbar:popover-open` to show it.
+ *
+ * We use :host([active]) .snackbar with visibility/opacity/transform — same as BeerCSS.
+ * The host is display:block so the fixed snackbar inside is part of the stacking context
+ * of the document body (not clipped by any shadow root overflow).
+ *
+ * Material 3 spec (`m3-docs/components/snackbar/specs.md`): the message text
+ * must truncate at **2 lines** with ellipsis when too long. The container
+ * width adapts to the screen size (full width on compact, 40% on expanded).
+ *
+ * Attributes:
+ *  - text:      message
+ *  - action:    action label (visual only)
+ *  - placement: bottom (default) | top
+ *  - active:    present → visible
+ *  - max-lines: 2 (default) | number — clamp text to N lines with ellipsis
+ */
+@customElement('moni-snackbar')
+export class MoniSnackbar extends MoniElement {
+	@property({ reflect: true }) text = '';
+	@property({ reflect: true }) action = '';
+	@property({ reflect: true })
+	placement: 'bottom' | 'top' = 'bottom';
+	@property({ type: Boolean, reflect: true }) active = false;
+	/** M3 spec: clamp the message text to N lines (default 2). */
+	@property({ type: Number, reflect: true, attribute: 'max-lines' })
+	maxLines = 2;
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				/* Use block instead of contents so position:fixed inside
+				   works relative to the viewport (its containing block). */
+				display: block;
+				font-family: var(--font);
+				/* Host itself takes no space */
+				position: fixed;
+				inset: 0;
+				pointer-events: none;
+				z-index: 200;
+			}
+
+			/* BeerCSS .snackbar */
+			.snackbar {
+				position: fixed;
+				/* BeerCSS: inset: auto auto 6rem 50% for bottom placement */
+				inset-block-end: 6rem;
+				inset-block-start: auto;
+				inset-inline: 50% auto;
+				inline-size: 80%;
+				block-size: auto;
+				z-index: 200;
+				visibility: hidden;
+				display: flex;
+				box-shadow: var(--elevate2);
+				color: var(--inverse-on-surface);
+				background-color: var(--inverse-surface);
+				padding: 1rem;
+				cursor: pointer;
+				text-align: start;
+				align-items: center;
+				border-radius: 0.25rem;
+				gap: 0.5rem;
+				transition: all var(--speed2);
+				transform: translate(-50%, 1rem);
+				opacity: 0;
+				pointer-events: auto;
+			}
+
+			/* BeerCSS .snackbar.top */
+			.snackbar.top {
+				inset-block-start: 6rem;
+				inset-block-end: auto;
+				transform: translate(-50%, -1rem);
+			}
+
+			/* BeerCSS .snackbar.active */
+			:host([active]) .snackbar {
+				visibility: visible;
+				transform: translate(-50%, 0);
+				opacity: 1;
+			}
+
+			.snackbar > .max {
+				flex: auto;
+				/* M3 spec § Message: clamp at 2 lines (configurable via
+				   max-lines attribute). */
+				display: -webkit-box;
+				-webkit-box-orient: vertical;
+				-webkit-line-clamp: var(--_max-lines, 2);
+				line-clamp: var(--_max-lines, 2);
+				overflow: hidden;
+				text-overflow: ellipsis;
+			}
+
+			.action {
+				font-weight: 500;
+				text-transform: uppercase;
+				font-size: 0.875rem;
+				letter-spacing: 0.05em;
+				color: var(--inverse-primary);
+				white-space: nowrap;
+			}
+
+			@media only screen and (min-width: 993px) {
+				.snackbar {
+					inline-size: 40%;
+				}
+			}
+		`
+	];
+
+	override render() {
+		return html`<div
+			class="snackbar ${this.placement}"
+			part="snackbar"
+			role="status"
+			aria-live="polite"
+			style="--_max-lines: ${this.maxLines}"
+		>
+			<slot name="icon"></slot>
+			<span class="max" part="text"><slot>${this.text}</slot></span>
+			${this.action
+				? html`<span class="action" part="action">${this.action}</span>`
+				: ''}
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-snackbar': MoniSnackbar;
+	}
+}
+
+export default MoniSnackbar;