@aquera/nile-elements 0.0.47 → 0.0.49

package/src/nile-icon/icons/svg/edit-1.ts

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

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

@@ -32,6 +32,7 @@ export { default as attributemapanalysisicon } from './attribute-map-analysis-ic
 export { default as attributemap } from './attributemap';
 export { default as back } from './back';
 export { default as barchartsquare02 } from './bar-chart-square-02';
+export { default as barchartsquare03 } from './bar-chart-square-03';
 export { default as bargraph } from './bargraph';
 export { default as basic } from './basic';
 export { default as bellicon } from './bell-icon';
@@ -118,6 +119,7 @@ export { default as drag } from './drag';
 export { default as draglist } from './draglist';
 export { default as droparrow } from './droparrow';
 export { default as dropdown } from './dropdown';
+export { default as edit1 } from './edit-1';
 export { default as editpencil } from './edit-pencil';
 export { default as editwrite } from './edit-write';
 export { default as else } from './else';
@@ -221,6 +223,7 @@ export { default as js } from './js';
 export { default as kill } from './kill';
 export { default as laptop01 } from './laptop-01';
 export { default as layersthree01 } from './layers-three-01';
+export { default as layersthree02 } from './layers-three-02';
 export { default as leftarrow } from './leftarrow';
 export { default as leftpointarrow } from './leftpointarrow';
 export { default as lifebuoy01 } from './life-buoy-01';
@@ -348,6 +351,7 @@ export { default as sendescalation } from './sendescalation';
 export { default as sendprompt } from './sendprompt';
 export { default as sendreminder } from './sendreminder';
 export { default as setting } from './setting';
+export { default as settings02 } from './settings-02';
 export { default as settings1 } from './settings-1';
 export { default as settings } from './settings';
 export { default as shape } from './shape';
@@ -382,8 +386,10 @@ export { default as thumsup } from './thumsup';
 export { default as tick } from './tick';
 export { default as timeupdate } from './timeupdate';
 export { default as timezone } from './timezone';
+export { default as trash01 } from './trash-01';
 export { default as trashnofill } from './trash-no-fill';
 export { default as trash } from './trash';
+export { default as trendup02 } from './trend-up-02';
 export { default as trigger } from './trigger';
 export { default as undo1 } from './undo-1';
 export { default as undo } from './undo';
@@ -415,6 +421,7 @@ export { default as userremovegroup } from './userremovegroup';
 export { default as users01 } from './users-01';
 export { default as users02 } from './users-02';
 export { default as usersplus } from './users-plus';
+export { default as usersup } from './users-up';
 export { default as users } from './users';
 export { default as userupdate } from './userupdate';
 export { default as validationexpression } from './validationexpression';

package/src/nile-icon/icons/svg/layers-three-02.ts

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

package/src/nile-icon/icons/svg/settings-02.ts

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

package/src/nile-icon/icons/svg/trash-01.ts

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

package/src/nile-icon/icons/svg/trend-up-02.ts

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

package/src/nile-icon/icons/svg/users-up.ts

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

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

@@ -93,7 +93,8 @@ export const styles = css`
     font-size: 14px;
     font-style: normal;
     line-height: 14px;
-    letter-spacing: 0.2px;  }
+    letter-spacing: 0.2px;
+  }
 
   /* Standard inputs */
   .input--standard {
@@ -448,6 +449,22 @@ export const styles = css`
   .input__password {
     font-family: 'disc';
   }
