@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,166 @@
+import { html, css } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+import './moni-menu.js';
+
+/**
+ * Context menu triggered by right-click on the parent element.
+ *
+ * **Usage** (`m3-docs/components/menus/guidelines.md`): the menu opens at
+ * the cursor's coordinates and flips to the opposite side if there isn't
+ * enough space in the viewport.
+ *
+ * **Wiring example**:
+ *   ```html
+ *   <div style="position: relative;">
+ *     <moni-context-menu flip>
+ *       <moni-menu-item>Cut</moni-menu-item>
+ *       <moni-menu-item>Copy</moni-menu-item>
+ *       <moni-menu-item>Paste</moni-menu-item>
+ *     </moni-context-menu>
+ *     Right-click anywhere in this div
+ *   </div>
+ *   ```
+ *
+ * Attributes:
+ *  - placement: bottom (default) | top | left | right
+ *  - flip:      present → auto-flip to opposite side if menu would overflow
+ *               the viewport (M3 spec)
+ *
+ * Slots:
+ *  - default: menu items
+ */
+@customElement('moni-context-menu')
+export class MoniContextMenu extends MoniElement {
+	@property({ reflect: true })
+	placement: 'bottom' | 'top' | 'left' | 'right' = 'bottom';
+	@property({ type: Boolean, reflect: true }) flip = false;
+
+	@state() private _x = 0;
+	@state() private _y = 0;
+	@state() private _open = false;
+	@state() private _resolvedPlacement: 'bottom' | 'top' | 'left' | 'right' = 'bottom';
+
+	@query('moni-menu') private _menuEl?: HTMLElement;
+
+	private _target: HTMLElement | null = null;
+	private _docKeydown = (e: KeyboardEvent) => this._onDocKeydown(e);
+
+	override connectedCallback() {
+		super.connectedCallback();
+		this._target = this.parentElement;
+		if (this._target) {
+			const computed = getComputedStyle(this._target);
+			if (computed.position === 'static') {
+				this._target.style.position = 'relative';
+			}
+			this._target.addEventListener('contextmenu', this._onContextMenu);
+		}
+		// Close on click outside
+		document.addEventListener('click', this._onDocumentClick);
+		document.addEventListener('keydown', this._docKeydown);
+	}
+
+	override disconnectedCallback() {
+		if (this._target) {
+			this._target.removeEventListener('contextmenu', this._onContextMenu);
+		}
+		document.removeEventListener('click', this._onDocumentClick);
+		document.removeEventListener('keydown', this._docKeydown);
+		super.disconnectedCallback();
+	}
+
+	private _onContextMenu = (e: MouseEvent) => {
+		e.preventDefault();
+		if (this._target) {
+			const rect = this._target.getBoundingClientRect();
+			this._x = e.clientX - rect.left;
+			this._y = e.clientY - rect.top;
+		} else {
+			this._x = e.clientX;
+			this._y = e.clientY;
+		}
+		this._resolvedPlacement = this.placement;
+		this._open = true;
+		// After Lit renders the menu, check viewport fit and flip if needed.
+		this.updateComplete.then(() => this._maybeFlip());
+	};
+
+	private _maybeFlip() {
+		if (!this.flip) return;
+		const menu = this._menuEl?.shadowRoot?.querySelector('menu') as HTMLElement | null;
+		if (!menu) return;
+		const rect = menu.getBoundingClientRect();
+		const vw = window.innerWidth;
+		const vh = window.innerHeight;
+		const overflowsBottom = rect.bottom > vh;
+		const overflowsRight = rect.right > vw;
+		if (this.placement === 'bottom' && overflowsBottom) {
+			this._resolvedPlacement = 'top';
+		} else if (this.placement === 'top' && rect.top < 0) {
+			this._resolvedPlacement = 'bottom';
+		} else if (this.placement === 'right' && overflowsRight) {
+			this._resolvedPlacement = 'left';
+		} else if (this.placement === 'left' && rect.left < 0) {
+			this._resolvedPlacement = 'right';
+		}
+	}
+
+	private _onDocumentClick = () => {
+		if (this._open) {
+			this._open = false;
+		}
+	};
+
+	private _onDocKeydown = (e: KeyboardEvent) => {
+		if (e.key === 'Escape' && this._open) {
+			this._open = false;
+		}
+	};
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: contents;
+				font-family: var(--font);
+			}
+
+			.menu-host {
+				/* Absolute from parent which has position:relative */
+				position: absolute;
+				inset-inline-start: var(--_x, 0);
+				inset-block-start: var(--_y, 0);
+				z-index: 200;
+			}
+		`
+	];
+
+	override render() {
+		// When the menu is open, prefer the resolved (possibly flipped)
+		// placement; otherwise just use the host's requested placement so
+		// the inner element reflects the attribute synchronously.
+		const effectivePlacement = this._open
+			? this._resolvedPlacement
+			: this.placement;
+		return html`<div
+			class="menu-host"
+			style="--_x: ${this._x}px; --_y: ${this._y}px;"
+		>
+			<moni-menu
+				placement=${effectivePlacement}
+				?active=${this._open}
+			>
+				<slot></slot>
+			</moni-menu>
+		</div>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-context-menu': MoniContextMenu;
+	}
+}
+
+export default MoniContextMenu;

