lexgui 0.6.12 → 0.7.1

package/build/lexgui.module.js

@@ -7,9 +7,9 @@
 */
 
 const LX = {
-    version: "0.6.12",
+    version: "0.7.1",
     ready: false,
-    components: [], // Specific pre-build components
+    extensions: [], // Store extensions used
     signals: {}, // Events and triggers
     extraCommandbarEntries: [], // User specific entries for command bar
     activeDraggable: null // Watch for the current active draggable
@@ -203,7 +203,7 @@ function _createCommandbar( root )
         }
         else
         {
-            for( let c of LX.components )
+            for( let c of LX.extensions )
             {
                 if( !LX[ c ] || !LX[ c ].prototype.onKeyPressed )
                 {
@@ -416,6 +416,7 @@ function _createCommandbar( root )
  * skipRoot: Skip adding LX root container
  * skipDefaultArea: Skip creation of main area
  * layoutMode: Sets page layout mode (document | app)
+ * spacingMode: Sets page layout spacing mode (default | compact)
  */
 
 async function init( options = { } )
@@ -467,6 +468,9 @@ async function init( options = { } )
         } );
     }
 
+    this.spacingMode = options.spacingMode ?? "default";
+    document.documentElement.setAttribute( "data-spacing", this.spacingMode );
+
     this.container.appendChild( this.modal );
 
     if( !options.skipRoot )
@@ -511,13 +515,13 @@ async function init( options = { } )
     this.DEFAULT_SPLITBAR_SIZE  = 4;
     this.OPEN_CONTEXTMENU_ENTRY = 'click';
 
