@melodicdev/components 1.3.0 → 1.5.0

package/lib/components/forms/date-picker/calendar.styles.js

@@ -2,11 +2,72 @@ import { css } from '@melodicdev/core';
 export const calendarStyles = () => css `
 	:host {
 		display: inline-block;
+
+		/* --- Calendar --- */
+		--ml-calendar-width: 280px;
+		--ml-calendar-font-family: var(--ml-font-sans);
+
+		/* --- Month label --- */
+		--ml-calendar-month-font-size: var(--ml-text-sm);
+		--ml-calendar-month-font-weight: var(--ml-font-semibold);
+		--ml-calendar-month-color: var(--ml-color-text);
+
+		/* --- Nav buttons --- */
+		--ml-calendar-nav-size: 2rem;
+		--ml-calendar-nav-border-radius: var(--ml-radius-md);
+		--ml-calendar-nav-color: var(--ml-color-text-muted);
+		--ml-calendar-nav-hover-bg: var(--ml-color-surface-raised);
+		--ml-calendar-nav-hover-color: var(--ml-color-text);
+
+		/* --- Weekday headers --- */
+		--ml-calendar-weekday-height: 2.25rem;
+		--ml-calendar-weekday-font-size: var(--ml-text-xs);
+		--ml-calendar-weekday-font-weight: var(--ml-font-medium);
+		--ml-calendar-weekday-color: var(--ml-color-text-muted);
+
+		/* --- Day cells --- */
+		--ml-calendar-day-font-size: var(--ml-text-sm);
+		--ml-calendar-day-font-weight: var(--ml-font-regular);
+		--ml-calendar-day-color: var(--ml-color-text);
+		--ml-calendar-day-border-radius: var(--ml-radius-full);
+		--ml-calendar-day-hover-bg: var(--ml-color-surface-raised);
+
+		/* --- Today --- */
+		--ml-calendar-today-font-weight: var(--ml-font-semibold);
+		--ml-calendar-today-dot-size: 4px;
+		--ml-calendar-today-dot-color: var(--ml-color-primary);
+
+		/* --- Selected --- */
+		--ml-calendar-selected-bg: var(--ml-color-primary);
+		--ml-calendar-selected-color: var(--ml-color-text-inverse);
+		--ml-calendar-selected-font-weight: var(--ml-font-semibold);
+		--ml-calendar-selected-hover-bg: var(--ml-color-primary-hover);
+		--ml-calendar-selected-dot-color: var(--ml-color-text-inverse);
+
+		/* --- Disabled --- */
+		--ml-calendar-disabled-opacity: 0.3;
+
+		/* --- Focus --- */
+		--ml-calendar-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Today button --- */
+		--ml-calendar-today-btn-border-color: var(--ml-color-border);
+		--ml-calendar-today-btn-border-radius: var(--ml-radius-md);
+		--ml-calendar-today-btn-bg: var(--ml-color-surface);
+		--ml-calendar-today-btn-font-size: var(--ml-text-sm);
+		--ml-calendar-today-btn-font-weight: var(--ml-font-medium);
+		--ml-calendar-today-btn-color: var(--ml-color-text);
+		--ml-calendar-today-btn-hover-bg: var(--ml-color-surface-raised);
+		--ml-calendar-today-btn-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Transition --- */
+		--ml-calendar-transition-duration: var(--ml-duration-150);
+		--ml-calendar-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-calendar {
-		width: 280px;
-		font-family: var(--ml-font-sans);
+		width: var(--ml-calendar-width);
+		font-family: var(--ml-calendar-font-family);
 	}
 
 	/* Header with nav */
@@ -24,33 +85,33 @@ export const calendarStyles = () => css `
 	}
 
 	.ml-calendar__month-label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
+		font-size: var(--ml-calendar-month-font-size);
+		font-weight: var(--ml-calendar-month-font-weight);
+		color: var(--ml-calendar-month-color);
 	}
 
 	.ml-calendar__nav {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 2rem;
-		height: 2rem;
+		width: var(--ml-calendar-nav-size);
+		height: var(--ml-calendar-nav-size);
 		border: none;
-		border-radius: var(--ml-radius-md);
+		border-radius: var(--ml-calendar-nav-border-radius);
 		background: none;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-calendar-nav-color);
 		cursor: pointer;
