neo.mjs 6.10.15 → 6.10.17

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.10.15'
+         * @member {String} version='6.10.17'
          */
-        version: '6.10.15'
+        version: '6.10.17'
     }
 
     /**

package/apps/form/neo-config.json

@@ -3,5 +3,5 @@
     "basePath"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "LocalStorage", "Stylesheet"]
+    "mainThreadAddons": ["DragDrop", "LocalStorage", "Navigator", "Stylesheet"]
 }

package/apps/form/view/SideNavList.mjs

@@ -16,6 +16,10 @@ class SideNavList extends List {
          * @protected
          */
         baseCls: ['form-side-nav-list', 'neo-list'],
+        /**
+         * @member {Boolean} itemsFocusable=true
+         */
+        itemsFocusable: true,
         /**
          * @member {Boolean} useHeaders=true
          */

package/apps/form/view/pages/Page6.mjs

@@ -20,24 +20,26 @@ class Page6 extends FormPageContainer {
          * @member {Object} itemDefaults
          */
         itemDefaults: {
-            module: TextArea
+            module  : TextArea,
+            autoGrow: true
         },
         /**
          * @member {Object[]} items
          */
         items: [{
-            height   : 200,
             labelText: 'Page 6 Field 1',
+            minHeight: 150,
             name     : 'field1',
             required : true,
             value    : 'Lorem ipsum'
         }, {
-            height   : 300,
             labelText: 'Page 6 Field 2',
+            minHeight: 150,
             name     : 'field2'
         }, {
             labelText: 'Page 6 Field 3',
-            name     : 'field3'
+            name     : 'field3',
+            readOnly : true
         }]
     }
 }

package/apps/portal/neo-config.json

@@ -3,6 +3,6 @@
     "basePath"        : "../../",
     "environment"     : "development",
     "mainPath"        : "./Main.mjs",
-    "mainThreadAddons": ["DragDrop", "HighlightJS", "Stylesheet", "Markdown"],
+    "mainThreadAddons": ["DragDrop", "HighlightJS", "Navigator", "Stylesheet", "Markdown"],
     "themes"          : ["neo-theme-neo-light"]
 }

package/apps/portal/view/learn/LivePreview.mjs

@@ -1,6 +1,6 @@
-import Base         from '../../../../src/container/Base.mjs';
+import Base from '../../../../src/container/Base.mjs';
 import TabContainer from '../../../../src/tab/Container.mjs';
-import TextArea     from '../../../../src/form/field/TextArea.mjs';
+import TextArea from '../../../../src/form/field/TextArea.mjs';
 
 /**
  * @class Portal.view.learn.LivePreview
@@ -76,6 +76,7 @@ class LivePreview extends Base {
 
         const className = this.findLastClassName(source);
 
+
         source.split('\n').forEach(line => {
             let importMatch = line.match(importRegex);
             if (importMatch) {

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.10.15'
+         * @member {String} version='6.10.17'
          */
