@melodicdev/components 1.3.0 → 1.5.0

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

@@ -12,13 +12,13 @@ export declare class FileUploadComponent implements IElementRef {
     error: string;
     icon: string;
     dragOver: boolean;
-    _dragCounter: number;
+    private _dragCounter;
     handleClick: () => void;
     handleFileInput: (event: Event) => void;
     handleDragEnter: (event: DragEvent) => void;
     handleDragOver: (event: DragEvent) => void;
     handleDragLeave: (event: DragEvent) => void;
     handleDrop: (event: DragEvent) => void;
-    _processFiles(files: File[]): void;
+    processFiles(files: File[]): void;
 }
 //# sourceMappingURL=file-upload.component.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKpD,qBAMa,mBAAoB,YAAW,WAAW;IACtD,UAAU,EAAG,WAAW,CAAC;IAEzB,MAAM,SAAM;IACZ,QAAQ,UAAS;IACjB,OAAO,SAAK;IACZ,QAAQ,SAAK;IACb,QAAQ,UAAS;IACjB,KAAK,SAAqB;IAC1B,QAAQ,SAAsB;IAC9B,IAAI,SAAM;IACV,KAAK,SAAM;IACX,IAAI,SAAoB;IAExB,QAAQ,UAAS;IACjB,YAAY,SAAK;IAEjB,WAAW,QAAO,IAAI,CAIpB;IAEF,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAKpC;IAEF,eAAe,GAAI,OAAO,SAAS,KAAG,IAAI,CAQxC;IAEF,cAAc,GAAI,OAAO,SAAS,KAAG,IAAI,CAGvC;IAEF,eAAe,GAAI,OAAO,SAAS,KAAG,IAAI,CAOxC;IAEF,UAAU,GAAI,OAAO,SAAS,KAAG,IAAI,CASnC;IAEF,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;CAwDlC"}
+{"version":3,"file":"file-upload.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/file-upload/file-upload.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAKpD,qBAMa,mBAAoB,YAAW,WAAW;IAC/C,UAAU,EAAG,WAAW,CAAC;IAEzB,MAAM,SAAM;IACZ,QAAQ,UAAS;IACjB,OAAO,SAAK;IACZ,QAAQ,SAAK;IACb,QAAQ,UAAS;IACjB,KAAK,SAAqB;IAC1B,QAAQ,SAAsB;IAC9B,IAAI,SAAM;IACV,KAAK,SAAM;IACX,IAAI,SAAoB;IAExB,QAAQ,UAAS;IACxB,OAAO,CAAC,YAAY,CAAK;IAElB,WAAW,QAAO,IAAI,CAI3B;IAEK,eAAe,GAAI,OAAO,KAAK,KAAG,IAAI,CAK3C;IAEK,eAAe,GAAI,OAAO,SAAS,KAAG,IAAI,CAQ/C;IAEK,cAAc,GAAI,OAAO,SAAS,KAAG,IAAI,CAG9C;IAEK,eAAe,GAAI,OAAO,SAAS,KAAG,IAAI,CAO/C;IAEK,UAAU,GAAI,OAAO,SAAS,KAAG,IAAI,CAS1C;IAEK,YAAY,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI;CAwDxC"}

package/lib/components/forms/file-upload/file-upload.component.js

@@ -31,7 +31,7 @@ let FileUploadComponent = class FileUploadComponent {
             const input = event.target;
             if (!input.files?.length)
                 return;
-            this._processFiles(Array.from(input.files));
+            this.processFiles(Array.from(input.files));
             input.value = '';
         };
         this.handleDragEnter = (event) => {
@@ -66,10 +66,10 @@ let FileUploadComponent = class FileUploadComponent {
             const files = event.dataTransfer?.files;
             if (!files?.length)
                 return;
-            this._processFiles(Array.from(files));
+            this.processFiles(Array.from(files));
         };
     }
