@aquera/nile-elements 0.1.46-beta-2.2 → 0.1.46-beta-2.3

package/src/nile-select/nile-select.ts

@@ -15,6 +15,7 @@ import { styles } from './nile-select.css';
 import '../nile-icon';
 import '../nile-popup/nile-popup';
 import '../nile-tag/nile-tag';
+import '../nile-virtual-select/nile-virtual-select';
 import { animateTo, stopAnimations } from '../internal/animate';
 import { classMap } from 'lit/directives/class-map.js';
 import { query, state } from 'lit/decorators.js';
@@ -35,6 +36,7 @@ import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { VirtualScrollHelper } from './virtual-scroll-helper';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -53,6 +55,7 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @dependency nile-icon
  * @dependency nile-popup
  * @dependency nile-tag
+ * @dependency nile-virtual-select
  *
  * @slot - The listbox options. Must be `<nile-option>` elements. You can use `<nile-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
@@ -104,6 +107,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     'help-text',
     'label'
   );
+  private virtualScrollHelper!: VirtualScrollHelper;
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
 
@@ -158,11 +162,19 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @property({ type: Boolean, reflect: true }) noWidthSync = false;
 
+  /** Enable virtual scrolling for large datasets. When enabled, the component will use `nile-virtual-select` internally for better performance with large option lists. */
+  @property({ type: Boolean }) enableVirtualScroll = false;
+
+  /** Array of all option items for virtual scrolling. Required when `enableVirtualScroll` is true. */
+  @property({ type: Array }) allOptionItems: any = [];
+
+  /** Function to render items in virtual select. Defaults to displaying the `label` or `name` property of the item. */
+  @property({ attribute: false }) renderItemFunction: (item: any) => string = (item: any) => item?.label || item;
+
   /** Allows more than one option to be selected. */
   @property({ type: Boolean, reflect: true }) multiple = false;
 
-  @property({ attribute: true, reflect: true }) helpText = '';
-  @property({ attribute: 'help-text', reflect: true }) help_text = '';
+  @property({ attribute: 'help-text', reflect: true }) helpText = '';
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
@@ -235,16 +247,23 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Gets the validity state object */
   get validity() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return this.virtualScrollHelper.getValidity();
+    }
     return this.valueInput?.validity;
   }
 
   /** Gets the validation message */
   get validationMessage() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return this.virtualScrollHelper.getValidationMessage();
+    }
     return this.valueInput?.validationMessage;
   }
 
   connectedCallback() {
     super.connectedCallback();
+    this.virtualScrollHelper = new VirtualScrollHelper(this);
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -272,17 +291,29 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleFocus() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     this.hasFocus = true;
     this.displayInput.setSelectionRange(0, 0);
     this.emit('nile-focus', { value: this.value, name: this.name });
   }
 
   private handleBlur() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     this.hasFocus = false;
     this.emit('nile-blur', { value: this.value, name: this.name });
   }
 
   private handleDocumentFocusIn(event: FocusEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     // Close when focusing out of the select
     const path = event.composedPath();
     if (this && !path.includes(this)) {
@@ -341,6 +372,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleDocumentKeyDown(event: KeyboardEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     const target = event.target as HTMLElement;
     const isClearButton = target.closest('.select__clear') !== null;
     const isIconButton = target.closest('nile-icon-button') !== null;
@@ -441,6 +476,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleDocumentMouseDown(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     // Close when clicking outside of the select
     const path = event.composedPath();
     if (this && !path.includes(this)) {
@@ -454,6 +493,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleComboboxMouseDown(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     const path = event.composedPath();
     const isIconButton = path.some(
       el =>
@@ -471,11 +514,19 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleComboboxKeyDown(event: KeyboardEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     event.stopPropagation();
     this.handleDocumentKeyDown(event);
   }
 
   private handleClearClick(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     event.stopPropagation();
 
     if (this.value !== '') {
@@ -493,12 +544,20 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleClearMouseDown(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     // Don't lose focus or propagate events when clicking the clear button
     event.stopPropagation();
     event.preventDefault();
   }
 
   private handleOptionClick(event: MouseEvent) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     const target = event.target as HTMLElement;
     const option = target.closest('nile-option');
 
@@ -571,6 +630,10 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleTagRemove(event: NileRemoveEvent, option: NileOption) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     event.stopPropagation();
 
     if (!this.disabled) {
@@ -742,14 +805,26 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   handleSearchFocus() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   handleSearchBlur() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     document.addEventListener('keydown', this.handleDocumentKeyDown);
   }
 
   handleSearchChange(e: any) {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     this.searchValue = e.detail.value;
     if (!this.disableLocalSearch) {
       let filteredOptions = this.filterOptions(this.searchValue);
@@ -792,6 +867,11 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @watch('disabled', { waitUntilFirstUpdate: true })
   handleDisabledChange() {
+    // If virtual scroll is enabled, let the virtual select handle disabled changes
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     // Close the listbox when the control is disabled
     if (this.disabled) {
       this.open = false;
@@ -801,6 +881,11 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @watch('value', { waitUntilFirstUpdate: true })
   handleValueChange() {
+    // If virtual scroll is enabled, let the virtual select handle value changes
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     const allOptions = this.getAllOptions();
     const value = Array.isArray(this.value) ? this.value : [this.value];
 
@@ -810,6 +895,11 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   @watch('open', { waitUntilFirstUpdate: true })
   async handleOpenChange() {
+    // If virtual scroll is enabled, let the virtual select handle the open/close logic
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return;
+    }
+
     if (this.open && !this.disabled) {
       // Reset the current option
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
@@ -863,6 +953,10 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Shows the listbox. */
   async show() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return this.virtualScrollHelper.show();
+    }
+
     if (this.open || this.disabled) {
       this.open = false;
       return undefined;
@@ -874,6 +968,10 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Hides the listbox. */
   async hide() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return this.virtualScrollHelper.hide();
+    }
+
     if (!this.open || this.disabled) {
       this.open = false;
       return undefined;
@@ -885,6 +983,9 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
   checkValidity() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return this.virtualScrollHelper.checkValidity();
+    }
     return this.valueInput.checkValidity();
   }
 
@@ -895,23 +996,38 @@ export class NileSelect extends NileElement implements NileFormControl {
 
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
   reportValidity() {
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return this.virtualScrollHelper.reportValidity();
+    }
     return this.valueInput.reportValidity();
   }
 
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message: string) {
-    this.valueInput.setCustomValidity(message);
-    this.formControlController.updateValidity();
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      this.virtualScrollHelper.setCustomValidity(message);
+    } else {
+      this.valueInput.setCustomValidity(message);
+      this.formControlController.updateValidity();
+    }
   }
 
   /** Sets focus on the control. */
   focus(options?: FocusOptions) {
-    this.displayInput.focus(options);
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      this.virtualScrollHelper.focus(options);
+    } else {
+      this.displayInput.focus(options);
+    }
   }
 
   /** Removes focus from the control. */
   blur() {
-    this.displayInput.blur();
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      this.virtualScrollHelper.blur();
+    } else {
+      this.displayInput.blur();
+    }
   }
 
   onInputChange(event: Event) {
@@ -929,6 +1045,8 @@ export class NileSelect extends NileElement implements NileFormControl {
     }
   }
 
+
+
   calculateTotalWidthOfTags() {
     if (this.maxOptionsVisible !== Infinity) {
       this.oldMaxOptionsVisible = this.maxOptionsVisible;
@@ -974,6 +1092,16 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   render() {
+    // If virtual scroll is enabled, render the virtual select component
+    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
+      return this.virtualScrollHelper.renderVirtualizedContent();
+    }
+
+    // Otherwise render the regular select content
+    return this.getRegularContent();
+  }
+
+  private getRegularContent() {
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');
@@ -982,7 +1110,7 @@ export class NileSelect extends NileElement implements NileFormControl {
     const hasClearIcon =
       this.clearable && !this.disabled && this.value.length > 0;
     const isPlaceholderVisible = this.placeholder && this.value.length === 0;
-    const hasHelpText = (this.helpText || this.help_text) ? true : false;
+    const hasHelpText = this.helpText ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
     const prefixContent = this.selectedOptions[0]
       ? this.getOptionPrefix(this.selectedOptions[0])
@@ -1285,7 +1413,7 @@ export class NileSelect extends NileElement implements NileFormControl {
         </div>
 
         ${hasHelpText
-          ? html` <nile-form-help-text>${(this.helpText || this.help_text)}</nile-form-help-text> `
+          ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
           : ``}
         ${hasErrorMessage
           ? html`

