@aquera/nile-elements 0.1.60-beta-1.0 → 0.1.60-beta-1.2

package/package.json

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

package/src/internal/form.ts

@@ -89,7 +89,7 @@ export class FormControlController implements ReactiveController {
   }
 
   hostConnected() {
-    const form = this.options.form(this.host);
+    const form = this.options?.form(this.host);
 
     if (form) {
       this.attachForm(form);
@@ -97,7 +97,7 @@ export class FormControlController implements ReactiveController {
 
     // Listen for interactions
     interactions.set(this.host, []);
-    this.options.assumeInteractionOn.forEach(event => {
+    this.options?.assumeInteractionOn.forEach(event => {
       this.host.addEventListener(event, this.handleInteraction);
     });
   }
@@ -107,7 +107,7 @@ export class FormControlController implements ReactiveController {
 
     // Clean up interactions
     interactions.delete(this.host);
-    this.options.assumeInteractionOn.forEach(event => {
+    this.options?.assumeInteractionOn.forEach(event => {
       this.host.removeEventListener(event, this.handleInteraction);
     });
   }

package/src/internal/resizable-table-styles.ts

@@ -26,7 +26,7 @@ export const resizableHeaderStyles = css`
   }
 
   :host([resizable]) .header__item__wrapper {
-    border-right: 1px solid var(--nile-colors-neutral-400);
+    border-right: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     position: relative;
   }
 `;
@@ -40,7 +40,7 @@ export const resizerStyles = css`
     width: 8px;
     cursor: col-resize;
     user-select: none;
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
     transition: background-color 0.2s;
     z-index: 10;
     opacity: 0;
@@ -60,27 +60,27 @@ export const resizerStyles = css`
     top: 0;
     width: 2px;
     height: 100%;
-    background-color: var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
     opacity: 0.8;
   }
 
   .resizer:hover {
-    background-color: var(--nile-colors-neutral-400);
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
   }
 
   .resizer:hover::before {
-    background-color: var(--nile-colors-neutral-700);
+    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
     opacity: 1;
   }
 
   .resizer.resizing {
-    background-color: var(--nile-colors-neutral-400);
+    background-color: var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     opacity: 1;
     pointer-events: auto;
   }
 
   .resizer.resizing::before {
-    background-color: var(--nile-colors-neutral-700);
+    background-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));
     opacity: 1;
     width: 3px;
   }
@@ -113,7 +113,7 @@ export const headerResizerStyles = css`
   }
 
   .resizer.resizing {
-    border-right: 4px double var(--nile-colors-neutral-400);
+    border-right: 4px double var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     background-color: transparent;
     opacity: 1;
   }

package/src/nile-chip/nile-chip.ts

@@ -103,7 +103,15 @@ export class NileChip extends NileElement {
   protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has('autoCompleteOptions')) {
-      this.filteredAutoCompleteOptions = [...this.autoCompleteOptions];
+      let options = this.autoCompleteOptions;
+      if (typeof options === 'string') {
+        try {
+          options = JSON.parse(options);
+        } catch (e) {
+          options = [];
+        }
+      }
+      this.filteredAutoCompleteOptions = Array.isArray(options) ? [...options] : [];
       if (this.noDuplicates) {
         this.filteredAutoCompleteOptions =
           this.filteredAutoCompleteOptions.filter(

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

@@ -281,6 +281,8 @@ export { default as ngbarchart12 } from './ng-bar-chart-12';
 export { default as ngbell01 } from './ng-bell-01';
 export { default as ngbellringing04 } from './ng-bell-ringing-04';
 export { default as ngbold01 } from './ng-bold-01';
+export { default as ngbuilding01 } from './ng-building-01';
+export { default as ngbuilding05 } from './ng-building-05';
 export { default as ngcalendarplus02 } from './ng-calendar-plus-02';
 export { default as ngcalendar } from './ng-calendar';
 export { default as ngcheckcircle } from './ng-check-circle';
@@ -292,6 +294,7 @@ export { default as ngchevronselectorvertical } from './ng-chevron-selector-vert
 export { default as ngchevronupdouble } from './ng-chevron-up-double';
 export { default as ngchevronup } from './ng-chevron-up';
 export { default as ngcopy03 } from './ng-copy-03';
+export { default as ngdataflow04 } from './ng-dataflow-04';
 export { default as ngdotsgrid } from './ng-dots-grid';
 export { default as ngdotsvertical } from './ng-dots-vertical';
 export { default as ngdownload01 } from './ng-download-01';
@@ -315,6 +318,7 @@ export { default as nglist } from './ng-list';
 export { default as nglogout01 } from './ng-log-out-01';
 export { default as ngmail01 } from './ng-mail-01';
 export { default as ngmail04 } from './ng-mail-04';
+export { default as ngmarkerpin01 } from './ng-marker-pin-01';
 export { default as ngmenu05 } from './ng-menu-05';
 export { default as ngmessagetextsquare01 } from './ng-message-text-square-01';
 export { default as ngminimize02 } from './ng-minimize-02';

package/src/nile-icon/icons/svg/ng-building-01.ts

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

package/src/nile-icon/icons/svg/ng-building-05.ts

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

package/src/nile-icon/icons/svg/ng-dataflow-04.ts

@@ -0,0 +1,5 @@
+/**
+ * Do not edit directly
+ */
+
+export default "PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBjbGlwLXBhdGg9InVybCgjY2xpcDBfMjEzODNfNDQzKSI+PHBhdGggZD0iTTMuMzMzMjkgMTQuOTk5OFYxNC44MzMyQzMuMzMzMjkgMTMuNDMzIDMuMzMzMjkgMTIuNzMzIDMuNjA1NzggMTIuMTk4MkMzLjg0NTQ2IDExLjcyNzggNC4yMjc5MSAxMS4zNDUzIDQuNjk4MzIgMTEuMTA1N0M1LjIzMzEgMTAuODMzMiA1LjkzMzE2IDEwLjgzMzIgNy4zMzMyOSAxMC44MzMySDEyLjY2NjZDMTQuMDY2OCAxMC44MzMyIDE0Ljc2NjggMTAuODMzMiAxNS4zMDE2IDExLjEwNTdDMTUuNzcyIDExLjM0NTMgMTYuMTU0NSAxMS43Mjc4IDE2LjM5NDEgMTIuMTk4MkMxNi42NjY2IDEyLjczMyAxNi42NjY2IDEzLjQzMyAxNi42NjY2IDE0LjgzMzJWMTQuOTk5OE0zLjMzMzI5IDE0Ljk5OThDMi40MTI4MiAxNC45OTk4IDEuNjY2NjMgMTUuNzQ2IDEuNjY2NjMgMTYuNjY2NUMxLjY2NjYzIDE3LjU4NyAyLjQxMjgyIDE4LjMzMzIgMy4zMzMyOSAxOC4zMzMyQzQuMjUzNzcgMTguMzMzMiA0Ljk5OTk2IDE3LjU4NyA0Ljk5OTk2IDE2LjY2NjVDNC45OTk5NiAxNS43NDYgNC4yNTM3NyAxNC45OTk4IDMuMzMzMjkgMTQuOTk5OFpNMTYuNjY2NiAxNC45OTk4QzE1Ljc0NjIgMTQuOTk5OCAxNSAxNS43NDYgMTUgMTYuNjY2NUMxNSAxNy41ODcgMTUuNzQ2MiAxOC4zMzMyIDE2LjY2NjYgMTguMzMzMkMxNy41ODcxIDE4LjMzMzIgMTguMzMzMyAxNy41ODcgMTguMzMzMyAxNi42NjY1QzE4LjMzMzMgMTUuNzQ2IDE3LjU4NzEgMTQuOTk5OCAxNi42NjY2IDE0Ljk5OThaTTkuOTk5OTYgMTQuOTk5OEM5LjA3OTQ5IDE0Ljk5OTggOC4zMzMyOSAxNS43NDYgOC4zMzMyOSAxNi42NjY1QzguMzMzMjkgMTcuNTg3IDkuMDc5NDkgMTguMzMzMiA5Ljk5OTk2IDE4LjMzMzJDMTAuOTIwNCAxOC4zMzMyIDExLjY2NjYgMTcuNTg3IDExLjY2NjYgMTYuNjY2NUMxMS42NjY2IDE1Ljc0NiAxMC45MjA0IDE0Ljk5OTggOS45OTk5NiAxNC45OTk4Wk05Ljk5OTk2IDE0Ljk5OThWNi42NjY1TTQuOTk5OTYgNi42NjY1SDE1QzE1Ljc3NjUgNi42NjY1IDE2LjE2NDggNi42NjY1IDE2LjQ3MTEgNi41Mzk2NEMxNi44Nzk1IDYuMzcwNDggMTcuMjAzOSA2LjA0NjAyIDE3LjM3MzEgNS42Mzc2NEMxNy41IDUuMzMxMzYgMTcuNSA0Ljk0MzA3IDE3LjUgNC4xNjY1QzE3LjUgMy4zODk5MyAxNy41IDMuMDAxNjUgMTcuMzczMSAyLjY5NTM2QzE3LjIwMzkgMi4yODY5OCAxNi44Nzk1IDEuOTYyNTMgMTYuNDcxMSAxLjc5MzM3QzE2LjE2NDggMS42NjY1IDE1Ljc3NjUgMS42NjY1IDE1IDEuNjY2NUg0Ljk5OTk2QzQuMjIzMzkgMS42NjY1IDMuODM1MTEgMS42NjY1IDMuNTI4ODIgMS43OTMzN0MzLjEyMDQ0IDEuOTYyNTMgMi43OTU5OCAyLjI4Njk4IDIuNjI2ODMgMi42OTUzNkMyLjQ5OTk2IDMuMDAxNjUgMi40OTk5NiAzLjM4OTkzIDIuNDk5OTYgNC4xNjY1QzIuNDk5OTYgNC45NDMwNyAyLjQ5OTk2IDUuMzMxMzYgMi42MjY4MyA1LjYzNzY0QzIuNzk1OTggNi4wNDYwMiAzLjEyMDQ0IDYuMzcwNDggMy41Mjg4MiA2LjUzOTY0QzMuODM1MTEgNi42NjY1IDQuMjIzMzkgNi42NjY1IDQuOTk5OTYgNi42NjY1WiIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvZz48ZGVmcz48Y2xpcFBhdGggaWQ9ImNsaXAwXzIxMzgzXzQ0MyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJ3aGl0ZSIvPjwvY2xpcFBhdGg+PC9kZWZzPjwvc3ZnPg==";

package/src/nile-icon/icons/svg/ng-marker-pin-01.ts

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

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

@@ -13,6 +13,13 @@ import {css} from 'lit';
 export const styles = css`
   :host {
     box-sizing: border-box;
+    --ng-nxt-gen-outline: var(--ng-border-width-1) solid var(--ng-colors-border-brand);
+    --ng-nxt-gen-outline-error: var(--ng-border-width-1) solid var(--ng-colors-border-error);
+    --ng-private-outline-transparent: var(--ng-border-width-1) solid transparent;
+    --ng-box-shadow: 0px 12px 16px -4px var(--ng-colors-effects-shadow-lg-01, rgba(10, 13, 18, 0.08)), 0px 4px 6px -2px var(--ng-colors-effects-shadow-lg-02, rgba(10, 13, 18, 0.03)), 0px 2px 2px -1px var(--ng-colors-effects-shadow-lg-03, rgba(10, 13, 18, 0.04));
+    -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));
   }
 
   .virtualized{
@@ -57,40 +64,40 @@ export const styles = css`
   /* Label */
   .form-control--has-label .form-control__label {
     display: block;
-    margin-bottom: 6px;
-    color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
-    font-size: 14px;
+    margin-bottom: var(--nile-spacing-sm, var(--ng-spacing-sm));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: 400;
-    line-height: 20px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    line-height: var(--nile-spacing-2xl, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
   }
 
   .form-control--has-label.form-control--medium .form-control__label {
-    font-size: 14px;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
   }
 
   :host([required]) .form-control--has-label .form-control__label::after {
     content: '*';
     margin-inline-start: -2px;
-    color: var(--nile-colors-red-700);
+    color: var(--nile-colors-red-700, var(--ng-colors-text-brand-tertiary-600));
   }
 
   /* Help text */
   .form-control--has-help-text .form-control__help-text {
     display: block;
-    color: var(--nile-colors-dark-500);
-    margin-top: 0.75rem;
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: 0.875rem;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
   }
 
   .form-control--has-help-text.form-control--radio-group
     .form-control__help-text {
-    margin-top: 0.25rem;
+    margin-top: var(--nile-spacing-xs, var(--ng-spacing-sm));
   }
 
   :host {
@@ -127,8 +134,8 @@ export const styles = css`
     position: relative;
     align-items: center;
     justify-content: start;
-    font-family: var(--nile-font-family-sans-serif);
-    font-weight: 400;
+    font-family: var(--nile-font-family-sans-serif, var(--ng-font-family-body));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
     letter-spacing: normal;
     vertical-align: middle;
     overflow: hidden;
@@ -143,21 +150,22 @@ export const styles = css`
     font: inherit;
     border: none;
     background: none;
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
     cursor: inherit;
     overflow: hidden;
-    padding: 0;
-    margin: 0;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
     -webkit-appearance: none;
-    font-family: var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
   }
 
   .select__display-input::placeholder {
-    font-family: var(--nile-font-family-serif);
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    color: var(--nile-colors-text-placeholder, var(--ng-colors-text-placeholder));
   }
 
   .select:not(.select--disabled):hover .select__display-input {
-    color: var(--nile-colors-dark-900);
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .select__display-input:focus {
@@ -181,8 +189,8 @@ export const styles = css`
     left: 0;
     width: 100%;
     height: 100%;
-    padding: 0;
-    margin: 0;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
+    margin: var(--nile-spacing-none, var(--ng-spacing-none));
     opacity: 0;
     z-index: -1;
   }
@@ -192,24 +200,24 @@ export const styles = css`
     flex: 1;
     align-items: center;
     flex-wrap: no-wrap;
-    margin-inline-start: 0.5rem;
+    margin-inline-start: var(--nile-spacing-7px, var(--ng-spacing-md));
     width: 100%;
     overflow: hidden;
   }
 
   .select__tags-count {
-    color: var(--nile-colors-primary-600);
-    font-family: Colfax-regular;
-    font-size: 14px;
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     font-style: normal;
-    font-weight: 400;
-    line-height: 14px;
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
+    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px;
-    margin: 6px;
+    margin: var(--nile-spacing-sm, var(--ng-spacing-sm));
   }
 
   .select__tags-count-clearable {
-    margin-right: 50px;
+    margin-right: var(--nile-spacing-5xl, var(--ng-spacing-5xl));
   }
 
   .select__tags::slotted(nile-tag) {
@@ -223,96 +231,104 @@ export const styles = css`
 
   /* Standard selects */
   .select--standard .select__combobox {
-    background-color: var(--nile-colors-white-base);
-    border: solid 1px var(--nile-colors-neutral-500);
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
   }
 
   .select--standard .select__combobox:hover {
-    border: 1px solid  var(--nile-colors-dark-900);
-    background: var(--nile-colors-white-base);
+    border: 1px solid var(--nile-colors-dark-900, var(--ng-colors-border-brand));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    outline: var(--nile-outline-none, var(--ng-nxt-gen-outline));
+  }
+
+  .select--error:hover:not(.select--disabled) .select__combobox {
+    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
+    outline: var(--nile-outline-none, var(--ng-colors-border-error));
   }
 
   .select--standard.select--disabled .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-500);
