@melodicdev/components 1.4.0 → 1.5.0

package/lib/components/overlays/drawer/drawer.styles.js

@@ -1,6 +1,50 @@
 import { css } from '@melodicdev/core';
 export const drawerStyles = () => css `
 	:host {
+		/* Backdrop */
+		--ml-drawer-backdrop-color: rgba(0, 0, 0, 0.5);
+		--ml-drawer-backdrop-transition: var(--ml-duration-300) var(--ml-ease-out);
+
+		/* Panel */
+		--ml-drawer-bg: var(--ml-color-surface);
+		--ml-drawer-shadow: var(--ml-shadow-xl);
+
+		/* Size variants */
+		--ml-drawer-sm-width: 320px;
+		--ml-drawer-md-width: 480px;
+		--ml-drawer-lg-width: 640px;
+		--ml-drawer-xl-width: 800px;
+
+		/* Header */
+		--ml-drawer-header-padding: var(--ml-space-6);
+		--ml-drawer-header-gap: var(--ml-space-4);
+		--ml-drawer-header-title-font-size: var(--ml-text-lg);
+		--ml-drawer-header-title-font-weight: var(--ml-font-semibold);
+		--ml-drawer-header-title-color: var(--ml-color-text);
+		--ml-drawer-header-title-line-height: var(--ml-leading-tight);
+		--ml-drawer-header-desc-font-size: var(--ml-text-sm);
+		--ml-drawer-header-desc-color: var(--ml-color-text-secondary);
+
+		/* Close button */
+		--ml-drawer-close-size: 32px;
+		--ml-drawer-close-radius: var(--ml-radius-md);
+		--ml-drawer-close-color: var(--ml-color-text-tertiary);
+		--ml-drawer-close-hover-bg: var(--ml-color-surface-hover);
+		--ml-drawer-close-hover-color: var(--ml-color-text);
+		--ml-drawer-close-transition: var(--ml-duration-150) var(--ml-ease-in-out);
+
+		/* Body */
+		--ml-drawer-body-padding: var(--ml-space-6);
+		--ml-drawer-body-font-size: var(--ml-text-sm);
+		--ml-drawer-body-color: var(--ml-color-text-secondary);
+		--ml-drawer-body-line-height: var(--ml-leading-relaxed);
+
+		/* Footer */
+		--ml-drawer-footer-padding-y: var(--ml-space-4);
+		--ml-drawer-footer-padding-x: var(--ml-space-6);
+		--ml-drawer-footer-gap: var(--ml-space-3);
+		--ml-drawer-footer-border-color: var(--ml-color-border);
+
 		display: contents;
 	}
 
@@ -26,13 +70,13 @@ export const drawerStyles = () => css `
 	dialog.ml-drawer::backdrop {
 		background-color: rgba(0, 0, 0, 0);
 		transition:
-			background-color var(--ml-duration-300) var(--ml-ease-out),
-			overlay var(--ml-duration-300) var(--ml-ease-out) allow-discrete,
-			display var(--ml-duration-300) var(--ml-ease-out) allow-discrete;
+			background-color var(--ml-drawer-backdrop-transition),
+			overlay var(--ml-drawer-backdrop-transition) allow-discrete,
+			display var(--ml-drawer-backdrop-transition) allow-discrete;
 	}
 
 	dialog.ml-drawer[open]::backdrop {
-		background-color: rgba(0, 0, 0, 0.5);
+		background-color: var(--ml-drawer-backdrop-color);
 	}
 
 	@starting-style {
@@ -49,8 +93,8 @@ export const drawerStyles = () => css `
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		background-color: var(--ml-color-surface);
-		box-shadow: var(--ml-shadow-xl);
+		background-color: var(--ml-drawer-bg);
+		box-shadow: var(--ml-drawer-shadow);
 	}
 
 	/* Side variants - panel is off-screen by default */
@@ -64,27 +108,27 @@ export const drawerStyles = () => css `
 
 	/* Size variants */
 	.ml-drawer--sm .ml-drawer__panel {
-		width: 320px;
+		width: var(--ml-drawer-sm-width);
 	}
 
 	.ml-drawer--md .ml-drawer__panel {
-		width: 480px;
+		width: var(--ml-drawer-md-width);
 	}
 
 	.ml-drawer--lg .ml-drawer__panel {
-		width: 640px;
+		width: var(--ml-drawer-lg-width);
 	}
 
 	.ml-drawer--xl .ml-drawer__panel {
-		width: 800px;
+		width: var(--ml-drawer-xl-width);
 	}
 
 	/* Header */
 	.ml-drawer__header {
 		display: flex;
 		align-items: flex-start;
-		gap: var(--ml-space-4);
-		padding: var(--ml-space-6);
+		gap: var(--ml-drawer-header-gap);
+		padding: var(--ml-drawer-header-padding);
 		padding-bottom: 0;
 	}
 
@@ -102,16 +146,16 @@ export const drawerStyles = () => css `
 	.ml-drawer__header-content ::slotted(h3),
 	.ml-drawer__header-content ::slotted(h4) {
 		margin: 0;
-		font-size: var(--ml-text-lg);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text);
-		line-height: var(--ml-leading-tight);
+		font-size: var(--ml-drawer-header-title-font-size);
+		font-weight: var(--ml-drawer-header-title-font-weight);
+		color: var(--ml-drawer-header-title-color);
+		line-height: var(--ml-drawer-header-title-line-height);
 	}
 
 	.ml-drawer__header-content ::slotted(p) {
 		margin: var(--ml-space-1) 0 0;
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-secondary);
+		font-size: var(--ml-drawer-header-desc-font-size);
+		color: var(--ml-drawer-header-desc-color);
 	}
 
 	.ml-drawer__close {
@@ -119,32 +163,32 @@ export const drawerStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 32px;
-		height: 32px;
+		width: var(--ml-drawer-close-size);
+		height: var(--ml-drawer-close-size);
 		padding: 0;
 		background: none;
 		border: none;
-		border-radius: var(--ml-radius-md);
+		border-radius: var(--ml-drawer-close-radius);
 		cursor: pointer;
-		color: var(--ml-color-text-tertiary);
+		color: var(--ml-drawer-close-color);
 		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-drawer-close-transition),
+			color var(--ml-drawer-close-transition);
 	}
 
 	.ml-drawer__close:hover {
-		background-color: var(--ml-color-surface-hover);
-		color: var(--ml-color-text);
+		background-color: var(--ml-drawer-close-hover-bg);
+		color: var(--ml-drawer-close-hover-color);
 	}
 
 	/* Body */
 	.ml-drawer__body {
 		flex: 1;
-		padding: var(--ml-space-6);
+		padding: var(--ml-drawer-body-padding);
 		overflow-y: auto;
-		font-size: var(--ml-text-sm);
-		color: var(--ml-color-text-secondary);
-		line-height: var(--ml-leading-relaxed);
+		font-size: var(--ml-drawer-body-font-size);
+		color: var(--ml-drawer-body-color);
+		line-height: var(--ml-drawer-body-line-height);
 	}
 
 	/* Footer */
@@ -152,9 +196,9 @@ export const drawerStyles = () => css `
 		display: flex;
 		align-items: center;
 		justify-content: flex-end;
-		gap: var(--ml-space-3);
-		padding: var(--ml-space-4) var(--ml-space-6);
-		border-top: 1px solid var(--ml-color-border);
+		gap: var(--ml-drawer-footer-gap);
+		padding: var(--ml-drawer-footer-padding-y) var(--ml-drawer-footer-padding-x);
+		border-top: 1px solid var(--ml-drawer-footer-border-color);
 	}
 
 	.ml-drawer__footer:not(:has(*)) {

package/lib/components/overlays/dropdown/dropdown-item.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dropdown/dropdown-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDAmE9B,CAAC"}
+{"version":3,"file":"dropdown-item.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dropdown/dropdown-item.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,iDA6F9B,CAAC"}

package/lib/components/overlays/dropdown/dropdown-item.styles.js

@@ -1,33 +1,59 @@
 import { css } from '@melodicdev/core';
 export const dropdownItemStyles = () => css `
 	:host {
+		/* Item base */
+		--ml-dropdown-item-gap: var(--ml-space-2);
+		--ml-dropdown-item-padding: var(--ml-space-2);
+		--ml-dropdown-item-radius: var(--ml-radius-md);
+		--ml-dropdown-item-font-size: 14px;
+		--ml-dropdown-item-line-height: 20px;
+		--ml-dropdown-item-color: var(--ml-color-text);
+		--ml-dropdown-item-transition: var(--ml-duration-100) var(--ml-ease-out);
+
+		/* Item hover/focused */
+		--ml-dropdown-item-hover-bg: var(--ml-color-surface-hover);
+
+		/* Item disabled */
+		--ml-dropdown-item-disabled-opacity: 0.5;
+
+		/* Item destructive */
+		--ml-dropdown-item-destructive-color: var(--ml-color-error);
+		--ml-dropdown-item-destructive-hover-bg: var(--ml-color-error-subtle);
+
+		/* Icon */
+		--ml-dropdown-item-icon-color: var(--ml-color-text-secondary);
+
+		/* Addon (shortcut text) */
+		--ml-dropdown-item-addon-font-size: 12px;
+		--ml-dropdown-item-addon-color: var(--ml-color-text-tertiary);
+
 		display: block;
 	}
 
 	.ml-dropdown-item {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		padding: var(--ml-space-2) var(--ml-space-2);
-		border-radius: var(--ml-radius-md);
-		font-size: 14px;
-		line-height: 20px;
-		color: var(--ml-color-text);
+		gap: var(--ml-dropdown-item-gap);
+		padding: var(--ml-dropdown-item-padding) var(--ml-dropdown-item-padding);
+		border-radius: var(--ml-dropdown-item-radius);
+		font-size: var(--ml-dropdown-item-font-size);
+		line-height: var(--ml-dropdown-item-line-height);
+		color: var(--ml-dropdown-item-color);
 		cursor: pointer;
 		user-select: none;
-		transition: background-color var(--ml-duration-100) var(--ml-ease-out);
+		transition: background-color var(--ml-dropdown-item-transition);
 	}
 
 	.ml-dropdown-item:hover {
-		background-color: var(--ml-color-surface-hover);
+		background-color: var(--ml-dropdown-item-hover-bg);
 	}
 
 	.ml-dropdown-item--focused {
-		background-color: var(--ml-color-surface-hover);
+		background-color: var(--ml-dropdown-item-hover-bg);
 	}
 
 	.ml-dropdown-item--disabled {
-		opacity: 0.5;
+		opacity: var(--ml-dropdown-item-disabled-opacity);
 		cursor: not-allowed;
 	}
 
@@ -36,24 +62,24 @@ export const dropdownItemStyles = () => css `
 	}
 
 	.ml-dropdown-item--destructive {
-		color: var(--ml-color-error);
+		color: var(--ml-dropdown-item-destructive-color);
 	}
 
 	.ml-dropdown-item--destructive:hover {
-		background-color: var(--ml-color-error-subtle);
+		background-color: var(--ml-dropdown-item-destructive-hover-bg);
 	}
 
 	.ml-dropdown-item--destructive.ml-dropdown-item--focused {
-		background-color: var(--ml-color-error-subtle);
+		background-color: var(--ml-dropdown-item-destructive-hover-bg);
 	}
 
 	.ml-dropdown-item__icon {
 		flex-shrink: 0;
-		color: var(--ml-color-text-secondary);
+		color: var(--ml-dropdown-item-icon-color);
 	}
 
 	.ml-dropdown-item--destructive .ml-dropdown-item__icon {
-		color: var(--ml-color-error);
+		color: var(--ml-dropdown-item-destructive-color);
 	}
 
 	.ml-dropdown-item__label {
@@ -63,7 +89,7 @@ export const dropdownItemStyles = () => css `
 
 	.ml-dropdown-item__addon {
 		flex-shrink: 0;
-		font-size: 12px;
-		color: var(--ml-color-text-tertiary);
+		font-size: var(--ml-dropdown-item-addon-font-size);
+		color: var(--ml-dropdown-item-addon-color);
 	}
 `;

package/lib/components/overlays/dropdown/dropdown.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAgF1B,CAAC"}
+{"version":3,"file":"dropdown.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/dropdown/dropdown.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDA+F1B,CAAC"}

package/lib/components/overlays/dropdown/dropdown.styles.js

@@ -1,6 +1,21 @@
 import { css } from '@melodicdev/core';
 export const dropdownStyles = () => css `
 	:host {
+		/* Menu */
+		--ml-dropdown-padding: var(--ml-space-1);
+		--ml-dropdown-border-color: var(--ml-color-border);
+		--ml-dropdown-radius: var(--ml-radius-lg);
+		--ml-dropdown-bg: var(--ml-color-surface);
+		--ml-dropdown-color: var(--ml-color-text);
+		--ml-dropdown-shadow: var(--ml-shadow-lg);
+		--ml-dropdown-min-width: 180px;
+		--ml-dropdown-transition: var(--ml-duration-150) var(--ml-ease-out);
+
+		/* Arrow */
+		--ml-dropdown-arrow-size: 8px;
+		--ml-dropdown-arrow-bg: var(--ml-color-surface);
+		--ml-dropdown-arrow-border-color: var(--ml-color-border);
+
 		display: inline-block;
 	}
 
@@ -18,21 +33,21 @@ export const dropdownStyles = () => css `
 		position: fixed;
 		inset: unset;
 		margin: 0;
-		padding: var(--ml-space-1);
-		border: 1px solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
-		background-color: var(--ml-color-surface);
-		color: var(--ml-color-text);
-		box-shadow: var(--ml-shadow-lg);
-		min-width: 180px;
+		padding: var(--ml-dropdown-padding);
+		border: 1px solid var(--ml-dropdown-border-color);
+		border-radius: var(--ml-dropdown-radius);
+		background-color: var(--ml-dropdown-bg);
+		color: var(--ml-dropdown-color);
+		box-shadow: var(--ml-dropdown-shadow);
+		min-width: var(--ml-dropdown-min-width);
 		overflow: visible;
 		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),