package/src/nile-select/virtual-scroll-helper.ts

@@ -0,0 +1,228 @@
+
+import { html } from 'lit';
+import type NileElement from '../internal/nile-element';
+
+/**
+ * Helper class to manage virtual scroll functionality for nile-select component
+ */
+export class VirtualScrollHelper {
+  private component: NileElement;
+
+  constructor(component: NileElement) {
+    this.component = component;
+  }
+
+  /**
+   * Checks if virtual scroll is enabled for the component
+   */
+  isVirtualScrollEnabled(): boolean {
+    return (this.component as any).enableVirtualScroll === true;
+  }
+
+  /**
+   * Gets the virtual select element from the shadow root
+   */
+  getVirtualSelectElement(): any {
+    return this.component.shadowRoot?.querySelector('nile-virtual-select');
+  }
+
+  getValidity(): any {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.validity;
+    }
+    return {
+      badInput: false,
+      customError: false,
+      patternMismatch: false,
+      rangeOverflow: false,
+      rangeUnderflow: false,
+      stepMismatch: false,
+      tooLong: false,
+      tooShort: false,
+      typeMismatch: false,
+      valid: true,
+      valueMissing: false
+    };
+  }
+
+  getValidationMessage(): string {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.validationMessage;
+    }
+    return '';
+  }
+
+  checkValidity(): boolean {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.checkValidity();
+    }
+    return true;
+  }
+
+  reportValidity(): boolean {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.reportValidity();
+    }
+    return true;
+  }
+
+  setCustomValidity(message: string): void {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      virtualSelect.setCustomValidity(message);
+    }
+  }
+
+ 
+  focus(options?: FocusOptions): void {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      virtualSelect.focus(options);
+    }
+  }
+
+  blur(): void {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      virtualSelect.blur();
+    }
+  }
+
+  async show(): Promise<any> {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.show();
+    }
+    return;
+  }
+ 
+  async hide(): Promise<any> {
+    const virtualSelect = this.getVirtualSelectElement();
+    if (virtualSelect) {
+      return virtualSelect.hide();
+    }
+    return;
+  }
+
+  renderVirtualizedContent(): any {
+    const component = this.component as any;
+    
+    return html`
+      <nile-virtual-select
+        .name=${component.name}
+        .value=${component.value}
+        .placeholder=${component.placeholder}
+        .size=${component.size}
+        .searchEnabled=${component.searchEnabled}
+        .internalSearchPlaceHolder=${component.internalSearchPlaceHolder}
+        .disableLocalSearch=${component.disableLocalSearch}
+        .optionsLoading=${component.optionsLoading}
+        .multiple=${component.multiple}
+        .helpText=${component.helpText}
+        .errorMessage=${component.errorMessage}
+        .warning=${component.warning}
+        .error=${component.error}
+        .success=${component.success}
+        .disabled=${component.disabled}
+        .clearable=${component.clearable}
+        .hoist=${component.hoist}
+        .filled=${component.filled}
+        .pill=${component.pill}
+        .label=${component.label}
+        .placement=${component.placement}
+        .form=${component.form}
+        .required=${component.required}
+        .showNoResults=${component.showNoResults}
+        .noResultsMessage=${component.noResultsMessage}
+        .renderItemFunction=${component.renderItemFunction}
+        .blockValueChange=${component.blockValueChange}
+        .noWidthSync=${component.noWidthSync}
+        .maxOptionsVisible=${component.maxOptionsVisible}
+        .allOptionItems=${component.allOptionItems}
+        @nile-change=${this.handleVirtualSelectChange.bind(this)}
+        @nile-input=${this.handleVirtualSelectInput.bind(this)}
+        @nile-clear=${this.handleVirtualSelectClear.bind(this)}
+        @nile-focus=${this.handleVirtualSelectFocus.bind(this)}
+        @nile-blur=${this.handleVirtualSelectBlur.bind(this)}
+        @nile-show=${this.handleVirtualSelectShow.bind(this)}
+        @nile-after-show=${this.handleVirtualSelectAfterShow.bind(this)}
+        @nile-hide=${this.handleVirtualSelectHide.bind(this)}
+        @nile-after-hide=${this.handleVirtualSelectAfterHide.bind(this)}
+        @nile-invalid=${this.handleVirtualSelectInvalid.bind(this)}
+        @nile-tag-remove=${this.handleVirtualSelectTagRemove.bind(this)}
+        @nile-init=${this.handleVirtualSelectInit.bind(this)}
+        @nile-block-change=${this.handleVirtualSelectBlockChange.bind(this)}
+        @nile-filter-update=${this.handleVirtualSelectFilterUpdate.bind(this)}
+      >
+        <slot name="label" slot="label"></slot>
+        <slot name="prefix" slot="prefix"></slot>
+        <slot name="clear-icon" slot="clear-icon"></slot>
+        <slot name="expand-icon" slot="expand-icon"></slot>
+        <slot name="help-text" slot="help-text"></slot>
+      </nile-virtual-select>
+    `;
+  }
+
+  private handleVirtualSelectChange(event: CustomEvent) {
+    (this.component as any).value = event.detail.value;
+    this.component.emit('nile-change', { detail: event.detail });
+  }
+
+  private handleVirtualSelectInput(event: CustomEvent) {
+    this.component.emit('nile-input', { detail: event.detail });
+  }
+
+  private handleVirtualSelectClear(event: CustomEvent) {
+    this.component.emit('nile-clear', { detail: event.detail });
+  }
+
+  private handleVirtualSelectFocus(event: CustomEvent) {
+    (this.component as any).hasFocus = true;
+    this.component.emit('nile-focus', { detail: event.detail });
+  }
+
+  private handleVirtualSelectBlur(event: CustomEvent) {
+    (this.component as any).hasFocus = false;
+    this.component.emit('nile-blur', { detail: event.detail });
+  }
+
+  private handleVirtualSelectShow(event: CustomEvent) {
+    this.component.emit('nile-show', { detail: event.detail });
+  }
+
+  private handleVirtualSelectAfterShow(event: CustomEvent) {
+    this.component.emit('nile-after-show', { detail: event.detail });
+  }
+
+  private handleVirtualSelectHide(event: CustomEvent) {
+    this.component.emit('nile-hide', { detail: event.detail });
+  }
+
+  private handleVirtualSelectAfterHide(event: CustomEvent) {
+    this.component.emit('nile-after-hide', { detail: event.detail });
+  }
+
+  private handleVirtualSelectInvalid(event: CustomEvent) {
+    this.component.emit('nile-invalid', { detail: event.detail });
+  }
+
+  private handleVirtualSelectTagRemove(event: CustomEvent) {
+    this.component.emit('nile-tag-remove', { detail: event.detail });
+  }
+
+  private handleVirtualSelectInit(event: CustomEvent) {
+    this.component.emit('nile-init', { detail: event.detail });
+  }
+
+  private handleVirtualSelectBlockChange(event: CustomEvent) {
+    this.component.emit('nile-block-change', { detail: event.detail });
+  }
+
+  private handleVirtualSelectFilterUpdate(event: CustomEvent) {
+    this.component.emit('nile-filter-update', { detail: event.detail });
+  }
+} 

