@melodicdev/components 1.4.0 → 1.5.0

package/lib/components/data-display/activity-feed/activity-feed-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-feed-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,iDAgIlC,CAAC"}
+{"version":3,"file":"activity-feed-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,sBAAsB,iDAgLlC,CAAC"}

package/lib/components/data-display/activity-feed/activity-feed-item.styles.js

@@ -2,12 +2,60 @@ import { css } from '@melodicdev/core';
 export const activityFeedItemStyles = () => css `
 	:host {
 		display: block;
-		padding: var(--ml-space-4) 0;
+
+		/* ── Activity Feed Item: spacing ── */
+		--ml-activity-feed-item-padding: var(--ml-space-4) 0;
+		--ml-activity-feed-item-gap: var(--ml-space-3);
+
+		/* ── Activity Feed Item: connector ── */
+		--ml-activity-feed-item-connector-color: var(--ml-color-border);
+		--ml-activity-feed-item-connector-width: 2px;
+		--ml-activity-feed-item-connector-radius: var(--ml-radius-full);
+		--ml-activity-feed-item-connector-spacing: var(--ml-space-2);
+
+		/* ── Activity Feed Item: name ── */
+		--ml-activity-feed-item-name-font: var(--ml-font-sans);
+		--ml-activity-feed-item-name-size: var(--ml-text-sm);
+		--ml-activity-feed-item-name-weight: var(--ml-font-semibold);
+		--ml-activity-feed-item-name-color: var(--ml-color-text);
+
+		/* ── Activity Feed Item: timestamp ── */
+		--ml-activity-feed-item-timestamp-font: var(--ml-font-sans);
+		--ml-activity-feed-item-timestamp-size: var(--ml-text-xs);
+		--ml-activity-feed-item-timestamp-color: var(--ml-color-text-tertiary);
+
+		/* ── Activity Feed Item: subtitle ── */
+		--ml-activity-feed-item-subtitle-font: var(--ml-font-sans);
+		--ml-activity-feed-item-subtitle-size: var(--ml-text-xs);
+		--ml-activity-feed-item-subtitle-color: var(--ml-color-text-secondary);
+
+		/* ── Activity Feed Item: description ── */
+		--ml-activity-feed-item-description-font: var(--ml-font-sans);
+		--ml-activity-feed-item-description-size: var(--ml-text-sm);
+		--ml-activity-feed-item-description-color: var(--ml-color-text-secondary);
+		--ml-activity-feed-item-description-line-height: var(--ml-leading-relaxed);
+
+		/* ── Activity Feed Item: description link ── */
+		--ml-activity-feed-item-link-color: var(--ml-color-primary);
+		--ml-activity-feed-item-link-weight: var(--ml-font-medium);
+
+		/* ── Activity Feed Item: indicator ── */
+		--ml-activity-feed-item-indicator-size: 8px;
+		--ml-activity-feed-item-indicator-radius: var(--ml-radius-full);
+
+		/* ── Activity Feed Item: indicator colors ── */
+		--ml-activity-feed-item-indicator-gray: var(--ml-color-text-tertiary);
+		--ml-activity-feed-item-indicator-primary: var(--ml-color-primary);
+		--ml-activity-feed-item-indicator-success: var(--ml-color-success);
+		--ml-activity-feed-item-indicator-warning: var(--ml-color-warning);
+		--ml-activity-feed-item-indicator-error: var(--ml-color-error);
+
+		padding: var(--ml-activity-feed-item-padding);
 	}
 
 	.ml-afi {
 		display: flex;
-		gap: var(--ml-space-3);
+		gap: var(--ml-activity-feed-item-gap);
 	}
 
 	/* Left column: avatar + connector */
@@ -25,10 +73,10 @@ export const activityFeedItemStyles = () => css `
 
 	.ml-afi__connector {
 		flex: 1;
-		width: 2px;
-		margin-top: var(--ml-space-2);
-		background-color: var(--ml-color-border);
-		border-radius: var(--ml-radius-full);
+		width: var(--ml-activity-feed-item-connector-width);
+		margin-top: var(--ml-activity-feed-item-connector-spacing);
+		background-color: var(--ml-activity-feed-item-connector-color);
+		border-radius: var(--ml-activity-feed-item-connector-radius);
 		display: var(--_ml-af-line-display, none);
 	}
 
