@melodicdev/components 1.3.0 → 1.5.0

package/lib/components/data-display/profile-card/profile-card.component.js

@@ -0,0 +1,102 @@
+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;
+};
+import { MelodicComponent } from '@melodicdev/core';
+import { profileCardTemplate } from './profile-card.template.js';
+import { profileCardStyles } from './profile-card.styles.js';
+/**
+ * ml-profile-card - Identity card for person/entity detail pages
+ *
+ * @example
+ * ```html
+ * <ml-profile-card
+ *   name="Sarah Mitchell"
+ *   subtitle="Member · Women's Ministry"
+ *   avatar="https://example.com/photo.jpg"
+ *   avatar-size="lg"
+ * >
+ *   <div slot="details">
+ *     <div class="detail-row"><ml-icon icon="envelope" size="sm"></ml-icon> sarah@example.com</div>
+ *     <div class="detail-row"><ml-icon icon="phone" size="sm"></ml-icon> (555) 123-4567</div>
+ *   </div>
+ *   <div slot="tags">
+ *     <ml-tag>Women's Ministry</ml-tag>
+ *     <ml-tag>Choir</ml-tag>
+ *   </div>
+ *   <div slot="actions">
+ *     <ml-button variant="primary">Message</ml-button>
+ *     <ml-button variant="outline">Edit</ml-button>
+ *   </div>
+ *   <div slot="meta">
+ *     <div>Member since: January 2019</div>
+ *     <div>Birthday: March 15</div>
+ *   </div>
+ * </ml-profile-card>
+ * ```
+ *
+ * @slot details - Contact info rows (icon + text pairs)
+ * @slot tags - Involvement/group tags
+ * @slot actions - Action buttons (Message, Edit, etc.)
+ * @slot meta - Detail fields (member since, birthday, family)
+ *
+ * @cssproperty --ml-profile-card-bg - Card background (default: var(--ml-color-surface))
+ * @cssproperty --ml-profile-card-banner-from - Banner gradient start color
+ * @cssproperty --ml-profile-card-banner-to - Banner gradient end color
+ */
+let ProfileCardComponent = class ProfileCardComponent {
+    constructor() {
+        /** Person name */
+        this.name = '';
+        /** Subtitle (e.g. "Member · Women's Ministry") */
+        this.subtitle = '';
+        /** Avatar image URL — falls back to initials derived from name */
+        this.avatar = '';
+        /** Avatar size */
+        this['avatar-size'] = 'lg';
+        /** Slot visibility flags (toggled via slotchange) */
+        this.hasDetails = false;
+        this.hasTags = false;
+        this.hasActions = false;
+        this.hasMeta = false;
+    }
+    /** Derive initials from name */
+    get initials() {
+        return this.name
+            .split(' ')
+            .map(part => part.charAt(0))
+            .join('')
+            .toUpperCase()
+            .slice(0, 2);
+    }
+    onCreate() {
+        const shadow = this.elementRef.shadowRoot;
+        if (!shadow)
+            return;
+        shadow.querySelectorAll('slot[name]').forEach(slot => {
+            slot.addEventListener('slotchange', () => {
+                const name = slot.getAttribute('name');
+                const hasContent = slot.assignedNodes().length > 0;
+                if (name === 'details')
+                    this.hasDetails = hasContent;
+                else if (name === 'tags')
+                    this.hasTags = hasContent;
+                else if (name === 'actions')
+                    this.hasActions = hasContent;
+                else if (name === 'meta')
+                    this.hasMeta = hasContent;
+            });
+        });
+    }
+};
+ProfileCardComponent = __decorate([
+    MelodicComponent({
+        selector: 'ml-profile-card',
+        template: profileCardTemplate,
+        styles: profileCardStyles,
+        attributes: ['name', 'subtitle', 'avatar', 'avatar-size']
+    })
+], ProfileCardComponent);
+export { ProfileCardComponent };

package/lib/components/data-display/profile-card/profile-card.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const profileCardStyles: () => import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=profile-card.styles.d.ts.map

package/lib/components/data-display/profile-card/profile-card.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/profile-card/profile-card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB,iDAoL7B,CAAC"}

package/lib/components/data-display/profile-card/profile-card.styles.js

