atomicuilibrary 0.0.1 → 0.1.3

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

@@ -27,20 +27,20 @@
    * 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);
   /* Layout */
   display: flex;
   flex-direction: column;
-  height: 100%;
+  height: 100vh;
   width: var(--nav-width);
   background: var(--nav-bg);
   color: var(--nav-color);
@@ -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
  * -------------------------------------------------------------------------- */
@@ -311,6 +329,7 @@
   overflow: hidden;
   white-space: nowrap;
   position: relative;
+  border-bottom: 1px solid var(--nav-border-color);
 }
 
 .nav-mobile-close {
@@ -326,9 +345,12 @@
 .nav-blocks-container {
   display: flex;
   flex-direction: column;
-  height: 100%;
-  overflow: visible;
-  /* Allow popovers to escape */
+  flex: 1;
+  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden; /* Prevent container expansion */
+  /* Allow popovers to escape via relative children if needed, 
+     but here we need to contain the flex items. */
 }
 
 .nav-block-categories {
@@ -349,6 +371,7 @@
 
 .nav-block-top {
   flex: 1;
+  min-height: 0; /* Important for flex child scrolling */
   overflow-y: auto;
   overflow-x: visible;
   /* Changed from hidden */
@@ -364,6 +387,7 @@
   flex-shrink: 0;
   border-top: 1px solid var(--nav-border-color);
   padding: 8px 0;
+  background-color: rgba(255, 255, 255, 0.05); /* More distinct in dark mode */
   display: flex;
   flex-direction: column;
   overflow: visible;
@@ -372,6 +396,10 @@
   /* Prevent expansion when popover opens */
 }
 
+:host([data-theme=light]) .nav-block-bottom {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
 .nav-header {
   border-bottom: 1px solid var(--nav-border-color);
 }
@@ -396,6 +424,7 @@
   border-top: 1px solid var(--nav-border-color);
   display: flex;
   flex-direction: column;
+  background-color: rgba(255, 255, 255, 0.08); /* Even more distinct for profile */
   /* Ensure BG covers if overly scrolled */
   overflow: visible;
   min-height: fit-content;
@@ -403,6 +432,10 @@
   /* Prevent expansion when popover opens */
 }
 
+:host([data-theme=light]) .nav-block-profile {
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
 /* Scrollbar shared styles */
 .nav-block-categories::-webkit-scrollbar,
 .nav-block-top::-webkit-scrollbar {
@@ -473,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

@@ -41,7 +41,7 @@ export class NavigationBar {
     /** Position of the active item indicator bar: 'start' (left) or 'end' (right) */
     indicatorPosition = 'start';
     /** Maximum number of items to show before overflowing to "More" menu */
-    maxItems = 4;
+    maxItems = 100;
     /** Company Logo URL */
     companyLogo;
     /** Company Name */
@@ -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: '5d7d3ba7a371bb0b2c7067c9ef6ffadf1cc5cf2c', style: vars, class: hostClass, theme: null, "data-theme": this.effectiveTheme }, h("div", { key: '822e6bca215424cf97ee14360e5474f279898d08', 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: 'e561f5ba73dcded187227d24c05271ffe8cd35be', class: "nav-backdrop", onClick: () => this.close() }), h("div", { key: '00336a31f7c62f1e4225811a8526316869eacb67', class: "nav-blocks-container" }, h("div", { key: '08bb7aa63e515127943aa1858b6246e924752237', class: "nav-header" }, h("slot", { key: '5052017567308f9e24e13c273fa6e6f81bdabb54', name: "header" }, (this.companyLogo || this.companyName) && (h("div", { key: '3a374287ff56db7e8e48786a9fd82d046eb27a24', class: "nav-company-block", style: { display: 'flex', alignItems: 'center', gap: '12px', padding: '0 24px', height: '64px' } }, this.companyLogo && h("img", { key: 'c51ab5c8072dce6e11738da2df7a2c2d77534989', src: this.companyLogo, alt: this.companyName || 'Logo', style: { height: '32px', width: 'auto' } }), this.isExpanded && this.companyName && (h("span", { key: 'c37a8d0bc5ea530ac6e4c90d45aed571e401ad65', class: "nav-company-name", style: { fontWeight: '600', fontSize: '16px' } }, this.companyName))))), h("slot", { key: 'b552595e83958add3197c9bd83eda6454d975dad', name: "logo" }), this.isMobile && (h("div", { key: 'dfc692bd4d940e34bdd3c1ee0f7bab24e390623a', class: "nav-mobile-close", onClick: () => this.close() }, h("svg", { key: '38bc9e4c9799d01510b8c0a354d4c4be370775c8', viewBox: "0 0 24 24", width: "24", height: "24", stroke: "currentColor", fill: "none" }, h("path", { key: '9e5ce385a716770a940247a2e97d5a002928f536', d: "M18 6L6 18M6 6l12 12" }))))), this.showSearch && this.isExpanded && (h("div", { key: '6210ee48a40ec6ac0a1b37c6064be9539041d89a', class: "nav-search-bar" }, h("div", { key: '91be6b4b089065dec8601ad39d6f5ee6314c2743', 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: 'eb7de33bd4feea4137a01b38a3c461536d471d0e', 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: 'e38c3bf011c65f5f6adf7283cfa4362afba456d6', cx: "11", cy: "11", r: "8" }), h("line", { key: '62dbce91bf5b3cce61f4fe711b9d70b9ddb2192f', x1: "21", y1: "21", x2: "16.65", y2: "16.65" })), h("input", { key: '2e3c9743f142fe4fec5e5d232edbfa7a453a5520', 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: 'bbfc7918309d8a05aa89f1cf29564f4a7e0f5657', class: "nav-block-categories", role: "tree" }, this.renderNavList(blocks.categories, 'cat'))), h("div", { key: '856526bb6ebc4fb642f895e9d3977068562df9db', class: "nav-block-top", role: "tree" }, this.renderNavList(blocks.primary, 'top'), h("slot", { key: 'f7f37b72d9b37144f7a982028d04dc2a182dd792', name: "menu-item" }), " ", blocks.primary.length === 0 && blocks.categories.length === 0 && blocks.secondary.length === 0 && h("slot", { key: '53ca544ecb67734f153b7c327c85100f33c74092', name: "empty-state" }, "No Items")), blocks.secondary.length > 0 && (h("div", { key: '2d23b401f03faaa7c27aae850e84a5de3751b667', class: "nav-block-secondary", role: "tree" }, this.renderNavList(blocks.secondary, 'sec'))), blocks.bottom.length > 0 && (h("div", { key: 'e7f4d57d73f042d7c300f6a960469a8cef50afdd', class: "nav-block-bottom", role: "tree" }, blocks.bottom.map(item => this.renderItem(item)), h("slot", { key: '4ae38e3116a10f7ab3a244fb0ae3cfc3ad91e7d6', name: "footer" }))), blocks.bottomSecondary.length > 0 && (h("div", { key: 'e79b2b33ccf1e47902376599065562024a45eaff', 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;
@@ -943,7 +978,7 @@ export class NavigationBar {
                 "setter": false,
                 "reflect": false,
                 "attribute": "max-items",
-                "defaultValue": "4"
+                "defaultValue": "100"
             },
             "companyLogo": {
                 "type": "string",

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: 'b344aa6c6a2034b11c7bfb861ef51d24fb1ddc21', 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: 'f511c50817c20785b2ea46afe2df07a7f5508818', 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: '20bf50d7db7d55522e8bc9c1433bbeaf71639fa5', class: "nav-icon" }, h("ui-icon", { key: 'b1316aec36a00d9bd44b3a89072fa6a39b282490', name: this.item.icon, library: this.item.iconLibrary || this.iconLibrary, size: "1.25rem" }))), (!this.collapsed || this.forcePopover) && h("span", { key: 'c2d027a25fa696b59231c99283761b03f637f603', class: "nav-label" }, this.item.label), this.item.badge && (!this.collapsed || this.forcePopover) && h("span", { key: '0e89b2789f06b330f445588316008d6d0d2418f6', class: "nav-badge" }, this.item.badge), hasChildren && !isPopoverMode && (h("span", { key: '4d124c918ab7092a639d1026ec1ca964511da10c', class: "nav-arrow" }, h("ui-icon", { key: '9cc46d50a9a8b76d439def8e56774fc5b9855dfd', name: "chevron-right", library: "lucide", size: "12px" }))), hasChildren && isPopoverMode && (h("span", { key: 'e47643bc3dcf1a1b5b872d1114730f3c03e5bf80', class: "nav-arrow cascading" }, h("ui-icon", { key: '7de0a36cdbc167332010d3191199d6c16d4f66a0', name: "chevron-right", library: "lucide", size: "12px" })))), !hasChildren && this.collapsed && this.isHovering && (h("div", { key: 'b187ecbdadc6d7fb3d1be290ae2f62c5fb9b0458', 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"; }

package/dist/collection/components.js

@@ -22,6 +22,7 @@ export { Dropdown } from './components/dropdown/dropdown';
 export { Button } from './components/button/button';
 export { HorizontalNav } from './components/horizontal-nav/horizontal-nav';
 export { Knob } from './components/knob/knob';
+export { Loader } from './components/loader/loader';
 export { MeterGroup } from './components/meter-group/meter-group';
 export { MyComponent } from './components/my-component/my-component';
 export { WorkspaceManager } from './components/workspace-manager/workspace-manager';