@melodicdev/components 1.4.0 → 1.5.1

package/lib/components/navigation/sidebar/sidebar-item.styles.js

@@ -1,6 +1,65 @@
 import { css } from '@melodicdev/core';
 export const sidebarItemStyles = () => css `
 	:host {
+		/* Item link */
+		--ml-sidebar-item-gap: var(--ml-space-3);
+		--ml-sidebar-item-padding-y: var(--ml-space-2);
+		--ml-sidebar-item-padding-x: var(--ml-space-3);
+		--ml-sidebar-item-radius: var(--ml-radius);
+		--ml-sidebar-item-color: var(--ml-color-text-secondary);
+		--ml-sidebar-item-font-family: var(--ml-font-sans);
+		--ml-sidebar-item-font-size: var(--ml-text-sm);
+		--ml-sidebar-item-font-weight: var(--ml-font-medium);
+		--ml-sidebar-item-line-height: var(--ml-leading-tight);
+		--ml-sidebar-item-transition: var(--ml-duration-150) var(--ml-ease-in-out);
+
+		/* Item hover */
+		--ml-sidebar-item-hover-bg: var(--ml-gray-100);
+		--ml-sidebar-item-hover-color: var(--ml-color-text);
+
+		/* Item focus */
+		--ml-sidebar-item-focus-color: var(--ml-color-primary);
+
+		/* Item active */
+		--ml-sidebar-item-active-bg: var(--ml-color-primary);
+		--ml-sidebar-item-active-color: var(--ml-color-text-inverse);
+		--ml-sidebar-item-active-hover-bg: var(--ml-color-primary-hover);
+
+		/* Active indicator (left border accent) */
+		--ml-sidebar-item-active-indicator-width: 0px;
+		--ml-sidebar-item-active-indicator-color: transparent;
+
+		/* Item disabled */
+		--ml-sidebar-item-disabled-color: var(--ml-color-text-muted);
+		--ml-sidebar-item-disabled-opacity: 0.6;
+
+		/* Icon colors (separate from text) */
+		--ml-sidebar-item-icon-color: inherit;
+		--ml-sidebar-item-active-icon-color: inherit;
+		--ml-sidebar-item-hover-icon-color: inherit;
+
+		/* Item icon size */
+		--ml-sidebar-item-icon-size: 20px;
+
+		/* Item trailing gap */
+		--ml-sidebar-item-trailing-gap: var(--ml-space-2);
+
+		/* Badge */
+		--ml-sidebar-item-badge-min-size: 20px;
+		--ml-sidebar-item-badge-padding-x: var(--ml-space-1-5);
+		--ml-sidebar-item-badge-radius: var(--ml-radius-full);
+		--ml-sidebar-item-badge-font-size: var(--ml-text-xs);
+		--ml-sidebar-item-badge-font-weight: var(--ml-font-medium);
+		--ml-sidebar-item-badge-bg: var(--ml-color-surface-tertiary);
+		--ml-sidebar-item-badge-color: var(--ml-color-text-secondary);
+
+		/* Active badge overrides */
+		--ml-sidebar-item-active-badge-bg: var(--ml-sidebar-item-badge-bg);
+		--ml-sidebar-item-active-badge-color: var(--ml-sidebar-item-badge-color);
+
+		/* Chevron transition */
+		--ml-sidebar-item-chevron-transition: var(--ml-duration-200) var(--ml-ease-in-out);
+
 		display: block;
 	}
 
@@ -11,56 +70,58 @@ export const sidebarItemStyles = () => css `
 	.ml-sidebar-item__link {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-3);
+		gap: var(--ml-sidebar-item-gap);
 		box-sizing: border-box;
 		width: 100%;
