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

package/dist/cjs/nv-row.cjs.entry.js

@@ -14,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '7349317dfee793dd34ceab919bae6155811f25f4' }, index.h("slot", { key: '0b31cf4d03d1057ec6f02b65b0ace85ee390cbc4' })));
+        return (index.h(index.Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, index.h("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
     }
 };
 NvRow.style = NvRowStyle0;

package/dist/cjs/nv-sidebar.cjs.entry.js

@@ -0,0 +1,179 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93d3b2f8.js');
+
+const nvSidebarCss = "nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--color-level-00-background);border-right:var(--sidebar-primary-separator-size) solid var(--color-content-low-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-reduced-max-width)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--spacing-6) var(--spacing-5)}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--spacing-6);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--spacing-8);right:calc(var(--spacing-8) / -2);display:flex;align-items:center;justify-content:center;width:var(--spacing-8);height:var(--spacing-8);padding:var(--sidebar-collapsible-button-padding);background-color:var(--color-level-00-background);border:var(--sidebar-primary-separator-size) solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-level-10-background)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-icon)}";
+const NvSidebarStyle0 = nvSidebarCss;
+
+const NvSidebar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * The type of sidebar behavior.
+         * - collapsible: Can be toggled open/closed
+         * - persistent: Always visible
+         */
+        this.type = 'persistent';
+        /**
+         * Whether the sidebar is currently open (only applies to collapsible type).
+         */
+        // eslint-disable-next-line @stencil-community/ban-default-true
+        this.open = true;
+        /**
+         * Determines the type of notification bullets in the sidebar.
+         * - neutral: Uses neutral colors (gray)
+         * - brand: Uses brand colors (orange/teal depending on theme)
+         */
+        this.notificationIntention = 'brand';
+        /**
+         * Determines the emphasis of notification bullets in the sidebar.
+         * - high: More prominent appearance
+         * - low: Less prominent appearance
+         */
+        this.notificationEmphasis = 'high';
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleToggle = () => {
+            if (this.type === 'collapsible') {
+                // Changing open will trigger @Watch which emits the event
+                this.open = !this.open;
+            }
+        };
+        /**
+         * Sets the active state of navigation items based on activePath
+         */
+        this.setActiveNavItems = () => {
+            if (!this.activePath)
+                return;
+            // First, check all subitems to find if any matches exactly
+            const activeSubitemHrefs = new Set();
+            this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {
+                const link = subItem.querySelector('a');
+                const href = link === null || link === void 0 ? void 0 : link.getAttribute('href');
+                if (href) {
+                    const isActive = this.activePath === href;
+                    subItem.active = isActive;
+                    if (isActive) {
+                        activeSubitemHrefs.add(href);
+                    }
+                }
+            });
+            // Then, set nav items active only if:
+            // 1. Exact match with activePath AND no subitem matches
+            // 2. OR the navitem has no subitems and activePath starts with its href
+            this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {
+                const link = navItem.querySelector(':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a');
+                const href = link === null || link === void 0 ? void 0 : link.getAttribute('href');
+                const hasSubitems = navItem.querySelector('nv-sidebarnavsubitem') !== null;
+                if (href) {
+                    if (hasSubitems) {
+                        // Parent with subitems: only active if exact match (not when subitem is active)
+                        navItem.active = this.activePath === href;
+                    }
+                    else {
+                        // Item without subitems: active on exact match
+                        navItem.active = this.activePath === href;
+                    }
+                }
+            });
+        };
+        this.pendingActiveUpdate = null;
+        /**
+         * Sets up the MutationObserver to watch for changes in child elements.
+         * Only triggers on new nav items being added, not on attribute changes.
+         */
+        this.setupMutationObserver = () => {
+            this.mutationObserver = new MutationObserver(mutations => {
+                // Only react to new nav items being added, ignore other mutations
+                const hasNewNavItems = mutations.some(mutation => {
+                    if (mutation.type !== 'childList')
+                        return false;
+                    return Array.from(mutation.addedNodes).some(node => {
+                        if (node.nodeType !== Node.ELEMENT_NODE)
+                            return false;
+                        const el = node;
+                        return (el.tagName.toLowerCase() === 'nv-sidebarnavitem' ||
+                            el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' ||
+                            el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem'));
+                    });
+                });
+                if (hasNewNavItems) {
+                    // Debounce to prevent multiple rapid calls
+                    if (this.pendingActiveUpdate) {
+                        clearTimeout(this.pendingActiveUpdate);
+                    }
+                    this.pendingActiveUpdate = window.setTimeout(() => {
+                        this.setActiveNavItems();
+                        this.pendingActiveUpdate = null;
+                    }, 50);
+                }
+            });
+            this.mutationObserver.observe(this.el, {
+                childList: true,
+                subtree: true,
+            });
+        };
+    }
+    handleCollapsedSideEffects(isCollapsed) {
+        if (!isCollapsed) {
+            return;
+        }
+        this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {
+            navItem.open = false;
+        });
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    onActivePathChanged() {
+        this.setActiveNavItems();
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.setActiveNavItems();
+        this.setupMutationObserver();
+        this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);
+    }
+    onOpenChanged(newValue, oldValue) {
+        this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);
+        // Only emit event when open state actually changes (not on re-render with same value)
+        if (this.type === 'collapsible' && newValue !== oldValue) {
+            this.openChanged.emit(newValue);
+        }
+    }
+    disconnectedCallback() {
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+        if (this.pendingActiveUpdate) {
+            clearTimeout(this.pendingActiveUpdate);
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const isCollapsed = this.type === 'collapsible' && !this.open;
+        return (index.h(index.Host, { key: 'af78cae6f6cd895dbef098e549e63ac8baace243', role: "navigation", collapsed: isCollapsed ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, index.h("div", { key: '28a2ec38d36308d803362d361a243dc5c1b6083e', class: "nv-sidebar-container" }, index.h("slot", { key: 'c4d85987d256e89508392b6e28fdb74be9140ccb' })), this.type === 'collapsible' && (index.h("button", { key: 'a34c2b6a0be9b1bd494ac542db3ed096c81e32f9', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '8905351a55b339106a4c7bb5cf61582a98dd31a5', name: this.open
+                ? 'layout-sidebar-left-collapse'
+                : 'layout-sidebar-right-collapse', size: "sm" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "activePath": ["onActivePathChanged"],
+        "open": ["onOpenChanged"]
+    }; }
+};
+NvSidebar.style = NvSidebarStyle0;
+
+exports.nv_sidebar = NvSidebar;
+
+//# sourceMappingURL=nv-sidebar.cjs.entry.js.map

package/dist/cjs/nv-sidebar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nv-sidebar.entry.cjs.js","mappings":"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","names":["h","Host"],"sources":["src/components/nv-sidebar/styles/nv-sidebar.scss?tag=nv-sidebar","src/components/nv-sidebar/nv-sidebar.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n@use \"./global-overrides\";\n\nnv-sidebar {\n  @include sidebar-container();\n  @include sidebar-width(\"expanded\");\n\n  &[collapsed] {\n    @include sidebar-width(\"collapsed\");\n\n    [data-hide-on-collapsed] {\n      display: none !important;\n    }\n\n    // Collapsed mode: different padding (spacing-6 top/bottom, spacing-5 left/right) (figma rules)\n    .nv-sidebar-container {\n      padding: var(--spacing-6) var(--spacing-5);\n    }\n  }\n\n  .nv-sidebar-container {\n    @include sidebar-inner-container();\n  }\n\n  .nv-sidebar-toggle {\n    @include sidebar-toggle-button();\n  }\n}\n","import {\n  Component,\n  Host,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n  Watch,\n  h,\n} from '@stencil/core';\n\n/**\n * Main sidebar container for navigation. Supports collapsible and persistent modes.\n * @slot default - All sidebar components (logo, header, content, footer).\n */\n@Component({\n  tag: 'nv-sidebar',\n  styleUrl: 'styles/nv-sidebar.scss',\n  shadow: false,\n})\nexport class NvSidebar {\n  @Element() el!: HTMLNvSidebarElement;\n  private mutationObserver: MutationObserver;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * The type of sidebar behavior.\n   * - collapsible: Can be toggled open/closed\n   * - persistent: Always visible\n   */\n  @Prop({ reflect: true })\n  readonly type: 'collapsible' | 'persistent' = 'persistent';\n\n  /**\n   * Whether the sidebar is currently open (only applies to collapsible type).\n   */\n  // eslint-disable-next-line @stencil-community/ban-default-true\n  @Prop({ reflect: true, mutable: true })\n  open: boolean = true;\n\n  /**\n   * The current active path. Used to automatically set the active state of nav items.\n   * Example: \"/dashboard\" or \"/settings/profile\"\n   */\n  @Prop({ reflect: true })\n  readonly activePath?: string;\n\n  /**\n   * Determines the type of notification bullets in the sidebar.\n   * - neutral: Uses neutral colors (gray)\n   * - brand: Uses brand colors (orange/teal depending on theme)\n   */\n  @Prop({ reflect: true })\n  readonly notificationIntention: 'neutral' | 'brand' = 'brand';\n\n  /**\n   * Determines the emphasis of notification bullets in the sidebar.\n   * - high: More prominent appearance\n   * - low: Less prominent appearance\n   */\n  @Prop({ reflect: true })\n  readonly notificationEmphasis: 'high' | 'low' = 'high';\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n  /**\n   * Emitted when the open state changes.\n   * @bind open\n   */\n  @Event()\n  openChanged: EventEmitter<boolean>;\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n  private handleToggle = () => {\n    if (this.type === 'collapsible') {\n      // Changing open will trigger @Watch which emits the event\n      this.open = !this.open;\n    }\n  };\n\n  private handleCollapsedSideEffects(isCollapsed: boolean) {\n    if (!isCollapsed) {\n      return;\n    }\n\n    this.el.querySelectorAll('nv-sidebarnavitem[open]').forEach(navItem => {\n      (navItem as HTMLNvSidebarnavitemElement).open = false;\n    });\n  }\n\n  /**\n   * Sets the active state of navigation items based on activePath\n   */\n  private setActiveNavItems = () => {\n    if (!this.activePath) return;\n\n    // First, check all subitems to find if any matches exactly\n    const activeSubitemHrefs = new Set<string>();\n    this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {\n      const link = subItem.querySelector('a');\n      const href = link?.getAttribute('href');\n\n      if (href) {\n        const isActive = this.activePath === href;\n        subItem.active = isActive;\n        if (isActive) {\n          activeSubitemHrefs.add(href);\n        }\n      }\n    });\n\n    // Then, set nav items active only if:\n    // 1. Exact match with activePath AND no subitem matches\n    // 2. OR the navitem has no subitems and activePath starts with its href\n    this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {\n      const link = navItem.querySelector(\n        ':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a',\n      );\n      const href = link?.getAttribute('href');\n      const hasSubitems =\n        navItem.querySelector('nv-sidebarnavsubitem') !== null;\n\n      if (href) {\n        if (hasSubitems) {\n          // Parent with subitems: only active if exact match (not when subitem is active)\n          navItem.active = this.activePath === href;\n        } else {\n          // Item without subitems: active on exact match\n          navItem.active = this.activePath === href;\n        }\n      }\n    });\n  };\n\n  private pendingActiveUpdate: number | null = null;\n\n  /**\n   * Sets up the MutationObserver to watch for changes in child elements.\n   * Only triggers on new nav items being added, not on attribute changes.\n   */\n  private setupMutationObserver = (): void => {\n    this.mutationObserver = new MutationObserver(mutations => {\n      // Only react to new nav items being added, ignore other mutations\n      const hasNewNavItems = mutations.some(mutation => {\n        if (mutation.type !== 'childList') return false;\n        return Array.from(mutation.addedNodes).some(node => {\n          if (node.nodeType !== Node.ELEMENT_NODE) return false;\n          const el = node as Element;\n          return (\n            el.tagName.toLowerCase() === 'nv-sidebarnavitem' ||\n            el.tagName.toLowerCase() === 'nv-sidebarnavsubitem' ||\n            el.querySelector('nv-sidebarnavitem, nv-sidebarnavsubitem')\n          );\n        });\n      });\n\n      if (hasNewNavItems) {\n        // Debounce to prevent multiple rapid calls\n        if (this.pendingActiveUpdate) {\n          clearTimeout(this.pendingActiveUpdate);\n        }\n        this.pendingActiveUpdate = window.setTimeout(() => {\n          this.setActiveNavItems();\n          this.pendingActiveUpdate = null;\n        }, 50);\n      }\n    });\n\n    this.mutationObserver.observe(this.el, {\n      childList: true,\n      subtree: true,\n    });\n  };\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region WATCHERS\n  @Watch('activePath')\n  onActivePathChanged() {\n    this.setActiveNavItems();\n  }\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region LIFECYCLE\n  componentWillLoad() {\n    this.setActiveNavItems();\n    this.setupMutationObserver();\n    this.handleCollapsedSideEffects(this.type === 'collapsible' && !this.open);\n  }\n\n  @Watch('open')\n  protected onOpenChanged(newValue: boolean, oldValue: boolean) {\n    this.handleCollapsedSideEffects(this.type === 'collapsible' && !newValue);\n    // Only emit event when open state actually changes (not on re-render with same value)\n    if (this.type === 'collapsible' && newValue !== oldValue) {\n      this.openChanged.emit(newValue);\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.mutationObserver) {\n      this.mutationObserver.disconnect();\n    }\n    if (this.pendingActiveUpdate) {\n      clearTimeout(this.pendingActiveUpdate);\n    }\n  }\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    const isCollapsed = this.type === 'collapsible' && !this.open;\n\n    return (\n      <Host\n        role=\"navigation\"\n        collapsed={isCollapsed ? true : undefined}\n        notification-intention={this.notificationIntention}\n        notification-emphasis={this.notificationEmphasis}\n        aria-expanded={\n          this.type === 'collapsible' ? String(this.open) : undefined\n        }\n      >\n        <div class=\"nv-sidebar-container\">\n          <slot></slot>\n        </div>\n        {this.type === 'collapsible' && (\n          <button\n            class=\"nv-sidebar-toggle\"\n            onClick={this.handleToggle}\n            aria-label={this.open ? 'Collapse sidebar' : 'Expand sidebar'}\n          >\n            <nv-icon\n              name={\n                this.open\n                  ? 'layout-sidebar-left-collapse'\n                  : 'layout-sidebar-right-collapse'\n              }\n              size=\"sm\"\n            ></nv-icon>\n          </button>\n        )}\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-sidebarcontent.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93d3b2f8.js');
+
+const nvSidebarcontentCss = "nv-sidebarcontent{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}";
+const NvSidebarcontentStyle0 = nvSidebarcontentCss;
+
+const NvSidebarcontent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'd960a2c2abe06db605980bf35d2c7cc74f4e0dba', role: "list" }, index.h("slot", { key: '7c0b0ad872d1afc279bfd9c9d381097207f055e2' })));
+    }
+};
+NvSidebarcontent.style = NvSidebarcontentStyle0;
+
+exports.nv_sidebarcontent = NvSidebarcontent;
+
+//# sourceMappingURL=nv-sidebarcontent.cjs.entry.js.map

