@moni-labs/moni-ui 0.2.0

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

@@ -0,0 +1,119 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './moni-typography.js';
+import type { MoniTypography } from './moni-typography.js';
+
+describe('moni-typography (P5.2 — recreated)', () => {
+	let el: MoniTypography;
+
+	beforeEach(() => {
+		el = document.createElement('moni-typography') as MoniTypography;
+		document.body.appendChild(el);
+	});
+
+	afterEach(() => {
+		el.remove();
+	});
+
+	it('defaults to variant=body, size=medium', async () => {
+		await el.updateComplete;
+		expect(el.variant).toBe('body');
+		expect(el.size).toBe('medium');
+	});
+
+	it('renders the default <p> tag for body variant', async () => {
+		el.text = 'Hello';
+		await el.updateComplete;
+		const el_tag = el.shadowRoot?.querySelector('p');
+		expect(el_tag).toBeTruthy();
+		expect(el_tag?.textContent?.trim()).toBe('Hello');
+	});
+
+	it('renders <h1> for display variant', async () => {
+		el.variant = 'display';
+		el.text = 'Big text';
+		await el.updateComplete;
+		const h1 = el.shadowRoot?.querySelector('h1');
+		expect(h1).toBeTruthy();
+		expect(h1?.classList.contains('display')).toBe(true);
+	});
+
+	it('renders <h2> for headline variant', async () => {
+		el.variant = 'headline';
+		el.text = 'Section';
+		await el.updateComplete;
+		const h2 = el.shadowRoot?.querySelector('h2');
+		expect(h2).toBeTruthy();
+		expect(h2?.classList.contains('headline')).toBe(true);
+	});
+
+	it('renders <h3> for title variant', async () => {
+		el.variant = 'title';
+		await el.updateComplete;
+		const h3 = el.shadowRoot?.querySelector('h3');
+		expect(h3).toBeTruthy();
+	});
+
+	it('renders <label> for label variant', async () => {
+		el.variant = 'label';
+		await el.updateComplete;
+		const label = el.shadowRoot?.querySelector('label');
+		expect(label).toBeTruthy();
+	});
+
+	it('overrides the tag via the as attribute', async () => {
+		el.variant = 'headline';
+		el.as = 'span';
+		await el.updateComplete;
+		const span = el.shadowRoot?.querySelector('span');
+		expect(span).toBeTruthy();
+		expect(span?.classList.contains('headline')).toBe(true);
+	});
+
+	it('reflects size variations', async () => {
+		el.variant = 'title';
+		for (const size of ['large', 'medium', 'small'] as const) {
+			el.size = size;
+			await el.updateComplete;
+			const inner = el.shadowRoot?.querySelector('h3');
+			expect(inner?.classList.contains(size)).toBe(true);
+		}
+	});
+
+	it('supports all 5 variants × 3 sizes', async () => {
+		const variants: Array<'display' | 'headline' | 'title' | 'body' | 'label'> = [
+			'display',
+			'headline',
+			'title',
+			'body',
+			'label'
+		];
+		const sizes: Array<'large' | 'medium' | 'small'> = ['large', 'medium', 'small'];
+		for (const v of variants) {
+			for (const s of sizes) {
+				el.variant = v;
+				el.size = s;
+				await el.updateComplete;
+				const tagName = v === 'display' ? 'h1'
+					: v === 'headline' ? 'h2'
+					: v === 'title' ? 'h3'
+					: v === 'body' ? 'p'
+					: 'label';
+				const inner = el.shadowRoot?.querySelector(tagName);
+				expect(inner, `${v}/${s}`).toBeTruthy();
+				expect(inner?.classList.contains(v), `${v} class`).toBe(true);
+				expect(inner?.classList.contains(s), `${s} class`).toBe(true);
+			}
+		}
+	});
+
+	it('renders slot content when text attribute is empty', async () => {
+		el.text = '';
+		el.textContent = 'Slotted content';
+		await el.updateComplete;
+		const p = el.shadowRoot?.querySelector('p');
+		const slot = p?.querySelector('slot') as HTMLSlotElement | null;
+		const assigned = slot?.assignedNodes({ flatten: true }) ?? [];
+		const text = assigned.map((n) => n.textContent ?? '').join('').trim();
+		expect(text).toBe('Slotted content');
+	});
+});

package/src/components/moni-typography.ts

