lexgui 0.6.12 → 0.7.1

package/changelog.md

@@ -2,7 +2,66 @@
 
 ## dev
 
-## 0.6.12 (master)
+## 0.7.1 (master)
+
+Added support for selecting custom Min, Max range in RangeInput component.
+Added value labels to RangeInput component.
+`LX.asTooltip` Updates:
+- Now supports `options.offsetX`, `options.offsetY` and `options.callback`.
+- Change content and offsets dynamically using `trigger.dataset["tooltipContent" | "tooltipOffsetX" | "tooltipOffsetY"]`.
+Fixed Popovers using `options.reference`.
+
+## 0.7.0
+
+General/Utils:
+- "Components" have been renamed to "Extensions".
+- Every elements, widget, etc. is now a "Component".
+- Added support for `LX.toCamelCase` and `LX.toTitleCase`.
+- Polished CSS.
+- Changed LexGUI brand icons.
+- Unified code fonts. Using now CascadiaCode (https://github.com/microsoft/cascadia-code).
+
+New Components:
+- Skeleton Component (Feedback)
+- Breadcrumb Component (Navigation)
+- Rate Component (Data Input)
+
+New "default" | "compact" layout spacing:
+- `options.spacingMode` in LX.init
+- `LX.setSpacingMode` and `LX.switchSpacing`
+
+Component Updates:
+- Badges:
+  - Added `options.parent` to use them as notification indicators inside an element
+  - Added `options.chip` to use as notification indicators alone
+  - Added `options.callback` option on click.
+- Toast:
+  - Allow creation at left, center and right + top/bottom using `options.position`.
+- Sidebar:
+  - Added subitem option `options.content` to match main items.
+  - Added entry option `options.skipSelection` to avoid selections even with `displaySelected`.
+  - Support swap icons in entries.
+  - Fixed subentry selection.
+- Dropdowns:
+  - Support radio button groups.
+- AssetView:
+  - Improved toolbar with Dropdowns. Now refreshes icons on change sort and layout modes.
+- Table:
+  - Added support for Calendar Date filter in Table Component.
+- Other Bugfixes:
+  - Fixed Select Component above placement on filter.
+  - FIxed CodeEditor 'End' horizontal scrolling.
+  - Fixed CodeEditor CSS harcoded Tab height.
+  - Fixed dropdown, popovers, etc within modal backdrop.
+  - Fixed minor issue with CalendarRange when selecting >1 months apart.
+
+Improved Documentation:
+- Added AssetView, CodeSnippet and other small components (badge, sheet, toast, etc.).
+- Added Docmaker and Video Editor extension docs.
+- Added addition version to elements in sidebar.
+- Added Changelog section.
+
+## 0.6.12
 
 Widgets:
 - Button Widget now supports `options.mustConfirm` to confirm the trigger with custom options.
@@ -122,10 +181,10 @@ Added `hover:scale` CSS selectors.
 ## 0.6.5
 
 Timeline:
-  - Refactored undo-redo.
-  - ClipsTimeline: added an argument on `addClip` to start search at a particular track.
-  - Documentation updated.
-  - Minor fixes.
+- Refactored undo-redo.
+- ClipsTimeline: added an argument on `addClip` to start search at a particular track.
+- Documentation updated.
+- Minor fixes.
 
 Use sidebar inside Sheet element on mobile.
 Removed LX.UTILS. Moved methods to global namespace `LX`.
@@ -134,11 +193,11 @@ Minor fixes in example demos.
 ## 0.6.4
 
 Timeline:
-  - Paste refactor.
-  - `onUpdateTrack` now expects an array of track indices as argument.
-  - Added root.
-  - Added documentation.
-  - Fixed example.
+- Paste refactor.
+- `onUpdateTrack` now expects an array of track indices as argument.
+- Added root.
+- Added documentation.
+- Fixed example.
 
 Widgets:
 - Centered Map2D initial position.
@@ -190,9 +249,6 @@ Improved robustness of `LX.getSupportedDOMName`.
 
 `LX.init` now has to called using `await`.
 Use Dropdowns elements in menubar.
-Remove legacy:
-  - Removed `options.selected` in ComboButtons Widget.
-  - Removed FA icons.
 Added LucideIcons as main icon provider.
 `LX.makeIcon`: Support for solid variants in supported icons (also using `iconName@variant`).
 `LX.registerIcon`: Support for classes and attributes for svg and path elements.
@@ -205,14 +261,18 @@ Added support for right sidebar.
 Restyled Number Widget units to avoid layout trashing when recomputing units span location.
 
 CodeEditor:
-  - Remove language images and use SVG instead.
-  - Scrolling fixes.
-  - Fixed minor css issues.
+- Remove language images and use SVG instead.
+- Scrolling fixes.
+- Fixed minor css issues.
+
+Remove legacy:
+- Removed `options.selected` in ComboButtons Widget.
+- Removed FA icons.
 
 Docs updated:
-  - Added interactive code examples for widgets.
-  - Improved widget list parameters and options.
-  - Added live examples for sidebar and menubar.
+- Added interactive code examples for widgets.
+- Improved widget list parameters and options.
+- Added live examples for sidebar and menubar.
 
 ## 0.5.11
 
@@ -560,8 +620,8 @@ Minor bug fixes.
 Timeline: Fixed timeline signals and added callbacks
 
 Number/Vector widgets:
-    - Support for onPress&onRelease for catching mouse events.
-    - Added `setLimits` for min, max, step parameters.
+- Support for onPress&onRelease for catching mouse events.
+- Added `setLimits` for min, max, step parameters.
 
 Added Size Widget (N dimension number widget).
 Minor bug fixes.

package/demo.js

@@ -1,53 +1,66 @@
 import { LX } from 'lexgui';
-import 'lexgui/components/codeeditor.js';
-import 'lexgui/components/timeline.js';
-import 'lexgui/components/audio.js';
+import 'lexgui/extensions/codeeditor.js';
+import 'lexgui/extensions/timeline.js';
+import 'lexgui/extensions/audio.js';
 
 window.LX = LX;
 
 const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
+const starterTheme = LX.getTheme();
 
 // Menubar
 {
     const menubar = area.addMenubar( [
         { name: "Docs", callback: () => { window.open("./docs/") } },
+        { name: "Components", callback: () => { window.open("./docs/?p=components") } },
         { name: "Examples", callback: () => { window.open("./examples/") } },
     ] );
 
-    menubar.setButtonImage("lexgui.js", "images/icon.png", () => {window.open("https://jxarco.github.io/lexgui.js/")}, {float: "left"})
+    menubar.setButtonImage("lexgui.js", `images/icon_${ starterTheme }.png`, () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left"} );
+
+    LX.addSignal( "@on_new_color_scheme", ( el, value ) => {
+        menubar.setButtonImage("lexgui.js", `images/icon_${ value }.png` );
+    } );
 
     const commandButton = new LX.Button(null, `Search command...<span class="ml-auto">${ LX.makeKbd( ["Ctrl", "Space"], false, "bg-tertiary border px-1 rounded" ).innerHTML }</span>`, () => { LX.setCommandbarState( true ) }, {
         width: "256px", className: "right", buttonClass: "border fg-tertiary bg-secondary" }
     );
     menubar.root.appendChild( commandButton.root );
 
-    const starterTheme = LX.getTheme();
-
     menubar.addButtons( [
         {
             title: "Github",
             icon: "Github@solid",
-            callback:  (event) => {
-                window.open( "https://github.com/jxarco/lexgui.js/", "_blank" );
-            }
+            callback:  (event) => window.open( "https://github.com/jxarco/lexgui.js/", "_blank" )
         },
         {
             title: "Switch Theme",
             icon: starterTheme == "dark" ? "Moon" : "Sun",
             swap: starterTheme == "dark" ? "Sun" : "Moon",
             callback:  (value, event) => { LX.switchTheme() }
+        },
+        {
+            title: "Switch Spacing",
+            icon: "AlignVerticalSpaceAround",
+            callback:  (value, event) => { LX.switchSpacing() }
         }
     ], { float: "right" });
 }
 
 // Header
 {
-    const header = LX.makeContainer( [ null, "auto" ], "flex flex-col border-top border-bottom gap-2 px-6 py-12", `
+    const header = LX.makeContainer( [ null, "auto" ], "flex flex-col border-top border-bottom gap-2 px-10 py-8", `
         <a>Get started with LexGUI.js <span class="text-sm fg-secondary">${ LX.version }</span></a>
         <h1>Build your application interface</h1>
-        <p class="font-light" style="max-width:32rem">A set of beautifully-designed, accessible widgets and components.
+        <p class="font-light" style="max-width:32rem">A set of beautifully-designed, accessible components.
         No complex frameworks. Pure JavaScript and CSS. Open Source.</p>
     `, area );
+
+    const headerButtons = LX.makeContainer( [ "auto", "auto" ], "flex flex-row", ``, header );
+    const getStartedButton = new LX.Button( null, "Get Started", () => window.open( "./docs/", "_blank" ), { buttonClass: "contrast p-1 px-3" } );
+    const componentsButton = new LX.Button( null, "View Components", () => window.open( "./docs/?p=components", "_blank" ), { buttonClass: "tertiary p-1 px-3" } );
+    headerButtons.appendChild( getStartedButton.root );
+    headerButtons.appendChild( componentsButton.root );
 }
 
 // Content
@@ -107,7 +120,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                         },
                         {
                             title: "Side Panel",
-                            content: "This panel contains various widgets and settings for your application.",
+                            content: "This panel contains various components and settings for your application.",
                             reference: sidePanel.root,
                             side: "left",
                             align: "start"
@@ -240,13 +253,14 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                 }
             });
 
-            // add widgets to panel branch
+            // add components to panel branch
             panel.branch("Canvas", { icon: "Palette", filter: true });
             panel.addColor("Background", "#b7a9b1", null);
             panel.addText("Text", "LexGUI.js @jxarco", null, {placeholder: "e.g. ColorPicker", icon: "Type"});
             panel.addColor("Font Color", "#303b8d", null);
             panel.addNumber("Font Size", 36, null, { min: 1, max: 48, step: 1, units: "px"});
-            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace", "Ubuntu"], "GeistSans");
+            panel.addSelect("Font Family", ["Arial", "GeistSans", "Monospace", "CascadiaCode"], "GeistSans");
+            panel.addRange("Threshold Range", [2, 7], (v) => console.log(v), { min: 0, max: 10, step: 1, className: "accent" });
             panel.addVector2("2D Position", [300, 350], null, { min: 0, max: 1024 });
             const opacityValues = [
                 [0.2, 0.3146875],
@@ -294,7 +308,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
     // Mail
     {
         const mailContainer = LX.makeContainer( [ null, "800px" ], "flex flex-col bg-primary border rounded-lg overflow-hidden" );
-        tabs.add( "Mail", mailContainer, { xselected: true } );
+        tabs.add( "Mail", mailContainer, { xselected: true, badge: { content: "5", className: "xs fg-white bg-error", asChild: true } } );
 
         const mailArea = new LX.Area();
         mailContainer.appendChild( mailArea.root );
@@ -317,7 +331,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             className: "border-right",
             headerTitle: "jxarco",
             headerSubtitle: "alexroco.30@gmail.com",
-            headerImage: "https://raw.githubusercontent.com/jxarco/lexgui.js/refs/heads/master/images/icon.png",
+            headerImage: "images/favicon.png",
             skipFooter: true,
             displaySelected: true,
             onHeaderPressed: (e, element) => { }
@@ -441,7 +455,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                     const avatarContainer = LX.makeContainer( [ "40px", "40px" ], "bg-tertiary rounded-full content-center", "", mailPreviewInfo );
 
                     const mailNames = mail.name.split( ' ' );
-                    const avatarIcon = LX.makeContainer( [ "auto", "auto" ], "font-medium text-lg self-center", mailNames[ 0 ][ 0 ] + mailNames[ 1 ][ 0 ], avatarContainer );
+                    const avatarIcon = LX.makeContainer( [ "auto", "auto" ], "font-medium self-center", mailNames[ 0 ][ 0 ] + mailNames[ 1 ][ 0 ], avatarContainer );
 
                     const senderData = LX.makeContainer( [ "auto", "auto" ], "flex flex-col gap-0.5", `
                     <div class="text-md font-semibold">${ mail.name }</div>
@@ -484,18 +498,18 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             <p class="fg-tertiary">Here's a list of your tasks for this month!</p>
         `, tasksContainer );
 
-        const tableWidget = new LX.Table(null, {
-            head: [ "Name", "Status", "Priority", "ID" ],
+        const tableComponent = new LX.Table(null, {
+            head: [ "Name", "Status", "Priority", "Date", "ID" ],
             body: [
-                [ "Alice", "In Progress", "High", 1 ],
-                [ "Bob", "Backlog", "Medium", 2 ],
-                [ "Prince", "Canceled", "Low", 3 ],
-                [ "Sean", "Done", "High", 4 ],
-                [ "Carter", "In Progress", "Medium", 5 ],
-                [ "James", "Backlog", "Low", 6 ],
-                [ "Mickey", "Todo", "Low", 7 ],
-                [ "Charlie", "Canceled", "Low", 8 ],
-                [ "Potato", "Todo", "High", 9 ]
+                [ "Alice", "In Progress", "High", "20/06/2025", 1 ],
+                [ "Bob", "Backlog", "Medium", "11/04/2025", 2 ],
+                [ "Prince", "Canceled", "Low", "13/05/2025", 3 ],
+                [ "Sean", "Done", "High", "28/07/2025", 4 ],
+                [ "Carter", "In Progress", "Medium", "20/03/2025", 5 ],
+                [ "James", "Backlog", "Low", "10/02/2025", 6 ],
+                [ "Mickey", "Todo", "Low", "08/01/2025", 7 ],
+                [ "Charlie", "Canceled", "Low", "23/05/2025", 8 ],
+                [ "Potato", "Todo", "High", "15/07/2025", 9 ]
             ]
         }, {
             selectable: true,
@@ -506,6 +520,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                 { name: "Status", options: ["Backlog", "Todo", "In Progress", "Done", "Canceled"] },
                 { name: "Priority", options: ["Low", "Medium", "High"] },
                 { name: "ID", type: "range", min: 0, max: 9, step: 1, units: "hr" },
+                { name: "Date", type: "date", xdefault: ["23/07/2025", "29/07/2025"] },
             ],
             rowActions: [
                 { icon: "Edit", title: "Edit Row" },
@@ -522,7 +537,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
                 ]
             }
         });
-        tasksContainer.appendChild( tableWidget.root );
+        tasksContainer.appendChild( tableComponent.root );
     }
 
     // Code
@@ -560,8 +575,7 @@ const area = await LX.init( { layoutMode: "document", rootClass: "wrapper" } );
             {
                 title: "LexGUI",
                 items: [
-                    { title: "Documentation", link: "https://jxarco.github.io/lexgui.js/docs/" },
-                    { title: "Source code", link: "https://github.com/jxarco/lexgui.js/" }
+                    { title: "Source code on Github", link: "https://github.com/jxarco/lexgui.js/" }
                 ]
             },
             {

package/examples/{all_widgets.html → all-components.html}

@@ -6,13 +6,13 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
 
     <script type="importmap">
       {
         "imports": {
           "lexgui": "../build/lexgui.module.js",
-          "lexgui/components/": "../build/components/"
+          "lexgui/extensions/": "../build/extensions/"
         }
       }
   </script>
@@ -25,13 +25,14 @@
 
 <script type="module">
     import { LX } from 'lexgui';
-    import 'lexgui/components/codeeditor.js';
+    import 'lexgui/extensions/codeeditor.js';
 
     window.LX = LX;
 
     // Init library and get main area
     let area = await LX.init();
 
+    const starterTheme = LX.getTheme();
     const menubar = area.addMenubar( [], { sticky: false } );
     menubar.addButtons([
         {
@@ -44,11 +45,20 @@
             icon: "Moon",
             swap: "Sun",
             callback: (swapValue) => { LX.setTheme(swapValue ? "light" : "dark") }
+        },
+        {
+            title: "Switch Spacing",
+            icon: "AlignVerticalSpaceAround",
+            callback:  (value, event) => { LX.switchSpacing() }
         }
     ]);
 
     menubar.setButtonIcon("Github", "Github", () => { window.open("https://github.com/jxarco/lexgui.js/") })
-    menubar.setButtonImage("lexgui.js", "../images/icon.png", () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" })
+    menubar.setButtonImage("lexgui.js", `../images/icon_small_${ starterTheme }.png`, () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" } );
+
+    LX.addSignal( "@on_new_color_scheme", ( el, value ) => {
+        menubar.setButtonImage( "lexgui.js", `../images/icon_small_${ value }.png` );
+    } );
 
     var [middle, right] = area.split({ sizes: ["70%", "30%"], minimizable: true });
     var [left, center] = middle.split({ sizes: ["50%", null], minimizable: true });
@@ -252,6 +262,7 @@
             panelB.addRange("Warning", 2, null, { min: 0, max: 10, step: 1, className: "warning" });
             panelB.addRange("Inverted", 22, null, { min: 20, max: 48, step: 1, left: true });
             panelB.addRange("NoFill", 10, null, { min: 1, max: 48, step: 1, fill: false });
+            panelB.addRange("With Range", [2, 6], null, { min: 1, max: 10, step: 1 });
             panelB.addRange("Disabled", 29, null, { min: 1, max: 48, step: 1, disabled: true });
             panelB.branch("Select Inputs", { closed: closedDefault });
             panelB.addSelect("Classic", selectValues, "Unity", null);
@@ -268,6 +279,13 @@
             panelB.addFile("Disabled", null, { disabled: true });
         }
 
+        // Rate
+        {
+            panelC.branch("Rate", { closed: closedDefault });
+            panelC.addRate("Basic Rate", 2, null);
+            panelC.addRate("Rate With Halfs", 4.5, null, { allowHalf: true });
+        }
+
         // DatePicker
         {
             panelC.branch("Date Picker", { closed: closedDefault });

package/examples/{area_tabs.html → area-tabs.html}

@@ -6,12 +6,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Area Tabs Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -64,7 +64,7 @@
 
         var ctx = canvas.getContext("2d");
 
-        // Get values from panel widgets (e.g. color value)
+        // Get values from panel components (e.g. color value)
         ctx.fillStyle = panelA.getValue('Background');
 
         ctx.fillRect(0, 0, canvas.width, canvas.height);

package/examples/{asset_view.html → asset-view.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI AssetView Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/codeeditor.js';
+    import 'lexgui/extensions/codeeditor.js';
 
     // Init library and get main area
     let area = await LX.init();

package/examples/{code_editor.html → code-editor.html}

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Code Editor Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -20,7 +20,7 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/codeeditor.js';
+    import 'lexgui/extensions/codeeditor.js';
 
     // init library and get main area
     let area = await LX.init();
@@ -64,7 +64,7 @@
     editor.loadFile("../data/rust_sample.rs");
     editor.loadFile("../data/animation.bml", { language: "JSON" });
     editor.loadFile("../data/CMakeLists.txt", { language: "CMake" });
-    editor.loadFile("../localhost.bat");
+    editor.loadFile("../data/localhost.bat");
     editor.loadFile("../index.html");
 
     if (!fileExplorer) {

package/examples/dialogs.html

@@ -5,12 +5,12 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Dialogs Demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -97,7 +97,7 @@
 
         var ctx = canvas.getContext("2d");
 
-        // Get values from panel widgets (e.g. color value)
+        // Get values from panel component (e.g. color value)
         ctx.fillStyle = pocketDialog.panel.getValue('Background');
         ctx.fillRect(0, 0, canvas.width, canvas.height);
 

package/examples/editor.html

@@ -6,13 +6,13 @@
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     <title>LexGUI Editor demo</title>
     <link rel="stylesheet" href="../build/lexgui.css">
-    <link rel="icon" href="../images/icon.png">
+    <link rel="icon" href="../images/favicon.png">
 
     <script type="importmap">
         {
           "imports": {
             "lexgui": "../build/lexgui.module.js",
-            "lexgui/components/": "../build/components/"
+            "lexgui/extensions/": "../build/extensions/"
           }
         }
     </script>
@@ -26,9 +26,9 @@
 <script type="module">
 
     import { LX } from 'lexgui';
-    import 'lexgui/components/codeeditor.js';
-    import 'lexgui/components/timeline.js';
-    import 'lexgui/components/audio.js';
+    import 'lexgui/extensions/codeeditor.js';
+    import 'lexgui/extensions/timeline.js';
+    import 'lexgui/extensions/audio.js';
 
     window.LX = LX;
 
@@ -121,7 +121,7 @@
                         { name: "GLTF", kbd: "G" }
                     ]
                 },
-                { name: "Export", icon: "Download" }
+                { name: "Download", icon: "Download" }
             ]
         },
         {
@@ -130,7 +130,7 @@
                 {
                     name: "Settings", icon: "Settings2", callback: () => {
                         const dialog = new LX.Dialog("Settings", p => {
-                            p.addText("A Text", "Testing first widget");
+                            p.addText("A Text", "Testing first Component");
                             p.sameLine(3);
                             p.addLabel("Buttons:");
                             p.addButton(null, "Click me", () => {
@@ -234,11 +234,20 @@
             icon: starterTheme == "dark" ? "Moon" : "Sun",
             swap: starterTheme == "dark" ? "Sun" : "Moon",
             callback: (value, event) => { LX.switchTheme() }
+        },
+        {
+            title: "Switch Spacing",
+            icon: "AlignVerticalSpaceAround",
+            callback:  (value, event) => { LX.switchSpacing() }
         }
     ]);
 
     menubar.setButtonIcon("Github", "Github@solid", () => { window.open("https://github.com/jxarco/lexgui.js/") })
-    menubar.setButtonImage("lexgui.js", "../images/icon.png", () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" })
+    menubar.setButtonImage("lexgui.js", `../images/icon_small_${ starterTheme }.png`, () => { window.open("https://jxarco.github.io/lexgui.js/") }, { float: "left" } );
+
+    LX.addSignal( "@on_new_color_scheme", ( el, value ) => {
+        menubar.setButtonImage( "lexgui.js", `../images/icon_small_${ value }.png` );
+    } );
 
     // split main area
     var [left, right] = area.split({ sizes: ["70%", "30%"], minimizable: true });
@@ -522,7 +531,7 @@
 
         var ctx = canvas.getContext("2d");
 
-        // Get values from panel widgets (e.g. color value)
+        // Get values from panel components (e.g. color value)
         ctx.fillStyle = sidePanel.getValue('Background');
 
         ctx.fillRect(0, 0, canvas.width, canvas.height);
@@ -657,7 +666,7 @@
             }
         });
 
-        // add widgets to panel branch
+        // add components to panel branch
         panel.branch("Canvas", { icon: "Palette", filter: true });
         panel.addColor("Background", "#b7a9b1", (value, event) => {
             console.log(value);
@@ -837,9 +846,9 @@
                 }
             ], { vertical: false /*, showNames: true */ });
 
-            panel.addText(null, "Widgets below are out the tabs", null, { disabled: true })
+            panel.addText(null, "Component below are out the tabs", null, { disabled: true })
 
-            // update panel values uising widget name
+            // update panel values uising component name
             panel.addNumber("HeadRoll Value", 0, (value, event) => {
                 panel.setValue('HeadRoll', value);
             }, { min: -1, max: 1, step: 0.1 });
@@ -882,9 +891,9 @@
             ]);
 
             /************** */
-            // Custom Widget
+            // Custom Component
 
-            LX.ADD_CUSTOM_WIDGET("Shader", {
+            LX.ADD_CUSTOM_COMPONENT("Shader", {
                 icon: "Box",
                 default: {
                     position: [0, 0],
@@ -911,9 +920,9 @@
 
     function fillBottomPanel(panel) {
 
-        // add widgets to panel branch
+        // add components to panel branch
         panel.branch("Information", { icon: "Info" });
-        window.tableWidget = panel.addTable("A Table", {
+        window.tableComponent = panel.addTable("A Table", {
             head: ["Name", "Status", "Priority", "ID"],
             body: [
                 ["Alice", "In Progress", "High", 1],
@@ -946,7 +955,7 @@
                     {
                         name: "Export", callback: (a) => {
                             tableData.body[index][0] = "Alex";
-                            tableWidget.refresh();
+                            tableComponent.refresh();
                         }
                     },
                     { name: "Make a copy", callback: (a) => console.log(a) },
@@ -1103,7 +1112,7 @@
                         break;
                 }
             })
-        }, { title: 'Lexemes', close: true, minimize: false, size: ["80%"], scroll: true, resizable: true, draggable: true });
+        }, { modal: true, title: 'Lexemes', close: true, minimize: false, size: ["80%"], scroll: true, resizable: true, draggable: true });
     }
 
 </script>