-    _processFiles(files) {
+    processFiles(files) {
         const errors = [];
         let validFiles = files;
         if (this.accept) {

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

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

package/lib/components/forms/file-upload/file-upload.styles.js

@@ -3,6 +3,59 @@ export const fileUploadStyles = () => css `
 	:host {
 		display: block;
 		width: 100%;
+
+		/* --- Dropzone --- */
+		--ml-file-upload-dropzone-padding: var(--ml-space-6);
+		--ml-file-upload-dropzone-border-width: 2px;
+		--ml-file-upload-dropzone-border-color: var(--ml-color-border);
+		--ml-file-upload-dropzone-border-radius: var(--ml-radius-md);
+		--ml-file-upload-dropzone-bg: var(--ml-color-surface);
+		--ml-file-upload-dropzone-gap: var(--ml-space-3);
+		--ml-file-upload-dropzone-hover-border-color: var(--ml-color-primary);
+		--ml-file-upload-dropzone-hover-bg: var(--ml-color-surface-sunken);
+
+		/* --- Focus --- */
+		--ml-file-upload-focus-border-color: var(--ml-color-primary);
+		--ml-file-upload-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Icon --- */
+		--ml-file-upload-icon-size: 40px;
+		--ml-file-upload-icon-border-radius: var(--ml-radius-full);
+		--ml-file-upload-icon-bg: var(--ml-color-surface-sunken);
+		--ml-file-upload-icon-color: var(--ml-color-text-muted);
+
+		/* --- Label --- */
+		--ml-file-upload-label-font-size: var(--ml-text-sm);
+		--ml-file-upload-label-font-weight: var(--ml-font-semibold);
+		--ml-file-upload-label-color: var(--ml-color-primary);
+		--ml-file-upload-label-line-height: var(--ml-leading-tight);
+
+		/* --- Sublabel --- */
+		--ml-file-upload-sublabel-font-size: var(--ml-text-sm);
+		--ml-file-upload-sublabel-color: var(--ml-color-text-muted);
+		--ml-file-upload-sublabel-line-height: var(--ml-leading-tight);
+
+		/* --- Hint --- */
+		--ml-file-upload-hint-font-size: var(--ml-text-sm);
+		--ml-file-upload-hint-color: var(--ml-color-text-muted);
+
+		/* --- Error --- */
+		--ml-file-upload-error-font-size: var(--ml-text-sm);
+		--ml-file-upload-error-color: var(--ml-color-danger);
+		--ml-file-upload-error-border-color: var(--ml-color-danger);
+
+		/* --- Drag over --- */
+		--ml-file-upload-drag-icon-color: var(--ml-color-primary);
+		--ml-file-upload-drag-icon-bg: var(--ml-color-primary-subtle, rgba(59, 130, 246, 0.1));
+
+		/* --- Disabled --- */
+		--ml-file-upload-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-file-upload-disabled-border-color: var(--ml-color-border);
+		--ml-file-upload-disabled-opacity: 0.6;
+
+		/* --- Transition --- */
+		--ml-file-upload-transition-duration: var(--ml-duration-150);
+		--ml-file-upload-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-file-upload {
@@ -16,37 +69,37 @@ export const fileUploadStyles = () => css `
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		gap: var(--ml-space-3);
-		padding: var(--ml-space-6) var(--ml-space-6);
-		border: 2px dashed var(--ml-color-border);
-		border-radius: var(--ml-radius-md);
-		background-color: var(--ml-color-surface);
+		gap: var(--ml-file-upload-dropzone-gap);
+		padding: var(--ml-file-upload-dropzone-padding);
+		border: var(--ml-file-upload-dropzone-border-width) dashed var(--ml-file-upload-dropzone-border-color);
+		border-radius: var(--ml-file-upload-dropzone-border-radius);
+		background-color: var(--ml-file-upload-dropzone-bg);
 		cursor: pointer;
 		transition:
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			background-color var(--ml-duration-150) var(--ml-ease-in-out);
+			border-color var(--ml-file-upload-transition-duration) var(--ml-file-upload-transition-easing),
+			background-color var(--ml-file-upload-transition-duration) var(--ml-file-upload-transition-easing);
 	}
 
 	.ml-file-upload__dropzone:hover {
-		border-color: var(--ml-color-primary);
-		background-color: var(--ml-color-surface-sunken);
+		border-color: var(--ml-file-upload-dropzone-hover-border-color);
+		background-color: var(--ml-file-upload-dropzone-hover-bg);
 	}
 
 	.ml-file-upload__dropzone:focus-visible {
 		outline: none;
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-file-upload-focus-border-color);
+		box-shadow: var(--ml-file-upload-focus-shadow);
 	}
 
 	.ml-file-upload__icon {
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 40px;
-		height: 40px;
-		border-radius: var(--ml-radius-full);
-		background-color: var(--ml-color-surface-sunken);
-		color: var(--ml-color-text-muted);
+		width: var(--ml-file-upload-icon-size);
+		height: var(--ml-file-upload-icon-size);
+		border-radius: var(--ml-file-upload-icon-border-radius);
+		background-color: var(--ml-file-upload-icon-bg);
+		color: var(--ml-file-upload-icon-color);
 	}
 
 	.ml-file-upload__text {
@@ -58,16 +111,16 @@ export const fileUploadStyles = () => css `
 	}
 
 	.ml-file-upload__label {
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-primary);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-file-upload-label-font-size);
+		font-weight: var(--ml-file-upload-label-font-weight);
+		color: var(--ml-file-upload-label-color);
+		line-height: var(--ml-file-upload-label-line-height);
 	}
 
 	.ml-file-upload__sublabel {
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-file-upload-sublabel-font-size);
+		color: var(--ml-file-upload-sublabel-color);
+		line-height: var(--ml-file-upload-sublabel-line-height);
 	}
 
 	.ml-file-upload__input {
@@ -83,43 +136,43 @@ export const fileUploadStyles = () => css `
 	}
 
 	.ml-file-upload__hint {
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-muted);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-file-upload-hint-font-size);
+		color: var(--ml-file-upload-hint-color);
+		line-height: var(--ml-file-upload-label-line-height);
 	}
 
 	.ml-file-upload__error {
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-danger);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-file-upload-error-font-size);
+		color: var(--ml-file-upload-error-color);
+		line-height: var(--ml-file-upload-label-line-height);
 	}
 
 	/* Drag over state */
 	.ml-file-upload--drag-over .ml-file-upload__dropzone {
-		border-color: var(--ml-color-primary);
-		background-color: var(--ml-color-surface-sunken);
+		border-color: var(--ml-file-upload-dropzone-hover-border-color);
+		background-color: var(--ml-file-upload-dropzone-hover-bg);
 	}
 
 	.ml-file-upload--drag-over .ml-file-upload__icon {
-		color: var(--ml-color-primary);
-		background-color: var(--ml-color-primary-subtle, rgba(59, 130, 246, 0.1));
+		color: var(--ml-file-upload-drag-icon-color);
+		background-color: var(--ml-file-upload-drag-icon-bg);
 	}
 
 	/* Error state */
 	.ml-file-upload--error .ml-file-upload__dropzone {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-file-upload-error-border-color);
 	}
 
 	/* Disabled state */
 	.ml-file-upload--disabled .ml-file-upload__dropzone {
-		background-color: var(--ml-color-input-disabled-bg);
-		border-color: var(--ml-color-border);
+		background-color: var(--ml-file-upload-disabled-bg);
+		border-color: var(--ml-file-upload-disabled-border-color);
 		cursor: not-allowed;
-		opacity: 0.6;
+		opacity: var(--ml-file-upload-disabled-opacity);
 	}
 
 	.ml-file-upload--disabled .ml-file-upload__dropzone:hover {
-		border-color: var(--ml-color-border);
-		background-color: var(--ml-color-input-disabled-bg);
+		border-color: var(--ml-file-upload-disabled-border-color);
+		background-color: var(--ml-file-upload-disabled-bg);
 	}
 `;

package/lib/components/forms/form-field/form-field.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAIlE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAMa,kBAAmB,YAAW,WAAW,EAAE,QAAQ;IAC/D,UAAU,EAAG,WAAW,CAAC;IAEzB,iBAAiB;IACjB,KAAK,SAAM;IAEX,wCAAwC;IACxC,IAAI,SAAM;IAEV,iDAAiD;IACjD,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,CAAQ;IAElB,yBAAyB;IACzB,WAAW,EAAE,oBAAoB,CAAc;IAE/C,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,+BAA+B;IAC/B,QAAQ,UAAS;IAEjB,gDAAgD;IAChD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6D;IAEtF,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,MAAM,IAAI,MAAM,CAEnB;IAED,IAAI,OAAO,IAAI,MAAM,CAEpB;IAED,IAAI,WAAW,IAAI,MAAM,CAIxB;IAED,QAAQ,IAAI,IAAI;IAIhB,gBAAgB,QAAO,IAAI,CAEzB;IAEF,OAAO,CAAC,qBAAqB;IAqC7B,OAAO,CAAC,eAAe;CAqCvB"}
+{"version":3,"file":"form-field.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAIlE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBAMa,kBAAmB,YAAW,WAAW,EAAE,QAAQ;IACxD,UAAU,EAAG,WAAW,CAAC;IAEhC,iBAAiB;IACV,KAAK,SAAM;IAElB,wCAAwC;IACjC,IAAI,SAAM;IAEjB,iDAAiD;IAC1C,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,CAAQ;IAEzB,yBAAyB;IAClB,WAAW,EAAE,oBAAoB,CAAc;IAEtD,qBAAqB;IACd,QAAQ,UAAS;IAExB,+BAA+B;IACxB,QAAQ,UAAS;IAExB,gDAAgD;IAChD,OAAO,CAAC,QAAQ,CAAC,QAAQ,CAA6D;IAEtF,IAAW,OAAO,IAAI,MAAM,CAE3B;IAED,IAAW,MAAM,IAAI,MAAM,CAE1B;IAED,IAAW,OAAO,IAAI,MAAM,CAE3B;IAED,IAAW,WAAW,IAAI,MAAM,CAI/B;IAEM,QAAQ,IAAI,IAAI;IAIhB,gBAAgB,QAAO,IAAI,CAEhC;IAEF,OAAO,CAAC,qBAAqB;IAqC7B,OAAO,CAAC,eAAe;CAqCvB"}

package/lib/components/forms/form-field/form-field.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,iDA6K3B,CAAC"}
+{"version":3,"file":"form-field.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form-field/form-field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,iDAwN3B,CAAC"}

package/lib/components/forms/form-field/form-field.styles.js

@@ -3,6 +3,49 @@ export const formFieldStyles = () => css `
 	:host {
 		display: block;
 		width: 100%;
+
+		/* --- Label --- */
+		--ml-form-field-label-font-size: var(--ml-text-sm);
+		--ml-form-field-label-font-weight: var(--ml-font-medium);
+		--ml-form-field-label-color: var(--ml-color-text-secondary);
+		--ml-form-field-label-line-height: var(--ml-leading-tight);
+
+		/* --- Required indicator --- */
+		--ml-form-field-required-color: var(--ml-color-danger);
+
+		/* --- Hint / Error --- */
+		--ml-form-field-hint-font-size: var(--ml-text-sm);
+		--ml-form-field-hint-color: var(--ml-color-text-muted);
+		--ml-form-field-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-form-field-disabled-label-color: var(--ml-color-text-muted);
+
+		/* --- Slotted input --- */
+		--ml-form-field-input-padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		--ml-form-field-input-font-size: var(--ml-text-sm);
+		--ml-form-field-input-font-family: var(--ml-font-sans);
+		--ml-form-field-input-color: var(--ml-color-text);
+		--ml-form-field-input-bg: var(--ml-color-input-bg);
+		--ml-form-field-input-border-width: var(--ml-border);
+		--ml-form-field-input-border-color: var(--ml-color-border-strong);
+		--ml-form-field-input-border-radius: var(--ml-radius);
+		--ml-form-field-input-shadow: var(--ml-shadow-xs);
+		--ml-form-field-input-focus-border-color: var(--ml-color-primary);
+		--ml-form-field-input-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-form-field-input-placeholder-color: var(--ml-color-text-muted);
+		--ml-form-field-input-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-form-field-input-disabled-color: var(--ml-color-text-muted);
+		--ml-form-field-input-error-border-color: var(--ml-color-danger);
+		--ml-form-field-input-error-focus-shadow: var(--ml-shadow-ring-error);
+
+		/* --- Horizontal layout --- */
+		--ml-form-field-horizontal-gap: var(--ml-space-4);
+		--ml-form-field-horizontal-label-padding-top: var(--ml-space-2-5);
+
+		/* --- Transition --- */
+		--ml-form-field-transition-duration: var(--ml-duration-150);
+		--ml-form-field-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-form-field {
@@ -16,14 +59,14 @@ export const formFieldStyles = () => css `
 		display: grid;
 		grid-template-columns: minmax(100px, auto) 1fr;
 		grid-template-rows: auto auto;
-		gap: var(--ml-space-1-5) var(--ml-space-4);
+		gap: var(--ml-space-1-5) var(--ml-form-field-horizontal-gap);
 		align-items: start;
 	}
 
 	.ml-form-field--horizontal .ml-form-field__label {
 		grid-column: 1;
 		grid-row: 1;
-		padding-top: var(--ml-space-2-5);
+		padding-top: var(--ml-form-field-horizontal-label-padding-top);
 		text-align: right;
 	}
 
@@ -40,14 +83,14 @@ export const formFieldStyles = () => css `
 
 	/* Label */
 	.ml-form-field__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-form-field-label-font-size);
+		font-weight: var(--ml-form-field-label-font-weight);
+		color: var(--ml-form-field-label-color);
+		line-height: var(--ml-form-field-label-line-height);
 	}
 
 	.ml-form-field__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-form-field-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
