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

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

@@ -15,7 +15,6 @@ 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';
@@ -36,7 +35,6 @@ 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>>;
 
@@ -55,7 +53,6 @@ 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.
@@ -107,7 +104,6 @@ export class NileSelect extends NileElement implements NileFormControl {
     'help-text',
     'label'
   );
-  private virtualScrollHelper!: VirtualScrollHelper;
   private typeToSelectString = '';
   private typeToSelectTimeout: number;
 
@@ -162,19 +158,11 @@ 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: 'help-text', reflect: true }) helpText = '';
+  @property({ attribute: true, reflect: true }) helpText = '';
+  @property({ attribute: 'help-text', reflect: true }) help_text = '';
 
   @property({ attribute: 'error-message', reflect: true }) errorMessage = '';
 
@@ -247,23 +235,16 @@ 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);
@@ -291,29 +272,17 @@ 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)) {
@@ -372,10 +341,6 @@ 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;
@@ -476,10 +441,6 @@ 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)) {
@@ -493,10 +454,6 @@ 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 =>
@@ -514,19 +471,11 @@ 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 !== '') {
@@ -544,20 +493,12 @@ 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');
 
@@ -630,10 +571,6 @@ export class NileSelect extends NileElement implements NileFormControl {
   }
 
   private handleTagRemove(event: NileRemoveEvent, option: NileOption) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      return;
-    }
-
     event.stopPropagation();
 
     if (!this.disabled) {
@@ -805,26 +742,14 @@ 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);
@@ -867,11 +792,6 @@ 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;
@@ -881,11 +801,6 @@ 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];
 
@@ -895,11 +810,6 @@ 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());
@@ -953,10 +863,6 @@ 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;
@@ -968,10 +874,6 @@ 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;
@@ -983,9 +885,6 @@ 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();
   }
 
@@ -996,38 +895,23 @@ 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) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      this.virtualScrollHelper.setCustomValidity(message);
-    } else {
-      this.valueInput.setCustomValidity(message);
-      this.formControlController.updateValidity();
-    }
+    this.valueInput.setCustomValidity(message);
+    this.formControlController.updateValidity();
   }
 
   /** Sets focus on the control. */
   focus(options?: FocusOptions) {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      this.virtualScrollHelper.focus(options);
-    } else {
-      this.displayInput.focus(options);
-    }
+    this.displayInput.focus(options);
   }
 
   /** Removes focus from the control. */
   blur() {
-    if (this.virtualScrollHelper.isVirtualScrollEnabled()) {
-      this.virtualScrollHelper.blur();
-    } else {
-      this.displayInput.blur();
-    }
+    this.displayInput.blur();
   }
 
   onInputChange(event: Event) {
@@ -1045,8 +929,6 @@ export class NileSelect extends NileElement implements NileFormControl {
     }
   }
 
-
-
   calculateTotalWidthOfTags() {
     if (this.maxOptionsVisible !== Infinity) {
       this.oldMaxOptionsVisible = this.maxOptionsVisible;
@@ -1092,16 +974,6 @@ 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');
@@ -1110,7 +982,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 ? true : false;
+    const hasHelpText = (this.helpText || this.help_text) ? true : false;
     const hasErrorMessage = this.errorMessage ? true : false;
     const prefixContent = this.selectedOptions[0]
       ? this.getOptionPrefix(this.selectedOptions[0])
@@ -1413,7 +1285,7 @@ export class NileSelect extends NileElement implements NileFormControl {
         </div>
 
         ${hasHelpText
-          ? html` <nile-form-help-text>${this.helpText}</nile-form-help-text> `
+          ? html` <nile-form-help-text>${(this.helpText || this.help_text)}</nile-form-help-text> `
           : ``}
         ${hasErrorMessage
           ? html`

package/src/nile-sidebar/index.ts

@@ -28,23 +28,26 @@ 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: 24px;
+      margin: var(--nile-spacing-2xl);
       display: block;
-      margin-bottom: 12px;
+      margin-bottom: var(--nile-spacing-lg);
     }
 
     .menu-group {
-      margin-left: 24px;
-      margin-right: 24px;
+      margin-left: var(--nile-spacing-2xl);
+      margin-right: var(--nile-spacing-2xl);
     }
 
     .view-component {
@@ -55,15 +58,15 @@ export class NileSidebar extends LitElement {
     .view-component__item {
       background-color: var(--nile-colors-white-base);
       // padding: 1rem;
-      border-radius: 3px;
+      border-radius: var(--nile-radius-sm);
       border: solid 1px #eee;
     }
 
     .nile-menu__hr {
-      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);
+      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);
     }
 
     .nds-menu--bottom {
@@ -95,7 +98,7 @@ export class NileSidebar extends LitElement {
   }
 
   // class="nds-menu ${classMap(this.buttonClassMap)}"
-  
+
   override render() {
     return html`
       <div class="nile-menu--wrapper  ${classMap(this.buttonClassMap)}" >
@@ -108,7 +111,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,8 +19,11 @@ export const styles = css`
     height: 100%;
     box-sizing: border-box;
     display: flex;
-    padding: 0 16px;
+    padding: var(--nile-spacing-none) var(--nile-spacing-xl);
     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 {
@@ -29,19 +32,19 @@ export const styles = css`
     flex-direction: column;
     justify-content: space-between;
     height: 100%;
-    padding:12px 0;
+    padding: var(--nile-spacing-lg) var(--nile-spacing-none);
   }
 
   .sidemenu__items-list {
     display:flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--nile-spacing-md);
   }
 
   .footer {
     display:flex;
     flex-direction: column;
-    gap: 8px;
+    gap: var(--nile-spacing-md);
   }
 
 `;

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

@@ -13,26 +13,29 @@ 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: 12px;
-    gap: 15px;
+    padding: var(--nile-spacing-md);
+    gap: var(--nile-spacing-xl);
     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: 500;
+    font-weight: var(--nile-font-weight-medium);
     line-height: var(--nile-line-height-medium);
   }
 
   .nile__sidebar-menu-item:hover {
     background-color: var(--nile-colors-neutral-100);
-    border-radius: 6px;
+    border-radius: var(--nile-radius-sm);
   }
 
   .hide-sidebar-menu-items{

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

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

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

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

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

@@ -16,6 +16,9 @@ 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;