@@ -0,0 +1,195 @@
+import { css, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { unsafeStatic, html as staticHtml } from 'lit/static-html.js';
+import { MoniElement, sharedStyles } from './_base/index.js';
+
+/**
+ * Material 3 Typography (`m3-docs/components/`).
+ *
+ * Renders a single piece of text using the M3 type scale. The component
+ * chooses both the semantic tag and the typography class based on the
+ * `variant` attribute. Consumers can override the tag via `as`.
+ *
+ * M3 type scale (5 categories, 3 sizes each):
+ *  - **display**: largest text, used for marketing or hero content.
+ *  - **headline**: page-level headings (H1 equivalent).
+ *  - **title**:    section headings, dialog titles.
+ *  - **body**:     paragraph text.
+ *  - **label**:    button text, captions.
+ *
+ * Each category has `large`, `medium`, and `small` sizes (per M3 spec).
+ *
+ * Attributes:
+ *  - variant: display | headline | title | body | label (default body)
+ *  - size:    large | medium | small (default medium)
+ *  - as:      override the rendered tag (e.g. "span", "p", "label")
+ *
+ * Slots:
+ *  - default: text content (falls back to `text` attribute if empty)
+ */
+@customElement('moni-typography')
+export class MoniTypography extends MoniElement {
+	@property({ reflect: true })
+	variant: 'display' | 'headline' | 'title' | 'body' | 'label' = 'body';
+	@property({ reflect: true })
+	size: 'large' | 'medium' | 'small' = 'medium';
+	@property({ reflect: true })
+	as: string | null = null;
+	@property({ reflect: true }) text = '';
+
+	/** Default semantic tag for each variant per M3 spec. */
+	private static _tagFor(
+		variant: 'display' | 'headline' | 'title' | 'body' | 'label'
+	): string {
+		switch (variant) {
+			case 'display':
+				return 'h1';
+			case 'headline':
+				return 'h2';
+			case 'title':
+				return 'h3';
+			case 'body':
+				return 'p';
+			case 'label':
+				return 'label';
+		}
+	}
+
+	override render() {
+		const cls = `${this.variant} ${this.size}`;
+		const tag = this.as ?? MoniTypography._tagFor(this.variant);
+		// Render the dynamic tag with `unsafeStatic` so we don't hit the
+		// "Bindings in tag names are not supported" error from lit 3.
+		const tagStatic = unsafeStatic(tag);
+		return staticHtml`<${tagStatic}
+			class=${cls}
+			part="text"
+		>
+			<slot>${this.text || nothing}</slot>
+		</${tagStatic}>`;
+	}
+
+	static override styles = [
+		sharedStyles,
+		css`
+			:host {
+				display: block;
+				font-family: var(--font);
+				color: inherit;
+				margin: 0;
+				padding: 0;
+			}
+			:host([variant='label']) {
+				display: inline-block;
+			}
+
+			/* ─── M3 Display (largest) ─── */
+			.display.large {
+				font-size: 3.5625rem;
+				line-height: 4rem;
+				font-weight: 400;
+				letter-spacing: -0.015625em;
+			}
+			.display.medium {
+				font-size: 2.8125rem;
+				line-height: 3.25rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+			.display.small {
+				font-size: 2.25rem;
+				line-height: 2.75rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+
+			/* ─── M3 Headline ─── */
+			.headline.large {
+				font-size: 2rem;
+				line-height: 2.5rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+			.headline.medium {
+				font-size: 1.75rem;
+				line-height: 2.25rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+			.headline.small {
+				font-size: 1.5rem;
+				line-height: 2rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+
+			/* ─── M3 Title ─── */
+			.title.large {
+				font-size: 1.375rem;
+				line-height: 1.75rem;
+				font-weight: 400;
+				letter-spacing: 0;
+			}
+			.title.medium {
+				font-size: 1rem;
+				line-height: 1.5rem;
+				font-weight: 500;
+				letter-spacing: 0.009375em;
+			}
+			.title.small {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 500;
+				letter-spacing: 0.00714em;
+			}
+
+			/* ─── M3 Body ─── */
+			.body.large {
+				font-size: 1rem;
+				line-height: 1.5rem;
+				font-weight: 400;
+				letter-spacing: 0.03125em;
+			}
+			.body.medium {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 400;
+				letter-spacing: 0.01786em;
+			}
+			.body.small {
+				font-size: 0.75rem;
+				line-height: 1rem;
+				font-weight: 400;
+				letter-spacing: 0.03333em;
+			}
+
+			/* ─── M3 Label ─── */
+			.label.large {
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				font-weight: 500;
+				letter-spacing: 0.00714em;
+			}
+			.label.medium {
+				font-size: 0.75rem;
+				line-height: 1rem;
+				font-weight: 500;
+				letter-spacing: 0.04545em;
+			}
+			.label.small {
+				font-size: 0.6875rem;
+				line-height: 1rem;
+				font-weight: 500;
+				letter-spacing: 0.04545em;
+			}
+		`
+	];
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'moni-typography': MoniTypography;
+	}
+}
+
+export default MoniTypography;

