lexgui 0.6.11 → 0.7.0

package/build/lexgui.js

@@ -14,9 +14,9 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 const LX = {
-    version: "0.6.11",
+    version: "0.7.0",
     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
@@ -210,7 +210,7 @@ function _createCommandbar( root )
         }
         else
         {
-            for( let c of LX.components )
+            for( let c of LX.extensions )
             {
                 if( !LX[ c ] || !LX[ c ].prototype.onKeyPressed )
                 {
@@ -423,6 +423,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 = { } )
@@ -474,6 +475,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 )
@@ -518,13 +522,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 );
             }
         }
     });
@@ -569,6 +573,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
@@ -671,7 +688,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 );
         }
@@ -751,7 +768,18 @@ class Popover {
         this.root.dataset["side"] = this.side;
         this.root.tabIndex = "1";
         this.root.className = "lexpopover";
-        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.root.addEventListener( "keydown", (e) => {
             if( e.key == "Escape" )
@@ -873,12 +901,71 @@ 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`;
     }
 }
 LX.Popover = Popover;
 
+/**
+ * @class PopConfirm
+ */
+
+class PopConfirm {
+
+    constructor( reference, options = {} ) {
+
+        const okText = options.confirmText ?? "Yes";
+        const cancelText = options.cancelText ?? "No";
+        const title = options.title ?? "Confirm";
+        const content = options.content ?? "Are you sure you want to proceed?";
+        const onConfirm = options.onConfirm;
+        const onCancel = options.onCancel;
+
+        const popoverContainer = LX.makeContainer( ["auto", "auto"], "tour-step-container" );
+
+        {
+            const headerDiv = LX.makeContainer( ["100%", "auto"], "flex flex-row", "", popoverContainer );
+            LX.makeContainer( ["100%", "auto"], "p-1 font-medium text-md", title, headerDiv );
+        }
+
+        LX.makeContainer( ["100%", "auto"], "p-1 text-md", content, popoverContainer, { maxWidth: "400px" } );
+        const footer = LX.makeContainer( ["100%", "auto"], "flex flex-row text-md", "", popoverContainer );
+        const footerButtons = LX.makeContainer( ["100%", "auto"], "text-md", "", footer );
+        const footerPanel = new LX.Panel();
+        footerButtons.appendChild( footerPanel.root );
+
+        footerPanel.sameLine( 2, "justify-end" );
+        footerPanel.addButton( null, cancelText, () => {
+            if( onCancel ) onCancel();
+            this._popover?.destroy();
+        }, { xbuttonClass: "contrast" } );
+        footerPanel.addButton( null, okText, () => {
+            if( onConfirm ) onConfirm();
+            this._popover?.destroy();
+        }, { buttonClass: "accent" } );
+
+        this._popover?.destroy();
+        this._popover = new LX.Popover( null, [ popoverContainer ], {
+            reference,
+            side: options.side ?? "top",
+            align: options.align,
+            sideOffset: options.sideOffset,
+            alignOffset: options.alignOffset,
+        } );
+
+    }
+}
+
+LX.PopConfirm = PopConfirm;
+
 /**
  * @class Sheet
  */
@@ -894,7 +981,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" )
@@ -935,17 +1022,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 => {
@@ -963,6 +1054,8 @@ class Sheet {
 
     destroy() {
 
+        document.documentElement.setAttribute( "data-scale", "" );
+
         document.body.removeEventListener( "mousedown", this._onClick, true );
         document.body.removeEventListener( "focusin", this._onClick, true );
 
@@ -1012,7 +1105,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 );
 
@@ -1048,7 +1152,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;
 
@@ -1073,14 +1177,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 );
@@ -1096,139 +1208,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;
 
-                if( item.submenu && this.inPlace )
+            while( p )
+            {
+                path += "/" + p.dataset["id"];
+                p = p.currentParent?.parentElement;
+            }
+
+            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();
         }
     }
 
@@ -1288,6 +1441,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;
@@ -1548,25 +1708,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 );
@@ -1621,25 +1781,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( ' ' ) );
         }
     }
 
@@ -1674,8 +1834,15 @@ class Calendar {
         this.root = LX.makeContainer( ["256px", "auto"], "p-1 text-md" );
 
         this.onChange = options.onChange;
+        this.onPreviousMonth = options.onPreviousMonth;
+        this.onNextMonth = options.onNextMonth;
+
         this.untilToday = options.untilToday;
         this.fromToday = options.fromToday;
+        this.range = options.range;
+
+        this.skipPrevMonth = options.skipPrevMonth;
+        this.skipNextMonth = options.skipNextMonth;
 
         if( dateString )
         {
@@ -1699,7 +1866,7 @@ class Calendar {
         }
     }
 
-    _previousMonth() {
+    _previousMonth( skipCallback ) {
 
         this.month = Math.max( 0, this.month - 1 );
 
@@ -1710,9 +1877,14 @@ class Calendar {
         }
 
         this.fromMonthYear( this.month, this.year );
+
+        if( !skipCallback && this.onPreviousMonth )
+        {
+            this.onPreviousMonth( this.currentDate );
+        }
     }
 
-    _nextMonth() {
+    _nextMonth( skipCallback ) {
 
         this.month = Math.min( this.month + 1, 12 );
 
@@ -1723,6 +1895,11 @@ class Calendar {
         }
 
         this.fromMonthYear( this.month, this.year );
+
+        if( !skipCallback && this.onNextMonth )
+        {
+            this.onNextMonth( this.currentDate );
+        }
     }
 
     refresh() {
@@ -1733,19 +1910,25 @@ class Calendar {
         {
             const header = LX.makeContainer( ["100%", "auto"], "flex flex-row p-1", "", this.root );
 
-            const prevMonthIcon = LX.makeIcon( "Left", { title: "Previous Month", iconClass: "border p-1 rounded hover:bg-secondary", svgClass: "sm" } );
-            header.appendChild( prevMonthIcon );
-            prevMonthIcon.addEventListener( "click", () => {
-                this._previousMonth();
-            } );
+            if( !this.skipPrevMonth )
+            {
+                const prevMonthIcon = LX.makeIcon( "Left", { title: "Previous Month", iconClass: "border p-1 rounded hover:bg-secondary", svgClass: "sm" } );
+                header.appendChild( prevMonthIcon );
+                prevMonthIcon.addEventListener( "click", () => {
+                    this._previousMonth();
+                } );
+            }
 
             LX.makeContainer( ["100%", "auto"], "text-center font-medium select-none", `${ this.monthName } ${ this.year }`, header );
 
-            const nextMonthIcon = LX.makeIcon( "Right", { title: "Next Month", iconClass: "border p-1 rounded hover:bg-secondary", svgClass: "sm" } );
-            header.appendChild( nextMonthIcon );
-            nextMonthIcon.addEventListener( "click", () => {
-                this._nextMonth();
-            } );
+            if( !this.skipNextMonth )
+            {
+                const nextMonthIcon = LX.makeIcon( "Right", { title: "Next Month", iconClass: "border p-1 rounded hover:bg-secondary", svgClass: "sm" } );
+                header.appendChild( nextMonthIcon );
+                nextMonthIcon.addEventListener( "click", () => {
+                    this._nextMonth();
+                } );
+            }
         }
 
         // Body
@@ -1777,6 +1960,9 @@ class Calendar {
                 const body = document.createElement( 'tbody' );
                 daysTable.appendChild( body );
 
+                let fromRangeDate = this.range ? LX.dateFromDateString( this.range[ 0 ] ) : null;
+                let toRangeDate = this.range ? LX.dateFromDateString( this.range[ 1 ] ) : null;
+
                 for( let week = 0; week < 6; week++ )
                 {
                     const hrow = document.createElement( 'tr' );
@@ -1789,15 +1975,28 @@ class Calendar {
 
                         const dayDate = new Date( `${ this.month }/${ dayData.day }/${ this.year }` );
                         const date = new Date();
+                        // today inclusives
                         const beforeToday = this.untilToday ? ( dayDate.getTime() < date.getTime() ) : true;
-                        const afterToday = this.fromToday ? ( dayDate.getTime() > date.getTime() ) : true;
+                        const afterToday = this.fromToday ? ( dayDate.getFullYear() > date.getFullYear() ||
+                            (dayDate.getFullYear() === date.getFullYear() && dayDate.getMonth() > date.getMonth()) ||
+                            (dayDate.getFullYear() === date.getFullYear() && dayDate.getMonth() === date.getMonth() && dayDate.getDate() >= date.getDate())
+                        ) : true;
                         const selectable = dayData.currentMonth && beforeToday && afterToday;
-
-                        if( this.currentDate && ( dayData.day == this.currentDate.day ) && ( this.month == this.currentDate.month )
-                            && ( this.year == this.currentDate.year ) && dayData.currentMonth )
+                        const currentDay = this.currentDate && ( dayData.day == this.currentDate.day ) && ( this.month == this.currentDate.month )
+                            && ( this.year == this.currentDate.year ) && dayData.currentMonth;
+                        const currentFromRange = selectable && fromRangeDate && ( dayData.day == fromRangeDate.getDate() ) && ( this.month == ( fromRangeDate.getMonth() + 1 ) )
+                            && ( this.year == fromRangeDate.getFullYear() );
+                        const currentToRange = selectable && toRangeDate && ( dayData.day == toRangeDate.getDate() ) && ( this.month == ( toRangeDate.getMonth() + 1 ) )
+                            && ( this.year == toRangeDate.getFullYear() );
+
+                        if( ( !this.range && currentDay ) || this.range && ( currentFromRange || currentToRange ) )
                         {
                             th.className += ` bg-contrast fg-contrast`;
                         }
+                        else if( this.range && selectable && ( dayDate > fromRangeDate ) && ( dayDate < toRangeDate ) )
+                        {
+                            th.className += ` bg-accent fg-contrast`;
+                        }
                         else
                         {
                             th.className += ` ${ selectable ? "fg-primary" : "fg-tertiary" } hover:bg-secondary`;
@@ -1817,6 +2016,20 @@ class Calendar {
                                 }
                             } );
                         }
+                        // This event should only be applied in non current month days
+                        else if( this.range === undefined && !dayData.currentMonth )
+                        {
+                            th.addEventListener( "click", () => {
+                                if( dayData?.prevMonth )
+                                {
+                                    this._previousMonth();
+                                }
+                                else
+                                {
+                                    this._nextMonth();
+                                }
+                            } );
+                        }
                     }
 
                     body.appendChild( hrow );
@@ -1831,6 +2044,7 @@ class Calendar {
 
         this.day = parseInt( tokens[ 0 ] );
         this.month = parseInt( tokens[ 1 ] );
+        this.monthName = this.getMonthName( this.month - 1 );
         this.year = parseInt( tokens[ 2 ] );
 
         this.currentDate = this._getCurrentDate();
@@ -1860,7 +2074,7 @@ class Calendar {
         // Fill in days from previous month
         for( let i = firstDay - 1; i >= 0; i--)
         {
-            calendarDays.push( { day: daysInPrevMonth - i, currentMonth: false } );
+            calendarDays.push( { day: daysInPrevMonth - i, currentMonth: false, prevMonth: true } );
         }
 
         // Fill in current month days
@@ -1873,7 +2087,7 @@ class Calendar {
         const remaining = 42 - calendarDays.length;
         for( let i = 1; i <= remaining; i++ )
         {
-            calendarDays.push( { day: i, currentMonth: false } );
+            calendarDays.push( { day: i, currentMonth: false, nextMonth: true } );
         }
 
         this.monthName = this.getMonthName( month );
@@ -1889,8 +2103,21 @@ class Calendar {
         return formatter.format( new Date( 2000, monthIndex, 1 ) );
     }
 
-    getFullDate() {
-        return `${ this.monthName } ${ this.day }${ this._getOrdinalSuffix( this.day ) }, ${ this.year }`;
+    getFullDate( monthName, day, year ) {
+        return `${ monthName ?? this.monthName } ${ day ?? this.day }${ this._getOrdinalSuffix( day ?? this.day ) }, ${ year ?? this.year }`;
+    }
+
+    setRange( range ) {
+        console.assert( range.constructor === Array, "Date Range must be in Array format" );
+        this.range = range;
+        this.refresh();
+    }
+
+    setMonth( month ) {
+
+        this.month = month;
+
+        this.fromMonthYear( this.month, this.year );
     }
 
     _getOrdinalSuffix( day ) {
@@ -1907,6 +2134,110 @@ class Calendar {
 
 LX.Calendar = Calendar;
 
+class CalendarRange {
+
+    /**
+     * @constructor CalendarRange
+     * @param {Array} range ["DD/MM/YYYY", "DD/MM/YYYY"]
+     * @param {Object} options
+     */
+
+    constructor( range, options = {} ) {
+
+        this.root = LX.makeContainer( ["auto", "auto"], "flex flex-row" );
+
+        console.assert( range && range.constructor === Array, "Range cannot be empty and has to be an Array!" );
+
+        let mustSetMonth = null;
+        let dateReversed = false;
+
+        // Fix any issues with date range picking
+        {
+            const t0 = LX.dateFromDateString( range[ 0 ] );
+            const t1 = LX.dateFromDateString( range[ 1 ] );
+
+            if( t0 > t1 )
+            {
+                const tmp = range[ 0 ];
+                range[ 0 ] = range[ 1 ];
+                range[ 1 ] = tmp;
+                dateReversed = true;
+            }
+
+            mustSetMonth = (dateReversed ? t1.getMonth() : t0.getMonth() ) + 2; // +1 to convert range, +1 to use next month
+        }
+
+        this.from = range[ 0 ];
+        this.to = range[ 1 ];
+
+        this._selectingRange = false;
+
+        const onChange = ( date ) => {
+
+            const newDateString = `${ date.day }/${ date.month }/${ date.year }`;
+
+            if( !this._selectingRange )
+            {
+                this.from = this.to = newDateString;
+                this._selectingRange = true;
+            }
+            else
+            {
+                this.to = newDateString;
+                this._selectingRange = false;
+            }
+
+            const newRange = [ this.from, this.to ];
+
+            this.fromCalendar.setRange( newRange );
+            this.toCalendar.setRange( newRange );
+
+            if( options.onChange )
+            {
+                options.onChange( newRange );
+            }
+
+        };
+
+        this.fromCalendar = new LX.Calendar( this.from, {
+            skipNextMonth: true,
+            onChange,
+            onPreviousMonth: () => {
+                this.toCalendar._previousMonth();
+            },
+            range
+        });
+
+        this.toCalendar = new LX.Calendar( this.to, {
+            skipPrevMonth: true,
+            onChange,
+            onNextMonth: () => {
+                this.fromCalendar._nextMonth();
+            },
+            range
+        });
+
+        console.assert( mustSetMonth && "New Month must be valid" );
+        this.toCalendar.setMonth( mustSetMonth );
+
+        this.root.appendChild( this.fromCalendar.root );
+        this.root.appendChild( this.toCalendar.root );
+    }
+
+    getFullDate() {
+
+        const d0 = LX.dateFromDateString( this.from );
+        const d0Month = this.fromCalendar.getMonthName( d0.getMonth() );
+
+        const d1 = LX.dateFromDateString( this.to );
+        const d1Month = this.toCalendar.getMonthName( d1.getMonth() );
+
+        return `${ this.fromCalendar.getFullDate( d0Month, d0.getDate(), d0.getFullYear() ) } to ${ this.toCalendar.getFullDate( d1Month, d1.getDate(), d1.getFullYear() ) }`;
+    }
+}
+
+LX.CalendarRange = CalendarRange;
+
 /**
  * @class Tabs
  */
@@ -2111,6 +2442,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;
@@ -2383,7 +2727,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;
@@ -2398,6 +2742,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( () => {
@@ -2451,9 +2796,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 );
                 }
@@ -2697,9 +3042,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();
         });
@@ -2715,31 +3057,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
@@ -2747,15 +3115,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 ) {
@@ -2977,7 +3348,6 @@ LX.ContextMenu = ContextMenu;
 function addContextMenu( title, event, callback, options )
 {
     const menu = new ContextMenu( event, title, options );
-    LX.root.appendChild( menu.root );
 
     if( callback )
     {
@@ -4093,6 +4463,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,
@@ -4393,6 +4800,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
@@ -4421,12 +4850,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;
@@ -4603,6 +5032,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
@@ -4757,6 +5199,22 @@ function hsvToRgb( hsv )
 
 LX.hsvToRgb = hsvToRgb;
 
+/**
+ * @method dateFromDateString
+ * @description Get an instance of Date() from a Date in String format (DD/MM/YYYY)
+ * @param {String} dateString
+ */
+function dateFromDateString( dateString )
+{
+    const tokens = dateString.split( '/' );
+    const day = parseInt( tokens[ 0 ] );
+    const month = parseInt( tokens[ 1 ] );
+    const year = parseInt( tokens[ 2 ] );
+    return new Date( `${ month }/${ day }/${ year }` );
+}
+
+LX.dateFromDateString = dateFromDateString;
+
 /**
  * @method measureRealWidth
  * @description Measure the pixel width of a text
@@ -5128,6 +5586,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
@@ -5444,6 +5976,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]
@@ -5460,9 +5993,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 )
@@ -5501,7 +6073,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 )
@@ -5547,7 +6119,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;
 }
 
@@ -5622,6 +6219,7 @@ function asTooltip( trigger, content, options = {} )
     trigger.dataset[ "disableTooltip" ] = !( options.active ?? true );
 
     let tooltipDom = null;
+    let tooltipParent = LX.root;
 
     trigger.addEventListener( "mouseenter", function(e) {
 
@@ -5630,12 +6228,22 @@ function asTooltip( trigger, content, options = {} )
             return;
         }
 
-        LX.root.querySelectorAll( ".lextooltip" ).forEach( e => e.remove() );
-
         tooltipDom = document.createElement( "div" );
         tooltipDom.className = "lextooltip";
         tooltipDom.innerHTML = 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 ];
@@ -5670,11 +6278,16 @@ function asTooltip( trigger, content, options = {} )
             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 );
     } );
 
     trigger.addEventListener( "mouseleave", function(e) {
@@ -6120,15 +6733,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 )
@@ -6145,13 +6758,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 )
@@ -6225,6 +6838,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 = {} ) {
@@ -6270,6 +6884,11 @@ class Area {
             lexroot.appendChild( this.root );
         }
 
+        if( options.layout )
+        {
+            this.setLayout( options.layout );
+        }
+
         let overlay = options.overlay;
 
         if( overlay )
@@ -6430,6 +7049,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
@@ -6688,12 +7348,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 );
@@ -6712,8 +7377,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;
@@ -7072,10 +7735,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 );
 
@@ -7134,13 +7798,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;
@@ -7180,14 +7844,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 = {} ) {
@@ -7198,7 +7863,7 @@ class Widget {
         this._initialValue = value;
 
         const root = document.createElement( 'div' );
-        root.className = "lexwidget";
+        root.className = "lexcomponent";
 
         if( options.id )
         {
@@ -7215,7 +7880,7 @@ class Widget {
             root.className += " " + options.className;
         }
 
-        if( type != Widget.TITLE )
+        if( type != BaseComponent.TITLE )
         {
             if( options.width )
             {
@@ -7234,7 +7899,7 @@ class Widget {
                 root.style.height = root.style.minHeight = options.height;
             }
 
-            LX.widgetResizeObserver.observe( root );
+            LX.componentResizeObserver.observe( root );
         }
 
         if( name != undefined )
@@ -7242,7 +7907,7 @@ class Widget {
             if( !( options.hideName ?? false ) )
             {
                 let domName = document.createElement( 'div' );
-                domName.className = "lexwidgetname";
+                domName.className = "lexcomponentname";
 
                 if( options.justifyName )
                 {
@@ -7304,7 +7969,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 );
@@ -7341,7 +8006,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" );
@@ -7367,7 +8032,7 @@ class Widget {
 
     oncontextmenu( e ) {
 
-        if( Widget.NO_CONTEXT_TYPES.includes( this.type ) )
+        if( BaseComponent.NO_CONTEXT_TYPES.includes( this.type ) )
         {
             return;
         }
@@ -7398,41 +8063,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() {
@@ -7440,52 +8106,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";
@@ -7495,7 +8161,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 )
                 {
@@ -7505,9 +8171,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");
                         });
@@ -7529,7 +8195,7 @@ function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
                     LX.addContextMenu(null, e, c => {
                         c.add("Clear", () => {
                             instance = null;
-                            refresh_widget();
+                            _refreshComponent();
                         });
                     });
                 });
@@ -7537,14 +8203,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 }` ];
@@ -7556,7 +8222,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 )
@@ -7621,11 +8287,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
@@ -8197,14 +8863,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";
@@ -8215,17 +8881,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 }`;
 
@@ -8259,14 +8925,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;
@@ -8399,14 +9065,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;
@@ -8500,14 +9166,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" );
@@ -8688,6 +9354,20 @@ class Button extends Widget {
             {
                 wValue.querySelector( ".file-input" ).click();
             }
+            else if( options.mustConfirm )
+            {
+                new LX.PopConfirm( wValue, {
+                    onConfirm: () => {
+                        this._trigger( new LX.IEvent( name, value, e ), callback );
+                    },
+                    side: options.confirmSide,
+                    align: options.confirmAlign,
+                    confirmText: options.confirmText,
+                    cancelText: options.confirmCancelText,
+                    title: options.confirmTitle,
+                    content: options.confirmContent
+                } );
+            }
             else
             {
                 const swapInput = wValue.querySelector( "input" );
@@ -8708,10 +9388,10 @@ LX.Button = Button;
 
 /**
  * @class ComboButtons
- * @description ComboButtons Widget
+ * @description ComboButtons Component
  */
 
-class ComboButtons extends Widget {
+class ComboButtons extends BaseComponent {
 
     constructor( name, values, options = {} ) {
 
@@ -8826,7 +9506,7 @@ class ComboButtons extends Widget {
             currentValue = currentValue[ 0 ];
         }
 
-        super( Widget.BUTTONS, name, null, options );
+        super( BaseComponent.BUTTONS, name, null, options );
 
         this.onGetValue = () => {
             return currentValue;
@@ -8869,16 +9549,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";
@@ -8932,10 +9612,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 = {} ) {
 
@@ -8948,7 +9628,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;
@@ -8956,18 +9636,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 );
             }
         };
 
@@ -8997,10 +9677,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;
         }
@@ -9025,7 +9705,7 @@ class Form extends Widget {
             {
                 let entryData = data[ entry ];
 
-                if( !entryData.textWidget.valid() )
+                if( !entryData.textComponent.valid() )
                 {
                     return;
                 }
@@ -9045,14 +9725,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;
@@ -9125,7 +9805,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();
@@ -9155,8 +9835,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';
@@ -9167,6 +9847,8 @@ class Select extends Widget {
                 {
                     list.style.height = `${ maxY - topPosition - 32 }px`; // 32px margin
                 }
+
+                this._lastPlacement = [ failAbove, failBelow ];
             }
 
             // Manage horizontal aspect
@@ -9280,7 +9962,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";
@@ -9289,6 +9971,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";
 
@@ -9322,7 +10005,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";
@@ -9431,7 +10114,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 ];
@@ -9454,16 +10137,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 ));
@@ -9515,16 +10198,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 ) );
@@ -9572,14 +10255,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;
@@ -9656,16 +10339,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;
@@ -9720,41 +10403,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) => {
@@ -9774,14 +10457,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;
@@ -9874,17 +10557,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 );
@@ -9963,19 +10646,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;
@@ -10046,19 +10729,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;
@@ -10130,14 +10813,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;
 
@@ -10209,10 +10892,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 = {} ) {
 
@@ -10221,12 +10904,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 );
@@ -10246,7 +10929,7 @@ class ColorInput extends Widget {
 
             if( !this._skipTextUpdate )
             {
-                textWidget.set( value, true, event );
+                textComponent.set( value, true, event );
             }
 
             if( !skipCallback )
@@ -10314,15 +10997,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 ) );
     }
@@ -10332,14 +11015,14 @@ 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 );
+        super( BaseComponent.RANGE, name, value, options );
 
         this.onGetValue = () => {
             return value;
@@ -10423,7 +11106,7 @@ class RangeInput extends Widget {
             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 ) );
@@ -10434,14 +11117,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;
@@ -10518,7 +11201,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;
@@ -10656,17 +11339,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']" );
@@ -10761,13 +11444,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 } );
 
@@ -10841,13 +11524,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" );
                     }
                 }
 
@@ -10906,14 +11589,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 = [];
@@ -10994,10 +11677,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 = {} ) {
 
@@ -11010,7 +11693,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;
@@ -11152,14 +11835,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;
@@ -11272,14 +11955,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;
@@ -11409,14 +12092,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';
@@ -11494,16 +12177,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";
@@ -11576,16 +12259,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 )
         {
@@ -11631,7 +12314,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 );
 
@@ -11640,7 +12323,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" );
@@ -11683,14 +12366,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;
@@ -11753,10 +12436,10 @@ LX.Counter = Counter;
 
 /**
  * @class Table
- * @description Table Widget
+ * @description Table Component
  */
 
-class Table extends Widget {
+class Table extends BaseComponent {
 
     constructor( name, data, options = { } ) {
 
@@ -11765,7 +12448,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" );
@@ -11815,7 +12498,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";
 
@@ -11834,9 +12517,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 )
                         {
@@ -11857,7 +12540,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" )
                         {
@@ -11876,12 +12559,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", () => {
@@ -11894,11 +12579,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 ) => {
@@ -11906,12 +12623,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" } );
@@ -12193,7 +12914,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 );
@@ -12438,30 +13182,35 @@ LX.Table = Table;
 
 /**
  * @class DatePicker
- * @description DatePicker Widget
+ * @description DatePicker Component
  */
 
-class DatePicker extends Widget {
+class DatePicker extends BaseComponent {
+
+    constructor( name, dateValue, callback, options = { } ) {
 
-    constructor( name, dateString, callback, options = { } ) {
+        super( BaseComponent.DATE, name, null, options );
 
-        super( Widget.DATE, name, null, options );
+        const dateAsRange = ( dateValue?.constructor === Array );
 
-        if( options.today )
+        if( !dateAsRange && options.today )
         {
             const date = new Date();
-            dateString = `${ date.getDate() }/${ date.getMonth() + 1 }/${ date.getFullYear() }`;
+            dateValue = `${ date.getDate() }/${ date.getMonth() + 1 }/${ date.getFullYear() }`;
         }
 
         this.onGetValue = () => {
-            return dateString;
+            return dateValue;
         };
 
         this.onSetValue = ( newValue, skipCallback, event ) => {
 
-            dateString = newValue;
+            if( !dateAsRange )
+            {
+                this.calendar.fromDateString( newValue );
+            }
 
-            this.calendar.fromDateString( newValue );
+            dateValue = newValue;
 
             refresh( this.calendar.getFullDate() );
 
@@ -12476,26 +13225,72 @@ class DatePicker extends Widget {
             container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
-        const container = document.createElement('div');
-        container.className = "lexdate";
+        const container = LX.makeContainer( [ "auto", "auto" ], "lexdate flex flex-row" );
         this.root.appendChild( container );
 
-        this.calendar = new LX.Calendar( dateString, { onChange: ( date ) => {
-            this.set( `${ date.day }/${ date.month }/${ date.year }` );
-        }, ...options });
+        if( !dateAsRange )
+        {
+            this.calendar = new LX.Calendar( dateValue, {
+                onChange: ( date ) => {
+                    const newDateString = `${ date.day }/${ date.month }/${ date.year }`;
+                    this.set( newDateString );
+                },
+                ...options
+            });
+        }
+        else
+        {
+            this.calendar = new LX.CalendarRange( dateValue, {
+                onChange: ( dateRange ) => {
+                    this.set( dateRange );
+                },
+                ...options
+            });
+        }
 
         const refresh = ( currentDate ) => {
+
+            const emptyDate = !!currentDate;
+
             container.innerHTML = "";
+
+            currentDate = currentDate ?? "Pick a date";
+
+            const dts = currentDate.split( " to " );
+            const d0 = dateAsRange ? dts[ 0 ] : currentDate;
+
             const calendarIcon = LX.makeIcon( "Calendar" );
-            const calendarButton = new LX.Button( null, currentDate ?? "Pick a date", () => {
+            const calendarButton = new LX.Button( null, d0, () => {
                 this._popover = new LX.Popover( calendarButton.root, [ this.calendar ] );
-            }, { buttonClass: `flex flex-row px-3 ${ currentDate ? "" : "fg-tertiary" } justify-between` } );
-
+            }, { buttonClass: `flex flex-row px-3 ${ emptyDate ? "" : "fg-tertiary" } justify-between` } );
             calendarButton.root.querySelector( "button" ).appendChild( calendarIcon );
+            calendarButton.root.style.width = "100%";
             container.appendChild( calendarButton.root );
+
+            if( dateAsRange )
+            {
+                const arrowRightIcon = LX.makeIcon( "ArrowRight" );
+                LX.makeContainer( ["32px", "auto"], "content-center", arrowRightIcon.innerHTML, container );
+
+                const d1 = dts[ 1 ];
+                const calendarIcon = LX.makeIcon( "Calendar" );
+                const calendarButton = new LX.Button( null, d1, () => {
+                    this._popover = new LX.Popover( calendarButton.root, [ this.calendar ] );
+                }, { buttonClass: `flex flex-row px-3 ${ emptyDate ? "" : "fg-tertiary" } justify-between` } );
+                calendarButton.root.querySelector( "button" ).appendChild( calendarIcon );
+                calendarButton.root.style.width = "100%";
+                container.appendChild( calendarButton.root );
+            }
         };
 
-        refresh( dateString ? this.calendar.getFullDate(): null );
+        if( dateValue )
+        {
+            refresh( this.calendar.getFullDate() );
+        }
+        else
+        {
+            refresh();
+        }
 
         LX.doAsync( this.onResize.bind( this ) );
     }
@@ -12505,14 +13300,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;
@@ -12550,6 +13345,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
 
 /**
@@ -12588,42 +13504,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 );
     }
 
     /**
@@ -12644,18 +13560,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)];
                     }
@@ -12667,11 +13583,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)];
                     }
@@ -12679,46 +13595,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 )
             {
@@ -12727,14 +13643,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 ] );
                 }
@@ -12750,7 +13666,7 @@ class Panel {
             }
         }
 
-        if( !this._inline_queued_container )
+        if( !this._inlineQueuedContainer )
         {
             if( this._currentBranch )
             {
@@ -12763,10 +13679,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;
     }
@@ -12779,7 +13695,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 = {} ) {
@@ -12800,10 +13716,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;
@@ -12819,27 +13735,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 );
@@ -12848,9 +13764,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 );
                 }
@@ -12867,54 +13783,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');
@@ -12937,7 +13853,7 @@ class Panel {
         return element;
     }
 
-    _searchWidgets( branchName, value ) {
+    _searchComponents( branchName, value ) {
 
         for( let b of this.branches )
         {
@@ -12946,8 +13862,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') )
                 {
@@ -12961,8 +13877,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 )
                 {
@@ -12972,7 +13888,7 @@ class Panel {
                     if(!name.includes(value)) continue;
                 }
 
-                // insert filtered widget
+                // insert filtered component
                 this.queuedContainer.appendChild( w.domEl );
             }
 
@@ -13043,13 +13959,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
         {
@@ -13064,8 +13980,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 );
     }
 
     /**
@@ -13080,18 +13996,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
@@ -13106,18 +14022,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]
@@ -13128,8 +14044,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 );
     }
 
     /**
@@ -13141,19 +14057,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
@@ -13161,16 +14077,17 @@ class Panel {
      * img: Path to image to show as button value
      * title: Text to show in native Element title
      * buttonClass: Class to add to the native button element
+     * mustConfirm: User must confirm trigger in a popover
      */
 
     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]
@@ -13181,8 +14098,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 );
     }
 
     /**
@@ -13197,13 +14114,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:
@@ -13216,13 +14133,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
      */
@@ -13248,15 +14165,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]
@@ -13275,43 +14192,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
@@ -13321,18 +14238,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
@@ -13342,26 +14259,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:
@@ -13369,13 +14286,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
@@ -13384,13 +14301,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:
@@ -13398,85 +14315,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
@@ -13484,18 +14401,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
@@ -13506,24 +14423,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
@@ -13544,43 +14461,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
@@ -13588,13 +14505,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
@@ -13605,29 +14522,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}
@@ -13637,13 +14554,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)
@@ -13658,30 +14575,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]
@@ -13699,14 +14616,14 @@ 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} dateString
+     * @param {String} name Component name
+     * @param {String} dateValue
      * @param {Function} callback
      * @param {Object} options:
      * hideName: Don't use name as label [false]
@@ -13715,22 +14632,35 @@ class Panel {
      * fromToday: Allow dates only from current day
      */
 
-    addDate( name, dateString, callback, options = { } ) {
-        const widget = new LX.DatePicker( name, dateString, callback, options );
-        return this._attachWidget( widget );
+    addDate( name, dateValue, callback, options = { } ) {
+        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 );
     }
 }
 
@@ -13765,7 +14695,7 @@ class Branch {
 
         this.closed = options.closed ?? false;
         this.root = root;
-        this.widgets = [];
+        this.components = [];
 
         // Create element
         var title = document.createElement( 'div' );
@@ -13836,8 +14766,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 );
             }
@@ -13848,7 +14778,7 @@ class Branch {
 
         dialog.branchData = {
             name: this.name,
-            widgets: this.widgets,
+            components: this.components,
             closed: this.closed,
             panel: this.panel,
             childIndex
@@ -13860,7 +14790,7 @@ class Branch {
     _addBranchSeparator() {
 
         const element = document.createElement('div');
-        element.className = "lexwidgetseparator";
+        element.className = "lexcomponentseparator";
         element.style.width = "100%";
         element.style.background = "none";
 
@@ -13913,7 +14843,7 @@ class Branch {
 
         function innerMouseUp(e)
         {
-            that._updateWidgets();
+            that._updateComponents();
 
             line.style.height = "0px";
 
@@ -13926,15 +14856,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 )
             {
@@ -13947,10 +14877,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 + " )";
@@ -14264,7 +15194,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 )
@@ -14838,9 +15776,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 )
                 {
@@ -14869,8 +15819,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" );
@@ -14952,6 +15908,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) => {
@@ -14960,10 +15924,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" );
                     }
                 });
             }
@@ -14982,8 +15946,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;
@@ -15001,8 +15965,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";
         }
     }
 }
@@ -15015,8 +15979,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;
 
     /**
@@ -15025,7 +15993,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 )
@@ -15143,9 +16112,9 @@ class AssetView {
             this.leftPanel.clear();
         }
 
-        if( this.rightPanel )
+        if( this.toolsPanel )
         {
-            this.rightPanel.clear();
+            this.toolsPanel.clear();
         }
     }
 
@@ -15257,7 +16226,7 @@ class AssetView {
     _setContentLayout( layoutMode ) {
 
         this.layout = layoutMode;
-
+        this.toolsPanel.refresh();
         this._refreshContent();
     }
 
@@ -15267,42 +16236,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;
@@ -15318,64 +16279,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();
@@ -15398,12 +16366,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) {
@@ -15426,7 +16394,7 @@ class AssetView {
 
                 itemEl.addEventListener("mousemove", e => {
 
-                    if( !isContentLayout )
+                    if( !isGridLayout )
                     {
                         return;
                     }
@@ -15455,14 +16423,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";
@@ -15506,11 +16474,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
@@ -15771,16 +16739,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();
     }
 
@@ -15855,6 +16827,8 @@ LX.AssetView = AssetView;
 
 class Tour {
 
+    static ACTIVE_TOURS = [];
+
     /**
      * @constructor Tour
      * @param {Array} steps
@@ -15877,11 +16851,21 @@ class Tour {
         this.verticalOffset = options.verticalOffset;
         this.radius = options.radius ?? 12;
 
-        this.tourContainer = LX.makeContainer( ["100%", "100%"], "tour-container" );
-        this.tourContainer.style.display = "none";
-        document.body.appendChild( this.tourContainer );
+        this.tourContainer = document.querySelector( ".tour-container" );
+        if( !this.tourContainer )
+        {
+            this.tourContainer = LX.makeContainer( ["100%", "100%"], "tour-container" );
+            this.tourContainer.style.display = "none";
+            document.body.appendChild( this.tourContainer );
 
-        this.tourMask = LX.makeContainer( ["100%", "100%"], "tour-mask" );
+            window.addEventListener( "resize", () => {
+
+                for( const tour of Tour.ACTIVE_TOURS )
+                {
+                    tour._showStep( 0 );
+                }
+            } );
+        }
     }
 
     /**
@@ -15892,14 +16876,10 @@ class Tour {
 
         this.currentStep = 0;
 
-        if ( this.useModal )
-        {
-            this.tourMask.style.display = "block";
-            this.tourContainer.appendChild( this.tourMask );
-        }
-
         this.tourContainer.style.display = "block";
 
+        Tour.ACTIVE_TOURS.push( this );
+
         this._showStep( 0 );
     }
 
@@ -15911,12 +16891,19 @@ class Tour {
 
         if( this.useModal )
         {
-            this.tourMask.style.display = "none";
-            this.tourContainer.removeChild( this.tourMask );
+            this.tourMask.remove();
+            this.tourMask = undefined;
         }
 
         this._popover?.destroy();
 
+        const index = Tour.ACTIVE_TOURS.indexOf( this );
+        if( index !== -1 )
+        {
+            Tour.ACTIVE_TOURS.splice( index, 1 );
+        }
+
+        this.tourContainer.innerHTML = "";
         this.tourContainer.style.display = "none";
     }
 
@@ -15934,7 +16921,11 @@ class Tour {
         const prevStep = this.steps[ this.currentStep - 1 ];
         const nextStep = this.steps[ this.currentStep + 1 ];
 
-        this._generateMask( step.reference );
+        if( this.useModal )
+        {
+            this._generateMask( step.reference );
+        }
+
         this._createHighlight( step, prevStep, nextStep );
     }
 
@@ -15942,7 +16933,10 @@ class Tour {
     // using a fullscreen SVG with "rect" elements
     _generateMask( reference ) {
 
-        this.tourMask.innerHTML = ""; // Clear previous content
+        this.tourContainer.innerHTML = ""; // Clear previous content
+
+        this.tourMask = LX.makeContainer( ["100%", "100%"], "tour-mask" );
+        this.tourContainer.appendChild( this.tourMask );
 
         const svg = document.createElementNS( "http://www.w3.org/2000/svg", "svg" );
         svg.style.width = "100%";
@@ -15972,7 +16966,7 @@ class Tour {
             const rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
             rect.setAttribute( "x", 0 );
             rect.setAttribute( "y", 0 );
-            rect.setAttribute( "width", boundingX - hOffset );
+            rect.setAttribute( "width", Math.max( 0, boundingX - hOffset ) );
             rect.setAttribute( "height", window.innerHeight );
             rect.setAttribute( "stroke", "none" );
             clipPath.appendChild( rect );
@@ -15983,8 +16977,8 @@ class Tour {
             const rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
             rect.setAttribute( "x", boundingX - hOffset );
             rect.setAttribute( "y", 0 );
-            rect.setAttribute( "width", boundingWidth + hOffset * 2 );
-            rect.setAttribute( "height", boundingY - vOffset );
+            rect.setAttribute( "width", Math.max( 0, boundingWidth + hOffset * 2 ) );
+            rect.setAttribute( "height", Math.max( 0, boundingY - vOffset ) );
             rect.setAttribute( "stroke", "none" );
             clipPath.appendChild( rect );
         }
@@ -15994,8 +16988,8 @@ class Tour {
             const rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
             rect.setAttribute( "x", boundingX - hOffset );
             rect.setAttribute( "y", boundingY + boundingHeight + vOffset );
-            rect.setAttribute( "width", boundingWidth + hOffset * 2 );
-            rect.setAttribute( "height", window.innerHeight - boundingY - boundingHeight - vOffset );
+            rect.setAttribute( "width", Math.max( 0, boundingWidth + hOffset * 2 ) );
+            rect.setAttribute( "height", Math.max( 0, window.innerHeight - boundingY - boundingHeight - vOffset ) );
             rect.setAttribute( "stroke", "none" );
             clipPath.appendChild( rect );
         }
@@ -16005,8 +16999,8 @@ class Tour {
             const rect = document.createElementNS( "http://www.w3.org/2000/svg", "rect" );
             rect.setAttribute( "x", boundingX + boundingWidth + hOffset );
             rect.setAttribute( "y", 0 );
-            rect.setAttribute( "width", window.innerWidth - boundingX - boundingWidth );
-            rect.setAttribute( "height", window.innerHeight );
+            rect.setAttribute( "width", Math.max( 0, window.innerWidth - boundingX - boundingWidth ) );
+            rect.setAttribute( "height", Math.max( 0, window.innerHeight ) );
             rect.setAttribute( "stroke", "none" );
             clipPath.appendChild( rect );
         }