-		padding: var(--ml-space-2) var(--ml-space-3);
-		padding-left: calc(var(--ml-space-3) + (var(--level) * var(--ml-space-5)));
+		padding: var(--ml-sidebar-item-padding-y) var(--ml-sidebar-item-padding-x);
+		padding-left: calc(var(--ml-sidebar-item-padding-x) + (var(--level) * var(--ml-space-5)));
 		border: none;
-		border-radius: var(--ml-radius);
+		border-left: var(--ml-sidebar-item-active-indicator-width) solid transparent;
+		border-radius: var(--ml-sidebar-item-radius);
 		background: transparent;
-		color: var(--ml-color-text-secondary);
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		line-height: var(--ml-leading-tight);
+		color: var(--ml-sidebar-item-color);
+		font-family: var(--ml-sidebar-item-font-family);
+		font-size: var(--ml-sidebar-item-font-size);
+		font-weight: var(--ml-sidebar-item-font-weight);
+		line-height: var(--ml-sidebar-item-line-height);
 		text-align: left;
 		text-decoration: none;
 		cursor: pointer;
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			color var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-sidebar-item-transition),
+			color var(--ml-sidebar-item-transition);
 	}
 
 	.ml-sidebar-item__link:hover:not(.ml-sidebar-item__link--disabled):not(.ml-sidebar-item__link--active) {
-		background-color: var(--ml-gray-100);
-		color: var(--ml-color-text);
+		background-color: var(--ml-sidebar-item-hover-bg);
+		color: var(--ml-sidebar-item-hover-color);
 	}
 
 	.ml-sidebar-item__link:focus-visible {
-		outline: 2px solid var(--ml-color-primary);
+		outline: 2px solid var(--ml-sidebar-item-focus-color);
 		outline-offset: -2px;
 	}
 
 	.ml-sidebar-item__link--active {
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-sidebar-item-active-bg);
+		color: var(--ml-sidebar-item-active-color);
+		border-left-color: var(--ml-sidebar-item-active-indicator-color);
 	}
 
 	.ml-sidebar-item__link--active:hover {
-		background-color: var(--ml-color-primary-hover);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-sidebar-item-active-hover-bg);
+		color: var(--ml-sidebar-item-active-color);
 	}
 
 	.ml-sidebar-item__link--disabled {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-sidebar-item-disabled-color);
 		cursor: not-allowed;
-		opacity: 0.6;
+		opacity: var(--ml-sidebar-item-disabled-opacity);
 	}
 
 	.ml-sidebar-item__link--collapsed {
 		justify-content: center;
-		padding: var(--ml-space-2);
+		padding: var(--ml-sidebar-item-padding-y);
 	}
 
 	/* Leading area (icon) */
@@ -69,9 +130,17 @@ export const sidebarItemStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		width: 20px;
-		height: 20px;
-		color: inherit;
+		width: var(--ml-sidebar-item-icon-size);
+		height: var(--ml-sidebar-item-icon-size);
+		color: var(--ml-sidebar-item-icon-color);
+	}
+
+	.ml-sidebar-item__link--active .ml-sidebar-item__leading {
+		color: var(--ml-sidebar-item-active-icon-color);
+	}
+
+	.ml-sidebar-item__link:hover:not(.ml-sidebar-item__link--disabled):not(.ml-sidebar-item__link--active) .ml-sidebar-item__leading {
+		color: var(--ml-sidebar-item-hover-icon-color);
 	}
 
 	/* Label */