package/dist/cjs/nv-sidebarcontent.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nv-sidebarcontent.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,gGAAgG,CAAC;AAC7H,+BAAe,mBAAmB;;MCUrB,gBAAgB;;;;;;IAG3B,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,MAAM,IACfD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-sidebarcontent/nv-sidebarcontent.scss?tag=nv-sidebarcontent","src/components/nv-sidebarcontent/nv-sidebarcontent.tsx"],"sourcesContent":["nv-sidebarcontent {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n}","import { Component, Host, h } from '@stencil/core';\n\n/**\n * Scrollable main content area of the sidebar containing navigation groups and items.\n * @slot default - Navigation groups, items, and dividers.\n */\n@Component({\n  tag: 'nv-sidebarcontent',\n  styleUrl: 'nv-sidebarcontent.scss',\n  shadow: false,\n})\nexport class NvSidebarcontent {\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host role=\"list\">\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-sidebardivider.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93d3b2f8.js');
+
+const nvSidebardividerCss = "nv-sidebardivider{display:block;height:var(--sidebar-primary-separator-size);background-color:var(--color-content-low-border);margin:var(--spacing-2) 0}";
+const NvSidebardividerStyle0 = nvSidebardividerCss;
+
+const NvSidebardivider = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return index.h(index.Host, { key: 'a4328b357b750232920c8b5e24e91503bba7e235', role: "separator", "aria-orientation": "horizontal" });
+    }
+};
+NvSidebardivider.style = NvSidebardividerStyle0;
+
+exports.nv_sidebardivider = NvSidebardivider;
+
+//# sourceMappingURL=nv-sidebardivider.cjs.entry.js.map

