@melodicdev/components 1.3.0 → 1.5.0

package/lib/components/navigation/steps/steps.styles.js

@@ -1,6 +1,84 @@
 import { css } from '@melodicdev/core';
 export const stepsStyles = () => css `
 	:host {
+		/* Compact label */
+		--ml-steps-compact-gap: var(--ml-space-3);
+		--ml-steps-compact-label-font-family: var(--ml-font-sans);
+		--ml-steps-compact-label-font-size: var(--ml-text-sm);
+		--ml-steps-compact-label-font-weight: var(--ml-font-medium);
+		--ml-steps-compact-label-color: var(--ml-color-text-secondary);
+		--ml-steps-compact-label-margin-top: var(--ml-space-3);
+
+		/* Panels */
+		--ml-steps-panels-padding-top: var(--ml-space-6);
+		--ml-steps-compact-panels-padding-top: var(--ml-space-4);
+
+		/* Focus ring */
+		--ml-steps-focus-color: var(--ml-color-primary);
+		--ml-steps-focus-radius: var(--ml-radius);
+
+		/* Disabled state */
+		--ml-steps-disabled-opacity: 0.5;
+
+		/* Connector */
+		--ml-steps-connector-thickness: 2px;
+		--ml-steps-connector-color: var(--ml-color-border);
+		--ml-steps-connector-transition: var(--ml-duration-150) var(--ml-ease-in-out);
+
+		/* Indicator (numbered & circles) */
+		--ml-steps-indicator-size: 32px;
+		--ml-steps-indicator-border-width: 2px;
+		--ml-steps-indicator-font-size: var(--ml-text-sm);
+		--ml-steps-indicator-font-weight: var(--ml-font-medium);
+		--ml-steps-indicator-font-family: var(--ml-font-sans);
+		--ml-steps-indicator-transition: var(--ml-duration-150) var(--ml-ease-in-out);
+
+		/* Indicator upcoming */
+		--ml-steps-upcoming-border-color: var(--ml-color-border);
+		--ml-steps-upcoming-color: var(--ml-color-text-secondary);
+		--ml-steps-upcoming-bg: var(--ml-color-surface);
+
+		/* Indicator dot (circles variant) */
+		--ml-steps-dot-size: 10px;
+
+		/* Icons variant */
+		--ml-steps-icon-indicator-size: 40px;
+		--ml-steps-icon-indicator-radius: var(--ml-radius-lg);
+		--ml-steps-icon-upcoming-color: var(--ml-color-text-muted);
+		--ml-steps-icon-current-border-color: var(--ml-color-text);
+		--ml-steps-icon-current-color: var(--ml-color-text);
+
+		/* Completed indicator text */
+		--ml-steps-completed-indicator-text: #fff;
+
+		/* Bar variant */
+		--ml-steps-bar-height: 4px;
+		--ml-steps-bar-radius: 2px;
+		--ml-steps-bar-color: var(--ml-color-border);
+
+		/* Compact / dots */
+		--ml-steps-compact-dot-size: 12px;
+		--ml-steps-compact-dot-color: var(--ml-color-border);
+
+		/* Content spacing */
+		--ml-steps-content-gap: var(--ml-space-1);
+		--ml-steps-track-gap: var(--ml-space-3);
+		--ml-steps-vertical-content-padding: var(--ml-space-6);
+
+		/* Label */
+		--ml-steps-label-font-family: var(--ml-font-sans);
+		--ml-steps-label-font-size: var(--ml-text-sm);
+		--ml-steps-label-font-weight: var(--ml-font-medium);
+		--ml-steps-label-color: var(--ml-color-text);
+		--ml-steps-label-line-height: var(--ml-leading-tight);
+		--ml-steps-label-upcoming-color: var(--ml-color-text-secondary);
+
+		/* Description */
+		--ml-steps-desc-font-family: var(--ml-font-sans);
+		--ml-steps-desc-font-size: var(--ml-text-xs);
+		--ml-steps-desc-color: var(--ml-color-text-muted);
+		--ml-steps-desc-line-height: var(--ml-leading-normal);
+
 		display: block;
 		width: 100%;
 	}
@@ -30,29 +108,29 @@ export const stepsStyles = () => css `
 	   COMPACT LABEL (Step X of Y)
 	   ============================================ */
 	.ml-steps--compact .ml-steps__list {
-		gap: var(--ml-space-3);
+		gap: var(--ml-steps-compact-gap);
 		justify-content: center;
 		align-items: center;
 	}
 
 	.ml-steps__compact-label {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text-secondary);