-			overlay var(--ml-duration-150) var(--ml-ease-out) allow-discrete,
-			display var(--ml-duration-150) var(--ml-ease-out) allow-discrete;
+			opacity var(--ml-dropdown-transition),
+			transform var(--ml-dropdown-transition),
+			overlay var(--ml-dropdown-transition) allow-discrete,
+			display var(--ml-dropdown-transition) allow-discrete;
 	}
 
 	.ml-dropdown__menu:not(:popover-open) {
@@ -53,10 +68,10 @@ export const dropdownStyles = () => css `
 
 	.ml-dropdown__arrow {
 		position: absolute;
-		width: 8px;
-		height: 8px;
-		background-color: var(--ml-color-surface);
-		border: 1px solid var(--ml-color-border);
+		width: var(--ml-dropdown-arrow-size);
+		height: var(--ml-dropdown-arrow-size);
+		background-color: var(--ml-dropdown-arrow-bg);
+		border: 1px solid var(--ml-dropdown-arrow-border-color);
 		transform: rotate(45deg);
 	}
 

package/lib/components/overlays/popover/popover.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/popover/popover.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDA+EzB,CAAC"}
+{"version":3,"file":"popover.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/popover/popover.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDA8FzB,CAAC"}

package/lib/components/overlays/popover/popover.styles.js

@@ -1,6 +1,21 @@
 import { css } from '@melodicdev/core';
 export const popoverStyles = () => css `
 	:host {
+		/* Content panel */
+		--ml-popover-padding-y: var(--ml-space-3);
+		--ml-popover-padding-x: var(--ml-space-4);
+		--ml-popover-border-color: var(--ml-color-border);
+		--ml-popover-radius: var(--ml-radius-lg);
+		--ml-popover-bg: var(--ml-color-surface);
+		--ml-popover-color: var(--ml-color-text);
+		--ml-popover-shadow: var(--ml-shadow-lg);
+		--ml-popover-transition: var(--ml-duration-150) var(--ml-ease-out);
+
+		/* Arrow */
+		--ml-popover-arrow-size: 8px;
+		--ml-popover-arrow-bg: var(--ml-color-surface);
+		--ml-popover-arrow-border-color: var(--ml-color-border);
+
 		display: inline-block;
 	}
 
@@ -18,20 +33,20 @@ export const popoverStyles = () => css `
 		position: fixed;
 		inset: unset;
 		margin: 0;
-		padding: var(--ml-space-3) var(--ml-space-4);
-		border: 1px solid var(--ml-color-border);
-		border-radius: var(--ml-radius-lg);
-		background-color: var(--ml-color-surface);
-		color: var(--ml-color-text);
-		box-shadow: var(--ml-shadow-lg);
+		padding: var(--ml-popover-padding-y) var(--ml-popover-padding-x);
+		border: 1px solid var(--ml-popover-border-color);
+		border-radius: var(--ml-popover-radius);
+		background-color: var(--ml-popover-bg);
+		color: var(--ml-popover-color);
+		box-shadow: var(--ml-popover-shadow);
 		overflow: visible;
 		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),
-			overlay var(--ml-duration-150) var(--ml-ease-out) allow-discrete,
-			display var(--ml-duration-150) var(--ml-ease-out) allow-discrete;
+			opacity var(--ml-popover-transition),
+			transform var(--ml-popover-transition),
+			overlay var(--ml-popover-transition) allow-discrete,
+			display var(--ml-popover-transition) allow-discrete;
 	}
 
 	.ml-popover__content:not(:popover-open) {
@@ -52,10 +67,10 @@ export const popoverStyles = () => css `
 
 	.ml-popover__arrow {
 		position: absolute;
-		width: 8px;
-		height: 8px;
-		background-color: var(--ml-color-surface);
-		border: 1px solid var(--ml-color-border);
+		width: var(--ml-popover-arrow-size);
+		height: var(--ml-popover-arrow-size);
+		background-color: var(--ml-popover-arrow-bg);
+		border: 1px solid var(--ml-popover-arrow-border-color);
 		transform: rotate(45deg);
 	}
 

package/lib/components/overlays/tooltip/tooltip.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDAgEzB,CAAC"}
+{"version":3,"file":"tooltip.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/tooltip/tooltip.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDAgFzB,CAAC"}

package/lib/components/overlays/tooltip/tooltip.styles.js

@@ -1,6 +1,22 @@
 import { css } from '@melodicdev/core';
 export const tooltipStyles = () => css `
 	:host {
+		/* Tooltip content */
+		--ml-tooltip-max-width: 320px;
+		--ml-tooltip-padding-y: var(--ml-space-2);
+		--ml-tooltip-padding-x: var(--ml-space-3);
+		--ml-tooltip-bg: var(--ml-tooltip-bg);
+		--ml-tooltip-color: var(--ml-tooltip-text);
+		--ml-tooltip-font-size: var(--ml-text-xs);
+		--ml-tooltip-font-weight: var(--ml-font-medium);
+		--ml-tooltip-line-height: var(--ml-leading-snug);
+		--ml-tooltip-radius: var(--ml-radius);
+		--ml-tooltip-shadow: var(--ml-shadow-lg);
+		--ml-tooltip-transition: var(--ml-duration-150) var(--ml-ease-out);
+
+		/* Arrow */
+		--ml-tooltip-arrow-size: 8px;
+
 		display: inline-block;
 	}
 
@@ -16,23 +32,23 @@ export const tooltipStyles = () => css `
 	.ml-tooltip__content {
 		position: fixed;
 		z-index: 9999;
-		max-width: 320px;
-		padding: var(--ml-space-2) var(--ml-space-3);
+		max-width: var(--ml-tooltip-max-width);
+		padding: var(--ml-tooltip-padding-y) var(--ml-tooltip-padding-x);
 		background-color: var(--ml-tooltip-bg);
-		color: var(--ml-tooltip-text);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-medium);
-		line-height: var(--ml-leading-snug);
-		border-radius: var(--ml-radius);
-		box-shadow: var(--ml-shadow-lg);
+		color: var(--ml-tooltip-color);
+		font-size: var(--ml-tooltip-font-size);
+		font-weight: var(--ml-tooltip-font-weight);
+		line-height: var(--ml-tooltip-line-height);
+		border-radius: var(--ml-tooltip-radius);
+		box-shadow: var(--ml-tooltip-shadow);
 		text-align: center;
 		word-wrap: break-word;
 		pointer-events: none;
 		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);