@@ -60,21 +103,21 @@ export const formFieldStyles = () => css `
 	/* Hint and error messages */
 	.ml-form-field__hint,
 	.ml-form-field__error {
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-form-field-hint-font-size);
+		line-height: var(--ml-form-field-label-line-height);
 	}
 
 	.ml-form-field__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-form-field-hint-color);
 	}
 
 	.ml-form-field__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-form-field-error-color);
 	}
 
 	/* Disabled state */
 	.ml-form-field--disabled .ml-form-field__label {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-form-field-disabled-label-color);
 	}
 
 	/* Size variants - Labels */
@@ -101,52 +144,52 @@ export const formFieldStyles = () => css `
 	::slotted(select),
 	::slotted(textarea) {
 		width: 100%;
-		padding: var(--ml-space-2-5) var(--ml-space-3-5);
-		font-size: var(--ml-text-sm);
-		font-family: var(--ml-font-sans);
-		color: var(--ml-color-text);
-		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);
+		padding: var(--ml-form-field-input-padding);
+		font-size: var(--ml-form-field-input-font-size);
+		font-family: var(--ml-form-field-input-font-family);
+		color: var(--ml-form-field-input-color);
+		background-color: var(--ml-form-field-input-bg);
+		border: var(--ml-form-field-input-border-width) solid var(--ml-form-field-input-border-color);
+		border-radius: var(--ml-form-field-input-border-radius);
+		box-shadow: var(--ml-form-field-input-shadow);
 		box-sizing: border-box;
 		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-form-field-transition-duration) var(--ml-form-field-transition-easing),
