@aquera/nile-elements 1.3.9-beta-1.2 → 1.3.9-beta-1.3

package/dist/src/nile-side-bar/nile-side-bar.css.js

@@ -10,14 +10,14 @@ import { css } from 'lit';
  */
 export const styles = css `
  :host {
-  --sidebar-width: 240px;
-  --sidebar-collapsed-width: 70px;
+  
   top: 0;
-  width: var(--sidebar-width);
+  width: var(--nile-width-240px, var(--ng-spacing-296));
   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;
 }
@@ -25,17 +25,17 @@ export const styles = css `
  
 :host([position='left']) {
   left: 0;
-  border-right: 1px solid var(--nile-colors-neutral-400);
+  border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
 }
 
 :host([position='right']) {
   right: 0;
-  border-left: 1px solid var(--nile-colors-neutral-400);
+  border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
 }
 
  
 :host([collapsed]) {
-  width: var(--sidebar-collapsed-width);
+  width: var(--nile-width-70px, var(--ng-spacing-68));
 }
 
  
@@ -43,15 +43,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;
@@ -67,29 +58,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/dist/src/nile-side-bar/nile-side-bar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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/**\n * SideBar CSS\n */\nexport const styles = css`\n :host {\n  --sidebar-width: 240px;\n  --sidebar-collapsed-width: 70px;\n  top: 0;\n  width: var(--sidebar-width);\n  display: flex;\n  flex-direction: column;\n  background-color: var(--nile-colors-neutral-100);\n  overflow: auto;\n  transition: width 0.25s ease, transform 0.25s ease;\n  z-index: 1000;\n}\n\n \n:host([position='left']) {\n  left: 0;\n  border-right: 1px solid var(--nile-colors-neutral-400);\n}\n\n:host([position='right']) {\n  right: 0;\n  border-left: 1px solid var(--nile-colors-neutral-400);\n}\n\n \n:host([collapsed]) {\n  width: var(--sidebar-collapsed-width);\n}\n\n \n:host([position='right'][collapsed]) {\n  transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n \n \n::slotted(*) {\n  display: block;\n  min-width: 0;\n  /* padding: var(--nile-spacing-xl) */\n}\n\n \n:host {\n  scrollbar-width: thin;\n  scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n  width: 6px;\n}\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n  background-color: #64748b;\n  border-radius: 10px;\n}\n:host([fullheight]) {\n  position: fixed;\n  top: 0;\n  height: 100dvh;\n}\n\n:host(:not([fullheight])) {\n  position: relative;\n  height: 100%;\n}\n::slotted(nile-side-bar-footer) {\n  margin-top: auto;  \n  flex-shrink: 0;   \n}\n:host([collapsed]) ::slotted(nile-side-bar-footer-item) .footer-item {\n  justify-content: center;\n  padding: 0;\n}\n\n:host([collapsed]) ::slotted(nile-side-bar-footer-item) ::slotted([slot='text']),\n:host([collapsed]) ::slotted(nile-side-bar-footer-item) ::slotted([slot='action']) {\n  display: none;\n}\n\n\n\n\n\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-side-bar.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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/**\n * SideBar CSS\n */\nexport const styles = css`\n :host {\n  \n  top: 0;\n  width: var(--nile-width-240px, var(--ng-spacing-296));\n  display: flex;\n  flex-direction: column;\n  background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n  height: 100%;\n  overflow: hidden;  \n  transition: width 0.25s ease, transform 0.25s ease;\n  z-index: 1000;\n}\n\n \n:host([position='left']) {\n  left: 0;\n  border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n:host([position='right']) {\n  right: 0;\n  border-left: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n}\n\n \n:host([collapsed]) {\n  width: var(--nile-width-70px, var(--ng-spacing-68));\n}\n\n \n:host([position='right'][collapsed]) {\n  transform: translateX(calc(var(--sidebar-width) - var(--sidebar-collapsed-width)));\n}\n\n:host {\n  scrollbar-width: thin;\n  scrollbar-color: #64748b transparent;\n}\n\n:host::-webkit-scrollbar {\n  width: 6px;\n}\n:host::-webkit-scrollbar-track {\n  background: transparent;\n}\n:host::-webkit-scrollbar-thumb {\n  background-color: #64748b;\n  border-radius: 10px;\n}\n\n \n.scroll-container {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n \n::slotted(nile-side-bar-header) {\n  flex-shrink: 0;\n}\n\n::slotted(nile-side-bar-footer) {\n  flex-shrink: 0;\n  position: sticky;\n  bottom: 0;\n  margin-top: auto;\n}\n\n \n \n\n\n\n\n\n\n\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar/nile-side-bar.js

@@ -43,7 +43,13 @@ let NileSideBar = class NileSideBar extends NileElement {
         }
     }
     render() {
-        return html `<slot></slot>`;
+        return html `
+      <slot name="header"></slot>
+      <div class="scroll-container">
+        <slot></slot>
+      </div>
+      <slot name="footer"></slot>
+    `;
     }
 };
 __decorate([

package/dist/src/nile-side-bar/nile-side-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;GAQG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QACsD,aAAQ,GAAqB,MAAM,CAAC;QAEnC,cAAS,GAAY,KAAK,CAAC;QAE3B,eAAU,GAAY,KAAK,CAAC;QAE5C,UAAK,GAAkB,IAAI,CAAC;QAG5B,mBAAc,GAAkB,IAAI,CAAC;IA0BnF,CAAC;IAxBQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAES,OAAO,CAAC,YAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE5B,IAAI,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,gBAAgB,CACnB,0EAA0E,CAC3E,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QACnE,CAAC;QAED,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACrD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAC/D,CAAC;QACD,IAAI,YAAY,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE,CAAC;YACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC;QAClF,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAnC4D;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAoC;AAEnC;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAA2B;AAE3B;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CAA4B;AAE5C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CAA4B;AAG5B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mDAAqC;AAVtE,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAoCvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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 } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n  @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n  @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n   \n  @property({ type: Number, attribute: true })width: number | null = null;\n\n \n  @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    if (changedProps.has('collapsed')) {\n      this.querySelectorAll<NileElement>(\n        'nile-side-bar-footer-item, nile-side-bar-group-item, nile-side-bar-group'\n      ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n    }\n\n    if (changedProps.has('width') && this.width !== null) {\n      this.style.setProperty('--sidebar-width', `${this.width}px`);\n    }\n    if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n      this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`<slot></slot>`;\n  }\n}\n\nexport default NileSideBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar': NileSideBar;\n  }\n}\n"]}
+{"version":3,"file":"nile-side-bar.js","sourceRoot":"","sources":["../../../src/nile-side-bar/nile-side-bar.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;GAQG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QACsD,aAAQ,GAAqB,MAAM,CAAC;QAEnC,cAAS,GAAY,KAAK,CAAC;QAE3B,eAAU,GAAY,KAAK,CAAC;QAE5C,UAAK,GAAkB,IAAI,CAAC;QAG5B,mBAAc,GAAkB,IAAI,CAAC;IAiCnF,CAAC;IA/BQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAES,OAAO,CAAC,YAAkC;QAClD,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE5B,IAAI,YAAY,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,gBAAgB,CACnB,0EAA0E,CAC3E,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;QACnE,CAAC;QAED,IAAI,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,EAAE,CAAC;YACrD,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC;QAC/D,CAAC;QACD,IAAI,YAAY,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,KAAK,IAAI,EAAE,CAAC;YACvE,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,2BAA2B,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,CAAC,CAAC;QAClF,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;CAEF,CAAA;AA1C4D;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;6CAAoC;AAEnC;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;8CAA2B;AAE3B;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;+CAA4B;AAE5C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;0CAA4B;AAG5B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;mDAAqC;AAVtE,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CA2CvB;;AAED,eAAe,WAAW,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\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 } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar component.\n *\n * @tag nile-side-bar\n *\n * @attr position - Position of the sidebar (\"left\" | \"right\"). Defaults to \"left\".\n * @attr width - Expanded width of the sidebar (px).\n * @attr collapsed-width - Collapsed width of the sidebar (px).\n */\n@customElement('nile-side-bar')\nexport class NileSideBar extends NileElement {\n  @property({ type: String, reflect: true, attribute: true })position: 'left' | 'right' = 'left';\n\n  @property({ type: Boolean, reflect: true, attribute: true })collapsed: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: true })fullHeight: boolean = false;\n   \n  @property({ type: Number, attribute: true })width: number | null = null;\n\n \n  @property({ type: Number, attribute: true })collapsedWidth: number | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  protected updated(changedProps: Map<string, unknown>) {\n    super.updated(changedProps);\n\n    if (changedProps.has('collapsed')) {\n      this.querySelectorAll<NileElement>(\n        'nile-side-bar-footer-item, nile-side-bar-group-item, nile-side-bar-group'\n      ).forEach(el => el.toggleAttribute('collapsed', this.collapsed));\n    }\n\n    if (changedProps.has('width') && this.width !== null) {\n      this.style.setProperty('--sidebar-width', `${this.width}px`);\n    }\n    if (changedProps.has('collapsedWidth') && this.collapsedWidth !== null) {\n      this.style.setProperty('--sidebar-collapsed-width', `${this.collapsedWidth}px`);\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <slot name=\"header\"></slot>\n      <div class=\"scroll-container\">\n        <slot></slot>\n      </div>\n      <slot name=\"footer\"></slot>\n    `;\n  }\n  \n}\n\nexport default NileSideBar;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar': NileSideBar;\n  }\n}\n"]}