-    this.widgetResizeObserver = new ResizeObserver( entries => {
+    this.componentResizeObserver = new ResizeObserver( entries => {
         for ( const entry of entries )
         {
-            const widget = entry.target?.jsInstance;
-            if( widget && widget.onResize )
+            const c = entry.target?.jsInstance;
+            if( c && c.onResize )
             {
-                widget.onResize( entry.contentRect );
+                c.onResize( entry.contentRect );
             }
         }
     });
@@ -562,6 +566,19 @@ function setLayoutMode( mode )
 
 LX.setLayoutMode = setLayoutMode;
 
+/**
+ * @method setSpacingMode
+ * @param {String} mode: default | compact
+ */
+
+function setSpacingMode( mode )
+{
+    this.spacingMode = mode;
+    document.documentElement.setAttribute( "data-spacing", this.spacingMode );
+}
+
+LX.setSpacingMode = setSpacingMode;
+
 /**
  * @method setCommandbarState
  * @param {Boolean} value
@@ -664,7 +681,7 @@ function emit( signalName, value, options = {} )
 
     for( let obj of data )
     {
-        if( obj instanceof LX.Widget )
+        if( obj instanceof LX.BaseComponent )
         {
             obj.set( value, options.skipCallback ?? true );
         }
@@ -744,7 +761,19 @@ class Popover {
         this.root.dataset["side"] = this.side;
         this.root.tabIndex = "1";
         this.root.className = "lexpopover";
-        LX.root.appendChild( this.root );
+
+        const refElement = trigger ?? this.reference;
+        const nestedDialog = refElement.closest( "dialog" );
+        if( nestedDialog && nestedDialog.dataset[ "modal" ] == 'true' )
+        {
+            this._parent = nestedDialog;
+        }
+        else
+        {
+            this._parent = LX.root;
+        }
+
+        this._parent.appendChild( this.root );
 
         this.root.addEventListener( "keydown", (e) => {
             if( e.key == "Escape" )
@@ -866,6 +895,13 @@ class Popover {
             position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - this.root.offsetHeight - this._windowPadding );
         }
 
+        if( this._parent instanceof HTMLDialogElement )
+        {
+            let parentRect = this._parent.getBoundingClientRect();
+            position[ 0 ] -= parentRect.x;
+            position[ 1 ] -= parentRect.y;
+        }
+
         this.root.style.left = `${ position[ 0 ] }px`;
         this.root.style.top = `${ position[ 1 ] }px`;
     }
@@ -939,7 +975,7 @@ class Sheet {
         this.root.tabIndex = "1";
         this.root.role = "dialog";
         this.root.className = "lexsheet fixed z-1000 bg-primary";
-        LX.root.appendChild( this.root );
+        document.body.appendChild( this.root );
 
         this.root.addEventListener( "keydown", (e) => {
             if( e.key == "Escape" )
@@ -980,17 +1016,21 @@ class Sheet {
                     this.root.style.height = "100%";
                     break;
                 case "top":
+                    this.root.style.left = 0;
                     this.root.style.top = 0;
                     this.root.style.width = "100%";
                     this.root.style.height = size;
                     break;
                 case "bottom":
+                    this.root.style.left = 0;
                     this.root.style.bottom = 0;
                     this.root.style.width = "100%";
                     this.root.style.height = size;
                     break;
             }
 
+            document.documentElement.setAttribute( "data-scale", `sheet-${ this.side }` );
+
             this.root.focus();
 
             this._onClick = e => {
@@ -1008,6 +1048,8 @@ class Sheet {
 
     destroy() {
 
+        document.documentElement.setAttribute( "data-scale", "" );
+
         document.body.removeEventListener( "mousedown", this._onClick, true );
         document.body.removeEventListener( "focusin", this._onClick, true );
 
@@ -1057,7 +1099,18 @@ class DropdownMenu {
         this.root.dataset["side"] = this.side;
         this.root.tabIndex = "1";
         this.root.className = "lexdropdownmenu";
-        LX.root.appendChild( this.root );
+
+        const nestedDialog = trigger.closest( "dialog" );
+        if( nestedDialog && nestedDialog.dataset[ "modal" ] == 'true' )
+        {
+            this._parent = nestedDialog;
+        }
+        else
+        {
+            this._parent = LX.root;
+        }
+
+        this._parent.appendChild( this.root );
 
         this._create( this._items );
 
@@ -1093,7 +1146,7 @@ class DropdownMenu {
         document.body.removeEventListener( "mousedown", this._onClick, true );
         document.body.removeEventListener( "focusin", this._onClick, true );
 
-        LX.root.querySelectorAll( ".lexdropdownmenu" ).forEach( m => { m.remove(); } );
+        this._parent.querySelectorAll( ".lexdropdownmenu" ).forEach( m => { m.remove(); } );
 
         DropdownMenu.currentMenu = null;
 
@@ -1118,14 +1171,22 @@ class DropdownMenu {
             newParent.className = "lexdropdownmenu";
             newParent.dataset["id"] = parentDom.dataset["id"];
             newParent.dataset["side"] = "right"; // submenus always come from the right
-            LX.root.appendChild( newParent );
+            this._parent.appendChild( newParent );
 
             newParent.currentParent = parentDom;
             parentDom = newParent;
 
             LX.doAsync( () => {
+
                 const position = [ parentRect.x + parentRect.width, parentRect.y ];
 
+                if( this._parent instanceof HTMLDialogElement )
+                {
+                    let rootParentRect = this._parent.getBoundingClientRect();
+                    position[ 0 ] -= rootParentRect.x;
+                    position[ 1 ] -= rootParentRect.y;
+                }
+
                 if( this.avoidCollisions )
                 {
                     position[ 0 ] = LX.clamp( position[ 0 ], 0, window.innerWidth - newParent.offsetWidth - this._windowPadding );
@@ -1141,139 +1202,180 @@ class DropdownMenu {
 
         for( let item of items )
         {
-            if( !item )
-            {
-                this._addSeparator( parentDom );
-                continue;
-            }
+            this._createItem( item, parentDom, applyIconPadding );
+        }
+    }
 
-            const key = item.name ?? item;
-            const pKey = LX.getSupportedDOMName( key );
+    _createItem( item, parentDom, applyIconPadding ) {
 
-            // Item already created
-            if( parentDom.querySelector( "#" + pKey ) )
-            {
-                continue;
-            }
+        if( !item )
+        {
+            this._addSeparator( parentDom );
+            return;
+        }
 
-            const menuItem = document.createElement('div');
-            menuItem.className = "lexdropdownmenuitem" + ( item.name ? "" : " label" ) + ( item.disabled ?? false ? " disabled" : "" ) + ( ` ${ item.className ?? "" }` );
-            menuItem.dataset["id"] = pKey;
-            menuItem.innerHTML = `<span>${ key }</span>`;
-            menuItem.tabIndex = "1";
-            parentDom.appendChild( menuItem );
+        const key = item.name ?? item;
+        const pKey = LX.getSupportedDOMName( key );
 
-            if( item.constructor === String ) // Label case
-            {
-                continue;
-            }
+        // Item already created
+        if( parentDom.querySelector( "#" + pKey ) )
+        {
+            return;
+        }
 
-            if( item.submenu )
-            {
-                const submenuIcon = LX.makeIcon( "Right", { svgClass: "sm" } );
-                menuItem.appendChild( submenuIcon );
-            }
-            else if( item.kbd )
-            {
-                item.kbd = [].concat( item.kbd );
+        const menuItem = document.createElement('div');
+        menuItem.className = "lexdropdownmenuitem" + ( item.name ? "" : " label" ) + ( item.disabled ?? false ? " disabled" : "" ) + ( ` ${ item.className ?? "" }` );
+        menuItem.dataset["id"] = pKey;
+        menuItem.innerHTML = `<span>${ key }</span>`;
+        menuItem.tabIndex = "1";
+        parentDom.appendChild( menuItem );
 
-                const kbd = LX.makeKbd( item.kbd );
-                menuItem.appendChild( kbd );
+        if( item.constructor === String ) // Label case
+        {
+            return;
+        }
 
-                document.addEventListener( "keydown", e => {
-                    if( !this._trigger.ddm ) return;
-                    e.preventDefault();
-                    // Check if it's a letter or other key
-                    let kdbKey = item.kbd.join("");
-                    kdbKey = kdbKey.length == 1 ? kdbKey.toLowerCase() : kdbKey;
-                    if( kdbKey == e.key )
-                    {
-                        menuItem.click();
-                    }
-                } );
-            }
+        if( item.submenu )
+        {
+            const submenuIcon = LX.makeIcon( "Right", { svgClass: "sm" } );
+            menuItem.appendChild( submenuIcon );
+        }
+        else if( item.kbd )
+        {
+            item.kbd = [].concat( item.kbd );
 
-            const disabled = item.disabled ?? false;
+            const kbd = LX.makeKbd( item.kbd );
+            menuItem.appendChild( kbd );
 
-            if( item.icon )
-            {
-                const icon = LX.makeIcon( item.icon, { svgClass: disabled ? "fg-tertiary" : item.className } );
-                menuItem.prepend( icon );
-            }
-            else if( item.checked == undefined && applyIconPadding ) // no checkbox, no icon, apply padding if there's checkbox or icon in other items
-            {
-                menuItem.classList.add( "pl-8" );
-            }
+            document.addEventListener( "keydown", e => {
+                if( !this._trigger.ddm ) return;
+                e.preventDefault();
+                // Check if it's a letter or other key
+                let kdbKey = item.kbd.join("");
+                kdbKey = kdbKey.length == 1 ? kdbKey.toLowerCase() : kdbKey;
+                if( kdbKey == e.key )
+                {
+                    menuItem.click();
+                }
+            } );
+        }
 
-            if( disabled )
-            {
-                continue;
-            }
+        const disabled = item.disabled ?? false;
 
-            if( item.checked != undefined )
+        if( this._radioGroup !== undefined )
+        {
+            if( item.name === this._radioGroup.selected )
             {
-                const checkbox = new LX.Checkbox( pKey + "_entryChecked", item.checked, (v) => {
-                    const f = item[ 'callback' ];
-                    item.checked = v;
-                    if( f )
-                    {
-                        f.call( this, key, v, menuItem );
-                    }
-                }, { className: "accent" });
-                const input = checkbox.root.querySelector( "input" );
-                input.classList.add( "ml-auto" );
-                menuItem.appendChild( input );
-
-                menuItem.addEventListener( "click", (e) => {
-                    if( e.target.type == "checkbox" ) return;
-                    input.checked = !input.checked;
-                    checkbox.set( input.checked );
-                } );
+                const icon = LX.makeIcon( "Circle", { svgClass: "xxs fill-current" } );
+                menuItem.prepend( icon );
             }
-            else
-            {
-                menuItem.addEventListener( "click", () => {
-                    const f = item[ 'callback' ];
-                    if( f )
-                    {
-                        f.call( this, key, menuItem );
-                    }
 
-                    this.destroy( true );
-                } );
-            }
+            menuItem.setAttribute( "data-radioname", this._radioGroup.name );
+        }
+        else if( item.icon )
+        {
+            const icon = LX.makeIcon( item.icon, { svgClass: disabled ? "fg-tertiary" : item.className } );
+            menuItem.prepend( icon );
+        }
+        else if( item.checked == undefined && applyIconPadding ) // no checkbox, no icon, apply padding if there's checkbox or icon in other items
+        {
+            menuItem.classList.add( "pl-8" );
+        }
 
-            menuItem.addEventListener("mouseover", e => {
+        if( disabled )
+        {
+            return;
+        }
 
-                let path = menuItem.dataset["id"];
-                let p = parentDom;
+        if( item.checked != undefined )
+        {
+            const checkbox = new LX.Checkbox( pKey + "_entryChecked", item.checked, (v) => {
+                const f = item[ 'callback' ];
+                item.checked = v;
+                if( f )
+                {
+                    f.call( this, key, v, menuItem );
+                }
+            }, { className: "accent" });
+            const input = checkbox.root.querySelector( "input" );
+            input.classList.add( "ml-auto" );
+            menuItem.appendChild( input );
+
+            menuItem.addEventListener( "click", (e) => {
+                if( e.target.type == "checkbox" ) return;
+                input.checked = !input.checked;
+                checkbox.set( input.checked );
+            } );
+        }
+        else
+        {
+            menuItem.addEventListener( "click", () => {
+                const f = item[ 'callback' ];
+                if( f )
+                {
+                    f.call( this, key, menuItem );
+                }
 
-                while( p )
+                const radioName = menuItem.getAttribute( "data-radioname" );
+                if( radioName )
                 {
-                    path += "/" + p.dataset["id"];
-                    p = p.currentParent?.parentElement;
+                    this._trigger[ radioName ] = key;
                 }
 
-                LX.root.querySelectorAll( ".lexdropdownmenu" ).forEach( m => {
-                    if( !path.includes( m.dataset["id"] ) )
-                    {
-                        m.currentParent.built = false;
-                        m.remove();
-                    }
-                } );
+                this.destroy( true );
+            } );
+        }
+
+        menuItem.addEventListener("mouseover", e => {
+
+            let path = menuItem.dataset["id"];
+            let p = parentDom;
+
+            while( p )
+            {
+                path += "/" + p.dataset["id"];
+                p = p.currentParent?.parentElement;
+            }
 
-                if( item.submenu && this.inPlace )
+            this._parent.querySelectorAll( ".lexdropdownmenu" ).forEach( m => {
+                if( !path.includes( m.dataset["id"] ) )
                 {
-                    if( menuItem.built )
-                    {
-                        return;
-                    }
-                    menuItem.built = true;
-                    this._create( item.submenu, menuItem );
+                    m.currentParent.built = false;
+                    m.remove();
                 }
+            } );
 
-                e.stopPropagation();
-            });
+            if( item.submenu && this.inPlace )
+            {
+                if( menuItem.built )
+                {
+                    return;
+                }
+                menuItem.built = true;
+                this._create( item.submenu, menuItem );
+            }
+
+            e.stopPropagation();
+        });
+
+        if( item.options )
+        {
+            this._addSeparator();
+
+            console.assert( this._trigger[ item.name ] && "An item of the radio group must be selected!" );
+            this._radioGroup = {
+                name: item.name,
+                selected: this._trigger[ item.name ]
+            };
+
+            for( let o of item.options )
+            {
+                this._createItem( o, parentDom, applyIconPadding );
+            }
+
+            delete this._radioGroup;
+
+            this._addSeparator();
         }
     }
 
@@ -1333,6 +1435,13 @@ class DropdownMenu {
             position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - this.root.offsetHeight - this._windowPadding );
         }
 
+        if( this._parent instanceof HTMLDialogElement )
+        {
+            let parentRect = this._parent.getBoundingClientRect();
+            position[ 0 ] -= parentRect.x;
+            position[ 1 ] -= parentRect.y;
+        }
+
         this.root.style.left = `${ position[ 0 ] }px`;
         this.root.style.top = `${ position[ 1 ] }px`;
         this.inPlace = true;
@@ -1593,25 +1702,25 @@ class ColorPicker {
             this._updateColorValue( null, true );
         } ).root );
 
-        this.labelWidget = new LX.TextInput( null, "", null, { inputClass: "bg-none", fit: true, disabled: true } );
-        colorLabel.appendChild( this.labelWidget.root );
+        this.labelComponent = new LX.TextInput( null, "", null, { inputClass: "bg-none", fit: true, disabled: true } );
+        colorLabel.appendChild( this.labelComponent.root );
 
         // Copy button
         {
-            const copyButtonWidget = new LX.Button(null, "copy",  async () => {
-                navigator.clipboard.writeText( this.labelWidget.value() );
-                copyButtonWidget.root.querySelector( "input[type='checkbox']" ).style.pointerEvents = "none";
+            const copyButtonComponent = new LX.Button(null, "copy",  async () => {
+                navigator.clipboard.writeText( this.labelComponent.value() );
+                copyButtonComponent.root.querySelector( "input[type='checkbox']" ).style.pointerEvents = "none";
 
                 LX.doAsync( () => {
-                    copyButtonWidget.swap( true );
-                    copyButtonWidget.root.querySelector( "input[type='checkbox']" ).style.pointerEvents = "auto";
+                    copyButtonComponent.swap( true );
+                    copyButtonComponent.root.querySelector( "input[type='checkbox']" ).style.pointerEvents = "auto";
                 }, 3000 );
 
             }, { swap: "Check", icon: "Copy", buttonClass: "bg-none", className: "ml-auto", title: "Copy" } );
 
-            copyButtonWidget.root.querySelector( ".swap-on svg" ).addClass( "fg-success" );
+            copyButtonComponent.root.querySelector( ".swap-on svg" ).addClass( "fg-success" );
 
-            colorLabel.appendChild( copyButtonWidget.root );
+            colorLabel.appendChild( copyButtonComponent.root );
         }
 
         this._updateColorValue( hexValue, true );
@@ -1666,25 +1775,25 @@ class ColorPicker {
         if( this.colorModel == "CSS" )
         {
             const { r, g, b, a } = this.currentColor.css;
-            this.labelWidget.set( `rgb${ this.useAlpha ? 'a' : '' }(${ r },${ g },${ b }${ this.useAlpha ? ',' + toFixed( a ) : '' })` );
+            this.labelComponent.set( `rgb${ this.useAlpha ? 'a' : '' }(${ r },${ g },${ b }${ this.useAlpha ? ',' + toFixed( a ) : '' })` );
         }
         else if( this.colorModel == "Hex" )
         {
-            this.labelWidget.set( ( this.useAlpha ? this.currentColor.hex : this.currentColor.hex.substr( 0, 7 ) ).toUpperCase() );
+            this.labelComponent.set( ( this.useAlpha ? this.currentColor.hex : this.currentColor.hex.substr( 0, 7 ) ).toUpperCase() );
         }
         else if( this.colorModel == "HSV" )
         {
             const { h, s, v, a } = this.currentColor.hsv;
             const components = [ Math.floor( h ) + 'º', Math.floor( s * 100 ) + '%', Math.floor( v * 100 ) + '%' ];
             if( this.useAlpha ) components.push( toFixed( a ) );
-            this.labelWidget.set( components.join( ' ' ) );
+            this.labelComponent.set( components.join( ' ' ) );
         }
         else // RGB
         {
             const { r, g, b, a } = this.currentColor.rgb;
             const components = [ toFixed( r ), toFixed( g ), toFixed( b ) ];
             if( this.useAlpha ) components.push( toFixed( a ) );
-            this.labelWidget.set( components.join( ' ' ) );
+            this.labelComponent.set( components.join( ' ' ) );
         }
     }
 
@@ -1848,8 +1957,6 @@ class Calendar {
                 let fromRangeDate = this.range ? LX.dateFromDateString( this.range[ 0 ] ) : null;
                 let toRangeDate = this.range ? LX.dateFromDateString( this.range[ 1 ] ) : null;
 
-                this.currentDate ? new Date( `${ this.currentDate.month }/${ this.currentDate.day }/${ this.currentDate.year }` ) : null;
-
                 for( let week = 0; week < 6; week++ )
                 {
                     const hrow = document.createElement( 'tr' );
@@ -2000,6 +2107,13 @@ class Calendar {
         this.refresh();
     }
 
+    setMonth( month ) {
+
+        this.month = month;
+
+        this.fromMonthYear( this.month, this.year );
+    }
+
     _getOrdinalSuffix( day ) {
         if ( day > 3 && day < 21 ) return "th";
         switch ( day % 10 )
@@ -2028,7 +2142,8 @@ class CalendarRange {
 
         console.assert( range && range.constructor === Array, "Range cannot be empty and has to be an Array!" );
 
-        let mustAdvanceMonth = false;
+        let mustSetMonth = null;
+        let dateReversed = false;
 
         // Fix any issues with date range picking
         {
@@ -2040,9 +2155,10 @@ class CalendarRange {
                 const tmp = range[ 0 ];
                 range[ 0 ] = range[ 1 ];
                 range[ 1 ] = tmp;
+                dateReversed = true;
             }
 
-            mustAdvanceMonth = ( t0.getMonth() == t1.getMonth() ) && ( t0.getFullYear() == t1.getFullYear() );
+            mustSetMonth = (dateReversed ? t1.getMonth() : t0.getMonth() ) + 2; // +1 to convert range, +1 to use next month
         }
 
         this.from = range[ 0 ];
@@ -2095,10 +2211,8 @@ class CalendarRange {
             range
         });
 
-        if( mustAdvanceMonth )
-        {
-            this.toCalendar._nextMonth( true );
-        }
+        console.assert( mustSetMonth && "New Month must be valid" );
+        this.toCalendar.setMonth( mustSetMonth );
 
         this.root.appendChild( this.fromCalendar.root );
         this.root.appendChild( this.toCalendar.root );
@@ -2322,6 +2436,19 @@ class Tabs {
         tabEl.instance = this;
         contentEl.id = tabEl.id + "_content";
 
+        if( options.badge )
+        {
+            const asChild = options.badge.asChild ?? false;
+            const badgeOptions = { };
+
+            if( asChild )
+            {
+                badgeOptions.parent = tabEl;
+            }
+
+            tabEl.innerHTML += LX.badge( options.badge.content ?? "", options.badge.className, badgeOptions );
+        }
+
         if( tabEl.selected )
         {
             this.selected = name;
@@ -2594,7 +2721,7 @@ class Dialog {
 
         if( !callback )
         {
-            console.warn("Content is empty, add some widgets using 'callback' parameter!");
+            console.warn("Content is empty, add some components using 'callback' parameter!");
         }
 
         this._oncreate = callback;
@@ -2609,6 +2736,7 @@ class Dialog {
         let root = document.createElement('dialog');
         root.className = "lexdialog " + (options.className ?? "");
         root.id = options.id ?? "dialog" + Dialog._last_id++;
+        root.dataset["modal"] = modal;
         LX.root.appendChild( root );
 
         LX.doAsync( () => {
@@ -2662,9 +2790,9 @@ class Dialog {
                 const panelChildCount = panel.root.childElementCount;
 
                 const branch = panel.branch( data.name, { closed: data.closed } );
-                branch.widgets = data.widgets;
+                branch.components = data.components;
 
-                for( let w of branch.widgets )
+                for( let w of branch.components )
                 {
                     branch.content.appendChild( w.root );
                 }
@@ -2908,9 +3036,6 @@ class ContextMenu {
 
         this.root = document.createElement( "div" );
         this.root.className = "lexcontextmenu";
-        this.root.style.left = ( event.x - 48 ) + "px";
-        this.root.style.top = ( event.y - 8 ) + "px";
-
         this.root.addEventListener("mouseleave", function() {
             this.remove();
         });
@@ -2926,31 +3051,57 @@ class ContextMenu {
             item[ "icon" ] = options.icon;
             this.items.push( item );
         }
+
+        const nestedDialog = event.target.closest( "dialog" );
+        if( nestedDialog && nestedDialog.dataset[ "modal" ] == 'true' )
+        {
+            this._parent = nestedDialog;
+        }
+        else
+        {
+            this._parent = LX.root;
+        }
+
+        this._parent.appendChild( this.root );
+
+        // Set position based on parent
+        const position = [ event.x - 48, event.y - 8 ];
+        if( this._parent instanceof HTMLDialogElement )
+        {
+            let parentRect = this._parent.getBoundingClientRect();
+            position[ 0 ] -= parentRect.x;
+            position[ 1 ] -= parentRect.y;
+        }
+
+        this.root.style.left = `${ position[ 0 ] }px`;
+        this.root.style.top = `${ position[ 1 ] }px`;
     }
 
     _adjustPosition( div, margin, useAbsolute = false ) {
 
         let rect = div.getBoundingClientRect();
+        let left = parseInt( div.style.left );
+        let top = parseInt( div.style.top );
 
         if( !useAbsolute )
         {
             let width = rect.width;
             if( rect.left < 0 )
             {
-                div.style.left = margin + "px";
+                left = margin;
             }
             else if( window.innerWidth - rect.right < 0 )
             {
-                div.style.left = (window.innerWidth - width - margin) + "px";
+                left = (window.innerWidth - width - margin);
             }
 
             if( rect.top < 0 )
             {
-                div.style.top = margin + "px";
+                top = margin;
             }
             else if( (rect.top + rect.height) > window.innerHeight )
             {
-                div.style.top = (window.innerHeight - rect.height - margin) + "px";
+                top = (window.innerHeight - rect.height - margin);
             }
         }
         else
@@ -2958,15 +3109,18 @@ class ContextMenu {
             let dt = window.innerWidth - rect.right;
             if( dt < 0 )
             {
-                div.style.left = div.offsetLeft + (dt - margin) + "px";
+                left = div.offsetLeft + (dt - margin);
             }
 
             dt = window.innerHeight - (rect.top + rect.height);
             if( dt < 0 )
             {
-                div.style.top = div.offsetTop + (dt - margin + 20 ) + "px";
+                top = div.offsetTop + (dt - margin + 20 );
             }
         }
+
+        div.style.left = `${ left }px`;
+        div.style.top = `${ top }px`;
     }
 
     _createSubmenu( o, k, c, d ) {
@@ -3188,7 +3342,6 @@ LX.ContextMenu = ContextMenu;
 function addContextMenu( title, event, callback, options )
 {
     const menu = new ContextMenu( event, title, options );
-    LX.root.appendChild( menu.root );
 
     if( callback )
     {
@@ -4304,6 +4457,43 @@ class CanvasMap2D {
 
 LX.CanvasMap2D = CanvasMap2D;
 
+class Skeleton {
+
+    constructor( elements ) {
+
+        this.root = LX.makeContainer( [ "auto", "auto" ], "flex flex-row lexskeleton" );
+
+        if( elements.constructor === String )
+        {
+            this.root.innerHTML = elements;
+        }
+        else
+        {
+            // Force array
+            elements = [].concat( elements );
+
+            for( let e of elements )
+            {
+                this.root.appendChild( e );
+            }
+        }
+    }
+
+    destroy() {
+
+        this.root.dataset[ "closed" ] = true;
+
+        LX.doAsync( () => {
+            this.root.remove();
+            this.root = null;
+        }, 200 );
+    }
+}
+
+LX.Skeleton = Skeleton;
+
+// Js native overrides
+
 Object.defineProperty(String.prototype, 'lastChar', {
     get: function() { return this[ this.length - 1 ]; },
     enumerable: true,
@@ -4604,6 +4794,28 @@ function deleteElement( element )
 
 LX.deleteElement = deleteElement;
 
+/**
+ * @method toCamelCase
+ * @param {String} str
+ */
+function toCamelCase( str )
+{
+    return str.toLowerCase().replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase());
+}
+
+LX.toCamelCase = toCamelCase;
+
+/**
+ * @method toTitleCase
+ * @param {String} str
+ */
+function toTitleCase( str )
+{
+    return str.replace(/-/g, " ").toLowerCase().replace(/\b\w/g, char => char.toUpperCase());
+}
+
+LX.toTitleCase = toTitleCase;
+
 /**
  * @method getSupportedDOMName
  * @description Convert a text string to a valid DOM name
@@ -4632,12 +4844,12 @@ LX.getSupportedDOMName = getSupportedDOMName;
 
 /**
  * @method has
- * @description Ask if LexGUI is using a specific component
- * @param {String} componentName Name of the LexGUI component
+ * @description Ask if LexGUI is using a specific extension
+ * @param {String} extensionName Name of the LexGUI extension
  */
-function has( componentName )
+function has( extensionName )
 {
-    return ( LX.components.indexOf( componentName ) > -1 );
+    return ( LX.extensions.indexOf( extensionName ) > -1 );
 }
 
 LX.has = has;
@@ -4814,6 +5026,19 @@ function getThemeColor( colorName )
 
 LX.getThemeColor = getThemeColor;
 
+/**
+ * @method switchSpacing
+ * @description Toggles between "default" and "compact" spacing layouts
+ */
+function switchSpacing()
+{
+    const currentSpacing = document.documentElement.getAttribute( "data-spacing" ) ?? "default";
+    document.documentElement.setAttribute( "data-spacing", ( currentSpacing == "default" ) ? "compact" : "default" );
+    LX.emit( "@on_new_spacing_layout", currentSpacing );
+}
+
+LX.switchSpacing = switchSpacing;
+
 /**
  * @method getBase64Image
  * @description Convert an image to a base64 string
@@ -5355,6 +5580,80 @@ function makeKbd( keys, useSpecialKeys = true, extraClass = "" )
 
 LX.makeKbd = makeKbd;
 
+/**
+ * @method makeBreadcrumb
+ * @description Displays the path to the current resource using a hierarchy
+ * @param {Array} items
+ * @param {Object} options
+ * maxItems: Max items until ellipsis is used to overflow
+ * separatorIcon: Customize separator icon
+ */
+function makeBreadcrumb( items, options = {} )
+{
+    const breadcrumb = LX.makeContainer( ["auto", "auto"], "flex flex-row gap-1" );
+
+    const separatorIcon = options.separatorIcon ?? "ChevronRight";
+    const maxItems = options.maxItems ?? 4;
+    const eraseNum = items.length - maxItems;
+    if( eraseNum > 0 )
+    {
+        const erased = items.splice( 1, eraseNum + 1 );
+        const ellipsisItem = { title: "...", ellipsis: erased.map( v => v.title ).join( "/" ) };
+        items.splice( 1, 0, ellipsisItem );
+    }
+
+    for( let i = 0; i < items.length; ++i )
+    {
+        const item = items[ i ];
+        console.assert( item.title, "Breadcrumb item must have a title!" );
+
+        if( i != 0 )
+        {
+            const icon = LX.makeIcon( separatorIcon, { svgClass: "sm fg-secondary separator" } );
+            breadcrumb.appendChild( icon );
+        }
+
+        const lastElement = ( i == items.length - 1 );
+        const breadcrumbItem = LX.makeContainer( ["auto", "auto"], `p-1 flex flex-row gap-1 items-center ${ lastElement ? "" : "fg-secondary" }` );
+        breadcrumb.appendChild( breadcrumbItem );
+
+        let itemTitle = LX.makeElement( "p", "", item.title );
+        if( item.icon )
+        {
+            breadcrumbItem.appendChild( LX.makeIcon( item.icon, { svgClass: "sm" } ) );
+        }
+
+        if( item.items !== undefined )
+        {
+            const bDropdownTrigger = LX.makeContainer( ["auto", "auto"], `${ lastElement ? "" : "fg-secondary" }` );
+            bDropdownTrigger.listen( "click", (e) => {
+                new LX.DropdownMenu( e.target, item.items, { side: "bottom", align: "start" });
+            } );
+            bDropdownTrigger.append( itemTitle );
+            breadcrumbItem.appendChild( bDropdownTrigger );
+        }
+        else if( item.url !== undefined )
+        {
+            let itemUrl = LX.makeElement( "a", `decoration-none fg-${ lastElement ? "primary" : "secondary" }`, "", breadcrumbItem );
+            itemUrl.href = item.url;
+            itemUrl.appendChild( itemTitle );
+        }
+        else
+        {
+            breadcrumbItem.appendChild( itemTitle );
+        }
+
+        if( item.ellipsis )
+        {
+            LX.asTooltip( breadcrumbItem, item.ellipsis, { side: "bottom", offset: 4 } );
+        }
+    }
+
+    return breadcrumb;
+}
+
+LX.makeBreadcrumb = makeBreadcrumb;
+
 /**
  * @method makeIcon
  * @description Gets an SVG element using one of LX.ICONS
@@ -5671,6 +5970,7 @@ LX.prompt = prompt;
  * @param {String} title
  * @param {String} description (Optional)
  * @param {Object} options
+ * position: Set new position for the toasts ("top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right")
  * action: Data of the custom action { name, callback }
  * closable: Allow closing the toast
  * timeout: Time in which the toast closed automatically, in ms. -1 means persistent. [3000]
@@ -5687,9 +5987,48 @@ function toast( title, description, options = {} )
 
     const toast = document.createElement( "li" );
     toast.className = "lextoast";
-    toast.style.translate = "0 calc(100% + 30px)";
     this.notifications.prepend( toast );
 
+    const [ positionVertical, positionHorizontal ] = options.position ? options.position.split( "-" ) : [ "bottom", "right" ];
+
+    // Reset style
+    this.notifications.style.right = "unset";
+    this.notifications.style.left = "unset";
+    this.notifications.style.top = "unset";
+    this.notifications.style.bottom = "unset";
+    this.notifications.style.placeSelf = "unset";
+
+    switch( positionVertical )
+    {
+        case "top":
+            toast.style.translate = "0 -30px";
+            this.notifications.style.top = "1rem";
+            this.notifications.style.flexDirection = "column";
+            break;
+        case "bottom":
+            toast.style.translate = "0 calc(100% + 30px)";
+            this.notifications.style.top = "auto";
+            this.notifications.style.bottom = "1rem";
+            this.notifications.style.flexDirection = "column-reverse";
+            break;
+    }
+
+    switch( positionHorizontal )
+    {
+        case "left":
+            this.notifications.style.left = "1rem";
+            break;
+        case "center":
+            this.notifications.style.placeSelf = "center";
+            break;
+        case "right":
+            this.notifications.style.right = "1rem";
+            break;
+    }
+
+    toast.classList.add( positionVertical );
+    toast.classList.add( positionHorizontal );
+
     LX.doAsync( () => {
 
         if( this.notifications.offsetWidth > this.notifications.iWidth )
@@ -5728,7 +6067,7 @@ function toast( title, description, options = {} )
     const that = this;
 
     toast.close = function() {
-        this.dataset[ "closed" ] = true;
+        this.dataset[ "open" ] = false;
         LX.doAsync( () => {
             this.remove();
             if( !that.notifications.childElementCount )
@@ -5774,7 +6113,32 @@ function badge( text, className, options = {} )
     const container = document.createElement( "div" );
     container.innerHTML = text;
     container.className = "lexbadge " + ( className ?? "" );
+
+    if( options.chip )
+    {
+        container.classList.add( "chip" );
+    }
+
     Object.assign( container.style, options.style ?? {} );
+
+    if( options.callback )
+    {
+        const arrowIcon = LX.makeIcon( "ArrowUpRight", { svgClass: "xs fg-contrast" } );
+        arrowIcon.querySelector("svg").style.marginLeft = "-0.25rem";
+        container.innerHTML += arrowIcon.innerHTML;
+        container.addEventListener( "click", e => {
+            e.preventDefault();
+            e.stopPropagation();
+            options.callback();
+        } );
+    }
+
+    if( options.parent )
+    {
+        options.parent.classList.add( "lexbadge-parent" );
+        options.parent.appendChild( container );
+    }
+
     return ( options.asElement ?? false ) ? container : container.outerHTML;
 }
 
@@ -5839,7 +6203,10 @@ LX.makeContainer = makeContainer;
  * @param {Object} options
  * side: Side of the tooltip
  * offset: Tooltip margin offset
+ * offsetX: Tooltip margin horizontal offset
+ * offsetY: Tooltip margin vertical offset
  * active: Tooltip active by default [true]
+ * callback: Callback function to execute when the tooltip is shown
  */
 
 function asTooltip( trigger, content, options = {} )
@@ -5849,6 +6216,11 @@ function asTooltip( trigger, content, options = {} )
     trigger.dataset[ "disableTooltip" ] = !( options.active ?? true );
 
     let tooltipDom = null;
+    let tooltipParent = LX.root;
+
+    const _offset = options.offset ?? 6;
+    const _offsetX = options.offsetX ?? _offset;
+    const _offsetY = options.offsetY ?? _offset;
 
     trigger.addEventListener( "mouseenter", function(e) {
 
@@ -5857,51 +6229,72 @@ function asTooltip( trigger, content, options = {} )
             return;
         }
 
-        LX.root.querySelectorAll( ".lextooltip" ).forEach( e => e.remove() );
-
         tooltipDom = document.createElement( "div" );
         tooltipDom.className = "lextooltip";
-        tooltipDom.innerHTML = content;
+        tooltipDom.innerHTML = trigger.dataset[ "tooltipContent" ] ?? content;
+
+        const nestedDialog = trigger.closest( "dialog" );
+        if( nestedDialog && nestedDialog.dataset[ "modal" ] == 'true' )
+        {
+            tooltipParent = nestedDialog;
+        }
+
+        // Remove other first
+        LX.root.querySelectorAll( ".lextooltip" ).forEach( e => e.remove() );
+
+        // Append new tooltip
+        tooltipParent.appendChild( tooltipDom );
 
         LX.doAsync( () => {
 
             const position = [ 0, 0 ];
+            const offsetX = parseFloat( trigger.dataset[ "tooltipOffsetX" ] ?? _offsetX );
+            const offsetY = parseFloat( trigger.dataset[ "tooltipOffsetY" ] ?? _offsetY );
             const rect = this.getBoundingClientRect();
-            const offset = options.offset ?? 6;
             let alignWidth = true;
 
             switch( options.side ?? "top" )
             {
                 case "left":
-                    position[ 0 ] += ( rect.x - tooltipDom.offsetWidth - offset );
+                    position[ 0 ] += ( rect.x - tooltipDom.offsetWidth - offsetX );
                     alignWidth = false;
                     break;
                 case "right":
-                    position[ 0 ] += ( rect.x + rect.width + offset );
+                    position[ 0 ] += ( rect.x + rect.width + offsetX );
                     alignWidth = false;
                     break;
                 case "top":
-                    position[ 1 ] += ( rect.y - tooltipDom.offsetHeight - offset );
+                    position[ 1 ] += ( rect.y - tooltipDom.offsetHeight - offsetY );
                     alignWidth = true;
                     break;
                 case "bottom":
-                    position[ 1 ] += ( rect.y + rect.height + offset );
+                    position[ 1 ] += ( rect.y + rect.height + offsetY );
                     alignWidth = true;
                     break;
             }
 
-            if( alignWidth ) { position[ 0 ] += ( rect.x + rect.width * 0.5 ) - tooltipDom.offsetWidth * 0.5; }
-            else { position[ 1 ] += ( rect.y + rect.height * 0.5 ) - tooltipDom.offsetHeight * 0.5; }
+            if( alignWidth ) { position[ 0 ] += ( rect.x + rect.width * 0.5 ) - tooltipDom.offsetWidth * 0.5 + offsetX; }
+            else { position[ 1 ] += ( rect.y + rect.height * 0.5 ) - tooltipDom.offsetHeight * 0.5 + offsetY; }
 
             // Avoid collisions
             position[ 0 ] = LX.clamp( position[ 0 ], 0, window.innerWidth - tooltipDom.offsetWidth - 4 );
             position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - tooltipDom.offsetHeight - 4 );
 
+            if( tooltipParent instanceof HTMLDialogElement )
+            {
+                let parentRect = tooltipParent.getBoundingClientRect();
+                position[ 0 ] -= parentRect.x;
+                position[ 1 ] -= parentRect.y;
+            }
+
             tooltipDom.style.left = `${ position[ 0 ] }px`;
             tooltipDom.style.top = `${ position[ 1 ] }px`;
-        } );
 
-        LX.root.appendChild( tooltipDom );
+            if( options.callback )
+            {
+                options.callback( tooltipDom, trigger );
+            }
+        } );
     } );
 
     trigger.addEventListener( "mouseleave", function(e) {
@@ -6347,15 +6740,15 @@ class AreaOverlayButtons {
             }
 
             let callback = b.callback;
-            let widget = null;
+            let component = null;
 
             if( b.options )
             {
-                widget = overlayPanel.addSelect( null, b.options, b.value ?? b.name, callback, _options );
+                component = overlayPanel.addSelect( null, b.options, b.value ?? b.name, callback, _options );
             }
             else
             {
-                widget = overlayPanel.addButton( null, b.name, function( value, event ) {
+                component = overlayPanel.addButton( null, b.name, function( value, event ) {
                     if( b.selectable )
                     {
                         if( b.group )
@@ -6372,13 +6765,13 @@ class AreaOverlayButtons {
 
                     if( callback )
                     {
-                        callback( value, event, widget.root );
+                        callback( value, event, component.root );
                     }
 
                 }, _options );
             }
 
-            this.buttons[ b.name ] = widget;
+            this.buttons[ b.name ] = component;
 
             // ends the group
             if( overlayGroup && last )
@@ -6452,6 +6845,7 @@ class Area {
      * minHeight: Minimum height to be applied when resizing
      * maxWidth: Maximum width to be applied when resizing
      * maxHeight: Maximum height to be applied when resizing
+     * layout: Layout to automatically split the area
      */
 
     constructor( options = {} ) {
@@ -6497,6 +6891,11 @@ class Area {
             lexroot.appendChild( this.root );
         }
 
+        if( options.layout )
+        {
+            this.setLayout( options.layout );
+        }
+
         let overlay = options.overlay;
 
         if( overlay )
@@ -6657,6 +7056,47 @@ class Area {
         this.root.appendChild( element );
     }
 
+    /**
+     * @method setLayout
+     * @description Automatically split the area to generate the desired layout
+     * @param {Array} layout
+     */
+
+    setLayout( layout ) {
+
+        this.layout = LX.deepCopy( layout );
+
+        if( !layout.splits )
+        {
+            console.warn( "Area layout has no splits!" );
+            return;
+        }
+
+        const _splitArea = ( area, layout ) => {
+
+            if( layout.className )
+            {
+                area.root.className += ` ${ layout.className }`;
+            }
+
+            if( !layout.splits )
+            {
+                return;
+            }
+
+            const type = layout.type ?? "horizontal";
+            const resize = layout.resize ?? true;
+            const minimizable = layout.minimizable ?? false;
+            const [ splitA, splitB ] = area.split( { type, resize, minimizable, sizes: [ layout.splits[ 0 ].size, layout.splits[ 1 ].size ] } );
+
+            _splitArea( splitA, layout.splits[ 0 ] );
+            _splitArea( splitB, layout.splits[ 1 ] );
+
+        };
+
+        _splitArea( this, layout );
+    }
+
     /**
      * @method split
      * @param {Object} options
@@ -6915,12 +7355,17 @@ class Area {
             doc.addEventListener( 'mouseup', innerMouseUp );
             e.stopPropagation();
             e.preventDefault();
-            document.body.classList.add( 'nocursor' );
-            that.splitBar.classList.add( 'nocursor' );
         }
 
         function innerMouseMove( e )
         {
+            const rect = that.root.getBoundingClientRect();
+            if( ( ( e.x ) < rect.x || ( e.x ) > ( rect.x + rect.width ) ) ||
+                ( ( e.y ) < rect.y || ( e.y ) > ( rect.y + rect.height ) ) )
+            {
+                return;
+            }
+
             if( that.type == "horizontal" )
             {
                 that._moveSplit( -e.movementX );
@@ -6939,8 +7384,6 @@ class Area {
             const doc = that.root.ownerDocument;
             doc.removeEventListener( 'mousemove', innerMouseMove );
             doc.removeEventListener( 'mouseup', innerMouseUp );
-            document.body.classList.remove( 'nocursor' );
-            that.splitBar.classList.remove( 'nocursor' );
         }
 
         return this.sections;
@@ -7299,10 +7742,11 @@ class Area {
         }
         else
         {
+            const parentHeight = this.size[ 1 ];
             var size = Math.max( ( a2Root.offsetHeight + dt ) + a2.offset, parseInt( a2.minHeight ) );
+            size = Math.min( parentHeight - LX.DEFAULT_SPLITBAR_SIZE, size );
             if( forceWidth ) size = forceWidth;
 
-            const parentHeight = this.size[ 1 ];
             const bottomPercent = ( size / parentHeight ) * 100;
             const topPercent = Math.max( 0, 100 - bottomPercent );
 
@@ -7361,13 +7805,13 @@ class Area {
 }
 LX.Area = Area;
 
-// widget.js @jxarco
+// base_component.js @jxarco
 
 /**
- * @class Widget
+ * @class BaseComponent
  */
 
-class Widget {
+class BaseComponent {
 
     static NONE         = 0;
     static TEXT         = 1;
@@ -7407,14 +7851,15 @@ class Widget {
     static TABS         = 35;
     static DATE         = 36;
     static MAP2D        = 37;
-    static LABEL        = 38;
-    static BLANK        = 39;
+    static LABEL        = 39;
+    static BLANK        = 40;
+    static RATE         = 41;
 
     static NO_CONTEXT_TYPES = [
-        Widget.BUTTON,
-        Widget.LIST,
-        Widget.FILE,
-        Widget.PROGRESS
+        BaseComponent.BUTTON,
+        BaseComponent.LIST,
+        BaseComponent.FILE,
+        BaseComponent.PROGRESS
     ];
 
     constructor( type, name, value, options = {} ) {
@@ -7425,7 +7870,7 @@ class Widget {
         this._initialValue = value;
 
         const root = document.createElement( 'div' );
-        root.className = "lexwidget";
+        root.className = "lexcomponent";
 
         if( options.id )
         {
@@ -7442,7 +7887,7 @@ class Widget {
             root.className += " " + options.className;
         }
 
-        if( type != Widget.TITLE )
+        if( type != BaseComponent.TITLE )
         {
             if( options.width )
             {
@@ -7461,7 +7906,7 @@ class Widget {
                 root.style.height = root.style.minHeight = options.height;
             }
 
-            LX.widgetResizeObserver.observe( root );
+            LX.componentResizeObserver.observe( root );
         }
 
         if( name != undefined )
@@ -7469,7 +7914,7 @@ class Widget {
             if( !( options.hideName ?? false ) )
             {
                 let domName = document.createElement( 'div' );
-                domName.className = "lexwidgetname";
+                domName.className = "lexcomponentname";
 
                 if( options.justifyName )
                 {
@@ -7531,7 +7976,7 @@ class Widget {
     }
 
     _canPaste() {
-        let pasteAllowed = this.type === Widget.CUSTOM ?
+        let pasteAllowed = this.type === BaseComponent.CUSTOM ?
             ( navigator.clipboard.customIdx !== undefined && this.customIdx == navigator.clipboard.customIdx ) : navigator.clipboard.type === this.type;
 
         pasteAllowed &= ( this.disabled !== true );
@@ -7568,7 +8013,7 @@ class Widget {
 
         if( this.onSetValue )
         {
-            let resetButton = this.root.querySelector( ".lexwidgetname .lexicon" );
+            let resetButton = this.root.querySelector( ".lexcomponentname .lexicon" );
             if( resetButton )
             {
                 resetButton.style.display = ( value != this.value() ? "block" : "none" );
@@ -7594,7 +8039,7 @@ class Widget {
 
     oncontextmenu( e ) {
 
-        if( Widget.NO_CONTEXT_TYPES.includes( this.type ) )
+        if( BaseComponent.NO_CONTEXT_TYPES.includes( this.type ) )
         {
             return;
         }
@@ -7625,41 +8070,42 @@ class Widget {
 
         switch( this.type )
         {
-            case Widget.TEXT: return "Text";
-            case Widget.TEXTAREA: return "TextArea";
-            case Widget.BUTTON: return "Button";
-            case Widget.SELECT: return "Select";
-            case Widget.CHECKBOX: return "Checkbox";
-            case Widget.TOGGLE: return "Toggle";
-            case Widget.RADIO: return "Radio";
-            case Widget.COLOR: return "Color";
-            case Widget.RANGE: return "Range";
-            case Widget.NUMBER: return "Number";
-            case Widget.VECTOR: return "Vector";
-            case Widget.TREE: return "Tree";
-            case Widget.PROGRESS: return "Progress";
-            case Widget.FILE: return "File";
-            case Widget.LAYERS: return "Layers";
-            case Widget.ARRAY: return "Array";
-            case Widget.LIST: return "List";
-            case Widget.TAGS: return "Tags";
-            case Widget.CURVE: return "Curve";
-            case Widget.KNOB: return "Knob";
-            case Widget.SIZE: return "Size";
-            case Widget.PAD: return "Pad";
-            case Widget.FORM: return "Form";
-            case Widget.DIAL: return "Dial";
-            case Widget.COUNTER: return "Counter";
-            case Widget.TABLE: return "Table";
-            case Widget.TABS: return "Tabs";
-            case Widget.DATE: return "Date";
-            case Widget.MAP2D: return "Map2D";
-            case Widget.LABEL: return "Label";
-            case Widget.BLANK: return "Blank";
-            case Widget.CUSTOM: return this.customName;
-        }
-
-        console.error( `Unknown Widget type: ${ this.type }` );
+            case BaseComponent.TEXT: return "Text";
+            case BaseComponent.TEXTAREA: return "TextArea";
+            case BaseComponent.BUTTON: return "Button";
+            case BaseComponent.SELECT: return "Select";
+            case BaseComponent.CHECKBOX: return "Checkbox";
+            case BaseComponent.TOGGLE: return "Toggle";
+            case BaseComponent.RADIO: return "Radio";
+            case BaseComponent.COLOR: return "Color";
+            case BaseComponent.RANGE: return "Range";
+            case BaseComponent.NUMBER: return "Number";
+            case BaseComponent.VECTOR: return "Vector";
+            case BaseComponent.TREE: return "Tree";
+            case BaseComponent.PROGRESS: return "Progress";
+            case BaseComponent.FILE: return "File";
+            case BaseComponent.LAYERS: return "Layers";
+            case BaseComponent.ARRAY: return "Array";
+            case BaseComponent.LIST: return "List";
+            case BaseComponent.TAGS: return "Tags";
+            case BaseComponent.CURVE: return "Curve";
+            case BaseComponent.KNOB: return "Knob";
+            case BaseComponent.SIZE: return "Size";
+            case BaseComponent.PAD: return "Pad";
+            case BaseComponent.FORM: return "Form";
+            case BaseComponent.DIAL: return "Dial";
+            case BaseComponent.COUNTER: return "Counter";
+            case BaseComponent.TABLE: return "Table";
+            case BaseComponent.TABS: return "Tabs";
+            case BaseComponent.DATE: return "Date";
+            case BaseComponent.MAP2D: return "Map2D";
+            case BaseComponent.RATE: return "Rate";
+            case BaseComponent.LABEL: return "Label";
+            case BaseComponent.BLANK: return "Blank";
+            case BaseComponent.CUSTOM: return this.customName;
+        }
+
+        console.error( `Unknown Component type: ${ this.type }` );
     }
 
     refresh() {
@@ -7667,52 +8113,52 @@ class Widget {
     }
 }
 
-LX.Widget = Widget;
+LX.BaseComponent = BaseComponent;
 
-function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
+function ADD_CUSTOM_COMPONENT( customComponentName, options = {} )
 {
     let customIdx = LX.guidGenerator();
 
-    LX.Panel.prototype[ 'add' + customWidgetName ] = function( name, instance, callback ) {
+    LX.Panel.prototype[ 'add' + customComponentName ] = function( name, instance, callback ) {
 
         const userParams = Array.from( arguments ).slice( 3 );
 
-        let widget = new Widget( Widget.CUSTOM, name, null, options );
-        this._attachWidget( widget );
+        let component = new BaseComponent( BaseComponent.CUSTOM, name, null, options );
+        this._attachComponent( component );
 
-        widget.customName = customWidgetName;
-        widget.customIdx = customIdx;
+        component.customName = customComponentName;
+        component.customIdx = customIdx;
 
-        widget.onGetValue = () => {
+        component.onGetValue = () => {
             return instance;
         };
 
-        widget.onSetValue = ( newValue, skipCallback, event ) => {
+        component.onSetValue = ( newValue, skipCallback, event ) => {
             instance = newValue;
-            refresh_widget();
+            _refreshComponent();
             element.querySelector( ".lexcustomitems" ).toggleAttribute( 'hidden', false );
             if( !skipCallback )
             {
-                widget._trigger( new LX.IEvent( name, instance, event ), callback );
+                component._trigger( new LX.IEvent( name, instance, event ), callback );
             }
         };
 
-        widget.onResize = ( rect ) => {
-            const realNameWidth = ( widget.root.domName?.style.width ?? "0px" );
+        component.onResize = ( rect ) => {
+            const realNameWidth = ( component.root.domName?.style.width ?? "0px" );
             container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
-        const element = widget.root;
+        const element = component.root;
 
-        let container, customWidgetsDom;
+        let container, customComponentsDom;
         let defaultInstance = options.default ?? {};
 
         // Add instance button
 
-        const refresh_widget = () => {
+        const _refreshComponent = () => {
 
             if( container ) container.remove();
-            if( customWidgetsDom ) customWidgetsDom.remove();
+            if( customComponentsDom ) customComponentsDom.remove();
 
             container = document.createElement('div');
             container.className = "lexcustomcontainer w-full";
@@ -7722,7 +8168,7 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
             const customIcon = LX.makeIcon( options.icon ?? "Box" );
             const menuIcon = LX.makeIcon( "Menu" );
 
-            let buttonName = customWidgetName + (!instance ? " [empty]" : "");
+            let buttonName = customComponentName + (!instance ? " [empty]" : "");
             let buttonEl = this.addButton(null, buttonName, (value, event) => {
                 if( instance )
                 {
@@ -7732,9 +8178,9 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
                 else
                 {
                     LX.addContextMenu(null, event, c => {
-                        c.add("New " + customWidgetName, () => {
+                        c.add("New " + customComponentName, () => {
                             instance = {};
-                            refresh_widget();
+                            _refreshComponent();
                             element.querySelector(".lexcustomitems").toggleAttribute('hidden', false);
                             element.dataset["opened"] = !element.querySelector(".lexcustomitems").hasAttribute("hidden");
                         });
@@ -7756,7 +8202,7 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
                     LX.addContextMenu(null, e, c => {
                         c.add("Clear", () => {
                             instance = null;
-                            refresh_widget();
+                            _refreshComponent();
                         });
                     });
                 });
@@ -7764,14 +8210,14 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
 
             // Show elements
 
-            customWidgetsDom = document.createElement('div');
-            customWidgetsDom.className = "lexcustomitems";
-            customWidgetsDom.toggleAttribute('hidden', true);
-            element.appendChild( customWidgetsDom );
+            customComponentsDom = document.createElement('div');
+            customComponentsDom.className = "lexcustomitems";
+            customComponentsDom.toggleAttribute('hidden', true);
+            element.appendChild( customComponentsDom );
 
             if( instance )
             {
-                this.queue( customWidgetsDom );
+                this.queue( customComponentsDom );
 
                 const on_instance_changed = ( key, value, event ) => {
                     const setter = options[ `_set_${ key }` ];
@@ -7783,7 +8229,7 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
                     {
                         instance[ key ] = value;
                     }
-                    widget._trigger( new LX.IEvent( name, instance, event ), callback );
+                    component._trigger( new LX.IEvent( name, instance, event ), callback );
                 };
 
                 for( let key in defaultInstance )
@@ -7848,11 +8294,11 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
             }
         };
 
-        refresh_widget();
+        _refreshComponent();
     };
 }
 
-LX.ADD_CUSTOM_WIDGET = ADD_CUSTOM_WIDGET;
+LX.ADD_CUSTOM_COMPONENT = ADD_CUSTOM_COMPONENT;
 
 /**
  * @class NodeTree
@@ -8424,14 +8870,14 @@ LX.NodeTree = NodeTree;
 
 /**
  * @class Blank
- * @description Blank Widget
+ * @description Blank Component
  */
 
-class Blank extends Widget {
+class Blank extends BaseComponent {
 
     constructor( width, height ) {
 
-        super( Widget.BLANK );
+        super( BaseComponent.BLANK );
 
         this.root.style.width = width ?? "auto";
         this.root.style.height = height ?? "8px";
@@ -8442,17 +8888,17 @@ LX.Blank = Blank;
 
 /**
  * @class Title
- * @description Title Widget
+ * @description Title Component
  */
 
-class Title extends Widget {
+class Title extends BaseComponent {
 
     constructor( name, options = {} ) {
 
-        console.assert( name, "Can't create Title Widget without text!" );
+        console.assert( name, "Can't create Title Component without text!" );
 
-        // Note: Titles are not registered in Panel.widgets by now
-        super( Widget.TITLE, null, null, options );
+        // Note: Titles are not registered in Panel.components by now
+        super( BaseComponent.TITLE, null, null, options );
 
         this.root.className = `lextitle ${ this.root.className }`;
 
@@ -8486,14 +8932,14 @@ LX.Title = Title;
 
 /**
  * @class TextInput
- * @description TextInput Widget
+ * @description TextInput Component
  */
 
-class TextInput extends Widget {
+class TextInput extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
-        super( Widget.TEXT, name, String( value ), options );
+        super( BaseComponent.TEXT, name, String( value ), options );
 
         this.onGetValue = () => {
             return value;
@@ -8626,14 +9072,14 @@ LX.TextInput = TextInput;
 
 /**
  * @class TextArea
- * @description TextArea Widget
+ * @description TextArea Component
  */
 
-class TextArea extends Widget {
+class TextArea extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
-        super( Widget.TEXTAREA, name, value, options );
+        super( BaseComponent.TEXTAREA, name, value, options );
 
         this.onGetValue = () => {
             return value;
@@ -8727,14 +9173,14 @@ LX.TextArea = TextArea;
 
 /**
  * @class Button
- * @description Button Widget
+ * @description Button Component
  */
 
-class Button extends Widget {
+class Button extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
-        super( Widget.BUTTON, name, null, options );
+        super( BaseComponent.BUTTON, name, null, options );
 
         this.onGetValue = () => {
             const swapInput = wValue.querySelector( "input" );
@@ -8949,10 +9395,10 @@ LX.Button = Button;
 
 /**
  * @class ComboButtons
- * @description ComboButtons Widget
+ * @description ComboButtons Component
  */
 
-class ComboButtons extends Widget {
+class ComboButtons extends BaseComponent {
 
     constructor( name, values, options = {} ) {
 
@@ -9067,7 +9513,7 @@ class ComboButtons extends Widget {
             currentValue = currentValue[ 0 ];
         }
 
-        super( Widget.BUTTONS, name, null, options );
+        super( BaseComponent.BUTTONS, name, null, options );
 
         this.onGetValue = () => {
             return currentValue;
@@ -9110,16 +9556,16 @@ LX.ComboButtons = ComboButtons;
 
 /**
  * @class Card
- * @description Card Widget
+ * @description Card Component
  */
 
-class Card extends Widget {
+class Card extends BaseComponent {
 
     constructor( name, options = {} ) {
 
         options.hideName = true;
 
-        super( Widget.CARD, name, null, options );
+        super( BaseComponent.CARD, name, null, options );
 
         let container = document.createElement('div');
         container.className = "lexcard";
@@ -9173,10 +9619,10 @@ LX.Card = Card;
 
 /**
  * @class Form
- * @description Form Widget
+ * @description Form Component
  */
 
-class Form extends Widget {
+class Form extends BaseComponent {
 
     constructor( name, data, callback, options = {} ) {
 
@@ -9189,7 +9635,7 @@ class Form extends Widget {
         // Always hide name for this one
         options.hideName = true;
 
-        super( Widget.FORM, name, null, options );
+        super( BaseComponent.FORM, name, null, options );
 
         this.onGetValue = () => {
             return container.formData;
@@ -9197,18 +9643,18 @@ class Form extends Widget {
 
         this.onSetValue = ( newValue, skipCallback, event ) => {
             container.formData = newValue;
-            const entries = container.querySelectorAll( ".lexwidget" );
+            const entries = container.querySelectorAll( ".lexcomponent" );
             for( let i = 0; i < entries.length; ++i )
             {
                 const entry = entries[ i ];
-                if( entry.jsInstance.type != LX.Widget.TEXT )
+                if( entry.jsInstance.type != BaseComponent.TEXT )
                 {
                     continue;
                 }
-                let entryName = entries[ i ].querySelector( ".lexwidgetname" ).innerText;
+                let entryName = entries[ i ].querySelector( ".lexcomponentname" ).innerText;
                 let entryInput = entries[ i ].querySelector( ".lextext input" );
                 entryInput.value = newValue[ entryName ] ?? "";
-                Widget._dispatchEvent( entryInput, "focusout", skipCallback );
+                BaseComponent._dispatchEvent( entryInput, "focusout", skipCallback );
             }
         };
 
@@ -9238,10 +9684,10 @@ class Form extends Widget {
                 container.appendChild( label.root );
             }
 
-            entryData.textWidget = new LX.TextInput( null, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
+            entryData.textComponent = new LX.TextInput( null, entryData.constructor == Object ? entryData.value : entryData, ( value ) => {
                 container.formData[ entry ] = value;
             }, entryData );
-            container.appendChild( entryData.textWidget.root );
+            container.appendChild( entryData.textComponent.root );
 
             container.formData[ entry ] = entryData.constructor == Object ? entryData.value : entryData;
         }
@@ -9266,7 +9712,7 @@ class Form extends Widget {
             {
                 let entryData = data[ entry ];
 
-                if( !entryData.textWidget.valid() )
+                if( !entryData.textComponent.valid() )
                 {
                     return;
                 }
@@ -9286,14 +9732,14 @@ LX.Form = Form;
 
 /**
  * @class Select
- * @description Select Widget
+ * @description Select Component
  */
 
-class Select extends Widget {
+class Select extends BaseComponent {
 
     constructor( name, values, value, callback, options = {} ) {
 
-        super( Widget.SELECT, name, value, options );
+        super( BaseComponent.SELECT, name, value, options );
 
         this.onGetValue = () => {
             return value;
@@ -9366,7 +9812,7 @@ class Select extends Widget {
             options.overflowContainerX = options.overflowContainerY = options.overflowContainer;
         }
 
-        const _placeOptions = ( parent ) => {
+        const _placeOptions = ( parent, forceLastPlacement ) => {
 
             const selectRoot = selectedOption.root;
             const rect = selectRoot.getBoundingClientRect();
@@ -9396,8 +9842,8 @@ class Select extends Widget {
                 parent.style.top = ( topPosition + selectRoot.offsetHeight ) + 'px';
                 list.style.height = ""; // set auto height by default
 
-                const failBelow = ( topPosition + listHeight ) > maxY;
-                const failAbove = ( topPosition - listHeight ) < 0;
+                const failAbove = forceLastPlacement ? this._lastPlacement[ 0 ] : ( topPosition - listHeight ) < 0;
+                const failBelow = forceLastPlacement ? this._lastPlacement[ 1 ] : ( topPosition + listHeight ) > maxY;
                 if( failBelow && !failAbove )
                 {
                     parent.style.top = ( topPosition - listHeight ) + 'px';
@@ -9408,6 +9854,8 @@ class Select extends Widget {
                 {
                     list.style.height = `${ maxY - topPosition - 32 }px`; // 32px margin
                 }
+
+                this._lastPlacement = [ failAbove, failBelow ];
             }
 
             // Manage horizontal aspect
@@ -9521,7 +9969,7 @@ class Select extends Widget {
         {
             const filterOptions = LX.deepCopy( options );
             filterOptions.placeholder = filterOptions.placeholder ?? "Search...";
-            filterOptions.skipWidget = filterOptions.skipWidget ?? true;
+            filterOptions.skipComponent = filterOptions.skipComponent ?? true;
             filterOptions.trigger = "input";
             filterOptions.icon = "Search";
             filterOptions.className = "lexfilter";
@@ -9530,6 +9978,7 @@ class Select extends Widget {
             filter = new LX.TextInput(null, options.filterValue ?? "", ( v ) => {
                 const filteredOptions = this._filterOptions( values, v );
                 list.refresh( filteredOptions );
+                _placeOptions( listDialog, true );
             }, filterOptions );
             filter.root.querySelector( ".lextext" ).style.border = "1px solid transparent";
 
@@ -9563,7 +10012,7 @@ class Select extends Widget {
 
                 let option = document.createElement( "div" );
                 option.className = "option";
-                option.innerHTML = iValue;
+                option.innerHTML = ( LX.makeIcon( "Inbox", { svgClass: "mr-2" } ).innerHTML + iValue );
 
                 let li = document.createElement( "li" );
                 li.className = "lexselectitem empty";
@@ -9672,7 +10121,7 @@ class Select extends Widget {
         const emptyFilter = !value.length;
         let filteredOptions = [];
 
-        // Add widgets
+        // Add components
         for( let i = 0; i < options.length; i++ )
         {
             let o = options[ i ];
@@ -9695,16 +10144,16 @@ LX.Select = Select;
 
 /**
  * @class Curve
- * @description Curve Widget
+ * @description Curve Component
  */
 
-class Curve extends Widget {
+class Curve extends BaseComponent {
 
     constructor( name, values, callback, options = {} ) {
 
         let defaultValues = JSON.parse( JSON.stringify( values ) );
 
-        super( Widget.CURVE, name, defaultValues, options );
+        super( BaseComponent.CURVE, name, defaultValues, options );
 
         this.onGetValue = () => {
             return JSON.parse(JSON.stringify( curveInstance.element.value ));
@@ -9756,16 +10205,16 @@ LX.Curve = Curve;
 
 /**
  * @class Dial
- * @description Dial Widget
+ * @description Dial Component
  */
 
-class Dial extends Widget {
+class Dial extends BaseComponent {
 
     constructor( name, values, callback, options = {} ) {
 
         let defaultValues = JSON.parse( JSON.stringify( values ) );
 
-        super( Widget.DIAL, name, defaultValues, options );
+        super( BaseComponent.DIAL, name, defaultValues, options );
 
         this.onGetValue = () => {
             return JSON.parse( JSON.stringify( dialInstance.element.value ) );
@@ -9813,14 +10262,14 @@ LX.Dial = Dial;
 
 /**
  * @class Layers
- * @description Layers Widget
+ * @description Layers Component
  */
 
-class Layers extends Widget {
+class Layers extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
-        super( Widget.LAYERS, name, value, options );
+        super( BaseComponent.LAYERS, name, value, options );
 
         this.onGetValue = () => {
             return value;
@@ -9897,16 +10346,16 @@ LX.Layers = Layers;
 
 /**
  * @class ItemArray
- * @description ItemArray Widget
+ * @description ItemArray Component
  */
 
-class ItemArray extends Widget {
+class ItemArray extends BaseComponent {
 
     constructor( name, values = [], callback, options = {} ) {
 
         options.nameWidth = "100%";
 
-        super( Widget.ARRAY, name, null, options );
+        super( BaseComponent.ARRAY, name, null, options );
 
         this.onGetValue = () => {
             return values;
@@ -9961,41 +10410,41 @@ class ItemArray extends Widget {
             {
                 const value = values[ i ];
                 let baseclass = options.innerValues ? 'select' : value.constructor;
-                let widget = null;
+                let component = null;
 
                 switch( baseclass  )
                 {
                     case String:
-                        widget = new LX.TextInput(i + "", value, function(value, event) {
+                        component = new LX.TextInput(i + "", value, function(value, event) {
                             values[ i ] = value;
                             callback( values );
                         }, { nameWidth: "12px", className: "p-0", skipReset: true });
                         break;
                     case Number:
-                        widget = new NumberInput(i + "", value, function(value, event) {
+                        component = new NumberInput(i + "", value, function(value, event) {
                             values[ i ] = value;
                             callback( values );
                         }, { nameWidth: "12px", className: "p-0", skipReset: true });
                         break;
                     case 'select':
-                        widget = new Select(i + "", options.innerValues, value, function(value, event) {
+                        component = new Select(i + "", options.innerValues, value, function(value, event) {
                             values[ i ] = value;
                             callback( values );
                         }, { nameWidth: "12px", className: "p-0", skipReset: true });
                         break;
                 }
 
-                console.assert( widget, `Value of type ${ baseclass } cannot be modified in ItemArray` );
+                console.assert( component, `Value of type ${ baseclass } cannot be modified in ItemArray` );
 
-                arrayItems.appendChild( widget.root );
+                arrayItems.appendChild( component.root );
 
-                const removeWidget = new LX.Button( null, "", ( v, event) => {
+                const removeComponent = new LX.Button( null, "", ( v, event) => {
                     values.splice( values.indexOf( value ), 1 );
                     this._updateItems();
                     this._trigger( new LX.IEvent(name, values, event), callback );
                 }, { title: "Remove item", icon: "Trash3"} );
 
-                widget.root.appendChild( removeWidget.root );
+                component.root.appendChild( removeComponent.root );
             }
 
             const addButton = new LX.Button(null, LX.makeIcon( "Plus", { svgClass: "sm" } ).innerHTML + "Add item", (v, event) => {
@@ -10015,14 +10464,14 @@ LX.ItemArray = ItemArray;
 
 /**
  * @class List
- * @description List Widget
+ * @description List Component
  */
 
-class List extends Widget {
+class List extends BaseComponent {
 
     constructor( name, values, value, callback, options = {} ) {
 
-        super( Widget.LIST, name, value, options );
+        super( BaseComponent.LIST, name, value, options );
 
         this.onGetValue = () => {
             return value;
@@ -10115,17 +10564,17 @@ LX.List = List;
 
 /**
  * @class Tags
- * @description Tags Widget
+ * @description Tags Component
  */
 
-class Tags extends Widget {
+class Tags extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
         value = value.replace( /\s/g, '' ).split( ',' );
 
         let defaultValue = [].concat( value );
-        super( Widget.TAGS, name, defaultValue, options );
+        super( BaseComponent.TAGS, name, defaultValue, options );
 
         this.onGetValue = () => {
             return [].concat( value );
@@ -10204,19 +10653,19 @@ LX.Tags = Tags;
 
 /**
  * @class Checkbox
- * @description Checkbox Widget
+ * @description Checkbox Component
  */
 
-class Checkbox extends Widget {
+class Checkbox extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
         if( !name && !options.label )
         {
-            throw( "Set Widget Name or at least a label!" );
+            throw( "Set Component Name or at least a label!" );
         }
 
-        super( Widget.CHECKBOX, name, value, options );
+        super( BaseComponent.CHECKBOX, name, value, options );
 
         this.onGetValue = () => {
             return value;
@@ -10287,19 +10736,19 @@ LX.Checkbox = Checkbox;
 
 /**
  * @class Toggle
- * @description Toggle Widget
+ * @description Toggle Component
  */
 
-class Toggle extends Widget {
+class Toggle extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
         if( !name && !options.label )
         {
-            throw( "Set Widget Name or at least a label!" );
+            throw( "Set Component Name or at least a label!" );
         }
 
-        super( Widget.TOGGLE, name, value, options );
+        super( BaseComponent.TOGGLE, name, value, options );
 
         this.onGetValue = () => {
             return toggle.checked;
@@ -10371,14 +10820,14 @@ LX.Toggle = Toggle;
 
 /**
  * @class RadioGroup
- * @description RadioGroup Widget
+ * @description RadioGroup Component
  */
 
-class RadioGroup extends Widget {
+class RadioGroup extends BaseComponent {
 
     constructor( name, label, values, callback, options = {} ) {
 
-        super( Widget.RADIO, name, null, options );
+        super( BaseComponent.RADIO, name, null, options );
 
         let currentIndex = null;
 
@@ -10450,10 +10899,10 @@ LX.RadioGroup = RadioGroup;
 
 /**
  * @class ColorInput
- * @description ColorInput Widget
+ * @description ColorInput Component
  */
 
-class ColorInput extends Widget {
+class ColorInput extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
@@ -10462,12 +10911,12 @@ class ColorInput extends Widget {
         const useAlpha = options.useAlpha ??
             ( ( value.constructor === Object && 'a' in value ) || ( value.constructor === String && [ 5, 9 ].includes( value.length ) ) );
 
-        const widgetColor = new LX.Color( value );
+        const componentColor = new LX.Color( value );
 
         // Force always hex internally
-        value = useAlpha ? widgetColor.hex : widgetColor.hex.substr( 0, 7 );
+        value = useAlpha ? componentColor.hex : componentColor.hex.substr( 0, 7 );
 
-        super( Widget.COLOR, name, value, options );
+        super( BaseComponent.COLOR, name, value, options );
 
         this.onGetValue = () => {
             const currentColor = new LX.Color( value );
@@ -10487,7 +10936,7 @@ class ColorInput extends Widget {
 
             if( !this._skipTextUpdate )
             {
-                textWidget.set( value, true, event );
+                textComponent.set( value, true, event );
             }
 
             if( !skipCallback )
@@ -10555,15 +11004,15 @@ class ColorInput extends Widget {
             colorSampleRGB.style.width = "18px";
         }
 
-        const textWidget = new LX.TextInput( null, value, v => {
+        const textComponent = new LX.TextInput( null, value, v => {
             this._skipTextUpdate = true;
             this.set( v );
             delete this._skipTextUpdate;
             this.picker.fromHexColor( v );
         }, { width: "calc( 100% - 24px )", disabled: options.disabled });
 
-        textWidget.root.style.marginLeft = "6px";
-        container.appendChild( textWidget.root );
+        textComponent.root.style.marginLeft = "6px";
+        container.appendChild( textComponent.root );
 
         LX.doAsync( this.onResize.bind( this ) );
     }
@@ -10573,45 +11022,117 @@ LX.ColorInput = ColorInput;
 
 /**
  * @class RangeInput
- * @description RangeInput Widget
+ * @description RangeInput Component
  */
 
-class RangeInput extends Widget {
+class RangeInput extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
-        super( Widget.RANGE, name, value, options );
+        const ogValue = LX.deepCopy( value );
+
+        super( BaseComponent.RANGE, name, LX.deepCopy( ogValue ), options );
+
+        const isRangeValue = ( value.constructor == Array && value.length == 2 );
+        if( isRangeValue )
+        {
+            value = ogValue[ 0 ];
+            options.fill = false; // Range inputs do not fill by default
+        }
 
         this.onGetValue = () => {
-            return value;
+            let finalValue = value;
+            if( isRangeValue )
+            {
+                finalValue = [ value, ogValue[ 1 ] ];
+            }
+            else if( options.left )
+            {
+                finalValue = ( ( +slider.max ) - value + ( +slider.min ) );
+            }
+            return finalValue;
         };
 
         this.onSetValue = ( newValue, skipCallback, event ) => {
 
-            if( isNaN( newValue ) )
+            let newTpContent = "";
+
+            const diff = ( options.max - options.min );
+
+            if( isRangeValue )
             {
-                return;
+                slider.value = value = LX.clamp( +newValue[ 0 ], +slider.min, +slider.max );
+                this._maxSlider.value = ogValue[ 1 ] = LX.clamp( +newValue[ 1 ], +slider.min, +slider.max );
+
+                // Update the range slider
+                const diffOffset = ( value / diff ) - 0.5;
+                const diffMaxOffset = ( ogValue[ 1 ] / diff ) - 0.5;
+                const remappedMin = LX.remapRange( value, options.min, options.max, 0, 1 );
+                const remappedMax = LX.remapRange( ogValue[ 1 ], options.min, options.max, 0, 1 );
+                slider.style.setProperty("--range-min-value", `${ remappedMin * 100 }%`);
+                slider.style.setProperty("--range-max-value", `${ remappedMax * 100 }%`);
+                slider.style.setProperty("--range-fix-min-offset", `${ -diffOffset }rem`);
+                slider.style.setProperty("--range-fix-max-offset", `${ diffMaxOffset }rem`);
+
+                container.dataset[ "tooltipOffsetX" ] = container.offsetWidth * remappedMin + container.offsetWidth * ( remappedMax - remappedMin ) * 0.5 - ( container.offsetWidth * 0.5 );
+                newTpContent = `${ value } - ${ ogValue[ 1 ] }`;
+            }
+            else
+            {
+                if( isNaN( newValue ) )
+                {
+                    return;
+                }
+
+                slider.value = value = LX.clamp( +newValue, +slider.min, +slider.max );
+                const remapped = LX.remapRange( value, options.min, options.max, 0, 1 ) * 0.5;
+                container.dataset[ "tooltipOffsetX" ] = container.offsetWidth * remapped - ( container.offsetWidth * 0.5 );
+                newTpContent = `${ value }`;
             }
 
-            slider.value = value = LX.clamp( +newValue, +slider.min, +slider.max );
+            container.dataset[ "tooltipContent" ] = newTpContent;
+            if( this._labelTooltip )
+            {
+                this._labelTooltip.innerHTML = newTpContent;
+            }
 
             if( !skipCallback )
             {
-                this._trigger( new LX.IEvent( name, options.left ? ( ( +slider.max ) - value + ( +slider.min ) ) : value, event ), callback );
+                let finalValue = value;
+                if( isRangeValue )
+                {
+                    finalValue = [ value, ogValue[ 1 ] ];
+                }
+                else if( options.left )
+                {
+                    finalValue = ( ( +slider.max ) - value + ( +slider.min ) );
+                }
+
+                this._trigger( new LX.IEvent( name, finalValue, event ), callback );
             }
         };
 
         this.onResize = ( rect ) => {
             const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
             container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
+            if( isRangeValue )
+            {
+                const diff = ( options.max - options.min );
+                const diffOffset = ( value / diff ) - 0.5;
+                const diffMaxOffset = ( ogValue[ 1 ] / diff ) - 0.5;
+                slider.style.setProperty("--range-min-value", `${ LX.remapRange( value, options.min, options.max, 0, 1 ) * 100 }%`);
+                slider.style.setProperty("--range-max-value", `${ LX.remapRange( ogValue[ 1 ], options.min, options.max, 0, 1 ) * 100 }%`);
+                slider.style.setProperty("--range-fix-min-offset", `${ -diffOffset }rem`);
+                slider.style.setProperty("--range-fix-max-offset", `${ diffMaxOffset }rem`);
+            }
         };
 
         const container = document.createElement( 'div' );
-        container.className = "lexrange";
+        container.className = "lexrange relative";
         this.root.appendChild( container );
 
         let slider = document.createElement( 'input' );
-        slider.className = "lexrangeslider " + ( options.className ?? "" );
+        slider.className = "lexrangeslider " + ( isRangeValue ? "pointer-events-none " : "" ) + ( options.className ?? "" );
         slider.min = options.min ?? 0;
         slider.max = options.max ?? 100;
         slider.step = options.step ?? 1;
@@ -10623,16 +11144,9 @@ class RangeInput extends Widget {
             value = LX.clamp( value, +slider.min, +slider.max );
         }
 
-        if( options.left )
-        {
-            value = ( ( +slider.max ) - value + ( +slider.min ) );
-        }
-
-        slider.value = value;
-        container.appendChild( slider );
-
         if( options.left ?? false )
         {
+            value = ( ( +slider.max ) - value + ( +slider.min ) );
             slider.classList.add( "left" );
         }
 
@@ -10641,33 +11155,80 @@ class RangeInput extends Widget {
             slider.classList.add( "no-fill" );
         }
 
+        slider.value = value;
+        container.appendChild( slider );
+
         slider.addEventListener( "input", e => {
-            this.set( e.target.valueAsNumber, false, e );
+            this.set( isRangeValue ? [ e.target.valueAsNumber, ogValue[ 1 ] ] : e.target.valueAsNumber, false, e );
         }, { passive: false });
 
-        slider.addEventListener( "mousedown", function( e ) {
-            if( options.onPress )
-            {
-                options.onPress.bind( slider )( e, slider );
-            }
-        }, false );
+        // If its a range value, we need to update the slider using the thumbs
+        if( !isRangeValue )
+        {
+            slider.addEventListener( "mousedown", function( e ) {
+                if( options.onPress )
+                {
+                    options.onPress.bind( slider )( e, slider );
+                }
+            }, false );
 
-        slider.addEventListener( "mouseup", function( e ) {
-            if( options.onRelease )
-            {
-                options.onRelease.bind( slider )( e, slider );
-            }
-        }, false );
+            slider.addEventListener( "mouseup", function( e ) {
+                if( options.onRelease )
+                {
+                    options.onRelease.bind( slider )( e, slider );
+                }
+            }, false );
+        }
 
         // Method to change min, max, step parameters
         this.setLimits = ( newMin, newMax, newStep ) => {
             slider.min = newMin ?? slider.min;
             slider.max = newMax ?? slider.max;
             slider.step = newStep ?? slider.step;
-            Widget._dispatchEvent( slider, "input", true );
+            BaseComponent._dispatchEvent( slider, "input", true );
         };
 
-        LX.doAsync( this.onResize.bind( this ) );
+        LX.doAsync( () => {
+
+            this.onResize();
+
+            let offsetX = 0;
+            if( isRangeValue )
+            {
+                const remappedMin = LX.remapRange( value, options.min, options.max, 0, 1 );
+                const remappedMax = LX.remapRange( ogValue[ 1 ], options.min, options.max, 0, 1 );
+                offsetX = container.offsetWidth * remappedMin + container.offsetWidth * ( remappedMax - remappedMin ) * 0.5 - ( container.offsetWidth * 0.5 );
+            }
+            else
+            {
+                const remapped = LX.remapRange( value, options.min, options.max, 0, 1 ) * 0.5;
+                offsetX = container.offsetWidth * remapped - ( container.offsetWidth * 0.5 );
+            }
+            LX.asTooltip( container, `${ value }${ isRangeValue ? `- ${ ogValue[ 1 ] }` : `` }`, { offsetX, callback: ( tpDom ) => {
+                this._labelTooltip = tpDom;
+            } } );
+        } );
+
+        if( ogValue.constructor == Array ) // Its a range value
+        {
+            let maxSlider = document.createElement( 'input' );
+            maxSlider.className = "lexrangeslider no-fill pointer-events-none overlap absolute top-0 left-0 " + ( options.className ?? "" );
+            maxSlider.min = options.min ?? 0;
+            maxSlider.max = options.max ?? 100;
+            maxSlider.step = options.step ?? 1;
+            maxSlider.type = "range";
+            maxSlider.disabled = options.disabled ?? false;
+            this._maxSlider = maxSlider;
+
+            let maxRangeValue = ogValue[ 1 ];
+            maxSlider.value = maxRangeValue = LX.clamp( maxRangeValue, +maxSlider.min, +maxSlider.max );
+            container.appendChild( maxSlider );
+
+            maxSlider.addEventListener( "input", e => {
+                ogValue[ 1 ] = +e.target.valueAsNumber;
+                this.set( [ value, ogValue[ 1 ] ], false, e );
+            }, { passive: false });
+        }
     }
 }
 
@@ -10675,14 +11236,14 @@ LX.RangeInput = RangeInput;
 
 /**
  * @class NumberInput
- * @description NumberInput Widget
+ * @description NumberInput Component
  */
 
-class NumberInput extends Widget {
+class NumberInput extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
-        super( Widget.NUMBER, name, value, options );
+        super( BaseComponent.NUMBER, name, value, options );
 
         this.onGetValue = () => {
             return value;
@@ -10759,7 +11320,7 @@ class NumberInput extends Widget {
         // Add slider below
         if( !options.skipSlider && options.min !== undefined && options.max !== undefined )
         {
-            let sliderBox = LX.makeContainer( [ "100%", "auto" ], "", "", box );
+            let sliderBox = LX.makeContainer( [ "100%", "auto" ], "z-1 input-box", "", box );
             let slider = document.createElement( 'input' );
             slider.className = "lexinputslider";
             slider.min = options.min;
@@ -10897,17 +11458,17 @@ LX.NumberInput = NumberInput;
 
 /**
  * @class Vector
- * @description Vector Widget
+ * @description Vector Component
  */
 
-class Vector extends Widget {
+class Vector extends BaseComponent {
 
     constructor( numComponents, name, value, callback, options = {} ) {
 
         numComponents = LX.clamp( numComponents, 2, 4 );
         value = value ?? new Array( numComponents ).fill( 0 );
 
-        super( Widget.VECTOR, name, [].concat( value ), options );
+        super( BaseComponent.VECTOR, name, [].concat( value ), options );
 
         this.onGetValue = () => {
             let inputs = this.root.querySelectorAll( "input[type='number']" );
@@ -11002,13 +11563,13 @@ class Vector extends Widget {
                     for( let v of that.querySelectorAll(".vecinput") )
                     {
                         v.value = LX.round( +v.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ), options.precision );
-                        Widget._dispatchEvent( v, "change" );
+                        BaseComponent._dispatchEvent( v, "change" );
                     }
                 }
                 else
                 {
                     this.value = LX.round( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ), options.precision );
-                    Widget._dispatchEvent( vecinput, "change" );
+                    BaseComponent._dispatchEvent( vecinput, "change" );
                 }
             }, { passive: false } );
 
@@ -11082,13 +11643,13 @@ class Vector extends Widget {
                         for( let v of that.root.querySelectorAll( ".vecinput" ) )
                         {
                             v.value = LX.round( +v.valueAsNumber + mult * dt, options.precision );
-                            Widget._dispatchEvent( v, "change" );
+                            BaseComponent._dispatchEvent( v, "change" );
                         }
                     }
                     else
                     {
                         vecinput.value = LX.round( +vecinput.valueAsNumber + mult * dt, options.precision );
-                        Widget._dispatchEvent( vecinput, "change" );
+                        BaseComponent._dispatchEvent( vecinput, "change" );
                     }
                 }
 
@@ -11147,14 +11708,14 @@ LX.Vector = Vector;
 
 /**
  * @class SizeInput
- * @description SizeInput Widget
+ * @description SizeInput Component
  */
 
-class SizeInput extends Widget {
+class SizeInput extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
-        super( Widget.SIZE, name, value, options );
+        super( BaseComponent.SIZE, name, value, options );
 
         this.onGetValue = () => {
             const value = [];
@@ -11235,10 +11796,10 @@ LX.SizeInput = SizeInput;
 
 /**
  * @class OTPInput
- * @description OTPInput Widget
+ * @description OTPInput Component
  */
 
-class OTPInput extends Widget {
+class OTPInput extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
@@ -11251,7 +11812,7 @@ class OTPInput extends Widget {
             value = "x".repeat( patternSize );
         }
 
-        super( Widget.OTP, name, value, options );
+        super( BaseComponent.OTP, name, value, options );
 
         this.onGetValue = () => {
             return +value;
@@ -11393,14 +11954,14 @@ LX.OTPInput = OTPInput;
 
 /**
  * @class Pad
- * @description Pad Widget
+ * @description Pad Component
  */
 
-class Pad extends Widget {
+class Pad extends BaseComponent {
 
     constructor( name, value, callback, options = {} ) {
 
-        super( Widget.PAD, name, null, options );
+        super( BaseComponent.PAD, name, null, options );
 
         this.onGetValue = () => {
             return thumb.value.xy;
@@ -11513,14 +12074,14 @@ LX.Pad = Pad;
 
 /**
  * @class Progress
- * @description Progress Widget
+ * @description Progress Component
  */
 
-class Progress extends Widget {
+class Progress extends BaseComponent {
 
     constructor( name, value, options = {} ) {
 
-        super( Widget.PROGRESS, name, value, options );
+        super( BaseComponent.PROGRESS, name, value, options );
 
         this.onGetValue = () => {
             return progress.value;
@@ -11650,14 +12211,14 @@ LX.Progress = Progress;
 
 /**
  * @class FileInput
- * @description FileInput Widget
+ * @description FileInput Component
  */
 
-class FileInput extends Widget {
+class FileInput extends BaseComponent {
 
     constructor( name, callback, options = { } ) {
 
-        super( Widget.FILE, name, null, options );
+        super( BaseComponent.FILE, name, null, options );
 
         let local = options.local ?? true;
         let type = options.type ?? 'text';
@@ -11735,16 +12296,16 @@ LX.FileInput = FileInput;
 
 /**
  * @class Tree
- * @description Tree Widget
+ * @description Tree Component
  */
 
-class Tree extends Widget {
+class Tree extends BaseComponent {
 
     constructor( name, data, options = {} ) {
 
         options.hideName = true;
 
-        super( Widget.TREE, name, null, options );
+        super( BaseComponent.TREE, name, null, options );
 
         let container = document.createElement('div');
         container.className = "lextree";
@@ -11817,16 +12378,16 @@ LX.Tree = Tree;
 
 /**
  * @class TabSections
- * @description TabSections Widget
+ * @description TabSections Component
  */
 
-class TabSections extends Widget {
+class TabSections extends BaseComponent {
 
     constructor( name, tabs, options = {} ) {
 
         options.hideName = true;
 
-        super( Widget.TABS, name, null, options );
+        super( BaseComponent.TABS, name, null, options );
 
         if( tabs.constructor != Array )
         {
@@ -11872,7 +12433,7 @@ class TabSections extends Widget {
 
             let infoContainer = document.createElement( "div" );
             infoContainer.id = tab.name.replace( /\s/g, '' );
-            infoContainer.className = "widgets";
+            infoContainer.className = "components";
             infoContainer.toggleAttribute( "hidden", !( tab.selected ?? false ) );
             container.appendChild( infoContainer );
 
@@ -11881,7 +12442,7 @@ class TabSections extends Widget {
                 tabContainer.querySelectorAll( ".lextab" ).forEach( e => { e.classList.remove( "selected" ); } );
                 tabEl.classList.add( "selected" );
                 // Hide all tabs content
-                container.querySelectorAll(".widgets").forEach( e => { e.toggleAttribute( "hidden", true ); } );
+                container.querySelectorAll(".components").forEach( e => { e.toggleAttribute( "hidden", true ); } );
                 // Show tab content
                 const el = container.querySelector( '#' + infoContainer.id );
                 el.toggleAttribute( "hidden" );
@@ -11924,14 +12485,14 @@ LX.TabSections = TabSections;
 
 /**
  * @class Counter
- * @description Counter Widget
+ * @description Counter Component
  */
 
-class Counter extends Widget {
+class Counter extends BaseComponent {
 
     constructor( name, value, callback, options = { } ) {
 
-        super( Widget.COUNTER, name, value, options );
+        super( BaseComponent.COUNTER, name, value, options );
 
         this.onGetValue = () => {
             return counterText.count;
@@ -11994,10 +12555,10 @@ LX.Counter = Counter;
 
 /**
  * @class Table
- * @description Table Widget
+ * @description Table Component
  */
 
-class Table extends Widget {
+class Table extends BaseComponent {
 
     constructor( name, data, options = { } ) {
 
@@ -12006,7 +12567,7 @@ class Table extends Widget {
             throw( "Data is needed to create a table!" );
         }
 
-        super( Widget.TABLE, name, null, options );
+        super( BaseComponent.TABLE, name, null, options );
 
         this.onResize = ( rect ) => {
             const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
@@ -12056,7 +12617,7 @@ class Table extends Widget {
             {
                 const filterOptions = LX.deepCopy( options );
                 filterOptions.placeholder = `Filter ${ this.filter }...`;
-                filterOptions.skipWidget = true;
+                filterOptions.skipComponent = true;
                 filterOptions.trigger = "input";
                 filterOptions.inputClass = "outline";
 
@@ -12075,9 +12636,9 @@ class Table extends Widget {
 
                 for( let f of this.customFilters )
                 {
-                    f.widget = new LX.Button(null, icon.innerHTML + f.name, ( v ) => {
+                    f.component = new LX.Button(null, icon.innerHTML + f.name, ( v ) => {
 
-                        const spanName = f.widget.root.querySelector( "span" );
+                        const spanName = f.component.root.querySelector( "span" );
 
                         if( f.options )
                         {
@@ -12098,7 +12659,7 @@ class Table extends Widget {
                                 };
                                 return item;
                             } );
-                            new LX.DropdownMenu( f.widget.root, menuOptions, { side: "bottom", align: "start" });
+                            new LX.DropdownMenu( f.component.root, menuOptions, { side: "bottom", align: "start" });
                         }
                         else if( f.type == "range" )
                         {
@@ -12117,12 +12678,14 @@ class Table extends Widget {
                                     f.start = v;
                                     const inUse = ( f.start != f.min || f.end != f.max );
                                     spanName.innerHTML = icon.innerHTML + f.name + ( inUse ? separatorHtml + LX.badge( `${ f.start } - ${ f.end } ${ f.units ?? "" }`, "bg-tertiary fg-secondary text-sm border-0" ) : "" );
+                                    if( inUse ) this._resetCustomFiltersBtn.root.classList.remove( "hidden" );
                                     this.refresh();
                                 }, { skipSlider: true, min: f.min, max: f.max, step: f.step, units: f.units } );
                                 panel.addNumber( null, f.end, (v) => {
                                     f.end = v;
                                     const inUse = ( f.start != f.min || f.end != f.max );
                                     spanName.innerHTML = icon.innerHTML + f.name + ( inUse ? separatorHtml + LX.badge( `${ f.start } - ${ f.end } ${ f.units ?? "" }`, "bg-tertiary fg-secondary text-sm border-0" ) : "" );
+                                    if( inUse ) this._resetCustomFiltersBtn.root.classList.remove( "hidden" );
                                     this.refresh();
                                 }, { skipSlider: true, min: f.min, max: f.max, step: f.step, units: f.units } );
                                 panel.addButton( null, "Reset", () => {
@@ -12135,11 +12698,43 @@ class Table extends Widget {
                             };
                             panel.refresh();
                             container.appendChild( panel.root );
-                            new LX.Popover( f.widget.root, [ container ], { side: "bottom" } );
+                            new LX.Popover( f.component.root, [ container ], { side: "bottom" } );
+                        }
+                        else if( f.type == "date" )
+                        {
+                            const container = LX.makeContainer( ["auto", "auto"], "text-md" );
+                            const panel = new LX.Panel();
+                            LX.makeContainer( ["100%", "auto"], "px-3 p-2 pb-0 text-md font-medium", f.name, container );
+
+                            panel.refresh = () => {
+                                panel.clear();
+
+                                // Generate default value once the filter is used
+                                if( !f.default )
+                                {
+                                    const date = new Date();
+                                    const todayStringDate = `${ date.getDate() }/${ date.getMonth() + 1 }/${ date.getFullYear() }`;
+                                    f.default = [ todayStringDate, todayStringDate ];
+                                }
+
+                                const calendar = new LX.CalendarRange( f.value, {
+                                    onChange: ( dateRange ) => {
+                                        f.value = dateRange;
+                                        spanName.innerHTML = icon.innerHTML + f.name + ( separatorHtml + LX.badge( `${ calendar.getFullDate() }`, "bg-tertiary fg-secondary text-sm border-0" ) );
+                                        this._resetCustomFiltersBtn.root.classList.remove( "hidden" );
+                                        this.refresh();
+                                    }
+                                });
+
+                                panel.attach( calendar );
+                            };
+                            panel.refresh();
+                            container.appendChild( panel.root );
+                            new LX.Popover( f.component.root, [ container ], { side: "bottom" } );
                         }
 
                     }, { buttonClass: "px-2 primary dashed" } );
-                    headerContainer.appendChild( f.widget.root );
+                    headerContainer.appendChild( f.component.root );
                 }
 
                 this._resetCustomFiltersBtn = new LX.Button(null, "resetButton", ( v ) => {
@@ -12147,12 +12742,16 @@ class Table extends Widget {
                     this._resetCustomFiltersBtn.root.classList.add( "hidden" );
                     for( let f of this.customFilters )
                     {
-                        f.widget.root.querySelector( "span" ).innerHTML = ( icon.innerHTML + f.name );
+                        f.component.root.querySelector( "span" ).innerHTML = ( icon.innerHTML + f.name );
                         if( f.type == "range" )
                         {
                             f.start = f.min;
                             f.end = f.max;
                         }
+                        else if( f.type == "date" )
+                        {
+                            delete f.default;
+                        }
                     }
                     this.refresh();
                 }, { title: "Reset filters", tooltip: true, icon: "X" } );
@@ -12434,7 +13033,30 @@ class Table extends Widget {
                                 }
                             }
                             else if( f.type == "date" )
-                            ;
+                            {
+                                acfMap[ acfName ] = acfMap[ acfName ] ?? false;
+
+                                const filterColIndex = data.head.indexOf( acfName );
+                                if( filterColIndex > -1 )
+                                {
+                                    if( !f.default )
+                                    {
+                                        const date = new Date();
+                                        const todayStringDate = `${ date.getDate() }/${ date.getMonth() + 1 }/${ date.getFullYear() }`;
+                                        f.value = [ todayStringDate, todayStringDate ];
+                                        acfMap[ acfName ] |= true;
+                                        continue;
+                                    }
+
+                                    f.value = f.value ?? f.default;
+
+                                    const dateString = bodyData[ filterColIndex ];
+                                    const date = LX.dateFromDateString( dateString );
+                                    const minDate = LX.dateFromDateString( f.value[ 0 ] );
+                                    const maxDate = LX.dateFromDateString( f.value[ 1 ] );
+                                    acfMap[ acfName ] |= ( date >= minDate ) && ( date <= maxDate );
+                                }
+                            }
                         }
 
                         const show = Object.values( acfMap ).reduce( ( e, acc ) => acc *= e, true );
@@ -12679,14 +13301,14 @@ LX.Table = Table;
 
 /**
  * @class DatePicker
- * @description DatePicker Widget
+ * @description DatePicker Component
  */
 
-class DatePicker extends Widget {
+class DatePicker extends BaseComponent {
 
     constructor( name, dateValue, callback, options = { } ) {
 
-        super( Widget.DATE, name, null, options );
+        super( BaseComponent.DATE, name, null, options );
 
         const dateAsRange = ( dateValue?.constructor === Array );
 
@@ -12759,10 +13381,6 @@ class DatePicker extends Widget {
             const calendarIcon = LX.makeIcon( "Calendar" );
             const calendarButton = new LX.Button( null, d0, () => {
                 this._popover = new LX.Popover( calendarButton.root, [ this.calendar ] );
-                if( dateAsRange )
-                {
-                    Object.assign( this._popover.root.style, { display: "flex", width: "auto" } );
-                }
             }, { buttonClass: `flex flex-row px-3 ${ emptyDate ? "" : "fg-tertiary" } justify-between` } );
             calendarButton.root.querySelector( "button" ).appendChild( calendarIcon );
             calendarButton.root.style.width = "100%";
@@ -12777,10 +13395,6 @@ class DatePicker extends Widget {
                 const calendarIcon = LX.makeIcon( "Calendar" );
                 const calendarButton = new LX.Button( null, d1, () => {
                     this._popover = new LX.Popover( calendarButton.root, [ this.calendar ] );
-                    if( dateAsRange )
-                    {
-                        Object.assign( this._popover.root.style, { display: "flex", width: "auto" } );
-                    }
                 }, { buttonClass: `flex flex-row px-3 ${ emptyDate ? "" : "fg-tertiary" } justify-between` } );
                 calendarButton.root.querySelector( "button" ).appendChild( calendarIcon );
                 calendarButton.root.style.width = "100%";
@@ -12805,14 +13419,14 @@ LX.DatePicker = DatePicker;
 
 /**
  * @class Map2D
- * @description Map2D Widget
+ * @description Map2D Component
  */
 
-class Map2D extends Widget {
+class Map2D extends BaseComponent {
 
     constructor( name, points, callback, options = {} ) {
 
-        super( Widget.MAP2D, name, null, options );
+        super( BaseComponent.MAP2D, name, null, options );
 
         this.onGetValue = () => {
             return this.map2d.weightsObj;
@@ -12850,6 +13464,127 @@ class Map2D extends Widget {
 
 LX.Map2D = Map2D;
 
+/**
+ * @class Rate
+ * @description Rate Component
+ */
+
+class Rate extends BaseComponent {
+
+    constructor( name, value, callback, options = {} ) {
+
+        const allowHalf = options.allowHalf ?? false;
+
+        if( !allowHalf)
+        {
+            value = Math.floor( value );
+        }
+
+        super( BaseComponent.RATE, name, value, options );
+
+        this.onGetValue = () => {
+            return value;
+        };
+
+        this.onSetValue = ( newValue, skipCallback, event ) => {
+
+            value = newValue;
+
+            _updateStars( value );
+
+            if( !skipCallback )
+            {
+                this._trigger( new LX.IEvent( name, newValue, event ), callback );
+            }
+        };
+
+        this.onResize = ( rect ) => {
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
+        };
+
+        const container = document.createElement('div');
+        container.className = "lexrate relative";
+        this.root.appendChild( container );
+
+        const starsContainer = LX.makeContainer( ["fit-content", "auto"], "flex flex-row gap-1", "", container );
+        const filledStarsContainer = LX.makeContainer( ["fit-content", "auto"], "absolute top-0 flex flex-row gap-1 pointer-events-none", "", container );
+        const halfStarsContainer = LX.makeContainer( ["fit-content", "auto"], "absolute top-0 flex flex-row gap-1 pointer-events-none", "", container );
+
+        starsContainer.addEventListener("mousemove", e => {
+            const star = e.target;
+            const idx = star.dataset["idx"];
+
+            if( idx !== undefined )
+            {
+                const rect = star.getBoundingClientRect();
+                const half = allowHalf && e.offsetX < ( rect.width * 0.5 );
+                _updateStars( idx - ( half ? 0.5 : 0.0 ) );
+            }
+        }, false );
+
+        starsContainer.addEventListener("mouseleave", e => {
+            _updateStars( value );
+        }, false );
+
+        // Create all layers of stars
+
+        for( let i = 0; i < 5; ++i )
+        {
+            const starIcon = LX.makeIcon( "Star", { svgClass: `lg fill-current fg-secondary` } );
+            starIcon.dataset["idx"] = ( i + 1 );
+            starsContainer.appendChild( starIcon );
+
+            starIcon.addEventListener("click", e => {
+                const rect = e.target.getBoundingClientRect();
+                const half = allowHalf && e.offsetX < ( rect.width * 0.5 );
+                this.set( parseFloat( e.target.dataset["idx"] ) - ( half ? 0.5 : 0.0 ) );
+            }, false );
+
+            const filledStarIcon = LX.makeIcon( "Star", { svgClass: `lg fill-current metallicyellow` } );
+            filledStarsContainer.appendChild( filledStarIcon );
+
+            const halfStarIcon = LX.makeIcon( "StarHalf", { svgClass: `lg fill-current metallicyellow` } );
+            halfStarsContainer.appendChild( halfStarIcon );
+        }
+
+        const _updateStars = ( v ) => {
+
+            for( let i = 0; i < 5; ++i )
+            {
+                const filled = ( v > ( i + 0.5 ) );
+                const starIcon = filledStarsContainer.childNodes[ i ];
+                const halfStarIcon = halfStarsContainer.childNodes[ i ];
+                if( filled )
+                {
+                    starIcon.style.opacity = 1;
+                }
+                else
+                {
+                    starIcon.style.opacity = 0;
+
+                    const halfFilled = allowHalf && ( v > i );
+                    if( halfFilled )
+                    {
+                        halfStarIcon.style.opacity = 1;
+                    }
+                    else
+                    {
+                        halfStarIcon.style.opacity = 0;
+                    }
+
+                }
+            }
+        };
+
+        _updateStars( value );
+
+        LX.doAsync( this.onResize.bind( this ) );
+    }
+}
+
+LX.Rate = Rate;
+
 // panel.js @jxarco
 
 /**
@@ -12888,42 +13623,42 @@ class Panel {
 
         this.root = root;
         this.branches = [];
-        this.widgets = {};
+        this.components = {};
 
         this._branchOpen = false;
         this._currentBranch = null;
-        this._queue = []; // Append widgets in other locations
-        this._inlineWidgetsLeft = -1;
-        this._inline_queued_container = null;
+        this._queue = []; // Append components in other locations
+        this._inlineComponentsLeft = -1;
+        this._inlineQueuedContainer = null;
     }
 
     get( name ) {
 
-        return this.widgets[ name ];
+        return this.components[ name ];
     }
 
     getValue( name ) {
 
-        let widget = this.widgets[ name ];
+        let component = this.components[ name ];
 
-        if( !widget )
+        if( !component )
         {
-            throw( "No widget called " + name );
+            throw( "No component called " + name );
         }
 
-        return widget.value();
+        return component.value();
     }
 
     setValue( name, value, skipCallback ) {
 
-        let widget = this.widgets[ name ];
+        let component = this.components[ name ];
 
-        if( !widget )
+        if( !component )
         {
-            throw( "No widget called " + name );
+            throw( "No component called " + name );
         }
 
-        return widget.set( value, skipCallback );
+        return component.set( value, skipCallback );
     }
 
     /**
@@ -12944,18 +13679,18 @@ class Panel {
 
     clear() {
 
-        this._branchOpen = false;
         this.branches = [];
+        this._branchOpen = false;
         this._currentBranch = null;
 
-        for( let w in this.widgets )
+        for( let w in this.components )
         {
-            if( this.widgets[ w ].options && this.widgets[ w ].options.signal )
+            if( this.components[ w ].options && this.components[ w ].options.signal )
             {
-                const signal = this.widgets[ w ].options.signal;
+                const signal = this.components[ w ].options.signal;
                 for( let i = 0; i < LX.signals[signal].length; i++ )
                 {
-                    if( LX.signals[signal][ i ] == this.widgets[ w ] )
+                    if( LX.signals[signal][ i ] == this.components[ w ] )
                     {
                         LX.signals[signal] = [...LX.signals[signal].slice(0, i), ...LX.signals[signal].slice(i+1)];
                     }
@@ -12967,11 +13702,11 @@ class Panel {
         {
             for( let w = 0; w < this.signals.length; w++ )
             {
-                let widget = Object.values(this.signals[ w ])[ 0 ];
-                let signal = widget.options.signal;
+                let c = Object.values(this.signals[ w ])[ 0 ];
+                let signal = c.options.signal;
                 for( let i = 0; i < LX.signals[signal].length; i++ )
                 {
-                    if( LX.signals[signal][ i ] == widget )
+                    if( LX.signals[signal][ i ] == c )
                     {
                         LX.signals[signal] = [...LX.signals[signal].slice(0, i), ...LX.signals[signal].slice(i+1)];
                     }
@@ -12979,46 +13714,46 @@ class Panel {
             }
         }
 
-        this.widgets = {};
+        this.components = {};
         this.root.innerHTML = "";
     }
 
     /**
      * @method sameLine
-     * @param {Number} number Of widgets that will be placed in the same line
-     * @param {String} className Extra class to customize inline widgets parent container
-     * @description Next N widgets will be in the same line. If no number, it will inline all until calling nextLine()
+     * @param {Number} numberOfComponents Of components that will be placed in the same line
+     * @param {String} className Extra class to customize inline components parent container
+     * @description Next N components will be in the same line. If no number, it will inline all until calling nextLine()
      */
 
-    sameLine( number, className ) {
+    sameLine( numberOfComponents, className ) {
 
-        this._inline_queued_container = this.queuedContainer;
-        this._inlineWidgetsLeft = ( number ?? Infinity );
+        this._inlineQueuedContainer = this.queuedContainer;
+        this._inlineComponentsLeft = ( numberOfComponents ?? Infinity );
         this._inlineExtraClass = className ?? null;
     }
 
     /**
      * @method endLine
-     * @param {String} className Extra class to customize inline widgets parent container
-     * @description Stop inlining widgets. Use it only if the number of widgets to be inlined is NOT specified.
+     * @param {String} className Extra class to customize inline components parent container
+     * @description Stop inlining components. Use it only if the number of components to be inlined is NOT specified.
      */
 
     endLine( className ) {
 
         className = className ?? this._inlineExtraClass;
 
-        if( this._inlineWidgetsLeft == -1 )
+        if( this._inlineComponentsLeft == -1 )
         {
-            console.warn("No pending widgets to be inlined!");
+            console.warn("No pending components to be inlined!");
             return;
         }
 
-        this._inlineWidgetsLeft = -1;
+        this._inlineComponentsLeft = -1;
 
         if( !this._inlineContainer )
         {
             this._inlineContainer = document.createElement('div');
-            this._inlineContainer.className = "lexinlinewidgets";
+            this._inlineContainer.className = "lexinlinecomponents";
 
             if( className )
             {
@@ -13027,14 +13762,14 @@ class Panel {
         }
 
         // Push all elements single element or Array[element, container]
-        for( let item of this._inlineWidgets )
+        for( let item of this._inlineComponents )
         {
             const isPair = ( item.constructor == Array );
 
             if( isPair )
             {
                 // eg. an array, inline items appended later to
-                if( this._inline_queued_container )
+                if( this._inlineQueuedContainer )
                 {
                     this._inlineContainer.appendChild( item[ 0 ] );
                 }
@@ -13050,7 +13785,7 @@ class Panel {
             }
         }
 
-        if( !this._inline_queued_container )
+        if( !this._inlineQueuedContainer )
         {
             if( this._currentBranch )
             {
@@ -13063,10 +13798,10 @@ class Panel {
         }
         else
         {
-            this._inline_queued_container.appendChild( this._inlineContainer );
+            this._inlineQueuedContainer.appendChild( this._inlineContainer );
         }
 
-        delete this._inlineWidgets;
+        delete this._inlineComponents;
         delete this._inlineContainer;
         delete this._inlineExtraClass;
     }
@@ -13079,7 +13814,7 @@ class Panel {
      * className: Add class to the branch
      * closed: Set branch collapsed/opened [false]
      * icon: Set branch icon (LX.ICONS)
-     * filter: Allow filter widgets in branch by name [false]
+     * filter: Allow filter components in branch by name [false]
      */
 
     branch( name, options = {} ) {
@@ -13100,10 +13835,10 @@ class Panel {
         this.branches.push( branch );
         this.root.appendChild( branch.root );
 
-        // Add widget filter
+        // Add component filter
         if( options.filter )
         {
-            this._addFilter( options.filter, { callback: this._searchWidgets.bind( this, branch.name ) } );
+            this._addFilter( options.filter, { callback: this._searchComponents.bind( this, branch.name ) } );
         }
 
         return branch;
@@ -13119,27 +13854,27 @@ class Panel {
     }
 
     /*
-        Panel Widgets
+        Panel Components
     */
 
-    _attachWidget( widget, options = {} ) {
+    _attachComponent( component, options = {} ) {
 
-        if( widget.name != undefined )
+        if( component.name != undefined )
         {
-            this.widgets[ widget.name ] = widget;
+            this.components[ component.name ] = component;
         }
 
-        if( widget.options.signal && !widget.name )
+        if( component.options.signal && !component.name )
         {
             if( !this.signals )
             {
                 this.signals = [];
             }
 
-            this.signals.push( { [ widget.options.signal ]: widget } );
+            this.signals.push( { [ component.options.signal ]: component } );
         }
 
-        const _insertWidget = el => {
+        const _insertComponent = el => {
             if( options.container )
             {
                 options.container.appendChild( el );
@@ -13148,9 +13883,9 @@ class Panel {
             {
                 if( this._currentBranch )
                 {
-                    if( !options.skipWidget )
+                    if( !options.skipComponent )
                     {
-                        this._currentBranch.widgets.push( widget );
+                        this._currentBranch.components.push( component );
                     }
                     this._currentBranch.content.appendChild( el );
                 }
@@ -13167,54 +13902,54 @@ class Panel {
             }
         };
 
-        const _storeWidget = el => {
+        const _storeComponent = el => {
 
             if( !this.queuedContainer )
             {
-                this._inlineWidgets.push( el );
+                this._inlineComponents.push( el );
             }
             // Append content to queued tab container
             else
             {
-                this._inlineWidgets.push( [ el, this.queuedContainer ] );
+                this._inlineComponents.push( [ el, this.queuedContainer ] );
             }
         };
 
-        // Process inline widgets
-        if( this._inlineWidgetsLeft > 0 && !options.skipInlineCount )
+        // Process inline components
+        if( this._inlineComponentsLeft > 0 && !options.skipInlineCount )
         {
-            if( !this._inlineWidgets )
+            if( !this._inlineComponents )
             {
-                this._inlineWidgets = [];
+                this._inlineComponents = [];
             }
 
-            // Store widget and its container
-            _storeWidget( widget.root );
+            // Store component and its container
+            _storeComponent( component.root );
 
-            this._inlineWidgetsLeft--;
+            this._inlineComponentsLeft--;
 
-            // Last widget
-            if( !this._inlineWidgetsLeft )
+            // Last component
+            if( !this._inlineComponentsLeft )
             {
                 this.endLine();
             }
         }
         else
         {
-            _insertWidget( widget.root );
+            _insertComponent( component.root );
         }
 
-        return widget;
+        return component;
     }
 
     _addFilter( placeholder, options = {} ) {
 
         options.placeholder = placeholder.constructor == String ? placeholder : "Filter properties..";
-        options.skipWidget = options.skipWidget ?? true;
+        options.skipComponent = options.skipComponent ?? true;
         options.skipInlineCount = true;
 
-        let widget = new LX.TextInput( null, null, null, options );
-        const element = widget.root;
+        let component = new LX.TextInput( null, null, null, options );
+        const element = component.root;
         element.className += " lexfilter";
 
         let input = document.createElement('input');
@@ -13237,7 +13972,7 @@ class Panel {
         return element;
     }
 
-    _searchWidgets( branchName, value ) {
+    _searchComponents( branchName, value ) {
 
         for( let b of this.branches )
         {
@@ -13246,8 +13981,8 @@ class Panel {
                 continue;
             }
 
-            // remove all widgets
-            for( let w of b.widgets )
+            // remove all components
+            for( let w of b.components )
             {
                 if( w.domEl.classList.contains('lexfilter') )
                 {
@@ -13261,8 +13996,8 @@ class Panel {
 
             const emptyFilter = !value.length;
 
-            // add widgets
-            for( let w of b.widgets )
+            // add components
+            for( let w of b.components )
             {
                 if( !emptyFilter )
                 {
@@ -13272,7 +14007,7 @@ class Panel {
                     if(!name.includes(value)) continue;
                 }
 
-                // insert filtered widget
+                // insert filtered component
                 this.queuedContainer.appendChild( w.domEl );
             }
 
@@ -13343,13 +14078,13 @@ class Panel {
         var element = document.createElement('div');
         element.className = "lexseparator";
 
-        let widget = new LX.Widget( LX.Widget.SEPARATOR );
-        widget.root = element;
+        let component = new LX.BaseComponent( LX.BaseComponent.SEPARATOR );
+        component.root = element;
 
         if( this._currentBranch )
         {
             this._currentBranch.content.appendChild( element );
-            this._currentBranch.widgets.push( widget );
+            this._currentBranch.components.push( component );
         }
         else
         {
@@ -13364,8 +14099,8 @@ class Panel {
      */
 
     addBlank( width, height ) {
-        const widget = new LX.Blank( width, height );
-        return this._attachWidget( widget );
+        const component = new LX.Blank( width, height );
+        return this._attachComponent( component );
     }
 
     /**
@@ -13380,18 +14115,18 @@ class Panel {
      */
 
     addTitle( name, options = {} ) {
-        const widget = new LX.Title( name, options );
-        return this._attachWidget( widget );
+        const component = new LX.Title( name, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addText
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {String} value Text value
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * hideName: Don't use name as label [false]
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * required: Make the input required
      * placeholder: Add input placeholder
      * icon: Icon (if any) to append at the input start
@@ -13406,18 +14141,18 @@ class Panel {
      */
 
     addText( name, value, callback, options = {} ) {
-        const widget = new LX.TextInput( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.TextInput( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addTextArea
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {String} value Text Area value
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * hideName: Don't use name as label [false]
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * placeholder: Add input placeholder
      * resize: Allow resize [true]
      * trigger: Choose onchange trigger (default, input) [default]
@@ -13428,8 +14163,8 @@ class Panel {
      */
 
     addTextArea( name, value, callback, options = {} ) {
-        const widget = new LX.TextArea( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.TextArea( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
@@ -13441,19 +14176,19 @@ class Panel {
     addLabel( value, options = {} ) {
         options.disabled = true;
         options.inputClass = ( options.inputClass ?? "" ) + " nobg";
-        const widget = this.addText( null, value, null, options );
-        widget.type = LX.Widget.LABEL;
-        return widget;
+        const component = this.addText( null, value, null, options );
+        component.type = LX.BaseComponent.LABEL;
+        return component;
     }
 
     /**
      * @method addButton
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {String} value Button name
      * @param {Function} callback Callback function on click
      * @param {Object} options:
      * hideName: Don't use name as label [false]
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * icon: Icon class to show as button value
      * iconPosition: Icon position (cover|start|end)
      * fileInput: Button click requests a file
@@ -13465,13 +14200,13 @@ class Panel {
      */
 
     addButton( name, value, callback, options = {} ) {
-        const widget = new LX.Button( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Button( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addComboButtons
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Array} values Each of the {value, callback, selected, disabled} items
      * @param {Object} options:
      * hideName: Don't use name as label [false]
@@ -13482,8 +14217,8 @@ class Panel {
      */
 
     addComboButtons( name, values, options = {} ) {
-        const widget = new LX.ComboButtons( name, values, options );
-        return this._attachWidget( widget );
+        const component = new LX.ComboButtons( name, values, options );
+        return this._attachComponent( component );
     }
 
     /**
@@ -13498,13 +14233,13 @@ class Panel {
      */
 
     addCard( name, options = {} ) {
-        const widget = new LX.Card( name, options );
-        return this._attachWidget( widget );
+        const component = new LX.Card( name, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addForm
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Object} data Form data
      * @param {Function} callback Callback function on submit form
      * @param {Object} options:
@@ -13517,13 +14252,13 @@ class Panel {
      */
 
     addForm( name, data, callback, options = {} ) {
-        const widget = new LX.Form( name, data, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Form( name, data, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addContent
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {HTMLElement/String} element
      * @param {Object} options
      */
@@ -13549,15 +14284,15 @@ class Panel {
 
         options.hideName = true;
 
-        let widget = new LX.Widget( LX.Widget.CONTENT, name, null, options );
-        widget.root.appendChild( element );
+        let component = new LX.BaseComponent( LX.BaseComponent.CONTENT, name, null, options );
+        component.root.appendChild( element );
 
-        return this._attachWidget( widget );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addImage
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {String} url Image Url
      * @param {Object} options
      * hideName: Don't use name as label [false]
@@ -13576,43 +14311,43 @@ class Panel {
         Object.assign( img.style, options.style ?? {} );
         container.appendChild( img );
 
-        let widget = new LX.Widget( LX.Widget.IMAGE, name, null, options );
-        widget.root.appendChild( container );
+        let component = new LX.BaseComponent( LX.BaseComponent.IMAGE, name, null, options );
+        component.root.appendChild( container );
 
         // await img.decode();
         img.decode();
 
-        return this._attachWidget( widget );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addSelect
-     * @param {String} name Widget name
-     * @param {Array} values Posible options of the select widget -> String (for default select) or Object = {value, url} (for images, gifs..)
+     * @param {String} name Component name
+     * @param {Array} values Posible options of the select component -> String (for default select) or Object = {value, url} (for images, gifs..)
      * @param {String} value Select by default option
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * hideName: Don't use name as label [false]
-     * filter: Add a search bar to the widget [false]
-     * disabled: Make the widget disabled [false]
+     * filter: Add a search bar to the component [false]
+     * disabled: Make the component disabled [false]
      * skipReset: Don't add the reset value button when value changes
      * placeholder: Placeholder for the filter input
      * emptyMsg: Custom message to show when no filtered results
      */
 
     addSelect( name, values, value, callback, options = {} ) {
-        const widget = new LX.Select( name, values, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Select( name, values, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addCurve
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Array of Array} values Array of 2N Arrays of each value of the curve
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * skipReset: Don't add the reset value button when value changes
-     * bgColor: Widget background color
+     * bgColor: Component background color
      * pointsColor: Curve points color
      * lineColor: Curve line color
      * noOverlap: Points do not overlap, replacing themselves if necessary
@@ -13622,18 +14357,18 @@ class Panel {
     */
 
     addCurve( name, values, callback, options = {} ) {
-        const widget = new LX.Curve( name, values, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Curve( name, values, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addDial
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Array of Array} values Array of 2N Arrays of each value of the dial
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * skipReset: Don't add the reset value button when value changes
-     * bgColor: Widget background color
+     * bgColor: Component background color
      * pointsColor: Curve points color
      * lineColor: Curve line color
      * noOverlap: Points do not overlap, replacing themselves if necessary
@@ -13643,26 +14378,26 @@ class Panel {
     */
 
     addDial( name, values, callback, options = {} ) {
-        const widget = new LX.Dial( name, values, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Dial( name, values, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addLayers
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Number} value Flag value by default option
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      */
 
     addLayers( name, value, callback, options = {} ) {
-        const widget = new LX.Layers( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Layers( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addArray
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Array} values By default values in the array
      * @param {Function} callback Callback function on change
      * @param {Object} options:
@@ -13670,13 +14405,13 @@ class Panel {
      */
 
     addArray( name, values = [], callback, options = {} ) {
-        const widget = new LX.ItemArray( name, values, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.ItemArray( name, values, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addList
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Array} values List values
      * @param {String} value Selected list value
      * @param {Function} callback Callback function on change
@@ -13685,13 +14420,13 @@ class Panel {
      */
 
     addList( name, values, value, callback, options = {} ) {
-        const widget = new LX.List( name, values, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.List( name, values, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addTags
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {String} value Comma separated tags
      * @param {Function} callback Callback function on change
      * @param {Object} options:
@@ -13699,85 +14434,85 @@ class Panel {
      */
 
     addTags( name, value, callback, options = {} ) {
-        const widget = new LX.Tags( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Tags( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addCheckbox
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Boolean} value Value of the checkbox
      * @param {Function} callback Callback function on change
      * @param {Object} options:
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * label: Checkbox label
-     * suboptions: Callback to add widgets in case of TRUE value
+     * suboptions: Callback to add components in case of TRUE value
      * className: Extra classes to customize style
      */
 
     addCheckbox( name, value, callback, options = {} ) {
-        const widget = new LX.Checkbox( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Checkbox( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addToggle
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Boolean} value Value of the checkbox
      * @param {Function} callback Callback function on change
      * @param {Object} options:
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * label: Toggle label
-     * suboptions: Callback to add widgets in case of TRUE value
+     * suboptions: Callback to add components in case of TRUE value
      * className: Customize colors
      */
 
     addToggle( name, value, callback, options = {} ) {
-        const widget = new LX.Toggle( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Toggle( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addRadioGroup
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {String} label Radio label
      * @param {Array} values Radio options
      * @param {Function} callback Callback function on change
      * @param {Object} options:
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * className: Customize colors
      * selected: Index of the default selected option
      */
 
     addRadioGroup( name, label, values, callback, options = {} ) {
-        const widget = new LX.RadioGroup( name, label, values, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.RadioGroup( name, label, values, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addColor
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {String} value Default color (hex)
      * @param {Function} callback Callback function on change
      * @param {Object} options:
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * useRGB: The callback returns color as Array (r, g, b) and not hex [false]
      */
 
     addColor( name, value, callback, options = {} ) {
-        const widget = new LX.ColorInput( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.ColorInput( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addRange
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Number} value Default number value
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * hideName: Don't use name as label [false]
      * className: Extra classes to customize style
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * left: The slider goes to the left instead of the right
      * fill: Fill slider progress [true]
      * step: Step of the input
@@ -13785,18 +14520,18 @@ class Panel {
      */
 
     addRange( name, value, callback, options = {} ) {
-        const widget = new LX.RangeInput( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.RangeInput( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addNumber
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Number} value Default number value
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * hideName: Don't use name as label [false]
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * step: Step of the input
      * precision: The number of digits to appear after the decimal point
      * min, max: Min and Max values for the input
@@ -13807,24 +14542,24 @@ class Panel {
      */
 
     addNumber( name, value, callback, options = {} ) {
-        const widget = new LX.NumberInput( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.NumberInput( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     static VECTOR_COMPONENTS = { 0: 'x', 1: 'y', 2: 'z', 3: 'w' };
 
     _addVector( numComponents, name, value, callback, options = {} ) {
-        const widget = new LX.Vector( numComponents, name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Vector( numComponents, name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addVector N (2, 3, 4)
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Array} value Array of N components
      * @param {Function} callback Callback function on change
      * @param {Object} options:
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * step: Step of the inputs
      * min, max: Min and Max values for the inputs
      * onPress: Callback function on mouse down
@@ -13845,43 +14580,43 @@ class Panel {
 
     /**
      * @method addSize
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Number} value Default number value
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * hideName: Don't use name as label [false]
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * units: Unit as string added to the end of the value
      */
 
     addSize( name, value, callback, options = {} ) {
-        const widget = new LX.SizeInput( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.SizeInput( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addOTP
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {String} value Default numeric value in string format
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * hideName: Don't use name as label [false]
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * pattern: OTP numeric pattern
      */
 
     addOTP( name, value, callback, options = {} ) {
-        const widget = new LX.OTPInput( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.OTPInput( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addPad
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Array} value Pad value
      * @param {Function} callback Callback function on change
      * @param {Object} options:
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * min, max: Min and Max values
      * padSize: Size of the pad (css)
      * onPress: Callback function on mouse down
@@ -13889,13 +14624,13 @@ class Panel {
      */
 
     addPad( name, value, callback, options = {} ) {
-        const widget = new LX.Pad( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Pad( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addProgress
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Number} value Progress value
      * @param {Object} options:
      * min, max: Min and Max values
@@ -13906,29 +14641,29 @@ class Panel {
      */
 
     addProgress( name, value, options = {} ) {
-        const widget = new LX.Progress( name, value, options );
-        return this._attachWidget( widget );
+        const component = new LX.Progress( name, value, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addFile
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Function} callback Callback function on change
      * @param {Object} options:
      * local: Ask for local file
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * read: Return the file itself (False) or the contents (True)
      * type: type to read as [text (Default), buffer, bin, url]
      */
 
     addFile( name, callback, options = { } ) {
-        const widget = new LX.FileInput( name, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.FileInput( name, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addTree
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Object} data Data of the tree
      * @param {Object} options:
      * icons: Array of objects with icon button information {name, icon, callback}
@@ -13938,13 +14673,13 @@ class Panel {
      */
 
     addTree( name, data, options = {} ) {
-        const widget = new LX.Tree( name, data, options );
-        return this._attachWidget( widget );
+        const component = new LX.Tree( name, data, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addTabSections
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Array} tabs Contains objects with {
      *      name: Name of the tab (if icon, use as title)
      *      icon: Icon to be used as the tab icon (optional)
@@ -13959,30 +14694,30 @@ class Panel {
      */
 
     addTabSections( name, tabs, options = {} ) {
-        const widget = new LX.TabSections( name, tabs, options );
-        return this._attachWidget( widget );
+        const component = new LX.TabSections( name, tabs, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addCounter
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Number} value Counter value
      * @param {Function} callback Callback function on change
      * @param {Object} options:
-     * disabled: Make the widget disabled [false]
+     * disabled: Make the component disabled [false]
      * min, max: Min and Max values
      * step: Step for adding/substracting
      * label: Text to show below the counter
      */
 
     addCounter( name, value, callback, options = { } ) {
-        const widget = new LX.Counter( name, value, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Counter( name, value, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addTable
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Number} data Table data
      * @param {Object} options:
      * hideName: Don't use name as label [false]
@@ -14000,13 +14735,13 @@ class Panel {
      */
 
     addTable( name, data, options = { } ) {
-        const widget = new LX.Table( name, data, options );
-        return this._attachWidget( widget );
+        const component = new LX.Table( name, data, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addDate
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {String} dateValue
      * @param {Function} callback
      * @param {Object} options:
@@ -14017,21 +14752,34 @@ class Panel {
      */
 
     addDate( name, dateValue, callback, options = { } ) {
-        const widget = new LX.DatePicker( name, dateValue, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.DatePicker( name, dateValue, callback, options );
+        return this._attachComponent( component );
     }
 
     /**
      * @method addMap2D
-     * @param {String} name Widget name
+     * @param {String} name Component name
      * @param {Array} points
      * @param {Function} callback
      * @param {Object} options:
      */
 
     addMap2D( name, points, callback, options = { } ) {
-        const widget = new LX.Map2D( name, points, callback, options );
-        return this._attachWidget( widget );
+        const component = new LX.Map2D( name, points, callback, options );
+        return this._attachComponent( component );
+    }
+
+    /**
+     * @method addRate
+     * @param {String} name Component name
+     * @param {Number} value
+     * @param {Function} callback
+     * @param {Object} options:
+     */
+
+    addRate( name, value, callback, options = { } ) {
+        const component = new LX.Rate( name, value, callback, options );
+        return this._attachComponent( component );
     }
 }
 
@@ -14066,7 +14814,7 @@ class Branch {
 
         this.closed = options.closed ?? false;
         this.root = root;
-        this.widgets = [];
+        this.components = [];
 
         // Create element
         var title = document.createElement( 'div' );
@@ -14137,8 +14885,8 @@ class Branch {
     _onMakeFloating() {
 
         const dialog = new LX.Dialog( this.name, p => {
-            // add widgets
-            for( let w of this.widgets )
+            // Add components
+            for( let w of this.components )
             {
                 p.root.appendChild( w.root );
             }
@@ -14149,7 +14897,7 @@ class Branch {
 
         dialog.branchData = {
             name: this.name,
-            widgets: this.widgets,
+            components: this.components,
             closed: this.closed,
             panel: this.panel,
             childIndex
@@ -14161,7 +14909,7 @@ class Branch {
     _addBranchSeparator() {
 
         const element = document.createElement('div');
-        element.className = "lexwidgetseparator";
+        element.className = "lexcomponentseparator";
         element.style.width = "100%";
         element.style.background = "none";
 
@@ -14214,7 +14962,7 @@ class Branch {
 
         function innerMouseUp(e)
         {
-            that._updateWidgets();
+            that._updateComponents();
 
             line.style.height = "0px";
 
@@ -14227,15 +14975,15 @@ class Branch {
         this.content.appendChild( element );
     }
 
-    _updateWidgets() {
+    _updateComponents() {
 
         var size = this.grabber.style.marginLeft;
 
-        // Update sizes of widgets inside
-        for( let i = 0; i < this.widgets.length; i++ )
+        // Update sizes of components inside
+        for( let i = 0; i < this.components.length; i++ )
         {
-            let widget = this.widgets[ i ];
-            const element = widget.root;
+            let component = this.components[ i ];
+            const element = component.root;
 
             if( element.children.length < 2 )
             {
@@ -14248,10 +14996,10 @@ class Branch {
             name.style.width = size;
             name.style.minWidth = size;
 
-            switch( widget.type )
+            switch( component.type )
             {
-                case LX.Widget.CUSTOM:
-                case LX.Widget.ARRAY:
+                case LX.BaseComponent.CUSTOM:
+                case LX.BaseComponent.ARRAY:
                     continue;
             }
             value.style.width = "-moz-calc( 100% - " + size + " )";
@@ -14565,7 +15313,15 @@ class Menubar {
         {
             const data = buttons[ i ];
             const title = data.title;
-            const button = new LX.Button( title, data.label, data.callback, { title, buttonClass: "bg-none", disabled: data.disabled, icon: data.icon, hideName: true, swap: data.swap, iconPosition: "start" } );
+            const button = new LX.Button( title, data.label, data.callback, {
+                title,
+                buttonClass: "bg-none",
+                disabled: data.disabled,
+                icon: data.icon,
+                hideName: true,
+                swap: data.swap,
+                iconPosition: "start"
+            } );
             this.buttonContainer.appendChild( button.root );
 
             if( title )
@@ -15139,9 +15895,21 @@ class Sidebar {
                     LX.asTooltip( itemDom, key, { side: "right", offset: 16, active: false } );
                 }
 
-                let itemName = document.createElement( 'a' );
-                itemName.innerHTML = key;
-                itemDom.appendChild( itemName );
+                LX.makeElement( 'a', "grid-column-start-2", key, itemDom );
+
+                if( options.swap )
+                {
+                    itemDom.classList.add( "swap", "inline-grid" );
+                    itemDom.querySelector( "a" ).classList.add( "swap-off" );
+
+                    const input = document.createElement( "input" );
+                    input.className = "p-0 border-0";
+                    input.type = "checkbox";
+                    itemDom.prepend( input );
+
+                    const swapIcon = LX.makeIcon( options.swap, { iconClass: "lexsidebarentryicon swap-on" } );
+                    itemDom.appendChild( swapIcon );
+                }
 
                 if( options.content )
                 {
@@ -15170,8 +15938,14 @@ class Sidebar {
                     item.checkbox.set( item.value, true );
                 }
 
+                if( options.swap && !( e.target instanceof HTMLInputElement ) )
+                {
+                    const swapInput = itemDom.querySelector( "input" );
+                    swapInput.checked = !swapInput.checked;
+                }
+
                 // Manage selected
-                if( this.displaySelected )
+                if( this.displaySelected && !options.skipSelection )
                 {
                     this.root.querySelectorAll(".lexsidebarentry").forEach( e => e.classList.remove( 'selected' ) );
                     entry.classList.add( "selected" );
@@ -15253,6 +16027,14 @@ class Sidebar {
 
                 subentry.className = "lexsidebarentry";
                 subentry.id = subkey;
+
+                if( suboptions.content )
+                {
+                    const parentContainer = LX.makeElement( "div" );
+                    parentContainer.appendChild( suboptions.content );
+                    subentry.appendChild( parentContainer );
+                }
+
                 subentryContainer.appendChild( subentry );
 
                 subentry.addEventListener("click", (e) => {
@@ -15261,10 +16043,10 @@ class Sidebar {
                     if( f ) f.call( this, subkey, subentry, e );
 
                     // Manage selected
-                    if( this.displaySelected )
+                    if( this.displaySelected && !suboptions.skipSelection )
                     {
                         this.root.querySelectorAll(".lexsidebarentry").forEach( e => e.classList.remove( 'selected' ) );
-                        entry.classList.add( "selected" );
+                        subentry.classList.add( "selected" );
                     }
                 });
             }
@@ -15283,8 +16065,8 @@ class AssetViewEvent {
     static ASSET_RENAMED    = 3;
     static ASSET_CLONED     = 4;
     static ASSET_DBLCLICKED = 5;
-    static ENTER_FOLDER     = 6;
-    static ASSET_CHECKED    = 7;
+    static ASSET_CHECKED    = 6;
+    static ENTER_FOLDER     = 7;
 
     constructor( type, item, value ) {
         this.type = type || LX.TreeEvent.NONE;
@@ -15302,8 +16084,8 @@ class AssetViewEvent {
             case AssetViewEvent.ASSET_RENAMED: return "assetview_event_renamed";
             case AssetViewEvent.ASSET_CLONED: return "assetview_event_cloned";
             case AssetViewEvent.ASSET_DBLCLICKED: return "assetview_event_dblclicked";
-            case AssetViewEvent.ENTER_FOLDER: return "assetview_event_enter_folder";
             case AssetViewEvent.ASSET_CHECKED: return "assetview_event_checked";
+            case AssetViewEvent.ENTER_FOLDER: return "assetview_event_enter_folder";
         }
     }
 }
@@ -15316,8 +16098,12 @@ LX.AssetViewEvent = AssetViewEvent;
 
 class AssetView {
 
-    static LAYOUT_CONTENT       = 0;
+    static LAYOUT_GRID          = 0;
     static LAYOUT_LIST          = 1;
+
+    static CONTENT_SORT_ASC     = 0;
+    static CONTENT_SORT_DESC    = 1;
+
     static MAX_PAGE_ELEMENTS    = 50;
 
     /**
@@ -15326,7 +16112,8 @@ class AssetView {
     constructor( options = {} ) {
 
         this.rootPath = "https://raw.githubusercontent.com/jxarco/lexgui.js/master/";
-        this.layout = options.layout ?? AssetView.LAYOUT_CONTENT;
+        this.layout = options.layout ?? AssetView.LAYOUT_GRID;
+        this.sortMode = options.sortMode ?? AssetView.CONTENT_SORT_ASC;
         this.contentPage = 1;
 
         if( options.rootPath )
@@ -15444,9 +16231,9 @@ class AssetView {
             this.leftPanel.clear();
         }
 
-        if( this.rightPanel )
+        if( this.toolsPanel )
         {
-            this.rightPanel.clear();
+            this.toolsPanel.clear();
         }
     }
 
@@ -15558,7 +16345,7 @@ class AssetView {
     _setContentLayout( layoutMode ) {
 
         this.layout = layoutMode;
-
+        this.toolsPanel.refresh();
         this._refreshContent();
     }
 
@@ -15568,42 +16355,34 @@ class AssetView {
 
     _createContentPanel( area ) {
 
-        if( this.rightPanel )
+        if( this.toolsPanel )
         {
-            this.rightPanel.clear();
+            this.contentPanel.clear();
         }
         else
         {
-            this.rightPanel = area.addPanel({ className: 'lexassetcontentpanel flex flex-col overflow-hidden' });
+            this.toolsPanel = area.addPanel({ className: 'flex flex-col overflow-hidden' });
+            this.contentPanel = area.addPanel({ className: 'lexassetcontentpanel flex flex-col overflow-hidden' });
         }
 
-        const on_sort = ( value, event ) => {
-            const cmenu = LX.addContextMenu( "Sort by", event, c => {
-                c.add("Name", () => this._sortData('id') );
-                c.add("Type", () => this._sortData('type') );
-                c.add("");
-                c.add("Ascending", () => this._sortData() );
-                c.add("Descending", () => this._sortData(null, true) );
-            } );
-            const parent = this.parent.root.parentElement;
-            if( parent.classList.contains('lexdialog') )
-            {
-                cmenu.root.style.zIndex = (+getComputedStyle( parent ).zIndex) + 1;
-            }
+        const _onSort = ( value, event ) => {
+            new LX.DropdownMenu( event.target, [
+                { name: "Name", icon: "ALargeSmall", callback: () => this._sortData( "id" ) },
+                { name: "Type", icon: "Type", callback: () => this._sortData( "type" ) },
+                null,
+                { name: "Ascending", icon: "SortAsc", callback: () => this._sortData( null, AssetView.CONTENT_SORT_ASC ) },
+                { name: "Descending", icon: "SortDesc", callback: () => this._sortData( null, AssetView.CONTENT_SORT_DESC ) }
+            ], { side: "right", align: "start" });
         };
 
-        const on_change_view = ( value, event ) => {
-            const cmenu = LX.addContextMenu( "Layout", event, c => {
-                c.add("Content", () => this._setContentLayout( AssetView.LAYOUT_CONTENT ) );
-                c.add("");
-                c.add("List", () => this._setContentLayout( AssetView.LAYOUT_LIST ) );
-            } );
-            const parent = this.parent.root.parentElement;
-            if( parent.classList.contains('lexdialog') )
-                cmenu.root.style.zIndex = (+getComputedStyle( parent ).zIndex) + 1;
+        const _onChangeView = ( value, event ) => {
+            new LX.DropdownMenu( event.target, [
+                { name: "Grid", icon: "LayoutGrid", callback: () => this._setContentLayout( AssetView.LAYOUT_GRID ) },
+                { name: "List", icon: "LayoutList", callback: () => this._setContentLayout( AssetView.LAYOUT_LIST ) }
+            ], { side: "right", align: "start" });
         };
 
-        const on_change_page = ( value, event ) => {
+        const _onChangePage = ( value, event ) => {
             if( !this.allowNextPage )
             {
                 return;
@@ -15619,64 +16398,71 @@ class AssetView {
             }
         };
 
-        this.rightPanel.sameLine();
-        this.rightPanel.addSelect( "Filter", this.allowedTypes, this.allowedTypes[ 0 ], v => this._refreshContent.call(this, null, v), { width: "30%", minWidth: "128px" } );
-        this.rightPanel.addText( null, this.searchValue ?? "", v => this._refreshContent.call(this, v, null), { placeholder: "Search assets.." } );
-        this.rightPanel.addButton( null, "", on_sort.bind(this), { title: "Sort", icon: "ArrowUpNarrowWide" } );
-        this.rightPanel.addButton( null, "", on_change_view.bind(this), { title: "View", icon: "GripHorizontal" } );
-        // Content Pages
-        this.rightPanel.addButton( null, "", on_change_page.bind(this, -1), { title: "Previous Page", icon: "ChevronsLeft", className: "ml-auto" } );
-        this.rightPanel.addButton( null, "", on_change_page.bind(this, 1), { title: "Next Page", icon: "ChevronsRight" } );
-        const textString = "Page " + this.contentPage + " / " + ((((this.currentData.length - 1) / AssetView.MAX_PAGE_ELEMENTS )|0) + 1);
-        this.rightPanel.addText(null, textString, null, {
-            inputClass: "nobg", disabled: true, signal: "@on_page_change", maxWidth: "16ch" }
-        );
-        this.rightPanel.endLine();
+        this.toolsPanel.refresh = () => {
+            this.toolsPanel.clear();
+            this.toolsPanel.sameLine();
+            this.toolsPanel.addSelect( "Filter", this.allowedTypes, this.filter ?? this.allowedTypes[ 0 ], v => {
+                this._refreshContent( null, v );
+            }, { width: "30%", minWidth: "128px" } );
+            this.toolsPanel.addText( null, this.searchValue ?? "", v => this._refreshContent.call(this, v, null), { placeholder: "Search assets.." } );
+            this.toolsPanel.addButton( null, "", _onSort.bind(this), { title: "Sort", tooltip: true, icon: ( this.sortMode === AssetView.CONTENT_SORT_ASC ) ? "SortAsc" : "SortDesc" } );
+            this.toolsPanel.addButton( null, "", _onChangeView.bind(this), { title: "View", tooltip: true, icon: ( this.layout === AssetView.LAYOUT_GRID ) ? "LayoutGrid" : "LayoutList" } );
+            // Content Pages
+            this.toolsPanel.addButton( null, "", _onChangePage.bind(this, -1), { title: "Previous Page", icon: "ChevronsLeft", className: "ml-auto" } );
+            this.toolsPanel.addButton( null, "", _onChangePage.bind(this, 1), { title: "Next Page", icon: "ChevronsRight" } );
+            const textString = "Page " + this.contentPage + " / " + ((((this.currentData.length - 1) / AssetView.MAX_PAGE_ELEMENTS )|0) + 1);
+            this.toolsPanel.addText(null, textString, null, {
+                inputClass: "nobg", disabled: true, signal: "@on_page_change", maxWidth: "16ch" }
+            );
 
-        if( !this.skipBrowser )
-        {
-            this.rightPanel.sameLine();
-            this.rightPanel.addComboButtons( null, [
-                {
-                    value: "Left",
-                    icon: "ArrowLeft",
-                    callback: domEl => {
-                        if(!this.prevData.length) return;
-                        this.nextData.push( this.currentData );
-                        this.currentData = this.prevData.pop();
-                        this._refreshContent();
-                        this._updatePath( this.currentData );
-                    }
-                },
-                {
-                    value: "Right",
-                    icon: "ArrowRight",
-                    callback: domEl => {
-                        if(!this.nextData.length) return;
-                        this.prevData.push( this.currentData );
-                        this.currentData = this.nextData.pop();
-                        this._refreshContent();
-                        this._updatePath( this.currentData );
+            if( !this.skipBrowser )
+            {
+                this.toolsPanel.addComboButtons( null, [
+                    {
+                        value: "Left",
+                        icon: "ArrowLeft",
+                        callback: domEl => {
+                            if(!this.prevData.length) return;
+                            this.nextData.push( this.currentData );
+                            this.currentData = this.prevData.pop();
+                            this._refreshContent();
+                            this._updatePath( this.currentData );
+                        }
+                    },
+                    {
+                        value: "Right",
+                        icon: "ArrowRight",
+                        callback: domEl => {
+                            if(!this.nextData.length) return;
+                            this.prevData.push( this.currentData );
+                            this.currentData = this.nextData.pop();
+                            this._refreshContent();
+                            this._updatePath( this.currentData );
+                        }
+                    },
+                    {
+                        value: "Refresh",
+                        icon: "Refresh",
+                        callback: domEl => { this._refreshContent(); }
                     }
-                },
-                {
-                    value: "Refresh",
-                    icon: "Refresh",
-                    callback: domEl => { this._refreshContent(); }
-                }
-            ], { noSelection: true } );
+                ], { noSelection: true } );
 
-            this.rightPanel.addText(null, this.path.join('/'), null, {
-                inputClass: "nobg", disabled: true, signal: "@on_folder_change",
-                style: { fontWeight: "600", fontSize: "15px" }
-            });
+                this.toolsPanel.addText(null, this.path.join('/'), null, {
+                    inputClass: "nobg", disabled: true, signal: "@on_folder_change",
+                    style: { fontWeight: "600", fontSize: "15px" }
+                });
+            }
 
-            this.rightPanel.endLine();
-        }
+            this.toolsPanel.endLine();
+        };
+
+        this.toolsPanel.refresh();
+
+        // Start content panel
 
         this.content = document.createElement('ul');
         this.content.className = "lexassetscontent";
-        this.rightPanel.root.appendChild(this.content);
+        this.contentPanel.attach( this.content );
 
         this.content.addEventListener('dragenter', function( e ) {
             e.preventDefault();
@@ -15699,12 +16485,12 @@ class AssetView {
 
     _refreshContent( searchValue, filter ) {
 
-        const isContentLayout = ( this.layout == AssetView.LAYOUT_CONTENT ); // default
+        const isGridLayout = ( this.layout == AssetView.LAYOUT_GRID ); // default
 
         this.filter = filter ?? ( this.filter ?? "None" );
         this.searchValue = searchValue ?? (this.searchValue ?? "");
         this.content.innerHTML = "";
-        this.content.className = (isContentLayout ? "lexassetscontent" : "lexassetscontent list");
+        this.content.className = (isGridLayout ? "lexassetscontent" : "lexassetscontent list");
         let that = this;
 
         const _addItem = function(item) {
@@ -15727,7 +16513,7 @@ class AssetView {
 
                 itemEl.addEventListener("mousemove", e => {
 
-                    if( !isContentLayout )
+                    if( !isGridLayout )
                     {
                         return;
                     }
@@ -15756,14 +16542,14 @@ class AssetView {
                 });
 
                 itemEl.addEventListener("mouseenter", () => {
-                    if( isContentLayout )
+                    if( isGridLayout )
                     {
                         desc.style.display = "unset";
                     }
                 });
 
                 itemEl.addEventListener("mouseleave", () => {
-                    if( isContentLayout )
+                    if( isGridLayout )
                     {
                         setTimeout( () => {
                             desc.style.display = "none";
@@ -15807,11 +16593,11 @@ class AssetView {
                 let preview = null;
                 const hasImage = item.src && (['png', 'jpg'].indexOf( LX.getExtension( item.src ) ) > -1 || item.src.includes("data:image/") ); // Support b64 image as src
 
-                if( hasImage || isFolder || !isContentLayout)
+                if( hasImage || isFolder || !isGridLayout)
                 {
                     preview = document.createElement('img');
                     let real_src = item.unknown_extension ? that.rootPath + "images/file.png" : (isFolder ? that.rootPath + "images/folder.png" : item.src);
-                    preview.src = (isContentLayout || isFolder ? real_src : that.rootPath + "images/file.png");
+                    preview.src = (isGridLayout || isFolder ? real_src : that.rootPath + "images/file.png");
                     itemEl.appendChild( preview );
                 }
                 else
@@ -16072,16 +16858,20 @@ class AssetView {
         }
     }
 
-    _sortData( sort_by, sort_descending = false ) {
+    _sortData( sortBy, sortMode ) {
 
-        sort_by = sort_by ?? (this._lastSortBy ?? 'id');
-        this.currentData = this.currentData.sort( (a, b) => {
-            var r = sort_descending ? b[sort_by].localeCompare(a[sort_by]) : a[sort_by].localeCompare(b[sort_by]);
-            if(r == 0) r = sort_descending ? b['id'].localeCompare(a['id']) : a['id'].localeCompare(b['id']);
+        sortBy = sortBy ?? ( this._lastSortBy ?? 'id' );
+        sortMode = sortMode ?? this.sortMode;
+        const sortDesc = ( sortMode === AssetView.CONTENT_SORT_DESC );
+        this.currentData = this.currentData.sort( ( a, b ) => {
+            var r = sortDesc ? b[ sortBy ].localeCompare( a[ sortBy ] ) : a[ sortBy ].localeCompare( b[ sortBy ] );
+            if( r == 0 ) r = sortDesc ? b['id'].localeCompare( a['id'] ) : a[ 'id' ].localeCompare( b[ 'id' ] );
             return r;
         } );
 
-        this._lastSortBy = sort_by;
+        this._lastSortBy = sortBy;
+        this.sortMode = sortMode;
+        this.toolsPanel.refresh();
         this._refreshContent();
     }
 
@@ -16451,4 +17241,4 @@ class Tour {
 }
 LX.Tour = Tour;
 
-export { ADD_CUSTOM_WIDGET, Area, AssetView, AssetViewEvent, Branch, LX, Menubar, Panel, Sidebar, Tour, Widget };
+export { ADD_CUSTOM_COMPONENT, Area, AssetView, AssetViewEvent, BaseComponent, Branch, LX, Menubar, Panel, Sidebar, Tour };