@aquera/nile-elements 1.3.8-beta-1.2 → 1.3.9-beta-1.0

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.3.8-beta-1.2",
+  "version": "1.3.9-beta-1.0",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -115,7 +115,8 @@
     "./nile-inline-sidebar-group": "./dist/src/nile-inline-sidebar-group/index.js",
     "./nile-inline-sidebar": "./dist/src/nile-inline-sidebar/index.js",
     "./nile-inline-sidebar-item": "./dist/src/nile-inline-sidebar-item/index.js",
-    "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js"
+    "./nile-lite-tooltip": "./dist/src/nile-lite-tooltip/index.js",
+    "./nile-side-bar-panel": "./dist/src/nile-side-bar-panel/index.js"
   },
   "scripts": {
     "analyze": "cem analyze --litelement",
@@ -220,4 +221,4 @@
       "prettier --write"
     ]
   }
-}
+}

package/src/index.ts

@@ -109,3 +109,5 @@ export { NileInlineSidebarGroup } from './nile-inline-sidebar-group';
 export { NileInlineSidebar } from './nile-inline-sidebar';
 export { NileInlineSidebarItem } from './nile-inline-sidebar-item';
 export { NileliteTooltip } from './nile-lite-tooltip';
+
+export { NileSideBarPanel } from './nile-side-bar-panel';

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

@@ -50,8 +50,8 @@ export const styles = css`
     flex-direction: column;
     gap: var(--nile-spacing-xs);
     padding-right: var(--nile-spacing-xl);
-    padding-top: var(--nile-spacing-2xl);
-    padding-bottom: var(--nile-spacing-2xl);
+    padding-top: var(--nile-spacing-3xl);
+    padding-bottom: var(--nile-spacing-3xl);
   }
 
   nile-side-bar-action-menu {
@@ -72,6 +72,12 @@ export const styles = css`
     margin-left: 0;
     margin-right: 0;
     border-radius: 0;
+    color: black;
+  }
+
+  nile-side-bar-action-menu-item[active]::part(base):hover {
+    background: var(--nile-colors-primary-100);
+    color: black;
   }
 
   nile-side-bar-action-menu-item::part(label) {

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

@@ -146,8 +146,13 @@ export class NileInlineSidebar extends NileElement {
 
   private get menuItemsTemplate() {
     if (!this.sidebarItems?.length) return null;
-
+  
     return this.sidebarItems.map((item, index) => {
+      const shouldShowTooltip = (item as any).tooltip;
+      const isTruncated =
+        item.scrollWidth > item.clientWidth ||
+        item.scrollHeight > item.clientHeight;
+  
       const content = html`
         <nile-side-bar-action-menu-item
           ?disabled=${item.hasAttribute('disabled')}
@@ -157,16 +162,22 @@ export class NileInlineSidebar extends NileElement {
           ${item.textContent}
         </nile-side-bar-action-menu-item>
       `;
-
-      return this.showTooltip
+      return shouldShowTooltip || isTruncated
         ? html`
-            <nile-tooltip content=${item.textContent} hoist placement="right">
+            <nile-inline-tooltip
+              content=${item.textContent?.trim() || ''}
+              hoist
+              placement="right"
+            >
               ${content}
-            </nile-tooltip>
+            </nile-inline-tooltip>
           `
         : content;
     });
   }
+  
+  
+  
 
   public render(): TemplateResult {
     return html`

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

@@ -37,6 +37,10 @@ export const styles = css`
   font-weight: 500;
 }
 
+:host([active]) .item:hover {
+  background: var(--nile-colors-primary-100);
+}
+
  
 :host([disabled]) {
   color:   var(--nile-colors-neutral-500);  
@@ -62,4 +66,6 @@ a {
     text-decoration: none;
   }
 
+ 
+
 `;

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

@@ -29,6 +29,7 @@ export class NileInlineSidebarItem extends NileElement {
   @property({ type: Boolean, reflect: true }) active = false;
   @property({ type: Boolean, reflect: true }) disabled = false;
   @property({ type: String }) href?: string;
+  @property({ type: Boolean, reflect: true }) tooltip = false;
 
   public static get styles(): CSSResultArray {
     return [styles];

package/src/nile-side-bar/nile-side-bar.css.ts

@@ -18,8 +18,9 @@ export const styles = css`
   width: var(--sidebar-width);
   display: flex;
   flex-direction: column;
-  background-color: var(--nile-colors-neutral-100);
-  overflow: auto;
+  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));
+  height: 100%;
+  overflow: hidden;  
   transition: width 0.25s ease, transform 0.25s ease;
   z-index: 1000;
 }