@@ -90,7 +159,7 @@ export const sidebarItemStyles = () => css `
 	.ml-sidebar-item__trailing {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-sidebar-item-trailing-gap);
 		flex-shrink: 0;
 	}
 
@@ -103,15 +172,15 @@ export const sidebarItemStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 20px;
-		height: 20px;
-		padding: 0 var(--ml-space-1-5);
-		border-radius: var(--ml-radius-full);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-medium);
+		min-width: var(--ml-sidebar-item-badge-min-size);
+		height: var(--ml-sidebar-item-badge-min-size);
+		padding: 0 var(--ml-sidebar-item-badge-padding-x);
+		border-radius: var(--ml-sidebar-item-badge-radius);
+		font-size: var(--ml-sidebar-item-badge-font-size);
+		font-weight: var(--ml-sidebar-item-badge-font-weight);
 		line-height: 1;
-		background-color: var(--ml-color-surface-tertiary);
-		color: var(--ml-color-text-secondary);
+		background-color: var(--ml-sidebar-item-badge-bg);
+		color: var(--ml-sidebar-item-badge-color);
 	}
 
 	.ml-sidebar-item__badge--primary {
@@ -134,9 +203,14 @@ export const sidebarItemStyles = () => css `
 		color: var(--ml-color-error);
 	}
 