@@ -0,0 +1,182 @@
+import { css } from '@melodicdev/core';
+export const profileCardStyles = () => css `
+	:host {
+		display: block;
+
+		/* ── Profile Card: surface ── */
+		--ml-profile-card-bg: var(--ml-color-surface);
+		--ml-profile-card-border-width: var(--ml-border);
+		--ml-profile-card-border-color: var(--ml-color-border);
+		--ml-profile-card-radius: var(--ml-radius-lg);
+
+		/* ── Profile Card: banner ── */
+		--ml-profile-card-banner-height: 80px;
+		--ml-profile-card-banner-from: var(--ml-color-primary);
+		--ml-profile-card-banner-to: var(--ml-color-primary-hover, var(--ml-color-primary));
+		--ml-profile-card-banner-opacity: 0.85;
+
+		/* ── Profile Card: avatar ── */
+		--ml-profile-card-avatar-ring-color: var(--ml-color-border);
+		--ml-profile-card-avatar-shadow: var(--ml-shadow-md);
+
+		/* ── Profile Card: name ── */
+		--ml-profile-card-name-font: 'Cormorant Garamond', 'Georgia', serif;
+		--ml-profile-card-name-size: var(--ml-text-xl);
+		--ml-profile-card-name-weight: var(--ml-font-semibold);
+		--ml-profile-card-name-color: var(--ml-color-text);
+
+		/* ── Profile Card: subtitle ── */
+		--ml-profile-card-subtitle-font: var(--ml-font-sans);
+		--ml-profile-card-subtitle-size: var(--ml-text-sm);
+		--ml-profile-card-subtitle-color: var(--ml-color-text-muted);
+
+		/* ── Profile Card: section label ── */
+		--ml-profile-card-section-label-font: var(--ml-font-sans);
+		--ml-profile-card-section-label-size: var(--ml-text-xs);
+		--ml-profile-card-section-label-weight: var(--ml-font-semibold);
+		--ml-profile-card-section-label-color: var(--ml-color-text-muted);
+
+		/* ── Profile Card: details / meta text ── */
+		--ml-profile-card-detail-font: var(--ml-font-sans);
+		--ml-profile-card-detail-size: var(--ml-text-sm);
+		--ml-profile-card-detail-color: var(--ml-color-text-secondary);
+	}
+
+	.ml-profile-card {
+		background-color: var(--ml-profile-card-bg);
+		border: var(--ml-profile-card-border-width) solid var(--ml-profile-card-border-color);
+		border-radius: var(--ml-profile-card-radius);
+	}
+
+	/* Subtle gradient banner at top */
+	.ml-profile-card__banner {
+		height: var(--ml-profile-card-banner-height);
+		border-radius: var(--ml-profile-card-radius) var(--ml-profile-card-radius) 0 0;
+		background: linear-gradient(
+			135deg,
+			var(--ml-profile-card-banner-from),
+			var(--ml-profile-card-banner-to)
+		);
+		opacity: var(--ml-profile-card-banner-opacity);
+	}
+
+	/* Centered identity area */
+	.ml-profile-card__identity {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		padding: 0 var(--ml-space-5) var(--ml-space-4);
+		margin-top: calc(var(--ml-space-10) * -1);
+		text-align: center;
+	}
+
+	.ml-profile-card__avatar {
+		display: inline-block;
+		margin-bottom: var(--ml-space-3);
+		border-radius: var(--ml-radius-full);
+		box-shadow: 0 0 0 4px var(--ml-profile-card-bg), 0 0 0 5px var(--ml-profile-card-avatar-ring-color), var(--ml-profile-card-avatar-shadow);
+		line-height: 0;
+		position: relative;
+		z-index: 1;
+	}
+
+	.ml-profile-card__avatar ml-avatar {
+		display: block;
+		--ml-avatar-border-color: var(--ml-color-border-muted, var(--ml-profile-card-border-color));
+	}
+
+	.ml-profile-card__name {
+		margin: 0;
+		font-family: var(--ml-profile-card-name-font);
+		font-size: var(--ml-profile-card-name-size);
+		font-weight: var(--ml-profile-card-name-weight);
+		color: var(--ml-profile-card-name-color);
+		line-height: var(--ml-leading-tight);
+	}
+
+	.ml-profile-card__subtitle {
+		margin: var(--ml-space-1) 0 0;
+		font-family: var(--ml-profile-card-subtitle-font);
+		font-size: var(--ml-profile-card-subtitle-size);
+		color: var(--ml-profile-card-subtitle-color);
+	}
+
+	/* Sections */
+	.ml-profile-card__section {
+		padding: var(--ml-space-4) var(--ml-space-5);
+		border-top: var(--ml-profile-card-border-width) solid var(--ml-profile-card-border-color);
+	}
+
+	.ml-profile-card__section--hidden {
+		display: none;
+	}
+
+	.ml-profile-card__section-label {
+		width: 100%;
+		font-family: var(--ml-profile-card-section-label-font);
+		font-size: var(--ml-profile-card-section-label-size);
+		font-weight: var(--ml-profile-card-section-label-weight);
+		color: var(--ml-profile-card-section-label-color);
+		text-transform: uppercase;
+		letter-spacing: 0.06em;
+		margin-bottom: var(--ml-space-1);
+	}
+
+	/* Actions section */
+	.ml-profile-card__actions {
+		display: flex;
+		justify-content: center;
+		gap: var(--ml-space-3);
+	}
+
+	.ml-profile-card__actions.ml-profile-card__section--hidden {
+		display: none;
+	}
+
+	/* Details section */
+	.ml-profile-card__details {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-2);
+		font-family: var(--ml-profile-card-detail-font);
+		font-size: var(--ml-profile-card-detail-size);
+		color: var(--ml-profile-card-detail-color);
+	}
+
+	.ml-profile-card__details.ml-profile-card__section--hidden {
+		display: none;
+	}
+
+	.ml-profile-card__details ::slotted(*) {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-2);
+	}
+
+	/* Tags section */
+	.ml-profile-card__tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--ml-space-2);
+	}
+
+	.ml-profile-card__tags.ml-profile-card__section--hidden {
+		display: none;
+	}
+
+	/* Meta section */
+	.ml-profile-card__meta {
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-space-2);
+		font-family: var(--ml-profile-card-detail-font);
+		font-size: var(--ml-profile-card-detail-size);
+		color: var(--ml-profile-card-detail-color);
+	}
+
+	.ml-profile-card__meta.ml-profile-card__section--hidden {
+		display: none;
+	}
+`;