+
+  .input__non-printable {
+    width: 280px;
+    height: 12px;
+    border-radius: 4px;
+    background-color: #ffffff;
+    border: 1px solid grey;
+    color: red;
+    padding: 10px;
+    font-size: 12px;
+  }
+
+  .input__remove-non-printable {
+    color: #035da6;
+    margin-left: 10px;
+  }
 `;
 
 export default [styles];

package/src/nile-input/nile-input.ts

@@ -72,6 +72,9 @@ export class NileInput extends NileElement implements NileFormControl {
   /** The current value of the input, submitted as a name/value pair with form data. */
   @property() value = '';
 
+  @property({type: Boolean}) checkNonPrintableChar: boolean = false;
+
+
   /** The default value of the form control. Primarily used for resetting the form control. */
   @defaultValue() defaultValue = '';
 
@@ -218,6 +221,7 @@ export class NileInput extends NileElement implements NileFormControl {
   // can be set before the component is rendered.
   //
 
+  @state() hasPrintableCharacters: boolean = false;
 
   connectedCallback() {
     super.connectedCallback();
@@ -345,15 +349,57 @@ export class NileInput extends NileElement implements NileFormControl {
     // If step changes, the value may become invalid so we need to recheck after the update. We set the new step
     // imperatively so we don't have to wait for the next render to report the updated validity.
     this.input.step = String(this.step);
-    this.formControlController.updateValidity();
   }
 
   @watch('value', { waitUntilFirstUpdate: true })
   async handleValueChange() {
     await this.updateComplete;
-    this.formControlController.updateValidity();
+
+    if(this.checkNonPrintableChar){
+      this.findNonPrintableChar();
+    }
+  }
+
+
+  /** checks non printable characters in the value. */
+  findNonPrintableChar() {
+    this.hasPrintableCharacters = false;
+
+    if (this.value) {
+      for (let i = 0, n = this.value.length; i < n; i++) {
+        const charCode = this.value.charCodeAt(i);
+
+        // Check if the character is non-printable
+        if ((charCode > 255 && charCode !== 9109) || [129, 143, 144, 157, 160].includes(charCode)) {
+          this.hasPrintableCharacters = true;
+          this.emit('nile-value', { value: this.value , hasPrintableCharacters: true });
+          break;
+        }
+      }
+    }
   }
 
+  /** Removes all non printable characters from the value. */
+  removeAllNonPrintableCharacters() {
+    let cleanedValue = '';
+
+    if (this.value) {
+      for (let i = 0, n = this.value.length; i < n; i++) {
+        const charCode = this.value.charCodeAt(i);
+
+        // Consider a character printable if it's not in the specified non-printable ranges
+        if (!(charCode > 255 && charCode !== 9109) && ![129, 143, 144, 157, 160].includes(charCode)) {
+          cleanedValue += this.value.charAt(i);
+        }
+      }
+    }
+
+    this.value = cleanedValue;
+    this.emit('nile-npchar-removed', { value: this.value });
+
+  }
+
+
   /** Sets focus on the input. */
   focus(options?: FocusOptions) {
     this.input.focus(options);
@@ -478,7 +524,13 @@ export class NileInput extends NileElement implements NileFormControl {
         ${hasLabelSuffixSlot ? html` <slot name="label-suffix"></slot> ` : ``}
 
         <div part="form-control-input" class="form-control-input">
+        <nile-popup ?active=${this.hasPrintableCharacters}
+        placement="bottom-start"
+        distance="5"
+        strategy="fixed"
+        >
           <div
+            slot="anchor"
             part="base"
             class=${classMap({
               input: true,
@@ -598,6 +650,13 @@ export class NileInput extends NileElement implements NileFormControl {
 
             <slot name="suffix" part="suffix" class="input__suffix"></slot>
           </div>
+
+          <div class="input__non-printable">
+          Non-printable character detected.<span class="input__remove-non-printable" @click=${
+            this.removeAllNonPrintableCharacters
+          }> Remove All </span>
+          </div>
+          </nile-popup>
         </div>
 
         ${

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

@@ -17,10 +17,13 @@ export const styles = css`
     background: hsl(0, 0%, 100%);
     border: solid 1px hsl(240 5.9% 90%);
     border-radius: 0.25rem;
-    padding: 12px 9px;
     overflow: auto;
     overscroll-behavior: none;
   }
