@aquera/nile-elements 1.6.7 → 1.6.9

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.css.js

@@ -5,23 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { css } from 'lit';
+/** Enterprise (`--nile-*`) primary, NxtGen (`--ng-*`) fallback. */
 export const styles = css `
   :host {
-    display: block;
+    display: flex;
     height: 100%;
+
+    --separator-width: 1px;
+    --separator-hit-area: 12px;
+    --separator-color: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
   }
   .sidebar {
     display: flex;
     flex-direction: column;
     height: 100%;
-    background: white;
-    border-right: 1px solid var(--nile-colors-neutral-400);
-    transition: width 0.3s ease;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    transition: var(--sidebar-transition, width 0.3s ease);
     position: relative;
   }
   .toggle-btn {
     position: absolute;
-    top: var(--nile-spacing-2xl);
+    top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));
     right: -14px;
     z-index: 10;
   }
@@ -30,7 +35,10 @@ export const styles = css `
     width: 30px;
     height: 30px;
   }
-  :host(:not([collapsed])) .sidebar {
+  nile-button.toggle-btn::part(base) {
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+  }
+  :host(:not([collapsed]):not([resizable])) .sidebar {
     width: 216px;
   }
   :host([collapsed]) .sidebar {
@@ -46,10 +54,59 @@ export const styles = css `
   .sidebar-nav {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xs);
-    padding-right: var(--nile-spacing-xl);
-    padding-top: var(--nile-spacing-3xl);
-    padding-bottom: var(--nile-spacing-3xl);
+    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding-top: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+    padding-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));
+  }
+  .sidebar-nav--rich {
+    padding-right: 0px;
+  }
+
+  /* Resizable separator */
+  .separator {
+    flex: 0 0 var(--separator-width);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--separator-color);
+    cursor: col-resize;
+    position: relative;
+    z-index: 1;
+    user-select: none;
+    touch-action: none;
+  }
+
+  .separator:focus {
+    outline: none;
+  }
+
+  .separator:focus-visible {
+    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));
+  }
+
+  .separator::after {
+    content: '';
+    position: absolute;
+    height: 100%;
+    left: calc(var(--separator-hit-area) / -2 + var(--separator-width) / 2);
+    width: var(--separator-hit-area);
+  }
+
+  :host([resizable]:not([collapsed])) .sidebar {
+    border-right: none;
+  }
+
+  :host([resizable][placement='right']:not([collapsed])) .sidebar {
+    border-left: none;
+  }
+
+  :host([collapsed]) .separator {
+    display: none;
+  }
+
+  :host([placement='right']) .separator {
+    order: -1;
   }
 
   nile-side-bar-action-menu {
@@ -61,8 +118,8 @@ export const styles = css `
   nile-side-bar-action-menu::part(menu__items-wrapper) {
     width: 100%;
     max-width: 400px;
-    padding-top: var(--nile-spacing-lg);
-    padding-bottom: var(--nile-spacing-lg);
+    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   nile-side-bar-action-menu-item::part(base) {
@@ -70,12 +127,12 @@ export const styles = css `
     margin-left: 0;
     margin-right: 0;
     border-radius: 0;
-    color: black;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   nile-side-bar-action-menu-item[active]::part(base):hover {
-    background: var(--nile-colors-primary-100);
-    color: black;
+    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   nile-side-bar-action-menu-item::part(label) {
@@ -104,7 +161,8 @@ export const styles = css `
 
   :host([placement='right']) .sidebar {
     border-right: none;
-    border-left: 1px solid var(--nile-colors-neutral-400);
+    border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));
+    order: 0;
   }
 
   :host([placement='right']) .toggle-btn {
@@ -118,7 +176,7 @@ export const styles = css `
 
   :host([placement='right']) .sidebar-nav {
     padding-right: 0;
-    padding-left: var(--nile-spacing-xl);
+    padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 `;
 //# sourceMappingURL=nile-inline-sidebar.css.js.map

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-sidebar.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmHxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    height: 100%;\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-right: 1px solid var(--nile-colors-neutral-400);\n    transition: width 0.3s ease;\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl);\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  :host(:not([collapsed])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs);\n    padding-right: var(--nile-spacing-xl);\n    padding-top: var(--nile-spacing-3xl);\n    padding-bottom: var(--nile-spacing-3xl);\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg);\n    padding-bottom: var(--nile-spacing-lg);\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item[active]::part(base):hover {\n    background: var(--nile-colors-primary-100);\n    color: black;\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n\n  :host([placement='right']) .sidebar {\n    border-right: none;\n    border-left: 1px solid var(--nile-colors-neutral-400);\n  }\n\n  :host([placement='right']) .toggle-btn {\n    right: auto;\n    left: -14px;\n  }\n\n  :host([placement='right']) .sidebar-header {\n    justify-content: flex-start;\n  }\n\n  :host([placement='right']) .sidebar-nav {\n    padding-right: 0;\n    padding-left: var(--nile-spacing-xl);\n  }\n`;\n"]}
+{"version":3,"file":"nile-inline-sidebar.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,mEAAmE;AACnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/** Enterprise (`--nile-*`) primary, NxtGen (`--ng-*`) fallback. */\nexport const styles = css`\n  :host {\n    display: flex;\n    height: 100%;\n\n    --separator-width: 1px;\n    --separator-hit-area: 12px;\n    --separator-color: var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n  }\n  .sidebar {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n    transition: var(--sidebar-transition, width 0.3s ease);\n    position: relative;\n  }\n  .toggle-btn {\n    position: absolute;\n    top: var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    right: -14px;\n    z-index: 10;\n  }\n\n  nile-button.toggle-btn::part(base) {\n    width: 30px;\n    height: 30px;\n  }\n  nile-button.toggle-btn::part(base) {\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n  }\n  :host(:not([collapsed]):not([resizable])) .sidebar {\n    width: 216px;\n  }\n  :host([collapsed]) .sidebar {\n    width: 0px;\n  }\n  :host([collapsed]) .sidebar-nav {\n    display: none;\n  }\n  .sidebar-header {\n    display: flex;\n    justify-content: flex-end;\n  }\n  .sidebar-nav {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding-top: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n    padding-bottom: var(--nile-spacing-3xl, var(--ng-spacing-3xl));\n  }\n  .sidebar-nav--rich {\n    padding-right: 0px;\n  }\n\n  /* Resizable separator */\n  .separator {\n    flex: 0 0 var(--separator-width);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: var(--separator-color);\n    cursor: col-resize;\n    position: relative;\n    z-index: 1;\n    user-select: none;\n    touch-action: none;\n  }\n\n  .separator:focus {\n    outline: none;\n  }\n\n  .separator:focus-visible {\n    background-color: var(--nile-colors-blue-500, var(--ng-componentcolors-utility-brand-50));\n  }\n\n  .separator::after {\n    content: '';\n    position: absolute;\n    height: 100%;\n    left: calc(var(--separator-hit-area) / -2 + var(--separator-width) / 2);\n    width: var(--separator-hit-area);\n  }\n\n  :host([resizable]:not([collapsed])) .sidebar {\n    border-right: none;\n  }\n\n  :host([resizable][placement='right']:not([collapsed])) .sidebar {\n    border-left: none;\n  }\n\n  :host([collapsed]) .separator {\n    display: none;\n  }\n\n  :host([placement='right']) .separator {\n    order: -1;\n  }\n\n  nile-side-bar-action-menu {\n    width: fit-content;\n    max-width: 400px;\n    min-width: 200px;\n  }\n\n  nile-side-bar-action-menu::part(menu__items-wrapper) {\n    width: 100%;\n    max-width: 400px;\n    padding-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-lg));\n  }\n\n  nile-side-bar-action-menu-item::part(base) {\n    width: 100%;\n    margin-left: 0;\n    margin-right: 0;\n    border-radius: 0;\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-side-bar-action-menu-item[active]::part(base):hover {\n    background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n  }\n\n  nile-side-bar-action-menu-item::part(label) {\n    display: block;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* Transition for sidebar button when it is closed and opened */\n  nile-side-bar-action::part(panel),\n  nile-side-bar-action-menu {\n    opacity: 0;\n    pointer-events: none;\n    transition: opacity 0.2s ease-in;\n    transition-delay: 50ms;\n  }\n\n  nile-side-bar-action:hover::part(panel),\n  nile-side-bar-action:hover nile-side-bar-action-menu {\n    opacity: 1;\n    pointer-events: auto;\n    transition-delay: 0ms;\n  }\n\n  :host([placement='right']) .sidebar {\n    border-right: none;\n    border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-neutral));\n    order: 0;\n  }\n\n  :host([placement='right']) .toggle-btn {\n    right: auto;\n    left: -14px;\n  }\n\n  :host([placement='right']) .sidebar-header {\n    justify-content: flex-start;\n  }\n\n  :host([placement='right']) .sidebar-nav {\n    padding-right: 0;\n    padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n`;\n"]}

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the BSD-3-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { CSSResultArray, TemplateResult } from 'lit';
+import { CSSResultArray, TemplateResult, PropertyValues } from 'lit';
 import NileElement from '../internal/nile-element';
 /**
  * Nile inline sidebar component.
@@ -17,6 +17,16 @@ export declare class NileInlineSidebar extends NileElement {
     showTooltip: boolean;
     /** The side on which the sidebar is placed. */
     placement: 'left' | 'right';
+    /** Enables a draggable resize handle on the sidebar's trailing edge. */
+    resizable: boolean;
+    /** Current sidebar width in pixels when resizable is enabled. */
+    sidebarWidth: number;
+    /** Minimum sidebar width in pixels. */
+    minSidebarWidth: number;
+    showToggleBtn: boolean;
+    /** Maximum sidebar width in pixels. */
+    maxSidebarWidth: number;
+    variant?: 'minimal' | 'rich';
     private activeIndex;
     private defaultSlot;
     private mutationObserver?;
@@ -25,6 +35,9 @@ export declare class NileInlineSidebar extends NileElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
+    updated(changedProperties: PropertyValues): void;
+    /** Pushes sidebar `variant` onto each item (rich vs minimal) so layout stays in sync with slotted content. */
+    private syncChildSidebarItemVariants;
     private observeSidebarItems;
     private syncActiveFromItems;
     private get focusableItems();
@@ -34,6 +47,9 @@ export declare class NileInlineSidebar extends NileElement {
     private handleItemSelect;
     private toggleCollapse;
     private handleMenuItemClick;
+    private handleSeparatorDrag;
+    private handleSeparatorKeyDown;
+    private get separatorTemplate();
     private get menuItemsTemplate();
     render(): TemplateResult;
 }

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.js

@@ -5,10 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __decorate } from "tslib";
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { styles } from './nile-inline-sidebar.css';
 import NileElement from '../internal/nile-element';
+import { drag } from '../internal/drag';
+import { clamp } from '../internal/math';
 /**
  * Nile inline sidebar component.
  *
@@ -22,6 +25,16 @@ let NileInlineSidebar = class NileInlineSidebar extends NileElement {
         this.showTooltip = false;
         /** The side on which the sidebar is placed. */
         this.placement = 'left';
+        /** Enables a draggable resize handle on the sidebar's trailing edge. */
+        this.resizable = false;
+        /** Current sidebar width in pixels when resizable is enabled. */
+        this.sidebarWidth = 216;
+        /** Minimum sidebar width in pixels. */
+        this.minSidebarWidth = 120;
+        this.showToggleBtn = true;
+        /** Maximum sidebar width in pixels. */
+        this.maxSidebarWidth = 400;
+        this.variant = 'minimal';
         this.activeIndex = -1;
         this.handleKeyDown = (event) => {
             if (this.collapsed)
@@ -103,10 +116,25 @@ let NileInlineSidebar = class NileInlineSidebar extends NileElement {
     firstUpdated() {
         this.observeSidebarItems();
         this.syncActiveFromItems();
+        this.syncChildSidebarItemVariants();
         if (this.fixed) {
             this.collapsed = false;
         }
     }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('variant')) {
+            this.syncChildSidebarItemVariants();
+        }
+    }
+    /** Pushes sidebar `variant` onto each item (rich vs minimal) so layout stays in sync with slotted content. */
+    syncChildSidebarItemVariants() {
+        const items = this.querySelectorAll('nile-inline-sidebar-item');
+        const v = this.variant ?? 'minimal';
+        items.forEach(item => {
+            item.variant = v;
+        });
+    }
     observeSidebarItems() {
         if (!this.sidebarItems?.length || !this.mutationObserver)
             return;
@@ -181,6 +209,76 @@ let NileInlineSidebar = class NileInlineSidebar extends NileElement {
             window.location.href = href;
         this.requestUpdate();
     }
+    handleSeparatorDrag(event) {
+        if (!this.resizable || this.collapsed)
+            return;
+        if (event.cancelable)
+            event.preventDefault();
+        const isRight = this.placement === 'right';
+        this.style.setProperty('--sidebar-transition', 'none');
+        drag(this, {
+            onMove: (x) => {
+                const hostRect = this.getBoundingClientRect();
+                let newWidth;
+                if (isRight) {
+                    newWidth = hostRect.width - x;
+                }
+                else {
+                    newWidth = x;
+                }
+                this.sidebarWidth = clamp(newWidth, this.minSidebarWidth, this.maxSidebarWidth);
+                this.emit('nile-sidebar-resize', { width: this.sidebarWidth });
+            },
+            onStop: () => {
+                this.style.removeProperty('--sidebar-transition');
+            },
+            initialEvent: event,
+        });
+    }
+    handleSeparatorKeyDown(event) {
+        if (!this.resizable || this.collapsed)
+            return;
+        const step = event.shiftKey ? 10 : 1;
+        let newWidth = this.sidebarWidth;
+        switch (event.key) {
+            case 'ArrowLeft':
+                newWidth -= step;
+                break;
+            case 'ArrowRight':
+                newWidth += step;
+                break;
+            case 'Home':
+                newWidth = this.minSidebarWidth;
+                break;
+            case 'End':
+                newWidth = this.maxSidebarWidth;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+        this.sidebarWidth = clamp(newWidth, this.minSidebarWidth, this.maxSidebarWidth);
+        this.emit('nile-sidebar-resize', { width: this.sidebarWidth });
+    }
+    get separatorTemplate() {
+        if (!this.resizable || this.collapsed)
+            return nothing;
+        return html `
+      <div
+        class="separator"
+        part="separator"
+        tabindex="0"
+        role="separator"
+        aria-valuenow=${this.sidebarWidth}
+        aria-valuemin=${this.minSidebarWidth}
+        aria-valuemax=${this.maxSidebarWidth}
+        aria-label="Resize sidebar"
+        @keydown=${this.handleSeparatorKeyDown}
+        @mousedown=${this.handleSeparatorDrag}
+        @touchstart=${this.handleSeparatorDrag}
+      ></div>
+    `;
+    }
     get menuItemsTemplate() {
         if (!this.sidebarItems?.length)
             return null;
@@ -216,8 +314,11 @@ let NileInlineSidebar = class NileInlineSidebar extends NileElement {
         const collapsedIcon = isRight ? 'menu_open' : 'menu_close';
         const expandedIcon = isRight ? 'menu_close' : 'menu_open';
         const actionPlacement = isRight ? 'bottom-end' : 'bottom-start';
+        const sidebarStyle = !this.collapsed
+            ? `width: ${this.sidebarWidth}px;`
+            : '';
         return html `
-      <div class="sidebar" part="base">
+      <div class="sidebar" part="base" style=${sidebarStyle}>
         <div class="sidebar-header" part="header">
           ${!this.fixed
             ? this.collapsed
@@ -229,33 +330,41 @@ let NileInlineSidebar = class NileInlineSidebar extends NileElement {
                     open
                     triggerDropdown="hover"
                   >
-                    <nile-button
-                      slot="trigger"
-                      class="toggle-btn"
-                      variant="tertiary"
-                      @click=${this.toggleCollapse}
-                    >
-                      <nile-icon name=${collapsedIcon}></nile-icon>
-                    </nile-button>
+                    ${this.showToggleBtn
+                    ? html `
+                          <nile-button
+                            slot="trigger"
+                            class="toggle-btn"
+                            variant="tertiary"
+                            @click=${this.toggleCollapse}
+                          >
+                            <nile-icon name=${collapsedIcon}></nile-icon>
+                          </nile-button>
+                        `
+                    : nothing}
                     <nile-side-bar-action-menu>
                       ${this.menuItemsTemplate}
                     </nile-side-bar-action-menu>
                   </nile-side-bar-action>
                 `
                 : html `
-                  <nile-button
-                    class="toggle-btn"
-                    variant="tertiary"
-                    @click=${this.toggleCollapse}
-                  >
-                    <nile-icon name=${expandedIcon}></nile-icon>
-                  </nile-button>
+                ${this.showToggleBtn
+                    ? html ` 
+                    <nile-button
+                      class="toggle-btn"
+                      variant="tertiary"
+                      @click=${this.toggleCollapse}
+                    >
+                      <nile-icon name=${expandedIcon}></nile-icon>
+                    </nile-button>
+                  `
+                    : nothing}
                 `
             : null}
         </div>
 
         <nav
-          class="sidebar-nav"
+          class=${classMap({ 'sidebar-nav': true, 'sidebar-nav--rich': this.variant === 'rich' })}
           role="navigation"
           aria-label="Sidebar"
           style=${this.collapsed ? 'display:none;' : ''}
@@ -266,10 +375,12 @@ let NileInlineSidebar = class NileInlineSidebar extends NileElement {
             this.requestUpdate();
             this.observeSidebarItems();
             this.syncActiveFromItems();
+            this.syncChildSidebarItemVariants();
         }}
           ></slot>
         </nav>
       </div>
+      ${this.separatorTemplate}
     `;
     }
 };
@@ -285,6 +396,24 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NileInlineSidebar.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileInlineSidebar.prototype, "resizable", void 0);
+__decorate([
+    property({ type: Number, attribute: true })
+], NileInlineSidebar.prototype, "sidebarWidth", void 0);
+__decorate([
+    property({ type: Number, attribute: true })
+], NileInlineSidebar.prototype, "minSidebarWidth", void 0);
+__decorate([
+    property({ type: Boolean, attribute: true })
+], NileInlineSidebar.prototype, "showToggleBtn", void 0);
+__decorate([
+    property({ type: Number, attribute: true })
+], NileInlineSidebar.prototype, "maxSidebarWidth", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileInlineSidebar.prototype, "variant", void 0);
 __decorate([
     state()
 ], NileInlineSidebar.prototype, "activeIndex", void 0);

