lexgui 0.5.7 → 0.5.9

package/build/lexgui.module.js

@@ -6,7 +6,7 @@
 */
 
 var LX = {
-    version: "0.5.7",
+    version: "0.5.9",
     ready: false,
     components: [], // Specific pre-build components
     signals: {}, // Events and triggers
@@ -128,6 +128,56 @@ function stripHTML( html )
 
 LX.stripHTML = stripHTML;
 
+/**
+ * @method parsePixelSize
+ * @description Parses any css size and returns a number of pixels
+ * @param {Number|String} size
+ * @param {Number} total
+ */
+const parsePixelSize = ( size, total ) => {
+
+    if( size.constructor === Number ) { return size; } // Assuming pixels..
+
+    if( size.constructor === String )
+    {
+        const value = parseFloat( size );
+
+        if( size.endsWith( "px" ) ) { return value; } // String pixels
+        if( size.endsWith( '%' ) ) { return ( value / 100 ) * total; } // Percentage
+        if( size.endsWith( "rem" ) || size.endsWith( "em" ) ) { const rootFontSize = 16; /*parseFloat(getComputedStyle(document.documentElement).fontSize);*/ return value * rootFontSize; } // rem unit: assume 16px = 1rem
+        if( size.endsWith( "vw" ) ) { return ( value / 100 ) * window.innerWidth; } // wViewport units
+        if( size.endsWith( "vh" ) ) { return ( value / 100 ) * window.innerHeight; } // hViewport units
+
+        // Any CSS calc expression (e.g., "calc(30% - 4px)")
+        if( size.startsWith( "calc(" ) )
+        {
+            const expr = size.slice( 5, -1 );
+            const parts = expr.split( /([+\-])/ ); // ["30% ", "-", "4px"]
+            let result = 0;
+            let op = "+";
+            for( let part of parts )
+            {
+                part = part.trim();
+                if( part === "+" || part === "-" )
+                {
+                    op = part;
+                }
+                else
+                {
+                    let value = parsePixelSize( part, total );
+                    result = ( op === "+" ) ? result + value : result - value;
+                }
+            }
+
+            return result;
+        }
+    }
+
+    throw( "Bad size format!" );
+}
+
+LX.parsePixelSize = parsePixelSize;
+
 /**
  * @method deepCopy
  * @description Create a deep copy with no references from an object
@@ -723,7 +773,7 @@ LX.makeKbd = makeKbd;
  * @description Gets an SVG element using one of LX.ICONS
  * @param {String} iconName
  * @param {Object} options
- * iconTitle
+ * title
  * extraClass
  * svgClass
  */
@@ -732,7 +782,7 @@ function makeIcon( iconName, options = { } )
     let data = LX.ICONS[ iconName ];
     console.assert( data, `No icon named _${ iconName }_` );
 
-    const iconTitle = options.iconTitle;
+    const iconTitle = options.title;
     const iconClass = options.iconClass;
     const svgClass = options.svgClass;
 
@@ -1591,7 +1641,7 @@ function toast( title, description, options = {} )
     if( options.action )
     {
         const panel = new Panel();
-        panel.addButton(null, options.action.name ?? "Accept", options.action.callback.bind( this, toast ), { width: "auto", maxWidth: "150px", className: "right", buttonClass: "outline" });
+        panel.addButton(null, options.action.name ?? "Accept", options.action.callback.bind( this, toast ), { width: "auto", maxWidth: "150px", className: "right", buttonClass: "border" });
         toast.appendChild( panel.root.childNodes[ 0 ] );
     }
 
@@ -1891,6 +1941,158 @@ LX.addSignal = addSignal;
 *   DOM Elements
 */
 
+/**
+ * @class Popover
+ */
+
+class Popover {
+
+    static activeElement = false;
+
+    constructor( trigger, content, options = {} ) {
+
+        console.assert( trigger, "Popover needs a DOM element as trigger!" );
+
+        if( Popover.activeElement )
+        {
+            Popover.activeElement.destroy();
+            return;
+        }
+
+        this._trigger = trigger;
+        trigger.classList.add( "triggered" );
+        trigger.active = this;
+
+        this._windowPadding = 4;
+        this.side = options.side ?? "bottom";
+        this.align = options.align ?? "center";
+        this.avoidCollisions = options.avoidCollisions ?? true;
+
+        this.root = document.createElement( "div" );
+        this.root.dataset["side"] = this.side;
+        this.root.tabIndex = "1";
+        this.root.className = "lexpopover";
+        LX.root.appendChild( this.root );
+
+        this.root.addEventListener( "keydown", (e) => {
+            if( e.key == "Escape" )
+            {
+                e.preventDefault();
+                e.stopPropagation();
+                this.destroy();
+            }
+        } )
+
+        if( content )
+        {
+            content = [].concat( content );
+            content.forEach( e => {
+                const domNode = e.root ?? e;
+                this.root.appendChild( domNode );
+                if( e.onPopover )
+                {
+                    e.onPopover();
+                }
+            } );
+        }
+
+        Popover.activeElement = this;
+
+        doAsync( () => {
+            this._adjustPosition();
+
+            this.root.focus();
+
+            this._onClick = e => {
+                if( e.target && ( this.root.contains( e.target ) || e.target == this._trigger ) )
+                {
+                    return;
+                }
+                this.destroy();
+            };
+
+            document.body.addEventListener( "mousedown", this._onClick, true );
+            document.body.addEventListener( "focusin", this._onClick, true );
+        }, 10 );
+    }
+
+    destroy() {
+
+        this._trigger.classList.remove( "triggered" );
+
+        delete this._trigger.active;
+
+        document.body.removeEventListener( "click", this._onClick );
+
+        this.root.remove();
+
+        Popover.activeElement = null;
+    }
+
+    _adjustPosition() {
+
+        const position = [ 0, 0 ];
+
+        // Place menu using trigger position and user options
+        {
+            const rect = this._trigger.getBoundingClientRect();
+
+            let alignWidth = true;
+
+            switch( this.side )
+            {
+                case "left":
+                    position[ 0 ] += ( rect.x - this.root.offsetWidth );
+                    alignWidth = false;
+                    break;
+                case "right":
+                    position[ 0 ] += ( rect.x + rect.width );
+                    alignWidth = false;
+                    break;
+                case "top":
+                    position[ 1 ] += ( rect.y - this.root.offsetHeight );
+                    alignWidth = true;
+                    break;
+                case "bottom":
+                    position[ 1 ] += ( rect.y + rect.height );
+                    alignWidth = true;
+                    break;
+                default:
+                    break;
+            }
+
+            switch( this.align )
+            {
+                case "start":
+                    if( alignWidth ) { position[ 0 ] += rect.x; }
+                    else { position[ 1 ] += rect.y; }
+                    break;
+                case "center":
+                    if( alignWidth ) { position[ 0 ] += ( rect.x + rect.width * 0.5 ) - this.root.offsetWidth * 0.5; }
+                    else { position[ 1 ] += ( rect.y + rect.height * 0.5 ) - this.root.offsetHeight * 0.5; }
+                    break;
+                case "end":
+                    if( alignWidth ) { position[ 0 ] += rect.x - this.root.offsetWidth + rect.width; }
+                    else { position[ 1 ] += rect.y - this.root.offsetHeight + rect.height; }
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        if( this.avoidCollisions )
+        {
+            position[ 0 ] = LX.clamp( position[ 0 ], 0, window.innerWidth - this.root.offsetWidth - this._windowPadding );
+            position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - this.root.offsetHeight - this._windowPadding );
+        }
+
+        this.root.style.left = `${ position[ 0 ] }px`;
+        this.root.style.top = `${ position[ 1 ] }px`;
+    }
+};
+
+LX.Popover = Popover;
+
 /**
  * @class DropdownMenu
  */
@@ -2188,14 +2390,8 @@ class ColorPicker {
 
     static currentPicker = false;
 
-    constructor( hexValue, trigger, options = {} ) {
-
-        console.assert( trigger, "ColorPicker needs a DOM element as trigger!" );
+    constructor( hexValue, options = {} ) {
 
-        this._windowPadding = 4;
-        this.side = options.side ?? "bottom";
-        this.align = options.align ?? "center";
-        this.avoidCollisions = options.avoidCollisions ?? true;
         this.colorModel = options.colorModel ?? "Hex";
         this.useAlpha = options.useAlpha ?? false;
         this.callback = options.onChange;
@@ -2205,32 +2401,8 @@ class ColorPicker {
             console.warn( "Define a callback in _options.onChange_ to allow getting new Color values!" );
         }
 
-        if( ColorPicker.currentPicker )
-        {
-            ColorPicker.currentPicker.destroy();
-            return;
-        }
-
-        this._trigger = trigger;
-        trigger.classList.add( "triggered" );
-        trigger.picker = this;
-
         this.root = document.createElement( "div" );
-        this.root.tabIndex = "1";
         this.root.className = "lexcolorpicker";
-        this.root.dataset["side"] = this.side;
-        LX.root.appendChild( this.root );
-
-        this.root.addEventListener( "keydown", (e) => {
-            if( e.key == "Escape" )
-            {
-                e.preventDefault();
-                e.stopPropagation();
-                this.destroy();
-            }
-        } )
-
-        ColorPicker.currentPicker = this;
 
         this.markerHalfSize = 8;
         this.markerSize = this.markerHalfSize * 2;
@@ -2249,7 +2421,7 @@ class ColorPicker {
         this.intSatMarker.style.backgroundColor = this.currentColor.hex;
         this.colorPickerBackground.appendChild( this.intSatMarker );
 
-        doAsync( this._svToPosition.bind( this, this.currentColor.hsv.s, this.currentColor.hsv.v ) );
+        let pickerRect = null;
 
         let innerMouseDown = e => {
             var doc = this.root.ownerDocument;
@@ -2265,15 +2437,15 @@ class ColorPicker {
             this.intSatMarker.style.top = currentTop + "px";
             this._positionToSv( currentLeft, currentTop );
             this._updateColorValue();
+
+            pickerRect = this.colorPickerBackground.getBoundingClientRect();
         }
 
         let innerMouseMove = e => {
             const dX = e.movementX;
             const dY = e.movementY;
-
-            const rect = this.colorPickerBackground.getBoundingClientRect();
-            const mouseX = e.offsetX - rect.x;
-            const mouseY = e.offsetY - rect.y;
+            const mouseX = e.x - pickerRect.x;
+            const mouseY = e.y - pickerRect.y;
 
             if ( dX != 0 && ( mouseX >= 0 || dX < 0 ) && ( mouseX < this.colorPickerBackground.offsetWidth || dX > 0 ) )
             {
@@ -2328,11 +2500,6 @@ class ColorPicker {
         this.hueMarker.style.backgroundColor = `rgb(${ hueColor.css.r }, ${ hueColor.css.g }, ${ hueColor.css.b })`;
         this.colorPickerTracker.appendChild( this.hueMarker );
 
-        doAsync( () => {
-            const hueLeft = LX.remapRange( this.currentColor.hsv.h, 0, 360, 0, this.colorPickerTracker.offsetWidth - this.markerSize );
-            this.hueMarker.style.left = hueLeft + "px";
-        } );
-
         const _fromHueX = ( hueX ) => {
             this.hueMarker.style.left = hueX + "px";
             this.currentColor.hsv.h = LX.remapRange( hueX, 0, this.colorPickerTracker.offsetWidth - this.markerSize, 0, 360 );
@@ -2343,6 +2510,8 @@ class ColorPicker {
             this._updateColorValue();
         };
 
+        let hueTrackerRect = null;
+
         let innerMouseDownHue = e => {
             const doc = this.root.ownerDocument;
             doc.addEventListener( 'mousemove', innerMouseMoveHue );
@@ -2353,15 +2522,15 @@ class ColorPicker {
 
             const hueX = clamp( e.offsetX - this.markerHalfSize, 0, this.colorPickerTracker.offsetWidth - this.markerSize );
             _fromHueX( hueX );
+
+            hueTrackerRect = this.colorPickerTracker.getBoundingClientRect();
         }
 
         let innerMouseMoveHue = e => {
-            let dX = e.movementX;
-
-            const rect = this.colorPickerTracker.getBoundingClientRect();
-            const mouseX = e.offsetX - rect.x;
+            const dX = e.movementX;
+            const mouseX = e.x - hueTrackerRect.x;
 
-            if ( dX != 0 && ( mouseX >= 0 || dX < 0 ) && ( mouseX < this.colorPickerTracker.offsetWidth || dX > 0 ) )
+            if ( dX != 0 && ( mouseX >= this.markerHalfSize || dX < 0 ) && ( mouseX < ( this.colorPickerTracker.offsetWidth - this.markerHalfSize ) || dX > 0 ) )
             {
                 const hueX = LX.clamp( parseInt( this.hueMarker.style.left ) + dX, 0, this.colorPickerTracker.offsetWidth - this.markerSize );
                 _fromHueX( hueX )
@@ -2393,11 +2562,6 @@ class ColorPicker {
             this.alphaMarker.style.backgroundColor = `rgb(${ this.currentColor.css.r }, ${ this.currentColor.css.g }, ${ this.currentColor.css.b },${ this.currentColor.css.a })`;
             this.alphaTracker.appendChild( this.alphaMarker );
 
-            doAsync( () => {
-                const alphaLeft = LX.remapRange( this.currentColor.hsv.a, 0, 1, 0, this.alphaTracker.offsetWidth - this.markerSize );
-                this.alphaMarker.style.left = alphaLeft + "px";
-            } );
-
             const _fromAlphaX = ( alphaX ) => {
                 this.alphaMarker.style.left = alphaX + "px";
                 this.currentColor.hsv.a = LX.remapRange( alphaX, 0, this.alphaTracker.offsetWidth - this.markerSize, 0, 1 );
@@ -2406,6 +2570,8 @@ class ColorPicker {
                 this.alphaMarker.style.backgroundColor = `rgb(${ this.currentColor.css.r }, ${ this.currentColor.css.g }, ${ this.currentColor.css.b },${ this.currentColor.css.a })`;
             };
 
+            let alphaTrackerRect = null;
+
             let innerMouseDownAlpha = e => {
                 const doc = this.root.ownerDocument;
                 doc.addEventListener( 'mousemove', innerMouseMoveAlpha );
@@ -2415,15 +2581,14 @@ class ColorPicker {
                 e.stopPropagation();
                 const alphaX = clamp( e.offsetX - this.markerHalfSize, 0, this.alphaTracker.offsetWidth - this.markerSize );
                 _fromAlphaX( alphaX );
+                alphaTrackerRect = this.alphaTracker.getBoundingClientRect();
             }
 
             let innerMouseMoveAlpha = e => {
-                let dX = e.movementX;
-
-                const rect = this.alphaTracker.getBoundingClientRect();
-                const mouseX = e.offsetX - rect.x;
+                const dX = e.movementX;
+                const mouseX = e.x - alphaTrackerRect.x;
 
-                if ( dX != 0 && ( mouseX >= 0 || dX < 0 ) && ( mouseX < this.alphaTracker.offsetWidth || dX > 0 ) )
+                if ( dX != 0 && ( mouseX >= this.markerHalfSize || dX < 0 ) && ( mouseX < ( this.alphaTracker.offsetWidth - this.markerHalfSize ) || dX > 0 ) )
                 {
                     const alphaX = LX.clamp( parseInt( this.alphaMarker.style.left ) + dX, 0, this.alphaTracker.offsetWidth - this.markerSize );
                     _fromAlphaX( alphaX );
@@ -2474,22 +2639,76 @@ class ColorPicker {
 
         this._updateColorValue( hexValue, true );
 
-        doAsync( () => {
-            this._adjustPosition();
+        doAsync( this._placeMarkers.bind( this ) );
 
-            this.root.focus();
+        this.onPopover = this._placeMarkers.bind( this );
+    }
 
-            this._onClick = e => {
-                if( e.target && ( this.root.contains( e.target ) || e.target == this._trigger ) )
-                {
-                    return;
-                }
-                this.destroy();
-            };
+    _placeMarkers() {
 
-            document.body.addEventListener( "mousedown", this._onClick, true );
-            document.body.addEventListener( "focusin", this._onClick, true );
-        }, 10 );
+        this._svToPosition( this.currentColor.hsv.s, this.currentColor.hsv.v );
+
+        const hueLeft = LX.remapRange( this.currentColor.hsv.h, 0, 360, 0, this.colorPickerTracker.offsetWidth - this.markerSize );
+        this.hueMarker.style.left = hueLeft + "px";
+
+        if( this.useAlpha )
+        {
+            const alphaLeft = LX.remapRange( this.currentColor.hsv.a, 0, 1, 0, this.alphaTracker.offsetWidth - this.markerSize );
+            this.alphaMarker.style.left = alphaLeft + "px";
+        }
+    }
+
+    _svToPosition( s, v ) {
+        this.intSatMarker.style.left = `${ LX.remapRange( s, 0, 1, -this.markerHalfSize, this.colorPickerBackground.offsetWidth - this.markerHalfSize ) }px`;
+        this.intSatMarker.style.top = `${ LX.remapRange( 1 - v, 0, 1, -this.markerHalfSize, this.colorPickerBackground.offsetHeight - this.markerHalfSize ) }px`
+    }
+
+    _positionToSv( left, top ) {
+        this.currentColor.hsv.s = LX.remapRange( left, -this.markerHalfSize, this.colorPickerBackground.offsetWidth - this.markerHalfSize, 0, 1 );
+        this.currentColor.hsv.v = 1 - LX.remapRange( top, -this.markerHalfSize, this.colorPickerBackground.offsetHeight - this.markerHalfSize, 0, 1 );
+    }
+
+    _updateColorValue( newHexValue, skipCallback = false ) {
+
+        this.currentColor.set( newHexValue ?? this.currentColor.hsv );
+
+        if( this.callback && !skipCallback )
+        {
+            this.callback( this.currentColor );
+        }
+
+        this.intSatMarker.style.backgroundColor = this.currentColor.hex;
+
+        if( this.useAlpha )
+        {
+            this.alphaTracker.style.color = `rgb(${ this.currentColor.css.r }, ${ this.currentColor.css.g }, ${ this.currentColor.css.b })`;
+        }
+
+        const toFixed = ( s, n = 2) => { return s.toFixed( n ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' ) };
+
+        if( this.colorModel == "CSS" )
+        {
+            const { r, g, b, a } = this.currentColor.css;
+            this.labelWidget.set( `rgb${ this.useAlpha ? 'a' : '' }(${ r },${ g },${ b }${ this.useAlpha ? ',' + toFixed( a ) : '' })` );
+        }
+        else if( this.colorModel == "Hex" )
+        {
+            this.labelWidget.set( ( this.useAlpha ? this.currentColor.hex : this.currentColor.hex.substr( 0, 7 ) ).toUpperCase() );
+        }
+        else if( this.colorModel == "HSV" )
+        {
+            const { h, s, v, a } = this.currentColor.hsv;
+            const components = [ Math.floor( h ) + 'º', Math.floor( s * 100 ) + '%', Math.floor( v * 100 ) + '%' ];
+            if( this.useAlpha ) components.push( toFixed( a ) );
+            this.labelWidget.set( components.join( ' ' ) );
+        }
+        else // RGB
+        {
+            const { r, g, b, a } = this.currentColor.rgb;
+            const components = [ toFixed( r ), toFixed( g ), toFixed( b ) ];
+            if( this.useAlpha ) components.push( toFixed( a ) );
+            this.labelWidget.set( components.join( ' ' ) );
+        }
     }
 
     fromHexColor( hexColor ) {
@@ -2504,139 +2723,260 @@ class ColorPicker {
         this.hueMarker.style.backgroundColor = this.colorPickerBackground.style.backgroundColor = `rgb(${ hueColor.css.r }, ${ hueColor.css.g }, ${ hueColor.css.b })`;
         this.hueMarker.style.left = LX.remapRange( h, 0, 360, -this.markerHalfSize, this.colorPickerTracker.offsetWidth - this.markerHalfSize ) + "px";
 
-        this._updateColorValue( hexColor );
+        this._updateColorValue( hexColor );
+    }
+};
+
+LX.ColorPicker = ColorPicker;
+
+class Calendar {
+
+    /**
+     * @constructor Calendar
+     * @param {String} dateString D/M/Y
+     * @param {Object} options
+     * onChange: Function to call on date changes
+     */
+
+    constructor( dateString, options = {} ) {
+
+        this.root = LX.makeContainer( ["256px", "auto"], "border p-3 bg-primary rounded-lg text-md" );
+
+        this.onChange = options.onChange;
+        this.untilToday = options.untilToday;
+        this.fromToday = options.fromToday;
+
+        if( dateString )
+        {
+            this.fromDateString( dateString );
+        }
+        else
+        {
+            const date = new Date();
+            this.month = date.getMonth() + 1;
+            this.year = date.getFullYear();
+            this.fromMonthYear( this.month, this.year );
+        }
+    }
+
+    _getCurrentDate() {
+        return {
+            day: this.day,
+            month: this.month,
+            year: this.year,
+            fullDate: this.getFullDate()
+        }
+    }
+
+    _previousMonth() {
+
+        this.month = Math.max( 0, this.month - 1 );
+
+        if( this.month == 0 )
+        {
+            this.month = 12;
+            this.year--;
+        }
+
+        this.fromMonthYear( this.month, this.year );
+    }
+
+    _nextMonth() {
+
+        this.month = Math.min( this.month + 1, 12 );
+
+        if( this.month == 12 )
+        {
+            this.month = 0;
+            this.year++;
+        }
+
+        this.fromMonthYear( this.month, this.year );
+    }
+
+    refresh() {
+
+        this.root.innerHTML = "";
+
+        // Header
+        {
+            const header = LX.makeContainer( ["100%", "auto"], "flex flex-row p-1", "", this.root );
+
+            const prevMonthIcon = LX.makeIcon( "left", { title: "Previous Month", iconClass: "border p-1 rounded hover:bg-secondary", svgClass: "sm" } );
+            header.appendChild( prevMonthIcon );
+            prevMonthIcon.addEventListener( "click", () => {
+                this._previousMonth();
+            } );
+
+            const monthYearLabel = LX.makeContainer( ["100%", "auto"], "text-center font-medium select-none", `${ this.monthName } ${ this.year }`, header );
+
+            const nextMonthIcon = LX.makeIcon( "right", { title: "Next Month", iconClass: "border p-1 rounded hover:bg-secondary", svgClass: "sm" } );
+            header.appendChild( nextMonthIcon );
+            nextMonthIcon.addEventListener( "click", () => {
+                this._nextMonth();
+            } );
+        }
+
+        // Body
+        {
+            const daysTable = document.createElement( "table" );
+            daysTable.className = "w-full";
+            this.root.appendChild( daysTable );
+
+            // Table Head
+            {
+                const head = document.createElement( 'thead' );
+                daysTable.appendChild( head );
+
+                const hrow = document.createElement( 'tr' );
+
+                for( const headData of [ "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su" ] )
+                {
+                    const th = document.createElement( 'th' );
+                    th.className = "fg-tertiary text-sm font-normal select-none";
+                    th.innerHTML = `<span>${ headData }</span>`;
+                    hrow.appendChild( th );
+                }
+
+                head.appendChild( hrow );
+            }
+
+            // Table Body
+            {
+                const body = document.createElement( 'tbody' );
+                daysTable.appendChild( body );
+
+                for( let week = 0; week < 6; week++ )
+                {
+                    const hrow = document.createElement( 'tr' );
+                    const weekDays = this.calendarDays.slice( week * 7, week * 7 + 7 );
+
+                    for( const dayData of weekDays )
+                    {
+                        const th = document.createElement( 'th' );
+                        th.className = "leading-loose font-normal rounded select-none cursor-pointer";
+
+                        const dayDate = new Date( `${ this.month }/${ dayData.day }/${ this.year }` );
+                        const date = new Date();
+                        const beforeToday = this.untilToday ? ( dayDate.getTime() < date.getTime() ) : true;
+                        const afterToday = this.fromToday ? ( dayDate.getTime() > date.getTime() ) : true;
+                        const selectable = dayData.currentMonth && beforeToday && afterToday;
+
+                        if( this.currentDate && ( dayData.day == this.currentDate.day ) && ( this.month == this.currentDate.month )
+                            && ( this.year == this.currentDate.year ) && dayData.currentMonth )
+                        {
+                            th.className += ` bg-contrast fg-contrast`;
+                        }
+                        else
+                        {
+                            th.className += ` ${ selectable ? "fg-primary" : "fg-tertiary" } hover:bg-secondary`;
+                        }
+
+                        th.innerHTML = `<span>${ dayData.day }</span>`;
+                        hrow.appendChild( th );
+
+                        if( selectable )
+                        {
+                            th.addEventListener( "click", () => {
+                                this.day = dayData.day;
+                                this.currentDate = this._getCurrentDate();
+                                if( this.onChange )
+                                {
+                                    this.onChange( this.currentDate );
+                                }
+                            } );
+                        }
+                    }
+
+                    body.appendChild( hrow );
+                }
+            }
+        }
     }
 
-    destroy() {
-
-        this._trigger.classList.remove( "triggered" );
+    fromDateString( dateString ) {
 
-        delete this._trigger.picker;
+        const tokens = dateString.split( '/' );
 
-        document.body.removeEventListener( "mousedown", this._onClick, true );
-        document.body.removeEventListener( "focusin", this._onClick, true );
+        this.day = parseInt( tokens[ 0 ] );
+        this.month = parseInt( tokens[ 1 ] );
+        this.year = parseInt( tokens[ 2 ] );
 
-        LX.root.querySelectorAll( ".lexcolorpicker" ).forEach( m => { m.remove(); } );
+        this.currentDate = this._getCurrentDate();
 
-        ColorPicker.currentPicker = null;
+        this.fromMonthYear( this.month, this.year );
     }
 
-    _svToPosition( s, v ) {
-        this.intSatMarker.style.left = `${ LX.remapRange( s, 0, 1, -this.markerHalfSize, this.colorPickerBackground.offsetWidth - this.markerHalfSize ) }px`;
-        this.intSatMarker.style.top = `${ LX.remapRange( 1 - v, 0, 1, -this.markerHalfSize, this.colorPickerBackground.offsetHeight - this.markerHalfSize ) }px`
-    };
+    fromMonthYear( month, year ) {
 
-    _positionToSv( left, top ) {
-        this.currentColor.hsv.s = LX.remapRange( left, -this.markerHalfSize, this.colorPickerBackground.offsetWidth - this.markerHalfSize, 0, 1 );
-        this.currentColor.hsv.v = 1 - LX.remapRange( top, -this.markerHalfSize, this.colorPickerBackground.offsetHeight - this.markerHalfSize, 0, 1 );
-    };
+        // Month is 0-based (0 = January, ... 11 = December)
+        month--;
 
-    _updateColorValue( newHexValue, skipCallback = false ) {
+        year = year ?? new Date().getFullYear();
 
-        this.currentColor.set( newHexValue ?? this.currentColor.hsv );
+        const weekDay = new Date( year, month, 1 ).getDay();
+        const firstDay = weekDay === 0 ? 6 : weekDay - 1; // 0 = Monday, 1 = Tuesday...
+        const daysInMonth = new Date( year, month + 1, 0 ).getDate();
 
-        if( this.callback && !skipCallback )
-        {
-            this.callback( this.currentColor );
-        }
+        // Previous month
+        const prevMonth = month === 0 ? 11 : month - 1;
+        const prevYear = month === 0 ? year - 1 : year;
+        const daysInPrevMonth = new Date( prevYear, prevMonth + 1, 0 ).getDate();
 
-        this.intSatMarker.style.backgroundColor = this.currentColor.hex;
+        // Prepare full grid (up to 6 weeks = 42 days)
+        const calendarDays = [];
 
-        if( this.useAlpha )
+        // Fill in days from previous month
+        for( let i = firstDay - 1; i >= 0; i--)
         {
-            this.alphaTracker.style.color = `rgb(${ this.currentColor.css.r }, ${ this.currentColor.css.g }, ${ this.currentColor.css.b })`;
+            calendarDays.push( { day: daysInPrevMonth - i, currentMonth: false } );
         }
 
-        const toFixed = ( s, n = 2) => { return s.toFixed( n ).replace( /([0-9]+(\.[0-9]+[1-9])?)(\.?0+$)/, '$1' ) };
-
-        if( this.colorModel == "CSS" )
+        // Fill in current month days
+        for ( let i = 1; i <= daysInMonth; i++ )
         {
-            const { r, g, b, a } = this.currentColor.css;
-            this.labelWidget.set( `rgb${ this.useAlpha ? 'a' : '' }(${ r },${ g },${ b }${ this.useAlpha ? ',' + toFixed( a ) : '' })` );
-        }
-        else if( this.colorModel == "Hex" )
-        {
-            this.labelWidget.set( ( this.useAlpha ? this.currentColor.hex : this.currentColor.hex.substr( 0, 7 ) ).toUpperCase() );
-        }
-        else if( this.colorModel == "HSV" )
-        {
-            const { h, s, v, a } = this.currentColor.hsv;
-            const components = [ Math.floor( h ) + 'º', Math.floor( s * 100 ) + '%', Math.floor( v * 100 ) + '%' ];
-            if( this.useAlpha ) components.push( toFixed( a ) );
-            this.labelWidget.set( components.join( ' ' ) );
+            calendarDays.push( { day: i, currentMonth: true } );
         }
-        else // RGB
+
+        // Fill in next month days to complete the grid (if needed)
+        const remaining = 42 - calendarDays.length;
+        for( let i = 1; i <= remaining; i++ )
         {
-            const { r, g, b, a } = this.currentColor.rgb;
-            const components = [ toFixed( r ), toFixed( g ), toFixed( b ) ];
-            if( this.useAlpha ) components.push( toFixed( a ) );
-            this.labelWidget.set( components.join( ' ' ) );
+            calendarDays.push( { day: i, currentMonth: false } );
         }
-    };
-
-    _adjustPosition() {
-
-        const position = [ 0, 0 ];
 
-        // Place menu using trigger position and user options
-        {
-            const rect = this._trigger.getBoundingClientRect();
+        this.monthName = this.getMonthName( month );
+        this.firstDay = firstDay;
+        this.daysInMonth = daysInMonth;
+        this.calendarDays = calendarDays;
 
-            let alignWidth = true;
+        this.refresh();
+    }
 
-            switch( this.side )
-            {
-                case "left":
-                    position[ 0 ] += ( rect.x - this.root.offsetWidth );
-                    alignWidth = false;
-                    break;
-                case "right":
-                    position[ 0 ] += ( rect.x + rect.width );
-                    alignWidth = false;
-                    break;
-                case "top":
-                    position[ 1 ] += ( rect.y - this.root.offsetHeight );
-                    alignWidth = true;
-                    break;
-                case "bottom":
-                    position[ 1 ] += ( rect.y + rect.height );
-                    alignWidth = true;
-                    break;
-                default:
-                    break;
-            }
+    getMonthName( monthIndex, locale = "en-US" ) {
+        const formatter = new Intl.DateTimeFormat( locale, { month: "long" } );
+        return formatter.format( new Date( 2000, monthIndex, 1 ) );
+    }
 
-            switch( this.align )
-            {
-                case "start":
-                    if( alignWidth ) { position[ 0 ] += rect.x; }
-                    else { position[ 1 ] += rect.y; }
-                    break;
-                case "center":
-                    if( alignWidth ) { position[ 0 ] += ( rect.x + rect.width * 0.5 ) - this.root.offsetWidth * 0.5; }
-                    else { position[ 1 ] += ( rect.y + rect.height * 0.5 ) - this.root.offsetHeight * 0.5; }
-                    break;
-                case "end":
-                    if( alignWidth ) { position[ 0 ] += rect.x - this.root.offsetWidth + rect.width; }
-                    else { position[ 1 ] += rect.y - this.root.offsetHeight + rect.height; }
-                    break;
-                default:
-                    break;
-            }
-        }
+    getFullDate() {
+        return `${ this.monthName } ${ this.day }${ this._getOrdinalSuffix( this.day ) }, ${ this.year }`;
+    }
 
-        if( this.avoidCollisions )
+    _getOrdinalSuffix( day ) {
+        if ( day > 3 && day < 21 ) return "th";
+        switch ( day % 10 )
         {
-            position[ 0 ] = LX.clamp( position[ 0 ], 0, window.innerWidth - this.root.offsetWidth - this._windowPadding );
-            position[ 1 ] = LX.clamp( position[ 1 ], 0, window.innerHeight - this.root.offsetHeight - this._windowPadding );
+            case 1: return "st";
+            case 2: return "nd";
+            case 3: return "rd";
+            default: return "th";
         }
-
-        this.root.style.left = `${ position[ 0 ] }px`;
-        this.root.style.top = `${ position[ 1 ] }px`;
     }
-};
+}
 
-LX.ColorPicker = ColorPicker;
+LX.Calendar = Calendar;
+
+/* Layout Classes */
 
 class Area {
 
@@ -2861,7 +3201,7 @@ class Area {
      * @method split
      * @param {Object} options
      * type: Split mode (horizontal, vertical) ["horizontal"]
-     * sizes: Size of each new area (Array) ["50%", "50%"]
+     * sizes: CSS Size of each new area (Array) ["50%", "50%"]
      * resize: Allow area manual resizing [true]
      * sizes: "Allow the area to be minimized [false]
      */
@@ -2876,11 +3216,12 @@ class Area {
             this.root = this.sections[ 1 ].root;
         }
 
-        const type = options.type || "horizontal";
+        const type = options.type ?? "horizontal";
         const sizes = options.sizes || [ "50%", "50%" ];
         const auto = (options.sizes === 'auto') || ( options.sizes && options.sizes[ 0 ] == "auto" && options.sizes[ 1 ] == "auto" );
 
-        if( !sizes[ 1 ] )
+        // Secondary area fills space
+        if( !sizes[ 1 ] || ( sizes[ 0 ] != "auto" && sizes[ 1 ] == "auto" ) )
         {
             let size = sizes[ 0 ];
             let margin = options.top ? options.top : 0;
@@ -2893,17 +3234,13 @@ class Area {
             sizes[ 1 ] = "calc( 100% - " + size + " )";
         }
 
-        // Create areas
-        let area1 = new Area( { skipAppend: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
-        let area2 = new Area( { skipAppend: true, className: "split" } );
-
-        area1.parentArea = this;
-        area2.parentArea = this;
-
         let minimizable = options.minimizable ?? false;
         let resize = ( options.resize ?? true ) || minimizable;
+        let fixedSize = options.fixedSize ?? !resize;
+        let splitbarOffset = 0;
+        let primarySize = [];
+        let secondarySize = [];
 
-        let data = "0px";
         this.offset = 0;
 
         if( resize )
@@ -2923,93 +3260,104 @@ class Area {
 
             this.splitBar.addEventListener( 'mousedown', innerMouseDown );
 
-            data = ( LX.DEFAULT_SPLITBAR_SIZE / 2 ) + "px"; // updates
-
-            // Being minimizable means it's also resizeable!
-            if( minimizable )
-            {
-                this.splitExtended = false;
-
-                // Keep state of the animation when ends...
-                area2.root.addEventListener('animationend', e => {
-                    const opacity = getComputedStyle( area2.root ).opacity;
-                    area2.root.classList.remove( e.animationName + "-" + type );
-                    area2.root.style.opacity = opacity;
-                    flushCss(area2.root);
-                });
-
-                this.splitBar.addEventListener("contextmenu", e => {
-                    e.preventDefault();
-                    addContextMenu(null, e, c => {
-                        c.add("Extend", { disabled: this.splitExtended, callback: () => { this.extend() } });
-                        c.add("Reduce", { disabled: !this.splitExtended, callback: () => { this.reduce() } });
-                    });
-                });
-            }
+            splitbarOffset = ( LX.DEFAULT_SPLITBAR_SIZE / 2 ); // updates
         }
 
         if( type == "horizontal" )
         {
-            let width1 = sizes[ 0 ],
-                width2 = sizes[ 1 ];
+            this.root.style.display = "flex";
 
-            if( width1.constructor == Number )
+            if( !fixedSize )
             {
-                width1 += "px";
-            }
+                const parentWidth = this.root.offsetWidth;
+                const leftPx = parsePixelSize( sizes[ 0 ], parentWidth );
+                const rightPx = parsePixelSize(  sizes[ 1 ], parentWidth );
+                const leftPercent = ( leftPx / parentWidth ) * 100;
+                const rightPercent = ( rightPx / parentWidth ) * 100;
 
-            if( width2.constructor == Number )
+                // Style using percentages
+                primarySize[ 0 ] = `calc(${ leftPercent }% - ${ splitbarOffset }px)`;
+                secondarySize[ 0 ] = `calc(${ rightPercent }% - ${ splitbarOffset }px)`;
+            }
+            else
             {
-                width2 += "px";
+                primarySize[ 0 ] = `calc(${ sizes[ 0 ] } - ${ splitbarOffset }px)`;
+                secondarySize[ 0 ] = `calc(${ sizes[ 1 ] } - ${ splitbarOffset }px)`;
             }
 
-            area1.root.style.width = "calc( " + width1 + " - " + data + " )";
-            area1.root.style.height = "calc(100% - 0px)";
-            area2.root.style.width = "calc( " + width2 + " - " + data + " )";
-            area2.root.style.height = "calc(100% - 0px)";
-            this.root.style.display = "flex";
+            primarySize[ 1 ] = "100%";
+            secondarySize[ 1 ] = "100%";
         }
         else // vertical
         {
-            area1.root.style.width = "100%";
-            area2.root.style.width = "100%";
-
             if( auto )
             {
-                area1.root.style.height = "auto";
-
-                // Listen resize event on first area
-                const resizeObserver = new ResizeObserver( entries => {
-                    for ( const entry of entries )
-                    {
-                        const size = entry.target.getComputedSize();
-                        area2.root.style.height = "calc(100% - " + ( size.height ) + "px )";
-                    }
-                });
+                primarySize[ 1 ] = "auto";
+            }
+            else if( !fixedSize )
+            {
+                const parentHeight = this.root.offsetHeight;
+                const topPx = parsePixelSize( sizes[ 0 ], parentHeight );
+                const bottomPx = parsePixelSize( sizes[ 1 ], parentHeight );
+                const topPercent = ( topPx / parentHeight ) * 100;
+                const bottomPercent = ( bottomPx / parentHeight ) * 100;
 
-                resizeObserver.observe( area1.root );
+                primarySize[ 1 ] = ( sizes[ 0 ] == "auto" ? "auto" : `calc(${ topPercent }% - ${ splitbarOffset }px)`);
+                secondarySize[ 1 ] = ( sizes[ 1 ] == "auto" ? "auto" : `calc(${ bottomPercent }% - ${ splitbarOffset }px)`);
             }
             else
             {
-                let height1 = sizes[ 0 ],
-                    height2 = sizes[ 1 ];
+                primarySize[ 1 ] = ( sizes[ 0 ] == "auto" ? "auto" : `calc(${ sizes[ 0 ] } - ${ splitbarOffset }px)`);
+                secondarySize[ 1 ] = ( sizes[ 1 ] == "auto" ? "auto" : `calc(${ sizes[ 1 ] } - ${ splitbarOffset }px)`);
+            }
 
-                if( height1.constructor == Number )
-                {
-                    height1 += "px";
-                }
+            primarySize[ 0 ] = "100%";
+            secondarySize[ 0 ] = "100%";
+        }
 
-                if( height2.constructor == Number )
+        // Create areas
+        let area1 = new Area( { width: primarySize[ 0 ], height: primarySize[ 1 ], skipAppend: true, className: "split" + ( options.menubar || options.sidebar ? "" : " origin" ) } );
+        let area2 = new Area( { width: secondarySize[ 0 ], height: secondarySize[ 1 ], skipAppend: true, className: "split" } );
+
+        if( auto && type == "vertical" )
+        {
+            // Listen resize event on first area
+            const resizeObserver = new ResizeObserver( entries => {
+                for ( const entry of entries )
                 {
-                    height2 += "px";
+                    const size = entry.target.getComputedSize();
+                    area2.root.style.height = "calc(100% - " + ( size.height ) + "px )";
                 }
+            });
 
-                area1.root.style.width = "100%";
-                area1.root.style.height = ( height1 == "auto" ? height1 : "calc( " + height1 + " - " + data + " )");
-                area2.root.style.height = ( height2 == "auto" ? height2 : "calc( " + height2 + " - " + data + " )");
-            }
+            resizeObserver.observe( area1.root );
+        }
+
+        // Being minimizable means it's also resizeable!
+        if( resize && minimizable )
+        {
+            this.splitExtended = false;
+
+            // Keep state of the animation when ends...
+            area2.root.addEventListener('animationend', e => {
+                const opacity = getComputedStyle( area2.root ).opacity;
+                area2.root.classList.remove( e.animationName + "-" + type );
+                area2.root.style.opacity = opacity;
+                flushCss( area2.root );
+            });
+
+            this.splitBar.addEventListener("contextmenu", e => {
+                e.preventDefault();
+                addContextMenu(null, e, c => {
+                    c.add("Extend", { disabled: this.splitExtended, callback: () => { this.extend() } });
+                    c.add("Reduce", { disabled: !this.splitExtended, callback: () => { this.reduce() } });
+                });
+            });
         }
 
+        area1.parentArea = this;
+        area2.parentArea = this;
+
         this.root.appendChild( area1.root );
 
         if( resize )
@@ -3018,6 +3366,7 @@ class Area {
         }
 
         this.root.appendChild( area2.root );
+
         this.sections = [ area1, area2 ];
         this.type = type;
 
@@ -3131,10 +3480,10 @@ class Area {
             return;
         }
 
-        let [area1, area2] = this.sections;
+        let [ area1, area2 ] = this.sections;
         this.splitExtended = true;
 
-        if( this.type == "vertical")
+        if( this.type == "vertical" )
         {
             this.offset = area2.root.offsetHeight;
             area2.root.classList.add("fadeout-vertical");
@@ -3145,7 +3494,7 @@ class Area {
         {
             this.offset = area2.root.offsetWidth - 8; // Force some height here...
             area2.root.classList.add("fadeout-horizontal");
-            this._moveSplit(-Infinity, true, 8);
+            this._moveSplit( -Infinity, true, 8 );
         }
 
         doAsync( () => this.propagateEvent('onresize'), 150 );
@@ -3252,8 +3601,7 @@ class Area {
 
         LX.menubars.push( menubar );
 
-        const height = 48; // pixels
-        const [ bar, content ] = this.split({ type: 'vertical', sizes: [height, null], resize: false, menubar: true });
+        const [ bar, content ] = this.split({ type: 'vertical', sizes: ["48px", null], resize: false, menubar: true });
         menubar.siblingArea = content;
 
         bar.attach( menubar );
@@ -3370,7 +3718,8 @@ class Area {
                 img: b.img,
                 className: b.class ?? "",
                 title: b.name,
-                overflowContainerX: overlayPanel.root
+                overflowContainerX: overlayPanel.root,
+                swap: b.swap
             };
 
             if( group )
@@ -3507,7 +3856,7 @@ class Area {
 
         const a2 = this.sections[ 1 ];
         const a2Root = a2.root;
-        const splitData = " - "+ LX.DEFAULT_SPLITBAR_SIZE + "px";
+        const splitData = "- "+ LX.DEFAULT_SPLITBAR_SIZE + "px";
 
         let transition = null;
         if( !forceAnimation )
@@ -3515,30 +3864,47 @@ class Area {
             // Remove transitions for this change..
             transition = a1Root.style.transition;
             a1Root.style.transition = a2Root.style.transition = "none";
-            flushCss( a1Root );
-            flushCss( a2Root );
+            // flushCss( a1Root );
         }
 
         if( this.type == "horizontal" )
         {
             var size = Math.max( a2Root.offsetWidth + dt, parseInt( a2.minWidth ) );
             if( forceWidth ) size = forceWidth;
-            a1Root.style.width = "-moz-calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.width = "-webkit-calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.width = "calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.minWidth = parseInt( a1.minWidth ) + "px";
-            a2Root.style.width = size + "px";
-            if( a1.maxWidth != Infinity ) a2Root.style.minWidth = "calc( 100% - " + parseInt( a1.maxWidth ) + "px" + " )";
+
+            const parentWidth = this.size[ 0 ];
+            const rightPercent = ( size / parentWidth ) * 100;
+            const leftPercent = Math.max( 0, 100 - rightPercent );
+
+            a1Root.style.width = `-moz-calc(${ leftPercent }% ${ splitData })`;
+            a1Root.style.width = `-webkit-calc( ${ leftPercent }% ${ splitData })`;
+            a1Root.style.width = `calc( ${ leftPercent }% ${ splitData })`;
+            a2Root.style.width = `${ rightPercent }%`;
+            a2Root.style.width = `${ rightPercent }%`;
+            a2Root.style.width = `${ rightPercent }%`;
+
+            if( a1.maxWidth != Infinity )
+            {
+                a2Root.style.minWidth = "calc( 100% - " + parseInt( a1.maxWidth ) + "px" + " )";
+            }
         }
         else
         {
-            var size = Math.max((a2Root.offsetHeight + dt) + a2.offset, parseInt(a2.minHeight));
+            var size = Math.max( ( a2Root.offsetHeight + dt ) + a2.offset, parseInt(a2.minHeight) );
             if( forceWidth ) size = forceWidth;
-            a1Root.style.height = "-moz-calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.height = "-webkit-calc( 100% - " + size + "px " + splitData + " )";
-            a1Root.style.height = "calc( 100% - " + size + "px " + splitData + " )";
+
+            const parentHeight = this.size[ 1 ];
+            const bottomPercent = ( size / parentHeight ) * 100;
+            const topPercent = Math.max( 0, 100 - bottomPercent );
+
+            a1Root.style.height = `-moz-calc(${ topPercent }% ${ splitData })`;
+            a1Root.style.height = `-webkit-calc( ${ topPercent }% ${ splitData })`;
+            a1Root.style.height = `calc( ${ topPercent }% ${ splitData })`;
+            a2Root.style.height = `${ bottomPercent }%`;
+            a2Root.style.height = `${ bottomPercent }%`;
+            a2Root.style.height = `${ bottomPercent }%`;
+
             a1Root.style.minHeight = a1.minHeight + "px";
-            a2Root.style.height = ( size - a2.offset ) + "px";
         }
 
         if( !forceAnimation )
@@ -3547,10 +3913,10 @@ class Area {
             a1Root.style.transition = a2Root.style.transition = transition;
         }
 
-        this._update();
-
-        // Resize events
-        this.propagateEvent( 'onresize' );
+        doAsync( () => {
+            this._update();
+            this.propagateEvent( 'onresize' );
+        }, 10 );
     }
 
     _disableSplitResize() {
@@ -5216,8 +5582,9 @@ class Widget {
     static COUNTER      = 33;
     static TABLE        = 34;
     static TABS         = 35;
-    static LABEL        = 36;
-    static BLANK        = 37;
+    static DATE         = 36;
+    static LABEL        = 37;
+    static BLANK        = 38;
 
     static NO_CONTEXT_TYPES = [
         Widget.BUTTON,
@@ -5455,6 +5822,7 @@ class Widget {
             case Widget.COUNTER: return "Counter";
             case Widget.TABLE: return "Table";
             case Widget.TABS: return "Tabs";
+            case Widget.DATE: return "Date";
             case Widget.LABEL: return "Label";
             case Widget.BLANK: return "Blank";
             case Widget.CUSTOM: return this.customName;
@@ -6055,8 +6423,11 @@ class NodeTree {
                 actionEl.className = "lexicon " + a.icon;
                 actionEl.title = a.name;
                 actionEl.addEventListener("click", function( e ) {
-                    a.callback( node, actionEl );
-                    e.stopPropagation();
+                    if( a.callback )
+                    {
+                        a.callback( node, actionEl );
+                        e.stopPropagation();
+                    }
                 });
 
                 inputContainer.appendChild( actionEl );
@@ -6116,7 +6487,17 @@ class NodeTree {
 
         this.data = newData ?? this.data;
         this.domEl.querySelector( "ul" ).innerHTML = "";
-        this._createItem( null, this.data, 0, selectedId );
+        if( this.data.constructor === Object )
+        {
+            this._createItem( null, this.data, 0, selectedId );
+        }
+        else
+        {
+            for( let d of this.data )
+            {
+                this._createItem( null, d, 0, selectedId );
+            }
+        }
     }
 
     /* Refreshes the tree and focuses current element */
@@ -6147,6 +6528,8 @@ class NodeTree {
     }
 }
 
+LX.NodeTree = NodeTree;
+
 /**
  * @class Blank
  * @description Blank Widget
@@ -6243,8 +6626,8 @@ class TextInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         this.valid = ( v ) => {
@@ -6382,8 +6765,8 @@ class TextArea extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         let container = document.createElement( "div" );
@@ -6476,8 +6859,8 @@ class Button extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            wValue.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            wValue.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var wValue = document.createElement( 'button' );
@@ -6537,6 +6920,7 @@ class Button extends Widget {
             wValue.querySelector( "a" ).classList.add( "swap-off" );
 
             const input = document.createElement( "input" );
+            input.className = "p-0 border-0";
             input.type = "checkbox";
             wValue.prepend( input );
 
@@ -6739,8 +7123,8 @@ class ComboButtons extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         this.root.appendChild( container );
@@ -6956,8 +7340,8 @@ class Select extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         let container = document.createElement( "div" );
@@ -7304,11 +7688,8 @@ class Curve extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
-            flushCss( container );
-            curveInstance.canvas.width = container.offsetWidth;
-            curveInstance.redraw();
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( "div" );
@@ -7325,6 +7706,16 @@ class Curve extends Widget {
         container.appendChild( curveInstance.element );
         this.curveInstance = curveInstance;
 
+        const observer = new ResizeObserver( entries => {
+            for ( const entry of entries )
+            {
+                curveInstance.canvas.width = entry.contentRect.width;
+                curveInstance.redraw();
+            }
+        });
+
+        observer.observe( container );
+
         doAsync( this.onResize.bind( this ) );
     }
 }
@@ -7358,8 +7749,8 @@ class Dial extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
             flushCss( container );
             dialInstance.element.style.height = dialInstance.element.offsetWidth + "px";
             dialInstance.canvas.width = dialInstance.element.offsetWidth;
@@ -7413,8 +7804,8 @@ class Layers extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( "div" );
@@ -7638,8 +8029,8 @@ class List extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            listContainer.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            listContainer.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         this._updateValues = ( newValues ) => {
@@ -7715,8 +8106,8 @@ class Tags extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            tagsContainer.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            tagsContainer.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         // Show tags
@@ -7816,8 +8207,8 @@ class Checkbox extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( "div" );
@@ -7899,8 +8290,8 @@ class Toggle extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement('div');
@@ -8082,14 +8473,24 @@ class ColorInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( 'span' );
         container.className = "lexcolor";
         this.root.appendChild( container );
 
+        this.picker = new ColorPicker( value, {
+            colorModel: options.useRGB ? "RGB" : "Hex",
+            useAlpha,
+            onChange: ( color ) => {
+                this._fromColorPicker = true;
+                this.set( color.hex );
+                delete this._fromColorPicker;
+            }
+        } );
+
         let sampleContainer = LX.makeContainer( ["18px", "18px"], "flex flex-row bg-contrast rounded overflow-hidden", "", container );
         sampleContainer.tabIndex = "1";
         sampleContainer.addEventListener( "click", e => {
@@ -8097,15 +8498,8 @@ class ColorInput extends Widget {
             {
                 return;
             }
-            new ColorPicker( value, sampleContainer, {
-                colorModel: options.useRGB ? "RGB" : "Hex",
-                useAlpha,
-                onChange: ( color ) => {
-                    this._fromColorPicker = true;
-                    this.set( color.hex );
-                    delete this._fromColorPicker;
-                }
-            } );
+
+            this._popover = new Popover( sampleContainer, [ this.picker ] );
         } );
 
         let colorSampleRGB = document.createElement( 'div' );
@@ -8173,8 +8567,8 @@ class RangeInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         const container = document.createElement( 'div' );
@@ -8287,8 +8681,8 @@ class NumberInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = options.inputWidth ?? `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( 'div' );
@@ -8523,8 +8917,8 @@ class Vector extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         const vectorInputs = [];
@@ -8877,8 +9271,8 @@ class OTPInput extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         this.disabled = options.disabled ?? false;
@@ -9023,8 +9417,8 @@ class Pad extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         var container = document.createElement( 'div' );
@@ -9143,8 +9537,8 @@ class Progress extends Widget {
         };
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         const container = document.createElement('div');
@@ -9270,8 +9664,8 @@ class FileInput extends Widget {
         let read = options.read ?? true;
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            input.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            input.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         // Create hidden input
@@ -9597,8 +9991,8 @@ class Table extends Widget {
         super( Widget.TABLE, name, null, options );
 
         this.onResize = ( rect ) => {
-            const realNameWidth = ( this.root.domName?.offsetWidth ?? 0 );
-            container.style.width = `calc( 100% - ${ realNameWidth }px)`;
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
         };
 
         const container = document.createElement('div');
@@ -10098,6 +10492,75 @@ class Table extends Widget {
 
 LX.Table = Table;
 
+/**
+ * @class DatePicker
+ * @description DatePicker Widget
+ */
+
+class DatePicker extends Widget {
+
+    constructor( name, dateString, callback, options = { } ) {
+
+        super( Widget.DATE, name, null, options );
+
+        if( options.today )
+        {
+            const date = new Date();
+            dateString = `${ date.getDate() }/${ date.getMonth() + 1 }/${ date.getFullYear() }`;
+        }
+
+        this.onGetValue = () => {
+            return dateString;
+        }
+
+        this.onSetValue = ( newValue, skipCallback, event ) => {
+
+            dateString = newValue;
+
+            this.calendar.fromDateString( newValue );
+
+            refresh( this.calendar.getFullDate() );
+
+            if( !skipCallback )
+            {
+                this._trigger( new IEvent( name, newValue, event ), callback );
+            }
+        }
+
+        this.onResize = ( rect ) => {
+            const realNameWidth = ( this.root.domName?.style.width ?? "0px" );
+            container.style.width = `calc( 100% - ${ realNameWidth })`;
+        };
+
+        const container = document.createElement('div');
+        container.className = "lexdate";
+        this.root.appendChild( container );
+
+        this.calendar = new Calendar( dateString, { onChange: ( date ) => {
+            this.set( `${ date.day }/${ date.month }/${ date.year }` )
+        }, ...options });
+
+        const refresh = ( currentDate ) => {
+            container.innerHTML = "";
+            const calendarIcon = LX.makeIcon( "calendar" );
+            const calendarButton = new Button( null, currentDate ?? "Pick a date", () => {
+                this._popover = new Popover( calendarButton.root, ( popoverRoot ) => {
+                    popoverRoot.appendChild( this.calendar.root );
+                } );
+            }, { buttonClass: `flex flex-row px-3 ${ currentDate ? "" : "fg-tertiary" } justify-between` } );
+
+            calendarButton.root.querySelector( "button" ).appendChild( calendarIcon );
+            container.appendChild( calendarButton.root );
+        };
+
+        refresh( dateString ? this.calendar.getFullDate(): null );
+
+        doAsync( this.onResize.bind( this ) );
+    }
+}
+
+LX.DatePicker = DatePicker;
+
 /**
  * @class Panel
  */
@@ -11244,6 +11707,23 @@ class Panel {
         const widget = new Table( name, data, options );
         return this._attachWidget( widget );
     }
+
+    /**
+     * @method addDate
+     * @param {String} name Widget name
+     * @param {String} dateString
+     * @param {Function} callback
+     * @param {Object} options:
+     * hideName: Don't use name as label [false]
+     * today: Set current day as selected by default
+     * untilToday: Allow dates only until current day
+     * fromToday: Allow dates only from current day
+     */
+
+    addDate( name, dateString, callback, options = { } ) {
+        const widget = new DatePicker( name, dateString, callback, options );
+        return this._attachWidget( widget );
+    }
 }
 
 LX.Panel = Panel;
@@ -12349,12 +12829,6 @@ class CanvasCurve {
             if( o.xrange ) element.xrange = o.xrange;
             if( o.yrange ) element.yrange = o.yrange;
             if( o.smooth ) element.smooth = o.smooth;
-            var rect = canvas.parentElement.getBoundingClientRect();
-            if( canvas.parentElement.parentElement ) rect = canvas.parentElement.parentElement.getBoundingClientRect();
-            if( rect && canvas.width != rect.width && rect.width && rect.width < 1000 )
-            {
-                canvas.width = rect.width;
-            }
 
             var ctx = canvas.getContext( "2d" );
             ctx.setTransform( 1, 0, 0, 1, 0, 0 );
@@ -12689,12 +13163,6 @@ class CanvasDial {
             if( o.xrange ) element.xrange = o.xrange;
             if( o.yrange ) element.yrange = o.yrange;
             if( o.smooth ) element.smooth = o.smooth;
-            var rect = canvas.parentElement.getBoundingClientRect();
-            if( canvas.parentElement.parentElement ) rect = canvas.parentElement.parentElement.getBoundingClientRect();
-            if( rect && canvas.width != rect.width && rect.width && rect.width < 1000 )
-            {
-                canvas.width = rect.width;
-            }
 
             var ctx = canvas.getContext( "2d" );
             ctx.setTransform( 1, 0, 0, 1, 0, 0 );
@@ -14288,6 +14756,7 @@ LX.ICONS = {
     "sidebar": [512, 512, [], "regular", "M64 64h384a32 32 0 0 1 32 32v320a32 32 0 0 1-32 32H64a32 32 0 0 1-32-32V96a32 32 0 0 1 32-32zm128 0v384", null, "fill=none stroke-width=50 stroke-linejoin=round stroke-linecap=round"],
     "table-cells": [512, 512, [], "solid", "M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm88 64l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0zM64 224l88 0 0 64-88 0 0-64zm232 0l0 64-88 0 0-64 88 0zm64 0l88 0 0 64-88 0 0-64zM152 352l0 64-88 0 0-64 88 0zm56 0l88 0 0 64-88 0 0-64zm240 0l0 64-88 0 0-64 88 0z"],
     "table-cells-large": [512, 512, [], "solid", "M448 96l0 128-160 0 0-128 160 0zm0 192l0 128-160 0 0-128 160 0zM224 224L64 224 64 96l160 0 0 128zM64 288l160 0 0 128L64 416l0-128zM64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32z"],
+    "frame": [24, 24, [], "solid", "M2 6h20M2 18h20M6 2v20M18 2v20", null, "fill=none stroke-width=2 stroke-linejoin=round stroke-linecap=round"],
     "lightbulb": [384, 512, [], "regular", "M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7c0 0 0 0 0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5L109 384c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8c0 0 0 0 0 0s0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4c0 0 0 0 0 0s0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5l-48.6 0c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8c0 0 0 0 0 0s0 0 0 0s0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80l0-16 160 0 0 16c0 44.2-35.8 80-80 80z"],
     "flag": [448, 512, [], "regular", "M48 24C48 10.7 37.3 0 24 0S0 10.7 0 24L0 64 0 350.5 0 400l0 88c0 13.3 10.7 24 24 24s24-10.7 24-24l0-100 80.3-20.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30l0-279.7c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L48 52l0-28zm0 77.5l96.6-24.2c27-6.7 55.5-3.6 80.4 8.8c54.9 27.4 118.7 29.7 175 6.8l0 241.8-24.4 9.1c-33.7 12.6-71.2 10.7-103.4-5.4c-48.2-24.1-103.3-30.1-155.6-17.1L48 338.5l0-237z"],
     "newspaper": [512, 512, [], "regular", "M168 80c-13.3 0-24 10.7-24 24l0 304c0 8.4-1.4 16.5-4.1 24L440 432c13.3 0 24-10.7 24-24l0-304c0-13.3-10.7-24-24-24L168 80zM72 480c-39.8 0-72-32.2-72-72L0 112C0 98.7 10.7 88 24 88s24 10.7 24 24l0 296c0 13.3 10.7 24 24 24s24-10.7 24-24l0-304c0-39.8 32.2-72 72-72l272 0c39.8 0 72 32.2 72 72l0 304c0 39.8-32.2 72-72 72L72 480zM176 136c0-13.3 10.7-24 24-24l96 0c13.3 0 24 10.7 24 24l0 80c0 13.3-10.7 24-24 24l-96 0c-13.3 0-24-10.7-24-24l0-80zm200-24l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l32 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-32 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zM200 272l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 80l208 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-208 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"],