-        version: '6.10.15'
+        version: '6.10.17'
     }
 
     /**

package/examples/button/base/neo-config.json

@@ -2,6 +2,5 @@
     "appPath"    : "examples/button/base/app.mjs",
     "basePath"   : "../../../",
     "environment": "development",
-    "mainPath"   : "./Main.mjs",
-    "themes"     : ["neo-theme-neo-light"]   
+    "mainPath"   : "./Main.mjs"
 }

package/package.json

@@ -1,73 +1,73 @@
 {
-  "name"            : "neo.mjs",
-  "version"         : "6.10.15",
-  "description"     : "The webworkers driven UI framework",
-  "type"            : "module",
-  "repository"      : {
-    "type" : "git",
-    "url"  : "https://github.com/neomjs/neo.git"
-  },
-  "bin"             : {
-    "neo-cc" : "./buildScripts/createClass.mjs"
-  },
-  "scripts"         : {
-    "add-config"             : "node ./buildScripts/addConfig.mjs",
-    "build-all"              : "node ./buildScripts/buildAll.mjs -f -n",
-    "build-all-questions"    : "node ./buildScripts/buildAll.mjs -f",
-    "build-themes"           : "node ./buildScripts/buildThemes.mjs -f",
-    "build-threads"          : "node ./buildScripts/webpack/buildThreads.mjs -f",
-    "convert-design-tokens"  : "node ./buildScripts/convertDesignTokens.mjs",
-    "create-app"             : "node ./buildScripts/createApp.mjs",
-    "create-app-minimal"     : "node ./buildScripts/createAppMinimal.mjs",
-    "create-class"           : "node ./buildScripts/createClass.mjs",
-    "create-component"       : "node ./buildScripts/createComponent.mjs",
-    "generate-docs-json"     : "node ./buildScripts/docs/jsdocx.mjs",
-    "inject-package-version" : "node ./buildScripts/injectPackageVersion.mjs",
-    "server-start"           : "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
-    "test"                   : "echo \"Error: no test specified\" && exit 1",
-    "watch-themes"           : "node ./buildScripts/watchThemes.mjs"
-  },
-  "keywords"        : [
-    "javascript",
-    "frontend",
-    "framework",
-    "webworker",
-    "ecmascript",
-    "css",
-    "json"
-  ],
-  "author"          : "Tobias Uhlig, Rich Waters",
-  "license"         : "MIT",
-  "bugs"            : {
-    "url" : "https://github.com/neomjs/neo/issues"
-  },
-  "homepage"        : "https://neomjs.github.io/pages/",
-  "devDependencies" : {
-    "@fortawesome/fontawesome-free" : "^6.5.1",
-    "autoprefixer"                  : "^10.4.17",
-    "chalk"                         : "^5.3.0",
-    "clean-webpack-plugin"          : "^4.0.0",
-    "commander"                     : "^11.1.0",
-    "cssnano"                       : "^6.0.3",
-    "envinfo"                       : "^7.11.0",
-    "fs-extra"                      : "^11.2.0",
-    "highlightjs-line-numbers.js"   : "^2.8.0",
-    "inquirer"                      : "^9.2.12",
-    "neo-jsdoc"                     : "1.0.1",
-    "neo-jsdoc-x"                   : "1.0.5",
-    "postcss"                       : "^8.4.33",
-    "sass"                          : "^1.70.0",
-    "siesta-lite"                   : "5.5.2",
-    "showdown"                      : "^2.1.0",
-    "url"                           : "^0.11.3",
-    "webpack"                       : "^5.90.0",
-    "webpack-cli"                   : "^5.1.4",
-    "webpack-dev-server"            : "4.15.1",
-    "webpack-hook-plugin"           : "^1.0.7",
-    "webpack-node-externals"        : "^3.0.0"
-  },
-  "funding"         : {
-    "type" : "GitHub Sponsors",
-    "url"  : "https://github.com/sponsors/tobiu"
-  }
+    "name": "neo.mjs",
+    "version": "6.10.17",
+    "description": "The webworkers driven UI framework",
+    "type": "module",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/neomjs/neo.git"
+    },
+    "bin": {
+        "neo-cc": "./buildScripts/createClass.mjs"
+    },
+    "scripts": {
+        "add-config": "node ./buildScripts/addConfig.mjs",
+        "build-all": "node ./buildScripts/buildAll.mjs -f -n",
+        "build-all-questions": "node ./buildScripts/buildAll.mjs -f",
+        "build-themes": "node ./buildScripts/buildThemes.mjs -f",
+        "build-threads": "node ./buildScripts/webpack/buildThreads.mjs -f",
+        "convert-design-tokens": "node ./buildScripts/convertDesignTokens.mjs",
+        "create-app": "node ./buildScripts/createApp.mjs",
+        "create-app-minimal": "node ./buildScripts/createAppMinimal.mjs",
+        "create-class": "node ./buildScripts/createClass.mjs",
+        "create-component": "node ./buildScripts/createComponent.mjs",
+        "generate-docs-json": "node ./buildScripts/docs/jsdocx.mjs",
+        "inject-package-version": "node ./buildScripts/injectPackageVersion.mjs",
+        "server-start": "webpack serve -c ./buildScripts/webpack/webpack.server.config.mjs --open",
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "watch-themes": "node ./buildScripts/watchThemes.mjs"
+    },
+    "keywords": [
+        "javascript",
+        "frontend",
+        "framework",
+        "webworker",
+        "ecmascript",
+        "css",
+        "json"
+    ],
+    "author": "Tobias Uhlig, Rich Waters",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/neomjs/neo/issues"
+    },
+    "homepage": "https://neomjs.github.io/pages/",
+    "devDependencies": {
+        "@fortawesome/fontawesome-free": "^6.5.1",
+        "autoprefixer": "^10.4.17",
+        "chalk": "^5.3.0",
+        "clean-webpack-plugin": "^4.0.0",
+        "commander": "^12.0.0",
+        "cssnano": "^6.0.3",
+        "envinfo": "^7.11.1",
+        "fs-extra": "^11.2.0",
+        "highlightjs-line-numbers.js": "^2.8.0",
+        "inquirer": "^9.2.14",
+        "neo-jsdoc": "1.0.1",
+        "neo-jsdoc-x": "1.0.5",
+        "postcss": "^8.4.33",
+        "sass": "^1.70.0",
+        "siesta-lite": "5.5.2",
+        "showdown": "^2.1.0",
+        "url": "^0.11.3",
+        "webpack": "^5.90.1",
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "4.15.1",
+        "webpack-hook-plugin": "^1.0.7",
+        "webpack-node-externals": "^3.0.0"
+    },
+    "funding": {
+        "type": "GitHub Sponsors",
+        "url": "https://github.com/sponsors/tobiu"
+    }
 }

package/resources/data/deck/learnneo/p/2023-10-14T19-25-08-153Z.md

@@ -91,6 +91,7 @@ Neo.applyClassConfig(MainView);
 export default MainView;
 </pre>
 
+
 Note the entry in `items:[]`. That's a description of the button that will be the single item in our 
 container. In Neo.mjs terms we're _configuring_ the button. Neo.mjs is a declarative framework, in 
 which components and objects are described. It's an abstraction. In other words, the code describes 

package/resources/data/deck/learnneo/p/DescribingTheUI.md

@@ -64,4 +64,4 @@ modify the code to specify `ntype:'hbox'` and run it again.
 
 Note that the layout specifies `ntype` rather than `module`. An `ntype` is an alias for a class
 that has already been imported. Containers import all the layout types, so since we've already
-imported container we can simply use `ntype` to specify which layout we want.
+imported container we can simply use `ntype` to specify which layout we want.

package/resources/data/deck/learnneo/p/Earthquakes.md

@@ -289,6 +289,7 @@ layout: {
 
 <img src="https://s3.amazonaws.com/mjs.neo.learning.images/earthquakes/EarthquakesSingleVoxStartButton.png" style="width:80%"/>
 
+
 </details>
 
 <!-- /lab -->
@@ -1403,4 +1404,6 @@ Save, refresh, and confirm that you see the value logged when you click on a map
 
 </details>
 
+
+
 <!-- /lab -->

package/resources/scss/src/apps/portal/learn/ContentView.scss

@@ -77,4 +77,5 @@
         box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
     }
 
+
 }

package/resources/scss/src/list/Base.scss

@@ -54,63 +54,7 @@
             cursor: pointer;
 
             &:hover {
-                background-color: var(--list-item-background-color-hover) !important;
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
-                color           : var(--list-container-list-color);
-            }
-            &:active {
-                background-color: var(--list-item-background-color-active);
+                background-color: var(--list-item-background-color-hover);
                 color           : var(--list-container-list-color);
             }
             &:active {

package/src/DefaultConfig.mjs

@@ -236,12 +236,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.10.15'
+     * @default '6.10.17'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.10.15'
+    version: '6.10.17'
 };
 
 Object.assign(DefaultConfig, {

package/src/button/Base.mjs

@@ -258,7 +258,7 @@ class Base extends Component {
                     menuConfig = isArray ? {} : value,
                     model      = me.getModel(),
 
-                config = {
+                config = Neo.merge({
                     module         : module.default,
                     align          : {edgeAlign : 't0-b0', target: me.id},
                     appName        : me.appName,
@@ -266,9 +266,8 @@ class Base extends Component {
                     floating       : true,
                     hidden         : true,
                     parentComponent: me,
-                    theme          : me.theme,
-                    ...menuConfig
-                };
+                    theme          : me.theme
+                }, menuConfig);
 
                 if (items) {
                     config.items = items
@@ -544,8 +543,7 @@ class Base extends Component {
         menuList.hidden = hidden;
 
         if (!hidden) {
-            await this.timeout(50);
-            menuList.focus()
+            await this.timeout(50)
         }
     }
 }

package/src/data/RecordFactory.mjs

@@ -68,9 +68,6 @@ class RecordFactory extends Base {
                             properties;
 
                         Object.defineProperties(me, {
-                            [Symbol.for('isRecord')]: {
-                                value: true
-                            },
                             _isModified: {
                                 value   : false,
                                 writable: true
@@ -129,8 +126,8 @@ class RecordFactory extends Base {
                                     }
                                 }
 
-                                Object.defineProperties(me, properties);
-                            });
+                                Object.defineProperties(me, properties)
+                            })
                         }
                     }
 
@@ -139,7 +136,7 @@ class RecordFactory extends Base {
                      * @param {Object} fields
                      */
                     set(fields) {
-                        instance.setRecordFields(model, this, fields);
+                        instance.setRecordFields(model, this, fields)
                     }
 
                     /**
@@ -147,17 +144,17 @@ class RecordFactory extends Base {
                      * @param {Object} fields
                      */
                     setSilent(fields) {
-                        instance.setRecordFields(model, this, fields, true);
+                        instance.setRecordFields(model, this, fields, true)
                     }
                 };
 
                 Object.defineProperty(cls.prototype, 'isRecord', { value : true });
                 Object.defineProperty(cls, 'isClass', { vale : true });
 
