@moni-labs/moni-ui 0.2.0

package/dist/components/moni-typography.js

@@ -0,0 +1,205 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var MoniTypography_1;
+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)
+ */
+let MoniTypography = class MoniTypography extends MoniElement {
+    constructor() {
+        super(...arguments);
+        this.variant = 'body';
+        this.size = 'medium';
+        this.as = null;
+        this.text = '';
+    }
+    static { MoniTypography_1 = this; }
+    /** Default semantic tag for each variant per M3 spec. */
+    static _tagFor(variant) {
+        switch (variant) {
+            case 'display':
+                return 'h1';
+            case 'headline':
+                return 'h2';
+            case 'title':
+                return 'h3';
+            case 'body':
+                return 'p';
+            case 'label':
+                return 'label';
+        }
+    }
+    render() {
+        const cls = `${this.variant} ${this.size}`;
+        const tag = this.as ?? MoniTypography_1._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 { this.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;
+			}
+		`
+    ]; }
+};
+__decorate([
+    property({ reflect: true })
+], MoniTypography.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTypography.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTypography.prototype, "as", void 0);
+__decorate([
+    property({ reflect: true })
+], MoniTypography.prototype, "text", void 0);
+MoniTypography = MoniTypography_1 = __decorate([
+    customElement('moni-typography')
+], MoniTypography);
+export { MoniTypography };
+export default MoniTypography;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import './components/index.js';
+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';
+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';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,uBAAuB,CAAC;AAG/B,OAAO,EACN,SAAS,EACT,eAAe,EACf,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,eAAe,EACf,UAAU,EACV,aAAa,EACb,aAAa,EACb,QAAQ,EACR,YAAY,EACZ,OAAO,EACP,WAAW,EACX,YAAY,EACZ,SAAS,EACT,UAAU,EACV,UAAU,EACV,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,UAAU,EACV,OAAO,EACP,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,cAAc,EACd,aAAa,EACb,WAAW,EACX,OAAO,EACP,WAAW,EACX,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACd,YAAY,EACZ,SAAS,GACT,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,YAAY,EACX,aAAa,EACb,SAAS,EACT,YAAY,EACZ,WAAW,EACX,SAAS,EACT,MAAM,yBAAyB,CAAC;AACjC,OAAO,EACN,cAAc,EACd,qBAAqB,EACrB,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+// 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 { generateScheme, applySchemeToDocument, getDefaultSeed, hexToHsl, hslToHex } from './utils/color.js';

package/dist/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/dist/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/dist/styles/index.css

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