package/lib/components/data-display/profile-card/profile-card.template.d.ts

@@ -0,0 +1,3 @@
+import type { ProfileCardComponent } from './profile-card.component.js';
+export declare function profileCardTemplate(c: ProfileCardComponent): import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=profile-card.template.d.ts.map

package/lib/components/data-display/profile-card/profile-card.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"profile-card.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/profile-card/profile-card.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAExE,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,oBAAoB,6CAkD1D"}

package/lib/components/data-display/profile-card/profile-card.template.js

@@ -0,0 +1,52 @@
+import { html, classMap, when } from '@melodicdev/core';
+export function profileCardTemplate(c) {
+    return html `
+		<div class="ml-profile-card">
+			<div class="ml-profile-card__banner"></div>
+			<div class="ml-profile-card__identity">
+				<div class="ml-profile-card__avatar">
+					<ml-avatar
+						size=${c['avatar-size']}
+						src=${c.avatar}
+						initials=${c.initials}
+					></ml-avatar>
+				</div>
+				<h2 class="ml-profile-card__name">${c.name}</h2>
+				${when(!!c.subtitle, () => html `
+					<p class="ml-profile-card__subtitle">${c.subtitle}</p>
+				`)}
+			</div>
+			<div class=${classMap({
+        'ml-profile-card__section': true,
+        'ml-profile-card__actions': true,
+        'ml-profile-card__section--hidden': !c.hasActions
+    })}>
+				<slot name="actions"></slot>
+			</div>
+			<div class=${classMap({
+        'ml-profile-card__section': true,
+        'ml-profile-card__details': true,
+        'ml-profile-card__section--hidden': !c.hasDetails
+    })}>
+				<div class="ml-profile-card__section-label">Contact</div>
+				<slot name="details"></slot>
+			</div>
+			<div class=${classMap({
+        'ml-profile-card__section': true,
+        'ml-profile-card__tags': true,
+        'ml-profile-card__section--hidden': !c.hasTags
+    })}>
+				<div class="ml-profile-card__section-label">Involvement</div>
+				<slot name="tags"></slot>
+			</div>
+			<div class=${classMap({
+        'ml-profile-card__section': true,
+        'ml-profile-card__meta': true,
+        'ml-profile-card__section--hidden': !c.hasMeta
+    })}>
+				<div class="ml-profile-card__section-label">Details</div>
+				<slot name="meta"></slot>
+			</div>
+		</div>
+	`;
+}