package/dist/cjs/nv-sidebardivider.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nv-sidebardivider.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,mBAAmB,GAAG,0JAA0J,CAAC;AACvL,+BAAe,mBAAmB;;MCSrB,gBAAgB;;;;;;IAG3B,MAAM;QACJ,OAAOA,QAACC,UAAI,qDAAC,IAAI,EAAC,WAAW,sBAAkB,YAAY,GAAQ,CAAC;KACrE;;;;;;","names":["h","Host"],"sources":["src/components/nv-sidebardivider/nv-sidebardivider.scss?tag=nv-sidebardivider","src/components/nv-sidebardivider/nv-sidebardivider.tsx"],"sourcesContent":["nv-sidebardivider {\n  display: block;\n  height: var(--sidebar-primary-separator-size);\n  background-color: var(--color-content-low-border);\n  margin: var(--spacing-2) 0;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n/**\n * A horizontal divider for separating sidebar navigation groups.\n */\n@Component({\n  tag: 'nv-sidebardivider',\n  styleUrl: 'nv-sidebardivider.scss',\n  shadow: false,\n})\nexport class NvSidebardivider {\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return <Host role=\"separator\" aria-orientation=\"horizontal\"></Host>;\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-sidebarfooter.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93d3b2f8.js');
+
+const nvSidebarfooterCss = "nv-sidebarfooter{display:block;margin-top:auto}";
+const NvSidebarfooterStyle0 = nvSidebarfooterCss;
+
+const NvSidebarfooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '73ce5246f93d982caf0d65f2cde8156dfbe565da' }, index.h("slot", { key: '92a297a59988ce6e70875eedd50227cdf011d4bf' })));
+    }
+};
+NvSidebarfooter.style = NvSidebarfooterStyle0;
+
+exports.nv_sidebarfooter = NvSidebarfooter;
+
+//# sourceMappingURL=nv-sidebarfooter.cjs.entry.js.map

