@melodicdev/components 1.3.0 → 1.5.0

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

@@ -1,6 +1,99 @@
 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);
+
+		/* Item disabled */
+		--ml-sidebar-item-disabled-color: var(--ml-color-text-muted);
+		--ml-sidebar-item-disabled-opacity: 0.6;
+
+		/* 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);
+
+		/* Chevron transition */
+		--ml-sidebar-chevron-transition: var(--ml-duration-200) var(--ml-ease-in-out);
+
 		display: block;
 		height: 100%;
 	}
@@ -12,10 +105,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 +120,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 +130,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 +143,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 +153,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 +166,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 +176,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 +191,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 +208,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 +235,56 @@ 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-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);
 	}
 
 	.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,8 +293,8 @@ export const sidebarStyles = () => css `
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		width: 20px;
-		height: 20px;
+		width: var(--ml-sidebar-item-icon-size);
+		height: var(--ml-sidebar-item-icon-size);
 		color: inherit;
 	}
 
@@ -217,7 +310,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 +319,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 {
@@ -259,7 +352,7 @@ export const sidebarStyles = () => css `
 
 	/* 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 +376,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-panel.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"step-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/step-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;GAUG;AACH,qBAMa,kBAAmB,YAAW,WAAW;IACrD,UAAU,EAAG,WAAW,CAAC;IAEzB,kDAAkD;IAClD,KAAK,SAAM;CACX"}
+{"version":3,"file":"step-panel.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/step-panel.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAIpD;;;;;;;;;;GAUG;AACH,qBAMa,kBAAmB,YAAW,WAAW;IAC9C,UAAU,EAAG,WAAW,CAAC;IAEhC,kDAAkD;IAC3C,KAAK,SAAM;CAClB"}

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

@@ -1 +1 @@
-{"version":3,"file":"step.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/step.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAI/G;;;;;;;;;;GAUG;AACH,qBAMa,aAAc,YAAW,WAAW;IAChD,UAAU,EAAG,WAAW,CAAC;IAEzB,sBAAsB;IACtB,KAAK,SAAM;IAEX,iBAAiB;IACjB,KAAK,SAAM;IAEX,iCAAiC;IACjC,WAAW,SAAM;IAEjB,oCAAoC;IACpC,IAAI,SAAM;IAEV,0BAA0B;IAC1B,IAAI,SAAM;IAEV,wBAAwB;IACxB,QAAQ,UAAS;IAEjB,sCAAsC;IACtC,MAAM,EAAE,UAAU,CAAc;IAEhC,yCAAyC;IACzC,OAAO,EAAE,YAAY,CAAc;IAEnC,0CAA0C;IAC1C,SAAS,EAAE,cAAc,CAAW;IAEpC,uCAAuC;IACvC,KAAK,EAAE,UAAU,CAAa;IAE9B,6CAA6C;IAC7C,WAAW,EAAE,gBAAgB,CAAgB;IAE7C,sCAAsC;IACtC,aAAa,SAAO;IAEpB,0CAA0C;IAC1C,KAAK,UAAS;IAEd,yCAAyC;IACzC,IAAI,UAAS;IAEb,4CAA4C;IAC5C,OAAO,UAAS;IAEhB,2BAA2B;IAC3B,WAAW,QAAO,IAAI,CAUpB;CACF"}
+{"version":3,"file":"step.component.d.ts","sourceRoot":"","sources":["../../../../src/components/navigation/steps/step.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAI/G;;;;;;;;;;GAUG;AACH,qBAMa,aAAc,YAAW,WAAW;IACzC,UAAU,EAAG,WAAW,CAAC;IAEhC,sBAAsB;IACf,KAAK,SAAM;IAElB,iBAAiB;IACV,KAAK,SAAM;IAElB,iCAAiC;IAC1B,WAAW,SAAM;IAExB,oCAAoC;IAC7B,IAAI,SAAM;IAEjB,0BAA0B;IACnB,IAAI,SAAM;IAEjB,wBAAwB;IACjB,QAAQ,UAAS;IAExB,sCAAsC;IAC/B,MAAM,EAAE,UAAU,CAAc;IAEvC,yCAAyC;IAClC,OAAO,EAAE,YAAY,CAAc;IAE1C,0CAA0C;IACnC,SAAS,EAAE,cAAc,CAAW;IAE3C,uCAAuC;IAChC,KAAK,EAAE,UAAU,CAAa;IAErC,6CAA6C;IACtC,WAAW,EAAE,gBAAgB,CAAgB;IAEpD,sCAAsC;IAC/B,aAAa,SAAO;IAE3B,0CAA0C;IACnC,KAAK,UAAS;IAErB,yCAAyC;IAClC,IAAI,UAAS;IAEpB,4CAA4C;IACrC,OAAO,UAAS;IAEvB,2BAA2B;IACpB,WAAW,QAAO,IAAI,CAU3B;CACF"}

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"}