package/lib/components/data-display/stat-card/index.d.ts

@@ -0,0 +1,2 @@
+export { StatCardComponent } from './stat-card.component.js';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/data-display/stat-card/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/stat-card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC"}

package/lib/components/data-display/stat-card/index.js

@@ -0,0 +1 @@
+export { StatCardComponent } from './stat-card.component.js';

package/lib/components/data-display/stat-card/stat-card.component.d.ts

@@ -0,0 +1,45 @@
+import type { IElementRef } from '@melodicdev/core';
+type TrendDirection = 'up' | 'down' | 'neutral';
+type ValueFont = 'serif' | 'sans';
+/**
+ * ml-stat-card - Dashboard metric card with label, value, optional trend, and icon
+ *
+ * @example
+ * ```html
+ * <ml-stat-card
+ *   label="Total Members"
+ *   value="1,247"
+ *   trend="+6 this month"
+ *   trend-direction="up"
+ *   icon="users"
+ * ></ml-stat-card>
+ * ```
+ *
+ * @csspart value - The large value display
+ * @csspart label - The label text
+ * @csspart trend - The trend text
+ * @csspart icon - The icon container
+ *
+ * @cssproperty --ml-stat-card-bg - Card background color (default: var(--ml-color-surface))
+ * @cssproperty --ml-stat-card-icon-color - Icon color (default: var(--ml-color-text-tertiary))
+ * @cssproperty --ml-stat-card-value-color - Value text color (default: var(--ml-color-text))
+ */
+export declare class StatCardComponent implements IElementRef {
+    elementRef: HTMLElement;
+    /** Metric label */
+    label: string;
+    /** Display value */
+    value: string | number;
+    /** Trend text (e.g. "+6 this month") */
+    trend: string;
+    /** Trend direction for styling */
+    'trend-direction': TrendDirection;
+    /** Icon name (Phosphor icon) */
+    icon: string;
+    /** Icon color — CSS color value or token */
+    'icon-color': string;
+    /** Value font family */
+    'value-font': ValueFont;
+}
+export {};
+//# sourceMappingURL=stat-card.component.d.ts.map

package/lib/components/data-display/stat-card/stat-card.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/stat-card/stat-card.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;AAChD,KAAK,SAAS,GAAG,OAAO,GAAG,MAAM,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,qBAMa,iBAAkB,YAAW,WAAW;IAC7C,UAAU,EAAG,WAAW,CAAC;IAEhC,mBAAmB;IACZ,KAAK,SAAM;IAElB,oBAAoB;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAM;IAEnC,wCAAwC;IACjC,KAAK,SAAM;IAElB,kCAAkC;IAC3B,iBAAiB,EAAE,cAAc,CAAa;IAErD,gCAAgC;IACzB,IAAI,SAAM;IAEjB,4CAA4C;IACrC,YAAY,SAAM;IAEzB,wBAAwB;IACjB,YAAY,EAAE,SAAS,CAAW;CACzC"}

package/lib/components/data-display/stat-card/stat-card.component.js

@@ -0,0 +1,59 @@
+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;
+};
+import { MelodicComponent } from '@melodicdev/core';
+import { statCardTemplate } from './stat-card.template.js';
+import { statCardStyles } from './stat-card.styles.js';
+/**
+ * ml-stat-card - Dashboard metric card with label, value, optional trend, and icon
+ *
+ * @example
+ * ```html
+ * <ml-stat-card
+ *   label="Total Members"
+ *   value="1,247"
+ *   trend="+6 this month"
+ *   trend-direction="up"
+ *   icon="users"
+ * ></ml-stat-card>
+ * ```
+ *
+ * @csspart value - The large value display
+ * @csspart label - The label text
+ * @csspart trend - The trend text
+ * @csspart icon - The icon container
+ *
+ * @cssproperty --ml-stat-card-bg - Card background color (default: var(--ml-color-surface))
+ * @cssproperty --ml-stat-card-icon-color - Icon color (default: var(--ml-color-text-tertiary))
+ * @cssproperty --ml-stat-card-value-color - Value text color (default: var(--ml-color-text))
+ */
+let StatCardComponent = class StatCardComponent {
+    constructor() {
+        /** Metric label */
+        this.label = '';
+        /** Display value */
+        this.value = '';
+        /** Trend text (e.g. "+6 this month") */
+        this.trend = '';
+        /** Trend direction for styling */
+        this['trend-direction'] = 'neutral';
+        /** Icon name (Phosphor icon) */
+        this.icon = '';
+        /** Icon color — CSS color value or token */
+        this['icon-color'] = '';
+        /** Value font family */
+        this['value-font'] = 'serif';
+    }
+};
+StatCardComponent = __decorate([
+    MelodicComponent({
+        selector: 'ml-stat-card',
+        template: statCardTemplate,
+        styles: statCardStyles,
+        attributes: ['label', 'value', 'trend', 'trend-direction', 'icon', 'icon-color', 'value-font']
+    })
+], StatCardComponent);
+export { StatCardComponent };

