@ng-prism/core 21.2.0 → 21.3.0

package/dist/app/sidebar/prism-sidebar.component.d.ts

@@ -1,12 +1,20 @@
 import type { NavigationItem } from '../services/navigation-item.types.js';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import * as i0 from "@angular/core";
+interface SidebarCategory {
+    name: string;
+    items: NavigationItem[];
+}
+interface SidebarGroup {
+    name: string | null;
+    categories: SidebarCategory[];
+}
 export declare class PrismSidebarComponent {
     protected readonly navigationService: PrismNavigationService;
     private readonly expandedSet;
-    protected readonly entries: import("@angular/core").Signal<[string, NavigationItem[]][]>;
-    protected isExpanded(category: string, index: number): boolean;
-    protected toggleCategory(category: string, index: number): void;
+    protected readonly groups: import("@angular/core").Signal<SidebarGroup[]>;
+    protected isExpanded(key: string, index: number): boolean;
+    protected toggle(key: string, index: number): void;
     protected itemKey(item: NavigationItem): string;
     protected itemLabel(item: NavigationItem): string;
     protected isActive(item: NavigationItem): boolean;
@@ -16,4 +24,5 @@ export declare class PrismSidebarComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<PrismSidebarComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<PrismSidebarComponent, "prism-sidebar", never, {}, {}, never, never, true, never>;
 }
+export {};
 //# sourceMappingURL=prism-sidebar.component.d.ts.map

package/dist/app/sidebar/prism-sidebar.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;;AAIjF,qBA8Ia,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IAEtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4C;IAExE,SAAS,CAAC,QAAQ,CAAC,OAAO,+DAC8B;IAExD,SAAS,CAAC,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO;IAO9D,SAAS,CAAC,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAoB/D,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IASjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;yCAzET,qBAAqB;2CAArB,qBAAqB;CA8EjC"}
+{"version":3,"file":"prism-sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/app/sidebar/prism-sidebar.component.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAC3E,OAAO,EAAE,sBAAsB,EAAE,MAAM,yCAAyC,CAAC;;AAIjF,UAAU,eAAe;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,cAAc,EAAE,CAAC;CACzB;AAED,UAAU,YAAY;IACpB,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,UAAU,EAAE,eAAe,EAAE,CAAC;CAC/B;AAED,qBA2Na,qBAAqB;IAChC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,yBAAkC;IAEtE,OAAO,CAAC,QAAQ,CAAC,WAAW,CAA4C;IAExE,SAAS,CAAC,QAAQ,CAAC,MAAM,iDAgCtB;IAEH,SAAS,CAAC,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO;IAOzD,SAAS,CAAC,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAoBlD,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAM/C,SAAS,CAAC,SAAS,CAAC,IAAI,EAAE,cAAc,GAAG,MAAM;IAMjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,OAAO;IASjD,SAAS,CAAC,QAAQ,CAAC,IAAI,EAAE,cAAc,GAAG,IAAI;IAQ9C,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;yCAxGT,qBAAqB;2CAArB,qBAAqB;CA6GjC"}

package/dist/app/sidebar/prism-sidebar.component.js

@@ -1,88 +1,189 @@
 import { Component, computed, inject, signal } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 import { PrismNavigationService } from '../services/prism-navigation.service.js';
 import * as i0 from "@angular/core";