-                return ns[key];
+                return ns[key]
             }
 
-            return ns;
+            return ns
         }
     }
 

package/src/form/field/Text.mjs

@@ -1325,7 +1325,7 @@ class Text extends Base {
     onInputValueChange(data) {
         let me       = this,
             oldValue = me.value,
-            value    = data.value ? data.value.toString().trim() : me.emptyValue,
+            value    = data.value,
             vnode    = VNodeUtil.findChildVnode(me.vnode, {nodeName: 'input'});
 
         if (vnode) {
@@ -1528,7 +1528,7 @@ class Text extends Base {
             minLength    = me.minLength,
             required     = me.required,
             returnValue  = true,
-            value        = me.value ? me.value.toString().trim() : me.emptyValue,
+            value        = me.value,
             valueLength  = value?.toString().length,
             inputPattern = me.inputPattern,
             isEmpty      = value !== 0 && (!value || valueLength < 1),

package/src/form/field/TextArea.mjs

@@ -79,12 +79,20 @@ class TextArea extends Text {
         wrap_: null
     }
 
-    afterSetAutoGrow(autoGrow) {
-        autoGrow && this.syncAutoGrowMonitor();
+    /**
+     * Triggered after the autoGrow config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetAutoGrow(value, oldValue) {
+        let me = this;
+
+        value && me.syncAutoGrowMonitor();
 
         // Restore any configured height if autoGrow turned off
-        if (!autoGrow) {
-            this.afterSetHeight(this._height);
+        if (!value) {
+            me.afterSetHeight(me._height);
         }
     }
 
@@ -150,13 +158,24 @@ class TextArea extends Text {
      * @protected
      */
     afterSetValue(value, oldValue) {
-        let inputEl = this.getInputEl();
+        let me      = this,
+            inputEl = me.getInputEl();
 
         if (inputEl) {
             inputEl.html = StringUtil.escapeHtml(value);
         }
 
         super.afterSetValue(value, oldValue);
+
+        if (me.autoGrow && me.mounted && me.readOnly) {
+            setTimeout(() => {
+                Neo.main.DomAccess.monitorAutoGrowHandler({
+                    appName : me.appName,
+                    id      : inputEl.id,
+                    windowId: me.windowId
+                })
+            }, 50)
+        }
     }
 
     /**
@@ -180,14 +199,19 @@ class TextArea extends Text {
         return this.beforeSetEnumValue(value, oldValue, 'wrap', 'wrapValues');
     }
 
+    /**
+     *
+     */
     async syncAutoGrowMonitor() {
-        if (this.mounted && this.autoGrow) {
-            // Delegate monitoring of sizes to the VDOM thread.
+        let me = this;
+
+        if (me.mounted && me.autoGrow) {
+            // Delegate monitoring of sizes to the main thread.
             Neo.main.DomAccess.monitorAutoGrow({
-                appName  : this.appName,
-                id       : this.getInputElId(),
-                autoGrow : this.autoGrow
-            });
+                appName  : me.appName,
+                id       : me.getInputElId(),
+                autoGrow : me.autoGrow
+            })
         }
     }
 }

package/src/layout/Flexbox.mjs

@@ -85,7 +85,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetAlign(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'align')
+        oldValue && this.updateInputValue(value, oldValue, 'align');
     }
 
     /**
@@ -95,7 +95,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetDirection(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'direction')
+        oldValue && this.updateInputValue(value, oldValue, 'direction');
     }
 
     /**
@@ -111,7 +111,7 @@ class Flexbox extends Base {
             style = item.wrapperStyle;
 
         style.gap = value;
-        item.wrapperStyle = style
+        item.wrapperStyle = style;
     }
 
     /**
@@ -121,7 +121,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetPack(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'pack')
+        oldValue && this.updateInputValue(value, oldValue, 'pack');
     }
 
     /**
@@ -131,7 +131,7 @@ class Flexbox extends Base {
      * @protected
      */
     afterSetWrap(value, oldValue) {
-        oldValue && this.updateInputValue(value, oldValue, 'wrap')
+        oldValue && this.updateInputValue(value, oldValue, 'wrap');
     }
 
     /**
@@ -143,11 +143,11 @@ class Flexbox extends Base {
             flex  = style.flex || item.flex || (this.align === 'stretch' ? 1 : '0 1 auto');
 
         if (flex === 1) {
-            flex = '1 1 auto'
+            flex = '1 1 auto';
         }
 
         style.flex = flex;
-        item.wrapperStyle = style
+        item.wrapperStyle = style;
     }
 
     /**
@@ -160,7 +160,7 @@ class Flexbox extends Base {
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Flexbox: applyRenderAttributes -> container not yet created', me.containerId)
+            Neo.logError('layout.Flexbox: applyRenderAttributes -> container not yet created', me.containerId);
         }
 
         NeoArray.add(wrapperCls, prefix + 'container');
@@ -170,7 +170,7 @@ class Flexbox extends Base {
         me.pack      && NeoArray.add(wrapperCls, prefix + 'pack-'      + me.pack);
         me.wrap      && NeoArray.add(wrapperCls, prefix + 'wrap-'      + me.wrap);
 
-        container.wrapperCls = wrapperCls
+        container.wrapperCls = wrapperCls;
     }
 
     /**
@@ -181,7 +181,7 @@ class Flexbox extends Base {
      * @returns {String|null} value
      */
     beforeSetAlign(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'alignValues', 'align')
+        return this.testInputValue(value, oldValue, 'alignValues', 'align');
     }
 
     /**
@@ -203,7 +203,7 @@ class Flexbox extends Base {
      * @returns {String|null} value
      */
     beforeSetPack(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'packValues', 'pack')
+        return this.testInputValue(value, oldValue, 'packValues', 'pack');
     }
 
     /**
@@ -214,7 +214,7 @@ class Flexbox extends Base {
      * @returns {String} value
      */
     beforeSetWrap(value, oldValue) {
-        return this.testInputValue(value, oldValue, 'wrapValues', 'wrap')
+        return this.testInputValue(value, oldValue, 'wrapValues', 'wrap');
     }
 
     /**
@@ -227,7 +227,7 @@ class Flexbox extends Base {
         let style = item.wrapperStyle || {};
 
         style.flex = item.flex || null;
-        item.wrapperStyle = style
+        item.wrapperStyle = style;
     }
 
     /**
@@ -242,17 +242,25 @@ class Flexbox extends Base {
             wrapperCls = container?.wrapperCls || [];
 
         if (!container) {
-            Neo.logError('layout.Flexbox: removeRenderAttributes -> container not yet created', me.containerId)
+            Neo.logError('layout.Flexbox: removeRenderAttributes -> container not yet created', me.containerId);
         }
 
         NeoArray.remove(wrapperCls, prefix + 'container');
 
-        me.align     && NeoArray.remove(wrapperCls, prefix + 'align-'     + me.align);
-        me.direction && NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction);
-        me.pack      && NeoArray.remove(wrapperCls, prefix + 'pack-'      + me.pack);
-        me.wrap      && NeoArray.remove(wrapperCls, prefix + 'wrap-'      + me.wrap);
+        if (me.align) {
+            NeoArray.remove(wrapperCls, prefix + 'align-' + me.align);
+        }
+        if (me.direction) {
+            NeoArray.remove(wrapperCls, prefix + 'direction-' + me.direction);
+        }
+        if (me.pack) {
+            NeoArray.remove(wrapperCls, prefix + 'pack-' + me.pack);
+        }
+        if (me.wrap) {
+            NeoArray.remove(wrapperCls, prefix + 'wrap-' + me.wrap);
+        }
 
-        container.wrapperCls = wrapperCls
+        container.wrapperCls = wrapperCls;
     }
 
     /**
@@ -269,10 +277,10 @@ class Flexbox extends Base {
 
         if (!NeoArray.hasItem(validValues, value)) {
             Neo.logError(this.containerId, '-> layout: supported values for "' + propertyName + '" are' , validValues);
-            return oldValue
+            return oldValue;
         }
 
-        return value
+        return value;
     }
 
     /**
@@ -292,10 +300,10 @@ class Flexbox extends Base {
             NeoArray.remove(wrapperCls, prefix + propertyName + '-' + oldValue);
 
             if (value !== null) {
-                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value)
+                NeoArray.add(wrapperCls, prefix + propertyName + '-' + value);
             }
 
-            container.wrapperCls = wrapperCls
+            container.wrapperCls = wrapperCls;
         }
     }
 }

package/src/layout/HBox.mjs

@@ -29,7 +29,7 @@ class HBox extends Flexbox {
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed width
-        !item.width && super.applyChildAttributes(item)
+        !item.width && super.applyChildAttributes(item);
     }
 }
 

package/src/layout/VBox.mjs

@@ -29,7 +29,7 @@ class VBox extends Flexbox {
      */
     applyChildAttributes(item) {
         // Do not apply flex if fixed height
-        !item.height && super.applyChildAttributes(item)
+        !item.height && super.applyChildAttributes(item);
     }
 }
 