+			box-shadow var(--ml-form-field-transition-duration) var(--ml-form-field-transition-easing);
 	}
 
 	::slotted(input:focus),
 	::slotted(select:focus),
 	::slotted(textarea:focus) {
 		outline: none;
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-form-field-input-focus-border-color);
+		box-shadow: var(--ml-form-field-input-focus-shadow);
 	}
 
 	::slotted(input::placeholder),
 	::slotted(textarea::placeholder) {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-form-field-input-placeholder-color);
 	}
 
 	::slotted(input:disabled),
 	::slotted(select:disabled),
 	::slotted(textarea:disabled) {
-		background-color: var(--ml-color-input-disabled-bg);
+		background-color: var(--ml-form-field-input-disabled-bg);
 		cursor: not-allowed;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-form-field-input-disabled-color);
 	}
 
 	/* Error state for slotted inputs */
 	.ml-form-field--error ::slotted(input),
 	.ml-form-field--error ::slotted(select),
 	.ml-form-field--error ::slotted(textarea) {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-form-field-input-error-border-color);
 	}
 
 	.ml-form-field--error ::slotted(input:focus),
 	.ml-form-field--error ::slotted(select:focus),
 	.ml-form-field--error ::slotted(textarea:focus) {
-		box-shadow: var(--ml-shadow-ring-error);
+		box-shadow: var(--ml-form-field-input-error-focus-shadow);
 	}
 
 	/* Size variants for slotted inputs */

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

