atomicuilibrary 0.1.0 → 0.1.3

package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.css

@@ -27,13 +27,13 @@
    * CSS Variables (Theming)
    * -------------------------------------------------------------------------- */
   /* Light Theme (Standard) */
-  --nav-bg: #fcfcfc;
-  --nav-color: #000000;
-  --nav-border-color: #d9d9d9;
-  --nav-item-hover-bg: #e6e6e6;
-  --nav-item-active-bg: rgba(0, 138, 22, 0.08);
-  --nav-item-active-color: #008a16;
-  --nav-accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+  --nav-bg: var(--bg-primary, #fcfcfc);
+  --nav-color: var(--text-primary, #000000);
+  --nav-border-color: var(--border-subtle, #d9d9d9);
+  --nav-item-hover-bg: var(--bg-hover, #e6e6e6);
+  --nav-item-active-bg: var(--bg-selected, var(--color-primary-subtle, rgba(0, 138, 22, 0.08)));
+  --nav-item-active-color: var(--color-primary, #008a16);
+  --nav-accent-gradient: linear-gradient(135deg, var(--color-primary, #3b82f6) 0%, var(--color-secondary, #8b5cf6) 100%);
   --nav-width: 280px;
   /* Dynamic via JS */
   --nav-transition: width 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
@@ -96,17 +96,19 @@
   transform: rotate(0deg);
 }
 
-:host([data-theme=dark]) {
+:host([data-theme=dark]),
+:host-context([data-theme=dark]) {
   /* Portal Consistent Dark Theme */
-  --nav-bg: #111827;
-  --nav-color: #94a3b8;
-  --nav-border-color: #1e293b;
-  --nav-item-hover-bg: #1e293b;
-  --nav-item-active-bg: rgba(0, 138, 22, 0.15);
-  --nav-item-active-color: #008a16;
+  --nav-bg: var(--bg-primary, #111827);
+  --nav-color: var(--text-secondary, #94a3b8);
+  --nav-border-color: var(--border-subtle, #1e293b);
+  --nav-item-hover-bg: var(--bg-hover, #1e293b);
+  --nav-item-active-bg: var(--bg-selected, var(--color-primary-subtle, rgba(0, 138, 22, 0.15)));
+  --nav-item-active-color: var(--color-primary, #008a16);
 }
 
-:host([data-theme=green]) {
+:host([data-theme=green]),
+:host-context([data-theme=green]) {
   /* Schneider Electric Green Theme */
   --nav-bg: #3DCD58;
   --nav-color: #ffffff;
@@ -116,6 +118,22 @@
   --nav-item-active-color: #ffffff;
 }
 
+:host([data-theme=pink]),
+:host-context([data-theme=pink]),
+:host([data-theme=violet]),
+:host-context([data-theme=violet]),
+:host([data-theme=yellow]),
+:host-context([data-theme=yellow]),
+:host([data-theme=blue]),
+:host-context([data-theme=blue]) {
+  --nav-bg: var(--bg-primary);
+  --nav-color: var(--text-secondary, var(--text-primary));
+  --nav-border-color: var(--border-subtle);
+  --nav-item-hover-bg: var(--bg-hover);
+  --nav-item-active-bg: var(--bg-selected, var(--color-primary-subtle));
+  --nav-item-active-color: var(--color-primary);
+}
+
 /* --------------------------------------------------------------------------
  * Horizontal Layout
  * -------------------------------------------------------------------------- */
@@ -488,7 +506,7 @@ a.nav-item {
 .nav-glider {
   position: absolute;
   width: 4px;
-  background-color: #008a16;
+  background-color: var(--nav-item-active-color, #008a16);
   /* Modern UI Signature Green */
   border-radius: 4px;
   transition: top 0.25s cubic-bezier(0.4, 0, 0.2, 1), height 0.2s ease, opacity 0.2s;

package/dist/collection/components/ui-navigation-bar/navigation-bar/navigation-bar.js

@@ -156,6 +156,18 @@ export class NavigationBar {
             if (el.classList.contains('green') || body.classList.contains('green') || themeAttr === 'green') {
                 this.effectiveTheme = 'green';
             }
+            else if (el.classList.contains('pink') || body.classList.contains('pink') || themeAttr === 'pink') {
+                this.effectiveTheme = 'pink';
+            }
+            else if (el.classList.contains('violet') || body.classList.contains('violet') || themeAttr === 'violet') {
+                this.effectiveTheme = 'violet';
+            }
+            else if (el.classList.contains('yellow') || body.classList.contains('yellow') || themeAttr === 'yellow') {
+                this.effectiveTheme = 'yellow';
+            }
+            else if (el.classList.contains('blue') || body.classList.contains('blue') || themeAttr === 'blue') {
+                this.effectiveTheme = 'blue';
+            }
             else if (el.classList.contains('dark') || body.classList.contains('dark') || themeAttr === 'dark' || window.matchMedia('(prefers-color-scheme: dark)').matches) {
                 this.effectiveTheme = 'dark';
             }
@@ -433,7 +445,7 @@ export class NavigationBar {
         const vars = {
             '--nav-width': typeof this.isExpanded === 'boolean' ? (this.isExpanded ? this.expandedWidth : this.isMobile ? '0px' : this.collapsedWidth) : this.collapsedWidth,
         };
-        return (h(Host, { key: '8c2709e6da4c4d5dc9c119d80ae046ced0681677', style: vars, class: hostClass, theme: null, "data-theme": this.effectiveTheme }, h("div", { key: 'eeb7ad1eae7c89b8d8a81bb62b89b89b7d76f2de', class: "nav-glider", style: {
+        return (h(Host, { key: '2eb01698cf4e733afaea46d374a90834404dac5c', style: vars, class: hostClass, "data-theme": this.effectiveTheme }, h("div", { key: '64afaaedfbae9c6ef52d43dd9a66b0f8c70cb005', class: "nav-glider", style: {
                 top: this.orientation === 'horizontal' ? 'auto' : `${typeof this.gliderTop === 'number' ? this.gliderTop : 0}px`,
                 height: this.orientation === 'horizontal' ? '3px' : `${typeof this.gliderHeight === 'number' ? this.gliderHeight : 0}px`,
                 left: this.orientation === 'horizontal' ? `${typeof this.gliderLeft === 'number' ? this.gliderLeft : 0}px` : this.position === 'left' ? '6px' : 'auto',
@@ -441,21 +453,21 @@ export class NavigationBar {
                 width: this.orientation === 'horizontal' ? `${typeof this.gliderWidth === 'number' ? this.gliderWidth : 0}px` : '4px',
                 bottom: this.orientation === 'horizontal' ? '0' : 'auto',
                 opacity: `${typeof this.gliderOpacity === 'number' ? this.gliderOpacity : 0}`,
-            } }), this.renderToggle(), this.isMobile && this.isExpanded && h("div", { key: '1c4f23fe57c282e4ad5a1c28d1223de8086fda72', class: "nav-backdrop", onClick: () => this.close() }), h("div", { key: '65075734486486764a894c6fb7b83d7333ec73c7', class: "nav-blocks-container" }, h("div", { key: 'd4dee15c771e8ae62f649aeb28b56c10e7cbb853', class: "nav-header" }, h("slot", { key: 'ca14ebc9b45a559df2aed758838a3ed76bb1c3ae', name: "header" }, (this.companyLogo || this.companyName) && (h("div", { key: '7d0a0735620d690057d9a1b62a9c749fdb3f2c84', class: "nav-company-block", style: { display: 'flex', alignItems: 'center', gap: '12px', padding: '0 24px', height: '64px' } }, this.companyLogo && h("img", { key: 'f09f09d20a33e176cd566dd53bc0241bd354411a', src: this.companyLogo, alt: this.companyName || 'Logo', style: { height: '32px', width: 'auto' } }), this.isExpanded && this.companyName && (h("span", { key: 'e4b520a45523db14ea2336b87e114aa1b71ec17d', class: "nav-company-name", style: { fontWeight: '600', fontSize: '16px' } }, this.companyName))))), h("slot", { key: '336712f1b384d40c36799ec38ef4e5855221d00e', name: "logo" }), this.isMobile && (h("div", { key: 'af115858dac6594075002677847f4ba5ee56c8d4', class: "nav-mobile-close", onClick: () => this.close() }, h("svg", { key: 'f8d652e0e156f6e45460ccad45c81dcca26aa7ee', viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", fill: "none" }, h("path", { key: 'e8fe61ea68a03aedeea2c782674c3ff355391559', d: "M18 6L6 18M6 6l12 12" }))))), this.showSearch && this.isExpanded && (h("div", { key: 'b3817d97c27963a5510f11e144bfc9c86224a3d4', class: "nav-search-bar" }, h("div", { key: '40459a1c370c1358513a5e0010490c40b2a7c8be', style: {
+            } }), this.renderToggle(), this.isMobile && this.isExpanded && h("div", { key: 'c1cc68a69a4483b72de62b8dc01df11c2cd5b46d', class: "nav-backdrop", onClick: () => this.close() }), h("div", { key: '4476a7ff93109e3b6e5958660b96dedba14f42e5', class: "nav-blocks-container" }, h("div", { key: '68faa594665af6f1cedf149185abd2cca9817228', class: "nav-header" }, h("slot", { key: 'b80e043762877652627c51eb2ddc3e0f63df57c0', name: "header" }, (this.companyLogo || this.companyName) && (h("div", { key: 'fb3c413c07ff8350426ad0f4f15bdbfd0ee86811', class: "nav-company-block", style: { display: 'flex', alignItems: 'center', gap: '12px', padding: '0 24px', height: '64px' } }, this.companyLogo && h("img", { key: '847a03eac2008e4ebc04e979edeeb5a13f5abdfc', src: this.companyLogo, alt: this.companyName || 'Logo', style: { height: '32px', width: 'auto' } }), this.isExpanded && this.companyName && (h("span", { key: 'abcff11af04d25aec0b037545d0aaf5c6dac7943', class: "nav-company-name", style: { fontWeight: '600', fontSize: '16px' } }, this.companyName))))), h("slot", { key: '3d76424bb0011e74f65a7652b422876216c5a184', name: "logo" }), this.isMobile && (h("div", { key: '90f60b7f7a238688f0ec88b5e719a3fbc351e9fc', class: "nav-mobile-close", onClick: () => this.close() }, h("svg", { key: '81b3b606dbc8e698b2bda807486d0a0807523baf', viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", fill: "none" }, h("path", { key: 'e3874a36edaccd360cb51f7ea7439ad35546b284', d: "M18 6L6 18M6 6l12 12" }))))), this.showSearch && this.isExpanded && (h("div", { key: '159550b1dad6ff640256e1d104365cf9914798cc', class: "nav-search-bar" }, h("div", { key: '2c546aba432593be79cb9cd87508fc97e9e53675', style: {
                 position: 'relative',
                 display: 'flex',
                 alignItems: 'center',
                 background: 'var(--nav-item-hover-bg, #f1f5f9)',
                 borderRadius: '6px',
                 padding: '4px 8px',
-            } }, h("svg", { key: 'fcde2dfec1ff2ba213d37f07fefaf6cb9f300932', viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", style: { opacity: '0.5', marginRight: '8px' } }, h("circle", { key: '26527fb8563cce41862c12c99c0e6dbb1459723b', cx: "11", cy: "11", r: "8" }), h("line", { key: '0bf144609d27eed0c1bb54de7ed1f3020445f2b1', x1: "21", y1: "21", x2: "16.65", y2: "16.65" })), h("input", { key: '43ef6d0df604e1e1edb88303ba4fe4c6bd97ccdb', type: "text", placeholder: "Search...", value: this.keyword, onInput: e => (this.keyword = e.target.value), style: {
+            } }, h("svg", { key: '3f908153c8229f86ef86a84e43db7f8f04e106f5', viewBox: "0 0 24 24", width: "16", height: "16", fill: "none", stroke: "currentColor", "stroke-width": "2", style: { opacity: '0.5', marginRight: '8px' } }, h("circle", { key: '0180978379bb2e07d78dc7ebbcfd9f977eeb3eab', cx: "11", cy: "11", r: "8" }), h("line", { key: '60eeaded9a9eae354f3c2b47b64b66d00d0256ff', x1: "21", y1: "21", x2: "16.65", y2: "16.65" })), h("input", { key: '1583b28f1daed5e1545a5040afe4722c7b3e4ab1', type: "text", placeholder: "Search...", value: this.keyword, onInput: e => (this.keyword = e.target.value), style: {
                 background: 'transparent',
                 border: 'none',
                 outline: 'none',
                 width: '100%',
                 fontSize: '14px',
                 color: 'inherit',
-            } })))), blocks.categories.length > 0 && (h("div", { key: '66b63ea16b9080d05cd540b503ead73792bb682e', class: "nav-block-categories", role: "tree" }, this.renderNavList(blocks.categories, 'cat'))), h("div", { key: '85217416656d87209bd63e35f359a54d3e374a40', class: "nav-block-top", role: "tree" }, this.renderNavList(blocks.primary, 'top'), h("slot", { key: 'aeb468782004f5f2f9f49335ee3a22cba28ccf11', name: "menu-item" }), " ", blocks.primary.length === 0 && blocks.categories.length === 0 && blocks.secondary.length === 0 && h("slot", { key: 'de7e8d6226e9e76bc112e10a5d8b17e526e30fd6', name: "empty-state" }, "No Items")), blocks.secondary.length > 0 && (h("div", { key: '189a5325fef7afc1082bf89551468dad58561308', class: "nav-block-secondary", role: "tree" }, this.renderNavList(blocks.secondary, 'sec'))), blocks.bottom.length > 0 && (h("div", { key: '3c5fa508db8925545a430a9b1cf3c4ea87371e15', class: "nav-block-bottom", role: "tree" }, blocks.bottom.map(item => this.renderItem(item)), h("slot", { key: '4f749f79cabfb4c3c3b3d902b60ab9d104c40284', name: "footer" }))), blocks.bottomSecondary.length > 0 && (h("div", { key: 'c74afe6c446481924cc7393522ebc97803bbc713', class: "nav-block-profile", role: "tree" }, blocks.bottomSecondary.map(item => this.renderItem(item)))))));
+            } })))), blocks.categories.length > 0 && (h("div", { key: '2c80c4bb5deef89af5f93ea6d2b1b69bbe8d94be', class: "nav-block-categories", role: "tree" }, this.renderNavList(blocks.categories, 'cat'))), h("div", { key: 'd235632930a29f1be58a749317415cac8dda95db', class: "nav-block-top", role: "tree" }, this.renderNavList(blocks.primary, 'top'), h("slot", { key: '5b4e7cbf60a4017630323b05c5f49f447c72342a', name: "menu-item" }), " ", blocks.primary.length === 0 && blocks.categories.length === 0 && blocks.secondary.length === 0 && h("slot", { key: 'e4bfa9034a10ca358f6b82ae98c25473a93ca6e7', name: "empty-state" }, "No Items")), blocks.secondary.length > 0 && (h("div", { key: 'f09d0dc5ac73f3be4f955b06e8df12df35841cd5', class: "nav-block-secondary", role: "tree" }, this.renderNavList(blocks.secondary, 'sec'))), blocks.bottom.length > 0 && (h("div", { key: 'c177f73e835f8145392a2977ca8d2e1a0a19e0dc', class: "nav-block-bottom", role: "tree" }, blocks.bottom.map(item => this.renderItem(item)), h("slot", { key: '30645d8bdf679a52419bfcc3a24ca94b334d7e09', name: "footer" }))), blocks.bottomSecondary.length > 0 && (h("div", { key: '5359678d2c1719502bb2ef9ea98884bad930a01a', class: "nav-block-profile", role: "tree" }, blocks.bottomSecondary.map(item => this.renderItem(item)))))));
     }
     isBottomItem(id) {
         const blocks = this.getBlocks();
@@ -479,9 +491,6 @@ export class NavigationBar {
         const hasChildren = item.children && item.children.length > 0;
         const paddingLeft = level * 16 + 16 + 'px';
         const itemId = `nav-item-${item.id}`;
-        // Determine tag type: use 'a' if href exists and no children (leaf node), otherwise 'div'
-        const Tag = item.href && !hasChildren ? 'a' : 'div';
-        const attrs = item.href && !hasChildren ? { href: item.href } : {};
         const itemClass = [
             'nav-item',
             active && 'active',
@@ -490,12 +499,39 @@ export class NavigationBar {
             item.id === 'user-profile' && 'is-user-profile',
             !item.icon && 'no-icon',
         ].filter(Boolean).join(' ');
-        return (h("div", { key: item.id, class: `nav-item-wrapper level-${level}`, role: "none" }, h(Tag, { id: itemId, ...attrs, class: itemClass, style: { paddingLeft: this.orientation === 'horizontal' ? '0' : this.isExpanded ? paddingLeft : '0' }, onMouseEnter: () => {
+        const itemContent = [
+            /* Icon or Avatar */
+            (item.icon || item.avatar || item.type === 'image' || item.type === 'icon' || item.type === 'avatar' || item.imageUrl) && (h("span", { class: "nav-icon-container" }, item.avatar || item.type === 'avatar' ? (h("ui-avatar", { src: item.avatar || item.imageUrl, shape: "circle", class: "nav-avatar-icon", size: this.isExpanded || this.orientation === 'horizontal' ? '1.5rem' : '2rem', status: item.status })) : item.type === 'image' || item.imageUrl ? (h("img", { src: item.imageUrl, alt: item.label, class: "nav-image-icon", style: { width: '24px', height: '24px', borderRadius: '4px', objectFit: 'cover' } })) : (h("span", { class: "nav-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), item.status && !item.avatar && item.type !== 'avatar' && h("span", { class: `nav-status-dot status-${item.status}` }), !this.isExpanded && item.badge && h("span", { class: "nav-badge-mini" }, item.badge), this.orientation === 'horizontal' && (item.id === 'user-profile' || this.isBottomItem(item.id)) && item.badge && h("span", { class: "nav-badge-mini" }, item.badge))),
+            /* Tooltip for items without children in collapsed mode */
+            !hasChildren && !this.isExpanded && this.hoveredIconId === item.id && h("div", { class: { 'nav-tooltip': true, 'visible': true } }, item.label),
+            /* Label (Visible if expanded, OR horizontal generally except for bottom items) */
+            (this.isExpanded || (this.orientation === 'horizontal' && !this.isBottomItem(item.id))) && (h("span", { class: "nav-label-container" }, h("span", { class: "nav-label" }, item.label), item.badge && h("span", { class: "nav-badge" }, item.badge))),
+            /* Expand Arrow */
+            hasChildren && (this.isExpanded || this.orientation === 'horizontal') && (h("span", { class: "nav-arrow" }, h("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", fill: "none", class: expanded && this.orientation !== 'horizontal' ? 'rotate-180' : '' }, h("path", { d: "M6 9l6 6 6-6" }))))
+        ];
+        const paddingStyle = { paddingLeft: this.orientation === 'horizontal' ? '0' : this.isExpanded ? paddingLeft : '0' };
+        return (h("div", { key: item.id, class: `nav-item-wrapper level-${level}`, role: "none" }, item.href && !hasChildren ? (h("a", { id: itemId, href: item.href, class: itemClass, style: paddingStyle, onMouseEnter: () => {
+                if (this.orientation === 'horizontal') {
+                    this.hoveredId = item.id;
+                    this.updateGlider();
+                }
+                if (!hasChildren && !this.isExpanded) {
+                    this.hoveredIconId = item.id;
+                }
+            }, onMouseLeave: () => {
+                if (this.orientation === 'horizontal') {
+                    this.hoveredId = null;
+                    this.updateGlider();
+                }
+                this.hoveredIconId = null;
+            }, onClick: e => {
+                e.stopPropagation();
+                this.handleItemClick(item);
+            }, onKeyDown: e => this.handleKeyDown(e, item), title: !this.isExpanded && hasChildren ? item.label : '', tabindex: 0, role: "treeitem", "aria-selected": active ? 'true' : 'false' }, itemContent)) : (h("div", { id: itemId, class: itemClass, style: paddingStyle, onMouseEnter: () => {
                 if (this.orientation === 'horizontal') {
                     this.hoveredId = item.id;
                     this.updateGlider();
                 }
-                // Set hover for tooltip (collapsed mode, items without children)
                 if (!hasChildren && !this.isExpanded) {
                     this.hoveredIconId = item.id;
                 }
@@ -504,12 +540,11 @@ export class NavigationBar {
                     this.hoveredId = null;
                     this.updateGlider();
                 }
-                // Clear hover for tooltip
                 this.hoveredIconId = null;
             }, onClick: e => {
                 e.stopPropagation();
                 this.handleItemClick(item);
-            }, onKeyDown: e => this.handleKeyDown(e, item), title: !this.isExpanded && hasChildren ? item.label : '', tabindex: "0", role: "treeitem", "aria-expanded": hasChildren ? (expanded ? 'true' : 'false') : null, "aria-selected": active ? 'true' : 'false' }, (item.icon || item.avatar || item.type === 'image' || item.type === 'icon' || item.type === 'avatar' || item.imageUrl) && (h("span", { class: "nav-icon-container" }, item.avatar || item.type === 'avatar' ? (h("ui-avatar", { src: item.avatar || item.imageUrl, shape: "circle", class: "nav-avatar-icon", size: this.isExpanded || this.orientation === 'horizontal' ? '1.5rem' : '2rem', status: item.status })) : item.type === 'image' || item.imageUrl ? (h("img", { src: item.imageUrl, alt: item.label, class: "nav-image-icon", style: { width: '24px', height: '24px', borderRadius: '4px', objectFit: 'cover' } })) : (h("span", { class: "nav-icon" }, h("ui-icon", { name: item.icon, library: item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), item.status && !item.avatar && item.type !== 'avatar' && h("span", { class: `nav-status-dot status-${item.status}` }), !this.isExpanded && item.badge && h("span", { class: "nav-badge-mini" }, item.badge), this.orientation === 'horizontal' && (item.id === 'user-profile' || this.isBottomItem(item.id)) && item.badge && h("span", { class: "nav-badge-mini" }, item.badge))), !hasChildren && !this.isExpanded && this.hoveredIconId === item.id && h("div", { class: { 'nav-tooltip': true, 'visible': true } }, item.label), (this.isExpanded || (this.orientation === 'horizontal' && !this.isBottomItem(item.id))) && (h("span", { class: "nav-label-container" }, h("span", { class: "nav-label" }, item.label), item.badge && h("span", { class: "nav-badge" }, item.badge))), hasChildren && (this.isExpanded || this.orientation === 'horizontal') && (h("span", { class: "nav-arrow" }, h("svg", { viewBox: "0 0 24 24", width: "16", height: "16", stroke: "currentColor", fill: "none", class: expanded && this.orientation !== 'horizontal' ? 'rotate-180' : '' }, h("path", { d: "M6 9l6 6 6-6" }))))), (() => {
+            }, onKeyDown: e => this.handleKeyDown(e, item), title: !this.isExpanded && hasChildren ? item.label : '', tabindex: 0, role: "treeitem", "aria-expanded": hasChildren ? (expanded ? 'true' : 'false') : null, "aria-selected": active ? 'true' : 'false' }, itemContent)), (() => {
             const contextItems = hasChildren ? item.children : [];
             if (!contextItems || contextItems.length === 0)
                 return null;

package/dist/collection/components/ui-navigation-bar/navigation-item.css

@@ -73,14 +73,14 @@
 }
 
 .nav-item:hover .item-content {
-  background: var(--nav-hover-bg);
-  color: var(--nav-text);
+  background: var(--nav-item-hover-bg, var(--nav-hover-bg, var(--bg-hover, #e6e6e6)));
+  color: var(--nav-text, var(--text-primary, #000000));
 }
 
 .nav-item.active .item-content,
 .nav-item.active-parent .item-content {
-  background: var(--nav-active-bg);
-  color: var(--nav-accent);
+  background: var(--nav-item-active-bg, var(--nav-active-bg, var(--bg-selected, rgba(0, 138, 22, 0.08))));
+  color: var(--nav-item-active-color, var(--nav-accent, var(--color-primary, #008a16)));
   font-weight: 600;
   box-shadow: inset 0 0 0 1px rgba(var(--color-primary-rgb, 59, 130, 246), 0.1);
   backdrop-filter: blur(4px);
@@ -96,9 +96,9 @@
   top: 8px;
   bottom: 8px;
   width: 3px;
-  background: var(--nav-accent);
+  background: var(--nav-item-active-color, var(--nav-accent, var(--color-primary, #008a16)));
   border-radius: 0 4px 4px 0;
-  box-shadow: 0 0 10px var(--nav-accent);
+  box-shadow: 0 0 10px var(--nav-item-active-color, var(--nav-accent, var(--color-primary, #008a16)));
   z-index: 3;
 }
 
@@ -118,7 +118,7 @@
 
 .nav-item.active .nav-icon,
 .nav-item.active-parent .nav-icon {
-  color: var(--nav-accent);
+  color: var(--nav-item-active-color, var(--nav-accent, var(--color-primary, #008a16)));
   transform: scale(1.1);
 }
 

package/dist/collection/components/ui-navigation-bar/navigation-item.js

@@ -69,7 +69,7 @@ export class NavigationItemComponent {
         const isDirectlyActive = this.active || this.item.id === this.activeId;
         const isParentOfActive = this.hasActiveChild();
         const isPopoverMode = this.forcePopover || this.item.id === 'user-profile';
-        return (h("li", { key: '9345250f187b57fec472da66335620d747dfc207', class: {
+        return (h("li", { key: 'ff4490ba41dc44a85951b48c73b9c3fbc651e4a9', class: {
                 'nav-item': true,
                 'active': isDirectlyActive,
                 'active-parent': isParentOfActive,
@@ -82,10 +82,10 @@ export class NavigationItemComponent {
                 'is-user-profile': this.item.id === 'user-profile',
                 'placement-top': this.popoverPlacement === 'top',
                 'placement-bottom': this.popoverPlacement === 'bottom'
-            }, tabindex: this.item.disabled ? -1 : 0, "aria-disabled": this.item.disabled ? 'true' : 'false', "aria-expanded": (this.open && !isPopoverMode) ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'fed1eb168a5e1340b971dd12ecabcc3a6bb0d831', class: "item-content", onClick: this.handleClick, onKeyDown: e => {
+            }, tabindex: this.item.disabled ? -1 : 0, "aria-disabled": this.item.disabled ? 'true' : 'false', "aria-expanded": (this.open && !isPopoverMode) ? 'true' : 'false', onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }, h("div", { key: 'b3caa94e8b15549c9181af5bcb5c4e631f8096df', class: "item-content", onClick: this.handleClick, onKeyDown: e => {
                 if (e.key === 'Enter')
                     this.handleClick();
-            } }, this.item.icon && (h("span", { key: 'd84f8938d5cd2aed187bcf9e1391d02028f11563', class: "nav-icon" }, h("ui-icon", { key: '425c866305be4793ba69e1220227da3676b3fcb0', name: this.item.icon, library: this.item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), (!this.collapsed || this.forcePopover) && h("span", { key: '2bdd778f72907794ca3d2b71aae3b95f44d01a41', class: "nav-label" }, this.item.label), this.item.badge && (!this.collapsed || this.forcePopover) && h("span", { key: '1941e1c4aeeef16d23835d3ebd88effc538fff95', class: "nav-badge" }, this.item.badge), hasChildren && !isPopoverMode && (h("span", { key: 'fa5be41879778fd799630738887a3cc04ebaa522', class: "nav-arrow" }, h("ui-icon", { key: 'ac63423d3f91457328483262c851e3bd94e62c63', name: "chevron-right", library: "lucide", size: "12px" }))), hasChildren && isPopoverMode && (h("span", { key: '9edca162c739fe418329716440525e9c3384273e', class: "nav-arrow cascading" }, h("ui-icon", { key: '1c3d47c485761f9f159512b2dfb549d2f1509b44', name: "chevron-right", library: "lucide", size: "12px" })))), !hasChildren && this.collapsed && this.isHovering && (h("div", { key: '0ad95cb5783779519408eb16c09faac91e79aaf6', class: "nav-tooltip" }, this.item.label))));
+            } }, this.item.icon && (h("span", { key: 'b1985031c4248c5cf8e2a2eb3d02804c5d0b943b', class: "nav-icon" }, h("ui-icon", { key: '3b73edba04f5d45218d1fe92995ba7dbc820243e', name: this.item.icon, library: this.item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), (!this.collapsed || this.forcePopover) && h("span", { key: '6ceff6c8ff5d454f30c72e410706bbb64a9a4fb5', class: "nav-label" }, this.item.label), this.item.badge && (!this.collapsed || this.forcePopover) && h("span", { key: '46e3f8f642ece0eb4be6f6b44a7aaf8adcf142eb', class: "nav-badge" }, this.item.badge), hasChildren && !isPopoverMode && (h("span", { key: '48113063a5b6ef7f425f59db684effbcb7696d36', class: "nav-arrow" }, h("ui-icon", { key: '6b5a1f241c3cd7b6f06f806438b625874f2af337', name: "chevron-right", library: "lucide", size: "12px" }))), hasChildren && isPopoverMode && (h("span", { key: '9818385d0163e9a8873a51fcddc709ae04b65297', class: "nav-arrow cascading" }, h("ui-icon", { key: '654f91ad0a6e1b34b8f0fbfb0483f836b3897647', name: "chevron-right", library: "lucide", size: "12px" })))), !hasChildren && this.collapsed && this.isHovering && (h("div", { key: '41dd6199319b7cfd67ad61bce60bebaadcc10fd3', class: "nav-tooltip" }, this.item.label))));
     }
     static get is() { return "ui-navigation-item"; }
     static get encapsulation() { return "shadow"; }