+  
+  .search__wrapper {
+    padding: 12px 9px;
+  }
 
   ::slotted(nile-divider) {
     --spacing: 0.5rem;

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

@@ -185,18 +185,20 @@ export class NileMenu extends NileElement {
     return html`
       <div>
         ${this.searchEnabled
-          ? html` <nile-input
-              size="medium"
-              clearable
-              style=${this.searchWidth
-                ? `width: ${this.searchWidth}px;`
-                : 'width: 100%;'}
-              .value=${this.searchValue}
-              placeholder="Search..."
-              @nile-input=${this.handleSearchChange}
-            >
-              <nile-icon name="search" slot="suffix"> </nile-icon>
-            </nile-input>`
+          ? html`<div class="search__wrapper">
+              <nile-input
+                size="medium"
+                clearable
+                style=${this.searchWidth
+                  ? `width: ${this.searchWidth}px;`
+                  : 'width: 100%;'}
+                .value=${this.searchValue}
+                placeholder="Search..."
+                @nile-input=${this.handleSearchChange}
+              >
+                <nile-icon name="search" slot="suffix"> </nile-icon>
+              </nile-input>
+            </div>`
           : html``}
         ${this.showNoResults
           ? html` <nile-menu-item>${this.noResultsMessage}</nile-menu-item> `

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

@@ -1,18 +1,16 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 
-import {css} from 'lit-element';
+import { css } from 'lit-element';
 
 /**
  * Radio CSS
  */
 export const styles = css`
-
-
   :host {
     display: block;
   }
@@ -40,10 +38,10 @@ export const styles = css`
 
   .radio__checked-icon {
     display: inline-flex;
-    width: 9px;
-    height: 9px;
+    width: var(--nile-radio-inner-width);
+    height: var(--nile-radio-inner-width);
     border-radius: 50%;
-    background: var(--nile-colors-primary-600);
+    background: var(--nile-radio-checked-icon-background);
   }
 
   .radio__control {
@@ -52,14 +50,16 @@ export const styles = css`
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    width: var(--nile-type-scale-3);
-    height: var(--nile-type-scale-3);
-    border: solid 1px var(--nile-colors-neutral-700);
+    width: var(--nile-radio-outer-width);
+    height: var(--nile-radio-outer-height);
+    border: solid 1px var(--nile-radio-outer-border-color);
     border-radius: 50%;
-    background-color: var(--nile-colors-white-base);
+    background-color: var(--nile-radio-outer-background-color);
     color: transparent;
-    transition: var(--nile-transition-duration-default) border-color, var(--nile-transition-duration-default) background-color,
-    var(--nile-transition-duration-default) color, var(--nile-transition-duration-default) box-shadow;
+    transition: var(--nile-transition-duration-default) border-color,
+      var(--nile-transition-duration-default) background-color,
+      var(--nile-transition-duration-default) color,
+      var(--nile-transition-duration-default) box-shadow;
   }
 
   .radio__input {
@@ -72,26 +72,26 @@ export const styles = css`
 
   /* Hover */
   .radio:not(.radio--checked):not(.radio--disabled) .radio__control:hover {
-    border: 1px solid var(--nile-colors-primary-600);
-    background: var(--nile-colors-primary-100);
+    border: 1px solid var(--nile-radio-hover-border-color);
+    background: var(--nile-radio-hover-background-color);
   }
 
   /* Checked */
   .radio--checked .radio__control {
     color: var(--nile-colors-primary-600);
-    border: 1px solid var(--nile-colors-primary-600);
-    background-color: var(--nile-colors-white-base);
+    border: 1px solid var(--nile-radio-checked-border-color);
+    background-color: var(--nile-radio-checked-background-color);
   }
 
   /* Checked + hover */
   .radio.radio--checked:not(.radio--disabled) .radio__control:hover {
-    border: 1px solid var(--nile-colors-primary-900);
-    background-color: var(--nile-colors-white-base);
+    border: 1px solid var(--nile-radio-checked-hover-border-color);
+    background-color: var(--nile-radio-checked-hover-background-color); 
   }
 
   /* Checked + hover */
   .radio__checked-icon:hover {
-    background-color: var(--nile-colors-primary-900);
+    background-color: var(--nile-radio-checked-hover-icon-background-color);
   }
 
   /* Checked + focus */
@@ -104,7 +104,15 @@ export const styles = css`
   .radio--disabled {
     opacity: 0.5;
     cursor: not-allowed;
-    border-color: 1px solid var(--nile-colors-neutral-500);
+  }
+
+  .radio--disabled .radio__checked-icon {
+    background-color:#D0D5DD; // for v2
+  }
+
+  .radio--disabled .radio__control {
+    background-color:#F9FAFB;
+    border: 1px solid #D0D5DD;
   }
 
   /* When the control isn't checked, hide the circle for Windows High Contrast mode a11y */
@@ -124,6 +132,6 @@ export const styles = css`
   .radio__label_border {
     padding: 0.75rem;
     border-radius: 4px;
-    border: 1px solid var(--Neutral-Normal, #E5E9EB);
+    border: 1px solid var(--Neutral-Normal, #e5e9eb);
   }
 `;

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

@@ -20,7 +20,7 @@ export default css`
     margin-right: 6px;
     font-size: 14px;
     color: var(--nile-colors-dark-900);
-    font-family:var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -41,7 +41,7 @@ export default css`
     left: 0;
     right: 0;
     bottom: 0;
-    background: var(--nile-colors-neutral-500);
+    background-color: var(--nile-slide-toggle-color-background-inactive);
     transition: 0.4s;
     border-radius: 34px;
   }
@@ -53,17 +53,17 @@ export default css`
     width: 12px;
     bottom: 2px;
     left: 2px;
-    background-color: var(--nile-colors-white-base);
+    background-color: var(--nile-slide-toggle-color-indicator);
     transition: 0.4s;
     border-radius: 50%;
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider {
-    background-color: var(--nile-colors-primary-600);
+    background-color: var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:focus + .nile-slide-toggle__slider {
-    box-shadow: 0 0 1px var(--nile-colors-primary-600);
+    box-shadow: 0 0 1px var(--nile-slide-toggle-color-background-active);
   }
 
   .nile-slide-toggle__switch input:checked + .nile-slide-toggle__slider:before {

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

@@ -50,20 +50,20 @@ export const styles = css`
     width: max-content;
     max-width: var(--max-width);
     border-radius: 0.25rem;
-    background-color: hsl(240 3.7% 15.9%);
-    font-size: 10.24px;
-    font-weight: 400;
-    line-height: 10.24px;
+    background-color: var(--nile-tooltip-color-background);
+    font-size:var(--nile-tooltip-font-size-sm);
+    font-weight:var( --nile-tooltip-font-weight-sm);
+    line-height:var(--nile-tooltip-line-height-sm);
+    padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
     color: hsl(0, 0%, 100%);
-    padding: 0.25rem 0.5rem;
     pointer-events: none;
     word-break: break-word;
   }
 
   .tooltip__body--large {
-    font-size: 12px;
-    line-height: 12px;
-    font-weight: 500;
+    font-size: var(--nile-tooltip-font-size-lg);
+    line-height: var(--nile-tooltip-line-height-lg);
+    font-weight: var(--nile-tooltip-font-weight-lg);
   }
 `;