package/dist/cjs/nv-sidebarfooter.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nv-sidebarfooter.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,iDAAiD,CAAC;AAC7E,8BAAe,kBAAkB;;MCWpB,eAAe;;;;;;IAG1B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-sidebarfooter/nv-sidebarfooter.scss?tag=nv-sidebarfooter","src/components/nv-sidebarfooter/nv-sidebarfooter.tsx"],"sourcesContent":["nv-sidebarfooter {\n  display: block;\n  margin-top: auto;\n}","import { Component, Host, h } from '@stencil/core';\n\n/**\n * Optional footer container for the sidebar. Use this to display custom elements\n * like user settings, logout buttons, or version information at the bottom of the sidebar.\n * @slot default - Custom content to display in the footer.\n */\n@Component({\n  tag: 'nv-sidebarfooter',\n  styleUrl: 'nv-sidebarfooter.scss',\n  shadow: false,\n})\nexport class NvSidebarfooter {\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-sidebargroup.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93d3b2f8.js');
+
+const nvSidebargroupCss = "nv-sidebargroup{display:flex;flex-direction:column;gap:var(--spacing-1)}nv-sidebargroup .nv-sidebargroup-label{display:block;font-size:var(--font-size-sm);line-height:var(--line-height-sm);font-weight:var(--font-weight-medium-emphasis);color:var(--color-content-lower-text);letter-spacing:0;padding:var(--sidebar-primary-title-padding-y) var(--sidebar-primary-title-padding-x)}nv-sidebar[collapsed] nv-sidebargroup .nv-sidebargroup-label{display:none}";
+const NvSidebargroupStyle0 = nvSidebargroupCss;
+
+const NvSidebargroup = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'c7b4e34d8237dc93adaa33f12d7cfda36a8ac269', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '7cafdf840b12c89604efda7895b764331c8054b7', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: 'b6567a223f7cc05ce2874a632d38d6665c255659' })));
+    }
+};
+NvSidebargroup.style = NvSidebargroupStyle0;
+
+exports.nv_sidebargroup = NvSidebargroup;
+
+//# sourceMappingURL=nv-sidebargroup.cjs.entry.js.map