package/dist/src/nile-side-bar-action-menu/nile-side-bar-action-menu.css.js

@@ -47,7 +47,7 @@ export const styles = css `
   }
 
   .menu__footer {
-    display: var(--nile-display-flex, var(--ng-display-none)); 
+    display: var(--nile-display-flex, var(--ng-display-flex)); 
     /* No need to tokenize below - token not required*/
     border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
     align-items: stretch;

package/dist/src/nile-side-bar-action-menu/nile-side-bar-action-menu.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-action-menu.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu/nile-side-bar-action-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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/**\n * SideBarActionMenu CSS\n */\nexport const styles = css`\n   :host {\n    display: block;\n    position: relative;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-custom-color-288,var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-radius-lg,var(--ng-radius-md));\n    overflow: hidden;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    height: 100%;\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n    /* overscroll-behavior: none; */\n    /* -ms-overflow-style: none; */\n    /* scrollbar-width: none; */\n  }\n\n  .search__wrapper {\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg,var(--ng-spacing-lg)) var(--nile-spacing-sm,var(--ng-spacing-sm));\n    position: sticky;\n    z-index: 999;\n    top: 0px;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    height: 64px;\n  }\n\n  .menu__items-wrapper {\n    overflow: auto;\n    max-height: var(--auto-size-available-height);\n  }\n\n  ::slotted(nile-divider) {\n    --spacing: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .menu__footer {\n    display: var(--nile-display-flex, var(--ng-display-none)); \n    /* No need to tokenize below - token not required*/\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: 180%;\n    letter-spacing: normal;\n    color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));\n    min-height: 40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);\n    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .menu__footer:hover {\n    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));\n  }\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-side-bar-action-menu.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu/nile-side-bar-action-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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/**\n * SideBarActionMenu CSS\n */\nexport const styles = css`\n   :host {\n    display: block;\n    position: relative;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-custom-color-288,var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-radius-lg,var(--ng-radius-md));\n    overflow: hidden;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    height: 100%;\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n    /* overscroll-behavior: none; */\n    /* -ms-overflow-style: none; */\n    /* scrollbar-width: none; */\n  }\n\n  .search__wrapper {\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg,var(--ng-spacing-lg)) var(--nile-spacing-sm,var(--ng-spacing-sm));\n    position: sticky;\n    z-index: 999;\n    top: 0px;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    height: 64px;\n  }\n\n  .menu__items-wrapper {\n    overflow: auto;\n    max-height: var(--auto-size-available-height);\n  }\n\n  ::slotted(nile-divider) {\n    --spacing: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .menu__footer {\n    display: var(--nile-display-flex, var(--ng-display-flex)); \n    /* No need to tokenize below - token not required*/\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: 180%;\n    letter-spacing: normal;\n    color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));\n    min-height: 40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);\n    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .menu__footer:hover {\n    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));\n  }\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.js

@@ -115,7 +115,7 @@ export const styles = css `
   }
 
   :host([active]) .menu-item {
-    background: var(--nile-colors-primary-100);
+    background: var(--nile-colors-primary-100, var(--ng-colors-bg-primary-hover));
   }
 
 