@@ -1 +1 @@
-{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,MAAM;IACzD,UAAU,EAAG,WAAW,CAAC;IAEzB,iBAAiB;IACjB,IAAI,EAAE,SAAS,CAAU;IAEzB,oBAAoB;IACpB,KAAK,SAAM;IAEX,uBAAuB;IACvB,WAAW,SAAM;IAEjB,iBAAiB;IACjB,KAAK,SAAM;IAEX,kCAAkC;IAClC,IAAI,SAAM;IAEV,iDAAiD;IACjD,KAAK,SAAM;IAEX,iBAAiB;IACjB,IAAI,EAAE,IAAI,CAAQ;IAElB,wBAAwB;IACxB,QAAQ,UAAS;IAEjB,0BAA0B;IAC1B,QAAQ,UAAS;IAEjB,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,6BAA6B;IAC7B,YAAY,SAAS;IAErB,2BAA2B;IAC3B,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAOd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWhC;IAEF,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWjC;IAEF,WAAW,QAAO,IAAI,CAQpB;IAEF,UAAU,QAAO,IAAI,CAQnB;CACF"}
+{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAIlD;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBAMa,cAAe,YAAW,WAAW,EAAE,MAAM;IAClD,UAAU,EAAG,WAAW,CAAC;IAEhC,iBAAiB;IACV,IAAI,EAAE,SAAS,CAAU;IAEhC,oBAAoB;IACb,KAAK,SAAM;IAElB,uBAAuB;IAChB,WAAW,SAAM;IAExB,iBAAiB;IACV,KAAK,SAAM;IAElB,kCAAkC;IAC3B,IAAI,SAAM;IAEjB,iDAAiD;IAC1C,KAAK,SAAM;IAElB,iBAAiB;IACV,IAAI,EAAE,IAAI,CAAQ;IAEzB,wBAAwB;IACjB,QAAQ,UAAS;IAExB,0BAA0B;IACnB,QAAQ,UAAS;IAExB,uBAAuB;IAChB,QAAQ,UAAS;IAExB,6BAA6B;IACtB,YAAY,SAAS;IAE5B,2BAA2B;IACpB,OAAO,UAAS;IAEhB,MAAM,IAAI,IAAI;IAOd,WAAW,GAAI,OAAO,KAAK,KAAG,IAAI,CAWvC;IAEK,YAAY,GAAI,OAAO,KAAK,KAAG,IAAI,CAWxC;IAEK,WAAW,QAAO,IAAI,CAQ3B;IAEK,UAAU,QAAO,IAAI,CAQ1B;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAiIvB,CAAC"}
+{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAqLvB,CAAC"}

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

@@ -4,6 +4,56 @@ export const inputStyles = () => css `
 		display: block;
 		width: 100%;
 		min-width: 0;
+
+		/* --- Label --- */
+		--ml-input-label-font-size: var(--ml-text-sm);
+		--ml-input-label-font-weight: var(--ml-font-medium);
+		--ml-input-label-color: var(--ml-color-text-secondary);
+		--ml-input-label-line-height: var(--ml-leading-tight);
+
+		/* --- Required indicator --- */
+		--ml-input-required-color: var(--ml-color-danger);
+
+		/* --- Wrapper --- */
+		--ml-input-bg: var(--ml-color-input-bg);
+		--ml-input-border-width: var(--ml-border);
+		--ml-input-border-color: var(--ml-color-border-strong);
+		--ml-input-border-radius: var(--ml-radius);
+		--ml-input-shadow: var(--ml-shadow-xs);
+		--ml-input-hover-border-color: var(--ml-color-border);
+		--ml-input-padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		--ml-input-gap: var(--ml-space-2);
+
+		/* --- Field --- */
+		--ml-input-color: var(--ml-color-text);
+		--ml-input-font-family: var(--ml-font-sans);
+		--ml-input-font-size: var(--ml-text-sm);
+		--ml-input-line-height: var(--ml-leading-normal);
+		--ml-input-placeholder-color: var(--ml-color-text-muted);
+
+		/* --- Focus --- */
+		--ml-input-focus-border-color: var(--ml-color-primary);
+		--ml-input-focus-shadow: var(--ml-shadow-focus-ring);
+
+		/* --- Error --- */
+		--ml-input-error-border-color: var(--ml-color-danger);
+		--ml-input-error-focus-shadow: var(--ml-shadow-ring-error);
+		--ml-input-error-color: var(--ml-color-danger);
+
+		/* --- Disabled --- */
+		--ml-input-disabled-bg: var(--ml-color-input-disabled-bg);
+		--ml-input-disabled-color: var(--ml-color-text-muted);
+
+		/* --- Hint --- */
+		--ml-input-hint-color: var(--ml-color-text-muted);
+		--ml-input-hint-font-size: var(--ml-text-sm);
+
+		/* --- Prefix / Suffix --- */
+		--ml-input-addon-color: var(--ml-color-text-muted);
+
+		/* --- Transition --- */
+		--ml-input-transition-duration: var(--ml-duration-150);
+		--ml-input-transition-easing: var(--ml-ease-in-out);
 	}
 
 	.ml-input {
@@ -13,32 +63,33 @@ export const inputStyles = () => css `
 	}
 
 	.ml-input__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-input-label-font-size);
+		font-weight: var(--ml-input-label-font-weight);
+		color: var(--ml-input-label-color);
+		line-height: var(--ml-input-label-line-height);
 	}
 
 	.ml-input__required {
-		color: var(--ml-color-danger);
+		color: var(--ml-input-required-color);
 		margin-left: var(--ml-space-0-5);
 	}
 
 	.ml-input__wrapper {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		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);