+		font-family: var(--ml-steps-compact-label-font-family);
+		font-size: var(--ml-steps-compact-label-font-size);
+		font-weight: var(--ml-steps-compact-label-font-weight);
+		color: var(--ml-steps-compact-label-color);
 		text-align: center;
-		margin-top: var(--ml-space-3);
+		margin-top: var(--ml-steps-compact-label-margin-top);
 	}
 
 	/* ============================================
 	   PANELS
 	   ============================================ */
 	.ml-steps__panels {
-		padding-top: var(--ml-space-6);
+		padding-top: var(--ml-steps-panels-padding-top);
 	}
 
 	.ml-steps--compact .ml-steps__panels {
-		padding-top: var(--ml-space-4);
+		padding-top: var(--ml-steps-compact-panels-padding-top);
 	}
 
 	/* ============================================
@@ -71,13 +149,13 @@ export const stepsStyles = () => css `
 
 	.ml-step--disabled {
 		cursor: not-allowed;
-		opacity: 0.5;
+		opacity: var(--ml-steps-disabled-opacity);
 	}
 
 	.ml-step:focus-visible {
-		outline: 2px solid var(--ml-color-primary);
+		outline: 2px solid var(--ml-steps-focus-color);
 		outline-offset: 2px;
-		border-radius: var(--ml-radius);
+		border-radius: var(--ml-steps-focus-radius);
 	}
 
 	/* Horizontal layout */
@@ -91,13 +169,13 @@ export const stepsStyles = () => css `
 		display: flex;
 		align-items: center;
 		width: 100%;
-		margin-bottom: var(--ml-space-3);
+		margin-bottom: var(--ml-steps-track-gap);
 	}
 
 	.ml-step--horizontal .ml-step__connector-before,
 	.ml-step--horizontal .ml-step__connector-after {
 		flex: 1;
-		height: 2px;
+		height: var(--ml-steps-connector-thickness);
 	}
 
 	.ml-step--horizontal .ml-step__connector--hidden {
@@ -115,13 +193,13 @@ export const stepsStyles = () => css `
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		margin-right: var(--ml-space-3);
+		margin-right: var(--ml-steps-track-gap);
 	}
 
 	.ml-step--vertical .ml-step__connector-before,
 	.ml-step--vertical .ml-step__connector-after {
 		flex: 1;
-		width: 2px;
+		width: var(--ml-steps-connector-thickness);
 		min-height: 12px;
 	}
 