package/lib/components/data-display/stat-card/stat-card.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const statCardStyles: () => import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=stat-card.styles.d.ts.map

package/lib/components/data-display/stat-card/stat-card.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/stat-card/stat-card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAqH1B,CAAC"}

package/lib/components/data-display/stat-card/stat-card.styles.js

@@ -0,0 +1,119 @@
+import { css } from '@melodicdev/core';
+export const statCardStyles = () => css `
+	:host {
+		display: block;
+
+		/* ── Stat Card: host ── */
+		--ml-stat-card-min-width: 200px;
+
+		/* ── Stat Card: surface ── */
+		--ml-stat-card-bg: var(--ml-color-surface);
+		--ml-stat-card-border-width: var(--ml-border);
+		--ml-stat-card-border-color: var(--ml-color-border);
+		--ml-stat-card-radius: var(--ml-radius-lg);
+		--ml-stat-card-padding: var(--ml-space-5) var(--ml-space-6);
+		--ml-stat-card-shadow: var(--ml-shadow-xs);
+
+		/* ── Stat Card: label ── */
+		--ml-stat-card-label-font: var(--ml-font-sans);
+		--ml-stat-card-label-size: var(--ml-text-xs);
+		--ml-stat-card-label-weight: var(--ml-font-semibold);
+		--ml-stat-card-label-color: var(--ml-color-text-muted);
+
+		/* ── Stat Card: icon ── */
+		--ml-stat-card-icon-size: 36px;
+		--ml-stat-card-icon-bg: var(--ml-color-surface-raised, var(--ml-color-surface-sunken));
+		--ml-stat-card-icon-color: var(--ml-color-text-tertiary);
+		--ml-stat-card-icon-radius: var(--ml-radius);
+
+		/* ── Stat Card: value ── */
+		--ml-stat-card-value-color: var(--ml-color-text);
+		--ml-stat-card-value-font: 'Cormorant Garamond', 'Georgia', serif;
+		--ml-stat-card-value-size: 2.5rem;
+		--ml-stat-card-value-weight: 300;
+		--ml-stat-card-value-sans-size: 2rem;
+
+		/* ── Stat Card: trend ── */
+		--ml-stat-card-trend-font: var(--ml-font-sans);
+		--ml-stat-card-trend-size: var(--ml-text-xs);
+		--ml-stat-card-trend-color: var(--ml-color-text-muted);
+		--ml-stat-card-trend-up-color: var(--ml-color-success);
+		--ml-stat-card-trend-down-color: var(--ml-color-error);
+
+		min-width: var(--ml-stat-card-min-width);
+	}
+
+	.ml-stat-card {
+		background-color: var(--ml-stat-card-bg);
+		border: var(--ml-stat-card-border-width) solid var(--ml-stat-card-border-color);
+		border-radius: var(--ml-stat-card-radius);
+		padding: var(--ml-stat-card-padding);
+		box-shadow: var(--ml-stat-card-shadow);
+	}
+
+	.ml-stat-card__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: var(--ml-space-3);
+		margin-bottom: var(--ml-space-2);
+	}
+
+	.ml-stat-card__label {
+		font-family: var(--ml-stat-card-label-font);
+		font-size: var(--ml-stat-card-label-size);
+		font-weight: var(--ml-stat-card-label-weight);
+		color: var(--ml-stat-card-label-color);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+
+	.ml-stat-card__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--ml-stat-card-icon-size);
+		height: var(--ml-stat-card-icon-size);
+		border-radius: var(--ml-stat-card-icon-radius);
+		background-color: var(--ml-stat-card-icon-bg);
+		color: var(--ml-stat-card-icon-color);
+		flex-shrink: 0;
+	}
+
+	.ml-stat-card__value {
+		color: var(--ml-stat-card-value-color);
+		line-height: 1.1;
+		margin-bottom: var(--ml-space-1);
+	}
+
+	.ml-stat-card__value--serif {
+		font-family: var(--ml-stat-card-value-font);
+		font-size: var(--ml-stat-card-value-size);
+		font-weight: var(--ml-stat-card-value-weight);
+	}
+
+	.ml-stat-card__value--sans {
+		font-family: var(--ml-font-sans);
+		font-size: var(--ml-stat-card-value-sans-size);
+		font-weight: var(--ml-font-bold);
+	}
+
+	.ml-stat-card__trend {
+		font-family: var(--ml-stat-card-trend-font);
+		font-size: var(--ml-stat-card-trend-size);
+		color: var(--ml-stat-card-trend-color);
+		line-height: var(--ml-leading-normal);
+	}
+
+	.ml-stat-card__trend--up {
+		color: var(--ml-stat-card-trend-up-color);
+	}
+
+	.ml-stat-card__trend--down {
+		color: var(--ml-stat-card-trend-down-color);
+	}
+
+	.ml-stat-card__trend--neutral {
+		color: var(--ml-stat-card-trend-color);
+	}
+`;