-    opacity: 0.5;
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));
+    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));
+    opacity: var(--nile-opacity-50, var(--ng-opacity-100));
     cursor: not-allowed;
     outline: none;
   }
 
   .select--standard:not(.select--disabled).select--open .select__combobox,
   .select--standard:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   .select--warning .select__combobox {
-    border-color: var(--nile-colors-yellow-500);
+    border-color: var(--nile-colors-yellow-500, var(--ng-colors-border-warning));
   }
 
   .select--error .select__combobox {
-    border-color: var(--nile-colors-red-500);
+    border-color: var(--nile-colors-red-500, var(--ng-colors-border-error));
+    outline: var(--nile-outline-none, var(--ng-private-outline-transparent));
   }
 
   .select--success {
-    border-color: var(--nile-colors-green-500);
+    border-color: var(--nile-colors-green-500, var(--ng-componentcolors-utility-success-500));
   }
 
   /* Filled selects */
   .select--filled .select__combobox {
     border: none;
-    background-color: var(--nile-colors-neutral-100);
-    color: var(--nile-colors-dark-900);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
   }
 
   .select--filled:hover:not(.select--disabled) .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   .select--filled.select--disabled .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
-    opacity: 0.5;
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled-subtle));
+    opacity: var(--nile-opacity-50, var(--ng-opacity-100));
     cursor: not-allowed;
   }
 
   .select--filled:not(.select--disabled).select--open .select__combobox,
   .select--filled:not(.select--disabled).select--focused .select__combobox {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
     outline: 3px solid rgba(0, 89, 255, 0.4);
   }
 
   .select--medium .select__combobox {
-    border-radius: 4px;
-    font-size: 14px;
-    padding: 12px;
-    height: 40px;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    padding: var(--nile-spacing-lg, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    height: var(--nile-height-40px, var(--ng-height-40px));
     box-sizing: border-box;
   }
 
   .select--medium .select__clear {
-    margin-inline-start: 0.75rem;
+    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   .select--medium .select__prefix::slotted(*) {
-    margin-inline-end: 0.75rem;
+    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }
 
   .select--medium .select__prefix.multiple::slotted(*) {
-    margin-inline-start: 0.75rem;
+    margin-inline-start: var(--nile-spacing-lg, var(--ng-spacing-md));
   }
 
   .select--medium.select--multiple:not(.select--placeholder-visible)
     .select__combobox {
-    padding-inline-start: 0;
+    padding-inline-start: var(--nile-spacing-none, var(--ng-spacing-none));
   }
 
   .select--medium .select__tags {
-    gap: 3px;
+    gap: var(--nile-spacing-3px, var(--ng-spacing-sm));
   }
 
   /* Pills */
   .select--pill.select--medium .select__combobox {
-    border-radius: 2.5rem;
+    border-radius: var(--nile-radius-3xl, var(--ng-radius-3xl));
   }
 
   /* Prefix */
@@ -320,14 +336,14 @@ export const styles = css`
     flex: 0;
     display: inline-flex;
     align-items: center;
-    color: var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
   }
 
   .select__suffix {
     flex: 0;
     display: inline-flex;
     align-items: center;
-    color: var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
   }
 
   /* Clear button */
@@ -336,16 +352,16 @@ export const styles = css`
     align-items: center;
     justify-content: center;
     font-size: inherit;
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
     border: none;
     background: none;
-    padding: 0;
+    padding: var(--nile-spacing-none, var(--ng-spacing-none));
     transition: 150ms color;
     cursor: pointer;
   }
 
   .select__clear:hover {
-    color: var(--nile-colors-dark-500);
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
   }
 
   .select__clear:focus {
@@ -359,7 +375,7 @@ export const styles = css`
     align-items: center;
     transition: 250ms rotate ease;
     rotate: 0;
-    margin-inline-start: 0.25rem;
+    margin-inline-start: var(--nile-spacing-xxxsmall, var(--ng-spacing-md));
   }
 
   .select--open .select__expand-icon {
@@ -370,41 +386,42 @@ export const styles = css`
   .select__listbox {
     display: block;
     position: relative;
-    font-size: 1rem;
-    font-weight: 400;
-    background: var(--nile-colors-white-base);
-    border: solid 1px var(--nile-colors-neutral-500);
-    border-radius: 0.25rem;
-    padding-block: 0;
-    padding-inline: 0;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
+    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: solid 1px var(--nile-colors-neutral-500, var(--ng-colors-border-secondary-alt));
+    border-radius: var(--nile-radius-sm, var(--ng-radius-md));
+    padding-block: var(--nile-spacing-none, var(--ng-spacing-xs));
+    padding-inline: var(--nile-spacing-none, var(--ng-spacing-xs));
     overflow: auto;
     overscroll-behavior: none;
     /* Make sure it adheres to the popup's auto size */
     max-width: var(--auto-size-available-width);
     max-height: var(--auto-size-available-height);
+    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs));
   }
 
   .select__options {
-    font-size: 14px;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
     color: rgb(133, 129, 129);
     width: 100%;
   }
 
   .select__options__search-enabled {
-    padding-top: 10px;
+    padding-top: var(--nile-spacing-10px, var(--ng-spacing-lg));
     width: 100%;
   }
 
   .select__listbox::slotted(nile-divider) {
-    --spacing: 0.25rem;
+    --spacing: var(--nile-spacing-xs, var(--ng-spacing-sm));
   }
 
   .select__listbox::slotted(small) {
-    font-size: 0.875rem;
-    font-weight: 600;
-    color: var(--nile-colors-dark-500);
-    padding-block: 0.25rem;
-    padding-inline: 1rem;
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-semibold));
+    color: var(--nile-colors-dark-500, var(--ng-colors-text-tertiary-600));
+    padding-block: var(--nile-spacing-xs, var(--ng-spacing-sm));
+    padding-inline: var(--nile-spacing-xl, var(--ng-spacing-xl));
   }
 
   .select__search {
@@ -412,24 +429,24 @@ export const styles = css`
     top: 0px;
     z-index: 1;
     width: calc(100% - 16px);
-    padding: 8px;
-    background-color: white;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md));
+    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
     margin-bottom: -8px;
   }
 
   .select__footer {
     position: sticky;
     bottom: 0px;
-    background: var(--nile-colors-neutral-100);
-    border: 1px solid var(--nile-colors-neutral-400);
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
     display: flex;
     height: 15px;
     /* Auto layout */
-    display: flex;
+    display: var(--nile-display-flex, var(--ng-display-flex));
     flex-direction: row;
     align-items: flex-start;
-    padding: 8px 12px 16px;
-    gap: 12px;
+    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));
     justify-content: space-between;
   }
 
@@ -450,12 +467,12 @@ export const styles = css`
   }
 
   .select__loader--icon {
-    margin-top: 20px;
+    margin-top: var(--nile-spacing-xl, var(--ng-spacing-xl));
     animation: spin 0.6s linear infinite;
   }
 
   .select__no-results {
-    padding: 10px;
+    padding: var(--nile-spacing-lg, var(--ng-spacing-lg));
   }
 
   @keyframes spin {
@@ -472,7 +489,7 @@ export const styles = css`
   }
 
   .select__prefix--from-options {
-    margin-inline-end: 12px;
+    margin-inline-end: var(--nile-spacing-lg, var(--ng-spacing-md));
   }
   
   .select__hide-default{
@@ -480,11 +497,11 @@ export const styles = css`
   }
 
   .virtualized nile-option[selected] {
-    background-color: var(--nile-colors-neutral-100);
+    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
   }
 
   .virtualized nile-option[selected]::part(base) {
-    color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-primary-600, var(--ng-colors-text-brand-secondary-700));
   }
 `;