package/dist/src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-action-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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/**\n * SideBarActionMenuItem CSS\n */\nexport const styles = css`\n     :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n    min-height:40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n    display: inline-flex;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  :host([active]) .menu-item {\n    background: var(--nile-colors-primary-100);\n  }\n\n\n .menu-item {\n \n  margin-left: 8px;\n  margin-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  \n  }\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-side-bar-action-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+HxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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/**\n * SideBarActionMenuItem CSS\n */\nexport const styles = css`\n     :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n    min-height:40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n    display: inline-flex;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  :host([active]) .menu-item {\n    background: var(--nile-colors-primary-100, var(--ng-colors-bg-primary-hover));\n  }\n\n\n .menu-item {\n \n  margin-left: 8px;\n  margin-right: 8px;\n  margin-top: 2px;\n  margin-bottom: 2px;\n}\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  \n  }\n`;\n\nexport default [styles];"]}

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.css.js

@@ -17,28 +17,15 @@ 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;
   cursor: pointer;
   border-radius: 6px;
   transition: background-color 0.2s ease;
-}
-
-.expand-btn:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-nile-tooltip::part(body) {
-    width: max-content;
-    height: max-content;
-    padding: var(--nile-spacing-sm);
-    overflow-x: hidden;
-  }
-
- 
+} 
 
 `;
 export default [styles];

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-expand.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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/**\n * SideBarExpand CSS\n */\nexport const styles = css`\n\t :host {\n  display: inline-flex;\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background-color 0.2s ease;\n}\n\n.expand-btn:hover {\n  background-color: rgba(255, 255, 255, 0.1);\n}\n\nnile-tooltip::part(body) {\n    width: max-content;\n    height: max-content;\n    padding: var(--nile-spacing-sm);\n    overflow-x: hidden;\n  }\n\n \n\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-side-bar-expand.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n* Copyright Aquera Inc 2023\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/**\n * SideBarExpand CSS\n */\nexport const styles = css`\n\t :host {\n  display: inline-flex;\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 38px;\n  height: 38px;\n  border: none;\n  background: transparent;\n  color: inherit;\n  cursor: pointer;\n  border-radius: 6px;\n  transition: background-color 0.2s ease;\n} \n\n`;\n\nexport default [styles];"]}

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

@@ -8,6 +8,8 @@ import NileElement from '../internal/nile-element';
  */
 export declare class NileSideBarExpand extends NileElement {
     collapsed: boolean;
+    expandTooltipText: string;
+    collapseTooltipText: string;
     static get styles(): CSSResultArray;
     connectedCallback(): void;
     private toggleSidebar;

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.js

@@ -13,6 +13,8 @@ let NileSideBarExpand = class NileSideBarExpand extends NileElement {
     constructor() {
         super(...arguments);
         this.collapsed = false;
+        this.expandTooltipText = 'Expand Sidebar';
+        this.collapseTooltipText = 'Collapse Sidebar';
     }
     static get styles() {
         return [styles];
@@ -44,14 +46,14 @@ let NileSideBarExpand = 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>
     `;