-		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out), color var(--ml-duration-150) var(--ml-ease-in-out);
+		transition: background-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing), color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing);
 	}
 
 	.ml-calendar__nav:hover {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
+		background-color: var(--ml-calendar-nav-hover-bg);
+		color: var(--ml-calendar-nav-hover-color);
 	}
 
 	.ml-calendar__nav:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-focus-shadow);
 	}
 
 	/* Weekday headers */
@@ -65,10 +126,10 @@ export const calendarStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		height: 2.25rem;
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-muted);
+		height: var(--ml-calendar-weekday-height);
+		font-size: var(--ml-calendar-weekday-font-size);
+		font-weight: var(--ml-calendar-weekday-font-weight);
+		color: var(--ml-calendar-weekday-color);
 	}
 
 	/* Day grid */
@@ -87,26 +148,26 @@ export const calendarStyles = () => css `
 		width: 100%;
 		aspect-ratio: 1;
 		border: none;
-		border-radius: var(--ml-radius-full);
+		border-radius: var(--ml-calendar-day-border-radius);
 		background: none;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-regular);
-		color: var(--ml-color-text);
+		font-size: var(--ml-calendar-day-font-size);
+		font-weight: var(--ml-calendar-day-font-weight);
+		color: var(--ml-calendar-day-color);
 		cursor: pointer;
 		padding: 0;
 		gap: 1px;
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			color var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing),
+			color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing);
 	}
 
 	.ml-calendar__day:hover:not(:disabled):not(.ml-calendar__day--selected) {
-		background-color: var(--ml-color-surface-raised);
+		background-color: var(--ml-calendar-day-hover-bg);
 	}
 
 	.ml-calendar__day:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-focus-shadow);
 		z-index: 1;
 	}
 
@@ -118,7 +179,7 @@ export const calendarStyles = () => css `
 
 	/* Today */
 	.ml-calendar__day--today {
-		font-weight: var(--ml-font-semibold);
+		font-weight: var(--ml-calendar-today-font-weight);
 	}
 
 	.ml-calendar__day-number {
@@ -127,30 +188,30 @@ export const calendarStyles = () => css `
 
 	/* Today dot indicator */
 	.ml-calendar__today-dot {
-		width: 4px;
-		height: 4px;
-		border-radius: var(--ml-radius-full);
-		background-color: var(--ml-color-primary);
+		width: var(--ml-calendar-today-dot-size);
+		height: var(--ml-calendar-today-dot-size);
+		border-radius: var(--ml-calendar-day-border-radius);
+		background-color: var(--ml-calendar-today-dot-color);
 	}
 
 	.ml-calendar__day--selected .ml-calendar__today-dot {
-		background-color: var(--ml-color-text-inverse);
+		background-color: var(--ml-calendar-selected-dot-color);
 	}
 
 	/* Selected */
 	.ml-calendar__day--selected {
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
-		font-weight: var(--ml-font-semibold);
+		background-color: var(--ml-calendar-selected-bg);
+		color: var(--ml-calendar-selected-color);
+		font-weight: var(--ml-calendar-selected-font-weight);
 	}
 
 	.ml-calendar__day--selected:hover:not(:disabled) {
-		background-color: var(--ml-color-primary-hover);
+		background-color: var(--ml-calendar-selected-hover-bg);
 	}
 
 	/* Disabled */
 	.ml-calendar__day--disabled:not(.ml-calendar__day--other-month) {
-		opacity: 0.3;
+		opacity: var(--ml-calendar-disabled-opacity);
 		cursor: not-allowed;
 	}
 
@@ -162,25 +223,25 @@ export const calendarStyles = () => css `
 	}
 
 	.ml-calendar__today-btn {
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-md);
-		background-color: var(--ml-color-surface);
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
+		border: var(--ml-border) solid var(--ml-calendar-today-btn-border-color);
+		border-radius: var(--ml-calendar-today-btn-border-radius);
+		background-color: var(--ml-calendar-today-btn-bg);
+		font-family: var(--ml-calendar-font-family);
+		font-size: var(--ml-calendar-today-btn-font-size);
+		font-weight: var(--ml-calendar-today-btn-font-weight);
+		color: var(--ml-calendar-today-btn-color);
 		padding: var(--ml-space-1-5) var(--ml-space-3);
 		cursor: pointer;