package/src/components/moni-dialog.ts

@@ -0,0 +1,240 @@
+import { html, css } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Visual-only dialog. Renders a native `<dialog>` element. The consumer
+ * opens/closes by calling the native `show()` / `showModal()` /
+ * `close()` / `showPopover()` methods on the inner dialog via
+ * `this.querySelector('dialog')` from the light DOM.
+ *
+ * Attributes:
+ *  - open:   present → dialog[open]
+ *  - side:   center (default) | top | right | bottom | left | max
+ *  - size:   small | medium (default) | large
+ *  - modal:  present → adds the `modal` class (used by BeerCSS)
+ *  - title:  header text
+ *
+ * Slots:
+ *  - default: body
+ *  - header:  title
+ *  - footer:  action buttons
+ */
+@customElement('moni-dialog')
+export class MoniDialog extends MoniElement {
+	@property({ type: Boolean, reflect: true }) open = false;
+	@property({ type: Boolean, reflect: true }) modal = false;
+	@property({ reflect: true })
+	side: 'center' | 'top' | 'right' | 'bottom' | 'left' | 'max' = 'center';
+	@property({ reflect: true })
+	size: 'small' | 'medium' | 'large' = 'medium';
+	@property({ reflect: true }) title = '';
+
+	@query('dialog') private _dialog!: HTMLDialogElement;
+
+	override updated(changed: Map<string, unknown>) {
+		if (changed.has('open') && this._dialog) {
+			if (this.open) {
+				if (this.modal) {
+					if (!this._dialog.open) {
+						this._dialog.showModal();
+					}
+				} else {
+					if (!this._dialog.open) {
+						this._dialog.show();
+					}
+				}
+			} else {
+				if (this._dialog.open) {
+					this._dialog.close();
+				}
+			}
+		}
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: contents;
+			}
+
+			dialog {
+				--_padding: 1.5rem;
+				--_top: calc(var(--_padding) + env(safe-area-inset-top, 0));
+				--_bottom: calc(var(--_padding) + env(safe-area-inset-bottom, 0));
+				display: block;
+				visibility: hidden;
+				border: none;
+				opacity: 0;
+				position: fixed;
+				box-shadow: var(--elevate2);
+				color: var(--on-surface);
+				background-color: var(--surface-container-high);
+				padding: var(--_padding);
+				z-index: 100;
+				inset: 10% auto auto 50%;
+				min-inline-size: 20rem;
+				max-inline-size: 100%;
+				max-block-size: 80%;
+				overflow-x: hidden;
+				overflow-y: auto;
+				transition: all var(--speed3), 0s background-color;
+				border-radius: 1.75rem;
+				transform: translate(-50%, -4rem);
+				outline: none;
+			}
+
+			dialog[open] {
+				visibility: visible;
+				opacity: 1;
+				transform: translate(-50%, 0);
+			}
+
+			dialog::backdrop {
+				display: block !important;
+				opacity: 0;
+				visibility: hidden;
+				position: fixed;
+				inset: 0;
+				color: var(--on-surface);
+				background-color: rgb(0 0 0 / 0.5);
+				z-index: 100;
+				transition: all var(--speed3), 0s background-color;
+				border-radius: 0;
+			}
+
+			dialog[open]::backdrop {
+				opacity: 1;
+				visibility: visible;
+			}
+
+			dialog:is(.top, .right, .bottom, .left, .max) {
+				--_padding: 1rem;
+			}
+
+			dialog.top,
+			dialog.bottom {
+				opacity: 1;
+				block-size: auto;
+				inline-size: 100%;
+				min-inline-size: auto;
+				max-block-size: 100%;
+			}
+			dialog.top {
+				inset: 0 auto auto 0;
+				transform: translateY(-100%);
+				border-radius: 0 0 1rem 1rem;
+				padding-block-start: var(--_top);
+			}
+			dialog.bottom {
+				inset: auto auto 0 0;
+				transform: translateY(100%);
+				border-radius: 1rem 1rem 0 0;
+				padding-block-end: var(--_bottom);
+			}
+
+			dialog:is(.left, .right) {
+				opacity: 1;
+				inset: 0 auto auto 0;
+				inline-size: auto;
+				block-size: 100%;
+				max-block-size: 100%;
+				background-color: var(--surface);
+				padding-block: var(--_top) var(--_bottom);
+			}
+			dialog.left {
+				inset: 0 auto auto 0;
+				border-radius: 0 1rem 1rem 0;
+				transform: translateX(-100%);
+			}
+			dialog.right {
+				inset: 0 0 auto auto;
+				border-radius: 1rem 0 0 1rem;
+				transform: translateX(100%);
+			}
+
+			dialog.max {
+				inset: 0 auto auto 0;
+				inline-size: 100%;
+				block-size: 100%;
+				max-inline-size: 100%;
+				max-block-size: 100%;
+				transform: translateY(4rem);
+				background-color: var(--surface);
+				border-radius: 0;
+				padding-block: var(--_top) var(--_bottom);
+			}
+
+			dialog[open]:is(.left, .right, .top, .bottom, .max) {
+				transform: translate(0, 0);
+			}
+
+			dialog.small {
+				inline-size: 25%;
+			}
+			dialog.medium {
+				inline-size: 50%;
+			}
+			dialog.large {
+				inline-size: 75%;
+			}
+			dialog.small:is(.left, .right) {
+				inline-size: 20rem;
+			}
+			dialog.medium:is(.left, .right) {
+				inline-size: 32rem;
+			}
+			dialog.large:is(.left, .right) {
+				inline-size: 44rem;
+			}
+			dialog.small:is(.top, .bottom) {
+				block-size: 16rem;
+			}
+			dialog.medium:is(.top, .bottom) {
+				block-size: 24rem;
+			}
+			dialog.large:is(.top, .bottom) {
+				block-size: 32rem;
+			}
+
+			header,
+			footer {
+				display: grid;
+				align-content: center;
+				border-radius: 0;
+				padding: 0;
+			}
+			header {
+				min-block-size: 3rem;
+			}
+			footer {
+				min-block-size: 3.5rem;
+			}
+		`
+	];
+
+	override render() {
+		const classes = [this.side, this.size, this.modal ? 'modal' : '']
+			.filter(Boolean)
+			.join(' ');
+		return html`<dialog
+			part="dialog"
+			class=${classes}
+		>
+			<header part="header">
+				<slot name="header">${this.title}</slot>
+			</header>
+			<div part="content"><slot></slot></div>
+			<footer part="footer"><slot name="footer"></slot></footer>
+		</dialog>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-dialog': MoniDialog;
+	}
+}
+
+export default MoniDialog;

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

