@melodicdev/components 1.3.0 → 1.5.0

package/lib/components/forms/textarea/textarea.styles.js

@@ -4,6 +4,53 @@ export const textareaStyles = () => css `
 		display: block;
 		width: 100%;
 		min-width: 0;
+
+		/* --- Label --- */
+		--ml-textarea-label-font-size: var(--ml-text-sm);
+		--ml-textarea-label-font-weight: var(--ml-font-medium);
+		--ml-textarea-label-color: var(--ml-color-text-secondary);
+		--ml-textarea-label-line-height: var(--ml-leading-tight);
+
+		/* --- Required indicator --- */
+		--ml-textarea-required-color: var(--ml-color-danger);
+
+		/* --- Field --- */
+		--ml-textarea-bg: var(--ml-color-input-bg);
+		--ml-textarea-border-width: var(--ml-border);
+		--ml-textarea-border-color: var(--ml-color-border-strong);
+		--ml-textarea-border-radius: var(--ml-radius);
+		--ml-textarea-shadow: var(--ml-shadow-xs);
+		--ml-textarea-color: var(--ml-color-text);
+		--ml-textarea-font-family: var(--ml-font-sans);
+		--ml-textarea-font-size: var(--ml-text-sm);
+		--ml-textarea-line-height: var(--ml-leading-normal);
+		--ml-textarea-padding: var(--ml-space-3) var(--ml-space-3-5);
+		--ml-textarea-min-height: 80px;
+		--ml-textarea-placeholder-color: var(--ml-color-text-muted);
+		--ml-textarea-hover-border-color: var(--ml-color-border);
+
+		/* --- Focus --- */
+		--ml-textarea-focus-border-color: var(--ml-color-primary);
+		--ml-textarea-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-textarea-error-border-color: var(--ml-color-danger);
+		--ml-textarea-error-focus-shadow: var(--ml-shadow-ring-error);
+		--ml-textarea-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-textarea-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-textarea-disabled-color: var(--ml-color-text-muted);
+
+		/* --- Hint / Counter --- */
+		--ml-textarea-hint-color: var(--ml-color-text-muted);
+		--ml-textarea-hint-font-size: var(--ml-text-sm);
+		--ml-textarea-counter-font-size: var(--ml-text-xs);
+		--ml-textarea-counter-color: var(--ml-color-text-muted);
+
+		/* --- Transition --- */
+		--ml-textarea-transition-duration: var(--ml-duration-150);
+		--ml-textarea-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-textarea {
@@ -13,54 +60,54 @@ export const textareaStyles = () => css `
 	}
 
 	.ml-textarea__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-textarea-label-font-size);
+		font-weight: var(--ml-textarea-label-font-weight);
+		color: var(--ml-textarea-label-color);
+		line-height: var(--ml-textarea-label-line-height);
 	}
 
 	.ml-textarea__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-textarea-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
 	.ml-textarea__field {
 		box-sizing: border-box;
 		width: 100%;
-		min-height: 80px;
-		padding: var(--ml-space-3) var(--ml-space-3-5);
-		background-color: var(--ml-color-input-bg);
-		border: var(--ml-border) solid var(--ml-color-border-strong);
-		border-radius: var(--ml-radius);
-		box-shadow: var(--ml-shadow-xs);
-		color: var(--ml-color-text);
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-normal);
+		min-height: var(--ml-textarea-min-height);
+		padding: var(--ml-textarea-padding);
+		background-color: var(--ml-textarea-bg);
+		border: var(--ml-textarea-border-width) solid var(--ml-textarea-border-color);
+		border-radius: var(--ml-textarea-border-radius);
+		box-shadow: var(--ml-textarea-shadow);
+		color: var(--ml-textarea-color);
+		font-family: var(--ml-textarea-font-family);
+		font-size: var(--ml-textarea-font-size);
+		line-height: var(--ml-textarea-line-height);
 		resize: none;
 		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-textarea-transition-duration) var(--ml-textarea-transition-easing),
