@melodicdev/components 1.5.0 → 1.5.2

package/assets/melodic-components.min.js

@@ -4798,6 +4798,7 @@ const pl = () => w`
 		/* --- Focus --- */
 		--ml-input-focus-border-color: var(--ml-color-primary);
 		--ml-input-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-input-focus-inset-shadow: none;
 
 		/* --- Error --- */
 		--ml-input-error-border-color: var(--ml-color-danger);
@@ -4896,7 +4897,7 @@ const pl = () => w`
 
 	.ml-input--focused .ml-input__wrapper {
 		border-color: var(--ml-input-focus-border-color);
-		box-shadow: var(--ml-input-focus-shadow);
+		box-shadow: var(--ml-input-focus-shadow), var(--ml-input-focus-inset-shadow);
 	}
 
 	.ml-input--error .ml-input__wrapper {
@@ -5073,6 +5074,7 @@ const ul = () => w`
 		/* --- Focus --- */
 		--ml-textarea-focus-border-color: var(--ml-color-primary);
 		--ml-textarea-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-textarea-focus-inset-shadow: none;
 
 		/* --- Error --- */
 		--ml-textarea-error-border-color: var(--ml-color-danger);
@@ -5138,7 +5140,7 @@ const ul = () => w`
 	.ml-textarea__field:focus {
 		outline: none;
 		border-color: var(--ml-textarea-focus-border-color);
-		box-shadow: var(--ml-textarea-focus-shadow);
+		box-shadow: var(--ml-textarea-focus-shadow), var(--ml-textarea-focus-inset-shadow);
 	}
 
 	.ml-textarea__field::placeholder {
@@ -6577,6 +6579,7 @@ const Dl = () => w`
 		/* --- Focus --- */
 		--ml-select-focus-border-color: var(--ml-color-primary);
 		--ml-select-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-select-focus-inset-shadow: none;
 
 		/* --- Error --- */
 		--ml-select-error-border-color: var(--ml-color-danger);
@@ -6694,7 +6697,7 @@ const Dl = () => w`
 	.ml-select__trigger:focus-within {
 		outline: none;
 		border-color: var(--ml-select-focus-border-color);
-		box-shadow: var(--ml-select-focus-shadow);
+		box-shadow: var(--ml-select-focus-shadow), var(--ml-select-focus-inset-shadow);
 	}
 
 	.ml-select--disabled .ml-select__trigger {
@@ -11497,6 +11500,8 @@ const Ro = () => w`
 		--ml-table-row-hover-bg: var(--ml-color-surface-sunken);
 		--ml-table-row-hover-border-color: transparent;
 		--ml-table-row-hover-border-width: 0;
+		--ml-table-row-hover-border-left-width: 0;
+		--ml-table-row-hover-border-left-color: transparent;
 		--ml-table-row-selected-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.04));
 		--ml-table-row-selected-hover-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.06));
 		--ml-table-row-striped-bg: var(--ml-color-surface-sunken);
@@ -11638,6 +11643,8 @@ const Ro = () => w`
 		border-color: var(--ml-table-row-hover-border-color);
 		border-width: var(--ml-table-row-hover-border-width);
 		border-style: solid;
+		border-left-width: var(--ml-table-row-hover-border-left-width);
+		border-left-color: var(--ml-table-row-hover-border-left-color);
 	}
 
 	.ml-table--row-clickable .ml-table__row {
@@ -15752,10 +15759,19 @@ const xi = () => w`
 		--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;
 
@@ -15771,6 +15787,10 @@ const xi = () => w`
 		--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);
 
@@ -15921,6 +15941,7 @@ const xi = () => w`
 		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-left: var(--ml-sidebar-item-active-indicator-width) solid transparent;
 		border-radius: var(--ml-sidebar-item-radius);
 		background: transparent;
 		color: var(--ml-sidebar-item-color);
@@ -15949,6 +15970,7 @@ const xi = () => w`
 	.ml-sidebar__item-link--active {
 		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 {
@@ -15975,7 +15997,15 @@ const xi = () => w`
 		flex-shrink: 0;
 		width: var(--ml-sidebar-item-icon-size);
 		height: var(--ml-sidebar-item-icon-size);
-		color: inherit;
+		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 */
@@ -16030,6 +16060,11 @@ const xi = () => w`
 		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-sidebar-chevron-transition);
@@ -16175,30 +16210,40 @@ function ki(e) {
 }
 const $i = () => w`
 	:host {
+		--ml-sidebar-group-padding-y: var(--ml-space-1);
+		--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-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-items-gap: var(--ml-space-0-5);
+		--ml-sidebar-group-items-padding-x: var(--ml-space-2);
+
 		display: block;
 	}
 
 	.ml-sidebar-group {
-		padding: var(--ml-space-1) 0;
+		padding: var(--ml-sidebar-group-padding-y) 0;
 	}
 
 	.ml-sidebar-group__label {
 		display: block;
-		padding: var(--ml-space-2) var(--ml-space-4);
+		padding: var(--ml-sidebar-group-label-padding-y) var(--ml-sidebar-group-label-padding-x);
 		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text-muted);
+		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;
+		letter-spacing: var(--ml-sidebar-group-label-letter-spacing);
 		line-height: var(--ml-leading-tight);
 	}
 
 	.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);
 	}
 `;
 var rr = class {
@@ -16309,10 +16354,19 @@ const zi = () => w`
 		--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;
 
@@ -16328,6 +16382,10 @@ const zi = () => w`
 		--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);
 
@@ -16347,6 +16405,7 @@ const zi = () => w`
 		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-left: var(--ml-sidebar-item-active-indicator-width) solid transparent;
 		border-radius: var(--ml-sidebar-item-radius);
 		background: transparent;
 		color: var(--ml-sidebar-item-color);
@@ -16375,6 +16434,7 @@ const zi = () => w`
 	.ml-sidebar-item__link--active {
 		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 {
@@ -16401,7 +16461,15 @@ const zi = () => w`
 		flex-shrink: 0;
 		width: var(--ml-sidebar-item-icon-size);
 		height: var(--ml-sidebar-item-icon-size);
-		color: inherit;
+		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 */
@@ -16464,6 +16532,11 @@ const zi = () => w`
 		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-sidebar-item-chevron-transition);
@@ -19427,6 +19500,7 @@ const is = () => w`
 		--ml-popover-bg: var(--ml-color-surface);
 		--ml-popover-color: var(--ml-color-text);
 		--ml-popover-shadow: var(--ml-shadow-lg);
+		--ml-popover-content-overflow: visible;
 		--ml-popover-transition: var(--ml-duration-150) var(--ml-ease-out);
 
 		/* Arrow */
@@ -19457,7 +19531,7 @@ const is = () => w`
 		background-color: var(--ml-popover-bg);
 		color: var(--ml-popover-color);
 		box-shadow: var(--ml-popover-shadow);
-		overflow: visible;
+		overflow: var(--ml-popover-content-overflow);
 		opacity: 0;
 		transform: scale(0.95);
 		transition:
@@ -20349,6 +20423,7 @@ const ps = () => w`
 
 		/* Font */
 		--ml-page-header-font-family: var(--ml-font-sans);
+		--ml-page-header-color: var(--ml-color-text);
 
 		/* Border */
 		--ml-page-header-border-width: var(--ml-border);
@@ -20383,6 +20458,7 @@ const ps = () => w`
 	.ml-page-header {
 		padding: var(--ml-page-header-padding);
 		font-family: var(--ml-page-header-font-family);
+		color: var(--ml-page-header-color);
 	}
 
 	.ml-page-header--divider {

package/lib/components/data-display/table/table.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAwRvB,CAAC"}
+{"version":3,"file":"table.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/data-display/table/table.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDA4RvB,CAAC"}

package/lib/components/data-display/table/table.styles.js

@@ -27,6 +27,8 @@ export const tableStyles = () => css `
 		--ml-table-row-hover-bg: var(--ml-color-surface-sunken);
 		--ml-table-row-hover-border-color: transparent;
 		--ml-table-row-hover-border-width: 0;
+		--ml-table-row-hover-border-left-width: 0;
+		--ml-table-row-hover-border-left-color: transparent;
 		--ml-table-row-selected-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.04));
 		--ml-table-row-selected-hover-bg: var(--ml-color-primary-subtle, rgba(99, 102, 241, 0.06));
 		--ml-table-row-striped-bg: var(--ml-color-surface-sunken);
@@ -168,6 +170,8 @@ export const tableStyles = () => css `
 		border-color: var(--ml-table-row-hover-border-color);
 		border-width: var(--ml-table-row-hover-border-width);
 		border-style: solid;
+		border-left-width: var(--ml-table-row-hover-border-left-width);
+		border-left-color: var(--ml-table-row-hover-border-left-color);
 	}
 
 	.ml-table--row-clickable .ml-table__row {

package/lib/components/forms/input/input.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAqLvB,CAAC"}
+{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/input/input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,iDAsLvB,CAAC"}

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

@@ -34,6 +34,7 @@ export const inputStyles = () => css `
 		/* --- Focus --- */
 		--ml-input-focus-border-color: var(--ml-color-primary);
 		--ml-input-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-input-focus-inset-shadow: none;
 
 		/* --- Error --- */
 		--ml-input-error-border-color: var(--ml-color-danger);
@@ -132,7 +133,7 @@ export const inputStyles = () => css `
 
 	.ml-input--focused .ml-input__wrapper {
 		border-color: var(--ml-input-focus-border-color);
-		box-shadow: var(--ml-input-focus-shadow);
+		box-shadow: var(--ml-input-focus-shadow), var(--ml-input-focus-inset-shadow);
 	}
 
 	.ml-input--error .ml-input__wrapper {

package/lib/components/forms/select/select.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA2axB,CAAC"}
+{"version":3,"file":"select.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/select/select.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,iDA4axB,CAAC"}

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

@@ -30,6 +30,7 @@ export const selectStyles = () => css `
 		/* --- Focus --- */
 		--ml-select-focus-border-color: var(--ml-color-primary);
 		--ml-select-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-select-focus-inset-shadow: none;
 
 		/* --- Error --- */
 		--ml-select-error-border-color: var(--ml-color-danger);
@@ -147,7 +148,7 @@ export const selectStyles = () => css `
 	.ml-select__trigger:focus-within {
 		outline: none;
 		border-color: var(--ml-select-focus-border-color);
-		box-shadow: var(--ml-select-focus-shadow);
+		box-shadow: var(--ml-select-focus-shadow), var(--ml-select-focus-inset-shadow);
 	}
 
 	.ml-select--disabled .ml-select__trigger {

package/lib/components/forms/textarea/textarea.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAgK1B,CAAC"}
+{"version":3,"file":"textarea.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/textarea/textarea.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,iDAiK1B,CAAC"}

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

@@ -32,6 +32,7 @@ export const textareaStyles = () => css `
 		/* --- Focus --- */
 		--ml-textarea-focus-border-color: var(--ml-color-primary);
 		--ml-textarea-focus-shadow: var(--ml-shadow-focus-ring);
+		--ml-textarea-focus-inset-shadow: none;
 
 		/* --- Error --- */
 		--ml-textarea-error-border-color: var(--ml-color-danger);
@@ -97,7 +98,7 @@ export const textareaStyles = () => css `
 	.ml-textarea__field:focus {
 		outline: none;
 		border-color: var(--ml-textarea-focus-border-color);
-		box-shadow: var(--ml-textarea-focus-shadow);
+		box-shadow: var(--ml-textarea-focus-shadow), var(--ml-textarea-focus-inset-shadow);
 	}
 
 	.ml-textarea__field::placeholder {

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

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

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

@@ -1,29 +1,39 @@
 import { css } from '@melodicdev/core';
 export const sidebarGroupStyles = () => css `
 	:host {
+		--ml-sidebar-group-padding-y: var(--ml-space-1);
+		--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-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-items-gap: var(--ml-space-0-5);
+		--ml-sidebar-group-items-padding-x: var(--ml-space-2);
+
 		display: block;
 	}
 
 	.ml-sidebar-group {
-		padding: var(--ml-space-1) 0;
+		padding: var(--ml-sidebar-group-padding-y) 0;
 	}
 
 	.ml-sidebar-group__label {
 		display: block;
-		padding: var(--ml-space-2) var(--ml-space-4);
+		padding: var(--ml-sidebar-group-label-padding-y) var(--ml-sidebar-group-label-padding-x);
 		font-family: var(--ml-font-sans);
-		font-size: var(--ml-text-xs);
-		font-weight: var(--ml-font-semibold);
-		color: var(--ml-color-text-muted);
+		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;
+		letter-spacing: var(--ml-sidebar-group-label-letter-spacing);
 		line-height: var(--ml-leading-tight);
 	}
 
 	.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);
 	}
 `;

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

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

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

@@ -25,10 +25,19 @@ export const sidebarItemStyles = () => css `
 		--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;
 
@@ -44,6 +53,10 @@ export const sidebarItemStyles = () => css `
 		--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);
 
@@ -63,6 +76,7 @@ export const sidebarItemStyles = () => css `
 		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-left: var(--ml-sidebar-item-active-indicator-width) solid transparent;
 		border-radius: var(--ml-sidebar-item-radius);
 		background: transparent;
 		color: var(--ml-sidebar-item-color);
@@ -91,6 +105,7 @@ export const sidebarItemStyles = () => css `
 	.ml-sidebar-item__link--active {
 		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 {
@@ -117,7 +132,15 @@ export const sidebarItemStyles = () => css `
 		flex-shrink: 0;
 		width: var(--ml-sidebar-item-icon-size);
 		height: var(--ml-sidebar-item-icon-size);
-		color: inherit;
+		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 */
@@ -180,6 +203,11 @@ 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-sidebar-item-chevron-transition);

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,iDA2XzB,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

@@ -72,10 +72,19 @@ export const sidebarStyles = () => css `
 		--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;
 
@@ -91,6 +100,10 @@ export const sidebarStyles = () => css `
 		--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);
 
@@ -241,6 +254,7 @@ export const sidebarStyles = () => css `
 		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-left: var(--ml-sidebar-item-active-indicator-width) solid transparent;
 		border-radius: var(--ml-sidebar-item-radius);
 		background: transparent;
 		color: var(--ml-sidebar-item-color);
@@ -269,6 +283,7 @@ export const sidebarStyles = () => css `
 	.ml-sidebar__item-link--active {
 		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 {
@@ -295,7 +310,15 @@ export const sidebarStyles = () => css `
 		flex-shrink: 0;
 		width: var(--ml-sidebar-item-icon-size);
 		height: var(--ml-sidebar-item-icon-size);
-		color: inherit;
+		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 */
@@ -350,6 +373,11 @@ 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-sidebar-chevron-transition);

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,iDA8FzB,CAAC"}
+{"version":3,"file":"popover.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/overlays/popover/popover.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,iDA+FzB,CAAC"}

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

@@ -9,6 +9,7 @@ export const popoverStyles = () => css `
 		--ml-popover-bg: var(--ml-color-surface);
 		--ml-popover-color: var(--ml-color-text);
 		--ml-popover-shadow: var(--ml-shadow-lg);
+		--ml-popover-content-overflow: visible;
 		--ml-popover-transition: var(--ml-duration-150) var(--ml-ease-out);
 
 		/* Arrow */
@@ -39,7 +40,7 @@ export const popoverStyles = () => css `
 		background-color: var(--ml-popover-bg);
 		color: var(--ml-popover-color);
 		box-shadow: var(--ml-popover-shadow);
-		overflow: visible;
+		overflow: var(--ml-popover-content-overflow);
 		opacity: 0;
 		transform: scale(0.95);
 		transition:

package/lib/components/sections/page-header/page-header.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-header/page-header.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAsM5B,CAAC"}
+{"version":3,"file":"page-header.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/sections/page-header/page-header.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,iDAwM5B,CAAC"}

package/lib/components/sections/page-header/page-header.styles.js

@@ -10,6 +10,7 @@ export const pageHeaderStyles = () => css `
 
 		/* Font */
 		--ml-page-header-font-family: var(--ml-font-sans);
+		--ml-page-header-color: var(--ml-color-text);
 
 		/* Border */
 		--ml-page-header-border-width: var(--ml-border);
@@ -44,6 +45,7 @@ export const pageHeaderStyles = () => css `
 	.ml-page-header {
 		padding: var(--ml-page-header-padding);
 		font-family: var(--ml-page-header-font-family);
+		color: var(--ml-page-header-color);
 	}
 
 	.ml-page-header--divider {

package/package.json

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