@@ -45,15 +46,6 @@ export const styles = css`
   transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));
 }
 
- 
- 
-::slotted(*) {
-  display: block;
-  min-width: 0;
-  /* padding: var(--nile-spacing-xl) */
-}
-
- 
 :host {
   scrollbar-width: thin;
   scrollbar-color: #64748b transparent;
@@ -69,29 +61,32 @@ export const styles = css`
   background-color: #64748b;
   border-radius: 10px;
 }
-:host([fullheight]) {
-  position: fixed;
-  top: 0;
-  height: 100dvh;
+
+ 
+.scroll-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-:host(:not([fullheight])) {
-  position: relative;
-  height: 100%;
+ 
+::slotted(nile-side-bar-header) {
+  flex-shrink: 0;
 }
+
 ::slotted(nile-side-bar-footer) {
-  margin-top: auto;  
-  flex-shrink: 0;   
-}
-:host([collapsed]) ::slotted(nile-side-bar-footer-item) .footer-item {
-  justify-content: center;
-  padding: 0;
+  flex-shrink: 0;
+  position: sticky;
+  bottom: 0;
+  margin-top: auto;
 }
 
-:host([collapsed]) ::slotted(nile-side-bar-footer-item) ::slotted([slot='text']),
-:host([collapsed]) ::slotted(nile-side-bar-footer-item) ::slotted([slot='action']) {
-  display: none;
-}
+ 
+ 
+
+
 
 
 

package/src/nile-side-bar/nile-side-bar.ts

@@ -54,8 +54,15 @@ export class NileSideBar extends NileElement {
   }
 
   public render(): TemplateResult {
-    return html`<slot></slot>`;
+    return html`
+      <slot name="header"></slot>
+      <div class="scroll-container">
+        <slot></slot>
+      </div>
+      <slot name="footer"></slot>
+    `;
   }
+  
 }
 
 export default NileSideBar;

package/src/nile-side-bar-expand/nile-side-bar-expand.css.ts

@@ -19,8 +19,8 @@ export const styles = css`
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 38px;
+  height: 38px;
   border: none;
   background: transparent;
   color: inherit;
@@ -29,9 +29,7 @@ export const styles = css`
   transition: background-color 0.2s ease;
 }
 