package/lib/components/data-display/stat-card/stat-card.template.d.ts

@@ -0,0 +1,3 @@
+import type { StatCardComponent } from './stat-card.component.js';
+export declare function statCardTemplate(c: StatCardComponent): import("@melodicdev/core").TemplateResult;
+//# sourceMappingURL=stat-card.template.d.ts.map

package/lib/components/data-display/stat-card/stat-card.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stat-card.template.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/stat-card/stat-card.template.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAElE,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,iBAAiB,6CA0BpD"}

package/lib/components/data-display/stat-card/stat-card.template.js

@@ -0,0 +1,27 @@
+import { html, classMap, when } from '@melodicdev/core';
+export function statCardTemplate(c) {
+    const iconStyle = c['icon-color'] ? `--ml-stat-card-icon-color: ${c['icon-color']}` : '';
+    return html `
+		<div class="ml-stat-card">
+			<div class="ml-stat-card__header">
+				<span class="ml-stat-card__label">${c.label}</span>
+				${when(!!c.icon, () => html `
+					<div class="ml-stat-card__icon" style=${iconStyle}>
+						<ml-icon icon=${c.icon} size="sm"></ml-icon>
+					</div>
+				`)}
+			</div>
+			<div class=${classMap({
+        'ml-stat-card__value': true,
+        'ml-stat-card__value--serif': c['value-font'] === 'serif',
+        'ml-stat-card__value--sans': c['value-font'] === 'sans'
+    })}>${c.value}</div>
+			${when(!!c.trend, () => html `
+				<div class=${classMap({
+        'ml-stat-card__trend': true,
+        [`ml-stat-card__trend--${c['trend-direction']}`]: true
+    })}>${c.trend}</div>
+			`)}
+		</div>
+	`;
+}

