@melodicdev/components 1.3.0 → 1.5.0

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

@@ -6,6 +6,64 @@ export const dataGridStyles = () => css `
 		height: 100%;
 		min-width: 0;
 		font-family: var(--ml-font-sans);
+
+		/* ── Data Grid: surface ── */
+		--ml-data-grid-bg: var(--ml-color-surface);
+		--ml-data-grid-border-width: var(--ml-border);
+		--ml-data-grid-border-color: var(--ml-color-border);
+		--ml-data-grid-radius: var(--ml-radius-lg);
+
+		/* ── Data Grid: header ── */
+		--ml-data-grid-header-bg: var(--ml-color-surface-sunken);
+		--ml-data-grid-header-color: var(--ml-color-text-muted);
+		--ml-data-grid-header-sorted-color: var(--ml-color-text);
+
+		/* ── Data Grid: title ── */
+		--ml-data-grid-title-color: var(--ml-color-text);
+		--ml-data-grid-description-color: var(--ml-color-text-muted);
+
+		/* ── Data Grid: rows ── */
+		--ml-data-grid-row-hover-bg: var(--ml-color-surface-sunken);
+		--ml-data-grid-row-selected-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.04));
+		--ml-data-grid-row-selected-hover-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.07));
+		--ml-data-grid-row-striped-bg: var(--ml-color-surface-sunken);
+		--ml-data-grid-row-striped-hover-bg: var(--ml-color-surface-raised);
+
+		/* ── Data Grid: cells ── */
+		--ml-data-grid-cell-color: var(--ml-color-text);
+
+		/* ── Data Grid: drag-over ── */
+		--ml-data-grid-drag-over-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.08));
+		--ml-data-grid-drag-over-color: var(--ml-color-primary);
+
+		/* ── Data Grid: sort icon ── */
+		--ml-data-grid-sort-color: var(--ml-color-text-muted);
+		--ml-data-grid-sort-active-color: var(--ml-color-primary);
+
+		/* ── Data Grid: resize handle ── */
+		--ml-data-grid-resize-active-color: var(--ml-color-primary);
+
+		/* ── Data Grid: checkbox ── */
+		--ml-data-grid-checkbox-accent: var(--ml-color-primary);
+
+		/* ── Data Grid: filter input ── */
+		--ml-data-grid-filter-bg: var(--ml-color-surface-sunken);
+		--ml-data-grid-filter-border-color: var(--ml-color-border);
+		--ml-data-grid-filter-focus-color: var(--ml-color-primary);
+		--ml-data-grid-filter-focus-ring: 0 0 0 2px var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.12));
+
+		/* ── Data Grid: scrollbar ── */
+		--ml-data-grid-scrollbar-thumb: var(--ml-color-border);
+		--ml-data-grid-scrollbar-thumb-hover: var(--ml-color-text-muted);
+
+		/* ── Data Grid: footer ── */
+		--ml-data-grid-footer-bg: var(--ml-color-surface);
+		--ml-data-grid-footer-color: var(--ml-color-text-muted);
+		--ml-data-grid-page-btn-border: var(--ml-color-border);
+		--ml-data-grid-page-btn-color: var(--ml-color-text-muted);
+		--ml-data-grid-page-btn-hover-bg: var(--ml-color-surface-sunken);
+		--ml-data-grid-page-btn-hover-color: var(--ml-color-text);
+		--ml-data-grid-page-btn-hover-border: var(--ml-color-border-strong);
 	}
 
 	/* ── Root container ── */
@@ -13,9 +71,9 @@ export const dataGridStyles = () => css `
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
-		background-color: var(--ml-color-surface);
+		border: var(--ml-data-grid-border-width) solid var(--ml-data-grid-border-color);
+		border-radius: var(--ml-data-grid-radius);
+		background-color: var(--ml-data-grid-bg);
 		overflow: hidden;
 	}
 
@@ -26,7 +84,7 @@ export const dataGridStyles = () => css `
 		justify-content: space-between;
 		gap: var(--ml-space-4);
 		padding: var(--ml-space-5) var(--ml-space-6);
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-data-grid-border-width) solid var(--ml-data-grid-border-color);
 		flex-shrink: 0;
 	}
 
@@ -40,14 +98,14 @@ export const dataGridStyles = () => css `
 		margin: 0;
 		font-size: var(--ml-text-lg);
 		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		color: var(--ml-data-grid-title-color);
 		line-height: var(--ml-leading-tight);
 	}
 
 	.ml-data-grid__description {
 		margin: 0;
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-data-grid-description-color);
 		line-height: var(--ml-leading-normal);
 	}
 