+			box-shadow var(--ml-textarea-transition-duration) var(--ml-textarea-transition-easing);
 	}
 
 	.ml-textarea__field:hover:not(:disabled) {
-		border-color: var(--ml-color-border);
+		border-color: var(--ml-textarea-hover-border-color);
 	}
 
 	.ml-textarea__field:focus {
 		outline: none;
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-textarea-focus-border-color);
+		box-shadow: var(--ml-textarea-focus-shadow);
 	}
 
 	.ml-textarea__field::placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-textarea-placeholder-color);
 	}
 
 	.ml-textarea__field:disabled {
-		background-color: var(--ml-color-input-disabled-bg);
+		background-color: var(--ml-textarea-disabled-bg);
 		cursor: not-allowed;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-textarea-disabled-color);
 	}
 
 	.ml-textarea__footer {
@@ -72,21 +119,21 @@ export const textareaStyles = () => css `
 
 	.ml-textarea__error,
 	.ml-textarea__hint {
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-textarea-hint-font-size);
+		line-height: var(--ml-textarea-label-line-height);
 	}
 
 	.ml-textarea__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-textarea-error-color);
 	}
 
 	.ml-textarea__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-textarea-hint-color);
 	}
 
 	.ml-textarea__counter {
-		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-muted);
+		font-size: var(--ml-textarea-counter-font-size);
+		color: var(--ml-textarea-counter-color);
 		margin-left: auto;
 	}
 
@@ -95,13 +142,14 @@ export const textareaStyles = () => css `
 	}
 
 	.ml-textarea--error .ml-textarea__field {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-textarea-error-border-color);
 	}
 
 	.ml-textarea--error .ml-textarea__field:focus {
-		box-shadow: var(--ml-shadow-ring-error);
+		box-shadow: var(--ml-textarea-error-focus-shadow);
 	}
 