package/dist/cjs/nv-sidebargroup.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nv-sidebargroup.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,iBAAiB,GAAG,qcAAqc,CAAC;AAChe,6BAAe,iBAAiB;;MCUnB,cAAc;;;;;;;IAWzB,MAAM;QACJ,QACEA,QAACC,UAAI,qDAAC,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,KAAK,IACtC,IAAI,CAAC,KAAK,IAAID,kEAAK,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,KAAK,CAAO,EACpEA,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-sidebargroup/nv-sidebargroup.scss?tag=nv-sidebargroup","src/components/nv-sidebargroup/nv-sidebargroup.tsx"],"sourcesContent":["nv-sidebargroup {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-1);\n\n  .nv-sidebargroup-label {\n    display: block;\n    font-size: var(--font-size-sm);\n    line-height: var(--line-height-sm);\n    font-weight: var(--font-weight-medium-emphasis);\n    color: var(--color-content-lower-text);\n    letter-spacing: 0;\n    padding: var(--sidebar-primary-title-padding-y) var(--sidebar-primary-title-padding-x);\n  }\n\n  nv-sidebar[collapsed] & {\n    .nv-sidebargroup-label {\n      display: none;\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * Groups navigation items together with an optional label.\n * @slot default - Navigation items (nv-sidebarnavitem) to display in this group.\n */\n@Component({\n  tag: 'nv-sidebargroup',\n  styleUrl: 'nv-sidebargroup.scss',\n  shadow: false,\n})\nexport class NvSidebargroup {\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * Optional label to display above the navigation group.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host role=\"group\" aria-label={this.label}>\n        {this.label && <div class=\"nv-sidebargroup-label\">{this.label}</div>}\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-sidebarheader.cjs.entry.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93d3b2f8.js');
+
+const nvSidebarheaderCss = "nv-sidebarheader{display:block}";
+const NvSidebarheaderStyle0 = nvSidebarheaderCss;
+
+const NvSidebarheader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '42d91f8325df19e8208ab045a057657c97bf3ff4' }, index.h("slot", { key: '42b4e5952fd55b95fe2934297929cef3bd1b226c' })));
+    }
+};
+NvSidebarheader.style = NvSidebarheaderStyle0;
+
+exports.nv_sidebarheader = NvSidebarheader;
+
+//# sourceMappingURL=nv-sidebarheader.cjs.entry.js.map

