@nova-design-system/nova-webcomponents 3.21.0 → 3.21.1-beta.0

package/dist/collection/components/nv-notification/nv-notification.js

@@ -161,7 +161,7 @@ export class NvNotification {
     //#region RENDER
     render() {
         var _a, _b, _c;
-        return (h(Host, { key: '46775401cabedd4ddc4b25d92c63411e9acb82dc', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, h("div", { key: 'e9b66d76b129916e980a150c87fa57bb26323c43', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: 'd5a3b8eea45bf183228c4c8297e031252569e029', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'd5a8c1fe676259e40a2af7d3dab5d3b301b0583f', name: "x", size: "sm" }))), h("nv-icon", { key: '55b19299a45267b98cb8bea6f3a26c34da03a652', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: '4ec36ebdc8d45b0b381cae85f0b3768f9cbc5b73', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'b9dff96f37cddf2c1cd7c5fa78a20ae55e275db9', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: 'efd279084065fd729ab2b2a629b95405f5dedbc1', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '0cdd307c0bf278475d817d385e2af1e946170864', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'f1b5ccc34f45cb7a65bc24868134ca21d9cf3df3', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '9cced40d8f68f6b755c7a3b90e7c1899bcb95c56', "data-scope": "actions" }, h("slot", { key: 'e30bd73510f7e39e41db8bf395e99301ad53ec45', name: "actions" })))))));
+        return (h(Host, { key: '10e49ace93a23660383f9bbfb45460e610320db3', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, h("div", { key: '1cce0d5c025e404ad641eed3c0ff07045db12de6', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (h("button", { key: '64a9e8f95f51908ed82f5c832d5a9738420b574b', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, h("nv-icon", { key: 'f4f5a742b862a52ebf7e2edc320e4521ad575a29', name: "x", size: "sm" }))), h("nv-icon", { key: 'a85552d6f9d81f67643f4a8c428464ed7af2ff90', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md", "data-scope": "icon" }), h("div", { key: 'bb7fd2fd626191f53b59507c3d5003369aaa2d70', "data-scope": "content" }, (this.heading || this.headingSlot) && (h("p", { key: 'ce333015dc488c8371d2dc90b97461888a28174e', id: this.getHeadingId(), "data-scope": "heading" }, h("slot", { key: '32c9d8c3c5a85a60e3993a5963ed019f5900e6c3', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (h("p", { key: '08d57bf3058e3efcaf6d95de5754c34405ddddfb', id: this.getMessageId(), "data-scope": "message" }, h("slot", { key: 'f930fb38f00addf2911fc5401d906ee7c52b0920', name: "content" }, this.message))), this.actionsSlot && (h("div", { key: '983c60ec7fdf1ed85d2ef9d1a5c327d0aaf78013', "data-scope": "actions" }, h("slot", { key: '521bd4d20db65dc6025a9fb285599dbd7643bed0', name: "actions" })))))));
     }
     static get is() { return "nv-notification"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-notification-bullet/nv-notification-bullet.docs.js

@@ -0,0 +1,68 @@
+import { h } from "@stencil/core";
+const NvNotificationBulletDocs = {
+    component: 'nv-notification-bullet',
+    badge: 'new',
+    stories: [
+        {
+            name: 'DefaultBrandHigh',
+            args: {
+                count: 7,
+                intention: 'brand',
+                emphasis: 'high',
+            },
+            template: (h("nv-notification-bullet", { "data-storybook-args": true })),
+        },
+        {
+            name: 'BrandLow',
+            args: {
+                count: 7,
+                intention: 'brand',
+                emphasis: 'low',
+            },
+            template: (h("nv-notification-bullet", { "data-storybook-args": true })),
+        },
+        {
+            name: 'NeutralHigh',
+            args: {
+                count: 7,
+                intention: 'neutral',
+                emphasis: 'high',
+            },
+            template: (h("nv-notification-bullet", { "data-storybook-args": true })),
+        },
+        {
+            name: 'NeutralLow',
+            args: {
+                count: 7,
+                intention: 'neutral',
+                emphasis: 'low',
+            },
+            template: (h("nv-notification-bullet", { "data-storybook-args": true })),
+        },
+        {
+            name: 'SizeReduced',
+            args: {
+                count: 7,
+                size: 'reduced',
+            },
+            template: (h("nv-notification-bullet", { "data-storybook-args": true })),
+        },
+        {
+            name: 'WithContrastingBorder',
+            args: {
+                count: 7,
+                contrastingBorder: true,
+            },
+            template: (h("nv-notification-bullet", { "data-storybook-args": true })),
+        },
+        {
+            name: 'Over99',
+            args: {
+                count: 150,
+            },
+            template: (h("nv-notification-bullet", { "data-storybook-args": true })),
+        },
+    ],
+};
+export default NvNotificationBulletDocs;
+//# sourceMappingURL=nv-notification-bullet.docs.js.map

package/dist/collection/components/nv-notification-bullet/nv-notification-bullet.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-notification-bullet.docs.js","sourceRoot":"","sources":["../../../src/components/nv-notification-bullet/nv-notification-bullet.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,wBAAwB,GAA8C;IAC1E,SAAS,EAAE,wBAAwB;IACnC,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE;QACP;YACE,IAAI,EAAE,kBAAkB;YACxB,IAAI,EAAE;gBACJ,KAAK,EAAE,CAAC;gBACR,SAAS,EAAE,OAAO;gBAClB,QAAQ,EAAE,MAAM;aACjB;YACD,QAAQ,EAAE,CACR,4DAAqE,CACtE;SACF;QACD;YACE,IAAI,EAAE,UAAU;YAChB,IAAI,EAAE;gBACJ,KAAK,EAAE,CAAC;gBACR,SAAS,EAAE,OAAO;gBAClB,QAAQ,EAAE,KAAK;aAChB;YACD,QAAQ,EAAE,CACR,4DAAqE,CACtE;SACF;QACD;YACE,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE;gBACJ,KAAK,EAAE,CAAC;gBACR,SAAS,EAAE,SAAS;gBACpB,QAAQ,EAAE,MAAM;aACjB;YACD,QAAQ,EAAE,CACR,4DAAqE,CACtE;SACF;QACD;YACE,IAAI,EAAE,YAAY;YAClB,IAAI,EAAE;gBACJ,KAAK,EAAE,CAAC;gBACR,SAAS,EAAE,SAAS;gBACpB,QAAQ,EAAE,KAAK;aAChB;YACD,QAAQ,EAAE,CACR,4DAAqE,CACtE;SACF;QACD;YACE,IAAI,EAAE,aAAa;YACnB,IAAI,EAAE;gBACJ,KAAK,EAAE,CAAC;gBACR,IAAI,EAAE,SAAS;aAChB;YACD,QAAQ,EAAE,CACR,4DAAqE,CACtE;SACF;QACD;YACE,IAAI,EAAE,uBAAuB;YAC7B,IAAI,EAAE;gBACJ,KAAK,EAAE,CAAC;gBACR,iBAAiB,EAAE,IAAI;aACxB;YACD,QAAQ,EAAE,CACR,4DAAqE,CACtE;SACF;QACD;YACE,IAAI,EAAE,QAAQ;YACd,IAAI,EAAE;gBACJ,KAAK,EAAE,GAAG;aACX;YACD,QAAQ,EAAE,CACR,4DAAqE,CACtE;SACF;KACF;CACF,CAAC;AAEF,eAAe,wBAAwB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvNotificationBulletDocs: NovaDocs<Components.NvNotificationBullet> = {\n  component: 'nv-notification-bullet',\n  badge: 'new',\n  stories: [\n    {\n      name: 'DefaultBrandHigh',\n      args: {\n        count: 7,\n        intention: 'brand',\n        emphasis: 'high',\n      },\n      template: (\n        <nv-notification-bullet data-storybook-args></nv-notification-bullet>\n      ),\n    },\n    {\n      name: 'BrandLow',\n      args: {\n        count: 7,\n        intention: 'brand',\n        emphasis: 'low',\n      },\n      template: (\n        <nv-notification-bullet data-storybook-args></nv-notification-bullet>\n      ),\n    },\n    {\n      name: 'NeutralHigh',\n      args: {\n        count: 7,\n        intention: 'neutral',\n        emphasis: 'high',\n      },\n      template: (\n        <nv-notification-bullet data-storybook-args></nv-notification-bullet>\n      ),\n    },\n    {\n      name: 'NeutralLow',\n      args: {\n        count: 7,\n        intention: 'neutral',\n        emphasis: 'low',\n      },\n      template: (\n        <nv-notification-bullet data-storybook-args></nv-notification-bullet>\n      ),\n    },\n    {\n      name: 'SizeReduced',\n      args: {\n        count: 7,\n        size: 'reduced',\n      },\n      template: (\n        <nv-notification-bullet data-storybook-args></nv-notification-bullet>\n      ),\n    },\n    {\n      name: 'WithContrastingBorder',\n      args: {\n        count: 7,\n        contrastingBorder: true,\n      },\n      template: (\n        <nv-notification-bullet data-storybook-args></nv-notification-bullet>\n      ),\n    },\n    {\n      name: 'Over99',\n      args: {\n        count: 150,\n      },\n      template: (\n        <nv-notification-bullet data-storybook-args></nv-notification-bullet>\n      ),\n    },\n  ],\n};\n\nexport default NvNotificationBulletDocs;\n"]}

package/dist/collection/components/nv-notification-bullet/nv-notification-bullet.js

@@ -0,0 +1,189 @@
+import { Host, h } from "@stencil/core";
+/**
+ * Notification bullet component for displaying notification counts in the sidebar.
+ * Automatically adapts its size when the sidebar is collapsed.
+ * Inherits intention and emphasis from parent nv-sidebar if not explicitly set.
+ */
+export class NvNotificationBullet {
+    constructor() {
+        /**
+         * Determines the size of the notification bullet.
+         * - default: Normal size with text visible
+         * - reduced: Smaller size, text hidden (just a dot)
+         */
+        this.size = 'default';
+        /**
+         * Allows to add a border to add contrast on background.
+         */
+        this.contrastingBorder = false;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    getIntention() {
+        if (this.intention) {
+            return this.intention;
+        }
+        // Inherit from parent nv-sidebar
+        const sidebar = this.el.closest('nv-sidebar');
+        if (sidebar) {
+            const sidebarIntention = sidebar.getAttribute('notification-intention');
+            if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {
+                return sidebarIntention;
+            }
+        }
+        return 'brand'; // Default fallback
+    }
+    getEmphasis() {
+        if (this.emphasis) {
+            return this.emphasis;
+        }
+        // Inherit from parent nv-sidebar
+        const sidebar = this.el.closest('nv-sidebar');
+        if (sidebar) {
+            const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');
+            if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {
+                return sidebarEmphasis;
+            }
+        }
+        return 'high'; // Default fallback
+    }
+    //#region RENDER
+    render() {
+        var _a;
+        const displayCount = (_a = this.count) !== null && _a !== void 0 ? _a : 0;
+        const displayText = displayCount > 99 ? '99+' : String(displayCount);
+        if (displayCount <= 0) {
+            return null;
+        }
+        const sizeClass = this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';
+        const intention = this.getIntention();
+        const emphasis = this.getEmphasis();
+        const intentionClass = `nv-notification-bullet-${intention}`;
+        const emphasisClass = `nv-notification-bullet-${emphasis}`;
+        const borderClass = this.contrastingBorder
+            ? 'nv-notification-bullet-with-border'
+            : '';
+        return (h(Host, { class: `${intentionClass} ${borderClass ? 'nv-notification-bullet-with-cross-border' : ''}` }, h("span", { class: `nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`, "aria-label": `${displayCount} notifications` }, displayText)));
+    }
+    static get is() { return "nv-notification-bullet"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["styles/nv-notification-bullet.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["styles/nv-notification-bullet.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The number of notifications to display.\nIf 0 or not provided, the component will not be visible."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "count",
+                "reflect": true
+            },
+            "intention": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'neutral' | 'brand'",
+                    "resolved": "\"brand\" | \"neutral\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use notificationIntention prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version."
+                        }],
+                    "text": "Determines the type of the notification.\n- neutral: Uses neutral colors (gray)\n- brand: Uses brand colors (orange/teal depending on theme)\nIf not set, inherits from parent nv-sidebar's notificationIntention prop."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "intention",
+                "reflect": true
+            },
+            "emphasis": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'high' | 'low'",
+                    "resolved": "\"high\" | \"low\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use notificationEmphasis prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version."
+                        }],
+                    "text": "Determines the emphasis and importance of the notification.\n- high: More prominent appearance\n- low: Less prominent appearance\nIf not set, inherits from parent nv-sidebar's notificationEmphasis prop."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "emphasis",
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'reduced'",
+                    "resolved": "\"default\" | \"reduced\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines the size of the notification bullet.\n- default: Normal size with text visible\n- reduced: Smaller size, text hidden (just a dot)"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'default'"
+            },
+            "contrastingBorder": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows to add a border to add contrast on background."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "contrasting-border",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=nv-notification-bullet.js.map

package/dist/collection/components/nv-notification-bullet/nv-notification-bullet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-notification-bullet.js","sourceRoot":"","sources":["../../../src/components/nv-notification-bullet/nv-notification-bullet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAElE;;;;GAIG;AAMH,MAAM,OAAO,oBAAoB;IALjC;QAqCE;;;;WAIG;QAEM,SAAI,GAA0B,SAAS,CAAC;QAEjD;;WAEG;QAEM,sBAAiB,GAAY,KAAK,CAAC;KAoE7C;IAnEC,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IACT,YAAY;QAClB,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,OAAO,IAAI,CAAC,SAAS,CAAC;QACxB,CAAC;QACD,iCAAiC;QACjC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,wBAAwB,CAAC,CAAC;YACxE,IAAI,gBAAgB,KAAK,SAAS,IAAI,gBAAgB,KAAK,OAAO,EAAE,CAAC;gBACnE,OAAO,gBAAgB,CAAC;YAC1B,CAAC;QACH,CAAC;QACD,OAAO,OAAO,CAAC,CAAC,mBAAmB;IACrC,CAAC;IAEO,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC,QAAQ,CAAC;QACvB,CAAC;QACD,iCAAiC;QACjC,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,eAAe,GAAG,OAAO,CAAC,YAAY,CAAC,uBAAuB,CAAC,CAAC;YACtE,IAAI,eAAe,KAAK,MAAM,IAAI,eAAe,KAAK,KAAK,EAAE,CAAC;gBAC5D,OAAO,eAAe,CAAC;YACzB,CAAC;QACH,CAAC;QACD,OAAO,MAAM,CAAC,CAAC,mBAAmB;IACpC,CAAC;IACD,gBAAgB;IAChB,MAAM;;QACJ,MAAM,YAAY,GAAG,MAAA,IAAI,CAAC,KAAK,mCAAI,CAAC,CAAC;QACrC,MAAM,WAAW,GAAG,YAAY,GAAG,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QAErE,IAAI,YAAY,IAAI,CAAC,EAAE,CAAC;YACtB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,MAAM,SAAS,GACb,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EAAE,CAAC;QAClE,MAAM,SAAS,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;QACtC,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,EAAE,CAAC;QACpC,MAAM,cAAc,GAAG,0BAA0B,SAAS,EAAE,CAAC;QAC7D,MAAM,aAAa,GAAG,0BAA0B,QAAQ,EAAE,CAAC;QAC3D,MAAM,WAAW,GAAG,IAAI,CAAC,iBAAiB;YACxC,CAAC,CAAC,oCAAoC;YACtC,CAAC,CAAC,EAAE,CAAC;QAEP,OAAO,CACL,EAAC,IAAI,IACH,KAAK,EAAE,GAAG,cAAc,IACtB,WAAW,CAAC,CAAC,CAAC,0CAA0C,CAAC,CAAC,CAAC,EAC7D,EAAE;YAEF,YACE,KAAK,EAAE,0BAA0B,aAAa,IAAI,SAAS,IAAI,WAAW,EAAE,gBAChE,GAAG,YAAY,gBAAgB,IAE1C,WAAW,CACP,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, Element, h } from '@stencil/core';\n\n/**\n * Notification bullet component for displaying notification counts in the sidebar.\n * Automatically adapts its size when the sidebar is collapsed.\n * Inherits intention and emphasis from parent nv-sidebar if not explicitly set.\n */\n@Component({\n  tag: 'nv-notification-bullet',\n  styleUrl: 'styles/nv-notification-bullet.scss',\n  shadow: false,\n})\nexport class NvNotificationBullet {\n  @Element() el: HTMLNvNotificationBulletElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * The number of notifications to display.\n   * If 0 or not provided, the component will not be visible.\n   */\n  @Prop({ reflect: true })\n  readonly count?: number;\n\n  /**\n   * Determines the type of the notification.\n   * - neutral: Uses neutral colors (gray)\n   * - brand: Uses brand colors (orange/teal depending on theme)\n   * If not set, inherits from parent nv-sidebar's notificationIntention prop.\n   * @deprecated Use notificationIntention prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly intention?: 'neutral' | 'brand';\n\n  /**\n   * Determines the emphasis and importance of the notification.\n   * - high: More prominent appearance\n   * - low: Less prominent appearance\n   * If not set, inherits from parent nv-sidebar's notificationEmphasis prop.\n   * @deprecated Use notificationEmphasis prop on nv-sidebar instead. This prop is kept for backward compatibility but will be removed in a future version.\n   */\n  @Prop({ reflect: true })\n  readonly emphasis?: 'high' | 'low';\n\n  /**\n   * Determines the size of the notification bullet.\n   * - default: Normal size with text visible\n   * - reduced: Smaller size, text hidden (just a dot)\n   */\n  @Prop({ reflect: true })\n  readonly size: 'default' | 'reduced' = 'default';\n\n  /**\n   * Allows to add a border to add contrast on background.\n   */\n  @Prop({ reflect: true })\n  readonly contrastingBorder: boolean = false;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region METHODS\n  private getIntention(): 'neutral' | 'brand' {\n    if (this.intention) {\n      return this.intention;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarIntention = sidebar.getAttribute('notification-intention');\n      if (sidebarIntention === 'neutral' || sidebarIntention === 'brand') {\n        return sidebarIntention;\n      }\n    }\n    return 'brand'; // Default fallback\n  }\n\n  private getEmphasis(): 'high' | 'low' {\n    if (this.emphasis) {\n      return this.emphasis;\n    }\n    // Inherit from parent nv-sidebar\n    const sidebar = this.el.closest('nv-sidebar');\n    if (sidebar) {\n      const sidebarEmphasis = sidebar.getAttribute('notification-emphasis');\n      if (sidebarEmphasis === 'high' || sidebarEmphasis === 'low') {\n        return sidebarEmphasis;\n      }\n    }\n    return 'high'; // Default fallback\n  }\n  //#region RENDER\n  render() {\n    const displayCount = this.count ?? 0;\n    const displayText = displayCount > 99 ? '99+' : String(displayCount);\n\n    if (displayCount <= 0) {\n      return null;\n    }\n\n    const sizeClass =\n      this.size === 'reduced' ? 'nv-notification-bullet-reduced' : '';\n    const intention = this.getIntention();\n    const emphasis = this.getEmphasis();\n    const intentionClass = `nv-notification-bullet-${intention}`;\n    const emphasisClass = `nv-notification-bullet-${emphasis}`;\n    const borderClass = this.contrastingBorder\n      ? 'nv-notification-bullet-with-border'\n      : '';\n\n    return (\n      <Host\n        class={`${intentionClass} ${\n          borderClass ? 'nv-notification-bullet-with-cross-border' : ''\n        }`}\n      >\n        <span\n          class={`nv-notification-bullet ${emphasisClass} ${sizeClass} ${borderClass}`}\n          aria-label={`${displayCount} notifications`}\n        >\n          {displayText}\n        </span>\n      </Host>\n    );\n  }\n  // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-notification-bullet/styles/nv-notification-bullet.css

@@ -0,0 +1,80 @@
+/* Hide text when size is reduced, show only the dot */
+nv-notification-bullet {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  /* Base notification bullet styles */
+  /* Intention: brand */
+  /* Intention: neutral */
+  /* Contrasting border (cross-border backdrop) - creates a larger circle behind the bullet */
+  /* The cross-border intelligently inherits the background color from the parent (nv-sidebarnavitem-trigger) */
+  /* Cross-border for reduced size (when sidebar is collapsed) */
+  /* Apply cross-border mixin (empty now, but kept for structure) */
+  /* Size: reduced */
+}
+nv-notification-bullet .nv-notification-bullet {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--sidebar-primary-notification-bullet-size);
+  max-width: var(--sidebar-primary-notification-bullet-size);
+  min-height: var(--sidebar-primary-notification-bullet-size);
+  max-height: var(--sidebar-primary-notification-bullet-size);
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-rounded-full);
+  font-size: var(--sidebar-primary-notification-bullet-font-size);
+  font-weight: var(--sidebar-primary-notification-bullet-font-weight);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-high {
+  background-color: var(--color-brand-500);
+  color: var(--color-feedback-error-high-contrast-title);
+}
+nv-notification-bullet.nv-notification-bullet-brand .nv-notification-bullet.nv-notification-bullet-low {
+  background-color: var(--color-brand-50);
+  color: var(--color-brand-600);
+  border: 1px solid var(--color-brand-600);
+}
+nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-high {
+  background-color: var(--color-interaction-container-neutral-background);
+  color: var(--color-interaction-container-neutral-text);
+}
+nv-notification-bullet.nv-notification-bullet-neutral .nv-notification-bullet.nv-notification-bullet-low {
+  background-color: var(--color-interaction-container-neutral-background);
+  color: var(--color-interaction-container-neutral-text);
+}
+nv-notification-bullet.nv-notification-bullet-with-cross-border::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: calc(var(--sidebar-primary-notification-bullet-size) * 1.5);
+  height: calc(var(--sidebar-primary-notification-bullet-size) * 1.5);
+  border-radius: var(--radius-rounded-full);
+  /* Intelligently inherits background color from parent via CSS variable */
+  /* Supports multiple parent types: --nv-component-background (generic) or --nv-sidebarnavitem-background (sidebar specific) */
+  background-color: var(--nv-component-background, var(--nv-sidebarnavitem-background, var(--color-interaction-container-neutral-background)));
+  z-index: -1;
+  pointer-events: none;
+}
+nv-sidebar[collapsed] nv-notification-bullet.nv-notification-bullet-with-cross-border::before {
+  width: calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);
+  height: calc(var(--sidebar-primary-notification-bullet-size-reduced) * 1.5);
+}
+nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border {
+  /* Cross-border is handled by the Host element (nv-notification-bullet) */
+}
+nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced, nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet {
+  min-width: var(--sidebar-primary-notification-bullet-size-reduced);
+  max-width: var(--sidebar-primary-notification-bullet-size-reduced);
+  min-height: var(--sidebar-primary-notification-bullet-size-reduced);
+  max-height: var(--sidebar-primary-notification-bullet-size-reduced);
+  padding: 0;
+  font-size: 0;
+  /* Apply reduced cross-border backdrop when size is reduced */
+}
+nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-reduced.nv-notification-bullet-with-border, nv-sidebar[collapsed] nv-notification-bullet .nv-notification-bullet.nv-notification-bullet-with-border {
+  /* Cross-border is handled by the Host element (nv-notification-bullet) */
+}

package/dist/collection/components/nv-notificationcontainer/nv-notificationcontainer.js

@@ -29,7 +29,7 @@ export class NvNotificationContainer {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'ee0a569e38a3f6402b027317b3bbd0f9773b30ea', class: `position-${this.position}` }, h("slot", { key: 'f8829878c8b5b4de5f3e82bbe77a0ae5d9eee809' })));
+        return (h(Host, { key: 'bf0b7cd02e0d214516f352eb7016d6060d6959c5', class: `position-${this.position}` }, h("slot", { key: 'f042e3f11b4d2af4b47aadeba04a332c57889616' })));
     }
     static get is() { return "nv-notificationcontainer"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-popover/nv-popover.js

@@ -328,7 +328,7 @@ export class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '12a7b1a584b3430808f55294772240a1dc77800e' }, h("slot", { key: '3d9b86bdccf5ed03bbc477c8e0eaad6c9f886cc9', name: "trigger" }), h("div", { key: 'df5924d7e88fda20b769a7ab0329428fc04e3920', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: '559702ed280c31331703e98d4c57a189491481c4', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: 'f5872f0bb2865f053b56e9aa128414f777dd9454', name: "content" }))));
+        return (h(Host, { key: 'c54fc90b90bbe48b0410c750bf4ba97e51eb24e5' }, h("slot", { key: 'd957fba61d4e91d8afd85f14b602290c88e5128a', name: "trigger" }), h("div", { key: '548c798fc047d41c06d8a84cc9a4f65a4cbf75b5', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (h("div", { key: 'd3c6e110e2c3f45ba0ed5c69b99f0a60413cbb39', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), h("slot", { key: '20c2d8e3ff0ed3d3b9957513e19586e4aa4a39ca', name: "content" }))));
     }
     static get is() { return "nv-popover"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-row/nv-row.js

@@ -6,7 +6,7 @@ export class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '7349317dfee793dd34ceab919bae6155811f25f4' }, h("slot", { key: '0b31cf4d03d1057ec6f02b65b0ace85ee390cbc4' })));
+        return (h(Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
     }
     static get is() { return "nv-row"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-sidebar/nv-sidebar.docs.js

@@ -0,0 +1,37 @@
+import { h } from "@stencil/core";
+const NvSidebarDocs = {
+    component: 'nv-sidebar',
+    badge: 'beta',
+    subcomponents: [
+        'nv-sidebarlogo',
+        'nv-sidebarheader',
+        'nv-sidebarcontent',
+        'nv-sidebarfooter',
+        'nv-sidebargroup',
+        'nv-sidebarnavitem',
+        'nv-sidebarnavsubitem',
+        'nv-sidebardivider',
+        'nv-badge',
+        'nv-icon',
+        'nv-avatar',
+        'nv-fieldtext',
+    ],
+    stories: [
+        {
+            name: 'Default',
+            description: 'Simple sidebar with logo and basic navigation items.',
+            template: (h("nv-sidebar", { "data-storybook-args": true }, h("nv-sidebarlogo", { label: "nova" }), h("nv-sidebarcontent", null, h("nv-sidebarnavitem", { icon: "home" }, h("a", { href: "#" }, "Home")), h("nv-sidebarnavitem", { icon: "layout-dashboard" }, h("a", { href: "#" }, "Dashboard")), h("nv-sidebarnavitem", { icon: "settings" }, h("a", { href: "#" }, "Settings"))))),
+        },
+        {
+            name: 'FullExample',
+            description: 'Complete Figma design: customized logo, search field with prefix icon, recent searches with badges, navigation items with background on active, collapsible items (Dashboard open), section labels (sub-title), footer with notification badge (7), settings, help and logout, avatar + user profile.',
+            args: {
+                type: 'collapsible',
+                open: true,
+            },
+            template: (h("nv-sidebar", { "data-storybook-args": true }, h("nv-sidebarlogo", { label: "nova" }), h("nv-sidebarheader", { "data-hide-on-collapsed": true }, h("div", { "data-class": "mb-3" }, h("nv-fieldtext", { label: "Search", placeholder: "Enter a keyword" }, h("nv-icon", { slot: "trailing-input", name: "search", size: "md" }))), h("div", null, h("label", { "data-class": "block text-xs text-gray-500 mb-2" }, "Recent searches"), h("div", { "data-class": "flex gap-2 flex-wrap" }, h("nv-badge", { color: "neutral", dismissible: true }, "Tomorrow"), h("nv-badge", { color: "neutral", dismissible: true }, "House")))), h("nv-sidebardivider", { "data-class": "mx-4" }), h("nv-sidebarcontent", null, h("nv-sidebargroup", { label: "Section sub-title" }, h("nv-sidebarnavitem", { icon: "home" }, h("a", { href: "#" }, "Page 1")), h("nv-sidebarnavitem", { icon: "scooter-electric", active: true }, h("a", { href: "#" }, "Scooter")), h("nv-sidebarnavitem", { icon: "layout-dashboard", collapsible: true, open: true }, h("a", { href: "#" }, "Dashboard"), h("nv-sidebarnavsubitem", null, h("a", { href: "#" }, "First")), h("nv-sidebarnavsubitem", null, h("a", { href: "#" }, "Second")), h("nv-sidebarnavsubitem", null, h("a", { href: "#" }, "Third")), h("nv-sidebarnavsubitem", null, h("a", { href: "#" }, "Fourth"))), h("nv-sidebarnavitem", { icon: "atom" }, h("a", { href: "#" }, "Atom"))), h("nv-sidebargroup", { label: "Section sub-title" }, h("nv-sidebarnavitem", { icon: "bookmarks" }, h("a", { href: "#" }, "Saved")), h("nv-sidebarnavitem", { icon: "compass" }, h("a", { href: "#" }, "Search")))), h("nv-sidebarfooter", null, h("nv-sidebarnavitem", { icon: "bell" }, h("a", { href: "#" }, "Notification center"), h("nv-badge", { slot: "trailing", color: "error" }, "7")), h("nv-sidebarnavitem", { icon: "settings" }, h("a", { href: "#" }, "Settings")), h("nv-sidebarnavitem", { icon: "lifebuoy" }, h("a", { href: "#" }, "Help center")), h("nv-sidebardivider", { "data-hide-on-collapsed": true }), h("div", { "data-class": "flex items-center gap-3 p-2 rounded-lg hover:bg-level-10 cursor-pointer", "data-hide-on-collapsed": true }, h("nv-avatar", { size: "md", initials: "NS" }), h("div", { "data-class": "flex-1 min-w-0" }, h("div", { "data-class": "text-sm font-medium text-content-high-text truncate" }, "Name Surname"), h("div", { "data-class": "text-xs text-content-medium-text truncate" }, "View profile")), h("nv-icon", { name: "logout", size: "md" }))))),
+        },
+    ],
+};
+export default NvSidebarDocs;
+//# sourceMappingURL=nv-sidebar.docs.js.map

package/dist/collection/components/nv-sidebar/nv-sidebar.docs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-sidebar.docs.js","sourceRoot":"","sources":["../../../src/components/nv-sidebar/nv-sidebar.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAIlC,MAAM,aAAa,GAAmC;IACpD,SAAS,EAAE,YAAY;IACvB,KAAK,EAAE,MAAM;IACb,aAAa,EAAE;QACb,gBAAgB;QAChB,kBAAkB;QAClB,mBAAmB;QACnB,kBAAkB;QAClB,iBAAiB;QACjB,mBAAmB;QACnB,sBAAsB;QACtB,mBAAmB;QACnB,UAAU;QACV,SAAS;QACT,WAAW;QACX,cAAc;KACf;IACD,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,WAAW,EAAE,sDAAsD;YACnE,QAAQ,EAAE,CACR;gBACE,sBAAgB,KAAK,EAAC,MAAM,GAAkB;gBAE9C;oBACE,yBAAmB,IAAI,EAAC,MAAM;wBAC5B,SAAG,IAAI,EAAC,GAAG,WAAS,CACF;oBAEpB,yBAAmB,IAAI,EAAC,kBAAkB;wBACxC,SAAG,IAAI,EAAC,GAAG,gBAAc,CACP;oBAEpB,yBAAmB,IAAI,EAAC,UAAU;wBAChC,SAAG,IAAI,EAAC,GAAG,eAAa,CACN,CACF,CACT,CACd;SACF;QACD;YACE,IAAI,EAAE,aAAa;YACnB,WAAW,EACT,uSAAuS;YACzS,IAAI,EAAE;gBACJ,IAAI,EAAE,aAAa;gBACnB,IAAI,EAAE,IAAI;aACX;YACD,QAAQ,EAAE,CACR;gBACE,sBAAgB,KAAK,EAAC,MAAM,GAAkB;gBAE9C;oBACE,yBAAgB,MAAM;wBACpB,oBAAc,KAAK,EAAC,QAAQ,EAAC,WAAW,EAAC,iBAAiB;4BACxD,eACE,IAAI,EAAC,gBAAgB,EACrB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,IAAI,GACA,CACE,CACX;oBACN;wBACE,2BAAkB,kCAAkC,sBAE5C;wBACR,yBAAgB,sBAAsB;4BACpC,gBAAU,KAAK,EAAC,SAAS,EAAC,WAAW,qBAE1B;4BACX,gBAAU,KAAK,EAAC,SAAS,EAAC,WAAW,kBAE1B,CACP,CACF,CACW;gBAEnB,uCAA8B,MAAM,GAAqB;gBAEzD;oBACE,uBAAiB,KAAK,EAAC,mBAAmB;wBACxC,yBAAmB,IAAI,EAAC,MAAM;4BAC5B,SAAG,IAAI,EAAC,GAAG,aAAW,CACJ;wBAEpB,yBAAmB,IAAI,EAAC,kBAAkB,EAAC,MAAM;4BAC/C,SAAG,IAAI,EAAC,GAAG,cAAY,CACL;wBAEpB,yBAAmB,IAAI,EAAC,kBAAkB,EAAC,WAAW,QAAC,IAAI;4BACzD,SAAG,IAAI,EAAC,GAAG,gBAAc;4BACzB;gCACE,SAAG,IAAI,EAAC,GAAG,YAAU,CACA;4BACvB;gCACE,SAAG,IAAI,EAAC,GAAG,aAAW,CACD;4BACvB;gCACE,SAAG,IAAI,EAAC,GAAG,YAAU,CACA;4BACvB;gCACE,SAAG,IAAI,EAAC,GAAG,aAAW,CACD,CACL;wBAEpB,yBAAmB,IAAI,EAAC,MAAM;4BAC5B,SAAG,IAAI,EAAC,GAAG,WAAS,CACF,CACJ;oBAElB,uBAAiB,KAAK,EAAC,mBAAmB;wBACxC,yBAAmB,IAAI,EAAC,WAAW;4BACjC,SAAG,IAAI,EAAC,GAAG,YAAU,CACH;wBAEpB,yBAAmB,IAAI,EAAC,SAAS;4BAC/B,SAAG,IAAI,EAAC,GAAG,aAAW,CACJ,CACJ,CACA;gBAEpB;oBACE,yBAAmB,IAAI,EAAC,MAAM;wBAC5B,SAAG,IAAI,EAAC,GAAG,0BAAwB;wBACnC,gBAAU,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,OAAO,QAE5B,CACO;oBAEpB,yBAAmB,IAAI,EAAC,UAAU;wBAChC,SAAG,IAAI,EAAC,GAAG,eAAa,CACN;oBAEpB,yBAAmB,IAAI,EAAC,UAAU;wBAChC,SAAG,IAAI,EAAC,GAAG,kBAAgB,CACT;oBAEpB,0DAA8D;oBAE9D,yBACa,yEAAyE;wBAGpF,iBAAW,IAAI,EAAC,IAAI,EAAC,QAAQ,EAAC,IAAI,GAAa;wBAC/C,yBAAgB,gBAAgB;4BAC9B,yBAAgB,qDAAqD,mBAE/D;4BACN,yBAAgB,2CAA2C,mBAErD,CACF;wBACN,eAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,IAAI,GAAW,CACvC,CACW,CACR,CACd;SACF;KACF;CACF,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\n\nconst NvSidebarDocs: NovaDocs<Components.NvSidebar> = {\n  component: 'nv-sidebar',\n  badge: 'beta',\n  subcomponents: [\n    'nv-sidebarlogo',\n    'nv-sidebarheader',\n    'nv-sidebarcontent',\n    'nv-sidebarfooter',\n    'nv-sidebargroup',\n    'nv-sidebarnavitem',\n    'nv-sidebarnavsubitem',\n    'nv-sidebardivider',\n    'nv-badge',\n    'nv-icon',\n    'nv-avatar',\n    'nv-fieldtext',\n  ],\n  stories: [\n    {\n      name: 'Default',\n      description: 'Simple sidebar with logo and basic navigation items.',\n      template: (\n        <nv-sidebar data-storybook-args>\n          <nv-sidebarlogo label=\"nova\"></nv-sidebarlogo>\n\n          <nv-sidebarcontent>\n            <nv-sidebarnavitem icon=\"home\">\n              <a href=\"#\">Home</a>\n            </nv-sidebarnavitem>\n\n            <nv-sidebarnavitem icon=\"layout-dashboard\">\n              <a href=\"#\">Dashboard</a>\n            </nv-sidebarnavitem>\n\n            <nv-sidebarnavitem icon=\"settings\">\n              <a href=\"#\">Settings</a>\n            </nv-sidebarnavitem>\n          </nv-sidebarcontent>\n        </nv-sidebar>\n      ),\n    },\n    {\n      name: 'FullExample',\n      description:\n        'Complete Figma design: customized logo, search field with prefix icon, recent searches with badges, navigation items with background on active, collapsible items (Dashboard open), section labels (sub-title), footer with notification badge (7), settings, help and logout, avatar + user profile.',\n      args: {\n        type: 'collapsible',\n        open: true,\n      },\n      template: (\n        <nv-sidebar data-storybook-args>\n          <nv-sidebarlogo label=\"nova\"></nv-sidebarlogo>\n\n          <nv-sidebarheader data-hide-on-collapsed>\n            <div data-class=\"mb-3\">\n              <nv-fieldtext label=\"Search\" placeholder=\"Enter a keyword\">\n                <nv-icon\n                  slot=\"trailing-input\"\n                  name=\"search\"\n                  size=\"md\"\n                ></nv-icon>\n              </nv-fieldtext>\n            </div>\n            <div>\n              <label data-class=\"block text-xs text-gray-500 mb-2\">\n                Recent searches\n              </label>\n              <div data-class=\"flex gap-2 flex-wrap\">\n                <nv-badge color=\"neutral\" dismissible>\n                  Tomorrow\n                </nv-badge>\n                <nv-badge color=\"neutral\" dismissible>\n                  House\n                </nv-badge>\n              </div>\n            </div>\n          </nv-sidebarheader>\n\n          <nv-sidebardivider data-class=\"mx-4\"></nv-sidebardivider>\n\n          <nv-sidebarcontent>\n            <nv-sidebargroup label=\"Section sub-title\">\n              <nv-sidebarnavitem icon=\"home\">\n                <a href=\"#\">Page 1</a>\n              </nv-sidebarnavitem>\n\n              <nv-sidebarnavitem icon=\"scooter-electric\" active>\n                <a href=\"#\">Scooter</a>\n              </nv-sidebarnavitem>\n\n              <nv-sidebarnavitem icon=\"layout-dashboard\" collapsible open>\n                <a href=\"#\">Dashboard</a>\n                <nv-sidebarnavsubitem>\n                  <a href=\"#\">First</a>\n                </nv-sidebarnavsubitem>\n                <nv-sidebarnavsubitem>\n                  <a href=\"#\">Second</a>\n                </nv-sidebarnavsubitem>\n                <nv-sidebarnavsubitem>\n                  <a href=\"#\">Third</a>\n                </nv-sidebarnavsubitem>\n                <nv-sidebarnavsubitem>\n                  <a href=\"#\">Fourth</a>\n                </nv-sidebarnavsubitem>\n              </nv-sidebarnavitem>\n\n              <nv-sidebarnavitem icon=\"atom\">\n                <a href=\"#\">Atom</a>\n              </nv-sidebarnavitem>\n            </nv-sidebargroup>\n\n            <nv-sidebargroup label=\"Section sub-title\">\n              <nv-sidebarnavitem icon=\"bookmarks\">\n                <a href=\"#\">Saved</a>\n              </nv-sidebarnavitem>\n\n              <nv-sidebarnavitem icon=\"compass\">\n                <a href=\"#\">Search</a>\n              </nv-sidebarnavitem>\n            </nv-sidebargroup>\n          </nv-sidebarcontent>\n\n          <nv-sidebarfooter>\n            <nv-sidebarnavitem icon=\"bell\">\n              <a href=\"#\">Notification center</a>\n              <nv-badge slot=\"trailing\" color=\"error\">\n                7\n              </nv-badge>\n            </nv-sidebarnavitem>\n\n            <nv-sidebarnavitem icon=\"settings\">\n              <a href=\"#\">Settings</a>\n            </nv-sidebarnavitem>\n\n            <nv-sidebarnavitem icon=\"lifebuoy\">\n              <a href=\"#\">Help center</a>\n            </nv-sidebarnavitem>\n\n            <nv-sidebardivider data-hide-on-collapsed></nv-sidebardivider>\n\n            <div\n              data-class=\"flex items-center gap-3 p-2 rounded-lg hover:bg-level-10 cursor-pointer\"\n              data-hide-on-collapsed\n            >\n              <nv-avatar size=\"md\" initials=\"NS\"></nv-avatar>\n              <div data-class=\"flex-1 min-w-0\">\n                <div data-class=\"text-sm font-medium text-content-high-text truncate\">\n                  Name Surname\n                </div>\n                <div data-class=\"text-xs text-content-medium-text truncate\">\n                  View profile\n                </div>\n              </div>\n              <nv-icon name=\"logout\" size=\"md\"></nv-icon>\n            </div>\n          </nv-sidebarfooter>\n        </nv-sidebar>\n      ),\n    },\n  ],\n};\n\nexport default NvSidebarDocs;\n"]}