+	/* --- Size variants --- */
 	.ml-textarea--sm .ml-textarea__field {
 		padding: var(--ml-space-2) var(--ml-space-3);
 		font-size: var(--ml-text-sm);

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

@@ -1 +1 @@
-{"version":3,"file":"time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA8BzE;;;;;;;;;;;GAWG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IAC3E,UAAU,EAAG,WAAW,CAAC;IAEzB,gDAAgD;IAChD,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,sCAAsC;IACtC,GAAG,SAAM;IAET,sCAAsC;IACtC,GAAG,SAAM;IAET,uFAAuF;IACvF,IAAI,SAAM;IAEV,oDAAoD;IACpD,UAAU,UAAQ;IAElB,kCAAkC;IAClC,MAAM,UAAS;IAEf,2BAA2B;IAC3B,QAAQ,SAAK;IAEb,6BAA6B;IAC7B,UAAU,SAAK;IAEf,6BAA6B;IAC7B,UAAU,SAAK;IAEf,oCAAoC;IACpC,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAE/B,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAI,SAAS,IAAI,OAAO,CAEvB;IAED,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,YAAY,IAAI,MAAM,CAEzB;IAED,IAAI,WAAW,IAAI,MAAM,CAQxB;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,IAAI,aAAa,IAAI,MAAM,CAE1B;IAED,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,aAAa,QAAO,IAAI,CAMtB;IAEF,aAAa,QAAO,IAAI,CAStB;IAEF,aAAa,QAAO,IAAI,CAQtB;IAEF,eAAe,QAAO,IAAI,CAExB;IAEF,eAAe,QAAO,IAAI,CAExB;IAEF,eAAe,QAAO,IAAI,CAExB;IAEF,eAAe,QAAO,IAAI,CAExB;IAEF,YAAY,QAAO,IAAI,CAIrB;IAEF,gBAAgB,QAAO,IAAI,CAOzB;IAEF,cAAc,QAAO,IAAI,CAMvB;IAEF,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAQ1C;IAEF,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAapC;IAEF,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAOtC;IAEF,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAOtC;IAEF,cAAc,QAAO,IAAI,CAKvB;IAEF,gBAAgB,QAAO,IAAI,CAEzB;IAEF,gBAAgB,QAAO,IAAI,CAEzB;IAEF,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAErC;IAEF,oBAAoB,GAAI,OAAO,aAAa,KAAG,IAAI,CAkBjD;IAEF,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAY5B;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":"time-picker.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/time-picker/time-picker.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AA8BzE;;;;;;;;;;;GAWG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS;IACpE,UAAU,EAAG,WAAW,CAAC;IAEhC,gDAAgD;IACzC,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,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,sCAAsC;IAC/B,GAAG,SAAM;IAEhB,uFAAuF;IAChF,IAAI,SAAM;IAEjB,oDAAoD;IAC7C,UAAU,UAAQ;IAEzB,kCAAkC;IAC3B,MAAM,UAAS;IAEtB,2BAA2B;IACpB,QAAQ,SAAK;IAEpB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,6BAA6B;IACtB,UAAU,SAAK;IAEtB,oCAAoC;IAC7B,UAAU,EAAE,IAAI,GAAG,IAAI,CAAQ;IAEtC,OAAO,CAAC,kBAAkB,CAA6B;IAEvD,IAAW,SAAS,IAAI,OAAO,CAE9B;IAED,IAAW,WAAW,IAAI,OAAO,CAEhC;IAED,IAAW,YAAY,IAAI,MAAM,CAEhC;IAED,IAAW,WAAW,IAAI,MAAM,CAQ/B;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAED,IAAW,aAAa,IAAI,MAAM,CAEjC;IAEM,QAAQ,IAAI,IAAI;IAOhB,SAAS,IAAI,IAAI;IAQjB,aAAa,QAAO,IAAI,CAM7B;IAEK,aAAa,QAAO,IAAI,CAS7B;IAEK,aAAa,QAAO,IAAI,CAQ7B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,eAAe,QAAO,IAAI,CAE/B;IAEK,YAAY,QAAO,IAAI,CAI5B;IAEK,gBAAgB,QAAO,IAAI,CAOhC;IAEK,cAAc,QAAO,IAAI,CAM9B;IAEK,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAQjD;IAEK,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAa3C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,iBAAiB,GAAI,OAAO,KAAK,KAAG,IAAI,CAO7C;IAEK,cAAc,QAAO,IAAI,CAK9B;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,QAAO,IAAI,CAEhC;IAEK,gBAAgB,GAAI,OAAO,KAAK,KAAG,IAAI,CAE5C;IAEK,oBAAoB,GAAI,OAAO,aAAa,KAAG,IAAI,CAkBxD;IAEF,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAY5B;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/time-picker/time-picker.styles.d.ts.map

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

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

@@ -2,20 +2,123 @@ import { css } from '@melodicdev/core';
 export const timePickerStyles = () => css `
 	:host {
 		display: block;
+
+		/* --- Label --- */
+		--ml-time-picker-label-font-size: var(--ml-text-sm);
+		--ml-time-picker-label-font-weight: var(--ml-font-medium);
+		--ml-time-picker-label-color: var(--ml-color-text-secondary);
+		--ml-time-picker-label-line-height: var(--ml-leading-tight);
+		--ml-time-picker-label-margin-bottom: var(--ml-space-1-5);
+
+		/* --- Required indicator --- */
+		--ml-time-picker-required-color: var(--ml-color-danger);
+
+		/* --- Trigger --- */
+		--ml-time-picker-bg: var(--ml-color-input-bg);
+		--ml-time-picker-border-width: var(--ml-border);
+		--ml-time-picker-border-color: var(--ml-color-border);
+		--ml-time-picker-border-radius: var(--ml-radius-md);
+		--ml-time-picker-color: var(--ml-color-text);
+		--ml-time-picker-font-family: var(--ml-font-sans);
+		--ml-time-picker-font-size: var(--ml-text-sm);
+		--ml-time-picker-padding: var(--ml-space-2) var(--ml-space-3);
+		--ml-time-picker-gap: var(--ml-space-2);
+		--ml-time-picker-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Focus --- */
+		--ml-time-picker-focus-border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
+		--ml-time-picker-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-time-picker-error-border-color: var(--ml-color-danger);
+		--ml-time-picker-error-focus-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		--ml-time-picker-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-time-picker-disabled-opacity: 0.5;
+		--ml-time-picker-disabled-bg: var(--ml-color-surface-sunken);
+
+		/* --- Icon --- */
+		--ml-time-picker-icon-color: var(--ml-color-text-muted);
+
+		/* --- Placeholder --- */
+		--ml-time-picker-placeholder-color: var(--ml-color-text-muted);
+
+		/* --- Popover --- */
+		--ml-time-picker-popover-padding: var(--ml-space-4);
+		--ml-time-picker-popover-border-color: var(--ml-color-border);
+		--ml-time-picker-popover-border-radius: var(--ml-radius-lg);
+		--ml-time-picker-popover-bg: var(--ml-color-surface);
+		--ml-time-picker-popover-shadow: var(--ml-shadow-lg);
+
+		/* --- Spinner --- */
+		--ml-time-picker-spin-btn-size: 2rem;
+		--ml-time-picker-spin-btn-color: var(--ml-color-text-muted);
+		--ml-time-picker-spin-btn-hover-bg: var(--ml-color-surface-raised);
+		--ml-time-picker-spin-btn-hover-color: var(--ml-color-text);
+		--ml-time-picker-spin-btn-border-radius: var(--ml-radius-md);
+		--ml-time-picker-spin-input-width: 3rem;
+		--ml-time-picker-spin-input-height: 2.5rem;
+		--ml-time-picker-spin-input-font-size: var(--ml-text-xl);
+		--ml-time-picker-spin-input-font-weight: var(--ml-font-semibold);
+		--ml-time-picker-spin-input-font-family: var(--ml-font-mono, var(--ml-font-sans));
+		--ml-time-picker-spin-input-color: var(--ml-color-text);
+		--ml-time-picker-spin-input-bg: var(--ml-color-surface-sunken);
+		--ml-time-picker-spin-input-border-radius: var(--ml-radius-md);
+		--ml-time-picker-spin-input-focus-border-color: var(--ml-color-primary);
+		--ml-time-picker-spin-input-focus-bg: var(--ml-color-surface);
+
+		/* --- Separator --- */
+		--ml-time-picker-separator-font-size: var(--ml-text-xl);
+		--ml-time-picker-separator-font-weight: var(--ml-font-semibold);
+		--ml-time-picker-separator-color: var(--ml-color-text-muted);
+
+		/* --- Period button --- */
+		--ml-time-picker-period-bg: var(--ml-color-surface);
+		--ml-time-picker-period-border-color: var(--ml-color-border);
+		--ml-time-picker-period-border-radius: var(--ml-radius-md);
+		--ml-time-picker-period-font-size: var(--ml-text-sm);
+		--ml-time-picker-period-font-weight: var(--ml-font-semibold);
+		--ml-time-picker-period-color: var(--ml-color-text);
+		--ml-time-picker-period-hover-bg: var(--ml-color-surface-raised);
+		--ml-time-picker-period-hover-border-color: var(--ml-color-border-strong);
+
+		/* --- Footer buttons --- */
+		--ml-time-picker-footer-btn-bg: var(--ml-color-surface);
+		--ml-time-picker-footer-btn-border-color: var(--ml-color-border);
+		--ml-time-picker-footer-btn-border-radius: var(--ml-radius-md);
+		--ml-time-picker-footer-btn-font-size: var(--ml-text-sm);
+		--ml-time-picker-footer-btn-font-weight: var(--ml-font-medium);
+		--ml-time-picker-footer-btn-color: var(--ml-color-text);
+		--ml-time-picker-footer-btn-hover-bg: var(--ml-color-surface-raised);
+		--ml-time-picker-footer-btn-hover-border-color: var(--ml-color-border-strong);
+		--ml-time-picker-confirm-bg: var(--ml-color-primary);
+		--ml-time-picker-confirm-border-color: var(--ml-color-primary);
+		--ml-time-picker-confirm-color: var(--ml-color-text-inverse);
+		--ml-time-picker-confirm-hover-bg: var(--ml-color-primary-hover);
+		--ml-time-picker-confirm-hover-border-color: var(--ml-color-primary-hover);
+
+		/* --- Hint --- */
+		--ml-time-picker-hint-color: var(--ml-color-text-muted);
+		--ml-time-picker-hint-font-size: var(--ml-text-sm);
+
+		/* --- Transition --- */
+		--ml-time-picker-transition-duration: var(--ml-duration-150);
+		--ml-time-picker-transition-easing: var(--ml-ease-in-out);
 	}
 
 	/* Label */
 	.ml-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-time-picker-label-font-size);
+		font-weight: var(--ml-time-picker-label-font-weight);
+		color: var(--ml-time-picker-label-color);
+		margin-bottom: var(--ml-time-picker-label-margin-bottom);
+		line-height: var(--ml-time-picker-label-line-height);
 	}
 
 	.ml-time-picker__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-time-picker-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
@@ -23,48 +126,50 @@ export const timePickerStyles = () => css `
 	.ml-time-picker__trigger {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-time-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-time-picker-padding);
+		border: var(--ml-time-picker-border-width) solid var(--ml-time-picker-border-color);
+		border-radius: var(--ml-time-picker-border-radius);
+		background-color: var(--ml-time-picker-bg);
+		color: var(--ml-time-picker-color);
 		cursor: pointer;
-		font-family: var(--ml-font-sans);
+		font-family: var(--ml-time-picker-font-family);
+		font-size: var(--ml-time-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-time-picker-transition-duration) var(--ml-time-picker-transition-easing),
+			box-shadow var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
 	.ml-time-picker__trigger:hover:not(:disabled) {
-		border-color: var(--ml-color-border-strong);
+		border-color: var(--ml-time-picker-hover-border-color);
 	}
 
 	.ml-time-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-time-picker-focus-border-color);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	.ml-time-picker--open .ml-time-picker__trigger {
-		border-color: var(--ml-trigger-focus-border, var(--ml-color-primary));
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-time-picker-focus-border-color);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	.ml-time-picker--error .ml-time-picker__trigger {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-time-picker-error-border-color);
 	}
 
 	.ml-time-picker--error .ml-time-picker__trigger:focus-visible,
 	.ml-time-picker--error.ml-time-picker--open .ml-time-picker__trigger {
-		box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
+		box-shadow: var(--ml-time-picker-error-focus-shadow);
 	}
 
 	.ml-time-picker--disabled .ml-time-picker__trigger {
-		opacity: 0.5;
+		opacity: var(--ml-time-picker-disabled-opacity);
 		cursor: not-allowed;
-		background-color: var(--ml-color-surface-sunken);
+		background-color: var(--ml-time-picker-disabled-bg);
 	}
 
 	/* Sizes */
