@moni-labs/moni-ui 0.2.0

package/src/components/moni-fab.ts

@@ -0,0 +1,262 @@
+import { html, css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-icon.js';
+
+/**
+ * Visual-only Floating Action Button.
+ *
+ * Material 3 Expressive update (May 2025):
+ *  - `size="small"` is **no longer recommended** by M3. Use `medium` (40dp/56dp
+ *    on M3 spec) or `large`. Deprecated in v0.3.1; will be removed in v1.0.
+ *  - `shape="circle"` is **not part of M3**; M3 FABs are `rounded` with a 16dp
+ *    corner radius (or `full` when on hover/focus). The M3 spec does not
+ *    define a perfect-circle FAB. Deprecated in v0.3.1; will be removed in v1.0.
+ *  - `color="surface"` is **no longer recommended** by M3. Use `primary`,
+ *    `secondary`, or `tertiary` (and their container variants).
+ *
+ * Attributes:
+ *  - size:      medium (default) | large  (small: deprecated)
+ *  - color:     primary (default) | secondary | tertiary  (surface: deprecated)
+ *  - shape:     rounded (default)  (circle: deprecated)
+ *  - extended:  present → wider with label always visible
+ *  - expanded:  present → force expanded
+ *  - disabled:  present
+ *  - icon:      Material Symbols name
+ *  - label:     text when extended
+ *  - position:  bottom-trailing (default) | bottom-leading
+ *               | top-trailing | top-leading
+ */
+@customElement('moni-fab')
+export class MoniFab extends MoniElement {
+	private static _deprecationWarned = false;
+
+	@property({ reflect: true })
+	size: 'small' | 'medium' | 'large' = 'medium';
+	@property({ reflect: true })
+	color: 'primary' | 'secondary' | 'tertiary' | 'surface' = 'primary';
+	@property({ reflect: true })
+	shape: 'rounded' | 'circle' = 'rounded';
+	@property({ type: Boolean, reflect: true }) extended = false;
+	@property({ type: Boolean, reflect: true }) expanded = false;
+	@property({ type: Boolean, reflect: true }) disabled = false;
+	@property({ reflect: true }) icon = 'add';
+	@property({ reflect: true }) label = '';
+	@property({ reflect: true })
+	position:
+		| 'bottom-trailing'
+		| 'bottom-leading'
+		| 'top-trailing'
+		| 'top-leading' = 'bottom-trailing';
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		if (MoniFab._deprecationWarned) return;
+		const hasDeprecated = this.size === 'small'
+			|| this.shape === 'circle'
+			|| this.color === 'surface';
+		if (hasDeprecated) {
+			MoniFab._deprecationWarned = true;
+			const reasons: string[] = [];
+			if (this.size === 'small') reasons.push('size="small"');
+			if (this.shape === 'circle') reasons.push('shape="circle"');
+			if (this.color === 'surface') reasons.push('color="surface"');
+			console.warn(
+				`[moni-ui] <moni-fab> uses ${reasons.join(', ')}, deprecated since v0.3.1 per Material Design 3 Expressive (May 2025). See m3-docs/components/floating-action-button/overview.md § M3 Expressive update.`
+			);
+		}
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: inline-block;
+				font-family: var(--font);
+				position: relative;
+			}
+
+			:host([position]) {
+				position: fixed;
+				z-index: 13;
+			}
+			:host([position='bottom-trailing']) {
+				inset: auto 1rem 1rem auto;
+			}
+			:host([position='bottom-leading']) {
+				inset: auto auto 1rem 1rem;
+			}
+			:host([position='top-trailing']) {
+				inset: 1rem 1rem auto auto;
+			}
+			:host([position='top-leading']) {
+				inset: 1rem auto auto 1rem;
+			}
+
+			.button {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				block-size: 3.5rem;
+				font-size: 1rem;
+				font-weight: 500;
+				color: var(--on-primary);
+				/* Default: no padding so icon is centered; padding added when label exists */
+				padding: 0 1.5rem;
+				background-color: var(--primary);
+				border: 0.0625rem solid transparent;
+				border-radius: 1rem;
+				gap: 0.5rem;
+				line-height: normal;
+				font-family: inherit;
+				cursor: pointer;
+				box-shadow: var(--elevate2);
+				transition:
+					transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
+					border-radius 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
+					padding 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
+					background-color 200ms ease,
+					box-shadow 250ms ease;
+				user-select: none;
+				text-decoration: none;
+			}
+
+			.button:hover:not(:disabled) {
+				transform: translateY(-0.125rem) scale(1.02);
+				box-shadow: var(--elevate3);
+			}
+
+			.button:active:not(:disabled) {
+				transform: translateY(0.0625rem) scale(0.97);
+				box-shadow: var(--elevate1);
+			}
+
+			/* When no label: icon-only, remove horizontal padding so icon centers */
+			.button:not(:has(> .label:not(:empty))) {
+				padding-inline: 0;
+			}
+
+			.button.small {
+				block-size: 2.5rem;
+				font-size: 0.875rem;
+				padding: 0 1rem;
+			}
+			.button.large {
+				block-size: 4rem;
+				padding: 0 2rem;
+			}
+
+			.button.circle {
+				padding: 0;
+				inline-size: 3.5rem;
+				aspect-ratio: 1;
+				border-radius: 50%;
+			}
+			.button.circle.small {
+				inline-size: 2.5rem;
+			}
+			.button.circle.large {
+				inline-size: 4rem;
+			}
+
+			.button.rounded {
+				border-radius: 1rem;
+			}
+			.button.rounded:is(:hover, :focus-visible) {
+				border-radius: 2rem;
+			}
+
+			.button.secondary {
+				background-color: var(--secondary-container);
+				color: var(--on-secondary-container);
+			}
+			.button.tertiary {
+				background-color: var(--tertiary-container);
+				color: var(--on-tertiary-container);
+			}
+			.button.surface {
+				background-color: var(--surface);
+				color: var(--primary);
+			}
+
+			.button:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+				pointer-events: none;
+			}
+			.button:focus-visible {
+				outline: 0.125rem solid var(--primary);
+				outline-offset: 0.125rem;
+				transform: translateY(-0.125rem) scale(1.02);
+				box-shadow: var(--elevate3);
+			}
+
+			.icon,
+			::slotted([slot='icon']) {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				flex: none;
+				color: inherit;
+			}
+
+			/* Label is always rendered but empty string hides via overflow.
+			   When label prop is set, it appears. */
+			.label {
+				white-space: nowrap;
+				max-inline-size: 16rem;
+				overflow: hidden;
+				transition: max-inline-size var(--speed3);
+				font-size: 1rem;
+				font-weight: 500;
+			}
+			.label:empty {
+				display: none;
+			}
+
+			/* Circle shape: hide label completely */
+			:host([shape='circle']) .label,
+			:host([shape='circle']) slot {
+				display: none !important;
+			}
+			/* Circle: remove padding, make it a perfect circle */
+			:host([shape='circle']) .button {
+				padding: 0 !important;
+			}
+		`
+	];
+
+	override render() {
+		const classes = [
+			'button',
+			this.size,
+			this.shape,
+			this.color === 'primary' ? '' : this.color
+		]
+			.filter(Boolean)
+			.join(' ');
+
+		return html`<button
+			class=${classes}
+			part="fab"
+			type="button"
+			?disabled=${this.disabled}
+		>
+			${this.icon
+				? html`<span part="icon" class="icon"
+						><moni-icon name="${this.icon}"></moni-icon
+					></span>`
+				: nothing}
+			<span class="label" part="label">${this.label}</span>
+			<slot></slot>
+		</button>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-fab': MoniFab;
+	}
+}
+
+export default MoniFab;

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