@@ -60,6 +62,12 @@ let NileSideBarExpand = class NileSideBarExpand extends NileElement {
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileSideBarExpand.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileSideBarExpand.prototype, "expandTooltipText", void 0);
+__decorate([
+    property({ type: String, reflect: true, attribute: true })
+], NileSideBarExpand.prototype, "collapseTooltipText", void 0);
 NileSideBarExpand = __decorate([
     customElement('nile-side-bar-expand')
 ], NileSideBarExpand);

package/dist/src/nile-side-bar-expand/nile-side-bar-expand.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-expand.js","sourceRoot":"","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAEL,cAAS,GAAY,KAAK,CAAC;IA8C7B,CAAC;IA5CQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wCAAwC;QACxC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QACtD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,aAAa;UAClD,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;;;aAIH;YACH,CAAC,CAAC,IAAI,CAAA;;;;aAIH;;KAER,CAAC;IACJ,CAAC;CACF,CAAA;AA9CC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAChB;AAFhB,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAgD7B;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-expand.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-expand component.\n *\n * @tag nile-side-bar-expand\n *\n */\n@customElement('nile-side-bar-expand')\nexport class NileSideBarExpand extends NileElement {\n  @property({ type: Boolean, reflect: true })\n  collapsed: boolean = false;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Sync with parent sidebar if it exists\n    const sidebar = this.closest('nile-side-bar');\n    if (sidebar) {\n      this.collapsed = sidebar.hasAttribute('collapsed');\n    }\n  }\n\n  private toggleSidebar() {\n    const sidebar = this.closest('nile-side-bar');\n    if (!sidebar) return;\n\n    const isCollapsed = sidebar.hasAttribute('collapsed');\n    if (isCollapsed) {\n      sidebar.removeAttribute('collapsed');\n      this.collapsed = false;\n    } else {\n      sidebar.setAttribute('collapsed', '');\n      this.collapsed = true;\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <button class=\"expand-btn\" @click=${this.toggleSidebar}>\n        ${this.collapsed\n          ? html`\n              <nile-tooltip placement=\"right\" hoist content=\"Expand Sidebar\">\n                <span part=\"icon\"><nile-icon name=\"moveright\"></nile-icon></span>\n              </nile-tooltip>\n            `\n          : html`\n              <nile-tooltip placement=\"right\" hoist content=\"Collapse Sidebar\">\n                <span part=\"icon\"><nile-icon name=\"moveleft\"></nile-icon></span>\n              </nile-tooltip>\n            `}\n      </button>\n    `;\n  }\n}\n\nexport default NileSideBarExpand;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-expand': NileSideBarExpand;\n  }\n}\n"]}
+{"version":3,"file":"nile-side-bar-expand.js","sourceRoot":"","sources":["../../../src/nile-side-bar-expand/nile-side-bar-expand.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QAEL,cAAS,GAAY,KAAK,CAAC;QAC6B,sBAAiB,GAAW,gBAAgB,CAAC;QAC7C,wBAAmB,GAAW,kBAAkB,CAAC;IA8C3G,CAAC;IA5CQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,wCAAwC;QACxC,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAEO,aAAa;QACnB,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAC9C,IAAI,CAAC,OAAO;YAAE,OAAO;QAErB,MAAM,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;QACtD,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO,CAAC,eAAe,CAAC,WAAW,CAAC,CAAC;YACrC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,YAAY,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;YACtC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACxB,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;0CAC2B,IAAI,CAAC,aAAa;UAClD,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;mEACmD,IAAI,CAAC,iBAAiB;;;aAG5E;YACH,CAAC,CAAC,IAAI,CAAA;mEACmD,IAAI,CAAC,mBAAmB;;;aAG9E;;KAER,CAAC;IACJ,CAAC;CACF,CAAA;AAhDC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDAChB;AAC6B;IAAvD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,IAAI,EAAC,CAAC;4DAA8C;AAC7C;IAAvD,QAAQ,CAAC,EAAC,IAAI,EAAE,MAAM,EAAE,OAAO,EAAC,IAAI,EAAE,SAAS,EAAC,IAAI,EAAC,CAAC;8DAAkD;AAJ9F,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CAkD7B;;AAED,eAAe,iBAAiB,CAAC","sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-expand.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-expand component.\n *\n * @tag nile-side-bar-expand\n *\n */\n@customElement('nile-side-bar-expand')\nexport class NileSideBarExpand extends NileElement {\n  @property({ type: Boolean, reflect: true })\n  collapsed: boolean = false;\n  @property({type: String, reflect:true, attribute:true}) expandTooltipText: string = 'Expand Sidebar';\n  @property({type: String, reflect:true, attribute:true}) collapseTooltipText: string = 'Collapse Sidebar';\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    // Sync with parent sidebar if it exists\n    const sidebar = this.closest('nile-side-bar');\n    if (sidebar) {\n      this.collapsed = sidebar.hasAttribute('collapsed');\n    }\n  }\n\n  private toggleSidebar() {\n    const sidebar = this.closest('nile-side-bar');\n    if (!sidebar) return;\n\n    const isCollapsed = sidebar.hasAttribute('collapsed');\n    if (isCollapsed) {\n      sidebar.removeAttribute('collapsed');\n      this.collapsed = false;\n    } else {\n      sidebar.setAttribute('collapsed', '');\n      this.collapsed = true;\n    }\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <button class=\"expand-btn\" @click=${this.toggleSidebar}>\n        ${this.collapsed\n          ? html`\n              <nile-lite-tooltip placement=\"right\" hoist content=${this.expandTooltipText}>\n                <span part=\"icon\"><nile-icon name=\"moveright\"></nile-icon></span>\n              </nile-lite-tooltip>\n            `\n          : html`\n              <nile-lite-tooltip placement=\"right\" hoist content=${this.collapseTooltipText}>\n                <span part=\"icon\"><nile-icon name=\"moveleft\"></nile-icon></span>\n              </nile-lite-tooltip>\n            `}\n      </button>\n    `;\n  }\n}\n\nexport default NileSideBarExpand;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-expand': NileSideBarExpand;\n  }\n}\n"]}

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.css.js

