@melodicdev/components 1.5.2 → 1.5.4

package/assets/melodic-components.min.js

@@ -4781,9 +4781,9 @@ const pl = () => w`
 		/* --- 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-color: var(--ml-color-border);
 		--ml-input-border-radius: var(--ml-radius);
-		--ml-input-shadow: var(--ml-shadow-xs);
+		--ml-input-shadow: none;
 		--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);
@@ -5059,9 +5059,9 @@ const ul = () => w`
 		/* --- 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-color: var(--ml-color-border);
 		--ml-textarea-border-radius: var(--ml-radius);
-		--ml-textarea-shadow: var(--ml-shadow-xs);
+		--ml-textarea-shadow: none;
 		--ml-textarea-color: var(--ml-color-text);
 		--ml-textarea-font-family: var(--ml-font-sans);
 		--ml-textarea-font-size: var(--ml-text-sm);
@@ -6565,7 +6565,7 @@ const Dl = () => w`
 		--ml-select-required-color: var(--ml-color-danger);
 
 		/* --- Trigger --- */
-		--ml-select-bg: var(--ml-color-surface);
+		--ml-select-bg: var(--ml-color-input-bg);
 		--ml-select-border-width: var(--ml-border);
 		--ml-select-border-color: var(--ml-color-border);
 		--ml-select-border-radius: var(--ml-radius);
@@ -8325,11 +8325,11 @@ const Bl = () => w`
 		--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-border-radius: var(--ml-radius);
 		--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-padding: var(--ml-space-2-5) var(--ml-space-3-5);
 		--ml-date-picker-gap: var(--ml-space-2);
 		--ml-date-picker-hover-border-color: var(--ml-color-border-strong);
 
@@ -8339,12 +8339,12 @@ const Bl = () => w`
 
 		/* --- 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-focus-shadow: var(--ml-shadow-ring-error);
 		--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);
+		--ml-date-picker-disabled-bg: var(--ml-color-input-disabled-bg);
 
 		/* --- Icon --- */
 		--ml-date-picker-icon-color: var(--ml-color-text-muted);
@@ -8435,17 +8435,17 @@ const Bl = () => w`
 
 	/* Sizes */
 	.ml-date-picker--sm .ml-date-picker__trigger {
-		padding: var(--ml-space-1-5) var(--ml-space-2-5);
-		font-size: var(--ml-text-xs);
+		padding: var(--ml-space-2) var(--ml-space-3);
+		font-size: var(--ml-text-sm);
 	}
 
 	.ml-date-picker--md .ml-date-picker__trigger {
-		padding: var(--ml-space-2) var(--ml-space-3);
+		padding: var(--ml-space-2-5) var(--ml-space-3-5);
 		font-size: var(--ml-text-sm);
 	}
 
 	.ml-date-picker--lg .ml-date-picker__trigger {
-		padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		padding: var(--ml-space-3) var(--ml-space-3-5);
 		font-size: var(--ml-text-base);
 	}
 
@@ -20736,6 +20736,8 @@ const Kr = `
 
 		/* Split variant */
 		--ml-auth-split-padding: var(--ml-space-10);
+		--ml-auth-split-form-padding: var(--ml-auth-split-padding);
+		--ml-auth-split-brand-padding: var(--ml-auth-split-padding);
 		--ml-auth-split-form-bg: var(--ml-color-surface);
 		--ml-auth-split-brand-bg: var(--ml-color-primary);
 		--ml-auth-split-brand-color: var(--ml-color-text-inverse);
@@ -20807,7 +20809,7 @@ const Kr = `
 		align-items: center;
 		justify-content: center;
 		flex: 1;
-		padding: var(--ml-auth-split-padding);
+		padding: var(--ml-auth-split-form-padding);
 		background-color: var(--ml-auth-split-form-bg);
 	}
 
@@ -20821,7 +20823,7 @@ const Kr = `
 		align-items: center;
 		justify-content: center;
 		flex: 1;
-		padding: var(--ml-auth-split-padding);
+		padding: var(--ml-auth-split-brand-padding);
 		background-color: var(--ml-auth-split-brand-bg);
 		color: var(--ml-auth-split-brand-color);
 		position: relative;