+			opacity var(--ml-tooltip-transition),
+			transform var(--ml-tooltip-transition);
 	}
 
 	.ml-tooltip__content--visible {
@@ -42,8 +58,8 @@ export const tooltipStyles = () => css `
 
 	.ml-tooltip__arrow {
 		position: absolute;
-		width: 8px;
-		height: 8px;
+		width: var(--ml-tooltip-arrow-size);
+		height: var(--ml-tooltip-arrow-size);
 		background-color: var(--ml-tooltip-bg);
 		transform: rotate(45deg);
 	}

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\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-font-sans);\n\t\tbackground-color: var(--ml-color-surface-secondary);\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-space-6);\n\t}\n\n\t.ml-auth--centered .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: 440px;\n\t\tbackground-color: var(--ml-color-surface);\n\t\tborder: var(--ml-border) solid var(--ml-color-border);\n\t\tborder-radius: var(--ml-radius-xl);\n\t\tbox-shadow: var(--ml-shadow-lg);\n\t\tpadding: var(--ml-space-10);\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-space-10);\n\t\tbackground-color: var(--ml-color-surface);\n\t}\n\n\t.ml-auth--split .ml-auth__card {\n\t\twidth: 100%;\n\t\tmax-width: 440px;\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-space-10);\n\t\tbackground-color: var(--ml-color-primary);\n\t\tcolor: var(--ml-color-text-inverse);\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: 480px;\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-space-6);\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-space-8);\n\t}\n\n\t.ml-auth__title {\n\t\tmargin: 0 0 var(--ml-space-2) 0;\n\t\tfont-size: var(--ml-text-2xl);\n\t\tfont-weight: var(--ml-font-bold);\n\t\tcolor: var(--ml-color-text);\n\t\tline-height: var(--ml-leading-tight);\n\t}\n\n\t.ml-auth__description {\n\t\tmargin: 0;\n\t\tfont-size: var(--ml-text-sm);\n\t\tcolor: var(--ml-color-text-muted);\n\t\tline-height: var(--ml-leading-normal);\n\t}\n\n\t/* ============================================\n\t   FORM AREA\n\t   ============================================ */\n\t.ml-auth__form {\n\t\tmargin-bottom: var(--ml-space-6);\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-space-6);\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-text-sm);\n\t\tcolor: var(--ml-color-text-muted);\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-space-6);\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-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";
 //# 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,4kIA4KzB,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,mmMA4NzB,CAAC"}