@@ -0,0 +1,42 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-divider.js';
+import type { MoniDivider } from './moni-divider.js';
+
+describe('moni-divider (P5.1 — recreated)', () => {
+	let el: MoniDivider;
+
+	beforeEach(() => {
+		el = document.createElement('moni-divider') as MoniDivider;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('defaults to inset=leading', async () => {
+		await el.updateComplete;
+		expect(el.inset).toBe('leading');
+		expect(el.getAttribute('inset')).toBe('leading');
+	});
+
+	it('reflects all three M3 insets: leading / middle / none', async () => {
+		for (const inset of ['leading', 'middle', 'none'] as const) {
+			el.inset = inset;
+			await el.updateComplete;
+			expect(el.getAttribute('inset')).toBe(inset);
+		}
+	});
+
+	it('renders an empty default slot for inline content', async () => {
+		await el.updateComplete;
+		const slot = el.shadowRoot?.querySelector('slot');
+		expect(slot).toBeTruthy();
+	});
+
+	it('reflects the vertical attribute', async () => {
+		el.setAttribute('vertical', '');
+		await el.updateComplete;
+		expect(el.hasAttribute('vertical')).toBe(true);
+	});
+});

package/src/components/moni-divider.ts

@@ -0,0 +1,77 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Material 3 Divider (`m3-docs/components/divider/specs.md`).
+ *
+ * A thin line used to group content in lists, layouts, or cards. M3 spec
+ * defines three inset variants:
+ *  - **full** (default): spans the full width of the parent.
+ *  - **inset**: indented from the leading edge (16dp) so it lines up
+ *    with text content below an icon.
+ *  - **middle**: indented from both edges (16dp each).
+ *
+ * M3 measurements:
+ *  - Thickness: 1dp (`0.0625rem`).
+ *  - Color: `outline-variant` (subtle on a light background).
+ *
+ * Attributes:
+ *  - inset:  leading (default) | middle | none
+ *
+ * Slots:
+ *  - default: optional content rendered inline with the divider line.
+ */
+@customElement('moni-divider')
+export class MoniDivider extends MoniElement {
+	@property({ reflect: true })
+	inset: 'leading' | 'middle' | 'none' = 'leading';
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+				/* M3 spec: 1dp thick, on-surface-variant for subtle separation. */
+				block-size: 0.0625rem;
+				min-inline-size: 0;
+				background-color: var(--outline-variant);
+				border: 0;
+				margin: 0;
+			}
+
+			/* Inset variants. M3 spec: 16dp from the leading edge. */
+			:host([inset='leading']) {
+				margin-inline-start: 1rem;
+				margin-inline-end: 0;
+			}
+			:host([inset='middle']) {
+				margin-inline: 1rem;
+			}
+			:host([inset='none']) {
+				margin-inline: 0;
+			}
+
+			/* Vertical divider (M3 spec also defines vertical usage). */
+			:host([vertical]) {
+				inline-size: 0.0625rem;
+				block-size: auto;
+				min-block-size: 100%;
+				align-self: stretch;
+			}
+		`
+	];
+
+	override render() {
+		return html`<slot></slot>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-divider': MoniDivider;
+	}
+}
+
+export default MoniDivider;