@@ -70,12 +128,12 @@ export const dataGridStyles = () => css `
 	}
 
 	.ml-data-grid__viewport::-webkit-scrollbar-thumb {
-		background: var(--ml-color-border);
+		background: var(--ml-data-grid-scrollbar-thumb);
 		border-radius: 3px;
 	}
 
 	.ml-data-grid__viewport::-webkit-scrollbar-thumb:hover {
-		background: var(--ml-color-text-muted);
+		background: var(--ml-data-grid-scrollbar-thumb-hover);
 	}
 
 	.ml-data-grid__viewport::-webkit-scrollbar-corner {
@@ -93,8 +151,8 @@ export const dataGridStyles = () => css `
 		position: sticky;
 		top: 0;
 		z-index: 2;
-		background: var(--ml-color-surface-sunken);
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		background: var(--ml-data-grid-header-bg);
+		border-bottom: var(--ml-data-grid-border-width) solid var(--ml-data-grid-border-color);
 	}
 
 	/* ── Filter row — sticky below header ── */
@@ -103,8 +161,8 @@ export const dataGridStyles = () => css `
 		position: sticky;
 		top: var(--ml-grid-header-h, 40px);
 		z-index: 2;
-		background: var(--ml-color-surface);
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		background: var(--ml-data-grid-bg);
+		border-bottom: var(--ml-data-grid-border-width) solid var(--ml-data-grid-border-color);
 		padding: var(--ml-space-2) 0;
 	}
 
@@ -114,14 +172,14 @@ export const dataGridStyles = () => css `
 		padding: var(--ml-space-3) var(--ml-space-4);
 		font-size: var(--ml-text-xs);
 		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-data-grid-header-color);
 		text-transform: uppercase;
 		letter-spacing: 0.05em;
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		user-select: none;
-		background: var(--ml-color-surface-sunken);
+		background: var(--ml-data-grid-header-bg);
 	}
 
 	.ml-data-grid--sm .ml-data-grid__th {
@@ -139,16 +197,16 @@ export const dataGridStyles = () => css `
 	}
 
 	.ml-data-grid__th--sortable:hover {
-		color: var(--ml-color-text);
+		color: var(--ml-data-grid-header-sorted-color);
 	}
 
 	.ml-data-grid__th--sorted {
-		color: var(--ml-color-text);
+		color: var(--ml-data-grid-header-sorted-color);
 	}
 
 	.ml-data-grid__th--drag-over {
-		background: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.08));
-		color: var(--ml-color-primary);
+		background: var(--ml-data-grid-drag-over-bg);
+		color: var(--ml-data-grid-drag-over-color);
 	}
 
 	.ml-data-grid__th--dragging {
@@ -167,11 +225,11 @@ export const dataGridStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		flex-shrink: 0;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-data-grid-sort-color);
 	}
 
 	.ml-data-grid__th--sorted .ml-data-grid__sort-icon {
-		color: var(--ml-color-primary);
+		color: var(--ml-data-grid-sort-active-color);
 	}
 
 	/* ── Resize handle ── */
@@ -189,24 +247,22 @@ export const dataGridStyles = () => css `
 
 	.ml-data-grid__resize-handle:hover,
 	.ml-data-grid__th--resizing .ml-data-grid__resize-handle {
-		background: var(--ml-color-primary);
+		background: var(--ml-data-grid-resize-active-color);
 	}
 
 	/* ── Filter cells ── */
-	/* All cells are position: relative so they're "positioned" within the      */
-	/* filter row's stacking context — mirrors .ml-data-grid__th behaviour.    */
 	.ml-data-grid__filter-cell {
 		display: flex;
 		align-items: center;
 		padding: 0 var(--ml-space-2);
-		background: var(--ml-color-surface);
+		background: var(--ml-data-grid-bg);
 		position: relative;
 	}
 
 	.ml-data-grid__filter-cell--pinned-left {
 		position: sticky;
 		z-index: 3;
-		background: var(--ml-color-surface);
+		background: var(--ml-data-grid-bg);
 	}
 
 	.ml-data-grid__filter-input {
@@ -214,21 +270,21 @@ export const dataGridStyles = () => css `
 		padding: var(--ml-space-1-5) var(--ml-space-2);
 		font-size: var(--ml-text-xs);
 		font-family: var(--ml-font-sans);
-		color: var(--ml-color-text);
-		background: var(--ml-color-surface-sunken);
-		border: var(--ml-border) solid var(--ml-color-border);
+		color: var(--ml-data-grid-cell-color);
+		background: var(--ml-data-grid-filter-bg);
+		border: var(--ml-data-grid-border-width) solid var(--ml-data-grid-filter-border-color);
 		border-radius: var(--ml-radius-sm);
 		outline: none;
 		transition: border-color var(--ml-duration-150);
 	}
 
 	.ml-data-grid__filter-input::placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-data-grid-header-color);
 	}
 
 	.ml-data-grid__filter-input:focus {
-		border-color: var(--ml-color-primary);
-		box-shadow: 0 0 0 2px var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.12));
+		border-color: var(--ml-data-grid-filter-focus-color);
+		box-shadow: var(--ml-data-grid-filter-focus-ring);
 	}
 
 	/* ── Virtual scroll spacers ── */
@@ -240,7 +296,7 @@ export const dataGridStyles = () => css `
 	/* ── Data rows ── */
 	.ml-data-grid__row {
 		display: grid;
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-data-grid-border-width) solid var(--ml-data-grid-border-color);
 		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
 		cursor: default;
 	}
@@ -250,30 +306,30 @@ export const dataGridStyles = () => css `
 	}
 
 	.ml-data-grid--hoverable .ml-data-grid__row:hover {
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-data-grid-row-hover-bg);
 	}
 
 	.ml-data-grid__row--selected {
-		background-color: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.04));
+		background-color: var(--ml-data-grid-row-selected-bg);
 	}
 
 	.ml-data-grid--hoverable .ml-data-grid__row--selected:hover {
-		background-color: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.07));
+		background-color: var(--ml-data-grid-row-selected-hover-bg);
 	}
 
 	.ml-data-grid--striped .ml-data-grid__row--even {
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-data-grid-row-striped-bg);
 	}
 
 	.ml-data-grid--striped.ml-data-grid--hoverable .ml-data-grid__row--even:hover {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-data-grid-row-striped-hover-bg);
 	}
 
 	/* ── Data cells ── */
 	.ml-data-grid__td {
 		padding: var(--ml-space-3) var(--ml-space-4);
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text);
+		color: var(--ml-data-grid-cell-color);
 		vertical-align: middle;
 		overflow: hidden;
 		text-overflow: ellipsis;
@@ -299,17 +355,17 @@ export const dataGridStyles = () => css `
 		position: sticky;
 		left: 0;
 		z-index: 1;
-		background: var(--ml-color-surface);
+		background: var(--ml-data-grid-bg);
 	}
 
 	.ml-data-grid__header-row .ml-data-grid__check-cell {
 		z-index: 3;
-		background: var(--ml-color-surface-sunken);
+		background: var(--ml-data-grid-header-bg);
 	}
 
 	.ml-data-grid__filter-row .ml-data-grid__check-cell {
 		z-index: 3;
-		background: var(--ml-color-surface);
+		background: var(--ml-data-grid-bg);
 	}
 
 	.ml-data-grid--sm .ml-data-grid__check-cell {
@@ -319,7 +375,7 @@ export const dataGridStyles = () => css `
 	.ml-data-grid__checkbox {
 		width: 1rem;
 		height: 1rem;
-		accent-color: var(--ml-color-primary);
+		accent-color: var(--ml-data-grid-checkbox-accent);
 		cursor: pointer;
 		margin: 0;
 		flex-shrink: 0;
@@ -330,12 +386,12 @@ export const dataGridStyles = () => css `
 	.ml-data-grid__td--pinned-left {
 		position: sticky;
 		z-index: 1;
-		background: var(--ml-color-surface);
+		background: var(--ml-data-grid-bg);
 	}
 
 	.ml-data-grid__header-row .ml-data-grid__th--pinned-left {
 		z-index: 3;
-		background: var(--ml-color-surface-sunken);
+		background: var(--ml-data-grid-header-bg);
 	}
 
 	/* Pinned left shadow */
@@ -356,12 +412,12 @@ export const dataGridStyles = () => css `
 		position: sticky;
 		right: 0;
 		z-index: 1;
-		background: var(--ml-color-surface);
+		background: var(--ml-data-grid-bg);
 	}
 
 	.ml-data-grid__header-row .ml-data-grid__th--pinned-right {
 		z-index: 3;
-		background: var(--ml-color-surface-sunken);
+		background: var(--ml-data-grid-header-bg);
 	}
 
 	/* Pinned right shadow */
@@ -381,31 +437,31 @@ export const dataGridStyles = () => css `
 	.ml-data-grid--striped .ml-data-grid__row--even .ml-data-grid__td--pinned-left,
 	.ml-data-grid--striped .ml-data-grid__row--even .ml-data-grid__td--pinned-right,
 	.ml-data-grid--striped .ml-data-grid__row--even .ml-data-grid__check-cell {
-		background: var(--ml-color-surface-sunken);
+		background: var(--ml-data-grid-row-striped-bg);
 	}
 
 	.ml-data-grid--hoverable .ml-data-grid__row:hover .ml-data-grid__td--pinned-left,
 	.ml-data-grid--hoverable .ml-data-grid__row:hover .ml-data-grid__td--pinned-right,
 	.ml-data-grid--hoverable .ml-data-grid__row:hover .ml-data-grid__check-cell {
-		background: var(--ml-color-surface-sunken);
+		background: var(--ml-data-grid-row-hover-bg);
 	}
 
 	.ml-data-grid__row--selected .ml-data-grid__td--pinned-left,
 	.ml-data-grid__row--selected .ml-data-grid__td--pinned-right,
 	.ml-data-grid__row--selected .ml-data-grid__check-cell {
-		background: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.04));
+		background: var(--ml-data-grid-row-selected-bg);
 	}
 
 	.ml-data-grid--hoverable .ml-data-grid__row--selected:hover .ml-data-grid__td--pinned-left,
 	.ml-data-grid--hoverable .ml-data-grid__row--selected:hover .ml-data-grid__td--pinned-right,
 	.ml-data-grid--hoverable .ml-data-grid__row--selected:hover .ml-data-grid__check-cell {
-		background: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.07));
+		background: var(--ml-data-grid-row-selected-hover-bg);
 	}
 
 	.ml-data-grid--striped.ml-data-grid--hoverable .ml-data-grid__row--even:hover .ml-data-grid__td--pinned-left,
 	.ml-data-grid--striped.ml-data-grid--hoverable .ml-data-grid__row--even:hover .ml-data-grid__td--pinned-right,
 	.ml-data-grid--striped.ml-data-grid--hoverable .ml-data-grid__row--even:hover .ml-data-grid__check-cell {
-		background: var(--ml-color-surface-raised);
+		background: var(--ml-data-grid-row-striped-hover-bg);
 	}
 
 	/* ── Footer / Pagination ── */