+	.ml-sidebar-item__link--active .ml-sidebar-item__badge {
+		background-color: var(--ml-sidebar-item-active-badge-bg);
+		color: var(--ml-sidebar-item-active-badge-color);
+	}
+
 	/* Chevron for expandable items */
 	.ml-sidebar-item__chevron {
-		transition: transform var(--ml-duration-200) var(--ml-ease-in-out);
+		transition: transform var(--ml-sidebar-item-chevron-transition);
 	}
 
 	.ml-sidebar-item__link--expanded .ml-sidebar-item__chevron {

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

@@ -1 +1 @@
-{"version":3,"file":"sidebar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDA8RzB,CAAC"}
+{"version":3,"file":"sidebar.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/sidebar/sidebar.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDAuZzB,CAAC"}

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

@@ -1,6 +1,112 @@
 import { css } from '@melodicdev/core';
 export const sidebarStyles = () => css `
 	:host {
+		/* Container */
+		--ml-sidebar-width: 280px;
+		--ml-sidebar-bg: var(--ml-color-surface);
+		--ml-sidebar-border-width: var(--ml-border);
+		--ml-sidebar-border-color: var(--ml-color-border);
+		--ml-sidebar-transition: var(--ml-duration-200) var(--ml-ease-in-out);
+
+		/* Slim expanded shadow */
+		--ml-sidebar-slim-expanded-shadow: var(--ml-shadow-lg);
+
+		/* Header */
+		--ml-sidebar-header-padding: var(--ml-space-4);
+
+		/* Search */
+		--ml-sidebar-search-padding-y: var(--ml-space-3);
+		--ml-sidebar-search-padding-x: var(--ml-space-4);
+
+		/* Main nav area */
+		--ml-sidebar-main-padding-y: var(--ml-space-2);
+
+		/* Scrollbar */
+		--ml-sidebar-scrollbar-width: 4px;
+		--ml-sidebar-scrollbar-color: var(--ml-color-border);
+		--ml-sidebar-scrollbar-radius: var(--ml-radius-full);
+
+		/* Footer */
+		--ml-sidebar-footer-nav-padding: var(--ml-space-2);
+		--ml-sidebar-footer-nav-gap: var(--ml-space-0-5);
+		--ml-sidebar-feature-padding-y: var(--ml-space-3);
+		--ml-sidebar-feature-padding-x: var(--ml-space-4);
+		--ml-sidebar-user-padding-y: var(--ml-space-3);
+		--ml-sidebar-user-padding-x: var(--ml-space-4);
+
+		/* Group label */
+		--ml-sidebar-group-label-padding-y: var(--ml-space-2);
+		--ml-sidebar-group-label-padding-x: var(--ml-space-4);
+		--ml-sidebar-group-label-font-family: var(--ml-font-sans);
+		--ml-sidebar-group-label-font-size: var(--ml-text-xs);
+		--ml-sidebar-group-label-font-weight: var(--ml-font-semibold);
+		--ml-sidebar-group-label-color: var(--ml-color-text-muted);
+		--ml-sidebar-group-label-letter-spacing: 0.05em;
+		--ml-sidebar-group-label-line-height: var(--ml-leading-tight);
+
+		/* Group items */
+		--ml-sidebar-group-items-gap: var(--ml-space-0-5);
+		--ml-sidebar-group-items-padding-x: var(--ml-space-2);
+
+		/* Item link */
+		--ml-sidebar-item-gap: var(--ml-space-3);
+		--ml-sidebar-item-padding-y: var(--ml-space-2);
+		--ml-sidebar-item-padding-x: var(--ml-space-3);
+		--ml-sidebar-item-radius: var(--ml-radius);
+		--ml-sidebar-item-color: var(--ml-color-text-secondary);
+		--ml-sidebar-item-font-family: var(--ml-font-sans);
+		--ml-sidebar-item-font-size: var(--ml-text-sm);
+		--ml-sidebar-item-font-weight: var(--ml-font-medium);
+		--ml-sidebar-item-line-height: var(--ml-leading-tight);
+		--ml-sidebar-item-transition: var(--ml-duration-150) var(--ml-ease-in-out);
+
+		/* Item hover */
+		--ml-sidebar-item-hover-bg: var(--ml-gray-100);
+		--ml-sidebar-item-hover-color: var(--ml-color-text);
+
+		/* Item focus */
+		--ml-sidebar-item-focus-color: var(--ml-color-primary);
+
+		/* Item active */
+		--ml-sidebar-item-active-bg: var(--ml-color-primary);
+		--ml-sidebar-item-active-color: var(--ml-color-text-inverse);
+		--ml-sidebar-item-active-hover-bg: var(--ml-color-primary-hover);
+
+		/* Active indicator (left border accent) */
+		--ml-sidebar-item-active-indicator-width: 0px;
+		--ml-sidebar-item-active-indicator-color: transparent;
+
+		/* Item disabled */
+		--ml-sidebar-item-disabled-color: var(--ml-color-text-muted);
+		--ml-sidebar-item-disabled-opacity: 0.6;
+
+		/* Icon colors (separate from text) */
+		--ml-sidebar-item-icon-color: inherit;
+		--ml-sidebar-item-active-icon-color: inherit;
+		--ml-sidebar-item-hover-icon-color: inherit;
+
+		/* Item icon size */
+		--ml-sidebar-item-icon-size: 20px;
+
+		/* Item trailing gap */
+		--ml-sidebar-item-trailing-gap: var(--ml-space-2);
+
+		/* Badge */
+		--ml-sidebar-badge-min-size: 20px;
+		--ml-sidebar-badge-padding-x: var(--ml-space-1-5);
+		--ml-sidebar-badge-radius: var(--ml-radius-full);
+		--ml-sidebar-badge-font-size: var(--ml-text-xs);
+		--ml-sidebar-badge-font-weight: var(--ml-font-medium);
+		--ml-sidebar-badge-bg: var(--ml-color-surface-tertiary);
+		--ml-sidebar-badge-color: var(--ml-color-text-secondary);
+
+		/* Active badge overrides */
+		--ml-sidebar-item-active-badge-bg: var(--ml-sidebar-badge-bg);
+		--ml-sidebar-item-active-badge-color: var(--ml-sidebar-badge-color);
+
+		/* Chevron transition */
+		--ml-sidebar-chevron-transition: var(--ml-duration-200) var(--ml-ease-in-out);
+
 		display: block;
 		height: 100%;
 	}
@@ -12,10 +118,10 @@ export const sidebarStyles = () => css `
 		display: flex;
 		flex-direction: column;
 		height: 100%;
-		width: var(--ml-sidebar-width, 280px);
-		background-color: var(--ml-color-surface);
-		border-right: var(--ml-border) solid var(--ml-color-border);
-		transition: width var(--ml-duration-200) var(--ml-ease-in-out);
+		width: var(--ml-sidebar-width);
+		background-color: var(--ml-sidebar-bg);
+		border-right: var(--ml-sidebar-border-width) solid var(--ml-sidebar-border-color);
+		transition: width var(--ml-sidebar-transition);
 	}
 
 	/* Slim variant - collapsed (icons only) */