-.expand-btn:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
+ 
 
 nile-tooltip::part(body) {
     width: max-content;

package/src/nile-side-bar-expand/nile-side-bar-expand.ts

@@ -13,6 +13,8 @@ import NileElement from '../internal/nile-element';
 export class NileSideBarExpand extends NileElement {
   @property({ type: Boolean, reflect: true })
   collapsed: boolean = false;
+  @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';
+  @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';
 
   public static get styles(): CSSResultArray {
     return [styles];
@@ -46,14 +48,14 @@ export class NileSideBarExpand extends NileElement {
       <button class="expand-btn" @click=${this.toggleSidebar}>
         ${this.collapsed
           ? html`
-              <nile-tooltip placement="right" hoist content="Expand Sidebar">
+              <nile-lite-tooltip placement="right" hoist content=${this.expandTooltipText}>
                 <span part="icon"><nile-icon name="moveright"></nile-icon></span>
-              </nile-tooltip>
+              </nile-lite-tooltip>
             `
           : html`
-              <nile-tooltip placement="right" hoist content="Collapse Sidebar">
+              <nile-lite-tooltip placement="right" hoist content=${this.collapseTooltipText}>
                 <span part="icon"><nile-icon name="moveleft"></nile-icon></span>
-              </nile-tooltip>
+              </nile-lite-tooltip>
             `}
       </button>
     `;

package/src/nile-side-bar-footer/nile-side-bar-footer.css.ts

@@ -6,13 +6,13 @@ import { css } from 'lit';
 export const styles = css`
  :host {
   display: block;
-  position: sticky;
   bottom: var(--nile-spacing-md);
  padding-bottom: var(--nile-spacing-xl);
 	padding-left: var(--nile-spacing-xl);
 	padding-right: var(--nile-spacing-xl);
+  padding-top: var(--nile-spacing-xs);
  gap: var(--nile-spacing-md);
-  z-index: 10;
+  bottom: 0;
   background: var(--nile-colors-neutral-100);
 }
 

package/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts

@@ -10,8 +10,11 @@ export const styles = css`
     display: flex;
     align-items: center;
 	justify-content: flex-start;
-    padding: 12px;
-    font-size: 0.875rem;
+    padding-top: var(--nile-spacing-md);
+    padding-bottom: var(--nile-spacing-md);
+    padding-left: var(--nile-spacing-lg);
+    padding-right: var(--nile-spacing-lg);
+    font-size: var(--nile-type-scale-3);
     color: var(--nile-side-bar-footer-color, #374151);
     cursor: pointer;
     border-radius: var(--nile-side-bar-footer-radius, 0.375rem);
@@ -53,8 +56,11 @@ export const styles = css`
  
   :host([type='support']) .footer-item {
     background: var(--nile-colors-neutral-400);
- 
+    height: 38px;
   }
+  :host([type='support'][active]) .footer-item {
+  background: var(--nile-colors-neutral-500);
+}
  
   :host([collapsed][type='avatar']) .footer-item {
   padding: 3px;
@@ -70,7 +76,6 @@ export const styles = css`
   height: 38px;
   width: 38px;
 }
-
 `;
 
 export default [styles];

package/src/nile-side-bar-footer-item/nile-side-bar-footer-item.ts

@@ -25,9 +25,17 @@ export class NileSideBarFooterItem extends NileElement {
     return [styles];
   }
 
+  private handleClick(): void {
+    this.dispatchEvent(new CustomEvent('nile-click', {
+      detail: { type: this.type },
+      bubbles: true,
+      composed: true
+    }));
+  }
+
   public render(): TemplateResult {
     return html`
-      <div part="base" class="footer-item">
+      <div part="base" class="footer-item" @click=${this.handleClick}>
         <slot name="icon" part="icon"></slot>
         <slot name="text" part="text"></slot>
         <slot name="action" part="action"></slot>

package/src/nile-side-bar-group/nile-side-bar-group.css.ts

@@ -8,9 +8,8 @@ export const styles = css`
     display: flex;
     flex-direction: column;
     padding-bottom: var(--nile-spacing-xs);
-    padding-left: var(--nile-spacing-md);
-    padding-right: var(--nile-spacing-md);
-    gap: var(--nile-spacing-lg);
+    padding-left: var(--nile-spacing-xl);
+    padding-right: var(--nile-spacing-xl);
   }
 
 
@@ -30,10 +29,8 @@ export const styles = css`
   display: block;
   height: 1px;
   background: var(--nile-colors-neutral-400);
-  margin-top: var(--nile-spacing-xs);
  margin-left: var(--nile-spacing-md);
  margin-right: var(--nile-spacing-md);
- 
 }
  
 .side-bar-group {

package/src/nile-side-bar-group-item/nile-side-bar-group-item.css.ts

@@ -11,60 +11,62 @@ import {css} from 'lit';
  * SideBarGroupItem CSS
  */
 export const styles = css`
-	 :host {
-  display: block;
-}
+  :host {
+    display: block;
+  }
 
-.group-item {
-  display: flex;
-  flex-direction: column;
-}
+  .group-item {
+    display: flex;
+    flex-direction: column;
+    height: 38px;
+    width: 208px;
+    overflow: hidden;
+  }
 
-.item-link {
-  display: flex;
-  align-items: center;
-padding-top: var(--nile-spacing-lg);
-padding-bottom: var(--nile-spacing-lg);
-padding-left: var(--nile-spacing-md);
-padding-right: var(--nile-spacing-md);
-  cursor: pointer;
-  color: var(--nile-colors-dark-900);
-  text-decoration: none;
-  font-size: var(--nile-type-scale-3);
-  line-height: 1.4;
-}
+  .item-link {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: 100%;
+    width: 100%;
+    padding: var(--nile-spacing-lg) var(--nile-spacing-md);
+    cursor: pointer;
+    color: var(--nile-colors-dark-900);
+    text-decoration: none;
+    font-size: var(--nile-type-scale-3);
+    line-height: 1.4;
+    box-sizing: border-box;
+  }
 
-.item-link:hover {
-  background: var(--nile-colors-neutral-400);
-  border-radius: var(--nile-radius-sm);
-}
+  .item-link:hover {
+    background: var(--nile-colors-neutral-400);
+    border-radius: var(--nile-radius-sm);
+  }
 
+  ::slotted(nile-side-bar-group-item-icon) {
+    flex-shrink: 0;
+  }
 
+  ::slotted(nile-side-bar-group-item-text) {
+    flex-grow: 1;
+  }
 
-::slotted(nile-side-bar-group-item-icon) {
-  flex-shrink: 0;
-}
-
-::slotted(nile-side-bar-group-item-text) {
-  flex-grow: 1;
-}
-:host([active]) [part="link"] {
-  background:    var(--nile-colors-primary-100);
-  border-radius: var(--nile-radius-sm);
-  font-weight: var(--nile-font-weight-semibold);
-}
-
-:host([collapsed]) .group-item {
-height: 38px;
-width: 38px;
-}
-:host([disabled]) .item-link {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-}
+  :host([active]) [part="link"] {
+    background: var(--nile-colors-primary-100);
+    border-radius: var(--nile-radius-sm);
+    font-weight: var(--nile-font-weight-semibold);
+  }
 
+  :host([collapsed]) .group-item {
+    height: 38px;
+    width: 38px;
+  }
 
+  :host([disabled]) .item-link {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
 `;
 
-export default [styles];
+export default [styles];

package/src/nile-side-bar-header/nile-side-bar-header.css.ts

@@ -19,10 +19,8 @@ export const styles = css`
   padding-bottom: var(--nile-spacing-lg);
   padding-left: var(--nile-spacing-xl);
   padding-right: var(--nile-spacing-xl);
-  position: sticky;
-    top: 0;
-    z-index: 10;
-    background: var(--nile-colors-neutral-100);
+  top: 0;
+  background: var(--nile-colors-neutral-100);
 }
 
 .header-content {

package/src/nile-side-bar-panel/index.ts

@@ -0,0 +1 @@
+export { NileSideBarPanel } from './nile-side-bar-panel';

package/src/nile-side-bar-panel/nile-side-bar-panel.css.ts

@@ -0,0 +1,22 @@
+/**
+* Copyright Aquera Inc 2025
+*
+* 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 {css} from 'lit';
+
+/**
+ * SideBarPanel CSS
+ */
+export const styles = css`
+	:host {
+		width: 100%; 
+		height: 100%;
+		overflow-y: auto;
+	}
+
+`;
+
+export default [styles];

package/src/nile-side-bar-panel/nile-side-bar-panel.ts

@@ -0,0 +1,54 @@
+/**
+ * Copyright Aquera Inc 2025
+ *
+ * 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 {LitElement, html, CSSResultArray, TemplateResult} from 'lit';
+import { customElement, property} from 'lit/decorators.js';
+import {styles} from './nile-side-bar-panel.css';
+import NileElement from '../internal/nile-element';
+
+
+/**
+ * Nile side-bar-panel component.
+ *
+ * @tag nile-side-bar-panel
+ *
+ */
+@customElement('nile-side-bar-panel')
+export class NileSideBarPanel extends NileElement {
+
+	/**
+	 * The styles for nile-side-bar-panel
+	 * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+	 */
+	public static get styles(): CSSResultArray {
+		return [styles];
+	}
+
+	/* #endregion */
+
+	/* #region Methods */
+
+	/**
+	 * Render method
+	 * @slot This is a slot test
+	 */
+	public render(): TemplateResult {
+		return html`
+			<slot> </slot>
+			`;
+	}
+
+	/* #endregion */
+}
+
+export default NileSideBarPanel;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'nile-side-bar-panel': NileSideBarPanel;
+  }
+}

package/src/nile-slide-toggle/nile-slide-toggle.ts

@@ -53,6 +53,7 @@ export class NileSlideToggle extends NileElement {
           'nile-slide--disabled': this.disabled,
           'nile-slide-toggle--reverse':this.textPosition=='left'
         })}
+        part="base"
       >
         <label 
         class="${classMap({
@@ -60,17 +61,17 @@ export class NileSlideToggle extends NileElement {
           'nile-slide-toggle__switch--left':this.textPosition=='right',
           'nile-slide-toggle__switch--right':this.textPosition=='left',
         })}"
-        class="nile-slide-toggle__switch">
+        class="nile-slide-toggle__switch" part="slide-toggle-switch">
           <input
             type="checkbox"
             .checked=${this.isChecked}
             @change=${this.toggleValue}
           />
-          <span class="nile-slide-toggle__slider"></span>
+          <span class="nile-slide-toggle__slider" part="slide-toggle-slider"></span>
         </label>
-        <span class="nile-slide-toggle__label">
-          <span>${this.label}</span>
-          <span class="nile-slide-toggle__sublabel">${this.sublabel}</span>
+        <span class="nile-slide-toggle__label" part="slide-toggle-label-container">
+          <span part="slide-toggle-label">${this.label}</span>
+          <span class="nile-slide-toggle__sublabel" part="slide-toggle-sublabel">${this.sublabel}</span>
         </span>
       </div>
       ${hasHelpText