@@ -86,7 +191,7 @@ export const timePickerStyles = () => css `
 	/* Icon */
 	.ml-time-picker__icon {
 		flex-shrink: 0;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-time-picker-icon-color);
 	}
 
 	/* Value */
@@ -99,7 +204,7 @@ export const timePickerStyles = () => css `
 	}
 
 	.ml-time-picker__value--placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-time-picker-placeholder-color);
 	}
 
 	/* Popover */
@@ -107,19 +212,19 @@ export const timePickerStyles = () => 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-time-picker-popover-padding);
+		border: var(--ml-time-picker-border-width) solid var(--ml-time-picker-popover-border-color);
+		border-radius: var(--ml-time-picker-popover-border-radius);
+		background-color: var(--ml-time-picker-popover-bg);
+		box-shadow: var(--ml-time-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-time-picker-transition-duration) var(--ml-ease-out),
+			transform var(--ml-time-picker-transition-duration) var(--ml-ease-out),
+			display var(--ml-time-picker-transition-duration) allow-discrete;
 	}
 
 	.ml-time-picker__popover:popover-open {
@@ -153,41 +258,41 @@ export const timePickerStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 2rem;
-		height: 2rem;
+		width: var(--ml-time-picker-spin-btn-size);
+		height: var(--ml-time-picker-spin-btn-size);
 		border: none;
-		border-radius: var(--ml-radius-md);
+		border-radius: var(--ml-time-picker-spin-btn-border-radius);
 		background: none;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-time-picker-spin-btn-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);
