@aquera/nile-elements 1.6.6 → 1.6.8

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -119,7 +119,12 @@
     "./nile-inline-sidebar-item": "./dist/src/nile-inline-sidebar-item/index.js",
     "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js",
     "./nile-qr-code": "./dist/src/nile-qr-code/index.js",
-    "./nile-floating-panel": "./dist/src/nile-floating-panel/index.js"
+    "./nile-floating-panel": "./dist/src/nile-floating-panel/index.js",
+    "./nile-inline-sidebar-item-header": "./dist/src/nile-inline-sidebar-item-header/index.js",
+    "./nile-inline-sidebar-item-body": "./dist/src/nile-inline-sidebar-item-body/index.js",
+    "./nile-nav-tab-group": "./dist/src/nile-nav-tab-group/index.js",
+    "./nile-nav-tab": "./dist/src/nile-nav-tab/index.js",
+    "./nile-nav-tab-panel": "./dist/src/nile-nav-tab-panel/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -224,4 +229,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -112,8 +112,15 @@ export { NileSideBarActionMenu } from './nile-side-bar-action-menu';
 export { NileInlineSidebarGroup } from './nile-inline-sidebar-group';
 export { NileInlineSidebar } from './nile-inline-sidebar';
 export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
+export { NileInlineSidebarPanel } from './nile-inline-sidebar-panel';
+export { NileInlineSidebarPanelGroup } from './nile-inline-sidebar-panel-group';
 export { NileliteTooltip } from './nile-lite-tooltip';
 export { NileSideBarPanel } from './nile-side-bar-panel';
 export { NileDetail } from './nile-detail';
 export { NileQrCode } from './nile-qr-code';
+export { NileNavTab } from './nile-nav-tab';
+export { NileNavTabGroup } from './nile-nav-tab-group';
+export { NileNavTabPanel } from './nile-nav-tab-panel';
 export { NileFloatingPanel } from './nile-floating-panel';
+export { NileInlineSidebarItemHeader } from './nile-inline-sidebar-item-header';
+export { NileInlineSidebarItemBody } from './nile-inline-sidebar-item-body';

package/src/internal/enum.ts

@@ -39,4 +39,11 @@ export enum Nile_Events {
   NILE_CLEAR_ALL_SELECTION = "nile-clear-all-selection",
   NILE_INPUT = "nile-input",
   NILE_COMPLETE = "nile-complete",
-}
+}
+
+export enum MouseKey {
+  META = 'metaKey',
+  CTRL = 'ctrlKey',
+  SHIFT = 'shiftKey',
+  ALT = 'altKey',
+}

package/src/nile-inline-sidebar/nile-inline-sidebar.css.ts

@@ -7,23 +7,28 @@
 
 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;
   }
