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

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "1.3.9-beta-1.2",
+  "version": "1.3.9-beta-1.3",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/index.ts

@@ -14,7 +14,6 @@ export { NileSlideToggle } from './nile-slide-toggle';
 export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
-export { NileSkeletonLoader } from './nile-skeleton-loader';
 export { NileSelect } from './nile-select';
 export { NileVirtualSelect } from './nile-virtual-select';
 export { NileOption } from './nile-option';
@@ -110,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-calendar/nile-calendar.ts

@@ -751,15 +751,6 @@ ${this.showMonthDropdown || this.showYearDropdown ? html`
         }
         this.isSelectingStart = false;
       } else {
-        if (
-          this.startDate &&
-          selectedDate.getFullYear() === this.startDate.getFullYear() &&
-          selectedDate.getMonth() === this.startDate.getMonth() &&
-          selectedDate.getDate() === this.startDate.getDate()
-        ) {
-          return; 
-        }
-    
         this.isSelectingStart = true;
 
         if (this.startDate && selectedDate < this.startDate) {

package/src/nile-icon/icons/svg/index.ts

@@ -293,6 +293,7 @@ export { default as newcalendar } from './new-calendar';
 export { default as ngaction } from './ng-action';
 export { default as ngactivity } from './ng-activity';
 export { default as ngalertcircle } from './ng-alert-circle';
+export { default as ngalerttriangle } from './ng-alert-triangle';
 export { default as ngaligncenter } from './ng-align-center';
 export { default as ngannotationx } from './ng-annotation-x';
 export { default as ngarrowdown } from './ng-arrow-down';

package/src/nile-icon/icons/svg/ng-alert-triangle.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOS45OTk3NSA3LjUwMDE5VjEwLjgzMzVNOS45OTk3NSAxNC4xNjY5SDEwLjAwODFNOC44NDU4NSAzLjI0MzI5TDEuOTkxNzggMTUuMDgyMUMxLjYxMTYxIDE1LjczODggMS40MjE1MyAxNi4wNjcxIDEuNDQ5NjIgMTYuMzM2NkMxLjQ3NDEyIDE2LjU3MTYgMS41OTcyNyAxNi43ODUyIDEuNzg4NCAxNi45MjQyQzIuMDA3NTMgMTcuMDgzNSAyLjM4NjkxIDE3LjA4MzUgMy4xNDU2OCAxNy4wODM1SDE2Ljg1MzhDMTcuNjEyNiAxNy4wODM1IDE3Ljk5MiAxNy4wODM1IDE4LjIxMTEgMTYuOTI0MkMxOC40MDIyIDE2Ljc4NTIgMTguNTI1NCAxNi41NzE2IDE4LjU0OTkgMTYuMzM2NkMxOC41NzggMTYuMDY3MSAxOC4zODc5IDE1LjczODggMTguMDA3NyAxNS4wODIxTDExLjE1MzcgMy4yNDMyOUMxMC43NzQ4IDIuNTg4OTkgMTAuNTg1NCAyLjI2MTg0IDEwLjMzODMgMi4xNTE5NkMxMC4xMjI4IDIuMDU2MTIgOS44NzY3MiAyLjA1NjEyIDkuNjYxMTcgMi4xNTE5NkM5LjQxNDA2IDIuMjYxODQgOS4yMjQ2NiAyLjU4ODk5IDguODQ1ODUgMy4yNDMyOVoiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS42IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz48L3N2Zz4=";

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

@@ -12,14 +12,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;
 }
@@ -27,17 +27,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));
 }
 
  
@@ -45,15 +45,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 +60,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-action-menu/nile-side-bar-action-menu.css.ts

@@ -49,7 +49,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/src/nile-side-bar-action-menu-item/nile-side-bar-action-menu-item.css.ts

@@ -117,7 +117,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/src/nile-side-bar-expand/nile-side-bar-expand.css.ts

@@ -19,28 +19,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;
-  }
-
- 
+} 
 
 `;
 

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);
- 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);
 }
 
@@ -20,19 +20,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/src/nile-side-bar-footer-item/nile-side-bar-footer-item.css.ts

@@ -10,11 +10,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;
@@ -53,9 +57,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;
  
@@ -70,7 +93,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-footer-text/nile-side-bar-footer-text.css.ts

@@ -13,17 +13,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/src/nile-side-bar-group/nile-side-bar-group.css.ts

@@ -7,10 +7,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));
   }
 
 
@@ -20,31 +19,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/src/nile-side-bar-group-item/nile-side-bar-group-item.css.ts

@@ -11,60 +11,65 @@ 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: var(--nile-height-38px, var(--ng-spacing-40px));
+    width: var(--nile-width-208px, var(--ng-spacing-264));
+    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-top: var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding-bottom: var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding-left: var(--nile-spacing-md, var(--ng-spacing-lg));
+    padding-right: var(--nile-spacing-md, var(--ng-spacing-lg));
+    cursor: pointer;
+    color: var(--nile-colors-dark-900, var(--ng-colors-graylightmode-900));
+    text-decoration: none;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    line-height: 1.4;
+    box-sizing: border-box;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));
+  }
 
-.item-link:hover {
-  background: var(--nile-colors-neutral-400);
-  border-radius: var(--nile-radius-sm);
-}
+  .item-link:hover {
+    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));
+    border-radius: var(--nile-radius-sm, var(--ng-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, var(--ng-colors-bg-brand-primary));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+  }
 
+  :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];