+			background-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing),
+			color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
 	.ml-time-picker__spin-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		color: var(--ml-color-text);
+		background-color: var(--ml-time-picker-spin-btn-hover-bg);
+		color: var(--ml-time-picker-spin-btn-hover-color);
 	}
 
 	.ml-time-picker__spin-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	.ml-time-picker__spin-input {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 3rem;
-		height: 2.5rem;
-		font-size: var(--ml-text-xl);
-		font-weight: var(--ml-font-semibold);
-		font-family: var(--ml-font-mono, var(--ml-font-sans));
-		color: var(--ml-color-text);
-		background-color: var(--ml-color-surface-sunken);
-		border: var(--ml-border) solid transparent;
-		border-radius: var(--ml-radius-md);
+		width: var(--ml-time-picker-spin-input-width);
+		height: var(--ml-time-picker-spin-input-height);
+		font-size: var(--ml-time-picker-spin-input-font-size);
+		font-weight: var(--ml-time-picker-spin-input-font-weight);
+		font-family: var(--ml-time-picker-spin-input-font-family);
+		color: var(--ml-time-picker-spin-input-color);
+		background-color: var(--ml-time-picker-spin-input-bg);
+		border: var(--ml-time-picker-border-width) solid transparent;
+		border-radius: var(--ml-time-picker-spin-input-border-radius);
 		text-align: center;
 		padding: 0;
 		outline: none;
@@ -201,14 +306,14 @@ export const timePickerStyles = () => css `
 	}
 
 	.ml-time-picker__spin-input:focus {
-		border-color: var(--ml-color-primary);
-		background-color: var(--ml-color-surface);
+		border-color: var(--ml-time-picker-spin-input-focus-border-color);
+		background-color: var(--ml-time-picker-spin-input-focus-bg);
 	}
 
 	.ml-time-picker__separator {
-		font-size: var(--ml-text-xl);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text-muted);
+		font-size: var(--ml-time-picker-separator-font-size);
+		font-weight: var(--ml-time-picker-separator-font-weight);
+		color: var(--ml-time-picker-separator-color);
 		padding: 0 var(--ml-space-0-5);
 		align-self: center;
 	}
@@ -227,27 +332,27 @@ export const timePickerStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		padding: var(--ml-space-1-5) var(--ml-space-2-5);
-		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-semibold);
-		color: var(--ml-color-text);
+		border: var(--ml-time-picker-border-width) solid var(--ml-time-picker-period-border-color);
+		border-radius: var(--ml-time-picker-period-border-radius);
+		background-color: var(--ml-time-picker-period-bg);
+		font-family: var(--ml-time-picker-font-family);
+		font-size: var(--ml-time-picker-period-font-size);
+		font-weight: var(--ml-time-picker-period-font-weight);
+		color: var(--ml-time-picker-period-color);
 		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);
+			background-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing),
+			border-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
 	.ml-time-picker__period-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		border-color: var(--ml-color-border-strong);
+		background-color: var(--ml-time-picker-period-hover-bg);
+		border-color: var(--ml-time-picker-period-hover-border-color);
 	}
 
 	.ml-time-picker__period-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	/* Footer */
@@ -257,62 +362,62 @@ export const timePickerStyles = () => css `
 		align-items: center;
 		padding-top: var(--ml-space-3);
 		margin-top: var(--ml-space-3);
-		border-top: var(--ml-border) solid var(--ml-color-border);
+		border-top: var(--ml-time-picker-border-width) solid var(--ml-time-picker-popover-border-color);
 	}
 
 	.ml-time-picker__now-btn,
 	.ml-time-picker__confirm-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-time-picker-border-width) solid var(--ml-time-picker-footer-btn-border-color);