+		gap: var(--ml-input-gap);
+		padding: var(--ml-input-padding);
+		background-color: var(--ml-input-bg);
+		border: var(--ml-input-border-width) solid var(--ml-input-border-color);
+		border-radius: var(--ml-input-border-radius);
+		box-shadow: var(--ml-input-shadow);
 		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-input-transition-duration) var(--ml-input-transition-easing),
+			box-shadow var(--ml-input-transition-duration) var(--ml-input-transition-easing);
 	}
 
 	.ml-input__wrapper:hover:not(.ml-input--disabled .ml-input__wrapper) {
-		border-color: var(--ml-color-border);
+		border-color: var(--ml-input-hover-border-color);
 	}
 
 	.ml-input__field {
@@ -46,10 +97,10 @@ export const inputStyles = () => css `
 		min-width: 0;
 		border: none;
 		background: transparent;
-		color: var(--ml-color-text);
-		font-family: var(--ml-font-sans);
-		font-size: inherit;
-		line-height: var(--ml-leading-normal);
+		color: var(--ml-input-color);
+		font-family: var(--ml-input-font-family);
+		font-size: var(--ml-input-font-size);
+		line-height: var(--ml-input-line-height);
 	}
 
 	.ml-input__field:focus {
@@ -57,46 +108,47 @@ export const inputStyles = () => css `
 	}
 
 	.ml-input__field::placeholder {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-input-placeholder-color);
 	}
 
 	.ml-input__field:disabled {
 		cursor: not-allowed;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-input-disabled-color);
 	}
 
 	.ml-input__hint,
 	.ml-input__error {
-		font-size: var(--ml-text-sm);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-input-hint-font-size);
+		line-height: var(--ml-input-label-line-height);
 	}
 
 	.ml-input__hint {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-input-hint-color);
 	}
 
 	.ml-input__error {
-		color: var(--ml-color-danger);
+		color: var(--ml-input-error-color);
 	}
 
 	.ml-input--focused .ml-input__wrapper {
-		border-color: var(--ml-color-primary);
-		box-shadow: var(--ml-shadow-focus-ring);
+		border-color: var(--ml-input-focus-border-color);
+		box-shadow: var(--ml-input-focus-shadow);
 	}
 
 	.ml-input--error .ml-input__wrapper {
-		border-color: var(--ml-color-danger);
+		border-color: var(--ml-input-error-border-color);
 	}
 
 	.ml-input--error.ml-input--focused .ml-input__wrapper {
-		box-shadow: var(--ml-shadow-ring-error);
+		box-shadow: var(--ml-input-error-focus-shadow);
 	}
 
 	.ml-input--disabled .ml-input__wrapper {
-		background-color: var(--ml-color-input-disabled-bg);
+		background-color: var(--ml-input-disabled-bg);
 		cursor: not-allowed;
 	}
 
