@aquera/nile-elements 1.3.5-beta-1.0 → 1.3.6-beta-1.0

package/src/nile-floating-panel/types.ts

@@ -0,0 +1,15 @@
+export type FloatingPanelPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export type FloatingPanelAnchor = HTMLElement | string | null;
+
+export interface FloatingPanelPositionConfig {
+  position: FloatingPanelPosition;
+  offset?: number;
+  shiftPadding?: number;
+}
+
+export interface FloatingPanelContentConfig {
+  slotContent: Node[];
+  dataContent: string;
+}
+

package/src/nile-grid/nile-grid-body/nile-grid-body.css.ts

@@ -13,7 +13,7 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
-    background-color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 `;
 

package/src/nile-grid/nile-grid-cell-item/nile-grid-cell-item.css.ts

@@ -12,7 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --padding: var(--nile-spacing-xl) var(--nile-spacing-10px);
+    --padding: var(--nile-spacing-xl, var(--ng-spacing-lg)) var(--nile-spacing-10px, var(--ng-spacing-3xl));
     --height: 44px;
     box-sizing: border-box;
     min-width: 0;
@@ -25,13 +25,14 @@ export const styles = css`
     height: auto;
     font-size: 14px;
     font-weight: 400;
-    font-family: var(--nile-font-family-sans-serif);
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
   }
 
   .cell-item-base {
     width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));
   }
 
   ::slotted(*) {
@@ -54,18 +55,18 @@ export const styles = css`
     touch-action: none;
     z-index: 1;
     width: 2px;
-    border-right: 1px solid var(--nile-colors-neutral-400);
+    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     display: block;
   }
 
   :host(.shadow-right) {
-    box-shadow: var(--nile-box-shadow-14);
-    background-color: var(---nile-colors-white-base);
+    box-shadow: var(--nile-box-shadow-14, var(--ng-shadow-xs));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
   :host(.shadow-left) {
-    box-shadow: var(--nile-box-shadow-14);
-    background-color: var(---nile-colors-white-base);
+    box-shadow: var(--nile-box-shadow-14, var(--ng-shadow-xs));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
   :host-context(nile-grid-row[hover]:hover),
@@ -81,7 +82,7 @@ export const styles = css`
   :host(.cell-rowspan) {
     position: absolute;
     z-index: 1;
-    background-color: var(--nile-colors-white-base);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 `;
 

package/src/nile-grid/nile-grid-head-item/nile-grid-head-item.css.ts

@@ -12,7 +12,7 @@ import { css } from 'lit';
  */
 export const styles = css`
   :host {
-    --padding: var(--nile-spacing-lg) var(--nile-spacing-10px);
+    --padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-10px, var(--ng-spacing-3xl));
     --height: 50px;
     position: relative;
     box-sizing: border-box;
@@ -21,13 +21,14 @@ export const styles = css`
     overflow: hidden;
     text-overflow: ellipsis;
     padding: var(--padding);
-    background-color: var(--nile-colors-neutral-100);
-    font-size: var(--nile-font-size-small);
-    font-weight: var(--nile-font-weight-medium);
-    font-family: var(--nile-font-family-sans-serif);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    font-size: var(--nile-font-size-small, var(--ng-font-size-text-xs));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-semibold));
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
     min-height: var(--height);
     display: flex;
     align-items: center;
+    color: var(--nile---nile-colors-dark-900, var(--ng-colors-text-quaternary-500));
   }
 
   .head-item-base {
@@ -56,23 +57,23 @@ export const styles = css`
     touch-action: none;
     z-index: 1;
     width: 2px;
-    border-right: 1px solid var(--nile-colors-neutral-400);
+    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 
   :host(.shadow-right) {
-    box-shadow: var(--nile-box-shadow-13);
-    background-color: var(--nile-colors-neutral-100);
+    box-shadow: var(--nile-box-shadow-13, var(--ng-shadow-xs));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   :host(.shadow-left) {
-    box-shadow: var(--nile-box-shadow-13);
-    background-color: var(--nile-colors-neutral-100);
+    box-shadow: var(--nile-box-shadow-13, var(--ng-shadow-xs));
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   :host(.head-rowspan) {
     position: absolute;
     z-index: 1;
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 `;
 

package/src/nile-grid/nile-grid-row/nile-grid-row.css.ts

@@ -14,8 +14,8 @@ export const styles = css`
   .row-base {
     display: grid;
     grid-template-columns: var(--nile-grid-columns);
-    border-bottom: 1px solid var(--nile-colors-neutral-400);
-    background-color: var(--nile-colors-white-base);
+    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     position: relative;
   }
 
@@ -32,9 +32,10 @@ export const styles = css`
     z-index: 1;
   }
 
+  /* check it one more time */
   :host([disabled]) {
     background: var(--nile-colors-white-base);
-    border-bottom: 1px solid var(--nile-colors-neutral-400);
+    border-bottom: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     opacity: 0.3;
   }
 

package/src/nile-grid/nile-grid.css.ts

@@ -16,13 +16,13 @@ export const styles = css`
     inline-size: 100%;
     position: relative;
     box-sizing: border-box;
-    border: 1px solid var(--nile-colors-neutral-400);
-    border-radius: var(--nile-radius-radius-xl);
-    background-color: var(--nile-colors-white-base);
+    border: 1px solid var(--nile-colors-neutral-400, , var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-md, var(--ng-radius-xl));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     max-height: 100%;
     width: 100%;
     min-width: var(--min-width);
-    box-shadow: var(--nile-box-shadow-3);
+    box-shadow: var(--nile-box-shadow-3, var(--ng-shadow-xs));
   }
 
   ::slotted(nile-grid-head),
@@ -34,7 +34,7 @@ export const styles = css`
   .nile-resize-end {
     position: absolute;
     z-index: 4;
-    background-color: var(--nile-colors-neutral-400);
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     width: 2px;
     height: 100%;
     top: 0;

package/src/nile-grid/nile-grid.layout.ts

@@ -194,11 +194,11 @@ function handleRowspan(nileGrid: NileGrid, el: HTMLElement, rowspan: number) {
   if (el.tagName === NILE_GRID_HEAD_ITEM) {
     if (!nileGrid.headHeight) nileGrid.headHeight = el.getBoundingClientRect().height;
     el.style.height = `${(nileGrid.headHeight * rowspan) + (rowspan - 1)}px`;
-    el.style.backgroundColor = "#FAFAFA";
+    el.style.backgroundColor = "var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary))";
   } else {
     if (!nileGrid.cellHeight) nileGrid.cellHeight = el.getBoundingClientRect().height;
     el.style.height = `${(nileGrid.cellHeight * rowspan) + (rowspan - 1)}px`;
-    el.style.backgroundColor = "#FFF";
+    el.style.backgroundColor = "var(--nile-colors-white-base, var(--ng-colors-bg-primary))";
   }
 }
 
@@ -289,7 +289,7 @@ function applySticky(
  */
 function prepareStickyElement(el: HTMLElement) {
   el.style.position = 'sticky';
-  el.style.zIndex = '2';
+  el.style.zIndex = '1';
   el.style.left = '';
   el.style.right = '';
   el.removeAttribute('data-sticky');

package/src/nile-icon/index.ts

@@ -95,7 +95,7 @@ export class NileIcon extends LitElement {
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      contain: content;
+      contain: var(--nile-icon-contain, content);
       --nile-svg-stroke-width: 1.3;
       -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
     -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));

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,13 @@ 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) {
@@ -80,6 +87,7 @@ export const styles = css`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
   }
 
   /* Transition for sidebar button when it is closed and opened */

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

@@ -19,7 +19,8 @@ export const styles = css`
   display: flex;
   flex-direction: column;
   background-color: var(--nile-colors-neutral-100);
-  overflow: auto;
+  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,15 @@ 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;
+  position: sticky;
   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,13 @@ 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;
@@ -71,6 +79,10 @@ export const styles = css`
   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 {