-const _forTrack0 = ($index, $item) => $item[0];
-function _forTrack1($index, $item) { return this.itemKey($item); }
-function PrismSidebarComponent_For_2_Conditional_5_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵdomElementStart(0, "span", 7);
+const _c0 = a0 => ({ cat: a0, nested: true });
+const _c1 = a0 => ({ cat: a0, nested: false });
+const _forTrack0 = ($index, $item) => $item.name ?? "__ungrouped";
+const _forTrack1 = ($index, $item) => $item.name;
+function _forTrack2($index, $item) { return this.itemKey($item); }
+function PrismSidebarComponent_For_2_Conditional_0_Conditional_5_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PrismSidebarComponent_For_2_Conditional_0_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PrismSidebarComponent_For_2_Conditional_0_Conditional_5_For_1_ng_container_0_Template, 1, 0, "ng-container", 6);
+} if (rf & 2) {
+    const cat_r6 = ctx.$implicit;
+    i0.ɵɵnextContext(4);
+    const categoryTpl_r7 = i0.ɵɵreference(4);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryTpl_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, cat_r6));
+} }
+function PrismSidebarComponent_For_2_Conditional_0_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_For_2_Conditional_0_Conditional_5_For_1_Template, 1, 4, "ng-container", null, _forTrack1);
+} if (rf & 2) {
+    const group_r3 = i0.ɵɵnextContext(2).$implicit;
+    i0.ɵɵrepeater(group_r3.categories);
+} }
+function PrismSidebarComponent_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "button", 3);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_For_2_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); const group_r3 = ctx_r1.$implicit; const ɵ$index_3_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggle("group:" + group_r3.name, ɵ$index_3_r4)); });
+    i0.ɵɵnamespaceSVG();
+    i0.ɵɵelementStart(2, "svg", 4);
+    i0.ɵɵelement(3, "path", 5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_2_Conditional_0_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    const group_r3 = ctx_r1.$implicit;
+    const ɵ$index_3_r4 = ctx_r1.$index;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("prism-sidebar__chevron--expanded", ctx_r4.isExpanded("group:" + group_r3.name, ɵ$index_3_r4));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", group_r3.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r4.isExpanded("group:" + group_r3.name, ɵ$index_3_r4) ? 5 : -1);
+} }
+function PrismSidebarComponent_For_2_Conditional_1_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function PrismSidebarComponent_For_2_Conditional_1_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, PrismSidebarComponent_For_2_Conditional_1_For_1_ng_container_0_Template, 1, 0, "ng-container", 6);
+} if (rf & 2) {
+    const cat_r8 = ctx.$implicit;
+    i0.ɵɵnextContext(3);
+    const categoryTpl_r7 = i0.ɵɵreference(4);
+    i0.ɵɵproperty("ngTemplateOutlet", categoryTpl_r7)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c1, cat_r8));
+} }
+function PrismSidebarComponent_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_For_2_Conditional_1_For_1_Template, 1, 4, "ng-container", null, _forTrack1);
+} if (rf & 2) {
+    const group_r3 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵrepeater(group_r3.categories);
+} }
+function PrismSidebarComponent_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, PrismSidebarComponent_For_2_Conditional_0_Template, 6, 4, "div", 2)(1, PrismSidebarComponent_For_2_Conditional_1_Template, 2, 0);
+} if (rf & 2) {
+    const group_r3 = ctx.$implicit;
+    i0.ɵɵconditional(group_r3.name ? 0 : 1);
+} }
+function PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 11);
     i0.ɵɵtext(1, "\u25C8");
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
 } }
-function PrismSidebarComponent_For_2_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "button", 6);
-    i0.ɵɵdomListener("click", function PrismSidebarComponent_For_2_Conditional_5_For_1_Template_button_click_0_listener() { const item_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.onSelect(item_r7)); });
-    i0.ɵɵconditionalCreate(1, PrismSidebarComponent_For_2_Conditional_5_For_1_Conditional_1_Template, 2, 0, "span", 7);
+function PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 10);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Template_button_click_0_listener() { const item_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r4 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r4.onSelect(item_r12)); });
+    i0.ɵɵconditionalCreate(1, PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Conditional_1_Template, 2, 0, "span", 11);
     i0.ɵɵtext(2);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r7 = ctx.$implicit;
-    const ctx_r4 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("prism-sidebar__item--active", ctx_r4.isActive(item_r7))("prism-sidebar__item--page", item_r7.kind === "page");
+    const item_r12 = ctx.$implicit;
+    const nested_r13 = i0.ɵɵnextContext(2).nested;
+    const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("prism-sidebar__item--active", ctx_r4.isActive(item_r12))("prism-sidebar__item--nested", nested_r13)("prism-sidebar__item--page", item_r12.kind === "page");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r7.kind === "page" ? 1 : -1);
+    i0.ɵɵconditional(item_r12.kind === "page" ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r4.itemLabel(item_r7), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r4.itemLabel(item_r12), " ");
 } }