package/dist/src/nile-inline-sidebar/nile-inline-sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-sidebar.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { styles } from './nile-inline-sidebar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile inline sidebar component.\n *\n * @tag nile-inline-sidebar\n */\n@customElement('nile-inline-sidebar')\nexport class NileInlineSidebar extends NileElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fixed = false;\n\n  @property({ type: Boolean, reflect: true }) showTooltip = false;\n\n  /** The side on which the sidebar is placed. */\n  @property({ type: String, reflect: true }) placement: 'left' | 'right' = 'left';\n\n  @state() private activeIndex: number = -1;\n\n  @query('slot') private defaultSlot!: HTMLSlotElement;\n\n  private mutationObserver?: MutationObserver;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private get sidebarItems(): HTMLElement[] {\n    if (!this.defaultSlot) return [];\n    const assigned = this.defaultSlot.assignedElements({ flatten: true });\n    const items = assigned.flatMap(el =>\n      el.tagName.toLowerCase() === 'nile-inline-sidebar-item'\n        ? [el]\n        : Array.from(el.querySelectorAll('nile-inline-sidebar-item'))\n    );\n    return items as HTMLElement[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('nile-click', this.handleItemSelect);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.mutationObserver = new MutationObserver(() =>\n      this.syncActiveFromItems()\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n    this.removeEventListener('nile-click', this.handleItemSelect);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  firstUpdated() {\n    this.observeSidebarItems();\n    this.syncActiveFromItems();\n\n    if (this.fixed) {\n      this.collapsed = false;\n    }\n  }\n\n  private observeSidebarItems() {\n    if (!this.sidebarItems?.length || !this.mutationObserver) return;\n    this.sidebarItems.forEach(item =>\n      this.mutationObserver!.observe(item, {\n        attributes: true,\n        attributeFilter: ['active'],\n      })\n    );\n  }\n\n  private syncActiveFromItems() {\n    if (!this.sidebarItems?.length) return;\n    const activeIndex = this.sidebarItems.findIndex(item =>\n      item.hasAttribute('active')\n    );\n    if (activeIndex !== -1 && activeIndex !== this.activeIndex) {\n      this.activeIndex = activeIndex;\n      this.requestUpdate();\n    }\n    this.updateTabIndices();\n  }\n\n  \n  private get focusableItems(): HTMLElement[] {\n    return this.sidebarItems.filter(\n      item => !item.hasAttribute('disabled')\n    );\n  }\n\n  private updateTabIndices() {\n    const items = this.sidebarItems;\n    if (!items.length) return;\n\n    const focusTarget =\n      this.activeIndex >= 0 ? items[this.activeIndex] : null;\n\n    items.forEach(item => {\n      if (item.hasAttribute('disabled')) {\n        item.setAttribute('tabindex', '-1');\n      } else if (item === focusTarget) {\n        item.setAttribute('tabindex', '0');\n      } else if (!focusTarget && item === this.focusableItems[0]) {\n        item.setAttribute('tabindex', '0');\n      } else {\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  private focusItem(item: HTMLElement) {\n    const items = this.sidebarItems;\n    items.forEach(el => el.setAttribute('tabindex', '-1'));\n    item.setAttribute('tabindex', '0');\n    item.focus();\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.collapsed) return;\n\n    const focusable = this.focusableItems;\n    if (!focusable.length) return;\n\n    const currentFocus = this.sidebarItems.find(\n      item =>\n        item === document.activeElement ||\n        item === this.shadowRoot?.activeElement ||\n        item.matches(':focus-within')\n    );\n\n    const currentIndex = currentFocus\n      ? focusable.indexOf(currentFocus)\n      : -1;\n\n    let nextIndex: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        nextIndex =\n          currentIndex < focusable.length - 1 ? currentIndex + 1 : 0;\n        break;\n\n      case 'ArrowUp':\n        nextIndex =\n          currentIndex > 0 ? currentIndex - 1 : focusable.length - 1;\n        break;\n\n      case 'Home':\n        nextIndex = 0;\n        break;\n\n      case 'End':\n        nextIndex = focusable.length - 1;\n        break;\n\n      case 'Enter':\n      case ' ':\n        return;\n\n      default:\n        return;\n    }\n\n    event.preventDefault();\n\n    if (nextIndex !== null && focusable[nextIndex]) {\n      this.focusItem(focusable[nextIndex]);\n    }\n  };\n\n  private handleItemSelect = (event: CustomEvent) => {\n    const selectedItem = event.detail.item as HTMLElement;\n    const index = this.sidebarItems.indexOf(selectedItem);\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    this.updateTabIndices();\n\n    this.dispatchEvent(\n      new CustomEvent('nile-change', {\n        detail: { selectedItem, index },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.requestUpdate();\n  };\n\n  private toggleCollapse() {\n    if (this.fixed) return;\n    this.collapsed = !this.collapsed;\n\n    this.dispatchEvent(\n      new CustomEvent('nile-toggle', {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleMenuItemClick(index: number) {\n    const selectedItem = this.sidebarItems[index];\n    if (!selectedItem || selectedItem.hasAttribute('disabled')) return;\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    const text = selectedItem.textContent?.trim() || '';\n    const href = (selectedItem as any).href;\n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        detail: { item: selectedItem, href, text },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (href) window.location.href = href;\n\n    this.requestUpdate();\n  }\n\n  private get menuItemsTemplate() {\n    if (!this.sidebarItems?.length) return null;\n\n    const tooltipPlacement = this.placement === 'right' ? 'left' : 'right';\n\n    return this.sidebarItems.map((item, index) => {\n      const shouldShowTooltip = (item as any).tooltip;\n      const isTruncated =\n        item.scrollWidth > item.clientWidth ||\n        item.scrollHeight > item.clientHeight;\n  \n      const content = html`\n        <nile-side-bar-action-menu-item\n          ?disabled=${item.hasAttribute('disabled')}\n          ?active=${this.activeIndex === index}\n          @click=${() => this.handleMenuItemClick(index)}\n        >\n          ${item.textContent}\n        </nile-side-bar-action-menu-item>\n      `;\n      return shouldShowTooltip || isTruncated\n        ? html`\n            <nile-tooltip\n              content=${item.textContent?.trim() || ''}\n              hoist\n              placement=${tooltipPlacement}\n            >\n              ${content}\n            </nile-tooltip>\n          `\n        : content;\n    });\n  }\n  \n  \n  \n\n  public render(): TemplateResult {\n    const isRight = this.placement === 'right';\n    const collapsedIcon = isRight ? 'menu_open' : 'menu_close';\n    const expandedIcon = isRight ? 'menu_close' : 'menu_open';\n    const actionPlacement = isRight ? 'bottom-end' : 'bottom-start';\n\n    return html`\n      <div class=\"sidebar\" part=\"base\">\n        <div class=\"sidebar-header\" part=\"header\">\n          ${!this.fixed\n            ? this.collapsed\n              ? html`\n                  <nile-side-bar-action\n                    class=\"toggle-action\"\n                    placement=${actionPlacement}\n                    hoist\n                    open\n                    triggerDropdown=\"hover\"\n                  >\n                    <nile-button\n                      slot=\"trigger\"\n                      class=\"toggle-btn\"\n                      variant=\"tertiary\"\n                      @click=${this.toggleCollapse}\n                    >\n                      <nile-icon name=${collapsedIcon}></nile-icon>\n                    </nile-button>\n                    <nile-side-bar-action-menu>\n                      ${this.menuItemsTemplate}\n                    </nile-side-bar-action-menu>\n                  </nile-side-bar-action>\n                `\n              : html`\n                  <nile-button\n                    class=\"toggle-btn\"\n                    variant=\"tertiary\"\n                    @click=${this.toggleCollapse}\n                  >\n                    <nile-icon name=${expandedIcon}></nile-icon>\n                  </nile-button>\n                `\n            : null}\n        </div>\n\n        <nav\n          class=\"sidebar-nav\"\n          role=\"navigation\"\n          aria-label=\"Sidebar\"\n          style=${this.collapsed ? 'display:none;' : ''}\n          part=\"nav-items\"\n        >\n          <slot\n            @slotchange=${() => {\n              this.requestUpdate();\n              this.observeSidebarItems();\n              this.syncActiveFromItems();\n            }}\n          ></slot>\n        </nav>\n      </div>\n    `;\n  }\n}\n\nexport default NileInlineSidebar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar': NileInlineSidebar;\n  }\n}\n"]}
+{"version":3,"file":"nile-inline-sidebar.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar/nile-inline-sidebar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2025\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { html, CSSResultArray, TemplateResult, nothing, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styles } from './nile-inline-sidebar.css';\nimport NileElement from '../internal/nile-element';\nimport { drag } from '../internal/drag';\nimport { clamp } from '../internal/math';\nimport NileInlineSidebarItem from '../nile-inline-sidebar-item/nile-inline-sidebar-item';\n\n/**\n * Nile inline sidebar component.\n *\n * @tag nile-inline-sidebar\n */\n@customElement('nile-inline-sidebar')\nexport class NileInlineSidebar extends NileElement {\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true }) fixed = false;\n\n  @property({ type: Boolean, reflect: true }) showTooltip = false;\n\n  /** The side on which the sidebar is placed. */\n  @property({ type: String, reflect: true }) placement: 'left' | 'right' = 'left';\n\n  /** Enables a draggable resize handle on the sidebar's trailing edge. */\n  @property({ type: Boolean, reflect: true }) resizable = false;\n\n  /** Current sidebar width in pixels when resizable is enabled. */\n  @property({ type: Number, attribute: true }) sidebarWidth = 216;\n\n  /** Minimum sidebar width in pixels. */\n  @property({ type: Number, attribute: true }) minSidebarWidth = 120;\n\n  @property({ type: Boolean, attribute: true }) showToggleBtn = true;\n\n  /** Maximum sidebar width in pixels. */\n  @property({ type: Number, attribute: true}) maxSidebarWidth = 400;\n\n  @property({ type: String, reflect: true, attribute: true }) variant?: 'minimal' | 'rich' = 'minimal';\n\n  @state() private activeIndex: number = -1;\n\n  @query('slot') private defaultSlot!: HTMLSlotElement;\n\n  private mutationObserver?: MutationObserver;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private get sidebarItems(): HTMLElement[] {\n    if (!this.defaultSlot) return [];\n    const assigned = this.defaultSlot.assignedElements({ flatten: true });\n    const items = assigned.flatMap(el =>\n      el.tagName.toLowerCase() === 'nile-inline-sidebar-item'\n        ? [el]\n        : Array.from(el.querySelectorAll('nile-inline-sidebar-item'))\n    );\n    return items as HTMLElement[];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('nile-click', this.handleItemSelect);\n    this.addEventListener('keydown', this.handleKeyDown);\n    this.mutationObserver = new MutationObserver(() =>\n      this.syncActiveFromItems()\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.mutationObserver?.disconnect();\n    this.removeEventListener('nile-click', this.handleItemSelect);\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  firstUpdated() {\n    this.observeSidebarItems();\n    this.syncActiveFromItems();\n    this.syncChildSidebarItemVariants();\n\n    if (this.fixed) {\n      this.collapsed = false;\n    }\n  }\n\n  updated(changedProperties: PropertyValues) {\n    super.updated(changedProperties);\n    if (changedProperties.has('variant')) {\n      this.syncChildSidebarItemVariants();\n    }\n  }\n\n  /** Pushes sidebar `variant` onto each item (rich vs minimal) so layout stays in sync with slotted content. */\n  private syncChildSidebarItemVariants() {\n    const items = this.querySelectorAll(\n      'nile-inline-sidebar-item',\n    ) as NodeListOf<NileInlineSidebarItem>;\n    const v = this.variant ?? 'minimal';\n    items.forEach(item => {\n      item.variant = v;\n    });\n  }\n\n  private observeSidebarItems() {\n    if (!this.sidebarItems?.length || !this.mutationObserver) return;\n    this.sidebarItems.forEach(item =>\n      this.mutationObserver!.observe(item, {\n        attributes: true,\n        attributeFilter: ['active'],\n      })\n    );\n  }\n\n  private syncActiveFromItems() {\n    if (!this.sidebarItems?.length) return;\n    const activeIndex = this.sidebarItems.findIndex(item =>\n      item.hasAttribute('active')\n    );\n    if (activeIndex !== -1 && activeIndex !== this.activeIndex) {\n      this.activeIndex = activeIndex;\n      this.requestUpdate();\n    }\n    this.updateTabIndices();\n  }\n\n  \n  private get focusableItems(): HTMLElement[] {\n    return this.sidebarItems.filter(\n      item => !item.hasAttribute('disabled')\n    );\n  }\n\n  private updateTabIndices() {\n    const items = this.sidebarItems;\n    if (!items.length) return;\n\n    const focusTarget =\n      this.activeIndex >= 0 ? items[this.activeIndex] : null;\n\n    items.forEach(item => {\n      if (item.hasAttribute('disabled')) {\n        item.setAttribute('tabindex', '-1');\n      } else if (item === focusTarget) {\n        item.setAttribute('tabindex', '0');\n      } else if (!focusTarget && item === this.focusableItems[0]) {\n        item.setAttribute('tabindex', '0');\n      } else {\n        item.setAttribute('tabindex', '-1');\n      }\n    });\n  }\n\n  private focusItem(item: HTMLElement) {\n    const items = this.sidebarItems;\n    items.forEach(el => el.setAttribute('tabindex', '-1'));\n    item.setAttribute('tabindex', '0');\n    item.focus();\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (this.collapsed) return;\n\n    const focusable = this.focusableItems;\n    if (!focusable.length) return;\n\n    const currentFocus = this.sidebarItems.find(\n      item =>\n        item === document.activeElement ||\n        item === this.shadowRoot?.activeElement ||\n        item.matches(':focus-within')\n    );\n\n    const currentIndex = currentFocus\n      ? focusable.indexOf(currentFocus)\n      : -1;\n\n    let nextIndex: number | null = null;\n\n    switch (event.key) {\n      case 'ArrowDown':\n        nextIndex =\n          currentIndex < focusable.length - 1 ? currentIndex + 1 : 0;\n        break;\n\n      case 'ArrowUp':\n        nextIndex =\n          currentIndex > 0 ? currentIndex - 1 : focusable.length - 1;\n        break;\n\n      case 'Home':\n        nextIndex = 0;\n        break;\n\n      case 'End':\n        nextIndex = focusable.length - 1;\n        break;\n\n      case 'Enter':\n      case ' ':\n        return;\n\n      default:\n        return;\n    }\n\n    event.preventDefault();\n\n    if (nextIndex !== null && focusable[nextIndex]) {\n      this.focusItem(focusable[nextIndex]);\n    }\n  };\n\n  private handleItemSelect = (event: CustomEvent) => {\n    const selectedItem = event.detail.item as HTMLElement;\n    const index = this.sidebarItems.indexOf(selectedItem);\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    this.updateTabIndices();\n\n    this.dispatchEvent(\n      new CustomEvent('nile-change', {\n        detail: { selectedItem, index },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    this.requestUpdate();\n  };\n\n  private toggleCollapse() {\n    if (this.fixed) return;\n    this.collapsed = !this.collapsed;\n\n    this.dispatchEvent(\n      new CustomEvent('nile-toggle', {\n        detail: { collapsed: this.collapsed },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleMenuItemClick(index: number) {\n    const selectedItem = this.sidebarItems[index];\n    if (!selectedItem || selectedItem.hasAttribute('disabled')) return;\n\n    this.sidebarItems.forEach(\n      (item, i) => ((item as any).active = i === index)\n    );\n    this.activeIndex = index;\n    const text = selectedItem.textContent?.trim() || '';\n    const href = (selectedItem as any).href;\n    this.dispatchEvent(\n      new CustomEvent('nile-click', {\n        detail: { item: selectedItem, href, text },\n        bubbles: true,\n        composed: true,\n      })\n    );\n\n    if (href) window.location.href = href;\n\n    this.requestUpdate();\n  }\n\n  private handleSeparatorDrag(event: PointerEvent) {\n    if (!this.resizable || this.collapsed) return;\n    if (event.cancelable) event.preventDefault();\n\n    const isRight = this.placement === 'right';\n\n    this.style.setProperty('--sidebar-transition', 'none');\n\n    drag(this, {\n      onMove: (x: number) => {\n        const hostRect = this.getBoundingClientRect();\n        let newWidth: number;\n\n        if (isRight) {\n          newWidth = hostRect.width - x;\n        } else {\n          newWidth = x;\n        }\n\n        this.sidebarWidth = clamp(newWidth, this.minSidebarWidth, this.maxSidebarWidth);\n        this.emit('nile-sidebar-resize', { width: this.sidebarWidth });\n      },\n      onStop: () => {\n        this.style.removeProperty('--sidebar-transition');\n      },\n      initialEvent: event,\n    });\n  }\n\n  private handleSeparatorKeyDown(event: KeyboardEvent) {\n    if (!this.resizable || this.collapsed) return;\n\n    const step = event.shiftKey ? 10 : 1;\n    let newWidth = this.sidebarWidth;\n\n    switch (event.key) {\n      case 'ArrowLeft':\n        newWidth -= step;\n        break;\n      case 'ArrowRight':\n        newWidth += step;\n        break;\n      case 'Home':\n        newWidth = this.minSidebarWidth;\n        break;\n      case 'End':\n        newWidth = this.maxSidebarWidth;\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n    this.sidebarWidth = clamp(newWidth, this.minSidebarWidth, this.maxSidebarWidth);\n    this.emit('nile-sidebar-resize', { width: this.sidebarWidth });\n  }\n\n  private get separatorTemplate() {\n    if (!this.resizable || this.collapsed) return nothing;\n\n    return html`\n      <div\n        class=\"separator\"\n        part=\"separator\"\n        tabindex=\"0\"\n        role=\"separator\"\n        aria-valuenow=${this.sidebarWidth}\n        aria-valuemin=${this.minSidebarWidth}\n        aria-valuemax=${this.maxSidebarWidth}\n        aria-label=\"Resize sidebar\"\n        @keydown=${this.handleSeparatorKeyDown}\n        @mousedown=${this.handleSeparatorDrag}\n        @touchstart=${this.handleSeparatorDrag}\n      ></div>\n    `;\n  }\n\n  private get menuItemsTemplate() {\n    if (!this.sidebarItems?.length) return null;\n\n    const tooltipPlacement = this.placement === 'right' ? 'left' : 'right';\n\n    return this.sidebarItems.map((item, index) => {\n      const shouldShowTooltip = (item as any).tooltip;\n      const isTruncated =\n        item.scrollWidth > item.clientWidth ||\n        item.scrollHeight > item.clientHeight;\n  \n      const content = html`\n        <nile-side-bar-action-menu-item\n          ?disabled=${item.hasAttribute('disabled')}\n          ?active=${this.activeIndex === index}\n          @click=${() => this.handleMenuItemClick(index)}\n        >\n          ${item.textContent}\n        </nile-side-bar-action-menu-item>\n      `;\n      return shouldShowTooltip || isTruncated\n        ? html`\n            <nile-tooltip\n              content=${item.textContent?.trim() || ''}\n              hoist\n              placement=${tooltipPlacement}\n            >\n              ${content}\n            </nile-tooltip>\n          `\n        : content;\n    });\n  }\n  \n  \n  \n\n  public render(): TemplateResult {\n    const isRight = this.placement === 'right';\n    const collapsedIcon = isRight ? 'menu_open' : 'menu_close';\n    const expandedIcon = isRight ? 'menu_close' : 'menu_open';\n    const actionPlacement = isRight ? 'bottom-end' : 'bottom-start';\n\n    const sidebarStyle = !this.collapsed\n      ? `width: ${this.sidebarWidth}px;`\n      : '';\n\n    return html`\n      <div class=\"sidebar\" part=\"base\" style=${sidebarStyle}>\n        <div class=\"sidebar-header\" part=\"header\">\n          ${!this.fixed\n            ? this.collapsed\n              ? html`\n                  <nile-side-bar-action\n                    class=\"toggle-action\"\n                    placement=${actionPlacement}\n                    hoist\n                    open\n                    triggerDropdown=\"hover\"\n                  >\n                    ${this.showToggleBtn\n                      ? html`\n                          <nile-button\n                            slot=\"trigger\"\n                            class=\"toggle-btn\"\n                            variant=\"tertiary\"\n                            @click=${this.toggleCollapse}\n                          >\n                            <nile-icon name=${collapsedIcon}></nile-icon>\n                          </nile-button>\n                        `\n                      : nothing}\n                    <nile-side-bar-action-menu>\n                      ${this.menuItemsTemplate}\n                    </nile-side-bar-action-menu>\n                  </nile-side-bar-action>\n                `\n              : html`\n                ${this.showToggleBtn\n                  ? html` \n                    <nile-button\n                      class=\"toggle-btn\"\n                      variant=\"tertiary\"\n                      @click=${this.toggleCollapse}\n                    >\n                      <nile-icon name=${expandedIcon}></nile-icon>\n                    </nile-button>\n                  `\n                  : nothing}\n                `\n            : null}\n        </div>\n\n        <nav\n          class=${classMap({ 'sidebar-nav': true, 'sidebar-nav--rich': this.variant === 'rich' })}\n          role=\"navigation\"\n          aria-label=\"Sidebar\"\n          style=${this.collapsed ? 'display:none;' : ''}\n          part=\"nav-items\"\n        >\n          <slot\n            @slotchange=${() => {\n              this.requestUpdate();\n              this.observeSidebarItems();\n              this.syncActiveFromItems();\n              this.syncChildSidebarItemVariants();\n            }}\n          ></slot>\n        </nav>\n      </div>\n      ${this.separatorTemplate}\n    `;\n  }\n}\n\nexport default NileInlineSidebar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-inline-sidebar': NileInlineSidebar;\n  }\n}\n"]}

