atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/timeline/timeline.js

@@ -184,11 +184,15 @@ export class Timeline {
         const isEven = this.isRtl ? index % 2 !== 0 : index % 2 === 0;
         const side = this.align === 'alternate' ? (isEven ? 'left' : 'right') : this.align;
         const hSide = this.align === 'alternate' ? (isEven ? 'top' : 'bottom') : (this.align === 'top' ? 'top' : 'bottom');
+        const itemSideClass = side === 'left' || side === 'right' ? `timeline-item-${side}` : undefined;
+        const itemHorizontalClass = hSide === 'top' || hSide === 'bottom' ? `timeline-item-${hSide}` : undefined;
         return (h("div", { class: {
                 'timeline-item': true,
                 'timeline-item-pending': true,
                 [`side-${side}`]: this.mode === 'vertical',
                 [`side-${hSide}`]: this.mode === 'horizontal',
+                [itemSideClass]: !!itemSideClass,
+                [itemHorizontalClass]: !!itemHorizontalClass,
                 'is-multiline': isMultiline
             } }, h("div", { class: "timeline-item-line" }), h("div", { class: "timeline-item-dot" }, h("span", { class: "dot-inner" })), h("div", { class: "timeline-item-details" }, h("div", { class: "timeline-item-content" }, h("div", { class: "timeline-item-title" }, "Pending...")))));
     }