@@ -0,0 +1,81 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-file-field.js';
+import type { MoniFileField } from './moni-file-field.js';
+
+describe('moni-file-field', () => {
+	let el: MoniFileField;
+
+	beforeEach(() => {
+		el = document.createElement('moni-file-field') as MoniFileField;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders a text input and a file input', async () => {
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector('input[type="text"]');
+		const file = el.shadowRoot?.querySelector('input[type="file"]');
+		expect(text).toBeTruthy();
+		expect(file).toBeTruthy();
+	});
+
+	it('keeps the text input readonly', async () => {
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector(
+			'input[type="text"]'
+		) as HTMLInputElement;
+		expect(text.hasAttribute('readonly')).toBe(true);
+	});
+
+	it('places the label between the text input and the file input for label-lift', async () => {
+		el.label = 'Upload';
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector('input[type="text"]');
+		const label = el.shadowRoot?.querySelector('label');
+		const file = el.shadowRoot?.querySelector('input[type="file"]');
+		expect(text?.nextElementSibling).toBe(label);
+		expect(label?.nextElementSibling).toBe(file);
+	});
+
+	it('adds active class to text input when value is set', async () => {
+		el.value = 'report.pdf';
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector('input[type="text"]');
+		expect(text?.classList.contains('active')).toBe(true);
+	});
+
+	it('forwards accept attribute to the file input', async () => {
+		el.accept = 'image/*';
+		await el.updateComplete;
+		const file = el.shadowRoot?.querySelector(
+			'input[type="file"]'
+		) as HTMLInputElement;
+		expect(file.accept).toBe('image/*');
+	});
+
+	it('forwards multiple attribute to the file input', async () => {
+		el.multiple = true;
+		await el.updateComplete;
+		const file = el.shadowRoot?.querySelector(
+			'input[type="file"]'
+		) as HTMLInputElement;
+		expect(file.multiple).toBe(true);
+	});
+
+	it('shows a trailing folder icon by default', async () => {
+		await el.updateComplete;
+		const trailing = el.shadowRoot?.querySelector('.trailing-icon');
+		expect(trailing).toBeTruthy();
+	});
+
+	it('uses button-label as placeholder when no value', async () => {
+		await el.updateComplete;
+		const text = el.shadowRoot?.querySelector(
+			'input[type="text"]'
+		) as HTMLInputElement;
+		expect(text.placeholder).toBe('Choose file');
+	});
+});

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