@@ -5,13 +5,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);
- gap: var(--nile-spacing-md);
-  z-index: 10;
+ padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));
+	padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));
+	padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));
+  padding-top: var(--nile-spacing-xs);
+ gap: var(--nile-spacing-md, var(--ng-spacing-xl));
+  bottom: 0;
   background: var(--nile-colors-neutral-100);
 }
 
@@ -19,19 +19,19 @@ export const styles = css `
   display: flex;
   flex-direction: column;    
   align-items: stretch;     
-  gap: 8px; 
+  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); 
 }
 
 ::slotted(nile-side-bar-footer-item) {
   display: flex;
   align-items: center;
-  gap: var(--nile-spacing-md);
+  gap: var(--nile-spacing-md, var(--ng-spacing-xs));
   justify-content: center;
  
-  font-size: var(--nile-type-scale-3);
-  color: var(--nile-colors-dark-900);
+  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));
   cursor: pointer;
-  border-radius: var(--nile-radius-sm);
+  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
   transition: background 0.2s ease;
 }
 

package/dist/src/nile-side-bar-footer/nile-side-bar-footer.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarFooter CSS\n */\nexport const styles = css`\n :host {\n  display: block;\n  position: sticky;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl);\n\tpadding-left: var(--nile-spacing-xl);\n\tpadding-right: var(--nile-spacing-xl);\n gap: var(--nile-spacing-md);\n  z-index: 10;\n  background: var(--nile-colors-neutral-100);\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: 8px; \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md);\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3);\n  color: var(--nile-colors-dark-900);\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm);\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-side-bar-footer.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer/nile-side-bar-footer.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarFooter CSS\n */\nexport const styles = css`\n :host {\n  display: block;\n  bottom: var(--nile-spacing-md);\n padding-bottom: var(--nile-spacing-xl, var(--ng-spacing-3xl));\n\tpadding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n\tpadding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  padding-top: var(--nile-spacing-xs);\n gap: var(--nile-spacing-md, var(--ng-spacing-xl));\n  bottom: 0;\n  background: var(--nile-colors-neutral-100);\n}\n\n.footer {\n  display: flex;\n  flex-direction: column;    \n  align-items: stretch;     \n  gap: var(--nile-spacing-md, var(--ng-spacing-lg)); \n}\n\n::slotted(nile-side-bar-footer-item) {\n  display: flex;\n  align-items: center;\n  gap: var(--nile-spacing-md, var(--ng-spacing-xs));\n  justify-content: center;\n \n  font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));\n  cursor: pointer;\n  border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n  transition: background 0.2s ease;\n}\n\n\n\n\n \n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.js

@@ -9,11 +9,15 @@ export const styles = css `
     display: flex;
     align-items: center;
 	justify-content: flex-start;