@@ -27,7 +133,7 @@ export const sidebarStyles = () => css `
 	/* Slim variant - expanded on hover */
 	.ml-sidebar--slim:not(.ml-sidebar--collapsed) {
 		--ml-sidebar-width: 280px;
-		box-shadow: var(--ml-shadow-lg);
+		box-shadow: var(--ml-sidebar-slim-expanded-shadow);
 		z-index: 50;
 		position: relative;
 	}
@@ -37,8 +143,8 @@ export const sidebarStyles = () => css `
 	   ============================================ */
 	.ml-sidebar__header {
 		flex-shrink: 0;
-		padding: var(--ml-space-4);
-		border-bottom: var(--ml-border) solid var(--ml-color-border);
+		padding: var(--ml-sidebar-header-padding);
+		border-bottom: var(--ml-sidebar-border-width) solid var(--ml-sidebar-border-color);
 	}
 
 	.ml-sidebar__header:empty {
@@ -50,7 +156,7 @@ export const sidebarStyles = () => css `
 	   ============================================ */
 	.ml-sidebar__search {
 		flex-shrink: 0;
-		padding: var(--ml-space-3) var(--ml-space-4);
+		padding: var(--ml-sidebar-search-padding-y) var(--ml-sidebar-search-padding-x);
 	}
 
 	/* ============================================
@@ -60,12 +166,12 @@ export const sidebarStyles = () => css `
 		flex: 1;
 		overflow-y: auto;
 		overflow-x: hidden;
-		padding: var(--ml-space-2) 0;
+		padding: var(--ml-sidebar-main-padding-y) 0;
 	}
 
 	/* Scrollbar styling */
 	.ml-sidebar__main::-webkit-scrollbar {
-		width: 4px;
+		width: var(--ml-sidebar-scrollbar-width);
 	}
 
 	.ml-sidebar__main::-webkit-scrollbar-track {
@@ -73,8 +179,8 @@ export const sidebarStyles = () => css `
 	}
 
 	.ml-sidebar__main::-webkit-scrollbar-thumb {
-		background-color: var(--ml-color-border);
-		border-radius: var(--ml-radius-full);
+		background-color: var(--ml-sidebar-scrollbar-color);
+		border-radius: var(--ml-sidebar-scrollbar-radius);
 	}
 
 	/* ============================================
@@ -83,14 +189,14 @@ export const sidebarStyles = () => css `
 	.ml-sidebar__footer {
 		flex-shrink: 0;
 		margin-top: auto;
-		border-top: var(--ml-border) solid var(--ml-color-border);
+		border-top: var(--ml-sidebar-border-width) solid var(--ml-sidebar-border-color);
 	}
 
 	.ml-sidebar__footer-nav {
-		padding: var(--ml-space-2);
+		padding: var(--ml-sidebar-footer-nav-padding);
 		display: flex;
 		flex-direction: column;
-		gap: var(--ml-space-0-5);
+		gap: var(--ml-sidebar-footer-nav-gap);
 	}
 
 	.ml-sidebar__footer-nav:empty {
@@ -98,12 +204,12 @@ export const sidebarStyles = () => css `
 	}
 
 	.ml-sidebar__feature {
-		padding: var(--ml-space-3) var(--ml-space-4);
+		padding: var(--ml-sidebar-feature-padding-y) var(--ml-sidebar-feature-padding-x);
 	}
 
 	.ml-sidebar__user {
-		padding: var(--ml-space-3) var(--ml-space-4);
-		border-top: var(--ml-border) solid var(--ml-color-border);
+		padding: var(--ml-sidebar-user-padding-y) var(--ml-sidebar-user-padding-x);
+		border-top: var(--ml-sidebar-border-width) solid var(--ml-sidebar-border-color);
 	}
 
 	/* ============================================
@@ -115,21 +221,21 @@ export const sidebarStyles = () => css `
 
 	.ml-sidebar__group-label {
 		display: block;
-		padding: var(--ml-space-2) var(--ml-space-4);
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text-muted);
+		padding: var(--ml-sidebar-group-label-padding-y) var(--ml-sidebar-group-label-padding-x);
+		font-family: var(--ml-sidebar-group-label-font-family);
+		font-size: var(--ml-sidebar-group-label-font-size);
+		font-weight: var(--ml-sidebar-group-label-font-weight);
+		color: var(--ml-sidebar-group-label-color);
 		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		line-height: var(--ml-leading-tight);
+		letter-spacing: var(--ml-sidebar-group-label-letter-spacing);
+		line-height: var(--ml-sidebar-group-label-line-height);
 	}
 
 	.ml-sidebar__group-items {
 		display: flex;
 		flex-direction: column;
-		gap: var(--ml-space-0-5);
-		padding: 0 var(--ml-space-2);
+		gap: var(--ml-sidebar-group-items-gap);
+		padding: 0 var(--ml-sidebar-group-items-padding-x);
 	}
 
 	/* ============================================
@@ -142,56 +248,58 @@ export const sidebarStyles = () => css `
 	.ml-sidebar__item-link {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-3);
+		gap: var(--ml-sidebar-item-gap);
 		box-sizing: border-box;
 		width: 100%;
-		padding: var(--ml-space-2) var(--ml-space-3);
-		padding-left: calc(var(--ml-space-3) + (var(--level) * var(--ml-space-5)));
+		padding: var(--ml-sidebar-item-padding-y) var(--ml-sidebar-item-padding-x);
+		padding-left: calc(var(--ml-sidebar-item-padding-x) + (var(--level) * var(--ml-space-5)));
 		border: none;
-		border-radius: var(--ml-radius);
+		border-left: var(--ml-sidebar-item-active-indicator-width) solid transparent;
+		border-radius: var(--ml-sidebar-item-radius);
 		background: transparent;
-		color: var(--ml-color-text-secondary);
-		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-sm);
-		font-weight: var(--ml-font-medium);
-		line-height: var(--ml-leading-tight);
+		color: var(--ml-sidebar-item-color);
+		font-family: var(--ml-sidebar-item-font-family);
+		font-size: var(--ml-sidebar-item-font-size);
+		font-weight: var(--ml-sidebar-item-font-weight);
+		line-height: var(--ml-sidebar-item-line-height);
 		text-align: left;
 		text-decoration: none;
 		cursor: pointer;
 		transition:
-			background-color var(--ml-duration-150) var(--ml-ease-in-out),
-			color var(--ml-duration-150) var(--ml-ease-in-out);
+			background-color var(--ml-sidebar-item-transition),
+			color var(--ml-sidebar-item-transition);
 	}
 
 	.ml-sidebar__item-link:hover:not(.ml-sidebar__item-link--disabled):not(.ml-sidebar__item-link--active) {
-		background-color: var(--ml-gray-100);
-		color: var(--ml-color-text);
+		background-color: var(--ml-sidebar-item-hover-bg);
+		color: var(--ml-sidebar-item-hover-color);
 	}
 
 	.ml-sidebar__item-link:focus-visible {
-		outline: 2px solid var(--ml-color-primary);
+		outline: 2px solid var(--ml-sidebar-item-focus-color);
 		outline-offset: -2px;
 	}
 
 	.ml-sidebar__item-link--active {
-		background-color: var(--ml-color-primary);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-sidebar-item-active-bg);
+		color: var(--ml-sidebar-item-active-color);
+		border-left-color: var(--ml-sidebar-item-active-indicator-color);
 	}
 
 	.ml-sidebar__item-link--active:hover {
-		background-color: var(--ml-color-primary-hover);
-		color: var(--ml-color-text-inverse);
+		background-color: var(--ml-sidebar-item-active-hover-bg);
+		color: var(--ml-sidebar-item-active-color);
 	}
 
 	.ml-sidebar__item-link--disabled {
-		color: var(--ml-color-text-muted);
+		color: var(--ml-sidebar-item-disabled-color);
 		cursor: not-allowed;
-		opacity: 0.6;
+		opacity: var(--ml-sidebar-item-disabled-opacity);
 	}
 
 	.ml-sidebar__item-link--collapsed {
 		justify-content: center;
-		padding: var(--ml-space-2);
+		padding: var(--ml-sidebar-item-padding-y);
 	}
 
 	/* Leading area (icon) */
@@ -200,9 +308,17 @@ export const sidebarStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		width: 20px;
-		height: 20px;
-		color: inherit;
+		width: var(--ml-sidebar-item-icon-size);
+		height: var(--ml-sidebar-item-icon-size);
+		color: var(--ml-sidebar-item-icon-color);
+	}
+
+	.ml-sidebar__item-link--active .ml-sidebar__item-leading {
+		color: var(--ml-sidebar-item-active-icon-color);
+	}
+
+	.ml-sidebar__item-link:hover:not(.ml-sidebar__item-link--disabled):not(.ml-sidebar__item-link--active) .ml-sidebar__item-leading {
+		color: var(--ml-sidebar-item-hover-icon-color);
 	}
 
 	/* Label */
