@aquera/nile-elements 0.1.55-beta-1.2 → 0.1.55-patch-1

package/package.json

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

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

@@ -39,9 +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, customisedThemeCss } from './theme';
+import { Theme as DefaultTheme, customisedThemeCss, fontFamily } from './theme';
 import { keymap } from '@codemirror/view';
-import { acceptCompletion } from '@codemirror/autocomplete';
+import { acceptCompletion, closeCompletion, completionStatus } from '@codemirror/autocomplete';
 
 // Choose the appropriate mode for your use case
 
@@ -102,11 +102,14 @@ 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;
+  @property({ type: Boolean, reflect: true, attribute: true }) tabCompletion: boolean = true;
+
+  @property({ type: Boolean, reflect: true, attribute: true }) defaultFont: boolean = false;
 
   public view: EditorView;
   public viewState:EditorState;
   private timeOut: any = null;
+  private isSpacePressed:boolean = false;
 
   // Compartments for initialiazing and switching extensions
   private lineNumbersComp = new Compartment();
@@ -260,7 +263,27 @@ export class NileCodeEditor extends NileElement {
       parent: this.codeEditor
     });
 
-    if(emitEvent) this.emit('nile-after-update',{ createNewView: this.createNewView, codeMirrorInstance: this.view,  }, false );
+    this.view.dom.addEventListener('keydown', (e: KeyboardEvent) => {
+        this.checkForSpaceKey(e);
+        this.handleEscapeKey(e);
+      }, true);
+      if (emitEvent) this.emit('nile-after-update', { createNewView: this.createNewView, codeMirrorInstance: this.view,  }, false );
+    }
+
+    checkForSpaceKey(e: KeyboardEvent) {
+      if (e.code === 'Space' && !e.ctrlKey) {
+          this.isSpacePressed = true;
+        } else {
+          this.isSpacePressed = false;
+      }
+    }
+
+    handleEscapeKey(e: KeyboardEvent) {
+      if (e.key === 'Escape' && this.view && completionStatus(this.view.state) !== null) {
+        e.stopPropagation();      
+        e.preventDefault();         
+        closeCompletion(this.view);
+      }
   }
 
   createState(){
@@ -381,7 +404,7 @@ export class NileCodeEditor extends NileElement {
     
     if (!baseMatch) {
       const trimmedText = textBeforeCursor.trim();
-      if (trimmedText === '') {
+       if (trimmedText === '' && !this.isSpacePressed) {
         const optionsList = Object.keys(this.customAutoCompletions).filter(key => 
           Object.keys(this.customAutoCompletions[key]).length
         );
@@ -512,10 +535,16 @@ export class NileCodeEditor extends NileElement {
   }
 
   getCustomThemeExtension(): Extension {
-    if (this.customThemeCSS) {
+    if(this.customThemeCSS) {
+      if(this.defaultFont){
+        return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss),EditorView.theme(fontFamily)];
+      }
       return [EditorView.theme(this.customThemeCSS as { [selector: string]: StyleSpec }), EditorView.theme(customisedThemeCss)];
     }
-    return [EditorView.theme(customisedThemeCss), EditorView.theme(DefaultTheme)];
+    if(this.defaultFont){
+      return [EditorView.theme(customisedThemeCss), EditorView.theme(fontFamily)];
+    }
+    return [EditorView.theme(customisedThemeCss)];
   }
 
   restrictSingleLine() {

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

@@ -38,10 +38,23 @@ export const CustomTheme = {
   },
 };
 
+export const fontFamily = {
+  '.cm-tooltip.cm-tooltip-autocomplete > ul' : {
+    fontFamily: 'monospace !important',
+    fontWeight: '400',
+  },
+  '.cm-content' : {
+    fontFamily: 'monospace !important',
+  }
+}
+
 export const customisedThemeCss = {
+  '.cm-content' : {
+    fontFamily: 'colfax-regular',
+  },
   '.cm-tooltip-autocomplete': {
     padding: '9px 12px',
-    backgroundColor: 'white',
+    backgroundColor: '#FFFFFF',
     display: 'block',
     fontSize: '14px',
     background: 'white',
@@ -49,10 +62,18 @@ export const customisedThemeCss = {
     borderRadius: '0.25rem',
     paddingBlock: '0',
     paddingInline: '0',
-    overflow: 'auto',
     overscrollBehavior: 'none',
     color: 'hsl(240 5.3% 26.1%)',
   },
+  '.cm-tooltip.cm-completionInfo.cm-completionInfo-right': {
+    backgroundColor: '#FFFFFF',
+    color: 'hsl(240 5.3% 26.1%)',
+    padding: "6px 12px",
+    borderTopRightRadius: "0.25rem",
+    borderBottomRightRadius: "0.25rem",
+    border: 'solid 1px #C7CED4',
+    fontSize: '14px',
+  },
   '.cm-tooltip.cm-tooltip-autocomplete > ul': {
     fontFamily: 'colfax-regular',
     fontWeight: '400',
@@ -79,31 +100,61 @@ export const customisedThemeCss = {
     display: 'block',
     content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00LjM2MDExIDYuMjVMNi45ODUxMSAxLjc1TDkuNjEwMTEgNi4yNUg0LjM2MDExWk01LjY5NTExIDUuNUg4LjMxMjYxTDcuMDAwMTEgMy4yNUw1LjY5NTExIDUuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNNi4yNSAxMi4yNUgxLjc1VjcuNzVINi4yNVYxMi4yNVpNMi41IDExLjVINS41VjguNUgyLjVWMTEuNVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNOC43NDk5NyAxMS44NzA4QzkuMTE5OTggMTIuMTE4IDkuNTU0OTkgMTIuMjUgMTAgMTIuMjVDMTAuNTk2NyAxMi4yNSAxMS4xNjkgMTIuMDEyOSAxMS41OTEgMTEuNTkxQzEyLjAxMjkgMTEuMTY5IDEyLjI1IDEwLjU5NjcgMTIuMjUgMTBDMTIuMjUgOS41NTQ5OSAxMi4xMTggOS4xMTk5OCAxMS44NzA4IDguNzQ5OTdDMTEuNjIzNiA4LjM3OTk2IDExLjI3MjIgOC4wOTE1NyAxMC44NjEgNy45MjEyN0MxMC40NDk5IDcuNzUwOTcgOS45OTc1MSA3LjcwNjQyIDkuNTYxMDUgNy43OTMyM0M5LjEyNDU5IDcuODgwMDUgOC43MjM2OCA4LjA5NDM0IDguNDA5MDEgOC40MDkwMUM4LjA5NDM0IDguNzIzNjggNy44ODAwNSA5LjEyNDU5IDcuNzkzMjMgOS41NjEwNUM3LjcwNjQyIDkuOTk3NTEgNy43NTA5NyAxMC40NDk5IDcuOTIxMjcgMTAuODYxQzguMDkxNTcgMTEuMjcyMiA4LjM3OTk2IDExLjYyMzYgOC43NDk5NyAxMS44NzA4Wk05LjE2NjY1IDguNzUyOEM5LjQxMzMyIDguNTg3OTggOS43MDMzMyA4LjUgMTAgOC41QzEwLjM5NzggOC41IDEwLjc3OTQgOC42NTgwNCAxMS4wNjA3IDguOTM5MzRDMTEuMzQyIDkuMjIwNjUgMTEuNSA5LjYwMjE4IDExLjUgMTBDMTEuNSAxMC4yOTY3IDExLjQxMiAxMC41ODY3IDExLjI0NzIgMTAuODMzNEMxMS4wODI0IDExLjA4IDEwLjg0ODEgMTEuMjcyMyAxMC41NzQgMTEuMzg1OEMxMC4yOTk5IDExLjQ5OTQgOS45OTgzNCAxMS41MjkxIDkuNzA3MzcgMTEuNDcxMkM5LjQxNjM5IDExLjQxMzMgOS4xNDkxMiAxMS4yNzA0IDguOTM5MzQgMTEuMDYwN0M4LjcyOTU2IDEwLjg1MDkgOC41ODY3IDEwLjU4MzYgOC41Mjg4MiAxMC4yOTI2QzguNDcwOTUgMTAuMDAxNyA4LjUwMDY1IDkuNzAwMDcgOC42MTQxOCA5LjQyNTk4QzguNzI3NzEgOS4xNTE4OSA4LjkxOTk3IDguOTE3NjIgOS4xNjY2NSA4Ljc1MjhaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
     position: 'absolute',
+    left: '0px',
     top: '2px',
-    left: '0px'
+    lineHeight: '0',
+    verticalAlign: 'middle'
   },
   '.cm-completionMatchedText' : {
     textDecoration: 'none',
   },
   '.cm-completionIcon.cm-completionIcon-property::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMDAwOTIgMTJDNi4zMTI5NCAxMiA1LjY2NTI2IDExLjg2ODggNS4wNTc4OSAxMS42MDYzQzQuNDUwNTMgMTEuMzQzOSAzLjkyMDMxIDEwLjk4NjIgMy40NjcyNCAxMC41MzM0QzMuMDE0MjUgMTAuMDgwNSAyLjY1NjQ1IDkuNTUwNTMgMi4zOTM4MiA4Ljk0MzQyQzIuMTMxMjcgOC4zMzYzMiAyIDcuNjg4ODIgMiA3LjAwMDkyQzIgNi4zMDkzNCAyLjEzMTIzIDUuNjU5MyAyLjM5MzY4IDUuMDUwNzlDMi42NTYxNCA0LjQ0MjI4IDMuMDEzNzcgMy45MTI5OCAzLjQ2NjU4IDMuNDYyODlDMy45MTk0NyAzLjAxMjgxIDQuNDQ5NDcgMi42NTY0NSA1LjA1NjU4IDIuMzkzODJDNS42NjM2OCAyLjEzMTI3IDYuMzExMTggMiA2Ljk5OTA4IDJDNy42OTA2NiAyIDguMzQwNyAyLjEzMTIzIDguOTQ5MjEgMi4zOTM2OEM5LjU1NzcyIDIuNjU2MTQgMTAuMDg3IDMuMDEyMzIgMTAuNTM3MSAzLjQ2MjI0QzEwLjk4NzIgMy45MTIxNSAxMS4zNDM2IDQuNDQxMjMgMTEuNjA2MiA1LjA0OTQ3QzExLjg2ODcgNS42NTc3MiAxMiA2LjMwNzU5IDEyIDYuOTk5MDhDMTIgNy42ODcwNiAxMS44Njg4IDguMzM0NzQgMTEuNjA2MyA4Ljk0MjFDMTEuMzQzOSA5LjU0OTQ3IDEwLjk4NzcgMTAuMDc5NyAxMC41Mzc4IDEwLjUzMjhDMTAuMDg3OSAxMC45ODU3IDkuNTU4NzcgMTEuMzQzNiA4Ljk1MDUzIDExLjYwNjJDOC4zNDIyOCAxMS44Njg3IDcuNjkyNDEgMTIgNy4wMDA5MiAxMlpNNyAxMS4zMzg3QzguMjA4NjggMTEuMzM4NyA5LjIzMzk5IDEwLjkxNjggMTAuMDc1OSAxMC4wNzMyQzEwLjkxNzggOS4yMjk0NyAxMS4zMzg3IDguMjA1MDkgMTEuMzM4NyA3QzExLjMzODcgNS43OTEzMiAxMC45MTc4IDQuNzY2MDEgMTAuMDc1OSAzLjkyNDA4QzkuMjMzOTkgMy4wODIyNCA4LjIwODY4IDIuNjYxMzIgNyAyLjY2MTMyQzUuNzk0OTEgMi42NjEzMiA0Ljc3MDUzIDMuMDgyMjQgMy45MjY4NCAzLjkyNDA4QzMuMDgzMTYgNC43NjYwMSAyLjY2MTMyIDUuNzkxMzIgMi42NjEzMiA3QzIuNjYxMzIgOC4yMDUwOSAzLjA4MzE2IDkuMjI5NDcgMy45MjY4NCAxMC4wNzMyQzQuNzcwNTMgMTAuOTE2OCA1Ljc5NDkxIDExLjMzODcgNyAxMS4zMzg3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTUuMTA1MzQgOS4yODM1NVY1LjM5OTkzQzUuMTA1MzQgNS4yMjMyMiA1LjE2MjkxIDUuMDc3MyA1LjI3ODA0IDQuOTYyMTdDNS4zOTMxNyA0Ljg0NzA0IDUuNTM5MDkgNC43ODk0NyA1LjcxNTggNC43ODk0N0g4LjI5OTc1QzguNDgxNDYgNC43ODk0NyA4LjYyODU2IDQuODQ3MDQgOC43NDEwNiA0Ljk2MjE3QzguODUzNyA1LjA3NzMgOC45MTAwMSA1LjIyMzIyIDguOTEwMDEgNS4zOTk5M1Y5LjI4MzU1SDguMTQ0ODFWNy43Nzg4MUg1Ljg3MDU0VjkuMjgzNTVINS4xMDUzNFpNNS44NzA1NCA3LjAwNjEySDguMTQ0ODFWNS41NTQ2N0g1Ljg3MDU0VjcuMDA2MTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
-    position: 'absolute'
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
   },
   '.cm-completionIcon.cm-completionIcon-keyword::after': {
     content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
-    position: 'absolute'
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
   },
   '.cm-completionIcon.cm-completionIcon-variable::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTcuMDAwOTIgMTJDNi4zMTI5NCAxMiA1LjY2NTI2IDExLjg2ODggNS4wNTc4OSAxMS42MDYzQzQuNDUwNTMgMTEuMzQzOSAzLjkyMDMxIDEwLjk4NjIgMy40NjcyNCAxMC41MzM0QzMuMDE0MjUgMTAuMDgwNSAyLjY1NjQ1IDkuNTUwNTMgMi4zOTM4MiA4Ljk0MzQyQzIuMTMxMjcgOC4zMzYzMiAyIDcuNjg4ODIgMiA3LjAwMDkyQzIgNi4zMDkzNCAyLjEzMTIzIDUuNjU5MyAyLjM5MzY4IDUuMDUwNzlDMi42NTYxNCA0LjQ0MjI4IDMuMDEzNzcgMy45MTI5OCAzLjQ2NjU4IDMuNDYyODlDMy45MTk0NyAzLjAxMjgxIDQuNDQ5NDcgMi42NTY0NSA1LjA1NjU4IDIuMzkzODJDNS42NjM2OCAyLjEzMTI3IDYuMzExMTggMiA2Ljk5OTA4IDJDNy42OTA2NiAyIDguMzQwNyAyLjEzMTIzIDguOTQ5MjEgMi4zOTM2OEM5LjU1NzcyIDIuNjU2MTQgMTAuMDg3IDMuMDEyMzIgMTAuNTM3MSAzLjQ2MjI0QzEwLjk4NzIgMy45MTIxNSAxMS4zNDM2IDQuNDQxMjMgMTEuNjA2MiA1LjA0OTQ3QzExLjg2ODcgNS42NTc3MiAxMiA2LjMwNzU5IDEyIDYuOTk5MDhDMTIgNy42ODcwNiAxMS44Njg4IDguMzM0NzQgMTEuNjA2MyA4Ljk0MjFDMTEuMzQzOSA5LjU0OTQ3IDEwLjk4NzcgMTAuMDc5NyAxMC41Mzc4IDEwLjUzMjhDMTAuMDg3OSAxMC45ODU3IDkuNTU4NzcgMTEuMzQzNiA4Ljk1MDUzIDExLjYwNjJDOC4zNDIyOCAxMS44Njg3IDcuNjkyNDEgMTIgNy4wMDA5MiAxMlpNNyAxMS4zMzg3QzguMjA4NjggMTEuMzM4NyA5LjIzMzk5IDEwLjkxNjggMTAuMDc1OSAxMC4wNzMyQzEwLjkxNzggOS4yMjk0NyAxMS4zMzg3IDguMjA1MDkgMTEuMzM4NyA3QzExLjMzODcgNS43OTEzMiAxMC45MTc4IDQuNzY2MDEgMTAuMDc1OSAzLjkyNDA4QzkuMjMzOTkgMy4wODIyNCA4LjIwODY4IDIuNjYxMzIgNyAyLjY2MTMyQzUuNzk0OTEgMi42NjEzMiA0Ljc3MDUzIDMuMDgyMjQgMy45MjY4NCAzLjkyNDA4QzMuMDgzMTYgNC43NjYwMSAyLjY2MTMyIDUuNzkxMzIgMi42NjEzMiA3QzIuNjYxMzIgOC4yMDUwOSAzLjA4MzE2IDkuMjI5NDcgMy45MjY4NCAxMC4wNzMyQzQuNzcwNTMgMTAuOTE2OCA1Ljc5NDkxIDExLjMzODcgNyAxMS4zMzg3WiIgZmlsbD0iYmxhY2siLz4KPHBhdGggZD0iTTUuMTA1MzQgOS4yODM1NVY1LjM5OTkzQzUuMTA1MzQgNS4yMjMyMiA1LjE2MjkxIDUuMDc3MyA1LjI3ODA0IDQuOTYyMTdDNS4zOTMxNyA0Ljg0NzA0IDUuNTM5MDkgNC43ODk0NyA1LjcxNTggNC43ODk0N0g4LjI5OTc1QzguNDgxNDYgNC43ODk0NyA4LjYyODU2IDQuODQ3MDQgOC43NDEwNiA0Ljk2MjE3QzguODUzNyA1LjA3NzMgOC45MTAwMSA1LjIyMzIyIDguOTEwMDEgNS4zOTk5M1Y5LjI4MzU1SDguMTQ0ODFWNy43Nzg4MUg1Ljg3MDU0VjkuMjgzNTVINS4xMDUzNFpNNS44NzA1NCA3LjAwNjEySDguMTQ0ODFWNS41NTQ2N0g1Ljg3MDU0VjcuMDA2MTJaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
-    position: 'absolute'
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
   },
   '.cm-completionIcon.cm-completionIcon-text::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
-    position: 'absolute'
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUuNjA1MjEgMTEuOTExVjcuODg0ODFMMS44MjU3NiA1LjkxNDYxVjkuOTQwODFMNS42MDUyMSAxMS45MTFaTTYuNDMwOTcgMTEuOTExTDEyLjE3NDIgOC42MDY3OVY0LjU4MDU5TDYuNDMwOTcgNy44ODQ4MVYxMS45MTFaTTYuMDE4MDkgNy4yMzE0MUwxMS44NzI1IDMuODY5OTlMNy45NjYwMyAxLjg1Njg5TDIuMTI3NDggNS4yMTgzMUw2LjAxODA5IDcuMjMxNDFaTTEgMTAuMzc2NFY0Ljk1NzYxTDcuOTgxOTEgMUwxMyAzLjYwOTI5VjkuMDI4MDlMNi4wMTgwOSAxM0wxIDEwLjM3NjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
   },
   '.cm-completionIcon.cm-completionIcon-function::after': {
-    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuMTk5OTUgNC4wMTQ0OUM2LjE5OTk1IDMuNzkyNyA2LjI3ODE0IDMuNjAzMjkgNi40MzQ1IDMuNDQ2MjZDNi41OTA3NyAzLjI4OTE0IDYuNzc5MjcgMy4yMTA1OCA3IDMuMjEwNThDNy4yMjA3MyAzLjIxMDU4IDcuNDA5MjMgMy4yODkxNCA3LjU2NTUgMy40NDYyNkM3LjcyMTg2IDMuNjAzMjkgNy44MDAwNSAzLjc5MjcgNy44MDAwNSA0LjAxNDQ5QzcuODAwMDUgNC4yMzYyOCA3LjcyMTg2IDQuNDI1NjkgNy41NjU1IDQuNTgyNzJDNy40MDkyMyA0LjczOTg0IDcuMjIwNzMgNC44MTg0IDcgNC44MTg0QzYuNzc5MjcgNC44MTg0IDYuNTkwNzcgNC43Mzk4NCA2LjQzNDUgNC41ODI3MkM2LjI3ODE0IDQuNDI1NjkgNi4xOTk5NSA0LjIzNjI4IDYuMTk5OTUgNC4wMTQ0OVpNNi45MzM1OSAxM0w1LjAyNTE4IDEwLjk3OTFMNS44MTE1OSA5LjkwNjQ1TDUuMDE0NjggOC44MTA5NUw1Ljc0OSA3LjgwNzk1VjYuNzU2OTlDNS4yMzggNi41MDY4OCA0LjgxODc3IDYuMTQ3MSA0LjQ5MTMyIDUuNjc3NjdDNC4xNjM3NyA1LjIwODMyIDQgNC42NTM5MyA0IDQuMDE0NDlDNCAzLjE3ODI5IDQuMjkxOTUgMi40NjY4MiA0Ljg3NTg2IDEuODgwMDlDNS40NTk3NyAxLjI5MzM2IDYuMTY3ODIgMSA3IDFDNy44MzIxOCAxIDguNTQwMjMgMS4yOTMzNiA5LjEyNDE0IDEuODgwMDlDOS43MDgwNSAyLjQ2NjgyIDEwIDMuMTc4MjkgMTAgNC4wMTQ0OUMxMCA0LjYyMzA1IDkuODQ2NjggNS4xNjEwNSA5LjU0MDA1IDUuNjI4NDhDOS4yMzM0MSA2LjA5NTk5IDguODAzNzMgNi40NzIxNyA4LjI1MSA2Ljc1Njk5VjExLjY3NjFMNi45MzM1OSAxM1pNNC42ODUzNiA0LjAxNDQ5QzQuNjg1MzYgNC41NDc2IDQuODUzNTUgNS4wMjc4MiA1LjE4OTkxIDUuNDU1MTRDNS41MjYyNyA1Ljg4MjQ3IDUuOTQxMDUgNi4xNTQ4MiA2LjQzNDIzIDYuMjcyMjFWOC4wNDU4Mkw1Ljg2NTA1IDguODA5MTdMNi42NTkwOSA5LjkyMDg0TDUuOTAxNDUgMTAuOTI0TDYuOTQ4MzIgMTIuMDEzTDcuNTY1NzcgMTEuMzkyNlY2LjI3MjIxQzguMDg2MDUgNi4xMzE0NCA4LjUwNzU5IDUuODU3NTggOC44MzA0MSA1LjQ1MDYyQzkuMTUzMjMgNS4wNDM2NiA5LjMxNDY0IDQuNTY0OTUgOS4zMTQ2NCA0LjAxNDQ5QzkuMzE0NjQgMy4zNzA4NSA5LjA4OSAyLjgyMjMxIDguNjM3NzMgMi4zNjg4NUM4LjE4NjQ1IDEuOTE1NCA3LjY0MDU1IDEuNjg4NjcgNyAxLjY4ODY3QzYuMzU5NDUgMS42ODg2NyA1LjgxMzU1IDEuOTE1NCA1LjM2MjI3IDIuMzY4ODVDNC45MTEgMi44MjIzMSA0LjY4NTM2IDMuMzcwODUgNC42ODUzNiA0LjAxNDQ5WiIgZmlsbD0iYmxhY2siLz4KPC9zdmc+Cg==")',
-    position: 'absolute'
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNzE5ODMgNC4zNTY0NUwzLjMxODk0IDQuODA1NjZMMy4zNTgzNCA0Ljk3NTU5SDQuMzkwNjJDNC4xNzk4MyA2LjE4NDU3IDQuMDIyMjMgNy4yNzQ0MSAzLjcxOTgzIDguOTU0MUMzLjM1ODM0IDExLjA5NjcgMy4xNTA1IDExLjYyMyAzLjAyNzM4IDExLjgxNTRDMi45MTkwMyAxMi4wMDU5IDIuNzYzNCAxMi4xMDQ1IDIuNTUyNjEgMTIuMTA0NUMyLjMyMTEzIDEyLjEwNDUgMS45MDI1IDExLjkyMjkgMS42Nzc5MiAxMS43MTY4QzEuNTk3MTUgMTEuNjYyMSAxLjUwMTYxIDExLjY3NTggMS40MDAxNSAxMS43NDIyQzEuMTk3MjQgMTEuOTEyMSAxLjAwMDI0IDEyLjE3MzggMS4wMDAyNCAxMi40MDgyQzAuOTg4NDIgMTIuNzI0NiAxLjQxNDkzIDEzIDEuODIxNzMgMTNDMi4xODAyNyAxMyAyLjcwODI0IDEyLjc3NzMgMy4yNjM3OCAxMi4yNTM5QzQuMDIzMjIgMTEuNTQgNC41OTE1NiAxMC41NjA1IDUuMDY2MzMgOC40NDMzNkM1LjM3MTY5IDcuMDkxOCA1LjUxNTUgNi4yMTI4OSA1LjczMDIzIDQuOTc2NTZMNy4wMTI3IDQuODYxMzNMNy4yOTA0NyA0LjM1NjQ1SDUuODQ2NDZDNi4yMTk3NyAyLjAyODMyIDYuNTExMzMgMS42ODM1OSA2Ljg2OTg4IDEuNjgzNTlDNy4xMDgyNSAxLjY4MzU5IDcuMzg2MDIgMS44NjUyMyA3LjcwNTE2IDIuMjIyNjZDNy43OTk3MiAyLjM1MTU2IDcuOTQxNTYgMi4zMzc4OSA4LjA0OTkxIDIuMjVDOC4yMzIxNCAyLjE0MjU4IDguNDU2NzIgMS44NjcxOSA4LjQ3MTQ5IDEuNjE3MTlDOC40ODIzMyAxLjM0MTggOC4xNTEzNyAxIDcuNTgyMDMgMUM3LjA2NTg5IDEgNi4yNzQ5MyAxLjM0MTggNS42MTAwNiAyLjAxMzY3QzUuMDI2OTMgMi42MjU5OCA0LjcyMTU4IDMuMzkwNjIgNC41MTA3OSA0LjM1NjQ1SDMuNzE5ODNaTTcuODIzMzYgNS45MTUwNEM4LjIyMTMgNS4zODk2NSA4LjQ1OTY3IDUuMjE0ODQgOC41ODI4IDUuMjE0ODRDOC43MDk4NiA1LjIxNDg0IDguODExMzIgNS4zMzg4NyA5LjAyOSA2LjAzNjEzTDkuNDAxMzMgNy4yMjY1NkM4LjY4MTMgOC4zMTgzNiA4LjE1NDMyIDguOTI2NzYgNy44MzQxOSA4LjkyNjc2QzcuNzI3ODEgOC45MjY3NiA3LjYyMDQ1IDguODkzNTUgNy41NDQ2IDguODE5MzRDNy40Njk3NCA4Ljc0NTEyIDcuMzg3IDguNjgzNTkgNy4zMDYyMyA4LjY4MzU5QzcuMDQyMjUgOC42ODM1OSA2LjcxNTIzIDkuMDAwOTggNi43MDkzMiA5LjM5NDUzQzYuNzAzNDEgOS43OTU5IDYuOTg3MDkgMTAuMDgzIDcuMzU5NDIgMTAuMDgzQzcuOTk4NjkgMTAuMDgzIDguNTM5NDYgOS40NjA5NCA5LjU4MzU2IDcuODExNTJMOS44ODg5MSA4LjgzMjAzQzEwLjE1MDkgOS43MDg5OCAxMC40NTgyIDEwLjA4MyAxMC44NDI0IDEwLjA4M0MxMS4zMTcyIDEwLjA4MyAxMS45NTU0IDkuNjgxNjQgMTIuNjUxOCA4LjU5NjY4TDEyLjM2MDMgOC4yNjY2QzExLjk0MTcgOC43NjY2IDExLjY2MzkgOS4wMDA5OCAxMS40OTk0IDkuMDAwOThDMTEuMzE2MiA5LjAwMDk4IDExLjE1NTYgOC43MjM2MyAxMC45NDM4IDguMDQxOTlMMTAuNDk3NiA2LjYwMzUyQzEwLjc2MTYgNi4yMTc3NyAxMS4wMjE3IDUuODkzNTUgMTEuMjUwMiA1LjYzNDc3QzExLjUyMiA1LjMyNzE1IDExLjczMTkgNS4xOTYyOSAxMS44NzQ3IDUuMTk2MjlDMTEuOTk0OCA1LjE5NjI5IDEyLjA5OTMgNS4yNDcwNyAxMi4xNjQzIDUuMzE4MzZDMTIuMjUgNS40MTIxMSAxMi4zMDEyIDUuNDU2MDUgMTIuNDAyNiA1LjQ1NjA1QzEyLjYzMjEgNS40NTYwNSAxMi45ODY3IDUuMTY2OTkgMTIuOTk5NiA0Ljc4NDE4QzEzLjAxMTQgNC40Mjg3MSAxMi43ODg4IDQuMTI1OTggMTIuNDAyNiA0LjEyNTk4QzExLjgxOTUgNC4xMjU5OCAxMS4zMDUzIDQuNjI0MDIgMTAuMzE1NCA2LjA4MzAxTDEwLjExMTUgNS40NTcwM0M5LjgyNTg3IDQuNTc4MTIgOS42MzY3NSA0LjEyNTk4IDkuMjM4ODEgNC4xMjU5OEM4Ljc3NTg2IDQuMTI1OTggOC4xMzk1NSA0LjY5MDQzIDcuNTE3MDIgNS41ODQ5Nkw3LjgyMzM2IDUuOTE1MDRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
+  },
+  '.cm-completionIcon.cm-completionIcon-class::after': {
+    content: 'url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTQiIHZpZXdCb3g9IjAgMCAxNCAxNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuOTA2NjUgMTNMMS41IDEwVjRMNi45MDY2NSAxTDEyLjMxMzMgNFYxMEw2LjkwNjY1IDEzWk01LjE0ODk3IDUuNTA3MzJDNS4zNjUzNSA1LjI1NzQyIDUuNjI5MTQgNS4wNTkxOCA1Ljk0MDM0IDQuOTEyNTlDNi4yNTE2NSA0Ljc2NiA2LjU3Mzc1IDQuNjkyNzEgNi45MDY2NSA0LjY5MjcxQzcuMjM5NTQgNC42OTI3MSA3LjU2MTY0IDQuNzY2IDcuODcyOTYgNC45MTI1OUM4LjE4NDE1IDUuMDU5MTggOC40NDc5NCA1LjI1NzQyIDguNjY0MzIgNS41MDczMkwxMC45MjUzIDQuMjYyMjRMNi45MDY2NSAyLjAzMTc0TDIuODg3OTkgNC4yNjIyNEw1LjE0ODk3IDUuNTA3MzJaTTYuNDU4OTYgMTEuNzMzN1Y5LjI3ODJDNS45MjExNyA5LjE2Njg1IDUuNDc2ODEgOC44OTg0MSA1LjEyNTkgOC40NzI4OEM0Ljc3NDg3IDguMDQ3MjQgNC41OTkzNSA3LjU1NjI4IDQuNTk5MzUgN0M0LjU5OTM1IDYuODgzNDkgNC42MDU1NSA2Ljc2NDA1IDQuNjE3OTUgNi42NDE2OEM0LjYzMDIzIDYuNTE5NDMgNC42NjM3NSA2LjQwNTczIDQuNzE4NSA2LjMwMDU4TDIuMzk1MzcgNS4wMDQwMlY5LjQ3NTUyTDYuNDU4OTYgMTEuNzMzN1pNNi45MDY2NSA4LjQxMTkzQzcuMzA0MDUgOC40MTE5MyA3LjYzODcyIDguMjc1OTYgNy45MTA2NiA4LjAwNDAyQzguMTgyNiA3LjczMjA4IDguMzE4NTcgNy4zOTc0MSA4LjMxODU3IDdDOC4zMTg1NyA2LjYwMjU5IDguMTgyNiA2LjI2NzkyIDcuOTEwNjYgNS45OTU5OEM3LjYzODcyIDUuNzI0MDQgNy4zMDQwNSA1LjU4ODA3IDYuOTA2NjUgNS41ODgwN0M2LjUwOTI0IDUuNTg4MDcgNi4xNzQ1NyA1LjcyNDA0IDUuOTAyNjMgNS45OTU5OEM1LjYzMDY5IDYuMjY3OTIgNS40OTQ3MiA2LjYwMjU5IDUuNDk0NzIgN0M1LjQ5NDcyIDcuMzk3NDEgNS42MzA2OSA3LjczMjA4IDUuOTAyNjMgOC4wMDQwMkM2LjE3NDU3IDguMjc1OTYgNi41MDkyNCA4LjQxMTkzIDYuOTA2NjUgOC40MTE5M1pNNy4zNTQzMyAxMS43MzM3TDExLjQxNzkgOS40NzU1MlY1LjAwNDAyTDkuMDk0NzkgNi4zMDA1OEM5LjEzODA3IDYuNDA1NzMgOS4xNjg3MSA2LjUxOTQzIDkuMTg2NzQgNi42NDE2OEM5LjIwNDg3IDYuNzY0MDUgOS4yMTM5NCA2Ljg4MzQ5IDkuMjEzOTQgN0M5LjIxMzk0IDcuNTU2MjggOS4wMzg0MyA4LjA0NzI0IDguNjg3NCA4LjQ3Mjg4QzguMzM2NDggOC44OTg0MSA3Ljg5MjEzIDkuMTY2ODUgNy4zNTQzMyA5LjI3ODJWMTEuNzMzN1oiIGZpbGw9ImJsYWNrIi8+Cjwvc3ZnPgo= ")',
+    position: 'absolute',
+    left: '0px',
+    top: '2px',
+    lineHeight: '0',
+    verticalAlign: 'middle'
   },
   '.cm-completionLabel': {
     marginLeft: '18px',

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

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

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

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

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

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

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

@@ -32,6 +32,7 @@ export { default as arrowleft } from './arrowleft';
 export { default as arrowright } from './arrowright';
 export { default as arrowup } from './arrowup';
 export { default as attributemapanalysisicon } from './attribute-map-analysis-icon';
+export { default as attribute } from './attribute';
 export { default as attributemap } from './attributemap';
 export { default as automationdetails } from './automation-details';
 export { default as back } from './back';
@@ -60,6 +61,7 @@ export { default as checkdone01 } from './check-done-01';
 export { default as checkdone02 } from './check-done-02';
 export { default as chevronleftdouble } from './chevron-left-double';
 export { default as chevronup } from './chevron-up';
+export { default as class } from './class';
 export { default as clockcheck } from './clock-check';
 export { default as clockrewind } from './clock-rewind';
 export { default as clock } from './clock';
@@ -174,6 +176,7 @@ export { default as fullunion } from './full-union';
 export { default as fullscreen } from './fullscreen';
 export { default as fullscreenexit } from './fullscreenexit';
 export { default as fullscreenshrink } from './fullscreenshrink';
+export { default as function } from './function';
 export { default as funnel02 } from './funnel-02';
 export { default as funnel } from './funnel';
 export { default as gateway } from './gateway';
@@ -222,6 +225,7 @@ export { default as intersection } from './intersection';
 export { default as js } from './js';
 export { default as keyperformanceindicator } from './key-performance-indicator';
 export { default as keyboard01 } from './keyboard-01';
+export { default as keyword } from './keyword';
 export { default as kill } from './kill';
 export { default as laptop01 } from './laptop-01';
 export { default as layersthree02 } from './layers-three-02';

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

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

package/src/nile-table-row/nile-table-row.css.ts

@@ -27,97 +27,6 @@ export const styles = css`
   nile-table-row > slot::slotted(nile-table-cell-item:first-child) {
     color: red;
   }
-
-  .row-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.row {
-  cursor: pointer;
-}
-
-.expanded-content {
-  overflow: hidden;
-  /* Optional: smooth height transition */
-  transition: max-height 0.3s ease;
-  max-height: 1000px; /* or set via a CSS variable */
-}
-
-.row-container {
-  display: flex;
-  flex-direction: column; /* keeps expansion content below */
-}
-
-.row {
-  display: flex;          /* turn each row into a flex row */
-  cursor: pointer;        /* keep your expand cursor */
-}
-
-.row.expandable .expand-icon {
-  margin-right: 4px;
-}
-
-/* All direct children of .row (i.e. your cell items & the icon) flex equally */
-.row ::slotted(nile-table-cell-item),
-.row ::slotted(nile-table-header-item) {
-  flex: 1 1 0;            /* grow + shrink equally, zero base-width */
-  box-sizing: border-box; /* so padding/borders stay inside */
-}
-
-/* Make sure the expand-icon doesn’t stretch like a cell: */
-.row ::slotted(.expand-icon) {
-  flex: 0 0 auto;
-}
-
-/* Expansion pane—already in your code: */
-.expanded-content {
-  overflow: hidden;
-  transition: ease-in-out all 10s;
-  max-height: 1000px;     /* or a CSS variable */
-}
-
- 
-
- 
-.row-container {
-  display: flex;
-  flex-direction: column;
-}
-
- 
-.row {
-  position: relative;      /* so the icon can be absolutely positioned */
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid var(--nile-table-row-border-color, #e0e0e0);
-  cursor: default;         /* row itself is inert */
-  background: var(--nile-table-row-background, #fff);
-}
-
-/* Expand/collapse icon */
-.expand-icon {
-  position: absolute;
-  left: 0.40em;            
-  top: 50%;
-  transform: translateY(-50%);
-  cursor: pointer;
-  font-size: 1em;
-  line-height: 1;
-  user-select: none;
-  z-index: 1;
-}
-
-
- 
- 
-
-
-.expanded-content {
-  overflow: hidden;
-transition: ease-in-out all 10s;
-}
-
 `;
 
 export default [styles];

package/src/nile-table-row/nile-table-row.ts

@@ -1,3 +1,10 @@
+/**
+ * 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 {
   LitElement,
   html,
@@ -9,87 +16,58 @@ import { styles } from './nile-table-row.css';
 import NileElement from '../internal/nile-element';
 
 /**
- * `<nile-table-row>` component.
+ *nile-table-row component.
  *
- * Renders one table row; if `expandable` is true, shows
- * a toggle icon at top-left that expands/collapses
- * the `<slot name="expanded">` content.
+ * @tag nile-table-row
  *
- * @slot            Default slot for cell items
- * @slot expanded   Content to reveal on expand
- * @attr {boolean} expandable  enable expansion behavior
- * @attr {boolean} expanded   reflect current expanded state
  */
 @customElement('nile-table-row')
 export class NileTableRow extends NileElement {
-  /** Include our CSS */
+  /**
+   * The styles for TableRow
+   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+   */
+
   public static get styles(): CSSResultArray {
     return [styles];
   }
 
-  /** Enable expansion (shows icon) */
-  @property({ type: Boolean, reflect: true }) expandable = false;
+  /* #endregion */
 
-  /** Current expanded/collapsed state */
-  @property({ type: Boolean, reflect: true }) expanded = false;
+  /* #region Methods */
 
-  @query('slot[name="expanded"]')
-  private _expandedSlot!: HTMLSlotElement;
+  /**
+   * Render method
+   * @slot This is a slot test
+   */
 
-  /** Icon click toggles expand/collapse */
-  private toggleExpand(e: MouseEvent): void {
-    e.stopPropagation();
-    this.expanded = !this.expanded;
-    this.dispatchEvent(new CustomEvent('nile-row-toggle', {
-      detail: { expanded: this.expanded },
-      bubbles: true,
-      composed: true,
-    }));
-  }
-
-  /** Sorting event pass-through (unchanged) */
   private handleSortingAlter(event: CustomEvent) {
-    const headers = Array.from(this.querySelectorAll('nile-table-header-item'));
-    headers.forEach(header => {
-      if (header.textContent !== event.detail.value.curr_sort_string) {
-        (header as any).sorting_ct = 0;
+    const header_items: any = [
+      ...this.querySelectorAll('nile-table-header-item'),
+    ];
+    for (let i = 0; i < header_items.length; i++) {
+      const header = header_items[i];
+      const haveIcon = header.textContent == event.detail.value.curr_sort_string;
+      if (!haveIcon) {
+        header.sorting_ct = 0;
       }
-    });
+    }
   }
 
   public render(): TemplateResult {
     return html`
-      <div class="row-container">
-        <div
-          part="nile-row"
-          class="row ${this.expandable ? 'expandable' : ''} ${this.expanded ? 'expanded' : ''}"
-          @nile-click-sort=${this.handleSortingAlter}
-        >
-          ${this.expandable
-            ? html`
-              <nile-icon
-                class="expand-icon"
-                 name="${this.expanded ? 'chevron-up' : 'chevron-down'}"
-                @click=${this.toggleExpand}
-                role="button"
-                size="10"
-                aria-label="${this.expanded ? 'Collapse row' : 'Expand row'}">
-              </nile-icon>`
-            : null}
-          <slot></slot>
-        </div>
-
-        ${this.expandable && this.expanded
-          ? html`
-              <div class="expanded-content">
-                <slot name="expanded"></slot>
-              </div>`
-          : null}
-      </div>
+      <slot
+        part="nile-row"
+        @nile-click-sort="${this.handleSortingAlter}"
+      ></slot>
     `;
   }
+
+  /* #endregion */
 }
 
+export default NileTableRow;
+
 declare global {
   interface HTMLElementTagNameMap {
     'nile-table-row': NileTableRow;

package/vscode-html-custom-data.json

@@ -818,7 +818,7 @@
     },
     {
       "name": "nile-code-editor",
-      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `customThemeCSS` {`object | null`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile icon component.\n\nEvents:\n\n  * `nile-focus` {`Event`} - \n\n  * `nile-blur` {`Event`} - \n\nAttributes:\n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `error-message` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`boolean`} - \n\nProperties:\n\n  * `codeEditor` {`HTMLInputElement`} - \n\n  * `value` {`string`} - \n\n  * `expandIcon` {`string`} - \n\n  * `placeholder` {`string`} - \n\n  * `customAutoCompletions` - \n\n  * `customCompletionsPaths` {`string[]`} - \n\n  * `language` {`\"html\" | \"javascript\" | \"sql\" | \"json\"`} - \n\n  * `errorMessage` {`string`} - \n\n  * `error` {`boolean`} - \n\n  * `enableSearch` {`boolean`} - \n\n  * `noborder` {`boolean`} - \n\n  * `multiline` {`boolean`} - \n\n  * `enableFoldGutters` {`boolean`} - \n\n  * `allowVariableInCustomSuggestion` {`boolean`} - \n\n  * `lineNumbers` {`boolean`} - \n\n  * `disableSyntaxHighlighting` {`boolean`} - \n\n  * `customThemeCSS` {`object | null`} - \n\n  * `lineNumbersMultiline` {`boolean`} - \n\n  * `hasScroller` {`boolean`} - \n\n  * `expandable` {`boolean`} - \n\n  * `readonly` {`boolean`} - \n\n  * `debounce` {`boolean`} - \n\n  * `debounceTimeout` {`number`} - \n\n  * `aboveCursor` {`boolean`} - \n\n  * `tabCompletion` {`boolean`} - \n\n  * `defaultFont` {`boolean`} - \n\n  * `view` - \n\n  * `viewState` - \n\n  * `timeOut` - \n\n  * `isSpacePressed` {`boolean`} - \n\n  * `lineNumbersComp` - \n\n  * `restrictSingleLineComp` - \n\n  * `readOnlyComp` - \n\n  * `customCompletionComp` - \n\n  * `placeholderComp` - \n\n  * `defaultSyntaxHighlightingComp` - \n\n  * `themeComp` - \n\n  * `customAutocomplete` - Custom autocomplete handler for code editor suggestions\n\n  * `insertBetweenCode` - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
       "attributes": [
         {
           "name": "value",
@@ -933,7 +933,12 @@
         },
         {
           "name": "tabCompletion",
-          "description": "`tabCompletion` {`boolean`} - \n\nProperty: tabCompletion\n\nDefault: false",
+          "description": "`tabCompletion` {`boolean`} - \n\nProperty: tabCompletion\n\nDefault: true",
+          "valueSet": "v"
+        },
+        {
+          "name": "defaultFont",
+          "description": "`defaultFont` {`boolean`} - \n\nProperty: defaultFont\n\nDefault: false",
           "valueSet": "v"
         },
         {
@@ -3445,23 +3450,8 @@
     },
     {
       "name": "nile-table-row",
-      "description": "`<nile-table-row>` component.\n\nRenders one table row; if `expandable` is true, shows\na toggle icon at top-left that expands/collapses\nthe `<slot name=\"expanded\">` content.\n\nEvents:\n\n  * `nile-row-toggle` {`CustomEvent<{ expanded: boolean; }>`} - \n\nSlots:\n\n  * ` ` {} - Default slot for cell items\n\nAttributes:\n\n  * `expandable` {`boolean`} - Enable expansion (shows icon)\n\n  * `expanded` {`boolean`} - Current expanded/collapsed state\n\nProperties:\n\n  * `expandable` {`boolean`} - Enable expansion (shows icon)\n\n  * `expanded` {`boolean`} - Current expanded/collapsed state\n\n  * `_expandedSlot` {`HTMLSlotElement`} - \n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
-      "attributes": [
-        {
-          "name": "expandable",
-          "description": "`expandable` {`boolean`} - Enable expansion (shows icon)\n\nProperty: expandable\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "expanded",
-          "description": "`expanded` {`boolean`} - Current expanded/collapsed state\n\nProperty: expanded\n\nDefault: false",
-          "valueSet": "v"
-        },
-        {
-          "name": "onnile-row-toggle",
-          "description": "`nile-row-toggle` {`CustomEvent<{ expanded: boolean; }>`} - "
-        }
-      ]
+      "description": "nile-table-row component.\n\nProperties:\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "attributes": []
     },
     {
       "name": "nile-table",