@@ -20832,6 +20834,8 @@ const Kr = `
 		position: relative;
 		z-index: 1;
 		text-align: center;
+		width: 100%;
+		height: 100%;
 		max-width: var(--ml-auth-split-brand-max-width);
 	}
 

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

@@ -16,7 +16,7 @@ export const autocompleteStyles = () => css `
 		--ml-autocomplete-required-color: var(--ml-color-danger);
 
 		/* --- Trigger --- */
-		--ml-autocomplete-bg: var(--ml-color-surface);
+		--ml-autocomplete-bg: var(--ml-color-input-bg);
 		--ml-autocomplete-border-width: var(--ml-border);
 		--ml-autocomplete-border-color: var(--ml-color-border);
 		--ml-autocomplete-border-radius: var(--ml-radius);

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

@@ -17,11 +17,11 @@ export const datePickerStyles = () => css `
 		--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-border-radius: var(--ml-radius);
 		--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-padding: var(--ml-space-2-5) var(--ml-space-3-5);
 		--ml-date-picker-gap: var(--ml-space-2);
 		--ml-date-picker-hover-border-color: var(--ml-color-border-strong);
 
@@ -31,12 +31,12 @@ export const datePickerStyles = () => css `
 
 		/* --- 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-focus-shadow: var(--ml-shadow-ring-error);
 		--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);
+		--ml-date-picker-disabled-bg: var(--ml-color-input-disabled-bg);
 
 		/* --- Icon --- */
 		--ml-date-picker-icon-color: var(--ml-color-text-muted);
@@ -127,17 +127,17 @@ export const datePickerStyles = () => css `
 
 	/* Sizes */
 	.ml-date-picker--sm .ml-date-picker__trigger {
-		padding: var(--ml-space-1-5) var(--ml-space-2-5);
-		font-size: var(--ml-text-xs);
+		padding: var(--ml-space-2) var(--ml-space-3);
+		font-size: var(--ml-text-sm);
 	}
 
 	.ml-date-picker--md .ml-date-picker__trigger {
-		padding: var(--ml-space-2) var(--ml-space-3);
+		padding: var(--ml-space-2-5) var(--ml-space-3-5);
 		font-size: var(--ml-text-sm);
 	}
 
 	.ml-date-picker--lg .ml-date-picker__trigger {
-		padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		padding: var(--ml-space-3) var(--ml-space-3-5);
 		font-size: var(--ml-text-base);
 	}
 

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

@@ -17,9 +17,9 @@ export const inputStyles = () => css `
 		/* --- 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-color: var(--ml-color-border);
 		--ml-input-border-radius: var(--ml-radius);
-		--ml-input-shadow: var(--ml-shadow-xs);
+		--ml-input-shadow: none;
 		--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);

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

@@ -16,7 +16,7 @@ export const selectStyles = () => css `
 		--ml-select-required-color: var(--ml-color-danger);
 
 		/* --- Trigger --- */
-		--ml-select-bg: var(--ml-color-surface);
+		--ml-select-bg: var(--ml-color-input-bg);
 		--ml-select-border-width: var(--ml-border);
 		--ml-select-border-color: var(--ml-color-border);
 		--ml-select-border-radius: var(--ml-radius);

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

@@ -17,9 +17,9 @@ export const textareaStyles = () => css `
 		/* --- 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-color: var(--ml-color-border);
 		--ml-textarea-border-radius: var(--ml-radius);
-		--ml-textarea-shadow: var(--ml-shadow-xs);
+		--ml-textarea-shadow: none;
 		--ml-textarea-color: var(--ml-color-text);
 		--ml-textarea-font-family: var(--ml-font-sans);
 		--ml-textarea-font-size: var(--ml-text-sm);

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

@@ -17,11 +17,11 @@ export const timePickerStyles = () => css `
 		--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-border-radius: var(--ml-radius);
 		--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-padding: var(--ml-space-2-5) var(--ml-space-3-5);
 		--ml-time-picker-gap: var(--ml-space-2);
 		--ml-time-picker-hover-border-color: var(--ml-color-border-strong);
 
