atomicuilibrary 0.0.1 → 0.1.3

package/dist/collection/components/layout-manager/layout-manager.js

@@ -346,7 +346,7 @@ export class LayoutManager {
         document.removeEventListener('mouseup', this.onGlobalMouseUp);
     };
     render() {
-        return (h("div", { key: 'f569e28b4534614afdb516bf769ad888c11b103f', class: "lm-root" }, h("lm-container", { key: 'fd8a5616176a28a3da539012d2e683f5216209fb', node: this.layout.root }), this.dropIndicator && h("div", { key: '27e38072647723cba399914c9f1684dc9ea62de5', class: `lm-drop-indicator ${this.dropIndicator.zone}`, style: this.getIndicatorStyle() }), h("div", { key: 'dfc23cda195b1b5ef6096c2fb76f52a0fd57cd3f', class: "lm-floating" }, this.layout.floating.map(f => (h("lm-floating-window", { "panel-id": f.id }))))));
+        return (h("div", { key: '7753a9c91db9bde41c4d9722965cf7539dbf1853', class: "lm-root" }, h("lm-container", { key: 'bc8b0577999e7abe56bcdf0b165c6b11ff632f9c', node: this.layout.root }), this.dropIndicator && h("div", { key: '4524e20157b1f2a6d2507f8d62e520dc887cd941', class: `lm-drop-indicator ${this.dropIndicator.zone}`, style: this.getIndicatorStyle() }), h("div", { key: '80eb024ac89e3417d43983de2a778b63714c932f', class: "lm-floating" }, this.layout.floating.map(f => (h("lm-floating-window", { "panel-id": f.id }))))));
     }
     static get is() { return "layout-manager"; }
     static get originalStyleUrls() {

package/dist/collection/components/layout-manager/lm-floating-window/lm-floating-window.js

@@ -4,7 +4,7 @@ export class LmFloatingWindow {
     x = 100;
     y = 100;
     render() {
-        return (h("div", { key: '987212734ff21ee0d02c5ae2f0fe144e901d8206', class: "lm-float", style: { left: `${this.x}px`, top: `${this.y}px` }, "data-panel-id": this.panelId }, h("div", { key: '8b922866c1955c167c6a2e5ea5d30c3c5a6bd57c', class: "lm-float-header" }, "Floating - ", this.panelId), h("div", { key: 'a0e3f8cd66090fc879b10b7ce0d7005ea6e76381', class: "lm-float-body" }, h("slot", { key: '0362df47eeafe69e15151e443b72c62e97ca3300' }))));
+        return (h("div", { key: '92b28396c12cabbdffd7dd788ceb74be31bfde0f', class: "lm-float", style: { left: `${this.x}px`, top: `${this.y}px` }, "data-panel-id": this.panelId }, h("div", { key: '0f7457be8d396fdf15364b7c0041a795059c5556', class: "lm-float-header" }, "Floating - ", this.panelId), h("div", { key: '5b34d95c36696850776f264b13f04c95a33376b4', class: "lm-float-body" }, h("slot", { key: 'ca6fa102f1477c914ac5ba84e1845704f0c5ba02' }))));
     }
     static get is() { return "lm-floating-window"; }
     static get originalStyleUrls() {

package/dist/collection/components/layout-manager/lm-panel/lm-panel.js

@@ -14,7 +14,7 @@ export class LmPanel {
         });
     };
     render() {
-        return (h("div", { key: 'deb12b776f98fd8ebf5fd56807afb71b8df2cd0d', class: "lm-panel", "data-id": this.panel.id }, h("div", { key: '92e40c443c14ee9f0ae3fbe26a11889a56911098', class: "lm-panel-header", onMouseDown: e => this.onHeaderMouseDown(e) }, h("div", { key: '4c10877061aeeabb9f80803c57bdd6e594dd5383', class: "lm-title", style: { display: 'flex', alignItems: 'center' } }, this.panel.icon && h("ui-icon", { key: '23a72b93dda720d0360c67e6e59c90544900dc44', name: this.panel.icon, library: "lucide", style: { width: '16px', height: '16px', marginRight: '8px' } }), this.panel.title), h("div", { key: '86191441afcbac1e185f1d27b0a2cf11192d423b', class: "lm-controls" }, this.panel.closable !== false && (h("ui-button", { key: '4dd85509e733a1b62e7980d2ba7e399fce209ef9', variant: "ghost", class: "lm-close", onClick: () => this.closePanel(), ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "xxs" })))), h("div", { key: '8734d98fd113a5005a71f3adf121842d8b7a0000', class: "lm-panel-body" }, this.panel.content ? (h("div", { innerHTML: sanitizeHTML(this.panel.content) })) : (h("slot", null)))));
+        return (h("div", { key: 'a07057499cf078eec5ac103f866bad71e7b2f36c', class: "lm-panel", "data-id": this.panel.id }, h("div", { key: 'a6b89b2f98ad49f8ba7757e44aeb173a577d7330', class: "lm-panel-header", onMouseDown: e => this.onHeaderMouseDown(e) }, h("div", { key: 'fd1370a8d3632266573270f0d52d6e24b0bcc85d', class: "lm-title", style: { display: 'flex', alignItems: 'center' } }, this.panel.icon && h("ui-icon", { key: 'd75ed5ff8fc4f4334cc05bc83a62506cf86494de', name: this.panel.icon, library: "lucide", style: { width: '16px', height: '16px', marginRight: '8px' } }), this.panel.title), h("div", { key: 'b09c49a412ab7f8b97b4f3501e067c04f2ebc1a9', class: "lm-controls" }, this.panel.closable !== false && (h("ui-button", { key: '4ead18ecbb60a94873d3bb12111be89f627e5f83', variant: "ghost", class: "lm-close", onClick: () => this.closePanel(), ariaLabel: "Close panel", icon: "x", iconLibrary: "lucide", iconOnly: true, size: "xxs" })))), h("div", { key: '04da7542e34cd7864ceccc28a5ead701c8186300', class: "lm-panel-body" }, this.panel.content ? (h("div", { innerHTML: sanitizeHTML(this.panel.content) })) : (h("slot", null)))));
     }
     static get is() { return "lm-panel"; }
     static get originalStyleUrls() {

package/dist/collection/components/layout-manager/lm-splitter/lm-splitter.js

@@ -35,7 +35,7 @@ export class LmSplitter {
     };
     direction = 'horizontal'; // Default to horizontal (vertical bar) for row layout
     render() {
-        return h("div", { key: '6cbc72c65f18247f7a445a3c887c774d13551297', class: `lm-splitter ${this.direction}`, onMouseDown: e => this.onDown(e) });
+        return h("div", { key: '1d67769bfa9249d7b7511805a3c49b1ff0429de8', class: `lm-splitter ${this.direction}`, onMouseDown: e => this.onDown(e) });
     }
     static get is() { return "lm-splitter"; }
     static get originalStyleUrls() {

package/dist/collection/components/layout-manager/lm-tabs/lm-tabs.js

@@ -21,7 +21,7 @@ export class LmTabs {
         GlobalEventBus.emit('panel:dragstart', { panelId: id, x: e.clientX, y: e.clientY });
     }
     render() {
-        return (h("div", { key: '83f1cde2f6966da615dd0e0b5ab821e0f035ce22', class: `lm-tabs ${this.mode}` }, h("div", { key: '507a672779ab113ca9da4d724c6d59451084daf4', class: "lm-tab-list" }, this.panels.map(p => (h("div", { class: `lm-tab ${p.id === this.activeTabId ? 'active' : ''}`, "data-id": p.id, onClick: () => this.switchTab(p.id), onMouseDown: (e) => this.onTabMouseDown(e, p.id) }, h("span", { class: "lm-tab-title", style: { display: 'flex', alignItems: 'center' } }, p.icon && h("ui-icon", { name: p.icon, library: "lucide", style: { width: '14px', height: '14px', marginRight: '6px' } }), p.title), p.closable !== false && (h("span", { class: "lm-tab-close", onClick: (e) => this.closePanel(e, p.id) }, "\u00D7"))))))));
+        return (h("div", { key: '7b3ae6f0161adba100d2021d125dace80b939f05', class: `lm-tabs ${this.mode}` }, h("div", { key: '1908dcc64d869e6094d0d18dfae2e9e772bb28af', class: "lm-tab-list" }, this.panels.map(p => (h("div", { class: `lm-tab ${p.id === this.activeTabId ? 'active' : ''}`, "data-id": p.id, onClick: () => this.switchTab(p.id), onMouseDown: (e) => this.onTabMouseDown(e, p.id) }, h("span", { class: "lm-tab-title", style: { display: 'flex', alignItems: 'center' } }, p.icon && h("ui-icon", { name: p.icon, library: "lucide", style: { width: '14px', height: '14px', marginRight: '6px' } }), p.title), p.closable !== false && (h("span", { class: "lm-tab-close", onClick: (e) => this.closePanel(e, p.id) }, "\u00D7"))))))));
     }
     static get is() { return "lm-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/library/category-section.js

@@ -14,7 +14,7 @@ export class CategorySection {
         this.expanded = !this.expanded;
     };
     render() {
-        return (h(Host, { key: 'e3a09ce08fdb7d41a84a0513c9bd9307d7d0fb2f' }, h("div", { key: '68321cc0d827decbd472217460b97dc7955c818c', class: { 'category': true, 'collapsed': !this.expanded } }, h("ui-button", { key: '4b232b38aa4f84d8526206801aa1c562a051da64', class: "category-header", onButtonClick: this.toggleExpanded, variant: "plain", fullWidth: true, align: "start" }, h("span", { key: 'c4d4449576357c8a85e131fd6e51d550b61bcb0e', class: "category-icon" }, this.categoryIcon), h("h2", { key: 'dd646cf30106d5665fd7cf16a33a1646dd576be5', class: "category-title" }, this.categoryName), h("span", { key: 'e174d5fa4e6eeaf3e6998f583c5a38329e66e176', class: "category-count" }, this.components.length), h("svg", { key: '5e926d6ace89797270d978e2c51aeeb362e57e33', class: { 'chevron': true, 'rotated': !this.expanded }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: 'f02857e200d2f5562c19a1fecc3a4584fd52271e', points: "6,9 12,15 18,9" }))), h("div", { key: '3e70d09a10eda7220b63253dca6638220326ea0a', class: "category-content" }, h("div", { key: 'a51ebf47c0fafe095ca8616ee3f661ee4124c805', class: "cards-grid" }, this.components.map(comp => (h("library-card", { key: comp.id, "component-id": comp.id, "card-title": comp.name, description: comp.description, icon: comp.icon, badge: comp.badge, docs: comp.docs, mode: this.mode }))))))));
+        return (h(Host, { key: '0416a668691cac54fcb40a81043c011864528f56' }, h("div", { key: '2597565c47c72e3b0841619c73078db790d47d52', class: { 'category': true, 'collapsed': !this.expanded } }, h("ui-button", { key: '677186fb712e1d2bdae4bf8381bc123cb396fab8', class: "category-header", onButtonClick: this.toggleExpanded, variant: "plain", fullWidth: true, align: "start" }, h("span", { key: '8f46d202777d2df4d74a88bb01ecb76d35c6415d', class: "category-icon" }, this.categoryIcon), h("h2", { key: '51247e2c6def99ab123592bedaf88d3696ece4c6', class: "category-title" }, this.categoryName), h("span", { key: 'cc616b7292cd1562b26c1d5eff04e9c0c7cc48c0', class: "category-count" }, this.components.length), h("svg", { key: '0054711645043b37f2f1ed61bf7d7b7b8caa98ad', class: { 'chevron': true, 'rotated': !this.expanded }, width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("polyline", { key: '3a7a0b22c5d9ac8f5080b5af44320d08ad6040cb', points: "6,9 12,15 18,9" }))), h("div", { key: 'd727e08e615a6aa899c0fd416e58799de0f305f4', class: "category-content" }, h("div", { key: '732f248ac911b2e7a8daae6b8db94a39bed6545f', class: "cards-grid" }, this.components.map(comp => (h("library-card", { key: comp.id, "component-id": comp.id, "card-title": comp.name, description: comp.description, icon: comp.icon, badge: comp.badge, docs: comp.docs, mode: this.mode }))))))));
     }
     static get is() { return "category-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/library/library-card.js

@@ -47,7 +47,7 @@ export class LibraryCard {
         }
     };
     render() {
-        return (h(Host, { key: '3a3ff13a2954f14c350206fdad4ba6340f653e4e' }, h("div", { key: 'b92cca51b6cc6af60d8476f386482ccfdd475a34', class: "card", onClick: this.handleViewDemo }, h("div", { key: '30a68d761de621658d2fc34a40ea101fbf04141e', class: "card-icon" }, this.icon), h("div", { key: '9ac9cba2c76b9568e2a5f319f0b04cb283a5e682', class: "card-content" }, h("h3", { key: '0b62e3e8b4839a79a4f567dee7ff1da61a8799cf', class: "card-title" }, this.cardTitle, this.badge && h("span", { key: '2254007ce97d9a0cc9cbcf66f8b397e48eaca256', class: "badge" }, this.badge)), h("p", { key: '4d5a519fd7d9759ae9f17783e680002e66a82106', class: "card-description" }, this.description)), h("div", { key: '71b72af77182f87ce4e09ad2f17a3f66618ffc12', class: "card-action" }, this.docs && (h("ui-button", { key: '3b9318ef02116646198e2535f97394ccf634f674', variant: "ghost", size: "md", icon: "file-text", "icon-library": "lucide", title: "View Documentation", onClick: this.handleViewDocs })), h("ui-button", { key: 'de3abccdcdd7e3504e7fc57d3525e0a41b27b731', variant: "filled", color: "primary", size: "md", icon: "play", "icon-library": "lucide", title: "View Demo" })))));
+        return (h(Host, { key: 'e7ec177273206c16c1d847b2fbfec774a1110e2f' }, h("div", { key: '65f2634e8b4a2e55a66e9a197ea6b5a288620ada', class: "card", onClick: this.handleViewDemo }, h("div", { key: 'c5c155738d5b4b767498a038dcf8e2a881450a71', class: "card-icon" }, this.icon), h("div", { key: '67e580c68a11d42e9293013673630de3793e5bba', class: "card-content" }, h("h3", { key: 'cb82a9f63283b84b6752f1ed875b1abbd48c9206', class: "card-title" }, this.cardTitle, this.badge && h("span", { key: 'b5d594310d069f64dd7233afcb0054642c545114', class: "badge" }, this.badge)), h("p", { key: '340600aaa5c08ad4a045a16ec41b073744820605', class: "card-description" }, this.description)), h("div", { key: '3bae409719d8db750146066a460463cf7fc35d86', class: "card-action" }, this.docs && (h("ui-button", { key: '81640bd45d504b4db56c750750250e74dc7e7a30', variant: "ghost", size: "md", icon: "file-text", "icon-library": "lucide", title: "View Documentation", onClick: this.handleViewDocs })), h("ui-button", { key: '6392be5ab1a22e874317f0d40e431cba816cdf6b', variant: "filled", color: "primary", size: "md", icon: "play", "icon-library": "lucide", title: "View Demo" })))));
     }
     static get is() { return "library-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/library/library.js

@@ -44,7 +44,7 @@ export class Library {
     render() {
         const filteredByCategory = this.getFilteredComponents();
         const totalComponents = componentsData.length;
-        return (h(Host, { key: 'beac989569c0ca806ae655da242ec9904445d39f' }, h("div", { key: '959612c2d98c7daca8a4ac1f35cf3df93ae7b2c7', class: "library-container" }, h("header", { key: '27e8009daad08c4b07d52e64881c29b87e3b9c40', class: "library-header" }, h("div", { key: 'b07dcdd2b87367c4c2d83f00b0a739e3b3713c7a', class: "header-content" }, h("div", { key: 'da37733ca7ee6888845f17acc3636efa8119300c', class: "logo-section" }, h("div", { key: 'f621cc915750bcf3ede6518baa6aceb6ca8d39a5', class: "logo" }, h("span", { key: 'bd201dccfd00236e31789149190244b08d38a005', class: "logo-icon" }, "\uD83C\uDFA8"), h("span", { key: 'eb94d775fce9a5d47127b19eb5d512857cfb0de0', class: "logo-text" }, "App UI")), h("span", { key: '225b246368e5e6fe765387ed2d03fdb3722fe463', class: "version-badge" }, "v0.1.0")), h("div", { key: '961bed93bdb2e56ec60b1dae9a5389c1a75e067f', class: "search-container" }, h("ui-input", { key: 'feda70660a055323076630917b0e7a49afcb0a8a', class: "search-input", placeholder: "Search components...", value: this.searchQuery, onInputChange: (e) => this.searchQuery = e.detail, "prefix-icon": "search", "icon-library": "lucide", clearable: true })), h("div", { key: '592f3d4fe0f19a5bc1a33f8cd6ffc2f98766b13c', class: "header-stats" }, h("span", { key: 'edfe4fe44fc73aa922883f30ee2c50abcd407aa0', class: "stat" }, totalComponents, " components"), h("span", { key: '1271653612b2d1e56327e4eb043ef1848be9e7ae', class: "stat" }, categories.length, " categories")))), h("nav", { key: 'd5e1be2e568e66c317362e85baa4f8b184b2ad05', class: "category-nav" }, h("ui-button", { key: 'a43178b8702bda6441c706d7b27d7d5268b1017e', label: "All", variant: this.selectedCategory === null ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(null), style: { borderRadius: '20px' } }), categories.map(cat => (h("ui-button", { key: cat, label: `${this.getCategoryIcon(cat)} ${cat}`, variant: this.selectedCategory === cat ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(cat), style: { borderRadius: '20px' } })))), h("main", { key: '011117cd9c223602cc8dc11af1f8a058b8b25a5a', class: "library-content" }, Object.keys(filteredByCategory).length === 0 ? (h("div", { class: "no-results" }, h("ui-icon", { name: "search", library: "lucide", size: "2em", class: "no-results-icon" }), h("h3", null, "No components found"), h("p", null, "Try adjusting your search or filter criteria"))) : (Object.entries(filteredByCategory).map(([category, components]) => (h("category-section", { key: category, "category-name": category, "category-icon": this.getCategoryIcon(category), components: components, mode: this.mode }))))), h("footer", { key: 'fd993854e47f108c29bda48371866c5ab43935a5', class: "library-footer" }, h("p", { key: '78fbe5d2283722f32297cc99446e37b8b366d045' }, "Built with \u2764\uFE0F using Stencil.js"), h("div", { key: '0be6641e6a4f57e02a0070311eceeab0fff6136a', class: "footer-links" }, h("a", { key: 'e166e252d8367239b62ab1904cddef9425dcb7c1', href: "#", class: "footer-link" }, "Documentation"), h("a", { key: 'fdcd853536091767eefcdc8d28a231972f573a51', href: "#", class: "footer-link" }, "GitHub"), h("a", { key: 'a8d34f3e11ed0aa47aa82f074530d774f6982635', href: "#", class: "footer-link" }, "Changelog"))))));
+        return (h(Host, { key: '7af3d689184e46c3bd02292ea4f22f5ca9945764' }, h("div", { key: 'f41481a5c1883d92bcb031ad2ad870fb986af516', class: "library-container" }, h("header", { key: '1e8e42ce418dfff3bb91c83e14420dedffdf3cbc', class: "library-header" }, h("div", { key: '49f0832b98cbe019ef9a258cbef8616efbb865e9', class: "header-content" }, h("div", { key: 'f7461ed7219a059a49e4049a8f17dd0b93688f05', class: "logo-section" }, h("div", { key: 'd4ab4bcb3909ed5a3af30ae89f0e4d58b5eb35ae', class: "logo" }, h("span", { key: '9513f4ceb1723af068920240c5dd4fc99e736911', class: "logo-icon" }, "\uD83C\uDFA8"), h("span", { key: '8bc28122c5e22e0f4c5f912fcd4d653065c47c16', class: "logo-text" }, "App UI")), h("span", { key: '81f34ec0b03d9a5ab174c8fc7cc28b48da656c77', class: "version-badge" }, "v0.1.0")), h("div", { key: '3b3ef085d16c1efbc8cfe3ccdc72b0ebc57e4666', class: "search-container" }, h("ui-input", { key: '5adcc741e1ed654686012689e9a92e8f6dfc22ac', class: "search-input", placeholder: "Search components...", value: this.searchQuery, onInputChange: (e) => this.searchQuery = e.detail, "prefix-icon": "search", "icon-library": "lucide", clearable: true })), h("div", { key: '61baaadd9b86a0c20c3a6b81fd1614a5089b3554', class: "header-stats" }, h("span", { key: '046d0fd0c233314bb30bf75d469e5a9c496647fa', class: "stat" }, totalComponents, " components"), h("span", { key: '455a288e2b0553687ea61c88b6b4728bc02860dc', class: "stat" }, categories.length, " categories")))), h("nav", { key: '2cedaba54c9a0d8dae53d8c04c82e21ac233fc9a', class: "category-nav" }, h("ui-button", { key: 'a20b92b2c7f5fa8366457f3a6721bfa81ee62bab', label: "All", variant: this.selectedCategory === null ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(null), style: { borderRadius: '20px' } }), categories.map(cat => (h("ui-button", { key: cat, label: `${this.getCategoryIcon(cat)} ${cat}`, variant: this.selectedCategory === cat ? 'filled' : 'ghost', color: "primary", size: "md", onClick: () => this.handleCategoryClick(cat), style: { borderRadius: '20px' } })))), h("main", { key: '25b1de0ed093c1bf9593c959ab6e4d69cde3f2b3', class: "library-content" }, Object.keys(filteredByCategory).length === 0 ? (h("div", { class: "no-results" }, h("ui-icon", { name: "search", library: "lucide", size: "2em", class: "no-results-icon" }), h("h3", null, "No components found"), h("p", null, "Try adjusting your search or filter criteria"))) : (Object.entries(filteredByCategory).map(([category, components]) => (h("category-section", { key: category, "category-name": category, "category-icon": this.getCategoryIcon(category), components: components, mode: this.mode }))))), h("footer", { key: '479b967ddb3281c318b60300da1c4b9eb3976189', class: "library-footer" }, h("p", { key: 'f1832bdca4a507ea2f74c4332b2936a6a37b33ab' }, "Built with \u2764\uFE0F using Stencil.js"), h("div", { key: 'f2b462bb1a0ae1133ec02a246cbfcfd27ec0d501', class: "footer-links" }, h("a", { key: '0780dd9f9a59efcd69d21910551cbd2ce25eafbc', href: "#", class: "footer-link" }, "Documentation"), h("a", { key: '224e2da3c34d7362ee42f8a207a9f64e556bb0bc', href: "#", class: "footer-link" }, "GitHub"), h("a", { key: '82c37c06125ddafcd54246b5df31dfe213538853', href: "#", class: "footer-link" }, "Changelog"))))));
     }
     static get is() { return "ui-library"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,6 +54,19 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  --list-group-spacing: 12px;
+}
+.list > ui-list-group + ui-list-group {
+  margin-top: var(--list-group-spacing);
+}
+.list.list-sm {
+  --list-group-spacing: 8px;
+}
+.list.list-md {
+  --list-group-spacing: 12px;
+}
+.list.list-lg {
+  --list-group-spacing: 16px;
 }
 .list.list-horizontal {
   flex-direction: row;
@@ -114,8 +127,8 @@
   align-items: center;
   justify-content: center;
   padding: 48px 24px;
-  gap: 16px;
-  color: var(--color-primary, #94a3b8);
+  gap: 12px;
+  color: var(--text-muted, #94a3b8);
   text-align: center;
 }
 .list-loading ui-icon,
@@ -123,12 +136,43 @@
   font-size: 32px;
   opacity: 0.5;
 }
+.list-loading ui-icon.empty-icon,
+.list-empty ui-icon.empty-icon {
+  color: var(--color-primary, #10b981);
+  opacity: 0.7;
+  animation: emptyPulse 2s infinite alternate ease-in-out;
+}
 .list-loading span,
 .list-empty span {
   font-size: 14px;
   font-weight: 500;
 }
+.list-loading .empty-title,
+.list-empty .empty-title {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--text-primary, #1e293b);
+  margin-top: 4px;
+}
+.list-loading .empty-subtitle,
+.list-empty .empty-subtitle {
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--text-muted, #64748b);
+  max-width: 280px;
+  line-height: 1.4;
+}
 
+@keyframes emptyPulse {
+  from {
+    transform: scale(0.95);
+    opacity: 0.5;
+  }
+  to {
+    transform: scale(1.05);
+    opacity: 0.8;
+  }
+}
 .list-pagination {
   padding: 12px 20px;
   border-top: 1px solid var(--border-subtle, #f1f5f9);
@@ -204,9 +248,6 @@
 .list-container.list-has-selection .list-label {
   color: var(--color-primary, #1e40af);
 }
-.list-container.list-has-selection .list-search {
-  display: none;
-}
 .list-container.selection-theme-primary.list-has-selection .list-header-adaptive {
   background: linear-gradient(135deg, var(--color-success, #3dcd58), var(--color-success, #2a9d47));
 }

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

@@ -72,7 +72,7 @@ export class AppList {
     showSortingHeaders = false;
     columns = []; // [{label:'', key:'', sortable:true}]
     showGroupFooter = false;
-    groupFooterLabel = 'Items'; // "Total: 5 Items"
+    groupFooterLabel = ''; // e.g. "Items" -> "Total: 5 Items"
     floatingFAB = false;
     isPaletteOpen = false;
     isQuickLookOpen = false;
@@ -132,6 +132,27 @@ export class AppList {
                 return JSON.stringify(item).toLowerCase().includes(query);
             });
         }
+        // Apply view tab filter
+        const tabs = typeof this.viewTabs === 'string' ? JSON.parse(this.viewTabs) : this.viewTabs;
+        if (tabs && tabs.length > 0 && tabs[this.activeTab]) {
+            const filter = tabs[this.activeTab].filter;
+            if (filter) {
+                items = items.filter(item => {
+                    if (typeof item === 'string')
+                        return item === filter;
+                    if (item.status === filter)
+                        return true;
+                    if (item.color === filter)
+                        return true;
+                    if (item.group === filter)
+                        return true;
+                    if (filter === 'danger') {
+                        return item.status === 'busy' || item.status === 'offline' || item.priorityPulse === true;
+                    }
+                    return false;
+                });
+            }
+        }
         this.filteredItems = items;
         // Calculate pagination
         if (this.paginated) {
@@ -462,10 +483,30 @@ export class AppList {
         this.currentPage = page;
         this.pageChange.emit({ page });
     }
+    getPaginationItems() {
+        if (this.totalPages <= 7) {
+            return Array.from({ length: this.totalPages }, (_, index) => index + 1);
+        }
+        const pages = new Set([1, this.totalPages]);
+        const rangeStart = Math.max(2, this.currentPage - 1);
+        const rangeEnd = Math.min(this.totalPages - 1, this.currentPage + 1);
+        for (let page = rangeStart; page <= rangeEnd; page++) {
+            pages.add(page);
+        }
+        const sortedPages = Array.from(pages).sort((a, b) => a - b);
+        const items = [];
+        sortedPages.forEach((page, index) => {
+            if (index > 0 && page - sortedPages[index - 1] > 1) {
+                items.push('ellipsis');
+            }
+            items.push(page);
+        });
+        return items;
+    }
     renderSearch() {
         if (!this.searchable)
             return null;
-        return (h("div", { class: "list-search" }, h("ui-icon", { name: "search", library: "fontawesome", class: "search-icon" }), h("ui-input", { type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, onInputChange: (e) => {
+        return (h("div", { class: "list-search" }, h("ui-input", { type: "text", class: "search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, onInputChange: (e) => {
                 this.searchQuery = e.detail;
                 this.searchChange.emit({ query: this.searchQuery });
             }, prefixIcon: "search", size: "sm" }), this.searchQuery && (h("ui-button", { variant: "ghost", class: "search-clear", onClick: () => {
@@ -481,25 +522,23 @@ export class AppList {
     renderEmpty() {
         if (!this.showEmpty || this.loading || this.filteredItems.length > 0)
             return null;
+        if (this.searchable && this.searchQuery) {
+            return (h("div", { class: "list-empty" }, h("ui-icon", { name: "search", library: "fontawesome", class: "empty-icon" }), h("span", { class: "empty-title" }, "No matches found for \"", this.searchQuery, "\""), h("span", { class: "empty-subtitle" }, "Please check your spelling or try changing your search input.")));
+        }
         return (h("div", { class: "list-empty" }, h("ui-icon", { name: "inbox", library: "fontawesome" }), h("span", null, this.emptyText)));
     }
     renderPagination() {
         if (!this.paginated || this.totalPages <= 1)
             return null;
-        const pages = [];
-        for (let i = 1; i <= this.totalPages; i++) {
-            if (i === 1 ||
-                i === this.totalPages ||
-                (i >= this.currentPage - 2 && i <= this.currentPage + 2)) {
-                pages.push(h("ui-button", { variant: i === this.currentPage ? "primary" : "ghost", class: {
-                        'pagination-button': true,
-                        'active': i === this.currentPage
-                    }, onClick: () => this.goToPage(i), label: i.toString(), size: "sm" }));
+        const pages = this.getPaginationItems().map((item, index) => {
+            if (item === 'ellipsis') {
+                return h("span", { key: `ellipsis-${index}`, class: "pagination-ellipsis" }, "...");
             }
-            else if (i === this.currentPage - 3 || i === this.currentPage + 3) {
-                pages.push(h("span", { class: "pagination-ellipsis" }, "..."));
-            }
-        }
+            return (h("ui-button", { key: `page-${item}`, variant: item === this.currentPage ? "primary" : "ghost", class: {
+                    'pagination-button': true,
+                    'active': item === this.currentPage
+                }, onClick: () => this.goToPage(item), label: item.toString(), size: "sm" }));
+        });
         return (h("div", { class: "list-pagination" }, h("ui-button", { variant: "ghost", class: "pagination-button", disabled: this.currentPage === 1, onClick: () => this.goToPage(this.currentPage - 1), icon: "chevron-left", iconLibrary: "fontawesome", iconOnly: true, size: "sm" }), pages, h("ui-button", { variant: "ghost", class: "pagination-button", disabled: this.currentPage === this.totalPages, onClick: () => this.goToPage(this.currentPage + 1), icon: "chevron-right", iconLibrary: "fontawesome", iconOnly: true, size: "sm" })));
     }
     renderVirtualList() {
@@ -519,7 +558,7 @@ export class AppList {
         const badge = item.badge || '';
         const counter = item.counter || '';
         const tags = item.tags || '';
-        return (h("ui-list-item", { style: { '--item-index': index.toString() }, label: label, sublabel: sublabel, value: value, icon: icon, userAvatar: userAvatar, image: image, selected: isSelected, skeleton: this.skeleton || this.loading, highlight: this.searchQuery, size: this.size, badge: badge, counter: counter, tags: tags, interactive: this.selectable, onListItemClick: () => this.handleItemSelection(value, !isSelected), onCheckboxChange: (e) => this.handleItemSelection(value, e.detail.checked), showCheckbox: this.checkboxSelection, swipeActions: item.swipeActions ?? true, leftActionIcon: item.leftActionIcon ?? "check", rightActionIcon: item.rightActionIcon ?? "trash", leftActions: item.leftActions || [], rightActions: item.rightActions || [], avatarGroup: item.avatarGroup || item.collaborators || '', avatarGroupPosition: item.avatarGroupPosition || 'content', progress: item.progress ?? -1, status: item.status || '', statusPosition: item.statusPosition || 'bottom-right', starred: item.starred || false, showStar: item.showStar || false, expandable: item.expandable || false, priorityPulse: item.priorityPulse || false, presence: item.presence || [], presenceCursors: item.presenceCursors || [], density: this.density, auraMode: true, sparkline: item.sparkline || [], metadata: item.metadata || {}, showGhostLayer: this.altKeyPressed, gridMode: this.grid, focused: this.focusedIndex === index, class: {
+        return (h("ui-list-item", { style: { '--item-index': index.toString() }, label: label, sublabel: sublabel, value: value, icon: icon, userAvatar: userAvatar, image: image, selected: isSelected, skeleton: this.skeleton || this.loading, highlight: this.searchQuery, size: this.size, badge: badge, counter: counter, tags: tags, interactive: this.selectable, onListItemClick: () => this.handleItemSelection(value, !isSelected), onCheckboxChange: (e) => this.handleItemSelection(value, e.detail.checked), showCheckbox: this.checkboxSelection, swipeActions: item.swipeActions ?? true, leftActionIcon: item.leftActionIcon ?? "check", rightActionIcon: item.rightActionIcon ?? "trash", leftActions: item.leftActions || [], rightActions: item.rightActions || [], avatarGroup: item.avatarGroup || item.collaborators || '', avatarGroupPosition: item.avatarGroupPosition || 'content', progress: item.progress ?? -1, status: item.status || '', statusPosition: item.statusPosition || 'bottom-right', starred: item.starred || false, showStar: item.showStar || false, expandable: item.expandable || false, priorityPulse: item.priorityPulse || false, presence: item.presence || [], presenceCursors: item.presenceCursors || [], density: this.density, auraMode: true, sparkline: item.sparkline || [], metadata: item.metadata || {}, showGhostLayer: item.showGhostLayer ?? (this.altMode && this.altKeyPressed), gridMode: this.grid, focused: this.focusedIndex === index, class: {
                 'draggable': this.isDraggable,
                 'focused-item': this.focusedIndex === index
             }, draggable: this.isDraggable, onDragStart: (e) => {
@@ -538,11 +577,6 @@ export class AppList {
                 this.listStarToggle.emit({ value: e.detail.value, starred: e.detail.starred });
             } }));
     }
-    renderGroupFooter(groupItems) {
-        if (!this.showGroupFooter)
-            return null;
-        return (h("div", { class: "list-group-footer", slot: "footer" }, this.groupFooterLabel, ": ", groupItems.length));
-    }
     handleItemClick(event) {
         const { value, selected, shiftKey, ctrlKey, metaKey } = event.detail;
         if (!this.selectable) {
@@ -567,6 +601,9 @@ export class AppList {
         if (this.loading) {
             return this.renderLoading();
         }
+        if (this.items && this.items.length > 0 && this.filteredItems.length === 0) {
+            return this.renderEmpty();
+        }
         if (this.virtual) {
             return this.renderVirtualList();
         }
@@ -574,10 +611,7 @@ export class AppList {
             return this.renderGroupedItems();
         }
         if (this.items && this.items.length > 0) {
-            if (this.filteredItems.length > 0) {
-                return this.filteredItems.map((item, index) => this.renderItem(item, index));
-            }
-            return this.renderEmpty();
+            return this.filteredItems.map((item, index) => this.renderItem(item, index));
         }
         return h("slot", null);
     }
@@ -600,19 +634,17 @@ export class AppList {
         const onlineCount = items.filter(it => it.status === 'online').length;
         return (h("div", { class: "group-mini-dashboard" }, h("div", { class: "gm-stat" }, "Group Pulse: ", h("strong", null, avgHealth, "%")), h("div", { class: "gm-stat" }, "Vitality: ", h("strong", null, onlineCount, "/", items.length, " Active")), h("div", { class: "gm-spark", style: { flex: '1' } }, h("svg", { height: "24", width: "100%" }, h("path", { d: "M0,12 Q25,2 50,12 T100,12", fill: "none", stroke: "#3bf673", "stroke-width": "2" })))));
     }
+    renderGroupFooter(items) {
+        const footerLabel = this.groupFooterLabel?.trim();
+        if (!this.showGroupFooter || !footerLabel)
+            return null;
+        return (h("div", { slot: "footer", class: "group-footer" }, "Total: ", items.length, " ", footerLabel));
+    }
     renderGroupedItems() {
         const groups = this.getGroupedItems();
         if (!groups)
             return null;
-        return Object.keys(groups).map(groupName => (h("ui-list-group", { key: groupName, label: groupName, collapsible: true, expanded: true }, h("div", { slot: "header", class: "group-header-custom", onClick: (e) => {
-                e.stopPropagation();
-                const newDash = new Set(this.groupDashboards);
-                if (newDash.has(groupName))
-                    newDash.delete(groupName);
-                else
-                    newDash.add(groupName);
-                this.groupDashboards = newDash;
-            } }, h("span", { class: "group-title-label" }, groupName), h("span", { class: "group-pill" }, groups[groupName].length, " Nodes"), h("ui-icon", { name: this.groupDashboards.has(groupName) ? 'chart-bar' : 'chevron-down', library: "fontawesome" })), this.renderGroupDashboard(groupName, groups[groupName]), groups[groupName].map((item, idx) => {
+        return Object.keys(groups).map(groupName => (h("ui-list-group", { key: groupName, label: groupName, collapsible: true, expanded: true }, h("div", { slot: "header-actions", style: { fontSize: '11px', color: '#10b981', fontWeight: 'bold', textTransform: 'uppercase', marginRight: '8px' } }, "Nodes: ", groups[groupName].length), this.renderGroupDashboard(groupName, groups[groupName]), groups[groupName].map((item, idx) => {
             const globalIdx = this.filteredItems.indexOf(item);
             return (h("div", { key: `${groupName}-${idx}` }, this.renderItem(item, globalIdx)));
         }), this.renderGroupFooter(groups[groupName]))));
@@ -640,9 +672,10 @@ export class AppList {
         })));
     }
     renderViewTabs() {
-        if (!this.viewTabs || this.viewTabs.length === 0)
+        const tabs = typeof this.viewTabs === 'string' ? JSON.parse(this.viewTabs) : this.viewTabs;
+        if (!tabs || tabs.length === 0)
             return null;
-        return (h("div", { class: "list-view-tabs" }, this.viewTabs.map((tab, idx) => (h("div", { key: tab.label, class: { 'view-tab': true, 'active': this.activeTab === idx }, onClick: () => { this.activeTab = idx; this.filterItems(); } }, tab.label)))));
+        return (h("div", { class: "list-view-tabs" }, tabs.map((tab, idx) => (h("div", { key: tab.label, class: { 'view-tab': true, 'active': this.activeTab === idx }, onClick: () => { this.activeTab = idx; this.filterItems(); } }, tab.label)))));
     }
     render() {
         const listClasses = {
@@ -666,6 +699,7 @@ export class AppList {
         const containerClasses = {
             'list-container': true,
             'list-has-selection': this.selectedValues.length > 0,
+            'list-show-bulk-header': this.showBulkHeader && this.multiSelect,
             [`selection-theme-${this.selectionHeaderColor}`]: this.selectedValues.length > 0
         };
         const gridStyle = this.grid ? {
@@ -678,7 +712,7 @@ export class AppList {
             ...(this.maxHeight ? { maxHeight: this.maxHeight, overflowY: 'auto' } : {}),
             ...gridStyle
         };
-        return (h("div", { key: '5684139656aa6922b537ed2c33d040ff00951369', class: containerClasses, onKeyDown: this.handleKeyDown, tabindex: "0" }, this.syncing && h("div", { key: '3d0fa48f4af75ef72778c33a2e7c49b0fcdc951c', class: "list-sync-bar" }), h("div", { key: 'ca2b3d140bde8c70c312694b09605f8c57494de6', class: "list-header-adaptive" }, h("div", { key: '9652209ed505568d154ff0cea69a59946d152d0f', class: "header-main-titles" }, this.label && h("div", { key: '3a2219002b7c43dd851b577354e36da1c1b1bbdf', class: "list-label" }, this.label), this.subheader && h("div", { key: '65fdf444f79400cb22091c8e1ba559476c2e5e60', class: "list-subheader" }, this.subheader)), this.renderViewTabs()), this.renderSearch(), this.filterChips.length > 0 && (h("div", { key: '83a004df672c8b81a61f98bbee307a29738655d7', class: "list-filter-chips" }, this.filterChips.map(chip => (h("ui-button", { variant: chip.active ? "primary" : "ghost", class: { 'filter-chip': true, 'active': chip.active }, label: `${chip.label} ${chip.count !== undefined ? chip.count : ''}`, size: "sm" }))))), this.showSortingHeaders && (h("div", { key: '2a5f4ad0309980db00dc73dc86630998609a4c56', class: "list-sorting-headers" }, this.columns.map(col => (h("div", { class: "sort-header", onClick: () => { const dir = this._sortColumn === col.key && this._sortDir === 'asc' ? 'desc' : 'asc'; this._sortColumn = col.key; this._sortDir = dir; this.columnSort.emit({ key: col.key, direction: dir }); } }, h("span", null, col.label), col.sortable && h("ui-icon", { name: "sort", library: "fontawesome" })))))), this.showBulkHeader && this.multiSelect && (h("div", { key: '23cb44d5f7bee3a990a724146b2df8ca42b5dd96', class: "list-bulk-header" }, h("div", { key: '28dc1ac4b24e6e9689d4265147e88b5282c98919', class: "bulk-select-all" }, h("ui-check-box", { key: '143d57d309f55370752c5f893a8c10cc054fe7f4', checked: this.selectedValues.length === this.items.length && this.items.length > 0, indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.items.length, onCheckChange: (e) => {
+        return (h("div", { key: 'bb00547184af81fff94b839aa963837068a12b67', class: containerClasses, onKeyDown: this.handleKeyDown, tabindex: "0" }, this.syncing && h("div", { key: '465b32c39866f661ae0dd1ee72a93d76a13a7287', class: "list-sync-bar" }), (this.label !== '' || this.subheader !== '' || (this.viewTabs && this.viewTabs.length > 0)) ? (h("div", { class: "list-header-adaptive" }, h("div", { class: "header-main-titles" }, this.label && h("div", { class: "list-label" }, this.label), this.subheader && h("div", { class: "list-subheader" }, this.subheader)), this.renderViewTabs())) : null, this.renderSearch(), this.filterChips.length > 0 && (h("div", { key: '59f4a5f1d64a8c156f097fc66e860b59a74c1fa0', class: "list-filter-chips" }, this.filterChips.map(chip => (h("ui-button", { variant: chip.active ? "primary" : "ghost", class: { 'filter-chip': true, 'active': chip.active }, label: `${chip.label} ${chip.count !== undefined ? chip.count : ''}`, size: "sm" }))))), this.showSortingHeaders && (h("div", { key: 'b4bbabc32064534ddd72d4fe09e0247515c187d7', class: "list-sorting-headers" }, this.columns.map(col => (h("div", { class: "sort-header", onClick: () => { const dir = this._sortColumn === col.key && this._sortDir === 'asc' ? 'desc' : 'asc'; this._sortColumn = col.key; this._sortDir = dir; this.columnSort.emit({ key: col.key, direction: dir }); } }, h("span", null, col.label), col.sortable && h("ui-icon", { name: "sort", library: "fontawesome" })))))), this.showBulkHeader && this.multiSelect && (h("div", { key: 'd7aaa947251a337d969e803f92a31f36ad23eafe', class: "list-bulk-header" }, h("div", { key: 'cf432032c183b98757ea62c28a897c5bd4b18244', class: "bulk-select-all" }, h("ui-check-box", { key: 'ca4476ce62396c22dacdf580c4bbba0d9c2d5c33', checked: this.selectedValues.length === this.items.length && this.items.length > 0, indeterminate: this.selectedValues.length > 0 && this.selectedValues.length < this.items.length, onCheckChange: (e) => {
                 if (e.detail.checked) {
                     this.selectedValues = this.items.map((item, i) => item.value || item.id || i.toString());
                 }
@@ -686,15 +720,15 @@ export class AppList {
                     this.selectedValues = [];
                 }
                 this.listChange.emit({ values: this.selectedValues });
-            } }), h("span", { key: '7a863464bb51a4e0696357cf47df4d673f1435da', class: "bulk-count" }, this.selectedValues.length, " selected")), this.selectedValues.length > 0 && (h("div", { key: 'e4b0914bb4a1270b53d5ce22b78e692a773dd119', class: "bulk-actions" }, this.bulkActions.map(action => (h("ui-button", { variant: "ghost", onClick: () => this.bulkAction.emit({ action: action.action, values: this.selectedValues }), icon: action.icon, iconLibrary: "fontawesome", label: action.label, size: "sm" }))))))), this.floatingFAB && this.selectedValues.length > 0 && (h("div", { key: '80d73a3f7aaf83ed56483b9b1289355c94ee2cd2', class: "list-power-launcher-container" }, h("div", { key: 'b17d2e799be661d020129b7282958cc390a5e1f3', class: { 'launcher-fab': true, 'active': this.isPowerLauncherOpen }, onClick: () => this.isPowerLauncherOpen = !this.isPowerLauncherOpen }, h("ui-icon", { key: '2c480f1a330b88d988027b395cffea9007959875', name: this.isPowerLauncherOpen ? 'times' : 'bolt', library: "fontawesome" })), this.isPowerLauncherOpen && (h("div", { key: '22b2dc111065ea5d027f2036b0aa09c2b8e33c1c', class: "launcher-menu" }, h("div", { key: '96757071c64097399f00003c5b8286109ae073d0', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'rolling-restart', values: this.selectedValues }) }, h("ui-icon", { key: 'dcf809cf37cc3ce674ccbd45c17b4753dc2d0d00', name: "redo" }), " Rolling Restart"), h("div", { key: '638b213324ce1fab5f08bcdc46c3eece46096e01', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'sync-cluster', values: this.selectedValues }) }, h("ui-icon", { key: 'e56da100b1479ddc964b1881ea980a8e95ababa0', name: "sync" }), " Sync Cluster"), h("div", { key: 'e49e35e060cb5b3ac704701ca895bec1ce87f25d', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'patch-security', values: this.selectedValues }) }, h("ui-icon", { key: '809e778533d4a8f81bba9a9cc8ff4eba3873428f', name: "shield-alt" }), " Patch Security"), h("div", { key: 'c0a6cc4d0b9f18c372c2ed915c908eb56ddd5f85', class: "l-item danger", onClick: () => this.bulkAction.emit({ action: 'delete', values: this.selectedValues }) }, h("ui-icon", { key: '3f21dccdecb41a5f55181a1e1aeb9e35bea1c64e', name: "trash" }), " Terminate Selected"))))), this.isPaletteOpen && (h("div", { key: 'c7d9e294022223fa9a651ef38242c0bf6adb954f', class: "list-shortcut-palette", onClick: () => this.isPaletteOpen = false }, h("div", { key: '806386e68869a9b330924aa912639f9e4c23f406', class: "palette-content", onClick: e => e.stopPropagation() }, h("h3", { key: 'b1f9d573f682cb91e5c1e27678b5a23d88d53f0d' }, "\u2328\uFE0F Keyboard Shortcuts"), h("div", { key: '587cb46ffaf1d6b937b6cbf976d488716e99c4e7', class: "shortcut-grid" }, h("div", { key: '99b60b30c17829122d01cab955e68abf2e325404', class: "s-row" }, h("kbd", { key: '528dbdade7ea5e40d0f910485ee6dc97987b3cba' }, "J"), " / ", h("kbd", { key: 'cf48324a3c57e1930f5df7a72d6a39b80398af7b' }, "K"), " ", h("span", { key: '45fdfcb587fe461e116e8377e9a60e4c713f3c5b' }, "Navigate Down / Up")), h("div", { key: 'cee7b640c85a03007caf55f321a6f7cb0a05f7ec', class: "s-row" }, h("kbd", { key: '272dcd26548008a508b07ec840ff14551b727b77' }, "Shift"), " + ", h("kbd", { key: '192fb55ec1a65b52dd048e48d9f1fdeb8e749055' }, "J/K"), " ", h("span", { key: 'a0650dd5e2f346b9928881f0b1afb279a1e447ce' }, "Select Range")), h("div", { key: '978a95dba468ddd239a6564e64676ec49c56f814', class: "s-row" }, h("kbd", { key: 'dd89ce3941b66de4fdfe54fa9b642305ca5a1ec7' }, "X"), " ", h("span", { key: 'e65cbc977404a02c8c97422969bd655066eaa24f' }, "Toggle Selection")), h("div", { key: '2f4948053e0c57cdeda7b8dc95924c208cc2162d', class: "s-row" }, h("kbd", { key: '96236740f75b1bd32ff2cd59d0e0a8f4fbc56790' }, "Enter"), " ", h("span", { key: 'f97d42cd2426d7b8ce733d1d951a208d6a651214' }, "Activate / Open")), h("div", { key: '19fc8715190f1170dbc8fa49dc175c41889c8800', class: "s-row" }, h("kbd", { key: '9e3b21acfd2b90e5ef6092c4c76c7b272123c1d5' }, "Space"), " ", h("span", { key: '1fb4d5e4980463a275206fed93b84d932de58a47' }, "Quick Look Preview")), h("div", { key: 'e6db95f32afcdcc87869a3e2a25a0f4641e2ed06', class: "s-row" }, h("kbd", { key: '96eff77c50f2cb47f0aec426028acd9fa62e9676' }, "["), " / ", h("kbd", { key: '65291ab2f4667e8538b6dad3eef7acf2eca59bb7' }, "]"), " ", h("span", { key: '386e1754ec50d9dc8748cd5f0f79ebc4d07adb37' }, "Jump to Prev / Next Group")), h("div", { key: '4330d1b02cff4b1fea58df8b4edc487a0d8afa40', class: "s-row" }, h("kbd", { key: '5e32e02c048a583b6a514ec53cec46cd72dc609f' }, "?"), " ", h("span", { key: '0505f5dc146e9ccefcf7538a580c2cc9cc0ba83c' }, "Toggle this help")))))), this.isQuickLookOpen && (h("div", { key: '96152ba016ee2466fbc4a768d8ba4858c3942759', class: "list-quick-look-modal", onClick: () => this.isQuickLookOpen = false }, h("div", { key: '6394a176a2202a76e3ea5651013ae2cd966e4721', class: "quick-look-content", onClick: e => e.stopPropagation() }, h("ui-icon", { key: '2d1059432bd8ff8b0881db5c37ca6b7de545a7e2', name: "times", class: "close-look", onClick: () => this.isQuickLookOpen = false }), h("div", { key: '06966b3777cc0975455fdfb1b369101ed719d8bb', class: "look-header" }, h("h2", { key: 'd5d97e1c05289474b724d1057c9ff25e1a2c0dd2' }, this.filteredItems[this.focusedIndex]?.label), h("span", { key: '0b65d7a4c60a924a8e1d1b958f49e4be95eb4dc4' }, this.filteredItems[this.focusedIndex]?.sublabel)), h("div", { key: '4b95dcf39f8356e511cda85795fde30c53cc6afb', class: "look-body" }, h("p", { key: '059ba589a2d86c5d3c311d43732cda2f791c2736' }, "Comprehensive detail for Node ID: ", this.filteredItems[this.focusedIndex]?.value || 'N/A'), h("div", { key: '492b7836c768053dd04571e7789d36f20ecc3316', class: "look-stats" }, h("div", { key: '2dd11a134ec109eccf262fd7cff2603832008411', class: "l-stat" }, "Status: ", h("strong", { key: '97b9d41633eee04ef2ae308e4cfb90e689d13471' }, this.filteredItems[this.focusedIndex]?.status || 'Idle')), h("div", { key: 'cda37caa09ea5be1ca63ea05aa52b05c7ea7c60b', class: "l-stat" }, "Health: ", h("strong", { key: 'af222d5568b451b93b38ddce361c6a8ce4dc62d7' }, this.filteredItems[this.focusedIndex]?.progress || 100, "%"))))))), h("div", { key: '7cda8202307e92b7450fa2947bb2c8e9262cc21e', ref: el => this.listRef = el, class: listClasses, style: listStyle, role: "list", "aria-label": this.ariaLabel, "aria-busy": this.syncing ? 'true' : 'false', part: "list", onScroll: this.handleScroll, onMouseDown: this.handleLassoStart }, this.renderMinimap(), this.focusRingTop >= 0 && (h("div", { key: '2e57833bb56b58deaa11adb1309f7f2cd5db5b88', class: "list-focus-spring-ring", style: {
+            } }), h("span", { key: 'ec517dc6f4d5d0d9ffd1914e5e391c7d3a74505a', class: "bulk-count" }, this.selectedValues.length, " selected")), this.selectedValues.length > 0 && (h("div", { key: 'b0600407777cbd52da525a09987153db769ba6a7', class: "bulk-actions" }, this.bulkActions.map(action => (h("ui-button", { variant: "ghost", onClick: () => this.bulkAction.emit({ action: action.action, values: this.selectedValues }), icon: action.icon, iconLibrary: "fontawesome", label: action.label, size: "sm" }))))))), this.floatingFAB && this.selectedValues.length > 0 && (h("div", { key: '00b8aa6c267d50a47f6856cda876bad01ee9674e', class: "list-power-launcher-container" }, h("div", { key: 'e4ec0c4c8e8b58898686b5ef72e5a096ce66e3b5', class: { 'launcher-fab': true, 'active': this.isPowerLauncherOpen }, onClick: () => this.isPowerLauncherOpen = !this.isPowerLauncherOpen }, h("ui-icon", { key: 'a6bc20180a0bdcf40cf28275acefcd7c44a3815e', name: this.isPowerLauncherOpen ? 'times' : 'bolt', library: "fontawesome" })), this.isPowerLauncherOpen && (h("div", { key: 'ef40293f768a0b40f3fc4a4c32798349040d4da2', class: "launcher-menu" }, h("div", { key: '88be539c08a62f8de9b4ce82ee57518e1c92a3d4', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'rolling-restart', values: this.selectedValues }) }, h("ui-icon", { key: 'f552d6377cc0939f3788caf7d129498b364c8459', name: "redo" }), " Rolling Restart"), h("div", { key: '8d38b28a317a9a40e9a21bf8eb35fe186f51ac1c', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'sync-cluster', values: this.selectedValues }) }, h("ui-icon", { key: '12f7bfbbb932d89c45bd2c3df7365f0362535145', name: "sync" }), " Sync Cluster"), h("div", { key: '7c71e2fbbf7179329013619a85fdab603088cae1', class: "l-item", onClick: () => this.bulkAction.emit({ action: 'patch-security', values: this.selectedValues }) }, h("ui-icon", { key: '083ba7b124a9ddfd26fbdf6fa5027c9b005e76f5', name: "shield-alt" }), " Patch Security"), h("div", { key: 'b011aababd1f2079ddee4024c9bd33d7f4531357', class: "l-item danger", onClick: () => this.bulkAction.emit({ action: 'delete', values: this.selectedValues }) }, h("ui-icon", { key: '8b0a9689e25e837876473d13487b6ef3e54600f1', name: "trash" }), " Terminate Selected"))))), this.isPaletteOpen && (h("div", { key: '7b938fda9a651dbf84ef1ef9219422c114282d63', class: "list-shortcut-palette", onClick: () => this.isPaletteOpen = false }, h("div", { key: 'a3998a5f1b5da498d3e181b1fda7a0e9577ba6a7', class: "palette-content", onClick: e => e.stopPropagation() }, h("h3", { key: 'c09fb78ea4727525bc489f95e65de7be59952522' }, "\u2328\uFE0F Keyboard Shortcuts"), h("div", { key: 'd4c0a024a9e89f214ebf5d8815ca6cd7dbd885ea', class: "shortcut-grid" }, h("div", { key: '3ec41216e1df2a05ffe8676c6c84c7936194e87d', class: "s-row" }, h("kbd", { key: '0004f6ff2a582b1a0037402365700395161f7952' }, "J"), " / ", h("kbd", { key: '679670b760357a2215b75e9e496fcef2fc06c7b4' }, "K"), " ", h("span", { key: 'dd5bf7186501d66601302a624d8bbc77714c7b26' }, "Navigate Down / Up")), h("div", { key: '64fbfcb5bfe9740082dd1f08a1aaf150eb09a55a', class: "s-row" }, h("kbd", { key: '808dec5183b5dd0714f842f066f08794b5371156' }, "Shift"), " + ", h("kbd", { key: 'cb57c4b93adcc7f1f1b9590e92439ba9ea19ac68' }, "J/K"), " ", h("span", { key: 'dcac1d435c894641cb0fb9b84abbe889a6e0364d' }, "Select Range")), h("div", { key: '1c7f84b9b8641ae4ad8f478724537f70d219d280', class: "s-row" }, h("kbd", { key: 'f5e0c806a1820089275adf63b6a11389dc3b926d' }, "X"), " ", h("span", { key: 'f0d86c6842cc3b35e994963b3282586370181c07' }, "Toggle Selection")), h("div", { key: '533f144a781063d3cd49a420aa80b43c745a3338', class: "s-row" }, h("kbd", { key: '249b9b6ebfee73dc9b05c8d97e435fefe8af0eef' }, "Enter"), " ", h("span", { key: '07c36c47d132e3403f05e7b0d800e4374b83e01e' }, "Activate / Open")), h("div", { key: 'c9dc8867e160deffb05579bfa873587f1a6ded61', class: "s-row" }, h("kbd", { key: '92b2dac699830feff2199bee101bc6fa99181aef' }, "Space"), " ", h("span", { key: '1d8ccd25114b6cd10ed255ccccc766a8de61ff35' }, "Quick Look Preview")), h("div", { key: '376901f412fce5933eb3dca49e36c9aa18af4a50', class: "s-row" }, h("kbd", { key: '142bdc9a21d78e25535e70c764cbf7144dd2eb04' }, "["), " / ", h("kbd", { key: '606884510d2793a98cd371b8410d011d9065188c' }, "]"), " ", h("span", { key: 'eafb3d4fb9b6b520e16b4f2936771b56f8ee4a5b' }, "Jump to Prev / Next Group")), h("div", { key: 'd1a3176cec793d83c48b0f53f0c635e6b98ba550', class: "s-row" }, h("kbd", { key: '0cc2f021b294cce5c4b36ca714db5bb6540fa2df' }, "?"), " ", h("span", { key: '54efef235f24081e362eec2459eb55f223583dbe' }, "Toggle this help")))))), this.isQuickLookOpen && (h("div", { key: 'f194acddb04bbb4b217670666c13130dd7103ca8', class: "list-quick-look-modal", onClick: () => this.isQuickLookOpen = false }, h("div", { key: 'a888c716f4fd38a27f7503e1ec94e4a1b87640b1', class: "quick-look-content", onClick: e => e.stopPropagation() }, h("ui-icon", { key: '83b052f025e87eafce127aa024abe24dde014222', name: "times", class: "close-look", onClick: () => this.isQuickLookOpen = false }), h("div", { key: '558e0f06e84dcf9257f04fb7118fb26787c55ee4', class: "look-header" }, h("h2", { key: '5d9caeba95720871cf4ae13187e68d2b4f1b9c92' }, this.filteredItems[this.focusedIndex]?.label), h("span", { key: '2aa6d87d5081755e0f331c5ab237812a6608e8b5' }, this.filteredItems[this.focusedIndex]?.sublabel)), h("div", { key: '6ff07d7edad52504773a064fa1a4e01ebacf35a8', class: "look-body" }, h("p", { key: '543f894c81b5172ac243127f061fea6f6110dcf9' }, "Comprehensive detail for Node ID: ", this.filteredItems[this.focusedIndex]?.value || 'N/A'), h("div", { key: '7bac5a333c1c7f31089a6ca6ff05e997d3a96c26', class: "look-stats" }, h("div", { key: '951d1ee50f6bed0ac479b817275c88d1038fbd5c', class: "l-stat" }, "Status: ", h("strong", { key: '935fa52b092166b1c0453336192753cc4b4ebf98' }, this.filteredItems[this.focusedIndex]?.status || 'Idle')), h("div", { key: '777cd29fff1199c5793ff0f07924ba8c0fc7c11d', class: "l-stat" }, "Health: ", h("strong", { key: '225a2b9212739f06d8359d5e201e36a29266f437' }, this.filteredItems[this.focusedIndex]?.progress || 100, "%"))))))), h("div", { key: '77c2a4619e7c728ddf23f9d5e1d388708e41ad3b', ref: el => this.listRef = el, class: listClasses, style: listStyle, role: "list", "aria-label": this.ariaLabel, "aria-busy": this.syncing ? 'true' : 'false', part: "list", onScroll: this.handleScroll, onMouseDown: this.handleLassoStart }, this.renderMinimap(), this.focusRingTop >= 0 && (h("div", { key: '19b2471c6ec43c7fc338eee4a377378b3575c90c', class: "list-focus-spring-ring", style: {
                 top: `${this.focusRingTop}px`,
                 height: `${this.focusRingHeight}px`
-            } })), this.lassoActive && (h("div", { key: '6a5277b2aeb18a682b5472dc8afb8a17c3ab6d3f', class: "list-lasso-box", style: {
+            } })), this.lassoActive && (h("div", { key: 'd50b5af30f8ba2aa942936c2aa491cdd54cd23b9', class: "list-lasso-box", style: {
                 left: `${Math.min(this.lassoStart.x, this.lassoEnd.x)}px`,
                 top: `${Math.min(this.lassoStart.y, this.lassoEnd.y)}px`,
                 width: `${Math.abs(this.lassoEnd.x - this.lassoStart.x)}px`,
                 height: `${Math.abs(this.lassoEnd.y - this.lassoStart.y)}px`
-            } })), this.renderContent()), this.renderPagination(), this.renderCommandPalette(), this.renderEKGWaveform(), this.renderConfetti(), this.showConfetti && h("div", { key: '7a0cb9110e1b763f4651e1f6a2687f549dfa9870', class: "a11y-sr-only", "aria-live": "assertive" }, "Industrial Batch Operation Completed Successfully"), this.syncing && h("div", { key: '7b2aa86d2b7913c3313a4b3bcdc04afee3efaba4', class: "a11y-sr-only", "aria-live": "polite" }, "Cluster data is currently synchronizing...")));
+            } })), this.renderContent()), this.renderPagination(), this.renderCommandPalette(), this.renderEKGWaveform(), this.renderConfetti(), this.showConfetti && h("div", { key: 'd4a48c4fa355aaa245066ef891279facf5ae12e0', class: "a11y-sr-only", "aria-live": "assertive" }, "Industrial Batch Operation Completed Successfully"), this.syncing && h("div", { key: '411ccc3f6a9b589da46729eddca6ff2f202aa388', class: "a11y-sr-only", "aria-live": "polite" }, "Cluster data is currently synchronizing...")));
     }
     static get is() { return "ui-list"; }
     static get encapsulation() { return "shadow"; }
@@ -755,7 +789,7 @@ export class AppList {
                 "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",
@@ -1903,7 +1937,7 @@ export class AppList {
                 "setter": false,
                 "reflect": false,
                 "attribute": "group-footer-label",
-                "defaultValue": "'Items'"
+                "defaultValue": "''"
             },
             "floatingFAB": {
                 "type": "boolean",

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

@@ -24,7 +24,6 @@
 
 :host {
   display: block;
-  --header-padding: 12px 16px;
   --header-bg-hover: rgba(0, 0, 0, 0.04);
   --header-bg-selected: var(--primary-color-light, #e0f2fe);
   --header-color-selected: var(--primary-color, #0284c7);
@@ -42,7 +41,6 @@
   justify-content: space-between;
   user-select: none;
   border-radius: 4px;
-  margin-bottom: 4px;
   transition: all 0.2s ease;
 }
 .group-header-collapsible {

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

@@ -23,13 +23,19 @@ export class AppListGroup {
             this.groupToggle.emit({ expanded: this.expanded });
         }
     };
-    handleHeaderClick = (e) => {
+    didToggleFromButton = false;
+    handleHeaderClick = (_e) => {
+        if (this.didToggleFromButton) {
+            this.didToggleFromButton = false;
+            return;
+        }
         if (this.selectable) {
             this.selected = !this.selected;
         }
         this.groupClick.emit({ selected: this.selected, expanded: this.expanded });
         if (this.collapsible && !this.selectable) {
-            this.toggleExpanded(e);
+            this.expanded = !this.expanded;
+            this.groupToggle.emit({ expanded: this.expanded });
         }
     };
     renderSkeleton() {
@@ -51,10 +57,10 @@ export class AppListGroup {
             'group-content-collapsed': !this.expanded,
         };
         const paddingLeft = this.level * 24;
-        return (h(Host, { style: { '--group-level': this.level.toString() } }, this.label && (h("div", { class: headerClasses, onClick: this.handleHeaderClick, style: { paddingLeft: `${paddingLeft + 12}px` } }, h("div", { class: "header-left" }, this.collapsible && (h("ui-button", { variant: "ghost", onClick: this.toggleExpanded, ariaLabel: this.expanded ? "Collapse group" : "Expand group", icon: this.expanded ? 'chevron-down' : 'chevron-right', iconLibrary: "fontawesome", iconOnly: true, size: "sm" })), this.selectable && (h("div", { class: {
+        return (h(Host, { style: { '--group-level': this.level.toString() } }, this.label && (h("div", { class: headerClasses, onClick: this.handleHeaderClick, style: { paddingLeft: `${paddingLeft + 12}px` } }, h("div", { class: "header-left" }, this.collapsible && (h("ui-button", { variant: "ghost", onClick: (e) => { this.didToggleFromButton = true; this.toggleExpanded(e); }, ariaLabel: this.expanded ? "Collapse group" : "Expand group", icon: this.expanded ? 'chevron-down' : 'chevron-right', iconLibrary: "fontawesome", iconOnly: true, size: "sm" })), this.selectable && (h("div", { class: {
                 'selection-checkbox': true,
                 'selected': this.selected
-            } }, h("div", { class: "checkbox-box" }, this.selected && h("ui-icon", { name: "check", library: "fontawesome" })))), this.icon && (h("ui-icon", { class: "group-icon", name: this.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" })), h("span", { class: "group-label" }, this.label), this.badge && (h("span", { class: `group-badge badge-${this.badgeColor}` }, this.badge))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))), h("div", { class: contentClasses, role: "region", "aria-expanded": this.expanded.toString() }, h("slot", null)), h("div", { class: "group-footer" }, h("slot", { name: "footer" })), this.divider && h("div", { class: "group-divider" })));
+            } }, h("div", { class: "checkbox-box" }, this.selected && h("ui-icon", { name: "check", library: "fontawesome" })))), this.icon && (h("ui-icon", { class: "group-icon", name: this.icon.replace(/^fa[sb]? fa-/, ''), library: "fontawesome" })), h("span", { class: "group-label" }, this.label), this.badge && (h("span", { class: `group-badge badge-${this.badgeColor}` }, this.badge))), h("div", { class: "header-actions" }, h("slot", { name: "header-actions" })))), h("div", { class: contentClasses, role: "region", "aria-expanded": this.expanded.toString() }, h("slot", null)), h("slot", { name: "footer" }), this.divider && h("div", { class: "group-divider" })));
     }
     static get is() { return "ui-list-group"; }
     static get encapsulation() { return "shadow"; }
@@ -255,7 +261,7 @@ export class AppListGroup {
                 "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",