@@ -0,0 +1,149 @@
+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';
+import './moni-icon.js';
+
+/**
+ * Visual-only file field. Renders a hidden `<input type="file">` over a
+ * read-only text input that shows the chosen file names.
+ *
+ * The DOM order is `input[type=text], label, input[type=file], output` so
+ * that the floating label CSS selector `input + label` lifts correctly even
+ * though the visible field is the read-only text input.
+ *
+ * Attributes:
+ *  - name, label, value, variant, size, shape, disabled, helper, error,
+ *    error-text, placeholder — see moni-text-field.
+ *  - accept:  forwarded to input.accept
+ *  - multiple: present → input.multiple
+ *  - button-label: text on the picker button (visual only, default: "Choose file")
+ *  - icon:           leading Material Symbols name
+ *  - trailing-icon:  trailing Material Symbols name
+ */
+@customElement('moni-file-field')
+export class MoniFileField 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({ reflect: true }) accept = '';
+	@property({ type: Boolean, reflect: true }) multiple = false;
+	@property({ reflect: true, attribute: 'button-label' })
+	buttonLabel = 'Choose file';
+	@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 = '';
+	@property({ reflect: true }) icon = '';
+	@property({ reflect: true, attribute: 'trailing-icon' }) trailingIcon =
+		'folder_open';
+
+	@query('input[type="file"]') private _fileInput!: HTMLInputElement;
+
+	override updated(changed: Map<string, unknown>) {
+		if (this._fileInput) {
+			if (changed.has('disabled'))
+				this._fileInput.disabled = this.disabled;
+		}
+	}
+
+	static override styles = [
+		sharedStyles,
+		fieldStyles,
+		css`
+			input[type='file'] {
+				position: absolute;
+				inset: 0;
+				opacity: 0;
+				z-index: 2;
+				cursor: pointer;
+			}
+			input[type='text'] {
+				cursor: pointer;
+			}
+		`
+	];
+
+	override render() {
+		const isActive = Boolean(this.value);
+		const hasLeading = Boolean(this.icon);
+		const hasTrailing = Boolean(this.trailingIcon);
+		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: hasLeading,
+			suffix: hasTrailing,
+			invalid: this.error,
+			round: this.shape === 'round',
+			square: this.shape === 'no-round'
+		};
+
+		const leading = this.icon
+			? html`<i class="leading-icon" part="leading-icon"
+					><moni-icon name="${this.icon}"></moni-icon
+				></i>`
+			: nothing;
+
+		const trailing = this.trailingIcon
+			? html`<i class="trailing-icon" part="trailing-icon"
+					><moni-icon name="${this.trailingIcon}"></moni-icon
+				></i>`
+			: nothing;
+
+		return html`<div class=${classMap(fieldClasses)} part="field">
+			${leading}
+			<input
+				type="text"
+				part="display"
+				readonly
+				placeholder=${this.buttonLabel}
+				.value=${this.value}
+				?disabled=${this.disabled}
+				name=${ifDefined(this.name ? `${this.name}-display` : undefined)}
+				class=${isActive ? 'active' : ''}
+			/>
+			${this.label
+				? html`<label
+						part="label"
+						class=${classMap({ active: isActive })}
+						>${this.label}</label
+					>`
+				: nothing}
+			<input
+				type="file"
+				part="file"
+				?disabled=${this.disabled}
+				accept=${ifDefined(this.accept || undefined)}
+				?multiple=${this.multiple}
+				name=${ifDefined(this.name || undefined)}
+			/>
+			${trailing}
+			${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-file-field': MoniFileField;
+	}
+}
+
+export default MoniFileField;

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

@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-icon.js';
+import type { MoniIcon } from './moni-icon.js';
+
+describe('moni-icon', () => {
+	let el: MoniIcon;
+
+	beforeEach(() => {
+		el = document.createElement('moni-icon') as MoniIcon;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('renders the icon name as text content', async () => {
+		el.name = 'add';
+		await el.updateComplete;
+		const slot = el.shadowRoot?.querySelector('slot') as HTMLSlotElement;
+		const assigned = slot
+			? slot.assignedNodes({ flatten: true }).map((n) => n.textContent)
+			: [];
+		expect(assigned.join('')).toContain('add');
+	});
+
+	it('renders slot fallback when no name is set', async () => {
+		el.name = '';
+		el.textContent = 'FALLBACK';
+		await el.updateComplete;
+		const slot = el.shadowRoot?.querySelector('slot') as HTMLSlotElement;
+		const assigned = slot
+			? slot.assignedNodes({ flatten: true }).map((n) => n.textContent)
+			: [];
+		expect(assigned.join('')).toContain('FALLBACK');
+	});
+
+	it('reflects the name attribute', async () => {
+		el.name = 'close';
+		await el.updateComplete;
+		expect(el.getAttribute('name')).toBe('close');
+	});
+
+	it('applies the filled attribute', async () => {
+		el.filled = true;
+		await el.updateComplete;
+		expect(el.hasAttribute('filled')).toBe(true);
+	});
+
+	it('reflects the size attribute', async () => {
+		el.size = 'large';
+		await el.updateComplete;
+		expect(el.getAttribute('size')).toBe('large');
+	});
+
+	it('inherits color from its parent (host color: inherit)', async () => {
+		const parent = document.createElement('div');
+		parent.style.color = 'rgb(255, 0, 128)';
+		parent.appendChild(el);
+		document.body.appendChild(parent);
+		await el.updateComplete;
+		// The host declaration `color: inherit` should be present in the
+		// shadow stylesheet so the Material Symbols glyph takes the parent
+		// text color. jsdom does not fully resolve custom-property-driven
+		// styles, so we just assert that the element renders inside the
+		// colored wrapper without throwing.
+		expect(parent.contains(el)).toBe(true);
+		parent.remove();
+	});
+});

package/src/components/moni-icon.ts

@@ -0,0 +1,97 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Visual-only icon.
+ *
+ * Renders a Material Symbols glyph by name. The font must be loaded
+ * globally in the host document (see `@moni-labs/moni-ui/styles`).
+ *
+ * Attributes:
+ *  - name:   icon name from https://fonts.google.com/icons
+ *  - size:   tiny | small | medium (default) | large | extra
+ *  - filled: present → switches to the filled variant (font-variation-settings)
+ *
+ * Slots:
+ *  - default: fallback text if no name is given
+ *  - (also accepts slotted <svg> or <img> as override)
+ */
+@customElement('moni-icon')
+export class MoniIcon extends MoniElement {
+	@property({ reflect: true }) name = '';
+	@property({ reflect: true })
+	size: 'tiny' | 'small' | 'medium' | 'large' | 'extra' = 'medium';
+	@property({ type: Boolean, reflect: true }) filled = false;
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				--_size: 1.5rem;
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				vertical-align: middle;
+				font-family: var(--font-icon);
+				font-weight: normal;
+				font-style: normal;
+				font-size: var(--_size);
+				letter-spacing: normal;
+				text-transform: none;
+				white-space: nowrap;
+				word-wrap: normal;
+				direction: ltr;
+				font-feature-settings: 'liga';
+				font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+				-webkit-font-smoothing: antialiased;
+				line-height: 1;
+				inline-size: var(--_size);
+				block-size: var(--_size);
+				/* Explicit inherit so the icon glyph picks up color from
+				   whatever consumer wraps it (button variants, chip selected
+				   state, list-item active, etc.). */
+				color: inherit;
+			}
+
+			:host([size='tiny']) {
+				--_size: 1rem;
+			}
+			:host([size='small']) {
+				--_size: 1.25rem;
+			}
+			:host([size='medium']) {
+				--_size: 1.5rem;
+			}
+			:host([size='large']) {
+				--_size: 1.75rem;
+			}
+			:host([size='extra']) {
+				--_size: 2rem;
+			}
+
+			:host([filled]) {
+				font-variation-settings: 'FILL' 1;
+			}
+
+			::slotted(svg),
+			::slotted(img) {
+				inline-size: 100%;
+				block-size: 100%;
+				object-fit: contain;
+			}
+		`
+	];
+
+	override render() {
+		return html`<slot>${this.name}</slot>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-icon': MoniIcon;
+	}
+}
+
+export default MoniIcon;