@aquera/nile-elements 0.1.52-beta-1.2 → 0.1.52-beta-1.5

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.1.52-beta-1.2",
+  "version": "0.1.52-beta-1.5",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",
@@ -155,6 +155,8 @@
     "x": "^0.1.2",
     "@web/test-runner-puppeteer": "0.16.0"
   },
+  "overrides": {
+  },
   "customElements": "custom-elements.json",
   "eslintConfig": {
     "parser": "@typescript-eslint/parser",
@@ -191,3 +193,4 @@
     ]
   }
 }
+

package/src/index.ts

@@ -16,7 +16,6 @@ export { NileLoader } from './nile-loader';
 export { NileProgressBar } from './nile-progress-bar';
 export { NileSpinner } from './nile-spinner';
 export { NileSelect } from './nile-select';
-export { NileVirtualSelect } from './nile-virtual-select';
 export { NileOption } from './nile-option';
 export { NileTag } from './nile-tag';
 export { NileIconButton } from './nile-icon-button';
@@ -77,6 +76,5 @@ export { NileSectionMessage } from './nile-section-message';
 export { NileToolbar } from './nile-toolbar';
 export { NileInlineEdit } from './nile-inline-edit';
 export { NileTable } from './nile-table';
-
 export { NileFilterChip } from './nile-filter-chip';
-export { NilePagination } from './nile-pagination';
+export {NilePagination } from './nile-pagination';

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

package/src/nile-code-editor/nile-code-editor.ts

@@ -39,7 +39,9 @@ import { autocompletion,CompletionContext,CompletionResult } from '@codemirror/a
 import NileElement from '../internal/nile-element';
 import { basicSetup } from './extensionSetup';
 import { classMap } from 'lit/directives/class-map.js';
-import { Theme as DefaultTheme } from './theme';
+import { Theme as DefaultTheme, CustomThemeCSS } from './theme';
+import { keymap } from '@codemirror/view';
+import { acceptCompletion } from '@codemirror/autocomplete';
 
 // Choose the appropriate mode for your use case
 
@@ -84,7 +86,7 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: false }) disableSyntaxHighlighting: boolean = false;
 
-  @property({ type: Object,  attribute: false }) customThemeCSS: object | null = null;
+  @property({ type: Object,  attribute: false }) customThemeCSS: object | null = CustomThemeCSS;
 
   @property({ type: Boolean, reflect: true , attribute: true }) lineNumbersMultiline: boolean = true;
 
@@ -100,6 +102,8 @@ export class NileCodeEditor extends NileElement {
 
   @property({ type: Boolean, reflect: true , attribute: true}) aboveCursor: boolean = false;
 
+  @property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = false;
+
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
@@ -141,6 +145,17 @@ export class NileCodeEditor extends NileElement {
     }, false )
   }
 