@@ -201,6 +205,8 @@ export class Timeline {
         const hSide = isAlternate
             ? (isEven ? 'top' : 'bottom')
             : (this.align === 'top' ? 'top' : 'bottom');
+        const itemSideClass = side === 'left' || side === 'right' ? `timeline-item-${side}` : undefined;
+        const itemHorizontalClass = hSide === 'top' || hSide === 'bottom' ? `timeline-item-${hSide}` : undefined;
         let dotContent;
         const dotStyle = {};
         if (event.dotColor)
@@ -234,6 +240,8 @@ export class Timeline {
                 index % 2 === 0 ? 'timeline-item-even' : 'timeline-item-odd',
                 `side-${side}`,
                 `side-${hSide}`,
+                itemSideClass,
+                itemHorizontalClass,
                 isMultiline && isLastInRow && 'is-last-in-row',
                 !!event.image && 'has-image',
                 !!event.icon && 'has-icon',

package/dist/collection/components/timeline-item/timeline-item.js

@@ -13,7 +13,7 @@ export class TimelineItem {
      */
     itemDate;
     render() {
-        return (h("div", { key: '54a294a4b0f3ba13841d3c8de125694e81f2141c', class: "timeline-item-container" }, h("div", { key: '0ccb68f5384a8ac2bba5cebb5d75b96fb1dccc16', class: "timeline-item-content" }, h("h2", { key: '75c5b1f55e06a1345105dd12b924e41a3bada993' }, this.itemTitle), h("p", { key: '7ae3c4cf655c6831943b8d53db977e3348907471' }, this.itemDescription), h("span", { key: '23175d4215f96f76a580dece414fe379446a23da' }, this.itemDate))));
+        return (h("div", { key: 'd95b2638f4ddd5cfe6123e0dca0573d50f7a9b12', class: "timeline-item-container" }, h("div", { key: '1af79e9d89d34c86588dde5f8a17a3d858818eca', class: "timeline-item-content" }, h("h2", { key: '20b3627366401ffcbeb5ec3673ff54960b86b87d' }, this.itemTitle), h("p", { key: '830ff3c7ee8eab68977b343a5fa275eb8f4e9df5' }, this.itemDescription), h("span", { key: 'e349ec06b84933f61fb194dde37e12624694a981' }, this.itemDate))));
     }
     static get is() { return "timeline-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/timer/timer.js

@@ -442,7 +442,7 @@ export class Timer {
     }
     render() {
         const showCompact = this.variant === 'compact' || (this.collapse && this.isNarrow);
-        return (h(Host, { key: '1d8f1a154864e347f0458302b6684857981d54d0', class: {
+        return (h(Host, { key: '33774816a46769a5d4de514a1f91a73c5eb5ccc1', class: {
                 'timer-has-shadow': this.useShadow,
                 'timer-no-shadow': !this.useShadow,
                 'timer-collapsed': this.collapse && this.isNarrow

package/dist/collection/components/toggle-group/toggle-group.css

@@ -239,13 +239,17 @@
 }
 .toggle-list.is-segmented .segmented-indicator {
   position: absolute;
-  top: 6px;
-  left: 6px;
+  top: 0px;
+  left: 0px;
   bottom: 6px;
   border-radius: 12px;
   transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.4s ease, background-color 0.4s ease;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  z-index: 1;
+}
+.toggle-list.is-segmented.is-multiple .toggle-item-wrapper.is-active {
+  background: var(--active-bg, var(--toggle-group-primary)) !important;
+  border-radius: 12px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
 }
 
 .toggle-item-wrapper {

package/dist/collection/components/toggle-group/toggle-group.js

@@ -345,8 +345,12 @@ export class UIToggleGroup {
             }, onKeyDown: this.handleKeyDown }, this.renderLabel(), this.renderSearch(), this.renderControls(), (this.loading || this.showSkeleton) ? this.renderLoading() : (!this.isCollapsed && (h("div", { class: {
                 'toggle-list': true,
                 [`layout-${this.layout}`]: true,
-                'is-segmented': this.variant === 'segmented'
-            }, style: this.layout === 'grid' ? { 'grid-template-columns': `repeat(${this.columns}, 1fr)` } : {}, ref: (el) => this.listEl = el }, this.variant === 'segmented' && (h("div", { class: "segmented-indicator", style: {
+                'is-segmented': this.variant === 'segmented',
+                'is-multiple': this.selectionMode === 'multiple'
+            }, style: {
+                ...(this.layout === 'grid' ? { 'grid-template-columns': `repeat(${this.columns}, 1fr)` } : {}),
+                '--active-bg': `var(--toggle-group-${this.color})`
+            }, ref: (el) => this.listEl = el }, this.variant === 'segmented' && (h("div", { class: "segmented-indicator", style: {
                 transform: `translate3d(${this.indicatorRect.left}px, ${this.indicatorRect.top}px, 0)`,
                 width: `${this.indicatorRect.width}px`,
                 height: `${this.indicatorRect.height}px`,
@@ -661,7 +665,7 @@ export class UIToggleGroup {
                 "mutable": false,
                 "complexType": {
                     "original": "StatusColor",
-                    "resolved": "\"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "StatusColor": {
                             "location": "import",

package/dist/collection/components/toolbar/toolbar.js

@@ -591,7 +591,7 @@ export class Toolbar {
         if (this.maxSize) {
             stickyStyle[this.orientation === 'horizontal' ? 'maxWidth' : 'maxHeight'] = this.maxSize;
         }
-        return (h(Host, { key: '6b33477b806940fbb98394621c375a70853128a9', class: hostClasses, style: stickyStyle, role: "toolbar", "aria-label": this.toolbarAriaLabel, "aria-disabled": this.disabled ? 'true' : null }, this.isMobile && (h("ui-button", { key: '12131b32e8813702f466625f77a38c3978bb4147', class: "toolbar-mobile-toggle", "aria-expanded": String(!this.isCollapsed), "aria-label": this.isCollapsed ? 'Expand toolbar' : 'Collapse toolbar', onButtonClick: () => { this.isCollapsed = !this.isCollapsed; }, variant: "ghost", icon: this.isCollapsed ? 'menu' : 'x', "icon-library": this.iconLibrary, iconOnly: true })), (!this.isMobile || !this.isCollapsed) && (h("div", { key: '3e203ab7c3349576bae4f42b906ec702b97b18af', class: "toolbar-body", style: bodyStyle, ref: el => this.toolbarBodyRef = el }, h("slot", { key: '5c2f402b9d318651a0007b3ed80064f711f6e3a5', name: "before" }), hasSchema ? (h("div", { class: "toolbar-zones" }, this.renderZone(this.parsedSchema.left ?? [], 'left'), this.zoneDividers && (this.parsedSchema.left?.length > 0) && (this.parsedSchema.center?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.center ?? [], 'center'), this.zoneDividers && (this.parsedSchema.center?.length > 0) && (this.parsedSchema.right?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.right ?? [], 'right'))) : (this.parsedItems.map(item => this.renderItem(item))), h("slot", { key: 'd8e7b2fec2cad8fe068792c0a4cb0e7b7d0b002e', name: "left" }), h("slot", { key: '4445e8c225d7249ddd65fe1164dc78a924d63530', name: "center" }), h("slot", { key: 'd590115edf7ff9d04cb0e36b5cac629b85901b09', name: "right" }), h("slot", { key: 'cf6631fd34e189258bea03f5b653ee4d766f3d78' }), this.overflowStrategy === 'dropdown' && this.renderOverflowMenu(), h("slot", { key: 'f97fe02b2756a3cbb7b82965d57e767597834ee7', name: "after" })))));
+        return (h(Host, { key: '036f6c8d9b98ab609f212929d6f55f0fde7cc074', class: hostClasses, style: stickyStyle, role: "toolbar", "aria-label": this.toolbarAriaLabel, "aria-disabled": this.disabled ? 'true' : null }, this.isMobile && (h("ui-button", { key: '4332c51f7597bd1be7da3841236b5807c79f56e3', class: "toolbar-mobile-toggle", "aria-expanded": String(!this.isCollapsed), "aria-label": this.isCollapsed ? 'Expand toolbar' : 'Collapse toolbar', onButtonClick: () => { this.isCollapsed = !this.isCollapsed; }, variant: "ghost", icon: this.isCollapsed ? 'menu' : 'x', "icon-library": this.iconLibrary, iconOnly: true })), (!this.isMobile || !this.isCollapsed) && (h("div", { key: '721bc0717cac042661c3e0752fd9908b0c1052e5', class: "toolbar-body", style: bodyStyle, ref: el => this.toolbarBodyRef = el }, h("slot", { key: '021a9b2a763cba4dd80066d31f858dc6517630a7', name: "before" }), hasSchema ? (h("div", { class: "toolbar-zones" }, this.renderZone(this.parsedSchema.left ?? [], 'left'), this.zoneDividers && (this.parsedSchema.left?.length > 0) && (this.parsedSchema.center?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.center ?? [], 'center'), this.zoneDividers && (this.parsedSchema.center?.length > 0) && (this.parsedSchema.right?.length > 0) && this.renderSeparator(), this.renderZone(this.parsedSchema.right ?? [], 'right'))) : (this.parsedItems.map(item => this.renderItem(item))), h("slot", { key: '4cbff6aede8517e2bee4c8bdf388831d9268796f', name: "left" }), h("slot", { key: '00836db35af163fe591451ec2dde1bbce0e74d9b', name: "center" }), h("slot", { key: '7a6a2a43511cf7798a1b99d8a2f1f95fb47f66fb', name: "right" }), h("slot", { key: '9f789b3b3a6f5ee83470b625452024deecba3fd8' }), this.overflowStrategy === 'dropdown' && this.renderOverflowMenu(), h("slot", { key: 'bc777e8b94344da25d05000eee4090a5959f57c6', name: "after" })))));
     }
     static get is() { return "ui-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/tooltip/tooltip.js

@@ -662,7 +662,7 @@ export class Tooltip {
             [`tooltip-shape-${this.shape}`]: true,
             ...(this.customClass ? { [this.customClass]: true } : {}),
         };
-        const tooltipContent = (h("div", { key: 'd08971e832d6bb9f6975de4162afaee0025d6d98', class: tooltipClasses, style: {
+        const tooltipContent = (h("div", { key: '8f1f9b9c8df2fa1d1b835dd339588329fa42fabb', class: tooltipClasses, style: {
                 '--tooltip-max-width': `${this.maxWidth}px`,
                 '--tooltip-z-index': this.zIndex.toString(),
                 '--tooltip-transition-duration': `${this.transitionDuration}ms`,
@@ -670,8 +670,8 @@ export class Tooltip {
                 '--tooltip-arrow-size': `${this.arrowSize}px`,
                 ...(this.customColor ? { '--tooltip-bg-color': this.customColor } : {}),
                 ...(this.textColor ? { '--tooltip-text-color': this.textColor } : {}),
-            }, ref: el => this.tooltipElement = el, onMouseEnter: this.handleTooltipMouseEnter, onMouseLeave: this.handleTooltipMouseLeave, role: "tooltip", "aria-live": "polite" }, this.closable && (h("ui-button", { key: '8744809203573938ea08f72665c75e63a9c37e79', variant: "ghost", class: "tooltip-close", onClick: this.handleClose, ariaLabel: "Close tooltip", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), this.showHeader && (h("div", { key: 'f5675e917f299a2b2d9279ef6b4d06c21696e32a', class: "tooltip-header" }, h("div", { key: 'f2317e5f214ca6bcf92ad314840013e2f298c203', ref: el => this.headerSlotTarget = el }))), h("div", { key: 'e4e5a79aeddaa5e00d60f3b12e96c169f147dae8', class: "tooltip-content" }, this.loading ? (h("div", { class: "tooltip-loading-spinner" }, h("ui-icon", { name: "loader", library: "lucide", spin: true }), h("span", null, "Loading..."))) : (this.html ? (h("div", { innerHTML: sanitizeHTML(this.content) })) : (h("span", null, this.content))), h("div", { key: '87c26e2908df6ee6652d22e219dddc6c6f8ad36e', class: "tooltip-slot-content", ref: el => this.defaultSlotTarget = el })), this.showFooter && (h("div", { key: '9fe03747ba4fe5f3fcccede2c49540a9a7c9d696', class: "tooltip-footer" }, h("div", { key: 'f55cc3ddbfbcaf0e45e03dcb1971b696cd566150', ref: el => this.footerSlotTarget = el }))), this.arrow && h("div", { key: '30d603a7d56a57fca73c3cb9a6420cdabde31ead', class: "tooltip-arrow" })));
-        return (h(Host, { key: '51577771914e7712be4e008b3cfa79683b06e3c2' }, h("div", { key: 'a5240a2c60d7dc9e2207d9c95fc8b860ab67efa1', class: "tooltip-wrapper" }, h("slot", { key: 'ce3a6106b2e281774e0281a5f72aeaa9fd84a37a', name: "target" })), this.isVisible && tooltipContent, h("div", { key: '91c1f89da5c9e24779a874d61862d02fa332749b', class: "tooltip-slot-source", style: { display: 'none' }, "aria-hidden": "true" }, h("div", { key: '2ed6c8792820b8306ba30083dc62528cf935092b', ref: el => this.defaultSlotSource = el }, h("slot", { key: 'd7b2237ccecaa53b6f3bf2afb87763abcec4fb20' })), h("div", { key: '9844aa3ec9a673f9ff2fc3fe20f350d3c3163f30', ref: el => this.headerSlotSource = el }, h("slot", { key: '538fdd565105d73df273bcdcc4e4d147b333deed', name: "header" })), h("div", { key: '2f6a44286d07483e4698b140fb22fa0c2c5d1b3b', ref: el => this.footerSlotSource = el }, h("slot", { key: '07c51076ab6df9792bdb737976f8b052908c5cfb', name: "footer" })))));
+            }, ref: el => this.tooltipElement = el, onMouseEnter: this.handleTooltipMouseEnter, onMouseLeave: this.handleTooltipMouseLeave, role: "tooltip", "aria-live": "polite" }, this.closable && (h("ui-button", { key: 'e384dec2ebdc9fd7b7087ff9c4bf4c4ae3a98ae7', variant: "ghost", class: "tooltip-close", onClick: this.handleClose, ariaLabel: "Close tooltip", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "sm" })), this.showHeader && (h("div", { key: 'b00552306d674fce854ea272c4e2aef14cf5db20', class: "tooltip-header" }, h("div", { key: 'cc0e8fc44d3af24ad68b4373f3b6e69a85fbf133', ref: el => this.headerSlotTarget = el }))), h("div", { key: '907a00f18eba5a5f75b719addfcf28d02775b33d', class: "tooltip-content" }, this.loading ? (h("div", { class: "tooltip-loading-spinner" }, h("ui-icon", { name: "loader", library: "lucide", spin: true }), h("span", null, "Loading..."))) : (this.html ? (h("div", { innerHTML: sanitizeHTML(this.content) })) : (h("span", null, this.content))), h("div", { key: 'c164836ecfc1289304ba3ba58f650e6788b4c88c', class: "tooltip-slot-content", ref: el => this.defaultSlotTarget = el })), this.showFooter && (h("div", { key: '1e59e1c7bcd606f4dafbb9552b41820f86ff7e0b', class: "tooltip-footer" }, h("div", { key: '5822507a3c373caf240ad3fa1192985ad4e32325', ref: el => this.footerSlotTarget = el }))), this.arrow && h("div", { key: '93c2f3ad8b75d9d5107eefc0470c9a56202d265b', class: "tooltip-arrow" })));
+        return (h(Host, { key: 'a3b89e2ca5f7485b2472287927afb259da835c1f' }, h("div", { key: '3317d76132c0e01199f03c927539ba6d6b44bfbc', class: "tooltip-wrapper" }, h("slot", { key: '93a6facacc00058a53bb83de4e37e836741d7b42', name: "target" })), this.isVisible && tooltipContent, h("div", { key: 'a07f61c4fadf478ef647964e8b86f9bdc57299d8', class: "tooltip-slot-source", style: { display: 'none' }, "aria-hidden": "true" }, h("div", { key: '96b5c2be37eac9c5c6fb60e16d63cf46c294c540', ref: el => this.defaultSlotSource = el }, h("slot", { key: '7e13e89470a73981e412f5016fd7dd8ec00e2d03' })), h("div", { key: '75a180465f3bac9ce4a3c24dbeca4ab98dc4be5b', ref: el => this.headerSlotSource = el }, h("slot", { key: 'e79f03abfa7485a8336cf576ecaf04ed48c7203d', name: "header" })), h("div", { key: '2b74af20c38016fbeda92bae42c65bf4b365369d', ref: el => this.footerSlotSource = el }, h("slot", { key: '3ed95162a73fde60fea6a96b6a13de5beb4054de', name: "footer" })))));
     }
     static get is() { return "ui-tooltip"; }
     static get encapsulation() { return "scoped"; }
@@ -772,7 +772,7 @@ export class Tooltip {
                 "mutable": false,
                 "complexType": {
                     "original": "TooltipVariant",
-                    "resolved": "\"borderless\" | \"danger\" | \"dark\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"light\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\"",
+                    "resolved": "\"black\" | \"borderless\" | \"danger\" | \"dark\" | \"default\" | \"elevated\" | \"error\" | \"flat\" | \"ghost\" | \"glass\" | \"info\" | \"inverse\" | \"light\" | \"loading\" | \"neutral\" | \"none\" | \"outline\" | \"plain\" | \"primary\" | \"raised\" | \"secondary\" | \"soft\" | \"sovereign\" | \"success\" | \"surface\" | \"tertiary\" | \"warning\" | \"white\"",
                     "references": {
                         "TooltipVariant": {
                             "location": "import",

package/dist/collection/components/top-bar/top-bar.js

@@ -270,7 +270,7 @@ export class TopBar {
                     "references": {
                         "TopBarAction": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/top-bar/top-bar.tsx",
+                            "path": "C:/Naveen/PersonalRepo/atomicUILibrary/library/src/components/top-bar/top-bar.tsx",
                             "id": "src/components/top-bar/top-bar.tsx::TopBarAction"
                         }
                     }
@@ -296,7 +296,7 @@ export class TopBar {
                     "references": {
                         "UserMenuItem": {
                             "location": "local",
-                            "path": "P:/Repository/stenciljs/atomicUILibrary/src/components/top-bar/top-bar.tsx",
+                            "path": "C:/Naveen/PersonalRepo/atomicUILibrary/library/src/components/top-bar/top-bar.tsx",
                             "id": "src/components/top-bar/top-bar.tsx::UserMenuItem"
                         }
                     }

package/dist/collection/components/transfer-list/transfer-list.css

@@ -27,7 +27,7 @@
   width: 100%;
   --tl-radius: 12px;
   --tl-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  --tl-active-gradient: linear-gradient(135deg, var(--ui-color-primary) 0%, #6366f1 100%);
+  --tl-active-gradient: linear-gradient(135deg, var(--color-primary, #3b82f6) 0%, var(--color-primary-hover, #6366f1) 100%);
   --tl-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
@@ -81,7 +81,7 @@
   transition: var(--tl-transition);
 }
 .transfer-list-box:focus-within {
-  border-color: var(--ui-color-primary);
+  border-color: var(--color-primary, #3b82f6);
   box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1), 0 8px 24px rgba(0, 0, 0, 0.08);
 }
 
@@ -116,7 +116,7 @@
 }
 .action-btn:hover {
   background: rgba(0, 0, 0, 0.05);
-  color: var(--ui-color-primary);
+  color: var(--color-primary, #3b82f6);
 }
 
 .header-title {
@@ -136,7 +136,7 @@
 }
 .header-count.pop-anim {
   transform: scale(1.4);
-  background: var(--ui-color-primary);
+  background: var(--color-primary, #3b82f6);
   color: var(--text-standard, #ffffff);
 }
 
@@ -159,7 +159,7 @@
   transition: var(--tl-transition);
 }
 .transfer-search input:focus {
-  border-color: var(--ui-color-primary);
+  border-color: var(--color-primary, #3b82f6);
   background: var(--bg-primary, #ffffff);
 }
 
@@ -198,7 +198,7 @@
 }
 .transfer-item.selected {
   background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.06);
-  color: var(--ui-color-primary);
+  color: var(--color-primary, #3b82f6);
   font-weight: 500;
 }
 .transfer-item.selected::after {
@@ -224,7 +224,7 @@
 }
 
 .selected-check {
-  color: var(--ui-color-primary);
+  color: var(--color-primary, #3b82f6);
   opacity: 0.8;
 }
 
@@ -305,7 +305,7 @@
   transform: translate(-50%, -50%);
 }
 .transfer-controls.resizable-divider:hover::after {
-  background: var(--ui-color-primary);
+  background: var(--color-primary, #3b82f6);
 }
 .transfer-controls.resizable-divider .control-buttons {
   pointer-events: auto;
@@ -332,8 +332,8 @@
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
 }
 .transfer-button:hover:not(:disabled) {
-  border-color: var(--ui-color-primary);
-  color: var(--ui-color-primary);
+  border-color: var(--color-primary, #3b82f6);
+  color: var(--color-primary, #3b82f6);
   transform: scale(1.1);
   box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
 }
@@ -374,7 +374,7 @@
 
 .transfer-item.dragging {
   opacity: 0.4;
-  border: 1px dashed var(--ui-color-primary);
+  border: 1px dashed var(--color-primary, #3b82f6);
   transform: scale(0.98);
 }
 
@@ -408,11 +408,11 @@
 }
 .transfer-table tr.selected {
   background: rgba(var(--color-primary-rgb, 59, 130, 246), 0.06);
-  color: var(--ui-color-primary);
+  color: var(--color-primary, #3b82f6);
 }
 .transfer-table tr.selected td {
   font-weight: 500;
-  color: var(--ui-color-primary);
+  color: var(--color-primary, #3b82f6);
 }
 
 /* Tree Mode */

package/dist/collection/components/transfer-list/transfer-list.js

@@ -476,17 +476,17 @@ export class TransferList {
                 'transfer-container': true,
                 'is-vertical': isVertical,
                 'variant-glass': this.variant === 'glass'
-            } }, h("div", { key: '1de4ee40158e28ed1d71c20a0a2a28d73bf405ad', class: "transfer-section source", style: !isVertical && this.resizable ? { flex: `0 0 ${this.dividerPosition}%` } : undefined }, this.renderList('source')), h("div", { key: 'b36335fd3bb837fc5432e4a2cac969524c24c60b', class: { 'transfer-controls': true, 'resizable-divider': this.resizable && !isVertical }, onMouseDown: this.handleDividerMouseDown }, h("div", { key: 'e5e630b8898a19837a232ec24522237fa9b1ca29', class: "control-buttons" }, h("ui-button", { key: '723baf7ebada286062844d9b1bc429f5d8d66312', variant: "ghost", size: "md", iconOnly: true, icon: isVertical ? "play-skip-back" : "play-skip-forward", iconLibrary: "lucide", iconStyle: { transform: isVertical ? 'rotate(90deg)' : '' }, disabled: this.disabled || this.getSourceItems().length === 0, onClick: this.moveAllToTarget, ariaLabel: "Move All Right", class: "transfer-button" }), h("ui-button", { key: 'f389d40c0e38846515a302d15523b896a3df6c3e', variant: "ghost", size: "md", iconOnly: true, icon: isVertical ? "chevron-down" : "chevron-right", iconLibrary: "lucide", disabled: this.disabled || this.sourceSelected.size === 0, onClick: this.moveToTarget, ariaLabel: "Move Selected Right", class: "transfer-button" }), h("ui-button", { key: '0c7e67f6871a9327a4c95798650dee907448b496', variant: "ghost", size: "md", iconOnly: true, icon: isVertical ? "chevron-up" : "chevron-left", iconLibrary: "lucide", disabled: this.disabled || this.targetSelected.size === 0, onClick: this.moveToSource, ariaLabel: "Move Selected Left", class: "transfer-button" }), h("ui-button", { key: 'e6afc1e4a60648e63e4c02a413e359f75a743583', variant: "ghost", size: "md", iconOnly: true, icon: isVertical ? "play-skip-forward" : "play-skip-back", iconLibrary: "lucide", iconStyle: { transform: isVertical ? 'rotate(90deg)' : '' }, disabled: this.disabled || this.getTargetItems().length === 0, onClick: this.moveAllToSource, ariaLabel: "Move All Left", class: "transfer-button" }))), h("div", { key: '4626e6393402ecbf3e5f4c919081ac690105a7f8', class: "transfer-section target", style: !isVertical && this.resizable ? { flex: '1' } : undefined }, this.renderList('target'), this.allowReorder && (h("div", { key: '53778a0ef11e8af735955e4fdcaa9a7771890fa3', class: "transfer-reorder-floated" }, h("ui-button", { key: 'b332b36745eda62b47f3b380f21f00fc42d1d53f', variant: "ghost", size: "sm", iconOnly: true, icon: "arrow-up", iconLibrary: "lucide", disabled: this.targetSelected.size === 0, onClick: () => this.reorder('up'), ariaLabel: "Move Up", class: "transfer-button circle" }), h("ui-button", { key: '0b94cc9d83861ddba02fc59efeb1dfd27aab632e', variant: "ghost", size: "sm", iconOnly: true, icon: "arrow-down", iconLibrary: "lucide", disabled: this.targetSelected.size === 0, onClick: () => this.reorder('down'), ariaLabel: "Move Down", class: "transfer-button circle" })))), this.contextMenu.visible && (h("div", { key: 'cf41b01cbeb2bec8cfc768077026ddf4f1cd92ea', class: "transfer-context-menu", style: { top: `${this.contextMenu.y}px`, left: `${this.contextMenu.x}px` } }, h("div", { key: '2f8bce002d77529bee84f28e4ce152d4b58fe972', class: "menu-item", onClick: () => {
+            } }, h("div", { key: '1de4ee40158e28ed1d71c20a0a2a28d73bf405ad', class: "transfer-section source", style: !isVertical && this.resizable ? { flex: `0 0 ${this.dividerPosition}%` } : undefined }, this.renderList('source')), h("div", { key: 'b36335fd3bb837fc5432e4a2cac969524c24c60b', class: { 'transfer-controls': true, 'resizable-divider': this.resizable && !isVertical }, onMouseDown: this.handleDividerMouseDown }, h("div", { key: 'e5e630b8898a19837a232ec24522237fa9b1ca29', class: "control-buttons" }, h("ui-button", { key: '723baf7ebada286062844d9b1bc429f5d8d66312', variant: "ghost", size: "md", iconOnly: true, icon: isVertical ? "play-skip-back" : "play-skip-forward", iconLibrary: "lucide", iconStyle: { transform: isVertical ? 'rotate(90deg)' : '' }, disabled: this.disabled || this.getSourceItems().length === 0, onClick: this.moveAllToTarget, ariaLabel: "Move All Right", class: "transfer-button" }), h("ui-button", { key: 'f389d40c0e38846515a302d15523b896a3df6c3e', variant: "ghost", size: "md", iconOnly: true, icon: isVertical ? "chevron-down" : "chevron-right", iconLibrary: "lucide", disabled: this.disabled || this.sourceSelected.size === 0, onClick: this.moveToTarget, ariaLabel: "Move Selected Right", class: "transfer-button" }), h("ui-button", { key: '0c7e67f6871a9327a4c95798650dee907448b496', variant: "ghost", size: "md", iconOnly: true, icon: isVertical ? "chevron-up" : "chevron-left", iconLibrary: "lucide", disabled: this.disabled || this.targetSelected.size === 0, onClick: this.moveToSource, ariaLabel: "Move Selected Left", class: "transfer-button" }), h("ui-button", { key: 'e6afc1e4a60648e63e4c02a413e359f75a743583', variant: "ghost", size: "md", iconOnly: true, icon: isVertical ? "play-skip-forward" : "play-skip-back", iconLibrary: "lucide", iconStyle: { transform: isVertical ? 'rotate(90deg)' : '' }, disabled: this.disabled || this.getTargetItems().length === 0, onClick: this.moveAllToSource, ariaLabel: "Move All Left", class: "transfer-button" }))), h("div", { key: '4626e6393402ecbf3e5f4c919081ac690105a7f8', class: "transfer-section target", style: !isVertical && this.resizable ? { flex: '1' } : undefined }, this.renderList('target')), this.contextMenu.visible && (h("div", { key: 'a90fd262a82990352a56a6dfef39f1d98bb44f0e', class: "transfer-context-menu", style: { top: `${this.contextMenu.y}px`, left: `${this.contextMenu.x}px` } }, h("div", { key: '6fd6a2550ad514d55c4affdf071c8d7f2ffd4946', class: "menu-item", onClick: () => {
                 if (this.contextMenu.side === 'source')
                     this.moveToTarget();
                 else
                     this.moveToSource();
-            } }, h("ui-icon", { key: '71bf8c920d4e5ebc27a12d658d9d0b3bbf7244bc', name: "send", library: "lucide", size: "14" }), " Move to ", this.contextMenu.side === 'source' ? 'Selected' : 'Available'), h("div", { key: '6cc356d98029ef9274e4e0d63f4879d8e03a06a0', class: "menu-item danger", onClick: () => {
+            } }, h("ui-icon", { key: '86eecd5a3ed23ce8f104c425d7a04925f6e2af04', name: "send", library: "lucide", size: "14" }), " Move to ", this.contextMenu.side === 'source' ? 'Selected' : 'Available'), h("div", { key: '33d77968be2dcbd35f62ea53e544a0645c1dc2a0', class: "menu-item danger", onClick: () => {
                 if (this.contextMenu.side === 'source')
                     this.sourceSelected.delete(this.contextMenu.item.key);
                 else
                     this.targetSelected.delete(this.contextMenu.item.key);
-            } }, h("ui-icon", { key: 'cbfe5dec61fe84404a968868f505c840464b5ae8', name: "x", library: "lucide", size: "14" }), " Deselect"))))));
+            } }, h("ui-icon", { key: '7a7026114825cc48d13f34906387eb8a13c7e771', name: "x", library: "lucide", size: "14" }), " Deselect"))))));
     }
     renderList(side) {
         const items = side === 'source' ? this.getSourceItems() : this.getTargetItems();
@@ -519,7 +519,7 @@ export class TransferList {
         else {
             content = this.renderListView(displayItems, selected, side);
         }
-        return (h("div", { class: "transfer-list-box" }, h("div", { class: "transfer-list-header" }, this.showSelectAll && this.mode !== 'tree' && (h("ui-checkbox", { checked: allSelected, indeterminate: indeterminate, onCheckboxChange: (e) => this.toggleSelectAll(side, e.detail.checked), disabled: this.disabled || filteredItems.length === 0, size: "sm" })), h("span", { class: "header-title" }, title), this.sortable && (h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: order === 'asc' ? "arrow-up-z-a" : "arrow-down-a-z", iconLibrary: "lucide", iconSize: "14px", onClick: () => this.toggleSort(side), ariaLabel: "Toggle Sort" })), h("div", { class: "header-actions" }, h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "check-check", iconLibrary: "lucide", iconSize: "14px", onClick: () => this.bulkAction(side, 'all'), ariaLabel: "Select All Search Results" }), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "x", iconLibrary: "lucide", iconSize: "14px", onClick: () => this.bulkAction(side, 'none'), ariaLabel: "Clear Selection" }), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "list-restart", iconLibrary: "lucide", iconSize: "14px", onClick: () => this.bulkAction(side, 'invert'), ariaLabel: "Invert Selection" })), h("span", { class: { 'header-count': true, 'pop-anim': side === 'source' ? this.badgeAnimating.source : this.badgeAnimating.target } }, filteredItems.filter(i => selected.has(i.key)).length, "/", filteredItems.length)), this.searchable && (h("div", { class: "transfer-search" }, h("ui-input", { type: "text", placeholder: this.searchPlaceholder, value: search, onInputChange: (e) => {
+        return (h("div", { class: "transfer-list-box" }, h("div", { class: "transfer-list-header" }, this.showSelectAll && this.mode !== 'tree' && (h("ui-checkbox", { checked: allSelected, indeterminate: indeterminate, onCheckboxChange: (e) => this.toggleSelectAll(side, e.detail.checked), disabled: this.disabled || filteredItems.length === 0, size: "sm" })), h("span", { class: "header-title" }, title), this.sortable && (h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: order === 'asc' ? "arrow-up-z-a" : "arrow-down-a-z", iconLibrary: "lucide", iconSize: "14px", onClick: () => this.toggleSort(side), ariaLabel: "Toggle Sort" })), h("div", { class: "header-actions" }, side === 'target' && this.allowReorder && (h("div", { class: "header-reorder-actions", style: { display: 'flex', gap: '4px', marginRight: '8px', paddingRight: '8px', borderRight: '1px solid var(--ui-border-default, var(--border-default, #e5e7eb))' } }, h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "arrow-up", iconLibrary: "lucide", iconSize: "14px", disabled: this.targetSelected.size === 0, onClick: () => this.reorder('up'), ariaLabel: "Move Up" }), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "arrow-down", iconLibrary: "lucide", iconSize: "14px", disabled: this.targetSelected.size === 0, onClick: () => this.reorder('down'), ariaLabel: "Move Down" }))), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "check-check", iconLibrary: "lucide", iconSize: "14px", onClick: () => this.bulkAction(side, 'all'), ariaLabel: "Select All Search Results" }), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "x", iconLibrary: "lucide", iconSize: "14px", onClick: () => this.bulkAction(side, 'none'), ariaLabel: "Clear Selection" }), h("ui-button", { variant: "ghost", size: "sm", iconOnly: true, icon: "list-restart", iconLibrary: "lucide", iconSize: "14px", onClick: () => this.bulkAction(side, 'invert'), ariaLabel: "Invert Selection" })), h("span", { class: { 'header-count': true, 'pop-anim': side === 'source' ? this.badgeAnimating.source : this.badgeAnimating.target } }, filteredItems.filter(i => selected.has(i.key)).length, "/", filteredItems.length)), this.searchable && (h("div", { class: "transfer-search" }, h("ui-input", { type: "text", placeholder: this.searchPlaceholder, value: search, onInputChange: (e) => {
                 const val = e.detail;
                 if (side === 'source') {
                     this.sourceSearch = val;

package/dist/collection/components/tree/tree.css

@@ -30,17 +30,19 @@
   /* Core Color Tokens (Light Theme Default) */
   --tree-bg: var(--bg-primary, #ffffff);
   --tree-text: var(--text-primary, #1f2937);
-  --tree-text-muted: var(--color-primary, #6b7280);
+  --tree-text-muted: var(--text-muted, #6b7280);
   --tree-border-color: var(--border-default, #e5e7eb);
-  --tree-primary: var(--color-success, #3dcd58);
-  --tree-primary-50: rgba(var(--color-success-rgb, 61, 205, 88), 0.08);
-  --tree-primary-100: rgba(var(--color-success-rgb, 61, 205, 88), 0.15);
-  --tree-primary-200: rgba(var(--color-success-rgb, 61, 205, 88), 0.25);
-  --tree-muted: var(--color-primary, #9ca3af);
+  --tree-primary: var(--color-primary, #3b82f6);
+  --tree-primary-50: rgba(var(--color-primary-rgb, 59, 130, 246), 0.08);
+  --tree-primary-100: rgba(var(--color-primary-rgb, 59, 130, 246), 0.15);
+  --tree-primary-200: rgba(var(--color-primary-rgb, 59, 130, 246), 0.25);
+  --tree-black: #111827;
+  --tree-white: #ffffff;
+  --tree-muted: var(--text-muted, #9ca3af);
   --tree-node-hover-bg: rgba(0, 0, 0, 0.02);
-  --tree-line-color-default: rgba(0, 0, 0, 0.15);
+  --tree-line-color-default: var(--tree-text);
   --tree-error: var(--color-danger, #ef4444);
-  --tree-info: var(--color-primary, #10b981);
+  --tree-info: var(--color-info, #3b82f6);
   --tree-success: var(--color-success, #10b981);
   --tree-warning: var(--color-warning, #f59e0b);
 }
@@ -54,11 +56,11 @@
 }
 .tree-container.tree-theme-dark {
   --tree-bg: var(--bg-primary, #1f2937);
-  --tree-text: var(--bg-primary, #f3f4f6);
-  --tree-text-muted: var(--color-primary, #9ca3af);
+  --tree-text: var(--tree-white);
+  --tree-text-muted: var(--text-muted, #9ca3af);
   --tree-border-color: var(--border-default, #374151);
   --tree-node-hover-bg: rgba(255, 255, 255, 0.05);
-  --tree-line-color-default: rgba(255, 255, 255, 0.1);
+  --tree-line-color-default: var(--tree-text);
   background: var(--tree-bg);
   color: var(--tree-text);
 }
@@ -238,13 +240,13 @@
   width: 24px;
   height: 24px;
   flex-shrink: 0;
-  color: var(--tree-text-muted);
+  color: var(--tree-node-content-color, var(--tree-text));
   font-size: 11px;
   cursor: pointer;
   z-index: 2;
 }
 .tree-expand-icon:hover {
-  color: var(--tree-primary);
+  color: var(--tree-node-content-color, var(--tree-text));
 }
 .tree-expand-icon {
   margin-right: 8px;
@@ -287,7 +289,10 @@
   height: 20px;
   flex-shrink: 0;
   font-size: 16px;
-  color: var(--tree-primary);
+  color: var(--tree-node-content-color, var(--tree-text));
+}
+.tree-node-icon ui-icon {
+  color: inherit;
 }
 .tree-node-icon.tree-node-icon-spacer {
   visibility: hidden;
@@ -311,6 +316,7 @@
   position: relative;
   z-index: 2;
   cursor: pointer;
+  color: var(--tree-node-content-color, var(--tree-text));
   transition: background-color 0.2s ease;
 }
 .tree-node-content:hover {
@@ -329,11 +335,11 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 14px;
-  color: var(--tree-text);
+  color: var(--tree-node-content-color, var(--tree-text));
 }
 
 .tree-theme-dark .tree-node-label {
-  color: var(--tree-text);
+  color: var(--tree-node-content-color, var(--tree-text));
 }
 
 .tree-node-spinner {
@@ -675,7 +681,7 @@
   box-shadow: 0 0 0 3px var(--tree-primary-100);
 }
 .tree-variant-modern-green .tree-node-icon {
-  color: var(--tree-primary);
+  color: inherit;
 }
 .tree-variant-modern-green .tree-expand-icon {
   color: var(--tree-primary);
@@ -948,7 +954,7 @@
 /* ── Description ─────────────────────────────────────────────────────────── */
 .tree-node-description {
   font-size: 11px;
-  color: var(--tree-text-muted);
+  color: var(--tree-node-content-color, var(--tree-text));
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -970,7 +976,7 @@
 .tree-node-lock {
   display: flex;
   align-items: center;
-  color: var(--tree-text-muted);
+  color: var(--tree-node-content-color, var(--tree-text));
   flex-shrink: 0;
   margin-left: 4px;
 }
@@ -1020,10 +1026,10 @@
   --tree-primary: var(--color-warning, #f59e0b);
 }
 .tree-variant-directory .tree-node-branch > .tree-node-content .tree-node-icon ui-icon {
-  color: var(--color-warning, #f59e0b);
+  color: inherit;
 }
 .tree-variant-directory .tree-node-leaf > .tree-node-content .tree-node-icon ui-icon {
-  color: var(--color-primary, #60a5fa);
+  color: inherit;
 }
 .tree-variant-directory .tree-node-selected > .tree-node-content {
   background: rgba(var(--color-warning-rgb, 245, 158, 11), 0.08);
@@ -1180,6 +1186,14 @@
   color: var(--tree-info);
 }
 
+.tree-node-black > .tree-node-content .tree-node-label {
+  color: var(--tree-black);
+}
+
+.tree-node-white > .tree-node-content .tree-node-label {
+  color: var(--tree-white);
+}
+
 /* ── Transition for children collapse ────────────────────────────────────── */
 .tree-animated .tree-children {
   animation: treeSlideIn 0.18s cubic-bezier(0.4, 0, 0.2, 1);

package/dist/collection/components/tree/tree.js

@@ -669,6 +669,13 @@ export class Tree {
             label.substring(idx + this.searchTerm.length),
         ];
     }
+    getNodeVisualColor(node) {
+        if (node.color)
+            return `var(--tree-${node.color})`;
+        if (this.expandIconColor)
+            return this.expandIconColor;
+        return 'var(--tree-text)';
+    }
     _renderExpandIcon(isExpanded, node) {
         let iconName = '';
         let style = {};
@@ -694,12 +701,10 @@ export class Tree {
                     break;
             }
         }
-        if (this.expandIconColor) {
-            style.color = this.expandIconColor;
-        }
+        style.color = this.getNodeVisualColor(node);
         return (h("div", { class: "tree-expand-icon", onClick: (e) => { e.stopPropagation(); this.internalNodes = this._toggleNode(node.id); } }, h("ui-icon", { name: iconName, library: library, size: this.expandIconSize, style: style })));
     }
-    renderNode(node, level = 0, path = [], isLast = false, parentPath = [], index = 0, groupHasIcons = false) {
+    renderNode(node, level = 0, path = [], isLast = false, parentPath = [], index = 0, groupHasIcons = false, ancestorColors = []) {
         const hasChildren = !!(node.children?.length);
         const canExpand = hasChildren || (this.lazyLoad && node.isLeaf === false);
         const isExpanded = !!node.expanded;
@@ -710,6 +715,10 @@ export class Tree {
         const depth = level;
         const baseWidth = this.connectorWidth || 1.8;
         const selPathIds = this._selectionPathIds || new Set();
+        const nodeVisualColor = this.getNodeVisualColor(node);
+        // Determine the color for the branch coming out of this node
+        const nodeBranchColor = node.connectorColor || (node.color ? `var(--tree-${node.color})` : null) || this.connectorColor || 'var(--tree-line-color-default)';
+        const currentAncestorColors = [...ancestorColors, nodeBranchColor];
         // SVG connectors
         const connectors = [];
         if (this.showLines && this.layout === 'tree' && depth > 0) {
@@ -719,7 +728,7 @@ export class Tree {
                 const segW = Math.max(0.6, baseWidth - i * 0.3);
                 const lx = i * this.indent + 12;
                 const isHL = selPathIds.has(currentPath[i + 1] ?? '');
-                const color = node.connectorColor || this.connectorColor || 'var(--tree-line-color-default)';
+                const color = ancestorColors[i] || 'var(--tree-line-color-default)';
                 const opacity = this.connectorOpacity;
                 const showV = i < depth - 1 ? !parentPath[i + 1] : !isLast;
                 if (showV) {
@@ -762,11 +771,13 @@ export class Tree {
             'aria-disabled': node.disabled ? 'true' : undefined,
             tabindex: (this.focusedNodeId === node.id || (this.focusedNodeId === null && level === 0 && index === 0)) ? '0' : '-1',
         };
-        const nodeContent = (h("div", { class: nodeClasses, key: node.id, "data-node-id": node.id, "data-depth": depth, style: { '--depth': String(depth) } }, this.layout === 'tree' && connectors, isDragOver && this.dragPosition === 'before' && h("div", { class: "tree-drop-indicator tree-drop-before-line" }), h("div", { class: "tree-node-content", style: this.layout === 'tree' ? { paddingLeft: `${(depth + 1) * this.indent}px`, minHeight: `${this.nodeHeight}px` } : { minHeight: `${this.nodeHeight}px` }, onClick: (e) => !isEditing && this.handleNodeClick(node, currentPath, e), onDblClick: () => this.inlineEdit && !node.disabled && this.startEditing(node), onContextMenu: (e) => this.handleContextMenu(node, e), draggable: this.enableDrag && !node.disabled, onDragStart: (e) => this.handleDragStart(node, e), onDragOver: (e) => this.handleDragOver(node, e), onDragLeave: (e) => this.handleDragLeave(e), onDrop: (e) => this.handleDrop(node, e), ...ariaAttrs }, this.expandable && canExpand
+        const nodeContent = (h("div", { class: nodeClasses, key: node.id, "data-node-id": node.id, "data-depth": depth, style: { '--depth': String(depth) } }, this.layout === 'tree' && connectors, isDragOver && this.dragPosition === 'before' && h("div", { class: "tree-drop-indicator tree-drop-before-line" }), h("div", { class: "tree-node-content", style: this.layout === 'tree'
+                ? { paddingLeft: `${(depth + 1) * this.indent}px`, minHeight: `${this.nodeHeight}px`, '--tree-node-content-color': nodeVisualColor }
+                : { minHeight: `${this.nodeHeight}px`, '--tree-node-content-color': nodeVisualColor }, onClick: (e) => !isEditing && this.handleNodeClick(node, currentPath, e), onDblClick: () => this.inlineEdit && !node.disabled && this.startEditing(node), onContextMenu: (e) => this.handleContextMenu(node, e), draggable: this.enableDrag && !node.disabled, onDragStart: (e) => this.handleDragStart(node, e), onDragOver: (e) => this.handleDragOver(node, e), onDragLeave: (e) => this.handleDragLeave(e), onDrop: (e) => this.handleDrop(node, e), ...ariaAttrs }, this.expandable && canExpand
             ? this._renderExpandIcon(isExpanded, node)
-            : h("div", { class: "tree-expand-spacer" }), this.checkboxes && (h("div", { class: "tree-checkbox" }, h("ui-checkbox", { checked: !!node.checked, disabled: !!node.disabled, indeterminate: !!node.indeterminate, onCheckboxChange: (e) => this.handleCheckboxChange(node, e), size: "sm" }))), this.showAvatars && (node.avatar || node.avatarInitials) && (h("div", { class: "tree-node-avatar" }, node.avatar
+            : h("div", { class: "tree-expand-spacer" }), this.checkboxes && (h("div", { class: "tree-checkbox", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation() }, h("ui-checkbox", { checked: !!node.checked, disabled: !!node.disabled, indeterminate: !!node.indeterminate, onCheckboxChange: (e) => this.handleCheckboxChange(node, e), size: "sm" }))), this.showAvatars && (node.avatar || node.avatarInitials) && (h("div", { class: "tree-node-avatar" }, node.avatar
             ? h("img", { src: node.avatar, alt: node.label })
-            : h("span", { class: `tree-node-avatar-initials tree-node-avatar-${node.color ?? 'primary'}` }, node.avatarInitials))), (nodeIcon || groupHasIcons) && (h("div", { class: `tree-node-icon${!nodeIcon ? ' tree-node-icon-spacer' : ''}` }, nodeIcon && !node.loading && (h("ui-icon", { name: nodeIcon, library: node.iconLibrary ?? this.iconLibrary, size: "16px", style: { color: node.color ? `var(--tree-${node.color})` : undefined } })), node.loading && h("ui-icon", { name: "loader-2", library: "lucide", spin: true, size: "16px" }))), h("div", { class: "tree-node-text-group" }, isEditing
+            : h("span", { class: `tree-node-avatar-initials tree-node-avatar-${node.color ?? 'primary'}` }, node.avatarInitials))), (nodeIcon || groupHasIcons) && (h("div", { class: `tree-node-icon${!nodeIcon ? ' tree-node-icon-spacer' : ''}` }, nodeIcon && !node.loading && (h("ui-icon", { name: nodeIcon, library: node.iconLibrary ?? this.iconLibrary, size: "16px" })), node.loading && h("ui-icon", { name: "loader-2", library: "lucide", spin: true, size: "16px" }))), h("div", { class: "tree-node-text-group" }, isEditing
             ? (h("ui-input", { class: "tree-edit-input", type: "text", value: this.editingValue, onInputChange: (e) => { this.editingValue = e.detail; }, onInputKeydown: (e) => {
                     if (e.detail.key === 'Enter')
                         this.commitEditing(node);
@@ -776,12 +787,12 @@ export class Tree {
                 }, onInputBlur: () => this.commitEditing(node), autoFocus: true, size: "sm", fullWidth: true }))
             : h("div", { class: "tree-node-label" }, this.renderLabel(node.label ?? '')), node.description && !isEditing && h("div", { class: "tree-node-description" }, node.description)), node.tag && h("div", { class: "tree-node-tag" }, node.tag), node.badge && h("div", { class: `tree-node-badge tree-node-badge-${node.color ?? 'primary'}` }, node.badge), node.counter !== undefined && h("div", { class: "tree-node-counter" }, node.counter), node.locked && (h("div", { class: "tree-node-lock", title: node.lockTooltip ?? 'Locked' }, h("ui-icon", { name: "lock", library: "fontawesome", size: "12px" }))), this.showNodeActions && (node.actions?.length ?? 0) > 0 && (h("div", { class: "tree-node-actions" }, node.actions.map((action) => (h("ui-button", { variant: "ghost", size: "sm", class: `tree-action-btn${action.color ? ` tree-action-${action.color}` : ''}`, icon: action.icon, iconLibrary: action.library ?? this.iconLibrary, iconSize: "13px", ariaLabel: action.tooltip, disabled: !!action.disabled, onClick: (e) => { e.stopPropagation(); this.nodeAction.emit({ node, action: String(action.id ?? '') }); } })))))), isDragOver && this.dragPosition === 'after' && h("div", { class: "tree-drop-indicator tree-drop-after-line" }), canExpand && isExpanded && this.layout === 'tree' && (h("div", { class: `tree-children${isDragOver && this.dragPosition === 'inside' ? ' tree-children-drop-target' : ''}` }, hasChildren && node.children.map((child, idx) => {
             const childHasIcons = node.children.some(c => c.icon || this.showIcons);
-            return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons);
+            return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons, currentAncestorColors);
         })))));
         if (this.layout === 'org-chart') {
             return (h("div", { class: "tree-node-wrapper" }, nodeContent, canExpand && isExpanded && (h("div", { class: "tree-children" }, hasChildren && node.children.map((child, idx) => {
                 const childHasIcons = node.children.some(c => c.icon || this.showIcons);
-                return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons);
+                return this.renderNode(child, level + 1, currentPath, idx === node.children.length - 1, [...parentPath, isLast], idx, childHasIcons, currentAncestorColors);
             })))));
         }
         return nodeContent;
@@ -821,7 +832,7 @@ export class Tree {
             'tree-selectable': this.selectable,
             'tree-glow': this.showGlow,
         };
-        return (h(Host, { key: 'dae18b9d9751a023555e848bb0b5aaebdd235770', class: cls, style: { '--tree-indent': `${this.indent}px`, '--tree-node-height': `${this.nodeHeight}px` }, onKeyDown: this.handleKeyDown, tabIndex: 0 }, h("div", { key: '9b15d92f21722bcd345733cfa44206e3c83a2fa9', class: "tree-inner", role: "tree", "aria-multiselectable": this.multiSelect ? 'true' : 'false' }, this.searchable && (h("div", { key: 'be71bda4e65cfcf704616ef2ae563630bffde2fa', class: "tree-search" }, h("ui-icon", { key: '53d76e4229942408bf50ab0c72d3ce6d1811fbd2', name: "search", library: "fontawesome", size: "13px", class: "tree-search-icon" }), h("ui-input", { key: 'b8edf92c3dda73600fd0a653739aa1206be64698', type: "text", placeholder: "Search tree...", value: this.searchTerm, onInputChange: (e) => this.handleSearchInput(e), ariaLabel: "Search tree", size: "sm", fullWidth: true }), this.searchTerm && (h("ui-button", { key: '66800256ed8fc8139dab93bd920d25a2a6219cdf', variant: "ghost", size: "sm", class: "tree-search-clear", icon: "times", iconLibrary: "fontawesome", iconSize: "11px", ariaLabel: "Clear search", onClick: () => { this.searchTerm = ''; } })))), this.undoRedoEnabled && (h("div", { key: 'a391e1e016e422fbdd2781a09daf176bf8fe58df', class: "tree-toolbar" }, h("ui-button", { key: '73de8c1affc18220f94912f546c7e992d81850ed', variant: "ghost", size: "sm", icon: "undo", iconLibrary: "fontawesome", iconSize: "13px", label: "Undo", ariaLabel: "Undo (Ctrl+Z)", disabled: !this.undoStack.length, onClick: () => this.undo() }), h("ui-button", { key: '0aebc8cafd66fb273eb7e39b682a29a24f73bfcc', variant: "ghost", size: "sm", icon: "redo", iconLibrary: "fontawesome", iconSize: "13px", label: "Redo", ariaLabel: "Redo (Ctrl+Shift+Z)", disabled: !this.redoStack.length, onClick: () => this.redo() }), h("div", { key: '5bf0083e6ccd220d480a29f0fce27e220dba4231', class: "tree-toolbar-sep" }), h("ui-button", { key: '4aee1b4dfa0e8a99770e2ea55670cf17a3491bfb', variant: "ghost", size: "sm", icon: "expand", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Expand all", onClick: () => this.expandAllNodes() }), h("ui-button", { key: '31c8f23735e0aabb53bee60f63f823f0facbf4c2', variant: "ghost", size: "sm", icon: "compress", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Collapse all", onClick: () => this.collapseAllNodes() }))), h("div", { key: 'c635c7a4205a04d0fbb29bbbf666d82e3799e76e', class: "tree-content", style: this.virtualScroll ? { height: `${this.virtualScrollHeight}px`, overflowY: 'auto' } : {}, onScroll: () => this.virtualScroll && this.el.forceUpdate() }, this.virtualScroll && this.layout === 'tree' ? ((() => {
+        return (h(Host, { key: '59147cb567d01f4e12449fa3cd109eca5210ee1f', class: cls, style: { '--tree-indent': `${this.indent}px`, '--tree-node-height': `${this.nodeHeight}px` }, onKeyDown: this.handleKeyDown, tabIndex: 0 }, h("div", { key: '6cb12a3325b553dd316b424e21aa022b99ce0874', class: "tree-inner", role: "tree", "aria-multiselectable": this.multiSelect ? 'true' : 'false' }, this.searchable && (h("div", { key: '8ad616baffd4342b933c0081ea7119ca980ecc3e', class: "tree-search" }, h("ui-icon", { key: 'eb797f0781e9a8327c8a8637c6e9a3a3ab311280', name: "search", library: "fontawesome", size: "13px", class: "tree-search-icon" }), h("ui-input", { key: '0aea765a1be6e7896a84515f9956e53203f3621a', type: "text", placeholder: "Search tree...", value: this.searchTerm, onInputChange: (e) => this.handleSearchInput(e), ariaLabel: "Search tree", size: "sm", fullWidth: true }), this.searchTerm && (h("ui-button", { key: 'ae8a8d96cd5652801b1a87dd736adf12225ed599', variant: "ghost", size: "sm", class: "tree-search-clear", icon: "times", iconLibrary: "fontawesome", iconSize: "11px", ariaLabel: "Clear search", onClick: () => { this.searchTerm = ''; } })))), this.undoRedoEnabled && (h("div", { key: '273b197684072616b1593a140f7f3e18d254c8e4', class: "tree-toolbar" }, h("ui-button", { key: 'd852d87dafa4ddf297d30d4abbc0fb33c535eeba', variant: "ghost", size: "sm", icon: "undo", iconLibrary: "fontawesome", iconSize: "13px", label: "Undo", ariaLabel: "Undo (Ctrl+Z)", disabled: !this.undoStack.length, onClick: () => this.undo() }), h("ui-button", { key: '3947cdc4e5d97a53f2fbeafdf6eaa1d2b17db732', variant: "ghost", size: "sm", icon: "redo", iconLibrary: "fontawesome", iconSize: "13px", label: "Redo", ariaLabel: "Redo (Ctrl+Shift+Z)", disabled: !this.redoStack.length, onClick: () => this.redo() }), h("div", { key: 'ed355126526964054489a73c2499dbc7a9ed4ac2', class: "tree-toolbar-sep" }), h("ui-button", { key: '782ebfa66fb49ecfa93b88d72d3b4f5b32063909', variant: "ghost", size: "sm", icon: "expand", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Expand all", onClick: () => this.expandAllNodes() }), h("ui-button", { key: '17b5a4ca2c4d8a8bc9789774b69a2495faec0b47', variant: "ghost", size: "sm", icon: "compress", iconLibrary: "fontawesome", iconSize: "13px", ariaLabel: "Collapse all", onClick: () => this.collapseAllNodes() }))), h("div", { key: '42a81f5678c64d660a61bece182cc9a58937448c', class: "tree-content", style: this.virtualScroll ? { height: `${this.virtualScrollHeight}px`, overflowY: 'auto' } : {}, onScroll: () => this.virtualScroll && this.el.forceUpdate() }, this.virtualScroll && this.layout === 'tree' ? ((() => {
             const visibleNodes = this._getVisibleNodes(filtered);
             const scrollTop = this.el.shadowRoot?.querySelector('.tree-content')?.scrollTop || 0;
             const startIndex = Math.max(0, Math.floor(scrollTop / this.nodeHeight) - 2);
@@ -829,10 +840,14 @@ export class Tree {
             return (h("div", { class: "tree-virtual-scroller", style: { height: `${visibleNodes.length * this.nodeHeight}px`, position: 'relative' } }, h("div", { class: "tree-virtual-offset", style: { transform: `translateY(${startIndex * this.nodeHeight}px)` } }, visibleNodes.slice(startIndex, endIndex).map((node, _idx) => {
                 const path = this._findPath(node.id, this.internalNodes) || [];
                 const isLast = false; // Hard to determine in flat list without extra metadata
-                return this.renderNode(node, path.length - 1, path.slice(0, -1), isLast, [], 0, false);
+                const ancestorColors = path.map(pid => {
+                    const pNode = this._findNode(pid, this.internalNodes);
+                    return pNode?.connectorColor || (pNode?.color ? `var(--tree-${pNode.color})` : null) || this.connectorColor || 'var(--tree-line-color-default)';
+                });
+                return this.renderNode(node, path.length - 1, path.slice(0, -1), isLast, [], 0, false, ancestorColors);
             }))));
         })()) : (filtered.length > 0
-            ? filtered.map((node, idx) => this.renderNode(node, 0, [], idx === filtered.length - 1, [], idx, topHasIcons))
+            ? filtered.map((node, idx) => this.renderNode(node, 0, [], idx === filtered.length - 1, [], idx, topHasIcons, []))
             : (h("div", { class: "tree-empty" }, h("ui-icon", { name: "folder-open", library: "fontawesome", size: "40px" }), h("p", null, this.searchTerm ? 'No results found' : 'No items')))))), this.renderContextMenu()));
     }
     static get is() { return "ui-tree"; }