lexgui 0.4.0 → 0.4.2

package/build/lexgui.js

@@ -12,7 +12,7 @@ console.warn( 'Script _build/lexgui.js_ is depracated and will be removed soon.
 */
 
 var LX = {
-    version: "0.4.0",
+    version: "0.4.2",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -24,13 +24,13 @@ LX.MOUSE_LEFT_CLICK     = 0;
 LX.MOUSE_MIDDLE_CLICK   = 1;
 LX.MOUSE_RIGHT_CLICK    = 2;
 
-LX.MOUSE_DOUBLE_CLICK = 2;
-LX.MOUSE_TRIPLE_CLICK = 3;
+LX.MOUSE_DOUBLE_CLICK   = 2;
+LX.MOUSE_TRIPLE_CLICK   = 3;
 
-LX.CURVE_MOVEOUT_CLAMP = 0;
+LX.CURVE_MOVEOUT_CLAMP  = 0;
 LX.CURVE_MOVEOUT_DELETE = 1;
 
-LX.DRAGGABLE_Z_INDEX = 101;
+LX.DRAGGABLE_Z_INDEX    = 101;
 
 function clamp( num, min, max ) { return Math.min( Math.max( num, min ), max ); }
 function round( number, precision ) { return precision == 0 ? Math.floor( number ) : +(( number ).toFixed( precision ?? 2 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' )); }
@@ -169,7 +169,6 @@ function getThemeColor( colorName )
 {
     const r = getComputedStyle( document.querySelector( ':root' ) );
     const value = r.getPropertyValue( '--' + colorName );
-    const theme = document.documentElement.getAttribute( "data-theme" );
 
     if( value.includes( "light-dark" ) )
     {
@@ -243,7 +242,7 @@ LX.rgbToHex = rgbToHex;
 /**
  * @method measureRealWidth
  * @description Measure the pixel width of a text
- * @param {Object} value Text to measure
+ * @param {Number} value Text to measure
  * @param {Number} paddingPlusMargin Padding offset
  */
 function measureRealWidth( value, paddingPlusMargin = 8 )
@@ -443,7 +442,7 @@ function makeCollapsible( domEl, content, parent, options = { } )
     actionIcon.dataset[ "collapsed" ] = collapsed;
     actionIcon.style.marginLeft = "auto";
 
-    actionIcon.addEventListener( "click", function(e) {
+    actionIcon.addEventListener( "click", function( e ) {
         e.preventDefault();
         e.stopPropagation();
         if( this.dataset[ "collapsed" ] )
@@ -574,12 +573,13 @@ LX.makeCodeSnippet = makeCodeSnippet;
  * @description Gets an SVG element using one of LX.ICONS
  * @param {String} iconName
  * @param {String} iconTitle
+ * @param {String} extraClass
  */
-function makeIcon( iconName, iconTitle )
+function makeIcon( iconName, iconTitle, extraClass = "" )
 {
     const icon = document.createElement( "a" );
     icon.title = iconTitle ?? "";
-    icon.className = "lexicon";
+    icon.className = "lexicon " + extraClass;
     icon.innerHTML = LX.ICONS[ iconName ] ?? "";
     return icon;
 }
@@ -790,17 +790,17 @@ function _createCommandbar( root )
         searchItem.entry_name = t;
         searchItem.callback = c;
         searchItem.item = i;
-        searchItem.addEventListener('click', function(e) {
+        searchItem.addEventListener('click', function( e ) {
             this.callback.call( window, this.entry_name );
             LX.setCommandbarState( false );
             _resetBar( true );
         });
-        searchItem.addEventListener('mouseenter', function(e) {
+        searchItem.addEventListener('mouseenter', function( e ) {
             commandbar.querySelectorAll(".hovered").forEach(e => e.classList.remove('hovered'));
             this.classList.add('hovered');
             hoverElId = allItems.indexOf( this );
         });
-        searchItem.addEventListener('mouseleave', function(e) {
+        searchItem.addEventListener('mouseleave', function( e ) {
             this.classList.remove('hovered');
         });
         allItems.push( searchItem );
@@ -881,7 +881,7 @@ function _createCommandbar( root )
         }
     }
 
-    input.addEventListener('input', function(e) {
+    input.addEventListener('input', function( e ) {
         commandbar._addElements( this.value.toLowerCase() );
     });
 
@@ -930,7 +930,19 @@ function init( options = { } )
         this.container = document.getElementById( options.container );
     }
 
-    document.documentElement.setAttribute( "data-strictVP", ( options.strictViewport ?? true ) ? "true" : "false" );
+    this.usingStrictViewport = options.strictViewport ?? true;
+    document.documentElement.setAttribute( "data-strictVP", ( this.usingStrictViewport ) ? "true" : "false" );
+
+    if( !this.usingStrictViewport )
+    {
+        document.addEventListener( "scroll", e => {
+            // Get all active menuboxes
+            const mbs = document.body.querySelectorAll( ".lexmenubox" );
+            mbs.forEach( ( mb ) => {
+                mb._updatePosition();
+            } );
+        } );
+    }
 
     this.commandbar = _createCommandbar( this.container );
 
@@ -1297,7 +1309,7 @@ LX.makeContainer = makeContainer;
 
 class IEvent {
 
-    constructor(name, value, domEvent) {
+    constructor( name, value, domEvent ) {
         this.name = name;
         this.value = value;
         this.domEvent = domEvent;
@@ -2067,7 +2079,7 @@ class Area {
         }
 
         // Generate DOM elements after adding all entries
-        sidebar._build();
+        sidebar.update();
 
         LX.menubars.push( sidebar );
 
@@ -2370,17 +2382,17 @@ class Tabs {
 
         let that = this;
 
-        container.addEventListener("dragenter", function(e) {
+        container.addEventListener("dragenter", function( e ) {
             e.preventDefault(); // Prevent default action (open as link for some elements)
             this.classList.add("dockingtab");
         });
 
-        container.addEventListener("dragleave", function(e) {
+        container.addEventListener("dragleave", function( e ) {
             e.preventDefault(); // Prevent default action (open as link for some elements)
             this.classList.remove("dockingtab");
         });
 
-        container.addEventListener("drop", function(e) {
+        container.addEventListener("drop", function( e ) {
             e.preventDefault(); // Prevent default action (open as link for some elements)
 
             const tab_id = e.dataTransfer.getData("source");
@@ -2677,6 +2689,195 @@ class Menubar {
         this.shorts = { };
     }
 
+    _resetMenubar() {
+
+        // Menu entries are in the menubar..
+        this.root.querySelectorAll(".lexmenuentry").forEach( _entry => {
+            _entry.classList.remove( 'selected' );
+            _entry.built = false;
+        } );
+
+        // Menuboxes are in the root area!
+        LX.root.querySelectorAll(".lexmenubox").forEach(e => e.remove());
+
+        // Next time we need to click again
+        this.focused = false;
+    }
+
+    _createSubmenu( o, k, c, d ) {
+
+        let menuElement = document.createElement('div');
+        menuElement.className = "lexmenubox";
+        menuElement.tabIndex = "0";
+        c.currentMenu = menuElement;
+        menuElement.parentEntry = c;
+
+        const isSubMenu = c.classList.contains( "lexmenuboxentry" );
+        if( isSubMenu )
+        {
+            menuElement.dataset[ "submenu" ] = true;
+        }
+
+        menuElement._updatePosition = () => {
+
+            // Remove transitions for this change..
+            const transition = menuElement.style.transition;
+            menuElement.style.transition = "none";
+            flushCss( menuElement );
+
+            doAsync( () => {
+                let rect = c.getBoundingClientRect();
+                rect.x += document.scrollingElement.scrollLeft;
+                rect.y += document.scrollingElement.scrollTop;
+                menuElement.style.left = ( isSubMenu ? ( rect.x + rect.width ) : rect.x ) + "px";
+                menuElement.style.top = ( isSubMenu ? rect.y : ( ( rect.y + rect.height ) ) - 4 ) + "px";
+
+                menuElement.style.transition = transition;
+            } );
+        };
+
+        menuElement._updatePosition();
+
+        doAsync( () => {
+            menuElement.dataset[ "open" ] = true;
+        }, 10 );
+
+        LX.root.appendChild( menuElement );
+
+        for( var i = 0; i < o[ k ].length; ++i )
+        {
+            const subitem = o[ k ][ i ];
+            const subkey = Object.keys( subitem )[ 0 ];
+            const hasSubmenu = subitem[ subkey ].length;
+            const isCheckbox = subitem[ 'type' ] == 'checkbox';
+            let subentry = document.createElement('div');
+            subentry.className = "lexmenuboxentry";
+            subentry.className += (i == o[k].length - 1 ? " last" : "") + ( subitem.disabled ? " disabled" : "" );
+
+            if( subkey == '' )
+            {
+                subentry.className = " lexseparator";
+            }
+            else
+            {
+                subentry.id = subkey;
+                let subentrycont = document.createElement('div');
+                subentrycont.innerHTML = "";
+                subentrycont.classList = "lexmenuboxentrycontainer";
+                subentry.appendChild(subentrycont);
+                const icon = this.icons[ subkey ];
+                if( isCheckbox )
+                {
+                    subentrycont.innerHTML += "<input type='checkbox' >";
+                }
+                else if( icon )
+                {
+                    subentrycont.innerHTML += "<a class='" + icon + " fa-sm'></a>";
+                }
+                else
+                {
+                    subentrycont.innerHTML += "<a class='fa-solid fa-sm noicon'></a>";
+                    subentrycont.classList.add( "noicon" );
+
+                }
+                subentrycont.innerHTML += "<div class='lexentryname'>" + subkey + "</div>";
+            }
+
+            let checkboxInput = subentry.querySelector('input');
+            if( checkboxInput )
+            {
+                checkboxInput.checked = subitem.checked ?? false;
+                checkboxInput.addEventListener('change', e => {
+                    subitem.checked = checkboxInput.checked;
+                    const f = subitem[ 'callback' ];
+                    if( f )
+                    {
+                        f.call( this, subitem.checked, subkey, subentry );
+                        this._resetMenubar();
+                    }
+                    e.stopPropagation();
+                    e.stopImmediatePropagation();
+                })
+            }
+
+            menuElement.appendChild( subentry );
+
+            // Nothing more for separators
+            if( subkey == '' )
+            {
+                continue;
+            }
+
+            menuElement.addEventListener('keydown', e => {
+                e.preventDefault();
+                let short = this.shorts[ subkey ];
+                if(!short) return;
+                // check if it's a letter or other key
+                short = short.length == 1 ? short.toLowerCase() : short;
+                if( short == e.key )
+                {
+                    subentry.click()
+                }
+            });
+
+            // Add callback
+            subentry.addEventListener("click", e => {
+                if( checkboxInput )
+                {
+                    subitem.checked = !subitem.checked;
+                }
+                const f = subitem[ 'callback' ];
+                if( f )
+                {
+                    f.call( this, checkboxInput ? subitem.checked : subkey, checkboxInput ? subkey : subentry );
+                    this._resetMenubar();
+                }
+                e.stopPropagation();
+                e.stopImmediatePropagation();
+            });
+
+            // Add icon if has submenu, else check for shortcut
+            if( !hasSubmenu)
+            {
+                if( this.shorts[ subkey ] )
+                {
+                    let shortEl = document.createElement('div');
+                    shortEl.className = "lexentryshort";
+                    shortEl.innerText = this.shorts[ subkey ];
+                    subentry.appendChild( shortEl );
+                }
+                continue;
+            }
+
+            let submenuIcon = document.createElement('a');
+            submenuIcon.className = "fa-solid fa-angle-right fa-xs";
+            subentry.appendChild( submenuIcon );
+
+            subentry.addEventListener("mouseover", e => {
+                if( subentry.built )
+                {
+                    return;
+                }
+                subentry.built = true;
+                this._createSubmenu( subitem, subkey, subentry, ++d );
+                e.stopPropagation();
+            });
+
+            subentry.addEventListener("mouseleave", e => {
+                if( subentry.currentMenu && ( subentry.currentMenu != e.toElement ) )
+                {
+                    d = -1; // Reset depth
+                    delete subentry.built;
+                    subentry.currentMenu.remove();
+                    delete subentry.currentMenu;
+                }
+            });
+        }
+
+        // Set final width
+        menuElement.style.width = menuElement.offsetWidth + "px";
+    }
+
     /**
      * @method add
      * @param {Object} options:
@@ -2701,7 +2902,6 @@ class Menubar {
         this.shorts[ lastPath ] = options.short;
 
         let idx = 0;
-        let that = this;
 
         const _insertEntry = ( token, list ) => {
             if( token == undefined )
@@ -2780,176 +2980,11 @@ class Menubar {
                 }
             }
 
-            const _resetMenubar = function() {
-                // Menu entries are in the menubar..
-                that.root.querySelectorAll(".lexmenuentry").forEach( _entry => {
-                    _entry.classList.remove( 'selected' );
-                    _entry.built = false;
-                } );
-                // Menuboxes are in the root area!
-                LX.root.querySelectorAll(".lexmenubox").forEach(e => e.remove());
-                // Next time we need to click again
-                that.focused = false;
-            };
-
-            const create_submenu = function( o, k, c, d ) {
-
-                let menuElement = document.createElement('div');
-                menuElement.className = "lexmenubox";
-                menuElement.tabIndex = "0";
-                c.currentMenu = menuElement;
-                const isSubMenu = c.classList.contains( "lexmenuboxentry" );
-                if( isSubMenu ) menuElement.dataset[ "submenu" ] = true;
-                var rect = c.getBoundingClientRect();
-                menuElement.style.left = ( isSubMenu ? ( rect.x + rect.width ) : rect.left ) + "px";
-                menuElement.style.top = ( isSubMenu ? rect.y : rect.bottom - 4 ) + "px";
-                rect = menuElement.getBoundingClientRect();
-
-                doAsync( () => {
-                    menuElement.dataset[ "open" ] = true;
-                }, 10 );
-
-                LX.root.appendChild( menuElement );
-
-                for( var i = 0; i < o[ k ].length; ++i )
-                {
-                    const subitem = o[ k ][ i ];
-                    const subkey = Object.keys( subitem )[ 0 ];
-                    const hasSubmenu = subitem[ subkey ].length;
-                    const isCheckbox = subitem[ 'type' ] == 'checkbox';
-                    let subentry = document.createElement('div');
-                    subentry.className = "lexmenuboxentry";
-                    subentry.className += (i == o[k].length - 1 ? " last" : "") + ( subitem.disabled ? " disabled" : "" );
-
-                    if( subkey == '' )
-                    {
-                        subentry.className = " lexseparator";
-                    }
-                    else
-                    {
-                        subentry.id = subkey;
-                        let subentrycont = document.createElement('div');
-                        subentrycont.innerHTML = "";
-                        subentrycont.classList = "lexmenuboxentrycontainer";
-                        subentry.appendChild(subentrycont);
-                        const icon = that.icons[ subkey ];
-                        if( isCheckbox )
-                        {
-                            subentrycont.innerHTML += "<input type='checkbox' >";
-                        }
-                        else if( icon )
-                        {
-                            subentrycont.innerHTML += "<a class='" + icon + " fa-sm'></a>";
-                        }
-                        else
-                        {
-                            subentrycont.innerHTML += "<a class='fa-solid fa-sm noicon'></a>";
-                            subentrycont.classList.add( "noicon" );
-
-                        }
-                        subentrycont.innerHTML += "<div class='lexentryname'>" + subkey + "</div>";
-                    }
-
-                    let checkboxInput = subentry.querySelector('input');
-                    if( checkboxInput )
-                    {
-                        checkboxInput.checked = subitem.checked ?? false;
-                        checkboxInput.addEventListener('change', e => {
-                            subitem.checked = checkboxInput.checked;
-                            const f = subitem[ 'callback' ];
-                            if( f )
-                            {
-                                f.call( this, subitem.checked, subkey, subentry );
-                                _resetMenubar();
-                            }
-                            e.stopPropagation();
-                            e.stopImmediatePropagation();
-                        })
-                    }
-
-                    menuElement.appendChild( subentry );
-
-                    // Nothing more for separators
-                    if( subkey == '' )
-                    {
-                        continue;
-                    }
-
-                    menuElement.addEventListener('keydown', function(e) {
-                        e.preventDefault();
-                        let short = that.shorts[ subkey ];
-                        if(!short) return;
-                        // check if it's a letter or other key
-                        short = short.length == 1 ? short.toLowerCase() : short;
-                        if( short == e.key )
-                        {
-                            subentry.click()
-                        }
-                    });
-
-                    // Add callback
-                    subentry.addEventListener("click", e => {
-                        if( checkboxInput )
-                        {
-                            subitem.checked = !subitem.checked;
-                        }
-                        const f = subitem[ 'callback' ];
-                        if( f )
-                        {
-                            f.call( this, checkboxInput ? subitem.checked : subkey, checkboxInput ? subkey : subentry );
-                            _resetMenubar();
-                        }
-                        e.stopPropagation();
-                        e.stopImmediatePropagation();
-                    });
-
-                    // Add icon if has submenu, else check for shortcut
-                    if( !hasSubmenu)
-                    {
-                        if( that.shorts[ subkey ] )
-                        {
-                            let shortEl = document.createElement('div');
-                            shortEl.className = "lexentryshort";
-                            shortEl.innerText = that.shorts[ subkey ];
-                            subentry.appendChild( shortEl );
-                        }
-                        continue;
-                    }
-
-                    let submenuIcon = document.createElement('a');
-                    submenuIcon.className = "fa-solid fa-angle-right fa-xs";
-                    subentry.appendChild( submenuIcon );
-
-                    subentry.addEventListener("mouseover", e => {
-                        if( subentry.built )
-                        {
-                            return;
-                        }
-                        subentry.built = true;
-                        create_submenu( subitem, subkey, subentry, ++d );
-                        e.stopPropagation();
-                    });
-
-                    subentry.addEventListener("mouseleave", (e) => {
-                        if( subentry.currentMenu && ( subentry.currentMenu != e.toElement ) )
-                        {
-                            d = -1; // Reset depth
-                            delete subentry.built;
-                            subentry.currentMenu.remove();
-                            delete subentry.currentMenu;
-                        }
-                    });
-                }
-
-                // Set final width
-                menuElement.style.width = menuElement.offsetWidth + "px";
-            };
-
             const _showEntry = () => {
-                _resetMenubar();
+                this._resetMenubar();
                 entry.classList.add( "selected" );
                 entry.built = true;
-                create_submenu( item, key, entry, -1 );
+                this._createSubmenu( item, key, entry, -1 );
             };
 
             entry.addEventListener("click", () => {
@@ -2980,22 +3015,22 @@ class Menubar {
                     return;
                 }
 
-                _resetMenubar();
+                this._resetMenubar();
             });
         }
     }
 
     /**
      * @method getButton
-     * @param {String} title
+     * @param {String} name
      */
 
-    getButton( title ) {
-        return this.buttons[ title ];
+    getButton( name ) {
+        return this.buttons[ name ];
     }
 
     /**
-     * @method getSubitems: recursive method to find subentries of a menu entry
+     * @method getSubitems
      * @param {Object} item: parent item
      * @param {Array} tokens: split path strings
     */
@@ -3028,6 +3063,7 @@ class Menubar {
      * @param {String} path
     */
     getItem( path ) {
+
         // process path
         const tokens = path.split("/");
 
@@ -3036,100 +3072,118 @@ class Menubar {
 
     /**
      * @method setButtonIcon
-     * @param {String} title
+     * @param {String} name
      * @param {String} icon
+     * @param {Function} callback
+     * @param {Object} options
      */
 
-    setButtonIcon( title, icon, callback, options = {} ) {
+    setButtonIcon( name, icon, callback, options = {} ) {
 
-        const button = this.buttons[ title ];
+        if( !name )
+        {
+            throw( "Set Button Name!" );
+        }
+
+        let button = this.buttons[ name ];
         if( button )
         {
             button.querySelector('a').className = "fa-solid" + " " + icon + " lexicon";
+            return;
         }
-        else
+
+        // Otherwise, create it
+        button = document.createElement('div');
+        const disabled = options.disabled ?? false;
+        button.className = "lexmenubutton main" + (disabled ? " disabled" : "");
+        button.title = name;
+        button.innerHTML = "<a class='" + icon + " lexicon'></a>";
+
+        if( options.float == "right" )
         {
-            let button = document.createElement('div');
-            const disabled = options.disabled ?? false;
-            button.className = "lexmenubutton" + (disabled ? " disabled" : "");
-            button.title = title ?? "";
-            button.innerHTML = "<a class='" + icon + " lexicon' style='font-size:x-large;'></a>";
-            button.style.padding = "5px 10px";
-            button.style.maxHeight = "calc(100% - 10px)";
-            button.style.alignItems = "center";
+            button.right = true;
+        }
 
-            if( options.float == "right" )
-            {
-                button.right = true;
-            }
+        if( this.root.lastChild && this.root.lastChild.right )
+        {
+            this.root.lastChild.before( button );
+        }
+        else if( options.float == "left" )
+        {
+            this.root.prepend( button );
+        }
+        else
+        {
+            this.root.appendChild( button );
+        }
 
-            if( this.root.lastChild && this.root.lastChild.right )
-            {
-                this.root.lastChild.before( button );
-            }
-            else if( options.float == "left" )
+        const _b = button.querySelector('a');
+        _b.addEventListener("click", (e) => {
+            if( callback && !disabled )
             {
-                this.root.prepend( button );
-            }
-            else
-            {
-                this.root.appendChild( button );
+                callback.call( this, _b, e );
             }
+        });
 
-            const _b = button.querySelector('a');
-            _b.addEventListener("click", (e) => {
-                if(callback && !disabled)
-                    callback.call( this, _b, e );
-            });
-        }
+        this.buttons[ name ] = button;
     }
 
     /**
      * @method setButtonImage
-     * @param {String} title
+     * @param {String} name
      * @param {String} src
+     * @param {Function} callback
+     * @param {Object} options
      */
 
-    setButtonImage( title, src, callback, options = {} ) {
-        const button = this.buttons[ title ];
+    setButtonImage( name, src, callback, options = {} ) {
+
+        if( !name )
+        {
+            throw( "Set Button Name!" );
+        }
+
+        let button = this.buttons[ name ];
         if( button )
         {
-            button.querySelector('a').className = "fa-solid" + " " + icon + " lexicon";
+            button.querySelector('img').src = src;
+            return;
         }
-        else
+
+        // Otherwise, create it
+        button = document.createElement('div');
+        const disabled = options.disabled ?? false;
+        button.className = "lexmenubutton" + (disabled ? " disabled" : "");
+        button.title = name;
+        button.innerHTML = "<a><image src='" + src + "' class='lexicon' style='height:32px;'></a>";
+
+        if( options.float == "right" )
         {
-            let button = document.createElement('div');
-            const disabled = options.disabled ?? false;
-            button.className = "lexmenubutton" + (disabled ? " disabled" : "");
-            button.title = title ?? "";
-            button.innerHTML = "<a><image src='" + src + "' class='lexicon' style='height:32px;'></a>";
-            button.style.padding = "5px";
-            button.style.alignItems = "center";
+            button.right = true;
+        }
 
-            if( options.float == "right" )
-            {
-                button.right = true;
-            }
+        if( this.root.lastChild && this.root.lastChild.right )
+        {
+            this.root.lastChild.before( button );
+        }
+        else if( options.float == "left" )
+        {
+            this.root.prepend( button );
+        }
+        else
+        {
+            this.root.appendChild( button );
+        }
 
-            if( this.root.lastChild && this.root.lastChild.right )
+        const _b = button.querySelector('a');
+        _b.addEventListener("click", (e) => {
+            if( callback && !disabled )
             {
-                this.root.lastChild.before( button );
-            }
-            else if( options.float == "left" )
-            {
-                this.root.prepend( button );
-            }
-            else
-            {
-                this.root.appendChild( button );
+                callback.call( this, _b, e );
             }
+        });
 
-            const _b = button.querySelector('a');
-            _b.addEventListener("click", (e) => {
-                if(callback && !disabled)
-                    callback.call( this, _b, e );
-            });
-        }
+        this.buttons[ name ] = button;
     }
 
     /**
@@ -3235,20 +3289,21 @@ class SideBar {
 
     /**
      * @param {Object} options
-     * inset: TODO
-     * filter: TODO
+     * filter: Add search bar to filter entries [false]
      * skipHeader: Do not use sidebar header [false]
      * headerImg: Image to be shown as avatar
      * headerIcon: Icon to be shown as avatar (from LX.ICONS)
-     * headerTitle
-     * headerSubtitle
+     * headerTitle: Header title
+     * headerSubtitle: Header subtitle
+     * header: HTMLElement to add a custom header
      * skipFooter: Do not use sidebar footer [false]
      * footerImg: Image to be shown as avatar
      * footerIcon: Icon to be shown as avatar (from LX.ICONS)
-     * footerTitle
-     * footerSubtitle
+     * footerTitle: Footer title
+     * footerSubtitle: Footer subtitle
+     * footer: HTMLElement to add a custom footer
      * collapsable: Sidebar can toggle between collapsed/expanded [true]
-     * collapseToIcons: When Sidebar collapses, icons remains visible  [true]
+     * collapseToIcons: When Sidebar collapses, icons remains visible [true]
      * onHeaderPressed: Function to call when header is pressed
      * onFooterPressed: Function to call when footer is pressed
      */
@@ -3258,12 +3313,12 @@ class SideBar {
         this.root = document.createElement( 'div' );
         this.root.className = "lexsidebar";
 
-        window.sidebar = this;
-
         this.collapsable = options.collapsable ?? true;
-        this.collapseWidth = ( options.collapseToIcons ?? true ) ? "58px" : "0px";
+        this._collapseWidth = ( options.collapseToIcons ?? true ) ? "58px" : "0px";
         this.collapsed = false;
 
+        this.filterString = "";
+
         doAsync( () => {
 
             this.root.parentElement.ogWidth = this.root.parentElement.style.width;
@@ -3276,64 +3331,19 @@ class SideBar {
                 }
             });
 
-        }, 100 );
-
-        // This account for header, footer and all inner paddings
-        let contentOffset = 32;
+        }, 10 );
 
         // Header
         if( !( options.skipHeader ?? false ) )
         {
-            this.header = document.createElement( 'div' );
+            this.header = options.header ?? this._generateDefaultHeader( options );
+            console.assert( this.header.constructor === HTMLDivElement, "Use an HTMLDivElement to build your custom header" );
             this.header.className = "lexsidebarheader";
             this.root.appendChild( this.header );
 
-            this.header.addEventListener( "click", e => {
-                if( this.collapsed )
-                {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this.toggleCollapsed();
-                }
-                else if( options.onHeaderPressed )
-                {
-                    options.onHeaderPressed( e );
-                }
-            } );
-
-            const avatar = document.createElement( 'span' );
-            avatar.className = "lexavatar";
-            this.header.appendChild( avatar );
-
-            if( options.headerImage )
-            {
-                const avatarImg = document.createElement( 'img' );
-                avatarImg.src = options.headerImage;
-                avatar.appendChild( avatarImg );
-            }
-            else if( options.headerIcon )
-            {
-                const avatarIcon = LX.makeIcon( options.headerIcon );
-                avatar.appendChild( avatarIcon );
-            }
-
-            // Info
-            {
-                const info = document.createElement( 'div' );
-                this.header.appendChild( info );
-
-                const infoText = document.createElement( 'span' );
-                infoText.innerHTML = options.headerTitle ?? "";
-                info.appendChild( infoText );
-
-                const infoSubtext = document.createElement( 'span' );
-                infoSubtext.innerHTML = options.headerSubtitle ?? "";
-                info.appendChild( infoSubtext );
-            }
-
             if( this.collapsable )
             {
-                const icon = LX.makeIcon( "Sidebar", "Toggle Sidebar" );
+                const icon = LX.makeIcon( "Sidebar", "Toggle Sidebar", "toggler" );
                 this.header.appendChild( icon );
 
                 icon.addEventListener( "click", (e) => {
@@ -3342,8 +3352,18 @@ class SideBar {
                     this.toggleCollapsed();
                 } );
             }
+        }
 
-            contentOffset += 52;
+        // Entry filter
+        if( ( options.filter ?? false ) )
+        {
+            const panel = new Panel();
+            panel.addText(null, "", (value, event) => {
+                this.filterString = value;
+                this.update();
+            }, { placeholder: "Search...", icon: "fa-solid fa-magnifying-glass" });
+            this.filter = panel.root.childNodes[ 0 ];
+            this.root.appendChild( this.filter );
         }
 
         // Content
@@ -3356,78 +3376,143 @@ class SideBar {
         // Footer
         if( !( options.skipFooter ?? false ) )
         {
-            this.footer = document.createElement( 'div' );
+            this.footer = options.footer ?? this._generateDefaultFooter( options );
+            console.assert( this.footer.constructor === HTMLDivElement, "Use an HTMLDivElement to build your custom footer" );
             this.footer.className = "lexsidebarfooter";
             this.root.appendChild( this.footer );
+        }
 
-            this.footer.addEventListener( "click", e => {
-                if( options.onFooterPressed )
-                {
-                    options.onFooterPressed( e );
-                }
-            } );
+        // Set width depending on header/footer
+        doAsync( () => {
+            // This account for header, footer and all inner paddings
+            const contentOffset = 32 + ( this.header?.offsetHeight ?? 0 ) +
+                ( this.filter?.offsetHeight ?? 0 ) +
+                ( this.footer?.offsetHeight ?? 0 );
+            this.content.style.height = `calc(100% - ${ contentOffset }px)`;
+        }, 10 );
+
+        this.items = [ ];
+        this.icons = { };
+        this.groups = { };
+    }
+
+    _generateDefaultHeader( options ) {
 
-            const avatar = document.createElement( 'span' );
-            avatar.className = "lexavatar";
-            this.footer.appendChild( avatar );
+        const header = document.createElement( 'div' );
 
-            if( options.footerImage )
+        header.addEventListener( "click", e => {
+            if( this.collapsed )
             {
-                const avatarImg = document.createElement( 'img' );
-                avatarImg.src = options.footerImage;
-                avatar.appendChild( avatarImg );
+                e.preventDefault();
+                e.stopPropagation();
+                this.toggleCollapsed();
             }
-            else if( options.footerIcon )
+            else if( options.onHeaderPressed )
             {
-                const avatarIcon = LX.makeIcon( options.footerIcon );
-                avatar.appendChild( avatarIcon );
+                options.onHeaderPressed( e );
             }
+        } );
 
-            // Info
+        const avatar = document.createElement( 'span' );
+        avatar.className = "lexavatar";
+        header.appendChild( avatar );
+
+        if( options.headerImage )
+        {
+            const avatarImg = document.createElement( 'img' );
+            avatarImg.src = options.headerImage;
+            avatar.appendChild( avatarImg );
+        }
+        else if( options.headerIcon )
+        {
+            const avatarIcon = LX.makeIcon( options.headerIcon );
+            avatar.appendChild( avatarIcon );
+        }
+
+        // Info
+        {
+            const info = document.createElement( 'div' );
+            info.className = "infodefault";
+            header.appendChild( info );
+
+            const infoText = document.createElement( 'span' );
+            infoText.innerHTML = options.headerTitle ?? "";
+            info.appendChild( infoText );
+
+            const infoSubtext = document.createElement( 'span' );
+            infoSubtext.innerHTML = options.headerSubtitle ?? "";
+            info.appendChild( infoSubtext );
+        }
+
+        return header;
+    }
+
+    _generateDefaultFooter( options ) {
+
+        const footer = document.createElement( 'div' );
+
+        footer.addEventListener( "click", e => {
+            if( options.onFooterPressed )
             {
-                const info = document.createElement( 'div' );
-                this.footer.appendChild( info );
+                options.onFooterPressed( e );
+            }
+        } );
 
-                const infoText = document.createElement( 'span' );
-                infoText.innerHTML = options.footerTitle ?? "";
-                info.appendChild( infoText );
+        const avatar = document.createElement( 'span' );
+        avatar.className = "lexavatar";
+        footer.appendChild( avatar );
+
+        if( options.footerImage )
+        {
+            const avatarImg = document.createElement( 'img' );
+            avatarImg.src = options.footerImage;
+            avatar.appendChild( avatarImg );
+        }
+        else if( options.footerIcon )
+        {
+            const avatarIcon = LX.makeIcon( options.footerIcon );
+            avatar.appendChild( avatarIcon );
+        }
 
-                const infoSubtext = document.createElement( 'span' );
-                infoSubtext.innerHTML = options.footerSubtitle ?? "";
-                info.appendChild( infoSubtext );
-            }
+        // Info
+        {
+            const info = document.createElement( 'div' );
+            info.className = "infodefault";
+            footer.appendChild( info );
 
-            const icon = LX.makeIcon( "MenuArrows" );
-            this.footer.appendChild( icon );
+            const infoText = document.createElement( 'span' );
+            infoText.innerHTML = options.footerTitle ?? "";
+            info.appendChild( infoText );
 
-            contentOffset += 52;
+            const infoSubtext = document.createElement( 'span' );
+            infoSubtext.innerHTML = options.footerSubtitle ?? "";
+            info.appendChild( infoSubtext );
         }
 
-        // Set width depending on header/footer
-        this.content.style.height = `calc(100% - ${ contentOffset }px)`;
+        const icon = LX.makeIcon( "MenuArrows" );
+        footer.appendChild( icon );
 
-        this.items = [ ];
-        this.icons = { };
-        this.groups = { };
+        return footer;
     }
 
     /**
      * @method toggleCollapsed
+     * @param {Boolean} force: Force collapsed state
      */
 
-    toggleCollapsed() {
+    toggleCollapsed( force ) {
 
         if( !this.collapsable )
         {
             return;
         }
 
-        this.collapsed = !this.collapsed;
+        this.collapsed = force ?? !this.collapsed;
 
         if( this.collapsed )
         {
             this.root.classList.add( "collapsing" );
-            this.root.parentElement.style.width = this.collapseWidth;
+            this.root.parentElement.style.width = this._collapseWidth;
         }
         else
         {
@@ -3436,6 +3521,11 @@ class SideBar {
             this.root.parentElement.style.width = this.root.parentElement.ogWidth;
         }
 
+        if( !this.resizeObserver )
+        {
+            throw( "Wait until ResizeObserver has been created!" );
+        }
+
         this.resizeObserver.observe( this.root.parentElement );
 
         doAsync( () => {
@@ -3475,9 +3565,9 @@ class SideBar {
      * @param {String} path
      * @param {Object} options:
      * callback: Function to call on each item
-     * icon: Entry icon
-     * collapsable: Add entry as a collapsable section
      * className: Add class to the entry DOM element
+     * collapsable: Add entry as a collapsable section
+     * icon: Entry icon
      */
 
     add( path, options = {} ) {
@@ -3494,7 +3584,6 @@ class SideBar {
         const lastPath = tokens[tokens.length - 1];
         this.icons[ lastPath ] = options.icon;
 
-
         let idx = 0;
 
         const _insertEntry = ( token, list ) => {
@@ -3549,10 +3638,19 @@ class SideBar {
         if( !entry )
             return;
 
-        entry.domEl.click();
+        entry.dom.click();
     }
 
-    _build() {
+    update() {
+
+        // Reset first
+
+        this.content.innerHTML = "";
+
+        for( let item of this.items )
+        {
+            delete item.dom;
+        }
 
         for( let item of this.items )
         {
@@ -3565,12 +3663,18 @@ class SideBar {
             }
 
             let key = Object.keys( item )[ 0 ];
+
+            if( this.filterString.length && !key.toLowerCase().includes( this.filterString.toLowerCase() ) )
+            {
+                continue;
+            }
+
             let pKey = key.replace( /\s/g, '' ).replaceAll( '.', '' );
             let currentGroup = null;
 
             let entry = document.createElement( 'div' );
             entry.className = "lexsidebarentry " + ( options.className ?? "" );
-            entry.id = pKey;
+            entry.id = item.name = pKey;
 
             if( item.group )
             {
@@ -3641,7 +3745,7 @@ class SideBar {
 
             let itemDom = document.createElement( 'div' );
             entry.appendChild( itemDom );
-            item.dom = itemDom;
+            item.dom = entry;
 
             if( options.type == "checkbox" )
             {
@@ -3697,6 +3801,8 @@ class SideBar {
                 entry.classList.add( "selected" );
             });
 
+            const isCollapsable = options.collapsable != undefined ? options.collapsable : ( options.collapsable || item[ key ].length );
+
             if( options.action )
             {
                 const actionIcon = LX.makeIcon( options.action.icon ?? "MoreHorizontal", options.action.name );
@@ -3709,7 +3815,7 @@ class SideBar {
                     if( f ) f.call( this, key, e );
                 } );
             }
-            else if( options.collapsable )
+            else if( isCollapsable )
             {
                 const collapsableContent = document.createElement( 'div' );
                 Object.assign( collapsableContent.style, { width: "100%", display: "none" } );
@@ -3744,7 +3850,12 @@ class SideBar {
             let subentryContainer = document.createElement( 'div' );
             subentryContainer.className = "lexsidebarsubentrycontainer";
 
-            if( currentGroup )
+            if( isCollapsable )
+            {
+                this.collapseContainer.appendChild( subentryContainer )
+                delete this.collapseContainer;
+            }
+            else if( currentGroup )
             {
                 currentGroup.appendChild( subentryContainer );
             }
@@ -3753,12 +3864,17 @@ class SideBar {
                 this.content.appendChild( subentryContainer );
             }
 
-            for( var i = 0; i < item[ key ].length; ++i )
+            for( let i = 0; i < item[ key ].length; ++i )
             {
                 const subitem = item[ key ][ i ];
                 const suboptions = subitem.options ?? {};
                 const subkey = Object.keys( subitem )[ 0 ];
 
+                if( this.filterString.length && !subkey.toLowerCase().includes( this.filterString.toLowerCase() ) )
+                {
+                    continue;
+                }
+
                 let subentry = document.createElement( 'div' );
                 subentry.innerHTML = `<span>${ subkey }</span>`;
 
@@ -3809,31 +3925,34 @@ class Widget {
     static CHECKBOX     = 5;
     static TOGGLE       = 6;
     static RADIO        = 7;
-    static COLOR        = 8;
-    static RANGE        = 9;
-    static NUMBER       = 10;
-    static TITLE        = 11;
-    static VECTOR       = 12;
-    static TREE         = 13;
-    static PROGRESS     = 14;
-    static FILE         = 15;
-    static LAYERS       = 16;
-    static ARRAY        = 17;
-    static LIST         = 18;
-    static TAGS         = 19;
-    static CURVE        = 20;
-    static CARD         = 21;
-    static IMAGE        = 22;
-    static CONTENT      = 23;
-    static CUSTOM       = 24;
-    static SEPARATOR    = 25;
-    static KNOB         = 26;
-    static SIZE         = 27;
-    static PAD          = 28;
-    static FORM         = 29;
-    static DIAL         = 30;
-    static COUNTER      = 31;
-    static TABLE        = 32;
+    static BUTTONS      = 8;
+    static COLOR        = 9;
+    static RANGE        = 10;
+    static NUMBER       = 11;
+    static TITLE        = 12;
+    static VECTOR       = 13;
+    static TREE         = 14;
+    static PROGRESS     = 15;
+    static FILE         = 16;
+    static LAYERS       = 17;
+    static ARRAY        = 18;
+    static LIST         = 19;
+    static TAGS         = 20;
+    static CURVE        = 21;
+    static CARD         = 22;
+    static IMAGE        = 23;
+    static CONTENT      = 24;
+    static CUSTOM       = 25;
+    static SEPARATOR    = 26;
+    static KNOB         = 27;
+    static SIZE         = 28;
+    static PAD          = 29;
+    static FORM         = 30;
+    static DIAL         = 31;
+    static COUNTER      = 32;
+    static TABLE        = 33;
+    static TABS         = 34;
+    static BLANK        = 35;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -3842,10 +3961,11 @@ class Widget {
         Widget.PROGRESS
     ];
 
-    constructor( name, type, options ) {
+    constructor( name, type, value, options ) {
         this.name = name;
         this.type = type;
         this.options = options;
+        this._initialValue = value;
     }
 
     value() {
@@ -3858,22 +3978,31 @@ class Widget {
         console.warn( "Can't get value of " + this.typeName() );
     }
 
-    set( value, skipCallback = false, signalName = "" ) {
+    set( value, skipCallback, event ) {
 
         if( this.onSetValue )
         {
-            return this.onSetValue( value, skipCallback );
+            let resetButton = this.domEl.querySelector( ".lexwidgetname .lexicon" );
+            if( resetButton )
+            {
+                resetButton.style.display = ( value != this.value() ? "block" : "none" );
+                resetButton.style.display = ( value != this._initialValue ? "block" : "none" );
+            }
+
+            return this.onSetValue( value, skipCallback ?? false, event );
         }
 
         console.warn("Can't set value of " + this.typeName());
     }
 
-    oncontextmenu(e) {
+    oncontextmenu( e ) {
 
-        if( Widget.NO_CONTEXT_TYPES.includes(this.type) )
+        if( Widget.NO_CONTEXT_TYPES.includes( this.type ) )
+        {
             return;
+        }
 
-        addContextMenu(this.typeName(), e, c => {
+        addContextMenu( this.typeName(), e, c => {
             c.add("Copy", () => { this.copy() });
             c.add("Paste", { disabled: !this._can_paste(), callback: () => { this.paste() } } );
         });
@@ -3930,6 +4059,8 @@ class Widget {
             case Widget.DIAL: return "Dial";
             case Widget.COUNTER: return "Counter";
             case Widget.TABLE: return "Table";
+            case Widget.TABS: return "Tabs";
+            case Widget.BLANK: return "Blank";
             case Widget.CUSTOM: return this.customName;
         }
 
@@ -3943,26 +4074,31 @@ class Widget {
 
 LX.Widget = Widget;
 
-function ADD_CUSTOM_WIDGET( custom_widget_name, options = {} )
+function ADD_CUSTOM_WIDGET( customWidgetName, options = {} )
 {
     let custom_idx = simple_guidGenerator();
 
-    Panel.prototype[ 'add' + custom_widget_name ] = function( name, instance, callback ) {
+    Panel.prototype[ 'add' + customWidgetName ] = function( name, instance, callback ) {
 
-        let widget = this.create_widget(name, Widget.CUSTOM, options);
-        widget.customName = custom_widget_name;
+        let widget = this._createWidget( Widget.CUSTOM, name, null, options );
+        widget.customName = customWidgetName;
         widget.customIdx = custom_idx;
+
         widget.onGetValue = () => {
             return instance;
         };
-        widget.onSetValue = ( newValue, skipCallback ) => {
+
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             instance = newValue;
             refresh_widget();
             element.querySelector( ".lexcustomitems" ).toggleAttribute( 'hidden', false );
-            if( !skipCallback ) this._trigger( new IEvent( name, instance, null ), callback );
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, instance, event ), callback );
+            }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
         element.style.flexWrap = "wrap";
 
         let container, custom_widgets;
@@ -3972,8 +4108,10 @@ function ADD_CUSTOM_WIDGET( custom_widget_name, options = {} )
 
         const refresh_widget = () => {
 
-            if(instance)
+            if( instance )
+            {
                 widget.instance = instance = Object.assign(deepCopy(default_instance), instance);
+            }
 
             if(container) container.remove();
             if(custom_widgets) custom_widgets.remove();
@@ -3985,7 +4123,7 @@ function ADD_CUSTOM_WIDGET( custom_widget_name, options = {} )
             this.queue(container);
 
             let buttonName = "<a class='fa-solid " + (options.icon ?? "fa-cube")  + "' style='float:left'></a>";
-            buttonName += custom_widget_name + (!instance ? " [empty]" : "");
+            buttonName += customWidgetName + (!instance ? " [empty]" : "");
             // Add alwayis icon to keep spacing right
             buttonName += "<a class='fa-solid " + (instance ? "fa-bars-staggered" : " ") + " menu' style='float:right; width:5%;'></a>";
 
@@ -3997,7 +4135,7 @@ function ADD_CUSTOM_WIDGET( custom_widget_name, options = {} )
                 else
                 {
                     addContextMenu(null, event, c => {
-                        c.add("New " + custom_widget_name, () => {
+                        c.add("New " + customWidgetName, () => {
                             instance = {};
                             refresh_widget();
                             element.querySelector(".lexcustomitems").toggleAttribute('hidden', false);
@@ -4109,10 +4247,10 @@ class NodeTree {
     _create_item( parent, node, level = 0, selectedId ) {
 
         const that = this;
-        const node_filter_input = this.domEl.querySelector( "#lexnodetree_filter" );
+        const nodeFilterInput = this.domEl.querySelector( "#lexnodetree_filter" );
 
         node.children = node.children ?? [];
-        if( node_filter_input && !node.id.includes( node_filter_input.value ) || (selectedId != undefined) && selectedId != node.id )
+        if( nodeFilterInput && !node.id.includes( nodeFilterInput.value ) || (selectedId != undefined) && selectedId != node.id )
         {
             for( var i = 0; i < node.children.length; ++i )
             {
@@ -4352,7 +4490,7 @@ class NodeTree {
         const nameInput = document.createElement( "input" );
         nameInput.toggleAttribute( "hidden", !node.rename );
         nameInput.value = node.id;
-        item.appendChild(nameInput);
+        item.appendChild( nameInput );
 
         if( node.rename )
         {
@@ -4360,7 +4498,7 @@ class NodeTree {
             nameInput.focus();
         }
 
-        nameInput.addEventListener("keyup", function(e){
+        nameInput.addEventListener("keyup", function( e ) {
             if( e.key == "Enter" )
             {
                 this.value = this.value.replace(/\s/g, '_');
@@ -4383,7 +4521,7 @@ class NodeTree {
             }
         });
 
-        nameInput.addEventListener("blur", function(e){
+        nameInput.addEventListener("blur", function( e ) {
             delete node.rename;
             that.refresh();
         });
@@ -4391,7 +4529,7 @@ class NodeTree {
         if( this.options.draggable ?? true )
         {
             // Drag nodes
-            if(parent) // Root doesn't move!
+            if( parent ) // Root doesn't move!
             {
                 item.addEventListener("dragstart", e => {
                     window.__tree_node_dragged = node;
@@ -4458,7 +4596,7 @@ class NodeTree {
         // Show/hide children
         if( isParent )
         {
-            item.querySelector('a.hierarchy').addEventListener("click", function(e) {
+            item.querySelector('a.hierarchy').addEventListener("click", function( e ) {
 
                 handled = true;
                 e.stopImmediatePropagation();
@@ -4476,40 +4614,44 @@ class NodeTree {
 
         // Add button icons
 
+        const inputContainer = document.createElement( "div" );
+        item.appendChild( inputContainer );
+
+        if( node.actions )
+        {
+            for( let i = 0; i < node.actions.length; ++i )
+            {
+                let a = node.actions[ i ];
+                let actionEl = document.createElement('a');
+                actionEl.className = "lexicon " + a.icon;
+                actionEl.title = a.name;
+                actionEl.addEventListener("click", function( e ) {
+                    a.callback( node, actionEl );
+                    e.stopPropagation();
+                });
+
+                inputContainer.appendChild( actionEl );
+            }
+        }
+
         if( !node.skipVisibility ?? false )
         {
-            let visibility = document.createElement('a');
-            visibility.className = "itemicon fa-solid fa-eye" + (!node.visible ? "-slash" : "");
+            let visibility = document.createElement( 'a' );
+            visibility.className = "lexicon fa-solid fa-eye" + ( !node.visible ? "-slash" : "" );
             visibility.title = "Toggle visible";
-            visibility.addEventListener("click", function(e) {
+            visibility.addEventListener("click", function( e ) {
                 e.stopPropagation();
                 node.visible = node.visible === undefined ? false : !node.visible;
-                this.className = "itemicon fa-solid fa-eye" + (!node.visible ? "-slash" : "");
+                this.className = "lexicon fa-solid fa-eye" + ( !node.visible ? "-slash" : "" );
                 // Trigger visibility event
                 if( that.onevent )
                 {
-                    const event = new TreeEvent(TreeEvent.NODE_VISIBILITY, node, node.visible);
+                    const event = new TreeEvent( TreeEvent.NODE_VISIBILITY, node, node.visible );
                     that.onevent( event );
                 }
             });
 
-            item.appendChild(visibility);
-        }
-
-        if( node.actions )
-        {
-            for( var i = 0; i < node.actions.length; ++i )
-            {
-                let a = node.actions[i];
-                var actionEl = document.createElement('a');
-                actionEl.className = "itemicon " + a.icon;
-                actionEl.title = a.name;
-                actionEl.addEventListener("click", function(e) {
-                    a.callback(node, actionEl);
-                    e.stopPropagation();
-                });
-                item.appendChild(actionEl);
-            }
+            inputContainer.appendChild( visibility );
         }
 
         if( selectedId != undefined && node.id == selectedId )
@@ -4570,28 +4712,35 @@ class Panel {
      */
 
     constructor( options = {} ) {
+
         var root = document.createElement('div');
         root.className = "lexpanel";
+
         if( options.id )
+        {
             root.id = options.id;
+        }
+
         if( options.className )
+        {
             root.className += " " + options.className;
+        }
 
         root.style.width = options.width || "calc( 100% - 6px )";
         root.style.height = options.height || "100%";
-        Object.assign(root.style, options.style ?? {});
+        Object.assign( root.style, options.style ?? {} );
 
         this._inline_widgets_left = -1;
         this._inline_queued_container = null;
 
         this.root = root;
 
-        this.onevent = (e => {});
+        this.onevent = ( e => {} );
 
         // branches
-        this.branch_open = false;
+        this._branchOpen = false;
         this.branches = [];
-        this.current_branch = null;
+        this._currentBranch = null;
         this.widgets = {};
         this._queue = []; // Append widgets in other locations
     }
@@ -4632,13 +4781,9 @@ class Panel {
 
     attach( content ) {
 
-        if(!content)
-        throw("no content to attach");
-
+        console.assert( content, "No content to attach!" );
         content.parent = this;
-        let element = content.root ? content.root : content;
-        //this.root.style.maxHeight = "800px"; // limit size when attaching stuff from outside
-        this.root.appendChild( element );
+        this.root.appendChild( content.root ? content.root : content );
     }
 
     /**
@@ -4647,18 +4792,18 @@ class Panel {
 
     clear() {
 
-        this.branch_open = false;
+        this._branchOpen = false;
         this.branches = [];
-        this.current_branch = null;
+        this._currentBranch = null;
 
         for( let w in this.widgets )
         {
-            if( this.widgets[w].options && this.widgets[w].options.signal )
+            if( this.widgets[ w ].options && this.widgets[ w ].options.signal )
             {
-                const signal = this.widgets[w].options.signal;
+                const signal = this.widgets[ 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.widgets[ w ] )
                     {
                         LX.signals[signal] = [...LX.signals[signal].slice(0, i), ...LX.signals[signal].slice(i+1)];
                     }
@@ -4670,7 +4815,7 @@ class Panel {
         {
             for( let w = 0; w < this.signals.length; w++ )
             {
-                let widget = Object.values(this.signals[w])[0];
+                let widget = Object.values(this.signals[ w ])[0];
                 let signal = widget.options.signal;
                 for( let i = 0; i < LX.signals[signal].length; i++ )
                 {
@@ -4695,7 +4840,7 @@ class Panel {
     sameLine( number ) {
 
         this._inline_queued_container = this.queuedContainer;
-        this._inline_widgets_left = number || Infinity;
+        this._inline_widgets_left = ( number || Infinity );
     }
 
     /**
@@ -4705,7 +4850,7 @@ class Panel {
 
     endLine( justifyContent ) {
 
-        if( this._inline_widgets_left == -1)
+        if( this._inline_widgets_left == -1 )
         {
             console.warn("No pending widgets to be inlined!");
             return;
@@ -4727,27 +4872,37 @@ class Panel {
         // Push all elements single element or Array[element, container]
         for( let item of this._inlineWidgets )
         {
-            const is_pair = item.constructor == Array;
+            const isPair = ( item.constructor == Array );
 
-            if(is_pair)
+            if( isPair )
             {
                 // eg. an array, inline items appended later to
-                if( this._inline_queued_container)
-                    this._inlineContainer.appendChild( item[0] );
+                if( this._inline_queued_container )
+                {
+                    this._inlineContainer.appendChild( item[ 0 ] );
+                }
                 // eg. a dropdown, item is appended to parent, not to inline cont.
                 else
-                    item[1].appendChild(item[0]);
+                {
+                    item[ 1 ].appendChild( item[ 0 ] );
+                }
             }
             else
+            {
                 this._inlineContainer.appendChild( item );
+            }
         }
 
-        if(!this._inline_queued_container)
+        if( !this._inline_queued_container )
         {
-            if( this.current_branch)
-                this.current_branch.content.appendChild( this._inlineContainer );
+            if( this._currentBranch )
+            {
+                this._currentBranch.content.appendChild( this._inlineContainer );
+            }
             else
+            {
                 this.root.appendChild( this._inlineContainer );
+            }
         }
         else
         {
@@ -4771,20 +4926,24 @@ class Panel {
 
     branch( name, options = {} ) {
 
-        if( this.branch_open )
+        if( this._branchOpen )
+        {
             this.merge();
+        }
 
         // Create new branch
-        var branch = new Branch(name, options);
+        var branch = new Branch( name, options );
         branch.panel = this;
 
         // Declare new open
-        this.branch_open = true;
-        this.current_branch = branch;
+        this._branchOpen = true;
+        this._currentBranch = branch;
 
         // Append to panel
-        if( this.branches.length == 0)
+        if( this.branches.length == 0 )
+        {
             branch.root.classList.add('first');
+        }
 
         // This is the last!
         this.root.querySelectorAll(".lexbranch.last").forEach( e => { e.classList.remove("last"); } );
@@ -4796,16 +4955,15 @@ class Panel {
         // Add widget filter
         if( options.filter )
         {
-            this._addFilter( options.filter, {callback: this._searchWidgets.bind(this, branch.name)} );
+            this._addFilter( options.filter, { callback: this._searchWidgets.bind( this, branch.name ) } );
         }
 
         return branch;
     }
 
     merge() {
-
-        this.branch_open = false;
-        this.current_branch = null;
+        this._branchOpen = false;
+        this._currentBranch = null;
     }
 
     _pick( arg, def ) {
@@ -4831,9 +4989,16 @@ class Panel {
         Panel Widgets
     */
 
-    create_widget( name, type, options = {} ) {
+    _createWidget( type, name, value, options = {} ) {
+
+        if( !LX.CREATED_INSTANCES )
+        {
+            LX.CREATED_INSTANCES = [];
+        }
 
-        let widget = new Widget( name, type, options );
+        LX.CREATED_INSTANCES[ type ] = true;
+
+        let widget = new Widget( name, type, value, options );
 
         let element = document.createElement( 'div' );
         element.className = "lexwidget";
@@ -4847,7 +5012,7 @@ class Panel {
 
         if( type != Widget.TITLE )
         {
-            element.style.width = "calc(100% - " + (this.current_branch || type == Widget.FILE ? 10 : 20) + "px)";
+            element.style.width = "calc(100% - " + (this._currentBranch || type == Widget.FILE || type == Widget.TREE ? 10 : 20) + "px)";
 
             if( options.width )
             {
@@ -4869,7 +5034,7 @@ class Panel {
 
         if( name != undefined )
         {
-            if( !(options.hideName ?? false) )
+            if( !( options.hideName ?? false ) )
             {
                 let domName = document.createElement( 'div' );
                 domName.className = "lexwidgetname";
@@ -4877,10 +5042,10 @@ class Panel {
                 {
                     domName.classList.add( "float-" + options.justifyName );
                 }
-                domName.innerHTML = name || "";
+                domName.innerHTML = name;
                 domName.title = options.title ?? domName.innerHTML;
                 domName.style.width = options.nameWidth || LX.DEFAULT_NAME_WIDTH;
-                element.appendChild(domName);
+                element.appendChild( domName );
                 element.domName = domName;
 
                 // Copy-paste info
@@ -4888,10 +5053,23 @@ class Panel {
                     e.preventDefault();
                     widget.oncontextmenu( e );
                 });
+
+                if( !( options.skipReset ?? false )  && ( value != null ) )
+                {
+                    Panel._add_reset_property( domName, function( e ) {
+                        widget.set( widget._initialValue, false, e );
+                        // Og value, don't show it
+                        this.style.display = "none";
+                    });
+                }
             }
 
             this.widgets[ name ] = widget;
         }
+        else
+        {
+            options.hideName = true;
+        }
 
         if( options.signal )
         {
@@ -4918,13 +5096,13 @@ class Panel {
             }
             else if( !this.queuedContainer )
             {
-                if( this.current_branch )
+                if( this._currentBranch )
                 {
                     if( !options.skipWidget )
                     {
-                        this.current_branch.widgets.push( widget );
+                        this._currentBranch.widgets.push( widget );
                     }
-                    this.current_branch.content.appendChild( el );
+                    this._currentBranch.content.appendChild( el );
                 }
                 else
                 {
@@ -4985,30 +5163,32 @@ class Panel {
         options.skipWidget = options.skipWidget ?? true;
         options.skipInlineCount = true;
 
-        let widget = this.create_widget(null, Widget.TEXT, options);
-        let element = widget.domEl;
+        let widget = this._createWidget( Widget.TEXT, null, null, options );
+        const element = widget.domEl;
         element.className += " lexfilter noname";
 
         let input = document.createElement('input');
         input.className = 'lexinput-filter';
-        input.setAttribute("placeholder", options.placeholder);
+        input.setAttribute( "placeholder", options.placeholder );
         input.style.width =  "calc( 100% - 17px )";
         input.value = options.filterValue || "";
 
         let searchIcon = document.createElement('a');
         searchIcon.className = "fa-solid fa-magnifying-glass";
-        element.appendChild(searchIcon);
-        element.appendChild(input);
+        element.appendChild( searchIcon );
+        element.appendChild( input );
 
         input.addEventListener("input", (e) => {
-            if(options.callback)
-                options.callback(input.value, e);
+            if( options.callback )
+            {
+                options.callback( input.value, e );
+            }
         });
 
         return element;
     }
 
-    _searchWidgets(branchName, value) {
+    _searchWidgets( branchName, value ) {
 
         for( let b of this.branches )
         {
@@ -5082,10 +5262,14 @@ class Panel {
     _trigger( event, callback ) {
 
         if( callback )
+        {
             callback.call( this, event.value, event.domEvent, event.name );
+        }
 
         if( this.onevent )
+        {
             this.onevent.call( this, event );
+        }
     }
 
     /**
@@ -5100,7 +5284,7 @@ class Panel {
             return this.branches.find( b => b.name == name );
         }
 
-        return this.current_branch;
+        return this._currentBranch;
     }
 
     /**
@@ -5110,9 +5294,9 @@ class Panel {
 
     queue( domEl ) {
 
-        if( !domEl && this.current_branch)
+        if( !domEl && this._currentBranch)
         {
-            domEl = this.current_branch.root;
+            domEl = this._currentBranch.root;
         }
 
         if( this.queuedContainer )
@@ -5145,12 +5329,14 @@ class Panel {
 
     addBlank( height = 8, width ) {
 
-        let widget = this.create_widget(null, Widget.addBlank);
+        let widget = this._createWidget( Widget.BLANK );
         widget.domEl.className += " blank";
         widget.domEl.style.height = height + "px";
 
-        if(width)
+        if( width )
+        {
             widget.domEl.style.width = width;
+        }
 
         return widget;
     }
@@ -5168,13 +5354,12 @@ class Panel {
 
     addTitle( name, options = {} ) {
 
-        if( !name )
-        {
-            throw( "Can't create Title without text!" );
-        }
+        console.assert( name, "Can't create Title Widget without text!" );
 
-        let widget = this.create_widget( null, Widget.TITLE, options );
-        let element = widget.domEl;
+        // Note: Titles are not registered in Panel.widgets by now
+        let widget = this._createWidget( Widget.TITLE, null, null, options );
+
+        const element = widget.domEl;
         element.className = "lextitle";
 
         if( options.icon )
@@ -5185,7 +5370,7 @@ class Panel {
             element.appendChild( icon );
         }
 
-        let text = document.createElement( "span");
+        let text = document.createElement( "span" );
         text.innerText = name;
         element.appendChild( text );
 
@@ -5211,6 +5396,7 @@ class Panel {
      * @param {String} value Text value
      * @param {Function} callback Callback function on change
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      * disabled: Make the widget disabled [false]
      * required: Make the input required
      * placeholder: Add input placeholder
@@ -5224,33 +5410,43 @@ class Panel {
 
     addText( name, value, callback, options = {} ) {
 
-        let widget = this.create_widget( name, Widget.TEXT, options );
+        let widget = this._createWidget( Widget.TEXT, name, String( value ), options );
 
         widget.onGetValue = () => {
-            return wValue.value;
+            return value;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            this.disabled ? wValue.innerText = newValue : wValue.value = newValue;
-            Panel._dispatch_event( wValue, "focusout", skipCallback );
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
+
+            if( !widget.valid( newValue ) || ( this._lastValueTriggered == newValue ) )
+            {
+                return;
+            }
+
+            this._lastValueTriggered = value = newValue;
+
+            if( options.disabled  )
+            {
+                wValue.innerText = newValue;
+            }
+            else
+            {
+                wValue.value = newValue;
+            }
+
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, newValue, event ), callback );
+            }
         };
 
-        widget.valid = () => {
-            if( wValue.pattern == "" ) { return true; }
+        widget.valid = ( v ) => {
+            if( !v.length || wValue.pattern == "" ) return true;
             const regexp = new RegExp( wValue.pattern );
-            return regexp.test( wValue.value );
+            return regexp.test( v );
         };
 
-        let element = widget.domEl;
-
-        // Add reset functionality
-        if( widget.name && !( options.skipReset ?? false ) ) {
-            Panel._add_reset_property( element.domName, function() {
-                wValue.value = wValue.iValue;
-                this.style.display = "none";
-                Panel._dispatch_event( wValue, "focusout" );
-            } );
-        }
+        const element = widget.domEl;
 
         // Add widget value
 
@@ -5273,7 +5469,7 @@ class Panel {
             wValue.type = options.type || "";
             wValue.value = wValue.iValue = value || "";
             wValue.style.width = "100%";
-            wValue.style.textAlign = options.float ?? "";
+            wValue.style.textAlign = ( options.float ?? "" );
 
             wValue.setAttribute( "placeholder", options.placeholder ?? "" );
 
@@ -5287,39 +5483,25 @@ class Panel {
                 wValue.setAttribute( "pattern", options.pattern );
             }
 
-            var resolve = ( function( val, event ) {
-
-                if( !widget.valid() )
-                {
-                    return;
-                }
-
-                const skipCallback = event.detail;
-                let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                if( btn ) btn.style.display = ( val != wValue.iValue ? "block" : "none" );
-                if( !skipCallback )
-                {
-                    this._trigger( new IEvent( name, val, event ), callback );
-                }
-
-            }).bind( this );
-
-            const trigger = options.trigger ?? 'default';
+            const trigger = options.trigger ?? "default";
 
-            if( trigger == 'default' )
+            if( trigger == "default" )
             {
                 wValue.addEventListener( "keyup", function( e ){
-                    if(e.key == 'Enter')
-                        resolve( e.target.value, e );
+                    if( e.key == "Enter" )
+                    {
+                        wValue.blur();
+                    }
                 });
+
                 wValue.addEventListener( "focusout", function( e ){
-                    resolve( e.target.value, e );
+                    widget.set( e.target.value, false, e );
                 });
             }
-            else if( trigger == 'input' )
+            else if( trigger == "input" )
             {
                 wValue.addEventListener("input", function( e ){
-                    resolve( e.target.value, e );
+                    widget.set( e.target.value, false, e );
                 });
             }
 
@@ -5335,14 +5517,17 @@ class Panel {
                 container.appendChild( icon );
             }
 
-        } else
+        }
+        else
         {
             wValue = document.createElement( options.url ? 'a' : 'div' );
+
             if( options.url )
             {
                 wValue.href = options.url;
                 wValue.target = "_blank";
             }
+
             const icon = options.warning ? '<i class="fa-solid fa-triangle-exclamation"></i>' : '';
             wValue.innerHTML = ( icon + value ) || "";
             wValue.style.width = "100%";
@@ -5355,7 +5540,8 @@ class Panel {
         element.appendChild( container );
 
         // Remove branch padding and margins
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             container.style.width = "100%";
@@ -5369,7 +5555,8 @@ class Panel {
      * @param {String} name Widget name
      * @param {String} value Text Area value
      * @param {Function} callback Callback function on change
-     * @param {*} options:
+     * @param {Object} options:
+     * hideName: Don't use name as label [false]
      * disabled: Make the widget disabled [false]
      * placeholder: Add input placeholder
      * trigger: Choose onchange trigger (default, input) [default]
@@ -5381,82 +5568,76 @@ class Panel {
 
     addTextArea( name, value, callback, options = {} ) {
 
-        let widget = this.create_widget( name, Widget.TEXTAREA, options );
+        let widget = this._createWidget( Widget.TEXTAREA, name, value, options );
 
         widget.onGetValue = () => {
-            return wValue.value;
-        };
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            wValue.value = newValue;
-            Panel._dispatch_event( wValue, "focusout", skipCallback );
+            return value;
         };
 
-        let element = widget.domEl;
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
 
-        // Add reset functionality
-        if( widget.name && !( options.skipReset ?? false ) ) {
-            Panel._add_reset_property( element.domName, function() {
-                wValue.value = wValue.iValue;
-                this.style.display = "none";
-                Panel._dispatch_event( wValue, "focusout" );
-            });
-        }
+            wValue.value = value = newValue;
+
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, newValue, event ), callback );
+            }
+        };
+
+        const element = widget.domEl;
 
         // Add widget value
 
-        let container = document.createElement( 'div' );
+        let container = document.createElement( "div" );
         container.className = "lextextarea";
         container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + " )";
         container.style.height = options.height;
         container.style.display = "flex";
 
-        let wValue = document.createElement( 'textarea' );
+        let wValue = document.createElement( "textarea" );
         wValue.value = wValue.iValue = value || "";
         wValue.style.width = "100%";
         wValue.style.textAlign = options.float ?? "";
         Object.assign( wValue.style, options.style ?? {} );
 
-        if( options.disabled ?? false ) wValue.setAttribute("disabled", true);
-        if( options.placeholder ) wValue.setAttribute("placeholder", options.placeholder);
+        if( options.disabled ?? false ) wValue.setAttribute( "disabled", true );
+        if( options.placeholder ) wValue.setAttribute( "placeholder", options.placeholder );
 
-        var resolve = (function( val, event ) {
-            const skipCallback = event.detail;
-            let btn = element.querySelector( ".lexwidgetname .lexicon" );
-            if( btn ) btn.style.display = ( val != wValue.iValue ? "block" : "none" );
-            if( !skipCallback ) this._trigger( new IEvent( name, val, event ), callback );
-        }).bind(this);
+        const trigger = options.trigger ?? "default";
 
-        const trigger = options.trigger ?? 'default';
-
-        if(trigger == 'default')
+        if( trigger == "default" )
         {
-            wValue.addEventListener("keyup", function(e){
-                if(e.key == 'Enter')
-                    resolve(e.target.value, e);
+            wValue.addEventListener("keyup", function( e ) {
+                if( e.key == "Enter" )
+                {
+                    wValue.blur();
+                }
             });
-            wValue.addEventListener("focusout", function(e){
-                resolve(e.target.value, e);
+
+            wValue.addEventListener("focusout", function( e ) {
+                widget.set( e.target.value, false, e );
             });
         }
-        else if(trigger == 'input')
+        else if( trigger == "input" )
         {
-            wValue.addEventListener("input", function(e){
-                resolve(e.target.value, e);
+            wValue.addEventListener("input", function( e ) {
+                widget.set( e.target.value, false, e );
             });
         }
 
-        if(options.icon)
+        if( options.icon )
         {
             let icon = document.createElement('a');
             icon.className = "inputicon " + options.icon;
-            container.appendChild(icon);
+            container.appendChild( icon );
         }
 
-        container.appendChild(wValue);
-        element.appendChild(container);
+        container.appendChild( wValue );
+        element.appendChild( container );
 
         // Remove branch padding and margins
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             container.style.width = "100%";
@@ -5469,7 +5650,7 @@ class Panel {
                 // Update height depending on the content
                 wValue.style.height = wValue.scrollHeight + "px";
             }
-        }, 10);
+        }, 10 );
 
         return widget;
     }
@@ -5477,6 +5658,7 @@ class Panel {
     /**
      * @method addLabel
      * @param {String} value Information string
+     * @param {Object} options Text options
      */
 
     addLabel( value, options = {} ) {
@@ -5491,6 +5673,7 @@ class Panel {
      * @param {String} value Button name
      * @param {Function} callback Callback function on click
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      * disabled: Make the widget disabled [false]
      * icon: Icon class to show as button value
      * img: Path to image to show as button value
@@ -5499,19 +5682,19 @@ class Panel {
 
     addButton( name, value, callback, options = {} ) {
 
-        let widget = this.create_widget( name, Widget.BUTTON, options );
+        let widget = this._createWidget( Widget.BUTTON, name, null, options );
 
         widget.onGetValue = () => {
             return wValue.innerText;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             wValue.innerHTML =
-            (options.icon ? "<a class='" + options.icon + "'></a>" :
-            ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (newValue || "") + "</span>" ));
+            ( options.icon ? "<a class='" + options.icon + "'></a>" :
+            ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + ( newValue || "" ) + "</span>" ) );
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
 
         var wValue = document.createElement( 'button' );
         wValue.title = options.title ?? "";
@@ -5523,22 +5706,22 @@ class Panel {
         }
 
         wValue.innerHTML =
-            (options.icon ? "<a class='" + options.icon + "'></a>" :
-            ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + (value || "") + "</span>" ));
+            ( options.icon ? "<a class='" + options.icon + "'></a>" :
+            ( options.img  ? "<img src='" + options.img + "'>" : "<span>" + ( value || "" ) + "</span>" ) );
 
-        wValue.style.width = "calc( 100% - " + (options.nameWidth ?? LX.DEFAULT_NAME_WIDTH) + ")";
+        wValue.style.width = "calc( 100% - " + ( options.nameWidth ?? LX.DEFAULT_NAME_WIDTH ) + ")";
 
         if( options.disabled )
         {
             wValue.setAttribute( "disabled", true );
         }
 
-        wValue.addEventListener("click", e => {
+        wValue.addEventListener( "click", e => {
             if( options.selectable )
             {
                 if( options.parent )
                 {
-                    options.parent.querySelectorAll(".lexbutton.selected").forEach( e => { if(e == wValue) return; e.classList.remove("selected") } );
+                    options.parent.querySelectorAll(".lexbutton.selected").forEach( e => { if( e == wValue ) return; e.classList.remove( "selected" ) } );
                 }
 
                 wValue.classList.toggle('selected');
@@ -5549,8 +5732,9 @@ class Panel {
 
         element.appendChild( wValue );
 
-        // Remove branch padding and margins
-        if( !widget.name )
+        // Remove branch padding and 
+        const useNameAsLabel = !( options.hideName ?? false ) && !( options.icon || options.img );
+        if( !useNameAsLabel )
         {
             wValue.className += " noname";
             wValue.style.width = "100%";
@@ -5564,6 +5748,7 @@ class Panel {
      * @param {String} name Widget name
      * @param {Array} values Each of the {value, callback, selected, disabled} items
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      * float: Justify content (left, center, right) [center]
      * @legacy selected: Selected item by default by value
      * noSelection: Buttons can be clicked, but they are not selectable
@@ -5572,8 +5757,8 @@ class Panel {
 
     addComboButtons( name, values, options = {} ) {
 
-        let widget = this.create_widget( name, Widget.BUTTON, options );
-        let element = widget.domEl;
+        let widget = this._createWidget( Widget.BUTTONS, name, null, options );
+        const element = widget.domEl;
 
         let that = this;
         let container = document.createElement('div');
@@ -5642,7 +5827,8 @@ class Panel {
         }
 
         // Remove branch padding and margins
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             container.style.width = "100%";
@@ -5658,17 +5844,19 @@ class Panel {
      * @method addCard
      * @param {String} name Card Name
      * @param {*} options:
-     * title: title if any
-     * text: card text if any
-     * src: url of the image if any
+     * text: Card text
+     * link: Card link
+     * title: Card dom title
+     * src: url of the image
      * callback (Function): function to call on click
      */
 
     addCard( name, options = {} ) {
 
         options.hideName = true;
-        let widget = this.create_widget(name, Widget.CARD, options);
-        let element = widget.domEl;
+
+        let widget = this._createWidget( Widget.CARD, name, null, options );
+        const element = widget.domEl;
 
         let container = document.createElement('div');
         container.className = "lexcard";
@@ -5680,7 +5868,7 @@ class Panel {
             img.src = options.img;
             container.appendChild(img);
 
-            if(options.link != undefined)
+            if( options.link != undefined )
             {
                 img.style.cursor = "pointer";
                 img.addEventListener('click', function() {
@@ -5690,29 +5878,30 @@ class Panel {
             }
         }
 
-        let name_el = document.createElement('span');
-        name_el.innerText = name;
+        let cardNameDom = document.createElement('span');
+        cardNameDom.innerText = name;
 
-        if(options.link != undefined)
+        if( options.link != undefined )
         {
-            let link_el = document.createElement('a');
-            link_el.innerText = name;
-            link_el.href = options.link;
-            link_el.target = options.target ?? "";
-            name_el.innerText = "";
-            name_el.appendChild(link_el);
+            let cardLinkDom = document.createElement( 'a' );
+            cardLinkDom.innerText = name;
+            cardLinkDom.href = options.link;
+            cardLinkDom.target = options.target ?? "";
+            cardNameDom.innerText = "";
+            cardNameDom.appendChild( cardLinkDom );
         }
 
-        container.appendChild(name_el);
+        container.appendChild( cardNameDom );
 
-        if( options.callback ) {
+        if( options.callback )
+        {
             container.style.cursor = "pointer";
-            container.addEventListener("click", (e) => {
-                this._trigger( new IEvent(name, null, e), options.callback );
+            container.addEventListener("click", ( e ) => {
+                this._trigger( new IEvent( name, null, e ), options.callback );
             });
         }
 
-        element.appendChild(container);
+        element.appendChild( container );
 
         return widget;
     }
@@ -5737,13 +5926,13 @@ class Panel {
         // Always hide name for this one
         options.hideName = true;
 
-        let widget = this.create_widget( name, Widget.FORM, options );
+        let widget = this._createWidget( Widget.FORM, name, null, options );
 
         widget.onGetValue = () => {
             return container.formData;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             container.formData = newValue;
             const entries = container.querySelectorAll( ".lexwidget" );
             for( let i = 0; i < entries.length; ++i )
@@ -5762,7 +5951,7 @@ class Panel {
 
         // Add widget value
 
-        let element = widget.domEl;
+        const element = widget.domEl;
 
         let container = document.createElement( 'div' );
         container.className = "lexformdata";
@@ -5816,31 +6005,29 @@ class Panel {
 
         element.appendChild( container );
 
-        if( !widget.name || options.hideName )
-        {
-            element.className += " noname";
-            container.style.width = "100%";
-        }
+        // Form does not never use label
+        element.className += " noname";
+        container.style.width = "100%";
 
         return widget;
     }
 
     /**
      * @method addContent
+     * @param {String} name Widget name
      * @param {HTMLElement/String} element
+     * @param {Object} options
      */
 
-    addContent( element, options = {} ) {
+    addContent( name, element, options = {} ) {
 
-        if( !element )
-        {
-            return;
-        }
+        console.assert( element, "Empty content!" );
 
         if( element.constructor == String )
         {
             const tmp = document.createElement( "div" );
             tmp.innerHTML = element;
+
             if( tmp.childElementCount > 1 )
             {
                 element = tmp;
@@ -5851,27 +6038,28 @@ class Panel {
             }
         }
 
-        let widget = this.create_widget( null, Widget.CONTENT, options );
+        options.hideName = true;
+
+        let widget = this._createWidget( Widget.CONTENT, name, null, options );
         widget.domEl.appendChild( element );
+
         return widget;
     }
 
     /**
      * @method addImage
+     * @param {String} name Widget name
      * @param {String} url Image Url
      * @param {*} options
+     * hideName: Don't use name as label [false]
      */
 
-    async addImage( url, options = {} ) {
+    async addImage( name, url, options = {} ) {
 
-        if( !url )
-        {
-            return;
-        }
+        console.assert( url, "Empty src/url for Image!" );
 
-        options.hideName = true;
-        let widget = this.create_widget( null, Widget.IMAGE, options );
-        let element = widget.domEl;
+        let widget = this._createWidget( Widget.IMAGE, name, null, options );
+        const element = widget.domEl;
 
         let container = document.createElement( 'div' );
         container.className = "leximage";
@@ -5886,6 +6074,7 @@ class Panel {
         }
 
         await img.decode();
+
         container.appendChild( img );
         element.appendChild( container );
 
@@ -5899,6 +6088,7 @@ class Panel {
      * @param {String} value Select by default option
      * @param {Function} callback Callback function on change
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      * filter: Add a search bar to the widget [false]
      * disabled: Make the widget disabled [false]
      * skipReset: Don't add the reset value button when value changes
@@ -5908,33 +6098,24 @@ class Panel {
 
     addDropdown( name, values, value, callback, options = {} ) {
 
-        let widget = this.create_widget( name, Widget.DROPDOWN, options );
+        let widget = this._createWidget( Widget.DROPDOWN, name, value, options );
 
         widget.onGetValue = () => {
             return element.querySelector( "li.selected" ).getAttribute( 'value' );
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            let btn = element.querySelector( ".lexwidgetname .lexicon" );
-            if( btn ) btn.style.display = ( newValue != wValue.iValue ? "block" : "none" );
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             value = newValue;
             list.querySelectorAll( 'li' ).forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
-            if( !skipCallback ) this._trigger( new IEvent( name, value, null ), callback );
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, value, event ), callback );
+            }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
         let that = this;
 
-        // Add reset functionality
-        if(widget.name && !( options.skipReset ?? false ))
-        {
-            Panel._add_reset_property( element.domName, function() {
-                value = wValue.iValue;
-                list.querySelectorAll( 'li' ).forEach( e => { if( e.getAttribute('value') == value ) e.click() } );
-                this.style.display = "none";
-            });
-        }
-
         let container = document.createElement( 'div' );
         container.className = "lexdropdown";
         container.style.width = options.inputWidth || "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
@@ -6143,16 +6324,19 @@ class Panel {
 
                 li.addEventListener( "click", e => {
                     listDialog.close();
+
                     const currentSelected = element.querySelector( ".lexoptions .selected" );
-                    if(currentSelected) currentSelected.classList.remove( "selected" );
+                    if(currentSelected)
+                    {
+                        currentSelected.classList.remove( "selected" );
+                    }
+
                     value = e.currentTarget.getAttribute( "value" );
                     e.currentTarget.toggleAttribute( "hidden", false );
                     e.currentTarget.classList.add( "selected" );
-                    selectedOption.refresh(value);
+                    selectedOption.refresh( value );
 
-                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                    if( btn ) btn.style.display = (value != wValue.iValue ? "block" : "none");
-                    that._trigger( new IEvent( name, value, null ), callback );
+                    widget.set( value, false, e );
 
                     // Reset filter
                     if( filter )
@@ -6209,7 +6393,8 @@ class Panel {
         element.appendChild( container );
 
         // Remove branch padding and margins
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             container.style.width = "100%";
@@ -6236,39 +6421,25 @@ class Panel {
 
     addCurve( name, values, callback, options = {} ) {
 
-        if( !name )
-        {
-            throw( "Set Widget Name!" );
-        }
+        let defaultValues = JSON.parse( JSON.stringify( values ) );
 
         let that = this;
-        let widget = this.create_widget( name, Widget.CURVE, options );
+        let widget = this._createWidget( Widget.CURVE, name, defaultValues, options );
 
         widget.onGetValue = () => {
             return JSON.parse(JSON.stringify( curveInstance.element.value ));
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            let btn = element.querySelector( ".lexwidgetname .lexicon" );
-            if( btn ) btn.style.display = ( newValue != curveInstance.element.value ? "block" : "none" );
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             curveInstance.element.value = JSON.parse( JSON.stringify( newValue ) );
             curveInstance.redraw();
-            if( !skipCallback ) that._trigger( new IEvent( name, curveInstance.element.value, null ), callback );
+            if( !skipCallback )
+            {
+                that._trigger( new IEvent( name, curveInstance.element.value, event ), callback );
+            }
         };
 
-        let element = widget.domEl;
-        let defaultValues = JSON.parse( JSON.stringify( values ) );
-
-        // Add reset functionality
-        if( !(options.skipReset ?? false) )
-        {
-            Panel._add_reset_property(element.domName, function(e) {
-                this.style.display = "none";
-                curveInstance.element.value = JSON.parse( JSON.stringify( defaultValues ) );
-                curveInstance.redraw();
-                that._trigger( new IEvent( name, curveInstance.element.value, e ), callback );
-            });
-        }
+        const element = widget.domEl;
 
         // Add widget value
 
@@ -6277,9 +6448,7 @@ class Panel {
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
         options.callback = (v, e) => {
-            let btn = element.querySelector(".lexwidgetname .lexicon");
-            if(btn) btn.style.display = (v != defaultValues ? "block" : "none");
-            that._trigger( new IEvent(name, v, e), callback );
+            that._trigger( new IEvent( name, v, e ), callback );
         };
 
         options.name = name;
@@ -6318,34 +6487,25 @@ class Panel {
 
     addDial( name, values, callback, options = {} ) {
 
+        let defaultValues = JSON.parse( JSON.stringify( values ) );
+
         let that = this;
-        let widget = this.create_widget(name, Widget.DIAL, options);
+        let widget = this._createWidget( Widget.DIAL, name, defaultValues, options );
 
         widget.onGetValue = () => {
-            return JSON.parse(JSON.stringify(curveInstance.element.value));
+            return JSON.parse( JSON.stringify( curveInstance.element.value ) );
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            let btn = element.querySelector( ".lexwidgetname .lexicon" );
-            if( btn ) btn.style.display = ( newValue != curveInstance.element.value ? "block" : "none" );
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             curveInstance.element.value = JSON.parse( JSON.stringify( newValue ) );
             curveInstance.redraw();
-            if( !skipCallback ) that._trigger( new IEvent( name, curveInstance.element.value, null ), callback );
+            if( !skipCallback )
+            {
+                that._trigger( new IEvent( name, curveInstance.element.value, event ), callback );
+            }
         };
 
-        let element = widget.domEl;
-        let defaultValues = JSON.parse( JSON.stringify( values ) );
-
-        // Add reset functionality
-        if( widget.name && !(options.skipReset ?? false) )
-        {
-            Panel._add_reset_property(element.domName, function(e) {
-                this.style.display = "none";
-                curveInstance.element.value = JSON.parse( JSON.stringify( defaultValues ) );
-                curveInstance.redraw();
-                that._trigger( new IEvent( name, curveInstance.element.value, e ), callback );
-            });
-        }
+        const element = widget.domEl;
 
         // Add widget value
 
@@ -6353,10 +6513,8 @@ class Panel {
         container.className = "lexcurve";
         container.style.width = widget.name ? "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")" : '100%';
 
-        options.callback = (v, e) => {
-            let btn = element.querySelector(".lexwidgetname .lexicon");
-            if(btn) btn.style.display = (v != defaultValues ? "block" : "none");
-            that._trigger( new IEvent(name, v, e), callback );
+        options.callback = ( v, e ) => {
+            that._trigger( new IEvent( name, v, e ), callback );
         };
 
         options.name = name;
@@ -6385,42 +6543,32 @@ class Panel {
      * @param {String} name Widget name
      * @param {Number} value Flag value by default option
      * @param {Function} callback Callback function on change
-     * @param {*} options:
+     * @param {Object} options:
      */
 
     addLayers( name, value, callback, options = {} ) {
 
-        if( !name )
-        {
-            throw("Set Widget Name!");
-        }
-
         let that = this;
-        let widget = this.create_widget(name, Widget.LAYERS, options);
+        let widget = this._createWidget( Widget.LAYERS, name, value, options );
+
         widget.onGetValue = () => {
             return element.value;
         };
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            let btn = element.querySelector(".lexwidgetname .lexicon");
-            if(btn) btn.style.display = (newValue != defaultValue ? "block" : "none");
+
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             value = element.value = newValue;
             setLayers();
-            if( !skipCallback ) that._trigger( new IEvent(name, value), callback );
+            if( !skipCallback )
+            {
+                that._trigger( new IEvent(name, value, event), callback );
+            }
         };
 
-        let element = widget.domEl;
-
-        // Add reset functionality
-        Panel._add_reset_property(element.domName, function(e) {
-            this.style.display = "none";
-            value = element.value = defaultValue;
-            setLayers();
-            that._trigger( new IEvent(name, value, e), callback );
-        });
+        const element = widget.domEl;
 
         // Add widget value
 
-        var container = document.createElement('div');
+        var container = document.createElement( "div" );
         container.className = "lexlayers";
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
@@ -6432,6 +6580,7 @@ class Panel {
 
             let binary = value.toString( 2 );
             let nbits = binary.length;
+
             // fill zeros
             for( var i = 0; i < (16 - nbits); ++i )
             {
@@ -6445,33 +6594,28 @@ class Panel {
                 if( value != undefined )
                 {
                     const valueBit = binary[ 16 - bit - 1 ];
-                    if(valueBit != undefined && valueBit == '1')
+                    if( valueBit != undefined && valueBit == '1' )
+                    {
                         layer.classList.add('selected');
+                    }
                 }
                 layer.innerText = bit + 1;
                 layer.title = "Bit " + bit + ", value " + (1 << bit);
                 container.appendChild( layer );
 
                 layer.addEventListener("click", e => {
-
                     e.stopPropagation();
                     e.stopImmediatePropagation();
                     e.target.classList.toggle('selected');
                     value ^= ( 1 << bit );
-                    element.value = value;
-
-                    let btn = element.querySelector(".lexwidgetname .lexicon");
-                    if(btn) btn.style.display = (value != defaultValue ? "block" : "none");
-
-                    this._trigger( new IEvent(name, value, e), callback );
+                    widget.set( value, false, e );
                 });
             }
-
         };
 
         setLayers();
 
-        element.appendChild(container);
+        element.appendChild( container );
 
         return widget;
     }
@@ -6487,12 +6631,8 @@ class Panel {
 
     addArray( name, values = [], callback, options = {} ) {
 
-        if( !name )
-        {
-            throw( "Set Widget Name!" );
-        }
+        let widget = this._createWidget( Widget.ARRAY, name, null, options );
 
-        let widget = this.create_widget(name, Widget.ARRAY, options);
         widget.onGetValue = () => {
             let array_inputs = element.querySelectorAll("input");
             let values = [];
@@ -6500,13 +6640,17 @@ class Panel {
             values.push( v.value );
             return values;
         };
-        widget.onSetValue = ( newValue, skipCallback ) => {
+
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             values = newValue;
             updateItems();
-            if( !skipCallback ) this._trigger( new IEvent(name, values, null), callback );
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, values, event ), callback );
+            }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
         element.style.flexWrap = "wrap";
 
         // Add dropdown array button
@@ -6519,10 +6663,10 @@ class Panel {
 
         this.queue( container );
 
-        const angle_down = `<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>`;
+        const angleDown = `<a class='fa-solid fa-angle-down' style='float:right; margin-right: 3px;'></a>`;
 
         let buttonName = "Array (size " + values.length + ")";
-        buttonName += angle_down;
+        buttonName += angleDown;
         this.addButton(null, buttonName, () => {
             element.querySelector(".lexarrayitems").toggleAttribute('hidden');
         }, { buttonClass: 'array' });
@@ -6531,24 +6675,24 @@ class Panel {
 
         // Show elements
 
-        let array_items = document.createElement('div');
-        array_items.className = "lexarrayitems";
-        array_items.toggleAttribute('hidden',  true);
+        let arrayItems = document.createElement( "div" );
+        arrayItems.className = "lexarrayitems";
+        arrayItems.toggleAttribute( "hidden",  true );
 
-        element.appendChild(container);
-        element.appendChild(array_items);
+        element.appendChild( container );
+        element.appendChild( arrayItems );
 
         const updateItems = () => {
 
             // Update num items
             let buttonEl = element.querySelector(".lexbutton.array span");
             buttonEl.innerHTML = "Array (size " + values.length + ")";
-            buttonEl.innerHTML += angle_down;
+            buttonEl.innerHTML += angleDown;
 
             // Update inputs
-            array_items.innerHTML = "";
+            arrayItems.innerHTML = "";
 
-            this.queue( array_items );
+            this.queue( arrayItems );
 
             for( let i = 0; i < values.length; ++i )
             {
@@ -6594,7 +6738,7 @@ class Panel {
                 this._trigger( new IEvent(name, values, event), callback );
             }, { buttonClass: 'array' });
 
-            // Stop pushing to array_items
+            // Stop pushing to arrayItems
             this.clearQueue();
         };
 
@@ -6610,22 +6754,30 @@ class Panel {
      * @param {String} value Selected list value
      * @param {Function} callback Callback function on change
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      */
 
     addList( name, values, value, callback, options = {} ) {
 
-        let widget = this.create_widget( name, Widget.LIST, options );
+        let widget = this._createWidget( Widget.LIST, name, value, options );
 
         widget.onGetValue = () => {
             return value;
         };
-        widget.onSetValue = ( newValue, skipCallback ) => {
+
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             listContainer.querySelectorAll( '.lexlistitem' ).forEach( e => e.classList.remove( 'selected' ) );
             const idx = values.indexOf( newValue );
-            if( idx == -1 ) return;
+            if( idx == -1 )
+            {
+                return;
+            }
             listContainer.children[ idx ].classList.toggle( 'selected' );
             value = newValue;
-            if( !skipCallback ) this._trigger( new IEvent( name, newValue ), callback );
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, newValue, event ), callback );
+            }
         };
 
         widget.updateValues = ( newValues ) => {
@@ -6659,7 +6811,7 @@ class Panel {
             }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
 
         // Show list
 
@@ -6670,7 +6822,8 @@ class Panel {
         widget.updateValues( values );
 
         // Remove branch padding and margins
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             listContainer.style.width = "100%";
@@ -6687,46 +6840,39 @@ class Panel {
      * @param {String} value Comma separated tags
      * @param {Function} callback Callback function on change
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      */
 
     addTags( name, value, callback, options = {} ) {
 
         value = value.replace( /\s/g, '' ).split( ',' );
+
         let defaultValue = [].concat( value );
-        let widget = this.create_widget( name, Widget.TAGS, options );
+        let widget = this._createWidget( Widget.TAGS, name, defaultValue, options );
 
         widget.onGetValue = () => {
             return [].concat( value );
         };
-        widget.onSetValue = ( newValue, skipCallback ) => {
+
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             value = [].concat( newValue );
-            create_tags();
-            let btn = element.querySelector( ".lexwidgetname .lexicon" );
-            if( btn ) btn.style.display = ( newValue != defaultValue ? "block" : "none" );
-            if( !skipCallback ) that._trigger( new IEvent( name, value ), callback );
+            _generateTags();
+            if( !skipCallback )
+            {
+                that._trigger( new IEvent( name, value, event ), callback );
+            }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
         let that = this;
 
-        // Add reset functionality
-        if(widget.name)
-        {
-            Panel._add_reset_property(element.domName, function(e) {
-                this.style.display = "none";
-                value = [].concat(defaultValue);
-                create_tags();
-                that._trigger( new IEvent(name, value, e), callback );
-            });
-        }
-
         // Show tags
 
         const tagsContainer = document.createElement('div');
         tagsContainer.className = "lextags";
         tagsContainer.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
-        const create_tags = () => {
+        const _generateTags = () => {
 
             tagsContainer.innerHTML = "";
 
@@ -6744,9 +6890,7 @@ class Panel {
                 removeButton.addEventListener( 'click', e => {
                     tag.remove();
                     value.splice( value.indexOf( tagName ), 1 );
-                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                    if( btn ) btn.style.display = ( value != defaultValue ? "block" : "none" );
-                    that._trigger( new IEvent( name, value, e ), callback );
+                    widget.set( value, false, e );
                 } );
 
                 tagsContainer.appendChild( tag );
@@ -6765,20 +6909,18 @@ class Panel {
                     if( !val.length || value.indexOf( val ) > -1 )
                         return;
                     value.push( val );
-                    create_tags();
-                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                    if(btn) btn.style.display = "block";
-                    that._trigger( new IEvent( name, value, e ), callback );
+                    widget.set( value, false, e );
                 }
             };
 
             tagInput.focus();
         }
 
-        create_tags();
+        _generateTags();
 
         // Remove branch padding and margins
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             tagsContainer.style.width = "100%";
@@ -6808,44 +6950,44 @@ class Panel {
             throw( "Set Widget Name or at least a label!" );
         }
 
-        let widget = this.create_widget( name, Widget.CHECKBOX, options );
+        let widget = this._createWidget( Widget.CHECKBOX, name, value, options );
 
         widget.onGetValue = () => {
-            return checkbox.checked;
+            return value;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            if( checkbox.checked !== newValue )
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
+
+            if( newValue == value )
+            {
+                return;
+            }
+
+            checkbox.checked = value = newValue;
+
+            // Update suboptions menu
+            element.querySelector( ".lexcheckboxsubmenu" )?.toggleAttribute( 'hidden', !newValue );
+
+            if( !skipCallback )
             {
-                checkbox.checked = newValue;
-                Panel._dispatch_event( checkbox, "change", skipCallback );
+                this._trigger( new IEvent( name, newValue, event ), callback );
             }
         };
 
-        let element = widget.domEl;
-
-        // Add reset functionality
-        if( name )
-        {
-            Panel._add_reset_property( element.domName, function() {
-                checkbox.checked = !checkbox.checked;
-                Panel._dispatch_event( checkbox, "change" );
-            });
-        }
+        const element = widget.domEl;
 
         // Add widget value
 
-        var container = document.createElement('div');
+        var container = document.createElement( "div" );
         container.className = "lexcheckboxcont";
 
-        let checkbox = document.createElement('input');
+        let checkbox = document.createElement( "input" );
         checkbox.type = "checkbox";
         checkbox.className = "lexcheckbox " + ( options.className ?? "" );
         checkbox.checked = value;
-        checkbox.iValue = value;
         checkbox.disabled = options.disabled ?? false;
 
-        let valueName = document.createElement( 'span' );
+        let valueName = document.createElement( "span" );
         valueName.className = "checkboxtext";
         valueName.innerHTML = options.label ?? "On";
 
@@ -6853,21 +6995,7 @@ class Panel {
         container.appendChild( valueName );
 
         checkbox.addEventListener( "change" , e => {
-
-            const skipCallback = ( e.detail?.constructor == Number ? null : e.detail );
-
-            // Reset button (default value)
-            if( !skipCallback )
-            {
-                let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                if( btn ) btn.style.display = checkbox.checked != checkbox.iValue ? "block": "none";
-            }
-
-            // Open suboptions
-            let submenu = element.querySelector( ".lexcheckboxsubmenu" );
-            if( submenu ) submenu.toggleAttribute( 'hidden', !checkbox.checked );
-
-            if( !skipCallback ) this._trigger( new IEvent( name, checkbox.checked, e ), callback );
+            widget.set( checkbox.checked, false, e );
         });
 
         element.appendChild( container );
@@ -6875,9 +7003,9 @@ class Panel {
         if( options.suboptions )
         {
             element.style.flexWrap = "wrap";
-            let suboptions = document.createElement('div');
+            let suboptions = document.createElement( "div" );
             suboptions.className = "lexcheckboxsubmenu";
-            suboptions.toggleAttribute( 'hidden', !checkbox.checked );
+            suboptions.toggleAttribute( "hidden", !checkbox.checked );
 
             this.queue( suboptions );
             options.suboptions.call(this, this);
@@ -6902,32 +7030,31 @@ class Panel {
 
     addToggle( name, value, callback, options = {} ) {
 
-        if( !name )
-        {
-            throw( "Set Widget Name!" );
-        }
-
-        let widget = this.create_widget( name, Widget.TOGGLE, options );
+        let widget = this._createWidget( Widget.TOGGLE, name, value, options );
 
         widget.onGetValue = () => {
             return toggle.checked;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            if( toggle.checked !== newValue )
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
+
+            if( newValue == value )
             {
-                toggle.checked = newValue;
-                Panel._dispatch_event( toggle, "change", skipCallback );
+                return;
             }
-        };
 
-        let element = widget.domEl;
+            toggle.checked = value = newValue;
 
-        // Add reset functionality
-        Panel._add_reset_property( element.domName, function() {
-            toggle.checked = !toggle.checked;
-            Panel._dispatch_event( toggle, "change" );
-        });
+            // Update suboptions menu
+            element.querySelector( ".lextogglesubmenu" )?.toggleAttribute( 'hidden', !newValue );
+
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, newValue, event ), callback );
+            }
+        };
+
+        const element = widget.domEl;
 
         // Add widget value
 
@@ -6949,21 +7076,7 @@ class Panel {
         container.appendChild( valueName );
 
         toggle.addEventListener( "change" , e => {
-
-            const skipCallback = ( e.detail?.constructor == Number ? null : e.detail );
-
-            // Reset button (default value)
-            if( !skipCallback )
-            {
-                let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                if( btn ) btn.style.display = toggle.checked != toggle.iValue ? "block": "none";
-            }
-
-            // Open suboptions
-            let submenu = element.querySelector( ".lextogglesubmenu" );
-            if( submenu ) submenu.toggleAttribute( 'hidden', !toggle.checked );
-
-            if( !skipCallback ) this._trigger( new IEvent( name, toggle.checked, e ), callback );
+            widget.set( toggle.checked, false, e );
         });
 
         element.appendChild( container );
@@ -6987,43 +7100,43 @@ class Panel {
 
     /**
      * @method addRadioGroup
+     * @param {String} name Widget name
      * @param {String} label Radio label
      * @param {Array} values Radio options
      * @param {Function} callback Callback function on change
      * @param {*} options:
      * disabled: Make the widget disabled [false]
      * className: Customize colors
+     * selected: Index of the default selected option
      */
 
-    addRadioGroup( label, values, callback, options = {} ) {
+    addRadioGroup( name, label, values, callback, options = {} ) {
 
-        let widget = this.create_widget( null, Widget.RADIO, options );
+        let widget = this._createWidget( Widget.RADIO, name, null, options );
+        let currentIndex = null;
 
         widget.onGetValue = () => {
             const items = container.querySelectorAll( 'button' );
-            for( let i = 0; i < items.length; ++i )
-            {
-                const optionItem = items[ i ];
-                if( optionItem.checked )
-                {
-                    return [ i, values[ i ] ];
-                }
-            }
+            return currentIndex ? [ currentIndex, items[ currentIndex ] ] : undefined;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
+            console.assert( newValue.constructor == Number, "RadioGroup _value_ must be an Array index!" );
+
             const items = container.querySelectorAll( 'button' );
-            for( let i = 0; i < items.length; ++i )
+            items.forEach( b => { b.checked = false; b.classList.remove( "checked" ) } );
+
+            const optionItem = items[ newValue ];
+            optionItem.checked = !optionItem.checked;
+            optionItem.classList.toggle( "checked" );
+
+            if( !skipCallback )
             {
-                const optionItem = items[ i ];
-                if( newValue == i )
-                {
-                    Panel._dispatch_event( optionItem, "click", skipCallback );
-                }
+                that._trigger( new IEvent( null, [ newValue, values[ newValue ] ], event ), callback );
             }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
 
         // Add widget value
         var container = document.createElement( 'div' );
@@ -7046,18 +7159,12 @@ class Panel {
             optionButton.disabled = options.disabled ?? false;
             optionItem.appendChild( optionButton );
 
-            optionButton.addEventListener( "click", function( e ) {
-                const skipCallback = ( e.detail?.constructor == Number ? null : e.detail );
-                container.querySelectorAll( 'button' ).forEach( e => { e.checked = false; e.classList.remove( "checked" ) } );
-                this.checked = !this.checked;
-                this.classList.toggle( "checked" );
-                if( !skipCallback ) that._trigger( new IEvent( null, [ i, values[ i ] ], e ), callback );
+            optionButton.addEventListener( "click", ( e ) => {
+                widget.set( i, false, e );
             } );
 
-            {
-                const checkedSpan = document.createElement( 'span' );
-                optionButton.appendChild( checkedSpan );
-            }
+            const checkedSpan = document.createElement( 'span' );
+            optionButton.appendChild( checkedSpan );
 
             const optionLabel = document.createElement( 'span' );
             optionLabel.innerHTML = values[ i ];
@@ -7066,8 +7173,9 @@ class Panel {
 
         if( options.selected )
         {
-            console.assert( options.selected.constructor == Number );
-            widget.set( options.selected, true );
+            console.assert( options.selected.constructor == Number, "RadioGroup _selected_ must be an Array index!" );
+            currentIndex = options.selected;
+            widget.set( currentIndex, true );
         }
 
         element.appendChild( container );
@@ -7087,30 +7195,36 @@ class Panel {
 
     addColor( name, value, callback, options = {} ) {
 
-        if( !name )
-        {
-            throw( "Set Widget Name!" );
-        }
+        value = ( value.constructor === Array ) ? rgbToHex( value ) : value;
 
-        let widget = this.create_widget( name, Widget.COLOR, options );
+        let widget = this._createWidget( Widget.COLOR, name, value, options );
 
         widget.onGetValue = () => {
-            return color.value;
-        };
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            color.value = newValue;
-            Panel._dispatch_event( color, "input", skipCallback );
+            return value;
         };
 
-        let element = widget.domEl;
-        let change_from_input = false;
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
 
-        // Add reset functionality
-        Panel._add_reset_property( element.domName, function() {
-            this.style.display = "none";
-            color.value = color.iValue;
-            Panel._dispatch_event( color, "input" );
-        });
+            if( color.useRGB )
+            {
+                newValue = hexToRgb( newValue );
+            }
+
+            // Means it was called from the color input listener, not the text
+            if( event )
+            {
+                textWidget.set( newValue, true, event );
+            }
+
+            color.value = value = newValue;
+
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, newValue, event ), callback );
+            }
+        };
+
+        const element = widget.domEl;
 
         // Add widget value
 
@@ -7124,7 +7238,7 @@ class Panel {
         color.className = "colorinput";
         color.id = "color" + simple_guidGenerator();
         color.useRGB = options.useRGB ?? false;
-        color.value = color.iValue = value.constructor === Array ? rgbToHex( value ) : value;
+        color.value = color.iValue = value;
 
         if( options.disabled )
         {
@@ -7132,38 +7246,18 @@ class Panel {
         }
 
         color.addEventListener( "input", e => {
-            let val = e.target.value;
-
-            const skipCallback = e.detail;
-
-            // Change value (always hex)
-            if( !change_from_input )
-                text_widget.set( val );
-
-            // Reset button (default value)
-            if( !skipCallback )
-            {
-                let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                if( btn ) btn.style.display = val != color.iValue ? "block": "none";
-            }
-
-            if( color.useRGB )
-                val = hexToRgb( val );
-
-            if( !skipCallback ) this._trigger( new IEvent( name, val, e ), callback );
+            widget.set( e.target.value, false, e );
         }, false );
 
         container.appendChild( color );
 
         this.queue( container );
 
-        const text_widget = this.addText( null, color.value, v => {
-            change_from_input = true;
+        const textWidget = this.addText( null, color.value, v => {
             widget.set( v );
-            change_from_input = false;
         }, { width: "calc( 100% - 32px )"});
 
-        text_widget.domEl.style.marginLeft = "4px";
+        textWidget.domEl.style.marginLeft = "4px";
 
         this.clearQueue();
 
@@ -7178,6 +7272,7 @@ class Panel {
      * @param {Number} value Default number value
      * @param {Function} callback Callback function on change
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      * className: Extra classes to customize style
      * disabled: Make the widget disabled [false]
      * left: The slider goes to the left instead of the right
@@ -7188,28 +7283,28 @@ class Panel {
 
     addRange( name, value, callback, options = {} ) {
 
-        let widget = this.create_widget( name, Widget.RANGE, options );
+        let widget = this._createWidget( Widget.RANGE, name, value, options );
 
         widget.onGetValue = () => {
-            return +slider.value;
+            return value;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            slider.value = newValue;
-            Panel._dispatch_event( slider, "input", skipCallback );
-        };
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
+
+            if( isNaN( newValue ) )
+            {
+                return;
+            }
 
-        let element = widget.domEl;
+            slider.value = value = clamp( +newValue, +slider.min, +slider.max );
 
-        // add reset functionality
-        if( widget.name )
-        {
-            Panel._add_reset_property( element.domName, function() {
-                this.style.display = "none";
-                slider.value = slider.iValue;
-                Panel._dispatch_event( slider, "input" );
-            });
-        }
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, options.left ? ( ( +slider.max ) - value + ( +slider.min ) ) : value, event ), callback );
+            }
+        };
+
+        const element = widget.domEl;
 
         // add widget value
 
@@ -7237,30 +7332,7 @@ class Panel {
         }
 
         slider.addEventListener( "input", e => {
-
-            if( isNaN( e.target.valueAsNumber ) )
-            {
-                return;
-            }
-
-            const skipCallback = e.detail;
-
-            let val = e.target.value = clamp( +e.target.valueAsNumber, +slider.min, +slider.max );
-            slider.value = val;
-
-            // Reset button (default value)
-            if( !skipCallback )
-            {
-                let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                if( btn ) btn.style.display = val != slider.iValue ? "block": "none";
-            }
-
-            if( options.left )
-            {
-                val = ( +slider.max ) - val + ( +slider.min );
-            }
-
-            if( !skipCallback ) this._trigger( new IEvent( name, val, e ), callback );
+            widget.set( e.target.valueAsNumber, false, e );
         }, { passive: false });
 
         slider.addEventListener( "mousedown", function( e ) {
@@ -7293,8 +7365,8 @@ class Panel {
         container.appendChild( slider );
         element.appendChild( container );
 
-        // Remove branch padding and margins
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             container.style.width = "100%";
@@ -7309,6 +7381,7 @@ class Panel {
      * @param {Number} value Default number value
      * @param {Function} callback Callback function on change
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      * disabled: Make the widget disabled [false]
      * step: Step of the input
      * precision: The number of digits to appear after the decimal point
@@ -7321,28 +7394,40 @@ class Panel {
 
     addNumber( name, value, callback, options = {} ) {
 
-        let widget = this.create_widget( name, Widget.NUMBER, options );
+        let widget = this._createWidget( Widget.NUMBER, name, value, options );
 
         widget.onGetValue = () => {
-            return +vecinput.value;
+            return value;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            vecinput.value = round( newValue, options.precision );
-            Panel._dispatch_event( vecinput, "change", skipCallback );
-        };
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
 
-        let element = widget.domEl;
+            if( isNaN( newValue ) )
+            {
+                return;
+            }
 
-        // add reset functionality
-        if( widget.name )
-        {
-            Panel._add_reset_property( element.domName, function() {
-                this.style.display = "none";
-                vecinput.value = vecinput.iValue;
-                Panel._dispatch_event( vecinput, "change" );
-            });
-        }
+            value = clamp( +newValue, +vecinput.min, +vecinput.max );
+            vecinput.value = value = round( value, options.precision );
+
+            // Update slider!
+            if( box.querySelector( ".lexinputslider" ) )
+            {
+                box.querySelector( ".lexinputslider" ).value = value;
+            }
+
+            if( options.units )
+            {
+                vecinput.unitSpan.style.left = measureRealWidth( value ) + "px";
+            }
+
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, value, event ), callback );
+            }
+        };
+
+        const element = widget.domEl;
 
         // add widget value
 
@@ -7401,9 +7486,7 @@ class Panel {
             slider.value = value;
 
             slider.addEventListener( "input", function( e ) {
-                let new_value = +this.valueAsNumber;
-                vecinput.value = round( new_value, options.precision );
-                Panel._dispatch_event( vecinput, "change" );
+                widget.set( this.valueAsNumber, false, e );
             }, false );
 
             slider.addEventListener( "mousedown", function( e ) {
@@ -7428,13 +7511,13 @@ class Panel {
                 vecinput.max = slider.max = newMax ?? vecinput.max;
                 vecinput.step = newStep ?? vecinput.step;
                 slider.step = newStep ?? slider.step;
-                Panel._dispatch_event( vecinput, "change", true );
+                widget.set( value, true );
             };
         }
 
         vecinput.addEventListener( "input", function( e ) {
-            let new_value = +this.valueAsNumber;
-            vecinput.value = round( new_value, options.precision );
+            value = +this.valueAsNumber;
+            value = round( value, options.precision );
             if( options.units )
             {
                 vecinput.unitSpan.style.left = measureRealWidth( vecinput.value ) + "px";
@@ -7450,44 +7533,12 @@ class Panel {
             let mult = options.step ?? 1;
             if( e.shiftKey ) mult *= 10;
             else if( e.altKey ) mult *= 0.1;
-            let new_value = ( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) );
-            this.value = round( new_value, options.precision );
-            Panel._dispatch_event(vecinput, "change");
+            value = ( +this.valueAsNumber - mult * ( e.deltaY > 0 ? 1 : -1 ) );
+            widget.set( value, false, e );
         }, { passive: false });
 
-        vecinput.addEventListener( "change", e => {
-
-            if( isNaN( e.target.valueAsNumber ) )
-            {
-                return;
-            }
-
-            const skipCallback = e.detail;
-
-            let val = e.target.value = clamp( +e.target.valueAsNumber, +vecinput.min, +vecinput.max );
-            val = options.precision ? round( val, options.precision ) : val;
-
-            // Update slider!
-            if( box.querySelector( ".lexinputslider" ) )
-            {
-                box.querySelector( ".lexinputslider" ).value = val;
-            }
-
-            vecinput.value = val;
-
-            if( options.units )
-            {
-                vecinput.unitSpan.style.left = measureRealWidth( vecinput.value ) + "px";
-            }
-
-            // Reset button (default value)
-            if( !skipCallback )
-            {
-                let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                if( btn ) btn.style.display = val != vecinput.iValue ? "block": "none";
-            }
-
-            if( !skipCallback ) this._trigger( new IEvent( name, val, e ), callback );
+        vecinput.addEventListener( "change", function( e ) {
+            widget.set( this.valueAsNumber, false, e );
         }, { passive: false });
 
         // Add drag input
@@ -7531,9 +7582,9 @@ class Panel {
                 let mult = options.step ?? 1;
                 if( e.shiftKey ) mult *= 10;
                 else if( e.altKey ) mult *= 0.1;
-                let new_value = ( +vecinput.valueAsNumber + mult * dt );
-                vecinput.value = ( +new_value ).toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
-                Panel._dispatch_event( vecinput, "change" );
+                value = ( +vecinput.valueAsNumber + mult * dt );
+                widget.set( value, false, e );
+                // vecinput.value = ( +new_value ).toFixed( 4 ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' );
             }
 
             e.stopPropagation();
@@ -7563,7 +7614,8 @@ class Panel {
         element.appendChild( container );
 
         // Remove branch padding and margins
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             container.style.width = "100%";
@@ -7574,17 +7626,12 @@ class Panel {
 
     static VECTOR_COMPONENTS = { 0: 'x', 1: 'y', 2: 'z', 3: 'w' };
 
-    _add_vector( num_components, name, value, callback, options = {} ) {
+    _add_vector( numComponents, name, value, callback, options = {} ) {
 
-        num_components = clamp( num_components, 2, 4 );
-        value = value ?? new Array( num_components ).fill( 0 );
+        numComponents = clamp( numComponents, 2, 4 );
+        value = value ?? new Array( numComponents ).fill( 0 );
 
-        if( !name )
-        {
-            throw( "Set Widget Name!" );
-        }
-
-        let widget = this.create_widget( name, Widget.VECTOR, options );
+        let widget = this._createWidget( Widget.VECTOR, name, [].concat( value ), options );
 
         widget.onGetValue = () => {
             let inputs = element.querySelectorAll( "input" );
@@ -7596,33 +7643,30 @@ class Panel {
             return value;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            const inputs = element.querySelectorAll( ".vecinput" );
-            if( inputs.length == newValue.length )
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
+
+            if( vectorInputs.length != newValue.length )
             {
                 console.error( "Input length does not match vector length." );
                 return;
             }
 
-            for( let i = 0; i < inputs.length; ++i )
+            for( let i = 0; i < vectorInputs.length; ++i )
             {
                 let value = newValue[ i ];
-                inputs[ i ].value = round( value, options.precision ) ?? 0;
-                Panel._dispatch_event( inputs[ i ], "change", skipCallback );
+                value = clamp( value, +vectorInputs[ i ].min, +vectorInputs[ i ].max );
+                value = round( value, options.precision ) ?? 0;
+                vectorInputs[ i ].value = newValue[ i ] = value;
             }
-        };
 
-        let element = widget.domEl;
-
-        // Add reset functionality
-        Panel._add_reset_property( element.domName, function() {
-            this.style.display = "none";
-            for( let v of element.querySelectorAll( ".vecinput" ) )
+            if( !skipCallback )
             {
-                v.value = v.iValue;
-                Panel._dispatch_event( v, "change" );
+                this._trigger( new IEvent( name, newValue, event ), callback );
             }
-        });
+        };
+
+        const element = widget.domEl;
+        const vectorInputs = [];
 
         // Add widget value
 
@@ -7630,20 +7674,21 @@ class Panel {
         container.className = "lexvector";
         container.style.width = "calc( 100% - " + LX.DEFAULT_NAME_WIDTH + ")";
 
-        for( let i = 0; i < num_components; ++i )
+        for( let i = 0; i < numComponents; ++i )
         {
             let box = document.createElement( 'div' );
             box.className = "vecbox";
             box.innerHTML = "<span class='" + Panel.VECTOR_COMPONENTS[ i ] + "'></span>";
 
             let vecinput = document.createElement( 'input' );
-            vecinput.className = "vecinput v" + num_components;
+            vecinput.className = "vecinput v" + numComponents;
             vecinput.min = options.min ?? -1e24;
             vecinput.max = options.max ?? 1e24;
             vecinput.step = options.step ?? "any";
             vecinput.type = "number";
-            vecinput.id = "vec" + num_components + "_" + simple_guidGenerator();
+            vecinput.id = "vec" + numComponents + "_" + simple_guidGenerator();
             vecinput.idx = i;
+            vectorInputs[ i ] = vecinput;
 
             if( value[ i ].constructor == Number )
             {
@@ -7693,21 +7738,12 @@ class Panel {
                     return;
                 }
 
-                const skipCallback = e.detail;
-
-                let val = e.target.value = clamp( e.target.value, +vecinput.min, +vecinput.max );
+                let val = clamp( e.target.value, +vecinput.min, +vecinput.max );
                 val = round( val, options.precision );
 
-                // Reset button (default value)
-                if( !skipCallback )
-                {
-                    let btn = element.querySelector( ".lexwidgetname .lexicon" );
-                    if( btn ) btn.style.display = val != vecinput.iValue ? "block" : "none";
-                }
-
                 if( locker.locked )
                 {
-                    for( let v of element.querySelectorAll( ".vecinput" ) )
+                    for( let v of vectorInputs )
                     {
                         v.value = val;
                         value[ v.idx ] = val;
@@ -7719,7 +7755,7 @@ class Panel {
                     value[ e.target.idx ] = val;
                 }
 
-                if( !skipCallback ) this._trigger( new IEvent( name, value, e ), callback );
+                widget.set( value, false, e );
             }, false );
 
             // Add drag input
@@ -7810,17 +7846,14 @@ class Panel {
         if( options.min !== undefined || options.max !== undefined )
         {
             widget.setLimits = ( newMin, newMax, newStep ) => {
-                const inputs = element.querySelectorAll(".vecinput");
-                for( let v of inputs )
+                for( let v of vectorInputs )
                 {
                     v.min = newMin ?? v.min;
                     v.max = newMax ?? v.max;
                     v.step = newStep ?? v.step;
-                    Panel._dispatch_event( v, "change", true );
                 }
 
-                // To call onChange callback
-                this._trigger( new IEvent( name, value ), callback );
+                widget.set( value, true );
             };
         }
 
@@ -7881,13 +7914,14 @@ class Panel {
      * @param {Number} value Default number value
      * @param {Function} callback Callback function on change
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      * disabled: Make the widget disabled [false]
      * units: Unit as string added to the end of the value
      */
 
     addSize( name, value, callback, options = {} ) {
 
-        let widget = this.create_widget( name, Widget.SIZE, options );
+        let widget = this._createWidget( Widget.SIZE, name, value, options );
 
         widget.onGetValue = () => {
             const value = [];
@@ -7898,14 +7932,14 @@ class Panel {
             return value;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             for( let i = 0; i < element.dimensions.length; ++i )
             {
                 element.dimensions[ i ].set( newValue[ i ], skipCallback );
             }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
 
         this.queue( element );
 
@@ -7978,7 +8012,8 @@ class Panel {
         }
 
         // Remove branch padding and margins
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             container.style.width = "100%";
@@ -8002,18 +8037,13 @@ class Panel {
 
     addPad( name, value, callback, options = {} ) {
 
-        if( !name )
-        {
-            throw( "Set Widget Name!" );
-        }
-
-        let widget = this.create_widget( name, Widget.PAD, options );
+        let widget = this._createWidget( Widget.PAD, name, null, options );
 
         widget.onGetValue = () => {
             return thumb.value.xy;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             thumb.value.set( newValue[ 0 ], newValue[ 1 ] );
             _updateValue( thumb.value );
             if( !skipCallback )
@@ -8022,7 +8052,7 @@ class Panel {
             }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
 
         var container = document.createElement( 'div' );
         container.className = "lexpad";
@@ -8127,17 +8157,13 @@ class Panel {
 
     addProgress( name, value, options = {} ) {
 
-        if( !name )
-        {
-            throw("Set Widget Name!");
-        }
-
-        let widget = this.create_widget( name, Widget.PROGRESS, options );
+        let widget = this._createWidget( Widget.PROGRESS, name, value, options );
 
         widget.onGetValue = () => {
             return progress.value;
         };
-        widget.onSetValue = ( newValue, skipCallback ) => {
+
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
             element.querySelector("meter").value = newValue;
             _updateColor();
             if( element.querySelector("span") )
@@ -8146,7 +8172,7 @@ class Panel {
             }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
 
         var container = document.createElement('div');
         container.className = "lexprogress";
@@ -8268,13 +8294,8 @@ class Panel {
 
     addFile( name, callback, options = { } ) {
 
-        if( !name )
-        {
-            throw( "Set Widget Name!" );
-        }
-
-        let widget = this.create_widget( name, Widget.FILE, options );
-        let element = widget.domEl;
+        let widget = this._createWidget( Widget.FILE, name, null, options );
+        const element = widget.domEl;
 
         let local = options.local ?? true;
         let type = options.type ?? 'text';
@@ -8360,20 +8381,28 @@ class Panel {
 
     addTree( name, data, options = {} ) {
 
+        options.hideName = true;
+
+        const widget = this._createWidget( Widget.TREE, name, null, options );
+        const element = widget.domEl;
+
         let container = document.createElement('div');
         container.className = "lextree";
+        element.appendChild( container );
 
         if( name )
         {
             let title = document.createElement('span');
             title.innerHTML = name;
-            container.appendChild(title);
+            container.appendChild( title );
         }
 
         let toolsDiv = document.createElement('div');
         toolsDiv.className = "lextreetools";
-        if(!name)
+        if( !name )
+        {
             toolsDiv.className += " notitle";
+        }
 
         // Tree icons
         if( options.icons )
@@ -8384,7 +8413,7 @@ class Panel {
                 iconEl.title = data.name;
                 iconEl.className = "lexicon " + data.icon;
                 iconEl.addEventListener("click", data.callback);
-                toolsDiv.appendChild(iconEl);
+                toolsDiv.appendChild( iconEl );
             }
         }
 
@@ -8392,35 +8421,36 @@ class Panel {
 
         options.filter = options.filter ?? true;
 
-        let node_filter_input = null;
-        if(options.filter)
+        let nodeFilterInput = null;
+        if( options.filter )
         {
-            node_filter_input = document.createElement('input');
-            node_filter_input.id = "lexnodetree_filter";
-            node_filter_input.setAttribute("placeholder", "Filter..");
-            node_filter_input.style.width =  "calc( 100% - 17px )";
-            node_filter_input.addEventListener('input', function(){
+            nodeFilterInput = document.createElement('input');
+            nodeFilterInput.id = "lexnodetree_filter";
+            nodeFilterInput.setAttribute("placeholder", "Filter..");
+            nodeFilterInput.style.width =  "calc( 100% - 17px )";
+            nodeFilterInput.addEventListener('input', function(){
                 nodeTree.refresh();
             });
 
             let searchIcon = document.createElement('a');
             searchIcon.className = "lexicon fa-solid fa-magnifying-glass";
-            toolsDiv.appendChild(node_filter_input);
-            toolsDiv.appendChild(searchIcon);
+            toolsDiv.appendChild( nodeFilterInput );
+            toolsDiv.appendChild( searchIcon );
         }
 
-        if(options.icons || options.filter)
-            container.appendChild(toolsDiv);
+        if( options.icons || options.filter )
+        {
+            container.appendChild( toolsDiv );
+        }
 
         // Tree
 
         let list = document.createElement('ul');
-        list.addEventListener("contextmenu", function(e) {
+        list.addEventListener("contextmenu", function( e ) {
             e.preventDefault();
         });
 
-        container.appendChild(list);
-        this.root.appendChild(container);
+        container.appendChild( list );
 
         const nodeTree = new NodeTree( container, data, options );
         return nodeTree;
@@ -8434,13 +8464,14 @@ class Panel {
 
         var element = document.createElement('div');
         element.className = "lexseparator";
-        let widget = new Widget( null, Widget.SEPARATOR );
+
+        let widget = new Widget( Widget.SEPARATOR );
         widget.domEl = element;
 
-        if( this.current_branch )
+        if( this._currentBranch )
         {
-            this.current_branch.content.appendChild( element );
-            this.current_branch.widgets.push( widget );
+            this._currentBranch.content.appendChild( element );
+            this._currentBranch.widgets.push( widget );
         }
         else
         {
@@ -8463,12 +8494,8 @@ class Panel {
 
     addTabs( tabs, options = {} ) {
 
-        let root = this.current_branch ? this.current_branch.content : this.root;
-
-        if( !this.current_branch )
-        {
-            console.warn("No current branch!");
-        }
+        const widget = this._createWidget( Widget.TABS, null, null, options );
+        const element = widget.domEl;
 
         if( tabs.constructor != Array )
         {
@@ -8488,7 +8515,7 @@ class Panel {
         let tabContainer = document.createElement( 'div' );
         tabContainer.className = 'tabs';
         container.appendChild( tabContainer );
-        root.appendChild( container );
+        element.appendChild( container );
 
         for( let i = 0; i < tabs.length; ++i )
         {
@@ -8512,10 +8539,9 @@ class Panel {
             container.appendChild( infoContainer );
 
             tabEl.addEventListener( 'click', e => {
-
                 // Change selected tab
                 tabContainer.querySelectorAll( '.lextab' ).forEach( e => { e.classList.remove( 'selected' ); } );
-                e.target.classList.add( 'selected' );
+                tabEl.classList.add( 'selected' );
                 // Hide all tabs content
                 container.querySelectorAll(".widgets").forEach( e => { e.toggleAttribute( 'hidden', true ); } );
                 // Show tab content
@@ -8556,42 +8582,38 @@ class Panel {
 
     addCounter( name, value, callback, options = { } ) {
 
-        let widget = this.create_widget( name, Widget.COUNTER, options );
+        let widget = this._createWidget( Widget.COUNTER, name, value, options );
 
         widget.onGetValue = () => {
             return counterText.count;
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
-            _onChange( newValue, skipCallback );
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
+            newValue = clamp( newValue, min, max );
+            counterText.count = newValue;
+            counterText.innerHTML = newValue;
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, newValue, event ), callback );
+            }
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
 
         const min = options.min ?? 0;
         const max = options.max ?? 100;
         const step = options.step ?? 1;
 
-        const _onChange = ( value, skipCallback, event ) => {
-            value = clamp( value, min, max );
-            counterText.count = value;
-            counterText.innerHTML = value;
-            if( !skipCallback )
-            {
-                this._trigger( new IEvent( name, value, event ), callback );
-            }
-        }
-
         const container = document.createElement( 'div' );
         container.className = "lexcounter";
         element.appendChild( container );
 
         this.queue( container );
 
-        this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-minus'></a>", (value, e) => {
+        this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-minus'></a>", ( value, e ) => {
             let mult = step ?? 1;
             if( e.shiftKey ) mult *= 10;
-            _onChange( counterText.count - mult, false, e );
+            widget.set( counterText.count - mult, false, e );
         }, { className: "micro", skipInlineCount: true, title: "Minus" });
 
         this.clearQueue();
@@ -8616,10 +8638,10 @@ class Panel {
 
         this.queue( container );
 
-        this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-plus'></a>", (value, e) => {
+        this.addButton(null, "<a style='margin-top: 0px;' class='fa-solid fa-plus'></a>", ( value, e ) => {
             let mult = step ?? 1;
             if( e.shiftKey ) mult *= 10;
-            _onChange( counterText.count + mult, false, e );
+            widget.set( counterText.count + mult, false, e );
         }, { className: "micro", skipInlineCount: true, title: "Plus" });
 
         this.clearQueue();
@@ -8632,6 +8654,7 @@ class Panel {
      * @param {String} name Widget name
      * @param {Number} data Table data
      * @param {*} options:
+     * hideName: Don't use name as label [false]
      * head: Table headers (each of the headers per column)
      * body: Table body (data per row for each column)
      * rowActions: Allow to add actions per row
@@ -8646,17 +8669,17 @@ class Panel {
             throw( "Data is needed to create a table!" );
         }
 
-        let widget = this.create_widget( name, Widget.TABLE, options );
+        let widget = this._createWidget( Widget.TABLE, name, null, options );
 
         widget.onGetValue = () => {
 
         };
 
-        widget.onSetValue = ( newValue, skipCallback ) => {
+        widget.onSetValue = ( newValue, skipCallback, event ) => {
 
         };
 
-        let element = widget.domEl;
+        const element = widget.domEl;
 
         const container = document.createElement('div');
         container.className = "lextable";
@@ -8844,7 +8867,8 @@ class Panel {
 
         widget.refreshTable();
 
-        if( !widget.name )
+        const useNameAsLabel = !( options.hideName ?? false );
+        if( !useNameAsLabel )
         {
             element.className += " noname";
             container.style.width = "100%";
@@ -8891,12 +8915,14 @@ class Branch {
         var title = document.createElement( 'div' );
         title.className = "lexbranchtitle";
 
-        title.innerHTML = "<a class='fa-solid fa-angle-up switch-branch-button'></a>";
         if( options.icon )
         {
-            title.innerHTML += "<a class='branchicon " + options.icon + "' style='margin-right: 8px; margin-bottom: -2px;'>";
+            title.innerHTML = "<a class='branchicon " + options.icon + "'>";
         }
-        title.innerHTML += name || "Branch";
+
+        title.innerHTML += ( name || "Branch" );
+
+        title.innerHTML += "<a class='fa-solid fa-angle-up switch-branch-button'></a>";
 
         root.appendChild( title );
 
@@ -9054,7 +9080,7 @@ class Branch {
         for( var i = 0; i < this.widgets.length; i++ )
         {
             let widget = this.widgets[ i ];
-            let element = widget.domEl;
+            const element = widget.domEl;
 
             if( element.children.length < 2 )
             {
@@ -9227,7 +9253,7 @@ class Dialog {
             titleDiv.innerHTML = title;
             titleDiv.setAttribute('draggable', false);
 
-            titleDiv.oncontextmenu = function(e) {
+            titleDiv.oncontextmenu = function( e ) {
                 e.preventDefault();
                 e.stopPropagation();
 
@@ -9567,7 +9593,7 @@ class ContextMenu {
         }
     }
 
-    _adjust_position( div, margin, useAbsolute = false ) {
+    _adjustPosition( div, margin, useAbsolute = false ) {
 
         let rect = div.getBoundingClientRect();
 
@@ -9608,7 +9634,7 @@ class ContextMenu {
         }
     }
 
-    _create_submenu( o, k, c, d ) {
+    _createSubmenu( o, k, c, d ) {
 
         this.root.querySelectorAll( ".lexcontextmenu" ).forEach( cm => cm.remove() );
 
@@ -9620,7 +9646,7 @@ class ContextMenu {
         {
             const subitem = o[ k ][ i ];
             const subkey = Object.keys( subitem )[ 0 ];
-            this._create_entry(subitem, subkey, contextmenu, d);
+            this._createEntry(subitem, subkey, contextmenu, d);
         }
 
         var rect = c.getBoundingClientRect();
@@ -9628,10 +9654,10 @@ class ContextMenu {
         contextmenu.style.marginTop =  3.5 - c.offsetHeight + "px";
 
         // Set final width
-        this._adjust_position( contextmenu, 6, true );
+        this._adjustPosition( contextmenu, 6, true );
     }
 
-    _create_entry( o, k, c, d ) {
+    _createEntry( o, k, c, d ) {
 
         const hasSubmenu = o[ k ].length;
         let entry = document.createElement('div');
@@ -9676,7 +9702,7 @@ class ContextMenu {
             return;
 
             if( LX.OPEN_CONTEXTMENU_ENTRY == 'click' )
-                this._create_submenu( o, k, entry, ++d );
+                this._createSubmenu( o, k, entry, ++d );
         });
 
         if( !hasSubmenu )
@@ -9692,7 +9718,7 @@ class ContextMenu {
                 if(entry.built)
                     return;
                 entry.built = true;
-                this._create_submenu( o, k, entry, ++d );
+                this._createSubmenu( o, k, entry, ++d );
                 e.stopPropagation();
             });
         }
@@ -9704,7 +9730,7 @@ class ContextMenu {
     }
 
     onCreate() {
-        doAsync( () => this._adjust_position( this.root, 6 ) );
+        doAsync( () => this._adjustPosition( this.root, 6 ) );
     }
 
     add( path, options = {} ) {
@@ -9734,13 +9760,13 @@ class ContextMenu {
 
             if( found )
             {
-                insert( tokens[idx++], found );
+                insert( tokens[ idx++ ], found );
             }
             else
             {
                 let item = {};
                 item[ token ] = [];
-                const nextToken = tokens[idx++];
+                const nextToken = tokens[ idx++ ];
                 // Check if last token -> add callback
                 if( !nextToken )
                 {
@@ -9760,13 +9786,15 @@ class ContextMenu {
 
         const setParent = _item => {
 
-            let key = Object.keys(_item)[0];
+            let key = Object.keys( _item )[ 0 ];
             let children = _item[ key ];
 
-            if(!children.length)
+            if( !children.length )
+            {
                 return;
+            }
 
-            if(children.find( c => Object.keys(c)[0] == key ) == null)
+            if( children.find( c => Object.keys(c)[0] == key ) == null )
             {
                 const parent = {};
                 parent[ key ] = [];
@@ -9776,14 +9804,18 @@ class ContextMenu {
 
             for( var child of _item[ key ] )
             {
-                let k = Object.keys(child)[0];
-                for( var i = 0; i < child[k].length; ++i )
-                    setParent(child);
+                let k = Object.keys( child )[ 0 ];
+                for( var i = 0; i < child[ k ].length; ++i )
+                {
+                    setParent( child );
+                }
             }
         };
 
         for( let item of this.items )
-            setParent(item);
+        {
+            setParent( item );
+        }
 
         // Create elements
 
@@ -9793,9 +9825,11 @@ class ContextMenu {
             let pKey = "eId" + getSupportedDOMName( key );
 
             // Item already created
-            const id = "#" + (item.id ?? pKey);
-            if( !this.root.querySelector(id) )
-                this._create_entry(item, key, this.root, -1);
+            const id = "#" + ( item.id ?? pKey );
+            if( !this.root.querySelector( id ) )
+            {
+                this._createEntry( item, key, this.root, -1 );
+            }
         }
     }
 
@@ -11056,7 +11090,7 @@ class AssetView {
                 itemEl.appendChild(info);
             }
 
-            itemEl.addEventListener('click', function(e) {
+            itemEl.addEventListener('click', function( e ) {
                 e.stopImmediatePropagation();
                 e.stopPropagation();
 
@@ -11093,7 +11127,7 @@ class AssetView {
 
             if( that.contextMenu )
             {
-                itemEl.addEventListener('contextmenu', function(e) {
+                itemEl.addEventListener('contextmenu', function( e ) {
                     e.preventDefault();
 
                     const multiple = that.content.querySelectorAll('.selected').length;
@@ -11118,7 +11152,7 @@ class AssetView {
                 });
             }
 
-            itemEl.addEventListener("dragstart", function(e) {
+            itemEl.addEventListener("dragstart", function( e ) {
                 e.preventDefault();
             }, false );
 
@@ -11515,7 +11549,7 @@ Object.assign(LX, {
             script.src = url[i] + ( version ? "?version=" + version : "" );
             script.original_src = url[i];
             script.async = false;
-            script.onload = function(e) {
+            script.onload = function( e ) {
                 total--;
                 loaded_scripts.push(this);
                 if(total)