+	/* --- Size variants --- */
 	.ml-input--sm .ml-input__wrapper {
 		padding: var(--ml-space-2) var(--ml-space-3);
 	}
@@ -125,7 +177,7 @@ export const inputStyles = () => css `
 	::slotted([slot='suffix']) {
 		display: flex;
 		align-items: center;
-		color: var(--ml-color-text-muted);
+		color: var(--ml-input-addon-color);
 		flex-shrink: 0;
 	}
 `;

package/lib/components/forms/radio/radio-group.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/radio-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D;;;;;;;;;;;;GAYG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,MAAM;IAC9D,UAAU,EAAG,WAAW,CAAC;IAEzB,kBAAkB;IAClB,KAAK,SAAM;IAEX,sBAAsB;IACtB,IAAI,SAAM;IAEV,6BAA6B;IAC7B,KAAK,SAAM;IAEX,gBAAgB;IAChB,IAAI,SAAM;IAEV,oBAAoB;IACpB,KAAK,SAAM;IAEX,yBAAyB;IACzB,WAAW,EAAE,WAAW,CAAc;IAEtC,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,MAAM,IAAI,IAAI;IAQd,OAAO,CAAC,iBAAiB,CAmBvB;IAEF,OAAO,CAAC,iBAAiB;CAuBzB"}
+{"version":3,"file":"radio-group.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/radio-group.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAI3D;;;;;;;;;;;;GAYG;AACH,qBAMa,mBAAoB,YAAW,WAAW,EAAE,MAAM;IACvD,UAAU,EAAG,WAAW,CAAC;IAEhC,kBAAkB;IACX,KAAK,SAAM;IAElB,sBAAsB;IACf,IAAI,SAAM;IAEjB,6BAA6B;IACtB,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,oBAAoB;IACb,KAAK,SAAM;IAElB,yBAAyB;IAClB,WAAW,EAAE,WAAW,CAAc;IAE7C,qBAAqB;IACd,QAAQ,UAAS;IAExB,qBAAqB;IACd,QAAQ,UAAS;IAEjB,MAAM,IAAI,IAAI;IAQrB,OAAO,CAAC,iBAAiB,CAmBvB;IAEF,OAAO,CAAC,iBAAiB;CAuBzB"}

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