package/dist/cjs/nv-sidebarheader.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nv-sidebarheader.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,kBAAkB,GAAG,iCAAiC,CAAC;AAC7D,8BAAe,kBAAkB;;MCWpB,eAAe;;;;;;IAG1B,MAAM;QACJ,QACEA,QAACC,UAAI,uDACHD,oEAAa,CACR,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-sidebarheader/nv-sidebarheader.scss?tag=nv-sidebarheader","src/components/nv-sidebarheader/nv-sidebarheader.tsx"],"sourcesContent":["nv-sidebarheader {\n  display: block;\n}","import { Component, Host, h } from '@stencil/core';\n\n/**\n * Optional header container for the sidebar. Use this to display custom elements\n * like search bars, user profiles, or action buttons at the top of the sidebar.\n * @slot default - Custom content to display in the header.\n */\n@Component({\n  tag: 'nv-sidebarheader',\n  styleUrl: 'nv-sidebarheader.scss',\n  shadow: false,\n})\nexport class NvSidebarheader {\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/cjs/nv-sidebarlogo.cjs.entry.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-93d3b2f8.js');
+
+const nvSidebarlogoCss = "nv-sidebarlogo{display:block}nv-sidebarlogo .nv-sidebarlogo-container{display:flex;align-items:center;gap:var(--spacing-3)}nv-sidebarlogo .nv-sidebarlogo-full,nv-sidebarlogo .nv-sidebarlogo-collapsed{height:var(--spacing-8);width:auto;object-fit:contain}nv-sidebarlogo .nv-sidebarlogo-collapsed{display:none}nv-sidebarlogo .nv-sidebarlogo-title{font-size:var(--nv-sidebarlogo-font-size, var(--font-size-md));font-weight:var(--nv-sidebarlogo-font-weight, var(--font-weight-high-emphasis));font-family:var(--nv-sidebarlogo-font-family, inherit);color:var(--color-content-high-text);white-space:nowrap;overflow:hidden;transition:opacity 0.2s ease, max-width 0.3s ease, margin-left 0.3s ease;max-width:200px;opacity:1}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-full{display:none}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-collapsed{display:block}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-title{max-width:0;opacity:0;margin-left:0}nv-sidebar[collapsed] nv-sidebarlogo .nv-sidebarlogo-container{justify-content:center;align-items:center;gap:0;width:100%;min-height:var(--spacing-12);padding:0}";
+const NvSidebarlogoStyle0 = nvSidebarlogoCss;
+
+const NvSidebarlogo = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        //#endregion PROPERTIES
+        /****************************************************************************/
+        //#region CONSTANTS
+        // Default Nova logo SVG (expanded - icon only, text comes from label prop)
+        this.defaultLogo = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class="cls-1" d="M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z"/%3E%3Cpath class="cls-1" d="M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z"/%3E%3Cpath class="cls-1" d="M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z"/%3E%3Cpath class="cls-1" d="M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z"/%3E%3Cpath class="cls-1" d="M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z"/%3E%3C/svg%3E';
+        // Default Nova icon (collapsed - same logo but will be displayed smaller)
+        this.defaultCollapsedLogo = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class="cls-1" d="M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z"/%3E%3Cpath class="cls-1" d="M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z"/%3E%3Cpath class="cls-1" d="M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z"/%3E%3Cpath class="cls-1" d="M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z"/%3E%3Cpath class="cls-1" d="M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z"/%3E%3C/svg%3E';
+    }
+    //#endregion CONSTANTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const logoSrc = this.logo || this.defaultLogo;
+        const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
+        return (index.h(index.Host, { key: 'ec2aba08293e4def2fe083c311b69cafe005cf5e' }, index.h("div", { key: '3a24d832a0bb5aa44264fe1fc3091878556649bd', class: "nv-sidebarlogo-container" }, index.h("img", { key: 'a9a08e7c5dd51902d9ffbda0d9216a4ffb186756', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: 'daef311e11c8d5ee6b823a4896be36ea5bd696cc', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), this.label && index.h("span", { key: '9685e4c110e7bb7356f5d49b615105033a32a736', class: "nv-sidebarlogo-title" }, this.label))));
+    }
+};
+NvSidebarlogo.style = NvSidebarlogoStyle0;
+
+exports.nv_sidebarlogo = NvSidebarlogo;
+
+//# sourceMappingURL=nv-sidebarlogo.cjs.entry.js.map