package/src/index.ts

@@ -0,0 +1,65 @@
+// Auto-register all Moni UI Web Components
+import './components/index.js';
+
+// Web Components (visual-only)
+export {
+	MoniBadge,
+	MoniBottomSheet,
+	MoniButton,
+	MoniCheckbox,
+	MoniChip,
+	MoniColorField,
+	MoniContextMenu,
+	MoniDialog,
+	MoniExpansion,
+	MoniFileField,
+	MoniMenu,
+	MoniMenuItem,
+	MoniNav,
+	MoniNavItem,
+	MoniProgress,
+	MoniRadio,
+	MoniRipple,
+	MoniSelect,
+	MoniSlider,
+	MoniSnackbar,
+	MoniStep,
+	MoniStepper,
+	MoniSwitch,
+	MoniTab,
+	MoniTabs,
+	MoniTextarea,
+	MoniTextField,
+	MoniTimePicker,
+	MoniSideSheet,
+	MoniTooltip,
+	MoniFab,
+	MoniFabMenu,
+	MoniButtonGroup,
+	MoniSplitButton,
+	MoniButtonSegment,
+	MoniSegmentedButton,
+	MoniLoadingIndicator,
+	MoniMorphModal,
+	MoniCarousel,
+	MoniShape,
+} from './components/index.js';
+
+// Utils
+export { getThemeEngine, resetThemeEngine } from './utils/theme.svelte.js';
+export type {
+	ThemeSettings,
+	ThemeMode,
+	ThemeDensity,
+	ThemeRadius,
+	ThemeFont
+} from './utils/theme.svelte.js';
+export {
+	generateScheme,
+	applySchemeToDocument,
+	getDefaultSeed,
+	hexToHsl,
+	hslToHex
+} from './utils/color.js';
+export type { ColorScheme, ContrastLevel } from './utils/color.js';
+

package/src/styles/animations.css