@@ -1 +1 @@
-{"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/radio.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;GAUG;AACH,qBAMa,cAAe,YAAW,WAAW;IACjD,UAAU,EAAG,WAAW,CAAC;IAEzB,uBAAuB;IACvB,IAAI,SAAM;IAEV,kBAAkB;IAClB,KAAK,SAAM;IAEX,kBAAkB;IAClB,KAAK,SAAM;IAEX,gBAAgB;IAChB,IAAI,SAAM;IAEV,iBAAiB;IACjB,IAAI,EAAE,IAAI,CAAQ;IAElB,oBAAoB;IACpB,OAAO,UAAS;IAEhB,qBAAqB;IACrB,QAAQ,UAAS;IAEjB,YAAY,QAAO,IAAI,CAUrB;CACF"}
+{"version":3,"file":"radio.component.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/radio/radio.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAIpD;;;;;;;;;;GAUG;AACH,qBAMa,cAAe,YAAW,WAAW;IAC1C,UAAU,EAAG,WAAW,CAAC;IAEhC,uBAAuB;IAChB,IAAI,SAAM;IAEjB,kBAAkB;IACX,KAAK,SAAM;IAElB,kBAAkB;IACX,KAAK,SAAM;IAElB,gBAAgB;IACT,IAAI,SAAM;IAEjB,iBAAiB;IACV,IAAI,EAAE,IAAI,CAAQ;IAEzB,oBAAoB;IACb,OAAO,UAAS;IAEvB,qBAAqB;IACd,QAAQ,UAAS;IAEjB,YAAY,QAAO,IAAI,CAU5B;CACF"}