-    padding: 12px;
-    font-size: 0.875rem;
-    color: var(--nile-side-bar-footer-color, #374151);
+    padding-top: var(--nile-spacing-md, var(--ng-spacing-md));
+    padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));
+    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    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;
-    border-radius: var(--nile-side-bar-footer-radius, 0.375rem);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-lg));
     transition: background 0.2s ease;
     width: 100%;
     box-sizing: border-box;
@@ -52,9 +56,28 @@ export const styles = css `
  
   :host([type='support']) .footer-item {
     background: var(--nile-colors-neutral-400);
- 
+    height: var(--nile-height-38px, var(--ng-spacing-5xl));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+
   }
  
+  :host(:hover[type='support']) .footer-item {
+  background: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));
+  height: var(--nile-height-38px, var(--ng-spacing-5xl));
+  }
+
+ :host([type='avatar']) .footer-item {
+border: 1px solid var(--ng-colors-border-secondary);
+}
+:host([type='avatar'][active]) .footer-item {
+background: var(--nile-colors-neutral-400);
+}
+
+
+
+:host([collapsed][type='avatar']) .footer-item {
+border: none;
+}
   :host([collapsed][type='avatar']) .footer-item {
   padding: 3px;
  
@@ -69,7 +92,6 @@ export const styles = css `
   height: 38px;
   width: 38px;
 }
-
 `;
 export default [styles];
 //# sourceMappingURL=nile-side-bar-footer-item.css.js.map

package/dist/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .footer-item {\n    display: flex;\n    align-items: center;\n\tjustify-content: flex-start;\n    padding: 12px;\n    font-size: 0.875rem;\n    color: var(--nile-side-bar-footer-color, #374151);\n    cursor: pointer;\n    border-radius: var(--nile-side-bar-footer-radius, 0.375rem);\n    transition: background 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .footer-item:hover {\n    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);\n  }\n\n  /* left: icon */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    margin-right: 0.5rem;\n  }\n\n  /* middle: text */\n  ::slotted([slot='text']) {\n    flex-grow: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* right: action */\n  ::slotted([slot='action']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    color: var(--nile-side-bar-footer-icon-color, #6b7280);\n    margin-left: auto;\n  }\n\n \n  :host([type='support']) .footer-item {\n    background: var(--nile-colors-neutral-400);\n \n  }\n \n  :host([collapsed][type='avatar']) .footer-item {\n  padding: 3px;\n \n}\n \n:host([collapsed][type='avatar']) ::slotted([slot='text']),\n:host([collapsed][type='avatar']) ::slotted([slot='action']) {\n  display: none;\n}\n\n:host([collapsed]) .footer-item{\n  height: 38px;\n  width: 38px;\n}\n\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-side-bar-footer-item.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6FxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .footer-item {\n    display: flex;\n    align-items: center;\n\tjustify-content: flex-start;\n    padding-top: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-bottom: var(--nile-spacing-md, var(--ng-spacing-md));\n    padding-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900))\n    cursor: pointer;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-lg));\n    transition: background 0.2s ease;\n    width: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    line-height: 0;\n  }\n\n  .footer-item:hover {\n    background: var(--nile-side-bar-footer-hover-bg, #f3f4f6);\n  }\n\n  /* left: icon */\n  ::slotted([slot='icon']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    margin-right: 0.5rem;\n  }\n\n  /* middle: text */\n  ::slotted([slot='text']) {\n    flex-grow: 1;\n    min-width: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  /* right: action */\n  ::slotted([slot='action']) {\n    flex-shrink: 0;\n    font-size: 1.25rem;\n    color: var(--nile-side-bar-footer-icon-color, #6b7280);\n    margin-left: auto;\n  }\n\n \n  :host([type='support']) .footer-item {\n    background: var(--nile-colors-neutral-400);\n    height: var(--nile-height-38px, var(--ng-spacing-5xl));\n    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));\n\n  }\n \n  :host(:hover[type='support']) .footer-item {\n  background: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n  height: var(--nile-height-38px, var(--ng-spacing-5xl));\n  }\n\n :host([type='avatar']) .footer-item {\nborder: 1px solid var(--ng-colors-border-secondary);\n}\n:host([type='avatar'][active]) .footer-item {\nbackground: var(--nile-colors-neutral-400);\n}\n\n\n\n:host([collapsed][type='avatar']) .footer-item {\nborder: none;\n}\n  :host([collapsed][type='avatar']) .footer-item {\n  padding: 3px;\n \n}\n \n:host([collapsed][type='avatar']) ::slotted([slot='text']),\n:host([collapsed][type='avatar']) ::slotted([slot='action']) {\n  display: none;\n}\n\n:host([collapsed]) .footer-item{\n  height: 38px;\n  width: 38px;\n}\n`;\n\nexport default [styles];\n"]}

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