+		border-radius: var(--ml-time-picker-footer-btn-border-radius);
+		background-color: var(--ml-time-picker-footer-btn-bg);
+		font-family: var(--ml-time-picker-font-family);
+		font-size: var(--ml-time-picker-footer-btn-font-size);
+		font-weight: var(--ml-time-picker-footer-btn-font-weight);
+		color: var(--ml-time-picker-footer-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);
+			background-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing),
+			border-color var(--ml-time-picker-transition-duration) var(--ml-time-picker-transition-easing);
 	}
 
 	.ml-time-picker__now-btn:hover,
 	.ml-time-picker__confirm-btn:hover {
-		background-color: var(--ml-color-surface-raised);
-		border-color: var(--ml-color-border-strong);
+		background-color: var(--ml-time-picker-footer-btn-hover-bg);
+		border-color: var(--ml-time-picker-footer-btn-hover-border-color);
 	}
 
 	.ml-time-picker__now-btn:focus-visible,
 	.ml-time-picker__confirm-btn:focus-visible {
 		outline: none;
-		box-shadow: var(--ml-shadow-focus-ring);
+		box-shadow: var(--ml-time-picker-focus-shadow);
 	}
 
 	.ml-time-picker__confirm-btn {
-		background-color: var(--ml-color-primary);
-		border-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-time-picker-confirm-bg);
+		border-color: var(--ml-time-picker-confirm-border-color);
+		color: var(--ml-time-picker-confirm-color);
 	}
 
 	.ml-time-picker__confirm-btn:hover {
-		background-color: var(--ml-color-primary-hover);
-		border-color: var(--ml-color-primary-hover);
+		background-color: var(--ml-time-picker-confirm-hover-bg);
+		border-color: var(--ml-time-picker-confirm-hover-border-color);
 	}
 
 	/* Hint / Error */
 	.ml-time-picker__hint,
 	.ml-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-time-picker-label-margin-bottom);