@@ -130,7 +208,7 @@ export const stepsStyles = () => css `
 	}
 
 	.ml-step--vertical .ml-step__content {
-		padding-bottom: var(--ml-space-6);
+		padding-bottom: var(--ml-steps-vertical-content-padding);
 	}
 
 	.ml-step--vertical.ml-step--last .ml-step__content {
@@ -140,11 +218,11 @@ export const stepsStyles = () => css `
 	/* Connectors */
 	.ml-step__connector-before,
 	.ml-step__connector-after {
-		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
+		transition: background-color var(--ml-steps-connector-transition);
 	}
 
 	.ml-step__connector--solid {
-		background-color: var(--ml-color-border);
+		background-color: var(--ml-steps-connector-color);
 	}
 
 	.ml-step__connector--dotted {
@@ -154,8 +232,8 @@ export const stepsStyles = () => css `
 	.ml-step--horizontal .ml-step__connector--dotted {
 		background-image: repeating-linear-gradient(
 			to right,
-			var(--ml-color-border) 0,
-			var(--ml-color-border) 4px,
+			var(--ml-steps-connector-color) 0,
+			var(--ml-steps-connector-color) 4px,
 			transparent 4px,
 			transparent 8px
 		);
@@ -167,8 +245,8 @@ export const stepsStyles = () => css `
 	.ml-step--vertical .ml-step__connector--dotted {
 		background-image: repeating-linear-gradient(
 			to bottom,
-			var(--ml-color-border) 0,
-			var(--ml-color-border) 4px,
+			var(--ml-steps-connector-color) 0,
+			var(--ml-steps-connector-color) 4px,
 			transparent 4px,
 			transparent 8px
 		);
@@ -280,84 +358,84 @@ export const stepsStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			border-color var(--ml-duration-150) var(--ml-ease-in-out),
-			color var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-steps-indicator-transition),
+			border-color var(--ml-steps-indicator-transition),
+			color var(--ml-steps-indicator-transition);
 	}
 
 	/* Numbered */
 	.ml-step__indicator-inner--numbered {
-		width: 32px;
-		height: 32px;
+		width: var(--ml-steps-indicator-size);
+		height: var(--ml-steps-indicator-size);
 		border-radius: 50%;
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		font-family: var(--ml-font-sans);
+		font-size: var(--ml-steps-indicator-font-size);
+		font-weight: var(--ml-steps-indicator-font-weight);
+		font-family: var(--ml-steps-indicator-font-family);
 	}
 
 	.ml-step--upcoming .ml-step__indicator-inner--numbered {
-		border: 2px solid var(--ml-color-border);
-		color: var(--ml-color-text-secondary);
-		background-color: var(--ml-color-surface);
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-steps-upcoming-border-color);
+		color: var(--ml-steps-upcoming-color);
+		background-color: var(--ml-steps-upcoming-bg);
 	}
 
 	.ml-step--current.ml-step--primary .ml-step__indicator-inner--numbered {
-		border: 2px solid var(--ml-color-primary);
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-color-primary);
 		color: var(--ml-color-primary);
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-steps-upcoming-bg);
 	}
 
 	.ml-step--current.ml-step--success .ml-step__indicator-inner--numbered {
-		border: 2px solid var(--ml-color-success);
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-color-success);
 		color: var(--ml-color-success);