@@ -31,12 +31,12 @@ export const timePickerStyles = () => css `
 
 		/* --- 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-focus-shadow: var(--ml-shadow-ring-error);
 		--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);
+		--ml-time-picker-disabled-bg: var(--ml-color-input-disabled-bg);
 
 		/* --- Icon --- */
 		--ml-time-picker-icon-color: var(--ml-color-text-muted);
@@ -174,17 +174,17 @@ export const timePickerStyles = () => css `
 
 	/* Sizes */
 	.ml-time-picker--sm .ml-time-picker__trigger {
-		padding: var(--ml-space-1-5) var(--ml-space-2-5);
-		font-size: var(--ml-text-xs);
+		padding: var(--ml-space-2) var(--ml-space-3);
+		font-size: var(--ml-text-sm);
 	}
 
 	.ml-time-picker--md .ml-time-picker__trigger {
-		padding: var(--ml-space-2) var(--ml-space-3);
+		padding: var(--ml-space-2-5) var(--ml-space-3-5);
 		font-size: var(--ml-text-sm);
 	}
 
 	.ml-time-picker--lg .ml-time-picker__trigger {
-		padding: var(--ml-space-2-5) var(--ml-space-3-5);
+		padding: var(--ml-space-3) var(--ml-space-3-5);
 		font-size: var(--ml-text-base);
 	}
 

