@aquera/nile-elements 1.0.1 → 1.1.0-beta-1.0

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

@@ -38,8 +38,6 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import '../nile-virtual-select/nile-virtual-select';
 import { VirtualScrollHelper } from './virtual-scroll-helper';
-import NileOptionGroup from '../nile-option-group/nile-option-group';
-import { GroupAttributes } from './nile-select.interface';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -77,10 +75,6 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  * @event nile-hide - Emitted when the select's menu closes.
  * @event nile-after-hide - Emitted after the select's menu closes and all animations are complete.
  * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- * @event nile-search - Emitted when the user types in the search input. The event payload includes the search query for backend search functionality.
- * @event nile-scroll - Emitted when the user scrolls within the listbox. The event payload includes scroll position information.
- * @event nile-scroll-start - Emitted when the user starts scrolling within the listbox.
- * @event nile-scroll-end - Emitted when the user stops scrolling and reaches the bottom of the listbox (debounced).
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -117,9 +111,6 @@ export class NileSelect extends NileElement implements NileFormControl{
   );
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
-  private scrollTimeout: number | undefined;
-  private scrolling = false;
-  private options: NileOption[] = [];
 
   @query('.select') popup: NilePopup;
   @query('.select__combobox') combobox: HTMLSlotElement;
@@ -189,8 +180,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   multiple = false as boolean | string;
   
 
-  @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 = '';
 
@@ -268,12 +258,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: Boolean }) enableVirtualScroll = false;
 
-  /** To enable the group header in the select */
-  @property({ type: Boolean, reflect: true, attribute: true }) enableGroupHeader = false;
-
-  /** To auto focus the search input when the select is opened */
-  @property({ type: Boolean, reflect: true, attribute: true }) autoFocusSearch = false;
-
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -307,14 +291,11 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    // Clear any pending scroll timeout to prevent memory leaks
-    if (this.scrollTimeout) {
-      clearTimeout(this.scrollTimeout);
-      this.scrollTimeout = undefined;
-    }
     this.emit('nile-destroy');
   }
 
+  private options: NileOption[] = [];
+
   protected updated(_changedProperties: PropertyValues): void {
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
@@ -322,10 +303,6 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   protected firstUpdated(_changedProperties: PropertyValues): void {
-    if(this.enableGroupHeader) {
-      this.handleGroupSearchChange();
-    }
-
     if(_changedProperties.has('multiple')) {
       this.setCheckBoxInOption(this.multiple as boolean);
     }
@@ -402,9 +379,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       }
     });
 
-    if(this.enableGroupHeader) {
-      this.handleGroupShowSelected();
-    }
     // this.requestUpdate();
   }
 
@@ -418,9 +392,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       el.selected = false;
       el.hidden = false;
     });
-    if(this.enableGroupHeader) {
-      this.handleGroupShowSelected();
-    }
     this.value = '';
     this.selectionChanged();
     this.emit('nile-change', { value: this.value, name: this.name });
@@ -570,9 +541,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.showSelected = false;
       this.value = '';
       this.displayInput.focus({ preventScroll: true });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
 
       // Emit after update
       this.updateComplete.then(() => {
@@ -636,9 +604,7 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
+
       this.requestUpdate();
     }
   }
@@ -676,9 +642,6 @@ export class NileSelect extends NileElement implements NileFormControl{
           el.hidden = this.showSelected;
         }
       });