-function PrismSidebarComponent_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_For_2_Conditional_5_For_1_Template, 3, 6, "button", 5, _forTrack1, true);
+function PrismSidebarComponent_ng_template_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, PrismSidebarComponent_ng_template_3_Conditional_5_For_1_Template, 3, 8, "button", 9, _forTrack2, true);
 } if (rf & 2) {
-    const entry_r3 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵrepeater(entry_r3[1]);
+    const cat_r10 = i0.ɵɵnextContext().cat;
+    i0.ɵɵrepeater(cat_r10.items);
 } }
-function PrismSidebarComponent_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵdomElementStart(0, "div", 1)(1, "button", 2);
-    i0.ɵɵdomListener("click", function PrismSidebarComponent_For_2_Template_button_click_1_listener() { const ctx_r1 = i0.ɵɵrestoreView(_r1); const entry_r3 = ctx_r1.$implicit; const ɵ$index_3_r4 = ctx_r1.$index; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggleCategory(entry_r3[0], ɵ$index_3_r4)); });
+function PrismSidebarComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "button", 8);
+    i0.ɵɵlistener("click", function PrismSidebarComponent_ng_template_3_Template_button_click_1_listener() { const cat_r10 = i0.ɵɵrestoreView(_r9).cat; const ctx_r4 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r4.toggle("cat:" + cat_r10.name, 0)); });
     i0.ɵɵnamespaceSVG();
-    i0.ɵɵdomElementStart(2, "svg", 3);
-    i0.ɵɵdomElement(3, "path", 4);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementStart(2, "svg", 4);
+    i0.ɵɵelement(3, "path", 5);
+    i0.ɵɵelementEnd();
     i0.ɵɵtext(4);