package/lib/components/pages/auth/auth-layout.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const authLayoutCss = "\n\t/* ============================================\n\t   AUTH LAYOUT - SHARED STYLES\n\t   ============================================ */\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\t/* Background */\n\t\t--ml-auth-bg: var(--ml-color-surface-secondary);\n\n\t\t/* Font */\n\t\t--ml-auth-font-family: var(--ml-font-sans);\n\n\t\t/* Card */\n\t\t--ml-auth-card-max-width: 440px;\n\t\t--ml-auth-card-bg: var(--ml-color-surface);\n\t\t--ml-auth-card-border-width: var(--ml-border);\n\t\t--ml-auth-card-border-color: var(--ml-color-border);\n\t\t--ml-auth-card-radius: var(--ml-radius-xl);\n\t\t--ml-auth-card-shadow: var(--ml-shadow-lg);\n\t\t--ml-auth-card-padding: var(--ml-space-10);\n\n\t\t/* Centered variant */\n\t\t--ml-auth-centered-padding: var(--ml-space-6);\n\n\t\t/* Split variant */\n\t\t--ml-auth-split-padding: var(--ml-space-10);\n\t\t--ml-auth-split-form-bg: var(--ml-color-surface);\n\t\t--ml-auth-split-brand-bg: var(--ml-color-primary);\n\t\t--ml-auth-split-brand-color: var(--ml-color-text-inverse);\n\t\t--ml-auth-split-brand-max-width: 480px;\n\n\t\t/* Logo */\n\t\t--ml-auth-logo-margin: var(--ml-space-6);\n\n\t\t/* Header */\n\t\t--ml-auth-header-margin: var(--ml-space-8);\n\t\t--ml-auth-title-size: var(--ml-text-2xl);\n\t\t--ml-auth-title-weight: var(--ml-font-bold);\n\t\t--ml-auth-title-color: var(--ml-color-text);\n\t\t--ml-auth-title-line-height: var(--ml-leading-tight);\n\t\t--ml-auth-title-margin: var(--ml-space-2);\n\t\t--ml-auth-description-size: var(--ml-text-sm);\n\t\t--ml-auth-description-color: var(--ml-color-text-muted);\n\t\t--ml-auth-description-line-height: var(--ml-leading-normal);\n\n\t\t/* Form / Social / Footer spacing */\n\t\t--ml-auth-form-margin: var(--ml-space-6);\n\t\t--ml-auth-social-margin: var(--ml-space-6);\n\t\t--ml-auth-footer-size: var(--ml-text-sm);\n\t\t--ml-auth-footer-color: var(--ml-color-text-muted);\n\n\t\t/* Mobile */\n\t\t--ml-auth-mobile-padding: var(--ml-space-6);\n\t}\n\n\t/* ============================================\n\t   BASE WRAPPER\n\t   ============================================ */\n\t.ml-auth {\n\t\tdisplay: flex;\n\t\tmin-height: 100%;\n\t\theight: 100%;\n\t\tfont-family: var(--ml-auth-font-family);\n\t\tbackground-color: var(--ml-auth-bg);\n\t}\n\n\t/* ============================================\n\t   CENTERED VARIANT\n\t   ============================================ */\n\t.ml-auth--centered {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: var(--ml-auth-centered-padding);\n\t}\n\n\t.ml-auth--centered .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: var(--ml-auth-card-max-width);\n\t\tbackground-color: var(--ml-auth-card-bg);\n\t\tborder: var(--ml-auth-card-border-width) solid var(--ml-auth-card-border-color);\n\t\tborder-radius: var(--ml-auth-card-radius);\n\t\tbox-shadow: var(--ml-auth-card-shadow);\n\t\tpadding: var(--ml-auth-card-padding);\n\t}\n\n\t/* ============================================\n\t   SPLIT VARIANT\n\t   ============================================ */\n\t.ml-auth--split {\n\t\tflex-direction: row;\n\t}\n\n\t.ml-auth--split .ml-auth__form-side {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tpadding: var(--ml-auth-split-padding);\n\t\tbackground-color: var(--ml-auth-split-form-bg);\n\t}\n\n\t.ml-auth--split .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: var(--ml-auth-card-max-width);\n\t}\n\n\t.ml-auth--split .ml-auth__brand-side {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tpadding: var(--ml-auth-split-padding);\n\t\tbackground-color: var(--ml-auth-split-brand-bg);\n\t\tcolor: var(--ml-auth-split-brand-color);\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\t.ml-auth__brand-content {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\ttext-align: center;\n\t\tmax-width: var(--ml-auth-split-brand-max-width);\n\t}\n\n\t.ml-auth__brand-content ::slotted(*) {\n\t\tcolor: inherit;\n\t}\n\n\t/* ============================================\n\t   LOGO AREA\n\t   ============================================ */\n\t.ml-auth__logo {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tmargin-bottom: var(--ml-auth-logo-margin);\n\t}\n\n\t.ml-auth__logo:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t   HEADER\n\t   ============================================ */\n\t.ml-auth__header {\n\t\ttext-align: center;\n\t\tmargin-bottom: var(--ml-auth-header-margin);\n\t}\n\n\t.ml-auth__title {\n\t\tmargin: 0 0 var(--ml-auth-title-margin) 0;\n\t\tfont-size: var(--ml-auth-title-size);\n\t\tfont-weight: var(--ml-auth-title-weight);\n\t\tcolor: var(--ml-auth-title-color);\n\t\tline-height: var(--ml-auth-title-line-height);\n\t}\n\n\t.ml-auth__description {\n\t\tmargin: 0;\n\t\tfont-size: var(--ml-auth-description-size);\n\t\tcolor: var(--ml-auth-description-color);\n\t\tline-height: var(--ml-auth-description-line-height);\n\t}\n\n\t/* ============================================\n\t   FORM AREA\n\t   ============================================ */\n\t.ml-auth__form {\n\t\tmargin-bottom: var(--ml-auth-form-margin);\n\t}\n\n\t.ml-auth__form:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t   SOCIAL LOGIN\n\t   ============================================ */\n\t.ml-auth__social {\n\t\tmargin-bottom: var(--ml-auth-social-margin);\n\t}\n\n\t.ml-auth__social:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t   FOOTER\n\t   ============================================ */\n\t.ml-auth__footer {\n\t\ttext-align: center;\n\t\tfont-size: var(--ml-auth-footer-size);\n\t\tcolor: var(--ml-auth-footer-color);\n\t}\n\n\t.ml-auth__footer:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t   RESPONSIVE - SPLIT COLLAPSE\n\t   ============================================ */\n\t@media (max-width: 768px) {\n\t\t.ml-auth--split {\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t.ml-auth--split .ml-auth__brand-side {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.ml-auth--split .ml-auth__form-side {\n\t\t\tmin-height: 100%;\n\t\t\tpadding: var(--ml-auth-mobile-padding);\n\t\t}\n\t}\n";
+export declare const authLayoutCss = "\n\t/* ============================================\n\t   AUTH LAYOUT - SHARED STYLES\n\t   ============================================ */\n\t:host {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: 100%;\n\n\t\t/* Background */\n\t\t--ml-auth-bg: var(--ml-color-surface-secondary);\n\n\t\t/* Font */\n\t\t--ml-auth-font-family: var(--ml-font-sans);\n\n\t\t/* Card */\n\t\t--ml-auth-card-max-width: 440px;\n\t\t--ml-auth-card-bg: var(--ml-color-surface);\n\t\t--ml-auth-card-border-width: var(--ml-border);\n\t\t--ml-auth-card-border-color: var(--ml-color-border);\n\t\t--ml-auth-card-radius: var(--ml-radius-xl);\n\t\t--ml-auth-card-shadow: var(--ml-shadow-lg);\n\t\t--ml-auth-card-padding: var(--ml-space-10);\n\n\t\t/* Centered variant */\n\t\t--ml-auth-centered-padding: var(--ml-space-6);\n\n\t\t/* Split variant */\n\t\t--ml-auth-split-padding: var(--ml-space-10);\n\t\t--ml-auth-split-form-padding: var(--ml-auth-split-padding);\n\t\t--ml-auth-split-brand-padding: var(--ml-auth-split-padding);\n\t\t--ml-auth-split-form-bg: var(--ml-color-surface);\n\t\t--ml-auth-split-brand-bg: var(--ml-color-primary);\n\t\t--ml-auth-split-brand-color: var(--ml-color-text-inverse);\n\t\t--ml-auth-split-brand-max-width: 480px;\n\n\t\t/* Logo */\n\t\t--ml-auth-logo-margin: var(--ml-space-6);\n\n\t\t/* Header */\n\t\t--ml-auth-header-margin: var(--ml-space-8);\n\t\t--ml-auth-title-size: var(--ml-text-2xl);\n\t\t--ml-auth-title-weight: var(--ml-font-bold);\n\t\t--ml-auth-title-color: var(--ml-color-text);\n\t\t--ml-auth-title-line-height: var(--ml-leading-tight);\n\t\t--ml-auth-title-margin: var(--ml-space-2);\n\t\t--ml-auth-description-size: var(--ml-text-sm);\n\t\t--ml-auth-description-color: var(--ml-color-text-muted);\n\t\t--ml-auth-description-line-height: var(--ml-leading-normal);\n\n\t\t/* Form / Social / Footer spacing */\n\t\t--ml-auth-form-margin: var(--ml-space-6);\n\t\t--ml-auth-social-margin: var(--ml-space-6);\n\t\t--ml-auth-footer-size: var(--ml-text-sm);\n\t\t--ml-auth-footer-color: var(--ml-color-text-muted);\n\n\t\t/* Mobile */\n\t\t--ml-auth-mobile-padding: var(--ml-space-6);\n\t}\n\n\t/* ============================================\n\t   BASE WRAPPER\n\t   ============================================ */\n\t.ml-auth {\n\t\tdisplay: flex;\n\t\tmin-height: 100%;\n\t\theight: 100%;\n\t\tfont-family: var(--ml-auth-font-family);\n\t\tbackground-color: var(--ml-auth-bg);\n\t}\n\n\t/* ============================================\n\t   CENTERED VARIANT\n\t   ============================================ */\n\t.ml-auth--centered {\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tpadding: var(--ml-auth-centered-padding);\n\t}\n\n\t.ml-auth--centered .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: var(--ml-auth-card-max-width);\n\t\tbackground-color: var(--ml-auth-card-bg);\n\t\tborder: var(--ml-auth-card-border-width) solid var(--ml-auth-card-border-color);\n\t\tborder-radius: var(--ml-auth-card-radius);\n\t\tbox-shadow: var(--ml-auth-card-shadow);\n\t\tpadding: var(--ml-auth-card-padding);\n\t}\n\n\t/* ============================================\n\t   SPLIT VARIANT\n\t   ============================================ */\n\t.ml-auth--split {\n\t\tflex-direction: row;\n\t}\n\n\t.ml-auth--split .ml-auth__form-side {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tpadding: var(--ml-auth-split-form-padding);\n\t\tbackground-color: var(--ml-auth-split-form-bg);\n\t}\n\n\t.ml-auth--split .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: var(--ml-auth-card-max-width);\n\t}\n\n\t.ml-auth--split .ml-auth__brand-side {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t\tflex: 1;\n\t\tpadding: var(--ml-auth-split-brand-padding);\n\t\tbackground-color: var(--ml-auth-split-brand-bg);\n\t\tcolor: var(--ml-auth-split-brand-color);\n\t\tposition: relative;\n\t\toverflow: hidden;\n\t}\n\n\t.ml-auth__brand-content {\n\t\tposition: relative;\n\t\tz-index: 1;\n\t\ttext-align: center;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tmax-width: var(--ml-auth-split-brand-max-width);\n\t}\n\n\t.ml-auth__brand-content ::slotted(*) {\n\t\tcolor: inherit;\n\t}\n\n\t/* ============================================\n\t   LOGO AREA\n\t   ============================================ */\n\t.ml-auth__logo {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\tmargin-bottom: var(--ml-auth-logo-margin);\n\t}\n\n\t.ml-auth__logo:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t   HEADER\n\t   ============================================ */\n\t.ml-auth__header {\n\t\ttext-align: center;\n\t\tmargin-bottom: var(--ml-auth-header-margin);\n\t}\n\n\t.ml-auth__title {\n\t\tmargin: 0 0 var(--ml-auth-title-margin) 0;\n\t\tfont-size: var(--ml-auth-title-size);\n\t\tfont-weight: var(--ml-auth-title-weight);\n\t\tcolor: var(--ml-auth-title-color);\n\t\tline-height: var(--ml-auth-title-line-height);\n\t}\n\n\t.ml-auth__description {\n\t\tmargin: 0;\n\t\tfont-size: var(--ml-auth-description-size);\n\t\tcolor: var(--ml-auth-description-color);\n\t\tline-height: var(--ml-auth-description-line-height);\n\t}\n\n\t/* ============================================\n\t   FORM AREA\n\t   ============================================ */\n\t.ml-auth__form {\n\t\tmargin-bottom: var(--ml-auth-form-margin);\n\t}\n\n\t.ml-auth__form:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t   SOCIAL LOGIN\n\t   ============================================ */\n\t.ml-auth__social {\n\t\tmargin-bottom: var(--ml-auth-social-margin);\n\t}\n\n\t.ml-auth__social:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t   FOOTER\n\t   ============================================ */\n\t.ml-auth__footer {\n\t\ttext-align: center;\n\t\tfont-size: var(--ml-auth-footer-size);\n\t\tcolor: var(--ml-auth-footer-color);\n\t}\n\n\t.ml-auth__footer:empty {\n\t\tdisplay: none;\n\t}\n\n\t/* ============================================\n\t   RESPONSIVE - SPLIT COLLAPSE\n\t   ============================================ */\n\t@media (max-width: 768px) {\n\t\t.ml-auth--split {\n\t\t\tflex-direction: column;\n\t\t}\n\n\t\t.ml-auth--split .ml-auth__brand-side {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t.ml-auth--split .ml-auth__form-side {\n\t\t\tmin-height: 100%;\n\t\t\tpadding: var(--ml-auth-mobile-padding);\n\t\t}\n\t}\n";
 //# sourceMappingURL=auth-layout.styles.d.ts.map