-		background-color: var(--ml-color-surface);
+		background-color: var(--ml-steps-upcoming-bg);
 	}
 
 	.ml-step--completed.ml-step--primary .ml-step__indicator-inner--numbered {
 		background-color: var(--ml-color-primary);
-		border: 2px solid var(--ml-color-primary);
-		color: #fff;
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-color-primary);
+		color: var(--ml-steps-completed-indicator-text);
 	}
 
 	.ml-step--completed.ml-step--success .ml-step__indicator-inner--numbered {
 		background-color: var(--ml-color-success);
-		border: 2px solid var(--ml-color-success);
-		color: #fff;
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-color-success);
+		color: var(--ml-steps-completed-indicator-text);
 	}
 
 	/* Circles */
 	.ml-step__indicator-inner--circles {
-		width: 32px;
-		height: 32px;
+		width: var(--ml-steps-indicator-size);
+		height: var(--ml-steps-indicator-size);
 		border-radius: 50%;
 	}
 
 	.ml-step__indicator-dot {
-		width: 10px;
-		height: 10px;
+		width: var(--ml-steps-dot-size);
+		height: var(--ml-steps-dot-size);
 		border-radius: 50%;
-		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
+		transition: background-color var(--ml-steps-connector-transition);
 	}
 
 	.ml-step--upcoming .ml-step__indicator-inner--circles {
-		border: 2px solid var(--ml-color-border);
-		background-color: var(--ml-color-surface);
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-steps-upcoming-border-color);
+		background-color: var(--ml-steps-upcoming-bg);
 	}
 	.ml-step--upcoming .ml-step__indicator-dot {
-		background-color: var(--ml-color-border);
+		background-color: var(--ml-steps-upcoming-border-color);
 	}
 
 	.ml-step--current.ml-step--primary .ml-step__indicator-inner--circles {
-		border: 2px solid var(--ml-color-primary);
-		background-color: var(--ml-color-surface);
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-color-primary);
+		background-color: var(--ml-steps-upcoming-bg);
 	}
 	.ml-step--current.ml-step--primary .ml-step__indicator-dot {
 		background-color: var(--ml-color-primary);
 	}
 
 	.ml-step--current.ml-step--success .ml-step__indicator-inner--circles {
-		border: 2px solid var(--ml-color-success);
-		background-color: var(--ml-color-surface);
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-color-success);
+		background-color: var(--ml-steps-upcoming-bg);
 	}
 	.ml-step--current.ml-step--success .ml-step__indicator-dot {
 		background-color: var(--ml-color-success);
@@ -365,34 +443,34 @@ export const stepsStyles = () => css `
 
 	.ml-step--completed.ml-step--primary .ml-step__indicator-inner--circles {
 		background-color: var(--ml-color-primary);
-		border: 2px solid var(--ml-color-primary);
-		color: #fff;
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-color-primary);
+		color: var(--ml-steps-completed-indicator-text);
 	}
 
 	.ml-step--completed.ml-step--success .ml-step__indicator-inner--circles {
 		background-color: var(--ml-color-success);
-		border: 2px solid var(--ml-color-success);
-		color: #fff;
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-color-success);
+		color: var(--ml-steps-completed-indicator-text);
 	}
 
 	/* Icons */
 	.ml-step__indicator-inner--icons {
-		width: 40px;
-		height: 40px;
-		border-radius: var(--ml-radius-lg);
-		border: 2px solid var(--ml-color-border);
+		width: var(--ml-steps-icon-indicator-size);
+		height: var(--ml-steps-icon-indicator-size);
+		border-radius: var(--ml-steps-icon-indicator-radius);
+		border: var(--ml-steps-indicator-border-width) solid var(--ml-steps-upcoming-border-color);
 	}
 
 	.ml-step--upcoming .ml-step__indicator-inner--icons {
-		border-color: var(--ml-color-border);
-		background-color: var(--ml-color-surface);
-		color: var(--ml-color-text-muted);
+		border-color: var(--ml-steps-upcoming-border-color);
+		background-color: var(--ml-steps-upcoming-bg);
+		color: var(--ml-steps-icon-upcoming-color);
 	}
 
 	.ml-step--current .ml-step__indicator-inner--icons {
-		border-color: var(--ml-color-text);
-		background-color: var(--ml-color-surface);
-		color: var(--ml-color-text);
+		border-color: var(--ml-steps-icon-current-border-color);
+		background-color: var(--ml-steps-upcoming-bg);
+		color: var(--ml-steps-icon-current-color);
 	}
 
 	.ml-step--completed.ml-step--primary .ml-step__indicator-inner--icons {
@@ -417,11 +495,11 @@ export const stepsStyles = () => css `
 
 	.ml-step--bar .ml-step__bar {
 		width: 100%;
-		height: 4px;
-		border-radius: 2px;
-		background-color: var(--ml-color-border);
-		margin-bottom: var(--ml-space-3);
-		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
+		height: var(--ml-steps-bar-height);
+		border-radius: var(--ml-steps-bar-radius);
+		background-color: var(--ml-steps-bar-color);
+		margin-bottom: var(--ml-steps-track-gap);
+		transition: background-color var(--ml-steps-connector-transition);
 	}
 
 	.ml-step--bar.ml-step--current.ml-step--primary .ml-step__bar,
@@ -439,15 +517,15 @@ export const stepsStyles = () => css `
 	}
 
 	.ml-step--bar.ml-step--vertical .ml-step__bar {
-		width: 4px;
+		width: var(--ml-steps-bar-height);
 		height: auto;
 		min-height: 40px;
 		margin-bottom: 0;
-		margin-right: var(--ml-space-3);
+		margin-right: var(--ml-steps-track-gap);
 	}
 
 	.ml-step--bar.ml-step--vertical .ml-step__content {
-		padding-bottom: var(--ml-space-6);
+		padding-bottom: var(--ml-steps-vertical-content-padding);
 	}
 
 	.ml-step--bar.ml-step--vertical.ml-step--last .ml-step__content {
@@ -465,11 +543,11 @@ export const stepsStyles = () => css `
 	}
 
 	.ml-step__dot {
-		width: 12px;
-		height: 12px;
+		width: var(--ml-steps-compact-dot-size);
+		height: var(--ml-steps-compact-dot-size);
 		border-radius: 50%;
-		background-color: var(--ml-color-border);
-		transition: background-color var(--ml-duration-150) var(--ml-ease-in-out);
+		background-color: var(--ml-steps-compact-dot-color);
+		transition: background-color var(--ml-steps-connector-transition);
 	}
 
 	.ml-step--compact.ml-step--current.ml-step--primary .ml-step__dot,