package/dist/src/nile-inline-sidebar-group/nile-inline-sidebar-group.css.d.ts

@@ -4,6 +4,7 @@
 * This source code is licensed under the BSD-3-Clause license found in the
 * LICENSE file in the root directory of this source tree.
 */
+/** Enterprise (`--nile-*`) primary, NxtGen (`--ng-*`) fallback. */
 export declare const styles: import("lit").CSSResult;
 declare const _default: import("lit").CSSResult[];
 export default _default;

package/dist/src/nile-inline-sidebar-group/nile-inline-sidebar-group.css.js

@@ -5,6 +5,7 @@
 * LICENSE file in the root directory of this source tree.
 */
 import { css } from 'lit';
+/** Enterprise (`--nile-*`) primary, NxtGen (`--ng-*`) fallback. */
 export const styles = css `
 :host {
   display: block;
@@ -13,10 +14,9 @@ export const styles = css `
 .group {
   display: flex;
   flex-direction: column;
-  gap: var(--nile-spacing-xs);
+  gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
 }
 
-
 :host([divider="false"]) .group {
   border-bottom: none;
   margin-bottom: 0;
@@ -24,18 +24,18 @@ export const styles = css `
 }
 
 .group-label {
-  font-size: var(--nile-type-scale-3);
-  font-weight: var(--nile-font-weight-semibold);
+  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
   text-transform: uppercase;
-  color:   var(--nile-colors-neutral-500);  
-  margin: var(--nile-spacing-xs) 0 var(--nile-spacing-xs) var(--nile-spacing-md);
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
+  margin: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0 var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));
   letter-spacing: 0.05em;
 }
 
 .group-items {
   display: flex;
   flex-direction: column;
-  gap: var(--nile-spacing-xs);
+  gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
 }
 `;
 export default [styles];

package/dist/src/nile-inline-sidebar-group/nile-inline-sidebar-group.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-inline-sidebar-group.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-group/nile-inline-sidebar-group.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2025\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport { css } from 'lit';\n\nexport const styles = css`\n:host {\n  display: block;\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nile-spacing-xs);\n}\n\n\n:host([divider=\"false\"]) .group {\n  border-bottom: none;\n  margin-bottom: 0;\n  padding-bottom: 0;\n}\n\n.group-label {\n  font-size: var(--nile-type-scale-3);\n  font-weight: var(--nile-font-weight-semibold);\n  text-transform: uppercase;\n  color:   var(--nile-colors-neutral-500);  \n  margin: var(--nile-spacing-xs) 0 var(--nile-spacing-xs) var(--nile-spacing-md);\n  letter-spacing: 0.05em;\n}\n\n.group-items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nile-spacing-xs);\n}\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-inline-sidebar-group.css.js","sourceRoot":"","sources":["../../../src/nile-inline-sidebar-group/nile-inline-sidebar-group.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,mEAAmE;AACnE,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2025\n*\n* This source code is licensed under the BSD-3-Clause license found in the\n* LICENSE file in the root directory of this source tree.\n*/\n\nimport { css } from 'lit';\n\n/** Enterprise (`--nile-*`) primary, NxtGen (`--ng-*`) fallback. */\nexport const styles = css`\n:host {\n  display: block;\n}\n\n.group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n}\n\n:host([divider=\"false\"]) .group {\n  border-bottom: none;\n  margin-bottom: 0;\n  padding-bottom: 0;\n}\n\n.group-label {\n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n  text-transform: uppercase;\n  color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));\n  margin: var(--nile-spacing-xs, var(--ng-spacing-xs)) 0 var(--nile-spacing-xs, var(--ng-spacing-xs)) var(--nile-spacing-md, var(--ng-spacing-md));\n  letter-spacing: 0.05em;\n}\n\n.group-items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-inline-sidebar-item/nile-inline-sidebar-item.css.d.ts

@@ -5,6 +5,6 @@
 * LICENSE file in the root directory of this source tree.
 */
 /**
- * InlinesidebarItem CSS
+ * InlinesidebarItem CSS — Enterprise (`--nile-*`) primary, NxtGen (`--ng-*`) fallback.
  */
 export declare const styles: import("lit").CSSResult;