package/lib/components/pages/auth/auth-layout.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"auth-layout.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/auth/auth-layout.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,mmMA4NzB,CAAC"}
+{"version":3,"file":"auth-layout.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/pages/auth/auth-layout.styles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,aAAa,sxMAgOzB,CAAC"}

package/lib/components/pages/auth/auth-layout.styles.js

@@ -27,6 +27,8 @@ export const authLayoutCss = `
 
 		/* Split variant */
 		--ml-auth-split-padding: var(--ml-space-10);
+		--ml-auth-split-form-padding: var(--ml-auth-split-padding);
+		--ml-auth-split-brand-padding: var(--ml-auth-split-padding);
 		--ml-auth-split-form-bg: var(--ml-color-surface);
 		--ml-auth-split-brand-bg: var(--ml-color-primary);
 		--ml-auth-split-brand-color: var(--ml-color-text-inverse);
@@ -98,7 +100,7 @@ export const authLayoutCss = `
 		align-items: center;
 		justify-content: center;
 		flex: 1;
-		padding: var(--ml-auth-split-padding);
+		padding: var(--ml-auth-split-form-padding);
 		background-color: var(--ml-auth-split-form-bg);
 	}
 
@@ -112,7 +114,7 @@ export const authLayoutCss = `
 		align-items: center;
 		justify-content: center;
 		flex: 1;
-		padding: var(--ml-auth-split-padding);
+		padding: var(--ml-auth-split-brand-padding);
 		background-color: var(--ml-auth-split-brand-bg);
 		color: var(--ml-auth-split-brand-color);
 		position: relative;
@@ -123,6 +125,8 @@ export const authLayoutCss = `
 		position: relative;
 		z-index: 1;
 		text-align: center;
+		width: 100%;
+		height: 100%;
 		max-width: var(--ml-auth-split-brand-max-width);
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@melodicdev/components",
-	"version": "1.5.2",
+	"version": "1.5.4",
 	"description": "Themeable UI component library built on the Melodic Framework",
 	"license": "MIT",
 	"author": "Melodic Development",