package/src/components/moni-expansion.ts

@@ -0,0 +1,86 @@
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Visual-only expansion panel. Renders a `<details>` element.
+ *
+ * Attributes:
+ *  - open: present → panel expanded
+ *  - title: heading text for the summary
+ *
+ * Slots:
+ *  - default:  panel body
+ *  - summary:  custom summary content (overrides title)
+ */
+@customElement('moni-expansion')
+export class MoniExpansion extends MoniElement {
+	@property({ type: Boolean, reflect: true }) open = false;
+	@property({ reflect: true }) title = '';
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+			}
+
+			details {
+				border-radius: 0.5rem;
+				overflow: hidden;
+			}
+
+			summary {
+				list-style-type: none;
+				cursor: pointer;
+				padding: 0.75rem 1rem;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				gap: 0.5rem;
+				font-weight: 500;
+				color: var(--on-surface);
+				background-color: var(--surface-container);
+			}
+			summary::-webkit-details-marker {
+				display: none;
+			}
+			summary::after {
+				content: 'expand_more';
+				font-family: var(--font-icon);
+				font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+				font-size: 1.25rem;
+				transition: transform var(--speed2);
+			}
+			details[open] > summary::after {
+				transform: rotate(180deg);
+			}
+
+			.body {
+				padding: 1rem;
+				background-color: var(--surface-container-low);
+				color: var(--on-surface);
+			}
+		`
+	];
+
+	override render() {
+		return html`<details ?open=${this.open} part="expansion">
+			<summary part="summary">
+				<slot name="summary">${this.title}</slot>
+			</summary>
+			<div class="body" part="body">
+				<slot></slot>
+			</div>
+		</details>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-expansion': MoniExpansion;
+	}
+}
+
+export default MoniExpansion;