-		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out), border-color var(--ml-duration-150) var(--ml-ease-in-out);
+		transition: background-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing), border-color var(--ml-calendar-transition-duration) var(--ml-calendar-transition-easing);
 	}
 
 	.ml-calendar__today-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		border-color: var(--ml-color-border-strong);
+		background-color: var(--ml-calendar-today-btn-hover-bg);
+		border-color: var(--ml-calendar-today-btn-hover-border-color);
 	}
 
 	.ml-calendar__today-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-calendar-focus-shadow);
 	}
 `;

package/lib/components/forms/date-picker/date-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAiBzE;;;;;;;;;;GAUG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IAC3E,UAAU,EAAG,WAAW,CAAC;IAEzB,+CAA+C;IAC/C,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAiB;IAE5B,kBAAkB;IAClB,KAAK,SAAM;IAEX,gBAAgB;IAChB,IAAI,SAAM;IAEV,oBAAoB;IACpB,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,2CAA2C;IAC3C,GAAG,SAAM;IAET,2CAA2C;IAC3C,GAAG,SAAM;IAET,2CAA2C;IAC3C,MAAM,UAAS;IAEf,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,cAAc,QAAO,IAAI,CAMvB;IAEF,oEAAoE;IACpE,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAKrC;IAEF,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAQ1C;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}
+{"version":3,"file":"date-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAiBzE;;;;;;;;;;GAUG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,+CAA+C;IACxC,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAiB;IAEnC,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,GAAG,SAAM;IAEhB,2CAA2C;IACpC,MAAM,UAAS;IAEtB,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAW,YAAY,IAAI,MAAM,CAEhC;IAEM,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,cAAc,QAAO,IAAI,CAM9B;IAEF,oEAAoE;IAC7D,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAK5C;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAQjD;IAEF,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAW5B;IAEF,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,YAAY;CAGpB"}

package/lib/components/forms/date-picker/date-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAuJ5B,CAAC"}
+{"version":3,"file":"date-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-picker/date-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAiN5B,CAAC"}

package/lib/components/forms/date-picker/date-picker.styles.js

@@ -2,20 +2,76 @@ import { css } from '@melodicdev/core';
 export const datePickerStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Label --- */
+		--ml-date-picker-label-font-size: var(--ml-text-sm);
+		--ml-date-picker-label-font-weight: var(--ml-font-medium);
+		--ml-date-picker-label-color: var(--ml-color-text-secondary);
+		--ml-date-picker-label-line-height: var(--ml-leading-tight);
+		--ml-date-picker-label-margin-bottom: var(--ml-space-1-5);
+
+		/* --- Required indicator --- */
+		--ml-date-picker-required-color: var(--ml-color-danger);
+
+		/* --- Trigger --- */
+		--ml-date-picker-bg: var(--ml-color-input-bg);
+		--ml-date-picker-border-width: var(--ml-border);
+		--ml-date-picker-border-color: var(--ml-color-border);
+		--ml-date-picker-border-radius: var(--ml-radius-md);
+		--ml-date-picker-color: var(--ml-color-text);
+		--ml-date-picker-font-family: var(--ml-font-sans);
+		--ml-date-picker-font-size: var(--ml-text-sm);
+		--ml-date-picker-padding: var(--ml-space-2) var(--ml-space-3);
+		--ml-date-picker-gap: var(--ml-space-2);
+		--ml-date-picker-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Focus --- */
+		--ml-date-picker-focus-border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
+		--ml-date-picker-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-date-picker-error-border-color: var(--ml-color-danger);
+		--ml-date-picker-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		--ml-date-picker-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-date-picker-disabled-opacity: 0.5;
+		--ml-date-picker-disabled-bg: var(--ml-color-surface-sunken);
+
+		/* --- Icon --- */
+		--ml-date-picker-icon-color: var(--ml-color-text-muted);
+
+		/* --- Placeholder --- */
+		--ml-date-picker-placeholder-color: var(--ml-color-text-muted);
+
+		/* --- Popover --- */
+		--ml-date-picker-popover-padding: var(--ml-space-4);
+		--ml-date-picker-popover-border-color: var(--ml-color-border);
+		--ml-date-picker-popover-border-radius: var(--ml-radius-lg);
+		--ml-date-picker-popover-bg: var(--ml-color-surface);
+		--ml-date-picker-popover-shadow: var(--ml-shadow-lg);
+
+		/* --- Hint --- */
+		--ml-date-picker-hint-color: var(--ml-color-text-muted);
+		--ml-date-picker-hint-font-size: var(--ml-text-sm);
+
+		/* --- Transition --- */
+		--ml-date-picker-transition-duration: var(--ml-duration-150);
+		--ml-date-picker-transition-easing: var(--ml-ease-in-out);
 	}
 
 	/* Label */
 	.ml-date-picker__label {
 		display: block;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		margin-bottom: var(--ml-space-1-5);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-date-picker-label-font-size);
+		font-weight: var(--ml-date-picker-label-font-weight);
+		color: var(--ml-date-picker-label-color);
+		margin-bottom: var(--ml-date-picker-label-margin-bottom);
+		line-height: var(--ml-date-picker-label-line-height);
 	}
 
 	.ml-date-picker__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-date-picker-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
@@ -23,48 +79,50 @@ export const datePickerStyles = () => css `
 	.ml-date-picker__trigger {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-date-picker-gap);
 		width: 100%;
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-md);
-		background-color: var(--ml-color-input-bg);
-		color: var(--ml-color-text);
+		padding: var(--ml-date-picker-padding);
+		border: var(--ml-date-picker-border-width) solid var(--ml-date-picker-border-color);
+		border-radius: var(--ml-date-picker-border-radius);
+		background-color: var(--ml-date-picker-bg);
+		color: var(--ml-date-picker-color);
 		cursor: pointer;