package/src/nile-sidebar/index.ts

@@ -28,26 +28,23 @@ export class NileSidebar extends LitElement {
   static override styles = css`
     :host {
       background-color: var(--nile-alert-color-background-base);
-      border-right: 1px solid var(--nile-colors-neutral-400);
+      border-right: 1px solid var(--nile-colors-neutral-400);      
       min-height: 100vh;
       background: var(--nile-colors-neutral-100);
       border: 1px solid var(--nile-colors-neutral-400);
-      -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));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
     }
     :host([showSidebar=true]) {
       min-width: 240px;
     }
     .nile-logo {
-      margin: var(--nile-spacing-2xl);
+      margin: 24px;
       display: block;
-      margin-bottom: var(--nile-spacing-lg);
+      margin-bottom: 12px;
     }
 
     .menu-group {
-      margin-left: var(--nile-spacing-2xl);
-      margin-right: var(--nile-spacing-2xl);
+      margin-left: 24px;
+      margin-right: 24px;
     }
 
     .view-component {
@@ -58,15 +55,15 @@ export class NileSidebar extends LitElement {
     .view-component__item {
       background-color: var(--nile-colors-white-base);
       // padding: 1rem;
-      border-radius: var(--nile-radius-sm);
+      border-radius: 3px;
       border: solid 1px #eee;
     }
 
     .nile-menu__hr {
-      border-bottom: solid 1px var(--nile-colors-dark-100);
-      margin-top: var(--nile-spacing-lg) !important;
-      margin-bottom: var(--nile-spacing-lg) !important;
-      background-color: var(--nile-colors-dark-100);
+      border-bottom: solid 1px rgba(0, 0, 0, 0.1);
+      margin-top: 12px !important;
+      margin-bottom: 12px !important;
+      background-color: rgba(0, 0, 0, 0.1);
     }
 
     .nds-menu--bottom {
@@ -98,7 +95,7 @@ export class NileSidebar extends LitElement {
   }
 
   // class="nds-menu ${classMap(this.buttonClassMap)}"
-
+  
   override render() {
     return html`
       <div class="nile-menu--wrapper  ${classMap(this.buttonClassMap)}" >
@@ -111,7 +108,7 @@ export class NileSidebar extends LitElement {
               height="31.06px"
               tabindex="1"
             />
-          </a>
+          </a>          
           <div class="menu-group">
             <slot name="menu"></slot>
           </div>

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

@@ -19,11 +19,8 @@ export const styles = css`
     height: 100%;
     box-sizing: border-box;
     display: flex;
-    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
+    padding: 0 16px;
     flex-direction: column;
-    -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));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .submenu__box {
@@ -32,19 +29,19 @@ export const styles = css`
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
-    padding: var(--nile-spacing-lg) var(--nile-spacing-none);
+    padding:12px 0;
   }
 
   .sidemenu__items-list {
     display:flex;
     flex-direction: column;
-    gap: var(--nile-spacing-md);
+    gap: 8px;
   }
 
   .footer {
     display:flex;
     flex-direction: column;
-    gap: var(--nile-spacing-md);
+    gap: 8px;
   }
 
 `;