package/lib/components/data-display/table/table.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACrG,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBnE;;;;;;;;;;;;;;GAcG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB;IAClG,UAAU,EAAG,WAAW,CAAC;IAEzB,+DAA+D;IAC/D,aAAa,UAAS;IAEtB,0CAA0C;IAC1C,SAAS,UAAS;IAElB,kDAAkD;IAClD,gBAAgB,UAAS;IAEzB,0CAA0C;IAC1C,UAAU,UAAS;IAEnB,kCAAkC;IAClC,OAAO,UAAS;IAEhB,8BAA8B;IAC9B,SAAS,UAAQ;IAEjB,0BAA0B;IAC1B,YAAY,UAAS;IAErB,iBAAiB;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEzB,yBAAyB;IACzB,UAAU,SAAM;IAEhB,+BAA+B;IAC/B,WAAW,SAAM;IAEjB,2DAA2D;IAC3D,OAAO,UAAS;IAEhB,yBAAyB;IACzB,OAAO,EAAE,WAAW,EAAE,CAAM;IAE5B,eAAe;IACf,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IAErC,kCAAkC;IAClC,OAAO,SAAM;IAEb,6BAA6B;IAC7B,aAAa,EAAE,aAAa,CAAS;IAErC,+BAA+B;IAC/B,eAAe,EAAE,MAAM,EAAE,CAAM;IAI/B,UAAU,SAAK;IACf,QAAQ,SAAM;IAId,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,SAAS,CAA4B;IAI7C,IAAI,SAAS,IAAI,MAAM,CAEtB;IAID,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IAMxE,MAAM,IAAI,IAAI;IAId,QAAQ,IAAI,IAAI;IAgBhB,QAAQ,IAAI,IAAI;IAiBhB,SAAS,IAAI,IAAI;IAOjB,OAAO,CAAC,eAAe;IAgBvB,gDAAgD;IAChD,IAAI,UAAU,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAc1C;IAED,IAAI,WAAW,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAG3C;IAED,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,IAAI,kBAAkB,IAAI,MAAM,CAG/B;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,aAAa,GAAI,OAAO,MAAM,KAAG,OAAO,CAEtC;IAIF,UAAU,GAAI,QAAQ,WAAW,KAAG,IAAI,CAiBtC;IAEF,eAAe,QAAO,IAAI,CAOxB;IAEF,eAAe,GAAI,OAAO,MAAM,EAAE,OAAO,KAAK,KAAG,IAAI,CAQnD;IAEF,cAAc,GAAI,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,MAAM,KAAG,IAAI,CAQlE;IAEF,OAAO,CAAC,UAAU;CASlB"}
+{"version":3,"file":"table.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACrG,OAAO,KAAK,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAiBnE;;;;;;;;;;;;;;GAcG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,gBAAgB;IAC3F,UAAU,EAAG,WAAW,CAAC;IAEhC,+DAA+D;IACxD,aAAa,UAAS;IAE7B,0CAA0C;IACnC,SAAS,UAAS;IAEzB,kDAAkD;IAC3C,gBAAgB,UAAS;IAEhC,0CAA0C;IACnC,UAAU,UAAS;IAE1B,kCAAkC;IAC3B,OAAO,UAAS;IAEvB,8BAA8B;IACvB,SAAS,UAAQ;IAExB,0BAA0B;IACnB,YAAY,UAAS;IAE5B,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEhC,yBAAyB;IAClB,UAAU,SAAM;IAEvB,+BAA+B;IACxB,WAAW,SAAM;IAExB,2DAA2D;IACpD,OAAO,UAAS;IAEvB,yBAAyB;IAClB,OAAO,EAAE,WAAW,EAAE,CAAM;IAEnC,eAAe;IACR,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IAE5C,kCAAkC;IAC3B,OAAO,SAAM;IAEpB,6BAA6B;IACtB,aAAa,EAAE,aAAa,CAAS;IAE5C,+BAA+B;IACxB,eAAe,EAAE,MAAM,EAAE,CAAM;IAI/B,UAAU,SAAK;IACf,QAAQ,SAAM;IAIrB,OAAO,CAAC,SAAS,CAAyB;IAC1C,OAAO,CAAC,SAAS,CAA4B;IAI7C,IAAW,SAAS,IAAI,MAAM,CAE7B;IAIM,gBAAgB,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,GAAG,IAAI;IAMxE,MAAM,IAAI,IAAI;IAId,QAAQ,IAAI,IAAI;IAgBhB,QAAQ,IAAI,IAAI;IAiBhB,SAAS,IAAI,IAAI;IAOxB,OAAO,CAAC,eAAe;IAgBvB,gDAAgD;IAChD,IAAW,UAAU,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAcjD;IAED,IAAW,WAAW,IAAI,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAGlD;IAED,IAAW,eAAe,IAAI,MAAM,CAEnC;IAED,IAAW,kBAAkB,IAAI,MAAM,CAGtC;IAED,IAAW,QAAQ,IAAI,MAAM,CAE5B;IAED,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,YAAY,IAAI,OAAO,CAEjC;IAEM,aAAa,GAAI,OAAO,MAAM,KAAG,OAAO,CAE7C;IAIK,UAAU,GAAI,QAAQ,WAAW,KAAG,IAAI,CAiB7C;IAEK,eAAe,QAAO,IAAI,CAO/B;IAEK,eAAe,GAAI,OAAO,MAAM,EAAE,OAAO,KAAK,KAAG,IAAI,CAQ1D;IAEK,cAAc,GAAI,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,OAAO,MAAM,KAAG,IAAI,CAQzE;IAEF,OAAO,CAAC,UAAU;CASlB"}

package/lib/components/data-display/table/table.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAkPvB,CAAC"}
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAwRvB,CAAC"}