@@ -32,7 +37,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 {
@@ -48,10 +56,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 {
@@ -63,8 +120,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) {
@@ -72,12 +129,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) {
@@ -106,7 +163,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 {
@@ -120,6 +178,6 @@ 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));
   }
 `;

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

@@ -5,10 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, CSSResultArray, TemplateResult } from 'lit';
+import { html, CSSResultArray, TemplateResult, nothing, PropertyValues } 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';
+import NileInlineSidebarItem from '../nile-inline-sidebar-item/nile-inline-sidebar-item';
 
 /**
  * Nile inline sidebar component.
@@ -26,6 +30,22 @@ export class NileInlineSidebar extends NileElement {
   /** The side on which the sidebar is placed. */
   @property({ type: String, reflect: true }) placement: 'left' | 'right' = 'left';
 
+  /** Enables a draggable resize handle on the sidebar's trailing edge. */
+  @property({ type: Boolean, reflect: true }) resizable = false;
+
+  /** Current sidebar width in pixels when resizable is enabled. */
+  @property({ type: Number, attribute: true }) sidebarWidth = 216;
+
+  /** Minimum sidebar width in pixels. */
+  @property({ type: Number, attribute: true }) minSidebarWidth = 120;
+
+  @property({ type: Boolean, attribute: true }) showToggleBtn = true;
+
+  /** Maximum sidebar width in pixels. */
+  @property({ type: Number, attribute: true}) maxSidebarWidth = 400;
+
+  @property({ type: String, reflect: true, attribute: true }) variant?: 'minimal' | 'rich' = 'minimal';
+
   @state() private activeIndex: number = -1;
 
   @query('slot') private defaultSlot!: HTMLSlotElement;
@@ -66,12 +86,31 @@ export class NileInlineSidebar extends NileElement {
   firstUpdated() {
     this.observeSidebarItems();
     this.syncActiveFromItems();
+    this.syncChildSidebarItemVariants();
 
     if (this.fixed) {
       this.collapsed = false;
     }
   }
 
+  updated(changedProperties: PropertyValues) {
+    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. */
+  private syncChildSidebarItemVariants() {
+    const items = this.querySelectorAll(
+      'nile-inline-sidebar-item',
+    ) as NodeListOf<NileInlineSidebarItem>;
+    const v = this.variant ?? 'minimal';
+    items.forEach(item => {
+      item.variant = v;
+    });
+  }
+
   private observeSidebarItems() {
     if (!this.sidebarItems?.length || !this.mutationObserver) return;
     this.sidebarItems.forEach(item =>
@@ -238,6 +277,83 @@ export class NileInlineSidebar extends NileElement {
     this.requestUpdate();
   }
 
+  private handleSeparatorDrag(event: PointerEvent) {
+    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: number) => {
+        const hostRect = this.getBoundingClientRect();
+        let newWidth: number;
+
+        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,
+    });
+  }
+
+  private handleSeparatorKeyDown(event: KeyboardEvent) {
+    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 });
+  }
+
+  private 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>
+    `;
+  }
+
   private get menuItemsTemplate() {
     if (!this.sidebarItems?.length) return null;
 
@@ -281,8 +397,12 @@ export class NileInlineSidebar extends NileElement {
     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
@@ -294,33 +414,41 @@ export 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;' : ''}
@@ -331,10 +459,12 @@ export class NileInlineSidebar extends NileElement {
               this.requestUpdate();
               this.observeSidebarItems();
               this.syncActiveFromItems();
+              this.syncChildSidebarItemVariants();
             }}
           ></slot>
         </nav>
       </div>
+      ${this.separatorTemplate}
     `;
   }
 }

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

@@ -7,6 +7,7 @@
 
 import { css } from 'lit';
 
+/** Enterprise (`--nile-*`) primary, NxtGen (`--ng-*`) fallback. */
 export const styles = css`
 :host {
   display: block;
@@ -15,10 +16,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;
@@ -26,18 +26,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));
 }
 `;
 

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

@@ -8,42 +8,43 @@
 import { css } from 'lit';
 
 /**
- * InlinesidebarItem CSS
+ * InlinesidebarItem CSS — Enterprise (`--nile-*`) primary, NxtGen (`--ng-*`) fallback.
  */
 export const styles = css`
 :host {
   display: block;
-  font-family: var(--nile-font-family-sans-serif);
-  font-size: var(--nile-type-scale-3);
-  color: var(--nile-colors-dark-900);
+  font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   cursor: pointer;
   user-select: none;
 }
 
 .item {
-  padding: var(--nile-spacing-lg) var(--nile-spacing-md);
-  border-radius: var(--nile-radius-sm);
+  padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-md, var(--ng-spacing-md));
+  border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
   transition: background 0.2s, color 0.2s;
 }
 
- 
 :host(:not([disabled])) .item:hover {
-  background: var(--nile-colors-neutral-400);
+  background: var(--nile-colors-neutral-400, var(--ng-colors-bg-tertiary));
 }
 
- 
 :host([active]) .item {
-  background: var(--nile-colors-primary-100);
-  font-weight: 500;
+  background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
+  font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
+  color: var(--nile-colors-primary-700, var(--ng-colors-text-brand-secondary-700));
+}
+:host([active]) .item--rich {
+  border-right: 2px solid var(--nile-colors-primary-600, var(--ng-colors-border-brand));
 }
 
 :host([active]) .item:hover {
-  background: var(--nile-colors-primary-100);
+  background: var(--nile-colors-primary-100, var(--ng-colors-bg-brand-secondary));
 }
 
- 
 :host([disabled]) {
-  color:   var(--nile-colors-neutral-500);  
+  color: var(--nile-colors-neutral-500, var(--ng-colors-text-disabled));
   cursor: not-allowed;
 }
 
@@ -65,7 +66,4 @@ a {
     color: inherit;
     text-decoration: none;
   }
-
- 
-
 `;