package/src/list/Base.mjs

@@ -250,30 +250,32 @@ class Base extends Component {
      * @protected
      */
     afterSetHeaderlessActiveIndex(value, oldValue) {
-        let me = this,
-            activeIndex;
+        let me = this;
 
         if (Neo.isNumber(value)) {
-            activeIndex = me.getActiveIndex(value);
-
-            me.activeIndex = activeIndex
+            me.activeIndex = me.store.getCount() ? value: null
         } else if (Neo.isNumber(oldValue)) {
             me.activeIndex = null
         }
     }
 
-    afterSetMounted(value) {
+    /**
+     * Triggered after the mounted config got changed
+     * @param {Boolean} value
+     * @param {Boolean} oldValue
+     * @protected
+     */
+    afterSetMounted(value, oldValue) {
         const me = this;
 
         // Tear down navigation before we lose the element
         if (!value && me.hasNavigator) {
             Neo.main.addon.Navigator.unsubscribe(me.navigator);
+
             me.hasNavigator = false;
-            me.activeIndex = null
+            me.activeIndex  = null
         }
 
-        super.afterSetMounted(...arguments);
-
         if (value) {
             // Set up item navigation in the list
             if (!me.hasNavigator) {
@@ -282,11 +284,15 @@ class Base extends Component {
                     id       : me.id,
                     selector : `.${me.itemCls}:not(.neo-disabled,.neo-list-header)`,
                     ...me.navigator
-                }
-                me.hasNavigator = true;
+                };
+
+                me.hasNavigator = true
             }
+
             Neo.main.addon.Navigator.subscribe(me.navigator)
         }
+
+        super.afterSetMounted(value, oldValue)
     }
 
     /**
@@ -546,10 +552,10 @@ class Base extends Component {
 
     /**
      * Calls focus() on the top level DOM node of this component or on a given node via id
-     * @param {String} [id]
+     * @param {String} id
      */
     focus(id) {
-        Neo.main.addon.Navigator.navigateTo(id, this.navigator)
+        Neo.main.addon.Navigator.navigateTo([id, this.navigator])
     }
 
     /**

package/src/main/DomAccess.mjs

@@ -88,6 +88,7 @@ class DomAccess extends Base {
                 'getScrollingDimensions',
                 'measure',
                 'monitorAutoGrow',
+                'monitorAutoGrowHandler',
                 'navigate',
                 'navigateTo',
                 'scrollBy',
@@ -362,9 +363,8 @@ class DomAccess extends Base {
         if (node) {
             // The children property means focus inner elements if possible.
             if (!DomUtils.isFocusable(node) && data.children) {
-                // Prefer to focus input fields over buttons.
-                // querySelector('input,textarea,button') returns buttons first, so use multiple calls. 
-                node = node.querySelector('input:not(:disabled)') || node.querySelector('textarea:not(:disabled)') || node.querySelector('button:not(:disabled)') || [...node.querySelectorAll('*')].find(DomUtils.isFocusable);
+                // query for the first focusable decendent
+                node = DomUtils.query(node, DomUtils.isFocusable);
             }
             if (node) {
                 node.focus();
@@ -638,8 +638,15 @@ class DomAccess extends Base {
         })
     }
 
-    monitorAutoGrowHandler({ target }) {
+    /**
+     *
+     * @param {Event|Object} data
+     * @param {String} [data.id]
+     * @param {HTMLElement} [data.target]
+     */
+    monitorAutoGrowHandler(data) {
         const
+            target                 = data.target || this.getElement(data.id),
             { style }              = target,
             { style : inputStyle } = target.closest('.neo-textarea');
 

package/src/main/addon/Navigator.mjs

@@ -30,9 +30,9 @@ class Navigator extends Base {
          */
         remote: {
             app: [
+                'navigateTo',
                 'subscribe',
-                'unsubscribe',
-                'navigateTo'
+                'unsubscribe'
             ]
         },
         /**
@@ -114,7 +114,7 @@ class Navigator extends Base {
     // The navigables we are dealing with, if they are focusable must *not* be tabbable.
     // Only *one* must be tabbable, so that tabbing into the subject element goes to the
     // one active element.
-    // 
+    //
     // Tabbing *from* that must exit the subject element.
     //
     // So we must ensure that all the focusable elements except the first are not tabbable.
@@ -127,7 +127,14 @@ class Navigator extends Base {
         }
 
         const
-            focusables        = DomUtils.queryAll(data.subject, DomUtils.isFocusable),
+            // Extract all our navigable items, and find the focusable within
+            focusables = Array.from(data.subject.querySelectorAll(data.selector)).reduce((value,item ) => {
+                const f = DomUtils.query(item, DomUtils.isFocusable);
+                if (f){
+                    value.push(f);
+                }
+                return value;
+            }, []),
             defaultActiveItem = focusables[0] || data.subject.querySelector(data.selector);
 
         // Ensure the items are not tabbable.
@@ -192,7 +199,7 @@ class Navigator extends Base {
         const { target } = e;
 
         // Clear active class from the item we are leaving from.
-        target.closest(data.selector).classList.remove(data.activeCls);
+        target.closest(data.selector)?.classList.remove(data.activeCls);
 
         // On focusout, leave the last active item as tabbable so user can TAB back in here
         if (!DomUtils.isTabbable(target)) {
@@ -205,7 +212,7 @@ class Navigator extends Base {
 
         // If there was a focusable under the mouse, mousedown will have focused it and and we
         // will have respond to that in navigateFocusInHandler.
-        // If not, we navigate programatically.
+        // If not, we navigate programmatically.
         if (target && !data.findFocusable(target)) {
             this.navigateTo(target, data);
         }
@@ -214,8 +221,8 @@ class Navigator extends Base {
     navigateMouseDownHandler(e, data) {
         const target = e.target.closest(data.selector);
 
-        // If there is a focusable undet the mouse, it will take focus, and we respond to that in navigateFocusInHandler.
-        // If not, we have to programatically activate on click, but we must not draw focus away from
+        // If there is a focusable under the mouse, it will take focus, and we respond to that in navigateFocusInHandler.
+        // If not, we have to programmatically activate on click, but we must not draw focus away from
         // where it is, so preventDefault
         if (target && !data.findFocusable(target)) {
             e.preventDefault();
@@ -241,12 +248,12 @@ class Navigator extends Base {
             if (containerStyle.display === 'flex' && containerStyle.flexDirection === 'row'
                 || itemStyle.display === 'inline' || itemStyle.display === 'inline-block') {
                 data.previousKey = 'ArrowLeft';
-                data.nextKey = 'ArrowRight';
+                data.nextKey     = 'ArrowRight';
             }
             // Child elements layed out vertically.
             else {
                 data.previousKey = 'ArrowUp';
-                data.nextKey = 'ArrowDown';
+                data.nextKey     = 'ArrowDown';
             }
         }
 
@@ -314,7 +321,7 @@ class Navigator extends Base {
     }
 
     /**
-     * Navigates to the passed 
+     * Navigates to the passed
      * @param {String|Number} newActiveElement The id of the new active element in the subject
      * element, or the index of the item.
      * @param {Object} data The data block as passed to {@link #subscribe}

package/src/menu/List.mjs

@@ -38,6 +38,10 @@ class List extends BaseList {
          * @member {Boolean} hideOnLeafItemClick=true
          */
         hideOnLeafItemClick: true,
+        /**
+         * @member {Boolean} itemsFocusable=true
+         */
+        itemsFocusable: true,
         /**
          * Optionally pass menu.Store data directly
          * @member {Object[]|null} items_=null
@@ -100,7 +104,7 @@ class List extends BaseList {
          * @member {Object} _vdom
          */
         _vdom:
-        {tag: 'ul', tabIndex: -1, cn: []}
+        {tag: 'ul', cn: []}
     }
 
     /**

package/src/model/Component.mjs

@@ -494,7 +494,7 @@ class Component extends Base {
         let me = this,
             data, keyLeaf, parentModel, scope;
 
-        if (Neo.isObject(value) && !value[Symbol.for('isRecord')]) {
+        if (Neo.isObject(value) && !value.isRecord) {
             Object.entries(value).forEach(([dataKey, dataValue]) => {
                 me.internalSetData(`${key}.${dataKey}`, dataValue, originModel)
             })

package/src/tree/List.mjs

@@ -60,11 +60,9 @@ class Tree extends Base {
          * @member {Object} _vdom
          */
         _vdom:
-            {
-                cn: [
-                    {tag: 'ul', cls: ['neo-list-container', 'neo-list'], tabIndex: -1, cn: []}
-                ]
-            }
+        {cn: [
+            {tag: 'ul', cls: ['neo-list-container', 'neo-list'], tabIndex: -1, cn: []}
+        ]}
     }
 
     /**

package/src/vdom/Helper.mjs

@@ -1,5 +1,6 @@
 import Base      from '../core/Base.mjs';
 import NeoArray  from '../util/Array.mjs';
+import NeoString from '../util/String.mjs';
 import Style     from '../util/Style.mjs';
 import VNode     from './VNode.mjs';
 import VNodeUtil from '../util/VNode.mjs';
@@ -577,14 +578,18 @@ class Helper extends Base {
         Object.entries(attributes).forEach(([key, value]) => {
             if (this.voidAttributes.includes(key)) {
                 if (value === 'true') { // vnode attribute values get converted into strings
-                    string += ` ${key}`;
+                    string += ` ${key}`
                 }
             } else if (key !== 'removeDom') {
-                string += ` ${key}="${value?.replaceAll?.('"', '"') ?? value}"`;
+                if (key === 'value') {
+                    value = NeoString.escapeHtml(value)
+                }
+
+                string += ` ${key}="${value?.replaceAll?.('"', '"') ?? value}"`
             }
         });
 
-        return string + '>';
+        return string + '>'
     }
 
     /**

package/resources/data/deck/learnneo/p/AddingProperties.md

@@ -1 +0,0 @@
-### todo: Adding Properties

package/resources/data/deck/learnneo/p/ComponentState.md

@@ -1 +0,0 @@
-### todo: Updating View State

package/resources/scss/src/apps/newwebsite/Viewport.scss

@@ -1,32 +0,0 @@
-.newwebsite-viewport {
-    align-items    : center !important;
-    display        : flex !important;
-    gap            : 48px;
-    justify-content: center !important;
-    padding        : 10% 15% 15% 15%;
-}
-
-.button-group {
-    display       : flex !important;
-    flex-direction: row-reverse !important;
-    gap           : 8px !important;
-}
-
-.neo-h1 {
-    font-size  : 48px;
-    font-weight: 600;
-    text-align : center;
-}
-
-.vector {
-    background-image   : url("../../../../../../resources/images/Neo_Vector.svg");
-    background-position: center center;
-    background-repeat  : no-repeat;
-    background-size    : contain;
-    height             : 150px;
-    width              : 100%;
-}
-
-.get-started-button {
-    cursor: not-allowed !important;
-}

package/resources/scss/theme-neo-light/design-tokens/Components.scss

@@ -1,3 +0,0 @@
-:root .neo-theme-neo-light {
-    --cmp-button-bg                       : blue;
-}