-    i0.ɵɵdomElementEnd();
-    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_For_2_Conditional_5_Template, 2, 0);
-    i0.ɵɵdomElementEnd();
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(5, PrismSidebarComponent_ng_template_3_Conditional_5_Template, 2, 0);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const entry_r3 = ctx.$implicit;
-    const ɵ$index_3_r4 = ctx.$index;
+    const cat_r10 = ctx.cat;
+    const nested_r13 = ctx.nested;
     const ctx_r4 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("prism-sidebar__category--nested", nested_r13);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("prism-sidebar__category-title--nested", nested_r13);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("prism-sidebar__chevron--expanded", ctx_r4.isExpanded("cat:" + cat_r10.name, 0));
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("prism-sidebar__chevron--expanded", ctx_r4.isExpanded(entry_r3[0], ɵ$index_3_r4));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", entry_r3[0], " ");
+    i0.ɵɵtextInterpolate1(" ", cat_r10.name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r4.isExpanded(entry_r3[0], ɵ$index_3_r4) ? 5 : -1);
+    i0.ɵɵconditional(ctx_r4.isExpanded("cat:" + cat_r10.name, 0) ? 5 : -1);
 } }
 const STORAGE_KEY = 'ng-prism-sidebar-expanded';
 export class PrismSidebarComponent {
     navigationService = inject(PrismNavigationService);
     expandedSet = signal(this.loadExpanded(), ...(ngDevMode ? [{ debugName: "expandedSet" }] : []));
-    entries = computed(() => [...this.navigationService.categoryTree().entries()], ...(ngDevMode ? [{ debugName: "entries" }] : []));
-    isExpanded(category, index) {
+    groups = computed(() => {
+        const tree = this.navigationService.categoryTree();
+        const groupMap = new Map();
+        for (const [fullCategory, items] of tree.entries()) {
+            const sepIdx = fullCategory.indexOf(' / ');
+            let groupName;
+            let catName;
+            if (sepIdx !== -1) {
+                groupName = fullCategory.substring(0, sepIdx).trim();
+                catName = fullCategory.substring(sepIdx + 3).trim();
+            }
+            else {
+                groupName = null;
+                catName = fullCategory;
+            }
+            const cats = groupMap.get(groupName) ?? [];
+            cats.push({ name: catName, items });
+            groupMap.set(groupName, cats);
+        }
+        const result = [];
+        const ungrouped = groupMap.get(null);
+        if (ungrouped) {
+            result.push({ name: null, categories: ungrouped });
+            groupMap.delete(null);
+        }
+        for (const [name, categories] of groupMap.entries()) {
+            result.push({ name, categories });
+        }
+        return result;
+    }, ...(ngDevMode ? [{ debugName: "groups" }] : []));
+    isExpanded(key, index) {
         const set = this.expandedSet();
-        if (set.has(category))
+        if (set.has(key))
             return true;
-        if (set.has(`__collapsed:${category}`))
+        if (set.has(`__collapsed:${key}`))
             return false;
         return index === 0;
     }
-    toggleCategory(category, index) {
+    toggle(key, index) {
         this.expandedSet.update(prev => {
             const next = new Set(prev);
-            const collapsedKey = `__collapsed:${category}`;
-            if (next.has(category)) {
-                next.delete(category);
+            const collapsedKey = `__collapsed:${key}`;
+            if (next.has(key)) {
+                next.delete(key);
                 next.add(collapsedKey);
             }
             else if (next.has(collapsedKey)) {
                 next.delete(collapsedKey);
-                next.add(category);
+                next.add(key);
             }
             else if (index === 0) {
                 next.add(collapsedKey);
             }
             else {
-                next.add(category);
+                next.add(key);
             }
             this.saveExpanded(next);
             return next;
@@ -131,40 +232,71 @@ export class PrismSidebarComponent {
         catch { /* ignore */ }
     }
     static ɵfac = function PrismSidebarComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || PrismSidebarComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]], decls: 3, vars: 0, consts: [[1, "prism-sidebar"], [1, "prism-sidebar__category"], [1, "prism-sidebar__category-title", 3, "click"], ["viewBox", "0 0 16 16", "fill", "currentColor", 1, "prism-sidebar__chevron"], ["d", "M6 4l4 4-4 4"], [1, "prism-sidebar__item", 3, "prism-sidebar__item--active", "prism-sidebar__item--page"], [1, "prism-sidebar__item", 3, "click"], [1, "prism-sidebar__page-icon"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵdomElementStart(0, "nav", 0);
-            i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_2_Template, 6, 4, "div", 1, _forTrack0);
-            i0.ɵɵdomElementEnd();
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: PrismSidebarComponent, selectors: [["prism-sidebar"]], decls: 5, vars: 0, consts: [["categoryTpl", ""], [1, "prism-sidebar"], [1, "prism-sidebar__group"], [1, "prism-sidebar__group-title", 3, "click"], ["viewBox", "0 0 16 16", 1, "prism-sidebar__chevron"], ["d", "M6 4l4 4-4 4"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "prism-sidebar__category"], [1, "prism-sidebar__category-title", 3, "click"], [1, "prism-sidebar__item", 3, "prism-sidebar__item--active", "prism-sidebar__item--nested", "prism-sidebar__item--page"], [1, "prism-sidebar__item", 3, "click"], [1, "prism-sidebar__page-icon"]], template: function PrismSidebarComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "nav", 1);
+            i0.ɵɵrepeaterCreate(1, PrismSidebarComponent_For_2_Template, 2, 1, null, null, _forTrack0);
+            i0.ɵɵtemplate(3, PrismSidebarComponent_ng_template_3_Template, 6, 8, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵrepeater(ctx.entries());
-        } }, styles: [".prism-sidebar[_ngcontent-%COMP%] {\n      background: var(--prism-sidebar-bg, var(--prism-bg));\n      border-right: 1px solid var(--prism-border);\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 4px 0;\n      height: 100%;\n    }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar { width: 4px; }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n    .prism-sidebar__category[_ngcontent-%COMP%] { margin-bottom: 2px; }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 7px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__chevron[_ngcontent-%COMP%] {\n      width: 10px;\n      height: 10px;\n      flex-shrink: 0;\n      transition: transform 0.15s;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.5;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.5;\n    }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%]:hover   .prism-sidebar__chevron[_ngcontent-%COMP%] {\n      opacity: 0.8;\n    }\n\n    .prism-sidebar__chevron--expanded[_ngcontent-%COMP%] {\n      transform: rotate(90deg);\n    }\n\n    .prism-sidebar__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 6px 14px 6px 24px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-left: 2px solid transparent;\n      text-align: left;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-sidebar__item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n      color: var(--prism-text-2);\n    }\n\n    .prism-sidebar__item--active[_ngcontent-%COMP%] {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n\n    .prism-sidebar__item--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    }\n\n    .prism-sidebar__page-icon[_ngcontent-%COMP%] {\n      font-size: 10px;\n      opacity: 0.6;\n    }"] });
+            i0.ɵɵrepeater(ctx.groups());
+        } }, dependencies: [NgTemplateOutlet], styles: [".prism-sidebar[_ngcontent-%COMP%] {\n      background: var(--prism-sidebar-bg, var(--prism-bg));\n      border-right: 1px solid var(--prism-border);\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 4px 0;\n      height: 100%;\n    }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar { width: 4px; }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-track { background: transparent; }\n    .prism-sidebar[_ngcontent-%COMP%]::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n    .prism-sidebar__group[_ngcontent-%COMP%] { margin-bottom: 2px; }\n\n    .prism-sidebar__group-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 8px 16px;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 50%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__group-title[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 16%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__category[_ngcontent-%COMP%] { margin-bottom: 2px; }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 7px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__category-title[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__category-title--nested[_ngcontent-%COMP%] {\n      padding-left: 28px;\n      font-weight: 500;\n      font-size: 11px;\n      background: color-mix(in srgb, var(--prism-primary) 4%, transparent);\n      border-left-color: color-mix(in srgb, var(--prism-primary) 25%, transparent);\n    }\n\n    .prism-sidebar__category-title--nested[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n    }\n\n    .prism-sidebar__chevron[_ngcontent-%COMP%] {\n      width: 10px;\n      height: 10px;\n      flex-shrink: 0;\n      transition: transform 0.15s;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.5;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.5;\n    }\n\n    .prism-sidebar__group-title[_ngcontent-%COMP%]:hover   .prism-sidebar__chevron[_ngcontent-%COMP%], \n   .prism-sidebar__category-title[_ngcontent-%COMP%]:hover   .prism-sidebar__chevron[_ngcontent-%COMP%] {\n      opacity: 0.8;\n    }\n\n    .prism-sidebar__chevron--expanded[_ngcontent-%COMP%] {\n      transform: rotate(90deg);\n    }\n\n    .prism-sidebar__item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 6px 14px 6px 24px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-left: 2px solid transparent;\n      text-align: left;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-sidebar__item--nested[_ngcontent-%COMP%] {\n      padding-left: 36px;\n    }\n\n    .prism-sidebar__item[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n      color: var(--prism-text-2);\n    }\n\n    .prism-sidebar__item--active[_ngcontent-%COMP%] {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n\n    .prism-sidebar__item--active[_ngcontent-%COMP%]:hover {\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    }\n\n    .prism-sidebar__page-icon[_ngcontent-%COMP%] {\n      font-size: 10px;\n      opacity: 0.6;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PrismSidebarComponent, [{
         type: Component,
-        args: [{ selector: 'prism-sidebar', standalone: true, template: `
+        args: [{ selector: 'prism-sidebar', standalone: true, imports: [NgTemplateOutlet], template: `
     <nav class="prism-sidebar">
-      @for (entry of entries(); track entry[0]; let idx = $index) {
-        <div class="prism-sidebar__category">
+      @for (group of groups(); track group.name ?? '__ungrouped'; let gi = $index) {
+        @if (group.name) {
+          <div class="prism-sidebar__group">
+            <button
+              class="prism-sidebar__group-title"
+              (click)="toggle('group:' + group.name, gi)"
+            >
+              <svg
+                class="prism-sidebar__chevron"
+                [class.prism-sidebar__chevron--expanded]="isExpanded('group:' + group.name, gi)"
+                viewBox="0 0 16 16"
+              >
+                <path d="M6 4l4 4-4 4"/>
+              </svg>
+              {{ group.name }}
+            </button>
+            @if (isExpanded('group:' + group.name, gi)) {
+              @for (cat of group.categories; track cat.name) {
+                <ng-container *ngTemplateOutlet="categoryTpl; context: { cat, nested: true }" />
+              }
+            }
+          </div>
+        } @else {
+          @for (cat of group.categories; track cat.name) {
+            <ng-container *ngTemplateOutlet="categoryTpl; context: { cat, nested: false }" />
+          }
+        }
+      }
+
+      <ng-template #categoryTpl let-cat="cat" let-nested="nested">
+        <div class="prism-sidebar__category" [class.prism-sidebar__category--nested]="nested">
           <button
             class="prism-sidebar__category-title"
-            (click)="toggleCategory(entry[0], idx)"
+            [class.prism-sidebar__category-title--nested]="nested"
+            (click)="toggle('cat:' + cat.name, 0)"
           >
             <svg
               class="prism-sidebar__chevron"
-              [class.prism-sidebar__chevron--expanded]="isExpanded(entry[0], idx)"
+              [class.prism-sidebar__chevron--expanded]="isExpanded('cat:' + cat.name, 0)"
               viewBox="0 0 16 16"
-              fill="currentColor"
             >
               <path d="M6 4l4 4-4 4"/>
             </svg>
-            {{ entry[0] }}
+            {{ cat.name }}
           </button>
-          @if (isExpanded(entry[0], idx)) {
-            @for (item of entry[1]; track itemKey(item)) {
+          @if (isExpanded('cat:' + cat.name, 0)) {
+            @for (item of cat.items; track itemKey(item)) {
               <button
                 class="prism-sidebar__item"
                 [class.prism-sidebar__item--active]="isActive(item)"
+                [class.prism-sidebar__item--nested]="nested"
                 [class.prism-sidebar__item--page]="item.kind === 'page'"
                 (click)="onSelect(item)"
               >
@@ -176,8 +308,8 @@ export class PrismSidebarComponent {
             }
           }
         </div>
-      }
+      </ng-template>
     </nav>
-  `, styles: ["\n    .prism-sidebar {\n      background: var(--prism-sidebar-bg, var(--prism-bg));\n      border-right: 1px solid var(--prism-border);\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 4px 0;\n      height: 100%;\n    }\n    .prism-sidebar::-webkit-scrollbar { width: 4px; }\n    .prism-sidebar::-webkit-scrollbar-track { background: transparent; }\n    .prism-sidebar::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n    .prism-sidebar__category { margin-bottom: 2px; }\n\n    .prism-sidebar__category-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 7px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__category-title:hover {\n      background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__chevron {\n      width: 10px;\n      height: 10px;\n      flex-shrink: 0;\n      transition: transform 0.15s;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.5;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.5;\n    }\n\n    .prism-sidebar__category-title:hover .prism-sidebar__chevron {\n      opacity: 0.8;\n    }\n\n    .prism-sidebar__chevron--expanded {\n      transform: rotate(90deg);\n    }\n\n    .prism-sidebar__item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 6px 14px 6px 24px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-left: 2px solid transparent;\n      text-align: left;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-sidebar__item:hover {\n      background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n      color: var(--prism-text-2);\n    }\n\n    .prism-sidebar__item--active {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n\n    .prism-sidebar__item--active:hover {\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    }\n\n    .prism-sidebar__page-icon {\n      font-size: 10px;\n      opacity: 0.6;\n    }\n  "] }]
+  `, styles: ["\n    .prism-sidebar {\n      background: var(--prism-sidebar-bg, var(--prism-bg));\n      border-right: 1px solid var(--prism-border);\n      overflow-y: auto;\n      overflow-x: hidden;\n      padding: 4px 0;\n      height: 100%;\n    }\n    .prism-sidebar::-webkit-scrollbar { width: 4px; }\n    .prism-sidebar::-webkit-scrollbar-track { background: transparent; }\n    .prism-sidebar::-webkit-scrollbar-thumb { background: var(--prism-border-strong); border-radius: 2px; }\n\n    .prism-sidebar__group { margin-bottom: 2px; }\n\n    .prism-sidebar__group-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 8px 16px;\n      font-size: 11px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 50%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__group-title:hover {\n      background: color-mix(in srgb, var(--prism-primary) 16%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__category { margin-bottom: 2px; }\n\n    .prism-sidebar__category-title {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      margin: 0;\n      padding: 7px 16px;\n      font-size: 11px;\n      font-weight: 600;\n      text-transform: uppercase;\n      letter-spacing: 0.08em;\n      color: var(--prism-text-2);\n      font-family: var(--prism-font-sans);\n      background: color-mix(in srgb, var(--prism-primary) 8%, transparent);\n      border: none;\n      border-left: 2px solid color-mix(in srgb, var(--prism-primary) 40%, transparent);\n      cursor: pointer;\n      text-align: left;\n      transition: background 0.12s, color 0.12s, border-color 0.12s;\n    }\n\n    .prism-sidebar__category-title:hover {\n      background: color-mix(in srgb, var(--prism-primary) 14%, transparent);\n      color: var(--prism-text);\n      border-left-color: var(--prism-primary);\n    }\n\n    .prism-sidebar__category-title--nested {\n      padding-left: 28px;\n      font-weight: 500;\n      font-size: 11px;\n      background: color-mix(in srgb, var(--prism-primary) 4%, transparent);\n      border-left-color: color-mix(in srgb, var(--prism-primary) 25%, transparent);\n    }\n\n    .prism-sidebar__category-title--nested:hover {\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n    }\n\n    .prism-sidebar__chevron {\n      width: 10px;\n      height: 10px;\n      flex-shrink: 0;\n      transition: transform 0.15s;\n      fill: none;\n      stroke: currentColor;\n      stroke-width: 1.5;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n      opacity: 0.5;\n    }\n\n    .prism-sidebar__group-title:hover .prism-sidebar__chevron,\n    .prism-sidebar__category-title:hover .prism-sidebar__chevron {\n      opacity: 0.8;\n    }\n\n    .prism-sidebar__chevron--expanded {\n      transform: rotate(90deg);\n    }\n\n    .prism-sidebar__item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      width: 100%;\n      padding: 6px 14px 6px 24px;\n      font-size: 13px;\n      font-family: var(--prism-font-sans);\n      border: none;\n      background: none;\n      color: var(--prism-text-muted);\n      cursor: pointer;\n      border-left: 2px solid transparent;\n      text-align: left;\n      transition: background 0.1s, color 0.1s, border-color 0.1s;\n    }\n\n    .prism-sidebar__item--nested {\n      padding-left: 36px;\n    }\n\n    .prism-sidebar__item:hover {\n      background: color-mix(in srgb, var(--prism-primary) 6%, transparent);\n      color: var(--prism-text-2);\n    }\n\n    .prism-sidebar__item--active {\n      border-left-color: var(--prism-primary);\n      background: color-mix(in srgb, var(--prism-primary) 10%, transparent);\n      color: var(--prism-text);\n      font-weight: 500;\n    }\n\n    .prism-sidebar__item--active:hover {\n      background: color-mix(in srgb, var(--prism-primary) 12%, transparent);\n    }\n\n    .prism-sidebar__page-icon {\n      font-size: 10px;\n      opacity: 0.6;\n    }\n  "] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 149 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(PrismSidebarComponent, { className: "PrismSidebarComponent", filePath: "app/sidebar/prism-sidebar.component.ts", lineNumber: 237 }); })();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-prism/core",
-  "version": "21.2.0",
+  "version": "21.3.0",
   "description": "Lightweight Angular-native component showcase — no story files needed.",
   "keywords": [
     "angular",