@@ -488,21 +566,21 @@ export const stepsStyles = () => css `
 	.ml-step__content {
 		display: flex;
 		flex-direction: column;
-		gap: var(--ml-space-1);
+		gap: var(--ml-steps-content-gap);
 		min-width: 0;
 	}
 
 	.ml-step__label {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		color: var(--ml-color-text);
-		line-height: var(--ml-leading-tight);
-		transition: color var(--ml-duration-150) var(--ml-ease-in-out);
+		font-family: var(--ml-steps-label-font-family);
+		font-size: var(--ml-steps-label-font-size);
+		font-weight: var(--ml-steps-label-font-weight);
+		color: var(--ml-steps-label-color);
+		line-height: var(--ml-steps-label-line-height);
+		transition: color var(--ml-steps-connector-transition);
 	}
 
 	.ml-step--upcoming .ml-step__label {
-		color: var(--ml-color-text-secondary);
+		color: var(--ml-steps-label-upcoming-color);
 	}
 
 	.ml-step--current.ml-step--primary .ml-step__label {
@@ -514,10 +592,10 @@ export const stepsStyles = () => css `
 	}
 
 	.ml-step__description {
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		color: var(--ml-color-text-muted);
-		line-height: var(--ml-leading-normal);
+		font-family: var(--ml-steps-desc-font-family);
+		font-size: var(--ml-steps-desc-font-size);
+		color: var(--ml-steps-desc-color);
+		line-height: var(--ml-steps-desc-line-height);
 	}
 
 	/* ============================================

package/lib/components/navigation/tabs/tab-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tab-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;;GAYG;AACH,qBAMa,iBAAkB,YAAW,WAAW;IACpD,UAAU,EAAG,WAAW,CAAC;IAEzB,iDAAiD;IACjD,KAAK,SAAM;CACX"}
+{"version":3,"file":"tab-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tab-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;;GAYG;AACH,qBAMa,iBAAkB,YAAW,WAAW;IAC7C,UAAU,EAAG,WAAW,CAAC;IAEhC,iDAAiD;IAC1C,KAAK,SAAM;CAClB"}

package/lib/components/navigation/tabs/tab.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tab.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,YAAa,YAAW,WAAW;IAC/C,UAAU,EAAG,WAAW,CAAC;IAEzB,qDAAqD;IACrD,KAAK,SAAM;IAEX,qBAAqB;IACrB,KAAK,SAAM;IAEX,yBAAyB;IACzB,IAAI,SAAM;IAEV,uBAAuB;IACvB,QAAQ,UAAS;IAEjB,+CAA+C;IAC/C,MAAM,UAAS;IAEf,0BAA0B;IAC1B,IAAI,SAAM;IAEV,0BAA0B;IAC1B,WAAW,QAAO,IAAI,CAWpB;CACF"}
+{"version":3,"file":"tab.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tab.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;;GAWG;AACH,qBAMa,YAAa,YAAW,WAAW;IACxC,UAAU,EAAG,WAAW,CAAC;IAEhC,qDAAqD;IAC9C,KAAK,SAAM;IAElB,qBAAqB;IACd,KAAK,SAAM;IAElB,yBAAyB;IAClB,IAAI,SAAM;IAEjB,uBAAuB;IAChB,QAAQ,UAAS;IAExB,+CAA+C;IACxC,MAAM,UAAS;IAEtB,0BAA0B;IACnB,IAAI,SAAM;IAEjB,0BAA0B;IACnB,WAAW,QAAO,IAAI,CAW3B;CACF"}

package/lib/components/navigation/tabs/tab.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,iDA4CrB,CAAC"}
+{"version":3,"file":"tab.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,iDAoErB,CAAC"}

package/lib/components/navigation/tabs/tab.styles.js

@@ -1,46 +1,70 @@
 import { css } from '@melodicdev/core';
 export const tabStyles = () => css `
 	:host {
+		/* Tab base */
+		--ml-tab-gap: var(--ml-space-2);
+		--ml-tab-padding-y: var(--ml-space-2);
+		--ml-tab-padding-x: var(--ml-space-4);
+		--ml-tab-font-family: var(--ml-font-sans);
+		--ml-tab-font-weight: var(--ml-font-medium);
+		--ml-tab-color: var(--ml-color-text-secondary);
+		--ml-tab-transition: var(--ml-duration-150) var(--ml-ease-in-out);
+
+		/* Tab hover */
+		--ml-tab-hover-color: var(--ml-color-text);
+
+		/* Tab focus */
+		--ml-tab-focus-color: var(--ml-color-primary);
+
+		/* Tab active */
+		--ml-tab-active-color: var(--ml-color-primary);
+
+		/* Tab disabled */
+		--ml-tab-disabled-color: var(--ml-color-text-muted);
+
+		/* Label */
+		--ml-tab-label-line-height: var(--ml-leading-tight);
+
 		display: contents;
 	}
 
 	.ml-tab {
 		display: inline-flex;
 		align-items: center;
-		gap: var(--ml-space-2);
-		padding: var(--ml-space-2) var(--ml-space-4);
-		font-family: var(--ml-font-sans);
-		font-weight: var(--ml-font-medium);
+		gap: var(--ml-tab-gap);
+		padding: var(--ml-tab-padding-y) var(--ml-tab-padding-x);
+		font-family: var(--ml-tab-font-family);
+		font-weight: var(--ml-tab-font-weight);
 		font-size: inherit;
-		color: var(--ml-color-text-secondary);
+		color: var(--ml-tab-color);
 		background: transparent;
 		border: none;
 		cursor: pointer;
 		white-space: nowrap;
 		transition:
-			color var(--ml-duration-150) var(--ml-ease-in-out),
-			background-color var(--ml-duration-150) var(--ml-ease-in-out);
+			color var(--ml-tab-transition),
+			background-color var(--ml-tab-transition);
 	}
 
 	.ml-tab:hover:not(:disabled) {
-		color: var(--ml-color-text);
+		color: var(--ml-tab-hover-color);
 	}
 
 	.ml-tab:focus-visible {
-		outline: 2px solid var(--ml-color-primary);
+		outline: 2px solid var(--ml-tab-focus-color);
 		outline-offset: 2px;
 	}
 
 	.ml-tab--active {
-		color: var(--ml-color-primary);
+		color: var(--ml-tab-active-color);
 	}
 
 	.ml-tab--disabled {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-tab-disabled-color);
 		cursor: not-allowed;
 	}
 
 	.ml-tab__label {
-		line-height: var(--ml-leading-tight);
+		line-height: var(--ml-tab-label-line-height);
 	}
 `;

package/lib/components/navigation/tabs/tabs.component.d.ts

@@ -52,7 +52,7 @@ export declare class TabsComponent implements IElementRef, OnCreate, OnDestroy,
     /** Tab configurations (alternative to slotted ml-tab elements) */
     tabs: TabConfig[];
     /** Internal tracking of slotted tabs */
-    _slottedTabs: HTMLElement[];
+    private _slottedTabs;
     /** Navigation event listener for routed mode */
     private readonly _handleNavigation;
     /** Listener for ml:tab-click from slotted ml-tab elements */

package/lib/components/navigation/tabs/tabs.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tabs.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBAMa,aAAc,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;IAC/E,UAAU,EAAG,WAAW,CAAC;IAEzB,iCAAiC;IACjC,KAAK,SAAM;IAEX,qBAAqB;IACrB,OAAO,EAAE,WAAW,CAAU;IAE9B,mBAAmB;IACnB,IAAI,EAAE,IAAI,CAAQ;IAElB,sBAAsB;IACtB,WAAW,EAAE,eAAe,CAAgB;IAE5C,gCAAgC;IAChC,MAAM,UAAS;IAEf,kEAAkE;IAClE,IAAI,EAAE,SAAS,EAAE,CAAM;IAEvB,wCAAwC;IACxC,YAAY,EAAE,WAAW,EAAE,CAAM;IAEjC,gDAAgD;IAChD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAgC;IAElE,6DAA6D;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAG9B;IAEF,QAAQ,IAAI,IAAI;IAShB,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAQjB,8BAA8B;IAC9B,mBAAmB,GAAI,OAAO,KAAK,KAAG,IAAI,CAcxC;IAEF,uBAAuB;IACvB,cAAc,GAAI,UAAU,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,CAoBtD;IAEF,iCAAiC;IACjC,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmC1C;IAEF,4CAA4C;IAC5C,UAAU,IAAI,SAAS,EAAE;IAczB,uBAAuB;IACvB,OAAO,CAAC,aAAa;IAIrB,0CAA0C;IAC1C,OAAO,CAAC,eAAe;IAOvB,8BAA8B;IAC9B,OAAO,CAAC,qBAAqB;IAU7B,2BAA2B;IAC3B,OAAO,CAAC,QAAQ;IAMhB,2DAA2D;IAC3D,OAAO,CAAC,aAAa;IASrB,6CAA6C;IAC7C,OAAO,CAAC,YAAY;CAGpB"}
+{"version":3,"file":"tabs.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tabs.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACnF,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,KAAK,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAI/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,qBAMa,aAAc,YAAW,WAAW,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ;IACxE,UAAU,EAAG,WAAW,CAAC;IAEhC,iCAAiC;IAC1B,KAAK,SAAM;IAElB,qBAAqB;IACd,OAAO,EAAE,WAAW,CAAU;IAErC,mBAAmB;IACZ,IAAI,EAAE,IAAI,CAAQ;IAEzB,sBAAsB;IACf,WAAW,EAAE,eAAe,CAAgB;IAEnD,gCAAgC;IACzB,MAAM,UAAS;IAEtB,kEAAkE;IAC3D,IAAI,EAAE,SAAS,EAAE,CAAM;IAE9B,wCAAwC;IACxC,OAAO,CAAC,YAAY,CAAqB;IAEzC,gDAAgD;IAChD,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAgC;IAElE,6DAA6D;IAC7D,OAAO,CAAC,QAAQ,CAAC,eAAe,CAG9B;IAEK,QAAQ,IAAI,IAAI;IAShB,QAAQ,IAAI,IAAI;IAKhB,SAAS,IAAI,IAAI;IAQxB,8BAA8B;IACvB,mBAAmB,GAAI,OAAO,KAAK,KAAG,IAAI,CAc/C;IAEF,uBAAuB;IAChB,cAAc,GAAI,UAAU,MAAM,EAAE,OAAO,MAAM,KAAG,IAAI,CAoB7D;IAEF,iCAAiC;IAC1B,aAAa,GAAI,OAAO,aAAa,KAAG,IAAI,CAmCjD;IAEF,4CAA4C;IACrC,UAAU,IAAI,SAAS,EAAE;IAchC,uBAAuB;IACvB,OAAO,CAAC,aAAa;IAIrB,0CAA0C;IAC1C,OAAO,CAAC,eAAe;IAOvB,8BAA8B;IAC9B,OAAO,CAAC,qBAAqB;IAU7B,2BAA2B;IAC3B,OAAO,CAAC,QAAQ;IAMhB,2DAA2D;IAC3D,OAAO,CAAC,aAAa;IASrB,6CAA6C;IAC7C,OAAO,CAAC,YAAY;CAGpB"}

package/lib/components/navigation/tabs/tabs.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tabs.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDAoPtB,CAAC"}
+{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/tabs/tabs.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,iDAyTtB,CAAC"}