@@ -217,7 +333,7 @@ export const sidebarStyles = () => css `
 	.ml-sidebar__item-trailing {
 		display: flex;
 		align-items: center;
-		gap: var(--ml-space-2);
+		gap: var(--ml-sidebar-item-trailing-gap);
 		flex-shrink: 0;
 	}
 
@@ -226,15 +342,15 @@ export const sidebarStyles = () => css `
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		min-width: 20px;
-		height: 20px;
-		padding: 0 var(--ml-space-1-5);
-		border-radius: var(--ml-radius-full);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-medium);
+		min-width: var(--ml-sidebar-badge-min-size);
+		height: var(--ml-sidebar-badge-min-size);
+		padding: 0 var(--ml-sidebar-badge-padding-x);
+		border-radius: var(--ml-sidebar-badge-radius);
+		font-size: var(--ml-sidebar-badge-font-size);
+		font-weight: var(--ml-sidebar-badge-font-weight);
 		line-height: 1;
-		background-color: var(--ml-color-surface-tertiary);
-		color: var(--ml-color-text-secondary);
+		background-color: var(--ml-sidebar-badge-bg);
+		color: var(--ml-sidebar-badge-color);
 	}
 
 	.ml-sidebar__item-badge--primary {
@@ -257,9 +373,14 @@ export const sidebarStyles = () => css `
 		color: var(--ml-color-error);
 	}
 
+	.ml-sidebar__item-link--active .ml-sidebar__item-badge {
+		background-color: var(--ml-sidebar-item-active-badge-bg);
+		color: var(--ml-sidebar-item-active-badge-color);
+	}
+
 	/* Chevron for expandable items */
 	.ml-sidebar__item-chevron {
-		transition: transform var(--ml-duration-200) var(--ml-ease-in-out);
+		transition: transform var(--ml-sidebar-chevron-transition);
 	}
 
 	.ml-sidebar__item-link--expanded .ml-sidebar__item-chevron {
@@ -283,6 +404,6 @@ export const sidebarStyles = () => css `
 	/* Slotted elements in collapsed state */
 	::slotted([slot="search"]),
 	::slotted([slot="feature"]) {
-		transition: opacity var(--ml-duration-150) var(--ml-ease-in-out);
+		transition: opacity var(--ml-sidebar-item-transition);
 	}
 `;

package/lib/components/navigation/steps/step.styles.d.ts.map

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