@@ -0,0 +1,46 @@
+/* ─── BeerCSS keyframes (extracted from Moni-Labs/beercss-CDN/beer.css) ─── */
+
+@keyframes to-page {
+	from {
+		opacity: 0;
+		transform: var(--_transform);
+	}
+
+	to {
+		opacity: 1;
+		transform: translate(0, 0);
+	}
+}
+
+/* Indeterminate linear: the `::after` overlay slides across the track.
+   BeerCSS's original animated `padding`/`margin` on the native `<progress>`,
+   which browsers do not honour. We animate the absolutely-positioned
+   pseudo-element instead. */
+@keyframes to-indeterminate-progress {
+	0% {
+		inset-inline-start: -50%;
+	}
+
+	100% {
+		inset-inline-start: 100%;
+	}
+}
+
+@keyframes to-rotate {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes to-ripple {
+	to {
+		transform: scale(4);
+		opacity: 0;
+	}
+}
+
+

package/src/styles/base.css

@@ -0,0 +1,248 @@
+/* ─── Estilos base de Moni UI ─── */
+
+/* Material Symbols Rounded — icon font used by <moni-icon> and MD3 icons */
+@font-face {
+	font-family: 'Material Symbols Rounded';
+	font-style: normal;
+	font-weight: 100 700;
+	font-display: swap;
+	src: url('../assets/material-symbols-rounded.woff2') format('woff2');
+}
+
+html,
+body {
+	background-color: var(--color-background);
+	color: var(--color-on-background);
+	font-family: var(--font-sans);
+	font-style: normal;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	min-height: 100vh;
+}
+
+/* ─── Global italic + user-select reset ─── */
+* {
+	font-style: normal;
+}
+
+i,
+em,
+cite,
+dfn,
+b,
+strong,
+span,
+a,
+code,
+kbd,
+samp,
+var,
+mark,
+time,
+del,
+ins,
+sub,
+sup,
+label,
+legend,
+small,
+address,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+[part~='icon'],
+[part~='label'],
+[part~='message'],
+[part~='content'],
+[part~='title'] {
+	font-style: normal !important;
+}
+
+/* Default icon font + sizing for inline <i> inside any shadow root */
+:where(moni-button, moni-icon, moni-chip, moni-tab, moni-fab, moni-menu-item,
+       moni-list-item, moni-checkbox, moni-radio, moni-switch, moni-slider,
+       moni-step, moni-badge, moni-tooltip, moni-toolbar) i {
+	font-family: var(--font-icon, 'Material Symbols Rounded');
+	font-weight: normal;
+	font-style: normal;
+	font-size: 1.5rem;
+	letter-spacing: normal;
+	text-transform: none;
+	direction: ltr;
+	font-feature-settings: 'liga';
+	-webkit-font-smoothing: antialiased;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	vertical-align: middle;
+	line-height: 1;
+}
+
+/* Fuente global para todos los elementos de formulario e interfaz */
+button,
+input,
+select,
+textarea,
+optgroup {
+	font-family: var(--font-sans);
+}
+
+/* Fuente de títulos dinámica */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.moni-font-title {
+	font-family: var(--font-title);
+}
+
+/* Grain overlay */
+.moni-grain::before {
+	content: '';
+	position: fixed;
+	inset: 0;
+	z-index: 9999;
+	pointer-events: none;
+	opacity: var(--moni-grain-opacity, 0.03);
+	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
+	background-repeat: repeat;
+	background-size: 200px 200px;
+}
+
+/* Scrollbar discreto */
+*::-webkit-scrollbar {
+	width: 8px;
+	height: 8px;
+}
+
+*::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+	background: var(--color-outline-variant);
+	border-radius: 4px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+	background: var(--color-outline);
+}
+
+/* Focus visible */
+:focus-visible {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 2px;
+	border-radius: 4px;
+}
+
+/* Touch targets */
+.moni-touch-target {
+	min-height: 48px;
+	min-width: 48px;
+}
+
+/* Safe area helpers */
+.moni-safe-bottom {
+	padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+.moni-safe-top {
+	padding-top: env(safe-area-inset-top, 0px);
+}
+
+/* ─── Global List (Light DOM) ─── */
+moni-list {
+	display: flex;
+	flex-direction: column;
+	padding: 0;
+	margin: 0;
+	gap: 0;
+	flex: 1;
+	color: inherit;
+}
+
+moni-list-item {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+	min-block-size: var(--moni-list-item-min-block-size, 3.5rem);
+	padding: 0.5rem 1rem;
+	cursor: pointer;
+	border-block-end: var(--moni-list-divider, 0);
+	position: relative;
+	text-align: start;
+	font-style: normal !important;
+}
+
+moni-list-item[active] {
+	background-color: var(--color-secondary-container);
+	color: var(--color-on-secondary-container);
+	border-radius: var(--moni-list-radius, 0);
+}
+
+moni-list-item[disabled] {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+moni-list-item:last-of-type {
+	border-block-end: 0;
+}
+
+moni-list-item i {
+	font-family: var(--font-icon, 'Material Symbols Rounded');
+	font-size: 1.5rem;
+	font-weight: normal;
+	font-style: normal !important;
+	inline-size: 1.5rem;
+	block-size: 1.5rem;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* ─── Global User Select Prevention ─── */
+:is(moni-icon, moni-button, moni-chip, moni-tab, moni-fab, moni-fab-menu,
+    moni-menu-item, moni-menu, moni-context-menu, moni-checkbox, moni-radio,
+    moni-switch, moni-slider, moni-step, moni-stepper, moni-badge, moni-tooltip,
+    moni-toolbar, moni-list, moni-list-item, moni-nav, moni-nav-item,
+    moni-tabs, moni-divider, moni-progress,
+    moni-ripple, moni-card, moni-app-bar, moni-expansion,
+    moni-snackbar, moni-text-field, moni-textarea, moni-select,
+    moni-color-field, moni-file-field, .no-select) {
+	user-select: none;
+	-webkit-user-select: none;
+	-ms-user-select: none;
+}
+
+/* Avoid text selection in slotted children of interactive hosts */
+:is(moni-button, moni-chip, moni-fab, moni-tab, moni-menu-item, moni-list-item,
+    moni-checkbox, moni-radio, moni-switch, moni-step, moni-tooltip) * {
+	user-select: none;
+	-webkit-user-select: none;
+}
+
+/* ─── Selectable exceptions: where text SHOULD be selectable ─── */
+:is(input, textarea, pre, code, kbd, samp, [contenteditable]) {
+	user-select: text !important;
+	-webkit-user-select: text !important;
+}
+
+/* ─── Anchor-name helper: drop a CSS anchor on a parent and the WC can use it ─── */
+[data-anchor] {
+	anchor-name: --moni-anchor;
+}
+
+/* ─── Interactive cursor ─── */
+:is(button, summary, [role='button'], [role='tab'], [role='menuitem'], a[href]) {
+	cursor: pointer;
+}

package/src/styles/index.css

@@ -0,0 +1,3 @@
+@import './tokens.css';
+@import './animations.css';
+@import './base.css';