@@ -53,37 +101,37 @@ export const activityFeedItemStyles = () => css `
 	}
 
 	.ml-afi__name {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-family: var(--ml-activity-feed-item-name-font);
+		font-size: var(--ml-activity-feed-item-name-size);
+		font-weight: var(--ml-activity-feed-item-name-weight);
+		color: var(--ml-activity-feed-item-name-color);
 	}
 
 	.ml-afi__timestamp {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-tertiary);
+		font-family: var(--ml-activity-feed-item-timestamp-font);
+		font-size: var(--ml-activity-feed-item-timestamp-size);
+		color: var(--ml-activity-feed-item-timestamp-color);
 	}
 
 	.ml-afi__subtitle {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-secondary);
+		font-family: var(--ml-activity-feed-item-subtitle-font);
+		font-size: var(--ml-activity-feed-item-subtitle-size);
+		color: var(--ml-activity-feed-item-subtitle-color);
 		margin-top: var(--ml-space-0-5);
 	}
 
 	.ml-afi__description {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-relaxed);
+		font-family: var(--ml-activity-feed-item-description-font);
+		font-size: var(--ml-activity-feed-item-description-size);
+		color: var(--ml-activity-feed-item-description-color);
+		line-height: var(--ml-activity-feed-item-description-line-height);
 		margin-top: var(--ml-space-1);
 	}
 
 	.ml-afi__description ::slotted(a) {
-		color: var(--ml-color-primary);
+		color: var(--ml-activity-feed-item-link-color);
 		text-decoration: none;
-		font-weight: var(--ml-font-medium);
+		font-weight: var(--ml-activity-feed-item-link-weight);
 	}
 
 	.ml-afi__description ::slotted(a:hover) {
@@ -92,7 +140,7 @@ export const activityFeedItemStyles = () => css `
 
 	.ml-afi__description ::slotted(strong) {
 		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		color: var(--ml-activity-feed-item-name-color);
 	}
 
 	.ml-afi__content {
@@ -101,30 +149,30 @@ export const activityFeedItemStyles = () => css `
 
 	/* Indicator dot */
 	.ml-afi__indicator {
-		width: 8px;
-		height: 8px;
-		border-radius: var(--ml-radius-full);
+		width: var(--ml-activity-feed-item-indicator-size);
+		height: var(--ml-activity-feed-item-indicator-size);
+		border-radius: var(--ml-activity-feed-item-indicator-radius);
 		flex-shrink: 0;
 		background-color: var(--ml-afi-indicator-bg);
 	}
 
 	.ml-afi__indicator--gray {
-		background-color: var(--ml-color-text-tertiary);
+		background-color: var(--ml-activity-feed-item-indicator-gray);
 	}
 
 	.ml-afi__indicator--primary {
-		background-color: var(--ml-color-primary);
+		background-color: var(--ml-activity-feed-item-indicator-primary);
 	}
 
 	.ml-afi__indicator--success {
-		background-color: var(--ml-color-success);
+		background-color: var(--ml-activity-feed-item-indicator-success);
 	}
 
 	.ml-afi__indicator--warning {
-		background-color: var(--ml-color-warning);
+		background-color: var(--ml-activity-feed-item-indicator-warning);
 	}
 
 	.ml-afi__indicator--error {
-		background-color: var(--ml-color-error);
+		background-color: var(--ml-activity-feed-item-indicator-error);
 	}
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"activity-feed.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDAuB9B,CAAC"}
+{"version":3,"file":"activity-feed.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/activity-feed/activity-feed.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDA2B9B,CAAC"}

package/lib/components/data-display/activity-feed/activity-feed.styles.js

@@ -2,6 +2,10 @@ import { css } from '@melodicdev/core';
 export const activityFeedStyles = () => css `
 	:host {
 		display: block;
+
+		/* ── Activity Feed: list divider ── */
+		--ml-activity-feed-divider-width: var(--ml-border);
+		--ml-activity-feed-divider-color: var(--ml-color-border);
 	}
 
 	.ml-activity-feed {
@@ -11,7 +15,7 @@ export const activityFeedStyles = () => css `
 
 	/* List variant: dividers between items */
 	.ml-activity-feed--list ::slotted(ml-activity-feed-item:not(:last-of-type)) {
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-activity-feed-divider-width) solid var(--ml-activity-feed-divider-color);
 	}
 
 	/* Timeline variant: connector line, no dividers */

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/avatar/avatar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAwFxB,CAAC"}
+{"version":3,"file":"avatar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/avatar/avatar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAmGxB,CAAC"}

package/lib/components/data-display/avatar/avatar.styles.js

@@ -2,6 +2,17 @@ import { css } from '@melodicdev/core';
 export const avatarStyles = () => css `
 	:host {
 		display: inline-block;
+
+		/* ── Avatar: colors ── */
+		--ml-avatar-bg: var(--ml-color-surface-raised);
+		--ml-avatar-color: var(--ml-color-text-muted);
+		--ml-avatar-font-weight: var(--ml-font-semibold);
+		--ml-avatar-border-color: var(--ml-color-surface);
+		--ml-avatar-shadow: var(--ml-shadow-xs);
+		--ml-avatar-radius: var(--ml-radius-full);
+
+		/* ── Avatar: fallback icon ── */
+		--ml-avatar-fallback-color: var(--ml-color-text-subtle);
 	}
 
 	.ml-avatar {
@@ -9,13 +20,13 @@ export const avatarStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		overflow: hidden;
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text-muted);
-		font-weight: var(--ml-font-semibold);
+		background-color: var(--ml-avatar-bg);
+		color: var(--ml-avatar-color);
+		font-weight: var(--ml-avatar-font-weight);
 		vertical-align: middle;
-		border-radius: var(--ml-radius-full);
-		border: 2px solid var(--ml-avatar-border-color, var(--ml-color-surface));
-		box-shadow: var(--ml-shadow-xs);
+		border-radius: var(--ml-avatar-radius);
+		border: 2px solid var(--ml-avatar-border-color);
+		box-shadow: var(--ml-avatar-shadow);
 	}
 
 	.ml-avatar--rounded {
@@ -80,7 +91,7 @@ export const avatarStyles = () => css `
 		justify-content: center;
 		width: 60%;
 		height: 60%;
-		color: var(--ml-color-text-subtle);
+		color: var(--ml-avatar-fallback-color);
 	}
 
 	.ml-avatar__fallback svg {

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

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

package/lib/components/data-display/badge/badge.styles.js

@@ -2,34 +2,53 @@ import { css } from '@melodicdev/core';
 export const badgeStyles = () => css `
 	:host {
 		display: inline-block;
+
+		/* ── Badge: base ── */
+		--ml-badge-font: var(--ml-font-sans);
+		--ml-badge-font-weight: var(--ml-font-medium);
+		--ml-badge-radius: var(--ml-radius-md);
+		--ml-badge-border-width: var(--ml-border);
+
+		/* ── Badge: pill shape ── */
+		--ml-badge-pill-radius: var(--ml-radius-full);
+
+		/* ── Badge: dot ── */
+		--ml-badge-dot-size: 0.375rem;
+		--ml-badge-dot-size-lg: 0.5rem;
+
+		/* ── Badge: secondary variant ── */
+		--ml-badge-secondary-color: var(--ml-color-text-secondary);
+
+		/* ── Badge: custom variant ── */
+		--ml-badge-custom-color: var(--ml-badge-color, #fff);
 	}
 
 	.ml-badge {
 		display: inline-flex;
 		align-items: center;
 		gap: var(--ml-space-1-5);
-		font-family: var(--ml-font-sans);
-		font-weight: var(--ml-font-medium);
+		font-family: var(--ml-badge-font);
+		font-weight: var(--ml-badge-font-weight);
 		line-height: 1;
 		white-space: nowrap;
-		border-radius: var(--ml-radius-md);
-		border: var(--ml-border) solid transparent;
+		border-radius: var(--ml-badge-radius);
+		border: var(--ml-badge-border-width) solid transparent;
 	}
 
 	.ml-badge--pill {
-		border-radius: var(--ml-radius-full);
+		border-radius: var(--ml-badge-pill-radius);
 	}
 
 	.ml-badge__dot {
-		width: 0.375rem;
-		height: 0.375rem;
+		width: var(--ml-badge-dot-size);
+		height: var(--ml-badge-dot-size);
 		border-radius: var(--ml-radius-full);
 		background-color: currentColor;
 	}
 
 	.ml-badge--lg .ml-badge__dot {
-		width: 0.5rem;
-		height: 0.5rem;
+		width: var(--ml-badge-dot-size-lg);
+		height: var(--ml-badge-dot-size-lg);
 	}
 
 	.ml-badge--sm {
@@ -62,7 +81,7 @@ export const badgeStyles = () => css `
 	.ml-badge--secondary {
 		background-color: var(--ml-badge-default-bg);
 		border-color: var(--ml-badge-default-border);
-		color: var(--ml-color-text-secondary);
+		color: var(--ml-badge-secondary-color);
 	}
 
 	.ml-badge--success {
@@ -86,7 +105,7 @@ export const badgeStyles = () => css `
 	.ml-badge--custom {
 		background-color: var(--ml-badge-bg);
 		border-color: transparent;
-		color: var(--ml-badge-color, #fff);
+		color: var(--ml-badge-custom-color);
 	}
 
 `;

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

@@ -1 +1 @@
-{"version":3,"file":"badge-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge-group/badge-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAkI5B,CAAC"}
+{"version":3,"file":"badge-group.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/badge-group/badge-group.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAiJ5B,CAAC"}

package/lib/components/data-display/badge-group/badge-group.styles.js

@@ -2,26 +2,41 @@ import { css } from '@melodicdev/core';
 export const badgeGroupStyles = () => css `
 	:host {
 		display: inline-block;
+
+		/* ── Badge Group: base ── */
+		--ml-badge-group-font: var(--ml-font-sans);
+		--ml-badge-group-font-weight: var(--ml-font-medium);
+		--ml-badge-group-gap: var(--ml-space-2);
+		--ml-badge-group-border-width: var(--ml-border);
+
+		/* ── Badge Group: shapes ── */
+		--ml-badge-group-pill-radius: var(--ml-radius-full);
+		--ml-badge-group-modern-radius: var(--ml-radius-md);
+
+		/* ── Badge Group: inner label ── */
+		--ml-badge-group-label-bg: var(--ml-color-surface);
+		--ml-badge-group-label-radius: var(--ml-radius-full);
+		--ml-badge-group-label-modern-radius: var(--ml-radius-sm);
 	}
 
 	.ml-badge-group {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		font-family: var(--ml-font-sans);
-		font-weight: var(--ml-font-medium);
+		gap: var(--ml-badge-group-gap);
+		font-family: var(--ml-badge-group-font);
+		font-weight: var(--ml-badge-group-font-weight);
 		line-height: 1;
 		white-space: nowrap;
-		border: var(--ml-border) solid transparent;
+		border: var(--ml-badge-group-border-width) solid transparent;
 	}
 
 	/* Themes */
 	.ml-badge-group--pill {
-		border-radius: var(--ml-radius-full);
+		border-radius: var(--ml-badge-group-pill-radius);
 	}
 
 	.ml-badge-group--modern {
-		border-radius: var(--ml-radius-md);
+		border-radius: var(--ml-badge-group-modern-radius);
 	}
 
 	/* Sizes */
@@ -77,43 +92,43 @@ export const badgeGroupStyles = () => css `
 		align-items: center;
 		padding: 2px var(--ml-space-2);
 		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-medium);
+		font-weight: var(--ml-badge-group-font-weight);
 		line-height: 1;
 		white-space: nowrap;
-		border-radius: var(--ml-radius-full);
+		border-radius: var(--ml-badge-group-label-radius);
 	}
 
 	.ml-badge-group--modern .ml-badge-group__label {
-		border-radius: var(--ml-radius-sm);
+		border-radius: var(--ml-badge-group-label-modern-radius);
 	}
 
 	/* Inner label colors - slightly stronger than the outer bg */
 	.ml-badge-group__label--default {
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-badge-group-label-bg);
 		color: var(--ml-badge-default-text);
 		border: 1px solid var(--ml-badge-default-border);
 	}
 
 	.ml-badge-group__label--primary {
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-badge-group-label-bg);
 		color: var(--ml-badge-primary-text);
 		border: 1px solid var(--ml-badge-primary-border);
 	}
 
 	.ml-badge-group__label--success {
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-badge-group-label-bg);
 		color: var(--ml-badge-success-text);
 		border: 1px solid var(--ml-badge-success-border);
 	}
 
 	.ml-badge-group__label--warning {
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-badge-group-label-bg);
 		color: var(--ml-badge-warning-text);
 		border: 1px solid var(--ml-badge-warning-border);
 	}
 
 	.ml-badge-group__label--error {
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-badge-group-label-bg);
 		color: var(--ml-badge-error-text);
 		border: 1px solid var(--ml-badge-error-border);
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"calendar-view.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/calendar-view/calendar-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDA8vB9B,CAAC"}
+{"version":3,"file":"calendar-view.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/calendar-view/calendar-view.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDAg0B9B,CAAC"}