+		font-size: var(--ml-time-picker-hint-font-size);
+		line-height: var(--ml-time-picker-label-line-height);
 	}
 
 	.ml-time-picker__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-time-picker-hint-color);
 	}
 
 	.ml-time-picker__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-time-picker-error-color);
 	}
 `;

package/lib/components/forms/toggle/toggle.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/toggle/toggle.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAClD,UAAU,EAAG,WAAW,CAAC;IAEzB,mBAAmB;IACnB,KAAK,SAAM;IAEX,gBAAgB;IAChB,IAAI,SAAM;IAEV,kBAAkB;IAClB,IAAI,EAAE,IAAI,CAAQ;IAElB,oBAAoB;IACpB,OAAO,UAAS;IAEhB,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAgBjC;CACF"}
+{"version":3,"file":"toggle.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/toggle/toggle.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,eAAgB,YAAW,WAAW;IAC3C,UAAU,EAAG,WAAW,CAAC;IAEhC,mBAAmB;IACZ,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,kBAAkB;IACX,IAAI,EAAE,IAAI,CAAQ;IAEzB,oBAAoB;IACb,OAAO,UAAS;IAEvB,qBAAqB;IACd,QAAQ,UAAS;IAEjB,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAgBxC;CACF"}

package/lib/components/forms/toggle/toggle.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/toggle/toggle.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDAiIxB,CAAC"}
+{"version":3,"file":"toggle.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/toggle/toggle.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA+JxB,CAAC"}