-		font-family: var(--ml-font-sans);
+		font-family: var(--ml-date-picker-font-family);
+		font-size: var(--ml-date-picker-font-size);
 		text-align: left;
 		transition:
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+			border-color var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing),
+			box-shadow var(--ml-date-picker-transition-duration) var(--ml-date-picker-transition-easing);
 	}
 
 	.ml-date-picker__trigger:hover:not(:disabled) {
-		border-color: var(--ml-color-border-strong);
+		border-color: var(--ml-date-picker-hover-border-color);
 	}
 
 	.ml-date-picker__trigger:focus-visible {
 		outline: none;
-		border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-date-picker-focus-border-color);
+		box-shadow: var(--ml-date-picker-focus-shadow);
 	}
 
 	.ml-date-picker--open .ml-date-picker__trigger {
-		border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-date-picker-focus-border-color);
+		box-shadow: var(--ml-date-picker-focus-shadow);
 	}
 
 	.ml-date-picker--error .ml-date-picker__trigger {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-date-picker-error-border-color);
 	}
 
 	.ml-date-picker--error .ml-date-picker__trigger:focus-visible,
 	.ml-date-picker--error.ml-date-picker--open .ml-date-picker__trigger {
-		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		box-shadow: var(--ml-date-picker-error-focus-shadow);
 	}
 
 	.ml-date-picker--disabled .ml-date-picker__trigger {
-		opacity: 0.5;
+		opacity: var(--ml-date-picker-disabled-opacity);
 		cursor: not-allowed;
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-date-picker-disabled-bg);
 	}
 
 	/* Sizes */
@@ -86,7 +144,7 @@ export const datePickerStyles = () => css `
 	/* Icon */
 	.ml-date-picker__icon {
 		flex-shrink: 0;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-date-picker-icon-color);
 	}
 
 	/* Value */
@@ -99,7 +157,7 @@ export const datePickerStyles = () => css `
 	}
 
 	.ml-date-picker__value--placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-date-picker-placeholder-color);
 	}
 
 	/* Popover */