package/dist/cjs/nv-sidebarlogo.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"nv-sidebarlogo.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,gBAAgB,GAAG,gmCAAgmC,CAAC;AAC1nC,4BAAe,gBAAgB;;MCUlB,aAAa;IAL1B;;;;;;QA+BmB,gBAAW,GAC1B,u/BAAu/B,CAAC;;QAGz+B,yBAAoB,GACnC,u/BAAu/B,CAAC;KA2B3/B;;;;IAvBC,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC;QAC9C,MAAM,gBAAgB,GAAG,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,oBAAoB,CAAC;QAEzE,QACEA,QAACC,UAAI,uDACHD,kEAAK,KAAK,EAAC,0BAA0B,IACnCA,kEACE,GAAG,EAAE,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,EACzB,KAAK,EAAC,qBAAqB,GAC3B,EACFA,kEACE,GAAG,EAAE,gBAAgB,EACrB,GAAG,EAAE,IAAI,CAAC,KAAK,IAAI,MAAM,EACzB,KAAK,EAAC,0BAA0B,GAChC,EACD,IAAI,CAAC,KAAK,IAAIA,mEAAM,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAQ,CACjE,CACD,EACP;KACH;;;;;;","names":["h","Host"],"sources":["src/components/nv-sidebarlogo/styles/nv-sidebarlogo.scss?tag=nv-sidebarlogo","src/components/nv-sidebarlogo/nv-sidebarlogo.tsx"],"sourcesContent":["@use \"./mixins\" as *;\n\nnv-sidebarlogo {\n  @include logo-container-styles();\n\n  .nv-sidebarlogo-container {\n    @include logo-inner-container();\n  }\n\n  .nv-sidebarlogo-full,\n  .nv-sidebarlogo-collapsed {\n    @include logo-image();\n  }\n\n  .nv-sidebarlogo-collapsed {\n    @include logo-collapsed-hidden();\n  }\n\n  .nv-sidebarlogo-title {\n    @include logo-title();\n  }\n\n  nv-sidebar[collapsed] & {\n    .nv-sidebarlogo-full {\n      @include logo-collapsed-hidden();\n    }\n\n    .nv-sidebarlogo-collapsed {\n      @include logo-collapsed-visible();\n    }\n\n    .nv-sidebarlogo-title {\n      @include logo-title-collapsed();\n    }\n\n    .nv-sidebarlogo-container {\n      @include logo-collapsed-centered();\n    }\n  }\n}\n","import { Component, Host, Prop, h } from '@stencil/core';\n\n/**\n * Displays the logo and title at the top of the sidebar.\n * Automatically switches between full and collapsed logos based on the sidebar state.\n */\n@Component({\n  tag: 'nv-sidebarlogo',\n  styleUrl: 'styles/nv-sidebarlogo.scss',\n  shadow: false,\n})\nexport class NvSidebarlogo {\n  /****************************************************************************/\n  //#region PROPERTIES\n  /**\n   * The label/name to display next to the logo.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * URL of the full logo image (shown when sidebar is expanded).\n   * If not provided, uses a default Nova logo.\n   */\n  @Prop({ reflect: true })\n  readonly logo?: string;\n\n  /**\n   * URL of the collapsed logo image (shown when sidebar is collapsed).\n   * If not provided, uses a default Nova icon.\n   */\n  @Prop({ reflect: true })\n  readonly collapsedLogo?: string;\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region CONSTANTS\n  // Default Nova logo SVG (expanded - icon only, text comes from label prop)\n  private readonly defaultLogo =\n    'data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class=\"cls-1\" d=\"M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z\"/%3E%3Cpath class=\"cls-1\" d=\"M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z\"/%3E%3C/svg%3E';\n\n  // Default Nova icon (collapsed - same logo but will be displayed smaller)\n  private readonly defaultCollapsedLogo =\n    'data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 40 40\"%3E%3Cstyle%3E.cls-1{fill:%23f0801a;}%3C/style%3E%3Cpath class=\"cls-1\" d=\"M25.71,2.13l-5.08,11.39c-.39.88-.38,1.92.13,2.73.74,1.17,2.19,1.59,3.42,1.07l14.26-6-3.14-2.27-10.89,4.66c-.15.06-.3-.09-.23-.24l4.34-9.31-2.81-2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.29,10l9.22,8.4c.71.65,1.7.97,2.63.73,1.34-.34,2.2-1.58,2.09-2.91l-1.22-15.43-3.14,2.27,1.01,11.8c.01.16-.18.26-.3.15l-7.48-7.04-2.81,2.03Z\"/%3E%3Cpath class=\"cls-1\" d=\"M26.95,39.15l-2.59-12.2c-.2-.94-.82-1.78-1.71-2.13-1.29-.51-2.71,0-3.4,1.14l-8.01,13.24h3.87s6.07-10.18,6.07-10.18c.08-.14.3-.1.33.06l1.97,10.08h3.47Z\"/%3E%3Cpath class=\"cls-1\" d=\"M4.85,32.76l10.82-6.19c.83-.48,1.44-1.32,1.5-2.28.09-1.38-.83-2.58-2.13-2.89L0,17.82l1.2,3.68,11.54,2.67c.16.04.19.25.05.33l-9,4.96,1.07,3.3Z\"/%3E%3Cpath class=\"cls-1\" d=\"M40,20.11l-12.4-1.35c-.95-.1-1.94.22-2.56.96-.89,1.07-.84,2.58.03,3.58l10.08,11.74,1.2-3.69-7.77-8.94c-.11-.12,0-.32.16-.3l10.19,1.28,1.07-3.3Z\"/%3E%3C/svg%3E';\n  //#endregion CONSTANTS\n  /****************************************************************************/\n  //#region RENDER\n  render() {\n    const logoSrc = this.logo || this.defaultLogo;\n    const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;\n\n    return (\n      <Host>\n        <div class=\"nv-sidebarlogo-container\">\n          <img\n            src={logoSrc}\n            alt={this.label || 'Logo'}\n            class=\"nv-sidebarlogo-full\"\n          />\n          <img\n            src={collapsedLogoSrc}\n            alt={this.label || 'Logo'}\n            class=\"nv-sidebarlogo-collapsed\"\n          />\n          {this.label && <span class=\"nv-sidebarlogo-title\">{this.label}</span>}\n        </div>\n      </Host>\n    );\n  }\n  //#endregion RENDER\n}\n"],"version":3}