-      if(this.enableGroupHeader) {
-        this.handleGroupShowSelected();
-      }
 
       // Emit after updating
       this.updateComplete.then(() => {
@@ -848,14 +811,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   handleSearchChange(e: any) {
     this.searchValue = e.detail.value;
-    this.emit('nile-search', {
-      query: this.searchValue,
-      name: this.name
-    });
-
-    if(this.enableGroupHeader) {
-      this.handleGroupSearchChange();
-    }
     if (!this.disableLocalSearch) {
       let filteredOptions = this.filterOptions(this.searchValue);
       if (filteredOptions.length === 0) {
@@ -867,42 +822,6 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
-  handleScroll(e: Event): void {
-    const target = e.target as HTMLElement;
-
-    this.emit('nile-scroll', {
-      scrollTop: target.scrollTop,
-      scrollLeft: target.scrollLeft,
-      name: this.name
-    });
-
-    if (!this.scrolling) {
-      this.scrolling = true;
-      this.emit('nile-scroll-start', {
-        scrollTop: target.scrollTop,
-        scrollLeft: target.scrollLeft,
-        name: this.name
-      });
-    }
-
-    clearTimeout(this.scrollTimeout);
-    this.scrollTimeout = window.setTimeout(() => {
-      if (this.scrolling) {
-        this.scrolling = false;
-      }
-    }, 300);
-
-    const isAtBottom = Math.ceil(target.scrollTop) >= Math.floor(target.scrollHeight - target.offsetHeight);
-    if (isAtBottom) {
-      this.emit('nile-scroll-end', {
-        scrollTop: target.scrollTop,
-        scrollLeft: target.scrollLeft,
-        name: this.name,
-        isAtBottom: true
-      });
-    }
-  }
-
   filterOptions(searchValue: string) {
     const allOptions = this.getAllOptions();
     const lowerCaseSearchValue = searchValue.toLowerCase();
@@ -955,14 +874,8 @@ export class NileSelect extends NileElement implements NileFormControl{
       // Reset the current option
       this.setCurrentOption(this.selectedOptions[0] || this.getFirstOption());
 
+      // Show
       this.emit('nile-show', { value: this.value, name: this.name });
-
-      if(this.enableGroupHeader) {
-        this.getAllGroupAttributes().forEach((el: GroupAttributes) => {
-          el.element.classList.remove('nile-group-hidden');
-        });
-      }
-
       this.addOpenListeners();
 
       this.showNoResults = !this.getAllOptions()?.length;
@@ -989,9 +902,6 @@ export class NileSelect extends NileElement implements NileFormControl{
       this.filterOptions(this.searchValue);
 
       this.emit('nile-after-show', { value: this.value, name: this.name });
-      if (this.autoFocusSearch) {
-        this.handleInputAfterInit();
-      }
     } else {
       // Hide
       this.emit('nile-hide', { value: this.value, name: this.name });
@@ -1011,46 +921,6 @@ export class NileSelect extends NileElement implements NileFormControl{
     }
   }
 
-  private getAllGroupAttributes() {
-    return Array.from(
-      this.querySelectorAll<NileOptionGroup>('nile-option-group[name]')
-    ).map((el: HTMLElement) => ({
-      name: el?.getAttribute('name') || '',
-      data: el?.getAttribute('data'),
-      element: el
-    }));
-  }
-
-  getUniqueGroupNames(arr: NileOption[]) {
-    return Array.from(new Set(arr.map(obj => obj?.groupName)));
-  }
-  
-  handleGroupSearchChange() {
-    const filtered = new Set(
-      this.getUniqueGroupNames(this.filterOptions(this.searchValue))
-    );
-    this.getAllGroupAttributes().forEach(({ name, element }) => {
-      element?.classList.toggle('nile-group-hidden', !filtered.has(name));
-    });
-  }
-  
-  handleGroupShowSelected() {
-    const visibleGroups = new Set<string>();
-  
-    if (this.showSelected) {
-      this.getAllOptions().forEach((option: NileOption) => {
-        if (!option.hidden) visibleGroups.add(option.groupName);
-      });
-    }
-  
-    this.getAllGroupAttributes().forEach(({ name, element }) => {
-      element?.classList.toggle(
-        'nile-group-hidden',
-        this.showSelected && !visibleGroups.has(name)
-      );
-    });
-  }
-
   /** Shows the listbox. */
   async show() {
     if (this.open || this.disabled) {
@@ -1163,10 +1033,6 @@ export class NileSelect extends NileElement implements NileFormControl{
     }, 1);
   }
 
-  handleInputAfterInit() {
-    this.shadowRoot?.querySelector('nile-input')?.inputFocus();
-  }
-
   render() {
     if(this.enableVirtualScroll) {
       return this.virtualScrollHelper.renderVirtualizedContent();
@@ -1180,7 +1046,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])
@@ -1374,7 +1240,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                       tabindex="-1"
                     >
                       <slot name="clear-icon">
-                        <nile-icon name="var(--nile-icon-close, var(--ng-icon-x-close))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" library="system"></nile-icon>
+                        <nile-icon name="close" library="system"></nile-icon>
                       </slot>
                     </button>
                   `
@@ -1393,7 +1259,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                 part="expand-icon"
                 class="select__expand-icon"
               >
-                <nile-icon library="system" name="var(--nile-icon-arrow-down, var(--ng-icon-chevron-down))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"></nile-icon>
+                <nile-icon library="system" name="arrowdown"></nile-icon>
               </slot>
             </div>
 
@@ -1410,7 +1276,6 @@ export class NileSelect extends NileElement implements NileFormControl{
               tabindex="-1"
               @mouseup=${this.handleOptionClick}
               @slotchange=${this.handleDefaultSlotChange}
-              @scroll=${this.handleScroll}
             >
               ${this.searchEnabled
                 ? html` <div class="select__search">
@@ -1422,9 +1287,8 @@ export class NileSelect extends NileElement implements NileFormControl{
                       @nile-input=${this.handleSearchChange}
                       @nile-focus=${this.handleSearchFocus}
                       @nile-change="${this.onInputChange}"
-                      @nile-after-init=${this.handleInputAfterInit}
                     >
-                      <nile-icon name="var(--nile-icon-search, var(--ng-icon-search-lg))" method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))" slot="suffix"> </nile-icon>
+                      <nile-icon name="search" slot="suffix"> </nile-icon>
                     </nile-input>
                   </div>`
                 : ``}
@@ -1433,8 +1297,7 @@ export class NileSelect extends NileElement implements NileFormControl{
                     <span class="select__loader">
                       <nile-icon
                         class="select__loader--icon"
-                        name="var(--nile-icon-button-loading-blue, var(--ng-icon-button-loading-blue))"
-                        method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
+                        name="button-loading-blue"
                       ></nile-icon>
                     </span>
                   `
@@ -1486,7 +1349,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

@@ -47,27 +47,6 @@ export class VirtualScrollHelper {
           .noWidthSync=${component.noWidthSync}
           .maxOptionsVisible=${component.maxOptionsVisible}
           .data=${component.data}
-          .open=${component.open}
-          exportparts="
-            select-options,
-            select-no-results,
-            virtualized,
-            form-control,
-            form-control-label,
-            form-control-input,
-            combobox,
-            prefix,
-            display-input,
-            tags,
-            tag,
-            clear-button,
-            suffix,
-            expand-icon,
-            listbox,
-            search,
-            loader,
-            footer
-          "
         >
           <slot name="prefix" slot="prefix"></slot>
         </nile-virtual-select>

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;
   }
 
 `;

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

@@ -13,29 +13,26 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     --min-width: 280px;
-    -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));
   }
 
   .nile__sidebar-menu-item {
     display: flex;
     align-items: center;
-    padding: var(--nile-spacing-md);
-    gap: var(--nile-spacing-xl);
+    padding: 12px;
+    gap: 15px;
     min-width: var(--min-width);
     width: max-content;
     box-sizing: border-box;
 
     font-family: var(--nile-font-family-serif);
     font-size: var(--nile-type-scale-4);
-    font-weight: var(--nile-font-weight-medium);
+    font-weight: 500;
     line-height: var(--nile-line-height-medium);
   }
 
   .nile__sidebar-menu-item:hover {
     background-color: var(--nile-colors-neutral-100);
-    border-radius: var(--nile-radius-sm);
+    border-radius: 6px;
   }
 
   .hide-sidebar-menu-items{

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

@@ -57,7 +57,6 @@ export class NileSidebarMenuItems extends NileElement {
               name="${this.iconValue}"
               aria-label="${this.iconValue}"
               size="24"
-              method="var(--nile-svg-method-fill, var(--ng-svg-method-stroke))"
             ></nile-icon>`
           : ``}
         <slot

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

@@ -13,9 +13,6 @@ import { css } from 'lit';
 export const styles = css`
   :host {
     display: block;
-    -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));
   }
 
   .wrapper-box {
@@ -36,7 +33,7 @@ export const styles = css`
   .body-content {
     display: flex;
     height: 100%;
-    background-color: var(--nile-colors-red-500);
+    background-color: red;
   }
 
   .sidebar__content--overlay {

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

@@ -5,9 +5,6 @@ export default css`
     --slide-toggle-width:auto;
     display:inline-block;
     width:var(--slide-toggle-width);
-    -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));
   }
 
   .nile-slide-toggle {
@@ -27,43 +24,43 @@ export default css`
     display: inline-block;
     width: 36px;
     height: 20px;
-    line-height: var(--nile-height-22px, var(--ng-height-20px));
+    line-height: 22px;
   }
 
   .nile-slide-toggle__switch--left{
-    margin-right: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-right: 8px;
   }
 
   .nile-slide-toggle__switch--right{
-    margin-left: var(--nile-spacing-md, var(--ng-spacing-md));
+    margin-left: 8px;
   }
 
   .nile-slide-toggle__label {
     display: flex;
     flex-direction: column;
-    gap: var(--nile-spacing-xxs, var(--ng-spacing-xxs));
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    gap: 2px;
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));
-    line-height: var(--nile-spacing-spacing-2xl, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-dark-900);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
   }
 
   .nile-slide-toggle__sublabel {
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-family: var(--nile-font-family-serif);
     letter-spacing: 0.2px;
     font-style: normal;
-    color: var(--nile-colors-gray-light-mode-600, var(--ng-colors-text-tertiary-600));
-    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
-    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));
+    color: var(--nile-colors-gray-light-mode-600);
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
   }
 
   .nile-slide--disabled .nile-slide-toggle__label,
   .nile-slide--disabled .nile-slide-toggle__sublabel{
-    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    color: var(--nile-colors-dark-500);
   }
 
   .nile-slide-toggle__switch input {
@@ -79,23 +76,17 @@ export default css`
     left: 0;
     right: 0;
     bottom: 0;
-    background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary));
+    background-color: var(--nile-slide-toggle-color-background-inactive);
     transition: 0.4s;
-    border-radius: var(--nile-radius-3xl, var(--ng-radius-full));
+    border-radius: 34px;
   }
 
   .nile-slide-toggle__slider:active {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:focus {
-    box-shadow: var(--nile-box-shadow-4, var(--ng-focus-ring));
-  }
-
-  .nile-slide-toggle__slider:hover {
-    &:not(.nile-slide--disabled) {
-      background-color: var(--nile-slide-toggle-color-background-inactive, var(--ng-colors-bg-quaternary-alt));
-    }
+    box-shadow: 0px 0px 0px 1px rgba(133, 170, 209, 0.54);
   }
 
   .nile-slide-toggle__slider:before {
@@ -105,20 +96,17 @@ export default css`
     width: 16px;
     bottom: 2px;
     left: 2px;
-    background-color: var(--nile-slide-toggle-color-indicator, var(--ng-colors-bg-primary-alt));
+    background-color: var(--nile-slide-toggle-color-indicator);
     transition: 0.4s;
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
-    box-shadow: 0px 1px 3px 0px var(--ng-colors-effects-shadow-sm-01), 0px 1px 2px -1px var(--ng-colors-effects-shadow-sm-02);
+    border-radius: 50%;
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {
-    background-color: var(--nile-slide-toggle-color-background-active, var(--ng-colors-bg-brand-solid));
+    background-color: var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
-    --focus-shadow-glow: 0 0 1px var(--nile-slide-toggle-color-background-active);
-    --focus-shadow-ring: 0px 0px 0px 2px var(--ng-colors-bg-primary-alt), 0px 0px 0px 4px var(--ng-colors-effects-focus-ring);
-    box-shadow: var(--focus-shadow-glow, var(--ng-focus-ring));
+    box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {
@@ -126,15 +114,15 @@ export default css`
   }
 
   .nile-slide-toggle__slider.round {
-    border-radius: var(--nile-radius-xl, var(--ng-radius-full));
+    border-radius: 20px;
   }
 
   .nile-slide-toggle__slider.round:before {
-    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    border-radius: 50%;
   }
 
   .nile-slide--disabled .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 
   .nile-slide--disabled .nile-slide-toggle__switch {
@@ -146,6 +134,6 @@ export default css`
     .nile-slide-toggle__switch
     input:checked
     + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled));
+    background-color: var(--nile-colors-dark-200);
   }
 `;

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

@@ -16,9 +16,6 @@ export const styles = css`
     --track-color: rgb(128 128 128 / 25%);
     --indicator-color: var(--nile-colors-white-base);
     --speed: 2s;
-    -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));
 
     display: inline-flex;
     width: 1em;