+  getTabCompletionKeymap() {
+    return this.tabCompletion
+      ? keymap.of([
+          {
+            key: 'Tab',
+            run: acceptCompletion,
+          }
+        ])
+      : [];
+  }
+
   protected updated(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void{
     super.updated(changedProperties);
     if (changedProperties.has('value') && this.view.state.doc.toString()!=this.value) {
@@ -277,6 +292,7 @@ export class NileCodeEditor extends NileElement {
         autocompletion({aboveCursor: this.aboveCursor}),
         language,
         customThemeExtension,
+        this.getTabCompletionKeymap(),
         EditorView.updateListener.of((v: ViewUpdate) => {
           if (v.docChanged) {
             this.debounce ? this.emitAfterTimeout({ value: this.view.state.doc.toString() }) : this.emit('nile-change', { value: this.view.state.doc.toString() })
@@ -362,7 +378,39 @@ export class NileCodeEditor extends NileElement {
    */
   getTopLevelSuggestions(context: CompletionContext,textBeforeCursor:string){
     const baseMatch: any = textBeforeCursor.match(/([a-zA-Z_$][\w$]*)$/);
-    if (!baseMatch) return null;
+    
+    if (!baseMatch) {
+      const trimmedText = textBeforeCursor.trim();
+      if (trimmedText === '') {
+        const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
+          Object.keys(this.customAutoCompletions[key]).length
+        );
+        
+        const options = optionsList.map((key) => ({
+          label: key,
+          type: 'property',
+          apply: key,
+          boost: 999
+        }));
+        
+        if(this.customCompletionsPaths.length){
+          this.customCompletionsPaths.forEach(path => {
+            options.push({
+              label: ''+path,
+              type: 'property',
+              apply: ''+path,
+              boost: 998
+            });
+          });
+        }
+        
+        return {
+          from: context.pos,
+          options: options
+        };
+      }
+      return null;
+    }
   
     const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
       Object.keys(this.customAutoCompletions[key]).length && 
@@ -378,7 +426,7 @@ export class NileCodeEditor extends NileElement {
     if(this.customCompletionsPaths.length){
       this.customCompletionsPaths
       .filter(path=>path.toLocaleLowerCase().includes(textBeforeCursor.toLocaleLowerCase()))
-      .map(path=>{
+      .forEach(path=>{
         options.push({
           label: ''+path,
           type: 'property',
@@ -571,3 +619,4 @@ function convertToSingleLine(code: string) {
   // Remove line breaks and unnecessary whitespace
   return code.replace(/\s+/g, ' ').trim();
 }
+

package/src/nile-code-editor/theme.ts

@@ -36,4 +36,73 @@ export const CustomTheme = {
   ".cm-gutters": {
     fontFamily: 'inherit', // Ensure the gutter font matches
   },
+};
+
+export const CustomThemeCSS = {
+  '.cm-tooltip-autocomplete': {
+    padding: '9px 12px',
+    backgroundColor: 'white',
+    display: 'block',
+    fontSize: '16px',
+    background: 'white',
+    border: 'solid 1px #C7CED4',
+    borderRadius: '0.25rem',
+    paddingBlock: '0',
+    paddingInline: '0',
+    overflow: 'auto',
+    overscrollBehavior: 'none',
+    color: 'hsl(240 5.3% 26.1%)',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul': {
+    fontFamily: 'colfax-regular',
+    fontWeight: '400',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li': {
+    padding: '9px 12px'
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li:hover': {
+    backgroundColor: '#005ea61a',
+    color: 'rgb(0, 0, 0)',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]': {
+    backgroundColor: '#005ea61a',
+    color: '#005EA6',
+  },
+  '.cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected="true"]:hover': {
+    color: '#005EA6',
+  },
+  '.cm-completionIcon': {
+    display: 'block',
+    position: 'relative',
+  },
+  '.cm-completionMatchedText' : {
+    textDecoration: 'none',
+  },
+  '.cm-completionIcon.cm-completionIcon-property::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMDAwOTIgMTJDNi4zMTI5NCAxMiA1LjY2NTI2IDExLjg2ODggNS4wNTc4OSAxMS42MDYzQzQuNDUwNTMgMTEuMzQzOSAzLjkyMDMxIDEwLjk4NjIgMy40NjcyNCAxMC41MzM0QzMuMDE0MjUgMTAuMDgwNSAyLjY1NjQ1IDkuNTUwNTMgMi4zOTM4MiA4Ljk0MzQyQzIuMTMxMjcgOC4zMzYzMiAyIDcuNjg4ODIgMiA3LjAwMDkyQzIgNi4zMDkzNCAyLjEzMTIzIDUuNjU5MyAyLjM5MzY4IDUuMDUwNzlDMi42NTYxNCA0LjQ0MjI4IDMuMDEzNzcgMy45MTI5OCAzLjQ2NjU4IDMuNDYyODlDMy45MTk0NyAzLjAxMjgxIDQuNDQ5NDcgMi42NTY0NSA1LjA1NjU4IDIuMzkzODJDNS42NjM2OCAyLjEzMTI3IDYuMzExMTggMiA2Ljk5OTA4IDJDNy42OTA2NiAyIDguMzQwNyAyLjEzMTIzIDguOTQ5MjEgMi4zOTM2OEM5LjU1NzcyIDIuNjU2MTQgMTAuMDg3IDMuMDEyMzIgMTAuNTM3MSAzLjQ2MjI0QzEwLjk4NzIgMy45MTIxNSAxMS4zNDM2IDQuNDQxMjMgMTEuNjA2MiA1LjA0OTQ3QzExLjg2ODcgNS42NTc3MiAxMiA2LjMwNzU5IDEyIDYuOTk5MDhDMTIgNy42ODcwNiAxMS44Njg4IDguMzM0NzQgMTEuNjA2MyA4Ljk0MjFDMTEuMzQzOSA5LjU0OTQ3IDEwLjk4NzcgMTAuMDc5NyAxMC41Mzc4IDEwLjUzMjhDMTAuMDg3OSAxMC45ODU3IDkuNTU4NzcgMTEuMzQzNiA4Ljk1MDUzIDExLjYwNjJDOC4zNDIyOCAxMS44Njg3IDcuNjkyNDEgMTIgNy4wMDA5MiAxMlpNNyAxMS4zMzg3QzguMjA4NjggMTEuMzM4NyA5LjIzMzk5IDEwLjkxNjggMTAuMDc1OSAxMC4wNzMyQzEwLjkxNzggOS4yMjk0NyAxMS4zMzg3IDguMjA1MDkgMTEuMzM4NyA3QzExLjMzODcgNS43OTEzMiAxMC45MTc4IDQuNzY2MDEgMTAuMDc1OSAzLjkyNDA4QzkuMjMzOTkgMy4wODIyNCA4LjIwODY4IDIuNjYxMzIgNyAyLjY2MTMyQzUuNzk0OTEgMi42NjEzMiA0Ljc3MDUzIDMuMDgyMjQgMy45MjY4NCAzLjkyNDA4QzMuMDgzMTYgNC43NjYwMSAyLjY2MTMyIDUuNzkxMzIgMi42NjEzMiA3QzIuNjYxMzIgOC4yMDUwOSAzLjA4MzE2IDkuMjI5NDcgMy45MjY4NCAxMC4wNzMyQzQuNzcwNTMgMTAuOTE2OCA1Ljc5NDkxIDExLjMzODcgNyAxMS4zMzg3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTUuMTA1MzQgOS4yODM1NVY1LjM5OTkzQzUuMTA1MzQgNS4yMjMyMiA1LjE2MjkxIDUuMDc3MyA1LjI3ODA0IDQuOTYyMTdDNS4zOTMxNyA0Ljg0NzA0IDUuNTM5MDkgNC43ODk0NyA1LjcxNTggNC43ODk0N0g4LjI5OTc1QzguNDgxNDYgNC43ODk0NyA4LjYyODU2IDQuODQ3MDQgOC43NDEwNiA0Ljk2MjE3QzguODUzNyA1LjA3NzMgOC45MTAwMSA1LjIyMzIyIDguOTEwMDEgNS4zOTk5M1Y5LjI4MzU1SDguMTQ0ODFWNy43Nzg4MUg1Ljg3MDU0VjkuMjgzNTVINS4xMDUzNFpNNS44NzA1NCA3LjAwNjEySDguMTQ0ODFWNS41NTQ2N0g1Ljg3MDU0VjcuMDA2MTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    top: '3px',
+    left: '0px'
+  },
+  '.cm-completionIcon.cm-completionIcon-keyword::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
+    position: 'absolute',
+    top: '3px',
+    left: '0px'
+  },
+  '.cm-completionIcon.cm-completionIcon-variable::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMDAwOTIgMTJDNi4zMTI5NCAxMiA1LjY2NTI2IDExLjg2ODggNS4wNTc4OSAxMS42MDYzQzQuNDUwNTMgMTEuMzQzOSAzLjkyMDMxIDEwLjk4NjIgMy40NjcyNCAxMC41MzM0QzMuMDE0MjUgMTAuMDgwNSAyLjY1NjQ1IDkuNTUwNTMgMi4zOTM4MiA4Ljk0MzQyQzIuMTMxMjcgOC4zMzYzMiAyIDcuNjg4ODIgMiA3LjAwMDkyQzIgNi4zMDkzNCAyLjEzMTIzIDUuNjU5MyAyLjM5MzY4IDUuMDUwNzlDMi42NTYxNCA0LjQ0MjI4IDMuMDEzNzcgMy45MTI5OCAzLjQ2NjU4IDMuNDYyODlDMy45MTk0NyAzLjAxMjgxIDQuNDQ5NDcgMi42NTY0NSA1LjA1NjU4IDIuMzkzODJDNS42NjM2OCAyLjEzMTI3IDYuMzExMTggMiA2Ljk5OTA4IDJDNy42OTA2NiAyIDguMzQwNyAyLjEzMTIzIDguOTQ5MjEgMi4zOTM2OEM5LjU1NzcyIDIuNjU2MTQgMTAuMDg3IDMuMDEyMzIgMTAuNTM3MSAzLjQ2MjI0QzEwLjk4NzIgMy45MTIxNSAxMS4zNDM2IDQuNDQxMjMgMTEuNjA2MiA1LjA0OTQ3QzExLjg2ODcgNS42NTc3MiAxMiA2LjMwNzU5IDEyIDYuOTk5MDhDMTIgNy42ODcwNiAxMS44Njg4IDguMzM0NzQgMTEuNjA2MyA4Ljk0MjFDMTEuMzQzOSA5LjU0OTQ3IDEwLjk4NzcgMTAuMDc5NyAxMC41Mzc4IDEwLjUzMjhDMTAuMDg3OSAxMC45ODU3IDkuNTU4NzcgMTEuMzQzNiA4Ljk1MDUzIDExLjYwNjJDOC4zNDIyOCAxMS44Njg3IDcuNjkyNDEgMTIgNy4wMDA5MiAxMlpNNyAxMS4zMzg3QzguMjA4NjggMTEuMzM4NyA5LjIzMzk5IDEwLjkxNjggMTAuMDc1OSAxMC4wNzMyQzEwLjkxNzggOS4yMjk0NyAxMS4zMzg3IDguMjA1MDkgMTEuMzM4NyA3QzExLjMzODcgNS43OTEzMiAxMC45MTc4IDQuNzY2MDEgMTAuMDc1OSAzLjkyNDA4QzkuMjMzOTkgMy4wODIyNCA4LjIwODY4IDIuNjYxMzIgNyAyLjY2MTMyQzUuNzk0OTEgMi42NjEzMiA0Ljc3MDUzIDMuMDgyMjQgMy45MjY4NCAzLjkyNDA4QzMuMDgzMTYgNC43NjYwMSAyLjY2MTMyIDUuNzkxMzIgMi42NjEzMiA3QzIuNjYxMzIgOC4yMDUwOSAzLjA4MzE2IDkuMjI5NDcgMy45MjY4NCAxMC4wNzMyQzQuNzcwNTMgMTAuOTE2OCA1Ljc5NDkxIDExLjMzODcgNyAxMS4zMzg3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTUuMTA1MzQgOS4yODM1NVY1LjM5OTkzQzUuMTA1MzQgNS4yMjMyMiA1LjE2MjkxIDUuMDc3MyA1LjI3ODA0IDQuOTYyMTdDNS4zOTMxNyA0Ljg0NzA0IDUuNTM5MDkgNC43ODk0NyA1LjcxNTggNC43ODk0N0g4LjI5OTc1QzguNDgxNDYgNC43ODk0NyA4LjYyODU2IDQuODQ3MDQgOC43NDEwNiA0Ljk2MjE3QzguODUzNyA1LjA3NzMgOC45MTAwMSA1LjIyMzIyIDguOTEwMDEgNS4zOTk5M1Y5LjI4MzU1SDguMTQ0ODFWNy43Nzg4MUg1Ljg3MDU0VjkuMjgzNTVINS4xMDUzNFpNNS44NzA1NCA3LjAwNjEySDguMTQ0ODFWNS41NTQ2N0g1Ljg3MDU0VjcuMDA2MTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    top: '3px',
+    left: '0px'
+  },
+  '.cm-completionIcon.cm-completionIcon-text::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
+    position: 'absolute',
+    top: '3px',
+    left: '0px'
+  },
+  '.cm-completionLabel': {
+    paddingLeft: '16px',
+  }
 };

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

@@ -35,7 +35,7 @@ export const styles = css`
   }
 
   .option--single-select {
-    padding: 8px 12px;
+    padding: 9px 12px;
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {

package/src/nile-option/nile-option.ts

@@ -49,6 +49,7 @@ export class NileOption extends NileElement {
   @query('.option__label') defaultSlot: HTMLSlotElement;
 
   @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+  @state() selected = false; // the option is selected and has aria-selected="true"
   @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
   @state() hidden = false; // the option is hidden
   @state() isMultipleSelect = false;
@@ -65,19 +66,13 @@ export class NileOption extends NileElement {
   /** Draws the option in a disabled state, preventing selection. */
   @property({ type: Boolean, reflect: true }) disabled = false;
 
-  /** Forces the option to display in multiple select mode with checkboxes. */
-  @property({ type: Boolean, reflect: true }) multiple = false;
-
-  /** Indicates whether the option is selected. */
-  @property({ type: Boolean, reflect: true }) selected = false;
-
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute('role', 'option');
     this.setAttribute('aria-selected', 'false');
 
-    // Find the closest parent 'nile-select' or 'nile-virtual-select' element
-    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
+    // Find the closest parent 'nile-select' element
+    const parentSelect = this.closest('nile-select');
 
     // Check if the parent has the 'multiple' attribute
     if (parentSelect && parentSelect.hasAttribute('multiple')) {
@@ -89,10 +84,6 @@ export class NileOption extends NileElement {
         this.isMultipleSelect = Boolean(multipleValue);
       }
     }
-
-    if (this.multiple) {
-      this.isMultipleSelect = true;
-    }
   }
 
   protected updated(_changedProperties: PropertyValues): void {
@@ -135,11 +126,6 @@ export class NileOption extends NileElement {
     this.setAttribute('aria-selected', this.selected ? 'true' : 'false');
   }
 
-  @watch('multiple')
-  handleMultipleChange() {
-    this.isMultipleSelect = this.multiple;
-  }
-
   @watch('value')
   handleValueChange() {
     // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers

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

@@ -33,11 +33,8 @@ import type { CSSResultGroup, PropertyValues } from 'lit';
 import type { NileFormControl } from '../internal/nile-element';
 import type NileOption from '../nile-option/nile-option';
 import type NilePopup from '../nile-popup/nile-popup';
-import type { RenderItemConfig } from '../nile-virtual-select/types.js';
 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';
 
 type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
 
@@ -56,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.
@@ -95,15 +91,14 @@ type NileRemoveEvent = CustomEvent<Record<PropertyKey, never>>;
  */
 
 @customElement('nile-select')
-export class NileSelect extends NileElement implements NileFormControl{
+export class NileSelect extends NileElement implements NileFormControl {
   static styles: CSSResultGroup = styles;
 
   // protected override BUBBLES=false;
 
-  private formControlController: FormControlController | null;
-  private virtualScrollHelper!: VirtualScrollHelper;
-
-
+  private readonly formControlController = new FormControlController(this, {
+    assumeInteractionOn: ['nile-blur', 'nile-input'],
+  });
   private readonly hasSlotController = new HasSlotController(
     this,
     'help-text',
@@ -237,13 +232,6 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   @property({ type: String }) noResultsMessage: string = 'No results found';
 
-  /** Enhanced configuration for rendering items with support for display text, value, and search text */
-  @property({ attribute: false }) renderItemConfig?: RenderItemConfig;
-
-  @property({ type: Array }) data: any = [];
-
-  @property({ type: Boolean }) enableVirtualScroll = false;
-
   /** Gets the validity state object */
   get validity() {
     return this.valueInput?.validity;
@@ -254,18 +242,8 @@ export class NileSelect extends NileElement implements NileFormControl{
     return this.valueInput?.validationMessage;
   }
 
-  constructor() {
-    super();
-  }
-
   connectedCallback() {
     super.connectedCallback();
-    if(!this.enableVirtualScroll) {
-      this.formControlController = new FormControlController(this, {
-          assumeInteractionOn: ['nile-blur', 'nile-input'],
-      });
-    }
-    this.virtualScrollHelper = new VirtualScrollHelper(this);
     this.handleDocumentFocusIn = this.handleDocumentFocusIn.bind(this);
     this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
     this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
@@ -769,7 +747,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
     // Update validity
     this.updateComplete.then(() => {
-      this.formControlController?.updateValidity();
+      this.formControlController.updateValidity();
     });
 
     this.calculateTotalWidthOfTags();
@@ -820,8 +798,8 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   private handleInvalid(event: Event) {
-    this.formControlController?.setValidity(false);
-    this.formControlController?.emitInvalidEvent(event);
+    this.formControlController.setValidity(false);
+    this.formControlController.emitInvalidEvent(event);
   }
 
   @watch('disabled', { waitUntilFirstUpdate: true })
@@ -924,7 +902,7 @@ export class NileSelect extends NileElement implements NileFormControl{
 
   /** Gets the associated form, if one exists. */
   getForm(): HTMLFormElement | null {
-    return this.formControlController?.getForm() || null;
+    return this.formControlController.getForm();
   }
 
   /** Checks for validity and shows the browser's validation message if the control is invalid. */
@@ -935,7 +913,7 @@ export class NileSelect extends NileElement implements NileFormControl{
   /** Sets a custom validation message. Pass an empty string to restore validity. */
   setCustomValidity(message: string) {
     this.valueInput.setCustomValidity(message);
-    this.formControlController?.updateValidity();
+    this.formControlController.updateValidity();
   }
 
   /** Sets focus on the control. */
@@ -1008,10 +986,6 @@ export class NileSelect extends NileElement implements NileFormControl{
   }
 
   render() {
-    if(this.enableVirtualScroll) {
-      return this.virtualScrollHelper.renderVirtualizedContent();
-    }
-
     const hasLabelSlot = this.hasSlotController.test('label');
     const hasHelpTextSlot = this.hasSlotController.test('help-text');
     const hasLabelSuffixSlot = this.hasSlotController.test('label-suffix');