@@ -17,6 +17,7 @@ import NileElement from '../internal/nile-element';
 export declare class NileSideBarFooterItem extends NileElement {
     type: string | null;
     static get styles(): CSSResultArray;
+    private handleClick;
     render(): TemplateResult;
 }
 export default NileSideBarFooterItem;

package/dist/src/nile-side-bar-footer-item/nile-side-bar-footer-item.js

@@ -25,9 +25,16 @@ let NileSideBarFooterItem = class NileSideBarFooterItem extends NileElement {
     static get styles() {
         return [styles];
     }
+    handleClick() {
+        this.dispatchEvent(new CustomEvent('nile-click', {
+            detail: { type: this.type },
+            bubbles: true,
+            composed: true
+        }));
+    }
     render() {
         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/dist/src/nile-side-bar-footer-item/nile-side-bar-footer-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer-item.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-item/nile-side-bar-footer-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;;;;GAaG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QACsC,SAAI,GAAkB,IAAI,CAAC;IAexE,CAAC;IAbQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;;;;KAMV,CAAC;IACJ,CAAC;CACF,CAAA;AAf4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAA4B;AAD3D,qBAAqB;IADjC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,qBAAqB,CAgBjC;;AAED,eAAe,qBAAqB,CAAC","sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-footer-item.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-footer-item component.\n *\n * @tag nile-side-bar-footer-item\n *\n * @slot icon - Slot for footer item icon\n * @slot text - Slot for footer item text\n * @slot action - Slot for footer item action\n *\n * @csspart base - Wrapper for the footer item\n * @csspart icon - Wrapper for the icon slot\n * @csspart text - Wrapper for the text slot\n * @csspart action - Wrapper for the action slot\n */\n@customElement('nile-side-bar-footer-item')\nexport class NileSideBarFooterItem extends NileElement {\n  @property({ type: String, reflect: true }) type: string | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"footer-item\">\n        <slot name=\"icon\" part=\"icon\"></slot>\n        <slot name=\"text\" part=\"text\"></slot>\n        <slot name=\"action\" part=\"action\"></slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileSideBarFooterItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-footer-item': NileSideBarFooterItem;\n  }\n}\n"]}
+{"version":3,"file":"nile-side-bar-footer-item.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-item/nile-side-bar-footer-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAkC,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,iCAAiC,CAAC;AACzD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;;;;;;;;;GAaG;AAEI,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,WAAW;IAA/C;;QACsC,SAAI,GAAkB,IAAI,CAAC;IAuBxE,CAAC;IArBQ,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,YAAY,EAAE;YAC/C,MAAM,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE;YAC3B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC,CAAC;IACN,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;oDACqC,IAAI,CAAC,WAAW;;;;;KAK/D,CAAC;IACJ,CAAC;CACF,CAAA;AAvB4C;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAA4B;AAD3D,qBAAqB;IADjC,aAAa,CAAC,2BAA2B,CAAC;GAC9B,qBAAqB,CAwBjC;;AAED,eAAe,qBAAqB,CAAC","sourcesContent":["import { html, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-side-bar-footer-item.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile side-bar-footer-item component.\n *\n * @tag nile-side-bar-footer-item\n *\n * @slot icon - Slot for footer item icon\n * @slot text - Slot for footer item text\n * @slot action - Slot for footer item action\n *\n * @csspart base - Wrapper for the footer item\n * @csspart icon - Wrapper for the icon slot\n * @csspart text - Wrapper for the text slot\n * @csspart action - Wrapper for the action slot\n */\n@customElement('nile-side-bar-footer-item')\nexport class NileSideBarFooterItem extends NileElement {\n  @property({ type: String, reflect: true }) type: string | null = null;\n\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  private handleClick(): void {\n    this.dispatchEvent(new CustomEvent('nile-click', {\n      detail: { type: this.type },\n      bubbles: true,\n      composed: true\n    }));\n  }\n\n  public render(): TemplateResult {\n    return html`\n      <div part=\"base\" class=\"footer-item\" @click=${this.handleClick}>\n        <slot name=\"icon\" part=\"icon\"></slot>\n        <slot name=\"text\" part=\"text\"></slot>\n        <slot name=\"action\" part=\"action\"></slot>\n      </div>\n    `;\n  }\n}\n\nexport default NileSideBarFooterItem;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-side-bar-footer-item': NileSideBarFooterItem;\n  }\n}\n"]}

package/dist/src/nile-side-bar-footer-text/nile-side-bar-footer-text.css.js

@@ -12,17 +12,18 @@ export const styles = css `
   }
 
   .main {
-    font-size: var(--nile-type-scale-3);
-    font-weight: 500;
-    color: var(--nile-colors-dark-900);
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
   }
 
   .sub {
-    font-size: var(--nile-type-scale-2);
-    color: var(--nile-colors-dark-500);
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;

package/dist/src/nile-side-bar-footer-text/nile-side-bar-footer-text.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-footer-text.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-text/nile-side-bar-footer-text.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    line-height: 1.2;\n  }\n\n  .footer-text {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .main {\n    font-size: var(--nile-type-scale-3);\n    font-weight: 500;\n    color: var(--nile-colors-dark-900);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .sub {\n    font-size: var(--nile-type-scale-2);\n    color: var(--nile-colors-dark-500);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-side-bar-footer-text.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-footer-text/nile-side-bar-footer-text.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n  :host {\n    display: block;\n    line-height: 1.2;\n  }\n\n  .footer-text {\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n  }\n\n  .main {\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .sub {\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-side-bar-group/nile-side-bar-group.css.js

@@ -6,10 +6,9 @@ export const styles = css `
   :host {
     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-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
+    padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
 
@@ -19,31 +18,29 @@ export const styles = css `
   }
 
   .group-label {
-    font-weight: var(--nile-font-weight-semibold);
+    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));
     text-transform: uppercase;
     letter-spacing: 1px;
-    margin-bottom: var(--nile-spacing-xs);
+    margin-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));
   }
   :host([divider])::before {
   content: "";
   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);
- 
+  background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+ margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
+ margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
 }
  
 .side-bar-group {
   display: flex;
   flex-direction: column;
-  gap: var(--nile-spacing-xs)
+  gap: var(--nile-spacing-xs, var(--ng-spacing-xs));
 }
 
 
 :host ::slotted(nile-side-bar-group-item:first-child) {
-  margin-top: var(--nile-spacing-xs);
+  margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));
 }
 
 :host([collapsed]) .side-bar-group {

package/dist/src/nile-side-bar-group/nile-side-bar-group.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-side-bar-group.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group/nile-side-bar-group.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarGroup CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: var(--nile-spacing-xs);\n    padding-left: var(--nile-spacing-md);\n    padding-right: var(--nile-spacing-md);\n    gap: var(--nile-spacing-lg);\n  }\n\n\n  :host([footer]) {\n    margin-top: auto;\n    margin-bottom: var(--nile-spacing-md);\n  }\n\n  .group-label {\n    font-weight: var(--nile-font-weight-semibold);\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    margin-bottom: var(--nile-spacing-xs);\n  }\n  :host([divider])::before {\n  content: \"\";\n  display: block;\n  height: 1px;\n  background: var(--nile-colors-neutral-400);\n  margin-top: var(--nile-spacing-xs);\n margin-left: var(--nile-spacing-md);\n margin-right: var(--nile-spacing-md);\n \n}\n \n.side-bar-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nile-spacing-xs)\n}\n\n\n:host ::slotted(nile-side-bar-group-item:first-child) {\n  margin-top: var(--nile-spacing-xs);\n}\n\n:host([collapsed]) .side-bar-group {\nalign-items: center;\njustify-content: center;\n}\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-side-bar-group.css.js","sourceRoot":"","sources":["../../../src/nile-side-bar-group/nile-side-bar-group.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * SideBarGroup CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    flex-direction: column;\n    padding-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));\n    padding-left: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    padding-right: var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n\n  :host([footer]) {\n    margin-top: auto;\n    margin-bottom: var(--nile-spacing-md);\n  }\n\n  .group-label {\n    font-weight: var(--nile-font-weight-semibold, var(--ng-font-weight-semibold));\n    text-transform: uppercase;\n    letter-spacing: 1px;\n    margin-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n  :host([divider])::before {\n  content: \"\";\n  display: block;\n  height: 1px;\n  background: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));\n margin-left: var(--nile-spacing-md, var(--ng-spacing-md));\n margin-right: var(--nile-spacing-md, var(--ng-spacing-md));\n}\n \n.side-bar-group {\n  display: flex;\n  flex-direction: column;\n  gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n}\n\n\n:host ::slotted(nile-side-bar-group-item:first-child) {\n  margin-top: var(--nile-spacing-xs, var(--ng-spacing-xs));\n}\n\n:host([collapsed]) .side-bar-group {\nalign-items: center;\njustify-content: center;\n}\n`;\n\nexport default [styles];\n"]}