@@ -415,8 +471,8 @@ export const dataGridStyles = () => css `
 		justify-content: space-between;
 		gap: var(--ml-space-4);
 		padding: var(--ml-space-3) var(--ml-space-6);
-		border-top: var(--ml-border) solid var(--ml-color-border);
-		background: var(--ml-color-surface);
+		border-top: var(--ml-data-grid-border-width) solid var(--ml-data-grid-border-color);
+		background: var(--ml-data-grid-footer-bg);
 		flex-shrink: 0;
 	}
 
@@ -426,7 +482,7 @@ export const dataGridStyles = () => css `
 
 	.ml-data-grid__footer-count {
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-data-grid-footer-color);
 	}
 
 	.ml-data-grid--sm .ml-data-grid__footer-count {
@@ -441,7 +497,7 @@ export const dataGridStyles = () => css `
 
 	.ml-data-grid__page-info {
 		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
+		color: var(--ml-data-grid-footer-color);
 		white-space: nowrap;
 	}
 
@@ -462,10 +518,10 @@ export const dataGridStyles = () => css `
 		width: 2rem;
 		height: 2rem;
 		padding: 0;
-		border: var(--ml-border) solid var(--ml-color-border);
+		border: var(--ml-data-grid-border-width) solid var(--ml-data-grid-page-btn-border);
 		border-radius: var(--ml-radius-md);
-		background: var(--ml-color-surface);
-		color: var(--ml-color-text-muted);
+		background: var(--ml-data-grid-bg);
+		color: var(--ml-data-grid-page-btn-color);
 		cursor: pointer;
 		transition:
 			background-color var(--ml-duration-150),
@@ -480,9 +536,9 @@ export const dataGridStyles = () => css `
 	}
 
 	.ml-data-grid__page-btn:hover:not(:disabled) {
-		background: var(--ml-color-surface-sunken);
-		color: var(--ml-color-text);
-		border-color: var(--ml-color-border-strong);
+		background: var(--ml-data-grid-page-btn-hover-bg);
+		color: var(--ml-data-grid-page-btn-hover-color);
+		border-color: var(--ml-data-grid-page-btn-hover-border);
 	}
 
 	.ml-data-grid__page-btn:disabled {

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

@@ -1 +1 @@
-{"version":3,"file":"list-item.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/list/list-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;;;;GAcG;AACH,qBAMa,iBAAkB,YAAW,WAAW;IACpD,UAAU,EAAG,WAAW,CAAC;IAEzB,mBAAmB;IACnB,OAAO,SAAM;IAEb,qBAAqB;IACrB,SAAS,SAAM;IAEf,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,oDAAoD;IACpD,WAAW,UAAS;IAEpB,wCAAwC;IACxC,IAAI,cAAc,IAAI,OAAO,CAE5B;IAED,yCAAyC;IACzC,IAAI,eAAe,IAAI,OAAO,CAE7B;CAED"}
+{"version":3,"file":"list-item.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/list/list-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;;;;GAcG;AACH,qBAMa,iBAAkB,YAAW,WAAW;IAC7C,UAAU,EAAG,WAAW,CAAC;IAEhC,mBAAmB;IACZ,OAAO,SAAM;IAEpB,qBAAqB;IACd,SAAS,SAAM;IAEtB,uBAAuB;IAChB,QAAQ,UAAS;IAExB,oDAAoD;IAC7C,WAAW,UAAS;IAE3B,wCAAwC;IACxC,IAAW,cAAc,IAAI,OAAO,CAEnC;IAED,yCAAyC;IACzC,IAAW,eAAe,IAAI,OAAO,CAEpC;CAED"}

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

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

package/lib/components/data-display/list/list-item.styles.js

@@ -2,11 +2,33 @@ import { css } from '@melodicdev/core';
 export const listItemStyles = () => css `
 	:host {
 		display: block;
-		padding: var(--_ml-list-padding, var(--ml-space-3) 0);
+
+		/* ── List Item: spacing ── */
+		--ml-list-item-padding: var(--_ml-list-padding, var(--ml-space-3) 0);
+		--ml-list-item-gap: var(--ml-space-3);
+
+		/* ── List Item: primary text ── */
+		--ml-list-item-primary-font: var(--ml-font-sans);
+		--ml-list-item-primary-size: var(--ml-text-sm);
+		--ml-list-item-primary-weight: var(--ml-font-semibold);
+		--ml-list-item-primary-color: var(--ml-color-text);
+
+		/* ── List Item: secondary text ── */
+		--ml-list-item-secondary-font: var(--ml-font-sans);
+		--ml-list-item-secondary-size: var(--ml-text-xs);
+		--ml-list-item-secondary-color: var(--ml-color-text-secondary);
+
+		/* ── List Item: interactive states ── */
+		--ml-list-item-hover-bg: var(--ml-color-bg-secondary);
+		--ml-list-item-focus-color: var(--ml-color-primary);
+		--ml-list-item-focus-radius: var(--ml-radius-md);
+		--ml-list-item-disabled-opacity: 0.5;
+
+		padding: var(--ml-list-item-padding);
 	}
 
 	:host([disabled]) {
-		opacity: 0.5;
+		opacity: var(--ml-list-item-disabled-opacity);
 		pointer-events: none;
 	}
 
@@ -15,13 +37,13 @@ export const listItemStyles = () => css `
 	}
 
 	:host([interactive]:hover) {
-		background-color: var(--ml-color-bg-secondary);
+		background-color: var(--ml-list-item-hover-bg);
 	}
 
 	:host([interactive]:focus-visible) {
-		outline: 2px solid var(--ml-color-primary);
+		outline: 2px solid var(--ml-list-item-focus-color);
 		outline-offset: -2px;
-		border-radius: var(--ml-radius-md);
+		border-radius: var(--ml-list-item-focus-radius);
 	}
 
 	:host([interactive]) .ml-li {
@@ -31,7 +53,7 @@ export const listItemStyles = () => css `
 	.ml-li {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-3);
+		gap: var(--ml-list-item-gap);
 	}
 
 	.ml-li__leading {
@@ -49,17 +71,17 @@ export const listItemStyles = () => css `
 	}
 
 	.ml-li__primary {
-		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-list-item-primary-font);
+		font-size: var(--ml-list-item-primary-size);
+		font-weight: var(--ml-list-item-primary-weight);
+		color: var(--ml-list-item-primary-color);
 		line-height: var(--ml-leading-normal);
 	}
 
 	.ml-li__secondary {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-secondary);
+		font-family: var(--ml-list-item-secondary-font);
+		font-size: var(--ml-list-item-secondary-size);
+		color: var(--ml-list-item-secondary-color);
 		line-height: var(--ml-leading-normal);
 	}
 

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

@@ -1 +1 @@
-{"version":3,"file":"list.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/list/list.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AACvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC;;;;;;;;;;;;;GAaG;AACH,qBAMa,aAAc,YAAW,WAAW;IAChD,UAAU,EAAG,WAAW,CAAC;IAEzB,2BAA2B;IAC3B,OAAO,EAAE,WAAW,CAAa;IAEjC,wCAAwC;IACxC,IAAI,EAAE,QAAQ,CAAQ;CACtB"}
+{"version":3,"file":"list.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/list/list.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD,KAAK,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AACvC,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnC;;;;;;;;;;;;;GAaG;AACH,qBAMa,aAAc,YAAW,WAAW;IACzC,UAAU,EAAG,WAAW,CAAC;IAEhC,2BAA2B;IACpB,OAAO,EAAE,WAAW,CAAa;IAExC,wCAAwC;IACjC,IAAI,EAAE,QAAQ,CAAQ;CAC7B"}

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

@@ -1 +1 @@
-{"version":3,"file":"list.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/list/list.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDA2BtB,CAAC"}
+{"version":3,"file":"list.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/list/list.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDA+BtB,CAAC"}

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

@@ -2,6 +2,10 @@ import { css } from '@melodicdev/core';
 export const listStyles = () => css `
 	:host {
 		display: block;
+
+		/* ── List: divider ── */
+		--ml-list-divider-width: var(--ml-border);
+		--ml-list-divider-color: var(--ml-color-border);
 	}
 
 	.ml-list {
@@ -24,6 +28,6 @@ export const listStyles = () => css `
 
 	/* Default variant: dividers between items */
 	.ml-list--default ::slotted(ml-list-item:not(:last-of-type)) {
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		border-bottom: var(--ml-list-divider-width) solid var(--ml-list-divider-color);
 	}
 `;

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

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

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

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

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

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

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

@@ -0,0 +1,61 @@
+import type { IElementRef, OnCreate } from '@melodicdev/core';
+import type { Size } from '../../../types/index.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
+ */
+export declare class ProfileCardComponent implements IElementRef, OnCreate {
+    elementRef: HTMLElement;
+    /** Person name */
+    name: string;
+    /** Subtitle (e.g. "Member · Women's Ministry") */
+    subtitle: string;
+    /** Avatar image URL — falls back to initials derived from name */
+    avatar: string;
+    /** Avatar size */
+    'avatar-size': Size;
+    /** Slot visibility flags (toggled via slotchange) */
+    hasDetails: boolean;
+    hasTags: boolean;
+    hasActions: boolean;
+    hasMeta: boolean;
+    /** Derive initials from name */
+    get initials(): string;
+    onCreate(): void;
+}
+//# sourceMappingURL=profile-card.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"profile-card.component.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/profile-card/profile-card.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,qBAMa,oBAAqB,YAAW,WAAW,EAAE,QAAQ;IAC1D,UAAU,EAAG,WAAW,CAAC;IAEhC,kBAAkB;IACX,IAAI,SAAM;IAEjB,kDAAkD;IAC3C,QAAQ,SAAM;IAErB,kEAAkE;IAC3D,MAAM,SAAM;IAEnB,kBAAkB;IACX,aAAa,EAAE,IAAI,CAAQ;IAElC,qDAAqD;IAC9C,UAAU,UAAS;IACnB,OAAO,UAAS;IAChB,UAAU,UAAS;IACnB,OAAO,UAAS;IAEvB,gCAAgC;IAChC,IAAW,QAAQ,IAAI,MAAM,CAO5B;IAEM,QAAQ,IAAI,IAAI;CAcvB"}