@@ -107,19 +165,19 @@ export const datePickerStyles = () => css `
 		position: fixed;
 		inset: unset;
 		margin: 0;
-		padding: var(--ml-space-4);
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
-		background-color: var(--ml-color-surface);
-		box-shadow: var(--ml-shadow-lg);
+		padding: var(--ml-date-picker-popover-padding);
+		border: var(--ml-date-picker-border-width) solid var(--ml-date-picker-popover-border-color);
+		border-radius: var(--ml-date-picker-popover-border-radius);
+		background-color: var(--ml-date-picker-popover-bg);
+		box-shadow: var(--ml-date-picker-popover-shadow);
 		z-index: 50;
 
 		opacity: 0;
 		transform: scale(0.95);
 		transition:
-			opacity var(--ml-duration-150) var(--ml-ease-out),
-			transform var(--ml-duration-150) var(--ml-ease-out),
-			display var(--ml-duration-150) allow-discrete;
+			opacity var(--ml-date-picker-transition-duration) var(--ml-ease-out),
+			transform var(--ml-date-picker-transition-duration) var(--ml-ease-out),
+			display var(--ml-date-picker-transition-duration) allow-discrete;
 	}
 
 	.ml-date-picker__popover:popover-open {
@@ -138,16 +196,16 @@ export const datePickerStyles = () => css `
 	.ml-date-picker__hint,
 	.ml-date-picker__error {
 		display: block;
-		margin-top: var(--ml-space-1-5);
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		margin-top: var(--ml-date-picker-label-margin-bottom);
+		font-size: var(--ml-date-picker-hint-font-size);
+		line-height: var(--ml-date-picker-label-line-height);
 	}
 
 	.ml-date-picker__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-date-picker-hint-color);
 	}
 
 	.ml-date-picker__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-date-picker-error-color);
 	}
 `;

package/lib/components/forms/date-time-picker/date-time-picker.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AAiCjD;;;;;;;;;;;;;GAaG;AACH,qBAMa,uBAAwB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IAC/E,UAAU,EAAG,WAAW,CAAC;IAEzB,yDAAyD;IACzD,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAA0B;IAErC,kBAAkB;IAClB,KAAK,SAAM;IAEX,gBAAgB;IAChB,IAAI,SAAM;IAEV,oBAAoB;IACpB,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,2CAA2C;IAC3C,OAAO,SAAM;IAEb,2CAA2C;IAC3C,OAAO,SAAM;IAEb,sCAAsC;IACtC,OAAO,SAAM;IAEb,sCAAsC;IACtC,OAAO,SAAM;IAEb,2BAA2B;IAC3B,IAAI,SAAM;IAEV,yCAAyC;IACzC,UAAU,UAAQ;IAElB,4BAA4B;IAC5B,SAAS,SAAM;IAEf,4BAA4B;IAC5B,SAAS,SAAM;IAEf,OAAO,CAAC,UAAU,CAAyB;IAE3C,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAKjB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,oBAAoB;IA4B5B,OAAO,CAAC,UAAU;CAqBlB"}
+{"version":3,"file":"date-time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAKzE,OAAO,yCAAyC,CAAC;AACjD,OAAO,yCAAyC,CAAC;AAiCjD;;;;;;;;;;;;;GAaG;AACH,qBAMa,uBAAwB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACxE,UAAU,EAAG,WAAW,CAAC;IAEhC,yDAAyD;IAClD,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAA0B;IAE5C,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEvC,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAExB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,2CAA2C;IACpC,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,sCAAsC;IAC/B,OAAO,SAAM;IAEpB,2BAA2B;IACpB,IAAI,SAAM;IAEjB,yCAAyC;IAClC,UAAU,UAAQ;IAEzB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,4BAA4B;IACrB,SAAS,SAAM;IAEtB,OAAO,CAAC,UAAU,CAAyB;IAE3C,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAEM,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAKxB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,oBAAoB;IA4B5B,OAAO,CAAC,UAAU;CAqBlB"}

package/lib/components/forms/date-time-picker/date-time-picker.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-time-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iDAwFhC,CAAC"}
+{"version":3,"file":"date-time-picker.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/date-time-picker/date-time-picker.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,iDAgIhC,CAAC"}

package/lib/components/forms/date-time-picker/date-time-picker.styles.js

@@ -2,49 +2,89 @@ import { css } from '@melodicdev/core';
 export const dateTimePickerStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Label --- */
+		--ml-date-time-picker-label-font-size: var(--ml-text-sm);
+		--ml-date-time-picker-label-font-weight: var(--ml-font-medium);
+		--ml-date-time-picker-label-color: var(--ml-color-text-secondary);
+		--ml-date-time-picker-label-line-height: var(--ml-leading-tight);
+		--ml-date-time-picker-label-margin-bottom: var(--ml-space-1-5);
+
+		/* --- Required indicator --- */
+		--ml-date-time-picker-required-color: var(--ml-color-danger);
+
+		/* --- Row (unified input border) --- */
+		--ml-date-time-picker-border-width: var(--ml-border);
+		--ml-date-time-picker-border-color: var(--ml-color-border);
+		--ml-date-time-picker-border-radius: var(--ml-radius-md);
+		--ml-date-time-picker-bg: var(--ml-color-input-bg);
+
+		/* --- Focus --- */
+		--ml-date-time-picker-focus-border-color: var(--ml-color-primary);
+		--ml-date-time-picker-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-date-time-picker-error-border-color: var(--ml-color-danger);
+		--ml-date-time-picker-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		--ml-date-time-picker-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-date-time-picker-disabled-opacity: 0.5;
+		--ml-date-time-picker-disabled-bg: var(--ml-color-surface-sunken);
+
+		/* --- Divider --- */
+		--ml-date-time-picker-divider-color: var(--ml-color-border);
+
+		/* --- Hint --- */
+		--ml-date-time-picker-hint-color: var(--ml-color-text-muted);
+		--ml-date-time-picker-hint-font-size: var(--ml-text-sm);
+
+		/* --- Transition --- */
+		--ml-date-time-picker-transition-duration: var(--ml-duration-150);
+		--ml-date-time-picker-transition-easing: var(--ml-ease-in-out);
 	}
 
 	/* Label */
 	.ml-date-time-picker__label {
 		display: block;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		margin-bottom: var(--ml-space-1-5);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-date-time-picker-label-font-size);
+		font-weight: var(--ml-date-time-picker-label-font-weight);
+		color: var(--ml-date-time-picker-label-color);
+		margin-bottom: var(--ml-date-time-picker-label-margin-bottom);
+		line-height: var(--ml-date-time-picker-label-line-height);
 	}
 
 	.ml-date-time-picker__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-date-time-picker-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
-	/* Unified row — acts as the single input border */
+	/* Unified row -- acts as the single input border */
 	.ml-date-time-picker__row {
 		display: flex;
 		align-items: stretch;
-		border: var(--ml-border) solid var(--ml-color-border);
-		border-radius: var(--ml-radius-md);
-		background-color: var(--ml-color-input-bg);
+		border: var(--ml-date-time-picker-border-width) solid var(--ml-date-time-picker-border-color);
+		border-radius: var(--ml-date-time-picker-border-radius);
+		background-color: var(--ml-date-time-picker-bg);
 		transition:
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			box-shadow var(--ml-duration-150) var(--ml-ease-in-out);
+			border-color var(--ml-date-time-picker-transition-duration) var(--ml-date-time-picker-transition-easing),
+			box-shadow var(--ml-date-time-picker-transition-duration) var(--ml-date-time-picker-transition-easing);
 	}
 
 	.ml-date-time-picker__row:focus-within {
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-date-time-picker-focus-border-color);
+		box-shadow: var(--ml-date-time-picker-focus-shadow);
 	}
 
 	.ml-date-time-picker--error .ml-date-time-picker__row {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-date-time-picker-error-border-color);
 	}
 
 	.ml-date-time-picker--error .ml-date-time-picker__row:focus-within {
-		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		box-shadow: var(--ml-date-time-picker-error-focus-shadow);
 	}
 
-	/* Child pickers — strip their individual borders, hover borders & focus rings */
+	/* Child pickers -- strip their individual borders, hover borders & focus rings */
 	.ml-date-time-picker__row > ml-date-picker,
 	.ml-date-time-picker__row > ml-time-picker {
 		flex: 1;
@@ -59,32 +99,32 @@ export const dateTimePickerStyles = () => css `
 	.ml-date-time-picker__divider {
 		width: 1px;
 		align-self: stretch;
-		background-color: var(--ml-color-border);
+		background-color: var(--ml-date-time-picker-divider-color);
 		margin: var(--ml-space-1-5) 0;
 		flex-shrink: 0;
 	}
 
 	/* Disabled */
 	.ml-date-time-picker--disabled .ml-date-time-picker__row {
-		opacity: 0.5;
+		opacity: var(--ml-date-time-picker-disabled-opacity);
 		pointer-events: none;
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-date-time-picker-disabled-bg);
 	}
 
 	/* Hint / Error */
 	.ml-date-time-picker__hint,
 	.ml-date-time-picker__error {
 		display: block;
-		margin-top: var(--ml-space-1-5);
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		margin-top: var(--ml-date-time-picker-label-margin-bottom);
+		font-size: var(--ml-date-time-picker-hint-font-size);
+		line-height: var(--ml-date-time-picker-label-line-height);
 	}
 
 	.ml-date-time-picker__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-date-time-picker-hint-color);
 	}
 
 	.ml-date-time-picker__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-date-time-picker-error-color);
 	}
 `;

package/lib/components/forms/file-upload/file-icon.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-icon.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-icon.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK5D,qBAMa,iBAAkB,YAAW,WAAW;IACpD,UAAU,EAAG,WAAW,CAAC;IAEzB,SAAS,SAAM;IACf,KAAK,EAAE,aAAa,GAAG,EAAE,CAAM;IAC/B,IAAI,EAAE,IAAI,CAAQ;IAElB,IAAI,aAAa,IAAI,aAAa,CAGjC;IAED,IAAI,gBAAgB,IAAI,MAAM,CAE7B;CACD"}
+{"version":3,"file":"file-icon.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-icon.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK5D,qBAMa,iBAAkB,YAAW,WAAW;IAC7C,UAAU,EAAG,WAAW,CAAC;IAEzB,SAAS,SAAM;IACf,KAAK,EAAE,aAAa,GAAG,EAAE,CAAM;IAC/B,IAAI,EAAE,IAAI,CAAQ;IAEzB,IAAW,aAAa,IAAI,aAAa,CAGxC;IAED,IAAW,gBAAgB,IAAI,MAAM,CAEpC;CACD"}

package/lib/components/forms/file-upload/file-upload-item.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload-item.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,qBAMa,uBAAwB,YAAW,WAAW;IAC1D,UAAU,EAAG,WAAW,CAAC;IAEzB,IAAI,SAAM;IACV,IAAI,SAAM;IACV,MAAM,EAAE,gBAAgB,CAAU;IAClC,QAAQ,SAAK;IACb,KAAK,SAAM;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEzB,IAAI,SAAS,IAAI,MAAM,CAGtB;IAED,IAAI,eAAe,IAAI,MAAM,CAE5B;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,YAAY,QAAO,IAAI,CAQrB;IAEF,WAAW,QAAO,IAAI,CAQpB;CACF"}
+{"version":3,"file":"file-upload-item.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload-item.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/D,qBAMa,uBAAwB,YAAW,WAAW;IACnD,UAAU,EAAG,WAAW,CAAC;IAEzB,IAAI,SAAM;IACV,IAAI,SAAM;IACV,MAAM,EAAE,gBAAgB,CAAU;IAClC,QAAQ,SAAK;IACb,KAAK,SAAM;IACX,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEhC,IAAW,SAAS,IAAI,MAAM,CAG7B;IAED,IAAW,eAAe,IAAI,MAAM,CAEnC;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAEM,YAAY,QAAO,IAAI,CAQ5B;IAEK,WAAW,QAAO,IAAI,CAQ3B;CACF"}